/* ===== tokens/fonts.css ===== */
/* ===========================================================================
   Andy[x] — Webfonts (all self-hosted)
   ---------------------------------------------------------------------------
   The PERIODICAL system. Three voices, three jobs:
   • Instrument Serif — the display face. A high-contrast literary serif used
     LARGE for mastheads, headlines, and pull-quotes. Regular + italic only.
   • Spectral — the reading face. A screen-tuned text serif for long-form body.
     Light / Regular / Medium, with light + regular italics.
   • JetBrains Mono — the meta voice. Used small & uppercase for kickers,
     labels, dates, tags, and code — the only "machine" register on the page.
   Everything ships from /fonts. No external font CDNs.
   =========================================================================== */

/* ---- Instrument Serif (display) ------------------------------------------ */
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/InstrumentSerif-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/InstrumentSerif-Italic.ttf") format("truetype");
}

/* ---- Spectral (reading body) --------------------------------------------- */
@font-face {
  font-family: "Spectral";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/Spectral-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Spectral";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/Spectral-LightItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Spectral";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Spectral-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Spectral";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Spectral-Italic.ttf") format("truetype");
}
@font-face {
  font-family: "Spectral";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Spectral-Medium.ttf") format("truetype");
}

/* ---- JetBrains Mono (meta / labels / code) ------------------------------- */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/JetBrainsMono-Roman.ttf") format("truetype");
}


/* ===== tokens/colors.css ===== */
/* ===========================================================================
   Andy[x] — Color tokens  ·  PERIODICAL
   ---------------------------------------------------------------------------
   Principle: the text is the interface. The palette is a warm, low-light press
   — ink-brown paper, warm paper-whites, and ONE rust accent that stands in for
   every link, marker, and highlight. Near-monochrome by design; the accent is
   rare and therefore meaningful. No gradients, no second hue.
       canvas #14120e   paper #eceae3   rust #c2754a
   =========================================================================== */

:root {
  /* --- Warm ink ramp (dark → the page and everything beneath text) ------ */
  --ink-1000: #0c0b08; /* deepest — letterbox, image mat                     */
  --ink-950:  #100e0a;
  --ink-900:  #14120e; /* ◆ canvas — the page                               */
  --ink-850:  #1a1813; /* raised surface (barely there)                      */
  --ink-800:  #211e18; /* card / inset panel                                 */
  --ink-750:  #2a2620; /* hover surface                                      */
  --ink-700:  #34302a; /* visible hairline on dark                           */
  --ink-600:  #45403a; /* stronger rule                                      */

  /* --- Warm paper ramp (light → text) ----------------------------------- */
  --paper-600: #6e6a5f; /* dim — micro-meta                                  */
  --paper-500: #7a766a; /* faint                                             */
  --paper-400: #8a8576; /* muted labels                                      */
  --paper-300: #b7b2a4; /* secondary text / italic deks                      */
  --paper-200: #cfcabd; /* body reading color                                */
  --paper-100: #eceae3; /* ◆ primary text                                   */
  --paper-000: #f4f2ec; /* brightest — mastheads, headlines                  */

  /* --- Rust accent ramp (the one color) --------------------------------- */
  --rust-700: #9c5a35; /* pressed / deep                                     */
  --rust-600: #b06640; /* link border, restrained                           */
  --rust-500: #c2754a; /* ◆ accent — links, the [x], markers               */
  --rust-400: #d28a61; /* hover                                             */
  --rust-300: #e0a684; /* faint highlight                                    */

  /* --- Restrained semantics (warm, borrowed from the press) ------------- */
  --sage-500: #8a9c6e; /* positive / shipped (rare)                          */
  --clay-500: #c25a47; /* critical (rare)                                    */

  /* --- Hairlines & washes ----------------------------------------------- */
  --hair:        rgba(236, 234, 227, 0.12);
  --hair-faint:  rgba(236, 234, 227, 0.07);
  --hair-strong: rgba(236, 234, 227, 0.20);
  --rust-line:   rgba(194, 117, 74, 0.50);
  --rust-wash:   rgba(194, 117, 74, 0.12);
  --rust-wash-2: rgba(194, 117, 74, 0.22);
  --paper-wash:  rgba(236, 234, 227, 0.04);

  /* =====================================================================
     SEMANTIC ALIASES — reach for these, not the ramps.
     ===================================================================== */

  /* Surfaces */
  --background:     var(--ink-900);
  --surface:        var(--ink-850);
  --surface-raised: var(--ink-800);
  --surface-hover:  var(--ink-750);
  --surface-well:   var(--ink-1000);

  /* Text */
  --text:        var(--paper-100);
  --text-bright: var(--paper-000); /* headlines, mastheads                   */
  --text-body:   var(--paper-200); /* long-form reading                      */
  --text-muted:  var(--paper-300);
  --text-faint:  var(--paper-400);
  --text-dim:    var(--paper-600); /* mono micro-meta                        */
  --text-accent: var(--rust-500);

  /* Lines */
  --border:        var(--hair);
  --border-faint:  var(--hair-faint);
  --border-strong: var(--hair-strong);
  --rule:          var(--hair);

  /* Accent / interactive */
  --accent:       var(--rust-500);
  --accent-hover: var(--rust-400);
  --accent-press: var(--rust-700);
  --accent-line:  var(--rust-line);
  --accent-wash:  var(--rust-wash);

  /* Links */
  --link:       var(--text);        /* body links: paper, hairline underline */
  --link-hover: var(--rust-400);
  --link-accent: var(--rust-500);   /* standalone/nav links: rust            */

  /* Status (used sparingly) */
  --positive: var(--sage-500);
  --critical: var(--clay-500);

  /* Selection */
  --selection-bg: var(--rust-wash-2);
  --selection-fg: var(--paper-000);
}

