:root{
  --paper:#FAF8F4; --paper2:#FFFFFF; --ink:#1B1A17; --ink2:#514D45; --mute:#716C62;
  --rule:#E6E1D8; --accent:#4A5D4A; --footer:#171A15;
  --moss:#6B7F5E; --rock:#8C877D; --fog:#F2F4F0;
  --cn-serif:"Noto Serif SC","Songti SC",serif;
  --cn-sans:"Inter","Noto Sans SC","PingFang SC",sans-serif;
  --en-serif:"EB Garamond","Newsreader",Georgia,serif;
  --mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,monospace;
  --pad:clamp(20px,4.5vw,72px);
  --max:1440px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper);-webkit-font-smoothing:antialiased}
body{font-family:var(--cn-sans);color:var(--ink);font-size:16px;line-height:1.75;font-weight:400;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--ink);color:var(--paper)}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,image-slot:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
p{text-wrap:pretty}
h1,h2,h3{font-weight:500;text-wrap:balance}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);line-height:1.5}
.en{font-family:var(--en-serif);font-style:italic;font-weight:400}
.serif{font-family:var(--cn-serif)}
.rule{height:1px;background:var(--rule);border:0}
.accent{color:var(--accent)}

/* ---------- NAV ---------- */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--paper) 92%,transparent);backdrop-filter:saturate(1.2);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.scrolled{border-bottom-color:var(--rule)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;min-height:82px}
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:1px}
.brand b{font-family:var(--cn-serif);font-weight:600;font-size:18px;letter-spacing:.04em;line-height:1.1}
.brand i{font-family:var(--mono);font-style:normal;font-size:9px;letter-spacing:.2em;color:var(--mute);line-height:1.3}
.nav ul{display:flex;gap:clamp(16px,2.4vw,36px);list-style:none}
.nav li a{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;padding:6px 0;position:relative}
.nav li a span:first-child{font-size:13.5px;color:var(--ink)}
.nav li a span:last-child{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--mute);margin-top:3px}
.nav li a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--accent);transition:right .35s ease}
.nav li a:hover::after,.nav li a.on::after{right:0}
.menu-btn{display:none;font-family:var(--mono);font-size:11px;letter-spacing:.14em}
.drawer{position:fixed;inset:0;z-index:60;background:var(--paper);display:flex;flex-direction:column;padding:24px var(--pad);opacity:0;pointer-events:none;transition:opacity .35s}
.drawer.open{opacity:1;pointer-events:auto}
.drawer .top{display:flex;justify-content:space-between;align-items:center;min-height:54px}
.drawer nav{margin-top:8vh;display:flex;flex-direction:column}
.drawer nav a{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--rule);font-family:var(--cn-serif);font-size:28px}
.drawer nav a small{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--mute)}

/* ---------- PAGE TRANSITION / REVEAL ---------- */
#app{min-height:80vh;transition:opacity .38s ease, transform .38s ease}
#app.leaving{opacity:0;transform:translateY(6px)}
.rv{opacity:0;transform:translateY(18px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}
.img-rv{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s cubic-bezier(.7,0,.2,1)}
.img-rv.in{clip-path:inset(0 0 0 0)}

/* ---------- IMAGE SLOTS ---------- */
image-slot{display:block;width:100%;background:var(--paper2);--slot-bg:var(--paper2)}
.frame{position:relative;overflow:hidden;background:var(--paper2)}
.frame image-slot{height:100%}
.cap{display:flex;justify-content:space-between;gap:16px;margin-top:10px}

/* ---------- COMMON PAGE HEADER ---------- */
.phead{padding:clamp(30px,4.5vw,60px) var(--pad) clamp(20px,3vw,40px)}
.phead .mono{margin-bottom:20px;display:flex;gap:18px}
.phead h1{font-family:var(--cn-serif);font-size:clamp(30px,4.2vw,60px);line-height:1.08;letter-spacing:-.01em;font-weight:500}
.phead .en-sub{font-family:var(--en-serif);font-style:italic;font-size:clamp(16px,1.7vw,22px);color:var(--ink2);margin-top:8px;line-height:1.25}
.phead .lede{max-width:34em;margin-top:22px;font-size:15.5px;color:var(--ink2)}

.sec{padding:clamp(56px,8vw,120px) var(--pad);border-top:1px solid var(--rule)}
.sec-h{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:var(--pad);margin-bottom:clamp(32px,4vw,56px);align-items:baseline}
.sec-h h2{font-family:var(--cn-serif);font-size:clamp(24px,2.2vw,32px);line-height:1.2}
.sec-h h2 .en{display:block;font-size:.62em;color:var(--mute);margin-top:6px}
.sec-h .more{justify-self:end;font-family:var(--mono);font-size:11px;letter-spacing:.14em;border-bottom:1px solid var(--accent);padding-bottom:2px}
.grid12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--pad)}

.link-u{border-bottom:1px solid var(--accent);transition:border-color .3s}
.link-u:hover{border-color:var(--ink)}
.arrow{display:inline-block;transition:transform .35s}
a:hover .arrow{transform:translateX(5px)}

/* draft placeholder — honest "to write" boxes */
.draft{border:1px dashed color-mix(in oklab,var(--ink) 28%,transparent);padding:20px 22px;color:var(--mute);font-size:14.5px;line-height:1.7}
.draft .mono{color:var(--accent);margin-bottom:8px;display:block}
.draft ul{list-style:none}
.draft li::before{content:"— "}

