/* Dark is the sole portfolio theme; independent of OS appearance. */
:root{
  color-scheme:only dark;
  --bg:#000000; --bg2:#0A0A0A; --card:#161617; --card-hover:#1D1D1F;
  --ink:#F5F5F7; --ink2:#A1A1A6; --ink3:#86868B;
  --line:rgba(255,255,255,.14); --hair:rgba(255,255,255,.08);
  --accent:#2997FF; --mark:#4A4A50;
  --navbg:rgba(0,0,0,.72);
  --shadow:0 4px 14px rgba(0,0,0,.35);
  --shadow-lift:0 8px 20px rgba(0,0,0,.45);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",system-ui,"Helvetica Neue",Arial,sans-serif;
  font-size:17px; line-height:1.47; font-weight:400;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  letter-spacing:-.01em;
}
h1,h2,h3,h4{margin:0; font-weight:600; letter-spacing:-.028em; line-height:1.07; text-wrap:balance;}
p{margin:0;}
a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}
:focus-visible{outline:2px solid var(--accent); outline-offset:4px; border-radius:0;}
.wrap{max-width:1024px; margin:0 auto; padding:0 24px;}
.narrow{max-width:720px; margin:0 auto; padding:0 24px;}

/* ---------- nav ---------- */
nav{position:sticky; top:0; z-index:50; height:48px; display:flex; align-items:center;
  background:var(--navbg); -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid var(--hair);}
nav .wrap{display:flex; align-items:center; justify-content:space-between; width:100%;}
nav .brand{font-size:15px; font-weight:600; color:var(--ink); letter-spacing:-.02em;}
nav .brand:hover{text-decoration:none; opacity:.7;}
nav .links{display:flex; align-items:center; gap:26px;}
nav .links a{font-size:12.5px; color:var(--ink2); font-weight:400; letter-spacing:0;}
nav .links a:hover{color:var(--ink); text-decoration:none;}
nav .links a.nav-immersive{display:inline-flex; align-items:center; justify-content:center; min-height:30px; padding:4px 13px; border:1px solid var(--line); border-radius:0; background:var(--card); color:var(--ink); font-weight:500; white-space:nowrap;}
nav .links a.nav-immersive:hover{background:var(--card-hover);}
/* Keep mobile navigation focused on the standard portfolio. */
@media(max-width:767px),(max-width:899px) and (pointer:coarse),(max-height:520px) and (pointer:coarse){nav .links a.nav-immersive{display:none;}}
@media(max-width:520px){nav .links{gap:17px;} nav .links a{font-size:12px;}}
@media(max-width:380px){nav .wrap{padding-inline:16px;}nav .links{gap:12px;}nav .links a.nav-immersive{padding-inline:9px;}}

/* ---------- reveal ---------- */
[data-reveal]{opacity:0; transform:translateY(18px);
  transition:opacity .52s cubic-bezier(.16,1,.3,1), transform .52s cubic-bezier(.16,1,.3,1);}
[data-reveal].in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  [data-reveal]{opacity:1; transform:none; transition:none;}
}

/* ---------- hero ---------- */
.hero{padding:clamp(72px,13vh,132px) 0 clamp(56px,9vh,96px); text-align:center;}
.hero h1{font-size:clamp(38px,6.2vw,68px); font-weight:800; letter-spacing:-.035em;
  max-width:19ch; margin:0 auto;}
.hero h1 .alt{color:var(--ink3);}
.hero .sub{margin:26px auto 0; max-width:none; font-size:clamp(17px,1.9vw,21px);
  color:var(--ink2); line-height:1.42; text-wrap:balance;}
.pills{display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:34px;}
.pill{font-size:12.5px; color:var(--ink2); background:var(--card); border-radius:0;
  padding:7px 14px; letter-spacing:0;}
.pill.live{color:var(--accent); display:inline-flex; align-items:center; gap:7px;}
.dot{width:6px; height:6px; border-radius:0; background:currentColor;}
@media(prefers-reduced-motion:no-preference){.dot{animation:pulse 2.4s ease-in-out infinite;}}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.3;}}
@media(max-width:600px){
  .hero{text-align:left; padding:clamp(48px,7vh,72px) 0 40px;}
  .hero h1{margin-inline:0; max-width:none;}
  .hero .sub{margin:18px 0 0; font-size:17.5px;}
  .pills{justify-content:flex-start; margin-top:26px;}
  /* A .narrow nested inside a .wrap doubles the gutter on small screens, so its prose
     sits indented against the section heading. padding-inline, never the shorthand. */
  .wrap .narrow{padding-inline:0;}
}

