/* ---------- 0. FONTS (self-hosted) ---------- Served from ./fonts rather than Google's CDN. The display face is loaded with font-display:block and preloaded in each page's , so it is in place before app.js measures the nameplate — no reflow, no resize. Latin, Latin Extended and Vietnamese subsets; variable weight axis. Regenerate from @fontsource-variable/* if you swap families. */ /* Bodoni Moda — latin */ @font-face { font-family: 'Bodoni Moda'; font-style: normal; font-display: block; font-weight: 400 900; src: url('fonts/bodoni-moda-latin.woff2') format('woff2-variations'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* Bodoni Moda — latin-ext */ @font-face { font-family: 'Bodoni Moda'; font-style: normal; font-display: block; font-weight: 400 900; src: url('fonts/bodoni-moda-latin-ext.woff2') format('woff2-variations'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* Libre Franklin — latin */ @font-face { font-family: 'Libre Franklin'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('fonts/libre-franklin-latin.woff2') format('woff2-variations'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* Libre Franklin — latin-ext */ @font-face { font-family: 'Libre Franklin'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('fonts/libre-franklin-latin-ext.woff2') format('woff2-variations'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* Libre Franklin — vietnamese */ @font-face { font-family: 'Libre Franklin'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('fonts/libre-franklin-vietnamese.woff2') format('woff2-variations'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; } /* Source Serif 4 — latin */ @font-face { font-family: 'Source Serif 4'; font-style: normal; font-display: swap; font-weight: 200 900; src: url('fonts/source-serif-4-latin.woff2') format('woff2-variations'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* Source Serif 4 — latin-ext */ @font-face { font-family: 'Source Serif 4'; font-style: normal; font-display: swap; font-weight: 200 900; src: url('fonts/source-serif-4-latin-ext.woff2') format('woff2-variations'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* Source Serif 4 — vietnamese */ @font-face { font-family: 'Source Serif 4'; font-style: normal; font-display: swap; font-weight: 200 900; src: url('fonts/source-serif-4-vietnamese.woff2') format('woff2-variations'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; } /* Source Serif 4 — latin italic */ @font-face { font-family: 'Source Serif 4'; font-style: italic; font-display: swap; font-weight: 200 900; src: url('fonts/source-serif-4-latin-italic.woff2') format('woff2-variations'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* Source Serif 4 — latin-ext italic */ @font-face { font-family: 'Source Serif 4'; font-style: italic; font-display: swap; font-weight: 200 900; src: url('fonts/source-serif-4-latin-ext-italic.woff2') format('woff2-variations'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* Source Serif 4 — vietnamese italic */ @font-face { font-family: 'Source Serif 4'; font-style: italic; font-display: swap; font-weight: 200 900; src: url('fonts/source-serif-4-vietnamese-italic.woff2') format('woff2-variations'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; } /* ============================================================ THE SLOW MILE — shared stylesheet Broadsheet blog / travel service / foundation Sections: 1 Tokens · 2 Reset · 3 Furniture (strap, masthead, nav) · 4 Type · 5 Stories · 6 Sidebar & coupons · 7 Ads 8 Keep reading · 9 Footer · 10 Pages · 11 Responsive · 12 Print ============================================================ */ /* ---------- 1. TOKENS ---------- */ :root { /* Newsprint: warm grey, not cream. Ink is soft black, never #000. */ --paper: #e9e6de; --paper-lift: #f3f1ec; --paper-deep: #ded9cf; --ink: #16130f; --ink-2: #45403a; --ink-3: #756e63; --rule: #c3bcae; --spot: #a81e12; /* press red — section flags, most-read */ --spot-blue: #1f3a5f; /* second run — foundation pages only */ --display: "Bodoni Moda", "Didot", "Times New Roman", serif; --head: "Libre Franklin", "Helvetica Neue", Arial, sans-serif; --body: "Source Serif 4", Georgia, "Times New Roman", serif; --measure: 68ch; --gutter: 1.75rem; --page: 1240px; --hair: 1px solid var(--rule); --hair-ink: 1px solid var(--ink); } /* Section hooks. Foundation swaps the spot colour — a second press run in blue ink. The others inherit red; they're here so you can theme a section by adding one rule rather than touching every page. */ body.section-blog, body.section-travel, body.section-newsletter { --spot: #a81e12; } body.section-foundation { --spot: var(--spot-blue); } /* ---------- 2. RESET ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 1.0625rem; line-height: 1.62; font-optical-sizing: auto; /* faint newsprint tooth */ background-image: radial-gradient(circle at 1px 1px, rgba(22,19,15,.035) 1px, transparent 0); background-size: 4px 4px; } img { max-width: 100%; display: block; } a { color: inherit; } button { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--spot); outline-offset: 3px; } .skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper); padding: .6rem 1rem; font-family: var(--head); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; z-index: 50; } .skip:focus { left: .5rem; top: .5rem; } .wrap { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: 1.25rem; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- 3. FURNITURE ---------- */ /* Folio strip: volume, date, edition — the line above every nameplate */ .strap { border-bottom: var(--hair); font-family: var(--head); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); } .strap__inner { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; justify-content: space-between; padding-block: .55rem; } .strap__inner > span { white-space: nowrap; } .strap b { color: var(--ink); font-weight: 600; } /* Nameplate */ .masthead { text-align: center; padding-block: 1.9rem 1.1rem; } .masthead__name { /* Hidden until app.js has sized it — prevents a visible resize. The delayed animation reveals it regardless if JS fails or is switched off. */ visibility: hidden; animation: plate-reveal 0s linear 1.2s forwards; font-family: var(--display); font-weight: 900; font-size: clamp(1.5rem, 7vw, 7rem); /* fallback only — app.js overrides */ line-height: .9; letter-spacing: -.02em; margin: 0; text-transform: uppercase; white-space: nowrap; /* never wraps, however long the name */ overflow: hidden; } .masthead__name a { display: inline-block; } .masthead__name.is-fitted { visibility: visible; animation: none; } @keyframes plate-reveal { to { visibility: visible; } } .masthead__name a { text-decoration: none; } .masthead__rule { display: flex; align-items: center; gap: .9rem; margin-top: 1.05rem; font-family: var(--head); font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); } .masthead__rule::before, .masthead__rule::after { content: ""; flex: 1; height: 0; border-top: var(--hair-ink); } .masthead__rule span { max-width: 44rem; text-align: center; } /* Nav — a section index, each with its own descriptor line */ .nav { border-top: 3px solid var(--ink); border-bottom: var(--hair-ink); background: var(--paper); position: sticky; top: 0; z-index: 30; } .nav__list { list-style: none; margin-inline: auto; margin-block: 0; padding: 0; width: 100%; max-width: var(--page); display: grid; grid-template-columns: repeat(4, 1fr); } .nav__item + .nav__item { border-left: var(--hair); } .nav__link { display: block; padding: .7rem .5rem .6rem; text-align: center; text-decoration: none; font-family: var(--head); transition: background-color .15s ease; } .nav__link:hover { background: var(--paper-deep); } .nav__label { display: block; font-size: .8125rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .nav__sub { display: block; font-size: .625rem; letter-spacing: .07em; color: var(--ink-3); margin-top: .18rem; font-weight: 500; } .nav__link.is-current { background: var(--ink); color: var(--paper); } .nav__link.is-current .nav__sub { color: var(--paper-deep); } /* ---------- 4. TYPE ---------- */ .kicker { font-family: var(--head); font-size: .6875rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--spot); margin: 0 0 .45rem; } .headline { font-family: var(--head); font-weight: 800; letter-spacing: -.018em; line-height: 1.06; margin: 0 0 .5rem; text-wrap: balance; } .headline a { text-decoration: none; } .headline a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; } .dek { font-family: var(--body); font-style: italic; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.45; margin: 0 0 .7rem; text-wrap: pretty; } .byline { font-family: var(--head); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .7rem; } .byline b { color: var(--ink); font-weight: 700; } .byline .sep { color: var(--rule); } .byline .read { color: var(--spot); font-weight: 700; } /* Section flag: a ruled banner that opens a block of the paper */ .flag { display: flex; align-items: baseline; gap: 1rem; border-bottom: 3px solid var(--ink); padding-bottom: .35rem; margin: 2.6rem 0 1.4rem; } .flag h2 { font-family: var(--head); font-size: 1rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; margin: 0; } .flag p { margin: 0; font-family: var(--body); font-style: italic; font-size: .875rem; color: var(--ink-3); } /* "Cut" — the newspaper word for a photo. Halftone stand-in, no assets. */ .cut { background: radial-gradient(circle at 2px 2px, rgba(22,19,15,.28) 1.1px, transparent 0) 0 0 / 6px 6px, linear-gradient(155deg, var(--paper-deep), #cfc8bb 60%, var(--paper-lift)); border: var(--hair-ink); aspect-ratio: 3 / 2; max-height: 440px; position: relative; overflow: hidden; display: grid; place-items: center; font-family: var(--head); font-size: .625rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); margin-bottom: .55rem; } .cut--tall { aspect-ratio: 4 / 5; max-height: 520px; } /* Card photo: sits above the kicker on each story in the feed */ .cut--card { aspect-ratio: 3 / 2; max-height: 260px; margin-bottom: .9rem; } a.cut { text-decoration: none; transition: border-color .15s ease, color .15s ease; } a.cut:hover { border-color: var(--spot); color: var(--spot); } /* Real photos. Drop an inside any .cut frame and it fills the frame at the FRAME's aspect ratio, cropping rather than squashing, whatever shape the source file is. The img is positioned out of flow on purpose: an in-flow image with height:100% stretches the frame to its own natural height and defeats both the aspect-ratio and the max-height. */ .cut > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .cut:has(> img) { background: none; } img.cut { object-fit: cover; } .cut--wide { aspect-ratio: 21 / 9; max-height: 360px; } .caption { font-family: var(--head); font-size: .6875rem; line-height: 1.35; color: var(--ink-3); border-bottom: var(--hair); padding-bottom: .5rem; margin: 0 0 .9rem; } .caption b { color: var(--ink-2); font-weight: 700; } /* ---------- 5. STORIES ---------- */ .layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 2.5rem; align-items: start; padding-bottom: 3rem; } /* Lead story */ .lede { padding-top: 1.9rem; border-bottom: 3px double var(--ink); padding-bottom: 1.7rem; } .lede .headline { font-size: clamp(2rem, 5.4vw, 3.4rem); } .lede .dek { font-size: clamp(1.0625rem, 1.9vw, 1.3rem); max-width: 46ch; } .lede__body { columns: 2; column-gap: 2.2rem; column-rule: var(--hair); margin-top: 1rem; } .lede__body p { margin: 0 0 .85rem; } .lede__body p:first-child::first-letter { font-family: var(--display); font-weight: 900; float: left; font-size: 3.9em; line-height: .78; padding: .06em .09em 0 0; color: var(--spot); } .stories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3.2rem; position: relative; } /* Column rule drawn on the grid itself, so hiding stories can't break it */ .stories::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: var(--hair); pointer-events: none; } .story { padding: 1.5rem 0; border-bottom: var(--hair); } .story .headline { font-size: 1.375rem; } .story .dek { font-size: .9375rem; } .story p.summary { margin: 0 0 .85rem; color: var(--ink-2); font-size: .9688rem; } .tags { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; } .tag { font-family: var(--head); font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .22rem .5rem; border: var(--hair); background: var(--paper-lift); cursor: pointer; color: var(--ink-2); transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .tag:hover { border-color: var(--ink); color: var(--ink); } .tag[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); } .empty { padding: 2.5rem 0 3rem; text-align: center; border-bottom: var(--hair); } .empty p { font-style: italic; color: var(--ink-2); margin: 0 0 1rem; } .empty[hidden] { display: none; } /* Utility. Set by app.js on stories, story grids and archive months alike, so it has to win against .archive-list .story and friends. */ .is-hidden { display: none !important; } /* ---------- 6. SIDEBAR & COUPONS ---------- */ .sidebar { position: sticky; top: 5.4rem; display: grid; gap: 1.6rem; padding-top: 1.9rem; } .module { border-top: 3px solid var(--ink); padding-top: .6rem; } .module__title { font-family: var(--head); font-size: .75rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 .8rem; } /* The filter coupon is moved between these two mounts by app.js so it sits above the stories on a phone and beside them on a desktop. */ #filter-mount-mobile:empty { display: none; } #filter-mount-mobile { margin-bottom: 1.6rem; } /* Most read — numerals here rank, so they earn their place */ .ranked { list-style: none; margin: 0; padding: 0; counter-reset: rank; } .ranked li { counter-increment: rank; display: grid; grid-template-columns: 2.4rem 1fr; gap: .7rem; padding: .75rem 0; border-bottom: var(--hair); } .ranked li:last-child { border-bottom: 0; } .ranked li::before { content: counter(rank); font-family: var(--display); font-weight: 900; font-size: 2.1rem; line-height: .8; color: var(--spot); } .ranked a { font-family: var(--head); font-weight: 700; font-size: .9375rem; line-height: 1.25; text-decoration: none; } .ranked a:hover { text-decoration: underline; text-underline-offset: 2px; } .ranked .meta { display: block; font-family: var(--head); font-weight: 500; font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-top: .28rem; } /* The coupon: the mail-in clip-out box, borrowed for the tag filter and the newsletter form. This is the site's signature device. */ .coupon { border: 2px dashed var(--ink); background: var(--paper-lift); padding: 1.05rem 1.1rem 1.15rem; position: relative; } .coupon::before { content: "\2702"; /* scissors */ position: absolute; top: -.72rem; left: .9rem; background: var(--paper-lift); padding-inline: .3rem; font-size: .95rem; line-height: 1; color: var(--ink-2); } .coupon > summary { list-style: none; cursor: pointer; } .coupon > summary::-webkit-details-marker { display: none; } .coupon__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; } .coupon__title { font-family: var(--head); font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; margin: 0; } .coupon__toggle { font-family: var(--head); font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--spot); } .coupon[open] .coupon__toggle::after { content: " \2212"; } .coupon:not([open]) .coupon__toggle::after { content: " +"; } .coupon__note { font-family: var(--body); font-style: italic; font-size: .8125rem; color: var(--ink-3); margin: .5rem 0 .9rem; } .checks { display: grid; gap: .1rem; margin: 0 0 .9rem; border-top: var(--hair); } .check { display: flex; align-items: center; gap: .6rem; padding: .48rem .1rem; border-bottom: var(--hair); cursor: pointer; font-family: var(--head); font-size: .8125rem; font-weight: 600; } .check input { appearance: none; width: 1.05rem; height: 1.05rem; border: 1.5px solid var(--ink); background: var(--paper); display: grid; place-items: center; flex: none; cursor: pointer; } .check input::after { content: "\2715"; font-size: .78rem; line-height: 1; color: var(--spot); opacity: 0; } .check input:checked::after { opacity: 1; } .check .check-label { flex: 1; } .check .count { margin-left: auto; color: var(--ink-3); font-weight: 500; font-size: .75rem; } .check:hover { color: var(--spot); } .coupon__status { font-family: var(--head); font-size: .6875rem; letter-spacing: .06em; color: var(--ink-2); margin: 0; min-height: 1.1em; } /* Buttons */ .btn { display: inline-block; font-family: var(--head); font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: .68rem 1.15rem; background: var(--ink); color: var(--paper); border: 2px solid var(--ink); text-decoration: none; cursor: pointer; transition: background-color .15s ease, color .15s ease; } .btn:hover { background: var(--spot); border-color: var(--spot); } .btn--ghost { background: transparent; color: var(--ink); } .btn--ghost:hover { background: var(--ink); color: var(--paper); } .btn--block { display: block; width: 100%; text-align: center; } /* Form fields */ .field { display: block; margin-bottom: .85rem; } .field span { display: block; font-family: var(--head); font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .3rem; } .field input, .field select { width: 100%; font-family: var(--body); font-size: 1rem; padding: .6rem .65rem; border: 1.5px solid var(--ink); background: var(--paper); border-radius: 0; } .form-note { font-family: var(--head); font-size: .6875rem; line-height: 1.5; color: var(--ink-3); margin: .8rem 0 0; } /* ---------- 7. ADS ---------- */ .adslot { margin: 1.6rem 0; padding: .55rem; border: 1px dashed var(--rule); background: rgba(255, 255, 255, .28); text-align: center; } .adslot__label { display: block; font-family: var(--head); font-size: .5625rem; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .4rem; } .adslot .adsbygoogle { display: block; min-height: 90px; } .adslot--leader .adsbygoogle { min-height: 90px; } .adslot--rect .adsbygoogle { min-height: 250px; } .adslot--infeed { grid-column: 1 / -1; border-top: var(--hair); border-bottom: var(--hair); } /* Read more — the hand-off from the front page to the archive */ .more { border-top: 3px double var(--ink); margin-top: -1px; padding: 1.9rem 0 .5rem; text-align: center; } .more .btn { padding-inline: 2.6rem; } .more p { font-family: var(--body); font-style: italic; font-size: .9375rem; color: var(--ink-3); margin: .8rem 0 0; } /* ---------- 8. KEEP READING ---------- */ .keepreading { border-top: 3px solid var(--ink); padding-top: .6rem; margin-top: 2.6rem; } .keepreading__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; margin-top: 1rem; } .next { border-top: var(--hair-ink); padding-top: .7rem; text-decoration: none; display: block; } .next:hover .next__title { color: var(--spot); } .next__where { font-family: var(--head); font-size: .625rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--spot); display: block; margin-bottom: .35rem; } .next__title { font-family: var(--head); font-size: 1.0625rem; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 .35rem; transition: color .15s ease; } .next__blurb { margin: 0; font-size: .875rem; color: var(--ink-2); line-height: 1.45; } /* ---------- 9. FOOTER ---------- */ .footer { border-top: 3px solid var(--ink); margin-top: 2.5rem; padding-block: 1.8rem 2.6rem; font-family: var(--head); font-size: .8125rem; } .footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; margin-bottom: 1.6rem; } .footer h3 { font-size: .6875rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 .7rem; } .footer ul { list-style: none; margin: 0; padding: 0; } .footer li { margin-bottom: .4rem; } .footer a { text-decoration: none; color: var(--ink-2); } .footer a:hover { color: var(--spot); text-decoration: underline; } .footer__name { font-family: var(--display); font-weight: 900; font-size: 1.6rem; text-transform: uppercase; margin: 0 0 .5rem; line-height: 1; } .footer__blurb { font-family: var(--body); font-size: .9375rem; color: var(--ink-2); margin: 0; max-width: 34ch; } .colophon { border-top: var(--hair); padding-top: 1rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } /* ---------- 10. PAGE-SPECIFIC ---------- */ /* Long-form article body: single column, generous measure */ .article { padding-top: 1.9rem; } .article__head { border-bottom: 3px double var(--ink); padding-bottom: 1.3rem; margin-bottom: 1.5rem; } .article__head .headline { font-size: clamp(2rem, 5vw, 3.2rem); max-width: 20ch; } .article__head .dek { font-size: clamp(1.05rem, 2vw, 1.28rem); max-width: 52ch; } .prose { max-width: var(--measure); font-size: 1.125rem; line-height: 1.72; } .prose p { margin: 0 0 1.25rem; } .prose h2 { font-family: var(--head); font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; margin: 2.2rem 0 .8rem; } .prose > p:first-of-type::first-letter { font-family: var(--display); font-weight: 900; float: left; font-size: 3.7em; line-height: .78; padding: .06em .1em 0 0; color: var(--spot); } .pullquote { margin: 2rem 0; padding: 1.1rem 0; border-top: var(--hair-ink); border-bottom: var(--hair-ink); font-family: var(--display); font-size: 1.6rem; font-weight: 700; line-height: 1.25; text-wrap: balance; } .prose ul { padding-left: 1.15rem; margin: 0 0 1.25rem; } .prose li { margin-bottom: .5rem; } /* Offer / programme cards used on travel + foundation */ .offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; } .offer { padding: 1.4rem 1.4rem 1.5rem; border: var(--hair); margin: -0.5px; } .offer h3 { font-family: var(--head); font-size: 1.25rem; font-weight: 800; line-height: 1.15; margin: .1rem 0 .5rem; } .offer p { font-size: .9375rem; margin: 0 0 .9rem; color: var(--ink-2); } .offer .price { font-family: var(--display); font-weight: 900; font-size: 1.75rem; display: block; margin-bottom: .2rem; } .offer .price small { font-family: var(--head); font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); display: block; font-weight: 600; margin-top: .2rem; } /* Ledger table — donation transparency, trip inclusions */ .ledger { width: 100%; border-collapse: collapse; font-size: .9375rem; } .ledger caption { text-align: left; font-family: var(--head); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); padding-bottom: .6rem; } .ledger th, .ledger td { text-align: left; padding: .65rem .5rem; border-bottom: var(--hair); } .ledger th { font-family: var(--head); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; border-bottom: var(--hair-ink); } .ledger td:last-child, .ledger th:last-child { text-align: right; font-variant-numeric: tabular-nums; } .ledger tfoot td { font-weight: 700; border-bottom: 0; border-top: var(--hair-ink); } /* Testimonial strip */ .voices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; } .voice { border-top: var(--hair-ink); padding-top: .8rem; } .voice blockquote { margin: 0 0 .7rem; font-style: italic; font-size: 1rem; line-height: 1.5; } .voice cite { font-family: var(--head); font-style: normal; font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .voice cite b { color: var(--ink); font-weight: 700; } /* Big stat row */ .figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; border-block: var(--hair-ink); padding-block: 1.3rem; margin-block: 1.6rem; } .figure__num { font-family: var(--display); font-weight: 900; font-size: clamp(2rem, 4vw, 2.9rem); line-height: .9; color: var(--spot); } .figure__label { font-family: var(--head); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-top: .4rem; line-height: 1.35; } /* Two-column editorial split (text + aside) */ .split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 2.4rem; align-items: start; } /* Newsletter page hero coupon */ .signup { max-width: 30rem; } .issues { list-style: none; margin: 0; padding: 0; } .issues li { border-bottom: var(--hair); padding: .85rem 0; } .issues .no { font-family: var(--head); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--spot); display: block; margin-bottom: .2rem; } .issues b { font-family: var(--head); font-size: 1rem; display: block; margin-bottom: .2rem; } .issues p { margin: 0; font-size: .9375rem; color: var(--ink-2); } /* Archive — grouped by month, read as a ledger rather than a feed */ .archive-group { margin-bottom: 2.4rem; } .archive-month { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-bottom: 3px solid var(--ink); padding-bottom: .3rem; margin: 0; font-family: var(--head); font-size: .8125rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; } .archive-month .tally { font-weight: 500; font-size: .6875rem; letter-spacing: .1em; color: var(--ink-3); white-space: nowrap; } .archive-list { list-style: none; margin: 0; padding: 0; } .archive-list .story { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); gap: 1.4rem; padding: 1.15rem 0; } .archive-date { font-family: var(--head); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding-top: .2rem; border-right: var(--hair); line-height: 1.3; } .archive-date b { display: block; font-family: var(--display); font-size: 1.5rem; color: var(--ink); line-height: 1; margin-bottom: .15rem; } .archive-list .headline { font-size: 1.2rem; } .archive-list .dek { font-size: .9375rem; margin-bottom: .55rem; } .archive-list .byline { margin-bottom: .55rem; } /* Jump list in the archive sidebar */ .months { list-style: none; margin: 0; padding: 0; } .months li { border-bottom: var(--hair); } .months a { display: flex; justify-content: space-between; gap: .75rem; padding: .5rem .1rem; text-decoration: none; font-family: var(--head); font-size: .8125rem; font-weight: 600; } .months a:hover { color: var(--spot); } .months .tally { color: var(--ink-3); font-weight: 500; font-size: .75rem; } /* Notice box (used for privacy + editor's notes) */ .notice { border-left: 4px solid var(--spot); background: var(--paper-lift); padding: 1rem 1.1rem; margin: 1.6rem 0; font-size: .9375rem; } .notice p { margin: 0 0 .6rem; } .notice p:last-child { margin-bottom: 0; } .notice strong { font-family: var(--head); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; } /* ---------- 11. RESPONSIVE ---------- */ @media (max-width: 1000px) { .layout { grid-template-columns: 1fr; gap: 0; } .sidebar { position: static; padding-top: 2rem; } .offers, .voices, .keepreading__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .split { grid-template-columns: 1fr; gap: 1.6rem; } .footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { body { font-size: 1.0625rem; } /* Nav folds into a 2x2 index card instead of squeezing to nothing */ .nav__list { grid-template-columns: repeat(2, 1fr); } .nav__item:nth-child(odd) { border-left: 0; } .nav__item:nth-child(n+3) { border-top: var(--hair); } .nav__link { padding: .6rem .4rem .55rem; } .strap__inner { justify-content: center; font-size: .625rem; } .strap__inner .strap__edition { display: none; } .masthead { padding-block: 1.3rem .9rem; } .masthead__rule { gap: .55rem; font-size: .5625rem; letter-spacing: .14em; } /* Lead story drops to one column — two columns on a phone is unreadable */ .lede__body { columns: 1; } .lede { padding-top: 1.4rem; } /* Stories stack; the vertical column rule goes with them */ .stories { grid-template-columns: 1fr; column-gap: 0; } .stories::before { display: none; } .offers, .voices, .keepreading__grid { grid-template-columns: 1fr; } .offer { margin: 0 0 -1px; } .figures { grid-template-columns: repeat(2, 1fr); gap: 1.4rem 1rem; } .footer__grid { grid-template-columns: 1fr; gap: 1.4rem; } .prose { font-size: 1.0625rem; } .archive-list .story { grid-template-columns: 1fr; gap: .5rem; } .archive-date { border-right: 0; padding-top: 0; } .archive-date b { display: inline; font-size: 1rem; margin-right: .3rem; } .cut--card { max-height: 210px; } .pullquote { font-size: 1.3rem; } .flag { flex-direction: column; gap: .15rem; align-items: flex-start; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* ---------- 12. PRINT ---------- */ @media print { .nav, .adslot, .sidebar, .coupon, .skip { display: none !important; } body { background: #fff; font-size: 10.5pt; } .layout { grid-template-columns: 1fr; } a { text-decoration: none; } }