/* =========================================================
   FYRA — Hugo changelog theme stylesheet.
   Trimmed from fyra-modern/style.css.
   ========================================================= */

/* ─── Bundled web fonts (Arimo/Tinos/Cousine, SIL OFL) ───
   Metric-compatible substitutes for Tahoma/Arial, Times/Georgia,
   and Courier New. Bundled locally so the page renders identically
   on Windows, macOS, and Linux without depending on system fonts.
*/
@font-face {
  font-family: "Arimo";
  src: url("fonts/arimo-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Arimo";
  src: url("fonts/arimo-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Arimo";
  src: url("fonts/arimo-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Arimo";
  src: url("fonts/arimo-700-italic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Tinos";
  src: url("fonts/tinos-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Tinos";
  src: url("fonts/tinos-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Tinos";
  src: url("fonts/tinos-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Tinos";
  src: url("fonts/tinos-700-italic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Cousine";
  src: url("fonts/cousine-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cousine";
  src: url("fonts/cousine-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cousine";
  src: url("fonts/cousine-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Cousine";
  src: url("fonts/cousine-700-italic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
/* ─── Reset ─────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  min-width: 0;
  border-width: 0;
  border-style: solid;
}
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, pre { margin: 0; }
img, video, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
[hidden] { display: none !important; }
html { color-scheme: light; scroll-behavior: smooth; }
html.theme-night { color-scheme: dark; }

/* ─── Design Tokens ─────────────────────────────── */
:root {
  /* Spacing */
  --space-xs: .25rem;
  --space-s:  .5rem;
  --space-m:  1rem;
  --space-l:  1.5rem;
  --space-xl: 2rem;
  --space-xxl: 3rem;
  --container-max: 1180px;
  --container-narrow: 820px;

  /* Type scale (fluid) */
  --text-s:  clamp(.78rem, .76rem + .1vw,  .84rem);
  --text-m:  clamp(.88rem, .85rem + .15vw, .96rem);
  --text-l:  clamp(1.1rem,  1rem + .35vw,  1.3rem);
  --text-xl: clamp(1.35rem, 1.2rem + .6vw,  1.65rem);
  --text-xxl: clamp(2.05rem, 1.5rem + 2vw, 3rem);

  /* Typography roles — bundled fonts first, system fonts as fallback */
  --font-brand:     "Tinos", Georgia, "Times New Roman", "Liberation Serif", "DejaVu Serif", serif;
  --font-tagline:   "Arimo", Verdana, "Liberation Sans", "DejaVu Sans", Arial, Helvetica, sans-serif;
  --font-ui:        "Arimo", Tahoma, Geneva, "Liberation Sans", "DejaVu Sans", Arial, Helvetica, sans-serif;
  --font-copy:      "Arimo", Arial, "Liberation Sans", "DejaVu Sans", Helvetica, sans-serif;
  --font-mail:      "Arimo", Verdana, "Liberation Sans", "DejaVu Sans", Arial, Helvetica, sans-serif;
  --font-mono:      "Cousine", "Courier New", "SF Mono", "Liberation Mono", "DejaVu Sans Mono", Courier, monospace;
  --font-academic:  "Tinos", Georgia, "Times New Roman", "Liberation Serif", "DejaVu Serif", serif;
  --font-technical: "Cousine", "Courier New", "Liberation Mono", "DejaVu Sans Mono", Courier, monospace;

  /* ─── LIGHT (DAY CONSOLE) PALETTE ─── */
  --desktop:    #5f5a66;
  --panel:      #d3cabd;
  --panel-soft: #ece5da;
  --panel-warm: #e4d8c4;
  --titlebar:   #c9c0b3;
  --tab-active: #C2BAAD;
  --shell-flash-empty: var(--panel-soft);
  /*--paper:      #ffffff;*/
  --paper: #fffefa;
  --paper-warm: #f8f4ff;

  --ink:        #000000;
  --muted:      #54514c;
  --disabled:   #888178;

  --highlight:  #fffdf5;
  --shadow:     #7d786f;
  --shadow-dk:  #3f3a34;

  --selected:      #9a3412;
  --selected-text: #ffffff;
  --selected-inactive:      #bdb7ad;
  --selected-inactive-text: #000000;
  --cool:          #ea580c;
  --cool-soft:     #ffedd5;
  --chrome-blue:   #c2410c;

  --link:    #0000ee;
  --visited: #551a8b;
  --link-hover: #f1e9ff;
  --prefs-dot: #e5ddd2;

  --help:       #ffffcc;
  --ok:         #d9eed0;
  --warn:       #ffe6ce;
  --error:      #ffd6d6;
  --error-ink:  #a00000;
  --ok-ink:     #255b22;
  --warn-ink:   #6d4300;

  --unread:        #ffedd5;
  --reply-bg:      #fff7ed;
  --status-online: #9cedb9;
  --status-away:   #ffe151;
  --status-busy:   #ff9c9c;
  --bubble:        #ffff9c;
  --folder:        #f0d878;
  --scroll-track:  #e5ddd2;
  --scroll-thumb:  #bdb7ad;

  /* ─── BEVEL SYSTEM (the heart of the look) ─── */
  --bevel-out: inset 1px 1px 0 var(--highlight),
               inset -1px -1px 0 var(--shadow);
  --bevel-in:  inset 1px 1px 0 var(--shadow),
               inset -1px -1px 0 var(--highlight);
  --lift: 2px 2px 0 rgba(0,0,0,.2);

  /* Brand mark palette */
  --brand-ink:       #c2410c;
  --brand-net:       #7c2d12;
  --brand-rule-blue: #f97316;
  --brand-rule-violet: #fb923c;
  --brand-rule-pink: #fdba74;

  /* Aliases for legacy var names */
  --line: var(--shadow);
  --surface: var(--panel-soft);
  --danger: var(--error-ink);
  --mono: var(--font-mono);
  --font-body: var(--font-copy);
  --ink-soft: var(--muted);
  --tab: var(--panel);
}

/* ─── Night console (dark) ─────────────────────── */
:is(html.theme-night, body.theme-night),
body:has(#night-console-toggle:checked) {
  --edge-hi: #665f57;
  --edge-lo: #080706;
  --frame-edge: #81776d;
  --frame-edge-soft: #615951;

  --desktop:    #242229;
  --panel:      #36322f;
  --panel-soft: #282622;
  --panel-warm: #332d26;
  --titlebar:   #312d2a;
  --tab-active: #2a2624;
  --paper: #282118;
/*  --paper:      #11100f;
 */
  --paper-warm: #17141c;

  --ink:        #ded6cb;
  --muted:      #aaa196;
  --disabled:   #746d64;

  --highlight:  #645f59;
  --shadow:     #4a4641;
  --shadow-dk:  #080706;

  --selected:      #d4a04a;
  --selected-text: #1a1208;
  --selected-inactive:      #5b544d;
  --selected-inactive-text: #eee7dc;
  --cool:          #e8b85a;
  --cool-soft:     #3a2e15;
  --chrome-blue:   #8a6928;

  --link:    #7fb4ff;
  --visited: #bd99e6;
  --link-hover: #2c2636;
  --prefs-dot: #24211d;

  --help:       #302d17;
  --ok:         #1d3a24;
  --warn:       #382817;
  --error:      #442020;
  --error-ink:  #ff9c9c;
  --ok-ink:     #9bd18e;
  --warn-ink:   #ffd37a;

  --unread:        #3a2e15;
  --reply-bg:      #3a2e15;
  --status-online: #46a060;
  --status-away:   #b39e32;
  --status-busy:   #b85d5d;
  --bubble:        #363016;
  --folder:        #6f6424;
  --scroll-track:  #181513;
  --scroll-thumb:  #615951;

  --bevel-out: inset 1px 1px 0 var(--edge-hi),
               inset -1px -1px 0 var(--edge-lo);
  --bevel-in:  inset 1px 1px 0 var(--edge-lo),
               inset -1px -1px 0 var(--edge-hi);
  --lift: 2px 2px 0 rgba(0,0,0,.55);

  --brand-ink: #f0d088;
  --brand-net: #d4a04a;
  --brand-rule-blue: #b8842b;
  --brand-rule-violet: #d4a04a;
  --brand-rule-pink: #f0d088;
}

/* ─── Body ──────────────────────────────────────── */
body {
  font-family: var(--font-ui);
  font-size: var(--text-m);
  line-height: 1.5;
  color: var(--ink);
  background: var(--desktop);
  overflow-wrap: break-word;
  min-height: 100svh;
}

h1, h2, h3, h4 { font-weight: 700; line-height: 1.2; }
h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-l); }
h3 {
  font-size: var(--text-s);
  text-transform: uppercase;
  letter-spacing: .035em;
  color: var(--muted);
}

p {
  font-family: var(--font-copy);
}

small, .meta { font-size: var(--text-s); color: var(--muted); }

a { color: var(--link); text-decoration: underline; }
a:visited { color: var(--visited); }
.client a:hover { background: var(--link-hover); }
a:focus-visible { outline: 1px dotted var(--ink); outline-offset: 2px; }

hr {
  border: 0;
  border-top: 1px solid var(--shadow);
  border-bottom: 1px solid var(--highlight);
  height: 2px;
  margin-block: var(--space-m);
}

code, kbd, samp { font-family: var(--font-mono); font-size: .95em; }
/*
code {
  background: var(--panel-soft);
  padding: 0 2px;
}
*/

code { font-family: var(--font-mono); font-weight: 700; color: var(--selected); background: var(--cool-soft); padding: 1px 5px; border: 1px solid var(--shadow); } 

pre {
  font-family: var(--font-mono);
  font-size: var(--text-s);
  padding: var(--space-m);
  background: var(--paper);
  border: 1px solid var(--shadow);
  box-shadow: var(--bevel-in);
  overflow-x: auto;
}
pre code { background: none; padding: 0; }

kbd {
  display: inline-block;
  min-width: 1.5em;
  padding: 0 4px;
  background: var(--panel);
  border: 1px solid var(--shadow-dk);
  box-shadow: var(--bevel-out);
  text-align: center;
  font-family: var(--font-mono);
  font-size: .82em;
  line-height: 1.4;
  color: var(--ink);
  margin: 0 1px;
}

/* ─── Application Shell ─────────────────────────── */
.shell {
  background: var(--panel);
  border: 1px solid var(--shadow-dk);
  box-shadow: var(--bevel-out);
}

/* ─── Menubar (top nav) ─────────────────────────── */
.menubar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 2px 4px;
  background: var(--panel);
  border-bottom: 1px solid var(--shadow);
  font-size: var(--text-s);
}
.menubar a {
  padding: 2px 8px;
  color: var(--ink);
  text-decoration: none;
  cursor: default;
}
.menubar a:hover { background: var(--selected); color: var(--selected-text); }
.menubar a[aria-current="page"] {
  background: var(--selected);
  color: var(--selected-text);
}
.menubar .info {
  margin-left: auto;
  padding: 2px 8px;
  color: var(--muted);
  font-family: var(--font-mono);
}
.menubar .spacer { flex: 1 1 auto; }

/* GitHub mark inside menubar */
.menubar .menubar-icon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
}
.menubar .menubar-icon:hover { color: var(--ink); background: transparent; }
.menubar .menubar-icon svg { display: block; }

/* Logo wordmark inside menubar */
.menubar-logo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  font-family: var(--font-brand);
  font-style: italic;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -.04em;
  color: var(--selected);
  text-decoration: none;
}
.menubar-logo:hover { background: transparent; color: var(--selected); }
.menubar-logo img { height: 22px; width: auto; }

/* Nav CTA (Pricing button) */
.menubar .nav-cta {
  background: var(--panel-soft);
  border: 1px solid var(--shadow-dk);
  box-shadow: var(--bevel-out);
  margin-left: 4px;
}
.menubar .nav-cta:hover { background: var(--paper-warm); color: var(--ink); }
.menubar .nav-cta[aria-current="page"] {
  background: var(--selected);
  color: var(--selected-text);
  border-color: var(--shadow-dk);
}

/* Theme toggle */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 0;
  padding: 2px 8px;
  color: var(--muted);
  font-weight: 400;
  white-space: nowrap;
  cursor: default;
}
.theme-toggle input { margin: 0 2px 0 0; }

.tagline {
  font-family: var(--font-tagline);
  color: var(--muted);
  font-size: var(--text-s);
  margin-top: 4px;
}
.masthead-intro {
  margin-top: var(--space-l);
  font-size: var(--text-m);
  color: var(--ink);
  max-width: 68ch;
}

/* ─── Client (main content area) ────────────────── */
.client {
  padding: var(--space-xl);
  background: var(--paper);
}
.client-narrow { max-width: var(--container-narrow); margin-inline: auto; }
.client-wide { max-width: var(--container-max); margin-inline: auto; }

/* ─── Buttons ───────────────────────────────────── */
button, .button {
  display: inline-block;
  padding: 3px 14px;
  min-height: 24px;
  background: var(--panel);
  border: 1px solid var(--shadow-dk);
  border-radius: 0;
  box-shadow: var(--bevel-out);
  color: var(--ink);
  cursor: default;
  text-decoration: none;
  font-size: var(--text-s);
  line-height: 1.4;
}
button:visited, .button:visited { color: var(--ink); }
button:hover, .button:hover { background: var(--panel-soft); }
button:active, .button:active {
  box-shadow: var(--bevel-in);
  padding: 4px 13px 2px 15px;
}
button:focus-visible, .button:focus-visible {
  outline: 1px dotted var(--ink);
  outline-offset: -4px;
}
button.default, .button.default {
  border-width: 2px;
  padding: 2px 13px;
}
button:disabled, button[aria-disabled="true"] {
  color: var(--disabled);
  text-shadow: 1px 1px 0 var(--highlight);
  cursor: default;
}

/* ─── Tag / chip ────────────────────────────────── */
.tag {
  display: inline-block;
  padding: 0 6px;
  background: var(--panel);
  border: 1px solid var(--shadow);
  box-shadow: var(--bevel-out);
  font-size: var(--text-s);
  color: var(--ink);
  line-height: 1.5;
}
.tag.warm   { background: var(--paper-warm); }
.tag.muted  { background: var(--panel-soft); color: var(--muted); }
.tag.new    { background: var(--status-away); color: var(--ink); }
.tag.ok     { background: var(--ok); color: var(--ok-ink); }
.tag.featured { background: var(--selected); color: var(--selected-text); }
.tag.dim    { opacity: .55; }

/* ─── Pager ─────────────────────────────────────── */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  font-size: var(--text-s);
}
.pager a, .pager span {
  display: inline-block;
  min-width: 24px;
  padding: 2px 6px;
  background: var(--panel);
  border: 1px solid var(--shadow);
  box-shadow: var(--bevel-out);
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  cursor: default;
}
.pager a:hover { background: var(--panel-soft); }
.pager .current {
  background: var(--selected);
  color: var(--selected-text);
  box-shadow: var(--bevel-in);
}

/* ─── Notice / callout ──────────────────────────── */
.notice, .callout {
  margin-bottom: var(--space-m);
  padding: var(--space-m);
  background: var(--paper-warm);
  border: 1px solid var(--shadow);
  box-shadow: var(--bevel-in);
  font-size: var(--text-s);
}
.notice p, .callout p { margin-bottom: var(--space-s); }
.notice p:last-child, .callout p:last-child { margin-bottom: 0; }
.notice strong, .callout strong { color: var(--selected); }
.notice.help { background: var(--help); }
.notice.ok   { background: var(--ok); color: var(--ok-ink); }
.notice.warn { background: var(--warn); color: var(--warn-ink); }
.notice.error{ background: var(--error); color: var(--error-ink); }

/* ─── Tables ────────────────────────────────────── */
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  font-size: var(--text-s);
  border: 1px solid var(--shadow);
  box-shadow: var(--bevel-in);
}
th, td {
  padding: 4px 8px;
  text-align: left;
  vertical-align: top;
}
thead th {
  background: var(--panel-soft);
  border-bottom: 1px solid var(--shadow);
  font-weight: 700;
  color: var(--ink);
}
tbody tr + tr td, tbody tr + tr th { border-top: 1px solid var(--panel-soft); }
tbody tr:hover td { background: var(--paper-warm); }
.cell-check { color: var(--ok-ink); font-family: var(--font-mono); font-weight: 700; }
.cell-dash  { color: var(--disabled); font-family: var(--font-mono); }
.cell-accent { color: var(--selected); font-family: var(--font-mono); font-weight: 700; }
.cell-val { font-family: var(--font-mono); color: var(--muted); }
/* ─── Custom scrollbars in app panes only ───────── */
.app-pane, .terminal-body, .log-viewer {
  scrollbar-width: auto;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}
.app-pane::-webkit-scrollbar { width: 16px; height: 16px; }
/* ─── Page header (eyebrow + h1 + intro) ────────── */
.page-header {
  margin-bottom: var(--space-xl);
}
.page-eyebrow {
  display: inline-block;
  padding: 1px 6px;
  margin-bottom: var(--space-s);
  background: var(--selected);
  color: var(--selected-text);
  font-family: var(--font-ui);
  font-size: var(--text-s);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.page-h1 {
  font-family: var(--font-brand);
  font-style: italic;
  font-weight: 700;
  font-size: var(--text-xxl);
  line-height: .95;
  letter-spacing: -.04em;
  color: var(--ink);
  margin-bottom: var(--space-m);
}
.page-h1 em {
  font-style: italic;
  color: var(--selected);
}
.page-intro {
  font-size: var(--text-m);
  color: var(--muted);
  max-width: 60ch;
}

/* ─── Section labels ────────────────────────────── */
.section-label {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  margin-bottom: var(--space-l);
  font-family: var(--font-ui);
  font-size: var(--text-s);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
}
.section-label::after {
  content: "";
  flex: 1;
  height: 2px;
  border-top: 1px solid var(--shadow);
  border-bottom: 1px solid var(--highlight);
}

/* ─── Card grid ─────────────────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--space-m);
}
.card {
  background: var(--panel-soft);
  border: 1px solid var(--shadow);
  box-shadow: var(--bevel-out);
  padding: var(--space-l);
}
.card-title {
  font-family: var(--font-ui);
  font-size: var(--text-l);
  font-weight: 700;
  margin-bottom: var(--space-xs);
}
.card-num {
  display: inline-block;
  padding: 1px 6px;
  margin-right: 6px;
  background: var(--selected);
  color: var(--selected-text);
  font-family: var(--font-mono);
  font-size: var(--text-s);
  font-weight: 700;
  letter-spacing: .04em;
}
.card-body { color: var(--muted); font-size: var(--text-m); }

/* ─── Terminal block ────────────────────────────── */
.terminal {
  background: var(--paper);
  border: 1px solid var(--shadow-dk);
  box-shadow: var(--bevel-out), var(--lift);
  font-family: var(--font-mono);
  font-size: var(--text-s);
  color: var(--ink);
  margin-block: var(--space-m);
}
.terminal-title {
  padding: 2px 24px 4px;
  border-bottom: 1px solid var(--shadow);
  background:
    linear-gradient(to bottom,
      var(--highlight) 0 1px,
      var(--panel-soft) 1px 2px,
      var(--titlebar)   2px 100%),
    var(--titlebar);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--text-s);
  color: var(--ink);
  position: relative;
}
.terminal-title::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px; bottom: 1px;
  height: 2px;
  border-top: 1px solid var(--shadow);
  border-bottom: 1px solid var(--highlight);
  background: var(--panel-soft);
}
.terminal-body {
  padding: var(--space-m);
  overflow-x: auto;
  white-space: pre;
  line-height: 1.5;
  background: var(--paper);
}
.terminal-body .prompt { color: var(--selected); font-weight: 700; }
.terminal-body .cmd    { color: var(--ink); }
.terminal-body .out    { color: var(--muted); }
.terminal-body .ok     { color: var(--ok-ink); font-weight: 700; }
.terminal-body .err    { color: var(--error-ink); font-weight: 700; }
.terminal-body .cmt    { color: var(--muted); font-style: italic; }

/* Inline command + copy button */
.cmd-line {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--paper);
  border: 1px solid var(--shadow-dk);
  box-shadow: var(--bevel-in);
}
.cmd-line .cmd-prompt {
  padding: 6px 8px;
  background: var(--panel);
  border-right: 1px solid var(--shadow);
  box-shadow: inset 1px 1px 0 var(--highlight);
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--selected);
}
.cmd-line .cmd-text {
  flex: 1 1 auto;
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--ink);
  overflow-x: auto;
  white-space: nowrap;
}
.cmd-line .cmd-copy {
  border: 0;
  border-left: 1px solid var(--shadow);
  padding: 6px 12px;
  background: var(--panel);
  box-shadow: var(--bevel-out);
  font-family: var(--font-ui);
  font-size: var(--text-s);
  color: var(--ink);
  cursor: default;
}
.cmd-line .cmd-copy:hover { background: var(--panel-soft); }
.cmd-line .cmd-copy:active { box-shadow: var(--bevel-in); }

/* ─── Articles / docs ───────────────────────────── */
.article {
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--shadow);
}
.article:last-child { border-bottom: 0; }
.article-eyebrow {
  display: inline-block;
  padding: 1px 6px;
  margin-bottom: var(--space-s);
  background: var(--selected);
  color: var(--selected-text);
  font-size: var(--text-s);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.article h2 {
  font-family: var(--font-ui);
  font-size: var(--text-xl);
  margin-bottom: var(--space-s);
}
.article h3 {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--text-m);
  color: var(--ink);
  margin-top: var(--space-l);
  margin-bottom: var(--space-xs);
}
.article p {
  font-size: var(--text-m);
  color: var(--ink);
  line-height: 1.7;
  margin-bottom: var(--space-m);
}
.article p:last-child { margin-bottom: 0; }
.article strong { color: var(--selected); font-weight: 700; }
.article ul, .article ol {
  margin: 0 0 var(--space-m);
  padding-left: 1.5em;
}
.article ul li, .article ol li {
  font-size: var(--text-m);
  color: var(--ink);
  line-height: 1.7;
  margin-bottom: var(--space-xs);
}
.article ul li::marker { color: var(--selected); }
.article code {
  font-family: var(--font-mono);
  background: var(--panel-soft);
  padding: 0 4px;
  font-size: .95em;
}

