/* ═══════════════════════════════════════════════════════════════════════
   site.css — the public marketing page.

   Implements design 3a, "Nocturne Plate · inset atlas". Token values are the
   design handoff's, verbatim.

   Kept entirely separate from style.css (the in-game app): the two share no
   selectors and are never loaded together. The app has its own palette and its
   own wordmark treatment; this file does not touch either.

   Load order on the marketing page: fonts-site.css → site.css.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Colour (handoff "Design Tokens") ───────────────────────────────── */
  --ground:#14120E;          /* page background, scrim endpoint            */
  --ground-raised:#191610;   /* alternating sections, cards                */
  --ground-accent:#221C16;   /* featured pricing card                      */
  --mat:#17130D;             /* map frame mat                              */
  --rule:#3B3428;            /* hairline dividers                          */
  --rule-strong:#6B5C42;     /* hero rules, input border, Legend border    */
  --gold:#B08A3E;            /* labels, structural accents                 */
  --gold-light:#E0C489;      /* nav CTA text                               */
  --gold-frame:#8A7042;      /* map frame edge                             */
  --rubric:#C4462F;          /* the single action colour                   */
  --rubric-hover:#D95A41;
  /* Solid fills that carry text need to be a step darker than the accent:
     #F3E9D2 on #C4462F is 4.08:1 and its #D95A41 hover is 3.17:1, both under
     the 4.5 minimum. White on these two clears it at 5.59 and 4.92, and the
     hover still resolves to the design's own rubric so the colour survives. */
  --rubric-solid:#B83E28;
  --rubric-solid-hover:#C4462F;
  --text-primary:#F3E9D2;
  --text-body:#E7DDC6;
  --text-body-2:#DED3BA;
  --text-body-3:#BDB098;
  --text-muted:#A2937A;
  --text-muted-2:#8D8069;

  --page:1100px;             /* the design width                           */
  --gutter:44px;             /* horizontal section padding                 */
  color-scheme:dark;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ground);
  color:var(--text-body);
  font:400 18px/1.55 "EB Garamond",Georgia,serif;
  -webkit-font-smoothing:antialiased;
}

/* Radius is zero everywhere, deliberately — see the style plate. Shadows exist
   only on the map frame. Neither is set globally; they are simply never added. */

/* height:auto matters: the map carries width/height attributes for layout
   stability, and without this max-width squeezes the width while the height
   attribute holds — which stretches the image vertically. */
img{ max-width:100%; height:auto; display:block; }

a{ color:inherit; text-decoration:none; }

/* Every section constrains its content to the design width and centres it,
   while backgrounds run full-bleed. */
.inner{ max-width:var(--page); margin:0 auto; width:100%; }

/* Shared label: Cinzel caps, widely tracked, gold. Tracking varies per use, so
   each site sets its own letter-spacing on top of this. */
.label{
  font-family:"Cinzel",Georgia,serif; font-weight:400;
  text-transform:uppercase; color:var(--gold); margin:0;
}

/* ═══ 1 · Masthead ═════════════════════════════════════════════════════
   Sticky: the client explicitly wants the band available at any scroll
   position, with the hero art continuing beneath it. No bottom border — the
   band is defined by the art behind it, not by a rule. */
.masthead{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:20px var(--gutter);
  padding-top:calc(20px + env(safe-area-inset-top, 0px));
  /* Sticky needs its own ground, or the page scrolls through the band and the
     nav sits on top of body text. */
  background:var(--ground);
  border-bottom:1px solid var(--rule);
}

/* Except over the hero, where the painting IS the background — the handoff is
   explicit that the band is defined by the art behind it, not by a rule. */
.plate .masthead{ background:transparent; border-bottom:0; }
.masthead .bar{
  max-width:var(--page); margin:0 auto; width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}

.wordmark{
  font-family:"Cinzel",Georgia,serif; font-weight:400;
  font-size:19px; letter-spacing:.3em; text-indent:.3em;
  color:var(--text-body); white-space:nowrap;
}

