/* public/assets/marketing.css — shared marketing-page system
Used by the home page and every editorial page that is built on the h-*
classes (tools index, how it works, FAQ). Tokens come from ui.css. Flat
surfaces, hairline borders, one accent, no gradients, no hover lifts.
Load after ui.css:
and put class="ct-marketing" on . */
body.ct-marketing main {
max-width: 1140px;
margin: 0 auto;
padding: 0 20px;
background: transparent;
border: none;
box-shadow: none;
border-radius: 0;
}
@media (max-width: 640px) {
body.ct-marketing main { padding: 0 16px; margin: 0 auto; }
}
.h-h1, .h-h2, .h-cta-title, .h-step-h, .h-step-n, .h-principle-n, .h-faq-cat-n {
font-family: var(--font-display);
font-optical-sizing: auto;
font-feature-settings: "cv11", "ss01";
}
/* shared section header */
.h-sec-head {
max-width: 640px;
margin: 0 0 2rem;
}
.h-sec-head-left { margin-bottom: 1.5rem; }
.h-h2 {
margin: 0 0 .55rem;
font-weight: 700;
letter-spacing: -0.035em;
line-height: 1.08;
font-size: clamp(1.75rem, 1.4vw + 1.2rem, 2.35rem);
text-wrap: balance;
}
.h-sec-sub {
margin: 0;
color: var(--muted);
font-size: 1.02rem;
line-height: 1.6;
text-wrap: pretty;
}
.h-sec-sub a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
/* Head with a trailing link: the copy block keeps the 640px measure, the link
sits on the baseline at the right and drops below the copy on narrow screens. */
.h-sec-head-row {
max-width: none;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px 32px;
flex-wrap: wrap;
}
.h-sec-head-row > div { max-width: 640px; }
.h-sec-link {
flex: none;
display: inline-flex;
align-items: center;
gap: 6px;
padding-bottom: .2rem;
color: var(--text);
font-size: .95rem;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
}
.h-sec-link span { display: inline-block; transition: transform var(--t-fast); }
.h-sec-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.h-sec-link:hover span { transform: translateX(3px); }
.h-sec-head-center { margin-left: auto; margin-right: auto; text-align: center; }
.h-lede {
margin: 0 0 1.5rem;
max-width: 46ch;
font-size: 1.12rem;
line-height: 1.6;
color: var(--muted);
text-wrap: pretty;
}
.h-h1 {
margin: 0 0 1.1rem;
font-weight: 750;
letter-spacing: -0.045em;
line-height: 1.02;
font-size: clamp(2.5rem, 4.4vw + 0.8rem, 4.4rem);
display: block;
}
.h-h1-accent { color: var(--accent); }
@media (max-width: 920px) {
.h-h1 { font-size: clamp(2.3rem, 9.4vw, 3.2rem); margin-bottom: .8rem; }
.h-lede { font-size: 1.05rem; margin-bottom: 1.1rem; }
}
/* centered hero for subpages */
.h-hero-center {
max-width: 760px;
margin: 0 auto;
padding: 3.5rem 0 2.5rem;
text-align: center;
}
.h-hero-center .h-h1 { font-size: clamp(2.4rem, 3.6vw + 0.8rem, 3.8rem); text-wrap: balance; }
.h-hero-center .h-lede { margin-left: auto; margin-right: auto; max-width: 56ch; }
.h-hero-center .h-actions, .h-hero-center .h-badges { justify-content: center; }
@media (max-width: 920px) { .h-hero-center { padding: 2rem 0 1.75rem; } }
.h-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
font-size: .9rem;
font-weight: 600;
color: var(--muted);
}
.h-kicker .ct-tile { --ct-tile-size: 22px; }
.h-badges {
display: flex;
flex-wrap: wrap;
gap: 6px 18px;
margin: 1.1rem 0 0;
font-size: .88rem;
font-weight: 500;
color: var(--muted);
}
.h-badges span { display: inline-flex; align-items: center; gap: 7px; }
.h-badges span::before {
content: "";
width: 6px; height: 6px; border-radius: 999px;
background: var(--accent);
}
/* --- Buttons --- */
.h-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
}
.h-actions-center { justify-content: center; }
.h-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 46px;
padding: 0 20px;
border-radius: var(--radius);
text-decoration: none;
font-weight: 600;
font-size: 0.97rem;
letter-spacing: -0.005em;
border: 1px solid transparent;
cursor: pointer;
transition: background-color var(--t), color var(--t), border-color var(--t);
}
.h-btn-primary { background: var(--text); color: var(--bg); }
.h-btn-primary:hover { background: var(--accent); color: #fff; }
.h-btn-ghost { background: transparent; color: var(--text); border-color: var(--ring-strong); }
.h-btn-ghost:hover { border-color: var(--text); }
.h-btn-invert { background: var(--bg); color: var(--text); }
.h-btn-invert:hover { background: var(--accent); color: #fff; }
.h-btn-invert-ghost { background: transparent; color: var(--bg); border-color: color-mix(in srgb, var(--bg) 40%, transparent); }
.h-btn-invert-ghost:hover { border-color: var(--bg); }
.h-btn:focus-visible {
outline: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}
.h-chip {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 11px 6px 7px;
border-radius: 999px;
border: 1px solid var(--ring);
background: var(--card);
color: var(--text);
font-size: .86rem;
font-weight: 550;
text-decoration: none;
white-space: nowrap;
transition: border-color var(--t), background-color var(--t);
}
.h-chip .ct-tile { --ct-tile-size: 20px; }
.h-chip:hover { border-color: var(--ring-strong); background: var(--card-soft); }
/* --- PROOF --- */
.h-proof {
margin: 0 0 5.5rem;
padding-top: 1.75rem;
border-top: 1px solid var(--ring);
display: flex;
flex-direction: column;
gap: 14px;
}
.h-stat {
margin: 0;
font-size: 1rem;
color: var(--muted);
}
.h-stat strong { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; }
/* Two lines, not one interrupted sentence: the claim reads straight through on
its own line, and the brand logos sit beneath it as evidence. Inlining the
logos mid-sentence meant the closing clause always wrapped away from the
opening one, so the strip read as a sentence sliced in half by icons. */
.h-logos-line {
margin: 0;
color: var(--muted);
font-size: .95rem;
font-weight: 500;
}
.h-logos {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 22px;
}
.h-logo {
display: inline-flex;
align-items: center;
gap: 7px;
color: var(--muted);
font-weight: 600;
font-size: .95rem;
letter-spacing: -0.01em;
transition: color var(--t);
}
.h-logo:hover { color: var(--text); }
.h-logo svg { width: 18px; height: 18px; display: block; fill: currentColor; }
@media (max-width: 640px) {
.h-proof { margin-bottom: 4rem; }
.h-logos { gap: 10px 16px; }
.h-logo { font-size: .9rem; }
}
/* --- TOOLS --- */
.h-tools { margin: 0 0 5.5rem; }
.h-tools-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
@media (max-width: 1000px) { .h-tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .h-tools-grid { grid-template-columns: 1fr; } }
.h-tool {
display: flex;
flex-direction: column;
gap: 6px;
padding: 20px;
min-height: 210px;
border-radius: 12px;
border: 1px solid var(--ring);
background: var(--card);
color: var(--text);
text-decoration: none;
transition: border-color var(--t);
}
.h-tool:hover { border-color: var(--text); }
.h-tool:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.h-tool-tile { --ct-tile-size: 40px; margin-bottom: 10px; }
.h-tool-name { font-weight: 650; font-size: 1.02rem; letter-spacing: -0.012em; }
.h-tool-desc { font-size: .9rem; line-height: 1.5; color: var(--muted); }
.h-tool-go {
margin-top: auto;
padding-top: 14px;
font-size: .88rem;
font-weight: 600;
color: var(--text);
}
.h-tool-go span { display: inline-block; transition: transform var(--t-fast); }
.h-tool:hover .h-tool-go span { transform: translateX(3px); }
a.h-tool-name, .h-tool-go a { color: var(--text); text-decoration: none; }
a.h-tool-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.h-tool-go a.h-tool-alt { margin-left: 14px; color: var(--muted); font-weight: 500; }
.h-tool-go a.h-tool-alt:hover { color: var(--text); }
.h-tool-more { background: var(--bg-soft); border-style: dashed; }
.h-tool-more .h-tool-name { padding-top: 50px; }
@media (max-width: 520px) {
.h-tool { min-height: 0; }
.h-tool-more .h-tool-name { padding-top: 0; }
}
/* Flush grid (home): one flat object instead of eight floating cards. The
cells share hairline dividers (the 1px gap paints the ring colour), the
tile and the name sit on one row, the copy is one sentence, and the whole
cell is the link — the arrow only surfaces on hover, so nothing repeats
"Create X" eight times. */
.h-tools-grid--flush {
gap: 1px;
background: var(--ring);
border: 1px solid var(--ring);
border-radius: 16px;
overflow: hidden;
}
.h-tools-grid--flush .h-tool {
gap: 10px;
padding: 22px 22px 24px;
min-height: 0;
border: 0;
border-radius: 0;
transition: background-color var(--t);
}
.h-tools-grid--flush .h-tool:hover { background: var(--card-soft); }
.h-tools-grid--flush .h-tool:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.h-tool-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.h-tools-grid--flush .h-tool-tile { --ct-tile-size: 32px; margin: 0; }
.h-tools-grid--flush .h-tool-name { font-size: 1.04rem; font-weight: 650; letter-spacing: -0.015em; }
.h-tool-arrow {
margin-left: auto;
color: var(--muted);
font-weight: 600;
opacity: 0;
transform: translateX(-4px);
transition: opacity var(--t-fast), transform var(--t-fast), color var(--t-fast);
}
.h-tool:hover .h-tool-arrow, .h-tool:focus-visible .h-tool-arrow { opacity: 1; transform: none; color: var(--text); }
@media (hover: none) { .h-tool-arrow { opacity: 1; transform: none; } }
.h-tools-grid--flush .h-tool-desc { font-size: .92rem; line-height: 1.5; max-width: 30ch; text-wrap: pretty; }
/* The cell is a div, not a link, so it can carry a second link: the tool
name is the creator link and its ::after stretches over the whole cell
(the cell stays one big tap target), and "Learn more" sits above that
layer and goes to the tool's page (/tools/slotlink/ …), which keeps the
home page linking to every tool page. */
.h-tools-grid--flush .h-tool { position: relative; }
.h-tool-main { color: var(--text); text-decoration: none; }
.h-tool-main::after { content: ""; position: absolute; inset: 0; }
a.h-tool-main:hover { text-decoration: none; }
.h-tool-main:focus-visible { outline: none; }
.h-tools-grid--flush .h-tool:has(.h-tool-main:focus-visible) { box-shadow: inset 0 0 0 2px var(--accent); }
.h-tool:has(.h-tool-main:focus-visible) .h-tool-arrow { opacity: 1; transform: none; color: var(--text); }
.h-tool-learn {
position: relative;
z-index: 1;
align-self: flex-start;
margin-top: auto;
padding: 4px 0;
font-size: .86rem;
font-weight: 500;
color: var(--muted);
text-decoration: underline;
text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
text-underline-offset: 3px;
}
.h-tool-learn:hover { color: var(--accent); text-decoration-color: currentColor; }
.h-tool-learn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.h-sr {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (max-width: 520px) {
.h-tools-grid--flush { border-radius: 14px; }
.h-tools-grid--flush .h-tool { padding: 18px 18px 19px; gap: 8px; }
.h-tools-grid--flush .h-tool-desc { max-width: none; }
}
/* --- HOW IT WORKS --- */
.h-how { margin: 0 0 5.5rem; }
.h-steps {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px;
border-top: 1px solid var(--ring);
}
@media (max-width: 720px) { .h-steps { grid-template-columns: 1fr; gap: 0; } }
.h-step { padding-top: 20px; }
@media (max-width: 720px) { .h-step + .h-step { border-top: 1px solid var(--ring); padding-top: 18px; margin-top: 18px; } }
.h-step-n {
display: block;
font-size: 1.6rem;
font-weight: 500;
line-height: 1;
color: var(--accent);
margin-bottom: 12px;
font-variant-numeric: tabular-nums;
}
.h-step-h { margin: 0 0 6px; font-size: 1.15rem; font-weight: 600; letter-spacing: -0.015em; }
.h-step-p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--muted); max-width: 34ch; }
.h-why, .h-explore, .h-principles-sec, .h-toolkit { margin: 0 0 5.5rem; }
/* --- LINK INSIGHTS (copy + live sample component) --- */
.h-ins {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 40px;
align-items: center;
margin: 0 0 5.5rem;
padding: clamp(1.5rem, 3vw, 2.75rem);
border: 1px solid var(--ring);
border-radius: 16px;
background: var(--card);
}
@media (max-width: 920px) { .h-ins { grid-template-columns: 1fr; gap: 28px; } }
.h-ins-copy .h-sec-sub { margin-bottom: 1.25rem; }
.h-ins-claims {
list-style: none;
margin: 0 0 1.5rem;
padding: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.h-ins-claims li {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: .93rem;
line-height: 1.6;
color: var(--muted);
}
.h-ins-claims strong { color: var(--text); font-weight: 600; }
.h-ins-ic {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
margin-top: 1px;
border: 1px solid var(--ring);
border-radius: 8px;
background: var(--bg-soft);
color: var(--accent);
}
.h-ins-ic svg { width: 16px; height: 16px; display: block; }
.h-ins-demo { min-width: 0; }
.h-ins-demo-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.h-ins-demo-bar .ct-tile { --ct-tile-size: 36px; flex: none; }
.h-ins-demo-title { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.h-ins-demo-title strong { font-size: 1rem; font-weight: 650; letter-spacing: -0.012em; }
.h-ins-demo-title small { font-size: .82rem; color: var(--muted); }
.h-ins-demo .cti-demo { background: var(--bg-soft); box-shadow: none; }
.h-ins-demo-note { margin: 12px 2px 0; font-size: .84rem; line-height: 1.5; color: var(--muted); }
/* --- FEATURE CARDS (three-up "why" sections) --- */
.h-features {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
@media (max-width: 800px) { .h-features { grid-template-columns: 1fr; } }
.h-feature {
padding: 22px;
border: 1px solid var(--ring);
border-radius: 12px;
background: var(--card);
}
.h-feature-k { font-size: .82rem; font-weight: 600; color: var(--accent); margin-bottom: 10px; }
.h-feature h3 { margin: 0 0 6px; font-size: 1.08rem; font-weight: 650; letter-spacing: -0.015em; line-height: 1.3; }
.h-feature p { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.6; }
/* --- NUMBERED PRINCIPLES (two-up) --- */
.h-principles {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
@media (max-width: 800px) { .h-principles { grid-template-columns: 1fr; } }
.h-principle {
padding: 24px;
border: 1px solid var(--ring);
border-radius: 12px;
background: var(--card);
}
.h-principle-n {
display: block;
font-size: 1.4rem;
font-weight: 500;
line-height: 1;
color: var(--accent);
font-variant-numeric: tabular-nums;
margin-bottom: 12px;
}
.h-principle h3 { margin: 0 0 6px; font-size: 1.12rem; font-weight: 650; letter-spacing: -0.015em; }
.h-principle p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.62; }
.h-note {
margin-top: 14px;
padding: 10px 12px;
border-radius: 8px;
background: var(--bg-soft);
font-size: .88rem;
line-height: 1.55;
color: var(--muted);
}
.h-note-accent { background: var(--accent-soft); color: var(--text); }
.h-list {
list-style: none;
margin: 12px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
font-size: .92rem;
line-height: 1.55;
color: var(--muted);
}
.h-list li { position: relative; padding-left: 16px; }
.h-list li::before {
content: "";
position: absolute; left: 0; top: .6em;
width: 6px; height: 6px; border-radius: 999px;
background: var(--accent);
}
.h-list strong { color: var(--text); font-weight: 600; }
.h-inline-links { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; }
.h-inline-links a { color: var(--text); font-weight: 600; font-size: .9rem; text-decoration: none; }
.h-inline-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* --- TOOL TILES (icon + name) --- */
.h-tiles {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
@media (max-width: 720px) { .h-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.h-tile {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 22px 12px;
border: 1px solid var(--ring);
border-radius: 12px;
background: var(--card);
color: var(--text);
font-weight: 600;
font-size: .95rem;
text-decoration: none;
transition: border-color var(--t);
}
.h-tile .ct-tile { --ct-tile-size: 44px; }
.h-tile:hover { border-color: var(--text); }
/* --- LINK CHIPS (explore rows) --- */
.h-links { display: flex; flex-wrap: wrap; gap: 8px; }
.h-links-center { justify-content: center; }
/* --- INLINE HELP BOX --- */
.h-help {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 22px 24px;
margin: 0 0 3rem;
border: 1px solid var(--ring);
border-radius: 12px;
background: var(--card);
}
.h-help h2 { margin: 0 0 4px; font-size: 1.15rem; font-weight: 650; letter-spacing: -0.015em; }
.h-help p { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.55; }
@media (max-width: 640px) { .h-help { flex-direction: column; align-items: flex-start; } }
/* --- FAQ CATEGORY LAYOUT (FAQ page) --- */
.h-faq-cat {
display: grid;
grid-template-columns: 260px minmax(0, 1fr);
gap: 40px;
padding: 2.25rem 0;
border-top: 1px solid var(--ring);
}
.h-faq-cat:last-of-type { border-bottom: 1px solid var(--ring); margin-bottom: 3rem; }
.h-faq-cat-n {
display: block;
font-size: 1.4rem;
font-weight: 500;
line-height: 1;
color: var(--accent);
font-variant-numeric: tabular-nums;
margin-bottom: 10px;
}
.h-faq-cat h2 { margin: 0 0 6px; font-size: 1.35rem; font-weight: 650; letter-spacing: -0.02em; }
.h-faq-cat-desc { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.55; }
.h-faq-cat .h-faq-list { border-top: 0; }
.h-faq-cat .h-faq-item:first-child { border-top: 1px solid var(--ring); }
@media (max-width: 800px) { .h-faq-cat { grid-template-columns: 1fr; gap: 16px; } }
.h-faq-body a, .h-sec-sub a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
/* --- FAQ --- */
.h-faq { margin: 0 0 5.5rem; }
.h-faq-inner { max-width: 760px; }
.h-faq-list { display: flex; flex-direction: column; border-top: 1px solid var(--ring); }
.h-faq-item { border-bottom: 1px solid var(--ring); padding: 4px 0; }
.h-faq-item > summary::-webkit-details-marker { display: none !important; }
.h-faq-item > summary::marker { content: "" !important; }
.h-faq-item > summary::after { content: "" !important; display: none !important; }
.h-faq-item > summary {
cursor: pointer;
list-style: none !important;
font-weight: 600;
font-size: 1rem;
letter-spacing: -0.01em;
color: var(--text);
position: relative;
padding: 14px 40px 14px 0;
line-height: 1.4;
}
.h-faq-item > summary::before {
content: "+";
position: absolute;
right: 2px;
top: 50%;
transform: translateY(-50%);
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
border: 1px solid var(--ring);
color: var(--muted);
font-weight: 500;
font-size: 1.05rem;
line-height: 1;
transition: color var(--t-fast), border-color var(--t-fast), background-color var(--t-fast);
}
.h-faq-item > summary:hover::before { border-color: var(--text); color: var(--text); }
.h-faq-item[open] > summary::before { content: "−"; background: var(--text); border-color: var(--text); color: var(--bg); }
.h-faq-body {
margin: 0 0 6px;
padding: 0 40px 12px 0;
color: var(--muted);
font-size: .95rem;
line-height: 1.65;
}
.h-faq-extra { display: none; }
.h-faq.is-expanded .h-faq-extra { display: block; }
.h-faq-more { margin-top: 16px; }
.h-faq-more-btn { width: auto; min-height: 40px; padding: 0 16px; font-size: .9rem; }
/* --- FINAL CTA --- */
.h-cta { margin: 0 0 3rem; }
.h-cta-inner {
border-radius: 16px;
padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
text-align: center;
background: var(--text);
color: var(--bg);
}
.h-cta-title {
margin: 0 0 .5rem;
color: var(--bg);
font-weight: 600;
letter-spacing: -0.03em;
line-height: 1.05;
font-size: clamp(1.8rem, 2.4vw + 1rem, 2.7rem);
text-wrap: balance;
}
.h-cta-sub {
margin: 0 auto 1.5rem;
color: color-mix(in srgb, var(--bg) 72%, transparent);
font-size: 1.04rem;
line-height: 1.6;
max-width: 46ch;
}
@media (prefers-reduced-motion: reduce) {
.h-btn, .h-chip, .h-tool, .h-tool-go span, .h-tool-arrow, .h-sec-link span, .h-logo, .h-tile { transition: none !important; }
}
/* --- REACH (dot map of countries links were made in, last 30 days) ---
Hidden until /api/site-stats clears its floor; the SVG is fetched from
/assets/home/world-dots.svg (scripts/build-world-dots.mjs): a hex grid,
dots 2 units apart, one of round-capped zero-length segments per
country, so dot size is stroke-width and every colour comes from the
tokens. From 920px the heading and copy sit left of the map; below that
the map comes straight after the number, ahead of the copy. */
.h-reach {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "head" "map" "body";
gap: 24px;
align-items: center;
margin: 0 0 5.5rem;
padding: clamp(1.5rem, 3vw, 2.75rem);
border: 1px solid var(--ring);
border-radius: 16px;
background: var(--card);
}
.h-reach[hidden] { display: none; }
@media (min-width: 920px) {
.h-reach {
grid-template-columns: minmax(0, 5fr) minmax(0, 11fr);
grid-template-rows: auto 1fr;
grid-template-areas: "head map" "body map";
gap: 0 40px;
}
.h-reach-body { align-self: start; margin-top: 1rem; }
}
.h-reach-head { grid-area: head; }
.h-reach-map { grid-area: map; }
.h-reach-body { grid-area: body; }
.h-reach-h { margin: 0; font-weight: 700; letter-spacing: -0.035em; line-height: 1; }
.h-reach-n {
display: block;
font-size: clamp(4rem, 5vw + 2.2rem, 6rem);
letter-spacing: -0.05em;
font-variant-numeric: tabular-nums;
}
.h-reach-u {
display: block;
margin-top: .35rem;
font-size: clamp(1.35rem, .8vw + 1.1rem, 1.7rem);
line-height: 1.15;
text-wrap: balance;
}
.h-reach-list { margin: 1rem 0 0; font-size: .95rem; line-height: 1.6; color: var(--text); text-wrap: pretty; }
.h-reach-more {
display: inline;
width: auto;
min-height: 0;
margin: 0;
border-radius: 0;
box-shadow: none;
vertical-align: baseline;
font: inherit;
color: var(--accent);
background: none;
border: 0;
padding: 0;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
letter-spacing: inherit;
white-space: normal;
}
.h-reach-more:hover, .h-reach-more:active { background: none; color: var(--text); }
.h-reach-note { margin: .75rem 0 0; font-size: .88rem; color: var(--muted); }
.h-reach-map { position: relative; margin: 0; }
.h-reach-svg {
display: block;
width: 100%;
height: auto;
fill: none;
/* Opaque, not translucent: a one-dot country shares its spot with a
neighbour, and two translucent dots on one spot would read darker. */
stroke: color-mix(in srgb, var(--text) 15%, var(--card));
stroke-width: 1.25;
stroke-linecap: round;
}
.h-reach-svg .is-on { stroke: var(--accent); stroke-width: 1.5; }
/* Markers for places too small to own a grid point: hidden until lit, then
a dot big enough to see with a halo that separates it from its neighbour. */
.h-reach-svg [data-t]:not(.is-on) { display: none; }
.h-reach-svg [data-t].is-on { stroke-width: 3.2; paint-order: stroke; filter: drop-shadow(0 0 1.2px var(--card)); }
/* One west-to-east reveal the first time the map is on screen. */
@media (prefers-reduced-motion: no-preference) {
.h-reach-svg .is-on { animation: h-reach-in .6s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms) both paused; }
.h-reach-svg.is-live .is-on { animation-play-state: running; }
}
@keyframes h-reach-in {
from { stroke: color-mix(in srgb, var(--text) 15%, var(--card)); }
to { stroke: var(--accent); }
}
.h-reach-tip {
position: absolute;
z-index: 1;
transform: translate(-50%, calc(-100% - 10px));
padding: 4px 10px;
border-radius: 8px;
background: var(--text);
color: var(--card);
font-size: .82rem;
font-weight: 600;
white-space: nowrap;
pointer-events: none;
}
.h-reach-tip[hidden] { display: none; }
/* A phone gives each dot under 2px: fatter dots keep the lit shapes solid,
and the map runs to the card's edges. */
@media (max-width: 640px) {
.h-reach-map { margin-inline: calc(-1 * clamp(1.5rem, 3vw, 2.75rem) + 6px); }
.h-reach-svg { stroke-width: 1.4; }
.h-reach-svg .is-on { stroke-width: 1.75; }
}