/* ===== Tokens (from Figma) ===== */
:root{
  --s: calc(min(100vw, 1728px) / 1728); /* 1 Figma px, scaled to the viewport */
  --ink:#353432; --ink-dark:#161515; --maroon:#551d1d; --cream:#f7f3c6;
  --olive:#7e9a2a; --page:#f6f9ee; --text:#202020; --muted:#757575;
  --slot:#ecece6; --slot-ink:#8a8a80;
  --f-nav:"Lao MN","Lateef",Georgia,serif;
  --f-display:"Lateef",Georgia,serif;
  --f-body:"Host Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-roboto:"Roboto",system-ui,sans-serif;
  --gutter: calc(90 * var(--s));
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth}
body{font-family:var(--f-body);color:var(--ink);background:var(--page);-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--olive);outline-offset:3px}
.band :focus-visible{outline-color:var(--olive)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* paper texture overlay (image 35/36/39 in Figma: multiply @ 40%) */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;
  background-image:var(--texture);background-size:100% auto;mix-blend-mode:multiply;opacity:.4}

.wrap{width:calc(1548 * var(--s));margin-inline:auto}

/* ===== Nav ===== */
.nav{display:flex;justify-content:space-between;align-items:center;font-family:var(--f-nav);
  font-size:max(16px,calc(28.8 * var(--s)))}
