/*
  Pasar Malam — static homepage (served at site root "/").

  Real HTML/CSS throughout, matched against the design SVG -- no flat mockup
  image. Every section (header, spotlight, about, footer) is real markup, so
  every button/link is genuinely interactive. Only the spotlight band's
  article content is dynamic (see landing.js): the eyebrow/title/edition and
  the 3 card slots start empty and get filled in once a real issue is
  spotlighted in the CMS.
*/
@font-face {
  font-family: 'Marta';
  src: url('/landing-fonts/marta-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Marta';
  src: url('/landing-fonts/marta-bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Marta';
  src: url('/landing-fonts/marta-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}

:root {
  --page-width: 1440px;
  /* Desktop-only "wide zone" (see the min-width:721px block near the end of
     this file) -- lets the header bar, awning banner and spotlight carousel
     break out of --page-width and use extra space on wide/ultrawide
     monitors, while --page-width itself keeps governing the reading-width
     content (hero title, about/footer copy) so that stays frozen. Never
     narrower than --page-width; grows with the viewport up to 2200px. */
  --wide-width: clamp(1440px, 92vw, 2200px);
  --edge-pad: clamp(1.5rem, 3vw, 4rem);
  --pm-cream: #fcf2e3;
  --pm-plum: #2f0928;
  --pm-maroon: #40080a;
  --pm-pink: #f44074;
  --pm-gold: #eda400;
  --pm-gold-hover: #f2b300;
  --pm-green: #cadcc1;
  --pm-green-hover: #c6d8bc;
  --pm-blue: #1b5299;
  --pm-soft-pink: #f88e8e;
  --pm-white: #ffffff;
  /* Headline + general copy use the brand serif; small UI metadata (card
     byline/summary) uses Inter -- matched against the design SVG, where
     those two roles render in visibly different typefaces. */
  --font-head: 'Marta', Georgia, serif;
  --font-body: 'Marta', Georgia, serif;
  --font-ui: 'Inter', system-ui, sans-serif;
  /* Single shared corner radius for every card/box/image on the site (see
     usages below) -- a fixed rem value so it's identical at every
     breakpoint, unlike the cqw values it replaces which shrank to almost
     nothing on mobile. Pills, circular buttons/avatars and the .btn family
     keep their own radius (50px/50%) since those are meant to stay fully
     round, not just "boxes with corners". */
  --box-radius: 1rem;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; width: 100%; min-height: 100%;
  background: var(--pm-cream);
  overflow-x: hidden;
}
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: var(--pm-plum); }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }

.page {
  width: 100%;
  max-width: var(--page-width);
  margin: 0 auto;
  background: var(--pm-cream);
  container-type: inline-size;
}

/* ── Buttons / links ───────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 1.15cqw;
  font-weight: 600;
  padding: 0.55cqw 1.9cqw;
  border-radius: 50px;
  border: 0.22cqw solid var(--pm-plum);
  background: transparent;
  color: var(--pm-plum);
  cursor: pointer;
  text-align: center;
  transition: background-color 0.2s ease;
}
.btn-marketplace:hover, .footer-link--marketplace:hover { background-color: var(--pm-gold-hover); }
.btn-about:hover, .footer-link--about:hover { background-color: var(--pm-green-hover); }
.footer-link--contact:hover { background-color: var(--pm-pink); }
.footer-link--team:hover { background-color: var(--pm-green-hover); }
.footer-link--marketplace:hover, .footer-link--about:hover,
.footer-link--contact:hover, .footer-link--team:hover { color: #000; }
.btn:focus-visible, .footer-link:focus-visible, .social-icon:focus-visible { outline: 2px solid var(--pm-blue); outline-offset: 2px; }

.btn-learn { font-size: 1.25cqw; padding: 0.65cqw 2.5cqw; margin-top: 0.4cqw; }
.btn-learn:hover { background-color: var(--pm-blue); color: var(--pm-cream); }

/* ── Header ────────────────────────────────────────────────────────────── */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5cqw 2.76cqw 1cqw;
}
.logo { display: flex; align-items: center; }
/* Background-image (not <img>) so the logo can't be dragged out or
   right-click "saved as" the way a real <img> element can. */
.logo-img {
  display: block;
  width: 13cqw;
  aspect-ratio: 1599 / 400;
  background-image: url('/landing-assets/logo-header.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  user-select: none;
  pointer-events: none;
}
.site-nav { display: flex; gap: 0.85cqw; }

/* Hamburger toggle -- hidden above the mobile breakpoint, where .site-nav
   (the full inline links) is shown instead. See the mobile media query. */
.menu-toggle {
  display: none;
  background: transparent;
  border: 0;
  color: var(--pm-plum);
  cursor: pointer;
  padding: 0;
  width: 1.9rem;
  height: 1.9rem;
}
.menu-toggle svg { width: 100%; height: 100%; display: block; }

.mobile-menu-backdrop[hidden] { display: none; }
.mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 20;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 75%;
  max-width: 320px;
  height: 100vh;
  background: var(--pm-plum);
  z-index: 21;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  padding: 5rem 1.5rem 2rem;
  overflow-y: auto;
}
.mobile-menu__link {
  color: var(--pm-cream);
  border-color: var(--pm-cream);
  text-align: center;
}
.mobile-menu__link:hover { background-color: rgba(252, 242, 227, 0.12); }
.mobile-menu__socials { margin-top: auto; }
.mobile-menu .social-icon { color: var(--pm-plum); }

/* ── Soft paywall ──────────────────────────────────────────────────────── */
/* Dismissible email-capture modal shown ~halfway through an article (see
   article.js). Blurs the page behind it; sized in rem/px (not cqw) because
   it's a viewport-fixed overlay, not part of the container flow. */
.paywall-backdrop[hidden], .paywall[hidden] { display: none; }
.paywall-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(47, 9, 40, 0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 30;
}
.paywall {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 2rem));
  box-sizing: border-box;
  background: var(--pm-green);
  border: 1.5px solid var(--pm-plum);
  border-radius: 22px;
  padding: 2rem 2.25rem 2.25rem;
  z-index: 31;
  color: var(--pm-plum);
}
.paywall__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--pm-plum);
  cursor: pointer;
}
.paywall__close svg { width: 100%; height: 100%; display: block; }
.paywall__close:hover { opacity: 0.7; }

.paywall__brand {
  display: flex;
  justify-content: center;
  margin-bottom: 1.35rem;
}
.paywall__logo {
  display: block;
  width: 190px;
  max-width: 60%;
  aspect-ratio: 1599 / 400;
  background-image: url('/landing-assets/logo-paywall.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  user-select: none;
  pointer-events: none;
}

.paywall__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1.15;
  margin: 0 0 0.85rem;
}
.paywall__text {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.5;
  margin: 0 0 1.5rem;
}

