/* =============================================================================
   haohu.org
   Tokens → base → layout → home → blog list → post → prose → charts → footer
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */

:root {
  --bg:          #fbfaf7;
  --bg-soft:     #f3f1ea;
  --bg-sunken:   #f0eee6;
  --text:        #17181b;
  --text-soft:   #3c3e44;
  --muted:       #6e6b64;
  --rule:        #e4e1d8;
  --rule-strong: #d5d1c5;
  --accent:      #1a365d;
  --accent-soft: rgba(26, 54, 93, 0.14);

  /* Categorical chart palette — read from JS via /assets/chart-theme.js */
  --chart-1: #1a365d;
  --chart-2: #bd6435;
  --chart-3: #35735f;
  --chart-4: #7d4f93;
  --chart-5: #a67c2e;
  --chart-6: #59636f;
  --chart-grid: #e0ddd3;
  --chart-axis: #8d8a82;

  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
             "Helvetica Neue", Arial, sans-serif;
  --font-serif: ui-serif, "Iowan Old Style", "Source Serif 4", Charter,
                Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --measure: 41rem;      /* main column */
  --gutter: 1.75rem;
  --radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #121316;
    --bg-soft:     #1a1b20;
    --bg-sunken:   #17181c;
    --text:        #e9e7e2;
    --text-soft:   #c8c5be;
    --muted:       #918d85;
    --rule:        #2a2b31;
    --rule-strong: #3a3b42;
    --accent:      #9cc0f5;
    --accent-soft: rgba(156, 192, 245, 0.18);

    --chart-1: #8fb6e8;
    --chart-2: #e29a6c;
    --chart-3: #6fbfa5;
    --chart-4: #c0a0d6;
    --chart-5: #e0bc72;
    --chart-6: #a3abb8;
    --chart-grid: #2e2f36;
    --chart-axis: #8a877f;
  }
}

/* -------------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: 2rem;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

::selection { background: var(--accent-soft); }

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-soft);
  transition: border-color 0.15s ease, color 0.15s ease;
}
a:hover { border-bottom-color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 0.6rem 1rem;
  background: var(--bg);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  z-index: 10;
}
.skip-link:focus { left: 1rem; top: 1rem; }

.sep { color: var(--muted); margin: 0 0.5rem; }
.dot { color: var(--muted); margin: 0 0.45rem; }

/* ------------------------------------------------------------------ layout */

