/* GridComfort — single stylesheet. Tokens per SPEC.md §4.1; everything below
   uses tokens only, so dark mode is the token swap and nothing else. */

:root {
  /* color */
  --ink:        #1A1D21;
  --ink-2:      #4B5563;
  --ink-3:      #8A94A3;
  --line:       #DDE2E8;
  --paper:      #FFFFFF;
  --surface:    #F5F7F6;
  --surface-2:  #EAEFEC;
  --brand:      #0F4C5C;
  --brand-ink:  #0B3A46;
  --brand-soft: #E3EEF1;
  --accent:     #D9741F;
  --accent-soft:#FBEEDF;
  --danger:     #B42318;
  --danger-soft:#FCEBE9;
  --warn:       #9A6700;
  --warn-soft:  #FFF4D6;
  --ok:         #1E7F4F;
  --ok-soft:    #E3F3EA;

  /* type */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --fs-0: 0.8125rem;
  --fs-1: 0.9375rem;
  --fs-2: 1.0625rem;
  --fs-3: 1.25rem;
  --fs-4: 1.5rem;
  --fs-5: 2rem;
  --fs-6: 2.5rem;
  --lh-body: 1.6;
  --lh-tight: 1.2;

  /* space (4px grid) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* layout */
  --measure: 72ch;
  --wide: 1040px;
  --radius: 6px;
  --shadow: 0 1px 2px rgba(20,30,40,.06), 0 2px 8px rgba(20,30,40,.05);

  /* ads: reserve no height until ads go live, then flip this variable */
  --ad-reserve: 0px;
}
@media (prefers-color-scheme: dark) {
  :root { --ink:#E6E9EC; --ink-2:#B3BAC4; --ink-3:#7C8590; --line:#2A3139; --paper:#121518; --surface:#1A1F24; --surface-2:#222930;
          --brand:#7FC4D3; --brand-ink:#A9DBE5; --brand-soft:#15303A; --accent:#F0A05A; --accent-soft:#3A2A18;
          --danger:#F08A80; --danger-soft:#3A1A17; --warn:#E6C15A; --warn-soft:#3A3012; --ok:#7FD1A2; --ok-soft:#153A27; }
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-2);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--paper);
}
h1, h2, h3, h4 { line-height: var(--lh-tight); text-wrap: balance; color: var(--ink); }
h1 { font-size: var(--fs-5); margin: 0 0 var(--s-3); }
h2 { font-size: var(--fs-4); margin: var(--s-7) 0 var(--s-4); }
h3 { font-size: var(--fs-3); margin: var(--s-6) 0 var(--s-3); }
@media (min-width: 700px) { h1 { font-size: var(--fs-6); } }
p, ul, ol { margin: 0 0 var(--s-4); }
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brand-ink); }
strong { color: var(--ink); }
blockquote {
  margin: var(--s-4) 0; padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--brand); background: var(--surface);
  border-radius: 0 var(--radius) var(--radius) 0; font-size: var(--fs-1);
}
pre {
  font-family: var(--font-mono); font-size: var(--fs-1);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s-4); overflow-x: auto; margin: 0 0 var(--s-4);
}
code.code {
  font-family: var(--font-mono); font-size: 0.9em;
  background: var(--brand-soft); color: var(--brand-ink);
  padding: 1px 5px; border-radius: 4px; white-space: nowrap;
}
pre code { background: none; color: inherit; padding: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  background: var(--paper); color: var(--brand); padding: var(--s-2) var(--s-4);
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------------- header */
.site-header { border-bottom: 1px solid var(--line); background: var(--paper); }
.site-header__inner {
  max-width: calc(var(--wide) + 320px); margin: 0 auto; padding: var(--s-3) var(--s-4);
  display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap;
}
.wordmark {
  font-weight: 700; font-size: var(--fs-3); letter-spacing: -0.01em;
  color: var(--brand); text-decoration: none;
}
.nav-toggle {
  margin-left: auto; min-height: 44px; min-width: 44px;
  font: inherit; font-size: var(--fs-1); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s-2) var(--s-3); cursor: pointer;
}
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s-2); flex-wrap: wrap; }
.site-nav a {
  display: inline-block; padding: var(--s-2) var(--s-3); min-height: 44px;
  text-decoration: none; color: var(--ink-2); font-size: var(--fs-1); border-radius: var(--radius);
}
.site-nav a:hover { color: var(--brand); background: var(--surface); }
.site-nav a[aria-current="true"] { color: var(--brand); font-weight: 600; background: var(--brand-soft); }
.nav-toggle { display: none; }
@media (max-width: 699px) {
  .js .nav-toggle:not([hidden]) { display: block; }
  .js .site-nav { display: none; width: 100%; }
  .js .site-nav.open { display: block; }
  .js .site-nav ul { flex-direction: column; gap: 0; }
  .js .site-nav a { display: block; padding: var(--s-3) var(--s-2); border-top: 1px solid var(--line); border-radius: 0; }
}

