/* Fonts are served from this site, not from Google. One less third party, no
   tracking request on page load, and the pages still render correctly opened
   straight off a disk with no network. */
@font-face{font-family:'Cinzel';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/cinzel-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/cinzel-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/cinzel-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Crimson Text';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/crimson-text-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Crimson Text';font-style:italic;font-weight:400;font-display:swap;
  src:url('../fonts/crimson-text-latin-400-italic.woff2') format('woff2')}
@font-face{font-family:'Crimson Text';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/crimson-text-latin-600-normal.woff2') format('woff2')}

/* ==========================================================================
   STEEL AGE — house style
   One stylesheet for eight standalone pages. The frame never scrolls: the
   sketch draws a 32x18 grid at 1920x1080, so the title block is 5x2, the nav
   27x2, the art panel 15x16 and the leaf 17x16. Those proportions are held as
   percentages, and type is sized in vh so a shorter screen gets smaller type
   rather than a scrollbar.
   ========================================================================== */

:root{
  --parchment:#f0e8d8;
  --parchment-deep:#e6dac1;
  --parchment-shade:#d9c9a9;
  --gold:#9a7a3a;
  --gold-bright:#c7a766;
  --gold-lit:#ffe9b0;
  /* The ground is the SHIPPED book's: every Mixam print page measures 20,13,7
     at the border. The earlier #2a2018 came from the hand-built art pages and
     the sketch tool, and read a shade lighter than the book on the shelf. */
  --brown:#140d07;
  --brown-mid:#241910;
  --brown-line:#4a3a24;
  --ink:#2c241b;
  --ink-soft:#4d4133;

  --bar: 11.11vh;          /* 2 of 18 rows */
  --brand: 15.625%;        /* 5 of 32 columns */
  --plate: 46.875%;        /* 15 of 32 columns */
}

*{box-sizing:border-box;margin:0;padding:0}

/* Scrollbars, site-wide, in Solkaris's fittings (v20.09 "the brass fittings"):
   thin, dark track, muted thumb, brass on hover, squared corners. Firefox
   takes the two properties; WebKit takes the parts. Nothing scrolls on a
   desktop screen, so these only ever appear on a phone or in a narrow
   window — and there they should look like ours, not the browser's. */
*{scrollbar-width:thin;scrollbar-color:#4d442f #17140e}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:#17140e}
*::-webkit-scrollbar-thumb{background:#4d442f;border-radius:0;border:1px solid #17140e}
*::-webkit-scrollbar-thumb:hover{background:var(--gold-bright)}
*::-webkit-scrollbar-corner{background:#17140e}
*::-webkit-scrollbar-button{display:none;width:0;height:0}

html,body{height:100%;overflow:hidden}

body{
  background:var(--brown);
  color:var(--ink);
  font-family:'Crimson Text',Georgia,'Times New Roman',serif;
  display:flex;flex-direction:column;
  -webkit-font-smoothing:antialiased;
}

/* ------------------------------------------------------------------ the bar */

.topbar{
  flex:none;height:var(--bar);min-height:56px;
  display:flex;align-items:stretch;
  background:
    linear-gradient(180deg,rgba(255,233,176,.05),transparent 60%),
    linear-gradient(180deg,var(--brown-mid),var(--brown));
  border-bottom:1px solid var(--gold);
  box-shadow:0 2px 14px rgba(0,0,0,.55);
  position:relative;z-index:5;
}
.topbar::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;
  background:linear-gradient(90deg,transparent,rgba(154,122,58,.55),transparent);
}

.brand{
  flex:0 0 var(--brand);min-width:190px;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(10px,1.1vw,22px);
  text-decoration:none;position:relative;
}
.brand::after{
  content:"";position:absolute;right:0;top:18%;bottom:18%;width:1px;
  background:linear-gradient(180deg,transparent,var(--gold),transparent);
}
.brand .mark{
  font-family:'Cinzel',serif;font-weight:700;
  font-size:clamp(15px,2.5vh,30px);line-height:1;
  letter-spacing:.10em;color:var(--gold-lit);
  text-shadow:0 1px 0 #000,0 0 16px rgba(199,167,102,.28);
  white-space:nowrap;
}
.brand .sub{
  font-family:'Cinzel',serif;font-weight:400;
  font-size:clamp(7px,1.02vh,11px);line-height:1.4;
  letter-spacing:.17em;color:var(--gold);text-transform:uppercase;
  margin-top:.45em;white-space:nowrap;
}
.brand:hover .mark{color:#fff3cf}

/* ------------------------------------------------------------------ the nav */

nav{
  flex:1;min-width:0;
  display:flex;align-items:stretch;justify-content:space-evenly;
  padding:0 clamp(4px,.8vw,18px);
}
nav a{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  padding:0 clamp(5px,.85vw,20px);
  font-family:'Cinzel',serif;font-weight:600;
  font-size:clamp(9px,1.17vh,14px);
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold-bright);text-decoration:none;
  white-space:nowrap;
  transition:color .22s ease;
}
/* the subtle vertical flourish between buttons */
nav a + a::before{
  content:"";position:absolute;left:0;top:24%;bottom:24%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(154,122,58,.75),transparent);
}
/* the bottom glow on hover */
nav a::after{
  content:"";position:absolute;left:12%;right:12%;bottom:14%;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold-lit),transparent);
  box-shadow:0 0 12px 2px rgba(255,233,176,.55);
  transform:scaleX(0);transform-origin:center;opacity:0;
  transition:transform .26s ease,opacity .26s ease;
}
nav a:hover,nav a:focus-visible{color:var(--gold-lit);outline:none}
nav a:hover::after,nav a:focus-visible::after{transform:scaleX(1);opacity:1}
nav a[aria-current="page"]{color:var(--gold-lit)}
nav a[aria-current="page"]::after{
  transform:scaleX(1);opacity:.85;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  box-shadow:0 0 8px 1px rgba(154,122,58,.5);
}