/* ---------- HOME ---------- */
.hero{padding:clamp(54px,8vw,110px) var(--pad) clamp(44px,6vw,88px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px, .86fr);gap:clamp(48px,8vw,120px);align-items:center}
.hero-copy{max-width:760px}
.hero-copy>.mono{margin-bottom:clamp(24px,4vw,48px)}
.hero h1{font-family:var(--cn-serif);font-weight:500;font-size:clamp(52px,7.2vw,104px);line-height:.98;letter-spacing:-.02em}
.hero h1 .en{display:block;font-size:.2em;letter-spacing:.18em;color:var(--mute);margin-top:18px;font-style:normal;font-family:var(--mono)}
.hero-role{font-size:clamp(16px,1.45vw,21px);color:var(--ink2);margin-top:22px}
.hero-sub{font-family:var(--en-serif);font-size:clamp(16px,1.4vw,20px);color:var(--mute);margin-top:8px}
.hero-lede-en{font-size:clamp(17px,1.6vw,23px);color:var(--ink2);margin-top:12px}
.hero-status{font-size:14px;color:var(--ink2);margin-top:28px}
.hero-status .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:10px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.hero-actions a{border:1px solid var(--rule);padding:10px 18px;font-size:14px;background:var(--paper2);transition:border-color .25s,background .25s}
.hero-actions a.primary{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.hero-actions a.primary:hover{border-color:var(--accent);background:var(--accent)}
.hero-actions a:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.hero-actions a span{font-family:var(--mono);font-size:10px;letter-spacing:.08em;margin-left:4px}
.capabilities{max-width:1920px;padding-top:clamp(56px,8vw,112px);padding-bottom:clamp(56px,8vw,112px)}
.capabilities-head{display:flex;justify-content:space-between;align-items:end;border-bottom:1px solid var(--ink);padding-bottom:26px;position:relative}
.capabilities-head h2{font-family:var(--cn-serif);font-size:clamp(34px,3.2vw,54px);font-weight:500;line-height:1.05}
.capabilities-head h2 .en{font-family:var(--en-serif);font-style:italic;font-size:.58em;color:var(--mute);margin-left:18px;white-space:nowrap}
.capabilities-head>.mono{font-size:12px;letter-spacing:.22em}
.capability-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none}
.capability-card{position:relative;min-height:382px;padding:58px 28px 42px 0;border-bottom:1px solid var(--rule);transition:background .25s ease}
.capability-card:nth-child(3n+2),.capability-card:nth-child(3n+3){padding-left:52px;border-left:1px solid var(--rule)}
.capability-card:nth-child(n+4){padding-top:60px}
.capability-card:before{content:"";position:absolute;left:0;top:-1px;width:0;height:3px;background:#C96442;transition:width .25s ease}
.capability-card:nth-child(3n+2):before,.capability-card:nth-child(3n+3):before{left:52px}
.capability-card:hover:before,.capability-card:focus-within:before{width:64px}
.capability-card:hover .capability-no,.capability-card:focus-within .capability-no{color:#C96442}
.capability-no{display:block;font-size:12px;letter-spacing:.18em;transition:color .25s ease}
.capability-en{display:block;text-align:right;color:var(--mute);font-family:var(--en-serif);font-style:italic;font-size:24px;line-height:1;margin-top:-16px;white-space:nowrap}
.capability-card h3{font-family:var(--cn-serif);font-size:clamp(25px,2.3vw,37px);font-weight:500;line-height:1.2;margin-top:30px}
.capability-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.capability-tags span{border:1px solid var(--rule);border-radius:999px;padding:6px 14px;color:var(--ink2);font-size:15px;line-height:1.2;transition:border-color .25s ease,color .25s ease}
.capability-card:hover .capability-tags span,.capability-card:focus-within .capability-tags span{border-color:var(--ink)}
.capability-card p{font-size:18px;line-height:1.8;color:var(--mute);margin-top:28px;max-width:30em}
.capability-head{display:flex;justify-content:space-between;align-items:end;gap:20px;padding:18px 0 20px;border-bottom:1px solid var(--ink)}
.capability-head h2{font-family:var(--cn-serif);font-size:clamp(28px,3vw,44px);font-weight:500;line-height:1.1;margin-top:8px;letter-spacing:-.02em}
.capability-head>.mono{color:var(--accent)}
.capability-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));list-style:none}
.capability-list li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;padding:18px 16px 20px 0;border-bottom:1px solid var(--rule);min-width:0}
.capability-list li:nth-child(odd){padding-right:18px}
.capability-list li:nth-child(even){padding-left:18px;border-left:1px solid var(--rule)}
.capability-list li:first-child{grid-column:1/-1;grid-template-columns:42px minmax(0,1fr);padding:24px 0;border-bottom:1px solid var(--ink)}
.capability-list li:first-child h3{font-size:20px}
.capability-list li:first-child p{max-width:38em}
.capability-list li:last-child,.capability-list li:nth-last-child(2){border-bottom:0}
.capability-list li>.mono{padding-top:3px;color:var(--accent);font-size:10px}
.capability-list h3{font-family:var(--cn-serif);font-size:16px;font-weight:500;line-height:1.3}
.capability-list p{font-size:12.5px;line-height:1.6;color:var(--ink2);margin-top:6px}
.home-now{width:100%;padding-top:clamp(120px,9.5vw,194px);padding-bottom:clamp(120px,9.5vw,194px);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.home-now-inner{max-width:1800px}
.home-now-head{margin-bottom:clamp(46px,6vw,78px)}
.home-now-head h2{font-family:var(--cn-serif);font-size:clamp(34px,3vw,50px);font-weight:500;line-height:1.05}
.home-now-head .en{font-family:var(--en-serif);font-style:italic;font-size:.58em;color:var(--mute);margin-left:18px;white-space:nowrap}
.home-now-body{display:grid;grid-template-columns:minmax(0,30.5%) minmax(0,1fr);gap:0}
.home-now-meta{padding-top:10px}.home-now-meta .mono{display:block;margin-top:28px;color:var(--mute);letter-spacing:.2em}
.now-status{font-size:18px;color:var(--ink2);display:flex;align-items:center;gap:10px}.now-status span{width:10px;height:10px;border-radius:50%;background:#6B7F5E;box-shadow:0 0 0 6px #E6EBDD}
.now-lead{font-family:var(--cn-serif);font-size:clamp(28px,2.5vw,46px);line-height:1.55;color:var(--ink);max-width:28em}
.now-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,4vw,76px);margin-top:42px}.now-notes p{font-size:20px;line-height:1.8;color:var(--ink2)}.now-notes b{color:var(--ink)}
.home-doors{padding-top:clamp(16px,3vw,40px)}

.verbs{display:flex;gap:clamp(14px,3vw,48px);flex-wrap:wrap}
.verbs span{font-family:var(--mono);font-size:11px;letter-spacing:.16em}
.verbs span em{font-style:normal;color:var(--mute);margin-right:8px}

