/* taxloss.co.uk — "Ledger & red ink"
   Bottle green for structure, red ink for losses (always in brackets), ledger mint paper, brass for rules and stamps.
   Newsreader for reading, Geist for interface, Geist Mono for figures (tabular). */

@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader.woff2") format("woff2"); font-weight: 350 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-italic.woff2") format("woff2"); font-weight: 400 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts/geist.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/geistmono.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }

:root {
  --green: #123F33;        /* bottle green — structure, headings */
  --green-deep: #0C2E25;
  --green-soft: #D9E9DF;
  --red: #B3261E;          /* red ink — losses only */
  --red-tint: #FBEDEB;
  --mint: #EFF6F1;         /* ledger mint page */
  --sheet: #FBFDFB;        /* ledger sheet */
  --brass: #A9874B;        /* rules, stamps, accents (decorative) */
  --brass-ink: #7A5E2B;    /* brass for text on light backgrounds (AA) */
  --brass-light: #D8C08A;  /* brass for text on bottle green (AA) */
  --ink: #1A1F1C;
  --muted: #4A5A52;
  --line: rgba(18, 63, 51, .2);
  --rule: rgba(18, 63, 51, .1);
  --focus: #B3261E;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --ui: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --wrap: 1180px;
  --lh: 1.9rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 1rem; }
body { margin: 0; background: var(--mint); color: var(--ink); font: 400 1.125rem/1.62 var(--serif); font-optical-sizing: auto; overflow-wrap: break-word; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--red); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
main:focus { outline: none; }
h1, h2, h3, h4 { font-family: var(--serif); color: var(--green); line-height: 1.15; margin: 0 0 .6em; font-weight: 600; letter-spacing: -.005em; }
h1 { font-size: clamp(2.05rem, 1.4rem + 3vw, 3.35rem); line-height: 1.06; letter-spacing: -.015em; font-weight: 560; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.05rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }
p, ul, ol { margin: 0 0 1em; }
ul, ol { padding-left: 1.3em; }
li { margin-bottom: .35em; }
strong { font-weight: 650; }
code { font-family: var(--mono); font-size: .86em; background: var(--green-soft); padding: .05em .3em; border-radius: 2px; }
hr { border: 0; border-top: 3px double var(--line); margin: 2rem 0; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
@media (min-width: 700px) { .wrap { padding: 0 28px; } }

.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--green); color: #fff; padding: .6rem 1rem; font: 600 1rem var(--ui); border-radius: 3px; }
.skip:focus { top: 12px; color: #fff; }

/* ---------------------------------------------------------------- header */
.strip { background: var(--green); color: var(--mint); font: 400 .8rem/1.4 var(--ui); }
.strip-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1.5rem; padding-top: .45rem; padding-bottom: .45rem; }
.strip strong { color: var(--brass-light); font-family: var(--mono); font-weight: 500; }
.strip-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--brass-light); margin-right: .3rem; vertical-align: .05em; }
.site-head { background: var(--mint); border-bottom: 4px double var(--green); position: relative; }
.head-in { display: flex; align-items: center; gap: 1rem 2rem; min-height: 4.6rem; flex-wrap: wrap; }
.brand { display: inline-flex; flex-direction: column; text-decoration: none; color: var(--green); padding: .55rem 0; line-height: 1; margin-right: auto; }
.brand:hover { color: var(--green); }
.brand-mark { font: 650 1.9rem/1 var(--serif); letter-spacing: -.02em; font-variation-settings: "opsz" 72; }
.brand-loss { color: var(--red); font-weight: 500; margin-left: .04em; }
.brand-dom { font: 500 .7rem/1 var(--mono); color: var(--muted); letter-spacing: .08em; margin-top: .3rem; text-transform: uppercase; }
.nav-main ul, .nav-mobile ul { list-style: none; margin: 0; padding: 0; }
.nav-main ul { display: flex; flex-wrap: wrap; gap: .1rem 1.35rem; }
.nav-main li, .nav-mobile li { margin: 0; }
.nav-main a, .nav-mobile a { font: 500 .97rem/1 var(--ui); color: var(--ink); text-decoration: none; display: inline-block; padding: .65rem 0 .55rem; border-bottom: 2px solid transparent; }
.nav-main a:hover, .nav-mobile a:hover { color: var(--red); border-bottom-color: var(--red); }
.nav-main a[aria-current], .nav-mobile a[aria-current] { color: var(--green); font-weight: 650; border-bottom-color: var(--brass); }
.nav-mobile { display: none; }
@media (max-width: 919px) {
  .nav-main { display: none; }
  .nav-mobile { display: block; }
  .nav-mobile summary { list-style: none; cursor: pointer; font: 600 .95rem/1 var(--ui); color: var(--green); border: 1.5px solid var(--green); border-radius: 3px; padding: .6rem .8rem; display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; }
  .nav-mobile summary::-webkit-details-marker { display: none; }
  .burger, .burger::before, .burger::after { display: block; width: 18px; height: 2px; background: var(--green); position: relative; }
  .burger::before, .burger::after { content: ""; position: absolute; left: 0; }
  .burger::before { top: -6px; } .burger::after { top: 6px; }
  .nav-mobile[open] summary { background: var(--green); color: var(--mint); }
  .nav-mobile[open] .burger, .nav-mobile[open] .burger::before, .nav-mobile[open] .burger::after { background: var(--mint); }
  .nav-mobile nav { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: var(--sheet); border-bottom: 4px double var(--green); box-shadow: 0 14px 24px rgba(18, 63, 51, .12); }
  .nav-mobile ul { max-width: var(--wrap); margin: 0 auto; padding: .4rem 16px .8rem; columns: 2; column-gap: 1.5rem; }
  .nav-mobile a { display: block; padding: .75rem 0; border-bottom: 1px solid var(--rule); }
}

