/* =============================================================================
   ACME MERIDIAN — "The Meridian" local demo
   The frame is WebGL; everything you can read is HTML sitting on top of it.
   Same monochrome system as the production site: the opacity ladder
   (1 / .92 / .62 / .45 / .28) is lifted straight off the business card.
   ========================================================================== */

@font-face{font-family:'Inter V';src:url('/assets/fonts/inter-var.woff2')format('woff2');
           font-weight:100 900;font-display:swap;font-style:normal}
@font-face{font-family:'Cormorant V';src:url('/assets/fonts/cormorant-var.woff2')format('woff2');
           font-weight:300 700;font-display:swap;font-style:normal}
@font-face{font-family:'Cinzel V';src:url('/assets/fonts/cinzel-var.woff2')format('woff2');
           font-weight:400 900;font-display:swap;font-style:normal}

:root{
  --void:#050506;
  --t1:#ffffff;
  --t2:rgba(255,255,255,.92);
  --t3:rgba(255,255,255,.62);
  --t4:rgba(255,255,255,.50);
  --t5:rgba(255,255,255,.28);
  --line:rgba(255,255,255,.14);
  --line-soft:rgba(255,255,255,.07);

  --wordmark:Optima,'Optima nova','Cinzel V',Georgia,serif;
  --display:'Cormorant V',Cormorant Garamond,Georgia,serif;
  --sans:'Inter V',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Arial,sans-serif;

  --gut:clamp(1.4rem,5vw,5rem);
  --maxw:1320px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;background:var(--void);color:var(--t2);
  font-family:var(--sans);font-weight:300;
  font-size:clamp(14.5px,.5vw + 13px,16.5px);line-height:1.62;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
::selection{background:#fff;color:var(--void)}

/* --------------------------------------------------------------- surfaces */

#gl{display:none}
.gl #gl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}

/* A static dither over the whole frame. The shader grain moves; this one does
   not, and the pair together is what kills banding in the deep falloffs.     */
.gl .grain{display:block}
.grain{
  display:none;position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='140' height='140' filter='url(%23n)' opacity='.55'/></svg>");
  mix-blend-mode:overlay;
}

#scroll{display:none}
.gl #scroll{display:block;height:820vh;pointer-events:none}

#progress{
  position:fixed;top:0;left:0;right:0;height:1px;z-index:40;
  background:linear-gradient(90deg,rgba(255,255,255,.25),#fff);
  transform:scaleX(0);transform-origin:0 50%;
}

/* -------------------------------------------------------------------- nav */

.nav{
  position:fixed;top:0;left:0;right:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:1.7rem;
  padding:clamp(1rem,2.2vw,1.7rem) var(--gut);
}
.mark{display:flex;align-items:center;gap:.7rem;color:var(--t1)}
.mark span{
  font-family:var(--wordmark);font-size:clamp(12px,.5vw + 10px,14.5px);
  letter-spacing:.2em;text-transform:uppercase;
}
.nav-note{
  margin:0;font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--t5);
}
/* On /start/ this is the way back, not a footnote — it has to be readable. */
.nav-back{color:var(--t3);font-size:10px}
.nav-back a{border-bottom:1px solid var(--line-soft);padding-bottom:.2em}
.nav-back:hover{color:var(--t1)}

/* --------------------------------------------------------------- chapters
   Every chapter is pinned to the viewport and cross-faded by scroll progress
   in world.js — the page scrolls the camera, not the type.                  */

/* Authored twice on purpose. Without WebGL — an old device, a blocked
   context, a crash in the module — the page is a plain stacked document that
   reads top to bottom. The pinned, scroll-driven version only switches on once
   the renderer actually exists, so a failure degrades instead of showing a
   black screen with nothing on it. */
.chapter{
  position:relative;z-index:10;
  display:flex;flex-direction:column;gap:.2rem;
  max-width:var(--maxw);margin-inline:auto;
  padding:clamp(3rem,7vh,5rem) var(--gut);
}
/* only the first one is under the fixed bar; the rest are scrolled past it */
.chapter:first-of-type{padding-top:calc(var(--nav-h,5.9rem) + 1.6rem)}
.chapter + .chapter{border-top:1px solid var(--line-soft, rgba(255,255,255,.07))}

.gl .chapter{
  position:fixed;inset:0;z-index:10;
  display:flex;flex-direction:column;gap:0;
  /* Measured, not guessed — see assets/chrome.js. The fallback covers the
     moment before the module runs and the case where it never does. */
  padding:calc(var(--nav-h,5.9rem) + clamp(.6rem,3.5vh,2.4rem))
          var(--gut) clamp(2.2rem,6vh,4rem);
  max-width:var(--maxw);margin-inline:auto;
  opacity:0;pointer-events:none;border-top:0;
  will-change:opacity,transform;
}
.chapter > *{max-width:100%}

.eyebrow{
  font-size:clamp(9px,.28vw + 8px,10.5px);font-weight:400;text-transform:uppercase;
  letter-spacing:.42em;color:var(--t4);margin:0 0 1.5rem;
  display:flex;align-items:center;gap:.9rem;
}
.eyebrow::before{content:"";width:1.6rem;height:1px;background:currentColor;flex:none;opacity:.6}

h1,h2,h3{font-family:var(--display);font-weight:300;letter-spacing:-.02em;
         line-height:1.05;margin:0;color:var(--t1)}
/* min() against vh as well as vw: a wide but short frame — a laptop window
   dragged down, a phone on its side — is exactly where display type set from
   width alone stops fitting. */
h1{font-size:clamp(2.4rem,min(5.8vw,8.2vh),5.1rem)}
h2{font-size:clamp(2rem,min(4.4vw,7vh),3.7rem)}
h3{font-size:clamp(1.3rem,1.6vw,1.85rem);line-height:1.2}
p{margin:0 0 1.05em}

.lede{
  font-size:clamp(1rem,.55vw + .88rem,1.18rem);color:var(--t3);
  max-width:52ch;margin-top:1.5rem;font-weight:300;
}

/* An overflowing flex-end container pushes its content out through the *top* —
   straight under the fixed nav, which is how the hero headline ended up written
   across the wordmark on a short viewport. An auto margin does the same job of
   pinning to the bottom when there is room, but resolves to zero when there is
   not, so copy can never escape above its own padding box. Applied to every
   pinned chapter, not just the one that was caught. */
.gl .chapter--hero,
.gl .chapter--mid,
.gl .chapter--device,
.gl .chapter--proc{justify-content:flex-start}
.gl .chapter--hero > :first-child,
.gl .chapter--mid > :first-child,
.gl .chapter--device > :first-child,
.gl .chapter--proc > :first-child{margin-top:auto}

/* 01 · threshold, 08 · contact ------------------------------------------- */
.gl .cue{display:flex}
.gl .chapter--end{justify-content:flex-start}
.gl .chapter--end > :first-child{margin-top:0}
.chapter--hero h1{max-width:13ch}
.chapter--hero .lede{margin-bottom:2.4rem}
.cue{
  margin:0;font-size:9.5px;letter-spacing:.36em;text-transform:uppercase;
  color:var(--t4);display:none;align-items:center;gap:.75rem;
}
.cue i{
  width:1px;height:2.1rem;background:linear-gradient(180deg,transparent,var(--t1));
  display:block;animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{0%,100%{opacity:.25;transform:scaleY(.55)}50%{opacity:1;transform:scaleY(1)}}

.chapter--end{text-align:center;align-items:center}
.chapter--end .eyebrow::before{display:none}
.mailto{margin:2.2rem 0 0}
.mailto a{
  font-family:var(--display);font-size:clamp(1.5rem,3vw,2.4rem);color:var(--t1);
  border-bottom:1px solid var(--line);padding-bottom:.12em;
  transition:border-color .4s var(--ease);
}
.mailto a:hover{border-color:var(--t1)}
.fine{margin:auto 0 0;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--t5)}

/* 02 · the meridian ------------------------------------------------------- */
.chapter--mid{position:relative}
.gl .chapter--mid{align-items:flex-start}
.line{max-width:16ch}
.chapter--mid .sub{
  margin-top:1.6rem;max-width:48ch;color:var(--t3);
  font-size:clamp(.95rem,.5vw + .85rem,1.08rem);
}
.tools{
  margin:1.6rem 0 0;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--t5);max-width:62ch;line-height:2.1;
}

