/* ═══════════════════════════════════════════════════════════════════════════
   unicornfactory.dev — ADDITIVE COMPONENTS · MOBILE FIRST

   uf.css above this file is the stylesheet of record, lifted byte-identical
   from crucible.boutique/unicorn. It is never edited here. This file only ADDS
   the components that page has no equivalent for, using the lifted tokens only:
   no new colors, no new fonts, no re-derived values.

   Every class is `g-` prefixed so nothing collides with a lifted one. Note that
   `.door` is already taken in uf.css (the age-gate overlay on the pitch page);
   the doors on this site are `.g-dr`.

   ── HOW THE TWO VERSIONS DIFFER ──────────────────────────────────────────
   The BASE rules below are the phone. Everything is one column, sized for a
   thumb and a 375px viewport, and nothing waits on a media query to look
   finished.

   Two tiers build on it:

     ≥ 720px  the doors go three across and the nav opens onto one line.

     ≥ 1100px THE RAIL. Every section kicker, and the tale byline, leaves the
              top of its block and moves into a left margin rail, right-aligned
              against a three-rem gutter. This is the desktop's own idea rather
              than a wider phone: on a large screen the metadata stops
              interrupting the reading column and becomes marginalia, which is
              what the extra width is actually good for. The reading measure
              itself never grows, because a 34em column is right at every size.

   The lifted sheet is desktop-first and keeps its own max-width queries. The
   two coexist: nothing here overrides anything there.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Named so the two tiers are stated once and read the same everywhere:
   --rail is the margin column, --gutter the space between it and the text. */
