/* ============================================================
   piiiz — v7.css   unified theme + chrome + all page components
   Load AFTER grid.css. Replaces site.css + every per-page <style>.
   Sections: 1 theme · 2 nav · 3 footer · 4 shared bits · 5 masthead
   6 image grids · 7 home · 8 works index · 9 series/chapter
   10 product detail · 11 about · 12 contact · 13 studio · 14 mobile
   15 v7.2 refinements (typography · plate/paper · system semantics)
   ============================================================ */

/* ---------- 1 · theme ---------- */
:root{
  --paper:#f3f2ee;--paper-2:#e8e6e0;--ink:#1b1b1b;--ink-soft:#6f6d66;
  --ink-body:#3a3934;
  --line:#cdcabf;--line-soft:#dcd9d0;--blue:#7f9bbb;
  --footer-bg:#1a1714;--footer-fg:#896F67;
  --sans:'Zalando Sans Expanded','Schibsted Grotesk',-apple-system,system-ui,sans-serif;
  --serif:var(--sans);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);font-weight:300;line-height:1.5;letter-spacing:-.02em;-webkit-font-smoothing:antialiased}
body.menu-locked{overflow:hidden}
/* texture grid behind everything; opaque images cover it */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:url("../assets/tile.svg");background-size:var(--tile) var(--tile);background-position:0 0;opacity:.85}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.z{position:relative;z-index:1}
.soft{color:var(--ink-soft)}
::selection{background:var(--ink);color:var(--paper)}
em,i{font-style:normal}

/* ---------- 2 · nav ---------- */
nav{position:fixed;top:0;left:0;width:100%;z-index:100;background:transparent;transition:transform .55s var(--ease-out)}
nav.hidden{transform:translateY(-100%)}
.nav-row1{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:calc(var(--M) * 3);padding:0 var(--margin);overflow:hidden;transform-origin:top;transition:height .55s var(--ease-out),opacity .45s var(--ease-out),transform .55s var(--ease-out)}
nav.collapsed .nav-row1{height:0;opacity:0;transform:translateY(-100%);pointer-events:none}
.nav-row1 .r-left{justify-self:start;display:flex;align-items:center;gap:12px}
.nav-email{font-size:13px;letter-spacing:.014em;color:var(--ink-soft);transition:color .3s}
.nav-email:hover{color:var(--ink)}
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;margin-left:-10px;background:none;border:none;cursor:pointer;padding:10px}
.hamburger span{display:block;width:22px;height:1.5px;background:var(--ink);transition:transform .35s var(--ease-out),opacity .25s}
nav.menu-open .hamburger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
nav.menu-open .hamburger span:nth-child(2){opacity:0}
nav.menu-open .hamburger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.show-sm{display:none}
.nav-row1 .brand{justify-self:center;display:flex;align-items:center;line-height:0}
.nav-row1 .brand img{height:clamp(44px,5vw,60px);width:auto}
.nav-row1 .r-right{justify-self:end;display:flex;align-items:center;gap:clamp(14px,1.6vw,24px)}
.lang{display:flex;gap:7px;font-size:13px;letter-spacing:.035em;color:var(--ink-soft)}
.lang button{font:inherit;letter-spacing:inherit;background:none;border:none;cursor:pointer;color:var(--ink);padding:6px 4px;transition:color .3s}
.lang button.on{display:none}.lang span{display:none}
.nav-row2{position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(24px,3.4vw,60px);height:var(--M);padding:0 var(--margin);margin-bottom:calc(var(--M) * 4)}
.nav-row2 .mini-brand,.nav-row2 .mini-lang{position:absolute;top:50%;transform:translateY(-50%);opacity:0;pointer-events:none;transition:opacity .4s var(--ease-out)}
.nav-row2 .mini-brand{left:var(--margin);line-height:0}
.nav-row2 .mini-brand img{height:clamp(14px,1.5vw,17px);width:auto;max-width:none}
.nav-row2 .mini-lang{right:var(--margin)}
nav.collapsed .nav-row2 .mini-brand,nav.collapsed .nav-row2 .mini-lang{opacity:1;pointer-events:auto}
.nav-row2 a{font-size:clamp(14px,1.5vw,17px);letter-spacing:.056em;text-transform:uppercase;position:relative;padding:3px 0}
.nav-row2 a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out)}
.nav-row2 a:hover::after,.nav-row2 a.on::after{transform:scaleX(1);transform-origin:left}
/* first section clears the fixed nav */
.first{padding-top:calc(var(--M) * 6)}

/* ---------- 3 · footer ---------- */
footer{background:var(--footer-bg);color:var(--footer-fg);border-top:2px solid var(--footer-fg);padding:var(--s-7) var(--margin) var(--s-5);position:relative;z-index:1}
footer a{color:var(--footer-fg)}
.foot-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s-5) var(--s-6);padding-bottom:var(--s-7)}
.foot-grid .fc{flex:0 1 auto;min-width:140px}
.foot-grid .fc:last-child{text-align:right}
.foot-grid .fc h4{font-size:var(--t-label);letter-spacing:.112em;text-transform:uppercase;opacity:.75;margin-bottom:var(--s-3);font-weight:500}
.foot-grid .fc a,.foot-grid .fc p{font-size:14px;display:block;margin-bottom:6px;padding:2px 0}
.foot-grid .fc a:hover{opacity:.7}
.foot-mark{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-4);border-top:1px solid var(--footer-fg);padding-top:var(--s-5)}
.foot-mark .copy{font-size:var(--t-label);letter-spacing:.042em;text-align:right;line-height:1.5}
.foot-mark .logo-inline{display:inline-flex;align-items:flex-end;height:clamp(30px,4vw,42px);color:var(--footer-fg);line-height:0;cursor:pointer}
.foot-mark .logo-inline svg{height:100%;width:auto;display:block}