/* 03–05 · devices, 07 · the card -----------------------------------------
   The object owns the middle of the frame, so the copy lives in the bottom
   band and never crosses it.                                               */
.deck{max-width:40ch;position:relative}
/* a soft scrim under the copy — the object owns the right of the frame, and
   type still needs ground when a lit edge sweeps behind it */
.gl .chapter--device::after,
.gl .chapter--mid::after,
.gl .chapter--proc::after{
  content:"";position:absolute;left:-6vw;right:0;bottom:-6vh;height:78%;z-index:-1;
  background:radial-gradient(120% 100% at 12% 100%,rgba(5,5,6,.92) 0%,
             rgba(5,5,6,.68) 34%,rgba(5,5,6,.24) 58%,transparent 76%);
}
.gl .chapter--proc::after{
  left:-8vw;right:-8vw;height:62%;
  background:linear-gradient(0deg,rgba(5,5,6,.94) 12%,rgba(5,5,6,.72) 46%,transparent 100%);
  pointer-events:none;
}
.deck h3{margin-bottom:.7rem}
.deck p{color:var(--t3);margin:0}

.tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1.6rem;width:max-content;max-width:52ch}
.tab{
  appearance:none;background:rgba(255,255,255,.04);color:var(--t4);
  border:1px solid var(--line);border-radius:999px;
  font:inherit;font-size:11px;font-weight:400;letter-spacing:.1em;
  text-transform:uppercase;padding:.5rem 1rem;cursor:pointer;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:color .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease);
}
.tab:hover{color:var(--t2);border-color:rgba(255,255,255,.3)}
.tab.on{background:#fff;color:var(--void);border-color:#fff}

.panel{display:none}
.panel.on{display:block;animation:panel .5s var(--ease) both}
@keyframes panel{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* 06 · method ------------------------------------------------------------- */
.chapter--proc{position:relative}
.gl .chapter--proc{padding-bottom:clamp(3rem,8vh,5.5rem)}
.proc{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:clamp(1.4rem,2.6vw,2.6rem);
}
.proc li{border-top:1px solid var(--line);padding-top:1rem}
.proc span{
  display:block;font-size:11px;letter-spacing:.3em;color:var(--t2);margin-bottom:.9rem;
}
/* The step names are carved into the scene, on the mark above each column —
   printing them here as well would say the same thing twice. On a phone the
   marks are too small to read, so the names come back. */
.gl .proc h3{display:none}
.proc h3{font-size:clamp(1.15rem,1.3vw,1.45rem);margin-bottom:.5rem}
.proc p{font-size:.86rem;color:var(--t3);margin:0;line-height:1.5}

/* ------------------------------------------------------------------- foot
   Sits after the scroll spacer, so it is reached at the end of the move and
   reads as an ordinary footer. In the fallback it is simply the last block on
   the page. Privacy, Terms and Legal have to be reachable from the home page. */
.foot{
  position:relative;z-index:12;background:var(--void);
  border-top:1px solid var(--line);
  padding:clamp(2.6rem,6vh,4rem) var(--gut);text-align:center;
}
.foot-links{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1.9rem;
  margin-bottom:1.8rem;
}
.foot-links a{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--t4);
  transition:color .35s var(--ease);
}
.foot-links a:hover{color:var(--t1)}
.foot-legal{
  margin:0;font-size:11.5px;line-height:2;color:var(--t5);letter-spacing:.02em;
}
.foot-legal a{color:var(--t4);border-bottom:1px solid var(--line-soft)}
.foot-legal a:hover{color:var(--t1)}

.nav-note a{color:inherit}
.nav-note{transition:color .35s var(--ease)}
.nav-note:hover{color:var(--t2)}

.noscript{
  position:fixed;inset:auto 0 0;z-index:50;margin:0;padding:1rem var(--gut);
  background:#fff;color:var(--void);text-align:center;
}

/* ------------------------------------------------------------------ small */
@media (max-width:820px){
  .chapter{padding-top:clamp(4.5rem,10vh,6rem)}
  .nav-note:not(.nav-back){display:none}
  .lede{margin-top:1.1rem}
  .tools{display:none}
  .deck{max-width:100%;min-width:0}
  /* width:max-content is what keeps the pills on one row on a wide frame; on a
     phone it is exactly what would push the whole column off screen */
  .tabs{width:auto;max-width:100%;margin-bottom:1.1rem}
  .tab{font-size:10px;padding:.42rem .8rem}
  .chapter--device::after{height:56%}
  .proc{grid-template-columns:1fr 1fr;gap:1rem 1.2rem}
  .proc li:nth-child(n+5){display:none}   /* five gates, four fit — the fifth reads in the scene */
  .proc h3{display:block}
  .proc p{font-size:.82rem}
}

@media (prefers-reduced-motion:reduce){
  .cue i{animation:none}
  .panel.on{animation:none}
}

/* =============================================================== the button
   The one call to action on the site. Lifted from the old home page so the
   shape is familiar, retuned to this palette: the fill wipes up from the
   bottom edge rather than fading, which is the only motion on an otherwise
   still frame.                                                              */
.btn{
  --bd:var(--t5);
  position:relative;display:inline-flex;align-items:center;gap:.75rem;
  padding:.95rem 1.6rem;border:1px solid var(--bd);border-radius:100px;
  color:var(--t1);font-family:var(--sans);font-size:.8rem;
  font-weight:400;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  background:transparent;overflow:hidden;isolation:isolate;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:color .45s var(--ease),border-color .45s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:#fff;
  transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease);
}
.btn:hover{color:var(--void);border-color:#fff}
.btn:hover::before{transform:scaleY(1)}
.btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.btn .ar{transition:transform .45s var(--ease);flex:none}
.btn:hover .ar{transform:translate(3px,-3px)}
.btn.solid{background:#fff;color:var(--void);border-color:#fff}
.btn.solid::before{background:transparent}
.btn.solid:hover{opacity:.85;color:var(--void)}

.nav-note{margin-left:auto}
.nav-cta{flex:none}
.hero-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin:0 0 2rem}
.chapter--end .btn{margin-top:2.4rem}

/* ============================================================== the warp
   Leaving the home page for the form. The camera does the work in world.js —
   this only clears the type out of its way and lays down the white the next
   page wakes up on, so the cut across the navigation is invisible.          */
.flash{
  position:fixed;inset:0;z-index:90;background:#fff;pointer-events:none;
  opacity:0;transition:opacity .34s linear;
}
html.warping .flash{opacity:1;transition-delay:.6s}
html.warping main,
html.warping .nav,
html.warping .foot,
html.warping #progress{
  opacity:0;filter:blur(7px);transform:translateY(-14px);pointer-events:none;
  transition:opacity .45s var(--ease),filter .55s var(--ease),transform .8s var(--ease);
}
/* the arriving side of the same cut */
html.arriving .flash{opacity:1;transition:none}
html.arriving.landed .flash{opacity:0;transition:opacity .55s var(--ease)}

