/* ============================================================================
   Bali in Bengaluru — the festival page
   ----------------------------------------------------------------------------
   Layered over styles.css, which holds the tokens and the shared system. This
   file holds what is particular to index.html: the coloured grounds and their
   seams, the hero, the programme cards, the calendar, the partners row, the
   support band, the onboarding carousel and the in-page form views.

   privacy.html does not load this file; v1.html is frozen on v1-styles.css.
   Same order as styles.css: components → responsive → print.
   ========================================================================== */

/* ------------------------------------------------------------- 1. Grounds */
/* Each ground restates what its own text is allowed to be. They are not
   interchangeable: on oxblood the orange measures 3.18 and lit copper 2.94,
   so neither may set type there; on cream the lit copper falls to 2.73 and
   the oxidised copper does the accent work instead. */

.section-tint { background: var(--bg-2); }

/* --- Cream: paper on screen. Charcoal sets the type. --- */
.section-cream { background: var(--cream); color: #1B1D21; }
.section-cream h2,
.section-cream h3,
.section-cream h4 { color: #1B1D21; }
.section-cream p { color: #5F574C; }
.section-cream p strong { color: #1B1D21; }
.section-cream .eyebrow,
.section-cream .lead-line { color: var(--copper-ox); }
.section-cream .fact-list li { border-top-color: var(--line-cream); }
.section-cream .fact-list li span { color: var(--copper-ox); }
.section-cream .btn-primary { color: #2A1206; }
.section-cream .btn-ghost { border-color: rgba(27, 29, 33, 0.28); color: #1B1D21; }
.section-cream .btn-ghost:hover { border-color: #1B1D21; background: rgba(27, 29, 33, 0.05); }
.section-cream a:not(.btn) { color: #1B1D21; box-shadow: inset 0 -2px 0 var(--copper-ox); }

/* --- Oxblood: cream type, copper accents, no orange. --- */
.section-oxblood { background: var(--oxblood); }
.section-oxblood h2,
.section-oxblood h3,
.section-oxblood h4 { color: var(--ink); }                 /* 8.01 */
.section-oxblood p { color: var(--muted); }                /* 4.66 */
.section-oxblood p strong,
.section-oxblood .eyebrow,
.section-oxblood .lead-line { color: var(--accent-2); }    /* 4.55 */
/* Orange is unreadable here, so a link carries a copper underline instead. */
.section-oxblood a:not(.btn) { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent-2); }
.section-oxblood a:not(.btn):hover { color: var(--accent-2); box-shadow: inset 0 -2px 0 var(--ink); }

/* --------------------------------------------------------------- 2. Seams */
/* Scallop and harlequin from the elements board, drawn rather than drawn on.
   Each is one element, 26px tall, sitting between two sections. */

.seam { width: 100%; height: 26px; }
.seam-scallop {
  background: radial-gradient(circle at 50% 0%, var(--bg) 46%, transparent 47%) 0 0 / 28px 26px;
  background-color: var(--cream);
}
.seam-scallop.on-cream {
  background: radial-gradient(circle at 50% 0%, var(--cream) 46%, transparent 47%) 0 0 / 28px 26px;
  background-color: var(--bg);
}
.seam-harlequin {
  background: repeating-conic-gradient(from 45deg at 50% 50%,
              var(--copper) 0deg 90deg, transparent 90deg 180deg) 0 0 / 26px 26px;
  background-color: var(--bg-2);
  opacity: 0.5;
}

/* ---------------------------------------------------------------- 3. Hero */
/* The wordmark is the page's thesis, so it gets the room — but sized to be
   read rather than to fill the screen, and vertically centred so the space is
   shared with the lead and the numbers instead of stacked above them. */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(68vh, 580px);
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.05) saturate(1.08);
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--bg) 2%, rgba(27, 29, 33, 0.58) 40%, rgba(27, 29, 33, 0.4) 100%),
    linear-gradient(to right, rgba(27, 29, 33, 0.78), rgba(27, 29, 33, 0.12));
}
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(2rem, 4vw, 3rem) var(--gutter);
}

.hero-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.4rem;
  margin: 0 0 1.6rem;
  font-family: var(--display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.hero-kicker span { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero-kicker span::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 1px;
  background: var(--copper);
}

.hero h1, .print-title { margin: 0 0 1.2rem; line-height: 0; }
/* The hero carries the title mark alone (no "Param"); print keeps the full logo. */
.hero h1 .logo, .print-title .logo {
  width: clamp(220px, 34vw, 420px);
  height: auto;
  filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.45));
}

/* "Supported by" + the Ministry of Culture crest, directly under the title
   mark. The crest is the repo SVG (black on transparent, kept vector on
   purpose); a filter turns it cream on the dark hero so the file stays untouched. */
.hero-supported {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0 0 1.8rem;
}
.hero-supported-label {
  font-family: var(--display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.hero-supported img {
  width: auto;
  height: clamp(44px, 6vw, 64px);
  filter: brightness(0) invert(1) sepia(20%) saturate(120%) brightness(0.96) opacity(0.92);
}

.hero-lead {
  max-width: 42rem;
  margin: 0 0 2.2rem;
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  color: rgba(244, 242, 238, 0.88);
}
.hero-lead + .hero-tagline { margin-top: -1.3rem; }
.hero-tagline {
  margin: 0 0 1.8rem;
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-2);
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;   /* spread the stats across the full width */
  gap: 1.2rem 2.6rem;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 1.8rem;
  padding-block: 1.2rem;
  border-block: 1px solid var(--line);
}
.hero-meta div {
  display: flex;
  flex-direction: column;
  align-items: center;     /* number and label share a centre line */
  text-align: center;
  width: fit-content;      /* column is as wide as its widest line */
  padding: 0;
  border: 0;
}
.hero-meta-num {
  font-family: var(--display);
  font-size: clamp(2.6rem, 6vw, 3.8rem);
  font-weight: 900;
  line-height: 0.92;
  text-transform: uppercase;
  color: var(--accent-2);
}
/* The label sits under the number on a single line (a short one aligns to the
   number's width; a longer one keeps its own width rather than being squeezed
   under the number into an ugly stack). */
.hero-meta-label {
  margin-top: 0.45rem;
  font-size: 0.82rem;
  line-height: 1.2;
  color: var(--muted);
  white-space: nowrap;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ---------------------------------------------------- 4. Programme cards */

/* The strand headings are labels, not display type competing with the section
   heading above them: small, spaced, copper, with a rule. */
.group-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 2.8rem 0 1.1rem;
  font-family: var(--display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.group-title::before {
  content: "";
  flex: none;
  width: 20px;
  height: 1px;
  background: var(--copper);
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.section-tint .card { background: var(--bg); }
.card:hover { transform: translateY(-4px); border-color: var(--accent); }

.card-img { aspect-ratio: 3 / 2; overflow: hidden; }
.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.card:hover .card-img img { transform: scale(1.06); }

.card-body { padding: 1.4rem 1.5rem 1.7rem; }
.card-body h4 {
  margin-bottom: 0.55rem;
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--ink);
}
.card-body p { margin: 0; font-size: 0.92rem; color: var(--muted); }

/* -------------------------------------------------------- 5. Feature band */
/* A photograph behind small text, so the scrim is heavier here. Three columns
   holding three items, centred, with the headings given a fixed two-line box
   so every description starts on the same line whatever the title length. */

.feature-band {
  position: relative;
  padding-block: clamp(4rem, 9vw, 7rem);
  overflow: hidden;
}
.feature-band-media { position: absolute; inset: 0; z-index: 0; }
.feature-band-media img { width: 100%; height: 100%; object-fit: cover; }
.feature-band-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(27, 29, 33, 0.92), rgba(27, 29, 33, 0.95));
}
.feature-band-content { position: relative; z-index: 2; }
.feature-band .eyebrow { display: block; text-align: center; }

.also-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 880px;
  margin: 1.8rem auto 0;
}
.also-item {
  padding: 1.7rem 1.3rem;
  text-align: center;
  background: rgba(27, 29, 33, 0.66);
  border: 1px solid rgba(239, 231, 216, 0.14);
  border-radius: var(--radius);
  backdrop-filter: blur(3px);
}
.also-item h4 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.2em;          /* two lines' worth, so the rows align */
  margin-bottom: 0.5rem;
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--accent-2);
}
.also-item p { max-width: 24ch; margin: 0 auto; font-size: 0.9rem; color: var(--muted); }

