/* ============================================================
   AMOT — ACCESS MOMENT OF TASTE
   Design system: EDITORIAL BRUTALISM (2026)
   Mobile-first. Every breakpoint is min-width.
   ============================================================ */

:root{
  --ink:#08080A;
  --paper:#F4F2ED;
  --rule-dark:rgba(255,255,255,.15);
  --rule-light:rgba(8,8,10,.14);
  --rule:rgba(255,255,255,.15);
  --blush:#E7B9C2;
  --chrome:#C9CDD2;
  --acid:#CCFF00;
  --err:#D4685C;

  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --display:'Anton',Impact,sans-serif;
  --edit:'Instrument Serif',Georgia,serif;
  --body:'Inter Tight','Inter',system-ui,-apple-system,sans-serif;

  --gut:16px;
  --nav:52px;
}
@media (min-width:640px){ :root{ --gut:24px; --nav:56px } }
@media (min-width:1024px){ :root{ --gut:32px } }
@media (min-width:1600px){ :root{ --gut:44px } }

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border-radius:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--ink);color:var(--paper);
  font-family:var(--body);font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:none}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--acid);outline-offset:2px}
::selection{background:var(--acid);color:var(--ink)}

/* ---------- grain ---------- */
#grain{
  position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.34;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
  background-size:200px 200px;mix-blend-mode:overlay;
}
/* ---------- scroll progress ---------- */
#prog{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:8600;
  background:var(--acid);pointer-events:none;will-change:width;
}
/* ---------- cursor (desktop pointer only) ---------- */
#cursor{display:none}
@media (min-width:1024px) and (pointer:fine){
  html.has-cursor,html.has-cursor *{cursor:none !important}
  #cursor{
    display:block;position:fixed;top:0;left:0;width:42px;height:42px;z-index:9500;
    pointer-events:none;mix-blend-mode:exclusion;transform:translate(-50%,-50%);
    transition:width .16s ease,height .16s ease;
  }
  #cursor.grow{width:74px;height:74px}
}

/* ---------- type ---------- */
.mono{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;font-weight:500}
.mono-12{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.edit{font-family:var(--edit);font-style:italic;font-weight:400;letter-spacing:-.01em}
.disp{font-family:var(--display);text-transform:uppercase;letter-spacing:-.022em;line-height:.86;font-weight:400}
.body-sm{font-size:13.5px;line-height:1.6}
.dim{opacity:.56}
.acid{color:var(--acid)}

/* ---------- ground / rules ---------- */
.ground-ink{background:var(--ink);color:var(--paper);--rule:var(--rule-dark)}
.ground-paper{background:var(--paper);color:var(--ink);--rule:var(--rule-light)}
.rule-t{border-top:1px solid var(--rule)}
.rule-b{border-bottom:1px solid var(--rule)}
.pad{padding-left:var(--gut);padding-right:var(--gut)}

/* ---------- nav ---------- */
#nav{
  position:sticky;top:0;z-index:8000;
  display:flex;align-items:center;gap:12px;
  height:var(--nav);padding:0 var(--gut);
  border-bottom:1px solid var(--rule-dark);
  background:rgba(8,8,10,.82);backdrop-filter:blur(8px);
}
#nav .brand{display:flex;align-items:center;gap:9px;flex:0 0 auto;height:100%}
#nav .brand img{height:24px;width:auto;object-fit:contain}
#nav .brand .fallback{font-family:var(--display);font-size:23px;line-height:1}
/* lockup: [AMOT mark] | STUDIO — it has to read in the order the brand is
   said, so the thorn mark does the AMOT and mono sets the word after it.
   Mono is the type already carrying every label on the site, so it stands
   beside the mark without competing with it. */
#nav .brand .lockup{
  font-size:10.5px;letter-spacing:.34em;text-transform:uppercase;font-weight:500;
  opacity:.72;padding-top:1px;white-space:nowrap;
  /* the tracking adds a trailing gap after the final letter; pull it back so
     the lockup is optically centred rather than mathematically centred */
  margin-right:-.34em;
}
#nav .brand .brand-rule{width:1px;height:14px;background:var(--rule-dark);flex:0 0 auto}
#nav .brand:hover .lockup{opacity:1;color:var(--acid)}
#nav .brand:hover .brand-rule{background:var(--acid)}
@media (max-width:520px){
  #nav .brand{gap:7px}
  #nav .brand .lockup{letter-spacing:.24em;font-size:9.5px;margin-right:-.24em}
}
@media (max-width:380px){ #nav .brand .lockup,#nav .brand .brand-rule{display:none} }

/* hero motto */
#hero .motto{
  font-size:clamp(15px,2.5vw,26px);letter-spacing:-.01em;
  margin-bottom:10px;opacity:.82;
}
#hero .motto::before{
  content:'';display:inline-block;width:22px;height:1px;
  background:var(--acid);vertical-align:middle;margin-right:11px;
}
#nav .links{display:flex;gap:14px;margin-left:auto;align-items:center}
#nav .links a{position:relative;padding:6px 0;min-height:32px;display:flex;align-items:center}
#nav .links a::after{
  content:'';position:absolute;left:0;right:0;bottom:2px;height:1px;
  background:var(--acid);transform:scaleX(0);transform-origin:left;transition:none;
}
#nav .links a:hover::after,#nav .links a:focus-visible::after,#nav .links a[aria-current]::after{transform:scaleX(1)}
#nav .links a[aria-current]{color:var(--acid)}
#nav .clocks{display:none}
@media (min-width:1100px){
  #nav .links{gap:22px}
  #nav .clocks{display:flex;gap:16px;margin-left:22px;align-items:center}
  #nav .clocks .sec{color:var(--acid)}
}
/* three territories won't fit beside six nav links until there's room —
   the UK clock is the last in, so it's the first to go */
#nav .clocks .clock-uk{display:none}
@media (min-width:1400px){ #nav .clocks .clock-uk{display:inline} }
@media (max-width:420px){ #nav .links{gap:11px} #nav .links a{font-size:9px} }

/* ============================================================
   HERO — full-bleed landscape trailer
   ============================================================ */
#hero-wrap{position:relative}

/* ---- MOBILE / NARROW: stacked. A 16:9 landscape trailer cropped to a phone
   viewport would slice the AMOT logo in half, so the film gets its own
   hairline frame and the type sits beneath it on ink. ---- */
#hero{
  position:sticky;top:var(--nav);min-height:0;
  overflow:hidden;z-index:0;
  display:flex;flex-direction:column;justify-content:flex-start;gap:14px;
  padding-bottom:22px;background:var(--ink);
}
#hero .hero-media{
  position:relative;width:100%;aspect-ratio:16/9;flex:0 0 auto;
  background:#000;border-bottom:1px solid var(--rule-dark);overflow:hidden;
}
#hero .hero-media img,#hero .hero-media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;
}
#hero .hero-media video{opacity:0;transition:opacity .7s ease}
#hero .hero-media video.ready{opacity:1}
#hero .veil{display:none}
#hero .kicker{
  position:static;order:-1;padding:12px var(--gut) 0;
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
}
#hero .hero-inner{position:relative;z-index:3;width:100%;padding:0 var(--gut)}
#hero h1{font-size:clamp(34px,10.6vw,168px);max-width:16ch}
#hero .sub{max-width:46ch;margin-top:12px}
#hero .hero-foot{display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-top:18px}
#hero .cues{display:flex;align-items:center;gap:10px}