/* --------------------------------------------------------------- footer */
.site-foot { background: var(--green); color: var(--mint); margin-top: 4rem; font: 400 .95rem/1.55 var(--ui); padding: 2.4rem 0 2rem; border-top: 4px double var(--brass); }
.site-foot a { color: var(--brass-light); }
.site-foot a:hover { color: #fff; }
.foot-notice { border: 1px solid rgba(216, 192, 138, .45); padding: 1rem 1.2rem; margin-bottom: 2rem; }
.foot-disclaimer { margin: 0; }
.foot-cols { display: grid; gap: 1.5rem 2rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 1.6rem; }
.foot-h { font: 600 .78rem/1 var(--ui); text-transform: uppercase; letter-spacing: .12em; color: var(--brass-light); margin: 0 0 .8rem; }
.foot-cols ul { list-style: none; padding: 0; margin: 0; }
.foot-cols li { margin: 0 0 .4rem; }
.foot-legal { border-top: 1px solid rgba(239, 246, 241, .2); padding-top: 1.2rem; font-size: .88rem; color: #DCE9E1; }
.foot-legal p { margin: 0 0 .6rem; }
.foot-copy { font-family: var(--mono); font-size: .8rem; letter-spacing: .04em; }

/* ----------------------------------------------------------- page parts */
.page-head { padding: 2.4rem 0 1.4rem; }
.page-head .lead { max-width: 46rem; }
.crumbs { font: 400 .85rem/1.4 var(--ui); color: var(--muted); margin: 0 0 1rem; }
.crumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .2rem .5rem; }
.crumbs li { margin: 0; }
.crumbs li + li::before { content: "/"; color: var(--brass); margin-right: .5rem; }
.crumbs a { color: var(--muted); }
.kicker { font: 600 .78rem/1.2 var(--ui); text-transform: uppercase; letter-spacing: .14em; color: var(--brass-ink); margin: 0 0 .7rem; }
.lead { font-size: 1.25rem; line-height: 1.55; color: var(--ink); }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
.ui { font-family: var(--ui); }
.mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.section { padding: 2.2rem 0; }
.section-h { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-bottom: 3px double var(--green); padding-bottom: .5rem; margin-bottom: 1.4rem; }
.section-h h2 { margin: 0; }
.section-h a { font: 500 .95rem var(--ui); }
.prose { max-width: 44rem; }
.prose h2 { margin-top: 2.2rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.prose h3 { margin-top: 1.6rem; }
.prose li::marker { color: var(--brass-ink); }
.table-wrap { overflow-x: auto; margin: 0 0 1.4rem; }
.md-table, .tbl { width: 100%; border-collapse: collapse; font: 400 .95rem/1.45 var(--ui); background: var(--sheet); }
.md-table th, .md-table td, .tbl th, .tbl td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.md-table thead th, .tbl thead th { background: var(--green); color: var(--mint); font-weight: 600; font-size: .85rem; letter-spacing: .02em; }

/* buttons + forms */
.btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 46px; padding: .7rem 1.15rem; border: 1.5px solid var(--green); border-radius: 3px; background: var(--green); color: var(--mint); font: 600 1rem/1.1 var(--ui); text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--green-deep); color: #fff; border-color: var(--green-deep); }
.btn-ghost { background: transparent; color: var(--green); }
.btn-ghost:hover { background: var(--green-soft); color: var(--green); }
.btn .arr { font-family: var(--mono); }
.link-arrow { font: 600 1rem var(--ui); }
label, legend { font: 600 .98rem/1.35 var(--ui); color: var(--ink); }
.field { margin: 0 0 1.2rem; }
.field-hint { display: block; font: 400 .88rem/1.4 var(--ui); color: var(--muted); margin-top: .25rem; }
.money { display: flex; align-items: stretch; max-width: 18rem; margin-top: .4rem; }
.money span { display: grid; place-items: center; padding: 0 .75rem; background: var(--green); color: var(--mint); font: 600 1.05rem var(--mono); border-radius: 3px 0 0 3px; }
.money input { border-radius: 0 3px 3px 0; }
input[type=text], input[type=number], input[type=date], select { width: 100%; min-height: 46px; padding: .55rem .75rem; border: 1.5px solid #6B7D73; border-radius: 3px; background: #fff; color: var(--ink); font: 400 1.05rem var(--ui); }
input.num { font-family: var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
input:focus-visible, select:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--green); }
.form-error { background: var(--red-tint); border-left: 4px solid var(--red); padding: .8rem 1rem; font: 400 .98rem/1.45 var(--ui); margin: 0 0 1.2rem; }
fieldset { border: 0; padding: 0; margin: 0 0 1.2rem; min-width: 0; }

/* ------------------------------------------------- ledger sheet + entries */
.sheet { position: relative; background-color: var(--sheet); border: 1px solid var(--line); padding: 1.3rem 1.3rem 1.3rem 3.1rem;
  box-shadow: 0 1px 0 var(--line), 0 18px 30px -24px rgba(18, 63, 51, .45); }
.sheet::before { content: ""; position: absolute; top: 0; bottom: 0; left: 2.05rem; width: 4px; border-left: 1px solid rgba(179, 38, 30, .55); border-right: 1px solid rgba(179, 38, 30, .55); }
.sheet-tight { padding-top: 1rem; padding-bottom: 1rem; }
.sheet-title, .ledger-title { font: 600 .78rem/1.3 var(--ui); text-transform: uppercase; letter-spacing: .13em; color: var(--brass-ink); margin: 0 0 .6rem; display: block; }
.ledger { width: 100%; border-collapse: collapse; font: 400 1rem/1.35 var(--ui); }
.ledger th { text-align: left; font-weight: 400; padding: .5rem .75rem .5rem 0; }
.ledger td { text-align: right; padding: .5rem 0 .5rem .75rem; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; vertical-align: bottom; border-left: 1px solid var(--rule); width: 1%; }
.ledger tr > * { border-bottom: 1px solid var(--rule); }
.ledger tr.sub > * { border-top: 2px solid var(--ink); font-weight: 600; }
.ledger tr.total > * { border-top: 2px solid var(--ink); border-bottom: 4px double var(--ink); font-weight: 700; color: var(--green); }
.ledger tr.total td .amt.neg { color: var(--red); }
.ledger tr.note td { border-left: 0; text-align: left; font: italic 400 .92rem/1.4 var(--serif); color: var(--muted); white-space: normal; padding-top: .2rem; }
.ledger tr.cf > * { color: var(--green); font-weight: 600; }
.ledger .step { font: 500 .72rem var(--mono); color: var(--brass-ink); margin-right: .5rem; }
.amt { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.amt.neg { color: var(--red); }
.ledger-fig { margin: 1.6rem 0; max-width: 34rem; }
.ledger-cap { font: 400 .85rem/1.4 var(--ui); color: var(--muted); margin-top: .5rem; }

/* deadline stamps */
.clock { display: inline-flex; align-items: center; gap: .6rem; padding: .4rem .75rem .4rem .45rem; border: 1.5px solid var(--green); border-radius: 4px; background: #fff; font: 400 .9rem/1.25 var(--ui); color: var(--ink); max-width: 100%; }
.clock-face { flex: 0 0 auto; width: 1.85rem; height: 1.85rem; border-radius: 50%; border: 2px solid var(--green); position: relative; background: radial-gradient(circle, var(--green) 0 2px, transparent 2.6px), #fff; box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px var(--brass); }
.clock-face::before, .clock-face::after { content: ""; position: absolute; left: 50%; bottom: 50%; width: 2px; background: var(--green); transform-origin: 50% 100%; border-radius: 1px; }
.clock-face::before { height: 34%; margin-left: -1px; transform: rotate(-30deg); }
.clock-face::after { height: 42%; margin-left: -1px; background: var(--red); transform: rotate(90deg); }
.clock-label { display: block; font: 600 .68rem/1.2 var(--ui); text-transform: uppercase; letter-spacing: .12em; color: var(--brass-ink); }
.clock-when { font: 600 .95rem/1.25 var(--mono); color: var(--green); }
.clock.passed { border-color: #8A968F; }
.clock.passed .clock-when { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--red); }
.md-deadline { margin: 1.2rem 0; }
.stamp { display: inline-block; font: 600 .74rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--green); border: 1.5px solid var(--green); padding: .3rem .55rem; border-radius: 2px; transform: rotate(-1.2deg); background: rgba(255, 255, 255, .6); }

/* notices */
.notice { display: flex; gap: .85rem; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--brass); padding: .9rem 1.1rem; font: 400 .95rem/1.5 var(--ui); margin: 1.4rem 0; }
.notice p { margin: 0; }
.notice-i { flex: 0 0 auto; width: 1.45rem; height: 1.45rem; border-radius: 50%; border: 1.5px solid var(--brass-ink); color: var(--brass-ink); font: italic 600 .95rem/1.3rem var(--serif); text-align: center; }
.callout { background: #fff; border-left: 4px solid var(--brass); padding: .9rem 1.1rem; margin: 1.4rem 0; font-size: 1.02rem; }
.callout p { margin: 0; }
.callout.warn { border-left-color: var(--red); background: var(--red-tint); }

/* ----------------------------------------------------------------- home */
.hero { padding: 2.6rem 0 2.2rem; }
.hero-grid { display: grid; gap: 2.2rem; align-items: start; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 3.2rem; } }
.hero h1 { margin-bottom: .5em; }
.hero h1 .red { color: var(--red); font-style: italic; font-weight: 500; }
.hero .lead { max-width: 36rem; }
.quickstart { margin-top: 1.6rem; background: #fff; border: 1px solid var(--line); border-top: 4px double var(--green); padding: 1.1rem 1.2rem 1.2rem; }
.quickstart legend { font: 600 1.15rem/1.3 var(--serif); color: var(--green); margin-bottom: .7rem; }
.choice-list { display: grid; gap: .45rem; margin: 0 0 1rem; }
.choice { display: flex; gap: .7rem; align-items: flex-start; padding: .6rem .75rem; border: 1px solid var(--line); border-radius: 3px; background: var(--sheet); cursor: pointer; font: 500 .98rem/1.35 var(--ui); }
.choice:hover { border-color: var(--green); }
.choice input { margin: .15rem 0 0; width: 1.15rem; height: 1.15rem; accent-color: var(--green); flex: 0 0 auto; }
.choice small { display: block; font-weight: 400; color: var(--muted); font-size: .86rem; margin-top: .15rem; }
.choice:has(input:checked) { border-color: var(--green); background: var(--green-soft); box-shadow: inset 3px 0 0 var(--green); }
.hero-sheet .ledger-cap { margin-top: .8rem; }
.hero-side { display: grid; gap: 1.2rem; }

.timeline-band { background: var(--sheet); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 2.2rem 0; }
.tl { --cols: 6; font: 400 .85rem/1.3 var(--ui); margin: 0; }
.tl-years, .tl-row { display: grid; grid-template-columns: 8.5rem repeat(var(--cols), minmax(0, 1fr)); align-items: center; column-gap: 0; }
.tl-years { border-bottom: 1px solid var(--ink); }
.tl-years span { font: 500 .78rem/1 var(--mono); text-align: center; padding: .55rem .1rem; color: var(--muted); }
.tl-years span.loss { color: var(--red); font-weight: 600; background: var(--red-tint); border: 1px solid rgba(179, 38, 30, .35); border-bottom: 0; }
.tl-years span.later { font-family: var(--ui); }
.tl-row { min-height: 3.2rem; border-bottom: 1px solid var(--rule); }
.tl-label { font: 600 .85rem/1.25 var(--ui); color: var(--green); padding: .5rem .6rem .5rem 0; }
.tl-label small { display: block; font-weight: 400; color: var(--muted); font-size: .76rem; }
.tl-mark { grid-row: 1; text-align: center; font: 600 .78rem var(--mono); color: var(--red); background: var(--red-tint); align-self: stretch; display: grid; place-items: center; border-left: 1px solid rgba(179, 38, 30, .35); border-right: 1px solid rgba(179, 38, 30, .35); }
.tl-arrow { grid-row: 1; position: relative; height: 0; border-top: 2.5px solid var(--green); margin: 0 .4rem; align-self: center; }
.tl-arrow.back { border-top-color: var(--brass); border-top-style: dashed; }
.tl-arrow::after { content: ""; position: absolute; top: -7.5px; border: 6px solid transparent; }
.tl-arrow.fwd::after { right: -4px; border-left: 9px solid var(--green); border-right: 0; }
.tl-arrow.back::after { left: -4px; border-right: 9px solid var(--brass); border-left: 0; }
.tl-arrow span { position: absolute; left: 0; right: 0; top: -1.35rem; text-align: center; font: 500 .72rem/1 var(--ui); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-key { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-top: 1rem; font: 400 .85rem var(--ui); color: var(--muted); }
.tl-key i { display: inline-block; width: 2rem; height: 0; border-top: 2.5px solid var(--green); vertical-align: middle; margin-right: .4rem; }
.tl-key i.back { border-top: 2.5px dashed var(--brass); }
.tl-compact { margin: 1.6rem 0; background: var(--sheet); border: 1px solid var(--line); padding: 1rem 1rem .8rem; }
@media (max-width: 640px) {
  .tl-years, .tl-row { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
  .tl-years .tl-corner { display: none; }
  .tl-label { grid-column: 1 / -1; grid-row: 1; padding: .6rem 0 0; }
  .tl-row { grid-template-rows: auto 2.2rem; }
  .tl-row .tl-mark, .tl-row .tl-arrow { grid-row: 2; }
  .tl-arrow span { display: none; }
  .tl-years span { font-size: .66rem; padding: .5rem 0; letter-spacing: -.02em; }
}

.index-grid { display: grid; gap: 2rem 3rem; }
@media (min-width: 900px) { .index-grid { grid-template-columns: 1fr 1fr; } }
.account { margin: 0; }
.account-h { display: flex; align-items: baseline; gap: .7rem; font-size: 1.3rem; border-bottom: 3px double var(--green); padding-bottom: .4rem; margin-bottom: .2rem; }
.account-h .acc-no { font: 500 .78rem var(--mono); color: var(--brass-ink); letter-spacing: .06em; }
.account-desc { font: 400 .9rem/1.45 var(--ui); color: var(--muted); margin: .4rem 0 .5rem; }
.ledger-index { list-style: none; margin: 0; padding: 0; }
.ledger-index li { margin: 0; border-bottom: 1px solid var(--rule); }
.ledger-index a { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: .2rem .7rem; padding: .7rem 0; text-decoration: none; color: var(--ink); align-items: baseline; }
.ledger-index a:hover .li-title { color: var(--red); text-decoration: underline; text-decoration-thickness: 1px; }
.li-no { font: 500 .8rem var(--mono); color: var(--brass-ink); }
.li-title { font: 600 1.06rem/1.3 var(--serif); color: var(--green); }
.li-sum { grid-column: 2 / 4; font: 400 .9rem/1.45 var(--ui); color: var(--muted); }
.li-date { font: 400 .72rem var(--mono); color: var(--muted); white-space: nowrap; }
@media (max-width: 520px) { .li-date { display: none; } .ledger-index a { grid-template-columns: 2.2rem minmax(0, 1fr); } .li-sum { grid-column: 2; } }

.clocks { display: grid; gap: 0; border-top: 1px solid var(--ink); }
.clock-row { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr) auto; gap: .4rem 1.2rem; align-items: center; padding: .85rem 0; border-bottom: 1px solid var(--rule); font: 400 .98rem/1.4 var(--ui); }
.clock-row .when { font: 600 1rem var(--mono); color: var(--green); }
.clock-row .left { font: 500 .8rem var(--mono); color: var(--brass-ink); text-align: right; white-space: nowrap; }
.clock-row .left.soon { color: var(--red); }
.clock-row a { font-weight: 500; }
@media (max-width: 640px) { .clock-row { grid-template-columns: 1fr auto; } .clock-row .what { grid-column: 1 / -1; grid-row: 2; } }

.figs { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); border-top: 1px solid var(--ink); }
.fig-cell { padding: 1rem 1.1rem 1rem 0; border-bottom: 1px solid var(--rule); }
.fig-cell .fig-val { display: block; font: 600 1.45rem/1.15 var(--mono); color: var(--green); font-variant-numeric: tabular-nums; margin: .2rem 0; }
.fig-cell .fig-lab { display: block; font: 500 .92rem/1.35 var(--ui); }
.fig-cell .fig-src { display: block; font: 400 .78rem/1.4 var(--ui); color: var(--muted); }
.hero-note { font: 400 .88rem/1.45 var(--ui); color: var(--muted); margin: .9rem 0 0; }

.tools-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--ink); counter-reset: tool; }
.tools-list li { margin: 0; border-bottom: 1px solid var(--rule); }
.tools-list a { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: .2rem 1rem; padding: 1.1rem 0; text-decoration: none; color: var(--ink); align-items: center; }
.tools-list a::before { counter-increment: tool; content: "T" counter(tool); font: 600 .9rem var(--mono); color: var(--brass-ink); }
.tools-list strong { display: block; font: 600 1.2rem/1.25 var(--serif); color: var(--green); }
.tools-list span.d { display: block; font: 400 .95rem/1.45 var(--ui); color: var(--muted); }
.tools-list .go { font: 600 1.2rem var(--mono); color: var(--green); }
.tools-list a:hover strong { color: var(--red); }

.two-col { display: grid; gap: 2rem 3rem; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; } }

