/* boarded.eu - one stylesheet for the home page and both privacy policies.
 *
 * The look is an airport departures board in the app's own navy (variant B, chosen by the author
 * on 2026-11-14 over a boarding-pass page and an aircraft-window page). Amber is the colour such
 * boards really use for a changed status, so it is kept for exactly one thing: the row that reads
 * BOARDED. Everything else is ink on a pale page.
 *
 * Fonts are served from this site (OFL): Big Shoulders Display for the board and headings, Atkinson
 * Hyperlegible Next for reading. No request leaves for a font service - the policy this site
 * publishes says the app sends nothing, and the page that says so should not either.
 */
@font-face { font-family: "Big Shoulders"; src: url(fonts/big-shoulders-display-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Big Shoulders"; src: url(fonts/big-shoulders-display-latin-ext.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: "Atkinson"; src: url(fonts/atkinson-hyperlegible-next-latin.woff2) format("woff2"); font-weight: 200 800; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Atkinson"; src: url(fonts/atkinson-hyperlegible-next-latin-ext.woff2) format("woff2"); font-weight: 200 800; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF; }

:root {
  --board: #0d2250;
  --flap: #17346f;
  --flap-ink: #f2f0e6;
  --board-muted: #b9c4e2;
  --amber: #f4b73f;
  --page: #edf0f7;
  --ink: #131a33;
  --muted: #545b74;
  --rule: #cfd5e5;
  --link: #1a3f8f;
}
@media (prefers-color-scheme: dark) {
  :root { --page: #0b1328; --ink: #e6e9f3; --muted: #a2a9c0; --rule: #26304d; --board: #08183b; --link: #9db8f0; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 17.5px/1.6 "Atkinson", system-ui, sans-serif; }
a { color: var(--link); text-underline-offset: .2em; }
a:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
p, li { overflow-wrap: anywhere; }

/* ---- The board: the whole top of the home page, a slim strip on the policy pages ---- */
.board { background: var(--board); color: var(--flap-ink); padding: 26px 16px 34px; }
.board a { color: inherit; }
.board-in { max-width: 62rem; margin: 0 auto; }
.top { display: flex; align-items: center; gap: 12px; font-family: "Big Shoulders"; font-weight: 800; font-size: 1.6rem; letter-spacing: .01em; }
.top img { width: 40px; height: 40px; border-radius: 10px; }
.top .home { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.top .aside { margin-left: auto; font-weight: 600; font-size: 1.15rem; color: var(--board-muted); }
.board.slim { padding: 18px 16px; }

.departures { width: 100%; border-collapse: separate; border-spacing: 0 6px; margin-top: 22px; font-family: "Big Shoulders"; }
.departures th { text-align: left; font-weight: 600; font-size: 1rem; color: #9fb0da; padding: 0 6px 2px; }
.departures td { padding: 0 6px; font-weight: 700; font-size: clamp(1.25rem, 3.6vw, 2.1rem); line-height: 1; white-space: nowrap; }
/* Each character sits on its own flap, with the split line across the middle. */
.f { display: inline-flex; gap: 2px; }
.f i { font-style: normal; display: inline-block; min-width: .66em; text-align: center; padding: .14em .04em .1em;
       background: linear-gradient(var(--flap) 0 49%, #0a1a3d 49% 52%, var(--flap) 52%); border-radius: 3px; }
.f i.sp { background: none; }
.departures .st { color: var(--board-muted); }
.departures tr.us td { color: #fff; }
.departures tr.us .st .f i { color: var(--amber); }
.departures .col-to { width: 100%; }
@media (max-width: 640px) { .departures .col-time, .departures .hide-s { display: none; } .departures td { font-size: 1.15rem; } }

/* ---- Home page ---- */
.home-main { max-width: 62rem; margin: 0 auto; padding: 0 16px; }
.home-main h1 { font-family: "Big Shoulders"; font-weight: 800; font-size: clamp(2.6rem, 8vw, 5rem); line-height: .95; margin: 48px 0 18px; max-width: 14ch; }
.lead { font-size: 1.15rem; max-width: 36em; margin: 0; }

.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin: 52px 0 0; padding-top: 26px; border-top: 3px solid var(--ink); }
.cols h2, .gate h2, .yours h2 { font-family: "Big Shoulders"; font-weight: 800; line-height: 1; }
.cols h2 { font-size: 1.75rem; margin: 0 0 10px; }
.cols p { margin: 0; color: var(--muted); }

.gate { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; margin: 70px 0 0; }
.gate img { width: 100%; max-width: 330px; height: auto; display: block; border-radius: 22px; justify-self: center; }
.gate h2 { font-size: clamp(2rem, 5vw, 3rem); margin: 0 0 14px; }
.gate p { margin: 0 0 10px; color: var(--muted); }

.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 70px 0 0; }
.shots figure { margin: 0; }
.shots img { width: 100%; height: auto; border-radius: 16px; display: block; }
.shots figcaption { color: var(--muted); font-size: .95rem; margin-top: 8px; }

.yours { margin: 70px 0 0; padding: 28px 0; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); display: grid; grid-template-columns: 1fr 2fr; gap: 24px; }
.yours h2 { font-size: 2rem; margin: 0; }
.yours p { margin: 0; }

.site-foot { max-width: 62rem; margin: 0 auto; padding: 30px 16px 60px; display: flex; flex-wrap: wrap; gap: 10px 28px; color: var(--muted); }

@media (max-width: 760px) {
  .cols, .gate, .yours { grid-template-columns: 1fr; }
  .gate img { max-width: 240px; }
  .shots { grid-template-columns: 1fr 1fr; } .shots figure:nth-child(3) { display: none; }
}

/* ---- Policy pages: long reading, so a narrow column and the reading face throughout ---- */
.doc { max-width: 42rem; margin: 0 auto; padding: 40px 16px 64px; }
.doc h1 { font-family: "Big Shoulders"; font-weight: 800; font-size: clamp(2.4rem, 7vw, 3.4rem); line-height: 1; margin: 0 0 8px; }
.doc h2 { font-family: "Big Shoulders"; font-weight: 800; font-size: 1.6rem; line-height: 1.1; margin: 2.4rem 0 .5rem; }
.doc ul { padding-left: 1.25rem; }
.doc li + li { margin-top: .35rem; }
.doc header { margin-bottom: 1.5rem; }
.meta { color: var(--muted); font-size: .95rem; margin: 0; }
/* The short version of the policy: set off by the same heavy rules as the home page, not a card. */
.card { border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); padding: .9rem 0; margin: 1.5rem 0; }
.card p { margin: .25rem 0; }
.doc footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--rule); color: var(--muted); font-size: .95rem; }