.nav .name{font-weight:700;letter-spacing:.05em;text-decoration:none;white-space:nowrap}
.nav .right{display:flex;align-items:center;gap:calc(126 * var(--s))}
.nav .links{display:flex;gap:calc(81 * var(--s));letter-spacing:-.05em}
.nav .links a{text-decoration:none}
.nav .links a:hover{text-decoration:underline;text-underline-offset:.2em}
.nav .links a[aria-current="page"]{font-weight:700}
.nav .social{display:flex;gap:calc(21.6 * var(--s))}
.nav .social svg{width:max(18px,calc(27 * var(--s)));height:auto;display:block}
.band{position:sticky;top:0;z-index:40;background:#fff;height:max(64px,calc(118 * var(--s)));display:flex;align-items:center;color:var(--text);border-bottom:1px solid transparent;transition:border-bottom-color .2s ease}
.band.is-scrolled{border-bottom-color:#e5e5e5}
.band-light{background:#fff;color:var(--text)}
.band-light :focus-visible{outline-color:var(--olive)}
#work{scroll-margin-top:max(64px,calc(118 * var(--s)))}

/* ===== Image / video slots ===== */
.slot{position:relative;aspect-ratio:var(--ar);background:var(--slot);overflow:hidden;margin:0}
.slot::before{content:attr(data-label);position:absolute;inset:0;display:grid;place-items:center;padding:12px;
  text-align:center;font:500 max(11px,calc(16 * var(--s)))/1.3 var(--f-body);color:var(--slot-ink)}
.slot>img,.slot>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slot.contain>img{object-fit:contain}

/* ===== Home ===== */
body.home{background:#fff}
.hero{position:relative;background:#fff;height:calc(650 * var(--s));color:var(--ink-dark)}
.hero-art{position:absolute;left:calc(1011 * var(--s));top:0;width:calc(612 * var(--s))}
.hero-copy{position:absolute;left:var(--gutter);top:calc(180 * var(--s));bottom:calc(36 * var(--s));width:calc(900 * var(--s));z-index:1;display:flex;flex-direction:column;justify-content:space-between}
.hero h1{margin:0;font:600 max(28px,calc(70 * var(--s)))/1.08 var(--f-display);letter-spacing:-.01em;color:var(--maroon)}
.hero .meta{display:flex;justify-content:space-between;gap:40px;width:100%;max-width:calc(900 * var(--s));margin-top:auto;
  font:400 max(16px,calc(32 * var(--s)))/1.2 var(--f-display);color:var(--ink)}
.hero .meta p{margin:0;white-space:nowrap}
.hero .meta .now{align-self:flex-end}
.work-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:calc(45 * var(--s));row-gap:calc(69 * var(--s));
  padding:var(--gutter) 0 calc(20 * var(--s))}
.card{display:flex;flex-direction:column;gap:calc(28.8 * var(--s));text-decoration:none;color:var(--text)}
.card .slot{--ar:752/511;transition:transform .35s ease}
.card:hover .slot{transform:scale(1.015)}
.card span{font:400 max(18px,calc(36 * var(--s)))/1 var(--f-display)}

/* ===== Inner pages ===== */
.sheet{background:#fff;margin:calc(35 * var(--s));padding:calc(60 * var(--s)) calc(60 * var(--s)) calc(40 * var(--s));color:var(--text)}
.bleed{margin-inline:calc(-60 * var(--s))}
.cs-title{margin:0;text-align:center;font:700 max(30px,calc(74 * var(--s)))/1 var(--f-body);letter-spacing:-.013em}
.lede{margin:calc(65 * var(--s)) 0 0;font:400 max(15px,calc(24 * var(--s)))/1.2 var(--f-body);text-align:justify}
.lede.roboto{font-family:var(--f-roboto)}
.lede+.lede{margin-top:1.2em}
.sec{margin-top:calc(130 * var(--s))}
.sec-head{text-align:center;max-width:calc(1060 * var(--s));margin:0 auto calc(60 * var(--s))}
.sec-head h2,.split h2{margin:0;font:500 max(24px,calc(48 * var(--s)))/1.2 var(--f-body)}
.sec-head h2.xl{font-size:max(28px,calc(64 * var(--s)))}
.sec-head p,.split p{margin:calc(30 * var(--s)) 0 0;font:400 max(15px,calc(24 * var(--s)))/1.2 var(--f-body)}
.split{display:flex;justify-content:space-between;gap:40px;margin-bottom:calc(60 * var(--s))}
.split p{margin:0;width:calc(809 * var(--s));text-align:justify}
.split.narrow p{width:calc(629 * var(--s))}
.row{display:grid;gap:calc(30 * var(--s))}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
.cols-6{grid-template-columns:repeat(6,1fr)}
.center-block{margin-inline:auto}
.caption{font:400 max(14px,calc(24 * var(--s)))/1.2 var(--f-body);margin-top:calc(16 * var(--s));text-align:center}

.style-card{background:transparent}
.style-card .txt{padding:calc(20 * var(--s)) 0 0;font-family:var(--f-roboto)}
.style-card b{display:block;font-weight:500;font-size:max(16px,calc(24 * var(--s)));margin-bottom:.4em}
.style-card small{display:block;font-size:max(13px,calc(20 * var(--s)));line-height:1.6}
.style-card small+small{color:var(--muted)}

.tile{background:#f4f4f2;display:flex;flex-direction:column}
.tile .slot{flex:1;background:transparent}
.tile .lbl{display:flex;justify-content:space-between;padding:0 calc(28 * var(--s)) calc(28 * var(--s));
  font:500 max(13px,calc(20 * var(--s)))/1.2 var(--f-body)}
.tile .lbl span+span{color:var(--muted)}

.tabs{display:flex;gap:10px;justify-content:center;margin-bottom:calc(40 * var(--s));flex-wrap:wrap}
.tabs button{font:500 max(13px,calc(20 * var(--s)))/1 var(--f-body);padding:.55em 1.2em;border-radius:999px;
  border:1.5px solid #202020;background:#fff;color:#202020;cursor:pointer}
.tabs button[aria-pressed="true"]{background:#202020;color:#fff}
.overlay-tabs{position:absolute;left:calc(50 * var(--s));bottom:calc(32 * var(--s));z-index:2;margin:0;justify-content:flex-start}
.overlay-cap{position:absolute;right:calc(50 * var(--s));bottom:calc(40 * var(--s));z-index:2;
  font:500 max(13px,calc(24 * var(--s)))/1 var(--f-body)}

.gray-panel{background:#f2f2f2;padding:calc(38 * var(--s))}
.char h3{margin:calc(40 * var(--s)) 0 calc(18 * var(--s));font:700 max(15px,calc(24 * var(--s)))/1.2 var(--f-body)}
.char p{margin:0;font:400 max(14px,calc(24 * var(--s)))/1.2 var(--f-body)}

/* ===== Play ===== */
.play{display:flex;flex-direction:column;gap:calc(33 * var(--s))}
.prow{display:flex;gap:calc(32 * var(--s));align-items:flex-start}
.prow>div{min-width:0}
.play .icon-row{display:flex;justify-content:space-between}
.play .icon-row figure{margin:0;width:calc(192 * var(--s))}
.play .icon-row figcaption{font:600 max(12px,calc(24 * var(--s)))/1.2 var(--f-body);letter-spacing:-.12em;
  color:#4c4c4c;text-align:center;margin-bottom:12px}

/* ===== About ===== */
.about{display:flex;justify-content:space-between;align-items:flex-start;padding:calc(133 * var(--s)) 0 calc(40 * var(--s))}
.about .bio{width:calc(854 * var(--s));font:400 max(16px,calc(24 * var(--s)))/1.16 var(--f-body)}
.about .bio p{margin:0 0 1.16em}
.about .slot{width:calc(484 * var(--s));--ar:484/507;margin-top:calc(-36 * var(--s));margin-right:calc(62 * var(--s));background:transparent}

/* ===== Resume ===== */
body.resume{background:var(--page)}
.cv{width:calc(1601 * var(--s));margin:0 auto;padding:calc(115 * var(--s)) 0 calc(115 * var(--s));color:#333230}
.cv h1{margin:0;font:700 max(36px,calc(86.5 * var(--s)))/1.33 var(--f-body);color:var(--ink)}
.cv .contact{margin:calc(40 * var(--s)) 0 0;padding-bottom:calc(18 * var(--s));border-bottom:1px solid #d9d9d2;
  font:700 max(14px,calc(34 * var(--s)))/1 var(--f-body);color:var(--ink)}
.cv .contact a{color:#5b86f2}
.cv h2{margin:calc(56 * var(--s)) 0 calc(32 * var(--s));font:700 max(22px,calc(43.3 * var(--s)))/1.33 var(--f-body);color:var(--maroon)}
.cv .job{margin-bottom:calc(44 * var(--s))}
.cv .job-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px}
.cv h3{margin:0;font:700 max(17px,calc(34.6 * var(--s)))/1.33 var(--f-body);color:var(--ink);max-width:calc(962 * var(--s))}
.cv h3 em{font-style:normal;color:#6e8b0c}
.cv time{font:italic 400 max(14px,calc(28.8 * var(--s)))/1.33 var(--f-body);color:var(--muted);white-space:nowrap}
.cv ul{margin:calc(24 * var(--s)) 0 0;padding-left:1.4em;font:400 max(14px,calc(28.8 * var(--s)))/1.33 var(--f-body)}
.cv .skills{font:400 max(14px,calc(28.8 * var(--s)))/1.75 var(--f-body);margin:0}

/* ===== Mobile ===== */
@media (max-width:760px){
  .wrap{width:calc(100% - 40px)}
  .nav .links{gap:18px}
  .band{height:auto;padding:14px 0}
  #work{scroll-margin-top:96px}
  .hero{height:auto;padding-bottom:40px;display:flex;flex-direction:column}
  .hero-copy{order:1}
  .hero-art{order:2}
  .hero-copy,.hero-art{position:static;width:auto}
  .hero-copy{margin:40px 20px 0}
  .hero h1{font-size:clamp(30px,7.5vw,40px);line-height:1.1}
  .hero-art{margin:32px 20px 0}
  .hero .meta{width:auto;flex-direction:column;gap:14px;margin-top:28px}
  .hero .meta .now{align-self:flex-start}
  .hero .meta p{white-space:normal}
  .work-grid,.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}
  .work-grid{row-gap:40px;padding:48px 0 16px}
  .cols-6{grid-template-columns:repeat(3,1fr)}
  .sheet{margin:12px;padding:28px 20px 24px}
  .bleed{margin-inline:-20px}
  .sec{margin-top:64px}
  .split{flex-direction:column;gap:14px}
  .split p,.split.narrow p{width:auto}
  .center-block{width:100%!important}
  .play{gap:14px}
  .prow{flex-direction:column;gap:14px}
  .prow>div{width:100%}
  .xgrid{grid-template-columns:1fr!important}
  .play .icon-row{flex-wrap:wrap;gap:14px}
  .play .icon-row figure{width:calc(50% - 7px)}
  .about{flex-direction:column;gap:32px;padding:40px 0 24px}
  .about .bio,.about .slot{width:100%;margin:0}
  .cv{width:calc(100% - 40px);padding:40px 0}
  .cv .job-head{flex-direction:column;gap:4px}
  .overlay-tabs{left:12px;bottom:12px}
  .overlay-cap{display:none}
}

.hero-img>img{object-position:center bottom}
.slot.contain.lib::before{background:#f4f4f2}
.sec svg{display:block;width:100%;height:auto}
.slot.loaded::before{content:none}
/* ===== Xyne ===== */
.xhero{position:relative;background:#fce8e7;border-radius:calc(40 * var(--s));aspect-ratio:1538/682;display:grid;place-items:center;overflow:hidden}
.xhero-icon{width:calc(540 * var(--s))}
.xhero .overlay-tabs button{background:rgba(255,255,255,.7);border-color:#202020}
.xhero .overlay-tabs button[aria-pressed="true"]{background:#202020;color:#fff}
.tile{background:#f4f4f2;border-radius:calc(24 * var(--s));overflow:hidden}
.tile .slot{margin:calc(40 * var(--s)) calc(40 * var(--s)) 0}
.char-tile{background:#f4f4f2;border-radius:calc(32 * var(--s));padding:calc(70 * var(--s));aspect-ratio:1/1;display:grid;place-items:center}
.char-tile .slot{width:100%}
.xanat{display:block;width:100%;height:auto}
.xlib{position:relative;border:4px solid #e6e6e8;border-radius:calc(40 * var(--s));padding:calc(48 * var(--s))}
.xlib-tabs{justify-content:flex-start;margin-bottom:10px}
.xlib-hint{margin:0 0 calc(30 * var(--s));font:400 max(13px,calc(18 * var(--s)))/1.3 var(--f-body);color:var(--muted)}
.xfam+.xfam{margin-top:calc(44 * var(--s))}
.xfam h3{margin:0 0 calc(18 * var(--s));font:600 max(15px,calc(22 * var(--s)))/1.2 var(--f-body)}
.xfam h3 span{color:var(--muted);font-weight:400;margin-left:.3em}
.xgrid-icons.all{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(170px,calc(230 * var(--s))),1fr));gap:12px}
.xgrid-icons.one{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(92px,calc(130 * var(--s))),1fr));gap:12px}
.xcard{background:#f6f6f7;border-radius:14px;padding:12px 12px 10px;display:flex;flex-direction:column;gap:6px}
.xcard>span,.xone span{font:500 max(12px,calc(15 * var(--s)))/1.2 var(--f-body);color:#4a4a4a;text-align:center}
.xtrio{display:flex;justify-content:space-between}
.xgrid-icons button{border:0;background:transparent;color:#202020;cursor:pointer;border-radius:10px;padding:8px;transition:background .15s,transform .15s}
.xgrid-icons button svg{display:block;width:max(32px,calc(44 * var(--s)));height:auto}
.xgrid-icons button:hover{background:#fff;transform:translateY(-1px)}
.xone{background:#f6f6f7!important;display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px 12px!important}
.xone:hover{background:#ececef!important}
.xlib-toast{position:sticky;bottom:20px;margin:16px auto 0;width:max-content;max-width:90%;background:#202020;color:#fff;border-radius:999px;padding:.6em 1.2em;
  font:500 14px/1.2 var(--f-body);opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;pointer-events:none}
.xlib-toast.on{opacity:1;transform:none}
@media (max-width:760px){.xhero{aspect-ratio:4/3}.xhero-icon{width:60%}.char-tile{padding:24px}.xlib{padding:16px}}

/* ===== Round 2 overrides ===== */
:root{--pad:calc(190 * var(--s))}
/* compact white menu bar everywhere */
.band{height:max(46px,calc(59 * var(--s)));background:#fff;color:var(--text)}
.nav{font-size:max(14px,calc(20 * var(--s)))}
.nav .links{gap:calc(56 * var(--s))}
.nav .right{gap:calc(80 * var(--s))}
.nav .social{gap:calc(18 * var(--s))}
.nav .social svg{width:max(16px,calc(21 * var(--s)))}
#work{scroll-margin-top:max(46px,calc(59 * var(--s)))}
.hero-img>img{object-position:center 45%}
/* white inner pages with wider side padding */
body.inner{background:#fff}
.sheet{margin:0;padding:calc(60 * var(--s)) var(--pad) calc(40 * var(--s))}
.bleed{margin-inline:calc(-1 * var(--pad))}
.center-block{max-width:100%}
main.about.wrap{width:auto;padding-left:var(--pad);padding-right:var(--pad)}
.slot.rounded{border-radius:calc(30 * var(--s))}
/* next project */
.next-proj{display:flex;flex-direction:column;align-items:flex-end;gap:6px;margin-top:calc(140 * var(--s));margin-left:auto;width:max-content;max-width:100%;text-decoration:none;color:var(--text);text-align:right}
.np-label{font:500 max(12px,calc(18 * var(--s)))/1.2 var(--f-body);color:var(--muted);letter-spacing:.02em}
.np-title{display:inline-flex;align-items:center;gap:.4em;font:600 max(20px,calc(40 * var(--s)))/1.15 var(--f-body)}
.np-title svg{width:1em;height:1em;transition:transform .25s ease}
.next-proj:hover .np-title svg{transform:translateX(6px)}
.next-proj:hover .np-title{text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:2px}
/* xyne hero tabs: unselected = outline only */
.xhero .overlay-tabs button{background:transparent;color:#202020;border-color:#202020}
.xhero .overlay-tabs button[aria-pressed="true"]{background:#202020;color:#fff}
/* shared icon library */
.iconlib{position:relative}
.iconlib .tabs{justify-content:center;margin-bottom:calc(40 * var(--s))}
.lib-panel{background:#f5f5f6;border-radius:calc(32 * var(--s));padding:calc(56 * var(--s))}
.xlib-body{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(44px,calc(84 * var(--s))),1fr));gap:calc(10 * var(--s))}
.xlib-body button{border:0;background:transparent;color:#202020;cursor:pointer;border-radius:12px;padding:calc(18 * var(--s));display:grid;place-items:center;transition:background .15s,transform .15s}
.xlib-body button svg{display:block;width:max(26px,calc(40 * var(--s)));height:auto}
.xlib-body button:hover{background:#fff;transform:translateY(-1px)}
@media (max-width:760px){:root{--pad:20px}.sheet{padding:28px 20px 60px}.next-proj{margin-top:56px}.nav .right{gap:14px}}
/* ===== Round 3 ===== */
.illus .slot{overflow:hidden}
.illus .slot>img{transform:scale(1.1)}
/* xyne hero: icon + bottom bar, no overlap */
.xhero{aspect-ratio:auto;display:flex;flex-direction:column;align-items:center;padding:calc(56 * var(--s)) calc(48 * var(--s)) calc(36 * var(--s));gap:calc(40 * var(--s))}
.xhero-icon{width:calc(460 * var(--s))}
.xhero-bar{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.xhero-bar .tabs{margin:0;justify-content:flex-start}
.xhero-bar .tabs button{background:transparent;color:#202020;border-color:#202020}
.xhero-bar .tabs button[aria-pressed="true"]{background:#202020;color:#fff}
.xhero-cap{font:500 max(13px,calc(22 * var(--s)))/1.2 var(--f-body)}
/* shared library */
.lib-body.one{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(44px,calc(84 * var(--s))),1fr));gap:calc(10 * var(--s))}
.lib-body.all{display:grid;grid-template-columns:repeat(var(--per),1fr);gap:calc(16 * var(--s))}
.lgrp{display:grid;grid-template-columns:repeat(var(--n),1fr);background:#fff;border-radius:calc(16 * var(--s));padding:calc(6 * var(--s))}
.lib-body button{border:0;background:transparent;color:#202020;cursor:pointer;border-radius:12px;padding:calc(16 * var(--s));display:grid;place-items:center;transition:background .15s,transform .15s}
.lib-body button svg{display:block;width:max(24px,calc(38 * var(--s)));height:auto}
.lib-body.one button:hover{background:#fff;transform:translateY(-1px)}
.lib-body.all button:hover{background:#f2f2f3}
@media (max-width:760px){.lib-body.all{grid-template-columns:1fr}.xhero-icon{width:70%}}

.illus{column-gap:calc(90 * var(--s))!important;row-gap:calc(100 * var(--s))!important}
/* about: 6:4 text and image */
main.about.wrap{display:grid;grid-template-columns:6fr 4fr;gap:calc(110 * var(--s));align-items:start}
.about .bio{width:auto;max-width:none}
.about .slot{width:100%;margin:0}
@media (max-width:760px){main.about.wrap{grid-template-columns:1fr;gap:32px}}
.slot.loaded{background:transparent!important}
.hero-link{color:inherit;text-decoration:none}.hero-link:hover{text-decoration:underline;text-underline-offset:.15em}
/* nav font: Host Grotesk */
:root{--f-nav:"Host Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif}
.nav .name{letter-spacing:.01em;font-weight:700}
.nav .links{letter-spacing:0}
.nav .links a{font-weight:500}
.nav .links a[aria-current="page"]{font-weight:700}
/* hero headline: semibold, more open tracking */
.hero h1{font-weight:600;letter-spacing:-0.01em}
/* about: text + photo per Figma (815 : 326, 230 gap) */
main.about.wrap{grid-template-columns:815fr 326fr;column-gap:calc(230 * var(--s));padding-top:calc(133 * var(--s))}
.about .bio{font-size:max(16px,calc(24 * var(--s)));line-height:1.16}
.about .slot.portrait{--ar:651/728;width:100%;margin:0;border-radius:calc(16 * var(--s))}
@media (max-width:760px){main.about.wrap{grid-template-columns:1fr}.about .slot.portrait{max-width:360px}}
/* resume: white page, neutral palette per Figma */
body.resume{background:#fff}
.cv{color:#161515}
.cv h1{color:#353432}
.cv .contact{color:#353432;border-bottom:1px solid rgba(53,52,50,.18)}
.cv .contact a{color:#5c84fc}
.cv h2{color:#161515}
.cv h3{color:#161515}
.cv h3 em{color:#797575}
.cv time{color:#161515}
.cv ul,.cv .skills{color:#161515}
/* resume per Figma "Design Resume" */
body.resume{background:#fff}
body.resume::after{display:none}
.cv{color:#161515}
.cv h1{color:#353432}
.cv .contact{color:#353432;border-bottom:1px solid #e2e2e2}
.cv .contact a{color:#5c84fc;text-decoration:underline;text-underline-offset:.15em}
.cv .contact a[href^="mailto"]{color:#353432!important;text-decoration:none}
.cv h2{color:#161515}
.cv h3{color:#161515}
.cv h3 em{color:#797575}
.cv time{color:#161515}
.cv ul,.cv .skills{color:#161515}

/* ===== Round 4: fluid hero + prev/next project nav ===== */
/* Hero now lives in a centred container that matches the work-grid width,
   so the art and the copy stay locked to the same edges at any window size
   instead of sitting at a fixed pixel offset once past the 1728px cap. */
.hero{height:auto;min-height:calc(650 * var(--s));display:flex;align-items:stretch}
.hero-inner{position:relative;width:calc(1548 * var(--s));margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,900fr) minmax(0,648fr);column-gap:calc(21 * var(--s));align-items:stretch}
.hero-copy{position:static;left:auto;top:auto;bottom:auto;width:auto;
  padding:calc(180 * var(--s)) 0 calc(36 * var(--s));gap:calc(40 * var(--s))}
.hero-art{position:static;left:auto;top:auto;align-self:start;margin-left:auto;width:94.44%;max-width:calc(612 * var(--s))}
.hero h1{max-width:100%}
.hero .meta{width:100%;max-width:none;margin-top:0;flex-wrap:wrap;column-gap:calc(40 * var(--s));row-gap:.5em}
.hero .meta p{white-space:normal}

/* prev / next project footer nav */
.proj-nav{display:flex;justify-content:space-between;align-items:flex-start;gap:calc(48 * var(--s));margin-top:calc(140 * var(--s))}
.proj-nav>a{flex:0 1 auto;max-width:calc(50% - calc(24 * var(--s)));margin-top:0}
.prev-proj{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-decoration:none;color:var(--text);text-align:left}
.prev-proj:hover .np-title{text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:2px}
.prev-proj:hover .np-title svg{transform:translateX(-6px)}
@media (max-width:760px){
  .hero{display:block;min-height:0}
  .hero-inner{width:calc(100% - 40px);display:flex;flex-direction:column}
  .hero-copy{margin:0;padding:40px 0 0;gap:24px}
  .hero-art{margin:32px 0 0;width:100%;max-width:none}
  .hero .meta{row-gap:14px;column-gap:14px}
  .proj-nav{flex-direction:column;align-items:stretch;gap:28px;margin-top:56px}
  .proj-nav>a{max-width:100%}
  .next-proj{align-items:flex-start;text-align:left;margin-left:0;width:auto}
  .prev-proj{width:auto}
}
/* arrows flow with the text so they stay on the first/last line when a title wraps */
.np-title{display:block}
.np-title svg{display:inline-block;width:1em;height:1em;vertical-align:-.1em}
.next-proj .np-title svg{margin-left:.3em}
.prev-proj .np-title svg{margin-right:.3em}

/* ===== Round 5: hero copy block, larger headline, mobile nav drawer ===== */
/* Headline and the two meta lines read as one group, the meta sitting a little
   down the hero rather than pinned to its bottom edge. The copy column is sized
   to the headline's longest line (max-content), so the meta row spans exactly
   the headline's width and "Designing Juspay" ends where the headline ends. */
.hero-copy{justify-content:flex-start;gap:calc(96 * var(--s));
  padding:calc(150 * var(--s)) 0 calc(36 * var(--s))}
@media (min-width:761px){
  /* max-content keeps the column exactly as wide as the headline's longest line;
     on phones the copy stays a plain stacked column so nothing can overflow */
  .hero-copy{display:grid;grid-template-columns:max-content;align-content:start;justify-items:start}
  .hero .meta{width:100%}
  .hero-art{width:89.72%;max-width:calc(581 * var(--s))}   /* 5% smaller than the Figma 612 */
}
.hero h1{font-size:max(32px,calc(84 * var(--s)))}

/* --- mobile nav: hamburger + side drawer --- */
.nav-toggle{display:none;background:none;border:0;padding:10px;margin:-10px -6px -10px 0;cursor:pointer;
  color:inherit;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px}
.nav-toggle span{display:block;width:22px;height:2px;background:currentColor;border-radius:2px;
  transition:transform .25s ease,opacity .2s ease}
.nav-scrim{display:none}
@media (max-width:760px){
  .nav{position:relative}
  .nav-toggle{display:flex;position:relative;z-index:46}
  body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.nav-open .nav-toggle span:nth-child(2){opacity:0}
  body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* the menu itself becomes a panel that slides in from the right edge */
  .nav .right{position:fixed;top:0;right:0;z-index:45;height:100dvh;width:min(76vw,300px);
    background:#fff;color:var(--text);flex-direction:column;align-items:flex-start;justify-content:flex-start;
    gap:32px;padding:calc(max(64px,118 * var(--s)) + 24px) 28px 32px;border-left:1px solid #e5e5e5;
    transform:translateX(100%);transition:transform .3s ease;overflow-y:auto;
    box-shadow:-12px 0 32px rgba(0,0,0,.12);visibility:hidden}
  .band-light .right{background:#fff;color:var(--text)}
  body.nav-open .nav .right{transform:none;visibility:visible}
  .nav .links{flex-direction:column;align-items:flex-start;gap:22px;font-size:20px;letter-spacing:0}
  .nav .social{gap:22px}
  .nav .social svg{width:22px}

  .nav-scrim{display:block;position:fixed;inset:0;z-index:42;background:rgba(0,0,0,.5);
    opacity:0;pointer-events:none;transition:opacity .3s ease}
  body.nav-open .nav-scrim{opacity:1;pointer-events:auto}
  body.nav-open{overflow:hidden}
}

/* --- other small-screen fixes --- */
@media (max-width:760px){
  /* justified copy opens up rivers of whitespace at this measure */
  .lede,.split p{text-align:left}
  .hero h1{font-size:clamp(32px,8.5vw,46px)}
  .hero-copy{padding:36px 0 0;gap:18px}
  /* let the illustration size to its own height instead of sitting in a
     letterboxed 612x637 box with dead space above and below */
  .hero-art .slot{aspect-ratio:auto}
  .hero-art .slot>img{position:static;width:100%;height:auto}
  .cs-title{font-size:clamp(26px,7vw,34px)}
  .proj-nav .np-title{font-size:clamp(18px,5.2vw,24px)}
  .tabs{gap:8px}
  .tabs button{padding:.5em 1em}
}

/* --- Juspay thumbnail cards --- */
.thumb-label{text-align:center;font:500 max(15px,calc(24 * var(--s)))/1.2 var(--f-body);margin-bottom:calc(40 * var(--s))}
/* The After export is fractionally narrower than the Before export, so it is
   sized by width rather than by column to keep both cards exactly the same
   height. 1505/1344 vs 1450/1344 gives 96.34%. */
.thumb-after{width:96.34%;margin-inline:auto}

/* ===== Site Footer ===== */
.site-footer{position:relative;width:100%;margin-top:calc(-120 * var(--s));background:transparent;overflow:hidden}
.footer-row{position:absolute;top:65%;transform:translateY(-50%);left:0;right:0;z-index:5;display:flex;justify-content:space-between;align-items:center}
.footer-heading{margin:0;font-family:var(--f-display);font-size:max(36px,calc(76 * var(--s)));font-weight:600;color:var(--maroon);line-height:1;letter-spacing:-.01em;text-shadow:0 1px 2px rgba(255,255,255,.5);display:inline-flex;align-items:center}
.footer-social{display:flex;align-items:center;gap:calc(28 * var(--s))}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;color:var(--maroon);text-decoration:none;padding:6px;margin:-6px;transition:transform .2s ease,opacity .2s ease;filter:drop-shadow(0 1px 2px rgba(255,255,255,.5))}
.footer-social a:hover{transform:translateY(-2px);opacity:.8}
.footer-social svg{width:max(28px,calc(44 * var(--s)));height:max(28px,calc(44 * var(--s)));display:block}
.footer-copy{position:absolute;bottom:calc(20 * var(--s));left:0;right:0;z-index:5;text-align:center;font-family:var(--f-body);font-size:max(12px,calc(16 * var(--s)));font-weight:400;color:var(--maroon);letter-spacing:.02em;opacity:.85;text-shadow:0 1px 2px rgba(255,255,255,.6)}
.footer-scene{width:100%;line-height:0}
.footer-scene img{width:100%;height:auto;display:block;pointer-events:none}
@media (max-width:760px){
  .site-footer{margin-top:-30px}
  .footer-row{top:62%}
  .footer-heading{font-size:32px}
  .footer-social{gap:16px}
  .footer-social svg{width:24px;height:24px}
  .footer-copy{bottom:12px;font-size:11px}
}