/* Homepage sections, in page order (SPEC 9.1). */

/* ---------- Gallery intro (6 October; gallery.js) ---------- */
/* The track adds site.gallery.screens screens of scrolling while the stage (gallery over hero)
   stays put. Only with html.gallery-on, set in <head>; otherwise the hero is just the hero. */

.gallery {
  display: none;
}

.gallery-on .gallery-track {
  height: calc(max(640px, 100svh) + var(--gallery-screens, 1.9) * 100svh);
}

.gallery-on .gallery-stage {
  position: sticky;
  top: 0;
  overflow: hidden; /* the gallery zooms past its edges during the hand-over */
}

.gallery-on .gallery {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: block;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, var(--blue-900) 0%, var(--blue-950) 70%);
  will-change: opacity, transform;
}

/* The announcement bar stays at the top through the gallery and the hero, with the nav below it;
   gallery.js slides both up as the hero scrolls away. Pinning it also keeps the gallery from
   drifting up by the bar's height when scrolling starts. */
.gallery-on .strip {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
}

.gallery-on .nav-anchor {
  top: var(--strip-h, 42px);
}

.gallery-on.strip-off .nav-anchor {
  top: 0;
}

/* Later visits start at the hero; the script then scrolls there and drops this class. */
.gallery-skip .gallery {
  opacity: 0;
  visibility: hidden;
}

.gallery__root,
.gallery__three {
  position: absolute;
  inset: 0;
}

/* The "Scroll" cue: a label over a hairline with a teal drop running down it. */
.gallery__cue {
  position: absolute;
  bottom: 28px;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 12px;
  font-size: var(--fs-label);
  font-weight: 800;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-60);
  transform: translateX(-50%);
  pointer-events: none;
}

.gallery__cue-line {
  position: relative;
  width: 1px;
  height: 44px;
  overflow: hidden;
  background: rgb(var(--ink-rgb) / 0.18);
}

.gallery__cue-line::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 40%;
  background: var(--teal);
  animation: cue-drop 1.8s var(--ease-standard) infinite;
}

@keyframes cue-drop {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(260%);
  }
}

/* Without WebGL the component shows the photos as a grid (it isn't started then, but just in
   case). */
.gallery-fallback {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 96px var(--gutter);
}

.gallery-fallback__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: min(100%, 900px);
}

.gallery-fallback__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-control);
  object-fit: cover;
}

/* ---------- Hero (reference/02) ---------- */

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: max(640px, 100svh);
  padding: 128px var(--gutter) 80px;
  overflow: hidden;
  background: var(--blue-950);
  text-align: center;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Fade the bottom of the picture into the page, as OakMUN's hero does */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 45%, var(--blue-950) 100%);
}

.hero__img,
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.22;
}

/* The video fades in over its poster once it's actually playing */
.hero__video {
  opacity: 0;
  transition: opacity 0.8s var(--ease-standard);
}

.hero__video.is-playing {
  opacity: 0.22;
}

.hero__bg:has(.hero__video.is-playing) .hero__img {
  opacity: 0;
  transition: opacity 0.8s var(--ease-standard);
}

/* OakMUN multiplies the overlay into the picture; without the blend it reads far lighter. */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: var(--grad-overlay);
  mix-blend-mode: multiply;
}

.hero__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgb(var(--teal-rgb) / 0.055) 1px, transparent 1px);
  background-size: 28px 28px;
}

.hero__orb--a {
  top: -18%;
  left: 14%;
  width: 62%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgb(var(--teal-dark-rgb) / 0.3) 0%, transparent 65%);
}

.hero__orb--b {
  right: -8%;
  bottom: -22%;
  width: 55%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgb(var(--orb-navy-rgb) / 0.5) 0%, transparent 65%);
}

/* Chapter watermark: huge outlined "XIV" behind the title */
.hero__watermark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(13rem, 30vw, 34rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--teal);
  opacity: 0.15;
  user-select: none;
}

.hero__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

/* Meta line with short teal rules on each side */
.hero__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.28em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--ink-85);
}

