/* ═══════════════════════════════════════════════════════════════════════════
   THE ACADEMY · the school at night, the classroom by day
   Built 2026-10-09 by session 5b (gate lane) on the plan of record,
   ACADEMY_BUILD_PLAN_2026-10-09.md, g2 onward.

   Loads after uf.css (the lift, never edited) and uf-site.css. Every class is
   g- prefixed. Tokens are the lifted ones: the night set (--night, --panel,
   --bone, --dusk, --line) for the school, the daylight set (--d-*) for the
   classroom. Two exceptions, both ruled: the plates carry their own colour,
   and the laser's one fixed red (g4) appears nowhere else.

   Night depth is a glow; daylight depth is a lift, never a glow.
   Motion: hover 140, press 90, swap 320; the scene veil is 800 in total
   (decisions 12: 700 to 900). No entrance animation, no confetti.

   Geometry. The app is a size container, so every stage is sized and every
   door is placed with container units and no script:
     night plates COVER the app:  W = max(100cqw, 100cqh * 16/9)
     the room is CONTAINED:       W = min(100cqw, 100cqh * 16/9)
   A door sits at plate fraction (--x, --y) of a covered plate:
     left = 50cqw + (x - .5) * W,  top = 50cqh + (y - .5) * W * 9/16
   ═══════════════════════════════════════════════════════════════════════════ */

/* The school fills the window; the footer waits below the fold. */
body.g-ac{margin:0;background:var(--night);color:var(--bone);font-family:var(--f-s);overflow-x:hidden}
body.g-ac::before{display:none}
.g-ac-app{position:relative;height:100vh;height:100dvh;overflow:hidden;container-type:size;
  container-name:g-app;background:var(--night)}
.g-ac-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}

/* ── the top: the house mark and the lever, nothing else ── */
.g-ac-top{position:absolute;left:0;right:0;top:0;z-index:40;display:flex;justify-content:space-between;
  align-items:center;gap:12px;padding:12px 16px;pointer-events:none}
.g-ac-top>*{pointer-events:auto}
.g-ac-mark{font-family:var(--f-d);font-size:15px;letter-spacing:-.02em;color:var(--bone);text-decoration:none;
  text-shadow:0 1px 8px rgba(0,0,0,.8)}
.g-ac-mark:hover{color:var(--brass-l)}
.g-ac.g-in-room .g-ac-mark{color:var(--bone)}

/* ── the care line: outside the fiction, on every screen, never behind an
      interaction. It is in the HTML, not drawn by a script. ── */
.g-care{flex:none;margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 14px;
  padding:7px 14px 8px;background:#0E0720;border-top:1px solid var(--line);
  font-family:var(--f-s);font-size:13px;line-height:1.35;color:var(--bone);text-align:center;z-index:60}
.g-care a{color:var(--brass-l);text-decoration:underline;text-underline-offset:2px}
.g-care a:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.g-care .uf-credit-row{width:auto;padding:0}

/* ── the veil between scenes ── */
.g-veil{position:absolute;inset:0;z-index:50;background:var(--night);opacity:0;pointer-events:none;
  transition:opacity 160ms ease}
.g-veil.on{opacity:1;transition-duration:160ms}
.g-veil.off{transition-duration:560ms}
@media(prefers-reduced-motion:reduce){.g-veil{transition:none!important}}

/* ═══ THE NIGHT SURFACES (A1 to A8, less A6) ═══ */
.g-scene{position:absolute;inset:0}
.g-scene:focus{outline:none}
.g-nstage{position:absolute;left:50%;top:50%;width:max(100cqw,calc(100cqh * 16 / 9));aspect-ratio:16/9;
  transform:translate(-50%,-50%)}
/* The drawer's plate (A5) and the bench's (A4) anchor to the bottom edge,
   never the top (gate lane, 2026-10-09; design answers part two, 7): in a
   short pane the front row of tabs, and the instrument at the bench's foot,
   stay in frame and the room above crops. The stall and the yard crop
   evenly; the phone keeps its own letterbox. */
@container g-app not ((max-width:719px) or (max-aspect-ratio:1/1)){
  .g-night[data-plate="a5"] .g-nstage,.g-night[data-plate="a4"] .g-nstage{top:auto;bottom:0;transform:translateX(-50%)}
}
.g-plate{display:block;width:100%;height:100%;user-select:none;-webkit-user-drag:none}
.g-plate-pic{display:contents}
.g-nstage::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(14,7,32,.55) 100%)}

/* the hud: where you stand. Source Sans 3 in small caps (design answers D1:
   Source Code Pro leaves the night plates) */
.g-stand{position:absolute;left:16px;top:58px;z-index:5;margin:0;max-width:min(80cqw,560px);
  font-family:var(--f-s);font-size:14px;font-weight:600;font-variant-caps:all-small-caps;letter-spacing:.06em;
  color:rgba(255,246,230,.6);text-shadow:0 1px 6px rgba(0,0,0,.9)}
.g-stand:focus{outline:none}

/* THE DOORS (design answers D1). The object on the plate is the door: a
   single warm point of light sits on it and nothing else marks it at rest.
   The label wakes under the torch, on hover and on focus: the place in
   Abril Fatface, sentence case, warm white at 92%; what it is in Source
   Sans 3 italic, one size down, 70%; a 1px hairline leader at 40% from the
   point to the label. No box, no fill, no capitals, no letter-spacing. It
   fades in with the beam (140 ms) and holds 600 ms after the beam leaves.
   Doors live on the stage, in the plate's own coordinates: --W and --H are
   the stage's size, and a door is clamped into the part of the plate the
   window actually shows. */
.g-nstage{--W:max(100cqw,calc(100cqh * 16 / 9));--H:calc(var(--W) * 9 / 16)}
.g-doors{list-style:none;margin:0;padding:0}
.g-door{position:absolute;z-index:6;width:0;height:0;
  left:clamp(calc((var(--W) - 100cqw) / 2 + 24px),calc(var(--x) * var(--W)),calc((var(--W) + 100cqw) / 2 - 24px));
  top:clamp(calc((var(--H) - 100cqh) / 2 + 92px),calc(var(--y) * var(--H)),calc((var(--H) + 100cqh) / 2 - 24px))}
.g-door a{position:absolute;left:-22px;top:-22px;width:44px;height:44px;border-radius:50%;display:block;text-decoration:none;color:var(--bone)}
.g-door a:focus-visible{outline:none}
.g-dpt{position:absolute;left:18px;top:18px;width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle at 40% 38%,#FFF6E6 0,#FFC94D 42%,rgba(214,154,34,.75) 66%,rgba(214,154,34,0) 72%);
  box-shadow:0 0 6px 2px rgba(255,201,77,.45),0 0 16px 5px rgba(255,201,77,.14);transition:box-shadow 140ms}
.g-door.lit .g-dpt,.g-door a:hover .g-dpt{box-shadow:0 0 8px 3px rgba(255,201,77,.6),0 0 22px 8px rgba(255,201,77,.2)}
.g-door a:focus-visible .g-dpt{box-shadow:0 0 0 2px var(--night),0 0 0 3.5px var(--brass),0 0 14px 4px rgba(255,201,77,.4)}
.g-dlead{position:absolute;left:27px;top:21.5px;width:15px;height:1px;background:rgba(255,246,230,.4)}
.g-dlab{position:absolute;left:46px;top:9px;display:block;width:max-content;max-width:260px;pointer-events:none;
  text-shadow:0 1px 8px rgba(0,0,0,.95),0 0 2px rgba(0,0,0,.85)}
.g-dlab,.g-dlead{opacity:0;transition:opacity 140ms ease 600ms}
.g-door.lit .g-dlab,.g-door.lit .g-dlead,.g-door a:hover .g-dlab,.g-door a:hover .g-dlead,
.g-door a:focus-visible .g-dlab,.g-door a:focus-visible .g-dlead{opacity:1;transition-delay:0s}
.g-dplace{display:block;font-family:var(--f-d);font-weight:400;font-size:17px;line-height:1.12;letter-spacing:0;color:rgba(255,246,230,.92)}
.g-dplace::first-letter{text-transform:uppercase}
.g-dwhat{display:block;margin-top:2px;font-family:var(--f-s);font-style:italic;font-size:14.5px;line-height:1.25;color:rgba(255,246,230,.7)}
.g-door.flip .g-dlead{left:2px}
.g-door.flip .g-dlab{left:auto;right:46px;text-align:right}
/* a lit label is part of the door: click it and you go */
.g-door.lit .g-dlab,.g-door a:hover .g-dlab,.g-door a:focus-visible .g-dlab{pointer-events:auto;cursor:pointer}
/* touch: no torch, so the labels stand at rest at 70% */
@media(pointer:coarse){.g-dlab,.g-dlead{opacity:.7;transition:none}}

/* the night panel: where an instrument, a tray or the care card sits */
.g-panel{position:absolute;z-index:8;right:16px;top:86px;bottom:16px;width:min(460px,calc(100cqw - 32px));
  overflow:auto;overscroll-behavior:contain;padding:18px 18px 20px;border-radius:4px;
  background:rgba(30,18,64,.94);border:1px solid var(--line);
  box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 0 1px rgba(255,61,154,.06),0 0 40px rgba(179,107,255,.10);
  color:var(--bone)}
.g-panel.left{right:auto;left:16px}
.g-panel h2{margin:0 0 10px;font-family:var(--f-d);font-weight:400;font-size:24px;letter-spacing:-.02em;line-height:1.15;color:var(--bone)}
.g-panel p{margin:10px 0 0;font-size:15px;line-height:1.6;color:var(--dusk)}
.g-pk{display:block;font-family:var(--f-m);font-size:9px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--brass)}

/* the projection inside a stall (A3): the film sits in the pool of projected
   light, measured on the plate (A3's bright core runs x .244 to .425,
   y .311 to .544; centre .33, .415), in the stage's own coordinates */
.g-film{position:absolute;z-index:4;left:24.05%;top:32.55%;width:18.5%;aspect-ratio:16/9;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center}

/* not yet made: the blueprint, gold linework on the drafting grid, in code */
.g-blueprint{background-color:rgba(23,13,46,.72);
  background-image:linear-gradient(rgba(255,201,77,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,201,77,.16) 1px,transparent 1px);
  background-size:14px 14px;border:1px solid rgba(255,201,77,.55);outline:1px solid rgba(255,201,77,.25);outline-offset:3px}
.g-blueprint .g-bp-t{font-family:var(--f-m);font-size:9px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--brass)}
.g-blueprint .g-bp-s{font-family:var(--f-s);font-size:12px;line-height:1.4;color:var(--dusk);padding:0 10px}

/* ═══ THE CLASSROOM (A6, the room plate, by day) ═══ */
.g-rstage{position:absolute;left:50%;top:50%;width:min(100cqw,calc(100cqh * 16 / 9));aspect-ratio:16/9;
  transform:translate(-50%,-50%);container-type:inline-size;container-name:g-room}
.g-roomplate{position:absolute;inset:0;z-index:2;width:100%;height:100%;display:block;pointer-events:none;user-select:none}

/* the ports: a night plate behind the cut glass, at 1.3x, the chosen point at
   the window's centre (positions set by script from the window table) */
.g-port{position:absolute;z-index:1;overflow:hidden;background:var(--night)}
.g-port img{position:absolute;display:block;max-width:none;pointer-events:none;user-select:none}
.g-port::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(112deg,transparent 30%,rgba(255,255,255,.07) 38%,rgba(255,255,255,.015) 46%,transparent 52%),
             radial-gradient(90% 70% at 50% 50%,transparent 55%,rgba(14,7,32,.6) 100%)}
.g-port.l{left:5.25%;top:12.889%;width:8.375%;height:65.222%}
.g-port.r{left:84.875%;top:12.889%;width:8.875%;height:65.222%}
.g-port.h{left:34.0625%;top:1.333%;width:32.0625%;height:13.778%}

/* the plaques under the sills (y 712): a door each. Design answers D1, in
   daylight: no box; Abril for the place, Source Sans italic for the rest,
   ink on the wall under the sill; a small brass screw head where a night
   door has its warm point. When the laser lands on the plate through that
   window, the screw head catches the light and the place warms. */
.g-plaque{position:absolute;z-index:3;top:79.2%;transform:translateX(-50%);width:16%;text-align:center;margin:0}
.g-plaque.l{left:9.4375%}
.g-plaque.r{left:89.3125%}
/* each plaque is a small brass plate on the sill, lettered as engraved, so it
   reads as a way out at a glance (Josh, 2026-10-09: the dark lettering on the
   wall was hard to find and to read) */