/* ---- WIDE: full-bleed cover with overlay type ---- */
@media (min-width:900px){
  #hero{
    display:flex;flex-direction:row;align-items:flex-end;gap:0;
    padding-bottom:0;min-height:460px;
    height:calc(100vh - var(--nav));          /* fallback */
    height:calc(100svh - var(--nav));
  }
  #hero .hero-media{position:absolute;inset:0;aspect-ratio:auto;border-bottom:0;z-index:0}
  #hero .hero-media img,#hero .hero-media video{object-position:50% 42%}
  #hero .veil{
    display:block;position:absolute;inset:0;z-index:1;pointer-events:none;
    background:
      linear-gradient(180deg,rgba(8,8,10,.70) 0%,rgba(8,8,10,.16) 32%,rgba(8,8,10,.30) 56%,rgba(8,8,10,.93) 100%),
      linear-gradient(90deg,rgba(8,8,10,.60) 0%,rgba(8,8,10,0) 60%);
  }
  #hero .kicker{
    position:absolute;top:18px;left:var(--gut);right:var(--gut);z-index:3;padding:0;order:0;
  }
  #hero .hero-inner{padding:0 var(--gut) 38px}
}
.glyph{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border:1.5px solid currentColor;border-radius:50%;
  font-family:var(--mono);font-size:11px;line-height:1;flex:0 0 auto;
}
/* the ink panel that rises over the pinned hero */
#hero-cover{position:relative;z-index:3;background:var(--ink);
  height:56vh;display:flex;flex-direction:column;justify-content:flex-start}
@media (min-width:1024px){ #hero-cover{height:68vh} }

/* ---------- ticker ---------- */
#ticker{
  position:relative;z-index:5;height:46px;min-height:46px;flex:0 0 auto;overflow:hidden;
  border-bottom:1px solid var(--rule-dark);background:var(--ink);
  display:flex;align-items:center;
}
@media (min-width:640px){ #ticker{height:54px;min-height:54px} }
#ticker .track{display:flex;white-space:nowrap;will-change:transform}
#ticker .track span{padding-right:24px}

/* ---------- section heads ---------- */
.sec-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:14px var(--gut);border-bottom:1px solid var(--rule);flex-wrap:wrap;
}
.sec-head .edit{font-size:clamp(16px,2.4vw,26px)}
.sec-lead{padding:20px var(--gut) 0;max-width:64ch}

/* ============================================================
   PLATES — one component for every image and video
   ============================================================ */
.plate{position:relative;overflow:hidden;background:rgba(255,255,255,.035);
  border:1px solid var(--rule)}
.plate>img,.plate>video{width:100%;height:100%;object-fit:cover}
.plate.bare{border:0}
.plate .miss{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:5px;text-align:center;padding:12px;
  background-image:repeating-linear-gradient(45deg,transparent 0 5px,var(--rule) 5px 6px);
}
.plate .miss b{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;font-weight:500;opacity:.85;word-break:break-all}
.plate .miss i{font-family:var(--mono);font-size:9px;letter-spacing:.18em;font-style:normal;opacity:.5}
/* video affordance */
.plate.vid::after{
  content:'';position:absolute;left:50%;top:50%;width:46px;height:46px;
  transform:translate(-50%,-50%);pointer-events:none;
  border:1.5px solid rgba(244,242,237,.9);border-radius:50%;
  background:rgba(8,8,10,.34) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F4F2ED'%3E%3Cpath d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") no-repeat 54% 50%/13px;
  transition:none;
}
.plate.vid.playing::after{opacity:0}
.plate .dur{
  position:absolute;bottom:6px;right:6px;z-index:2;
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;
  background:rgba(8,8,10,.72);color:var(--paper);padding:3px 5px;
}

/* caption */
.cap{padding:8px 0 0}
.cap .row{display:flex;align-items:baseline;gap:8px}
.cap .t{font-family:var(--edit);font-style:italic;font-size:14.5px;line-height:1.25}
.cap .n{font-size:11.5px;line-height:1.45;opacity:.5;margin-top:3px;max-width:40ch}
@media (min-width:1024px){ .cap .t{font-size:16px} .cap .n{font-size:12px} }

/* ============================================================
   TASTE INDEX — dense editorial mosaic (home)
   Every cell carries something. Rhythm comes from varied spans
   and interleaved type panels, not from empty holes.
   ============================================================ */
#index-sec{position:relative;z-index:3;background:var(--ink)}
.scatter{
  display:grid;grid-template-columns:repeat(2,1fr);
  grid-auto-rows:auto;gap:10px;padding:var(--gut);align-items:start;
}
@media (min-width:640px){.scatter{grid-template-columns:repeat(6,1fr);gap:12px}}
@media (min-width:1280px){.scatter{grid-template-columns:repeat(8,1fr);gap:14px}}
.cell{min-width:0}
.item{min-width:0}

/* span presets — 6-col tablet / 8-col desktop */
@media (min-width:640px){
  .item{grid-column:span 2}
  .item.s3{grid-column:span 3}
  .item.s4{grid-column:span 4}
  .item.s6{grid-column:span 6}
}
@media (min-width:1280px){
  .item{grid-column:span 2}
  .item.s3{grid-column:span 3}
  .item.s4{grid-column:span 4}
  .item.s6{grid-column:span 4}
}

/* type panel that occupies grid space instead of leaving it blank */
.tcell{
  border:1px solid var(--rule);padding:16px;display:flex;flex-direction:column;
  justify-content:space-between;gap:18px;min-height:100%;grid-column:span 2;
}
@media (min-width:640px){.tcell{grid-column:span 2}}
@media (min-width:1280px){.tcell{grid-column:span 2}}
.tcell.wide{grid-column:span 2}
@media (min-width:640px){.tcell.wide{grid-column:span 4}}
.tcell .big{
  font-family:var(--edit);font-style:italic;line-height:1.12;
  font-size:clamp(19px,2.3vw,32px);
}
.tcell .num{font-family:var(--display);font-size:clamp(30px,4.4vw,64px);line-height:.85}
.tcell ul li{display:flex;justify-content:space-between;gap:10px;
  padding:7px 0;border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase}
