/* Hallmark · macrostructure: Map / Diagram · genre: modern-minimal · tone: technical austere · anchor hue: cool cyan · nav: N9 · footer: Ft2 · contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (34, 49–57)
 * pre-emit critique: P5 H5 E5 S5 R5 V4 */
@import url("../tokens.css");

html { overflow-x: clip; scroll-behavior: smooth; }
body { overflow-x: clip; }
* { box-sizing: border-box; }
body, h1, h2, h3, p, ul { margin: 0; }
body { background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; }
a { color: inherit; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
a:active, summary:active { transform: translateY(1px); }
button:disabled, [aria-disabled="true"] { cursor: not-allowed; opacity: 0.55; pointer-events: none; }
button, summary { font: inherit; }
button { border: 0; }
.skip-link { background: var(--color-accent); color: var(--color-accent-ink); font-weight: 700; inset-block-start: var(--space-md); inset-inline-start: var(--space-md); padding: var(--space-sm) var(--space-md); position: fixed; text-decoration: none; transform: translateY(-200%); z-index: 10; }
.skip-link:focus { transform: translateY(0); }
.shell { margin-inline: auto; max-width: 76rem; padding-inline: clamp(1.1rem, 4vw, 3.5rem); }
.site-header { padding-block: var(--space-md); position: relative; z-index: 3; }
.nav-line { align-items: center; display: flex; gap: var(--space-md); justify-content: space-between; min-height: 2.75rem; }
.brand { align-items: center; display: inline-flex; flex-shrink: 0; gap: var(--space-sm); min-height: 2.75rem; text-decoration: none; }
.brand-mark { block-size: 2rem; inline-size: 2rem; }
.brand-name { font-family: var(--font-display); font-size: var(--text-base); font-weight: 680; letter-spacing: -0.03em; }
.nav-links { align-items: center; display: flex; gap: var(--space-lg); }
.nav-links a, .footer-links a { color: var(--color-ink-muted); font-size: var(--text-sm); text-decoration: none; white-space: nowrap; }
.nav-links a, .footer-links a { position: relative; transition: color var(--dur-short) var(--ease-out); }
.nav-links a::after, .footer-links a::after { background: var(--color-accent); content: ""; block-size: 1px; inline-size: 100%; inset-block-end: -0.35rem; inset-inline-start: 0; position: absolute; transform: scaleX(0); transform-origin: inline-start; transition: transform var(--dur-medium) var(--ease-out); }
.nav-links a:hover, .footer-links a:hover { color: var(--color-ink); }
.nav-links a:hover::after, .footer-links a:hover::after { transform: scaleX(1); }
.utility-controls { align-items: center; display: flex; gap: var(--space-xs); }
.control-menu { position: relative; }
.control-menu summary { align-items: center; border: 1px solid var(--color-rule); border-radius: 999px; color: var(--color-ink-muted); cursor: pointer; display: flex; font-size: var(--text-xs); font-weight: 700; justify-content: center; letter-spacing: 0.04em; line-height: 1; list-style: none; min-block-size: 2.5rem; min-inline-size: 2.5rem; padding-inline: var(--space-sm); text-transform: uppercase; white-space: nowrap; }
.control-menu summary::-webkit-details-marker { display: none; }
.control-menu summary:hover { border-color: var(--color-accent-quiet); color: var(--color-ink); }
.control-panel { background: var(--color-paper-raised); border: var(--rule); border-radius: var(--radius-md); box-shadow: 0 1.5rem 4rem var(--color-shadow); display: grid; gap: var(--space-2xs); inset-block-start: calc(100% + var(--space-xs)); inset-inline-end: 0; min-inline-size: max-content; padding: var(--space-xs); position: absolute; }
.control-panel button { background: transparent; border-radius: var(--radius-sm); color: var(--color-ink-muted); cursor: pointer; font-size: var(--text-sm); min-block-size: 2.5rem; padding-inline: var(--space-sm); text-align: start; white-space: nowrap; }
.control-panel button:hover, .control-panel button[aria-pressed="true"] { background: var(--color-paper-strong); color: var(--color-ink); }
.menu { display: none; position: relative; }
.menu summary { align-items: center; color: var(--color-ink); cursor: pointer; display: flex; font-size: var(--text-sm); font-weight: 650; gap: var(--space-xs); list-style: none; min-height: 2.75rem; white-space: nowrap; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { border-block-end: 1px solid var(--color-ink-muted); border-inline-end: 1px solid var(--color-ink-muted); content: ""; block-size: 0.4rem; inline-size: 0.4rem; transform: rotate(45deg) translateY(-0.15rem); }
.menu-panel { background: var(--color-paper-raised); border: var(--rule); border-radius: var(--radius-md); box-shadow: 0 1.5rem 4rem var(--color-shadow); display: grid; gap: var(--space-2xs); inset-block-start: calc(100% + var(--space-xs)); inset-inline-end: 0; min-inline-size: 10rem; padding: var(--space-xs); position: absolute; }
.menu-panel a { color: var(--color-ink-muted); padding: var(--space-sm); text-decoration: none; white-space: nowrap; }
.menu-panel a:hover { background: var(--color-paper-strong); color: var(--color-ink); }
.hero { min-height: min(48rem, calc(100dvh - 4.75rem)); padding-block: clamp(3.5rem, 9vw, 8rem) var(--space-3xl); position: relative; }
.hero::before { background-image: linear-gradient(var(--color-rule-soft) 1px, transparent 1px), linear-gradient(90deg, var(--color-rule-soft) 1px, transparent 1px); background-size: 3.5rem 3.5rem; content: ""; inset: 0 calc(50% - 50vw); mask-image: linear-gradient(to bottom, transparent, var(--color-paper) 12%, var(--color-paper) 76%, transparent); opacity: 0.45; pointer-events: none; position: absolute; }
.hero-grid { align-items: center; display: grid; gap: var(--space-2xl); grid-template-columns: minmax(0, 1fr); position: relative; }
.kicker, .section-label { color: var(--color-accent); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 650; letter-spacing: 0.09em; text-transform: uppercase; }
h1, h2, h3 { font-family: var(--font-display); font-style: normal; line-height: 1.03; min-width: 0; overflow-wrap: anywhere; }
h1 { font-size: var(--text-display); font-weight: 690; letter-spacing: -0.075em; margin-block: var(--space-lg); max-inline-size: 12ch; white-space: nowrap; word-break: keep-all; }
.hero-title-suffix { color: var(--color-ink-muted); display: block; font-size: clamp(1.15rem, 2vw, 1.8rem); font-weight: 510; letter-spacing: -0.04em; line-height: 1.25; margin-block-start: var(--space-md); white-space: normal; }
.lede { color: var(--color-ink-muted); font-size: var(--text-lg); max-inline-size: 40rem; }
.status-row { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-block-start: var(--space-xl); }
.status-chip { align-items: center; background: var(--color-paper-raised); border: var(--rule); border-radius: 999px; color: var(--color-ink-muted); display: inline-flex; font-size: var(--text-sm); gap: var(--space-xs); min-height: 2.25rem; padding-inline: var(--space-sm); white-space: nowrap; }
.status-chip::before { background: var(--color-green); border-radius: 50%; content: ""; block-size: 0.45rem; inline-size: 0.45rem; }
.button-link { align-items: center; border: 1px solid var(--color-rule); border-radius: 999px; color: var(--color-ink); display: inline-flex; font-size: var(--text-sm); font-weight: 650; justify-content: center; margin-block-start: var(--space-xl); min-height: 2.75rem; padding-inline: var(--space-md); text-decoration: none; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); white-space: nowrap; }
.button-link:hover { background: var(--color-paper-strong); border-color: var(--color-accent-quiet); transform: translateY(-1px); }
.button-link span[aria-hidden="true"] { transition: transform var(--dur-medium) var(--ease-out); }
.button-link:hover span[aria-hidden="true"] { transform: translateY(0.2rem); }
.button-link:active { transform: translateY(1px); }
.fabric-figure { margin: 0; min-width: 0; }
.fabric-map { display: block; inline-size: 100%; margin-inline: auto; max-inline-size: 35rem; overflow: visible; }
.map-frame { fill: var(--color-paper-raised); stroke: var(--color-rule); stroke-width: 1; }
.map-edge { fill: none; stroke: var(--color-rule); stroke-width: 1.3; }
.map-edge--signal { stroke: var(--color-accent-quiet); stroke-dasharray: 5 8; }
.map-node { fill: var(--color-paper-strong); stroke: var(--color-rule); stroke-width: 1; }
.map-node--core { fill: var(--color-paper-raised); stroke: var(--color-accent); stroke-width: 1.25; }
.map-dot { fill: var(--color-accent); }
.map-dot--violet { fill: var(--color-violet); }
.map-dot--green { fill: var(--color-green); }
.map-text { fill: var(--color-ink-muted); font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.11em; text-transform: uppercase; }
.map-text--core { fill: var(--color-ink); font-size: 10px; font-weight: 700; }
.map-caption { color: var(--color-ink-muted); font-family: var(--font-mono); font-size: var(--text-xs); margin-block-start: var(--space-sm); text-align: center; }
.section { padding-block: var(--space-3xl); }
.section + .section { border-block-start: var(--rule); }
.section-head { display: grid; gap: var(--space-md); margin-block-end: var(--space-2xl); max-inline-size: 46rem; }
.section-head h2 { font-size: var(--text-2xl); font-weight: 650; letter-spacing: -0.055em; }
.section-head p { color: var(--color-ink-muted); max-inline-size: 39rem; }
.capability-grid { display: grid; gap: var(--space-sm); grid-template-columns: repeat(1, minmax(0, 1fr)); }
.capability { background: var(--color-paper-raised); border: var(--rule); border-radius: var(--radius-md); min-height: 13rem; padding: var(--space-lg); position: relative; transition: border-color var(--dur-medium) var(--ease-out), transform var(--dur-medium) var(--ease-out); }
.capability::before { background: var(--capability-color); border-radius: 50%; content: ""; block-size: 0.45rem; inline-size: 0.45rem; inset-block-start: var(--space-lg); inset-inline-end: var(--space-lg); }
.capability h3 { font-size: var(--text-lg); font-weight: 650; letter-spacing: -0.035em; margin-block-end: var(--space-sm); padding-inline-end: var(--space-lg); }
.capability p { color: var(--color-ink-muted); font-size: var(--text-sm); max-inline-size: 31ch; }
.capability--cyan { --capability-color: var(--color-accent); }
.capability--green { --capability-color: var(--color-green); }
.capability--violet { --capability-color: var(--color-violet); }
@media (hover: hover) and (pointer: fine) { .capability:hover { border-color: var(--color-accent-quiet); transform: translateY(-2px); } }
.principles { display: grid; gap: 0; list-style: none; padding: 0; }
.principle { align-items: baseline; border-block-start: var(--rule); display: grid; gap: var(--space-sm); padding-block: var(--space-lg); }
.principle:last-child { border-block-end: var(--rule); }
.principle strong { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.03em; }
.principle span { color: var(--color-ink-muted); font-size: var(--text-sm); max-inline-size: 37rem; }
.notice { background: var(--color-paper-raised); border: var(--rule); border-radius: var(--radius-lg); display: grid; gap: var(--space-xl); padding: clamp(1.5rem, 4vw, 3rem); }
.notice h2 { font-size: var(--text-2xl); font-weight: 650; letter-spacing: -0.055em; }
.notice-copy { color: var(--color-ink-muted); max-inline-size: 43rem; }
.notice-points { display: grid; gap: var(--space-sm); list-style: none; padding: 0; }
.notice-points li { align-items: flex-start; color: var(--color-ink-muted); display: flex; font-size: var(--text-sm); gap: var(--space-sm); }
.notice-points li::before { border: 1px solid var(--color-accent-quiet); border-radius: 50%; content: ""; flex: 0 0 auto; block-size: 0.55rem; inline-size: 0.55rem; margin-block-start: 0.45rem; }
.site-footer { border-block-start: var(--rule); padding-block: var(--space-xl); }
.footer-line { align-items: center; color: var(--color-ink-muted); display: flex; flex-wrap: wrap; font-size: var(--text-sm); gap: var(--space-sm) var(--space-lg); justify-content: space-between; }
.footer-brand { color: var(--color-ink-muted); font-weight: 620; }
.footer-links { display: flex; gap: var(--space-lg); }
.legal-page { padding-block: clamp(3rem, 8vw, 7rem) var(--space-3xl); }
.legal-intro { border-block-end: var(--rule); display: grid; gap: var(--space-lg); padding-block-end: var(--space-2xl); }
.legal-intro h1 { font-size: var(--text-2xl); margin: 0; max-inline-size: none; }
.legal-intro p { color: var(--color-ink-muted); font-size: var(--text-lg); max-inline-size: 43rem; }
.legal-content { display: grid; gap: var(--space-xl); max-inline-size: 47rem; padding-block-start: var(--space-2xl); }
.legal-content h2 { font-size: var(--text-xl); font-weight: 640; letter-spacing: -0.045em; }
.legal-content p, .legal-content li { color: var(--color-ink-muted); }
.legal-content ul { display: grid; gap: var(--space-sm); padding-inline-start: var(--space-lg); }
.config-note { background: var(--color-paper-raised); border-inline-start: 2px solid var(--color-accent); color: var(--color-ink-muted); padding: var(--space-md); }
.not-found { align-items: center; display: grid; min-block-size: calc(100dvh - 10rem); }
.not-found .legal-intro { border: 0; }
@media (min-width: 40rem) { .principle { grid-template-columns: minmax(13rem, 0.8fr) minmax(0, 2fr); } .footer-line { flex-wrap: nowrap; } }
@media (min-width: 52rem) { .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.95fr); } .capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .capability:last-child { grid-column: span 2; min-height: 10rem; } }
@media (min-width: 72rem) { .capability-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } .capability { grid-column: span 2; } .capability:nth-child(4), .capability:nth-child(5) { grid-column: span 3; } .capability:last-child { min-height: 13rem; } }
@media (max-width: 39.99rem) { .nav-links { display: none; } .menu { display: block; } .footer-line { align-items: flex-start; flex-direction: column; } }
@media (max-width: 24rem) { .shell { padding-inline: var(--space-md); } .utility-controls { gap: var(--space-2xs); } .control-menu summary { min-inline-size: 2.3rem; padding-inline: var(--space-xs); } .hero { padding-block-start: var(--space-2xl); } .lede { font-size: var(--text-base); } .status-row { gap: var(--space-xs); } .status-chip { font-size: var(--text-xs); } }
@media (prefers-reduced-motion: no-preference) { .map-edge--signal { animation: drift 9s var(--ease-in-out) infinite; } }
@media (prefers-reduced-motion: no-preference) {
  .motion-ready .hero-grid > div { animation: settle-in 700ms var(--ease-out) both; }
  .motion-ready .fabric-figure { animation: map-arrive 950ms 120ms var(--ease-out) both; }
  .motion-ready .fabric-map .map-node { animation: node-arrive 560ms var(--ease-out) both; transform-box: fill-box; transform-origin: center; }
  .motion-ready .fabric-map .map-node:nth-of-type(2) { animation-delay: 200ms; }
  .motion-ready .fabric-map .map-node:nth-of-type(3) { animation-delay: 280ms; }
  .motion-ready .fabric-map .map-node:nth-of-type(4) { animation-delay: 360ms; }
  .motion-ready .fabric-map .map-node:nth-of-type(5) { animation-delay: 440ms; }
  .motion-ready .fabric-map .map-dot { animation: node-pulse 2.8s 900ms var(--ease-in-out) infinite; transform-box: fill-box; transform-origin: center; }
  .motion-ready .is-visible { animation: section-arrive 650ms var(--ease-out) both; }
  .motion-ready .capability.is-visible:nth-child(2) { animation-delay: 70ms; }
  .motion-ready .capability.is-visible:nth-child(3) { animation-delay: 140ms; }
  .motion-ready .capability.is-visible:nth-child(4) { animation-delay: 210ms; }
  .motion-ready .capability.is-visible:nth-child(5) { animation-delay: 280ms; }
}
@keyframes drift { to { stroke-dashoffset: -26; } }
@keyframes settle-in { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes map-arrive { from { opacity: 0; transform: translateY(1.5rem) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes node-arrive { from { opacity: 0; transform: scale(0.72); } to { opacity: 1; transform: scale(1); } }
@keyframes node-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.68; transform: scale(1.18); } }
@keyframes section-arrive { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: page-fade-out 140ms var(--ease-in) both; }
  ::view-transition-new(root) { animation: page-fade-in 240ms var(--ease-out) both; }
}
@keyframes page-fade-out { to { opacity: 0; } }
@keyframes page-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; } }