/*
Theme Name: The Beirut Journal
Theme URI: https://thebeirutjournal.com
Description: The magazine theme for The Beirut Journal. A custom classic theme — deliberately NOT a licensed marketplace theme. Reproduces the magazine layout patterns the owner specified (centred masthead, ticker strip, four-column hero, category blocks with a rail) on The Beirut Journal's own assets and type licences, so the site shares no theme fingerprint with any sibling property. Bilingual AR/EN with full RTL via CSS logical properties.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
Author: The Beirut Journal
Text Domain: tbj
Tags: news, magazine, rtl-language-support, translation-ready, custom-menu, featured-images
*/

/* ═══════════════════════════════════════════════════════════════════════════
   THE BEIRUT JOURNAL — magazine stylesheet, v2

   Rebuilt 2026-08-17 to the ourpublicistmag.com template on the owner's
   instruction: same template, same page design, module for module.

   EVERY NUMBER BELOW WAS MEASURED off the reference in a real browser at
   1440px — computed styles read out of the DOM, not eyeballed off a
   screenshot. If you change one, re-measure first. The measurements:

       container      1440px max, 24px side padding, 20px column gutters
       hero row       20% / 40% / 20% / 20%
       section row    75% / 25%
       accent         #ec3535   (hover / active state #f43f3f)
       ground         #ffffff
       display type   Work Sans 700, 32/32, -1px tracking
       headline type  PT Serif 700, 14/19.6 in lists, 16/20.8 in stacks
       label type     Work Sans 600, 12/12, -0.5px, uppercase, accent
       nav            Work Sans 600, 14px, 42px line, sentence case
       card crop      3:2   ·   lead 10:11   ·   portrait 5:6   ·   thumb 10:7

   TWO TYPEFACES, BOTH SELF-HOSTED. There is no fonts.googleapis.com link
   anywhere in this theme and there must not be one: that request logs every
   visitor's IP to a third party, against owner invisibility (facts.md §15).
   The files are in assets/fonts and are enqueued from functions.php.

   The brand's own display serif survives in ONE place — the wordmark image in
   the masthead, which is the identity itself. Do not set it as a web font.

   RTL: every directional rule uses LOGICAL properties (padding-inline,
   border-inline-start, inset-inline, margin-block …). There is no separate
   rtl.css to keep in sync. A rule written with a physical left/right will NOT
   flip when the site is in Arabic — always use the logical form.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── 0. Fonts ──────────────────────────────────────────────────────────────
   Work Sans is a VARIABLE font: one file covers 400–800, so every weight in
   the design costs nothing beyond the first download. PT Serif is static and
   ships as two weights. latin + latin-ext only — the Arabic face is a system
   font (see --arabic), because no licensed Arabic webfont is in the theme. */

