/* ═══════════════════════════════════════════════════════════════════════════
   CE2001 — 107th Grand Alumni Homecoming · Programme and Activities
   ───────────────────────────────────────────────────────────────────────────
   Page-scoped styles for program.html. Every selector is prefixed .pg- so
   nothing here can reach another page, and the crimson palette is declared on
   .pg-page rather than :root for the same reason: the rest of the site is
   navy and gold, and Crimson Pride belongs to this page alone.

   WHY THE PROGRAMME IS NOT BUILT BY JAVASCRIPT. Every date, activity, time
   and venue is static markup. The schedule is the one thing on this site that
   must survive a failed script, a blocked CDN and a printer — so the page
   renders complete with JavaScript switched off, the day sections collapse
   with native <details>, and program.js only adds conveniences on top.

   MOTION IS A GARNISH. Every transition and animation here is decorative and
   is switched off wholesale under prefers-reduced-motion at the end of the
   file. The programme is fully legible and fully operable without any of it.
   ═══════════════════════════════════════════════════════════════════════════ */

.pg-page {
  /* Crimson Pride. Ratios against white, computed and asserted in
     docs/verification/verification_program.js — none of these is a guess. */
  --pg-crimson:      #9B1B30;   /*  8.10:1 on white */
  --pg-crimson-deep: #6E0F21;   /* 11.98:1 on white */
  --pg-crimson-dark: #4A0A16;   /* 15.60:1 on white */
  --pg-crimson-ink:  #5C1220;   /* 13.44:1 on white */

  --pg-gold:         #C9A227;
  --pg-gold-soft:    color-mix(in srgb, #C9A227 16%, transparent);
  --pg-gold-line:    color-mix(in srgb, #C9A227 45%, transparent);

  --pg-paper:        #FFFBF7;
  --pg-paper-alt:    #FBF3EE;
  --pg-ink:          #2A1A1C;
  --pg-ink-soft:     #6B5157;
  --pg-rule:         color-mix(in srgb, var(--pg-crimson) 16%, transparent);

  --pg-lift:    0 1px 2px rgb(74 10 22 / .06), 0 10px 28px -10px rgb(74 10 22 / .18);
  --pg-lift-hi: 0 2px 5px rgb(74 10 22 / .09), 0 20px 48px -14px rgb(74 10 22 / .30);

  background: var(--pg-paper);
  color: var(--pg-ink);
}

.pg-wrap {
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

/* The sprite carrier. Present in the DOM, never painted. */
.pg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Every icon is drawn as a stroke in the current text colour, so an icon can
   never disagree with the text beside it — including in forced-colors mode,
   where CanvasText replaces both at once. Declared here rather than as
   presentation attributes on 30 symbols: CSS wins over those attributes, so
   two sources would mean the attributes were decorative noise. */
.pg-page svg.pg-ico {
  width: 1em; height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.pg-page svg.pg-ico .pg-dot { fill: currentColor; stroke: none; }

/* The one hidden-by-default element the site's own [hidden] rules must not
   lose to a display declaration — see the same note in awards-voting.css. */
[hidden] { display: none !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   1 · HERO
   ══════════════════════════════════════════════════════════════════════════ */

.pg-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  padding-block: clamp(3rem, 8vw, 5.5rem);
  background:
    radial-gradient(118% 88% at 80% 6%,  rgb(201 162 39 / .22), transparent 58%),
    radial-gradient(88% 68% at 6% 96%,   rgb(255 255 255 / .10), transparent 60%),
    linear-gradient(165deg, #4A0A16, #6E0F21 46%, #9B1B30);
}

/* One ribbon of light, behind the text so it can never reduce contrast. */
.pg-hero::before {
  content: "";
  position: absolute;
  inset: -34% -12% auto -12%;
  height: 64%;
  background: linear-gradient(97deg, transparent 12%, rgb(255 255 255 / .10) 38%, transparent 62%);
  transform: rotate(-7deg);
  pointer-events: none;
}

.pg-hero__inner { position: relative; }

/* EVERY PIECE OF HERO TEXT STATES ITS OWN COLOUR, and none of them may rely
   on inheriting white from .pg-hero. styles.css sets `h1, h2, h3, h4 { color:
   var(--navy) }` and `p { color: var(--text-muted) }` at element level, and
   both beat an inherited value — so the heading rendered navy on crimson and
   the crest line rendered grey. Caught in a rendered screenshot, not by eye
   over the source; verification_program.js now asserts these declarations
   exist so the same rule cannot swallow them again. */
.pg-hero h1,
.pg-hero__ordinal,
.pg-hero__title { color: #fff; }

.pg-hero__crest {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: #fff;
  padding: .4rem .9rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--pg-gold-line);
  border-radius: 999px;
  background: rgb(255 255 255 / .07);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.pg-hero__crest svg { width: 1rem; height: 1rem; }

.pg-hero__ordinal {
  display: block;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(2.6rem, 9vw, 4.6rem);
  line-height: .95;
  font-weight: 800;
  letter-spacing: -.02em;
}
.pg-hero__ordinal sup { font-size: .42em; top: -.62em; letter-spacing: 0; }

.pg-hero__title {
  margin: .25rem 0 0;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.5rem, 4.4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
}

.pg-hero__theme {
  max-width: 46rem;
  margin: 1.1rem 0 0;
  font-size: clamp(.98rem, 2.2vw, 1.12rem);
  font-style: italic;
  line-height: 1.6;
  color: rgb(255 255 255 / .92);
  border-left: 3px solid var(--pg-gold);
  padding-left: 1rem;
}

.pg-hero__intro {
  max-width: 44rem;
  margin: 1.5rem 0 0;
  font-size: clamp(1rem, 2.2vw, 1.14rem);
  line-height: 1.65;
  color: rgb(255 255 255 / .9);
}

.pg-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 2.25rem;
  margin: 1.75rem 0 0;
}
.pg-hero__facts div { min-width: 6.5rem; }
.pg-hero__facts dt {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--pg-gold);
}
.pg-hero__facts dd {
  margin: .2rem 0 0;
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.3rem;
  font-weight: 700;
}

/* This one is reused outside the hero, so it takes the colour of wherever it
   sits — white on crimson, ink on paper. It holds only buttons today, but
   `p { color: var(--text-muted) }` would paint any stray text grey in both
   places, and inherit is the only value that is right in both. */
.pg-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2rem;
  color: inherit;
}

.pg-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.25rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transition, .2s ease), box-shadow var(--transition, .2s ease),
              background-color var(--transition, .2s ease), color var(--transition, .2s ease);
}
.pg-btn svg { width: 1.05rem; height: 1.05rem; flex: none; }
.pg-btn--gold  { background: var(--pg-gold); color: #3A2A00; }
.pg-btn--ghost { background: rgb(255 255 255 / .08); color: #fff; border-color: rgb(255 255 255 / .45); }
.pg-btn--quiet {
  background: #fff;
  color: var(--pg-crimson-deep);
  border-color: var(--pg-rule);
  box-shadow: var(--pg-lift);
}
.pg-btn:hover  { transform: translateY(-1px); box-shadow: var(--pg-lift-hi); }
.pg-btn:focus-visible { outline: 3px solid var(--pg-gold); outline-offset: 3px; }


/* ═══════════════════════════════════════════════════════════════════════════
   2 · DAY RAIL — sticky jump navigation
   ══════════════════════════════════════════════════════════════════════════ */

.pg-rail {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--pg-paper) 90%, transparent);
  border-bottom: 1px solid var(--pg-rule);
}
@supports (backdrop-filter: blur(8px)) {
  .pg-rail { backdrop-filter: blur(10px) saturate(1.2); }
}

.pg-rail__inner {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding-block: .6rem;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.pg-rail__label {
  flex: none;
  padding-right: .35rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pg-ink-soft);
}

.pg-chip {
  flex: none;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  padding: .4rem .75rem;
  border: 1px solid var(--pg-rule);
  border-radius: 12px;
  background: #fff;
  color: var(--pg-crimson-deep);
  text-decoration: none;
  line-height: 1.15;
  transition: background-color var(--transition, .2s ease), color var(--transition, .2s ease),
              border-color var(--transition, .2s ease);
}
.pg-chip b   { font-size: .95rem; font-weight: 700; }
.pg-chip span { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--pg-ink-soft); }
.pg-chip:hover { background: var(--pg-paper-alt); border-color: var(--pg-crimson); }
.pg-chip:focus-visible { outline: 3px solid var(--pg-crimson); outline-offset: 2px; }

