/* ═══════════════════════════════════════════════════════════
   ShiftFlow
   ═══════════════════════════════════════════════════════════ */

/* Registering the palette makes it animatable. --tone is the reader's depth
   into the page: 0 at the base shade of the paper, 1 at the far end of it.
   One surface for the whole document, mixed live — nothing below paints its
   own ground, so the change reads as the page itself fading rather than as
   blocks of colour meeting at section edges. */
@property --bg      { syntax:"<color>";  inherits:true;  initial-value:#f4f3f0; }
@property --bg-deep { syntax:"<color>";  inherits:true;  initial-value:#e3e0d8; }
@property --fg      { syntax:"<color>";  inherits:true;  initial-value:#0b0b0a; }
@property --tone    { syntax:"<number>"; inherits:true;  initial-value:0; }

:root{
  --bg:        #f4f3f0;
  --bg-deep:   #e3e0d8;

  /* One ink. Every word, every figure and every line on this page is set in
     it at full strength — nothing is greyed down to suggest that it matters
     less. Where something has to recede it recedes by size and by letter
     spacing, which is a decision, not a dimmer switch. */
  --fg:        #0b0b0a;
  --line:      var(--fg);

  --surface-2: #0b0b0a;
  --on-dark:   #f4f3f0;

  /* ── THE ONE PIGMENT ─────────────────────────────────────
     The only saturated colour on the site, and the only place it is
     written down. The mark, the cursor, the section numbers, the accent
     words, every hover state, the scrollbar, the page transition and the
     drawn field behind the whole page all read this one declaration —
     the script included, which reads it back off the computed style
     rather than keeping a copy. Change it here and it changes everywhere.
     ──────────────────────────────────────────────────────── */
  --accent:    #70e000;

  /* The animated field of lines drawn behind the whole page. It is set to
     the pigment, so the two are one thing by default and changing --accent
     moves the lines with everything else — but it has a declaration of its
     own, so the lines can be given a colour apart from the accent by
     overriding this line alone. The two alphas are how strongly it is drawn:
     the first on paper, the second where it is carried on ink. */
  --field:            var(--accent);
  --field-alpha:      .30;
  --field-alpha-deep: .58;

  --tone:      0;
  --sheet: color-mix(in oklab, var(--bg), var(--bg-deep) calc(var(--tone) * 100%));

  --gut:  clamp(20px, 3.6vw, 68px);
  --gap:  clamp(16px, 1.8vw, 32px);
  --btn:  clamp(42px, 3.4vw, 54px);

  /* One weight for every line on the site. Wider than the hairline it used
     to be: these lines are drawn on to the page under their own power, and
     at a single pixel that movement reads as a rendering artefact rather
     than as a line arriving. */
  --rule: 2px;

  /* The page is set in one face. The other is kept back for the handful of
     places worth a different voice — the menu's links, and the few words in
     a sentence that carry it — so that when it does appear it means
     something. Everything else works in weight and size instead. */
  --font-display: 'Coggers Tariqa', 'Times New Roman', serif;
  --font-body: 'Corbert', 'Helvetica Neue', Arial, sans-serif;

  /* the weights the page is built out of */
  --w-head: 700;
  --w-mid: 600;
  --w-body: 400;
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-io: cubic-bezier(.76,0,.24,1);
  --hop: cubic-bezier(.8,0,.2,1);

  --mq-gap: clamp(28px,4vw,72px);

  /* the corners sit over both the paper and the dark cover, so their ink is
     a variable rather than a colour */
  --nav-ink: var(--fg);
}
html.on-dark{ --nav-ink: var(--on-dark); }

/* Some stretches of this page are not paper. Rather than paint a slab over
   the ground, the palette itself is turned over — the page and its ink swap
   ends and everything drawn from them follows in one movement, because they
   are registered properties and a registered property can be crossfaded.
   --tone is deliberately left out of the transition: the scroll writes that
   one directly and easing it would smear it. */
:root{
  transition: --bg .85s var(--ease-io),
              --bg-deep .85s var(--ease-io),
              --fg .85s var(--ease-io);
}
html.dark-band{
  --bg:      #0b0b0a;
  --bg-deep: #17150f;
  --fg:      #f4f3f0;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

html{
  background-color:var(--sheet);
  color:var(--fg);
  -webkit-text-size-adjust:100%;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar{ width:0; height:0; display:none; }

html:not(.js){ scroll-behavior:smooth; }
html.is-loading,
html.is-loading body,
html.menu-open{ overflow:hidden; }
html.no-js.is-loading,
html.no-js.is-loading body{ overflow:visible; }

body{
  background-color:transparent;
  color:var(--fg);
  font-family:var(--font-body);
  font-size:clamp(15px,1.02vw,17.5px);
  line-height:1.5;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p{ margin:0; }
img{ max-width:100%; }
button{ font:inherit; color:inherit; }

::selection{ background:var(--accent); color:var(--bg); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }

.svg-defs{ position:absolute; width:0; height:0; overflow:hidden; }

.visually-hidden{
  position:absolute !important; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

.skip{
  position:fixed; left:var(--gut); top:0; z-index:70;
  transform:translateY(-120%);
  background:var(--surface-2); color:var(--on-dark);
  padding:12px 18px; font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  transition:transform .3s var(--ease);
}
.skip:focus-visible{ transform:translateY(0); }

.line{ display:block; overflow:hidden; }
.line__in{ display:block; will-change:transform; }
.sline{ display:block; overflow:hidden; }
.sline-in{ display:block; will-change:transform; }

/* ═══════════════════════════════════════════════════════════
   RULES
   Every line on the page opens from its own middle out to both edges, once,
   as the block it belongs to arrives. One ease, one duration, one colour,
   one weight — there is no second kind of line anywhere on this site.
   ═══════════════════════════════════════════════════════════ */

.rule{
  display:block;
  width:100%;
  height:var(--rule);
  background-color:var(--line);
  transform:scaleX(0);
  transform-origin:50% 50%;
  will-change:transform;
}
.rule--abs{ position:absolute; left:0; }
.rule--top{ top:0; }
.rule--bottom{ bottom:0; }

/* nothing to draw them: they are simply there */
html.no-js .rule{ transform:none; }

/* ═══════════════════════════════════════════════════════════
   LABELS
   ═══════════════════════════════════════════════════════════ */

.tag{
  display:flex; align-items:baseline; gap:1.1rem;
  font-size:clamp(11px,.76vw,12.5px);
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--fg);
}
.tag i{ font-style:normal; color:var(--accent); font-variant-numeric:tabular-nums; }

/* ═══════════════════════════════════════════════════════════
   CURSOR
   ═══════════════════════════════════════════════════════════ */

.cursor{
  position:fixed; top:0; left:0;
  z-index:200;
  width:13px; height:13px;
  margin:-6.5px 0 0 -6.5px;
  border-radius:50%;
  background:var(--accent);
  pointer-events:none;
  opacity:0;
  will-change:transform;
}
html.cursor-live,
html.cursor-live *{ cursor:none; }
/* over a photograph the dot stands down and the hand takes over: the
   picture is the thing being pointed at, so it gets the pointer */
html.cursor-live .plate,
html.cursor-live .plate *,
html.cursor-live .frame,
html.cursor-live .frame *,
html.cursor-live .plain,
html.cursor-live .plain *{ cursor:pointer; }
@media (pointer:coarse){ .cursor{ display:none; } }

/* ═══════════════════════════════════════════════════════════
   MARK
   ═══════════════════════════════════════════════════════════ */

.mark{ aspect-ratio:910 / 1040; display:block; }
.mark svg{ display:block; width:100%; height:100%; }

.mark--hero{
  height:clamp(160px, min(30vh, 21vw), 380px);
  color:var(--fg);
}

.mark--loader{
  position:fixed; left:0; top:0;
  transform-origin:0 0;
  color:var(--on-dark);
  will-change:transform;
}
.mark--loader [data-dot]{ transform-box:fill-box; transform-origin:center; }

.top-mark{
  position:fixed; left:0; top:0;
  z-index:23;
  color:var(--accent);
  opacity:0;
  pointer-events:none;
  transform-origin:center center;
  will-change:transform;
}

/* ═══════════════════════════════════════════════════════════
   PRELOADER
   ═══════════════════════════════════════════════════════════ */

.loader{
  position:fixed; inset:0; z-index:50;
  background:var(--surface-2);
  overflow:hidden;
  will-change:transform;
}
.loader__shift{ position:absolute; inset:0; will-change:transform; }
.loader.is-done{ display:none; }
html.no-js .loader{ display:none; }

/* the mark is the whole of it — no wordmark under it and no percentage
   counting up beside it */
.mark--loader [data-liquid]{ will-change:d; }

/* ═══════════════════════════════════════════════════════════
   TOPOGRAPHY
   The drawn field the whole site stands on. It is fixed behind everything
   and it never leaves: the ground under it changes colour as the page is
   read, and the lines carry on over the change rather than being taken off
   with it. Same weight as every other line here.
   ═══════════════════════════════════════════════════════════ */

.topo{
  position:fixed; inset:0;
  z-index:21;
  width:100%; height:100%;
  display:block;
  pointer-events:none;
}
html.no-js .topo{ display:none; }

/* ═══════════════════════════════════════════════════════════
   STAGES
   ═══════════════════════════════════════════════════════════ */

.stage{ position:relative; }
/* the mark stands on top of the drawn field rather than under it — the
   lines are the ground, and the ground does not cross the logo */
.stage--hero{ height:320vh; z-index:25; }
.stage--orbit{ height:400vh; }

html.no-js .stage--hero{ height:100svh; }
html.no-js .stage--orbit{ display:none; }

.hero{
  position:sticky; top:0;
  height:100svh;
  overflow:hidden;
  background:transparent;
}
.hero__markslot{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  z-index:1;
}

.hero__hint{
  position:absolute;
  left:50%; bottom:clamp(22px,4.4vh,52px);
  transform:translateX(-50%);
  z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  color:var(--fg);
  pointer-events:none;
}
.hero__hint-label{ font-size:11px; letter-spacing:.32em; text-transform:uppercase; }
.hero__hint-rule{
  display:block; position:relative;
  width:var(--rule); height:clamp(34px,5vh,58px);
  background:var(--line);
  overflow:hidden;
}
.hero__hint-rule i{
  position:absolute; left:0; top:0;
  width:100%; height:40%;
  background:var(--accent);
  animation:hintRun 2.1s var(--ease-io) infinite;
}
@keyframes hintRun{
  0%   { transform:translateY(-110%); }
  55%  { transform:translateY(260%); }
  100% { transform:translateY(260%); }
}

.cover{
  position:fixed; inset:0;
  z-index:20;
  width:100%; height:100%;
  display:none;
  pointer-events:none;
}
html.fx .cover{ display:block; }
/* past the intro the cover cannot be on screen, whatever the scrubbed lift
   happens to have caught up to. The lines are not in this: they stay. */
html.intro-clear .cover{ visibility:hidden; }

.orbit-layer{
  position:fixed; inset:0;
  pointer-events:none;
  visibility:hidden;
  contain:layout style;
}
.orbit-layer--back { z-index:22; }
.orbit-layer--front{ z-index:24; }
.orbit-layer.is-live{ visibility:visible; }

.card{
  position:absolute; left:0; top:0;
  will-change:transform;
  transform-origin:center center;
  backface-visibility:hidden;
}
.card img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  user-select:none;
  -webkit-user-drag:none;
}

/* ═══════════════════════════════════════════════════════════
   CORNERS
   ═══════════════════════════════════════════════════════════ */

.nav{
  position:fixed; top:0; left:0; right:0;
  z-index:44;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:var(--gut);
  pointer-events:none;
}
.corner--home{ grid-column:2; justify-self:center; }

.nav__home{
  width:var(--btn); height:var(--btn);
  display:grid; place-items:center;
  pointer-events:auto;
}
.nav__home-mark{
  height:100%;
  color:var(--accent);
  transition:transform .5s var(--ease);
}

/* Until the flying mark has landed the button carries no glyph of its own —
   the fixed top-mark is what you are looking at, at exactly this size and
   place. They hand over whole; nothing is ever clipped. */
html.fx .nav__home-mark{ opacity:0; }
html.fx.landed .nav__home-mark{ opacity:1; }
html.fx.landed .top-mark{ visibility:hidden; }
html.home-hot .nav__home-mark{ transform:scale(1.12); }

/* The mark stays where it is put. It is the way back to the top of a long
   page and the one fixed thing on it; a mark that ducks out of the way the
   moment you read downward is a mark you have to go looking for. */
.corner--home{
  transition:opacity .3s var(--ease), visibility 0s;
}
html.menu-open .corner--home{
  opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease), visibility 0s linear .3s;
}

/* ─── menu button — fixed in its corner, it does not chase the pointer ─── */

.corner--menu{
  position:fixed;
  top:var(--gut); right:var(--gut);
  z-index:45;
  height:var(--btn);
  display:flex; align-items:center;
}

.menu-btn{
  position:relative;
  display:flex; align-items:center; gap:.95rem;
  height:var(--btn);
  padding:0;
  background:none;
  border:0;
  cursor:pointer;
  color:var(--nav-ink);
  -webkit-tap-highlight-color:transparent;
}
.menu-btn__label{
  position:relative;
  display:block; overflow:hidden;
  height:1em;
  font-size:clamp(11px,.76vw,12.5px);
  letter-spacing:.26em; text-transform:uppercase;
  line-height:1;
}
.menu-btn__label i{
  display:block; font-style:normal;
  transition:transform .55s var(--hop);
}
.menu-btn__label i + i{ position:absolute; top:0; left:0; transform:translateY(110%); }
.menu-btn.is-open .menu-btn__label i{ transform:translateY(-110%); }
.menu-btn.is-open .menu-btn__label i + i{ transform:translateY(0); }

/* two rules that meet in the middle and cross — a whole X, not two hinges */
.menu-btn__bars{
  position:relative; display:block;
  width:26px; height:14px;
}
.menu-btn__bars i{
  position:absolute; left:0; top:calc(50% - var(--rule) / 2);
  display:block;
  width:100%; height:var(--rule);
  background:currentColor;
  transform-origin:50% 50%;
  transition:transform .55s var(--hop);
}
.menu-btn__bars i:nth-child(1){ transform:translateY(-4px); }
.menu-btn__bars i:nth-child(2){ transform:translateY(4px); }

@media (hover:hover){
  .menu-btn:not(.is-open):hover .menu-btn__bars i:nth-child(1){ transform:translateY(-6px); }
  .menu-btn:not(.is-open):hover .menu-btn__bars i:nth-child(2){ transform:translateY(6px); }
}

.menu-btn.is-open{ color:var(--on-dark); }
.menu-btn.is-open .menu-btn__bars i:nth-child(1){ transform:translateY(0) rotate(45deg); }
.menu-btn.is-open .menu-btn__bars i:nth-child(2){ transform:translateY(0) rotate(-45deg); }

html.no-js .corner--menu{ display:none; }

/* ═══════════════════════════════════════════════════════════
   BETWEEN PAGES
   One pour does both halves of every move: it falls down the page being
   left until nothing of it is showing, and on the page being arrived at
   the same fall carries on down and off the bottom. What crosses between
   the two is a surface that is still moving.
   ═══════════════════════════════════════════════════════════ */

.swipe{
  position:fixed; inset:0; z-index:60;
  width:100%; height:100%;
  display:block;
  pointer-events:none;
}
.swipe [data-pour]{ fill:var(--accent); }
/* An inner page opens under the ink, so there is never a frame of it
   showing before the move has been made. This flat ground is what holds
   the screen until the script has a shape to put there; it hands over the
   moment the first frame is painted, and both of them cover the whole
   window, so there is nothing between them to see. */
html.page .swipe{ background-color:var(--accent); }
/* nothing came to lift it: better no ink at all than a page behind it */
html.no-js .swipe,
html.swipe-off .swipe{ display:none !important; background:none !important; }

/* ═══════════════════════════════════════════════════════════
   MENU
   ═══════════════════════════════════════════════════════════ */

.menu{
  position:fixed; inset:0; z-index:42;
  background:var(--surface-2);
  color:var(--on-dark);
  display:grid;
  grid-template-rows:1fr auto;
  padding:calc(var(--gut) * 2 + var(--btn)) var(--gut) var(--gut);
  visibility:hidden;
  clip-path:inset(0 0 100% 0);
  will-change:clip-path;
}
.menu.is-open{ visibility:visible; }

/* the drawn field, carried inside the panel because it cannot be seen
   through it. Same frame as the one behind the page, copied straight in. */
.menu__field{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  pointer-events:none;
  opacity:.85;
}

.menu__body{
  position:relative;
  align-self:center;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(28px,5vw,96px);
  width:100%;
}

.menu__nav{ width:100%; min-width:0; }
.menu__list{ display:flex; flex-direction:column; align-items:flex-start; }
.menu__list li{ overflow:hidden; }
.menu__list a{
  display:flex; align-items:baseline; gap:1.2rem;
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:clamp(1.7rem, min(6vw, 10svh), 5rem);
  line-height:1.06; letter-spacing:-.02em;
  color:var(--on-dark);
}
.menu__index{
  font-family:var(--font-body);
  font-size:11px; letter-spacing:.24em;
  color:var(--accent);
  transform:translateY(-.2em);
}
.menu__list a .line{ padding-bottom:.04em; }
@media (hover:hover){
  .menu__list a{ transition:color .45s var(--ease); }
  .menu__list a:hover{ color:var(--accent); }
}
.menu__list a:focus-visible{ outline:2px solid var(--on-dark); outline-offset:6px; }

/* the studio's own work, on the right of the links and seen through the
   same openings every other photograph on this site is seen through */
.menu__plate{
  position:relative;
  margin:0;
  width:clamp(240px,28vw,460px);
  /* pulled in off the right edge so it sits nearer the links than the
     corner, and reads as part of the panel rather than as decoration
     parked in the margin */
  margin-right:clamp(0px,7vw,150px);
  opacity:0;
}
.menu__plate .shot{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:4 / 5;
  overflow:hidden;
  background:transparent;
}
.menu__plate .shot > svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.menu__plate .shot > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (max-width:900px){
  .menu__body{ grid-template-columns:minmax(0,1fr); }
  .menu__plate{ display:none; }
}

.menu__meta{
  position:relative;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1rem 2rem;
  padding-top:1.6rem;
  border-top:var(--rule) solid var(--on-dark);
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--on-dark);
}
.menu__meta a:hover{ color:var(--accent); }
.menu__meta a:focus-visible{ outline:2px solid var(--on-dark); outline-offset:5px; }

/* ═══════════════════════════════════════════════════════════
   THE PAGE
   There is no sheet. The document's own background is the only ground, and
   it moves through the palette by itself as the page is read — nothing here
   paints over it and nothing slides up on top of it.
   ═══════════════════════════════════════════════════════════ */

.content{
  position:relative; z-index:32;
  background-color:transparent;
}

.chap{
  position:relative;
  padding:clamp(96px,15vh,220px) var(--gut);
}
.chap > .rule{ position:absolute; top:0; left:var(--gut); width:calc(100% - var(--gut) * 2); }
.chap > .tag{ margin-bottom:clamp(48px,8vh,110px); }

.head{
  font-family:var(--font-body); font-weight:var(--w-head);
  text-transform:uppercase;
  color:var(--fg);
  font-size:clamp(1.9rem, min(4.8vw,8vh), 4.6rem);
  line-height:.98; letter-spacing:-.025em;
  max-width:15ch;
  margin-bottom:clamp(48px,8vh,110px);
}
.head--big{
  font-size:clamp(2.2rem, min(6.2vw,10vh), 6.2rem);
  max-width:13ch;
}

/* ─── the statement ───────────────────────────────────────
   Set in the reading face and centred on the page. The display face is
   kept back for the few words that carry the sentence, and those are the
   ones in pigment — so the emphasis is doing two things at once rather
   than the whole paragraph shouting.
   ───────────────────────────────────────────────────────── */

.statement{
  font-family:var(--font-body);
  font-weight:var(--w-mid);
  font-size:clamp(1.5rem, min(3.7vw,6.4vh), 3.3rem);
  line-height:1.22; letter-spacing:-.022em;
  color:var(--fg);
  max-width:22ch;
  margin:0 auto;
  text-align:center;
  text-wrap:balance;
}
.statement em{
  font-family:var(--font-display);
  font-style:normal;
  text-transform:uppercase;
  letter-spacing:-.02em;
  font-size:1.18em;
  line-height:1;
  color:var(--accent);
}

/* the say section: the statement in the middle of the page, on the field,
   with one wide plate under it */
.say{
  position:relative;
  padding:clamp(120px,20vh,280px) var(--gut);
}
.say > .rule{ position:absolute; top:0; left:var(--gut); width:calc(100% - var(--gut) * 2); }
.tag--mid{ justify-content:center; margin-bottom:clamp(36px,6vh,80px); }

/* the pictures are read at a normal size rather than as billboards: big
   enough to be looked at, small enough that the page around them is still
   the thing you are reading */
.say__plate{ margin:clamp(64px,10vh,140px) auto 0; max-width:min(100%, 720px); }
/* named through its owner so it outranks the base frame whatever order the
   two rules end up in */
.say__plate .shot--wide{ aspect-ratio:3 / 2; }
.say__cap{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding-top:1.1rem;
  font-size:clamp(11px,.76vw,12.5px);
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--fg);
}

/* three plates, deliberately off one another's baseline */
.trio{ padding:clamp(56px,9vh,120px) var(--gut); }
.trio__grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--gap);
  align-items:start;
}
.plate--a{ grid-column:2 / 5; }
.plate--b{ grid-column:6 / 9; margin-top:clamp(48px,9vh,130px); }
.plate--c{ grid-column:10 / 12; margin-top:clamp(16px,3vh,44px); }
.trio .shot{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:4 / 5;
  overflow:hidden;
  background:transparent;
}
.trio .shot > svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.trio .shot > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.plate--b .shot{ aspect-ratio:3 / 4; }
.plate--c .shot{ aspect-ratio:1 / 1; }

