/* =========================================================================
   Anvil Design System — tokens.css
   anvilkept.com — "Forge what you keep."
   Iron text on Parchment. Forge for the ember (used once per surface).
   -------------------------------------------------------------------------
   Drop this file into any project, or paste the :root block below.
   Fonts: Source Serif 4, Inter, JetBrains Mono — all on Google Fonts.
   The @import loads them; remove it if you self-host or load fonts yourself.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300..900;1,8..60,300..900&family=Inter:wght@400..600&family=JetBrains+Mono:wght@400..500&display=swap');

:root {
  /* ---------- Color: brand ---------- */
  --parchment:  #F5F1EA;   /* Primary surface — warm off-white          */
  --iron:       #1A1815;   /* Primary text, marks, structure            */
  --forge:      #B85C2E;   /* Ember accent — used once per surface      */
  --brass:      #D6BC8C;   /* Quiet warmth — dividers, app-icon reverse */
  --stone:      #8B7D6B;   /* Captions, meta, eyebrow text              */

  /* Tints + shades, used for hairlines, hover states, inner cards */
  --parchment-deep:   #ECE6DA;     /* card surface against parchment     */
  --parchment-deeper: #E3DBC9;     /* hover/pressed on parchment-deep    */
  --hairline:         #C9BFA8;     /* the 0.5px hairline divider         */
  --hairline-soft:    #D9D0BA;     /* even quieter dividers              */
  --iron-soft:        #2E2A24;     /* near-iron, for layered dark UI     */
  --iron-deep:        #100E0C;     /* deepest iron, modal backdrops      */
  --forge-deep:       #8E4422;     /* pressed-state forge                */
  --forge-glow:       rgba(184, 92, 46, 0.22); /* button glow halo       */
  --forge-soft:       rgba(184, 92, 46, 0.10); /* tints/backgrounds      */

  /* Theme-constant colors — fixed in BOTH light and dark.
     --on-accent: light text that sits on Forge or a dark surface.
     --ink-fixed: the deliberately-dark book-cover artifact. */
  --on-accent: #F5F1EA;
  --ink-fixed: #1A1815;

  /* ---------- Color: semantic foreground / background ---------- */
  --bg:        var(--parchment);
  --bg-raised: var(--parchment-deep);
  --bg-sunk:   #EDE7D9;
  --bg-dark:   var(--iron);
  --bg-darker: var(--iron-deep);

  --fg1: var(--iron);        /* primary text */
  --fg2: var(--stone);       /* secondary, captions, meta */
  --fg3: #A99C87;            /* tertiary, placeholders */
  --fg-on-dark:    #F5F1EA;
  --fg-on-dark-2:  #C9BFA8;
  --fg-on-dark-3:  #8B7D6B;

  --accent:        var(--forge);
  --accent-press:  var(--forge-deep);
  --accent-glow:   var(--forge-glow);
  --accent-soft:   var(--forge-soft);

  --border:        var(--hairline);
  --border-soft:   var(--hairline-soft);
  --border-strong: var(--iron);

  color-scheme: light;

  /* ---------- Type: families ---------- */
  --font-serif: 'Source Serif 4', 'Source Serif Pro', 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:  'JetBrains Mono', 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- Type: scale (web) ---------- */
  /* size / line-height / letter-spacing */
  --display-xl-size: 48px;  --display-xl-lh: 1.05;  --display-xl-tracking: -0.02em;
  --display-l-size:  38px;  --display-l-lh:  1.05;  --display-l-tracking:  -0.02em;
  --display-m-size:  28px;  --display-m-lh:  1.10;  --display-m-tracking:  -0.02em;
  --body-l-size:     18px;  --body-l-lh:     1.60;
  --body-size:       15px;  --body-lh:       1.60;
  --body-tracking:   -0.008em;            /* subtle tightening for book feel */
  --caption-size:    12px;  --caption-lh:    1.50;
  --eyebrow-size:    10px;  --eyebrow-lh:    1.50;  --eyebrow-tracking:    0.15em;

  /* Long-form reading (essay body, About, Privacy):
     serif for the user's own writing surfaces; sans stays for chrome.
     Denser, book-like line-height (1.55, not 1.60). */
  --body-reading-size:     18px;
  --body-reading-lh:       1.55;
  --body-reading-tracking: -0.008em;
  --body-reading-weight:   400;            /* Source Serif 4 regular */

  /* Display weight — medium (500) for an inked, book-print feel.
     Source Serif 4 is variable, so 500 reads as "medium" with no extra file. */
  --display-weight: 500;

  /* ---------- Spacing scale (4px base) ---------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---------- Radii ---------- */
  --radius-0:  0;       /* default — Anvil prefers crisp edges */
  --radius-1:  2px;     /* very tight, used on chips/tags */
  --radius-2:  4px;     /* buttons, inputs */
  --radius-3:  6px;     /* cards (rare) */
  --radius-4:  10px;    /* modals (rare) */
  --radius-pill: 999px;

  /* ---------- Borders ---------- */
  --hairline-w: 0.5px;
  --rule-w:     1px;
  --strong-w:   1.5px;

  /* ---------- Shadows ---------- */
  /* Anvil avoids drop shadows except the polished button "glow". */
  --shadow-glow:        0 0 0 0 transparent, 0 6px 22px -8px var(--forge-glow), 0 2px 8px -2px rgba(26,24,21,0.08);
  --shadow-glow-strong: 0 0 0 0 transparent, 0 10px 32px -8px var(--forge-glow), 0 4px 14px -4px rgba(26,24,21,0.12);
  --shadow-card:        0 1px 0 0 var(--hairline); /* a hairline, not a drop */
  --shadow-press:       inset 0 1px 0 0 rgba(0,0,0,0.06);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);   /* default */
  --ease-in:  cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --dur-1:    120ms;
  --dur-2:    180ms;
  --dur-3:    260ms;
  --dur-4:    420ms;
}