.doors{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink)}
.door{position:relative;padding:clamp(24px,3vw,42px) clamp(0px,2vw,32px) clamp(24px,3vw,42px) 0;border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:18px}
.door:nth-child(2n){padding-left:clamp(20px,3vw,48px);padding-right:0;border-left:1px solid var(--rule)}
.door .head{display:flex;justify-content:space-between;align-items:baseline}
.door h3{font-family:var(--cn-serif);font-weight:500;font-size:clamp(30px,4vw,58px);line-height:1;letter-spacing:-.015em;margin-top:8px}
.door .head>.arrow{font-size:24px;color:var(--accent)}
.door .cn{font-family:var(--cn-serif);font-size:clamp(16px,1.4vw,20px)}
.door .frame{aspect-ratio:16/10}
.door .frame image-slot{transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.door:hover .frame image-slot{transform:scale(1.025)}
.door .hint{display:flex;justify-content:space-between;align-items:center;color:var(--ink2);font-size:14px;opacity:.0;transform:translateY(-6px);transition:opacity .4s,transform .4s}
.door:hover .hint{opacity:1;transform:none}

.work-list a{display:grid;grid-template-columns:60px minmax(0,1fr) minmax(0,1fr) 40px;gap:24px;align-items:baseline;padding:28px 0;border-top:1px solid var(--rule);transition:padding .4s}
.work-list a:last-child{border-bottom:1px solid var(--rule)}
.work-list a:hover{padding-left:12px}
.work-list .t{font-family:var(--cn-serif);font-size:clamp(22px,2.4vw,34px);line-height:1.25}
.work-list .e{font-family:var(--en-serif);font-style:italic;font-size:clamp(17px,1.6vw,22px);color:var(--mute)}
.work-list .arrow{justify-self:end}

/* Homepage reference: inline headings and spacious project rows. */
.home-section{max-width:1800px;padding-left:6vw;padding-right:6vw}
.home-section .sec-h{display:flex;justify-content:space-between;gap:24px;align-items:baseline}
.home-section .sec-h h2{display:flex;align-items:baseline;gap:18px;font-size:clamp(30px,2.4vw,48px)}
.home-section .sec-h h2 .en{display:inline;margin:0;white-space:nowrap;font-size:.64em}
.home-section .sec-h .more{font-family:var(--cn-sans);font-size:clamp(13px,1.05vw,20px);letter-spacing:0;border-color:var(--ink2);white-space:nowrap}
.home-work{margin-top:clamp(56px,8vw,120px);border-top:0}
.home-work .sec-h{margin-bottom:clamp(40px,3.5vw,72px)}
.home-work .work-list{border-top:1px solid var(--ink)}
.home-work .work-list a{grid-template-columns:clamp(48px,5.5vw,110px) minmax(0,1fr) auto clamp(40px,3.1vw,64px);gap:clamp(16px,2vw,40px);align-items:center;min-height:clamp(150px,10.5vw,240px);padding:32px 0;border-top:0;border-bottom:1px solid var(--rule);transition:color .25s}
.home-work .work-list a:hover{padding-left:0}
.home-work .work-number{font-size:clamp(12px,.95vw,18px);letter-spacing:0}
.home-work .work-copy{display:flex;flex-direction:column;gap:12px;min-width:0}
.home-work .work-list .t{font-size:clamp(24px,2.3vw,46px);line-height:1.35}
.home-work .work-kind{display:inline-block;margin-left:12px;font-family:var(--cn-sans);font-size:clamp(12px,1vw,18px);color:var(--mute);vertical-align:middle}
.home-work .work-summary-line{font-size:clamp(14px,1.05vw,20px);line-height:1.65;color:var(--mute)}
.home-work .work-period{font-family:var(--mono);font-size:clamp(12px,1.02vw,20px);color:var(--ink2);white-space:nowrap}
.home-work .work-list .arrow{display:grid;place-items:center;width:clamp(40px,3.1vw,64px);aspect-ratio:1;border:1px solid #DCD6CA;border-radius:50%;font-size:clamp(21px,1.5vw,30px);line-height:1;transition:background .25s,color .25s,border-color .25s}
.home-work .work-list a:is(:hover,:focus-visible) .arrow{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.photo-trio{display:grid;grid-template-columns:5fr 3fr 4fr;gap:clamp(12px,1.6vw,24px);align-items:start}
.photo-trio .frame:nth-child(1){aspect-ratio:4/5}
.photo-trio .frame:nth-child(2){aspect-ratio:3/4;margin-top:22%}
.photo-trio .frame:nth-child(3){aspect-ratio:1/1;margin-top:8%}

.notes-list a{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:24px;align-items:baseline;padding:24px 0;border-top:1px solid var(--rule)}
.notes-list a:last-child{border-bottom:1px solid var(--rule)}
.notes-list .t{font-family:var(--cn-serif);font-size:clamp(19px,1.8vw,24px);line-height:1.45}
.notes-list a:hover .t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}

.now-card{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:var(--pad)}
.now-card .date{font-family:var(--en-serif);font-size:clamp(48px,6vw,88px);line-height:1}
.now-card p{font-family:var(--cn-serif);font-size:clamp(19px,1.9vw,26px);line-height:1.65;max-width:28em}

/* ---------- FOOTER ---------- */
footer{margin-top:clamp(40px,5vw,72px);padding:clamp(48px,4.5vw,90px) 0 clamp(28px,2.5vw,50px);background:#171612;color:#E8E5DD}
.footer-inner{width:76.2%;max-width:1800px;margin:0 auto}
.footer-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4vw,80px);align-items:center}
.footer-invite>p:first-child{font-family:var(--cn-serif);font-size:clamp(28px,2.6vw,54px);line-height:1.5;font-weight:400;letter-spacing:-.03em}
.footer-invite .en{font-size:clamp(24px,1.8vw,38px);line-height:1.3;color:#99958A;margin-top:8px}
.footer-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.footer-links .mono{color:#99958A;margin-bottom:16px;font-size:clamp(10px,.75vw,15px)}
.footer-links a,.footer-pending{display:block;width:fit-content;font-size:clamp(14px,1vw,20px);line-height:1.6;margin-top:10px}
.footer-links a:hover{text-decoration:underline;text-underline-offset:5px}
footer a:focus-visible{outline-color:#E8E5DD}
footer .base{display:flex;justify-content:space-between;gap:24px;margin-top:clamp(48px,4vw,80px);padding-top:clamp(24px,2vw,40px);border-top:1px solid #35332D;color:#99958A;font-size:clamp(10px,.75vw,15px);text-transform:none}

/* ---------- ABOUT ---------- */
.about-body{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--pad)}
.about-body .portrait{aspect-ratio:3/4;position:sticky;top:100px}
.about-body .txt p{font-family:var(--cn-serif);font-size:clamp(19px,1.9vw,25px);line-height:1.8;margin-bottom:1.1em}
.about-body .txt p:first-child::first-letter{font-size:3.1em;float:left;line-height:.95;margin:.06em .12em 0 0}
.career{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule)}
.career div{padding:26px 24px 26px 0;border-bottom:1px solid var(--rule)}
.career div:not(:nth-child(3n+1)){padding-left:24px;border-left:1px solid var(--rule)}
.career b{display:block;font-family:var(--cn-serif);font-weight:500;font-size:clamp(20px,1.9vw,26px);line-height:1.3}
.career .big{font-family:var(--en-serif);font-size:clamp(56px,6vw,88px);line-height:1;font-weight:400}

/* ---------- NOW ---------- */
.now-page{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:var(--pad)}
.now-page .stamp{position:sticky;top:100px;align-self:start}
.now-page .stamp .d{font-family:var(--en-serif);font-size:clamp(64px,8vw,120px);line-height:.9}
.now-page .body p{font-family:var(--cn-serif);font-size:clamp(21px,2.2vw,30px);line-height:1.7;margin-bottom:1.1em;max-width:24em}
.now-log{margin-top:64px}
.now-log div{display:grid;grid-template-columns:140px 1fr;padding:18px 0;border-top:1px solid var(--rule);font-size:14.5px;color:var(--ink2)}

/* ---------- WORK INDEX ---------- */
.work-index a{display:grid;grid-template-columns:80px minmax(0,6fr) minmax(0,4fr) minmax(0,2fr);gap:var(--pad);align-items:center;padding:clamp(28px,3.4vw,48px) 0;border-top:1px solid var(--rule);position:relative}
.work-index a:last-child{border-bottom:1px solid var(--rule)}
.work-index .n{font-family:var(--en-serif);font-size:clamp(28px,2.6vw,40px);color:var(--mute)}
.work-index .t{font-family:var(--cn-serif);font-size:clamp(26px,3.4vw,52px);line-height:1.15}
.work-index .t .en{display:block;font-size:.42em;color:var(--mute);margin-top:8px;font-family:var(--mono);font-style:normal;letter-spacing:.14em}
.work-index .frame{aspect-ratio:3/2;opacity:.0;transform:scale(.97);transition:opacity .5s,transform .6s}
.work-index a:hover .frame,.work-index a.open .frame{opacity:1;transform:none}
.work-index .st{justify-self:end;text-align:right}

/* ---------- CASE ---------- */
.case-hero{padding:clamp(56px,9vw,130px) 0 clamp(40px,5vw,64px)}
.case-hero .kicker{font-family:var(--en-serif);font-size:clamp(56px,10vw,168px);line-height:.88;letter-spacing:-.02em}
.case-hero h1{font-family:var(--cn-serif);font-size:clamp(26px,3.2vw,46px);line-height:1.35;margin-top:clamp(28px,4vw,56px);max-width:18em}
.case-hero .en-sub{font-family:var(--en-serif);font-style:italic;font-size:clamp(18px,1.8vw,24px);color:var(--mute);margin-top:12px}
.case-conclusion{font-family:var(--cn-serif);font-size:clamp(19px,2vw,28px);line-height:1.65;max-width:34em;margin-top:clamp(24px,3vw,40px);color:var(--ink2)}
.meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
.meta div{padding:18px 18px 18px 0}
.meta div+div{padding-left:18px;border-left:1px solid var(--rule)}
.meta b{display:block;font-weight:500;font-size:15px;margin-top:6px}
.case-cover{aspect-ratio:21/9;margin:clamp(40px,5vw,72px) 0 0}
.case-cover image-slot{height:100%}
.chap{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr) minmax(0,1fr);gap:var(--pad);padding:clamp(56px,7vw,104px) 0;border-top:1px solid var(--rule)}
.chap .lbl .num{font-family:var(--en-serif);font-size:clamp(40px,4vw,64px);line-height:1;display:block}
.chap .lbl h2{font-family:var(--cn-serif);font-size:22px;margin-top:14px}
.chap .lbl .en{font-size:17px;color:var(--mute)}
.chap .bd>p{font-family:var(--cn-serif);font-size:clamp(18px,1.6vw,22px);line-height:1.8;max-width:30em}
.role-big{font-family:var(--en-serif);font-size:clamp(44px,5vw,76px);line-height:1;margin-bottom:28px}
.flow{display:flex;flex-wrap:wrap;align-items:stretch;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.flow div{flex:1 1 0;min-width:0;padding:24px 18px 28px;position:relative;border-right:1px solid var(--rule);background:transparent;color:var(--ink)}
.flow div:last-child{border-right:0;background:transparent;color:var(--ink)}
.flow div .mono,.flow div:last-child .mono{color:var(--mute)}
.flow b{display:block;font-family:var(--cn-serif);font-weight:500;font-size:clamp(16px,calc(1.4vw - 1px),20px);line-height:1.35;margin-top:28px;white-space:normal}
.built li{list-style:none;display:grid;grid-template-columns:56px 1fr;padding:18px 0;border-top:1px solid var(--rule);font-family:var(--cn-serif);font-size:clamp(18px,1.6vw,22px)}
.built li:last-child{border-bottom:1px solid var(--rule)}
.built li span{font-family:var(--mono);font-size:11px;color:var(--mute);padding-top:7px}
.results{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink)}
.results div{min-width:0;padding:28px 20px 8px 0}
.results div+div{padding-left:20px;border-left:1px solid var(--rule)}
.results .v{display:flex;align-items:baseline;gap:.08em;min-width:0;font-family:var(--en-serif);font-weight:400;font-size:clamp(16px,2.2vw,30px);line-height:1;letter-spacing:0;white-space:nowrap}
.results .v .result-soft{font-family:var(--cn-serif);font-size:.5em;letter-spacing:0;white-space:normal}
.results .v small{font-size:.45em}
.results p{margin-top:16px;font-size:14px;color:var(--ink2)}
.next-case{display:flex;justify-content:space-between;align-items:end;padding:clamp(48px,6vw,96px) 0;border-top:1px solid var(--ink)}
.next-case .t{font-family:var(--cn-serif);font-size:clamp(28px,4vw,60px);line-height:1.15}
.proto-title{border-bottom:1px solid transparent;transition:border-color .25s}
.proto-title:hover{border-color:var(--accent)}
.proto-more{display:inline-flex;gap:8px;align-items:baseline;margin:0 0 22px 80px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--accent)}
.case-evidence{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,28px);margin-top:clamp(34px,5vw,64px)}
.case-evidence figure .frame{aspect-ratio:16/10;border:1px solid var(--rule);padding:clamp(10px,1.5vw,18px);background:var(--paper);cursor:zoom-in}
.case-evidence image-slot{height:100%}
.case-evidence figcaption{display:flex;gap:12px;margin-top:10px;color:var(--ink2);font-size:13px}
.case-note{margin-top:24px;color:var(--mute)}
.case-related{display:flex;gap:clamp(24px,5vw,80px);align-items:end}
.case-related a{display:flex;flex-direction:column;gap:10px}
.case-related .t{font-size:clamp(18px,2vw,28px)}
.case-lightbox[hidden]{display:none}
.case-lightbox{position:fixed;inset:0;z-index:100;background:rgba(23,26,21,.92);display:grid;place-items:center;padding:clamp(72px,10vh,96px) clamp(24px,5vw,80px) clamp(24px,4vh,48px)}
.case-lightbox-stage{width:min(92vw,1200px);height:min(78vh,820px);max-height:calc(100vh - 120px);max-height:calc(100dvh - 120px);min-width:0;min-height:0;display:grid;place-items:center}
.case-lightbox-img{display:block;max-width:calc(100vw - 48px);max-height:calc(100vh - 120px);max-height:calc(100dvh - 120px);width:auto;height:auto;object-fit:contain;background:#fff;padding:clamp(8px,1vw,16px)}
.case-lightbox-close{position:absolute;top:24px;right:var(--pad);border:1px solid rgba(250,248,244,.55);color:var(--paper);padding:8px 14px;font-family:var(--mono);font-size:11px;letter-spacing:.12em}
.case-lightbox-close:hover{border-color:var(--paper);background:var(--paper);color:var(--ink)}
body.lightbox-open{overflow:hidden}

/* ---------- AI ---------- */
.ai-index a,.ai-index > div{display:grid;grid-template-columns:80px minmax(0,5fr) minmax(0,5fr) 40px;gap:var(--pad);align-items:baseline;padding:clamp(26px,3vw,40px) 0;border-top:1px solid var(--rule)}
.ai-index > :last-child{border-bottom:1px solid var(--rule)}
.ai-index .n{font-family:var(--mono);font-size:12px;color:var(--mute)}
.ai-index .t{font-family:var(--en-serif);font-size:clamp(30px,3.6vw,56px);line-height:1.05}
.ai-index .d{font-size:15px;color:var(--ink2)}
.ai-index a.feat{background:var(--ink);color:var(--paper);padding-left:24px;padding-right:24px;margin:0 -24px}
.ai-index a.feat .d,.ai-index a.feat .n{color:color-mix(in oklab,var(--paper) 65%,transparent)}
.exp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,24px)}
.exp div{border-top:1px solid var(--ink);padding-top:18px}
.exp p{font-family:var(--cn-serif);font-size:19px;line-height:1.5;margin-top:22px}
.exp .st{margin-top:28px}
.steps{border-left:1px solid var(--ink);margin-left:6px}
.steps li{list-style:none;position:relative;padding:0 0 44px 40px}
.steps li::before{content:"";position:absolute;left:-6px;top:10px;width:11px;height:11px;border-radius:50%;background:var(--paper);border:1px solid var(--ink)}
.steps li.done::before{background:var(--ink)}
.steps li.cur::before{background:var(--accent);border-color:var(--accent)}
.steps b{display:block;font-family:var(--en-serif);font-weight:400;font-size:clamp(26px,2.6vw,38px);line-height:1.15}
.steps p{color:var(--ink2);font-size:15px;margin-top:6px;max-width:34em}
.quote{font-family:var(--en-serif);font-style:italic;font-size:clamp(28px,3.4vw,52px);line-height:1.2;max-width:20em}