@media (max-width:900px){
  .plate--a{ grid-column:1 / 8; }
  .plate--b{ grid-column:8 / 13; margin-top:clamp(40px,7vh,90px); }
  .plate--c{ grid-column:1 / 9; margin-top:clamp(28px,5vh,64px); }
}
@media (max-width:640px){
  /* One picture to a row, so the twelve-column field is dropped outright.
     Left in place it kept eleven column gaps between tracks nothing sits
     in, and at a gap measured in vh that came to more than the width of
     the screen — which is what was pushing the page sideways. */
  .trio__grid{
    grid-template-columns:minmax(0,1fr);
    column-gap:0;
    row-gap:clamp(34px,6vh,54px);
  }
  .plate--a,.plate--b,.plate--c{ grid-column:1; margin-top:0; }
}

.count{ padding:clamp(40px,7vh,96px) var(--gut) clamp(64px,10vh,140px); }
.tally--mid{ margin-top:0; text-align:center; }
.tally--mid li{ display:flex; flex-direction:column; align-items:center; }

/* the one line we would put on the wall */
.creed{
  position:relative;
  padding:clamp(84px,14vh,200px) var(--gut);
}
.creed > .rule{ position:absolute; top:0; left:var(--gut); width:calc(100% - var(--gut) * 2); }
.creed__line{
  font-family:var(--font-body);
  font-weight:var(--w-mid);
  font-size:clamp(1.25rem, min(2.9vw,5vh), 2.5rem);
  line-height:1.28; letter-spacing:-.018em;
  color:var(--fg);
  max-width:26ch;
  margin:0 auto;
  text-align:center;
  text-wrap:balance;
}
.creed__line em{
  font-family:var(--font-display);
  font-style:normal;
  text-transform:uppercase;
  letter-spacing:-.02em;
  font-size:1.16em;
  color:var(--accent);
}

