/* Hauscrate — landing
   Single committed visual world: dark, because this buyer works in Lightroom and Capture One all day.
   Palette derives from the product's actual problem — tungsten ambient vs daylight through the window. */

:root {
  --ground:     #12171D;   /* blue-biased slate, not near-black */
  --ground-2:   #0D1116;
  --surface:    #1A2129;
  --surface-2:  #212B34;
  --rule:       #2C3843;
  --rule-soft:  #232E38;

  --ink:        #E7ECF1;
  --ink-soft:   #9DAAB6;
  --ink-faint:  #6B7986;

  --tungsten:   #E8A33D;   /* warm interior ambient — the "before", the CTA */
  --tungsten-d: #C9862A;
  --daylight:   #6FA8C7;   /* cool window light — the "after", the output */
  --daylight-d: #2E4753;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --shell: 1120px;
  --gap: clamp(56px, 8vw, 104px);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 24px; }
.shell.narrow { max-width: 720px; }

a { color: var(--daylight); }
:focus-visible { outline: 2px solid var(--tungsten); outline-offset: 3px; border-radius: 2px; }

.skip {
  position: absolute; left: -9999px;
  background: var(--tungsten); color: var(--ground-2);
  padding: 10px 16px; font-weight: 600; z-index: 100;
}
.skip:focus { left: 12px; top: 12px; }

/* ── top bar ───────────────────────────── */
.topbar {
  border-bottom: 1px solid var(--rule-soft);
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 50;
}
.topbar-in { display: flex; align-items: center; gap: 16px; height: 62px; }

.wordmark {
  font-family: var(--mono);
  font-size: 15px; font-weight: 600; letter-spacing: -.02em;
  color: var(--ink);
}
.wordmark.small { font-size: 14px; }
/* The sub-pages wrap the wordmark in a home link and killed its underline with a style attribute, which the
   CSP drops — so the brand mark has been rendering underlined on every page but the homepage. */
.brand { text-decoration: none; }