:root{
  --rail:13rem;
  --gutter:3rem;
  --measure:34em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DAYLIGHT
   Design-system handoff §3 and §5. Two of the five surfaces are lit rooms and
   the night ink set does not survive inversion, so daylight carries its own
   set. Nothing here is a new colour in the sense the lift forbids: --d-ink is
   the lifted --case reused as text, and the foil-day stops are the same five
   hues as --foil with only the three that vanish on pale ground deepened.

   Two rules that are easy to get wrong later:

   1. The text-only colours are text-only. Daylight brass and magenta are
      darkened so they read as ink on paper; any FILL keeps the lifted --brass
      and --magenta. Swapping one for the other dulls the fills.
   2. Daylight has no glow, so depth is a letterpress lift, never a shadow
      borrowed from the night surfaces.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  /* §3. Magenta and violet already read on pale ground so they stay hot; only
     sky, mint and brass deepen, with saturation raised as they go. A uniform
     darkening of all five was tried during design and produced sludge. */
  --foil-day:linear-gradient(102deg,#FF1F8C,#9B33FF 26%,#00B4D8 52%,#00C46A 74%,#F0A500);

  --d-ink:var(--case);          /* #241548, the lifted token reused as text */
  --d-mut:#5F5079;
  --d-gry:#786A90;
  --d-line:#C7B6E2;
  --d-hair:rgba(138,97,11,.24);
  --d-acc:#8A610B;              /* brass, TEXT ONLY — fills keep --brass   */
  --d-mag:#BC1A6C;              /* magenta, TEXT ONLY — fills keep --magenta */
  --d-mint:#0E7A4F;             /* correct-answer label only */
  --d-pap:#FBF7FF;

  --d-lift:inset 0 1px 0 rgba(255,255,255,.95),
           0 0 0 1px rgba(138,97,11,.10),
           0 9px 20px rgba(58,34,106,.15);
}

/* §4. background-clip:text crops the glyph box and cuts descenders. The lift
   already solves this on .wordmark; the fix was simply never carried forward
   to anything else that clips. Every clipped element on every surface takes
   it, which is why it is one class rather than a repeated pair of values. */
.g-clip{
  background-clip:text;-webkit-background-clip:text;color:transparent;
  margin-bottom:-.19em;padding-bottom:.24em;
}
/* on daylight the light stops need separating from the ground (§3) */
.g-day .g-clip{filter:drop-shadow(0 1px 0 rgba(36,21,72,.4));}

/* ══ THE FIELD (§2) ══
   Every surface paints the same three-layer construction and changes only the
   three stops and the two glow alphas. The glow alpha is the serenity dial:
   /game holds the anchor's exact stops and halves the glow, which is the whole
   mechanism by which it reads calmer than the page it links to. It must never
   be achieved by changing colour.

   Written as LITERALS on purpose. var() inside rgba() and inside gradient
   stops caused rendering failures during design — undiagnosed, so avoided. */
/* §1 says reuse the lift's own fixed field and grain on every surface, so
   these OVERRIDE body::before rather than stacking a second layer behind it.
   The lift's own values are the anchor's (.24/.17) and stay untouched on
   crucible.boutique/unicorn; each surface here restates only its own row of
   the §2 table. Daylight also needs the body background itself changed, or
   the lifted --night shows through wherever the field is transparent. */
body.g-s-game::before{background:
  radial-gradient(58% 40% at 14% 0%,  rgba(255,61,154,.13), transparent 68%),
  radial-gradient(50% 36% at 88% 4%,  rgba(53,228,244,.10), transparent 68%),
  radial-gradient(120% 80% at 50% -14%, #3B2270 0%, #231447 44%, #170D2E 80%);}

body.g-s-stories{background:#0E0720;}
body.g-s-stories::before{background:
  radial-gradient(58% 40% at 14% 0%,  rgba(255,61,154,.08), transparent 68%),
  radial-gradient(50% 36% at 88% 4%,  rgba(53,228,244,.05), transparent 68%),
  radial-gradient(120% 80% at 50% -14%, #2A1856 0%, #170D30 44%, #0E0720 80%);}

body.g-s-academy{background:#C6B6E8;}
body.g-s-academy::before{background:
  radial-gradient(58% 40% at 14% 0%,  rgba(255,61,154,.18), transparent 68%),
  radial-gradient(50% 36% at 88% 4%,  rgba(53,228,244,.16), transparent 68%),
  radial-gradient(120% 80% at 50% -14%, #EDE4FF 0%, #DBCEF4 44%, #C6B6E8 80%);}

body.g-s-gate{background:#D8CEF0;}
body.g-s-gate::before{background:
  radial-gradient(58% 40% at 14% 0%,  rgba(255,61,154,.12), transparent 68%),
  radial-gradient(50% 36% at 88% 4%,  rgba(53,228,244,.10), transparent 68%),
  radial-gradient(120% 80% at 50% -14%, #F6F1FF 0%, #E8E0F8 44%, #D8CEF0 80%);}

/* OVER-BLOOM (handback 1.3). The stops are sized in percentages, so at 1568px
   the magenta at 58%/14% covers ~900px and the top band goes properly pink.
   Pretty, and it costs the gate the one thing its field is for: being the
   LIGHTEST field on the property.

   Fixed by dropping the magenta alpha above the desktop tier, not by anchoring
   the geometry to the content column. Both were offered. The alpha is already
   the designated dial in the field spec -- the glow alpha is what tells every
   surface apart from every other -- so using it keeps all five fields on one
   construction, which that spec requires. Anchoring the geometry would have
   made the gate the only surface whose field is built differently, to fix
   something the existing dial already fixes.

   /academy was checked at 1920 before deciding, as instructed. Its bloom is
   visible but does not cost it its job: it is the warm lit room, not the
   lightest field. .18 stands unchanged. */
@media(min-width:1100px){
  body.g-s-gate::before{background:
    radial-gradient(58% 40% at 14% 0%,  rgba(255,61,154,.08), transparent 68%),
    radial-gradient(50% 36% at 88% 4%,  rgba(53,228,244,.10), transparent 68%),
    radial-gradient(120% 80% at 50% -14%, #F6F1FF 0%, #E8E0F8 44%, #D8CEF0 80%);}
}

/* ══ DAYLIGHT SURFACE BASE ══ */
.g-day{color:var(--d-ink);}
.g-day .g-kicker,.g-day .g-by{color:var(--d-gry);}
.g-day .g-lede,.g-day .g-body{color:var(--d-mut);}
.g-day .g-title,.g-day .g-nm{color:var(--d-ink);}
.g-day a{color:var(--d-acc);}
.g-day .g-nav a{color:var(--d-gry);}
.g-day .g-foot{color:var(--d-gry);border-top-color:var(--d-hair);}

/* ══ NAV ══
   The pitch page has no nav at all. This one is a lintel, not a toolbar: it
   carries no button and never follows the reader down.

   On the phone the two groups stack, world above house, and the house group
   sits in a quieter color so the three doors read first. */
.g-nav{padding:16px 20px 0;display:flex;flex-direction:column;gap:9px}
.g-nav nav{display:flex;gap:15px;flex-wrap:wrap;align-items:baseline}
.g-nav a{font-family:var(--f-m);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dusk);text-decoration:none;padding:7px 0;border-bottom:1px solid transparent}
.g-nav a:hover{color:var(--bone);border-bottom-color:var(--brass)}
.g-nav a[aria-current=page]{color:var(--brass-l);border-bottom-color:var(--brass-d)}
.g-nav .g-ext::after{content:" \2197";color:var(--brass-d)}
.g-nav .g-r a{color:#9C8CB4}
.g-nav .g-r a:hover{color:var(--bone)}

@media(min-width:720px){
  .g-nav{max-width:1000px;margin:0 auto;padding:22px 26px 0;flex-direction:row;
    align-items:baseline;justify-content:space-between;gap:18px}
  .g-nav nav{gap:22px}
  .g-nav a{font-size:10px;letter-spacing:.24em;padding:6px 0}
}

/* ══ THE GATE HERO ══
   Deliberately NOT the pitch page's hero: no intake box under it, no demo
   below it. Wordmark, one line, one quiet door, and air.

   The phone gets less air than the desktop on purpose. A full viewport of
   nothing is a statement on a 27-inch display and an obstacle on a 5-inch one. */
.g-hero{text-align:center;padding:34px 0 0}
.g-hero .g-world{font-size:1.15rem;color:var(--bone);margin:20px auto 0;
  max-width:22ch;line-height:1.45;font-weight:400}
.g-walk{display:inline-block;margin-top:28px;font-family:var(--f-m);font-size:11px;
  letter-spacing:.28em;text-transform:uppercase;color:var(--dusk);text-decoration:none;
  padding:13px 8px;border-bottom:1px solid var(--line)}
.g-walk:hover{color:var(--brass-l);border-bottom-color:var(--brass)}

@media(min-width:720px){
  .g-hero{padding-top:56px}
  .g-hero .g-world{font-size:clamp(1.25rem,2.4vw,1.6rem);max-width:24ch;margin-top:24px}
  .g-walk{margin-top:34px;padding:13px 4px}
}
@media(min-width:1100px){
  /* the wordmark gets a screen to stand in, which is the one thing a large
     display can offer that a phone cannot */
  .g-hero{padding-top:76px;padding-bottom:18px}
}

/* THE MAXIM. What used to be three paragraphs of orientation. Ruling 60 allows
   one maxim per body and the page is better served spending it than explaining
   itself: the three doors below say what the world holds, so the only thing
   left to say is how to read them. Display face, because on a phone a single
   large true line does the work a paragraph of small grey text cannot. */
.g-maxim{max-width:18ch;margin:56px auto 0;text-align:center;font-family:var(--f-d);
  font-weight:400;letter-spacing:-.025em;line-height:1.12;color:var(--bone);
  font-size:clamp(1.5rem,7vw,2.1rem)}
@media(min-width:720px){.g-maxim{margin-top:76px;max-width:22ch;font-size:2.1rem}}
@media(min-width:1100px){.g-maxim{margin-top:88px}}

/* ══ SECTIONS, AND THE DESKTOP RAIL ══ */
.g-sec{margin-top:64px}
.g-sec>.kick{display:block;margin-bottom:10px}
.g-sec h2{font-family:var(--f-d);font-weight:400;letter-spacing:-.025em;
  font-size:clamp(1.55rem,5.5vw,2.4rem);margin:0;color:var(--bone)}
.g-lede{max-width:var(--measure);margin:14px 0 0;font-size:16px;line-height:1.68;
  color:var(--dusk)}

@media(min-width:720px){.g-sec{margin-top:88px}}

@media(min-width:1100px){
  /* THE RAIL. The kicker leaves the top of the block and becomes marginalia.
     Grid rather than a float so the rail cannot collide with a tall heading,
     and `align-items:start` so a one-line kicker sits at the heading's cap
     height instead of stretching down the whole column. */
  .g-sec{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);
    column-gap:var(--gutter);align-items:start}
  .g-sec>.kick{grid-column:1;grid-row:1;margin:0;text-align:right;padding-top:.7em}
  .g-sec>*:not(.kick){grid-column:2}
  /* the page head uses the same rail, so the first thing a desktop reader sees
     already explains where metadata lives on this site */
  .g-head{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);
    column-gap:var(--gutter);align-items:start}
  .g-head>.kick{grid-column:1;grid-row:1;margin:0;text-align:right;padding-top:.85em}
  .g-head>*:not(.kick){grid-column:2}
}

/* ══ THE THREE DOORS ══
   Three equal panels, no hierarchy, because the choice is the assessment.

   On the phone they stack, and a stack has an unavoidable first item, so the
   equality is carried by giving all three identical weight and height behavior.
   Across, at 720 and up, the equality is simply visible.

   Each door carries its OWN light, set by --lit. The three stay equal in size,
   weight, saturation and type; only the hue differs, the way three doorways on
   one midway are equally lit in different colors. Equality is a matter of
   weight, not of sameness, and three identical grey panels are the one thing a
   midway would never look like. */
.g-doors{display:grid;grid-template-columns:1fr;gap:12px;margin:26px 0 0;align-items:stretch}
.g-dr{--lit:var(--magenta);
  position:relative;display:flex;flex-direction:column;text-align:left;text-decoration:none;
  color:inherit;background:
    radial-gradient(120% 62% at 50% -8%,color-mix(in srgb,var(--lit) 22%,transparent),transparent 68%),
    linear-gradient(168deg,#291A4E,#1D1138 58%,#241748);
  border:1px solid color-mix(in srgb,var(--lit) 34%,#3E2A6B);
  border-radius:13px;padding:26px 20px 22px;overflow:hidden;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--lit) 12%,transparent),
             0 18px 44px rgba(0,0,0,.42);
  transition:transform 160ms,border-color 160ms,box-shadow 160ms}
.g-dr:nth-child(2){--lit:var(--sky)}
.g-dr:nth-child(3){--lit:var(--brass)}
/* the bulb strip: the midway's electricity, drawn rather than imaged, so it
   costs nothing and scales to any width. Each bulb gets its door's color and a
   halo, so on a phone the three doors read as lit signage rather than cards. */
.g-dr::before{content:"";position:absolute;left:0;right:0;top:0;height:9px;
  background-image:radial-gradient(circle at 6px 3px,var(--lit) 0 1.9px,transparent 2.6px);
  background-size:17px 100%;opacity:.9;
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--lit) 70%,transparent))}
/* the glow under the sill */
.g-dr::after{content:"";position:absolute;left:16%;right:16%;bottom:-32px;height:52px;
  border-radius:50%;background:color-mix(in srgb,var(--lit) 30%,transparent);filter:blur(20px);
  opacity:.55;pointer-events:none;transition:opacity 160ms}
.g-dr:hover,.g-dr:focus-visible{border-color:var(--lit);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--lit) 34%,transparent),
             0 26px 60px rgba(0,0,0,.5)}
.g-dr:hover::after{opacity:.9}
.g-dr .g-n{position:relative;font-family:var(--f-m);font-size:9px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--lit);opacity:.85}
.g-dr h2{position:relative;font-family:var(--f-d);font-weight:400;font-size:1.75rem;
  letter-spacing:-.025em;line-height:1.06;margin:9px 0 0;color:var(--bone)}
.g-dr .g-t{position:relative;font-size:15.5px;line-height:1.55;color:#CDBEDF;margin:10px 0 0;flex:1}
.g-dr .g-go{position:relative;font-family:var(--f-m);font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--lit);margin-top:18px;padding-top:13px;
  border-top:1px solid color-mix(in srgb,var(--lit) 26%,transparent)}

@media(min-width:720px){
  .g-doors{grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}
  .g-dr{padding:30px 22px 24px}
  .g-dr:hover{transform:translateY(-3px)}
  .g-dr h2{font-size:clamp(1.6rem,2.5vw,2rem)}
}
@media(min-width:1100px){
  /* The doors break the rail. Squeezed into the text column they came out at
     about 220px each, which cramped the type and wrapped one title to two lines
     while the others held one, and three doors that are equal in the markup have
     to look equal on the wall. Full width, like the film frame. */
  .g-sec>.g-doors{grid-column:1/-1;margin-top:30px}
  /* The stubs inherit the same exemption for the same reason. They are the
     doors' replacement and are no more column-shaped than the doors were:
     left inside the rail they sit off-centre against a centred wordmark,
     which reads as a mistake rather than as marginalia. */
  .g-sec>.g-stack{grid-column:1/-1;margin-top:30px}
  /* taller panels with more room under the heading: a door should feel like a
     doorway on a big screen, not a card in a row of cards */
  .g-dr{padding:36px 30px 30px;min-height:16rem}
  .g-dr .g-t{margin-top:13px;font-size:16px}
}
@media(prefers-reduced-motion:reduce){.g-dr,.g-dr:hover{transform:none}}

/* color-mix is well supported now, but a browser without it would drop every
   rule that uses it, including the borders. These restate the essentials in
   flat values so the doors still read if that happens. */
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .g-dr{border-color:#3E2A6B;background:linear-gradient(168deg,#291A4E,#1D1138 58%,#241748)}
  .g-dr::after{display:none}
  .g-dr:nth-child(1) .g-n,.g-dr:nth-child(1) .g-go{color:var(--magenta-t)}
  .g-dr:nth-child(2) .g-n,.g-dr:nth-child(2) .g-go{color:var(--sky)}
  .g-dr:nth-child(3) .g-n,.g-dr:nth-child(3) .g-go{color:var(--brass)}
}

/* ══ THE ATMOSPHERE FRAME (the game surface) ══
   Holds the place Film One will occupy. Until then it is a lit empty stage, not
   a play button over a poster, because there is nothing to play yet. */
.g-frame{position:relative;margin-top:22px;border-radius:12px;overflow:hidden;
  border:1px solid #3E2A6B;background:
    radial-gradient(70% 58% at 50% 108%,rgba(255,201,77,.20),transparent 70%),
    radial-gradient(52% 46% at 12% 8%,rgba(255,61,154,.20),transparent 68%),
    radial-gradient(48% 44% at 88% 4%,rgba(53,228,244,.14),transparent 68%),
    linear-gradient(168deg,#241748,#160C2C);
  box-shadow:0 0 0 1px rgba(255,201,77,.09),0 22px 56px rgba(0,0,0,.45)}
.g-frame .g-in{position:relative;padding:48px 20px 50px;text-align:center}
/* a bulb string swagged across the top of the frame */
.g-frame .g-in::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background-image:radial-gradient(circle at 6px 50%,var(--brass-l) 0 1.7px,transparent 2.4px);
  background-size:19px 100%;opacity:.62}
.g-frame .g-cap{font-family:var(--f-m);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--brass)}
.g-frame .g-say{font-family:var(--f-d);font-weight:400;letter-spacing:-.02em;line-height:1.18;
  font-size:clamp(1.3rem,6vw,2rem);color:var(--bone);margin:16px auto 0;max-width:20ch}
.g-frame .g-state{font-family:var(--f-m);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:#9C8CB4;margin-top:20px}

@media(min-width:720px){
  .g-frame{margin-top:26px;border-radius:14px}
  .g-frame .g-in{padding:74px 34px 78px}
}
@media(min-width:1100px){
  /* the frame is the one element that SHOULD take the whole width on a desktop:
     it is standing in for a film, and a film is not a column. It breaks the
     rail and runs the full measure of the wrap. */
  .g-sec>.g-frame{grid-column:1/-1;margin-top:32px}
  .g-frame .g-in{padding:104px 40px 108px}
}

/* ══ TALE TYPOGRAPHY (the stories shell) ══
   A reading surface, not a marketing one: one measure, generous leading, and
   nothing in the margin to look at. The measure does not grow with the screen;
   only the byline moves. */
.g-tale{display:grid;grid-template-columns:minmax(0,var(--measure));justify-content:center}
.g-tale>*{min-width:0}
.g-by{font-family:var(--f-m);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:#9C8CB4;margin:14px 0 0}
/* Ruling 52: the collector is credited by an exact name whose first name never
   abbreviates. In the narrow desktop rail it was breaking as "NANCY /
   FORICOURT", so the name is kept whole and the line breaks before it instead. */
.g-nm{white-space:nowrap}
.g-body{margin-top:32px;font-size:17px;line-height:1.76;color:#E9DCF5}
.g-body p{margin:0 0 1.15em}
.g-body p:first-of-type::first-line{color:var(--bone)}
/* a scene break, set as a mark rather than a rule */
.g-brk{text-align:center;color:var(--brass);font-family:var(--f-m);font-size:14px;
  letter-spacing:.5em;margin:2em 0;opacity:.85}
.g-title{font-family:var(--f-d);font-weight:400;letter-spacing:-.028em;line-height:1.06;
  font-size:clamp(1.9rem,7.5vw,3.2rem);margin:0;color:var(--bone)}

@media(min-width:720px){.g-body{margin-top:38px;font-size:17.5px;line-height:1.78}}
@media(min-width:1100px){
  /* the byline hangs in the margin beside the opening paragraph, the way a
     collected text is credited on a printed page */
  .g-tale{grid-template-columns:var(--rail) minmax(0,var(--measure));
    column-gap:var(--gutter);justify-content:center;align-items:start}
  .g-tale>header{grid-column:2;grid-row:1}
  .g-tale>.g-by{grid-column:1;grid-row:2;text-align:right;margin-top:40px}
  .g-tale>.g-body{grid-column:2;grid-row:2;margin-top:32px}
  .g-tale>.g-back{grid-column:2}
}

/* the index of tales */
.g-list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:10px}
.g-list a{display:block;text-decoration:none;color:inherit;background:#1B1036;
  border:1px solid var(--line);border-radius:10px;padding:18px 19px;
  transition:border-color 140ms,transform 90ms,background 140ms}
.g-list a:hover{border-color:var(--magenta);background:rgba(255,61,154,.07)}
.g-list .g-n{font-family:var(--f-m);font-size:9px;letter-spacing:.28em;text-transform:uppercase;
  color:#9C8CB4}
.g-list h3{font-family:var(--f-d);font-weight:400;font-size:1.25rem;letter-spacing:-.02em;
  margin:7px 0 0;color:var(--bone)}
/* the row is as wide as its column; the blurb inside it is not, because a
   110-character line is not a line anyone reads */
.g-list p{margin:8px 0 0;max-width:66ch;font-size:14.5px;line-height:1.6;color:var(--dusk)}

@media(min-width:720px){
  .g-list{margin-top:30px;gap:11px}
  .g-list a{padding:20px 22px}
  .g-list a:hover{transform:translateX(4px)}
  .g-list h3{font-size:1.35rem}
}
@media(min-width:1100px){
  /* the story number leaves the card and joins the rail, so the four titles
     line up as one column of names */
  .g-list a{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);
    column-gap:var(--gutter);align-items:baseline;padding:22px 26px 24px}
  .g-list .g-n{grid-column:1;text-align:right}
  .g-list h3{grid-column:2;grid-row:1;margin:0}
  .g-list p{grid-column:2;grid-row:2;margin-top:9px}
  .g-list a:hover{transform:none;border-color:var(--magenta)}
}

/* ══ THE PLAIN REGISTER (Intellibotique) ══
   The one surface that speaks in business voice. No foil, no bulbs and no
   display face below the title, so the register change is visible before a word
   is read. */
.g-plain{max-width:var(--measure);margin:0 auto;font-size:16px;line-height:1.7;color:#D8CBE8}
.g-plain h2{font-family:var(--f-s);font-weight:700;font-size:15px;letter-spacing:.02em;
  text-transform:none;color:var(--bone);margin:32px 0 9px}
.g-plain p{margin:0 0 1em}
.g-plain a{color:var(--brass-l);text-decoration:underline;text-underline-offset:3px}
.g-plain a:hover{color:var(--brass)}
.g-plain .g-standing{border-left:2px solid var(--brass-d);padding:2px 0 2px 15px;margin:20px 0;
  color:var(--bone)}
@media(min-width:720px){
  .g-plain{font-size:16.5px;line-height:1.72}
  .g-plain h2{margin-top:38px;margin-bottom:10px}
}
@media(min-width:1100px){
  /* the section labels join the rail like every other kicker on the site, which
     is what keeps the plain page part of the same object */
  .g-plain{max-width:none;display:grid;
    grid-template-columns:var(--rail) minmax(0,var(--measure));
    column-gap:var(--gutter);justify-content:center;align-items:baseline}
  .g-plain>*{grid-column:2}
  /* Same type as on the phone, only moved. A heading that changes typeface
     between breakpoints reads as two different designs rather than one design
     at two sizes. */
  .g-plain>h2{grid-column:1;text-align:right;margin:34px 0 0}
  /* a label in the rail belongs to the paragraph beside it, so they share a row */
  .g-plain>h2+p{margin-top:34px}
}

/* ══ LEAVE A CARD ══
   Reuses the lifted .wl drawer wholesale. The only addition is the column it
   sits in. */
.g-card{max-width:600px;margin-left:auto;margin-right:auto}
.g-card .wl{margin-top:20px}
@media(min-width:1100px){.g-card{margin-left:0}}

/* The DRAFT MARKERS block lived here and is gone. It was held open only while
   E10 was, and E10 landed 2026-09-02. Every world-voiced line on the property is
   blessed; nothing is marked, and there is no bar on any surface.

   If a future line needs marking, this block comes back with it — restore from
   git history rather than rewriting it, so the marks look the same as they did.
   The mechanism is one attribute, [data-draft], plus a .g-draftbar per surface. */

/* ══ FOOTER ══
   The footer sits outside `main.wrap`, and the lifted `.wrap` already carries
   120px of bottom padding. A large top margin here would stack on that and open
   a dead half-screen, so this only adds the last separation. */
.g-foot{max-width:760px;margin:20px auto 0;padding:28px 20px 54px;
  border-top:1px solid rgba(201,143,42,.22);font-family:var(--f-m);font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:#9C8CB4;text-align:center;line-height:2.1}
.g-foot a{color:var(--brass-l);text-decoration:underline;text-underline-offset:3px}
.g-foot a:hover{color:var(--brass)}
.g-foot .g-fine{display:block;margin-top:13px;letter-spacing:.04em;text-transform:none;
  font-size:11.5px;line-height:1.75;color:#8578A0;max-width:52ch;margin-left:auto;
  margin-right:auto}
@media(min-width:720px){
  .g-foot{padding:30px 4px 60px;font-size:10px;letter-spacing:.2em}
  .g-foot .g-fine{letter-spacing:.08em}
}

/* ══ forced-colors (Windows High Contrast) ══
   Same failure mode the lifted sheet documents: these components mark state
   with a transparent border over a painted background, and forced-colors drops
   the paint. Give them a real value. */
@media(forced-colors:active){
  .g-dr,.g-frame,.g-list a{border-color:CanvasText}
  .g-dr::before,.g-frame .g-in::before{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE TORN STUB (§7)
   The gate's only object, and the gate's alone: nothing on the Academy is
   torn, perforated or stubbed. That surface is punched, mounted and sealed
   because it is kept; this one is perforated because it is surrendered.

   THE SHAPE IS CUT, NOT PAINTED. The notch is a transparent circle inside the
   sheet's own background, one layer per half, so the gradient field shows
   through the bite. No mask, no mask-composite, no clip-path — a painted
   circle cannot match a gradient behind it, and the mask route is the one
   that historically breaks in WebKit.

   Depth is `filter: drop-shadow` stacked three deep, never box-shadow:
   drop-shadow follows the notched silhouette, box-shadow would draw a
   rectangle behind a shape that is not one.

   Geometry scales with the card so it stays a ticket rather than a rounded
   rectangle with two dots in it. Proportion sits near 4:1; anything squarer
   stops reading as a stub.
   ═══════════════════════════════════════════════════════════════════════════ */
.g-stub{
  --n:13px; --p:2.6px; --pitch:12px; --cfw:29%;
  position:relative;width:100%;max-width:520px;height:132px;
  display:flex;align-items:stretch;text-decoration:none;
  background:
    radial-gradient(circle var(--n) at 0 50%,   transparent var(--n), #FBF7FF calc(var(--n) + .5px)) left  / 50.5% 100% no-repeat,
    radial-gradient(circle var(--n) at 100% 50%, transparent var(--n), #FBF7FF calc(var(--n) + .5px)) right / 50.5% 100% no-repeat;
  filter:
    drop-shadow(0 0 .6px rgba(58,34,106,.45))
    drop-shadow(0 2px 1px rgba(58,34,106,.10))
    drop-shadow(0 13px 20px rgba(58,34,106,.26));
}

/* Paper is three blended layers, and it rides on an overlay INSET PAST THE
   NOTCHES so the bite stays clean. Inset it any less and the texture paints
   over the cut and the notch stops reading as a hole. */
.g-stub-pap{position:absolute;top:0;bottom:0;
  left:calc(var(--n) + 1px);right:calc(var(--n) + 1px);pointer-events:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='.5'/%3E%3C/svg%3E"),
    linear-gradient(100deg, rgba(138,97,11,.08), rgba(138,97,11,0) 38%),
    linear-gradient(168deg,#FFFDF9,#F8F2FF 54%,#EFE7FB);
  background-blend-mode:overlay,normal,normal;
  opacity:.9;}

/* the counterfoil, printed with its own security tint the way a real one is */
.g-cf{position:relative;z-index:1;flex:none;width:var(--cfw);padding:15px 14px;
  display:flex;flex-direction:column;justify-content:space-between;}
.g-cf::before{content:"";position:absolute;inset:0;opacity:.06;pointer-events:none;
  background:repeating-linear-gradient(58deg, var(--d-acc) 0 1px, transparent 1px 6px);}

.g-stub-bd{position:relative;z-index:1;flex:1;min-width:0;padding:15px 20px 15px 22px;
  display:flex;flex-direction:column;justify-content:center;}
/* the fold: a lit lip on the body side of the tear */
.g-stub-bd{box-shadow:inset 1px 0 0 rgba(255,255,255,.95), inset 2px 0 0 rgba(138,97,11,.10);}

/* punched holes: a purple bore with a white lip 1.5px below, so they read as
   bored through the paper rather than printed on it */
.g-punch{position:absolute;z-index:2;top:0;bottom:0;left:var(--cfw);width:8px;
  transform:translateX(-4px);pointer-events:none;
  background-image:
    radial-gradient(circle var(--p) at 50% 42%, rgba(255,255,255,.95) 0 var(--p), transparent calc(var(--p) + .7px)),
    radial-gradient(circle var(--p) at 50% 42%, rgba(88,68,126,.6) 0 var(--p), transparent calc(var(--p) + .7px));
  background-position:0 1.5px, 0 0;
  background-size:8px var(--pitch);
  background-repeat:repeat-y;}

/* letterpress: 1px of white under ink is what soft stock does to a struck
   numeral, and it is the whole reason these read as printed rather than set */
.g-rn{display:block;font-family:var(--f-d);font-size:32px;color:var(--d-acc);
  line-height:1;padding-bottom:.06em;text-shadow:0 1px 0 rgba(255,255,255,.9);}
.g-admit{display:block;font-family:var(--f-m);font-size:7.5px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--d-gry);line-height:1.9;}
.g-serial{display:block;font-family:var(--f-m);font-size:8px;letter-spacing:.16em;
  color:var(--d-mut);font-variant-numeric:tabular-nums;}
.g-stub-nm{display:block;font-family:var(--f-d);font-size:26px;color:var(--d-ink);
  line-height:1;padding-bottom:.06em;text-shadow:0 1px 0 rgba(255,255,255,.85);}
.g-stub-sub{display:block;font-size:12.5px;color:var(--d-mut);margin-top:7px;line-height:1.45;}
.g-stub-meta{display:flex;justify-content:space-between;align-items:baseline;
  margin-top:12px;padding-top:9px;border-top:1px solid var(--d-hair);}
.g-mm{font-family:var(--f-m);font-size:8px;letter-spacing:.22em;text-transform:uppercase;color:var(--d-gry);}
.g-mm-hot{color:var(--d-mag);}

/* Tilt alternates under half a degree so three stubs read as three separate
   pieces of paper rather than one repeated component. */
.g-tilt-a{transform:rotate(-.4deg);}
.g-tilt-b{transform:rotate(.32deg);}
.g-tilt-c{transform:rotate(-.16deg);}

.g-stack{display:flex;flex-direction:column;gap:15px;align-items:center;}

/* the plate scale — geometry scales WITH the card, per the §7 table */
@media (max-width:560px){
  .g-stub{--n:9px; --p:1.9px; --pitch:9px; --cfw:28%; height:98px;}
  .g-cf{padding:11px 10px;}
  .g-stub-bd{padding:11px 13px 11px 15px;}
  .g-rn{font-size:23px;}
  .g-stub-nm{font-size:21px;}
  .g-stub-sub{font-size:11.5px;}
}

@media (prefers-reduced-motion:reduce){
  .g-tilt-a,.g-tilt-b,.g-tilt-c{transform:none;}
}

/* ══ THE DAYLIGHT WORDMARK ══
   NOT the lifted `.wordmark`. That one carries the night --foil and its own
   sweep animation, so reusing the class on a lit surface would drag both onto
   a pale ground. The type is restated here and the clipping comes from
   .g-clip, which carries the §4 descender fix. */
.g-wordmark{
  font-family:var(--f-d);font-weight:400;
  font-size:clamp(2.6rem,10.5vw,5.4rem);
  letter-spacing:-.038em;line-height:.9;text-align:center;
  margin:14px 0 -.19em;
  background-image:var(--foil-day);
}

/* ══ DAYLIGHT OVERRIDES FOR LIFTED COMPONENTS ══
   The lift is a night stylesheet, so every component reused on a lit surface
   arrives carrying night ink: .wl is a dark drawer, headings are --bone, the
   kicker is --dusk. On #F6F1FF that is somewhere between low contrast and
   invisible. These restate ONLY colour and depth; every size, weight and
   rhythm still comes from the lift.

   Note what does NOT change: .lever keeps the lifted --magenta fill. §5's
   darkened magenta is text-only, and using it on a fill dulls the one warm
   object on the page. */
.g-day h1:not(.g-clip),.g-day h2:not(.g-clip),.g-day h3:not(.g-clip),
.g-day .wl h3{color:var(--d-ink);}
/* A clipped heading must keep color:transparent or the ink paints OVER the
   foil and the gradient vanishes. `.g-day h1` outranks a bare `.g-clip` on
   specificity, so the exclusion is stated rather than left to source order —
   this is the hero-wolf failure mode exactly: solid text, no layout break,
   nothing to notice unless you look. */
.g-day .g-clip{color:transparent;}
.g-day .kick{color:var(--d-gry);}
.g-day .muted,.g-day .sm{color:var(--d-mut);}
.g-day .g-world,.g-day .g-lede,.g-day .g-maxim{color:var(--d-mut);}

/* the drawer, relit: paper and a letterpress lift instead of a dark panel
   and a glow (§5 — daylight has no glow, so depth is pressed, not lit) */
.g-day .wl{
  background:rgba(255,255,255,.62);
  border-color:transparent;
  box-shadow:var(--d-lift);
}
.g-day .wl p{color:var(--d-mut);}
.g-day .wl input[type=email]{
  background:var(--d-pap);
  color:var(--d-ink);
  border:1px solid var(--d-line);
  box-shadow:inset 0 1px 2px rgba(58,34,106,.10);
}
.g-day .wl input[type=email]::placeholder{color:var(--d-gry);}
.g-day .fine{color:var(--d-gry);}
.g-day .msg{color:var(--d-mut);}

/* the footer and its rule */
.g-day .g-foot{color:var(--d-gry);border-top:1px solid var(--d-hair);}
.g-day .g-foot a{color:var(--d-acc);}
.g-day .g-fine{color:var(--d-gry);}
.g-day .g-walk{color:var(--d-acc);border-bottom-color:var(--d-hair);}
.g-day .g-nav a{color:var(--d-gry);}
.g-day .g-nav a:hover{color:var(--d-ink);}

/* ══ THE MIDWAY LINE (/game, §6) ══
   This surface is deliberately the least built thing on the property. It
   links to a page that is finished, so anything elaborate here competes with
   it and loses: the rejected version carried a panel with rivets and a pip
   run and read as more chrome than the game itself.

   What is left is a centred Abril line, one brass hairline, three plain rows
   and a ghost lever out to the anchor. The generous top padding is doing real
   work — it is what makes the emptiness read as composed rather than unfinished. */
.g-mid{text-align:center;padding-top:72px}
.g-mid-line{font-family:var(--f-d);font-weight:400;
  font-size:clamp(2.1rem,7.4vw,3.5rem);line-height:1.04;letter-spacing:-.03em;
  color:var(--bone);margin:0}
.g-hair{height:1px;border:0;margin:40px auto 0;max-width:var(--measure);
  background:linear-gradient(90deg,transparent,rgba(255,201,77,.45) 22%,rgba(255,201,77,.45) 78%,transparent)}
.g-rows{list-style:none;margin:0 auto;padding:0;max-width:var(--measure);text-align:left}
/* REGISTER (handback §1.1). These three lines are the visitor's own actions in
   human voice, so they are set in --f-s at reading size, sentence case. Mono
   uppercase is the machine register on this property — labels, state, system
   output — and setting a person's actions in it made the page read as a system
   log of the player. The words are unchanged; only the voice is.
   The brass 01/02/03 stay mono because enumeration IS machine. */
.g-row{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:17px 2px;border-bottom:1px solid rgba(255,201,77,.16);
  font-family:var(--f-s);font-size:16.5px;letter-spacing:0;text-transform:none;
  color:#E9DCF5}
.g-row:last-child{border-bottom:0}
.g-row-n{font-family:var(--f-m);font-size:10px;letter-spacing:.22em;
  color:var(--brass-d);font-variant-numeric:tabular-nums;flex:none}
/* a ghost lever: the shape of the lifted .lever with the fill taken out, so
   the one filled button on the property stays the one on the anchor */
.g-ghost{display:inline-block;margin-top:38px;font-family:var(--f-m);font-size:10px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--brass);text-decoration:none;
  padding:13px 26px;border:1px solid rgba(255,201,77,.42);border-radius:8px;
  transition:border-color .2s ease,color .2s ease}
.g-ghost:hover{border-color:var(--brass);color:var(--brass-l)}
@media(min-width:1100px){.g-mid{padding-top:104px}}

/* ══ THE FOLIO (/stories, §6) ══
   Two columns: a 62px rail with a 1px brass rule on its right carrying the
   numeral, the short title and the collector, then a wide column of prose.
   No panel behind the text — this is a printed folio, and paper does not
   have a card behind it.

   Leading is 2.1, which is loose for prose and is meant to be: it is the
   single thing that makes a screen column read as a printed page rather than
   a blog post. It is stated in §6 and again in the reference plate, so it is
   a ruled value, not a preference to tune.

   RULING 52 vs THE PLATE. The design plate sets the collector as
   "N. FORICOURT". Ruling 52 says the first name never abbreviates, and §0
   gives content and canon facts to the world handoff over this one, so the
   name is set whole here and allowed to stack. Stacking is this rail's own
   idiom anyway — the short title stacks across three lines beside it. */
.g-folio{display:grid;grid-template-columns:62px minmax(0,var(--measure));
  gap:0 18px;justify-content:center;padding-top:44px}
.g-rail{border-right:1px solid rgba(214,154,34,.3);padding:30px 14px 0 0;text-align:right}
.g-rail-n{display:block;font-family:var(--f-d);font-size:30px;color:var(--brass-d);
  line-height:1;padding-bottom:.08em}
.g-rail-m{display:block;font-family:var(--f-m);font-size:8px;letter-spacing:.22em;
  text-transform:uppercase;color:#9C8CB4;margin-top:16px;line-height:1.9}
.g-folio-bd{padding-top:30px;min-width:0}
.g-folio-bd .g-title{font-size:clamp(1.9rem,5.2vw,2.6rem)}
.g-prose{margin:20px 0 0;font-size:16.5px;line-height:2.1;color:#F0E8F6}
.g-prose p{margin:0 0 1.1em}
/* the phone has no room for a 62px margin column, so the rail lies down and
   becomes a header rule instead of a side rule */
@media(max-width:719px){
  .g-folio{grid-template-columns:minmax(0,1fr);gap:0}
  .g-rail{border-right:0;border-bottom:1px solid rgba(214,154,34,.3);
    padding:0 0 14px;text-align:left;display:flex;align-items:baseline;gap:14px}
  .g-rail-m{margin-top:0}
  .g-prose{font-size:16px;line-height:1.95}
}

/* The rail's collector slot is GONE (handback 1.4). It duplicated the tale's
   own blessed closing line on the two tellings that have a collector, and sat
   empty on the other three, so it never earned its place on any tale in the
   collection. Deleting it retires the 7px setting and the one-word-per-line
   stack in the same move.

   The ruling behind it, kept because it is easy to re-derive wrongly: the
   collector is part of the BLESSED TEXT in these tales, not metadata about
   them, and a metadata slot for a fact already in the prose is redundant by
   construction. The spec asked for the slot before real tales existed and is
   superseded on this point. The rail keeps the numeral only.

   NOT the same question as the INDEX credit, which stays: on /stories the
   prose is not present, so the credit there duplicates nothing. */

/* ═══════════════════════════════════════════════════════════════════════════
   THE ACADEMY (§6, §8)
   A composed surface, not a repeated card. Four elements in a fixed order:
   the mount, the record, the term rail, the kept tray.

   The vocabulary here is deliberately the OPPOSITE of the gate's. Nothing on
   this surface is torn, perforated or stubbed; everything is mounted, ruled,
   punched and sealed. The gate is perforated because it is surrendered; the
   Academy is sealed because it is kept. Sharing an object between the two
   would collapse the distinction the two rooms exist to draw (M3).
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1 · THE MOUNT — the only element on the property that holds media */
.g-mount{position:relative;margin-top:22px;padding:14px;background:var(--d-pap);
  border-radius:2px;box-shadow:var(--d-lift)}
.g-mount::after{content:"";position:absolute;left:7px;right:7px;top:7px;bottom:7px;
  border:1px solid rgba(138,97,11,.2);pointer-events:none}
.g-corner{position:absolute;width:0;height:0;border-style:solid;z-index:2}
.g-corner.tl{left:0;top:0;border-width:18px 18px 0 0;border-color:var(--brass-d) transparent transparent transparent}
.g-corner.tr{right:0;top:0;border-width:0 18px 18px 0;border-color:transparent var(--brass-d) transparent transparent}
.g-corner.bl{left:0;bottom:0;border-width:18px 0 0 18px;border-color:transparent transparent transparent var(--brass-d)}
.g-corner.br{right:0;bottom:0;border-width:0 0 18px 18px;border-color:transparent transparent var(--brass-d) transparent}
.g-plateimg{position:relative;height:196px;border-radius:1px;overflow:hidden;
  background:radial-gradient(70% 80% at 50% 116%, rgba(255,61,154,.2), transparent 70%),
             radial-gradient(60% 50% at 18% -8%, rgba(53,228,244,.14), transparent 70%),
             linear-gradient(160deg,#2E1B5C,#150C2C 74%);
  display:flex;align-items:center;justify-content:center}
.g-playring{width:54px;height:54px;border-radius:50%;border:1px solid rgba(255,246,230,.55);
  background:radial-gradient(circle,rgba(255,246,230,.15),transparent 72%);
  display:flex;align-items:center;justify-content:center;font-size:15px;
  color:rgba(255,246,230,.92);padding-left:3px}
.g-capplate{display:flex;justify-content:space-between;align-items:baseline;
  margin-top:12px;padding:0 2px;gap:12px}
.g-capplate .cl{font-family:var(--f-m);font-size:8px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--d-acc);flex:none}
.g-capplate .ct{font-family:var(--f-d);font-size:19px;color:var(--d-ink);
  line-height:1;padding-bottom:.06em}
.g-capplate .cr{font-family:var(--f-m);font-size:8px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--d-gry);font-variant-numeric:tabular-nums;flex:none}

/* 2 · THE RECORD — punched to be filed. The filing hole is CUT the same way
   the gate's notch is (a transparent circle inside the element's own
   background) rather than painted, for the same reason: the field behind it
   is a gradient. Progress lives in the object, not in a progress bar. */
/* MEASURE CAP (handback §1.2). Uncapped, the row label and its status column
   drift ~840px apart at 1920 and "Say it out loud … NOW" stops reading as a
   pair. The gate's stubs self-limit at 520px, which is why they hold at width
   and this did not. Centred so it sits under the mount rather than sliding
   left. */
.g-record{position:relative;margin:18px auto 0;max-width:620px;
  padding:9px 20px 14px 42px;border-radius:2px;
  /* ONE layer, not two. The reference plate stacks a solid paper layer behind
     this gradient, which paints the hole straight back in and is why the hole
     has never actually been visible. The gradient alone already paints paper
     everywhere past 8.5px — the stop colour continues beyond the ending shape
     — so the second layer was only ever filling the cut. Same technique as
     the gate's notch, and it fails the same way if anything opaque is put
     behind it. */
  background:
    radial-gradient(circle 8px at 21px 24px, transparent 8px, #FBF7FF 8.5px) no-repeat;
  filter:drop-shadow(0 0 .6px rgba(58,34,106,.4)) drop-shadow(0 8px 16px rgba(58,34,106,.2))}
.g-record>*{position:relative;z-index:1}
.g-rhead{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.g-rhead .rl{font-family:var(--f-m);font-size:8px;letter-spacing:.3em;text-transform:uppercase;color:var(--d-acc)}
.g-rhead .rr{font-family:var(--f-m);font-size:8px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--d-gry);font-variant-numeric:tabular-nums}
.g-ruled{display:block;margin-top:4px}
.g-lrow{display:flex;align-items:baseline;gap:12px;padding:9px 0;
  border-bottom:1px solid rgba(138,97,11,.18)}
.g-lrow .ln{font-family:var(--f-d);font-size:14px;color:var(--d-acc);width:24px;flex:none;line-height:1}
.g-lrow .lt{flex:1;min-width:0;font-size:12.5px;color:var(--d-ink)}
.g-lrow .lk{font-family:var(--f-m);font-size:7.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--d-gry)}
.g-lrow .lv{font-family:var(--f-m);font-size:8px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--d-gry);font-variant-numeric:tabular-nums;flex:none}
.g-lrow.done .lv{color:var(--d-acc)}
/* the current row takes a 3px inset RULE, never a fill: a filled row reads as
   a selection, and this is a place in a record, not a selected item */
.g-lrow.now{box-shadow:inset 3px 0 0 var(--d-mag);padding-left:9px;margin-left:-9px}
.g-lrow.now .lv{color:var(--d-mag)}

/* 3 · THE TERM RAIL — struck coins behind, a lit dot at the present, empty
   rings ahead. Sixteen weeks is a long promise, so the rail states it. */
.g-termrail{display:flex;align-items:center;margin-top:20px}
.g-seg{flex:1;height:1px;background:rgba(138,97,11,.26)}
.g-seg.done{background:var(--d-acc);opacity:.8}
.g-mk{width:11px;height:11px;border-radius:50%;flex:none;background:#E7DEF6;
  box-shadow:inset 0 0 0 1px rgba(138,97,11,.4)}
.g-mk.done{background:radial-gradient(circle at 34% 28%,#FFF0CE,#E8B33C 46%,var(--brass-d) 78%,#6B4A0E);
  box-shadow:inset 0 -1px 1px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.7)}
.g-mk.now{background:var(--d-mag);box-shadow:0 0 0 4px rgba(188,26,108,.16)}
.g-raillab{display:flex;justify-content:space-between;margin-top:9px;font-family:var(--f-m);
  font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:var(--d-gry)}

/* 4 · THE KEPT TRAY — deliverables, not lessons. A sealed item is mounted
   paper with a struck brass seal; an unmade one is a hollow mount. */
.g-tray{display:grid;grid-template-columns:1fr;gap:10px;margin-top:20px}
@media(min-width:560px){.g-tray{grid-template-columns:1fr 1fr 1fr}}
.g-chip{position:relative;padding:11px 11px 10px;background:var(--d-pap);
  border-radius:2px;box-shadow:var(--d-lift)}
.g-chip::after{content:"";position:absolute;left:4px;right:4px;top:4px;bottom:4px;
  border:1px solid rgba(138,97,11,.18);pointer-events:none}
.g-chip .ck{display:block;font-family:var(--f-m);font-size:7px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--d-gry);position:relative;z-index:1}
.g-chip .cn{display:block;font-family:var(--f-d);font-size:14px;color:var(--d-ink);
  line-height:1.1;margin-top:6px;padding-bottom:.06em;position:relative;z-index:1}
.g-seal{position:absolute;right:7px;bottom:7px;width:17px;height:17px;border-radius:50%;z-index:2;
  background:radial-gradient(circle at 34% 28%,#FFF0CE,#E8B33C 46%,var(--brass-d) 78%,#6B4A0E);
  box-shadow:inset 0 -1px 2px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.7)}
.g-chip.open{background:rgba(255,255,255,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 0 0 1px rgba(138,97,11,.14)}
.g-chip.open .cn{color:var(--d-mut)}
.g-traylab{display:block;font-family:var(--f-m);font-size:8px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--d-acc);margin-top:20px}

/* THE MARGIN NOTE (§8). One per surface, bracketed, machine register, always
   at its own expense about its own thoroughness. Its WORDS ARE UNBLESSED —
   the slot is built, the text is a marked placeholder.

   .g-verify is the small generated record the margin note sits under on
   /stories (ruling 11, E12): same register, same face, shares every rule
   with .g-margin but its own top margin so the pair reads as one stack. */
.g-verify,.g-margin{display:block;font-family:var(--f-m);font-size:8px;letter-spacing:.06em;
  color:rgba(138,97,11,.62);line-height:1.7}
.g-verify{margin-top:26px}
.g-margin{margin-top:11px}

/* ══ THE ACADEMY'S FOIL LAW (§8) ══
   AT REST, NO FOIL ANYWHERE. Mounts, records, rails and unopened cases carry
   brass and hairlines only. Foil is the earned state and never decoration,
   which is why none of these classes is on the page until something is won.

   It arrives on exactly three events and no others, and it is applied to the
   OBJECT EARNED — never to that object's container, and never to navigation.

   It arrives with `uwake`, the lifted reveal, unchanged. It is reused rather
   than restated so the Academy's reveal and the anchor's are the same motion.

   IT PERSISTS. Once earned it does not fade, because the Academy is the
   surface where things are kept. Nothing here has a fade-out or a timeout.

   Note this resolves M2 on the sign-off sheet, which still reads DECIDE and
   proposes an Academy with no foil at all. `UF_Foil_States_2026-09-02.html`
   is titled "M2 RESOLVED" and rules foil into an event; that file and §8 win. */

/* 1 · a question answered correctly — the daylight cousin of the lifted
       .opt.right, which does this on #132C1E */
.g-earned-answer{
  border:1px solid transparent;border-radius:9px;padding:13px 15px;
  background:linear-gradient(#EAF7F0,#EAF7F0) padding-box,var(--foil-day) border-box;
  animation:uwake 1500ms ease-out both}
.g-earned-answer .lbl{font-family:var(--f-m);font-size:8px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--d-mint)}

/* 2 · a case passed — the mount takes the edge, the case name flips to foil,
       the seal strikes */
.g-mount.g-earned-case{
  border:1px solid transparent;
  background:linear-gradient(var(--d-pap),var(--d-pap)) padding-box,var(--foil-day) border-box;
  animation:uwake 1500ms ease-out both}
.g-earned-case .ct{background-image:var(--foil-day)}

/* 3 · a term completed — the certificate takes the full edge and its title
       goes to foil. The only whole document on the property ever foiled. */
.g-cert.g-earned-term{
  border:1px solid transparent;border-radius:3px;padding:22px 20px;
  background:linear-gradient(var(--d-pap),var(--d-pap)) padding-box,var(--foil-day) border-box;
  animation:uwake 1500ms ease-out both}
.g-cert.g-earned-term .g-cert-t{background-image:var(--foil-day)}

/* §8: reduced motion holds the SETTLED state — no rise, but still earned */
@media(prefers-reduced-motion:reduce){
  .g-earned-answer,.g-mount.g-earned-case,.g-cert.g-earned-term{
    animation:none;opacity:1;transform:none;box-shadow:0 0 26px rgba(255,61,154,.22)}
}

/* the collector's credit on an index row. Her carve-out makes the byline the
   only rendered name on a Collector telling, so it is set as a credit line
   rather than folded into the blurb where it would read as description. */
.g-list .g-cby{display:block;margin-top:9px;font-family:var(--f-m);font-size:8.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--brass-d)}
@media(min-width:1100px){.g-list .g-cby{grid-column:2}}

/* the standfirst: the tale's own italic subtitle from the Mythos, which is
   shipped copy. It sits under the title rather than in the rail because these
   are full sentences and a 62px column cannot hold one. */
.g-stand{margin:14px 0 0;max-width:52ch;font-size:14.5px;line-height:1.62;
  color:var(--dusk);font-style:italic}

/* O5's keeper line, promoted to the Academy surface above the lede. Course One's
   card face, blessed-draft canon. Set apart from the lede because it is not
   introducing anything — it is the thing the course is for, said once. */
.g-keeper{margin:14px 0 0;font-family:var(--f-d);font-weight:400;
  font-size:clamp(1.15rem,2.6vw,1.5rem);letter-spacing:-.02em;line-height:1.25;
  color:var(--d-ink)}
.g-keeper + .g-lede{margin-top:10px}