/* ==========================================================================
   STEEL AGE — the phone house style

   This is not the spread reflowed. The desktop site is a two-page spread on
   one screen that never scrolls; a phone has one narrow page and scrolling is
   how it is read, so the phone pages are set as their own thing: the plate
   runs full width at the book's own proportion instead of being letterboxed
   into a thumbnail, type is set in px rather than vh because there is no
   fixed-height box to fit it to, the measure is ragged-right because 36
   characters cannot be justified without rivers, and the contents is a
   disclosure rather than a bar that scrolls sideways.

   Standalone: it does not load steelage.css. Shared with it are the fonts,
   the palette, and the ornaments.
   ========================================================================== */

@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')}

:root{
  --parchment:#f0e8d8;
  --parchment-deep:#e6dac1;
  --gold:#9a7a3a;
  --gold-bright:#c7a766;
  --gold-lit:#ffe9b0;
  --brown:#140d07;
  --brown-mid:#241910;
  --ink:#2c241b;
  --ink-soft:#4d4133;
}

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

html{-webkit-text-size-adjust:100%}
body{
  background:var(--brown);
  color:var(--ink);
  font-family:'Crimson Text',Georgia,serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* --------------------------------------------------------------- the bar
   Sticky, short, and it carries the contents. Nine links will not fit in a
   row at 390px — the desktop bar needs 952px and hides five of them behind a
   sideways scroll nobody discovers — so the contents opens downward instead.
   <details> does this with no script, and keeps the keyboard and the screen
   reader behaviour the browser already knows. */

.bar{
  position:sticky;top:0;z-index:10;
  background:linear-gradient(180deg,var(--brown-mid),var(--brown));
  border-bottom:1px solid var(--gold);
  box-shadow:0 2px 14px rgba(0,0,0,.55);
}
.bar .row{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 14px;gap:12px;
}
.brand{text-decoration:none;display:block;min-width:0}
.brand .mark{
  display:block;
  font-family:'Cinzel',serif;font-weight:700;font-size:19px;line-height:1;
  letter-spacing:.10em;color:var(--gold-lit);
  text-shadow:0 1px 0 #000,0 0 16px rgba(199,167,102,.28);
}
.brand .sub{
  display:block;margin-top:5px;
  font-family:'Cinzel',serif;font-size:8.5px;line-height:1.3;
  letter-spacing:.17em;text-transform:uppercase;color:var(--gold);
}

details.contents{position:relative}
details.contents summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:.55em;
  padding:9px 12px;min-height:44px;          /* a thumb-sized target */
  font-family:'Cinzel',serif;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-bright);
  border:1px solid rgba(154,122,58,.55);
}
details.contents summary::-webkit-details-marker{display:none}
/* the diamond is the book's mark; it is not rotated on open, because a
   diamond turned 45 degrees is a square */
details.contents summary .glyph{
  font-size:9px;color:var(--gold);transition:color .2s ease
}
details.contents[open] summary .glyph{color:var(--gold-lit)}
details.contents[open] summary{color:var(--gold-lit);border-color:var(--gold-bright)}

/* the contents itself: a list, two to a row, in the order of the book */
details.contents nav{
  position:absolute;right:0;top:calc(100% + 9px);
  width:min(86vw,320px);
  display:grid;grid-template-columns:1fr 1fr;
  background:linear-gradient(180deg,#20160d,var(--brown));
  border:1px solid var(--gold);
  box-shadow:0 10px 34px rgba(0,0,0,.65);
  padding:6px;
}
details.contents nav a{
  display:flex;align-items:center;min-height:44px;
  padding:8px 10px;
  font-family:'Cinzel',serif;font-size:10.5px;line-height:1.25;
  letter-spacing:.11em;text-transform:uppercase;
  color:var(--gold-bright);text-decoration:none;
}
details.contents nav a[aria-current="page"]{color:var(--gold-lit)}
details.contents nav a[href="get.html"],
details.contents nav a[href="get"]{
  grid-column:1 / -1;justify-content:center;
  color:#e8cf94;margin-top:4px;
  border-top:1px solid rgba(154,122,58,.45);
}

/* ------------------------------------------------------------- the plate
   The plate is a whole page out of the book. On the desktop spread it is
   contained in a fixed box; here it simply runs the full width at its own
   proportion, so the drawing is the size of the phone rather than a stamp in
   the middle of a letterbox. */
.plate{display:block;width:100%;background:var(--brown)}
.plate img{display:block;width:100%;height:auto}

/* -------------------------------------------------------------- the leaf */
.leaf{
  margin:14px;padding:22px 20px 26px;
  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);
  font-size:17px;line-height:1.62;
}