/* ─── Hero (index only) ─────────────────────────── */
.hero {
  padding: var(--space-xl) 0;
  text-align: left;
}
.hero-eyebrow {
  display: inline-block;
  padding: 2px 8px;
  margin-bottom: var(--space-m);
  background: var(--selected);
  color: var(--selected-text);
  font-family: var(--font-ui);
  font-size: var(--text-s);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.hero h1 {
  font-family: var(--font-brand);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2.6rem, 1.5rem + 5vw, 4.5rem);
  line-height: .92;
  letter-spacing: -.05em;
  margin-bottom: var(--space-m);
  color: var(--ink);
}
.hero h1 em { color: var(--selected); }
.hero p {
  font-size: var(--text-m);
  color: var(--muted);
  max-width: 60ch;
  margin-bottom: var(--space-l);
}
.hero .hero-subdomain {
  display: inline-block;
  padding: 4px 10px;
  background: var(--paper);
  border: 1px solid var(--shadow);
  box-shadow: var(--bevel-in);
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--muted);
  margin-top: var(--space-s);
}
.hero .hero-subdomain .accent,
.hero .hero-subdomain .suffix-item { color: var(--selected); }

/* Rotating subdomain suffix — vertical slide mechanism */
/* ─── 404 page ──────────────────────────────────── */
.error-404 {
  text-align: center;
  padding: var(--space-xxl) var(--space-m);
}
.error-code {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(5rem, 18vw, 11rem);
  line-height: 1;
  letter-spacing: -.06em;
  color: var(--selected);
}
.error-message {
  font-family: var(--font-mono);
  font-size: var(--text-m);
  color: var(--muted);
  margin-top: var(--space-m);
  max-width: 480px;
  margin-inline: auto;
}

