/* Egret & Reed — the house tokens.
   One source of truth for every page. Pages keep their own layout CSS;
   anything two pages both need lives here. */

:root {
  /* ---- palette ---- */
  --bone:#f4eee1;            /* the ground — warm ivory, never pure white */
  --bone-deep:#e9e0cd;       /* bone in shadow */
  --porcelain:#fbf8f1;       /* raised surfaces: cards, tiles, sheets */
  --ink:#1f2b26;             /* text, near-black green */
  --ink-soft:#5a6a61;        /* secondary text */
  --ink-faint:#8a978f;       /* tertiary, timestamps, hints */
  --reed:#31523f;            /* the brand green — actions, emphasis */
  --reed-deep:#27412f;       /* dark sections, pressed states */
  --celadon:#9db8a4;         /* pale green — italic accents on dark */
  --gold:#c2a35d;            /* eyebrows, coins, fine rules */
  --persimmon:#d9764a;       /* warmth — one accent, used sparingly */
  --persimmon-deep:#b4582e;  /* persimmon for small type on bone — legible */
  --jade:#66785c;            /* the tile's moss-jade back */
  --jade-deep:#4d5f48;
  --vermilion:#c00804;       /* seal red — tiny doses only */
  --blue:#155488;            /* winds, water */
  --line:rgba(31,43,38,.12); /* hairlines on bone */
  --line-dark:rgba(246,241,231,.16); /* hairlines on reed-deep */

  /* ---- type ---- */
  --serif:'Fraunces',Georgia,serif;
  --sans:'Inter',system-ui,sans-serif;
  --display:clamp(3.2rem,10.5vw,8.5rem);   /* the hero voice */
  --headline:clamp(2.2rem,5.6vw,4.6rem);   /* section heads */
  --title:clamp(1.5rem,3vw,2.4rem);        /* card/screen titles */
  --eyebrow:600 .7rem/1 var(--sans);       /* with letter-spacing:.34em */

  /* ---- motion ---- */
  --ease:cubic-bezier(.19,1,.22,1);
  --easeX:cubic-bezier(.16,1,.3,1);

  /* ---- rhythm ---- */
  --gutter:clamp(20px,5vw,64px);
  --r-lg:22px; --r-md:14px; --r-sm:10px;
}

/* ---- shared primitives ---- */
.eyebrow { font:var(--eyebrow); letter-spacing:.34em; text-transform:uppercase; color:var(--gold); }
.eyebrow.warm { color:var(--persimmon); }

.btn-house { display:inline-flex; align-items:center; gap:10px; border:0; cursor:pointer;
  border-radius:999px; padding:16px 32px; font:600 .95rem var(--sans);
  background:var(--reed); color:var(--bone); text-decoration:none;
  transition:transform .45s var(--easeX), box-shadow .45s var(--easeX), background .3s; }
.btn-house:hover { transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(39,65,47,.55); background:var(--reed-deep); }
.btn-house.line { background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px rgba(31,43,38,.3); }
.btn-house.line:hover { box-shadow:inset 0 0 0 1px rgba(31,43,38,.6); background:transparent; }
.btn-house.ghost { background:transparent; color:var(--bone); box-shadow:inset 0 0 0 1px var(--line-dark); }
.btn-house.ghost:hover { box-shadow:inset 0 0 0 1px rgba(246,241,231,.5); background:transparent; }

.hairline-card { background:var(--porcelain); border:1px solid var(--line); border-radius:var(--r-lg); }

/* one ampersand: Fraunces changes its italic & with optical size, so every
   wordmark pins the display-size swash — the same glyph at every scale */
.wm em, .wordmark em, .tab-brand em, .backlink a em, h1 em {
  font-variation-settings:'opsz' 144; }