.note-pair{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--gap) clamp(28px,4.5vw,84px);
  margin-top:clamp(48px,8vh,110px);
  max-width:70ch;
  margin-left:auto;
}
.note{
  color:var(--fg);
  font-size:clamp(14.5px,1.02vw,17px);
  line-height:1.52;
}
.note--wide{ max-width:52ch; margin-top:clamp(28px,4vh,48px); }

.tally{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--gap);
  margin-top:clamp(64px,10vh,140px);
  padding-top:clamp(26px,3.4vh,40px);
}
.tally b{
  display:block;
  font-family:var(--font-body); font-weight:var(--w-head);
  font-size:clamp(2rem,4.4vw,3.8rem);
  line-height:1; color:var(--fg);
  font-variant-numeric:tabular-nums;
}
.tally span{
  display:block; margin-top:.8em;
  font-size:clamp(11px,.76vw,12.5px);
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--fg);
}

/* ═══════════════════════════════════════════════════════════
   PLAIN PICTURES — no mask on any of these, just the picture
   ═══════════════════════════════════════════════════════════ */

.plain{ margin:0; }
.plain__box{
  position:relative;
  width:100%;
  aspect-ratio:3 / 2;
  overflow:hidden;
}
.plain__box img{
  position:absolute; top:-8%; left:0;
  width:100%; height:116%;
  object-fit:cover;
  will-change:transform;
  user-select:none;
  -webkit-user-drag:none;
}
.plain__cap{
  display:flex; justify-content:space-between; gap:1rem;
  padding-top:.9rem;
  font-size:clamp(11px,.76vw,12.5px);
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--fg);
}
.plain--wide{ margin-top:clamp(64px,10vh,140px); }
.plain--wide .plain__box{ aspect-ratio:21 / 9; }

