/* heyprady.xyz — studio.css (v3)
   The page takes on each project's colour as you scroll into it.
   Display: Bricolage Grotesque (condensed, heavy). Text: Instrument Sans. */

:root{
  --base:#121210;
  --page-bg:#121210;
  --text:#f3f0e8;
  --text-2:rgba(243,240,232,.74);
  --text-3:rgba(243,240,232,.52);
  --line:rgba(243,240,232,.14);
  --accent:#f3f0e8;
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --sans:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --pad:clamp(20px,4.4vw,72px);
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-in-out:cubic-bezier(.7,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px;-webkit-text-size-adjust:100%;background:var(--base)}
body{margin:0;background:var(--page-bg);color:var(--text);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;transition:background-color 1.1s var(--ease);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure{margin:0}
h1,h2,h3{font-family:var(--display);font-weight:800;font-stretch:80%;font-variation-settings:"opsz" 96;letter-spacing:-.025em;line-height:.92}
::selection{background:var(--accent);color:var(--base)}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}
.wrap{width:100%;max-width:1440px;margin-inline:auto;padding-inline:var(--pad)}
.skip{position:fixed;left:16px;top:-80px;z-index:100;background:var(--text);color:var(--base);padding:10px 16px;border-radius:999px;font-weight:600}
.skip:focus{top:16px}
.section-alias{position:absolute;margin-top:-90px}

/* ---------- Header ---------- */
.nav,.study-nav{position:fixed;inset:0 0 auto 0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:20px var(--pad);transition:background-color .4s var(--ease),padding .4s var(--ease),box-shadow .4s}
.is-scrolled .nav,.is-scrolled .study-nav{background:color-mix(in srgb,var(--page-bg) 78%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);padding-block:14px;box-shadow:0 1px 0 var(--line)}
.wordmark{font:800 21px/1 var(--display);font-stretch:80%;letter-spacing:-.02em;white-space:nowrap;justify-self:start}
.wordmark span{color:var(--accent);transition:color 1.1s var(--ease)}
.nav nav{display:flex;gap:6px;padding:5px;border-radius:999px;background:rgba(243,240,232,.07);border:1px solid var(--line)}
.nav nav a{padding:7px 16px;border-radius:999px;font-size:14px;font-weight:500;color:var(--text-2);transition:background-color .3s,color .3s}
.nav nav a:hover{color:var(--text);background:rgba(243,240,232,.08)}
.nav-mail,.study-contact{justify-self:end;display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;background:var(--text);color:var(--base);font-size:14px;font-weight:600;transition:transform .3s var(--ease),background-color .3s}
.nav-mail:hover,.study-contact:hover{background:var(--accent)}
.nav-mail span{transition:transform .3s var(--ease)}
.nav-mail:hover span{transform:translate(2px,-2px)}
.study-nav .wordmark{justify-self:center;grid-column:2}
.study-home{grid-column:1;grid-row:1;font-size:14px;font-weight:500;color:var(--text-2);transition:color .3s}
.study-home:hover{color:var(--text)}
.study-contact{grid-column:3;grid-row:1}

/* ---------- Hero ---------- */
.hero{position:relative;padding:clamp(110px,14vh,160px) 0 clamp(40px,6vh,70px)}
.hero{padding-top:clamp(130px,17vh,180px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:center;gap:clamp(20px,3vw,48px);min-height:min(100svh,980px);padding-inline:var(--pad);--hero-accent:#7fd1e6}
.hero-kicker{display:flex;align-items:center;gap:12px;margin-bottom:clamp(22px,2.6vw,32px);font-size:clamp(16px,1.3vw,18px);font-weight:600;color:var(--text-2)}
.kicker-dot{width:10px;height:10px;border-radius:50%;background:var(--hero-accent);box-shadow:0 0 0 6px color-mix(in srgb,var(--hero-accent) 18%,transparent);flex:none;transition:background-color .6s}
.hero-name{font-size:clamp(44px,6.6vw,124px);font-weight:700;line-height:.95;letter-spacing:-.045em;font-stretch:96%}
.hero-name .hl{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.04em}
.hero-name .hl>span{display:inline-block}
.hero-name .hl:nth-child(2){color:rgba(243,240,232,.45)}
.hero-meta{display:grid;gap:28px;padding-top:clamp(28px,3.4vw,44px)}
.hero-lede{max-width:44ch;font-size:clamp(18px,1.5vw,21px);line-height:1.5;color:var(--text-2)}
.hero-lede strong{color:var(--text);font-weight:600}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.btn-primary,.btn-quiet{display:inline-flex;align-items:center;min-height:52px;padding:0 26px;border-radius:999px;font-size:16px;font-weight:600;transition:background-color .3s,color .3s,border-color .3s,transform .3s var(--ease)}
.btn-primary{background:var(--text);color:var(--base)}
.btn-primary:hover{background:#ffd88f}
.btn-quiet{border:1px solid var(--line);color:var(--text)}
.btn-quiet:hover{border-color:var(--text)}




/* ---------- Section titles ---------- */
.section-title,.video-content .section-line h2{font-size:clamp(44px,8vw,128px);letter-spacing:-.04em;line-height:.88}
.work{padding:clamp(80px,12vw,180px) var(--pad) 0}
.work>.section-title{margin-bottom:clamp(40px,6vw,90px)}

/* ---------- Project chapters ---------- */
.chapter{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(30px,5vw,90px);align-items:center;min-height:min(92vh,980px);padding-block:clamp(50px,7vw,100px);border-top:1px solid var(--line)}
.chapter-copy h3{font-size:clamp(48px,6.2vw,118px);overflow-wrap:anywhere;letter-spacing:-.04em;line-height:.86}
.chapter-copy h3 a{background:linear-gradient(currentColor,currentColor) 0 100%/0 3px no-repeat;transition:background-size .6s var(--ease)}
.chapter-copy h3 a:hover{background-size:100% 3px}
.chapter-role{margin-top:22px;font-size:15px;font-weight:600;color:var(--accent)}
.chapter-text{margin-top:16px;max-width:42ch;font-size:clamp(17px,1.35vw,19px);line-height:1.6;color:var(--text-2)}
.chapter-link{display:inline-flex;align-items:center;gap:10px;margin-top:30px;padding:14px 22px;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);font-size:15px;font-weight:600;transition:background-color .35s,color .35s,gap .35s var(--ease)}
.chapter-link:hover{background:var(--accent);color:var(--base);gap:16px}

.chapter-stage{position:relative;display:block;aspect-ratio:7/6;border-radius:clamp(20px,2.4vw,36px);background:color-mix(in srgb,var(--accent) 13%,transparent);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);overflow:hidden;isolation:isolate;cursor:none}
.chapter-stage::before{content:"";position:absolute;inset:-20%;z-index:-1;background:radial-gradient(circle at var(--mx,50%) var(--my,40%),color-mix(in srgb,var(--accent) 30%,transparent),transparent 55%);transition:opacity .5s;opacity:.65}
.chapter-stage img{position:absolute;box-shadow:0 40px 80px -30px rgba(0,0,0,.85);transition:transform 1s var(--ease)}
.stage-phones img{width:30%;aspect-ratio:375/812;object-fit:cover;object-position:top;border-radius:clamp(16px,2vw,28px);top:16%}
.stage-phones img:nth-child(1){left:6%;top:24%;transform:rotate(-6deg)}
.stage-phones img:nth-child(2){left:35%;top:10%;z-index:2}
.stage-phones img:nth-child(3){left:64%;top:24%;transform:rotate(6deg)}
.stage-web .stage-desktop{left:7%;top:12%;width:88%;border-radius:12px}
.stage-web .stage-phone{right:7%;bottom:-6%;width:24%;border-radius:22px;z-index:2}
.stage-stack img{width:80%;border-radius:12px}
.stage-stack img:nth-child(1){left:6%;top:10%}
.stage-stack img:nth-child(2){right:5%;bottom:9%;z-index:2}
@media (hover:hover) and (pointer:fine){
  .chapter-stage:hover .stage-phones img:nth-child(1),.stage-phones:hover img:nth-child(1){transform:rotate(-9deg) translate(-4%,-2%)}
  .stage-phones:hover img:nth-child(2){transform:translateY(-4%)}
  .stage-phones:hover img:nth-child(3){transform:rotate(9deg) translate(4%,-2%)}
  .stage-web:hover .stage-desktop{transform:translate(-2%,-2%)}
  .stage-web:hover .stage-phone{transform:translateY(-8%)}
  .stage-stack:hover img:nth-child(1){transform:translate(-2%,-3%)}
  .stage-stack:hover img:nth-child(2){transform:translate(2%,3%)}
  .chapter-stage:hover::before{opacity:1}
}

/* ---------- WeKashew strip ---------- */
.more-work{padding:clamp(100px,12vw,180px) var(--pad) 0}
.section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,36ch);align-items:end;gap:30px;margin-bottom:clamp(30px,4vw,56px)}
.section-head p{color:var(--text-2);font-size:17px}
.post-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.2vw,18px);cursor:none}
.post-strip img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:clamp(12px,1.4vw,20px);transition:transform .7s var(--ease),filter .5s}
.post-strip img:nth-child(odd){transform:translateY(8%)}
@media (hover:hover) and (pointer:fine){.post-strip:hover img{filter:saturate(.6) brightness(.8)}.post-strip img:hover{filter:none;transform:translateY(-3%) scale(1.03)}}
.strip-caption{margin-top:clamp(40px,5vw,60px);font:800 clamp(30px,3.6vw,56px)/1 var(--display);font-stretch:80%;letter-spacing:-.03em}
.strip-caption span{color:var(--accent)}