/* ---------- 4 · shared bits ---------- */
.idx{font-size:var(--t-label);letter-spacing:.112em;text-transform:uppercase;color:var(--ink-soft)}
.link-serif{font-weight:300;font-size:var(--t-h3)}
.link-serif .arr{display:inline-block}
.reveal{opacity:0}
.reveal.in{opacity:1;transition:opacity .8s var(--ease-out)}
.crumb{padding-top:calc(var(--M) * 6)}
.crumb a{font-size:var(--t-label);letter-spacing:.112em;text-transform:uppercase;color:var(--ink-soft);display:inline-block;padding:6px 0}
.crumb a:hover{color:var(--ink)}
.sec-cap{margin-top:var(--s-7);margin-bottom:var(--s-4);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);border-bottom:1px solid var(--line);padding-bottom:var(--s-2)}
.endnav{padding:var(--s-9) 0;text-align:center;display:flex;gap:var(--s-6);justify-content:center;align-items:baseline;flex-wrap:wrap}
.endnav a{font-weight:300;font-size:var(--t-h4);border-bottom:1px solid var(--ink);padding-bottom:5px}
.wip-badge{display:inline-block;font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);border:1px solid var(--ink-soft);border-radius:20px;padding:4px 12px;margin-bottom:var(--s-3)}

