/* ============================================================
   MOTHERCRAFT — shared design system
   Reuses the exact tokens from the Mothercraft home page.
   Fonts: Newsreader (serif display/quotes) + Mulish (sans body/UI)
   ============================================================ */

:root {
  /* surfaces */
  --cream:#F6F1E8;
  --paper:#FBF8F2;
  --sand:#E7DBC6;
  --peach:#EBC8B0;

  /* greens */
  --sage:#87A06F;
  --sage-light:#A9BE97;
  --moss:#4F6B43;
  --forest:#33472B;
  --forest-a:#2E3D26;   /* hero gradient light */
  --forest-b:#283420;   /* hero gradient deep  */
  --forest-deep:#243019;

  /* clays */
  --clay:#D28C68;
  --clay-btn:#E59A6F;    /* brighter clay used on buttons */
  --deep-clay:#B96A4A;
  --accent-warm:#EFA67E; /* headline emphasis on dark */

  /* ink */
  --ink:#3B3630;
  --ink-soft:#6B6258;

  /* text on dark */
  --on-dark:#FBF8F2;
  --on-dark-body:#D7DECB;
  --on-dark-soft:#E9EDE3;

  /* tweakable knobs (overridden by Tweaks panel) */
  --accent:var(--deep-clay);      /* warm accent for labels/emphasis */
  --accent-soft:var(--sage);      /* cool accent companion */
  --btn-radius:999px;
  --card-radius:20px;

  --maxw:1180px;
  --gutter:clamp(20px,6vw,64px);
  --serif:"Newsreader",Georgia,serif;
  --sans:"Mulish",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--peach);color:var(--forest)}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.wrap-narrow{max-width:760px;margin:0 auto;padding-inline:var(--gutter)}
section{position:relative}
.pad{padding-block:clamp(64px,9vw,128px)}
.pad-sm{padding-block:clamp(44px,6vw,80px)}

/* surface helpers */
.bg-cream{background:var(--cream)}
.bg-paper{background:var(--paper)}
.bg-sand{background:var(--sand)}
.bg-forest{
  background:
    radial-gradient(1000px 700px at 16% 6%, rgba(58,75,46,.85) 0%, rgba(58,75,46,0) 60%),
    radial-gradient(720px 600px at 96% 96%, rgba(36,48,25,.9) 0%, rgba(36,48,25,0) 60%),
    linear-gradient(160deg, var(--forest-a) 0%, var(--forest-b) 100%);
  color:var(--on-dark);
}
/* film-grain noise overlay for dark bands */
.grain::before{
  content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:.45;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--sans);font-weight:700;
  font-size:clamp(11px,1.1vw,13px);
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--sage);margin:0 0 18px;
  display:flex;align-items:center;gap:10px;
}
.eyebrow--clay{color:var(--deep-clay)}
.eyebrow--peach{color:var(--peach)}
.eyebrow::before{content:"";width:22px;height:1.5px;background:currentColor;opacity:.7;display:inline-block}
.eyebrow.no-rule::before{display:none}

h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.06;margin:0;letter-spacing:-.01em}
.display{font-size:clamp(40px,7vw,72px);font-weight:500;line-height:1.02;letter-spacing:-.02em}
h2.section-title{font-size:clamp(28px,4.6vw,46px);color:var(--moss)}
.bg-forest h2.section-title,.on-dark h2.section-title{color:var(--on-dark)}
.lead{font-size:clamp(17px,1.7vw,20px);color:var(--ink-soft);max-width:62ch;margin:18px 0 0}
.bg-forest .lead,.on-dark .lead{color:var(--on-dark-body)}
.emph{color:var(--accent-warm);font-style:italic}
.serif-quote{font-family:var(--serif);font-weight:400;font-style:italic;line-height:1.32}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sans);font-weight:700;font-size:16px;line-height:1;
  padding:17px 30px;border-radius:var(--btn-radius);border:1.6px solid transparent;
  text-decoration:none;cursor:pointer;transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s,border-color .25s,filter .25s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--primary-bg,var(--clay-btn));color:var(--primary-text,var(--forest-a));box-shadow:0 10px 26px -12px rgba(185,106,74,.55)}