::selection { background: var(--selection-bg); color: var(--selection-fg); }


/* ===== tokens/typography.css ===== */
/* ===========================================================================
   Andy[x] — Typography tokens  ·  PERIODICAL
   ---------------------------------------------------------------------------
   Three registers, never blurred:
   • DISPLAY  = Instrument Serif. Big, literary, a little high-contrast. Mast-
     heads, headlines, pull-quotes. Lives at 30px and up; loses its character
     when small. Tracking slightly negative at large sizes.
   • BODY     = Spectral. The reading voice. ~19–20px, line-height ~1.74, light
     to regular weight. Italics are real and used for deks/asides/quotes.
   • META     = JetBrains Mono. Small, UPPERCASE, wide-tracked. Kickers, dates,
     tags, labels, code. The only machine register — keep it quiet and rare.
   =========================================================================== */

:root {
  /* --- Families --------------------------------------------------------- */
  --font-display: "Instrument Serif", "Spectral", Georgia, "Times New Roman", serif;
  --font-body:    "Spectral", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-mono:    "JetBrains Mono", "SF Mono", "Fira Mono", Menlo, Consolas, monospace;
  /* role aliases */
  --font-meta: var(--font-mono); /* kickers, labels, dates, tags             */
  --font-ui:   var(--font-mono);
  --font-code: var(--font-mono);

  /* --- Display scale (Instrument Serif) --------------------------------- */
  --display-sm:  30px;  /* interior page wordmark, small headline            */
  --display-md:  40px;  /* section headline / h2 hero                        */
  --display-lg:  62px;  /* article headline / h1                             */
  --display-xl:  104px; /* home masthead                                     */
  --display-2xl: 132px; /* splash                                            */

  /* --- Body scale (Spectral / rem, 1rem = 16px) ------------------------- */
  --text-2xs: 0.6875rem; /* 11px — mono micro                               */
  --text-xs:  0.75rem;   /* 12px — mono meta                                */
  --text-sm:  0.875rem;  /* 14px — small body / captions                    */
  --text-base:1rem;      /* 16px                                            */
  --text-lg:  1.1875rem; /* 19px — secondary reading                        */
  --text-xl:  1.25rem;   /* 20px — long-form body                          */
  --text-2xl: 1.5rem;    /* 24px — lead / large dek                         */
  --text-3xl: 1.875rem;  /* 30px — h3 (display)                             */

  /* --- Weights ---------------------------------------------------------- */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;

  /* --- Line heights ----------------------------------------------------- */
  --leading-mast:    0.92;  /* huge masthead                                 */
  --leading-display: 1.05;  /* headlines                                     */
  --leading-snug:    1.3;
  --leading-body:    1.74;  /* long-form reading rhythm                      */
  --leading-meta:    1.5;

  /* --- Letter spacing --------------------------------------------------- */
  --tracking-mast:  -0.01em;  /* display at huge sizes                       */
  --tracking-tight: -0.005em;
  --tracking-normal: 0;
  --tracking-meta:   0.14em;   /* mono labels                                */
  --tracking-kicker: 0.24em;   /* mono kicker (widest)                       */

  /* =====================================================================
     SEMANTIC TYPE ALIASES
     ===================================================================== */
  --body-font:    var(--font-body);
  --body-size:    var(--text-xl);
  --body-leading: var(--leading-body);
  --body-weight:  var(--weight-regular);

  --display-font:    var(--font-display);
  --display-weight:  var(--weight-regular);
  --display-spacing: var(--tracking-tight);

  --kicker-font:    var(--font-meta);
  --kicker-size:    var(--text-2xs);
  --kicker-spacing: var(--tracking-kicker);

  --label-font:    var(--font-meta);
  --label-size:    var(--text-xs);
  --label-spacing: var(--tracking-meta);
}