@font-face{
  font-family:"Work Sans"; font-style:normal; font-weight:400 800;
  font-display:swap;
  src:url("assets/fonts/worksans-latin.woff2") format("woff2");
  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+2074,U+20AC,U+2122,U+2191,
    U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Work Sans"; font-style:normal; font-weight:400 800;
  font-display:swap;
  src:url("assets/fonts/worksans-latin-ext.woff2") format("woff2");
  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;
}
@font-face{
  font-family:"PT Serif"; font-style:normal; font-weight:400;
  font-display:swap;
  src:url("assets/fonts/ptserif-400-latin.woff2") format("woff2");
  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+2074,U+20AC,U+2122,U+2191,
    U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"PT Serif"; font-style:normal; font-weight:400;
  font-display:swap;
  src:url("assets/fonts/ptserif-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"PT Serif"; font-style:normal; font-weight:700;
  font-display:swap;
  src:url("assets/fonts/ptserif-700-latin.woff2") format("woff2");
  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+2074,U+20AC,U+2122,U+2191,
    U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"PT Serif"; font-style:normal; font-weight:700;
  font-display:swap;
  src:url("assets/fonts/ptserif-700-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF;
}


/* ── 1. Tokens ───────────────────────────────────────────────────────────── */
:root{
  --ground:#fff;
  --ink:#000;
  --body:#111;
  --muted:#555;              /*  7.46:1 on white — secondary copy */
  --faint:#767676;           /*  4.54:1 — the AA floor for small labels */
  --accent:#ec3535;          /*  4.53:1 on white — the reference's red, and
                                 close enough to the finjan red to stay ours */
  --accent-hi:#f43f3f;       /*  hover and current-page only, never body text */
  --tint:#f7f7f7;            /*  the feature block's ground */
  --panel:#fafafa;
  --foot:#eaeaea;            /*  the footer band — a shade darker than --tint,
                                 so the page has a floor rather than fading out */
  --rule:#e6e6e6;            /*  hairline — decorative, never text */
  --rule-ink:#111;

  --sans:"Work Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",
         Roboto,Arial,sans-serif;
  --serif:"PT Serif",Georgia,"Times New Roman",serif;
  /* No licensed Arabic webfont ships with this theme, so Arabic falls to the
     best system faces. CLAUDE.md §11 names IBM Plex Sans Arabic first. */
  --arabic:"IBM Plex Sans Arabic","Geeza Pro","Al Bayan","Noto Naskh Arabic",
           system-ui,sans-serif;

  --ease:ease;
  --t:.2s;                   /*  the reference's title transition, measured */
  --t-img:.3s;               /*  and its image zoom. Slower reads as sluggish */

  --shell:1440px;
  --pad:24px;
  --gut:20px;
}

/* ── 2. Base ─────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ground);
  color:var(--body);
  font-family:var(--sans);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color var(--t) var(--ease)}
a:hover{color:var(--accent)}
h1,h2,h3,h4{margin:0;font-weight:700}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* Arabic is cursive: letter-spacing breaks the joins between letters, and
   text-transform is meaningless on it. The test string in CLAUDE.md §11 —
   "الجمهورية اللبنانية — توقيت بيروت" — must render fully joined on mobile
   before any typography change ships. Never remove these three rules. */
[lang="ar"],html[dir="rtl"] body{font-family:var(--arabic)}
[lang="ar"]{letter-spacing:0 !important}
[lang="ar"],html[dir="rtl"] .cat,html[dir="rtl"] .chip,
html[dir="rtl"] .display__sub,html[dir="rtl"] .secthead__more,
html[dir="rtl"] .mast__menu,html[dir="rtl"] .socialbar__label{
  text-transform:none !important;
}
/* The serif is a Latin face with no Arabic coverage: an Arabic headline set in
   it silently falls through to a system serif and stops matching the page. */
[lang="ar"] .t-serif,html[dir="rtl"] .t-serif{font-family:var(--arabic)}

.skip{
  position:absolute;inset-inline-start:-9999px;top:0;z-index:200;
  background:var(--ink);color:#fff;padding:12px 18px;
}
.skip:focus{inset-inline-start:0}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── 3. Shell and rows ───────────────────────────────────────────────────── */
.shell{
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--pad);
}

/* .shell centres with margin-inline:auto and .row offsets with a NEGATIVE
   margin-inline. Put both classes on one element and the row wins, the auto
   is lost, and that whole band jams against the left edge of the window while
   the header and footer stay centred. It is invisible at 1440 and obvious on
   anything wider. Always nest the row INSIDE the shell; never combine them.
   This rule is the backstop if someone combines them anyway: restore the auto
   centring, and take the row's half-gutter out of the shell's padding instead
   so the outer columns still line up with the header above them. */
.shell.row{
  margin-inline:auto;
  padding-inline:calc(var(--pad) - var(--gut) / 2);
}

.band{padding-block:0}
.band--tint{background:var(--tint);padding-block:28px 34px;margin-block:36px}
.band--centre{padding-block:8px}
.band--hero{padding-block:26px 0}

/* The row is a negative-margin grid so a column's 10px padding lands on the
   measured 20px gutter without the first and last column losing their
   alignment to the shell. Same construction as the reference. */
.row{display:flex;flex-wrap:wrap;margin-inline:calc(var(--gut) / -2)}
.row > *{padding-inline:calc(var(--gut) / 2);min-width:0}

.row--hero > .col--fresh{width:20%}
.row--hero > .col--lead{width:40%}
.row--hero > .col--stack{width:20%}
.row--hero > .col--popular{width:20%}

.row--split > .col--main{width:75%}
.row--split > .col--rail{width:25%}

.row--2 > *{width:50%}
.row--3 > *{width:33.3333%}
.row--4 > *{width:25%}

.row--portraits{margin-block-start:18px}
.row--thumbs{
  margin-block-start:22px;padding-block-start:22px;
  border-block-start:1px solid var(--rule);
}
.row--text{margin-block-start:26px}
.row--3.row--text > *,.row--4.row--text > *{padding-block:0}

/* Every row on the page is a grid of equal columns, so the rows need to break
   at the same points or the page stops agreeing with itself. */
.row > * + *{margin-block-start:0}
.row--2 > *,.row--3 > *,.row--4 > *{margin-block-end:26px}

/* ── 4. Masthead ─────────────────────────────────────────────────────────── */
.mast{background:var(--ground);position:relative;z-index:60}

/* Band 1: utilities left, logo CENTRED, socials right.
   Three columns rather than flex space-between, because space-between centres
   the logo on the *remaining* space and it drifts as the side items change
   width. The 1fr/auto/1fr grid centres it on the page, which is what the
   reference does and what the owner asked for. */
.mast__top-inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:20px;
  padding-block:22px;
}
.mast__left{display:flex;align-items:center;gap:22px}
.mast__right{display:flex;align-items:center;justify-content:flex-end;gap:16px}

.mast__menu,.mast__search{
  display:inline-flex;align-items:center;gap:7px;
  font-size:14px;font-weight:600;line-height:42px;
}
.mast__menu{color:var(--accent);text-transform:uppercase}
.mast__search{color:var(--ink)}
.mast__menu:hover,.mast__search:hover{color:var(--accent-hi)}

.ico-burger{display:inline-flex;flex-direction:column;gap:3px;width:16px}
.ico-burger b{display:block;height:2px;background:currentColor;border-radius:1px}
.ico-search{
  width:13px;height:13px;border:2px solid currentColor;border-radius:50%;
  position:relative;
}
.ico-search::after{
  content:"";position:absolute;inset-inline-end:-5px;bottom:-3px;
  width:6px;height:2px;background:currentColor;transform:rotate(45deg);
}

.mast__brand{margin:0;text-align:center;line-height:0}
.mast__brand a{display:inline-flex;flex-direction:column;align-items:center;gap:10px}
/* The cup sits ABOVE the wordmark and slightly larger than it reads on the
   page, because the masthead is the one place the mark is the subject rather
   than a marker. Keep the two heights in this ratio — a cup smaller than ~60%
   of the wordmark height stops reading as part of the lockup and starts
   reading as an icon someone parked there. */
.mast__cup{width:auto;height:74px}
.mast__word{width:auto;height:104px}
.mast__brand .custom-logo{width:auto;height:145px;margin-inline:auto}

.mast__social{display:flex;align-items:center;gap:14px}
.mast__social li{margin:0;display:flex}
.mast__social a,.mast__social .social__soon{font-size:16px;line-height:1;color:var(--ink)}
.mast__social .social__soon{opacity:.35;cursor:default}
.mast__social a:hover{color:var(--accent)}
.mast__social svg{width:1em;height:1em;fill:currentColor;display:block}

.mast__lang{
  font-size:12px;font-weight:700;letter-spacing:-.5px;
  border:1px solid var(--rule);border-radius:2px;padding:3px 8px;
}
.mast__lang:hover{border-color:var(--accent);color:var(--accent)}

/* Band 2: the section nav, centred, pinned on scroll. */
.mast__nav{
  border-block:1px solid var(--rule);
  background:var(--ground);
  position:sticky;top:0;z-index:70;
}
.mast__nav .shell{display:flex;align-items:center;justify-content:center;position:relative}