.btn--primary:hover{filter:brightness(1.04);box-shadow:0 16px 34px -12px rgba(185,106,74,.7)}
.btn--moss{background:var(--moss);color:var(--paper);box-shadow:0 10px 26px -14px rgba(51,71,43,.8)}
.btn--moss:hover{background:#577549}
.btn--outline{background:transparent;border-color:var(--moss);color:var(--moss)}
.btn--outline:hover{background:var(--moss);color:var(--paper)}
.btn--ghost-light{background:transparent;border-color:rgba(251,248,242,.5);color:var(--on-dark)}
.btn--ghost-light:hover{background:rgba(251,248,242,.12);border-color:var(--on-dark)}
.btn--lg{padding:19px 38px;font-size:17px}
.btn--block{display:flex;width:100%}

/* ---------- cards ---------- */
.card{
  background:var(--cream);border:1px solid rgba(59,54,48,.07);
  border-radius:var(--card-radius);padding:clamp(24px,3vw,34px);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s;
}
.card--paper{background:var(--paper)}
.card--hover:hover{transform:translateY(-4px);box-shadow:0 24px 50px -28px rgba(59,54,48,.35)}

/* ---------- motif divider ---------- */
.motif{display:block;width:min(560px,72%);margin:0 auto;opacity:.92}
.motif--full{width:min(800px,100%)}
.divider{display:flex;justify-content:center;padding-block:clamp(20px,4vw,40px)}

/* ---------- brand lockup ---------- */
.brandmark{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.brandmark img{width:46px;height:46px}
.brandmark .name{font-family:var(--serif);font-weight:600;font-size:23px;line-height:1;letter-spacing:.2px}
.brandmark .tag{font-family:var(--sans);font-weight:700;font-size:9px;letter-spacing:.19em;text-transform:uppercase;line-height:1;margin-top:5px;color:var(--sage)}

/* ---------- site nav ---------- */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px var(--gutter);background:rgba(246,241,232,.82);backdrop-filter:blur(12px);border-bottom:1px solid rgba(59,54,48,.07)}
.nav.on-dark{background:transparent;border:none;position:absolute;inset:0 0 auto 0}
.nav__links{display:flex;align-items:center;gap:clamp(10px,2vw,28px)}
.nav__links a{font-family:var(--sans);font-weight:600;font-size:15px;color:var(--ink-soft);text-decoration:none;transition:color .2s}
.nav.on-dark .nav__links a{color:var(--on-dark-soft)}
.nav__links a:hover{color:var(--moss)}
.nav.on-dark .nav__links a:hover{color:var(--on-dark)}
.nav__cta{padding:11px 20px;border-radius:999px;background:var(--moss);color:var(--paper)!important;font-weight:700;font-size:14px}
.nav .name{color:var(--ink)}
.nav.on-dark .name{color:var(--on-dark)}
@media(max-width:680px){.nav__hide{display:none}}

/* ---------- footer band ---------- */
.footer{background:var(--ink);color:var(--on-dark-soft);text-align:center;padding:clamp(56px,8vw,96px) var(--gutter)}
.footer .motif{opacity:.85;width:min(440px,80%)}
.footer .signoff{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.6vw,28px);color:var(--peach);margin:26px 0 6px}
.footer .domain{font-family:var(--sans);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:12px;color:var(--sage-light)}
.footer .small{color:rgba(233,237,227,.5);font-size:13px;margin-top:30px}

/* utility */
/* tweak hooks */
body.contrast-soft .bg-forest{
  background:
    radial-gradient(1000px 700px at 16% 6%, rgba(96,118,80,.7) 0%, rgba(96,118,80,0) 60%),
    linear-gradient(160deg, #46603a 0%, #3a4f30 100%);
}
body.contrast-soft .deck-cover,body.contrast-soft .gc-preview{filter:saturate(1.02) brightness(1.06)}
body.no-dividers .divider{display:none}

.center{text-align:center}
.mx-auto{margin-inline:auto}
.stack{display:flex;flex-direction:column}
.row{display:flex;flex-wrap:wrap;align-items:center}
.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-24{gap:24px}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-40{margin-top:40px}