/* aariv.studio, complete style system.
   Fluid from phone to ultrawide. The native scrollbar is hidden and we draw
   our own indicator, so it looks identical in every browser. */

:root{
  --bg:#07080B; --bg2:#0B0D12;
  --fg:#FAFBFD; --fg2:#C7CEDA; --fg3:#939DAE;
  --line:rgba(255,255,255,.13); --line2:rgba(255,255,255,.26);
  --cyan:#19CBEA; --blue:#2C6FF5; --purple:#A63BF5; --pink:#FB4570;
  --grad:linear-gradient(90deg,var(--cyan),var(--blue) 36%,var(--purple) 70%,var(--pink));
  --disp:"Instrument Serif",Georgia,serif;
  --nfont:"Archivo",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,sans-serif;
  --pad:clamp(22px,4.4vw,110px);
  /* Content column. 100% (not 90vw) so the gutters stay symmetric on phones,
     where --pad already supplies the margin. The upper bound is generous
     because line length is capped per element in ch, not by this. */
  --max:min(2160px,100%);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);
  font-size:clamp(17px,1.05vw,23px);line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
::selection{background:var(--blue);color:#fff}

/* hide every native scrollbar, we render our own */
html{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}

/* ---------- smooth scroll rig ---------- */
#scroll{position:fixed;top:0;left:0;width:100%;will-change:transform}
html.no-rig #scroll{position:static}
html.no-rig #spacer{display:none}

/* ---------- our own scroll indicator ---------- */
.rail{position:fixed;top:0;right:0;width:15px;height:100%;z-index:70;
  pointer-events:none;display:flex;justify-content:flex-end;padding:10px 4px 10px 0}
.rail .tube{width:7px;height:100%;background:rgba(255,255,255,.09);
  border-radius:99px;position:relative;overflow:hidden}
.rail .grip{position:absolute;left:0;width:100%;border-radius:99px;min-height:40px;
  background:linear-gradient(180deg,var(--cyan),var(--blue) 38%,var(--purple) 72%,var(--pink))}
@media(max-width:760px){.rail{display:none}}

/* ---------- cursor ---------- */
@media (hover:hover) and (pointer:fine){ html,body,a,button,*{cursor:none !important} }
.dot,.ring{position:fixed;top:0;left:0;z-index:100;pointer-events:none;border-radius:50%;
  opacity:0;transition:opacity .25s ease;mix-blend-mode:difference;background:#fff}
.dot{width:8px;height:8px;margin:-4px 0 0 -4px}
.ring{width:40px;height:40px;margin:-20px 0 0 -20px;
  transition:opacity .25s ease,width .35s cubic-bezier(.16,1,.3,1),height .35s cubic-bezier(.16,1,.3,1),margin .35s cubic-bezier(.16,1,.3,1)}
body.on .dot,body.on .ring{opacity:1}
body.lg .ring{width:58px;height:58px;margin:-29px 0 0 -29px}
@media(hover:none),(pointer:coarse){.dot,.ring{display:none}}

/* ---------- top bar: full width, small margin ---------- */
.top{position:fixed;top:clamp(10px,1.1vw,18px);left:clamp(10px,1.1vw,18px);right:clamp(10px,1.1vw,18px);
  z-index:80;pointer-events:none;opacity:0;transform:translateY(-8px);
  transition:opacity .55s ease,transform .55s ease}
.top.on{opacity:1;transform:none}
.slab{position:relative;display:flex;align-items:center;gap:clamp(12px,1.4vw,24px);
  padding:clamp(11px,1.05vw,18px) clamp(16px,1.8vw,32px);border-radius:clamp(14px,1.3vw,22px);
  background:rgba(17,21,31,.5);
  -webkit-backdrop-filter:blur(24px) saturate(175%);backdrop-filter:blur(24px) saturate(175%);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 12px 46px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.10)}
.slab .track{position:absolute;inset:-1.5px;width:calc(100% + 3px);height:calc(100% + 3px);overflow:visible}
.slab .track rect{fill:none;stroke-width:2.5;stroke-linecap:round}
.slab .mark{width:clamp(26px,2vw,36px);height:auto;flex:none}
.slab .who{font-family:var(--body);font-weight:600;font-size:clamp(16px,1.1vw,22px);
  letter-spacing:-.005em;color:var(--fg);white-space:nowrap}
.slab .lab{margin-left:auto;font-family:var(--nfont);font-weight:700;
  font-size:clamp(13px,1vw,19px);color:var(--fg);white-space:nowrap;
  opacity:0;transition:opacity .4s ease;text-align:right}
.slab .lab.on{opacity:1}
@media(max-width:560px){.slab .who{display:none}}

/* ---------- type ---------- */
h1{font-family:var(--disp);font-weight:400;font-size:clamp(44px,7.2vw,150px);
   line-height:1.0;letter-spacing:-.025em;margin:0;max-width:15ch}
h1 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-family:var(--disp);font-weight:400;font-size:clamp(32px,4.9vw,92px);
   line-height:1.05;letter-spacing:-.02em;margin:0 0 clamp(20px,1.6vw,34px);max-width:18ch}