.mast__menu-list{display:flex;flex-wrap:wrap;justify-content:center;gap:0}
.mast__menu-list li{margin:0}
.mast__menu-list a{
  display:block;padding-inline:15px;
  font-size:14px;font-weight:600;line-height:42px;color:var(--ink);
}
.mast__menu-list a:hover,
.mast__menu-list .current-menu-item > a,
.mast__menu-list .current-menu-parent > a,
.mast__menu-list .current-cat > a{color:var(--accent-hi)}

/* THE CUP, TOP LEFT. It sits in the nav band's left margin at all times; the
   wordmark slides in beside it only once the band has pinned and the masthead
   has scrolled away. Both are aria-hidden and untabbable because the masthead
   logo above is the real home link — a duplicate would double the keyboard
   tour of every page. */
.mast__nav-mark{
  position:absolute;inset-inline-start:var(--pad);top:50%;
  transform:translateY(-50%);
  display:flex;align-items:center;gap:10px;line-height:0;
}
.mast__nav-cup{
  height:30px;width:auto;
  transition:transform var(--t) var(--ease);
}
.mast__nav-mark:hover .mast__nav-cup{transform:rotate(-6deg)}
.mast__nav-word{
  height:26px;width:auto;
  max-width:0;opacity:0;
  transition:max-width .25s var(--ease),opacity var(--t) var(--ease);
}
.mast__nav.is-stuck .mast__nav-word{max-width:130px;opacity:1}

/* Band 3: the ticker, opened by the cup. */
.ticker{background:var(--tint);border-block-end:1px solid var(--rule)}
.ticker__inner{
  display:grid;grid-template-columns:auto repeat(4,1fr);gap:24px;
  padding-block:22px;
}
.ticker__mark{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding-inline-end:22px;
  border-inline-end:1px solid var(--rule);
}
.ticker__mark img{width:34px;height:34px;object-fit:contain}
.ticker__mark b{
  font-size:11px;font-weight:600;letter-spacing:.4px;
  text-transform:uppercase;color:var(--accent);
}
.ticker__item a{
  display:block;
  font-family:var(--serif);font-size:14px;font-weight:700;
  line-height:1.3;letter-spacing:-.5px;color:var(--ink);
}
.ticker__item a:hover{color:var(--accent)}
.ticker__item time{
  display:block;margin-block-start:10px;
  font-size:12px;font-weight:400;color:var(--muted);
}

/* ── 5. Headings and labels ──────────────────────────────────────────────── */
.display{
  font-family:var(--sans);font-size:32px;font-weight:700;
  line-height:1;letter-spacing:-1px;color:var(--ink);
}
.display--centre{text-align:center}
.display__sub{
  margin-block-start:10px;
  font-size:13px;font-weight:600;line-height:1.2;
  text-transform:uppercase;color:var(--ink);
}

/* Section head: heading and View All on one line, over the red rule. */
.secthead{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding-block-end:10px;
  border-block-end:2px solid var(--accent);
  margin-block-end:22px;
}
.secthead__more{
  flex:none;
  font-size:13px;font-weight:600;text-transform:uppercase;color:var(--accent);
}
.secthead__more i{font-style:normal}
.secthead__more:hover{color:var(--ink)}

/* Category label. Red by default; --plain is the black variant the reference
   uses inside the hero's stacked column, where a third red would be noise. */
.cat{
  display:inline-block;
  font-size:12px;font-weight:600;line-height:1;letter-spacing:-.5px;
  text-transform:uppercase;color:var(--accent);
}
.cat:hover{color:var(--ink)}
.cat--plain{font-size:13px;color:var(--ink)}
.cat--plain:hover{color:var(--accent)}

