/* Hallmark · shape: Manifesto · genre: modern-minimal · theme: Cobalt (by request) · job: hire · draw: 493509
 * hero: Corridor · nav: floating pill · footer: letter close · imagery: none · signature: the ASCII lead field, scattered calls on the left resolving into routed lanes on the right
 * axes: light/grotesk-sans/cool · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P5 H4 E4 S4 R4 V4 · weakest: H, a Corridor over a busy field can lose the head; the field is masked to a calm ellipse behind the text and the densest cells sit at the right edge */
@import url("./tokens.css");
@import url("./base.css");

/* ---------- controls ---------- */
.key { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-input); background: var(--color-key-face); color: var(--color-ink); font: 500 var(--text-md)/1 var(--font-display); text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: var(--shadow-key); transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.key:hover { transform: translateY(-1px); }
.key:active { transform: translateY(3px); box-shadow: var(--shadow-key-press); }
.key:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.key[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.key--primary { background: var(--color-accent); border-color: var(--color-accent-edge); color: var(--color-accent-ink); box-shadow: var(--shadow-key-accent); }
.key--primary:hover { background: var(--color-accent-deep); }
.key--sm { min-height: 44px; padding: 0 var(--space-lg); font-size: var(--text-sm); }
.nav .key { margin-left: var(--space-xs); }
.mono { font-family: var(--font-outlier); }
a:not([class]) { text-decoration-color: var(--color-rule-2); }
a:not([class]):hover { text-decoration-color: var(--color-accent); }

/* ---------- nav: floating pill ---------- */
.nav-wrap { position: fixed; inset: var(--space-md) 0 auto; z-index: var(--z-sticky-nav); padding-inline: var(--space-md); pointer-events: none; }
.nav { pointer-events: auto; display: flex; align-items: center; gap: var(--space-lg); max-width: 880px; margin-inline: auto; padding: var(--space-xs) var(--space-xs) var(--space-sm) var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: calc(var(--radius-input) + var(--space-xs)); background: color-mix(in oklab, var(--color-paper) 88%, transparent); backdrop-filter: blur(10px); box-shadow: var(--shadow-card); }
.wordmark { font: 600 var(--text-lg)/1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); text-decoration: none; }
.wordmark:focus-visible, .nav__links a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: 4px; }
.nav__links { display: flex; gap: var(--space-lg); margin: 0 0 0 auto; padding: 0; list-style: none; }
.nav__links a { font: 500 var(--text-sm)/1 var(--font-display); color: var(--color-ink-2); text-decoration: none; transition: color var(--dur-short) var(--ease-out); }
.nav__links a:hover { color: var(--color-accent); }

/* ---------- hero: corridor over the field ---------- */
.hero { position: relative; display: grid; min-height: 100svh; background: var(--color-paper); background-image: radial-gradient(var(--color-glyph-1) 1px, transparent 1.2px); background-size: var(--cell-w) var(--cell-h); isolation: isolate; }
.js .hero { background-image: none; }
.field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero__inner { position: relative; z-index: 1; display: grid; place-items: center; padding-block: 128px var(--space-3xl); }
.hero__text { display: grid; justify-items: center; gap: var(--space-lg); text-align: center; max-width: 44ch; margin-top: 48px; }
.hero h1 { max-width: 12ch; font-size: clamp(3.25rem, 7.4vw, 7.25rem); line-height: 0.98; letter-spacing: -0.035em; }
.hero .lead { max-width: 34ch; color: var(--color-ink-2); }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); margin-top: var(--space-xs); }
.field__key { position: absolute; left: var(--gutter); bottom: var(--space-xl); padding: var(--space-2xs) var(--space-sm); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-paper); font-size: var(--text-sm); color: var(--color-muted); }
.field__key .mono { color: var(--color-accent); }

/* ---------- beliefs: rows ---------- */
.beliefs { padding-block: var(--section-gap) var(--section-gap-s); }
.beliefs__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); }
.beliefs h2 { grid-column: 1 / 5; align-self: start; position: sticky; top: 120px; }
.rows { grid-column: 5 / 13; margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-rule-2); }
.row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.row h3 { font-size: var(--text-2xl); font-weight: 600; line-height: 1.1; }
.row p { color: var(--color-ink-2); }