/* ---------------------------------------------------------------- layout */
.layout {
  max-width: calc(var(--wide) + 320px); margin: 0 auto; padding: var(--s-5) var(--s-4) var(--s-8);
}
main { max-width: var(--measure); }
.t-tool main, .t-section main { max-width: var(--wide); }
.rail { display: none; }
@media (min-width: 1100px) {
  .layout--rail { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--s-7); }
  .rail { display: block; }
  .rail > * { margin-bottom: var(--s-5); }
  .rail .toc { position: sticky; top: var(--s-5); }
}

/* ---------------------------------------------------------------- crumbs */
.crumbs { font-size: var(--fs-0); color: var(--ink-2); margin-bottom: var(--s-4); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-1); }
.crumbs li + li::before { content: "/"; margin: 0 var(--s-1); color: var(--ink-3); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--brand); text-decoration: underline; }

/* ---------------------------------------------------------------- page head */
.page-head { margin-bottom: var(--s-5); padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); }
.page-meta { font-size: var(--fs-0); color: var(--ink-2); margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); align-items: center; }
.page-meta__date { color: var(--ink-2); }
.page-meta__sep { color: var(--ink-3); }
.lede { font-size: var(--fs-2); color: var(--ink-2); max-width: var(--measure); }

/* ---------------------------------------------------------------- chips */
.chip {
  display: inline-block; font-size: var(--fs-0); font-weight: 600; line-height: 1.3;
  padding: 1px 8px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent;
}
.chip--stop { color: var(--danger); background: var(--danger-soft); }
.chip--warn, .chip--diy-partial { color: var(--warn); background: var(--warn-soft); }
.chip--info { color: var(--brand); background: var(--brand-soft); }
.chip--diy { color: var(--ok); background: var(--ok-soft); }
.chip--pro { color: var(--danger); background: var(--danger-soft); }

/* ---------------------------------------------------------------- callouts */
.callout {
  border-radius: var(--radius); padding: var(--s-4); margin: 0 0 var(--s-5);
  border: 1px solid var(--line); border-left-width: 4px; background: var(--surface);
}
.callout--danger { border-left-color: var(--danger); background: var(--danger-soft); }
.callout--warn { border-left-color: var(--warn); background: var(--warn-soft); }
.callout--note { border-left-color: var(--brand); background: var(--brand-soft); }
.callout__head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
.callout--danger .callout__head { color: var(--danger); }
.callout--warn .callout__head { color: var(--warn); }
.callout--note .callout__head { color: var(--brand); }
.callout__title {
  font-size: var(--fs-0); font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
}
.callout__body { font-size: var(--fs-1); }
.callout__body p:last-child { margin-bottom: 0; }
.icon { flex: none; }

/* ---------------------------------------------------------------- quick answer */
.quick-answer {
  border: 1px solid var(--brand); border-radius: var(--radius);
  padding: var(--s-4) var(--s-5); margin: 0 0 var(--s-5); background: var(--paper);
  box-shadow: var(--shadow);
}
.quick-answer p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- tables */
.table-wrap {
  position: relative; overflow-x: auto; margin: 0 0 var(--s-5);
  border: 1px solid var(--line); border-radius: var(--radius);
  background:
    linear-gradient(to left, var(--paper), transparent 24px) 100% 0 / 24px 100% no-repeat local,
    var(--paper);
}
table { border-collapse: collapse; width: 100%; font-size: var(--fs-1); }
th, td { text-align: left; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); vertical-align: top; }
thead th {
  background: var(--surface); font-size: var(--fs-0); color: var(--ink-2);
  text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
}
tbody tr:nth-child(even) td { background: var(--surface); }
tbody tr:last-child td { border-bottom: 0; }
td { font-variant-numeric: tabular-nums; }
@media (min-width: 700px) {
  thead th { position: sticky; top: 0; }
}
.block-code-table td:first-child { font-family: var(--font-mono); white-space: nowrap; }
.block-parts td:nth-child(2) { font-family: var(--font-mono); }