.shell {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.site-main { flex: 1 0 auto; padding-block: 3.5rem 5rem; }
.page-home .site-main { padding-block: 5rem 5rem; }

/* header */

.site-header { padding-block: 1.2rem; }
.site-header .shell {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
}
.page-home .site-header .shell { justify-content: flex-end; }

.wordmark {
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  color: var(--text);
  border-bottom: none;
}
.wordmark:hover { color: var(--accent); }

.site-nav {
  display: flex;
  gap: 1.4rem;
  font-size: 0.9rem;
}
.site-nav a {
  color: var(--muted);
  border-bottom: none;
  padding-bottom: 2px;
}
.site-nav a:hover { color: var(--text); }
.site-nav a[aria-current="page"] {
  color: var(--text);
  box-shadow: inset 0 -1px 0 var(--rule-strong);
}

/* -------------------------------------------------------------------- home */

/* The front page is an identity page, not a reading page, so it gets a
   different layout from the articles: section labels sit in a left gutter and
   content runs in a column beside them. Below the breakpoint it collapses to
   the same single column as everything else. */

.page-home .site-main { padding-block: 2.25rem 4rem; }
.page-home .site-main > .shell { max-width: 44rem; }

.hero { margin-bottom: 2.25rem; }

.hero-name {
  font-size: clamp(2.75rem, 8vw, 3.75rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.032em;
  margin-bottom: 0.85rem;
}

.hero-tagline {
  font-size: clamp(1.15rem, 3vw, 1.35rem);
  line-height: 1.42;
  color: var(--text);
  max-width: 27ch;
  text-wrap: balance;
}

.hero-location {
  margin-top: 0.7rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.home-bio {
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--text-soft);
  max-width: 34rem;
}
.home-bio p + p { margin-top: 0.85rem; }

.home-section { margin-top: 3.25rem; }

.home-section .section-heading {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.75rem;
}

.more { margin-top: 1.1rem; font-size: 0.9rem; }
.more a { border-bottom: none; }
.more a:hover { border-bottom: 1px solid var(--accent); }

.empty { color: var(--muted); padding: 0.4rem 0; }

.link-list { list-style: none; }
.link-list li { padding: 0.6rem 0; border-bottom: 1px solid var(--rule); }
.link-list li:last-child { border-bottom: none; }
.link-note { display: block; color: var(--muted); font-size: 0.95rem; margin-top: 0.15rem; }

.now-line,
.contact-line {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-soft);
  max-width: 34rem;
}

/* One hairline per section, always the width of the content column, so every
   rule on the page lines up with every other. */
.home-section-body {
  border-top: 1px solid var(--rule);
  padding-top: 1.1rem;
}

/* Label-in-gutter. The content column keeps the same measure as an article,
   so every page on the site shares one text width, and the section labels hang
   out into the left margin. The breakpoint is where that margin is actually
   wide enough to hold a label without it running off the screen. */
@media (min-width: 70rem) {
  .home-section { position: relative; }

  .home-section .section-heading {
    position: absolute;
    right: calc(100% + 2.75rem);
    top: 1.05rem;
    width: 9rem;
    margin: 0;
    text-align: right;
    white-space: nowrap;
  }
}

/* The footer rule is part of the same column, not a separate full-width line. */
.page-home .site-header .shell,
.page-home .site-footer .shell {
  max-width: 44rem;
}

/* --------------------------------------------------------------- blog list */

.page-head { margin-bottom: 2.5rem; }

.page-title {
  font-size: clamp(2rem, 6vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.1;
}

.lede {
  margin-top: 0.7rem;
  font-size: 1.0625rem;
  color: var(--text-soft);
  text-wrap: pretty;
}

.page-head-meta { margin-top: 0.9rem; font-size: 0.9rem; color: var(--muted); }

.year {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin: 2.5rem 0 0.4rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
}
.year:first-child { margin-top: 0; }

.post-list { list-style: none; }

.card-link {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 0 1.25rem;
  align-items: baseline;
  padding: 1.1rem 0.9rem;
  margin-inline: -0.9rem;
  border-bottom: none;
  border-radius: var(--radius);
  color: inherit;
  transition: background-color 0.15s ease;
}
.card-link:hover { background: var(--bg-soft); border-bottom: none; }

.card-meta {
  font-size: 0.8rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-top: 0.28rem;
}

.card-title {
  display: block;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--text);
  text-wrap: balance;
}
.card-link:hover .card-title { color: var(--accent); }

.card-summary {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.975rem;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}

.card-foot {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.55rem;
  font-size: 0.78rem;
  color: var(--muted);
}
.card-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.card-time { margin-left: auto; font-variant-numeric: tabular-nums; }

.tag {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bg-sunken);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.12rem 0.5rem;
  line-height: 1.5;
}
.tag-draft { color: var(--accent); border-color: var(--accent-soft); }

.post-list-compact .card-summary { margin-top: 0.25rem; }
.post-list-compact .card-foot { display: none; }

@media (max-width: 34rem) {
  .card-link { grid-template-columns: 1fr; gap: 0.35rem; }
  .card-meta { padding-top: 0; }
}

/* -------------------------------------------------------------------- post */

.post-header { margin-bottom: 2.25rem; }

.post-meta {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.post-title {
  font-size: clamp(2rem, 6.5vw, 2.6rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.024em;
  text-wrap: balance;
}

.post-subtitle {
  margin-top: 0.85rem;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}

.draft-banner {
  margin-bottom: 1.75rem;
  padding: 0.7rem 0.95rem;
  font-size: 0.875rem;
  color: var(--text-soft);
  background: var(--bg-soft);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius);
}

.post-footer {
  margin-top: 3.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
}

.tag-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.75rem;
}

.prev-next {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.pn {
  display: block;
  padding: 0.85rem 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: inherit;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.pn:hover { border-color: var(--rule-strong); background: var(--bg-soft); }
.pn-next { text-align: right; }
.pn-label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.2rem;
}
.pn-title { display: block; font-size: 0.95rem; line-height: 1.4; font-weight: 500; }

.back { margin-top: 1.75rem; font-size: 0.95rem; }

@media (max-width: 34rem) {
  .prev-next { grid-template-columns: 1fr; }
  .pn-next { text-align: left; }
}

/* ------------------------------------------------------------------ prose */

.prose {
  font-family: var(--font-serif);
  font-size: 1.1875rem;
  line-height: 1.72;
  color: var(--text);
}

.prose > * + * { margin-top: 1.35rem; }

.prose h2,
.prose h3,
.prose h4 {
  font-family: var(--font-ui);
  letter-spacing: -0.015em;
  line-height: 1.25;
  scroll-margin-top: 2rem;
  position: relative;
}
.prose h2 { font-size: 1.5rem; font-weight: 600; margin-top: 3rem; }
.prose h3 { font-size: 1.2rem; font-weight: 600; margin-top: 2.25rem; }
.prose h4 { font-size: 1.05rem; font-weight: 600; margin-top: 1.85rem; color: var(--text-soft); }

.anchor {
  position: absolute;
  left: -1.1em;
  border-bottom: none;
  color: var(--rule-strong);
  opacity: 0;
  transition: opacity 0.15s ease;
  font-weight: 400;
}
.prose h2:hover .anchor,
.prose h3:hover .anchor,
.anchor:focus-visible { opacity: 1; }
@media (max-width: 52rem) { .anchor { display: none; } }

.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li + li { margin-top: 0.4rem; }
.prose li::marker { color: var(--muted); }

.prose blockquote {
  border-left: 2px solid var(--rule-strong);
  padding-left: 1.2rem;
  color: var(--text-soft);
  font-style: italic;
}

.prose hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin-block: 2.75rem;
}

