/* ============================================================================
   southnorth.se — one stylesheet. Tokens first; nothing hard-coded below :root.
   Typographic register: antidot.gr. Layout structure: wk.com. Palette: brief 2c.
   ========================================================================== */

:root{
  /* --- palette ---------------------------------------------------------- */
  --blue:#2036E8;      /* PRIMARY — accents, links, section numbers, hover */
  --paper:#F2F0EA;     /* page ground */
  --greige:#D6CEC2;    /* frames, secondary surfaces, placeholder boxes */
  --ink:#141414;       /* text */
  --red:#FF4B33;       /* graphic only — one accent per page */
  --red-text:#C92B00;  /* the same accent, deep enough to read as text: 4.81 on paper (--red is 2.92) */
  --amber:#FFB700;     /* graphic only — pairs with red, never with blue */
  --mono-dim:#6E6C69;  /* captions */
  --frame:#000000;     /* the footer film's frame — the only true black */
  --sphere-ink:20,20,20; /* the hero sphere's dots, as an rgb triplet for alpha */
  --hairline:rgba(20,20,20,.14);

  /* --- type ------------------------------------------------------------- *
   * When the PP Neue Montreal licence lands, change --font on this one line
   * and delete the Inter <link> in the three page heads. Nothing else moves. */
  --font:'Inter','Helvetica Neue',Arial,sans-serif;
  /* The hero wordmark only — a display face used as a logotype, never for running
     text. TRIAL FILE: see TODO.md before this ships. */
  --font-logotype:'Agharti','Inter','Helvetica Neue',Arial,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',monospace;

  /* THE SCALE IS REM, CONTINUOUS, AND NOTHING SETS A FLAT PX SIZE. Ported from the
     Silly Wizards Guild's scale on 2026-09-23 at Filippos's word — this site's type
     was small on a large display for the reasons that repo had already found and
     fixed. Three rules, checked by `aios/checks/type-scale.mjs`:

       · Rem, never px. CSS pixels say nothing about physical size, and a px size opts
         that element out of the reader's browser text-size setting for ever.
       · The rem term carries the size; the vw term only tilts it. Each token must pass
         at least 60% of a reader's enlargement through, or the setting is decoration.
       · No dead zones: every token is off its floor by 1280px and still growing at
         1920px, so the screens most people use do not get the phone size.

     VALUES ARE THE GUILD'S, EXACTLY (Filippos, 2026-11-12: "identical to the Guild in sizes
     everywhere"), role for role, read from its live stylesheet. They were taken down 20% on
     2026-09-23 while this site's container was 1280px; the container is now the Guild's 125rem
     too, which is what made the same type look right there. The one place that is not the
     Guild's own is the hero wordmark: the Guild sizes its name for "Silly Wizards" in its face,
     and SNS's is Agharti, so the wordmark takes the page-head size (--fs-display) instead.
     --fs-head is the section head's step; --fs-nano is the smallest. */
  --fs-display:clamp(3.75rem,12vw,16.4062rem);       /* page heads, and SNS's wordmark */
  --fs-large:clamp(2.5rem,6.4vw,6.5625rem);
  --fs-lead:clamp(1.25rem,1.45rem + 0.77vw,2.6rem);
  --fs-section:clamp(1.875rem,2.375rem + 1.25vw,4.875rem);
  --fs-head:clamp(1.5rem,1.75rem + 0.9vw,3.375rem);
  --fs-title:clamp(1.3281rem,1.625rem + 0.62vw,2.75rem);
  --fs-body:clamp(1.25rem,1.25rem + 0.52vw,2.1875rem);
  --fs-small:clamp(1.0938rem,1.0938rem + 0.35vw,1.75rem);
  --fs-micro:clamp(0.9375rem,0.9375rem + 0.3vw,1.5rem);
  --fs-mono:clamp(0.8594rem,0.8594rem + 0.22vw,1.25rem);
  --fs-nano:clamp(0.6875rem,0.6875rem + 0.16vw,1rem);

  --track-display:-.035em;
  --track-mono:.14em;

  /* --- rhythm ----------------------------------------------------------- */
  --measure:34em;
  /* THE GUILD'S CONTAINER, 125rem — 2000px at the default text size (Filippos, 2026-11-12:
     the cases were "small and too tightly placed together" beside the Guild's). The padding,
     the grid gap and the section spacing were already identical; this was the only token that
     differed, and it sets how wide a case can be. SITE-WIDE ON PURPOSE: the nav, the footer and
     every page share one container, because a nav that moves between pages is a defect. It
     only shows above 1280px; below that the page is as wide as the window, as before. */
  --max-w:125rem;
  --pad-x:clamp(20px,5vw,64px);
  --pad-section:clamp(72px,10vw,140px);
  --gap-grid:clamp(28px,4vw,72px);
}

@font-face{
  font-family:'Agharti';
  src:url('assets/fonts/agharti-extrawide-extrabold.otf') format('opentype');
  font-weight:800;font-style:normal;font-display:block;
}

/* --- reset ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--font);font-size:var(--fs-body);line-height:1.6;
  font-weight:400;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

.wrap{max-width:var(--max-w);margin:0 auto;padding:0 var(--pad-x)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--pad-x);top:12px;z-index:20;background:var(--blue);color:var(--paper);padding:8px 14px;font-family:var(--font-mono);font-size:var(--fs-mono);text-transform:uppercase;letter-spacing:var(--track-mono)}

/* --- shared type ---------------------------------------------------------- */
.display{
  font-size:var(--fs-display);line-height:.95;letter-spacing:var(--track-display);
  font-weight:500;
}
.display span{display:block}
/* TRIAL 2026-08-18 — hero only: the whole name in blue, the discipline tag string in
   --red, the same colour as the arrow chip after the email. Delete this block to
   return the hero to ink. */