/* ─── Responsive ────────────────────────────────── */
@media (max-width: 860px) {
  .client { padding: var(--space-l); }
  .masthead { padding: var(--space-l); }
  .docs-layout { grid-template-columns: 1fr; }
  .docs-toc { position: static; }
  .upgrade-block { grid-template-columns: 1fr; }
  .menubar { padding: 2px; }
  .menubar a { padding: 2px 6px; }
  .menubar .info { display: none; }
}

@media (max-width: 600px) {
  .client { padding: var(--space-m); }
  .menubar { font-size: var(--text-s); }
  .menubar-logo { font-size: 1rem; }
  .hero h1 { font-size: clamp(2rem, 1.2rem + 6vw, 3rem); }
  .brand a { font-size: clamp(1.8rem, 1.2rem + 3vw, 2.6rem); }
}

/* ─── Reduced motion ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* =========================================================
   Changelog-specific styles (not in fyra-modern)
   ========================================================= */

/* ─── Post list ─────────────────────────────────── */
.post-list {
  list-style: none;
  padding: 0;
  margin: var(--space-xl) 0;
}
.post-list-item {
  padding: var(--space-l) 0;
  border-top: 1px solid var(--hairline, rgba(0,0,0,.08));
}
html.theme-night .post-list-item { border-color: var(--hairline, rgba(255,255,255,.1)); }
.post-list-item h3 {
  font-family: var(--font-brand);
  font-size: var(--text-xl);
  letter-spacing: -.02em;
  text-transform: none;
  margin: var(--space-xs) 0;
}
.post-list-item h3 a { color: var(--ink); text-decoration: none; }
.post-list-item h3 a:hover { color: var(--selected); }
.post-list-item time {
  font-family: var(--font-mono);
  font-size: var(--text-s);
  color: var(--muted);
}
.post-list-item p { color: var(--muted); margin-top: var(--space-xs); }