.nav{ display:flex; align-items:center; gap:34px; }
.nav a{
  font-family:"Cinzel",Georgia,serif; font-size:16px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-muted);
  transition:color .14s ease; white-space:nowrap;
}
.nav a:hover{ color:var(--text-body); }

/* ═══ 2 · Hero ═════════════════════════════════════════════════════════
   The masthead and the hero share one background layer, so the painting runs
   up behind the sticky band. That is why the two live inside one .plate
   element rather than being separate sections. */
.plate{
  position:relative;
  background-image:
    linear-gradient(180deg, rgba(20,18,14,.5) 0%, rgba(20,18,14,.62) 34%,
                    rgba(20,18,14,.55) 62%, rgba(20,18,14,.8) 90%,
                    var(--ground) 100%),
    url('/web/art/hero.jpg');
  background-size:cover, cover;
  background-position:center, center 30%;
  background-repeat:no-repeat, no-repeat;
}

/* Topographic linework, faint, falling off to the left and downwards. Purely
   decorative.

   Two nested elements rather than one: the vertical fade and the horizontal
   falloff are separate masks, and a parent's mask multiplies with its child's
   for free. Stacking all of it onto one element would need a three-layer
   mask-composite chain, which is fragile and differs between engines. */
.topo{
  position:absolute; inset:0; z-index:0; pointer-events:none;

  /* Vertical fade: full strength through the hero, beginning to go at the top
     of the map frame (~58% down the plate) and gone well before the rule that
     opens the next section. Percentages, so it tracks as the plate grows. */
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 58%,
                                     rgba(0,0,0,0) 86%);
          mask-image:linear-gradient(to bottom, #000 0%, #000 58%,
                                     rgba(0,0,0,0) 86%);
}

.topo-ink{
  position:absolute; inset:0;
  opacity:.22;
  background-image:url('/web/art/topo-lines.svg');
  background-size:cover; background-position:right center;
  background-repeat:no-repeat;

  /* Horizontal falloff: full strength at the right edge, gone by 60% across.
     The handoff also specified a 176x40 rectangle subtracted here, to stop the
     linework running through the "Enter Valdris" button. That button is gone
     while the alpha is invite-only, and with it the second mask layer and the
     mask-composite chain — which was the most engine-dependent CSS on the
     page. If the button ever returns, so does the knock-out. */
  -webkit-mask-image:linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,.5) 22%,
                                     rgba(0,0,0,.08) 45%, rgba(0,0,0,0) 60%);
          mask-image:linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,.5) 22%,
                                     rgba(0,0,0,.08) 45%, rgba(0,0,0,0) 60%);
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
}

.plate > *:not(.topo){ position:relative; z-index:1; }

.hero{
  display:flex; flex-direction:column; align-items:center; gap:24px;
  max-width:780px; margin:0 auto;
  padding:80px var(--gutter) 0;
  text-align:center;
}

.hero .eyebrow{ font-size:13px; letter-spacing:.42em; text-indent:.42em; }

/* The double rule is reserved for the wordmark — the one place in the design
   it appears. */
.hero .plaque{
  border-top:1px solid var(--rule-strong);
  border-bottom:3px double var(--rule-strong);
  padding:16px 0 20px;
  width:100%;
}
.hero .above{
  font-family:"Fraunces",Georgia,serif; font-style:italic; font-weight:300;
  font-size:30px; color:var(--text-body-3); margin:0;
}
.hero h1{
  font-family:"Cinzel",Georgia,serif; font-weight:400;
  font-size:104px; line-height:.94;
  letter-spacing:.14em; text-indent:.14em;   /* indent cancels the trailing
                                                letter-space, keeping the word
                                                optically centred */
  color:var(--text-primary); margin:0;
}

.hero .tagline{
  font-family:"Fraunces",Georgia,serif; font-style:italic; font-weight:300;
  font-size:24px; line-height:1.5; max-width:690px;
  color:var(--text-body-2); margin:0;
}
.hero .tagline p{ margin:0; }
/* Just enough air to mark the turn between beats — less than the
   hero's 24px element gap, so the three still read as one speech. */
