/* Self-hosted Inter variable font (Phase 4A). Relative URLs resolve against
   the stylesheet URL, so they work at the root and under ARTWORLD_BASE_PATH. */
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/InterVariable-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Patch G2: Fraunces (SIL OFL) replaces Georgia as the display/headline face.
   Self-hosted variable woff2, latin subset, opsz 9..144 + wght 100..900 axes
   (gstatic slices). Optical sizing stays on the default `auto`, so text-size
   uses the soft low-opsz design and display sizes sharpen automatically. */
@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/FrauncesVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/FrauncesVariable-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Futura Pro Book (Linotype via MyFonts, client-licensed webfont kit
   uploaded 2026-09-01; Webfont Build ID 3867246). The kit ships the Book
   weight only, so the face is declared across the whole weight range: every
   Futura-token element renders the real Book cut and browsers never
   synthesize a faux bold from it. */
@font-face {
  font-family: "FuturaProBook";
  src: url("assets/fonts/FuturaProBook.woff2") format("woff2"), url("assets/fonts/FuturaProBook.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Playfair Display Black Italic (SIL OFL) is reserved for the italic
   "brief" half of the ArtWorldBrief wordmark. */
@font-face {
  font-family: "Playfair Display";
  src: url("assets/fonts/PlayfairDisplay-BlackItalic.woff2") format("woff2");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* Jost (SIL OFL): kept as the fallback behind the licensed Futura webfont. */
@font-face {
  font-family: "Jost";
  src: url("assets/fonts/JostVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #fbf7ef;
  --paper-2: #fffdf8;
  --ink: #1d1718;
  --muted: #6f6461;
  --line: #ded5ca;
  --wine: #6d0f2a;
  --brand-wine: #650934;
  --rust: #c64533;
  --olive: #796936;
  --article-burgundy: #660033;
  --article-gray: #666666;

  /* Display face (Patch G2). Fraunces 400 runs thin at display sizes, so
     headline rules pair the family with --font-display-weight (~580 on the
     variable wght axis). Georgia fallback keeps old metrics while swapping. */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-display-weight: 580;
  /* Futura token (client font system). Real Futura is licensed, so machines
     without it fall back to the self-hosted Jost variable face (OFL) — the
     closest libre geometric sans — before the old system fallbacks. */
  --font-listing: "FuturaProBook", Futura, "Futura PT", Jost, "Century Gothic", "Trebuchet MS", sans-serif;
  --listing-meta: #666666;

  /* Type scale */
  --text-xs: 12px;
  --text-sm: 13.5px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 21px;
  --text-2xl: 26px;
  --text-3xl: 32px;
  --text-4xl: 42px;
  --text-display: clamp(40px, 3vw + 28px, 64px);

  /* Corners */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* Elevation (warm wine-tinted shadows) */
  --shadow-sm: 0 10px 30px rgba(67, 30, 37, 0.05);
  --shadow-md: 0 16px 44px rgba(67, 30, 37, 0.07);
  --shadow-lg: 0 24px 64px rgba(67, 30, 37, 0.09);

  /* Motion */
  --motion-fast: 150ms;
  --motion-base: 220ms;
  --motion-slow: 300ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    linear-gradient(90deg, rgba(109, 15, 42, 0.025) 1px, transparent 1px),
    linear-gradient(180deg, rgba(121, 105, 54, 0.055), transparent 220px),
    var(--paper);
  background-size: 72px 72px, auto, auto;
  color: var(--ink);
  font-family: Inter, Arial, sans-serif;
}

button, a, input { font: inherit; }
button { cursor: pointer; }

img { max-width: 100%; }

/* Accessibility primitives ------------------------------------------------ */

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

:focus:not(:focus-visible) {
  outline: none;
}

main#main-content:focus {
  outline: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 300;
  transform: translateY(-72px);
  background: var(--wine);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 12px 32px rgba(67, 30, 37, 0.28);
}

.skip-link:focus {
  transform: translateY(0);
}

.awb-icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

.page {
  width: min(1220px, 100%);
  margin: 0 auto;
  padding: 24px;
}

/* Landmark shell: header/main/footer are siblings inside #app, each with its
   own .page width container. Vertical rhythm mirrors the previous single-.page
   layout exactly (24 top / 20 between header and content / 24 bottom). */
.site-header .page { padding-bottom: 0; }

main.page {
  padding-top: 20px;
  padding-bottom: 0;
  min-width: 0;
}

.site-footer .page { padding-top: 0; }

.header-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: flex-start;
  gap: 20px;
  padding: 12px 0 28px;
  border-bottom: 1px solid rgba(222, 213, 202, 0.65);
}

.brand {
  text-decoration: none;
  display: grid;
  grid-template-columns: 66px 1fr;
  gap: 16px;
  align-items: flex-start;
  border: 0;
  background: transparent;
  color: var(--brand-wine);
  padding: 0;
  text-align: left;
}

/* Exact supplied ArtWorldBrief mark. No added background, border or padding. */
.brand-mark {
  display: block;
  width: 66px;
  height: 66px;
  margin-top: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  object-fit: contain;
}

.brand-title {
  display: flex;
  align-items: baseline;
  white-space: nowrap;
  font-size: 58px; /* wordmark: fixed identity size, outside the type scale */
  line-height: 0.88;
}

.brand-title-artworld {
  font-family: "FuturaProBook", Futura, "Futura PT", Jost, sans-serif;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0.08em;
  color: #777777;
}

.brand-title-brief {
  margin-left: 0.04em;
  font-family: "Playfair Display", "Fraunces", Georgia, serif;
  font-size: 1em;
  font-weight: 900;
  font-style: italic;
  letter-spacing: 0;
  color: #777777;
}

.site-footer .brand-title-brief {
  color: #fbf7ef;
}

.brand-sub {
  display: block;
  margin-top: 8px;
  color: var(--olive);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
}

.top-nav {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-top: 6px;
}

.masthead-note {
  min-width: 136px;
  display: grid;
  gap: 5px;
  justify-items: end;
  padding-top: 8px;
  color: var(--muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.masthead-note span:last-child {
  color: var(--wine);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: 0;
  text-transform: none;
}

.icon-link,
.round-icon,
.pill-button,
.rank-item,
.link-grid button,
.link-grid a {
  border: 1px solid var(--line);
  background: rgba(255, 253, 248, 0.72);
  color: var(--wine);
  border-radius: var(--radius-pill);
  padding: 10px 14px;
  text-decoration: none;
}

.icon-link:hover,
.round-icon:hover,
.pill-button:hover,
.rank-item:hover,
.link-grid button:hover,
.link-grid a:hover {
  background: var(--wine);
  border-color: var(--wine);
  color: #fff;
}

.icon-link {
  display: inline-flex;
  gap: 7px;
  align-items: center;
}

.icon-link .awb-icon {
  width: 17px;
  height: 17px;
}

.round-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
}

.hero {
  min-height: 560px;
  border-radius: var(--radius-sm);
  background-image:
    linear-gradient(90deg, rgba(251, 247, 239, 0.99) 0%, rgba(251, 247, 239, 0.9) 40%, rgba(251, 247, 239, 0.18) 74%),
    var(--hero-image);
  background-position: center;
  background-size: cover;
  display: grid;
  align-items: end;
  border: 1px solid rgba(222, 213, 202, 0.9);
  overflow: hidden;
  margin-bottom: 0; /* Patch D: the signal strip overlaps the hero bottom edge */
  box-shadow: var(--shadow-lg);
  position: relative;
}

.hero-empty {
  background-image: linear-gradient(135deg, var(--paper-2), #eee4d5);
}

/* The shade's bottom padding reserves the hero's "caption band": the bottom-left
   corner bracket and the bottom-right image credit both live there, so neither
   ever crowds the standfirst or the "Read the brief" CTA (client task #25). */
.hero-shade {
  width: min(610px, 100%);
  padding: 58px 48px 76px;
  position: relative;
  z-index: 1;
}

/* Client font system (tasks 32-37): section headers read in the Futura token,
   black, all caps — everywhere. */
.section-label,
.eyebrow {
  color: #000;
  font-family: var(--font-listing);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--text-xs);
  font-weight: 400;
}

.hero h1,
.profile-copy h1 {
  margin: 12px 0 16px;
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: 0.96;
  letter-spacing: 0;
  font-weight: var(--font-display-weight);
  color: #000;
  overflow-wrap: break-word;
  text-wrap: balance;
}

/* The hero headline is the featured story's actual title, linking to its
   article page. It inherits the display serif; hover shifts to rust. */
.hero-title-link {
  color: inherit;
  text-decoration: none;
}

.hero-title-link:hover,
.hero-title-link:focus-visible {
  color: var(--rust);
}

.profile-copy p,
.story-copy p {
  color: var(--muted);
  line-height: 1.55;
}

/* Reading hierarchy: article body copy and story standfirsts read in ink at a
   comfortable measure; metadata and captions stay muted. */
.hero p,
.article-text p {
  color: var(--ink);
  line-height: 1.65;
}

.hero p {
  max-width: 480px;
  font-size: var(--text-xl);
}

.hero-link,
.text-action {
  border: 0;
  background: transparent;
  color: #000;
  padding: 0;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hero-link {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
  text-decoration: none; /* it is an <a> now; keep the original button look */
}

.hero-link:hover,
.hero-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Patch D: the hero CTA reads in the serif display voice instead of the
   uppercase sans action style. */
.hero-link--serif {
  font-family: Inter, Arial, sans-serif;
  font-size: var(--text-xl);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: #000;
}

.hero-link--serif:hover,
.hero-link--serif:focus-visible {
  color: var(--article-burgundy);
}

/* Featured-image credit on the hero background. Client task #25: it used to sit
   top-right, but with no width cap a long museum credit stretched across the
   whole top of the hero, covering the top-left corner bracket and crowding the
   headline. It now sits BOTTOM-RIGHT — the same edge story cards use — inside
   the shade's reserved caption band, with a hard width cap so long credits
   ellipsise (.story-credit already sets nowrap + text-overflow). The 380px cap
   keeps its left edge clear of the shade's 610px text column at every desktop
   width. The .hero scope out-specifies .story-credit's own left/right/bottom. */
.hero .hero-credit {
  left: auto;
  right: 20px;
  top: auto;
  bottom: 58px; /* level with the bottom bracket, clear of the signal strip */
  max-width: min(52%, 380px);
  z-index: 2;
}

.feature-band {
  margin: 0 0 24px;
}

.filter-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 0 0 28px;
  scrollbar-width: none;
}

.filter-row::-webkit-scrollbar,
.top-nav::-webkit-scrollbar {
  display: none;
}

/* Right-edge fade signalling horizontal scrollability. The attribute is set
   by app.js only when the row actually overflows. */
.filter-row[data-scroll-fade],
.top-nav[data-scroll-fade],
.story-stack--carousel[data-scroll-fade] {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
}

.filter-row .pill-button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.yearly-artist-strip {
  margin: 0 0 6px;
}

.yearly-artist-strip .filter-row {
  padding-bottom: 28px;
}

.compact-head {
  margin: 2px 0 12px;
}

.compact-head p {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

.front-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 28px;
  align-items: start;
}

/* Patch D: the signal strip overlaps the hero's bottom edge — same elevated
   card pattern as .country-stat-bar over the country cover (negative top
   margin, near-opaque bar, z-index above the hero). */
.signal-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: -34px 34px 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 253, 248, 0.96);
  box-shadow: var(--shadow-md);
  position: relative;
  z-index: 4;
  overflow: hidden;
}

.signal-strip div {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border-right: 1px solid var(--line);
  padding: 18px 22px;
}

.signal-strip div:last-child {
  border-right: 0;
}

.signal-strip .awb-icon {
  width: 30px;
  height: 30px;
  color: var(--wine);
}

.signal-strip strong,
.signal-strip small {
  display: block;
}

.signal-strip strong {
  color: #000;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-display-weight);
}

.signal-strip small {
  margin-top: 3px;
  color: var(--muted);
}

.section-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 10px 0 18px;
}