/* Set by program.js only when the device clock falls inside the event week. */
.pg-chip[data-today="1"] {
  background: var(--pg-crimson);
  border-color: var(--pg-crimson-deep);
  color: #fff;
}
.pg-chip[data-today="1"] span { color: var(--pg-gold); }

.pg-rail__tools { flex: none; margin-left: auto; display: flex; gap: .4rem; padding-left: .5rem; }

.pg-tool {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .7rem;
  border: 1px solid var(--pg-rule);
  border-radius: 999px;
  background: #fff;
  color: var(--pg-crimson-deep);
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
}
.pg-tool svg { width: .85rem; height: .85rem; }
.pg-tool:hover { background: var(--pg-paper-alt); }
.pg-tool:focus-visible { outline: 3px solid var(--pg-crimson); outline-offset: 2px; }


/* ═══════════════════════════════════════════════════════════════════════════
   3 · CALLOUTS
   ══════════════════════════════════════════════════════════════════════════ */

.pg-callout {
  display: flex;
  gap: 1rem;
  margin: 2rem 0;
  padding: 1.25rem 1.4rem;
  border-radius: var(--radius-lg, 18px);
  background: var(--pg-paper-alt);
  border: 1px solid var(--pg-rule);
  border-left: 5px solid var(--pg-crimson);
}
.pg-callout__icon {
  flex: none;
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--pg-crimson);
  color: #fff;
}
.pg-callout__icon svg { width: 1.25rem; height: 1.25rem; }
.pg-callout h2, .pg-callout h3 {
  margin: 0 0 .35rem;
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.15rem;
  color: var(--pg-crimson-deep);
}
.pg-callout p { margin: 0 0 .5rem; line-height: 1.6; color: var(--pg-ink); }
.pg-callout p:last-child { margin-bottom: 0; }
.pg-callout a { color: var(--pg-crimson); font-weight: 600; }