/* ===== tokens/spacing.css ===== */
/* ===========================================================================
   Andy[x] — Spacing, line, layout & motion tokens  ·  PERIODICAL
   ---------------------------------------------------------------------------
   The Periodical has almost no "components" — structure is made of hairline
   rules, a narrow reading measure, and generous vertical air. So this file is
   mostly about RHYTHM and RULES, not boxes and shadows. Corners are square by
   default (the press has no rounded cards); shadows barely exist.
   =========================================================================== */

:root {
  /* --- Spacing scale (4px grid) ----------------------------------------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Long-form paragraph spacing */
  --flow-block: 26px;

  /* --- Radius — the press is square ------------------------------------- */
  --radius:    0;     /* ◆ default — no rounded cards                        */
  --radius-0:  0;
  --radius-sm: 2px;   /* rare softening (a tag chip, an avatar)             */
  --radius-pill: 999px;

  /* --- Rules (hairlines are the primary structural device) -------------- */
  --rule-hair:   1px;  /* every divider                                      */
  --rule-accent: 1px;  /* rust underline on links                            */
  --rule-mark:   2px;  /* the short accent rule above a title block          */

  /* --- Shadows — almost none -------------------------------------------- */
  --shadow-none: none;
  /* Used only on floating UI (a menu over text). Soft, low. */
  --shadow-soft: 0 12px 40px -12px rgba(0, 0, 0, 0.7);

  /* --- Focus ------------------------------------------------------------ */
  --focus-ring: 1px solid var(--accent);
  --focus-offset: 3px;

  /* --- Layout ----------------------------------------------------------- */
  --measure:        65ch;   /* ideal reading line length                     */
  --column:         720px;  /* the centered reading column                   */
  --column-wide:    980px;  /* index / wide views                            */
  --page-pad:       84px;   /* top breathing room                            */
  --page-pad-x:     36px;
  --page-pad-x-lg:  88px;

  /* --- Motion — quiet, linear ------------------------------------------- */
  --ease: linear; /* @kind other */
  --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1); /* @kind other */
  --dur-fast: 0.12s; /* @kind other */
  --dur:      0.15s; /* @kind other */
  --dur-slow: 0.4s; /* @kind other */
  --transition-color: color var(--dur) var(--ease),
                      border-color var(--dur) var(--ease),
                      background var(--dur) var(--ease);
}


