:root {
  --current: #263c59;
  --cloud: #c8d9e6;
  --pearl: #afc3d4;
  --slate: #6d89a6;
  --driftwood: #e6ded4;
  --mist: #f2f4f6;
  --paper: #fafbf9;
  --ink: var(--current);
  --quiet-ink: #354c68;
  --border: #c1ccd5;
  --strip: var(--current);
  --strip-ink: var(--mist);
  --header-surface: var(--cloud);
  --header-ink: var(--current);
  --menu-surface: var(--paper);
  --menu-ink: var(--current);
  --shadow: 0 18px 45px rgb(38 60 89 / 25%);
  --soft-shadow: 0 10px 30px rgb(38 60 89 / 10%);
  --radius: 14px;
  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --ui: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --unit: 8px;
  --pad: 1.5rem;
  --measure: 72ch;
  --page-width: 1280px;
  --section-gap: clamp(4rem, 8vw, 8rem);
  --hero-size: clamp(2.5rem, 5vw, 4rem);
  --entry-time: 420ms;
  --hover-time: 200ms;
}

* { box-sizing: border-box; }
html { color-scheme: light; scroll-padding-top: 2rem; }
body {
  margin: 0;
  min-width: 0;
  color: var(--ink);
  background-color: var(--current);
  background-image: linear-gradient(180deg, var(--cloud), var(--pearl) 45%, var(--current));
  font: 400 1rem/1.6 var(--serif);
  -webkit-text-size-adjust: 100%;
}
body::before {
  content: "";
  position: fixed;
  top: 17rem;
  right: 4%;
  width: min(36vw, 35rem);
  height: 28rem;
  border-radius: 50%;
  background: rgb(242 244 246 / 15%);
  filter: blur(55px) saturate(.9);
  pointer-events: none;
  z-index: -1;
}
button, summary { font: 500 1rem/1.3 var(--ui); }
button { cursor: pointer; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .25em; }
a:hover { text-decoration-thickness: 2px; }
a, button, summary { -webkit-tap-highlight-color: rgb(109 137 166 / 20%); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--current); outline-offset: 5px; }
button[hidden], [hidden] { display: none !important; }
[data-plain-toggle][disabled] { display: none; }
[class$="-value"] { font: 500 1rem/1.6 var(--mono); }
h1, h2, h3, p, ul, dl { margin: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; text-wrap: balance; }
h1 { font-size: 2.25rem; letter-spacing: -.04em; line-height: 1.12; }
h2 { font-size: 1.5rem; letter-spacing: -.025em; line-height: 1.25; }
h3 { font-size: 1.25rem; letter-spacing: -.015em; line-height: 1.3; }
p { max-width: var(--measure); }
p + p { margin-top: 1rem; }
svg { display: block; max-width: 100%; }
strong { font-weight: 700; }

