/* ============================================================
   ZEN ATELIER — V2 · 2026 design system
   Type-led editorial · bone / ink / clay · hairlines & mono labels
   ============================================================ */

:root{
  --bone:#F1EDE5;
  --bone-2:#EAE5DA;
  --paper:#FAF8F3;
  --ink:#191613;
  --ink-2:#241F1A;
  --text:#37322B;
  --muted:#6F6657;        /* AA-compliant on bone (~4.6:1) */
  --muted-dark:#9A9081;   /* muted for use on the ink/dark background */
  --line:#D9D2C4;
  --line-ink:#37322B;
  --clay:#A05B36;
  --clay-soft:#C08A66;
  --maxw:1440px;
  --gut:clamp(20px, 4vw, 56px);
  --serif:"Instrument Serif", Georgia, serif;
  --sans:"Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono:"Spline Sans Mono", "SF Mono", Menlo, monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{
  background:var(--bone);
  color:var(--text);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}
::selection{background:var(--ink);color:var(--bone)}

/* film grain */
body::after{
  content:"";position:fixed;inset:-50%;z-index:2000;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* cross-page view transitions (progressive enhancement) */
@view-transition{navigation:auto}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--ink);line-height:1.02;letter-spacing:-.01em}
em,i{font-family:var(--serif);font-style:italic}
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:400}
.label{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.label .tick{color:var(--clay)}
.display{font-size:clamp(3.2rem,8.5vw,8rem)}
.muted{color:var(--muted)}

/* underline arrow link */
.lnk{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.55em;color:var(--ink);position:relative;padding-bottom:4px}
.lnk::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;
  transform:scaleX(1);transform-origin:left;transition:transform .45s var(--ease)}
.lnk:hover::after{transform:scaleX(0);transform-origin:right}
.lnk .arr{transition:transform .35s var(--ease)}
.lnk:hover .arr{transform:translateX(4px)}

/* pill buttons */
.pill{display:inline-flex;align-items:center;gap:.6em;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;padding:.95em 1.9em;border:1px solid var(--ink);
  border-radius:999px;color:var(--ink);transition:background .35s var(--ease),color .35s var(--ease);cursor:pointer}
.pill:hover{background:var(--ink);color:var(--bone)}
.pill.solid{background:var(--ink);color:var(--bone)}
.pill.solid:hover{background:var(--clay);border-color:var(--clay);color:#fff}
.pill.light{border-color:var(--bone);color:var(--bone)}
.pill.light:hover{background:var(--bone);color:var(--ink)}
.pill.light.solid{background:var(--bone);color:var(--ink)}
.pill.light.solid:hover{background:var(--clay);border-color:var(--clay);color:#fff}

/* ---------- header ---------- */
.hdr{position:fixed;inset:0 0 auto 0;z-index:100;transition:background .4s,border-color .4s;
  border-bottom:1px solid transparent}
.hdr.scrolled{background:rgba(241,237,229,.88);backdrop-filter:blur(14px);border-color:var(--line)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{font-family:var(--serif);font-size:1.3rem;letter-spacing:.02em;color:var(--ink);display:flex;align-items:baseline;gap:.45em}
.brand i{color:var(--clay)}
.brand .est{font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;color:var(--muted);text-transform:uppercase}
.hdr nav{display:flex;align-items:center;gap:clamp(18px,3vw,40px)}
.hdr nav a:not(.pill){font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text);position:relative;padding:4px 0}
.hdr nav a:not(.pill)::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--clay);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.hdr nav a:not(.pill):hover::after,.hdr nav a:not(.pill).active::after{transform:scaleX(1);transform-origin:left}
.hdr nav .pill{padding:.7em 1.5em}
.menu-btn{display:none;font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase}

/* full-screen mobile menu */
.menu{position:fixed;inset:0;z-index:200;background:var(--ink);color:var(--bone);
  display:flex;flex-direction:column;justify-content:center;padding:0 var(--gut);overflow:hidden;
  clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease);visibility:hidden}
.menu.open{clip-path:inset(0 0 0 0);visibility:visible}
.menu a{font-family:var(--serif);font-size:clamp(1.9rem,8vw,4.5rem);color:var(--bone);line-height:1.18;
  display:flex;align-items:baseline;gap:.5em;border-bottom:1px solid var(--line-ink);padding:.18em 0}
.menu a .n{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--clay-soft)}
.menu .menu-x{position:absolute;top:24px;right:var(--gut);font-family:var(--mono);
  font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--bone)}