/* ================================================================ the form
   /start/ — a real page, not a modal. It has to survive a direct link, a
   refresh and a browser with the module blocked, so the markup stands on its
   own and the chamber behind it is decoration that fades in when it can.    */
.start-wrap{
  position:relative;z-index:10;
  max-width:920px;margin-inline:auto;
  padding:calc(var(--nav-h,5.9rem) + clamp(1.4rem,5vh,3.4rem))
          var(--gut) clamp(3rem,8vh,5rem);
}
.start-head{margin-bottom:clamp(2.4rem,6vh,3.8rem)}
.start-head h1{font-size:clamp(2.1rem,4.6vw,3.9rem);max-width:14ch}
.start-head .lede{max-width:46ch}

/* Each fieldset is a movement, numbered like the method rail. The rule above
   it is the same line that runs through the rest of the site.               */
.fs{border:0;margin:0 0 clamp(2.2rem,5vh,3.4rem);padding:2rem 0 0;
    border-top:1px solid rgba(255,255,255,.16)}
.fs legend{
  padding:0;font-size:10px;letter-spacing:.42em;text-transform:uppercase;
  color:var(--t4);
}
.fs legend b{font-weight:400;color:var(--t2);margin-right:.9rem}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.1rem,2.4vw,1.8rem);
      margin-top:1.9rem}