/* =========================================================================
   Dark mode — a strict inversion of the locked palette.
   Iron ground · Parchment text · Brass-dimmed rules · one Forge ember.
   Set data-theme="dark" on <html> before first paint (no-flash script).
   ========================================================================= */
html[data-theme="dark"] {
  color-scheme: dark;
  --parchment:        #1A1815;   /* ground */
  --parchment-deep:   #2E2A24;   /* a touch lifted from the ground */
  --parchment-deeper: #3A352D;
  --iron:             #F5F1EA;   /* text */
  --iron-soft:        #D8CFBD;
  --stone:            #A89A85;   /* muted text, lightened for dark */
  --hairline:         rgba(214, 188, 140, 0.28);  /* brass, dimmed */
  --hairline-soft:    rgba(214, 188, 140, 0.18);
  --forge-glow:       rgba(184, 92, 46, 0.32);

  --bg-sunk:          #211E1A;
  --fg3:              #8B7D6B;
}

/* Dark mode: recolor iron line-art brand marks to the parchment text color. */
html[data-theme="dark"] img[src*="logos/"],
html[data-theme="dark"] .brand-mark--invertible svg {
  filter: invert(1) brightness(1.07) sepia(0.10) saturate(0.6);
}

/* =========================================================================
   Semantic typography utility classes
   ========================================================================= */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--eyebrow-size);
  line-height: var(--eyebrow-lh);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--stone);
}

.display-xl, h1.display, .h1 {
  font-family: var(--font-serif);
  font-size: var(--display-xl-size);
  line-height: var(--display-xl-lh);
  letter-spacing: var(--display-xl-tracking);
  font-weight: var(--display-weight);
  color: var(--fg1);
  text-wrap: balance;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}

.display-l, h2.display, .h2 {
  font-family: var(--font-serif);
  font-size: var(--display-l-size);
  line-height: var(--display-l-lh);
  letter-spacing: var(--display-l-tracking);
  font-weight: var(--display-weight);
  color: var(--fg1);
  text-wrap: balance;
}