.menu .menu-meta{position:absolute;bottom:28px;left:var(--gut);color:var(--muted-dark)}

/* ---------- hero ---------- */
.hero{padding:calc(72px + clamp(48px,9vh,110px)) 0 0}
.hero .meta-row{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:clamp(28px,5vh,56px)}
.status{display:inline-flex;align-items:center;gap:.6em}
.status .dot{width:7px;height:7px;border-radius:50%;background:var(--clay);
  animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.hero h1{font-size:clamp(2.4rem,6.2vw,6rem);letter-spacing:-.015em;line-height:1.02}
.hero h1 em{color:var(--clay)}
.hero .hero-foot{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:end;
  margin:clamp(30px,5vh,60px) 0 clamp(36px,6vh,72px)}
.hero .hero-foot p{max-width:46ch;font-size:1.02rem;color:var(--text)}
.hero .cta-row{display:flex;gap:14px;justify-content:flex-end;flex-wrap:wrap}

/* hero image band */
.hero-img{position:relative;overflow:hidden;aspect-ratio:21/9;min-height:320px}
.hero-img img{width:100%;height:115%;object-fit:cover}
@supports (animation-timeline: view()){
  .hero-img img{animation:hero-drift linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  @keyframes hero-drift{from{transform:translateY(-6%)}to{transform:translateY(6%)}}
}
.hero-img .img-cap{position:absolute;left:18px;bottom:14px;color:rgba(250,248,243,.92);
  font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase}

/* ---------- ticker ---------- */
.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;
  padding:14px 0;white-space:nowrap}
.ticker .track{display:inline-flex;gap:0;animation:tick 38s linear infinite}
.ticker span{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);padding:0 1.6em}
.ticker b{color:var(--clay);font-weight:400;padding:0}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- section head ---------- */
section{padding:clamp(72px,11vh,130px) 0}
.shead{display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:clamp(32px,5vh,56px)}
.shead h2{font-size:clamp(2rem,4.4vw,3.6rem)}
.shead .num{color:var(--clay)}
.dark .shead{border-color:var(--line-ink)}

/* ---------- collections index list ---------- */
.index{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:3.4rem minmax(0,1fr) 9rem 14rem 7rem 2.6rem;
  align-items:center;gap:18px;padding:22px 10px;border-bottom:1px solid var(--line);
  position:relative;transition:background .4s var(--ease),color .4s var(--ease),padding .4s var(--ease)}
.row .r-idx{color:var(--muted)}
.row .r-name{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.4rem);color:var(--ink);
  line-height:1;transition:transform .4s var(--ease),color .4s var(--ease)}
.row .r-origin,.row .r-uses,.row .r-count{color:var(--muted);transition:color .4s var(--ease)}
.row .r-arr{justify-self:end;opacity:0;transform:translateX(-8px);transition:.4s var(--ease);font-size:1.1rem}
.row .r-thumb{display:none}
.row:hover{background:var(--ink)}
.row:hover .r-name{color:var(--bone);transform:translateX(10px);font-style:italic}
.row:hover .r-idx,.row:hover .r-origin,.row:hover .r-uses,.row:hover .r-count{color:var(--clay-soft)}
.row:hover .r-arr{opacity:1;transform:none;color:var(--bone)}
.index-foot{display:flex;justify-content:space-between;align-items:center;padding-top:28px;flex-wrap:wrap;gap:16px}

/* cursor-following preview */
.follow{position:fixed;top:0;left:0;z-index:90;width:min(330px,24vw);aspect-ratio:4/3;
  pointer-events:none;overflow:hidden;opacity:0;transform-origin:center;
  transition:opacity .3s var(--ease);box-shadow:0 24px 60px rgba(25,22,19,.35)}
.follow img{width:100%;height:100%;object-fit:cover}
.follow.on{opacity:1}
@media(pointer:coarse){.follow{display:none}}

/* ---------- editorial split (about) ---------- */
.edit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,90px);align-items:start}
.edit .sticky{position:sticky;top:96px}
.edit figure{overflow:hidden}
.edit figure img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1.2s var(--ease)}
.edit figure:hover img{transform:scale(1.04)}
.edit figcaption{padding-top:10px}
.edit h2{font-size:clamp(2.1rem,3.8vw,3.3rem);margin:18px 0 26px;line-height:1.08}
.edit h2 em{color:var(--clay)}
.edit p{margin-bottom:1.2em;max-width:54ch}
.edit p.big{font-size:1.18rem;line-height:1.55;color:var(--ink)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);
  border-left:1px solid var(--line);margin-top:clamp(48px,8vh,90px)}
