/*
* Worldghoomo — compiled design-system stylesheet.
* Tokens match the design handoff exactly (see the bundled README). One
* file, no build step, no framework: keeps the payload small and the cascade
* legible. Mobile-first; the handoff didn't specify responsive rules so the
* breakpoints below are this implementation's own reasonable defaults.
*/
/* ---------------------------------------------------------------------- */
/* Tokens */
/* ---------------------------------------------------------------------- */
:root {
--wg-accent: #9A3412;
/* Logo only: "World" orange, "Ghoomo" (travel) green. Both clear the
3:1 large-text floor on --wg-paper; a lighter green does not. */
--wg-brand-orange: #D9531E;
--wg-brand-green: #559C28;
--wg-ink: #211714;
/* Page ground. Was #FCFAF7 — a warm off-white that read as dull under this
much photography: every image sat on a slightly grey field so nothing
looked crisp. White lets the pictures supply the colour, and separation
now comes from hairlines and the elevation tokens below rather than from
tinting anything. Same move the sibling Glamcheck theme made, for the
same reason. --wg-paper doubles as light-on-dark text inside the ink
bands, where white is also correct. */
--wg-paper: #FFFFFF;
--wg-surface: #FFFFFF;
/* Warm utility tint. Editorial modules stay on white and use rules for
separation; the tint is reserved for small non-content surfaces. */
--wg-stone: #F5EFE7;
--wg-rule: #E8E0DA;
--wg-border: #DDD2CB;
--wg-body-dim: #483832;
--wg-body-dimmer: #57453E;
--wg-muted: #75665F;
--wg-muted-light: #95857D;
--wg-faint: #AA9A92;
--wg-rank-grey: #BEAAA1;
--wg-sep-dot: #CDBFB8;
--wg-bar-track: #F1EAE5;
--wg-row-hover: #F8EEE9;
--wg-ad-fill: #F7F2EE;
--wg-ad-border: #D9C7BE;
--wg-selection: #F4D8CC;
/* Elevation. The theme shipped flat — every module on one plane, nothing
leading the eye, which is the other half of why the page read as dull.
Warm-tinted rather than neutral grey on purpose: a raised block should
read as paper lifted off paper, not as UI chrome dropped on an editorial
page. Corners stay square throughout; rounding them would pull the whole
thing toward generic app furniture. */
--wg-shadow-sm: 0 1px 2px rgb(33 23 20 / 6%), 0 2px 6px rgb(33 23 20 / 5%);
--wg-shadow-md: 0 2px 4px rgb(33 23 20 / 7%), 0 8px 18px rgb(33 23 20 / 8%);
--wg-shadow-lg: 0 4px 10px rgb(33 23 20 / 9%), 0 18px 40px rgb(33 23 20 / 13%);
/* On the ink band a drop shadow is invisible, so depth there is a hairline
ring of light plus a deeper cast underneath. */
--wg-ring-dark: 0 0 0 1px rgb(255 255 255 / 8%), 0 10px 30px rgb(0 0 0 / 45%);
--wg-ring-dark-hover: 0 0 0 1px rgb(255 255 255 / 15%), 0 18px 44px rgb(0 0 0 / 55%);
--wg-ease: cubic-bezier(.2, .6, .2, 1);
--wg-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
--wg-sans: Archivo, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--wg-container: 1220px;
--wg-gutter: 28px;
}
/* ---------------------------------------------------------------------- */
/* Reset + base */
/* ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--wg-paper);
color: var(--wg-ink);
font-family: var(--wg-sans);
-webkit-font-smoothing: antialiased;
font-size: 16px;
line-height: 1.4;
}
h1, h2, h3, h4, h5, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; }
a { color: var(--wg-accent); text-decoration: none; }
a:hover { color: var(--wg-ink); text-decoration: underline; text-underline-offset: 3px; }
::selection { background: var(--wg-selection); }
.screen-reader-text {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.wg-skip-link {
position: absolute; left: -9999px; top: 0; z-index: 100;
background: var(--wg-ink); color: #fff; padding: 12px 18px; font-weight: 600;
}
.wg-skip-link:focus { left: 12px; top: 12px; }
:focus-visible { outline: 2px solid var(--wg-accent); outline-offset: 2px; }
.wg-shell { min-height: 100vh; display: flex; flex-direction: column; }
.wg-main { flex: 1; padding-bottom: 72px; }
/* ---------------------------------------------------------------------- */
/* Layout helpers */
/* ---------------------------------------------------------------------- */
.wg-section,
.wg-masthead-inner,
.wg-header-inner,
.wg-footer-upper,
.wg-footer-lower {
max-width: var(--wg-container);
margin: 0 auto;
padding-left: var(--wg-gutter);
padding-right: var(--wg-gutter);
}
.wg-section { padding-top: 52px; }
.wg-hero-section { padding-top: 40px; }
.wg-section-head { border-top: 2px solid var(--wg-ink); padding-top: 14px; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.wg-section-head-split { justify-content: space-between; }
.wg-section-head h2 { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.wg-section-subline { font-size: 13.5px; color: var(--wg-muted); }
.wg-section-h2-rule { border-top: 2px solid var(--wg-ink); padding-top: 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.wg-eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wg-muted); }
.wg-eyebrow-accent { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wg-accent); margin-bottom: 10px; }
.wg-eyebrow-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.wg-badge-pick {
font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--wg-paper); background: var(--wg-accent); padding: 4px 8px; border-radius: 3px;
}
.wg-kicker { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wg-accent); }
.wg-kicker-muted { color: var(--wg-muted); }
.wg-meta { font-size: 12px; color: var(--wg-muted-light); }
.wg-count { font-size: 11.5px; font-weight: 600; color: var(--wg-muted-light); font-variant-numeric: tabular-nums; }
.wg-dot::before { content: "·"; color: var(--wg-sep-dot); margin: 0 4px; }
.wg-more-link { display: inline-block; margin-top: 12px; font-size: 12.5px; font-weight: 600; }
.wg-hairline-grid { display: grid; gap: 1px; background: var(--wg-rule); border: 1px solid var(--wg-rule); margin-top: 18px; }
.wg-hairline-grid-3 { grid-template-columns: repeat(3, 1fr); }
.wg-hairline-grid-4 { grid-template-columns: repeat(4, 1fr); }
.wg-hairline-grid > * { background: var(--wg-surface); }
/* ---------------------------------------------------------------------- */
/* Header */
/* ---------------------------------------------------------------------- */
.wg-header {
position: sticky; top: 0; z-index: 40;
background: rgb(255 255 255 / 92%); backdrop-filter: blur(8px);
border-bottom: 1px solid var(--wg-rule);
}
.wg-header-inner { display: flex; align-items: center; gap: 28px; height: 66px; }
.wg-logo { display: flex; align-items: center; gap: 9px; color: var(--wg-ink); }
.wg-logo:hover { text-decoration: none; }
.wg-logo-word { font-family: var(--wg-serif); font-size: 24px; font-weight: 700; letter-spacing: -0.024em; }
.wg-logo-world { color: var(--wg-brand-orange); }
.wg-logo-ghoomo { color: var(--wg-brand-green); }
.wg-logo img.custom-logo { height: 30px; width: auto; display: block; }
.wg-primary-nav { display: flex; gap: 22px; margin-left: 4px; align-items: center; }
.wg-primary-nav a { font-size: 14px; font-weight: 500; color: var(--wg-ink); }
.wg-primary-nav a:hover { color: var(--wg-ink); }
.wg-nav-archive, .wg-primary-nav .wg-nav-archive { font-weight: 600; }
.wg-nav-archive.is-current, .wg-primary-nav .wg-nav-archive.is-current { color: var(--wg-accent); }
.wg-header-spacer { flex: 1; }
.wg-search {
display: flex; align-items: center; gap: 8px;
border: 1px solid var(--wg-border); border-radius: 4px; background: var(--wg-surface);
padding: 0 10px; height: 36px; width: 240px;
}
.wg-search-icon { font-size: 13px; color: var(--wg-muted-light); }
.wg-search input { border: 0; outline: none; background: none; font-size: 13px; width: 100%; color: var(--wg-ink); }
.wg-search-inline { width: 100%; max-width: 360px; height: 40px; margin: 16px 0; }
.wg-nav-toggle { display: none; flex: none; width: 36px; height: 36px; position: relative; }
.wg-nav-toggle-bars,
.wg-nav-toggle-bars::before,
.wg-nav-toggle-bars::after {
content: ""; position: absolute; left: 8px; right: 8px; height: 2px; background: var(--wg-ink);
}
.wg-nav-toggle-bars { top: 17px; }
.wg-nav-toggle-bars::before { top: -7px; }
.wg-nav-toggle-bars::after { top: 7px; }
/* ---------------------------------------------------------------------- */
/* Hero / home */
/* ---------------------------------------------------------------------- */
.wg-hero-grid { display: grid; grid-template-columns: 1.62fr 1fr; gap: 44px; align-items: start; }
.wg-hero-title { font-family: var(--wg-serif); font-size: 50px; line-height: 1.04; letter-spacing: -0.022em; font-weight: 700; text-wrap: balance; margin-bottom: 16px; }
.wg-hero-title a { color: var(--wg-ink); }
.wg-hero-dek { font-family: var(--wg-serif); font-size: 19px; line-height: 1.55; color: var(--wg-body-dim); max-width: 62ch; text-wrap: pretty; margin-bottom: 18px; }
.wg-hero-image { width: 100%; height: 380px; }
.wg-hero-image a,
.wg-rail-thumb a,
.wg-month-card-image a { display: block; width: 100%; height: 100%; }
.wg-hero-image img, .wg-hero-image svg { width: 100%; height: 100%; object-fit: cover; }
.wg-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 12.5px; color: var(--wg-muted); margin-bottom: 22px; }
.wg-byline a { font-weight: 600; color: var(--wg-accent); }
.wg-byline .wg-dot { color: var(--wg-sep-dot); }
.wg-byline .wg-updated-note { color: var(--wg-accent); font-weight: 600; }
.wg-rail-head { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 2px solid var(--wg-ink); padding-bottom: 8px; margin-bottom: 4px; }
.wg-rail-head h2 { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.wg-rail-head a { font-size: 12px; font-weight: 600; }
.wg-rail-list li { display: grid; grid-template-columns: 84px 1fr; gap: 16px; align-items: center; border-bottom: 1px solid var(--wg-rule); padding: 15px 0; }
.wg-rail-thumb { width: 84px; height: 64px; flex: none; overflow: hidden; }
.wg-rail-thumb img, .wg-rail-thumb svg { width: 100%; height: 100%; object-fit: cover; }
.wg-rail-body { min-width: 0; }
.wg-rail-list h3 { font-family: var(--wg-serif); font-size: 18.5px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; text-wrap: pretty; margin-top: 5px; }
.wg-rail-list h3 a { color: var(--wg-ink); }
.wg-rail-list .wg-meta { margin-top: 6px; }
.wg-evergreen-card, .wg-pinned-card { padding: 22px 20px 20px; display: flex; flex-direction: column; gap: 10px; }
.wg-pinned-card { padding: 24px 22px; gap: 11px; }
.wg-pinned-card-image { width: calc(100% + 44px); height: 150px; margin: -24px -22px 4px; overflow: hidden; }
.wg-pinned-card-image a, .wg-showcase-thumb a { display: block; width: 100%; height: 100%; }
.wg-pinned-card-image img, .wg-pinned-card-image svg { width: 100%; height: 100%; object-fit: cover; }
.wg-evergreen-card h3 a, .wg-pinned-card h3 a { color: var(--wg-ink); }
.wg-evergreen-card h3 { font-family: var(--wg-serif); font-size: 21px; line-height: 1.24; font-weight: 600; letter-spacing: -0.012em; text-wrap: pretty; }
.wg-pinned-card h3 { font-family: var(--wg-serif); font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -0.016em; text-wrap: pretty; }
.wg-evergreen-card p, .wg-pinned-card p { font-size: 13.5px; line-height: 1.5; color: var(--wg-body-dimmer); text-wrap: pretty; flex: 1; }
.wg-pinned-card p { font-size: 14px; line-height: 1.52; }
.wg-updated-row { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--wg-accent); font-weight: 600; padding-top: 4px; }
.wg-dot-accent { width: 6px; height: 6px; border-radius: 50%; background: var(--wg-accent); flex: none; }
.wg-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.wg-chip-row-tight { gap: 6px; margin-top: 12px; }
.wg-chip {
display: inline-flex; align-items: baseline; gap: 8px;
border: 1px solid var(--wg-border); background: var(--wg-surface); border-radius: 4px;
padding: 9px 13px; color: var(--wg-ink); font-size: 14px; font-weight: 500;
}
.wg-chip-sm { padding: 7px 11px; font-size: 13px; }
.wg-chip:hover { border-color: var(--wg-accent); color: var(--wg-accent); text-decoration: none; }
.wg-chip-count { font-size: 11.5px; font-weight: 600; color: var(--wg-muted-light); font-variant-numeric: tabular-nums; }
.wg-chip.is-filled, .wg-chip.is-active { background: var(--wg-ink); border-color: var(--wg-ink); color: #fff; }
.wg-chip.is-filled:hover, .wg-chip.is-active:hover { color: #fff; }
.wg-chip-count-inverted { color: rgba(255,255,255,0.55); }
.wg-card-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 30px; margin-top: 26px; }
.wg-card-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 30px; margin-top: 26px; }
.wg-month-card { display: flex; flex-direction: column; gap: 12px; }
.wg-month-card-image { width: 100%; height: 178px; }
.wg-month-card-image img, .wg-month-card-image svg { width: 100%; height: 100%; object-fit: cover; }
.wg-widget-image-size-thumbnail { height: 150px; }
.wg-widget-image-size-medium { height: 220px; }
.wg-widget-image-size-medium_large { height: 280px; }
.wg-widget-image-size-large { height: 360px; }
.wg-widget-image-size-wg-feed { height: 248px; }
.wg-widget-image-size-wg-hero { height: 380px; }
.wg-month-card h3 { font-family: var(--wg-serif); font-size: 22px; line-height: 1.22; font-weight: 600; letter-spacing: -0.014em; text-wrap: pretty; }
.wg-month-card h3 a { color: var(--wg-ink); }
.wg-month-card p { font-size: 14px; line-height: 1.5; color: var(--wg-body-dimmer); text-wrap: pretty; }
.wg-deep-grid { display: grid; grid-template-columns: repeat(3, 1fr) 300px; gap: 40px; margin-top: 24px; align-items: start; }
.wg-deep-col-head { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--wg-ink); padding-bottom: 7px; }
.wg-deep-col-head h3 { font-family: var(--wg-serif); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.wg-rank-list li { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--wg-rule); }
.wg-rank-list-plain li { padding: 10px 0; }
.wg-rank { font-size: 12px; font-weight: 700; color: var(--wg-rank-grey); font-variant-numeric: tabular-nums; padding-top: 2px; }
.wg-rank-list h4 { font-family: var(--wg-serif); font-size: 16.5px; line-height: 1.3; font-weight: 600; text-wrap: pretty; }
.wg-rank-list h4 a { color: var(--wg-ink); }
.wg-rank-list .wg-meta { margin-top: 4px; }
.wg-home-sidebar { display: flex; flex-direction: column; gap: 24px; }
.wg-newsletter-card { border: 1px solid var(--wg-ink); border-top: 4px solid var(--wg-accent); padding: 24px 22px; background: var(--wg-paper); }
.wg-newsletter-kicker { display: block; color: var(--wg-accent); font-size: 10px; line-height: 1; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.wg-newsletter-card h2 { margin-top: 10px; font-family: var(--wg-serif); font-size: 23px; line-height: 1.15; font-weight: 600; letter-spacing: -0.014em; text-wrap: balance; }
.wg-newsletter-card p { margin: 8px 0 0; color: var(--wg-body-dimmer); font-size: 13.5px; line-height: 1.5; }
.wg-newsletter-form { display: flex; flex-direction: column; gap: 9px; margin-top: 17px; }
.wg-newsletter-form input { width: 100%; border: 1px solid var(--wg-border); border-radius: 0; background: var(--wg-paper); padding: 11px 12px; color: var(--wg-ink); font: inherit; font-size: 13px; outline: none; }
.wg-newsletter-form input::placeholder { color: var(--wg-muted); opacity: 1; }
.wg-newsletter-form input:focus-visible { border-color: var(--wg-ink); box-shadow: 0 0 0 2px var(--wg-selection); }
.wg-newsletter-form button { border: 0; border-radius: 0; background: var(--wg-ink); padding: 12px; color: var(--wg-paper); font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-align: center; text-transform: uppercase; cursor: pointer; }
.wg-newsletter-form button:hover { background: var(--wg-accent); }
.wg-newsletter-form button:focus-visible { outline: 2px solid var(--wg-accent); outline-offset: 2px; }
.wg-newsletter-honeypot { position: absolute !important; left: -9999px !important; }
.wg-newsletter-message { margin-top: 16px !important; color: var(--wg-ink) !important; }
.wg-newsletter-message--error { color: var(--wg-accent) !important; }
.wg-newsletter-count { margin-top: 10px !important; color: var(--wg-muted-light) !important; font-size: 11.5px !important; }
/* .wg-ad only ever wraps a real creative now — an unconfigured or empty slot
* renders nothing at all (see wg_ad_slot()). The dashed placeholder look moved
* to .wg-ad-placeholder, which only the Customizer preview emits. */
.wg-ad { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; margin-top: 44px; }
.wg-ad-placeholder { border: 1px dashed var(--wg-ad-border); background: var(--wg-ad-fill); }
.wg-ad-large-rectangle { width: 100%; max-width: 336px; margin-right: auto; margin-left: auto; overflow: hidden; }
.wg-ad-mrec { margin-top: 0; }
.wg-ad-skyscraper { width: 100%; max-width: 300px; height: 600px; margin-top: 0; overflow: hidden; }
.wg-ad-article-inline { width: 100%; max-width: 336px; height: 280px; margin: 28px auto; overflow: hidden; }
.wg-ad-widget { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; overflow: hidden; }
.wg-ad-widget .adsbygoogle { max-width: 100%; }
.wg-ad-eyebrow { font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wg-faint); }
.wg-ad-dims { font-size: 12px; color: var(--wg-faint); }
/* ---------------------------------------------------------------------- */
/* Masthead (archive + destination hub + generic archive) */
/* ---------------------------------------------------------------------- */
.wg-masthead { border-bottom: 1px solid var(--wg-rule); background: var(--wg-surface); }
.wg-masthead-inner { padding-top: 26px; padding-bottom: 34px; }
/* Breadcrumb-only masthead: no title to give the band height. */
.wg-masthead-slim .wg-masthead-inner { padding-top: 18px; padding-bottom: 18px; }
.wg-breadcrumb { font-size: 12px; color: var(--wg-muted-light); margin-bottom: 18px; }
.wg-breadcrumb a { color: var(--wg-muted-light); }
.wg-breadcrumb .wg-sep { color: var(--wg-sep-dot); margin: 0 2px; }
.wg-breadcrumb .wg-current { color: var(--wg-ink); font-weight: 600; }
.wg-masthead-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: end; }
.wg-masthead h1 { font-family: var(--wg-serif); font-size: 46px; line-height: 1.05; letter-spacing: -0.022em; font-weight: 700; }
.wg-standfirst { font-family: var(--wg-serif); font-size: 18px; line-height: 1.55; color: var(--wg-body-dim); margin-top: 14px; max-width: 58ch; text-wrap: pretty; }
.wg-stat-grid dt { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wg-muted-light); }
.wg-stat-grid dd { font-family: var(--wg-serif); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.wg-stat-grid > div { padding: 16px 14px; }
.wg-hub-head-grid { display: grid; grid-template-columns: 1fr; gap: 52px; align-items: end; }
.wg-hub-head-grid h1 { font-family: var(--wg-serif); font-size: 52px; line-height: 1.02; letter-spacing: -0.026em; font-weight: 700; }
.wg-hub-stats { display: flex; gap: 28px; align-items: flex-end; justify-content: flex-end; }
.wg-hub-stats .wg-stat-value { font-family: var(--wg-serif); font-size: 40px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.wg-sub-nav { margin-top: 26px; gap: 7px; }
/* ---------------------------------------------------------------------- */
/* Treemap */
/* ---------------------------------------------------------------------- */
.wg-treemap { display: flex; flex-direction: column; gap: 18px; margin-top: 22px; }
.wg-treemap-region-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 7px; }
.wg-treemap-region-head h3 { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wg-ink); }
.wg-treemap-rule { flex: 1; height: 1px; background: var(--wg-rule); }
.wg-treemap-tiles { display: flex; gap: 3px; }
.wg-treemap-tiles-standalone { margin-top: 22px; flex-wrap: wrap; height: auto !important; }
.wg-treemap-tiles-standalone .wg-treemap-tile { min-height: 74px; }
.wg-treemap-tile {
flex: 1 1 0; min-width: 54px; border-radius: 3px; padding: 9px 10px;
text-align: left; display: flex; flex-direction: column; justify-content: space-between;
overflow: hidden; transition: transform .12s ease; border: 1px solid rgba(23,19,32,0.10);
color: inherit;
}
.wg-treemap-tile:hover { transform: translateY(-2px); text-decoration: none; }
.wg-treemap-tile.is-active { background: var(--wg-ink) !important; border-color: var(--wg-ink) !important; color: #fff !important; }
.wg-tile-name { font-size: 12.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wg-tile-count { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; opacity: .9; }
/* ---------------------------------------------------------------------- */
/* Facets (topic / trip-type bars) */
/* ---------------------------------------------------------------------- */
.wg-facets-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 22px; }
.wg-facet-group-label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wg-muted-light); margin-bottom: 10px; }
.wg-facet-row {
width: 100%; display: grid; grid-template-columns: 168px 1fr 46px; align-items: center;
gap: 14px; padding: 7px 4px; border-radius: 3px; color: inherit;
}
.wg-facet-row:hover, .wg-facet-row:focus-visible { background: var(--wg-row-hover); text-decoration: none; }
.wg-facet-name { font-size: 14px; font-weight: 500; color: var(--wg-ink); }
.wg-facet-row.is-active .wg-facet-name { font-weight: 600; color: var(--wg-accent); }
.wg-facet-track { height: 9px; background: var(--wg-bar-track); border-radius: 2px; overflow: hidden; display: block; }
.wg-facet-fill { display: block; height: 100%; background: var(--wg-accent); }
.wg-facet-count { font-size: 13px; font-weight: 600; color: var(--wg-muted); font-variant-numeric: tabular-nums; text-align: right; }
/* ---------------------------------------------------------------------- */
/* Filter chips + index */
/* ---------------------------------------------------------------------- */
.wg-filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.wg-filter-label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wg-muted-light); }
.wg-filter-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--wg-accent); color: #fff; border-radius: 4px; padding: 7px 11px; font-size: 13px; font-weight: 600; }
.wg-filter-chip:hover { background: var(--wg-ink); color: #fff; text-decoration: none; }
.wg-chip-x { opacity: .7; }
.wg-clear-all { font-size: 12.5px; font-weight: 600; color: var(--wg-accent); padding: 7px 4px; }
.wg-clear-all:hover { color: var(--wg-ink); }
/* Archive "Browse by topic" showcase */
.wg-showcase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 30px; margin-top: 24px; align-items: start; }
.wg-showcase-list { display: flex; flex-direction: column; margin-top: 4px; }
.wg-showcase-list li { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--wg-rule); }
.wg-showcase-thumb { width: 72px; height: 54px; overflow: hidden; }
.wg-showcase-thumb img, .wg-showcase-thumb svg { width: 100%; height: 100%; object-fit: cover; }
.wg-showcase-body { min-width: 0; }
.wg-showcase-list h4 { font-family: var(--wg-serif); font-size: 15.5px; line-height: 1.3; font-weight: 600; text-wrap: pretty; }
.wg-showcase-list h4 a { color: var(--wg-ink); }
.wg-showcase-list .wg-meta { margin-top: 3px; font-size: 11.5px; }
.wg-year-index { margin-top: 20px; border-top: 1px solid var(--wg-rule); }
.wg-year-block { border-bottom: 1px solid var(--wg-rule); padding: 22px 0 24px; }
.wg-year-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px; }
.wg-year-head h3 { font-family: var(--wg-serif); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.wg-year-head .wg-count { font-size: 12px; }
.wg-index-row {
display: grid; grid-template-columns: 92px 1fr 190px 96px; gap: 18px; align-items: baseline;
padding: 10px 6px; border-radius: 3px; color: inherit;
}
.wg-index-row:hover { background: var(--wg-row-hover); text-decoration: none; }
.wg-index-row time { font-size: 12.5px; color: var(--wg-muted-light); font-variant-numeric: tabular-nums; }
.wg-index-row h4 { font-family: var(--wg-serif); font-size: 17.5px; line-height: 1.3; font-weight: 600; text-wrap: pretty; }
.wg-index-row h4 a { color: var(--wg-ink); }
.wg-index-cat, .wg-index-dest { font-size: 12.5px; color: var(--wg-muted); }
.wg-index-dest { text-align: right; }
.wg-index-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0 0; flex-wrap: wrap; }
.wg-btn-outline { border: 1px solid var(--wg-ink); border-radius: 4px; padding: 12px 22px; font-size: 14px; font-weight: 600; color: var(--wg-ink); }
.wg-btn-outline:hover { background: var(--wg-ink); color: #fff; text-decoration: none; }
.wg-year-jump { display: flex; flex-wrap: wrap; gap: 6px; }
.wg-year-jump a { font-size: 12.5px; font-weight: 600; color: var(--wg-muted); border: 1px solid var(--wg-rule); border-radius: 3px; padding: 5px 9px; font-variant-numeric: tabular-nums; }
.wg-year-jump a:hover { border-color: var(--wg-accent); color: var(--wg-accent); text-decoration: none; }
.wg-empty-state { padding: 32px 0; color: var(--wg-muted); }
.wg-empty-state-section { padding-top: 56px; padding-bottom: 56px; }
/* ---------------------------------------------------------------------- */
/* Destination hub body */
/* ---------------------------------------------------------------------- */
.wg-hub-body { max-width: var(--wg-container); margin: 0 auto; padding: 44px var(--wg-gutter) 0; display: grid; grid-template-columns: 1fr 300px; gap: 48px; align-items: start; }
.wg-feed { display: flex; flex-direction: column; }
.wg-feed-row { display: grid; grid-template-columns: 186px 1fr; gap: 22px; padding: 22px 0; border-bottom: 1px solid var(--wg-rule); align-items: start; }
.wg-feed-thumb { width: 186px; height: 124px; }
.wg-feed-thumb a { display: block; width: 100%; height: 100%; }
.wg-feed-thumb img, .wg-feed-thumb svg { width: 100%; height: 100%; object-fit: cover; }
.wg-feed-body { display: flex; flex-direction: column; gap: 9px; }
.wg-thumb-placeholder { width: 100%; height: 100%; display: block; }
.wg-feed-body h3 { font-family: var(--wg-serif); font-size: 25px; line-height: 1.2; font-weight: 600; letter-spacing: -0.016em; text-wrap: pretty; }
.wg-feed-body h3 a { color: var(--wg-ink); }
.wg-feed-body h2 { font-family: var(--wg-serif); font-size: 25px; line-height: 1.2; font-weight: 600; letter-spacing: -0.016em; }
.wg-feed-body h2 a { color: var(--wg-ink); }
.wg-feed-body p { font-size: 14.5px; line-height: 1.5; color: var(--wg-body-dimmer); text-wrap: pretty; max-width: 64ch; }
.wg-pagination { display: flex; align-items: center; gap: 8px; padding-top: 24px; flex-wrap: wrap; }
.wg-page-link, .wg-pagination span.wg-page-link { border: 1px solid var(--wg-border); border-radius: 3px; padding: 8px 13px; font-size: 13.5px; font-weight: 500; color: var(--wg-ink); }
.wg-pagination a.wg-page-link:hover { border-color: var(--wg-accent); color: var(--wg-accent); text-decoration: none; }
.wg-pagination .current.wg-page-link { border-color: var(--wg-ink); background: var(--wg-ink); color: #fff; font-weight: 600; }
.wg-pagination .dots.wg-page-link { border: 0; color: var(--wg-faint); padding: 0 4px; }
.wg-hub-faq { margin-top: 48px; }
.wg-hub-faq dl { margin-top: 8px; }
.wg-faq-row { border-bottom: 1px solid var(--wg-rule); padding: 20px 0; }
.wg-faq-row dt { font-family: var(--wg-serif); font-size: 21px; line-height: 1.28; font-weight: 700; letter-spacing: -0.012em; text-wrap: pretty; }
.wg-faq-row dd { font-size: 15px; line-height: 1.6; color: var(--wg-body-dim); margin-top: 8px; max-width: 74ch; text-wrap: pretty; }
.wg-hub-sidebar { display: flex; flex-direction: column; gap: 30px; position: sticky; top: 92px; }
.wg-sidebar-h2 { border-bottom: 1px solid var(--wg-ink); padding-bottom: 7px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.wg-place-list { margin-top: 10px; }
.wg-place-list li { padding: 8px 0; }
.wg-place-list a { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: var(--wg-ink); font-size: 13.5px; font-weight: 500; }
.wg-place-track { display: block; height: 4px; background: var(--wg-bar-track); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.wg-place-fill { display: block; height: 100%; background: var(--wg-accent); }
/* ---------------------------------------------------------------------- */
/* Article / single */
/* ---------------------------------------------------------------------- */
.wg-article-head { border-bottom: 1px solid var(--wg-rule); background: var(--wg-surface); padding-bottom: 30px; }
.wg-article-title { font-family: var(--wg-serif); font-size: 46px; line-height: 1.06; letter-spacing: -0.022em; font-weight: 700; margin-bottom: 14px; text-wrap: balance; }
.wg-article-dek { font-family: var(--wg-serif); font-size: 19px; line-height: 1.55; color: var(--wg-body-dim); max-width: 62ch; margin-bottom: 16px; text-wrap: pretty; }
.wg-article-body-grid { max-width: var(--wg-container); margin: 40px auto 0; padding: 0 var(--wg-gutter); display: grid; grid-template-columns: 1fr 300px; gap: 48px; align-items: start; }
/* min-width:0 because this is a grid item and a grid track's automatic minimum
* is its min-content width, so any single wide descendant -- a table, a ,
* an embed -- would otherwise widen the whole page rather than being clipped
* to its own column. The ad slots that actually triggered this are fixed at
* source (see .wg-ad-* above); this keeps the next one from doing it again. */
.wg-entry-content { min-width: 0; font-family: var(--wg-serif); font-size: 18px; line-height: 1.7; color: var(--wg-body-dim); max-width: 74ch; }
.wg-entry-content p, .wg-entry-content ul, .wg-entry-content ol, .wg-entry-content blockquote { margin-bottom: 22px; }
.wg-entry-content h2 { font-family: var(--wg-serif); font-size: 28px; font-weight: 700; letter-spacing: -0.016em; margin: 40px 0 16px; color: var(--wg-ink); }
.wg-entry-content h3 { font-family: var(--wg-serif); font-size: 22px; font-weight: 600; margin: 32px 0 14px; color: var(--wg-ink); }
/* ---------------------------------------------------------------------- */
/* Article imagery */
/* Ported from the sibling Glamcheck theme, minus the part that does not */
/* apply here: that theme forced `width: 100%` on body images and was */
/* upscaling small legacy uploads. This theme already sets */
/* `img { max-width: 100%; height: auto }` globally and its content column */
/* is narrower than the uploads, so images were measured downscaling */
/* (0.38x and 0.86x) and needed no correction. What ports is the treatment: */
/* a hairline and a low shadow so a photograph reads as a plate on paper */
/* rather than a browser default, room to breathe, and captions that look */
/* like captions. */
/* ---------------------------------------------------------------------- */
.wg-entry-content img {
border-radius: 0;
margin: 8px auto 22px; /* auto centres an upload narrower than the column */
border: 1px solid var(--wg-rule);
box-shadow: 0 12px 28px rgb(33 23 20 / 12%), 0 2px 6px rgb(33 23 20 / 5%);
}
/* The YouTube facade supplies its own chrome — leave it alone. */
.wg-entry-content img.wgyt-thumbnail { border: 0; box-shadow: none; margin: 0; }
.wg-entry-content figure { margin: 30px 0; text-align: center; }
.wg-entry-content figure img { margin-bottom: 0; }
.wg-entry-content figcaption {
margin-top: 11px; text-align: center;
font-family: var(--wg-sans); font-size: 11.5px; line-height: 1.55;
font-style: normal; letter-spacing: .02em; color: var(--wg-muted);
}
.wg-entry-content a { text-decoration: underline; text-underline-offset: 3px; }
.wg-entry-content ul, .wg-entry-content ol { padding-left: 1.3em; list-style: disc; }
.wg-entry-content ol { list-style: decimal; }
.wg-entry-content blockquote { border-left: 3px solid var(--wg-accent); padding-left: 20px; font-style: italic; color: var(--wg-body-dimmer); }
.wg-page-content { max-width: 74ch; margin: 32px auto 0; padding: 0 var(--wg-gutter); font-family: var(--wg-sans); font-size: 16px; line-height: 1.7; }
.wg-article-sidebar { display: flex; flex-direction: column; gap: 24px; position: static; }
/* Article rail: related posts.
* Same module and same markup as the sibling Glamcheck install (the plugin's
* fixed ![]()
… ), presented the same way: one cover card leading,
* then compact rows. All CSS off :first-child — the plugin only ever emits
* items that have a thumbnail, so the cover always has its photo. The kicker,
* headline and read-time spans come from wg_related_widget_item_html() via the
* plugin's erp_widget_item_html filter. */
.wg-related-widget .erp-list { display: flex; flex-direction: column; gap: 0; list-style: none; margin: 0; padding: 0; }
.wg-related-widget .erp-list a { display: block; color: var(--wg-ink); }
.wg-related-widget .erp-body { display: flex; flex-direction: column; gap: 7px; }
.wg-related-widget .erp-kicker {
align-self: flex-start; font-family: var(--wg-sans); font-size: 9.5px; font-weight: 600;
line-height: 1; letter-spacing: .16em; text-transform: uppercase; color: var(--wg-accent);
}
.wg-related-widget .erp-title { font-family: var(--wg-serif); font-size: 14.5px; line-height: 1.4; }
.wg-related-widget .erp-meta { font-family: var(--wg-sans); font-size: 10.5px; line-height: 1; letter-spacing: .04em; color: var(--wg-muted); }
/* Lead item — a cover card at rail width. */
.wg-related-widget .erp-list li:first-child { margin-bottom: 18px; }
.wg-related-widget .erp-list li:first-child a {
position: relative; isolation: isolate; overflow: hidden;
aspect-ratio: 4 / 5; background: var(--wg-ink);
}
.wg-related-widget .erp-list li:first-child img,
.wg-related-widget .erp-list li:first-child svg {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: 50% 28%; border: 0; box-shadow: none;
transition: transform .55s cubic-bezier(.2, .6, .2, 1);
}
.wg-related-widget .erp-list li:first-child a::after {
content: ""; position: absolute; inset: 0; z-index: 1;
background: linear-gradient(to top,
rgb(20 12 10 / 94%) 0%, rgb(20 12 10 / 84%) 32%, rgb(20 12 10 / 48%) 62%, rgb(20 12 10 / 0%) 92%);
}
.wg-related-widget .erp-list li:first-child .erp-body {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
padding: 16px 14px 14px; color: var(--wg-paper);
text-shadow: 0 1px 3px rgb(0 0 0 / 55%);
}
.wg-related-widget .erp-list li:first-child .erp-kicker { color: #E9A98F; }
.wg-related-widget .erp-list li:first-child .erp-title { font-size: 16.5px; line-height: 1.32; text-wrap: balance; }
.wg-related-widget .erp-list li:first-child .erp-meta { color: #C9B7AE; }
.wg-related-widget .erp-list li:first-child a:hover img { transform: scale(1.05); }
/* Remaining items — compact rows, square thumb, hairline between. */
.wg-related-widget .erp-list li + li { padding: 14px 0; border-top: 1px solid var(--wg-rule); }
.wg-related-widget .erp-list li + li a {
display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 13px; align-items: center;
}
.wg-related-widget .erp-list li + li img,
.wg-related-widget .erp-list li + li svg {
width: 74px; height: 74px; object-fit: cover; object-position: 50% 25%;
border: 0; box-shadow: none; aspect-ratio: auto;
}
.wg-related-widget .erp-list li + li .erp-body { gap: 5px; }
/* One accent per module: repeated labels down a narrow rail read as noise. */
.wg-related-widget .erp-list li + li .erp-kicker { display: none; }
.wg-related-widget .erp-list li + li a:hover .erp-title { color: var(--wg-accent); }
.wg-related-widget .erp-list li:last-child { padding-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
.wg-related-widget .erp-list li:first-child img { transition: none; }
.wg-related-widget .erp-list li:first-child a:hover img { transform: none; }
}
/* ---------------------------------------------------------------------- */
/* End-of-article: "Related reading" (dark, cover cards) */
/* */
/* This band and "More in " underneath it used to be the same */
/* three-up grid of the same card twice over. Inverting the first one is */
/* what separates them: the reader gets a clear "start here" plate and then */
/* a plainer list, instead of two identical walls. The scrim, the warm */
/* kicker (#E9A98F) and the 50% 28% object-position are lifted from the */
/* sidebar related rail above rather than invented, so the site keeps one */
/* cover-card idiom. */
/* ---------------------------------------------------------------------- */
/* Full-bleed ink behind a still-constrained .wg-section inside it. */
.wg-recommend-dark {
background: var(--wg-ink);
color: var(--wg-paper);
margin-top: 52px;
padding-bottom: 46px;
}
.wg-recommend-dark .wg-section { padding-top: 40px; }
.wg-recommend-dark .wg-section-head { border-top-color: rgb(255 255 255 / 26%); }
.wg-recommend-dark .wg-section-head h2 { color: var(--wg-paper); }
.wg-cover-grid { gap: 26px 24px; }
/* Four across the band leaves each cover card ~285px wide, where the body's
* three-up padding and headline size crowd the scrim. */
.wg-card-grid-4.wg-cover-grid .wg-cover-card-body { padding: 15px 13px 13px; }
.wg-card-grid-4.wg-cover-grid .wg-cover-card h3 { font-size: 16.5px; }
@media (max-width: 900px) {
.wg-card-grid-4.wg-cover-grid .wg-cover-card-body { padding: 18px 16px 16px; }
.wg-card-grid-4.wg-cover-grid .wg-cover-card h3 { font-size: 18px; }
}
.wg-cover-card { position: relative; isolation: isolate; }
.wg-cover-card-media {
position: relative; display: block; overflow: hidden;
aspect-ratio: 4 / 3; background: #100A08;
}
.wg-cover-card-media img, .wg-cover-card-media svg {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: 50% 28%;
border: 0; box-shadow: none;
transition: transform .55s cubic-bezier(.2, .6, .2, 1);
}
/* The scrim is a sibling-free ::after on the media link so the body text can
* sit above it without a wrapper: media z-0, scrim z-1, body z-2. */
.wg-cover-card-media::after {
content: ""; position: absolute; inset: 0; z-index: 1;
background: linear-gradient(to top,
rgb(20 12 10 / 94%) 0%, rgb(20 12 10 / 84%) 32%, rgb(20 12 10 / 48%) 62%, rgb(20 12 10 / 0%) 92%);
}
.wg-cover-card-body {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
display: flex; flex-direction: column; gap: 7px;
padding: 18px 16px 16px;
text-shadow: 0 1px 3px rgb(0 0 0 / 55%);
}
.wg-cover-card-kicker {
align-self: flex-start;
font-family: var(--wg-sans); font-size: 9.5px; font-weight: 600;
line-height: 1; letter-spacing: .16em; text-transform: uppercase; color: #E9A98F;
}
.wg-cover-card h3 {
font-family: var(--wg-serif); font-size: 18px; line-height: 1.28;
font-weight: 600; letter-spacing: -0.012em; text-wrap: balance;
}
.wg-cover-card h3 a { color: var(--wg-paper); }
.wg-cover-card h3 a:hover { color: #F4D8CC; text-decoration: none; }
.wg-cover-card-meta {
font-family: var(--wg-sans); font-size: 10.5px; line-height: 1;
letter-spacing: .04em; color: #C9B7AE;
}
.wg-cover-card:hover .wg-cover-card-media img { transform: scale(1.05); }
/* The headline anchor is the only focusable target in the card (the media
* link is aria-hidden and tabindex="-1"), so the focus ring has to read
* against ink rather than paper. */
.wg-recommend-dark a:focus-visible { outline: 2px solid #E9A98F; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
.wg-cover-card-media img { transition: none; }
.wg-cover-card:hover .wg-cover-card-media img { transform: none; }
}
/* ---------------------------------------------------------------------- */
/* Comments */
/* ---------------------------------------------------------------------- */
.wg-comments { max-width: 74ch; margin-top: 48px; }
.wg-comment-list li { border-bottom: 1px solid var(--wg-rule); padding: 16px 0; }
.wg-comments .comment-form input,
.wg-comments .comment-form textarea { width: 100%; border: 1px solid var(--wg-border); border-radius: 4px; padding: 10px 12px; margin-bottom: 12px; }
.wg-comments .comment-form button, .wg-comments .comment-form input[type="submit"] {
background: var(--wg-accent); color: #fff; border-radius: 4px; padding: 11px 18px; font-weight: 600; width: auto;
}
/* ---------------------------------------------------------------------- */
/* Footer */
/* ---------------------------------------------------------------------- */
.wg-footer { border-top: 1px solid var(--wg-rule); background: var(--wg-surface); }
.wg-footer-upper { padding-top: 40px; padding-bottom: 48px; display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.wg-footer-wordmark { font-family: var(--wg-serif); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.wg-footer-brand p { font-size: 13.5px; line-height: 1.55; color: var(--wg-muted); margin-top: 10px; max-width: 34ch; }
.wg-footer-upper h2 { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wg-muted-light); }
.wg-footer-upper ul, .wg-footer-links { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.wg-footer-upper a, .wg-footer-links a { font-size: 13.5px; color: var(--wg-ink); }
.wg-footer-lower-bar { border-top: 1px solid var(--wg-rule); }
.wg-footer-lower { padding: 16px var(--wg-gutter) 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.wg-copyright { font-size: 12px; color: var(--wg-muted-light); }
.wg-spacer { flex: 1; }
.wg-footer-lower a { font-size: 12.5px; font-weight: 600; color: var(--wg-ink); }
/* ---------------------------------------------------------------------- */
/* "More in ": one lead story beside a compact list */
/* */
/* This block and the dark "Related reading" band above it used to be the */
/* same three-up grid of the same card, stacked — two identical walls in a */
/* row. The band inverts to ink; this one breaks the rhythm the other way, */
/* with a single large lead beside rows that exist to be scanned. Ported */
/* from the sibling Glamcheck theme's .gcr-morein, in this theme's markup. */
/* ---------------------------------------------------------------------- */
.wg-morein {
display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: 40px; align-items: start; margin-top: 26px;
}
.wg-morein-solo { grid-template-columns: minmax(0, 1fr); }
.wg-morein-solo .wg-morein-lead .wg-month-card-image { max-height: 420px; }
/* The lead reuses the ordinary recommendation card, scaled up: a 16/10 plate
* instead of the grid's fixed 178px strip, and the headline given room to be
* the thing the eye lands on first. */
.wg-morein-lead .wg-month-card-image { height: auto; aspect-ratio: 16 / 10; }
.wg-morein-lead .wg-month-card h3 { font-size: 29px; line-height: 1.16; letter-spacing: -0.018em; text-wrap: balance; }
.wg-morein-lead .wg-month-card p { font-size: 14.5px; line-height: 1.6; max-width: 56ch; }
.wg-morein-list { display: flex; flex-direction: column; justify-content: space-between; }
.wg-hrow {
display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px;
align-items: center; padding: 16px 0; border-top: 1px solid var(--wg-rule);
}
.wg-morein-list .wg-hrow:first-child { padding-top: 0; border-top: 0; }
.wg-hrow-media {
display: block; width: 104px; aspect-ratio: 1 / 1; overflow: hidden;
box-shadow: var(--wg-shadow-sm); transition: box-shadow .4s var(--wg-ease);
}
.wg-hrow-media img, .wg-hrow-media svg {
width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%;
transition: transform .55s var(--wg-ease);
}
.wg-hrow-body { min-width: 0; }
.wg-hrow h3 { font-family: var(--wg-serif); font-size: 17.5px; line-height: 1.28; font-weight: 600; letter-spacing: -0.008em; text-wrap: pretty; }
.wg-hrow h3 a { color: var(--wg-ink); }
.wg-hrow:hover h3 a { color: var(--wg-accent); }
.wg-hrow .wg-meta { margin-top: 6px; }
.wg-hrow:hover .wg-hrow-media { box-shadow: var(--wg-shadow-md); }
.wg-hrow:hover .wg-hrow-media img { transform: scale(1.05); }
/* Kicker stacked over the rule in the dark band's head, matching the sibling
* theme's .gcr-band__kicker so the pair of end-of-article modules reads as one
* family rather than two unrelated sections. */
.wg-section-head-stack { flex-direction: column; align-items: flex-start; gap: 7px; }
.wg-band-kicker { font-size: 9.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #E9A98F; }
/* ---------------------------------------------------------------------- */
/* Elevation */
/* */
/* The theme shipped with everything on one plane: photographs sat flush on */
/* the page with no edge, so the front page read as flat regardless of how */
/* good the pictures were. Photography now sits on its own plane — this is */
/* the single rule doing most of the work — and free-standing cards rise on */
/* hover. Held throughout: no new bytes on the critical path (shadows and */
/* transforms only, no images/JS/requests), no layout shift (only */
/* `transform`, `box-shadow` and `opacity` are ever animated, all outside */
/* layout), and nothing hidden from a crawler (elevation is paint-only — */
/* every headline stays a real at full size). */
/* ---------------------------------------------------------------------- */
.wg-hero-image,
.wg-month-card-image,
.wg-rail-thumb,
.wg-pinned-card-image,
.wg-feed-thumb,
.wg-showcase-thumb {
overflow: hidden;
box-shadow: var(--wg-shadow-md);
transition: box-shadow .4s var(--wg-ease);
}
.wg-rail-thumb, .wg-showcase-thumb { box-shadow: var(--wg-shadow-sm); }
.wg-hero-image img, .wg-hero-image svg,
.wg-month-card-image img, .wg-month-card-image svg,
.wg-rail-thumb img, .wg-rail-thumb svg,
.wg-pinned-card-image img, .wg-pinned-card-image svg,
.wg-feed-thumb img, .wg-feed-thumb svg { transition: transform .55s var(--wg-ease); }
.wg-hero-lead:hover .wg-hero-image,
.wg-month-card:hover .wg-month-card-image,
.wg-pinned-card:hover .wg-pinned-card-image,
.wg-feed-row:hover .wg-feed-thumb { box-shadow: var(--wg-shadow-lg); }
.wg-rail-list li:hover .wg-rail-thumb { box-shadow: var(--wg-shadow-md); }
.wg-hero-lead:hover .wg-hero-image img,
.wg-month-card:hover .wg-month-card-image img,
.wg-rail-list li:hover .wg-rail-thumb img,
.wg-pinned-card:hover .wg-pinned-card-image img,
.wg-feed-row:hover .wg-feed-thumb img { transform: scale(1.05); }
/* Only the free-standing grid card lifts. Rows and hairline-grid cells are
* held in place by the rule they sit on — raising those detaches the card
* from its own divider — so they get depth on the image instead. */
.wg-month-card { transition: transform .34s var(--wg-ease); }
.wg-month-card:hover { transform: translateY(-4px); }
.wg-morein-lead .wg-month-card:hover { transform: none; }
.wg-hairline-grid { box-shadow: var(--wg-shadow-sm); }
.wg-evergreen-card { transition: background-color .3s var(--wg-ease); }
.wg-evergreen-card:hover { background: var(--wg-row-hover); }
.wg-chip { box-shadow: var(--wg-shadow-sm); transition: box-shadow .3s var(--wg-ease), border-color .3s var(--wg-ease), color .3s var(--wg-ease); }
.wg-chip:hover { box-shadow: var(--wg-shadow-md); }
/* Cover cards on the ink band: a ring of light plus a deeper cast, since a
* drop shadow on near-black is invisible. */
.wg-cover-card {
box-shadow: var(--wg-ring-dark);
transition: transform .34s var(--wg-ease), box-shadow .34s var(--wg-ease);
}
.wg-cover-card:hover { transform: translateY(-4px); box-shadow: var(--wg-ring-dark-hover); }
/* A configured homepage/category widget area becomes a real module instead of
* dissolving into the page. Costs nothing until an admin adds a widget: an
* empty area renders no markup at all. The .wg-section max-width/gutters move
* up to the wrapper so the plate lines up with every other section's edges. */
.wg-configurable-widget-area {
max-width: var(--wg-container); margin: 52px auto 0;
padding-left: var(--wg-gutter); padding-right: var(--wg-gutter);
}
.wg-configurable-widget.wg-section {
max-width: none; margin: 0; padding: 26px 28px 30px;
background: var(--wg-surface); border: 1px solid var(--wg-rule);
box-shadow: var(--wg-shadow-sm);
}
.wg-configurable-widget + .wg-configurable-widget { margin-top: 26px; }
/* The sidebar related rail is a module in its own right, not loose text. */
.wg-related-rail { background: var(--wg-surface); }
.wg-related-rail .wg-sidebar-h2 { margin-bottom: 16px; }
/* Motion is decoration here, never information: with it suppressed the
* elevation stays and only the movement stops. */
@media (prefers-reduced-motion: reduce) {
.wg-hero-image, .wg-month-card-image, .wg-rail-thumb, .wg-pinned-card-image,
.wg-feed-thumb, .wg-showcase-thumb,
.wg-hero-image img, .wg-month-card-image img, .wg-rail-thumb img,
.wg-pinned-card-image img, .wg-feed-thumb img,
.wg-hrow-media, .wg-hrow-media img,
.wg-month-card, .wg-cover-card, .wg-chip, .wg-evergreen-card { transition: none; }
.wg-hero-lead:hover .wg-hero-image img,
.wg-month-card:hover .wg-month-card-image img,
.wg-rail-list li:hover .wg-rail-thumb img,
.wg-pinned-card:hover .wg-pinned-card-image img,
.wg-feed-row:hover .wg-feed-thumb img,
.wg-hrow:hover .wg-hrow-media img { transform: none; }
.wg-month-card:hover, .wg-cover-card:hover { transform: none; }
}
/* ---------------------------------------------------------------------- */
/* Responsive */
/* ---------------------------------------------------------------------- */
@media (max-width: 1080px) {
.wg-deep-grid { grid-template-columns: repeat(3, 1fr); }
.wg-home-sidebar { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
.wg-home-sidebar > * { flex: 1 1 260px; }
}
@media (max-width: 900px) {
.wg-hero-grid, .wg-masthead-grid, .wg-hub-head-grid, .wg-hub-body, .wg-article-body-grid { grid-template-columns: 1fr; }
.wg-morein { grid-template-columns: 1fr; gap: 32px; }
.wg-hub-stats { justify-content: flex-start; }
.wg-card-grid-3, .wg-card-grid-4 { grid-template-columns: repeat(2, 1fr); }
.wg-hairline-grid-3, .wg-hairline-grid-4 { grid-template-columns: repeat(2, 1fr); }
.wg-deep-grid { grid-template-columns: 1fr 1fr; }
.wg-showcase-grid { grid-template-columns: repeat(2, 1fr); }
.wg-facets-grid { grid-template-columns: 1fr; gap: 32px; }
.wg-hub-sidebar, .wg-article-sidebar { position: static; }
.wg-index-row { grid-template-columns: 76px 1fr; grid-template-areas: "date title" ". cat" ". dest"; row-gap: 4px; }
.wg-index-row time { grid-area: date; }
.wg-index-row h4 { grid-area: title; }
.wg-index-row .wg-index-cat { grid-area: cat; }
.wg-index-row .wg-index-dest { grid-area: dest; text-align: left; }
.wg-feed-row { grid-template-columns: 140px 1fr; }
.wg-feed-thumb { width: 140px; height: 96px; }
.wg-footer-upper { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 28px; }
.wg-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 780px) {
.wg-primary-nav { display: none; }
.wg-primary-nav.is-open {
display: flex; flex-direction: column; gap: 0; position: absolute;
top: 66px; left: 0; right: 0; background: var(--wg-surface);
border-bottom: 1px solid var(--wg-rule); padding: 8px var(--wg-gutter) 16px;
}
.wg-primary-nav.is-open a { padding: 10px 0; border-bottom: 1px solid var(--wg-rule); }
.wg-nav-toggle { display: block; }
.wg-search { display: none; }
.wg-header-inner { gap: 12px; position: relative; }
.wg-treemap-tiles { flex-wrap: wrap; height: auto !important; }
.wg-treemap-tile { min-height: 64px; }
.wg-deep-grid { grid-template-columns: 1fr; }
.wg-showcase-grid { grid-template-columns: 1fr; }
.wg-hero-title, .wg-masthead h1 { font-size: 36px; }
.wg-hub-head-grid h1 { font-size: 38px; }
.wg-article-title { font-size: 32px; }
}
@media (max-width: 560px) {
.wg-card-grid-3, .wg-card-grid-4, .wg-hairline-grid-3, .wg-hairline-grid-4 { grid-template-columns: 1fr; }
.wg-hrow { grid-template-columns: 84px minmax(0, 1fr); gap: 13px; }
.wg-hrow-media { width: 84px; }
.wg-morein-lead .wg-month-card-image { height: auto; }
.wg-morein-lead .wg-month-card h3 { font-size: 24px; }
.wg-hero-image { height: 220px; }
.wg-month-card-image { height: 150px; }
.wg-hero-title, .wg-masthead h1 { font-size: 30px; }
.wg-standfirst { font-size: 16px; }
.wg-feed-row { grid-template-columns: 1fr; }
.wg-feed-thumb { width: 100%; height: 180px; }
.wg-footer-upper { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
}
/* ---------------------------------------------------------------------- */
/* Contact page */
/* ---------------------------------------------------------------------- */
.wg-contact-card {
margin: 30px 0 38px;
padding: 26px 28px;
border: 1px solid var(--wg-rule);
border-left: 3px solid var(--wg-accent);
background: var(--wg-surface);
box-shadow: 0 12px 34px rgba(33, 23, 20, .07);
}
.wg-contact-label {
margin: 0 0 8px;
color: var(--wg-accent);
font-family: var(--wg-sans);
font-size: 10.5px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
}
.wg-entry-content .wg-contact-email {
margin: 0;
font-family: var(--wg-serif);
font-size: clamp(22px, 3vw, 31px);
font-weight: 700;
letter-spacing: -.02em;
line-height: 1.15;
word-break: break-word;
}
.wg-entry-content .wg-contact-email a { color: var(--wg-ink); text-decoration: none; }
.wg-entry-content .wg-contact-email a:hover { color: var(--wg-accent); text-decoration: underline; }
.wg-entry-content .wg-contact-note {
margin: 12px 0 0;
color: var(--wg-muted);
font-family: var(--wg-sans);
font-size: 13px;
line-height: 1.55;
}
@media (max-width: 640px) {
.wg-contact-card { padding: 20px; margin: 24px 0 30px; }
}