/* PCBfactory — Editorial showroom direction. Cream & stone, ink, terracotta. Fraunces + Hanken Grotesk. */
:root{
  --cream:#F3EEE6;--paper:#F9F6F1;--stone:#E6DED1;--sand:#D8CCB9;--ink:#1C1A17;--ink2:#4F4A42;--mute:#8A8274;--line:#D9D0C1;
  --terra:#A5452A;--moss:#262B24;--moss2:#33392F;
  --serif:'Fraunces',ui-serif,Georgia,'Times New Roman',serif;--sans:'Hanken Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --pad:clamp(18px,4vw,64px);--max:1560px;--ease:cubic-bezier(.22,.8,.2,1)
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
::selection{background:var(--ink);color:var(--cream)}
:focus-visible{outline:1.5px solid var(--terra);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.serif{font-family:var(--serif);font-optical-sizing:auto}
.it{font-style:italic}
.cap{font:600 11px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.mute{color:var(--mute)}.ink2{color:var(--ink2)}.terra{color:var(--terra)}
.price,.num{font-family:var(--serif);font-variant-numeric:lining-nums}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;z-index:200;background:var(--ink);color:var(--cream);padding:8px 12px}
.ul{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .4s var(--ease);padding-bottom:2px}
.ul:hover{background-size:100% 1px}
.lnk{display:inline-flex;align-items:center;gap:10px;font-weight:500;border-bottom:1px solid currentColor;padding-bottom:3px;transition:gap .3s var(--ease)}
.lnk:hover{gap:16px}
svg.i{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- Header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:rgba(243,238,230,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:background .4s,border-color .4s,color .4s}
.hdr.scrolled{border-color:var(--line)}
.hdr .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:76px}
.hdr .l,.hdr .r{display:flex;gap:28px;align-items:center}
.hdr .r{justify-content:flex-end}
.hdr a,.hdr button{font-size:14px;font-weight:500;letter-spacing:.01em;display:inline-flex;gap:8px;align-items:center}
.word{font-family:var(--serif);font-weight:400;font-size:30px;letter-spacing:-.02em;font-variation-settings:"opsz" 144}
.word em{font-style:italic;font-weight:300}
.menu-ico{width:22px;height:9px;position:relative;display:inline-block}
.menu-ico:before,.menu-ico:after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .3s}
.menu-ico:before{top:0}.menu-ico:after{bottom:0;right:6px}
.bagn{font-family:var(--serif);font-size:13px;min-width:22px;height:22px;border-radius:11px;border:1px solid currentColor;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
body.home .hdr:not(.scrolled){background:transparent;color:var(--paper)}
body.home .hdr{position:fixed;left:0;right:0}
.hdr .sub{display:flex;justify-content:center;gap:34px;border-top:1px solid var(--line);height:42px;align-items:center}
.hdr .sub a{font-size:13px;color:var(--ink2)}.hdr .sub a sup{font-family:var(--serif);font-size:10px;margin-left:3px;color:var(--mute)}
.hdr .sub a[aria-current=page]{color:var(--ink)}
body.home .hdr .sub{display:none}
@media (max-width:820px){.hdr .wrap{height:64px}.word{font-size:24px}.hdr .hide-m{display:none}.hdr .l,.hdr .r{gap:16px}.hdr .sub{justify-content:flex-start;overflow-x:auto;gap:22px;scrollbar-width:none;white-space:nowrap;padding:0 var(--pad);margin:0 calc(var(--pad)*-1)}.hdr .sub::-webkit-scrollbar{display:none}}

/* Full-screen menu */
.menu{position:fixed;inset:0;z-index:90;background:var(--moss);color:var(--paper);display:grid;grid-template-columns:1.3fr 1fr;opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}
.menu.open{opacity:1;pointer-events:auto}
.menu .top{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;height:76px;padding:0 var(--pad)}
.menu nav{padding:120px var(--pad) 48px;display:flex;flex-direction:column;justify-content:center}
.menu nav a{font-family:var(--serif);font-weight:300;font-size:clamp(40px,6.4vw,92px);line-height:1.04;letter-spacing:-.03em;display:flex;align-items:baseline;gap:16px;opacity:.55;transition:opacity .3s,transform .5s var(--ease);transform:translateY(20px)}
.menu.open nav a{transform:none}
.menu nav a:hover{opacity:1}.menu nav a em{font-style:italic}
.menu nav a sup{font:500 13px var(--sans);letter-spacing:.06em;opacity:.7}
.menu nav .small{display:flex;flex-wrap:wrap;gap:24px;margin-top:40px}
.menu nav .small a{font:500 15px var(--sans);opacity:.8;letter-spacing:0;transform:none}
.menu .pic{position:relative;overflow:hidden;background:var(--moss2)}
.menu .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s,transform 1.2s var(--ease);transform:scale(1.06)}
.menu .pic img.on{opacity:1;transform:none}
.menu .pic .meta{position:absolute;left:28px;bottom:24px;right:28px;display:flex;justify-content:space-between;color:var(--paper);z-index:2;font-size:13px}
@media (max-width:820px){.menu{grid-template-columns:1fr}.menu .pic{display:none}.menu .top{height:64px}}

/* ---------- Hero ---------- */
.hero{position:relative;height:100svh;min-height:640px;color:var(--paper);overflow:hidden;background:#2a1d14}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;transform:scale(1.08);animation:heroIn 2.4s var(--ease) forwards}
@keyframes heroIn{to{transform:scale(1)}}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,14,10,.45) 0%,rgba(20,14,10,0) 28%,rgba(20,14,10,.1) 55%,rgba(20,14,10,.78) 100%)}
.hero .in{position:absolute;left:0;right:0;bottom:0;z-index:2;padding-bottom:clamp(28px,5vh,56px)}
.hero .in .wrap{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end}
.hero .k{margin-bottom:22px;opacity:.85}
.hero h1{font-family:var(--serif);font-weight:300;font-size:clamp(46px,8.4vw,148px);line-height:.94;letter-spacing:-.035em;font-variation-settings:"opsz" 144;max-width:12ch}
.hero h1 em{font-style:italic;font-weight:300}
.hero .side{max-width:320px;display:grid;gap:22px;justify-items:start}
.hero .side p{font-size:15px;opacity:.85}
.hero .cap-line{display:flex;justify-content:space-between;border-top:1px solid rgba(249,246,241,.3);margin-top:clamp(24px,4vh,44px);padding-top:16px;font-size:13px;opacity:.85;gap:20px}
.hero .cap-line a{border-bottom:1px solid rgba(249,246,241,.5)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:52px;padding:0 26px;border-radius:999px;font-weight:500;font-size:15px;transition:background .3s,color .3s,transform .3s var(--ease);white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn.ink{background:var(--ink);color:var(--paper)}.btn.ink:hover{background:var(--terra)}
.btn.paper{background:var(--paper);color:var(--ink)}.btn.paper:hover{background:var(--terra);color:var(--paper)}
.btn.line{border:1px solid currentColor}.btn.line:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.sm{height:42px;padding:0 18px;font-size:14px}
.btn[disabled]{opacity:.4;pointer-events:none}
@media (max-width:820px){.hero .in .wrap{grid-template-columns:1fr}.hero .cap-line{flex-direction:column;gap:6px}}

/* ---------- Intro ---------- */
.intro{padding:clamp(80px,12vw,180px) 0 clamp(60px,9vw,140px)}
.intro .wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.intro .k{grid-column:1/4}
.intro p.big{grid-column:4/12;font-family:var(--serif);font-weight:300;font-size:clamp(28px,3.5vw,54px);line-height:1.14;letter-spacing:-.02em;font-variation-settings:"opsz" 96}
.intro p.big em{font-style:italic;color:var(--terra)}
.facts{grid-column:4/13;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:64px;border-top:1px solid var(--line);padding-top:24px}
.facts b{display:block;font:300 clamp(36px,4vw,60px)/1 var(--serif);letter-spacing:-.03em;margin-bottom:10px}
.facts span{font-size:14px;color:var(--ink2)}
@media (max-width:900px){.intro .k,.intro p.big,.facts{grid-column:1/-1}.facts{grid-template-columns:1fr 1fr;margin-top:40px}}

/* ---------- Chapters ---------- */
.chap{padding:clamp(40px,6vw,90px) 0;border-top:1px solid var(--line)}
.chap .lead{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end}
.chap .ph{grid-column:1/8;aspect-ratio:5/4;background:var(--stone);position:relative;overflow:hidden}
.chap .ph img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:6%;transition:transform 1.4s var(--ease)}
.chap:hover .ph img{transform:scale(1.03)}
.chap .ph .no{position:absolute;left:22px;top:18px;font:300 15px var(--serif);font-style:italic;color:var(--ink2)}
.chap .tx{grid-column:9/13;padding-bottom:12px}
.chap.flip .ph{grid-column:6/13;grid-row:1}.chap.flip .tx{grid-column:1/5;grid-row:1}
.chap h2{font-family:var(--serif);font-weight:300;font-size:clamp(52px,7.2vw,124px);line-height:.9;letter-spacing:-.04em;margin:18px 0 26px;font-variation-settings:"opsz" 144}
.chap h2 em{font-style:italic}
.chap .tx p{color:var(--ink2);font-size:17px;max-width:38ch}
.chap .meta{display:flex;gap:28px;margin:28px 0 30px;border-top:1px solid var(--line);padding-top:16px}
.chap .meta b{display:block;font:400 26px var(--serif);letter-spacing:-.02em}
.chap .meta span{font-size:13px;color:var(--mute)}
@media (max-width:900px){.chap .ph,.chap .tx,.chap.flip .ph,.chap.flip .tx{grid-column:1/-1;grid-row:auto}.chap .ph{aspect-ratio:4/3}}