.tcell ul li:first-child{border-top:1px solid var(--rule)}
.tcell.acid{border-color:var(--acid)}
.tcell.acid .big{color:var(--acid)}
/* Reveal once on entry and STAY visible. An earlier scroll-scrubbed scale
   meant anything in the lower 60% of the viewport was shrunk to nothing —
   most of the page was invisible at any given scroll position.
   The hidden state is gated on .js so a script failure shows everything. */
.scatter.js .item{
  opacity:0;transform:translateY(12px) scale(.97);will-change:opacity,transform;
  transition:opacity .62s cubic-bezier(.25,.1,.25,1) var(--d,0s),
             transform .62s cubic-bezier(.25,.1,.25,1) var(--d,0s);
}
.scatter.js .item.in{opacity:1;transform:none}

/* ============================================================
   FEATURE STRIP — the 6 clips, horizontal snap
   ============================================================ */
.rail{
  display:grid;grid-auto-flow:column;gap:var(--gut);
  grid-auto-columns:78%;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  padding:var(--gut);scrollbar-width:none;
}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start;min-width:0}
@media (min-width:640px){.rail{grid-auto-columns:46%}}
@media (min-width:1024px){.rail{grid-auto-columns:31%}}
@media (min-width:1500px){.rail{grid-auto-columns:24%}}
.rail-nav{display:flex;gap:8px;align-items:center}
.rail-nav button{
  width:40px;height:40px;border:1px solid var(--rule);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:14px;transition:none;cursor:pointer;
}
.rail-nav button:hover{background:var(--paper);color:var(--ink)}
.ground-paper .rail-nav button:hover{background:var(--ink);color:var(--paper)}
.rail-nav button:disabled{opacity:.25;cursor:default}
.rail-nav button:disabled:hover{background:none;color:inherit}

/* ============================================================
   STRAND BANDS — a full-bleed editorial band per strand
   ============================================================ */
.band{border-top:1px solid var(--rule)}
.band-head{display:grid;gap:10px;padding:26px var(--gut) 18px}
@media (min-width:900px){
  .band-head{grid-template-columns:1fr 1fr;align-items:end;gap:20px}
}
.band-head h3{font-family:var(--display);text-transform:uppercase;
  letter-spacing:-.022em;line-height:.9;font-size:clamp(30px,6.4vw,84px)}
.band-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gut);padding:0 var(--gut) var(--gut)}
@media (min-width:700px){.band-grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1200px){.band-grid{grid-template-columns:repeat(4,1fr)}}
.band-grid .tall{grid-row:span 2}
/* A plate with fine internal detail — a contact sheet, a grid of nine faces —
   is unreadable in a quarter-width cell. `wide` gives it room. The span is
   per-breakpoint so the row still divides cleanly and no cell is left empty:
   2 of 2 on mobile, 3 of 3 on tablet, 2 of 4 on desktop. Pair it with a band
   of 6 normal plates and every row fills at every width. */
.band-grid .wide{grid-column:span 2}
@media (min-width:700px) and (max-width:1199px){.band-grid .wide{grid-column:span 3}}
@media (min-width:1200px){.band-grid .wide{grid-column:span 2}}

/* ============================================================
   SHOWREEL / STUDIO / SERVICES / CASES
   ============================================================ */
#reel{display:grid;gap:var(--gut);padding:var(--gut)}
@media (min-width:900px){#reel{grid-template-columns:.32fr .68fr;align-items:start}}
#reel .meta div{padding:10px 0;border-bottom:1px solid var(--rule)}
#reel .meta div:first-child{border-top:1px solid var(--rule)}
#reel .frame{border:1px solid var(--rule)}
#reel .strip{border-top:1px solid var(--rule);padding:8px 10px;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

#studio{display:grid;grid-template-columns:1fr}
@media (min-width:860px){#studio{grid-template-columns:1fr 1fr}}
#studio .col{padding:var(--gut);border-bottom:1px solid var(--rule)}
@media (min-width:860px){#studio .col+.col{border-left:1px solid var(--rule)}}
#studio h3{font-size:clamp(34px,7vw,104px)}
#studio .who{margin:8px 0 12px}
#studio p{max-width:44ch;margin-bottom:18px}
#studio .disc li{padding:9px 0;border-bottom:1px solid var(--rule)}
#studio .disc li:first-child{border-top:1px solid var(--rule)}
#studio .duo{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}

#services h2{font-size:clamp(40px,12vw,168px);padding:var(--gut) var(--gut) 4px}
.srv{border-top:1px solid var(--rule)}
.srv-row{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;
  padding:18px var(--gut);border-bottom:1px solid var(--rule);transition:none;
}
@media (min-width:768px){.srv-row{gap:32px;padding:30px var(--gut)}}
.srv-row .num{font-family:var(--display);font-size:clamp(30px,8vw,112px);line-height:.8;opacity:.9}
.srv-row .nm{font-size:clamp(14px,2.2vw,29px);text-transform:uppercase;font-weight:500;letter-spacing:-.01em}
.srv-row .ds{font-size:clamp(11.5px,1.5vw,15.5px);line-height:1.5;opacity:.6;max-width:62ch;margin-top:5px}
.srv-row .arrow{opacity:0;transform:translateX(-6px);transition:none;font-family:var(--mono)}
.srv-row:hover{background:var(--ink);color:var(--paper)}
.srv-row:hover .arrow{opacity:1;transform:none}
.srv-row:hover .ds{opacity:.72}
@media (hover:none){.srv-row .arrow{opacity:.4;transform:none}.srv-row:hover{background:none;color:inherit}}

.case-wrap{position:relative}
@media (min-width:768px){.case-wrap{height:86vh}}
.case{border:1px solid var(--rule);background:var(--ink);padding:14px;margin-bottom:var(--gut)}
@media (min-width:768px){
  .case{position:sticky;top:calc(var(--nav) + 28px);padding:clamp(16px,2.2vw,36px);
    will-change:transform;margin-bottom:0}
}
.case .head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid var(--rule);margin-bottom:14px}
.case .head .num{font-family:var(--display);font-size:clamp(28px,6vw,76px);line-height:.82}
.case .head .nm{font-family:var(--edit);font-style:italic;font-size:clamp(17px,2.6vw,32px)}
.case .grid{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:700px){.case .grid{grid-template-columns:40% 1fr}}
.case .colA{display:grid;gap:10px;align-content:start}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:1px solid currentColor;padding:13px 18px;min-height:44px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:500;
  transition:none;cursor:pointer;background:transparent;
}
.ground-ink .btn:hover,.btn.on-ink:hover{background:var(--paper);color:var(--ink)}
.ground-paper .btn:hover,.btn.on-paper:hover{background:var(--ink);color:var(--paper)}
.btn:disabled{opacity:.34;cursor:not-allowed}
.btn:disabled:hover{background:transparent;color:inherit}
.btn-lg{padding:18px 26px;font-size:11.5px}

/* ---------- CTA / footer ---------- */
#cta{padding:38px var(--gut);display:flex;flex-direction:column;gap:16px;align-items:flex-start}
@media (min-width:768px){#cta{padding:76px var(--gut)}}
#cta h2{font-size:clamp(34px,9.6vw,146px)}
footer{border-top:1px solid var(--rule-dark);background:var(--ink);color:var(--paper);--rule:var(--rule-dark)}
#bigmark{
  font-family:var(--display);text-transform:uppercase;white-space:nowrap;overflow:hidden;
  letter-spacing:-.03em;line-height:.94;padding:14px var(--gut);font-size:clamp(22px,10.1vw,240px);
}
.foot-row{display:flex;flex-wrap:wrap;gap:12px 22px;justify-content:space-between;
  padding:14px var(--gut);border-top:1px solid var(--rule-dark)}
.foot-row .set{display:flex;gap:18px;flex-wrap:wrap}
.foot-row a{min-height:32px;display:inline-flex;align-items:center}
.foot-row a:hover{color:var(--acid)}

/* ============================================================
   ARCHIVE PAGE — filters, masonry-ish grid, lightbox
   ============================================================ */
#filters{
  position:sticky;top:var(--nav);z-index:7000;
  background:rgba(8,8,10,.9);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule-dark);
}
#filters .row{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#filters .row::-webkit-scrollbar{display:none}
#filters button{
  flex:0 0 auto;padding:13px 14px;min-height:46px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  border-right:1px solid var(--rule-dark);transition:none;cursor:pointer;white-space:nowrap;
}
#filters button sup{font-size:8px;opacity:.5;margin-left:4px;vertical-align:super}
#filters button:hover{background:rgba(255,255,255,.06)}
#filters button[aria-pressed="true"]{background:var(--acid);color:var(--ink)}
#filters button[aria-pressed="true"] sup{opacity:.6}

