/* cinematiq — a tech & culture studio
   Type: Figtree (display) · Libre Caslon Display (issue titles) · Libre Caslon Text italic
   (deks, emphasis) · Geist (text and UI) · Yellowtail (the byline) · her own lettering
   for CINEMATIQ and "live creatively".
   Shared by every page. An issue adds its own stylesheet next to its index.html. */
@font-face{font-family:CQ;src:url("/assets/fonts/geist.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:CQ;src:url("/assets/fonts/geist-i.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:CQD;src:url("/assets/fonts/fig.woff2") format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:CQI;src:url("/assets/fonts/cas-i.woff2") format("woff2");font-style:italic;font-display:swap}
@font-face{font-family:CQC;src:url("/assets/fonts/caslon-display.woff2") format("woff2");font-display:swap}
@font-face{font-family:CQScript;src:url("/assets/fonts/yt.woff2") format("woff2");font-display:swap}

:root{
  --black:#060606; --black-2:#0b0b0c; --surface:#121214; --line:rgba(255,255,255,.14); --line-2:rgba(255,255,255,.08);
  --white:#fff; --bone:#f4f1ea; --mute:rgba(244,241,234,.66); --mute-2:rgba(244,241,234,.42);
  --acid:#edff06; --ink:#0a0a0a; --maroon:#5e0c07;
  --f:CQ,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --d:CQD,CQ,"Helvetica Neue",Arial,sans-serif;
  --i:CQI,Georgia,"Times New Roman",serif;
  --c:CQC,CQI,Georgia,"Times New Roman",serif;
  --script:CQScript,cursive;
  --gut:clamp(20px,5vw,80px); --max:1240px; --hdr:58px; --tkh:38px;
  --e:cubic-bezier(.22,.7,.2,1); --e-out:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable;background:#000}
body{background:var(--black);color:var(--bone);font:400 16px/1.6 var(--f);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{max-width:100%;display:block}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--acid);outline-offset:3px;border-radius:2px}
[id]{scroll-margin-top:calc(var(--hdr) + 18px)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:600;padding:10px 16px;border-radius:999px;background:var(--acid);color:#0a0a0a;font:600 12px/1 var(--f);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}

.kick{display:flex;align-items:center;gap:.9em;margin:0;font:600 clamp(10.5px,.85vw,11.5px)/1 var(--f);letter-spacing:.2em;text-transform:uppercase;color:var(--acid)}
.kick::before{content:"";width:6px;height:6px;flex:none;border-radius:50%;background:currentColor}
.kick.c{justify-content:center}

/* the worn black card, used where a page wants paper under it */
.paper{position:relative;border:var(--edge,56px) solid transparent;
  border-image:url("/assets/img/paper-edge.webp") 72 / var(--edge,56px) / 0 round;
  background:#0b0a09 url("/assets/img/paper-in.webp") center top / max(1100px,100%) auto repeat-y;background-origin:border-box;background-clip:border-box}

/* ---------- the book: real pages, turned like leaves ---------- */
.book{position:relative;background:#000}
.pg{position:relative;min-height:100vh;min-height:100svh;background:var(--black)}
.pg-shade,.pg-cast{display:none}
.book.turning{position:fixed;inset:0;z-index:1;overflow:hidden}
.book.turning .pg{position:absolute;inset:0;overflow:hidden;will-change:opacity,transform}
.book.turning .rail{opacity:0!important}
.pg-shade{background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,.85))}
.pg-cast{background:linear-gradient(90deg,rgba(0,0,0,.75),rgba(0,0,0,.3) 35%,rgba(0,0,0,0) 75%)}
.inner-top{padding-top:calc(var(--hdr) + clamp(34px,7vh,86px))}

/* ---------- one header, translucent, compacting on scroll ---------- */
.hdr{--s:1;position:fixed;top:0;left:0;right:0;z-index:150;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:12px;padding:calc(env(safe-area-inset-top,0px) + 12px + 14px * (1 - var(--s))) clamp(16px,3vw,34px) 12px;
  transform:translate3d(0,var(--tk,0px),0)}
.hdr::before{content:"";position:absolute;inset:0;z-index:-1;opacity:var(--s);
  background:rgba(6,6,6,.6);-webkit-backdrop-filter:saturate(1.3) blur(16px);backdrop-filter:saturate(1.3) blur(16px);
  border-bottom:1px solid var(--line-2);transition:opacity .35s linear}
.hdr-l,.hdr-r{display:flex;align-items:center;height:38px}
.hdr-r{justify-content:flex-end}

/* the logo: her wordmark with the byline under its shoulder, clear of the Q */
.lockup{--w:180px;position:relative;display:block;width:var(--w);color:#fff;text-decoration:none}
.lockup svg{width:100%;height:auto;display:block}
.lockup .by{position:absolute;left:28%;top:106%;font:400 calc(var(--w) * .092)/1 var(--script);
  color:var(--acid);-webkit-text-stroke:.05em #0b0b0b;paint-order:stroke fill;transform:rotate(-4.6deg);transform-origin:0 50%;white-space:nowrap;
  transition:transform .6s var(--e-out)}
/* a sheen that runs along her letters */
.lk-sheen{position:absolute;left:0;top:0;width:100%;aspect-ratio:1000/141.9;pointer-events:none;
  -webkit-mask:url("/assets/brand/wordmark.svg") 0 0/100% 100% no-repeat;mask:url("/assets/brand/wordmark.svg") 0 0/100% 100% no-repeat;
  background:linear-gradient(105deg,rgba(237,255,6,0) 38%,rgba(237,255,6,.95) 48%,rgba(255,255,255,.9) 51%,rgba(237,255,6,0) 60%) 130% 0/260% 100% no-repeat;opacity:0}
.lockup:hover .lk-sheen,.lockup.shine .lk-sheen{animation:sheen 1.25s var(--e) both}
.lockup:hover .by{transform:rotate(-6deg) translate(1.5%,-4%)}
@keyframes sheen{0%{opacity:1;background-position:130% 0}100%{opacity:1;background-position:-30% 0}}
.lk-hdr{--big:clamp(170px,17vw,272px);--small:132px;--w:calc(var(--big) + (var(--small) - var(--big)) * var(--s));justify-self:center}
.lk-hdr .by{opacity:calc(1 - var(--s) * 1.9);transition:opacity .3s linear,transform .6s var(--e-out)}
.hdr[data-s="1"] .lk-hdr .by{visibility:hidden}
html[data-page="work"] .hdr::before{background:rgba(10,10,10,.62)}

/* ---------- buttons ---------- */
.btn{--bg:var(--acid);--fg:#0a0a0a;--bd:var(--acid);
  position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:1.4em;height:48px;padding:0 22px;
  border:1.5px solid var(--bd);border-radius:999px;background:var(--bg);color:var(--fg);cursor:pointer;
  font:600 12px/1 var(--f);letter-spacing:.13em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  transition:background .35s var(--e),color .35s var(--e),border-color .35s var(--e),transform .35s var(--e)}
.btn i{width:15px;height:8px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M0 4h11M8 1l3 3-3 3' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M0 4h11M8 1l3 3-3 3' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center/contain;
  transition:transform .35s var(--e)}
.btn:hover{transform:translateY(-2px)}
.btn:hover i{transform:translateX(5px)}
.btn:active{transform:translateY(0)}
.btn[disabled]{opacity:.6;pointer-events:none}
.btn.ghost{--bg:transparent;--fg:#fff;--bd:#fff}
.btn.ghost:hover{--bd:var(--acid);--fg:var(--acid)}
.btn.solid:hover{--bg:#fff;--bd:#fff}
.btn.dark{--bg:#0a0a0a;--fg:#fff;--bd:#0a0a0a}
.btn.dark:hover{--bg:var(--acid);--fg:#0a0a0a;--bd:var(--acid)}

.sub-btn{display:inline-flex;align-items:center;height:38px;padding:0 18px;border:1.5px solid var(--acid);border-radius:999px;
  color:var(--acid);background:rgba(8,7,6,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-decoration:none;font:600 11.5px/1 var(--f);letter-spacing:.14em;text-transform:uppercase;
  transition:background .3s var(--e),color .3s var(--e)}
.sub-btn:hover{background:var(--acid);color:#0a0a0a}

.burger{display:inline-flex;align-items:center;gap:10px;background:none;border:0;padding:0;cursor:pointer;color:var(--bone);
  font:600 11.5px/1 var(--f);letter-spacing:.14em;text-transform:uppercase}
.burger u{display:grid;gap:4px;width:22px}
.burger u::before,.burger u::after{content:"";height:1.5px;background:currentColor;transition:transform .4s var(--e)}
.burger:hover u::before{transform:translateX(4px)}
.burger:hover u::after{transform:translateX(-4px)}

/* ---------- forms ---------- */
[hidden]{display:none!important}
.form{display:grid;gap:14px;width:100%}
.field{display:grid;gap:8px}
.field label{font:600 10.5px/1 var(--f);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.field input,.field textarea{width:100%;min-width:0;height:48px;padding:0 16px;border:1px solid var(--line);border-radius:4px;background:rgba(255,255,255,.04);
  font:400 16px/1.4 var(--f);color:var(--bone);transition:border-color .25s,background .25s}
.field textarea{height:auto;min-height:130px;padding:14px 16px;resize:vertical}
.field input:hover,.field textarea:hover{border-color:rgba(255,255,255,.3)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--acid);background:rgba(255,255,255,.06)}
.field input::placeholder{color:var(--mute-2)}
.inline{display:flex;gap:12px;flex-wrap:wrap;align-items:end}
.inline .field{flex:1 1 240px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.said{margin:0;font:400 14px/1.5 var(--f);color:var(--mute);min-height:1.5em}
.said.bad{color:#ff9a86}
.said.ok{color:var(--acid)}

/* ---------- the menu sheet ---------- */
.sheet{position:fixed;inset:0;z-index:200;display:grid;grid-template-rows:auto 1fr auto;background:rgba(6,6,6,.96);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  padding:calc(env(safe-area-inset-top,0px) + 22px) var(--gut) calc(env(safe-area-inset-bottom,0px) + 28px);
  opacity:0;visibility:hidden;transition:opacity .4s var(--e),visibility 0s .4s}
.sheet.open{opacity:1;visibility:visible;transition:opacity .4s var(--e)}
.sheet-top{display:flex;justify-content:space-between;align-items:center}
.sheet-top .lockup{--w:132px}
.sheet-top .lockup .by{display:none}
.close-sheet{height:38px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--bone);cursor:pointer;
  font:600 11.5px/1 var(--f);letter-spacing:.14em;text-transform:uppercase;transition:background .25s,color .25s}
.close-sheet:hover{background:var(--bone);color:#0a0a0a}
.sheet nav{align-self:center;width:min(100%,760px);justify-self:center}
.sheet ol{list-style:none;margin:0;padding:0}
.sheet li{overflow:hidden}
.sheet li a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:clamp(13px,2.2vh,20px) 0;border-bottom:1px solid var(--line-2);
  text-decoration:none;font:300 clamp(28px,4vw,46px)/1.04 var(--d);letter-spacing:-.025em;
  transform:translateY(110%);transition:color .25s,padding .4s var(--e)}
.sheet.open li a{transform:none;transition:transform .7s var(--e-out),color .25s,padding .4s var(--e)}
.sheet.open li:nth-child(2) a{transition-delay:.05s}
.sheet.open li:nth-child(3) a{transition-delay:.1s}
.sheet.open li:nth-child(4) a{transition-delay:.15s}
.sheet li a:hover{color:var(--acid);padding-left:14px}
.sheet li a[aria-current="page"]{color:var(--acid)}
.sheet li small{font:600 11px/1 var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--mute-2)}
.sheet-foot{display:flex;flex-wrap:wrap;gap:30px;justify-content:center}
.sheet-foot a{font:600 11.5px/1 var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);text-decoration:none}
.sheet-foot a:hover{color:var(--acid)}

/* ---------- the foot of every page: subscribe sits inside it on the cover page ---------- */
.foot{position:relative;background:#000}
.foot-in{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.sub-band{padding:clamp(56px,9vh,100px) 0 clamp(50px,7vh,80px);border-bottom:1px solid var(--line-2);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.9fr);gap:clamp(28px,4vw,72px);align-items:end}
.sub-band h2{margin:18px 0 0;font:300 clamp(21px,2.15vw,31px)/1.2 var(--d);letter-spacing:-.02em;max-width:17em;color:#fff}
.foot-top{display:flex;justify-content:space-between;align-items:flex-start;gap:44px;flex-wrap:wrap;
  padding:clamp(50px,7vh,80px) 0 clamp(40px,6vh,64px)}
.foot .lockup{--w:200px}
.foot nav{display:grid;grid-template-columns:repeat(2,auto);gap:14px 60px}
.foot nav a{font:400 14px/1.3 var(--f);color:var(--mute);text-decoration:none;transition:color .25s}
.foot nav a:hover{color:var(--acid)}
.foot-base{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  padding:24px 0 calc(34px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line-2);
  font:400 12.5px/1.4 var(--f);color:var(--mute-2)}
.social{display:flex;gap:10px}
.social a{display:grid;place-items:center;width:34px;height:34px;color:var(--mute);transition:color .3s var(--e),transform .3s var(--e)}
.social a:hover{color:#fff;transform:translateY(-3px) scale(1.08)}
.social svg{width:19px;height:19px}
.social svg *{transition:fill .3s var(--e),stroke .3s var(--e)}
/* in their own colours, when you reach for them */
.social .ig:hover svg{stroke:url(#ig-grad)}
.social .ig:hover svg circle:last-child{fill:url(#ig-grad)}
.social .yt:hover rect{fill:#ff0000;stroke:#ff0000}
.social .yt:hover path{fill:#fff}

/* ---------- motion ---------- */
.rv{opacity:0;transform:translateY(16px);transition:opacity .5s var(--e-out),transform .5s var(--e-out)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.1s}.rv-d2{transition-delay:.2s}.rv-d3{transition-delay:.3s}
html:not(.js) .rv{opacity:1;transform:none}
.top-bar{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--acid);z-index:300;pointer-events:none;opacity:.9}

/* ---------- the cursor: a yellow dot and a ring that answers what it's over ---------- */
.cur-dot,.cur-ring{display:none}
.cur-on .cur-dot,.cur-on .cur-ring{display:block;position:fixed;left:0;top:0;pointer-events:none;z-index:500;border-radius:50%;opacity:0;transition:opacity .3s}
.cur-on,.cur-on a,.cur-on button,.cur-on label{cursor:none}
.cur-on input,.cur-on textarea,.cur-on .scrub,.cur-on summary{cursor:auto}
.cur-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--acid);box-shadow:0 0 0 1px rgba(0,0,0,.28)}
.cur-ring{width:30px;height:30px;margin:-15px 0 0 -15px}
.cur-ring i{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,.75);mix-blend-mode:difference;
  transition:transform .45s var(--e-out),background .3s var(--e),border-color .3s var(--e)}
.cur-ring{mix-blend-mode:difference}
.cur-ring.hot i{transform:scale(1.22);border-color:var(--acid);background:rgba(237,255,6,.14)}
.cur-ring.home i{transform:scale(1.4);border-color:var(--acid);background:rgba(237,255,6,.1)}
.cur-ring.hot,.cur-ring.home{mix-blend-mode:normal}
.cur-ring.down i{transform:scale(.8)}
.cur-on .seen{opacity:1}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
}
@media (max-width:760px){
  :root{--hdr:54px;--tkh:34px}
  .hdr{padding-left:14px;padding-right:14px;gap:10px}
  .lk-hdr{--big:min(40vw,176px);--small:110px}
  .sub-btn{height:32px;padding:0 13px;font-size:10px;letter-spacing:.1em}
  .hdr-l,.hdr-r{height:32px}
  .burger b{display:none}
  .sub-band,.foot nav{grid-template-columns:1fr}
  .foot nav{grid-template-columns:1fr 1fr;gap:12px 24px}
  .foot .lockup{--w:168px}
}

/* ---------- the cover: an old magazine cover, pinned while its words scroll away and the magazine rises over it ---------- */
/* landscape: the art box is sized so ~84% of the picture's height (feet and their shadow included) sits in the
   first fold; the extra width is the same cracked black paper, so there is never a flat background. JS pans it
   gently through the last 16% as you scroll (--pan), then dims it as the next section slides up (--dim). */
.cv{position:relative;z-index:1;background:#0b0a09;height:235svh}
.cv-stage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate}
/* sticky positioning under an animated 3D transform is expensive to recompute every frame —
   drop it to plain positioning for the moment a page is turning, so the flip stays smooth */
.book.turning .cv-stage{position:relative;top:auto}
/* and pause the decorative infinite loops while a page is mid-flip, for the same reason */
.book.turning .cv-led::after,.book.turning .hl::after,.book.turning .hl img,.book.turning .tick-row{animation-play-state:paused}
.cv-art{position:absolute;right:0;top:0;z-index:-2;width:max(100vw,calc(100svh / .84 * 2910 / 1753));aspect-ratio:2910/1753;
  transform:translate3d(calc(var(--px,0) * 1px),calc(var(--pan,-8%) + var(--py,0) * 1px),0) scale(var(--sc,1.015));transform-origin:72% 45%;will-change:transform}
.cv-art picture,.cv-art img{display:block;width:100%;height:100%}
.cv-art img{max-width:none;object-fit:cover;filter:contrast(1.03);opacity:0;transition:opacity 1.1s ease-out}
.cv-art.ready img{opacity:1}
.cv-art.instant img{transition:none}
/* the words sit on the paper; a soft scrim keeps them legible where they reach the red sun */
.cv-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(98deg,rgba(6,5,4,.62) 0%,rgba(6,5,4,.34) 30%,rgba(6,5,4,0) 52%),
             linear-gradient(0deg,rgba(6,5,4,.42),rgba(6,5,4,0) 22%)}
.cv-grain{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.14;mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E") repeat}
/* opacity is set directly by JS (not via a custom-property calc()), so this starts, and always falls
   back to, fully transparent — never a dark layer stuck over the picture before/without script */
.cv-dim{position:absolute;inset:0;z-index:-1;pointer-events:none;background:#050404;opacity:0}

/* the glass: a small, quiet sheen crossing the flat face of the panel — nothing circular, nothing near
   its edges. The box is inset well inside the glass (verified against the photo's own pixels), so the
   sheen can never reach the hand or the background around it. */
.cv-led{--lx:83.16%;--lw:7.9%;position:absolute;left:var(--lx);top:27.38%;width:var(--lw);height:48.49%;
  pointer-events:none;overflow:hidden}
.cv-led::after{content:"";position:absolute;inset:0;mix-blend-mode:soft-light;
  background:linear-gradient(100deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.22) 49%,rgba(255,255,255,.3) 50%,rgba(255,255,255,.22) 51%,rgba(255,255,255,0) 58%) 140% 0/320% 100% no-repeat;
  animation:ledsheen 9s ease-in-out 1.5s infinite}
@keyframes ledsheen{0%{background-position:140% 0}62%,100%{background-position:-80% 0}}

/* the studio's words run along the very top of the cover, against the bottom strip's direction */
.ticker.ticker-top{position:absolute;top:0;left:0;right:0;z-index:3;background:rgba(0,0,0,.92)}
.ticker.ticker-top li{padding-top:12px;padding-bottom:12px;font-size:10.5px}
.ticker.ticker-top .tick-row{animation-direction:reverse}

.cv-copy{position:absolute;left:var(--gut);top:calc(50svh + var(--tkh) / 2 + 10px);width:min(58vw,760px);
  transform:translate3d(0,-50%,0);opacity:var(--co,1)}
.hl{position:relative;display:block;margin:0;width:min(26vw,452px)}
.hl img{width:100%;height:auto;display:block}
/* white light passes over the lettering now and then: a bright band through the letters, and the
   words themselves lift and glow for the moment it crosses */
.hl::after{content:"";position:absolute;inset:0;pointer-events:none;
  -webkit-mask:url("/assets/img/live.webp") 0 0/100% 100% no-repeat;mask:url("/assets/img/live.webp") 0 0/100% 100% no-repeat;
  background:linear-gradient(104deg,rgba(255,255,255,0) 41%,rgba(255,255,255,.55) 47%,#fff 50%,rgba(255,255,255,.55) 53%,rgba(255,255,255,0) 59%) 150% 0/300% 100% no-repeat;
  animation:glint 7s cubic-bezier(.45,.05,.4,1) 1.4s infinite}
@keyframes glint{0%{background-position:150% 0}34%,100%{background-position:-50% 0}}
.hl img{animation:glow 7s cubic-bezier(.45,.05,.4,1) 1.4s infinite}
@keyframes glow{0%,4%,36%,100%{filter:drop-shadow(0 0 0 rgba(255,255,255,0))}18%{filter:drop-shadow(0 0 14px rgba(255,255,255,.42)) brightness(1.08)}}
.cv .lede{margin:clamp(20px,2vw,30px) 0 0;max-width:min(38vw,520px);color:#fff;letter-spacing:-.01em;
  font:500 clamp(15px,1.12vw,17px)/1.5 var(--f);text-shadow:0 2px 24px rgba(0,0,0,.5)}
.cv-keys{display:grid;justify-items:start;gap:11px;margin-top:clamp(22px,2.4vw,32px)}
.cv-keys .btn{min-width:min(240px,62vw)}

.cue{position:absolute;left:var(--gut);top:calc(100svh - 70px);display:inline-flex;align-items:center;gap:12px;
  text-decoration:none;color:rgba(255,255,255,.76);font:600 10.5px/1 var(--f);letter-spacing:.2em;text-transform:uppercase;opacity:var(--co,1);transition:color .3s}
.cue:hover{color:var(--acid)}
.cue u{position:relative;display:block;width:1px;height:34px;background:rgba(255,255,255,.3);overflow:hidden}
.cue u::after{content:"";position:absolute;left:0;top:0;width:100%;height:46%;background:currentColor;animation:cue 2.4s var(--e) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(240%)}}
.cv-social{position:absolute;right:var(--gut);top:calc(100svh - 64px);opacity:var(--co,1)}
.cv-social .social a{color:rgba(255,255,255,.72)}

.hl,.cv .lede,.cv-keys{animation:rise 1.2s var(--e-out) both}
/* arriving from another page, the cross-fade is the entrance: the words are simply there */
.routed .hl,.routed .cv .lede,.routed .cv-keys{animation:none}
.cv .lede{animation-delay:.18s}.cv-keys{animation-delay:.32s}
.hl{animation-name:rise}
@keyframes rise{from{opacity:0;transform:translateY(26px)}}

/* landscape: the magazine (led by the ticker) slides up over the pinned cover */
@media (min-aspect-ratio:1/1){.cv + .ticker{margin-top:-100svh}}

/* portrait: the whole picture runs full width, in normal flow — no pin, the words sit under it */
@media (max-aspect-ratio:1/1){
  .cv{height:auto;padding-bottom:clamp(36px,7vh,64px)}
  .cv-stage{position:relative;top:auto;height:auto;overflow:hidden}
  .cv-art{position:relative;right:auto;width:100%;height:auto;aspect-ratio:1800/1753;z-index:0;transform:none}
  .cv-led{--lx:71.67%;--lw:16.11%}
  .cv-shade,.cv-grain{inset:0;z-index:1}
  .cv-shade{background:linear-gradient(0deg,#0b0a09 2%,rgba(11,10,9,.5) 24%,rgba(11,10,9,0) 56%)}
  .cv-dim{display:none}
  .cv-copy{position:relative;left:auto;top:auto;width:auto;transform:none;opacity:1;margin-top:calc(-15vw - 6px);padding:0 var(--gut);z-index:2}
  .hl{width:min(78%,380px)}
  .cv .lede{margin-top:clamp(22px,5vw,36px);font-size:clamp(15px,3.8vw,17px);max-width:32em}
  .cv-keys{margin-top:24px}
  .cue{position:relative;left:auto;top:auto;margin:28px 0 0;padding:0 var(--gut);opacity:1}
  .cue u{height:28px}
  .cv-social{position:relative;right:auto;top:auto;margin-top:24px;padding:0 var(--gut);opacity:1}
}
@media (max-aspect-ratio:1/1) and (max-width:560px){.cv-keys{justify-items:stretch}.cv-keys .btn{min-width:0;width:100%}}

/* ================= the homepage, below the cover ================= */
.body-bg{position:relative;z-index:2;background:
  radial-gradient(130% 40% at 50% 0%, rgba(237,255,6,.045) 0%, rgba(6,6,6,0) 62%),
  radial-gradient(80% 50% at 85% 30%, rgba(110,130,255,.045) 0%, rgba(6,6,6,0) 60%),
  var(--black)}
.sec{padding:clamp(90px,14vh,180px) 0 0}
.sec:last-of-type{padding-bottom:clamp(62px,9vh,116px)}
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;margin-bottom:clamp(40px,6vh,76px)}
.sec-head .rule{flex:1;height:1px;background:var(--line-2);min-width:40px}

/* a slow strip of the studio's words */
.ticker{position:relative;z-index:2;overflow:hidden;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);background:#000}
.tick-row{display:flex;width:max-content;animation:slide 60s linear infinite}
.ticker ul{display:flex;margin:0;padding:0;list-style:none}
.ticker li{display:flex;align-items:center;gap:42px;padding:14px 42px 14px 0;
  font:600 11px/1 var(--f);letter-spacing:.26em;text-transform:uppercase;color:var(--acid);white-space:nowrap}
.ticker li::after{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.5}
@keyframes slide{to{transform:translateX(-50%)}}
.ticker:hover .tick-row{animation-play-state:paused}

/* ---------- the magazine: the latest issue ---------- */
.mag{display:grid;justify-items:center}
.mag-cov{position:relative;width:min(100%,400px);perspective:1600px}
.mag-cov::before,.mag-cov::after{content:"";position:absolute;inset:2% 0 0;border-radius:3px;background:#efe9dc;
  box-shadow:0 20px 40px -24px rgba(0,0,0,.9);transition:transform .7s var(--e-out),opacity .7s var(--e-out);opacity:0;z-index:0}
.mag-cov::before{background:#e6dfd0}
.mag-cov:hover::before{opacity:1;transform:translate(14px,10px) rotate(1.6deg)}
.mag-cov:hover::after{opacity:1;transform:translate(7px,5px) rotate(.8deg)}
.mag-cov .cov{position:relative;z-index:1;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .7s var(--e-out),box-shadow .7s var(--e-out)}
.mag-cov:hover .cov{transform:translateY(-6px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}

/* the issue cover object: the plate itself, full-bleed, edge to edge — the masthead and the title set
   over it on a scrim. (A future issue whose artwork doesn't crop well into this shape can fall back to
   the aged maroon-paper treatment in tools/build_issue_cover.py instead.) */
.cov{position:relative;display:block;aspect-ratio:.76;container-type:inline-size;overflow:hidden;text-decoration:none;color:#fff;background:#141210;border-radius:2px;
  box-shadow:0 48px 80px -36px rgba(0,0,0,.95),0 8px 20px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.07)}
.mag-cov:hover .cov{box-shadow:0 70px 90px -40px rgba(0,0,0,.95),0 8px 20px rgba(0,0,0,.5),0 0 0 1px rgba(237,255,6,.26)}
.cov-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 50%}
/* a scrim so the masthead and the title stay legible over the photograph, whatever it shows there */
.cov::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,6,4,.78) 0%,rgba(8,6,4,0) 26%),
             linear-gradient(0deg,rgba(8,6,4,.92) 0%,rgba(8,6,4,.6) 26%,rgba(8,6,4,0) 50%)}
/* a quiet gloss, like a printed cover catching the light */
.cov::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,0) 36%,rgba(255,255,255,.1) 46%,rgba(255,255,255,0) 56%)}
.cov-top{position:absolute;z-index:3;top:5.4cqw;left:6cqw;right:6cqw;color:#fff}
.cov-mast{--w:88cqw;margin-bottom:9.4cqw;color:#fff}
.cov-mast .lk-sheen{display:none}
.cov-meta{display:flex;justify-content:space-between;align-items:center;padding:1.6cqw 0;border-top:.3cqw solid currentColor;border-bottom:.3cqw solid currentColor;
  font:700 2.5cqw/1 var(--f);letter-spacing:.17em;text-transform:uppercase}
.cov-kind{position:absolute;z-index:3;left:6cqw;top:95.4cqw;padding:1.3cqw 2.1cqw;background:var(--acid);color:#17130f;font:700 2.5cqw/1 var(--f);letter-spacing:.17em;text-transform:uppercase}
.cov-lines{position:absolute;z-index:3;left:6cqw;right:6cqw;bottom:5.4cqw}
.cov-title{display:block;font:400 8.7cqw/1 var(--c);letter-spacing:-.012em;color:#fff;white-space:nowrap}
.cov-dek{display:block;margin-top:1.6cqw;font:italic 400 4.3cqw/1.2 var(--i);color:rgba(255,255,255,.82)}
.cov-by{display:flex;justify-content:space-between;gap:3cqw;margin-top:3.6cqw;padding-top:2cqw;border-top:.2cqw solid rgba(255,255,255,.3);
  font:600 2.3cqw/1.3 var(--f);letter-spacing:.14em;text-transform:uppercase;color:#fff}
.cov-by span:last-child{font-weight:400;letter-spacing:.04em;text-transform:none;color:rgba(255,255,255,.62)}

/* ---------- the product lab, in its own quiet box ---------- */
.lab-box{position:relative;border:1px solid var(--line-2);border-radius:8px;overflow:hidden;
  padding:clamp(30px,4.4vw,68px) clamp(22px,4.4vw,68px) clamp(34px,4.6vw,72px);
  background:radial-gradient(70% 90% at 0% 0%,rgba(237,255,6,.055),rgba(237,255,6,0) 60%),
             radial-gradient(60% 80% at 100% 100%,rgba(110,130,255,.06),rgba(110,130,255,0) 60%),
             linear-gradient(180deg,#0f0f11,#0a0a0b);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 40px 80px -50px rgba(0,0,0,.9)}
.lab-box .sec-head{margin-bottom:clamp(28px,4vh,48px)}
.lab{display:grid;grid-template-columns:minmax(0,.68fr) minmax(0,1fr);gap:clamp(32px,4.6vw,80px);align-items:center}
.lab-t h2{margin:0;font:400 clamp(30px,3.4vw,50px)/1.02 var(--c);letter-spacing:-.012em}
.lab-t .tag{margin:14px 0 0;font:italic 400 clamp(16px,1.35vw,20px)/1.3 var(--i);color:var(--acid)}
.lab-t .desc{margin:16px 0 0;max-width:27em;font:400 clamp(14.5px,1.02vw,16px)/1.65 var(--f);color:var(--mute)}
.lab-t .btn{margin-top:clamp(24px,3vh,34px)}

/* a phone, unfolded wide enough to hold the whole picture, that you can drag */
.phone{position:relative;width:min(100%,600px);margin:0 auto;padding:13px;border-radius:40px;
  background:linear-gradient(155deg,#36363a,#131316 48%,#2a2a2e);
  box-shadow:0 50px 70px -34px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.08),inset 0 0 0 1px rgba(255,255,255,.06)}
.phone::before{content:"";position:absolute;z-index:3;right:-2px;top:22%;width:3px;height:54px;border-radius:999px;background:rgba(255,255,255,.2)}
.phone::after{content:"";position:absolute;z-index:3;left:50%;top:5px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#050506;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.screen{position:relative;aspect-ratio:860/797;border-radius:28px;overflow:hidden;background:#07080a;isolation:isolate}
.lay{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat;background-position:center}
.lay-a{background-image:url("/assets/img/lab-photo.webp");clip-path:inset(0 calc(100% - var(--x,50%)) 0 0)}
.lay-b{background-image:url("/assets/img/lab-world.webp");clip-path:inset(0 0 0 var(--x,50%))}
.seam{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;margin-left:-1px;background:var(--acid);box-shadow:0 0 18px rgba(237,255,6,.6);pointer-events:none}
.grip{position:absolute;top:50%;left:var(--x,50%);width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;pointer-events:none;
  background:var(--acid);display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.5)}
.grip::before{content:"";width:19px;height:10px;background:#0a0a0a;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M6 1 2 5l4 4M12 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M6 1 2 5l4 4M12 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center/contain}
.scrub{position:absolute;inset:0;z-index:4;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:none;touch-action:pan-y}
.scrub::-webkit-slider-thumb{-webkit-appearance:none;width:46px;height:100%}
.scrub::-moz-range-thumb{width:46px;height:100%;border:0;background:none}
.tag-l,.tag-r{position:absolute;z-index:3;bottom:14px;padding:7px 11px;border-radius:999px;pointer-events:none;
  font:600 9.5px/1 var(--f);letter-spacing:.16em;text-transform:uppercase;background:rgba(8,8,10,.55);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.tag-l{left:14px}.tag-r{right:14px}
.phone-hint{margin:18px 0 0;text-align:center;font:600 10.5px/1 var(--f);letter-spacing:.18em;text-transform:uppercase;color:var(--mute-2)}

/* ---------- tech and culture as a service: a rust brick wall, with the archive print pasted onto it ---------- */
.help{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);align-items:center;gap:clamp(28px,4vw,64px);
  color:#fff7ef;border-radius:6px;overflow:hidden;isolation:isolate;
  padding:clamp(44px,5.4vw,80px) clamp(28px,4.4vw,70px);
  background:linear-gradient(128deg,#2d0503 0%,#4c0a06 28%,#7a140b 58%,#a3301a 84%,#c05226 100%)}
/* brick courses (mortar joints), the crack/grain texture over them, both tinted into the wall's own colour */
.help::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(8,3,1,.46) 0 3px,transparent 3px 50px),
    repeating-linear-gradient(90deg,rgba(8,3,1,.36) 0 3px,transparent 3px 118px),
    repeating-linear-gradient(0deg,rgba(8,3,1,.36) 25px 28px,transparent 28px 78px) 59px 0,
    url("/assets/img/maroon.webp") center/460px auto repeat;
  background-blend-mode:multiply,multiply,multiply,overlay}
.help::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(55% 95% at 0% 100%,rgba(0,0,0,.52),rgba(0,0,0,0) 62%)}
/* the photograph exactly as it is, mounted in its own paper border and pasted onto the wall, slightly askew */
.help-fig{order:2;margin:0;justify-self:end;width:100%;max-width:500px;padding:13px 13px 15px;
  background:#f2ebdb;border-radius:2px;transform:rotate(-1.5deg);
  box-shadow:0 20px 34px -14px rgba(0,0,0,.6),0 3px 8px rgba(0,0,0,.35),inset 0 0 0 1px rgba(20,10,5,.08)}
.help-fig img{display:block;width:100%;height:auto;border-radius:1px}
.help-t{position:relative;max-width:32em}
.help-t h2{margin:14px 0 0;font:400 clamp(30px,3.5vw,52px)/1.04 var(--c);letter-spacing:-.012em}
.help-t p{margin:18px 0 0;max-width:26em;font:400 clamp(15px,1.15vw,17px)/1.55 var(--f);color:rgba(255,247,239,.92)}
.help-t .kick{color:rgba(255,247,239,.8)}
.help .btn{margin-top:clamp(26px,3.4vw,38px);--bg:#0a0a0a;--fg:#fff;--bd:#0a0a0a}
.help .btn:hover{--bg:var(--acid);--fg:#0a0a0a;--bd:var(--acid)}
.help-credit{margin:7px 0 0;font:500 10.5px/1.3 var(--f);letter-spacing:.02em;color:#5a4330;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* small screens: the photograph sinks into the wall behind the words; the credit stays one line */
@media (max-width:860px){
  .help{display:block;padding-bottom:58px}
  .help-fig{position:absolute;inset:0;z-index:-1;max-width:none;padding:0;background:none;transform:none;box-shadow:none}
  .help-fig img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;opacity:.26;border-radius:0;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 45%);mask-image:linear-gradient(180deg,transparent 0,#000 45%)}
  .help-credit{position:absolute;left:16px;right:16px;bottom:14px;margin:0;font-size:8.6px;letter-spacing:0;text-align:right;color:rgba(255,247,239,.7)}
}

@media (max-width:1000px){
  .lab{grid-template-columns:1fr;gap:34px}
  .lab-t{order:-1}
}

/* ================= collaborations ================= */
.pg-work{--edge:clamp(34px,4.4vw,64px)}
.pg-work{background:radial-gradient(120% 40% at 50% 0%, rgba(237,255,6,.05) 0%, rgba(6,6,6,0) 62%) top/100% 100vh no-repeat,#060606}
.cl-head{text-align:center;max-width:900px;margin:0 auto;padding:0 var(--gut) clamp(36px,5vh,60px)}
.cl-head h1{margin:0;font:300 clamp(38px,6vw,84px)/.98 var(--d);letter-spacing:-.04em;color:#fff}
.cl-head .cl-dek{margin:clamp(14px,2vh,20px) auto 0;max-width:22em;font:italic 400 clamp(16px,1.75vw,22px)/1.35 var(--i);color:var(--mute)}
.cl-head .cl-dek span{color:var(--acid)}
.cl-col{width:min(820px,calc(100% - 2 * var(--gut)));margin-inline:auto}
.cl-paper{padding:clamp(10px,1.6vw,26px) clamp(6px,2vw,34px)}
.cl-body{max-width:34em;margin:0 auto;padding:clamp(14px,2vh,26px) 0}
.cl-body p{margin:0 0 1.25em;font:400 clamp(15px,1.12vw,16.5px)/1.75 var(--f);color:rgba(244,241,234,.86)}
.cl-body p.lead{font-size:clamp(15.5px,1.26vw,17.5px);line-height:1.65;color:#f6f3ec}
.cl-body i{font-style:italic;font-family:var(--i);font-size:1.04em}
.cl-body a{color:inherit;text-decoration:none;font-weight:600;
  background-image:linear-gradient(var(--acid),var(--acid));background-repeat:no-repeat;background-position:0 100%;background-size:0 1.5px;
  transition:background-size .4s var(--e)}
.cl-body a:hover{background-size:100% 1.5px}
/* her name: a thin line of highlighter that floods the word on hover, as links do in the essays */
.cl-body a.mk-name{font-weight:inherit;padding:0 .08em;margin:0 -.08em;border-radius:2px;
  background:linear-gradient(rgba(237,255,6,.85),rgba(237,255,6,.85)) 0 100%/100% .12em no-repeat;transition:background-size .45s var(--e-out),color .3s}
.cl-body a.mk-name:hover,.cl-body a.mk-name:focus-visible{background-size:100% 100%;color:#0a0a0a}
.cl-cta{margin:clamp(30px,4.4vh,48px) 0 0;display:grid;gap:12px;justify-items:start}
.cl-cta p{margin:0;font:400 clamp(15px,1.12vw,16.5px)/1.5 var(--f);color:var(--mute)}
.cl-mail{display:inline-flex;align-items:center;gap:.5em;font:300 clamp(22px,2.85vw,40px)/1.05 var(--d);letter-spacing:-.03em;color:var(--acid);text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0 1.5px;
  transition:background-size .5s var(--e)}
.cl-mail:hover{background-size:100% 1.5px}
.cl-foot-space{height:clamp(70px,12vh,140px)}

/* ================= small pages (unsubscribe, 404, admin) ================= */
.note-pg{min-height:100svh;display:grid;align-content:center;justify-items:center;text-align:center;padding:calc(var(--hdr) + 60px) var(--gut) 80px}
.note-pg h1{margin:18px 0 0;font:400 clamp(34px,5vw,64px)/1.02 var(--c);letter-spacing:-.01em;color:#fff}
.note-pg p{margin:16px auto 0;max-width:30em;font:400 15.5px/1.6 var(--f);color:var(--mute)}
.note-pg .form{max-width:460px;margin:28px auto 0;text-align:left}
.note-pg .btn{margin-top:28px}