.section-head h2,
.rail h2 {
  margin: 0;
  color: #000;
  font-family: var(--font-listing);
  font-weight: 400;
  font-size: var(--text-lg);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-latest .section-head h2,
.article-more .section-head h2 {
  color: #000;
  font-family: var(--font-listing);
  font-weight: 700;
  letter-spacing: 0;
}

.section-head::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
}

.story-stack {
  display: grid;
  gap: 18px;
}

.story-card {
  display: grid;
  grid-template-columns: 42% minmax(0, 1fr);
  gap: 20px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out);
}

.story-card:hover {
  transform: translateY(-2px);
  border-color: rgba(109, 15, 42, 0.28);
  box-shadow: var(--shadow-md);
}

.story-card.compact {
  grid-template-columns: 190px minmax(0, 1fr);
}

.story-card.full-width-no-image {
  grid-template-columns: minmax(0, 1fr);
}

.story-card.full-width-no-image .story-copy,
.story-card.full-width-no-image.featured .story-copy {
  padding: 30px;
}

/* In row layouts the media column's box is fully determined by the track
   width + min-height/row height (CLS-safe without image dimensions). The
   aspect-ratio treatment applies in the stacked phone layout below, where
   the media spans the full card width. */
.story-media {
  min-height: 240px;
  display: block;
  background: #eee6da;
  overflow: hidden;
  position: relative;
}

.story-card.compact .story-media {
  min-height: 170px;
}

.story-media img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  display: block;
  filter: saturate(0.9) contrast(1.05); /* house filter: evens out mixed-source imagery */
  transition: transform var(--motion-slow) var(--ease-out), filter var(--motion-slow) var(--ease-out), opacity var(--motion-slow) var(--ease-out);
}

.story-card:hover .story-media img {
  transform: scale(1.035);
  filter: saturate(1) contrast(1.05);
}

.story-credit {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  width: max-content;
  max-width: calc(100% - 24px);
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: var(--radius-pill);
  background: rgba(30, 18, 18, 0.78); /* AA-safe on any underlying image */
  color: rgba(255, 252, 245, 0.92);
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  backdrop-filter: blur(8px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.story-card.no-image .story-credit,
.story-card.image-fallback .story-credit {
  display: none;
}

/* Task 32 v1-A: a truncated credit shows in full on mouse-over. The pill is
   bottom-anchored, so wrapping grows upward over the image only. */
.story-media:hover .story-credit,
.story-credit:hover,
.article-figure:hover .article-credit {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  width: auto;
}

.story-copy {
  padding: 24px 24px 22px 0;
  position: relative;
}

.story-card.featured .story-copy {
  padding: 30px 30px 28px 0;
}

.story-copy h3 {
  margin: 7px 0 12px;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: 1.08;
  letter-spacing: 0;
  font-weight: 400;
  color: #000;
  overflow-wrap: break-word;
}

.story-card.compact .story-copy h3 {
  font-size: var(--text-2xl);
}

.story-title-link {
  color: inherit;
  text-decoration: none;
}

.story-title-link:hover {
  color: var(--article-burgundy);
}

/* Task 32: the category above a CARD headline is Inter gray; task 33 v1-A:
   on the article PAGE it is Futura black (the .eyebrow base). */
.story-source-category {
  color: #000;
  font-family: var(--font-listing);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.08em;
}

.article-hero .story-source-category {
  color: #000;
  font-family: var(--font-listing);
  letter-spacing: 0.08em;
}

.article-text {
  max-width: 740px;
}

.article-text p {
  margin: 0 0 12px;
}

.story-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 4px;
}

/* Task 32 v1-A tag pills: category label Inter caps #000000, value Inter
   #660033, both at the same size. */
.story-tags span,
.story-tags a {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  max-width: 100%;
  padding: 7px 10px;
  border: 1px solid rgba(222, 213, 202, 0.92);
  border-radius: var(--radius-pill);
  background: rgba(109, 15, 42, 0.045);
  color: var(--article-burgundy);
  font-family: Inter, Arial, sans-serif;
  font-size: var(--text-xs);
  line-height: 1.2;
}

/* Linkable tags (per the tag-linking rules) keep the pill look, with a quiet
   hover/focus state so they read as navigable. */
.story-tags a {
  text-decoration: none;
}

.story-tags a:hover,
.story-tags a:focus-visible {
  border-color: rgba(109, 15, 42, 0.32);
  background: rgba(255, 253, 248, 0.95);
}

.story-tags strong {
  color: #000;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  color: var(--muted);
  font-size: var(--text-sm);
}

/* Patch D (D2): "«City» · 5 hours ago" sits lower-right on cards. */
.meta-when {
  margin-left: auto;
  text-align: right;
  color: var(--muted);
}

/* Article pages show the same meta format but keep it inline (not pushed). */
.article-meta .meta-when {
  margin-left: 0;
  text-align: left;
}

/* Patch D (D2): quiet [report] correction link in the meta row. Negative
   margins keep the visual footprint small while padding preserves a large
   hit area (>= 44px effective on touch layouts, see the 980px block). */
.report-link {
  display: inline-flex;
  align-items: center;
  padding: 10px 8px;
  margin: -10px -8px;
  color: var(--article-gray);
  font-family: Inter, Arial, sans-serif;
  font-size: var(--text-xs);
  font-weight: 400; /* task 32 v1-A: regular, not semi-bold */
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

/* Task 32 v1-A: cards stack "«City» · date" over [REPORT] lower-right. */
.meta-side {
  margin-left: auto;
  display: grid;
  justify-items: end;
  gap: 2px;
  text-align: right;
}

.meta-side .meta-when {
  margin-left: 0;
}

.report-link:hover,
.report-link:focus-visible {
  color: var(--article-burgundy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.story-card .text-action[data-expand] {
  color: #000;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* Task 33 v1-A: the "Original source" strip was removed from the article
   page markup entirely. */

/* Permalink action used by the mobile carousel in place of the in-place
   expand button (expand-in-place doesn't suit a horizontal slide). Hidden
   everywhere by default; the <=640px carousel block reveals it and hides the
   expand button instead. */
.story-read-link {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: #000;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.story-read-link:hover,
.story-read-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.story-read-link .awb-icon {
  width: 16px;
  height: 16px;
}

/* Carousel slide-position indicator ("N of M"): decorative, filled by app.js.
   Hidden outside the <=640px carousel mode; min-height reserves its line so
   the JS text fill never shifts layout. */
.story-carousel-indicator {
  display: none;
}

/* "See more stories" label shown only in carousel mode. */
.load-more-label--mobile {
  display: none;
}

.story-open-link {
  position: absolute;
  right: 18px;
  top: 18px;
  width: 34px;
  height: 34px;
  display: none;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--wine);
  background: rgba(255, 253, 248, 0.86);
  text-decoration: none;
}

.story-open-link:hover {
  background: var(--wine);
  color: #fff;
  border-color: var(--wine);
}

.story-open-link .awb-icon {
  width: 16px;
  height: 16px;
}

.load-more-wrap {
  display: flex;
  justify-content: center;
  margin: 26px 0 4px;
}

.load-more-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(109, 15, 42, 0.22);
  border-radius: var(--radius-pill);
  background: var(--wine);
  color: #fff;
  padding: 13px 22px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: var(--shadow-md);
}

.load-more-button:hover {
  background: #4f0b1f;
}

.rail {
  display: grid;
  gap: 20px;
}

.rail-section {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.88), rgba(255, 253, 248, 0.66));
  padding: 18px;
  position: relative;
  overflow: hidden;
}

.rank-list,
.org-list,
.link-grid {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.rank-item,
.listing-link {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  text-align: left;
  border-radius: var(--radius-sm);
  position: relative;
  z-index: 1;
}

/* Task 34 v1-A: optional right-aligned "French, 1840–1926" note on artist rows. */
.listing-side {
  color: var(--listing-meta);
  font-family: Inter, Arial, sans-serif;
  font-size: var(--text-sm);
  text-align: right;
  align-self: center;
  white-space: nowrap;
}

/* Task 36 follow-up: artist rows stack name / nationality-years / mentions
   (the side column overlapped the name in narrow rails). */
.listing-life {
  color: var(--listing-meta);
  font-family: Inter, Arial, sans-serif;
  font-size: var(--text-sm);
}

.listing-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(222, 213, 202, 0.82);
  border-radius: var(--radius-pill);
  background: rgba(255, 253, 248, 0.78);
  color: var(--wine);
  overflow: hidden;
}

.listing-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.listing-avatar--artist span {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: var(--wine);
  color: var(--paper-2);
  font-family: var(--font-listing);
  font-size: var(--text-sm);
  font-weight: 700;
}

.listing-avatar .awb-icon {
  width: 21px;
  height: 21px;
}

.listing-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

/* Task 34: listing names read in Fraunces, black. */
.listing-link strong,
.rank-item strong,
.directory-item strong {
  min-width: 0;
  color: #000;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.12;
  font-weight: var(--font-display-weight);
  overflow-wrap: break-word;
}

.listing-link small,
.rank-item small,
.directory-item small {
  color: var(--listing-meta);
  font-family: Inter, Arial, sans-serif;
  font-size: var(--text-sm);
}

.rank-item.listing-link:hover,
.rank-item.listing-link:focus-visible,
.search-pill.listing-link:hover,
.search-pill.listing-link:focus-visible,
.link-grid a.listing-link:hover,
.link-grid a.listing-link:focus-visible {
  border-color: rgba(109, 15, 42, 0.28);
  background: rgba(255, 253, 248, 0.95);
  color: var(--ink);
}

.listing-link:hover strong,
.listing-link:focus-visible strong {
  color: #000;
}

.rank-item small {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.rank-item small .awb-icon,
.listing-link small .awb-icon {
  width: 14px;
  height: 14px;
}

/* Task 34 v1-A: listing section headers are Futura all caps black site-wide. */
.rail h2,
.trending-col h2,
.index-group .section-head h2,
.search-group .section-head h2 {
  color: #000;
  font-family: var(--font-listing);
  font-weight: 400;
  font-size: var(--text-base);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.profile-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) 420px;
  gap: 28px;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-2);
  padding: 28px;
  margin-bottom: 26px;
  overflow: hidden;
}

.breadcrumb {
  display: flex;
  gap: 9px;
  align-items: center;
  color: var(--muted);
  margin-bottom: 22px;
}

.breadcrumb button,
.breadcrumb a {
  border: 0;
  background: transparent;
  color: var(--wine);
  padding: 0;
  text-decoration: none;
}

.profile-copy p {
  max-width: 640px;
  font-size: var(--text-xl);
}

/* Phase 4B: geo icon emblem on city/region/country page headers. A modest
   56px rounded tile beside the section label; pages without a generated icon
   render the label alone (the wrapper collapses to the label). */
.geo-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.geo-emblem {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--paper-2);
  object-fit: cover;
}

