/* =====================================================================
   Content pages: The legacy, Keynote, Program (content.css)
   Every rule is scoped to its page root ([data-page="..."]), so the pages can sit
   together in the single-file preview. The one page-level exception is
   html[data-current-page="program"], for the Program scroll padding.
   Surfaces use the shared classes and tokens only (.page-header,
   .surface-page-header, .section--alt, --grad-accent). Controls stay flat.
   Meritta is used for H1, H2 and large display numerals only.
   ===================================================================== */

/* =====================================================================
   THE LEGACY (/legacy)
   ===================================================================== */

/* Thread key under the lede: two 14px labels with 10px squares */
[data-page="legacy"] .legacy-key{display:flex;flex-wrap:wrap;gap:8px 28px;list-style:none}
[data-page="legacy"] .legacy-key li{display:inline-flex;align-items:center;gap:10px;min-height:24px;font:600 14px/20px var(--f-label);color:var(--text-2)}
[data-page="legacy"] .legacy-key__mark{flex:none;width:10px;height:10px;border:1px solid var(--ivory)}
[data-page="legacy"] .legacy-key--br .legacy-key__mark{background:var(--gold);border-color:var(--gold)}

/* Timeline: a static 2px thread (the accent token) with 12px square markers.
   --grad-accent-v (site.css) is the 2026 sweep run top to bottom: crimson at 1944, gold at 2027. */
[data-page="legacy"] .legacy-tl{--mk-top:20px;position:relative;list-style:none;padding-left:36px}
[data-page="legacy"] .legacy-tl::before{content:"";position:absolute;left:5px;top:calc(var(--mk-top) + 6px);bottom:0;width:2px;background:var(--grad-accent-v,var(--grad-accent))}
[data-page="legacy"] .legacy-entry{position:relative}
[data-page="legacy"] .legacy-entry + .legacy-entry{margin-top:56px}
[data-page="legacy"] .legacy-entry::before{content:"";position:absolute;left:-36px;top:var(--mk-top);width:12px;height:12px;border:1px solid var(--ivory);background:var(--night)}
[data-page="legacy"] .legacy-entry--br::before{background:var(--gold);border-color:var(--gold)}