.hero .tagline p + p{ margin-top:14px; }

/* ── Waitlist ─────────────────────────────────────────────────────────── */
.muster{ display:flex; flex-direction:column; align-items:center; gap:16px;
  width:100%; }
.muster .label{ font-size:12px; letter-spacing:.36em; text-indent:.36em;
  color:var(--text-muted); }

.muster form{
  display:flex; align-items:stretch;
  border:1px solid var(--rule-strong);
  background:rgba(12,10,8,.55);
}
.muster input[type=email]{
  width:300px; max-width:100%;
  background:transparent; border:0; outline:none;
  padding:18px 22px;
  font:400 19px/1.2 "EB Garamond",Georgia,serif; color:var(--text-primary);
}
.muster input[type=email]::placeholder{ color:var(--text-muted-2); }
.muster input[type=email]:focus-visible{
  box-shadow:inset 0 0 0 1px var(--gold);
}
/* Icon-only. Its accessible name lives on aria-label in the markup, and the
   busy state is [disabled] rather than a word swap — swapping text into this
   button would delete the SVG and make the row jump width mid-submit. */
.muster button{
  border:0; cursor:pointer;
  background:var(--rubric-solid); color:#fff;
  padding:0 26px; display:flex; align-items:center; justify-content:center;
  transition:background .14s ease, opacity .2s ease;
}
.muster button svg{ display:block; }
.muster button:hover{ background:var(--rubric-solid-hover); }
.muster button[disabled]{ opacity:.55; cursor:default; }
/* Reduced-motion users still get the opacity change, just not the pulse. */
@media (prefers-reduced-motion:no-preference){
  .muster button[disabled]{ animation:muster-pulse 1.1s ease-in-out infinite; }
  @keyframes muster-pulse{ 0%,100%{ opacity:.4 } 50%{ opacity:.75 } }
}

.muster .foot{
  font-family:"EB Garamond",Georgia,serif; font-style:italic; font-size:16px;
  color:var(--text-muted-2); margin:0;
}
/* Success replaces the row inside the same frame; errors sit under it. */
.muster .done{
  border:1px solid var(--rule-strong); background:rgba(12,10,8,.55);
  padding:18px 26px; margin:0;
  font-family:"Fraunces",Georgia,serif; font-style:italic; font-size:20px;
  color:var(--gold-light);
}
.muster .err{
  font-family:"EB Garamond",Georgia,serif; font-size:16px;
  color:var(--rubric-hover); margin:0;
}
.muster [hidden]{ display:none !important; }

/* ═══ 3 · Inset atlas ══════════════════════════════════════════════════
   Sits inside the plate so the painting continues around and below it. */
.atlas{
  max-width:var(--page); margin:88px auto 0;
  padding:0 var(--gutter) 64px;
  display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  gap:44px; align-items:start;
}

/* An artifact laid on the scene, not a screenshot in a box: double-line plate
   edge, a mat, a slight rotation, and the only shadow in the design. */
.atlas .frame{
  border:1px solid var(--gold-frame);
  /* The plate edge is TWO lines with a gap, and the inner one sits on the art.
     It used to be padding:20px of --mat (#17130D) inside the gold edge — but
     the mat and the page ground (#14120E) are the same colour to the eye, so
     the mat did no work and the gold line just looked like it was floating
     20px off the map. The map also carries its own drawn border, so a mat put
     a third edge around a picture that already had two.

     The outer line was rgba(20,18,14,.7), darker than the ground, so it read
     as a shadow rather than a line. At --rule-strong it actually reads, which
     is what makes the double edge survive losing the mat.

     --mat stays as the background: with padding:0 it is covered by the art,
     but it fills the box while the image is still loading. */
  outline:1px solid rgba(107,92,66,.55); outline-offset:6px;
  padding:0; background:var(--mat);
  /* The handoff specified transform:rotate(-.7deg) so the map read as an
     artifact laid on the scene. At this width that is an 8px drop across the
     frame, which reads as misalignment rather than placement — and it is the
     only non-square thing in a design that is emphatic about square corners.
     The mat, plate edge and shadow already carry the "object" idea. */
  box-shadow:0 2px 0 rgba(224,196,137,.12) inset,
             0 34px 60px -18px rgba(0,0,0,.85),
             0 90px 90px -60px rgba(0,0,0,.7);
}
/* The map is shown uncropped. Source art is 1200x750 (1.6:1) and the box is
   sized to match — keep the ratio if the art is ever replaced.

   Scoped to .frame, not to .atlas: the field guide reuses the same frame at a
   different width, and when these rules were .atlas-only the image there fell
   back to its width/height attributes and stretched. */