/* ---------- 5 · masthead (series / product / listing headers) ---------- */
.masthead{padding:var(--s-5) 0 var(--s-6);border-bottom:2px solid var(--ink)}
.masthead .lab{font-size:var(--t-label);letter-spacing:.112em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:var(--s-3)}
.masthead h1{font-weight:300;font-size:var(--t-display);line-height:.9;letter-spacing:-.045em}
.masthead h1 em{font-style:normal;color:var(--ink-soft)}
.masthead .intro{grid-column:1 / 8;margin-top:var(--s-4);font-size:var(--t-lead);line-height:1.4;color:#34332e}
.masthead .facts{grid-column:9 / 13;align-self:end}
.masthead .facts .row{display:flex;justify-content:space-between;gap:var(--s-3);font-size:13px;border-top:1px solid var(--line);padding:8px 0}
.masthead .facts .row span:first-child{color:var(--ink-soft);font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.masthead .facts .row span:last-child{text-align:right}
.masthead .htitle{grid-column:1 / 13}

/* ---------- 6 · image grids / frames ---------- */
.r45{aspect-ratio:4/5}.r11{aspect-ratio:1/1}.r32{aspect-ratio:3/2}.r169{aspect-ratio:16/9}.r916{aspect-ratio:9/16}
.sgrid{row-gap:var(--gutter);margin-top:0}
.sgrid .ph{overflow:hidden;background:var(--paper-2)}
.sgrid .ph.s12{grid-column:1 / -1}.sgrid .ph.s8{grid-column:span 8}
.sgrid .ph.s6{grid-column:span 6}.sgrid .ph.s4{grid-column:span 4}.sgrid .ph.s3{grid-column:span 3}
.sgrid .ph picture{display:block;width:100%;height:100%}
.sgrid .ph img{width:100%;height:100%;object-fit:cover;display:block}
.sgrid .ph.prod{background:#fff}
.sgrid .ph.prod img{object-fit:contain}
.bleed-img{width:100vw;margin-inline:calc(50% - 50vw);margin-top:var(--s-6);background:var(--paper-2);overflow:hidden}
.bleed-img picture{display:block;width:100%;height:100%}
.bleed-img img{width:100%;height:100%;object-fit:cover;display:block}
.bleed-img + .container .sgrid{margin-top:var(--s-7)}

/* ---------- 7 · home ---------- */
.hero-head{align-items:end;padding-bottom:var(--s-5)}
.hero-head .hero-title{grid-column:1 / 9}
.hero-head .lab{margin-bottom:var(--s-3)}
.hero-head h1{font-weight:300;font-size:var(--t-display);line-height:.92;letter-spacing:-.045em}
.hero-head h1 .ln{display:block}
.hero-head h1 em{font-style:normal;color:var(--ink-soft)}
.hero-head .hero-intro{grid-column:9 / 13;align-self:end}
.hero-head .hero-intro p{font-size:var(--t-body);line-height:1.6;color:var(--ink-body)}
.hero-fig{margin-top:var(--s-4)}
.hero-fig .clip{overflow:hidden;background:var(--paper-2);aspect-ratio:16/9}
.hero-fig img{width:100%;height:100%;object-fit:cover}
.hero-cap{margin-top:var(--s-3)}
.hero-cap .l{grid-column:1 / 9;display:flex;flex-direction:column;gap:6px}
.hero-cap .cap-tag{font-size:13px;line-height:1.55;color:var(--ink-body);max-width:52ch}
.sec-head{margin-top:var(--s-8);border-top:1px solid var(--ink);padding-top:var(--s-3);margin-bottom:var(--s-5)}
.sec-head .a{grid-column:1 / 5}
.sec-head .b{grid-column:5 / 9}
.sec-head .c{grid-column:9 / 13;text-align:right;font-size:var(--t-label);letter-spacing:.112em;color:var(--ink-soft)}
.works{row-gap:var(--s-7)}
.works .work{display:block}
.works .w1,.works .w3{grid-column:1 / 7}
.works .w2,.works .w4{grid-column:7 / 13}
.works .w2{margin-top:var(--s-7)}
.works .w3{margin-top:calc(-1 * var(--s-5))}
.works .work .frame{overflow:hidden;background:#fff;aspect-ratio:4/5}
.works .work .frame.r32{aspect-ratio:3/2}.works .work .frame.r11{aspect-ratio:1/1}
.works .work .frame img{width:100%;height:100%;object-fit:contain;transition:transform 1.2s var(--ease-out)}
.works .work .frame.cov img{object-fit:cover}
@media(hover:hover){.works .work:hover .frame img{transform:scale(1.025)}}
.works .work .cap{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);border-top:1px solid var(--ink);margin-top:var(--s-3);padding-top:var(--s-2)}
.works .work .cap .nm{font-weight:300;font-size:var(--t-h4)}
.works .work .cap .rt{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}
.works .work .cap .yr{font-size:13px}
.works .work .cap .mt{font-size:var(--t-label);letter-spacing:.098em;text-transform:uppercase;color:var(--ink-soft)}
.allwork{margin-top:var(--s-7);padding:var(--s-5) 0 var(--s-9);text-align:center}
.allwork a{border-bottom:1px solid var(--ink);padding-bottom:5px}

/* ---------- 8 · works index ---------- */
.page-head{align-items:end;padding-bottom:var(--s-5)}
.page-head .h-title{grid-column:1 / 9}
.page-head .lab{font-size:var(--t-label);letter-spacing:.112em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:var(--s-3)}
.page-head h1{font-weight:300;font-size:var(--t-display);line-height:.88;letter-spacing:-.045em}
.page-head h1 em{font-style:normal;color:var(--ink-soft)}
.page-head .meta{grid-column:9 / 13;align-self:end}
.page-head .meta .row{display:flex;justify-content:space-between;gap:var(--s-3);font-size:13px;border-top:1px solid var(--line);padding:8px 0}
.page-head .meta .row span:first-child{color:var(--ink-soft);font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.phase{margin-top:var(--s-9);border-top:4.5px solid var(--ink);padding-top:var(--s-4)}
.phase .hd{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4)}
.phase .hd h2{font-weight:300;font-size:var(--t-h1);line-height:.9;letter-spacing:-.045em}
.phase .hd .yr{font-size:var(--t-micro);letter-spacing:.04em;color:var(--ink-soft);white-space:nowrap}
.phase .desc{margin-top:var(--s-3);font-size:var(--t-body);line-height:1.55;color:var(--ink-body)}
.studio-ptr{display:flex;justify-content:center;align-items:center;gap:var(--s-4);margin-top:var(--s-5);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--s-4) 0}
.studio-ptr a{font-weight:300;font-size:var(--t-h4);border-bottom:1px solid var(--ink);padding-bottom:3px;white-space:nowrap}
.entry{padding-top:var(--s-8)}
.ent-hero{position:relative;overflow:hidden;background:var(--paper-2);isolation:isolate;aspect-ratio:16/9}
.ent-hero img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.3s var(--ease-out)}
.ent summary{list-style:none;cursor:pointer;outline:none}
.ent summary::-webkit-details-marker{display:none}
.ent summary:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.ent-bar{align-items:end;border-top:1px solid var(--ink);padding-top:var(--s-3);margin-top:var(--s-3);position:relative}
.ent-bar .eb-l{grid-column:1 / 9}
.ent-bar .ent-idx{display:block;margin-bottom:6px;font-size:var(--t-label);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-soft)}
.ent-bar .ent-title{font-weight:300;font-size:var(--t-h3);line-height:1;letter-spacing:-.03em}
.ent-bar .eb-r{grid-column:9 / 13;text-align:right;align-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.ent-bar .eb-r .ent-yr{font-size:13px}
.ent-bar .eb-r .ent-mt{font-size:var(--t-label);letter-spacing:.098em;text-transform:uppercase;color:var(--ink-soft)}
.ent-toggle{display:inline-flex;align-items:center;gap:8px;color:var(--ink-soft);padding:4px 0}
.ent-toggle .tg-more{font-size:var(--t-label);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.ent-toggle .tg-ico{width:10px;height:10px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(45deg);transition:transform .4s var(--ease-out);margin-bottom:3px}
.ent[open] .ent-toggle .tg-ico{transform:rotate(-135deg);margin-bottom:-3px}
.ent-open{padding-top:var(--s-5)}
.ent-desc{font-size:var(--t-body);line-height:1.6;color:var(--ink-body);max-width:60ch;margin-bottom:var(--s-5)}
.ent-grid{row-gap:var(--gutter)}
.ent-grid .ph{grid-column:span 4;overflow:hidden;background:var(--paper-2)}
.ent-grid .ph picture{display:block;width:100%;height:100%}
.ent-grid .ph img{width:100%;height:100%;object-fit:cover;display:block}
.ent-grid .ph.prod{background:#fff}.ent-grid .ph.prod img{object-fit:contain}
.view-series{display:inline-block;margin-top:var(--s-5);font-weight:300;font-size:var(--t-h4);border-bottom:1px solid var(--ink);padding-bottom:4px}
.bentu-row{margin-top:var(--s-6);row-gap:var(--s-6)}
.bcard{grid-column:span 3}
.bcard .car{position:relative;overflow:hidden;background:#fff;aspect-ratio:4/5;isolation:isolate}
.bcard .car .slide{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease-out)}
.bcard .car .slide.on{opacity:1}
.bcard .car .slide img{width:100%;height:100%;object-fit:contain;display:block}
.bcard .bcap{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);margin-top:var(--s-3);border-top:1px solid var(--ink);padding-top:var(--s-2)}
.bcard .bcap .bn{font-weight:300;font-size:var(--t-h4)}
.bcard .bcap .by{font-size:13px;color:var(--ink-soft);white-space:nowrap}
.bcard .bd{margin-top:8px;font-size:13px;line-height:1.55;color:var(--ink-body)}
@media(max-width:960px){.bcard{grid-column:span 6}}
@media(max-width:560px){.bcard{grid-column:1 / -1}}
.lastsec{padding-bottom:var(--s-9)}

/* ---------- 9 · series pages (chapters) ---------- */
.chapter{padding-top:var(--s-9)}
.ch-head{align-items:start;border-top:1px solid var(--ink);padding-top:var(--s-4)}
.ch-head .ch-no{grid-column:1 / 3;font-weight:300;font-size:var(--t-h1);line-height:.8;letter-spacing:-.04em}
.ch-head .ch-meta{grid-column:3 / 11}
.ch-place{margin-bottom:var(--s-2)}
.ch-title{font-weight:300;font-size:var(--t-h1);line-height:.95;letter-spacing:-.04em}
.ch-sub{display:flex;gap:var(--s-4);align-items:baseline;margin-top:var(--s-3);flex-wrap:wrap}
.ch-sub .ch-yr{font-size:13px}
.ch-sub .ch-mat{font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.ch-body{margin-top:var(--s-4);font-size:var(--t-body);line-height:1.65;color:var(--ink-body);max-width:60ch}

/* marble-dyeing redesign: statement + process ledger */
.md-state{padding-top:var(--s-8)}
.md-state h2{font-weight:300;font-size:var(--t-h2);line-height:1.08;letter-spacing:-.035em;max-width:24ch}
.md-state h2 em{font-style:normal;color:var(--ink-soft)}
.md-state .note{margin-top:var(--s-4);font-size:var(--t-body);line-height:1.65;color:var(--ink-body);max-width:58ch}
.md-process{margin-top:var(--s-7);border-top:1px solid var(--ink)}
.md-step{display:grid;grid-template-columns:var(--s-7) 1fr 2fr;gap:var(--s-4);align-items:baseline;border-bottom:1px solid var(--line);padding:var(--s-4) 0}
.md-step .no{font-weight:300;font-size:var(--t-h3);line-height:1;letter-spacing:-.03em;color:var(--ink-soft)}
.md-step .nm{font-size:var(--t-lead);line-height:1.25}
.md-step .tx{font-size:var(--t-body);line-height:1.6;color:var(--ink-body)}

/* ---------- 10 · product detail (marble pieces) ---------- */
.pd-head{padding-top:calc(var(--M) * 5.2)}
.pd-head .crumbline{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);padding:6px 0 var(--s-4)}
.pd-head .crumbline a{font-size:var(--t-label);letter-spacing:.112em;text-transform:uppercase;color:var(--ink-soft);padding:6px 0}
.pd-head .crumbline a:hover{color:var(--ink)}
.pd-grid{border-top:2px solid var(--ink);padding-top:var(--s-4);align-items:start}
.pd-grid .pd-title{grid-column:1 / 8}
.pd-grid .pd-title .lab{font-size:var(--t-label);letter-spacing:.112em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:var(--s-3)}
.pd-grid .pd-title h1{font-weight:300;font-size:var(--t-h1);line-height:.92;letter-spacing:-.04em}
.pd-grid .pd-title h1 em{font-style:normal;color:var(--ink-soft)}
.pd-grid .pd-title .pd-desc{margin-top:var(--s-4);font-size:var(--t-lead);line-height:1.45;color:#34332e;max-width:44ch}
.pd-grid .pd-specs{grid-column:9 / 13}
.pd-grid .pd-specs .row{display:flex;justify-content:space-between;gap:var(--s-3);font-size:13px;border-top:1px solid var(--line);padding:9px 0}
.pd-grid .pd-specs .row:first-child{border-top:1px solid var(--ink)}
.pd-grid .pd-specs .row span:first-child{color:var(--ink-soft);font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.pd-grid .pd-specs .row span:last-child{text-align:right}
.pd-grid .pd-specs .enq{display:inline-block;margin-top:var(--s-4);font-size:var(--t-micro);letter-spacing:.03em;border-bottom:1px solid var(--ink);padding-bottom:3px}
.pd-body{margin-top:var(--s-6)}
.pd-body .sgrid{margin-top:var(--gutter)}
.pd-pager{margin-top:var(--s-8);border-top:1px solid var(--ink)}
.pd-pager .pp{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter)}
.pd-pager a{display:flex;flex-direction:column;gap:8px;padding:var(--s-4) 0;color:var(--ink)}
.pd-pager a .dir{font-size:var(--t-label);letter-spacing:.112em;text-transform:uppercase;color:var(--ink-soft)}
.pd-pager a .pnm{font-weight:300;font-size:var(--t-h3);line-height:1;letter-spacing:-.03em;border-bottom:1px solid transparent;transition:color .3s}
.pd-pager a:hover .pnm{color:var(--ink-soft)}
.pd-pager a.next{text-align:right;align-items:flex-end;border-left:1px solid var(--line)}

/* ---------- 11 · about ---------- */
.about-head{padding-bottom:var(--s-5);border-bottom:2px solid var(--ink)}
.about-head .lab{grid-column:1 / -1;margin-bottom:var(--s-3)}
.about-head h1{grid-column:1 / -1;font-weight:300;font-size:var(--t-display);line-height:.9;letter-spacing:-.045em}
.about-head h1 em{font-style:normal;color:var(--ink-soft)}
.bio{margin-top:var(--s-7);align-items:start}
.bio .portrait{grid-column:1 / 5}
.bio .portrait picture{display:block;background:var(--paper-2)}
.bio .portrait img{width:100%;height:auto}
.bio .portrait figcaption{margin-top:var(--s-2);font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.bio .text{grid-column:6 / 12}
.bio .text .lead{font-size:var(--t-h4);line-height:1.3;margin-bottom:var(--s-4)}
.bio .text p{font-size:var(--t-body);line-height:1.7;color:var(--ink-body)}
.bio .text p + p{margin-top:var(--s-3)}
.frags{margin-top:var(--s-8);border-top:1px solid var(--ink);padding-top:var(--s-4)}
.frags .lbl{grid-column:1 / 3}
.frags .ca{grid-column:3 / 8}
.frags .cb{grid-column:8 / 13}
.frags p{font-size:var(--t-lead);line-height:1.45;margin-bottom:var(--s-4);max-width:30ch}
.tl{margin-top:var(--s-8)}
.tl-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);border-bottom:2px solid var(--ink);padding-bottom:var(--s-3)}
.tl-head .lh{font-weight:300;font-size:var(--t-h2);letter-spacing:-.035em}
.tl-head .lh em{font-style:normal;color:var(--ink-soft)}
.tl-row{display:grid;grid-template-columns:2fr 2fr 5fr;gap:var(--s-4);border-bottom:1px solid var(--line);padding:var(--s-4) 0;align-items:baseline}
.tl-row .yr{font-size:13px;white-space:nowrap}
.tl-row .ttl{font-size:var(--t-lead);line-height:1.2}
.tl-row .desc{font-size:var(--t-micro);line-height:1.6;color:var(--ink-body)}
.buzao{margin-top:var(--s-8);border-top:1px solid var(--ink);padding-top:var(--s-4);align-items:start}
.buzao .lbl{grid-column:1 / 3}
.buzao .img{grid-column:3 / 8}
.buzao .img picture{display:block;background:var(--paper-2)}
.buzao .img figcaption{margin-top:var(--s-2);font-size:var(--t-label);letter-spacing:.06em;color:var(--ink-soft);line-height:1.6}
.buzao .text{grid-column:8 / 13}
.buzao .text .lead{font-size:var(--t-h4);line-height:1.3;margin-bottom:var(--s-4)}
.buzao .text p{font-size:var(--t-micro);line-height:1.65;color:var(--ink-body)}
.buzao .text p + p{margin-top:var(--s-3)}
.partner{margin-top:var(--s-9);background:var(--paper-2);padding:var(--s-7) 0}
.partner .lbl{grid-column:1 / 3}
.partner h2{grid-column:3 / 11;font-weight:300;font-size:var(--t-h2);line-height:1.12;letter-spacing:-.03em}
.partner h2 em{font-style:normal;color:var(--ink-soft)}
.partner .cta{grid-column:3 / 11;margin-top:var(--s-5);display:flex;align-items:baseline;gap:var(--s-5);flex-wrap:wrap}

/* ---------- 12 · contact (v7 redesign) ---------- */
.c-head{padding-bottom:var(--s-5);border-bottom:2px solid var(--ink)}
.c-head .lab{grid-column:1 / -1;margin-bottom:var(--s-3)}
.c-head h1{grid-column:1 / -1;font-weight:300;font-size:var(--t-display);line-height:.9;letter-spacing:-.045em}
.c-head h1 em{font-style:normal;color:var(--ink-soft)}
.c-mega{padding:var(--s-7) 0 var(--s-6);border-bottom:1px solid var(--ink)}
.c-mega .lab{margin-bottom:var(--s-3)}
.c-mega a.mail{display:inline-block;font-weight:300;font-size:clamp(1.7rem,5.6vw,4.6rem);line-height:1.05;letter-spacing:-.035em;border-bottom:2px solid var(--ink);padding-bottom:.08em;word-break:break-all;transition:color .3s}
.c-mega a.mail:hover{color:var(--ink-soft);border-color:var(--ink-soft)}
.c-mega .sub{margin-top:var(--s-4);font-size:var(--t-micro);color:var(--ink-soft)}
.c-ways{row-gap:var(--gutter);margin-top:var(--s-6)}
.c-way{grid-column:span 4;display:flex;flex-direction:column;border-top:1px solid var(--ink);padding-top:var(--s-3);min-height:100%}
.c-way .no{font-size:var(--t-label);letter-spacing:.112em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:var(--s-3)}
.c-way h3{font-weight:300;font-size:var(--t-h3);line-height:1.05;letter-spacing:-.03em}
.c-way p{margin-top:var(--s-3);font-size:var(--t-micro);line-height:1.6;color:var(--ink-body);max-width:36ch;flex:1}
.c-way a{display:inline-block;margin-top:var(--s-4);font-size:var(--t-micro);letter-spacing:.02em;border-bottom:1px solid var(--ink);padding-bottom:3px;align-self:flex-start}
.c-way a:hover{color:var(--ink-soft);border-color:var(--ink-soft)}
.c-facts{margin-top:var(--s-8);border-top:1px solid var(--ink)}
.c-facts .row{display:grid;grid-template-columns:1fr 2fr;gap:var(--s-4);border-bottom:1px solid var(--line);padding:var(--s-3) 0;align-items:baseline}
.c-facts .row .k{font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.c-facts .row .v{font-size:var(--t-body);line-height:1.55}
.c-facts .row .v a{border-bottom:1px solid var(--ink);padding-bottom:2px}
.c-mfg{margin-top:var(--s-8);margin-bottom:var(--s-9);background:var(--paper-2);padding:var(--s-6) 0}
.c-mfg .lbl{grid-column:1 / 3}
.c-mfg .tx{grid-column:3 / 11}
.c-mfg .tx p{font-size:var(--t-lead);line-height:1.45;max-width:44ch}
.c-mfg .tx .cta{margin-top:var(--s-4);display:flex;align-items:baseline;gap:var(--s-5);flex-wrap:wrap}
.c-mfg .tx .cta a{font-weight:300;font-size:var(--t-h4);border-bottom:1px solid var(--ink);padding-bottom:4px}

/* ---------- 13 · in progress ---------- */
.studio-first{padding-bottom:var(--s-9)}
.studio-first .chapter:first-of-type{padding-top:var(--s-6)}
.studio-first .chapter:first-of-type .ch-head{border-top:none;padding-top:0}

/* ---------- 14 · mobile ---------- */
@media(max-width:1024px){
  .bio .portrait{grid-column:1 / 6}
  .bio .text{grid-column:6 / 13}
}
@media(max-width:820px){
  .foot-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gutter);row-gap:var(--s-5)}
  .foot-grid .fc{flex:none}
  .foot-grid .fc:nth-child(2),.foot-grid .fc:last-child{text-align:right}
}
@media(max-width:760px){
  .masthead .intro,.masthead .facts,.masthead .htitle{grid-column:1 / -1}
  .masthead .facts{margin-top:var(--s-4)}
  .ch-head .ch-no{grid-column:1 / -1;font-size:var(--t-h2)}
  .ch-head .ch-meta{grid-column:1 / -1;margin-top:var(--s-3)}
  .sgrid .ph.s8,.sgrid .ph.s6{grid-column:1 / -1}
  .sgrid .ph.s4,.sgrid .ph.s3{grid-column:span 6}
  .hero-head .hero-title,.hero-head .hero-intro{grid-column:1 / -1}
  .hero-head .hero-intro{margin-top:var(--s-4)}
  .hero-fig .clip{aspect-ratio:4/3}
  .hero-cap .l{grid-column:1 / -1}
  .sec-head .a,.sec-head .b,.sec-head .c{grid-column:1 / -1;text-align:left}
  .sec-head .b,.sec-head .c{margin-top:6px}
  .works{row-gap:var(--s-6)}
  .works .w1,.works .w2,.works .w3,.works .w4{grid-column:1 / -1;margin-top:0}
  .page-head .h-title,.page-head .meta{grid-column:1 / -1}
  .page-head .meta{margin-top:var(--s-4)}
  .ent-bar .eb-l,.ent-bar .eb-r{grid-column:1 / -1}
  .ent-bar .eb-r{text-align:left;align-items:flex-start;margin-top:10px;flex-direction:row;justify-content:space-between;width:100%;align-items:baseline}
  .ent-grid .ph{grid-column:1 / -1}
  .flag .fr{aspect-ratio:4/3}
  .md-step{grid-template-columns:var(--s-6) 1fr;row-gap:6px}
  .md-step .tx{grid-column:2 / -1}
  .pd-grid .pd-title,.pd-grid .pd-specs{grid-column:1 / -1}
  .pd-grid .pd-specs{margin-top:var(--s-5)}
  .bio .portrait,.bio .text{grid-column:1 / -1}
  .bio .text{margin-top:var(--s-5)}
  .frags .lbl,.frags .ca,.frags .cb{grid-column:1 / -1}
  .frags .ca{margin-top:var(--s-4)}
  .tl-row{grid-template-columns:1fr;gap:6px}
  .buzao .lbl,.buzao .img,.buzao .text{grid-column:1 / -1}
  .buzao .text{margin-top:var(--s-5)}
  .partner .lbl,.partner h2,.partner .cta{grid-column:1 / -1}
  .partner h2{margin-top:var(--s-3)}
  .c-way{grid-column:1 / -1}
  .c-facts .row{grid-template-columns:1fr;gap:4px}
  .c-mfg .lbl,.c-mfg .tx{grid-column:1 / -1}
  .c-mfg .tx{margin-top:var(--s-3)}
  .pd-pager .pp{grid-template-columns:1fr}
  .pd-pager a.next{border-left:none;border-top:1px solid var(--line)}
  .endnav{padding:var(--s-7) 0;gap:var(--s-4)}
  /* no scroll animation on mobile */
  .reveal{opacity:1}.reveal.in{transition:none}
}
@media(max-width:640px){
  /* tighter vertical rhythm on phones (overrides grid.css tokens) */
  :root{--s-6:56px;--s-7:72px;--s-8:96px;--s-9:112px;--s-10:128px}
  /* mobile nav: hamburger (left) · logo (center) · lang (right); dropdown menu */
  nav{background:var(--paper)}
  .nav-row1{height:calc(var(--M) * 2.4)}
  nav.collapsed .nav-row1{height:calc(var(--M) * 2.4);opacity:1;transform:none;pointer-events:auto}
  .nav-email.hide-sm{display:none}
  .hamburger.show-sm{display:flex}
  .nav-row1 .brand img{height:34px}
  .nav-row2{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;height:auto;margin-bottom:0;padding:0 var(--margin);max-height:0;overflow:hidden;transition:max-height .4s var(--ease-out);background:var(--paper)}
  nav.menu-open .nav-row2{max-height:80vh;padding-top:var(--s-2);padding-bottom:var(--s-5);border-bottom:1px solid var(--line)}
  .nav-row2 .mini-brand,.nav-row2 .mini-lang{display:none}
  .nav-row2 a{font-size:22px;letter-spacing:-.01em;text-transform:none;padding:14px 0;width:100%;border-bottom:1px solid var(--line-soft)}
  .nav-row2 a:last-of-type{border-bottom:none}
  .nav-row2 a::after{display:none}
  .first{padding-top:calc(var(--M) * 3.6)}
  .crumb{padding-top:calc(var(--M) * 3.4)}
  .pd-head{padding-top:calc(var(--M) * 3.2)}
  .c-mega a.mail{font-size:clamp(1.45rem,7.8vw,2.2rem);word-break:normal;overflow-wrap:anywhere}
  .bleed-img{margin-top:var(--s-5)}
  footer{padding:var(--s-6) var(--margin) var(--s-4)}
}

/* ============================================================
   15 · v7.2 refinements — 同一位设计师又打磨了一轮（2026-07-07）
   三层：排印（01–07）· 图版-纸面（08–13）· 系统语义（14–16）
   ============================================================ */

/* 01 · 真实细体（fonts URL 已改为加载 300；禁用伪合成） */
html{font-synthesis:none}

/* 02 · 小标签系统：升重 400 + 大写字距归一 .12em */
.idx,.t-label,.sec-cap,.wip-badge,
.masthead .lab,.page-head .lab,.c-mega .lab,
.pd-grid .pd-title .lab,.pd-pager a .dir,
.crumb a,.pd-head .crumbline a,
.works .work .cap .mt,.ent-bar .ent-idx,.ent-bar .eb-r .ent-mt,
.ch-sub .ch-mat,.c-way .no,.c-facts .row .k,
.masthead .facts .row span:first-child,
.page-head .meta .row span:first-child,
.pd-grid .pd-specs .row span:first-child,
.ent-toggle .tg-more{
  font-weight:400;
  letter-spacing:.12em;
}

/* 03 · 数字表格化 */
.works .work .cap .yr,.ent-bar .eb-r .ent-yr,.ch-sub .ch-yr,.tl-row .yr,
.masthead .facts .row,.page-head .meta .row,.pd-grid .pd-specs .row,
.c-facts .row .v,.md-step .no,.ch-head .ch-no,.phase .hd .yr,
.sec-head .c,.foot-mark .copy{
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1;
}

/* 04 · 断行质量：标题 balance、正文 pretty、标点悬挂 */
.hero-head h1,.masthead h1,.page-head h1,.c-head h1,.about-head h1,
.md-state h2,.partner h2,.tl-head .lh{text-wrap:balance;hanging-punctuation:first allow-end}
.hero-head .hero-intro p,.masthead .intro,.ent-desc,.ch-body,.md-state .note,
.bio .text p,.buzao .text p,.c-way p,.pd-grid .pd-title .pd-desc,
.hero-cap .cap-tag{text-wrap:pretty}

/* 05 · 中文模式排版专项 */
html[lang="zh"] body{
  letter-spacing:0;
  font-family:'Zalando Sans Expanded','PingFang SC','Noto Sans SC',
              'Microsoft YaHei UI','Microsoft YaHei',sans-serif;
}
html[lang="zh"] :is(.hero-head,.masthead,.page-head,.c-head,.about-head) h1{
  letter-spacing:.01em;line-height:1.06;
}
html[lang="zh"] :is(.ent-bar .ent-title,.ch-title,.md-state h2,.partner h2,
  .tl-head .lh,.c-way h3,.phase .hd h2,.pd-grid .pd-title h1){
  letter-spacing:.01em;line-height:1.18;
}
html[lang="zh"] :is(p,.ent-desc,.ch-body,.md-step .tx,.masthead .intro){line-height:1.85}
html[lang="zh"] .nav-row2 a{letter-spacing:.14em}
@media(max-width:640px){html[lang="zh"] .nav-row2 a{letter-spacing:.05em}}

/* 06 · 体系收口：页脚排印 + 正文灰归一 */
.foot-grid .fc h4{letter-spacing:.12em}
.foot-grid .fc a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.masthead .intro,.pd-grid .pd-title .pd-desc{color:var(--ink-body)}

/* 07 · 链接收口：下划线随字号缩放 + hover 不再「变灰示弱」 */
.c-mega a.mail{border-bottom:none;padding-bottom:0;
  text-decoration:underline;text-decoration-thickness:.045em;text-underline-offset:.14em;
  transition:color .3s,text-decoration-color .35s var(--ease-out)}
.c-mega a.mail:hover{color:var(--ink);text-decoration-color:var(--blue)}
.endnav a,.allwork a,.view-series,.studio-ptr a{border-bottom:none;padding-bottom:0;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.pd-pager a .pnm{transition:color .3s,border-color .35s var(--ease-out)}
.pd-pager a .dir{transition:color .3s}
.pd-pager a:hover .pnm{color:var(--ink);border-bottom-color:var(--ink)}
.pd-pager a:hover .dir{color:var(--ink)}

/* 08 · 图版细线（plate keyline） */
.works .work .frame,.sgrid .ph,.ent-grid .ph,.hero-fig .clip,
.bio .portrait picture,.buzao .img picture{position:relative}
.works .work .frame::after,.sgrid .ph::after,.ent-grid .ph::after,
.bcard .car::after,.hero-fig .clip::after,.ent-hero::after,
.bio .portrait picture::after,.buzao .img picture::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(27,27,27,.09);
  transition:box-shadow .45s var(--ease-out)}

/* 09 · Passe-partout：contain 产品图模数化内衬（.tight 可逐张豁免） */
.sgrid .ph.prod img,.ent-grid .ph.prod img,.works .work .frame:not(.cov) img{padding:var(--s-4)}
.bcard .car .slide img{padding:var(--s-3)}
@media(max-width:640px){
  .sgrid .ph.prod img,.ent-grid .ph.prod img,.works .work .frame:not(.cov) img{padding:var(--s-3)}
}
.sgrid .ph.prod.tight img,.ent-grid .ph.prod.tight img,
.works .work .frame.tight img,.bcard .car.tight .slide img{padding:0}

/* 10 · 方格纸主线层：每 6M 一条极淡蓝主线 */
body::before{opacity:.78}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    repeating-linear-gradient(to right,rgba(127,155,187,.14) 0 1px,transparent 1px calc(var(--tile) * 6)),
    repeating-linear-gradient(to bottom,rgba(127,155,187,.14) 0 1px,transparent 1px calc(var(--tile) * 6))}
