/* Design tokens + layout primitives.
   RULE: gold #C4A466 is a DARK-SURFACE colour. On cream it is 2.08:1 and
   fails WCAG AA at every size — use --gold-text #7A6230 (5.08:1) instead. */

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --ink:#1A1410;
  --cream:#F4EFEA;
  --paper:#FAF7F2;
  --gold:#C4A466;
  --gold-deep:#9A7E44;
  --gold-text:#7A6230;
  --sage:#4F6E62;
  --green-deep:#1E3028;
  --green-carte:#1B2D1B;
  --mint:#E6EDEA;
  --gray:#6E655D;        /* 4.99:1 on cream — passes AA for body */
  --gray-light:#8A8078;  /* 3.38:1 — decorative / on-dark only, never body on cream */

  --rule:rgba(26,20,16,.14);
  --rule-dark:rgba(244,239,234,.16);

  --serif:'Gilda Display',Georgia,serif;
  --sans:'DM Sans',system-ui,sans-serif;
  --mono:'Courier Prime',ui-monospace,monospace;

  --narrow:620px;
  --standard:1080px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --hand:'Caveat',cursive;

  --hot-img:url('../images/hot-desk.jpg');
  --cold-img:url('../images/cold-social.jpg');
  --hero-img:url('../images/hero-case.jpg');
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  /* NB: no overflow-x here — it creates a scroll container and breaks
     position:sticky. html{overflow-x:clip} handles the decorative bleed. */
}

/* Paper grain — fixed, so it reads as the surface the page is printed on */
.grain{
  position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 12-column grid — every section lays out on it, none are centered by default */
.grid{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:0 24px;max-width:1440px;margin:0 auto;padding:0 40px;
}

/* Letterpress on large display type */
.press{
  text-shadow:0 1px 0 rgba(255,255,255,.06),0 -1px 0 rgba(0,0,0,.12);
}

.eyebrow{
  font-family:var(--sans);font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gray);
  margin:0 0 20px;
}
.eyebrow-light{color:rgba(244,239,234,.5)}

h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0}