.frame .shot{ display:flex; aspect-ratio:1400/1045; }
/* The ratio must match the ARTWORK, not a number left over from an earlier
   image. It said 1200/750 (1.60:1) while valdris-map.webp is 1400x1045
   (1.34:1) -- so object-fit:contain letterboxed the map inside a box 20%
   wider than it needed, and the mat showed through as a dead black gutter on
   every side. Reported 2026-08-06 as "the map doesn't look great - the way it
   is framed".
   If the map is ever re-exported at a different size, this changes with it. */
.frame img{ width:100%; height:100%; object-fit:contain; }
/* The home page used to pin this box to `height:380px; aspect-ratio:auto`, and
   THAT is what actually put the gutter on screen -- it cancelled the ratio
   above at every width. At the design width the frame column is ~600px, so a
   380px-tall box is 1.58:1 holding a 1.34:1 map, and object-fit:contain
   bordered it with ~47px of mat down each side. The ratio above sizes the box
   correctly on its own; the home page must not override it. */

.atlas .caption{ display:flex; flex-direction:column; gap:18px; }
.atlas .caption .label{ font-size:12px; letter-spacing:.34em; text-indent:.34em; }
.atlas .caption .lead{
  font-family:"Fraunces",Georgia,serif; font-style:italic; font-weight:300;
  font-size:22px; line-height:1.5; color:var(--text-body-2); margin:0;
}

/* Emphasis inside an already-italic passage flips back to upright — the long
   typographic convention, and the only way <em> is visible at all in Fraunces
   italic. Applies to every italic voice block on the page so the rule holds
   wherever a place or a title gets singled out. */
.hero .tagline em,
.atlas .caption .lead em,
.excerpt .narration em,
.excerpt .turn p em{ font-style:normal; }
.atlas .caption hr{ border:0; border-top:1px solid var(--rule); margin:0; width:100%; }
.atlas .caption p:last-child{
  font-size:18px; line-height:1.55; color:var(--text-muted); margin:0;
}

/* ═══ 4 · How it plays ═════════════════════════════════════════════════ */
.plays{ padding:64px var(--gutter) 72px; border-top:1px solid var(--rule); }
.plays .label{ font-size:13px; letter-spacing:.4em; text-indent:.4em;
  text-align:center; margin-bottom:44px; }
.plays .cols{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:52px; }
.plays .num{
  font-family:"Cinzel",Georgia,serif; font-size:38px; color:var(--rubric);
  line-height:1; margin:0 0 14px;
}
.plays h3{
  font-family:"Cinzel",Georgia,serif; font-weight:500; font-size:22px;
  letter-spacing:.06em; color:var(--text-primary); margin:0 0 12px;
}
.plays p{ font-size:20px; line-height:1.55; color:var(--text-body-3); margin:0; }

/* ═══ 5 · Session excerpt ══════════════════════════════════════════════
   One recorded turn. The blocks are deliberately on a descending scale —
   narration is the thing being shown, the player's line is an interjection
   into it, the roll is instrumentation, and the byline is a footnote. When
   they all sat near 26px with four gold micro-labels between them, nothing
   read as more important than anything else. */