h3{font-family:var(--disp);font-weight:400;font-size:clamp(23px,2.2vw,42px);letter-spacing:-.012em;margin:0 0 14px}
p{margin:0 0 clamp(18px,1.3vw,28px);color:var(--fg2);max-width:60ch;font-size:clamp(18px,1.15vw,25px)}
/* 21ch put only about four words on a line and ran six lines deep. Display
   type wants roughly 30 to 40 characters a line, not 20. */
.big{font-family:var(--disp);font-weight:400;font-size:clamp(29px,4.2vw,78px);
  line-height:1.12;letter-spacing:-.018em;max-width:34ch;margin:0;color:var(--fg)}
.sub{margin-top:clamp(22px,1.8vw,38px);max-width:54ch}
strong{color:var(--fg);font-weight:600}

/* ---------- scenes ---------- */
.scene{position:relative;min-height:100svh;display:flex;overflow:hidden}
/* Over-sized so the section can drift its backdrop on scroll without
   exposing an edge. */
.scene .bg{position:absolute;inset:-7% 0;will-change:transform}
.scene .bg img{width:100%;height:100%;object-fit:cover}
/* purely a gradient over the photo, so it must not eat clicks or drags */
.scene .veil{position:absolute;inset:0;pointer-events:none}
.scene .txt{position:relative;z-index:3;width:100%;align-self:flex-end;
  padding:0 var(--pad) clamp(56px,7vh,140px);max-width:var(--max);margin:0}
.name{font-family:var(--disp);font-weight:400;font-size:clamp(20px,1.7vw,34px);
  color:var(--fg);margin:0 0 clamp(14px,1.2vw,26px)}
.meta{margin:clamp(24px,2vw,44px) 0 0;font-size:clamp(17px,1.15vw,24px);color:var(--fg2);max-width:50ch}
/* The mark rides the content column, not the window edge, so it stays with
   the headline instead of drifting away on wide or ultrawide displays. */
.stage{position:absolute;inset:0;z-index:2;max-width:var(--max);margin:0;
  padding:0 var(--pad);pointer-events:none}
.orb{position:absolute;right:var(--pad);top:50%;
  width:clamp(210px,24vw,520px);transform:translate3d(0,-54%,0);
  animation:drift 9s ease-in-out infinite;will-change:transform}
/* It floats on its own, so it is never sitting dead still while the mouse
   is somewhere else on the page. */
@keyframes drift{
  0%,100%{transform:translate3d(0,-54%,0) rotate(-.5deg)}
  50%    {transform:translate3d(0,calc(-54% - 18px),0) rotate(.6deg)}
}
.orb img{position:absolute;inset:0;width:100%;height:auto;will-change:transform}
.orb img:first-child{position:relative;filter:drop-shadow(0 40px 90px rgba(44,111,245,.34))}
/* Below the two-column threshold the mark sits above the headline block
   rather than beside it. Sized in absolute terms here, because a viewport
   width percentage on a tall tablet made it far larger than the space above
   the text and it clipped off the top of the screen. */
@media(max-width:900px){.orb{right:0;top:33%;width:clamp(190px,32vw,300px);opacity:.6}}
@media(max-width:620px){.orb{right:-5%;top:25%;width:58vw;opacity:.5}}
/* Short windows: keep the mark clear of the bottom text block. */
@media(max-height:620px) and (min-width:901px){.orb{width:clamp(180px,20vw,380px);top:42%}}
@media(max-height:620px) and (max-width:900px){.orb{width:clamp(140px,22vw,230px);top:30%}}