.leaf h1{
  font-family:'Cinzel',serif;font-weight:700;
  font-size:26px;line-height:1.12;
  letter-spacing:.045em;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:13px;letter-spacing:.14em;text-transform:uppercase;
  color:#7a5f2a;margin:1.5em 0 .4em;
}
.kicker{
  font-style:italic;font-size:17.5px;line-height:1.45;
  color:#6d5322;margin:.55em 0 .2em;
}
.leaf p{margin-top:.8em}                    /* ragged right: see the header */
.leaf p.lead{font-size:17.5px}

/* the book's section divider */
.rule{display:flex;align-items:center;gap:.85em;margin:1.1em 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:.7em}
.points li{position:relative;padding-left:1.2em;margin-top:.7em}
.points li::before{
  content:"\25C7";position:absolute;left:0;top:0;
  line-height:inherit;font-size:1em;
  color:var(--gold);opacity:.9;
  transform:scale(.70);transform-origin:left center;
}
.points b{
  font-family:'Cinzel',serif;font-weight:600;font-size:.84em;
  letter-spacing:.06em;text-transform:uppercase;color:#6d5322;
}

/* ------------------------------------------------------------- the asides
   What the rail carries on the desktop page. There is no outer margin on a
   phone, so each item is set inline, the way the rail sets it: a feathered
   hand stroke down the left, the small-caps head, the text a step smaller.
   No fill — a filled box, and worse a run of them, reads as a sidebar
   stacked, not as marginalia. */
.aside{
  margin:1.6em 0 1.2em;padding:.15em 0 .2em 1.1em;
  font-size:15.5px;line-height:1.52;color:var(--ink-soft);
  background-image:linear-gradient(180deg,
    rgba(154,122,58,0) 0%,
    rgba(154,122,58,.25) 5%,
    rgba(154,122,58,.75) 14%,
    rgba(154,122,58,.8) 45%,
    rgba(154,122,58,.55) 70%,
    rgba(154,122,58,.7) 88%,
    rgba(154,122,58,.2) 97%,
    rgba(154,122,58,0) 100%);
  background-repeat:no-repeat;background-size:1px 100%;background-position:left top;
}
.aside h3{
  font-family:'Cinzel',serif;font-weight:600;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#7a5f2a;margin-bottom:.45em;padding-bottom:.3em;
  background-image:linear-gradient(90deg,
    rgba(154,122,58,0) 0%,rgba(154,122,58,.55) 5%,rgba(154,122,58,.8) 28%,
    rgba(154,122,58,.55) 72%,rgba(154,122,58,.15) 95%,rgba(154,122,58,0) 100%);
  background-repeat:no-repeat;background-size:100% 1px;background-position:left bottom;
}
.aside p{margin-top:.55em}
.aside p:first-of-type{margin-top:0}
.aside.voice p{font-style:italic}
.aside .src{
  display:block;margin-top:.55em;text-align:right;
  font-style:italic;font-size:14.5px;color:#6d5322;
}

.sign{font-style:italic;color:#4a3b22;margin-top:1.1em}

/* ---------------------------------------------------------------- the ask */
.ask{margin:18px 14px 26px;text-align:center;display:grid;gap:10px}
/* the next page, set as the first of the two buttons. The small word above
   the name says what the button is; the name says where it goes. */
a.cta.next small{
  display:block;font-size:9px;letter-spacing:.22em;line-height:1;
  color:var(--gold);margin-bottom:.45em;
}
a.cta,button.cta{
  display:block;padding:.95em 1.2em;
  font-family:'Cinzel',serif;font-weight:600;
  font-size:13px;letter-spacing:.17em;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);
}
a.cta:active{color:var(--gold-lit);border-color:var(--gold-bright)}

/* -------------------------------------------------------------- the foot */
.foot{
  padding:0 20px 30px;text-align:center;
  font-family:'Cinzel',serif;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);
}
.foot .next{display:block;margin-bottom:14px}
.foot .next a{color:var(--gold-bright);text-decoration:none}

/* A wide window that somehow lands here — a tablet, or the phone page opened
   deliberately — gets the column held to a readable measure rather than run
   across the screen. */
@media (min-width:620px){
  .plate{max-width:520px;margin:0 auto}
  .leaf,.ask{max-width:560px;margin-left:auto;margin-right:auto}
}

