/* =============================================================
   Muchhroom Atelier — Coming Soon
   Premium editorial styling. Warm neutral, earthy, minimalist.
   ============================================================= */

/* ---------- Design tokens ---------- */
:root {
  --paper:      #efe8d8;   /* warm cream ground */
  --paper-2:    #e7dfcd;
  --paper-deep: #ddd2ba;
  --ink:        #3a2f20;   /* deep warm brown */
  --ink-2:      #5b4c37;
  --ink-soft:   #857256;
  --clay:       #a9714b;   /* terracotta accent */
  --clay-soft:  #c69574;
  --line:       rgba(58, 47, 32, 0.16);
  --line-2:     rgba(58, 47, 32, 0.28);
  --white:      #fbf8f1;

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1280px;
  --gut: clamp(1.4rem, 5vw, 5rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --slow: 1.1s;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-weight: 300;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.7;
  letter-spacing: 0.01em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; }

/* ---------- Paper grain overlay ---------- */
.grain {
  position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  opacity: 0.5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
}

/* ---------- Typographic helpers ---------- */
.eyebrow {
  font-size: 0.72rem; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 400;
}
.serif { font-family: var(--serif); }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

/* ============================================================
   Wordmark (muchhr[mark]m)
   ============================================================ */
.wordmark {
  display: inline-flex; align-items: center; gap: 0.02em;
  font-family: var(--sans); font-weight: 300;
  letter-spacing: 0.34em; color: var(--ink);
  line-height: 1; text-transform: lowercase; white-space: nowrap;
  padding-left: 0.34em; /* balance the tracking on the left */
}
.wordmark .mark {
  width: 1.15em; height: 1.15em; margin: 0 0.05em;
  transform: translateY(0.12em);
}
/* reusable mark sizing (mark is a near-square image) */
.cc-mark svg { width: 100%; height: auto; aspect-ratio: 1 / 1; display: block; opacity: 0.16; transform-origin: 50% 86%; transition: opacity 0.6s var(--ease); }
.coll-card:hover .cc-mark svg { opacity: 0.32; animation: ccRock 1s ease-in-out infinite; }
@keyframes ccRock {
  0%   { transform: rotate(-7deg); }
  50%  { transform: rotate(7deg); }
  100% { transform: rotate(-7deg); }
}
@media (prefers-reduced-motion: reduce) {
  .coll-card:hover .cc-mark svg { animation: none; }
}
.page-hero svg.float-mark {
  height: auto; aspect-ratio: 1 / 1; opacity: 0.42;
  transform-origin: 50% 86%;
  animation: fmIn 1.3s var(--ease) 0.3s both, fmSway 9s ease-in-out 1.6s infinite;
}
@keyframes fmIn {
  from { opacity: 0; transform: translateY(22px) scale(0.94) rotate(-7deg); }
  to   { opacity: 0.42; transform: translateY(0) scale(1) rotate(-5deg); }
}
@keyframes fmSway {
  0%   { transform: rotate(-5deg) translateY(0) scale(1); }
  50%  { transform: rotate(5deg) translateY(-12px) scale(1.03); }
  100% { transform: rotate(-5deg) translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .page-hero svg.float-mark { opacity: 0.42; transform: none; animation: none; }
}
.cs-mark { height: auto; aspect-ratio: 1 / 1; }

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.5rem var(--gut);
  transition: background var(--slow) var(--ease), padding 0.5s var(--ease),
              box-shadow 0.6s var(--ease);
}
.site-header.scrolled {
  background: rgba(239, 232, 216, 0.82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding-top: 1rem; padding-bottom: 1rem;
  box-shadow: 0 1px 0 var(--line);
}
.site-header .wordmark { font-size: 1.28rem; }

.nav { display: flex; align-items: center; gap: clamp(1.4rem, 3vw, 3rem); }
.nav a {
  position: relative; font-size: 0.74rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-2); font-weight: 400;
  padding: 0.4rem 0;
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--clay); transition: width 0.5s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { width: 100%; }
.nav a[aria-current="page"] { color: var(--ink); }

/* burger */
.burger { display: none; width: 30px; height: 18px; position: relative; z-index: 120; }
.burger span {
  position: absolute; left: 0; height: 1.5px; width: 100%; background: var(--ink);
  transition: transform 0.45s var(--ease), opacity 0.3s var(--ease);
}
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.burger span:nth-child(3) { bottom: 0; }
body.menu-open .burger span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); }