.paywall__form { display: flex; gap: 0.75rem; }
.paywall__input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.85rem 1.1rem;
  background: var(--pm-cream);
  border: 2px solid var(--pm-plum);
  border-radius: 12px;
  color: var(--pm-plum);
}
.paywall__input::placeholder { color: rgba(47, 9, 40, 0.55); }
.paywall__input:focus-visible { outline: 2px solid var(--pm-blue); outline-offset: 2px; }
.paywall__submit {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.85rem 1.6rem;
  background: var(--pm-gold);
  border: 2px solid var(--pm-plum);
  border-radius: 12px;
  color: var(--pm-plum);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.paywall__submit:hover { background: var(--pm-gold-hover); }
.paywall__submit:disabled { opacity: 0.6; cursor: default; }
.paywall__submit:focus-visible { outline: 2px solid var(--pm-blue); outline-offset: 2px; }

.paywall__msg {
  font-family: var(--font-body);
  font-size: 0.95rem;
  margin: 0.9rem 0 0;
}
.paywall__msg[hidden] { display: none; }
.paywall__msg--error { color: var(--pm-maroon); }

@media (max-width: 640px) {
  .paywall { padding: 1.75rem 1.4rem 1.9rem; border-radius: 18px; }
  .paywall__title { font-size: 1.6rem; }
  .paywall__text { font-size: 1rem; }
  .paywall__form { flex-direction: column; }
  .paywall__submit { padding: 0.85rem 1.1rem; }
}

/* ── Awning ────────────────────────────────────────────────────────────── */
/* Background-image (not <img>) so it can't be dragged out or right-click
   "saved as" the way a real <img> element can. */
.awning-wrap {
  width: 100%;
  aspect-ratio: 1440 / 103;
  background-image: url('/landing-assets/awning.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  user-select: none;
  pointer-events: none;
}

/* ── Spotlight ─────────────────────────────────────────────────────────── */
.spotlight {
  padding: 2.5cqw 2.76cqw 3.5cqw;
  text-align: center;
  color: var(--pm-plum);
  font-family: var(--font-head);
}

/* Eyebrow/title/edition and the nav arrows stay invisible until JS confirms
   there's a real spotlighted issue (.spotlight.is-active) -- otherwise this
   band is just a clean blank rather than showing an eyebrow/arrows over
   nothing. */
.sp-head, .arrow { visibility: hidden; }
.spotlight.is-active .sp-head, .spotlight.is-active .arrow { visibility: visible; }

.sp-head { text-align: center; }
/* font-style:italic requests the @font-face italic cut (marta-italic.woff2)
   and the browser does load it, but the file's glyphs render visually
   identical to the regular weight -- no actual slant, confirmed by direct
   pixel comparison. Skewing synthesizes the italic look CSS can't get from
   the font file itself. Text-align:center on the parent keeps the skew's
   default centre transform-origin lined up with the visible text. */
.eyebrow { margin: 0 0 0.5cqw; font-size: 0.92cqw; letter-spacing: 0.16em; text-transform: uppercase; font-style: normal; transform: skewX(-10deg); }
.issue-title { margin: 0 auto; font-weight: 700; font-size: 3.2cqw; line-height: 1.05; max-width: 46cqw; }
.edition { margin: 0.9cqw 0 0; font-weight: 700; font-size: 1.5cqw; }

.spotlight-row {
  align-items: center;
  display: flex;
  gap: 1.5cqw;
  justify-content: center;
  margin: 2.2cqw auto 0;
  max-width: 90cqw;
}

/* The card slots' own flex container, animated by animateSlide()
   (script.js) -- kept separate from .spotlight-row so the slide/scale
   transform never touches the arrows, which are the row's other children,
   outside the track. flex:1 takes exactly the space .spotlight-row leaves
   after its two auto-width arrow children, same as the slots got when they
   were direct children of the row; min-width:0 is needed for a flex item
   to shrink below its content's natural width at all. */
.spotlight-track {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  gap: 1.5cqw;
  justify-content: center;
  min-width: 0;
}

.arrow {
  background: transparent;
  border: 0;
  cursor: pointer;
  flex: 0 0 auto;
  padding: 0;
  width: 1.6cqw;
}
.arrow svg { width: 100%; height: 100%; display: block; }
.arrow:hover { opacity: 0.7; }

/* Card slots take an equal share of the row; the centre slot runs larger
   (and is untouched when the side cards are resized). */
.slot { flex: 0.9 1 0; min-width: 0; }
.slot--center { flex: 1.18 1 0; }
/* Desktop has no slide animation to reveal them for -- only shown within
   the mobile carousel (see @media max-width:720px below). */
.slot--far-left, .slot--far-right { display: none; }

/* ── Card ──────────────────────────────────────────────────────────────── */
/* Fixed aspect ratio (not a fixed height) -- never grows or shrinks with
   content, but does follow width, which now varies with viewport on the
   homepage carousel (see the min-width:721px breakout block below) since
   its row is no longer capped at --page-width. Ratio matches the original
   design's ~0.88:1 side-card proportions (351px:403px at the 1440px
   reference width) -- .card--center used to re-set a taller fixed height to
   hit the same ratio at its own larger width; now it's the same ratio
   inherited from here, so its extra flex-basis width (.slot--center) alone
   is enough to make it proportionally bigger, no override needed. Long
   summaries are clamped + ellipsised, not allowed to push the box around. */
.card {
  width: 100%; aspect-ratio: 0.88;
  background: var(--pm-cream);
  border: 0.22cqw solid var(--pm-plum);
  border-radius: var(--box-radius);
  padding: 4%;
  display: flex;
  flex-direction: column;
  text-align: left;
  overflow: hidden;
}

/* Spotlight cards keep a plain black border regardless of theme/accent --
   marketplace and article-page cards (outside #spotlight) still use
   var(--pm-plum) / the per-article accent hex above. */
#spotlight .card,
#spotlight .card__frame { border-color: #000; }

.card__frame {
  width: 100%;
  aspect-ratio: 2 / 1;
  flex: 0 0 auto;
  background: #cadcc1;
  border: 0.11cqw solid var(--pm-plum);
  border-radius: var(--box-radius);
  overflow: hidden;
  margin-bottom: 0.7cqw;
}
.card__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Title sizes to its own content (1-3 lines) instead of reserving fixed
   space for 3 -- the summary below it (flex: 1) grows or shrinks to fill
   whatever space the title doesn't use, so the card's overall height never
   changes. See fitCardSummaries() in script.js/marketplace.js/article.js,
   which measures that leftover space and sets the summary's line-clamp to
   the exact number of lines that fit, so long summaries ellipsis cleanly
   instead of overflowing or being cut off mid-line. */
.card__title {
  margin: 0 0 0.4cqw;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.35cqw;
  line-height: 1.12;
  flex: none;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
}
.card--center .card__title { font-size: 1.6cqw; }

.card__byline {
  margin: 0 0 0.5cqw;
  flex: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  column-gap: 0.5em;
  align-items: baseline;
  font-family: var(--font-ui);
  font-size: 0.74cqw; font-weight: 600; letter-spacing: 0.02em;
  opacity: 0.85;
  white-space: nowrap;
}
.card__byline-name { text-align: right; overflow: hidden; text-overflow: ellipsis; }
.card__byline-date { text-align: left; overflow: hidden; text-overflow: ellipsis; }

/* Spotlight-only, desktop-only: centre card's text sized 1.25x the rest of
   its own card (title/byline/summary), per feedback -- .card--center is only
   ever applied to the homepage spotlight's centre slot (see script.js), so
   this can't leak into the marketplace grid or article recommendation cards
   which share the same .card__* classes. Reverted back to the shared sizes
   inside the 720px mobile breakpoint below, where the centre card becomes a
   full-width carousel card instead. */
#spotlight .card--center .card__title { font-size: 2cqw; }
#spotlight .card--center .card__byline { font-size: 0.925cqw; }
#spotlight .card--center .card__summary { font-size: 1.275cqw; }

.card__summary {
  margin: 0;
  flex: 1;
  min-height: 0;
  font-family: var(--font-head);
  font-size: 1.02cqw; line-height: 1.4;
  /* Always left-aligned, on every breakpoint, regardless of anything the
     CMS might set on the article. */
  text-align: left !important;
  word-break: normal;
  overflow-wrap: normal;
  /* Generous fallback cap for the instant before JS runs / if it doesn't --
     fitCardSummaries() overwrites this with the exact line count that fits. */
  display: -webkit-box; -webkit-line-clamp: 10; line-clamp: 10;
  -webkit-box-orient: vertical; overflow: hidden;
}

/* ── Article landing page ──────────────────────────────────────────────── */
.article-page { color: var(--pm-plum); }

.article-issue-title {
  font-family: var(--font-head);
  font-size: 2.2cqw;
  font-style: italic;
  font-weight: 400;
  text-align: center;
  margin: 2cqw 0 1.2cqw;
  padding: 0 2.76cqw;
  opacity: 0.85;
}

.article-hero {
  width: 70cqw; /* 1.25x .article-body's 56cqw max-width, same 2:1 ratio */
  max-width: 100%;
  margin: 1.8cqw auto 0; /* matches .article-edition's top margin below, so the
                            gap above the image (from the awning) equals the
                            gap below it (to the edition line) */
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border: 0.11cqw solid #000;
  border-radius: var(--box-radius);
}
.article-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

.article-edition {
  font-family: var(--font-body);
  font-size: 1.5cqw;
  font-weight: 700;
  text-align: center;
  margin: 1.8cqw 0 0.8cqw;
}

.article-title {
  font-family: var(--font-head);
  font-size: 4cqw;
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
  margin: 0 auto 1cqw;
  max-width: 60cqw;
}

.article-byline {
  font-family: var(--font-body);
  font-size: 1.05cqw;
  font-weight: 700;
  text-align: center;
  margin: 0 0 3cqw;
}

.article-body {
  font-family: var(--font-body);
  font-size: 1.1cqw;
  line-height: 1.75;
  max-width: 56cqw;
  margin: 0 auto 3cqw;
}
/* Full-justified on desktop (left on mobile, see media query below) --
   forced on every descendant so per-paragraph alignment from the CMS's
   rich text editor can never override it. */
.article-body, .article-body * { text-align: justify !important; }
.article-body p { margin: 0 0 1em; }
/* line-height explicitly tightened, not inherited from .article-body's 1.75 --
   that ratio is sized for paragraph copy; on a bold heading wrapped to two
   lines it reads as a paragraph-sized gap between the two lines of one
   heading. h1 is included here too so an in-body H1 (CMS toolbar allows one)
   gets the same headline treatment as H2/H3 instead of falling back to
   .article-body's plain body font. */
.article-body h1, .article-body h2, .article-body h3 { font-family: var(--font-head); font-weight: 700; line-height: 1.15; margin: 1.5em 0 0.5em; }
.article-body img { display: block; max-width: 100%; height: auto; border-radius: var(--box-radius); margin: 1.5em 0; }
.article-body a { text-decoration: underline; }
.article-body ul, .article-body ol { padding-left: 1.5em; margin: 0 0 1em; }
.article-body blockquote { border-left: 0.3cqw solid var(--pm-plum); margin: 1em 0; padding-left: 1.2em; opacity: 0.8; }
/* font-style:italic requests @font-face's italic cut (marta-italic.woff2)
   but that file's glyphs render visually identical to the regular weight --
   no actual slant (see .eyebrow above). Skewing synthesizes the italic look
   CSS can't get from the font file itself. display:inline-block is required
   for the transform to take effect at all -- CSS ignores transform on plain
   inline boxes -- which makes a multi-word em/i run wrap as one unbreakable
   unit instead of breaking word-by-word like normal text. transform is
   paint-only -- it doesn't reflow or resize the inline-block's own layout
   box -- so the skewed glyphs can visually spill past that box's edges
   into whatever padding/border sits right next to it (e.g. a blockquote's
   padding-left). The overflow scales with the run's own line-box height
   (skew pivots around the box's centre by default, so a taller/multi-line
   run overflows more on both sides -- bottom-left leans further left, top-
   right leans further right) -- 0.3em covers a run of up to ~2 wrapped
   lines at this angle without leaving so much gap it looks like unrelated
   word-spacing around short single-word italics. */
.article-body em, .article-body i { font-style: normal; display: inline-block; margin: 0 0.3em; transform: skewX(-10deg); }

.article-about-writer {
  max-width: 56cqw;
  margin: 0 auto 4cqw;
  border: 0.11cqw solid var(--pm-plum);
  border-radius: var(--box-radius);
  padding: 1.6cqw 2cqw;
}
.article-about-writer__heading {
  font-family: var(--font-head);
  font-size: 1.4cqw;
  font-weight: 700;
  margin: 0 0 0.75cqw;
}
.article-about-writer__text {
  font-family: var(--font-body);
  font-size: 1cqw;
  line-height: 1.7;
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.article-recommendations {
  background: var(--pm-cream);
  padding: 3cqw 2.76cqw 4cqw;
  text-align: center;
}
.article-recommendations__heading {
  font-family: var(--font-head);
  font-size: 2.2cqw;
  font-weight: 700;
  margin: 0 0 0.75cqw;
}
.article-recommendations__blurb {
  font-family: var(--font-body);
  font-size: 0.95cqw;
  opacity: 0.75;
  max-width: 50cqw;
  margin: 0 auto 2cqw;
  line-height: 1.6;
}
.article-recommendations__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5cqw;
  max-width: 52cqw;
  margin: 0 auto;
}

/* ── Generic placeholder page (e.g. Marketplace) ──────────────────────────*/
.placeholder-page { padding: 6cqw 2.76cqw; text-align: center; }
.placeholder-page__title { font-family: var(--font-head); font-size: 2.9cqw; font-weight: 700; color: var(--pm-plum); margin: 0 0 1.2cqw; }
.placeholder-page__text { font-family: var(--font-body); font-size: 1.05cqw; color: var(--pm-plum); opacity: 0.8; }

/* ── Marketplace ────────────────────────────────────────────────────────── */
.marketplace { padding: 2.5cqw 2.76cqw 4cqw; }

.marketplace-title {
  font-family: var(--font-head);
  font-size: 3.2cqw;
  font-weight: 700;
  color: var(--pm-plum);
  text-align: center;
  margin: 0 0 2.5cqw;
}

.marketplace-edition { margin-bottom: 3.5cqw; }

.marketplace-edition-header {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1.2cqw;
  margin-bottom: 1.4cqw;
}
.marketplace-edition-number {
  font-family: var(--font-head);
  font-size: 1.5cqw;
  font-weight: 700;
  color: var(--pm-plum);
}
.marketplace-edition-sep {
  font-size: 1.5cqw;
  color: var(--pm-plum);
}
/* Black on both breakpoints (not just plum/faded) per feedback. */
.marketplace-edition-label {
  font-family: var(--font-body);
  font-size: 1.5cqw;
  font-weight: 600;
  color: var(--pm-plum);
}

.marketplace-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5cqw;
  max-width: 76cqw;
  margin: 0 auto;
}

.marketplace-note {
  font-family: var(--font-head);
  font-size: 1.5cqw;
  font-weight: 700;
  color: var(--pm-plum);
  text-align: center;
  padding: 2.5cqw 2.76cqw 1cqw;
  line-height: 1.5;
}

/* Small italic issue label shown above the article title inside a card */
.card__issue {
  font-family: var(--font-body);
  font-size: 0.7cqw;
  font-weight: 600;
  color: var(--pm-plum);
  opacity: 0.65;
  margin: 0 0 0.35cqw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── About ─────────────────────────────────────────────────────────────── */
.about {
  padding: 1.9cqw 2.76cqw 3.75cqw;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Background-image (not <img>) so the logo can't be dragged out or
   right-click "saved as" the way a real <img> element can. */
.about-logo {
  display: block;
  width: 37.4cqw;
  max-width: 100%;
  aspect-ratio: 1599 / 400;
  background-image: url('/landing-assets/logo-header.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin: 0 0 1.9cqw;
  user-select: none;
  pointer-events: none;
}
.about-text { font-family: var(--font-body); font-size: 1.24cqw; color: var(--pm-plum); line-height: 1.75; max-width: 76cqw; margin: 0 0 1.45cqw; }
.about-text--emphasis { font-weight: 600; margin-bottom: 1.65cqw; }
.about-welcome { margin: 0 0 1.9cqw; }
.about-welcome__highlight {
  font-family: var(--font-head); font-size: 1.45cqw; font-weight: 700; color: var(--pm-plum);
  background: var(--pm-green-hover); padding: 0.2cqw 0.85cqw; border-radius: 0.2cqw;
}

/* ── Footer ────────────────────────────────────────────────────────────── */
.site-footer { background: var(--pm-plum); color: var(--pm-cream); padding: 2.1cqw 2.76cqw 1.6cqw; text-align: center; }
.footer-logo { display: flex; justify-content: center; margin-bottom: 1.6cqw; }
/* Background-image (not <img>) so the logo can't be dragged out or
   right-click "saved as" the way a real <img> element can. */
.footer-logo-img {
  display: block;
  width: 11cqw;
  aspect-ratio: 1614 / 387;
  background-color: var(--pm-cream);
  -webkit-mask-image: url('/landing-assets/logo-footer.png');
  mask-image: url('/landing-assets/logo-footer.png');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  user-select: none;
  pointer-events: none;
}

.footer-nav { display: flex; justify-content: center; gap: 2.5cqw; margin-bottom: 1cqw; flex-wrap: wrap; }
.footer-link {
  font-family: var(--font-body); font-size: 0.95cqw; font-weight: 600; color: var(--pm-cream);
  padding: 0.3cqw 1.05cqw; border-radius: 50px; border: 0.1cqw solid transparent; transition: background-color 0.2s ease, color 0.2s ease;
}

.footer-cta { border: 0.1cqw solid var(--pm-cream); border-radius: var(--box-radius); padding: 1.6cqw 3.3cqw; max-width: 62.5cqw; margin: 0 auto 1.5cqw; }
.footer-cta__title { font-family: var(--font-head); font-size: 1.9cqw; font-weight: 700; color: var(--pm-cream); margin: 0 0 0.85cqw; line-height: 1.3; }
.footer-cta__text { font-family: var(--font-body); font-size: 0.85cqw; color: var(--pm-cream); line-height: 1.7; margin: 0 0 0.85cqw; opacity: 0.9; }
.footer-cta__email { font-family: var(--font-body); font-size: 0.95cqw; font-weight: 700; color: var(--pm-cream); }
.footer-cta__email a { color: var(--pm-cream); text-decoration: underline; }
.footer-cta__email a:hover { opacity: 0.8; }

.social-icons { display: flex; justify-content: center; gap: 1.05cqw; }
.social-icon {
  display: flex; align-items: center; justify-content: center;
  width: 2.5cqw; height: 2.5cqw; border-radius: 50%;
  background: var(--pm-cream); color: var(--pm-plum); transition: opacity 0.2s ease;
}
.social-icon svg { width: 1.25cqw; height: 1.25cqw; }
.social-icon:hover { opacity: 0.85; }

/* ── About Us page ─────────────────────────────────────────────────────── */
.about-hero {
  padding: 2.5cqw 2.76cqw 1cqw;
  text-align: center;
}
.about-hero__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 5.12cqw;
  line-height: 1.15;
  color: var(--pm-maroon);
  margin: 0 0 1.6cqw;
}
.about-hero__title--pink { color: var(--pm-pink); }
.about-hero__title--gold { color: var(--pm-gold); }
.about-hero__title--blue { color: var(--pm-blue); }

.about-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.85cqw;
  margin-bottom: 1.25cqw;
}

/* Solid-fill pill button -- shares the pill shape/font of the header's
   .btn-nav buttons (including their border thickness), but stays filled
   with its section colour at all times (rather than filling only on
   hover) per the design. The active tab (see about.js) goes transparent. */
.pill {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 1.15cqw;
  font-weight: 700;
  padding: 0.55cqw 1.9cqw;
  border-radius: 50px;
  border: 0.22cqw solid var(--pm-plum);
  color: var(--pm-maroon);
  cursor: pointer;
  transition: filter 0.2s ease;
}
.pill:hover { filter: brightness(0.94); }
.pill--green { background: var(--pm-green); }
.pill--pink { background: var(--pm-soft-pink); }
.pill--gold { background: var(--pm-gold); }
.pill--blue { background: var(--pm-blue); color: var(--pm-cream); }
.pill.is-active { background: transparent; }

/* Close button's fill is handed in per-click by about.js (matching the
   colour of whichever charter card is open) via --charter-close-bg. */
.charter-detail__close { background: var(--charter-close-bg, transparent); }
.charter-detail__close:hover { background: transparent; }
.founders-note__cta:hover { background: transparent; color: #000; filter: none; }

.about-section {
  max-width: 62cqw;
  margin: 0 auto;
  padding: 1cqw 2.76cqw 3.5cqw;
  text-align: center;
}
.about-section__heading {
  font-family: var(--font-head);
  font-size: 2cqw;
  font-weight: 700;
  color: var(--pm-maroon);
  margin: 0 0 1.2cqw;
}
.about-section__subtitle {
  font-family: var(--font-body);
  font-size: 1.05cqw;
  color: var(--pm-maroon);
  opacity: 0.8;
  margin: 0 0 2cqw;
}
.about-section__text {
  font-family: var(--font-body);
  font-size: 1.24cqw; /* matches the homepage's .about-text */
  line-height: 1.7;
  color: var(--pm-maroon);
  margin: 0 0 1.4cqw;
}
.about-section__text:last-child { margin-bottom: 0; }
/* About Us body copy reads better left-aligned; heading stays centred
   (inherits .about-section's text-align: center). */
#about-us .about-section__text { text-align: left; }

/* Founder's Note */
.founders-note__row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3cqw;
  margin-top: 1cqw;
  text-align: left;
}
.founders-note__text { flex: 1; min-width: 0; }
.founders-note__text p {
  font-family: var(--font-body);
  font-size: 1.24cqw; /* matches .about-section__text / homepage's .about-text */
  line-height: 1.7;
  color: var(--pm-maroon);
  margin: 0 0 1.2cqw;
}
.founders-note__name { font-weight: 700; text-align: center; }
.founders-note__cta {
  display: block;
  width: fit-content;
  margin: 1.5cqw auto 0;
  font-size: 1.25cqw;
  padding: 0.65cqw 2.5cqw;
}
.founders-note__photo {
  /* Photo comes after the text in the markup, but should appear above it,
     centred, on desktop -- matching the mobile layout instead of sitting
     beside the text. */
  order: -1;
  flex: 0 0 auto;
  width: 14.3cqw;
  height: 14.3cqw;
  border-radius: 50%;
  border: 0.11cqw solid #000;
  background: var(--pm-green);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: var(--font-head);
  font-size: 2.4cqw;
  font-weight: 700;
  color: var(--pm-maroon);
}
.founders-note__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Editorial Charter */
.charter-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2cqw;
  margin-top: 1cqw;
}
/* Mobile-only carousel (see the media query below); hidden on desktop where
   the grid + separate detail panel above are used instead. */
.charter-carousel { display: none; }
.charter-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Tightened from 11cqw -- just enough for the longest title (3 lines,
     "Middle Ground, Not Neutral Ground") to clear the number badge above it
     without the shorter cards carrying a lot of unused vertical space. */
  height: 10.1cqw;
  border: 0.22cqw solid var(--pm-plum);
  border-radius: var(--box-radius);
  padding: 1cqw 0.9cqw;
  font-family: inherit;
  text-align: center;
  color: var(--pm-maroon);
  cursor: pointer;
  transition: filter 0.2s ease, background-color 0.2s ease;
}
.charter-card:hover { background: transparent; }
/* Active (expanded) card loses its colour fill instead of showing an
   outline -- border thickness still matches the top nav's buttons. */
