/* ==========================================================================
Coaching Across Borders — 2026 static rebuild
--------------------------------------------------------------------------
Every value below was measured from the live site (WordPress theme "Aperio",
typeface Raleway) with the browser inspector, so the rebuild matches the
original design rather than approximating it.
Measured reference values:
container ............ 1150px, 25px side padding
header ............... 120px, white, logo max-height 67px
nav .................. 12px / 700 / letter-spacing 1px / uppercase / #555
body ................. Raleway 14px / 24px / #818181
h1 section title ..... 39px / 45px / ls 2px / 400 / #2D2D2D / uppercase
h1 titlebar .......... 48px / 55px / ls 2px / 700 / #FFF / uppercase
h2 ................... 28px / ls 1.5px / uppercase
h3 ................... 20px / 30px / ls 1px / uppercase
h4 ................... 15px / ls 1px / uppercase / #333
h5 eyebrow ........... 15px / 23px / ls 3px / uppercase / #999
h6 ................... 17px / 29px / #666
brand red ............ #991B1E dark section ...... #343434
alt section .......... #F7F7F7 titlebar overlay .. #2C3E50 @ .65
copyright bar ........ #1B1B1B, text #999, links #CCC
rules ................ 300×2px (titlebar) and 30×2px (component), red
counters ............. 70px / 75px / ls -1px / white
buttons .............. pill, #991B1E, 12px / 700 / ls 1px, 17px 30px 18px
inputs ............... 13px, padding 14px 15px, 1px solid #E8E8E8
========================================================================== */
/* --- Raleway, self-hosted ---------------------------------------------------
The original site pulls Raleway from fonts.googleapis.com. Hotlinking Google
Fonts sends every visitor's IP to Google and has been ruled a GDPR breach in
the EU, so the same font is served from this folder instead. Run
fetch_assets.py to download the four files into assets/fonts/. Until then
the stack falls back to Helvetica/Arial and the site still renders.
-------------------------------------------------------------------------- */
@font-face {
font-family: 'Raleway'; font-style: normal; font-weight: 300; font-display: swap;
src: url('../fonts/raleway-300.woff2') format('woff2');
}
@font-face {
font-family: 'Raleway'; font-style: normal; font-weight: 400; font-display: swap;
src: url('../fonts/raleway-400.woff2') format('woff2');
}
@font-face {
font-family: 'Raleway'; font-style: normal; font-weight: 500; font-display: swap;
src: url('../fonts/raleway-500.woff2') format('woff2');
}
@font-face {
font-family: 'Raleway'; font-style: normal; font-weight: 700; font-display: swap;
src: url('../fonts/raleway-700.woff2') format('woff2');
}
:root {
--brand: #991b1e;
--brand-dark: #7c1518;
--ink: #2d2d2d; /* headings */
--ink-2: #333333; /* card titles */
--text: #818181; /* body copy */
--text-2: #666666; /* h6 / lead lines */
--muted: #999999; /* eyebrows, quotes */
--line: #e8e8e8;
--bg: #ffffff;
--bg-alt: #f7f7f7;
--bg-dark: #343434;
--bg-foot: #222222;
--bg-copy: #1b1b1b;
--overlay: #2c3e50;
--maxw: 1150px;
--font: 'Raleway', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--font);
font-size: 14px;
font-weight: 400;
line-height: 24px;
color: var(--text);
background: #fff;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; border: 0; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font); font-weight: 400; margin: 0; color: var(--ink); }
h1 { font-size: 39px; line-height: 45px; letter-spacing: 2px; text-transform: uppercase; }
h2 { font-size: 28px; line-height: 38px; letter-spacing: 1.5px; text-transform: uppercase; }
h3 { font-size: 20px; line-height: 30px; letter-spacing: 1px; text-transform: uppercase; }
h4 { font-size: 15px; line-height: 21px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-2); }
h5 { font-size: 15px; line-height: 23px; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); }
h6 { font-size: 17px; line-height: 29px; letter-spacing: normal; text-transform: none; color: var(--text-2); }
p { margin: 0 0 20px; }
p:last-child { margin-bottom: 0; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 25px; }
.narrow { max-width: 820px; margin-left: auto; margin-right: auto; }
.center { text-align: center; }
/* --- Accessibility ------------------------------------------------------ */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999;
background: var(--brand); color: #fff; padding: 12px 20px; }
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* --- Red rules (theme element ".hr") ------------------------------------ */
.hr { text-align: center; line-height: 0; }
.hr span { display: inline-block; width: 300px; height: 2px; background: var(--brand); }
.hr-tiny span { width: 30px; }
.hr-left { text-align: left; }
/* --- Header ------------------------------------------------------------- */
.site-header { background: #fff; position: relative; z-index: 50; }
.site-header .container {
height: 120px; display: flex; align-items: center; justify-content: space-between;
}
/* DEFECT B3 FIXED — a single ![]()
with a real src. The live header emits a
second ![]()
that renders as a broken-image placeholder site-wide. */
.logo img { max-height: 67px; width: auto; }
.nav ul { list-style: none; display: flex; align-items: center; gap: 44px; margin: 0; padding: 0; }
.nav a {
font-size: 12px; font-weight: 700; letter-spacing: 1px; line-height: 12px;
text-transform: uppercase; color: #555; padding: 4px 1px; display: inline-block;
transition: color .2s;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--brand); }
.nav-toggle { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; }
/* --- Header search (17 Aug 2026) ----------------------------------------
The header was logo-left, nav-right via space-between. With a third child
that would have stranded the nav in the middle, so the nav is pushed right
with margin-left:auto instead and the icon follows it. */
.site-header .container { justify-content: flex-start; }
.nav { margin-left: auto; }
.search-toggle { background: none; border: 0; padding: 10px; margin-left: 28px;
cursor: pointer; color: #555; display: flex; align-items: center; transition: color .2s; }
.search-toggle:hover { color: var(--brand); }
.search-toggle svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.search-panel { background: var(--bg-alt); border-bottom: 1px solid var(--line); padding: 26px 0 30px; }
.search-panel[hidden] { display: none; }
.search-form { display: flex; gap: 12px; }
.search-form input { flex: 1; font-family: var(--font); font-size: 15px; line-height: 22px;
color: var(--ink); background: #fff; border: 1px solid var(--line); padding: 13px 15px; }
.search-form input:focus { border-color: var(--brand); outline: 0; }
.search-close { background: none; border: 1px solid var(--line); background: #fff; cursor: pointer;
font-family: var(--font); font-size: 12px; font-weight: 700; letter-spacing: 1px;
text-transform: uppercase; color: var(--text); padding: 0 18px; }
.search-close:hover { border-color: var(--brand); color: var(--brand); }
.search-results { margin-top: 6px; }
.search-results ul { list-style: none; margin: 0; padding: 0; }
.search-results li { padding: 14px 0; border-bottom: 1px solid #e4e4e4; }
.search-results li:last-child { border-bottom: 0; }
.search-results li a { display: block; font-size: 15px; font-weight: 700; letter-spacing: 1px;
text-transform: uppercase; color: var(--ink-2); }
.search-results li a:hover { color: var(--brand); }
.search-results li span { display: block; margin-top: 5px; font-size: 13px; line-height: 22px; color: var(--text); }
.search-count, .search-empty { font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
color: var(--muted); margin: 14px 0 0; }
.search-empty { text-transform: none; letter-spacing: normal; font-size: 14px; }
@media (max-width: 900px) {
.site-header .container { height: 90px; }
.nav-toggle { display: block; order: 3; margin-left: 14px; }
.search-toggle { order: 2; margin-left: auto; }
.nav { position: absolute; left: 0; right: 0; top: 100%; background: #fff;
border-top: 1px solid var(--line); max-height: 0; overflow: hidden; transition: max-height .25s; }
.nav[data-open="true"] { max-height: 360px; box-shadow: 0 12px 24px rgba(0,0,0,.08); }
.nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 6px 25px 18px; }
.nav a { padding: 14px 0; border-bottom: 1px solid var(--line); }
}
/* --- Titlebar (inner pages) --------------------------------------------- */
.titlebar { position: relative; min-height: 460px; display: flex; align-items: center;
background: #f6f6f6 center/cover no-repeat; overflow: hidden; }
.titlebar::after { content: ""; position: absolute; inset: 0; background: var(--overlay); opacity: .65; }
.titlebar .container { position: relative; z-index: 1; text-align: center; padding-top: 40px; padding-bottom: 40px; }
.titlebar h1 { font-size: 48px; line-height: 55px; font-weight: 700; letter-spacing: 2px; color: #fff; }
.titlebar .hr { margin: 15px 0 20px; }
.titlebar .subtitle { font-size: 20px; font-weight: 300; letter-spacing: 1px;
line-height: 30px; text-transform: uppercase; color: #f0f0f0; }
@media (max-width: 767px) {
.titlebar { min-height: 300px; }
.titlebar h1 { font-size: 32px; line-height: 40px; }
.titlebar .subtitle { font-size: 15px; line-height: 24px; }
.titlebar .hr span { width: 200px; }
}
/* --- Sections ----------------------------------------------------------- */
.section { padding: 90px 0; background: #fff; }
.section-90-80 { padding: 90px 0 80px; }
.section-90-60 { padding: 90px 0 60px; }
.section-90-100{ padding: 90px 0 100px; }
.section-110-80{ padding: 110px 0 80px; }
.section-110-60{ padding: 110px 0 60px; }
.section-120-90{ padding: 120px 0 90px; }
.section-120 { padding: 120px 0; }
.section-flush { padding: 0; }
.section-alt { background: var(--bg-alt); }
.section-dark { background: var(--bg-dark); }
.section-image { position: relative; background: #2c3e50 center/cover no-repeat fixed; }
.section-image > .container { position: relative; z-index: 1; }
@media (max-width: 900px) {
.section, .section-90-80, .section-90-60, .section-90-100,
.section-110-80, .section-110-60, .section-120-90, .section-120 { padding: 60px 0; }
.section-image { background-attachment: scroll; }
}
.section-head { text-align: center; margin-bottom: 50px; }
/* For heading blocks that are followed directly by their own content rather
than by a separate band — the home page hero. Keeps the 18/22 rule spacing,
drops the 50px trailing gap. */
.section-head-flush { margin-bottom: 0; }
.section-head h1, .section-head h2, .section-head h3 { margin-bottom: 0; }
.section-head .hr { margin: 18px 0 22px; }
.section-head p { color: var(--text); }
.section-dark .section-head h1,
.section-dark .section-head h2,
.section-dark .section-head h3 { color: #fff; }
.section-dark p { color: #b9b9b9; }
.eyebrow { font-size: 15px; line-height: 23px; letter-spacing: 3px;
text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
/* --- Home intro: icon boxes --------------------------------------------- */
.intro-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 46px; }
.icon-item { display: flex; align-items: flex-start; gap: 20px; text-align: left; }
/* 60px square, 4px radius, 2px brand border — measured from the live page */
.icon-badge { flex: 0 0 60px; width: 60px; height: 60px; border: 2px solid var(--brand);
border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.icon-badge svg { width: 26px; height: 26px; stroke: var(--brand); fill: none; stroke-width: 1.5; }
.icon-item p { font-size: 17px; line-height: 29px; color: var(--text-2); margin: 0; }
@media (max-width: 900px) { .intro-grid { grid-template-columns: 1fr; gap: 26px; max-width: 460px; margin-inline: auto; } }
/* --- Counters ----------------------------------------------------------- */
.counters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center; }
.counter .value { font-size: 70px; line-height: 75px; letter-spacing: -1px; color: #fff; display: block; }
.counter .hr { margin: 14px 0 16px; }
.counter .title { font-size: 15px; line-height: 23px; color: #fff; margin: 0; }
@media (max-width: 900px) { .counters { grid-template-columns: repeat(2, 1fr); gap: 45px 20px; }
.counter .value { font-size: 52px; line-height: 58px; } }
@media (max-width: 460px) { .counters { grid-template-columns: 1fr; } }
/* --- Feature boxes (numbered circles) ----------------------------------- */
.features { display: grid; gap: 40px; text-align: center; }
.features-3 { grid-template-columns: repeat(3, 1fr); }
.features-4 { grid-template-columns: repeat(4, 1fr); }
.feature .num {
width: 135px; height: 135px; border: 2px solid var(--brand); border-radius: 50%;
display: flex; align-items: center; justify-content: center; margin: 0 auto 22px;
font-size: 42px; line-height: 1; color: var(--brand);
}
.feature h4 { margin-bottom: 10px; }
.feature .hr { margin-bottom: 14px; }
@media (max-width: 900px) { .features-3, .features-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .features-3, .features-4 { grid-template-columns: 1fr; } }
/* --- Service / industry cards (dark band) -------------------------------
DEFECT B1 — on the live Solutions page sixteen raw [vc_column_inner …]
shortcode tags print as body text because their attribute quotes were
converted to typographic quotes. There is no page builder here.
DEFECT B2 — each card below carries exactly ONE heading; the live site
prints every service and industry title twice.
------------------------------------------------------------------------ */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 34px; }
.card h4 { color: #fff; margin-bottom: 12px; }
.card .hr { margin-bottom: 14px; }
.card p { font-size: 14px; line-height: 24px; color: #b9b9b9; }
.section:not(.section-dark) .card h4 { color: var(--ink-2); }
.section:not(.section-dark) .card p { color: var(--text); }
@media (max-width: 980px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } }
.cards-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .cards-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cards-3 { grid-template-columns: 1fr; } }
/* Card titles reserve two lines (2 × 21px), 17 Aug 2026.
The grid already aligns the TOP of every card in a row. What did not align
was everything BELOW the title: "Global mentoring project" is one line while
"Functional leadership team booster" and "High-potential selection
techniques" wrap to two, so on the second row of Recent projects the red
rule and the description sat lower in columns 2 and 3 than in column 1.
Reserving the taller of the two heights for every title puts the rules and
the body text back on the same baseline across the row. Titles that need a
third line still get one — this is a floor, not a cap. */
.cards .card h4 { min-height: 42px; }
@media (max-width: 560px) { .cards .card h4 { min-height: 0; } }
/* --- Portfolio grid (edge to edge, four up, no gaps) -------------------- */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); }
.tile { position: relative; display: block; overflow: hidden; background: #333; }
.tile img { width: 100%; aspect-ratio: 322 / 295; object-fit: cover;
transition: transform .6s ease; }
.tile:hover img, .tile:focus-visible img { transform: scale(1.06); }
.tile .overlay {
position: absolute; inset: 0; background: rgba(51,51,51,.9);
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; padding: 20px; opacity: 0; transition: opacity .35s ease;
}
.tile:hover .overlay, .tile:focus-visible .overlay { opacity: 1; }
.tile .overlay .ov-title {
display: block; color: #fff; font-size: 15px; line-height: 21px;
letter-spacing: 1px; text-transform: uppercase; margin-bottom: 12px;
}
.tile .overlay .hr { display: block; }
.tile .overlay .hr span { width: 30px; }
@media (max-width: 980px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tiles { grid-template-columns: 1fr; }
/* Touch devices have no hover: show the label permanently. */
.tile .overlay { opacity: 1; background: rgba(51,51,51,.55); } }
@media (hover: none) { .tile .overlay { opacity: 1; background: rgba(51,51,51,.55); } }
/* --- Testimonials ------------------------------------------------------- */
.quotes { max-width: 900px; margin: 0 auto; text-align: center; }
.quote blockquote { margin: 0 0 15px; padding: 0 60px; font-size: 20px; line-height: 30px; color: var(--muted); }
.quote cite { font-style: normal; font-size: 14px; letter-spacing: 1px;
text-transform: uppercase; color: var(--ink); }
.section-alt .quote cite { color: var(--ink); }
.quote[hidden] { display: none; }
.quote-nav { display: flex; justify-content: center; gap: 14px; margin-top: 32px; }
.quote-nav button { width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
border: 2px solid var(--brand); background: transparent; color: var(--brand);
font-size: 16px; line-height: 1; transition: background .2s, color .2s; }
.quote-nav button:hover { background: var(--brand); color: #fff; }
@media (max-width: 640px) { .quote blockquote { padding: 0; font-size: 17px; line-height: 27px; } }
/* --- Media rows --------------------------------------------------------- */
.media { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.media.text-center { text-align: center; }
@media (max-width: 900px) { .media { grid-template-columns: 1fr; gap: 36px; } }
.photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.photo-grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
/* --- Buttons ------------------------------------------------------------ */
.button {
display: inline-block; background: var(--brand); color: #fff; border: 0;
border-radius: 999px; padding: 17px 30px 18px; cursor: pointer;
font-family: var(--font); font-size: 12px; font-weight: 700; letter-spacing: 1px;
line-height: 1; text-transform: uppercase; transition: background .2s;
}
.button:hover { background: var(--brand-dark); color: #fff; }
.button-light { background: #fff; color: var(--brand); }
.button-light:hover { background: #f0f0f0; color: var(--brand-dark); }
/* --- Forms -------------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
.field { margin-bottom: 20px; }
.field label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 1px;
text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; }
.field input, .field textarea, .field select {
width: 100%; font-family: var(--font); font-size: 13px; line-height: 20px;
color: #666; background: #fff; border: 1px solid var(--line); border-radius: 0;
padding: 14px 15px;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--brand); outline: 0; }
.field .hint { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.consent { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 22px; font-size: 13px; }
.consent input { margin-top: 4px; }
.hp { position: absolute; left: -5000px; }
.form-msg { padding: 14px 16px; margin-bottom: 20px; font-size: 13px; border: 1px solid var(--line); }
.form-msg:empty { display: none; }
.form-msg.ok { background: #f2f8f2; border-color: #c6dfc6; color: #2c6b32; }
.form-msg.err { background: #fbf1f1; border-color: #e3c2c2; color: #8a1f1f; }
/* --- Contact panel ------------------------------------------------------ */
.contact-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; text-align: center; }
.contact-cols h4 + h4 { margin-top: 6px; }
.contact-cols .label { color: var(--brand); }
@media (max-width: 900px) { .contact-cols { grid-template-columns: 1fr; gap: 34px; } }
.contact-layout { display: grid; grid-template-columns: 1fr 1.3fr; gap: 60px; }
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; gap: 40px; } }
/* Contact page, 17 Aug 2026 ---------------------------------------------
The registered-office column was removed, so the form is the only content
left. It is centered at a readable measure rather than stretched across
1150px, where the two-up name/email row would look stranded. */
.contact-layout-single { grid-template-columns: minmax(0, 720px); justify-content: center; }
@media (max-width: 900px) { .contact-layout-single { grid-template-columns: 1fr; } }
/* Banner strip: the photograph, no words over it. A background image on an
empty element needs an explicit height — there is no content to give it
one. 340px keeps roughly the same band depth the text version had. */
.contact-banner { height: 340px; background: #fff url('../img/contact-bg.jpg') center/cover no-repeat; }
@media (max-width: 900px) { .contact-banner { height: 220px; } }
/* Gap between the Send message button and the line beneath it. The button is
inline-block, so it contributes no bottom margin of its own. */
.hint-after { margin-top: 22px; font-size: 13px; color: var(--muted); }
/* --- Legal pages -------------------------------------------------------- */
.legal { max-width: 860px; margin: 0 auto; }
.legal h2 { font-size: 20px; line-height: 30px; letter-spacing: 1px; margin: 44px 0 14px;
padding-top: 22px; border-top: 1px solid var(--line); }
.legal h3 { font-size: 15px; line-height: 21px; letter-spacing: 1px; margin: 26px 0 10px; color: var(--ink-2); }
.legal p, .legal li { font-size: 14px; line-height: 24px; }
.legal ul, .legal ol { padding-left: 20px; }
.legal li { margin-bottom: 8px; }
.legal .meta { color: var(--muted); }
.legal .toc { background: var(--bg-alt); padding: 26px 30px; margin: 30px 0 40px; }
.legal .toc h3 { margin-top: 0; }
.legal .toc ol { margin: 0; }
.legal .toc a { color: var(--text); }
.legal .toc a:hover { color: var(--brand); }
.dl-note { background: var(--bg-alt); border-left: 2px solid var(--brand); padding: 18px 22px; margin-bottom: 34px; }
/* --- Project pages ------------------------------------------------------ */
.project-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 60px; }
@media (max-width: 900px) { .project-layout { grid-template-columns: 1fr; gap: 40px; } }
.project-body ul { padding-left: 20px; }
.project-body li { margin-bottom: 8px; }
.aside { background: var(--bg-alt); padding: 30px; align-self: start; }
.aside h4 { color: var(--brand); margin-bottom: 10px; }
.aside h4 + p { margin-bottom: 26px; }
/* DEFECT B5 FIXED — Google Plus (discontinued April 2019) and the deprecated
twitter.com/home?status= endpoint are gone. */
.share { display: flex; gap: 10px; flex-wrap: wrap; }
.share a { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
border: 1px solid var(--line); background: #fff; color: var(--text); padding: 10px 16px; }
.share a:hover { border-color: var(--brand); color: var(--brand); }
.crumb { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); padding: 22px 0 0; }
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--brand); }
.pager { display: flex; justify-content: space-between; gap: 20px; margin-top: 50px;
padding-top: 24px; border-top: 1px solid var(--line); font-size: 12px;
letter-spacing: 1px; text-transform: uppercase; font-weight: 700; }
/* --- Footer ------------------------------------------------------------- */
.site-footer { background: var(--bg-foot); color: #999; padding: 45px 0 40px; font-size: 14px; }
.footer-cols { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; }
@media (max-width: 800px) { .footer-cols { grid-template-columns: 1fr; gap: 30px; } }
/* Footer logo raised from 46px to 67px on 17 Aug 2026 — the same height as
the header logo, so the wordmark is as readable at the bottom of the page
as at the top. The source is now the vector logo recolored white, which
stays crisp at any size; the old logo-white.png was a 400px bitmap and
would have started to soften at this height on a high-density screen. */
.site-footer img { max-height: 67px; width: auto; margin-bottom: 18px; }
.site-footer h4 { color: #fff; font-size: 12px; letter-spacing: 1px; margin-bottom: 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: #ccc; }
.site-footer a:hover { color: #fff; }
.copyright { background: var(--bg-copy); color: #999; padding: 15px 0; font-size: 14px; }
.copyright .container { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.copyright a { color: #ccc; }
.copyright a:hover { color: #fff; }
.copyright nav { display: flex; gap: 8px; }
/* --- Cookie notice: removed 17 Aug 2026 ---------------------------------
The styles for .cookie lived here. The notice announced that the site sets
no tracking cookie — which is true, and which sites that do not track
simply do not say. It was also the only thing on this site that stored
anything on a visitor's machine, to remember their answer to a question
that did not need asking. Both are gone; the site now stores nothing.
The statement belongs in the Privacy Policy. See main.js for what to do
when analytics are added.
------------------------------------------------------------------------ */
/* --- Print / motion ----------------------------------------------------- */
@media print {
.site-header, .site-footer, .copyright, .quote-nav, .share, .titlebar::after { display: none; }
body { font-size: 11pt; color: #000; }
}
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}
/* --- Heading size utilities ---------------------------------------------
The original theme prints section titles as , giving several
elements per page. The visual size is kept, the document outline is not:
one per page, section titles are . -------------------------- */
.title-lg { font-size: 39px; line-height: 45px; letter-spacing: 2px; text-transform: uppercase; }
.title-md { font-size: 28px; line-height: 38px; letter-spacing: 1.5px; text-transform: uppercase; }
@media (max-width: 767px) {
h1, .title-lg { font-size: 28px; line-height: 36px; }
.title-md, h2 { font-size: 22px; line-height: 32px; }
}
/* Home page lead line — the full brand phrase, sized between h6 and the body. */
.lede { font-size: 17px; line-height: 29px; color: var(--text-2);
max-width: 760px; margin: 22px auto 0; }
/* Counter footnote — deliberately small and dry. It sits under the band, not
inside it, so the figures keep their weight and the note stays an aside. */
.counters-note { margin: 46px 0 0; text-align: center; font-size: 13px;
letter-spacing: .5px; color: rgba(255,255,255,.6); }