/* ---------- Video ---------- */
.video-content{padding:clamp(100px,12vw,180px) var(--pad) 0;max-width:none}
.video-content .section-line{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,36ch);align-items:end;gap:30px;margin-bottom:clamp(30px,4vw,56px)}
.video-content .section-line p{color:var(--text-2);font-size:17px}
.misc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,48px) clamp(16px,1.6vw,24px)}
.video-player{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#1d1c19}
.video-player iframe,.video-player video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;background:#1d1c19}
.video-poster{position:absolute;inset:0;padding:0;border:0;background:none;cursor:pointer}
.video-poster img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.poster-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.5),transparent 60%)}
.video-play-icon,.video-play-button{position:absolute;left:16px;bottom:16px;z-index:2;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:0;background:var(--text);color:var(--base);font-size:15px;transition:transform .4s var(--ease),background-color .3s}
.video-play-button{cursor:pointer}
.has-started .video-play-button{display:none}
.native-video video{transition:transform 1s var(--ease)}
.native-video:not(.has-started)::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.5),transparent 60%)}
@media (hover:hover) and (pointer:fine){.video-poster:hover img,.native-video:not(.has-started):hover video{transform:scale(1.05)}.video-poster:hover .video-play-icon,.native-video:not(.has-started):hover .video-play-button,.video-play-button:hover{transform:scale(1.12);background:var(--accent)}}
.misc-card-caption{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:16px}
.misc-card-caption h3{flex-basis:100%;font-size:clamp(22px,1.9vw,28px);letter-spacing:-.02em;line-height:1.05}
.misc-card-caption a{font-size:14px;color:var(--text-3);transition:color .3s}
.misc-card-caption a:hover{color:var(--text)}