.hero__meta::before,
.hero__meta::after {
  content: "";
  flex-shrink: 0;
  width: 28px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--gilt);
  opacity: 0.8;
}

.hero__title span {
  display: block;
  color: var(--teal);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 6px;
}

/* Countdown (SPEC 8.5) */
.countdown {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 8px;
}

.countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.countdown__value {
  min-width: 2.6ch;
  padding: 7px 8px 5px;
  border-radius: var(--radius-count);
  background: rgb(var(--white-rgb) / 0.1);
  box-shadow:
    0 4px 12px rgb(var(--shadow-rgb) / 0.3),
    inset 0 1px 0 rgb(var(--white-rgb) / 0.1),
    inset 0 0 0 1px rgb(var(--white-rgb) / 0.05);
  font-size: clamp(1.2rem, 2.2vw, 1.9rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--white);
}

.countdown__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgb(var(--teal-rgb) / 0.7);
}

.countdown__sep {
  padding-top: 0.35em;
  font-size: clamp(1.2rem, 2.2vw, 1.9rem);
  font-weight: 300;
  line-height: 1.15;
  color: rgb(var(--ink-rgb) / 0.2);
}

.countdown__status {
  display: none;
  padding: 10px 20px;
  border: 1px solid rgb(var(--teal-rgb) / 0.35);
  border-radius: var(--radius-pill);
  font-size: var(--fs-label);
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal);
}

.countdown.is-done .countdown__unit,
.countdown.is-done .countdown__sep {
  display: none;
}

.countdown.is-done .countdown__status {
  display: block;
}

@media (max-width: 768px) {
  .hero {
    padding-top: 112px;
  }

  .hero__meta {
    gap: 10px;
    letter-spacing: 0.16em;
  }

  .hero__meta {
    max-width: 320px;
    text-wrap: balance;
  }

  .hero__meta::before,
  .hero__meta::after {
    display: none;
  }

  .hero__actions {
    flex-direction: column;
    width: 100%;
    max-width: 320px;
  }

  .countdown {
    gap: 6px;
  }

  .countdown__value {
    font-size: 1.35rem;
  }
}

/* ---------- Marquee (reference/05) ---------- */

.marquee {
  overflow: hidden;
  background: var(--teal-marquee);
  padding-block: 14px;
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
}

.marquee__group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

.marquee__item {
  padding-inline: 28px;
  font-size: var(--fs-label);
  font-weight: 800;
  letter-spacing: 0.2em;
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--navy);
}

.marquee__dot {
  flex-shrink: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--navy);
  opacity: 0.4;
}

.marquee.is-paused .marquee__track,
.tab-hidden .marquee__track {
  animation-play-state: paused;
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
  }
}

/* ---------- Theme (reference/03 and 04) ---------- */

.theme-band {
  padding-block: 56px;
  background: var(--blue-940);
  text-align: center;
}

.theme-band__text {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink-85);
}

.theme-band__text::before,
.theme-band__text::after {
  content: "";
  flex-shrink: 0;
  width: 28px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--teal);
  opacity: 0.8;
}

@media (max-width: 480px) {
  .theme-band__text {
    padding-inline: var(--gutter);
    text-wrap: balance;
  }

  .theme-band__text::before,
  .theme-band__text::after {
    display: none;
  }
}

.theme {
  position: relative;
  background: var(--blue-940);
  text-align: center;
}

.theme__stage {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: var(--section-pad) var(--gutter);
}

/* A soft glow behind the words, as in OakMUN's reveal */
.theme__stage::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: min(1100px, 120vw);
  aspect-ratio: 1.6;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--teal-rgb) / 0.09), transparent);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.theme__intro {
  display: none;
}

.theme__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 1100px;
}

.theme__title {
  font-size: clamp(2.2rem, 5.2vw, 5.4rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.08;
  color: var(--ink);
  text-wrap: balance;
}

.theme__line {
  display: block;
}

/* Each word has a blurred copy of itself behind it (from data-text, so the page's text has
   each word once). At rest only the sharp word shows; theme-reveal.js brings words in soft
   first (--soft), then sharp, with opacity alone. */
.theme__word {
  position: relative;
  display: inline-block;
}

.theme__word::before,
.theme__big::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  white-space: nowrap;
  filter: blur(14px);
  opacity: var(--soft, 0);
  pointer-events: none;
}