.arch-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gut);padding:var(--gut);
}
@media (min-width:700px){.arch-grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1100px){.arch-grid{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1600px){.arch-grid{grid-template-columns:repeat(5,1fr)}}
/* sort · density · shortlisted-only */
.a-tools{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--rule)}
.a-tools .seg{display:flex;overflow-x:auto;scrollbar-width:none;flex:1 1 auto}
.a-tools .seg::-webkit-scrollbar{display:none}
.a-tools .seg+.seg{border-left:1px solid var(--rule)}
.a-tools button{
  flex:0 0 auto;padding:11px 13px;min-height:44px;white-space:nowrap;cursor:pointer;transition:none;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:500;
  border-right:1px solid var(--rule);
}
.a-tools button:last-child{border-right:0}
.a-tools button:hover{background:rgba(255,255,255,.06)}
.a-tools button[aria-pressed="true"]{background:var(--paper);color:var(--ink)}
.a-tools #a-star[aria-pressed="true"]{background:var(--acid);color:var(--ink)}

/* compact view */
.arch-grid.dense{gap:6px}
@media (min-width:700px){.arch-grid.dense{grid-template-columns:repeat(5,1fr)}}
@media (min-width:1100px){.arch-grid.dense{grid-template-columns:repeat(7,1fr)}}
@media (min-width:1600px){.arch-grid.dense{grid-template-columns:repeat(9,1fr)}}
.arch-grid.dense .cap{display:none}
.arch-grid.dense .star{width:24px;height:24px;top:4px;right:4px}

.arch-grid .tile{min-width:0;opacity:0;transform:translateY(14px);
  transition:opacity .45s ease,transform .45s ease}
.arch-grid .tile.in{opacity:1;transform:none}
.arch-grid .tile.hide{display:none}
.tile button.open{display:block;width:100%;text-align:left;cursor:pointer}
.tile button.open:hover .plate{border-color:var(--paper)}
.count-line{padding:14px var(--gut);border-bottom:1px solid var(--rule)}
#more-wrap{display:flex;justify-content:center;padding:8px var(--gut) 46px}

/* lightbox */
#lb{
  position:fixed;inset:0;z-index:9200;display:none;
  background:rgba(4,4,6,.97);
}
#lb.open{display:flex;flex-direction:column}
#lb .lb-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px var(--gut);border-bottom:1px solid var(--rule-dark);flex:0 0 auto;
}
#lb .lb-stage{
  flex:1 1 auto;display:flex;align-items:center;justify-content:center;
  padding:12px;min-height:0;position:relative;
}
#lb .lb-stage img,#lb .lb-stage video{
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
}
#lb .lb-foot{
  flex:0 0 auto;padding:12px var(--gut) 18px;border-top:1px solid var(--rule-dark);
  display:flex;justify-content:space-between;gap:16px;align-items:flex-end;flex-wrap:wrap;
}
#lb .lb-foot .txt{max-width:56ch}
#lb .lb-foot .t{font-family:var(--edit);font-style:italic;font-size:clamp(17px,3vw,28px)}
#lb .lb-foot .n{font-size:12.5px;line-height:1.5;opacity:.6;margin-top:4px}
#lb .nav-btns{display:flex;gap:8px}
#lb .nav-btns button,#lb .close{
  width:44px;height:44px;border:1px solid var(--rule-dark);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:14px;cursor:pointer;transition:none;
}
#lb .nav-btns button:hover,#lb .close:hover{background:var(--paper);color:var(--ink)}
/* desktop side arrows */
#lb .edge{display:none}
@media (min-width:900px){
  #lb .edge{
    display:flex;position:absolute;top:0;bottom:0;width:22%;
    align-items:center;background:none;border:0;cursor:pointer;
  }
  #lb .edge.prev{left:0;justify-content:flex-start;padding-left:18px}
  #lb .edge.next{right:0;justify-content:flex-end;padding-right:18px}
  #lb .edge span{
    width:46px;height:46px;border:1px solid var(--rule-dark);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--mono);font-size:15px;background:rgba(8,8,10,.5);
  }
  #lb .edge:hover span{background:var(--paper);color:var(--ink)}
}
html.lb-open,body.lb-open{overflow:hidden}

/* ============================================================
   SUBSCRIBE
   ============================================================ */