/* mobile menu */
.mobile-nav {
  position: fixed; inset: 0; z-index: 110; background: var(--paper-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.6rem; opacity: 0; visibility: hidden; transition: opacity 0.5s var(--ease), visibility 0.5s;
}
body.menu-open .mobile-nav { opacity: 1; visibility: visible; }
.mobile-close {
  position: absolute; top: 1rem; right: var(--gut);
  width: 46px; height: 46px; display: grid; place-items: center;
  font-size: 2.2rem; line-height: 1; color: var(--ink);
  border: 1px solid var(--line); border-radius: 50%;
  opacity: 0; transform: translateY(-8px) rotate(-30deg);
  transition: opacity 0.45s var(--ease) 0.15s, transform 0.45s var(--ease) 0.15s,
              color 0.3s, border-color 0.3s;
}
body.menu-open .mobile-close { opacity: 1; transform: none; }
.mobile-close:hover, .mobile-close:focus-visible { color: var(--clay); border-color: var(--clay); }
.mobile-nav a {
  font-family: var(--serif); font-size: clamp(2rem, 9vw, 3.4rem);
  color: var(--ink); font-weight: 500; letter-spacing: 0.01em;
  opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
body.menu-open .mobile-nav a { opacity: 1; transform: none; }
body.menu-open .mobile-nav a:nth-child(1) { transition-delay: 0.12s; }
body.menu-open .mobile-nav a:nth-child(2) { transition-delay: 0.19s; }
body.menu-open .mobile-nav a:nth-child(3) { transition-delay: 0.26s; }
body.menu-open .mobile-nav a:nth-child(4) { transition-delay: 0.33s; }

/* ============================================================
   Hero (coming soon)
   ============================================================ */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  overflow: hidden;
}
.hero__stage { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* drifting fabric silhouettes */
.fabric {
  position: absolute; will-change: transform;
  transform: translate(var(--px, 0), var(--py, 0));
}
.fabric .drift { animation: float 22s ease-in-out infinite; transform-origin: center; }
.fabric svg { width: 100%; height: 100%; overflow: visible; display: block; }
.fabric path { fill: var(--clay); opacity: 0.10; }
.fabric--2 path { fill: var(--ink); opacity: 0.055; }
.fabric--3 path { fill: var(--clay-soft); opacity: 0.14; }

.fabric--1 { top: 8%;  left: -6%;  width: clamp(220px, 30vw, 460px); }
.fabric--2 { bottom: -4%; right: -5%; width: clamp(260px, 36vw, 560px); }
.fabric--3 { top: 12%; right: 8%;  width: clamp(150px, 18vw, 300px); }
.fabric--1 .drift { animation-duration: 24s; }
.fabric--2 .drift { animation-duration: 30s; animation-direction: reverse; }
.fabric--3 .drift { animation-duration: 19s; }

@keyframes float {
  0%   { transform: translateY(0) rotate(0deg); }
  33%  { transform: translateY(-26px) rotate(2.2deg); }
  66%  { transform: translateY(14px) rotate(-1.8deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* light sweep */
.light-sweep {
  position: absolute; inset: -30% -10%; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255,251,240,0.55) 50%, transparent 62%);
  transform: translateX(-60%); mix-blend-mode: soft-light;
  animation: sweep 9s var(--ease) infinite; animation-delay: 3s;
}
@keyframes sweep {
  0%   { transform: translateX(-70%); opacity: 0; }
  12%  { opacity: 1; }
  40%  { opacity: 1; }
  55%, 100% { transform: translateX(70%); opacity: 0; }
}

.hero__inner {
  position: relative; z-index: 3; width: 100%; text-align: center;
  padding-block: 7rem 8.5rem;
}
.hero .status {
  display: inline-flex; align-items: center; gap: 0.7rem; margin-bottom: 2.4rem;
}
.hero .status .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--clay);
  box-shadow: 0 0 0 0 rgba(169,113,75,0.6); animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(169,113,75,0.5); }
  70%  { box-shadow: 0 0 0 12px rgba(169,113,75,0); }
  100% { box-shadow: 0 0 0 0 rgba(169,113,75,0); }
}

