:root {
  --guide-ground: #e9efe6;
  --guide-paper: #fbfcf7;
  --guide-ink: #2a2226;
  --guide-muted: #665c5f;
  --guide-mulberry: #a6335d;
  --guide-moss: #54705f;
  --guide-rule: rgba(42, 34, 38, .19);
  --guide-shadow: rgba(42, 34, 38, .12);
  color: var(--guide-ink);
  background: var(--guide-ground);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--guide-ground); }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--guide-mulberry); outline-offset: 4px; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 3; padding: .65rem .9rem; background: var(--guide-ink); color: var(--guide-paper); }
.skip-link:focus { top: 1rem; }
.guide-header, .guide-footer { display: flex; align-items: center; justify-content: space-between; gap: 2rem; max-width: 1180px; margin: 0 auto; padding: 1.35rem 2rem; }
.guide-header { border-bottom: 1px solid var(--guide-rule); }
.brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--guide-ink); font-weight: 760; letter-spacing: -.02em; text-decoration: none; }
.brand__mark { display: block; border-radius: 8px; }
.guide-nav { display: flex; flex-wrap: wrap; gap: 1.15rem; font-size: .88rem; }
.guide-nav a { text-decoration: none; color: var(--guide-muted); }
.guide-nav a:hover { color: var(--guide-mulberry); }
main { max-width: 1180px; margin: 0 auto; }
.guide-hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding: clamp(2.5rem, 4vw, 4rem) 2rem clamp(3.5rem, 6vw, 5rem); }
.route-label { margin: 0 0 1.1rem; color: var(--guide-mulberry); font: 700 .73rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .13em; }
h1, h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 600; letter-spacing: -.045em; line-height: .98; }
h1 { max-width: 760px; font-size: clamp(3.1rem, 4.5vw, 4.6rem); }
h2 { font-size: clamp(2.2rem, 4vw, 4.2rem); }
.hero-lede { max-width: 620px; margin: 1.65rem 0 0; color: var(--guide-muted); font-size: clamp(1.08rem, 1.5vw, 1.3rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.2rem; }
.button { display: inline-flex; align-items: center; gap: .7rem; min-height: 3.1rem; padding: .78rem 1rem; border: 1px solid var(--guide-ink); font-weight: 720; text-decoration: none; transition: transform .18s ease, background-color .18s ease, color .18s ease; }
.button:hover { transform: translateY(-3px); }
.button--primary { background: var(--guide-mulberry); border-color: var(--guide-mulberry); color: #fff; }
.button--primary:hover { background: var(--guide-ink); border-color: var(--guide-ink); }
.button--quiet { background: transparent; }
.button--quiet:hover { background: var(--guide-paper); }
.hero-boundary { max-width: 590px; margin: 1.5rem 0 0; color: var(--guide-muted); font-size: .84rem; }
.hero-boundary strong { color: var(--guide-ink); }
.specimen { position: relative; padding: 1.15rem 1.25rem 1.35rem; border: 1px solid var(--guide-ink); background: var(--guide-paper); box-shadow: 14px 14px 0 var(--guide-moss); animation: specimen-arrival .65s ease both; }
.specimen::before { content: ""; position: absolute; top: -1px; left: 15%; width: 28%; height: 4px; background: var(--guide-mulberry); }
.specimen__top { display: flex; justify-content: space-between; color: var(--guide-muted); font: 700 .68rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .09em; }
.specimen__glyph { position: relative; display: grid; place-items: center; height: 185px; margin: 1.5rem 0; border: 1px solid var(--guide-rule); background: linear-gradient(135deg, transparent 49.4%, var(--guide-rule) 49.5%, var(--guide-rule) 50.5%, transparent 50.6%); }
.specimen__glyph span { position: absolute; width: 76px; height: 76px; border: 1px solid var(--guide-moss); border-radius: 50%; }
.specimen__glyph span:nth-child(1) { transform: translate(-32px, -20px); }
.specimen__glyph span:nth-child(2) { transform: translate(28px, 22px); }
.specimen__glyph span:nth-child(3) { width: 28px; height: 28px; background: var(--guide-mulberry); border: 0; }
.specimen__glyph i { position: absolute; width: 120px; border-top: 1px dashed var(--guide-mulberry); transform: rotate(-28deg); }
.specimen__eyebrow { margin: 0 0 .5rem; color: var(--guide-muted); font: 700 .73rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; }
.specimen ol { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.specimen li { display: flex; gap: .8rem; padding: .65rem 0; border-top: 1px solid var(--guide-rule); }
.specimen li b { color: var(--guide-mulberry); font: 700 .73rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.specimen__note { margin: 1.15rem 0 0; color: var(--guide-muted); font-size: .8rem; }
.route-section { padding: 0 2rem 7rem; }
.section-intro { display: grid; grid-template-columns: minmax(260px, .9fr) minmax(0, 1fr); gap: 1rem 4rem; align-items: end; padding-bottom: 2rem; border-bottom: 1px solid var(--guide-ink); }
.section-intro .route-label { grid-column: 1 / -1; margin-bottom: 0; }
.section-intro h2 { max-width: 540px; }
.section-intro p:last-child { max-width: 480px; margin: 0; color: var(--guide-muted); }
.route-list { border-bottom: 1px solid var(--guide-rule); }
.route { display: grid; grid-template-columns: 3.2rem minmax(180px, 1fr) minmax(260px, 1.15fr) 5rem; gap: 1rem; align-items: center; padding: 1.25rem 0; border-bottom: 1px solid var(--guide-rule); text-decoration: none; transition: padding .18s ease, background-color .18s ease; }
.route:hover { padding-right: .65rem; padding-left: .65rem; background: rgba(251, 252, 247, .62); }
.route__number { color: var(--guide-mulberry); font: 700 .75rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; }
.route__file { font-weight: 760; }
.route__answer { color: var(--guide-muted); font-size: .9rem; }
.route__price { justify-self: end; color: var(--guide-mulberry); font: 700 1rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }
.route__price b { display: inline-block; margin-left: .3rem; font-size: 1.15rem; transition: transform .18s ease; }
.route:hover .route__price b { transform: translate(3px, -3px); }
.boundary { display: grid; grid-template-columns: minmax(260px, .9fr) minmax(0, 1.1fr); gap: 2rem 5rem; padding: 5rem 2rem 7rem; border-top: 1px solid var(--guide-rule); }
.boundary__copy { max-width: 520px; color: var(--guide-muted); }
.boundary__copy p { margin: 0 0 1.25rem; }
.text-link { color: var(--guide-mulberry); font-weight: 760; text-decoration-thickness: 2px; text-underline-offset: .22em; }
.guide-footer { border-top: 1px solid var(--guide-rule); color: var(--guide-muted); font-size: .8rem; }
.guide-footer .brand { color: var(--guide-ink); }
.guide-footer a:not(.brand) { text-underline-offset: .2em; }
@keyframes specimen-arrival { from { opacity: 0; transform: translateY(14px) rotate(1deg); } to { opacity: 1; transform: translateY(0) rotate(0); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }
@media (max-width: 760px) {
  .guide-header, .guide-footer { align-items: flex-start; padding-right: 1rem; padding-left: 1rem; }
  .guide-header { gap: 1rem; }
  .guide-nav { justify-content: flex-end; gap: .55rem .8rem; font-size: .78rem; }
  .guide-hero { grid-template-columns: 1fr; padding: 3.5rem 1rem 5rem; gap: 3rem; }
  h1 { font-size: clamp(3.1rem, 17vw, 5rem); }
  .specimen { max-width: 480px; box-shadow: 8px 8px 0 var(--guide-moss); }
  .route-section { padding: 0 1rem 5rem; }
  .section-intro { grid-template-columns: 1fr; gap: 1rem; }
  .section-intro .route-label { grid-column: auto; }
  .route { grid-template-columns: 2.2rem minmax(0, 1fr) 4rem; gap: .55rem .7rem; align-items: start; }
  .route__answer { grid-column: 2 / -1; font-size: .82rem; }
  .route__price { grid-column: 3; grid-row: 1; }
  .route:hover { padding-right: .25rem; padding-left: .25rem; }
  .boundary { grid-template-columns: 1fr; gap: 1rem; padding: 4rem 1rem 5rem; }
  .guide-footer { flex-direction: column; gap: .8rem; }
}