/* ==========================================================================
   styles.css — Wedding Invitation
   Mobile-first, token-driven, zero dependencies
   ========================================================================== */

/* ----- Reset / Base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--c-ink);
  background: var(--c-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Focus visible for keyboard nav */
:focus { outline: none; }
:focus-visible {
  outline: var(--bw-2) solid var(--c-focus);
  outline-offset: 2px;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--gutter);
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-primary);
  color: var(--c-on-primary);
  border-radius: var(--r-md);
  z-index: var(--z-modal);
  text-decoration: none;
  font-weight: var(--fw-semibold);
}
.skip-link:focus { top: var(--safe-top); }

/* ----- Layout ------------------------------------------------------------ */
.section {
  padding: 0 var(--gutter);
  margin-bottom: var(--section-gap);
}
.section:last-of-type { margin-bottom: 0; }

.card {
  background: var(--c-surface);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--sh-sm);
  max-width: var(--page-max);
  margin: 0 auto;
}

@media (min-width: 768px) {
  .card { padding: var(--sp-7); }
}

/* ----- Typography -------------------------------------------------------- */
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--c-ink); }
p { margin: 0 0 var(--sp-3); max-width: var(--content-measure); }
p:last-child { margin-bottom: 0; }

.section-heading { font-size: var(--fs-xl); margin-bottom: var(--sp-4); }
.eyebrow { font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--c-ink-muted); margin-bottom: var(--sp-2); }
.lead { font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--c-ink-muted); }
.caption { font-size: var(--fs-xs); color: var(--c-ink-muted); }
.label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); display: block; margin-bottom: var(--sp-2); }
.hint { font-size: var(--fs-xs); color: var(--c-ink-muted); display: block; margin-top: var(--sp-1); min-height: 1.2em; }
.hint.error { color: var(--c-error); }
.hint.success { color: var(--c-success); }

/* =========================================================================
   OPENING GATE (tap-to-play sound modal)
   The markup existed but had NO styles — it rendered as a bare block with the
   invitation showing through it. This is the first thing a guest sees.
   ========================================================================= */
.gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--sp-5, 24px);
  transition: opacity 420ms ease;
}
.gate[hidden] { display: none; }

.gate-backdrop {
  position: absolute;
  inset: 0;
  background: var(--c-surface-sunken, #0A0D22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.gate-card {
  position: relative;
  width: min(100%, 34rem);
  padding: var(--sp-7, 40px) var(--sp-6, 28px);
  text-align: center;
  background: var(--c-surface, #171C44);
  border: 1px solid var(--c-border, rgba(255,255,255,0.14));
  border-radius: var(--radius-panel, 14px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.gate-title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl, 2rem);
  line-height: 1.25;
  margin: 0 0 var(--sp-2, 10px);
  color: var(--c-ink, #F5F1E8);
}
.gate-subtitle {
  color: var(--c-ink-muted, #BBB6D9);
  margin: 0 0 var(--sp-6, 28px);
}
.gate-sound-hint,
.gate-sound-note {
  color: var(--c-ink-subtle, #8F8AB8);
  font-size: var(--fs-sm, 0.875rem);
  margin: var(--sp-3, 16px) 0 0;
}
.gate-sound-toggle {
  display: flex;
  gap: var(--sp-3, 16px);
  justify-content: center;
  margin-top: var(--sp-3, 16px);
}
.gate-sound-toggle .btn { flex: 0 1 auto; min-width: 8.5rem; }

@media (prefers-reduced-motion: reduce) {
  .gate { transition: none; }
}

/* ----- Hero -------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 60vh;
  max-height: 700px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-9) var(--gutter);
  margin-bottom: var(--section-gap);
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  /* The couple's photo was preloaded in index.html but never displayed —
     that was ~150 KB of wasted bytes on mobile data. Wire it in here. */
  background-color: var(--c-surface-sunken);
  background-image: url('/assets/photo/couple-560.webp'), url('/assets/photo/couple-560.jpg');
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  z-index: -1;
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Keep the names legible over the photo — the gradient alone was too light. */
  background:
    linear-gradient(180deg, rgba(10,13,34,0.62) 0%, rgba(10,13,34,0.55) 40%, var(--c-bg) 100%),
    linear-gradient(180deg, transparent 40%, var(--c-bg));
  pointer-events: none;
}
.hero-content { max-width: var(--page-max); }
.hero-greeting { font-size: var(--fs-lg); color: var(--c-ink-muted); margin-bottom: var(--sp-2); }
.hero-names { font-size: var(--fs-hero); letter-spacing: var(--ls-tight); margin: 0 0 var(--sp-3); }
.hero-date { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-semibold); color: var(--c-primary); margin-bottom: var(--sp-1); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-1) var(--sp-2); }
.countdown-value { font-variant-numeric: tabular-nums; }
.countdown-label { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--c-ink-muted); text-transform: uppercase; letter-spacing: var(--ls-wide); margin-right: var(--sp-3); }
.countdown-caption { font-size: var(--fs-sm); color: var(--c-ink-muted); margin-bottom: var(--sp-4); }
.hero-place { font-size: var(--fs-md); color: var(--c-ink-muted); margin: 0; }

@media (min-width: 480px) {
  .hero { min-height: 65vh; }
}

/* ----- Details ----------------------------------------------------------- */
.details-grid { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-5); }
.details-grid dt { font-weight: var(--fw-semibold); color: var(--c-ink-muted); }
.details-grid dd { margin: 0; }
.address { white-space: pre-line; }