/* --------------------------------------------------------------- guides */
.guide-head { padding: 2.2rem 0 1.2rem; border-bottom: 1px solid var(--line); }
.guide-head .lead { max-width: 44rem; }
.guide-meta { display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: center; margin-top: 1.2rem; }
.guide-layout { display: grid; gap: 2rem; padding-top: 1.8rem; }
@media (min-width: 1000px) { .guide-layout { grid-template-columns: 16rem minmax(0, 1fr); gap: 3.5rem; } .guide-aside .aside-in { position: sticky; top: 1rem; } }
.guide-aside { font: 400 .92rem/1.45 var(--ui); }
.toc { border-top: 3px double var(--green); padding-top: .7rem; }
.toc h2 { font: 600 .75rem var(--ui); text-transform: uppercase; letter-spacing: .14em; color: var(--brass-ink); margin: 0 0 .5rem; }
.toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.toc li { margin: 0; counter-increment: toc; border-bottom: 1px solid var(--rule); }
.toc a { display: grid; grid-template-columns: 1.8rem 1fr; padding: .45rem 0; text-decoration: none; color: var(--ink); }
.toc a::before { content: counter(toc, decimal-leading-zero); font: 500 .75rem/1.6 var(--mono); color: var(--brass-ink); }
.toc a:hover { color: var(--red); }
.toc-mobile { display: none; }
@media (max-width: 999px) { .guide-aside .toc { display: none; } .toc-mobile { display: block; margin-bottom: 1rem; border: 1px solid var(--line); background: var(--sheet); padding: .2rem .9rem; } .toc-mobile summary { cursor: pointer; font: 600 .95rem var(--ui); padding: .6rem 0; color: var(--green); } .toc-mobile .toc { display: block; border-top: 0; padding-top: 0; } }
.aside-tools { margin-top: 1.4rem; border-top: 3px double var(--green); padding-top: .7rem; }
.aside-tools h2 { font: 600 .75rem var(--ui); text-transform: uppercase; letter-spacing: .14em; color: var(--brass-ink); margin: 0 0 .5rem; }
.aside-tools ul { list-style: none; padding: 0; margin: 0; }
.aside-tools li { border-bottom: 1px solid var(--rule); margin: 0; padding: .45rem 0; }
.glance { margin: 0 0 1.8rem; }
.glance ul { list-style: none; padding: 0; margin: 0; }
.glance li { position: relative; padding: .45rem 0 .45rem 1.6rem; margin: 0; line-height: 1.5; border-bottom: 1px solid var(--rule); }
.glance li:last-child { border-bottom: 0; }
.glance li::before { content: "✓"; position: absolute; left: 0; top: .35rem; font: 600 .95rem var(--mono); color: var(--green); }
.sources { margin-top: 2.6rem; border-top: 4px double var(--green); padding-top: 1rem; font: 400 .95rem/1.5 var(--ui); }
.sources h2 { font-size: 1.35rem; }
.sources ol { padding-left: 1.6rem; }
.sources li::marker { font-family: var(--mono); color: var(--brass-ink); font-size: .85em; }
.sources .ogl { font-size: .85rem; color: var(--muted); }
.related { margin-top: 2.6rem; }
.faq-mini details { border-bottom: 1px solid var(--rule); }