/* ---------- About ---------- */
.about{padding:clamp(120px,14vw,220px) var(--pad) 0}
.about-statement{max-width:17ch;font-size:clamp(42px,6.6vw,108px);letter-spacing:-.04em;line-height:.92}
.about-dot{color:var(--accent)}
.about-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:clamp(36px,5vw,64px)}
.about-body p{grid-column:2;max-width:52ch;font-size:clamp(17px,1.4vw,20px);line-height:1.65;color:var(--text-2)}
.skills{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:clamp(70px,9vw,130px)}
.skill-group{padding-top:20px;border-top:1px solid var(--line)}
.skill-group h3{font-size:24px;letter-spacing:-.02em;line-height:1.1;margin-bottom:14px}
.skill-group p{font-size:15px;line-height:1.8;color:var(--text-2)}
.skill-group a{display:inline-block;margin-top:10px;font-size:15px;font-weight:600;border-bottom:1px solid currentColor}

/* ---------- Footer ---------- */
.footer{padding:clamp(140px,16vw,240px) var(--pad) 28px}
.footer>p{font-size:17px;color:var(--text-2)}
.contact-title{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-top:14px;font:800 clamp(60px,11.5vw,200px)/.84 var(--display);font-stretch:76%;letter-spacing:-.05em}
.contact-words{background:linear-gradient(currentColor,currentColor) 0 96%/0 .05em no-repeat;transition:background-size .7s var(--ease)}
.contact-title:hover .contact-words{background-size:100% .05em}
.contact-arrow{display:grid;place-items:center;flex:none;width:clamp(70px,10vw,150px);aspect-ratio:1;border-radius:50%;background:var(--text);color:var(--base);font:400 clamp(30px,4vw,60px)/1 var(--sans);transition:background-color .3s,transform .5s var(--ease)}
.contact-title:hover .contact-arrow{background:#ffd88f}
.email{display:inline-block;margin-top:30px;font-size:clamp(18px,1.6vw,22px);color:var(--text-2);border-bottom:1px solid var(--line);padding-bottom:3px;transition:color .3s,border-color .3s}
.email:hover{color:var(--text);border-color:var(--text)}
.footer-bottom,.study-footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;margin-top:clamp(80px,10vw,140px);padding-top:22px;border-top:1px solid var(--line);font-size:14px;color:var(--text-3)}
.footer-bottom button{background:none;border:0;padding:0;cursor:pointer;color:var(--text-3)}
.footer-bottom a:hover,.footer-bottom button:hover,.study-footer a:hover{color:var(--text)}
#toast{position:fixed;left:50%;bottom:24px;z-index:80;transform:translate(-50%,24px);opacity:0;pointer-events:none;padding:12px 20px;border-radius:999px;background:var(--text);color:var(--base);font-size:14px;font-weight:600;transition:opacity .3s,transform .4s var(--ease)}
#toast.visible{opacity:1;transform:translate(-50%,0)}