/* ---------------------------------------------------------------- diagnostic */
.diagnostic > ol { list-style: none; counter-reset: step; margin: 0 0 var(--s-5); padding: 0; }
.diagnostic > ol > li {
  counter-increment: step; position: relative;
  padding: 0 0 var(--s-5) var(--s-7); margin: 0;
}
.diagnostic > ol > li::before {
  content: counter(step);
  position: absolute; left: 0; top: -2px;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand); color: var(--paper);
  font-size: var(--fs-1); font-weight: 700;
}
.diagnostic > ol > li::after {
  content: ""; position: absolute; left: 15px; top: 34px; bottom: var(--s-2);
  width: 2px; background: var(--line);
}
.diagnostic > ol > li:last-child { padding-bottom: 0; }
.diagnostic > ol > li:last-child::after { display: none; }
.diagnostic ul {
  list-style: none; margin: var(--s-2) 0 0; padding: 0;
}
.diagnostic ul li {
  position: relative; padding: var(--s-2) var(--s-3); margin-bottom: var(--s-2);
  background: var(--surface); border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0; font-size: var(--fs-1);
}
@media (prefers-color-scheme: dark) {
  .diagnostic > ol > li::before { color: var(--paper); }
}

/* ---------------------------------------------------------------- call a pro / lead */
.call-pro {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s-4) var(--s-5); margin: 0 0 var(--s-5);
}
.call-pro ul { margin-bottom: 0; }
.lead-block {
  background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--radius);
  padding: var(--s-4) var(--s-5); margin: 0 0 var(--s-5);
}
.lead-block__title { margin-top: 0; font-size: var(--fs-3); }
.lead-block ul { font-size: var(--fs-1); }
.lead-block p:last-child, .lead-block ul:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: var(--s-2) var(--s-5);
  font: inherit; font-size: var(--fs-1); font-weight: 600; text-decoration: none;
  border-radius: var(--radius); border: 1px solid transparent; cursor: pointer;
}
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { filter: brightness(0.94); color: #fff; }
@media (prefers-color-scheme: dark) { .btn--accent { color: #1A1D21; } .btn--accent:hover { color: #1A1D21; } }

/* ---------------------------------------------------------------- affiliate */
.affiliate-cards { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: grid; gap: var(--s-3); }
@media (min-width: 700px) { .affiliate-cards { grid-template-columns: 1fr 1fr; } }
.affiliate-card {
  border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-3) var(--s-4);
  background: var(--surface); display: flex; flex-direction: column; gap: var(--s-2);
}
.affiliate-card__label { font-size: var(--fs-1); font-weight: 600; }
.affiliate-card a { font-size: var(--fs-0); }

/* ---------------------------------------------------------------- cards */
.cards { margin: 0 0 var(--s-5); }
.cards__heading { font-size: var(--fs-0); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); margin-bottom: var(--s-2); }
.cards ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
@media (min-width: 700px) { .cards ul { grid-template-columns: 1fr 1fr; } }
.card {
  display: flex; flex-direction: column; gap: var(--s-1); height: 100%;
  border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-3) var(--s-4);
  background: var(--paper); text-decoration: none; box-shadow: var(--shadow);
}
.card:hover { border-color: var(--brand); }
.card__title { font-size: var(--fs-1); font-weight: 600; color: var(--brand); }
.card__sub { font-size: var(--fs-0); color: var(--ink-2); }
.card .chip { align-self: flex-start; }

