/* ============================================================================
   Homepage (front-page.php) - layout for Home.dc.html, ported from the design's
   inline styles into classes. Desktop-first (1240px), then stacked on mobile.
   ========================================================================== */

.home-nav {
  max-width: var(--page-max);
  margin: 0 auto;
  white-space: nowrap;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.home-nav .nav-brand { margin-right: 0; }
.home-nav .nav-spacer { flex: 1; }

/* Placeholder art (mirrors the design's monospace hatched placeholders). Real
   featured images replace these; the hatch only shows when no image exists. */
.ph {
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg, var(--ph-tint, var(--color-neutral-200)) 0 12px, var(--color-surface) 12px 24px);
}
.ph > span {
  font-family: ui-monospace, monospace; font-size: 12px;
  background: var(--color-bg); border: 2px solid var(--color-divider); padding: 5px 10px;
}

/* - Hero - */
.hero {
  max-width: var(--page-max); margin: 0 auto;
  border-bottom: 2px solid var(--color-divider);
}
.hero-grid { display: grid; grid-template-columns: 1fr 320px; min-height: 480px; }
.hero-main { border-right: 2px solid var(--color-divider); position: relative; display: grid; }
/* All slides occupy the same grid cell, so the hero is always as tall as the
   TALLEST slide and never resizes when the carousel cycles (no layout shift).
   The inactive slide fades out via opacity/visibility, staying in layout and
   out of the tab/AX tree. */
.hero-slide {
  grid-area: 1 / 1;
  display: grid; grid-template-columns: 1.1fr 1fr; height: 100%;
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s ease;
}
.hero-slide.is-active { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}
.hero-copy {
  padding: 56px 48px; display: flex; flex-direction: column;
  gap: 20px; justify-content: center;
}
.hero-copy .tag { align-self: flex-start; }
.hero-copy h1 {
  font-size: 56px; line-height: 1.02; letter-spacing: -0.02em; margin: 0;
  text-wrap: pretty;
}
.hero-copy.is-post h1 { font-size: 44px; line-height: 1.06; }
.hero-lede { font-size: 18px; line-height: 1.5; margin: 0; max-width: 47ch; text-wrap: pretty; }
.hero-when { font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.hero-when .muted { opacity: 0.65; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-art {
  position: relative; overflow: hidden;
  border-left: 2px solid var(--color-divider);
  background: var(--color-surface);
  --ph-tint: var(--newmr-red-100);
}
.hero-art.tint-blue { --ph-tint: var(--newmr-blue-100); }
/* Foreground: the whole image, aspect preserved (no crop, no distortion). */
.hero-art-fg {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  object-fit: contain;
}
/* Backdrop: a blurred, zoomed copy of the same image fills the letterbox so
   the panel never shows bare bars. --art-bg is set inline by the template. */
.hero-art.has-img::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--art-bg);
  background-size: cover; background-position: center;
  filter: blur(28px) saturate(1.15);
  transform: scale(1.2);
}

.hero-dots {
  position: absolute; left: 48px; bottom: 20px;
  display: flex; gap: 8px; align-items: center;
}
.hero-dot {
  width: 14px; height: 14px; border: 2px solid var(--color-text);
  background: transparent; cursor: pointer; padding: 0;
}
.hero-dot.is-active { background: var(--color-text); }

.hero-aside {
  padding: 32px; display: flex; flex-direction: column;
  gap: 16px; justify-content: center;
}
.eyebrow {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.55;
}
.hero-aside .sponsor-slot {
  border: 2px solid var(--color-divider); aspect-ratio: 4 / 3;
  --ph-tint: var(--color-neutral-200);
}
.hero-aside .sponsor-slot img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.hero-aside .sponsor-slot .sponsor-slot-name {
  font-family: inherit; font-size: 18px; font-weight: 600; letter-spacing: normal;
  text-transform: none; background: var(--color-bg); border: 2px solid var(--color-divider);
  padding: 10px 18px;
}
.hero-aside .sponsor-invite { background: var(--color-surface); }
.hero-aside .sponsor-invite > span {
  font-family: inherit; font-size: 14px; font-weight: 600;
  background: transparent; border: 2px dashed var(--color-divider); padding: 12px 20px;
  color: var(--color-text); opacity: 0.7;
}
.hero-aside p { font-size: 14px; line-height: 1.5; margin: 0; opacity: 0.75; }