.grid .wide{grid-column:1 / -1}

.field{display:flex;flex-direction:column;gap:.55rem;min-width:0}
.field > label{
  font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--t4);
}
.field > label .req{color:var(--t2)}
.hint{margin:0;font-size:11.5px;letter-spacing:.01em;color:var(--t5);line-height:1.55}

input[type=text],input[type=email],input[type=url],textarea{
  appearance:none;width:100%;min-width:0;
  background:rgba(255,255,255,.055);color:var(--t1);
  border:1px solid rgba(255,255,255,.19);border-radius:2px;
  font-family:var(--sans);font-size:.98rem;font-weight:300;line-height:1.6;
  padding:.85rem 1rem;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:border-color .35s var(--ease),background .35s var(--ease);
}
textarea{resize:vertical;min-height:9.5rem}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,.32)}
input:hover,textarea:hover{border-color:rgba(255,255,255,.34)}
input:focus,textarea:focus{
  outline:0;border-color:#fff;background:rgba(255,255,255,.07);
}
/* the browser's own invalid styling is red and loud; ours is a hairline */
.field.bad input,.field.bad textarea{border-color:rgba(255,255,255,.55)}
.err{margin:0;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
     color:var(--t2);display:none}
.field.bad .err{display:block}

/* Choices are pills, the same object as the capability tabs on the home page.
   Real inputs underneath — keyboard and screen readers get a normal group.  */