.excerpt{
  padding:66px var(--gutter) 70px; background:var(--ground-raised);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.excerpt .inner{ max-width:760px; display:flex; flex-direction:column; gap:22px; }
.excerpt .label{ font-size:12px; letter-spacing:.36em; text-indent:.36em; }

/* 1 — the player, an interjection: smaller than the narration it prompts. */
.excerpt .turn{ border-left:2px solid var(--rubric); padding-left:18px; }
.excerpt .turn .who{
  font-family:"Cinzel",Georgia,serif; font-size:11.5px; letter-spacing:.26em;
  text-indent:.3em; text-transform:uppercase; color:var(--text-muted-2);
  margin:0 0 7px;
}
.excerpt .turn p{
  font-family:"Fraunces",Georgia,serif; font-style:italic; font-size:21px;
  line-height:1.5; color:var(--text-primary); margin:0;
}

/* 2 — the roll: instrumentation, so it is the quietest thing with numbers. */
.excerpt .roll{ text-align:center; margin:2px auto; max-width:44ch; }
.excerpt .roll .cap{
  display:block; width:28px; height:1px; margin:0 auto 13px;
  background:var(--rule-strong);
}
.excerpt .roll .rlab{
  display:block; font-family:"Cinzel",Georgia,serif; font-size:11.5px;
  letter-spacing:.22em; text-indent:.24em; text-transform:uppercase;
  color:var(--gold); margin-bottom:7px;
}
.excerpt .roll .rval{
  display:block; font-size:19px; color:var(--text-body-3);
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
}
.excerpt .roll .rval b{ font-weight:600; color:var(--gold-light); }
.excerpt .roll .rres{
  display:block; font-style:italic; font-size:15.5px; color:var(--text-muted-2);
  margin-top:3px;
}

/* 3 — the narration: the largest thing here, because it is the product. */
.excerpt .narration{
  font-family:"Fraunces",Georgia,serif; font-style:italic; font-weight:300;
  font-size:25px; line-height:1.6; color:var(--text-body-2); margin:0;
}

/* 4 — the item: a footnote in the game, a footnote here. */
.excerpt .item{
  text-align:center; font-family:"Cinzel",Georgia,serif; font-size:12.5px;
  letter-spacing:.16em; text-indent:.18em; text-transform:uppercase;
  color:var(--gold); margin:0;
}
.excerpt .item::before{ content:"+ "; }

/* 5 — attribution, in the narration's own face and size so it reads as the
   same voice signing off rather than a caption bolted underneath. Only the
   colour separates it: muted, so it recedes without changing register. */
.excerpt .byline{
  font-family:"Fraunces",Georgia,serif; font-style:italic;
  font-size:21px; line-height:1.5;
  color:var(--text-primary); margin:0; text-align:right;
}

/* ═══ 6 · Pricing ══════════════════════════════════════════════════════ */
.pricing{ padding:70px var(--gutter) 78px; }
.pricing .label{ font-size:13px; letter-spacing:.4em; text-indent:.4em; }
.pricing h2{
  font-family:"Cinzel",Georgia,serif; font-weight:400; font-size:40px;
  letter-spacing:.05em; color:var(--text-primary); margin:14px 0 14px;
}
/* States plainly that none of this is buyable yet. Without it the tier buttons
   read as a checkout the alpha cannot honour. */
.pricing .note{
  font-family:"EB Garamond",Georgia,serif; font-style:italic; font-size:18px;
  color:var(--text-muted); margin:0 0 36px; max-width:70ch;
}
.tiers{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }

.tier{
  position:relative;
  border:1px solid var(--rule); background:var(--ground-raised);
  padding:28px 24px; display:flex; flex-direction:column; gap:14px;
}
.tier .name{
  font-family:"Cinzel",Georgia,serif; font-size:15px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--text-body); margin:0;
}
.tier .price{
  font-family:"Cinzel",Georgia,serif; font-size:38px; color:var(--text-primary);
  line-height:1; margin:0;
}
.tier .price span{ font-size:16px; color:var(--text-muted); letter-spacing:.04em; }
/* The receipt line, pinned to the foot of the card. The cards stretch to a
   common height in the grid, so margin-top:auto drops every one of these onto
   the same baseline however many lines the description above it runs to. */
