:root {
  color-scheme: light;
  --ink: #141816;
  --paper: #f3f0e8;
  --muted: #606a66;
  --line: #cbc5b6;
  /* Darkened from #c94f36, which measured 3.96:1 against the paper and so
     failed AA everywhere it is used at small sizes: the eyebrow above every
     headline, the nav on hover, the focus ring. This clears 4.5:1 on both
     grounds and is the smallest step that does. */
  --accent: #bd4530;
  --panel: #fffefa;
  --deep: #263638;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.68 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a { color: inherit; }

/* Where the keyboard is.
   Several of these had a colour change and nothing else — and a card switched
   its ring off outright — which leaves somebody tabbing through the page with
   no way to tell where they are: a shift in hue is not an indicator, and on the
   card it was the border of a box that already had one. Drawn once, here, for
   everything focusable, and only for keyboard focus so a mouse never sees it. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.shell {
  width: min(100% - 40px, 920px);
  margin: 0 auto;
  padding: 28px 0 56px;
}

.top {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 64px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

/* The masthead: the name, and the language the whole site is being read in. */
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  color: var(--deep);
  font-size: 20px;
  font-weight: 900;
  text-decoration: none;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 14px;
}

.nav a {
  color: var(--muted);
  text-decoration: none;
}

.nav a:hover,
.nav a:focus-visible { color: var(--accent); }

/* Top right, level with the brand, which is where a reader looks for it.
   The nav keeps the middle; this sits at the end of the row. */
.languages {
  position: relative;
  font-size: 13px;
}

/* Unframed on purpose. The page is quiet — paper, a serif headline, a nav of
   plain words — and a boxed control in the masthead would be the only framed
   thing on it, drawing more attention than a language picker deserves. The
   panel it opens is bordered, because that has to be legible over the text
   beneath it. */
.languagesMenu > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  white-space: nowrap;
}

.languagesMenu > summary::-webkit-details-marker { display: none; }

.languagesMenu > summary::after {
  content: "";
  display: inline-block;
  margin-left: 6px;
  border: 4px solid transparent;
  border-top-color: currentcolor;
  transform: translateY(2px);
}

.languagesMenu[open] > summary::after { transform: translateY(-2px) rotate(180deg); }

.languagesMenu > summary:hover,
.languagesMenu > summary:focus-visible { color: var(--accent); }

/* Anchored to the right edge so a long name cannot push the row wider. */
.languagesList {
  position: absolute;
  right: 0;
  z-index: 20;
  display: grid;
  gap: 2px;
  min-width: 140px;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
}

.languagesList a {
  padding: 4px 6px;
  /* Devanagari and Japanese carry marks above and below the line that a tight
     leading clips. */
  line-height: 1.7;
  border-radius: 4px;
  color: var(--muted);
  text-decoration: none;
}

.languagesList a:hover,
.languagesList a:focus-visible {
  background: var(--line);
  color: var(--accent);
}

article,
section { max-width: 760px; }

h1 {
  max-width: 800px;
  margin: 0 0 20px;
  color: var(--deep);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 64px;
  font-weight: 700;
  line-height: 1.02;
}

h2 {
  margin: 42px 0 10px;
  color: var(--deep);
  font-size: 23px;
  line-height: 1.25;
}

p { max-width: 690px; }

.dek {
  margin: 0 0 42px;
  color: var(--muted);
  font-size: 20px;
  line-height: 1.55;
}

.meta {
  margin: 0 0 12px;
  color: var(--accent);
  font: 800 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
}

.list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 32px;
}

.card {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  text-decoration: none;
}

.card:hover,
.card:focus-visible {
  border-color: var(--accent);
}

.card h2 {
  margin: 0 0 8px;
  font-size: 20px;
}

.card p:last-child { margin-bottom: 0; }

.stationPage { max-width: 920px; }

.stationList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 36px;
}

.stationCard {
  display: flex;
  min-width: 0;
  min-height: 250px;
  flex-direction: column;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}

.stationCard h2 { margin: 0 0 10px; }
.stationCard p:not(.meta) { margin: 0 0 22px; }
.stationCard a {
  align-self: flex-start;
  margin-top: auto;
  color: var(--deep);
  font-size: 14px;
  font-weight: 800;
  text-underline-offset: 3px;
}
.stationCard a:hover,
.stationCard a:focus-visible { color: var(--accent); }

.related {
  max-width: 760px;
  margin-top: 54px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.related h2 {
  margin: 0 0 14px;
  font-size: 16px;
}

.related div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}

.related a { color: var(--deep); }