.choices{display:flex;flex-wrap:wrap;gap:.45rem}
.choice{position:relative;display:inline-flex}
.choice input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.choice span{
  display:inline-block;
  background:rgba(255,255,255,.055);color:var(--t3);
  border:1px solid rgba(255,255,255,.19);border-radius:999px;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  padding:.52rem 1rem;
  transition:color .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease);
}
.choice input:hover + span{color:var(--t2);border-color:rgba(255,255,255,.3)}
.choice input:checked + span{background:#fff;color:var(--void);border-color:#fff}
.choice input:focus-visible + span{outline:2px solid #fff;outline-offset:3px}

.start-foot{
  display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:2rem;
}
.start-foot .btn{padding:1.05rem 2rem}
.start-note{margin:0;font-size:11.5px;color:var(--t5);max-width:36ch;line-height:1.7}
.start-note a{color:var(--t4);border-bottom:1px solid var(--line-soft)}

/* honeypot — off screen rather than display:none, which some bots skip */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* the two end states ------------------------------------------------------ */
.status{margin:1.6rem 0 0;font-size:.92rem;color:var(--t3);display:none;max-width:58ch}
.status.on{display:block}
.status.bad{color:var(--t2)}
.status p{margin:0}
.status .btn{display:inline-flex;margin-top:1.3rem}

.sent{display:none;text-align:center;padding:clamp(3rem,12vh,7rem) 0}
.sent h2{margin-bottom:1.4rem}
.sent p{color:var(--t3);max-width:44ch;margin-inline:auto}
.done .sent{display:block;animation:panel .7s var(--ease) both}
.done form{display:none}
.done .start-head{display:none}

/* the arrival stagger — set by start.js once the chamber is up */
.rise{opacity:0;transform:translateY(18px)}
.up .rise{opacity:1;transform:none;
  transition:opacity .8s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s)}

@media (max-width:760px){
  .grid{grid-template-columns:1fr}
  .start-wrap{padding-top:calc(var(--nav-h,5.9rem) + 1.2rem)}
  .start-foot{flex-direction:column;align-items:stretch}
  .start-foot .btn{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none}
  html.warping main,html.warping .nav,html.warping .foot{transition-duration:.15s;filter:none}
  .flash{transition:none}
}

/* Last, deliberately: these override .btn and .start-* above, and at equal
   specificity the cascade goes to whichever comes later in the file. */
@media (max-width:820px){
  .nav-cta{font-size:9.5px;padding:.7rem 1.05rem;gap:.5rem}
  .nav-cta .ar{width:11px;height:11px}
  .hero-actions{margin-bottom:1.5rem}
}
/* Below this the bar cannot hold both. The wordmark gives way rather than the
   button: the AM glyph still says who this is, an arrow on its own says
   nothing — and this is the one thing on the page worth tapping. */
@media (max-width:430px){
  .mark span{display:none}
  .nav-cta{padding:.7rem 1rem}
}

/* ================================================================== /admin/
   A tool, not a page: no chamber behind it, no entrance, nothing to look at
   that is not a brief. It borrows the palette and the type so it feels like
   the same company, and borrows nothing else.                              */
.admin{background:var(--void)}
.adm{max-width:1180px;margin-inline:auto;
     padding:calc(var(--nav-h,5.9rem) + clamp(1rem,4vh,2.6rem)) var(--gut) 5rem}
.adm h1{font-size:clamp(1.9rem,3.4vw,2.9rem)}

.linkish{
  appearance:none;background:none;border:0;padding:0;color:inherit;font:inherit;
  cursor:pointer;border-bottom:1px solid var(--line-soft);
}

.adm-gate{max-width:44ch}
.adm-gate code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;color:var(--t2);
}
.adm-keyform{display:flex;flex-direction:column;gap:1.2rem;align-items:flex-start;margin-top:2.4rem}
.adm-keyform .field{width:min(100%,34ch)}