.profile-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.profile-facts span {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(251, 247, 239, 0.78);
  padding: 14px 16px;
  color: var(--muted);
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 5px 10px;
  align-items: center;
}

.profile-facts .awb-icon {
  grid-row: span 2;
  width: 24px;
  height: 24px;
  color: var(--wine);
}

.profile-facts strong {
  display: block;
  color: var(--wine);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: 1;
  font-weight: var(--font-display-weight);
}

.rail h2 {
  display: inline-flex;
  gap: 9px;
  align-items: center;
}

.rail h2 .awb-icon {
  width: 18px;
  height: 18px;
}

.profile-image {
  width: 100%;
  min-height: 430px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

/* Artist page redesign (task 36): the hero introduces the practice with a
   work from current coverage; compact signal cards sit just beneath it. */
.artist-hero {
  margin-bottom: 0;
}

.artist-hero .section-label {
  color: #000;
  font-family: var(--font-listing);
  font-size: 16px;
  letter-spacing: 0.08em;
}

.artist-hero .profile-copy h1 {
  color: #000;
  font-weight: 400;
}

.artist-identity {
  margin: -7px 0 36px;
  color: var(--article-gray) !important;
  font-family: var(--font-display);
  font-size: var(--text-3xl) !important;
  font-weight: 400;
  line-height: 1.08 !important;
}

.artist-hero .profile-copy > p:not(.artist-identity) {
  color: var(--article-gray);
  font-size: var(--text-xl);
}

.artist-hero .profile-media .profile-image {
  min-height: 430px;
}

/* Task 36 v1-A: same font and icon sizes as the front-page signal strip. */
.artist-stat-cards {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 260px));
  gap: 24px;
  margin: -30px 34px 36px;
}

.artist-stat-card {
  display: grid;
  grid-template-columns: 38px 1fr;
  grid-template-rows: auto auto;
  gap: 3px 12px;
  align-items: center;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 253, 248, 0.98);
  color: var(--muted);
  box-shadow: var(--shadow-md);
}

.artist-stat-card .awb-icon {
  grid-row: span 2;
  width: 30px;
  height: 30px;
  color: var(--wine);
}

.artist-stat-card strong {
  color: #000;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-display-weight);
  line-height: 1;
}

.artist-stat-card span {
  font-size: var(--text-sm);
  line-height: 1.2;
}

/* Task 36 v1-A: the LATEST NEWS keyline runs the full page width; the rail
   header then aligns with the first article beside it. */
.artist-grid-head {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

/* Patch C: artist_registry (b105) enriched header. Additive only — these rules
   engage on .profile-hero.has-registry / .profile-media; name_only and
   registry-less artist pages are byte-for-byte unchanged. */
.artist-kicker {
  margin-top: 6px;
  color: var(--muted);
  font-size: var(--text-sm);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.profile-media {
  margin: 0;
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 8px;
}

.profile-media .profile-image {
  height: 100%;
  min-height: 300px;
}

.profile-image-credit {
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.45;
}

.registry-pill-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 18px;
}

.registry-pill-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: var(--text-sm);
}

.registry-pill-label .awb-icon {
  width: 16px;
  height: 16px;
  color: var(--wine);
}

.registry-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.registry-pill {
  border: 1px solid var(--line);
  background: rgba(255, 253, 248, 0.72);
  color: var(--ink);
  border-radius: var(--radius-pill);
  padding: 6px 13px;
  font-size: var(--text-sm);
}

.registry-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.registry-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: rgba(255, 253, 248, 0.72);
  color: var(--wine);
  border-radius: var(--radius-pill);
  padding: 10px 15px;
  min-height: 44px;
  text-decoration: none;
  transition: background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

.registry-link:hover {
  background: var(--wine);
  border-color: var(--wine);
  color: #fff;
}

.registry-link .awb-icon {
  width: 17px;
  height: 17px;
}

/* Standalone artist pages (b23): registry-only profiles with no article
   coverage. Additive — these rules engage on .no-media / .registry-sources /
   .profile-empty-state; article-based artist pages are unchanged. */
.profile-hero.artist-hero.no-media {
  grid-template-columns: 1fr;
}

.registry-sources {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  margin-top: 20px;
}

.registry-sources-label {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.registry-sources-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}

.registry-sources-links a {
  color: var(--muted);
  font-size: var(--text-sm);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--motion-fast) var(--ease-out);
}

.registry-sources-links a:hover {
  color: var(--wine);
}

.profile-empty-state {
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  padding: 22px 24px;
  background: rgba(251, 247, 239, 0.5);
  color: var(--muted);
}

.profile-empty-state p {
  margin: 0;
  line-height: 1.55;
}

.country-cover {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 0.88fr);
  min-height: 355px;
  border: 1px solid rgba(222, 213, 202, 0.95);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 0;
  background:
    linear-gradient(90deg, rgba(255, 253, 248, 0.98) 0%, rgba(255, 253, 248, 0.92) 43%, rgba(255, 253, 248, 0.2) 67%, rgba(255, 253, 248, 0.08) 100%),
    radial-gradient(circle at 16% 18%, rgba(198, 69, 51, 0.08), transparent 32%),
    var(--paper-2);
  box-shadow: var(--shadow-lg);
  position: relative;
}

/* Task 37 v1-A: the corner "angle" ornaments were removed from the cover. */

.country-cover-copy {
  padding: 44px 28px 42px 42px;
  position: relative;
  z-index: 3;
  align-self: center;
  /* b62 mobile audit: the copy column is a size container so (a) a long
     single word ("Contemporary") can never widen the grid track past the
     cover and get clipped, and (b) the title can be sized in cqw units. */
  container-type: inline-size;
  min-width: 0;
}

.country-cover .geo-head {
  min-height: 56px;
}

.country-breadcrumb {
  margin-bottom: 22px;
}

.country-cover .section-label {
  display: inline-flex;
  gap: 14px;
  align-items: center;
}

.country-cover .section-label::after {
  content: "";
  display: inline-block;
  width: 54px;
  height: 1px;
  background: var(--rust);
  opacity: 0.75;
}

/* Task 44: "MUSEUM" / "GALLERY" kind label sits right under the M&G name. */
.mg-kind-label {
  margin: -6px 0 14px;
  font-size: 16px;
}

.country-cover .registry-links {
  margin-top: 18px;
}

.country-cover h1 {
  margin: 16px 0 12px;
  font-family: var(--font-display);
  font-weight: 400;
  color: #000;
  /* b65 desktop audit: 22cqw of the copy column keeps the size continuous
     with the 981-1220 rule (no 58% jump at 1280); fitCoverTitles() in app.js
     handles long words and caps the title at two lines on desktop. */
  font-size: clamp(70px, min(9vw, 22cqw), 126px);
  line-height: 0.86;
  letter-spacing: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}

.country-cover p {
  max-width: 570px;
  font-size: var(--text-xl);
  line-height: 1.45;
  color: var(--article-gray);
}

.country-cover-art {
  min-height: 355px;
  background:
    linear-gradient(90deg, rgba(251, 247, 239, 0.72) 0%, rgba(251, 247, 239, 0.12) 34%, rgba(251, 247, 239, 0) 100%),
    var(--country-image);
  background-size: cover;
  background-position: center;
  position: relative;
}

.country-cover.no-image .country-cover-art {
  background:
    radial-gradient(circle at 68% 38%, rgba(109, 15, 42, 0.16), transparent 28%),
    linear-gradient(135deg, rgba(121, 105, 54, 0.16), transparent 48%),
    repeating-linear-gradient(90deg, rgba(109, 15, 42, 0.08) 0, rgba(109, 15, 42, 0.08) 1px, transparent 1px, transparent 22px),
    rgba(255, 253, 248, 0.65);
}

/* Task 37 v1-A: the country-name watermark inside the cover image is gone. */

.country-stat-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: -18px 34px 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 253, 248, 0.94);
  box-shadow: var(--shadow-md);
  position: relative;
  z-index: 4;
  overflow: hidden;
}

.country-stat-bar div {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  padding: 20px 22px;
  border-right: 1px solid var(--line);
}

.country-stat-bar div:last-child {
  border-right: 0;
}

.country-stat-bar .awb-icon {
  width: 30px;
  height: 30px;
  color: var(--wine);
}

.country-stat-bar small {
  display: block;
  margin-bottom: 4px;
  color: var(--article-gray);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.country-stat-bar strong {
  display: block;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: 1;
  font-weight: 400;
}

.country-latest,
.country-insights,
.country-key-cities {
  margin: 32px 0;
}

.country-latest .story-stack {
  width: 100%;
}

.country-key-cities .section-head h2 {
  color: #000;
  font-family: var(--font-listing);
  font-weight: 700;
  letter-spacing: 0.08em; /* task 49/50: Futura always 0.08em */
}

/* Task 51: the folded remainder of a geo card grid ("Show more"). The class
   rule's display:grid would beat the UA [hidden] style, so fold explicitly. */
.country-city-grid--more {
  margin-top: 14px;
}

.country-city-grid[hidden] {
  display: none;
}

.country-key-cities .load-more-wrap {
  margin-top: 16px;
}

/* Institution counts (Michael, 2026-09-07): city and region bars carry five
   cells (place, institutions, museums, galleries, active stories). */
.country-stat-bar--five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.country-insights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.country-insight-card,
.country-key-cities {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 253, 248, 0.82);
  padding: 18px;
  position: relative;
  overflow: hidden;
}

.country-insight-card h2 {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  margin: 0 0 14px;
  color: #000;
  font-family: var(--font-listing);
  font-size: var(--text-lg);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.country-insight-card h2 .awb-icon {
  width: 18px;
  height: 18px;
}

.country-trending-artists .rank-list {
  margin-top: 0;
}

.genre-highlight-card {
  min-height: 300px;
  display: grid;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0.2) 100%),
    var(--genre-image),
    linear-gradient(135deg, #eee6da, #d8ccbb);
  background-size: cover;
  background-position: center;
  color: inherit;
  text-decoration: none;
  position: relative;
}

.genre-highlight-card.no-image {
  background:
    radial-gradient(circle at 72% 24%, rgba(109, 15, 42, 0.14), transparent 28%),
    repeating-linear-gradient(90deg, rgba(109, 15, 42, 0.08) 0, rgba(109, 15, 42, 0.08) 1px, transparent 1px, transparent 22px),
    rgba(251, 247, 239, 0.9);
}

.genre-highlight-image {
  position: absolute;
  inset: 0;
}

.genre-credit {
  left: 14px;
  right: auto;
  bottom: auto;
  top: 14px;
}

.genre-highlight-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin: 0 16px 16px;
  padding: 16px;
  border: 1px solid rgba(222, 213, 202, 0.9);
  border-radius: var(--radius-sm);
  background: rgba(255, 253, 248, 0.94);
  position: relative;
  z-index: 1;
}