.tier .sub{
  font-family:"EB Garamond",Georgia,serif; font-style:italic; font-size:17px;
  margin:0; margin-top:auto; color:var(--text-muted);
}
.tier hr{ border:0; border-top:1px solid var(--rule); margin:0; }
.tier ul{ list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:9px; font-size:18px;
  color:var(--text-body-3); }

/* Featured tier: rubric border, raised ground, and the flag. */
.tier.featured{ border-color:var(--rubric); background:var(--ground-accent); }
.tier.featured .sub{ color:#E0A48F; }
.tier .flag{
  position:absolute; top:0; right:0;
  font-family:"Cinzel",Georgia,serif; font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; background:var(--rubric-solid); color:#fff;
  padding:5px 9px;
}

/* Legend: gold rather than rubric — structural, not an action colour. */
.tier.legend{ border-color:var(--rule-strong); }
.tier.legend .sub{ color:var(--gold); }

/* Full content width, not the 70ch measure the rest of the body copy uses.
   These two are a closing statement under the tier grid rather than something
   to be read at length, so they run the width of the cards above them. */
/* The frame holding the four plans and the one way to get them. Its border is
   --rule-strong while the cards inside are --rule, so the outer line reads as
   the plate and the cards as its contents rather than as five equal boxes. */
.plans{
  border:1px solid var(--rule-strong);
  padding:24px;
}

/* The waitlist bar under the tier grid: same component as the hero's, but the
   pricing section is left-aligned, so this instance centres itself. The rule
   above it ties it into the frame instead of leaving it floating below. */
.pricing-muster{
  align-items:center;
  margin:26px 0 4px;
  padding-top:26px;
  border-top:1px solid var(--rule);
}
/* Set to match the tier descriptions above it — same face, size and colour as
   `.tier ul` — so the closing call reads as one more line of the same voice
   rather than as a banner bolted to the bottom of the frame. */
.pricing-muster .cta-line{
  font-family:"EB Garamond",Georgia,serif; font-weight:400;
  font-size:18px; line-height:1.55;
  color:var(--text-body-3); margin:0; text-align:center;
}

.pricing .promise{
  margin:34px 0 0; font-size:18px; line-height:1.55; color:var(--text-muted);
}
/* Second promise sits with the first, not a section away from it. */
.pricing .promise + .promise{ margin-top:12px; }
/* site.css sets a{color:inherit}, so links inside body copy need saying. */
.pricing .promise a{
  color:var(--gold-light);
  border-bottom:1px solid rgba(224,196,137,.35);
  transition:border-color .14s ease;
}
.pricing .promise a:hover{ border-bottom-color:var(--gold-light); }

/* ═══ 7 · Footer ═══════════════════════════════════════════════════════ */
.foot{ padding:24px var(--gutter); border-top:1px solid var(--rule); }
.foot .bar{
  max-width:var(--page); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  flex-wrap:wrap;
  font-size:15px; letter-spacing:.08em; color:var(--text-muted-2);
}
.foot a:hover{ color:var(--text-body); }
.foot .links{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.foot .ai{ letter-spacing:0; font-style:italic; }
/* The ownership notice sits in the footer row's left slot. The row is uppercase
   and widely tracked for short labels; a sentence needs neither. */
.foot .bar > span:first-child{
  text-transform:none; letter-spacing:.02em; font-size:14px;
}

/* Keyboard focus has to stay visible everywhere; the design specifies no
   focus styling, so this is added rather than inherited. */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--gold-light); outline-offset:3px;
}

/* ═══ Field guide ══════════════════════════════════════════════════════
   A reference page for anyone who wants to know what the game actually is
   before signing anything. Not in the handoff — built from 3a's own tokens
   and type roles so it reads as the same publication.

   The painting is deliberately NOT reused here: the plate belongs to the
   home page, and a reference page competing with it cheapens both. */
