:root {
  --ground:#e9edec; --panel:#f5f7f6; --ink:#171b1a; --sub:#5d6866;
  --line:#c7d0ce; --route:#b4661a; --sea:#2b7c8c; --start:#8a2b3f;
  --dot:#3a4644; --land:#e3e8e6; --coast:#a8b5b1; --water:#c6dade;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground:#111416; --panel:#191e20; --ink:#e7ecea; --sub:#93a09d;
    --line:#2b3335; --route:#e0913c; --sea:#4fb2c4; --start:#e2718c;
    --dot:#9fb0ac; --land:#22292b; --coast:#3a4749; --water:#0e171a;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground:#111416; --panel:#191e20; --ink:#e7ecea; --sub:#93a09d;
  --line:#2b3335; --route:#e0913c; --sea:#4fb2c4; --start:#e2718c;
  --dot:#9fb0ac; --land:#22292b; --coast:#3a4749; --water:#0e171a;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--ground); color:var(--ink);
  font:16px/1.6 "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color:inherit; text-decoration-color:var(--route); text-underline-offset:.18em; }
a:hover { color:var(--route); }
a:focus-visible { outline:2px solid var(--route); outline-offset:2px; border-radius:2px; }
.wrap { max-width:46rem; margin:0 auto; padding:1.5rem 1rem 3rem; }
.crumbs { font:500 .78rem/1.4 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing:.04em; color:var(--sub); display:flex; flex-wrap:wrap; gap:.4rem; }
.crumbs a { text-decoration:none; }
.crumbs a:hover { text-decoration:underline; }
h1, h2, h3 { font-family:Fraunces, Georgia, "Times New Roman", serif;
  font-weight:600; line-height:1.15; text-wrap:balance; margin:0; }
h1 { font-size:clamp(2.1rem, 6vw, 3.1rem); margin:.6rem 0 .3rem; }
h2 { font-size:1.45rem; }
h3 { font-size:1rem; font-family:"IBM Plex Sans", system-ui, sans-serif;
  font-weight:600; }
.eyebrow { font:500 .8rem/1.4 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing:.06em; text-transform:uppercase; color:var(--sub); margin:0; }
.lede { font-size:1.08rem; color:var(--sub); margin:.2rem 0 0; max-width:38rem; }
.sub { color:var(--sub); }
section { margin-top:2.2rem; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:6px;
  padding:1.1rem 1.2rem 1.2rem; display:grid; gap:.9rem; }
.cheeses { display:grid; gap:1rem; margin-top:.9rem; }
.facts { display:flex; flex-wrap:wrap; gap:.4rem; margin:.35rem 0 0; padding:0; list-style:none; }
.facts li { font:500 .74rem/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing:.03em; padding:.32rem .5rem; border:1px solid var(--line);
  border-radius:3px; color:var(--sub); }
.pairs { display:grid; gap:.75rem; margin:0; }
.pairs > div { display:grid; grid-template-columns:7.5rem 1fr; gap:.2rem 1rem; }
.pairs dt { font:500 .74rem/1.9 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing:.05em; text-transform:uppercase; color:var(--sub); }
.pairs dd { margin:0; }
.pairs dd b { font-weight:600; }
.pairs dd .why { display:block; color:var(--sub); font-size:.93rem; }
.basis { font-size:.82rem; color:var(--sub); margin:0; }
.basis b { color:var(--route); font-weight:600; }
.variant { border-top:1px dashed var(--line); padding-top:.75rem; }
.hand { font-size:.88rem; color:var(--sub); margin:0; }
.card h3 { font-family:Fraunces, Georgia, "Times New Roman", serif; font-size:1.35rem; }
.card p { margin:0; }
.road { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:.9rem; }
.road .card { gap:.2rem; }
.road .dir { font:500 .74rem/1.4 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing:.05em; text-transform:uppercase; color:var(--sub); }
.road .to { font-family:Fraunces, Georgia, serif; font-size:1.25rem; font-weight:600; }
.road .num { font-variant-numeric:tabular-nums; }
.map { margin-top:.9rem; border:1px solid var(--line); border-radius:6px;
  overflow:hidden; background:var(--water); }
.map svg { display:block; width:100%; height:auto; }
.map .land { fill:var(--land); stroke:var(--coast); stroke-width:.8; }
.map .path { fill:none; stroke:var(--route); stroke-width:2; stroke-linejoin:round; opacity:.55; }
.map .leg { fill:none; stroke:var(--route); stroke-width:3.5; stroke-linejoin:round; stroke-linecap:round; }
.map .ferry { fill:none; stroke:var(--sea); stroke-width:2.5; stroke-dasharray:6 5; }
.map .stop { fill:var(--dot); }
.map .here { fill:var(--route); stroke:var(--panel); stroke-width:3; }
.map text { font:500 15px "IBM Plex Sans", system-ui, sans-serif; fill:var(--ink);
  paint-order:stroke; stroke:var(--water); stroke-width:3px; stroke-linejoin:round; }
.map text.big { font-weight:600; font-size:18px; }
.links { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem; }
.btn { display:inline-block; padding:.6rem .95rem; border-radius:4px;
  border:1px solid var(--line); background:var(--panel); text-decoration:none;
  font-weight:500; }
.btn.go { background:var(--route); border-color:var(--route); color:var(--panel); }
.btn.go:hover { color:var(--panel); filter:brightness(1.08); }
.note { font-size:.92rem; color:var(--sub); }
.country { margin-top:1.8rem; }
.country h2 { font-size:1.25rem; display:flex; gap:.6rem; align-items:baseline; }
.country h2 span { font:500 .78rem "IBM Plex Mono", ui-monospace, monospace; color:var(--sub); }
.townlist { list-style:none; padding:0; margin:.6rem 0 0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(14rem, 1fr)); gap:.15rem 1.2rem; }
.townlist li { padding:.25rem 0; border-bottom:1px solid var(--line); }
.townlist a { font-weight:500; text-decoration:none; }
.townlist a:hover { text-decoration:underline; }
.townlist .sub { font-size:.86rem; display:block; line-height:1.35; }
footer { margin-top:3rem; padding-top:1rem; border-top:1px solid var(--line);
  font-size:.86rem; color:var(--sub); }
@media (max-width: 540px) {
  .pairs > div { grid-template-columns:1fr; gap:0; }
  .road { grid-template-columns:1fr; }
  /* On a phone the whole frame would shrink the names to six pixels; crop
     the sides instead and keep the middle -- the town is always centred. */
  .map svg { height:260px; }
}