/* ---------- TRAVEL ---------- */
.place{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--pad);align-items:end;padding:clamp(40px,5vw,72px) 0;border-top:1px solid var(--rule)}
.place .frame{aspect-ratio:4/3}
.place .nm{font-family:var(--en-serif);font-size:clamp(54px,7vw,112px);line-height:.88;letter-spacing:-.02em}
.place .words{font-family:var(--en-serif);font-style:italic;font-size:clamp(20px,2vw,28px);color:var(--ink2);margin-top:18px}
.place.soon{opacity:.55}
.place.soon .frame{aspect-ratio:auto;height:120px;background:transparent;border:1px dashed var(--rule);display:grid;place-items:center}
.dest-hero{position:relative;height:min(92vh,980px);margin-top:-68px}
.dest-hero .frame{position:absolute;inset:0}
.dest-hero .over{position:absolute;left:0;right:0;bottom:0;padding:var(--pad);pointer-events:none;display:flex;justify-content:space-between;align-items:end;gap:24px}
.dest-hero .nm{font-family:var(--en-serif);font-size:clamp(88px,18vw,300px);line-height:.82;letter-spacing:-.03em;mix-blend-mode:difference;color:var(--paper)}
.dest-hero .yr{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--paper);mix-blend-mode:difference;text-align:right;line-height:2}
.triad{font-family:var(--en-serif);font-style:italic;font-size:clamp(28px,3.6vw,56px);padding:clamp(48px,6vw,96px) 0;text-align:center;letter-spacing:.01em}
.triad span{color:var(--mute);font-style:normal;margin:0 .4em}
.field{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,24px)}
.field .card{background:var(--paper2);padding:24px;min-height:220px;display:flex;flex-direction:column;justify-content:space-between}
.field .card p{font-family:var(--cn-serif);font-size:17px;color:var(--mute)}
.dest-photos{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.6vw,24px)}
.dest-photos .a{grid-column:1/8;aspect-ratio:4/3}
.dest-photos .b{grid-column:9/13;aspect-ratio:3/4;margin-top:30%}
.dest-photos .c{grid-column:3/11;aspect-ratio:16/9;margin-top:clamp(24px,4vw,64px)}