/* ------------------------------------------------------------------ the body */

main{flex:1;min-height:0;display:flex;background:var(--brown)}

/* --- left: the plate.
   The plate IS a page out of the book — its own dark ground, its own gold rule,
   its own corner brackets, the drawing on its own sheet. So the site adds no
   frame of its own: that would be a frame around a frame. Each page's ground is
   pinned to this background and each page's sheet to the leaf's parchment (see
   pages.py), so the page bleeds into the site with no seam and agrees with the
   text across the gutter. --- */

.plate{
  flex:0 0 var(--plate);min-width:0;
  display:flex;
  padding:0;
}
.mat{
  flex:1;min-width:0;position:relative;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.mat img{
  width:100%;height:100%;
  object-fit:contain;
  display:block;
}

/* --- the video plate. The trailer sits inside a page frame drawn to the
   proportions of the rendered book pages (612:792, sheet inset 4.71% tall and
   6.11% wide) with the same gold rule and corner brackets, so Digital Play is
   still a leaf of the book. The frame's ground is the site brown, as every
   other page's is after tone-matching. --- */
.mat.video .page{
  position:relative;
  height:100%;aspect-ratio:612/792;max-width:100%;
  background:var(--brown);
}
/* the double rule: an outer hairline and an inner one, as printed */
.mat.video .page::before,.mat.video .page::after{
  content:"";position:absolute;pointer-events:none;
  border:1px solid var(--gold);
}
.mat.video .page::before{inset:4.71% 6.11%}
.mat.video .page::after{inset:calc(4.71% + 7px) calc(6.11% + 7px);opacity:.55}
.mat.video video{
  position:absolute;left:8.6%;top:50%;
  width:82.8%;aspect-ratio:16/9;transform:translateY(-50%);
  display:block;background:#000;
  object-fit:contain;
  box-shadow:0 0 0 1px rgba(154,122,58,.45),0 10px 40px rgba(0,0,0,.6);
  transition:left .65s cubic-bezier(.4,0,.2,1),width .65s cubic-bezier(.4,0,.2,1),
             box-shadow .65s ease;
}
/* On play the page opens: the video eases out to the sheet's edges, flush
   with the outer rule, and the inner rule fades so nothing crosses the film.
   When the trailer ends the class comes off and it eases back to the poster. */
.mat.video.playing video{
  left:6.11%;width:87.78%;
  box-shadow:0 0 0 1px rgba(154,122,58,.7),0 14px 50px rgba(0,0,0,.7);
}
.mat.video .page::after{transition:opacity .45s ease}
.mat.video.playing .page::after{opacity:0}
.mat.video .play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(64px,9vh,104px);height:clamp(64px,9vh,104px);
  border:0;background:transparent;cursor:pointer;padding:0;
}
.mat.video .play .ring{
  position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--gold-lit);
  background:radial-gradient(circle,rgba(20,15,10,.62),rgba(20,15,10,.35));
  box-shadow:0 0 22px rgba(255,233,176,.35),inset 0 0 18px rgba(0,0,0,.6);
  transition:transform .22s ease,box-shadow .22s ease;
}
.mat.video .play .tri{
  position:absolute;left:56%;top:50%;transform:translate(-50%,-50%);
  width:0;height:0;
  border-top:clamp(11px,1.6vh,18px) solid transparent;
  border-bottom:clamp(11px,1.6vh,18px) solid transparent;
  border-left:clamp(18px,2.6vh,30px) solid var(--gold-lit);
  filter:drop-shadow(0 0 6px rgba(0,0,0,.8));
}
.mat.video .play:hover .ring,.mat.video .play:focus-visible .ring{
  transform:scale(1.06);box-shadow:0 0 34px rgba(255,233,176,.6),inset 0 0 18px rgba(0,0,0,.6);
}
.mat.video .play:focus-visible{outline:none}
.mat.video.playing .play{display:none}