.guide-head{
  padding:72px var(--gutter) 0;
  border-top:1px solid var(--rule);
}
.guide-head .inner{ display:flex; flex-direction:column; align-items:center;
  gap:22px; text-align:center; }
.guide-head .label{ font-size:13px; letter-spacing:.42em; text-indent:.42em; }
.guide-head .plaque{ width:100%; max-width:780px; }
.guide-head h1{
  font-family:"Cinzel",Georgia,serif; font-weight:400; font-size:64px;
  line-height:1; letter-spacing:.14em; text-indent:.14em;
  color:var(--text-primary); margin:0;
}

/* Spacing lives in the padding, not in a margin, so the last section is
   spaced off the closer's rule like every other. The previous rule was
   `.guide:last-of-type`, which never matched: `last-of-type` counts <section>
   elements, and the last section on the page is .guide-close. */
.guide{ padding:60px var(--gutter) 60px; }
.guide + .guide{ border-top:1px solid var(--rule); margin-top:0; }
.guide > .inner > .label{ font-size:13px; letter-spacing:.4em; text-indent:.4em; }
.guide h2{
  font-family:"Cinzel",Georgia,serif; font-weight:400; font-size:34px;
  letter-spacing:.05em; color:var(--text-primary); margin:14px 0 26px;
}
.guide h3{
  font-family:"Cinzel",Georgia,serif; font-weight:500; font-size:19px;
  letter-spacing:.06em; color:var(--text-primary); margin:0 0 10px;
}
.guide p{ font-size:19px; line-height:1.6; color:var(--text-body-3);
  margin:0 0 1em; max-width:74ch; }
.guide p:last-child{ margin-bottom:0; }
.guide .quiet{ color:var(--text-muted); }

/* A run of short definitional blocks — regions, houses, peoples. Bordered
   rather than carded: no fills, no radius, in keeping with the plate. */
/* Every cell carries the same two borders and the container supplies the other
   two edges — so the grid closes regardless of how many columns fit. The
   previous rule stripped the right border on nth-child(3n), which only lined up
   when exactly three columns rendered; auto-fit was giving four at full width,
   so the borders came off the wrong cells. Column count is now explicit. */
.defs{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0;
  border-top:1px solid var(--rule); border-left:1px solid var(--rule);
  margin-top:28px;
}
.defs > div{
  padding:22px 24px 24px;
  border-bottom:1px solid var(--rule); border-right:1px solid var(--rule);
}
.defs p{ font-size:17px; line-height:1.55; color:var(--text-muted); margin:0; }
/* A plain stacked list — name, then what it is. Used where a grid of bordered
   cells would over-structure something the reader just wants to read down. */
.simple-list{ margin-top:22px; padding-left:34px; }
.simple-list p{
  font-size:19px; line-height:1.6; color:var(--text-body-3);
  margin:0 0 15px; max-width:74ch;
}
.simple-list p:last-child{ margin-bottom:0; }
.simple-list strong{
  font-family:"Cinzel",Georgia,serif; font-weight:500; letter-spacing:.04em;
  color:var(--text-primary);
}

/* Where the thing is, on its own line under its name — a gazetteer's shape:
   what it is called, where it stands, then what it does. */
.defs .where{
  display:block; font-family:"EB Garamond",Georgia,serif; font-style:italic;
  font-size:16px; color:var(--text-body-3); margin:0 0 9px;
}
.defs .tag{
  font-family:"Cinzel",Georgia,serif; font-size:11px; letter-spacing:.2em;
  text-indent:.2em; text-transform:uppercase; color:var(--gold);
  margin:0 0 8px; display:block;
}

/* Two-column prose + a framed plate alongside (used for the map). */
.guide .with-plate{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:44px; align-items:start;
}

/* A named verb, quoted in the game's own voice. */
.verbs{ display:flex; flex-direction:column; gap:0; margin-top:28px;
  border-top:1px solid var(--rule); }