/* FAQ + glossary */
.faq-list details { border-bottom: 1px solid var(--line); background: transparent; }
.faq-list summary { cursor: pointer; list-style: none; padding: 1rem 2.4rem 1rem 0; position: relative; font: 600 1.12rem/1.35 var(--serif); color: var(--green); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: .3rem; top: .85rem; font: 500 1.3rem var(--mono); color: var(--brass-ink); }
.faq-list details[open] summary::after { content: "−"; color: var(--red); }
.faq-list .faq-a { padding: 0 0 1.1rem; max-width: 44rem; }
.faq-a .see { font: 500 .92rem var(--ui); }
.glossary-letters { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.glossary-letters li { margin: 0; }
.glossary-letters a { display: grid; place-items: center; min-width: 2.4rem; min-height: 2.4rem; font: 600 .95rem var(--mono); text-decoration: none; border: 1px solid var(--line); background: var(--sheet); }
.glossary-letters a:hover { border-color: var(--red); color: var(--red); }
.gl { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 0 2rem; margin: 0; }
.gl dt { font: 600 1.08rem/1.35 var(--serif); color: var(--green); padding: .9rem 0; border-top: 1px solid var(--rule); scroll-margin-top: 1rem; }
.gl dd { margin: 0; padding: .9rem 0; border-top: 1px solid var(--rule); max-width: 42rem; }
.gl dd p:last-child { margin-bottom: 0; }
.gl-letter { font: 600 1.6rem var(--mono); color: var(--brass-ink); border-top: 3px double var(--green); padding-top: .6rem; margin: 1.6rem 0 0; }
@media (max-width: 700px) { .gl { grid-template-columns: 1fr; } .gl dd { border-top: 0; padding-top: 0; } }

/* tools */
.tool-layout { display: grid; gap: 2rem; }
@media (min-width: 980px) { .tool-layout { grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); gap: 3rem; align-items: start; } }
.tool-form { background: #fff; border: 1px solid var(--line); border-top: 4px double var(--green); padding: 1.3rem 1.3rem .6rem; }
.tool-result { min-width: 0; }
.label-illus { display: inline-block; font: 600 .72rem/1.2 var(--ui); text-transform: uppercase; letter-spacing: .12em; color: var(--red); border: 1.5px solid var(--red); padding: .25rem .5rem; margin-bottom: .8rem; }
.steps-done { list-style: none; padding: 0; margin: 0 0 1.4rem; font: 400 .95rem/1.4 var(--ui); border-top: 1px solid var(--ink); }
.steps-done li { display: grid; grid-template-columns: 2rem 1fr; gap: .2rem .6rem; padding: .6rem 0; border-bottom: 1px solid var(--rule); margin: 0; }
.steps-done .n { font: 600 .8rem/1.5 var(--mono); color: var(--brass-ink); }
.steps-done .q { color: var(--muted); }
.steps-done .a { grid-column: 2; font-weight: 600; color: var(--green); }
.result-box { background: var(--sheet); border: 1px solid var(--line); border-left: 4px solid var(--green); padding: 1.2rem 1.3rem; margin-bottom: 1.4rem; }
.result-box h2 { font-size: 1.5rem; }
.result-guides { list-style: none; padding: 0; margin: 0 0 1rem; border-top: 1px solid var(--rule); }
.result-guides li { border-bottom: 1px solid var(--rule); margin: 0; padding: .55rem 0; font: 400 .98rem var(--ui); }
.result-guides li:first-child a { font-weight: 650; }
.dl-table { width: 100%; border-collapse: collapse; font: 400 .95rem/1.4 var(--ui); background: var(--sheet); }
.dl-table th, .dl-table td { padding: .7rem .6rem; border-bottom: 1px solid var(--rule); vertical-align: top; text-align: left; }
.dl-table thead th { background: var(--green); color: var(--mint); font-weight: 600; font-size: .85rem; }
.dl-table tbody th { font-weight: 600; color: var(--ink); }
.dl-table .grp th { background: var(--green-soft); color: var(--green); font: 600 .8rem var(--ui); text-transform: uppercase; letter-spacing: .1em; }
.dl-table .date { font: 600 .98rem var(--mono); color: var(--green); white-space: nowrap; }
.dl-table .law { font: 400 .78rem var(--mono); color: var(--muted); display: block; margin-top: .25rem; }
.dl-table .st { white-space: nowrap; font: 500 .82rem var(--mono); }
.st.passed { color: var(--muted); }
.st.soon { color: var(--red); font-weight: 600; }
.st.open { color: var(--green); }
.dl-table tr.is-passed .date { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--red); }
@media (max-width: 720px) {
  .dl-table thead { display: none; }
  .dl-table tr { display: grid; grid-template-columns: 1fr auto; padding: .5rem 0; border-bottom: 1px solid var(--rule); }
  .dl-table tr.grp { display: block; }
  .dl-table th, .dl-table td { border: 0; padding: .2rem .6rem; }
  .dl-table tbody th { grid-column: 1 / -1; }
  .dl-table td.rule { grid-column: 1 / -1; }
}