#sub-head{padding:32px var(--gut) 24px}
@media (min-width:768px){#sub-head{padding:74px var(--gut) 40px}}
#sub-head h1{font-size:clamp(46px,14vw,220px)}
#sub-head .sub{max-width:54ch;margin-top:14px}
.toggle{display:inline-flex;border:1px solid var(--rule);margin-top:22px;flex-wrap:wrap}
.toggle button{padding:13px 16px;min-height:46px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.15em;text-transform:uppercase;font-weight:500;transition:none;cursor:pointer}
.toggle button+button{border-left:1px solid var(--rule)}
.toggle button[aria-pressed="true"]{background:var(--acid);color:var(--ink)}

.tiers{display:grid;grid-template-columns:1fr;border-top:1px solid var(--rule)}
@media (min-width:900px){.tiers{grid-template-columns:repeat(3,1fr)}}
.tier{padding:var(--gut);border-bottom:1px solid var(--rule);position:relative;display:flex;flex-direction:column}
@media (min-width:900px){.tier+.tier{border-left:1px solid var(--rule)}}
.tier.hi{border:1px solid var(--acid)}
.tier .tag{position:absolute;top:0;left:var(--gut);transform:translateY(-50%);
  background:var(--acid);color:var(--ink);padding:4px 8px;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.tier h3{font-family:var(--display);text-transform:uppercase;letter-spacing:-.022em;
  font-size:clamp(24px,3.4vw,42px);line-height:.94;margin:10px 0 12px}
.tier .price{font-family:var(--mono);font-weight:600;font-size:clamp(24px,3.2vw,40px);line-height:1.1}
.tier .price small{display:block;font-size:9.5px;letter-spacing:.15em;opacity:.55;font-weight:500;margin-top:5px}
.tier .setup{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;opacity:.7;margin-top:7px}
.tier ul{margin:18px 0 22px}
.tier ul li{display:flex;gap:9px;padding:10px 0;border-bottom:1px solid var(--rule);font-size:12.5px;line-height:1.45}
.tier ul li:first-child{border-top:1px solid var(--rule)}
.tier ul li svg{flex:0 0 auto;margin-top:3px;opacity:.6}
.tier .btn{margin-top:auto}

.cmp-scroll{overflow-x:auto;border-top:1px solid var(--rule);-webkit-overflow-scrolling:touch}
table.cmp{width:100%;border-collapse:collapse;min-width:600px}
table.cmp th,table.cmp td{border-bottom:1px solid var(--rule);border-right:1px solid var(--rule);
  padding:11px 12px;text-align:left;
  font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;font-weight:500}
table.cmp th:last-child,table.cmp td:last-child{border-right:0}
table.cmp thead th{position:sticky;top:var(--nav);background:var(--paper);z-index:2;letter-spacing:.15em}
table.cmp td.c{text-align:center}
table.cmp td.y{color:#7a9c00}
table.cmp td.n{opacity:.3}

#checkout{scroll-margin-top:calc(var(--nav) + 8px)}
.co-grid{display:grid;grid-template-columns:1fr;border-top:1px solid var(--rule)}
@media (min-width:960px){.co-grid{grid-template-columns:1.35fr .65fr}}
.co-form,.co-sum{padding:var(--gut);border-bottom:1px solid var(--rule)}
@media (min-width:960px){.co-sum{border-left:1px solid var(--rule)}}
.fields{display:grid;grid-template-columns:1fr;gap:16px;margin-top:20px}
@media (min-width:640px){.fields{grid-template-columns:1fr 1fr}}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;opacity:.7}
.field input,.field select,.field textarea{
  border:1px solid var(--rule);padding:13px 12px;font-size:15px;background:transparent;
  width:100%;min-height:46px;transition:none;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:currentColor;outline:none}
.field textarea{min-height:104px;resize:vertical;font-family:var(--body)}
.field select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 16px) calc(50% - 2px),calc(100% - 11px) calc(50% - 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.field .err{font-family:var(--mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:var(--err);min-height:11px}
.field[data-invalid="true"] input,.field[data-invalid="true"] select,.field[data-invalid="true"] textarea{border-color:var(--err)}
.counter{font-family:var(--mono);font-size:9px;letter-spacing:.13em;opacity:.45;text-align:right}
.sum-rows{margin:18px 0}
.sum-rows div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase}
.sum-rows div:first-child{border-top:1px solid var(--rule)}
.sum-rows div.total{font-size:13px;font-weight:600;letter-spacing:.07em}
.notice{border:1px solid var(--rule);padding:13px;margin-top:16px}
.done{border:1px solid var(--acid);padding:clamp(16px,3vw,32px)}
.done h3{font-family:var(--display);text-transform:uppercase;font-size:clamp(22px,4vw,46px);line-height:.94}
.done dl>div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;word-break:break-all}

.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;padding:16px var(--gut);min-height:52px;
  display:flex;justify-content:space-between;gap:14px;align-items:center;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{font-family:var(--mono);font-size:15px;opacity:.6;flex:0 0 auto}
.faq details[open] summary .pm{opacity:1}
.faq .ans{padding:0 var(--gut) 20px;font-size:13.5px;line-height:1.6;opacity:.72;max-width:72ch}

/* ============================================================
   PROOF STRIP
   ============================================================ */
.proof-grid{
  display:grid;grid-template-columns:1fr;
  border-top:1px solid var(--rule);
}
@media (min-width:600px){.proof-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.proof-grid{grid-template-columns:repeat(3,1fr)}}
.proof-grid li{
  padding:20px var(--gut);border-bottom:1px solid var(--rule);
  display:flex;flex-direction:column;gap:6px;min-width:0;
}
@media (min-width:600px){
  .proof-grid li:nth-child(odd){border-right:1px solid var(--rule)}
}
@media (min-width:1000px){
  .proof-grid li:nth-child(odd){border-right:0}
  .proof-grid li:not(:nth-child(3n)){border-right:1px solid var(--rule)}
}
.proof-grid b{
  font-size:clamp(30px,4.4vw,56px);line-height:.9;color:var(--acid);
  font-weight:400;letter-spacing:-.02em;
}
.proof-grid span{opacity:.85}
.proof-grid p{font-size:12.5px;line-height:1.5;opacity:.5;max-width:38ch;margin-top:2px}

/* ============================================================
   PRODUCTS + CHECKOUT
   ============================================================ */
.trust{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:20px}
.trust span{position:relative;padding-left:13px}
.trust span::before{content:'';position:absolute;left:0;top:.42em;
  width:5px;height:5px;background:var(--acid)}

.prod{display:grid;grid-template-columns:1fr;gap:var(--gut);
  padding:var(--gut);border-top:1px solid var(--rule);
  opacity:0;transform:translateY(14px);
  transition:opacity .55s cubic-bezier(.25,.1,.25,1),transform .55s cubic-bezier(.25,.1,.25,1)}
.prod.in{opacity:1;transform:none}
@media (min-width:900px){
  .prod{grid-template-columns:44% 1fr;gap:clamp(24px,3vw,52px);
    padding-top:clamp(28px,4vw,64px);padding-bottom:clamp(28px,4vw,64px)}
  .prod:nth-child(even) .prod-media{order:2}
}
.prod-media{min-width:0}
.prod-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.prod-body{min-width:0;display:flex;flex-direction:column}
.prod-head h2{font-size:clamp(32px,7.6vw,86px);margin:6px 0 4px}
.prod-sub{font-size:clamp(16px,2.2vw,24px);opacity:.6}
.prod-blurb{margin-top:16px;max-width:52ch}

.prod-price{margin-top:24px;padding:16px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.prod-price .amt{font-family:var(--mono);font-weight:600;
  font-size:clamp(26px,4.2vw,46px);line-height:1.05;letter-spacing:.01em}
.prod-price .amt .per{font-size:.4em;letter-spacing:.14em;opacity:.55;font-weight:500}
.tag-rec{display:inline-block;margin-top:10px;padding:4px 8px;
  border:1px solid var(--acid);color:var(--acid)}
.tag-rec.one{border-color:var(--rule);color:inherit;opacity:.6}
.prod-price .gst{margin-top:10px}

.prod-inc{margin:22px 0 0}
.prod-inc li{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--rule);
  font-size:12.5px;line-height:1.45}
.prod-inc li:first-child{border-top:1px solid var(--rule)}
.prod-inc li svg{flex:0 0 auto;margin-top:3px;opacity:.5}
.prod-note{margin-top:14px}
.prod-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.prod-cta .btn{flex:1 1 auto;justify-content:center}
@media (min-width:600px){.prod-cta .btn{flex:0 0 auto}}
.prod-ids{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:18px;
  padding-top:14px;border-top:1px solid var(--rule);font-size:9px;opacity:.32}

/* ---- pre-checkout ---- */
.co2{display:grid;grid-template-columns:1fr;gap:var(--gut);
  padding:var(--gut);border-top:1px solid var(--rule)}
@media (min-width:960px){.co2{grid-template-columns:40% 1fr;gap:clamp(24px,3vw,52px)}}
.co2-media{min-width:0}
.co2-body{min-width:0}
.co-go{width:100%;justify-content:center;margin-top:22px}
@media (min-width:600px){.co-go{width:auto}}
.stripe-note{border:1px solid var(--rule);padding:14px;margin-top:18px;max-width:60ch}
.stripe-note p{margin-top:7px}
.co-ids-wrap{margin-top:26px;border-top:1px solid var(--rule)}
.co-ids-wrap summary{list-style:none;cursor:pointer;padding:14px 0;min-height:46px;
  display:flex;align-items:center;justify-content:space-between;gap:14px}
.co-ids-wrap summary::-webkit-details-marker{display:none}
.co-ids-wrap .pm{font-size:15px;opacity:.6}
.co-ids-wrap .sum-rows div span:last-child{word-break:break-all;opacity:.6}

.co-alts{display:grid;grid-template-columns:1fr;margin-top:14px}
@media (min-width:760px){.co-alts{grid-template-columns:repeat(3,1fr)}}
.co-alt{display:flex;flex-direction:column;gap:6px;padding:16px 0;
  border-top:1px solid var(--rule);min-height:52px;justify-content:center}
@media (min-width:760px){
  .co-alt{padding:16px;border-left:1px solid var(--rule)}
  .co-alt:first-child{border-left:0}
}
.co-alt .nm{font-family:var(--edit);font-style:italic;font-size:18px}
.co-alt:hover{background:rgba(255,255,255,.05)}
.co-alt:hover .nm{color:var(--acid)}

/* ============================================================
   MEMBERS — sign-up, sign-in, vault
   ============================================================ */
.auth-wrap{display:grid;grid-template-columns:1fr;border-top:1px solid var(--rule)}
@media (min-width:1000px){.auth-wrap{grid-template-columns:1.1fr .9fr}}
.auth-form{padding:var(--gut);border-bottom:1px solid var(--rule)}
.auth-aside{padding:var(--gut);border-bottom:1px solid var(--rule)}
@media (min-width:1000px){.auth-aside{border-left:1px solid var(--rule)}}
.auth-aside .plate{margin-top:16px}
.auth-aside ul li{display:flex;gap:9px;padding:11px 0;border-bottom:1px solid var(--rule);font-size:12.5px;line-height:1.5}
.auth-aside ul li:first-child{border-top:1px solid var(--rule)}
.auth-aside ul li b{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  opacity:.5;flex:0 0 auto;padding-top:2px;text-transform:uppercase}
.check{display:flex;gap:11px;align-items:flex-start;margin-top:20px;cursor:pointer}
.check input{width:20px;height:20px;flex:0 0 auto;margin-top:1px;accent-color:var(--acid)}
.check span{font-size:12.5px;line-height:1.5;opacity:.75}
.check a{text-decoration:underline;text-underline-offset:2px}
#terms-err,#login-err{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--err);margin-top:8px;min-height:11px}

/* password meter */
.meter{margin-top:8px}
.meter .bar{height:3px;background:var(--rule);position:relative;overflow:hidden}
.meter .bar::after{content:'';position:absolute;inset:0 auto 0 0;width:var(--pct,0%);
  background:var(--err);transition:width .2s ease,background .2s ease}
.meter[data-score="3"] .bar::after{background:#D8A23C}
.meter[data-score="4"] .bar::after,.meter[data-score="5"] .bar::after{background:var(--acid)}
.meter .lbl{display:block;margin-top:5px;font-family:var(--mono);font-size:9px;
  letter-spacing:.14em;text-transform:uppercase;opacity:.6}

.alt-line{padding:16px var(--gut);border-top:1px solid var(--rule);
  display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between}

/* prototype warning band */
.proto{
  border:1px solid var(--acid);padding:14px;margin-top:18px;
  display:flex;gap:11px;align-items:flex-start;
}
.proto b{color:var(--acid);font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;
  text-transform:uppercase;flex:0 0 auto;padding-top:1px}
.proto p{font-size:12px;line-height:1.55;opacity:.75}

/* ---- vault ---- */
#vault-locked{padding:var(--gut);border-top:1px solid var(--rule)}
#vault-locked .lockbox{border:1px solid var(--rule);padding:clamp(20px,4vw,44px);max-width:56ch}
#vault-locked h2{font-family:var(--display);text-transform:uppercase;
  font-size:clamp(28px,6vw,64px);line-height:.92;margin:10px 0 12px}

#who{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
  padding:var(--gut);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
@media (min-width:760px){#who{grid-template-columns:repeat(4,1fr)}}
#who>div{min-width:0;word-break:break-word}
#who .mono{display:block;margin-bottom:4px}

.v-bar{position:sticky;top:var(--nav);z-index:7000;
  background:rgba(8,8,10,.93);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule-dark)}
.v-bar .seg{display:flex;overflow-x:auto;scrollbar-width:none}
.v-bar .seg::-webkit-scrollbar{display:none}
.v-bar button{flex:0 0 auto;padding:12px 13px;min-height:44px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:500;border-right:1px solid var(--rule-dark);cursor:pointer;transition:none;white-space:nowrap}
.v-bar button:hover{background:rgba(255,255,255,.06)}
.v-bar button[aria-pressed="true"]{background:var(--acid);color:var(--ink)}
.v-bar .srch{display:flex;border-top:1px solid var(--rule-dark)}
.v-bar .srch input{flex:1 1 auto;padding:12px var(--gut);min-height:46px;font-size:14px;background:transparent}
.v-bar .srch input::placeholder{opacity:.4}

.v-tools{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between;
  padding:14px var(--gut);border-bottom:1px solid var(--rule)}
#dl-progress{padding:10px var(--gut);border-bottom:1px solid var(--rule);background:rgba(204,255,0,.05)}

#v-list{padding-bottom:40px}
.v-row{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center;
  padding:12px var(--gut);border-bottom:1px solid var(--rule)}
@media (min-width:700px){.v-row{grid-template-columns:84px 1fr auto;gap:18px}}
.v-thumb{border:1px solid var(--rule);overflow:hidden;aspect-ratio:1/1;background:rgba(255,255,255,.04)}
.v-thumb img{width:100%;height:100%;object-fit:cover}
.v-meta{min-width:0}
.v-t{font-family:var(--edit);font-style:italic;font-size:16px;line-height:1.2}
.v-n{font-size:11.5px;line-height:1.45;opacity:.5;margin-top:3px}
.v-tags{margin-top:5px;font-size:9px}
.v-dl{grid-column:1/-1;justify-content:center}
@media (min-width:700px){.v-dl{grid-column:auto}}
.v-empty{padding:40px var(--gut);text-align:center}

/* ============================================================
   UTILITY LAYER — palette, shortlist, stars, toast
   ============================================================ */
#ubar{
  position:fixed;right:12px;bottom:12px;z-index:8500;
  display:flex;flex-direction:column;gap:8px;
}
@media (min-width:768px){#ubar{right:18px;bottom:18px}}
#ubar button{
  width:46px;height:46px;border:1px solid var(--rule-dark);
  background:rgba(8,8,10,.86);backdrop-filter:blur(8px);color:var(--paper);
  display:flex;align-items:center;justify-content:center;gap:4px;
  cursor:pointer;transition:none;
}
#ubar button:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
#ubar #u-sl svg{fill:currentColor}
#ubar #u-sl[data-empty="false"]{border-color:var(--acid);color:var(--acid)}
#ubar #u-sl[data-empty="false"]:hover{background:var(--acid);color:var(--ink)}
#ubar #u-sl span{font-size:9px;letter-spacing:0}
#ubar #u-top{opacity:0;pointer-events:none;transform:translateY(6px);
  transition:opacity .2s ease,transform .2s ease}