.plain-pair{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--gap);
  margin-top:clamp(64px,10vh,140px);
}

/* ═══════════════════════════════════════════════════════════
   PLATES — the masked photographs
   ═══════════════════════════════════════════════════════════ */

.plates{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(48px,6vw,96px) var(--gap);
}
.plate{ margin:0; min-width:0; }

/* no bed behind the openings: the mask is the whole picture, and what is
   not opened is the page itself */
.shot{
  position:relative;
  /* it is a span as often as it is a div, and an inline box has no height
     for an aspect-ratio to work against */
  display:block;
  width:100%;
  aspect-ratio:4 / 5;
  overflow:hidden;
  background-color:transparent;
}
.shot > svg{
  position:absolute; inset:0;
  display:block;
  width:100%; height:100%;
}
/* the plain <img> stands in until the script upgrades the frame, and stays
   if it never runs */
.shot > img{
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  object-fit:cover;
  user-select:none;
  -webkit-user-drag:none;
}

.plate__cap{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:baseline;
  gap:.25rem 1rem;
  padding-top:1.1rem;
  margin-top:1.2rem;
}
.plate__no{
  grid-row:1; grid-column:1;
  font-size:11.5px; letter-spacing:.2em;
  color:var(--accent); font-variant-numeric:tabular-nums;
}
.plate__name{
  grid-row:1; grid-column:2;
  font-size:clamp(13px,1.02vw,16px);
  color:var(--fg);
  transition:color .45s var(--ease);
}
.plate__year{
  grid-row:1; grid-column:3;
  font-size:11.5px; letter-spacing:.14em;
  color:var(--fg); font-variant-numeric:tabular-nums;
}
.plate__type{
  grid-row:2; grid-column:2 / 4;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--fg);
}
@media (hover:hover){
  .plate:hover .plate__name{ color:var(--accent); }
}

