/* ═══════════════════════════════════════════════════════════════════════════
   COMIC CON BALTICS — CONTENT-BLOCK KIT (interior pages)
   Import order: tokens.css → main.css → blocks.css
   Consumes design tokens only — zero hardcoded colors/spacing/type.

   NEW TOKENS introduced by this kit (also listed in docs/09):
     --content-col   width of the interior content column
     --fs-lead       intro-band lead paragraph size
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --content-col: 1080px;   /* NEW · interior content column (spec: 840–1100px) */
  --fs-lead: 19px;         /* NEW · intro lead paragraph · lh 1.65 */
}

/* ═══ SUBPAGE SHELL ══════════════════════════════════════════════════════ */

/* Subpage header: .site-header--solid = COMPACT SIZING only; every page
   opens on a stage band, so the bar starts transparent and the scroll JS
   brings the solid layer in — site-wide. */
.site-header--solid .brand__logo { height: 46px; }
.site-header--solid .primary-nav__in { padding-block: 9px; }
@media (max-width: 860px) {
  .site-header--solid .brand__logo { height: 42px; }
}

/* Stage-deep page band — same design as the guests/programme bands: yearly
   stage art @ .14, breadcrumb, accent H1, lead. The header floats
   transparent over it and goes solid on scroll. */
.page-title {
  position: relative;
  overflow: hidden;
  background: var(--color-stage-deep);
  color: var(--color-stage-ink);
  padding: 176px max(var(--gutter), calc((100% - var(--container)) / 2)) 44px;
  border-bottom: 1px solid var(--color-stage-hairline);
}
.page-title__art {
  position: absolute; inset: 0;
  background-position: center;
  background-size: cover;
  opacity: 0.14;
}
.page-title__in { position: relative; z-index: 1; }
/* THE breadcrumb — parts/crumb.php; the ONE definition every band uses
   (page-scoped stylesheets must not redefine .crumb). */