/* Solid chip, reversed out of a picture. */
.chip{
  display:inline-block;
  padding:4px 8px;
  background:var(--accent);color:#fff;
  font-size:12px;font-weight:600;line-height:1.2;
  text-transform:uppercase;
  /* Re-measured off the reference 2026-08-17: its .td-post-category is
     ec3535 / #fff / Work Sans 600 / 12px / uppercase / 4px 8px / radius 2px.
     Everything matched except the radius, which was square here. 2px is
     barely visible on its own and completely visible side by side. */
  border-radius:2px;
}
.chip:hover{background:var(--ink);color:#fff}
.chip--section{margin-block-end:4px;font-size:13px;padding:5px 10px}

.t-serif{font-family:var(--serif);font-size:14px;font-weight:700;line-height:1.4}
.t-sans{font-size:14px;font-weight:600;line-height:1.2}
.t-display{font-size:40px;font-weight:700;line-height:1;letter-spacing:-.5px}

.dek{margin-block-start:8px;font-size:14px;line-height:1.5;color:var(--muted)}

/* ── 6. Media boxes ──────────────────────────────────────────────────────── */
/* Aspect-ratio boxes rather than fixed heights: most wire articles carry the
   outlet's own picture by hotlink at whatever size that outlet serves, so the
   crop has to happen here. object-fit:cover is what makes one grid out of
   nine different source sizes. */
.media{position:relative;overflow:hidden;background:var(--tint)}
.media img{width:100%;height:100%;object-fit:cover;
  transition:transform var(--t-img) ease-in-out}
.mod:hover .media img{transform:scale(1.04)}

/* The picture's own link. It carries no text, so it is hidden from assistive
   tech and taken out of the tab order — the headline beside it is the real
   link and a second one to the same URL doubles every keyboard tour.
   NOTE: this is a SEPARATE anchor from the headline's, deliberately. Wrapping
   a whole module in one <a> and putting the category link inside it produces
   nested anchors, which every browser silently splits — that broke both the
   category chip and the text-and-thumb row on the first build of this page. */
.mod__link{display:block;line-height:0}

.media--3x2{aspect-ratio:3/2}
.media--10x11{aspect-ratio:10/11}
.media--5x6{aspect-ratio:5/6}
.media--thumb{aspect-ratio:10/7}

/* The brand plate is line art on a near-white ground; cropping it like a
   photograph cuts the illustration in half. Contain it and centre it. */
.media__plate{object-fit:contain;padding:12%;background:var(--tint)}
.media--failed{background:var(--tint)}

/* THE SOURCE CREDIT. Owner's instruction 2026-08-17: smallest possible size,
   on the picture, and nowhere else on the card. 9px is the floor at which it
   is still legible; it is a credit line, not a label, and it must never
   compete with the headline. There is deliberately no matching credit under
   the card — see the note over the front-page modules in functions.php. */
.media__credit{
  position:absolute;inset-block-end:0;inset-inline-start:0;
  padding:2px 5px;
  background:rgba(0,0,0,.55);color:rgba(255,255,255,.92);
  font-size:9px;font-weight:500;line-height:1.4;letter-spacing:.2px;
  text-transform:uppercase;
  pointer-events:none;
}

/* ── 7. Front-page modules ───────────────────────────────────────────────── */
.mod{margin:0}

/* Text item — serif headline, then category and date on one line. */
.mod--text .t-serif{font-size:14px;line-height:1.4}
.mod__meta{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-block-start:10px;
}
.mod__meta time{
  font-size:12px;font-weight:500;letter-spacing:-.5px;color:var(--body);
}

/* A hairline between items, never under the last one. */
.list--rule{margin-block-start:18px}
.rail__more{
  display:inline-block;margin-block-start:20px;
  padding-block-start:16px;border-block-start:1px solid var(--rule);
  width:100%;
  font-size:13px;font-weight:600;text-transform:uppercase;color:var(--accent);
}
.rail__more:hover{color:var(--ink)}
.rail__more i{font-style:normal}
.list--rule .mod{padding-block:16px;border-block-start:1px solid var(--rule)}
.list--rule .mod:first-child{padding-block-start:0;border-block-start:0}
.list--rule .mod:last-child{padding-block-end:0}

/* Most-read panel. The cup sits behind it as a watermark — large, very low
   contrast, clipped by the panel. It reads as letterpress rather than as an
   image, which is the only way a logo belongs behind live text. */
.panel{
  position:relative;overflow:hidden;
  margin-block-start:16px;background:var(--panel);padding:18px 20px;
}
.panel::after{
  content:"";position:absolute;
  inset-inline-end:-46px;inset-block-end:-44px;
  width:150px;height:150px;
  background:url("assets/mark-ink.png") no-repeat center / contain;
  /* The cup is high-contrast artwork, so it needs to sit far lower than a flat
     shape would. At .05 it still read through the headline above it. */
  opacity:.035;pointer-events:none;
}
.panel > *{position:relative}
.mod--brief{padding-block:14px;border-block-start:1px solid var(--rule)}
.mod--brief:first-child{padding-block-start:0;border-block-start:0}
.mod--brief:last-child{padding-block-end:0}
.mod--brief .t-sans{margin-block-start:8px}
.mod--brief time{
  display:block;margin-block-start:10px;
  font-size:12px;font-weight:500;letter-spacing:-.5px;
}

/* Overlay — headline reversed out of the picture.
   The scrim is a gradient, not a flat tint: a flat one either washes out the
   top of the picture or leaves the headline unreadable over a light frame. */
.overlay{position:relative}
.overlay__body{
  position:absolute;inset-inline:0;inset-block-end:0;
  padding:26px;
  color:#fff;
  /* A three-stop gradient, not a flat tint. Wire pictures arrive at whatever
     exposure the outlet shot them at, and roughly half of them are LIGHT —
     the first build used a weaker scrim and white headlines vanished into
     bright frames. These stops keep the headline legible on a white sky while
     still showing the top two-thirds of the picture. */
  background:linear-gradient(to top,
    rgba(0,0,0,.92) 0%,rgba(0,0,0,.78) 32%,rgba(0,0,0,.42) 62%,rgba(0,0,0,0) 100%);
}
.overlay__body a{color:#fff}
.overlay__body a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
/* Belt and braces for a blown-out highlight sitting directly behind a letter. */
.overlay__body .t-display,.overlay__dek{text-shadow:0 1px 3px rgba(0,0,0,.5)}
.overlay__body .chip{margin-block-end:12px}
.overlay__dek{
  margin-block-start:14px;
  font-size:16px;font-weight:500;line-height:1.4;color:#fff;
}
.overlay--portrait .overlay__body{padding:18px}
.overlay--portrait .t-display{font-size:22px;line-height:1.15}
.overlay--portrait .chip{font-size:12px;margin-block-end:10px}

/* Stack — picture, plain label, serif headline. */
.mod--stack{margin-block-end:26px}
.mod--stack .cat{display:block;margin-block-start:14px}
.mod--stack .t-serif{margin-block-start:10px;font-size:16px;line-height:1.3}

/* Card — the standard module. */
.mod--card .t-serif{margin-block-start:14px;font-size:16px;line-height:1.3}

/* Meta line: 20px round mark, byline, date. The mark is the reference's
   device — without it the meta line sits unanchored under the headline. */
.meta{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  margin-block-start:12px;
  font-size:12px;font-weight:500;letter-spacing:-.5px;color:var(--body);
}
.meta__mark{
  width:20px;height:20px;border-radius:50%;flex:none;
  background:var(--tint);object-fit:contain;padding:2px;
}
.meta__by{font-size:13px;font-weight:700;letter-spacing:-.5px}
.meta__sep{color:var(--faint)}

/* Thumb — headline left, small picture right. */
.mod--thumb{
  display:flex;align-items:flex-start;gap:14px;
  margin-block-end:22px;
}
.mod--thumb .mod__text{flex:1 1 auto;min-width:0;order:1}
.mod--thumb .mod__link{flex:0 0 100px;width:100px;order:2}
.mod--thumb .t-serif{font-size:14px;line-height:1.4}
.mod--thumb .cat{margin-block-start:10px}

/* Social bar. */
.socialbar{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding-block:16px;
  border-block:1px solid var(--rule);
  margin-block:36px 0;
}
.socialbar__label{
  font-size:13px;font-weight:600;text-transform:uppercase;color:var(--ink);
}
.socialbar__note{flex:1 1 auto;font-size:13px;color:var(--muted)}
.socialbar__icons{display:flex;align-items:center;gap:16px}
.socialbar__icons li{margin:0;display:flex}
.socialbar__icons a,.socialbar__icons .social__soon{font-size:16px;line-height:1}
.socialbar__icons .social__soon{opacity:.35;cursor:default}
.socialbar__icons a:hover{color:var(--accent)}
.socialbar__icons svg{width:1em;height:1em;fill:currentColor;display:block}

/* ── 8. Drawer ───────────────────────────────────────────────────────────── */
.drawer{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.5)}
.drawer[hidden]{display:none}
.drawer__panel{
  position:absolute;inset-block:0;inset-inline-start:0;
  width:min(340px,86vw);
  background:var(--ground);padding:26px;overflow-y:auto;
}
.drawer__close{position:absolute;inset-inline-end:16px;top:12px;font-size:28px;line-height:1}
.drawer__mark{display:block;line-height:0;margin-block-end:6px}
.drawer__mark img{width:56px;height:56px;object-fit:contain}
.drawer__list{margin-block:22px 26px}
.drawer__list li + li{border-block-start:1px solid var(--rule)}
.drawer__list a{display:block;padding-block:13px;font-size:15px;font-weight:600}
.drawer__social{display:flex;flex-wrap:wrap;gap:18px;font-size:18px}
.drawer__social li{margin:0;display:flex}
.drawer__social .social__soon{opacity:.35;cursor:default}
.drawer__social svg{width:1em;height:1em;fill:currentColor;display:block}

/* ── 9. Article, archive, and the rest ───────────────────────────────────── */
.wrap{max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}
.wrap--narrow{max-width:720px;margin-inline:auto}

.article__head{max-width:760px;margin-inline:auto;padding-block:40px 0;text-align:center}
.article__title{
  margin-block:14px;
  font-size:clamp(30px,4.2vw,46px);font-weight:700;line-height:1.1;
  letter-spacing:-1px;
}
.article__standfirst{
  margin-block-start:14px;font-size:19px;line-height:1.55;color:var(--muted);
}
.article__meta{
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  margin-block-start:20px;font-size:12px;font-weight:500;letter-spacing:-.5px;
}
.article__hero{margin-block:32px;position:relative}
.article__hero img{width:100%;height:auto}
.article__hero--plate img{max-height:420px;object-fit:contain}

.article__body{max-width:720px;margin-inline:auto;font-size:18px;line-height:1.7}
.article__body p{margin-block:0 1.25em}
.article__body h2{margin-block:1.6em .5em;font-size:26px;letter-spacing:-.5px}
.article__body h3{margin-block:1.4em .5em;font-size:20px}
.article__body a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.article__body blockquote{
  margin-block:1.6em;padding-inline-start:20px;
  border-inline-start:3px solid var(--accent);
  font-family:var(--serif);font-size:20px;line-height:1.5;
}
.article__body img{margin-block:1.6em}

/* The source note at the foot of a wire story — see tbj_source_link().
   Quiet by design: it is a citation, not a call to action. It sits on the same
   720px measure as the body so it reads as the last line of the article. */
.article__source{
  max-width:720px;margin:26px auto 0;padding-block-start:14px;
  border-block-start:1px solid var(--rule,rgba(0,0,0,.14));
  font-size:13px;letter-spacing:-.1px;color:var(--muted,#6b6b6b);
}
.article__source a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.article__source a:hover{color:var(--accent)}

/* ── The Journal's View ────────────────────────────────────────────────────
   The paper's own comment, printed AFTER the report and visibly separate from
   it. The tint panel and the standing label are the whole point: a reader
   should be able to tell at a glance that this is judgement rather than
   reporting, without having to read a word of it first.
   Matches .article__body's 720px measure so the column edge stays true. */
.article__view{
  max-width:720px;margin:34px auto 0;padding:20px 22px;
  background:var(--tint,rgba(0,0,0,.035));
  border-inline-start:3px solid var(--accent);
}
.article__view-label{
  margin:0 0 8px;
  font-family:inherit;
  font-size:12px;font-weight:700;letter-spacing:.9px;
  text-transform:uppercase;color:var(--accent);
}
.article__view-text{
  margin:0;
  font-size:17px;line-height:1.6;color:var(--ink,#16181d);
}
/* Arabic sets its own label tracking: uppercase and letter-spacing are
   meaningless in Arabic script and letter-spacing actively breaks joins. */
[lang="ar"] .article__view-label,
[dir="rtl"] .article__view-label{
  text-transform:none;letter-spacing:0;
}
@media (max-width:680px){
  .article__view{padding:16px 17px;margin-block-start:28px}
  .article__view-text{font-size:16px}
}

.correction{
  margin-block:28px;padding:16px 18px;
  background:var(--tint);border-inline-start:3px solid var(--accent);
  font-size:14px;
}

.kicker{
  display:inline-block;
  font-size:12px;font-weight:600;letter-spacing:-.5px;
  text-transform:uppercase;color:var(--accent);
}

.archive-head{padding-block:36px 8px;border-block-end:2px solid var(--accent);margin-block-end:26px}
.archive-head h1{font-size:32px;letter-spacing:-1px}

/* ── The archive card ──────────────────────────────────────────────────────
   `tbj_card()` had NO CSS AT ALL. Not a single `.card` rule existed, so every
   category page rendered raw: pictures at whatever size the outlet served,
   portrait next to landscape, cards of wildly different heights, and a section
   plate blown up to 600px tall with the headline pushed off the fold. That is
   what "the news section is just a newspaper image" actually was — the News
   archive holds one plate-illustrated post, so the bug had nothing else to
   hide behind.

   The front page never showed it because the front page uses the `.mod`
   modules, which have aspect boxes. Same system applied here. */
.card{margin:0}
.card > a{display:block;color:inherit;text-decoration:none}

.card__media{
  position:relative;overflow:hidden;
  aspect-ratio:3/2;                 /* the house card crop, as on the front page */
  background:var(--tint);
}
.card__media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform var(--t-img) ease-in-out;
}
.card > a:hover .card__media img{transform:scale(1.04)}

/* The brand plate is line art, not a photograph: contain it, do not crop it. */
.card__media--plate img{object-fit:contain;padding:12%}
.card__media--plate span{
  position:absolute;inset-block-end:8px;inset-inline-start:8px;
  font-size:10px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);
}

.card__body{padding-block-start:12px}
.card__body .kicker{margin-block-end:6px}
.card__title{
  font-family:var(--serif);
  font-size:17px;font-weight:700;line-height:1.3;
  margin:0;
  transition:color var(--t) var(--ease);
}
.card > a:hover .card__title{color:var(--accent)}
.card__excerpt{
  margin-block-start:8px;
  font-size:14px;line-height:1.5;color:var(--muted);
}
.byline{
  margin-block-start:10px;
  font-size:12px;line-height:1.4;color:var(--faint);
}
.byline .sep{margin-inline:4px}

[dir="rtl"] .card__title{font-family:var(--arabic);letter-spacing:0}

@media (max-width:1024px){
  .card__title{font-size:16px}
}

.grid{display:flex;flex-wrap:wrap;margin-inline:calc(var(--gut) / -2)}
.grid > *{padding-inline:calc(var(--gut) / 2);margin-block-end:26px;min-width:0}
.grid--3 > *{width:33.3333%}
.grid--4 > *{width:25%}

.ribbon{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding-block-end:10px;border-block-end:2px solid var(--accent);
  margin-block-end:22px;
}
.ribbon__label{font-size:32px;font-weight:700;letter-spacing:-1px;line-height:1}
.ribbon__rule{display:none}
.ribbon__more{font-size:13px;font-weight:600;text-transform:uppercase;color:var(--accent)}

.pagination{display:flex;gap:8px;justify-content:center;padding-block:34px}
.pagination .page-numbers{
  padding:8px 13px;border:1px solid var(--rule);font-size:13px;font-weight:600;
}
.pagination .current{background:var(--accent);border-color:var(--accent);color:#fff}

.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border:1px solid var(--rule);border-radius:2px;
  font-size:12px;font-weight:600;
}
.pill--solid{background:var(--accent);border-color:var(--accent);color:#fff}
.pill:hover{border-color:var(--accent);color:var(--accent)}
.pill--solid:hover{background:var(--ink);border-color:var(--ink);color:#fff}

/* ── 10. Comments ──────────────────────────────────────────────────────────
   Owner, 2026-08-17: "the leave a response name email … these are ugly."
   They were: core's default markup with almost no CSS, inline labels, three
   unequal boxes and a stray Website field.

   Rebuilt to the same register as the footer, which is where this section
   actually belongs visually — it is the last thing on the page, so it gets a
   real ground (--tint), a 3px black rule to open it, and headings in the same
   Work Sans 700/24/−1px as "About us" and "The daily brief". Anything smaller
   made the end of an article trail off, which is the one thing the reference
   never does. */
.band--comments{
  padding-block:0 56px;
  background:var(--ground);
}
.comments{
  max-width:720px;margin-inline:auto;
  padding-block-start:40px;
  border-block-start:3px solid var(--ink);
}

.comments__title,
.comments #reply-title{
  font-family:var(--sans);
  font-size:24px;font-weight:700;line-height:1.15;letter-spacing:-1px;
  margin:0 0 20px;
}
.comments #reply-title small{
  display:block;
  font-size:13px;font-weight:500;letter-spacing:0;
  margin-block-start:8px;
}
.comments #reply-title small a{color:var(--accent)}

/* The standards note. PT Serif, because it is the paper speaking to the
   reader in the same voice as the article, not UI furniture. */
.comments__note,
.comments__closed{
  font-family:var(--serif);
  font-size:15px;line-height:1.55;color:var(--muted);
  margin:0 0 28px;
  padding-inline-start:16px;
  border-inline-start:2px solid var(--rule);
}

/* ── the thread ── */
.comments__list{list-style:none;margin:0 0 44px;padding:0}
.comments__list ol{list-style:none;padding-inline-start:28px}
.comments__list li.comment{
  padding-block:22px;
  border-block-start:1px solid var(--rule);
}
.comments__list li.comment:first-child{border-block-start:0;padding-block-start:0}
.comments__list .fn{
  font-family:var(--sans);font-size:15px;font-weight:700;font-style:normal;
  letter-spacing:-.2px;
}
.comments__list .says{display:none}          /* "John says:" is not a design */
.comments__list .comment-meta,
.comments__list .comment-metadata{
  font-family:var(--sans);
  font-size:12px;font-weight:500;color:var(--faint);
  letter-spacing:.02em;
  margin-block:2px 12px;
}
.comments__list .comment-metadata a{color:inherit;text-decoration:none}
.comments__list .comment-metadata a:hover{color:var(--accent)}
.comments__list .comment-content p{
  font-family:var(--serif);
  font-size:16px;line-height:1.65;color:var(--body);
  margin:0 0 12px;
}
.comments__list .comment-content p:last-child{margin-block-end:0}
.comments__list .reply{margin-block-start:10px}
.comments__list .comment-reply-link{
  font-family:var(--sans);
  font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink);text-decoration:none;
  border-block-end:1px solid var(--ink);
  padding-block-end:2px;
}
.comments__list .comment-reply-link:hover{color:var(--accent);border-color:var(--accent)}
.comments__list .comment-awaiting-moderation{
  display:inline-block;
  font-family:var(--sans);font-size:12px;font-weight:600;
  color:var(--accent);margin-block-end:8px;
}

