/* Travelling in Time — site styles.
   One idea carries the brand: an inked route line (the car's journey) runs
   down every page, and sections are stops along it. Everything else stays
   quiet so the words are easy to read. Colours come from the app itself. */

/* Fonts are served from this site (no third-party requests). Both are
   SIL Open Font Licence; see fonts/LICENSE.txt. Latin subset only. */
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/atkinson-hyperlegible-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/fonts/atkinson-hyperlegible-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Crimson Pro'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/fonts/crimson-pro.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --parchment: #F5E6D3;
  --parchment-deep: #EBD8BD;
  --paper: #FBF4E8;
  --ink: #3A3226;
  --ink-soft: #5E5140;
  --brass: #C9A961;
  --brass-ink: #7A5F22;
  --harbour: #2E5266;
  --seal: #8E2F25;
  --rule: rgba(58, 50, 38, 0.2);

  --serif: 'Crimson Pro', 'Crimson Text', Georgia, serif;
  --sans: 'Atkinson Hyperlegible', system-ui, -apple-system, sans-serif;

  --measure: 66ch;
  --gutter: clamp(16px, 4vw, 40px);
  --rail-x: 11px;           /* where the route line sits inside .route */
  --dash: 12px;             /* dash + gap length of the route line */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--parchment);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;      /* 17px */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--harbour); text-decoration-color: var(--brass); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--seal); text-decoration-color: currentColor; }

