/* Glamcheck One — page CSS. Design tokens live in style.css. Rules
and hairlines throughout: border-radius 0 everywhere, no shadows. */
/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--gcr-paper);
color: var(--gcr-ink);
font-family: var(--gcr-font-sans);
font-size: 15px;
-webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--gcr-accent); }
h1, h2, h3, h4 { margin: 0; font-family: var(--gcr-font-serif); font-weight: 400; text-wrap: pretty; }
p { text-wrap: pretty; }
button { font-family: inherit; }
.screen-reader-text {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
.gcr-main, .gcr-masthead, .gcr-nav, .gcr-crumbs, .gcr-footer__top,
.gcr-search--mobile {
max-width: var(--gcr-max-width);
margin-left: auto;
margin-right: auto;
}
.gcr-main { padding: 0 var(--gcr-gutter); overflow-x: hidden; }
.gcr-masthead, .gcr-nav, .gcr-crumbs, .gcr-search--mobile { padding-left: var(--gcr-gutter); padding-right: var(--gcr-gutter); }
/* ---------- Chrome: masthead, nav, breadcrumbs ---------- */
.gcr-masthead {
display: grid;
grid-template-columns: auto auto 1fr;
align-items: center;
gap: 22px;
padding-top: 22px;
padding-bottom: 18px;
}
/* The masthead plate. The logo file carries its own black field, so the plate
is pure #000 to match it seamlessly — anything warmer would show a seam
against the artwork. On a white page this becomes the one hard graphic mark
in the layout, which is exactly the job a fashion masthead does: the accent
rule beneath it and the lift on hover are there to make it read as a
pressed foil block rather than a pasted-in image. */
.gcr-logo {
display: block; position: relative; background: #000;
padding: 15px 24px; line-height: 0;
box-shadow: 0 1px 2px rgb(28 20 14 / 8%), 0 8px 20px -8px rgb(28 20 14 / 30%);
transition: transform .35s var(--gcr-ease), box-shadow .35s var(--gcr-ease);
}
.gcr-logo img { display: block; height: 48px; width: auto; }
.gcr-logo::after {
content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
background: linear-gradient(90deg, var(--gcr-logo-red) 0%, var(--gcr-accent) 55%, transparent 100%);
}
.gcr-logo:hover {
transform: translateY(-2px);
box-shadow: 0 2px 4px rgb(28 20 14 / 10%), 0 14px 30px -10px rgb(28 20 14 / 38%);
}
/* Tagline sits beside the plate, separated by a hairline — a masthead lockup
rather than two unrelated bits of chrome. */
.gcr-masthead__meta {
font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--gcr-meta);
padding-left: 22px; border-left: 1px solid var(--gcr-rule); align-self: stretch;
display: flex; flex-direction: column; justify-content: center; gap: 4px;
white-space: nowrap; line-height: 1.3;
}
.gcr-masthead__search-col { justify-self: end; display: flex; align-items: center; gap: 10px; }
.gcr-wordmark { font-size: 44px; letter-spacing: -.01em; line-height: 1; }
.gcr-wordmark:hover { color: var(--gcr-ink); }
.gcr-wordmark__glam { color: var(--gcr-logo-red); }
.gcr-wordmark__check { color: var(--gcr-ink); }
.gcr-wordmark--reversed { font-size: 28px; }
.gcr-wordmark--reversed .gcr-wordmark__glam { color: var(--gcr-logo-red-on-dark); }
.gcr-wordmark--reversed .gcr-wordmark__check { color: var(--gcr-paper); }
.gcr-search { position: relative; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--gcr-ink); padding-bottom: 4px; min-width: 190px; }
.gcr-search__input {
border: 0; background: none; font-family: inherit; font-size: 13px; color: var(--gcr-ink); width: 100%;
padding: 2px 0;
}
.gcr-search__input::placeholder { color: var(--gcr-meta); }
.gcr-search__icon { margin-left: auto; font-size: 14px; }
.gcr-search__toggle { display: none; background: none; border: 0; font-size: 16px; cursor: pointer; }
.gcr-search--mobile { display: none; padding-top: 10px; padding-bottom: 14px; }
.gcr-search--mobile.is-open { display: flex; }
.gcr-nav {
display: flex;
justify-content: center;
gap: 36px;
padding-top: 14px;
padding-bottom: 14px;
border-top: 1px solid var(--gcr-ink);
border-bottom: 3px double var(--gcr-ink);
}
.gcr-nav__toggle { display: none; background: none; border: 0; font-size: 18px; cursor: pointer; }
.gcr-nav__list { display: flex; gap: 36px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; justify-content: center; }
.gcr-nav__link { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; }
.gcr-nav__link.is-active, .gcr-nav__link:hover { color: var(--gcr-accent); }
.gcr-crumbs { padding-top: 20px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gcr-meta); }
.gcr-crumbs a:hover { color: var(--gcr-accent); }
.gcr-crumbs__sep { margin: 0 6px; color: var(--gcr-meta-light); }
.gcr-crumbs__current { color: var(--gcr-ink); }
/* ---------- Footer ---------- */
/* Three zones on three planes, because the links here are three different
kinds. Flat and undifferentiated, this was the weakest block on the site:
section browsing, company pages and legal notices all rendered at one
weight in one grid — and a six-child/five-column mismatch dropped the last
column underneath the wordmark, which is why it looked like loose links
floating beneath the brand.
Depth here is tonal rather than shadow: the page steps DOWN into the
footer — ink, then a slightly raised utility band, then the deepest bottom
bar — each separated by a hairline. Three surfaces, no gradients. */
.gcr-footer { background: var(--gcr-ink); color: var(--gcr-footer-text); margin-top: 56px; position: relative; }
.gcr-footer::before {
content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
background: linear-gradient(90deg, var(--gcr-accent) 0%, var(--gcr-logo-red) 42%, transparent 100%);
}
/* Zone 1 — brand + sections. The subsite columns are their own nested grid,
so their number can change without the outer layout breaking. */
.gcr-footer__top {
display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 2.75fr);
gap: 56px; padding: 52px var(--gcr-gutter) 40px;
}
.gcr-footer__sites { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.gcr-footer__brand p { font-size: 13.5px; line-height: 1.65; max-width: 34ch; color: var(--gcr-footer-text); margin: 16px 0 0; }
/* Link species 1 — section lists, under a head carrying its own accent tick. */
.gcr-footer__col { display: flex; flex-direction: column; gap: 10px; }
.gcr-footer__col-head {
position: relative; padding-top: 12px; margin-bottom: 2px;
font-family: var(--gcr-font-sans); font-size: 11px; letter-spacing: .18em;
text-transform: uppercase; color: var(--gcr-paper); font-weight: 600;
}
.gcr-footer__col-head::before {
content: ""; position: absolute; top: 0; left: 0; width: 22px; height: 2px; background: var(--gcr-accent);
}
.gcr-footer__col-head:hover { color: var(--gcr-accent-on-dark); }
.gcr-footer__link {
font-size: 13.5px; color: var(--gcr-footer-text);
transition: color .2s var(--gcr-ease), transform .2s var(--gcr-ease);
}
.gcr-footer__link:hover { color: var(--gcr-accent-on-dark); transform: translateX(3px); }
/* Zone 2 — company pages. Raised a shade off the ink and set as bordered
chips: a different species of link, not another category to browse. */
.gcr-footer__utility {
display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
background: #1B1613; padding: 18px 0;
border-top: 1px solid var(--gcr-divider-on-dark); border-bottom: 1px solid var(--gcr-divider-on-dark);
}
.gcr-footer__utility-inner {
display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
width: 100%; max-width: var(--gcr-max-width); margin: 0 auto; padding: 0 var(--gcr-gutter);
}
.gcr-footer__utility-links { display: flex; gap: 10px; flex-wrap: wrap; }
.gcr-footer__utility-links a {
padding: 8px 16px; border: 1px solid var(--gcr-divider-on-dark);
font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gcr-footer-text);
transition: border-color .2s var(--gcr-ease), color .2s var(--gcr-ease), background-color .2s var(--gcr-ease);
}
.gcr-footer__utility-links a:hover {
color: var(--gcr-paper); border-color: var(--gcr-accent); background: rgb(194 65 12 / 16%);
}
/* Zone 3 — legal. The deepest plane and the quietest type on the site. */
.gcr-footer__bottom {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
background: var(--gcr-ink-deep); padding: 16px 0 20px;
font-size: 11px; color: var(--gcr-footer-meta);
}
.gcr-footer__bottom-inner {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
width: 100%; max-width: var(--gcr-max-width); margin: 0 auto; padding: 0 var(--gcr-gutter);
}
.gcr-footer__legal { display: flex; gap: 20px; }
.gcr-footer__legal a { color: var(--gcr-footer-meta); }
.gcr-footer__legal a:hover { color: var(--gcr-accent-on-dark); }
/* ---------- Type helpers ---------- */
.gcr-eyebrow { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gcr-accent); }
.gcr-eyebrow--strong { font-weight: 600; }
.gcr-eyebrow--logo { color: var(--gcr-logo-red); font-weight: 700; letter-spacing: .2em; }
.gcr-meta { font-size: 11px; color: var(--gcr-meta); }
.gcr-meta--light { color: var(--gcr-meta-light); }
.gcr-link-arrow { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gcr-accent); }
.gcr-link-arrow--dark { color: var(--gcr-accent-on-dark); }
/* Bodoni is now the WORDMARK ONLY.
It was first cut back to large headings, on the theory that its hairlines
are legible once the type is big enough. That was wrong for a real reader:
astigmatism smears fine strokes at every size, and a modulated face whose
thin strokes approach 1px is exactly the worst case — the size of the
letter does not rescue the thinnest part of it. So every piece of text a
reader is meant to READ is now Source Serif 4, a low-contrast text face
with even stem weights, and titles carry weight 600 rather than 400 so
there is real stroke width to catch. The wordmark keeps Bodoni because it
is a logo: five known letters, seen not parsed. */
.gcr-wordmark { font-family: var(--gcr-font-display); font-weight: 700; }
.gcr-section-title--label { font-family: var(--gcr-font-sans); }
/* Titles get stem weight and a touch of tracking. Both help when strokes
blur: 600 keeps the thin parts from disappearing, and the extra letter
spacing stops adjacent characters running together as they soften. */
.gcr-article__title, .gcr-hero__title, .gcr-section-title,
.gcr-page-intro__title, .gcr-page__title, .gcr-site-header__title,
.gcr-cat-header__title, .gcr-tag-header__title, .gcr-newsletter__heading,
.gcr-card__title, .gcr-hcard__title, .gcr-cover__title,
.gcr-listrow__title, .gcr-roundup__title, .gcr-post-nav__title {
font-family: var(--gcr-font-serif); font-weight: 600; letter-spacing: .006em;
}
.gcr-section-title { font-family: var(--gcr-font-serif); font-weight: 400; font-size: 34px; margin: 0; }
.gcr-section-title--label { font-family: var(--gcr-font-sans); font-size: 12px; font-weight: 400; letter-spacing: .24em; text-transform: uppercase; margin-bottom: 20px; }
.gcr-section-title--dark { color: var(--gcr-paper); }
.gcr-section-title--sm { font-size: 20px; }
.gcr-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.gcr-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.gcr-chips--sm .gcr-chip { padding: 7px 13px; font-size: 11px; }
.gcr-chip { border: 1px solid var(--gcr-border); padding: 9px 16px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.gcr-chip:hover { border-color: var(--gcr-accent); color: var(--gcr-accent); }
.gcr-btn { display: inline-block; background: var(--gcr-ink); color: var(--gcr-paper); border: none; padding: 13px 26px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; }
.gcr-btn:hover { background: #2a231e; color: var(--gcr-paper); }
.gcr-btn--outline { background: none; color: var(--gcr-ink); border: 1px solid var(--gcr-ink); padding: 12px 28px; font-size: 11px; letter-spacing: .2em; }
.gcr-btn--outline:hover { background: var(--gcr-ink); color: var(--gcr-paper); }
.gcr-btn--block { display: block; width: 100%; text-align: center; }
.gcr-loadmore { padding-top: 26px; }
/* ---------- Grids ---------- */
.gcr-grid { display: grid; gap: 28px; }
.gcr-grid--1 { grid-template-columns: 1fr; }
.gcr-grid--2 { grid-template-columns: repeat(2, 1fr); }
.gcr-grid--3 { grid-template-columns: repeat(3, 1fr); }
.gcr-grid--4 { grid-template-columns: repeat(4, 1fr); gap: 24px; }
/* Site-home's specific "two-up" band (bordered, extra vertical rhythm) —
deliberately a separate class from the generic .gcr-grid--2 above so a
widget-driven 2-post grid elsewhere doesn't inherit this section's chrome. */
.gcr-grid--twoup { grid-template-columns: repeat(2, 1fr); gap: 32px; padding: 32px 0; border-top: 1px solid var(--gcr-rule); border-bottom: 1px solid var(--gcr-rule); margin: 32px 0; }
/* A single widget instance's multi-post output for hero/horizontal layouts
— one flex column, so it occupies exactly one CSS grid cell when a
sidebar's widgets are laid out side by side (see .gcr-band-split etc). */
.gcr-widget-stack { display: flex; flex-direction: column; gap: 18px; }
.gcr-widget-stack .gcr-hcard:first-child, .gcr-widget-stack .gcr-hero:first-child { padding-top: 0; border-top: 0; }
.gcr-band { padding: 38px 0; border-bottom: 1px solid var(--gcr-rule); }
/* Full-bleed bands inside .gcr-main break out with a negative margin. */
.gcr-band--dark, .gcr-band--stone { margin: 0 calc(var(--gcr-gutter) * -1); padding: 40px var(--gcr-gutter) 44px; }
.gcr-band--dark { background: var(--gcr-ink); color: var(--gcr-paper); }
.gcr-band--stone { background: var(--gcr-stone); padding: 34px var(--gcr-gutter) 40px; }
/* ---------- Cards ---------- */
.gcr-card__media { display: block; aspect-ratio: 3/2; overflow: hidden; }
.gcr-card__media img, .gcr-card__media .gcr-img--empty { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.gcr-card--portrait .gcr-card__media { aspect-ratio: 4/5; }
.gcr-img--empty { background: var(--gcr-stone); }
.gcr-card__title { font-family: var(--gcr-font-serif); font-weight: 500; font-size: 19px; line-height: 1.25; margin: 10px 0 6px; }
.gcr-card { display: flex; flex-direction: column; }
.gcr-card .gcr-eyebrow { margin-top: 12px; }
.gcr-hero__media { display: block; aspect-ratio: 16/9; overflow: hidden; margin-bottom: 16px; }
.gcr-hero__media img, .gcr-hero__media .gcr-img--empty { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.gcr-hero--md .gcr-hero__media { aspect-ratio: 3/2; }
.gcr-hero__kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.gcr-hero__title { font-weight: 500; font-size: 38px; line-height: 1.12; margin-bottom: 10px; }
.gcr-hero--md .gcr-hero__title { font-size: 26px; line-height: 1.2; }
.gcr-hero__dek { font-size: 16px; line-height: 1.6; color: var(--gcr-body); max-width: 56ch; margin: 0 0 12px; }
.gcr-hero__byline { font-size: 12px; color: var(--gcr-meta); }
.gcr-hcard { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid var(--gcr-rule); }
.gcr-hcard--wide { grid-template-columns: 200px 1fr; gap: 22px; }
.gcr-hcard__media { display: block; aspect-ratio: 1/1; overflow: hidden; }
.gcr-hcard--wide .gcr-hcard__media { aspect-ratio: 3/2; }
.gcr-hcard__media img, .gcr-hcard__media .gcr-img--empty { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.gcr-hcard__title { font-family: var(--gcr-font-serif); font-weight: 500; font-size: 19px; line-height: 1.25; margin: 6px 0; display: block; }
.gcr-hcard--wide .gcr-hcard__title { font-size: 24px; line-height: 1.22; }
.gcr-hcard__kicker { display: flex; align-items: center; gap: 12px; }
.gcr-hcard__dek { font-size: 14px; line-height: 1.5; color: var(--gcr-body); margin: 0 0 6px; }
.gcr-listgroup { list-style: none; margin: 0; padding: 0; }
.gcr-listrow { display: flex; align-items: baseline; gap: 14px; padding: 14px 0; border-top: 1px solid var(--gcr-rule); }
.gcr-listrow__rank { font-family: var(--gcr-font-serif); font-size: 22px; color: var(--gcr-accent); line-height: 1; min-width: 30px; }
.gcr-listrow__label { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--gcr-meta); min-width: 104px; }
.gcr-listrow__title { font-family: var(--gcr-font-serif); font-size: 18px; line-height: 1.35; flex: 1; }
.gcr-listrow__meta { font-size: 11px; color: var(--gcr-meta-light); white-space: nowrap; }
.gcr-listrow--with-image { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 14px; }
.gcr-listrow__media { display: block; width: 56px; height: 56px; flex: none; overflow: hidden; }
.gcr-listrow__media img, .gcr-listrow__media .gcr-img--empty { width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* ---------- Roundup ("Today across Glamcheck") ---------- */
.gcr-roundup { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--gcr-rule); }
.gcr-roundup__cell { background: var(--gcr-paper); padding: 0 22px; display: flex; flex-direction: column; gap: 10px; }
.gcr-roundup__cell:first-child { padding-left: 0; }
.gcr-roundup__cell:last-child { padding-right: 0; }
.gcr-roundup__title { font-family: var(--gcr-font-serif); font-size: 19px; line-height: 1.25; }
.gcr-roundup__media { display: block; aspect-ratio: 3/2; overflow: hidden; }
.gcr-roundup__media img, .gcr-roundup__media .gcr-img--empty { width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* ---------- Ad ---------- */
.gcr-ad { display: flex; flex-direction: column; gap: 8px; }
.gcr-ad__label { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--gcr-meta-light); }
.gcr-ad__slot {
border: 1px solid var(--gcr-rule); background: var(--gcr-tint); width: 100%;
display: flex; align-items: center; justify-content: center;
font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--gcr-meta-light);
}
.gcr-article-ad { display: flex; justify-content: center; width: 100%; margin: 32px 0; clear: both; }
.gcr-article-ad--bottom { margin-top: 40px; }
/* ---------- Newsletter ---------- */
.gcr-newsletter { background: var(--gcr-stone); padding: 34px; }
/* In a 260–320px rail the 34px/30px band sizing left the heading breaking
across three lines against the panel edge. Compact variant, scoped to the
two rails rather than a new modifier the templates would have to pass. */
.gcr-article-layout__aside .gcr-newsletter,
.gcr-site-body__aside .gcr-newsletter,
.gcr-hub-body__aside .gcr-newsletter { padding: 24px 22px; }
.gcr-article-layout__aside .gcr-newsletter__heading,
.gcr-site-body__aside .gcr-newsletter__heading,
.gcr-hub-body__aside .gcr-newsletter__heading {
font-size: 23px; line-height: 1.15; margin: 10px 0 8px; text-wrap: balance;
}
.gcr-article-layout__aside .gcr-newsletter__body,
.gcr-site-body__aside .gcr-newsletter__body,
.gcr-hub-body__aside .gcr-newsletter__body { font-size: 13.5px; line-height: 1.5; margin-bottom: 16px; }
.gcr-article-layout__aside .gcr-newsletter__input,
.gcr-site-body__aside .gcr-newsletter__input,
.gcr-hub-body__aside .gcr-newsletter__input { padding: 11px 12px; font-size: 13px; }
.gcr-article-layout__aside .gcr-newsletter__submit,
.gcr-site-body__aside .gcr-newsletter__submit,
.gcr-hub-body__aside .gcr-newsletter__submit { padding: 11px; font-size: 11px; }
.gcr-newsletter__input::placeholder { color: var(--gcr-meta); opacity: 1; }
.gcr-newsletter--dark .gcr-newsletter__input::placeholder { color: var(--gcr-on-dark-meta); }
.gcr-newsletter--dark { background: var(--gcr-ink); color: var(--gcr-paper); }
.gcr-newsletter--dark .gcr-newsletter__body { color: var(--gcr-footer-text); }
.gcr-newsletter__heading { font-weight: 400; font-size: 30px; margin: 12px 0 10px; }
.gcr-newsletter__body { font-size: 15px; line-height: 1.6; color: var(--gcr-body); margin: 0 0 20px; }
.gcr-newsletter__form { display: flex; flex-direction: column; gap: 10px; }
.gcr-newsletter__input {
background: var(--gcr-paper); border: 1px solid var(--gcr-border); padding: 13px 14px; font: inherit; font-size: 14px; color: var(--gcr-ink);
}
.gcr-newsletter--dark .gcr-newsletter__input { background: rgba(251,249,246,.1); border-color: rgba(251,249,246,.25); color: var(--gcr-paper); }
.gcr-newsletter__submit { background: var(--gcr-ink); color: var(--gcr-paper); border: none; padding: 13px; font: inherit; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; }
.gcr-newsletter--dark .gcr-newsletter__submit { background: var(--gcr-accent); }
/* ---------- Home: lead well ---------- */
.gcr-lead-well { display: grid; grid-template-columns: 1.55fr 1fr; gap: 32px; padding: 32px 0 36px; border-bottom: 1px solid var(--gcr-rule); }
.gcr-lead-well__side { display: flex; flex-direction: column; gap: 24px; }
.gcr-lead-well__side .gcr-hero { padding-top: 22px; border-top: 1px solid var(--gcr-rule); }
.gcr-lead-well__side .gcr-hero:first-child { padding-top: 0; border-top: 0; }
/* ---------- Home: entertainment / health split bands ---------- */
.gcr-band-split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px; align-items: start; }
.gcr-band-split--health { grid-template-columns: 1fr 1.25fr; }
.gcr-band-split__list { display: flex; flex-direction: column; }
.gcr-band--dark .gcr-hcard, .gcr-band--dark .gcr-listrow { border-color: var(--gcr-divider-on-dark); }
.gcr-band--dark .gcr-eyebrow { color: var(--gcr-accent-on-dark); }
.gcr-band--dark .gcr-meta { color: var(--gcr-on-dark-meta); }
.gcr-band--dark .gcr-hcard__title a, .gcr-band--dark .gcr-hero__title a { color: var(--gcr-paper); }
.gcr-health-intro { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.gcr-health-intro .gcr-card { margin-top: 8px; }
/* ---------- Home: most-read + newsletter band ---------- */
.gcr-mostread-band { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; padding: 40px 0; }
/* ---------- Subsite home ---------- */
.gcr-site-header { display: flex; align-items: center; gap: 24px; padding: 22px 0 18px; border-bottom: 1px solid var(--gcr-rule); flex-wrap: wrap; }
.gcr-site-header__title { font-size: 40px; }
.gcr-site-header__standfirst { margin: 0; font-size: 14px; line-height: 1.5; color: var(--gcr-meta); max-width: 44ch; }
/* The subsite's own categories. Nearly all the editorial content on this
network sits inside these, so on a subsite this — not the network row above
it — is the navigation that matters, and it is weighted to say so: a tinted
full-bleed band, real tap targets, and the open section filled solid rather
than merely coloured. */
.gcr-subnav { max-width: var(--gcr-max-width); margin: 0 auto; padding: 14px var(--gcr-gutter) 2px; }
/* Lifted off the page as a pale toolbar rather than stamped into it as a
tinted band. The band version sat flush against the nav above and read as
more masthead; floating it on white separates the site's own sections from
the network row and lets the chips breathe. */
.gcr-subnav__inner {
display: flex; gap: 4px; flex-wrap: wrap; align-items: center;
padding: 7px; background: var(--gcr-paper);
border: 1px solid var(--gcr-rule);
box-shadow: 0 1px 2px rgb(28 20 14 / 5%), 0 10px 22px -12px rgb(28 20 14 / 26%);
}
.gcr-subnav__link {
padding: 9px 15px; border: 1px solid transparent;
font-family: var(--gcr-font-sans); font-size: 12px; font-weight: 600;
letter-spacing: .11em; text-transform: uppercase; color: var(--gcr-body);
white-space: nowrap;
transition: color .2s var(--gcr-ease), background-color .2s var(--gcr-ease), border-color .2s var(--gcr-ease);
}
.gcr-subnav__link:hover { color: var(--gcr-accent); border-color: var(--gcr-border); background: var(--gcr-tint); }
.gcr-subnav__link.is-active {
color: var(--gcr-paper); background: var(--gcr-ink); border-color: var(--gcr-ink);
}
.gcr-subnav__link.is-active:hover { color: var(--gcr-paper); background: #2A231E; }
.gcr-site-body { display: grid; grid-template-columns: 1fr 320px; gap: 44px; padding: 30px 0 44px; }
.gcr-site-body__main .gcr-hero { padding-bottom: 32px; border-bottom: 1px solid var(--gcr-rule); margin-bottom: 32px; }
.gcr-site-body__more { padding-top: 6px; }
.gcr-site-body__aside { display: flex; flex-direction: column; gap: 28px; }
.gcr-sidebar-block { display: flex; flex-direction: column; gap: 4px; }
.gcr-sidebar-block--stone { background: var(--gcr-stone); padding: 22px; gap: 10px; }
/* ---------- Category archive ---------- */
.gcr-cat-header { padding: 16px 0 20px; border-bottom: 3px double var(--gcr-ink); }
.gcr-cat-header__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.gcr-cat-header__title { font-size: 56px; line-height: 1; }
.gcr-cat-header__standfirst { margin: 12px 0 0; font-size: 16px; line-height: 1.6; color: var(--gcr-body); max-width: 56ch; }
.gcr-cat-header__count { text-align: right; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gcr-meta); white-space: nowrap; }
.gcr-cat-header__count-num { display: block; font-family: var(--gcr-font-serif); font-size: 34px; color: var(--gcr-ink); letter-spacing: 0; }
.gcr-cat-header__siblings { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 22px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.gcr-cat-lead { display: grid; grid-template-columns: 1.5fr 1fr; gap: 36px; padding: 32px 0; border-bottom: 1px solid var(--gcr-rule); }
.gcr-cat-lead__side { display: flex; flex-direction: column; gap: 22px; }
.gcr-cat-feed { padding: 30px 0 10px; }
.gcr-sortlinks { display: flex; gap: 18px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.gcr-sortlinks a.is-active { color: var(--gcr-accent); font-weight: 700; }
/* ---------- Tag archive ---------- */
.gcr-tag-header { padding: 26px 0 20px; border-bottom: 1px solid var(--gcr-ink); }
.gcr-tag-header__title { font-size: 64px; line-height: 1; margin-top: 8px; }
.gcr-tag-header__definition { font-size: 16px; line-height: 1.6; max-width: 62ch; color: var(--gcr-body); margin: 12px 0 20px; }
.gcr-tag-filter { display: flex; gap: 26px; flex-wrap: wrap; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.gcr-tag-filter a.is-active { color: var(--gcr-accent); font-weight: 700; }
.gcr-tag-body { display: grid; grid-template-columns: 1fr 300px; gap: 44px; padding: 28px 0 46px; }
.gcr-tag-rows { list-style: none; margin: 0; padding: 0; }
.gcr-tag-body__aside { display: flex; flex-direction: column; gap: 24px; }
/* ---------- Topics A–Z ---------- */
.gcr-topics { padding: 38px 0; }
.gcr-topics__intro { font-size: 14px; color: var(--gcr-meta); max-width: 60ch; }
.gcr-topics__jump { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px; margin: 16px 0 24px; }
.gcr-topics__jump a { border: 1px solid var(--gcr-border); padding: 4px 9px; }
.gcr-topics__cols { columns: 4; column-gap: 32px; }
.gcr-topics__col { break-inside: avoid; margin-bottom: 20px; }
.gcr-topics__letter { display: block; font-family: var(--gcr-font-serif); font-size: 20px; color: var(--gcr-accent); margin-bottom: 8px; }
.gcr-topics__tag { display: block; font-size: 14px; padding: 4px 0; }
/* ---------- Single article ---------- */
.gcr-progress { position: sticky; top: 0; z-index: 20; height: 3px; background: var(--gcr-rule); }
.gcr-progress__bar { height: 100%; width: 0; background: var(--gcr-accent); }
.gcr-article-layout { display: grid; grid-template-columns: 160px 1fr 260px; gap: 40px; padding: 30px 0; align-items: start; }
.gcr-article-layout__toc { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 24px; }
.gcr-toc { display: flex; flex-direction: column; gap: 8px; }
.gcr-toc__label { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--gcr-meta); }
.gcr-toc__link { font-size: 13px; line-height: 1.4; color: var(--gcr-body); }
.gcr-toc__link--h3 { padding-left: 10px; }
.gcr-share__row { display: flex; gap: 8px; }
.gcr-share__btn { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--gcr-border); font-size: 12px; cursor: pointer; background: none; }
.gcr-share__btn:hover { border-color: var(--gcr-accent); color: var(--gcr-accent); }
.gcr-toc-mobile { display: none; }
.gcr-article__title {
font-size: 42px; line-height: 1.2; margin: 10px 0 14px;
color: var(--gcr-ink); text-wrap: balance;
}
.gcr-article__dek { font-size: 17px; line-height: 1.6; color: var(--gcr-body); margin: 0 0 18px; }
.gcr-article__byline { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--gcr-rule); border-bottom: 1px solid var(--gcr-rule); margin-bottom: 24px; font-size: 13px; }
.gcr-article__avatar { border-radius: 50%; }
.gcr-article__byline-text { display: flex; flex-direction: column; gap: 4px; }
/* The reading column. Set in the text serif rather than the UI sans, at a
measure of ~68ch — long-form body copy is the one place on the site where
the type should be doing nothing but being easy to read. */
.gcr-article__body {
font-family: var(--gcr-font-serif);
font-size: 19px; line-height: 1.72; letter-spacing: .003em;
color: var(--gcr-ink);
}
/* The 68ch measure belongs to the TEXT, not to the column. Holding it on the
container was capping every photograph at reading width too, which is why
`width: min(100%, 980px)` on a figure could never do anything — 100% was
already the measure. Moving it onto the text children lets photography use
the full article column while the prose stays at a readable line length. */
.gcr-article__body > p,
.gcr-article__body > h2,
.gcr-article__body > h3,
.gcr-article__body > h4,
.gcr-article__body > ul,
.gcr-article__body > ol,
.gcr-article__body > blockquote,
.gcr-article__body > table { max-width: 68ch; }
.gcr-article__body > p:first-of-type { font-size: 21px; line-height: 1.62; color: var(--gcr-body); }
.gcr-article__body p { margin: 0 0 24px; }
.gcr-article__body h2, .gcr-article__body h3 { font-family: var(--gcr-font-serif); font-weight: 600; text-wrap: balance; }
.gcr-article__body h2 { font-size: 29px; line-height: 1.2; margin: 44px 0 14px; }
.gcr-article__body h3 { font-size: 23px; line-height: 1.25; margin: 32px 0 12px; }
.gcr-article__body ul, .gcr-article__body ol { margin: 0 0 24px; padding-left: 24px; }
.gcr-article__body li { margin-bottom: 10px; }
.gcr-article__body li::marker { color: var(--gcr-accent); }
.gcr-article__body strong { font-weight: 600; }
.gcr-article__body hr { border: 0; border-top: 1px solid var(--gcr-rule); margin: 40px 0; }
/* Links carry their underline on the text, not through the descenders, and
only thicken on hover — an editorial page is dense with them. */
.gcr-article__body a {
color: var(--gcr-accent); text-decoration: underline;
text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.gcr-article__body a:hover { text-decoration-thickness: 2px; }
.gcr-article__body blockquote {
border-left: 3px double var(--gcr-ink); padding-left: 22px; margin: 32px 0;
font-family: var(--gcr-font-serif); font-size: 22px; line-height: 1.5; color: var(--gcr-ink);
}
.gcr-article__body blockquote p:last-child { margin-bottom: 0; }
/* ---------- Article images ---------- */
/* Editorial photos break out past the 68ch measure so they read as pictures
rather than as inline attachments, get the same elevation as everything
else, and carry their caption as real, styled text. width/height still come
from WordPress on the ![]()
itself, so nothing shifts while they load. */
.gcr-article__body img { margin: 0; width: 100%; height: auto; box-shadow: var(--gcr-shadow-lg); }
.gcr-article__body figure,
.gcr-article__body .wp-block-image,
.gcr-article__body p > img { margin: 34px 0; }
.gcr-article__body figure > img, .gcr-article__body .wp-block-image img { display: block; }
.gcr-article__body figcaption, .gcr-article__body .wp-caption-text {
margin-top: 10px; padding-left: 14px; border-left: 2px solid var(--gcr-accent);
font-family: var(--gcr-font-sans); font-size: 12.5px; line-height: 1.5; color: var(--gcr-meta);
}
.gcr-article__body .alignleft, .gcr-article__body .alignright { max-width: 46%; }
.gcr-article__body .alignleft { float: left; margin: 8px 28px 20px 0; }
.gcr-article__body .alignright { float: right; margin: 8px 0 20px 28px; }
.gcr-article__body .aligncenter { margin-left: auto; margin-right: auto; }
/* Editorial photography is the point of these articles, so it runs the full
width of the article column and carries a heavier cast than anything else
on the page. It stays inside that column — never a true full-bleed — so it
never collides with the contents rail or the sidebar. */
.gcr-article__body > figure,
.gcr-article__body > .wp-block-image,
.gcr-article__body > .wp-caption { max-width: none; width: 100%; }
.gcr-article__body > figure img,
.gcr-article__body > .wp-block-image img,
.gcr-article__body > .wp-caption img {
box-shadow:
0 2px 4px rgb(28 20 14 / 8%),
0 10px 22px -6px rgb(28 20 14 / 15%),
0 34px 64px -22px rgb(28 20 14 / 28%);
}
/* Legacy posts wrap a bare image in a . Kept in its own rule: one
unsupported selector in a list invalidates the whole rule, and without
:has() these simply keep the text measure rather than losing the styling
above. */
.gcr-article__body > p:has(> img:only-child) { max-width: none; }
.gcr-tags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 32px 0; }
.gcr-tags__label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gcr-meta); }
.gcr-post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 24px 0; border-top: 1px solid var(--gcr-rule); border-bottom: 1px solid var(--gcr-rule); margin-bottom: 32px; }
.gcr-post-nav__item--next { text-align: right; }
.gcr-post-nav__label { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gcr-meta); margin-bottom: 6px; }
.gcr-post-nav__title { font-family: var(--gcr-font-serif); font-size: 17px; }
.gcr-comments { margin-top: 32px; }
.gcr-comment-list { list-style: none; margin: 0; padding: 0; }
.gcr-comments-area .comment-form input, .gcr-comments-area .comment-form textarea {
width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--gcr-border); background: var(--gcr-paper);
}
/* ---------- Generic page/hub layouts ---------- */
.gcr-page-intro { padding: 30px 0 20px; border-bottom: 1px solid var(--gcr-rule); }
.gcr-page-intro__title { font-size: 44px; margin-top: 8px; }
.gcr-page-intro__blurb { font-size: 15px; color: var(--gcr-body); max-width: 56ch; }
.gcr-page__title { font-size: 40px; margin: 30px 0 20px; }
.gcr-hub-body { display: grid; grid-template-columns: 1fr 300px; gap: 40px; padding: 30px 0; }
.gcr-hub-body__aside { display: flex; flex-direction: column; gap: 24px; }
.gcr-pagination { margin: 30px 0; padding-top: 20px; border-top: 1px solid var(--gcr-rule); }
.gcr-pagination__links { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.gcr-pagination__links a, .gcr-pagination__links span {
display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px;
padding: 0 8px; font-size: 12px; border: 1px solid var(--gcr-border);
}
.gcr-pagination__links .current { background: var(--gcr-ink); color: var(--gcr-paper); border-color: var(--gcr-ink); }
.gcr-pagination__links .dots { border: none; color: var(--gcr-meta-light); }
/* ---------- End-of-article bands: Related reading + More in ---------- */
/* These two stacked recommendation blocks used to render as two more copies
of the same 4-up grid the reader had just scrolled past, so they read as
filler rather than as an invitation. Restyled here in CSS plus the
existing card markup only: same lazy ![]()
with explicit width/height (no
extra request, nothing shifts), headlines stay real