/* ============================================================
MY SECOND COUNTRY — SHARED DESIGN SYSTEM (foundation)
"Broadsheet Ledger", visual-first.
Extracted verbatim from broadsheet-ledger-v5.html (the approved,
settled homepage and canonical source of truth).
This file is FOUNDATION ONLY: tokens, base, layout, type roles,
buttons, the four provenance components, skip link, focus,
and the full animation system (reveal / image-reveal / hero-load
/ parallax CSS) with prefers-reduced-motion fully disabling it.
Shared SECTIONS (nav, footer, fence, breadcrumb, CTA band,
cited ledger row, comparison table, sources list, benefit block,
scenario chips) are built gate by gate (gates 1-11) and appended
as they lock. Page-unique section CSS lives in each page mockup.
Fonts (load in each page ):
Newsreader (display), Inter (UI/body), JetBrains Mono (figures).
============================================================ */
/* ============================================================
DESIGN TOKENS
============================================================ */
:root {
/* Surface palette — three bands for quiet vertical rhythm */
--paper: #FCFCFC; /* base near-white */
--paper-warm: #FAF7F1; /* warm off-white */
--paper-stone: #F2EFE8; /* faint warm stone */
--paper-2: #F7F4EE; /* footer */
--surface: #FFFFFF;
--ink: #1A1813;
--ink-soft: #46423A;
--stone: #6E675C;
--hairline-soft: #E6E3DC;
--accent: #1D3A5F;
--accent-dark: #13283F;
--tint-clay: #EEF0F4;
/* The one warm POP accent (terracotta). Ink-blue stays the primary;
this is the ~10% pop (waypoint dots, place tags, highlights). */
--pop: #BC5A36; /* terracotta — fills, marks, dots */
--pop-ink: #9C4329; /* darker terracotta for text on light surfaces (AA) */
--f-display: 'Newsreader', Georgia, serif;
--f-ui: 'Inter', system-ui, sans-serif;
--f-mono: 'JetBrains Mono', 'Courier New', monospace;
/* ONE easing for everything */
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--radius-card: 30px;
--radius-btn: 999px;
/* sticky offset = global nav height (gate 1). Used by elements that
stick directly beneath the nav, e.g. the comparison-table header
(gate 8). Keep in sync with the .site-header rendered height. */
--nav-h: 79px;
/* Locked type scale — one size per role */
--t-eyebrow: 0.72rem; /* overline / eyebrow */
--t-meta: 0.75rem; /* provenance, mono labels */
--t-bodysm: 0.875rem; /* secondary body, footer links */
--t-body: 1rem; /* body prose */
--t-lead: 1.125rem; /* standfirst base */
--t-sub: 1.5rem; /* sub-headline / step title / h3 */
}
/* ============================================================
RESET & BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
background: var(--paper);
color: var(--ink);
font-family: var(--f-ui);
font-size: var(--t-body);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
img {
display: block;
max-width: 100%;
height: auto;
}
/* ============================================================
LAYOUT
============================================================ */
.shell {
max-width: 1240px;
margin: 0 auto;
padding: 0 32px;
}
@media (max-width: 600px) {
.shell { padding: 0 20px; }
}
/* ============================================================
TYPOGRAPHY — locked roles
Newsreader uses opsz axis + consistent negative tracking.
Each headline size gets one pairing used everywhere.
============================================================ */
/* DISPLAY HERO: ~5.5rem @ wide, 2.75rem @ narrow */
.display-hero {
font-family: var(--f-display);
font-size: clamp(2.75rem, 6.5vw, 5.5rem);
font-optical-sizing: auto;
font-weight: 400;
line-height: 1.03;
color: var(--ink);
letter-spacing: -0.035em;
}
/* DISPLAY SECTION: ~3.75rem @ wide, 2.25rem @ narrow */
.display-section {
font-family: var(--f-display);
font-size: clamp(2.25rem, 5vw, 3.75rem);
font-optical-sizing: auto;
font-weight: 400;
line-height: 1.05;
color: var(--ink);
letter-spacing: -0.03em;
}
/* DISPLAY MID / benefit headlines: ~2.75rem @ wide, 1.75rem @ narrow */
.display-mid,
.benefit-headline {
font-family: var(--f-display);
font-size: clamp(1.75rem, 3.5vw, 2.75rem);
font-optical-sizing: auto;
font-weight: 400;
line-height: 1.08;
color: var(--ink);
letter-spacing: -0.028em;
}
/* SUB-HEADLINE / step titles / h3 */
.h3,
.step-title {
font-family: var(--f-display);
font-size: var(--t-sub);
font-optical-sizing: auto;
font-weight: 400;
line-height: 1.18;
color: var(--ink);
letter-spacing: -0.018em;
}
/* STANDFIRST / lead — Inter, ~1.125–1.2rem, ~60–68ch */
.standfirst {
font-family: var(--f-ui);
font-size: clamp(var(--t-lead), 1.5vw, 1.2rem);
font-weight: 400;
color: var(--ink-soft);
line-height: 1.58;
max-width: 62ch;
}
/* BODY PROSE — Inter, 1rem, ~60–68ch */
.body-prose {
font-family: var(--f-ui);
font-size: var(--t-body);
color: var(--ink-soft);
line-height: 1.68;
max-width: 62ch;
}
/* EYEBROW / overline — ONE consistent treatment everywhere */
.overline {
font-family: var(--f-ui);
font-size: var(--t-eyebrow);
font-weight: 500;
color: var(--stone);
letter-spacing: 0.14em;
text-transform: uppercase;
display: block;
margin-bottom: 18px;
}
/* FOUNDERS' NOTE — Newsreader italic */
.analyst-note {
font-family: var(--f-display);
font-size: clamp(1.5rem, 2.5vw, 2rem);
font-optical-sizing: auto;
font-weight: 400;
font-style: italic;
color: var(--ink-soft);
line-height: 1.38;
letter-spacing: -0.018em;
}
/* prevent long unbroken words clipping at narrow widths (a11y/responsive) */
.display-hero, .display-section, .display-mid, .benefit-headline, .h3, .step-title { overflow-wrap: break-word; }
.num {
font-family: var(--f-mono);
font-variant-numeric: tabular-nums;
}
/* ============================================================
BUTTONS
(incl. the over-photo "light" variants used on dark bands)
============================================================ */
.btn-primary {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--accent);
color: var(--paper);
font-family: var(--f-ui);
font-size: var(--t-body);
font-weight: 700;
padding: 12px 28px;
border: 1.5px solid var(--accent);
border-radius: var(--radius-btn);
cursor: pointer;
text-decoration: none;
transition:
background 150ms var(--ease),
border-color 150ms var(--ease),
color 150ms var(--ease),
transform 150ms var(--ease),
box-shadow 150ms var(--ease);
min-height: 44px;
white-space: nowrap;
}
.btn-primary:hover,
.btn-primary:focus-visible {
background: var(--accent-dark);
border-color: var(--accent-dark);
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(26,24,19,0.12);
}
.btn-primary:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.btn-ghost {
display: inline-flex;
align-items: center;
background: transparent;
color: var(--ink);
font-family: var(--f-ui);
font-size: var(--t-body);
font-weight: 700;
padding: 11px 27px;
border: 1.5px solid var(--stone);
border-radius: var(--radius-btn);
cursor: pointer;
text-decoration: none;
transition:
border-color 150ms var(--ease),
color 150ms var(--ease),
transform 150ms var(--ease),
box-shadow 150ms var(--ease);
min-height: 44px;
white-space: nowrap;
}
.btn-ghost:hover,
.btn-ghost:focus-visible {
border-color: var(--accent);
color: var(--accent);
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(26,24,19,0.08);
}
.btn-ghost:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.text-link {
color: var(--accent);
text-decoration: none;
font-family: var(--f-ui);
font-size: var(--t-body);
font-weight: 500;
}
.text-link:hover,
.text-link:focus-visible { text-decoration: underline; }
.text-link:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 2px;
}
.action-row {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
/* Buttons over dark photo bands */
.btn-primary-light {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--paper);
color: var(--accent);
font-family: var(--f-ui);
font-size: var(--t-body);
font-weight: 700;
padding: 12px 28px;
border: 1.5px solid var(--paper);
border-radius: var(--radius-btn);
cursor: pointer;
text-decoration: none;
transition:
background 150ms var(--ease),
color 150ms var(--ease),
transform 150ms var(--ease),
box-shadow 150ms var(--ease);
min-height: 44px;
white-space: nowrap;
}
.btn-primary-light:hover,
.btn-primary-light:focus-visible {
background: #F0EDE5;
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(26,24,19,0.18);
}
.btn-primary-light:focus-visible {
outline: 2px solid var(--paper);
outline-offset: 3px;
}
.text-link-light {
color: rgba(252,252,252,0.85);
text-decoration: none;
font-family: var(--f-ui);
font-size: var(--t-body);
font-weight: 500;
min-height: 44px;
display: inline-flex;
align-items: center;
}
.text-link-light:hover,
.text-link-light:focus-visible {
color: var(--paper);
text-decoration: underline;
}
.text-link-light:focus-visible {
outline: 2px solid var(--paper);
outline-offset: 2px;
border-radius: 2px;
}
/* ============================================================
PROVENANCE COMPONENTS
The four first-class data-credibility components.
============================================================ */
/* -- DataFigure -- */
.df {
display: grid;
grid-template-areas:
"label val"
"prov prov"
"note note";
grid-template-columns: 1fr auto;
gap: 0;
padding: 14px 0;
border-bottom: 1px solid var(--hairline-soft);
}
.df:last-child { border-bottom: none; }
.df-label {
grid-area: label;
font-family: var(--f-ui);
font-size: var(--t-bodysm);
color: var(--ink-soft);
padding-right: 16px;
align-self: center;
line-height: 1.4;
}
.df-val {
grid-area: val;
text-align: right;
align-self: center;
}
.df-val .num {
font-family: var(--f-mono);
font-size: 1.125rem;
font-weight: 500;
color: var(--ink);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.df-unit {
font-family: var(--f-mono);
font-size: var(--t-meta);
color: var(--stone);
margin-left: 4px;
font-variant-numeric: tabular-nums;
}
.df-prov {
grid-area: prov;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-top: 6px;
}
.df-note {
grid-area: note;
font-family: var(--f-ui);
font-size: var(--t-meta);
color: var(--stone);
margin-top: 4px;
font-style: italic;
line-height: 1.4;
}
/* -- ConfidenceMark -- */
.conf {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--f-mono);
font-size: var(--t-meta);
color: var(--stone);
white-space: nowrap;
}
.conf svg { flex-shrink: 0; }
/* -- CitationChip -- */
.cite {
display: inline-flex;
align-items: center;
font-family: var(--f-mono);
font-size: 0.72rem;
color: var(--accent);
background: transparent;
border: 1px solid var(--stone);
border-radius: 4px;
padding: 4px 10px;
cursor: pointer;
min-height: 44px;
min-width: 44px;
text-decoration: none;
transition: border-color 150ms var(--ease);
font-variant-numeric: tabular-nums;
line-height: 1.3;
text-align: left;
}
.cite:hover,
.cite:focus-visible { border-color: var(--accent); }
.cite:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.cite-panel-wrap {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 250ms var(--ease);
width: 100%;
margin-top: 0;
grid-column: 1 / -1;
}
.cite-panel-wrap.open {
grid-template-rows: 1fr;
margin-top: 8px;
}
.cite-panel-inner { overflow: hidden; }
.cite-panel {
background: var(--tint-clay);
border: 1px solid var(--hairline-soft);
border-radius: 4px;
padding: 12px 16px;
font-family: var(--f-ui);
font-size: var(--t-bodysm);
color: var(--ink-soft);
line-height: 1.5;
}
.cite-panel blockquote {
border-left: 2px solid var(--hairline-soft);
padding-left: 12px;
margin: 8px 0;
color: var(--stone);
font-style: italic;
}
.cite-panel a {
color: var(--accent);
text-decoration: underline;
font-size: var(--t-meta);
font-family: var(--f-mono);
word-break: break-all;
}
.cite-panel a:hover,
.cite-panel a:focus-visible { color: var(--accent-dark); }
.cite-panel a:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* -- CitationChip: inline variant (tiny, sits in prose) -- */
.cite-inline {
display: inline-flex;
align-items: center;
font-family: var(--f-mono);
font-size: 0.68rem;
color: var(--accent);
background: transparent;
border: 1px solid var(--stone);
border-radius: 4px;
padding: 3px 8px;
cursor: pointer;
min-height: 28px;
min-width: 28px;
text-decoration: none;
transition: border-color 150ms var(--ease);
font-variant-numeric: tabular-nums;
line-height: 1.3;
vertical-align: middle;
margin-left: 4px;
}
.cite-inline:hover,
.cite-inline:focus-visible { border-color: var(--accent); }
.cite-inline:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* -- LiabilityNote (the fence) -- */
.liability-note {
border-top: 1px solid var(--hairline-soft);
border-bottom: 1px solid var(--hairline-soft);
padding: 14px 0;
display: flex;
align-items: flex-start;
gap: 12px;
}
.liability-mark {
font-family: var(--f-mono);
font-size: var(--t-meta);
color: var(--stone);
letter-spacing: 0.06em;
white-space: nowrap;
padding-top: 2px;
text-transform: uppercase;
}
.liability-text {
font-family: var(--f-ui);
font-size: var(--t-body);
color: var(--stone);
line-height: 1.5;
}
/* ============================================================
SKIP LINK
============================================================ */
.skip-link {
position: absolute;
top: -100%;
left: 16px;
z-index: 9999;
background: var(--accent);
color: var(--paper);
font-family: var(--f-ui);
font-size: var(--t-body);
font-weight: 500;
padding: 12px 20px;
border-radius: var(--radius-btn);
text-decoration: none;
transition: top 150ms;
}
.skip-link:focus-visible {
top: 16px;
outline: 2px solid var(--paper);
outline-offset: 3px;
}
/* ============================================================
FOCUS VISIBLE GLOBAL
============================================================ */
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* ============================================================
ILLUSTRATION — engraving treatment (the site's image language)
The site uses ink-blue steel-engraving illustration in place of
photography: ink-blue (#1D3A5F) line on warm paper, airy, with
edges that dissolve into the page. `mix-blend-mode: multiply`
drops the engraving's warm-paper ground onto whatever section
band sits behind it, so an engraving melts into the page with no
card, no hard frame, and no scrim.
Canonical generation recipe (Codex imagen), reused for EVERY
scene so they all match (the founder-approved "fine steel"):
"fine steel-engraving and banknote line work, delicate parallel
hatching and stippling, kept airy with large areas of bare
luminous paper; edges dissolve softly into the paper (open
vignette, no hard border); single colour ink-blue #1D3A5F on a
PURE WHITE #FFFFFF ground; dreamy, archival."
The ground MUST be pure white (#FFFFFF), not cream: multiply only
fully hides a white ground. If a generated scene comes back on
cream, white-balance the ground to #FFFFFF before use (a per-
channel white-point fix). Warmth comes from the PAGE (warm band
or a soft sunlight glow), never from the asset.
SUBJECTS rotate across GLOBAL relocation destinations (the product
is global, not Greece-only): Mediterranean hill/coast towns,
Portuguese tiled hillsides, Japanese coastal/temple villages,
alpine villages, Adriatic harbours, colonial Latin-American
streets, Scandinavian fjord towns, etc. The STYLE stays constant;
only the place varies, so the library reads as one hand drawing
the whole world.
============================================================ */
.engraving {
display: block;
width: 100%;
height: auto;
mix-blend-mode: multiply;
}
/* ============================================================
SCROLL REVEAL — unified system
One distance (24px), one duration (700ms), one easing.
Stagger: 80ms × step, capped at 6.
============================================================ */
[data-reveal] {
opacity: 0;
transform: translateY(24px);
transition:
opacity 700ms var(--ease),
transform 700ms var(--ease);
}
[data-reveal].in {
opacity: 1;
transform: none;
}
html:not(.js) [data-reveal],
html:not(.js) [data-img-reveal] {
opacity: 1;
transform: none;
}
[data-reveal][style*="--i:0"] { transition-delay: 0ms; }
[data-reveal][style*="--i:1"] { transition-delay: 80ms; }
[data-reveal][style*="--i:2"] { transition-delay: 160ms; }
[data-reveal][style*="--i:3"] { transition-delay: 240ms; }
[data-reveal][style*="--i:4"] { transition-delay: 320ms; }
[data-reveal][style*="--i:5"] { transition-delay: 400ms; }
[data-reveal][style*="--i:6"] { transition-delay: 480ms; }
[data-reveal][style*="--i:7"] { transition-delay: 560ms; }
/* ============================================================
IMAGE REVEAL — uniform: scale(1.05)→1, opacity, 800ms, same easing
============================================================ */
[data-img-reveal] img {
opacity: 0;
transform: scale(1.05);
transition:
opacity 800ms var(--ease),
transform 800ms var(--ease);
will-change: transform, opacity;
}
[data-img-reveal].img-in img {
opacity: 1;
transform: scale(1);
will-change: auto;
}
html:not(.js) [data-img-reveal] img {
opacity: 1;
transform: none;
will-change: auto;
}
/* ============================================================
HERO LOAD SEQUENCE — same easing, same 80ms stagger
============================================================ */
.hero-load {
opacity: 0;
transform: translateY(24px);
transition:
opacity 700ms var(--ease),
transform 700ms var(--ease);
}
.hero-load.loaded {
opacity: 1;
transform: none;
}
html:not(.js) .hero-load {
opacity: 1;
transform: none;
}
/* ============================================================
REDUCED MOTION — fully disables ALL motion
============================================================ */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
[data-reveal] {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
[data-img-reveal],
[data-img-reveal] img {
opacity: 1 !important;
transform: none !important;
transition: none !important;
will-change: auto !important;
}
.hero-load {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.btn-primary:hover,
.btn-ghost:hover,
.btn-primary-light:hover,
.shortlist-card:hover,
.benefit-photo-wrap:hover,
.who-photo-wrap:hover {
transform: none !important;
box-shadow: none !important;
}
.cite-panel-wrap { transition-duration: 10ms; }
* {
transition-duration: 10ms !important;
animation-duration: 10ms !important;
}
}
/* ============================================================
RESPONSIVE: prevent horizontal overflow at small widths
(citation chips wrap rather than push the layout)
============================================================ */
@media (max-width: 480px) {
.cite, .cite-inline {
white-space: normal;
word-break: break-word;
}
}
/* ============================================================
SHARED SECTION LIBRARY
Built and locked gate by gate; every page inherits these.
============================================================ */
/* ------------------------------------------------------------
GLOBAL FOOTER (gate 3 — locked 2026-06-27)
Engraving with nested content: the wordmark + link columns sit in
the open sky of the coast engraving (the coast frames from below
and both sides); the liability fence + copyright/legal sit on a
plain paper strip below the image. The engraving ground is pure
white so background-blend-mode: multiply drops it onto the paper.
Markup reference: mockups/gate-03-footer.html
------------------------------------------------------------ */
.footer-eng {
position: relative;
background: var(--paper);
border-top: 1px solid var(--hairline-soft);
overflow: hidden;
}
.footer-scene {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: clamp(72px, 11vw, 168px) 0 clamp(10px, 1.6vw, 22px);
min-height: clamp(460px, 50vw, 700px);
background-color: var(--paper);
background-image:
linear-gradient(to bottom, rgba(252,252,252,0.55) 0%, rgba(252,252,252,0) 44%),
url("img/engravings/coast-wide.png");
background-repeat: no-repeat, no-repeat;
background-position: top center, bottom center;
background-size: 100% 100%, 100% auto;
background-blend-mode: normal, multiply;
}
.footer-top {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1.25fr 2fr;
gap: clamp(32px, 5vw, 80px);
align-items: start;
}
@media (max-width: 820px) {
.footer-top { grid-template-columns: 1fr; gap: 40px; }
}
.footer-brand-wordmark {
display: inline-flex;
align-items: baseline;
font-family: var(--f-display);
font-optical-sizing: auto;
font-weight: 600;
font-size: 2.1rem;
color: var(--ink);
letter-spacing: -0.02em;
text-decoration: none;
}
.footer-brand-wordmark::after {
content: "";
width: 7px; height: 7px;
border-radius: 999px;
background: var(--pop);
margin-left: 9px;
align-self: center;
flex: 0 0 auto;
}
.footer-brand-wordmark:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.footer-tagline {
font-family: var(--f-ui);
font-size: var(--t-bodysm);
color: var(--stone);
line-height: 1.6;
max-width: 34ch;
margin-top: 14px;
}
.footer-cols {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(24px, 3vw, 44px);
}
@media (max-width: 520px) {
.footer-cols { grid-template-columns: 1fr 1fr; gap: 28px; }
/* three columns in a two-up grid: the third spans the full row so it
does not sit orphaned at half width. */
.footer-cols > div:nth-child(3) { grid-column: 1 / -1; }
}
.footer-col-label {
font-family: var(--f-mono);
font-size: var(--t-meta);
color: var(--stone);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 16px;
display: block;
}
.footer-links {
list-style: none;
display: flex;
flex-direction: column;
gap: 11px;
}
.footer-links a {
font-family: var(--f-ui);
font-size: var(--t-bodysm);
font-weight: 400;
color: var(--ink-soft);
text-decoration: none;
transition: color 150ms var(--ease);
}
.footer-links a:hover,
.footer-links a:focus-visible { color: var(--accent); text-decoration: underline; }
.footer-links a:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 2px;
}
.footer-legalstrip {
position: relative;
z-index: 1;
background: var(--paper);
border-top: 1px solid var(--hairline-soft);
padding: clamp(22px, 2.6vw, 30px) 0 clamp(28px, 3.5vw, 44px);
}
.footer-fence {
font-family: var(--f-mono);
font-size: var(--t-meta);
color: var(--stone);
line-height: 1.6;
}
.footer-bottom {
margin-top: 14px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px 28px;
flex-wrap: wrap;
}
.footer-copy {
font-family: var(--f-mono);
font-size: var(--t-meta);
color: var(--ink-soft);
font-variant-numeric: tabular-nums;
}
.footer-legal {
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
}
.footer-legal a {
font-family: var(--f-ui);
font-size: var(--t-bodysm);
color: var(--ink-soft);
text-decoration: none;
transition: color 150ms var(--ease);
}
.footer-legal a:hover,
.footer-legal a:focus-visible { color: var(--accent); text-decoration: underline; }
.footer-legal a:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 2px;
}
@media (max-width: 520px) {
.footer-scene {
padding-top: clamp(36px, 9vw, 60px);
padding-bottom: 60vw;
min-height: 0;
}
}
/* ------------------------------------------------------------
GLOBAL NAV (gate 1 — locked 2026-06-27)
Three zones: wordmark left / links centered / "Build my
shortlist" pill right. Sticky, solid paper (no glassmorphism),
hairline base. Collapses to an accessible toggle menu < 860px;
toggle behaviour is in _msc-system.js. (Product surfaces use a
focused variant with a step indicator — gate 2.)
Markup reference: mockups/gate-01-nav.html
------------------------------------------------------------ */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: var(--paper);
border-bottom: 1px solid var(--hairline-soft);
padding: 16px 0;
}
/* once scrolled off the hero, the sticky nav lifts with a soft shadow so it
reads as floating over the page rather than painted onto it. */
.site-header.is-scrolled { box-shadow: 0 6px 22px -10px rgba(26, 24, 19, 0.13); }
@media (prefers-reduced-motion: no-preference) {
.site-header { transition: box-shadow 280ms var(--ease); }
}
.site-header-inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 16px;
}
/* wordmark = monogram seal + a vertical hairline rule + the Newsreader
text masthead (gate 12 update 2026-06-27, founder): icon left of the
name, divider between; the old terracotta end-dot was removed.
Markup: ![]()
… */
.brand-wordmark {
display: inline-flex;
align-items: center;
justify-self: start;
font-family: var(--f-display);
font-optical-sizing: auto;
font-weight: 600;
font-size: 1.8rem;
color: var(--ink);
letter-spacing: -0.02em;
text-decoration: none;
white-space: nowrap;
}
.brand-icon { width: 36px; height: 36px; flex: 0 0 auto; display: block; }
.brand-rule { width: 1px; height: 26px; background: var(--hairline-soft); margin: 0 14px; flex: 0 0 auto; }
.brand-name { line-height: 1; }
.brand-wordmark:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.nav-links {
display: flex;
align-items: center;
gap: clamp(20px, 2.4vw, 34px);
justify-self: center;
}
.nav-link {
font-family: var(--f-ui);
font-size: 1rem;
font-weight: 700;
color: var(--ink);
text-decoration: none;
transition: color 150ms var(--ease);
}
.nav-link:hover,
.nav-link:focus-visible { color: var(--accent); }
.nav-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.nav-cta { justify-self: end; display: flex; }
.nav-toggle { display: none; }
.nav-menu { display: none; }
@media (max-width: 860px) {
.site-header-inner { grid-template-columns: 1fr auto; }
.nav-links { display: none; }
.nav-cta { display: none; }
.nav-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
justify-self: end;
width: 44px;
height: 44px;
border: 1px solid var(--stone);
border-radius: var(--radius-btn);
background: transparent;
color: var(--ink);
cursor: pointer;
transition: border-color 150ms var(--ease), color 150ms var(--ease);
}
.nav-toggle:hover { border-color: var(--accent); color: var(--accent); }
.nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-menu {
display: flex;
flex-direction: column;
gap: 2px;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--hairline-soft);
}
.nav-menu[hidden] { display: none; }
.nav-menu .nav-link { padding: 13px 2px; font-size: 1.125rem; }
.nav-menu .btn-primary { margin-top: 12px; justify-content: center; width: 100%; }
}
/* ------------------------------------------------------------
BREADCRUMB (gate 5 — locked 2026-06-27)
Continent / country / region / town path; last item is current.
On dossier, regime, comparison, and sources pages.
Markup reference: mockups/gate-04-05-11-components.html
------------------------------------------------------------ */
.breadcrumb { font-family: var(--f-ui); font-size: var(--t-bodysm); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.breadcrumb li { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.breadcrumb [aria-current="page"] { overflow-wrap: break-word; }
.breadcrumb a { color: var(--ink-soft); text-decoration: none; transition: color 150ms var(--ease); }
.breadcrumb a:hover,
.breadcrumb a:focus-visible { color: var(--accent); text-decoration: underline; }
.breadcrumb a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 500; }
.breadcrumb svg { color: var(--stone); flex-shrink: 0; }
/* ------------------------------------------------------------
SCENARIO CHIPS (gate 11 — locked 2026-06-27)
Single-select situation picker; native radios styled as pills
(keyboard + screen-reader friendly, no JS). Homepage "who it's
for" and the screener's first step.
Markup reference: mockups/gate-04-05-11-components.html
------------------------------------------------------------ */
.chip-row { display: flex; flex-wrap: wrap; gap: 12px; }
.chip {
position: relative;
display: inline-flex;
align-items: center;
font-family: var(--f-ui);
font-size: var(--t-bodysm);
font-weight: 500;
color: var(--ink);
background: var(--surface);
border: 1px solid var(--hairline-soft);
border-radius: var(--radius-btn);
padding: 11px 20px;
min-height: 44px;
cursor: pointer;
transition:
border-color 150ms var(--ease),
background 150ms var(--ease),
color 150ms var(--ease),
transform 150ms var(--ease),
box-shadow 150ms var(--ease);
}
.chip input {
position: absolute;
inset: 0;
opacity: 0;
margin: 0;
cursor: pointer;
}
.chip:hover {
border-color: var(--accent);
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(26,24,19,0.06);
}
.chip:has(input:checked) {
background: var(--accent);
color: var(--paper);
border-color: var(--accent);
}
.chip:has(input:focus-visible) {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* ------------------------------------------------------------
CTA BAND (gate 6 — imageless update 2026-06-28)
"Start with your situation" invitation card: imageless, type-led.
A quiet warm broadsheet card framed by a fine inset rule for craft;
the CTA is an ACTION surface, so per the register split it stays
type-and-evidence-led (no engraving) on the homepage and every inner
page. Eyebrow uses .cta-eyebrow. Markup: mockups/gate-06-cta-band.html
(was an engraving terrace until the founder's homepage imageless call;
the cta-band.png asset is retained but no longer referenced.)
------------------------------------------------------------ */
.cta-section {
background: var(--paper);
padding: clamp(64px, 9vw, 128px) 0;
border-top: 1px solid var(--hairline-soft);
}
.cta-card {
position: relative;
isolation: isolate;
overflow: hidden;
border-radius: var(--radius-card);
border: 1px solid var(--hairline-soft);
min-height: clamp(420px, 46vw, 640px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: clamp(18px, 2.2vw, 26px);
padding: clamp(48px, 7vw, 96px) clamp(24px, 6vw, 88px);
background-color: var(--paper-warm);
background-image: none;
}
/* imageless, type-led closing invitation: a quiet warm broadsheet card framed
by a fine inset rule for craft. The CTA is an ACTION surface, so per the
register split it stays type-and-evidence-led, no engraving. Founder-approved
on the homepage 2026-06-28; promoted from the homepage override into the system. */
.cta-card::before {
content: "";
position: absolute;
inset: clamp(13px, 1.5vw, 20px);
border: 1px solid var(--hairline-soft);
border-radius: calc(var(--radius-card) - 14px);
pointer-events: none;
z-index: 0;
}
.cta-card > * { position: relative; z-index: 1; }
.cta-eyebrow { margin-bottom: 0; }
.cta-headline { max-width: 20ch; margin: 0 auto; }
.cta-sub {
font-family: var(--f-ui);
font-size: clamp(var(--t-lead), 1.4vw, 1.18rem);
color: var(--ink-soft);
line-height: 1.55;
max-width: 50ch;
margin: 0 auto;
}
.cta-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
margin-top: 4px;
}
.cta-reassure {
font-family: var(--f-mono);
font-size: var(--t-meta);
color: var(--stone);
margin-top: 2px;
}
/* phone: keep the compact, centred, framed look; enlarge the paper
veil so the lower lines stay legible while the engraving still
frames the edges. */
@media (max-width: 520px) {
.cta-card {
padding-left: clamp(22px, 6vw, 32px);
padding-right: clamp(22px, 6vw, 32px);
background-image: none;
}
.cta-card::before { inset: 11px; }
}
/* ------------------------------------------------------------
PRODUCT / SCREENER NAV (gate 2 — locked 2026-06-27)
Focused variant for the build flow: wordmark (home/exit) left,
step indicator centered, "Save and exit" right. Product register:
minimal chrome, no marketing links, no choreography. Pair with the
minimal footer (the .footer-legalstrip alone, no engraving scene).
Markup reference: mockups/gate-02-product-nav.html
------------------------------------------------------------ */
.product-header {
position: sticky;
top: 0;
z-index: 50;
background: var(--paper);
border-bottom: 1px solid var(--hairline-soft);
padding: 14px 0;
}
.product-header-inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-areas: "brand progress exit";
align-items: center;
gap: 16px;
}
.product-brand { grid-area: brand; justify-self: start; }
.product-progress {
grid-area: progress;
display: flex;
flex-direction: column;
align-items: center;
gap: 7px;
}
.product-exit { grid-area: exit; justify-self: end; }
.product-steps { display: flex; gap: 6px; }
.product-step {
width: 30px;
height: 4px;
border-radius: 999px;
background: var(--hairline-soft);
}
.product-step.is-done,
.product-step.is-current { background: var(--accent); }
.product-step-label {
font-family: var(--f-mono);
font-size: var(--t-meta);
color: var(--stone);
letter-spacing: 0.04em;
}
.product-exit a {
font-family: var(--f-ui);
font-size: var(--t-bodysm);
font-weight: 700;
color: var(--ink-soft);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 7px;
transition: color 150ms var(--ease);
}
.product-exit a:hover,
.product-exit a:focus-visible { color: var(--accent); }
.product-exit a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
@media (max-width: 640px) {
.product-header-inner {
grid-template-columns: 1fr auto;
grid-template-areas:
"brand exit"
"progress progress";
min-width: 0;
max-width: 100%;
row-gap: 12px;
}
.product-brand,
.product-exit,
.product-progress {
min-width: 0;
}
.product-progress {
flex-direction: row;
align-items: center;
justify-content: space-between;
width: min(100%, calc(100vw - 40px));
}
.product-step-label {
min-width: 0;
text-align: right;
}
.product-step { width: 100%; }
.product-steps { flex: 1 1 auto; min-width: 0; gap: 6px; margin-right: 14px; }
}
/* ------------------------------------------------------------
BENEFIT + ENGRAVING BLOCK (gate 10 — locked 2026-06-27)
Alternating image/copy editorial block (homepage, methodology).
The figure is an engraving in a warm framed card; reverse swaps
the sides. On mobile the copy leads, the figure follows.
Markup reference: mockups/gate-10-benefit.html
------------------------------------------------------------ */
.benefit {
padding: clamp(64px, 9vw, 128px) 0;
border-top: 1px solid var(--hairline-soft);
}
.benefit-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 6vw, 88px);
align-items: center;
}
.benefit-grid--reverse .benefit-figure { order: 2; }
.benefit-grid--reverse .benefit-text { order: 1; }
.benefit-figure {
position: relative;
isolation: isolate;
overflow: hidden;
border-radius: var(--radius-card);
border: 1px solid var(--hairline-soft);
background: var(--paper-warm);
aspect-ratio: 4 / 3;
}
.benefit-figure .engraving {
width: 100%;
height: 100%;
object-fit: cover;
/* mix-blend-mode: multiply comes from .engraving */
}
.benefit-figure.no-img::after {
content: "benefit engraving";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--f-mono);
font-size: var(--t-meta);
color: var(--stone);
letter-spacing: 0.1em;
text-transform: uppercase;
opacity: 0.6;
}
.benefit-text {
display: flex;
flex-direction: column;
gap: 20px;
}
@media (max-width: 768px) {
.benefit-grid { grid-template-columns: 1fr; gap: 36px; }
.benefit-figure { order: 2; }
.benefit-text { order: 1; }
.benefit-grid--reverse .benefit-figure { order: 2; }
.benefit-grid--reverse .benefit-text { order: 1; }
}
/* ------------------------------------------------------------
FORM CONTROLS (locked 2026-06-27)
Shared v5 inputs / textarea / radio fieldset / submit. Reused by
the revenue sections below and by the screener (gate 21+).
------------------------------------------------------------ */
.field-label {
display: block;
font-family: var(--f-ui);
font-size: var(--t-meta);
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--stone);
margin-bottom: 8px;
}
.field-input {
width: 100%;
font-family: var(--f-ui);
font-size: var(--t-body);
color: var(--ink);
background: var(--paper);
border: 1px solid var(--hairline-soft);
border-radius: 10px;
padding: 12px 14px;
min-height: 48px;
transition: border-color 150ms var(--ease);
}
.field-input::placeholder { color: var(--stone); }
.field-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
textarea.field-input { min-height: 104px; resize: vertical; line-height: 1.5; }
.field-set { border: 1px solid var(--hairline-soft); border-radius: 12px; padding: 14px 16px 16px; margin: 0; }
.field-set legend { font-family: var(--f-ui); font-size: var(--t-bodysm); font-weight: 700; color: var(--ink); padding: 0 6px; }
.field-set label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-ui); font-size: var(--t-body); color: var(--ink-soft); margin: 6px 20px 0 0; }
.form-submit {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--f-ui);
font-size: var(--t-body);
font-weight: 700;
color: var(--paper);
background: var(--accent);
border: 1.5px solid var(--accent);
border-radius: var(--radius-btn);
padding: 12px 26px;
min-height: 48px;
cursor: pointer;
white-space: nowrap;
transition: background 150ms var(--ease), transform 150ms var(--ease), box-shadow 150ms var(--ease);
}
.form-submit:hover { background: var(--accent-dark); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(26,24,19,0.12); }
.form-submit:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* ------------------------------------------------------------
EMAIL CAPTURE (revenue, locked 2026-06-27)
Quiet always-on utility ("get told when these rules change"); near
the foot of high-intent data pages. v5-styled now; ports to
EmailCapture.astro at the unified v5 migration (preserve field
name `email`, label/id, , no JS).
Markup reference: mockups/revenue-sections-v5.html
------------------------------------------------------------ */
.email-capture {
margin: 2.5rem 0;
padding: clamp(22px, 3vw, 30px);
background: var(--surface);
border: 1px solid var(--hairline-soft);
border-radius: 18px;
}
.email-capture__heading { font-family: var(--f-display); font-optical-sizing: auto; font-weight: 400; font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.018em; color: var(--ink); margin: 0; }
.email-capture__note { font-family: var(--f-ui); font-size: var(--t-body); color: var(--ink-soft); line-height: 1.6; margin: 10px 0 0; max-width: 56ch; }
.email-capture__form { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-top: 20px; }
.email-capture__label { display: block; width: 100%; font-family: var(--f-ui); font-size: var(--t-meta); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--stone); }
.email-capture__input { flex: 1 1 16rem; font-family: var(--f-ui); font-size: var(--t-body); color: var(--ink); background: var(--paper); border: 1px solid var(--hairline-soft); border-radius: 10px; padding: 12px 14px; min-height: 48px; transition: border-color 150ms var(--ease); }
.email-capture__input::placeholder { color: var(--stone); }
.email-capture__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
.email-capture__submit {
display: inline-flex; align-items: center;
font-family: var(--f-ui); font-size: var(--t-body); font-weight: 700;
color: var(--paper); background: var(--accent); border: 1.5px solid var(--accent); border-radius: var(--radius-btn);
padding: 12px 24px; min-height: 48px; cursor: pointer; white-space: nowrap;
transition: background 150ms var(--ease), transform 150ms var(--ease), box-shadow 150ms var(--ease);
}
.email-capture__submit:hover { background: var(--accent-dark); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(26,24,19,0.12); }
.email-capture__submit:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* ------------------------------------------------------------
INTRO REQUEST (revenue surface, locked 2026-06-27)
Gated "talk to a vetted professional" form on the IFICI pages. The
two required fence lines (disclosure + framing, FENCE.md) sit as a
clay-tinted notice: visible + legible, never buried. v5-styled now;
ports to IntroRequest.astro at the unified v5 migration (preserve
field names situation/prior_residency/timeline + hidden page_id/
corridor, fieldset/legend, , fence lines verbatim, no JS,
INTRO_LIVE=false).
Markup reference: mockups/revenue-sections-v5.html
------------------------------------------------------------ */
.intro-request {
margin: 2.5rem 0;
padding: clamp(28px, 4vw, 40px);
background: var(--surface);
border: 1px solid var(--hairline-soft);
border-radius: 20px;
}
.intro-request__heading { font-family: var(--f-display); font-optical-sizing: auto; font-weight: 400; font-size: clamp(1.6rem, 2.6vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
.intro-request__what { font-family: var(--f-ui); font-size: var(--t-body); color: var(--ink-soft); line-height: 1.6; margin: 12px 0 0; max-width: 60ch; }
.intro-request__corridor { font-family: var(--f-mono); font-size: var(--t-meta); letter-spacing: 0.04em; color: var(--stone); margin: 14px 0 0; }
.intro-request__fence {
margin: 18px 0 0;
padding: 14px 16px;
background: var(--tint-clay);
border: 1px solid var(--hairline-soft);
border-radius: 10px;
}
.intro-request__disclosure { font-family: var(--f-ui); font-size: var(--t-bodysm); font-weight: 700; color: var(--ink-soft); line-height: 1.5; margin: 0; }
.intro-request__framing { font-family: var(--f-ui); font-size: var(--t-bodysm); color: var(--stone); line-height: 1.5; margin: 6px 0 0; }
.intro-request__form { display: flex; flex-direction: column; gap: 18px; margin-top: 22px; }
.intro-request__field { display: flex; flex-direction: column; }
.intro-request__label { display: block; font-family: var(--f-ui); font-size: var(--t-meta); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--stone); margin-bottom: 8px; }
.intro-request__input { width: 100%; font-family: var(--f-ui); font-size: var(--t-body); color: var(--ink); background: var(--paper); border: 1px solid var(--hairline-soft); border-radius: 10px; padding: 12px 14px; min-height: 48px; transition: border-color 150ms var(--ease); }
.intro-request__input::placeholder { color: var(--stone); }
textarea.intro-request__input { min-height: 104px; resize: vertical; line-height: 1.5; }
.intro-request__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
.intro-request__fieldset { border: 1px solid var(--hairline-soft); border-radius: 12px; padding: 14px 16px 16px; margin: 0; }
.intro-request__fieldset legend { font-family: var(--f-ui); font-size: var(--t-bodysm); font-weight: 700; color: var(--ink); padding: 0 6px; }
.intro-request__fieldset label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-ui); font-size: var(--t-body); color: var(--ink-soft); margin: 6px 20px 0 0; }
.intro-request__submit {
align-self: flex-start; display: inline-flex; align-items: center;
font-family: var(--f-ui); font-size: var(--t-body); font-weight: 700;
color: var(--paper); background: var(--accent); border: 1.5px solid var(--accent); border-radius: var(--radius-btn);
padding: 12px 26px; min-height: 48px; cursor: pointer;
transition: background 150ms var(--ease), transform 150ms var(--ease), box-shadow 150ms var(--ease);
}
.intro-request__submit:hover { background: var(--accent-dark); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(26,24,19,0.12); }
.intro-request__submit:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* ------------------------------------------------------------
CITED LEDGER + DOSSIER (gate 7 — locked 2026-06-27)
The dossier place header + the seven-dimension cited ledger. Each
row: label + mono value on one baseline, a quiet provenance line
(ConfidenceMark glyph + word, inline expandable CitationChip), an
optional note. Serif dimension headers; terracotta place tags.
Markup reference: mockups/gate-07-ledger.html
------------------------------------------------------------ */
.dossier { max-width: 720px; margin: 0 auto; padding: clamp(28px,4vw,44px) 0 clamp(64px,9vw,120px); }
.dossier-bc { margin-bottom: clamp(20px,3vw,30px); }
.dossier-head .display-section { margin: 8px 0 14px; }
.dossier-summary { font-family: var(--f-ui); font-size: clamp(var(--t-lead),1.4vw,1.18rem); color: var(--ink-soft); line-height: 1.55; max-width: 58ch; }
.dossier-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.dossier-tag { font-family: var(--f-mono); font-size: var(--t-meta); color: var(--pop-ink); border: 1px solid rgba(188,90,54,0.35); border-radius: 999px; padding: 5px 12px; }
.dossier-fence { margin: clamp(22px,3vw,30px) 0 0; }
.ledger { margin-top: clamp(20px,3vw,32px); }
.ledger-group { margin-top: clamp(28px,3.4vw,40px); }
.ledger-group:first-child { margin-top: clamp(8px,1.5vw,18px); }
.ledger-group__label {
display: block;
font-family: var(--f-display);
font-optical-sizing: auto;
font-weight: 400;
font-size: 1.35rem;
line-height: 1.2;
letter-spacing: -0.012em;
color: var(--ink);
padding-bottom: 12px;
margin-bottom: 4px;
border-bottom: 1px solid var(--hairline-soft);
}
.lrow { padding: 15px 0; border-bottom: 1px solid var(--hairline-soft); }
.ledger-group .lrow:last-child { border-bottom: none; padding-bottom: 4px; }
.lrow__top { display: grid; grid-template-columns: 1fr auto; column-gap: 28px; align-items: baseline; }
.lrow__label { font-family: var(--f-ui); font-size: var(--t-body); color: var(--ink); line-height: 1.45; }
.lrow__value { font-family: var(--f-mono); font-size: 1.1875rem; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.lrow__unit { font-family: var(--f-mono); font-size: var(--t-meta); font-weight: 400; color: var(--stone); margin-left: 4px; }
.lrow__prov { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 8px; }
.lrow__conf { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: var(--t-meta); color: var(--stone); white-space: nowrap; }
.lrow__conf svg { flex-shrink: 0; }
.lrow__sep { color: var(--hairline-soft); font-size: var(--t-meta); }
.cite.lrow__cite { border: none; background: none; padding: 5px 2px; min-width: 0; min-height: 44px; color: var(--stone); font-size: var(--t-meta); gap: 6px; }
.cite.lrow__cite::after {
content: ""; width: 6px; height: 6px; margin-left: 2px;
border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor;
transform: rotate(45deg) translateY(-1px);
transition: transform 200ms var(--ease);
}
.cite.lrow__cite[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(1px); }
.cite.lrow__cite:hover, .cite.lrow__cite:focus-visible { border: none; color: var(--accent); text-decoration: underline; }
.lrow__note { font-family: var(--f-ui); font-size: var(--t-bodysm); font-style: italic; color: var(--stone); line-height: 1.5; margin-top: 9px; max-width: 60ch; }
.lrow .cite-panel-wrap { margin-top: 0; }
.lrow .cite-panel-wrap.open { margin-top: 10px; }
.lrow .cite-panel { max-width: 60ch; }
.ledger-foot { margin-top: clamp(28px,4vw,44px); padding-top: 16px; border-top: 1px solid var(--hairline-soft); font-family: var(--f-mono); font-size: var(--t-meta); color: var(--stone); line-height: 1.6; }
/* ------------------------------------------------------------
COMPARISON TABLE (gate 8 — locked 2026-06-27)
Greece / Portugal / Spain across the same screened indicators.
Dimensions group the rows; each row is one indicator; each of the
three country cells is a full cited DataFigure (mono value +
ConfidenceMark glyph + word + expandable CitationChip with the
source excerpt + view-source link). Equal weight, neutral: no
country is highlighted, ranked, or recommended. Wide 4-column grid
on desktop with a sticky country header (offset by --nav-h); on
phones every indicator becomes a card with the three countries
stacked. Real cited data from packages/data/src/places/{gr,pt,es}.
Markup reference: mockups/gate-08-compare.html
------------------------------------------------------------ */
.compare { max-width: 1060px; margin: 0 auto; padding: clamp(28px,4vw,44px) 0 clamp(64px,9vw,120px); }
.compare-bc { margin-bottom: clamp(20px,3vw,30px); }
.compare-head .display-section { margin: 8px 0 14px; }
.compare-summary { font-family: var(--f-ui); font-size: clamp(var(--t-lead),1.4vw,1.18rem); color: var(--ink-soft); line-height: 1.55; max-width: 64ch; }
.compare-fence { margin: clamp(22px,3vw,30px) 0 0; }
/* country label inside each cell: spoken by screen readers on desktop
(so each value is announced with its country), shown as a visible
label only when the table reflows to cards on phones. */
.ccell-country {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.ctable { margin-top: clamp(22px,3vw,34px); }
/* shared 4-column grid: indicator + three countries */
.ctable-head,
.crow {
display: grid;
grid-template-columns: minmax(176px, 1.2fr) repeat(3, minmax(0, 1fr));
column-gap: clamp(12px, 1.5vw, 26px);
}
/* sticky country header */
.ctable-head {
position: sticky;
top: var(--nav-h);
z-index: 5;
align-items: end;
background: var(--paper);
padding: 12px 0 11px;
border-bottom: 1.5px solid var(--ink);
}
.ctable-corner {
font-family: var(--f-mono);
font-size: var(--t-meta);
color: var(--stone);
letter-spacing: 0.08em;
text-transform: uppercase;
align-self: end;
}
.ctable-country {
font-family: var(--f-display);
font-optical-sizing: auto;
font-weight: 600;
font-size: 1.5rem;
line-height: 1.1;
letter-spacing: -0.018em;
color: var(--ink);
}
/* dimension group */
.cgroup { margin-top: clamp(26px,3.2vw,40px); }
.cgroup:first-of-type { margin-top: clamp(12px,1.8vw,22px); }
.cgroup-label {
font-family: var(--f-display);
font-optical-sizing: auto;
font-weight: 400;
font-size: 1.35rem;
line-height: 1.2;
letter-spacing: -0.012em;
color: var(--ink);
padding-bottom: 12px;
margin: 0 0 4px;
border-bottom: 1px solid var(--hairline-soft);
}
/* indicator row */
.crow {
padding: 17px 0;
border-bottom: 1px solid var(--hairline-soft);
align-items: start;
}
.cgroup .crow:last-child { border-bottom: none; padding-bottom: 4px; }
.crow-label { padding-right: 16px; }
.crow-label__name { display: block; font-family: var(--f-ui); font-size: var(--t-body); color: var(--ink); line-height: 1.42; }
.crow-label__meta { display: block; font-family: var(--f-ui); font-size: var(--t-bodysm); color: var(--stone); line-height: 1.45; margin-top: 6px; max-width: 34ch; }
/* country cell */
.ccell { min-width: 0; }
.ccell__valrow { display: flex; align-items: baseline; gap: 0; flex-wrap: wrap; }
.ccell__val { font-family: var(--f-mono); font-size: 1.3125rem; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.12; }
.ccell__unit { font-family: var(--f-mono); font-size: var(--t-meta); font-weight: 400; color: var(--stone); margin-left: 5px; }
.ccell__prov { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 9px; }
.ccell__conf { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: var(--t-meta); color: var(--stone); white-space: nowrap; }
.ccell__conf svg { flex-shrink: 0; }
.ccell__sep { color: var(--hairline-soft); font-size: var(--t-meta); }
/* boxless quiet citation chip (matches the ledger). Inline (not flex)
so the caret hugs the source text and follows it when the label wraps
in a narrow column; the date is kept on one token. */
.cite.ccell__cite { display: inline; border: none; background: none; padding: 4px 0; min-width: 0; min-height: 0; color: var(--stone); font-size: var(--t-meta); line-height: 1.5; text-align: left; }
.cite.ccell__cite-date, .ccell__cite-date { white-space: nowrap; }
.cite.ccell__cite::after {
content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 5px; vertical-align: middle;
border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor;
transform: rotate(45deg) translateY(-1px);
transition: transform 200ms var(--ease);
}
.cite.ccell__cite[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(1px); }
.cite.ccell__cite:hover, .cite.ccell__cite:focus-visible { border: none; color: var(--accent); text-decoration: underline; }
.ccell__note { font-family: var(--f-ui); font-size: var(--t-bodysm); font-style: italic; color: var(--stone); line-height: 1.5; margin-top: 9px; max-width: 36ch; }
.ccell .cite-panel-wrap { margin-top: 0; }
.ccell .cite-panel-wrap.open { margin-top: 11px; }
.ccell .cite-panel { max-width: 42ch; }
.cite-panel__where { font-family: var(--f-mono); font-size: var(--t-meta); color: var(--ink-soft); letter-spacing: 0.04em; margin-bottom: 2px; }
.ctable-foot { margin-top: clamp(28px,4vw,44px); padding-top: 16px; border-top: 1px solid var(--hairline-soft); font-family: var(--f-mono); font-size: var(--t-meta); color: var(--stone); line-height: 1.7; max-width: 78ch; }
/* phone: every indicator becomes a card, the three countries stacked */
@media (max-width: 768px) {
.ctable-head { display: none; }
.crow {
display: block;
border: 1px solid var(--hairline-soft);
border-radius: 16px;
background: var(--surface);
padding: 16px 16px 4px;
margin-top: 14px;
}
.cgroup .crow:last-child { border-bottom: 1px solid var(--hairline-soft); padding-bottom: 4px; }
.crow-label { padding-right: 0; margin-bottom: 2px; }
.crow-label__meta { max-width: none; }
.ccell {
display: grid;
grid-template-columns: 6.5rem 1fr;
column-gap: 14px;
align-items: baseline;
padding: 13px 0;
border-top: 1px solid var(--hairline-soft);
}
.ccell-country {
font-family: var(--f-display);
font-optical-sizing: auto;
font-weight: 600;
font-size: 1.0625rem;
color: var(--ink);
letter-spacing: -0.012em;
/* undo sr-only */
position: static; width: auto; height: auto; margin: 0; padding-top: 1px;
clip: auto; overflow: visible; white-space: normal;
}
.ccell__note { max-width: none; }
.ccell .cite-panel { max-width: none; }
}
/* ------------------------------------------------------------
SOURCES LIST (gate 9 — locked 2026-06-27)
The cited-sources index: every figure traces to one of these.
Grouped by dimension; each entry is a real source (name as a
direct external link + what it covers + ConfidenceMark + host +
verified date). A search box + dimension filter narrow the list
(behaviour in _msc-system.js, guarded so it is inert off this
surface). Markup reference: mockups/gate-09-sources.html
------------------------------------------------------------ */
.sources { max-width: 820px; margin: 0 auto; padding: clamp(28px,4vw,44px) 0 clamp(64px,9vw,120px); }
.sources-bc { margin-bottom: clamp(20px,3vw,30px); }
.sources-head .display-section { margin: 8px 0 14px; }
.sources-summary { font-family: var(--f-ui); font-size: clamp(var(--t-lead),1.4vw,1.18rem); color: var(--ink-soft); line-height: 1.55; max-width: 60ch; }
.sources-fence { margin: clamp(22px,3vw,30px) 0 0; }
.sr-only-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* controls: search + dimension filter + live count */
.src-controls { margin-top: clamp(24px,3vw,34px); display: flex; flex-direction: column; gap: 16px; }
.src-search-wrap { position: relative; max-width: 420px; }
.src-search-wrap .src-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--stone); pointer-events: none; }
.src-search {
width: 100%; font-family: var(--f-ui); font-size: var(--t-body); color: var(--ink);
background: var(--paper); border: 1px solid var(--hairline-soft); border-radius: 10px;
padding: 12px 14px 12px 40px; min-height: 48px; transition: border-color 150ms var(--ease);
}
.src-search::placeholder { color: var(--stone); }
.src-search:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
.srcfilter { display: flex; flex-wrap: wrap; gap: 8px; }
.srcfilter__btn {
font-family: var(--f-ui); font-size: var(--t-bodysm); font-weight: 500; color: var(--ink-soft);
background: var(--surface); border: 1px solid var(--hairline-soft); border-radius: var(--radius-btn);
padding: 10px 16px; min-height: 44px; cursor: pointer;
transition: border-color 150ms var(--ease), background 150ms var(--ease), color 150ms var(--ease);
}
.srcfilter__btn:hover { border-color: var(--accent); color: var(--accent); }
.srcfilter__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.srcfilter__btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.src-count { font-family: var(--f-mono); font-size: var(--t-meta); color: var(--stone); letter-spacing: 0.02em; }
/* grouped list */
.src-groups { margin-top: clamp(20px,2.6vw,30px); }
.src-group { margin-top: clamp(28px,3.4vw,40px); }
.src-group:first-child { margin-top: clamp(8px,1.5vw,16px); }
.src-group[hidden] { display: none; }
.src-group__label {
display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
font-family: var(--f-display); font-optical-sizing: auto; font-weight: 400;
font-size: 1.35rem; line-height: 1.2; letter-spacing: -0.012em; color: var(--ink);
padding-bottom: 12px; margin: 0 0 4px; border-bottom: 1px solid var(--hairline-soft);
}
.src-group__count { font-family: var(--f-mono); font-size: var(--t-meta); font-weight: 400; color: var(--stone); }
.src-list { list-style: none; margin: 0; padding: 0; }
.src { padding: 16px 0; border-bottom: 1px solid var(--hairline-soft); }
.src-group .src:last-child { border-bottom: none; padding-bottom: 4px; }
.src[hidden] { display: none; }
.src__name {
display: inline; font-family: var(--f-ui); font-size: var(--t-body); font-weight: 500;
color: var(--ink); text-decoration: none; line-height: 1.45;
transition: color 150ms var(--ease);
}
.src__name:hover, .src__name:focus-visible { color: var(--accent); text-decoration: underline; }
.src__name:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.src__ext { margin-left: 6px; vertical-align: baseline; color: var(--stone); }
.src__name:hover .src__ext, .src__name:focus-visible .src__ext { color: var(--accent); }
.src__covers { font-family: var(--f-ui); font-size: var(--t-bodysm); color: var(--stone); line-height: 1.5; margin: 5px 0 0; max-width: 64ch; }
.src__prov { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 9px; }
.src__conf { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: var(--t-meta); color: var(--stone); white-space: nowrap; }
.src__conf svg { flex-shrink: 0; }
.src__sep { color: var(--hairline-soft); font-size: var(--t-meta); }
.src__host { font-family: var(--f-mono); font-size: var(--t-meta); color: var(--stone); }
.src__date { font-family: var(--f-mono); font-size: var(--t-meta); color: var(--stone); white-space: nowrap; }
.src-empty { font-family: var(--f-ui); font-size: var(--t-body); color: var(--stone); padding: 28px 0; font-style: italic; }
.src-empty[hidden] { display: none; }
.sources-foot { margin-top: clamp(28px,4vw,44px); padding-top: 16px; border-top: 1px solid var(--hairline-soft); font-family: var(--f-mono); font-size: var(--t-meta); color: var(--stone); line-height: 1.7; max-width: 80ch; }
@media (max-width: 600px) {
.src-search-wrap { max-width: none; }
}