/* ------------------------------------------------------------ 6. Calendar */
/* One bar per event, stacked in date order. Each leads with its photograph,
   the date reads as a block rather than a line, and the category is carried in
   colour as well as in words so the strands read at a glance. */

.calendar-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin: 1.8rem 0 0.5rem;
}
.chip {
  padding: 0.5rem 1rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.chip:hover { color: var(--ink); border-color: var(--ink); }
.chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--bg); }

.calendar-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 2rem; }

/* Event module: poster on the left, everything derived on the right. */
.cal-event {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  /* Own stacking context: the date chip's z-index stays inside the card and
     can never rise over the sticky view-bar as the card scrolls under it. */
  position: relative;
  z-index: 0;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.section-tint .cal-event { background: var(--bg); }
.cal-event:hover { transform: translateY(-3px); border-color: var(--copper); box-shadow: 0 18px 44px -24px rgba(0, 0, 0, 0.7); }

/* poster */
.cal-poster { position: relative; min-height: 200px; background: var(--bg-2); overflow: hidden; }
.cal-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.cal-poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 52%, var(--bg-3)); }
.section-tint .cal-poster::after { background: linear-gradient(100deg, transparent 52%, var(--bg)); }
.cal-event:hover .cal-poster img { transform: scale(1.04); }
/* no image: a category-tinted ground carrying the date, so the row never looks broken */
.cal-poster--blank { display: grid; place-items: center; }
.cal-poster--blank::after { display: none; }
.cal-event[data-category="Performance"] .cal-poster--blank { background: rgba(255, 90, 60, 0.10); }
.cal-event[data-category="Workshop"]   .cal-poster--blank { background: rgba(200, 121, 65, 0.12); }
.cal-event[data-category="Talk"]       .cal-poster--blank { background: rgba(201, 169, 162, 0.10); }