.hero__logo { display: flex; justify-content: center; margin-bottom: 1.6rem; }
.hero__logo .wordmark { font-size: clamp(2.1rem, 8.5vw, 6.2rem); letter-spacing: 0.22em; }

.hero__tagline {
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: clamp(1.35rem, 3.6vw, 2.6rem); color: var(--ink-2);
  line-height: 1.35; max-width: 22ch; margin: 0.6rem auto 0;
}
.hero__sub {
  margin: 2.4rem auto 0; max-width: 44ch; color: var(--ink-soft);
  font-size: clamp(0.9rem, 1.4vw, 1.02rem);
}

/* countdown */
.countdown {
  display: flex; justify-content: center; gap: clamp(1.2rem, 4vw, 3.4rem);
  margin-top: 3.2rem;
}
.countdown .unit { text-align: center; min-width: 3.4rem; }
.countdown .num {
  font-family: var(--serif); font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 400;
  color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums;
}
.countdown .lab {
  display: block; margin-top: 0.6rem; font-size: 0.62rem; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--ink-soft);
}

/* notify form */
.notify {
  margin: 3.4rem auto 0; max-width: 480px;
  display: flex; gap: 0; border-bottom: 1px solid var(--line-2);
  transition: border-color 0.4s var(--ease);
}
.notify:focus-within { border-color: var(--clay); }
.notify input {
  flex: 1; background: none; border: none; outline: none;
  font-family: var(--sans); font-weight: 300; font-size: 0.98rem; color: var(--ink);
  padding: 0.9rem 0.4rem; letter-spacing: 0.03em;
}
.notify input::placeholder { color: var(--ink-soft); }
.notify button {
  font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink); padding: 0 0.4rem; white-space: nowrap; transition: color 0.3s;
}
.notify button:hover { color: var(--clay); }
.notify__note { margin-top: 0.9rem; font-size: 0.72rem; color: var(--ink-soft); min-height: 1.1em; }

.scroll-cue {
  position: absolute; left: 50%; bottom: 1.2rem; transform: translateX(-50%);
  z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  font-size: 0.58rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-soft);
}
.scroll-cue .bar {
  width: 1px; height: 34px; background: linear-gradient(var(--ink-soft), transparent);
  position: relative; overflow: hidden;
}
/* on short viewports the hero content is tall — hide the cue to avoid crowding */
@media (max-height: 780px) { .scroll-cue { display: none; } }
.scroll-cue .bar::after {
  content: ""; position: absolute; top: -50%; left: 0; width: 100%; height: 50%;
  background: var(--clay); animation: drop 2.2s var(--ease) infinite;
}
@keyframes drop { 0% { top: -50%; } 100% { top: 100%; } }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-size: 0.74rem; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 400;
  padding: 1.05rem 2.2rem; border: 1px solid var(--ink); color: var(--ink);
  position: relative; overflow: hidden; transition: color 0.5s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; background: var(--ink);
  transform: translateY(101%); transition: transform 0.5s var(--ease); z-index: -1;
}
.btn:hover { color: var(--paper); }
.btn:hover::before { transform: translateY(0); }
.btn--clay { border-color: var(--clay); color: var(--clay); }
.btn--clay::before { background: var(--clay); }
.btn--clay:hover { color: var(--white); }

/* ============================================================
   Generic sections
   ============================================================ */
.section { padding-block: clamp(5rem, 12vw, 9rem); }
.section--tint { background: var(--paper-2); }
.section-head { max-width: 60ch; margin-bottom: clamp(2.4rem, 5vw, 4rem); }
.section-head .eyebrow { display: block; margin-bottom: 1.2rem; }
.section-head h2 {
  font-family: var(--serif); font-weight: 400; line-height: 1.08;
  font-size: clamp(2.1rem, 5.5vw, 4rem); color: var(--ink); letter-spacing: -0.01em;
}
.section-head p { margin-top: 1.4rem; color: var(--ink-2); max-width: 52ch; }
.center { text-align: center; margin-inline: auto; }