/* ---------------------------------------------------------------- tool cards */
.tool-card {
  display: flex; flex-direction: column; gap: var(--s-1);
  border: 1px solid var(--accent); border-radius: var(--radius);
  background: var(--accent-soft); padding: var(--s-4) var(--s-5);
  margin: 0 0 var(--s-5); text-decoration: none; box-shadow: var(--shadow);
}
.tool-card:hover { filter: brightness(0.98); }
.tool-card__kicker { font-size: var(--fs-0); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); }
.tool-card__title { font-size: var(--fs-2); font-weight: 700; color: var(--ink); display: inline-flex; align-items: center; gap: var(--s-2); }
.tool-card__sub { font-size: var(--fs-1); color: var(--ink-2); }
.tools-grid { display: grid; gap: var(--s-4); margin: 0 0 var(--s-5); }
@media (min-width: 700px) { .tools-grid { grid-template-columns: 1fr 1fr; } .tools-grid .tool-card { margin: 0; } }

/* ---------------------------------------------------------------- calculator mount */
.calc {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: var(--s-5); margin: 0 0 var(--s-3);
}
.calc-noscript { margin: 0; color: var(--ink-2); font-size: var(--fs-1); }
.data-updated { font-size: var(--fs-0); color: var(--ink-2); margin-bottom: var(--s-5); }

/* ---------------------------------------------------------------- calculator UI */
.calc-form { font-size: var(--fs-1); }
.calc-grid { display: grid; gap: var(--s-5); align-items: start; }
@media (min-width: 900px) {
  .calc-grid { grid-template-columns: minmax(0, 1fr) 320px; }
  .calc-panel { position: sticky; top: var(--s-5); }
}
.calc-presets { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); }
.preset-btn {
  font: inherit; font-size: var(--fs-1); font-weight: 600; color: var(--brand);
  background: var(--brand-soft); border: 1px solid var(--brand); border-radius: var(--radius);
  min-height: 44px; padding: var(--s-2) var(--s-4); cursor: pointer;
}
.preset-btn:hover { background: var(--surface-2); }
.calc-search { margin-bottom: var(--s-4); }
.calc-search input, .calc-field input[type="number"], .calc-field select, .watt-edit input {
  font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s-2) var(--s-3); min-height: 40px;
}
.calc-search input { width: 100%; max-width: 32ch; }
.calc-controls { display: grid; gap: var(--s-4); margin-bottom: var(--s-4); }
.calc-control { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-3) var(--s-4); margin: 0 0 var(--s-3); }
.calc-control legend { font-weight: 600; padding: 0 var(--s-1); }
.calc-control > label { display: block; font-weight: 600; margin-bottom: var(--s-2); }
.range-wrap { display: flex; align-items: center; gap: var(--s-3); }
.range-wrap input[type="range"] { flex: 1; accent-color: var(--accent); min-height: 44px; }
.range-wrap output { font-variant-numeric: tabular-nums; min-width: 4ch; font-weight: 600; }
.radio-item { display: inline-flex; align-items: center; gap: var(--s-2); margin-right: var(--s-4); }
.radio-item--block { display: flex; margin: 0 0 var(--s-2); }
.radio-item input { accent-color: var(--brand); width: 18px; height: 18px; }
.calc-field { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-bottom: var(--s-3); }
.calc-field label { font-weight: 600; }
.calc-field input[type="number"] { width: 9ch; }
.calc-field select { max-width: 100%; }
.calc-field--check input { accent-color: var(--brand); width: 18px; height: 18px; }
.calc-cat { border: 0; padding: 0; margin: 0; }
.calc-cat__h { display: block; width: 100%; font-size: var(--fs-0); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); padding: var(--s-5) 0 var(--s-2); }
.calc-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2);
  padding: var(--s-2) 0; border-bottom: 1px solid var(--line);
}
.calc-row input[type="checkbox"] { accent-color: var(--brand); width: 18px; height: 18px; flex: none; }
.calc-row__name { flex: 1 1 14ch; min-width: 12ch; }
.calc-row__watts { font-size: var(--fs-0); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.qty-stepper { display: inline-flex; align-items: center; gap: 2px; }
.qty-btn {
  font: inherit; width: 28px; height: 28px; line-height: 1; cursor: pointer;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.qty-num { width: 5ch; text-align: center; font: inherit; border: 1px solid var(--line); border-radius: var(--radius); min-height: 28px; background: var(--paper); color: var(--ink); }
.watt-edit-btn {
  font: inherit; width: 28px; height: 28px; cursor: pointer; line-height: 1;
  color: var(--ink-2); background: none; border: 1px solid var(--line); border-radius: var(--radius);
}
.watt-edit { flex-basis: 100%; padding: var(--s-2) 0 var(--s-1) var(--s-6); font-size: var(--fs-0); }
.watt-edit label { color: var(--ink-2); }
.watt-edit input { width: 9ch; min-height: 32px; padding: var(--s-1) var(--s-2); }
.calc-panel { background: var(--paper); border: 1px solid var(--accent); border-radius: var(--radius); padding: var(--s-4) var(--s-5); box-shadow: var(--shadow); }
.calc-panel__h { margin: 0 0 var(--s-3); font-size: var(--fs-3); }
.result-rows { margin: 0 0 var(--s-3); }
.result-row { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.result-row dt { color: var(--ink-2); }
.result-row dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.result-row--big dd { color: var(--accent); font-size: var(--fs-2); }
.result-row--stack { flex-direction: column; gap: var(--s-1); }
.result-row--stack dd { text-align: left; }
.result-note { font-size: var(--fs-0); color: var(--ink-2); }
.result-flag {
  font-size: var(--fs-0); background: var(--warn-soft); color: var(--warn);
  border-radius: var(--radius); padding: var(--s-2) var(--s-3);
}
.calc-empty { color: var(--ink-2); margin: 0; }
.calc-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; }
@media print { .calc-list, .calc-presets, .calc-search, .calc-actions { display: none !important; } }

/* ---------------------------------------------------------------- embed snippet */
.embed-snippet { margin: 0 0 var(--s-5); }
.embed-snippet pre { margin-bottom: var(--s-2); }

/* ---------------------------------------------------------------- faq / sources */
.faq h3 { margin-top: var(--s-5); }
.sources ol { font-size: var(--fs-1); color: var(--ink-2); }
.disclaimer { font-size: var(--fs-0); color: var(--ink-2); border-top: 1px solid var(--line); padding-top: var(--s-4); }
.page-footer { margin-top: var(--s-7); }
.notfound-list { font-size: var(--fs-2); }
.notfound-list li { margin-bottom: var(--s-2); }

/* ---------------------------------------------------------------- toc */
.toc { font-size: var(--fs-1); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-4); background: var(--paper); }
.toc__heading { font-size: var(--fs-0); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); margin: 0 0 var(--s-2); }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { margin-bottom: var(--s-2); }
.toc a { text-decoration: none; color: var(--ink-2); }
.toc a:hover { color: var(--brand); text-decoration: underline; }