[data-page="legacy"] .legacy-year{font-size:48px;line-height:52px;color:var(--ivory)}
[data-page="legacy"] .legacy-entry--br .legacy-year{color:var(--gold)}
[data-page="legacy"] .legacy-place{margin-top:8px;font:600 13px/18px var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
[data-page="legacy"] .legacy-entry--br .legacy-place{color:var(--gold)}
[data-page="legacy"] .legacy-title{margin-top:8px;font-size:26px;line-height:32px}
[data-page="legacy"] .legacy-text{margin-top:12px;max-width:36rem;color:var(--text-1)}
[data-page="legacy"] .legacy-text i{font-style:italic}

/* 1947: the one King quotation on the site, with its source line break */
[data-page="legacy"] .legacy-quote{margin:24px 0 0;padding-left:20px;border-left:1px solid var(--gold);max-width:36rem}
[data-page="legacy"] .legacy-quote blockquote{margin:0}
[data-page="legacy"] .legacy-quote blockquote p{font:italic 400 22px/30px var(--f-serif);color:var(--ivory)}
[data-page="legacy"] .legacy-quote figcaption{margin-top:12px;font:400 14px/22px var(--f-body);color:var(--text-2)}
[data-page="legacy"] .legacy-quote cite{font-style:italic}

/* Aside after 1947 (the Morehouse link to the keynote) */
[data-page="legacy"] .legacy-aside{margin-top:28px;padding-top:16px;border-top:1px solid var(--line);max-width:36rem}
[data-page="legacy"] .legacy-aside p{font:400 15px/22px var(--f-body);color:var(--text-2)}
[data-page="legacy"] .legacy-aside .link-arrow{margin-top:4px}

/* 2027: the scholarship link (until the application deadline) */
[data-page="legacy"] .legacy-apply{margin-top:20px}
[data-page="legacy"] .legacy-apply__due{font:400 15px/22px var(--f-body);color:var(--text-2)}
[data-page="legacy"] .legacy-apply .legacy-apply__due{margin-top:2px}

/* Why we gather */
[data-page="legacy"] .legacy-why__rule{max-width:200px;margin:0 0 32px}
[data-page="legacy"] .legacy-why .split{row-gap:24px}
[data-page="legacy"] .legacy-why__body > * + *{margin-top:20px}
[data-page="legacy"] .legacy-why__body p:not(.lede){max-width:var(--measure);color:var(--text-1)}

@media (min-width:768px){
  [data-page="legacy"] .legacy-title{font-size:32px;line-height:38px}
}

@media (min-width:1024px){
  /* Years at 30% (right-aligned), the rail at 30%, the body to its right */
  [data-page="legacy"] .legacy-tl{--mk-top:34px;--yr:72px;padding-left:0}
  [data-page="legacy"] .legacy-tl::before{left:calc(30% - 1px)}
  [data-page="legacy"] .legacy-entry{display:grid;grid-template-columns:calc(30% - 48px) minmax(0,36rem);column-gap:96px;align-items:start}
  [data-page="legacy"] .legacy-entry + .legacy-entry{margin-top:96px}
  [data-page="legacy"] .legacy-entry::before{left:calc(30% - 6px)}
  [data-page="legacy"] .legacy-year{grid-column:1;font-size:var(--yr);line-height:80px;text-align:right}
  [data-page="legacy"] .legacy-entry__body{grid-column:2;padding-top:6px}
  [data-page="legacy"] .legacy-title{font-size:36px;line-height:42px}
  [data-page="legacy"] .legacy-place{margin-top:0}
  [data-page="legacy"] .legacy-why__head{padding-right:48px}
  [data-page="legacy"] .legacy-why__body{padding-top:44px}
}
@media (min-width:1280px){
  [data-page="legacy"] .legacy-tl{--mk-top:38px;--yr:88px}
  [data-page="legacy"] .legacy-year{line-height:88px}
  [data-page="legacy"] .legacy-entry__body{padding-top:10px}
}

/* =====================================================================
   KEYNOTE (/keynote)
   One surface (--grad-page-header) holds the header, the arch portrait and the
   copy. Desktop: portrait in cols 1 to 5, sticky; everything else in cols 7 to 12.
   ===================================================================== */
[data-page="keynote"] .keynote{padding-block:32px var(--section);border-bottom:1px solid var(--line)}
[data-page="keynote"] .keynote__grid{display:grid;grid-template-columns:minmax(0,1fr);row-gap:40px}
[data-page="keynote"] .keynote__head .eyebrow + h1{margin-top:8px}
[data-page="keynote"] .keynote__when{margin-top:16px;font:500 15px/22px var(--f-label);color:var(--text-2)}

/* Arch portrait: 1px outer arch, 12px out */
[data-page="keynote"] .keynote__portrait{justify-self:center;width:240px;max-width:calc(100% - 24px);margin:12px 0 0}
[data-page="keynote"] .keynote__frame{position:relative;aspect-ratio:2 / 3}
[data-page="keynote"] .keynote__frame::before{content:"";position:absolute;inset:-12px;border:1px solid var(--line-strong);border-radius:999px 999px 0 0;pointer-events:none}
[data-page="keynote"] .keynote__frame img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;border-radius:999px 999px 0 0;background:var(--card)}
[data-page="keynote"] .keynote__portrait figcaption{margin-top:24px;font:400 13px/18px var(--f-body);color:var(--text-3);text-align:center}

/* Credentials: a plain ruled list (not chips) */
[data-page="keynote"] .keynote__creds .ruled > li{padding:12px 0;font:500 19px/26px var(--f-serif);color:var(--ivory)}
[data-page="keynote"] .keynote__creds i{font-style:italic}

[data-page="keynote"] .keynote__bio{margin-top:32px}

/* Selected books */
[data-page="keynote"] .keynote__books{margin-top:48px}
[data-page="keynote"] .keynote__books h2{font-size:30px;line-height:36px}
[data-page="keynote"] .keynote__book-list{margin-top:16px;list-style:none;border-top:1px solid var(--line)}
[data-page="keynote"] .keynote__book-list li{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:14px 0;border-bottom:1px solid var(--line)}
[data-page="keynote"] .keynote__book-list cite{font:italic 400 18px/26px var(--f-serif);font-variant-numeric:lining-nums;color:var(--ivory)}
[data-page="keynote"] .keynote__year{flex:none;font:600 14px/20px var(--f-label);color:var(--text-2)}

