:root {
  color-scheme: dark;
  --background: #111b16;
  --surface: #18261e;
  --surface-raised: #1e3025;
  --line: #35483b;
  --ink: #f2efde;
  --muted: #afbeb1;
  --gold: #f2cb80;
  --gold-light: #ffe0a4;
  --pine: #a9c5a8;
  --mono: ui-monospace, "Cascadia Code", Consolas, monospace;
  --display: Georgia, "Times New Roman", serif;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--background); color: var(--ink); line-height: 1.55; }
a { color: var(--gold); text-underline-offset: .2em; }
a:hover { color: var(--gold-light); }
button, input { font: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 4px;
}
img { display: block; max-width: 100%; }
svg { display: inline-block; width: 1.1em; height: 1.1em; flex: none; vertical-align: -.16em; }
h1, h2, p, figure { margin: 0; }
.wrap { width: min(100% - 4rem, 1200px); margin-inline: auto; }
.mono, kbd { font-family: var(--mono); }
.eyebrow {
  color: var(--gold); font: 650 .72rem/1.45 var(--mono);
  text-transform: uppercase; letter-spacing: .12em;
}
.sr-only, .skip-link:not(:focus) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0;
}
.skip-link:focus {
  position: fixed; z-index: 20; top: 12px; left: 12px;
  padding: .65rem .9rem; background: var(--gold); color: var(--background);
}

