/* COAH Collective — shared design system.
   Loaded by every page; page-specific rules stay in each page's <style>.
   Font URLs are relative to this file (assets/css/), hence ../fonts/. */

/* ---------- Fonts ----------
   Self-hosted (latin subsets from Google Fonts; the GFS Didot file is
   subset to the four logo glyphs C, O, H, Λ). Jost is a variable font
   covering weights 400–500 in one file. */
@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/fraunces.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Fraunces';font-style:italic;font-weight:400;font-display:swap;
  src:url(../fonts/fraunces-italic.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Jost';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/jost.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'GFS Didot';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/gfs-didot-logo.woff2) format('woff2');
  unicode-range:U+43,U+48,U+4F,U+39B;
}

/* ---------- Tokens ---------- */
:root{
  --cream:#F2EFEB;
  --beige:#D9C0A3;
  --brown:#735646;
  --terracotta:#733426;
  --ink:#0D0D0C;
  --sage:#506843;
  --cream-2:#FBF9F6;
  --gold:#A9834F;
  --line:rgba(115,86,70,.18);
  --shadow:0 24px 60px -28px rgba(13,13,12,.38);
  --serif:"Fraunces",Georgia,serif;
  --didot:"GFS Didot",Georgia,serif;
  --sans:"Jost",system-ui,-apple-system,sans-serif;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.08;margin:0}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--terracotta);outline-offset:3px;border-radius:4px}
img{display:block;max-width:100%}

/* ---------- Layout ----------
   Pages set --wrap to change measure (e.g. 720px for prose). */
.wrap{width:min(var(--wrap,1180px),90vw);margin-inline:auto}

.eyebrow{
  font-family:var(--sans);font-weight:500;font-size:.72rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--terracotta);margin:0 0 1.1rem
}

/* ---------- Brand lockup ---------- */
.brand{display:inline-block;color:var(--ink)}
.brand-word{display:block;font-family:var(--didot);font-size:2.3rem;line-height:1;
  letter-spacing:.16em;margin-right:-.16em}
.brand-sub{display:flex;align-items:center;gap:.6em;margin-top:.35em;
  font-family:var(--sans);font-weight:400;font-size:.67rem;letter-spacing:.38em;
  text-transform:uppercase;color:var(--brown)}
.brand-sub::before,.brand-sub::after{content:"";flex:1;height:1px;background:var(--gold)}
.brand-sub span{margin-right:-.38em}

/* ---------- Nav shell ----------
   .nav is the plain bar; add .nav--sticky for the translucent pinned
   version used on the marketing page. */
.nav{background:var(--cream);border-bottom:1px solid var(--line)}
.nav--sticky{position:sticky;top:0;z-index:50;
  background:rgba(242,239,235,.82);backdrop-filter:blur(10px)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:96px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;font-family:var(--sans);font-weight:400;font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase;padding:.85em 1.7em;border-radius:999px;
  background:var(--sage);color:var(--cream);border:1px solid var(--sage);
  transition:transform .25s ease,background .25s ease,color .25s ease;cursor:pointer
}
.btn:hover{background:transparent;color:var(--sage);transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--brown);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--brown);color:var(--ink)}

@media print{
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .nav,.nav--sticky{position:static}
}