/* ----- Schedule ---------------------------------------------------------- */
.schedule-intro { margin-bottom: var(--sp-4); }
.schedule-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.schedule-list li {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: var(--bw-1) solid var(--c-border);
}
.schedule-list li:last-child { border-bottom: none; padding-bottom: 0; }

/* Day separator inside the schedule (the celebration runs past midnight) */
.schedule-list li.schedule-day {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding-top: var(--sp-4);
  margin-top: var(--sp-2);
  border-top: 1px solid var(--c-border, rgba(255,255,255,0.14));
  color: var(--c-primary, #C9A227);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.schedule-list li.schedule-day .schedule-event { font-weight: 400; opacity: 0.8; }
.schedule-time { font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); white-space: nowrap; color: var(--c-primary); }
.schedule-event { color: var(--c-ink); }

/* ----- Travel ------------------------------------------------------------ */
.travel-card { background: var(--c-surface-alt); }
.travel-card p { margin: 0; }

/* ----- Gallery ----------------------------------------------------------- */
.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.gallery-grid img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: var(--r-md);
  background: var(--c-surface-sunken);
}
@media (min-width: 768px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } }

/* ----- Forms ------------------------------------------------------------- */
.form-group { margin-bottom: var(--sp-5); }
.form-group:last-of-type { margin-bottom: var(--sp-3); }

input[type="text"],
input[type="email"],
select,
textarea {
  width: 100%;
  font: inherit;
  font-size: var(--fs-base);
  padding: var(--sp-3) var(--sp-4);
  border: var(--bw-1) solid var(--c-border-strong);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-ink);
  min-height: var(--tap-min);
  transition: border-color var(--dur-1) var(--ease-standard), box-shadow var(--dur-1) var(--ease-standard);
}
input[type="text"]:hover,
select:hover { border-color: var(--c-ink-muted); }
input[type="text"]:focus,
select:focus,
textarea:focus { border-color: var(--c-focus); box-shadow: 0 0 0 4px var(--c-primary-tint); }
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] { border-color: var(--c-error); }
input[aria-invalid="true"]:focus,
select[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px var(--c-error-tint); }

input[disabled], select[disabled], textarea[disabled] { background: var(--c-disabled-bg); color: var(--c-disabled-ink); cursor: not-allowed; }

/* Radio group */
.radio-group { display: flex; flex-direction: column; gap: var(--sp-3); }
.radio-option { display: flex; align-items: center; gap: var(--sp-3); }
.radio-option input[type="radio"] {
  width: 24px; height: 24px;
  accent-color: var(--c-primary);
  border: var(--bw-1) solid var(--c-border-strong);
  border-radius: var(--r-circle);
  flex-shrink: 0;
  cursor: pointer;
}
.radio-option label { cursor: pointer; font-weight: var(--fw-regular); }
.radio-option:has(input:focus-visible) label { color: var(--c-primary); }