/* The batch's own annotation — visually separated from the official text so a
   reader can never mistake our note for the Alumni Relations Office's. */
.pg-callout--ours { border-left-color: var(--pg-gold); background: var(--pg-gold-soft); }
.pg-callout--ours .pg-callout__icon { background: var(--pg-gold); color: #3A2A00; }
.pg-callout--ours h2, .pg-callout--ours h3 { color: var(--pg-crimson-dark); }

.pg-tag {
  display: inline-block;
  margin-bottom: .4rem;
  padding: .18rem .5rem;
  border-radius: 5px;
  background: rgb(74 10 22 / .08);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pg-crimson-ink);
}


/* ═══════════════════════════════════════════════════════════════════════════
   4 · DAY SECTIONS
   ══════════════════════════════════════════════════════════════════════════ */

.pg-days { margin: 0; padding: 0; }

.pg-day {
  margin-bottom: 1.25rem;
  border: 1px solid var(--pg-rule);
  border-radius: var(--radius-lg, 18px);
  background: #fff;
  box-shadow: var(--pg-lift);
  overflow: hidden;
  scroll-margin-top: 5.5rem;   /* clears the sticky rail on an anchor jump */
}

.pg-day__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  list-style: none;
  background: linear-gradient(100deg, var(--pg-crimson-deep), var(--pg-crimson));
  color: #fff;
}
.pg-day__head::-webkit-details-marker { display: none; }
.pg-day__head:hover { background: linear-gradient(100deg, var(--pg-crimson-dark), var(--pg-crimson-deep)); }
.pg-day__head:focus-visible { outline: 3px solid var(--pg-gold); outline-offset: -3px; }