@media(max-width:640px){body::after{display:none}}

/* 11 · 线的制度：4px 章节线 + 带状元素边界 + hero 图注入语法 */
:root{--rule-hair:1px;--rule-lead:2px;--rule-chapter:4px}
.phase{border-top-width:var(--rule-chapter)}
.bleed-img{border-block:1px solid rgba(27,27,27,.10)}
.partner,.c-mfg{border-block:1px solid var(--line)}
.hero-cap .l{border-top:1px solid var(--ink);padding-top:var(--s-2)}

/* 12 · 深色图版 .dk：暖黑底版 + 反白内线 */
.works .work .frame.dk,.sgrid .ph.dk,.ent-grid .ph.dk{background:#221f1b}
.works .work .frame.dk::after,.sgrid .ph.dk::after,.ent-grid .ph.dk::after{
  box-shadow:inset 0 0 0 1px rgba(243,242,238,.10)}
@media(hover:hover){
  .works .work:hover .frame.dk::after{box-shadow:inset 0 0 0 1px rgba(243,242,238,.28)}
}

/* 13 · works hover 修正：删缩放遗留，keyline 加深 + 标题下划线划入 */
.works .work .frame img{transition:none}
.ent-hero img{transition:none}
@media(hover:hover){
  .works .work:hover .frame img{transform:none}
  .works .work:hover .frame::after{box-shadow:inset 0 0 0 1px rgba(27,27,27,.22)}
  .works .work .cap .nm{background-image:linear-gradient(currentColor,currentColor);
    background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;
    transition:background-size .5s var(--ease-out)}
  .works .work:hover .cap .nm{background-size:100% 1px}
}

/* 14 · 蓝色=系统语义：选区/焦点环/平台细节/WIP 状态点/当前导航 */
::selection{background:var(--blue);color:var(--ink)}
footer ::selection{background:var(--footer-fg);color:var(--footer-bg)}
:where(a,button,summary):focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}
.ent summary:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
:root{accent-color:var(--blue)}
@supports(scrollbar-color:auto){html{scrollbar-color:var(--line) var(--paper)}}
body{-webkit-tap-highlight-color:rgba(127,155,187,.15)}
.wip-badge::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--blue);margin-right:8px;vertical-align:.06em}
.nav-row2 a.on::after{background:var(--blue)}
@media(max-width:640px){
  .nav-row2 a.on::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
    background:var(--blue);margin-right:10px;vertical-align:.12em}
}

/* 15 · 箭头 → / ↗ 微位移（transform 只作用于箭头字符） */
.arr,.arr-ext{display:inline-block;transition:transform .4s var(--ease-out)}
a:hover .arr{transform:translateX(5px)}
a:hover .arr-ext{transform:translate(3px,-3px)}
@media(prefers-reduced-motion:reduce){
  .arr,.arr-ext{transition:none}
  a:hover .arr,a:hover .arr-ext{transform:none}
}

/* 16 · works 手风琴展开淡入（仅桌面，与全站 reveal 语言同构） */
@media(min-width:761px) and (prefers-reduced-motion:no-preference){
  .ent[open] .ent-open{animation:v72-fade .55s var(--ease-out) both}
}
@keyframes v72-fade{from{opacity:0}to{opacity:1}}
.ent-toggle{transition:color .3s}
.ent summary:hover .ent-toggle{color:var(--ink)}