/* ===== tokens/base.css ===== */
/* ===========================================================================
   Andy[x] — Base element styles  ·  PERIODICAL
   ---------------------------------------------------------------------------
   Element defaults that make raw HTML already look like the studio's press:
   Instrument Serif headlines, Spectral reading body, mono meta, hairline rules,
   rust links with a hairline underline, full-measure figures with mono fig.
   captions. No boxes, no buttons-as-default, no rounded anything.
   =========================================================================== */

html { box-sizing: border-box; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  background-color: var(--background);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-leading);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* --- Headlines: Instrument Serif display ------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  letter-spacing: var(--display-spacing);
  line-height: var(--leading-display);
  color: var(--text-bright);
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}
h1 { font-size: var(--display-lg); line-height: var(--leading-display); }
h2 { font-size: var(--display-md); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }

/* h5 / h6 step DOWN into the mono meta register (overlines) */
h5, h6 {
  font-family: var(--font-meta);
  font-size: var(--label-size);
  font-weight: var(--weight-regular);
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 var(--space-3);
}

/* --- Prose ------------------------------------------------------------- */
p { margin: 0 0 var(--flow-block); text-wrap: pretty; }
ul, ol, figure, table, blockquote, pre { margin: var(--flow-block) 0; }

a {
  color: var(--link);
  text-decoration: none;
  border-bottom: var(--rule-accent) solid var(--accent-line);
  padding-bottom: 1px;
  transition: var(--transition-color);
}
a:hover { color: var(--link-hover); border-bottom-color: var(--link-hover); }

strong, b { font-weight: var(--weight-medium); color: var(--text); }
em, i { font-style: italic; }
small { font-size: var(--text-sm); color: var(--text-muted); }

/* --- Hairline rule ----------------------------------------------------- */
hr {
  border: none;
  height: 1px;
  background: var(--rule);
  margin: var(--space-14) 0;
}

/* --- Lists: rust markers, hanging ------------------------------------- */
ul, ol { padding-left: 2.4ch; }
li { margin: var(--space-2) 0; padding-left: 0.4ch; }
li::marker { color: var(--accent); }

/* --- Blockquote: oversized display-italic pull-quote ------------------ */
blockquote {
  margin: var(--space-12) 0;
  padding: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  color: var(--text);
}
blockquote p { margin: 0; }
blockquote p::before { content: "\201C"; color: var(--accent); }
blockquote p::after  { content: "\201D"; color: var(--accent); }

/* --- Code: mono, quiet well ------------------------------------------- */
code, kbd, samp { font-family: var(--font-code); font-size: 0.86em; }
code {
  background: var(--paper-wash);
  border: 1px solid var(--border);
  padding: 1px 6px;
  color: var(--text);
}
pre {
  background: var(--surface-well);
  color: var(--text);
  padding: var(--space-5);
  overflow: auto;
  border: 1px solid var(--border);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}
pre code { background: none; border: none; padding: 0; }

/* --- Figures: full measure, warm grade, mono fig. caption ------------- */
img { max-width: 100%; height: auto; display: block; }
figure { width: 100%; }
figure img {
  width: 100%;
  object-fit: cover;
  filter: sepia(0.14) saturate(0.86);
}
figcaption {
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: var(--space-3);
}
figcaption::before { content: "fig. "; color: var(--accent); }

/* --- Tables: rule-lined, mono headers --------------------------------- */
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th, td { border-bottom: 1px solid var(--border); padding: var(--space-3) var(--space-4); text-align: left; }
th {
  font-family: var(--font-meta);
  text-transform: uppercase;
  letter-spacing: var(--label-spacing);
  font-size: var(--text-2xs);
  color: var(--text-faint);
  font-weight: var(--weight-regular);
}