/* ---------- one lead, followed: graphite ruler ---------- */
.graphite { background: var(--color-graphite); color: var(--color-graphite-ink); }
.graphite h2 { color: var(--color-graphite-ink); }
.graphite .lead { color: var(--color-graphite-muted); }
.route { padding-block: var(--section-gap-s); }
.route__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-md) var(--gap-columns); align-items: end; }
.route__head h2 { grid-column: 1 / 7; }
.route__head .lead { grid-column: 8 / 13; }
.ruler { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap-columns); margin: var(--space-3xl) 0 0; padding: var(--space-2xl) 0 0; list-style: none; }
.ruler::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--color-graphite-muted); transform-origin: left; }
.ruler::after { content: ""; position: absolute; inset: -6px 0 auto; height: 13px; background-image: linear-gradient(to right, var(--color-graphite-glyph-2) 1px, transparent 1px); background-size: calc(100% / 40) 100%; opacity: 0.8; }
.ruler li { position: relative; display: grid; gap: var(--space-xs); align-content: start; }
.ruler li::before { content: ""; position: absolute; top: calc(-1 * var(--space-2xl) - 10px); left: 0; width: 2px; height: 21px; background: var(--color-graphite-ink); }
.ruler__t { font-size: var(--text-sm); color: var(--color-graphite-muted); }
.ruler strong { font: 600 var(--text-section)/1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-graphite-ink); overflow-wrap: break-word; min-width: 0; }
.ruler li span:last-child { color: var(--color-graphite-muted); max-width: 22ch; }
.ruler .is-miss strong { color: var(--color-graphite-muted); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--color-error); }
.ruler .is-miss::before { background: var(--color-error); }
.ruler .is-done strong { color: var(--color-accent-2); }
.ruler .is-done::before { background: var(--color-accent-2); width: 3px; }
.route__log { margin-top: var(--space-3xl); padding: var(--space-md) var(--space-lg); border-radius: var(--cut-l) 4px; background: var(--color-graphite-2); color: var(--color-graphite-muted); font-size: var(--text-sm); overflow-x: auto; white-space: nowrap; }
.js .ruler[data-reveal]::before { transform: scaleX(0); transition: transform 0.8s var(--ease-out); }
.js .ruler[data-reveal] li { opacity: 0; transition: opacity var(--dur-long) var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms + 200ms); }
.js .ruler[data-reveal].is-in::before { transform: scaleX(1); }
.js .ruler[data-reveal].is-in li { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .js .ruler[data-reveal]::before { transform: none; transition: none; } .js .ruler[data-reveal] li { opacity: 1; transition: none; } }

/* ---------- network: three layers ---------- */
.network { padding-block: var(--section-gap-l) var(--section-gap); }
.split-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-md) var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.split-head h2 { grid-column: 1 / 7; }
.split-head .lead { grid-column: 8 / 13; color: var(--color-ink-2); }
.layers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; counter-reset: layer; }
.cut { border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); box-shadow: var(--shadow-card); }
@supports (corner-shape: bevel) { .cut { border-radius: var(--cut-l) 4px var(--cut-l) 4px; corner-shape: bevel round bevel round; } }
.layer { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-md); min-height: 320px; padding: var(--space-xl); }
.layer:nth-child(2) { margin-top: var(--space-2xl); }
.layer:nth-child(3) { margin-top: calc(var(--space-2xl) * 2); background: var(--color-accent-wash); border-color: var(--color-glyph-2); }
.layer + .layer::before { content: ""; position: absolute; top: var(--space-2xl); left: calc(-1 * var(--gap-columns) - 1px); width: var(--gap-columns); height: 1px; background: var(--color-rule-2); }
.layer + .layer::after { content: ""; position: absolute; top: 0; left: calc(-1 * var(--gap-columns) / 2 - 1px); width: 1px; height: var(--space-2xl); background: var(--color-rule-2); }
.layer h3 { font-size: var(--text-2xl); }
.layer p { color: var(--color-ink-2); }
.chip { justify-self: start; max-width: 100%; padding: var(--space-xs) var(--space-sm); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--cut) 3px; background: var(--color-paper-2); font: 400 var(--text-sm)/1.3 var(--font-outlier); color: var(--color-accent-deep); overflow-wrap: anywhere; }