#ubar #u-top.on{opacity:1;pointer-events:auto;transform:none}

/* ---- music: play / pause, top of the right-hand stack ----
   A pill rather than a 46px square, because an icon alone reads as
   "mute" and this control starts and stops a named track. The button
   always shows the action it will perform, not the state it is in. */
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
#ubar #u-play{
  width:auto;min-width:46px;padding:0 13px;gap:9px;
  position:relative;overflow:hidden;
}
#ubar #u-play .lb{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;line-height:1}
#ubar #u-play .pause{display:none}
#ubar #u-play.on .pause{display:block}
#ubar #u-play.on .play{display:none}
#ubar #u-play.on{border-color:var(--acid);color:var(--acid)}
#ubar #u-play.on:hover{background:var(--acid);color:var(--ink);border-color:var(--acid)}
/* position as a hairline, not a scrubber — this is ambience, not a player,
   so there's no time code and nothing to drag */
#ubar #u-play .pg{
  position:absolute;left:0;bottom:0;height:2px;width:100%;background:currentColor;
  opacity:.5;transform:scaleX(var(--p,0));transform-origin:0 50%;
}
/* armed: the browser refused autoplay and we're waiting on a gesture */
#ubar #u-play.armed{border-color:var(--acid);color:var(--acid)}
#ubar #u-play.armed .lb{animation:pulse 1.7s ease-in-out infinite}
@media (max-width:520px){
  #ubar #u-play{padding:0;width:46px;min-width:0;gap:0}
  #ubar #u-play .lb{display:none}
}
@media (prefers-reduced-motion:reduce){ #ubar #u-play.armed .lb{animation:none} }

/* star on a plate */
.star{
  position:absolute;top:6px;right:6px;z-index:3;
  width:30px;height:30px;border:1px solid rgba(244,242,237,.45);
  background:rgba(8,8,10,.5);color:var(--paper);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:none;
}
.star svg{fill:none;stroke:currentColor;stroke-width:1.2}
.star:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.star[aria-pressed="true"]{border-color:var(--acid);color:var(--acid)}
.star[aria-pressed="true"] svg{fill:var(--acid);stroke:var(--acid)}
.star[aria-pressed="true"]:hover{background:var(--acid);color:var(--ink)}
.star[aria-pressed="true"]:hover svg{fill:var(--ink);stroke:var(--ink)}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.28)}100%{transform:scale(1)}}
.star.pop{animation:pop .28s ease}
@media (hover:none){.star{width:34px;height:34px}}