/* ---------- PHOTOGRAPHY ---------- */
.ph-tabs{display:flex;gap:32px;border-bottom:1px solid var(--rule);margin-bottom:clamp(28px,4vw,56px)}
.ph-tabs button{padding:14px 0;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;color:var(--mute);position:relative}
.ph-tabs button.on{color:var(--ink)}
.ph-tabs button.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--ink)}
.ph-tabs .mode{margin-left:auto}
.viewer{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.viewer .stage{position:relative;height:min(74vh,820px);display:grid;place-items:center}
.viewer .stage .frame{height:100%;width:100%;transition:opacity .5s}
.viewer .stage .frame.fade{opacity:0}
.viewer .stage .hit{position:absolute;top:0;bottom:0;width:22%;z-index:2;cursor:w-resize}
.viewer .stage .hit.r{right:0;cursor:e-resize}
.viewer .stage .hit.l{left:0}
.viewer .bar{display:flex;justify-content:space-between;align-items:baseline;gap:20px}
.viewer .count{font-family:var(--en-serif);font-size:28px}
.viewer .count span{color:var(--mute)}
.viewer .ctrls{display:flex;gap:24px}
.dots{display:flex;gap:6px;flex-wrap:wrap}
.dots button{width:22px;height:22px;display:grid;place-items:center}
.dots button i{display:block;width:6px;height:6px;border-radius:50%;background:var(--rule);transition:background .3s,transform .3s}
.dots button.on i{background:var(--ink);transform:scale(1.3)}
.ph-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,7vw,120px) clamp(20px,4vw,72px)}
.ph-grid figure:nth-child(4n+1){aspect-ratio:4/5}
.ph-grid figure:nth-child(4n+2){aspect-ratio:3/4;margin-top:20%}
.ph-grid figure:nth-child(4n+3){aspect-ratio:3/2;grid-column:1/-1;width:72%;justify-self:center}
.ph-grid figure:nth-child(4n){aspect-ratio:1/1;grid-column:1/-1;width:44%;justify-self:end}
.ph-grid figure .frame{height:100%}

/* ---------- NOTES ---------- */
.n-filter{display:flex;gap:0;flex-wrap:wrap;justify-content:flex-end;margin:0}
.notes-filter-row{justify-content:flex-start;padding:18px 0 22px;border-bottom:1px solid var(--rule);margin-bottom:0}
.notes-filter-row + .thoughts{border-top:0}
.n-filter button{display:inline-flex;align-items:baseline;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;padding:8px 14px;border:1px solid var(--rule);border-right:0;color:var(--ink2);transition:all .25s}
.n-filter button:first-child{border-left-color:var(--ink)}
.n-filter button:last-child{border-right:1px solid var(--rule)}
.n-filter button span{font-size:10px;color:var(--mute);letter-spacing:0}
.n-filter button.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.n-filter button.on span{color:var(--paper)}
.garden a{display:grid;grid-template-columns:120px minmax(0,1fr) 160px;gap:var(--pad);align-items:baseline;padding:clamp(26px,3vw,40px) 0;border-top:1px solid var(--rule)}
.garden a:last-child{border-bottom:1px solid var(--rule)}
.garden .t{font-family:var(--cn-serif);font-size:clamp(22px,2.4vw,34px);line-height:1.4}
.garden .st{justify-self:end;display:flex;align-items:center;gap:8px}
.garden .st i{width:7px;height:7px;border-radius:50%;border:1px solid var(--ink)}
.garden .st i.b{background:linear-gradient(90deg,var(--ink) 50%,transparent 50%)}
.garden a:hover .t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:8px}
.note-art{max-width:760px;margin:0 auto}
.note-art h1{font-family:var(--cn-serif);font-size:clamp(32px,4.4vw,60px);line-height:1.3}

/* ================= V2 MODULES ================= */
/* home: short thoughts row */
.snip-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--pad);border-top:1px solid var(--rule);padding-top:28px}
.snip p{font-family:var(--cn-serif);font-size:clamp(18px,1.6vw,22px);line-height:1.7;margin-top:14px}

/* work sub-tabs */
.phead + .subtabs-wrap{margin-top:-24px}
.subtabs-wrap{position:sticky;top:68px;z-index:20;background:var(--paper);border-bottom:1px solid var(--rule)}
.subtabs{display:flex;gap:clamp(28px,5vw,80px)}
.subtabs a{display:flex;align-items:baseline;gap:12px;padding:20px 0 18px;position:relative;color:var(--mute);transition:color .3s}
.subtabs a b{font-family:var(--cn-serif);font-weight:500;font-size:clamp(18px,1.7vw,23px)}
.subtabs a i{display:none}
.subtabs a.on{color:var(--ink)}
.subtabs a.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink)}
.subtabs a:hover{color:var(--ink)}
.pane{padding-top:clamp(40px,5vw,72px)}
.pane-lede{font-family:var(--cn-serif);font-size:clamp(18px,1.7vw,24px);line-height:1.6;max-width:28em}
.pane-lede .en{display:block;font-size:.72em;color:var(--mute);margin-top:6px}