.crumb {
  display: flex; align-items: center; gap: 10px;
  font: 600 var(--fs-label-sm) var(--font-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-7);
  color: color-mix(in srgb, var(--color-stage-ink) 60%, transparent);
}
.crumb a { color: inherit; text-decoration: none; flex: none; }
.crumb a:hover { color: var(--color-stage-ink); }
.crumb .d { color: var(--color-accent); flex: none; }
.crumb [aria-current] {
  color: var(--color-stage-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: min(440px, 55vw);
}
.page-title__meta {
  font: 600 var(--fs-label-sm) var(--font-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-6);
  color: color-mix(in srgb, var(--color-stage-ink) 72%, transparent);
  margin-top: 16px;
}
.page-title__h {
  font: 400 64px/var(--lh-display) var(--font-display);
  margin: 18px 0 0;
  text-transform: uppercase;
  transform: skewX(-5deg);
  color: var(--color-stage-ink);
}
.page-title__h .accent { color: var(--color-accent); }
.page-title__lead {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.6;
  color: color-mix(in srgb, var(--color-stage-ink) 78%, transparent);
  margin: 16px 0 0;
  max-width: 600px;
}
/* On-stage focus rings flip to the accent for contrast on the deep bg */
.page-title :focus-visible { outline-color: var(--color-accent); }
@media (max-width: 900px) {
  .page-title { padding-top: 150px; padding-bottom: 36px; }
  .page-title__h { font-size: 52px; }
}

/* Bone body — spans the same container as the header (equal side gutters,
   like every front-page section). Text elements keep their own measure caps. */
.page-body {
  padding: var(--space-10) max(var(--gutter), calc((100% - var(--container)) / 2)) var(--space-13);
}
/* On the bone body, lime fails AA for focus rings — use the deep accent-ink */
.page-body :focus-visible { outline-color: var(--color-accent-ink); }

/* Stack rhythm: blocks separate themselves */
.page-body > * + * { margin-top: var(--space-11); }

/* ═══ 01 · INTRO BAND · .cb-intro ════════════════════════════════════════ */
.cb-intro__lead {
  font-size: var(--fs-lead);
  line-height: 1.65;
  font-weight: 500;
  color: var(--color-ink);
  margin: 0;
  text-wrap: pretty;
}
/* Intro + FAQ blocks sit in the same centred 1040px column as .prose;
   structured blocks (cards, two-col, contact grid) keep the container. */
.cb-intro, .cb-faq { max-width: 1040px; margin-inline: auto; }
.cb-h3.cb-faq-head { max-width: 1040px; margin-inline: auto; } /* outranks .cb-h3's margin: 10px 0 0 */
section > .eyebrow:has(+ .cb-faq-head) { display: flex; max-width: 1040px; margin-inline: auto; } /* the group's eyebrow sits outside .cb-faq — same column */
.cb-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.cb-fact {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px var(--space-4);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font: 600 var(--fs-label)/1 var(--font-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-6);
  color: var(--color-ink);
}
.cb-fact .dot { width: 6px; height: 6px; box-shadow: none; }
@media (max-width: 560px) {
  .cb-facts { gap: var(--space-2); }
}

/* ═══ 02 · TWO-COLUMN TEXT + IMAGE · .cb-twocol ══════════════════════════ */
.cb-twocol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-9);
  align-items: center;
}
.cb-twocol--media-right .cb-twocol__media { order: 2; }
.cb-twocol__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-hairline);
  aspect-ratio: 4 / 3;
  background: linear-gradient(160deg, var(--color-stage), var(--color-stage-deep));
  box-shadow: var(--shadow-card-lg);
}
.cb-twocol__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cb-h3 {   /* shared in-page heading (Anton, card skew) */
  font: 400 30px/var(--lh-card) var(--font-display);
  margin: 10px 0 0;
  text-transform: uppercase;
  transform: skewX(var(--skew-card));
  color: var(--color-ink);
}
.cb-twocol__text p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-ink-soft);
  margin: var(--space-4) 0 0;
  text-wrap: pretty;
}
.cb-twocol__text .section-link { display: inline-block; margin-top: var(--space-5); }
@media (max-width: 960px) {
  .cb-twocol { grid-template-columns: 1fr; gap: var(--space-6); }
  .cb-twocol__media, .cb-twocol--media-right .cb-twocol__media { order: -1; }
  .cb-h3 { font-size: 26px; }
}

/* ═══ 03 · CARD GRID · .cb-cards ═════════════════════════════════════════
   Extends .expect-card (main.css) with optional copy + link.              */