/* ---------- section headers ---------- */
.sec{padding:clamp(56px,8vh,88px) 0;}
@media(max-width:600px){.sec{padding-block-start:clamp(40px,6vh,64px);}}
.sec-title{font-size:clamp(28px,3.6vw,40px); font-weight:600; letter-spacing:0;}
.sec-sub{margin-top:12px; color:var(--ink2); font-size:17px; max-width:56ch;}
.eyebrow{font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--ink3);
  text-transform:uppercase;}

/* Keep alternate-section cards distinct within the dark palette. */
.sec.alt{background:var(--bg2);--card:#1D1D1F;--card-hover:#232325;}

/* ---------- work grid ---------- */
.portfolio-hero{padding-bottom:48px;}
.portfolio-hero{position:relative;}
.hero-glass-canvas{position:absolute;pointer-events:none;z-index:2;display:none;}
@media(min-width:900px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .hero-glass-ready h1{transition:none;}
  .hero-glass-active .hero-glass-canvas{display:block;}
  .hero-glass-active h1{opacity:0!important;}
  .hero-glass-hover{cursor:none;}
}
.work-section{padding-top:0;}
.work-section .grid{margin-top:0;}
@media(max-width:600px){.portfolio-hero{padding-bottom:32px;}}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:34px;}
@media(max-width:760px){.grid{grid-template-columns:1fr; gap:16px;}}
.card{display:block; background:var(--card); border-radius:0; overflow:hidden; color:inherit; box-shadow:var(--shadow);
  transition:transform .34s cubic-bezier(.16,1,.3,1), background .24s, box-shadow .34s;}
.card:hover{text-decoration:none; background:var(--card-hover);
  transform:translateY(-3px); box-shadow:var(--shadow-lift);}
.thumb{aspect-ratio:16/10; overflow:hidden; background:var(--bg2);
  border-bottom:1px solid var(--hair);}
.thumb img{display:block; width:100%; height:100%; object-fit:cover;
  transition:transform .5s cubic-bezier(.16,1,.3,1);}
.card:hover .thumb img{transform:scale(1.028);}
@media (prefers-reduced-motion:reduce){
  .thumb img{transition:none;}
  .card:hover .thumb img{transform:none;}
}
.card-body{padding:22px 24px 26px;}
.card-body .k{font-size:12px; color:var(--ink2); font-weight:500; letter-spacing:.02em;}
.card-body h3{font-size:22px; margin:7px 0 7px; letter-spacing:-.025em;}
.card-body p{font-size:15.5px; color:var(--ink2); line-height:1.45;}

/* Featured card. It must span from 761px up — the width where the grid gains its second
   column — or the odd fifth card leaves a dead cell again. The image only moves beside
   the copy at 900px; below that it stays an ordinary stacked card. */
@media(min-width:761px){.card.feature{grid-column:1 / -1;}}
@media(min-width:900px){
  .card.feature{display:grid; grid-template-columns:1.12fr .88fr;}
  .card.feature .thumb{aspect-ratio:16/10; border-bottom:0; border-right:1px solid var(--hair);}
  .card.feature .card-body{align-self:center; padding:32px 36px;}
  .card.feature .card-body h3{font-size:27px; margin-top:8px; letter-spacing:-.01em;}
  .card.feature .card-body p{font-size:16.5px; margin-top:10px;}
}

/* ---------- stats ---------- */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:0 0 40px;}
@media(max-width:640px){.stats{grid-template-columns:1fr; gap:12px;}}
.stat{background:var(--card); border-radius:0; padding:26px 24px; text-align:center;}
.stat .n{font-size:clamp(34px,4.6vw,46px); font-weight:600; letter-spacing:-.035em; line-height:1;}
.stat .l{margin-top:9px; font-size:13.5px; color:var(--ink2); line-height:1.35;}

/* ---------- prose ---------- */
.prose p{font-size:17.5px; color:var(--ink2); line-height:1.6; margin-bottom:1.05em;}
.prose p strong{color:var(--ink); font-weight:600;}
.prose ul{margin:0 0 1.05em; padding-left:1.2em;}
.prose li{font-size:17.5px; color:var(--ink2); line-height:1.6; margin-bottom:.35em;}
.note{background:var(--card); border-radius:0; padding:20px 22px; margin:28px 0;}
.note .eyebrow{display:block; margin-bottom:8px;}
.note p{font-size:15.5px; color:var(--ink2); line-height:1.5; margin:0;}