.phead-work-row{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--pad);align-items:end}
.phead-work-row .en-sub{margin-bottom:0}

/* prototype strips */
.proto{padding:clamp(40px,5vw,72px) 0;border-top:1px solid var(--rule)}
.pane-lede + .proto{margin-top:clamp(40px,5vw,72px)}
.proto-h{display:grid;grid-template-columns:80px 1fr auto;gap:var(--pad);align-items:baseline;margin-bottom:24px}
.proto-h .n{font-family:var(--en-serif);font-size:clamp(28px,2.6vw,40px);color:var(--mute)}
.proto-h h3{font-family:var(--cn-serif);font-size:clamp(22px,2.2vw,32px);line-height:1.2}
.proto-h .en{font-family:var(--en-serif);font-style:italic;color:var(--mute);font-size:18px;margin-top:4px}
.proto-desc{max-width:64em;margin:0 0 24px 80px;color:var(--ink2);font-size:14px;line-height:1.8}
.strip{display:flex;gap:clamp(12px,1.6vw,24px);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:16px;margin-right:calc(-1 * var(--pad));padding-right:var(--pad);scrollbar-width:thin;scrollbar-color:var(--ink) transparent;cursor:grab}
.strip.drag{cursor:grabbing;scroll-snap-type:none}
.strip.drag image-slot{pointer-events:none}
.strip figure{flex:0 0 min(21vw,260px);scroll-snap-align:start}
.strip figure .frame{aspect-ratio:16/10;border:1px solid var(--rule);padding:clamp(8px,1vw,14px);background:var(--paper)}
.strip figure .proto-image image-slot{height:100%}
.strip figcaption{display:flex;gap:14px;margin-top:10px;font-size:13.5px;color:var(--ink2)}

/* AI projects */
.ai-projects{border-top:1px solid var(--ink);margin-top:24px}
.ai-project{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--pad);padding:clamp(28px,4vw,56px) 0;border-bottom:1px solid var(--rule);align-items:center}
.ai-project-copy h3{font-family:var(--en-serif);font-weight:400;font-size:clamp(34px,4vw,56px);line-height:1.05;margin:16px 0}
.ai-project-copy p{font-family:var(--cn-serif);font-size:16px;line-height:1.8;color:var(--ink2);max-width:34em}
.ai-project-copy p.note{font-family:var(--cn-sans);font-size:13.5px;color:var(--mute);margin-top:8px}
.ai-project-mark{min-height:220px;background:var(--fog);display:flex;flex-direction:column;justify-content:space-between;padding:24px}
.ai-project-mark b{font-family:var(--cn-serif);font-weight:500;font-size:clamp(26px,3vw,42px)}
.ai-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
.ai-gallery figure .frame{aspect-ratio:16/10;border:1px solid var(--rule)}
.ai-gallery figcaption{margin-top:6px}
.wf{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.wf li{padding:20px 16px 28px;border-right:1px solid var(--rule);position:relative}
.wf li:last-child{border-right:0}
.wf li::before{content:"";position:absolute;left:16px;top:-6px;width:11px;height:11px;border-radius:50%;background:var(--paper);border:1px solid var(--ink)}
.wf li.done::before{background:var(--ink)}
.wf li.cur::before{background:var(--accent);border-color:var(--accent)}
.wf li.cur{background:color-mix(in oklab,var(--accent) 7%,transparent)}
.wf b{display:block;font-family:var(--en-serif);font-weight:400;font-size:clamp(20px,1.7vw,26px);line-height:1.15;margin:22px 0 10px;min-height:2.3em}
.wf p{font-size:13.5px;color:var(--ink2);line-height:1.6}
.dot-k{display:inline-block;width:8px;height:8px;border-radius:50%;border:1px solid var(--ink);margin-right:4px;vertical-align:0}
.dot-k.done{background:var(--ink)}.dot-k.cur{background:var(--accent);border-color:var(--accent)}

/* TRAVEL timeline */
.travel-shell{display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--pad);align-items:start}
.travel-index{position:sticky;top:104px;padding:14px 0 24px;border-top:1px solid var(--ink)}
.travel-index-head{display:flex;flex-direction:column;gap:2px;padding-bottom:16px;border-bottom:1px solid var(--rule)}
.travel-index-head .mono:last-child{color:var(--moss)}
.travel-index-list{display:flex;flex-direction:column}
.travel-index-list a{display:block;padding:12px 0;border-bottom:1px solid var(--rule);transition:color .25s,padding-left .25s}
.travel-index-list a:hover{color:var(--moss);padding-left:6px}
.travel-index-list a span{font-family:var(--cn-serif);font-size:14px}
.travel-content{min-width:0}
.tl{position:relative;padding-bottom:20px}
.tl::before{content:"";position:absolute;left:calc(80px + var(--pad)/2);top:0;bottom:0;width:1px;background:var(--rule)}
.stop{display:grid;grid-template-columns:80px minmax(0,1fr);gap:var(--pad);padding:clamp(20px,2.4vw,30px) 0;position:relative;scroll-margin-top:104px;min-width:0}
.stop::before{content:"";position:absolute;left:calc(80px + var(--pad)/2 - 4px);top:calc(clamp(20px,2.4vw,30px) + 8px);width:8px;height:8px;border-radius:50%;background:var(--moss)}
.stop.empty::before{background:var(--fog);border:1px solid var(--rock)}
.stop.end::before{display:none}
.stop .when{position:sticky;top:96px;align-self:start;display:flex;flex-direction:column;gap:6px}
.stop .when .d{font-family:var(--en-serif);font-size:clamp(18px,1.5vw,24px);line-height:1;color:var(--moss)}
.stop .when .mono,.meta-l .mono{font-size:8px}
.stop.empty .when .d{font-size:18px;font-family:var(--cn-sans);color:var(--rock)}
.stop .body{padding-left:calc(var(--pad)/2);min-width:0}
.stop-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px}
.stop-head .meta-l{justify-content:flex-end}
.stop .nm{font-family:var(--en-serif);font-size:clamp(24px,2.9vw,44px);line-height:.95;letter-spacing:-.02em}
.stop.empty .nm{color:var(--rock);opacity:.5}
.meta-l{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;margin-top:10px}
.meta-l .serif{font-size:11px}.meta-l .en{font-size:11px;color:var(--rock)}
.shots{display:flex;gap:clamp(10px,1.4vw,18px);overflow-x:auto;overscroll-behavior-inline:contain;padding:2px 0 10px;margin-top:clamp(16px,2vw,24px);align-items:start;scroll-snap-type:x proximity;min-width:0}
.shots figure{flex:0 0 clamp(180px,22vw,320px);min-width:0;margin:0!important;scroll-snap-align:start}
.shots figure .frame{width:100%;aspect-ratio:4/3}
.shots figcaption{margin-top:6px;font-size:9px}
/* 5 */
.shots.n5 .s1{grid-column:1/9}.shots.n5 .s1 .frame{aspect-ratio:3/2}
.shots.n5 .s2{grid-column:9/13;margin-top:18%}.shots.n5 .s2 .frame{aspect-ratio:3/4}
.shots.n5 .s3{grid-column:1/5}.shots.n5 .s3 .frame{aspect-ratio:1/1}
.shots.n5 .s4{grid-column:5/9;margin-top:10%}.shots.n5 .s4 .frame{aspect-ratio:4/5}
.shots.n5 .s5{grid-column:9/13}.shots.n5 .s5 .frame{aspect-ratio:4/5}
/* 4 */
.shots.n4 .s1{grid-column:1/7}.shots.n4 .s1 .frame{aspect-ratio:4/5}
.shots.n4 .s2{grid-column:7/13;margin-top:14%}.shots.n4 .s2 .frame{aspect-ratio:3/2}
.shots.n4 .s3{grid-column:2/7}.shots.n4 .s3 .frame{aspect-ratio:3/2}
.shots.n4 .s4{grid-column:8/12}.shots.n4 .s4 .frame{aspect-ratio:3/4}
/* 3 */
.shots.n3 .s1{grid-column:1/8}.shots.n3 .s1 .frame{aspect-ratio:4/3}
.shots.n3 .s2{grid-column:8/13;margin-top:16%}.shots.n3 .s2 .frame{aspect-ratio:4/5}
.shots.n3 .s3{grid-column:3/10}.shots.n3 .s3 .frame{aspect-ratio:16/9}
.stay{display:grid;grid-template-columns:clamp(34px,4vw,56px) minmax(0,1fr);column-gap:12px;align-items:start;margin-top:clamp(20px,2.2vw,30px);padding-top:16px;border-top:1px solid var(--rule)}
.stay-mark{font-family:var(--en-serif);font-size:clamp(40px,4vw,58px);line-height:.7;color:var(--moss);transform:translateY(4px)}
.stay .serif{font-size:clamp(20px,2vw,24px);line-height:1.45;color:var(--ink);max-width:25em}
.stop.end .body{grid-column:2;display:flex;justify-content:flex-end;align-items:center;min-height:72px;padding-right:clamp(8px,2vw,24px)}
.travel-ellipsis{font-family:var(--en-serif);font-size:clamp(52px,6vw,82px);line-height:.35;color:var(--moss)}