.theme__word.is-highlight::before,
.theme__big::before {
  color: var(--teal);
}

.theme__word.is-highlight .theme__sharp {
  padding-bottom: 0.08em;
  background: var(--grad-word);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.theme__divider {
  width: 64px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gilt), transparent);
}

.theme__caption {
  max-width: 600px;
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  font-style: italic;
  line-height: 1.8;
  color: var(--ink-75);
}

/* Desktop: a scroll-linked reveal over 240 vh. The JS uses the same media query. */
@media (pointer: fine) and (min-width: 981px) {
  .theme.is-scrubbing {
    height: 240vh;
  }

  .theme.is-scrubbing .theme__stage {
    position: sticky;
    top: 0;
    height: 100vh;
    padding-block: 0;
  }

  .theme.is-scrubbing .theme__intro {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    gap: 10px;
  }

  .theme.is-scrubbing [data-theme-part]:not([data-theme-word]),
  .theme.is-scrubbing .theme__sharp,
  .theme.is-scrubbing .theme__intro .theme__sharp,
  .theme.is-scrubbing .theme__pre {
    opacity: 0;
  }
}

.theme__pre {
  font-size: clamp(0.8rem, 1.4vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-60);
}

.theme__big {
  position: relative;
  font-size: clamp(2.2rem, 5vw, 4.8rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.theme__big .theme__sharp {
  background: var(--grad-word);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Phones and touch screens: the same soft-to-sharp entrance, word by word, once the section
   comes into view */
.theme.is-pending [data-theme-part]:not([data-theme-word]),
.theme.is-pending .theme__sharp {
  opacity: 0;
}

.theme.is-revealed [data-theme-word] {
  --d: calc(var(--i, 0) * 120ms + 80ms);
  animation: theme-rise 1s var(--ease-out-expo) var(--d) both;
}

.theme.is-revealed [data-theme-word]::before {
  animation: theme-soft 1s var(--ease-standard) var(--d) both;
}

.theme.is-revealed [data-theme-word] .theme__sharp {
  animation: theme-sharp 1s var(--ease-standard) var(--d) both;
}

.theme.is-revealed [data-theme-part]:not([data-theme-word]) {
  animation: theme-fade 0.8s var(--ease-out-expo) calc(var(--i, 0) * 120ms + 80ms) both;
}

@keyframes theme-rise {
  from { transform: translateY(18px) scale(0.97); }
  to { transform: none; }
}

@keyframes theme-soft {
  0% { opacity: 0; }
  40% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes theme-sharp {
  0%, 25% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes theme-fade {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Stats (reference/05) ---------- */

.stats {
  position: relative;
  padding-block: 64px 72px;
  background: var(--blue-900);
}

.stats::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 110%, rgb(var(--teal-rgb) / 0.07), transparent 60%);
  pointer-events: none;
}

.stats__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  max-width: 1100px;
  margin-inline: auto;
}

.stat {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 36px 24px;
  border: var(--border-card);
  border-radius: var(--radius-card);
  background: var(--grad-stat);
  text-align: center;
}

.stat::before {
  content: "";
  position: absolute;
  top: -30px;
  left: -20px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--teal-rgb) / 0.18) 0%, transparent 70%);
}

.stat__num {
  position: relative;
  padding: 0 0.08em 0.1em 0;
  font-size: clamp(2.8rem, 5vw, 4.5rem);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
  background: var(--grad-number);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Delegates and Chapter in the poster's gold (PLAN.md F26) */
.stat--gold::before {
  background: radial-gradient(circle, rgb(var(--gilt-rgb) / 0.16) 0%, transparent 70%);
}

.stat--gold .stat__num {
  background: var(--grad-number-gold);
  -webkit-background-clip: text;
  background-clip: text;
}

.stat__label {
  position: relative;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-60);
}

