/* ============================================================
SUNBURNT ATLAS — SHARED STYLESHEET (IA REBUILD)
============================================================
This is the ONE stylesheet every rebuilt page links to.
No page-specific OVERRIDES of shared design tokens or shared
components, no per-page color/font/spacing forks — see the
"Absolute Component Consistency" rule (§8c). Template-specific
LAYOUT CSS (a hero, a tab-switching interaction, a synthesis
banner) is allowed when that layout genuinely exists only
within one template — see §8e for the exact boundary. If a
pattern gets reused across pages, it graduates into this file.
Written MOBILE-FIRST per the locked methodology (factsheet §8b):
base/unqualified rules ARE the mobile styles. min-width media
queries layer on tablet/desktop complexity on top of that —
never the reverse. This is the exact discipline that was
missing on the current site and caused the recurring mobile
bugs ("the family curse"). Do not add a max-width query to
this file. Ever.
Breakpoints: 860px (mobile nav → desktop nav, confirmed via
visual demo) · 1024px (desktop) · 1280px (large desktop)
FONTS: do not @import fonts here — it delays font discovery
until after this stylesheet starts processing. Every page's
should link fonts directly with a preconnect:
============================================================ */
/* ============================================================
1. RESET
============================================================ */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
font-family:Inter, sans-serif;
background:var(--page-bg);
color:var(--dark);
transition:background .2s ease, color .2s ease;
overflow-x:clip; /* Prevents accidental horizontal scrolling without creating a horizontal scroll container. This can still clip content, outlines, and shadows at the viewport edge, so actual overflow bugs must still be found and fixed — this is a guardrail, not the fix. */
}
/* Scroll-lock while the mobile drawer is open — a class instead of JS
setting/clearing inline style, so it can't clobber some other inline
overflow value that might exist for an unrelated reason. */
body.drawer-open{ overflow:hidden; }
img, svg{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font-family:inherit; }
/* Respect reduced-motion preference sitewide */
@media (prefers-reduced-motion:reduce){
*, *::before, *::after{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
transition-duration:.01ms !important;
scroll-behavior:auto !important;
}
}
/* ============================================================
2. COLOR SYSTEM — light mode (default) + dark mode
Locked: factsheet §4 (light), §6 (dark)
============================================================ */
:root{
--ocean:#0077B6; --ocean-deep:#023E8A; --turquoise:#00B4D8; --aqua:#48CAE4;
--sand:#F5EDD6; --ivory:#fff8ea; --sand-dark:#E8D9B5; --coral:#E07A5F; --white:#FFFFFF;
--dark:#1A2B3C; --muted:#5A6E7F; --light-bg:#F0F7FF; --green:#0F6E56; --green-bg:#E8F5F1;
/* page/section background — separate token from --white so dark mode can
actually flip it. This was a real bug: body used to read var(--white),
which never changes between themes, while text color DID change —
producing pale text on a white background in dark mode. */
--page-bg:#FFFFFF;
/* warning/emergency card — the one confirmed exception to the standard card */
--warning-trim:#12222A; --warning-bg:#FCF0EC;
/* brass label system — everywhere except the hero kicker */
--brass:#8b5a21;
/* hairline dividers */
--hairline:rgba(18,48,68,.1);
/* shared header height — used by both .nav's min-height and .tab-nav's
sticky offset, so they can never silently drift out of sync again */
--nav-height:80px;
}
:root[data-theme="dark"]{
--ocean:#48CAE4; --ocean-deep:#04101c; --turquoise:#00B4D8; --aqua:#90E0EF;
--sand:#132234; --sand-dark:#1c3448; --coral:#F0997B; --white:#FFFFFF;
--dark:#EAF2F8; --muted:#9AB1C4; --light-bg:#0d1e2f; --green:#5DCAA5; --green-bg:#0f2b24;
--nav-dark:#123044; --card-bg-dark:#0f3b44;
--brass:#ffc247;
--hairline:rgba(255,248,236,.1);
--page-bg:#081521;
}
/* Three-tone rule (§4): --white for sections everywhere except hero/footer,
--ivory for cards sitting on those sections, --sand retired from both.
--page-bg is the body-level background specifically (see above). */
/* ============================================================
3. TYPOGRAPHY
Locked: factsheet §3. Roboto Slab = headings only. Inter = body only.
IBM Plex Mono = wayfinding/utility text only (eyebrows, coordinates,
small data tags) — never headlines, never body copy.
============================================================ */
h1, h2, h3, h4{
font-family:'Roboto Slab', serif;
font-weight:800;
color:var(--dark);
}
.eyebrow, .mono-label{
font-family:'IBM Plex Mono', monospace;
font-size:.7rem;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--brass);
}
/* Hero kicker is the ONE eyebrow exception — always ocean blue, on the dark hero only */
.hero .eyebrow, .hero-kicker{
color:rgba(0,127,157,.9);
}
/* Hero-level headline — biggest text on the page */
.hero h1, .headline-xl{
font-size:clamp(3.2rem, 7.5vw, 6.4rem);
line-height:.92;
letter-spacing:-.045em;
}
/* Standard section h2 — the editorial treatment (tighter, larger) IS the
default now. Applies to every h2 sitewide: article headlines, section
headlines like "Where Expats Actually Live," everything. Locked after
Apollo confirmed via real preview that this weight/tightness is what
the site's headlines should carry, not an occasional flourish. */
h2, .headline-lg, .headline-editorial{
font-size:clamp(2.35rem, 5vw, 5rem);
line-height:.96;
letter-spacing:-.055em;
}
/* FLAG, not changed: this minimum was demo-approved by Apollo against
short/medium headlines. Genuinely long headlines ("Documents, Customs
and Shipping Requirements") may wrap to 4-5 dense lines at 320-360px
phone widths, since 2.35rem is a floor the vw component can't shrink
below at narrow widths — the "aggressive scaling" is really this fixed
floor, not the vw term itself. Test with real ugly-long titles before
Session-E-style batches ship; if it's a problem, the fix is either a
slightly lower floor or a separate .headline-long class for the
outliers — don't silently change this locked value without checking. */
/* Reusable prose spacing rhythm — was missing entirely. Without it, every
article/deep-dive page has to reinvent paragraph/heading/list spacing
locally, which is exactly the kind of per-page drift this project has
been trying to eliminate. Wrap article bodies in
. */
.flow > * + *{ margin-top:1rem; }
.flow > h2, .flow > h3{ margin-top:2.25rem; }
.flow ul, .flow ol{ padding-left:1.4rem; }
/* Selectively-highlighted lead text — scattered words tinted against
otherwise-muted body copy, giving a "hand-annotated" texture rather
than a flat block of gray. Opt-in via span — still an occasional tool,
not locked as a default the way the h2 treatment above is. */
.hl{ color:var(--ocean); font-weight:600; }
[data-theme="dark"] .hl{ color:var(--aqua); }
p{ line-height:1.65; color:var(--muted); }
/* ============================================================
4. LAYOUT PRIMITIVES
============================================================ */
.section{
padding:clamp(4rem, 8vw, 7rem) clamp(1.2rem, 4vw, 3rem);
max-width:1200px;
margin:0 auto;
}
.hairline-top{ border-top:1px solid var(--hairline); }
/* ============================================================
5. ICON SYSTEM
Locked: factsheet §7. Single-color, single-stroke-weight line
icons (Lucide/Feather-style), stroke=currentColor, stroke-width 2,
no fill. Inherits surrounding text color automatically. Flag
emoji are the one exception and are NOT covered by this rule —
they render as real emoji everywhere, unchanged.
============================================================ */
.fact-icon{
color:var(--ocean-deep);
flex-shrink:0;
}
.fact-icon svg{
width:22px;
height:22px;
display:block;
stroke:currentColor;
stroke-width:2;
fill:none;
}
[data-theme="dark"] .fact-icon{ color:var(--aqua); }
.rt-icon svg{
width:34px;
height:34px;
display:block;
color:#fff;
opacity:.85;
stroke:currentColor;
stroke-width:2;
fill:none;
}
/* ============================================================
6. CARD SYSTEM
Locked: factsheet §5 (light), §6 (dark), §8c (consistency rule —
ONE card component sitewide; only content volume differs page
to page, never style).
============================================================ */
.entry-card, .fact-card, .snapshot-card{
border:none;
border-left:4px solid var(--ocean-deep);
border-radius:16px;
padding:1.6rem;
background:var(--ivory);
box-shadow:0 6px 18px rgba(2,62,138,.06);
transition:transform .2s ease;
}
.entry-card:hover, .entry-card:focus-within,
.snapshot-card:hover, .snapshot-card:focus-within{ transform:translateY(-4px); }
.entry-card.green{ border-left-color:var(--green); } /* the one optional variant, not default */
[data-theme="dark"] .entry-card,
[data-theme="dark"] .fact-card,
[data-theme="dark"] .snapshot-card{
background:var(--card-bg-dark);
border-left-color:var(--aqua);
box-shadow:0 6px 18px rgba(0,0,0,.4);
}
/* Fixed: was `* { color: var(--aqua) }`, which forced every descendant —
headings, body copy, labels — to the same aqua and erased the normal
quiet-label/bold-value hierarchy. Headings and links stay bright aqua;
body copy and labels dim to --muted so the eye still has somewhere to
rest on real, denser content pages. */
[data-theme="dark"] .entry-card h1, [data-theme="dark"] .entry-card h2,
[data-theme="dark"] .entry-card h3, [data-theme="dark"] .entry-card h4,
[data-theme="dark"] .fact-card .fact-value, [data-theme="dark"] .snapshot-card h4{
color:var(--aqua);
}
[data-theme="dark"] .entry-card p, [data-theme="dark"] .entry-card .label,
[data-theme="dark"] .fact-card .fact-label, [data-theme="dark"] .fact-card .fact-sub,
[data-theme="dark"] .snapshot-card p{
color:var(--muted);
}
[data-theme="dark"] .entry-card a, [data-theme="dark"] .snapshot-card a{
color:var(--aqua);
}
/* Hero card exception (factsheet §5) — translucent glass treatment instead
of the standard ivory card. This was documented before it was actually
built; it's real now. Covers both a literal .fact-card sitting inside a
.hero, and the simpler .stat-item pattern the Philippines prototype
currently uses for the same visual job. */
.hero .fact-card, .hero .entry-card,
.stats-strip{
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);
border-left:4px solid var(--aqua);
backdrop-filter:blur(12px);
box-shadow:none;
}
.hero .fact-card *, .hero .entry-card *,
.stats-strip *{ color:#fff; }
/* Warning/emergency card — confirmed exception, not a bug */
.warning-card{
border-left:4px solid var(--warning-trim);
border-radius:16px;
padding:1.6rem;
background:var(--warning-bg);
box-shadow:0 14px 34px rgba(18,34,42,.22);
}
/* Text color is fixed, not theme-variable, on purpose: this card's
background stays the same pale blush in both light and dark mode, but
--dark/--muted flip to light colors in dark mode for use on dark
backgrounds. Without this, dark mode would put near-white headings and
pale blue-gray body text on a light blush card — unreadable. */
.warning-card, .warning-card h1, .warning-card h2,
.warning-card h3, .warning-card h4{ color:#1A2B3C; }
.warning-card p, .warning-card li{ color:#4A5D6D; }
.warning-card p + p{ margin-top:.8rem; }
.warning-card a{ color:#023E8A; }
/* Callout card family — info / success / dark. Every card in this
family uses .callout-label for its header line: a small 16px
inline icon + IBM Plex Mono uppercase text, not an h4. This is
the one correct pattern — do not pair these cards with h4 titles
or large (24px+) floating icons. */
.callout-label{
display:flex; align-items:center; gap:.5rem;
font-family:'IBM Plex Mono', monospace; font-size:.7rem; font-weight:700;
letter-spacing:.06em; text-transform:uppercase; margin-bottom:.6rem;
}
.callout-label svg{ width:16px; height:16px; stroke:currentColor; stroke-width:2; fill:none; flex-shrink:0; }
.info-card{ border-left:4px solid var(--ocean-deep); border-radius:16px; padding:1.6rem; background:var(--light-bg); margin:1.8rem 0; }
.info-card .callout-label{ color:var(--ocean-deep); }
.info-card p{ margin:0; }
.info-card p + p{ margin-top:.8rem; }
[data-theme="dark"] .info-card{ background:var(--card-bg-dark); }
[data-theme="dark"] .info-card, [data-theme="dark"] .info-card h4{ color:var(--aqua); }
[data-theme="dark"] .info-card p{ color:var(--muted); }
[data-theme="dark"] .info-card .callout-label{ color:var(--aqua); }
.warning-card .callout-label{ color:#8a3b1f; }
.success-card{ border-left:4px solid var(--green); border-radius:16px; padding:1.6rem; background:var(--green-bg); margin:1.8rem 0; }
.success-card .callout-label{ color:var(--green); }
.success-card p{ font-size:.94rem; line-height:1.65; color:var(--dark); margin:0; }
.success-card p + p{ margin-top:.8rem; }
[data-theme="dark"] .success-card p{ color:var(--muted); }
.dark-callout{ background:var(--ocean-deep); border-radius:16px; padding:1.8rem; margin:1.8rem 0; color:#fff; }
.dark-callout .callout-label{ color:#ffc247; }
.dark-callout h4{ color:#fff; margin-bottom:.6rem; }
.dark-callout p{ color:rgba(255,255,255,.78); font-size:.95rem; line-height:1.68; margin:0; }
.dark-callout p + p{ margin-top:.8rem; }
.dark-callout ol, .dark-callout ul{ color:rgba(255,255,255,.85); padding-left:1.2rem; margin:0; }
.dark-callout li{ margin-bottom:.8rem; font-size:.92rem; line-height:1.6; }
.dark-callout li:last-child{ margin-bottom:0; }
[data-theme="dark"] .dark-callout{ background:#04101c; }
/* Fact pill / fact strip — small stat chips inside dark hero sections
(replaces any per-page .stat-item/.stats-strip reinvention). */
.fact-strip{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.4rem; }
.fact-pill{
display:inline-flex; align-items:center; gap:.5rem;
background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
border-radius:999px; padding:.45rem 1rem;
font-family:'IBM Plex Mono', monospace; font-size:.68rem; font-weight:700;
letter-spacing:.05em; color:rgba(255,255,255,.85);
}
.fact-pill svg{ width:13px; height:13px; stroke:var(--aqua); stroke-width:2; fill:none; flex-shrink:0; }
/* Badges — small risk/eligibility status chips, mainly for
comparison-table cells (e.g. visa eligibility "Yes/No/Remote only").
Sourced from Thailand/Malaysia/Indonesia, standardized here so
every country (including Vietnam and Philippines, which had none)
can use the same four variants. Colors are fixed regardless of
theme, same reasoning as .warning-card — these are small semantic
chips, not full sections that need to invert with dark mode.
badge-info's colors were previously theme-variable (var(--light-bg)/
var(--ocean-deep)) in Malaysia's original file, which broke badly in
dark mode (both tokens invert to near-black-on-near-black); fixed
here to a stable light-blue chip in both modes. */
.badge{ display:inline-block; padding:.2rem .6rem; border-radius:999px; font-size:.72rem; font-weight:700; }
.badge-danger{ background:#FCF0EC; color:#8a3b1f; }
.badge-caution{ background:#FFF3D6; color:#8b5a21; }
.badge-safe{ background:var(--green-bg); color:var(--green); }
.badge-info{ background:#F0F7FF; color:#023E8A; }
/* City cards — the confirmed 3rd exception to .entry-card (factsheet
§5/§8c), gradient tiles for Expat Base Cities on every country hub.
Base structure was already identical, byte-for-byte, across
Thailand/Vietnam/Malaysia/Indonesia; only the per-city gradient
background is page-specific (each country picks its own gradient
pairs, e.g. .cc-bangkok, .cc-hanoi — define those locally per hub).
Philippines' hub still used a plain ivory .city-card instead of this
pattern as of the country-hub audit — needs retrofitting to match. */
.city-card{ border-radius:18px; padding:1.7rem; color:#fff; }
.city-card .city-type{ font-family:'IBM Plex Mono', monospace; font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.75); margin-bottom:.5rem; }
.city-card .city-name{ font-family:'Roboto Slab', serif; font-weight:800; font-size:1.5rem; margin-bottom:.6rem; }
.city-card .city-stat{ font-size:.85rem; color:rgba(255,255,255,.88); margin-bottom:.3rem; }
.city-card .city-desc{ font-size:.85rem; color:rgba(255,255,255,.8); line-height:1.55; margin-top:.7rem; }
/* ============================================================
7. TABLES
One table style sitewide (§8c) — horizontal scroll wrapper on
mobile per the responsive-design guidance, never a squeezed/
broken table.
============================================================ */
.table-wrap{ overflow-x:auto; }
table{
width:100%;
border-collapse:collapse;
font-family:Inter, sans-serif;
font-size:.92rem;
}
th{
font-family:'IBM Plex Mono', monospace;
font-size:.68rem;
font-weight:700;
letter-spacing:.06em;
text-transform:uppercase;
color:var(--brass);
text-align:left;
padding:.75rem .9rem;
border-bottom:2px solid var(--ocean-deep);
}
td{
padding:.85rem .9rem;
border-bottom:1px solid var(--hairline);
color:var(--dark);
}
[data-theme="dark"] th{ border-bottom-color:var(--aqua); }
/* ============================================================
8. FORMS
Locked: factsheet §8b. 16px minimum on every input to prevent
iOS Safari auto-zoom on focus. Applies to newsletter signup and
both feedback forms, everywhere they appear.
============================================================ */
input, select, textarea{
font-size:16px;
font-family:Inter, sans-serif;
min-height:48px;
padding:.6rem .9rem;
border-radius:10px;
border:1px solid var(--hairline);
background:var(--white);
color:var(--dark);
}
/* Was missing entirely — without it, dark mode relied on inconsistent
browser defaults for input background/text/placeholder color. */
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea{
background:#13293a;
color:var(--dark);
border-color:rgba(144,224,239,.3);
}
[data-theme="dark"] ::placeholder{ color:var(--muted); }
/* ============================================================
8a. FOCUS-VISIBLE
Was missing entirely — browser-default focus rings can be hard
to see against the dark nav, aqua card backgrounds, and ivory
surfaces. This makes keyboard focus unmistakable everywhere.
============================================================ */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
outline:3px solid var(--coral);
outline-offset:3px;
}
/* ============================================================
9. TOUCH TARGETS
Locked: factsheet §8b. 48×48px minimum. Note on the standard,
corrected after an earlier citation error: WCAG 2.2's actual AA
minimum (SC 2.5.8) is 24×24px with exceptions; 44×44 is the
AAA-level "enhanced" target size (SC 2.5.5, from WCAG 2.1).
Google's Material guidance recommends 48×48. We build to 48
because it clears every one of those bars at once, and this
audience skews 45+ — err toward generous, not minimal.
============================================================ */
.btn, button, .tap-target{
min-height:48px;
min-width:48px;
}
.tap-row > * + *{ margin-left:8px; }
.tap-col > * + *{ margin-top:8px; }
/* ============================================================
10. NAV — desktop bar, mobile hamburger + persistent Emergency pill
Locked: factsheet §1 (desktop), §8a (mobile — canonical mobile nav)
============================================================ */
.nav{
position:sticky; top:0; z-index:100;
display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
padding:1rem clamp(1.2rem, 4vw, 3rem);
min-height:var(--nav-height);
background:rgba(2,62,138,.92);
backdrop-filter:blur(18px);
border-bottom:1px solid rgba(255,255,255,.1);
}
.brand{
display:inline-flex; align-items:center; gap:.7rem;
font-family:'IBM Plex Mono', monospace; font-weight:700; letter-spacing:.1em;
font-size:.8rem; text-transform:uppercase; color:#fff; text-decoration:none;
}
.compass{
width:32px; height:32px; border:1px solid rgba(72,202,228,.6); border-radius:50%;
display:inline-grid; place-items:center; color:var(--aqua); position:relative;
}
.compass:before, .compass:after{ content:""; position:absolute; background:rgba(72,202,228,.4); }
.compass:before{ width:1px; height:16px; }
.compass:after{ height:1px; width:16px; }
.compass span{ position:relative; z-index:1; font-size:.62rem; color:#fff; }
/* Desktop link list, theme toggle, newsletter CTA — hidden by default (mobile),
shown at tablet+ per mobile-first methodology */
.links{ display:none; }
.links a{ color:rgba(255,255,255,.7); font-size:.85rem; font-weight:600; text-decoration:none; }
.links a:hover{ color:#fff; }
.theme-toggle{
display:inline-flex; align-items:center; gap:.4rem;
border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#fff;
padding:.55rem .9rem; border-radius:999px;
font-family:'IBM Plex Mono', monospace; font-size:.7rem; font-weight:700;
letter-spacing:.06em; text-transform:uppercase; cursor:pointer;
min-height:48px;
}
.theme-icon svg{ width:13px; height:13px; display:block; }
.nav-cta{
background:var(--turquoise); color:#fff; border:none;
padding:.6rem 1.3rem; border-radius:999px;
font-family:Inter, sans-serif; font-weight:600; font-size:.85rem; cursor:pointer;
min-height:48px; display:none;
}
[data-theme="dark"] .nav{ background:var(--nav-dark); }
[data-theme="dark"] .links a{ color:var(--aqua); }
[data-theme="dark"] .links a:hover{ color:#fff; }
[data-theme="dark"] .brand{ color:var(--aqua); }
/* Hamburger + Emergency pill — the two elements ALWAYS visible in the mobile
header. Order matters: Emergency pill sits LEFT of the hamburger. */
.hamburger-btn{
display:inline-flex; align-items:center; justify-content:center;
background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); border-radius:10px;
width:48px; height:48px; color:#fff; cursor:pointer; flex-shrink:0;
}
.hamburger-btn svg{ width:22px; height:22px; }
.emergency-pill{
display:inline-flex; align-items:center; gap:.35rem;
background:var(--warning-trim); color:var(--warning-bg);
font-family:Inter, sans-serif; font-weight:700; font-size:.72rem;
text-transform:uppercase; letter-spacing:.04em;
padding:0 .9rem; border-radius:999px; text-decoration:none; white-space:nowrap;
height:48px; flex-shrink:0;
}
.emergency-pill svg{ width:16px; height:16px; flex-shrink:0; }
/* ============================================================
11. MOBILE DRAWER
Locked canon: factsheet §8a. Country Atlas = two-level nested
accordion. Flat links below. Theme toggle + Newsletter CTA in
the footer, in that order.
============================================================ */
.drawer-overlay{
position:fixed; inset:0; background:rgba(2,16,28,.6);
opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:200;
}
.drawer-overlay.open{ opacity:1; pointer-events:auto; }
.drawer-panel{
position:fixed; top:0; right:0; bottom:0;
width:min(86vw, 360px);
background:var(--nav-dark, #123044);
color:#fff;
transform:translateX(100%);
transition:transform .3s ease;
z-index:201;
display:flex; flex-direction:column;
overflow-y:auto;
}
.drawer-panel.open{ transform:translateX(0); }
.drawer-header{
display:flex; justify-content:space-between; align-items:center;
padding:1.1rem 1.2rem; border-bottom:1px solid rgba(255,255,255,.12); flex-shrink:0;
}
.drawer-header .brand{ font-size:.95rem; }
.drawer-close{
width:48px; height:48px; border-radius:10px; background:rgba(255,255,255,.1);
border:none; color:#fff; display:flex; align-items:center; justify-content:center;
cursor:pointer; flex-shrink:0;
}
.drawer-close svg{ width:20px; height:20px; }
.drawer-nav{ flex:1; padding:.6rem 1.2rem; display:flex; flex-direction:column; }
.drawer-link{
display:flex; align-items:center; min-height:48px; padding:.5rem .2rem;
color:#fff; text-decoration:none; font-family:Inter, sans-serif;
font-weight:600; font-size:.98rem; border-bottom:1px solid rgba(255,255,255,.08);
}
.drawer-section-toggle{
display:flex; align-items:center; justify-content:space-between; width:100%;
min-height:48px; padding:.5rem .2rem; background:none; border:none; color:#fff;
text-align:left; font-family:Inter, sans-serif; font-weight:600; font-size:.98rem;
border-bottom:1px solid rgba(255,255,255,.08); cursor:pointer;
}
.drawer-chevron{ width:17px; height:17px; transition:transform .2s ease; flex-shrink:0; }
.drawer-section-toggle.expanded .drawer-chevron,
.country-toggle.expanded .drawer-chevron{ transform:rotate(90deg); }
.country-list{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.country-list.expanded{ max-height:4000px; /* was 900px — too tight if multiple countries are expanded at once, which the JS allows; this generous ceiling avoids clipping at the cost of slightly imprecise transition timing */ }
.country-row{
display:flex; align-items:center; justify-content:space-between;
min-height:48px; padding:.4rem .2rem .4rem .8rem;
}
.country-name-group{ display:flex; align-items:center; gap:.5rem; }
.country-name-group a{ color:#fff; text-decoration:none; font-weight:600; font-size:.9rem; }
.hub-pill{
background:var(--aqua, #48CAE4); color:#04101c;
font-family:'IBM Plex Mono', monospace; font-size:.6rem; font-weight:700;
letter-spacing:.05em; text-transform:uppercase; padding:.22rem .5rem; border-radius:999px;
}
.country-toggle{
background:none; border:none; color:rgba(255,255,255,.65);
width:48px; height:48px; display:flex; align-items:center; justify-content:center;
cursor:pointer; flex-shrink:0;
}
.country-pages{ max-height:0; overflow:hidden; transition:max-height .3s ease; padding-left:1.9rem; }
.country-pages.expanded{ max-height:800px; /* was 520px — an 11-link deep-dive list at the locked 48px touch-target height alone needs ~528px before borders/spacing, so this was clipping the last item */ }
.country-pages a{
display:flex; align-items:center; min-height:48px; color:rgba(255,255,255,.7);
text-decoration:none; font-size:.82rem; border-bottom:1px solid rgba(255,255,255,.06);
}
.drawer-footer{
padding:1.2rem; border-top:1px solid rgba(255,255,255,.12);
display:flex; flex-direction:column; gap:.7rem; flex-shrink:0;
}
.drawer-footer .theme-toggle{ width:100%; justify-content:center; min-height:48px; display:inline-flex; }
.drawer-nav-cta{
width:100%; min-height:48px; background:var(--turquoise); color:#fff; border:none;
border-radius:999px; font-family:Inter, sans-serif; font-weight:700; font-size:.95rem; cursor:pointer;
}
/* ============================================================
12. BREADCRUMB
Locked: factsheet §12 (link-completeness) + every page carries
visible breadcrumb + matching BreadcrumbList JSON-LD.
============================================================ */
.breadcrumb{
background:var(--ocean-deep);
padding:.8rem clamp(1.2rem, 4vw, 3rem);
border-top:1px solid rgba(255,255,255,.08);
font-size:.82rem;
color:rgba(255,255,255,.85);
}
.breadcrumb a{ color:rgba(255,255,255,.85); text-decoration:none; }
.breadcrumb a:hover{ color:#fff; }
.breadcrumb .sep{ color:rgba(255,255,255,.3); margin:0 .5rem; }
.breadcrumb .current{ color:#fff; font-weight:600; }
/* ============================================================
13. TAB NAVIGATION (locked pattern — factsheet §8, superseding
the earlier dark ocean-deep treatment. Sticky, white background,
IBM Plex Mono uppercase labels, small inline icon per tab. Every
deep-dive and hub page uses this exact block — no per-page
redefinition needed.)
============================================================ */
.tab-nav{
/* top MUST match --nav-height, not 0 — .nav is also position:sticky/top:0
with a higher z-index, so top:0 here made the tab bar dock underneath
the main nav instead of below it, and scrollIntoView({block:'start'})
on tab click landed newly-active panel content partially hidden behind
the main nav. Fixed 2026-07: this bug shipped on all 11 PH deep-dive
pages and is a shared-file issue, not a per-page one. */
position:sticky; top:var(--nav-height); z-index:80;
background:#fff;
border-bottom:1px solid var(--hairline);
box-shadow:0 2px 12px rgba(2,62,138,.07);
}
[data-theme="dark"] .tab-nav{ background:var(--nav-dark); border-bottom-color:rgba(255,255,255,.08); }
.tab-nav-inner{
max-width:1200px; margin:0 auto; padding:0 clamp(1.2rem,4vw,3rem);
display:flex; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; gap:0;
}
.tab-nav-inner::-webkit-scrollbar{ display:none; }
/* Scroll-fade cues — the tab bar's own scrollbar is intentionally hidden,
so with no other affordance a mouse/keyboard user has no way to tell
(or reach) tabs cut off past the visible edge, especially at narrower
widths. sunburnt-shared.js toggles .show-fade-left/.show-fade-right on
.tab-nav based on actual scroll position; wheel scroll is also mapped
to horizontal there so a normal mouse wheel/trackpad works. */
.tab-nav::before, .tab-nav::after{
content:""; position:absolute; top:0; bottom:0; width:2.75rem;
pointer-events:none; opacity:0; transition:opacity .18s ease; z-index:1;
}
.tab-nav::before{ left:0; background:linear-gradient(to right, #fff, transparent); }
.tab-nav::after{ right:0; background:linear-gradient(to left, #fff, transparent); }
.tab-nav.show-fade-left::before{ opacity:1; }
.tab-nav.show-fade-right::after{ opacity:1; }
[data-theme="dark"] .tab-nav::before{ background:linear-gradient(to right, var(--nav-dark), transparent); }
[data-theme="dark"] .tab-nav::after{ background:linear-gradient(to left, var(--nav-dark), transparent); }
.tab-btn{
flex-shrink:0; display:inline-flex; align-items:center; gap:.4rem;
padding:.9rem 1.1rem; font-family:'IBM Plex Mono', monospace;
font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
color:var(--muted); background:none; border:none; border-bottom:3px solid transparent;
cursor:pointer; white-space:nowrap; transition:color .15s ease, border-color .15s ease;
min-height:48px;
}
.tab-btn:hover{ color:var(--ocean); }
.tab-btn.active{ color:var(--ocean); border-bottom-color:var(--ocean); }
[data-theme="dark"] .tab-btn{ color:rgba(255,255,255,.5); }
[data-theme="dark"] .tab-btn:hover{ color:var(--aqua); }
[data-theme="dark"] .tab-btn.active{ color:var(--aqua); border-bottom-color:var(--aqua); }
.tab-btn svg{ width:14px; height:14px; stroke:currentColor; stroke-width:2; fill:none; flex-shrink:0; }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }
/* ============================================================
13a. PAGE BYLINE — "By Apollo · Last Surveyed [date]"
Locked EEAT rule (factsheet §8d): every content page carries a
visible byline linking to about-us.html, plus a Last Surveyed
date matched to the page's dateModified in schema. Exempt: pure
utility/legal pages (privacy, disclaimer, 404).
============================================================ */
.page-byline{
font-family:'IBM Plex Mono', monospace;
font-size:.72rem;
color:rgba(255,255,255,.6);
margin-top:1rem;
}
.page-byline a{ color:var(--aqua); text-decoration:none; font-weight:700; }
.page-byline a:hover{ color:#fff; }
.page-byline .sep{ margin:0 .5rem; opacity:.6; }
/* ============================================================
14. RESPONSIVE LAYERING — tablet and up
Everything above is the mobile baseline. From here down we
ADD complexity for larger viewports. Nothing above should ever
be wrapped in a max-width query — see the header note.
860px specifically (not the usual 768 tablet breakpoint): this
nav has six links + theme toggle + newsletter CTA, and 768px
left a real danger zone where that has to fit next to the logo
without wrapping or overflowing. 860px is what was actually
confirmed via visual demo and screenshot review when the mobile
nav was locked — this rule now matches that, not a generic default.
============================================================ */
/* Hide desktop theme control in the mobile header — scoped to the
direct child of .nav only, so the drawer's own theme toggle
(.drawer-footer .theme-toggle, §11) is untouched. Without this,
the mobile header had to fit brand + theme toggle + emergency pill
+ hamburger in one row, which overflowed and pushed the hamburger
off-canvas. Fixed 2026-07. */
.nav > .theme-toggle{
display:none;
}
/* Mobile header must fit inside narrow phone viewports (down to ~320px).
Mobile-first: the tight/icon-only state below IS the baseline — no
max-width query, per the locked methodology at the top of this file.
Brand + Emergency pill + hamburger alone (theme-toggle already hidden
above) still overflow ~375px screens at the original desktop-locked
gap/padding, so this baseline trims spacing and collapses the
Emergency pill to icon-only. Restored to full size at 420px, and
restored to the ORIGINAL locked desktop gap/padding at 860px so
nothing here touches desktop spacing. */
.nav{
gap:.5rem;
padding:.75rem;
}
.nav > .brand{
min-width:0;
gap:.5rem;
font-size:.68rem;
letter-spacing:.06em;
line-height:1.25;
}
.nav > .brand .compass{
width:28px;
height:28px;
flex-shrink:0;
}
.nav > .emergency-pill{
width:48px;
padding:0;
justify-content:center;
font-size:0;
}
@media (min-width:420px){
.nav{
gap:.75rem;
padding-left:1rem;
padding-right:1rem;
}
.nav > .brand{
min-width:auto;
gap:.7rem;
font-size:.8rem;
letter-spacing:.1em;
line-height:normal;
}
.nav > .brand .compass{
width:32px;
height:32px;
}
.nav > .emergency-pill{
width:auto;
padding:0 .9rem;
justify-content:flex-start;
font-size:.72rem;
}
}
@media (min-width:860px){
.links{ display:flex; align-items:center; gap:1.2rem; }
.nav > .theme-toggle{ display:inline-flex; }
.nav-cta{ display:inline-block; }
.hamburger-btn, .emergency-pill{ display:none; }
/* Restore the original locked desktop spacing — the 420px tightening
above is a mobile/narrow-tablet-only adjustment and was never meant
to touch desktop, which was confirmed via visual demo at these
values (factsheet §1). */
.nav{
gap:1.5rem;
padding:1rem clamp(1.2rem, 4vw, 3rem);
}
}
@media (min-width:1024px){
.section{ padding-left:clamp(2rem, 4vw, 3rem); padding-right:clamp(2rem, 4vw, 3rem); }
}
@media (min-width:1280px){
.section{ max-width:1280px; }
}
/* ============================================================
14. SITE FOOTER
Locked sitewide — identical on every page (§8c consistency
rule). Previously duplicated inside each page's own