.hero .display span{color:var(--blue)}
/* The hero name is set as a logotype: its own face, 25% larger than the shared display
   scale, with the grotesk's -.035em replaced by a little positive tracking — a heavy
   face this size needs air between the letters, not less. Scoped to the hero so the
   Work and About headlines keep the grotesk at the shared size. */
.hero .display{
  font-family:var(--font-logotype);font-weight:800;
  font-size:var(--fs-display);letter-spacing:.02em;
}
.hero .tagstring{color:var(--red)}
.lead{font-size:var(--fs-lead);line-height:1.35;letter-spacing:-.015em;max-width:22em;font-weight:400}
.prose{max-width:var(--measure)}
.prose p + p{margin-top:1.2em}

.mono{
  font-family:var(--font-mono);font-size:var(--fs-mono);font-weight:400;
  letter-spacing:var(--track-mono);color:var(--mono-dim);
}

.tagstring{
  /* The Guild's size for this line, --fs-mono (Filippos, 2026-11-12). It stood at 144% of
     --fs-nano while the scale was cut, and the Guild's own mono is larger than that was. */
  font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:.1em;
  color:var(--mono-dim);text-transform:lowercase;line-height:1.9;
}

/* Numbered section headers — number and label the same size, number in blue. */
.section-head{
  font-size:var(--fs-section);font-weight:500;letter-spacing:-.02em;line-height:1;
  display:flex;gap:.6em;align-items:baseline;
  padding-bottom:22px;border-bottom:1px solid var(--hairline);margin-bottom:clamp(32px,4vw,56px);
}
.section-head .num{color:var(--blue);font-variant-numeric:tabular-nums}

/* Content that is not final. Visible on purpose. */
.todo-inline{font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);
  color:var(--mono-dim);background:var(--greige);padding:2px 6px}

/* --- nav ------------------------------------------------------------------ */
.nav{position:sticky;top:0;z-index:10;background:var(--paper);border-bottom:1px solid var(--hairline)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:20px}
.nav-name{font-size:1.0938rem;font-weight:500;letter-spacing:-.015em;white-space:nowrap;display:inline-flex;align-items:center;gap:10px}
/* Solid shapes read heavier than type at the same height, so the mark is set
   a little under the wordmark's cap height rather than matching it. */
.nav-mark{height:10px;width:auto;display:block;flex:none}
.nav-name:hover{color:var(--blue)}
.nav-links{display:flex;gap:28px}
.nav-links a{
  font-family:var(--font-mono);font-size:0.7813rem;letter-spacing:var(--track-mono);
  text-transform:uppercase;color:var(--mono-dim);transition:color .15s;
}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--blue)}

/* --- hero ----------------------------------------------------------------- */

/* The sphere sits behind everything in the hero and is inert: no pointer events,
   hidden from assistive tech, and it never intercepts a click on the scroll cue. */
/* Square by construction. The bitmap is square, so a non-square box would render the
   sphere as an ellipse. Sized off the hero's height and centred, drifting right of the
   type rather than sitting dead centre. */
.hero-sphere{
  position:absolute;z-index:0;
  top:50%;left:58%;transform:translate(-50%,-50%);
  height:min(110vh,1075px);aspect-ratio:1;width:auto;
  /* Interactive: it accepts a drag. The hero's content sits above it, so the type and
     the scroll cue still take their own clicks. Vertical scroll is left to the page. */
  touch-action:pan-y;
}
@media (max-width:900px){ .hero-sphere{left:50%;height:min(77.5vh,650px)} }
/* The second half of the lockup, as on the Guild's home (Filippos, 2026-09-21). Mono,
   tracked, uppercase, in --red-text: at this size --red would fail even the large-text
   floor (2.92 against 3.0). */
.motto{
  margin-top:clamp(14px,1.6vw,22px);
  font-family:var(--font-mono);font-size:1.6759rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--red-text);line-height:1.4;
}
/* The motto is the Guild's, so it goes there. The link carries no underline and no colour
   of its own: it is already the one red line on the page, and a rule under tracked capitals
   reads as a mistake. It fades on hover, the way the contact page's lines do. */
.motto a{color:inherit;text-decoration:none;transition:opacity .15s}
.motto a:hover,.motto a:focus-visible{opacity:.7}
.hero > *:not(.hero-sphere){position:relative;z-index:1}
.hero{position:relative;
  /* The sphere is wider than a phone (650px at 390) and hung off the right edge, which
     widened the viewport and let the page scroll sideways. `clip` cuts it to the hero
     without making a scroll container, so the sticky nav above is untouched. */
  overflow-x:clip;
  min-height:calc(100svh - 65px);padding-block:clamp(56px,9vw,120px) 32px;
  display:flex;flex-direction:column;
}
.hero-body{margin-top:clamp(40px,6vw,88px);display:flex;flex-direction:column;gap:28px}
.scroll-cue{
  margin-top:auto;padding-top:48px;align-self:flex-start;
  font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);
  color:var(--mono-dim);transition:color .15s;
}
.scroll-cue:hover{color:var(--blue)}

/* --- page header (work / contact) ----------------------------------------- */
.page-head{padding-block:clamp(56px,8vw,110px) clamp(40px,5vw,72px)}
.page-head .display{margin-bottom:clamp(24px,3vw,40px)}
.page-head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}

/* --- sections ------------------------------------------------------------- */
.section{padding-block:0 var(--pad-section)}
/* The studios header sits in the wrap; the doorway rows below it bleed full width. */
.doors-head{padding-block:0}
.section-doors{padding-block:0 var(--pad-section)}
.hero + .section{padding-block-start:clamp(56px,7vw,96px)}

