/* Work index, project pages, About and Contact. Tokens and shared components live in base.css. */
.wrap{max-width:var(--max);margin:0 auto}
.band{padding:var(--s-super) 24px}
.band-dark{background:var(--canvas)}
.band-alt{background:var(--canvas-alt)}
.eyebrow{color:var(--body-on-dark)}
.light .eyebrow,.parch .eyebrow{color:var(--muted-on-light)}
.lead{font-size:24px;font-weight:300;line-height:1.5;letter-spacing:0}
.prose{display:flex;flex-direction:column;gap:20px;max-width:680px}
.prose p{color:var(--body-on-light)}
.band-dark .prose p,.band-alt .prose p{color:var(--body-on-dark)}

/* reveal on enter (M9); end state without motion */
.motion .rv{opacity:0;transform:translateY(32px);transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.motion .rv.in{opacity:1;transform:none}

/* ---------- page hero (Work, About, Contact) ---------- */
.page-hero{padding:180px 24px 72px;background:var(--canvas)}
.page-hero .wrap{display:flex;flex-direction:column;gap:20px}
.page-hero .big-outline{font-weight:500;font-size:clamp(96px,20vw,300px);line-height:.9;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px #fff;white-space:nowrap;margin-left:-.04em}
.page-hero h1{font-weight:500;font-size:clamp(32px,4.4vw,56px);line-height:1.07;letter-spacing:-.9px;max-width:900px}
.page-hero p{color:var(--body-strong-on-dark);max-width:620px}

/* ---------- Work index: hairline rows, whole row is the link ---------- */
.index{padding:24px 24px var(--s-super);background:var(--canvas)}
.index ol{list-style:none;margin:0 auto;padding:0;max-width:var(--max);border-top:1px solid var(--hairline)}
.row{display:grid;grid-template-columns:56px 240px 1fr 220px 64px;gap:32px;align-items:center;padding:28px 0;border-bottom:1px solid var(--hairline);text-decoration:none;color:#fff;transition:transform var(--dur-fast) var(--ease-out)}
.row:active{transform:scale(.99)}
.row .n{color:var(--body-on-dark)}
.row .thumb{aspect-ratio:16/9;background:var(--canvas-elevated);overflow:hidden}
.row .thumb img{width:100%;height:100%;object-fit:cover}
.row h2{font-weight:500;font-size:28px;line-height:1.2;letter-spacing:-.2px}
.row p{margin-top:8px;font-size:14px;line-height:1.5;letter-spacing:-.224px;color:var(--body-strong-on-dark);max-width:560px}
.row .tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{display:inline-block;background:var(--canvas-elevated);color:#fff;border-radius:9999px;padding:4px 12px;font-size:11px;font-weight:600;letter-spacing:1.1px;text-transform:uppercase;line-height:1.4}
.row .yr{text-align:right;color:var(--body-strong-on-dark);font-size:14px}
.row .go{display:inline-block;margin-top:14px;font:600 13px/1.4 var(--font);letter-spacing:1.4px;text-transform:uppercase;text-decoration:underline;text-underline-offset:6px}

/* CTA band */
.cta{padding:var(--s-xxl) 24px;text-align:center}
.cta .wrap{display:flex;flex-direction:column;align-items:center;gap:28px}
.cta h2{font-weight:500;font-size:clamp(28px,3.6vw,40px);line-height:1.1;letter-spacing:-.5px;max-width:720px}
.cta .row-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ---------- project page ---------- */
.case-hero{padding:160px 24px 0;background:var(--canvas)}
.case-hero .wrap{display:flex;flex-direction:column;gap:24px}
.crumb{color:var(--body-on-dark);text-decoration:none}
.crumb a{text-decoration:none}
.case-hero h1{font-weight:500;font-size:clamp(40px,5.6vw,80px);line-height:1.05;letter-spacing:-1.6px;max-width:1000px}
.case-hero .lead{color:var(--body-strong-on-dark);max-width:820px}
.meta{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hairline);margin-top:24px}
.meta div{padding:20px 24px 20px 0;display:flex;flex-direction:column;gap:6px}
.meta div+div{padding-left:24px;border-left:1px solid var(--hairline)}
.meta .label{color:var(--body-on-dark)}
.meta span:last-child{font-size:14px;line-height:1.43;letter-spacing:-.224px;color:#fff}
.case-img{max-width:var(--max);margin:48px auto 0;aspect-ratio:16/9;background:var(--canvas-elevated);overflow:hidden}
.case-img img{width:100%;height:100%;object-fit:cover}
.case-hero{padding-bottom:var(--s-xxl)}

.sec{display:grid;grid-template-columns:280px 1fr;gap:64px;align-items:start}
.sec-label{display:flex;flex-direction:column;gap:12px;position:sticky;top:96px}
.sec-label .num{font-weight:500;font-size:28px;letter-spacing:-.2px}
.light .sec-label .num,.parch .sec-label .num{color:var(--muted-on-light)}
.band-dark .sec-label .num{color:var(--body-on-dark)}

.insight-statement{font-weight:500;font-size:clamp(28px,3.6vw,44px);line-height:1.12;letter-spacing:-.6px;max-width:900px}
.points{list-style:none;padding:0;margin:40px 0 0;max-width:760px;border-top:1px solid var(--hairline-on-light)}
.points li{padding:18px 0;border-bottom:1px solid var(--hairline-on-light);color:var(--body-on-light);display:grid;grid-template-columns:40px 1fr;gap:12px}
.points li::before{content:counter(pt,decimal-leading-zero);counter-increment:pt;font-size:11px;font-weight:600;letter-spacing:1.1px;color:var(--muted-on-light);padding-top:5px}
.points{counter-reset:pt}
.band-dark .points{border-color:var(--hairline)}
.band-dark .points li{border-color:var(--hairline);color:var(--body-strong-on-dark)}
.band-dark .points li::before{color:var(--body-on-dark)}

.concept-intro{font-size:24px;font-weight:300;line-height:1.5;color:var(--body-strong-on-dark);max-width:820px}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:32px 24px;margin-top:72px}
.gallery figure{margin:0;display:flex;flex-direction:column;gap:12px}
.gallery button{display:block;padding:0;border:0;border-radius:0;background:var(--canvas-elevated);cursor:zoom-in;aspect-ratio:16/9;overflow:hidden;box-shadow:var(--shadow-product);transition:transform var(--dur-fast) var(--ease-out)}
.gallery button:active{transform:scale(.97)}
.gallery img{width:100%;height:100%;object-fit:cover}
.gallery figcaption{font-size:14px;line-height:1.43;letter-spacing:-.224px;color:var(--body-on-dark)}

.unit{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:8px}
.unit .plate{width:100%}
.unit .plate:nth-child(odd){transform:rotate(-1deg)}.unit .plate:nth-child(even){transform:rotate(1deg)}

.outcome-text{font-weight:500;font-size:clamp(24px,2.8vw,32px);line-height:1.25;letter-spacing:-.3px;max-width:900px}
.metrics{display:flex;flex-wrap:wrap;gap:24px 64px;margin-top:56px;border-top:1px solid var(--hairline-on-light);padding-top:32px}
.metric{display:flex;flex-direction:column;gap:10px;min-width:180px}
.metric b{font-weight:600;font-size:clamp(48px,6vw,80px);line-height:1;letter-spacing:-1.6px}
.metric.hl b{color:var(--primary)}
.metric span{font-size:11px;font-weight:600;letter-spacing:1.1px;text-transform:uppercase;line-height:1.4;color:var(--muted-on-light);max-width:240px}
.forecast{margin-top:48px;padding:24px 0 0;border-top:1px dashed var(--hairline-on-light)}
.forecast .label{color:var(--muted-on-light)}
.forecast ul{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-wrap:wrap;gap:16px 48px}
.forecast li{display:flex;flex-direction:column;gap:6px;max-width:300px}
.forecast li b{font-weight:500;font-size:32px;letter-spacing:-.5px;color:var(--body-on-light)}
.forecast li span{font-size:14px;line-height:1.43;color:var(--muted-on-light)}

/* next / previous */
.pager{background:var(--canvas);padding:var(--s-xxl) 24px}
.pager .wrap{display:grid;grid-template-columns:1fr 2fr;gap:24px;align-items:stretch}
.pager a{display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:32px;border:1px solid var(--hairline);text-decoration:none;color:#fff;min-height:240px;transition:transform var(--dur-fast) var(--ease-out)}
.pager a:active{transform:scale(.98)}
.pager .label{color:var(--body-on-dark)}
.pager .prev-t{font-weight:500;font-size:28px;letter-spacing:-.2px;line-height:1.2}
.pager .next{position:relative;overflow:hidden;background:var(--canvas-elevated);border-color:var(--canvas-elevated)}
.pager .next-t{font-weight:500;font-size:clamp(48px,7vw,104px);line-height:.95;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px #fff}
.pager .next .more{align-self:flex-start}

/* lightbox for slides */
.lightbox{border:0;padding:0;margin:0;max-width:none;max-height:none;width:100vw;height:100vh;background:rgba(3,3,3,.94);color:#fff}
.lightbox::backdrop{background:rgba(3,3,3,.94)}
.lightbox[open]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:64px 24px 24px}
.lightbox img{max-width:min(1600px,100%);max-height:calc(100vh - 140px);object-fit:contain}
.lightbox p{font-size:14px;color:var(--body-strong-on-dark);text-align:center}
.lightbox .close{position:absolute;top:16px;right:16px}

/* ---------- About ---------- */
.about-hero .wrap{display:grid;grid-template-columns:1.3fr 1fr;gap:64px;align-items:end}
.portrait{aspect-ratio:4/5;background:#0b0b0b;display:flex;align-items:center;justify-content:center;color:var(--body-on-dark);overflow:hidden;margin:0}
.portrait img{width:100%;height:100%;object-fit:cover}
.tl{list-style:none;padding:0;margin:0;border-top:1px solid var(--hairline-on-light)}
.tl li{display:grid;grid-template-columns:1fr 1.2fr 160px;gap:32px;padding:24px 0;border-bottom:1px solid var(--hairline-on-light);align-items:baseline}
.tl h3{font-weight:500;font-size:21px;letter-spacing:-.2px;line-height:1.25}
.tl p{color:var(--body-on-light);font-size:15px;line-height:1.5}
.tl .when{text-align:right;color:var(--muted-on-light);font-size:14px}
.tl-group+.tl-group{margin-top:64px}
.tl-group>.label{display:block;margin-bottom:16px;color:var(--muted-on-light)}
.skills{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.skills .plate{width:100%}
.skills .plate:nth-child(1){transform:rotate(-1.5deg)}.skills .plate:nth-child(2){transform:rotate(1deg)}.skills .plate:nth-child(3){transform:rotate(-.8deg)}
.skills .pb ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .row{grid-template-columns:40px 180px 1fr 56px;gap:20px}
  .row .tags{display:none}
  .sec{grid-template-columns:1fr;gap:32px}
  .sec-label{position:static;flex-direction:row;align-items:baseline;gap:16px}
  .meta{grid-template-columns:repeat(2,1fr)}
  .meta div:nth-child(3){padding-left:0;border-left:0}
  .meta div:nth-child(n+3){border-top:1px solid var(--hairline)}
  .about-hero .wrap{grid-template-columns:1fr}
  .portrait{max-width:420px}
  .skills{grid-template-columns:1fr}
}
@media (max-width:760px){
  .band{padding:88px 24px 96px}
  .page-hero{padding:136px 24px 48px}
  .case-hero{padding:136px 24px 64px}
  .row{grid-template-columns:1fr;gap:12px;padding:24px 0}
  .row .n{display:none}
  .row .yr{text-align:left}

  .gallery{grid-template-columns:1fr;gap:28px;margin-top:48px}
  .unit{grid-template-columns:1fr}
  .pager .wrap{grid-template-columns:1fr}
  .pager .next{order:-1}
  .pager a{min-height:0}
  .meta{grid-template-columns:1fr}
  .meta div,.meta div+div{padding-left:0;border-left:0;border-top:1px solid var(--hairline)}
  .meta div:first-child{border-top:0}
  .tl li{grid-template-columns:1fr;gap:6px}
  .tl .when{text-align:left}
  .lead{font-size:20px}
}