/* ---------- capability list ---------- */
.caps{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:32px;}
@media(max-width:700px){.caps{grid-template-columns:1fr;}}
.cap{background:var(--card); border-radius:0; padding:24px 24px 26px;}
.cap h4{font-size:18px; margin-bottom:9px; letter-spacing:-.02em;}
.cap p{font-size:15px; color:var(--ink2); line-height:1.5;}

/* ---------- project page ---------- */
.back{display:inline-flex; align-items:center; gap:6px; font-size:14.5px; color:var(--accent);
  margin-bottom:30px;}
.p-head{padding-block:44px 8px;}
.p-head h1{font-size:clamp(34px,5vw,54px); font-weight:600; letter-spacing:-.033em; margin-top:12px;}
.p-head .lede{margin-top:20px; font-size:clamp(18px,2vw,21px); color:var(--ink2); line-height:1.42;
  max-width:58ch;}
.p-meta{display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:18px;
  padding:30px 0 34px; margin-top:34px; border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);}
.p-meta div .k{font-size:12px; color:var(--ink3); font-weight:500;}
.p-meta div .v{font-size:15.5px; margin-top:5px;}
.p-body{padding-block:44px 20px;}
.p-body h2{font-size:clamp(22px,2.6vw,28px); margin:44px 0 16px; letter-spacing:-.025em;}
.p-body h2:first-child{margin-top:0;}
figure{margin:34px 0;}
figure img,
.clip video{display:block; width:100%; height:auto; border-radius:0; border:1px solid var(--hair);
  background:var(--bg2);}

/* ---------- motion clips ----------
   Silent looping video that behaves like a GIF and weighs about 2% of one. Sources sit
   in data-src, so nothing downloads until clips.js decides to; under reduced motion
   nothing downloads at all until the viewer presses play. Build with tools/make-clip.sh. */
.clip{position:relative;}
.clip-play{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:0; border:0; padding:0; cursor:pointer;
  background:rgba(0,0,0,.55); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  display:grid; place-items:center;
  transition:background .2s, transform .2s cubic-bezier(.16,1,.3,1);}