.prose strong { font-weight: 650; }

.prose code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--bg-sunken);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}

.prose pre {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.6;
  background: var(--bg-sunken);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  overflow-x: auto;
}
.prose pre code { background: none; border: none; padding: 0; font-size: inherit; }

.prose img { max-width: 100%; height: auto; border-radius: var(--radius); display: block; }

.prose figure { margin-block: 2.25rem; }
.prose figcaption {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 0.7rem;
  text-wrap: pretty;
}

/* footnotes (GFM-style, if you add them by hand) */
.prose .footnotes {
  font-size: 0.95rem;
  color: var(--text-soft);
  border-top: 1px solid var(--rule);
  padding-top: 1.25rem;
  margin-top: 3rem;
}

/* callout: <div class="note"> … </div> */
.note {
  font-family: var(--font-ui);
  font-size: 0.975rem;
  line-height: 1.6;
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
}
.note > * + * { margin-top: 0.6rem; }

/* tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prose table {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  border-collapse: collapse;
  width: 100%;
  min-width: 28rem;
}
.prose th, .prose td {
  text-align: left;
  padding: 0.6rem 0.85rem 0.6rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.prose th {
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom-color: var(--rule-strong);
}
.prose td { font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------- charts */

/* <figure class="chart"> … </figure>
   Add class="wide" to break out of the reading measure. */
.chart {
  font-family: var(--font-ui);
  margin-block: 2.5rem;
}
.chart > svg,
.chart > .chart-canvas,
.chart > canvas {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.chart-title {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-bottom: 0.15rem;
}
.chart-subtitle {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.9rem;
  text-wrap: pretty;
}
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  font-size: 0.82rem;
  color: var(--text-soft);
  margin-bottom: 0.85rem;
}
.chart-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.chart-legend i {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 2px;
  background: currentColor;
  flex: none;
}
.chart-source {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 0.55rem;
}
/* axes / gridlines for hand-rolled SVG */
.chart .grid line, .chart .grid path { stroke: var(--chart-grid); stroke-width: 1; }
.chart .axis line, .chart .axis path { stroke: var(--chart-axis); }
.chart .axis text, .chart .tick text {
  fill: var(--muted);
  font-size: 11px;
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
}

/* full-width breakout, centred, capped */
.wide {
  width: min(100vw - 2 * var(--gutter), 58rem);
  margin-inline: calc(50% - min(50vw - var(--gutter), 29rem));
}

/* -------------------------------------------------------------- interactive */