/* ═══════════════════════════════════════════════════════════
   REEL — the one stretch that is read sideways
   ═══════════════════════════════════════════════════════════ */

/* Straight out of the orbit and read sideways. Nothing here is on a grid:
   each frame gets its own size, its own proportion and its own height up
   the band, written on by the script so the scattering is the same one
   every time the page is read rather than a new accident each visit. */
/* The wrapper is pulled two viewports up into the tail of the orbit stage
   and sits *under* the dark cover, so the reel inside it takes the top of
   the screen while the cover is still over it — nothing of it is ever seen
   arriving. The cover then lifts off a reel already standing there, and the
   next turn of the wheel is sideways rather than down. Its height is set by
   the script, because it has to carry the sideways travel as well. */
.reel-wrap{
  position:relative;
  z-index:19;
  margin-top:-200svh;
  height:200svh;
}
html.no-js .reel-wrap,
html.no-fx .reel-wrap{ margin-top:0; height:auto; z-index:auto; }

.reel{
  position:sticky; top:0;
  height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
}
html.no-js .reel{ position:relative; height:auto; padding:6rem 0; }
.reel__head{
  position:absolute;
  left:0; right:0; top:calc(var(--gut) * 2 + var(--btn));
  z-index:2;
  display:flex; justify-content:space-between; align-items:baseline;
  gap:2rem;
  padding:0 var(--gut);
  pointer-events:none;
}
.reel__note{
  font-size:clamp(11px,.76vw,12.5px);
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--fg);
}
.reel__track{
  display:flex; align-items:center;
  gap:clamp(20px,3vw,70px);
  padding:0 max(var(--gut), 8vw);
  width:max-content;
  height:74svh;
  will-change:transform;
}
.frame{
  flex:0 0 auto;
  margin:0;
  /* both written by the script, per frame */
  width:260px;
  transform:translateY(0);
}
.frame__box{
  position:relative;
  width:100%;
  aspect-ratio:3 / 2;      /* replaced per frame */
  overflow:hidden;
  background:transparent;
}
.frame__box img{
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  object-fit:cover;
  user-select:none;
  -webkit-user-drag:none;
}
.frame__cap{
  display:flex; justify-content:space-between; gap:1rem;
  padding-top:.9rem;
  font-size:clamp(11px,.76vw,12.5px);
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--fg);
}
.frame__note{
  margin-top:.35rem;
  font-size:clamp(11px,.8vw,13px);
  color:var(--fg);
  opacity:.72;
}