/* ---------------------------------------------------------------- ads */
.ad-slot { min-height: var(--ad-reserve); }

/* ---------------------------------------------------------------- footer */
.site-footer { border-top: 1px solid var(--line); background: var(--surface); padding: var(--s-6) var(--s-4); margin-top: var(--s-8); }
.site-footer__cols {
  max-width: calc(var(--wide) + 320px); margin: 0 auto var(--s-5);
  display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.site-footer__heading { font-size: var(--fs-0); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); margin-bottom: var(--s-2); }
.site-footer ul { list-style: none; margin: 0; padding: 0; font-size: var(--fs-1); }
.site-footer li { margin-bottom: var(--s-1); }
.site-footer a { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--brand); text-decoration: underline; }
.site-footer__meta { max-width: calc(var(--wide) + 320px); margin: 0 auto var(--s-1); font-size: var(--fs-0); color: var(--ink-2); }

/* ---------------------------------------------------------------- copy-link anchors */
.h-anchor {
  margin-left: var(--s-2); font-size: var(--fs-1); text-decoration: none;
  color: var(--ink-3); opacity: 0; transition: opacity 0.15s;
}
h2:hover .h-anchor, h2:focus-within .h-anchor { opacity: 1; }
.copy-btn {
  font: inherit; font-size: var(--fs-0); color: var(--brand);
  background: var(--brand-soft); border: 1px solid var(--line); border-radius: var(--radius);
  min-height: 44px; padding: var(--s-2) var(--s-4); cursor: pointer;
}

/* ---------------------------------------------------------------- print */
@media print {
  .site-header, .site-footer, .rail, .ad-slot, .nav-toggle, .crumbs,
  .lead-block, .affiliate, .tool-card, .embed-snippet, .skip-link { display: none !important; }
  body { font-size: 11pt; }
  a { color: inherit; text-decoration: none; }
}