/* Navarchiva stylesheet: declarations kept in alphabetical order within each rule */
@font-face { font-display:swap; font-family:"Nvx Serif"; font-style:normal; font-weight:600; src:url("../fonts/nvx-serif-600.woff2") format("woff2") }
@font-face { font-display:swap; font-family:"Nvx Sans"; font-style:normal; font-weight:400; src:url("../fonts/nvx-sans-400.woff2") format("woff2") }
@font-face { font-display:swap; font-family:"Nvx Sans"; font-style:normal; font-weight:600; src:url("../fonts/nvx-sans-600.woff2") format("woff2") }
:root { --card:#fffdf8; --deep:#0a1824; --edge:#7b7263; --gold:#cfae6d; --gold-ink:#76561c; --gold-soft:#e6cf9d; --haze:#9fb0bf; --ink:#182330; --ivory:#f4eee2; --measure:68ch; --mist:#c9d4de; --night:#0d1f2f; --night-2:#14304a; --paper:#fbf8f2; --radius:6px; --ring-dark:#f3d792; --ring-light:#0d1f2f; --rule:#ddd3c1; --sans:"Nvx Sans","Segoe UI",Roboto,Helvetica,Arial,sans-serif; --serif:"Nvx Serif",Georgia,"Times New Roman",serif; --shell:1180px; --slate:#46505c }
html { -webkit-text-size-adjust:100%; scroll-padding-top:1.25rem; text-size-adjust:100% }
body { background:var(--paper); color:var(--ink); font:400 1.06rem/1.66 var(--sans); font-kerning:normal; margin:0 }
*,*::before,*::after { box-sizing:border-box }
img,svg { height:auto; max-width:100% }
[hidden] { display:none!important }
a { color:var(--night-2); text-decoration-thickness:1px; text-underline-offset:.18em }
a:hover { text-decoration-thickness:2px }
:focus-visible { border-radius:3px; outline:3px solid var(--ring-light); outline-offset:3px }
.on-dark :focus-visible,.masthead :focus-visible,.page-head :focus-visible,.colophon :focus-visible { outline-color:var(--ring-dark) }
.skiplink:focus-visible { box-shadow:0 0 0 6px var(--ring-dark); outline:3px solid var(--night); outline-offset:0 }
h1,h2,h3,h4 { font-family:var(--serif); font-weight:600; letter-spacing:.005em; line-height:1.15; margin:0 0 .6em }
h1 { font-size:clamp(2.15rem,4.5vw,3.55rem) }
h2 { font-size:clamp(1.6rem,2.9vw,2.3rem) }
h3 { font-size:1.4rem }
h4 { font-size:1.15rem }
p,ul,ol,table,figure { margin:0 0 1.15em }
ul,ol { padding-left:1.3em }
li { margin-bottom:.4em }
strong { font-weight:600 }
.shell { margin-inline:auto; width:min(100% - 2rem,var(--shell)) }
.mark-eyebrow { color:var(--gold-ink); font:600 .78rem/1.3 var(--sans); letter-spacing:.24em; margin:0 0 .9rem; text-transform:uppercase }
.on-dark .mark-eyebrow,.page-head .mark-eyebrow { color:var(--gold-soft) }
.visually-hidden { border:0; clip:rect(0 0 0 0); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute!important; white-space:nowrap; width:1px }
.skiplink { background:#fff8e8; border-radius:var(--radius); color:var(--night); font-weight:600; left:1rem; padding:.75rem 1.1rem; position:absolute; top:-5rem; z-index:50 }
.skiplink:focus { top:1rem }
.btn { align-items:center; border:2px solid transparent; border-radius:3px; cursor:pointer; display:inline-flex; font:600 1rem/1.2 var(--sans); gap:.55rem; justify-content:center; min-height:48px; padding:.7rem 1.35rem; text-decoration:none }
.btn svg { flex:none; height:1.05em; width:1.05em }
.btn-gold { background:var(--gold); border-color:var(--gold); color:var(--night) }
.btn-gold:hover { background:var(--gold-soft); border-color:var(--gold-soft) }
.btn-ghost { background:transparent; border-color:#e3d6bb; color:#f8f3e8 }
.btn-ghost:hover { background:rgba(255,255,255,.08) }
.btn-ink { background:var(--night); border-color:var(--night); color:#fbf6ea }
.btn-ink:hover { background:var(--night-2) }
.btn-line { background:transparent; border-color:var(--night); color:var(--night) }
.btn-line:hover { background:#efe7d6 }
.text-link { color:var(--night-2); font-weight:600 }
.masthead { background:var(--night); color:#f2ede3; position:relative; z-index:5 }
.masthead .shell { align-items:center; display:flex; flex-wrap:wrap; gap:1.25rem; min-height:78px }
.brand { align-items:center; color:#f7f1e4; display:flex; gap:.7rem; margin-right:auto; padding:.4rem 0; text-decoration:none }
.brand svg { flex:none; height:44px; width:44px }
.brand-word { display:flex; flex-direction:column; line-height:1.05 }
.brand-name { font:600 1.55rem/1 var(--serif); letter-spacing:.01em }
.brand-name span { color:var(--gold-soft) }
.brand-tag { color:var(--haze); font:600 .62rem/1.3 var(--sans); letter-spacing:.2em; margin-top:.3rem; text-transform:uppercase }
.nav-toggle { align-items:center; background:transparent; border:1.5px solid #c9b78f; border-radius:4px; color:#f7f1e4; cursor:pointer; display:none; font:600 .95rem var(--sans); gap:.5rem; min-height:44px; padding:.5rem .9rem }
.nav-toggle svg { height:20px; width:20px }
.primary-nav ul { align-items:center; display:flex; gap:.35rem; list-style:none; margin:0; padding:0 }
.primary-nav li { margin:0 }
.primary-nav a { align-items:center; border-bottom:2px solid transparent; color:#e7e1d4; display:inline-flex; font-size:.97rem; min-height:44px; padding:.4rem .8rem; text-decoration:none }
.primary-nav a:hover { border-bottom-color:#8d7a54; color:#fff }
.primary-nav a[aria-current="page"] { border-bottom-color:var(--gold); color:#fff }
.masthead-cta { margin-left:.5rem }
.masthead-cta .btn { font-size:.93rem; min-height:44px; padding:.55rem 1rem }
@media (max-width:980px) {
  .js .nav-toggle { display:inline-flex }
  .js .primary-nav { display:none; flex-basis:100%; padding-bottom:1rem }
  .js .primary-nav.is-open { display:block }
  .primary-nav ul { align-items:stretch; flex-direction:column }
  .primary-nav a { border-bottom:1px solid #26425c; width:100% }
  .masthead-cta { flex-basis:100%; margin:0 0 1rem }
  .js .masthead-cta { display:none }
  .js .masthead-cta.is-open { display:block }
  .no-js .primary-nav { flex-basis:100%; padding-bottom:.5rem }
}
.hero { background:var(--night); color:#f3eee4; isolation:isolate; overflow:hidden; position:relative }
.hero-art { inset:0; pointer-events:none; position:absolute; z-index:-1 }
.hero-art svg { height:100%; width:100% }
.hero .shell { align-items:center; display:grid; gap:2.5rem; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); padding:3.6rem 0 4.2rem }
.hero h1 { color:#fbf6eb; margin-bottom:1.1rem }
.hero h1 em { color:var(--gold); font-style:normal }
.hero-lede { color:var(--mist); font-size:1.14rem; max-width:36rem }
.hero-actions { display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.8rem }
.hero-chart { background:rgba(10,24,36,.55); border:1px solid rgba(207,174,109,.35); border-radius:10px; padding:1.4rem 1rem 1.6rem; position:relative }
.hero-chart-label { bottom:.55rem; color:var(--haze); font:600 .66rem/1.3 var(--sans); letter-spacing:.18em; margin:0; position:absolute; right:1rem; text-transform:uppercase }
@media (max-width:900px) {
  .hero .shell { grid-template-columns:1fr; padding:2.6rem 0 3rem }
}
.route-tree { --node:#e8d7b2; --node-ink:#1a2a3a; --wire:#b49a64; font:600 .8rem/1.2 var(--sans); text-align:center }
.route-tree ul { display:flex; justify-content:center; list-style:none; margin:0; padding:1.1rem 0 0; position:relative }
.route-tree>ul { padding-top:0 }
.route-tree li { flex:1 1 0; margin:0; min-width:0; padding:1.1rem .25rem 0; position:relative }
.route-tree li::before,.route-tree li::after { border-top:1.5px solid var(--wire); content:""; height:1.1rem; position:absolute; top:0; width:50% }
.route-tree li::before { right:50% }
.route-tree li::after { border-left:1.5px solid var(--wire); left:50% }
.route-tree li:only-child::before,.route-tree li:only-child::after { border-top:0 }
.route-tree li:first-child::before,.route-tree li:last-child::after { border-top:0 }
.route-tree li:last-child::before { border-radius:0 4px 0 0; border-right:1.5px solid var(--wire) }
.route-tree li:first-child::after { border-radius:4px 0 0 0 }
.route-tree>ul>li { padding-top:0 }
.route-tree>ul>li::before,.route-tree>ul>li::after { display:none }
.route-tree ul ul::before { border-left:1.5px solid var(--wire); content:""; height:1.1rem; left:50%; position:absolute; top:0 }
.route-tree ul.stack { align-items:center; flex-direction:column; gap:.3rem; padding-top:1.1rem }
.route-tree ul.stack li { flex:none; padding:0; width:100% }
.route-tree ul.stack li::before,.route-tree ul.stack li::after { display:none }
.route-tree .node { background:var(--node); border-radius:3px; box-shadow:0 1px 0 rgba(0,0,0,.25); color:var(--node-ink); display:inline-block; max-width:100%; overflow-wrap:anywhere; padding:.45rem .55rem }
.route-tree .node.root { background:#efe0bd; font-size:.9rem; padding:.6rem 1.1rem }
.route-tree .node.leaf { background:#b9c6cf; font-weight:400 }
.route-tree .node.doc { background:transparent; border:1px dashed #7e94a6; color:var(--mist); font-weight:400 }
.bearing-strip { background:var(--ivory); border-bottom:1px solid var(--rule) }
.bearing-strip ul { display:grid; gap:1rem; grid-template-columns:repeat(5,minmax(0,1fr)); list-style:none; margin:0; padding:1.6rem 0 }
.bearing-strip li { align-items:flex-start; border-right:1px solid var(--rule); display:flex; gap:.8rem; margin:0; padding-right:.6rem }
.bearing-strip li:last-child { border-right:0 }
.bearing-strip svg { color:var(--night-2); flex:none; height:36px; width:36px }
.bearing-strip strong { display:block; font:600 1.12rem/1.2 var(--serif) }
.bearing-strip span { color:var(--slate); display:block; font-size:.88rem; line-height:1.4 }
@media (max-width:980px) {
  .bearing-strip ul { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .bearing-strip li { border-right:0 }
}
@media (max-width:520px) {
  .bearing-strip ul { grid-template-columns:1fr }
}
.band { padding:4rem 0 }
.band-ivory { background:var(--ivory) }
.band-night { background:var(--night); color:#ece6da }
.band-night h2,.band-night h3 { color:#fbf6eb }
.band-night p { color:var(--mist) }
.band-head { align-items:end; display:grid; gap:2rem; grid-template-columns:minmax(0,1fr) minmax(0,1fr); margin-bottom:2.2rem }
.band-head p { color:var(--slate); margin:0 }
.band-night .band-head p { color:var(--mist) }
.band-head .head-link { justify-self:end }
@media (max-width:820px) {
  .band-head { grid-template-columns:1fr }
  .band-head .head-link { justify-self:start }
}
.card-grid { display:grid; gap:1.1rem; grid-template-columns:repeat(4,minmax(0,1fr)) }
.card-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)) }
.card-grid.five { grid-template-columns:repeat(5,minmax(0,1fr)) }
@media (max-width:1060px) {
  .card-grid,.card-grid.five { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .card-grid.three { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:620px) {
  .card-grid,.card-grid.three,.card-grid.five { grid-template-columns:1fr }
}
.chart-card { align-items:flex-start; background:var(--card); border:1px solid var(--rule); border-radius:var(--radius); display:flex; gap:.9rem; min-height:100%; padding:1.25rem 1.1rem 2.4rem; position:relative }
.chart-card svg.glyph { color:var(--night-2); flex:none; height:40px; width:40px }
.chart-card h3 { font-size:1.25rem; margin:0 0 .35rem }
.chart-card h3 a { color:var(--ink); text-decoration:none }
.chart-card h3 a::after { content:""; inset:0; position:absolute }
.chart-card h3 a:focus-visible { outline:0 }
.chart-card:focus-within { outline:3px solid var(--ring-light); outline-offset:3px }
.chart-card p { color:var(--slate); font-size:.93rem; line-height:1.5; margin:0 }
.chart-card .card-arrow { bottom:.85rem; color:var(--gold-ink); height:18px; position:absolute; right:1rem; width:18px }
.chart-card:hover { border-color:#b8a57e; box-shadow:0 6px 18px rgba(13,31,47,.08) }
.tool-card { flex-direction:column }
.tool-card .glyph { height:34px; width:34px }
.contrast-band .shell { align-items:center; display:grid; gap:1.5rem; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) auto minmax(0,1.3fr) }
.contrast-panel { background:rgba(255,255,255,.03); border:1px solid #33506b; border-radius:8px; padding:1.1rem 1rem 1.3rem }
.contrast-panel h3 { color:var(--gold-soft); font:600 .8rem/1.2 var(--sans); letter-spacing:.2em; margin:0 0 .25rem; text-transform:uppercase }
.contrast-panel p { font-size:.88rem; margin:0 0 .8rem }
.contrast-panel svg { display:block; height:auto; width:100% }
.contrast-arrow { color:var(--gold); height:40px; width:40px }
.contrast-band .route-tree { --node:#e1cc9d; font-size:.72rem }
.contrast-band .route-tree .node { padding:.35rem .3rem }
@media (max-width:1060px) {
  .contrast-band .shell { grid-template-columns:1fr }
  .contrast-arrow { justify-self:center; transform:rotate(90deg) }
}
.waypoints { align-items:start; display:grid; gap:2rem; grid-template-columns:minmax(0,.8fr) minmax(0,2.2fr) }
.waypoints ol { counter-reset:wp; display:grid; gap:1rem; grid-template-columns:repeat(5,minmax(0,1fr)); list-style:none; margin:0; padding:0 }
.waypoints li { margin:0; padding-top:3.4rem; position:relative; text-align:center }
.waypoints li::before { background:#e8d3a6; border:2px solid var(--gold-ink); border-radius:50%; color:var(--night); content:counter(wp); counter-increment:wp; font:600 1.1rem/2.4rem var(--serif); height:2.6rem; left:50%; position:absolute; top:0; transform:translateX(-50%); width:2.6rem }
.waypoints li::after { border-top:1.5px dashed #a8946b; content:""; left:calc(50% + 1.6rem); position:absolute; right:calc(-50% + 1.6rem); top:1.3rem }
.waypoints li:last-child::after { display:none }
.waypoints h3 { font-size:1.3rem; margin:0 0 .3rem }
.waypoints p { color:var(--slate); font-size:.9rem; margin:0 }
@media (max-width:900px) {
  .waypoints { grid-template-columns:1fr }
  .waypoints ol { grid-template-columns:1fr; text-align:left }
  .waypoints li { padding:0 0 0 3.6rem; text-align:left }
  .waypoints li::before { left:0; transform:none }
  .waypoints li::after { display:none }
}
.sample-band .shell { align-items:center; display:grid; gap:2rem; grid-template-columns:minmax(0,.8fr) minmax(0,2.4fr) }
.sample-card { background:var(--night-2); border:1px solid #33506b; border-radius:8px; display:flex; flex-direction:column; gap:.8rem; padding:1rem }
.sample-card svg { border-radius:4px; flex:none; height:auto; max-width:220px; width:100% }
.sample-card h3 { font-size:1.15rem; margin:0 0 .2rem }
.sample-card .tagline { color:var(--gold-soft); font:600 .7rem/1.3 var(--sans); letter-spacing:.18em; margin:0 0 .5rem; text-transform:uppercase }
.sample-card ul { color:var(--mist); font-size:.88rem; margin:0; padding-left:1.1em }
.sample-card li { margin-bottom:.2em }
.sample-flag { border:1px solid #6d6044; border-radius:3px; color:#e9dcbf; display:inline-block; font-size:.8rem; margin-top:.9rem; padding:.15rem .5rem }
.sample-grid { display:grid; gap:1rem; grid-template-columns:repeat(3,minmax(0,1fr)) }
@media (max-width:1060px) {
  .sample-band .shell { grid-template-columns:1fr }
  .sample-grid { grid-template-columns:1fr }
}
.faq-split { display:grid; gap:2rem; grid-template-columns:minmax(0,.9fr) minmax(0,2.1fr) }
.faq-cols { display:grid; gap:0 2rem; grid-template-columns:repeat(2,minmax(0,1fr)) }
@media (max-width:900px) {
  .faq-split,.faq-cols { grid-template-columns:1fr }
}
.qa-pair { border-bottom:1px solid var(--rule) }
.qa-pair summary { align-items:center; cursor:pointer; display:flex; font-weight:600; gap:1rem; justify-content:space-between; list-style:none; min-height:48px; padding:.6rem 0 }
.qa-pair summary::-webkit-details-marker { display:none }
.qa-pair summary::after { color:var(--gold-ink); content:"+"; font:400 1.4rem/1 var(--sans) }
.qa-pair[open] summary::after { content:"\2212" }
.qa-pair .qa-answer { color:var(--slate); padding:0 0 1rem }
.qa-pair .qa-answer p:last-child { margin:0 }
.harbour { background:var(--deep); color:#f3ede1; isolation:isolate; overflow:hidden; position:relative }
.harbour-art { inset:0; position:absolute; z-index:-1 }
.harbour-art svg { height:100%; width:100% }
.harbour .shell { align-items:center; display:flex; flex-wrap:wrap; gap:2rem; justify-content:space-between; padding:3.4rem 0 }
.harbour h2 { color:#fff8ea; margin:0 0 .4rem }
.harbour p { color:#dfe6ec; margin:0 }
.page-head { background:var(--night); color:#efe9dd; isolation:isolate; overflow:hidden; position:relative }
.page-head .head-art { inset:0; opacity:.55; position:absolute; z-index:-1 }
.page-head .head-art svg { height:100%; width:100% }
.page-head .shell { padding:2.4rem 0 2.8rem }
.page-head h1 { color:#fbf6eb; font-size:clamp(2rem,4vw,3.1rem); max-width:22ch }
.page-head .lede { color:var(--mist); font-size:1.12rem; margin:0; max-width:62ch }
.crumbs ol { display:flex; flex-wrap:wrap; font-size:.88rem; gap:.2rem .5rem; list-style:none; margin:0 0 1.2rem; padding:0 }
.crumbs li { color:var(--haze); margin:0 }
.crumbs li > span { display:inline-block; padding:.35rem 0 }
.crumbs li+li::before { color:#6f859a; content:"/"; margin-right:.5rem }
.crumbs a { color:#e9e2d2; display:inline-block; min-height:24px; padding:.35rem 0 }
.page-meta { color:var(--haze); font-size:.9rem; margin-top:1.1rem }
.page-meta a { color:#efe4cb }
.page-body { padding:3rem 0 4rem }
.page-body .shell { align-items:start; display:grid; gap:3rem; grid-template-columns:minmax(0,var(--measure)) minmax(0,1fr) }
.page-body.wide .shell { grid-template-columns:minmax(0,1fr) }
.prose { max-width:var(--measure) }
.prose h2 { margin-top:2.2rem }
.prose h3 { margin-top:1.6rem }
.prose pre { background:#f1ece1; border:1px solid var(--rule); border-radius:4px; font:400 .9rem/1.55 ui-monospace,Menlo,Consolas,monospace; margin:0 0 1.2em; overflow-wrap:anywhere; padding:1rem 1.1rem; white-space:pre-wrap }
.prose code { background:#efe8da; border-radius:3px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.92em; overflow-wrap:anywhere; padding:.05em .3em }
.prose pre code { background:none; font-size:inherit; padding:0 }
.prose table { border-collapse:collapse; font-size:.95rem; width:100% }
.prose caption { color:var(--ink); font-weight:600; padding-bottom:.5rem; text-align:left }
.prose th,.prose td { border:1px solid var(--rule); padding:.55rem .65rem; text-align:left; vertical-align:top }
.prose th { background:#efe7d7; font-weight:600 }
.table-scroll { margin-bottom:1.15em }
.table-scroll table { margin:0; table-layout:auto }
.prose td,.prose th { overflow-wrap:anywhere }
@media (max-width:520px) {
  .prose table { font-size:.85rem }
  .prose th,.prose td { padding:.4rem .35rem }
}
.side-rail { display:grid; gap:1.2rem; position:sticky; top:1.5rem }
.rail-box { background:var(--ivory); border:1px solid var(--rule); border-radius:var(--radius); padding:1.1rem 1.15rem }
.rail-box h2 { font-size:1.2rem; margin:0 0 .6rem }
.rail-box ul { list-style:none; margin:0; padding:0 }
.rail-box li { font-size:.93rem; margin:0 0 .35rem }
.rail-box li a { display:inline-block; padding:.2rem 0 }
.rail-box .btn { margin-top:.2rem }
.rail-box p { font-size:.93rem; margin:0 0 .8rem }
@media (max-width:980px) {
  .page-body .shell { grid-template-columns:minmax(0,1fr) }
  .side-rail { position:static }
}
.margin-note,.worked-example,.check-panel,.source-quote { border-radius:var(--radius); margin:0 0 1.3em; padding:1.1rem 1.25rem }
.margin-note { background:#eef2f5; border-left:4px solid var(--night-2) }
.worked-example { background:#f6efdf; border:1px dashed #a48d5d }
.check-panel { background:var(--card); border:1px solid var(--rule) }
.source-quote { background:var(--ivory); border-left:4px solid var(--gold-ink) }
.margin-note__label,.worked-example__label,.check-panel__label,.source-quote__label,.step-run__label,.pair-grid__label { color:var(--gold-ink); font:600 .76rem/1.3 var(--sans); letter-spacing:.16em; margin:0 0 .5rem; text-transform:uppercase }
.margin-note>:last-child,.worked-example>:last-child,.check-panel>:last-child,.source-quote>:last-child { margin-bottom:0 }
.pair-grid { display:grid; gap:1rem; grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:1.3em }
.pair-grid>* { margin:0 }
@media (max-width:700px) {
  .pair-grid { grid-template-columns:1fr }
}
.source-list { border-top:1px solid var(--rule); margin-top:2.6rem; padding-top:1.4rem }
.source-list h2 { font-size:1.35rem }
.source-list ol { font-size:.93rem }
.source-kind { color:var(--gold-ink); font-size:.78rem; font-weight:600; letter-spacing:.08em; margin-left:.35rem; text-transform:uppercase }
.page-faq { margin-top:2.4rem }
.related { margin-top:2.6rem }
.related ul { display:grid; gap:.6rem; grid-template-columns:repeat(2,minmax(0,1fr)); list-style:none; padding:0 }
.related li { margin:0 }
.related a { background:var(--card); border:1px solid var(--rule); border-radius:var(--radius); color:var(--night-2); display:block; font-weight:600; padding:.7rem .9rem; text-decoration:none }
.related a:hover { border-color:#b8a57e }
@media (max-width:620px) {
  .related ul { grid-template-columns:1fr }
}
.tool-frame { background:var(--card); border:1px solid var(--rule); border-radius:8px; margin:0 0 2rem; padding:1.4rem }
.tool-frame h2 { font-size:1.5rem; margin-top:0 }
.tool-nojs { background:#eef2f5; border-left:4px solid var(--night-2); border-radius:var(--radius); padding:1rem 1.2rem }
.js .tool-nojs { display:none }
.no-js .tool-live { display:none }
.field { margin:0 0 1.1rem }
.field label,.field .label { display:block; font-weight:600; margin-bottom:.3rem }
.field .hint { color:var(--slate); display:block; font-size:.9rem; margin-bottom:.4rem }
.field textarea,.field select,.field input[type=url],.field input[type=email],.field input[type=text] { background:#fff; border:1.5px solid var(--edge); border-radius:4px; color:var(--ink); font:400 1rem/1.4 var(--sans); min-height:46px; padding:.6rem .7rem; width:100% }
.field textarea { min-height:9rem; resize:vertical }
.field textarea.tall { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.95rem; min-height:15rem }
.field textarea:focus-visible,.field select:focus-visible,.field input:focus-visible { outline:3px solid var(--ring-light); outline-offset:2px }
.field .error-text { color:#8f1d1d; display:block; font-weight:600; margin-bottom:.35rem }
.field.has-error input,.field.has-error textarea,.field.has-error select { border-color:#8f1d1d; border-width:2px }
.check-row { align-items:flex-start; display:flex; gap:.65rem; margin:0 0 .7rem }
.check-row input { accent-color:var(--night-2); flex:none; height:24px; margin:.1rem 0 0; width:24px }
.check-row label { font-weight:400 }
fieldset { border:1px solid var(--rule); border-radius:var(--radius); margin:0 0 1.2rem; padding:1rem 1.1rem }
legend { font-weight:600; padding:0 .4rem }
.tool-actions { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:.4rem }
.tool-output { border-top:1px solid var(--rule); margin-top:1.6rem; padding-top:1.4rem }
.tool-output:focus { outline:none }
.tool-output:focus-visible { outline:3px solid var(--ring-light); outline-offset:4px }
.status-line { color:var(--night-2); font-weight:600 }
.alert-box { background:#fbf0ee; border:2px solid #8f1d1d; border-radius:var(--radius); margin:0 0 1.2rem; padding:1rem 1.2rem }
.alert-box:focus { outline:3px solid var(--ring-light); outline-offset:3px }
.alert-box h2,.alert-box h3 { color:#7a1515; font-size:1.15rem; margin:0 0 .4rem }
.alert-box ul { margin:0 }
.ok-box { background:#eef7f0; border:2px solid #24613d; border-radius:var(--radius); margin:0 0 1.2rem; padding:1rem 1.2rem }
.ok-box:focus { outline:3px solid var(--ring-light); outline-offset:3px }
.outline-tree { font-size:.97rem }
.outline-tree ul { border-left:1.5px solid #c8b78f; list-style:none; margin:0; padding-left:1.4rem }
.outline-tree>ul { border-left:0; padding-left:0 }
.outline-tree li { margin:.3rem 0; position:relative }
.outline-tree li>span { background:#f1e7d1; border-radius:3px; display:inline-block; padding:.2rem .55rem }
.outline-tree .depth-note { color:var(--slate); font-size:.85rem; margin-left:.4rem }
.pre-out { background:#f3efe6; border:1px solid var(--rule); border-radius:4px; font:400 .9rem/1.5 ui-monospace,Menlo,Consolas,monospace; max-height:26rem; overflow:auto; overflow-wrap:anywhere; padding:1rem; white-space:pre-wrap }
.meter { align-items:center; display:flex; font-weight:600; gap:.6rem }
.contact-grid { align-items:start; display:grid; gap:2.5rem; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) }
@media (max-width:900px) {
  .contact-grid { grid-template-columns:1fr }
}
.desk-panel { background:var(--card); border:1px solid var(--rule); border-radius:8px; padding:1.5rem }
.hp-field { height:1px; left:-10000px; overflow:hidden; position:absolute!important; width:1px }
.colophon { background:var(--deep); color:#d8dee4; font-size:.95rem; padding:3rem 0 1.5rem }
.colophon a { color:#efe7d6 }
.colophon-top { display:grid; gap:2rem; grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr)) }
.colophon h2 { color:var(--gold-soft); font:600 .8rem/1.3 var(--sans); letter-spacing:.18em; margin:0 0 .8rem; text-transform:uppercase }
.colophon ul { list-style:none; margin:0; padding:0 }
.colophon li { margin:0 0 .25rem }
.colophon li a { display:inline-block; padding:.25rem 0 }
.colophon .brand { margin:0 0 .8rem }
.colophon-note { color:#b9c4ce; font-size:.9rem; max-width:34rem }
.colophon-base { align-items:center; border-top:1px solid #23394d; display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between; margin-top:2.2rem; padding-top:1.3rem }
.colophon-base ul { display:flex; flex-wrap:wrap; gap:.2rem 1.2rem }
.disclosure-line { color:#b9c4ce; flex-basis:100%; font-size:.88rem; margin:0; max-width:80ch }
.to-top { align-items:center; border:1.5px solid #8796a3; border-radius:50%; display:inline-flex; height:44px; justify-content:center; width:44px }
.to-top svg { height:18px; width:18px }
@media (max-width:900px) {
  .colophon-top { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:560px) {
  .colophon-top { grid-template-columns:1fr }
}
.lead-in { color:var(--ink); font-size:1.15rem }
.kicker-list { column-gap:2rem; columns:2 }
@media (max-width:620px) {
  .kicker-list { columns:1 }
}
.center { text-align:center }
.stack-gap>*+* { margin-top:1rem }
.notfound { padding:5rem 0; text-align:center }
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:0s!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:0s!important }
}
@media print {
  .skiplink,.side-rail,.harbour,.colophon,.masthead { display:none }
}
@media (max-width:560px) {
  .route-tree { font-size:.64rem }
  .route-tree .node { hyphens:none; overflow-wrap:normal; padding:.38rem .18rem; word-break:normal }
  .route-tree .node.root { font-size:.8rem }
  .route-tree li { padding-left:.12rem; padding-right:.12rem }
}
@media (max-width:360px) {
  .hero-chart { padding-left:.5rem; padding-right:.5rem }
  .route-tree { font-size:.56rem }
  .route-tree .node { padding:.34rem .12rem }
}