/* ---------- rates: the rate card ---------- */
.rates { padding-block: var(--section-gap-s) var(--section-gap); border-top: var(--rule-hair) solid var(--color-rule); }
.card-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.card-table thead th { padding: 0 var(--space-md) var(--space-sm); font: 500 var(--text-sm)/1.3 var(--font-display); color: var(--color-muted); text-align: left; border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.card-table tbody th, .card-table td { padding: var(--space-lg) var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); text-align: left; vertical-align: baseline; }
.card-table tbody th { width: 58%; font: 500 var(--text-lg)/1.3 var(--font-display); color: var(--color-ink); }
.card-table td { color: var(--color-ink-2); }
.card-table .is-lead { background: var(--color-accent-wash); }
.card-table .is-lead th { font-weight: 600; }
.price { font: 600 var(--text-3xl)/1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); margin-right: var(--space-xs); }

/* ---------- pilot band ---------- */
.pilot { padding-block: var(--section-gap-s); background: var(--color-paper-2); border-block: var(--rule-hair) solid var(--color-rule); }
.pilot__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-md) var(--gap-columns); align-items: center; }
.pilot h2 { grid-column: 1 / 8; font-size: var(--text-display-s); max-width: 18ch; }
.pilot .lead { grid-column: 8 / 11; color: var(--color-ink-2); }
.pilot .key { grid-column: 11 / 13; justify-self: end; }