.genre-highlight-panel strong {
  display: block;
  color: #000;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: 1.05;
}

/* Task 37 v1-A: the marker before the genre name is the house asterisk ICON
   (same as the Galleries stat), not the "*" character. */
.genre-highlight-name {
  display: inline-flex;
  gap: 9px;
  align-items: center;
}

.genre-highlight-name .awb-icon {
  width: 22px;
  height: 22px;
  color: var(--wine);
  flex: none;
}

.genre-highlight-panel small {
  display: block;
  margin-top: 4px;
  color: var(--article-gray);
}

.genre-gallery-count {
  display: inline-grid;
  grid-template-columns: 28px auto;
  gap: 8px;
  align-items: center;
  color: var(--wine);
}

.genre-gallery-count .awb-icon {
  width: 24px;
  height: 24px;
}

.genre-gallery-count strong {
  font-size: var(--text-3xl);
}

.country-city-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.country-city-card {
  min-height: 112px;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 253, 248, 0.78);
  padding: 16px;
  color: inherit;
  text-decoration: none;
}

.country-city-card:hover,
.country-city-card:focus-visible {
  border-color: rgba(109, 15, 42, 0.26);
  background: var(--paper-2);
}

/* Task 37 v1-A: larger city icons (the Kyoto sample). */
.country-city-icon {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  color: var(--wine);
}

.country-city-icon img,
.country-city-icon .awb-icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.country-city-card strong {
  display: block;
  color: #000;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: 1.05;
}

.country-city-card small {
  display: block;
  margin-top: 6px;
  color: var(--article-gray);
  line-height: 1.25;
}

.country-directory {
  margin: 28px 0 32px;
}

.directory-intro {
  max-width: 760px;
  margin: -6px 0 18px;
  color: var(--muted);
  font-size: var(--text-lg);
}

.directory-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.directory-block {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(255, 253, 248, 0.72)),
    radial-gradient(circle at 92% 8%, rgba(198, 69, 51, 0.08), transparent 24%);
  box-shadow: var(--shadow-md);
  padding: 20px;
  overflow: hidden;
}

.directory-block-wide {
  margin-top: 22px;
}

.directory-block-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(222, 213, 202, 0.78);
}

.directory-block-head > span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--wine);
  background: rgba(251, 247, 239, 0.82);
}

.directory-block-head h2 {
  margin: 0;
  color: var(--wine);
  font-size: var(--text-sm);
  letter-spacing: 0.08em; /* Michael's on-server fix, 2026-09-02 16:50 */
  text-transform: uppercase;
}

.directory-block-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

.directory-block-head > strong {
  min-width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: rgba(109, 15, 42, 0.08);
  color: var(--wine);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-display-weight);
}

.directory-list {
  display: grid;
  gap: 10px;
  max-height: 620px;
  overflow: auto;
  padding-right: 4px;
  scrollbar-width: thin;
}

.directory-list-wide {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-height: none;
}

.directory-more {
  width: 100%;
  margin-top: 14px;
  border: 1px solid rgba(109, 15, 42, 0.22);
  border-radius: var(--radius-pill);
  background: rgba(109, 15, 42, 0.06);
  color: var(--wine);
  padding: 11px 14px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: var(--text-xs);
}

.directory-more:hover {
  background: var(--wine);
  color: #fff;
  border-color: var(--wine);
}

.directory-more .awb-icon {
  width: 15px;
  height: 15px;
}

.directory-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 20px;
  gap: 12px;
  align-items: center;
  min-height: 68px;
  padding: 12px;
  border: 1px solid rgba(222, 213, 202, 0.78);
  border-radius: var(--radius-md);
  background: rgba(251, 247, 239, 0.72);
  color: var(--ink);
  text-decoration: none;
}

.directory-item:hover {
  transform: translateY(-1px);
  border-color: rgba(109, 15, 42, 0.28);
  background: rgba(255, 253, 248, 0.95);
}

.directory-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  color: var(--wine);
  background: rgba(109, 15, 42, 0.07);
}

.directory-icon .awb-icon {
  width: 18px;
  height: 18px;
}

.directory-item strong,
.directory-item small {
  display: block;
}

.directory-item strong {
  font-family: var(--font-listing);
  font-size: var(--text-base);
  line-height: 1.12;
  font-weight: 650;
  color: #000;
}

.directory-item small {
  margin-top: 4px;
  color: var(--listing-meta);
  font-size: var(--text-sm);
}

.directory-external {
  width: 17px;
  height: 17px;
  color: var(--muted);
  justify-self: end;
}

.muted-empty {
  color: var(--muted);
  margin: 0;
}

.link-grid button,
.link-grid span {
  text-align: left;
}

.link-grid span,
.org-item {
  border: 1px solid var(--line);
  background: rgba(251, 247, 239, 0.68);
  border-radius: var(--radius-sm);
  padding: 12px;
}

.org-item {
  display: grid;
  gap: 4px;
  color: var(--ink);
  text-decoration: none;
}

.org-item span {
  color: var(--muted);
  padding: 0;
  border: 0;
  background: transparent;
}

.empty-state {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 28px;
  background: var(--paper-2);
}

.empty-state h1 {
  margin: 10px 0 12px;
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: clamp(34px, 6vw, 52px);
  line-height: 1;
  color: var(--wine);
}

.search-empty-state p {
  max-width: 560px;
  color: var(--muted);
  line-height: 1.55;
}

/* Site search ------------------------------------------------------------- */

.search-form {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  max-width: 620px;
}

.search-form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
}

.search-form input {
  min-width: 0;
  border: 1px solid var(--line);
  border-right: 0;
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
  background: #fff;
  color: var(--ink);
  padding: 0 18px;
  min-height: 50px;
  font-size: var(--text-base); /* >= 16px prevents iOS Safari zoom-on-focus */
}

.search-form button {
  border: 1px solid var(--wine);
  background: var(--wine);
  color: #fff;
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  padding: 0 20px;
  min-height: 50px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.search-form button .awb-icon {
  width: 17px;
  height: 17px;
}

.search-results {
  display: grid;
  gap: 10px;
  margin: 6px 0 32px;
}

.search-hint,
.search-total {
  color: var(--muted);
  max-width: 620px;
  line-height: 1.55;
  margin: 0 0 10px;
}

.search-total {
  color: #000; /* task 54 (Henrik 2026-09-09) */
  font-weight: 700;
}

.search-did-you-mean {
  color: var(--muted);
  max-width: 620px;
  line-height: 1.55;
  margin: 0 0 6px;
  font-size: 0.95rem;
}

.search-did-you-mean b {
  color: var(--wine);
}

.search-did-you-mean-alt {
  color: var(--muted);
}

.search-group {
  margin: 0 0 8px;
}

.search-group .section-head h2 .awb-icon {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  vertical-align: -3px;
}

.search-group-count {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.72em;
}

.search-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 4px 0 14px;
}

.search-pill {
  display: inline-grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.search-pill small {
  font-size: 11px;
  opacity: 0.75;
  white-space: nowrap;
}

.article-figure {
  position: relative;
  overflow: hidden;
  margin: 0 0 18px;
  border-radius: var(--radius-sm);
}

.article-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.05);
}

/* Article detail (public-b46): the hero borrowed .profile-hero's two-column
   grid but articles have no media column, which pinned the title to ~60% of
   the card; the body sat left at a fixed 740px while the figure spanned the
   whole band. The title now spans the card with a fluid size, and figure,
   text, credit and tags share one centered reading column that scales with
   the viewport. Scoped to .article-hero / .article-body-band so the
   read-mode .article-text on story cards keeps its 740px measure. */
.profile-hero.article-hero {
  grid-template-columns: 1fr;
}

.article-hero .profile-copy h1 {
  color: #000;
  font-weight: 400;
}

@media (min-width: 981px) {
  .article-hero .profile-copy h1 {
    font-size: clamp(40px, 3.4vw + 24px, 74px);
  }
}

.article-body-band .article-figure,
.article-body-band .article-text,
.article-body-band .story-tags {
  width: min(100%, 86ch);
  margin-inline: auto;
}

.article-body-band .article-text.article-full-text {
  max-width: none;
}

/* b62/b65 audits: the full-width band ran 85-102 characters per line at
   every desktop width. Capped to a readable measure above 640px (about
   70 characters of the 18-20px body face; ch would be measured against
   the container's 16px font, not the paragraph's). */
@media (min-width: 641px) {
  .article-body-band .article-text.article-full-text {
    max-width: 680px;
    margin-inline: auto;
  }
}

.article-full-text p {
  font-size: clamp(17px, 0.45vw + 11px, 20px);
  line-height: 1.7;
}

/* "Artists in this story" (task #21 follow-up). Sits between the article body
   and Related Stories, and is intentionally LIGHTER than the related cards
   (hairline chips on paper, no elevation) so the page hierarchy reads
   article -> artists -> related. Preserves the paper/wine identity; motion uses
   the shared tokens (auto-zeroed under prefers-reduced-motion). */
.story-artists {
  margin: 30px 0 8px;
}

.story-artists-eyebrow {
  display: block;
  margin: 0 0 14px;
}

.story-artists-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.story-artist-card {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  /* min-width: 0 lets the card fit its grid track; without it the clamped
     blurb's intrinsic width inflates the track and the page scrolls sideways
     on phones (public-b46). */
  min-width: 0;
  min-height: 44px;
  padding: 15px 17px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 253, 248, 0.6);
  color: inherit;
  text-decoration: none;
  transition:
    border-color var(--motion-fast) var(--ease-out),
    background var(--motion-fast) var(--ease-out);
}

.story-artist-card:hover,
.story-artist-card:focus-visible {
  border-color: var(--wine);
  background: var(--paper-2);
}

.story-artist-thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--paper-2);
  border: 1px solid var(--line);
}

.story-artist-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Monogram fallback: initials on wine, paper text (used whenever the image is
   absent or rights-suppressed). */
.story-artist-mono {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: var(--wine);
  color: var(--paper-2);
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: 22px;
  letter-spacing: 0.02em;
}

.story-artist-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.story-artist-name {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: var(--text-lg);
  line-height: 1.15;
  color: var(--wine);
}

.story-artist-card:hover .story-artist-name,
.story-artist-card:focus-visible .story-artist-name {
  color: var(--rust);
}

.story-artist-life {
  color: var(--muted);
  font-size: var(--text-sm);
}

.story-artist-blurb {
  color: var(--ink);
  font-size: var(--text-sm);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.story-artist-credit {
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--text-xs);
  /* Credits can carry long unbroken filenames/URLs; without a break they
     overflow the card and force sideways scrolling on phones (public-b46). */
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .story-artists-grid {
    /* minmax(0, ...) pins the track to the grid width; a bare 1fr keeps an
       'auto' minimum that lets card content stretch it past the screen. */
    grid-template-columns: minmax(0, 1fr);
  }
}

.newsletter-panel {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) minmax(330px, 0.8fr);
  gap: 24px;
  align-items: center;
  margin: 34px 0 28px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(90deg, rgba(255,253,248,0.95), rgba(255,253,248,0.78)),
    repeating-linear-gradient(135deg, rgba(109,15,42,0.06) 0, rgba(109,15,42,0.06) 1px, transparent 1px, transparent 16px);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