.say{padding:clamp(110px,15vh,260px) var(--pad);display:flex;align-items:center;min-height:60svh}
.say .inner{max-width:var(--max);margin:0;width:100%}

/* ---------- numbers ---------- */
.nums{padding:clamp(90px,12vh,200px) var(--pad);border-block:1px solid var(--line)}
.nums .inner{max-width:var(--max);margin:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,6vw,130px)}
/* Label sits on the numeral's baseline. Centring it against a 170px figure
   left it floating in the middle of nothing. */
.nums .u{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(16px,1.9vw,40px);align-items:end}
.nums .n{font-family:var(--nfont);font-weight:700;font-size:clamp(64px,7.6vw,176px);
  line-height:.82;letter-spacing:-.045em;white-space:nowrap;font-variant-numeric:tabular-nums}
.nums .n .sm{font-size:.3em;color:var(--fg3);letter-spacing:0;padding:0 .16em}
.nums .l{color:var(--fg2);font-size:clamp(17px,1.15vw,24px);line-height:1.45;
  max-width:30ch;padding-bottom:clamp(6px,.6vw,14px)}
@media(max-width:1000px){.nums .inner{grid-template-columns:1fr;gap:clamp(44px,6vw,70px)}}
@media(max-width:560px){.nums .u{grid-template-columns:1fr;gap:10px;align-items:start}
  .nums .l{padding-bottom:0}}

/* ---------- work ---------- */
.work{padding:clamp(90px,12vh,200px) var(--pad)}
.work .inner,.chg{max-width:var(--max);margin:0}
.piece{margin-bottom:clamp(38px,5vw,100px)}
.piece:last-child{margin-bottom:0}
.tw{perspective:1200px}
.frame{border:1px solid var(--line);border-radius:clamp(12px,1vw,20px);overflow:hidden;background:#fff;
  transition:border-color .5s ease,box-shadow .5s ease,transform .45s cubic-bezier(.16,1,.3,1);
  transform-style:preserve-3d;will-change:transform}
.frame.dk{background:var(--bg2)}
.tw:hover .frame{border-color:var(--line2);box-shadow:0 34px 80px rgba(0,0,0,.55)}
.cap{margin-top:clamp(14px,1.1vw,22px);font-size:clamp(17px,1.05vw,22px);color:var(--fg2);
  max-width:58ch;line-height:1.55}
.cap b{color:var(--fg);font-weight:600}
/* a caption used as a lead-in above the thing it describes */
.cap.lead{margin-top:0;margin-bottom:clamp(16px,1.3vw,26px);max-width:64ch}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,48px);align-items:start}
@media(max-width:900px){.duo{grid-template-columns:1fr}}
/* Two by two, not four across. At four across each sheet was too small to
   read the swatches or the type names, which is the whole point of them. */
.marks{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.5vw,28px);
  max-width:1180px}
.marks .frame{display:grid;place-items:center;padding:clamp(22px,2.4vw,48px)}
.marks img{width:min(92%,520px);height:auto;max-height:none;object-fit:contain}
@media(max-width:620px){.marks{grid-template-columns:1fr}
  .marks img{width:min(94%,440px)}}

/* ---------- change rows ---------- */
/* what they told me  ->  what I changed */
.chg .row{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(16px,2.6vw,56px);
  padding:clamp(24px,2.6vw,48px) 0;border-top:1px solid var(--line);align-items:start}
.chg .row:last-child{border-bottom:1px solid var(--line)}
.chg .a{color:var(--fg3);font-size:clamp(17px,1.1vw,23px);line-height:1.5}
.chg .b{color:var(--fg);font-size:clamp(18px,1.35vw,28px);font-weight:500;line-height:1.42}
.chg .b em{font-style:normal;color:var(--cyan)}
.chg .ar{width:clamp(26px,2.6vw,50px);color:var(--cyan);margin-top:.5em;opacity:.85}
.chg .ar svg{width:100%;height:auto;display:block}
@media(max-width:820px){
  .chg .row{grid-template-columns:auto 1fr;gap:10px clamp(12px,3vw,20px);
    grid-template-areas:"said said" "arrow did"}
  .chg .a{grid-area:said}
  .chg .ar{grid-area:arrow;transform:rotate(90deg);width:22px;margin-top:.35em}
  .chg .b{grid-area:did}}