/* --- work grid ------------------------------------------------------------ *
   The Lab's tiles are the Guild's, taken from sillywizardsguild.com on 2026-11-12 at
   Filippos's word: the same frames, reels, caption, credit line and read-more, the same
   rules. The one change is the accent — SNS blue where the Guild's is orange.
   (Source: the Guild's styles.css, origin/main 0bd7fb8, its masonry-to-case block.) */
/* Masonry, not grid. Grid rows are as tall as their tallest cell, so a 16:9 tile
   sitting beside a 4:5 one left a 466px hole under its caption -- 41% of the section
   was empty. Columns let each tile take only the height it needs. The cost is that
   reading order becomes column-major, which the ( 01/08 ) indices already carry. */
.grid{columns:2;column-gap:var(--gap-grid)}
.tile{break-inside:avoid;margin-bottom:var(--gap-grid)}
.tile{display:block}
.ph{
  background:var(--greige);display:grid;place-items:center;
  border:1px solid transparent;transition:border-color .15s;
}
.ph-label{
  font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);
  color:var(--mono-dim);text-transform:lowercase;padding:0 16px;text-align:center;
}
/* Hover edge is the site's blue. Colour only — no motion. */
.tile:hover .ph{border-color:var(--blue)}

/* A frame that carries real media holds it edge to edge and never lets it resize
   the frame — the aspect ratio is the design, the media fits inside it.

   TWO THINGS HERE ARE FIXES, AND BOTH WERE INVISIBLE UNTIL A SERIES MIXED RATIOS.

   place-items:stretch. .ph centres its contents so an empty frame can middle its
   label, and a centred grid item is NOT stretched — so `height:100%` below had
   nothing to resolve against and object-fit:cover never cropped anything. Every
   image simply sat at its natural height. It looked correct only while each image
   matched its frame's declared aspect exactly.

   [hidden]. `.ph img` is specificity (0,1,1) and the browser's own `[hidden]` rule
   is (0,1,0), so `display:block` beat it and NO FRAME IN A SERIES WAS EVER HIDDEN.
   They were all painted, stacked, and merely clipped by overflow:hidden above —
   which held up for as long as the first image happened to fill the frame. ASTRA
   pairs a 16:9 still with a 3:2 one: the first covered 308px of a 367px frame and
   the next image showed through the remaining 59. */
.ph--filled{overflow:hidden;place-items:stretch;position:relative}
/* Pin media to the frame rather than letting an intrinsic image ratio make the grid
   item taller than its aspect-ratio box. This also makes each slide's object-position
   a real focal point: `center bottom` now removes excess image from the top. */
.ph img,.ph video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ph img[hidden],.ph video[hidden]{display:none}
.ph[data-reel]{cursor:pointer}
.ph[data-reel]:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

.tile figcaption{padding-top:16px;display:flex;flex-direction:column;gap:6px}

/* The small mono line says what the frame does. A reel that can move carries a native
   Next button, and a reel showing film carries Play beside it; controls stay below the
   frame because type over unknown media is a contrast gamble. */
.tile-do{
  font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);
  color:var(--blue);text-transform:lowercase;cursor:pointer;
}
/* On the caption's left edge, where the title and the read-more hairline start
   (Filippos, 2026-09-11; they sat centred until then). A lone button would stretch
   across the caption column and centre its own text, so it keeps its own width
   instead, and the two-control row starts at the edge too. Wraps because a narrow
   column cannot hold both controls on one line. */
.tile figcaption>.tile-do{align-self:flex-start}
.tile-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* Punctuation, not an action: the separator takes the meta line's dim tone so the
   controls beside it read as two things to do, not one run-on phrase. */
.tile-sep{
  font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);
  color:var(--mono-dim);
}
.tile-do--button{appearance:none;border:0;background:none;padding:0}
.tile-do--button:hover{color:var(--ink)}
.tile-do--button:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
/* THE SOUND CONTROL SITS ON THE CAPTION'S TOP LINE (Filippos, 2026-09-14). Right side,
   directly under the frame, its top on the credit line — the client and agency names — which
   is the first thing the caption says; on own work with no credit it rides the name instead.
   The glyph is drawn in currentColor at 1.575em of the mono line it inherits, never a fixed
   pixel size, so it follows the type scale. No top nudge: the speaker's ink starts a fifth of
   the way down its box, which is about where a mono cap starts, so the two tops meet on their
   own. Its right edge is flush with the frame above (Filippos, 2026-09-14, replacing the 25px
   inset he asked for earlier the same day): the frame, the figure and the caption all share one
   right edge, so the glyph lines up with the picture rather than floating inside it. */
.tile-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.tile-do--icon{display:inline-flex;align-items:center;line-height:1}
.tile-do--icon svg{width:1.575em;height:1.575em;display:block}

/* Read more. A native <details>, so keyboard and screen readers work without script.
   Opens in place, inside the tile's own column — no motion, per the site's rules. */
/* READ MORE BELONGS TO ITS TILE (Simon and Filippos, 2026-10-06). The hairline used to sit
   above "read more", and a rule divides: it grouped the link with the tile below. It now sits
   in the caption's own rhythm, in the action blue like next and play, and the hairline closes the
   module under it, open or shut. Open, "read more" steps aside and "close" waits at the end
   of the text, where the reader finishes (Simon, 2026-10-06). */
.case{margin-top:6px;padding-bottom:16px;border-bottom:1px solid var(--hairline)}
.case summary{
  list-style:none;cursor:pointer;
  font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);
  text-transform:lowercase;color:var(--blue);transition:color .15s;
}
.case summary::-webkit-details-marker{display:none}
.case summary:hover{color:var(--ink)}
.case[open] summary{color:var(--blue)}
.case[open] summary{display:none}
/* Deliberately a step below the 15px used for section body copy: the case sits inside
   a tile, under a caption, and should not compete with the work above it. */