/* shop */
.shop-cats { display: grid; gap: 0; border-top: 1px solid var(--ink); }
.shop-cat { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); align-items: center; }
.shop-cat strong { font: 600 1.25rem/1.25 var(--serif); color: var(--green); }
.shop-cat span.d { grid-column: 1; font: 400 .95rem/1.45 var(--ui); color: var(--muted); }
.shop-cat .cnt { grid-row: 1 / 3; grid-column: 2; font: 500 .85rem var(--mono); color: var(--brass-ink); }
.shop-cat:hover strong { color: var(--red); }
.products { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.2rem; }
@media (min-width: 860px) { .products { grid-template-columns: 1fr 1fr; } }
.product { margin: 0; background: var(--sheet); border: 1px solid var(--line); border-top: 3px solid var(--green); padding: 1.1rem 1.2rem 1.2rem; display: flex; flex-direction: column; scroll-margin-top: 1rem; }
.product h3 { font-size: 1.25rem; margin-bottom: .4rem; }
.product .p-sum { font-size: 1rem; }
.product .p-look { font: 400 .92rem/1.45 var(--ui); padding-left: 1.1rem; }
.product .p-tip { font: italic 400 .98rem/1.5 var(--serif); color: var(--muted); border-left: 2px solid var(--brass); padding-left: .8rem; }
.product .p-buy { margin-top: auto; padding-top: .4rem; }
.product .p-img { margin: -.2rem 0 .9rem; }
.amz-note { font: 400 .85rem/1.45 var(--ui); color: var(--muted); }
.shop-shelf { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--ink); }
.shop-shelf li { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem; padding: .75rem 0; border-bottom: 1px solid var(--rule); align-items: center; font: 400 .95rem/1.4 var(--ui); }
.shop-shelf strong { font: 600 1.05rem var(--serif); color: var(--green); }