/* ---------- Cursor label ---------- */
.cursor-label{position:fixed;left:0;top:0;z-index:90;pointer-events:none;padding:12px 18px;border-radius:999px;background:var(--accent);color:var(--base);font-size:14px;font-weight:700;white-space:nowrap;opacity:0;transform:translate(-50%,-50%) scale(.6);transition:opacity .25s,transform .35s var(--ease),background-color .6s}
.cursor-label.is-on{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion:no-preference){
  .hero-name .hl>span{animation:rise 1.2s var(--ease) both}
  .hero-name .hl:nth-child(2)>span{animation-delay:.12s}
  .hero-kicker{animation:fade-up .9s var(--ease) both}
  .hero-meta{animation:fade-up 1s var(--ease) .35s both}
  .kicker-dot{animation:pulse 2.6s ease-in-out 1.2s infinite}
  .js-reveal{opacity:0;transform:translateY(60px);transition:opacity 1s var(--ease),transform 1.2s var(--ease)}
  .js-reveal.is-in{opacity:1;transform:none}
  @supports (animation-timeline:view()){
    .stage-phones img:nth-child(1){animation:drift-a linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    .stage-phones img:nth-child(3){animation:drift-b linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    .stage-web .stage-phone,.stage-stack img:nth-child(2){animation:drift-c linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    .post-strip img:nth-child(odd){animation:drift-d linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  }
}
@keyframes rise{from{transform:translateY(105%)}}
@keyframes fade-up{from{opacity:0;transform:translateY(24px)}}
@keyframes fade-in{from{opacity:0}}
@keyframes pulse{50%{box-shadow:0 0 0 11px transparent}}
@keyframes drift-a{from{translate:0 18%}to{translate:0 -10%}}
@keyframes drift-b{from{translate:0 28%}to{translate:0 -16%}}
@keyframes drift-c{from{translate:0 30%}to{translate:0 -20%}}
@keyframes drift-d{from{translate:0 14%}to{translate:0 -10%}}

/* =======================================================================
   Case studies
   ======================================================================= */
body.study-page{--page-bg:var(--base)}
body.project-truecolors{--accent:#7fd1e6;--tint:#0d3133}
body.project-chimere{--accent:#e2b04f;--tint:#2a200d}
body.project-dining{--accent:#ef5bb5;--tint:#2a0b23}
body.project-multichain{--accent:#9d90ff;--tint:#10133a}
body.project-wekashew{--accent:#9bc27d;--tint:#18241a}
body.project-glitter{--accent:#f07a8a;--tint:#2a1016}
body.study-page::before{content:"";position:absolute;inset:0 0 auto 0;height:min(1300px,140vh);z-index:-1;background:linear-gradient(to bottom,var(--tint,#121210) 0%,var(--tint,#121210) 45%,var(--base) 100%)}
.reading-progress{position:fixed;inset:0 0 auto 0;z-index:60;width:100%;height:3px;border:0;background:transparent;appearance:none;-webkit-appearance:none}
.reading-progress::-webkit-progress-bar{background:transparent}
.reading-progress::-webkit-progress-value{background:var(--accent)}
.reading-progress::-moz-progress-bar{background:var(--accent)}

.study-hero{padding-top:clamp(130px,16vh,180px)}
.study-hero>.eyebrow{font-size:15px;font-weight:600;color:var(--accent)}
.study-hero h1{margin-top:18px;max-width:14ch;font-size:clamp(56px,9vw,160px);letter-spacing:-.045em;line-height:.86;font-stretch:76%}
.study-deck{max-width:50ch;margin-top:30px;font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--text-2)}
.study-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:48px 0 0;padding-top:22px;border-top:1px solid var(--line)}
.study-facts dt{font-size:13px;color:var(--text-3)}
.study-facts dd{margin:6px 0 0;font-size:16px;font-weight:600}

.study-cover{position:relative;margin-top:clamp(40px,5vw,70px);border-radius:clamp(20px,2.4vw,36px);overflow:hidden;background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);isolation:isolate}
.study-cover::before{content:"";position:absolute;inset:-10% 10% 20%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 28%,transparent),transparent)}
.cover-images{display:flex;justify-content:center;align-items:flex-end;gap:clamp(14px,2.6vw,40px);padding:clamp(30px,5vw,70px) clamp(20px,4vw,60px) 0}
.cover-images>a{display:block;min-width:0}
.cover-phones .cover-images>a{flex:0 1 270px}
.cover-phones .cover-images img{width:100%;aspect-ratio:375/812;object-fit:cover;object-position:top;border-radius:clamp(18px,2.4vw,32px) clamp(18px,2.4vw,32px) 0 0;box-shadow:0 30px 70px -30px rgba(0,0,0,.85)}
.cover-phones .cover-images>a:nth-child(2) img{transform:translateY(-7%)}
.cover-web .cover-images>a,.cover-art .cover-images>a{flex:1;max-width:1100px}
.cover-web .cover-images img,.cover-art .cover-images img{width:100%;border-radius:14px 14px 0 0;box-shadow:0 30px 70px -30px rgba(0,0,0,.85)}
.cover-panels .cover-images>a{flex:0 1 46%}
.cover-panels .cover-images img{border-radius:14px 14px 0 0}
.cover-social .cover-images{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,240px));justify-content:center;padding-bottom:clamp(30px,5vw,70px)}
.cover-social .cover-images img{aspect-ratio:1;object-fit:cover;border-radius:16px;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.cover-note{display:flex;justify-content:space-between;gap:20px;padding:16px clamp(20px,3vw,30px);font-size:14px;font-weight:600;background:rgba(0,0,0,.28)}
.cover-note span{font-weight:400;color:var(--text-2)}
.video-cover{background:none;border:0;overflow:visible}
.video-cover::before{display:none}
.video-cover .video-player{border-radius:clamp(20px,2.4vw,36px)}
.video-cover figcaption{display:flex;justify-content:space-between;gap:16px;margin-top:16px;font-size:14px;color:var(--text-2)}
.video-cover figcaption a{color:var(--accent);font-weight:600}
@media (prefers-reduced-motion:no-preference){
  .study-hero>.eyebrow,.study-hero h1,.study-deck,.study-facts{animation:fade-up 1s var(--ease) both}
  .study-hero h1{animation-delay:.06s}.study-deck{animation-delay:.14s}.study-facts{animation-delay:.2s}
  .cover-images>a{animation:cover-rise 1.2s var(--ease) .25s both}
  .cover-images>a:nth-child(2){animation-delay:.15s}.cover-images>a:nth-child(3){animation-delay:.35s}
}
@keyframes cover-rise{from{opacity:0;transform:translateY(80px)}}

.study-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:clamp(30px,6vw,110px);padding-top:clamp(70px,9vw,130px)}
.study-sidebar{position:sticky;top:100px;align-self:start}
.study-sidebar>.eyebrow{display:block;font-size:13px;color:var(--text-3);margin-bottom:14px}
.study-sidebar nav{display:flex;flex-direction:column;gap:2px}
.study-sidebar nav a{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:14px;color:var(--text-3);transition:color .3s}
.study-sidebar nav a::before{content:"";width:8px;height:8px;border-radius:50%;border:1px solid currentColor;flex:none;transition:background-color .3s,transform .3s var(--ease)}
.study-sidebar nav a:hover{color:var(--text)}
.study-sidebar nav a[aria-current]{color:var(--text)}
.study-sidebar nav a[aria-current]::before{background:var(--accent);border-color:var(--accent);transform:scale(1.3)}
.study-sidebar>p{margin-top:18px;font-size:13px;color:var(--text-3)}

.study-content{min-width:0}
.study-section{padding-bottom:clamp(70px,8vw,120px);scroll-margin-top:100px}
.study-section+.study-section{padding-top:clamp(50px,6vw,80px);border-top:1px solid var(--line)}
.study-section>.eyebrow{display:block;margin-bottom:16px;font-size:14px;font-weight:600;color:var(--accent)}
.study-section>h2{max-width:18ch;margin-bottom:26px;font-size:clamp(40px,4.8vw,76px);letter-spacing:-.035em;line-height:.92}
.study-section>p{max-width:62ch;font-size:clamp(17px,1.3vw,19px);line-height:1.7;color:var(--text-2)}
.study-section>p+p{margin-top:18px}
.study-section>.study-lead{font-size:clamp(20px,1.8vw,26px);line-height:1.5;color:var(--text)}
.study-note{font-size:15px;color:var(--text-3)}

.visual-group{margin-top:40px}
.gallery-grid{display:grid;gap:clamp(30px,3.4vw,48px) clamp(18px,2vw,28px)}
.gallery-grid.phones{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.gallery-grid.two-up{grid-template-columns:repeat(2,minmax(0,1fr))}
.gallery-grid.single-screen{grid-template-columns:minmax(0,460px)}
.gallery-grid.web{grid-template-columns:1fr}
.gallery-grid.deck{grid-template-columns:repeat(2,minmax(0,1fr))}
.gallery-grid.panels.single-screen{grid-template-columns:minmax(0,560px)}
.gallery-grid.social{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.gallery-window{position:relative;display:flex;justify-content:center;padding:clamp(18px,2.6vw,36px);border-radius:clamp(18px,2vw,28px);background:color-mix(in srgb,var(--accent) 9%,#161614);border:1px solid color-mix(in srgb,var(--accent) 16%,transparent);overflow:hidden;transition:border-color .4s,transform .6s var(--ease)}
.gallery-window img{border-radius:12px;box-shadow:0 26px 60px -30px rgba(0,0,0,.85);transition:transform .8s var(--ease)}
.phones .gallery-window img{width:auto;max-width:100%;max-height:700px;border-radius:24px}
@media (hover:hover) and (pointer:fine){.gallery-window:hover{border-color:color-mix(in srgb,var(--accent) 50%,transparent)}.gallery-window:hover img{transform:scale(1.02)}}
.long-screen{max-height:680px;align-items:flex-start}
.long-screen::after{content:"";position:absolute;inset:auto 0 0 0;height:180px;background:linear-gradient(to top,color-mix(in srgb,var(--accent) 9%,#161614) 30%,transparent)}
.long-screen-label{position:absolute;left:50%;bottom:24px;z-index:2;transform:translateX(-50%);padding:10px 16px;border-radius:999px;background:var(--text);color:var(--base);font-size:13px;font-weight:600;white-space:nowrap}
.gallery-item figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:16px;font-size:16px;font-weight:600}
.gallery-item figcaption a{font-weight:600;color:var(--accent)}
.gallery-reason{margin-top:8px;max-width:60ch;font-size:15px;line-height:1.7;color:var(--text-2)}
.gallery-source-note{margin-top:24px;font-size:13px;color:var(--text-3)}

.screen-story{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center;margin-top:48px}
.screen-story.reverse{grid-template-columns:minmax(0,1fr) minmax(0,340px)}
.screen-story.reverse .screen-art{order:2}
.screen-art{display:flex;justify-content:center;padding:clamp(18px,2.6vw,32px);border-radius:clamp(18px,2vw,28px);background:color-mix(in srgb,var(--accent) 9%,#161614);border:1px solid color-mix(in srgb,var(--accent) 16%,transparent)}
.screen-art img{max-height:640px;width:auto;border-radius:24px;box-shadow:0 26px 60px -30px rgba(0,0,0,.85)}
.artifact-label{font-size:13px;font-weight:600;color:var(--accent)}
.screen-analysis h3{margin:10px 0 14px;font-size:clamp(30px,2.8vw,44px);letter-spacing:-.03em;line-height:.95}
.screen-analysis>p{font-size:17px;line-height:1.7;color:var(--text-2)}
.screen-analysis ol{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:14px}
.screen-analysis li strong{display:block;font-weight:600}
.screen-analysis li p{font-size:15px;line-height:1.6;color:var(--text-2)}
.screen-links{display:flex;gap:20px;margin-top:22px;font-size:14px}
.study-text-link{font-weight:600;color:var(--accent);border-bottom:1px solid currentColor;padding-bottom:1px}

.wireframe-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:40px}
.dining-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:40px}
.comparison-label{margin-bottom:12px;font-size:13px;font-weight:600;color:var(--accent)}
.wireframe-image{display:flex;justify-content:center;padding:clamp(16px,2vw,26px);border-radius:24px;background:color-mix(in srgb,var(--accent) 9%,#161614);border:1px solid color-mix(in srgb,var(--accent) 16%,transparent)}
.wireframe-image img{max-height:560px;width:auto;border-radius:20px;box-shadow:0 20px 50px -26px rgba(0,0,0,.85)}
.wireframe-item figcaption{margin-top:16px}
.wireframe-item h3{font-size:24px;letter-spacing:-.02em;line-height:1.05;margin-bottom:8px}
.wireframe-item p{font-size:15px;line-height:1.65;color:var(--text-2)}

.study-sources>h2{margin-bottom:22px}
.study-links{display:flex;flex-wrap:wrap;gap:10px}
.study-links a{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:999px;border:1px solid var(--line);font-size:15px;font-weight:600;transition:background-color .3s,color .3s,border-color .3s}
.study-links a:hover{background:var(--accent);border-color:var(--accent);color:var(--base)}

.study-next{display:grid;grid-template-columns:1fr auto;align-items:end;gap:14px 30px;padding-top:clamp(60px,8vw,110px);border-top:1px solid var(--line)}
.study-next>.eyebrow{grid-column:1/-1;font-size:15px;color:var(--text-3)}
.study-next>a:not(.study-back){font:800 clamp(56px,10vw,180px)/.84 var(--display);font-stretch:76%;letter-spacing:-.05em;transition:color .4s}
.study-next>a:not(.study-back) span{display:inline-block;margin-left:.15em;color:var(--accent);font-family:var(--sans);font-weight:300;font-size:.5em;transition:transform .5s var(--ease)}
.study-next>a:not(.study-back):hover span{transform:translate(8px,-8px)}
.study-back{font-size:15px;color:var(--text-2)}
.study-back:hover{color:var(--text)}
.study-footer{margin-top:clamp(50px,6vw,80px);padding-bottom:30px}

/* motion.js scroll reveals on case pages */
@media (prefers-reduced-motion:no-preference){
  .motion-ready .reveal{opacity:0;transform:translateY(50px);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
  .motion-ready .reveal.is-visible{opacity:1;transform:none}
  .motion-ready .reveal.is-visible.reveal-later{transition-delay:.1s}
}
@view-transition{navigation:auto}
::view-transition-old(root){animation:fade-out .25s ease both}
::view-transition-new(root){animation:fade-in .45s var(--ease) both}
@keyframes fade-out{to{opacity:0}}

/* image viewer, restyled */
.image-viewer{background:#0e0e0c!important}
.image-viewer::backdrop{background:#0e0e0c!important}
.image-viewer-bar{background:#161614!important;border-color:var(--line)!important}
.image-viewer-bar h2,.image-viewer button,.image-viewer output{font-family:var(--sans)!important;letter-spacing:0}
.image-viewer button{border-radius:999px!important;border-color:var(--line)!important}
.image-viewer button[aria-pressed=true]{background:var(--accent)!important;border-color:var(--accent)!important;color:var(--base)!important}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .chapter{grid-template-columns:1fr;min-height:0}
  .misc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .skills{grid-template-columns:repeat(2,minmax(0,1fr))}
  .study-layout{grid-template-columns:1fr}
  .study-sidebar{position:static}
  .study-sidebar nav{flex-direction:row;flex-wrap:wrap;gap:4px 18px}
}
@media (max-width:760px){
  body{font-size:16px}
  .nav{grid-template-columns:1fr auto}
  .nav nav{display:none}
  .study-nav{grid-template-columns:1fr auto}
  .study-nav .wordmark{grid-column:1;justify-self:start}
  .study-home{display:none}
  .study-contact{grid-column:2}
  .hero{grid-template-columns:1fr;min-height:0;padding-top:120px}
  .section-head,.video-content .section-line{grid-template-columns:1fr;gap:12px}
  .post-strip{grid-template-columns:repeat(5,64%);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}
  .post-strip img{scroll-snap-align:start}
  .post-strip img:nth-child(odd){transform:none;animation:none!important}
  .misc-grid,.about-body,.gallery-grid.two-up,.gallery-grid.deck,.dining-comparison,.wireframe-grid{grid-template-columns:1fr}
  .about-body p{grid-column:1}
  .skills{grid-template-columns:1fr}
  .contact-arrow{width:64px;font-size:28px}
  .study-facts{grid-template-columns:1fr;gap:14px}
  .screen-story,.screen-story.reverse{grid-template-columns:1fr}
  .screen-story.reverse .screen-art{order:0}
  .cover-social .cover-images{grid-template-columns:repeat(3,1fr)}
  .cover-social .cover-images>a:nth-child(n+4){display:none}
  .cover-note{flex-direction:column;gap:2px}
  .study-next{grid-template-columns:1fr}
  .chapter-stage,.post-strip{cursor:auto}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body{transition:none}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js-reveal{opacity:1!important;transform:none!important}
}

/* case pages: let the project tint show behind the hero */
body.study-page{position:relative;background:transparent}
.study-sidebar nav a{text-transform:lowercase}
.study-sidebar nav a::first-letter{text-transform:uppercase}
.chapter-logo{height:30px;width:auto;margin-bottom:26px}
.chapter-logo.logo-round{height:54px}
.chapter-logo.logo-mark{height:40px}

/* ---------- Hero sculpture (hero3d.js) ---------- */
.sculpt-stage{position:relative;display:grid;justify-items:center;align-content:center;gap:18px;min-height:clamp(460px,44vw,700px)}
.sculpt-stage::before{content:"";position:absolute;inset:6% 0 16%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--hero-accent) 30%,transparent),transparent 72%);filter:blur(28px);transition:background .9s}
.sculpt{all:unset;position:relative;display:block;width:min(100%,clamp(300px,36vw,560px));aspect-ratio:1;cursor:grab;touch-action:pan-y;-webkit-tap-highlight-color:transparent;border-radius:50%}
.sculpt:active{cursor:grabbing}
.sculpt:focus-visible{outline:2px solid var(--hero-accent);outline-offset:6px}
.sculpt canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}
.sculpt::after{content:"";position:absolute;left:24%;right:24%;bottom:2%;height:5%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.5),transparent);filter:blur(6px);z-index:-1}
.sculpt-fallback{position:absolute;inset:18%;border-radius:47% 53% 44% 56%/52% 45% 55% 48%;background:radial-gradient(circle at 34% 30%,#fff 0,color-mix(in srgb,var(--hero-accent) 70%,#fff) 14%,var(--hero-accent) 38%,color-mix(in srgb,var(--hero-accent) 40%,#0d0d0c) 78%);box-shadow:inset -18px -26px 60px rgba(0,0,0,.45);transition:opacity .8s,background .8s}
.sculpt-stage.is-ready .sculpt-fallback{opacity:0}
.sculpt-caption{display:grid;justify-items:center;gap:4px;text-align:center}
.sculpt-name{font:700 18px/1.2 var(--display);letter-spacing:-.01em;color:var(--hero-accent);transition:color .6s}
.sculpt-hint{font-size:14px;color:var(--text-3)}
@media (prefers-reduced-motion:no-preference){.sculpt-stage{animation:fade-up 1.2s var(--ease) .3s both}}
@media (max-width:760px){.sculpt-stage{min-height:0;padding-top:12px}.sculpt{width:min(78vw,340px)}}

/* Case study: logo showcase */
.logo-showcase{margin:clamp(24px,3vw,40px) 0 0;display:grid;gap:12px}
.logo-showcase img{display:block;width:100%;height:auto;padding:clamp(36px,7vw,96px) clamp(24px,8vw,120px);background:#f6f4ee;border-radius:clamp(16px,2vw,24px);box-sizing:border-box}
.logo-showcase figcaption{font-size:13px;color:var(--text-3)}

/* True Colors card: App Store artwork keeps its 9:16 frame */
.stage-store img{aspect-ratio:9/16;height:auto;object-position:center;width:29%}