.case-body{padding:14px 0 4px;font-size:var(--fs-micro);line-height:1.75;max-width:34em}
.case-download,.case-links{margin-top:12px}
.case-close{
  display:block;margin-top:16px;appearance:none;border:0;background:none;padding:0;cursor:pointer;
  font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);
  text-transform:lowercase;color:var(--blue);transition:color .15s;
}
.case-close:hover{color:var(--ink)}
.case-close:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.tile{scroll-margin-top:96px}  /* brought back into view below the sticky bar */
.case-download a,.case-links a{color:var(--blue);border-bottom:1px solid currentColor}
.case-download a:hover,.case-links a:hover{color:var(--ink)}
.case-draft{
  font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);
  text-transform:uppercase;color:var(--mono-dim);margin-bottom:8px;
}
/* What we contributed, stated as a label rather than buried in the prose, so every
   case answers it the same way and the paragraphs stay narrative. */
.case-scope{
  font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);
  text-transform:lowercase;color:var(--blue);margin-bottom:12px;
}
/* One mono line above the name: CLIENT in the accent, then +AGENCY in ink (Filippos,
   2026-09-11). On SNS the accent is the site blue, not the Guild's orange (Filippos,
   2026-11-12): 6.69 on paper, so it is safe at this size where the Guild's --red was not.
   The two wrap as whole names. */
.tile-credit{
  display:flex;flex-wrap:wrap;column-gap:1.1ch;
  font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);
  text-transform:uppercase;
}
.tile-collab{color:var(--ink);transition:color .15s}
.tile:hover .tile-collab{color:var(--blue)}
/* The client carries the recognition; the project name carries the specifics. */
.tile-client{color:var(--blue)}
.tile-title{font-size:var(--fs-title);font-weight:500;letter-spacing:-.02em;line-height:1.2}
/* The title is the way into the case page (2026-09-21). It used to read as the title and not
   as a link until the pointer reached it, like the site's other quiet links — REVERSED
   2026-11-02, Simon: "I didn't even realise the names on the cases were clickable." A quiet
   link the author of the site cannot find is not quiet, it is hidden. It now carries a
   hairline underline at rest, the same weight this file gives a link in prose, and inks up
   on hover. Underline rather than border-bottom so a title running to two lines is marked on
   both, and the rule hugs the words instead of the caption column. */
a.tile-title{
  display:block;transition:color .15s,text-decoration-color .15s;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;
  text-decoration-color:var(--hairline);
}
a.tile-title:hover,a.tile-title:focus-visible{color:var(--blue);text-decoration-color:currentColor}
/* The surfaced action is a link, not a button, so it keeps the row's mono look without
   inheriting the button reset. */
.tile-do--go{text-decoration:none}
.tile-do--go:hover,.tile-do--go:focus-visible{color:var(--ink);text-decoration:underline;text-underline-offset:.25em}
.tile-meta{
  font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);
  color:var(--mono-dim);text-transform:lowercase;font-variant-numeric:tabular-nums;
}

/* A tile whose picture is a link (here, a lone still: its frame leads where its name does): the frame keeps its own box. */
.tile-frame-link{display:block}
/* THE SPECIMEN STYLE. Mono capitals, wide tracking, set in short lines beside or under
   the thing they describe — the treatment the talk page uses for each slide's words
   (Filippos, 2026-09-23: "incorporate this in similar places"). It suits a caption, a
   scope line, a list; it is not for running prose, which keeps the grotesk. */
.spec{
  font-family:var(--font-mono);font-size:max(0.6875rem,var(--fs-nano));line-height:1.5;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink);overflow-wrap:anywhere;
}

/* --- record -------------------------------------------------------------- */
/* Modelled on antidot.gr section 04 (Filippos, 2026-09-21): a dated timeline, the place
   large and the role small, detail folded under a red toggle; then three short lists.
   Each row is a native <details>, so it opens by keyboard with no script, the same
   device as the Lab's cases. Rows with nothing to unfold are plain and carry no toggle. */
.rec-rows{margin-top:calc(-1 * clamp(32px,4vw,56px))}  /* the section head draws the first rule; rows start right under it */
.rec-row{border-bottom:1px solid var(--hairline)}
.rec-row > summary,.rec-row:not(details){
  display:grid;grid-template-columns:11rem 1fr 1.5rem;gap:0 clamp(16px,2vw,32px);
  align-items:start;padding-block:clamp(22px,2.6vw,34px);
}
.rec-row > summary{cursor:pointer;list-style:none}
.rec-row > summary::-webkit-details-marker{display:none}
.rec-row > summary:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.rec-years{
  font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);
  text-transform:uppercase;color:var(--mono-dim);line-height:1.6;padding-top:.5em;
}
.rec-main{display:flex;flex-direction:column;gap:8px;min-width:0}
.rec-where{font-size:var(--fs-title);font-weight:400;letter-spacing:-.02em;line-height:1.15;display:block}
.rec-role{font-size:var(--fs-small);line-height:1.5;color:var(--mono-dim);display:block}
.rec-toggle{justify-self:end;width:12px;height:12px;margin-top:.9em;position:relative}
.rec-toggle::before,.rec-toggle::after{
  content:"";position:absolute;left:0;top:5px;width:12px;height:2px;background:var(--red);
  transition:transform .2s;
}
.rec-toggle::after{transform:rotate(90deg)}
.rec-row[open] .rec-toggle::before{transform:rotate(45deg)}
.rec-row[open] .rec-toggle::after{transform:rotate(135deg)}
.rec-row > summary:hover .rec-where{color:var(--blue)}
.rec-points{
  list-style:none;display:flex;flex-direction:column;gap:10px;
  margin:0 0 clamp(24px,2.8vw,36px) calc(11rem + clamp(16px,2vw,32px));
  max-width:44em;
}
.rec-points li{position:relative;padding-left:20px;font-size:var(--fs-small);line-height:1.6;color:var(--mono-dim)}
.rec-points li::before{content:"→";position:absolute;left:0;color:var(--red);font-size:var(--fs-nano);line-height:2}
.rec-points a{text-decoration:underline;text-underline-offset:.16em}
.rec-points a:hover{color:var(--blue)}