/* Pull line: a 48px gold rule, then the line */
[data-page="keynote"] .keynote__pull{margin-top:48px}
[data-page="keynote"] .keynote__pull-rule{display:block;width:48px;height:1px;background:var(--gold)}
[data-page="keynote"] .keynote__pull p{margin-top:20px;max-width:26ch;font:500 26px/34px var(--f-serif);color:var(--ivory);text-wrap:balance}
[data-page="keynote"] .keynote__pull .link-arrow{margin-top:12px}

@media (min-width:768px){
  [data-page="keynote"] .keynote__portrait{width:300px}
  [data-page="keynote"] .keynote__copy{max-width:40rem;justify-self:center;width:100%}
  [data-page="keynote"] .keynote__head{max-width:40rem;justify-self:center;width:100%}
}
@media (min-width:1024px){
  [data-page="keynote"] .keynote{padding-top:96px}
  [data-page="keynote"] .keynote__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:0;align-items:start}
  [data-page="keynote"] .keynote__head{grid-column:7 / 13;grid-row:1;max-width:none;justify-self:stretch}
  [data-page="keynote"] .keynote__portrait{grid-column:1 / 6;grid-row:1 / span 2;justify-self:start;position:sticky;top:104px;width:420px;max-width:calc(100% - 24px);margin:12px 0 0 12px}
  [data-page="keynote"] .keynote__copy{grid-column:7 / 13;grid-row:2;max-width:none;justify-self:stretch;margin-top:40px}
  [data-page="keynote"] .keynote__books h2{font-size:36px;line-height:42px}
  [data-page="keynote"] .keynote__book-list cite{font-size:19px;line-height:28px}
  [data-page="keynote"] .keynote__pull p{font-size:30px;line-height:38px}
}

/* =====================================================================
   PROGRAM (/program)
   Five acts, guest view or run of show (native radios; CSS :has() does the
   switching, so it works without JavaScript; program.js mirrors the choice on
   the page root as data-program-view for browsers without :has()).
   ===================================================================== */

/* Sticky act bars on phones need the extra scroll padding (56px header + 40px bar + 8px) */
@media (max-width:767px) and (min-height:500px){html[data-current-page="program"]{scroll-padding-top:104px}}

/* Page header: eyebrow, H1, lede, the day-of jump link, then the view toggle and its status line */
[data-page="program"] .program-head__jump{margin-top:12px}
[data-page="program"] .page-header .program-view{margin-top:28px}
[data-page="program"] .program-view{min-width:0}
[data-page="program"] .program-view .segmented__opt{padding:0 8px;letter-spacing:.04em}
[data-page="program"] .program-status{margin-top:10px;font:400 15px/22px var(--f-body);color:var(--text-2)}