.charter-card.is-active { background: transparent; }
.charter-card--pink { background: var(--pm-pink); }
.charter-card--gold { background: var(--pm-gold); }
.charter-card--blue { background: var(--pm-green); } /* replaced blue with green per design update */
/* Pinned to the card's top-left corner, independent of the title's own
   centring, so 01/02/etc. line up the same way on every card. */
.charter-card__number {
  position: absolute;
  top: 0.8cqw;
  left: 0.9cqw;
  font-family: var(--font-body);
  font-size: 0.75cqw;
  font-weight: 700;
  opacity: 0.7;
}
.charter-card__title {
  font-family: var(--font-head);
  font-size: 1.55cqw;
  font-weight: 700;
  line-height: 1.25;
  /* Reserves a 2-line-tall box so every card looks the same height even
     when its title only wraps to 1 line. */
  min-height: calc(1.25em * 2);
  display: flex;
  align-items: center;
}

.charter-detail {
  margin-top: 1.5cqw;
  border: 0.11cqw solid var(--pm-maroon);
  border-radius: var(--box-radius);
  padding: 1.6cqw 2cqw;
  text-align: left;
}
.charter-detail__number {
  font-family: var(--font-body);
  font-size: 0.8cqw;
  font-weight: 700;
  color: var(--pm-maroon);
  opacity: 0.7;
  margin: 0 0 0.3cqw;
}
.charter-detail__title {
  font-family: var(--font-head);
  font-size: 1.4cqw;
  font-weight: 700;
  color: var(--pm-maroon);
  margin: 0 0 0.75cqw;
}
.charter-detail__text {
  font-family: var(--font-body);
  font-size: 1cqw;
  line-height: 1.7;
  color: var(--pm-maroon);
  margin: 0 0 1cqw;
}
.charter-detail__text p { margin: 0 0 1em; }
.charter-detail__text p:last-child { margin-bottom: 0; }