.cb-cards { display: grid; gap: var(--space-4); }
.cb-cards[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.cb-cards[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.cb-cards[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.cb-card__text {
  font-size: var(--fs-body-sm);
  line-height: 1.5;
  color: var(--color-ink-soft);
  margin: var(--space-2) 0 0;
}
.cb-card__link {
  display: inline-block;
  margin-top: var(--space-4);
  font: 700 var(--fs-label)/1 var(--font-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-4);
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 2px;
  transition: color var(--dur-fast) var(--ease);
}
.cb-card__link:hover { color: var(--color-accent-ink); }
@media (max-width: 960px) {
  .cb-cards[data-cols="3"], .cb-cards[data-cols="4"] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .cb-cards[data-cols="2"], .cb-cards[data-cols="3"], .cb-cards[data-cols="4"] { grid-template-columns: 1fr; }
}

/* ═══ 04 · FAQ ACCORDION · .cb-faq ═══════════════════════════════════════ */
.cb-faq { border-bottom: 1px solid var(--color-hairline); }
.cb-faq__item { border-top: 1px solid var(--color-hairline); }
.cb-faq__h { margin: 0; }
.cb-faq__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 19px var(--space-1);
  text-align: left;
  font-family: var(--font-body);
}
.cb-faq__q {
  font-weight: 700;
  font-size: 16.5px;
  line-height: 1.4;
  color: var(--color-ink);
}
.cb-faq__icon {
  flex: none;
  width: 30px; height: 30px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  color: var(--color-accent-ink);
  transition: transform var(--dur-med) var(--ease), background var(--dur-fast) var(--ease);
}
.cb-faq__btn:hover .cb-faq__icon { background: var(--color-accent); }
.cb-faq__item.is-open .cb-faq__icon { transform: rotate(45deg); background: var(--color-accent); }
.cb-faq__panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height var(--dur-slow) var(--ease), opacity var(--dur-med) var(--ease);
}
.cb-faq__item.is-open .cb-faq__panel { opacity: 1; } /* max-height set by blocks.js */
.cb-faq__a {
  font-size: var(--fs-body-lg); /* 16px like every reading page */
  line-height: var(--lh-relaxed);
  color: var(--color-ink-soft);
  margin: 0;
  padding: 0 var(--space-1) 22px;
  max-width: 760px;
}

/* ═══ 05 · NUMBERED STEPS / RULES · .cb-steps ════════════════════════════ */
.cb-steps { list-style: none; margin: 0 auto; padding: 0; max-width: 1040px; } /* reading column */
.cb-step {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: var(--space-5);
  position: relative;
  padding-bottom: 28px;
}
.cb-step:last-child { padding-bottom: 0; }
.cb-step__num {
  width: 46px; height: 46px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-hairline);
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 400 19px/1 var(--font-display);
  color: var(--color-accent-ink);
  box-shadow: var(--shadow-card);
}
.cb-step__rail { position: relative; }
.cb-step:not(:last-child) .cb-step__rail::after {
  content: "";
  position: absolute;
  left: 50%; top: 50px; bottom: -24px;
  width: 1px;
  background: var(--color-hairline);
}
.cb-step__body { padding-top: 10px; }
.cb-step__title { font-weight: 700; font-size: 17px; color: var(--color-ink); }
.cb-step__text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-ink-soft);
  margin: var(--space-2) 0 0;
  max-width: 680px;
}
.cb-sublist { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.cb-sublist li {
  display: flex;
  align-items: baseline;
  gap: 11px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--color-ink-soft);
}
.cb-sublist .tick {
  flex: none;
  width: 10px; height: 3px;
  border-radius: 2px;
  background: var(--color-accent);
  position: relative; top: -3px;
}
.cb-callout {
  margin-top: var(--space-4);
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  padding: var(--space-4) 18px;
  max-width: 680px;
}
.cb-callout__label {
  font: 700 var(--fs-label-xs)/1 var(--font-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-7);
  color: var(--color-accent-ink);
}
.cb-callout p { font-size: 14px; line-height: 1.55; color: var(--color-ink); margin: 5px 0 0; }
.cb-callout--warning { background: color-mix(in srgb, var(--color-crimson) 8%, var(--color-bg)); }
.cb-callout--warning .cb-callout__label { color: var(--color-crimson-text); }
@media (max-width: 560px) {
  .cb-step { grid-template-columns: 38px 1fr; gap: var(--space-4); }
  .cb-step__num { width: 38px; height: 38px; font-size: 16px; }
  .cb-step:not(:last-child) .cb-step__rail::after { top: 42px; }
}

