/* akhilaryan.com — "The Plus". Archivo (condensed display) + Geist (text); the sum in Fraunces + Caveat. */
:root{--acc:#FF3D00;--bone:#EEE9DF;--ink:#111111;--mute:#5b5852;--paper:#F3EFE6}
@property --hov{syntax:'<number>';inherits:true;initial-value:0}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bone);color:var(--ink);font-family:'Geist',system-ui,sans-serif;overflow-x:clip;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.pg{position:relative;min-height:100vh;--hov:0}
.mono{font-family:'Geist',system-ui,sans-serif;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.dsp{font-family:'Archivo',system-ui,sans-serif;font-weight:500;font-variation-settings:'wdth' 76;text-transform:uppercase;letter-spacing:-.01em}
.js .ld{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.16,1,.3,1) var(--d,0s),transform 1.05s cubic-bezier(.16,1,.3,1) var(--d,0s)}
.js .pg.in .ld{opacity:1;transform:none}

/* ---------- cursor (fine pointers only): a small + ---------- */
.cur{display:none}
@media (hover:hover) and (pointer:fine){
  .pg,.pg a{cursor:none}
  .cur{display:flex;position:fixed;left:0;top:0;width:18px;height:18px;border-radius:50%;pointer-events:none;z-index:99;opacity:0;align-items:center;justify-content:center;mix-blend-mode:difference;transition:width .55s cubic-bezier(.34,1.56,.64,1),height .55s cubic-bezier(.34,1.56,.64,1),background .3s}
  .cur i{position:absolute;left:50%;top:50%;width:18px;height:2px;background:#fff;transform:translate(-50%,-50%) rotate(var(--r,0deg));transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .3s,width .4s,height .4s}
  .cur i+i{--r:90deg}
  .cur span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:'Geist',sans-serif;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:#fff;opacity:0;white-space:nowrap;transition:opacity .25s .15s}
  .pg.hasTk .plus{pointer-events:none}
  .pg[data-curmode="in"] .cur{width:96px;height:96px;background:var(--acc);mix-blend-mode:normal}
  .pg[data-curmode="in"] .cur i{opacity:0}
  .pg[data-curmode="in"] .cur .c-in{opacity:1}
  .pg[data-curmode="link"] .cur{width:40px;height:40px;border:1.5px solid #fff}
  .pg[data-curmode="link"] .cur i{width:8px}
  .pg[data-curmode="x"] .cur i{--r:45deg}
  .pg[data-curmode="x"] .cur i+i{--r:135deg}
}

/* ---------- ticker: appears once you're past the hero ---------- */
.tk{position:fixed;top:0;left:0;right:0;height:32px;z-index:45;overflow:hidden;display:flex;align-items:center;background:var(--ink);color:var(--bone);transform:translateY(-100%);transition:transform .8s cubic-bezier(.16,1,.3,1),background .35s,color .35s}
.pg.dk .tk{background:var(--bone);color:var(--ink)}
.pg.hasTk .tk{transform:none}
.tk:hover,.pg.dk .tk:hover{background:var(--acc);color:#fff}
.tk .mq{display:flex;white-space:nowrap;animation:mq 26s linear infinite;will-change:transform}
.tk:hover .mq{animation-duration:8s}
.tk .mq span{padding:0 20px;font:500 13px/1 'Geist',sans-serif;letter-spacing:.06em}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- header ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:24px 40px;color:var(--ink);transition:color .5s cubic-bezier(.7,0,.2,1),transform .7s cubic-bezier(.16,1,.3,1)}
.pg.dk .top{color:var(--bone)}
.pg.hasTk .top{transform:translateY(32px)}
.pg.hid .top{transform:translateY(-120%)}
.top .nm{font:500 16px/1 'Geist',sans-serif;letter-spacing:-.01em}
.top .mid{opacity:.7}
/* Nothing leaves this page for /a-plus before the plus has been gone through. The
   ticker was already gated on .hasTk; the header's a+ button now arrives with it. */
.top .pill{opacity:0;transform:translateY(-6px) scale(.96);pointer-events:none;transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
.pg.hasTk .top .pill{opacity:1;transform:none;pointer-events:auto}
/* Without JS there is no animation to gate on and .hasTk never arrives, so the two
   exits are simply open. Additive, so the cascade above is untouched when JS runs. */
html:not(.js) .tk{transform:none}
html:not(.js) .top .pill{opacity:1;transform:none;pointer-events:auto}
.pill{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 20px 0 22px;border-radius:999px;background:var(--acc);color:#fff;font:500 16px/1 'Geist',sans-serif;letter-spacing:0;transition:transform .55s cubic-bezier(.34,1.56,.64,1),box-shadow .4s}
.pill:hover{transform:scale(1.07) rotate(-3deg);box-shadow:0 18px 40px -14px rgba(255,61,0,.7)}
.pill .ar{display:inline-block;transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.pill:hover .ar{transform:translate(3px,-3px)}

/* ---------- hero: the plus ---------- */
.hero{height:300vh;position:relative;--p:0;--s:1;--ik:0;--rv:0;--rot:0deg}
.scene{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--bone)}
.hline{position:absolute;left:40px;top:104px;transform:translate3d(0,calc(var(--p)*-260px),0);opacity:calc(1 - var(--p)*3)}
.hline p{margin:0;color:var(--mute)}
.hname{position:absolute;left:40px;bottom:44px;max-width:440px;transform:translate3d(calc(var(--p)*-140px),calc(var(--p)*-70px),0);opacity:calc(1 - var(--p)*2.4)}
.hname h1{margin:0 0 10px;font:500 28px/1.05 'Geist',sans-serif;letter-spacing:-.02em}
.hname p{margin:0;font:400 17px/1.45 'Geist',sans-serif;color:var(--mute);max-width:380px;text-wrap:balance}
.hhint{position:absolute;right:40px;bottom:44px;text-align:right;transform:translate3d(calc(var(--p)*200px),calc(var(--p)*-30px),0);opacity:calc(1 - var(--p)*2.8)}
.hhint p{margin:0;color:var(--mute)}
.hhint .arrow{display:block;font:300 34px/1 'Geist',sans-serif;margin-top:10px;animation:nudge 1.6s cubic-bezier(.45,0,.55,1) infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
.plbl{position:absolute;left:50%;top:calc(50% + 34vmin);transform:translateX(-50%) translateY(calc(var(--p) * 80px));opacity:calc(1 - var(--p) * 6);white-space:nowrap;color:var(--mute);text-align:center;pointer-events:none}
.plbl .ld{display:inline-block}
.plbl b{color:var(--acc);font-weight:500}
.plus{position:absolute;inset:-20%;display:block;background:var(--acc);outline:none;transform:rotate(var(--rot));
  --a:calc(6.5vmin * var(--s) * (1 + var(--hov) * .18));
  --l:calc(30vmin * var(--s) * (1 + var(--hov) * .05));
  clip-path:polygon(
    calc(50% - var(--a)) calc(50% - var(--l)),calc(50% + var(--a)) calc(50% - var(--l)),calc(50% + var(--a)) calc(50% - var(--a)),
    calc(50% + var(--l)) calc(50% - var(--a)),calc(50% + var(--l)) calc(50% + var(--a)),calc(50% + var(--a)) calc(50% + var(--a)),
    calc(50% + var(--a)) calc(50% + var(--l)),calc(50% - var(--a)) calc(50% + var(--l)),calc(50% - var(--a)) calc(50% + var(--a)),
    calc(50% - var(--l)) calc(50% + var(--a)),calc(50% - var(--l)) calc(50% - var(--a)),calc(50% - var(--a)) calc(50% - var(--a)));
  transition:--hov .7s cubic-bezier(.34,1.56,.64,1)}
.plus:hover,.plus:focus-visible{--hov:1}
.plus:focus-visible{outline:4px solid var(--ink);outline-offset:-10px}
a:focus-visible,button:focus-visible{outline:3px solid var(--acc);outline-offset:3px;border-radius:2px}
.hero.far .plus{--hov:0}
.plus .ink{position:absolute;inset:0;background:var(--ink);opacity:var(--ik)}
.plus:hover .ink{opacity:calc(var(--ik) + var(--hov) * .92)}
.plus .rev{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--bone);opacity:var(--rv);transform:rotate(calc(-1 * var(--rot))) translateY(calc((1 - var(--rv)) * 80px)) scale(calc(.9 + var(--rv) * .1))}
.rev .a{font:500 22vw/.85 'Archivo',sans-serif;letter-spacing:-.05em;font-variation-settings:'wdth' 80;margin:0}
.rev .a b{color:var(--acc);font-weight:500}
.rev p{margin:28px 0 0;font:400 26px/1.3 'Geist',sans-serif;max-width:none;white-space:nowrap;letter-spacing:-.015em;transform:translateY(calc((1 - var(--rv)) * 40px))}
.rev .go{margin-top:44px;display:inline-flex;align-items:center;gap:12px;color:var(--bone);border-bottom:1.5px solid var(--acc);padding-bottom:6px;transform:translateY(calc((1 - var(--rv)) * 60px))}

/* ---------- the sum: pencil on paper ---------- */
.sum{height:200vh;position:relative;--p:0;--es:1;background:var(--paper);color:var(--ink)}
.sum .scene{background:var(--paper);display:flex;align-items:center;justify-content:center}
.sk{position:absolute;left:40px;top:120px;margin:0;color:var(--mute);--k:0;opacity:var(--k)}
.sk b,.k b{color:var(--acc);font-weight:500;margin-right:10px}
.eq{position:relative;display:flex;align-items:baseline;gap:.28em;white-space:nowrap;font:italic 600 148px/1 'Fraunces',Georgia,serif;font-variation-settings:'opsz' 144,'SOFT' 60;letter-spacing:-.03em;transform:scale(var(--es));transform-origin:center;margin-top:-70px}
.brk{display:none}
.tm{position:relative;display:inline-block;--k:0}
.w{display:inline-block;clip-path:inset(-20% calc((1 - var(--k)) * 100%) -20% 0);transform:translateY(calc((1 - var(--k)) * .12em))}
.op{--k:0;display:inline-block;color:var(--acc);font-style:normal;font-weight:500;font-size:.75em;position:relative;top:-.06em;transform:scale(var(--k)) rotate(calc((1 - var(--k)) * -90deg))}
.hand{font-family:'Caveat',cursive;font-weight:700;font-style:normal;letter-spacing:0}
.mk{--k:0;position:absolute;overflow:visible;fill:none;stroke:var(--acc);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.mk path{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--k));opacity:clamp(0,calc(var(--k) * 30),1);transition:stroke-width .3s}
.mk.m{display:none}
.lbl{--k:0;position:absolute;white-space:nowrap;opacity:var(--k);transform:translateY(calc((1 - var(--k)) * 10px)) rotate(var(--r,-4deg));pointer-events:none}
.roll{--k:0;position:absolute;left:6px;top:calc(100% + 4px);height:1.2em;overflow:hidden;font:700 36px/1.2 'Caveat',cursive;letter-spacing:0;color:var(--mute);font-style:normal;opacity:var(--k);pointer-events:none}
.rl{display:flex;flex-direction:column;animation:roll 16s cubic-bezier(.7,0,.2,1) infinite}
.rl i{display:block;height:1.2em;font-style:normal}
@keyframes roll{0%,18%{transform:translateY(0)}25%,43%{transform:translateY(-1.2em)}50%,68%{transform:translateY(-2.4em)}75%,93%{transform:translateY(-3.6em)}100%{transform:translateY(-4.8em)}}
.ul{left:-2%;top:90%;width:104%;height:22px}
.la{left:-30px;top:calc(100% + 40px);font:700 50px/1 'Caveat',cursive;color:var(--acc);--r:-6deg}
.ara{left:34px;top:calc(100% + 2px);width:72px;height:44px}
.circ{left:-14%;top:-16%;width:128%;height:132%}
.circ2{left:-18%;top:-22%;width:136%;height:144%;stroke-width:2.5;opacity:.85}
.circ2 path{stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset .9s cubic-bezier(.7,0,.3,1) .1s,opacity .2s .1s,stroke-width .3s}
.sum.open .circ2 path{stroke-dashoffset:0;opacity:1}
.lb{right:-112px;top:-66px;font:700 58px/1 'Caveat',cursive;color:var(--acc);--r:-8deg}
.arb{right:-44px;top:-30px;width:72px;height:43px}
.me .w{transition:color .35s}
.me:hover .w,.me:focus-visible .w{color:var(--acc)}
.me:hover .circ path{stroke-width:4.5}
.res{position:absolute;right:-.15em;top:1.22em;display:flex;align-items:center;gap:18px}
.res .arc{position:static;width:84px;height:50px;flex:0 0 auto}
.res .arc path{stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset .9s cubic-bezier(.7,0,.3,1),opacity .2s}
.sum.open .res .arc path{stroke-dashoffset:0;opacity:1}
.ans{font:700 110px/1 'Caveat',cursive;color:#3a3630;font-style:normal;clip-path:inset(-15% 100% -15% 0);transition:clip-path 1s cubic-bezier(.7,0,.3,1) .35s,color .35s}
.sum.open .ans{clip-path:inset(-15% -6% -15% 0)}
.me:hover ~ .res .ans{color:var(--acc)}
.what,.who{position:absolute;bottom:44px;margin:0;--k:0;opacity:var(--k);transform:translateY(calc((1 - var(--k)) * 16px));font:400 17px/1.55 'Geist',sans-serif}
.what{left:40px;max-width:520px;color:#3a3630;text-wrap:balance}
.what p{margin:0}
/* The page explains a+ here and then, until now, offered nothing to click. This is the only
   labelled route to the studio between the hero and the footer. */
.seeap{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:11px 20px;border-radius:999px;background:var(--acc);color:#fff;font:500 15px/1 'Geist',sans-serif;transition:transform .5s cubic-bezier(.34,1.56,.64,1),box-shadow .4s}
.seeap:hover{transform:scale(1.05) rotate(-2deg);box-shadow:0 14px 32px -12px rgba(255,61,0,.75)}
.what strong{color:var(--ink);font-weight:500}
.what b{color:var(--acc);font-weight:500}
.who{right:40px;max-width:400px;text-align:right;color:var(--mute)}
.who .rk{vertical-align:-.42em;color:var(--acc);margin-left:.1em;transition:transform .6s cubic-bezier(.34,1.56,.64,1)}
.who:hover .rk{transform:translate(3px,-3px)}

/* ---------- the wall (past) ---------- */
.past{--rule:rgba(27,28,30,.16);background:var(--bone);color:var(--ink);padding:180px 40px 160px;overflow:clip;position:relative}
.past .k{margin:0 0 24px;color:var(--mute)}
.yrs{display:flex;align-items:center;gap:56px;margin:0 0 150px}
.yrs .big{flex:0 0 auto;font:400 560px/.78 'Archivo',sans-serif;letter-spacing:-.05em;font-variation-settings:'wdth' 68;color:transparent;-webkit-text-stroke:1.5px var(--acc);margin-left:-10px;user-select:none}
.yrs h2{margin:0;font:500 56px/.98 'Archivo',sans-serif;letter-spacing:-.01em;text-transform:uppercase;max-width:620px;font-variation-settings:'wdth' 74;text-wrap:balance}
.yrs h2 small{display:block;margin-top:24px;font:400 19px/1.55 'Geist',sans-serif;letter-spacing:0;text-transform:none;color:var(--mute);max-width:520px;font-variation-settings:normal}
.wall{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
/* A ledger: every name at one size, so the two that didn't work carry the same weight
   as the two that did. Columns are name / figure / outcome, aligned on the baseline. */
.wall li{display:grid;grid-template-columns:minmax(0,max(40%,360px)) minmax(0,1fr) max-content;align-items:baseline;gap:0 44px;padding:30px 0 34px;border-bottom:1px solid var(--rule);--k:1;transition:padding-left .7s cubic-bezier(.16,1,.3,1)}
.wall li:hover{padding-left:18px}
.wall .n{position:relative;display:inline-block;justify-self:start;font:500 clamp(42px,5.6vw,84px)/.88 'Archivo',sans-serif;text-transform:uppercase;letter-spacing:-.02em;white-space:nowrap;font-variation-settings:'wdth' 76;transition:font-variation-settings .7s cubic-bezier(.16,1,.3,1),color .4s}
.wall li:hover .n{font-variation-settings:'wdth' 92;color:var(--acc)}
.wall .o{color:var(--mute);justify-self:start;font-size:13px;line-height:1.7;max-width:62ch;transition:color .4s}
.wall li:hover .o{color:var(--ink)}
.wall .fig{justify-self:end}
.wall .fig b{font:500 clamp(28px,3vw,46px)/.9 'Archivo',sans-serif;letter-spacing:-.02em;font-variation-settings:'wdth' 78;color:var(--acc);white-space:nowrap;transition:color .4s}
.wall li.win:hover .n{color:var(--ink)}
.wall li.win:hover .fig b{color:var(--ink)}
.wall li.x{--k:clamp(0,calc((var(--p) - .3) / .22),1)}
.wall li.x .n{color:#8A857C;font-weight:400}
.wall li.x .n::after{content:"";position:absolute;left:-.04em;right:-.04em;top:50%;height:.07em;border-radius:2px;background:var(--acc);transform:scaleX(var(--k));transform-origin:left}
.wall li.x:hover .n{color:var(--ink)}
.allco{display:inline-block;margin:56px 0 0;font:400 17px/1.4 'Geist',sans-serif;color:var(--mute);border-bottom:1.5px solid var(--acc);padding-bottom:5px;transition:color .3s}
.allco:hover{color:var(--ink)}
.motto{margin:110px auto 0;text-align:center;font:400 30px/1.4 'Geist',sans-serif;letter-spacing:-.015em;max-width:760px;text-wrap:balance}
.motto b{font-weight:400;color:var(--acc)}

/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--bone);padding:160px 40px 40px;overflow:clip}
.fplus{display:flex;align-items:center;gap:56px;margin-bottom:160px}
.fplus .g{display:inline-flex;align-items:baseline;font:400 240px/.75 'Archivo',sans-serif;letter-spacing:-.04em;font-variation-settings:'wdth' 80}
.fplus .g .a{display:inline-block;width:auto;max-width:0;opacity:0;overflow:hidden;color:var(--bone);transform:translateX(50px);transition:max-width .8s cubic-bezier(.34,1.56,.64,1),opacity .4s,transform .8s cubic-bezier(.34,1.56,.64,1)}
.fplus .g .p{display:inline-block;color:transparent;-webkit-text-stroke:1.5px var(--bone);transition:color .5s,-webkit-text-stroke .5s}
.fplus:hover .g .a{max-width:.45em;opacity:1;transform:none}
.fplus:hover .g .p{color:var(--acc);-webkit-text-stroke:1.5px var(--acc)}
.fplus .t{font:400 32px/1.25 'Geist',sans-serif;letter-spacing:-.02em;max-width:520px;text-wrap:balance}
.fplus .t small{display:block;margin-top:18px;color:#9a968e;font:400 15px/1.4 'Geist',sans-serif;letter-spacing:0}
.fplus .t u{text-decoration:none;border-bottom:1.5px solid var(--acc);transition:background .3s,color .3s}
.fplus:hover .t u{background:var(--acc);color:#fff}
.frow{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(238,233,223,.18);padding-top:28px;color:#9a968e}
.frow a{position:relative;color:var(--bone)}
.frow a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1.5px;background:var(--acc);transform:scaleX(0);transform-origin:right;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.frow a:hover::after{transform:scaleX(1);transform-origin:left}
.frow .l{display:flex;gap:32px}

/* ======================= MOBILE ======================= */
/* Narrower than this the three ledger columns stop fitting: first the figure column
   tightens, then it folds under the outcome so the name keeps a column of its own. */
@media (max-width:1100px){
  .wall li{grid-template-columns:minmax(0,max(42%,300px)) minmax(0,1fr) max-content;gap:0 32px}
  .yrs{gap:36px}
  .yrs .big{font-size:40vw}
}
@media (max-width:900px){
  .wall li{grid-template-columns:minmax(0,1fr) max-content;gap:0 32px;padding:26px 0 30px}
  .wall .n{grid-column:1;grid-row:1}
  .wall .fig{grid-column:2;grid-row:1}
  .wall .o{grid-column:1/-1;grid-row:2;margin-top:12px;max-width:44ch}
}
@media (max-width:767px){
  .tk{top:auto;bottom:0;height:48px;background:var(--acc);color:#fff;transform:translateY(100%)}
  .pg.dk .tk{background:var(--acc);color:#fff}
  .tk:active{background:var(--ink)}
  .tk .mq{animation-duration:18s}
  .tk .mq span{padding:0 16px;font-size:13px}
  .top{padding:16px 20px}
  .top .mid{display:none}
  .pg.hasTk .top{transform:none}
  .pg.hid .top{transform:translateY(-120%)}
  .top .nm{font-size:15px}
  .pill{height:38px;padding:0 16px 0 18px;font-size:15px;gap:8px}
  .pill:active{transform:scale(.94)}
  /* hero */
  .hero{height:220vh}
  .hname{left:20px;right:20px;top:84px;bottom:auto;max-width:none;transform:translate3d(0,calc(var(--p)*-160px),0);opacity:calc(1 - var(--p)*2.6)}
  .hname h1{font-size:24px;margin-bottom:8px}
  .hname p{font-size:15px;max-width:300px}
  .hline{top:auto;bottom:120px;left:20px;transform:translate3d(calc(var(--p)*-120px),0,0)}
  .hhint{left:0;right:0;bottom:28px;text-align:center;transform:translate3d(0,calc(var(--p)*120px),0);opacity:calc(1 - var(--p)*3)}
  .hhint .arrow{font-size:28px;margin-top:6px}
  .plbl{top:calc(50% + 38vw)}
  .plus{--a:calc(7vw * var(--s));--l:calc(34vw * var(--s))}
  .plus:active{--a:calc(7.8vw * var(--s))}
  .plus .rev{padding:0 24px}
  .rev .a{font-size:46vw}
  .rev p{margin-top:22px;font-size:18px;line-height:1.35;white-space:normal;max-width:320px;text-wrap:balance;letter-spacing:-.01em}
  .rev .go{margin-top:30px}
  /* the sum */
  .sum{height:auto}
  .sum .scene{position:relative;height:auto;min-height:0;flex-direction:column;justify-content:flex-start;align-items:stretch;padding:110px 20px 90px}
  .sk{position:static;margin:0 0 44px;--k:1}
  .eq{flex-wrap:wrap;column-gap:.24em;row-gap:.95em;font-size:52px;margin-top:0;padding-top:0;transform:none;white-space:nowrap}
  .tm,.op{--k:1}
  .mk{--k:0}
  .mk path{transition:stroke-dashoffset 1s cubic-bezier(.7,0,.3,1) var(--md,0s),opacity .2s var(--md,0s)}
  .sum.go .mk{--k:1}
  .ul{--md:.05s}.ara{--md:.3s}.circ{--md:.15s}.arb{--md:.4s}
  .lbl{--k:0;transition:opacity .6s var(--md,.5s),transform .8s cubic-bezier(.16,1,.3,1) var(--md,.5s)}
  .sum.go .lbl{--k:1}
  .la{--md:.5s}.lb{--md:.6s}
  .roll{--k:0;transition:opacity .6s .25s}
  .sum.go .roll{--k:1}
  .brk{display:block;flex-basis:100%;height:0}
  .mk{stroke-width:2.5}
  .mk.d{display:none}
  .mk.m{display:block}
  .roll{left:3px;font-size:23px}
  .ul{height:8.5px}
  .la{left:34px;top:-56px;font-size:32px}
  .ara{left:56px;top:-28px;width:40px;height:24px}
  .lb{right:auto;left:-4px;top:calc(100% + 34px);font-size:34px;--r:-6deg}
  .arb{right:auto;left:36px;top:calc(100% + 4px);width:26px;height:30px}
  .me:active .w{color:var(--acc)}
  .res{position:static;flex-basis:auto;display:inline-flex;align-items:baseline;gap:0;margin:0 0 0 .12em}
  .res .arc{display:none}
  .ans{font-size:1.08em;line-height:1;transition-delay:.1s}
  .what,.who{position:static;max-width:none;text-align:left;font-size:17px;--k:1;opacity:1;transform:none}
  .what{margin-top:112px}
  .seeap{margin-top:14px;font-size:14px;padding:10px 18px}
  .allco{margin-top:34px;font-size:15px}
  .who{margin-top:18px;font-size:11px;line-height:1.8}
  /* the wall */
  .past{padding:110px 20px 100px}
  .past .k{margin-bottom:18px}
  .yrs{flex-direction:column;align-items:flex-start;gap:20px;margin:0 0 72px}
  .yrs .big{font-size:260px;margin-left:-6px}
  .yrs h2{font-size:30px;max-width:none}
  .yrs h2 small{font-size:15px;margin-top:14px}
  /* name and figure share the top line; the outcome runs underneath */
  .wall li{gap:0 20px;padding:24px 0 28px}
  .wall li:hover{padding-left:0}
  .wall .n{font-size:clamp(38px,10.8vw,58px)}
  .wall .fig b{font-size:30px}
  .wall .o{margin-top:10px;max-width:34ch}
  .motto{margin:72px 0 0;font-size:22px;text-align:left;max-width:none}
  /* footer */
  footer{padding:100px 20px 90px}
  .fplus{flex-direction:column;align-items:flex-start;gap:20px;margin-bottom:96px}
  .fplus .g{font-size:160px}
  .fplus:active .g .a{max-width:.45em;opacity:1;transform:none}
  .fplus:active .g .p{color:var(--acc);-webkit-text-stroke:2px var(--acc)}
  .fplus .t{font-size:24px;letter-spacing:-.01em}
  .fplus .t small{font-size:14px;margin-top:12px}
  .frow{flex-direction:column;align-items:flex-start;gap:18px}
  .frow .l{flex-direction:column;gap:6px}
  .frow a{display:inline-block;padding:6px 0}
}

/* ---------- reduced motion: the static version ---------- */
@media (prefers-reduced-motion:reduce){
  .cur{display:none!important}
  .pg,.pg a{cursor:auto}
  .ld{transition:none;opacity:1;transform:none}
  .hero{height:100vh}
  .hline,.hname,.hhint{transform:none!important;opacity:1!important}
  .plbl{transform:translateX(-50%)!important;opacity:1!important}
  .hhint .arrow{animation:none}
  .plus{transition:none;transform:none}
  .tk{transform:none}
  .top{transform:translateY(32px)!important}
  .tk .mq,.rl{animation:none}
  .sum{height:100vh}
  .sum [data-at]{--k:1!important}
  .circ2 path,.res .arc path,.ans{transition:none}
  .wall li.x{--k:1!important}
  .pill,.wall .n,.fplus .g .a,.fplus .g .p{transition:none}
  @media (max-width:767px){.top{transform:none!important}}
}