/* ═══════════════════════════════════════════════════════════
   PAGE HEAD — the top of every page that is not the home one
   ═══════════════════════════════════════════════════════════ */

.page-head{
  position:relative;
  padding:calc(var(--gut) * 3 + var(--btn)) var(--gut) clamp(56px,9vh,120px);
}
.page-head > .rule{ position:absolute; bottom:0; left:var(--gut); width:calc(100% - var(--gut) * 2); }
.page-head .tag{ margin-bottom:clamp(28px,5vh,64px); }
.page-title{
  font-family:var(--font-body); font-weight:var(--w-head);
  text-transform:uppercase;
  color:var(--fg);
  font-size:clamp(2.2rem, min(7vw,12vh), 7rem);
  line-height:.94; letter-spacing:-.03em;
  max-width:14ch;
}

/* the way on to the next page */
.onward{
  position:relative;
  padding:clamp(56px,9vh,120px) var(--gut);
}
.onward > .rule{ position:absolute; top:0; left:var(--gut); width:calc(100% - var(--gut) * 2); }
.onward__link{
  display:flex; flex-direction:column; align-items:flex-start; gap:.6rem;
  font-family:var(--font-body); font-weight:var(--w-head);
  text-transform:uppercase;
  font-size:clamp(1.9rem, min(6vw,10vh), 5.6rem);
  line-height:.98; letter-spacing:-.03em;
  color:var(--fg);
  transition:color .45s var(--ease);
}
.onward__tag{
  font-family:var(--font-body);
  font-size:clamp(11px,.76vw,12.5px);
  letter-spacing:.26em;
  color:var(--accent);
}
@media (hover:hover){
  .onward__link:hover{ color:var(--accent); }
}

/* ═══════════════════════════════════════════════════════════
   INDEX — the four ways in, on the home page
   ═══════════════════════════════════════════════════════════ */

.index{
  position:relative;
  padding:clamp(56px,9vh,120px) var(--gut) clamp(72px,11vh,150px);
}
.index > .rule{ position:absolute; top:0; left:var(--gut); width:calc(100% - var(--gut) * 2); }

.index__row{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,5fr) minmax(0,4fr);
  align-items:baseline;
  gap:clamp(16px,2.4vw,48px);
  padding:clamp(26px,4.4vh,58px) 0;
  color:var(--fg);
  transition:padding-left .7s var(--hop);
}
.index__row + .index__row::before{
  content:""; position:absolute; left:0; top:0;
  width:100%; height:var(--rule);
  background:var(--line);
  opacity:.16;
}
.index__no{
  font-size:clamp(11px,.76vw,12.5px);
  letter-spacing:.26em;
  color:var(--accent); font-variant-numeric:tabular-nums;
}
.index__name{
  font-family:var(--font-body); font-weight:var(--w-head);
  text-transform:uppercase;
  font-size:clamp(1.7rem, min(5vw,8vh), 4.4rem);
  line-height:.98; letter-spacing:-.03em;
  transition:color .45s var(--ease);
}
.index__blurb{
  font-size:clamp(13px,.95vw,15.5px);
  color:var(--fg);
  max-width:32ch;
}
/* the picture is not on the page until the row is pointed at */
.index__peek{
  position:absolute;
  right:0; top:50%;
  width:clamp(120px,11vw,180px);
  aspect-ratio:4 / 5;
  overflow:hidden;
  background:transparent;
  transform:translate(0,-50%) scale(.9);
  opacity:0;
  pointer-events:none;
  transition:opacity .5s var(--ease), transform .7s var(--hop);
}
.index__peek > svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.index__peek > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (hover:hover){
  .index__row:hover{ padding-left:1.4rem; }
  .index__row:hover .index__name{ color:var(--accent); }
  .index__row:hover .index__peek{ opacity:1; transform:translate(0,-50%) scale(1); }
}
@media (max-width:900px){
  .index__row{ grid-template-columns:auto minmax(0,1fr); row-gap:.5rem; }
  .index__blurb{ grid-column:2; }
  .index__peek{ display:none; }
}

/* ═══════════════════════════════════════════════════════════
   REACH — the contact page's four columns
   ═══════════════════════════════════════════════════════════ */