/* - Section scaffolding - */
.section {
  max-width: var(--page-max); margin: 0 auto;
  border-bottom: 2px solid var(--color-divider);
}
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding: 40px 48px 24px; flex-wrap: wrap;
}
.section-head h2 { font-size: 32px; letter-spacing: -0.015em; margin: 0; }
.section-head .head-links { display: flex; gap: 20px; font-weight: 600; font-size: 14px; }
.section-head .head-links a.to-posts { color: var(--color-accent-700); }
.section-head .head-links a.to-videos { color: var(--newmr-blue-deep); }
.section-title { padding: 40px 48px 24px; }
.section-title h2 { font-size: 32px; letter-spacing: -0.015em; margin: 0; }

/* - 3-up grids (latest, topics) - */
.grid-3 {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 2px solid var(--color-divider);
}
/* Card grids carry a border-bottom on their last row of cells, and the section
   wrapper carries its own border-bottom - stacked, they render as a double
   line. Pull the grid down 2px so the last-row cell border coincides with the
   section border into a single rule (also covers partial last rows). */
.grid-3, .grid-4 { margin-bottom: -2px; }
.cell {
  padding: 28px 48px 32px;
  border-right: 2px solid var(--color-divider);
  border-bottom: 2px solid var(--color-divider);
  display: flex; flex-direction: column; gap: 10px;
  color: var(--color-text);
}
.cell:hover { background: var(--color-surface); }
.cell .thumb { aspect-ratio: 21 / 9; border: 2px solid var(--color-divider); --ph-tint: var(--newmr-red-100); }
.cell .thumb.tint-blue { --ph-tint: var(--newmr-blue-100); }
.cell .thumb img { width: 100%; height: 100%; object-fit: cover; }
.cell .kicker {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 600; color: var(--color-accent-700);
}
.cell .kicker.blue { color: var(--newmr-blue-deep); }
.cell .cell-title {
  font-family: var(--font-heading); font-weight: 600; font-size: 21px;
  line-height: 1.2; text-wrap: pretty;
}
.cell .cell-excerpt { font-size: 14px; line-height: 1.5; opacity: 0.75; }
.cell .cell-date { font-size: 13px; opacity: 0.55; margin-top: auto; }

/* Topic cells */
.topics .cell { border-top: 3px solid var(--newmr-blue); }
.topics .cell .cell-title { font-weight: var(--font-heading-weight); font-size: 22px; letter-spacing: -0.01em; }
.topics .cell .more { font-weight: 600; font-size: 14px; color: var(--color-accent-700); margin-top: auto; }

/* - Ways to learn - */
.learn { display: grid; grid-template-columns: repeat(3, 1fr); }
.learn .cell {
  padding: 40px 48px; border-bottom: 0; gap: 10px;
}
.learn .cell:not(:last-child) { border-right: 2px solid var(--color-divider); }
.learn .cell .learn-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 24px; }
.learn .cell .learn-body { font-size: 15px; line-height: 1.5; opacity: 0.8; }
.learn .cell .more { font-weight: 600; font-size: 14px; color: var(--color-accent-700); }