/* ---------- quote ---------- */
.qt{padding:clamp(90px,12vh,200px) var(--pad)}
.qt .inner{max-width:var(--max);margin:0}
/* The measure has to sit on the paragraph, not the blockquote. On the
   blockquote, ch resolved against the inherited body size of about 20px, so
   20ch came out at 268px while the text inside was rendering at 74px: one
   and a half words per line, ten lines tall. */
blockquote{margin:0;max-width:none}
blockquote p{font-family:var(--disp);font-size:clamp(28px,3.9vw,74px);line-height:1.16;
  letter-spacing:-.016em;color:var(--fg);max-width:24ch}
blockquote cite{display:block;margin-top:clamp(22px,1.8vw,38px);font-style:normal;
  font-size:clamp(16px,1.05vw,21px);color:var(--fg2);line-height:1.6}
blockquote cite b{color:var(--fg);font-weight:600}

/* ---------- ask ---------- */
.ask{padding:clamp(90px,12vh,200px) var(--pad) clamp(70px,8vh,140px);
  background:linear-gradient(180deg,var(--bg),var(--bg2))}
.ask .inner{max-width:var(--max);margin:0}
.spec{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:clamp(12px,1vw,20px);overflow:hidden;
  margin:clamp(34px,3.4vw,70px) 0}
.spec .c{background:var(--bg);padding:clamp(20px,1.8vw,38px)}
.spec .k{font-size:clamp(13px,.85vw,17px);letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg3);margin-bottom:clamp(10px,.9vw,18px)}
.spec .v{font-family:var(--disp);font-size:clamp(21px,1.75vw,36px);line-height:1.16}
.spec .v small{display:block;font-family:var(--body);font-size:clamp(15px,.95vw,20px);
  color:var(--fg2);margin-top:9px}
@media(max-width:900px){.spec{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.spec{grid-template-columns:1fr}}
.close{border-top:1px solid var(--line);padding-top:clamp(30px,2.6vw,54px);max-width:52ch}

/* ---------- slide collage ---------- */
/* The collage is a surface you can drag around, tiled so it never ends.
   These rules are also the no-JS fallback: a plain static grid. */
.slides{position:absolute;inset:-7% 0;overflow:hidden;will-change:transform;
  -webkit-user-select:none;user-select:none;touch-action:pan-y}
.slides .rotor{position:absolute;inset:-10%;transform:rotate(-7deg) scale(1.24);opacity:.5}
.slides .pan{position:absolute;inset:0}
.slides .grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(5,1fr);
  gap:clamp(10px,1vw,20px);align-content:start}