/* ============================================================
   Page hero (inner pages)
   ============================================================ */
.page-hero {
  position: relative; padding-top: clamp(9rem, 18vw, 13rem); padding-bottom: clamp(3rem, 7vw, 5rem);
  overflow: hidden;
}
.page-hero .eyebrow { display: block; margin-bottom: 1.4rem; }
.page-hero h1 {
  font-family: var(--serif); font-weight: 400; line-height: 1.02;
  font-size: clamp(2.8rem, 9vw, 6.5rem); letter-spacing: -0.015em; color: var(--ink);
}
.page-hero p { margin-top: 1.6rem; max-width: 50ch; color: var(--ink-2); }
.page-hero .float-mark {
  position: absolute; right: 4%; top: 30%; width: clamp(90px, 16vw, 220px);
  color: var(--line-2); opacity: 0.8;
}

/* ============================================================
   Collections grid
   ============================================================ */
.coll-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(1.2rem, 2.5vw, 2rem);
}
.coll-card {
  position: relative; padding: clamp(2rem, 4vw, 3rem); min-height: clamp(340px, 42vw, 460px);
  background: var(--white); border: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden; transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.coll-card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -30px rgba(58,47,32,0.4); }
.coll-card .idx {
  position: absolute; top: clamp(1.4rem,3vw,2.2rem); left: clamp(1.4rem,3vw,2.2rem);
  font-family: var(--serif); font-size: 0.95rem; color: var(--ink-soft); letter-spacing: 0.1em;
}
.coll-card .cc-mark {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -58%);
  width: 42%; color: var(--paper-deep); transition: transform 0.7s var(--ease), color 0.6s;
}
.coll-card:hover .cc-mark { transform: translate(-50%, -62%) scale(1.05); color: var(--clay-soft); }
.coll-card h3 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--ink); position: relative; z-index: 2;
}
.coll-card p { margin-top: 0.6rem; font-size: 0.86rem; color: var(--ink-soft); position: relative; z-index: 2; }

/* ============================================================
   Feature / split rows
   ============================================================ */
.split {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.split .lede { font-family: var(--serif); font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.4; color: var(--ink); font-weight: 300; }
.split p + p { margin-top: 1.2rem; }
.split .body p { color: var(--ink-2); }
.split .body p + p { margin-top: 1.2rem; }

/* values list */
.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2.5rem 3rem; }
.value .n { font-family: var(--serif); font-size: 1.1rem; color: var(--clay); letter-spacing: 0.08em; }
.value h4 { font-family: var(--serif); font-weight: 500; font-size: 1.4rem; margin: 0.8rem 0 0.6rem; color: var(--ink); }
.value p { color: var(--ink-2); font-size: 0.92rem; }

/* partners */
.partners { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(1.4rem, 3vw, 2.4rem); }
.partner {
  border: 1px solid var(--line); padding: clamp(2rem, 4vw, 3rem); background: var(--white);
  text-align: center; transition: transform 0.5s var(--ease), border-color 0.5s;
}
.partner:hover { transform: translateY(-5px); border-color: var(--line-2); }
.partner .avatar {
  width: 88px; height: 88px; border-radius: 50%; margin: 0 auto 1.4rem;
  display: grid; place-items: center; background: var(--paper-2); border: 1px solid var(--line);
  font-family: var(--serif); font-size: 2rem; color: var(--clay);
}
.partner h4 { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; color: var(--ink); }
.partner .role { margin-top: 0.4rem; font-size: 0.68rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-soft); }