.pg-day__num {
  flex: none;
  width: 3.1rem; height: 3.1rem;
  display: grid;
  place-content: center;
  text-align: center;
  border-radius: 12px;
  background: rgb(255 255 255 / .12);
  border: 1px solid var(--pg-gold-line);
  font-family: var(--font-display, Georgia, serif);
  line-height: 1;
}
.pg-day__num b    { display: block; font-size: 1.45rem; font-weight: 800; }
.pg-day__num span { display: block; margin-top: .12rem; font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--pg-gold); }

.pg-day__text { min-width: 0; flex: 1 1 auto; }
.pg-day__dow {
  display: block;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.15rem, 3vw, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
}
.pg-day__meta {
  display: block;
  margin-top: .15rem;
  font-size: .78rem;
  letter-spacing: .04em;
  color: rgb(255 255 255 / .82);
}

.pg-day__chev {
  flex: none;
  width: 1.3rem; height: 1.3rem;
  transition: transform var(--transition, .2s ease);
}
.pg-day[open] .pg-day__chev { transform: rotate(180deg); }

/* A gold seam under the header of the day that matters most to Batch 2001.
   The marker is cosmetic; the words that say so are in the markup. */
.pg-day--flag .pg-day__head { box-shadow: inset 0 -4px 0 var(--pg-gold); }


/* ── Items ───────────────────────────────────────────────────────────────── */

.pg-items { margin: 0; padding: .35rem 0 .5rem; list-style: none; counter-reset: none; }

.pg-item {
  display: flex;
  gap: 1rem;
  padding: .95rem 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--pg-crimson) 9%, transparent);
}
.pg-item:first-child { border-top: 0; }

.pg-item__icon {
  flex: none;
  width: 2.35rem; height: 2.35rem;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--pg-paper-alt);
  border: 1px solid var(--pg-rule);
  color: var(--pg-crimson);
}
.pg-item__icon svg { width: 1.15rem; height: 1.15rem; }

.pg-item__body { min-width: 0; flex: 1 1 auto; }

.pg-item__title {
  margin: .1rem 0 0;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--pg-ink);
}
.pg-item__note {
  display: block;
  margin-top: .1rem;
  font-size: .86rem;
  font-weight: 400;
  color: var(--pg-ink-soft);
}

.pg-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .6rem;
  margin: .5rem 0 0;
}
.pg-item__meta span {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  padding: .22rem .55rem;
  border-radius: 7px;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.3;
}
.pg-item__meta svg { width: .82rem; height: .82rem; flex: none; }

.pg-time  { background: color-mix(in srgb, var(--pg-crimson) 10%, transparent); color: var(--pg-crimson-deep); }
.pg-venue { background: var(--pg-paper-alt); color: var(--pg-ink-soft); border: 1px solid var(--pg-rule); }

/* A blank venue cell in the approved programme. Stated rather than omitted:
   an empty space reads as this page losing the venue, which is a different
   claim from the source not carrying one. */
.pg-venue--none {
  background: transparent;
  border-style: dashed;
  font-weight: 500;
  font-style: italic;
}