[class$="-skip"] {
  position: fixed;
  top: .5rem;
  left: 1rem;
  z-index: 100;
  padding: .75rem 1rem;
  min-height: 48px;
  background: var(--paper);
  color: var(--current);
  border-radius: var(--radius);
  transform: translateY(-200%);
}
[class$="-skip"]:focus { transform: none; }
[class$="-utility"] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 48px;
  padding-inline: max(var(--pad), calc((100% - var(--page-width)) / 2 + var(--pad)));
  background: var(--strip);
  color: var(--strip-ink);
  font: 500 1rem/1.3 var(--ui);
}
[class$="-utility"] nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
[class$="-utility"] a { display: inline-flex; min-height: 48px; align-items: center; text-decoration: none; }
[class$="-utility"] a:hover { text-decoration: underline; }
[class$="-utility"] a:focus-visible, [class$="-footer"] a:focus-visible { outline-color: var(--cloud); }
[class$="-utility-label"] { white-space: nowrap; }
[class$="-header"] {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: var(--page-width);
  margin-inline: auto;
  padding: 1.5rem var(--pad);
  min-height: 112px;
  background-color: var(--header-surface);
  color: var(--header-ink);
}
[class$="-brand"] {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  min-height: 48px;
  font: 700 1.375rem/1.2 var(--serif);
  letter-spacing: -.02em;
  text-decoration: none;
}
[class$="-brand"] svg { width: 48px; height: 48px; flex: 0 0 48px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
[class$="-brand-sub"] { display: block; margin-top: .25rem; font: 400 1rem/1.3 var(--serif); letter-spacing: 0; }
[class$="-tools"] { display: flex; align-items: center; gap: 1rem; }
[class$="-toggle"] {
  border: 1px solid currentColor;
  border-radius: 999px;
  min-height: 48px;
  padding: .6rem 1rem;
  color: var(--header-ink);
  background: transparent;
  transition: background-color var(--hover-time), box-shadow var(--hover-time);
}
[class$="-toggle"]:hover { background: rgb(242 244 246 / 30%); box-shadow: var(--soft-shadow); }
[class$="-toggle"][aria-pressed="true"] { background: var(--paper); color: var(--current); }
[class$="-menu"] { position: relative; }
[class$="-menu"] summary {
  min-height: 48px;
  min-width: 100px;
  padding: .75rem 1rem;
  border-radius: 999px;
  background: var(--current);
  color: var(--mist);
  cursor: pointer;
  list-style: none;
  transition: background-color var(--hover-time);
}
[class$="-menu"] summary::-webkit-details-marker { display: none; }
[class$="-menu"] summary span { display: inline-block; padding-left: .5rem; transition: transform var(--hover-time); }
[class$="-menu"][open] summary span { transform: rotate(45deg); }
[class$="-menu"] summary:focus-visible { outline-color: var(--quiet-ink); }
[class$="-menu"] nav {
  position: absolute;
  right: 0;
  top: calc(100% + .75rem);
  width: 300px;
  padding: 1rem;
  color: var(--menu-ink);
  background: var(--menu-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
[class$="-menu"] ul { list-style: none; padding: 0; }
[class$="-menu"] li + li { border-top: 1px solid var(--border); }
[class$="-menu"] a { display: flex; align-items: center; min-height: 48px; padding: .55rem .75rem; text-decoration: none; font-family: var(--ui); border-radius: 8px; }
[class$="-menu"] a:hover, [class$="-menu"] a[aria-current] { background: var(--cloud); color: var(--current); }
[class$="-menu"] a[aria-current] { font-weight: 700; }
[class$="-container"] { max-width: var(--page-width); margin-inline: auto; padding-inline: var(--pad); }
[class$="-hero"] {
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding-block: clamp(2rem, 4vw, 4rem) var(--section-gap);
}
[class$="-hero-copy"] { min-width: 0; padding: var(--pad); background: var(--cloud); border-radius: var(--radius); animation: coast-arrive var(--entry-time) ease-out both; }
[class$="-kicker"] { margin-bottom: 1.5rem; font: 500 1rem/1.4 var(--ui); color: var(--quiet-ink); }
.home-hero h1 { font-size: var(--hero-size); }
[class$="-deck"] { margin-top: 1.5rem; font-size: 1.125rem; line-height: 1.6; max-width: 50ch; }
[class$="-hero-copy"] > p:not([class]) { margin-top: 1rem; color: var(--quiet-ink); max-width: 56ch; }
[class$="-hero-link"] { display: inline-flex; align-items: center; gap: 1.5rem; margin-top: 1.5rem; min-height: 48px; font: 500 1rem/1.4 var(--ui); }
[class$="-route-sheet"] {
  position: relative;
  padding: 1.5rem;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--mist);
}
[class$="-route-sheet"]::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgb(200 217 230 / 12%); pointer-events: none; }
[class$="-sheet-label"] { font: 500 1rem/1.4 var(--ui); color: var(--quiet-ink); }
[class$="-line-art"] { width: 100%; height: auto; margin-block: .75rem; fill: none; stroke-linecap: round; stroke-linejoin: round; }
[class$="-coast"] { stroke: var(--slate); stroke-width: 1.3; }
[class$="-route-lines"] { stroke: var(--current); stroke-width: 2; stroke-dasharray: 4 7; }
[class$="-route-nodes"] { stroke: var(--current); stroke-width: 1.8; fill: var(--driftwood); }
[class$="-route-checks"] { stroke: var(--current); stroke-width: 2.3; }
[class$="-quiet-lines"] { stroke: var(--pearl); stroke-width: 1.5; }
[class$="-hero-checks"] { display: grid; gap: .5rem; padding: 0; list-style: none; }
[class$="-hero-checks"] li { display: flex; align-items: baseline; gap: .75rem; font-size: 1rem; }
[class$="-hero-checks"] span { color: var(--current); }
[class$="-sketch-caption"] { margin-top: 1.25rem; color: var(--quiet-ink); font-size: 1rem; border-top: 1px solid var(--border); padding-top: 1rem; }
[class$="-reading"] { margin-bottom: var(--section-gap); }
[class$="-section"] {
  display: grid;
  grid-template-columns: minmax(0, .33fr) minmax(0, .67fr);
  column-gap: clamp(2rem, 5vw, 4rem);
  row-gap: 2rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
[class$="-section"] + [class$="-section"], [class$="-routes"] + [class$="-section"] { margin-top: var(--section-gap); }
[class$="-section-title"] { min-width: 0; }
[class$="-section-body"] { min-width: 0; max-width: var(--measure); }
[class$="-section-body"] > [class$="-pair"] { padding-block: 0; border: 0; }
[class$="-checklist"] { padding: 0; list-style: none; }
[class$="-section-body"] > p + [class$="-checklist"] { margin-top: 1.5rem; }
[class$="-check"] { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 1rem; }
[class$="-check"] + [class$="-check"] { border-top: 1px solid var(--border); margin-top: 2rem; padding-top: 2rem; }
[class$="-check"] h3 { margin-bottom: .75rem; }
[class$="-checkmark"] { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-top: .125rem; border-radius: 50%; background: var(--cloud); color: var(--current); font: 500 1rem/1 var(--ui); }
[class$="-basis"] { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 1rem; }
[class$="-source"] { display: inline-flex; align-items: center; gap: .35rem; min-height: 48px; min-width: 44px; max-width: 100%; padding-block: .5rem; color: var(--quiet-ink); font: 500 1rem/1.5 var(--ui); }
[class$="-source"] span { flex-shrink: 0; }
[class$="-note"] { grid-column: 1 / -1; max-width: var(--measure); padding: 1.5rem; background: var(--driftwood); border-radius: 8px; }
[class$="-note-label"] { font: 500 1rem/1.4 var(--ui); margin-bottom: .75rem; }
[class$="-note"] p { color: var(--current); }
[class$="-next"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 64px;
  padding: 1.125rem 1.5rem;
  margin-top: 2rem;
  background: var(--current);
  color: var(--mist);
  border: 1px solid var(--slate);
  border-radius: var(--radius);
  text-decoration: none;
  font: 500 1rem/1.5 var(--ui);
  transition: background-color var(--hover-time), transform var(--hover-time);
}
[class$="-next"]:hover { background: #324f70; transform: translateY(-2px); }
[class$="-next"]:focus-visible { outline-color: var(--cloud); }
[class$="-next"] > span:last-child { font-size: 1.5rem; flex: 0 0 auto; }
[class$="-next-pair"] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; }
[class$="-plain-notes"] {
  margin: 0 0 4rem;
  padding: 1.5rem 2rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--paper);
  max-width: var(--measure);
  box-shadow: var(--soft-shadow);
}
[class$="-plain-notes"] dl { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: .75rem 2rem; }
[class$="-plain-notes"] dt { font-weight: 700; }
[class$="-plain-notes"] dd { margin: 0; }
.home-routes { padding: 3rem 0 0; border-top: 1px solid rgb(38 60 89 / 35%); }
.home-routes > h2 { margin-bottom: 2.5rem; padding: 1rem var(--pad); background: var(--pearl); border-radius: var(--radius); }
.home-route-row { display: grid; grid-template-columns: minmax(0, .28fr) minmax(0, .72fr); gap: 3rem; align-items: start; }
.home-route-row + .home-route-row { margin-top: 2rem; }
.home-route-label { padding: 1rem var(--pad); background: var(--pearl); border-radius: var(--radius); font: 700 clamp(2rem, 3vw, 3rem)/1.1 var(--serif); letter-spacing: -.04em; }
.home-route-copy { padding: 2rem; border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); }
.home-route-copy h3 { margin-bottom: 1rem; }
.home-route-copy > .home-next { max-width: 32rem; }
.home-route-row:nth-of-type(even) { grid-template-columns: minmax(0, .72fr) minmax(0, .28fr); }
.home-route-row:nth-of-type(even) .home-route-label { grid-column: 2; grid-row: 1; }
.home-route-row:nth-of-type(even) .home-route-copy { grid-column: 1; grid-row: 1; }
[class$="-footer"] { background: var(--current); color: var(--mist); border-top: 1px solid var(--slate); padding-block: 3rem; }
[class$="-footer-inner"] { max-width: var(--page-width); padding-inline: var(--pad); margin-inline: auto; }
[class$="-footer-inner"] > p { max-width: var(--measure); font-size: 1rem; }
[class$="-footer"] nav { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin-top: 1.5rem; }
[class$="-footer"] a { display: flex; align-items: center; min-width: 44px; min-height: 48px; font: 500 1rem/1.4 var(--ui); }
[class$="-footer-domain"] { margin-top: 2rem; font: 400 1rem/1.6 var(--mono); color: var(--cloud); overflow-wrap: anywhere; }