@media (max-width: 768px) {
  .stats {
    padding-block: 48px;
  }

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

  .stat {
    padding: 24px 16px;
  }

  .stat__num {
    font-size: clamp(2rem, 10vw, 3rem);
  }
}

/* ---------- Letter from the Secretary-General (reference/06) ---------- */

.letter {
  position: relative;
  overflow: hidden;
  background: var(--blue-700);
}

.letter__orb {
  top: 0;
  left: -10%;
  width: 640px;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgb(var(--teal-dark-rgb) / 0.14) 0%, transparent 65%);
}

.letter__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}

.letter__photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border: 1px solid rgb(var(--teal-rgb) / 0.3);
  border-radius: var(--radius-card);
}

.letter__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.letter__title {
  margin-bottom: 32px;
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.letter__body p {
  max-width: var(--measure);
  font-size: 1.02rem;
  line-height: 1.82;
  color: var(--ink-75);
}

.letter__body p + p {
  margin-top: 16px;
}

.letter__body p:first-child {
  font-size: 1.12rem;
  color: var(--ink-85);
}

.letter__sign {
  margin-top: 32px;
}

.letter__signature {
  width: 160px;
  margin-bottom: 8px;
}

.letter__name {
  font-weight: 700;
  color: var(--ink-100);
}

.letter__role {
  font-size: 0.85rem;
  color: var(--ink-60);
}

.text-link {
  display: inline-flex;
  margin-top: 28px;
  font-size: var(--fs-button);
  font-weight: 800;
  letter-spacing: var(--track-button);
  text-transform: uppercase;
  color: var(--teal);
  transition: color var(--dur-hover) var(--ease-standard);
}

.text-link:hover {
  color: var(--teal-light);
}

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

  .letter__photo {
    width: min(100%, 320px);
    aspect-ratio: 4 / 5;
  }
}

/* ---------- Schedule (reference/07; layout from OakMUN XVI's later schedule) ---------- */
/* The days one under another. Each day has a line down the left that fills teal as the page
   scrolls, and a dot per event that lights once the fill reaches it (schedule.js). */

.schedule {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--blue-800) 0%, var(--blue-750) 100%);
}

.schedule::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgb(var(--teal-rgb) / 0.08), transparent 60%);
  pointer-events: none;
}

/* The title on the left, the day tabs on the right (as on OakMUN XVI). */
.schedule__head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  align-items: end;
  gap: 32px 64px;
  margin-bottom: 64px;
}

.schedule__summary {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink-85);
}

.schedule__note {
  margin-top: 6px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-60);
}

.sched-day {
  position: relative;
}

.sched-day + .sched-day {
  margin-top: 96px;
}

/* Day tabs (6 October): one day at a time, with a highlight that glides to the chosen day
   (schedule.js). Only with the script; without it both days show, one under the other. */
.sched-tabs {
  position: relative;
  display: none;
  grid-template-columns: repeat(var(--count), minmax(0, 1fr));
  width: 100%;
  padding: 6px;
  border: var(--border-card);
  border-radius: var(--radius-card);
  background: rgb(var(--card-rgb) / 0.6);
}

.js .sched-tabs {
  display: grid;
}

.sched-tabs__pill {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 6px;
  width: calc((100% - 12px) / var(--count));
  border-radius: var(--radius-control);
  background: var(--grad-primary);
  box-shadow: var(--shadow-btn);
  transform: translateX(calc(var(--active, 0) * 100%));
  transition: transform 0.5s var(--ease-out-expo);
}

.sched-tab {
  position: relative;
  z-index: 1;
  min-height: 48px;
  padding: 12px 16px;
  border-radius: var(--radius-control);
  font-size: var(--fs-label);
  font-weight: 800;
  letter-spacing: var(--track-label);
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-60);
  transition: color 0.3s var(--ease-standard);
}

.sched-tab[aria-selected="true"] {
  color: var(--blue-900);
}

@media (hover: hover) {
  .sched-tab:not([aria-selected="true"]):hover {
    color: var(--ink-100);
  }
}

/* With the tabs, only the chosen day shows, and its heading is for screen readers only
   (the tab already says it). */