/* ── the form ──
   A two-column grid: name and email share the top row, everything else spans.
   Labels sit ABOVE their input in small caps, which is what stops the stack of
   boxes reading as a form from 2004. */
.comment-form{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px 20px;
}
.comment-form > p,
.comment-form .comments__note,
.field--full,
.field--check,
.form-submit{grid-column:1 / -1}
.field--half{grid-column:span 1}
.field{display:flex;flex-direction:column;min-width:0}

.comment-form label{
  font-family:var(--sans);
  font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink);
  margin-block-end:8px;
}
.field__req{color:var(--accent);margin-inline-start:2px}
.field__hint{
  font-family:var(--sans);
  font-size:11px;color:var(--faint);
  margin-block-start:7px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea{
  width:100%;
  font-family:var(--sans);
  font-size:15px;line-height:1.5;color:var(--body);
  background:var(--ground);
  border:1px solid var(--rule);
  border-radius:4px;
  padding:13px 15px;
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);
  -webkit-appearance:none;appearance:none;
}
.comment-form textarea{
  min-height:170px;resize:vertical;
  font-family:var(--serif);font-size:16px;line-height:1.6;
}
.comment-form input::placeholder,
.comment-form textarea::placeholder{color:#9b9b9b}
.comment-form input:focus,
.comment-form textarea:focus{
  outline:none;
  border-color:var(--ink);
  /* A ring rather than a thick border: the field must not resize on focus. */
  box-shadow:0 0 0 3px rgba(0,0,0,.07);
}

/* Consent tick. The label is the click target and sits on the same baseline
   as the box, which core's default markup does not manage. */
.field--check{
  flex-direction:row;align-items:flex-start;gap:10px;
}
.field--check input[type="checkbox"]{
  inline-size:16px;block-size:16px;margin:1px 0 0;flex:none;
  accent-color:var(--ink);
}
.field--check label{
  font-family:var(--sans);
  font-size:13px;font-weight:400;
  text-transform:none;letter-spacing:0;
  color:var(--muted);margin:0;cursor:pointer;
}

/* The button. Solid black, matching the footer's subscribe CTA rather than
   the red pill: red is the paper's category colour and it is already doing a
   job on this page. */
.form-submit{margin:4px 0 0}
.comment-form .btn,
.comment-form input[type="submit"]{
  font-family:var(--sans);
  font-size:14px;font-weight:700;letter-spacing:.02em;
  color:#fff;background:var(--ink);
  border:1px solid var(--ink);border-radius:4px;
  min-block-size:50px;
  padding-inline:34px;
  cursor:pointer;
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease);
  -webkit-appearance:none;appearance:none;
}
.comment-form .btn:hover,
.comment-form input[type="submit"]:hover{
  background:var(--accent);border-color:var(--accent);
}