/* help */
.help-group { margin-bottom: 2.2rem; }
.help-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--ink); }
.help-list li { margin: 0; padding: 1rem 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem 1.2rem; align-items: start; }
.help-list h3 { font-size: 1.15rem; margin: 0; }
.help-list p { margin: 0; grid-column: 1; font: 400 .95rem/1.5 var(--ui); color: var(--muted); }
.help-list .btn { grid-row: 1 / 3; grid-column: 2; align-self: center; white-space: nowrap; }
@media (max-width: 600px) { .help-list li { grid-template-columns: 1fr; } .help-list .btn { grid-row: auto; grid-column: 1; justify-self: start; } }

/* sources page */
.src-group { margin-bottom: 2rem; }
.src-group h2 { font: 600 1rem var(--mono); color: var(--brass-ink); border-bottom: 3px double var(--green); padding-bottom: .4rem; }
.src-list { list-style: none; padding: 0; margin: 0; font: 400 .95rem/1.45 var(--ui); }
.src-list li { padding: .55rem 0; border-bottom: 1px solid var(--rule); margin: 0; }
.src-list .used { display: block; font-size: .82rem; color: var(--muted); }

/* misc */
.fig { margin: 0 0 1.5rem; }
.fig figcaption { font: 400 .82rem/1.4 var(--ui); color: var(--muted); margin-top: .4rem; }
.err-page { padding: 3rem 0; }
.page-links { list-style: none; padding: 0; margin: 1.5rem 0 0; border-top: 1px solid var(--ink); max-width: 36rem; }
.page-links li { border-bottom: 1px solid var(--rule); margin: 0; }
.page-links a { display: block; padding: .8rem 0; font: 600 1.05rem var(--serif); }
.photo-credit { font: 400 .78rem/1.4 var(--ui); color: var(--muted); }
.fig img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }
/* photo credits page */
.kit-credits-list { list-style: none; padding: 0; margin: 0 0 2rem; border-top: 3px double var(--green); max-width: 48rem; }
.kit-credits-list li { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 1rem; align-items: center; padding: .9rem 0; border-bottom: 1px solid var(--rule); margin: 0; }
.kit-credits-list img { display: block; width: 160px; height: auto; border: 1px solid var(--rule); }
.kit-credits-list strong { font: 600 1rem/1.35 var(--serif); }
@media (max-width: 480px) { .kit-credits-list li { grid-template-columns: 96px minmax(0, 1fr); gap: .75rem; } .kit-credits-list img { width: 96px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .strip, .site-head, .site-foot .foot-cols, .nav-mobile, .guide-aside { display: none; }
  body { background: #fff; }
  .sheet { box-shadow: none; }
}

/* timeline column placement (label column first on wide screens) */
.tl .s1 { grid-column-start: 2; } .tl .s2 { grid-column-start: 3; } .tl .s3 { grid-column-start: 4; } .tl .s4 { grid-column-start: 5; } .tl .s5 { grid-column-start: 6; } .tl .s6 { grid-column-start: 7; }
.tl .e2 { grid-column-end: 3; } .tl .e3 { grid-column-end: 4; } .tl .e4 { grid-column-end: 5; } .tl .e5 { grid-column-end: 6; } .tl .e6 { grid-column-end: 7; } .tl .e7 { grid-column-end: 8; }
@media (max-width: 640px) {
  .tl .s1 { grid-column-start: 1; } .tl .s2 { grid-column-start: 2; } .tl .s3 { grid-column-start: 3; } .tl .s4 { grid-column-start: 4; } .tl .s5 { grid-column-start: 5; } .tl .s6 { grid-column-start: 6; }
  .tl .e2 { grid-column-end: 2; } .tl .e3 { grid-column-end: 3; } .tl .e4 { grid-column-end: 4; } .tl .e5 { grid-column-end: 5; } .tl .e6 { grid-column-end: 6; } .tl .e7 { grid-column-end: 7; }
}
@media (max-width: 720px) {
  .tbl thead { display: none; }
  .tbl, .tbl tbody, .tbl tr, .tbl th, .tbl td { display: block; width: auto; }
  .tbl tr { padding: .7rem .2rem; border-bottom: 1px solid var(--line); }
  .tbl th, .tbl td { border: 0; padding: .15rem .6rem; }
  .tbl td.mono { font-size: 1.2rem; }
}
@media (max-width: 999px) { .guide-aside { order: 2; } }

/* ---------------------------------------------------------------- ads (5od) + cookie choice */
.ad-slot[hidden], .cookie-bar[hidden] { display: none !important; }
.ad-slot { display: block; margin: 1.4rem auto; }
.ad-slot:has(ins[data-fiveod="empty"], ins[data-fiveod="error"], ins[data-fiveod="nofit"]) { display: none !important; }
.ad-in { display: flex; justify-content: center; }
.ad-head { margin-top: 1.2rem; margin-bottom: 0; }
.ad-inline { padding: 1rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.cookie-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--green); color: var(--mint);
  border-top: 4px double var(--brass-light); box-shadow: 0 -6px 24px rgba(12, 46, 37, .3); padding: 1rem 0 1.1rem; max-height: 80vh; overflow-y: auto; }
.cookie-in { display: grid; gap: .8rem 2rem; align-items: center; }
@media (min-width: 860px) { .cookie-in { grid-template-columns: minmax(0, 1fr) auto; } }
.cookie-h { font: 600 1.45rem/1.15 var(--serif); color: #fff; margin: 0 0 .35rem; }
.cookie-txt p { margin: 0 0 .4rem; font: 400 .97rem/1.55 var(--ui); }
.cookie-bar a { color: #fff; font-weight: 600; }
.cookie-bar a:hover { color: var(--brass-light); }
.cookie-now { font-weight: 600; color: var(--brass-light); }
.cookie-btns { display: flex; flex-wrap: wrap; gap: .7rem; }
.cookie-btn { flex: 1 1 12rem; min-height: 48px; font: 600 1rem/1.1 var(--ui); background: var(--mint); color: var(--green);
  border: 1.5px solid var(--mint); border-radius: 3px; padding: .7rem 1.15rem; cursor: pointer; }
.cookie-btn:hover { background: #fff; border-color: #fff; color: var(--green-deep); }
.cookie-bar :focus-visible { outline: 3px solid var(--brass-light); outline-offset: 2px; }
.cookie-h:focus { outline: none; }
.cookie-h:focus-visible { outline: 3px solid var(--brass-light); }
@media (prefers-reduced-motion: no-preference) { .cookie-bar { animation: cookie-up .25s ease-out; } }
@keyframes cookie-up { from { transform: translateY(100%); } to { transform: none; } }
@media print { .cookie-bar, .ad-slot { display: none !important; } }