/* ─── Single post ───────────────────────────────── */
.post {
  padding: var(--space-xl) var(--space-m);
}
.post-header { margin-bottom: var(--space-xl); }
.post-header time {
  font-family: var(--font-mono);
  font-size: var(--text-s);
  color: var(--muted);
}
.post-header h1 {
  font-family: var(--font-brand);
  font-style: italic;
  font-weight: 700;
  font-size: var(--text-xxl);
  letter-spacing: -.04em;
  margin: var(--space-xs) 0;
  color: var(--ink);
}
.post-body { font-size: var(--text-m); line-height: 1.65; }
.post-body h2 {
  font-family: var(--font-brand);
  font-size: var(--text-xl);
  margin: var(--space-xl) 0 var(--space-s);
  letter-spacing: -.02em;
}
.post-body h3 {
  font-family: var(--font-brand);
  font-size: var(--text-l);
  margin: var(--space-l) 0 var(--space-s);
}
.post-body p { margin: var(--space-m) 0; }
.post-body ul, .post-body ol { margin: var(--space-m) 0; padding-left: 1.5em; }
.post-body li { margin: var(--space-xs) 0; }
.post-body code {
  font-family: var(--font-mono);
  font-size: .9em;
  background: rgba(0,0,0,.05);
  padding: 1px 6px;
  border-radius: 3px;
}
html.theme-night .post-body code { background: rgba(255,255,255,.08); }
.post-body pre {
  font-family: var(--font-mono);
  padding: var(--space-m);
  overflow-x: auto;
  margin: var(--space-m) 0;
  background: rgba(0,0,0,.04);
  border-radius: 6px;
}
html.theme-night .post-body pre { background: rgba(255,255,255,.05); }
.post-body pre code { background: none; padding: 0; }
.post-body a { color: var(--selected); }

