/* Shared chrome and document styles for the four legal pages.
   Palette, type and components are lifted from index.html so these pages sit
   in the same site rather than looking bolted on. Light only, as everywhere. */

:root {
  color-scheme: light;
  --paper: #f7f6f1;
  --surface: #ffffff;
  --chrome: #eceff3;
  --border: #d2d8e0;
  --border-strong: #96a2b2;
  --ink: #1b2a3f;
  --muted: #5a6a80;
  --label: #66748a;
  --blue: #34567f;
  --blue-deep: #243d5e;
  --on-blue: #ffffff;
  --yellow: #e6c35e;
  --red-text: #a63a34;
  --green-text: #2e6e4a;
  --crimson: #8e3a45;
  --cream: #f1e6c8;
  --band-muted: #c3d0e0;
  --shadow: rgba(27, 42, 63, 0.14);
  --display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", Consolas, "Courier New", monospace;
  --cabin: "Cabin", "Gill Sans", "Gill Sans MT", "Trebuchet MS", sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4, p { margin: 0; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--border-strong); outline-offset: 3px; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 32px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- the totem: the BR station sign, as on every other page ---------- */
.totem {
  --tf: #1d4f91;
  --rim: 3px; --flash: 9px;
  position: relative; z-index: 0; display: inline-flex; align-items: center; justify-content: center;
  margin: var(--flash) 0;
  padding: 8px 36px; border: var(--rim) solid transparent; border-radius: 999px;
  color: var(--cream);
  font-family: var(--cabin); font-weight: 700; font-size: 21px; line-height: 1;
  letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
  filter: drop-shadow(0 1.5px 2px rgba(16, 30, 51, .38));
}
.totem::after {
  content: ""; position: absolute; z-index: -1; inset: calc(-1 * var(--rim));
  border: var(--rim) solid var(--cream); border-radius: 999px;
  background:
    radial-gradient(circle at 16px 50%, #e2b45c 0 3px, #a87a2a 3.6px, transparent 4.6px),
    radial-gradient(circle at calc(100% - 16px) 50%, #e2b45c 0 3px, #a87a2a 3.6px, transparent 4.6px),
    var(--tf);
}
.totem::before {
  content: ""; position: absolute; z-index: -2; left: 15%; right: 15%;
  top: calc(-1 * (var(--flash) + var(--rim))); bottom: calc(-1 * (var(--flash) + var(--rim)));
  background: var(--tf); border: var(--rim) solid var(--cream); border-radius: 14px;
}
.totem.eastern { --tf: #2b4a7d; }
.totem.black { --tf: #2a2a2a; }
.totem.western { --tf: #63482f; }
.totem.maroon { --tf: #8e3a45; }
.totem.scottish { --tf: #335c85; }
.totem.ne { --tf: #94511f; }

/* ---------- ticket buttons ---------- */
.btn {
  --rim: #cbb98d; --stub: #b9a87e; --punch: var(--ink);
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px 14px 42px; border-radius: 5px; border: 0;
  background: var(--cream); color: var(--ink);
  font-family: var(--cabin); font-weight: 700; font-size: 14px; letter-spacing: .035em; text-transform: uppercase; line-height: 1;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 0 0 1.5px var(--rim);
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 6px, #000 6.6px), radial-gradient(circle at 100% 50%, transparent 6px, #000 6.6px); -webkit-mask-composite: source-in;
  mask: radial-gradient(circle at 0 50%, transparent 6px, #000 6.6px), radial-gradient(circle at 100% 50%, transparent 6px, #000 6.6px); mask-composite: intersect;
  transition: transform .15s ease, background .2s ease, color .2s ease;
}
.btn::before { content: ""; position: absolute; left: 29px; top: 7px; bottom: 7px; border-left: 2px dashed var(--stub); }
.btn::after { content: ""; position: absolute; left: 13px; top: 50%; width: 8px; height: 8px; border-radius: 50%; transform: translateY(-50%); border: 1.5px solid var(--stub); transition: background .15s ease, border-color .15s ease; }
.btn:hover { text-decoration: none; transform: translateY(-1px) rotate(-.6deg); }
.btn:hover::after { background: var(--punch); border-color: var(--punch); }
.btn:focus-visible { outline: 0; box-shadow: inset 0 0 0 3px var(--blue); }
.btn-yellow { background: var(--yellow); color: var(--ink); --rim: #b8973a; --stub: #8a6f22; }

/* ---------- nav ---------- */
.nav { border-bottom: 1px solid var(--border); background: var(--paper); position: sticky; top: 0; z-index: 10; }
.nav .wrap { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--blue); font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: .06em; text-transform: uppercase; }
.nav .brand img { height: 54px; width: auto; display: block; mix-blend-mode: multiply; }
.nav-links { display: flex; align-items: center; gap: 28px; font-size: 15px; }
.nav-links a { color: var(--ink); }
.nav-links .btn { padding: 10px 16px 10px 34px; font-size: 11.5px; }
.nav-links .btn::before { left: 24px; top: 6px; bottom: 6px; }
.nav-links .btn::after { left: 11px; width: 7px; height: 7px; }
/* the Windows mark on the download button: this is a Windows-only installer */
.btn .win { width: 1.15em; height: 1.15em; flex: none; margin: -1px 0; }
.nav-links .btn { gap: 8px; }

/* ---------- mobile menu: the burger (nav.js opens it) ---------- */
.nav-toggle { display: none; flex: none; width: 44px; height: 44px; margin: 0; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: transparent; border: 0; border-radius: 8px; cursor: pointer; }
.nav-toggle span { display: block; width: 20px; height: 2px; border-radius: 1px; background: var(--ink); transition: transform .2s ease, opacity .15s ease; }
.nav-toggle:hover { background: var(--chrome); }
.nav-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.nav.open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav.open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-menu { display: none; }
.nav-menu a { display: block; padding: 16px 24px; font-size: 17px; color: var(--ink); border-top: 1px solid var(--border); }
.nav-menu a:first-child { border-top: 0; }
.nav-menu a.active, .nav-menu a[aria-current="page"] { color: var(--blue); font-weight: 600; box-shadow: inset 4px 0 0 var(--yellow); }
@media (max-width: 900px) {
  .nav .wrap { gap: 10px; padding-left: 16px; padding-right: 16px; }
  .nav-links { margin-left: auto; }
  .nav.has-toggle .nav-toggle { display: inline-flex; }
  .nav.has-toggle.open .nav-menu { display: block; position: absolute; top: 100%; left: 0; right: 0; background: var(--paper); border-bottom: 1px solid var(--border); }
}
@media (max-width: 420px) {
  .nav .brand img { height: 42px; }
  .nav-links .btn { padding: 10px 12px 10px 30px; }
  .nav-links .btn::before { left: 21px; }
  .nav-links .btn::after { left: 9px; }
}
/* the tightest phones: the logo, the ticket and the burger have to share about 290px */
@media (max-width: 380px) {
  .nav-links .btn .win { display: none; }
}
@media (max-width: 340px) {
  .nav .wrap { gap: 6px; }
  .nav .brand img { height: 38px; }
  .nav-links .btn { font-size: 10.5px; padding-right: 10px; }
}
@media (prefers-reduced-motion: reduce) { .nav-toggle span { transition: none; } }

/* ---------- the page head band ---------- */
.doc-hero { background: var(--blue-deep); }
.doc-hero .wrap { padding: 64px 32px 56px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.doc-hero h1 { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; line-height: .95; font-size: clamp(44px, 6vw, 76px); color: var(--cream); }
.doc-hero .lead { font-size: 19px; color: #d6dfea; max-width: 58ch; }
.doc-hero .stamp { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--band-muted); }

/* ---------- the document ---------- */
.doc { padding: 64px 0 96px; counter-reset: sec; }
.doc .wrap { max-width: 860px; }

.summary {
  background: var(--cream); border: 1px solid #ddcfa8; border-radius: 12px;
  padding: 24px 28px; margin-bottom: 48px;
}
.summary h2 { font-family: var(--cabin); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #7a6427; margin-bottom: 10px; }
.summary p { max-width: 66ch; }
.summary p + p { margin-top: 12px; }

.toc { margin-bottom: 56px; }
.toc h2 { font-family: var(--cabin); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--label); margin-bottom: 14px; }
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; columns: 2; column-gap: 40px; }
.toc li { counter-increment: toc; font-size: 15.5px; margin-bottom: 7px; break-inside: avoid; }
.toc li::before { content: counter(toc) ". "; font-family: var(--mono); color: var(--label); }

.doc section { counter-increment: sec; margin-bottom: 44px; scroll-margin-top: 88px; }
.doc section > h2 {
  font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .015em;
  font-size: 30px; line-height: 1.1; color: var(--ink); margin-bottom: 16px;
  display: flex; gap: 14px; align-items: baseline;
}
.doc section > h2::before {
  content: counter(sec); font-family: var(--mono); font-weight: 500; font-size: 19px;
  color: var(--blue); letter-spacing: 0;
}
.doc h3 { font-size: 19px; font-weight: 600; margin: 26px 0 10px; color: var(--ink); }
.doc p { max-width: 68ch; margin-bottom: 14px; }
.doc p:last-child { margin-bottom: 0; }
.doc ul { max-width: 68ch; margin: 0 0 14px; padding-left: 22px; }
.doc li { margin-bottom: 8px; }
.doc strong { font-weight: 600; }

/* the identity block: the one thing that has to be filled in */
.identity {
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--blue);
  border-radius: 8px; padding: 20px 24px; margin: 0 0 14px; font-size: 16px; max-width: 68ch;
}
.identity dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; }
.identity dt { font-family: var(--cabin); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--label); padding-top: 4px; }
.identity dd { margin: 0; }
.fill { background: #fbeec6; border-bottom: 2px solid var(--yellow); padding: 1px 6px; border-radius: 3px; font-family: var(--mono); font-size: 14px; color: #6d5410; }

/* data tables */
.dtable { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 15.5px; }
.dtable th, .dtable td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--border); }
.dtable th { font-family: var(--cabin); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--label); border-bottom-color: var(--border-strong); }
.dtable td:first-child { font-weight: 600; padding-right: 24px; }
.dtable code { font-family: var(--mono); font-size: 14px; background: var(--chrome); padding: 2px 6px; border-radius: 4px; }
.tablescroll { overflow-x: auto; }

.callout {
  border-left: 4px solid var(--yellow); background: var(--chrome);
  padding: 16px 20px; border-radius: 0 8px 8px 0; margin: 0 0 16px; max-width: 68ch;
}
.callout.warn { border-left-color: var(--red-text); }
.callout p { margin-bottom: 8px; }
.callout p:last-child { margin-bottom: 0; }

.doc-foot { border-top: 1px solid var(--border); margin-top: 56px; padding-top: 28px; font-size: 15px; color: var(--muted); }
.doc-foot a { font-weight: 500; }

/* ---------- footer ---------- */
.footer { background: var(--blue-deep); color: var(--band-muted); }
.footer .wrap { max-width: 1160px; padding: 48px 32px 40px; display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.footer .brand { color: var(--on-blue); }
.footer p { font-size: 15px; color: var(--band-muted); max-width: 32ch; margin-top: 12px; }
.footer .email { display: inline-block; margin-top: 12px; font-size: 15px; color: var(--on-blue); }
.footer .col { display: flex; flex-direction: column; gap: 9px; font-size: 15px; }
.footer .col span:first-child { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); margin-bottom: 4px; }
.footer .col a { color: var(--on-blue); }
.footer .col a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--yellow); }
.footer .legal { border-top: 1px solid var(--blue); }
.footer .legal .wrap { max-width: 1160px; padding: 20px 32px 36px; display: flex; justify-content: space-between; gap: 24px; font-size: 13.5px; }
.footer .legal span:last-child { max-width: 62ch; text-align: right; opacity: .8; }

@media (max-width: 900px) {
  .footer .wrap { grid-template-columns: 1fr 1fr; }
  .nav-links a:not(.btn) { display: none; }
  .footer .legal .wrap { flex-direction: column; }
  .footer .legal span:last-child { text-align: left; }
  .toc ol { columns: 1; }
  .doc section > h2 { font-size: 26px; }
}