.stat{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:28px 22px 24px}
.stat .v{font-family:var(--serif);font-size:clamp(2.4rem,4.5vw,4rem);color:var(--ink);line-height:1}
.stat .v sup{font-size:.45em;color:var(--clay)}
.stat .k{margin-top:10px}

/* ---------- spaces ---------- */
.spaces{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.space{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:34px 28px 40px;
  display:flex;flex-direction:column;gap:14px;min-height:300px;position:relative;overflow:hidden;
  transition:background .5s var(--ease)}
.space .s-num{color:var(--clay)}
.space h3{font-size:clamp(1.7rem,2.6vw,2.4rem);transition:transform .5s var(--ease)}
.space p{color:var(--muted);max-width:34ch;transition:color .5s var(--ease)}
.space:hover{background:var(--ink)}
.space:hover h3{color:var(--bone);transform:translateX(6px)}
.space:hover p{color:#A89E8F}
.space:hover .s-tag{color:var(--clay-soft)}
.space .s-tag{margin-top:auto;color:var(--muted);transition:color .5s var(--ease)}

/* ---------- dark CTA ---------- */
.dark{background:var(--ink);color:#B5AC9D}
.dark h2,.dark h3{color:var(--bone)}
.dark .label{color:#8A8172}
.cta-band{text-align:left}
.cta-band h2{font-size:clamp(2.8rem,7vw,6.4rem);line-height:1.02;margin:20px 0 30px;max-width:14ch}
.cta-band h2 em{color:var(--clay-soft)}
.cta-band .pill-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}
.cta-band p{max-width:52ch}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;
  gap:28px;padding:26px 4px;font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,1.95rem);
  color:var(--ink);line-height:1.16;transition:color .3s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--clay)}
.faq summary:focus-visible{outline:2px solid var(--clay);outline-offset:4px}
.faq .q-mark{font-family:var(--mono);font-size:1.5rem;line-height:1;color:var(--clay);flex:none;
  transform-origin:center;transition:transform .35s var(--ease)}
.faq details[open] .q-mark{transform:rotate(45deg)}
.faq .ans{padding:0 4px 30px;max-width:64ch}
.faq .ans p{color:var(--text);margin:0}
.faq .ans a{color:var(--clay);text-decoration:underline;text-underline-offset:3px}
.areas{font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;color:var(--muted)}
.areas a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--clay)}
.areas a:hover{color:var(--clay)}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:#8A8172;border-top:1px solid var(--line-ink);overflow:hidden}
.foot .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding:64px 0 56px}
.foot .f-brand{font-family:var(--serif);font-size:1.5rem;color:var(--bone)}
.foot .f-tag{font-family:var(--serif);font-style:italic;color:var(--clay-soft);margin-top:6px}
.foot h4{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:#6E6557;margin-bottom:16px;font-weight:400}
.foot ul{list-style:none}
.foot li{margin-bottom:9px}
.foot a{color:#B5AC9D;transition:color .3s}
.foot a:hover{color:var(--bone)}
.foot .legal{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  border-top:1px solid var(--line-ink);padding:20px 0;color:#6E6557}
.foot .giant{font-family:var(--serif);font-size:clamp(3.4rem,12.6vw,13.5rem);line-height:.78;
  color:var(--bone);text-align:center;letter-spacing:.01em;white-space:nowrap;
  transform:translateY(.16em);opacity:.96;user-select:none}

/* ---------- whatsapp pill ---------- */
.wa{position:fixed;right:18px;bottom:18px;z-index:150;display:inline-flex;align-items:center;gap:.6em;
  background:var(--ink);color:var(--bone);font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;padding:.9em 1.5em;border-radius:999px;border:1px solid var(--line-ink);
  box-shadow:0 10px 30px rgba(25,22,19,.25);transition:background .35s,transform .35s var(--ease)}
.wa:hover{background:var(--clay);transform:translateY(-2px)}
.wa svg{width:15px;height:15px;fill:currentColor}

/* ============================================================
   COLLECTIONS PAGE
   ============================================================ */
.page-hero{padding:calc(72px + clamp(40px,8vh,90px)) 0 0}
.page-hero h1{font-size:clamp(3rem,8.5vw,7.5rem);letter-spacing:-.015em;line-height:.98}
.page-hero h1 em{color:var(--clay)}
.page-hero .ph-meta{border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:clamp(26px,4vh,44px);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px}
.page-hero .ph-sub{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:end;
  margin-top:clamp(22px,4vh,44px)}
.page-hero .ph-sub p{max-width:50ch}

/* filters */
.fbar{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:18px 0;margin:clamp(30px,5vh,52px) 0 clamp(34px,5vh,52px)}
.fgroup{display:flex;align-items:baseline;gap:6px 22px;flex-wrap:wrap}
.fgroup .fk{min-width:5.4rem;color:var(--muted)}
.fbtn{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);position:relative;padding:2px 0;transition:color .3s}
.fbtn sup{color:var(--clay);font-size:.85em;margin-left:2px}
.fbtn::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.fbtn:hover{color:var(--ink)}
.fbtn.active{color:var(--ink)}
.fbtn.active::after{transform:scaleX(1);transform-origin:left}
.fcount{color:var(--muted)}

/* cards grid */
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px) clamp(16px,2vw,28px)}
.ccard{display:block}
.ccard figure{overflow:hidden;position:relative;aspect-ratio:4/3;background:var(--bone-2)}
.ccard figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.ccard:hover figure img{transform:scale(1.05)}
.ccard .view{position:absolute;right:12px;bottom:12px;background:var(--bone);color:var(--ink);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.6em 1.1em;border-radius:999px;opacity:0;transform:translateY(6px);transition:.4s var(--ease)}
.ccard:hover .view{opacity:1;transform:none}
.ccard .cinfo{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:14px 2px 0;border-top:0}
.ccard .cinfo h3{font-size:clamp(1.4rem,2vw,1.8rem);transition:color .3s}
.ccard:hover .cinfo h3{color:var(--clay);font-style:italic}
.ccard .cinfo .cm{color:var(--muted);text-align:right;white-space:nowrap}