/* date chip */
.cal-date {
  position: absolute; top: 0.85rem; left: 0.85rem; z-index: 2;
  display: grid; justify-items: center; line-height: 1;
  padding: 0.5rem 0.65rem; border-radius: 7px;
  background: rgba(20, 21, 24, 0.82); backdrop-filter: blur(5px);
  border: 1px solid var(--line-warm);
}
.cal-date b { font-family: var(--display); font-weight: 900; font-style: normal; font-size: 1.55rem; color: var(--ink); }
.cal-date i { font-family: var(--display); font-weight: 700; font-style: normal; font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); margin-top: 0.15rem; }
.cal-poster--blank .cal-date { position: static; background: transparent; border: 0; backdrop-filter: none; padding: 0; }
.cal-poster--blank .cal-date b { font-size: 2.4rem; }
.cal-poster--blank .cal-date i { font-size: 0.7rem; }

/* body */
.cal-body { min-width: 0; padding: 1.25rem 1.4rem 1.35rem; display: flex; flex-direction: column; gap: 0.5rem; }
.cal-head { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.cal-cat { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.64rem; color: var(--accent); }
.cal-event[data-category="Workshop"] .cal-cat { color: var(--accent-2); }
.cal-event[data-category="Talk"] .cal-cat { color: var(--rose); }
.cal-collab { display: inline-flex; color: var(--accent-2); }
.cal-collab svg { width: 15px; height: 15px; }

/* status — quiet icon + label, colour-coded, never a loud badge */
.cal-status { display: inline-flex; align-items: center; gap: 0.35rem; margin-left: auto;
  font-size: 0.63rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-2); }
.cal-status svg { width: 13px; height: 13px; }
.cal-status--live { color: var(--accent-2); }
.cal-status--fast { color: var(--accent); }
.cal-status .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cal-status--live .dot { animation: cal-pulse 1.8s ease-in-out infinite; }
@keyframes cal-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } }
.cal-flame { transform-origin: center bottom; animation: cal-flick 1.6s ease-in-out infinite; }
@keyframes cal-flick { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.14) rotate(-3deg); } }

.cal-title { font-family: var(--display); font-weight: 800; font-size: 1.42rem; line-height: 1.04; color: var(--ink); margin: 0; }

/* meta: date & time carry emphasis; venue is the map link */
.cal-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0; font-size: 0.83rem; color: var(--muted); }
.cal-meta > span { display: inline-flex; align-items: center; gap: 0.35rem; }
.cal-meta svg { width: 14px; height: 14px; }
.cal-date-txt, .cal-time { color: var(--ink); font-weight: 600; }
.cal-time svg { color: var(--accent-2); }
.cal-dur { color: var(--muted-2); font-weight: 400; font-style: normal; }
.cal-map { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--accent-2); text-decoration: none; cursor: pointer; transition: color 0.15s ease; }
.cal-map .cal-venue-name { text-decoration: underline dotted rgba(224, 164, 112, 0.4); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: text-decoration-color 0.15s ease; }
.cal-map::after { content: "↗"; font-size: 1.05em; opacity: 0.7; line-height: 1; }
.cal-map:hover { color: var(--ink); }
.cal-map:hover .cal-venue-name { text-decoration-color: currentColor; }

.cal-desc { margin: 0; font-size: 0.85rem; color: var(--muted-2); }

/* Per-event collaborators: their logos (or names) under the description. */
.cal-collabs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.7rem; margin-top: 0.9rem; }
.cal-collabs-label {
  font-family: var(--display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.cal-collab-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
/* Logos sit on a light chip so a dark or colour logo stays legible on the
   dark card. */
.cal-collab-logo {
  height: 30px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  background: var(--cream);
  border-radius: 4px;
  padding: 3px 6px;
}
.cal-collab-name {
  font-size: 0.8rem;
  color: var(--ink);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 8px;
}
/* Dummy monogram on a card, until the real logo lands. */
.cal-collab-logo--dummy {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 10px;
  background: var(--cream);
  border-radius: 4px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--copper-ox);
}

/* occupancy — the FOMO visual */
.cal-occ { margin-top: 0.15rem; }
.cal-occ-bar { position: relative; height: 5px; border-radius: 3px; background: rgba(239, 231, 216, 0.09); overflow: hidden; }
.cal-occ-fill { height: 100%; border-radius: 3px; background: var(--copper); }
.cal-occ--fast .cal-occ-fill { background: linear-gradient(90deg, var(--copper), var(--accent)); }
.cal-occ--fast .cal-occ-bar::after { content: ""; position: absolute; inset: 0; border-radius: 3px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: translateX(-100%); animation: cal-sweep 2.2s ease-in-out infinite; }
@keyframes cal-sweep { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(220%); } }
.cal-occ-note { margin: 0.35rem 0 0; font-size: 0.72rem; color: var(--muted-2); text-align: right; }
.cal-occ--fast .cal-occ-note { color: var(--accent); font-weight: 600; }

/* action */
.cal-act { margin-top: 0.45rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.75rem; }
/* Provider buttons (BookMyShow, District) always sit side by side. They start
   from zero and grow to their usual width, so in a narrow place — an event
   page's side panel, a phone — the pair shrinks together instead of the second
   one wrapping underneath. A note (.cal-soon) takes its own line. */