/* ── Contact Us page ───────────────────────────────────────────────────── */
.contact-page { padding: 2.5cqw 2.76cqw 4cqw; }
.contact-title {
  font-family: var(--font-head);
  font-size: 3.2cqw;
  font-weight: 700;
  color: var(--pm-maroon);
  text-align: center;
  margin: 0 0 2.2cqw;
}
.contact-body { max-width: 62cqw; margin: 0 auto; }
.contact-body p {
  font-family: var(--font-body);
  font-size: 1.2cqw;
  line-height: 1.7;
  color: var(--pm-maroon);
  text-align: justify;
  margin: 0 0 1.4cqw;
}
.contact-body a { text-decoration: underline; }
.contact-heading {
  font-family: var(--font-body);
  font-size: 1.2cqw;
  font-weight: 700;
  color: var(--pm-maroon);
  margin: 0 0 0.3cqw;
}

/* Editorial Standards -- appended below the main contact content, linked
   from the "here" text in the Pitches section above via #editorial-standards. */
.contact-editorial {
  max-width: 76cqw;
  margin: 3.5cqw auto 0;
  padding-top: 2.5cqw;
  border-top: 0.11cqw solid var(--pm-plum);
}
.contact-editorial__title {
  font-family: var(--font-head);
  font-size: 2cqw;
  font-weight: 700;
  color: var(--pm-maroon);
  text-align: center;
  margin: 0 0 1.6cqw;
}
.contact-editorial__block { margin-bottom: 1.6cqw; }
.contact-editorial__block:last-child { margin-bottom: 0; }
.contact-editorial__header {
  font-family: var(--font-body);
  font-size: 1.2cqw;
  font-weight: 700;
  color: var(--pm-maroon);
  margin: 0 0 0.5cqw;
}
.contact-editorial__block p {
  font-family: var(--font-body);
  font-size: 1.2cqw;
  line-height: 1.7;
  color: var(--pm-maroon);
  text-align: justify;
  margin: 0 0 1.4cqw;
}
.contact-editorial__block p:last-child { margin-bottom: 0; }

