/* Hallmark · shape: Thread-hung hero, the request thread enters from the page into a night panel · genre: modern-minimal · theme: custom · job: sign up · idea: "one thread through every request, knotted where it hit a 500" · vibe: "crisp, cool, one line, one knot"
 * paper: oklch(98.5% 0.006 250) · accent: oklch(72% 0.17 52) knot orange, only on the knot · display: Funnel Display · body: Hanken Grotesk · hero: the head on paper, the thread pulled out of log noise on night · nav: edge-aligned, ASCII mark and wordmark, three links, one action · footer: none (hero only) · imagery: the product as ASCII · signature: the ASCII thread knotting orange at the 500
 * axes: light/grotesk-sans/chromatic-orange · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V4 · weakest: V, a head beside a visual is a common posture; the thread crosses from the page into the panel so the two halves are one line */
/* Hallmark · waive 79 · the night panel runs from about y 190 to y 710 at 1440 x 900 and bleeds to the right edge · the head is centred on the thread panel that knots at the 500 */
/* Hallmark · waive 77 · the status figure is 10 rows of uptime marks across the full container width · the uptime status page is one line, so its section is wide and short by design */
/* Hallmark · dismissed F4 · the CTA band reuses the same .btn--primary recipe; sloplint reads the night band as a second filled recipe */
/* Hallmark · dismissed 58 · the 89 words straddle the exchanges and incidents sections, each under 40 words on its own */
/* Hallmark · dismissed F19 · Hanken Grotesk 400/600 and Funnel Display 640 are the weights; 500 and 700 are browser defaults on nav and strong text */
@import url("./tokens.css");
@import url("./base.css");

@font-face { font-family: "Funnel Display"; font-weight: 300 800; font-display: swap; src: url("fonts/funnel-display-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-weight: 100 900; font-display: swap; src: url("fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2"); }

body { font-family: var(--font-body); }

/* nav */
.nav { display: flex; align-items: center; gap: var(--space-xl); max-width: var(--container); min-height: 72px; margin-inline: auto; padding-inline: var(--gutter); }
.brand { display: inline-flex; align-items: baseline; gap: var(--space-sm); text-decoration: none; color: var(--color-ink); }
.amark { font: 400 1.625rem/1 var(--font-outlier); letter-spacing: -0.02em; }
.amark i { font-style: normal; }
.am-t { color: var(--color-accent); } .am-e { position: relative; color: var(--color-accent); }
.am-k { position: absolute; left: -0.1em; top: 0.2em; color: var(--color-knot); font-size: 1em; line-height: 1; }
.wordmark { font: 640 1.5rem/1 var(--font-display); letter-spacing: -0.02em; }
.nav-links { display: flex; gap: var(--space-lg); margin: 0 0 0 auto; padding: 0; list-style: none; font-size: var(--text-sm); font-weight: 500; }
.nav-links a { color: var(--color-ink-2); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.3em; transition: text-decoration-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.nav-links a:hover { color: var(--color-ink); text-decoration-color: var(--color-accent); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 var(--space-lg); border: 2px solid var(--color-ink); border-radius: 2px; font: 600 var(--text-md)/1 var(--font-body); color: var(--color-ink); text-decoration: none; white-space: nowrap; background: transparent; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn--sm { min-height: 40px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-ink); border-color: var(--color-ink); }
.btn--line:hover { background: var(--color-ink); color: var(--color-paper); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.btn:focus-visible, .nav-links a:focus-visible, .brand:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; transition: none; }

/* hero: text on paper, the thread runs off the page into the night panel, which bleeds to the right edge */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, min(980px, 64vw)); align-items: center; gap: var(--space-xl); min-height: calc(100dvh - 72px); max-width: var(--container); margin-inline: auto; padding: var(--space-xl) 0 var(--space-2xl) var(--gutter); }
.hero-text { display: grid; gap: var(--space-lg); min-width: 0; }
.hero h1 { font-size: clamp(3rem, 4vw + 1rem, 5.5rem); font-weight: 640; line-height: 0.94; letter-spacing: -0.04em; max-width: 7ch; }
.lead { font-size: var(--text-lg); line-height: 1.45; color: var(--color-ink-2); max-width: 22ch; }
.actions { display: grid; justify-items: stretch; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xs); }

