/* heymichaelrobinson.com */
:root{
  --paper:#f1f1ed; --ink:#121212; --mute:#6b6b66; --rule:rgba(18,18,18,.18);
  --card:#ffffff; --shadow:0 30px 60px -28px rgba(0,0,0,.28),0 8px 18px -10px rgba(0,0,0,.14);
  --display:'Archivo',ui-sans-serif,system-ui,sans-serif;
  --mono:'DM Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --c:var(--paper); --f:var(--ink);
  --ease:cubic-bezier(.2,.7,.2,1); --spring:cubic-bezier(.34,1.56,.64,1); --slow:cubic-bezier(.22,1,.36,1);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#111110; --ink:#efeee9; --mute:#9a9a93; --rule:rgba(239,238,233,.18); --card:#1b1b19; color-scheme:dark}}
:root[data-theme="dark"]{--paper:#111110; --ink:#efeee9; --mute:#9a9a93; --rule:rgba(239,238,233,.18); --card:#1b1b19; color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--display);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;
  transition:background-color .45s var(--ease),color .3s ease;overflow-x:clip}
body.flood{background:var(--c);color:var(--f);--mute:color-mix(in srgb,var(--f) 62%,var(--c));--rule:color-mix(in srgb,var(--f) 22%,transparent)}
a{color:inherit}
img,video{max-width:100%;display:block}
button{font:inherit;color:inherit}
.wrap{max-width:1320px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (min-width:760px){.wrap{padding-left:40px;padding-right:40px}}
.eyebrow{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--mute);margin:0 0 18px}
.big{margin:0;font-weight:850;font-variation-settings:"wdth" 125;text-transform:uppercase;letter-spacing:-.045em;line-height:.88;text-wrap:balance}
:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:4px}
.hint-touch{display:none}
@media (hover:none),(pointer:coarse){.hint-touch{display:inline}.hint-fine{display:none}}

/* scroll reveal (only when JS runs) */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal.in{opacity:1;transform:none}