/* Arabic: the sans stack changes and letter-spacing must go, per CLAUDE.md §11.
   Uppercase is meaningless in Arabic script and must not be applied to it. */
[lang="ar"] .comment-form label,
[dir="rtl"] .comment-form label,
[dir="rtl"] .comments__list .comment-reply-link{
  font-family:var(--arabic);
  text-transform:none;
  letter-spacing:0;
  font-size:12px;
}
[dir="rtl"] .comment-form textarea,
[dir="rtl"] .comment-form input[type="text"],
[dir="rtl"] .comment-form input[type="email"]{font-family:var(--arabic);letter-spacing:0}

@media (max-width:640px){
  .comment-form{grid-template-columns:1fr;gap:18px}
  .field--half{grid-column:1 / -1}
  .comments{padding-block-start:32px}
  .comments__title,
  .comments #reply-title{font-size:21px}
  .comment-form .btn,
  .comment-form input[type="submit"]{inline-size:100%}
}

/* ── 11. Footer ──────────────────────────────────────────────────────────────
   Measured off the reference. The important thing here is that its footer is
   NOT fine print: headings are 24px Work Sans 700 at −1px, and the about
   paragraph is PT SERIF 15/22.5. It reads as a real closing section of the
   page, which is most of why the reference's bottom-of-page feels finished. */