.slides .grid img{width:100%;border-radius:8px;border:1px solid rgba(255,255,255,.10)}
@media(max-width:900px){.slides .grid{grid-template-columns:repeat(3,1fr)}}
.dragtip{position:absolute;z-index:4;right:clamp(16px,2vw,44px);bottom:clamp(16px,2vw,44px);
  font-size:clamp(12px,.85vw,15px);letter-spacing:.15em;text-transform:uppercase;
  color:var(--fg2);padding:9px 15px;border-radius:99px;border:1px solid var(--line);
  background:rgba(17,21,31,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  opacity:0;transition:opacity .7s ease;pointer-events:none}
.slides.live .dragtip{opacity:1}
.slides.used .dragtip{opacity:0}
@media(hover:none),(pointer:coarse){.dragtip{display:none}}
.invert{mix-blend-mode:difference;color:#fff}

/* ---------- student work ---------- */
.gal{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,1.8vw,34px)}
.gal figure{margin:0;grid-column:span 4}
.gal figure.w4{grid-column:span 4}
.gal figure.w8{grid-column:span 8}
.gal figure.w12{grid-column:span 12}
/* Every submission gets the same card. The pieces range from a square logo
   to a tall webpage, so they are fitted rather than cropped: nothing is cut
   off a student's work, and the grid still reads as one even row. */
/* Dark card, not white. Fitting the work inside a card meant white letterbox
   bars around every piece, and a wall of those glared against the page. */
.gal .frame{aspect-ratio:7/5;display:grid;place-items:center;overflow:hidden;
  background:#14171D;border-color:rgba(255,255,255,.16)}
/* min-width/min-height:0 is required. As a grid item the image defaults to
   min-height:auto, refuses to shrink below its intrinsic height, and spills
   out of the card instead of fitting inside it. */
.gal img{width:100%;height:100%;min-width:0;min-height:0;object-fit:contain}
@media(max-width:560px){.gal .frame{aspect-ratio:4/3}}
/* Title, award and description each get their own line and their own job.
   Running a serif title straight into a coloured sans award on one line
   read as squashed and accidental. */
.gal figcaption{margin-top:clamp(13px,.95vw,19px);display:grid;
  gap:clamp(4px,.32vw,7px);align-content:start}
.gal .ttl{font-family:var(--disp);font-weight:400;color:var(--fg);
  font-size:clamp(22px,1.42vw,30px);line-height:1.1;letter-spacing:-.012em}
.gal .aw{font-family:var(--body);font-weight:600;color:var(--cyan);
  font-size:clamp(11px,.66vw,13px);letter-spacing:.15em;text-transform:uppercase;
  line-height:1.3}
.gal .dsc{color:var(--fg2);font-size:clamp(15px,.83vw,18px);line-height:1.5;
  max-width:42ch;margin-top:clamp(2px,.25vw,5px)}
.gal .dsc.solo{margin-top:0}
@media(max-width:1180px){.gal figure,.gal figure.w4,.gal figure.w8{grid-column:span 6}}
@media(max-width:720px){.gal figure,.gal figure.w4,.gal figure.w8{grid-column:span 12}}

/* ---------- footer ---------- */
footer{padding:clamp(56px,6vw,120px) var(--pad) clamp(52px,5vw,90px);
  border-top:1px solid var(--line);max-width:var(--max);margin:0;
  display:grid;grid-template-columns:auto 1fr auto;
  gap:clamp(12px,1.05vw,22px);align-items:center}
footer img{width:clamp(78px,6.6vw,138px);height:auto}
footer .a{font-family:var(--disp);font-size:clamp(23px,1.9vw,38px);color:var(--fg)}
footer .b{font-size:clamp(16px,1.05vw,21px);color:var(--fg2);margin-top:6px}
footer .c{font-size:clamp(16px,1.05vw,21px);color:var(--fg3);text-align:right;
  padding-left:clamp(24px,3vw,64px)}
@media(max-width:900px){footer{grid-template-columns:auto 1fr;gap:16px}
  footer .c{grid-column:1/-1;text-align:left;padding-left:0;margin-top:6px}}
/* On a phone the name and the two contact pills stack into a tall column,
   and a vertically centred logo beside them reads as adrift. Put it on
   its own row instead. */
/* On a phone the mark sat alone on its own row above a ragged left column,
   and the credit line dangled off the bottom unattached to anything. The
   wrapper div is dissolved with display:contents so its three children
   become grid items of the footer itself: that is the only way to pair the
   mark (a footer child) with the name (a grandchild) without duplicating
   the markup. A plain div carries no semantics, so nothing is lost from the
   accessibility tree. */
@media(max-width:560px){
  footer{grid-template-columns:auto 1fr;
    column-gap:clamp(12px,3.4vw,16px);row-gap:0;align-items:center}
  footer > div:not(.c){display:contents}
  footer img{grid-column:1;grid-row:1;width:clamp(46px,13vw,56px)}
  footer .a{grid-column:2;grid-row:1;font-size:clamp(24px,7vw,31px)}
  footer .b{grid-column:1/-1;grid-row:2;margin-top:clamp(15px,4vw,19px)}
  footer .lnks{grid-column:1/-1;grid-row:3}
  footer .c{grid-column:1/-1;grid-row:4;text-align:left;padding-left:0;
    margin-top:clamp(19px,5vw,25px);padding-top:clamp(15px,4vw,19px);
    border-top:1px solid var(--line)}
}

/* ---------- motion ---------- */
/* Kept brisk on purpose. Slow reveals plus the scroll glide meant a
   paragraph was still lighting up after you had scrolled past it. */
.js .wipe{clip-path:inset(0 0 100% 0);transform:translateY(12px);
  transition:clip-path .78s cubic-bezier(.16,1,.3,1),transform .78s cubic-bezier(.16,1,.3,1)}
.js .wipe.in{clip-path:inset(0 0 0 0);transform:none}
.js .fade{opacity:0;transform:translateY(22px);
  transition:opacity .66s cubic-bezier(.16,1,.3,1),transform .66s cubic-bezier(.16,1,.3,1)}
.js .fade.in{opacity:1;transform:none}
.js .lit w{opacity:.32;transition:opacity .34s ease}
.js .lit.in w{opacity:1}
w{display:inline}
[data-d="1"]{transition-delay:.09s}[data-d="2"]{transition-delay:.18s}[data-d="3"]{transition-delay:.27s}

/* ---------- narrow screens: tighten the vertical rhythm ----------
   The desktop section padding stacks to ~200px of empty space between
   blocks on a phone, which is a lot of scrolling through nothing. */
@media(max-width:760px){
  .say{padding-block:clamp(66px,9vh,110px);min-height:auto}
  .nums{padding-block:clamp(58px,8vh,96px)}
  .work,.qt{padding-block:clamp(62px,8.5vh,104px)}
  .ask{padding-top:clamp(62px,8.5vh,104px);padding-bottom:clamp(54px,7vh,88px)}
  .piece{margin-bottom:clamp(34px,7vw,56px)}
  footer{padding-block:clamp(48px,7vw,76px)}
}
/* Short landscape windows: stop full-height scenes eating the whole screen
   with padding when there is very little height to spend. */
@media(max-height:600px){
  .scene .txt{padding-bottom:clamp(28px,5vh,56px)}
  .say{padding-block:clamp(56px,10vh,110px);min-height:auto}
}

@media(prefers-reduced-motion:reduce){
  .wipe,.fade,.lit w,.orb img,.scene .bg,.slides{
    opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  /* the mark keeps its centring transform, it just stops floating */
  .orb{animation:none!important}
  .dot,.ring{display:none}
  html,body,*{cursor:auto!important}
}


/* read-the-letter call to action, under the recommendation quote */
/* Join buttons. The printed poster and handout point students at this domain, so the
   way in has to be visible in the hero and again in the start-here block. */
/* Instrument Serif has no foot on the digit 1: 'A111' reads as 'Alll'. Numerals inside any
   serif display line are wrapped in .nm and set in Archivo instead. */
.nm{font-family:var(--nfont);font-weight:600;font-size:.9em;letter-spacing:-.015em}

.cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:clamp(20px,2.4vw,34px)}
.go{display:inline-flex;align-items:center;gap:12px;padding:clamp(13px,1.05vw,19px) clamp(24px,2vw,38px);
  border-radius:999px;background:var(--grad);color:#07080B;font-weight:600;
  font-size:clamp(16px,1.05vw,21px);letter-spacing:-.01em;text-decoration:none;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),filter .25s ease}
.go:hover{transform:translateY(-2px);filter:brightness(1.08)}
.go .ar{line-height:1;transition:transform .25s ease}
.go:hover .ar{transform:translateX(4px)}
.alt{display:inline-flex;align-items:center;padding:clamp(13px,1.05vw,19px) clamp(22px,1.8vw,34px);
  border-radius:999px;border:1px solid var(--line2);color:var(--fg);text-decoration:none;
  font-size:clamp(16px,1.05vw,21px);transition:background .25s ease,border-color .25s ease}
.alt:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}
.joinrow{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,1.6vw,28px);
  margin-top:clamp(22px,2.4vw,36px)}