@keyframes coast-arrive { from { opacity: .88; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 850px) {
  [class$="-hero"] { gap: 2rem; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); }
  [class$="-header"] { gap: 1rem; }
  [class$="-tools"] { gap: .5rem; }
  [class$="-utility-label"] { display: none; }
  [class$="-section"] { grid-template-columns: minmax(0, 1fr); }
  [class$="-section-title"] { padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); }
}

@media (max-width: 650px) {
  [class$="-utility"] { padding-inline: 1rem; }
  [class$="-utility"] nav { justify-content: space-between; width: 100%; gap: .75rem; }
  [class$="-header"] { flex-wrap: wrap; padding-block: 1.25rem; }
  [class$="-brand"] { width: 100%; }
  [class$="-tools"] { width: 100%; justify-content: space-between; }
  [class$="-menu"] nav { width: min(330px, calc(100vw - 3rem)); }
  [class$="-toggle"] { font-size: 1rem; }
  [class$="-hero"] { grid-template-columns: minmax(0, 1fr); padding-top: 1.5rem; gap: 2rem; }
  [class$="-kicker"] { margin-bottom: 1rem; }
  h1 { font-size: 2.25rem; }
  [class$="-deck"] { font-size: 1rem; }
  [class$="-route-sheet"] { padding: 1.5rem; }
  [class$="-line-art"] { max-height: 240px; }
  [class$="-section"] { padding: 1.5rem; row-gap: 1.5rem; }
  [class$="-check"] { grid-template-columns: 20px minmax(0, 1fr); gap: .75rem; }
  [class$="-checkmark"] { width: 20px; height: 20px; }
  [class$="-source"] { align-items: baseline; }
  [class$="-note"] { padding: 1.25rem; }
  [class$="-next-pair"] { grid-template-columns: minmax(0, 1fr); gap: 0; }
  [class$="-next"] { padding-inline: 1.25rem; }
  [class$="-plain-notes"] { padding: 1.5rem; }
  [class$="-plain-notes"] dl { display: block; }
  [class$="-plain-notes"] dt { margin-top: 1rem; }
  [class$="-plain-notes"] dd { margin-top: .25rem; }
  .home-routes { padding-top: 2rem; }
  .home-route-row, .home-route-row:nth-of-type(even) { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .home-route-row:nth-of-type(even) .home-route-label, .home-route-row:nth-of-type(even) .home-route-copy { grid-column: 1; grid-row: auto; }
  .home-route-label { font-size: 2rem; padding-block: .5rem; }
  .home-route-copy { padding: 1.5rem; }
  [class$="-footer"] nav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem 1rem; }
}