.js .sched-day:not(.is-active) {
  display: none;
}

.js .sched-day + .sched-day {
  margin-top: 0;
}

.js .sched-day__title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Narrower screens: the tabs go under the title. */
@media (max-width: 980px) {
  .schedule__head {
    grid-template-columns: minmax(0, 480px);
  }
}

.schedule__share {
  display: flex;
  margin-top: 40px;
}

.schedule__share .btn svg {
  width: 18px;
  height: 18px;
}

.sched-day__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 24px;
  margin-bottom: 32px;
  font-size: clamp(1.6rem, 2.6vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-transform: uppercase;
}

.sched-day__date {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  color: var(--ink-60);
}

.sched-day__body {
  --row-pad: 28px;
  --dot: 12px;
  position: relative;
}

/* The track, and the teal fill that grows down it. Without the script (or with reduced
   motion) the fill is drawn in full. */
.sched-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 6px;
  width: 2px;
  overflow: hidden;
  border-radius: 1px;
  background: rgb(var(--ink-rgb) / 0.1);
}

.sched-line__fill {
  position: absolute;
  inset: 0;
  background: var(--teal);
  transform-origin: top;
  will-change: transform;
}

.sched-item {
  position: relative;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 4px 28px;
  padding: var(--row-pad) 0 var(--row-pad) 40px;
}

.sched-item + .sched-item {
  border-top: 1px solid rgb(var(--ink-rgb) / 0.06);
}

.sched-item__dot {
  position: absolute;
  top: calc(var(--row-pad) + 0.75rem - var(--dot) / 2);
  left: calc(7px - var(--dot) / 2);
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: var(--blue-850);
  box-shadow: 0 0 0 2px rgb(var(--ink-rgb) / 0.22);
}

/* The lit state: a teal ring with a soft glow, faded in over the plain dot. */
.sched-item__dot::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid var(--teal);
  border-radius: 50%;
  box-shadow: 0 0 12px rgb(var(--teal-rgb) / 0.45);
  transition: opacity var(--dur-open) var(--ease-standard);
}

.sched-item__time {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink-60);
  font-variant-numeric: tabular-nums;
}

.sched-item__title {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
  text-transform: uppercase;
}

.sched-item__title a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgb(var(--teal-rgb) / 0.5);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.sched-item__title a:hover {
  color: var(--teal-light);
}

.sched-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 16px;
  margin-top: 6px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-60);
}

/* With the script running, dots start unlit and light as the fill reaches them. */
.schedule.is-live .sched-item__dot::after {
  opacity: 0;
}

.schedule.is-live .sched-item.is-lit .sched-item__dot::after {
  opacity: 1;
}

@media (max-width: 768px) {
  .schedule__head {
    grid-template-columns: 1fr;
    margin-bottom: 40px;
  }

  .schedule__note {
    font-size: 1rem; /* 16 px minimum for running text on phones */
  }

  .sched-day + .sched-day {
    margin-top: 72px;
  }


  .sched-tab {
    padding: 12px 8px;
  }

  .schedule__share .btn {
    width: 100%;
  }

  .sched-day__title {
    margin-bottom: 20px;
  }

  .sched-day__body {
    --row-pad: 22px;
  }

  /* The time sits above the title. */
  .sched-item {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 32px;
  }

  .sched-item__time {
    font-size: 0.9rem;
  }

  .sched-item__title {
    font-size: 1.05rem;
  }

  .sched-item__meta {
    margin-top: 2px;
  }
}

/* ---------- Committees at a glance (reference/08) ---------- */

.glance {
  position: relative;
  overflow: hidden;
  background: var(--blue-700);
  content-visibility: auto;
  contain-intrinsic-size: auto 960px;
}

/* Title on top, ring underneath (6 October) */
.glance__head {
  display: grid;
  justify-items: center;
  text-align: center;
}

.glance__text {
  max-width: 520px;
  margin-top: 24px;
  color: var(--ink-75);
}

.glance__cta .btn {
  margin-top: 32px;
}

.ring {
  position: relative;
  margin-top: 40px;
}