.cal-act .btn-logo { flex: 1 1 0; min-width: 0; max-width: 10.5rem; }
.cal-act .cal-soon { flex-basis: 100%; }
.cal-soon { font-size: 0.78rem; font-style: italic; color: var(--muted-2); }

/* sold out: the poster reads as "gone" so the live ones feel alive */
.cal-event.is-full .cal-poster img { filter: grayscale(0.7) brightness(0.7); }
.cal-event.is-full .cal-title { color: var(--muted); }

/* Offered under the list, not above it: the page is the calendar, the PDF is
   the copy you take away. */
.calendar-print {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  margin-top: 1.6rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--line);
}
.calendar-print span { font-size: 0.8rem; color: var(--muted-2); }

/* ------------------------------------------------------------ 7. Partners */

.partners-grid { margin-top: 2.5rem; }
.partners-grid.has-partners {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}
.partners-grid .loading { text-align: center; color: var(--muted-2); }

.partner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 110px;
  padding: 1.2rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--display);
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--copper-ox);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.partner:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.partner img, .partner-logo { max-width: 100%; max-height: 60px; object-fit: contain; }
.partner-logo[alt="Yaksha Kala Academy"] { max-height: 72px; }
/* Wide, low crest: reads small at 60px, so a fifth larger (client, 24 Sep 2026). */
.partner-logo[alt="Ministry of culture"] { max-height: 72px; }
.partner-logo[alt="IME"],
.partner-logo[alt="Chowdiah"] { max-height: 72px; } /* "music academy" ask: IME and Chowdiah (Academy of Music) */
/* Dummy monogram stand-in until a real logo lands. On the cream tile. */
.partner-logo--dummy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 0.5rem 0.9rem;
  border: 1px dashed var(--copper);
  border-radius: 6px;
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--copper-ox);
}

.partners-empty {
  padding: 2.5rem 1.5rem;
  border: 1px dashed var(--line);
  border-radius: 10px;
  text-align: center;
}
.partners-empty p { margin: 0 0 1.3rem; color: var(--muted); }

/* ------------------------------------------------------------- 8. Support */
/* Maroon is a strong ground: it wants type and rules, not floating cards, and
   a paper-coloured button rather than another warm one fighting it. */

.support-v2 { background: var(--maroon); }
.support-v2 h2,
.support-v2 dt { color: var(--ink); }                      /* 12.74 */
.support-v2 p,
.support-v2 dd { color: var(--muted); }                    /* 7.41 */
.support-v2 .eyebrow { color: var(--accent-2); }           /* 7.24 */
.support-v2 h2 { margin-bottom: 1.1rem; }
.support-v2 .col-text p { max-width: 44ch; }

/* The grid centres its columns by default, which floats the copy against a
   list that starts at the top. Both columns start on the same line instead. */
.support-v2 .grid-2 {
  align-items: start;
  gap: clamp(2rem, 5vw, 3.6rem);
}

/* The three points as a list divided by hairlines. */
.support-points { display: grid; align-content: start; margin: 0; }
.support-points > div { padding: 1.15rem 0; border-top: 1px solid var(--line-warm); }
/* The first rule would sit above the list's first line and out of step with
   the eyebrow opposite, so it is dropped and the rules go between items. */