.newsletter-emblem {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--wine);
  border-radius: var(--radius-sm);
  box-shadow: 8px 8px 0 rgba(109, 15, 42, 0.09);
}

.newsletter-emblem .awb-icon {
  width: 34px;
  height: 34px;
}

.newsletter-copy h2 {
  margin: 7px 0 8px;
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: var(--text-3xl);
  line-height: 1.05;
  color: #000; /* task 49: text is #000 or #666, burgundy only on hover */
}

/* Task 49: no corner ornament on the newsletter panel. */
.newsletter-panel::before,
.newsletter-panel::after {
  content: none;
}

.newsletter-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.newsletter-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0;
  align-items: stretch;
  /* Sit above the panel's decorative corner ornament (::before). */
  position: relative;
  z-index: 1;
}

.newsletter-form label {
  display: grid;
}

.newsletter-form label span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.newsletter-form input {
  min-width: 0;
  border: 1px solid var(--line);
  border-right: 0;
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
  background: #fff;
  color: var(--ink);
  padding: 0 18px;
  min-height: 50px;
  font-size: var(--text-base); /* >= 16px prevents iOS Safari zoom-on-focus */
}

.newsletter-form button {
  border: 1px solid var(--wine);
  background: var(--wine);
  color: #fff;
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  padding: 0 18px;
  min-height: 50px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--text-sm);
  font-weight: 700;
}

.newsletter-form button .awb-icon {
  width: 17px;
  height: 17px;
}

.newsletter-message {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  color: var(--wine);
  font-weight: 700;
}

.newsletter-message:empty {
  margin: 0;
}

/* Newsletter v2: multi-field signup (name/email/country/frequency) and the
   inline "check your inbox" code-verification step. */
.newsletter-form.newsletter-form-v2,
.newsletter-form.newsletter-form-verify,
.newsletter-form.newsletter-form-done {
  grid-template-columns: 1fr;
  gap: 12px;
  align-content: center;
}

.newsletter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.newsletter-grid label {
  display: grid;
}

.newsletter-form-v2 input,
.newsletter-form-v2 select {
  min-width: 0;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--ink);
  padding: 0 18px;
  min-height: 50px;
  font-size: var(--text-base); /* >= 16px prevents iOS Safari zoom-on-focus */
  font-family: inherit;
}

.newsletter-form-v2 select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d0f2a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  padding-right: 42px;
  cursor: pointer;
}

.newsletter-form-v2 > button {
  border-radius: var(--radius-pill);
  width: 100%;
}

.newsletter-verify-note {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.newsletter-verify-note strong {
  color: var(--ink);
  overflow-wrap: anywhere;
}

.newsletter-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
}

.newsletter-code-row label {
  display: grid;
}

.newsletter-code-row label span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.newsletter-code-row input {
  font-weight: 700;
  letter-spacing: 0.18em;
}

.newsletter-success {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0;
  padding: 16px 18px;
  border: 1px solid rgba(109, 15, 42, 0.24);
  border-radius: var(--radius-sm);
  background: rgba(109, 15, 42, 0.05);
  color: var(--ink);
  line-height: 1.5;
}

.newsletter-success .awb-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--wine);
}

/* Standalone confirm/unsubscribe result pages (rendered without client JS). */
.newsletter-result {
  max-width: 620px;
  margin: 34px auto;
  text-align: center;
}

.newsletter-result-emblem {
  width: 74px;
  height: 74px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--wine);
  border-radius: var(--radius-sm);
  box-shadow: 8px 8px 0 rgba(109, 15, 42, 0.09);
}

.newsletter-result.is-error .newsletter-result-emblem {
  background: var(--muted);
  box-shadow: 8px 8px 0 rgba(111, 100, 97, 0.14);
}

.newsletter-result-emblem .awb-icon {
  width: 34px;
  height: 34px;
}

.newsletter-result h2 {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: var(--text-3xl);
  color: var(--wine);
  margin: 0 0 10px;
}

.newsletter-result p {
  color: var(--muted);
  line-height: 1.55;
}

/* Patch D (D3): dark site-wide footer — deep ink with a wine-tinted wash,
   paper text, rust accents. All text tones hold >= 4.5:1 on the ink ground. */
.site-footer {
  margin-top: 44px;
  border-top: 3px solid var(--wine);
  background:
    radial-gradient(circle at 90% 0%, rgba(109, 15, 42, 0.4), transparent 44%),
    linear-gradient(180deg, #251a1d, #1d1718);
  color: rgba(251, 247, 239, 0.85);
}

.footer-inner {
  padding: 40px 0 20px;
}

.footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}

.footer-brand {
  display: grid;
  gap: 14px;
}

.footer-logo {
  cursor: pointer;
}

.site-footer .brand {
  color: #fbf7ef;
}

.footer-logo .brand-title {
  font-size: var(--text-4xl);
  color: #fbf7ef;
}

.footer-logo .brand-mark {
  margin-top: 2px;
}

.site-footer .brand-sub {
  color: #c9b878;
}

.footer-brand p {
  margin: 0;
  max-width: 400px;
  color: rgba(251, 247, 239, 0.66);
  line-height: 1.55;
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

/* Task 53 (Henrik 2026-09-08): Futura, 16px, 0.08em. The spec's #000000 would
   disappear on the dark footer, so the headings take the footer's paper tone. */
.footer-col h2 {
  margin: 0 0 10px;
  font-family: var(--font-listing);
  font-size: var(--text-base);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fbf7ef;
}

.footer-col a {
  display: flex;
  align-items: center;
  min-height: 40px;
  color: rgba(251, 247, 239, 0.88);
  text-decoration: none;
  border-bottom: 1px solid rgba(251, 247, 239, 0.08);
}

.footer-col a:hover,
.footer-col a:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.site-footer :focus-visible {
  outline-color: #e07856;
}

.footer-involve {
  margin: 30px 0 0;
  padding: 16px 20px;
  border: 1px solid rgba(251, 247, 239, 0.16);
  border-radius: var(--radius-sm);
  background: rgba(109, 15, 42, 0.28);
  color: rgba(251, 247, 239, 0.88);
  line-height: 1.5;
}

.footer-involve a {
  color: #fbf7ef;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-involve a:hover,
.footer-involve a:focus-visible {
  color: #fff;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: rgba(251, 247, 239, 0.58);
  font-size: var(--text-sm);
  border-top: 1px solid rgba(251, 247, 239, 0.14);
  padding-top: 16px;
  margin-top: 26px;
}

.footer-company-line::after {
  content: " - CH Reg No. 17437345";
}

/* Small desktop / large tablet (981-1220px): relax the fixed rail and the
   profile hero image column so body text is not squeezed. Percentage maxes
   (~330px / ~420px at 1220px) let both columns actually shrink with the
   viewport, bottoming out at 280px / 300px. */
@media (min-width: 981px) and (max-width: 1220px) {
  /* b62 mobile audit: at 1024 the copy column is ~430px, so a 92px
     "Contemporary" broke mid-word. 15.5cqw keeps the longest common title
     word on one line; 1221px and up keep the full-size clamp. */
  .country-cover h1 {
    font-size: clamp(56px, min(9vw, 20cqw), 126px);
  }

  .front-grid {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 28%);
  }

  .profile-hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, 35%);
  }

  .country-city-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .page {
    padding: 16px;
  }

  main.page {
    padding-top: 16px;
  }

  .front-grid,
  .profile-hero,
  .country-cover,
  .country-insights,
  .directory-columns {
    grid-template-columns: 1fr;
  }

  .artist-stat-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: -18px 12px 28px;
  }

  .artist-stat-card {
    grid-template-columns: 30px 1fr;
    gap: 4px 10px;
    min-height: 126px;
    padding: 16px;
  }

  .artist-stat-card .awb-icon {
    width: 27px;
    height: 27px;
  }

  .artist-stat-card strong {
    font-size: var(--text-3xl);
  }

  .artist-stat-card span {
    font-size: var(--text-sm);
  }

  /* Patch D: the header keeps ONE row on small screens — brand left, search
     + date right (the nav pills are gone; the footer carries navigation). */
  .header-inner {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    padding: 8px 0 14px;
  }

  /* Patch G2/#25: the long "ARTWORLDBRIEF" wordmark in Fraunces must share one
     row with the search icon + date. This clamp keeps it readable on tablets
     (caps at 26px) while shrinking on phones so it never overlaps the search or
     date blocks — verified no overlap down to 360px. The logo mark carries the
     brand identity when the wordmark is small. */
  .brand-title {
    font-size: clamp(16px, 4.5vw, 27px);
  }

  .footer-logo .brand-title {
    font-size: clamp(22px, 7vw, 32px);
  }

  .brand {
    grid-template-columns: 32px 1fr;
    gap: 8px;
  }

  .brand-mark {
    width: 32px;
    height: 32px;
    margin-top: 0;
  }

  .masthead-note {
    min-width: 0;
    display: grid;
    gap: 3px;
    justify-items: end;
    text-align: right;
    padding-top: 0;
  }

  .masthead-note span:first-child {
    font-size: 11px;
    letter-spacing: 0.08em;
  }

  .masthead-note span:last-child {
    font-size: 11px;
  }

  .top-nav {
    padding-top: 0;
  }

  /* Touch targets: interactive controls get a >= 44px effective hit area. */
  .round-icon {
    width: 44px;
    height: 44px;
  }

  .icon-link {
    min-height: 44px;
    min-width: 44px;
    justify-content: center;
  }

  .pill-button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .rank-item,
  .directory-more,
  .footer-col a,
  .footer-involve a {
    min-height: 44px;
  }

  .link-grid button,
  .link-grid a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .link-grid a.listing-link {
    display: grid;
  }

  .text-action,
  .hero-link,
  .report-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .breadcrumb button,
  .breadcrumb a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .breadcrumb,
  .country-breadcrumb {
    margin-bottom: 10px;
  }

  .story-open-link {
    width: 44px;
    height: 44px;
  }

  .hero {
    min-height: 380px;
    background-image:
      linear-gradient(0deg, rgba(251, 247, 239, 0.98) 0%, rgba(251, 247, 239, 0.88) 46%, rgba(251, 247, 239, 0.14) 100%),
      var(--hero-image);
    background-position: center top;
  }

  /* Corner brackets: smaller and tucked left of the shade's 20px text inset
     (stroke ends at x=16), with enough shade top clearance (58px > 14+30px)
     that the headline can never ride into the top bracket, however tall the
     shade grows (long headlines, no-image heroes).
     Client task #25 ("bracket in the lower left corner is too close to text"):
     the bottom bracket keeps a full caption band to itself — 86px of shade
     bottom padding against a bracket box that ends at 44+30=74px — so the CTA
     never sits on the bracket stroke. The image credit shares that band on the
     right. */
  .hero::before {
    left: 14px;
    top: 14px;
  }

  .hero::after {
    left: 14px;
    bottom: 44px; /* clear of the overlapping signal strip (-34px) */
  }

  .hero-shade {
    padding: 58px 20px 86px;
  }

  .hero .hero-credit {
    right: 16px;
    bottom: 44px;
    max-width: min(78%, 520px);
  }

  .hero h1,
  .profile-copy h1 {
    font-size: clamp(34px, 10vw, 45px);
  }

  .artist-identity {
    margin-bottom: 28px;
    font-size: var(--text-2xl) !important;
  }

  .hero p,
  .profile-copy p {
    font-size: var(--text-lg);
  }

  .country-cover {
    min-height: 0;
    /* minmax(0, 1fr) instead of 1fr: the track may shrink below the
       min-content width of the title (b62 mobile audit, genre pages). */
    grid-template-columns: minmax(0, 1fr);
  }

  .country-cover-copy {
    padding: 34px 22px 24px;
  }

  .country-cover h1 {
    /* 15cqw of the copy column (content box) keeps "Contemporary", about 6.45em wide in Fraunces, on one line at 360-430. */
    font-size: clamp(36px, min(13vw, 13.5cqw), 72px);
    letter-spacing: 0;
    overflow-wrap: break-word;
  }

  .country-cover p {
    font-size: var(--text-lg);
  }

  .country-cover-art {
    min-height: 230px;
    order: -1;
  }

  /* Michael 2026-09-08: the 48px rule dated from the old decorative cover
     span; the only span left in the cover art is the image credit, which
     rendered huge on phones (region/country/city/genre pages). */
  .country-cover-art span {
    font-size: 8px;
  }

  .country-stat-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: -10px 12px 24px;
  }

  .country-stat-bar div {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 16px;
  }

  .country-stat-bar div:nth-last-child(-n+2) {
    border-bottom: 0;
  }

  /* Five cells fold to 2 + 2 + 1, the last one spanning the row. */
  .country-stat-bar--five div:nth-last-child(2) {
    border-bottom: 1px solid var(--line);
  }

  .country-stat-bar--five div:last-child {
    grid-column: 1 / -1;
  }

  .country-stat-bar strong {
    font-size: var(--text-2xl);
  }

  .genre-highlight-panel {
    grid-template-columns: 1fr;
  }

  .genre-gallery-count {
    justify-self: start;
  }

  .country-city-grid {
    grid-template-columns: 1fr;
  }

  .directory-list,
  .directory-list-wide {
    grid-template-columns: 1fr;
    max-height: none;
  }

  .directory-block-head {
    grid-template-columns: 38px minmax(0, 1fr) auto;
  }

  /* Tablet (641-980px): story cards stay side-by-side with ~40% image column. */
  .story-card,
  .story-card.compact {
    grid-template-columns: 40% minmax(0, 1fr);
  }

  .story-card.full-width-no-image {
    grid-template-columns: minmax(0, 1fr);
  }

  .story-copy,
  .story-card.featured .story-copy {
    padding: 20px 20px 20px 0;
  }

  .story-card.full-width-no-image .story-copy {
    padding: 30px;
  }

  .story-copy h3,
  .story-card.compact .story-copy h3 {
    font-size: var(--text-2xl);
  }

  .story-media,
  .story-card.compact .story-media {
    min-height: 220px;
  }

  .profile-image {
    min-height: 260px;
  }

  .newsletter-panel,
  .footer-brand {
    grid-template-columns: 1fr;
  }

  .newsletter-panel {
    gap: 16px;
  }

  .newsletter-form {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .newsletter-form input,
  .newsletter-form button {
    border-radius: var(--radius-pill);
    border: 1px solid var(--line);
  }

  .newsletter-form button {
    border-color: var(--wine);
  }

  /* Once inputs/buttons become standalone pills, keep the code row spaced. */
  .newsletter-code-row {
    gap: 10px;
  }

  .footer-bottom {
    display: grid;
  }
}