/* ═══ 06 · TABLE BLOCK · .cb-table ═══════════════════════════════════════ */
.cb-table__panel {
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  max-width: 820px;
}
.cb-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); color: var(--color-ink); }
.cb-table th {
  text-align: left;
  font: 700 var(--fs-label-sm)/1 var(--font-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-6);
  color: var(--color-ink-soft);
  padding: var(--space-4) 18px;
  border-bottom: 1px solid var(--color-hairline);
}
.cb-table td { padding: 13px 18px; }
.cb-table td:first-child { font-weight: 700; }
.cb-table .muted { color: var(--color-ink-soft); }
.cb-table .num, .cb-table th.num { text-align: right; }
.cb-table td.num { font-weight: 800; }
.cb-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--color-bg-alt) 45%, transparent); }
.cb-table__note {
  font-size: var(--fs-body-xs);
  line-height: 1.5;
  color: var(--color-ink-soft);
  margin: var(--space-3) 0 0;
}
@media (max-width: 560px) {
  .cb-table thead { display: none; }
  .cb-table, .cb-table tbody { display: block; }
  .cb-table tbody tr { display: block; padding: var(--space-3) 18px; border-top: 1px solid var(--color-hairline); }
  .cb-table tbody tr:first-child { border-top: none; }
  .cb-table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-4);
    padding: 4px 0;
    text-align: right;
  }
  .cb-table td::before {
    content: attr(data-label);
    font: 700 var(--fs-label-xs)/1.2 var(--font-label);
    text-transform: uppercase;
    letter-spacing: var(--tracking-6);
    color: var(--color-ink-soft);
    text-align: left;
    flex: none;
  }
}

/* ═══ 07 · CTA BAND · .cb-cta ════════════════════════════════════════════ */
.cb-cta {
  position: relative;
  overflow: hidden;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border-radius: var(--radius-xl);
  padding: var(--space-8) 44px;
}
.cb-cta::after {   /* soft corner bloom, decorative */
  content: "";
  position: absolute;
  top: -80px; right: -40px;
  width: 340px; height: 280px;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-white) 28%, transparent), transparent 65%);
  pointer-events: none;
}
.cb-cta__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
}
.cb-cta__kicker {
  font: 700 var(--fs-label-sm)/1 var(--font-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-8);
  color: color-mix(in srgb, var(--color-accent-ink) 72%, transparent);
}
.cb-cta__h {
  font: 400 36px/var(--lh-heading) var(--font-display);
  margin: var(--space-2) 0 0;
  text-transform: uppercase;
  transform: skewX(var(--skew-card));
}
.cb-cta__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }
/* Buttons on the accent surface (lime bg): deep-ink primary + ink outline */
.btn--on-accent {
  background: var(--color-accent-ink);
  color: var(--color-accent);
  box-shadow: none;
}
.btn--on-accent:hover { transform: translateY(-2px); box-shadow: none; }
.btn--on-accent-ghost {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--color-accent-ink) 40%, transparent);
  color: var(--color-accent-ink);
  font-weight: 700;
}
.btn--on-accent-ghost:hover { background: color-mix(in srgb, var(--color-accent-ink) 8%, transparent); }
.cb-cta :focus-visible { outline-color: var(--color-accent-ink); }
@media (max-width: 960px) {
  .cb-cta__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cb-cta { padding: 28px 22px; }
  .cb-cta__h { font-size: 28px; }
}

/* ═══ 08 · CONTACT / LOCATION · .cb-contact ══════════════════════════════ */
.cb-contact {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-7);
  align-items: start;
  max-width: 1040px; /* same column as the FAQ list above it */
  margin-inline: auto;
}
.cb-contact__rows { display: grid; gap: 18px; margin-top: 22px; }
.cb-contact__row { display: flex; align-items: center; gap: var(--space-4); }
.cb-contact__ico {
  flex: none;
  width: 42px; height: 42px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-hairline);
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink);
}
.cb-contact__label {
  display: block;
  font: 600 var(--fs-label-xs)/1.2 var(--font-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-7);
  color: var(--color-ink-soft);
}
.cb-contact__val {
  font-weight: 700;
  font-size: 16px;
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 2px solid var(--color-accent);
  width: fit-content;
  transition: color var(--dur-fast) var(--ease);
}
.cb-contact__val:hover { color: var(--color-accent-ink); }
.cb-contact__socials { display: flex; gap: var(--space-3); margin-top: var(--space-2); }
/* icon-btn from main.css is styled for stage bg; light-surface variant: */
.icon-btn--light {
  border-color: var(--color-hairline);
  color: var(--color-ink);
  background: var(--color-surface);
}
.icon-btn--light:hover { border-color: var(--color-accent); color: var(--color-ink); }
.cb-map {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-hairline);
  aspect-ratio: 16 / 10;
  background: linear-gradient(160deg, var(--color-stage), var(--color-stage-deep));
  box-shadow: var(--shadow-card-lg);
}
.cb-map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cb-contact__addr-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}
.cb-contact__addr { font-size: var(--fs-body); line-height: 1.55; color: var(--color-ink-soft); }
.cb-contact__addr strong { color: var(--color-ink); font-weight: 700; }
@media (max-width: 960px) {
  .cb-contact { grid-template-columns: 1fr; }
}