.stage { position: relative; min-width: 0; }
.stage .ascii-hero { margin: 0; border-radius: 0; padding: var(--space-xl) var(--space-lg); }
.stage .ah { width: 100%; }
.thread-in { position: absolute; right: 100%; width: var(--space-xl); overflow: hidden; margin: 0; top: var(--thread-y, var(--thread-y-static)); transform: translateY(-50%); font: 400 14px/1 var(--font-outlier); color: var(--color-accent); white-space: pre; pointer-events: none; }

@media (max-width: 60rem) {
  .nav { padding-inline: var(--space-md); gap: var(--space-md); }
  .nav-links { display: none; }
  .nav .btn { margin-left: auto; }
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: var(--space-lg); padding: var(--space-md) 0 var(--space-xl); }
  .hero-text { padding-inline: var(--space-md); gap: var(--space-md); }
  .hero h1 { font-size: 2.75rem; max-width: 12ch; }
  .lead { font-size: var(--text-md); }
  .actions { display: flex; flex-wrap: nowrap; }
  .actions .btn { flex: 1 1 0; min-height: 48px; padding: 0 var(--space-sm); font-size: var(--text-sm); }
  .stage .ascii-hero { padding: var(--space-md); min-height: 0; display: block; }
  .thread-in { display: none; }
}
@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }
.am-t::before { content: "\2014"; }
.thread-in::before { content: "\2014\2014\2014\2014\2014\2014\2014\2014\2014\2014\2014\2014\2014\2014"; }
/* no-JS / pre-mount: size the static 88-column frame to the panel (the module sets an inline size once mounted) */
.stage { container-type: inline-size; --ah-fs: min(16px, calc((100cqi - 48px) / 53.9)); }
.stage .ah { font-size: var(--ah-fs); }
.thread-in { --thread-y-static: calc(40px + 3.5 * 1.35 * var(--ah-fs)); }

/* ---------- below the hero: every section hangs on the thread ---------- */
main { --rail: var(--gutter); }
.sec, .cta { position: relative; max-width: var(--container); margin-inline: auto; padding: var(--space-3xl) var(--gutter); }
.sec::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--gutter) / 2); border-left: 2px solid var(--color-accent); }
.sec h2::before { content: "+"; position: absolute; left: calc(var(--gutter) / 2 - 0.3em); margin-top: 0.1em; font: 400 1.25rem/1 var(--font-outlier); color: var(--color-accent); background: var(--color-paper); }
.sec--night h2::before { background: var(--color-night); }
.sec h2 { font-size: clamp(2rem, 2.4vw + 1rem, 3.25rem); line-height: 1.02; letter-spacing: -0.03em; max-width: 16ch; }
.sec-text { display: grid; gap: var(--space-md); align-content: start; min-width: 0; }
.sec-text p { font-size: var(--text-lg); line-height: 1.5; color: var(--color-ink-2); max-width: 38ch; }

.art { margin: 0; min-width: 0; display: grid; gap: var(--space-sm); }
.art pre { margin: 0; padding: var(--space-xl); overflow-x: auto; font: 400 clamp(13px, 1.1vw, 16px)/1.5 var(--font-outlier); font-variant-ligatures: none; color: var(--color-ink); background: var(--color-paper-2); border-left: 2px solid var(--color-accent); }
.art b { font-weight: 400; }
.art .t { color: var(--color-accent); }
.art .k { color: var(--color-knot-text); }
.art figcaption { font-size: var(--text-sm); color: var(--color-muted); }

.sec--split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; }