/* Phones (<= 640px): single-column signal strip and stacked story cards. */
@media (max-width: 640px) {
  /* #25 (client's own suggestion): on phones the DAILY BRIEF / date block moves
     under the brand strapline instead of fighting the search
     icon for room on the wordmark row. Still one header block — brand left,
     search alone on the right, date beneath, left-aligned with the wordmark.
     Desktop is untouched (date far right). */
  .header-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand search"
      "date  date";
    column-gap: 10px;
    row-gap: 6px;
  }

  /* Scoped to .header-inner: .brand is reused by the footer logo, where a
     grid-area name that its parent grid does not define would spawn an implicit
     max-content column and push the footer past the viewport. */
  .header-inner .brand {
    grid-area: brand;
  }

  .header-inner .top-nav {
    grid-area: search;
  }

  .header-inner .masthead-note {
    grid-area: date;
    display: flex;
    align-items: baseline;
    gap: 8px;
    /* logo mark (32px) + .brand column gap (8px): flush under the wordmark. */
    padding-left: 40px;
    text-align: left;
  }

  .header-inner .masthead-note span:first-child {
    font-size: 11px;
  }

  .header-inner .masthead-note span:last-child {
    font-size: 13px;
  }

  /* With the date out of the row the wordmark can breathe again — it had been
     clamped right down to fit three blocks on one line (task #25: "search logo
     is in top of text"). */
  .header-inner .brand-title {
    font-size: clamp(18px, 5.2vw, 28px);
  }

  .signal-strip {
    grid-template-columns: 1fr;
    margin: -18px 12px 24px;
  }

  .signal-strip div {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 14px 16px;
  }

  .signal-strip div:last-child {
    border-bottom: 0;
  }

  /* Newsletter v2: stack the field grid; keep 50px pill targets. */
  .newsletter-grid {
    grid-template-columns: 1fr;
  }

  .newsletter-code-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .story-card,
  .story-card.compact {
    grid-template-columns: 1fr;
  }

  /* Stacked cards: media spans the full card width, so aspect-ratio gives it
     a stable intrinsic height before the (lazy) image arrives — no CLS. */
  .story-media {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .story-card.compact .story-media {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .story-copy,
  .story-card.featured .story-copy {
    padding: 20px;
  }

  /* --- Decorative corner brackets, phone sizes (collision fixes) --------- */

  /* Hero: 24px brackets at 14px offsets (box ends at 38px; strokes at
     14-16px, left of the shade's 20px text inset). 52px shade top clearance
     keeps the headline below the top bracket at any hero height; 68px bottom
     padding keeps the CTA above the bottom bracket (box ends at 30+24=54px)
     AND above the image-credit pill that shares the band — client task #25. */
  .hero::before,
  .hero::after {
    width: 24px;
    height: 24px;
  }

  .hero::after {
    bottom: 30px; /* the phone signal strip only overlaps the bottom 18px */
  }

  .hero-shade {
    padding: 52px 20px 68px;
  }

  .hero .hero-credit {
    right: 14px;
    bottom: 30px;
    max-width: 78%;
  }

  /* Long titles: fluid instead of a fixed 45px so a 12-word headline stays
     imposing but bounded (<= 4 lines at 360-414px viewports). */
  .hero h1 {
    font-size: clamp(26px, 7.2vw, 42px);
    line-height: 1.04;
  }

  /* Country cover: shrink both brackets and pull them into the padding zone
     (copy text sits at 22px right / 48px bottom insets, clear of the 24px
     bracket boxes at 12-14px offsets). */
  .country-cover::before,
  .country-cover::after {
    width: 24px;
    height: 24px;
  }

  .country-cover::before {
    left: 14px;
    top: 14px;
  }

  .country-cover::after {
    right: 12px;
    bottom: 12px;
  }

  .country-cover-copy {
    padding: 34px 22px 48px;
  }

  /* Rail sections: at 360px the longest rail heading ("Trending Countries")
     came within 7px of the top-right bracket, so it tucks tighter into the
     corner and loses 4px (measured clearance 13px at 360px). */
  .rail-section::after {
    right: 10px;
    top: 10px;
    width: 12px;
    height: 12px;
  }

  /* Story cards without media (expanded, no image): the bracket would sit on
     the copy text, so it goes away — the motif stays on image cards. */
  .story-card.full-width-no-image::before {
    content: none;
  }

  /* --- Latest Stories carousel (home page only, via modifier class) ------ */

  /* The overflow container clips the slides; keep the grid column itself
     shrinkable so the page never scrolls horizontally. */
  .front-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .main-column {
    min-width: 0;
  }

  .story-stack--carousel {
    grid-auto-flow: column;
    grid-auto-columns: min(80vw, 340px);
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 0 14px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .story-stack--carousel::-webkit-scrollbar {
    display: none;
  }

  .story-stack--carousel .story-card {
    scroll-snap-align: center;
  }

  /* Uniform slides: one shared media ratio + clamped standfirst, and the
     single implicit grid row equalises card heights, so the row never
     jiggles while swiping. */
  .story-stack--carousel .story-card .story-media,
  .story-stack--carousel .story-card.compact .story-media {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .story-stack--carousel .story-teaser p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
  }

  /* Slides link out to the article page instead of expanding in place. */
  .story-stack--carousel .story-card [data-expand] {
    display: none;
  }

  .story-stack--carousel .story-card .story-read-link {
    display: inline-flex;
  }

  .story-carousel-indicator {
    display: block;
    min-height: 20px;
    margin-top: 2px;
    text-align: center;
    color: var(--muted);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  /* "See more stories": full-width pill under the carousel. */
  .load-more-button {
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }

  .load-more-label--desktop {
    display: none;
  }

  .load-more-label--mobile {
    display: inline;
  }
}

/* Community contribution panel (Phase 3B) ---------------------------------- */

.contribute-panel {
  margin: 0 0 28px;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
}

.contribute-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px; /* touch target */
  color: #000;
  font-family: var(--font-listing);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contribute-toggle .awb-icon {
  width: 16px;
  height: 16px;
  transition: transform var(--motion-fast) var(--ease-out);
}

.contribute-body {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-2);
  padding: 24px;
}

.contribute-intro {
  margin: 0 0 16px;
  color: var(--article-gray);
  line-height: 1.5;
}

.contribute-article-title {
  margin: -4px 0 10px;
  max-width: 980px;
  color: #000;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
}

.contribute-article-help {
  margin: 0 0 18px;
  color: var(--article-gray);
  line-height: 1.5;
}

.contribute-form {
  display: grid;
  gap: 14px;
}

.contribute-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.contribute-grid label,
.contribute-note {
  display: grid;
  gap: 6px;
}

.contribute-grid label span,
.contribute-note span,
.contribute-type legend {
  /* Task 49: field names are Futura, regular (not bold), 12px, 0.08em. */
  font-family: var(--font-listing);
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--article-gray); /* task 35: #666666 for everything below the header */
}

.contribute-grid input,
.contribute-note textarea {
  min-width: 0;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--article-gray);
  padding: 12px 14px;
  min-height: 48px;
  font-size: var(--text-base); /* >= 16px prevents iOS Safari zoom-on-focus */
  font-family: inherit;
}

.contribute-note textarea {
  resize: vertical;
  line-height: 1.5;
}

.contribute-type {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 20px;
}

.contribute-type legend {
  grid-column: 1 / -1;
  padding: 0;
  margin: 0 0 0;
}

.contribute-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-base);
  color: var(--ink);
  min-height: 22px;
}

.contribute-type .contribute-radio {
  display: inline-flex;
  align-items: center;
}

.contribute-radio input {
  width: 18px;
  height: 18px;
  accent-color: var(--wine);
}

.contribute-actions button {
  border: 1px solid var(--article-burgundy);
  background: var(--article-burgundy);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 0 22px;
  min-height: 48px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--text-sm);
  font-weight: 700;
}