/* ---------- footer: letter close ---------- */
.footer { padding-block: var(--section-gap) var(--space-2xl); }
.footer__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); }
.letter { grid-column: 1 / 9; display: grid; gap: var(--space-lg); }
.letter__line { font: 600 var(--text-section)/1.08 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); max-width: 24ch; text-wrap: balance; }
.letter__contact { display: flex; flex-wrap: wrap; gap: var(--space-md); font-size: var(--text-lead); }
.letter__sign { color: var(--color-muted); }
.footer__legal { grid-column: 1 / 13; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--gap-columns); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }
.footer__legal p:last-child { justify-self: end; }
.fill { padding: 0 0.25em; border: 1px dashed color-mix(in oklch, var(--color-muted) 70%, transparent); border-radius: 3px; color: var(--color-muted); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---------- responsive ---------- */
@media (max-width: 60rem) {
  .nav__links { display: none; }
  .nav { justify-content: space-between; }
  .beliefs h2, .rows, .route__head h2, .route__head .lead, .split-head h2, .split-head .lead, .pilot h2, .pilot .lead, .pilot .key, .letter, .footer__legal { grid-column: 1 / -1; }
  .beliefs h2 { position: static; }
  .pilot .key { justify-self: start; }
  .row { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .ruler { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding: 0 0 0 var(--space-xl); margin-top: var(--space-2xl); }
  .ruler::before { inset: 0 auto 0 0; width: 1px; height: auto; transform-origin: top; }
  .ruler::after { display: none; }
  .ruler li::before { top: 6px; left: calc(-1 * var(--space-xl) - 10px); width: 21px; height: 2px; }
  .ruler .is-done::before { width: 21px; height: 3px; }
  .js .ruler[data-reveal]::before { transform: scaleY(0); }
  .js .ruler[data-reveal].is-in::before { transform: scaleY(1); }
  .layers { grid-template-columns: minmax(0, 1fr); }
  .layer, .layer:nth-child(2), .layer:nth-child(3) { margin-top: 0; min-height: 0; }
  .layer + .layer::before { display: none; }
  .layer + .layer::after { top: calc(-1 * var(--gap-columns)); left: var(--space-xl); height: var(--gap-columns); }
  .card-table tbody th { width: auto; }
  .footer__legal { grid-template-columns: minmax(0, 1fr); }
  .footer__legal p:last-child { justify-self: start; }
  .field__key { display: none; }
}
@media (max-width: 40rem) {
  .card-table thead { display: none; }
  .card-table tr { display: grid; padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
  .card-table tbody th, .card-table td { padding: var(--space-2xs) var(--space-sm); border: 0; }
  .ruler strong { font-size: var(--text-3xl); }
}

/* ---------- nav: current page ---------- */
.nav__links a[aria-current="page"] { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.5em; }

/* ---------- libraries: hero with the state map ---------- */
.lib-hero { padding-block: 160px var(--section-gap-s); }
.lib-hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; }
.lib-hero__text { display: grid; gap: var(--space-lg); align-content: center; }
.lib-hero h1 { font-size: var(--text-display); max-width: 11ch; }
.lib-hero .lead { color: var(--color-ink-2); }
.pick { display: grid; gap: var(--space-md); justify-items: start; margin-top: var(--space-md); padding: var(--space-xl); }
.pick__name { font: 600 var(--text-3xl)/1.05 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); }
.pick__status { color: var(--color-ink-2); max-width: 40ch; }
.usmap { margin: 0; }
.usmap__grid { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); grid-template-rows: repeat(8, auto); gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.usmap__grid li { min-width: 0; }
.tile { display: grid; place-items: center; aspect-ratio: 1; border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--cut) 3px; background: var(--color-key-face); box-shadow: 0 2px 0 0 var(--color-key-edge); font: 500 var(--text-sm)/1 var(--font-outlier); color: var(--color-ink-2); text-decoration: none; transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.tile:hover { transform: translateY(-1px); color: var(--color-accent); border-color: var(--color-glyph-3); }
.tile:active { transform: translateY(2px); box-shadow: var(--shadow-key-press); }
.tile:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.tile[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent-edge); color: var(--color-accent-ink); box-shadow: 0 2px 0 0 var(--color-accent-edge); }
.usmap figcaption { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- libraries: the index ---------- */
.lib-index { padding-block: var(--section-gap-s) var(--section-gap); border-top: var(--rule-hair) solid var(--color-rule); }
.idx { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); }
.idx__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); padding-bottom: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.idx h3 { font-size: var(--text-title); }
.idx__n { font: 500 var(--text-sm)/1 var(--font-outlier); color: var(--color-muted); }
.idx__list { margin: 0; padding: 0; list-style: none; }
.idx__list li { display: grid; gap: var(--space-3xs); padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); scroll-margin-top: 120px; }
.idx__name { font: 500 var(--text-md)/1.3 var(--font-display); color: var(--color-ink); }
.idx__list code { font: 400 var(--text-xs)/1.3 var(--font-outlier); color: var(--color-muted); overflow-wrap: anywhere; }
.idx__list li:target, .idx__list li.is-picked { background: var(--color-accent-wash); }
.idx__list li:target code, .idx__list li.is-picked code { color: var(--color-accent-deep); }

/* ---------- libraries: what a library does ---------- */
.lib-how { padding-block: var(--section-gap-s); }
.lib-how h2 { grid-column: 1 / 5; align-self: start; color: var(--color-graphite-ink); }
.rows--graphite { border-top-color: var(--color-graphite-glyph-2); }
.rows--graphite .row { border-bottom-color: var(--color-graphite-glyph-1); }
.rows--graphite h3 { color: var(--color-graphite-ink); }
.rows--graphite p { color: var(--color-graphite-muted); }

/* ---------- 404 ---------- */
.lost h1 { max-width: 10ch; }
.lost__log { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md); margin-top: var(--space-xl); padding: var(--space-sm) var(--space-lg); border-radius: var(--cut-l) 4px; background: var(--color-graphite); color: var(--color-graphite-muted); font-size: var(--text-sm); }
.lost__log span:nth-child(2) { color: var(--color-accent-2); }

@media (max-width: 60rem) {
  .lib-hero { padding-top: 120px; }
  .lib-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .idx { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lib-how h2 { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  .usmap__grid { gap: var(--space-2xs); }
  .tile { font-size: 0.625rem; border-radius: 4px 2px; }
  .idx { grid-template-columns: minmax(0, 1fr); }
}