/* --- Focus ------------------------------------------------------------- */
:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* =====================================================================
   Utility helpers (mirror the brand voices)
   ===================================================================== */
.ax-kicker {
  font-family: var(--font-meta);
  font-size: var(--kicker-size);
  letter-spacing: var(--kicker-spacing);
  text-transform: uppercase;
  color: var(--text-faint);
}
.ax-label {
  font-family: var(--font-meta);
  font-size: var(--label-size);
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  color: var(--text-dim);
}
.ax-mast {
  font-family: var(--font-display);
  font-size: var(--display-xl);
  line-height: var(--leading-mast);
  letter-spacing: var(--tracking-mast);
  color: var(--text-bright);
}
.ax-mast .x, .ax-x { color: var(--accent); font-style: italic; }
.ax-dek {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: var(--weight-light);
  color: var(--text-muted);
}
.ax-display { font-family: var(--font-display); color: var(--text-bright); }
.ax-meta { font-family: var(--font-meta); color: var(--text-dim); }
.ax-rule-mark {
  width: 56px;
  height: var(--rule-mark);
  background: var(--accent);
  border: none;
  margin: 0 0 var(--space-5);
}


/* ===========================================================================
   Andy[x] Periodical — Hugo layout classes (server-rendered, no JS)
   =========================================================================== */
html, body { height: auto; }
body { background: var(--background); }

.ax-page {
  max-width: var(--column);
  margin: 0 auto;
  padding: var(--page-pad) var(--page-pad-x) var(--space-20);
  box-sizing: border-box;
}

/* --- Wordmark --- */
.ax-wordmark { font-family: var(--font-display); color: var(--text-bright); letter-spacing: var(--tracking-mast); line-height: var(--leading-mast); text-decoration: none; border: none; display: inline-block; }
.ax-wordmark .x { color: var(--accent); font-style: italic; }
.ax-wordmark--xl { font-size: var(--display-xl); }
.ax-wordmark--sm { font-size: var(--display-sm); }
.ax-wordmark:hover { color: var(--text-bright); }

/* --- Interior nav --- */
.ax-nav { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-16); }
.ax-nav__links { display: flex; gap: 28px; }
.ax-nav__links a {
  font-family: var(--font-meta); font-size: var(--text-xs); letter-spacing: var(--label-spacing);
  text-transform: uppercase; color: var(--text-dim); text-decoration: none; border: none;
  padding-bottom: 3px; border-bottom: 1px solid transparent;
}
.ax-nav__links a:hover, .ax-nav__links a.is-active { color: var(--accent); border-bottom-color: var(--accent); }

/* --- Kicker --- */
.ax-kicker { display: flex; align-items: center; gap: var(--space-2); }
.ax-kicker--tick::before { content: "—"; color: var(--accent); }

/* --- Home masthead block --- */
.ax-hero__dek { font-family: var(--font-body); font-style: italic; font-weight: var(--weight-light); font-size: var(--text-2xl); line-height: 1.5; color: var(--text-muted); max-width: 32ch; margin: var(--space-6) 0 0; }
.ax-hero__lede { font-family: var(--font-body); font-size: var(--text-lg); line-height: var(--leading-body); color: var(--text-muted); max-width: 58ch; margin: var(--space-6) 0 0; }
.ax-hero__lede p { margin: 0; }
.ax-hero__actions { margin-top: var(--space-8); display: flex; gap: 30px; font-family: var(--font-meta); font-size: var(--text-xs); letter-spacing: var(--label-spacing); text-transform: uppercase; white-space: nowrap; }
.ax-hero__actions a { border: none; }

/* --- Hairline rule --- */
.ax-rule { height: 1px; background: var(--rule); border: none; margin: var(--space-14) 0; }
.ax-rule--tight { margin: var(--space-10) 0; }