.contribute-actions button .awb-icon {
  width: 16px;
  height: 16px;
}

.contribute-message {
  grid-column: 1 / -1;
  margin: 0;
}

.contribute-success {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--ink);
}

.contribute-success:focus {
  outline: none;
}

.contribute-success .awb-icon {
  width: 22px;
  height: 22px;
  color: var(--wine);
  flex: none;
  margin-top: 2px;
}

.contribute-success p {
  margin: 0;
  line-height: 1.5;
}

/* Spam honeypot: visually removed, still in the accessibility-hidden DOM so
   naive bots fill it. aria-hidden + tabindex=-1 keep it away from real users. */
.contribute-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 640px) {
  .contribute-grid {
    grid-template-columns: 1fr;
  }

  .contribute-actions button {
    width: 100%;
  }

  .contribute-body {
    padding: 18px;
  }

  .contribute-type {
    gap: 8px 12px;
  }
}

/* Motion system (Phase 4A) -------------------------------------------------
   Quiet, editorial, token-driven. Everything here collapses to ~0ms under
   prefers-reduced-motion (tokens are zeroed and animations disabled), and the
   JS-dependent pieces are additionally gated behind html.awb-motion /
   html.awb-entrance classes set by an inline head script only when the
   visitor does NOT prefer reduced motion. */

/* 1. Shared hover/press transitions: no interactive control snaps at 0ms. */
.icon-link,
.round-icon,
.pill-button,
.rank-item,
.link-grid button,
.link-grid a,
.footer-col a,
.footer-involve a,
.load-more-button,
.directory-more,
.directory-item,
.story-open-link,
.story-title-link,
.hero-link,
.text-action,
.breadcrumb a,
.breadcrumb button,
.search-form button,
.newsletter-form button,
.contribute-actions button,
.story-tags a {
  transition:
    background-color var(--motion-base) var(--ease-out),
    border-color var(--motion-base) var(--ease-out),
    color var(--motion-base) var(--ease-out),
    box-shadow var(--motion-base) var(--ease-out),
    transform var(--motion-fast) var(--ease-out);
}

/* Transform needs a box; the title link is otherwise inline. */
.story-title-link,
.hero-title-link {
  display: inline-block;
}

/* 2. Press feedback on pills, buttons and card links. */
.icon-link:active,
.round-icon:active,
.pill-button:active,
.rank-item:active,
.link-grid button:active,
.link-grid a:active,
.footer-col a:active,
.load-more-button:active,
.directory-more:active,
.directory-item:active,
.story-open-link:active,
.story-title-link:active,
.hero-link:active,
.text-action:active,
.search-form button:active,
.newsletter-form button:active,
.contribute-actions button:active,
.story-tags a:active {
  transform: scale(0.98);
}

/* 3. First-paint entrance: one-time staggered fade/rise for story cards and
   rail sections. html.awb-entrance is set by the inline head script before
   first paint and removed by app.js once the entrance has played, so SPA
   re-renders never re-animate. fill-mode backwards means the resting state is
   the element's natural style (SSR without app.js still ends fully visible). */
@keyframes awb-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

html.awb-entrance .story-stack .story-card,
html.awb-entrance .rail-section {
  animation: awb-rise var(--motion-slow) var(--ease-out) backwards;
}

html.awb-entrance .story-stack .story-card:nth-child(2) { animation-delay: 30ms; }
html.awb-entrance .story-stack .story-card:nth-child(3) { animation-delay: 60ms; }
html.awb-entrance .story-stack .story-card:nth-child(4) { animation-delay: 90ms; }
html.awb-entrance .story-stack .story-card:nth-child(5) { animation-delay: 120ms; }
html.awb-entrance .story-stack .story-card:nth-child(6) { animation-delay: 150ms; }
html.awb-entrance .rail-section:nth-child(1) { animation-delay: 90ms; }
html.awb-entrance .rail-section:nth-child(2) { animation-delay: 180ms; }

/* Cap the stagger at ~8 animated items; anything further down simply appears. */
html.awb-entrance .story-stack .story-card:nth-child(n + 7),
html.awb-entrance .rail-section:nth-child(n + 3) {
  animation: none;
}

/* 4. Expand/collapse primitive: grid-template-rows 0fr -> 1fr, ending at an
   auto-equivalent height. visibility rides along so collapsed content leaves
   the accessibility tree and tab order (and is announced correctly). */
.awb-collapse {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition:
    grid-template-rows var(--motion-base) var(--ease-out),
    visibility var(--motion-base) var(--ease-out);
}

.awb-collapse.is-open {
  grid-template-rows: 1fr;
  visibility: visible;
}

.awb-collapse > .awb-collapse-inner {
  min-height: 0;
  overflow: hidden;
}

/* Directory "show more": cancel the list's grid gap while collapsed; the
   spacing comes back via the inner grid's own padding when open. */
.directory-more-items {
  margin-top: -10px;
}

.directory-more-grid {
  display: grid;
  gap: 10px;
  padding-top: 10px;
}

/* 5. Image load-in: lazy images fade instead of popping. Opacity 0 applies
   only under html.awb-motion (JS confirmed), and a 1ms fallback animation
   force-reveals images after 2.5s even if app.js never marks them loaded. */
img {
  transition: opacity var(--motion-slow) var(--ease-out);
}

@keyframes awb-img-reveal {
  to { opacity: 1; }
}

html.awb-motion img:not(.is-loaded) {
  opacity: 0;
  animation: awb-img-reveal 1ms var(--ease-out) 2.5s forwards;
}

/* 6. SPA route transitions: plain crossfade via the View Transitions API
   (app.js only calls startViewTransition when supported and motion is OK). */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--motion-base);
}

/* 7. Reduced motion: zero every duration, kill entrance + image fade. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0.01ms;
    --motion-base: 0.01ms;
    --motion-slow: 0.01ms;
  }

  html.awb-entrance .story-stack .story-card,
  html.awb-entrance .rail-section {
    animation: none;
  }

  html.awb-motion img:not(.is-loaded) {
    opacity: 1;
    animation: none;
  }
}

/* ==========================================================================
   Patch D — homepage restructure + index/placeholder pages.
   ========================================================================== */

/* --- Featured Story card (D1): eyebrow + large horizontal card, image on
   the RIGHT (~45%) on desktop, stacked on phones. ------------------------- */
.featured-story {
  margin: 0 0 28px;
}

.featured-story-eyebrow {
  margin-bottom: 12px;
}

.featured-story .story-card {
  grid-template-columns: minmax(0, 1fr) 45%;
}

.featured-story .story-card .story-media {
  grid-column: 2;
  grid-row: 1;
}

.featured-story .story-card .story-copy {
  grid-column: 1;
  grid-row: 1;
  padding: 30px 0 28px 30px;
}

.featured-story .story-card.full-width-no-image {
  grid-template-columns: minmax(0, 1fr);
}

.featured-story .story-card.full-width-no-image .story-copy {
  grid-column: 1;
  padding: 30px;
}

@media (max-width: 980px) and (min-width: 641px) {
  .featured-story .story-card {
    grid-template-columns: minmax(0, 1fr) 40%;
  }

  .featured-story .story-card .story-copy {
    padding: 20px 0 20px 20px;
  }
}

@media (max-width: 640px) {
  .featured-story .story-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .featured-story .story-card .story-media {
    grid-column: 1;
    grid-row: 1;
  }

  .featured-story .story-card .story-copy {
    grid-column: 1;
    grid-row: 2;
    padding: 20px;
  }
}

/* --- Latest Stories now spans the full page width (the home rail is gone;
   trending moved to its own side-by-side section below). ------------------ */
.home-latest {
  margin: 0 0 10px;
}

.home-latest .main-column {
  min-width: 0;
}

/* Local Inspiration ---------------------------------------------------------
   A single calm way into the feed: before Latest Stories on desktop and just
   before Trending Artists on phones. See src/local-inspiration.mjs for the
   location and country/region selection logic. */
.local-inspiration-slot {
  margin: 26px 0 22px;
}

.local-inspiration-slot:empty {
  display: none;
}

.local-inspiration-slot--mobile {
  display: none;
}

.local-inspiration {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(29, 26, 23, 0.14);
  border-left: 4px solid var(--wine);
  border-radius: var(--radius-sm);
  background: rgba(255, 253, 248, 0.92);
  box-shadow: 0 8px 24px rgba(29, 26, 23, 0.06);
}

.local-inspiration-link {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  min-height: 92px;
  padding: 16px 24px 16px 20px;
  color: var(--ink);
  text-decoration: none;
  transition: background-color var(--motion-fast), box-shadow var(--motion-fast);
}

.local-inspiration-link:hover {
  background: rgba(109, 15, 42, 0.035);
}

.local-inspiration-link:focus-visible {
  outline: 2px solid var(--wine);
  outline-offset: -4px;
}

.local-inspiration-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(109, 15, 42, 0.16);
  border-radius: 50%;
  background: rgba(109, 15, 42, 0.06);
  color: var(--wine);
}

.local-inspiration-icon .awb-icon {
  width: 21px;
  height: 21px;
}

.local-inspiration-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.local-inspiration-label {
  color: var(--article-gray); /* task 50: Futura #666666 */
  font-family: var(--font-listing);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.local-inspiration-copy strong {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: var(--font-display-weight);
  line-height: 1.12;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.local-inspiration-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-right: 8px;
  color: var(--wine);
  font-size: var(--text-sm);
  font-weight: 700;
  white-space: nowrap;
}

.local-inspiration-action .awb-icon {
  width: 18px;
  height: 18px;
  transition: transform var(--motion-fast);
}

.local-inspiration-link:hover .local-inspiration-action .awb-icon {
  transform: translateX(3px);
}

/* "Explore country" banner (tasks 42/43): the Local Inspiration strip with the
   country's icon tile on the right edge. */
.explore-country {
  margin: 0 0 24px;
}

.explore-country .local-inspiration-link {
  grid-template-columns: 46px minmax(0, 1fr) auto 52px;
}

.explore-country-emblem {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-2);
  color: var(--wine);
}

.explore-country-emblem img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.explore-country-emblem .awb-icon {
  width: 24px;
  height: 24px;
}

/* --- Trending Artists | Trending Countries (D1): two panels side by side,
   single column on phones. Reuses the rail-section panel + rank rows. ----- */
.trending-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin: 24px 0 10px;
}