.reach{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--gap);
  margin-top:clamp(64px,10vh,140px);
  padding-top:clamp(26px,3.4vh,40px);
}
.reach__col{ display:flex; flex-direction:column; align-items:flex-start; gap:.6em; }
.reach__col h4{
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--fg); font-weight:400; margin-bottom:.6em; opacity:.6;
}
.reach__col a,.reach__col span{
  font-size:clamp(13px,1vw,16px); color:var(--fg); overflow-wrap:anywhere;
  transition:color .35s var(--ease);
}
.reach__col a:hover{ color:var(--accent); }
@media (max-width:900px){ .reach{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem var(--gap); } }
@media (max-width:520px){ .reach{ grid-template-columns:minmax(0,1fr); } }

/* a section that opens a page carries no rule of its own above it */
.chap--open{ padding-top:clamp(56px,9vh,120px); }

/* ═══════════════════════════════════════════════════════════
   LEDGER
   ═══════════════════════════════════════════════════════════ */

.ledger{ position:relative; }
.row{
  position:relative;
  display:grid;
  grid-template-columns:minmax(52px,.8fr) minmax(0,4fr) minmax(0,5fr);
  gap:var(--gap);
  align-items:start;
  padding:clamp(30px,4.6vh,60px) 0;
}
.row__no{
  font-size:11.5px; letter-spacing:.2em;
  color:var(--fg); font-variant-numeric:tabular-nums;
  transition:color .45s var(--ease);
}
.row__title{
  font-family:var(--font-body); font-weight:var(--w-head);
  text-transform:uppercase;
  font-size:clamp(1.2rem,2.1vw,2.15rem);
  line-height:1.02; letter-spacing:-.015em;
  color:var(--fg);
  transition:transform .6s var(--ease), color .45s var(--ease);
}
.row__text{ color:var(--fg); max-width:44ch; }
.row__meta{
  grid-column:3;
  margin-top:1.2em;
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--fg);
}
@media (hover:hover){
  .row:hover .row__no{ color:var(--accent); }
  .row:hover .row__title{ transform:translateX(.55rem); color:var(--accent); }
}

/* ═══════════════════════════════════════════════════════════
   FLOW
   ═══════════════════════════════════════════════════════════ */

.flow{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--gap);
  padding-top:clamp(30px,4.4vh,52px);
}
.flow__step{ position:relative; }
.flow__no{
  display:block;
  font-size:11.5px; letter-spacing:.2em;
  color:var(--accent); font-variant-numeric:tabular-nums;
  margin-bottom:1.6em;
}
.flow__title{
  font-family:var(--font-body); font-weight:var(--w-head);
  text-transform:uppercase;
  font-size:clamp(1.15rem,1.9vw,1.9rem);
  line-height:1.02; letter-spacing:-.015em;
  color:var(--fg);
  margin-bottom:.75em;
}
.flow__step p{
  color:var(--fg);
  font-size:clamp(13.5px,.95vw,15.5px);
  max-width:34ch;
}

/* ═══════════════════════════════════════════════════════════
   TABLE
   ═══════════════════════════════════════════════════════════ */

.table{ position:relative; }
.table__head,
.table__row{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,3fr) minmax(0,4fr) auto;
  gap:var(--gap);
  align-items:baseline;
}
.table__head{
  padding-bottom:1.1rem;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--fg);
}
.table__row{
  padding:clamp(24px,3.2vh,40px) 0;
  color:var(--fg);
  transition:padding-left .6s var(--ease);
}
.table__client{
  font-family:var(--font-body); font-weight:var(--w-head);
  text-transform:uppercase;
  font-size:clamp(1.05rem,1.7vw,1.65rem);
  line-height:1; letter-spacing:-.015em;
  transition:color .45s var(--ease);
}
.table__disc,
.table__res{
  font-size:clamp(12px,.92vw,14.5px);
  color:var(--fg);
}
.table__year{
  font-size:11.5px; letter-spacing:.14em;
  color:var(--fg); font-variant-numeric:tabular-nums;
}
@media (hover:hover){
  .table__row:hover{ padding-left:1.1rem; }
  .table__row:hover .table__client{ color:var(--accent); }
}

/* ═══════════════════════════════════════════════════════════
   BAND
   ═══════════════════════════════════════════════════════════ */

.band{
  position:relative;
  padding:clamp(64px,10vh,140px) 0;
  overflow:hidden;
}
.marquee{ overflow:hidden; }
.marquee__track{ display:flex; width:max-content; will-change:transform; }
.marquee__row{
  display:flex; gap:var(--mq-gap);
  padding-right:var(--mq-gap);
  width:max-content;
}
.marquee__row span{
  font-family:var(--font-body); font-weight:var(--w-head);
  text-transform:uppercase;
  font-size:clamp(1.7rem,4.6vw,4.4rem);
  line-height:1;
  color:var(--fg);
  white-space:nowrap;
}
.marquee__row span.is-hollow{
  color:transparent;
  -webkit-text-stroke:var(--rule) var(--fg);
}

/* ═══════════════════════════════════════════════════════════
   CONTACT
   ═══════════════════════════════════════════════════════════ */

.mailto{
  position:relative;
  display:inline-block;
  margin-top:clamp(40px,6.4vh,80px);
  font-family:var(--font-body); font-weight:var(--w-head);
  text-transform:uppercase;
  font-size:clamp(1.35rem, min(5vw,8vh), 4.4rem);
  line-height:1; letter-spacing:-.015em;
  color:var(--fg);
  padding-bottom:.14em;
  max-width:100%;
  overflow-wrap:anywhere;
  transition:color .4s var(--ease);
}
.mailto::before,
.mailto::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:var(--rule); background:currentColor;
}
.mailto::after{
  background:var(--accent);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .8s var(--hop);
}
.mailto:hover{ color:var(--accent); }
.mailto:hover::after{ transform:scaleX(1); }

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */

.foot{
  position:relative;
  padding:clamp(72px,11vh,150px) var(--gut) clamp(24px,3.2vh,38px);
}
.foot > .rule{ position:absolute; top:0; left:var(--gut); width:calc(100% - var(--gut) * 2); }

.foot__top{
  display:grid;
  grid-template-columns:minmax(0,5fr) repeat(3,minmax(0,2.33fr));
  gap:var(--gap);
  padding-bottom:clamp(56px,8vh,100px);
}

.foot__say{
  font-family:var(--font-body); font-weight:var(--w-head);
  text-transform:uppercase;
  font-size:clamp(1.35rem,2.5vw,2.5rem);
  line-height:1.06; letter-spacing:-.025em;
  color:var(--fg);
  max-width:20ch;
}
.foot__col{ display:flex; flex-direction:column; align-items:flex-start; gap:.6em; }
.foot__col h4{
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--fg); font-weight:400; margin-bottom:.8em;
}
.foot__col a,.foot__col span{
  font-size:14px; color:var(--fg); overflow-wrap:anywhere;
  transition:color .35s var(--ease);
}
.foot__col a:hover{ color:var(--accent); }

/* the page closes on the mark rather than on the name set large: the mark
   is the thing you have been following down the whole of it */
.foot__wordmark{
  position:relative;
  width:100%;
  padding-top:clamp(48px,8vh,110px);
  display:flex; justify-content:center;
}
.foot__mark{
  height:clamp(96px,15vw,230px);
  color:var(--fg);
}

.foot__base{
  position:relative;
  margin-top:clamp(28px,4vh,48px);
  padding-top:22px;
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--fg);
}

/* ═══════════════════════════════════════════════════════════
   CUSTOM SCROLLBAR
   ═══════════════════════════════════════════════════════════ */

.scrollbar{
  position:fixed;
  top:var(--gut); right:9px; bottom:var(--gut);
  width:12px;
  opacity:0;
  pointer-events:none;
  transition:opacity .6s var(--ease);
  z-index:41;
}
.scrollbar::before{
  content:"";
  position:absolute; top:0; left:50%;
  width:var(--rule); height:100%;
  transform:translateX(-50%);
  background:var(--nav-ink);
  opacity:.2;
}
.scrollbar__thumb{
  position:absolute; top:0; left:50%;
  width:var(--rule); height:44px;
  background:var(--accent);
  transform:translate3d(-50%,0,0);
  transition:width .35s var(--ease);
  will-change:transform;
}
.scrollbar:hover .scrollbar__thumb,
.scrollbar.is-dragging .scrollbar__thumb{ width:5px; }

html.scroll-ready .scrollbar{ opacity:1; pointer-events:auto; }
html.is-loading .scrollbar,
html.menu-open .scrollbar{ opacity:0; pointer-events:none; transition-duration:.25s; }

@media (pointer:coarse){ .scrollbar{ display:none; } }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

@media (max-width:1180px){
  .row{ grid-template-columns:minmax(44px,.8fr) minmax(0,5fr); }
  .row__meta{ grid-column:2; }
  .row__text{ grid-column:2; margin-top:1em; }
  .flow{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:clamp(38px,5.4vh,64px); }
  .plates{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .note-pair{ margin-left:0; }
}

@media (max-width:900px){
  .stage--hero{ height:280vh; }
  .stage--orbit{ height:320vh; }

  .tally{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(26px,4vh,44px) var(--gap); }
  .note-pair{ grid-template-columns:minmax(0,1fr); }
  .plain--wide .plain__box{ aspect-ratio:16 / 9; }

  .foot__top{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .foot__say{ grid-column:1 / -1; margin-bottom:2.5rem; max-width:26ch; }

  .table__head{ display:none; }
  .table__row{ grid-template-columns:minmax(0,1fr) auto; row-gap:.4rem; }
  .table__client{ grid-column:1; }
  .table__year{ grid-column:2; grid-row:1; }
  .table__disc{ grid-column:1 / -1; }
  .table__res{ grid-column:1 / -1; }
}

@media (max-width:640px){
  :root{ --btn:40px; }

  .plates{ grid-template-columns:minmax(0,1fr); gap:clamp(38px,6vh,60px); }
  .flow{ grid-template-columns:minmax(0,1fr); }
  .row{ grid-template-columns:minmax(0,1fr); gap:.5rem; }
  .row__meta,.row__text{ grid-column:1; }
  .plain-pair{ grid-template-columns:minmax(0,1fr); }
  .foot__top{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem var(--gap); }
  .foot__base{ flex-direction:column; gap:10px; }

  .menu{ padding:calc(var(--gut) * 2 + var(--btn)) var(--gut) var(--gut); }
  .menu__list a{ font-size:clamp(1.8rem, 9.4vw, 3.4rem); gap:.75rem; }
  .menu__index{ font-size:10px; }
  .menu__meta{ grid-template-columns:1fr; gap:.7rem; font-size:11px; }

  .stage--hero{ height:240vh; }
  .stage--orbit{ height:260vh; }

  .reel__head{ flex-direction:column; align-items:flex-start; gap:.7rem; }
  .frame{ width:min(76vw, 54vh); }
  .frame--tall{ width:min(62vw, 42vh); }
}

@media (max-height:560px){
  .menu__list a{ font-size:clamp(1.4rem, 7.6svh, 2.6rem); }
  .menu__meta{ font-size:10.5px; padding-top:1rem; }
}

/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  html.fx .cover{ display:none; }
  html.fx .nav__home-mark{ opacity:1; }
  .top-mark, .orbit-layer, .cursor{ display:none; }
  html.cursor-live, html.cursor-live *{ cursor:auto; }
  .stage--hero{ height:100svh; }
  .stage--orbit{ display:none; }
  .hero__hint{ display:none; }
  .topo{ display:none; }
  .rule{ transform:none; }
  .reel{ height:auto; overflow-x:auto; }
}