/* palette */
#pal,#draw,#keys{position:fixed;inset:0;z-index:9300;display:none}
#pal.on,#draw.on,#keys.on{display:flex}
#pal{background:rgba(4,4,6,.86);backdrop-filter:blur(3px);
  align-items:flex-start;justify-content:center;padding:8vh 12px 12px}
.pal-box{width:100%;max-width:680px;border:1px solid var(--rule-dark);
  background:var(--ink);display:flex;flex-direction:column;max-height:82vh}
.pal-top{display:flex;align-items:center;border-bottom:1px solid var(--rule-dark)}
.pal-top input{flex:1 1 auto;padding:16px;font-size:16px;background:transparent;min-height:52px}
.pal-top input::placeholder{opacity:.4}
.pal-top button{padding:0 14px;min-height:52px;opacity:.5;cursor:pointer;font-size:9px;letter-spacing:.14em}
.pal-top button:hover{opacity:1;color:var(--acid)}
.pal-list{overflow-y:auto;flex:1 1 auto;-webkit-overflow-scrolling:touch}
.pal-row{
  display:grid;grid-template-columns:34px 1fr auto;gap:11px;align-items:center;
  width:100%;text-align:left;padding:9px 12px;cursor:pointer;
  border-bottom:1px solid var(--rule-dark);transition:none;
}
.pal-row .pal-k{display:none}
@media (min-width:640px){
  .pal-row{grid-template-columns:34px minmax(0,1fr) minmax(0,1fr) auto}
  .pal-row .pal-k{display:block;font-size:8.5px}
}
.pal-row.on,.pal-row:hover{background:rgba(204,255,0,.1)}
.pal-row.on .pal-t{color:var(--acid)}
.pal-th{width:34px;height:34px;border:1px solid var(--rule-dark);overflow:hidden;flex:0 0 auto}
.pal-th img{width:100%;height:100%;object-fit:cover}
.pal-pg{display:flex;align-items:center;justify-content:center;font-size:11px;opacity:.5}
.pal-t{font-family:var(--edit);font-style:italic;font-size:15px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pal-n{font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pal-foot{display:flex;justify-content:space-between;gap:12px;
  padding:10px 12px;border-top:1px solid var(--rule-dark)}
.pal-empty{padding:34px 12px;text-align:center}

/* drawer */
#draw{background:rgba(4,4,6,.82);align-items:stretch;justify-content:flex-end}
.draw-box{width:100%;max-width:460px;background:var(--ink);
  border-left:1px solid var(--rule-dark);display:flex;flex-direction:column}
.draw-top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px var(--gut);border-bottom:1px solid var(--rule-dark);min-height:52px}
.draw-top button{cursor:pointer;opacity:.55;font-size:9px;letter-spacing:.14em}
.draw-top button:hover{opacity:1;color:var(--acid)}
.draw-list{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch}
.draw-row{display:grid;grid-template-columns:44px 1fr auto;gap:11px;align-items:center;
  padding:10px var(--gut);border-bottom:1px solid var(--rule-dark)}
.draw-row .pal-th{width:44px;height:44px}
.draw-t{display:block;font-family:var(--edit);font-style:italic;font-size:15px}
.draw-n{display:block;font-size:9px;margin-top:2px}
.draw-rm{width:32px;height:32px;border:1px solid var(--rule-dark);cursor:pointer;font-size:14px}
.draw-rm:hover{background:var(--paper);color:var(--ink)}
.draw-foot{display:flex;flex-wrap:wrap;gap:8px;padding:14px var(--gut);
  border-top:1px solid var(--rule-dark)}
.draw-foot .btn{flex:1 1 auto;font-size:9.5px;padding:11px 12px}

/* shortcut sheet */
#keys{background:rgba(4,4,6,.86);align-items:center;justify-content:center;padding:12px}
.keys-box{width:100%;max-width:400px;border:1px solid var(--rule-dark);background:var(--ink)}
.keys-list li{display:flex;gap:14px;align-items:center;
  padding:11px var(--gut);border-bottom:1px solid var(--rule-dark);font-size:10px}
.keys-list li b{min-width:44px;border:1px solid var(--rule-dark);
  padding:3px 6px;text-align:center;flex:0 0 auto;font-weight:500}
.keys-list li span{opacity:.6;letter-spacing:.1em}

/* toast */
#toast{
  position:fixed;left:50%;bottom:76px;transform:translate(-50%,10px);z-index:9600;
  background:var(--acid);color:var(--ink);padding:11px 16px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;
  max-width:calc(100vw - 24px);text-align:center;
}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* lightbox extra actions */
#lb .lb-acts{display:flex;gap:8px;align-items:center}
#lb .lb-acts a,#lb .lb-acts button{
  height:44px;min-width:44px;padding:0 11px;border:1px solid var(--rule-dark);
  display:flex;align-items:center;justify-content:center;gap:7px;
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;transition:none;
}
#lb .lb-acts a:hover,#lb .lb-acts button:hover{background:var(--paper);color:var(--ink)}
#lb .lb-acts .star{position:static;width:44px;height:44px}
/* a locked download reads as a door, not a dead end: dimmed, but clearly a
   link, with the same hover as everything else so it invites the click */