/* ── Our Team page ─────────────────────────────────────────────────────── */
.team-page { padding: 2.5cqw 2.76cqw 4cqw; }
.team-title {
  font-family: var(--font-head);
  font-size: 3.2cqw;
  font-weight: 700;
  color: var(--pm-maroon);
  text-align: center;
  margin: 0 0 2.5cqw;
}
.team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3cqw 1.5cqw;
  max-width: 76cqw;
  margin: 0 auto;
}
.team-member { width: 22cqw; text-align: center; }
/* Background-image (not <img>) so a team photo can't be dragged out or
   right-click "saved as" the way a real <img> element can -- same
   technique as .about-logo/.footer-logo-img above. */
.team-member__photo {
  width: 13cqw;
  height: 13cqw;
  margin: 0 auto 1cqw;
  border-radius: 50%;
  border: 0.11cqw solid #000;
  background: var(--pm-green) center / cover no-repeat;
  user-select: none;
  pointer-events: none;
}
.team-member__name {
  font-family: var(--font-head);
  font-size: 1.2cqw;
  font-weight: 700;
  color: var(--pm-maroon);
  margin: 0 0 0.3cqw;
}
.team-member__role {
  font-family: var(--font-body);
  font-size: 1cqw;
  color: var(--pm-maroon);
  margin: 0;
  line-height: 1.3;
}

/* ── Wide desktop: let the header bar, awning and carousel row break out of
   --page-width and use extra space on wide/ultrawide monitors, instead of
   sitting as a fixed-width column with dead margins on either side. Gated to
   min-width:721px so it can never touch the mobile layout above -- .page's
   own --page-width still governs the reading-width content (hero title,
   about/footer copy, every other page's body content), which stays exactly
   as it was. The three rules below share one shape: break out to 100vw via
   the standard negative-margin trick, then pad back in by whichever is
   bigger -- --edge-pad (a small minimum gutter) or half of whatever's left
   over between the viewport and --wide-width (which keeps the content
   itself capped and centered once the viewport passes --wide-width). */