.display-m, h3.display, .h3 {
  font-family: var(--font-serif);
  font-size: var(--display-m-size);
  line-height: var(--display-m-lh);
  letter-spacing: var(--display-m-tracking);
  font-weight: var(--display-weight);
  color: var(--fg1);
  text-wrap: balance;
}

.body-l, p.body-l {
  font-family: var(--font-sans);
  font-size: var(--body-l-size);
  line-height: var(--body-l-lh);
  letter-spacing: var(--body-tracking);
  color: var(--fg1);
}

.body, p {
  font-family: var(--font-sans);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  letter-spacing: var(--body-tracking);
  color: var(--fg1);
}

/* Long-form reading body — serif, 18px / 1.55. Essay pages, About, Privacy. */
.essay-body, p.essay-body, .body-reading {
  font-family: var(--font-serif);
  font-size: var(--body-reading-size);
  line-height: var(--body-reading-lh);
  letter-spacing: var(--body-reading-tracking);
  font-weight: var(--body-reading-weight);
  color: var(--fg1);
  font-variant-ligatures: common-ligatures;
  font-feature-settings: "kern", "liga", "clig";
}

.caption, small {
  font-family: var(--font-sans);
  font-size: var(--caption-size);
  line-height: var(--caption-lh);
  color: var(--fg2);
}

.mono, code, kbd, samp, pre { font-family: var(--font-mono); }

.display-italic { font-style: italic; }

/* Hairline divider */
hr, .hairline {
  border: none;
  border-top: var(--hairline-w) solid var(--hairline);
  margin: var(--space-6) 0;
}

/* =========================================================================
   Components (canonical rules from the live site)
   ========================================================================= */

/* Primary button — the polished "glow" is the one place Anvil uses a shadow. */
.btn-forge {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.005em;
  padding: 13px 22px;
  border-radius: var(--radius-2);
  background: var(--forge);
  color: var(--on-accent);
  border: 1px solid var(--forge);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  box-shadow:
    0 0 0 0 var(--forge-glow),
    0 6px 22px -8px rgba(184, 92, 46, 0.55),
    0 2px 8px -2px rgba(26,24,21,0.08);
  transition: background var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.btn-forge:hover {
  background: #A75124;
  box-shadow:
    0 0 0 6px var(--forge-glow),
    0 10px 32px -8px rgba(184, 92, 46, 0.75),
    0 4px 14px -4px rgba(26,24,21,0.14);
}
.btn-forge:active {
  background: var(--forge-deep);
  transform: scale(0.985);
  box-shadow: 0 2px 6px -3px rgba(184, 92, 46, 0.5), inset 0 1px 0 rgba(0,0,0,0.08);
}

/* The single Forge accent link — arrow nudges and gap widens on hover. */
.read-link {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--forge);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  letter-spacing: -0.005em;
  padding: 4px 0;
  border-bottom: 1px solid var(--forge);
  transition: gap var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-bottom-width var(--dur-2) var(--ease-out);
}
.read-link:hover { gap: 14px; }
.read-link:focus-visible { outline: 2px solid var(--forge); outline-offset: 4px; border-radius: 1px; }
.read-link__arrow { transition: transform var(--dur-2) var(--ease-out); }
.read-link:hover .read-link__arrow { transform: translateX(2px); }

/* Inline text links: 1px underline, offset 4px, thickens on hover. */
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-thickness var(--dur-1) var(--ease-out); }
a:hover { text-decoration-thickness: 1.5px; }

::selection { background: var(--forge); color: var(--on-accent); }

/* Subscribe form input — transparent, bottom-ruled, forge underline on focus. */
.field label {
  display: block;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 8px;
}
.field input[type="email"],
.field input[type="text"] {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--iron);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--iron);
  padding: 10px 0;
  width: 100%;
  outline: none;
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.field input::placeholder { color: var(--stone); }
.field input:focus { border-bottom-color: var(--forge); box-shadow: 0 1px 0 0 var(--forge); }

/* Reduced motion: honor the user's preference. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}