.method {
  margin-top: 38px;
  padding-left: 14px;
  border-left: 3px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

.paymentDetails {
  display: grid;
  max-width: 690px;
  margin: 34px 0;
  border-top: 1px solid var(--line);
}

.paymentDetails div {
  display: grid;
  grid-template-columns: minmax(130px, .35fr) 1fr;
  gap: 18px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}

.paymentDetails dt {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.paymentDetails dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
}

.paymentQrAction {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 30px 0 4px;
}

.paymentQrAction button {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--deep);
  border-radius: 4px;
  background: var(--deep);
  color: var(--panel);
  cursor: pointer;
  font: 800 14px/1 ui-sans-serif, system-ui, sans-serif;
}

.paymentQrAction button:hover,
.paymentQrAction button:focus-visible { background: var(--accent); border-color: var(--accent); }
.paymentQrAction span { color: var(--muted); font-size: 13px; }

.paymentQrDialog {
  width: min(100% - 32px, 480px);
  max-height: calc(100vh - 32px);
  padding: 26px;
  border: 1px solid var(--deep);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
}

.paymentQrDialog::backdrop { background: rgba(20, 24, 22, .72); }
.paymentQrDialog form { position: absolute; top: 12px; right: 12px; }
.paymentQrDialog h2 { margin: 0 34px 18px 0; }
.paymentQrDialog img { display: block; width: min(100%, 360px); height: auto; margin: 0 auto 18px; }
.paymentQrDialog p:last-of-type { color: var(--muted); font-size: 13px; }
.paymentQrDialog a { color: var(--deep); font-weight: 800; }
.paymentQrClose {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--deep);
  cursor: pointer;
  font: 400 28px/1 ui-sans-serif, system-ui, sans-serif;
}

.footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 64px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

.footer strong { color: var(--deep); }

@media (max-width: 680px) {
  .shell { width: min(100% - 30px, 920px); }
  /* Not align-items: flex-start. That was written when the header was one row
     and had to stack; it now shrinks the masthead to its contents, so the
     language picker stops being pushed to the far edge and lands beside the
     brand instead. The header is already a column. */
  .top { margin-bottom: 46px; }
  .nav { gap: 12px 16px; }
  h1 { font-size: 42px; }
  .list,
  .stationList { grid-template-columns: 1fr; }
  .stationCard { min-height: 0; }
  .paymentDetails div { grid-template-columns: 1fr; gap: 4px; }
}

/* Setup instructions: a config block to copy, and where each client keeps it.
   The block scrolls inside itself rather than widening the page, because the
   JSON is longer than a phone is wide. */
.setupCode {
  max-width: 760px;
  margin: 22px 0 26px;
  padding: 18px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.setupTable {
  width: 100%;
  max-width: 760px;
  margin: 22px 0 26px;
  border-collapse: collapse;
  text-align: left;
}

.setupTable th,
.setupTable td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.setupTable th {
  width: 34%;
  font-weight: 800;
  white-space: nowrap;
}

.setupTable td { color: var(--muted); }

@media (max-width: 600px) {
  .setupTable th,
  .setupTable td { display: block; width: auto; border-bottom: 0; padding: 4px 0; }
  .setupTable th { padding-top: 14px; white-space: normal; }
  .setupTable tr { display: block; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
}

/* The 1.02 leading on h1 suits a Latin headline, where the space between two
   lines is made by the gap above the lowercase. Japanese glyphs fill the em box
   and Devanagari hangs matras above it, so at that setting a wrapped headline
   reads as one dense block. Measured the same way as the console: same rule,
   same two scripts, same reason. */
:lang(ja) h1,
:lang(hi) h1 {
  line-height: 1.3;
}

/* The landing page.
   Two actions, one primary, and the detail under them rather than inside them:
   a button that has to explain itself is doing two jobs, and the explanation is
   what a reader skips. Sized in the same scale as the rest of these pages so it
   reads as the front of the site rather than as a different site. */
.homeHero { margin-bottom: 56px; }

.homeActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 0 0 10px;
}

.homeAction,
.homeActionQuiet {
  display: inline-block;
  padding: 13px 22px;
  border: 1px solid var(--deep);
  border-radius: 2px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}

.homeAction {
  background: var(--deep);
  color: var(--panel);
}

.homeActionQuiet {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
  font-weight: 500;
}

.homeAction:hover,
.homeActionQuiet:hover { border-color: var(--accent); color: var(--accent); }
.homeAction:hover { background: var(--accent); color: var(--panel); }

/* Focus is drawn on the element rather than left to the browser's default,
   which disappears against a filled button on a dark ground. */
.homeAction:focus-visible,
.homeActionQuiet:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.homeTryDetail {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 14px;
}

@media (max-width: 600px) {
  /* Full width, stacked: two buttons side by side at 375px leaves each one too
     narrow to read and too small to hit. */
  .homeActions { flex-direction: column; align-items: stretch; gap: 10px; }
  .homeAction,
  .homeActionQuiet { text-align: center; }
}