.adm-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;
  flex-wrap:wrap;margin-bottom:2rem;
}
.adm-filters{margin-bottom:1.8rem}

.adm-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.adm-row{
  display:grid;align-items:center;gap:.3rem 1.4rem;
  grid-template-columns:8.5rem minmax(0,1.6fr) minmax(0,1fr) 7rem 6rem;
  padding:1.05rem .9rem;border-bottom:1px solid var(--line-soft);
  cursor:pointer;transition:background .25s var(--ease);
}
.adm-row:hover,.adm-row:focus-visible{background:rgba(255,255,255,.045);outline:0}
.adm-row.is-new{box-shadow:inset 2px 0 0 #fff}
.adm-row h3{font-size:1.02rem;font-family:var(--sans);font-weight:400;letter-spacing:0;
            overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-row p{margin:0}
.adm-who p{font-size:.82rem;color:var(--t4);margin-top:.18rem;
           overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-when{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--t5)}
.adm-tags,.adm-money{font-size:.8rem;color:var(--t4);
                     overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-state{
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--t4);
  justify-self:start;border:1px solid var(--line);border-radius:999px;padding:.3rem .7rem;
}
.adm-state[data-s=new]{background:#fff;color:var(--void);border-color:#fff}
.adm-state[data-s=archived]{opacity:.45}
.adm-empty{margin-top:2.5rem;color:var(--t5)}

.adm-detail{max-width:74ch}
.adm-backbtn{margin-bottom:2.4rem;padding:.7rem 1.2rem;font-size:11px}
.adm-detail .lede{margin-top:1rem}
.adm-detail .lede a{border-bottom:1px solid var(--line)}
.adm-fields{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1.1rem 2rem;margin:2.4rem 0;padding:1.6rem 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.adm-f dt{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--t5)}
.adm-f dd{margin:.45rem 0 0;color:var(--t2);font-size:.94rem}
.adm-detailtext{
  white-space:pre-wrap;font-size:1.02rem;line-height:1.75;color:var(--t2);
  border-left:1px solid var(--line);padding-left:1.4rem;margin-bottom:2.8rem;
}
.adm-notes{margin-bottom:2.4rem}
.adm-actions{
  display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:1.8rem;
}

@media (max-width:900px){
  /* The table collapses to a card. Budget and the tag list are the two things
     worth losing first — they are both repeated on the brief itself. */
  .adm-row{grid-template-columns:1fr auto;padding:1.1rem .2rem}
  .adm-when{grid-column:1;order:1}
  .adm-state{grid-column:2;grid-row:1;order:2;justify-self:end}
  .adm-who{grid-column:1 / -1;order:3;margin-top:.2rem}
  .adm-tags{grid-column:1 / -1;order:4;white-space:normal}
  .adm-money{display:none}
  .adm-head{align-items:flex-start}
}

/* ----------------------------------------------------------- laptop frames
   1280x720 and 1366x768 are ordinary screens, not edge cases, and the hero has
   one more element in it than it used to — the button. Not enough to warrant
   the squeeze below, but enough that the generous margins no longer fit. */
@media (max-height:820px) and (min-width:560px){
  .eyebrow{margin-bottom:1rem}
  .chapter--hero .lede{margin-top:1.1rem;margin-bottom:1.4rem}
  .hero-actions{margin-bottom:1.2rem}
  .chapter--mid .sub{margin-top:1.1rem}
  .tools{margin-top:1.1rem;line-height:1.9}
  .chapter--end .mailto{margin-top:1.5rem}
  .chapter--end .btn{margin-top:1.6rem}
}

/* ------------------------------------------------------------ short frames
   Landscape phones and half-height desktop windows. The chapters are pinned to
   the viewport, so there is no scrolling out of a squeeze — the type has to
   give. The scroll cue goes first: it is decoration, and on a frame this short
   it is the least of what needs the room. */
@media (max-height:600px) and (min-width:560px){
  .gl .chapter{padding:calc(var(--nav-h,5.9rem) + .5rem) var(--gut) 1.6rem}
  .gl .cue{display:none}
  /* the display sizes above are still tuned for a frame with room; here the
     height is the binding constraint and the type answers to it alone */
  h1{font-size:clamp(1.75rem,min(5.4vw,8.6vh),3.4rem)}
  h2{font-size:clamp(1.55rem,min(4.2vw,7.4vh),2.8rem)}
  .eyebrow{margin-bottom:.7rem;letter-spacing:.34em}
  .chapter--hero h1{max-width:16ch}
  .chapter--hero .lede{
    margin-top:.8rem;margin-bottom:.85rem;
    font-size:.9rem;line-height:1.48;max-width:66ch;
  }
  .hero-actions{margin-bottom:0}
  .hero-actions .btn{padding:.72rem 1.3rem;font-size:11px}
  .chapter--mid .sub{margin-top:.9rem;font-size:.9rem;line-height:1.5}
  .tools{display:none}
  .gl .chapter--proc{padding-bottom:1.6rem}
  .proc{gap:.7rem 1.4rem}
  .proc li{padding-top:.6rem}
  .proc span{margin-bottom:.4rem}
  .proc p{font-size:.78rem;line-height:1.45}
  .chapter--end .mailto{margin-top:.9rem}
  .chapter--end .mailto a{font-size:clamp(1.1rem,min(2.6vw,5vh),1.7rem)}
  .chapter--end .btn{margin-top:1rem}
  .chapter--end .fine{display:none}      /* the footer says this again verbatim */
}