/* --- a flipped spread. Digital Play gives the trailer the wide side (17 of 32
   columns) and the text the narrow (15), because a 16:9 frame wants width and
   the copy on that page does not. DOM order is unchanged — plate, then leaf —
   so reading order and the preview are the same as every other page. --- */
main.flip{flex-direction:row-reverse}
main.flip .plate{flex-basis:53.125%}
main.flip .leaf{margin:4.19vh 0 4.19vh 4.19vh}
/* in the wide slot the CSS page frame fills the slot rather than holding the
   book's portrait proportion, so the video gets the width it was given */
main.flip .mat.video .page{aspect-ratio:auto;width:100%;height:100%}

/* --- the photograph plate: the same page frame as the video, holding a small
   set of photographs that crossfade. The photos are cropped to one portrait
   ratio (3:4) so each dissolves into the next without the frame shifting. --- */
.mat.photos .page{
  position:relative;
  height:100%;aspect-ratio:612/792;max-width:100%;
  background:var(--brown);cursor:pointer;
}
.mat.photos .page::before,.mat.photos .page::after{
  content:"";position:absolute;pointer-events:none;
  border:1px solid var(--gold);
}
.mat.photos .page::before{inset:4.71% 6.11%}
.mat.photos .page::after{inset:calc(4.71% + 7px) calc(6.11% + 7px);opacity:.55}
.mat.photos img{
  position:absolute;
  left:calc(6.11% + 14px);right:calc(6.11% + 14px);
  top:calc(4.71% + 14px);bottom:calc(4.71% + 14px);
  width:auto;height:auto;
  max-width:calc(100% - 12.22% - 28px);max-height:calc(100% - 9.42% - 28px);
  margin:auto;object-fit:cover;
  opacity:0;transition:opacity 1.4s ease;
  box-shadow:0 0 0 1px rgba(154,122,58,.5),0 10px 40px rgba(0,0,0,.6);
}
.mat.photos img.on{opacity:1}
.plate-caption{
  position:absolute;left:0;right:0;bottom:1.4%;
  text-align:center;
  font-family:'Cinzel',serif;font-size:clamp(8px,1.05vh,12px);
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  opacity:.85;pointer-events:none;
}

/* the placeholder shown when a plate has no art yet */
.await{
  position:absolute;inset:0;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:.8em;
  text-align:center;padding:12%;
  font-family:'Cinzel',serif;color:var(--gold);
}
.mat.empty .await{display:flex}
.mat.empty img{display:none}
.await .glyph{font-size:clamp(22px,3.4vh,44px);opacity:.55}
.await .what{font-size:clamp(10px,1.25vh,15px);letter-spacing:.16em;text-transform:uppercase;line-height:1.9}
.await .file{font-family:ui-monospace,Menlo,monospace;font-size:clamp(9px,1.05vh,12px);
  letter-spacing:.04em;color:var(--gold);opacity:.55;text-transform:none}

/* --- right: the leaf --- */

/* The leaf is the facing page of the spread, so its sheet begins exactly where
   the plate's sheet begins: the book pages inset their cream 4.71% of the page
   height, and main is 88.89vh of the screen, so 4.19vh puts the two sheets on
   the same top and bottom lines. Same rule at the edge, no drop shadow — the
   art page has neither. */