:focus-visible { outline: 3px solid var(--harbour); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 6px;
}
.skip-link:focus { top: 8px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Type ---------- */

h1, h2, h3 { font-family: var(--serif); color: var(--ink); font-weight: 600; margin: 0; }
h1 { font-size: clamp(2.5rem, 6vw, 4.25rem); line-height: 1.02; letter-spacing: -0.015em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.15; letter-spacing: -0.01em; }
h3 { font-size: 1.3rem; line-height: 1.25; }
p { margin: 0 0 1em; }

.lede { font-family: var(--serif); font-size: clamp(1.25rem, 2.2vw, 1.5rem); line-height: 1.4; color: var(--ink-soft); max-width: 34ch; }
.meta { font-size: 0.95rem; color: var(--ink-soft); }

/* ---------- Header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--parchment) 90%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.site-header__inner {
  max-width: 1200px; margin: 0 auto; padding: 12px var(--gutter);
  display: flex; align-items: center; gap: 24px;
}
.wordmark { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); margin-right: auto; }
.wordmark img { width: 36px; height: 36px; border-radius: 9px; }
.wordmark span { font-family: var(--serif); font-weight: 600; font-size: 1.35rem; white-space: nowrap; }

.site-nav { display: flex; gap: 22px; }
.site-nav a { color: var(--ink-soft); text-decoration: none; font-size: 0.98rem; }
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--seal); text-decoration-thickness: 2px; text-underline-offset: 8px; }

.button {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--ink); color: var(--paper);
  padding: 11px 18px; border-radius: 10px;
  font-weight: 700; font-size: 0.98rem; text-decoration: none; white-space: nowrap;
}
.button:hover { background: var(--harbour); color: var(--paper); }
.button svg { width: 18px; height: 18px; flex: none; }
.button--quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.button--quiet:hover { background: var(--ink); color: var(--paper); }

@media (max-width: 760px) {
  .site-nav { display: none; }
  .site-header .button { padding: 9px 14px; font-size: 0.92rem; }
}

/* ---------- The route (signature element) ----------
   A dashed seal-red line down the left of the content. Headings marked
   .stop sit on it as waypoints. It draws itself once on page load. */

.route { position: relative; padding-left: calc(var(--rail-x) * 2 + 22px); }
.route::before {
  content: ""; position: absolute; left: var(--rail-x); top: 6px; bottom: 0; width: 2.5px;
  background: repeating-linear-gradient(to bottom, var(--seal) 0 var(--dash), transparent var(--dash) calc(var(--dash) * 1.9));
  transform-origin: top;
}
@media (prefers-reduced-motion: no-preference) {
  .route::before { animation: draw-route 1.4s cubic-bezier(.3, .6, .2, 1) both; }
}
@keyframes draw-route { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.stop { position: relative; }
.stop::before {
  content: ""; position: absolute;
  left: calc(-1 * (var(--rail-x) + 22px) - 7px); top: 0.32em;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--parchment); border: 3px solid var(--seal);
}
.route-end { position: relative; }
.route-end::before {           /* destination: a filled seal */
  content: ""; position: absolute;
  left: calc(-1 * (var(--rail-x) + 22px) - 9px); top: 0.2em;
  width: 21px; height: 21px; border-radius: 50%; background: var(--seal);
  box-shadow: 0 0 0 4px var(--parchment), 0 0 0 5.5px var(--seal);
}

@media (max-width: 600px) {
  :root { --rail-x: 4px; }
  .doc__head { padding-left: 0; }
  .route { padding-left: 28px; }
  .stop::before { left: -31px; width: 14px; height: 14px; border-width: 2.5px; }
  .route-end::before { left: -33px; width: 18px; height: 18px; }
}

/* ---------- Document pages (privacy, terms) ---------- */

.doc {
  max-width: 1200px; margin: 0 auto; padding: 56px var(--gutter) 96px;
  display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 56px;
}
.doc__head { grid-column: 2; padding-left: calc(var(--rail-x) * 2 + 22px); }
.doc__head h1 { margin-bottom: 18px; }
.doc__toc { grid-column: 1; grid-row: 1 / span 2; }
.doc__body { grid-column: 2; max-width: calc(var(--measure) + 60px); }

@media (max-width: 960px) {
  .doc { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 36px; }
  .doc__head, .doc__body, .doc__toc { grid-column: 1; grid-row: auto; }
}

/* Contents list — a small version of the route with one dot per section. */
.toc { position: sticky; top: 96px; font-size: 0.93rem; }
.toc ol { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px dotted var(--rule); }
.toc li { position: relative; margin: 0 0 9px; line-height: 1.35; }
.toc li::before {
  content: ""; position: absolute; left: -24px; top: 0.4em; width: 8px; height: 8px; border-radius: 50%;
  background: var(--parchment); border: 2px solid var(--ink-soft);
}
.toc a { color: var(--ink-soft); text-decoration: none; }
.toc a:hover { color: var(--ink); text-decoration: underline; }
.toc li.is-current::before { background: var(--seal); border-color: var(--seal); }
.toc li.is-current a { color: var(--ink); font-weight: 700; }
@media (max-width: 960px) {
  .toc { position: static; }
  .toc details { border: 1px solid var(--rule); border-radius: 10px; padding: 12px 16px; background: var(--paper); }
  .toc summary { cursor: pointer; font-weight: 700; }
  .toc details[open] ol { margin-top: 12px; }
}
@media (min-width: 961px) {
  .toc summary { list-style: none; pointer-events: none; font-weight: 700; margin-bottom: 12px; }
  .toc summary::-webkit-details-marker { display: none; }
}

/* The short version — drawn like the legend box on an old map:
   a double ink frame, no shadow. */
.legend {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  outline: 1px solid var(--ink); outline-offset: -7px;
  padding: 26px 28px 20px; margin: 8px 0 56px; max-width: var(--measure);
}
.legend h2 { font-size: 1.45rem; margin-bottom: 10px; }
.legend ul { list-style: none; margin: 14px 0 6px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 22px; }
.legend li { display: flex; gap: 10px; align-items: baseline; font-weight: 700; font-size: 0.97rem; }
.legend li::before { content: ""; flex: none; width: 9px; height: 9px; transform: translateY(-1px) rotate(45deg); background: var(--brass); }

.prose { max-width: var(--measure); }
.prose h2 { margin: 56px 0 14px; }
.prose > h2:first-child { margin-top: 0; }
.prose h3 { margin: 28px 0 8px; color: var(--harbour); }
.prose p, .prose li { color: var(--ink-soft); }
.prose strong { color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.1em; }
.prose li { margin-bottom: 0.55em; }
.prose li::marker { color: var(--brass-ink); }
.prose address { font-style: normal; }

/* The contact box is the destination: the route stops just above it and
   the end seal sits beside it, so the line never runs through the box. */
.route:has(+ .contact-card) { padding-bottom: 40px; }
.route + .contact-card { margin-left: calc(var(--rail-x) * 2 + 22px); margin-top: 0; }
@media (max-width: 600px) { .route + .contact-card { margin-left: 28px; } }

.contact-card {
  position: relative;
  margin-top: 64px; padding: 28px 28px 24px; max-width: var(--measure);
  border-top: 2.5px solid var(--ink); background: var(--parchment-deep);
}
.contact-card h2 { font-size: 1.5rem; margin-bottom: 6px; }

/* ---------- Footer ---------- */

.site-footer { border-top: 1px solid var(--rule); background: var(--parchment-deep); font-size: 0.95rem; }
.site-footer__inner {
  max-width: 1200px; margin: 0 auto; padding: 44px var(--gutter) 28px;
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px;
}
.site-footer h2 { font-family: var(--sans); font-size: 0.98rem; font-weight: 700; margin-bottom: 10px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 7px; }
.site-footer a { color: var(--ink-soft); text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }
.site-footer__small {
  max-width: 1200px; margin: 0 auto; padding: 16px var(--gutter) 28px;
  border-top: 1px solid var(--rule); color: var(--ink-soft); font-size: 0.85rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
}
@media (max-width: 760px) { .site-footer__inner { grid-template-columns: 1fr 1fr; } }

/* ---------- 404: the route runs off the edge of the map ---------- */

.notfound {
  max-width: 1100px; margin: 0 auto; min-height: 62vh;
  padding: clamp(40px, 8vw, 96px) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: clamp(32px, 6vw, 72px); align-items: center;
}
.notfound h1 { margin-bottom: 20px; max-width: 12ch; }
.notfound .lede { max-width: 36ch; }
.notfound__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.notfound__map { margin: 0; }
.notfound__map svg { width: 100%; height: auto; display: block; }
.notfound__map .sheet { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.notfound__map .contour { fill: none; stroke: var(--rule); stroke-width: 1.2; }
.notfound__map .river { fill: none; stroke: var(--harbour); stroke-width: 2; opacity: 0.45; }
.notfound__map .ink path { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.notfound__map .route-line { fill: none; stroke: var(--seal); stroke-width: 2.5; stroke-dasharray: 10 8; stroke-linecap: round; }
.notfound__map .route-line--lost { opacity: 0.35; }
.notfound__map .stop-dot { fill: var(--paper); stroke: var(--seal); stroke-width: 3; }
.notfound__map .dragons { font-family: var(--serif); font-style: italic; font-size: 20px; fill: var(--ink-soft); }
@media (max-width: 760px) {
  .notfound { grid-template-columns: minmax(0, 1fr); }
  .notfound__map { max-width: 360px; }
}