/* ─── Hairline token (used by borders) ──────────── */
:root { --hairline: rgba(0,0,0,.08); }
html.theme-night { --hairline: rgba(255,255,255,.1); }

/* ─── Statusbar (bottom, browser-window style) ─── */
.statusbar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 4px;
  padding: 3px 4px;
  background: var(--panel);
  border-top: 1px solid var(--highlight);
  font-size: var(--text-s);
  color: var(--muted);
}
.statusbar .cell {
  padding: 1px 8px;
  background: var(--panel);
  box-shadow: var(--bevel-in);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.statusbar .cell.grow { flex: 1 1 auto; min-width: 0; }
.statusbar .cell.online::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 5px;
  background: var(--status-online);
  border: 1px solid var(--shadow-dk);
  vertical-align: -1px;
}
.statusbar .cell a { color: var(--link); text-decoration: none; }
.statusbar .cell a:hover { text-decoration: underline; }
.statusbar .gripper {
  align-self: center;
  width: 14px; height: 14px;
  margin-left: 2px;
  background: linear-gradient(135deg,
    transparent 0 28%, var(--highlight) 28% 35%, var(--shadow) 35% 42%,
    transparent 42% 55%, var(--highlight) 55% 62%, var(--shadow) 62% 69%,
    transparent 69% 82%, var(--highlight) 82% 89%, var(--shadow) 89% 96%,
    transparent 96%);
  cursor: se-resize;
}