/* View switching */
[data-page="program"] [data-view-msg="run"],
[data-page="program"] .program-row[data-run-only],
[data-page="program"] .program-row__dur,
[data-page="program"] .program-note__run{display:none}
[data-page="program"]:is([data-program-view="run"],:has(#program-view-run:checked)) [data-view-msg="guest"]{display:none}
[data-page="program"]:is([data-program-view="run"],:has(#program-view-run:checked)) :is([data-view-msg="run"],.program-note__run){display:inline}
[data-page="program"]:is([data-program-view="run"],:has(#program-view-run:checked)) .program-row[data-run-only]{display:grid}
[data-page="program"]:is([data-program-view="run"],:has(#program-view-run:checked)) .program-row__dur{display:block}
/* A browser with :has() follows the radio even if the attribute lags (no-JS restores) */
[data-page="program"][data-program-view="run"]:has(#program-view-guest:checked) :is([data-view-msg="run"],.program-note__run,.program-row[data-run-only],.program-row__dur){display:none}
[data-page="program"][data-program-view="run"]:has(#program-view-guest:checked) [data-view-msg="guest"]{display:inline}

/* Act headers: one H2 serves both layouts */
[data-page="program"] .program-act__h{font-size:30px;line-height:36px}
[data-page="program"] .act-n{font:600 13px/18px var(--f-label);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
[data-page="program"] .act-time{font:400 15px/22px var(--f-body);text-transform:none;color:var(--text-3);font-variant-numeric:lining-nums tabular-nums}

@media (max-width:767px){
  /* One-line sticky bar under the 56px header */
  [data-page="program"] .program-act__h{position:sticky;top:var(--hdr-h);z-index:5;display:flex;align-items:center;height:40px;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);background:var(--night);border-bottom:1px solid var(--line);font-size:18px;line-height:20px;white-space:nowrap;overflow:hidden}
  [data-page="program"] .act-sep{flex:none;white-space:pre;font:600 14px/20px var(--f-label);color:var(--text-3)}
  [data-page="program"] .act-n{flex:none}
  [data-page="program"] .act-t{min-width:0;overflow:hidden;text-overflow:ellipsis;padding-top:1px}
  [data-page="program"] .act-time{flex:none;font:600 13px/18px var(--f-label);letter-spacing:.02em;color:var(--text-2)}
  [data-page="program"] .act-end{display:none}
  [data-page="program"] .program-act + .program-act{margin-top:8px}
}
@media (max-width:359px){[data-page="program"] :is(.act-sep-time,.act-time){display:none}}
@media (max-width:767px) and (max-height:499px){[data-page="program"] .program-act__h{position:static}}
@media (min-width:768px){
  [data-page="program"] .program-act__h{display:grid;gap:8px;padding:56px 0 16px;border-bottom:1px solid var(--line)}
  [data-page="program"] .program-act:first-child .program-act__h{padding-top:0}
  [data-page="program"] .act-sep{display:none}
}
@media (min-width:1024px){[data-page="program"] .program-act__h{font-size:36px;line-height:42px}}

/* Rows: time, what, duration (run of show only) */
[data-page="program"] .program-rows{list-style:none}
[data-page="program"] .program-row{display:grid;grid-template-columns:76px minmax(0,1fr) auto;column-gap:12px;align-items:baseline;min-height:56px;padding:15px 0;border-bottom:1px solid var(--line)}
[data-page="program"] .program-row__time{font:400 17px/24px var(--f-serif);font-variant-numeric:lining-nums tabular-nums;color:var(--text-2);white-space:nowrap}
[data-page="program"] .program-row__ap{font:600 13px/1 var(--f-label);letter-spacing:.04em}
[data-page="program"] .program-row__what{display:grid;gap:2px;min-width:0}
[data-page="program"] .program-row__line{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
[data-page="program"] .program-row__title{font:500 18px/24px var(--f-serif);color:var(--ivory)}
[data-page="program"] .program-row--key .program-row__title{font-size:21px;line-height:28px}
[data-page="program"] .program-row__detail{font:400 15px/22px var(--f-body);color:var(--text-2)}
[data-page="program"] .program-row__link{justify-self:start;margin-block:-8px -10px;font-size:15px}
[data-page="program"] .program-row__dur{font:400 14px/20px var(--f-body);color:var(--text-3);white-space:nowrap;text-align:right}
[data-page="program"] .program-row--end .program-row__title{color:var(--text-2)}
[data-page="program"] .program-row .tag{align-self:center}
/* 10:20 AM: the heartbeat, in gold numerals */
[data-page="program"] .program-row__time.gold-num{color:var(--gold)}
/* Event day: the current row (the Now tag is added by program.js) */
[data-page="program"] .program-row.is-now :is(.program-row__time,.program-row__title){color:var(--gold)}

[data-page="program"] .program-note{margin-top:24px;font:400 15px/22px var(--f-body);color:var(--text-2)}

@media (min-width:768px){
  [data-page="program"] .program-head .segmented{display:inline-grid;width:auto}
  [data-page="program"] .program-view .segmented__opt{padding:0 20px;letter-spacing:.08em}
  [data-page="program"] .program-row{grid-template-columns:96px minmax(0,1fr) auto;column-gap:24px;padding:16px 0}
  [data-page="program"] .program-row__title{font-size:19px;line-height:26px}
  [data-page="program"] .program-row--key .program-row__title{font-size:22px;line-height:30px}
  [data-page="program"] .program-row__time{font-size:18px}
  [data-page="program"] .program-list{max-width:48rem}
}

/* Desktop: the toggle aligns right on the H1's last baseline; the clock sits left of the list */
[data-page="program"] .program-clock{display:none}
/* The header goes two-column from 1280px: below that the 72px H1 would break onto three lines */
@media (min-width:1280px){
  [data-page="program"] .program-head{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:48px}
  [data-page="program"] .program-head > *{grid-column:1}
  [data-page="program"] .program-head__eyebrow{grid-row:1}
  [data-page="program"] .program-head__title{grid-row:2}
  [data-page="program"] .program-head__lede{grid-row:3}
  [data-page="program"] .program-head__jump{grid-row:4}
  [data-page="program"] .page-header .program-view{grid-column:2;grid-row:2;align-self:last baseline;justify-self:end;margin-top:0}
  [data-page="program"] .program-status{grid-column:2;grid-row:3;align-self:start;justify-self:end;margin-top:24px;text-align:right;max-width:24rem}
}
@media (min-width:1024px){
  [data-page="program"] .program-body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
  [data-page="program"] .program-clock{display:block;grid-column:1 / 6;position:sticky;top:120px;padding-right:32px}
  [data-page="program"] .program-list{grid-column:6 / 13;max-width:none}
  /* The row the clock follows (time and title gold) */
  [data-page="program"] .program-row.is-reading :is(.program-row__time,.program-row__title){color:var(--gold)}
}

/* The clock (desktop only, decorative: aria-hidden) */
[data-page="program"] .program-clock__act{font:600 13px/18px var(--f-label);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
[data-page="program"] .program-clock__time{display:flex;align-items:baseline;gap:14px;margin-top:20px}
[data-page="program"] .program-clock__num{font-size:clamp(80px,7.6vw,112px);line-height:.92;color:var(--ivory);font-variant-numeric:lining-nums tabular-nums}
[data-page="program"] .program-clock__ap{font:600 16px/1 var(--f-label);letter-spacing:.14em;color:var(--text-3)}
[data-page="program"] .program-clock__what{margin-top:20px;min-height:60px;max-width:20ch;font:500 24px/30px var(--f-serif);color:var(--ivory)}
/* Act bar: five 2px segments (by act length), 4px apart; acts so far take the accent token,
   laid out as one continuous gradient across the bar */
[data-page="program"] .program-clock__bar{position:relative;margin-top:36px;padding-bottom:30px}
[data-page="program"] .program-clock__acts{display:flex;gap:4px;height:2px;container-type:inline-size}
[data-page="program"] .program-clock__acts > i{display:block;height:2px;background-color:var(--line-strong);background-repeat:no-repeat;background-size:100cqw 100%}
[data-page="program"] .program-clock__acts > i:nth-child(1){flex:50 1 0}
[data-page="program"] .program-clock__acts > i:nth-child(2){flex:60 1 0;background-position:calc(-.185185 * (100cqw - 16px) - 4px) 0}
[data-page="program"] .program-clock__acts > i:nth-child(3){flex:50 1 0;background-position:calc(-.407407 * (100cqw - 16px) - 8px) 0}
[data-page="program"] .program-clock__acts > i:nth-child(4){flex:55 1 0;background-position:calc(-.592593 * (100cqw - 16px) - 12px) 0}
[data-page="program"] .program-clock__acts > i:nth-child(5){flex:55 1 0;background-position:calc(-.796296 * (100cqw - 16px) - 16px) 0}
[data-page="program"] .program-clock__acts > i.is-on{background-image:var(--grad-accent)}
[data-page="program"] .program-clock__dot{position:absolute;top:-7px;left:0;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--ivory);border:2px solid var(--gold)}
[data-page="program"] .program-clock__ticks{position:absolute;left:0;right:0;bottom:0;height:16px}
[data-page="program"] .program-clock__ticks span{position:absolute;top:0;transform:translateX(-50%);font:500 13px/16px var(--f-label);color:var(--text-3);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
[data-page="program"] .program-clock__ticks span:nth-child(1){left:0;transform:none}
[data-page="program"] .program-clock__ticks span:nth-child(2){left:calc(22.2222% - 3.5556px + 4px)}
[data-page="program"] .program-clock__ticks span:nth-child(3){left:calc(44.4444% - 7.1111px + 8px)}
[data-page="program"] .program-clock__ticks span:nth-child(4){left:calc(66.6667% - 10.6667px + 12px)}
[data-page="program"] .program-clock__ticks span:nth-child(5){left:calc(88.8889% - 14.2222px + 16px)}
[data-page="program"] .program-clock__ticks span:nth-child(6){left:auto;right:0;transform:none}

@media (forced-colors:active){
  [data-page="legacy"] .legacy-tl::before{background:CanvasText}
  [data-page="program"] .program-clock__acts > i{background:CanvasText}
}