.sec--night { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: center; background: var(--color-night); max-width: none; padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); }
.sec--night::before { left: max(calc(var(--gutter) / 2), calc((100% - var(--container)) / 2 + var(--gutter) / 2)); }
.sec--night h2::before { left: max(calc(var(--gutter) / 2), calc((100% - var(--container)) / 2 + var(--gutter) / 2)); transform: translateX(-0.3em); }
.sec--night .sec-text { order: 2; }
.sec--night h2 { color: var(--color-night-ink); }
.sec--night .sec-text p { color: var(--color-night-muted); }
.art--night pre { background: var(--color-night-2); color: var(--color-night-ink); border-left-color: var(--color-knot); }
.art--night .k { color: var(--color-knot); }
.art--night figcaption { color: var(--color-night-muted); }

.sec--wide { display: grid; gap: var(--space-xl); }
.sec--wide .sec-text { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: end; gap: var(--space-2xl); }
.art--wide pre { font-size: clamp(13px, 1.25vw, 18px); }

.sec--statement { display: grid; gap: var(--space-xl); }
.sec--statement h2 { font-size: clamp(2.5rem, 4vw + 1rem, 5rem); max-width: 18ch; }
.art--plain pre { background: transparent; border-left: 0; padding: 0; font-size: clamp(13px, 1.4vw, 20px); color: var(--color-ink-2); }

.cta { display: grid; justify-items: start; gap: var(--space-md); padding-block: var(--space-4xl); background: var(--color-night); color: var(--color-night-ink); max-width: none; padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); }
.cta-lead { font: 400 var(--text-xl)/1.3 var(--font-outlier); color: var(--color-night-muted); }
.cta h2 { font-size: clamp(3rem, 5vw + 1rem, 6.5rem); line-height: 0.95; letter-spacing: -0.04em; color: var(--color-night-ink); max-width: 14ch; }
.btn--onnight { margin-top: var(--space-md); }
.btn--onnight:hover { background: var(--color-night-ink); border-color: var(--color-night-ink); color: var(--color-night); }

.foot { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: var(--space-xl) var(--space-2xl); align-items: start; max-width: var(--container); margin-inline: auto; padding: var(--space-2xl) var(--gutter) var(--space-3xl); border-top: 1px solid var(--color-rule); }
.foot-line { color: var(--color-ink-2); }
.foot-links { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.foot-links a { color: var(--color-ink-2); text-underline-offset: 0.3em; }
.foot-links a:hover { color: var(--color-ink); text-decoration-color: var(--color-accent); }
.foot-links a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.foot-note { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--color-muted); }

@media (max-width: 60rem) {
  .sec, .cta { padding: var(--space-2xl) var(--space-md) var(--space-2xl) calc(var(--space-md) + 20px); }
  .sec::before, .sec--night::before { left: var(--space-md); }
  .sec h2::before, .sec--night h2::before { left: calc(var(--space-md) - 0.3em); transform: none; }
  .sec--split, .sec--night, .sec--wide .sec-text { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .sec--night .sec-text { order: 0; }
  .art pre { padding: var(--space-md); font-size: 12px; }
  .cta { padding-left: var(--space-md); }
  .foot { grid-template-columns: minmax(0, 1fr); padding-inline: var(--space-md); }
}
.cta-art { margin: var(--space-xl) 0 0; font: 400 clamp(14px, 1.6vw, 24px)/1 var(--font-outlier); white-space: pre; overflow: hidden; max-width: 100%; }
.cta-art b { font-weight: 400; } .cta-art .t { color: var(--color-accent-faint); } .cta-art .k { color: var(--color-knot); }
.art--night pre { font-size: clamp(14px, 1.35vw, 19px); }
.art--wide pre { font-size: clamp(9px, 1.05vw, 15px); }
.m-only { display: none; }
@media (max-width: 60rem) {
  .m-only { display: block; } .d-only { display: none; }
  .art pre, .art--night pre, .art--wide pre { font-size: 11px; }
  .art--plain pre { font-size: 9.5px; }
}
.art--night .t { color: var(--color-accent-faint); }
.art--wide pre { background: var(--color-paper); border: 1px solid var(--color-rule); border-left: 2px solid var(--color-accent); }
.sec--split .art pre, .art--night pre { padding-block: var(--space-2xl); min-height: 320px; }
@media (max-width: 60rem) { .sec--split .art pre, .art--night pre { min-height: 0; } }
.art--wide pre { line-height: 1.05; }