.g-plaque a{display:inline-flex;flex-direction:column;align-items:center;gap:.15cqi;padding:.35cqi .9cqi .45cqi;text-decoration:none;color:#3B2606;border-radius:2px;
  background:linear-gradient(180deg,#F2D489,#D9A63A 55%,#A87A1E);
  box-shadow:inset 0 1px 0 rgba(255,246,214,.85),inset 0 -1px 2px rgba(74,46,12,.5),0 2px 4px rgba(0,0,0,.45);transition:box-shadow 150ms,filter 150ms}
.g-plaque a:hover,.g-plaque.warm a{box-shadow:inset 0 1px 0 rgba(255,246,214,.85),inset 0 -1px 2px rgba(74,46,12,.5),0 2px 4px rgba(0,0,0,.45),0 0 12px 2px rgba(255,201,77,.45);filter:brightness(1.06)}
.g-screw{position:relative;width:max(6px,.5cqi);height:max(6px,.5cqi);border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFF0CE,#E8B33C 46%,#D69A22 70%,#6B4A0E);
  box-shadow:inset 0 -.5px 1px rgba(0,0,0,.4),0 .5px 0 rgba(255,255,255,.6);transition:box-shadow 150ms}
.g-screw::after{content:"";position:absolute;left:15%;right:15%;top:calc(50% - .5px);height:1px;background:rgba(74,46,12,.7);transform:rotate(-28deg)}
.g-plab{display:flex;flex-direction:column;align-items:center}
.g-pplace{font-family:var(--f-d);font-weight:400;font-size:max(12px,1.05cqi);line-height:1.12;color:#3B2606;text-shadow:0 1px 0 rgba(255,240,200,.45);transition:color 150ms}
.g-pplace::first-letter{text-transform:uppercase}
.g-pwhat{font-family:var(--f-s);font-style:italic;font-size:max(10.5px,.82cqi);line-height:1.25;color:rgba(59,38,6,.82)}
.g-plaque a:hover .g-pplace,.g-plaque.warm .g-pplace{color:#241548}
.g-plaque.warm .g-screw{box-shadow:inset 0 -.5px 1px rgba(0,0,0,.4),0 0 6px 2px rgba(255,201,77,.6)}
.g-plaque a:focus-visible{outline:2px solid var(--brass-d);outline-offset:2px}

/* the board: the daylight surface, a viewport the page scrolls inside */
.g-board{position:absolute;z-index:3;left:22%;top:22%;width:55.875%;height:54.444%;overflow:auto;
  overscroll-behavior:contain;container-type:inline-size;container-name:g-board;
  scrollbar-width:thin;scrollbar-color:rgba(138,97,11,.4) transparent}
.g-board-in{padding:4.2cqi 5.4cqi 5cqi;font-size:clamp(12.5px,1.9cqi,17px);line-height:1.6;color:var(--d-ink)}
.g-board:focus{outline:none}
/* a board that runs on (Josh, 2026-10-09): the words fade out a little above
   the frame, never cut at its edge, and a brass caret marks that there is
   more; both go at the end of the board */
.g-board.runs-on{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 50px),transparent calc(100% - 12px));
  mask-image:linear-gradient(180deg,#000 calc(100% - 50px),transparent calc(100% - 12px))}
.g-board-more{position:absolute;z-index:4;left:calc(22% + 27.9375% - 5px);top:calc(22% + 54.444% - 24px);width:10px;height:10px;pointer-events:none;
  border-right:1.5px solid var(--brass-d);border-bottom:1.5px solid var(--brass-d);transform:rotate(45deg);opacity:0;transition:opacity 220ms}
.g-board.runs-on+.g-board-more{opacity:.8}
@media(prefers-reduced-motion:no-preference){.g-board.runs-on+.g-board-more{animation:g-more 2.4s ease-in-out infinite}}
.g-board:focus-visible{outline:2px solid var(--brass-d);outline-offset:-3px}

/* THE PHONE'S WALL (design answers D3). On a phone the board opens zoomed;
   back in the room, the wall is the room plate at the phone's full height,
   one strip so the wainscot runs through, to swipe along: the left window,
   the board, the right window, each a resting place. The top window is
   dropped. The windows keep their night plates at the desktop's focus points. */
.g-snap{display:none}
/* (Josh, 2026-10-09: "Be sure theres no left right scroll when using a
   phone"): the swipe strip is retired; on a phone the whole room fits the
   width, the board as paper on it, its words read zoomed as before. */
@container g-app (max-width:719px) or (max-aspect-ratio:1/1){
  .g-room{overflow:hidden}
  .g-rstage{position:absolute;left:0;top:50%;transform:translateY(-50%);width:100cqw;height:auto;aspect-ratio:16/9}
  /* at full height the board is wider than the phone, so on the wall it
     stands as paper, an object to walk up to; its words are read zoomed */
  .g-room .g-board .g-board-in{visibility:hidden}
  .g-room .g-board{overflow:hidden;cursor:pointer}
  .g-room .g-board.runs-on{-webkit-mask-image:none;mask-image:none}
  .g-board-more{display:none}
}

/* the night UI layer: the plate stays where it is; the words float above it */
.g-nui{position:absolute;inset:0;z-index:5;pointer-events:none}
.g-nui>*{pointer-events:auto}

/* The phone at night (design answers D1): the doors stay on their objects,
   the plate letterboxed to the width at the top; a panel, if the scene has
   one, sits under the plate. No row of boxes. */
@container g-app (max-width:719px) or (max-aspect-ratio:1/1){
  /* the portrait plates (Josh, 2026-10-09): each night scene has its own
     1024 by 1536 plate on a phone, at the phone's full width, so nothing at
     its sides is cut ("Stuff seems cut off in the phone sizing"), standing on
     the foot of the screen with its dark top fading into the night above;
     the doors on their objects at --px, --py. A scene with a panel puts its
     plate's focus (--fy) a quarter of the way down and the panel on dark
     glass below. The landscape plates' lettered signs stand down here. */
  .g-nstage.has-p{--W:100cqw;--H:calc(100cqw * 3 / 2);left:0;top:auto;bottom:0;width:100cqw;aspect-ratio:2/3;transform:none}
  .g-nstage.has-p::before{content:"";position:absolute;left:0;right:0;top:-1px;height:22%;z-index:2;pointer-events:none;
    background:linear-gradient(to bottom,var(--night),rgba(23,13,46,0))}
  .has-panel .g-nstage.has-p{top:calc(24cqh - var(--fy,.5) * var(--H));bottom:auto}
  .g-nstage.has-p .g-plate{object-fit:cover}
  .g-nstage.has-p .g-door{left:calc(var(--px) * var(--W));top:calc(var(--py) * var(--H))}
  .g-nstage.has-p .g-dobj{left:calc((var(--px) - var(--pr)) * var(--W));top:calc(var(--py) * var(--H) - var(--pr) * var(--W));
    width:calc(var(--pr) * 2 * var(--W));height:calc(var(--pr) * 2 * var(--W));background-image:var(--plate-p);
    background-size:var(--W) var(--H);background-position:calc((var(--px) - var(--pr)) * var(--W) * -1) calc((var(--py) * var(--H) - var(--pr) * var(--W)) * -1)}
  .g-nstage.has-p .g-signs:not(.p){display:none}
  .g-nstage.has-p .g-signs.p{display:block}
  .g-night[data-plate="a3"] .g-nstage.has-p .g-film{left:16%;top:32%;width:33%}
  .g-nstage:not(.has-p){--W:100cqw;left:0;top:84px;transform:none;width:100cqw}
  .g-nstage:not(.has-p) .g-door{left:calc(var(--x) * var(--W));top:calc(var(--y) * var(--H))}
  .g-dplace{font-size:13px}.g-dwhat{font-size:11px}.g-dlab{max-width:150px}
  .g-film .g-bp-s{display:none}.g-film .g-bp-t{font-size:8px;letter-spacing:.14em}
  .g-nui{display:flex;flex-direction:column;padding:46cqh 10px 10px}
  /* under a panel the plate stops part way; the panel's glass runs to the foot */
  .has-panel .g-nui{background:linear-gradient(to bottom,transparent 0,transparent calc(46cqh - 4px),rgba(14,7,32,.92) calc(46cqh + 40px))}
  .g-stand{position:absolute;top:56px;left:12px}
  .g-panel{position:static;flex:1 1 auto;min-height:0;width:auto!important;
    background:rgba(14,7,32,.88);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:10px 10px 0 0}
}

/* ═══ THE BOARD'S CONTENT (daylight; the lifted g- objects, filled) ═══ */
.g-bd-k{display:block;font-family:var(--f-m);font-size:.62em;font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;color:var(--d-gry)}
.g-bd-t{margin:.3em 0 0;font-family:var(--f-d);font-weight:400;font-size:2.3em;line-height:1.05;
  letter-spacing:-.03em;color:var(--d-ink)}
.g-bd-h{margin:1.4em 0 0;font-family:var(--f-d);font-weight:400;font-size:1.35em;letter-spacing:-.02em;color:var(--d-ink)}
.g-bd-p{margin:.8em 0 0;max-width:34em;color:var(--d-mut)}
.g-bd-ch{margin:.5em 0 0;font-family:var(--f-m);font-size:.66em;letter-spacing:.14em;text-transform:uppercase;color:var(--d-acc)}
.g-board .g-keeper{font-size:1.45em}
.g-board .g-record,.g-board .g-mount{max-width:none}
.g-board .g-lrow .lt{font-size:.85em}
.g-board .g-lrow a{color:var(--d-ink);text-decoration:none;border-bottom:1px solid var(--d-hair)}
.g-board .g-lrow a:hover,.g-board .g-lrow a:focus-visible{color:var(--d-acc);border-bottom-color:var(--d-acc);outline:none}
.g-mods{list-style:none;margin:1.1em 0 0;padding:0;display:grid;gap:.6em}
.g-mods a{display:grid;grid-template-columns:2.2em minmax(0,1fr);align-items:baseline;gap:.4em;padding:.6em .8em;
  text-decoration:none;color:var(--d-ink);background:var(--d-pap);border-radius:2px;box-shadow:var(--d-lift);
  transition:box-shadow 140ms}
.g-mods a:hover,.g-mods a:focus-visible{outline:none;box-shadow:var(--d-lift),0 0 0 1px var(--brass-d)}
.g-mods .rn{font-family:var(--f-d);font-size:1.2em;color:var(--d-acc)}
.g-mods .nm{font-family:var(--f-d);font-size:1.15em;letter-spacing:-.02em}
.g-mods .sb{display:block;font-family:var(--f-m);font-size:.6em;letter-spacing:.2em;text-transform:uppercase;color:var(--d-gry);margin-top:.25em}
/* the home board, tightened so all four module rows stand on the board
   above the fade (Josh, 2026-10-09): each row on one line, the case and the
   axis beside the name; the title, keeper line and lede closer together.
   Zoomed, the board keeps its fuller spacing. */
.g-room[data-board="c1"] .g-board-in{padding-top:3.2cqi}
.g-room[data-board="c1"] .g-bd-t{font-size:2em}
.g-room[data-board="c1"] .g-keeper{margin-top:.35em;font-size:1.32em}
.g-room[data-board="c1"] .g-lede{margin-top:.4em;line-height:1.46}
.g-room[data-board="c1"] .g-mods{margin-top:.65em;gap:.28em}
.g-room[data-board="c1"] .g-mods a{padding:.26em .8em}
.g-room[data-board="c1"] .g-mods a>span:last-child{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:1.1em}
.g-room[data-board="c1"] .g-mods .sb{margin-top:0}
.g-bd-links{display:flex;flex-wrap:wrap;gap:.6em;margin-top:1.4em}
.g-bd-btn{display:inline-flex;align-items:center;gap:.5em;padding:.55em .9em;border-radius:3px;cursor:pointer;
  font-family:var(--f-m);font-size:.66em;font-weight:600;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;
  color:var(--d-acc);background:linear-gradient(168deg,#FFFDF9,#F8F2FF 54%,#EFE7FB);border:1px solid var(--brass-d);
  box-shadow:var(--d-lift);transition:box-shadow 140ms,color 140ms}
.g-bd-btn:hover,.g-bd-btn:focus-visible{color:var(--d-ink);outline:none;box-shadow:var(--d-lift),0 0 0 2px rgba(214,154,34,.35)}
.g-bd-btn:active{transition-duration:90ms;box-shadow:inset 0 1px 2px rgba(58,34,106,.25)}
.g-bd-btn[aria-disabled=true]{opacity:.55;cursor:default}
.g-board .g-mount{margin-top:1.2em}
.g-board .g-plateimg{height:auto;aspect-ratio:16/9}
.g-board .g-capplate .ct{font-size:1.05em}
.g-study{margin:.8em 0 0;padding:0;list-style:none;counter-reset:q}
.g-study li{counter-increment:q;position:relative;padding-left:1.8em;margin-top:.55em;color:var(--d-ink)}
.g-study li::before{content:counter(q);position:absolute;left:0;top:-.05em;font-family:var(--f-d);color:var(--d-acc)}
/* the exercise's words on the board; its own name, since the house sheet's
   .g-folio is a two-column grid that set this text a word to a line */
.g-ex-text{margin:1em 0 0;max-width:34em;font-size:1.04em;line-height:2.1;color:var(--d-ink)}

/* the Keeper's chair, one door from every screen (B6.17: "The chair is on
   every screen of the school, and it is never behind a door"). Design
   answers D1: the top-bar chips are doors too, Source Sans 3, no border, a
   warm point before the word. */
.g-door-top{margin-left:auto;display:inline-flex;align-items:center;gap:9px;padding:6px 4px;text-decoration:none;
  font-family:var(--f-s);font-size:14px;color:rgba(255,246,230,.85);text-shadow:0 1px 8px rgba(0,0,0,.85)}
.g-door-top .g-dpt{position:relative;left:auto;top:auto;flex:none}
.g-dtxt{display:inline-block}
.g-dtxt::first-letter{text-transform:uppercase}
.g-dtxt-short{display:none}
.g-door-top:hover,.g-door-top:focus-visible{color:var(--brass-l);outline:none}
.g-door-top:focus-visible .g-dpt{box-shadow:0 0 0 2px var(--night),0 0 0 3.5px var(--brass)}
.g-ac-top .g-burger{background:none!important;border:0!important;box-shadow:none!important;height:auto;padding:6px 4px;gap:9px;cursor:pointer}
.g-ac-top .g-burger::before,.g-ac-top .g-burger::after{display:none}
.g-ac-top .g-burger-i{display:none}
.g-ac-top .g-burger-t{font-family:var(--f-s);font-size:14px;letter-spacing:0;text-transform:none;color:rgba(255,246,230,.85);padding:0;
  display:inline-flex;align-items:center;gap:9px;text-shadow:0 1px 8px rgba(0,0,0,.85)}
.g-ac-top .g-burger-t::before{content:"";width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle at 40% 38%,#FFF6E6 0,#FFC94D 42%,rgba(214,154,34,.75) 66%,rgba(214,154,34,0) 72%);
  box-shadow:0 0 6px 2px rgba(255,201,77,.45)}
.g-ac-top .g-burger:hover .g-burger-t,.g-ac-top .g-burger:focus-visible .g-burger-t{color:var(--brass-l)}
@media(max-width:519px){.g-door-top{font-size:13px}}
.g-nojs{position:absolute;left:16px;right:16px;top:40%;margin:0;text-align:center;color:var(--bone);font-size:15px}
.g-panel .g-carecard{margin-top:16px;padding:12px 14px;border-radius:3px;background:rgba(14,7,32,.7);border:1px solid var(--line);color:var(--bone)}
.g-panel .g-carecard a{color:var(--brass-l)}
.g-ac-mark{white-space:nowrap}
/* a phone: the house name stays, small, at the top left, on every screen
   (gate lane, 2026-10-09); the chair's door and the menu share the right */
@media(max-width:519px){
  .g-ac-top{padding:10px 10px;gap:10px}
  .g-ac-mark{font-size:12px}
  .g-door-top{gap:6px;font-size:12px}
  .g-ac-top .g-burger{height:34px;gap:6px}
  .g-ac-top .g-burger-t{font-size:12px}
  /* the phone's shorter line for the chair's door, one line beside the
     house name (design answers part two, 4); desktop keeps the full line */
  .g-dtxt-full{display:none}
  .g-dtxt-short{display:inline-block}
}

/* ═══ THE INSTRUMENTS (g3), on the bench at night ═══ */
.g-inst{display:flex;flex-direction:column;gap:12px}
.g-inst .g-pk{margin-bottom:2px}
.g-field{display:flex;flex-direction:column;gap:5px}
.g-field label{font-family:var(--f-m);font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--dusk)}
.g-in{width:100%;box-sizing:border-box;padding:9px 11px;border-radius:3px;border:1px solid var(--line);
  background:rgba(14,7,32,.75);color:var(--bone);font-family:var(--f-s);font-size:16px;line-height:1.5;resize:vertical}
.g-in:focus{outline:none;border-color:var(--brass-d);box-shadow:0 0 0 3px rgba(255,201,77,.14),0 0 18px rgba(255,201,77,.10)}
.g-num{font-family:var(--f-m);font-size:14px;font-variant-numeric:tabular-nums;text-align:right;padding:6px 8px}
.g-small{margin:0!important;font-size:13px!important;line-height:1.5!important;color:var(--dusk)}
.g-words{display:flex;flex-wrap:wrap;gap:6px;min-height:8px}
.g-word{font:inherit;font-size:15px;line-height:1.3;padding:4px 8px;border-radius:3px;cursor:pointer;
  color:var(--bone);background:rgba(36,21,72,.9);border:1px solid var(--line);transition:border-color 140ms,box-shadow 140ms}
.g-word:hover,.g-word:focus-visible{border-color:var(--brass-d);outline:none}
.g-word:active{transition-duration:90ms}
.g-word.k1{text-decoration:line-through;text-decoration-thickness:2px;color:var(--dusk);border-color:var(--brass-d)}
.g-word.k2{text-decoration:line-through;text-decoration-style:double;color:var(--dusk);border-color:var(--sky)}
.g-word.gone{opacity:.28;cursor:default}
.g-tally{display:flex;gap:16px;margin:0!important;font-family:var(--f-m);font-size:10px!important;letter-spacing:.14em;text-transform:uppercase;color:var(--dusk)!important}
.g-tally b{font-family:var(--f-d);font-weight:400;font-size:18px;letter-spacing:0;color:var(--bone);font-variant-numeric:tabular-nums}
.g-later{padding:10px 12px;border:1px dashed rgba(255,201,77,.4);border-radius:3px}
.g-later-t{margin:0 0 8px;font-family:var(--f-m);font-size:11px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--brass)}
.g-later-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;min-height:30px}
.g-foot-line{margin-top:10px!important}
.g-cols{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:900px){.g-cols{grid-template-columns:1fr 1fr}}
.g-cols .g-field{position:relative}
.g-colcount{position:absolute;right:0;top:-4px;font-family:var(--f-d);font-size:20px;color:var(--bone);font-variant-numeric:tabular-nums}
.g-colweigh{position:absolute;right:0;top:0;font-family:var(--f-m);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
.g-sheet{display:flex;flex-wrap:wrap;gap:10px 14px;margin:4px 0 0!important}
.g-word.big{font-family:var(--f-d);font-size:24px;padding:6px 10px;letter-spacing:-.01em}
.g-word.big.k1,.g-legend .k1{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px;color:var(--bone);border-color:var(--brass-d)}
.g-word.big.k2,.g-legend .k2{text-decoration:underline wavy;text-decoration-thickness:1.5px;text-underline-offset:5px;color:var(--bone);font-style:italic;border-color:var(--sky)}
.g-legend{display:flex;gap:10px;margin:0!important}
.g-legend .g-word{cursor:default;font-size:12px}
.g-btn{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:3px;cursor:pointer;
  font-family:var(--f-m);font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:#160516;background:var(--brass);border:1px solid var(--brass-d);box-shadow:0 4px 14px rgba(0,0,0,.4);
  transition:box-shadow 140ms}
.g-btn:hover,.g-btn:focus-visible{outline:none;box-shadow:0 4px 14px rgba(0,0,0,.4),0 0 22px rgba(255,201,77,.3)}
.g-btn:active{transition-duration:90ms;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.g-btn.ghost{color:var(--brass-l);background:transparent}
.g-inst-foot{display:flex;flex-direction:column;gap:8px;margin-top:6px;padding-top:12px;border-top:1px solid var(--line)}

/* the thirteen Fridays */
.g-t13{display:flex;flex-direction:column;gap:10px;margin-top:8px;padding-top:14px;border-top:1px solid var(--line)}
.g-t13-t{margin:0;font-family:var(--f-d);font-weight:400;font-size:20px;letter-spacing:-.02em;color:var(--bone)}
/* chapter 5.2's own words, quoted in the thirteen Fridays. Its own class:
   .g-book is the Keeper's chair (D8), and the two collided. */
.g-t13-book{margin:0;padding:10px 12px;border-left:2px solid var(--brass-d);background:rgba(14,7,32,.5)}
.g-t13-book figcaption{font-family:var(--f-m);font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}
.g-t13-book blockquote{margin:6px 0 0;font-size:13.5px;line-height:1.55;color:var(--bone)}
.g-t13-book .g-checked{margin:6px 0 8px!important;font-size:12px!important;font-style:italic;color:var(--dusk)}
.g-t13-wrap{overflow-x:auto}
.g-t13-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.g-t13-table th{font-family:var(--f-m);font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dusk);text-align:right;padding:4px 4px 6px}
.g-t13-table th:first-child,.g-t13-table tbody th{text-align:left;width:3.2em}
.g-t13-table tbody th{font-family:var(--f-d);font-weight:400;font-size:15px;color:var(--brass-l)}
.g-t13-table td{padding:2px 4px}
.g-t13-table .g-close{font-family:var(--f-m);font-size:14px;text-align:right;color:var(--bone);white-space:nowrap;min-width:6.5em}
.g-t13-table .g-close.neg{color:var(--dusk)}

/* the machine's tubes over plate A4 (positions in plate percent) */
.g-tubes{position:absolute;inset:0;pointer-events:none;z-index:1}
.g-tube{position:absolute;top:59.8%;height:11.5%;width:.95%;transform:translateX(-50%);display:flex;align-items:flex-end;overflow:hidden;border-radius:5px}
.g-fill{display:block;width:100%;height:0;border-radius:4px;background:linear-gradient(#FFEDBE,#FFC94D 40%,#D69A22);
  box-shadow:0 0 10px rgba(255,201,77,.7);opacity:.82;transition:height 420ms ease-out}
@media(prefers-reduced-motion:reduce){.g-fill{transition:none}}

/* ═══ THE CARD, printed (drawer-card stock), and its preview ═══ */
.g-print{display:none}
.g-card{display:grid;gap:14px;color:#241548;font-family:"Source Sans 3",system-ui,sans-serif}
.g-card-front,.g-card-back{position:relative;background:#FBF7FF;border:1px solid #C7B6E2;border-radius:3px;padding:18px 20px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 0 0 1px rgba(138,97,11,.18),0 8px 18px rgba(58,34,106,.16)}
.g-card-face{margin:0 0 12px;font-family:"Abril Fatface",Georgia,serif;font-size:20px;letter-spacing:-.01em;line-height:1.15;color:#241548}
.g-card-l{margin:12px 0 4px;font-family:"Source Code Pro",monospace;font-size:8.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#786A90}
.g-card-s{margin:0;font-size:16px;line-height:2.1;color:#241548}
.g-card-s s{text-decoration-thickness:2px}
.g-card-s .k2{text-decoration-style:double}
.g-card-s u{text-decoration-thickness:3px;text-underline-offset:4px}
.g-card-s i{text-decoration:underline wavy;text-underline-offset:4px}
.g-rule{display:block;height:2.1em;border-bottom:1px solid #C7B6E2}
.g-card-later,.g-card-col{margin:0;padding-left:1.2em;line-height:1.9}
.g-card-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.g-card-t13{width:100%;border-collapse:collapse;font-family:"Source Code Pro",monospace;font-size:11px;font-variant-numeric:tabular-nums}
.g-card-t13 th,.g-card-t13 td{border-bottom:1px solid #E4D9F3;padding:2px 6px;text-align:right}
.g-card-t13 th{font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:#786A90}
.g-card-back{display:flex;align-items:center;justify-content:center;gap:14px;min-height:110px}
.g-card-stamp{width:46px;height:46px;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#FFF0CE,#E8B33C 46%,#D69A22 78%,#6B4A0E);
  box-shadow:inset 0 -1px 2px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.7)}
.g-card-name{margin:0;font-family:"Source Code Pro",monospace;font-size:14px;font-weight:700;letter-spacing:.4em;color:#241548}
@media print{
  @page{margin:14mm}
  html.g-ac-html,body.g-ac{height:auto;overflow:visible;background:#fff!important;display:block}
  body.g-ac>*:not(.g-print){display:none!important}
  .g-print-support{font-size:11pt;color:#000;white-space:pre}
  .g-print{display:block!important}
  .g-card{gap:10mm}
  .g-card-front,.g-card-back{box-shadow:none;break-inside:avoid}
  .g-card-stamp{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
.g-cols .g-field label{padding-right:3.6em;min-height:2.8em}
.g-inst.g-panel{width:min(440px,calc(52cqw - 16px))}
@container g-app (max-width:719px) or (max-aspect-ratio:1/1){.g-inst.g-panel{width:auto}}

/* ═══ THE CURSORS (g4) ═══
   THE TORCH, lifted from intelli.boutique's site-wide torch
   (docs/art/torch-cursor-reference.md). Values verbatim; class names carry
   the g- prefix (.gtorch, .gt-beam, .gt-glow, .torch-dot, .torch-body, .gquilt,
   .gq-beam there). Two scoping changes, both so the care line and the house
   bar are never under a hidden cursor: the overlay is absolute inside the app
   rather than fixed over the window, and cursor:none applies to the stage
   only. Where the reference puts its quilt pattern inside .gq-beam, the
   Academy puts the night plate itself, brighter, aligned to the plate. */
html.g-torch-site #g-stage,html.g-torch-site #g-stage *{cursor:none}
html.g-torch-site #g-stage input,html.g-torch-site #g-stage textarea,html.g-torch-site #g-stage select,html.g-torch-site #g-stage [contenteditable]{cursor:text}
html.g-torch-site #g-stage input[type=radio],html.g-torch-site #g-stage input[type=checkbox]{cursor:none}
.g-torch{display:block;position:absolute;inset:0;z-index:45;pointer-events:none;overflow:hidden}
.g-gt-beam{position:absolute;left:0;top:0;width:320px;height:220px;margin:-110px 0 0 -34px;transform-origin:34px 110px;will-change:transform;opacity:0;transition:opacity .3s;mix-blend-mode:screen;-webkit-mask-image:radial-gradient(ellipse 44% 38% at 30% 50%,#000 0%,rgba(0,0,0,.62) 26%,rgba(0,0,0,.26) 56%,rgba(0,0,0,.07) 82%,transparent 100%),linear-gradient(90deg,transparent 0,transparent 30px,#000 52px);-webkit-mask-composite:source-in;mask-image:radial-gradient(ellipse 44% 38% at 30% 50%,#000 0%,rgba(0,0,0,.62) 26%,rgba(0,0,0,.26) 56%,rgba(0,0,0,.07) 82%,transparent 100%),linear-gradient(90deg,transparent 0,transparent 30px,#000 52px);mask-composite:intersect}
.g-gt-glow{position:absolute;inset:0;background:radial-gradient(ellipse 20% 14% at 14% 50%,#fff7e629,#fff7e60d 55%,#fff7e600),radial-gradient(ellipse 42% 38% at 30% 50%,#fff7e60f,#fff7e604 60%,#fff7e600)}
.g-torch .g-torch-dot,.g-torch .g-torch-body{display:block;position:absolute;left:0;top:0}
.g-torch .g-torch-dot{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;will-change:transform;opacity:0;transition:opacity .3s,box-shadow .2s;background:radial-gradient(circle,#fffdf7,#fffaeee6 55%,#fff6e400);box-shadow:0 0 6px 2px #fff8e859}
.g-torch .g-torch-dot.over{box-shadow:0 0 9px 4px #fff8e88c}
.g-torch .g-torch-body{width:18px;height:6.4px;transform-origin:0 50%;will-change:transform;opacity:0;transition:opacity .3s;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.7))}
.g-torch .g-torch-body svg{display:block}
.g-torch.lit .g-gt-beam,.g-torch.lit .g-torch-dot,.g-torch.lit .g-torch-body{opacity:1}
.g-quilt{display:block;position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.g-gq-beam{position:absolute;left:0;top:0;width:320px;height:220px;margin:-110px 0 0 -34px;transform-origin:34px 110px;will-change:transform;opacity:0;transition:opacity .3s;-webkit-mask-image:radial-gradient(ellipse 44% 38% at 30% 50%,#000 0%,rgba(0,0,0,.62) 26%,rgba(0,0,0,.26) 56%,rgba(0,0,0,.07) 82%,transparent 100%),linear-gradient(90deg,transparent 0,transparent 30px,#000 52px);-webkit-mask-composite:source-in;mask-image:radial-gradient(ellipse 44% 38% at 30% 50%,#000 0%,rgba(0,0,0,.62) 26%,rgba(0,0,0,.26) 56%,rgba(0,0,0,.07) 82%,transparent 100%),linear-gradient(90deg,transparent 0,transparent 30px,#000 52px);mask-composite:intersect}
.g-gq-plate{position:absolute;background-size:100% 100%;background-repeat:no-repeat;transform:rotate(135deg);opacity:.55;filter:brightness(2.1) saturate(1.05);will-change:left,top}
.g-quilt.lit .g-gq-beam{opacity:1}

/* THE LASER, in the classroom (design answers D5). One fixed laser red,
   defined once, used by the pointer and by nothing else in the Academy.
   Board plane (the board, the wall): core 2px, bloom to 6px. Nearer plane
   (frame, sills, plaques, wainscot): core 1.5px, bloom 4px. Through the
   glass: a faint dot on the pane (1px, 40%), the far dot on the plate behind
   (core 3px, bloom 10px, shifted 3px toward the arch's centre), and a faint
   beam inside the window only (1px, 12%). Everything eases over 150 ms. */
.g-laser{--g-laser:#FF2B2B;position:absolute;inset:0;z-index:45;pointer-events:none;overflow:hidden}
html.g-laser-site #g-stage,html.g-laser-site #g-stage *{cursor:none}
html.g-laser-site #g-stage input,html.g-laser-site #g-stage textarea,html.g-laser-site #g-stage select{cursor:text}
.g-ld,.g-ld-pane,.g-ld-far{position:absolute;left:0;top:0;width:0;height:0;will-change:transform;opacity:0;transition:opacity 150ms}
.g-ld i,.g-ld-pane i,.g-ld-far i{position:absolute;display:block;border-radius:50%;background:var(--g-laser);
  transition:width 150ms,height 150ms,left 150ms,top 150ms,box-shadow 150ms,transform 150ms}
.g-ld i{width:2px;height:2px;left:-1px;top:-1px;box-shadow:0 0 4px 2px rgba(255,43,43,.55)}
.g-laser[data-plane=near] .g-ld i{width:1.5px;height:1.5px;left:-.75px;top:-.75px;box-shadow:0 0 2.5px 1.25px rgba(255,43,43,.55)}
.g-ld-pane i{width:1px;height:1px;left:-.5px;top:-.5px;opacity:.4;box-shadow:none}
.g-ld-far i{width:3px;height:3px;left:-1.5px;top:-1.5px;box-shadow:0 0 7px 3.5px rgba(255,43,43,.5)}
.g-laser.lit[data-plane=board] .g-ld,.g-laser.lit[data-plane=near] .g-ld{opacity:1}
.g-laser.lit[data-plane=glass] .g-ld-pane,.g-laser.lit[data-plane=glass] .g-ld-far{opacity:1}
.g-ray{position:absolute;inset:0;opacity:0;transition:opacity 150ms}
.g-ray line{stroke:var(--g-laser);stroke-opacity:.12;stroke-width:1}
.g-laser.lit[data-plane=glass] .g-ray{opacity:1}
@media(prefers-reduced-motion:reduce){.g-ld i,.g-ld-pane i,.g-ld-far i{transition:none}}

/* THE PENCIL on the zoomed board and THE NIB in the sentence box (design
   answers D6). The pencil redrawn for Josh (2026-10-09): lacquered in the
   house ink with three facets, a scalloped paint edge, shaved cedar and a
   graphite point, a banded brass ferrule and an eraser, a dark outline
   with a faint light halo so it reads on the board's paper and on night.
   The shaft runs up and to the right and the point is the hotspot. Over a link the
   pencil tilts a further 8 degrees. Touch and coarse pointers keep their own.
   The zoomed board lives in its own overlay (.g-zboard, D2), outside the
   room's .g-board, so the pencil is set there. */
@media(pointer:fine){
  body.g-zoomed .g-zboard,body.g-zoomed .g-zboard *{cursor:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%0A%3Cg transform=%22translate%282.5 29.5%29 rotate%28-45%29 scale%28.86%29%22%3E%0A  %3Cpath d=%22M0 0 L9 -3.3 L37.6 -3.3 Q38.8 -3.3 38.8 -2 L38.8 2 Q38.8 3.3 37.6 3.3 L9 3.3 Z%22 fill=%22none%22 stroke=%22%23FFF6E6%22 stroke-opacity=%22.4%22 stroke-width=%223%22 stroke-linejoin=%22round%22/%3E%0A  %3Cpath d=%22M0 0 L9 -3.3 L37.6 -3.3 Q38.8 -3.3 38.8 -2 L38.8 2 Q38.8 3.3 37.6 3.3 L9 3.3 Z%22 fill=%22none%22 stroke=%22%23120A26%22 stroke-opacity=%22.75%22 stroke-width=%221.5%22 stroke-linejoin=%22round%22/%3E%0A  %3Cpath d=%22M3.6 -1.3 L9 -3.1 L9 3.1 L3.6 1.3 Z%22 fill=%22%23E7C796%22/%3E%0A  %3Cpath d=%22M3.6 -1.3 L9 -3.1 L9 -1 L3.6 -.4 Z%22 fill=%22%23F4DDB4%22/%3E%0A  %3Cpath d=%22M0 0 L3.6 -1.3 L3.6 1.3 Z%22 fill=%22%232B2833%22/%3E%0A  %3Cpath d=%22M.6 -.15 L3.6 -1.2 L3.6 -.5 Z%22 fill=%22%236E6A78%22/%3E%0A  %3Crect x=%229%22 y=%22-3.1%22 width=%2221%22 height=%222.1%22 fill=%22%236A56B4%22/%3E%0A  %3Crect x=%229%22 y=%22-1%22 width=%2221%22 height=%222.1%22 fill=%22%233E2C80%22/%3E%0A  %3Crect x=%229%22 y=%221.1%22 width=%2221%22 height=%222%22 fill=%22%23251A55%22/%3E%0A  %3Crect x=%229%22 y=%22-2.6%22 width=%2221%22 height=%22.5%22 fill=%22%23fff%22 fill-opacity=%22.28%22/%3E%0A  %3Ccircle cx=%229.1%22 cy=%22-2.1%22 r=%221.05%22 fill=%22%236A56B4%22/%3E%3Ccircle cx=%229.1%22 cy=%220%22 r=%221.05%22 fill=%22%233E2C80%22/%3E%3Ccircle cx=%229.1%22 cy=%222.1%22 r=%221.05%22 fill=%22%23251A55%22/%3E%0A  %3Crect x=%2230%22 y=%22-3.2%22 width=%224.2%22 height=%226.4%22 fill=%22%23C9962E%22/%3E%0A  %3Crect x=%2230%22 y=%22-3.2%22 width=%224.2%22 height=%222%22 fill=%22%23F2D489%22/%3E%0A  %3Crect x=%2230%22 y=%221.4%22 width=%224.2%22 height=%221.8%22 fill=%22%238A610B%22/%3E%0A  %3Crect x=%2230.9%22 y=%22-3.2%22 width=%22.55%22 height=%226.4%22 fill=%22%236B4A0E%22 fill-opacity=%22.7%22/%3E%0A  %3Crect x=%2232.8%22 y=%22-3.2%22 width=%22.55%22 height=%226.4%22 fill=%22%236B4A0E%22 fill-opacity=%22.7%22/%3E%0A  %3Cpath d=%22M34.2 -3.1 L37.6 -3.1 Q38.6 -3.1 38.6 -2 L38.6 2 Q38.6 3.1 37.6 3.1 L34.2 3.1 Z%22 fill=%22%23C98A9C%22/%3E%0A  %3Cpath d=%22M34.2 -3.1 L37.6 -3.1 Q38.6 -3.1 38.6 -2 L38.6 -1.2 L34.2 -1.2 Z%22 fill=%22%23E6B3C1%22/%3E%0A%3C/g%3E%3C/svg%3E") 3 29,auto}
  body.g-zoomed .g-zboard a,body.g-zoomed .g-zboard button,body.g-zoomed .g-zboard summary,body.g-zoomed .g-zboard label,body.g-zoomed .g-zboard [role=button]{cursor:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%0A%3Cg transform=%22translate%282.5 29.5%29 rotate%28-37%29 scale%28.86%29%22%3E%0A  %3Cpath d=%22M0 0 L9 -3.3 L37.6 -3.3 Q38.8 -3.3 38.8 -2 L38.8 2 Q38.8 3.3 37.6 3.3 L9 3.3 Z%22 fill=%22none%22 stroke=%22%23FFF6E6%22 stroke-opacity=%22.4%22 stroke-width=%223%22 stroke-linejoin=%22round%22/%3E%0A  %3Cpath d=%22M0 0 L9 -3.3 L37.6 -3.3 Q38.8 -3.3 38.8 -2 L38.8 2 Q38.8 3.3 37.6 3.3 L9 3.3 Z%22 fill=%22none%22 stroke=%22%23120A26%22 stroke-opacity=%22.75%22 stroke-width=%221.5%22 stroke-linejoin=%22round%22/%3E%0A  %3Cpath d=%22M3.6 -1.3 L9 -3.1 L9 3.1 L3.6 1.3 Z%22 fill=%22%23E7C796%22/%3E%0A  %3Cpath d=%22M3.6 -1.3 L9 -3.1 L9 -1 L3.6 -.4 Z%22 fill=%22%23F4DDB4%22/%3E%0A  %3Cpath d=%22M0 0 L3.6 -1.3 L3.6 1.3 Z%22 fill=%22%232B2833%22/%3E%0A  %3Cpath d=%22M.6 -.15 L3.6 -1.2 L3.6 -.5 Z%22 fill=%22%236E6A78%22/%3E%0A  %3Crect x=%229%22 y=%22-3.1%22 width=%2221%22 height=%222.1%22 fill=%22%236A56B4%22/%3E%0A  %3Crect x=%229%22 y=%22-1%22 width=%2221%22 height=%222.1%22 fill=%22%233E2C80%22/%3E%0A  %3Crect x=%229%22 y=%221.1%22 width=%2221%22 height=%222%22 fill=%22%23251A55%22/%3E%0A  %3Crect x=%229%22 y=%22-2.6%22 width=%2221%22 height=%22.5%22 fill=%22%23fff%22 fill-opacity=%22.28%22/%3E%0A  %3Ccircle cx=%229.1%22 cy=%22-2.1%22 r=%221.05%22 fill=%22%236A56B4%22/%3E%3Ccircle cx=%229.1%22 cy=%220%22 r=%221.05%22 fill=%22%233E2C80%22/%3E%3Ccircle cx=%229.1%22 cy=%222.1%22 r=%221.05%22 fill=%22%23251A55%22/%3E%0A  %3Crect x=%2230%22 y=%22-3.2%22 width=%224.2%22 height=%226.4%22 fill=%22%23C9962E%22/%3E%0A  %3Crect x=%2230%22 y=%22-3.2%22 width=%224.2%22 height=%222%22 fill=%22%23F2D489%22/%3E%0A  %3Crect x=%2230%22 y=%221.4%22 width=%224.2%22 height=%221.8%22 fill=%22%238A610B%22/%3E%0A  %3Crect x=%2230.9%22 y=%22-3.2%22 width=%22.55%22 height=%226.4%22 fill=%22%236B4A0E%22 fill-opacity=%22.7%22/%3E%0A  %3Crect x=%2232.8%22 y=%22-3.2%22 width=%22.55%22 height=%226.4%22 fill=%22%236B4A0E%22 fill-opacity=%22.7%22/%3E%0A  %3Cpath d=%22M34.2 -3.1 L37.6 -3.1 Q38.6 -3.1 38.6 -2 L38.6 2 Q38.6 3.1 37.6 3.1 L34.2 3.1 Z%22 fill=%22%23C98A9C%22/%3E%0A  %3Cpath d=%22M34.2 -3.1 L37.6 -3.1 Q38.6 -3.1 38.6 -2 L38.6 -1.2 L34.2 -1.2 Z%22 fill=%22%23E6B3C1%22/%3E%0A%3C/g%3E%3C/svg%3E") 3 29,pointer}
  body.g-zoomed .g-zboard input,body.g-zoomed .g-zboard textarea{cursor:text}
  .g-sentence,html.g-torch-site #g-stage .g-sentence,html.g-laser-site #g-stage .g-sentence{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg transform='translate%28-3.26 .81%29 rotate%2835 12 12%29'%3E%3Crect x='10' y='1' width='4' height='12' fill='%23b48a3c'/%3E%3Cpath d='M8 13h8l-4 9z' fill='%23e9dcc3'/%3E%3Ccircle cx='12' cy='16' r='1' fill='%233a3a3a'/%3E%3C/g%3E%3C/svg%3E") 3 21,text}
}
/* the scene's heading takes focus on arrival, for a screen reader; it is not a control */
#g-stage h1[tabindex="-1"]:focus{outline:none}

/* ═══ THE CARD AND THE TRAYS (g5) ═══ */
/* the exhibit shows the card's two faces side by side, so the pair stands
   on the board rather than running off its foot (Josh, 2026-10-09) */
.g-exhibit{margin-top:1.1em;max-width:40em}
.g-exhibit .g-card{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:stretch}
.g-exhibit .g-card-front,.g-exhibit .g-card-back{padding:14px 16px}
.g-exhibit .g-card-face{font-size:1.25em}
.g-stampline{margin-top:1.2em}
.g-bd-note{margin:.9em 0 0;padding:.6em .8em;border-radius:2px;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px var(--d-hair);color:var(--d-ink);max-width:34em}
.g-bd-fine{margin:1.2em 0 0;max-width:34em;font-size:.82em;line-height:1.55;color:var(--d-gry)}
.g-cardform{margin-top:1.1em;display:grid;gap:.8em;max-width:26em}
.g-dfield{display:flex;flex-direction:column;gap:.3em}
.g-dfield label{font-family:var(--f-m);font-size:.62em;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--d-gry)}
.g-din{font:inherit;font-size:max(16px,1em);padding:.5em .7em;border-radius:2px;border:1px solid var(--d-line);background:var(--d-pap);color:var(--d-ink);box-shadow:var(--d-lift)}
.g-din:focus{outline:none;border-color:var(--brass-d);box-shadow:var(--d-lift),0 0 0 2px rgba(214,154,34,.28)}
.g-bd-btn.quiet{border-color:var(--d-line);color:var(--d-gry)}
.g-archive{display:flex;flex-direction:column;gap:12px}
.g-archive h2{margin-top:14px}
.g-kept{display:grid;gap:10px}
.g-kept .g-card,.g-tray-item .g-card{font-size:14px}
.g-kept .g-card-back,.g-tray-item .g-card-back{min-height:0;padding:8px 12px;justify-content:flex-start}
.g-kept .g-card-stamp,.g-tray-item .g-card-stamp{width:18px;height:18px}
.g-kept .g-card-name,.g-tray-item .g-card-name{font-size:10px}
.g-linkbtn{align-self:flex-start;padding:2px 0;border:0;background:none;cursor:pointer;font-family:var(--f-m);font-size:10px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dusk);text-decoration:underline;text-underline-offset:3px}
.g-linkbtn:hover,.g-linkbtn:focus-visible{color:var(--brass-l);outline:none}
.g-cardline{margin-top:6px}
.g-shared{display:flex;flex-direction:column;gap:14px}
.g-offer{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border:1px dashed rgba(255,201,77,.4);border-radius:3px}
.g-tray-item{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px solid var(--line)}
.g-tnote{padding:8px 10px;border-left:2px solid var(--line);background:rgba(14,7,32,.45)}
.g-tnote p{margin:2px 0 0!important;font-size:14px!important;color:var(--bone)!important}
.g-carecard.small{margin-top:4px;padding:6px 10px;font-size:12.5px!important}

/* ═══ THE EARNED STATES (g6) ═══ */
.g-cardobj{display:inline-flex;align-items:baseline;gap:.6em;margin-top:1em;color:var(--d-ink)}
.g-cardobj-n{font-family:var(--f-d);font-size:1.15em;letter-spacing:-.02em}
.g-board .g-mount.g-earned-case{padding:14px}
.g-kept-folio .g-card{font-size:14px}
.g-kept-folio .g-card-front,.g-kept-folio .g-card-back{box-shadow:none}
.g-kept-folio .g-card-back{min-height:0;padding:8px 12px;justify-content:flex-start}
.g-kept-folio .g-card-stamp{width:18px;height:18px}
.g-kept-folio .g-card-name{font-size:10px}
.g-board .g-earned-case .ct.g-clip{color:transparent}
.g-walk-door{margin-top:1.4em;padding-top:1em;border-top:1px solid var(--d-hair)}
.g-walk-door.dark .g-bd-btn{opacity:.55;cursor:default}
.g-board .g-cert{margin-top:.4em}
.g-board .g-cert-t{display:inline-block}
.g-cert-s{margin:1.1em 0 0;font-family:var(--f-d);font-size:1.4em;line-height:1.3;letter-spacing:-.02em;color:var(--d-ink)}
.g-cert-sign{margin-top:1.4em}
.g-film-live video{width:100%;aspect-ratio:16/9;background:#000}
.g-reading audio{width:100%}
.g-disclose{margin:6px 0 0;font-size:11.5px;line-height:1.45;color:var(--dusk)}
.g-board .g-disclose{color:var(--d-gry)}


/* ═══ THE FOOTER, below the fold ═══
   Quiet, night, no line in it with any weight. The pill's links carry no
   underline: nothing here restyles them. */
.g-ac-foot{padding:28px 16px 34px;background:#0E0720;border-top:1px solid var(--line);text-align:center}
.g-ac-foot-links{margin:0 0 14px;font-family:var(--f-s);font-size:13px;color:var(--dusk)}
.g-ac-foot-links a{color:var(--dusk);text-decoration:none;border-bottom:1px solid rgba(185,168,212,.35)}
.g-ac-foot-links a:hover,.g-ac-foot-links a:focus-visible{color:var(--brass-l);border-bottom-color:var(--brass-l);outline:none}
.g-ac-foot .uf-credit-row{padding:0}
.g-nojs a{color:var(--brass-l)}

/* ═══ THE KEEPER'S CHAIR: THE BOOK (design answers D8) ═══
   The Field Manual lies open in the lamp's light: cream paper, Abril heads,
   Source Sans body, a daylight lift for depth even at night because the
   page is lit, the lamp's warmth on the right-hand page's edge. Nothing here
   is a dark panel. The contents stand on the left-hand page; the care card is
   taped below the book. */
.g-book{position:absolute;z-index:8;left:16px;top:88px;bottom:12px;width:min(860px,51cqw);display:flex;flex-direction:column;color:var(--d-ink)}
.g-spread{position:relative;flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 16px minmax(0,1.25fr);
  background:#FFF6E6;border-radius:3px 3px 4px 4px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(138,97,11,.28),0 2px 0 #E8D9BC,0 4px 0 #DCC9A6,0 18px 40px rgba(0,0,0,.55)}
.g-spread::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(90deg,transparent 70%,rgba(255,201,77,.16) 100%),radial-gradient(120% 90% at 100% 40%,rgba(255,201,77,.10),transparent 60%)}
.g-page{overflow:auto;overscroll-behavior:contain;padding:30px 28px 34px;scrollbar-width:thin;scrollbar-color:rgba(138,97,11,.35) transparent}
.g-page:focus{outline:none}
.g-page-l{background:linear-gradient(90deg,transparent 80%,rgba(58,34,106,.08))}
.g-page-r{background:linear-gradient(270deg,transparent 85%,rgba(58,34,106,.07))}
.g-spine{background:linear-gradient(90deg,rgba(58,34,106,.16),rgba(58,34,106,.04) 45%,rgba(58,34,106,.04) 55%,rgba(58,34,106,.16))}
.g-page-l p{margin:12px 0 0;font-size:16px;line-height:1.6;color:var(--d-mut)}
.g-page-l .g-sit{margin:0;font-family:var(--f-d);font-size:30px;line-height:1.1;letter-spacing:-.02em;color:var(--d-ink)}
.g-book .g-book-text{padding:0;font-size:15.5px;line-height:1.62;color:var(--d-ink)}
.g-book .g-book-text p{margin:9px 0 0!important;font-size:15.5px!important;color:var(--d-ink)!important}
.g-book .g-book-text .g-book-cap{margin:0 0 4px!important;font-style:italic;font-size:13px!important;color:var(--d-gry)!important}
.g-book .g-book-text h4{margin:16px 0 0;font-family:var(--f-d);font-weight:400;font-size:20px;letter-spacing:-.01em;color:var(--d-ink)}
.g-book .g-book-text section:first-of-type h4{margin-top:4px}
.g-book .g-book-text a{color:var(--d-acc)}
.g-book .g-book-table th,.g-book .g-book-table td{border-bottom-color:rgba(138,97,11,.22);color:var(--d-ink)}
.g-book .g-book-table th{color:var(--d-gry)}
.g-book .g-book-pre{background:#FBF7FF;color:var(--d-ink);box-shadow:inset 0 0 0 1px rgba(138,97,11,.2)}
.g-pagein{transition:opacity 160ms ease,transform 160ms ease;transform-origin:0 50%}
.g-pagein.g-turn-out{opacity:0;transform:perspective(900px) rotateY(-10deg)}
.g-pagein.g-turn-in{animation:g-turn-in 160ms ease both}
@keyframes g-turn-in{from{opacity:0;transform:perspective(900px) rotateY(8deg)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.g-pagein{transition:none}.g-pagein.g-turn-in{animation:none}}
.g-bk-print{margin-top:18px;padding:6px 12px;cursor:pointer;font-family:var(--f-s);font-style:italic;font-size:14px;color:var(--d-ink);
  background:linear-gradient(168deg,#FFFDF9,#F8F2FF 54%,#EFE7FB);border:1px solid var(--d-hair);border-radius:3px;box-shadow:var(--d-lift)}
.g-bk-print:hover,.g-bk-print:focus-visible{color:var(--d-acc);outline:none;box-shadow:var(--d-lift),0 0 0 1px var(--brass-d)}

/* the foot under the book: the care card hangs here, taped, clear of both
   pages' words, and the book keeps its former size above it */
.g-book-foot{flex:none;height:clamp(168px,25vh,192px);padding-top:32px}
.g-slip{position:relative;width:min(540px,80%);padding:15px 18px 12px;background:#FBF7FF;border-radius:1px;transform:rotate(-.8deg);
  box-shadow:0 0 0 1px rgba(138,97,11,.22),0 8px 18px rgba(0,0,0,.4)}
.g-tape{position:absolute;top:-8px;width:62px;height:22px;background:linear-gradient(180deg,rgba(236,220,170,.88),rgba(214,196,140,.8));
  filter:drop-shadow(0 1px 1px rgba(58,34,106,.28));clip-path:polygon(2% 8%,98% 0,100% 88%,96% 100%,0 94%,4% 50%)}
.g-tape.l{left:-14px;transform:rotate(-30deg)}
.g-tape.r{right:-14px;transform:rotate(28deg)}
.g-care-h{display:block;padding:0;margin:0 0 4px;border:0;background:none;cursor:pointer;font-family:var(--f-d);font-size:18px;letter-spacing:-.01em;color:var(--d-ink);text-align:left}
.g-care-h:hover,.g-care-h:focus-visible{color:var(--d-acc);outline:none;text-decoration:underline;text-underline-offset:3px}
.g-slip .g-carecard{margin:0 0 3px;padding:0;border:0;background:none;font-size:14px;line-height:1.5;color:var(--d-ink)}
.g-slip .g-carecard a{color:var(--d-acc)}

/* the book's contents, on the left-hand page under the chair's two lines:
   the seven headings as a printed contents, a dotted leader to the
   chapter; the open one in ink with its silk ribbon marker */
.g-ct-nav{margin:18px 0 0;padding-top:12px;border-top:1px solid rgba(138,97,11,.25)}
.g-contents{list-style:none;margin:0;padding:0}
.g-ct{position:relative;display:flex;align-items:baseline;gap:6px;width:100%;padding:3px 0 3px 12px;border:0;background:none;cursor:pointer;text-align:left;
  font-family:var(--f-s);font-size:14px;line-height:1.3;color:var(--d-mut)}
.g-ct-t{flex:0 1 auto;min-width:0}
.g-ct-lead{flex:1 1 12px;min-width:12px;border-bottom:1px dotted rgba(58,34,106,.35);transform:translateY(-3px)}
.g-ct-n{flex:none;font-size:12px;font-variant-numeric:tabular-nums;color:var(--d-gry)}
.g-ct-silk{position:absolute;left:0;top:1px;width:5px;height:0;background:#BC1A6C;clip-path:polygon(0 0,100% 0,100% 100%,50% 80%,0 100%);transition:height 140ms}
.g-ct[aria-pressed=true]{color:var(--d-ink);font-weight:600}
.g-ct[aria-pressed=true] .g-ct-silk{height:20px}
.g-ct:hover,.g-ct:focus-visible{color:var(--d-acc);outline:none}
.g-ct:focus-visible .g-ct-t{text-decoration:underline;text-underline-offset:3px}

/* a page that runs on: a soft fade at its foot and a small brass caret,
   only while there is more below */
.g-pagewrap{position:relative;min-height:0;display:flex}
.g-pagewrap>.g-page{flex:1 1 auto;min-height:0}
.g-more{position:absolute;left:0;right:0;bottom:0;height:46px;pointer-events:none;opacity:0;transition:opacity 220ms;
  background:linear-gradient(180deg,rgba(255,246,230,0),rgba(255,246,230,.94) 70%)}
.g-more::after{content:"";position:absolute;left:50%;bottom:12px;width:9px;height:9px;margin-left:-5px;
  border-right:1.5px solid var(--brass-d);border-bottom:1.5px solid var(--brass-d);transform:rotate(45deg);opacity:.75}
.g-pagewrap.has-more .g-more{opacity:1}
@media(prefers-reduced-motion:no-preference){.g-pagewrap.has-more .g-more::after{animation:g-more 2.4s ease-in-out infinite}}
@keyframes g-more{0%,100%{transform:translateY(0) rotate(45deg)}50%{transform:translateY(3px) rotate(45deg)}}

@container g-app (max-width:719px) or (max-aspect-ratio:1/1){
  .g-book{position:static;width:auto;flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto}
  /* the Field Manual's tables and long lines fit the page: nothing scrolls sideways */
  .g-book .g-book-text{overflow-wrap:anywhere}
  .g-book .g-book-table{width:100%;table-layout:fixed}
  .g-book .g-book-table th,.g-book .g-book-table td{overflow-wrap:anywhere;font-size:13px;padding-left:4px;padding-right:4px}
  .g-spread{display:block;flex:none;overflow:visible}
  .g-spine{display:none}
  .g-page{overflow:visible;padding:22px 18px}
  .g-page-l{padding-bottom:6px}
  .g-pagewrap{display:block}
  .g-more{display:none}
  .g-book-foot{height:auto;padding:14px 4px 4px}
  .g-slip{width:auto}
}

/* A card is paper wherever it sits: inside a night panel its text keeps the
   card's ink and size (the panel's paragraph rule was washing it out). */
.g-panel .g-card p{margin:0}
.g-panel .g-card .g-card-face{margin:0 0 12px;font-family:"Abril Fatface",Georgia,serif;font-size:18px;line-height:1.15;color:#241548}
.g-panel .g-card .g-card-l{margin:12px 0 4px;font-family:"Source Code Pro",monospace;font-size:8.5px;font-weight:600;letter-spacing:.2em;color:#786A90}
.g-panel .g-card .g-card-s{font-size:15px;line-height:2;color:#241548}
.g-panel .g-card .g-card-name{font-size:10px;color:#241548}
.g-panel .g-card li{color:#241548}
.g-panel .g-card .g-legend{color:#241548}

/* ═══ THE BOARD, ZOOMED (design answers D2) ═══
   The room scales up to the board (g-zoom.js); as it passes out of frame the
   windows and plaques blur to 2px. Zoomed, the board's paper is the room
   plate's own, crisp, inside a 2px rail of the frame's own colour (#38230F,
   sampled from the plate's frame), and the words reflow at a reading size. */
.g-room{will-change:auto}
.g-zooming .g-port,.g-zooming .g-plaque{filter:blur(2px);transition:filter 800ms ease-in-out}
.g-zboard{position:absolute;inset:0;z-index:30;opacity:0;transition:opacity 160ms ease}
.g-zboard.on{opacity:1}
.g-zpaper{position:absolute;inset:0;background-repeat:no-repeat}
.g-zboard::after{content:"";position:absolute;inset:0;border:2px solid #38230F;pointer-events:none}
.g-zscroll{position:absolute;inset:2px;overflow:auto;overscroll-behavior:contain;padding:76px 24px 84px}
.g-zscroll:focus{outline:none}
.g-zscroll .g-board-in{max-width:760px;margin:0 auto;padding:0;font-size:17.5px}
.g-zboard.swap .g-board-in{animation:g-swap 320ms ease both}
@keyframes g-swap{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.g-zboard,.g-zooming .g-port,.g-zooming .g-plaque{transition:none}.g-zboard.swap .g-board-in{animation:none}}
.g-zback{position:absolute;left:18px;bottom:2px;height:28px;padding:0 12px;cursor:pointer;
  font-family:var(--f-s);font-style:italic;font-size:14px;line-height:26px;color:var(--d-ink);
  background:linear-gradient(168deg,#FFF6E0,#FFEDBE 60%,#F6E0A8);border:1px solid var(--d-hair);border-bottom:0;border-radius:3px 3px 0 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.g-zback:hover{color:var(--d-acc)}
.g-zback:focus-visible{outline:2px solid var(--brass-d);outline-offset:2px}
/* the house bar over the paper takes ink, not the night's warm white */
body.g-zoomed .g-ac-mark,body.g-zoomed .g-door-top,body.g-zoomed .g-ac-top .g-burger-t{color:var(--d-ink);text-shadow:none}
@container g-app (max-width:719px) or (max-aspect-ratio:1/1){
  .g-zscroll{padding:64px 18px 76px}
  .g-zscroll .g-board-in{font-size:16px}
}

/* ═══ THE ARCHIVE IS THE DRAWER (design answers D4) ═══
   Tabs stand on the plate's lit card rows; the torch reveals them and a tab
   under it lifts 4px. A pulled card rises into the light; its face is the
   lavender card stock; the back holds the notes in the classmate's hand. */
.g-tabs{position:absolute;inset:0;z-index:6;pointer-events:none}
/* A tab is the trimmed top of an index card, not a button (Josh, 2026-10-09):
   the same lavender stock as the pulled card, its shoulders cut by hand at a
   slant, a faint grain and one ruled line, and each one leaning its own small
   way, as cards in a drawer do. On the plate the stock is sheared to its
   card's slant and the lettering stays level (design answers part two, 1):
   the stock and its foil edge are drawn on ::before and .g-tab-edge, which
   take the shear; the button and its words do not. The drawer sets the type
   size and the paper's height, so level lettering clears the slant. */
.g-tab{position:absolute;left:calc(var(--x) * 100%);top:calc(var(--y) * 100%);pointer-events:auto;cursor:pointer;
  transform:translate(-50%,-100%);
  display:inline-flex;align-items:baseline;gap:.4em;padding:var(--pv-f,.45em) .85em;border:0;border-radius:0;background:none;isolation:isolate;
  color:var(--d-ink);font-family:var(--f-d);font-size:calc(var(--W,1422px) * .0078);line-height:1;white-space:nowrap;
  /* at rest the stock is unlit paper in a dark drawer, not a see-through
     sticker: dimmed, never faded; the torch brings it up */
  filter:brightness(var(--lum,.4)) drop-shadow(0 1px 0 rgba(255,255,255,.18)) drop-shadow(0 3px 4px rgba(0,0,0,.55));
  transition:filter 160ms,translate 140ms,opacity 200ms}
.g-tab::before,.g-tab-edge{content:"";position:absolute;inset:0;z-index:-1;transform:skewY(calc(var(--sk,0) * 1deg));transform-origin:50% 100%}
.g-tab::before{
  clip-path:polygon(var(--cutl,6px) 0,calc(100% - var(--cutr,8px)) 0,100% 100%,0 100%);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='70'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .22 0 0 0 0 .14 0 0 0 0 .34 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    linear-gradient(transparent calc(100% - 5px),rgba(110,80,170,.28) calc(100% - 5px),rgba(110,80,170,.28) calc(100% - 4px),transparent calc(100% - 4px)),
    linear-gradient(180deg,#F4EEFC 0%,#ECE3F8 55%,#D9CCEE 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -2px 3px rgba(60,30,110,.18)}
/* your tabs: the name in plain ink like the class's, and a thin foil edge
   along the tab's cut top and shoulders, still, no motion. The card is the
   earned object; like the kept case, the edge takes the foil, not the words
   (design answers part two, 2). */
.g-tab-edge{--fe:1.6px;background:var(--foil-day);
  clip-path:polygon(evenodd,var(--cutl,6px) 0,calc(100% - var(--cutr,8px)) 0,100% 100%,0 100%,var(--cutl,6px) 0,
    calc(var(--cutl,6px) + var(--fe)) var(--fe),var(--fe) 100%,calc(100% - var(--fe)) 100%,calc(100% - var(--cutr,8px) - var(--fe)) var(--fe),
    calc(var(--cutl,6px) + var(--fe)) var(--fe),var(--cutl,6px) 0)}
.g-tab .g-tab-n{color:var(--d-acc)}
.g-tab-name,.g-tab-i,.g-tab-rest{display:inline}
/* a tab too small for its name shows the initial; the whole name under the
   torch, the hand or the keyboard */
.g-tab.initial:not(.lit):not(:hover):not(:focus-visible){padding-block:var(--pv-i,.45em)}
.g-tab.initial:not(.lit):not(:hover):not(:focus-visible) .g-tab-rest{display:none}
.g-tab.lit,.g-tab:hover,.g-tab:focus-visible{--lum:1;translate:0 -4px;outline:none}
.g-tab:focus-visible .g-tab-name{text-decoration:underline 2px var(--brass);text-underline-offset:3px}
.g-tab:focus-visible::before{box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 0 2px var(--brass)}
@media(pointer:coarse){.g-tab{--lum:.85}}
.g-tabs.dealing .g-tab,.g-tabs.dealing .g-dlabel{opacity:0}
.g-tabs-note{position:absolute;left:44%;top:66%;transform:translateX(-50%);margin:0;max-width:340px;text-align:center;pointer-events:auto;
  font-family:var(--f-s);font-style:italic;font-size:14.5px;line-height:1.45;color:rgba(255,246,230,.8);text-shadow:0 1px 8px rgba(0,0,0,.95)}
/* the drawer front's brass label plate, past 58 tabs: "earlier", then
   "later" to come back (design answers part two, 3). On the front's slant,
   lettering level, a screw at each end; the torch finds it like a tab. */
.g-dlabel{position:absolute;left:calc(var(--x) * 100%);top:calc(var(--y) * 100%);transform:translate(-50%,-50%);z-index:2;pointer-events:auto;cursor:pointer;
  display:inline-flex;align-items:center;gap:.6em;padding:1.45em 1.1em;border:0;background:none;isolation:isolate;
  font-family:var(--f-d);font-size:max(10px,calc(var(--W,1422px) * .0085));line-height:1;color:#3B2606;
  /* level lettering on the front's 33deg slant: the plate stands tall
     enough that "earlier" clears its slanted edges */
  filter:brightness(var(--lum,.6)) drop-shadow(0 2px 3px rgba(0,0,0,.6));transition:filter 160ms,opacity 200ms}
.g-dlabel::before{content:"";position:absolute;inset:0;z-index:-1;transform:skewY(calc(var(--sk,0) * 1deg));border-radius:2px;
  background:radial-gradient(circle at .55em 50%,#6B4A0E .14em,transparent .18em),radial-gradient(circle at calc(100% - .55em) 50%,#6B4A0E .14em,transparent .18em),
    linear-gradient(180deg,#F2D489,#D9A63A 55%,#A87A1E);
  box-shadow:inset 0 1px 0 rgba(255,246,214,.8),inset 0 -1px 2px rgba(74,46,12,.5)}
.g-dlabel.lit,.g-dlabel:hover,.g-dlabel:focus-visible{--lum:1;outline:none}
.g-dlabel:focus-visible::before{box-shadow:inset 0 0 0 2px var(--night)}
/* on the phone the tabs stand in rows, each the top of its card: below the
   tab, the card's shoulder runs a little wider and goes down into the dark
   of the drawer */
.g-tabs.list{position:static;display:flex;flex-wrap:wrap;gap:22px 14px;padding:10px 6px 18px}
.g-tabs.list .g-tab{position:relative;left:auto;top:auto;transform:none;rotate:var(--lean,0deg);--lum:1;font-size:15px;padding:8px 16px 9px}
.g-tabs.list .g-tab::before,.g-tabs.list .g-tab-edge{transform:none}
.g-tabs.list .g-tab-edge{--fe:2px}
.g-tabs.list .g-tab::after{content:"";position:absolute;z-index:-2;left:-6px;right:-6px;top:calc(100% - 1px);height:9px;
  background:linear-gradient(180deg,rgba(190,172,222,.55),rgba(120,95,170,.12) 60%,rgba(20,10,40,0))}
.g-tabs.list .g-tabs-note{position:static;transform:none;text-align:left}

.g-pull-host{position:absolute;inset:0;z-index:9;pointer-events:none}
.g-pull-host:has(.g-pulled){pointer-events:auto;background:radial-gradient(70% 70% at 50% 50%,rgba(14,7,32,0),rgba(14,7,32,.45))}
.g-pulled{position:absolute;left:58%;top:50%;width:min(500px,calc(100cqw - 32px));pointer-events:auto;
  opacity:0;transform:translate(-50%,-38%) scale(.92);transition:opacity 320ms ease,transform 320ms ease;perspective:1400px}
.g-pulled.up{opacity:1;transform:translate(-50%,-50%)}
.g-pulled.away{opacity:0;transform:translate(-50%,-38%) scale(.92)}
.g-flip{position:relative;display:grid;transform-style:preserve-3d;transition:transform 320ms ease;cursor:pointer;outline:none}
.g-flip.turned{transform:rotateY(180deg)}
.g-flip:focus-visible .g-face{box-shadow:0 0 0 2px var(--brass),0 18px 40px rgba(0,0,0,.55)}
.g-face{position:relative;grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden;max-height:calc(100cqh - 150px);overflow:auto;
  padding:22px 24px 26px;border-radius:3px;background:#EFE7FB;color:var(--d-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(138,97,11,.2),0 18px 40px rgba(0,0,0,.55)}
/* the card is as tall as the side showing (gate lane, 2026-10-09): turned,
   the back's notes set the height; turned forward, the face settles to its
   own. The side away lies over the other, out of the flow. */
.g-face.back{transform:rotateY(180deg)}
.g-flip:not(.turned) .g-face.back,.g-flip.turned .g-face.front{position:absolute;inset:0}
@media(prefers-reduced-motion:reduce){.g-pulled,.g-flip{transition:none}}
.g-face .g-card{font-size:16px;gap:0}
.g-face .g-card-front{padding:0;background:none;border:0;box-shadow:none}
.g-face .g-card-back{display:none}
.g-face .g-card-face{font-size:21px}
/* the notes, in the classmate's own hand */
.g-note{position:relative;padding:10px 26px 12px 0;border-bottom:1px solid rgba(138,97,11,.2)}
.g-note-name{display:block;font-family:var(--f-s);font-size:12.5px;color:var(--d-gry)}
.g-note-t{margin:2px 0 0;font-family:"Caveat",cursive;font-weight:700;font-size:25px;line-height:1.15;color:var(--d-ink)}
.g-note-in{display:block;width:100%;margin-top:4px;resize:vertical;border:0;border-bottom:1px solid rgba(138,97,11,.35);background:
  repeating-linear-gradient(transparent 0 28px,rgba(138,97,11,.18) 28px 29px);font-family:"Caveat",cursive;font-weight:700;font-size:24px;line-height:29px;color:var(--d-ink)}
.g-note-in:focus{outline:none;border-bottom-color:var(--brass-d)}
.g-note-leave{display:inline-block;margin-top:6px;font-family:var(--f-s);font-style:italic;font-size:14px;color:var(--d-acc)}
.g-note-leave.done{color:var(--d-gry)}
/* the two marks on a corner: words only on hover or focus */
.g-mark{position:absolute;padding:0;border:0;background:none;cursor:pointer;width:22px;height:22px}
.g-mark.fold{top:0;right:0}
.g-mark.fold::before{content:"";position:absolute;top:0;right:0;border-style:solid;border-width:0 12px 12px 0;
  border-color:transparent #C6B6E8 transparent transparent;filter:drop-shadow(-1px 1px 0 rgba(58,34,106,.25));transition:border-width 140ms}
.g-mark.fold.down::before{border-width:0 22px 22px 0;border-color:transparent #B9A8D4 transparent transparent}
/* on a touch screen the fold is a 44px target, though the mark is drawn
   small in the corner (design answers part two, notes) */
@media(pointer:coarse){.g-mark.fold,.g-mark.fold.small{width:44px;height:44px}}
.g-mark.cross{bottom:10px;right:10px}
.g-mark.cross::before,.g-mark.cross::after{content:"";position:absolute;left:3px;right:3px;top:50%;height:1.5px;background:#3a3a3a;border-radius:1px}
.g-mark.cross::before{transform:rotate(38deg)}.g-mark.cross::after{transform:rotate(-34deg)}
.g-mark.small{width:18px;height:18px}
.g-note .g-mark.fold{top:8px;right:0}.g-note .g-mark.cross{bottom:auto;top:10px;right:0}
.g-mark-w{position:absolute;right:calc(100% + 6px);top:3px;white-space:nowrap;font-family:var(--f-s);font-style:italic;font-size:12.5px;
  color:var(--d-gry);opacity:0;transition:opacity 140ms;pointer-events:none}
.g-mark:hover .g-mark-w,.g-mark:focus-visible .g-mark-w{opacity:1}
.g-mark:focus-visible{outline:2px solid var(--brass-d);outline-offset:1px;border-radius:2px}
/* the plain index card in your front slot */
.g-pulled.plain{width:min(380px,calc(100cqw - 32px))}
.g-index{padding:18px 22px 20px;border-radius:2px;color:var(--d-ink);font-family:var(--f-s);font-size:15px;
  background:repeating-linear-gradient(#FBF7FF 0 25px,rgba(138,97,11,.14) 25px 26px),#FBF7FF;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(138,97,11,.2),0 18px 40px rgba(0,0,0,.55)}
.g-idx-h{margin:0 0 8px;font-family:var(--f-d);font-size:18px}
.g-idx-act{display:block;padding:4px 0;border:0;background:none;cursor:pointer;font:inherit;color:var(--d-acc);text-decoration:underline;text-underline-offset:3px}
.g-idx-act:focus-visible{outline:2px solid var(--brass-d);outline-offset:2px}
.g-idx-sure{margin:2px 0 8px;font-size:13.5px;line-height:1.45;color:var(--d-mut)}
@container g-app (max-width:719px) or (max-aspect-ratio:1/1){
  .g-pulled{left:50%;width:calc(100cqw - 20px)}
  .g-face{max-height:calc(100cqh - 120px)}
}

/* THE OBJECT LIGHTS UP (Josh, 2026-10-09): as the torch comes near a door,
   the object itself stands out on the plate: a soft ellipse of the plate,
   brightened, at the door's true place (--x, --y; --r its size as a
   fraction of the plate's width). It fades in with the label (140 ms),
   holds 600 ms after the torch moves on, and a click on it is a click on
   the door. On touch, objects glow faintly at rest. */
.g-dobjs{position:absolute;inset:0;z-index:5;pointer-events:none}
.g-dobj{position:absolute;pointer-events:auto;cursor:pointer;border-radius:50%;
  left:calc((var(--x) - var(--r)) * var(--W));top:calc(var(--y) * var(--H) - var(--r) * var(--W));
  width:calc(var(--r) * 2 * var(--W));height:calc(var(--r) * 2 * var(--W));
  background-image:var(--plate);background-repeat:no-repeat;background-size:var(--W) var(--H);
  background-position:calc((var(--x) - var(--r)) * var(--W) * -1) calc((var(--y) * var(--H) - var(--r) * var(--W)) * -1);
  filter:brightness(2.35) saturate(1.15) contrast(1.06);
  -webkit-mask-image:radial-gradient(closest-side,#000 30%,rgba(0,0,0,.55) 62%,transparent 100%);
  mask-image:radial-gradient(closest-side,#000 30%,rgba(0,0,0,.55) 62%,transparent 100%);
  opacity:0;transition:opacity 140ms ease 600ms}
.g-door.lit .g-dpt{box-shadow:0 0 10px 4px rgba(255,201,77,.65),0 0 26px 10px rgba(255,201,77,.22)}
.g-dobj.lit{opacity:1;transition-delay:0s}
@media(pointer:coarse){.g-dobj{opacity:.4;transition:none}}

/* ═══ THE SIGNS ON THE PLATES (B6.20, blessed at the sitting) ═══
   Set onto the boards the plates already carry: the layer is the plate's own
   1600x900, scaled to the stage, and each sign is mapped onto its board's
   four corners. Enamel: the house's bone with ink lettering and a ruled
   border, a little worn; brass: the drawer label's metal. Dimmed to the
   light each board stands in; they are read at a glance, never clicked. */
.g-signs{position:absolute;left:0;top:0;width:1600px;height:900px;transform-origin:0 0;transform:scale(var(--k,0));pointer-events:none;z-index:1}
.g-signs.p{display:none;width:1024px;height:1536px}
.g-sign{position:absolute;left:0;top:0;transform-origin:0 0;display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--f-d);line-height:1.1;filter:brightness(var(--lum,.8))}
.g-sign.enamel{color:var(--d-ink);letter-spacing:.06em;white-space:nowrap;border-radius:6%/12%;
  background:radial-gradient(circle at 12% 78%,rgba(58,40,20,.55) 0 1.2%,transparent 1.6%),radial-gradient(circle at 91% 18%,rgba(58,40,20,.5) 0 1%,transparent 1.4%),radial-gradient(ellipse at 30% 25%,rgba(255,255,255,.22),transparent 60%),linear-gradient(180deg,#EDE3CC,#D8C9A8);
  box-shadow:inset 0 0 0 .06em var(--bone),inset 0 0 0 .14em var(--d-ink),inset 0 -.2em .4em rgba(74,46,12,.25)}
.g-sign.brass{color:#3B2606;letter-spacing:.02em;padding:0 .4em;text-wrap:balance;border-radius:3px;
  background:linear-gradient(180deg,#F2D489,#D9A63A 55%,#A87A1E);box-shadow:inset 0 1px 0 rgba(255,246,214,.8),inset 0 -1px 2px rgba(74,46,12,.5)}

/* the care line's first sentence beside a folio's notes (B6.39): plain
   register, the card's own ink, small, its links underlined */
.g-note-care{margin:12px 0 0;padding-top:8px;border-top:1px solid rgba(58,34,106,.18);font-family:var(--f-s);font-size:12.5px;line-height:1.45;color:var(--d-gry)}
.g-note-care a{color:var(--d-acc);text-decoration:underline;text-underline-offset:2px}

/* ── the top bar's two small controls (Josh, 2026-10-09): the sound switch
      and, beside it, About the Academy. Glyphs drawn in the bar's own warm
      white with its shadow, brass under the hand; ink over the classroom's
      paper. They sit with the chair's door and the menu on the right. ── */
.g-tools{margin-left:auto;display:inline-flex;align-items:center;gap:2px}
.g-tools+.g-door-top{margin-left:6px}
.g-tool{appearance:none;background:none;border:0;margin:0;padding:0;width:34px;height:34px;border-radius:50%;
  display:inline-grid;place-items:center;cursor:pointer;color:rgba(255,246,230,.85);
  transition:color 140ms ease,background-color 140ms ease}
.g-tool svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.85));overflow:visible}
.g-tool .g-snd-body,.g-tool .g-info-dot{fill:currentColor;fill-opacity:.18}
.g-tool .g-info-dot{fill-opacity:1;stroke:none}
.g-snd .g-snd-off{display:none}
.g-snd[data-state="off"] .g-snd-on{display:none}
.g-snd[data-state="off"] .g-snd-off{display:inline}
.g-snd[data-state="off"]{color:rgba(255,246,230,.6)}
.g-tool:hover{color:var(--brass-l)}
.g-tool:active{transform:translateY(1px);transition-duration:90ms}
.g-tool:focus-visible{outline:none;color:var(--brass-l);box-shadow:0 0 0 2px var(--night),0 0 0 3.5px var(--brass)}
body.g-zoomed .g-tool{color:var(--d-ink)}
body.g-zoomed .g-tool svg{filter:none}
body.g-zoomed .g-tool:hover{color:var(--d-acc)}
/* a phone: the bar keeps one line, the house name, the two glyphs, the
   chair's short door and the menu; under 375px the glyphs step down to a
   second line at the right, under the menu */
@media(max-width:519px){
  .g-ac-top{gap:6px}
  .g-tools{gap:0}
  .g-tool{width:28px;height:30px}
  .g-tool svg{width:19px;height:19px}
  .g-tools+.g-door-top{margin-left:0}
  .g-door-top{white-space:nowrap}
}
@media(max-width:374px){
  .g-tools{position:absolute;right:8px;top:46px}
  .g-door-top{margin-left:auto!important}
}

/* ── About the Academy: one card over the school, which blurs and darkens
      behind it. No entrance animation (decisions 12). ── */
.g-about{padding:0;margin:0;border:0;background:none;color:var(--bone);
  width:100%;height:100%;max-width:none;max-height:none;overflow:hidden}
.g-about::backdrop{background:rgba(14,7,32,.62);-webkit-backdrop-filter:blur(10px) saturate(.85);backdrop-filter:blur(10px) saturate(.85)}
body.g-about-open{overflow:hidden}
.g-about-wrap{box-sizing:border-box;width:100%;height:100%;overflow-y:auto;overscroll-behavior:contain;
  display:flex;align-items:flex-start;justify-content:center;padding:max(40px,7vh) 16px 40px}
.g-about-card{position:relative;box-sizing:border-box;width:100%;max-width:38rem;margin:auto 0;
  padding:34px 38px 30px;border-radius:6px;background:linear-gradient(180deg,#22164A,#1A1038);
  border:1px solid var(--line);box-shadow:0 0 0 1px rgba(255,201,77,.08) inset,0 24px 70px rgba(0,0,0,.6);
  font-family:var(--f-s);font-size:16.5px;line-height:1.6}
.g-about-card::before{content:"";position:absolute;left:38px;right:38px;top:0;height:2px;
  background:linear-gradient(90deg,rgba(255,201,77,0),var(--brass) 20%,var(--brass) 80%,rgba(255,201,77,0));opacity:.7}
.g-about-k{margin:0;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.g-about-card h2{margin:8px 0 0;font-family:var(--f-d);font-weight:400;font-size:clamp(30px,6vw,40px);line-height:1.05;letter-spacing:-.01em;color:var(--bone)}
.g-about-lede{margin:10px 0 0;font-style:italic;color:var(--dusk);font-size:17.5px}
.g-about-s{margin-top:22px;padding-top:18px;border-top:1px solid rgba(74,46,127,.7)}
.g-about-s h3{margin:0;font-family:var(--f-s);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-l)}
.g-about-s p{margin:6px 0 0;max-width:62ch}
.g-about-s .g-about-fine{margin-top:10px;font-size:14.5px;color:var(--dusk)}
.g-about-out{margin:28px 0 0;text-align:center}
.g-about-back{appearance:none;cursor:pointer;font-family:var(--f-s);font-weight:600;font-size:15.5px;color:var(--brass-l);
  background:none;border:0;border-bottom:1px solid rgba(255,201,77,.45);padding:2px 1px 3px}
.g-about-back:hover{color:var(--bone);border-bottom-color:var(--bone)}
.g-about-x{position:absolute;right:10px;top:10px;width:38px;height:38px;border-radius:50%;appearance:none;border:0;background:none;
  display:grid;place-items:center;cursor:pointer;color:var(--dusk);transition:color 140ms ease}
.g-about-x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.g-about-x:hover{color:var(--brass-l)}
.g-about-back:focus-visible,.g-about-x:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
@media(max-width:519px){
  .g-about-wrap{padding:16px 12px 24px}
  .g-about-card{padding:28px 20px 24px;font-size:16px}
  .g-about-card::before{left:20px;right:20px}
}
@media print{.g-about,.g-tools{display:none!important}}


/* ── the standing labels on a phone (Josh, 2026-10-09: "The yard needs
      small persistent beautiful labels so they know where to click and
      what they are clicking on, include both the name of the destination
      and a brief description"; then "it should only be a single click to
      get around"). In every night scene, each door's own words, the place
      in Abril and what it is in Source Sans italic, on a small dark glass
      tag beside its point, always shown; each tag takes the side set for it
      (pl: r, l, a above, b below, br below and to the right) so none meet.
      The tag is part of its door: one tap on the tag or the point goes in. ── */
@container g-app (max-width:719px) or (max-aspect-ratio:1/1){
  .g-night .g-dlab{display:block;opacity:1;pointer-events:auto;cursor:pointer;transition:none;
    position:absolute;left:36px;top:22px;transform:translateY(-50%);width:max-content;max-width:140px;-webkit-hyphens:manual;hyphens:manual;
    padding:4px 8px 5px;border-radius:7px;text-align:left;
    background:rgba(14,7,32,.74);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
    border:1px solid rgba(255,201,77,.2);box-shadow:0 2px 10px rgba(0,0,0,.45);text-shadow:none}
  .g-night .g-dplace{font-size:12.5px;line-height:1.12;color:rgba(255,246,230,.96)}
  .g-night .g-dwhat{margin-top:1px;font-size:10.5px;line-height:1.2;color:rgba(255,246,230,.72)}
  .g-night .g-door.pl-l .g-dlab{left:auto;right:36px;text-align:right}
  .g-night .g-door.pl-a .g-dlab{left:22px;top:auto;bottom:34px;transform:translateX(-50%);text-align:center}
  .g-night .g-door.pl-b .g-dlab{left:22px;top:34px;transform:translateX(-50%);text-align:center}
  .g-night .g-door.pl-br .g-dlab{left:10px;top:34px;transform:none}
}

/* ── a phone or a tablet held sideways (Josh, 2026-10-10: "It doesn't look right in
      widescreen phone mode and clicking on the items in the yard ... didn't
      work very well"). A touch screen under 500px tall is a phone on its
      side: the wide plates already fit it, so they stay, but it is a phone,
      not a desk, so the doors carry the phone's standing tags (one tap goes
      in; the default side is right, or left past the plate's .62, and lpl-
      sets one where they would meet), and the Keeper's book stands as one
      scrolling panel on the left. Nothing here reaches a desktop, which has
      a fine pointer. ── */
/* every touch screen held sideways, phone or tablet: the standing tags, one tap */
@media (pointer:coarse) and (min-aspect-ratio:1/1){
  .g-night .g-dlead{display:none}
  .g-night .g-dpt{left:16px;top:16px;width:12px;height:12px}
  .g-night .g-dlab{display:block;opacity:1;pointer-events:auto;cursor:pointer;transition:none;
    position:absolute;left:36px;right:auto;top:22px;transform:translateY(-50%);width:max-content;max-width:170px;
    padding:4px 8px 5px;border-radius:7px;text-align:left;-webkit-hyphens:manual;hyphens:manual;
    background:rgba(14,7,32,.74);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
    border:1px solid rgba(255,201,77,.2);box-shadow:0 2px 10px rgba(0,0,0,.45);text-shadow:none}
  .g-night .g-dplace{font-size:12.5px;line-height:1.12;color:rgba(255,246,230,.96)}
  .g-night .g-dwhat{margin-top:1px;font-size:10.5px;line-height:1.2;color:rgba(255,246,230,.72)}
  /* the upright phone's sides (pl-) belong to the tall plates: reset them first */
  .g-night .g-door.pl-a .g-dlab,.g-night .g-door.pl-b .g-dlab,.g-night .g-door.pl-br .g-dlab,
  .g-night .g-door.pl-l .g-dlab,.g-night .g-door.pl-r .g-dlab{left:36px;right:auto;top:22px;bottom:auto;transform:translateY(-50%);text-align:left}
  .g-night .g-door.flip .g-dlab,.g-night .g-door.lpl-l .g-dlab{left:auto;right:36px;text-align:right}
  .g-night .g-door.lpl-r .g-dlab{left:36px;right:auto;text-align:left}
  .g-night .g-door.lpl-a .g-dlab{left:22px;right:auto;top:auto;bottom:34px;transform:translateX(-50%);text-align:center}
  .g-dobj{opacity:.25}
  .g-dobj.lit{opacity:1}
}
@media (pointer:coarse) and (max-height:500px){
  /* the Keeper's book: one column, scrolling, on the left */
  .g-book{left:12px;top:84px;bottom:8px;width:min(52cqw,520px);overflow-x:hidden;overflow-y:auto;display:block}
  .g-spread{display:block;flex:none;overflow:visible}
  .g-spine{display:none}
  .g-page{overflow:visible;padding:18px 18px}
  .g-page-l{padding-bottom:6px}
  .g-pagewrap{display:block}
  .g-more{display:none}
  .g-book-foot{height:auto;padding:12px 4px 4px}
  .g-slip{width:auto}
  .g-book{position:absolute}
  .g-book .g-book-text{overflow-wrap:anywhere}
  .g-book .g-book-table{width:100%;table-layout:fixed}
  /* a narrow phone on its side (the SE, 667 wide) also meets the upright
     phone's narrow-width rules: here the wide plate's own geometry, doors and
     panels are put back, as on a desk */
  .g-nstage.has-p,.g-nstage:not(.has-p){--W:max(100cqw,calc(100cqh * 16 / 9));--H:calc(var(--W) * 9 / 16);
    left:50%;top:50%;bottom:auto;width:var(--W);aspect-ratio:16/9;transform:translate(-50%,-50%)}
  .has-panel .g-nstage.has-p{top:50%;bottom:auto}
  .g-nstage.has-p::before{display:none}
  .g-nstage .g-door,.g-nstage.has-p .g-door,.g-nstage:not(.has-p) .g-door{
    left:clamp(calc((var(--W) - 100cqw) / 2 + 24px),calc(var(--x) * var(--W)),calc((var(--W) + 100cqw) / 2 - 24px));
    top:clamp(calc((var(--H) - 100cqh) / 2 + 96px),calc(var(--y) * var(--H)),calc((var(--H) + 100cqh) / 2 - 24px))}
  .g-nstage.has-p .g-dobj{left:calc((var(--x) - var(--r)) * var(--W));top:calc(var(--y) * var(--H) - var(--r) * var(--W));
    width:calc(var(--r) * 2 * var(--W));height:calc(var(--r) * 2 * var(--W));background-image:var(--plate);
    background-size:var(--W) var(--H);background-position:calc((var(--x) - var(--r)) * var(--W) * -1) calc((var(--y) * var(--H) - var(--r) * var(--W)) * -1)}
  .g-nstage.has-p .g-signs:not(.p){display:block}
  .g-nstage.has-p .g-signs.p{display:none}
  .g-night[data-plate="a3"] .g-nstage.has-p .g-film{left:24.05%;top:32.55%;width:18.5%}
  .g-nui{display:block;padding:0;background:none}
  .has-panel .g-nui{background:none}
  .g-stand{position:absolute;left:16px;top:58px}
  .g-panel{position:absolute;right:16px;left:auto;top:86px;bottom:12px;width:min(460px,calc(50cqw - 24px))!important;
    border-radius:4px;background:rgba(30,18,64,.94);-webkit-backdrop-filter:none;backdrop-filter:none}
  .g-panel.left{right:auto;left:16px}
  /* the archive's and the bench's plates stand on the foot of the screen on a desk;
     here they centre, so no door goes under the top bar */
  .g-night[data-plate="a5"] .g-nstage,.g-night[data-plate="a4"] .g-nstage{top:50%;bottom:auto;transform:translate(-50%,-50%)}
}

/* a tablet's standing tags: the same tags, a size up for the larger screen,
   upright (the phone's tall-plate layout) or sideways */
@container g-app (max-aspect-ratio:1/1) and (min-width:700px){
  .g-night .g-dlab{max-width:190px;padding:5px 10px 6px}
  .g-night .g-dplace{font-size:15.5px}
  .g-night .g-dwhat{font-size:12.5px}
}
@media (pointer:coarse) and (min-aspect-ratio:1/1) and (min-height:700px){
  .g-night .g-dlab{max-width:210px;padding:5px 10px 6px}
  .g-night .g-dplace{font-size:15.5px}
  .g-night .g-dwhat{font-size:12.5px}
}