/* top bar */
.bar{display:flex;justify-content:flex-end;align-items:center;gap:16px;padding-block:22px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;position:relative;z-index:5}
.bar nav{display:flex;gap:clamp(12px,2.4vw,24px)}
.bar a{text-decoration:none}
.bar a:hover{text-decoration:underline;text-underline-offset:4px}
.status{display:inline-flex;align-items:center;gap:8px}
.status i{width:8px;height:8px;border-radius:50%;background:#2fd36b;box-shadow:0 0 0 3px color-mix(in srgb,#2fd36b 25%,transparent);animation:live 2.4s ease-in-out infinite}
@keyframes live{50%{box-shadow:0 0 0 6px color-mix(in srgb,#2fd36b 0%,transparent)}}
@media (max-width:420px){.bar nav a.opt{display:none}}

/* hero */
.hero{position:relative;padding-block:clamp(28px,6vw,72px) clamp(36px,6vw,80px)}
.name{font-size:clamp(46px,11.2vw,145px)}
.name .line{display:block;margin-left:var(--sb-big,-.079em)}
.name .hey{display:flex;margin-left:var(--sb-hey,-.083em);align-items:center;gap:.22em;font-size:.34em;letter-spacing:-.02em;font-weight:700;margin-bottom:.12em;font-variation-settings:"wdth" 110}
/* hero photo: a taped print pinned top-right, tucked behind the end of the name */
.name{position:relative;z-index:1}
/* Archivo leaves .079em before straight-sided capitals (I, L, D...). Pull the first line flush with the eyebrow above it. */
#about-title{text-indent:-.079em}
.hero-print{position:absolute;z-index:0;top:var(--hp-top,clamp(18px,3.4vw,52px));right:var(--hp-right,clamp(16px,6vw,96px));width:var(--hp-w,clamp(124px,19vw,276px));
  aspect-ratio:4/5;background:#fff;padding:clamp(5px,.6vw,9px);border-radius:3px;
  box-shadow:0 40px 70px -34px rgba(0,0,0,.55),0 8px 20px -10px rgba(0,0,0,.3);transform:rotate(var(--hp-r,5deg));transition:transform .6s var(--spring)}
.hero-print .ph{display:block;width:100%;height:100%;overflow:hidden;border-radius:2px}
.hero-print img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.hero-print .tape{position:absolute;z-index:2;top:-12px;left:50%;width:44%;height:clamp(18px,2vw,30px);transform:translateX(-50%) rotate(-4deg);background:rgba(255,201,31,.82);mix-blend-mode:multiply;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.hero-print:hover,.hero-print:focus-visible{transform:rotate(1deg) scale(1.03)}
.js .hero-print{opacity:0;transform:translateY(-30px) rotate(14deg);transition:opacity .7s var(--ease) .35s,transform .9s var(--spring) .35s}
.js .hero.in .hero-print{opacity:1;transform:rotate(var(--hp-r,5deg))}
.js .hero.in .hero-print:hover,.js .hero.in .hero-print:focus-visible{transform:rotate(1deg) scale(1.03);transition-delay:0s}
/* phones: the whole photo, uncropped, on a smaller print */
@media (max-width:560px){.hero-print{--hp-top:0px;--hp-right:16px;--hp-w:22vw;--hp-r:6deg;aspect-ratio:938/1400;padding:4px}.hero-print img{object-position:50% 50%}.hero-print .tape{top:-8px;height:14px}}
.hero-meta{display:grid;gap:20px;margin-top:clamp(24px,4vw,44px)}
@media (min-width:860px){.hero-meta{grid-template-columns:1.25fr 1fr;align-items:end}}
.pitch{margin:0;font-size:clamp(19px,2.1vw,26px);line-height:1.25;max-width:30ch;font-weight:500;letter-spacing:-.01em}
.creed{margin:0;font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--mute);max-width:46ch}
.now{display:block;margin-top:12px;font-family:var(--display);font-size:clamp(16px,1.5vw,19px);line-height:1.35;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.now-t{position:relative;z-index:0;padding:0 .18em;margin:0 -.18em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* A · marker: a yellow highlighter swipes in under the line */
.now .now-t{background:linear-gradient(100deg,transparent .2em,#ffc91f .25em,#ffc91f calc(100% - .2em),transparent) 0 82%/0% 62% no-repeat;transition:background-size 1.1s var(--ease) .9s}
.hero.in .now .now-t{background-size:100% 62%}
.js .hero .line,.js .hero .hey{opacity:0;transform:translateY(40%);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .hero.in .line,.js .hero.in .hey{opacity:1;transform:none}
.js .hero.in .line:nth-of-type(2){transition-delay:.08s}
.js .hero.in .line:nth-of-type(3){transition-delay:.16s}

/* work index */
.index-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-bottom:2px solid currentColor;padding-bottom:10px}
.index-head h2{margin:0;font-weight:800;font-variation-settings:"wdth" 125;font-size:clamp(22px,3vw,34px);letter-spacing:-.03em;text-transform:uppercase}
.count{font-family:var(--mono);font-size:12px;color:var(--mute);text-transform:uppercase;letter-spacing:.06em}
.cols,.row-btn{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1.3fr) minmax(0,1fr) 130px;gap:20px;align-items:baseline}
.cols{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--mute);padding-block:12px 8px}
.cols span:last-child,.yr{text-align:right}
.list{list-style:none;margin:0 0 clamp(72px,10vw,140px);padding:0}
.item{border-bottom:1px solid var(--rule);transition:opacity .3s ease}
.row-btn{width:100%;background:none;border:0;text-align:left;padding-inline:0;color:inherit;font:inherit;cursor:pointer;padding-block:clamp(14px,1.8vw,22px);position:relative}
.item.linked .row-btn{cursor:alias}
.brand{font-weight:780;font-variation-settings:"wdth" 118;font-size:25px;line-height:1;letter-spacing:-.035em;
  transition:transform .45s var(--ease),font-variation-settings .45s ease;display:inline-block;transform-origin:left center}
.role{font-size:15px;line-height:1.35}
.disc{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--mute)}
.yr{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums}
@media (hover:hover) and (pointer:fine){
  .list:hover .item{opacity:.38}
  .list .item.on{opacity:1}
  .item.on .brand{transform:translateX(14px);font-variation-settings:"wdth" 125}
}
.peek{position:fixed;left:0;top:0;width:min(380px,30vw);aspect-ratio:16/11;pointer-events:none;z-index:50;opacity:0;transition:opacity .25s ease;will-change:transform}
.peek.show{opacity:1}
.peek .m{box-shadow:0 30px 60px -20px rgba(0,0,0,.45),0 8px 18px -8px rgba(0,0,0,.3)}
.panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.panel>div{overflow:hidden}
.item.open .panel{grid-template-rows:1fr}
.panel .m{aspect-ratio:16/11;margin-bottom:18px}
.panel p{margin:0 0 18px;font-size:15px;max-width:52ch}
.panel .go{display:inline-block;margin:-6px 0 22px;font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.06em;border-bottom:2px solid currentColor;text-decoration:none}
@media (hover:none),(pointer:coarse),(max-width:759px){
  .cols{display:none}
  .row-btn{grid-template-columns:1fr auto;grid-template-areas:"b y" "r r" "d d";gap:6px 12px;padding-right:28px}
  .brand{grid-area:b}.yr{grid-area:y}.role{grid-area:r}.disc{grid-area:d}
  .item.open{background:var(--c);color:var(--f);margin-inline:-16px;padding-inline:16px;border-bottom-color:transparent}
  .item.open .disc{color:inherit;opacity:.7}
  .row-btn::after{content:"+";position:absolute;right:0;bottom:16px;font-family:var(--mono);font-size:18px;transition:transform .3s}
  .item.open .row-btn::after{transform:rotate(45deg)}
  .peek{display:none}
}
@media (hover:hover) and (pointer:fine) and (min-width:760px){.panel{display:none}}

/* preview media */
.m{position:relative;width:100%;height:100%;border-radius:14px;overflow:hidden;isolation:isolate;background:var(--mc)}
.m>img,.m>video{width:100%;height:100%;object-fit:cover}
.m-word{position:absolute;inset:auto 16px 16px 16px;z-index:2;font-weight:850;font-variation-settings:"wdth" 125;font-size:clamp(26px,3.2vw,44px);line-height:.9;letter-spacing:-.04em;text-transform:uppercase}
.m-none{color:var(--mf)}
.m-video{background:#0c0c0c;color:#fff}
.m-video .blob{position:absolute;border-radius:50%;filter:blur(28px);mix-blend-mode:screen;animation:drift 7s ease-in-out infinite alternate}
.m-video .b1{width:70%;height:90%;left:-10%;top:-20%;background:var(--mc)}
.m-video .b2{width:55%;height:70%;right:-12%;top:20%;background:color-mix(in srgb,var(--mc) 55%,#fff);animation-duration:9s;animation-delay:-3s}
.m-video .b3{width:40%;height:50%;left:30%;bottom:-25%;background:color-mix(in srgb,var(--mc) 70%,#000);animation-duration:6s;animation-delay:-1s}
.m-video .scan{position:absolute;inset:0;z-index:1;background:repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 3px)}
@keyframes drift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(18%,-12%) scale(1.25)}}
.m-site{background:#fff;color:#111;display:flex;flex-direction:column}
.chrome{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#ececea;border-bottom:1px solid #ddd;flex:0 0 auto}
.chrome i{width:9px;height:9px;border-radius:50%;background:#cfcfcb}
.chrome span{margin-left:10px;flex:1;background:#fff;border-radius:6px;font-family:var(--mono);font-size:10px;padding:3px 8px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-site .pan{flex:1;min-height:0;overflow:hidden}
.m-site .pan img{width:100%;height:100%;object-fit:cover;object-position:50% 0;animation:pan 9s ease-in-out infinite alternate}
@keyframes pan{0%,12%{object-position:50% 0}88%,100%{object-position:50% 100%}}
.pg{flex:1;display:flex;flex-direction:column;gap:10px;padding:12px 14px;animation:scrollpg 6s ease-in-out infinite alternate}
.pg .nv{display:flex;align-items:center;gap:8px;font-weight:800;font-size:12px}
.pg .nv span{height:5px;width:22px;border-radius:3px;background:#ddd}
.pg .nv span:first-of-type{margin-left:auto}
.pg .hd{background:var(--mc);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:8px;color:var(--mf);min-height:52%}
.pg .hd b{font-weight:850;font-variation-settings:"wdth" 125;font-size:clamp(18px,2vw,26px);line-height:.95;letter-spacing:-.03em;text-transform:uppercase}
.pg .hd em{display:block;width:62px;height:16px;border-radius:999px;background:var(--mf);opacity:.9}
.pg .tl{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pg .tl span{height:38px;border-radius:7px;background:color-mix(in srgb,var(--mc) 22%,#f3f3f1)}
@keyframes scrollpg{0%,25%{transform:translateY(0)}100%{transform:translateY(-14%)}}
.m-img{background:var(--mf);color:var(--mc)}
.m-img .grain{position:absolute;inset:0;z-index:1;opacity:.35;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.m-img .disc-shape{position:absolute;width:78%;aspect-ratio:1;border-radius:50%;right:-22%;top:-30%;background:var(--mc)}
.m-img .bar-shape{position:absolute;left:16px;top:16px;width:34%;height:10px;border-radius:999px;background:var(--mc)}

/* bands */
.band{padding-block:clamp(72px,11vw,150px)}
.band-ink{background:#121212;color:#efeee9;--ink:#efeee9;--paper:#121212;--mute:#9a9a93;--rule:rgba(239,238,233,.2);--card:#1d1d1b}
.sect-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:18px;margin-bottom:clamp(32px,5vw,56px)}
.sect-head h2{font-size:clamp(40px,8vw,120px)}
.sect-head p{margin:0;max-width:36ch;color:var(--mute)}

/* about */
.about-grid{display:grid;gap:clamp(32px,5vw,72px)}
@media (min-width:960px){.about-grid{grid-template-columns:1fr 1.05fr;align-items:start}}
.about h2{font-size:clamp(40px,6.6vw,100px)}
.print{position:relative;margin:clamp(32px,5vw,56px) 0 0;width:min(340px,78%);background:#fff;padding:0;border-radius:4px;
  box-shadow:0 50px 90px -40px rgba(0,0,0,.8),0 10px 24px -12px rgba(0,0,0,.5);transform:translateY(var(--py,0)) rotate(var(--pr,-4deg));transition:transform .2s linear}
.print img{width:100%;height:auto;border-radius:4px}
.print .tape{position:absolute;z-index:2;top:-14px;left:50%;width:110px;height:30px;transform:translateX(-50%) rotate(3deg);background:rgba(255,201,31,.82);mix-blend-mode:multiply;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.about-body p{margin:0 0 1.1em;font-size:clamp(17px,1.5vw,20px);line-height:1.5;max-width:58ch}
.about-body p:first-child{font-size:clamp(20px,1.9vw,26px);line-height:1.35;font-weight:500;letter-spacing:-.01em}
.how{margin-top:clamp(28px,4vw,44px)}
.how-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.how-item{border-bottom:1px solid var(--rule)}
.how-item button{width:100%;display:grid;grid-template-columns:44px 1fr 24px;align-items:center;gap:12px;background:none;border:0;padding:18px 0;text-align:left;cursor:pointer}
.how-item .n{font-family:var(--mono);font-size:12px;color:var(--mute)}
.how-item .t{font-weight:780;font-variation-settings:"wdth" 112;font-size:clamp(19px,1.8vw,24px);letter-spacing:-.02em;line-height:1.15;transition:color .3s}
.how-item.open .t,.how-item button:hover .t{color:#ffc91f}
.how-item .pm{position:relative;width:16px;height:16px}
.how-item .pm::before,.how-item .pm::after{content:"";position:absolute;left:0;top:7px;width:16px;height:2px;background:currentColor;transition:transform .4s var(--ease)}
.how-item .pm::after{transform:rotate(90deg)}
.how-item.open .pm::after{transform:rotate(0)}
.how-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.how-body>div{overflow:hidden}
.how-item.open .how-body{grid-template-rows:1fr}
.how-body p{margin:0 0 20px 56px;color:var(--mute);font-size:16px;max-width:48ch}
@media (max-width:560px){.how-body p{margin-left:0}}

/* fact cards: count up, each stat drawn as a small motion graphic */
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:clamp(48px,7vw,88px)}
@media (min-width:960px){.facts{grid-template-columns:repeat(4,minmax(0,1fr))}}
.fact{position:relative;display:flex;flex-direction:column;min-height:clamp(230px,22vw,280px);padding:24px 22px 22px;border-radius:20px;background:var(--card);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7);overflow:hidden;transition:transform .5s var(--spring)}
.fact::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--k);transform:scaleX(var(--fill,0));transform-origin:left;transition:transform 2.4s var(--slow)}
@media (hover:hover) and (pointer:fine){.fact:hover{transform:translateY(-6px)}}
.fact b{display:block;font-weight:850;font-variation-settings:"wdth" 125;font-size:clamp(40px,4.6vw,66px);letter-spacing:-.045em;line-height:.95;font-variant-numeric:tabular-nums;color:var(--k)}
.fact b.long{font-size:clamp(28px,2.9vw,42px)}
.fact .lbl{display:block;margin-top:12px;font-size:clamp(15px,1.25vw,17px);line-height:1.3;font-weight:500;letter-spacing:-.005em;color:var(--ink);max-width:22ch}
.viz{margin-top:auto;padding-top:22px;height:78px;display:flex;align-items:flex-end;gap:5px;color:var(--k)}
.viz i{display:block;transition:transform 1.4s var(--slow) var(--d,0s),opacity .6s ease var(--d,0s)}
.viz-0 i.plus,.viz-3 i{transition-timing-function:cubic-bezier(.34,1.3,.64,1),ease}
.viz-0 i{flex:1;height:100%;border-radius:3px;background:currentColor;transform:scaleY(.06);transform-origin:bottom;opacity:.35}
.viz-0 i:nth-child(odd){height:72%}
.viz-0 i.plus{flex:0 0 18px;height:18px;background:none;position:relative;opacity:0;transform:scale(.2)}
.viz-0 i.plus::before,.viz-0 i.plus::after{content:"";position:absolute;inset:7px 0;background:currentColor;border-radius:2px}
.viz-0 i.plus::after{inset:0 7px}
.viz-1{gap:7px}
.viz-1 i{flex:1;height:100%;border-radius:4px 4px 2px 2px;background:currentColor;transform:scaleY(0);transform-origin:bottom}
.viz-1 i.in{flex:.8;height:20%;background:color-mix(in srgb,var(--ink) 30%,transparent);margin-right:8px}
.viz-2{flex-direction:column;align-items:stretch;justify-content:flex-end;gap:8px}
.viz-2 span{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;color:var(--mute)}
.viz-2 span i{height:14px;border-radius:3px;background:var(--k);transform:scaleX(0);transform-origin:left;flex:0 0 auto}
.viz-2 .from i{width:calc(23% * .78);opacity:.45}
.viz-2 .to i{width:78%;transition-delay:.6s;transition-duration:2.6s}
.viz-2 em{font-style:normal;opacity:0;transition:opacity .7s ease .5s}
.viz-2 .to em{transition-delay:2.6s;color:var(--ink)}
.viz-3{gap:10px}
.viz-3 i{width:clamp(30px,3vw,40px);height:clamp(30px,3vw,40px);transform:scale(0) translateY(10px);opacity:0}
.viz-3 svg{width:100%;height:100%;fill:currentColor}
.fact.go{--fill:1}
.fact.go .viz-0 i{transform:scaleY(1);opacity:1}
.fact.go .viz-0 i.plus{transform:scale(1)}
.fact.go .viz-1 i,.fact.go .viz-2 span i{transform:none}
.fact.go .viz-2 em{opacity:1}
.fact.go .viz-3 i{transform:none;opacity:1}
.fact.reset,.fact.reset *,.fact.reset::before{transition:none!important;animation:none!important}
.fact{cursor:pointer}
.fact.go .viz-3 i:nth-child(4){animation:bob 3.2s ease-in-out 2.2s infinite}
@keyframes bob{50%{transform:translateY(-5px)}}
@media (max-width:560px){.fact{padding:20px 16px 18px;min-height:220px}.fact b{font-size:38px}.fact b.long{font-size:24px}.fact .lbl{font-size:14px}.viz{height:60px}}

/* What I rock: expanding panels */
.rock{list-style:none;margin:0;padding:0;display:flex;gap:8px;height:clamp(460px,44vw,560px)}
.cap-pan{position:relative;flex:1 1 0;min-width:0;border-radius:22px;overflow:hidden;background:var(--card);box-shadow:var(--shadow);
  transition:flex-grow .8s var(--ease),background-color .5s ease,color .5s ease}
.cap-pan::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:var(--k);z-index:3}
.cap-pan.on{flex-grow:7;background:#121212;color:#efeee9}
.cap-hit{position:absolute;inset:0;z-index:2;width:100%;border:0;background:none;cursor:pointer;padding:22px 0 20px;display:flex;flex-direction:column;align-items:center;justify-content:space-between}
.cap-hit .n{font-family:var(--mono);font-size:11px;color:var(--mute)}
.cap-hit .vt{writing-mode:vertical-rl;transform:rotate(180deg);font-weight:780;font-variation-settings:"wdth" 112;font-size:clamp(16px,1.4vw,20px);letter-spacing:-.01em;white-space:nowrap;transition:opacity .3s}
.cap-pan.on .cap-hit{opacity:0;pointer-events:none}
.cap-body{position:absolute;inset:0;display:grid;grid-template-rows:1fr auto;padding:clamp(22px,3vw,36px);opacity:0;transform:translateY(16px);transition:opacity .35s ease,transform .5s var(--ease);pointer-events:none;min-width:420px;container-type:inline-size}
.cap-pan.on .cap-body{opacity:1;transform:none;transition-delay:.3s;pointer-events:auto}
.cap-body .art{width:min(250px,60%);aspect-ratio:1;align-self:center;justify-self:center;color:var(--k)}
.cap-body .txt .n{font-family:var(--mono);font-size:11px;color:#9a9a93}
.cap-body h3{margin:10px 0 8px;font-weight:850;font-variation-settings:"wdth" 125;font-size:clamp(22px,8cqi,42px);text-wrap:balance;text-transform:uppercase;letter-spacing:-.04em;line-height:.92}
.cap-body p{margin:0;font-size:16px;color:#c9c8c2;max-width:44ch}
.timer{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--k);transform:scaleX(0);transform-origin:left;z-index:3}
.rock.auto .cap-pan.on .timer{animation:timer 4.8s linear forwards}
.rock.auto.hover .cap-pan.on .timer,.rock.auto.hold .cap-pan.on .timer,.rock-band:not(.live) .rock.auto .cap-pan.on .timer{animation-play-state:paused}
.rock.auto.hold .cap-pan.on .timer{opacity:.45}
@keyframes timer{to{transform:scaleX(1)}}
@media (max-width:1023px){
  .rock{flex-direction:column;height:auto;gap:6px}
  .cap-pan{flex:none;height:64px;transition:height .7s var(--ease),background-color .5s,color .5s}
  .cap-pan.on{height:430px}
  .cap-hit{flex-direction:row;justify-content:flex-start;gap:16px;padding:0 20px}
  .cap-hit .vt{writing-mode:horizontal-tb;transform:none}
  .cap-body{min-width:0}
  .cap-body .art{width:min(180px,55%)}
}
.art svg,.art canvas,.art>div{width:100%;height:100%;display:block}
.art *{transform-box:fill-box}
.rock-band:not(.live) .art *{animation-play-state:paused!important}
/* 01 target */
.a-target .ring{fill:none;stroke:currentColor;stroke-width:2.5;transform-origin:center;animation:ringIn 3s linear infinite}
@keyframes ringIn{0%{transform:scale(1);opacity:0}15%{opacity:1}100%{transform:scale(.06);opacity:.2}}
.a-target .hair{stroke:#efeee9;stroke-opacity:.25;stroke-dasharray:4 6}
.a-target .dot{fill:currentColor;transform-origin:center;animation:beat 1.5s ease-in-out infinite}
@keyframes beat{50%{transform:scale(1.5)}}
/* 02 gears */
.a-gears polygon{fill:currentColor}
.a-gears .g2 polygon{fill:#efeee9}
.a-gears .g3 polygon{fill:color-mix(in srgb,currentColor 50%,#efeee9)}
.a-gears .hole{fill:#121212}
.a-gears g{transform-origin:center}
.a-gears .g1{animation:spin 9s linear infinite}
.a-gears .g2{animation:spin 6s linear infinite reverse}
.a-gears .g3{animation:spin 4.5s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
/* 03 team */
.a-team{position:relative}
.a-team .tring{position:absolute;inset:8%;border:2px dashed color-mix(in srgb,currentColor 50%,transparent);border-radius:50%;animation:spin 24s linear infinite}
.a-team .tdot{position:absolute;left:50%;top:50%;width:13%;aspect-ratio:1;margin:-6.5% 0 0 -6.5%;border-radius:50%;background:currentColor;animation:team 4s var(--ease) infinite;animation-delay:var(--d)}
.a-team .tdot:nth-of-type(odd){background:#efeee9}
@keyframes team{0%,12%{transform:rotate(var(--a)) translateY(0) scale(.6)}45%,80%{transform:rotate(var(--a)) translateY(-280%) scale(1)}100%{transform:rotate(var(--a)) translateY(0) scale(.6)}}
.a-team .tcore{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--mono);font-size:22px;color:#121212;background:#efeee9;border-radius:50%;width:22%;aspect-ratio:1;display:grid;place-items:center;font-weight:500}
/* 04 morph */
.a-morph{position:relative}
.a-morph span{position:absolute;inset:18%;background:currentColor;animation:morph 6s var(--ease) infinite}
.a-morph .m2{inset:24%;background:none;border:3px solid #efeee9;animation-delay:-2s;animation-duration:7s}
.a-morph .m3{inset:auto;width:14%;aspect-ratio:1;left:43%;top:43%;background:#121212;border-radius:50%;animation:orbit 3s linear infinite}
@keyframes morph{0%,100%{border-radius:50%;transform:rotate(0) scale(1)}25%{border-radius:14%;transform:rotate(45deg) scale(.9)}50%{border-radius:50% 0 50% 0;transform:rotate(90deg) scale(1)}75%{border-radius:0 50% 50% 50%;transform:rotate(180deg) scale(.85)}}
@keyframes orbit{from{transform:rotate(0) translateX(260%)}to{transform:rotate(360deg) translateX(260%)}}
/* 05 viewfinder */
.a-viewfinder{position:relative}
.a-viewfinder .c{position:absolute;width:22%;height:22%;border:3px solid #efeee9}
.a-viewfinder .tl{left:4%;top:4%;border-right:0;border-bottom:0}.a-viewfinder .tr{right:4%;top:4%;border-left:0;border-bottom:0}
.a-viewfinder .bl{left:4%;bottom:26%;border-right:0;border-top:0}.a-viewfinder .br{right:4%;bottom:26%;border-left:0;border-top:0}
.a-viewfinder .focus{position:absolute;left:50%;top:40%;width:28%;aspect-ratio:1;border:3px solid currentColor;border-radius:50%;transform:translate(-50%,-50%);animation:focus 2.6s var(--ease) infinite}
@keyframes focus{0%{transform:translate(-50%,-50%) scale(1.6);opacity:0}40%,80%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{opacity:0}}
.a-viewfinder .rec{position:absolute;right:8%;top:10%;font-family:var(--mono);font-size:11px;display:flex;align-items:center;gap:5px;color:#efeee9}
.a-viewfinder .rec b{width:8px;height:8px;border-radius:50%;background:#ff3b3b;animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.a-viewfinder .strip{position:absolute;left:0;right:0;bottom:0;height:18%;overflow:hidden;border-block:2px dashed rgba(239,238,233,.35)}
.a-viewfinder .track{display:flex;gap:6px;height:100%;padding:5px 0;width:max-content;animation:strip 7s linear infinite}
.a-viewfinder .track i{display:block;height:100%;aspect-ratio:4/3;border-radius:3px}
@keyframes strip{to{transform:translateX(-50%)}}
/* 06 launch */
.a-gtm .bar{fill:currentColor;opacity:.35;transform-origin:bottom;animation:grow 4s var(--ease) infinite}
@keyframes grow{0%{transform:scaleY(0)}35%,85%{transform:scaleY(1)}100%{transform:scaleY(0)}}
.a-gtm .line{fill:none;stroke:#efeee9;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:240;stroke-dashoffset:240;animation:draw 4s var(--ease) infinite}
@keyframes draw{0%{stroke-dashoffset:240}50%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:-240}}
.a-gtm .arrow{fill:#efeee9;animation:arrow 4s ease infinite}
@keyframes arrow{0%,45%{opacity:0}55%,85%{opacity:1}100%{opacity:0}}
/* 07 network */
.a-net .edges line{stroke:#efeee9;stroke-opacity:.22;stroke-width:2}
.a-net .pulse{fill:currentColor;offset-rotate:0deg;animation:travel 2.2s ease-in-out infinite}
@keyframes travel{0%{offset-distance:0%;opacity:0}15%{opacity:1}85%{opacity:1}100%{offset-distance:100%;opacity:0}}
.a-net .node{fill:#121212;stroke:currentColor;stroke-width:3;transform-origin:center;animation:beat 1.8s ease-in-out infinite}

/* Word for word */
.words-grid{display:grid;gap:clamp(24px,4vw,56px)}
@media (min-width:960px){.words-grid{grid-template-columns:1.6fr 1fr;align-items:stretch}}
.stage{position:relative;min-height:clamp(300px,30vw,400px);border-radius:28px;background:#1d1d1b;padding:clamp(28px,4vw,56px);overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;isolation:isolate}
.stage .blob{position:absolute;z-index:-1;width:70%;aspect-ratio:1;border-radius:50%;background:var(--qk,#ff4f1f);filter:blur(70px);opacity:.4;right:-20%;top:-30%;transition:background-color 1s ease;animation:float 10s ease-in-out infinite alternate}
@keyframes float{to{transform:translate(-30%,30%) scale(1.2)}}
.stage blockquote{margin:0;font-size:clamp(22px,2.6vw,38px);line-height:1.22;letter-spacing:-.02em;font-weight:600}
.stage blockquote::before{content:"“";display:block;font-size:2.4em;line-height:.6;font-weight:850;color:var(--qk,#ff4f1f);margin-bottom:.15em;transition:color .6s}
.stage .w{display:inline-block;opacity:0;transform:translateY(.45em) rotate(2deg);filter:blur(8px);transition:opacity .6s var(--ease),transform .7s var(--ease),filter .6s ease;transition-delay:calc(var(--d) * 28ms)}
.stage.show .w{opacity:1;transform:none;filter:none}
.stage blockquote.long{font-size:clamp(18px,1.75vw,26px);line-height:1.3;letter-spacing:-.012em}
.stage blockquote .pb{display:block;height:.7em}
@media (max-width:700px){.stage{min-height:0}.stage blockquote{transition:height .6s var(--ease)}}
.q-nav{display:flex;gap:8px;margin-top:28px}
.q-nav button{width:48px;height:48px;border-radius:50%;border:1px solid rgba(239,238,233,.3);background:none;cursor:pointer;font-size:18px;transition:background .3s,color .3s}
.q-nav button:hover{background:#efeee9;color:#121212}
.who{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.qt button{width:100%;text-align:left;background:none;border:0;border-radius:18px;padding:18px 20px 22px;cursor:pointer;position:relative;transition:background .4s}
.qt b{display:block;font-weight:780;font-size:20px;letter-spacing:-.01em}
.qt span{font-family:var(--mono);font-size:12px;color:#9a9a93}
.qt.on button{background:#1d1d1b}
.qt.on b{color:var(--k)}
.qt .qbar{position:absolute;left:20px;right:20px;bottom:10px;height:3px;border-radius:3px;background:rgba(239,238,233,.12);overflow:hidden;display:block}
.qt .qbar i{display:block;height:100%;width:100%;background:var(--k);transform:scaleX(0);transform-origin:left}
.qt.on .qbar i{animation:timer var(--qdur,8s) linear forwards}
.words.paused .qt.on .qbar i{animation-play-state:paused}
@media (max-width:959px){.who{flex-direction:row;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}.qt{flex:0 0 auto}.qt button{padding:14px 18px 20px}}

/* contact row (all finale options) */
.say-row{display:flex;flex-wrap:wrap;gap:14px 16px;align-items:center;margin-top:clamp(28px,4vw,48px)}
.cta-li{display:inline-flex;align-items:center;gap:14px;padding:clamp(16px,1.6vw,22px) clamp(24px,2.4vw,34px);border-radius:999px;background:currentColor;text-decoration:none;font-weight:750;font-size:clamp(18px,1.9vw,26px);letter-spacing:-.015em;transition:transform .25s var(--ease)}
.cta-li span,.cta-li i{color:var(--mail-fg,#121212);font-style:normal}
.cta-li i{transition:transform .3s var(--ease)}
.cta-li:hover i{transform:translate(3px,-3px)}
.cta-li svg{width:1em;height:1em;fill:var(--mail-fg,#121212);flex:0 0 auto}
.cta-mail{display:inline-flex;align-items:center;gap:6px;border:1.5px solid currentColor;border-radius:999px;padding:5px 5px 5px 22px;font-family:var(--mono);font-size:clamp(13px,1.25vw,16px)}
.cta-mail a{text-decoration:none}
.cta-mail a:hover{text-decoration:underline;text-underline-offset:4px}
.cta-mail .copy{border:0;border-radius:999px;padding:11px 16px;background:color-mix(in srgb,currentColor 12%,transparent);cursor:pointer;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;transition:background .25s}
.cta-mail .copy:hover{background:color-mix(in srgb,currentColor 22%,transparent)}
@media (max-width:560px){.cta-li,.cta-mail{width:100%;justify-content:center}.cta-mail{justify-content:space-between}}

/* finale shared */
.finale{position:relative}
.fin{display:none}
.finale[data-variant="A"] .fin-a,.finale[data-variant="B"] .fin-b,.finale[data-variant="C"] .fin-c{display:block}
/* A: takeover. The words fly in, the page cycles brand colors, then lands. */
.fin-a{height:260vh}
.fin-a .sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden;background:var(--fa-bg,#121212);color:var(--fa-fg,#efeee9);transition:background-color .25s linear,color .25s linear}
.fin-a .sticky>.wrap{width:100%}
.fin-a .eyebrow{color:inherit}
.fin-eye .t{opacity:.65}
.fin-eye .sh{padding:.15em .3em;margin:0 -.1em;background:linear-gradient(100deg,transparent .15em,var(--fa-hl,#ffc91f) .2em,var(--fa-hl,#ffc91f) calc(100% - .15em),transparent) 0 50%/0% 100% no-repeat;transition:background-size .9s var(--ease) .25s,color .3s .25s;color:inherit;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.fin-eye.lit .sh{background-size:100% 100%;color:var(--fa-hl-fg,#121212)}
@media (max-width:560px){.fin-eye .t2{display:block;margin-top:6px}}
.fin-a .take{font-size:clamp(60px,15.5vw,250px);line-height:.84;transform:scale(var(--fa-s,1));transform-origin:left bottom}
.fin-a .take span{display:inline-block}
.fin-a .w1{transform:translateX(calc((1 - var(--fa-in,1)) * -70vw)) rotate(calc((1 - var(--fa-in,1)) * -12deg))}
.fin-a .w2{transform:translateX(calc((1 - var(--fa-in,1)) * 70vw)) rotate(calc((1 - var(--fa-in,1)) * 12deg))}
.fin-a .fin-contact{opacity:var(--fa-c,1);transform:translateY(calc((1 - var(--fa-c,1)) * 30px))}
.fin-a .cta-li{--mail-fg:var(--fa-bg,#121212)}
/* B: spotlight. Dark room, the cursor is a flashlight. */
.spot{position:relative;min-height:100vh;min-height:100svh;background:#0b0b0a;color:#efeee9;overflow:hidden;display:flex;align-items:center;padding-block:80px;--mx:60%;--my:40%;--r:clamp(160px,22vw,300px)}
.spot-photo{position:absolute;top:0;bottom:0;right:0;width:min(62%,820px)}
.spot-photo i{position:absolute;inset:0;background:var(--img) 50% 22%/cover no-repeat}
.spot-photo .dim{filter:grayscale(1) brightness(.3) contrast(1.1)}
.spot-photo .lit{-webkit-mask-image:radial-gradient(circle var(--r) at var(--px,50%) var(--py,30%),#000 35%,transparent 72%);mask-image:radial-gradient(circle var(--r) at var(--px,50%) var(--py,30%),#000 35%,transparent 72%)}
.spot-photo .fade{background:linear-gradient(90deg,#0b0b0a 0%,transparent 45%)}
.spot-inner{position:relative;z-index:2;width:100%}
.spot-text{position:relative;font-size:clamp(60px,13vw,210px);line-height:.84}
.spot-text .outline{color:transparent;-webkit-text-stroke:2px rgba(239,238,233,.55)}
.spot-text .fill{position:absolute;inset:0;color:#ffc91f;-webkit-mask-image:radial-gradient(circle var(--r) at var(--tx,20%) var(--ty,50%),#000 40%,transparent 75%);mask-image:radial-gradient(circle var(--r) at var(--tx,20%) var(--ty,50%),#000 40%,transparent 75%)}
.spot .cta-li{--mail-fg:#0b0b0a;color:#ffc91f}
@media (max-width:759px){.spot-photo{width:100%;opacity:.9}.spot-photo .fade{background:linear-gradient(0deg,#0b0b0a 30%,transparent 80%)}.spot{align-items:flex-end}}
/* C: marquee + stamp + badge */
.fin-c{position:relative;background:#f1f1ed;color:#121212;padding-block:clamp(40px,6vw,80px);overflow:hidden}
.marquee{overflow:hidden;white-space:nowrap;font-weight:850;font-variation-settings:"wdth" 125;text-transform:uppercase;letter-spacing:-.04em;font-size:clamp(40px,7vw,110px);line-height:1}
.marquee>div{display:inline-flex;gap:.35em;align-items:center;animation:marq 26s linear infinite}
.marquee.m2>div{animation-direction:reverse;animation-duration:32s}
.marquee .star{color:#121212;font-size:.6em}
@keyframes marq{to{transform:translateX(-50%)}}
.stamp-wrap{padding-block:clamp(48px,7vw,96px)}
.stamp-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.stamp{font-size:clamp(56px,12vw,190px);flex:1 1 0;min-width:min(100%,520px)}
.stamp span{display:inline-block}
.stamp .wd{white-space:nowrap}
.js .stamp .wd span{opacity:0;transform:scale(2.6) rotate(calc((var(--i) - 6) * 6deg))}
.stamp.in .wd span{animation:stamp .55s var(--spring) forwards;animation-delay:calc(var(--i) * 55ms)}
@keyframes stamp{to{opacity:1;transform:none}}
.badge{position:relative;width:clamp(150px,16vw,210px);aspect-ratio:1;border-radius:50%;border:0;background:#121212;color:#f1f1ed;cursor:pointer;padding:0;flex:0 0 auto;transition:transform .5s var(--spring)}
.badge svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 16s linear infinite}
.badge text{fill:currentColor;font-family:var(--mono);font-size:13.5px}
.badge .face-crop{position:absolute;inset:23%;border-radius:50%;overflow:hidden}
.badge img{width:100%;height:100%;object-fit:cover;object-position:52% 30%;transform:scale(1.9);transform-origin:52% 28%;transition:transform .5s var(--spring)}
.badge:hover{transform:rotate(-8deg) scale(1.06)}
.badge:hover svg{animation-duration:5s}
.badge:hover img{transform:scale(2.2)}
.fin-c .cta-li{--mail-fg:#f1f1ed;color:#121212}
.confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}

/* option picker + toast */
.picker{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:60;display:flex;align-items:center;gap:4px;padding:6px;border-radius:999px;background:rgba(18,18,18,.88);color:#efeee9;backdrop-filter:blur(10px);
  font-family:var(--mono);font-size:12px;transform:translate(-50%,140%);transition:transform .5s var(--spring);box-shadow:0 20px 40px -12px rgba(0,0,0,.5);max-width:calc(100vw - 24px)}
.picker.show{transform:translate(-50%,0)}
.picker>span{padding:0 10px 0 12px;opacity:.6;white-space:nowrap}
.picker button{border:0;border-radius:999px;padding:9px 14px;background:none;cursor:pointer;white-space:nowrap;font-family:var(--mono);font-size:12px}
.picker button[aria-pressed="true"]{background:#ffc91f;color:#121212}
@media (max-width:520px){.picker>span{display:none}.picker button{padding:9px 10px}}
.toast{position:fixed;left:50%;top:20px;z-index:70;transform:translate(-50%,calc(-100% - 40px));visibility:hidden;background:#121212;color:#efeee9;font-family:var(--mono);font-size:13px;padding:12px 18px;border-radius:999px;transition:transform .45s var(--spring),visibility 0s .45s}
.toast.show{transform:translate(-50%,0);visibility:visible;transition:transform .45s var(--spring),visibility 0s}

.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;border-top:1px solid var(--rule);padding-block:16px 28px;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .js .hero-print{opacity:1!important;transition:none!important}
  .js .reveal,.js .hero .line,.js .hero .hey,.js .stamp span,.stage .w{opacity:1!important;transform:none!important;filter:none!important}
  .fin-a{height:auto}.fin-a .sticky{position:relative;height:auto;padding-block:120px}
}


/* about: behind-the-scenes stack (fans out on hover, links to /bts/) */
.bts-cta{position:relative;z-index:3;display:flex;width:fit-content;align-items:center;gap:12px;margin:-26px 0 0 clamp(40px,10%,90px);padding:14px 22px 13px;background:rgba(255,201,31,.95);color:#121212;text-decoration:none;font-family:var(--mono);font-size:clamp(13px,1.1vw,15px);font-weight:500;text-transform:uppercase;letter-spacing:.08em;transform:rotate(-3deg);box-shadow:0 6px 16px -6px rgba(0,0,0,.55);transition:transform .5s var(--spring)}
.bts-cta i{font-style:normal;transition:transform .35s var(--ease)}
.bts-cta:hover,.bts-cta:focus-visible{transform:rotate(0) scale(1.05)}
.bts-cta:hover i,.bts-cta:focus-visible i{transform:translateX(5px)}

/* /bts/ page */
.bts-page{background:#121212;color:#efeee9;--ink:#efeee9;--paper:#121212;--mute:#9a9a93;--rule:rgba(239,238,233,.2);--card:#1d1d1b;color-scheme:dark}
.bar .back{margin-right:auto}
.bts-head{padding-block:clamp(28px,6vw,72px) clamp(28px,4vw,48px)}
.bts-head h1{font-size:clamp(46px,9vw,140px)}
.bts-sub{margin:18px 0 0;max-width:40ch;font-size:clamp(17px,1.6vw,21px);line-height:1.4;color:#c9c8c2}
.bts-grid{list-style:none;margin:0;padding:0;columns:2;column-gap:12px}
@media (min-width:700px){.bts-grid{columns:3;column-gap:18px}}
@media (min-width:1100px){.bts-grid{columns:4;column-gap:22px}}
.bts-grid li{break-inside:avoid;margin:0 0 clamp(12px,1.6vw,22px)}
.bts-item{display:block;width:100%;padding:clamp(4px,.5vw,7px);border:0;background:#fff;border-radius:3px;cursor:zoom-in;position:relative;
  box-shadow:0 20px 40px -24px rgba(0,0,0,.9);transform:rotate(var(--r,0deg));transition:transform .5s var(--spring),box-shadow .4s}
.bts-item:hover,.bts-item:focus-visible{transform:rotate(0) scale(1.03);box-shadow:0 34px 60px -26px rgba(0,0,0,.95);z-index:2}
.bts-item img,.bts-item video{display:block;width:100%;height:auto;border-radius:2px;background:#2a2a28}
.bts-gif{position:absolute;top:14px;left:14px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;background:#121212;color:#efeee9;padding:3px 6px;border-radius:3px}
.js .bts-grid li{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .bts-grid li.in{opacity:1;transform:none}
.bts-end{padding-block:clamp(56px,8vw,110px) clamp(40px,6vw,80px)}
.cta-ghost{text-decoration:none;padding:14px 22px}
.cta-ghost:hover{background:color-mix(in srgb,currentColor 10%,transparent)}
.lb{position:fixed;inset:0;z-index:80;background:rgba(10,10,9,.94);display:grid;place-items:center;padding:clamp(12px,4vw,48px)}
.lb[hidden]{display:none}
.lb-media img,.lb-media video{display:block;max-width:min(92vw,1400px);max-height:84vh;width:auto;height:auto;border-radius:4px;box-shadow:0 40px 80px -30px #000}
.lb button{position:absolute;width:52px;height:52px;border-radius:50%;border:1px solid rgba(239,238,233,.3);background:rgba(18,18,18,.6);color:#efeee9;font-size:20px;cursor:pointer}
.lb button:hover{background:#efeee9;color:#121212}
.lb-x{top:16px;right:16px}.lb-prev{left:16px;top:50%;transform:translateY(-50%)}.lb-next{right:16px;top:50%;transform:translateY(-50%)}
.lb-n{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:12px;color:#9a9a93}
@media (max-width:600px){.lb-prev,.lb-next{top:auto;bottom:12px;transform:none}.lb-prev{left:12px}.lb-next{right:12px}}
@media (prefers-reduced-motion:reduce){.js .bts-grid li{opacity:1;transform:none}.bts-item,.bts-cta{transition:none}}

/* hidden surprise: confetti layer */
.confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:80}
.egg{cursor:default;user-select:none;-webkit-user-select:none}

/* tighter run from the quotes into Say hey (the finale content sits near the top of its screen) */
.words{padding-bottom:clamp(16px,2.4vw,32px)}
.fin-a .sticky{align-items:flex-start;padding-top:clamp(56px,10vh,96px)}
.fin-a{background:var(--fa-bg,#121212);transition:background-color .25s linear}

/* resume: button in About, lightbox with the page */
.about-tools{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,3vw,40px)}
.rz-open{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border:0;border-radius:999px;background:#ffc91f;color:#121212;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em;cursor:pointer;transition:transform .3s var(--spring)}
.rz-open i{font-style:normal;display:inline-block;transition:transform .3s var(--ease)}
.rz-open:hover{transform:rotate(-1.5deg) scale(1.04)}.rz-open:hover i{transform:translateX(3px)}
.bio-copy{display:inline-flex;align-items:center;padding:13px 21px;border:1.5px solid currentColor;border-radius:999px;background:none;color:inherit;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em;cursor:pointer;transition:background .25s,color .25s}
.bio-copy:hover{background:#efeee9;color:#121212}
.rz{border:0;padding:0;background:none;max-width:min(860px,94vw);width:100%;max-height:94vh;overflow:visible}
.rz::backdrop{background:rgba(10,10,9,.82);backdrop-filter:blur(4px)}
.rz[open]{animation:rzIn .45s var(--spring)}
@keyframes rzIn{from{opacity:0;transform:translateY(24px) rotate(-2deg) scale(.96)}to{opacity:1;transform:none}}
.rz-bar{position:sticky;top:0;z-index:2;display:flex;justify-content:flex-end;gap:10px;margin-bottom:12px}
.rz-dl,.rz-x{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:999px;border:0;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em;text-decoration:none;cursor:pointer}
.rz-dl{background:#ffc91f;color:#121212}.rz-dl i{font-style:normal}
.rz-x{background:#efeee9;color:#121212;width:42px;padding:0;justify-content:center;font-size:22px}
.rz-page{display:block;max-height:calc(94vh - 54px);overflow:auto;border-radius:4px;box-shadow:0 40px 80px -30px rgba(0,0,0,.7);cursor:pointer;-webkit-overflow-scrolling:touch}
.rz-page img{display:block;width:100%;height:auto}
@media (prefers-reduced-motion:reduce){.rz[open]{animation:none}.fin-eye .sh{transition:none}}

.now-a{color:inherit;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}.now-a:hover{text-decoration-color:#ffc91f}

/* client logos in the work list (logo_url in the editor; no logo means the name shows) */
.brand-logo{position:relative;height:25px;display:inline-flex;align-items:center;overflow:visible}
.brand-logo img{height:var(--lh);width:auto;max-width:none;display:block;flex:none;visibility:hidden}
.brand-logo i{position:absolute;left:0;right:0;top:50%;height:var(--lh);transform:translateY(-50%);background:currentColor;-webkit-mask:var(--lu) left center/contain no-repeat;mask:var(--lu) left center/contain no-repeat}
.row-btn:has(.brand-logo){align-items:center}

/* ---------- finale A, one-shot version ---------- */
@property --fa-c{syntax:"<number>";inherits:true;initial-value:1}
.fin-a.oneshot{height:auto}
.fin-a.oneshot .sticky{position:relative;height:auto!important;top:auto!important;align-items:flex-start;padding-top:clamp(28px,4.5vw,56px);padding-bottom:28px;isolation:isolate;--fa-c:0;transition:background-color .2s linear,color .25s linear,--fa-c .6s var(--ease)}
.fin-a.oneshot.fa-done .sticky{--fa-c:1}
.fin-a.oneshot .sticky>.wrap{position:relative;z-index:2}
.fin-a.oneshot .w1,.fin-a.oneshot .w2{transform:none}
/* Archivo leaves .079em of empty space before L and D at wdth 125; pull it back so the ink sits flush with the eyebrow */
.fin-a.oneshot .w1,.fin-a.oneshot .w2{margin-left:-.079em}
.fin-a.oneshot .take .ch{display:inline-block;opacity:0;transform:translateY(.38em) rotate(4deg);transform-origin:left bottom;transition:opacity .35s ease calc(var(--i) * 32ms),transform .7s cubic-bezier(.2,1.25,.35,1) calc(var(--i) * 32ms)}
.fin-a.oneshot .take .wd{display:inline-block;white-space:nowrap}
.fin-a.oneshot.fa-in .take .ch{opacity:1;transform:none}
/* the wipe: a yellow panel rises from the bottom edge behind the words */
.fin-a.oneshot .sticky::before{content:"";position:absolute;inset:0;z-index:1;background:#ffc91f;clip-path:inset(100% 0 0 0);pointer-events:none}
.fin-a.oneshot.fa-wipe .sticky::before{clip-path:inset(0 0 0 0);transition:clip-path .75s cubic-bezier(.7,0,.2,1)}
.fin-a.oneshot.fa-land .take{animation:faLand .55s cubic-bezier(.3,1.5,.4,1)}
@keyframes faLand{0%{transform:scale(1)}40%{transform:scale(1.02)}100%{transform:scale(1)}}
.fa-again{display:block;margin:22px 0 0 auto;padding:6px 0;background:none;border:0;color:inherit;opacity:.55;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}
.fa-again:hover{opacity:1}
.fa-again[hidden]{display:none}

/* recommender headshots */
.qt button:has(.qa){display:grid;grid-template-columns:44px 1fr;column-gap:14px;align-items:center}
.qt .qa{grid-row:span 2;width:44px;height:44px;border-radius:50%;object-fit:cover;filter:grayscale(1);opacity:.75;transition:filter .4s,opacity .4s,box-shadow .4s}
.qt.on .qa{filter:none;opacity:1;box-shadow:0 0 0 2px #1d1d1b,0 0 0 4px var(--k)}
.qt button:has(.qa) b,.qt button:has(.qa) span{grid-column:2}