/* Shared Architecture and Strategy presentation. */
/* Neue Montreal — licensed (Pangram Pangram), self-hosted, not committed.
   Falls back to Inter until the woff2 files are dropped into /fonts. */
@font-face{font-family:"Neue Montreal";src:url("../fonts/PPNeueMontreal-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Neue Montreal";src:url("../fonts/PPNeueMontreal-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Neue Montreal";src:url("../fonts/PPNeueMontreal-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --n-0:#FFFFFF; --n-25:#FCFCFA; --n-50:#F6F7F3; --n-100:#F0F1EC; --n-200:#E1E3DC;
  --n-300:#CACDC4; --n-400:#A2A59C; --n-500:#73776E; --n-600:#595D56; --n-700:#3F3F3F;
  --n-800:#202020; --n-900:#000000;
  --o-50:#FFF2E8; --o-100:#FFDCC4; --o-500:#FF6700; --o-600:#E85E00; --o-700:#C94F00;
  --g-50:#ECF8F2; --g-500:#62C696; --g-700:#278F63;
  --y-50:#FFF9E6; --y-500:#F1BF00; --y-700:#9C7800;
  --r-50:#FDEDEC; --r-500:#F2584B; --r-700:#B43128; --r-chart:#FF4848;
  --b-50:#EDF4FF; --b-500:#4C8FF7; --b-700:#2466B9;

  --bg-canvas:var(--n-50); --bg-surface:var(--n-0); --bg-muted:var(--n-100); --bg-inverse:var(--n-900);
  --fg-primary:var(--n-900); --fg-secondary:var(--n-700); --fg-muted:var(--n-500); --fg-accent:var(--o-500);
  --border-default:var(--n-200); --focus-ring:var(--o-500);

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;

  --r-tag:6px; --r-field:8px; --r-card:12px; --r-dialog:18px; --r-pill:999px;

  --shadow-sm:0 1px 2px rgba(0,0,0,0.06), 0 1px 1px rgba(0,0,0,0.04);
  --shadow-md:0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.05);
  --shadow-lg:0 16px 40px rgba(0,0,0,0.14), 0 4px 10px rgba(0,0,0,0.06);

  --ease-standard: cubic-bezier(.2,0,0,1);
  --dur-press:120ms; --dur-standard:180ms; --dur-dialog:240ms;

  --font-display:'Neue Montreal', 'Inter', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
  --font-mono:'DM Mono', ui-monospace, monospace;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--bg-canvas); color:var(--fg-primary); font-family:var(--font-body); font-size:13px; line-height:1.6; -webkit-font-smoothing:antialiased; }
::selection{ background:var(--o-100); color:var(--n-900); }
a{ color:var(--fg-accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; border-radius:4px; }
code.inline-code{ font-family:var(--font-mono); font-size:12px; background:var(--n-100); padding:1px 5px; border-radius:4px; }
pre.code-block{ font-family:var(--font-mono); font-size:12px; background:var(--n-900); color:var(--n-100); border-radius:var(--r-card); padding:var(--sp-4); overflow-x:auto; line-height:1.7; }
pre.code-block .k{ color:#8FD7A8; } pre.code-block .c{ color:var(--n-400); }

/* ---------- shell ---------- */
/* Header, sidebar and "On this page" live in site-nav.css; .main is the content column inside them. */
.main{ flex:1; min-width:0; max-width:1200px; padding:var(--sp-6); }
@media (max-width: 1000px){ .main{ padding:var(--sp-4); } }
@media (max-width:640px){ .main{ padding:var(--sp-3); } }

/* ---------- type ---------- */
.display{ font-family:var(--font-display); font-weight:700; font-size:30px; letter-spacing:-0.015em; margin:0; }
.page-title{ font-family:var(--font-display); font-weight:700; font-size:22px; letter-spacing:-0.01em; margin:0; }
h2.section-title{ font-size:18px; font-weight:600; margin:0; }
h3.sub-title{ font-size:15px; font-weight:600; margin:0 0 var(--sp-2); }
p.body-text{ font-size:13px; color:var(--fg-secondary); margin:0 0 var(--sp-4); max-width:74ch; }
.meta-text{ font-size:12px; color:var(--fg-muted); }
.data-label{ font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; color:var(--fg-muted); }
.mono{ font-family:var(--font-mono); }

/* ---------- hero ---------- */
.hero{ background:var(--bg-surface); border:1px solid var(--border-default); border-radius:var(--r-dialog); padding:var(--sp-8) var(--sp-8) var(--sp-6); margin-bottom:var(--sp-8); position:relative; overflow:hidden; }
.hero-eyebrow{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; color:var(--o-700); background:var(--o-50); border:1px solid var(--o-100); padding:4px 10px; border-radius:var(--r-pill); margin-bottom:var(--sp-4); }
.hero-mark{ position:absolute; right:var(--sp-8); top:50%; transform:translateY(-50%); width:110px; height:110px; color:var(--n-100); }
@media (max-width:900px){ .hero-mark{ display:none; } }
.scope-box{ display:flex; gap:10px; background:var(--n-50); border:1px solid var(--border-default); border-radius:var(--r-field); padding:var(--sp-3) var(--sp-4); margin-top:var(--sp-4); font-size:12.5px; color:var(--fg-secondary); }
.scope-box b{ color:var(--fg-primary); }

/* ---------- sections/cards ---------- */
section.doc-section{ margin-bottom:var(--sp-16); scroll-margin-top:var(--sp-6); }
.section-head{ display:flex; align-items:center; gap:12px; margin-bottom:var(--sp-5); padding-bottom:var(--sp-3); border-bottom:1px solid var(--border-default); }
.section-num{ font-family:var(--font-mono); font-size:12px; color:var(--n-0); background:var(--n-900); width:26px; height:26px; border-radius:7px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.header-accent{ width:40px; height:3px; background:var(--o-500); border-radius:2px; margin-bottom:var(--sp-3); }
.card{ background:var(--bg-surface); border:1px solid var(--border-default); border-radius:var(--r-card); padding:var(--sp-5); }
.grid{ display:grid; gap:var(--sp-4); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

.left-rule{ display:flex; gap:var(--sp-3); border-left:2px solid var(--o-500); padding:2px 0 2px var(--sp-3); color:var(--fg-secondary); font-size:13px; margin:var(--sp-4) 0; }
.left-rule.info{ border-color:var(--b-500); }
.left-rule.warn{ border-color:var(--y-500); }
.left-rule.danger{ border-color:var(--r-500); }
.left-rule b{ color:var(--fg-primary); }

.badge{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:2px 9px; border-radius:var(--r-tag); border:1px solid transparent; white-space:nowrap; }
.badge .dot{ width:6px; height:6px; border-radius:50%; }
.badge.success{ background:var(--g-50); color:var(--g-700); }
.badge.success .dot{ background:var(--g-500); }
.badge.warning{ background:var(--y-50); color:var(--y-700); }
.badge.warning .dot{ background:var(--y-500); }
.badge.danger{ background:var(--r-50); color:var(--r-700); }
.badge.danger .dot{ background:var(--r-500); }
.badge.info{ background:var(--b-50); color:var(--b-700); }
.badge.info .dot{ background:var(--b-500); }
.badge.neutral{ background:var(--n-100); color:var(--fg-secondary); }
.badge.neutral .dot{ background:var(--n-400); }

/* ---------- prefix registry ---------- */
.prefix-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px; }
.prefix-tile{ background:var(--n-0); border:1px solid var(--border-default); border-radius:var(--r-card); padding:12px 14px; display:flex; align-items:center; gap:10px; }
.prefix-tile .px{ font-family:var(--font-mono); font-size:13px; font-weight:600; color:var(--o-700); background:var(--o-50); border:1px solid var(--o-100); padding:3px 8px; border-radius:6px; flex-shrink:0; }
.prefix-tile .dn{ font-size:12.5px; font-weight:600; }

/* ---------- matrix table ---------- */
.matrix{ width:100%; border-collapse:collapse; font-size:12.5px; }
.matrix th{ font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:0.05em; text-transform:uppercase; color:var(--fg-muted); background:var(--n-50); text-align:left; padding:9px 12px; border-bottom:1px solid var(--border-default); }
.matrix td{ padding:9px 12px; border-bottom:1px solid var(--n-100); color:var(--fg-secondary); vertical-align:top; }
.matrix tbody tr:hover{ background:var(--n-50); }
.matrix tbody tr:last-child td{ border-bottom:none; }
.matrix .num{ font-family:var(--font-mono); color:var(--fg-muted); width:28px; }
.matrix .rule-txt{ color:var(--fg-primary); font-weight:500; }

/* ---------- flow diagrams ---------- */
.flow-card{ background:var(--n-0); border:1px solid var(--border-default); border-radius:var(--r-card); padding:var(--sp-5); overflow-x:auto; }
.domain-box{ fill:var(--n-0); stroke:var(--n-200); stroke-width:1.5; rx:8; }
.domain-box.hi{ stroke:var(--o-500); stroke-width:2; }
.flow-label{ font-family:'Inter'; font-size:10.5px; fill:var(--fg-primary); font-weight:600; }
.flow-meta{ font-family:'DM Mono'; font-size:9px; fill:var(--fg-muted); }
.flow-arrow{ stroke:var(--n-400); stroke-width:1.6; fill:none; marker-end:url(#arrowGrey); }
.flow-arrow.no{ stroke:var(--r-500); }
.flow-arrow.yes{ stroke:var(--g-500); }
.flow-arrow.event{ stroke:var(--o-500); stroke-dasharray:4,3; }

/* ---------- decision compare cards ---------- */
.decide-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }
@media (max-width:800px){ .decide-grid{ grid-template-columns:1fr; } }
.decide-card{ border-radius:var(--r-card); padding:var(--sp-4); border:1.5px solid var(--border-default); }
.decide-card.chosen{ border-color:var(--g-500); background:var(--g-50); }
.decide-card.rejected{ border-color:var(--n-200); background:var(--n-50); opacity:0.9; }
.decide-card .tag{ font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; margin-bottom:8px; display:inline-block; }
.decide-card.chosen .tag{ color:var(--g-700); }
.decide-card.rejected .tag{ color:var(--fg-muted); }
.decide-card h4{ margin:0 0 8px; font-size:14px; font-weight:600; }
.decide-card ul{ margin:0; padding-left:16px; font-size:12.5px; color:var(--fg-secondary); line-height:1.8; }

/* ---------- timeline ---------- */
.timeline{ position:relative; padding:var(--sp-6) 0; }
.timeline-track{ position:relative; height:4px; background:var(--n-200); border-radius:2px; margin:0 20px 40px; }
.timeline-fill{ position:absolute; left:0; top:0; height:100%; background:var(--o-500); border-radius:2px; width:0%; animation:fillTrack 2.4s var(--ease-standard) forwards; animation-delay:0.3s; }
@keyframes fillTrack{ to{ width:100%; } }
.timeline-steps{ display:flex; justify-content:space-between; margin:0 4px; }
.tl-step{ display:flex; flex-direction:column; align-items:center; text-align:center; width:16.5%; position:relative; }
.tl-dot{ width:14px; height:14px; border-radius:50%; background:var(--n-0); border:2.5px solid var(--o-500); position:absolute; top:-46px; }
.tl-num{ font-family:var(--font-mono); font-size:10px; color:var(--o-700); margin-bottom:4px; }
.tl-title{ font-size:11.5px; font-weight:600; margin-bottom:2px; }
.tl-desc{ font-size:10.5px; color:var(--fg-muted); line-height:1.5; }
@media (prefers-reduced-motion: reduce){ .timeline-fill{ animation:none; width:100%; } }
@media (max-width:900px){ .timeline-steps{ flex-wrap:wrap; gap:16px 0; } .tl-step{ width:31%; } .timeline-track{ display:none; } .tl-dot{ display:none; } }

/* ---------- swap diagram ---------- */
.swap-frame{ background:var(--n-0); border:1px solid var(--border-default); border-radius:var(--r-card); padding:var(--sp-5); }

/* ---------- domain cards ---------- */
.domain-card{ background:var(--n-0); border:1px solid var(--border-default); border-radius:var(--r-card); padding:14px; position:relative; }
.domain-card .px{ font-family:var(--font-mono); font-size:10.5px; font-weight:600; color:var(--o-700); background:var(--o-50); padding:2px 7px; border-radius:5px; display:inline-block; margin-bottom:8px; }
.domain-card h4{ margin:0 0 4px; font-size:13.5px; font-weight:600; }
.domain-card p{ margin:0; font-size:11.5px; color:var(--fg-muted); line-height:1.6; }
.domain-card.gap{ border-style:dashed; background:var(--n-50); }
.domain-card.gap .px{ background:var(--n-100); color:var(--fg-muted); }

/* ---------- checklist ---------- */
.check-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
@media (max-width:800px){ .check-grid{ grid-template-columns:1fr; } }
.check-item{ display:flex; gap:10px; align-items:flex-start; background:var(--n-0); border:1px solid var(--border-default); border-radius:var(--r-field); padding:10px 12px; font-size:12.5px; }
.check-item .num{ font-family:var(--font-mono); font-size:10px; color:var(--n-0); background:var(--n-900); width:18px; height:18px; border-radius:5px; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }

/* ---------- open question tag ---------- */
.open-q{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; color:var(--y-700); background:var(--y-50); border:1px solid var(--y-500); padding:2px 8px; border-radius:var(--r-tag); margin-top:6px; }

/* ---------- buttons (design-system spec: 40px standard / 32px compact) ---------- */
.btn{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-body); font-size:13px; font-weight:600; height:40px; padding:0 16px; border-radius:var(--r-field); border:1px solid transparent; cursor:pointer; transition:background-color var(--dur-standard) var(--ease-standard), border-color var(--dur-standard) var(--ease-standard), color var(--dur-standard) var(--ease-standard); }
.btn-compact{ height:32px; font-size:12px; padding:0 12px; }
.btn-secondary{ background:var(--n-0); color:var(--fg-primary); border-color:var(--border-default); }
.btn-secondary:hover{ background:var(--n-50); border-color:var(--n-300); }
.btn-secondary:active{ transform:translateY(.5px); }
.btn.is-done{ background:var(--g-50); border-color:var(--g-500); color:var(--g-700); }

footer.site-footer{ margin-top:var(--sp-16); border-top:1px solid var(--border-default); padding-top:var(--sp-6); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-3); color:var(--fg-muted); font-size:12px; }
.footer-nav{ display:flex; flex-wrap:wrap; gap:6px 18px; width:100%; margin-bottom:var(--sp-2); }
.footer-nav a{ font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:0.04em; text-transform:uppercase; color:var(--fg-muted); border-bottom:1px solid transparent; padding:2px 0; }
.footer-nav a:hover{ color:var(--fg-secondary); border-bottom-color:var(--border-default); text-decoration:none; }
.footer-nav a.on{ color:var(--o-700); }
.footer-lockup{ display:flex; align-items:center; gap:8px; }
.footer-mark{ width:16px; height:16px; flex:none; color:var(--o-500); transition:transform 480ms cubic-bezier(.34,1.4,.6,1), color var(--dur-standard) var(--ease-standard); }
.footer-lockup:hover .footer-mark{ transform:rotate(90deg); color:var(--o-600); }
.footer-heart{ width:12px; height:12px; display:inline-block; vertical-align:-1px; color:var(--r-500); }
.footer-lockup:hover .footer-heart{ animation:heartbeat 900ms ease-in-out; }
@keyframes heartbeat{ 0%,100%{ transform:scale(1); } 15%{ transform:scale(1.35); } 30%{ transform:scale(1); } 45%{ transform:scale(1.35); } 60%{ transform:scale(1); } }

.pulse-node{ animation:pulseNode 2.2s ease-in-out infinite; }
@keyframes pulseNode{ 0%,100%{ opacity:1; } 50%{ opacity:0.35; } }
.travel-dot{ animation:travelDot 2.6s linear infinite; }
@keyframes travelDot{ 0%{ opacity:0; } 5%{ opacity:1; } 95%{ opacity:1; } 100%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){ .pulse-node, .travel-dot{ animation:none; } }