/* Checkbox group */
.checkbox-group { display: flex; flex-direction: column; gap: var(--sp-3); }
.checkbox-option { display: flex; align-items: center; gap: var(--sp-3); }
.checkbox-option input[type="checkbox"] {
  width: 24px; height: 24px;
  accent-color: var(--c-primary);
  border: var(--bw-1) solid var(--c-border-strong);
  border-radius: var(--r-sm);
  flex-shrink: 0;
  cursor: pointer;
}
.checkbox-option label { cursor: pointer; font-weight: var(--fw-regular); }

/* ----- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font: inherit;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  padding: var(--sp-3) var(--sp-6);
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  text-decoration: none;
  min-height: var(--tap-comfortable);
  transition: background-color var(--dur-1) var(--ease-standard), transform var(--dur-1) var(--ease-standard), box-shadow var(--dur-1) var(--ease-standard);
}
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline-offset: 2px; }

.btn-primary {
  background: var(--c-primary);
  color: var(--c-on-primary);
  box-shadow: var(--sh-xs);
}
.btn-primary:hover { background: var(--c-primary-pressed); }
.btn-primary:disabled { background: var(--c-disabled-bg); color: var(--c-disabled-ink); box-shadow: none; cursor: not-allowed; transform: none; }

.btn-outline {
  background: transparent;
  color: var(--c-primary);
  border: var(--bw-2) solid var(--c-primary);
}
.btn-outline:hover { background: var(--c-primary-tint); }
.btn-outline:disabled { border-color: var(--c-disabled-ink); color: var(--c-disabled-ink); cursor: not-allowed; }

.btn-block { width: 100%; }

.btn-share {
  background: #25D366;
  color: #FFFFFF;
  border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-5);
  min-width: 160px;
}
.btn-share:hover { background: #1DA851; }
.btn-share svg { flex-shrink: 0; }

/* Background music control. Deliberately NOT green: btn-share is WhatsApp and
   two green buttons side by side read as one action. */
.btn-music {
  background: transparent;
  color: inherit;
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-5);
  min-width: 160px;
  opacity: .8;
}
.btn-music:hover { opacity: 1; }
.btn-music[aria-pressed="true"] {
  opacity: 1;
  border-color: var(--c-primary);
  color: var(--c-primary);
}
.btn-music:disabled { opacity: .45; cursor: not-allowed; }
.btn-music [data-music-icon] { font-size: 1.1em; line-height: 1; }

/* ----- Status Banners ---------------------------------------------------- */
.status-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  margin-top: var(--sp-5);
  animation: fadeIn var(--dur-2) var(--ease-out);
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.status-banner h3 { margin: 0; font-size: var(--fs-lg); }
.status-banner p { margin: 0; font-size: var(--fs-base); }

.status-success { background: var(--c-success-tint); color: var(--c-success); border: var(--bw-1) solid var(--c-success); }
.status-error { background: var(--c-error-tint); color: var(--c-error); border: var(--bw-1) solid var(--c-error); }

.spinner {
  width: 20px; height: 20px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; border-right-color: currentColor; } }

/* ----- Footer ------------------------------------------------------------ */
.footer {
  background: var(--c-footer-bg);
  color: var(--c-footer-ink);
  padding: var(--sp-8) var(--gutter) var(--safe-bottom);
  text-align: center;
  margin-top: auto;
}
.footer p { color: inherit; max-width: none; }
.footer-line { font-size: var(--fs-md); font-weight: var(--fw-semibold); margin-bottom: var(--sp-2); }
.footer-thanks { font-size: var(--fs-base); margin-bottom: var(--sp-3); opacity: 0.9; }
.footer-contact { font-size: var(--fs-sm); color: var(--c-footer-ink-muted); margin-bottom: var(--sp-2); }
.footer-languages { font-size: var(--fs-xs); color: var(--c-footer-ink-muted); margin-bottom: var(--sp-4); }
.footer-privacy { font-size: var(--fs-xs); color: var(--c-footer-ink-muted); max-width: var(--content-measure); margin: 0 auto; line-height: var(--lh-relaxed); }