.trending-col h2 {
  margin: 0;
  display: inline-flex;
  gap: 9px;
  align-items: center;
  color: #000;
  font-family: var(--font-listing);
  font-size: var(--text-base);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.trending-col h2 .awb-icon {
  width: 18px;
  height: 18px;
}

@media (max-width: 640px) {
  .local-inspiration-slot--desktop {
    display: none;
  }

  .local-inspiration-slot--mobile {
    display: block;
    margin: 20px 0 16px;
  }

  .local-inspiration-slot--mobile:empty {
    display: none;
  }

  .local-inspiration-link {
    grid-template-columns: 40px minmax(0, 1fr) 22px;
    gap: 12px;
    min-height: 84px;
    padding: 14px 14px 14px 12px;
  }

  .local-inspiration-icon {
    width: 40px;
    height: 40px;
  }

  .local-inspiration-copy strong {
    font-size: 20px;
  }

  .local-inspiration-action {
    padding: 0;
  }

  .local-inspiration-action span {
    display: none;
  }

  .trending-duo {
    grid-template-columns: 1fr;
  }
}

/* --- Daily Brief (Michael #2, 2026-07-31): the client-authored brief replaces
   the featured story. White editorial panel on the paper page, Fraunces title,
   wine hairlines between story sections, same corner-bracket motif as cards. */
.daily-brief {
  position: relative;
  margin: 26px 0 28px;
  padding: clamp(26px, 4vw, 44px) clamp(22px, 4vw, 48px);
  background: #fff;
  border: 1px solid rgba(29, 26, 23, 0.12);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.daily-brief-eyebrow {
  margin-bottom: 14px;
}

.daily-brief-title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: clamp(1.55rem, 3.2vw, 2.3rem);
  line-height: 1.12;
  color: var(--ink);
  text-wrap: balance;
}

.daily-brief-intro p {
  margin: 0 0 12px;
  font-size: var(--text-lg);
  line-height: 1.6;
  color: rgba(29, 26, 23, 0.82);
}

.daily-brief-intro p:last-child {
  margin-bottom: 0;
}

.daily-brief-sections {
  margin-top: 22px;
  display: grid;
  gap: 22px;
}

.daily-brief-story {
  padding-top: 22px;
  border-top: 1px solid rgba(109, 15, 42, 0.16);
}

.daily-brief-story h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: var(--text-xl);
  line-height: 1.2;
}

.daily-brief-story h3 a {
  color: var(--ink);
  text-decoration: none;
}

.daily-brief-story h3 a:hover,
.daily-brief-story h3 a:focus-visible {
  color: var(--wine);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.daily-brief-story p {
  margin: 0 0 10px;
  line-height: 1.65;
  color: rgba(29, 26, 23, 0.78);
}

.daily-brief-story strong {
  color: var(--ink);
  font-weight: 650;
}

.daily-brief-readmore {
  margin: 2px 0 0;
}

.daily-brief-readmore a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--wine);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  letter-spacing: 0.01em;
}

.daily-brief-readmore a:hover,
.daily-brief-readmore a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.daily-brief-readmore .awb-icon {
  width: 14px;
  height: 14px;
}

@media (max-width: 640px) {
  .daily-brief {
    /* keep the corner bracket >=8px clear of the eyebrow (bracket audit #25) */
    padding-top: 46px;
  }

  .daily-brief::before {
    left: 12px;
    top: 12px;
    width: 16px;
    height: 16px;
  }
}

/* --- Brief split (2026-08-03): homepage teaser + dedicated /brief page. --- */
.daily-brief--teaser .daily-brief-title a {
  color: inherit;
  text-decoration: none;
}

.daily-brief--teaser .daily-brief-title a:hover,
.daily-brief--teaser .daily-brief-title a:focus-visible {
  color: var(--wine);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.daily-brief-open {
  margin: 18px 0 0;
  text-align: center;
}

a.load-more-button {
  text-decoration: none;
  font-size: var(--text-sm);
}

.brief-page {
  margin: 18px 0 0;
}

.brief-page .breadcrumb {
  margin-bottom: 14px;
}

.brief-page .daily-brief {
  margin-top: 0;
}

/* --- Daily Brief editorial page (public-b41): the /brief page drops the
   slider for a magazine layout — big serif headline, styled lede under a
   thin wine rule, then numbered story sections whose own image alternates
   left/right of the text on desktop and stacks on top at <=760px. The
   homepage teaser (.daily-brief--teaser) keeps the slider and is untouched;
   these rules scope to the page via .brief-article. ----------------------- */
.brief-article .daily-brief-eyebrow {
  margin-bottom: 16px;
}

.brief-article-title {
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  line-height: 1.06;
  margin-bottom: 18px;
}

.brief-article-lede p {
  font-size: clamp(1.05rem, 1.05rem + 0.45vw, 1.28rem);
  line-height: 1.62;
  color: rgba(29, 26, 23, 0.7);
}

.brief-article-header {
  padding-bottom: clamp(20px, 3vw, 28px);
  border-bottom: 2px solid rgba(109, 15, 42, 0.45);
}

.brief-article-stories {
  margin-top: clamp(24px, 3.4vw, 34px);
  gap: clamp(24px, 3.4vw, 34px);
}

/* First story sits directly under the header's wine rule — no extra hairline. */
.brief-article-stories .brief-story:first-child {
  border-top: 0;
  padding-top: 0;
}

.brief-story--media {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 10fr);
  gap: clamp(18px, 3vw, 32px);
  align-items: start;
}

.brief-story--flip {
  grid-template-columns: minmax(0, 10fr) minmax(0, 7fr);
}

.brief-story--flip .brief-story-media {
  order: 2;
}

.brief-story-media {
  position: relative;
  margin: 0;
  min-width: 0;
}

.brief-story-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

/* Credit pill pinned to the picture's top-right, >=8px clear of everything
   (overrides .story-credit's left/bottom placement). */
.brief-story-credit {
  left: auto;
  bottom: auto;
  right: 10px;
  top: 10px;
  max-width: calc(100% - 20px);
}

.brief-story-copy {
  min-width: 0;
}

.brief-story-number {
  display: block;
  margin-bottom: 8px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--rust);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  .brief-story--media,
  .brief-story--flip {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .brief-story--flip .brief-story-media {
    order: 0; /* image always on top when stacked */
  }
}

/* --- Index pages (D3): /artists /countries /regions. --------------------- */
.index-page {
  margin: 0 0 26px;
}

.index-group {
  margin: 0 0 16px;
}

/* Task 53: artists by surname, one letter at a time. The bar reuses the pill
   language; the current letter is filled, letters with no artist are inert. */
.index-letters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 22px;
}

.index-letter {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: rgba(255, 253, 248, 0.72);
  color: var(--wine);
  font-family: var(--font-listing);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

a.index-letter:hover,
a.index-letter:focus-visible,
.index-letter.is-active {
  background: var(--wine);
  border-color: var(--wine);
  color: #fff;
}

.index-letter.is-empty {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

/* Task 53: policy pages with their real text (reading measure, ink body). */
.static-page-body {
  max-width: 68ch;
  margin: 0 0 34px;
}

.static-page-body p {
  margin: 0 0 16px;
  color: var(--ink);
  font-size: var(--text-lg);
  line-height: 1.65;
}

.static-page-body p:last-child {
  margin-bottom: 0;
}

/* --- Static placeholder pages (D3): editorial "content coming soon". ----- */
.static-page-note {
  margin: 0 0 30px;
}

.static-note-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  max-width: 720px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper-2);
  box-shadow: var(--shadow-sm);
}

.static-note-card > .awb-icon {
  width: 30px;
  height: 30px;
  margin-top: 4px;
  color: var(--wine);
}

.static-note-card h2 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: var(--text-2xl);
  color: var(--wine);
}

.static-note-card p {
  margin: 0 0 10px;
  color: var(--muted);
  line-height: 1.55;
}

.static-note-card p:last-child {
  margin-bottom: 0;
}

/* --- Get involved (Michael #1, 2026-07-31): registration page. Form left,
   what-happens-next rail right; stacked on smaller screens. ---------------- */
.get-involved-body {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  grid-template-rows: auto auto;
  gap: 18px 28px;
  align-items: start;
  margin: 0 0 34px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

/* Task 49: the panel's toggle heading sits alone on the first grid row and
   the "What happens next" box lines up with the TOP of the form box, not the
   heading. display:contents lifts the panel's two children into the grid. */
.get-involved-body .contribute-panel {
  display: contents;
}

.get-involved-body .contribute-toggle {
  grid-row: 1;
  grid-column: 1;
}

.get-involved-body .contribute-collapse {
  grid-row: 2;
  grid-column: 1;
}

.get-involved-steps {
  grid-row: 2;
  grid-column: 2;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper-2);
  box-shadow: var(--shadow-sm);
}

.get-involved-steps h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: var(--text-xl);
  color: #000; /* task 49 */
}

.get-involved-steps ol {
  margin: 0 0 14px;
  padding-left: 20px;
  display: grid;
  gap: 10px;
}

.get-involved-steps li {
  color: #000; /* task 49 */
  line-height: 1.55;
}

.get-involved-steps li strong {
  color: #000;
}

.get-involved-steps p {
  margin: 0;
  color: #000; /* task 49 */
  font-size: var(--text-sm);
  line-height: 1.55;
}

@media (max-width: 900px) {
  .get-involved-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }

  .get-involved-steps {
    grid-row: 3;
    grid-column: 1;
  }
}

/* --- Dark footer responsive behaviour (D3). ------------------------------ */
@media (max-width: 980px) {
  .footer-main {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 420px) {
  .footer-cols {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .artist-stat-cards {
    grid-template-columns: 1fr;
    gap: 10px;
    margin: -12px 8px 28px;
  }

  .artist-stat-card {
    grid-template-columns: 34px 1fr;
    min-height: 90px;
  }
}

/* Task 48: cover-image credit sits in the black box ON the cover art
   (country / city / region / M&G pages). */
.country-cover-art .story-credit {
  left: 14px;
  right: auto;
  top: auto;
  bottom: 14px;
  max-width: calc(100% - 28px);
}

/* Task 48: text-actions and links hover to the burgundy. */
.text-action:hover,
.text-action:focus-visible,
.story-read-link:hover,
.story-read-link:focus-visible {
  color: var(--article-burgundy);
}

/* b62 mobile audit: phone landscape (844x390 and similar). The cover took
   145% of the viewport height, so the first paint was only the photo. */
@media (max-width: 980px) and (max-height: 520px) {
  .country-cover-art {
    min-height: 150px;
  }

  .country-cover-copy {
    padding: 22px 22px 20px;
  }

  .country-cover h1 {
    font-size: clamp(34px, min(9vw, 13.5cqw), 48px);
  }
}

/* b62 mobile audit: the Get-involved heading stacked four lines on phones. */
@media (max-width: 430px) {
  .static-hero .profile-copy h1 {
    font-size: clamp(30px, 9vw, 38px);
  }
}

/* b62: inline error state for the newsletter email (the browser tooltip
   alone is easy to miss on phones). */
.newsletter-form input.is-invalid {
  border-color: var(--rust);
  box-shadow: inset 0 0 0 1px var(--rust);
}

.newsletter-form input.is-invalid:focus-visible {
  outline-color: var(--rust);
}

/* b65 desktop audit: heroes without a media column (static pages, topic
   pages) no longer reserve a blank 420px column on the right. */
.profile-hero.static-hero,
.profile-hero.tag-hero {
  grid-template-columns: minmax(0, 1fr);
}

.profile-hero.static-hero .profile-copy,
.profile-hero.tag-hero .profile-copy {
  max-width: 72ch;
}

/* b65: the primary newsletter button had no hover feedback. */
.newsletter-form button:hover,
.newsletter-form button:focus-visible {
  background: var(--article-burgundy);
  border-color: var(--article-burgundy);
  box-shadow: 0 10px 24px rgba(102, 0, 51, 0.22);
}

.newsletter-form button:active {
  transform: translateY(1px);
  box-shadow: none;
}

/* b65: correction / report text areas capped at a comfortable width. */
.contribute-note textarea {
  max-width: 760px;
}