#lb .lb-acts #lb-dl.locked{opacity:.62;border-style:dashed}
#lb .lb-acts #lb-dl.locked:hover{opacity:1;background:var(--paper);color:var(--ink)}
/* the commission link is the only action here that earns money, so it is the
   only one wearing acid — the utilities stay hairline */
#lb .lb-acts #lb-buy{border-color:var(--acid);color:var(--acid)}
#lb .lb-acts #lb-buy:hover{background:var(--acid);color:var(--ink);border-color:var(--acid)}
@media (max-width:560px){
  #lb .lb-acts .lbl{display:none}
  /* except this one: an arrow on its own doesn't say "buy" */
  #lb .lb-acts #lb-buy .lbl{display:block}
}

/* ---- commissioned plate on the checkout page ---- */
.co-artcap{
  display:flex;flex-direction:column;gap:3px;
  border:1px solid var(--rule-dark);border-top:0;padding:11px 12px;
}
.co-artcap .edit{font-family:var(--edit);font-style:italic;font-size:clamp(18px,2.4vw,26px)}
.co-artcap .mono{font-size:9px;letter-spacing:.15em;text-transform:uppercase}
.co-artcap .n{text-transform:none;letter-spacing:.02em;font-size:10.5px;line-height:1.5;margin-top:4px}

/* ---- the brief, collected before payment ---- */
.cb{display:flex;flex-direction:column;gap:7px;margin-top:16px}
.cb label{font-size:9px;letter-spacing:.16em;text-transform:uppercase;opacity:.6}
.cb textarea,.cb input{
  width:100%;background:transparent;color:inherit;
  border:1px solid var(--rule-dark);border-radius:0;padding:11px 12px;
  font-family:var(--body);font-size:14px;line-height:1.5;resize:vertical;
}
.cb textarea:focus,.cb input:focus{outline:0;border-color:var(--acid)}
.cb textarea::placeholder,.cb input::placeholder{opacity:.38}
.cb-row{display:flex;justify-content:flex-end;margin-top:-4px}
.cb-row .mono{font-size:9px;letter-spacing:.12em}
.cb #cb-mail{margin-top:5px;align-self:flex-start}
.cb #cb-state{font-size:9.5px;letter-spacing:.06em;text-transform:none;
  line-height:1.6;max-width:46ch;opacity:.6}
/* once the brief is away, the pay button is the only thing left to do */
.co-go.ready{border-color:var(--acid);color:var(--acid)}
.co-go.ready:hover{background:var(--acid);color:var(--ink)}

/* ---- commission strip under every archive tile ----
   Always visible rather than revealed on hover: a price the visitor has to
   go looking for is a price they don't find, and hover doesn't exist on a
   phone, where most of this archive gets read. */
.arch-grid .tile{display:flex;flex-direction:column}
.tile-buy{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:auto;padding:8px 9px;border:1px solid var(--rule-dark);border-top:0;
  font-size:8.6px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--paper);opacity:.72;transition:none;
}
.tile-buy .amt{opacity:.85;white-space:nowrap}
.tile-buy:hover,.tile-buy:focus-visible{
  opacity:1;background:var(--acid);color:var(--ink);border-color:var(--acid);
}
/* a film is a different product at a different price — say so quietly */
.tile-buy.film .amt{font-style:normal}
.arch-grid.dense .tile-buy{padding:6px 7px;font-size:8px;letter-spacing:.1em}
@media (max-width:520px){
  .tile-buy{flex-direction:column;align-items:flex-start;gap:2px;letter-spacing:.1em}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .scatter.js .item{transform:none !important;opacity:1 !important}
  .arch-grid .tile{opacity:1 !important;transform:none !important}
  .case{position:relative;top:0;transform:none !important;margin-bottom:var(--gut)}
  .case-wrap{height:auto}
  #hero{position:relative;top:0}
  #hero-cover{height:auto;min-height:0}
  #ticker .track{transform:none !important}
  #grain{opacity:.18}
  #hero .hero-media video{opacity:1}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}