/* ============================================================
   Contact
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.contact-block + .contact-block { margin-top: 2.6rem; padding-top: 2.6rem; border-top: 1px solid var(--line); }
.contact-block .eyebrow { display: block; margin-bottom: 1rem; }
.contact-block a, .contact-block address {
  font-family: var(--serif); font-style: normal; font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  line-height: 1.5; color: var(--ink); font-weight: 400;
}
.contact-block a.link { position: relative; transition: color 0.3s; }
.contact-block a.link:hover { color: var(--clay); }
.phones { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; }

.card {
  background: var(--white); border: 1px solid var(--line); padding: clamp(2rem, 4vw, 3rem);
}
.card h3 { font-family: var(--serif); font-weight: 400; font-size: 1.7rem; color: var(--ink); margin-bottom: 1.4rem; }
.field { margin-bottom: 1.4rem; }
.field label { display: block; font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.5rem; }
.field input, .field textarea {
  width: 100%; background: var(--paper); border: 1px solid var(--line); color: var(--ink);
  font-family: var(--sans); font-weight: 300; font-size: 0.98rem; padding: 0.85rem 1rem; outline: none;
  transition: border-color 0.3s;
}
.field input:focus, .field textarea:focus { border-color: var(--clay); }
.field textarea { resize: vertical; min-height: 130px; }
.form-note { font-size: 0.74rem; color: var(--ink-soft); margin-top: 0.6rem; min-height: 1em; }

/* ============================================================
   CTA band
   ============================================================ */
.cta-band { background: var(--ink); color: var(--paper); text-align: center; padding-block: clamp(5rem, 11vw, 8rem); }
.cta-band .eyebrow { color: var(--clay-soft); }
.cta-band h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 5.5vw, 3.6rem); margin: 1.2rem auto 2rem; max-width: 18ch; line-height: 1.1; }
.cta-band .btn { border-color: var(--paper); color: var(--paper); }
.cta-band .btn::before { background: var(--paper); }
.cta-band .btn:hover { color: var(--ink); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { background: var(--paper-2); border-top: 1px solid var(--line); padding-block: clamp(3.5rem, 7vw, 5rem) 2rem; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
.footer-top .wordmark { font-size: 1.5rem; }
.footer-brand p { margin-top: 1.4rem; max-width: 34ch; color: var(--ink-soft); font-size: 0.9rem; }
.footer-col h5 { font-size: 0.66rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 1.2rem; }
.footer-col a, .footer-col address { display: block; font-style: normal; color: var(--ink-2); font-size: 0.92rem; margin-bottom: 0.7rem; transition: color 0.3s; }
.footer-col a:hover { color: var(--clay); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.8rem; border-top: 1px solid var(--line);
  font-size: 0.74rem; color: var(--ink-soft); letter-spacing: 0.04em;
}
.footer-bottom a:hover { color: var(--clay); }

/* ============================================================
   Coming-soon modal (blurred backdrop)
   ============================================================ */
.cs-overlay {
  position: fixed; inset: 0; z-index: 9990;
  display: grid; place-items: center; padding: 1.4rem;
  background: rgba(58, 47, 32, 0.28);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  opacity: 0; visibility: hidden; transition: opacity 0.55s var(--ease), visibility 0.55s;
}
.cs-overlay.open { opacity: 1; visibility: visible; }
.cs-modal {
  position: relative; width: min(560px, 100%);
  background: var(--paper); border: 1px solid var(--line-2);
  padding: clamp(2.2rem, 5vw, 3.6rem); text-align: center;
  box-shadow: 0 50px 90px -40px rgba(58, 47, 32, 0.6);
  transform: translateY(24px) scale(0.98); opacity: 0;
  transition: transform 0.6s var(--ease), opacity 0.6s var(--ease);
}
.cs-overlay.open .cs-modal { transform: none; opacity: 1; }
.cs-modal .cs-mark { width: 54px; color: var(--ink); margin: 0 auto 1.4rem; }
.cs-modal .eyebrow { display: block; margin-bottom: 1rem; }
.cs-modal h2 {
  font-family: var(--serif); font-weight: 400; line-height: 1.1;
  font-size: clamp(1.7rem, 4.5vw, 2.6rem); color: var(--ink);
}
.cs-modal p { margin: 1.1rem auto 0; max-width: 40ch; color: var(--ink-2); font-size: 0.95rem; }
.cs-modal .notify { margin-top: 2rem; }
.cs-modal .cs-socials { margin-top: 1.8rem; }
.cs-close {
  position: absolute; top: 1rem; right: 1.1rem; width: 40px; height: 40px;
  display: grid; place-items: center; color: var(--ink-soft); font-size: 1.4rem; line-height: 1;
  border: 1px solid transparent; border-radius: 50%; transition: color 0.3s, border-color 0.3s;
}
.cs-close:hover { color: var(--ink); border-color: var(--line); }

/* social row */
.socials { display: inline-flex; align-items: center; gap: 1.4rem; }
.socials a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2);
  transition: color 0.3s;
}
.socials a:hover { color: var(--clay); }
.socials svg { width: 17px; height: 17px; }
.socials svg * { stroke: currentColor; }