.joinrow .rem{display:inline-flex;align-items:baseline;gap:12px;color:var(--fg2)}
.joinrow .rem span{font-size:clamp(13px,.85vw,17px);letter-spacing:.16em;text-transform:uppercase;color:var(--fg3)}
.joinrow .rem b{font-family:var(--disp);font-weight:400;font-size:clamp(21px,1.6vw,32px);color:var(--fg)}
@media(max-width:520px){.cta .go,.cta .alt,.joinrow .go{width:100%;justify-content:center}}
.go:focus-visible,.alt:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}

.readltr{display:inline-flex;align-items:center;gap:12px;margin-top:clamp(20px,2.2vw,30px);
  padding:clamp(13px,1.3vw,17px) clamp(20px,2vw,26px);border-radius:999px;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.045);
  color:var(--fg);text-decoration:none;font-size:clamp(15px,1.5vw,18px);
  font-weight:500;line-height:1.2;transition:border-color .25s ease,background .25s ease}
.readltr:hover{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.10)}
.readltr .ar{font-size:1.15em;line-height:1;transition:transform .25s ease}
.readltr:hover .ar{transform:translateX(4px)}
.readltr b{font-weight:600}


/* ---------- footer contact links ---------- */
.lnks{display:flex;flex-wrap:wrap;gap:clamp(10px,1.1vw,18px);margin-top:clamp(13px,1.1vw,20px)}
.lnks a{display:inline-flex;align-items:center;gap:8px;
  padding:clamp(8px,.75vw,11px) clamp(13px,1.15vw,17px);border-radius:999px;
  border:1px solid rgba(255,255,255,.19);background:rgba(255,255,255,.04);
  color:var(--fg2);text-decoration:none;font-size:clamp(14px,.92vw,17px);
  font-weight:500;line-height:1.2;
  transition:border-color .25s ease,background .25s ease,color .25s ease}