/* --- Numbered index --- */
.ax-index { }
.ax-entry { display: grid; grid-template-columns: 52px 1fr; gap: var(--space-5); padding: var(--space-8) 0; border-bottom: 1px solid var(--border-faint); text-decoration: none; border-top: none; }
.ax-entry__num { font-family: var(--font-meta); font-size: var(--text-xs); color: var(--text-dim); padding-top: 10px; transition: var(--transition-color); }
.ax-entry__title { font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--text-3xl); line-height: 1.16; color: var(--text); transition: var(--transition-color); }
.ax-entry__title .arrow { font-family: var(--font-meta); font-size: 0.5em; color: var(--accent); margin-left: 12px; opacity: 0; transition: opacity var(--dur) var(--ease); }
.ax-entry__dek { font-family: var(--font-body); font-style: italic; font-weight: var(--weight-light); font-size: var(--text-lg); line-height: 1.5; color: var(--text-faint); margin-top: var(--space-2); max-width: 58ch; }
.ax-entry:hover .ax-entry__num { color: var(--accent); }
.ax-entry:hover .ax-entry__title { color: var(--text-bright); }
.ax-entry:hover .ax-entry__title .arrow { opacity: 1; }

/* --- Mono meta line --- */
.ax-meta { font-family: var(--font-meta); font-size: var(--text-xs); letter-spacing: var(--label-spacing); text-transform: uppercase; color: var(--text-dim); display: flex; flex-wrap: wrap; align-items: center; }
.ax-meta .sep { color: var(--accent); margin: 0 8px; }
.ax-entry__meta { margin-top: var(--space-3); font-size: var(--text-2xs); }

/* --- Tags --- */
.ax-tags { display: flex; gap: 16px; flex-wrap: wrap; }
.ax-tag { font-family: var(--font-meta); font-size: var(--text-xs); letter-spacing: var(--label-spacing); text-transform: lowercase; color: var(--accent); text-decoration: none; border: none; white-space: nowrap; }
.ax-tag .h { opacity: 0.55; }
.ax-tag:hover { color: var(--accent-hover); }

/* --- Article header --- */
.ax-article__title { font-family: var(--font-display); font-size: var(--display-lg); line-height: 1.02; letter-spacing: var(--tracking-tight); color: var(--text-bright); margin: 0 0 var(--space-6); text-wrap: balance; }

/* --- Next entry --- */
.ax-next { display: flex; align-items: baseline; gap: 14px; }
.ax-next__num { font-family: var(--font-meta); font-size: var(--text-xs); color: var(--text-dim); }
.ax-next__title { font-family: var(--font-display); font-size: var(--text-3xl); color: var(--text); }
.ax-next__title a { border: none; }

/* --- Subscribe line --- */
.ax-subscribe { font-family: var(--font-body); font-size: var(--text-lg); color: var(--text-muted); }
.ax-subscribe form { display: inline; }
.ax-subscribe input {
  font-family: var(--font-meta); font-size: var(--text-sm); color: var(--text); background: transparent;
  border: none; border-bottom: 1px solid var(--border); outline: none; padding: 2px 2px 4px; width: 220px;
}
.ax-subscribe input:focus { border-bottom-color: var(--accent); }
.ax-subscribe button {
  font-family: var(--font-meta); font-size: var(--text-xs); letter-spacing: var(--label-spacing);
  text-transform: uppercase; color: var(--accent); background: none; border: none; cursor: pointer;
  margin-left: 14px; padding: 0;
}

/* --- Footer --- */
.ax-foot { margin-top: var(--space-16); padding-top: var(--space-6); border-top: 1px solid var(--rule); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-family: var(--font-meta); font-size: var(--text-xs); letter-spacing: var(--label-spacing); text-transform: uppercase; color: var(--text-dim); }
.ax-foot a { color: var(--text-dim); border: none; text-decoration: none; }
.ax-foot a:hover { color: var(--accent); }
.ax-foot__links { display: flex; gap: 24px; }

/* Article prose figures already styled by base.css (figure/figcaption). */