@media (prefers-color-scheme: dark) {
  :root { --header-surface: var(--current); --header-ink: var(--mist); --strip: #1c2e46; }
  [class$="-header"] { border-radius: 0 0 var(--radius) var(--radius); }
  [class$="-header"] a:focus-visible, [class$="-toggle"]:focus-visible { outline-color: var(--cloud); }
  [class$="-menu"] summary { border: 1px solid var(--cloud); }
  [class$="-menu"] summary:focus-visible { outline-color: var(--cloud); }
  [class$="-menu"] nav a:focus-visible { outline-color: var(--current); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  [class$="-next"]:hover { transform: none; }
}

@media print {
  body { background: white; color: black; }
  [class$="-utility"], [class$="-tools"], [class$="-route-sheet"], [class$="-hero-link"], [class$="-next"], [class$="-footer"] nav { display: none; }
  [class$="-header"] { min-height: 0; padding: 0 0 1rem; }
  [class$="-hero"], [class$="-section"] { display: block; padding: 1rem 0; }
  [class$="-section"] { break-inside: avoid; box-shadow: none; }
  [class$="-section"] + [class$="-section"], [class$="-routes"] + [class$="-section"] { margin-top: 1.5rem; }
  [class$="-footer"] { padding-block: 1rem; color: black; background: white; }
}