/* Major events. The ring is decorative; .pg-item__flag carries the words. */
.pg-item--major { background: linear-gradient(100deg, var(--pg-gold-soft), transparent 62%); }
.pg-item--major .pg-item__icon { background: var(--pg-crimson); border-color: var(--pg-crimson-deep); color: #fff; }
.pg-item--major .pg-item__title { color: var(--pg-crimson-dark); }

.pg-item__flag {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-bottom: .25rem;
  padding: .16rem .48rem;
  border-radius: 5px;
  background: var(--pg-crimson);
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.pg-item__flag svg { width: .7rem; height: .7rem; }


/* ═══════════════════════════════════════════════════════════════════════════
   5 · SOURCE NOTE AND SIGNATORY
   ══════════════════════════════════════════════════════════════════════════ */

.pg-source {
  margin: 2.5rem 0 0;
  padding: 1.4rem 1.5rem;
  border: 1px dashed var(--pg-rule);
  border-radius: var(--radius-lg, 18px);
  background: var(--pg-paper-alt);
}
.pg-source h2 {
  margin: 0 0 .5rem;
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.1rem;
  color: var(--pg-crimson-deep);
}
.pg-source p  { margin: 0 0 .6rem; font-size: .92rem; line-height: 1.65; color: var(--pg-ink-soft); }
.pg-source p:last-child { margin-bottom: 0; }
.pg-source code {
  padding: .05rem .3rem;
  border-radius: 4px;
  background: rgb(74 10 22 / .07);
  font-size: .88em;
  color: var(--pg-crimson-ink);
}

.pg-sign {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--pg-rule);
}
.pg-sign b    { display: block; font-size: .98rem; color: var(--pg-ink); }
.pg-sign span { display: block; font-size: .84rem; color: var(--pg-ink-soft); }


/* ═══════════════════════════════════════════════════════════════════════════
   6 · SECTION FRAME
   ══════════════════════════════════════════════════════════════════════════ */

.pg-section { padding-block: clamp(2rem, 5vw, 3.25rem); }
.pg-section--alt { background: var(--pg-paper-alt); }

.pg-section__head { margin-bottom: 1.5rem; }
.pg-section__eyebrow {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pg-crimson);
}
.pg-section__head h2 {
  margin: .35rem 0 0;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 700;
  color: var(--pg-crimson-dark);
}
.pg-section__head p {
  max-width: 44rem;
  margin: .6rem 0 0;
  line-height: 1.65;
  color: var(--pg-ink-soft);
}


/* ═══════════════════════════════════════════════════════════════════════════
   7 · RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .pg-day__head  { gap: .75rem; padding: .85rem 1rem; }
  .pg-day__num   { width: 2.7rem; height: 2.7rem; }
  .pg-day__num b { font-size: 1.2rem; }
  .pg-item       { gap: .75rem; padding: .85rem 1rem; }
  .pg-item__icon { width: 2rem; height: 2rem; }
  .pg-item__icon svg { width: 1rem; height: 1rem; }
  .pg-item__title { font-size: .97rem; }
  .pg-callout    { flex-direction: column; gap: .75rem; }
  .pg-rail__tools { margin-left: 0; }
  .pg-hero__facts { gap: .75rem 1.5rem; }
}

@media (max-width: 420px) {
  .pg-rail__label { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   8 · REDUCED MOTION · FORCED COLORS · PRINT
   ══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .pg-page *,
  .pg-page *::before,
  .pg-page *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  /* Restore the state that was carried only by colour. */
  .pg-day, .pg-item__icon, .pg-chip, .pg-tool, .pg-callout { border: 1px solid CanvasText; }
  .pg-item--major       { outline: 2px solid CanvasText; outline-offset: -2px; }
  .pg-chip[data-today="1"] { outline: 3px solid CanvasText; }
  .pg-day__head, .pg-item__flag, .pg-callout__icon { forced-color-adjust: none; }
  .pg-hero::before { display: none; }
}

@media print {
  .pg-rail, .pg-hero__actions, .ce-share-mount, .pg-tool { display: none !important; }

  .pg-page  { background: #fff; color: #000; }
  .pg-hero  { color: #000; background: none; padding-block: 0 1rem; border-bottom: 2px solid #000; }
  .pg-hero__theme { color: #000; border-left-color: #000; }
  .pg-hero__intro { color: #000; }
  .pg-hero__facts dt { color: #000; }

  .pg-day       { break-inside: avoid; box-shadow: none; border: 1px solid #000; }
  .pg-day__head { background: none; color: #000; border-bottom: 1px solid #000; }
  .pg-day__num  { border-color: #000; }
  .pg-day__num span, .pg-day__meta { color: #000; }
  .pg-item      { break-inside: avoid; }
  .pg-item--major { background: none; }
  .pg-item__flag  { background: none; color: #000; border: 1px solid #000; }

  /* A collapsed day must still print. CSS cannot open <details>, so
     program.js opens them all on beforeprint; this is the fallback for a
     browser that prints without firing that event. */
  .pg-day:not([open]) > .pg-items { display: block !important; }
  .pg-day__chev { display: none; }
}