.status-chip {
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  color: var(--tungsten);
  border: 1px solid color-mix(in srgb, var(--tungsten) 35%, transparent);
  background: color-mix(in srgb, var(--tungsten) 10%, transparent);
  padding: 3px 9px; border-radius: 2px;
}
.topbar-cta {
  margin-left: auto;
  font-size: 14px; font-weight: 600; color: var(--ground-2);
  background: var(--tungsten); text-decoration: none;
  padding: 8px 15px; border-radius: 3px;
  transition: background .15s ease;
}
.topbar-cta:hover { background: #F2B355; }

/* ── hero ──────────────────────────────── */
.hero { padding: clamp(52px, 8vw, 92px) 0 var(--gap); }

.eyebrow {
  font-family: var(--mono); font-size: 12px;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 20px;
}

h1 {
  margin: 0 0 22px;
  font-size: clamp(44px, 7.4vw, 82px);
  line-height: .98;
  letter-spacing: -.038em;
  font-weight: 700;
  text-wrap: balance;
}

.lede {
  margin: 0 0 clamp(36px, 5vw, 56px);
  max-width: 60ch;
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ── signature: the folder diff ────────── */
.diff {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: var(--ground-2);
  overflow: hidden;
}

.pane { display: flex; flex-direction: column; min-width: 0; }
.pane-in  { border-right: 0; }
.pane-out { background: linear-gradient(180deg, color-mix(in srgb, var(--daylight) 6%, transparent), transparent 60%); }

.pane-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size: 12.5px;
}
.pane-path { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pane-count { color: var(--ink-faint); font-variant-numeric: tabular-nums; flex-shrink: 0; }

.files { list-style: none; margin: 0; padding: 10px 0; flex: 1; }
.files li {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 4px 18px;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.75;
}
.fn { color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev { color: var(--ink-faint); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.pane-in .ev  { color: color-mix(in srgb, var(--tungsten) 78%, var(--ink-faint)); }
.pane-out .fn { color: var(--ink); }
.pane-out .ev { color: color-mix(in srgb, var(--daylight) 82%, var(--ink-faint)); }
.files .more { color: var(--ink-faint); font-style: italic; }

.pane-foot {
  padding: 11px 18px;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint);
}

.transform {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 20px 22px;
  border-left: 1px solid var(--rule-soft);
  border-right: 1px solid var(--rule-soft);
  background: var(--ground);
}
.tline { width: 1px; flex: 1; min-height: 18px; background: linear-gradient(var(--rule), transparent); }
.transform .tline:last-child { background: linear-gradient(transparent, var(--rule)); }
.tsteps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.tsteps li {
  font-family: var(--mono); font-size: 11px; letter-spacing: .02em;
  color: var(--ink-faint); white-space: nowrap;
  padding-left: 15px; position: relative;
}
.tsteps li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 7px; height: 1px; background: var(--tungsten); opacity: .7;
}

.diff-cap {
  margin: 14px 0 0;
  font-size: 13px; color: var(--ink-faint); max-width: 62ch;
}

/* ── bands ─────────────────────────────── */
.band { padding: var(--gap) 0; border-top: 1px solid var(--rule-soft); }

.sec-h {
  margin: 0 0 12px;
  font-size: clamp(27px, 3.6vw, 38px); line-height: 1.1;
  letter-spacing: -.028em; font-weight: 700; text-wrap: balance;
}
.sec-sub { margin: 0 0 clamp(32px, 4vw, 46px); max-width: 62ch; color: var(--ink-soft); }

/* Subheadings inside a long document. The legal pages asked for this with a `style="font-size:22px"`
   attribute on every h2, which the CSP (`style-src 'self'`, no 'unsafe-inline') silently discards — so every
   one of them has been rendering at full section size in production. A class survives the policy. */
.sec-h.sub { font-size: clamp(20px, 2.2vw, 23px); line-height: 1.25; letter-spacing: -.018em; margin-top: 1.6em; }

.thesis h2 {
  margin: 0 0 18px;
  font-size: clamp(26px, 3.8vw, 40px); line-height: 1.12;
  letter-spacing: -.028em; font-weight: 700; text-wrap: balance;
}
.thesis p { margin: 0; color: var(--ink-soft); font-size: clamp(16px, 1.7vw, 18px); }

/* ── pipeline: a real ordered sequence ─── */
.pipeline {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
  border-radius: 4px; overflow: hidden;
}
.pipeline li {
  background: var(--ground);
  padding: 22px 24px;
  display: grid; grid-template-columns: 46px 1fr; gap: 4px 18px;
  align-items: baseline;
}
.step {
  grid-row: span 2;
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  color: var(--tungsten); font-variant-numeric: tabular-nums;
}
.pipeline h3 { margin: 0; font-size: 17.5px; font-weight: 650; letter-spacing: -.012em; }
.pipeline p  { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.55; max-width: 62ch; }

/* ── what it does not do ───────────────── */
.nots { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px;
        background: var(--rule-soft); border: 1px solid var(--rule-soft); border-radius: 4px; overflow: hidden; }
.not { background: var(--ground); padding: 22px 24px; }
.not h3 {
  margin: 0 0 8px; font-size: 16px; font-weight: 650; letter-spacing: -.01em;
  color: var(--daylight);
}
.not p { margin: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.55; }

/* ── price ─────────────────────────────── */
.price {
  display: flex; flex-wrap: wrap; gap: 28px 44px; align-items: center;
  border: 1px solid var(--rule); border-radius: 4px;
  background: var(--surface); padding: 28px 30px;
}
.price-tag { display: flex; align-items: baseline; gap: 9px; }
.amount { font-size: clamp(44px, 6vw, 58px); font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.unit { font-family: var(--mono); font-size: 14px; color: var(--ink-faint); }
.price-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.price-list li { font-size: 15px; color: var(--ink-soft); padding-left: 20px; position: relative; }
.price-list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 9px; height: 1px; background: var(--tungsten);
}
.price-note { margin: 16px 0 0; font-size: 13.5px; color: var(--ink-faint); }

/* ── forms ─────────────────────────────── */
.waitlist { background: var(--ground-2); }

.field { display: flex; flex-direction: column; gap: 8px; }
label { font-size: 14.5px; }
.field > label { font-weight: 600; }
.hint { color: var(--ink-faint); font-weight: 400; }

.inline { display: flex; gap: 10px; flex-wrap: wrap; }

input[type=email], textarea {
  flex: 1 1 260px; min-width: 0;
  background: var(--ground); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 3px;
  padding: 12px 14px; font: inherit; font-size: 16px;
}
textarea { flex: none; width: 100%; resize: vertical; font-size: 15px; }
input[type=email]::placeholder, textarea::placeholder { color: var(--ink-faint); }
input[type=email]:focus, textarea:focus { border-color: var(--tungsten); outline: none; }

button {
  background: var(--tungsten); color: var(--ground-2);
  border: 0; border-radius: 3px;
  padding: 12px 22px; font: inherit; font-size: 15.5px; font-weight: 650;
  cursor: pointer; transition: background .15s ease;
}
button:hover:not(:disabled) { background: #F2B355; }
button:disabled { opacity: .55; cursor: default; }

.micro { margin: 0; font-size: 13px; color: var(--ink-faint); }
.err { margin: 0; font-size: 14px; color: #E88B7D; }

.banked {
  border: 1px solid var(--daylight-d);
  background: color-mix(in srgb, var(--daylight) 9%, transparent);
  border-radius: 3px; padding: 15px 18px; margin-bottom: 30px;
  font-size: 15px; color: var(--ink-soft);
}
.banked strong { color: var(--ink); }

.q-intro { margin: 0 0 22px; font-size: 16px; color: var(--ink-soft); }

fieldset.q {
  border: 0; border-top: 1px solid var(--rule-soft);
  margin: 0 0 26px; padding: 20px 0 0;
  display: flex; flex-direction: column; gap: 9px;
}
fieldset.q legend { padding: 0; font-weight: 650; font-size: 15.5px; margin-bottom: 12px; }
fieldset.q label {
  display: flex; gap: 10px; align-items: flex-start;
  color: var(--ink-soft); cursor: pointer; line-height: 1.45;
}
fieldset.q input { margin-top: .3em; accent-color: var(--tungsten); flex-shrink: 0; }
fieldset.q label:hover { color: var(--ink); }

#qualify > button { margin-top: 8px; }

/* ── footer ────────────────────────────── */
footer { border-top: 1px solid var(--rule-soft); padding: 34px 0 46px; }
.footer-in { display: flex; flex-wrap: wrap; gap: 22px 40px; justify-content: space-between; align-items: flex-start; }
.foot-note { margin: 7px 0 0; font-size: 13.5px; color: var(--ink-faint); }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
footer nav a { font-size: 14px; color: var(--ink-soft); text-decoration: none; }
footer nav a:hover { color: var(--ink); text-decoration: underline; }

/* ── responsive ────────────────────────── */
@media (max-width: 860px) {
  .diff { grid-template-columns: 1fr; }
  .transform {
    flex-direction: row; padding: 14px 18px;
    border-left: 0; border-right: 0;
    border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft);
  }
  .tline { display: none; }
  .tsteps { flex-direction: row; flex-wrap: wrap; gap: 6px 16px; }
  .pane-in { border-right: 0; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .shell { padding: 0 18px; }
  .status-chip { display: none; }
  .pipeline li { grid-template-columns: 1fr; gap: 5px; }
  .step { grid-row: auto; }
  .price { padding: 22px 20px; }
}

/* ── guides: long-form prose ────────────────
   The legal pages reach for inline style attributes to size their headings. Those are silently dropped in
   production: the CSP sets `style-src 'self'` with no 'unsafe-inline', so the attribute never applies. Long
   form gets real classes instead. */

.prose { max-width: 72ch; }

.prose > * + * { margin-top: 1.05em; }

/* The hero h1 is a 82px statement. An article headline is a headline — it has to sit below the wordmark in
   the visual hierarchy, not above it. */
.prose h1 {
  margin: 0 0 .45em;
  font-size: clamp(31px, 4.4vw, 45px);
  line-height: 1.08;
  letter-spacing: -.03em;
}
.prose .lede { margin-bottom: 1.05em; max-width: none; }
.prose h2 {
  margin: 1.9em 0 .1em;
  font-size: clamp(23px, 2.9vw, 29px); line-height: 1.18;
  letter-spacing: -.024em; font-weight: 700; text-wrap: balance;
}
.prose h3 {
  margin: 1.5em 0 .1em;
  font-size: clamp(17.5px, 2vw, 20px); line-height: 1.3;
  letter-spacing: -.014em; font-weight: 650;
  color: var(--daylight);
}
.prose p, .prose li { color: var(--ink-soft); }
.prose strong { color: var(--ink); font-weight: 650; }
.prose ul, .prose ol { margin-left: 0; padding-left: 22px; display: grid; gap: .5em; }
.prose li { line-height: 1.6; }
.prose li::marker { color: var(--ink-faint); }
.prose a { text-underline-offset: 3px; }

.prose code {
  font-family: var(--mono); font-size: .88em;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule-soft); border-radius: 3px;
  padding: 1px 5px;
}
.prose pre {
  background: var(--ground-2); border: 1px solid var(--rule);
  border-radius: 4px; padding: 15px 17px;
  overflow-x: auto;
}
.prose pre code { background: none; border: 0; padding: 0; font-size: 13px; line-height: 1.7; }

/* the honest freshness signal, not a URL year */
.checked {
  display: inline-block;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint);
  border: 1px solid var(--rule-soft); border-radius: 2px;
  padding: 4px 9px;
}

/* ── comparison tables ─────────────────────
   These are the most likely thing to be pulled into a featured snippet or an AI overview, so they get real
   <th> scope and a <caption>, and they scroll inside their own box rather than pushing the page sideways. */
.tablewrap { overflow-x: auto; border: 1px solid var(--rule-soft); border-radius: 4px; }

/* A five- or six-column comparison crushed into a 72ch reading column is unreadable: every cell wraps to
   four lines and the last column falls off the edge. So wide tables bleed out of the text column.

   They bleed LEFT ONLY, and only as far as there is genuinely empty page to bleed into.

   The first version centred the table on the viewport with `margin-left: calc(50% - width/2)`. That worked
   while the article was a single centred column, and broke the moment the article became a grid cell next
   to the rail: 50% then means 50% of the column, so on a 1265px viewport the table started at -49px —
   clipped off the left edge — while its right edge ran under the sticky rail. Bleeding in one direction
   removes the whole class of collision, because the right edge never moves.

   The 16px allowance is for the scrollbar: 100vw includes it, clientWidth does not, and without it every
   bleed over-reaches by half the scrollbar width. */
.tablewrap.wide {
  --grid-w: calc(72ch + 56px + 236px);       /* content + gap + rail, matching .article-grid */
  --gutter: 24px;                            /* never let the table touch the window edge */
  --bleed: min(200px, max(0px, (100vw - 16px - var(--grid-w)) / 2 - var(--gutter)));
  width: calc(100% + var(--bleed));
  margin-left: calc(-1 * var(--bleed));
}
.tablewrap.wide table { min-width: 760px; }
.prose table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 14.5px; }
.prose caption {
  caption-side: top; text-align: left;
  padding: 13px 16px; border-bottom: 1px solid var(--rule-soft);
  font-size: 13px; color: var(--ink-faint);
}
.prose th, .prose td {
  padding: 11px 16px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--rule-soft);
}
.prose thead th { color: var(--ink); font-weight: 650; font-size: 13.5px; background: var(--ground-2); }
.prose tbody th { color: var(--ink); font-weight: 600; }
.prose td { color: var(--ink-soft); }
.prose tbody tr:last-child th, .prose tbody tr:last-child td { border-bottom: 0; }