/* ----- Reveal on scroll -------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ----- Utilities --------------------------------------------------------- */
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* ----- Family section ---------------------------------------------------- */
/* Generated from family/family.csv. Only the tokens used elsewhere are
   referenced here, so this works under all five design themes. */
.family .section-heading { margin-bottom: var(--sp-4); }

.family__host {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--c-ink);
  text-align: center;
  margin-bottom: var(--sp-5);
}
.family__host-deva {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--c-ink);
  text-align: center;
  margin-bottom: var(--sp-2);
}

.family__group,
.family__native,
.family__elders,
.family__pet,
.family__contact {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-muted);
  text-align: center;
  margin-bottom: var(--sp-3);
  max-width: var(--content-measure);
  margin-inline: auto;
}

.family__group-label {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--c-primary);
  margin-bottom: var(--sp-1);
}

@media (min-width: 768px) {
  .family__host { font-size: var(--fs-xl); }
}

/* TEMPORARY (design review): clears the fixed design-switcher bar so it never
   covers the footer. Remove together with SHOW_DESIGN_SWITCHER=False in
   docs/design/build-design-shells.py once a design is approved. */
body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

/* ----- Family tree -------------------------------------------------------
 * These classes are emitted by family/build_family.py, which splits each side
 * of the family into its own labelled section with one row per person:
 *
 *   .family__tree            the two sides, side by side
 *   .family__side            one side
 *   .family__side-label      its heading, वधू पक्ष / वर पक्ष
 *   .family__nodes           the list of people
 *   .family__node            one person
 *   .family__rel             their relationship
 *   .family__name            their name
 *   .family__node--unlabelled  a person whose relationship is not confirmed,
 *                             so only the name prints
 *
 * They arrived with no CSS at all, which rendered a bare bulleted list with
 * English relationship words. These rules are duplicated verbatim into
 * styles.css and d/designs.css on purpose: the two files share almost no
 * rules, and only these tokens exist in both.
 */
.family__tree {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5) var(--sp-6);
  margin: var(--sp-5) 0;
  text-align: left;
}
@media (max-width: 640px) {
  .family__tree { grid-template-columns: 1fr; gap: var(--sp-4); }
}

.family__side-label {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide, .06em);
  color: var(--c-primary);
  margin: 0 0 var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--c-border, rgba(0, 0, 0, .1));
}

.family__nodes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* Block, not flex. As flex the relationship chip and the name were flex items,
   so a long name (MOTHER / Smt Jayasri Prabhakar Rao Paladugu) wrapped onto a
   line of its own and left the chip stranded above it. Inline keeps the chip
   attached to the start of the name however the line breaks. */
.family__node {
  font-size: var(--fs-sm, .9375rem);
  line-height: var(--lh-normal, 1.6);
  color: var(--c-ink);
}

.family__rel {
  display: inline-block;
  vertical-align: 0.12em;
  margin-right: var(--sp-2, 8px);
  font-family: var(--font-body);
  font-size: var(--fs-xs, .75rem);
  letter-spacing: var(--ls-wide, .05em);
  text-transform: uppercase;
  color: var(--c-ink-muted);
  background: var(--c-primary-tint, rgba(0, 0, 0, .05));
  border-radius: var(--r-pill, 999px);
  padding: 2px 10px;
  white-space: nowrap;
}

.family__name {
  font-family: var(--font-body);
  color: var(--c-ink);
}

/* Relationship not confirmed. Kept visually quiet rather than hidden, so the
   person is visibly present and the gap is visible too. */