/* ═══ CATALOG ANNOTATIONS (blocks.html only) ═════════════════════════════ */
.cb-note {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  border-top: 1px dashed var(--color-hairline);
  padding: var(--space-4) 0 0;
  margin-top: var(--space-11);
}
.page-body > .cb-note + * { margin-top: 26px; }
.page-body > .cb-note:first-child { margin-top: 0; }
.cb-note__id {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font: 700 var(--fs-label-sm)/1.2 var(--font-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-7);
  color: var(--color-ink-soft);
}
.cb-note__id em { font: 400 15px/1 var(--font-display); font-style: normal; color: var(--color-accent-ink); }
.cb-note__meta {
  font: 600 11.5px/1.4 var(--font-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-5);
  color: color-mix(in srgb, var(--color-ink-soft) 75%, transparent);
}

/* ═══ REDUCED MOTION ═════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .cb-faq__panel, .cb-faq__icon, .cb-card__link, .cb-contact__val { transition: none; }
}

/* ═══ DERIVED · PROSE — generic text pages (page.php, docs/08 recipe) ═════
   Everything above mirrors the design export verbatim; additions below are
   theme-derived. Editor content column: ~840px, h2 = .cb-h3 display pattern,
   h3 = label pattern, links 2px lime underline.                            */
/* One column for every text page — 1040px centred, 16px body (client request
   2026-09-06: 720 read 'too compact'; 1040 is the info pages' rail). */
.prose { max-width: 1040px; margin-inline: auto; }
.prose > * + * { margin-top: var(--space-5); }
.prose h2,
.prose h3 { margin-top: var(--space-9); }
.prose h2 {
  font: 400 30px/var(--lh-card) var(--font-display);
  text-transform: uppercase;
  transform: skewX(var(--skew-card));
  color: var(--color-ink);
}
.prose h3 {
  font: 700 var(--fs-label)/1.3 var(--font-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-6);
  color: var(--color-ink);
}
.prose p, .prose li {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-ink-soft);
}
.prose a {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: var(--space-2); }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius-lg); }
/* Legacy YouTube embeds carry width="500": scale to the column, keep 16:9. */
.prose iframe, .prose video { max-width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-lg); }
/* Core blocks the editor may insert on a plain page (quote / separator /
   table) — quiet, hairline-led, matching the .cb-* component idiom. */
.prose blockquote { margin: 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--color-accent); color: var(--color-ink-soft); }
.prose blockquote p { margin: 0; }
.prose blockquote p + p { margin-top: var(--space-3); }
.prose hr { border: 0; border-top: 1px solid var(--color-hairline); margin-block: var(--space-8); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.prose th {
  text-align: left;
  font: 700 var(--fs-label-sm)/1 var(--font-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-6);
  color: var(--color-ink-soft);
  padding: var(--space-4) 14px;
  border-bottom: 1px solid var(--color-hairline);
}
.prose td { padding: 11px 14px; border-bottom: 1px solid var(--color-hairline); }
.prose figure { margin: 0; }
.prose figcaption { font-size: var(--fs-body-sm); color: var(--color-ink-soft); margin-top: var(--space-2); }
@media (max-width: 960px) {
  .prose h2 { font-size: 26px; }
}

/* ═══ DERIVED · FILTER CHIPS — year/role pickers (guests, partners) ═══════
   Same pill pattern as programme.css .pg-chip (docs/08).                   */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chips + .chips { margin-top: var(--space-3); }
.chip {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: var(--radius-pill);
  padding: var(--space-2) 14px;
  font: 700 var(--fs-label-sm)/1 var(--font-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-3);
  background: var(--color-surface);
  color: var(--color-ink-soft);
  border: 1px solid var(--color-hairline);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease);
}
.chip:hover { border-color: var(--color-accent); }
.chip[aria-current="true"],
.chip[aria-pressed="true"] {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border-color: var(--color-accent);
}