@media (min-width: 721px) {
  .site-header {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: max(var(--edge-pad), calc((100vw - var(--wide-width)) / 2));
    padding-right: max(var(--edge-pad), calc((100vw - var(--wide-width)) / 2));
  }
  /* Pure background band -- goes fully edge-to-edge (no inner padding cap)
     since it's decorative, not interactive content. aspect-ratio keeps every
     scallop perfectly circular at any width -- the SVG scales up uniformly,
     never stretches. */
  .awning-wrap {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  /* Same break-out-and-cap shape as the header, so the carousel's outer
     edges line up with the nav row above it. .spotlight-track is flex:1 and
     the arrows are flex:0 0 auto (see above), so the extra width this frees
     up goes entirely to the cards -- arrows stay pinned right next to the
     track with their existing gap, never drifting out toward the wider
     edges themselves. */
  .spotlight-row {
    width: 100vw;
    max-width: 100vw;
    margin-top: 2.2cqw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: max(var(--edge-pad), calc((100vw - var(--wide-width)) / 2));
    padding-right: max(var(--edge-pad), calc((100vw - var(--wide-width)) / 2));
  }
  /* Same break-out-and-cap shape again -- the footer's dark background now
     fills the row instead of floating as a fixed-width block, while its
     content (logo, nav links, CTA box, socials) keeps the same centered,
     already-capped look it always had (.footer-cta has its own max-width). */
  .site-footer {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: max(var(--edge-pad), calc((100vw - var(--wide-width)) / 2));
    padding-right: max(var(--edge-pad), calc((100vw - var(--wide-width)) / 2));
    box-sizing: border-box;
  }
}

/* ── 2561px+ (ultrawide/4K -- 3440x1440, 3840x2160): --wide-width plateaued
   at a flat 2200px past ~2560px wide, so the header/awning/footer/carousel
   band stopped using any more of the screen and just grew its own dead
   margins instead -- the opposite of what the earlier breakout fix was for.
   Redefining the custom property here (rather than touching each selector)
   raises that ceiling further for genuinely huge screens only; continuous
   at the boundary -- 78vw at 2561px lands back on 2200px, so nothing
   jumps. --page-width (reading content) and the 1920px+ card text bump
   above are untouched. */
@media (min-width: 2561px) {
  :root {
    --wide-width: clamp(2200px, 78vw, 2800px);
  }
  /* Nav/Learn More buttons and the hero title block (eyebrow/issue-title/
     edition) were still frozen at their --page-width:1440px size even
     though the header/carousel around them just grew -- bumped 1.3x here
     to match, same multiplier as the card text bump. Written as
     calc(<base> * 1.3) against the same frozen cqw base for consistency. */
  .btn {
    font-size: calc(1.15cqw * 1.3);
    padding: calc(0.55cqw * 1.3) calc(1.9cqw * 1.3);
    border-width: calc(0.22cqw * 1.3);
  }
  /* .btn-learn has its own slightly-larger base size than .btn -- without
     this, the .btn override above (same specificity, later in source)
     would silently win the cascade for it too and erase that difference. */
  .btn-learn { font-size: calc(1.25cqw * 1.3); padding: calc(0.65cqw * 1.3) calc(2.5cqw * 1.3); }
  .eyebrow { font-size: calc(0.92cqw * 1.3); }
  .issue-title { font-size: calc(3.2cqw * 1.3); max-width: calc(46cqw * 1.3); }
  .edition { font-size: calc(1.5cqw * 1.3); }
}

/* ── 1920px+: spotlight card text bumped 1.3x (was 1.5x, reduced by 0.2 per
   feedback). Scoped to #spotlight only -- marketplace/article-recommendation
   cards share the same .card__* classes and are untouched. Written as
   calc(<base> * 1.3) rather than a new flat value so it stays visibly tied
   to the base rules above/in the mobile block; holds flat past 1920 rather
   than continuing to scale with cqw. */
@media (min-width: 1920px) {
  #spotlight .card__title { font-size: calc(1.35cqw * 1.3); }
  #spotlight .card__byline { font-size: calc(0.74cqw * 1.3); }
  #spotlight .card__summary { font-size: calc(1.02cqw * 1.3); }
  #spotlight .card--center .card__title { font-size: calc(2cqw * 1.3); }
  #spotlight .card--center .card__byline { font-size: calc(0.925cqw * 1.3); }
  #spotlight .card--center .card__summary { font-size: calc(1.275cqw * 1.3); }
}

/* ── Small screens: drop container-query scaling, use normal responsive flow */
@media (max-width: 720px) {
  .btn, .edition, .card__title, .card__byline,
  .card__summary, .about-text, .about-welcome__highlight,
  .footer-link, .footer-cta__title, .footer-cta__text, .footer-cta__email,
  .about-hero__title, .pill, .about-section__heading, .about-section__subtitle,
  .about-section__text, .founders-note__text p, .founders-note__photo,
  .charter-card__number, .charter-card__title, .charter-detail__number,
  .charter-detail__title, .charter-detail__text {
    font-size: revert;
  }
  .site-nav { display: none; }
  .menu-toggle { display: block; }

  /* Sized explicitly (not reverted) -- the browser-default revert made the
     eyebrow label too large. Issue title now allows up to 3 lines instead of
     clamping to 2 -- normal block flow already pushes the row below it down
     or up to match, no fixed height needed. */
  .eyebrow { font-size: 0.7rem; margin-bottom: 1rem; }
  .issue-title {
    font-size: 1.6rem;
    /* Matches the centre card's own width (.slot--center, 82vw) below it --
       was 100%, so the text ran past both edges of the card. */
    max-width: 82vw;
    margin: 0 auto 0.75rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
  }
  .card__byline { font-size: 0.7rem; }
  /* Every gap down the spotlight header/card was only 3-10px (awning to
     eyebrow, eyebrow to title, title to edition, edition to the card row,
     and the card's own image to its byline) -- given real room. */
  .spotlight { padding-top: 1.5rem; }
  .edition { margin-top: 0.75rem; }
  .spotlight-row { margin-top: 1.5rem; }
  /* Frame-to-byline (was 1rem) and byline-to-title (0.5rem) gaps didn't
     match -- brought the larger one down to the shorter value instead of
     growing the other, so both sides of the byline are equal. */
  .card__frame { margin-bottom: 0.5rem; }

  /* Thicker, fixed-px borders -- 0.22cqw shrinks to under 1px at mobile
     widths and looks hairline-thin. */
  .card, .btn, .pill { border-width: 2px; }
  .logo-img { width: 22cqw; }
  /* A little taller than the desktop 2:1 -- shared by spotlight, marketplace
     and article recommendation cards since they all use .card__frame. */
  .card__frame { aspect-ratio: 1.8 / 1; }
  /* Title/byline/summary sat almost flush against each other -- give each
     pair some breathing room, across every card context. */
  .card__title { margin-bottom: 0.5rem; }
  .card__byline { margin-bottom: 0.5rem; }
  /* Footer logo was still using its cqw width unchanged, half the header
     logo's mobile size -- match it. */
  .footer-logo-img { width: 22cqw; }
  /* Specificity bug: ".card--center .card__title" (two classes) outranks
     the ".card__title" revert rule below, so the centre card's title stayed
     at a near-invisible 1.6cqw instead of reverting like the side cards'. */
  .card--center .card__title { font-size: revert; }
  /* Same bug, worse: "#spotlight .card--center .card__*" (ID + 2 classes)
     outranks even the fix above, so the centre card's title/byline/summary
     were still rendering at their 2cqw/0.925cqw/1.275cqw desktop-only sizes
     (7.5px/3.5px/4.8px) while the side cards read at 18.72px/11.2px/13.6px.
     Matching selector + later in the cascade so this one wins instead.
     Centre card's text is now 1.25x the side cards' (18.72/11.2/13.6px)
     per feedback, not matched to them. */
  #spotlight .card--center .card__title { font-size: 1.4625rem; }
  #spotlight .card--center .card__byline { font-size: 0.875rem; }
  #spotlight .card--center .card__summary { font-size: 1.0625rem; }

  /* Spotlight becomes a peeking carousel: side cards stay partially visible
     (never hidden), and navigating -- by swiping the centre card or tapping
     a peeking side card -- runs the FLIP animation in animateSlide()
     (script.js): the final content is committed up front, then the row and
     the two morphing cards glide from where the old state looked into
     rest. Centre card is sized off the viewport (not cqw, which would just
     shrink everything proportionally and stay tiny), keeping the same
     ~0.88:1 aspect ratio as desktop instead of a fixed height. */
  .spotlight-row { position: relative; overflow: visible; max-width: none; width: 100%; }
  .spotlight-track { max-width: none; width: 100%; }
  .slot { flex: 0 0 68vw; width: 68vw; }
  .slot--center { flex: 0 0 82vw; width: 82vw; }
  /* Pre-rendered one position further out on each side than what's ever
     visible at rest -- otherwise sliding the row reveals blank space at
     the edge instead of a card. */
  .slot--far-left, .slot--far-right { display: block; }
  /* Static stacking for the carousel, never touched by JS: the centre slot
     paints above the near side slots, which paint above the far slots.
     Without this, transformed cards stack in plain DOM order (left below
     centre, right above it), so a scaled card overlapping its neighbour
     rendered above or below depending on swipe direction. Fixed layers
     mean the card occupying the centre slot is on top on every frame of
     the animation, in both directions. */
  .slot { position: relative; z-index: 1; }
  .slot--left, .slot--right { z-index: 2; }
  .slot--center { z-index: 3; }
  /* Taller than the desktop 0.88:1 -- fixed so every card in a row (spotlight,
     marketplace, article recommendations) matches height regardless of how
     short its summary is, instead of shrinking to fit its own content. */
  .card, .card--center { height: auto; aspect-ratio: 0.7 / 1; }
  /* Reverted browser-default (16px) read oversized against the smaller
     card -- scoped to spotlight only so marketplace cards are untouched. */
  #spotlight .card__summary { font-size: 0.85rem; }
  /* Tapping/swiping a peeking side card centres it (see script.js), so the
     arrows are redundant. */
  .arrow { display: none; }

  /* Marketplace grid was still 3 columns capped at 76cqw -- at mobile widths
     that's ~91px per card, too narrow for the title/byline/summary. Keep 2
     cards per row per the design, full width; cards keep the same fixed
     ratio as the ".card, .card--center" rule above (not overridden here). */
  .marketplace-grid { grid-template-columns: repeat(2, 1fr); max-width: 100%; }
  /* Top/bottom padding (below the awning, above the footer) was only
     9.4px/15px and unequal -- matched to the About Us hero's 1.5rem, same
     on every page except the homepage. */
  .marketplace { padding-top: 1.5rem; padding-bottom: 1.5rem; }
  /* Marketplace card text halved, scoped so it doesn't touch the homepage
     spotlight cards which share the same .card__* classes. Title/summary
     (not byline) increased again per feedback. */
  .marketplace-grid .card__title { font-size: 0.85rem; }
  .marketplace-grid .card__byline { font-size: 0.35rem; }
  /* Tighter line-height than the shared 1.4 (scoped to just this grid, not
     spotlight/article-recommendation summaries) -- narrower cards here don't
     have room to spare, and squeezing the gap between lines lets one more
     line of summary fit in the same space instead of sitting on visible
     unused room below the text. */
  .marketplace-grid .card__summary { font-size: 0.7rem; line-height: 1.15; }
  /* Taller than the shared ".card, .card--center" mobile ratio -- scoped to
     the marketplace grid only (not spotlight/article-recommendation cards,
     which share the same .card class) so its summary gets one more line.
     ".card" sets an explicit height, and aspect-ratio has no effect once
     both width and height are already definite -- so this was silently
     inert, leaving cards at the shared (too-short) height and letting long
     summaries visibly overflow past the card's border. Height must be
     unset back to auto for the ratio to actually apply. */
  .marketplace-grid .card { height: auto; aspect-ratio: 0.66 / 1; }

  /* Bottom padding (~13px) left About Us/Founder's Note/Editorial Charter
     sitting almost flush against the footer -- given real room. */
  .about-section { max-width: 100%; padding-bottom: 2rem; }
  /* Same side gutter as the homepage's .about section, so About Us and
     Founder's Note match it instead of the section's thin default. */
  #about-us, #founders-note { padding-left: 1.5rem; padding-right: 1.5rem; }
  /* About Us body paragraphs left-aligned per feedback; heading stays
     centred (inherits .about-section's text-align: center). */
  #about-us .about-section__text { text-align: left; }
  /* Homepage blurb was capped at 76cqw, sitting well inside the section's
     side padding and wrapping onto more lines than the width allows. */
  .about-text { max-width: 100%; line-height: 1.15; }
  /* Unified to match the article body's size (1rem) per feedback -- note
     the emphasis line ("This is the spirit...") now wraps to 2 lines again,
     since 16px no longer leaves room for it on one. */
  .about-text, .about-text--emphasis, .about-welcome__highlight { font-size: 1rem; }
  /* Learn More sat only ~9px below the welcome pill -- give it more room.
     Size bumped 1.3x further per feedback (not the nav-drawer buttons). */
  .btn-learn { margin-top: 1rem; font-size: 1.3rem; padding: 0.2rem 0.76rem; }
  /* Per feedback: always transparent, black text, no fill or animation on
     tap at all -- overrides the desktop-only .btn-learn:hover too (it has
     no media query of its own, and can stick after a tap on touch devices
     the same way .arrow:hover did, with nothing to un-hover it). */
  .btn-learn, .btn-learn:hover, .btn-learn:active {
    background: transparent;
    color: #000;
    transition: none;
  }
  .btn-learn { -webkit-tap-highlight-color: transparent; }
  /* Photo moved below the "Meet The Team" button instead of between the
     text and the button -- the row's children become direct flex items of
     the section (display:contents on the row itself) so they can be
     reordered past the button, which lives outside the row in the HTML. */
  /* The [hidden] attribute's display:none is a UA-stylesheet rule with low
     specificity -- #founders-note's own display:flex (an ID selector) was
     overriding it, so about.js's tab-switching left the section visibly
     stuck open underneath whichever tab was actually selected. */
  #founders-note:not([hidden]) { display: flex; flex-direction: column; }
  .founders-note__row { display: contents; }
  /* Photo first (right under the heading), then the write-up, then the
     button -- matching the design reference. Also sized up from its
     41x41px cqw size to read as a real portrait instead of a tiny avatar. */
  .founders-note__photo {
    order: 1;
    align-self: center;
    width: 9rem;
    height: 9rem;
    /* Gap above (to the heading) was only 4px -- given real room, and the
       gap below (to the write-up) widened too. */
    margin-top: 1.5rem;
    margin-bottom: 1.75rem;
    font-size: 2rem;
  }
  .founders-note__text { order: 2; }
  .founders-note__cta { order: 3; margin-top: 1rem; }
  /* Editorial Charter's grid + separate detail panel are replaced on mobile
     by .charter-carousel below -- a single full card per principle (see
     about.js), swiped or arrowed between instead of tapped open. */
  .charter-grid, .charter-detail { display: none; }
  /* Subtitle above the carousel ran edge-to-edge while the card below it is
     inset by the arrow buttons' reserved flex space -- padded to match so
     the text lines up with the card's actual width instead of overhanging
     into the arrows. Scoped to this section only. */
  #editorial-charter .about-section__subtitle {
    padding-left: calc(1.25rem + 0.5rem);
    padding-right: calc(1.25rem + 0.5rem);
  }
  .charter-carousel {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
  }
  /* Own class, not the shared .arrow -- that one is visibility:hidden by
     default (only shown inside #spotlight.is-active) and display:none on
     mobile entirely now that spotlight's own arrows were removed. */
  .charter-carousel__arrow {
    position: relative;
    flex: 0 0 auto;
    width: 1.25rem;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
  }
  /* Icon rendered larger than the button's own box (which stays 1.25rem so
     the card next to it keeps its width) -- absolutely centred on the same
     spot so it grows symmetrically instead of shifting the tap target. */
  .charter-carousel__arrow svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1.875rem;
    height: auto;
    display: block;
  }
  .charter-carousel__card {
    flex: 1 1 auto;
    min-width: 0;
    /* Sized to its own content, per principle -- no longer forced to match
       the longest card's height. Equal top/bottom padding already keeps the
       gap above the header the same as the gap below the last line. */
    border: 2px solid var(--pm-plum);
    border-radius: var(--box-radius);
    padding: 1.5rem 1.25rem;
    text-align: left;
    touch-action: pan-y;
  }
  .charter-carousel__number {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.8rem;
    opacity: 0.7;
    margin: 0 0 0.3rem;
  }
  .charter-carousel__title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.3rem;
    line-height: 1.2;
    margin: 0 0 0.85rem;
  }
  .charter-carousel__text p { margin: 0 0 1em; line-height: 1.6; }
  .charter-carousel__text p:last-child { margin-bottom: 0; }

  /* About logo sized up a little further, with more room before the blurb
     below it; footer CTA copy still pulled closer to its box border. */
  .about-logo { width: 72cqw; margin-bottom: 1.1rem; }
  /* About Us page's hero: title bigger than its reverted default (32px),
     bumped further per feedback, and the tight cqw gaps between the awning,
     title, nav pills and the section below (10px/6px/8px) widened. */
  .about-hero { padding-top: 1.5rem; padding-bottom: 1rem; }
  .about-hero__title { font-size: 3rem; margin-bottom: 1rem; }
  .about-nav { margin-bottom: 1rem; }
  /* Pills (About Us/Founder's Note/Editorial Charter tabs, Meet The Team,
     charter detail's Close) were still on their cqw padding (~2px/7px) --
     size bumped 1.3x per feedback (not the nav-drawer buttons). */
  .pill { font-size: 1.3rem; padding: 0.17rem 0.58rem; }
  /* Pulled tighter to the border and sized down -- the reverted browser
     defaults (24px title, 16px text/email) read oversized in this small box. */
  /* Was still capped at 62.5cqw, sitting well inside the footer's side
     padding -- same fix as the about-text width. */
  .footer-cta { padding: 0.4rem 0.7rem; max-width: 100%; }
  .footer-cta__title { font-size: 1.1rem; }
  .footer-cta__text { font-size: 0.72rem; }
  .footer-cta__email { font-size: 0.72rem; }

  /* Gap above the About logo, evened out against the write-up-to-button gap
     in an earlier pass, then bumped 3x, then 1.5x further per feedback. */
  .spotlight { padding-bottom: 2.1rem; }
  /* Top padding evens the gap above the logo (see above); bottom padding
     brought up to match the button-to-logo gap, so the button sits
     equidistant between the welcome pill and the footer below it -- both
     then bumped 1.5x per feedback. */
  .about {
    padding-top: 3.7rem;
    padding-bottom: 5.16rem;
    /* Text was sitting flush against the screen edge -- added a proper
       left/right gutter. */
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  /* Simplified mobile footer -- nav links + socials are reachable from the
     header's hamburger drawer instead (see .mobile-menu). */
  .site-footer .footer-nav,
  .site-footer .social-icons {
    display: none;
  }
  /* Footer logo sat almost flush against the footer's top edge, and right
     on top of the "Got a perspective..." heading below it -- give it room
     on both sides. */
  .site-footer { padding-top: 1.05rem; }
  .footer-logo { margin-bottom: 0.75rem; }
  /* The socials row in that drawer was still on its cqw desktop size --
     under 10px circles at mobile widths. */
  .social-icon { width: 2.5rem; height: 2.5rem; }
  .social-icon svg { width: 1.25rem; height: 1.25rem; }
  /* Drawer link buttons only had .btn's cqw padding (~2px/7px at mobile
     widths) -- font-size was already reverted to 16px, but that padding
     made them read as thin strips. */
  .mobile-menu__link { padding: 0.6rem 1.1rem; font-size: 1.2rem; }
  /* Marketplace's own <h1> title was never reverted or resized for mobile
     and was still on its 3.2cqw desktop value (~12px) -- matched to the
     article page's title size, then bumped 1.5x further per feedback. */
  .marketplace-title { font-size: 1.76rem; }
  /* Edition line was never reverted/resized either -- given a proper
     readable size instead of scaling up its broken tiny value. */
  .marketplace-edition-number, .marketplace-edition-label, .marketplace-edition-sep { font-size: 0.85rem; }
  /* Never reverted/resized (~5.6px) -- normalized to a readable size first
     (matching the edition line's convention), then bumped 1.5x per feedback. */
  .marketplace-note { font-size: 1.05rem; }

  /* Article body wasn't reverted like the other text and was still on its
     1.1cqw desktop size -- under 5px at mobile widths. Sized up to a
     readable rem value. Gutter (both this and the hero, kept matching)
     widened from 0.65rem per side -- text was sitting too close to the
     screen edge. */
  .article-body { font-size: 1rem; max-width: calc(100% - 3rem); }
  /* Left-aligned on mobile instead of the desktop's full-justify -- same
     !important + descendant coverage so the CMS's rich text editor can't
     override it. */
  .article-body, .article-body * { text-align: left !important; }
  .article-hero { width: calc(100% - 3rem); }
  /* .article-page had no top/bottom padding at all -- matched to the same
     1.5rem used below the awning/above the footer on every other page. */
  .article-page { padding-top: 1.5rem; padding-bottom: 1.5rem; }

  /* None of these were reverted either and were still on their tiny cqw
     desktop sizes (issue title ~8px, article title ~15px, edition ~5.6px,
     byline ~4px) -- scaled up from those actual mobile sizes per feedback:
     issue title 2x, article title 1.25x, edition 2x, byline matched to
     edition's new size instead of its own multiplier, then bumped further
     (font size and the gaps between each element) per feedback -- the
     cqw-based margins between them were down to 3-7px on mobile. */
  /* Was still using its own small desktop side padding (2.76cqw), running
     edge to edge instead of matching the hero image's width below it. */
  .article-issue-title { font-size: 1.3rem; margin: 0 auto 1rem; padding: 0; width: calc(100% - 3rem); }
  .article-hero { margin-top: 1rem; }
  /* Was capped at 60cqw (225px), narrower than the hero image (327px) --
     matched to the same hard width limit as the hero/issue title. */
  .article-title { font-size: 1.55rem; margin: 0 auto 0.75rem; max-width: calc(100% - 3rem); }
  .article-edition { font-size: 0.9rem; margin-top: 1rem; margin-bottom: 0.75rem; }
  .article-byline { font-size: 0.9rem; margin-bottom: 1.5rem; }

  /* About-the-writer box was never reverted/resized either -- same bug as
     the article body/hero had (~5px text, capped at 56cqw so its border sat
     56px+ away from the edge). Same fix: readable sizes, gutter matching the
     body/hero, thicker border so it doesn't vanish to a hairline. */
  .article-about-writer {
    max-width: calc(100% - 3rem);
    border-width: 2px;
    /* Inner left/right padding was only 7.5px -- more room from the border,
       per feedback (box width above is unchanged). Top/bottom (was 6px)
       bumped too, so the box reads a little bigger with breathing room
       around the text instead of hugging it exactly -- text size itself
       is unchanged. */
    padding: 1.5rem 1.25rem;
    /* Gap to the recommendations heading below widened further per feedback. */
    margin-bottom: 3rem;
  }
  /* Box size unchanged (max-width/padding above). Heading made bigger and
     the description made smaller per feedback -- no longer matching the
     article body's size. */
  .article-about-writer__heading { font-size: 1.2rem; }
  .article-about-writer__text { font-size: 0.85rem; }

  /* Recommendation cards had the same narrow-column bug the marketplace grid
     had -- same fix. They already inherit the taller .card__frame ratio,
     the fixed .card aspect-ratio, and title/byline spacing since those are
     unscoped mobile rules. Heading's own gap to the grid, and the gap
     between the two cards, were only 3px/6px -- more room per feedback. */
  .article-recommendations__heading { margin-bottom: 1.25rem; }
  /* Made to match the marketplace cards exactly, per feedback -- same base
     gap/padding as .marketplace-grid/.marketplace (both share the same
     1.5cqw/2.76cqw values, just previously overridden here), and the same
     title/byline/summary sizes. */
  .article-recommendations__grid { max-width: 100%; }
  .article-recommendations { padding-bottom: 1.9rem; }
  .article-recommendations__grid .card__title { font-size: 0.85rem; }
  .article-recommendations__grid .card__byline { font-size: 0.35rem; }
  .article-recommendations__grid .card__summary { font-size: 0.7rem; }
  /* Heading was also never reverted/resized (~8px); sized down further from
     the earlier 1.3rem pass so "What do others have to say about this
     issue?" fits on one line instead of wrapping to two. Blurb below it is
     no longer shown at all (see article.js). */
  .article-recommendations__heading { font-size: 0.94rem; }

  /* Charter carousel arrows were a bare 1.25rem icon with no padding --
     bigger icon plus a real tap-target area around it. */
  .charter-carousel__arrow {
    width: 1.75rem;
    padding: 0.75rem;
  }

  /* Contact Us page was never given mobile sizing at all (new page) -- same
     bug as everywhere else: body text down at ~4.5px, headings ~4.5-7.5px,
     content capped at 76cqw with ~45px gaps on each side. Matched to the
     about-us section's own mobile treatment: 1.5rem side gutter, full
     width, and the same readable text sizes used elsewhere on the site. */
  .contact-page { padding: 1.5rem 1.5rem; }
  .contact-title { font-size: 1.76rem; margin-bottom: 1.5rem; }
  .contact-body { max-width: 100%; }
  /* Justify at mobile widths (narrow column, serif font) stretched word
     gaps unevenly -- left-aligned reads far more organised here. Margins
     between paragraphs/headings were also down to 1-6px; given real room. */
  .contact-body p, .contact-editorial__block p { text-align: left; margin-bottom: 1rem; font-size: 1rem; }
  .contact-heading { font-size: 1.1rem; margin-top: 1.5rem; margin-bottom: 0.75rem; }
  /* This is a separate <section>, not nested inside .contact-page, so it
     never inherited that section's 1.5rem side gutter -- its divider line
     and text were running full-bleed while the content above it was inset. */
  /* Bottom padding was 0, leaving this flush against the footer. */
  .contact-editorial { max-width: 100%; margin-top: 2rem; padding: 1.5rem 1.5rem 2rem; }
  .contact-editorial__title { font-size: 1.3rem; margin-bottom: 1.25rem; }
  .contact-editorial__block { margin-bottom: 1.5rem; }
  .contact-editorial__header { font-size: 1.1rem; margin-bottom: 0.5rem; }

  /* Our Team page: same never-fixed-for-mobile bug (photos ~49px, name/role
     text ~4.5px/3.75px, a 3-per-row flex-wrap grid capped at 76cqw). Redone
     as a proper 2-column grid with much bigger photos and readable text,
     matching the design reference. */
  .team-page { padding: 1.5rem 1.5rem; }
  .team-title { font-size: 1.76rem; margin-bottom: 1.5rem; }
  .team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1rem;
    max-width: 100%;
  }
  .team-member { width: auto; }
  /* Odd member count leaves a lone last card stuck in the left column --
     span it across both and let its existing text-align:center/margin:auto
     centre it within that full row width instead. */
  .team-grid > .team-member:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .team-member__photo { width: 8rem; height: 8rem; margin: 0 auto 0.75rem; border-width: 2px; }
  .team-member__name { font-size: 1.1rem; margin-bottom: 0.25rem; }
  .team-member__role { font-size: 0.9rem; }
}