/* ── the single ask, at the end of a guide ── */
.ask {
  margin-top: 2.6em;
  border: 1px solid var(--rule); border-radius: 4px;
  background: var(--surface); padding: 26px 28px;
}
.ask h2 { margin-top: 0; font-size: clamp(21px, 2.4vw, 25px); }
.ask .cta {
  display: inline-block; margin-top: 6px;
  background: var(--tungsten); color: var(--ground-2);
  text-decoration: none; font-weight: 650; font-size: 15.5px;
  padding: 11px 20px; border-radius: 3px;
  transition: background .15s ease;
}
.ask .cta:hover { background: #F2B355; }

.related {
  margin-top: 2.4em; padding-top: 18px;
  border-top: 1px solid var(--rule-soft);
  font-size: 14.5px; color: var(--ink-faint);
}
.related a { margin-right: 4px; }

/* ── guides hub ────────────────────────────── */
.guidelist { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
             background: var(--rule-soft); border: 1px solid var(--rule-soft);
             border-radius: 4px; overflow: hidden; }
.guidelist li { background: var(--ground); }
.guidelist a { display: block; padding: 24px 26px; text-decoration: none; color: inherit; }
.guidelist a:hover { background: var(--surface); }
.guidelist h2, .guidelist h3 { margin: 0 0 7px; font-size: 19px; font-weight: 650; letter-spacing: -.014em; color: var(--daylight); }
.guidelist p { margin: 0; font-size: 15px; color: var(--ink-soft); max-width: 66ch; }

.topbar-nav { display: flex; gap: 20px; margin-left: 4px; }
.topbar-nav a { font-size: 14px; color: var(--ink-soft); text-decoration: none; }
.topbar-nav a:hover { color: var(--ink); }
@media (max-width: 560px) { .topbar-nav { display: none; } }

/* ══════════════════════════════════════════════════════════════════════════
   GUIDES
   The editorial thesis of every guide is "what we checked, and what we could
   not". That distinction is the design system here, not a sentence in the
   intro: verification state is a visible mark on cards, in prose and in the
   article rail.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --verified:    #7FB08A;   /* checked against a primary source */
  --verified-bg: #17281C;
  --caution:     #D9A05B;   /* could not be verified — a muted tungsten, so the
                               CTA keeps the saturated one to itself */
  --caution-bg:  #2C2213;
}