/* ============================================================
   COLLECTION DETAIL
   ============================================================ */
.coll-top{padding:calc(72px + clamp(36px,7vh,80px)) 0 clamp(48px,8vh,90px)}
.coll-split{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(32px,5vw,80px);align-items:start}
.coll-info{position:sticky;top:96px}
.crumb{display:flex;gap:.8em;align-items:center;color:var(--muted);margin-bottom:26px}
.crumb a:hover{color:var(--clay)}
.coll-info h1{font-size:clamp(3rem,6.5vw,6rem);line-height:.98;letter-spacing:-.015em;margin:8px 0 22px}
.coll-info .desc{font-size:1.12rem;line-height:1.6;color:var(--text);max-width:46ch;margin-bottom:30px}
.spec{border-top:1px solid var(--line);margin-bottom:34px}
.spec .srow{display:flex;justify-content:space-between;gap:20px;padding:13px 2px;border-bottom:1px solid var(--line)}
.spec .sk{color:var(--muted)}
.spec .sv{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);text-align:right}
.coll-cover{overflow:hidden}
.coll-cover img{width:100%;aspect-ratio:4/5;object-fit:cover}
.coll-actions{display:flex;gap:12px;flex-wrap:wrap}

/* swatch gallery */
.swatches{padding-top:0}
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sw{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--bone-2);cursor:zoom-in}
.sw img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.sw:hover img{transform:scale(1.05)}
.sw .si{position:absolute;left:10px;bottom:8px;color:#fff;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.12em;text-shadow:0 1px 8px rgba(0,0,0,.5);opacity:0;transition:opacity .3s}
.sw:hover .si{opacity:1}

/* prev / next pager */
.pager{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pager a{padding:34px var(--gut);display:flex;flex-direction:column;gap:8px;transition:background .4s var(--ease)}
.pager a:first-child{border-right:1px solid var(--line)}
.pager a .p-name{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.6rem);color:var(--ink);transition:color .3s}
.pager a:hover{background:var(--ink)}
.pager a:hover .p-name{color:var(--bone);font-style:italic}
.pager a:hover .label{color:var(--clay-soft)}
.pager a:last-child{text-align:right;align-items:flex-end}

/* lightbox */
.lb{position:fixed;inset:0;z-index:300;background:rgba(20,17,14,.96);display:none;
  align-items:center;justify-content:center;flex-direction:column}
.lb.open{display:flex}
.lb img{max-width:90vw;max-height:80vh;object-fit:contain}
.lb .lb-bar{display:flex;gap:26px;align-items:center;margin-top:18px;color:#B5AC9D;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.lb .lb-bar button{color:#B5AC9D;transition:color .25s;letter-spacing:.14em;text-transform:uppercase;font-family:var(--mono);font-size:.72rem}
.lb .lb-bar button:hover{color:var(--bone)}
.lb .lb-x{position:absolute;top:22px;right:var(--gut);color:#B5AC9D;font-family:var(--mono);
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase}
.lb .lb-x:hover{color:var(--bone)}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(36px,6vw,100px);align-items:start}
.contact-side{position:sticky;top:96px}
.cdl{border-top:1px solid var(--line);margin:30px 0}
.cdl .crow{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:14px 2px;border-bottom:1px solid var(--line)}
.cdl .ck{color:var(--muted)}
.cdl .cv{font-family:var(--serif);font-size:1.25rem;color:var(--ink);text-align:right}
.cdl .cv a:hover{color:var(--clay)}
.note{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;line-height:1.8;color:var(--muted);
  border-left:1px solid var(--clay);padding-left:16px;max-width:44ch}

/* form */
.f-field{position:relative;margin-bottom:8px}
.f-field label{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);padding-top:18px}
.f-field input,.f-field select,.f-field textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
  font-family:var(--serif);font-size:1.3rem;color:var(--ink);padding:8px 0 12px;border-radius:0;
  transition:border-color .3s;appearance:none;-webkit-appearance:none}