.ring__root {
  display: none;
}

.ring.has-ring .ring__root {
  display: block;
}

.ring.has-ring .glance-list {
  display: none;
}

/* The circular gallery (src/components/ui/circular-gallery.tsx). Card sizes, the ring's radius
   and the perspective are set by the island; everything else is here. */
.circular-gallery {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  cursor: grab;
  touch-action: pan-y; /* sideways slides turn the ring; up and down still scrolls the page */
  user-select: none;
  -webkit-user-select: none;
}

.circular-gallery.is-dragging {
  cursor: grabbing;
}

.circular-gallery__ring {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
}

.circular-gallery__item {
  position: absolute;
  top: 50%;
  left: 50%;
}

.circular-gallery__card {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: var(--border-card);
  border-radius: var(--radius-card);
  background: linear-gradient(160deg, var(--blue-700), var(--blue-650));
  box-shadow: 0 24px 48px rgb(var(--shadow-rgb) / 0.45);
}

.circular-gallery__card:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

.circular-gallery__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.circular-gallery__caption {
  position: absolute;
  inset: auto 0 0;
  padding: 14px 16px 16px;
  background: linear-gradient(to top, rgb(var(--wash-rgb) / 0.92) 0%, rgb(var(--wash-rgb) / 0.6) 55%, transparent 100%);
  color: var(--ink-100);
}

.circular-gallery__title {
  font-size: clamp(1rem, 1.7vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-transform: uppercase;
  transition: color var(--dur-hover) var(--ease-standard);
}

.circular-gallery__subtitle {
  display: block;
  margin-top: 4px;
  font-size: clamp(0.7rem, 0.85vw, 0.85rem);
  font-style: normal;
  line-height: 1.35;
  color: var(--ink-75);
}

.circular-gallery__card:hover .circular-gallery__title {
  color: var(--teal-light);
}

/* The plain list: without the script, with reduced motion, or until the ring is up */
.glance-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 24px;
}

.glance-list__link {
  display: flex;
  align-items: center;
  gap: 16px;
  white-space: nowrap;
}

.glance-list__icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 56px;
  height: 56px;
  overflow: hidden;
  border: 2px solid rgb(var(--ink-rgb) / 0.15);
  border-radius: 50%;
  background: rgb(var(--teal-rgb) / 0.18);
  color: var(--ink-85);
  font-size: 1.5rem;
}

.glance-list__icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.glance-list__name {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink-100);
  transition: color var(--dur-hover) var(--ease-standard);
}

.glance-list__link:hover .glance-list__name {
  color: var(--teal-light);
}

@media (max-width: 768px) {
  .glance-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .glance-list__link {
    gap: 10px;
    white-space: normal;
  }

  .glance-list__icon {
    width: 44px;
    height: 44px;
  }

  .glance-list__icon img {
    width: 32px;
    height: 32px;
  }

  .glance-list__name {
    font-size: 1.05rem;
    overflow-wrap: anywhere;
  }

  .ring {
    margin-top: 24px;
  }
}

/* ---------- More than debate (reference/10) ---------- */

/* Skipped until it's near the screen, so the italic font for "debate." loads late */
.debate {
  position: relative;
  overflow: hidden;
  background: var(--blue-900);
  content-visibility: auto;
  contain-intrinsic-size: auto 960px;
}

@media (max-width: 768px) {
  .debate {
    contain-intrinsic-size: auto 970px;
  }
}

.debate__orb {
  top: -20%;
  right: -10%;
  width: 720px;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgb(var(--teal-dark-rgb) / 0.12) 0%, transparent 65%);
}

.debate__title em {
  font-style: italic;
  font-weight: 300;
  color: var(--ink-50);
}

.debate__text {
  max-width: 560px;
  margin-top: 20px;
  color: var(--ink-75);
}

/* The two cards share the width half and half */
.debate__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 48px;
}

/* Social Night card: OakMUN's brown and gold, with a moon for Halloween */
/* New to MUN: a photo blurred into the card, fading out behind the text (8 October) */
.card--photo {
  overflow: hidden;
}