/* Role sections (guests page) — heading per group, first group clears chips */
.guests__group { margin-top: var(--space-7); }
.guests__group-head { margin-bottom: var(--space-5); }

/* Archive pagination — core the_posts_pagination() styled as the same pills */
.pagination { margin-top: var(--space-9); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: var(--space-2) 14px;
  font: 700 var(--fs-label-sm)/1 var(--font-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-3);
  background: var(--color-surface);
  color: var(--color-ink-soft);
  border: 1px solid var(--color-hairline);
  text-decoration: none;
}
.pagination a.page-numbers:hover { border-color: var(--color-accent); }
.pagination .page-numbers.current {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border-color: var(--color-accent);
}

/* Archive grids under the chips (guests 4/2/1 per docs/08) */
.archive-grid { margin-top: var(--space-7); }
.archive-grid [hidden] { display: none; }
/* Phones: the listing keeps main.css's 2-column grid (mobile design 2026-09-06). */

/* ═══ DERIVED · SPONSOR GRID (partners page — docs/08 recipe) ═════════════
   Surface cards on the .expect-card pattern: hairline border, radius-lg,
   lime-border hover; logo contained, condensed name label below.          */
.sponsor-group { margin-top: var(--space-9); }
.sponsor-group .section-head { margin-bottom: 0; }
.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.sponsor-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
a.sponsor-card:hover { border-color: var(--color-accent); }
.sponsor-card__logo {
  width: 100%;
  aspect-ratio: 3 / 2;
  display: grid;
  place-items: center;
}
.sponsor-card__logo img { max-width: 82%; max-height: 82%; object-fit: contain; }
/* Logo fallback: the sponsor's name set large until a logo is uploaded. */
.sponsor-card__logo-text {
  font: 400 20px/1.1 var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-2);
  color: var(--color-ink-soft);
  padding: 0 14px;
  text-align: center;
}
@media (max-width: 960px) {
  .sponsor-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══ DERIVED · NEWS (home.php card grid, single.php post nav — docs/08) ══ */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.news-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: transform var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
}
.news-card:hover {                    /* mirror .pass-mini hover (docs/08) */
  transform: translateY(-4px);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-hover);
}
.news-card__thumb {
  aspect-ratio: 16 / 9;
  background: linear-gradient(160deg, var(--color-stage), var(--color-stage-deep));
}
.news-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-card__body { padding: var(--space-5); }
.news-card__date {
  font: 600 var(--fs-label-sm)/1 var(--font-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-6);
  color: var(--color-ink-soft);
}
.news-card__title {
  font: 400 var(--fs-h6)/var(--lh-card) var(--font-display);
  text-transform: uppercase;
  transform: skewX(var(--skew-card));
  color: var(--color-ink);
  margin: var(--space-3) 0 0;
}
@media (max-width: 960px) {
  .news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .news-grid { grid-template-columns: 1fr; }
}

/* Single post: prev/next + "All news →" row under the article column */
.post-nav {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  flex-wrap: wrap;
  max-width: 1040px;
  margin-inline: auto; /* follows the centered .prose column */
  margin-top: var(--space-9);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-hairline);
}
.post-nav a {                     /* core prev/next links, section-link look */
  font: 700 var(--fs-label-lg) var(--font-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-4);
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 3px;
}