.rec-lists{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(32px,4vw,56px);
  margin-top:clamp(56px,7vw,96px);
}
.rec-label{
  font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);
  text-transform:uppercase;font-weight:500;color:var(--red-text);
  padding-bottom:12px;border-bottom:1px solid var(--hairline);margin-bottom:18px;
}
.rec-list ul{list-style:none;display:flex;flex-direction:column;gap:12px}
/* The name lists take the specimen style — they are lists of names, the same job the
   words beside a slide do. The timeline's roles and detail stay in the grotesk: capitals
   over ten lines stop being a label and become a wall. */
.rec-list li,.rec-list p{
  font-family:var(--font-mono);font-size:max(0.6875rem,var(--fs-nano));line-height:1.7;
  letter-spacing:.06em;text-transform:uppercase;color:var(--mono-dim);
}
.rec-list strong{color:var(--ink);font-weight:500}
/* Clients leads the lists now (Filippos, 2026-09-23), so its top margin matches the
   three columns' and its own bottom margin opens the gap to them. */
.rec-list--wide{margin-top:clamp(56px,7vw,96px)}
.rec-list--wide + .rec-lists{margin-top:clamp(40px,5vw,64px)}
.rec-list--wide p{max-width:60em}

/* The hero line's name is the way to About. Underlined because it sits inside a
   sentence, where colour alone would not say "link". */
/* The name in the hero sentence: blue, a link, and no underline (Filippos, 2026-09-23).
   Colour carries it — the name is the only blue in the paragraph, at lead size, where the
   blue reads 6.69 on paper without a rule under it. */
.lead-link{color:var(--blue);transition:opacity .15s}
.lead-link:hover,.lead-link:focus-visible{opacity:.72}

/* The paragraph under that sentence. A step down from the lead, on its own measure, so the
   opening line stays the claim and this reads as the aside it is. */
.hero-note{font-size:var(--fs-body);line-height:1.5;max-width:44em;text-wrap:pretty}

/* The Lab's one paragraph of framing, above the grid. */
.lab-note{margin-bottom:clamp(32px,4vw,56px)}

/* --- statement band ------------------------------------------------------- */
/* Twice the hero paragraph's size — it was matched to it earlier and deliberately
   unmatched again. At this size it reads as a statement, so the leading tightens and
   the measure comes in to stop it running the full column width. */
.statement{
  font-size:clamp(2.9688rem,4.4vw,3.75rem);font-weight:400;line-height:1.15;
  letter-spacing:-.022em;max-width:16em;text-wrap:balance;
}
.statement .scope{color:var(--blue)}


/* --- studios doorways ----------------------------------------------------- */
.doors{border-top:1px solid var(--hairline)}
.door{
  display:block;padding-block:clamp(28px,4vw,52px);
  border-bottom:1px solid var(--hairline);transition:background-color .15s,color .15s;
}
.door-in{
  max-width:var(--max-w);margin:0 auto;padding:0 var(--pad-x);
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px;
}
.door-name{font-size:var(--fs-large);font-weight:500;letter-spacing:var(--track-display);line-height:1;display:block}
.door-desc{
  display:block;margin-top:14px;font-family:var(--font-mono);font-size:var(--fs-mono);
  letter-spacing:var(--track-mono);color:var(--mono-dim);text-transform:lowercase;
}
.door-arrow{font-size:var(--fs-head);line-height:1;transition:transform .2s}
.door:hover,.door:focus-visible{background:var(--blue);color:var(--paper);outline-offset:0}
.door:hover .door-desc,.door:focus-visible .door-desc{color:rgba(242,240,234,.72)}
.door:hover .door-arrow{transform:translateX(8px)}

/* --- contact strip -------------------------------------------------------- */
.mail{
  display:inline-flex;align-items:center;gap:.4em;flex-wrap:wrap;
  font-size:clamp(1.375rem,5.6vw,4.5rem);font-weight:500;letter-spacing:var(--track-display);line-height:1.05;
  transition:color .15s;word-break:break-word;
}
.mail:hover{color:var(--blue)}
/* Arrow chip — the one red graphic accent on the contact page. */
.chip{
  display:inline-grid;place-items:center;width:1.7em;height:1.7em;line-height:1;
  background:var(--red);color:var(--paper);font-size:.50em;border-radius:50%;
  flex:none;transform:translateY(-.5em);
}
/* --- footer --------------------------------------------------------------- */
.footer{border-top:1px solid var(--hairline);padding:clamp(48px,6vw,88px) 0 32px}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.foot-col{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.foot-h{
  font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);
  text-transform:uppercase;color:var(--mono-dim);margin-bottom:6px;
}
.foot-col a{font-size:var(--fs-small);letter-spacing:-.01em}
/* The address sits in the same column as the links and reads as their equal, but it is
   not one: same size, same colour, no hover. */
.foot-address{font-size:var(--fs-small);line-height:1.6;color:var(--ink)}
.foot-col a:hover{color:var(--blue)}
/* Footer band. The frame stays 16:9-wide but is capped in height, so it is wider than
   the film; `contain` fits the whole frame inside it and centres it against black
   rather than cropping the top and bottom away. */