.chart-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
  font-size: 0.85rem;
}
.chart-controls button {
  font: inherit;
  font-family: var(--font-ui);
  color: var(--text-soft);
  background: var(--bg);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: 0.22rem 0.75rem;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.chart-controls button:hover { background: var(--bg-soft); }
.chart-controls button[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
.chart-controls input[type="range"] { accent-color: var(--accent); }

.chart-tooltip {
  position: absolute;
  pointer-events: none;
  z-index: 5;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  line-height: 1.4;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.09);
  padding: 0.4rem 0.6rem;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.1s ease;
}
.chart-tooltip[data-show="true"] { opacity: 1; }

/* ------------------------------------------------------- long-read UI */

/* The kicker: a slim sticky bar that names the section you are in and opens
   into the full contents. One component at every width.
   Deliberately NOT using overscroll-behavior here, and the script never calls
   scrollIntoView — both hijack the page scroll when the panel is not itself
   overflowing. */

.kicker {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  transform: translateY(-101%);
  transition: transform 0.22s ease;
}
.kicker[data-shown="true"] { transform: none; }

.kicker-progress { height: 2px; }
.kicker-progress > i {
  display: block;
  height: 100%;
  background: var(--accent);
  opacity: 0.85;
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.kicker-bar {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.kicker-toggle {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.62rem 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  line-height: 1.3;
  color: var(--muted);
}
.kicker-label {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  flex: none;
  max-width: 38%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kicker-sep { opacity: 0.4; flex: none; }
.kicker-section {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-soft);
}
.kicker-caret {
  width: 10px;
  height: 6px;
  flex: none;
  transition: transform 0.15s ease;
}
.kicker-toggle[aria-expanded="true"] .kicker-caret { transform: rotate(180deg); }

.kicker-panel {
  border-top: 1px solid var(--rule);
  max-height: min(62vh, 28rem);
  overflow-y: auto;
  background: var(--bg);
  box-shadow: 0 12px 24px -18px rgba(0, 0, 0, 0.4);
}
.kicker-panel ol {
  list-style: none;
  max-width: var(--measure);
  margin-inline: auto;
  padding: 0.5rem var(--gutter) 1rem;
}
.kicker-panel a {
  display: grid;
  grid-template-columns: 1.7rem 1fr;
  gap: 0.45rem;
  align-items: baseline;
  padding: 0.42rem 0;
  border-bottom: none;
  font-family: var(--font-ui);
  font-size: 0.925rem;
  line-height: 1.4;
  color: var(--text-soft);
  text-wrap: pretty;
}
.kicker-panel a:hover { color: var(--accent); }
.kicker-panel a[aria-current="true"] { color: var(--text); font-weight: 600; }
.kicker-panel a[aria-current="true"] .kick-n { color: var(--accent); }
.kick-n {
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

/* Headings must clear the sticky bar when an anchor is followed. */
html { scroll-padding-top: 4.25rem; }

@media (prefers-reduced-motion: reduce) {
  .kicker { transition: none; }
}

/* A paragraph that is nothing but a bold statement is a beat in the argument,
   not body copy. Set it as one so the eye has somewhere to rest. */
.prose p:has(> strong:only-child) {
  font-family: var(--font-ui);
  font-size: 1.1rem;
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--text);
  border-left: 3px solid var(--accent);
  padding-left: 1.15rem;
  margin-block: 2.25rem;
}
.prose p:has(> strong:only-child) > strong { font-weight: 600; }

/* -------------------------------------------------------------- subscribe */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.subscribe {
  margin-top: 3.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-ui);
}
.post-footer + .subscribe,
.subscribe + .post-footer { border-top: none; }

.subscribe-head {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.subscribe-note {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-soft);
  text-wrap: pretty;
}

.subscribe-form {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.9rem;
  max-width: 26rem;
}
.subscribe-form input[type="email"] {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 0.95rem;
  padding: 0.5rem 0.7rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--rule-strong);
  border-radius: 7px;
}
.subscribe-form input[type="email"]::placeholder { color: var(--muted); opacity: 0.8; }
.subscribe-form input[type="email"]:focus-visible { border-color: var(--accent); }

.subscribe-form button {
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  color: var(--bg);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 7px;
  cursor: pointer;
  flex: none;
  transition: opacity 0.15s ease;
}
.subscribe-form button:hover { opacity: 0.88; }
.subscribe-form button:disabled { opacity: 0.5; cursor: default; }

/* The honeypot must be reachable by a bot parsing the DOM and invisible and
   unfocusable to everyone else — so not display:none, which some bots skip. */
.subscribe-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.subscribe-status:not(:empty) {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  color: var(--text-soft);
}
.subscribe-status[data-error="true"] { color: var(--chart-2); }

.subscribe-alt {
  margin-top: 0.7rem;
  font-size: 0.85rem;
  color: var(--muted);
}

@media (max-width: 30rem) {
  .subscribe-form { flex-direction: column; }
  .subscribe-form button { width: 100%; }
}

/* ----------------------------------------------------------------- footer */

.site-footer {
  flex: none;
  padding-block: 2rem 3rem;
  font-size: 0.875rem;
  color: var(--muted);
}
.site-footer .shell {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-top: 1.5rem;
  position: relative;
}
/* The rule is inset to the gutter so it lines up with the content column
   rather than the padded box, which is a gutter wider on each side. */
.site-footer .shell::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  border-top: 1px solid var(--rule);
}
.footer-links a { color: var(--muted); border-bottom-color: var(--rule-strong); }
.footer-links a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ------------------------------------------------------- motion and print */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  :root { --bg: #fff; --text: #000; --muted: #444; }
  .site-header, .site-footer, .prev-next, .back, .skip-link { display: none; }
  body { font-size: 11pt; }
  .prose { font-size: 11pt; }
  a { color: inherit; border-bottom: none; }
  .prose a::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
}