/* v3: minimal, serif-led. Bodoni Moda for display, DM Sans for text: serif/sans contrast.
   Cobalt accent for text-level cues (tags, links, focus). Pop colours (red, orange, blue, purple) only on
   surfaces: the hero colour field, the strategy cards and the marquee.
   Shape rule: cards, mats and panels 12px; buttons 6px; labels are pills. */
:root{
  --bg:#F3F3F0;--surface:#E8E8E4;--ink:#151515;--ink-2:#55554F;--line:rgba(21,21,21,.09);--press:#333331;--mat:#121212;
  --accent:#2E46CF;
  --red:#E4412B;--orange:#FF6B1A;--blue:#2E46CF;--purple:#7A3FF0;
  --display:'Bodoni Moda',Didot,Georgia,serif;
  --text:'DM Sans',system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(16px,4vw,56px);--max:1360px;--gap:24px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#111111;--surface:#1C1C1B;--ink:#EDEDE8;--ink-2:#A6A69F;--line:rgba(237,237,232,.1);--press:#C9C9C3;--mat:#1C1C1B;--accent:#8C9CFF}}
:root[data-theme=dark]{--bg:#111111;--surface:#1C1C1B;--ink:#EDEDE8;--ink-2:#A6A69F;--line:rgba(237,237,232,.1);--press:#C9C9C3;--mat:#1C1C1B;--accent:#8C9CFF}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px}
html,body{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.65 var(--text);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* Paper texture: fine grain + soft mottling, fixed BEHIND content so work images and text stay clean. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.13;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/180px 180px,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='720'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .45 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E") 0 0/720px 720px}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) body::before{filter:invert(1);opacity:.07}}
:root[data-theme=dark] body::before{filter:invert(1);opacity:.07}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:var(--bg)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--pad);top:12px;z-index:10;background:var(--ink);color:var(--bg);padding:8px 14px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ico{width:1em;height:1em;flex:none}
.link{background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .5s var(--ease)}
.link:hover{background-size:0 1px;background-position:100% 100%}
figure{margin:0}
figcaption,.note{margin:10px 0 0;font-size:14px;font-style:italic;color:var(--ink-2)}

/* Placeholder copy: visible on purpose until the real material arrives */
.ph-inline{color:var(--ink-2);font-style:italic}

/* Nav */
.nav{max-width:var(--max);margin:0 auto;padding:0 var(--pad);height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{font:500 22px/1 var(--display);letter-spacing:-.005em}
.nav nav{display:flex;gap:clamp(16px,3vw,40px);font-size:15px;color:var(--ink-2)}
.nav nav a{transition:color .3s}
.nav nav a:hover,.nav nav a[aria-current]{color:var(--ink)}

main>section,.case{max-width:var(--max);margin-left:auto;margin-right:auto;padding-left:var(--pad);padding-right:var(--pad)}

/* Type */
.display{font:400 clamp(42px,6.2vw,92px)/1.08 var(--display);letter-spacing:-.02em;margin:0}
.display em{font-style:italic}
.display-2{font:400 clamp(34px,4.1vw,60px)/1.1 var(--display);letter-spacing:-.015em;margin:0;max-width:18ch}

/* Hero */
.hero{padding-top:clamp(20px,5vh,56px)}
.name{font:400 min(14.4vw,208px)/.95 var(--display);letter-spacing:-.025em;margin:0 0 0 -.04em;white-space:nowrap}
.name .w{padding-top:.22em;margin-top:-.22em}
.ch{display:inline-block;transform:translateY(calc(var(--k,0) * -.16em));color:color-mix(in srgb,var(--orange) calc(var(--k,0) * 100%),var(--ink))}
.hero-row{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:start;margin-top:clamp(20px,4vh,44px)}
.statement{font:400 clamp(26px,2.6vw,40px)/1.15 var(--display);letter-spacing:-.01em;margin:0}
.statement em{font-style:italic}
.hero-copy{grid-column:1/8;padding-top:clamp(4px,1vh,12px)}
.lede{font-size:clamp(16px,1.2vw,18px);color:var(--ink-2);max-width:44ch;margin:18px 0 0}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 26px;border-radius:6px;background:var(--ink);color:var(--bg);font-size:15px;font-weight:500;white-space:nowrap;transition:background .25s var(--ease),box-shadow .25s var(--ease),transform .2s var(--ease)}
.btn:hover{background:var(--press)}
.btn:active{transform:scale(.98)}
.btn.ghost{background:none;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.hero-portrait{grid-column:8/13;position:relative;justify-self:end;width:min(100%,540px);aspect-ratio:4/5}
.pane{position:absolute;inset:0;border-radius:12px;overflow:hidden;isolation:isolate;
  background:radial-gradient(60% 55% at 25% 20%,var(--orange),transparent 70%),radial-gradient(55% 50% at 85% 70%,var(--red),transparent 70%),radial-gradient(50% 45% at 60% 95%,var(--orange),transparent 70%),var(--blue)}
.field,.field canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:-1}
.hero-portrait img{position:absolute;left:7%;bottom:0;width:86%;height:auto}
.hero-portrait .col{clip-path:circle(0 at var(--x,50%) var(--y,30%));transition:clip-path .6s var(--ease)}
.hero-portrait:hover .col{clip-path:circle(30% at var(--x,50%) var(--y,30%))}
.hero-portrait.lit .col{clip-path:circle(150% at 50% 30%)}

/* What I do */
.roles{margin-top:clamp(112px,18vh,200px)}
.tag{font:500 14px/1.4 var(--text);letter-spacing:.03em;color:var(--accent);margin:0 0 clamp(28px,5vh,48px)}
.pill{display:inline-block;padding:2px 11px;border:1px solid currentColor;border-radius:999px;font-size:12px;line-height:1.5;letter-spacing:.02em}
.bands{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.bands li{border-bottom:1px solid var(--line)}
.bands a{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr) auto;align-items:center;gap:var(--gap);padding:clamp(22px,3.4vh,34px) clamp(14px,1.6vw,24px);border-radius:12px;
  background:linear-gradient(var(--c),var(--c)) no-repeat 0 0/0% 100%;transition:background-size .7s var(--ease),color .45s var(--ease)}
.bands a:hover,.bands a:focus-visible{background-size:100% 100%;color:var(--on,#fff)}
.bands li[style*='--orange'],.bands li[style*='--red']{--on:#151515}
.bands h3{font:400 clamp(32px,4vw,60px)/1.05 var(--display);letter-spacing:-.015em;margin:0}
.band-txt{display:grid;gap:6px;font-size:16px;max-width:44ch}
.band-txt .meta{font-size:14px;font-style:italic;opacity:.75}
.bands a>.ico{font-size:22px;opacity:.35;transition:opacity .4s,transform .5s var(--ease)}
.bands a:hover>.ico{opacity:1;transform:translateY(4px)}
/* role line replaces the name in the home nav (the hero already carries it) */
.role-line{margin:0;font-size:15px;color:var(--ink-2)}

/* Selected work */
.work{margin-top:clamp(120px,18vh,220px)}
.bento{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.b1{grid-column:1/8}.b2{grid-column:8/13}.b3{grid-column:1/6}.b4{grid-column:6/13}
.cell a{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:48px;height:100%;min-height:clamp(260px,25vw,330px);padding:clamp(22px,2.4vw,32px);border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--brand) 7%,var(--bg));transition:border-color .45s var(--ease),background .45s var(--ease)}
.cell a:hover{border-color:color-mix(in srgb,var(--brand) 40%,var(--line));background:color-mix(in srgb,var(--brand) 11%,var(--bg))}
.app{display:block;width:clamp(72px,6.2vw,92px);aspect-ratio:1;border-radius:22%;overflow:hidden;box-shadow:0 12px 26px -12px color-mix(in srgb,var(--brand) 55%,transparent);transition:transform .6s var(--ease)}
.app img{width:100%;height:100%}
.cell a:hover .app{transform:translateY(-4px)}
.cell .pill{color:var(--ink-2);margin-bottom:12px}
.cell h3{font:400 clamp(28px,2.6vw,40px)/1.08 var(--display);margin:0}
.cell-meta{display:flex;justify-content:space-between;gap:16px;margin-top:8px;font-size:15px;color:var(--ink-2)}
/* the work itself slides in on hover */
.peek{position:absolute;top:clamp(18px,2vw,26px);right:clamp(22px,2.6vw,36px);width:clamp(78px,7.4vw,112px);height:auto;border-radius:8px;box-shadow:0 22px 40px -18px color-mix(in srgb,var(--brand) 60%,#000);opacity:0;transform:translateY(24px) rotate(7deg);transition:opacity .5s var(--ease),transform .7s var(--ease)}
.cell a:hover .peek,.cell a:focus-visible .peek{opacity:1;transform:rotate(4deg)}
.cell a>.ico{position:absolute;top:26px;right:26px;font-size:20px;opacity:0;transform:translate(-4px,4px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.cell a:hover>.ico{opacity:1;transform:none}

/* AI */
.ai{margin-top:clamp(140px,20vh,240px)}
.ai-head p{margin:22px 0 0;color:var(--ink-2);max-width:48ch}
.strategy{margin-top:clamp(140px,20vh,240px)}
.method{list-style:none;margin:clamp(44px,8vh,80px) 0 0;padding:0;display:flex;gap:12px;min-height:clamp(260px,26vw,340px)}
.method li{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:clamp(20px,2.2vw,30px);border:1px solid var(--line);border-radius:12px;
  background:color-mix(in srgb,var(--c) 9%,var(--bg));outline-offset:4px;cursor:default;transition:flex .6s var(--ease),background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease)}
.m-verb{font:400 clamp(30px,3vw,46px)/1 var(--display);letter-spacing:-.01em}
.method p{margin:0;max-width:28ch;font-size:16px;opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.method li:hover,.method li:focus-visible,.method:not(:hover):not(:focus-within) li:first-child{flex:2.3;background:var(--c);border-color:var(--c);color:var(--on,#fff)}
.method li:hover p,.method li:focus-visible p,.method:not(:hover):not(:focus-within) li:first-child p{opacity:1;transform:none}
/* red and orange carry dark text: white on them fails AA at body size */
.method li[style*='--red'],.method li[style*='--orange']{--on:#151515}
.marquee{margin-top:clamp(56px,9vh,96px);overflow:hidden;border-block:1px solid var(--line);padding:clamp(14px,2.4vh,26px) 0}
.track{display:flex;width:max-content;animation:marq 42s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.set{display:flex;align-items:center;gap:clamp(22px,3vw,44px);padding-right:clamp(22px,3vw,44px);font:400 clamp(38px,5.6vw,84px)/1.1 var(--display);letter-spacing:-.01em;white-space:nowrap}
.sep{color:var(--c);font-size:.42em;display:flex}
@keyframes marq{to{transform:translateX(-50%)}}
.log{list-style:none;margin:clamp(48px,8vh,88px) 0 0;padding:0}
.log>li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,2.3fr);gap:clamp(24px,3.2vw,52px);padding:clamp(28px,4.5vh,44px) 0;border-top:1px solid var(--line);align-items:start}
.log .mat-in{padding:9% 10%}
.kind{margin:0 0 8px;font-size:14px;color:var(--accent)}
.log h3{font:400 clamp(28px,2.6vw,38px)/1.1 var(--display);margin:0 0 12px}
.log-txt>p:not(.kind){margin:0;color:var(--ink-2);max-width:50ch}
.go{display:flex;flex-direction:column;max-width:230px;margin-top:22px}
.go a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px;transition:color .3s,border-color .3s}
.go a:first-child{color:var(--accent)}
.go a:hover{border-color:currentColor}
.go .ico{transition:transform .35s var(--ease)}
.go a:hover .ico{transform:translateX(3px)}
.log dl{margin:0;padding-left:16px;border-left:1px solid var(--accent)}
.log dt{font-size:13px;font-weight:600}
.log dd{margin:2px 0 14px;font-size:14px;color:var(--ink-2)}
.log dd:last-child{margin-bottom:0}
.log-note{margin:6px 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:13px;font-style:italic;color:var(--ink-2)}
.tools{list-style:none;margin:clamp(56px,9vh,96px) 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:clamp(22px,3.2vw,48px);color:var(--ink-2)}
.tools li{display:flex}
.tools .ico{width:26px;height:26px}

/* About */
.about{margin-top:clamp(140px,20vh,240px)}
.about-intro p{margin:24px 0 0;color:var(--ink-2);max-width:44ch}
.cv{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:48px;margin-top:clamp(48px,8vh,88px)}
.cv-col:first-child{grid-column:1/8}
.cv-col:last-child{grid-column:9/13}
.cv h3{font:italic 400 15px/1.4 var(--text);color:var(--ink-2);margin:0 0 14px}
.cv ol{list-style:none;margin:0;padding:0}
.cv li{display:grid;grid-template-columns:1fr auto;column-gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.cv .where{grid-column:1;font-size:15px;color:var(--ink-2)}
.cv .yr{grid-column:2;grid-row:1/3;font-size:14px;color:var(--ink-2);font-variant-numeric:tabular-nums;padding-top:3px}

/* Contact */
.contact{margin-top:clamp(160px,22vh,260px);padding-bottom:clamp(56px,9vh,96px);text-align:center}
.contact-card{padding:clamp(56px,11vh,120px) clamp(20px,4vw,64px);border:1px solid var(--line);border-radius:12px;background:linear-gradient(var(--orange),var(--orange)) no-repeat 0 0/0% 100%;transition:background-size .9s var(--ease),color .5s var(--ease),border-color .5s}
.contact-card:hover,.contact-card:focus-within{background-size:100% 100%;border-color:var(--orange);color:#151515}
.contact-card:hover .contact-links,.contact-card:focus-within .contact-links{color:#151515}
.contact-card:hover .mail,.contact-card:focus-within .mail{border-color:#151515}
.contact-card:hover .mail:hover{color:#151515}
.lost{min-height:62vh;padding-top:clamp(48px,12vh,140px)}
.contact .display{font-size:clamp(38px,5.6vw,82px);font-weight:500}
.mail{display:inline-block;margin-top:28px;font:500 clamp(20px,2.3vw,30px)/1.3 var(--text);letter-spacing:-.01em;border-bottom:1px solid var(--line);transition:color .35s,border-color .35s,transform .25s var(--ease)}
.mail:hover{color:var(--accent);border-color:var(--accent)}
.contact-links{list-style:none;padding:0;margin:30px 0 0;display:flex;justify-content:center;flex-wrap:wrap;gap:12px 32px;font-size:15px;color:var(--ink-2)}
.contact-links a{display:inline-flex;align-items:center;gap:8px;transition:color .3s}
.contact-links a:hover{color:var(--ink)}

.foot{max-width:var(--max);margin:0 auto;padding:26px var(--pad) 34px;display:flex;justify-content:space-between;gap:16px;font-size:14px;color:var(--ink-2)}
.foot a{display:inline-flex;align-items:center;gap:8px}
.foot a:hover{color:var(--ink)}

/* Case studies */
.case-head{padding-top:clamp(28px,7vh,88px)}
.back{display:inline-flex;align-items:center;gap:8px;font-size:15px;color:var(--ink-2);transition:color .3s}
.back:hover{color:var(--ink)}
.case-head h1{font:400 clamp(46px,7vw,104px)/1.06 var(--display);letter-spacing:-.015em;margin:26px 0 0}
.dek{font-size:clamp(17px,1.35vw,20px);color:var(--ink-2);max-width:38ch;margin:18px 0 0}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:clamp(40px,7vh,72px) 0 0;padding-top:18px;border-top:1px solid var(--line)}
.facts dt{font-size:14px;font-style:italic;color:var(--ink-2)}
.facts dd{margin:4px 0 0;font-size:16px}
.case-hero{margin-top:clamp(40px,7vh,72px)}
.case-hero .mat-in{padding:5% 9% 8%}
.chapter{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);margin-top:clamp(96px,14vh,168px)}
.chapter .txt{grid-column:1/5;align-self:start}
.chapter .txt h2{font:400 clamp(27px,2.5vw,38px)/1.12 var(--display);margin:0 0 14px}
.chapter .txt p{margin:0;color:var(--ink-2);max-width:36ch}
.chapter .figs{grid-column:6/13}
.chapter.full .txt{grid-column:1/8}
.chapter.full .figs{grid-column:1/-1;margin-top:40px}
.mats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mats .wide{grid-column:1/-1}
.mat{position:relative;margin:0;background:var(--mat);color:#EDEDE8;border-radius:12px;overflow:hidden}
.mat-in{aspect-ratio:var(--ar,4/3);display:grid;place-items:center;padding:7% 9% 12%}
.mat-in img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 24px 30px rgba(0,0,0,.45))}
.mat figcaption{position:absolute;left:clamp(14px,1.8vw,22px);bottom:clamp(12px,1.6vw,20px);display:flex;align-items:center;gap:10px;margin:0;font-size:14px;font-style:normal;color:#EDEDE8}
.mat-ph{font-size:14px;font-style:italic;color:#8E8E88;text-align:center}
.next{display:block;margin-top:clamp(120px,18vh,200px);padding:clamp(36px,6vh,64px) 0 clamp(56px,9vh,96px);border-top:1px solid var(--line)}
.next span{font-size:15px;font-style:italic;color:var(--ink-2)}
.next strong{display:flex;align-items:center;gap:.3em;margin-top:6px;font:400 clamp(38px,5.2vw,76px)/1.08 var(--display)}
.next .ico{font-size:.5em;transition:transform .6s var(--ease)}
.next:hover .ico{transform:translateX(10px)}

/* Bodoni at one optical size everywhere: the automatic display cut thins hairlines
   (the t crossbar nearly vanishes at headline sizes). */
.brand,.display,.display-2,.name,.statement,.bands h3,.cell h3,.m-verb,.set,.log h3,.case-head h1,.chapter .txt h2,.next strong{font-variation-settings:"opsz" 28}

/* Motion: word cascade on headlines, gentle rise on everything else. */
.cascade .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .08em .16em 0;margin:0 -.08em -.16em 0}
.cascade .w>span{display:inline-block}
.js .cascade .w>span{transform:translateY(108%);transition:transform 1.1s var(--ease);transition-delay:calc(var(--i,0) * 55ms + 80ms)}
.js .cascade.in .w>span{transform:none}
.js .rise{opacity:0;transform:translateY(12px);transition:opacity .7s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0) * 80ms)}
.js .rise.in{opacity:1;transform:none}
.js .rise .mat-in img{transform:scale(1.04);transition:transform 1.6s var(--ease)}
.js .rise.in .mat-in img{transform:none}
/* the observed figure is never clipped (a fully clipped target never reports as intersecting); its pane is */
.js .hero-portrait.rise{opacity:1;transform:none}
.js .hero-portrait.rise .pane{clip-path:inset(100% 0 0 0 round 12px);transition:clip-path 1.3s var(--ease) .3s}
.js .hero-portrait.rise.in .pane{clip-path:inset(0 0 0 0 round 12px)}
.js .hero-portrait.rise img{transform:translateY(7%) scale(1.08);transition:transform 1.7s var(--ease) .4s,clip-path .6s var(--ease)}
.js .hero-portrait.rise.in img{transform:none}

@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.4s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .track{animation:none;width:auto;flex-wrap:wrap}
  .track .set+.set{display:none}
  .method p{opacity:1;transform:none}
  .js .rise,.js .cascade .w>span,.js .rise .mat-in img,.js .hero-portrait.rise .pane,.js .hero-portrait.rise img{opacity:1;transform:none;clip-path:none;transition:none}
  .hero-portrait .col{transition:none}
}

/* Phones: every grid collapses to one column */
@media (max-width:767px){
  .nav{height:64px}
  .brand{font-size:20px}
  .nav nav{gap:10px;font-size:13px}
  .hero-row,.cv,.chapter,.log>li{grid-template-columns:1fr}
  .mats{grid-template-columns:1fr}
  .method{flex-direction:column;min-height:0}
  .method li{min-height:150px;background:var(--c);border-color:var(--c);color:var(--on,#fff)}
  .method p{opacity:1;transform:none}
  .log>li{gap:20px}
  .bento{gap:12px}
  .b1,.b2,.b3,.b4{grid-column:1/-1}
  .cell a{min-height:210px;gap:32px}
  .cell-meta{font-size:14px}
  .hero-row>*,.cv>*,.chapter>*,.chapter.full>*{grid-column:1/-1}
  .bands a{grid-template-columns:1fr auto;border-left:3px solid var(--c);border-radius:0 12px 12px 0}
  .band-txt{grid-column:1/-1;grid-row:2}
  .role-line{display:none}
  .hero{padding-top:20px}
  .hero-portrait{order:-1;justify-self:center;width:84%;max-width:360px;margin:12px 0 24px}
  .name,.hero-copy{text-align:center}
  .lede{margin-inline:auto}
  .ctas{justify-content:center}
  .nav:has(.role-line){justify-content:center}
  .facts{grid-template-columns:1fr 1fr}
  .chapter .figs,.chapter.full .figs{margin-top:28px}
  .foot{flex-direction:column}
  .peek{display:none}
}