/* Hallmark · genre: modern-minimal · macrostructures: Index-First / Narrative Workflow / Long Document · theme: inherited CattleFenceWire · enrichment: none · nav: existing · footer: existing · contrast: pass (40–41) · mobile: pass (34, 49, 50–57) */
/* Hallmark · pre-emit critique: P5 H4 E4 S5 R5 V5 */
@import url("/tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
html { scroll-behavior: smooth; }
body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.65; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
.container { width: min(100% - 2rem, var(--content-wide)); margin-inline: auto; }
.skip-link { position: absolute; inset-block-start: -6rem; inset-inline-start: var(--space-md); z-index: var(--z-sticky); background: var(--color-accent); color: var(--color-accent-ink); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); font-weight: 700; }
.skip-link:focus { inset-block-start: var(--space-sm); }

.nav { position: sticky; inset-block-start: 0; z-index: var(--z-sticky); background: var(--color-primary); color: var(--color-text-inverse); box-shadow: 0 1px 0 var(--color-border); }
.nav__inner { min-height: 4rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.nav__logo { display: flex; align-items: center; gap: var(--space-sm); min-height: 2.75rem; white-space: nowrap; }
.nav__logo-icon { inline-size: 2.25rem; block-size: 2.25rem; border: 2px solid currentColor; border-radius: var(--radius-round); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; }
.nav__logo-text { font-family: var(--font-display); font-size: var(--text-base); font-weight: 700; letter-spacing: 0.02em; }
.nav__logo-text span { color: var(--color-accent); }
.nav__links { position: absolute; inset: 4rem 0 auto; display: none; padding: var(--space-md); background: var(--color-primary); border-top: var(--rule-thin) solid var(--color-border); }
.nav__links--open { display: grid; gap: var(--space-xs); }
.nav__link, .nav__cta, .nav__toggle, .nav__theme-toggle { min-height: 2.75rem; white-space: nowrap; }
.nav__link { display: flex; align-items: center; padding-inline: var(--space-sm); color: var(--color-text-inverse); border-radius: var(--radius-sm); }
.nav__link[aria-current="page"] { color: var(--color-accent); }
.nav__cta { display: inline-flex; align-items: center; justify-content: center; padding-inline: var(--space-md); background: var(--color-accent); color: var(--color-accent-ink); border-radius: var(--radius-md); font-weight: 700; }
.nav__controls { display: flex; align-items: center; gap: var(--space-xs); }
.nav__toggle, .nav__theme-toggle { inline-size: 2.75rem; place-items: center; border: var(--rule-thin) solid var(--color-border); border-radius: var(--radius-md); background: transparent; color: var(--color-text-inverse); cursor: pointer; }
.nav__toggle { display: grid; }
.nav__theme-toggle { display: none; }
.nav__toggle svg, .nav__theme-toggle svg { inline-size: 1.25rem; block-size: 1.25rem; }
.moon-icon { display: none; }
[data-theme="dark"] .sun-icon { display: none; }
[data-theme="dark"] .moon-icon { display: block; }

.breadcrumb { display: flex; gap: var(--space-xs); align-items: center; padding-block: var(--space-lg); color: var(--color-text-muted); font-size: var(--text-sm); overflow-x: auto; }
.breadcrumb a, .breadcrumb span { white-space: nowrap; }
.breadcrumb a { color: var(--color-primary); font-weight: 700; }
.page-head { padding-block: var(--space-xl) var(--space-2xl); border-bottom: var(--rule-thin) solid var(--color-divider); }
.page-head__grid { display: grid; gap: var(--space-lg); }
.page-head h1 { margin: 0; max-width: 13ch; min-width: 0; overflow-wrap: anywhere; font-family: var(--font-display); font-size: var(--text-display-s); line-height: 0.98; letter-spacing: -0.025em; font-style: normal; }
.page-head p { margin: 0; max-width: 62ch; color: var(--color-text-muted); font-size: var(--text-md); }
.page-head__note { align-self: end; padding: var(--space-md) 0 var(--space-md) var(--space-lg); border-inline-start: var(--rule-strong) solid var(--color-accent); color: var(--color-text); font-weight: 600; }

.section { padding-block: var(--space-2xl); }
.section + .section { border-top: var(--rule-thin) solid var(--color-divider); }
.section-head { display: grid; gap: var(--space-md); margin-block-end: var(--space-xl); }
.section-head h2 { margin: 0; max-width: 16ch; min-width: 0; overflow-wrap: anywhere; font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.05; font-style: normal; }
.section-head p { margin: 0; max-width: 62ch; color: var(--color-text-muted); }

.index-layout { display: grid; gap: var(--space-2xl); }
.resource-group + .resource-group { margin-block-start: var(--space-xl); }
.resource-group h2 { margin: 0 0 var(--space-sm); font-family: var(--font-display); font-size: var(--text-xl); font-style: normal; }
.resource-list { border-top: var(--rule-thin) solid var(--color-border); }
.resource-link { display: grid; gap: var(--space-sm); padding-block: var(--space-lg); border-bottom: var(--rule-thin) solid var(--color-border); }
.resource-link__title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; color: var(--color-primary); }
.resource-link__title span:last-child { flex: 0 0 auto; color: var(--color-accent); }
.resource-link p { margin: 0; max-width: 60ch; color: var(--color-text-muted); }
.resource-link small { color: var(--color-text-faint); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.side-note { align-self: start; padding: var(--space-lg); background: var(--color-surface); color: var(--color-text); border: var(--rule-thin) solid var(--color-border); border-radius: var(--radius-lg); }
.side-note h2 { margin: 0 0 var(--space-md); font-family: var(--font-display); font-size: var(--text-xl); font-style: normal; }
.side-note ol { margin: 0; padding-inline-start: var(--space-lg); color: var(--color-text-muted); }
.side-note li + li { margin-block-start: var(--space-sm); }

.workflow { counter-reset: workflow; display: grid; gap: var(--space-xl); }
.workflow__step { counter-increment: workflow; display: grid; gap: var(--space-md); padding-block: var(--space-xl); border-top: var(--rule-strong) solid var(--color-primary); }
.workflow__step::before { content: "0" counter(workflow); color: var(--color-accent); font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; }
.workflow__step h2 { margin: 0; font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.05; font-style: normal; }
.workflow__step p { margin: 0; max-width: 65ch; color: var(--color-text-muted); }
.choice-strip { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.choice-strip span { padding: var(--space-xs) var(--space-sm); background: var(--color-surface-2); color: var(--color-text); border: var(--rule-thin) solid var(--color-border); border-radius: var(--radius-round); font-size: var(--text-sm); font-weight: 700; }

.calculator { display: grid; gap: var(--space-xl); padding: var(--space-lg); background: var(--color-surface); color: var(--color-text); border: var(--rule-thin) solid var(--color-border); border-radius: var(--radius-xl); }
.calculator__form { display: grid; gap: var(--space-md); }
.field { display: grid; gap: var(--space-2xs); }
.field label { font-weight: 700; }
.field input, .field select { min-height: 2.75rem; width: 100%; padding-inline: var(--space-sm); color: var(--color-text); background: var(--color-bg); border: var(--rule-thin) solid var(--color-border); border-radius: var(--radius-md); outline: 2px solid transparent; outline-offset: 1px; }
.field__help { min-height: 1.5em; color: var(--color-text-muted); font-size: var(--text-sm); }
.field input[aria-invalid="true"] { border-color: var(--color-error); background: var(--color-error-highlight); }
.button { min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; width: fit-content; padding-inline: var(--space-lg); border: var(--rule-thin) solid var(--color-primary); border-radius: var(--radius-md); background: var(--color-primary); color: var(--color-text-inverse); font-weight: 700; white-space: nowrap; cursor: pointer; }
.button--secondary { background: transparent; color: var(--color-primary); }
.button[aria-disabled="true"], .button:disabled { opacity: 0.5; cursor: not-allowed; }
.button[aria-busy="true"] { cursor: wait; }
.button.is-error { border-color: var(--color-error); background: var(--color-error); }
.button.is-success { border-color: var(--color-success); background: var(--color-success); }
.calculator__result { padding: var(--space-lg); background: var(--color-primary-highlight); color: var(--color-text); border-inline-start: var(--rule-strong) solid var(--color-primary); }
.calculator__result h3 { margin: 0 0 var(--space-sm); font-family: var(--font-display); font-size: var(--text-xl); font-style: normal; }
.result-grid { display: grid; gap: var(--space-md); }
.result-item strong { display: block; font-family: var(--font-display); font-size: var(--text-2xl); font-variant-numeric: tabular-nums; }
.result-item span { color: var(--color-text-muted); font-size: var(--text-sm); }
.result-note { margin: var(--space-md) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); }

.scenario-compare { display: grid; gap: var(--space-xl); }
.scenario { padding-block: var(--space-lg); border-top: var(--rule-thin) solid var(--color-border); }
.scenario h3 { margin: 0 0 var(--space-sm); font-family: var(--font-display); font-size: var(--text-xl); font-style: normal; }
.scenario ul { margin: 0; padding-inline-start: var(--space-lg); color: var(--color-text-muted); }
.scenario li + li { margin-block-start: var(--space-xs); }

.long-doc { max-width: var(--content-reading); padding-block: var(--space-2xl) var(--space-3xl); }
.long-doc .lede { color: var(--color-text); font-size: var(--text-md); }
.long-doc h2 { margin: var(--space-2xl) 0 var(--space-md); font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.15; font-style: normal; }
.long-doc h3 { margin: var(--space-xl) 0 var(--space-sm); font-family: var(--font-display); font-size: var(--text-lg); font-style: normal; }
.long-doc p, .long-doc li { color: var(--color-text-muted); }
.long-doc ul, .long-doc ol { padding-inline-start: var(--space-lg); }
.long-doc li + li { margin-block-start: var(--space-xs); }
.decision-band { margin-block: var(--space-xl); padding: var(--space-lg); background: var(--color-primary-highlight); color: var(--color-text); border-inline-start: var(--rule-strong) solid var(--color-primary); }
.decision-band strong { display: block; margin-block-end: var(--space-xs); font-family: var(--font-display); font-size: var(--text-lg); }
.source-list a, .long-doc a { color: var(--color-primary); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.2em; }

.cta-band { padding-block: var(--space-2xl); background: var(--color-primary); color: var(--color-text-inverse); }
.cta-band__inner { display: grid; gap: var(--space-lg); align-items: end; }
.cta-band h2 { margin: 0; max-width: 18ch; font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.05; font-style: normal; }
.cta-band p { margin: 0; max-width: 60ch; color: var(--color-text-inverse); }
.cta-band .button { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }

.footer { padding-block: var(--space-2xl) var(--space-lg); background: var(--color-surface); color: var(--color-text); border-top: var(--rule-thin) solid var(--color-border); }
.footer__grid { display: grid; gap: var(--space-xl); }
.footer__brand strong { display: block; font-family: var(--font-display); font-size: var(--text-xl); }
.footer__brand p { max-width: 48ch; color: var(--color-text-muted); }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); }
.footer__links a { color: var(--color-primary); font-weight: 700; white-space: nowrap; }
.footer__bottom { margin-block-start: var(--space-xl); padding-block-start: var(--space-md); border-top: var(--rule-thin) solid var(--color-divider); color: var(--color-text-muted); font-size: var(--text-sm); }

:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.button:not(.button--secondary):focus-visible { outline-color: var(--color-text-inverse); box-shadow: 0 0 0 var(--space-2xs) var(--color-text); }
.nav__cta:focus-visible, .cta-band .button:focus-visible { outline-color: var(--color-accent-ink); box-shadow: 0 0 0 var(--space-2xs) var(--color-text-inverse); }
@media (hover: hover) and (pointer: fine) {
  .nav__link:hover { color: var(--color-accent); }
  .nav__cta:hover, .cta-band .button:hover { transform: translateY(-1px); background: var(--color-accent-hover); }
  .nav__toggle:hover, .nav__theme-toggle:hover { background: var(--color-primary-hover); }
  .resource-link:hover .resource-link__title { color: var(--color-accent-hover); }
  .button:hover { transform: translateY(-1px); background: var(--color-primary-hover); }
  .button--secondary:hover { background: var(--color-primary-highlight); color: var(--color-primary); }
  .field input:hover, .field select:hover { background: var(--color-surface-2); }
  .footer__links a:hover { color: var(--color-accent-hover); }
}
.nav__cta:active, .button:active, .resource-link:active { transform: translateY(1px); }
.nav__link[aria-disabled="true"], .nav__cta[aria-disabled="true"], .footer__links a[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.nav__link[aria-busy="true"], .nav__cta[aria-busy="true"], .footer__links a[aria-busy="true"] { cursor: wait; }
.nav__link.is-error, .nav__cta.is-error, .footer__links a.is-error { color: var(--color-error); }
.nav__link.is-success, .nav__cta.is-success, .footer__links a.is-success { color: var(--color-success); }
.resource-link[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.resource-link[aria-busy="true"] { cursor: wait; }
.resource-link.is-error { color: var(--color-error); }
.resource-link.is-success { color: var(--color-success); }

@media (min-width: 40rem) {
  .nav__logo-text { font-size: var(--text-lg); }
  .nav__theme-toggle { display: grid; }
  .page-head__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); align-items: end; }
  .section-head { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: end; }
  .resource-link { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
  .workflow__step { grid-template-columns: 4rem minmax(0, 1fr); }
  .workflow__step::before { grid-row: 1 / span 3; }
  .calculator { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scenario-compare { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .cta-band__inner { grid-template-columns: minmax(0, 1fr) auto; }
  .footer__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; }
}

@media (min-width: 60rem) {
  .nav__toggle { display: none; }
  .nav__links { position: static; display: flex; align-items: center; gap: var(--space-2xs); padding: 0; border: 0; }
  .index-layout { grid-template-columns: minmax(0, 1.55fr) minmax(15rem, 0.45fr); }
  .side-note { position: sticky; inset-block-start: 6rem; }
}

@media (max-width: 39.99rem) {
  .section-head { grid-template-columns: minmax(0, 1fr); }
  .page-head h1 { max-width: 10ch; }
}

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