/* ============================================================
   Reveal-on-scroll
   ============================================================ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.1s; } .reveal.d2 { transition-delay: 0.2s; }
.reveal.d3 { transition-delay: 0.3s; } .reveal.d4 { transition-delay: 0.4s; }

/* split-letter reveal for hero wordmark */
.hero__logo .wordmark .ltr {
  opacity: 0; transform: translateY(0.5em); display: inline-block;
  animation: rise 0.9s var(--ease) forwards;
}
@keyframes rise { to { opacity: 1; transform: none; } }

/* hero mark: reveal, then a gentle continuous float / breathe / sway */
.hero__logo .wordmark .mark {
  transform-origin: 50% 58%;
  animation: markIn 0.9s var(--ease) 0.95s both,
             markFloat 5.5s ease-in-out 1.9s infinite;
}
@keyframes markIn {
  from { opacity: 0; transform: translateY(0.7em) scale(0.82) rotate(-6deg); }
  to   { opacity: 1; transform: translateY(0.12em) scale(1) rotate(0deg); }
}
@keyframes markFloat {
  0%   { transform: translateY(0.12em) scale(1) rotate(-1.6deg); }
  50%  { transform: translateY(-0.04em) scale(1.045) rotate(1.6deg); }
  100% { transform: translateY(0.12em) scale(1) rotate(-1.6deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__logo .wordmark .mark { opacity: 1; animation: none; transform: translateY(0.12em); }
}

/* ============================================================
   Preloader
   ============================================================ */
.preloader {
  position: fixed; inset: 0; z-index: 9999; background: var(--paper);
  display: grid; place-items: center; transition: opacity 0.8s var(--ease), visibility 0.8s;
}
.preloader.done { opacity: 0; visibility: hidden; }
.pl-inner { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.preloader .pl-mark {
  width: 82px; height: auto; transform-origin: 50% 60%; opacity: 0;
  animation: plIn 0.9s var(--ease) 0.1s both, plPulse 2.4s ease-in-out 1s infinite;
}
@keyframes plIn {
  from { opacity: 0; transform: translateY(14px) scale(0.78) rotate(-9deg); }
  to   { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}
@keyframes plPulse {
  0%   { transform: scale(1) rotate(-2.5deg); }
  50%  { transform: scale(1.07) rotate(2.5deg); }
  100% { transform: scale(1) rotate(-2.5deg); }
}
.pl-word {
  font-family: var(--sans); font-weight: 300; text-transform: lowercase;
  letter-spacing: 0.52em; font-size: 0.8rem; color: var(--ink-soft);
  padding-left: 0.52em; opacity: 0; transform: translateY(8px);
  animation: plFade 0.8s var(--ease) 0.55s forwards;
}
.pl-bar {
  width: 120px; height: 1.5px; border-radius: 2px; background: var(--line);
  position: relative; overflow: hidden; opacity: 0;
  animation: plFade 0.8s var(--ease) 0.7s forwards;
}
.pl-bar::after {
  content: ""; position: absolute; top: 0; left: -45%; width: 45%; height: 100%;
  background: var(--clay); border-radius: 2px;
  animation: plLoad 1.25s ease-in-out 0.9s infinite;
}
@keyframes plFade { to { opacity: 1; transform: none; } }
@keyframes plLoad { 0% { left: -45%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .preloader .pl-mark, .pl-word, .pl-bar { opacity: 1; transform: none; animation: none; }
  .pl-bar::after { animation: none; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 860px) {
  .nav { display: none; }
  .burger { display: block; }
  .split, .contact-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 2rem; }
  .page-hero .float-mark { display: none; }
}
@media (max-width: 520px) {
  .countdown { gap: 1rem; }
  .notify { flex-wrap: nowrap; }
}

/* ============================================================
   Motion preferences
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .fabric { display: none; }
}