/* ── the topbar CTA wrapped to three lines on a phone ──────────────────── */
.topbar-cta { white-space: nowrap; }
@media (max-width: 560px) {
  .topbar-in { gap: 10px; }
  .topbar-cta { font-size: 13px; padding: 7px 11px; }
}

/* ── guides index: cards that echo the folder-diff panes ───────────────── */
.guidelist {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 14px;
}
.guidelist li {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color .15s ease, background .15s ease;
}
.guidelist li:hover { border-color: var(--daylight-d); background: var(--surface-2); }
.guidelist a {
  display: grid; gap: 9px;
  padding: 20px 22px 0;
  text-decoration: none; color: inherit;
}
.guidelist a:hover { background: none; }

.guide-kicker {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint);
}
.guidelist h2 {
  margin: 0; font-size: 20px; font-weight: 650;
  letter-spacing: -.016em; line-height: 1.25;
  color: var(--ink);            /* was link-blue, which fought the palette */
  text-wrap: balance;
}
.guidelist li:hover h2 { color: var(--daylight); }
.guidelist p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-soft); max-width: 68ch; }

.guide-foot {
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center;
  margin: 16px 22px 0; padding: 11px 0 14px;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  color: var(--ink-faint);
}

/* ── the verification mark, used on cards, in prose and in the rail ────── */
.mark {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 2px; white-space: nowrap;
}
.mark.is-verified { background: var(--verified-bg); color: var(--verified); }
.mark.is-caution  { background: var(--caution-bg);  color: var(--caution); }