/* Horizontal rail */
.rail{margin-top:clamp(36px,5vw,64px)}
.rail .hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.rail .ctl{display:flex;gap:8px}
.rail .ctl button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:all .3s}
.rail .ctl button:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.track{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(240px,23vw,340px);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:8px;margin:0 calc(var(--pad)*-1);padding-left:var(--pad);padding-right:var(--pad);scroll-padding-left:var(--pad)}
.track::-webkit-scrollbar{display:none}
.track>*{scroll-snap-align:start}

/* Product tile */
.tile{position:relative;display:flex;flex-direction:column}
.tile .im{aspect-ratio:4/5;background:var(--stone);position:relative;overflow:hidden}
.tile .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:10%;transition:opacity .6s,transform 1.1s var(--ease)}
.tile .im img.b{opacity:0}
.tile:hover .im img.a{opacity:0}.tile:hover .im img.b{opacity:1;transform:scale(1.04)}
.tile .im .badge{position:absolute;left:14px;top:14px;font:italic 400 13px var(--serif);background:var(--paper);padding:3px 10px;border-radius:999px}
.tile .addb{position:absolute;right:12px;bottom:12px;height:40px;padding:0 16px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:13px;font-weight:500;display:flex;align-items:center;gap:8px;opacity:0;transform:translateY(8px);transition:all .35s var(--ease);z-index:2}
.tile:hover .addb,.tile .addb:focus-visible{opacity:1;transform:none}
.tile .addb:hover{background:var(--terra)}
.tile .cp{display:grid;grid-template-columns:1fr auto;gap:2px 14px;padding:14px 2px 0}
.tile h3{font:400 20px/1.2 var(--serif);letter-spacing:-.01em}
.tile .sz{font-family:var(--serif);font-style:italic;color:var(--ink2);font-size:16px}
.tile .pr{font:400 18px var(--serif);text-align:right;white-space:nowrap}
.tile .pr s{display:block;font-size:13px;color:var(--mute)}
.tile .sp{grid-column:1/-1;font-size:12.5px;color:var(--mute);margin-top:4px;letter-spacing:.02em}
.tile>a.cv{position:absolute;inset:0;z-index:1}
@media (hover:none){.tile .addb{opacity:1;transform:none;width:40px;padding:0;justify-content:center}.tile .addb span{display:none}}