.verbs > div{ padding:18px 0; border-bottom:1px solid var(--rule); }
.verbs .vname{
  font-family:"Cinzel",Georgia,serif; font-size:14px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-light); margin:0 0 6px;
}
.verbs p{
  font-family:"Fraunces",Georgia,serif; font-style:italic; font-weight:300;
  font-size:20px; line-height:1.5; color:var(--text-body-2); margin:0;
}

/* Closing call, reusing the hero's muster treatment at a smaller scale. */
.guide-close{
  padding:52px var(--gutter) 60px; border-top:1px solid var(--rule);
  background:var(--ground-raised); text-align:center;
}
.guide-close h2{
  font-family:"Cinzel",Georgia,serif; font-weight:400; font-size:34px;
  letter-spacing:.05em; color:var(--text-primary); margin:0 0 14px;
}
.guide-close p{ font-size:19px; color:var(--text-muted); margin:0 auto 30px;
  max-width:56ch; }
.guide-close .muster{ align-items:center; margin-top:22px; }
/* Overrides the 56ch cap on .guide-close p — that measure is for the closing
   sentence, and it was forcing this two-line notice to wrap mid-clause. */
.guide-close .foot{
  font-family:"EB Garamond",Georgia,serif; font-style:italic; font-size:16px;
  color:var(--text-muted-2); margin:0; text-align:center; max-width:none;
}
.guide-close .cta-line{
  font-family:"EB Garamond",Georgia,serif; font-size:18px; line-height:1.55;
  color:var(--text-body-3); margin:0; text-align:center;
}
@media (max-width:900px){
  .guide-head h1{ font-size:44px; }
  /* Three columns here would be ~220px each — too narrow for a 25-word
     definition. Two, then one below 700. */
  .defs{ grid-template-columns:repeat(2, minmax(0,1fr)); }
    .guide .with-plate{ grid-template-columns:minmax(0,1fr); gap:28px; }
  .guide h2{ font-size:28px; }
}
@media (max-width:700px){
  .guide-head h1{ font-size:34px; }
  .defs{ grid-template-columns:minmax(0,1fr); }
}

/* ═══ Responsive ═══════════════════════════════════════════════════════
   Not designed — the handoff is fixed at 1100px and lists this as outstanding.
   Following its own suggestions: single column below ~900px, pricing stacks,
   hero wordmark down to ~56px, map full width with the caption beneath, topo
   dropped on small screens. */
@media (max-width:1000px){
  .hero h1{ font-size:78px; }
  .hero .above{ font-size:26px; }
  .hero .tagline{ font-size:22px; }
  .plays .cols{ gap:36px; }
  .tiers{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:900px){
  :root{ --gutter:24px; }
  .topo{ display:none; }              /* too faint to survive the crop */
  .atlas{ grid-template-columns:minmax(0,1fr); gap:28px; margin-top:56px; }
  .plays .cols{ grid-template-columns:minmax(0,1fr); gap:40px; }
  /* Keep the section's descent on narrow screens: the narration leads,
     the player's line and its byline sit under it. A single shared size
     here (left over from when both were 26px) flattened the hierarchy
     and made the player's line bigger on mobile than on desktop. */
  .excerpt .narration{ font-size:22px; }
  .excerpt .turn p, .excerpt .byline{ font-size:19px; }
}

@media (max-width:700px){
  .masthead{ padding:14px var(--gutter); }
  .masthead .bar{ flex-wrap:wrap; justify-content:center; gap:14px; }
  .nav{ gap:20px; }
  .nav a{ font-size:14px; }
  .hero{ padding-top:56px; }
  .hero h1{ font-size:56px; }
  .hero .above{ font-size:22px; }
  .hero .tagline{ font-size:19px; }
  .hero .eyebrow{ font-size:11px; letter-spacing:.3em; text-indent:.3em; }
  .muster form{ flex-direction:column; }
  .muster input[type=email]{ width:100%; }
  .tiers{ grid-template-columns:minmax(0,1fr); }
  .pricing h2{ font-size:30px; }
  .foot .bar{ justify-content:center; text-align:center; }
}