/* ── article: content column + sticky rail in the dead space ───────────── */
.article-grid {
  display: grid;
  grid-template-columns: minmax(0, 72ch) minmax(0, 236px);
  gap: 0 56px;
  align-items: start;
  justify-content: center;
}
.article-grid > .prose { max-width: none; min-width: 0; }

.rail {
  position: sticky; top: 86px;
  display: grid; gap: 18px;
  font-size: 13.5px;
  border-left: 1px solid var(--rule-soft);
  padding-left: 20px;
}
.rail-title {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0;
}
.rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; counter-reset: rail; }
.rail li { counter-increment: rail; }
.rail a {
  display: grid; grid-template-columns: 20px 1fr; gap: 8px;
  color: var(--ink-soft); text-decoration: none; line-height: 1.35;
}
.rail a::before {
  content: counter(rail, decimal-leading-zero);
  font-family: var(--mono); font-size: 11px; color: var(--ink-faint);
  padding-top: 1px;
}
.rail a:hover { color: var(--ink); }
.rail a.is-current { color: var(--daylight); }
.rail a.is-current::before { color: var(--daylight); }

.rail-note {
  border-top: 1px solid var(--rule-soft);
  padding-top: 14px;
  font-size: 12.5px; line-height: 1.5; color: var(--ink-faint);
}

/* ── dateline: was a chip floating mid-page ────────────────────────────── */
.dateline {
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center;
  margin: 0; padding: 12px 0;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;
  color: var(--ink-faint);
}

/* ── a callout for the "here is the honest version" move these guides make ─ */
.prose .honest {
  border-left: 2px solid var(--caution);
  background: color-mix(in srgb, var(--caution) 7%, transparent);
  padding: 15px 18px; border-radius: 0 3px 3px 0;
}
.prose .honest > :first-child { margin-top: 0; }
.prose .honest p { color: var(--ink); }

@media (max-width: 1100px) {
  .article-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rail {
    position: static; border-left: 0; padding-left: 0;
    border-top: 1px solid var(--rule-soft); padding-top: 18px; margin-bottom: 34px;
    order: -1;                       /* contents before the article on narrow screens */
  }
  .rail ol { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
}