/* - Newsletter band - */
.newsletter { background: var(--color-accent); }
.newsletter-inner {
  max-width: var(--page-max); margin: 0 auto;
  padding: 64px 48px; display: flex; align-items: flex-end;
  justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.newsletter h2 {
  font-size: 48px; line-height: 1.02; letter-spacing: -0.02em; margin: 0;
  color: #fff; max-width: 18ch; text-wrap: pretty;
}
.newsletter .btn { background: #fff; color: var(--color-accent-700); font-weight: 600; white-space: nowrap; }
.newsletter .btn:hover { background: var(--color-neutral-100); }

/* - Footer - */
.site-footer { border-top: 2px solid var(--color-divider); }
.footer-inner { max-width: var(--page-max); margin: 0 auto; }
.footer-sponsors { padding: 32px 48px; border-bottom: 2px solid var(--color-divider); }
.sponsor-grid {
  /* Columns follow the actual sponsor count (--sponsor-cols, set by the
     template) so a short roster fills the row instead of leaving a gap;
     the media queries below reflow it on smaller screens. */
  display: grid; grid-template-columns: repeat(var(--sponsor-cols, 9), 1fr);
  border: 2px solid var(--color-divider); margin-top: 12px;
}
.sponsor-grid span {
  padding: 16px 8px; border-right: 2px solid var(--color-divider);
  font-size: 13px; font-weight: 600; text-align: center;
}
.sponsor-grid span:last-child { border-right: 0; }
.footer-body { padding: 32px 48px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; }
.footer-about { font-size: 14px; line-height: 1.55; margin: 0; max-width: 52ch; opacity: 0.8; }
.footer-about a { text-decoration: underline; }
.footer-links { display: grid; grid-template-columns: auto auto; gap: 32px; font-size: 14px; justify-content: start; align-content: start; }
.footer-links .col { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.footer-links a { white-space: nowrap; }
.footer-legal { padding: 16px 48px; border-top: 2px solid var(--color-divider); font-size: 13px; opacity: 0.6; }

/* ============================================================================
   Responsive - the design is desktop-first; collapse cleanly on smaller screens
   ========================================================================== */
@media (max-width: 960px) {
  :root { --page-pad: 24px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-main { border-right: 0; }
  .hero-slide { grid-template-columns: 1fr; }
  .hero-art { display: none; }
  .hero-copy { padding: 40px 24px; gap: 16px; }
  .hero-copy h1 { font-size: 40px; }
  .hero-copy.is-post h1 { font-size: 34px; }
  .hero-dots { left: 24px; }
  .hero-aside { border-top: 2px solid var(--color-divider); }

  .grid-3, .learn { grid-template-columns: 1fr; }
  .cell, .learn .cell { padding: 28px 24px; border-right: 0; }
  .learn .cell:not(:last-child) { border-right: 0; border-bottom: 2px solid var(--color-divider); }
  .section-head, .section-title { padding: 32px 24px 20px; }

  .newsletter-inner { padding: 40px 24px; }
  .newsletter h2 { font-size: 34px; }

  .footer-sponsors, .footer-body, .footer-legal { padding-left: 24px; padding-right: 24px; }
  .sponsor-grid { grid-template-columns: repeat(3, 1fr); }
  .sponsor-grid span:nth-child(3n) { border-right: 0; }
  .footer-body { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 520px) {
  .footer-links { grid-template-columns: 1fr; }
  .sponsor-grid { grid-template-columns: repeat(2, 1fr); }
  .sponsor-grid span:nth-child(3n) { border-right: 2px solid var(--color-divider); }
  .sponsor-grid span:nth-child(2n) { border-right: 0; }
}

/* ============================================================================
   Inner pages - Blog, Events, Play Again, singles, archives, search, 404.
   Built on the same tokens + building blocks (.section, .grid-3, .cell, .ph).
   ========================================================================== */

/* Page header (Blog / Events / Play Again / archive / search) */
.page-head { padding: 48px 48px 32px; }
.page-head h1 { font-size: 56px; letter-spacing: -0.02em; line-height: 1; margin: 0 0 12px; }
.page-lede { font-size: 17px; margin: 0; max-width: 62ch; opacity: 0.8; }

/* Two-column feature (next event, featured post) */
.feature { max-width: var(--page-max); margin: 0 auto; border-bottom: 2px solid var(--color-divider); }
.feature-inner { display: grid; grid-template-columns: 1fr 1fr; position: relative; }
.feature-copy { padding: 48px; display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.feature-copy .tag { align-self: flex-start; }
.feature-copy h1, .feature-copy .feature-title {
  font-family: var(--font-heading); font-weight: 800; font-size: 38px;
  line-height: 1.08; letter-spacing: -0.015em; margin: 0; text-wrap: pretty;
}
.feature-copy p, .feature-lede { font-size: 16px; line-height: 1.55; margin: 0; max-width: 56ch; opacity: 0.85; }
.feature-meta { font-size: 13px; opacity: 0.55; }
a.feature-inner { color: var(--color-text); }
a.feature-inner:hover { background: var(--color-surface); }

/* Events hero: a stretched link makes the whole feature clickable to the event
   page, while the Register/Details button stays a separate target on top. */
.feature-link { color: inherit; text-decoration: none; }
.feature-inner:has(.feature-link) { cursor: pointer; }
.feature-link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.feature .hero-ctas { position: relative; z-index: 3; }
.feature-art { isolation: isolate; }
.feature-inner:hover .feature-link { color: var(--color-accent-600); }
.feature-art {
  position: relative; overflow: hidden;
  border-left: 2px solid var(--color-divider);
  background: var(--color-surface); min-height: 320px;
  --ph-tint: var(--newmr-red-100);
}
.feature-art.tint-blue { --ph-tint: var(--newmr-blue-100); }
.feature-art .ph { width: 100%; height: 100%; min-height: inherit; }
.feature-art-fg { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
.feature-art.has-img::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--art-bg); background-size: cover; background-position: center;
  filter: blur(28px) saturate(1.15); transform: scale(1.2);
}

/* Events year grids */
.year-title { padding: 40px 48px 20px; }
.year-title h2 { font-size: 32px; margin: 0; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--color-divider); }
.ev-cell {
  padding: 24px; border-right: 2px solid var(--color-divider); border-bottom: 2px solid var(--color-divider);
  display: flex; flex-direction: column; gap: 8px; color: var(--color-text);
}
.ev-cell:hover { background: var(--color-surface); }
.ev-cell .thumb { aspect-ratio: 21/9; border: 2px solid var(--color-divider); --ph-tint: var(--newmr-red-100); }
.ev-cell .thumb.tint-blue { --ph-tint: var(--newmr-blue-100); }
.ev-cell .thumb img { width: 100%; height: 100%; object-fit: cover; }
.ev-date { font-size: 13px; color: var(--color-accent-700); font-weight: 600; }
.ev-cell.past .ev-date { color: inherit; opacity: 0.6; }
.ev-title { font-family: var(--font-heading); font-weight: 600; font-size: 18px; line-height: 1.25; text-wrap: pretty; }

/* A note row under a section (archive link + hint) */
.section-note { padding: 24px 48px 48px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.section-note .hint { font-size: 14px; opacity: 0.6; }
.section-note .hint a { text-decoration: underline; }

/* Play Again - archive controls (sticky search + year jump rail) */
.pa-controls { position: sticky; top: 0; z-index: 20; background: var(--color-bg); border-bottom: 2px solid var(--color-divider); }
.pa-controls-inner { max-width: var(--page-max); margin: 0 auto; padding: 12px 48px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.pa-search { font: inherit; font-size: 15px; padding: 9px 14px; border: 2px solid var(--color-divider); background: var(--color-surface); color: var(--color-text); flex: 1 1 240px; min-width: 200px; max-width: 400px; }
.pa-search::placeholder { color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.pa-search:focus-visible { outline: none; border-color: var(--color-accent); }
.pa-count { font-size: 13px; color: color-mix(in srgb, var(--color-text) 55%, transparent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pa-years { display: flex; gap: 2px; overflow-x: auto; flex: 1 1 auto; scrollbar-width: thin; }
.pa-years a { font-family: var(--font-heading); font-weight: 600; font-size: 13px; padding: 6px 9px; color: color-mix(in srgb, var(--color-text) 68%, transparent); white-space: nowrap; text-decoration: none; }
.pa-years a:hover { color: var(--color-accent); }
.pa-years a.dim { opacity: 0.28; }

.pa-list { max-width: var(--page-max); margin: 0 auto; }
.pa-year[hidden] { display: none; }
.pa-year-h {
  font-family: var(--font-heading); font-weight: 800; font-size: 24px;
  margin: 0; padding: 30px 48px 10px; scroll-margin-top: 68px;
  border-top: 2px solid var(--color-divider);
}
.pa-list > .pa-year:first-child .pa-year-h { border-top: 0; }

/* Play Again - recording rows */
.pa-row {
  display: grid; grid-template-columns: 168px 1fr auto; align-items: center; gap: 28px;
  padding: 14px 48px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 15%, transparent);
  color: var(--color-text);
}
.pa-row[hidden] { display: none; }
.pa-row:hover { background: var(--color-surface); }
/* Fixed 16:9 thumbnail, centred with the row padding as breathing room so
   adjacent thumbs never touch (was: stretched full-height into a strip). */
.pa-thumb {
  position: relative; width: 168px; aspect-ratio: 16 / 9; overflow: hidden;
  border: 2px solid var(--color-divider);
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg, var(--newmr-blue-100) 0 10px, var(--color-surface) 10px 20px);
}
.pa-thumb > span { font-family: ui-monospace, monospace; font-size: 11px; background: var(--color-bg); border: 2px solid var(--color-divider); padding: 3px 8px; }
/* Contain the artwork whole (no crop) over a blurred, zoomed copy of itself. */
.pa-thumb.has-img { background: var(--color-surface); }
.pa-thumb.has-img::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--art-bg); background-size: cover; background-position: center;
  filter: blur(12px) saturate(1.2); transform: scale(1.35);
}
.pa-thumb-img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: block; }
/* Play badge over the artwork, accent-red on row hover */
.pa-play {
  position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 34px; height: 34px; display: grid; place-content: center;
  background: color-mix(in srgb, #14100f 55%, transparent);
}
.pa-play::after {
  content: ""; width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent #fff; transform: translateX(2px);
}
.pa-row:hover .pa-play { background: var(--color-accent); }
.pa-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pa-title { font-family: var(--font-heading); font-weight: 600; font-size: 20px; line-height: 1.25; text-wrap: pretty; }
.pa-date { font-size: 13px; opacity: 0.6; }
.pa-watch { font-weight: 600; font-size: 14px; color: var(--color-accent-700); text-align: right; white-space: nowrap; }

/* Recording detail (an event's presentations) */
.rec-table { width: 100%; border-collapse: collapse; }
.rec-table th { text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 60%, transparent); padding: 12px 16px; border-bottom: 2px solid var(--color-divider); }
.rec-table td { padding: 14px 16px; border-bottom: 1px solid var(--color-divider); vertical-align: top; font-size: 15px; }
.rec-table tr:hover td { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.rec-table a { color: var(--color-accent-700); font-weight: 600; }

/* Articles: single post / page / event / presentation / person */
.article { max-width: 820px; margin: 0 auto; padding: 48px; }
.article-full { max-width: var(--page-max); }
.article-head { margin-bottom: 24px; }
.article-head h1 { font-size: 44px; line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 12px; text-wrap: pretty; }
.article-meta { font-size: 13px; opacity: 0.55; display: flex; gap: 12px; flex-wrap: wrap; }
/* Featured image banner: whole image (contain) over a blurred backdrop of
   itself, capped to a 16:9 height so tall/odd images never dominate. */
.article-feature {
  position: relative; overflow: hidden; isolation: isolate;
  margin: 0 0 28px; border: 2px solid var(--color-divider);
  background: var(--color-surface); aspect-ratio: 16 / 9;
}
.article-feature::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--art-bg); background-size: cover; background-position: center;
  filter: blur(26px) saturate(1.15); transform: scale(1.2);
}
.article-feature-img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: block; }
/* Person portrait keeps its natural shape (not a banner). */
.person-photo { margin: 0 0 24px; max-width: 220px; border: 2px solid var(--color-divider); }
.person-photo img { width: 100%; height: auto; display: block; }
.article-body { font-size: 17px; line-height: 1.65; }
.article-body > * + * { margin-top: 1.1em; }
.article-body h2 { font-size: 28px; margin-top: 1.6em; }
.article-body h3 { font-size: 22px; margin-top: 1.4em; }
.article-body a { color: var(--color-accent-700); text-decoration: underline; }
.article-body img { height: auto; border: 2px solid var(--color-divider); }
.article-body ul, .article-body ol { padding-left: 1.4em; }
.article-body li + li { margin-top: 0.4em; }
.article-body blockquote { border-left: 3px solid var(--color-accent); margin: 1.2em 0; padding: 0.2em 0 0.2em 1.2em; opacity: 0.9; }
.article-video { margin: 0 0 28px; }
.article-video video, .article-video iframe { width: 100%; aspect-ratio: 16/9; border: 2px solid var(--color-divider); background: #000; }

/* Pagination (paginate_links type=list -> <ul class="page-numbers">) */
.pager { padding: 24px 48px 48px; }
.pager ul.page-numbers { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.pager ul.page-numbers > li { display: flex; margin: 0; }
.pager a.page-numbers, .pager span.page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px;
  border: 2px solid var(--color-divider); font-weight: 600; font-size: 14px; color: var(--color-text);
}
.pager span.page-numbers.current { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); }
.pager a.page-numbers:hover { background: var(--color-surface); }
.pager .page-numbers.dots { border: 0; min-width: 0; padding: 0 4px; }

/* The last block before the footer must not add a rule of its own - the
   footer already has a border-top, else the two stack into a double line. */
.site-main > .section:last-child,
.site-main > .feature:last-child { border-bottom: 0; }

/* Notices (search empty / 404) */
.notice { max-width: var(--page-max); margin: 0 auto; padding: 48px; }
.notice p { font-size: 17px; opacity: 0.8; }

/* People archive reuses .grid-3/.cell with square thumbs */
.people .cell .thumb { aspect-ratio: 1 / 1; }

/* Subject archives (taxonomy-subject.php): the chips rail above the mixed
   grid. Chips are tag-shaped links (flat, 0-radius via the tokens); the
   current term is filled with the accent, the "All <hub>" back link reads
   as a pointer in accent text. */
.subject-chips { padding: 28px 48px 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.subject-chip {
  border: 2px solid var(--color-divider); background: var(--color-bg);
  color: var(--color-text); font-weight: 600; padding: 5px 12px;
}
a.subject-chip:hover { background: var(--color-surface); border-color: var(--color-text); color: var(--color-text); }
.subject-chip.is-back { color: var(--color-accent-700); }
.subject-chip.is-current { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }
a.subject-chip.is-current:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); color: var(--color-bg); }

/* Related rail (newmr_modernist_related_rail) under single articles. The
   article blocks it follows carry no bottom rule of their own, so the
   section takes a top border to mark itself off; everything inside reuses
   .section-title / .grid-3 / .cell as-is. */
.related-section { border-top: 2px solid var(--color-divider); }

/* Hub sponsor slot (taxonomy-subject.php): a labelled strip of sponsor
   logos after the content grid on top-level subject terms. Same language
   as the footer sponsor grid - flat, 0-radius, a framed grid of divider-
   bordered cells whose column count follows the roster (--sponsor-cols,
   set by the template). Scoped as .section.sponsor-slot so the hero-aside
   premium slot (also .sponsor-slot) keeps its own styling. */
.section.sponsor-slot { padding: 32px 48px 40px; }
.sponsor-slot-title {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 600; margin: 0; opacity: 0.55;
}
.sponsor-slot-grid {
  display: grid; grid-template-columns: repeat(var(--sponsor-cols, 6), 1fr);
  border: 2px solid var(--color-divider); margin-top: 12px;
}
.sponsor-slot-cell {
  display: flex; align-items: center; justify-content: center;
  min-height: 104px; padding: 16px;
  border-right: 2px solid var(--color-divider);
  color: var(--color-text);
}
.sponsor-slot-cell:last-child { border-right: 0; }
a.sponsor-slot-cell:hover { background: var(--color-surface); }
.sponsor-slot-cell img { max-width: 100%; max-height: 72px; width: auto; height: auto; object-fit: contain; }
.sponsor-slot-name { font-size: 13px; font-weight: 600; text-align: center; }

@media (max-width: 960px) {
  .section.sponsor-slot { padding: 32px 24px; }
  .sponsor-slot-grid { grid-template-columns: repeat(3, 1fr); }
  .sponsor-slot-cell:nth-child(3n) { border-right: 0; }
}
@media (max-width: 520px) {
  .sponsor-slot-grid { grid-template-columns: repeat(2, 1fr); }
  .sponsor-slot-cell:nth-child(3n) { border-right: 2px solid var(--color-divider); }
  .sponsor-slot-cell:nth-child(2n) { border-right: 0; }
}

@media (max-width: 960px) {
  .page-head { padding: 40px 24px 24px; }
  .page-head h1 { font-size: 40px; }
  .feature-inner { grid-template-columns: 1fr; }
  .feature-art { border-left: 0; aspect-ratio: 16 / 9; min-height: 0; }
  .feature-copy { padding: 32px 24px; }
  .feature-copy h1, .feature-copy .feature-title { font-size: 30px; }
  .year-title { padding: 32px 24px 16px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .ev-cell:nth-child(2n) { border-right: 0; }
  .section-note { padding: 24px; }
  .pa-row { grid-template-columns: 120px 1fr; gap: 16px; padding: 12px 24px; }
  .pa-thumb { width: 120px; }
  .pa-watch { display: none; }
  .pa-controls-inner, .pa-year-h { padding-left: 24px; padding-right: 24px; }
  .article, .notice { padding: 32px 24px; }
  .article-head h1 { font-size: 32px; }
  .rec-table th:first-child, .rec-table td:first-child { display: none; }
  .pager { padding: 24px; }
  .subject-chips { padding: 20px 24px 16px; }
}
@media (max-width: 520px) {
  .grid-4 { grid-template-columns: 1fr; }
  .ev-cell { border-right: 0; }
}