/**
 * Magazine digital edition (the book -> articles, plus All editions). Mounted by mu-plugins/hm-edition.php.
 *
 * Built on Hospitality Marketplace's own article system (theme.css .hm-article): mono kickers and
 * captions with the cerise marker, Georgia body, display drop cap, floated "weave" images. What
 * changes per article is the display face (titles, subheads, pull quotes, drop cap) and the
 * accent, set by data-type / --ed-accent on each .ed-article. Body text never changes.
 */

.ed {
  --e-bg: var(--hm-bg, #fbfaf8);
  --e-surface: var(--hm-surface, #f1f0ec);
  --e-ink: var(--hm-ink, #14181a);
  --e-body: var(--hm-body, #33383a);
  --e-mut: var(--hm-mut, #71767a);
  --e-line: var(--hm-line, #e2e1dd);
  --e-cerise: var(--hm-cerise, #c51e5d);
  --e-mono: var(--hm-mono, ui-monospace, Menlo, Consolas, monospace);
  --e-house: var(--hm-display, "Optima", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif);
  --e-text: Georgia, "Times New Roman", serif;
  color: var(--e-body);
}

.ed *, .ed *::before, .ed *::after { box-sizing: border-box; }
.ed.is-ready .ed-src { display: none; }
.edx { overflow-x: clip; background: var(--e-bg); }
.edx-screen[hidden] { display: none; }
/* Every screen is at least a screen tall, so the reader can always be scrolled to keep the bar at
 * the top of the window: changing screen never brings the site's own header back into view. */
.edx-screen { min-height: calc(100svh - 56px); }
.hm-edition-page { padding: 0; }
.hm-edition-page .wp-block-post-content > * { margin-block: 0; }

/* ---------------------------------------------------------------------------
 * Shared bits
 * ------------------------------------------------------------------------ */
.ed-kicker {
  margin: 0 0 14px;
  font: 500 11px/1.3 var(--e-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ed-accent, var(--e-cerise));
}

.edx-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  border: 1px solid var(--e-cerise);
  background: var(--e-cerise);
  color: #fff;
  font: 600 11px/1 var(--e-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.edx-btn:hover { filter: brightness(1.1); }
.edx-btn:focus-visible, .edx-shelf__item:focus-visible { outline: 2px solid var(--e-cerise); outline-offset: 3px; }
.edx-btn--ghost { background: transparent; color: var(--e-ink); border-color: var(--e-line); }
.edx-btn--ghost:hover { background: var(--e-surface); filter: none; }
.edx-btn--icon { padding: 7px 12px; background: transparent; color: var(--e-ink); border-color: var(--e-line); font: 400 22px/1 var(--e-text); letter-spacing: 0; }
.edx-btn--icon:hover { background: var(--e-surface); filter: none; }
.edx-btn:disabled { opacity: .35; cursor: default; }
.edx-fs svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; }
.edx-all svg { width: 12px; height: 12px; fill: currentColor; }
/* where you are: All editions, Cover or Contents turns black (Exit full screen when reading) */
.edx-btn--ghost.is-active, .edx-btn--ghost.is-active:hover { background: var(--e-ink); color: #fff; border-color: var(--e-ink); }
.edx-fs { justify-content: center; min-width: 172px; }
.edx-pageno { display: inline-flex; align-items: center; justify-content: center; gap: 4px; align-self: stretch; min-width: 84px; padding: 0 8px; border: 1px solid transparent; font: 500 12px/1 var(--e-mono); letter-spacing: .04em; color: var(--e-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.edx-pageno b { font-weight: 600; }
.edx-pageno i { font-style: normal; color: var(--e-mut); }
/* while turning pages the counter reads as the active tab */
.edx-pageno.is-active { background: var(--e-ink); border-color: var(--e-ink); color: #fff; }
.edx-pageno.is-active i { color: rgba(255, 255, 255, .62); }
.edx-fs .edx-fs__out, .edx-fs.is-out .edx-fs__in { display: none; }
.edx-fs.is-out .edx-fs__out { display: block; }
.edx-fs.is-out { background: var(--e-ink); color: #fff; border-color: var(--e-ink); }
.edx-fs.is-out:hover { background: var(--e-ink); filter: brightness(1.25); }
.edx-btn:disabled:hover { background: transparent; }
.edx-link { padding: 0; border: 0; background: none; color: var(--e-cerise); font: inherit; letter-spacing: inherit; text-transform: inherit; text-decoration: underline; cursor: pointer; }

/* ---------------------------------------------------------------------------
 * Edition bar (contents + articles)
 * ------------------------------------------------------------------------ */
.edx-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 54px;
  padding: 6px clamp(12px, 3vw, 28px);
  background: rgba(251, 250, 248, .94);
  border-bottom: 1px solid var(--e-line);
  backdrop-filter: blur(10px);
}
.edx-bar[hidden] { display: none; }
.edx-bar__brand { display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; cursor: pointer; white-space: nowrap; }
/* masthead, date and article title share one centre line: each box is trimmed to its capitals */
.edx-bar__brand b, .edx-bar__brand span, .edx-bar__title { line-height: 1; text-box: trim-both cap alphabetic; }
.edx-bar__title { padding-block: .32em; }   /* room for descenders inside its overflow clip, equal so it stays centred */
.edx-bar__brand b { font: 800 19px/1 var(--e-house); color: var(--e-ink); letter-spacing: -.01em; }
.edx-bar__brand span { font: 500 10px/1 var(--e-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--e-mut); }
.edx-bar__title { flex: 1 1 auto; min-width: 0; overflow: hidden; font: 700 14px/1.2 var(--e-house); color: var(--e-body); white-space: nowrap; text-overflow: ellipsis; }
.edx-bar__nav { display: flex; flex: none; gap: 6px; margin-left: auto; }
/* the buttons never wrap: as the window narrows, the article title goes first, then the labels */
@media (max-width: 1240px) { .edx-bar__title { display: none; } }
@media (max-width: 960px) { .edx-fs__label, .edx-all__label { display: none; } .edx-fs { min-width: 0; } }
.edx-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.edx-progress i { display: block; width: 0; height: 100%; background: var(--e-cerise); transition: width .15s linear; }
@media (max-width: 640px) {
  .edx-bar { gap: 8px; }
  .edx-bar__title, .edx-bar__brand span { display: none; }
  .edx-bar__nav { gap: 4px; }
  .edx-bar__nav .edx-btn--ghost { padding: 11px 9px; letter-spacing: .06em; }
  .edx-fs__label, .edx-all__label { display: none; }
  .edx-fs { min-width: 0; }
  .edx-pageno { min-width: 36px; padding: 0 6px; }
  .edx-pageno i { display: none; }
  .edx-fs svg { width: 14px; height: 14px; }
  .edx-bar__nav .edx-btn--icon { padding: 6px 8px; }
  .edx-bar__nav .edx-btn--ghost { padding-inline: 7px; }
  .edx-fsx { margin-left: 2px; }
}
@media (max-width: 480px) { .edx-bar__brand { display: none; } }

/* ---------------------------------------------------------------------------
 * Black bar (tried and kept 2026-10-23): a black strip with white type, easy to find on a white
 * page. It spans the content block (the site's 1300px column) edge to edge, like the book's
 * surface, the shelf, advert pages and full-bleed openings below it (2026-10-29: it had sat on the
 * narrower text measure and looked short over full-bleed openings). Active = white.
 * ------------------------------------------------------------------------ */
.edx-bar {
  --bar-ink: #fff;
  --bar-mut: rgba(255, 255, 255, .62);
  --bar-line: rgba(255, 255, 255, .24);
  --bar-hover: rgba(255, 255, 255, .1);
  width: 100%;
  background: var(--e-ink);
  border-bottom: 0;
  backdrop-filter: none;
}
.edx-bar .edx-bar__brand b { color: var(--bar-ink); }
.edx-bar .edx-bar__brand span { color: var(--bar-mut); }
.edx-bar .edx-bar__title { color: rgba(255, 255, 255, .85); }
.edx-bar .edx-btn--ghost, .edx-bar .edx-btn--icon { background: transparent; color: var(--bar-ink); border-color: var(--bar-line); }
.edx-bar .edx-btn--ghost:hover, .edx-bar .edx-btn--icon:hover { background: var(--bar-hover); }
.edx-bar .edx-btn:disabled:hover { background: transparent; }
.edx-bar .edx-btn--ghost.is-active, .edx-bar .edx-btn--ghost.is-active:hover,
.edx-bar .edx-fs.is-out, .edx-bar .edx-fs.is-out:hover { background: #fff; color: var(--e-ink); border-color: #fff; filter: none; }
.edx-bar .edx-pageno { color: var(--bar-ink); }
.edx-bar .edx-pageno i { color: var(--bar-mut); }
.edx-bar .edx-pageno.is-active { background: #fff; border-color: #fff; color: var(--e-ink); }
.edx-bar .edx-pageno.is-active i { color: var(--e-mut); }
.edx-bar .edx-btn:focus-visible, .edx-bar .edx-bar__brand:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.edx-bar .edx-progress { bottom: 0; }
/* Full screen: an icon at the end of the bar; outlined in white while it is on */
.edx-fsx { margin-left: 6px; }
.edx-fsx svg { display: block; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; }
.edx-fsx .edx-fsx__out, .edx-fsx.is-on .edx-fsx__in { display: none; }
.edx-fsx.is-on .edx-fsx__out { display: block; }
.edx-bar .edx-fsx.is-on { border-color: #fff; }

/* Full screen (and its fallback where the browser will not allow it): only the reader shows */
html.edx-immersive, html.edx-immersive body { background: var(--hm-bg, #fbfaf8); }
html.edx-immersive .wp-site-blocks > header,
html.edx-immersive .wp-site-blocks > footer,
html.edx-immersive body > .floating-search,
html.edx-immersive body > .hm-footer-links,
html.edx-immersive #wpadminbar { display: none !important; }
html.edx-immersive body:not(.edx-framed) .wp-site-blocks { max-width: none; }

/* Framed (tried and kept 2026-10-29, part of the design): on a page showing an edition, the page
 * around the site's content block takes the bar's charcoal, so the reader sits in one solid frame
 * from "Browse the editions" until the reader leaves the page, full screen included. The /magazine/
 * landing stays on paper: the dark frame marks the step into the reader. body.edx-framed is set by
 * hm-edition.php (edition.js adds it where it is missing, e.g. the local preview). */
body.edx-framed, html.edx-immersive body.edx-framed, html.edx-immersive:has(> body.edx-framed) { background: var(--hm-ink, #14181a); }
body.edx-framed .wp-site-blocks::after { border-color: transparent; }   /* the frame replaces the hairlines */
body.edx-framed > .floating-search, body.edx-framed > .hm-footer-links { color: rgba(255, 255, 255, .6); }
body.edx-framed > .hm-footer-links a { color: inherit; }

/* On desktop the surfaces (book, shelf, advert pages) span the content block like the bar; text
 * keeps its own measure inside them. Phones keep a small gutter. */
@media (min-width: 761px) {
  .edx .edx-contents, .edx .edx-editions { max-width: none; padding-inline: 0; }
  .edx-book-stage, .edx-shelf { border-radius: 0; }
}

/* ---------------------------------------------------------------------------
 * All editions: every issue's cover on the same surface as the book
 * ------------------------------------------------------------------------ */
.edx-editions { max-width: 1240px; margin: 0 auto; padding: clamp(18px, 3vw, 36px) clamp(12px, 3vw, 40px) clamp(40px, 6vw, 80px); }
.edx-shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 38vw), 240px));
  justify-content: center;
  gap: clamp(22px, 3vw, 40px) clamp(16px, 2.4vw, 32px);
  margin: 0;
  padding: clamp(26px, 4vw, 48px) clamp(16px, 3vw, 40px);
  list-style: none;
  background: radial-gradient(64% 58% at 50% 46%, #f8f6f1 0, #ece8e0 58%, #e2ddd2 100%);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 0 0 1px rgba(20, 24, 26, .05);
}
.edx-shelf__item { display: flex; flex-direction: column; gap: 6px; color: var(--e-ink); text-decoration: none; }
.edx-shelf__cover { display: block; aspect-ratio: 1 / 1.414; margin-bottom: 8px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(20, 24, 26, .14), 0 18px 34px -16px rgba(20, 24, 26, .5); transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease; }
.edx-shelf__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.edx-shelf__item:hover .edx-shelf__cover { transform: translateY(-5px); box-shadow: 0 1px 2px rgba(20, 24, 26, .14), 0 26px 40px -16px rgba(20, 24, 26, .55); }
.edx-shelf__item b { font: 800 17px/1.2 var(--e-house); letter-spacing: -.01em; }
.edx-shelf__item > span:last-child { font: 600 11px/1.3 var(--e-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--e-cerise); }
.edx-shelf__item.is-current .edx-shelf__cover { outline: 3px solid var(--e-ink); outline-offset: 4px; }
.edx-shelf__item.is-current > span:last-child { color: var(--e-mut); }
@media (max-width: 640px) { .edx-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); } .edx-shelf__item b { font-size: 15px; } }

/* ---------------------------------------------------------------------------
 * Landing page (/magazine/, [hm_editions_landing]): the preamble, then one way in
 * ------------------------------------------------------------------------ */
.edl { max-width: 1240px; margin: 0 auto; padding: clamp(24px, 4vw, 48px) clamp(12px, 3vw, 40px) clamp(48px, 7vw, 96px); }
.edl__in {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  padding: clamp(32px, 5vw, 72px) clamp(20px, 5vw, 72px);
  background: radial-gradient(64% 58% at 50% 46%, #f8f6f1 0, #ece8e0 58%, #e2ddd2 100%);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 0 0 1px rgba(20, 24, 26, .05);
}
.edl__title { margin: 0 0 16px; font: 800 clamp(40px, 5.6vw, 72px)/1 var(--e-house); letter-spacing: -.025em; color: var(--e-ink); text-wrap: balance; }
.edl__deck { max-width: 44ch; margin: 0 0 28px; font: italic 400 clamp(18px, 1.9vw, 22px)/1.5 var(--e-text); color: var(--e-body); }
.edl__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin: 0; }
.edl__cta span { font: 500 11px/1.4 var(--e-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--e-mut); }
.edl__stack { position: relative; display: block; width: min(100%, 420px); aspect-ratio: 1.15 / 1; justify-self: center; }
.edl__stack img { position: absolute; top: 4%; width: 58%; aspect-ratio: 1 / 1.414; object-fit: cover; background: #fff; box-shadow: 0 1px 2px rgba(20, 24, 26, .14), 0 22px 40px -18px rgba(20, 24, 26, .55); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.edl__stack img:nth-child(1) { z-index: 3; left: 21%; transform: rotate(-1deg); }
.edl__stack img:nth-child(2) { z-index: 2; left: 40%; transform: rotate(6deg) translateY(3%); }
.edl__stack img:nth-child(3) { z-index: 1; left: 2%; transform: rotate(-7deg) translateY(4%); }
.edl__stack:hover img:nth-child(1) { transform: rotate(-1deg) translateY(-3%); }
/* every issue as a link, by magazine (2026-11-09) */
.edl__mag { margin-top: clamp(36px, 5vw, 64px); padding-top: clamp(22px, 3vw, 32px); border-top: 1px solid var(--e-line); }
.edl__h { margin: 0 0 6px; font: 800 clamp(24px, 2.6vw, 32px)/1.1 var(--e-house); letter-spacing: -.02em; color: var(--e-ink); }
.edl__h a { color: inherit; text-decoration: none; }
.edl__h a:hover { color: var(--e-cerise); }
.edl__magdeck { max-width: 60ch; margin: 0 0 22px; font: italic 400 17px/1.5 var(--e-text); color: var(--e-mut); }
.edl__mag .edl__grid { justify-content: start; margin-top: 18px; }
.edl__grid > li { position: relative; }
.edl__grid .edx-shelf__item > span:last-child { padding-right: 30px; font: 600 11px/1.3 var(--e-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--e-cerise); }
.edl__grid .edx-shelf__item b { font: 800 17px/1.2 var(--e-house); letter-spacing: -.01em; }
.edl .ed-kicker a { color: inherit; text-decoration: none; }
/* what WordPress prints for an issue (before the reader takes over, or without JavaScript) */
.ed-issue-head, .ed-issue-toc { max-width: 840px; margin: 0 auto; padding: 32px 20px 0; }
.ed-issue-head h1 { margin: 0 0 12px; font: 800 clamp(30px, 4vw, 48px)/1.05 var(--e-house); color: var(--e-ink); }
.ed-issue-toc h2 { font: 800 22px/1.2 var(--e-house); }
.ed-issue-toc li { margin: 0 0 10px; }
.ed-issue-toc li span { display: block; color: var(--e-mut); }
.edl__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 38vw), 240px)); justify-content: center; gap: 28px 24px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 760px) {
  .edl__in { grid-template-columns: 1fr; }
  .edl__stack { order: -1; width: min(100%, 320px); }
}
@media (prefers-reduced-motion: reduce) { .edl__stack img { transition: none; } }

/* ---------------------------------------------------------------------------
 * Contents
 * ------------------------------------------------------------------------ */
.edx-contents { max-width: 1240px; margin: 0 auto; padding: clamp(24px, 4vw, 48px) clamp(12px, 3vw, 40px) clamp(40px, 6vw, 80px); }
.edx-contents__head { margin-bottom: clamp(18px, 3vw, 30px); text-align: center; }
.edx-contents__head .ed-kicker { margin-bottom: 8px; }
.edx-contents__head .edx-contents__title { margin: 0 0 6px; font: 800 clamp(26px, 3.6vw, 44px)/1.02 var(--e-house); letter-spacing: -.02em; color: var(--e-ink); }
.edx-contents__head p:last-child { margin: 0; font: 500 11px/1.5 var(--e-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--e-mut); }
/* the issue's PDF (2026-11-09): the one link on the reading line */
.edx-contents__head .edx-dl, .edx-contents__head .edx-dl:visited { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 0 14px; padding: 8px 13px;
  background: var(--e-ink); color: #fff; font-weight: 600; text-decoration: none; white-space: nowrap; vertical-align: middle; transition: background-color .15s ease; }
.edx-contents__head .edx-dl:hover, .edx-contents__head .edx-dl:focus-visible { background: var(--e-cerise); color: #fff; }
.edx-contents__head .edx-dl:focus-visible { outline: 2px solid var(--e-cerise); outline-offset: 3px; }
.edx-dl__icon { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) { .edx-contents__head .edx-dl { margin: 10px 0 0; } }
/* the shelf: each issue's PDF as an icon on its card's label row, opposite "Read this edition" / "Reading now" */
.edx-shelf > li { position: relative; }
.edx-shelf__item > span:last-child { padding-right: 30px; }
.edx-shelf__dl { position: absolute; right: 0; bottom: -3px; display: grid; place-items: center; width: 26px; height: 26px; color: var(--e-mut); transition: color .15s ease, transform .15s ease; }
.edx-shelf__dl .edx-dl__icon { width: 17px; height: 17px; }
.edx-shelf__dl:hover, .edx-shelf__dl:focus-visible { color: var(--e-cerise); transform: translateY(1px); }
.edx-shelf__dl:focus-visible { outline: 2px solid var(--e-cerise); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
 * Contents book: a page-turning magazine (StPageFlip) of live HTML pages.
 * StPageFlip sizes .edx-book inline, so the wrap sets the width: a spread up to
 * ~980px, never taller than the screen allows.
 * ------------------------------------------------------------------------ */
.edx-book-stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(6px, 2vw, 22px);
  padding: clamp(22px, 3.4vw, 44px) clamp(8px, 2vw, 26px) clamp(26px, 3.8vw, 50px);
  /* the surface the magazine lies on: warm grey with a soft pool of light */
  background: radial-gradient(64% 58% at 50% 46%, #f8f6f1 0, #ece8e0 58%, #e2ddd2 100%);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 0 0 1px rgba(20, 24, 26, .05);
}
.edx-book-wrap {
  --plate-l: 50%;
  --plate-r: 0%;
  --stack-l: 0px;
  --stack-r: 8px;
  position: relative;
  width: 100%;
  max-width: min(980px, calc((100svh - 260px) / var(--e-aspect, 1.414) * 2));
  margin: 0 auto;
}
.edx-book { position: relative; z-index: 1; }
/* The closed pages under the open spread: page edges either side (the stacks grow as you read
 * on) and the shadow the magazine casts. Under the cover alone it sits under the right half. */
.edx-book-wrap::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 3px;
  bottom: -5px;
  left: calc(var(--plate-l) - var(--stack-l));
  right: calc(var(--plate-r) - var(--stack-r));
  border-radius: 2px 3px 3px 2px;
  background:
    repeating-linear-gradient(90deg, #fffdf9 0 1px, #d3ccbe 1px 2px) left top / var(--stack-l) 100% no-repeat,
    repeating-linear-gradient(90deg, #d3ccbe 0 1px, #fffdf9 1px 2px) right top / var(--stack-r) 100% no-repeat,
    #e6e0d4;
  box-shadow: 0 1px 2px rgba(20, 24, 26, .14), 0 10px 20px -10px rgba(20, 24, 26, .35), 0 30px 60px -22px rgba(20, 24, 26, .5);
  transition: left .45s cubic-bezier(.2, .8, .2, 1), right .45s cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
}
/* the centre seam: each page darkens towards the fold, with a faint highlight on the curve */
.edx-book .stf__wrapper .edx-page::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 6; pointer-events: none; }
.edx-book .stf__wrapper.--landscape .edx-page.--left::after {
  right: 0;
  width: 13%;
  background: linear-gradient(to left, rgba(20, 16, 10, .22), rgba(20, 16, 10, .09) 14%, rgba(255, 255, 255, .06) 40%, rgba(255, 255, 255, 0));
}
.edx-book .stf__wrapper.--landscape .edx-page.--right::after {
  left: 0;
  width: 13%;
  background: linear-gradient(to right, rgba(20, 16, 10, .26), rgba(20, 16, 10, .1) 12%, rgba(255, 255, 255, .07) 38%, rgba(255, 255, 255, 0));
}
.edx-book .stf__wrapper.--portrait .edx-page::after { left: 0; width: 6%; background: linear-gradient(to right, rgba(20, 16, 10, .16), rgba(20, 16, 10, 0)); }
.edx-book .stf__wrapper .edx-page--cover::after { width: 4%; opacity: .8; }
.edx-book__nav { width: 46px; height: 46px; padding: 0; border: 1px solid rgba(20, 24, 26, .12); border-radius: 50%; background: #fff; color: var(--e-ink); font: 400 26px/1 var(--e-text); cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .1); }
.edx-book__nav:hover:not(:disabled) { background: var(--e-ink); color: #fff; border-color: var(--e-ink); }
.edx-book__nav:disabled { opacity: .3; cursor: default; }
@media (max-width: 760px) {
  /* phones: single pages; the arrows sit under the book (a swipe turns pages too) */
  .edx-book-stage { grid-template-columns: 1fr 1fr; row-gap: 18px; column-gap: 18px; padding: 22px 14px 20px; }
  .edx-book-wrap { grid-column: 1 / -1; grid-row: 1; max-width: min(430px, calc((100svh - 270px) / var(--e-aspect, 1.414))); }
  .edx-book__nav { grid-row: 2; width: 40px; height: 40px; font-size: 22px; }
  .edx-book__nav--prev { justify-self: end; }
  .edx-book__nav--next { justify-self: start; }
}

/* Pages: container units make every page a scaled-down magazine page at any size. */
.edx-page { overflow: hidden; background: #fff; container-type: size; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05); }
.edx-page img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.edx-page__in { position: relative; display: flex; flex-direction: column; height: 100%; }
.edx-page .ed-kicker { margin: 0 0 1cqw; font-size: max(7px, 2.6cqw); }
.edx-page__folio { position: absolute; left: 6cqw; right: 6cqw; bottom: 3.6cqw; font: 500 max(6px, 2.2cqw)/1 var(--e-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--e-mut); }
.edx-page--ad img { object-fit: contain; background: #fff; }
/* Cover lines that open their article (edition.json cover_links). On hover the line's lettering turns
 * the accent colour: build.py makes a mask of the cover's white type in each area, and the accent fills
 * only that shape. Without CSS masks, a thin outline shows the line is a link instead. */
.edx-cover__link { position: absolute; display: block; cursor: pointer; }
.edx-cover__link:hover, .edx-cover__link:focus-visible { outline: 1px solid rgba(255, 255, 255, .7); outline-offset: 3px; }
@supports (mask-image: url("")) or (-webkit-mask-image: url("")) {
  .edx-cover__link:hover { outline: 0; }
  .edx-cover__link::after {
    content: ""; position: absolute; inset: 0; background: var(--e-cerise); opacity: 0; transition: opacity .18s ease;
    -webkit-mask: var(--mask) center / 100% 100% no-repeat; mask: var(--mask) center / 100% 100% no-repeat;
  }
  .edx-cover__link:hover::after, .edx-cover__link:focus-visible::after { opacity: 1; }
}
.edx-page__adlabel { position: absolute; top: 2.5cqw; right: 3cqw; padding: .6cqw 1.4cqw; background: rgba(255, 255, 255, .85); font: 500 max(6px, 2cqw)/1 var(--e-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--e-mut); }

/* Contents pages, laid out like a printed magazine's contents (Dax, 2 Nov 2026, after an earlier SA Chefs
 * issue): a tall vertical CONTENTS down each left-hand page, two columns of entries (old-style page number
 * in claret, title in Playfair Display, one short line), a photo inset for a few cover stories. Pure
 * container units with no pixel floors, so a page holds the same at every size: build.py TOC_LAYOUT
 * plans the pages with these sizes and must change with them. */
.edx-page--toc { --toc-accent: #8e2f2c; cursor: default; }
.edx-page--toc .edx-page__in { flex-direction: row; gap: 3.4cqw; padding: 7.5cqw 5cqw 11cqw; }
.edx-toc__rail { flex: none; display: flex; flex-direction: column; align-items: center; width: 13cqw; min-height: 0; overflow: hidden; }
.edx-toc__word { margin: 0; writing-mode: vertical-rl; font-family: "Playfair Display", Didot, Georgia, serif; font-weight: 400; line-height: .8; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; color: var(--e-ink); }
.edx-toc__cols { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4.6cqw; }
.edx-toc__col { display: flex; flex-direction: column; gap: 3.6cqw; min-height: 0; overflow: hidden; }
.edx-toc__e { display: flex; gap: 1.8cqw; color: var(--e-ink); text-decoration: none; }
.edx-toc__n { flex: none; width: 7.6cqw; font: 400 7.4cqw/.82 "Playfair Display", Georgia, serif; font-variant-numeric: oldstyle-nums; color: var(--toc-accent); }
.edx-toc__t { display: flex; flex-direction: column; gap: .9cqw; min-width: 0; padding-top: .2cqw; }
.edx-toc__t b { font: 700 3.1cqw/1.14 "Playfair Display", Georgia, serif; color: var(--e-ink); }
.edx-toc__t span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font: 400 2.35cqw/1.36 var(--e-text); color: #4b5053; }   /* a deck standing in for a contents line stops at three lines, as planned */
.edx-toc__e:hover b, .edx-toc__e:focus-visible b { color: var(--toc-accent); }
.edx-toc__thumb { display: block; flex: none; overflow: hidden; background: var(--e-surface); }
.edx-toc__thumb img { transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.edx-toc__thumb:hover img { transform: scale(1.04); }
.edx-toc__thumb--col { aspect-ratio: 1 / .7; margin-bottom: .6cqw; }
/* under the vertical word, reaching into the first column, whose entries stop above it */
.edx-toc__thumb--foot { position: absolute; left: 5cqw; bottom: 11cqw; width: var(--foot-w); aspect-ratio: 4 / 3; }
.has-foot .edx-toc__rail, .has-foot .edx-toc__col:first-child { padding-bottom: var(--foot); }
.edx-toc__end { display: block; flex: none; width: 14cqw; height: .55cqw; margin-top: .4cqw; background: var(--toc-accent); }
/* the index pages' heading, and the plain contents list of bundles built before the magazine contents */
.edx-toc__h { margin: 0 0 3.4cqw; font: 800 8.4cqw/1 var(--e-house); letter-spacing: -.02em; color: var(--e-ink); }
.edx-toc--list .edx-page__in { flex-direction: column; gap: 0; padding: 7cqw 7cqw 10cqw; }
.edx-toc__list { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--e-ink); }
.edx-toc__list a { display: flex; gap: 3cqw; padding: 1.1cqw 0; border-bottom: 1px solid var(--e-line); color: var(--e-ink); text-decoration: none; }
.edx-toc__list a:hover b { color: var(--e-cerise); }
.edx-toc__list .edx-toc__n { flex: none; width: 6cqw; font: 600 max(7px, 2.6cqw)/1.5 var(--e-mono); color: var(--e-cerise); }
.edx-toc__list .edx-toc__t { display: block; padding: 0; }
.edx-toc__list .edx-toc__t b { display: -webkit-box; overflow: hidden; font: 800 max(8px, 3.4cqw)/1.15 var(--e-house); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.edx-toc__list .edx-toc__t i { display: table; margin-top: .4cqw; padding: .15cqw .9cqw .1cqw; background: #ebe8e1; font: normal 500 max(6px, 2cqw)/1.3 var(--e-mono); letter-spacing: .1em; text-transform: uppercase; color: #565b5e; }
@media (prefers-reduced-motion: reduce) { .edx-toc__thumb img { transition: none; } }

/* Draft editions: a piece still in production (or an advert without its artwork) holds its page */
.edx-page--planned { cursor: default; background: var(--e-surface); }
.edx-page--planned .edx-page__in { justify-content: center; gap: 2.4cqw; margin: 5cqw; padding: 8cqw 7cqw 12cqw; border: 1px dashed rgba(20, 24, 26, .28); }
.edx-page--planned .edx-page__title { font: 800 7cqw/1.05 var(--e-house); letter-spacing: -.02em; text-transform: none; text-wrap: balance; }
.edx-page--planned .edx-page__deck { -webkit-line-clamp: 4; font-size: max(6px, 3cqw); }
.edx-page__stamp { align-self: flex-start; margin-top: 2cqw; padding: 1.2cqw 2.2cqw; border: 1px solid var(--e-cerise); font: 600 max(6px, 2.3cqw)/1 var(--e-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--e-cerise); }
.edx-page--planned .edx-page__folio { left: 1cqw; right: 1cqw; bottom: -1cqw; }

/* Back of the book: the line-up (drafts) and the index of advertisers and names */
.edx-page--index { cursor: default; }
.edx-page--index .edx-page__in { padding: 7cqw 7cqw 10cqw; }
.edx-ix { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--e-ink); column-gap: 4cqw; column-fill: auto; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.edx-ix__legend { display: flex; align-items: center; gap: 1.4cqw; margin: -1.6cqw 0 1.8cqw; font: 500 max(5px, 1.9cqw)/1.2 var(--e-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--e-mut); }
.edx-ix__key { width: 3cqw; height: 1.6cqw; background: var(--e-surface); border: 1px dashed rgba(20, 24, 26, .35); }
.edx-ix__row.is-planned { padding-left: 1cqw; background: var(--e-surface); }
.edx-ix--lineup { columns: 2; }
.edx-ix--names { columns: 3; }
.edx-ix--names .edx-ix__row { padding: .45cqw 0; font-size: max(6px, 2.1cqw); line-height: 1.2; }
.edx-ix__head { break-after: avoid; padding: 2.2cqw 0 .8cqw; font: 600 max(6px, 2cqw)/1.2 var(--e-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--e-cerise); }
.edx-ix__row { display: flex; align-items: baseline; gap: 1.6cqw; padding: .55cqw 0; border-bottom: 1px solid var(--e-line); break-inside: avoid; font: 400 max(6px, 2.3cqw)/1.25 var(--e-text); color: var(--e-ink); }
.edx-ix--lineup .edx-ix__row { font: 700 max(6px, 2.45cqw)/1.2 var(--e-house); }
.edx-ix__row[data-open] { cursor: pointer; }
.edx-ix__row[data-open]:hover .edx-ix__t { color: var(--e-cerise); }
.edx-ix__row.is-planned { color: var(--e-mut); }
.edx-ix__t { flex: 1 1 auto; min-width: 0; }
.edx-ix__t i { font-weight: 400; color: var(--e-mut); }
.edx-ix__n { flex: none; font: 600 max(6px, 2.1cqw)/1.25 var(--e-mono); color: var(--e-cerise); font-variant-numeric: tabular-nums; }

/* the Draft mark beside the masthead (a draft edition shared for review) */
.edx-draft { padding: 4px 6px; background: var(--e-cerise); color: #fff; font: normal 600 9px/1 var(--e-mono); letter-spacing: .14em; text-transform: uppercase; }

/* Article opening pages: a mock-up of the article's desktop page in live text (photo, title in
 * the article's own face, byline, then its first paragraphs in columns with a drop cap and a
 * photo set into a column). Sizes are container units, so the page is the same at any scale. */
.edx-page--article .edx-page__in { padding-bottom: 8.6cqw; }
.edx-page--article .edx-page__img { display: block; flex: 0 0 34cqh; overflow: hidden; background: var(--e-surface); }
.edx-page__text { display: flex; flex-direction: column; gap: 1.1cqw; padding: 4.4cqw 6cqw 2.4cqw; }
.edx-page__title {
  font-family: var(--ed-display);
  font-weight: var(--ed-dw);
  font-style: var(--ed-ds);
  font-stretch: var(--ed-stretch);
  font-size: calc(var(--ed-pscale, 1) * 7.2cqw);
  line-height: var(--ed-lh);
  letter-spacing: var(--ed-track);
  text-transform: var(--ed-case);
  color: var(--e-ink);
  text-wrap: balance;
  transition: opacity .25s ease;
}
.edx-page__deck { display: -webkit-box; overflow: hidden; font: italic 400 max(6px, 2.7cqw)/1.35 var(--e-text); color: var(--e-mut); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.edx-page__by { display: flex; justify-content: space-between; gap: 2cqw; margin-top: .6cqw; padding-top: 1.3cqw; border-top: 1px solid var(--e-line); font: 500 max(5px, 1.65cqw)/1.3 var(--e-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--e-mut); }
.edx-page__by > span:first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.edx-page__go { flex: none; font-weight: 600; color: var(--ed-accent, var(--e-cerise)); }
.edx-page--article .ed-kicker { margin: 0; font-size: max(5px, 2cqw); color: var(--ed-accent, var(--e-cerise)); }
.edx-page.is-type-pending .edx-page__title, .edx-page.is-type-pending .edx-page__h { opacity: 0; }

.edx-page__cols {
  flex: 1 1 0;
  min-height: 0;
  margin: 0 6cqw;
  padding-top: .6cqw;
  overflow: hidden;
  columns: 2;
  column-gap: 3.4cqw;
  column-rule: 1px solid var(--e-line);
  column-fill: auto;
  font: 400 1.72cqw/1.46 var(--e-text);
  color: var(--e-body);
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.edx-page__cols p { margin: 0 0 .62em; }
.edx-page__cols > p:first-of-type::first-letter {
  float: left;
  padding: .05em .08em 0 0;
  font-family: var(--ed-display);
  font-weight: var(--ed-dw);
  font-size: 3.4em;
  line-height: .8;
  color: var(--ed-accent, var(--e-cerise));
}
.edx-page__h { display: block; margin: .5em 0 .3em; font-family: var(--ed-display); font-weight: var(--ed-dw); font-style: var(--ed-ds); font-size: 1.55em; line-height: 1.08; letter-spacing: var(--ed-track); text-transform: var(--ed-case); color: var(--e-ink); text-align: left; break-after: avoid; }
.edx-page__pull { display: block; margin: .5em 0 .8em; padding: .45em 0; border-top: 2px solid var(--ed-accent, var(--e-cerise)); border-bottom: 1px solid var(--e-line); font-family: var(--ed-display); font-weight: var(--ed-dw); font-style: var(--ed-ds); font-size: 1.6em; line-height: 1.14; text-align: left; color: var(--e-ink); break-inside: avoid; }
.edx-page__list { display: block; margin: 0 0 .7em; padding: .6em .8em; background: var(--e-surface); border-top: 2px solid var(--ed-accent, var(--e-cerise)); text-align: left; break-inside: avoid; }
.edx-page__inset, .edx-page__img--col { display: block; overflow: hidden; margin: .15em 0 .75em; background: var(--e-surface); break-inside: avoid; }
/* the inset photo runs across the columns: the text above it balances, so no column is left short */
.edx-page__inset { column-span: all; height: 23cqh; margin: .35em 0 .9em; }
.edx-page--article .edx-page__img--col { height: 40cqh; flex: none; }
.edx-page--article.t-profile .edx-page__img--col img { object-position: 50% 22%; }

/* briefs and type-only openings run three columns; type-only gets a bigger title and a rule */
.edx-page--article.t-briefs .edx-page__cols, .edx-page--article.hero-none .edx-page__cols { columns: 3; column-gap: 3cqw; }
.edx-page--article.t-briefs .edx-page__img { flex-basis: 27cqh; }
.edx-page--article.t-briefs .edx-page__h, .edx-page--article.hero-none .edx-page__h { font-size: 1.22em; overflow-wrap: anywhere; hyphens: auto; }
.edx-page--article.t-briefs .edx-page__text { border-top: 1.2cqw solid var(--e-ink); }
.edx-page--article.hero-none .edx-page__text { padding-top: 10cqw; }
.edx-page--article.hero-none .edx-page__text::before { content: ""; width: 14cqw; height: 1.2cqw; margin-bottom: 2.6cqw; background: var(--ed-accent, var(--e-cerise)); }
.edx-page--article.hero-none .edx-page__title { font-size: calc(var(--ed-pscale, 1) * 9.4cqw); }
/* recipe: the photo shorter, the ingredients panel first in the columns */
.edx-page--article.t-recipe .edx-page__img { flex-basis: 30cqh; }
/* feature: the title sits on a full-page photo */
.edx-page--article.t-feature .edx-page__img { position: absolute; inset: 0; }
.edx-page--article.t-feature .edx-page__text { position: absolute; left: 0; right: 0; bottom: 0; padding: 30cqw 6cqw 11cqw; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .8)); }
.edx-page--article.t-feature .edx-page__title { font-size: calc(var(--ed-pscale, 1) * 9cqw); }
.edx-page--article.t-feature .edx-page__title, .edx-page--article.t-feature .ed-kicker { color: #fff; }
.edx-page--article.t-feature .edx-page__deck { color: rgba(255, 255, 255, .85); -webkit-line-clamp: 3; }
.edx-page--article.t-feature .edx-page__by { color: rgba(255, 255, 255, .75); border-color: rgba(255, 255, 255, .3); }
.edx-page--article.t-feature .edx-page__go { color: #fff; }
.edx-page--article.t-feature .edx-page__folio { color: rgba(255, 255, 255, .7); }

/* ---------------------------------------------------------------------------
 * Article: display faces (titles, subheads, pull quotes, drop cap). Body text is constant.
 * ------------------------------------------------------------------------ */
.ed-article, .edx-page {
  --ed-display: var(--e-house);
  --ed-dw: 800;
  --ed-ds: normal;
  --ed-case: none;
  --ed-track: -.02em;
  --ed-stretch: 100%;
  --ed-tsize: clamp(36px, 6vw, 72px);
  --ed-lh: 1.02;
  color: var(--e-body);
}
.ed-article[data-type="playfair"], .edx-page[data-type="playfair"] { --ed-display: "Playfair Display", Georgia, serif; --ed-dw: 900; --ed-track: -.015em; }
.ed-article[data-type="fraunces"], .edx-page[data-type="fraunces"] { --ed-display: "Fraunces", Georgia, serif; --ed-dw: 800; --ed-track: -.025em; }
.ed-article[data-type="bodoni"], .edx-page[data-type="bodoni"] { --ed-display: "Bodoni Moda", Didot, Georgia, serif; --ed-dw: 700; --ed-track: -.01em; --ed-tsize: clamp(38px, 6.6vw, 82px); }
.ed-article[data-type="abril"], .edx-page[data-type="abril"] { --ed-display: "Abril Fatface", Georgia, serif; --ed-dw: 400; --ed-track: 0; --ed-tsize: clamp(36px, 6.2vw, 76px); }
.ed-article[data-type="anton"], .edx-page[data-type="anton"] { --ed-display: "Anton", Impact, "Arial Narrow", sans-serif; --ed-dw: 400; --ed-case: uppercase; --ed-track: .005em; --ed-tsize: clamp(46px, 8.4vw, 108px); --ed-lh: .94; --ed-pscale: 1.3; }
.ed-article[data-type="schibsted"], .edx-page[data-type="schibsted"] { --ed-display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif; --ed-dw: 900; --ed-track: -.03em; --ed-lh: .98; }
.ed-article[data-type="dmserif"], .edx-page[data-type="dmserif"] { --ed-display: "DM Serif Display", Georgia, serif; --ed-dw: 400; --ed-track: -.01em; --ed-tsize: clamp(38px, 6.6vw, 80px); }
.ed-article[data-type="archivo"], .edx-page[data-type="archivo"] { --ed-display: "Archivo", "Arial Narrow", sans-serif; --ed-dw: 900; --ed-case: uppercase; --ed-stretch: 72%; --ed-track: -.005em; --ed-tsize: clamp(46px, 8.6vw, 112px); --ed-lh: .9; --ed-pscale: 1.3; }
.ed-article[data-type="cormorant"], .edx-page[data-type="cormorant"] { --ed-display: "Cormorant Garamond", Garamond, Georgia, serif; --ed-dw: 600; --ed-ds: italic; --ed-track: -.01em; --ed-tsize: clamp(42px, 7vw, 88px); --ed-lh: .98; --ed-pscale: 1.12; }
/* An italic display face is never followed by an italic deck (two scripts in a row clash, Dax
 * 2026-10-29): under Cormorant the deck is set upright. */
.ed-article[data-type="cormorant"] .ed-deck, .edx-page[data-type="cormorant"] .edx-page__deck { font-style: normal; }
.ed-article[data-type="bricolage"], .edx-page[data-type="bricolage"] { --ed-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif; --ed-dw: 800; --ed-track: -.035em; }

/* Hold the display type back (up to 0.7s) while its face loads, instead of flashing a fallback. */
.ed-article .ed-title, .ed-article .ed-body h2, .ed-article .ed-pull { transition: opacity .25s ease; }
.ed-article.is-type-pending .ed-title, .ed-article.is-type-pending .ed-body h2, .ed-article.is-type-pending .ed-pull { opacity: 0; }

/* ---------------------------------------------------------------------------
 * Article: opening
 * ------------------------------------------------------------------------ */
.ed-head { position: relative; }
.ed-hero { margin: 0; }
.ed-hero img { display: block; width: 100%; height: auto; background: var(--e-surface); }
.ed-hero figcaption, .ed-fig figcaption, .ed-gallery figcaption {
  margin: 0;
  padding-top: 8px;
  font: 400 12px/1.5 var(--e-mono);
  letter-spacing: .02em;
  color: var(--e-mut);
}
.ed-hero figcaption::before, .ed-fig figcaption::before, .ed-gallery figcaption::before { content: "\25B8 "; color: var(--ed-accent, var(--e-cerise)); }
.ed-head-text { max-width: 840px; margin: 0 auto; padding: clamp(30px, 5vw, 60px) 20px clamp(16px, 3vw, 28px); }

.ed-title {
  margin: 0 0 18px;
  font-family: var(--ed-display);
  font-weight: var(--ed-dw);
  font-style: var(--ed-ds);
  font-stretch: var(--ed-stretch);
  font-size: var(--ed-tsize);
  line-height: var(--ed-lh);
  letter-spacing: var(--ed-track);
  text-transform: var(--ed-case);
  color: var(--e-ink);
  text-wrap: balance;
}
.ed-title em { font-style: normal; color: var(--ed-accent, var(--e-cerise)); }
.ed-deck { max-width: 46ch; margin: 0 0 20px; font: italic 400 clamp(18px, 2.1vw, 24px)/1.45 var(--e-text); color: var(--e-mut); text-wrap: pretty; }
.ed-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding-top: 14px; border-top: 1px solid var(--e-line); font: 400 12px/1.5 var(--e-mono); letter-spacing: .05em; color: var(--e-mut); }
.ed-meta b { font-weight: 600; color: var(--e-ink); }
.ed-meta a.ed-by { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }   /* the reporter's HM author page */
.ed-meta a.ed-by:hover { color: var(--ed-accent, var(--e-cerise)); }

/* wide: full-bleed photo, title beneath */
.ed-hero-wide .ed-hero img { height: clamp(300px, 62vw, 78svh); object-fit: cover; }
.ed-hero-wide .ed-hero figcaption { max-width: 840px; margin: 0 auto; padding-inline: 20px; }

/* feature + wide: the title sits on the photo */
.t-feature.ed-hero-wide .ed-hero img { height: clamp(460px, 80svh, 900px); }
.t-feature.ed-hero-wide .ed-head-text {
  position: absolute;
  inset: auto 0 0;
  max-width: none;
  padding: clamp(80px, 12vw, 160px) clamp(20px, 5vw, 72px) clamp(24px, 4vw, 56px);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .78));
}
.t-feature.ed-hero-wide .ed-title, .t-feature.ed-hero-wide .ed-meta b { color: #fff; }
.t-feature.ed-hero-wide .ed-deck, .t-feature.ed-hero-wide .ed-meta { color: rgba(255, 255, 255, .85); border-color: rgba(255, 255, 255, .3); }
.t-feature.ed-hero-wide .ed-kicker { color: #fff; }
.t-feature.ed-hero-wide .ed-hero figcaption { display: none; }

/* split: photo beside the headline (portrait or modest photos) */
.ed-hero-split .ed-head {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(24px, 4.4vw, 64px);
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 64px) clamp(16px, 3.4vw, 44px) clamp(8px, 2vw, 20px);
}
.ed-hero-split .ed-hero { order: 2; }
.ed-hero-split .ed-hero img { max-height: 76svh; object-fit: cover; box-shadow: 0 18px 44px rgba(20, 24, 26, .18); }
.ed-hero-split .ed-head-text { order: 1; max-width: none; margin: 0; padding: 0; }
.t-profile.ed-hero-split .ed-hero { order: 0; }
.t-profile.ed-hero-split .ed-hero img { aspect-ratio: 4 / 5; object-position: 50% 20%; }

/* hero_crop / hero_fit (build.py, 2026-11-09). crop: a landscape hero beside the headline shows only the band kept
 * (--hero-ar, positioned at --hero-x), a squarer and larger photo. fit: the full-width hero at its own proportions,
 * never cropped (people edge to edge, mastheads), at most 1.5x its own width; above: the title over the photo. */
.ed-article.ed-hero-crop .ed-hero img { aspect-ratio: var(--hero-ar); height: auto; object-fit: cover; object-position: var(--hero-x, 50%) 50%; }
.ed-article.ed-hero-fit .ed-hero img { width: auto; max-width: min(100%, var(--hero-maxw, 100%)); height: auto; max-height: none; margin-inline: auto; object-fit: contain; }
.ed-article.ed-hero-above .ed-head { display: flex; flex-direction: column; }
.ed-article.ed-hero-above .ed-hero { order: 2; }

/* none: type-only opening */
.ed-hero-none .ed-head-text { padding-top: clamp(48px, 8vw, 104px); }
.ed-hero-none .ed-head-text::before { content: ""; display: block; width: 72px; height: 6px; margin-bottom: 26px; background: var(--ed-accent, var(--e-cerise)); }

@media (max-width: 860px) {
  .ed-hero-split .ed-head { grid-template-columns: 1fr; padding: 0; gap: 0; }
  .ed-hero-split .ed-hero, .t-profile.ed-hero-split .ed-hero { order: 0; }
  .ed-hero-split .ed-hero img { max-height: 72svh; box-shadow: none; }
  .ed-hero-split .ed-hero figcaption { padding-inline: 20px; }
  .ed-hero-split .ed-head-text { padding: 28px 20px 12px; }
}

/* ---------------------------------------------------------------------------
 * Article: body (HM's article rules, with the article's display face)
 * ------------------------------------------------------------------------ */
.ed-body {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(18px, 3vw, 30px) 20px clamp(40px, 6vw, 72px);
  font: 400 clamp(18px, 1.1vw + 12px, 21px)/1.75 var(--e-text);
  color: var(--e-body);
}
.ed-body::after { content: ""; display: block; clear: both; }
.ed-body p { margin: 0 0 1.4em; }
.ed-body > p:first-child::first-letter, .ed-body > .ed-cols:first-child > p:first-child::first-letter {
  float: left;
  padding: .08em .12em 0 0;
  font-family: var(--ed-display);
  font-weight: var(--ed-dw);
  font-style: normal;
  font-size: 4.4em;
  line-height: .78;
  color: var(--ed-accent, var(--e-cerise));
}
.ed-body h2 {
  clear: both;
  margin: 2.1em 0 .6em;
  font-family: var(--ed-display);
  font-weight: var(--ed-dw);
  font-style: var(--ed-ds);
  font-stretch: var(--ed-stretch);
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.08;
  letter-spacing: var(--ed-track);
  text-transform: var(--ed-case);
  color: var(--e-ink);
  text-wrap: balance;
}
.ed-body strong { color: var(--e-ink); }
.ed-body a { color: var(--ed-accent, var(--e-cerise)); }
.ed-body ul, .ed-body ol { margin: 0 0 1.4em; padding-left: 1.25em; }
.ed-body li { margin-bottom: .45em; }
.ed-body ul li::marker { color: var(--ed-accent, var(--e-cerise)); }

.ed-pull { clear: both; margin: 1.9em 0; padding: .1em 0 .1em 1.1em; border-left: 4px solid var(--ed-accent, var(--e-cerise)); }
.ed-pull p {
  margin: 0;
  font-family: var(--ed-display);
  font-weight: var(--ed-dw);
  font-style: var(--ed-ds);
  font-stretch: var(--ed-stretch);
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.2;
  letter-spacing: var(--ed-track);
  text-transform: var(--ed-case);
  color: var(--e-ink);
}

.ed-fig, .ed-gallery { margin: 2em 0; }
.ed-fig img, .ed-gallery img { display: block; width: 100%; height: auto; background: var(--e-surface); }
.ed-fig--tall { clear: both; width: min(100%, 460px); margin-inline: auto; }
.ed-fig--wide, .ed-gallery { clear: both; width: min(1080px, 100vw); margin-left: 50%; transform: translateX(-50%); }
.ed-fig--wide figcaption, .ed-gallery > figure figcaption { padding-inline: 20px; }
.ed-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ed-gallery.n3 > figure:first-child { grid-column: 1 / -1; }
.ed-gallery figure { margin: 0; }
.ed-gallery img { aspect-ratio: 4 / 3; height: 100%; object-fit: cover; }
.ed-gallery.n3 > figure:first-child img { aspect-ratio: 16 / 9; }

.ed-caption { margin: -.6em 0 1.4em; font: 400 12px/1.5 var(--e-mono); color: var(--e-mut); }
.ed-box { clear: both; margin: 2em 0; padding: 1.3em 1.4em; background: var(--e-surface); border-top: 3px solid var(--ed-accent, var(--e-cerise)); font-size: .92em; }
.ed-box > :last-child { margin-bottom: 0; }

@media (min-width: 900px) {
  /* weave: portrait photos float beside the text, alternating sides, as on HM articles */
  .ed-fig--weave { width: 46%; margin-top: .3em; margin-bottom: 1.2em; }
  .ed-fig--weave.ed-fig--r { float: right; margin-left: 2em; margin-right: -6%; }
  .ed-fig--weave.ed-fig--l { float: left; margin-right: 2em; margin-left: -6%; }
}
@media (min-width: 1160px) {
  .ed-pull { margin-left: -110px; padding-left: 26px; }
}

/* ---------------------------------------------------------------------------
 * Desktop: print columns. build.py groups the body into short sections (.ed-cols, ~420 words,
 * a subhead may open one); each is set in balanced columns, so a reader never scrolls back up
 * to start the next column. Photos sit in a column as insets; galleries, every second wide
 * photo and pull quotes run across the full width between sections. Below 1100px the
 * sections dissolve (display: contents) and the article is the single column above.
 * ------------------------------------------------------------------------ */
.ed-cols { display: contents; }
@media (min-width: 1100px) {
  /* text measure on desktop: the article's opening text and columns sit on min(1240px, 100%) less the
   * side gutter, inside the content block that the bar, surfaces and full-bleed photos span */
  .ed-body { max-width: min(1240px, 100%); padding-inline: clamp(12px, 3vw, 40px); font-size: 19px; line-height: 1.66; }
  .ed-hero-wide .ed-head-text, .ed-hero-none .ed-head-text { max-width: min(1240px, 100%); padding-inline: clamp(12px, 3vw, 40px); }
  .ed-hero-split .ed-head { max-width: min(1240px, 100%); padding-inline: clamp(12px, 3vw, 40px); }
  .ed-hero-none .ed-title, .ed-hero-wide .ed-title { max-width: 18ch; }
  .ed-cols {
    display: block;
    margin: 0 0 1.5em;
    columns: 2;
    column-gap: 54px;
    column-rule: 1px solid var(--e-line);
    orphans: 3;
    widows: 3;
  }
  .ed-cols > p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; text-wrap: pretty; }
  .ed-cols > p.ed-minor { text-align: left; hyphens: manual; -webkit-hyphens: manual; text-wrap: balance; }   /* a bold minor subhead: never justified */
  .ed-cols > :first-child { margin-top: 0; }
  .ed-cols > h2 { margin: 1.2em 0 .5em; font-size: clamp(26px, 2.2vw, 34px); break-after: avoid; break-inside: avoid; }
  .ed-cols > h2:first-child { margin-top: 0; }
  .ed-body > .ed-cols + .ed-cols:has(> h2:first-child) { margin-top: 2.2em; }
  .ed-cols figure, .ed-cols .ed-box, .ed-cols .ed-caption { break-inside: avoid; }
  /* A list runs on into the next column between its items; each item stays whole (2026-11-09). An unbreakable long
   * list after a subhead jumped to column 2, and Chrome split the subhead to keep it with the list, leaving column 1
   * empty under half a heading (April: The No-Show Tax, Ice Plant Precision, The Art of the Sour Fig, The Neuro-Plate;
   * December: The Culinary Statesman). Recipe ingredient panels stay whole. */
  .ed-cols ul > li { break-inside: avoid; }
  .t-recipe .ed-cols ul { break-inside: avoid; }
  .ed-cols .ed-fig, .ed-cols .ed-fig--weave, .ed-cols .ed-fig--tall, .ed-cols .ed-fig--wide {
    float: none;
    width: 100%;
    margin: .3em 0 1.3em;
    transform: none;
  }
  .ed-cols .ed-fig img { max-height: 62svh; object-fit: cover; }
  .ed-cols .ed-fig figcaption { padding-inline: 0; }
  /* across the columns, between sections */
  .ed-body > .ed-fig--wide, .ed-body > .ed-gallery { width: 100%; margin: .6em 0 2.2em; transform: none; }
  .ed-body > .ed-fig--wide figcaption, .ed-body > .ed-gallery > figure figcaption { padding-inline: 0; }
  .ed-body > .ed-pull {
    max-width: 900px;
    margin: .4em auto 2em;
    padding: .7em 0 .8em;
    border: 0;
    border-top: 3px solid var(--ed-accent, var(--e-cerise));
    border-bottom: 1px solid var(--e-line);
    text-align: center;
  }
  .ed-body > .ed-pull p { font-size: clamp(30px, 2.6vw, 42px); line-height: 1.16; text-wrap: balance; }
  .t-recipe .ed-cols ol li { break-inside: avoid; }
}
@media (min-width: 1480px) {
  .ed-body { font-size: 18px; }
  .ed-cols:not(.ed-cols--s) { columns: 3; column-gap: 44px; }
}

/* template: recipe (ingredient panels, big numbered method, labelled sections) */
.t-recipe .ed-body ul { padding: 1em 1.2em 1em 2.2em; background: var(--e-surface); font-size: .94em; }
.t-recipe .ed-body ol { padding: 0; list-style: none; counter-reset: step; }
.t-recipe .ed-body ol li { position: relative; padding-left: 2.6em; counter-increment: step; }
.t-recipe .ed-body ol li::before { content: counter(step); position: absolute; left: 0; top: -.12em; font: var(--ed-dw) 1.6em/1 var(--ed-display); color: var(--ed-accent, var(--e-cerise)); }
.t-recipe .ed-body p:has(> strong:only-child) { margin-bottom: .5em; font: 600 12px/1.3 var(--e-mono); letter-spacing: .14em; text-transform: uppercase; }
.t-recipe .ed-body p:has(> strong:only-child) strong { color: var(--ed-accent, var(--e-cerise)); }

/* template: briefs (short items, each under a ruled subhead) */
.t-briefs .ed-body h2 { padding-top: .7em; border-top: 2px solid var(--e-ink); font-size: clamp(22px, 2.6vw, 30px); }

/* an advert as a page of its own: as large as the screen allows, on the book's surface */
.edx-adview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin: 0 0 clamp(40px, 6vw, 80px);
  padding: clamp(18px, 3vw, 36px) clamp(12px, 3vw, 40px);
  background: radial-gradient(64% 58% at 50% 46%, #f8f6f1 0, #ece8e0 58%, #e2ddd2 100%);
}
.edx-adview .ed-kicker { margin: 0; color: var(--e-mut); }
.edx-adview__page img { display: block; width: auto; max-width: 100%; height: auto; max-height: calc(100svh - 190px); background: #fff; box-shadow: 0 1px 2px rgba(20, 24, 26, .14), 0 26px 50px -20px rgba(20, 24, 26, .55); }
.edx-adview__cta { margin: 4px 0 0; }
@media (max-width: 760px) { .edx-adview__page img { max-height: none; } }

/* photos in an article open full screen */
.edx-read .ed-hero img, .edx-read .ed-body figure img { cursor: zoom-in; }
.edx-read a .ed-hero img, .edx-read a figure img, .edx-read .ed-hero a img, .edx-read figure a img { cursor: pointer; }   /* a supplied photo that links to the source's URL */

.edx-lb[hidden] { display: none; }
.edx-lb {
  position: fixed;
  inset: 0;
  z-index: 100050;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: max(16px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom));
  background: rgba(8, 9, 10, .97);
  animation: edx-fade .18s ease;
}
@keyframes edx-fade { from { opacity: 0; } to { opacity: 1; } }
.edx-lb__fig { grid-column: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; margin: 0; }
.edx-lb__fig img { display: block; width: min(100%, calc((100svh - 120px) * var(--ar, 1)), calc(var(--nw, 4000px) * 2)); height: auto; max-height: calc(100svh - 120px); object-fit: contain; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.edx-lb__fig figcaption { max-width: 70ch; margin-top: 12px; text-align: center; font: 400 12px/1.5 var(--e-mono); color: rgba(255, 255, 255, .78); }
.edx-lb__fig figcaption:empty { display: none; }
.edx-lb__close { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 14px; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; background: rgba(0, 0, 0, .4); color: #fff; font: 400 28px/1 var(--e-text); cursor: pointer; }
.edx-lb__step { width: 46px; height: 46px; padding: 0; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; background: rgba(0, 0, 0, .4); color: #fff; font: 400 28px/1 var(--e-text); cursor: pointer; }
.edx-lb__step[hidden] { display: block; visibility: hidden; }
.edx-lb__step--prev { grid-column: 1; grid-row: 1; }
.edx-lb__step--next { grid-column: 3; grid-row: 1; }
.edx-lb__fig { grid-row: 1; }
.edx-lb__count { position: absolute; left: 0; right: 0; bottom: max(10px, env(safe-area-inset-bottom)); margin: 0; text-align: center; font: 500 11px/1 var(--e-mono); letter-spacing: .14em; color: rgba(255, 255, 255, .6); }
html.edx-lb-open, html.edx-lb-open body { overflow: hidden; }
@media (max-width: 640px) { .edx-lb { grid-template-columns: 0 minmax(0, 1fr) 0; gap: 0; } .edx-lb__step { display: none; } .edx-lb__step[hidden] { display: none; } }

/* ---------------------------------------------------------------------------
 * After the article: advert(s) from print, then the next article
 * ------------------------------------------------------------------------ */
.edx-after { max-width: 980px; margin: 0 auto; padding: 0 20px clamp(48px, 7vw, 96px); }
/* The article number stays centred on the card below, with a black arrow button either side of it; the
 * two quiet actions (Contents, Page flipper) sit at the far ends, in line with the card's edges. */
.edx-after__nav { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px 26px; margin: 0 0 34px; padding-top: 22px; border-top: 1px solid var(--e-line); font: 500 11px/1.4 var(--e-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--e-mut); }
.edx-after__side { display: flex; align-items: center; gap: 16px; white-space: nowrap; }
@media (min-width: 761px) {
  .edx-after__side > :last-child:not(:first-child), .edx-after__side > .edx-after__flip { margin-left: auto; }   /* Page flipper alone too: the last article has no Next */
}
.edx-after__pos { margin: 0; text-align: center; white-space: nowrap; }
.edx-after__step, .edx-after__step:visited { display: inline-flex; align-items: center; gap: 8px; padding: 11px 14px; background: var(--e-ink); color: #fff; font-weight: 600; text-decoration: none; transition: background-color .15s ease; }
.edx-after__step i { font-style: normal; font-size: 14px; line-height: 1; transition: transform .15s ease; }
.edx-after__step:hover, .edx-after__step:focus-visible { background: var(--e-cerise); color: #fff; }
.edx-after__step--prev:hover i { transform: translateX(-3px); }
.edx-after__step--next:hover i { transform: translateX(3px); }
.edx-after__step:focus-visible, .edx-after__nav .edx-link:focus-visible { outline: 2px solid var(--e-cerise); outline-offset: 3px; }
@media (max-width: 760px) {
  /* phones: the number on top, then the arrows, then the two quiet actions, each pair at the edges */
  .edx-after__nav { grid-template-columns: auto auto; justify-content: space-between; gap: 6px 12px; }
  .edx-after__side { display: contents; }
  .edx-after__pos { grid-column: 1 / -1; grid-row: 1; }
  .edx-after__step, .edx-after__step:visited { padding: 13px 12px; }
  .edx-after__step--prev { grid-column: 1; grid-row: 2; justify-self: start; }
  .edx-after__step--next { grid-column: 2; grid-row: 2; justify-self: end; }
  .edx-after__nav .edx-link { padding-block: 10px; }
  .edx-after__contents { grid-column: 1; grid-row: 3; justify-self: start; }
  .edx-after__flip { grid-column: 2; grid-row: 3; justify-self: end; }
}
@media (max-width: 400px) {
  .edx-after__step, .edx-after__step:visited { gap: 6px; padding-inline: 9px; font-size: 10px; letter-spacing: .06em; }
}
@media (prefers-reduced-motion: reduce) { .edx-after__step, .edx-after__step i { transition: none; } }
.edx-ad { max-width: 460px; margin: 0 auto 44px; }
.edx-ad .ed-kicker { color: var(--e-mut); text-align: center; }
.edx-ad img { display: block; width: 100%; height: auto; box-shadow: 0 10px 30px rgba(20, 24, 26, .18); }
.edx-next { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; background: var(--e-ink); color: #fff; text-decoration: none; }
.edx-next__img img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.edx-next:hover .edx-next__img img { transform: scale(1.03); }
.edx-next__body { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: clamp(22px, 3.4vw, 44px); }
.edx-next__body .ed-kicker { margin: 0; color: #ff86b0; }
.edx-next__body strong { font: 800 clamp(24px, 3vw, 36px)/1.08 var(--e-house); letter-spacing: -.01em; }
.edx-next__body span:last-child { font: italic 400 17px/1.45 var(--e-text); color: rgba(255, 255, 255, .8); }
.edx-end { text-align: center; padding: 20px 0; }
@media (max-width: 700px) { .edx-next { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
 * Transitions between screens (View Transitions API; instant where unsupported)
 * ------------------------------------------------------------------------ */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }
::view-transition-group(edx-hero) { animation-duration: .5s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }

@media (prefers-reduced-motion: reduce) {
  .edx-shelf__cover, .edx-next__img img { transition: none; }
}