.leaf{
  flex:1;min-width:0;
  margin:4.19vh 4.19vh 4.19vh 0;
  background:
    radial-gradient(130% 80% at 20% 0%,rgba(255,255,255,.5),transparent 55%),
    radial-gradient(90% 70% at 90% 100%,rgba(154,122,58,.14),transparent 60%),
    var(--parchment);
  border:1px solid var(--gold);
  box-shadow:inset 0 0 70px rgba(122,96,52,.20);
  padding:clamp(12px,2.6vh,36px) clamp(16px,2.3vw,48px);
  overflow-y:auto;overscroll-behavior:contain;
  font-size:clamp(13.5px,1.71vh,20px);
  line-height:1.54;
  color:var(--ink);
}

.leaf h1{
  font-family:'Cinzel',serif;font-weight:700;
  font-size:clamp(20px,3.05vh,38px);line-height:1.1;
  letter-spacing:.05em;text-transform:uppercase;
  color:#6d5322;
  text-shadow:0 1px 0 rgba(255,255,255,.5);
}
.leaf h2{
  font-family:'Cinzel',serif;font-weight:600;
  font-size:clamp(12px,1.62vh,19px);letter-spacing:.14em;text-transform:uppercase;
  color:#7a5f2a;margin:clamp(12px,1.9vh,28px) 0 .35em;
}
.kicker{
  font-style:italic;font-size:clamp(15px,2.0vh,25px);line-height:1.4;
  color:#6d5322;margin:.7em 0 .1em;
}
.leaf p{margin-top:.75em;text-align:justify;hyphens:auto}
.leaf p.lead{font-size:1.03em}

/* the book's section divider */
.rule{display:flex;align-items:center;gap:.85em;margin:clamp(10px,1.5vh,22px) 0}
.rule::before,.rule::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.rule i{font-style:normal;color:var(--gold);font-size:.9em;letter-spacing:.4em;opacity:.85}

/* the point lists */
.points{list-style:none;margin-top:.55em}
.points li{
  position:relative;padding-left:1.35em;margin-top:.46em;
  text-align:left;
}
.points li::before{
  content:"\25C7";position:absolute;left:0;top:.02em;
  color:var(--gold);font-size:.78em;opacity:.9;
}
.points b,.points strong{
  font-family:'Cinzel',serif;font-weight:600;font-size:.88em;
  letter-spacing:.06em;text-transform:uppercase;color:#6d5322;
}

/* the call to action on GET STEEL AGE */
.cta-lead{text-align:center !important;font-style:italic;color:#6d5322;margin-top:1.1em}
.cta-wrap{text-align:center !important;margin-top:.9em}
a.cta{
  display:inline-block;
  padding:.62em 1.9em;
  font-family:'Cinzel',serif;font-weight:600;
  font-size:.92em;letter-spacing:.16em;text-transform:uppercase;
  color:#f4e6c2;text-decoration:none;
  background:linear-gradient(180deg,#2c1f13,var(--brown));
  border:1px solid var(--gold);
  box-shadow:0 2px 10px rgba(0,0,0,.3);
  position:relative;
  transition:color .22s ease,border-color .22s ease,box-shadow .22s ease;
}
/* the same bottom glow the nav uses, so the button belongs to the house */
a.cta::after{
  content:"";position:absolute;left:14%;right:14%;bottom:-1px;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold-lit),transparent);
  box-shadow:0 0 12px 2px rgba(255,233,176,.55);
  transform:scaleX(0);transform-origin:center;opacity:0;
  transition:transform .26s ease,opacity .26s ease;
}
a.cta:hover,a.cta:focus-visible{
  color:var(--gold-lit);border-color:var(--gold-bright);outline:none;
  box-shadow:0 3px 16px rgba(0,0,0,.42);
}
a.cta:hover::after,a.cta:focus-visible::after{transform:scaleX(1);opacity:1}