/* In-section headings before steps/table/faq groups — the approved demo
   assemblies set these margins inline; same values, one class per block. */
.cb-h3.cb-steps-head { margin-bottom: 28px; }
.cb-h3.cb-table-head { margin-bottom: 24px; }
.cb-h3.cb-faq-head { margin-bottom: 8px; }

/* Visually hidden, kept for assistive tech (core convention) */
.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ═══ DERIVED · 404 (docs/08: full-height stage-deep, lime Anton code) ════ */
.err404 {
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--color-stage-deep);
  color: var(--color-stage-ink);
  padding: 150px var(--gutter) var(--space-10);
}
.err404::after {                          /* hero-style accent glow, decorative */
  content: "";
  position: absolute;
  top: -140px; right: -80px;
  width: 640px; height: 520px;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 9%, transparent), transparent 65%);
  pointer-events: none;
}
.err404__in { position: relative; z-index: 1; }
.err404__code {
  font: 400 var(--fs-display-xl)/var(--lh-display) var(--font-display);
  color: var(--color-accent);
  transform: skewX(var(--skew-display));
}
.err404__line {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: color-mix(in srgb, var(--color-stage-ink) 78%, transparent);
  margin: var(--space-5) auto 0;
  max-width: 480px;
}
.err404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  justify-content: center;
  align-items: center;
  margin-top: var(--space-8);
}
.err404 .section-link { color: var(--color-stage-ink); }
.err404 :focus-visible { outline-color: var(--color-accent); }

/* ═══ DERIVED · SEARCH (docs/08: query echo band, news-style rows) ════════ */
.search-rows { border-top: 1px solid var(--color-hairline); }
.search-row {
  display: block;
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-hairline);
  text-decoration: none;
}
.search-row__type {
  font: 600 var(--fs-label-sm)/1 var(--font-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-6);
  color: var(--color-ink-soft);
}
.search-row__title {
  font: 400 var(--fs-h5)/var(--lh-card) var(--font-display);
  text-transform: uppercase;
  transform: skewX(var(--skew-card));
  color: var(--color-ink);
  margin: var(--space-2) 0 0;
}
.search-row:hover .search-row__title { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
.search-row__excerpt {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-ink-soft);
  margin: var(--space-3) 0 0;
  max-width: 720px;
}
.search-empty { color: var(--color-ink-soft); }
.search-form {
  display: flex;
  gap: var(--space-3);
  max-width: 560px;
  margin-top: var(--space-6);
}
.search-form .field { flex: 1; }

/* ── Hall legend (ccb/hall-legend, venue map): the building number is the
   identity — big; this year's sponsor name beneath. Strings from hall
   records (inc/halls.php), never typed. ──────────────────────────────── */
.hall-legend {
  list-style: none;
  margin: var(--space-6) 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-3);
}
.hall-legend__item {
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
/* Cards are links to the programme filtered by hall: hairline → ink on hover,
   accent ring on focus (the site's card-link vocabulary). */
.hall-legend__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  color: inherit;
  text-decoration: none;
}
.hall-legend__item:has(.hall-legend__link) {
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.hall-legend__item:has(.hall-legend__link:hover) {
  border-color: var(--color-ink);
  box-shadow: var(--shadow-hover);
}
.hall-legend__item:has(.hall-legend__link:focus-visible) {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 45%, transparent);
}
.hall-legend__link:focus-visible { outline: none; }
.hall-legend__num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display-sm);
  line-height: var(--lh-display);
  color: var(--color-ink);
}
.hall-legend__brand {
  font-family: var(--font-label);
  font-size: var(--fs-label-sm);
  line-height: var(--lh-card);
  color: var(--color-ink-soft);
  text-transform: uppercase;
  letter-spacing: .06em;
}