/* Flag and globe icons: Twemoji (CC-BY 4.0, github.com/jdecked/twemoji), saved in emoji/. */
/* Dad's Travel Primer pages (public at guides.bpowell.ca; inside the app at europe.bpowell.ca/guides/): passports,
   phone, trains, and the full primer. The same pages
   are rendered to PNG cards by tools/render-cards.mjs. Each page sets its own banner colour (--band, --band-2) so
   the guide is recognisable at a glance. Rail look, design/DESIGN.md. */
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; }
@font-face { font-family: "Atkinson"; src: url("fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; }
:root {
  --bg: #f4f6f8; --surface: #ffffff; --line: #e2e7ec; --text: #13202b; --text-2: #4d5b67;
  --accent: #0f6e8c; --accent-soft: #e3f1f6; --warn: #9a5a00; --warn-soft: #fdf3e2;
  --uk: #1b3a6b; --uk-soft: #e6ecf6; --ca: #b3261e; --ca-soft: #fbe9e7; --ok: #1d7a55;
  --band: #0f6e8c; --band-2: #0b4f66;
}
.g-passports { --band: #1b3a6b; --band-2: #12284b; }
.g-phone { --band: #0f6e8c; --band-2: #0b4f66; }
.g-trains { --band: #1d7a55; --band-2: #135a3d; }
.g-primer { --band: #5a3e86; --band-2: #3f2a60; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); }
body { width: 100%; max-width: 560px; margin: 0 auto; font-family: "Atkinson", system-ui, sans-serif; color: var(--text); font-size: 16px; line-height: 1.4; padding: 0 0 18px; -webkit-text-size-adjust: 100%; }
a { color: var(--accent); }

/* The banner: which guide this is, at a glance (also on the texted image). */
.pbanner { display: flex; align-items: center; gap: 12px; background: var(--band); color: #fff; padding: 12px 16px; }
.pbanner .pb-icon { width: 42px; height: 42px; border-radius: 12px; background: rgb(255 255 255 / .16); display: grid; place-items: center; flex: none; }
.pbanner .pb-icon svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pbanner .pb-text { flex: 1; min-width: 0; line-height: 1.15; }
.pbanner .pb-kicker { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; opacity: .85; }
.pbanner .pb-name { font-family: "Fraunces", Georgia, serif; font-size: 21px; font-weight: 650; }
.pbanner .pb-count { font-size: 13px; font-weight: 700; background: rgb(0 0 0 / .28); border-radius: 99px; padding: 4px 10px; white-space: nowrap; }

.hero { background: linear-gradient(150deg, var(--band), var(--band-2)); color: #fff; padding: 22px 22px 22px; border-radius: 0 0 26px 26px; }
.eyebrow { font-size: 12.5px; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; opacity: .85; }
h1 { font-family: "Fraunces", Georgia, serif; font-weight: 650; font-size: 31px; line-height: 1.08; }
.hero p { margin-top: 10px; font-size: 16px; opacity: .95; }
.wrap { padding: 14px 14px 0; display: flex; flex-direction: column; gap: 10px; }
.card { background: var(--surface); border-radius: 18px; padding: 14px 16px; box-shadow: 0 1px 2px rgb(19 32 43 / .06), 0 4px 14px rgb(19 32 43 / .05); }
.card h2 { font-family: "Fraunces", Georgia, serif; font-weight: 650; font-size: 19px; line-height: 1.2; }
.when { font-size: 12.5px; font-weight: 700; color: var(--text-2); letter-spacing: .05em; text-transform: uppercase; }
.muted { color: var(--text-2); font-size: 14.5px; }
.foot { padding: 12px 22px 0; font-size: 12.5px; color: var(--text-2); }
/* Links to the other guides and back to the app: shown on the web page, hidden on the rendered PNG (render adds .shot). */
.more { padding: 14px 16px 0; display: flex; flex-wrap: wrap; gap: 8px 16px; font-weight: 700; font-size: 15px; }
.more a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.shot .more { display: none; }