.support-points > div:first-child { padding-top: 0.35rem; border-top: 0; }
.support-points dt {
  margin-bottom: 0.3rem;
  font-family: var(--display);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.support-points dd { max-width: 46ch; margin: 0; font-size: 0.92rem; line-height: 1.6; }

/* Equal width, on one row, and both plainly buttons — the outlined one read as
   loose text against the red until it kept a visible border. */
.support-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.7rem;
}
.support-actions .btn {
  flex: 1 1 0;
  min-width: 12.5rem;
  padding: 0.85rem 1rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

/* -------------------------------------------------------- 9. Onboarding */
/* Mobile is the case that matters: progress, one question and its buttons
   should sit in a single screen with no scrolling. */

.onboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.onboard-main { position: relative; }

.onboard-progress {
  height: 4px;
  margin-bottom: 0.7rem;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.onboard-bar {
  display: block;
  width: 0;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.onboard-step {
  margin: 0 0 1.1rem;
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.onboard-card {
  padding: clamp(1.3rem, 4vw, 1.9rem);
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.section-tint .onboard-card { background: var(--bg); }

/* The card is a fieldset, so the legend labels the group. */
.onboard-question { min-width: 0; margin: 0; }
.onboard-question legend {
  /* A legend normally straddles the top border; floating it makes it behave
     as an ordinary block inside the card. */
  float: left;
  width: 100%;
  margin-bottom: 0.5rem;
  padding: 0;
  font-family: var(--display);
  font-size: clamp(1.25rem, 3.4vw, 1.7rem);
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--ink);
}
p.onboard-hint { clear: both; margin: 0 0 1.1rem; font-size: 0.9rem; color: var(--muted); }
p.onboard-error { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--accent); }

.choices { clear: both; display: grid; gap: 0.55rem; margin-bottom: 1.1rem; }
.choice {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.95rem;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.choice:hover { border-color: var(--muted-2); }
.choice input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.choice:has(input:checked) { border-color: var(--accent); background: rgba(255, 90, 60, 0.08); }

/* An arrow either side of the question block. */
.onboard-carousel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "prev stage next";
  align-items: center;
  gap: 0.8rem;
}
.onboard-stage { grid-area: stage; min-width: 0; }
.onboard-arrow-prev { grid-area: prev; }
.onboard-arrow-next { grid-area: next; }

.onboard-arrow {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.onboard-arrow:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.onboard-arrow:disabled { opacity: 0.25; cursor: default; }
.onboard-arrow-next svg { transform: rotate(180deg); }
/* Keeps its grid space, so the block does not shift when it goes away. */
.onboard-arrow.is-gone { visibility: hidden; }

/* The final submit sits centred, not stretched across the card. */
.onboard-signup .btn-block {
  display: block;
  width: auto;
  min-width: 220px;
  margin-inline: auto;
}

.onboard-change {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1.1rem;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
}
.onboard-change:hover { color: var(--accent); }

/* ------------------------------------------------------- 10. In-page views */
/* Not separate files: these overlay the page, and "back" simply hides them
   again, leaving the main page exactly where it was. */

.page-view {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: view-in 0.22s ease both;
}
@keyframes view-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* The main page must not scroll behind an open view. */
body.view-open { overflow: hidden; }

.view-bar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.6rem;
  background: rgba(27, 29, 33, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.view-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.view-back:hover { border-color: var(--accent); color: var(--accent); }
.view-bar-title {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
/* View heading: the festival mark sits beside the eyebrow + title. */
.view-head { display: flex; align-items: center; gap: 1.6rem; margin-bottom: 1rem; }
.view-head-logo { flex: none; line-height: 0; }
.view-head .logo { height: 76px; width: auto; }
/* Volunteer signup closed: the #volunteer view shows a notice only. */
.volunteer-closed { max-width: 40rem; padding-block: 1rem 3rem; }
.volunteer-closed .volunteer-closed-msg { font-size: 1.35rem; line-height: 1.4; margin: 1rem 0; }
.view-head .eyebrow { margin-bottom: 0.4rem; }
.view-head h2 { margin: 0; }
.view-body > .section { padding-top: 2.6rem; }

/* ------------------------------------------------------ 10b. Event pages */
/* event/?e=<slug>. The banner is the ticket-platform artwork with the title set
   into it, so it is shown whole at its own 2:1 ratio and never cropped. The
   stand-in sits underneath; when the image loads it covers it, when there is
   none the stand-in is what shows. */

.page-event .nav-links a[href="#calendar"] { color: var(--ink); }
.ev-page { padding: 2rem 0 4rem; min-height: 60vh; }
.ev-back {
  display: inline-block; margin-bottom: 1.2rem; font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); text-decoration: none;
}
.ev-back:hover { color: var(--accent); }

.ev-banner {
  position: relative; margin: 0 0 2.4rem; aspect-ratio: 2 / 1; overflow: hidden;
  border-radius: var(--radius); background: var(--bg-3); border: 1px solid var(--line);
}
.ev-banner picture, .ev-banner img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ev-banner img { object-fit: contain; }
.ev-banner.has-image { background: var(--bg-2); }
.ev-banner.has-image .ev-standin { visibility: hidden; }

.ev-standin {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  gap: 0.6rem; padding: clamp(1.2rem, 4vw, 3rem);
}
.ev-standin-kicker {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--copper);
}
.ev-standin-title {
  font-family: var(--display); font-weight: 800; text-transform: uppercase; line-height: 0.98;
  font-size: clamp(1.4rem, 4vw, 2.8rem); max-width: 18ch; color: var(--ink);
}
/* the festival's block motif: three squares, the fourth corner empty */
.ev-standin-motif {
  position: absolute; top: clamp(1.2rem, 4vw, 3rem); right: clamp(1.2rem, 4vw, 3rem);
  display: grid; grid-template-columns: repeat(3, 1.1rem); grid-template-rows: repeat(2, 1.1rem);
}
.ev-standin-motif i { display: block; background: var(--accent); }
.ev-standin-motif i:nth-child(1) { grid-column: 2; grid-row: 1; }
.ev-standin-motif i:nth-child(2) { grid-column: 1; grid-row: 2; background: var(--copper); }
.ev-standin-motif i:nth-child(3) { grid-column: 3; grid-row: 2; }

.ev-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 2.4rem; }
.ev-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.7rem; }
.ev-title {
  font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em;
  font-size: clamp(1.7rem, 4vw, 2.6rem); line-height: 1.02; margin: 0 0 1.1rem; text-wrap: balance;
}
p.ev-desc { font-size: 1.08rem; line-height: 1.65; color: var(--muted); max-width: 58ch; margin: 0; }

.ev-side {
  align-self: start; background: var(--bg-3); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.4rem;
}
.ev-facts { margin: 0 0 1.3rem; display: grid; gap: 0.9rem; }
.ev-facts div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.8rem; align-items: baseline; }
.ev-facts dt {
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--copper);
}
.ev-facts dd { margin: 0; font-size: 0.95rem; color: var(--ink); }
.ev-act { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.ev-missing { padding: 3rem 0; }
.ev-missing h1 {
  font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 1.8rem; margin: 0 0 0.6rem;
}
.ev-missing p { color: var(--muted); }

/* calendar rows with a page: the whole row opens it; buttons keep their own jobs */
.cal-event.has-page { cursor: pointer; }
.cal-title-link { color: inherit; text-decoration: none; }
.cal-event.has-page:hover .cal-title-link { color: var(--accent); }
.cal-title-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* --------------------------------------------------------- 11. Responsive */
/* Largest first, so a value is only ever overridden by a narrower screen. */

@media (max-width: 900px) {
  /* A tablet puts the event details panel under the description, full width,
     so its two booking buttons always have room side by side. */
  .ev-grid { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .partners-grid.has-partners { grid-template-columns: repeat(3, 1fr); }

  .onboard { grid-template-columns: 1fr; gap: 1.4rem; }
  /* On a phone the marketing copy would push the question off-screen; the
     heading alone carries enough context. */
  .onboard-aside p,
  .onboard-aside .fact-list { display: none; }
  .onboard-aside h2 { font-size: clamp(1.6rem, 7vw, 2.2rem); margin-bottom: 0; }
  .page-view .section { padding-block: 1.6rem 2.4rem; }
}

@media (max-width: 760px) {
  /* Keep all three stats on one row on phones; shrink the number to fit. */
  .hero-meta { flex-wrap: nowrap; gap: 0.8rem; }
  .hero-meta div { flex: 1 1 0; width: auto; min-width: 0; }
  .hero-meta-num { font-size: clamp(1.7rem, 9vw, 2.6rem); }
  .hero-meta-label { width: auto; min-width: 0; white-space: normal; }

  .also-grid { grid-template-columns: 1fr; max-width: 420px; }
  .also-item h4 { min-height: 0; }

  /* Poster on top, body beneath. */
  .cal-event { grid-template-columns: 1fr; }
  .cal-poster { min-height: 168px; }
  .cal-poster::after { background: linear-gradient(transparent 45%, var(--bg-3)); }
  .section-tint .cal-poster::after { background: linear-gradient(transparent 45%, var(--bg)); }
  .cal-status { margin-left: 0; }
}

@media (max-width: 560px) {
  /* No room to flank the card on a phone: the arrows sit beneath it, still
     one on each side. "auto" columns collapse here because the stage spans
     both, so the two are given equal width and pushed to the outer edges. */
  .onboard-carousel {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "stage stage"
      "prev  next";
    row-gap: 0.7rem;
  }
  .onboard-arrow-prev { justify-self: start; }
  .onboard-arrow-next { justify-self: end; }
  .onboard-arrow { width: 48px; height: 48px; }
  /* On the signup card the arrow row is dead weight — "Change my answers"
     already goes back — and the space keeps the form on one screen. */
  .onboard-carousel.is-done { row-gap: 0; }
  .onboard-carousel.is-done .onboard-arrow { display: none; }

  .onboard-card { padding: 1rem; }
  .onboard-question legend { font-size: 1.15rem; margin-bottom: 0.35rem; }
  .onboard-hint { margin-bottom: 0.75rem; font-size: 0.83rem; }
  .onboard-progress { margin-bottom: 0.5rem; }
  .onboard-step { margin-bottom: 0.6rem; font-size: 0.68rem; }
  .onboard-change { margin-bottom: 0.9rem; }
  .onboard-signup .field { margin-bottom: 0.85rem; }
  .onboard-signup .check-consent { margin-bottom: 0.9rem; font-size: 0.7rem; }

  .choices { gap: 0.4rem; margin-bottom: 0.4rem; }
  .choice { gap: 0.6rem; padding: 0.6rem 0.8rem; font-size: 0.88rem; line-height: 1.35; }
  .choice input { width: 17px; height: 17px; }

  .page-view .section { padding-block: 1rem; }
}

@media (max-width: 520px) {
  .view-bar { padding: 0.75rem 1rem; }
  .view-bar-title { display: none; }
  .view-head { gap: 1rem; }
  .view-head .logo { height: 56px; }

  .partners-grid.has-partners { grid-template-columns: repeat(2, 1fr); }

  /* Still all three on one row (set at 760px); just a touch tighter. */
  .hero-meta { gap: 0.6rem; }

  /* On a phone the actions fill the row: one button takes the full width, two
     (BookMyShow + District) sit side by side at equal width. Only size is set
     here, never display — a display rule here once overrode .btn-logo's
     centring and pushed the provider logos into the top-left corner. */
  .cal-act { flex-wrap: wrap; align-items: stretch; }
  .cal-act .btn { flex: 1 1 0; min-width: 0; text-align: center; }
  .cal-act .btn-logo { padding-left: 0.5rem; padding-right: 0.5rem; }
  .cal-act .cal-soon { flex-basis: 100%; text-align: center; }
}

/* -------------------------------------------------------------- 12. Print */
/* The printed edition of this page. Every coloured ground goes to the cream
   sheet set in styles.css, the harlequin seam survives as the festival's mark,
   and the blocks that are a list on screen become columns on paper. */

@media print {
  /* An open view is what the reader is looking at, so it is what prints: the
     overlay stops being an overlay and becomes the document, and the page it
     was covering steps aside. A closed view still carries [hidden], so only
     ever one of them can be on the sheet. */
  .page-view {
    position: static !important;
    overflow: visible !important;
    background: transparent !important;
    animation: none !important;
  }
  body.view-open > *:not(.page-view) { display: none !important; }
  /* The breathing space around the sheet, enforced as content padding so it
     holds regardless of the browser's print-margin choice. */
  .page-view .view-body { padding: 15mm 15mm 13mm !important; }
  .page-view .view-body > .section { padding: 0 !important; border-top: 0; }
  .page-view .wrap { max-width: none !important; margin: 0 !important; padding: 0 !important; }

  /* ----- grounds ----- */
  .section-tint,
  .section-cream,
  .section-oxblood,
  .support-v2,
  .feature-band,
  .cal-event,
  .card,
  .also-item,
  .partner,
  .onboard-card {
    background: transparent !important;
    color: var(--ink) !important;
  }
  .section-cream p,
  .section-oxblood p,
  .support-v2 p,
  .support-v2 dd { color: var(--muted) !important; }
  .section-oxblood .eyebrow,
  .support-v2 .eyebrow,
  .section-oxblood .lead-line { color: var(--copper) !important; }
  .section-oxblood a:not(.btn),
  .section-cream a:not(.btn) { box-shadow: none !important; }

  /* The harlequin is the festival's mark. It costs 3mm of copper and it is the
     one thing that says at a glance which festival the sheet belongs to, so it
     is kept — as a rule between movements rather than a band. */
  .seam { height: 3mm; opacity: 1; margin: 4mm 0 0; break-after: avoid; }
  .seam-scallop { display: none; }
  .seam-harlequin {
    background: repeating-conic-gradient(from 45deg at 50% 50%,
                var(--copper) 0deg 90deg, transparent 90deg 180deg) 0 0 / 3mm 3mm;
    background-color: transparent;
  }
  /* The seam already divides, so the section beneath it does not need a rule. */
  .seam + .section { border-top: 0; padding-top: 4mm; }

  /* ----- masthead ----- */
  /* The hero is the title page: wordmark, dateline, the sentence that says
     what this is, and the three numbers as a standing head. */
  .hero {
    display: block;
    min-height: 0;
    overflow: visible;
    padding-bottom: 5mm;
    border-bottom: 0.8pt solid var(--rule);
    break-after: avoid;
  }
  /* Where a seam follows, it is the divider — two rules 3mm apart read as a
     mistake rather than a device. */
  .hero:has(+ .seam) { border-bottom: 0; padding-bottom: 2mm;
  }
  .hero-content { padding: 0; max-width: none; }
  .hero-kicker {
    color: var(--copper) !important;
    font-size: 7pt;
    letter-spacing: 0.18em;
    margin-bottom: 3mm;
  }
  .hero-kicker span::before { background: var(--copper); }
  .hero h1, .print-title { margin-bottom: 3mm; }
  .hero h1 .logo, .print-title .logo { width: 62mm; filter: none; }
  .hero-supported { margin-bottom: 3mm; }
  .hero-supported img { height: 11mm; filter: none; }
  .hero-supported-label { color: var(--muted) !important; }
  .hero-lead {
    max-width: 120mm;
    font-size: 10pt;
    color: var(--muted) !important;
    margin-bottom: 4mm;
  }
  .hero-meta {
    max-width: none;
    margin-bottom: 0;
    flex-wrap: nowrap;
    border-block: 0.6pt solid var(--rule);
  }
  .hero-meta div { flex: 1 1 0; padding: 2.5mm 4mm 2.5mm 0; border-right: 0; }
  .hero-meta-num { color: var(--copper) !important; font-size: 12pt; }
  .hero-meta-label { color: var(--muted) !important; font-size: 7.2pt; margin-top: 1mm; }
  .hero-actions { display: none; }

  /* ----- programme ----- */
  .group-title {
    color: var(--copper) !important;
    font-size: 7pt;
    margin: 5mm 0 2.5mm;
    break-after: avoid;
  }
  .group-title::before { background: var(--copper); }

  /* Three across rather than two: the pictures stay large enough to read and
     a strand fits on one row instead of straddling a page break. */
  .cards-2, .cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4mm; }
  .card {
    border: 0.5pt solid var(--line) !important;
    border-radius: 0;
    break-inside: avoid;
  }
  /* A card row cannot split across a page, so a tall row leaves a third of the
     sheet blank. Shorter pictures and tighter copy fit two strands per page. */
  .card-img { aspect-ratio: 16 / 9; }
  .card-body { padding: 2.5mm; }
  .card-body h4 { font-size: 8.4pt; margin-bottom: 1.2mm; }
  .card-body p { font-size: 7pt; line-height: 1.35; color: var(--muted) !important; }

  /* ----- also includes ----- */
  .also-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4mm; max-width: none; margin-top: 4mm; }
  .also-item {
    padding: 3mm;
    border: 0.5pt solid var(--line) !important;
    border-radius: 0;
    backdrop-filter: none;
    break-inside: avoid;
  }
  .also-item h4 { color: var(--copper) !important; font-size: 8.4pt; min-height: 0; display: block; }
  .also-item p { color: var(--muted) !important; font-size: 7.6pt; max-width: none; }
  .feature-band { padding-block: 6mm 0; border-top: 0.6pt solid var(--rule); }

  /* ----- calendar, two columns ----- */
  /* Twelve events down one column is two thin pages; in two columns the whole
     festival lands on one sheet, which is the form people actually pin up. */
  .calendar-list { display: block; column-count: 2; column-gap: 8mm; margin-top: 4mm; }
  .cal-event {
    display: block;
    padding: 2.2mm 0;
    background: transparent !important;
    border: 0 !important;
    border-top: 0.5pt solid var(--line) !important;
    border-radius: 0;
    transform: none !important;
    break-inside: avoid;
  }
  .cal-poster { display: none; }        /* the printed list reads faster without them */
  .cal-body { padding: 0; gap: 1mm; }
  .cal-head { gap: 1mm; }
  .cal-collab, .cal-status, .cal-occ, .cal-act, .cal-desc { display: none; }
  .cal-cat { color: var(--copper) !important; font-size: 5.6pt; }
  .cal-title { font-size: 8.6pt; margin: 0; line-height: 1.15; }
  .cal-meta { color: var(--muted) !important; font-size: 7.2pt; gap: 0.5mm 3mm; }
  .cal-date-txt, .cal-time { color: var(--ink) !important; }
  .cal-meta svg { display: none; }
  .cal-map { color: var(--muted) !important; }
  /* beat the global a[href^="http"]::after URL-expansion (attribute selector
     out-specifies a bare class), so the map URL never prints beside the venue */
  .cal-map[href^="http"]::after { content: ""; }
  .cal-map .cal-venue-name { text-decoration: none; }

  /* ----- printable calendar: masthead, footer, no links ----- */
  .print-only { display: block; }

  /* The screen heading gives way to the festival masthead on paper. */
  #calendar .eyebrow,
  #calendar .view-head,
  #calendar .section-intro { display: none; }

  /* Masthead reuses the home hero's kicker + title styles (.hero-kicker and
     .hero h1) — no bespoke print title. Just the spacing before the schedule. */
  .print-head { margin: 0 0 9mm; padding-bottom: 5mm; border-bottom: 0.6pt solid var(--rule); }

  .print-foot { margin-top: 9mm; padding-top: 5mm; border-top: 0.6pt solid var(--rule);
    display: flex; align-items: center; justify-content: center; gap: 5mm; break-inside: avoid; }
  .print-qr { width: 24mm; height: 24mm; }
  .print-foot-text { text-align: left; }
  .print-foot-lead { font-family: var(--display); font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; font-size: 8.5pt; color: var(--ink) !important; margin: 0; }
  .print-foot-url { font-size: 7.5pt; color: var(--copper) !important; margin: 1.5mm 0 0; }

  /* No live affordances on paper: links read as plain text, no URLs. */
  #calendar a { color: var(--ink) !important; text-decoration: none !important; }
  #calendar a[href]::after { content: "" !important; }

  /* ----- partners ----- */
  .partners-grid.has-partners { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3mm; margin-top: 4mm; }
  .partner {
    min-height: 0;
    padding: 2.5mm;
    border: 0.5pt solid var(--line) !important;
    border-radius: 0;
    color: var(--muted) !important;
    font-size: 7pt;
    break-inside: avoid;
  }

  /* ----- support ----- */
  .support-points { column-count: 2; column-gap: 8mm; display: block; }
  .support-points > div {
    padding: 2mm 0;
    border-top: 0.5pt solid var(--line) !important;
    break-inside: avoid;
  }
  .support-points > div:first-child { padding-top: 2mm; border-top: 0.5pt solid var(--line) !important; }
  .support-points dt { color: var(--ink) !important; font-size: 8pt; }
  .support-points dd { font-size: 7.6pt; max-width: none; line-height: 1.4; }
  .support-actions { display: none; }

  /* ----- the forms, unfolded ----- */
  /* On screen the carousel shows one card at a time and "next" reveals the
     rest. Paper has no next button, so every question and the details block
     are laid onto the sheet. The specificity here has to beat [hidden]. */
  .page-view .onboard-question[hidden],
  .page-view .onboard-signup[hidden] { display: block !important; }
  .page-view .onboard-question + .onboard-question,
  .page-view .onboard-signup { margin-top: 5mm; }

  /* Paper has the room the phone did not, so the context comes back. */
  .onboard-aside p,
  .onboard-aside .fact-list { display: revert; }
  .onboard { grid-template-columns: 1fr; gap: 5mm; }
  .onboard-carousel { display: block; }
  .onboard-card { padding: 0; border: 0 !important; break-inside: avoid; }
  .onboard-question legend { font-size: 11pt; margin-bottom: 1.5mm; }
  p.onboard-hint { color: var(--muted) !important; font-size: 8pt; margin-bottom: 2.5mm; }

  /* Seven options down one column is half a page of white; in two they sit
     under the question they belong to. */
  .choices { display: block; column-count: 2; column-gap: 6mm; margin-bottom: 0; }
  .choice {
    padding: 1.6mm 2mm;
    margin-bottom: 1.5mm;
    border: 0.5pt solid var(--line) !important;
    border-radius: 0;
    color: var(--ink) !important;
    font-size: 8pt;
    break-inside: avoid;
  }
  /* The name, email and phone boxes stay full width — they are written into. */
  .onboard-signup .field { break-inside: avoid; }
}