/* NOTES: short thoughts */
.thoughts{list-style:none;border-top:1px solid var(--ink)}
.thoughts li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:var(--pad);align-items:start;padding:clamp(28px,3.4vw,48px) 0;border-bottom:1px solid var(--rule);cursor:default}
.thoughts .no{font-family:var(--en-serif);font-size:20px;color:var(--mute)}
.thoughts p{font-family:var(--cn-serif);font-size:clamp(14.5px,1.45vw,21px);line-height:1.55;max-width:26em}
.thought-copy{display:flex;justify-content:space-between;align-items:baseline;gap:24px}
.thoughts .cat{flex:0 0 auto;color:var(--accent)}
.thoughts li:nth-child(odd) p{color:var(--ink)}

/* ABOUT compact */
.about2{padding-top:clamp(40px,6vw,88px)}
.a-top{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,6fr) minmax(0,3fr);gap:var(--pad);align-items:start;padding-bottom:clamp(40px,5vw,64px)}
.a-portrait{aspect-ratio:3/4}
.a-intro h1{font-family:var(--cn-serif);font-size:clamp(36px,4vw,56px);line-height:1.1;margin:14px 0 22px}
.a-intro h1 .en{font-size:.5em;color:var(--mute)}
.a-intro p:not(.mono){font-size:15.5px;line-height:1.9;color:var(--ink2);margin-bottom:.8em}
.a-facts{border-top:1px solid var(--ink)}
.a-facts div{padding:12px 0;border-bottom:1px solid var(--rule)}
.a-facts dd{font-size:14px;margin-top:4px;line-height:1.6}
.a-facts dd b{font-family:var(--en-serif);font-weight:400;font-size:30px;margin-right:4px}
.a-career{border-top:1px solid var(--rule);padding-top:clamp(40px,5vw,64px)}
.ctl{list-style:none;position:relative}
.ctl > li{display:grid;grid-template-columns:140px minmax(0,1fr);gap:var(--pad);position:relative;padding-bottom:28px}
.ctl > li::before{content:"";position:absolute;left:calc(140px + var(--pad)/2);top:8px;bottom:-8px;width:1px;background:var(--rule)}
.ctl > li:last-child::before{bottom:auto;height:20px}
.ctl > li::after{content:"";position:absolute;left:calc(140px + var(--pad)/2 - 5px);top:6px;width:11px;height:11px;border-radius:50%;background:var(--ink)}
.ctl > li.now::after{background:var(--accent)}
.c-when{padding-top:3px;color:var(--ink2)}
.c-main{padding-left:calc(var(--pad)/2)}
.c-head{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline}
.c-head b{font-family:var(--cn-serif);font-weight:500;font-size:clamp(19px,1.7vw,23px)}
.c-head span{font-size:14px;color:var(--mute)}
.c-proj{list-style:none;margin-top:12px;border-left:1px solid var(--rule);padding-left:20px}
.c-proj li{padding:10px 0;border-bottom:1px dashed var(--rule)}
.c-proj li:last-child{border-bottom:0}
.p-h{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.p-h .serif{font-size:16.5px}
.p-h .en{font-size:14.5px;color:var(--mute)}
.c-proj p{font-size:13.5px;color:var(--ink2);margin-top:3px;line-height:1.6}
.c-proj p.tbd{color:var(--mute);font-style:normal}
.c-proj p.tbd::before{content:"— "}
.p-kpi{display:flex;flex-wrap:wrap;gap:6px 24px;margin-top:10px}
.p-kpi span{font-size:12.5px;color:var(--mute);display:flex;align-items:baseline;gap:6px}
.p-kpi b{font-family:var(--en-serif);font-weight:400;font-size:22px;color:var(--ink)}
.a-contact{display:flex;gap:24px;align-items:baseline;flex-wrap:wrap;padding:22px 0;border-top:1px solid var(--ink);margin-top:clamp(28px,3vw,48px)}
.a-contact .serif{color:var(--ink2)}
.a-contact a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}

