/* Hallmark · pre-emit critique: P5 H4 E5 S5 R5 V5 */
/* Hallmark · genre: editorial · macrostructure: Map / Diagram · theme: Almanac · anchor: warm-paper / ink-blue · enrichment: Tier-B hand-built SVG connection map · nav: N6 · footer: Ft6 · contrast: pass (40–41) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · mobile: pass (34,49,50–57) */
:root {
  --color-paper: oklch(97% 0.012 82);
  --color-paper-deep: oklch(93% 0.018 82);
  --color-ink: oklch(20% 0.018 72);
  --color-ink-soft: oklch(37% 0.016 72);
  --color-muted: oklch(43% 0.014 72);
  --color-rule: oklch(76% 0.018 76);
  --color-accent: oklch(43% 0.12 244);
  --color-focus: oklch(45% 0.13 244);
  --font-display: "Newsreader", serif;
  --font-body: "IBM Plex Sans", sans-serif;
  --font-outlier: "IBM Plex Mono", monospace;
  --space-3xs: .125rem; --space-2xs: .25rem; --space-xs: .5rem; --space-sm: .75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem; --space-3xl: 6rem; --space-4xl: 9rem;
  --text-xs: .72rem; --text-sm: .86rem; --text-base: 1rem; --text-md: 1.25rem; --text-lg: 1.563rem; --text-xl: 1.953rem; --text-2xl: 2.441rem; --text-3xl: 3.052rem; --text-display: clamp(3rem, 5vw + 1rem, 5.25rem);
  --ease-out: cubic-bezier(.16,1,.3,1); --dur-micro: 120ms; --dur-short: 220ms;
  --page-gutter: clamp(1rem, 4vw, 4rem); --page-max: 84rem;
}
* { box-sizing: border-box; }
html, body { overflow-x: clip; scroll-behavior: smooth; }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.62; }
a { color: inherit; text-decoration-color: var(--color-accent); text-underline-offset: .23em; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
a:active, button:active { transform: translateY(1px); }
button:disabled, a[aria-disabled="true"] { cursor: not-allowed; opacity: .55; }
.masthead, main, .letter-footer { width: min(100%, var(--page-max)); margin-inline: auto; }
.masthead { position: relative; display: grid; justify-items: center; padding: var(--space-lg) var(--page-gutter) 0; }
.issue-line, .kicker, .case-meta, .map-place { margin: 0; color: var(--color-muted); font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: .08em; }
.issue-line, .map-place { font-family: var(--font-outlier); }
.wordmark { margin: var(--space-xs) 0; color: var(--color-ink); font-family: var(--font-display); font-size: clamp(2.3rem, 5vw, 3.8rem); font-weight: 650; line-height: .86; letter-spacing: -.04em; text-align: center; text-decoration: none; }
.wordmark span { display: block; margin-top: var(--space-sm); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 400; letter-spacing: .16em; }
.desktop-nav { display: flex; align-items: center; gap: var(--space-lg); }
.desktop-nav a, .mobile-nav a, .menu-toggle { min-height: 44px; padding: var(--space-sm) var(--space-xs); font: 500 var(--text-sm)/1 var(--font-body); text-decoration: none; white-space: nowrap; }
.menu-toggle { display: none; border: 0; background: transparent; color: var(--color-ink); cursor: pointer; }
.mobile-nav { width: 100%; margin-top: var(--space-sm); border-top: 1px solid var(--color-rule); }
.mobile-nav a { display: block; border-bottom: 1px solid var(--color-rule); }
.double-rule { width: 100%; height: 5px; margin-top: var(--space-sm); border-top: 1px solid var(--color-ink); border-bottom: 1px solid var(--color-ink); }
.hero { display: grid; gap: var(--space-xl); padding: clamp(3.5rem, 8vw, 8rem) var(--page-gutter) var(--space-3xl); }
.hero-copy { min-width: 0; }
.kicker { color: var(--color-accent); font-weight: 500; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-display); font-style: normal; font-weight: 650; letter-spacing: -.035em; overflow-wrap: anywhere; }
h1 { max-width: 11ch; margin: var(--space-sm) 0 var(--space-lg); font-size: var(--text-display); line-height: .99; }
h1 span { color: var(--color-accent); }
.hero-intro { max-width: 57ch; color: var(--color-ink-soft); }
.text-link, .contact-link { display: inline-flex; gap: var(--space-xs); min-height: 44px; align-items: center; font-family: var(--font-body); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: .35em; white-space: nowrap; }
.text-link span, .contact-link span { color: var(--color-accent); font-size: var(--text-md); transition: transform var(--dur-micro) var(--ease-out); }
@media (hover:hover) and (pointer:fine) { .text-link:hover span, .contact-link:hover span { transform: translate(2px, 2px); } }
.connection-map { margin: 0; min-width: 0; }
.connection-map svg { display: block; width: 100%; height: auto; border-block: 1px solid var(--color-rule); }
.map-dot { fill: var(--color-rule); }.route { fill: none; stroke: var(--color-ink); stroke-width: 1.25; stroke-dasharray: 4 6; }.route-b { stroke: var(--color-accent); }.route-pin { fill: var(--color-paper); stroke: var(--color-ink); stroke-width: 2; }.pin-b,.pin-c { fill: var(--color-accent); stroke: var(--color-accent); }.map-label { fill: var(--color-ink-soft); font-family: var(--font-body); font-size: 14px; }.map-place { fill: var(--color-accent); font-family: var(--font-outlier); font-size: 10px; letter-spacing: 1px; }
.connection-map figcaption { max-width: 56ch; padding-top: var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); }
.proof-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: 1px solid var(--color-ink); }
.proof-strip div { min-height: 9rem; padding: var(--space-lg) var(--page-gutter); border-bottom: 1px solid var(--color-rule); }
.proof-strip div:nth-child(odd) { border-inline-end: 1px solid var(--color-rule); }.proof-strip div:nth-last-child(-n+2) { border-bottom: 0; }
.proof-strip strong { display: block; color: var(--color-accent); font-family: var(--font-display); font-size: clamp(2.5rem, 7vw, 5rem); font-variant-numeric: tabular-nums; font-weight: 650; line-height: .95; }.proof-strip span { display: block; margin-top: var(--space-sm); color: var(--color-ink-soft); font-size: var(--text-sm); }
.case-section { padding: var(--space-4xl) var(--page-gutter) var(--space-3xl); }.section-lead { max-width: 45rem; }.section-lead h2, .method-intro h2, .contact-section h2 { margin: var(--space-sm) 0 0; font-size: clamp(2.2rem, 4vw, 4.5rem); line-height: 1.03; }
.case { display: grid; gap: var(--space-md); padding: var(--space-2xl) 0; border-bottom: 1px solid var(--color-rule); }.case:first-of-type { margin-top: var(--space-xl); border-top: 1px solid var(--color-rule); }.case-meta { display: flex; justify-content: space-between; color: var(--color-accent); }.case-meta span:first-child { color: var(--color-ink); }.case h3 { max-width: 17ch; margin-bottom: var(--space-xs); font-size: clamp(1.9rem, 4vw, 3.4rem); line-height: 1.04; }.case-subtitle { margin-bottom: var(--space-lg); color: var(--color-accent); font: 400 var(--text-md)/1.35 var(--font-display); }.case-columns { display: grid; gap: var(--space-lg); }.case-columns p { max-width: 60ch; margin-bottom: 0; color: var(--color-ink-soft); }.case-tags { display: flex; flex-wrap: wrap; align-content: start; gap: var(--space-xs); padding: 0; margin: 0; list-style: none; }.case-tags li { border: 1px solid var(--color-rule); padding: var(--space-xs) var(--space-sm); color: var(--color-muted); font: 400 var(--text-xs)/1 var(--font-body); letter-spacing: .03em; }.case-links { display: flex; flex-wrap: wrap; gap: var(--space-md); margin: var(--space-lg) 0 0; }.case-links a { min-height: 44px; display: inline-flex; align-items: center; font-size: var(--text-sm); white-space: nowrap; }
.method-section { display: grid; gap: var(--space-2xl); padding: var(--space-3xl) var(--page-gutter); background: var(--color-paper-deep); }.method-intro { max-width: 47rem; }.method-steps { display: grid; gap: var(--space-lg); padding: 0; margin: 0; list-style: none; }.method-steps li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-md); border-top: 1px solid var(--color-rule); padding-top: var(--space-md); }.method-steps span { color: var(--color-accent); font-family: var(--font-outlier); font-size: var(--text-sm); }.method-steps h3 { margin-bottom: var(--space-xs); font-size: var(--text-lg); }.method-steps p { margin-bottom: 0; color: var(--color-ink-soft); }
.contact-section { padding: var(--space-4xl) var(--page-gutter); }.contact-section h2 { max-width: 18ch; }.contact-link { margin-top: var(--space-xl); color: var(--color-accent); font-size: clamp(1.4rem, 3vw, 2.2rem); }.contact-note { margin: var(--space-lg) 0 0; color: var(--color-muted); font-size: var(--text-sm); }.letter-footer { display: flex; justify-content: space-between; gap: var(--space-xl); padding: var(--space-2xl) var(--page-gutter); border-top: 1px solid var(--color-ink); }.letter-footer p { margin: 0; color: var(--color-muted); font-size: var(--text-sm); }.letter-footer strong { color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-lg); }
@media (min-width:40rem) { .hero { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; }.case { grid-template-columns: minmax(8rem, .3fr) minmax(0, 1fr); }.case-columns { grid-template-columns: minmax(0, 2fr) minmax(12rem, .8fr); }.method-section { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }.proof-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }.proof-strip div { border-bottom: 0; }.proof-strip div:not(:last-child) { border-inline-end: 1px solid var(--color-rule); }.proof-strip div:nth-child(odd) { border-inline-end: 1px solid var(--color-rule); } }
@media (min-width:60rem) { .hero { padding-top: var(--space-4xl); }.connection-map { margin-inline-end: calc(var(--page-gutter) * -1); }.case-section { padding-top: var(--space-4xl); } }
@media (max-width:39.99rem) { .desktop-nav { display:none; }.menu-toggle { display:block; position:absolute; right:var(--page-gutter); top:var(--space-lg); }.issue-line { max-width: 17ch; text-align:center; }.wordmark { margin-top: var(--space-md); }.letter-footer { display:grid; }.case-links { display:flex; flex-wrap:wrap; }.case-links a { white-space:nowrap; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition-duration:150ms !important; animation-duration:150ms !important; } }