.clip-play::before{content:""; width:0; height:0; margin-left:5px;
  border-left:17px solid #fff; border-top:11px solid transparent; border-bottom:11px solid transparent;}
.clip-play:hover{background:rgba(0,0,0,.72); transform:translate(-50%,-50%) scale(1.06);}
/* .clip-play sets display:grid, which would beat the UA rule for [hidden]. */
.clip-play[hidden]{display:none;}
@media (prefers-reduced-motion:reduce){.clip-play{transition:none;}
  .clip-play:hover{transform:translate(-50%,-50%);}}
/* A YouTube embed, sized like a figure image. The iframe loads lazily from youtube-nocookie. */
.embed{position:relative; aspect-ratio:16 / 9; border-radius:0; overflow:hidden;
  border:1px solid var(--hair); background:#000;}
.embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
figcaption{margin-top:11px; font-size:13.5px; color:var(--ink3); text-align:center;}
/* ---------- galleries ----------
   A section's images and clips in a two-up grid, so a case study with many figures stays a
   scannable page instead of one long column. Add .span to a figure to give it the full width. */
.gallery{display:grid; grid-template-columns:1fr 1fr; gap:26px 20px; margin:34px 0; align-items:start;}
.gallery > figure{margin:0;}
.gallery > .span{grid-column:1 / -1;}
.gallery figcaption{text-align:left;}
@media(max-width:700px){.gallery{grid-template-columns:1fr; gap:22px;}}
.wip{background:var(--card); border-radius:0; padding:34px 26px; text-align:center; margin:34px 0;}
.wip .eyebrow{display:block; margin-bottom:9px;}
.wip p{font-size:15.5px; color:var(--ink2); max-width:44ch; margin:0 auto;}
.awards{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px;}
.badge{font-size:12.5px; color:var(--ink); background:var(--card); border-radius:0; padding:7px 14px;}
a.badge{text-decoration:none; transition:background-color .16s ease;}
a.badge:hover{background:var(--bg2); text-decoration:underline; text-underline-offset:2px;}
a.badge:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
@media (prefers-reduced-motion:reduce){a.badge{transition:none;}}

.principles{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:34px 0;}
@media(max-width:700px){.principles{grid-template-columns:1fr;}}
.pr{background:var(--card); border-radius:0; padding:24px 24px 26px;}
.pr .n{font-size:12px; font-weight:600; color:var(--accent); letter-spacing:.06em;}
.pr h4{font-size:19px; margin:12px 0 9px; letter-spacing:-.02em;}
.pr p{font-size:15px; color:var(--ink2); line-height:1.5;}
.pull{margin:40px 0; padding:0; text-align:center;}
.pull blockquote{margin:0; font-size:clamp(21px,2.7vw,28px); font-weight:600; letter-spacing:-.025em;
  line-height:1.28; text-wrap:balance;}
.pull cite{display:block; margin-top:14px; font-size:13.5px; color:var(--ink3); font-style:normal;}
.who{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--hair);
  border-radius:0; overflow:hidden; margin:30px 0;}
@media(max-width:640px){.who{grid-template-columns:1fr;}}
.who > div{background:var(--bg); padding:20px 22px;}
.who .r{font-size:15px; font-weight:600; margin-bottom:5px;}
.who .d{font-size:14.5px; color:var(--ink2); line-height:1.45;}
.factbar{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:30px 0 4px;}
@media(max-width:620px){.factbar{grid-template-columns:1fr;}}
.factbar > div{background:var(--card); border-radius:0; padding:22px 20px; text-align:center;}
.factbar .n{font-size:clamp(28px,3.8vw,38px); font-weight:600; letter-spacing:-.03em; line-height:1;}
.factbar .l{margin-top:8px; font-size:13px; color:var(--ink2);}

/* ---------- contact ---------- */
.contact{text-align:center; padding:clamp(60px,9vh,100px) 0;}
.contact h2{font-size:clamp(30px,4.4vw,50px); font-weight:600; letter-spacing:-.032em;
  max-width:18ch; margin:0 auto;}
.contact .links{display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:32px;}
.contact .links a{font-size:15.5px; background:var(--card); border-radius:0; padding:11px 22px;
  color:var(--ink);}
.contact .links a:hover{text-decoration:none; background:var(--card-hover);}
footer{border-top:1px solid var(--hair); padding:22px 0 40px;}
footer p{font-size:12.5px; color:var(--ink3);}
.hidden{display:none;}

/* Embedded studies use the surrounding Mac, Vision Pro or phone controls.
   The head bootstrap sets this only for a recognized same-origin device frame. */
html[data-embedded="case-study"] body > :is(nav,header),
html[data-embedded="case-study"] .p-head > .back{display:none;}

/* Embedded phone studies share the dark reading pane and portfolio palette. */
html[data-embedded="case-study"][data-device="phone"]{
  background:transparent;overscroll-behavior-y:contain;
  --bg:transparent;
}
html[data-embedded="case-study"][data-device="phone"] :is(body,main){background:transparent;}
html[data-embedded="case-study"][data-device="phone"] body{font-size:17px; line-height:1.65;}
html[data-embedded="case-study"][data-device="phone"] body > footer,
html[data-embedded="case-study"][data-device="phone"] main > .contact{display:none;}
html[data-embedded="case-study"][data-device="phone"] main{padding-bottom:36px;}
html[data-embedded="case-study"][data-device="phone"] :is(.wrap,.narrow){
  max-width:720px; padding-inline:clamp(24px,6vw,38px);
}
html[data-embedded="case-study"][data-device="phone"] .wrap .narrow{padding-inline:0;}
html[data-embedded="case-study"][data-device="phone"] .p-head{padding-block:36px 0;}
html[data-embedded="case-study"][data-device="phone"] .p-head h1{
  font-size:clamp(30px,7vw,40px); line-height:1.10; letter-spacing:-.035em;
}
html[data-embedded="case-study"][data-device="phone"] .p-head .lede{
  font-size:18px; line-height:1.6; margin-top:22px; max-width:60ch;
}
html[data-embedded="case-study"][data-device="phone"] .p-meta{
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:20px 24px;
  margin-top:28px; padding-block:24px;
}
html[data-embedded="case-study"][data-device="phone"] .p-body{padding-block:32px 8px;}
html[data-embedded="case-study"][data-device="phone"] .p-body h2{
  font-size:clamp(23px,5vw,28px); line-height:1.2; margin:32px 0 16px;
}
html[data-embedded="case-study"][data-device="phone"] .p-body h2:first-child{margin-top:0;}
html[data-embedded="case-study"][data-device="phone"] .prose :is(p,li){font-size:17px; line-height:1.68;}
html[data-embedded="case-study"][data-device="phone"] .prose p{margin-bottom:1.15em;}

/* Only hide media after the parent has successfully promoted it to the phone.
   Captions remain in the reading flow as compact, single-column story steps. */
html[data-embedded="case-study"][data-device="phone"] .gallery:has(> [data-phone-promoted="true"]){
  display:block; max-width:none; margin-block:16px;
}
html[data-embedded="case-study"][data-device="phone"] figure[data-phone-promoted="true"]{
  display:flex; align-items:center; width:auto; max-width:none; min-height:96px;
  margin:0; padding-block:22px; border-top:1px solid var(--hair);
  opacity:1; transform:none;
}
html[data-embedded="case-study"][data-device="phone"] figure[data-phone-promoted="true"] > :is(img,video,.clip-play){display:none!important;}
html[data-embedded="case-study"][data-device="phone"] figure[data-phone-promoted="true"] > figcaption{
  max-width:none; margin:0; color:var(--ink2); font-size:14.5px; line-height:1.6; text-align:left;
}

/* Concise About introduction and public access context, in the existing hierarchy. */
#about,#work{scroll-margin-top:76px;}
.portfolio-hero .sub{max-width:66ch;text-wrap:pretty;}
.work-intro{margin-bottom:28px;max-width:680px;}
.work-intro h2{font-size:24px;line-height:1.2;margin-bottom:10px;}
@media(max-width:520px){nav .links{gap:12px;}nav .wrap{gap:12px;}nav .brand{font-size:14px;}nav .links a.nav-immersive{padding-inline:10px;}}
@media(max-width:380px){nav .links{gap:8px;}nav .links a{font-size:11px;}nav .links a.nav-immersive{padding-inline:8px;}}

/* Bio topics reuse the Details control, with one active paragraph and a stable row. */
.about-section{--bio-ink:#fff;--bio-paper:#000;}
.bio-copy{display:grid;}
.bio-copy .bio-panel{grid-area:1 / 1;min-width:0;}
/* Reserve the tallest paragraph's space so changing topics cannot move the buttons. */
.bio-copy .bio-panel[hidden]{display:block;visibility:hidden;pointer-events:none;}
.bio-options .bio-button{appearance:none;cursor:pointer;color:var(--bio-ink);border-color:var(--bio-ink);transition:background-color 160ms ease,color 160ms ease;}
.bio-options .bio-button[aria-pressed="true"]{background:var(--bio-ink);color:var(--bio-paper);}
.bio-options .bio-button:focus-visible{outline:2px solid var(--bio-ink);outline-offset:4px;}
.bio-options .bio-button .deets-label>span{--deets-delay:calc(var(--letter-index) * 22ms);}
@media(max-width:600px){.bio-options .bio-button{min-width:0;padding-inline:10px;}}
@media(prefers-reduced-motion:no-preference){
  .bio-copy .bio-panel:not([hidden]){animation:bio-enter 200ms ease-out;}
  @keyframes bio-enter{from{opacity:0;transform:translateY(3px);}to{opacity:1;transform:none;}}
}
@media(prefers-reduced-motion:reduce){.bio-options .bio-button{transition:none;}}
@media(forced-colors:active){
  .bio-options .bio-button[aria-pressed="true"]{background:Highlight;color:HighlightText!important;border-color:Highlight;forced-color-adjust:none;}
}

/* The hero stays concise; longer bio topics live near the contact section. */
.hero-focus{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 0;margin:16px auto 0;color:var(--ink2);font-size:clamp(12.5px,1.4vw,16px);line-height:1.5;}
.hero-focus span{white-space:nowrap;}
.hero-focus span+span::before{content:"|";margin-inline:.7em;color:var(--ink3);}
.about-section{text-align:center;padding-bottom:clamp(32px,5vh,56px);}
.about-section .bio-copy{margin:24px auto 0;max-width:66ch;font-size:clamp(17px,1.9vw,21px);line-height:1.42;color:var(--ink2);text-wrap:pretty;}
@media(max-width:600px){
  .hero-focus{justify-content:flex-start;}
  .about-section{text-align:left;}
  .about-section .bio-copy{font-size:17.5px;margin-top:20px;}
}

@media(max-width:380px){
  .hero-focus{display:grid;grid-template-columns:max-content max-content;row-gap:6px;}
  .hero-focus span:nth-child(odd)::before{content:none;}
}