/* ---------- RESPONSIVE ---------- */
@media (max-width:960px){
  .nav ul{display:none}.menu-btn{display:block}
  .phead-work-row{grid-template-columns:1fr;gap:12px}
  .hero-grid{grid-template-columns:1fr;gap:42px}
  .hero-copy{max-width:680px}
  .capabilities{padding-top:72px;padding-bottom:72px}
  .capability-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .capability-card:nth-child(3n+2),.capability-card:nth-child(3n+3){padding-left:0;border-left:0}
  .capability-card:nth-child(3n+2):before,.capability-card:nth-child(3n+3):before{left:0}
  .capability-card:nth-child(2n){padding-left:28px;border-left:1px solid var(--rule)}
  .capability-card:nth-child(n+3){border-top:1px solid var(--rule)}
  .home-now{padding-top:96px;padding-bottom:96px}
  .home-now-body{grid-template-columns:160px minmax(0,1fr);gap:36px}
  .now-lead{font-size:clamp(25px,3.8vw,36px)}
  .hero-row .roles,.hero-row .tag{grid-column:1/-1}
  .hero-top{flex-direction:column}
  .home-now-head{align-items:start}
  .doors{grid-template-columns:1fr}
  .door,.door:nth-child(2n){padding-left:0;padding-right:0;border-left:0}
  .door .hint{opacity:1;transform:none}
  .sec-h,.now-card,.about-body,.now-page,.chap,.place{grid-template-columns:1fr}
  .sec-h{gap:12px}.sec-h .more{justify-self:start}
  .chap .lbl{display:flex;gap:20px;align-items:baseline}.chap .lbl h2{margin-top:0}
  .about-body .portrait,.now-page .stamp{position:static;max-width:420px}
  .work-list a{grid-template-columns:40px 1fr 24px}.work-list .e{grid-column:2/3;margin-top:-18px}
  .notes-list a,.garden a{grid-template-columns:1fr;gap:8px}
  .garden .st{justify-self:start}
  .work-index a{grid-template-columns:48px 1fr}
  .work-index .frame{display:none}.work-index .st{grid-column:2;justify-self:start;text-align:left}
  .ai-index a,.ai-index > div{grid-template-columns:40px 1fr;gap:12px 20px}
  .ai-index .d{grid-column:2}.ai-index .arrow{display:none}
  .meta,.results{grid-template-columns:1fr 1fr}
  .meta div:nth-child(3),.results div:nth-child(3){padding-left:0;border-left:0}
  .meta div:nth-child(n+3),.results div:nth-child(n+3){border-top:1px solid var(--rule)}
  .career{grid-template-columns:1fr 1fr}
  .career div{padding-left:0!important;border-left:0!important}
  .exp,.field{grid-template-columns:1fr 1fr}
  .home-work .work-list a{grid-template-columns:40px minmax(0,1fr) 40px;gap:16px;min-height:160px;padding:28px 0}
  .home-work .work-copy{grid-column:2;grid-row:1}
  .home-work .work-period{grid-column:2;grid-row:2;white-space:normal}
  .home-work .work-list .arrow{grid-column:3;grid-row:1/3}
  .home-work .work-number{grid-column:1;grid-row:1/3}
  .footer-inner{width:auto;margin:0 var(--pad)}
  .footer-top{grid-template-columns:1fr;gap:36px}
  .footer-invite>p:first-child{font-size:clamp(28px,4vw,38px)}
  .photo-trio{grid-template-columns:1fr 1fr}.photo-trio .frame:nth-child(3){display:none}
  .ph-grid{grid-template-columns:1fr}.ph-grid figure{width:100%!important;margin-top:0!important;grid-column:auto!important}
  .dest-photos .a,.dest-photos .b,.dest-photos .c{grid-column:1/-1;margin-top:0}
  .viewer .stage{height:62vh}
  .snip-row{grid-template-columns:1fr;gap:28px}
  .proto-h{grid-template-columns:48px 1fr}.proto-h > .mono{grid-column:2}
  .proto-desc{margin-left:48px}
  .proto-more{margin-left:48px}
  .strip figure{flex-basis:min(28vw,220px)}
  .ai-project{grid-template-columns:1fr;gap:22px}
  .ai-project-mark{min-height:180px}
  .wf{grid-template-columns:1fr 1fr}
  .wf li:nth-child(2n){border-right:0}.wf li{border-bottom:1px solid var(--rule)}
  .travel-shell{grid-template-columns:120px minmax(0,1fr);gap:24px}
  .travel-index{top:90px}
  .tl::before{left:calc(64px + 12px)}
  .stop{grid-template-columns:64px minmax(0,1fr);gap:24px}
  .stop::before{left:calc(64px + 12px - 4px)}
  .stop .when{position:static}
  .stop .body{padding-left:0}
  .stop-head{display:block}
  .stop-head .meta-l{justify-content:flex-start}
  .thoughts li{grid-template-columns:40px 1fr;gap:8px 16px}
  .thought-copy{display:block}
  .thoughts .cat{display:block;margin-top:10px}
  .a-top{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
  .a-facts{grid-column:1/-1}
  .ctl > li{grid-template-columns:1fr;gap:6px;padding-left:28px}
  .ctl > li::before{left:5px}.ctl > li::after{left:0}
  .c-main{padding-left:0}
}
@media (max-width:560px){
  .nav .wrap{min-height:70px}
  .hero{padding-top:42px}
  .hero h1{font-size:clamp(46px,15vw,72px)}
  .capabilities{padding-top:56px;padding-bottom:56px}
  .capabilities-head{align-items:start;gap:18px}
  .capabilities-head h2 .en,.home-now-head .en{display:block;margin:10px 0 0;font-size:.55em}
  .capabilities-head>.mono{font-size:10px;white-space:nowrap}
  .capability-grid{grid-template-columns:1fr}
  .capability-card,.capability-card:nth-child(2n),.capability-card:nth-child(3n+2),.capability-card:nth-child(3n+3){padding:34px 0 36px;border-left:0;border-top:0}
  .capability-card + .capability-card{border-top:1px solid var(--rule)}
  .capability-en{font-size:20px;margin-top:-15px}
  .capability-card h3{font-size:30px;margin-top:24px}
  .home-now-body{grid-template-columns:1fr;gap:34px}
  .home-now-meta{display:flex;justify-content:space-between;align-items:center}
  .home-now-meta .mono{margin-top:0}
  .now-lead{font-size:27px}
  .now-notes{grid-template-columns:1fr;gap:18px;margin-top:30px}
  .now-notes p{font-size:17px}
  .a-top{grid-template-columns:1fr}.a-portrait{max-width:260px}
  .subtabs a i{display:none}
  .ai-gallery{grid-template-columns:1fr}
  .case-hero .kicker{font-size:clamp(64px,20vw,112px)}
  .case-conclusion{font-size:19px}
  .case-evidence{grid-template-columns:1fr}
  .case-related{flex-direction:column;align-items:flex-start;gap:22px}
  .travel-shell{display:block}
  .travel-index{position:static;padding-bottom:18px}
  .travel-index-head{display:flex;flex-direction:column;gap:2px;align-items:flex-start}
  .travel-index-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .travel-index-list a{border-right:1px solid var(--rule)}
  .travel-index-list a:nth-child(2n){border-right:0;padding-left:12px}
  .travel-index-list a:nth-child(n+3){border-top:1px solid var(--rule)}
  .travel-index-list a:nth-child(odd){padding-left:0}
  .tl::before{left:5px}
  .stop{grid-template-columns:1fr;gap:8px;padding-left:22px}
  .stop::before{left:1px}
  .stop .when{flex-direction:row;align-items:baseline;gap:12px}
  .stop .body{padding-left:0}
  .stop.end .body{grid-column:1}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .img-rv{clip-path:none}
}
@media (max-width:560px){
  footer .base{flex-direction:column;gap:10px}
  .exp,.field,.career{grid-template-columns:1fr}
  .flow div{flex-basis:50%}
  .case-cover{aspect-ratio:4/3}
  .case-lightbox{padding:20px}
  .case-lightbox-close{top:14px;right:20px}
}