.site-header { background: #121e17; border-bottom: 1px solid var(--line); }
.header-inner { min-height: 75px; display: flex; align-items: center; gap: 1.4rem; padding-block: .8rem; }
.brand {
  display: inline-flex; align-items: center; gap: .7rem; color: var(--ink);
  text-decoration: none; line-height: 1.1;
}
.brand strong { display: block; font-size: 1.03rem; letter-spacing: -.025em; }
.brand small { display: block; margin-top: .24rem; color: var(--muted); font-size: .8rem; }
.brand img { border: 1px solid #3b4d3f; border-radius: 11px; }
.button {
  min-height: 40px; display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; padding: .48rem .85rem; border-radius: 7px; border: 1px solid #584e34;
  font-weight: 650; font-size: .85rem; text-decoration: none; color: var(--gold);
  background: #2d2a1c;
}
.button:hover { background: #3b3322; border-color: var(--gold); }
.map-button { margin-inline-start: auto; flex: none; }
.map-button svg:last-child { width: .9rem; height: .9rem; }
.header-inner .wiki-search { margin-inline-start: auto; width: min(36%, 330px); }
.header-inner .wiki-search + .map-button { margin-inline-start: 0; }
.header-inner .wiki-search[hidden] + .map-button { margin-inline-start: auto; }
.site-nav { display: flex; flex-wrap: wrap; column-gap: 1.65rem; }
.site-nav a {
  padding: .55rem 0 .72rem; border-bottom: 2px solid transparent;
  color: var(--muted); text-decoration: none; font-size: .87rem; font-weight: 550;
}
.site-nav a:hover { color: var(--ink); }
.site-nav [aria-current="page"] { color: var(--gold); border-color: var(--gold); }

.hero {
  display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); align-items: center;
  gap: clamp(2rem, 5vw, 5.5rem); padding-block: clamp(2.6rem, 5vw, 5rem) clamp(2.1rem, 4vw, 3.8rem);
}
.hero-label { display: flex; align-items: center; gap: .65rem; }
.hero-label span { width: 24px; height: 1px; background: var(--gold); }
.hero h1, .guide-heading h1 {
  font: 400 clamp(3.25rem, 5.65vw, 5.15rem)/.99 var(--display); letter-spacing: -.06em;
}
.hero h1 { margin-block: 1.05rem 1.35rem; }
.hero h1 span { color: var(--gold); }
.hero-intro { max-width: 30rem; color: var(--muted); font-size: clamp(.98rem, 1.35vw, 1.12rem); }
.hero-copy .wiki-search { margin-top: 1.55rem; max-width: 31rem; }
.map-figure {
  overflow: hidden; border: 1px solid #49604d; border-radius: 12px;
  background: #18261e; box-shadow: 0 12px 35px #080f0a58;
}
.map-stage { position: relative; aspect-ratio: 1.52; overflow: hidden; isolation: isolate; }
.map-plot { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; aspect-ratio: 785 / 753; }
.map-plot img { width: 100%; height: 100%; filter: sepia(.33) saturate(1.16) brightness(1.07); }
.map-plot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(#d2e4c816 1px, transparent 1px), linear-gradient(90deg, #d2e4c816 1px, transparent 1px);
  background-size: 10% 10%; box-shadow: inset 0 0 65px #111b1680;
}
.hero-pin {
  position: absolute; z-index: 1; left: var(--pin-x); top: var(--pin-z);
  width: 30px; height: 30px; display: grid; place-items: center;
  transform: translate(-50%, -50%); text-decoration: none;
}
.hero-pin::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 4px #f2cb8055, 0 0 0 7px #151e1870;
}
.hero-pin span {
  position: absolute; left: calc(50% + 13px); white-space: nowrap;
  color: var(--ink); background: #122017eb; padding: .21rem .38rem;
  border: 1px solid #6d795d; border-radius: 4px;
  font: 650 clamp(.55rem, 1vw, .69rem)/1.3 var(--mono);
}
.hero-pin:nth-of-type(2) span { left: auto; right: calc(50% + 13px); }
.hero-pin:hover span, .hero-pin:focus-visible span { border-color: var(--gold); color: var(--gold-light); }
.axis {
  position: absolute; z-index: 1; top: .7rem; right: .7rem; padding: .25rem .4rem;
  color: var(--ink); background: #122017dc; border-radius: 4px; font: .69rem/1.35 var(--mono);
}
.map-figure figcaption {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .72rem .95rem; border-top: 1px solid #49604d; font-size: .82rem;
}
.map-figure .mono { color: var(--pine); letter-spacing: .09em; font-size: .69rem; }

.wiki-search { position: relative; z-index: 3; }
.search-form {
  display: flex; align-items: center; gap: .7rem; padding: 0 .8rem; min-height: 43px;
  border: 1px solid #4c6351; border-radius: 7px; background: #19271f; color: var(--pine);
}
.hero .search-form { min-height: 53px; }
.search-form:focus-within { border-color: var(--gold); outline: 1px solid var(--gold); }
.search-form input {
  flex: 1; min-width: 0; min-height: 41px; padding: 0; background: transparent;
  color: var(--ink); font-size: .92rem; border: 0; outline: 0;
}
.search-form input:focus-visible { outline: 0; }
.search-form input::placeholder { color: #abb9ad; opacity: 1; }
.search-form kbd {
  min-width: 1.55rem; text-align: center; padding: .04rem .35rem;
  color: var(--muted); border: 1px solid #495f4e; border-radius: 4px; font-size: .76rem;
}
.search-panel {
  position: absolute; inset: calc(100% + 7px) 0 auto;
  max-height: min(52vh, 390px); overflow: auto;
  border: 1px solid #536b56; border-radius: 8px; background: #1b2b21;
  box-shadow: 0 12px 30px #080f0ab0;
}
.search-status { padding: .58rem .8rem; color: var(--muted); font-size: .78rem; }
.search-results { list-style: none; margin: 0; padding: 0; }
.search-results a {
  display: grid; gap: .05rem; padding: .55rem .8rem; border-top: 1px solid var(--line);
  color: var(--ink); text-decoration: none; font-size: .87rem; font-weight: 650;
}
.search-results a:hover, .search-results a:focus-visible { background: #2b4131; color: var(--gold-light); }
.search-results a:focus-visible { outline-offset: -3px; }
.search-results small { color: var(--muted); font-size: .76rem; font-weight: 450; }

.guide-index { padding: 1.5rem 0 3.65rem; border-top: 1px solid var(--line); }
.section-heading {
  display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; margin-bottom: .9rem;
}
.section-heading h2, .article h2 { font: 400 clamp(1.75rem, 3.2vw, 2.4rem)/1.16 var(--display); letter-spacing: -.035em; }
.index-label { color: var(--muted); text-transform: uppercase; font-size: .68rem; letter-spacing: .1em; }
.guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.guide-card, .map-facts {
  border: 1px solid var(--line); border-radius: 9px; background: var(--surface); padding: 1rem;
}
.guide-card {
  display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: start;
  color: var(--ink); text-decoration: none;
}
.guide-card:hover { background: var(--surface-raised); border-color: #668367; color: var(--ink); }
.card-icon {
  display: grid; place-items: center; width: 36px; height: 36px;
  border: 1px solid #4d5d42; border-radius: 7px; color: var(--gold); background: #283427;
}
.card-icon svg { width: 1.22rem; height: 1.22rem; }
.guide-card small { display: block; font-size: .61rem; }
.guide-card strong { display: block; font-size: 1.03rem; line-height: 1.28; margin-block: .18rem .3rem; }
.guide-card strong + span { display: block; color: var(--muted); font-size: .84rem; line-height: 1.48; }
.card-arrow { color: var(--gold); align-self: center; }
.map-facts { background: #202c21; padding-inline: 1.1rem; }
.map-facts p { color: var(--muted); font-size: .87rem; margin-block: .15rem .25rem; }
.map-facts strong { color: var(--ink); font: 700 1.12rem var(--mono); }
.map-facts strong:nth-child(2) { margin-inline-start: .65rem; }
.map-facts a { font-size: .81rem; text-decoration: none; }

.guide-page { padding-block: 1.7rem 3.65rem; }
.crumb { display: flex; align-items: center; gap: .58rem; color: var(--muted); font-size: .83rem; }
.crumb a { text-decoration: none; }
.guide-heading { padding: clamp(1.5rem, 4vw, 2.8rem) 0 1.65rem; border-bottom: 1px solid var(--line); }
.guide-heading .eyebrow span { color: var(--muted); }
.guide-heading h1 { font-size: clamp(2.85rem, 5.8vw, 4.7rem); margin-block: .55rem .65rem; }
.guide-heading > p:last-child { color: var(--muted); font-size: 1.08rem; }
.guide-layout {
  display: grid; grid-template-columns: minmax(140px, 200px) minmax(0, 850px);
  gap: clamp(1.25rem, 5vw, 4.5rem); padding-top: 1.85rem;
}
.toc { position: sticky; top: 1.5rem; align-self: start; border-left: 1px solid var(--line); padding-left: 1rem; }
.toc ol { list-style: none; margin: .45rem 0 0; padding: 0; }
.toc a { display: inline-block; padding-block: .3rem; color: var(--muted); font-size: .88rem; text-decoration: none; }
.toc a:hover { color: var(--gold); }
.article { min-width: 0; }
.article section + section { margin-top: 2.25rem; }
.article h2 { margin-bottom: .65rem; }
.article section > p { max-width: 73ch; }
.article p + p { margin-top: .72rem; }
.article p, .article li, .article dd { color: #d1d9ce; }
.article strong { color: var(--ink); }
.article [id] { scroll-margin-top: 1.15rem; }
.article h2:target { color: var(--gold); }
.article tr:target > *, .trail:target { background: #39412d; }
.steps { padding-left: 1.25rem; }
.steps li { padding-left: .25rem; margin-bottom: .62rem; }
.article .source { font-size: .83rem; color: var(--muted); }
.field-note, .spoiler-note {
  border-left: 3px solid #bd9857; padding: .8rem 1rem; background: #242e22; border-radius: 0 6px 6px 0;
}
.field-note { margin-top: 1rem; }
.field-note > p { margin-top: .16rem; }
.definitions {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem; margin: .9rem 0;
}
.definitions div { padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.definitions dt { font-weight: 700; }
.definitions dd { margin: .16rem 0 0; font-size: .9rem; }

.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 8px; margin-top: .85rem; }
table { width: 100%; min-width: 28rem; border-collapse: collapse; background: var(--surface); font-size: .86rem; }
th, td { padding: .58rem .7rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { background: #243629; color: var(--pine); font-size: .72rem; white-space: nowrap; }
tbody th { font-weight: 650; }
tbody td { color: #d1d9ce; }
tbody tr:last-child > * { border-bottom: 0; }
tbody td:nth-child(2), tbody td:nth-child(3), .marker-id { font-family: var(--mono); white-space: nowrap; }
.marker-id { font-size: .77rem; color: var(--pine); }
.map-link { display: inline-flex; align-items: center; gap: .23rem; font-weight: 650; text-decoration: none; }
.map-link:hover { text-decoration: underline; }
.map-link svg { width: .95em; height: .95em; }
.trail {
  margin-top: .64rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
}
.trail summary {
  display: flex; justify-content: space-between; align-items: baseline; gap: .65rem;
  padding: .7rem .88rem; cursor: pointer; font-weight: 650; list-style: none;
}
.trail summary::-webkit-details-marker { display: none; }
.trail summary span:first-child::before { content: "+"; margin-right: .5rem; color: var(--gold); font-family: var(--mono); }
.trail[open] summary span:first-child::before { content: "−"; }
.trail summary .trail-code { margin-right: .4rem; color: var(--gold); font-size: .8rem; }
.trail summary .trail-code::before { display: none; }
.trail summary small { flex: none; color: var(--muted); font-size: .74rem; font-weight: 500; }
.trail-content { padding: .1rem .88rem .88rem; }
.trail table { min-width: 0; }
.equipment-pin {
  display: flex; align-items: center; flex-wrap: wrap; gap: .35rem 1rem;
  padding: .65rem .9rem; margin-bottom: .72rem;
  border: 1px solid var(--line); border-radius: 7px; background: var(--surface);
}
.equipment-pin .mono { color: var(--pine); }
.next-guide {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2.3rem;
  padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); text-decoration: none;
}
.next-guide:hover { background: var(--surface-raised); }
.next-guide strong { display: block; }

.site-footer { border-top: 1px solid var(--line); background: #121e17; }
.footer-inner {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem 2rem; padding-block: 1.35rem;
  font-size: .85rem;
}
.footer-inner p { color: var(--muted); max-width: 45rem; margin-top: .22rem; }

@media (max-width: 870px) {
  .wrap { width: min(100% - 2.5rem, 1200px); }
  .hero { gap: 1.6rem; }
  .hero h1 { font-size: clamp(2.95rem, 6.3vw, 4.35rem); }
  .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  .wrap { width: calc(100% - 2rem); }
  .header-inner { flex-wrap: wrap; gap: .62rem; min-height: 64px; }
  .header-inner .wiki-search { order: 2; width: 100%; }
  .header-inner .wiki-search + .map-button { margin-inline-start: auto; }
  .site-nav { column-gap: 1.1rem; }
  .site-nav a { font-size: .8rem; padding-block: .39rem .5rem; }
  .hero { grid-template-columns: minmax(0, 1fr); padding-block: 2.25rem 1.6rem; }
  .hero h1 { font-size: clamp(2.8rem, 10.4vw, 4.6rem); }
  .hero-copy .wiki-search, .hero-intro { max-width: none; }
  .search-form kbd { display: none; }
  .guide-layout { grid-template-columns: minmax(0, 1fr); padding-top: 1.2rem; }
  .toc { position: static; }
  .toc ol { display: flex; flex-wrap: wrap; gap: .1rem .9rem; }
  .guide-page { padding-block: 1.15rem 2.4rem; }
  .footer-inner { flex-direction: column; }
}
@media (max-width: 460px) {
  .guide-grid, .definitions { grid-template-columns: minmax(0, 1fr); }
  .map-button { font-size: .78rem; padding-inline: .55rem; }
  .map-button svg:first-child { display: none; }
  .guide-index { padding-bottom: 2.25rem; }
  .trail summary { align-items: start; }
  .trail summary small { display: none; }
  .trail th, .trail td { padding-inline: .42rem; }
}

/* Equipment catalog */
.equipment-page .guide-layout { grid-template-columns: minmax(135px, 165px) minmax(0, 1fr); }
.dealer-catalog { margin-top: 1rem; }
.catalog-controls {
  display: grid; grid-template-columns: minmax(12rem, 1.35fr) minmax(9rem, 1fr) minmax(8rem, .75fr) minmax(9rem, 1fr);
  gap: .7rem; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); padding: .85rem;
}
.catalog-controls label { display: grid; gap: .25rem; color: var(--pine); font-size: .78rem; font-weight: 650; }
.catalog-controls input, .catalog-controls select {
  width: 100%; min-width: 0; min-height: 38px; padding: .35rem .5rem;
  border: 1px solid #4c6351; border-radius: 5px; background: var(--background); color: var(--ink); font: inherit;
}
.catalog-controls input::placeholder { color: var(--muted); }
.article .catalog-count { color: var(--muted); font-size: .8rem; margin-top: .5rem; }
.dealer-catalog .table-wrap { margin-top: .4rem; }
.dealer-catalog table { min-width: 51rem; }
.dealer-catalog th, .dealer-catalog td { padding: .62rem .55rem; }
.dealer-catalog th[scope="row"] { min-width: 7.4rem; }
.dealer-catalog td:nth-child(2) { min-width: 6.4rem; font-family: inherit; white-space: normal; }
.dealer-catalog td:nth-child(3),
.dealer-catalog td:nth-child(5),
.dealer-catalog td:nth-child(6) { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dealer-catalog td:nth-child(4) { min-width: 4rem; }
.dealer-catalog td:last-child { min-width: 14rem; }
.dealer-sub { display: block; margin-top: .15rem; color: var(--muted); font: 450 .74rem/1.35 system-ui, sans-serif; }
.article .definitions [id]:target { border-color: var(--gold); }

@media (max-width: 1000px) {
  .catalog-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  .equipment-page .guide-layout { grid-template-columns: minmax(0, 1fr); }
}