.lnks a:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.09);color:var(--fg)}
.lnks a:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.lnks svg{width:1.06em;height:1.06em;flex:none;opacity:.8}
.lnks a:hover svg{opacity:1}
@media(max-width:420px){.lnks a{font-size:13.5px}}

/* ---------- copy deterrent ----------
   Friction, not protection. Anything the browser draws can still be captured
   with a screenshot, View Source or DevTools, and nothing here pretends
   otherwise. What it removes is the easy route: long press to save on iOS,
   right click to save, drag an image out to the desktop, and drag select a
   paragraph to lift the text.

   None of it reaches the accessibility tree, so screen readers read the page
   exactly as before. Scrolling, Ctrl+F, keyboard focus and every link still
   work, and focus rings are left visible on purpose. */
html{-webkit-touch-callout:none}
body,body *{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
img{-webkit-user-drag:none;pointer-events:none}
/* The hover and drag handlers all live on wrappers (.tw, #slides), never on
   the images themselves, so switching off image pointer events costs nothing.
   Verified against every :hover rule and every listener in the page. */

/* ---------- print sheet ----------
   The screen page is a dark full-bleed scrolling story. Printed as is it is
   dozens of black pages, and print to PDF is also the easiest way to walk off
   with the whole thing. Both problems have the same fix: throw the page away
   at print time and substitute one clean summary sheet that is genuinely
   useful to hand someone. */
#printcard{display:none}
@media print{
  html,body{background:#fff!important;color:#14171D!important;
    height:auto!important;min-height:0!important;overflow:visible!important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  body>*{display:none!important}
  #printcard{display:block!important;position:static!important;
    font-family:"Instrument Sans",system-ui,-apple-system,sans-serif;
    font-size:10.5pt;line-height:1.5;color:#14171D;padding:0;margin:0}
  #printcard a{color:inherit;text-decoration:none}

  .pc-head{display:flex;align-items:center;gap:14pt;
    padding-bottom:10pt;border-bottom:2.5pt solid #14171D;margin-bottom:14pt}
  .pc-head img{width:46pt;height:auto;display:block}
  .pc-ttl{font-family:"Instrument Serif",Georgia,serif;font-size:25pt;line-height:1.05;
    letter-spacing:-.01em}
  .pc-sub{font-size:9.5pt;letter-spacing:.13em;text-transform:uppercase;
    color:#5B6577;margin-top:4pt}

  /* The screen sheet paints every p in --fg2 (a pale grey for a black page).
     That rule is an element selector and beats colour inherited from
     #printcard, so the print card has to state its own colour explicitly.
     Same trap for strong, which is pure white on screen and would print as
     nothing at all. */
  #printcard p,#printcard blockquote,#printcard td,#printcard th{color:#14171D}
  #printcard b,#printcard strong{color:inherit;font-weight:600}
  .pc-lead{font-size:11.5pt;line-height:1.55;margin:0 0 15pt;max-width:80ch;
    color:#14171D}
  .pc-lead b{font-weight:600}

  .pc-nums{width:100%;border-collapse:collapse;margin:0 0 15pt;
    border-top:.75pt solid #C9CEDA;border-bottom:.75pt solid #C9CEDA}
  .pc-nums td{padding:10pt 12pt 10pt 0;vertical-align:top;width:25%;
    border-right:.75pt solid #E4E7EE}
  .pc-nums td:last-child{border-right:0;padding-right:0}
  .pc-nums td+td{padding-left:12pt}
  .pc-nums b{display:block;font-family:"Archivo",system-ui,sans-serif;
    font-weight:800;font-size:23pt;line-height:1;letter-spacing:-.03em}
  .pc-nums span{display:block;font-size:8.5pt;line-height:1.35;color:#5B6577!important;margin-top:5pt}

  .pc-q{margin:0 0 15pt;padding-left:12pt;border-left:2.5pt solid #14171D;
    font-family:"Instrument Serif",Georgia,serif;font-size:14pt;line-height:1.35}
  .pc-q cite{display:block;font-family:"Instrument Sans",system-ui,sans-serif;
    font-style:normal;font-size:9pt;line-height:1.4;color:#5B6577!important;margin-top:7pt}

  .pc-spec{width:100%;border-collapse:collapse;margin:0 0 15pt}
  .pc-spec th{text-align:left;width:78pt;padding:6pt 12pt 6pt 0;vertical-align:top;
    font-size:8.5pt;letter-spacing:.13em;text-transform:uppercase;color:#5B6577!important;font-weight:600}
  .pc-spec td{padding:6pt 0;vertical-align:top;font-size:10.5pt}
  .pc-spec tr+tr th,.pc-spec tr+tr td{border-top:.75pt solid #E4E7EE}

  .pc-foot{display:flex;flex-wrap:wrap;gap:18pt;padding-top:10pt;
    border-top:2.5pt solid #14171D;font-size:9.5pt;color:#5B6577}

  @page{margin:14mm}
}

/* The three documents, gathered at the end. Kept outside .close so the pills
   are not squeezed into that block's 52ch measure. */
/* The three documents. Deliberately quiet: this is a reference list at the
   end of the page, not a call to action. Losing the pill border and fill and
   becoming hairline separated rows drops them out of the reading path, which
   is where they belong once the closing paragraph has said its piece. */
.docs{display:grid;grid-template-columns:1fr;gap:0;
  margin-top:clamp(26px,3vw,42px);align-self:start}
.docs .dk{font-size:clamp(12px,.8vw,15px);letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg3);margin-bottom:clamp(8px,.7vw,14px)}
/* The arrow sits right after its label rather than being pushed to the far
   edge. The hairline still runs the full width of the column, so the block
   keeps its right edge aligned with the spec grid above it, but no row has a
   lake of dead space in the middle of it. */
.docs .readltr{width:100%;margin:0;border:0;border-radius:0;background:none;
  justify-content:flex-start;gap:11px;padding:clamp(12px,.9vw,16px) 0;
  font-size:clamp(15px,.98vw,18px);font-weight:400;color:var(--fg2);
  border-top:1px solid var(--line);transition:color .25s ease}
.docs .readltr b{font-weight:600;color:var(--fg)}
.docs .readltr:hover{background:none;border-color:var(--line);color:var(--fg)}
.docs .readltr .ar{font-size:1em;opacity:.45;
  transition:opacity .25s ease,transform .25s ease}
.docs .readltr:hover .ar{opacity:1;transform:translateX(4px)}

/* Wide screens: the closing paragraph is capped at 52ch, which leaves the
   whole right half of the section empty. The documents move into it, their
   hairline aligned with the rule above the closing text. */
@media(min-width:900px){
  .ask .inner{display:grid;grid-template-columns:minmax(0,52ch) minmax(0,1fr);
    column-gap:clamp(44px,6vw,120px);align-items:start}
  .ask .inner > h2,.ask .inner > .spec,.ask .inner > .joinrow{grid-column:1/-1}
  .close{grid-column:1}
  .docs{grid-column:2;margin-top:0;padding-top:clamp(30px,2.6vw,54px);
    border-top:1px solid var(--line)}
  .docs .readltr:first-of-type{border-top:0}
}