.f-field select{cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23877E70' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 4px center}
.f-field input::placeholder,.f-field textarea::placeholder{color:#736A5A;font-style:italic}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{outline:none;border-color:var(--clay)}
.f-field textarea{min-height:110px;resize:vertical;line-height:1.5}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:0 36px}
.f-submit{margin-top:36px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.f-ok{display:none;margin-top:18px;padding:16px 20px;border:1px solid var(--clay);background:rgba(160,91,54,.06);
  color:var(--clay);font-family:var(--mono);font-size:.74rem;line-height:1.7;letter-spacing:.06em}
.f-err{display:none;margin-top:18px;padding:16px 20px;border:1px solid #b3261e;background:rgba(179,38,30,.05);
  color:#b3261e;font-family:var(--mono);font-size:.74rem;line-height:1.7;letter-spacing:.06em}
.f-err a{text-decoration:underline}

/* ---------- reveal on scroll ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .row{grid-template-columns:3rem minmax(0,1fr) 9rem 7rem 2.4rem}
  .row .r-uses{display:none}
}
@media(max-width:900px){
  .hdr nav{display:none}
  .menu-btn{display:block}
  .hero .hero-foot{grid-template-columns:1fr;gap:24px}
  .hero .cta-row{justify-content:flex-start}
  .edit{grid-template-columns:1fr}
  .edit .sticky{position:static}
  .stats{grid-template-columns:repeat(2,1fr)}
  .spaces{grid-template-columns:1fr}
  .space{min-height:0}
  .cgrid{grid-template-columns:repeat(2,1fr)}
  .sgrid{grid-template-columns:repeat(2,1fr)}
  .coll-split{grid-template-columns:1fr}
  .coll-info{position:static}
  .contact-grid{grid-template-columns:1fr}
  .contact-side{position:static}
  .foot .cols{grid-template-columns:1fr 1fr}
  .page-hero .ph-sub{grid-template-columns:1fr}
  .row{grid-template-columns:auto 64px minmax(0,1fr) auto;gap:14px;padding:16px 6px}
  .row .r-origin,.row .r-count{display:none}
  .row .r-thumb{display:block;width:64px;height:48px;overflow:hidden}
  .row .r-thumb img{width:100%;height:100%;object-fit:cover}
  .row .r-arr{opacity:1;transform:none;color:var(--muted)}
  .hero-img{aspect-ratio:16/10}
}
@media(max-width:560px){
  .cgrid{grid-template-columns:1fr}
  .f-row{grid-template-columns:1fr}
  .pager{grid-template-columns:1fr}
  .pager a:first-child{border-right:0;border-bottom:1px solid var(--line)}
  .pager a:last-child{text-align:left;align-items:flex-start}
  .stats{grid-template-columns:1fr 1fr}
  .wa span{display:none}
  .wa{padding:.9em}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ticker .track{animation:none}
  .status .dot{animation:none}
  .rv{opacity:1;transform:none;transition:none}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}