.site-footer{margin-block-start:52px;background:var(--foot)}

/* Band 1 — logo left, nav right, over a 3px black rule. */
.foot-top{
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  flex-wrap:wrap;
  padding-block:20px;
  border-block-end:3px solid var(--ink);
}
.foot-logo{display:flex;align-items:center;gap:14px;line-height:0}
.foot-logo__mark{height:54px;width:auto}
.foot-logo__word{height:44px;width:auto}
.foot-nav__list{display:flex;flex-wrap:wrap;gap:0}
.foot-nav__list a{
  display:block;padding-inline:11px;
  font-size:14px;font-weight:600;line-height:1.2;color:var(--ink);
}
.foot-nav__list a:hover,.foot-nav__list .current-menu-item > a{color:var(--accent)}

/* Band 2 — four columns. */
.foot-grid{
  display:grid;
  grid-template-columns:1.45fr .95fr 1.5fr 1.45fr;
  gap:48px;
  padding-block:40px 44px;
}
.foot-h{
  font-size:24px;font-weight:700;line-height:1;letter-spacing:-1px;
  color:var(--ink);margin-block-end:18px;
}
.foot-about{font-family:var(--serif);font-size:15px;line-height:1.5;color:var(--ink)}

.foot-links li{margin-block-end:12px}
.foot-links a{font-size:15px;font-weight:600;color:var(--ink)}
.foot-links a:hover{color:var(--accent)}

.foot-item{padding-block:14px;border-block-start:1px solid var(--rule)}
.foot-item:first-child{padding-block-start:0;border-block-start:0}
.foot-item h3{font-size:15px;font-weight:600;line-height:1.2}
.foot-item__meta{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-block-start:10px;
}
.foot-item__meta time{font-size:12px;font-weight:500;letter-spacing:-.5px}

.foot-note{font-size:15px;line-height:1.5;color:var(--ink);margin-block-end:18px}
/* The reference's field-and-button, as one honest control until a list
   provider exists. Same 50px height, same 5px radius, same full width. */
