/* gpdo — shared page chrome + Pass B page styles. Loaded after tokens.css on every page.
   In Astro this splits into Header.astro / Footer.astro scoped styles plus a Prose.astro. */

/* ---------- HEADER ---------- */
.hdr{position:sticky;top:0;z-index:20;background:var(--canvas);border-bottom:1px solid var(--card);transition:background var(--d-md) var(--ease)}
/* Scrolled state (html.hs from reveal.js): the solid bar turns to glass so content slides
   beneath it — the same liquid-glass language as the app's navbar exploration. */
html.hs .hdr{background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(16px) saturate(1.35);backdrop-filter:blur(16px) saturate(1.35)}
.hdr .wrap{display:flex;align-items:center;gap:var(--s8);height:72px}
/* Wordmark sits centred on the glyph (founder: it rode ~3px high on the baseline row). */
.mark{display:flex;align-items:center;gap:10px;text-decoration:none}
.mark svg{width:19px;height:29px;color:var(--text-1);align-self:center}
.mark b{font-size:23px;font-weight:700;letter-spacing:-.02em;line-height:1;transform:translateY(1px)}
.mark i{font-size:var(--t-label);font-weight:700;letter-spacing:2.4px;text-transform:uppercase;color:var(--text-3);font-style:normal;line-height:1}
.nav{margin-left:auto;display:flex;gap:var(--s6);font-size:var(--t-meta);color:var(--text-2)}
.nav a{color:var(--text-2)}
.nav a:hover{color:var(--text-1)}
.nav a[aria-current]{color:var(--text-1)}

/* ---------- FOOTER ---------- */
.ftr{padding:var(--s16) 0 var(--s12);border-top:1px solid var(--card);margin-top:var(--s24)}
.ftr-top{display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:var(--s8)}
.ftr h4{font-size:var(--t-label);font-weight:700;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-3);margin-bottom:var(--s4)}
.ftr ul{display:grid;gap:var(--s3);font-size:var(--t-meta)}
.ftr a{color:var(--text-2)}
.ftr a:hover{color:var(--text-1)}
.ftr-tag{color:var(--text-3);font-size:var(--t-meta);margin-top:var(--s4);max-width:30ch}
.langs{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);font-size:var(--t-meta)}
.ftr-btm{margin-top:var(--s12);padding-top:var(--s6);border-top:1px solid var(--card);display:flex;flex-wrap:wrap;gap:var(--s4) var(--s6);align-items:baseline;font-size:var(--t-meta);color:var(--text-3)}

/* Shown when a locale has no translation of this page yet and the English body is served
   in its place. Quiet rather than alarming — it is an honest note, not an error. */
.notice{margin-top:var(--s8);background:var(--card);border-radius:var(--r);padding:var(--s4);font-size:var(--t-meta);color:var(--text-2)}

/* ---------- PAGE HERO ---------- */
.phero{padding-block:var(--s16) var(--s12)}
.phero h1{font-size:clamp(34px,4.8vw,52px);line-height:var(--lh-tight);font-weight:700;letter-spacing:var(--track-display);max-width:20ch;margin-top:var(--s3)}
.phero .lead{margin-top:var(--s6)}

/* ---------- PROSE / LEGAL ---------- */
.prose{max-width:68ch;display:grid;gap:var(--s6)}
.prose h2{font-size:26px;max-width:none;margin-top:var(--s8)}
.prose h3{margin-top:var(--s4)}
.prose p,.prose li{color:var(--text-2)}
.prose ul{display:grid;gap:var(--s3);padding-left:var(--s6);list-style:disc}
.prose li::marker{color:var(--text-3)}
.prose dl{display:grid;gap:var(--s4)}
.prose dt{font-weight:700;color:var(--text-1)}
.prose dd{margin:var(--s1) 0 0;color:var(--text-2)}

/* ---------- FEATURE ROWS ---------- */
.rows{display:grid;gap:var(--s3);margin-top:var(--s12)}
.row{background:var(--card);border-radius:var(--r);padding:var(--s6);display:grid;grid-template-columns:auto 1fr;gap:var(--s6);align-items:start;transition:background var(--d-sm) var(--ease)}
.row:hover{background:var(--card-hover)}
.row>.tile{width:44px;height:44px}
.row h3{margin-bottom:var(--s3)}
.row p{color:var(--text-2)}
.row p+p{margin-top:var(--s3)}
.row .meta{margin-top:var(--s3)}

/* ---------- CITIES ---------- */
.cts{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--s2);margin-top:var(--s12)}
.ct{background:var(--card);border-radius:var(--r);padding:var(--s4);display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);transition:background var(--d-sm) var(--ease)}
.ct:hover{background:var(--card-hover)}
.ct b{font-weight:700;font-size:var(--t-body)}
.ct span{font-size:var(--t-meta);color:var(--text-3);font-variant-numeric:tabular-nums}
.cbars{display:grid;gap:var(--s2);margin-top:var(--s8);max-width:640px}
.cbar{display:grid;grid-template-columns:110px 1fr 52px;gap:var(--s4);align-items:center;font-size:var(--t-meta)}
.cbar i{display:block;height:10px;border-radius:2px;background:var(--raised)}
.cbar u{text-decoration:none;color:var(--text-3);text-align:right;font-variant-numeric:tabular-nums}

/* ---------- FAQ ---------- */
.faqs{display:grid;gap:var(--s2);margin-top:var(--s12);max-width:76ch}
.faq{background:var(--card);border-radius:var(--r);padding:var(--s4) var(--s6)}
.faq summary{font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--s4);align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--text-3);font-weight:700}
.faq[open] summary::after{content:"–"}
.faq p{color:var(--text-2);margin-top:var(--s3)}

.cta-band{border-top:1px solid var(--card);padding-block:var(--s24);margin-top:var(--s24);display:grid;grid-template-columns:1fr 1fr;gap:var(--s16);align-items:center}
.cta-band h2{margin-top:var(--s3)}

@media(max-width:940px){
/* The design hid the nav entirely below this width and relied on the footer. On the
   homepage the footer is ~7000px down, which leaves a phone with no way to navigate, so
   the links wrap onto a second row instead — same type, same colours, no JS. */
.hdr .wrap{flex-wrap:wrap;height:auto;padding-block:var(--s3);gap:var(--s2) var(--s6)}
.nav{width:100%;margin-left:0;gap:var(--s4);flex-wrap:wrap;font-size:var(--t-label);letter-spacing:.02em}
.ftr-top{grid-template-columns:1fr 1fr}
.cta-band{grid-template-columns:1fr}
}
@media(max-width:620px){
/* The strapline wraps to two lines beside the wordmark at this width and unbalances the
   bar; the same words are the first thing in the footer. */
.mark i{display:none}
.ftr-top{grid-template-columns:1fr}
.row{grid-template-columns:1fr}
.cbar{grid-template-columns:88px 1fr 46px}
}