/* ------------------------------------------------------- the roadmap list
   The Path's list of what is done and what is coming. On the spread it is a
   row with the date pushed to the right edge; at 390px that leaves the title
   two words a line, so the date sits under the title instead. */
.road-list{list-style:none;margin-top:.7em}
.road-list li{
  padding:.55em 0;border-bottom:1px dotted rgba(154,122,58,.42);
}
.road-list .what{display:block}
.road-list .when{
  display:block;margin-top:.15em;
  font-family:'Cinzel',serif;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold);
}
.road-list .done .when{color:#5d7a4a}

/* ---------------------------------------------------------- the trailer
   Digital Play's plate is the Solkaris trailer rather than a page of the
   book. On a phone it gets the browser's own controls: a custom play button
   is a worse target than the one the phone already knows, and `preload=none`
   still means the 17MB file is not fetched until someone asks for it. */
.plate video{display:block;width:100%;height:auto;background:#000}

/* the photographs of the printed book, on The Path */
.plate figcaption{
  padding:10px 16px 0;text-align:center;
  font-family:'Cinzel',serif;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);
}

/* the apply button on Get Steel Age, in the run of the page */
.cta-lead{text-align:center;font-style:italic;color:#6d5322;margin-top:1.2em}

/* the quiet door (Questions about Steel Age), outlined */
a.cta.quiet{background:transparent;color:#c7a766;border-color:rgba(154,122,58,.6);box-shadow:none}

/* the sign-up on a phone */
.optin{margin:14px 0 0}
.optin-label{display:block;font-family:'Cinzel',serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#7a5f2a;margin-bottom:8px}
.optin-row{display:grid;gap:10px}
.optin input[type=email]{font:inherit;font-size:17px;color:#2c241b;padding:12px 14px;background:rgba(255,255,255,.4);border:1px solid rgba(154,122,58,.6);border-radius:0;outline:none;width:100%;box-sizing:border-box}
button.cta{font-family:'Cinzel',serif;width:100%}
.fine{margin-top:12px;font-size:14px;color:#6d5322;font-style:italic}
.h2-row{display:flex;flex-direction:column;gap:6px}
.h2-link{font-family:'Crimson Text',serif;font-weight:400;font-style:italic;text-transform:none;letter-spacing:0;font-size:16px;color:#6d5322;text-decoration:none}
.h2-link i{font-style:normal;color:#9a7a3a;margin:0 4px}

/* PLATE-DOOR (29 Oct 2026): the door to a worked example is a picture of
   the destination, a miniature of the deck's title card: the kick in small
   caps, the dice, the title, framed as the art plates are. On the phone it
   sits in the column under the chapter head and opens the deck's own page. */
.leaf .door{display:block;position:relative;box-sizing:border-box;max-width:19em;margin:.9em 0 .5em;padding:.7em .7em .6em;text-align:center;text-decoration:none;color:#5a4320;
  background:linear-gradient(180deg,#f6efdf,#eee3cb);box-shadow:0 0 0 1px rgba(154,122,58,.6),0 2px 9px rgba(0,0,0,.12)}
.leaf .door::after{content:"";position:absolute;inset:4px;border:1px solid rgba(154,122,58,.32);pointer-events:none}
.leaf .door:active{box-shadow:0 0 0 1px #9a7a3a,0 3px 14px rgba(0,0,0,.18)}
.door-kick{display:block;font-family:'Cinzel',serif;font-weight:600;font-size:.62em;letter-spacing:.13em;text-transform:uppercase;color:#9a7a3a;line-height:1.2}
.door-dice{display:flex;justify-content:center;align-items:center;gap:.6em;margin:.35em 0 .25em}
.door-dice img{display:block;width:auto;height:2.6em;transform:rotate(-7deg);filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.door-dice img+img{transform:rotate(6deg)}
.door-title{display:block;font-family:'Cinzel',serif;font-weight:700;font-size:.82em;letter-spacing:.04em;line-height:1.25;color:#5a4320}
.door-title i{font-style:normal;color:#9a7a3a;font-size:.8em}
.leaf .doors2{display:flex;gap:.7em;max-width:22em;margin:.9em 0 .5em}
.leaf .doors2 .door{flex:1 1 0;margin:0;padding:.7em .5em .6em}
.door.half .door-kick{font-size:.58em}
.door.half .door-title{font-size:.74em}
/* /PLATE-DOOR */

/* GET and HOME (Deploy B, 30 Oct 2026): the doors stack, the fact box follows
   them, and Home's heading and kicker stand above the plate so a phone sees
   the pitch before the art. */
.leaf .way{margin-top:1.4em}
.leaf .way h2{margin-top:0}
.leaf .way .ask{margin:12px 0 8px}
.leaf .way .how{margin-top:.6em}
.leaf .way .optin{margin-top:8px}
.leaf .where{font-family:'Cinzel',serif;font-weight:600;font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:#7a5f2a;margin-top:.8em}
.leaf .avail{margin-top:.9em}
.leaf .avail a{color:#6d5322;text-decoration:none;border-bottom:1px solid rgba(154,122,58,.45)}
.leaf .avail a i{font-style:normal;color:var(--gold)}
.fact{margin:1.5em 0 0;padding:.9em 1em .8em;border:1px solid rgba(154,122,58,.5)}
.fact h3{font-family:'Cinzel',serif;font-weight:600;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:#7a5f2a;margin:0 0 .2em}
.fact dl{margin:0}
.fact dt{font-family:'Cinzel',serif;font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#7a5f2a;margin-top:.6em}
.fact dd{margin:.1em 0 0}
.fact a{color:#6d5322;text-decoration:none;border-bottom:1px solid rgba(154,122,58,.45)}
.pitch{margin:18px 14px 6px}
.pitch h1{font-family:'Cinzel',serif;font-weight:700;font-size:26px;line-height:1.12;letter-spacing:.045em;text-transform:uppercase;color:#e8cf94;margin:0}
.pitch .kicker{color:#d9c7a0;margin-top:.45em}
.how.read{margin:0 14px 22px;text-align:center}
/* the "how" line on the phone pages: ink, not browser blue */
.how{color:#4a3b22}
.how a{color:#6d5322;text-decoration:none;border-bottom:1px solid rgba(154,122,58,.45)}
.how i{font-style:normal;color:var(--gold);margin:0 .3em}
.leaf .avail + .where{margin-top:.4em}
/* PRESS on the phone */
.leaf.press .short b{font-family:'Cinzel',serif;font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#7a5f2a;margin-right:.3em}
.leaf.press .kit{list-style:none;margin:.6em 0 0;padding:0}
.leaf.press .kit li{margin:0 0 .5em;padding-left:1.1em;text-indent:-1.1em}
.leaf.press .kit li::before{content:'\25C7';color:var(--gold);font-size:.62em;margin-right:.5em;position:relative;top:-.12em}
.leaf.press .kit a,.leaf.press a.ink{color:#6d5322;text-decoration:none;border-bottom:1px solid rgba(154,122,58,.45)}
.leaf.press .use{margin-top:1em;font-style:italic;color:#4a3b22}
/* THE PATH as a hub on the phone: the four plates two by two */
.leaf .doors4{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:1.2em 0 .4em}
.leaf .doors4 .door{margin:0;padding:.8em .6em .7em;max-width:none}
.leaf .doors4 .door-kick{font-size:10px}
.leaf .doors4 .door-title{font-size:14px}
.door-pic{display:block;width:64px;height:64px;margin:8px auto 6px;box-shadow:0 0 0 1px rgba(154,122,58,.55),0 1px 4px rgba(0,0,0,.18);overflow:hidden}
.door-pic img{display:block;width:100%;height:100%;object-fit:cover}
.door-pic.mark{box-shadow:none}
.door-pic.mark img{object-fit:contain;transform:scale(.9)}
/* the foot carries the copyright line and the two doors */
.foot .line{display:block;margin-top:8px;letter-spacing:.1em}
.foot .line a{color:#9a7a3a;text-decoration:none}
/* THE PATH on the phone: the note, then the four plates two by two */
.leaf .doors-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:1.1em 0 .4em}
.leaf .doors-row .door{margin:0;padding:.8em .6em .7em;max-width:none}
.leaf .doors-row .door-kick{font-size:10px}
.leaf .doors-row .door-title{font-size:14px}
.leaf .doors-row .door-pic{width:88%;aspect-ratio:1081/1400;height:auto;margin:8px auto 6px}
.leaf.designer a.ink{color:#6d5322;text-decoration:none;border-bottom:1px solid rgba(154,122,58,.45)}
/* THE ROAD on the phone: the Bestiary drawing beside its names */
.aside.bestiary .pic{float:left;width:34%;aspect-ratio:3/4;margin:.4em .9em .2em 0;overflow:hidden;background:var(--brown);box-shadow:0 0 0 1px rgba(154,122,58,.6)}
.aside.bestiary .pic img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.aside.bestiary ul{overflow:hidden}
.aside.bestiary::after{content:"";display:block;clear:both}