.foot-video{
  display:block;width:100%;aspect-ratio:16/9;max-height:min(44vh,360px);
  object-fit:contain;background:var(--frame);margin-top:clamp(40px,5vw,72px);
}
.foot-lock{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:clamp(48px,6vw,88px);padding-top:22px;border-top:1px solid var(--hairline);
  font-family:var(--font-mono);font-size:.75rem;letter-spacing:var(--track-mono);
  text-transform:uppercase;color:var(--mono-dim);
}
/* Footer detail — the amber graphic moment. Never a text colour. */
.amber-mark{width:10px;height:10px;background:var(--amber);flex:none}

/* --- responsive: breaks at 900 / 600 -------------------------------------- */
@media (max-width:900px){
  :root{--gap-grid:clamp(24px,4vw,40px)}
  .foot-cols{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .grid{columns:1}
  /* Four nav items no longer fit beside the wordmark at 375; the links tighten
     rather than the wordmark breaking across two lines. */
  .nav-links a{font-size:max(0.625rem,var(--fs-nano));letter-spacing:.09em}
  .foot-cols{grid-template-columns:1fr;gap:36px}
  .rec-lists{grid-template-columns:1fr}
  .rec-row > summary,.rec-row:not(details){grid-template-columns:1fr 20px;gap:6px 12px}
  .rec-years{grid-column:1 / -1;padding-top:0}
  .rec-points{margin-left:0}
  .nav-links{gap:13px}
  .nav-name{font-size:max(0.75rem,var(--fs-micro))}
  .hero{min-height:calc(100svh - 61px)}
  .door{padding-block:26px}
}

/* --- motion --------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .door:hover .door-arrow{transform:none}
}


/* ==========================================================================
   THE BLUE PAGE — about.html
   One page, two colours. `.page-blue` swaps the ground and the ink at token
   level, so nav, footer and every shared component invert without a forked
   rule. Nothing here restyles a component; it only redefines what the tokens
   mean inside this page.
   ========================================================================== */
.page-blue{
  --paper:#2036E8;                    /* ground and ink trade places */
  --ink:#F2F0EA;
  --blue:#F2F0EA;                     /* accents were blue; on blue they are paper */
  --mono-dim:rgba(242,240,234,.70);
  --hairline:rgba(242,240,234,.30);
  --greige:rgba(242,240,234,.16);
  background:var(--paper);color:var(--ink);
}
/* No red or amber on this page. The footer's amber mark is the only carrier. */
.page-blue .amber-mark{background:var(--ink)}
/* The symbols mark is a fixed-colour SVG in an <img>, so it cannot inherit the
   swapped ink. Inverting #141414 lands on #EBEBEB, a hair off paper and correct here. */
.page-blue .nav-mark{filter:invert(1)}
.page-blue ::selection{background:var(--ink);color:#2036E8}
/* Nav items spread across the full width, per the brief. */
.page-blue .nav-links{flex:1;justify-content:flex-end;gap:clamp(28px,7vw,120px)}
.page-blue .nav-in{gap:clamp(24px,6vw,96px)}

/* Headline — wordmark and date range only, stacked, top-left. */
.about-head{min-height:55vh;display:flex;align-items:flex-start;padding-block:clamp(40px,7vw,96px) 0}
/* The scope line sets at half the wordmark, as the Abloh cover sets its date range
   below the name. At full display size "Work 1999 — 2026" wraps, and a wrapped date
   range reads as a mistake rather than a stack. */
.about-head .display span:last-child{font-size:.5em;letter-spacing:-.02em}

/* Byline strip — three mono micro-columns. */
.byline{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:24px;
  padding-block:clamp(48px,7vw,88px) clamp(28px,3.5vw,44px);
}
.byline-col{
  font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);
  line-height:1.7;color:var(--mono-dim);
}
.byline-mid{text-align:center;color:var(--ink)}
.byline-end{text-align:right}

/* Section I — the credit line. One continuous sentence: project phrases at full
   size, attribution connectives at 40% and lifted to sit optically centred. Only
   attribution connectives shrink — "at twelve thousand frames a second" is part of
   the phrase, not a credit, and shrinking it would break the sentence. */
.section-credit{padding-block:clamp(24px,3vw,40px) clamp(56px,8vw,110px)}
.credit{
  font-size:var(--fs-head);line-height:1.18;letter-spacing:-.02em;
  text-align:center;max-width:20em;margin:0 auto;text-wrap:pretty;
}
.credit small{font-size:.4em;letter-spacing:0;vertical-align:.14em}
.credit sup{font-size:.42em;vertical-align:super;line-height:0}
.credit-coda{
  font-size:var(--fs-lead);line-height:1.35;text-align:center;max-width:26em;
  margin:clamp(32px,4vw,56px) auto 0;
}
.credit-note{text-align:center;margin-top:clamp(28px,3.5vw,44px)}
.awards-line{
  text-align:center;max-width:52em;margin:clamp(20px,2.4vw,32px) auto 0;
  font-size:var(--fs-nano);line-height:2;
}

/* Section II — dense columns, first-line indents, no paragraph spacing. */
.section-how{padding-block:0 clamp(56px,8vw,110px)}
.about-body{
  column-count:2;column-gap:clamp(28px,4vw,64px);
  font-size:max(0.9375rem,var(--fs-small));line-height:1.5;max-width:none;
}
.about-body p{margin:0;text-indent:1.7em}
.about-body p:first-child{text-indent:0}

/* Directors — right-aligned. */
.directors{padding-block:0 clamp(64px,9vw,120px);text-align:right}
.directors p{font-size:var(--fs-micro);line-height:1.6;letter-spacing:-.01em}

@media (max-width:900px){
  .about-body{column-count:1}
  .about-body p+p{text-indent:1.7em}
}
@media (max-width:600px){
  .byline{grid-template-columns:1fr;gap:14px}
  .byline-mid,.byline-end{text-align:left}
  .directors{text-align:left}
  .about-head{min-height:44vh}
  /* The spread nav squeezes the wordmark onto two lines at this width; the blue page
     falls back to the same nav spacing as the other three. */
  .page-blue .nav-in{gap:16px}
  .page-blue .nav-links{flex:0 1 auto;gap:18px}
}

/* ==========================================================================
   A TALK AS A CASE PAGE — on-creativity.html (2026-09-22)
   The whole deck on one page, eight slides to a screen: two columns of pairs,
   each a slide and its own words beside it in plain mono capitals, the way a
   type specimen or an archive card sets text. A click opens the viewer: one
   slide at 640px, stepped through at the reader's pace.
   ========================================================================== */
.deck-back{margin-bottom:clamp(20px,2.4vw,32px)}
/* The talk's own title, big and in the deck's red (Filippos, 2026-09-22). A page token,
   not a site colour: #E1251B is the title slide's red, 4.1 on paper, legal as large text. */
.talk-title{color:#E1251B;font-size:var(--fs-display);line-height:.92;letter-spacing:-.035em}
.deck-back a{color:var(--mono-dim);transition:color .15s}
.deck-back a:hover{color:var(--blue)}
.deck-intro .prose p{font-size:var(--fs-body);line-height:1.55;letter-spacing:-.01em}
.deck-hint{margin-top:clamp(20px,2.4vw,32px);color:var(--mono-dim)}

/* Screens snap gently: a screen settles into place, but scrolling is never held. */
html:has(.deck){scroll-snap-type:y proximity}
.deck-screen{scroll-snap-align:start;scroll-margin-top:65px}
/* Close together, but each slide with its own air (Filippos, 2026-09-22): the grid's
   gaps are back, and one set of eight follows the last at the same row gap, with none of
   the full-screen space that used to sit between sets. */
.deck-screen + .deck-screen{padding-top:clamp(16px,2vw,28px)}
.deck-grid{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px) clamp(24px,3vw,48px)}
.deck-pair{display:grid;grid-template-columns:3fr 2fr;gap:clamp(12px,1.4vw,20px);align-items:start;min-width:0}
.deck-frame{all:unset;cursor:zoom-in;display:block;aspect-ratio:16/9;background:#000;position:relative}
.deck-frame:hover::after,.deck-frame:focus-visible::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 2px var(--blue)}
.deck-frame img,.deck-frame video{width:100%;height:100%;object-fit:cover;display:block}
/* The words: no formatting at all, just the slide's text in mono capitals. */
.deck-words{min-width:0}   /* the specimen style itself lives in .spec */
/* In the grid the words never set the row's height: the slide does. contain:size gives
   the column no height of its own, stretch hands it the slide's, and a long slide (3,
   24) scrolls inside its column instead of breaking the eight-to-a-screen rhythm. */
.deck-pair .deck-words{contain:size;align-self:stretch;overflow:auto;scrollbar-width:thin}
.deck-words .deck-num{color:var(--mono-dim);margin-bottom:.6em}

/* --- the viewer ------------------------------------------------------------ */
.viewer{border:0;padding:0;margin:auto;background:transparent;color:var(--ink);width:min(640px,calc(100vw - 32px));max-width:none;max-height:none;overflow:visible}  /* margin:auto restores the centring the site-wide reset removes */
.viewer::backdrop{background:rgba(242,240,234,.94)}
.viewer-stage{position:relative;aspect-ratio:16/9;background:#000;cursor:pointer}
.viewer-layer{position:absolute;inset:0;opacity:0;transition:opacity .45s ease}
.viewer-layer.is-on{opacity:1}
.viewer-layer img,.viewer-layer video{width:100%;height:100%;object-fit:cover;display:block}
.viewer-bar{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.viewer-ctrl{display:flex;gap:18px;font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);text-transform:uppercase}
.viewer-ctrl button{all:unset;cursor:pointer;color:var(--ink);transition:color .15s}
.viewer-ctrl button:hover,.viewer-ctrl button:focus-visible{color:var(--blue)}
.viewer-words{margin-top:14px;max-height:9em;overflow:auto}

@media (max-width:900px){
  .deck-grid{grid-template-columns:1fr;gap:28px}
  .deck-screen + .deck-screen{padding-top:28px}
  html:has(.deck){scroll-snap-type:none}
}
@media (max-width:600px){ .deck-pair{grid-template-columns:1fr} .deck-pair .deck-words{contain:none;overflow:visible} }
@media (prefers-reduced-motion:reduce){ .viewer-layer{transition:none} }

/* ==========================================================================
   THE FILM PAGE — contact.html (2026-09-23)
   The film is the ground, fixed behind the whole page, and every token is
   swapped rather than any component restyled — the same move .page-blue makes.
   Set in the specimen style throughout: a label on the left, its value on the
   right, at the measure the page's own mono asks for.
   ========================================================================== */
.page-film{
  --paper:#141414;                    /* under the film, and the ground behind it */
  --ink:#F2F0EA;
  --blue:#F2F0EA;
  --mono-dim:rgba(242,240,234,.72);
  --hairline:rgba(242,240,234,.26);
  --greige:rgba(242,240,234,.16);
  background:var(--paper);color:var(--ink);
}
.page-film .nav{background:transparent;backdrop-filter:blur(2px)}
.page-film .nav-mark{filter:invert(1)}
.page-film .footer{background:transparent}
.page-film .amber-mark{background:var(--ink)}
.page-film ::selection{background:var(--ink);color:#141414}
.page-film .todo-inline{background:rgba(242,240,234,.18);color:var(--ink)}

.film-bg{position:fixed;inset:0;z-index:-1;background:#141414}
.film-bg-video{width:100%;height:100%;object-fit:cover;display:block}
/* THE SCRIM IS NOT DECORATION, AND ITS VALUE IS MEASURED. White type over a moving
   image has no fixed contrast: the frame goes light and the words go with it. This
   film peaks at luma 255 (ffmpeg signalstats), and --ink needs its ground at 110/255
   or darker to hold 4.5:1 — which puts the floor at .59. At .62 the worst frame
   composites to 103 and the type reads 4.96:1. Lower it only with a new measurement,
   and re-measure if the film is ever replaced. */
.film-scrim{position:absolute;inset:0;background:rgba(10,10,10,.62)}

/* A step up from the specimen's own size: this page is the page, not a caption. */
.contact-rows{padding-block:clamp(56px,9vw,120px);font-size:calc(var(--fs-mono) * 1.15);line-height:1.7}
.contact-row{
  display:grid;grid-template-columns:minmax(10rem,22rem) 1fr;gap:clamp(16px,3vw,48px);
  padding-block:clamp(20px,2.6vw,34px);
}
.contact-label{color:var(--mono-dim)}
.contact-value p + p{margin-top:.5em}
.contact-value a{text-decoration:none}
/* The dot is the specimen sheet's own marker for a line you can act on. */
.dot-link{display:inline-flex;align-items:baseline;gap:.6em;transition:opacity .15s}
.dot-link::before{content:"";width:.5em;height:.5em;border-radius:50%;background:currentColor;flex:none;transform:translateY(-.05em)}
.dot-link:hover,.dot-link:focus-visible{opacity:.7}
/* THE BRAND BLUE, EXACTLY, ON THIS DARK PAGE. #2036E8 is a dark colour: over the film it
   measures 2.8:1 and fails at any size, and lightening it to pass would stop being the blue.
   So it keeps its own ground instead — paper behind it, where it reads 6.69:1, the same
   ratio it has everywhere else on the site. The chip is the specimen sheet's own device. */
.blue-chip{
  display:inline-block;background:#F2F0EA;color:#2036E8;
  padding:.25em .6em;margin:-.25em 0;
}

/* FOOTER LINKS ON THIS PAGE TURN THE BRAND BLUE, AND BRING THEIR OWN GROUND WITH THEM
   (Filippos, 2026-09-24). #2036E8 as type over the film is 2.8:1 and fails, and a
   lightened blue is not the blue — so the hover lights the line up as a chip instead,
   exactly the device the film credit uses. 6.69:1, the blue's ratio everywhere else.
   The padding is cancelled by an equal negative margin, so nothing shifts on hover. */
.page-film .foot-col a{padding:.12em .4em;margin:-.12em -.4em;transition:none}
.page-film .foot-col a:hover,.page-film .foot-col a:focus-visible{background:#F2F0EA;color:#2036E8}

@media (max-width:600px){ .contact-row{grid-template-columns:1fr;gap:8px} }

/* ==========================================================================
   A CASE'S OWN PAGE — case.html, drawn by case.js (2026-11-12)
   The Guild's case-page rules, as they are on sillywizardsguild.com, with the accent in
   SNS blue where theirs is orange. The page is the tile given room: the credit and category
   lines are .tile-credit and .tile-meta unchanged, the reel is the tile's own frame with its
   own controls, and the title is the tile title's type at --fs-large. Nothing here introduces
   a colour, a face or a size the site did not already have; the one new idea is the position,
   ( 14 / 23 ) with previous and next, which turns the file's order into a walk.
   ========================================================================== */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.cs-top{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding-block:clamp(28px,4vw,48px) 0}
.cs-back{color:var(--ink);transition:color .15s}
.cs-back:hover,.cs-back:focus-visible{color:var(--blue)}
.cs-pos{font-variant-numeric:tabular-nums}
.cs-head{display:flex;flex-direction:column;gap:clamp(12px,1.4vw,20px);padding-block:clamp(40px,6vw,96px) clamp(28px,3.5vw,48px)}
.cs-title{font-size:var(--fs-large);font-weight:500;letter-spacing:-.03em;line-height:1.02;max-width:15em;text-wrap:balance}
.cs-media{padding-bottom:clamp(48px,6vw,104px)}
.cs-reel{margin:0}
.cs-reel figcaption{flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center}
.cs-body{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(32px,6vw,120px);padding-bottom:var(--pad-section)}
.cs-copy{font-size:var(--fs-small);line-height:1.55;max-width:var(--measure)}
.cs-copy p+p{margin-top:1em}
.cs-copy a{border-bottom:1px solid currentColor}
.cs-links{margin-top:1.4em;font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);text-transform:uppercase}
.cs-links a{border:0;color:var(--blue)}
.cs-facts{display:flex;flex-direction:column;gap:20px;font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono)}
.cs-facts dt{text-transform:uppercase;color:var(--mono-dim)}
.cs-facts dd{margin:6px 0 0;color:var(--ink);text-transform:lowercase;line-height:1.6}
.cs-pager{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-grid);border-top:1px solid var(--hairline);padding-block:clamp(32px,4vw,56px) var(--pad-section)}
.cs-pager a{display:flex;flex-direction:column;gap:10px}
.cs-next{text-align:right;align-items:flex-end}
.cs-pager-title{font-size:var(--fs-title);font-weight:500;letter-spacing:-.02em;line-height:1.2;transition:color .15s}
.cs-pager a:hover .cs-pager-title,.cs-pager a:focus-visible .cs-pager-title{color:var(--blue)}
@media (max-width:700px){
  .cs-body{grid-template-columns:1fr}
  .cs-pager{grid-template-columns:1fr}
  .cs-next{text-align:left;align-items:flex-start}
}