.foot-cta{
  display:block;width:100%;padding-block:15px;
  background:var(--ink);color:#fff;border-radius:5px;
  font-size:15px;font-weight:700;text-align:center;
}
.foot-cta:hover{background:var(--accent);color:#fff}
.foot-fine{margin-block-start:14px;font-size:13px;font-style:italic;line-height:1.5;color:var(--muted)}
.foot-fine a{text-decoration:underline;text-underline-offset:2px}

/* The reference's filled black squares. tbj_social_panel() emits a <span> —
   not an <a> — for a channel that has no account yet, so both are styled and
   only the real link takes the hover. */
.foot-social{display:flex;flex-wrap:wrap;gap:10px;margin-block-start:22px}
.foot-social li{margin:0}
.foot-social a,.foot-social .social__soon{
  display:grid;place-items:center;
  width:38px;height:38px;background:var(--ink);color:#fff;font-size:17px;
}
/* A channel with no account yet keeps the solid square — dimming the whole
   tile made the row read as broken. Only the GLYPH is held back, which says
   "not yet" without saying "this footer is unfinished". */
.foot-social .social__soon{cursor:default}
.foot-social .social__soon svg{opacity:.45}
.foot-social a:hover{background:var(--accent);color:#fff}
.foot-social svg{width:1em;height:1em;fill:currentColor;display:block}

/* Band 3 — base. */
.foot-base{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  flex-wrap:wrap;
  padding-block:18px;
  /* Room for the fixed back-to-top button, which otherwise sits on top of
     whatever ends this row. */
  padding-inline-end:64px;
  border-block-start:1px solid var(--rule);
  font-size:12px;color:var(--muted);
}
.foot-base__brand{display:flex;align-items:center;gap:9px}
.foot-base__brand img{width:20px;height:20px;object-fit:contain;opacity:.75}

/* ── 11b. Back to top — the cup ─────────────────────────────────────────── */
/* Appears only once the nav has pinned, i.e. once there is anything to go back
   up to. A permanently visible one covers content on short pages. */
.totop{
  position:fixed;inset-inline-end:20px;inset-block-end:20px;z-index:90;
  width:46px;height:46px;padding:8px;
  background:var(--ink);border-radius:50%;
  display:grid;place-items:center;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),
             background var(--t) var(--ease);
}
.totop.is-on{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--accent)}
.totop img{
  width:100%;height:100%;object-fit:contain;
  /* mark-ink is dark artwork; invert it to sit on the dark button. */
  filter:invert(1);
}

/* ── 12. Motion ──────────────────────────────────────────────────────────── */
/* The reference reveals almost nothing on scroll, and the two slow transitions
   an earlier build shipped (1.1s image zoom, 1s 26px reveal) are precisely why
   the site FELT different from it even where the layout matched. Short and
   small, or not at all. */
.reveal{opacity:0;transform:translateY(14px);
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
.reveal.is-in,.no-js .reveal{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;transition-duration:.01ms !important;
  }
  .reveal{opacity:1;transform:none}
}

/* ── 13. Breakpoints ─────────────────────────────────────────────────────── */
/* The hero's four columns collapse in two stages, not one: at 1100 the lead
   takes the full width with Fresh stories and Most read beside it, which keeps
   the lead picture large — dropping straight to one column at tablet size
   wastes the widest thing on the page. */
@media (max-width:1180px){
  .row--hero > .col--fresh{width:33.3333%}
  .row--hero > .col--lead{width:66.6666%;order:-1;margin-block-end:26px}
  .row--hero > .col--stack{width:33.3333%}
  .row--hero > .col--popular{width:33.3333%}
  .mast__cup{height:62px}
  .mast__word{height:88px}
  .mast__brand .custom-logo{height:120px}
  .t-display{font-size:34px}
}

@media (max-width:980px){
  .row--split > .col--main,.row--split > .col--rail{width:100%}
  .row--split > .col--rail{margin-block-start:34px}
  .row--4 > *{width:50%}
  .grid--4 > *{width:50%}
  .ticker__inner{grid-template-columns:auto repeat(2,1fr)}
  .ticker__item:nth-child(n+4){display:none}
  .foot-grid{grid-template-columns:1fr 1fr;gap:34px}
  .foot-top{justify-content:center}
}

@media (max-width:760px){
  :root{--pad:16px}
  .row--hero > .col--fresh,.row--hero > .col--lead,
  .row--hero > .col--stack,.row--hero > .col--popular{width:100%}
  .row--hero > .col--fresh,.row--hero > .col--stack{margin-block-end:30px}
  .row--2 > *,.row--3 > *,.row--4 > *{width:100%}
  .grid--3 > *,.grid--4 > *{width:100%}
  .ticker__inner{grid-template-columns:auto 1fr;gap:16px;padding-block:16px}
  .ticker__item:nth-child(n+3){display:none}
  .ticker__mark{padding-inline-end:16px}
  .ticker__mark img{width:26px;height:26px}

  /* The nav band scrolls sideways rather than wrapping to three lines. */
  .mast__nav .shell{justify-content:flex-start;overflow-x:auto;
    scrollbar-width:none;-ms-overflow-style:none}
  .mast__nav .shell::-webkit-scrollbar{display:none}
  .mast__menu-list{flex-wrap:nowrap}
  .mast__menu-list a{padding-inline:11px}
  .mast__nav-mark{display:none}

  .mast__top-inner{grid-template-columns:auto 1fr auto;padding-block:14px}
  .mast__brand a{gap:6px}
  .mast__cup{height:34px}
  .mast__word{height:52px}
  .mast__brand .custom-logo{height:74px}
  .mast__menu span,.mast__search span,.mast__social{display:none}
  .mast__left{gap:14px}

  .t-display{font-size:26px}
  .overlay__body{padding:18px}
  .overlay__dek{font-size:14px;margin-block-start:10px}
  .display{font-size:26px}
  .article__body{font-size:17px}
  .foot-grid{grid-template-columns:1fr;gap:30px;padding-block:32px}
  .foot-top{flex-direction:column;gap:16px;text-align:center}
  .foot-nav__list{justify-content:center}
  .foot-h{font-size:21px}
  .totop{inset-inline-end:14px;inset-block-end:14px;width:40px;height:40px}
}