/* the last nav item is the ask, so it carries a little more light */
nav a[href="get.html"]{color:#e8cf94}

/* the roadmap on THE PATH */
.road-list{list-style:none;margin-top:.5em}
.road-list li{
  display:flex;justify-content:space-between;gap:1em;align-items:baseline;
  padding:.34em 0;border-bottom:1px dotted rgba(154,122,58,.42);
}
.road-list .what{flex:1}
.road-list .when{
  font-family:'Cinzel',serif;font-size:.76em;letter-spacing:.11em;text-transform:uppercase;
  white-space:nowrap;color:var(--gold);
}
.road-list .done .when{color:#5d7a4a}

.sign{
  margin-top:.9em;font-style:italic;text-align:right;color:var(--ink-soft);
  font-size:.95em;
}

/* ------------------------------------------------------------------ splash */

#splash{
  position:fixed;inset:0;z-index:100;background:#0a0906;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}
#splash[hidden]{display:none}
#splash .field{
  position:absolute;inset:0;
  /* Relative to THIS file, not to the page. A url() carried in a custom
     property resolves against the stylesheet that uses it, which is how this
     silently 404'd when the path lived in index.html. */
  background-image:url('../art/splash-cave.jpg');
  background-size:cover;background-position:center;
  opacity:0;transform:scale(1.06);
  transition:opacity 2s ease,transform 14s linear;
}
#splash.lit .field{opacity:.92;transform:scale(1)}
#splash .vig{position:absolute;inset:0;
  background:radial-gradient(70% 60% at 50% 48%,transparent 20%,rgba(6,5,4,.86) 100%)}
/* The lines are absolutely positioned so they can cross-fade in place, which
   means they contribute nothing to this box's width — without an explicit one
   it collapses to the padding and every line wraps into a narrow column. */
#splash .lines{position:relative;text-align:center;width:min(1150px,86vw)}
/* The cave is brightest exactly where the words sit. A soft dark ellipse under
   the type keeps every line legible without dimming the whole image. */
#splash .lines::before{
  content:"";position:absolute;left:-8%;right:-8%;top:50%;height:min(46vh,340px);
  transform:translateY(-50%);pointer-events:none;
  background:radial-gradient(60% 50% at 50% 50%,rgba(4,3,2,.62),transparent 72%);
}
#splash .line{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  font-family:'Cinzel',serif;font-weight:600;
  font-size:clamp(17px,3.3vh,42px);line-height:1.32;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold-lit);
  text-shadow:0 2px 18px rgba(0,0,0,.9),0 0 40px rgba(199,167,102,.35);
  opacity:0;transition:opacity 1.15s ease;
  pointer-events:none;
}
#splash .line.on{opacity:1}
#splash .line.title{font-weight:700;font-size:clamp(30px,7.4vh,96px);letter-spacing:.16em}
#splash .line.title small{
  display:block;margin-top:.7em;
  font-weight:400;font-size:clamp(10px,1.6vh,19px);letter-spacing:.34em;
  color:#f2e3ba;
  text-shadow:0 2px 12px rgba(0,0,0,.95),0 0 22px rgba(0,0,0,.8);
}
#splash .skip{
  position:absolute;right:clamp(14px,3vw,44px);bottom:clamp(14px,3vh,40px);
  background:transparent;border:1px solid rgba(154,122,58,.55);
  color:var(--gold-bright);font-family:'Cinzel',serif;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  padding:7px 15px;cursor:pointer;transition:.2s;
}
#splash .skip:hover{color:var(--gold-lit);border-color:var(--gold-lit)}

/* ------------------------------------------------------ small screens */

@media (max-width:960px), (max-height:460px){
  html,body{overflow:auto;height:auto}
  body{min-height:100%}
  .topbar{height:auto;flex-wrap:wrap;position:sticky;top:0}
  .brand{flex:1 0 100%;min-width:0;padding:10px 16px 6px;align-items:flex-start}
  .brand::after{display:none}
  nav{flex:1 0 100%;justify-content:flex-start;overflow-x:auto;padding:0 8px 8px}
  nav a{padding:8px 12px;font-size:11px}
  main,main.flip{flex-direction:column}
  main.flip .leaf{margin:14px}
  .plate{flex:none;height:58vw;max-height:420px;padding:14px 14px 0}
  .mat.video .page{height:auto;width:100%;aspect-ratio:auto;padding:12% 8%}
  .mat.photos .page{height:100%;width:auto;aspect-ratio:3/4;margin:0 auto}
  .mat.video video{position:static;width:100%;transform:none}
  .leaf{margin:14px;font-size:16px;overflow:visible}
  .leaf p{text-align:left}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  #splash .field{transform:none}
}