/* /portfolio: Benchlight portfolios. Signature: Benchlight's own lamp, switched on over a dark bench, lighting the work.
   No scripts. Motion is CSS only (scroll-driven animations, @property counters), gated by @supports and prefers-reduced-motion. */
@property --n{syntax:"<integer>";inherits:false;initial-value:0}
@property --k{syntax:"<integer>";inherits:false;initial-value:486}
@property --printed{syntax:"<percentage>";inherits:true;initial-value:100%}

body.portfolio-page{
 --paper:#04111e;--wash:#0a2135;--card:#0b2236;--ink:#f4eee4;--night:#020a12;--text:#e6dfd3;--muted:#b4c0cc;--line:rgba(244,238,228,.16);
 --accent:#ac5b2e;--accent-dark:#c46a36;--glow:#f2b57e;--beam:#d39567;--metal:#2d4b69;--metal-hi:#4d6f92;
 --n0:#030c16;--n1:#061a2c;--n2:#0b2740;
 --pad:clamp(16px,4vw,64px);--gap:clamp(16px,2vw,28px);--sec:clamp(88px,11vw,170px);
 --disp:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;--mono:"Geist Mono",ui-monospace,Menlo,monospace;
 background:var(--n0);color:var(--text);color-scheme:dark}
html body.portfolio-page header.site-header{position:absolute;inset:0 0 auto;max-width:none;z-index:30;background:transparent;border-bottom-color:transparent}
html body.portfolio-page .brand-wordmark{content:url(/brand-wordmark-night.svg)}
html body.portfolio-page .brand-icon{content:url(/brand-icon-night.svg)}
html body.portfolio-page header.site-header .mk-start:hover{background:#c46a36}
html body.portfolio-page header.site-header .login-link.mk-login:hover{color:var(--glow)}
html body.portfolio-page footer.site-footer{background:var(--n0);color:var(--muted)}
html body.portfolio-page footer.site-footer a{color:var(--text)}
html body.portfolio-page footer.site-footer .footer-group>summary{color:var(--ink)}
html body.portfolio-page footer.site-footer .footer-group[open]>summary{color:var(--glow)}
html body.portfolio-page footer.site-footer .footer-group>summary svg{background:rgba(244,238,228,.1)}
html body.portfolio-page footer.site-footer :is(p,span){color:var(--muted)}

html body.portfolio-page main.pf{width:auto;max-width:none;margin:0;padding:0}
.pf{--pole:clamp(12px,1.15vw,20px);overflow-x:clip;font-size:1.0625rem;line-height:1.6}
.pf :is(h1,h2,h3,p,ul,ol,figure){margin:0}
.pf :is(ul,ol){padding:0;list-style:none}
.pf a:focus-visible,.pf summary:focus-visible,.pf label:has(:focus-visible){outline:2px solid var(--glow);outline-offset:3px}
.pf .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pf .wrap{padding-inline:var(--pad)}
.sec{padding-block:var(--sec)}
.kicker,.mono{font:700 .75rem/1.5 var(--body);letter-spacing:.12em;text-transform:uppercase}
.kicker{color:var(--glow)}
.mono{color:var(--muted)}
.pf .h2{font:800 clamp(2rem,1.3rem + 4.4vw,6.25rem)/.95 var(--disp);letter-spacing:-.045em;color:var(--ink);text-wrap:balance}
.pf .sub{font-size:clamp(1.0625rem,1rem + .35vw,1.3rem);line-height:1.55;color:#cdd6df}
.pf .note{margin-top:28px;font-size:.875rem;color:var(--muted)}
.head{display:grid;gap:18px clamp(32px,5vw,96px);margin-bottom:clamp(40px,5vw,72px)}
@media (min-width:1000px){.head{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end}.head .kicker{grid-column:1/-1}}

/* buttons */
.btns{display:flex;flex-wrap:wrap;gap:12px}
.pf .btn{display:inline-flex;align-items:center;justify-content:center;gap:.7em;min-height:52px;padding:.85em 1.4em;border:1px solid rgba(244,238,228,.45);border-radius:4px;color:var(--ink);font:650 1rem/1.2 var(--disp);letter-spacing:-.005em;text-decoration:none;transition:background .25s,border-color .25s,color .25s,box-shadow .25s}
.pf .btn:hover{border-color:var(--ink);background:rgba(244,238,228,.06)}
.pf .btn.solid{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 0 0 rgba(242,181,126,0)}
.pf .btn.solid:hover{background:#c46a36;border-color:#c46a36;box-shadow:0 10px 40px -8px rgba(242,181,126,.45)}
.pf .btn.solid::after{content:"";flex:none;width:.5em;height:.5em;border:solid currentColor;border-width:2px 2px 0 0;transform:rotate(45deg);transition:transform .2s}
.pf .btn.solid:hover::after{transform:translateX(3px) rotate(45deg)}

/* ---------- hero: the lamp switches on ---------- */
.pf-hero{
 --T:clamp(76px,9svh,104px);--B:clamp(44px,6.5svh,72px);--R:calc(var(--pad) + clamp(14px,3vw,48px));--slab:clamp(16px,1.5vw,26px);
 --room:calc(100vw - 2 * var(--pad) - var(--R) - var(--pole) - 8px);
 --l12:clamp(2rem,var(--room) / 5.15,7.25rem);
 --l3:clamp(3.4rem,var(--room) / 2.95,17rem);
 --x:calc(var(--pad) + var(--l3) * 1.42);
 --shade:clamp(78px,8vw,140px);
 position:relative;min-height:100svh;display:grid;align-items:end;overflow:hidden;isolation:isolate;
 padding:calc(var(--T) + var(--shade) * .5 + 96px) var(--pad) 0;
 background:radial-gradient(90% 75% at var(--x) 18%,#10304c 0%,#071c30 38%,var(--n0) 78%)}
@media (min-width:1100px){.pf-hero{--l3:clamp(3.4rem,(100vw - 2 * var(--pad) - 470px) / 2.95,17rem)}}
.pf-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.06;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.lamp{position:absolute;inset:0;z-index:1;pointer-events:none}
.lamp i{position:absolute;display:block}
.lamp-arm{top:var(--T);left:var(--x);right:var(--R);bottom:calc(var(--B) + var(--slab));border:solid #35577a;border-width:var(--pole) var(--pole) 0 0;border-top-right-radius:calc(var(--pole) * 5);box-shadow:inset calc(var(--pole) * -.3) calc(var(--pole) * .3) 0 rgba(255,255,255,.07)}
.lamp-arm::after{content:"";position:absolute;bottom:0;right:calc(var(--pole) * -2.3);width:calc(var(--pole) * 3.6);height:calc(var(--pole) * .9);border-radius:4px 4px 0 0;background:linear-gradient(#5d7fa3,#35577a)}
.lamp-drop{top:var(--T);left:calc(var(--x) - var(--pole) / 2);width:var(--pole);height:calc(var(--shade) * .32 + var(--pole));background:linear-gradient(90deg,#35577a,#4a6d92 45%,#2a4766)}
.lamp-drop::before{content:"";position:absolute;left:calc(var(--pole) * -.6);top:calc(var(--pole) * -.35);width:calc(var(--pole) * 2.2);height:calc(var(--pole) * 2.2);border-radius:50%;background:radial-gradient(circle at 35% 35%,#7d9cbd,#4d6f92 55%,#2d4b69)}
.lamp-shade{top:calc(var(--T) + var(--shade) * .32);left:calc(var(--x) - var(--shade) / 2);width:var(--shade);height:calc(var(--shade) / 2);border-radius:var(--shade) var(--shade) 0 0;background:linear-gradient(160deg,#d27a43,#9a4a22 60%,#6f3216);box-shadow:inset 0 -3px 0 rgba(0,0,0,.25)}
.lamp-bulb{top:calc(var(--T) + var(--shade) * .82 - 6px);left:calc(var(--x) - var(--shade) * .3);width:calc(var(--shade) * .6);height:12px;border-radius:50%;background:#fff7e8;box-shadow:0 0 30px 10px rgba(255,214,160,.7),0 0 90px 40px rgba(242,181,126,.25)}
.beam{position:absolute;top:calc(var(--T) + var(--shade) * .82);bottom:var(--B);left:calc(var(--x) - var(--l3) * 1.9);width:calc(var(--l3) * 3.8);filter:blur(16px);mix-blend-mode:screen;transform-origin:50% 0}
.beam>i{inset:0;clip-path:polygon(43% 0,57% 0,100% 100%,0 100%);background:linear-gradient(180deg,rgba(255,220,170,.62),rgba(242,181,126,.22) 55%,rgba(242,181,126,.08))}
/* the bench: a thick top with a lit front edge, two legs and a stretcher between them */
.bench{position:absolute;left:var(--pad);right:var(--pad);bottom:var(--B);height:var(--slab);z-index:2;border-radius:4px;background:linear-gradient(rgba(242,181,126,.6) 0 3px,#5a7ea4 3px 34%,#3a5d82 35%,#25425f);box-shadow:0 16px 30px -10px rgba(0,0,0,.6)}
.bench::before{content:"";position:absolute;left:3.5%;right:3.5%;top:100%;height:clamp(6px,.5vw,9px);background:#2a4868}
.bench::after{content:"";position:absolute;left:4%;right:4%;top:calc(var(--slab) + var(--B) * .62);height:clamp(6px,.55vw,10px);border-radius:2px;background:#22405d}
.bench i{position:absolute;top:var(--slab);width:clamp(14px,1.35vw,24px);height:var(--B);background:linear-gradient(90deg,#1f3a57,#3a5d82 55%,#22405d)}
.bench i:first-child{left:4%}.bench i:last-child{right:4%}
.pf-hero-in{position:relative;z-index:3;display:grid;gap:clamp(18px,2.6vw,36px);padding-bottom:calc(var(--B) + var(--slab) + clamp(28px,4vw,56px));padding-right:calc(var(--R) + var(--pole) + 8px)}
.pf .pf-h1{display:grid;font:800 var(--l12)/.9 var(--disp);letter-spacing:-.05em;color:var(--ink)}
.pf .pf-h1 span{display:block}
.pf .pf-h1 .l3{font-size:var(--l3);line-height:.86;letter-spacing:-.06em;color:#ffe3c2;text-shadow:0 0 .18em rgba(255,186,120,.45)}
.hero-side{display:grid;gap:18px;align-content:end}
.hero-side .lede{font-size:clamp(1.0625rem,1rem + .4vw,1.35rem);line-height:1.55;color:#e9e2d6}
.hero-side .fine{font-size:.9375rem;color:var(--muted)}
@media (min-width:1100px){
 .pf-hero-in{grid-template-columns:auto minmax(0,1fr);align-items:end;column-gap:clamp(40px,4vw,80px)}
 .pf-hero-in .kicker{grid-column:1/-1}
 .hero-side{padding-bottom:.6em}
}

/* ---------- light table: one sample fills the screen, then the camera pulls back ---------- */
.table{position:relative;background:linear-gradient(var(--n0),var(--n1) 40%,var(--n0))}
.table-run{position:relative}
.table-stick{position:relative;padding:0 var(--pad) var(--sec);display:grid;place-items:center}
.sheet{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.3vw,22px);width:100%}
@media (min-width:900px){.sheet{grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,calc((100svh - 150px) * 2.25))}} /* line-break-ok: sample grid sized to fit the screen */
.sheet li{display:grid;gap:8px;align-content:start}
.sheet .spx{border-radius:6px;box-shadow:0 20px 60px -20px rgba(0,0,0,.8),0 0 0 1px rgba(244,238,228,.08)}
.cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 10px;font:700 .6875rem/1.4 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cap>*{white-space:nowrap}
.cap b{color:var(--ink);font-weight:600}
.cap span{color:var(--glow)}
.table-head{display:grid;gap:18px clamp(32px,5vw,96px);padding:var(--sec) var(--pad) clamp(40px,5vw,72px)}
@media (min-width:1000px){.table-head{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end}.table-head .kicker{grid-column:1/-1}}
.table-head p{font-size:clamp(1.0625rem,1rem + .35vw,1.3rem);color:#cdd6df}

/* ---------- with your photos: a professional site, and a résumé as a front page ---------- */
.press{background:linear-gradient(var(--n0),var(--n1) 30%,var(--n0))}
.pro-fig{display:grid;gap:10px;margin:0 0 clamp(64px,8vw,120px)}
.pro-frame{border-radius:14px;overflow:hidden;background:#fbfaf7;box-shadow:0 40px 90px -30px rgba(0,0,0,.9)}
.pro-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:#e9e6e1}
.pro-bar i{width:10px;height:10px;border-radius:50%;background:#c9c4bc}
.pro-bar p{flex:1;margin-left:8px;padding:5px 10px;border-radius:7px;background:#fff;font:500 .8125rem/1.2 var(--mono);color:#555;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pro{position:relative;container-type:inline-size;background:#fbfaf7;color:#161616}
/* the header sits over the photo (a light sky turns a difference blend orange, so plain white on a soft shade), and the name
   leads, sized to fit the width (owner, November 5, 2026) */
.pro-nav{position:absolute;top:0;left:0;right:0;z-index:2;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.35);display:flex;flex-wrap:wrap;align-items:center;gap:6px 3.2cqi;padding:max(14px,2.2cqi) max(16px,3cqi);font-size:max(.75rem,1.1cqi);letter-spacing:.14em;text-transform:uppercase}
.pro-nav b{margin-right:auto;font:400 max(1.25rem,2.6cqi)/1 "Instrument Serif",Georgia,serif;letter-spacing:0;text-transform:none}
.pro-hero{position:relative;overflow:hidden}
.pro-hero img{display:block;width:100%;height:auto;aspect-ratio:16/8.5;object-fit:cover}
.pro-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.32),rgba(0,0,0,0) 22%,rgba(0,0,0,0) 45%,rgba(0,0,0,.45))}
.pro-in{position:absolute;z-index:1;left:max(16px,3cqi);right:max(16px,3cqi);bottom:max(16px,3cqi);display:grid;gap:max(6px,1cqi);color:#fff}
.pro-t{margin:0;font:400 calc((100cqi - 2 * max(16px,3cqi)) / var(--fit,6))/.86 "Instrument Serif",Georgia,serif;letter-spacing:-.01em;white-space:nowrap}
.pro-k{margin:0;font-size:max(.875rem,1.5cqi);line-height:1.4;color:#f2efe9}
.pro-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:max(12px,2cqi);padding:max(16px,3cqi)}
.pro-p img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.pro-p p{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 10px;padding-top:10px;font-size:max(.8125rem,1.25cqi)}
.pro-p span{color:#6b6b6b}
.pro-facts{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;border-top:1px solid #ddd8cf;padding-top:max(12px,1.6cqi)}
.pro-facts li{display:grid;gap:2px}
.pro-facts b{font:400 max(2rem,5cqi)/1 "Instrument Serif",Georgia,serif}
.pro-facts span{font-size:max(.75rem,1.1cqi);letter-spacing:.06em;text-transform:uppercase;color:#6b6b6b}
@container (min-width:900px){.pro-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 20cqi}.pro-facts{grid-column:auto;grid-template-columns:1fr;align-content:start;border:0;padding:0;gap:2cqi}}

.np-wrap{display:grid;gap:10px}
.np{position:relative;container-type:inline-size;overflow:hidden;border-radius:3px;color:#1b1a17;background:#f2ecdf 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='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");box-shadow:0 40px 90px -30px rgba(0,0,0,.9)}
.np-ink{display:grid;gap:max(12px,1.4cqi);padding:max(16px,3.2cqi);clip-path:inset(0 0 calc(100% - var(--printed)) 0)}
.np-mast{display:grid;gap:6px;justify-items:center;padding-bottom:max(10px,1.2cqi);border-bottom:4px double #1b1a17}
.np-ear{font:600 .6875rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.np-name{font:400 clamp(2.1rem,8cqi,7.5rem)/.9 "Instrument Serif",Georgia,serif;letter-spacing:-.02em;text-align:center;text-wrap:balance}
@container (min-width:640px){.np-mast{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end}.np-mast .np-ear{justify-self:start}.np-mast .np-ear.right{justify-self:end;text-align:right}.np-name{grid-column:2;grid-row:1}}
.np-date{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 16px;padding-bottom:8px;border-bottom:1px solid #1b1a17;font:600 .75rem/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.np-head{font:400 clamp(1.9rem,5.4cqi,5.2rem)/.98 "Instrument Serif",Georgia,serif;letter-spacing:-.015em;text-align:center;text-wrap:balance}
.np-grid{display:grid;gap:max(16px,2cqi);grid-template-columns:minmax(0,1fr)}
.np-grid>*{border-top:1px solid #1b1a17;padding-top:10px}
.np-grid>.np-photo{border:0;padding:0}
@container (min-width:640px){.np-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.np-photo{grid-row:span 2}}
@container (min-width:1000px){.np-grid{grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,3fr)}.np-photo{grid-row:span 2}.np-lead{grid-row:span 2}.np-col{grid-row:auto}}
.np-photo{position:relative;margin:0;display:grid;gap:6px;align-content:start}
.np-photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%;filter:grayscale(1) contrast(1.2) brightness(1.03)}
.np-photo::before{content:"";position:absolute;inset:0 0 auto 0;aspect-ratio:4/5;z-index:1;pointer-events:none;background:radial-gradient(rgba(27,26,23,.4) 32%,transparent 36%) 0 0/3px 3px;mix-blend-mode:multiply;opacity:.55}
.np-photo figcaption{font:italic .875rem/1.35 Georgia,"Times New Roman",serif;color:#3d3a33}
.np-lead{display:grid;gap:10px;align-content:start;font:1rem/1.55 Georgia,"Times New Roman",serif}
.np-dek{font:italic 400 clamp(1.25rem,1.1rem + .6vw,1.6rem)/1.25 "Instrument Serif",Georgia,serif;color:#2a2823}
.np-h4{margin-bottom:8px;font:700 .75rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.np-box{display:grid;align-content:start;padding:12px 14px 14px!important;border:2px solid #1b1a17!important}
.np-box ul{display:grid;gap:10px}
.np-box li{display:grid;gap:0}
.np-box b{font:400 clamp(2.2rem,1.8rem + 1.6vw,3.4rem)/.95 "Instrument Serif",Georgia,serif}
.np-box span{font:italic .875rem/1.3 Georgia,serif;color:#3d3a33}
.np-col{font:.9375rem/1.5 Georgia,"Times New Roman",serif}
.np-list{display:grid}
.np-list li{padding:7px 0;border-bottom:1px dotted #7d776b}
.np-list b{display:block;font:700 .6875rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#6b4a2a}
.np-weather p:not(.np-h4){font-style:italic}
.np-foot{padding-top:8px;border-top:4px double #1b1a17;text-align:center;font:600 .75rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
/* The roller is a full-height layer moved with a transform (no layout shift); its bar is drawn at the layer's top edge. */
.np-roller{position:absolute;left:-1%;right:-1%;top:-12px;height:100%;opacity:0;pointer-events:none}
.np-roller::before{content:"";display:block;height:24px;border-radius:12px;background:linear-gradient(#141414,#4b4b4b 35%,#202020 70%,#0d0d0d);box-shadow:0 10px 24px rgba(0,0,0,.35)}

/* ---------- your domain, with the work playing inside the letters ---------- */
.ko{position:relative;background:var(--n0)}
.ko-stick{position:relative;height:100svh;min-height:560px;overflow:hidden;isolation:isolate}
.ko-reel{position:absolute;inset:0;z-index:0;background:#20122a}
.ko-track{display:flex;height:100%;width:max-content}
.ko-track svg{height:100%;width:auto;aspect-ratio:16/10;flex:none} /* line-break-ok: artwork frames */
.ko-mask{--ko:min((100vw - 2 * var(--pad)) / 2.75,25svh);position:absolute;inset:0;z-index:1;display:grid;place-content:center;background:var(--n0);color:#fff;mix-blend-mode:multiply;text-align:center}
.ko-word{font:800 var(--ko)/.8 var(--disp);letter-spacing:-.055em}
.ko-word span{display:block}
.ko-cap{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(20px,4svh,44px);z-index:2;display:grid;gap:10px 48px}
.pf .ko-cap h2{font:800 clamp(1.6rem,1.2rem + 1.6vw,2.6rem)/1 var(--disp);letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.ko-cap p{color:#cdd6df}
@media (min-width:1000px){.ko-cap{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:end}}

/* ---------- case studies: cards that stack on the bench ---------- */
.cases{background:linear-gradient(var(--n0),var(--n1))}
.deck{display:grid;gap:clamp(24px,3vw,40px)}
.card{position:relative;display:grid;overflow:hidden;border-radius:20px;background:linear-gradient(160deg,#0f2a44,#081a2b);border:1px solid var(--line);box-shadow:0 -30px 80px -30px rgba(0,0,0,.8)}
.card-art{display:block;width:100%;aspect-ratio:16/10;height:auto}
.card-txt{container-type:inline-size;display:grid;gap:clamp(18px,2.4vw,32px);align-content:center;padding:clamp(24px,4vw,64px)}
.pf .card h3{font:800 clamp(1.4rem,1.3rem + 2vw,3.4rem)/1 var(--disp);letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(12px,2vw,28px)}
.tiles li{display:grid;gap:8px;align-content:start;border-top:1px solid var(--line);padding-top:16px;container-type:inline-size}
.num{display:block;font:800 min(clamp(2.4rem,1.4rem + 3.6vw,5.6rem),36cqi)/.86 var(--disp);letter-spacing:-.05em;color:var(--glow);counter-reset:n var(--to)}
.num::before{content:counter(n)}
.num::after{content:attr(data-s)}
.tiles span{font-size:.9375rem;line-height:1.35;color:#cdd6df}
@container (max-width:14em){.tiles{grid-template-columns:1fr;gap:0}.tiles li{padding-block:12px}}
.edit{display:inline-flex;align-items:center;gap:10px;justify-self:start;padding:8px 14px 8px 10px;border-radius:6px;background:rgba(244,238,228,.08);font-size:.875rem;color:var(--ink)}
.edit svg{width:20px;height:20px;color:var(--glow)}
@media (min-width:900px){
 .card{grid-template-columns:minmax(0,6fr) minmax(0,5fr);min-height:min(76svh,680px)}
 .card-art{height:100%;aspect-ratio:auto;object-fit:cover}
 .card:nth-child(2) .card-art{order:-1}
}
@media (min-width:900px) and (min-height:700px){
 .card{position:sticky;top:calc(96px + var(--i,0) * 22px)}
 .card:nth-child(2){--i:1}.card:nth-child(3){--i:2}
}

/* ---------- live media kit ---------- */
.kit{position:relative;background:var(--n1)}
.kit-stick{display:grid;gap:clamp(36px,5vw,80px);padding-block:var(--sec);align-items:center}
@media (min-width:1000px){.kit-stick{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.kit-copy{display:grid;gap:22px}
.kit-scene{display:grid;gap:clamp(14px,1.6vw,22px)}
.field{display:grid;gap:6px;justify-self:start;min-width:min(100%,360px);padding:20px 22px;border-radius:16px;background:#f4eee4;color:#13263a;box-shadow:0 30px 60px -30px rgba(0,0,0,.9)} /* line-break-ok: form control card */
.field .mono{color:#55667a}
.field label{font-weight:650;font-size:.9375rem}
.field .input{display:flex;align-items:center;gap:2px;padding:10px 14px;border:2px solid #ac5b2e;border-radius:10px;background:#fff;font:700 1.6rem/1.1 var(--disp);font-variant-numeric:tabular-nums}
.caret{width:2px;height:1.1em;background:#ac5b2e}
.save{justify-self:start;font-size:.8125rem;font-weight:650;color:#2c6b4f}
.kn{counter-reset:k calc(var(--k))}
.kn::before{content:counter(k) "K"}
.pages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,20px)}
.pg{position:relative;display:grid;align-content:space-between;gap:10px;aspect-ratio:3/4;padding:clamp(12px,1.6vw,22px);border-radius:14px;background:linear-gradient(170deg,#12304d,#0a1d30);border:1px solid var(--line);container-type:inline-size} /* line-break-ok: page thumbnails */
.pg .mono{font-size:.6875rem;letter-spacing:.1em}
.pg>.kn{display:block;font:800 clamp(1.6rem,22cqi,3.6rem)/.9 var(--disp);letter-spacing:-.04em;color:var(--ink)}
.pg>span{font-size:.8125rem;color:var(--muted)}
.paper{position:absolute;left:12%;right:-6%;bottom:-38%;z-index:-1;display:grid;gap:6px;align-content:start;padding:12px;aspect-ratio:8.5/11;border-radius:4px;background:#fffdf8;color:#13263a;transform:rotate(5deg);box-shadow:0 20px 40px -10px rgba(0,0,0,.6)} /* line-break-ok: printed page */
.paper b{font:800 .8125rem/1 var(--disp)}
.paper i{position:static;display:block;height:5px;border-radius:3px;background:#d8d0c3}
.paper i:nth-child(3){width:70%}
.paper em{justify-self:start;margin-top:4px;padding:2px 6px;border-radius:3px;background:#b8622f;color:#fff;font:700 .625rem/1.3 var(--mono);font-style:normal;letter-spacing:.08em}
.kit .pages{padding-bottom:clamp(60px,9vw,130px)}

/* ---------- pitch pages ---------- */
.pitch{background:linear-gradient(var(--n1),var(--n0))}
.pitch-grid,.brief-grid,.links-grid{display:grid;gap:clamp(40px,6vw,96px);align-items:center}
@media (min-width:1000px){.pitch-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.brief-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}.links-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.pitch-copy,.brief-copy,.links-copy{display:grid;gap:22px}
.pf-ticks{display:grid;border-bottom:1px solid var(--line)}
.pf-ticks li{position:relative;padding:14px 0 14px 34px;border-top:1px solid var(--line);color:#e6dfd3}
.pf-ticks li::before{content:"";position:absolute;left:2px;top:1.15em;width:14px;height:8px;border:solid var(--glow);border-width:0 0 2px 2px;transform:rotate(-45deg)}
.browser{position:relative;border-radius:14px;overflow:hidden;background:#0b1e31;border:1px solid var(--line);box-shadow:0 40px 90px -30px rgba(0,0,0,.9)}
.browser .bar{display:flex;align-items:center;gap:7px;padding:12px 14px;background:#122a42}
.browser .bar>i{width:11px;height:11px;border-radius:50%;background:rgba(244,238,228,.22)}
.url{flex:1;display:flex;margin-left:10px;padding:7px 12px;border-radius:8px;background:#071625;font:500 clamp(.75rem,.7rem + .3vw,.9375rem)/1.2 var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden}
.typed{display:inline-block;color:var(--ink);overflow:hidden;white-space:nowrap;border-right:2px solid var(--glow)}
.b-page{position:relative;aspect-ratio:16/10;display:grid;align-content:end;isolation:isolate}
.b-page svg{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.b-page::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(4,17,30,0) 30%,rgba(4,17,30,.85))}
.b-in{display:grid;gap:8px;padding:clamp(18px,3vw,40px)}
.b-in .mono{color:#e8d6c2}
.b-t{font:400 clamp(1.6rem,1rem + 2.4vw,3.2rem)/1 "Instrument Serif",Georgia,serif;font-style:italic;color:#fff;text-wrap:balance}
.toast{position:absolute;top:62px;right:14px;left:auto;display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;border-radius:14px;background:#f4eee4;color:#13263a;box-shadow:0 20px 50px -10px rgba(0,0,0,.6);max-width:calc(100% - 28px)} /* line-break-ok: notification card */
.toast svg{flex:none;width:34px;height:34px;padding:7px;border-radius:10px;background:#0b2d4b;color:var(--glow)}
.toast p{display:grid;gap:2px;font-size:.875rem;line-height:1.3}
.toast span{color:#55667a;font-size:.8125rem}

/* ---------- work with me picker ---------- */
.brief{background:var(--n0)}
.picker{display:grid;gap:22px}
.picker fieldset{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;border:0}
.picker legend{margin-bottom:14px;padding:0;font:700 .75rem/1.4 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.picker label{position:relative;display:inline-flex;align-items:center;min-height:48px;padding:.7em 1.1em;border:1px solid rgba(244,238,228,.35);border-radius:6px;cursor:pointer;font-weight:600;color:var(--ink);transition:background .2s,color .2s,border-color .2s}
.picker label:hover{border-color:var(--ink)}
.picker input{position:absolute;opacity:0;width:1px;height:1px}
.picker label:has(input:checked){background:var(--glow);border-color:var(--glow);color:#04111e}
.mail{display:grid;gap:0;border-radius:16px;overflow:hidden;background:#f4eee4;color:#13263a;box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.m-row{display:flex;gap:12px;padding:12px 20px;border-bottom:1px solid #e1d8ca;font-size:.9375rem}
.m-row span{min-width:4.5em;color:#6a7787}
.m-v{display:none}
.m-body{padding:18px 20px 8px;font-size:1.0625rem;line-height:1.65}
.m-body u{text-decoration:none;padding:0 .3em;border-radius:4px;background:#f8dcc2;color:#7a3a16;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.m-send{justify-self:end;margin:10px 20px 18px;padding:9px 20px;border-radius:6px;background:#0b2d4b;color:#fff;font-weight:650;font-size:.9375rem}
.picker:has([value=video]:checked) .m-video,.picker:has([value=photo]:checked) .m-photo,.picker:has([value=talk]:checked) .m-talk,.picker:has([value=long]:checked) .m-long{display:block}

/* ---------- link page ---------- */
.links{background:linear-gradient(var(--n0),var(--n1))}
.phone{position:relative;justify-self:center;display:grid;gap:14px;justify-items:center;align-content:start;width:min(100%,340px);aspect-ratio:9/18.5;padding:26px 18px;border-radius:44px;border:10px solid #0d0f14;background:radial-gradient(120% 60% at 50% 0%,#5a2f5e,#1c1530 60%,#0d0b18);box-shadow:0 50px 100px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.08)} /* line-break-ok: phone frame */
.p-url{padding:5px 12px;border-radius:4px;background:rgba(255,255,255,.1);font:500 .75rem/1.2 var(--mono);color:#e8e0f0}
.p-face{display:grid;place-items:center;width:88px;height:88px;border-radius:50%;border:2px solid rgba(255,255,255,.4);background:linear-gradient(140deg,#ff8f6b,#c2477a 55%,#3b1f6e);font:800 1.9rem/1 var(--disp);letter-spacing:-.04em;color:#fff}
.p-name{font:800 1.4rem/1 var(--disp);letter-spacing:-.03em;color:#fff}
.phone ul{display:grid;gap:10px;width:100%}
.phone li{padding:13px 16px;border-radius:2px;border:1px solid rgba(255,255,255,.25);text-align:center;font-weight:650;font-size:.9375rem;color:#fff;background:rgba(0,0,0,.25)}
.phone li.first{background:#fff;color:#1c1530;border-color:#fff}
.p-tag{position:absolute;bottom:16px;font:700 .6875rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--glow)}
.vs{display:grid;border-bottom:1px solid var(--line)}
.vs li{display:grid;gap:4px;padding:16px 0;border-top:1px solid var(--line)}
.vs s{color:var(--muted);text-decoration-color:rgba(244,238,228,.5)}
.vs b{font:800 clamp(1.5rem,1.1rem + 1.4vw,2.4rem)/1.05 var(--disp);letter-spacing:-.03em;color:var(--glow);overflow-wrap:anywhere}

/* ---------- files ---------- */
.drop{background:var(--n1)}
.files{display:grid;gap:var(--gap);grid-template-columns:1fr}
@media (min-width:760px){.files{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.files{grid-template-columns:repeat(4,minmax(0,1fr))}}
.files li{display:grid;gap:10px;align-content:start;padding:clamp(22px,3vw,36px);border-radius:18px;border:1px dashed rgba(244,238,228,.3);background:rgba(244,238,228,.03)}
.files svg{width:44px;height:44px;color:var(--glow)}
.files b{font:800 clamp(1.5rem,1.2rem + 1vw,2.2rem)/1 var(--disp);letter-spacing:-.03em;color:var(--ink)}
.files span{color:#cdd6df}

/* ---------- comparison ---------- */
.why{background:var(--n0)}
.rows{display:grid;border-bottom:1px solid var(--line)}
.rows li{display:grid;gap:8px 40px;padding:clamp(20px,2.6vw,34px) 0;border-top:1px solid var(--line)}
.rows p{font-size:clamp(1.0625rem,1rem + .5vw,1.5rem);line-height:1.4;color:#cdd6df}
.rows li.us .mono{color:var(--glow)}
.rows li.us p{font:700 clamp(1.4rem,1.1rem + 1.2vw,2.3rem)/1.15 var(--disp);letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
@media (min-width:900px){.rows li{grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:baseline}}

/* ---------- two plans ---------- */
.pf-price{position:relative;overflow:hidden;background:radial-gradient(70% 60% at 75% 40%,#123452,var(--n1) 55%,var(--n0))}
.plans{display:grid;gap:var(--gap);grid-template-columns:minmax(0,1fr);align-items:stretch}
@media (min-width:900px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
.plan-card{position:relative;display:grid;gap:14px;align-content:start;padding:clamp(24px,3.4vw,48px);border-radius:24px;border:1px solid var(--line);background:rgba(4,17,30,.55)}
.plan-card .btn{justify-self:start;margin-top:8px}
.plan-card.rec{border:2px solid var(--glow);background:linear-gradient(170deg,rgba(242,181,126,.12),rgba(4,17,30,.6) 45%);box-shadow:0 40px 100px -40px rgba(242,181,126,.45)}
.rec-tag{justify-self:start;padding:6px 12px;border-radius:3px;background:var(--glow);color:#04111e;font:700 .75rem/1.3 var(--body);letter-spacing:.12em;text-transform:uppercase}
.pf .plan-name{font:800 clamp(1.6rem,1.2rem + 1.4vw,2.4rem)/1 var(--disp);letter-spacing:-.03em;color:var(--ink)}
.amount{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 .3em;color:var(--ink)}
.amount b{font:800 clamp(4.2rem,2.6rem + 6vw,8.5rem)/.82 var(--disp);letter-spacing:-.06em;color:var(--ink)}
.rec .amount b{color:#ffe3c2;text-shadow:0 0 .15em rgba(255,186,120,.35)}
.amount span{font:700 clamp(1.2rem,1rem + .8vw,1.8rem)/1 var(--disp)}
.or{font:700 clamp(1.1rem,1rem + .6vw,1.5rem)/1.1 var(--disp);color:var(--glow)}
.plan-for{font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);color:#e6dfd3}
.incl{display:grid;border-bottom:1px solid var(--line)}
.incl li{position:relative;padding:12px 0 12px 32px;border-top:1px solid var(--line);color:#e6dfd3}
.incl li::before{content:"";position:absolute;left:2px;top:1.05em;width:14px;height:8px;border:solid var(--glow);border-width:0 0 2px 2px;transform:rotate(-45deg)}
.plan-terms{display:grid;gap:12px;margin-top:clamp(28px,3vw,44px);color:#cdd6df}
.plan-terms b{color:var(--ink)}
@media (min-width:1000px){.plan-terms{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px}}
.tier{display:inline-block;vertical-align:.12em;margin-left:.4em;padding:3px 8px;border-radius:3px;border:1px solid var(--glow);color:var(--glow);font:700 .6875rem/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.files b .tier{vertical-align:.3em}

/* ---------- creator referrals: off the page until the first creator agrees (owner, November 5); copy in PORTFOLIOS.md ---------- */
.refer{background:var(--n0)}
.refer-grid{display:grid;gap:22px clamp(32px,5vw,96px);padding-block:clamp(32px,4vw,64px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-inline:var(--pad)}
@media (min-width:1000px){.refer-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end}}
.refer .wrap.refer-grid{padding-inline:0}

/* ---------- questions ---------- */
.pf-faq{background:var(--n0);padding-top:0}
.faq-grid{display:grid;gap:28px clamp(32px,5vw,96px)}
@media (min-width:1000px){.faq-grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}}
.qs{border-bottom:1px solid var(--line)}
.qs details{border-top:1px solid var(--line)}
.qs summary{display:flex;justify-content:space-between;gap:20px;align-items:center;min-height:56px;padding:16px 0;cursor:pointer;list-style:none;font:700 clamp(1.15rem,1rem + .6vw,1.6rem)/1.2 var(--disp);letter-spacing:-.02em;color:var(--ink)}
.qs summary::-webkit-details-marker{display:none}
.qs summary::after{content:"";flex:none;width:12px;height:12px;border:solid var(--glow);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-3px,-3px);transition:transform .25s}
.qs details[open] summary::after{transform:rotate(-135deg)}
.qs p{padding:0 0 20px;color:#cdd6df}

/* ---------- final call: the lamp again ---------- */
.end{position:relative;overflow:hidden;isolation:isolate;min-height:88svh;display:grid;align-items:end;padding:calc(var(--sec) + 120px) 0 var(--sec);background:radial-gradient(60% 70% at 50% 18%,#143a5c,var(--n1) 45%,var(--n0) 80%)}
.end-lamp{--shade:clamp(90px,10vw,160px);position:absolute;inset:0;z-index:-1;pointer-events:none}
.end-lamp i{position:absolute;display:block}
.end-lamp::before{content:"";position:absolute;top:0;left:calc(50% - var(--pole) / 2);width:var(--pole);height:72px;background:linear-gradient(90deg,#35577a,#4a6d92 45%,#2a4766)}
.end-lamp .lamp-shade{top:72px;left:calc(50% - var(--shade) / 2);width:var(--shade);height:calc(var(--shade) / 2);border-radius:var(--shade) var(--shade) 0 0;background:linear-gradient(160deg,#d27a43,#9a4a22 60%,#6f3216)}
.end-lamp .lamp-bulb{top:calc(72px + var(--shade) / 2 - 6px);left:calc(50% - var(--shade) * .3);width:calc(var(--shade) * .6);height:12px;border-radius:50%;background:#fff7e8;box-shadow:0 0 30px 10px rgba(255,214,160,.7),0 0 90px 40px rgba(242,181,126,.25)}
.end-lamp .beam{top:calc(72px + var(--shade) / 2);bottom:0;left:calc(50% - 50vw);width:100vw}
.end-in{display:grid;gap:24px;justify-items:center;text-align:center}
.pf .end-h{font:800 clamp(2.2rem,(100vw - 2 * var(--pad)) / 5.3,13rem)/.88 var(--disp);letter-spacing:-.055em;color:#ffe3c2;text-shadow:0 0 .16em rgba(255,186,120,.4);text-wrap:balance}
.end .btns{justify-content:center}

/* ---------- motion: only where supported, never with reduced motion ---------- */
@media (prefers-reduced-motion:no-preference){
 .lamp-bulb,.pf-hero .beam{animation:switch-on 1.5s linear .35s both}
 .pf-h1 .l3{animation:lit-up 1.5s linear .35s both}
 @keyframes switch-on{0%{opacity:0}9%{opacity:.9}13%{opacity:.1}21%{opacity:1}27%{opacity:.35}36%,100%{opacity:1}}
 @keyframes lit-up{0%{color:#33495f;text-shadow:none}21%{color:#ffe3c2}27%{color:#7a6a5c;text-shadow:none}36%,100%{color:#ffe3c2;text-shadow:0 0 .18em rgba(255,186,120,.45)}}
 .pf-hero-in>*{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
 .pf-hero-in .kicker{animation-delay:.1s}.pf-h1{animation-delay:.2s}.hero-side{animation-delay:.9s}
 @keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
 .ko-track{animation:reel 46s linear infinite}
 @keyframes reel{to{transform:translateX(-50%)}}

 @supports (animation-timeline:view()){
  /* hero: the lamp swings and dims as you leave */
  .pf-hero{view-timeline:--hero block}
  .pf-hero .beam{animation:switch-on 1.5s linear .35s both,swing linear both;animation-timeline:auto,--hero;animation-range:normal,exit 0% exit 90%}
  .lamp-shade{transform-origin:50% -40%;animation:swing linear both;animation-timeline:--hero;animation-range:exit 0% exit 90%}
  @keyframes swing{to{transform:rotate(14deg);opacity:.25}}
  .pf-hero-in{animation:drift linear both;animation-timeline:--hero;animation-range:exit 0% exit 100%}
  @keyframes drift{to{transform:translateY(-14svh);opacity:.3}}

  /* light table: start on one sample, pull back to all six */
  .table-run{height:210svh;view-timeline:--table block}
  .table-stick{position:sticky;top:0;height:100svh;padding:0 var(--pad);overflow:hidden}
  .spx-tag{animation:fadeout linear both;animation-timeline:--table;animation-range:contain 30% contain 50%}
  .sheet{transform-origin:16.2% 22.1%;animation:pullback linear both;animation-timeline:--table;animation-range:contain 8% contain 78%}
  @keyframes pullback{from{transform:translate(33.8%,27.9%) scale(3.55)}to{transform:none}}
  @media (max-width:899px){.sheet{transform-origin:24.3% 12.9%;animation-name:pullback-2}}
  @keyframes pullback-2{from{transform:translate(25.7%,37.1%) scale(2.3)}to{transform:none}}
  .sheet .spx{animation:lightup linear both;animation-timeline:--table;animation-range:contain 50% contain 80%}
  .sheet li:first-child .spx{animation:none}
  @keyframes lightup{from{filter:brightness(.25)}to{filter:none}}
  .cap{animation:fadein linear both;animation-timeline:--table;animation-range:contain 62% contain 82%}
  @keyframes fadein{from{opacity:0}to{opacity:1}}

  /* the professional photo drifts; the résumé prints just ahead of the reader */
  .pro-hero img{animation:pro-pan linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  @keyframes pro-pan{from{transform:scale(1.14) translateY(-3%)}to{transform:scale(1.02) translateY(3%)}}
  .np{animation:print-np linear both;animation-timeline:view();animation-range:entry-crossing 22vh entry-crossing calc(100% + 22vh)}
  @keyframes print-np{from{--printed:0%}to{--printed:100%}}
  .np{view-timeline:--np block}
  .np-roller{animation:roll linear both,roll-down linear both;animation-timeline:--np,--np;animation-range:entry-crossing 22vh entry-crossing calc(100% + 22vh)}
  @keyframes roll{0%{opacity:0}3%,94%{opacity:1}100%{opacity:0}}
  @keyframes roll-down{from{transform:translateY(0)}to{transform:translateY(100%)}}

  /* the domain: hold, then fly in through the dot */
  .ko{height:230svh;view-timeline:--ko block}
  .ko-stick{position:sticky;top:0}
  .ko-mask{transform-origin:calc(50% - var(--ko) * .962) calc(50% + var(--ko) * 1);animation:through linear both;animation-timeline:--ko;animation-range:contain 52% contain 96%}
  @keyframes through{0%{transform:none}45%{transform:translate(calc(var(--ko) * .48),calc(var(--ko) * -.5)) scale(3.2)}75%{transform:translate(calc(var(--ko) * .87),calc(var(--ko) * -.9)) scale(13)}100%{transform:translate(calc(var(--ko) * .962),calc(var(--ko) * -1)) scale(64)}}
  .ko-cap{animation:fadeout linear both;animation-timeline:--ko;animation-range:contain 40% contain 55%}
  @keyframes fadeout{to{opacity:0;transform:translateY(20px)}}

  /* case study numbers count up as they arrive */
  .num{counter-reset:n calc(var(--n));animation:count linear both;animation-timeline:view();animation-range:entry 30% cover 45%}
  @keyframes count{from{--n:0}to{--n:var(--to)}}
  .card-txt{animation:rise linear both;animation-timeline:view();animation-range:entry 10% entry 70%}

  /* media kit: one edit, three pages follow, then the PDF prints */
  .field .kn,.pg .kn{animation:edit linear both;animation-timeline:view();animation-range:entry 70% cover 45%}
  .pg{animation:ping linear both;animation-timeline:view();animation-range:cover 44% cover 54%}
  .p2{animation-range:cover 47% cover 57%}.p3{animation-range:cover 50% cover 60%}
  .p1 .kn{animation-range:cover 40% cover 46%}.p2 .kn{animation-range:cover 43% cover 49%}.p3 .kn{animation-range:cover 46% cover 52%}
  @keyframes edit{from{--k:412}to{--k:486}}
  @keyframes ping{0%,100%{box-shadow:0 0 0 0 rgba(242,181,126,0)}40%{box-shadow:0 0 0 2px var(--glow),0 0 50px rgba(242,181,126,.45)}}
  .paper{animation:print linear both;animation-timeline:view();animation-range:cover 30% cover 60%}
  @keyframes print{from{transform:translateY(-70%) rotate(0deg);opacity:0}30%{opacity:1}to{transform:rotate(5deg)}}

  /* pitch page: the address types itself, then they open it */
  .typed{animation:type steps(7,end) both;animation-timeline:view();animation-range:entry 80% cover 42%}
  @keyframes type{from{width:0}to{width:calc(7ch + 2px)}}
  .toast{animation:arrive linear both;animation-timeline:view();animation-range:cover 44% cover 54%}
  @keyframes arrive{from{opacity:0;transform:translateY(-16px) scale(.96)}to{opacity:1;transform:none}}

  /* files drop onto the bench */
  .files li{animation:land linear both;animation-timeline:view();animation-range:entry 20% entry 90%}
  .files li:nth-child(2){animation-range:entry 35% entry 100%}.files li:nth-child(3){animation-range:entry 50% cover 30%}.files li:nth-child(4){animation-range:entry 60% cover 35%}
  @keyframes land{from{opacity:0;transform:translateY(-60px) rotate(-3deg)}to{opacity:1;transform:none}}

  /* the last lamp switches on as you arrive */
  .end-lamp .beam,.end-lamp .lamp-bulb{animation:switch-on linear both;animation-timeline:view();animation-range:entry 40% cover 45%}
  .end-h{animation:lit-up linear both;animation-timeline:view();animation-range:entry 50% cover 50%}
 }
}
@media (prefers-reduced-motion:reduce){.pf *{animation:none!important}}

/* 200% text: let buttons wrap on a very narrow page (keep last) */
.pf{container:pf/inline-size}
@container pf (max-width:15em){.pf .btn,.cap>*{white-space:normal}}