/* ---------- Guide ---------- */
.guide{background:var(--moss);color:var(--paper);padding:clamp(80px,10vw,150px) 0}
.guide .hd{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-bottom:64px}
.guide .hd .cap{grid-column:1/4;opacity:.7}
.guide h2{grid-column:4/11;font:300 clamp(40px,5vw,80px)/1 var(--serif);letter-spacing:-.035em;font-variation-settings:"opsz" 144}
.guide h2 em{font-style:italic;color:#E5A98D}
.guide .cols{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(249,246,241,.2)}
.guide .cols a{padding:28px 28px 34px 0;border-right:1px solid rgba(249,246,241,.14);display:flex;flex-direction:column;transition:background .3s}
.guide .cols a:not(:first-child){padding-left:28px}
.guide .cols a:last-child{border-right:0}
.guide .cols a:hover{background:rgba(249,246,241,.04)}
.guide .cols b{font:300 64px/1 var(--serif);letter-spacing:-.04em;margin:26px 0 18px}
.guide .cols b em{font-style:italic}
.guide .cols p{opacity:.75;font-size:15px;margin-bottom:22px}
.guide .cols dl{margin-top:auto;font-size:13px;display:grid;gap:6px;opacity:.85}
.guide .cols dl div{display:flex;justify-content:space-between;border-top:1px solid rgba(249,246,241,.14);padding-top:6px}
.guide .cols dt{opacity:.6}
@media (max-width:1000px){.guide .cols{grid-template-columns:1fr 1fr}.guide .cols a{padding:28px 20px 30px!important;border-bottom:1px solid rgba(249,246,241,.14)}.guide .hd .cap,.guide h2{grid-column:1/-1}}
@media (max-width:560px){.guide .cols{grid-template-columns:1fr}.guide .cols a{border-right:0}}

/* ---------- Quote slider ---------- */
.voices{padding:clamp(80px,11vw,170px) 0;text-align:center}
.voices .q{position:relative;min-height:320px}
.voices blockquote{position:absolute;inset:0;opacity:0;transition:opacity .8s var(--ease),transform .8s var(--ease);transform:translateY(12px);display:flex;flex-direction:column;align-items:center;justify-content:center}
.voices blockquote.on{opacity:1;transform:none;position:relative}
.voices blockquote p{font:300 clamp(28px,3.8vw,60px)/1.12 var(--serif);font-style:italic;letter-spacing:-.02em;max-width:22ch;font-variation-settings:"opsz" 144}
.voices blockquote p:before{content:"\201C"}.voices blockquote p:after{content:"\201D"}
.voices cite{font-style:normal;margin-top:32px;font-size:14px;color:var(--ink2)}
.voices cite b{font-weight:600;color:var(--ink)}
.voices .dots{display:flex;gap:10px;justify-content:center;margin-top:44px}
.voices .dots button{width:36px;height:2px;background:var(--line);transition:background .3s}
.voices .dots button[aria-current=true]{background:var(--ink)}

/* ---------- Promise row ---------- */
.promise{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.promise .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.promise div.c{padding:36px 28px 40px 0;border-right:1px solid var(--line)}
.promise div.c+div.c{padding-left:28px}
.promise div.c:last-child{border-right:0}
.promise b{display:block;font:300 44px/1 var(--serif);letter-spacing:-.03em;margin-bottom:14px}
.promise b em{font-style:italic}
.promise p{color:var(--ink2);font-size:14.5px}
@media (max-width:900px){.promise .wrap{grid-template-columns:1fr 1fr}.promise div.c{padding:28px 18px!important}.promise div.c:nth-child(2){border-right:0}.promise div.c:nth-child(-n+2){border-bottom:1px solid var(--line)}}

/* ---------- Visit ---------- */
.visit{display:grid;grid-template-columns:1fr 1fr;min-height:620px}
.visit .ph{position:relative;overflow:hidden;background:var(--stone)}
.visit .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.visit .tx{background:var(--ink);color:var(--paper);padding:clamp(48px,7vw,110px) var(--pad);display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.visit h2{font:300 clamp(40px,5vw,84px)/.98 var(--serif);letter-spacing:-.035em;font-variation-settings:"opsz" 144}
.visit h2 em{font-style:italic;color:#E5A98D}
.visit .grid{display:grid;grid-template-columns:1fr 1fr;gap:28px 24px;font-size:15px}
.visit .grid .cap{opacity:.55;margin-bottom:8px;display:block}
.visit .grid a{border-bottom:1px solid rgba(249,246,241,.35)}
@media (max-width:900px){.visit{grid-template-columns:1fr}.visit .ph{min-height:340px}}
@media (max-width:480px){.visit .grid{grid-template-columns:1fr}}

/* ---------- Footer ---------- */
.ftr{padding:clamp(64px,8vw,110px) 0 28px;background:var(--paper)}
.ftr .top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
.ftr .sign{font:300 clamp(30px,3vw,46px)/1.08 var(--serif);letter-spacing:-.025em;max-width:16ch}
.ftr .sign em{font-style:italic}
.ftr h5{font:600 11px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:16px}
.ftr li{list-style:none;margin:9px 0;font-size:15px}
.ftr .big{font:300 clamp(64px,17vw,300px)/.8 var(--serif);letter-spacing:-.05em;margin:72px 0 28px;white-space:nowrap;font-variation-settings:"opsz" 144;color:var(--ink)}
.ftr .big em{font-style:italic}
.ftr .bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:13px;color:var(--mute);border-top:1px solid var(--line);padding-top:20px}
@media (max-width:900px){.ftr .top{grid-template-columns:1fr 1fr}.ftr .top>div:first-child{grid-column:1/-1}}

/* ---------- Catalogue (shop) ---------- */
.cat-h{padding:clamp(48px,7vw,100px) 0 0}
.cat-h .k{margin-bottom:22px}
.cat-h h1{font:300 clamp(56px,9vw,160px)/.88 var(--serif);letter-spacing:-.045em;font-variation-settings:"opsz" 144}
.cat-h h1 em{font-style:italic}
.cat-h .desc{max-width:52ch;color:var(--ink2);font-size:17px;margin-top:22px}
.tabs{display:flex;gap:clamp(18px,3vw,44px);flex-wrap:wrap;margin-top:clamp(40px,5vw,64px);border-bottom:1px solid var(--line)}
.tabs a{font:300 clamp(24px,2.6vw,38px)/1 var(--serif);letter-spacing:-.02em;color:var(--mute);padding-bottom:18px;position:relative;transition:color .3s}
.tabs a sup{font:500 12px var(--sans);margin-left:4px;vertical-align:top;position:relative;top:4px}
.tabs a:hover{color:var(--ink)}
.tabs a[aria-current=true]{color:var(--ink);font-style:italic}
.tabs a[aria-current=true]:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink)}
@media (max-width:700px){.tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:calc(var(--pad)*-1);margin-right:calc(var(--pad)*-1);padding:0 var(--pad)}.tabs::-webkit-scrollbar{display:none}.tabs a{white-space:nowrap}}
.refine{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:18px 0;position:sticky;top:118px;background:rgba(243,238,230,.95);backdrop-filter:blur(8px);z-index:20;border-bottom:1px solid var(--line)}
.refine .grp{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.refine .lbl{font:600 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-right:4px}
.pill{height:36px;padding:0 15px;border-radius:999px;border:1px solid var(--line);font-size:13.5px;transition:all .25s;background:transparent;white-space:nowrap}
.pill:hover{border-color:var(--ink)}
.pill[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.pill:disabled{opacity:.35;pointer-events:none}
.refine .sp{width:1px;height:22px;background:var(--line);margin:0 8px}
.refine .end{margin-left:auto;display:flex;gap:12px;align-items:center}
.refine select{height:36px;border-radius:999px;border:1px solid var(--line);background:transparent;padding:0 34px 0 15px;font-size:13.5px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231C1A17' fill='none' stroke-width='1.2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.refine .count{font:italic 400 16px var(--serif);color:var(--ink2)}
.refine .mtoggle{display:none}
@media (max-width:820px){.refine{top:106px}.refine .grps{display:none;width:100%;flex-direction:column;align-items:flex-start;gap:14px;padding-top:6px}.refine.open .grps{display:flex}.refine .mtoggle{display:inline-flex}.refine .sp{display:none}.refine .end{margin-left:auto}}
@media (min-width:821px){.refine .grps{display:flex;gap:10px;flex-wrap:wrap;align-items:center}}
.mosaic{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 24px;padding:44px 0 100px}
.mosaic .feat{grid-column:span 2}
.mosaic .feat .im{aspect-ratio:auto;height:100%;min-height:420px}
.mosaic .feat{display:grid;grid-template-columns:1.5fr 1fr;gap:28px;align-items:end}
.mosaic .feat .cp{display:block;padding:0 0 8px}
.mosaic .feat h3{font-size:clamp(28px,2.6vw,40px);line-height:1.05;letter-spacing:-.02em;margin:14px 0 6px}
.mosaic .feat .sz{font-size:20px}
.mosaic .feat .desc{color:var(--ink2);font-size:15px;margin:18px 0;max-width:36ch}
.mosaic .feat .pr{text-align:left;font-size:26px;margin:10px 0 18px}
.mosaic .feat .pr s{display:inline;margin-left:8px}
.mosaic .feat .addb{position:static;opacity:1;transform:none;display:inline-flex}
.empty{text-align:center;padding:100px 0;grid-column:1/-1}
.empty h3{font:300 44px var(--serif);font-style:italic;margin-bottom:12px}
@media (max-width:1000px){.mosaic{grid-template-columns:repeat(2,minmax(0,1fr))}.mosaic .feat{grid-column:1/-1}}
@media (max-width:560px){.mosaic{gap:36px 14px}.mosaic .feat{grid-template-columns:1fr}.mosaic .feat .im{min-height:0;aspect-ratio:4/3}.tile h3{font-size:17px}.tile .sz{font-size:14px}.tile .pr{font-size:16px}.tile .cp{grid-template-columns:1fr}.tile .pr{text-align:left}.tile .pr s{display:inline;margin-left:6px}}

/* ---------- Product ---------- */
.crumb{font-size:13px;color:var(--mute);padding:24px 0;display:flex;gap:10px;flex-wrap:wrap}
.crumb a:hover{color:var(--ink)}
.pdp{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start}
.stack{grid-column:1/8;display:grid;gap:12px}
.stack figure{background:var(--stone);aspect-ratio:1/1;position:relative;overflow:hidden}
.stack figure:first-child{aspect-ratio:5/6}
.stack img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:7%}
.stack figcaption{position:absolute;left:18px;bottom:14px;font:italic 400 14px var(--serif);color:var(--ink2)}
.stack .pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stack .pair figure{aspect-ratio:4/5}
.buy{grid-column:9/13;position:sticky;top:140px;padding-bottom:40px}
.buy .k{display:flex;justify-content:space-between;margin-bottom:22px}
.buy h1{font:300 clamp(36px,3.6vw,58px)/1 var(--serif);letter-spacing:-.03em;font-variation-settings:"opsz" 144}
.buy .sz{font:italic 300 clamp(24px,2vw,30px)/1.2 var(--serif);color:var(--ink2);margin-top:8px}
.buy .sz small{font-size:.6em;font-style:normal;color:var(--mute);margin-left:8px;font-family:var(--sans)}
.buy .lede{color:var(--ink2);margin:20px 0 0;font-size:15.5px}
.buy .prow{display:flex;align-items:baseline;gap:14px;margin:30px 0 4px;flex-wrap:wrap}
.buy .prow .price{font-size:40px;letter-spacing:-.02em;font-weight:300}
.buy .prow s{font:300 20px var(--serif);color:var(--mute)}
.buy .prow .off{font:italic 400 15px var(--serif);color:var(--terra)}
.buy .upi{font-size:14px;color:var(--ink2)}
.buy .upi b{font:400 16px var(--serif);color:var(--ink)}
.specline{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);margin:28px 0 24px}
.specline div{padding:12px 0;border-bottom:1px solid var(--line)}
.specline div:nth-child(odd){padding-right:12px}
.specline dt{font:600 10.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.specline dd{font:400 17px var(--serif);margin-top:2px}
.sizes{margin-bottom:24px}
.sizes .cap{display:block;color:var(--mute);margin-bottom:12px}
.sizes .list{display:flex;flex-wrap:wrap;gap:8px}
.sizes a{border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:13.5px;transition:all .25s}
.sizes a:hover{border-color:var(--ink)}
.sizes a[aria-current=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.sizes a small{opacity:.65;margin-left:6px}
.addrow{display:flex;gap:10px}
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:999px;height:52px;padding:0 6px}
.qty button{width:34px;height:40px;font-size:18px;color:var(--ink2)}
.qty input{width:30px;text-align:center;border:0;background:none;font:400 17px var(--serif);outline:0;-moz-appearance:textfield}
.qty input::-webkit-inner-spin-button,.qty input::-webkit-outer-spin-button{-webkit-appearance:none}
.addrow .btn{flex:1}
.buy .alt{display:block;text-align:center;margin-top:14px;font-size:14px}
.assure{margin-top:28px;display:grid;gap:10px;font-size:14px;color:var(--ink2)}
.assure div{display:flex;gap:12px;align-items:flex-start}
.assure i{width:6px;height:6px;border-radius:50%;background:var(--terra);margin-top:9px;flex:none}
.story{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:clamp(80px,10vw,150px) 0;border-top:1px solid var(--line);margin-top:clamp(60px,8vw,110px)}
.story .k{grid-column:1/4}
.story .body{grid-column:4/10}
.story .body .first{font:300 clamp(24px,2.4vw,36px)/1.25 var(--serif);letter-spacing:-.015em;margin-bottom:28px}
.story .body .first:first-letter{font-size:3.2em;float:left;line-height:.8;margin:6px 10px 0 0;font-style:italic;color:var(--terra)}
.story .body p{color:var(--ink2);font-size:16.5px;margin-bottom:14px}
.story details{border-top:1px solid var(--line)}
.story details:last-child{border-bottom:1px solid var(--line)}
.story summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:20px 0;cursor:pointer;font:400 22px var(--serif)}
.story summary::-webkit-details-marker{display:none}
.story summary:after{content:"+";font:300 26px var(--serif);transition:transform .3s}
.story details[open] summary:after{transform:rotate(45deg)}
.story details .in{padding:0 0 22px;color:var(--ink2)}
.story details li{list-style:none;padding:6px 0 6px 22px;position:relative}
.story details li:before{content:"\2014";position:absolute;left:0;color:var(--mute)}
.colophon{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-top:80px}
.colophon h3{grid-column:1/4;font:300 34px var(--serif);font-style:italic}
.colophon dl{grid-column:4/13;columns:2;column-gap:48px}
.colophon dl div{break-inside:avoid;display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:12px 0;font-size:14.5px}
.colophon dt{color:var(--mute)}.colophon dd{text-align:right}
@media (max-width:960px){
  .stack,.buy{grid-column:1/-1}.buy{position:static}
  .stack{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;margin:0 calc(var(--pad)*-1);padding:0 var(--pad);scrollbar-width:none}
  .stack::-webkit-scrollbar{display:none}
  .stack figure,.stack figure:first-child{flex:0 0 86%;aspect-ratio:1/1;scroll-snap-align:center}
  .stack .pair{display:contents}
  .story .k,.story .body,.colophon h3,.colophon dl{grid-column:1/-1}.colophon dl{columns:1}
}
.more{padding-bottom:110px}
.more h2{font:300 clamp(36px,4vw,60px)/1 var(--serif);letter-spacing:-.03em;margin-bottom:8px}
.more h2 em{font-style:italic}

/* ---------- Letter (quote) ---------- */
.letter-wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:clamp(48px,6vw,90px) 0 120px}
.letter-wrap .side{grid-column:1/4}
.letter-wrap .side h1{font:300 clamp(48px,5vw,84px)/.95 var(--serif);letter-spacing:-.04em;font-variation-settings:"opsz" 144}
.letter-wrap .side h1 em{font-style:italic}
.letter-wrap .side p{color:var(--ink2);margin-top:22px;font-size:15px}
.letter{grid-column:5/13;background:var(--paper);padding:clamp(28px,5vw,72px);box-shadow:0 1px 0 var(--line),0 30px 60px -30px rgba(60,40,20,.25);position:relative}
.letter:before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:repeating-linear-gradient(90deg,var(--terra) 0 24px,transparent 24px 30px);opacity:.8}
.letter .date{display:flex;justify-content:space-between;color:var(--mute);font-size:13px;margin-bottom:40px}
.letter p.l{font:300 clamp(22px,2.2vw,32px)/1.85 var(--serif);letter-spacing:-.01em;color:var(--ink)}
.letter p.l+p.l{margin-top:18px}
.letter input,.letter select{font:italic 400 1em var(--serif);color:var(--terra);background:transparent;border:0;border-bottom:1.5px dashed var(--sand);padding:0 4px;outline:0;min-width:3ch;transition:border-color .2s;border-radius:0;appearance:none;-webkit-appearance:none;line-height:1.2}
.letter select{padding-right:4px;cursor:pointer}
.letter input:focus,.letter select:focus{border-bottom-color:var(--terra);border-bottom-style:solid}
.letter input::placeholder{color:#C3B6A2;font-style:italic}
.letter .err{border-bottom-color:#C0392B!important;border-bottom-style:solid!important}
.letter textarea{width:100%;margin-top:24px;min-height:130px;border:1px solid var(--line);background:var(--cream);padding:16px;font:400 16px/1.6 var(--sans);outline:0;resize:vertical}
.letter textarea:focus{border-color:var(--ink)}
.letter .sig{margin-top:36px;display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap}
.letter .sig .s{font:italic 300 30px var(--serif)}
.letter .ref{display:inline-flex;gap:10px;align-items:center;background:var(--cream);padding:8px 14px;border-radius:999px;font-size:13.5px;margin-bottom:28px}
.letter .msg{color:#A0301E;font-size:14px;margin-top:14px;min-height:20px}
@media (max-width:960px){.letter-wrap .side,.letter{grid-column:1/-1}}

/* ---------- About ---------- */
.ab-hero{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100svh - 118px)}
.ab-hero .tx{padding:clamp(48px,7vw,110px) var(--pad);display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.ab-hero h1{font:300 clamp(52px,7vw,124px)/.92 var(--serif);letter-spacing:-.045em;font-variation-settings:"opsz" 144}
.ab-hero h1 em{font-style:italic}
.ab-hero .ph{position:relative;background:var(--stone);overflow:hidden}
.ab-hero .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ab-hero p{max-width:44ch;color:var(--ink2);font-size:18px}
@media (max-width:900px){.ab-hero{grid-template-columns:1fr}.ab-hero .ph{min-height:420px}}
.essay{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:clamp(80px,10vw,150px) 0}
.essay .k{grid-column:1/4}
.essay .body{grid-column:4/10}
.essay .body p{font:300 clamp(20px,1.8vw,26px)/1.5 var(--serif);margin-bottom:24px;color:var(--ink)}
.essay .body p:first-child:first-letter{font-size:3.6em;float:left;line-height:.78;margin:8px 12px 0 0;font-style:italic;color:var(--terra)}
.pull{grid-column:2/12;font:300 clamp(34px,4.2vw,68px)/1.08 var(--serif);font-style:italic;letter-spacing:-.025em;text-align:center;padding:clamp(40px,6vw,90px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:40px 0}
@media (max-width:900px){.essay .k,.essay .body,.pull{grid-column:1/-1}}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-bottom:clamp(80px,10vw,140px)}
.trio figure .im{aspect-ratio:4/5;background:var(--stone);overflow:hidden}
.trio figure img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:10%}
.trio figcaption{padding-top:16px}
.trio h3{font:400 26px var(--serif);letter-spacing:-.015em;margin-bottom:6px}
.trio p{color:var(--ink2);font-size:15px}
@media (max-width:800px){.trio{grid-template-columns:1fr}}

/* ---------- Contact ---------- */
.ct-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:clamp(40px,5vw,80px) 0 100px}
.ct-grid .cards{grid-column:1/6;display:grid;gap:0;align-content:start}
.ct-grid .cards a,.ct-grid .cards div{padding:24px 0;border-top:1px solid var(--line);display:block}
.ct-grid .cards .cap{color:var(--mute)}
.ct-grid .cards b{display:block;font:300 clamp(24px,2.2vw,34px)/1.15 var(--serif);letter-spacing:-.02em;margin-top:10px;word-break:break-word}
.ct-grid .cards span.s{color:var(--ink2);font-size:14px}
.ct-grid form{grid-column:7/13;background:var(--paper);padding:clamp(24px,4vw,48px)}
.ct-grid form h2{font:300 34px var(--serif);margin-bottom:24px}
.fld{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.fld label{font:600 10.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.fld input,.fld select,.fld textarea{border:0;border-bottom:1px solid var(--sand);background:transparent;padding:10px 0;font-size:16px;outline:0;border-radius:0}
.fld textarea{min-height:120px;resize:vertical}
.fld input:focus,.fld textarea:focus,.fld select:focus{border-color:var(--ink)}
.fld.err input,.fld.err textarea{border-color:#B0301E}
.fld .e{display:none;color:#B0301E;font-size:13px}.fld.err .e{display:block}
.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:900px){.ct-grid .cards,.ct-grid form{grid-column:1/-1}}
@media (max-width:520px){.two{grid-template-columns:1fr}}
.faq{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:clamp(60px,8vw,120px) 0;border-top:1px solid var(--line)}
.faq .k{grid-column:1/4}
.faq h2{font:300 clamp(36px,4vw,60px)/1 var(--serif);letter-spacing:-.03em;margin-top:14px}
.faq h2 em{font-style:italic}
.faq .list{grid-column:5/13}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;gap:20px;padding:22px 0;cursor:pointer;font:400 clamp(19px,1.6vw,24px) var(--serif)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font:300 28px/1 var(--serif);transition:transform .3s}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq details p{color:var(--ink2);padding:0 0 22px;max-width:62ch}
@media (max-width:900px){.faq .k,.faq .list{grid-column:1/-1}}
.page-h{padding:clamp(48px,7vw,100px) 0 0}
.page-h h1{font:300 clamp(56px,8vw,140px)/.9 var(--serif);letter-spacing:-.045em;font-variation-settings:"opsz" 144}
.page-h h1 em{font-style:italic}
.page-h p{max-width:52ch;color:var(--ink2);font-size:17px;margin-top:22px}

/* ---------- Bag / dialog / toast ---------- */
.veil{position:fixed;inset:0;background:rgba(28,26,23,.4);z-index:95;opacity:0;pointer-events:none;transition:opacity .4s}
.veil.on{opacity:1;pointer-events:auto}
.bag{position:fixed;top:10px;right:10px;bottom:10px;width:min(480px,calc(100vw - 20px));background:var(--paper);z-index:96;transform:translateX(110%);transition:transform .55s var(--ease);display:flex;flex-direction:column;box-shadow:0 40px 80px -30px rgba(40,25,10,.4)}
.bag.open{transform:none}
.bag header{display:flex;justify-content:space-between;align-items:center;padding:26px 28px 18px}
.bag header h2{font:300 34px var(--serif);letter-spacing:-.02em}
.bag header h2 em{font-style:italic}
.bag .items{flex:1;overflow:auto;padding:0 28px}
.bi{display:grid;grid-template-columns:84px 1fr auto;gap:16px;padding:18px 0;border-top:1px solid var(--line)}
.bi .im{width:84px;height:104px;background:var(--stone)}
.bi .im img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:8px}
.bi h4{font:400 18px/1.2 var(--serif)}
.bi .s{font:italic 300 15px var(--serif);color:var(--ink2)}
.bi .m{font-size:12.5px;color:var(--mute);margin-top:4px}
.bi .r{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between}
.bi .qty{height:36px}.bi .qty button{width:26px;height:30px;font-size:15px}.bi .qty input{width:22px;font-size:15px}
.bag footer{padding:20px 28px 26px;border-top:1px solid var(--line)}
.bag footer .row{display:flex;justify-content:space-between;font-size:14px;color:var(--ink2);padding:3px 0}
.bag footer .row.t{font:400 24px var(--serif);color:var(--ink);padding:10px 0 16px}
.bag footer .btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.bag footer .note{font-size:12.5px;color:var(--mute);margin-top:12px}
.bag .empty{padding:60px 0}
.dlg{position:fixed;inset:0;z-index:98;display:none;align-items:center;justify-content:center;padding:16px}
.dlg.on{display:flex}
.dlg .bx{position:relative;z-index:2;background:var(--paper);width:min(640px,100%);max-height:90vh;overflow:auto;padding:clamp(24px,4vw,44px)}
.dlg .bg{position:absolute;inset:0;background:rgba(28,26,23,.5)}
.dlg h3{font:300 36px var(--serif);letter-spacing:-.02em;margin-bottom:6px}.dlg h3 em{font-style:italic}
.dlg pre{white-space:pre-wrap;font:300 17px/1.6 var(--serif);background:var(--cream);padding:24px;margin:20px 0}
.dlg .act{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.dlg .x{position:absolute;right:16px;top:16px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,24px);opacity:0;background:var(--ink);color:var(--paper);padding:14px 22px;border-radius:999px;font-size:14px;z-index:99;transition:all .45s var(--ease);pointer-events:none;white-space:nowrap;max-width:calc(100vw - 32px);overflow:hidden;text-overflow:ellipsis}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast em{font-family:var(--serif)}
.rv{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}
.menu .pic{background:var(--stone)}
.menu .pic img{object-fit:contain;mix-blend-mode:multiply;padding:12%}
.menu .pic img.cv{object-fit:cover;mix-blend-mode:normal;padding:0}
.menu .pic .meta{color:var(--ink)}
.hdr .word{font-size:32px;font-weight:400;letter-spacing:-.02em;gap:0}
@media (max-width:820px){.hdr .word{font-size:25px}}
.chap .ph.cover img,.trio .im.cover img{object-fit:cover;mix-blend-mode:normal;padding:0}
.chap .ph.cover .no{color:var(--ink)}
.voices .q{min-height:230px}
.hdr .wrap.subw{display:block;height:auto}
body[data-page=shop] .hdr .sub{display:none}
.refine{top:76px}
@media (max-width:820px){.refine{top:64px}}
.buy{top:150px}
.mosaic .feat .addb{width:auto!important;padding:0 20px!important;opacity:1!important;transform:none!important}
.hero h1,.hero .side p,.hero .k{text-shadow:0 1px 30px rgba(20,12,6,.35)}
@media (max-width:820px){.hero:after{background:linear-gradient(180deg,rgba(20,14,10,.5) 0%,rgba(20,14,10,.05) 22%,rgba(20,14,10,.55) 50%,rgba(20,14,10,.9) 100%)}}