.card__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 35%;
  filter: blur(3px) saturate(0.85);
  transform: scale(1.08); /* keeps the blurred edges outside the card */
  opacity: 0.75;
}

.card--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgb(var(--card-rgb) / 0.95) 0%, rgb(var(--card-rgb) / 0.78) 45%, rgb(var(--card-rgb) / 0.28) 100%),
    linear-gradient(0deg, rgb(var(--card-rgb) / 0.7) 0%, transparent 50%);
}

.card--night {
  overflow: hidden;
  border-color: rgb(var(--sn-gold-rgb) / 0.22);
  background: var(--grad-night);
}

.card--night::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 78% 22%, rgb(var(--sn-glow-rgb) / 0.2) 0%, transparent 45%),
    radial-gradient(circle at 12% 100%, rgb(var(--sn-amber-rgb) / 0.18) 0%, transparent 45%);
}

.card--night .card__bar {
  background: linear-gradient(to right, var(--sn-gold), rgb(var(--sn-gold-rgb) / 0.15));
}

.card--night .card__tag {
  padding-right: 64px;
  color: var(--sn-amber);
}

.card--night .card__title {
  color: var(--sn-cream);
}

.card--night .card__sub {
  margin-top: -6px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--sn-pumpkin);
}

.card--night .card__link {
  color: var(--sn-gold);
}

@media (hover: hover) {
  .card--night:hover {
    border-color: rgb(var(--sn-gold-rgb) / 0.5);
  }
}

.moon {
  position: absolute;
  top: -104px;
  right: -104px;
  width: 260px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  box-shadow:
    0 0 40px rgb(var(--sn-gold-rgb) / 0.32),
    0 0 120px rgb(var(--sn-gold-rgb) / 0.16);
  pointer-events: none;
}

.moon img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Warmer on the side away from the light, like the Social Night page's moon */
.moon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset -18px -14px 44px rgb(var(--sn-amber-rgb) / 0.22);
}

/* The date keeps clear of the moon */
.card--night .card__tag {
  max-width: calc(100% - 130px);
}

@media (max-width: 768px) {
  .debate__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .moon {
    top: -64px;
    right: -64px;
    width: 160px;
  }

  .card--night .card__tag {
    max-width: calc(100% - 84px);
  }
}

/* ---------- FAQ (reference/09) ---------- */

.faq {
  position: relative;
  background: var(--blue-700);
  content-visibility: auto;
  contain-intrinsic-size: auto 1100px;
}

.faq::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgb(var(--teal-rgb) / 0.08), transparent 55%);
  pointer-events: none;
}

.faq__inner {
  position: relative;
  max-width: 900px;
  margin-inline: auto;
}

.faq__intro {
  margin: 12px 0 48px;
  color: var(--ink-75);
}

/* ---------- Closing banner ---------- */

.closing {
  position: relative;
  overflow: hidden;
  padding-block: var(--section-pad);
  background: linear-gradient(160deg, var(--blue-900) 0%, var(--blue-850) 60%, var(--blue-900) 100%);
  text-align: center;
}

.closing::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 900px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--teal-rgb) / 0.14) 0%, transparent 60%);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.closing::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--grad-hairline);
}

.closing__inner {
  position: relative;
}

.closing__title {
  max-width: 14ch;
  margin: 0 auto 40px;
  font-size: clamp(2.4rem, 6vw, 5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
}

/* ---------- Sponsors (reference/11; only rendered when there are any) ---------- */

.sponsors {
  padding-block: 56px 64px;
  background: linear-gradient(180deg, var(--blue-950), var(--blue-900));
  text-align: center;
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
}

.sponsors__title {
  margin-bottom: 32px;
  font-size: clamp(0.9rem, 1.6vw, 1.1rem);
  font-weight: 900;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.sponsors__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.sponsors__item {
  display: grid;
  place-items: center;
  width: 200px;
  height: 120px;
  padding: 16px;
  border-radius: 12px;
  background: rgb(var(--teal-dark-rgb) / 0.2);
}

.sponsors__item img {
  max-height: 100%;
  object-fit: contain;
}