.family__node--unlabelled .family__name {
  color: var(--c-ink-muted);
  font-style: italic;
}
/* ----- Design switcher ---------------------------------------------------
 * TEMPORARY (design review). Remove together with SHOW_DESIGN_SWITCHER=False
 * in docs/design/build-design-shells.py once a design is approved.
 *
 * Two bugs this file exists to fix, both found by measuring a 360px viewport:
 *
 * 1. The bar wrapped onto THREE rows at phone width. Five pills carrying
 *    "A USHA / USHA" cannot fit in 320px of usable width, so flex-wrap gave
 *    them three lines and the bar ate ~150px of a 620px screen. The Latin
 *    design name is now hidden below 520px, leaving the letter plus the
 *    Devanagari name, which does fit on one row.
 *
 * 2. The bar had z-index 1000 and the opening gate has z-index 100, so the
 *    switcher floated ON TOP of the gate overlay during the opening moment,
 *    breaking out of the card. It now sits behind the gate and only appears
 *    once the invitation is open.
 *
 * Styles are in the stylesheet, not inline, because a media query cannot
 * override an inline style - which is exactly rule 1 above.
 */

.design-switcher {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;                 /* below .gate (z-index 100) */
  display: flex;
  flex-wrap: nowrap;           /* never stack */
  justify-content: center;
  gap: 8px;
  padding: max(8px, env(safe-area-inset-bottom)) 12px 8px;
  background: var(--c-footer-bg, #0A0D22);
  border-top: 1px solid var(--c-border, rgba(255, 255, 255, .18));
  box-shadow: 0 -2px 8px rgba(0, 0, 0, .25);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.design-switcher::-webkit-scrollbar { display: none; }

.switcher__item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid var(--c-border, rgba(255, 255, 255, .35));
  border-radius: 999px;
  background: transparent;
  color: var(--c-ink, #F5F1E8);
  text-decoration: none;
  font-size: 12px;
  line-height: 1.15;
  white-space: nowrap;
  opacity: .75;
  -webkit-tap-highlight-color: transparent;
}
.switcher__item:hover { opacity: 1; }

.switcher__item--active,
.switcher__item[aria-current="page"] {
  background: var(--c-primary, #FF5A36);
  border-color: var(--c-primary, #FF5A36);
  color: var(--c-on-primary, #1A0A05);
  opacity: 1;
  font-weight: 700;
}

.switcher__letter { font-weight: 700; letter-spacing: .08em; }
.switcher__name { white-space: nowrap; }

/* Below 520px there is not room for the Latin name, so it is dropped and the
   Devanagari name alone identifies the design. The full label stays in the
   aria-label and the title attribute for anyone who needs it. */
@media (max-width: 520px) {
  .switcher__latin { display: none; }
  .design-switcher { gap: 6px; padding-left: 8px; padding-right: 8px; }
  .switcher__item { padding: 6px 10px; font-size: 11.5px; gap: 5px; }
}

/* Very narrow phones (iPhone SE and below) */
@media (max-width: 360px) {
  .switcher__name { font-size: 11px; }
  .switcher__item { padding: 5px 8px; min-height: 34px; }
  .design-switcher { gap: 4px; }
}
/* ----- Hero names, stacked and centred (added 23:56) -------------------
 * The hero was one line of text: "Neelam Sharma तथा Harsha Paladugu". At
 * 320px it wrapped mid-name and mid-tilda with no rhythm. Each part is now
 * its own element on its own line.
 */
.hero-names { display:flex; flex-direction:column; align-items:center; gap:var(--sp-1,4px); margin:0 0 var(--sp-4,16px); }
.hero-name { display:block; max-width:100%; overflow-wrap:anywhere; line-height:1.15; }
.hero-amp { font-size:.72em; letter-spacing:.18em; color:var(--c-primary); }
.hero-actions { display:flex; justify-content:center; gap:var(--sp-3,12px); flex-wrap:wrap; margin-top:var(--sp-4,16px); }

/* Switcher contrast fix (00:00). The bar sits on --c-footer-bg but the pills
 * were taking their colour from --c-ink. On the light designs --c-ink is dark,
 * so design D rendered five empty outlines: dark brown text on a dark brown
 * bar. Footer ink is the correct pairing and every design defines it with
 * 12.8:1 or better against its own footer background. */
.switcher__item { color: var(--c-footer-ink, #F5F1E8); border-color: var(--c-footer-ink-muted, rgba(255,255,255,.35)); opacity:.75; }
.switcher__item:hover { opacity:1; }