/* Hopper Giving Day — cinematic single scroll: full-bleed night sections, film-frame
   video columns, Olin cyan + deep blue, Barlow with condensed caps for labels. */
:root {
  --bg: #05080D;
  --black: #000000;
  --surface: #0B111A;
  --line: rgba(255, 255, 255, .10);
  --line-strong: rgba(255, 255, 255, .28);
  --fg: #FFFFFF;
  --body: #C9D2DE;
  --muted: #8D99AA;
  --faint: #6B7686;
  --cyan: #00C2ED;
  --cyan-hi: #5AD8F5;
  --blue: #00458C;
  --blue-ink: #BFD3EA;
  --rec: #E0261B;
  --error: #FF8A80;
  --scrim: rgba(0, 0, 0, .6);

  --font-body: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --font-cond: 'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue', sans-serif;

  --gutter-l: max(clamp(16px, 4vw, 56px), env(safe-area-inset-left, 0px));
  --gutter-r: max(clamp(16px, 4vw, 56px), env(safe-area-inset-right, 0px));
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}

html { scroll-behavior: smooth; background: var(--bg); scroll-padding-top: var(--banner-h); } /* links land under the banner */
html.is-locked { overflow: hidden; }
html.has-video-above { overscroll-behavior-y: none; } /* main.js: a pull down at the top brings the video back */
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 16px; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
a { color: var(--fg); }
a:hover { color: var(--cyan); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
button { font: inherit; }
img, video { max-width: 100%; }

/* ---------- shared pieces ---------- */
.wrap {
  width: 100%; max-width: 1180px; margin: 0 auto; box-sizing: border-box;
  padding-left: var(--gutter-l); padding-right: var(--gutter-r);
}
.screen { position: relative; min-height: var(--screen-h); min-height: var(--screen-sh); display: flex; flex-direction: column; }

/* Fades (issue #71). main.js fades in each element marked .fade-in (and the
   hero's ring) once some of it shows below the Olin banner, and adds
   .is-waiting the moment none of it does: that hides it at once, with no
   transition, so it never visibly fades out and fades in again next time.
   Elements that come into view together start one after another (main.js
   sets their transition-delay). Scrolling itself is the browser's own. */
.screen-inner { min-height: var(--screen-h); min-height: var(--screen-sh); display: flex; flex-direction: column; }
.fade-in, .ring { transition: opacity 1.4s var(--ease), translate 1.4s var(--ease); }
.fade-in.is-waiting { opacity: 0; translate: 0 24px; transition: none; }
.ring.is-waiting { opacity: 0; transition: none; }
.btn.fade-in:not(.is-waiting) { transition: opacity 1.4s var(--ease), translate 1.4s var(--ease), background .3s, border-color .3s, color .3s; }

.eyebrow {
  display: flex; align-items: center; gap: 14px; margin: 0;
  font: 500 14px/1.2 var(--font-cond); letter-spacing: .32em; text-transform: uppercase; color: var(--cyan);
}
.eyebrow::before { content: ""; width: 32px; height: 1px; background: currentColor; flex: none; }

.display { margin: 0; font-weight: 300; font-size: clamp(36px, 4.4vw, 60px); line-height: 1.1; letter-spacing: -.01em; text-wrap: balance; }
.display strong { font-weight: 600; }
/* Underlined words, like LOOK and GIVE on the home page (issue #76). */
.key { text-decoration: underline; text-decoration-thickness: .07em; text-underline-offset: .16em; }
.lede { margin: 0; font-size: 19px; font-weight: 300; line-height: 1.6; color: var(--body); max-width: 62ch; }
.label { margin: 0; font: 500 14px/1.3 var(--font-cond); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 32px; border-radius: 2px; box-sizing: border-box;
  font: 600 15px/1 var(--font-cond); letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; transition: background .3s, border-color .3s, color .3s;
}
.btn-primary { border: 0; background: var(--cyan); color: var(--bg); }
.btn-primary:hover { background: var(--cyan-hi); color: var(--bg); }
.btn-ghost { border: 1px solid var(--line-strong); background: transparent; color: var(--fg); font-weight: 500; }
.btn-ghost:hover { border-color: var(--cyan); color: var(--fg); }
.btn-small { min-height: 44px; padding: 0 18px; font-size: 13px; letter-spacing: .18em; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--rec); flex: none; }

/* scroll cue: label over a thin line with a falling streak */
.cue {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 8px 12px; border: 0; background: none; cursor: pointer; text-decoration: none;
  font: 500 14px/1.2 var(--font-cond); letter-spacing: .26em; text-transform: uppercase; color: var(--muted);
  transition: color .3s;
}
.cue:hover, .cue:focus-visible { color: var(--fg); }
.cue-line { position: relative; width: 1px; height: 48px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.cue-line::after {
  content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 40%; background: var(--cyan);
  animation: drip 2.2s cubic-bezier(.6, 0, .4, 1) infinite;
}
@keyframes drip { from { transform: translateY(-100%); } to { transform: translateY(260%); } }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 24px; }
.wordmark { font: 600 18px/1 var(--font-cond); letter-spacing: .22em; text-transform: uppercase; color: var(--fg); text-decoration: none; }
.back {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font: 500 14px/1 var(--font-cond); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); text-decoration: none;
}
.back:hover { color: var(--fg); }

/* ---------- Olin banner (issue #64) ----------
   A thin bar at the top of every page in the Giving Day poster's purple, with
   its dotted shapes (pattern.png, mirrored so it repeats without a seam) dimmed
   behind the title. It sticks to the top of the window, so everything else
   gets the window minus --banner-h (which includes the notch on phones):
   --screen-h / --screen-sh stand in for 100vh / 100svh, sticky things stick
   just under it, and main.js measures the home page's sections the same way. */
:root {
  --banner-h: calc(64px + env(safe-area-inset-top, 0px)); --olin-purple: #511C74; --olin-yellow: #FFE52B;
  --screen-h: calc(100vh - var(--banner-h)); --screen-sh: calc(100svh - var(--banner-h));
}
.olin-banner {
  position: sticky; top: 0; z-index: 25; /* over the page; under the give drawer (30, 40) and the player (100) */
  height: var(--banner-h); box-sizing: border-box; overflow: hidden;
  padding: env(safe-area-inset-top, 0px) var(--gutter-r) 0 var(--gutter-l);
  background: linear-gradient(rgba(81, 28, 116, .6), rgba(81, 28, 116, .6)), url("banner/pattern.png") center / auto 100% repeat-x, var(--olin-purple);
}
.olin-banner-inner { height: 100%; display: flex; align-items: center; justify-content: center; gap: 18px; }
.olin-banner img { display: block; flex: none; width: auto; }
.olin-banner-mark { height: 32px; }
.olin-banner-title { height: 44px; }
.olin-banner-tagline { height: 42px; }
/* The date of Giving Day, between the title and the tagline: what, when, then why. Real text in
   the poster's bold italic condensed caps, the weekday in the yellow of its dotted hexagons. */
.olin-banner-date { margin: 0; flex: none; color: var(--fg); white-space: nowrap; }
.olin-banner-date time { display: flex; flex-direction: column; gap: 5px; }
.olin-banner-day { font: 600 11px/1 var(--font-cond); letter-spacing: .26em; text-transform: uppercase; color: var(--olin-yellow); }
.olin-banner-when { font: italic 600 21px/1 var(--font-cond); letter-spacing: .01em; }
.olin-banner-date, .olin-banner-tagline { margin-left: 4px; padding-left: 22px; border-left: 1px solid rgba(255, 255, 255, .3); }
@media (max-width: 600px) {
  :root { --banner-h: calc(52px + env(safe-area-inset-top, 0px)); }
  .olin-banner-inner { gap: 12px; }
  .olin-banner-mark { height: 24px; }
  .olin-banner-title { height: 36px; }
  .olin-banner-tagline { height: 34px; }
  .olin-banner-date, .olin-banner-tagline { margin-left: 2px; padding-left: 14px; }
  .olin-banner-date time { gap: 4px; }
  .olin-banner-day { font-size: 10px; letter-spacing: .22em; }
  .olin-banner-when { font-size: 18px; }
}
/* On most phones there's room for the date or the tagline, not both: the date wins. */
@media (max-width: 459px) { .olin-banner .olin-banner-tagline { display: none; } }
@media (max-width: 359px) {
  .olin-banner-inner { gap: 9px; }
  .olin-banner-date { padding-left: 11px; }
  .olin-banner-when { font-size: 16px; }
}

/* ---------- hero ---------- */
.hero { background: var(--bg); }
/* position: the ring's tiles are placed inside this box, so its overflow: hidden clips the
   ones that run off the sides of the screen instead of making the page scroll sideways. */
.hero > .screen-inner { position: relative; height: var(--screen-h); height: var(--screen-sh); min-height: 560px; overflow: hidden; }

/* main.js sets each tile's transform to place it on the ring, and sets --hero-mid (the centre
   of the ring and the copy) when a short screen needs them moved up from the middle. */
.ring { position: absolute; inset: 0; z-index: 1; }
.tile {
  position: absolute; left: 50%; top: var(--hero-mid, 50%); z-index: 1; display: block; width: clamp(64px, 7vw, 110px);
  margin: 0; padding: 0; border: 0; background: none; cursor: pointer; will-change: transform;
}
.tile:hover, .tile:focus-visible { z-index: 8; }
.tile.is-behind { pointer-events: none; } /* main.js: passing behind the title on a short screen */
.tile:focus-visible { outline-offset: 4px; }
.frame { position: relative; display: block; animation: frameIn 1.6s var(--ease) both; }
.card {
  position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 3px; overflow: hidden; background: var(--surface);
  filter: brightness(.52) saturate(.8);
  transition: transform .6s var(--ease), filter .6s ease, box-shadow .6s ease;
}
.card video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile:hover .card, .tile:focus-visible .card { transform: scale(1.09); filter: none; box-shadow: 0 30px 80px rgba(0, 0, 0, .8), 0 0 0 1px var(--cyan); }

/* Play glyph: tells people a tile plays; fades out once the hover preview starts. */
.play {
  position: absolute; left: 50%; top: 50%; display: grid; place-items: center;
  width: clamp(30px, 38%, 46px); aspect-ratio: 1; border-radius: 50%; box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, .55); background: rgba(5, 8, 13, .45); color: var(--fg);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transform: translate(-50%, -50%); pointer-events: none;
  transition: opacity .4s ease, transform .6s var(--ease);
}
.play svg { width: 46%; height: auto; margin-left: 8%; }
.tile:hover .play, .tile:focus-visible .play { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }

.vignette {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    radial-gradient(ellipse 75% 70% at 50% 50%, rgba(5, 8, 13, 0) 45%, rgba(5, 8, 13, .85) 100%),
    linear-gradient(180deg, var(--bg) 0%, rgba(5, 8, 13, 0) 16%, rgba(5, 8, 13, 0) 78%, var(--bg) 100%);
}
.grain { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; opacity: .07; mix-blend-mode: overlay; }

.hero-copy {
  position: absolute; left: 50%; top: var(--hero-mid, 50%); transform: translate(-50%, -50%); z-index: 5;
  width: min(92%, 600px); text-align: center; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.hero-eyebrow {
  display: flex; align-items: center; gap: 16px; margin: 0;
  font: 500 15px/1.2 var(--font-cond); letter-spacing: .34em; text-transform: uppercase; color: var(--cyan);
  animation: fadeIn 1.4s ease .2s both;
}
.hero-eyebrow::before, .hero-eyebrow::after {
  content: ""; width: 40px; height: 1px; background: currentColor; flex: none;
  animation: ruleIn 1.6s cubic-bezier(.6, 0, .2, 1) .35s both;
}
.hero-title {
  margin: 0; padding-left: .14em; white-space: nowrap;
  font: 500 clamp(54px, 6.6vw, 104px)/1 var(--font-cond); letter-spacing: .14em; text-transform: uppercase;
  animation: titleIn 2.2s var(--ease) .3s both;
}
.hero-sub { margin: 0; font-size: clamp(18px, 1.6vw, 24px); font-weight: 300; line-height: 1.4; color: var(--body); animation: fadeIn 1.6s ease 1.7s both; }
.hero-cue {
  position: absolute; z-index: 6; left: 0; right: 0; margin-inline: auto; width: max-content;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  animation: fadeIn 1.4s ease 3.7s both;
}

@keyframes titleIn {
  0% { opacity: 0; letter-spacing: .42em; filter: blur(12px); }
  60% { opacity: 1; }
  100% { opacity: 1; letter-spacing: .14em; filter: blur(0); }
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes frameIn { from { opacity: 0; transform: translateY(28px) scale(1.03); } to { opacity: 1; transform: none; } }
@keyframes ruleIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- about ---------- */
.about-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 48px; padding-block: 56px 16px; }
.about-intro { display: flex; flex-direction: column; gap: 22px; max-width: 820px; }
.paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 40px; }
.path { border-top: 1px solid var(--line-strong); padding-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.path h3 { margin: 0; font-weight: 400; font-size: 28px; line-height: 1.2; text-wrap: balance; }
.path p:last-child { margin: 0; font-size: 17px; font-weight: 300; line-height: 1.6; color: var(--body); max-width: 60ch; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.section-cue { display: flex; justify-content: center; padding-block: 32px 8px; }

/* ---------- leaderboard ---------- */
.lb-body { display: flex; flex-direction: column; gap: 36px; padding-block: 56px 64px; }
.lb-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.lb-head > div { display: flex; flex-direction: column; gap: 18px; }
.board { box-sizing: border-box; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 2px; padding: 28px 28px 12px; }
.board-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 10px; }
.board-head h3 { margin: 0; font: 500 20px/1.2 var(--font-cond); letter-spacing: .16em; text-transform: uppercase; }
.board-note { margin: 0; font-size: 15px; font-weight: 300; color: var(--muted); }
.board-empty { margin: 0; padding: 22px 0; border-top: 1px solid var(--line); font-size: 16px; font-weight: 300; color: var(--muted); }
.board-empty a { color: var(--cyan); }

/* The class leaderboard (issue #83). Each row leads with the class year
   ("Class of 2010"), with its share on the right, then a bar and the count
   under them. Two columns on wide screens, read down then across, so the
   ranks still run in order. */
.lb-classes { list-style: none; margin: 0; padding: 0; columns: 2 380px; column-gap: 48px; }
.lb-class {
  break-inside: avoid; display: grid; grid-template-columns: 2.4em minmax(0, 1fr) auto; align-items: baseline;
  column-gap: 12px; padding: 18px 0 16px; border-top: 1px solid var(--line);
}
.lb-rank { font: 500 15px/1 var(--font-cond); letter-spacing: .08em; color: var(--faint); font-variant-numeric: tabular-nums; }
.lb-name { margin: 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.lb-of { font: 500 14px/1 var(--font-cond); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.lb-year { font: 500 40px/1 var(--font-cond); letter-spacing: .04em; color: var(--fg); font-variant-numeric: tabular-nums; }
.lb-pct { margin: 0; font: 500 20px/1 var(--font-cond); letter-spacing: .04em; color: var(--cyan); font-variant-numeric: tabular-nums; }
.lb-bar { grid-column: 2 / -1; height: 3px; margin-top: 12px; background: var(--line); overflow: hidden; }
.lb-fill { display: block; height: 100%; min-width: 3px; background: var(--cyan); transform-origin: left; transition: transform 1.2s var(--ease) .35s; }
.lb-count { grid-column: 2 / -1; margin: 10px 0 0; font-size: 14px; font-weight: 300; color: var(--muted); font-variant-numeric: tabular-nums; }
.lb-class.is-first .lb-rank { color: var(--cyan); }
/* The bars grow as the board fades in (and are back at zero, unseen, when it's hidden). */
.board.is-waiting .lb-fill { transform: scaleX(0); transition: none; }
.board-link {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px;
  font: 500 14px/1 var(--font-cond); letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); text-decoration: none;
}
.board-link:hover { color: var(--cyan-hi); }

.site-foot { border-top: 1px solid var(--line); }
.site-foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 24px calc(24px + env(safe-area-inset-bottom, 0px)); }
.site-foot p { margin: 0; font: 500 13px/1.4 var(--font-cond); letter-spacing: .2em; text-transform: uppercase; color: var(--faint); }

/* ---------- give tab + drawer ---------- */
.give-tab {
  position: fixed; right: 0; top: 50%; z-index: 20;
  transform: translate(110%, -50%); visibility: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 22px 14px; padding-right: calc(14px + env(safe-area-inset-right, 0px));
  border: 0; border-radius: 2px 0 0 2px; background: var(--blue); color: var(--fg); cursor: pointer;
  font: 600 14px/1 var(--font-cond); letter-spacing: .24em; text-transform: uppercase;
  box-shadow: -8px 10px 30px rgba(0, 0, 0, .4);
  transition: transform .5s var(--ease), visibility 0s linear .5s, background .3s;
}
.give-tab.is-visible { transform: translate(0, -50%); visibility: visible; transition: transform .5s var(--ease), background .3s; }
.give-tab.is-visible:hover { transform: translate(-4px, -50%); }
.give-tab span { writing-mode: vertical-rl; transform: rotate(180deg); }

.backdrop { position: fixed; inset: 0; z-index: 30; background: var(--scrim); opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s; }
.backdrop.is-open { opacity: 1; visibility: visible; transition: opacity .4s ease; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 40; width: min(420px, 92vw); box-sizing: border-box;
  display: flex; flex-direction: column; gap: 28px; overflow-y: auto;
  padding: calc(26px + env(safe-area-inset-top, 0px)) calc(32px + env(safe-area-inset-right, 0px)) calc(36px + env(safe-area-inset-bottom, 0px)) 32px;
  background: var(--surface); border-left: 1px solid var(--line);
  transform: translateX(100%); visibility: hidden;
  transition: transform .5s var(--ease), visibility 0s linear .5s;
}
.drawer.is-open { transform: none; visibility: visible; transition: transform .5s var(--ease); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; }
.drawer-head .eyebrow::before { display: none; }
.icon-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .2); border-radius: 2px; background: transparent; color: var(--fg); cursor: pointer; transition: border-color .3s; }
.icon-btn:hover { border-color: var(--cyan); }
.drawer h2 { margin: 0; font-weight: 300; font-size: 36px; line-height: 1.1; }
.drawer h2 strong { font-weight: 600; }
.options { display: flex; flex-direction: column; gap: 12px; }
.option {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 22px 24px; border-radius: 2px; text-align: left; text-decoration: none; cursor: pointer;
  transition: background .3s, border-color .3s;
}
.option-text { display: flex; flex-direction: column; gap: 4px; }
.option-name { font: 600 22px/1.1 var(--font-cond); letter-spacing: .14em; text-transform: uppercase; }
.option-desc { font: 400 15px/1.4 var(--font-body); }
.option--donate { border: 0; background: var(--cyan); color: var(--bg); }
.option--donate:hover { background: var(--cyan-hi); }
.option--share { border: 1px solid var(--line-strong); background: transparent; color: var(--fg); }
.option--share:hover { border-color: var(--cyan); color: var(--fg); }
.option--share .option-desc { font-weight: 300; color: var(--body); }
.drawer-note { margin: auto 0 0; font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--muted); }

/* ---------- fullscreen player ---------- */
.player {
  position: fixed; inset: 0; z-index: 100; background: var(--black);
  display: flex; align-items: center; justify-content: center;
  padding: env(safe-area-inset-top, 0px) 0 calc(80px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box;
  opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility 0s linear .6s;
}
.player.is-open { opacity: 1; visibility: visible; transition: opacity .6s var(--ease); }
.player video {
  height: min(82vh, 860px); height: min(82svh, 860px); max-height: 100%; max-width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block; cursor: pointer;
  transform: scale(.96); transition: transform .9s var(--ease);
}
.player.is-open video { transform: none; }
.player-cue { position: absolute; left: 0; right: 0; margin-inline: auto; width: max-content; max-width: calc(100% - 32px); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
.player-cue .cue-line { height: 40px; }
.player-sound {
  position: absolute; top: calc(18px + env(safe-area-inset-top, 0px)); right: calc(18px + env(safe-area-inset-right, 0px));
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line-strong); border-radius: 2px; background: rgba(0, 0, 0, .55); color: var(--fg);
  font: 500 13px/1 var(--font-cond); letter-spacing: .18em; text-transform: uppercase; cursor: pointer;
}
.player-sound:hover { border-color: var(--cyan); }

/* ---------- share + send pages ---------- */
.page { min-height: var(--screen-h); min-height: var(--screen-sh); display: flex; flex-direction: column; }
.page-main { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 72px; padding-block: 16px 56px; }
.page-copy { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 40px; }
.page-title { display: flex; flex-direction: column; gap: 20px; }
.page-title h1 { margin: 0; font-weight: 300; font-size: clamp(44px, 5.4vw, 76px); line-height: 1; text-wrap: balance; }
.page-title h1 strong { font-weight: 600; }

.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 28px; }
.step { display: flex; gap: 24px; align-items: baseline; border-top: 1px solid var(--line-strong); padding-top: 22px; }
.step-num { flex: none; font: 300 44px/1 var(--font-cond); color: var(--cyan); font-variant-numeric: tabular-nums; }
.step h2 { margin: 0 0 8px; font-weight: 400; font-size: 26px; }
.step p { margin: 0; font-size: 17px; font-weight: 300; line-height: 1.6; color: var(--body); max-width: 56ch; }

.rec-art { flex: 1 1 300px; display: flex; justify-content: center; align-items: flex-end; gap: 16px; min-height: 520px; }
.rec-art .back-frame { width: 150px; aspect-ratio: 9 / 16; border-radius: 3px; overflow: hidden; margin-bottom: 60px; background: var(--black); }
.rec-art .back-frame :is(img, video) { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.45) saturate(.8); }
.rec-art .front-frame { position: relative; width: 240px; aspect-ratio: 9 / 16; border-radius: 3px; overflow: hidden; background: var(--black); box-shadow: 0 30px 80px rgba(0, 0, 0, .7); }
.rec-art .front-frame :is(img, video) { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.85); }
.rec-tag { position: absolute; top: 14px; left: 14px; display: flex; align-items: center; gap: 8px; font: 500 13px/1 var(--font-cond); letter-spacing: .22em; color: var(--fg); }
.rec-tag .rec-dot { width: 8px; height: 8px; animation: pulse 1.4s ease-in-out infinite; }
.shutter { position: absolute; bottom: 18px; left: 0; right: 0; margin-inline: auto; width: 54px; height: 54px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--fg); display: flex; align-items: center; justify-content: center; }
.shutter::after { content: ""; width: 20px; height: 20px; border-radius: 3px; background: var(--rec); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.send-main { flex: 1; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 56px; padding-block: 8px 56px; }
.preview { flex: 1 1 240px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.preview-frame { width: min(100%, 270px); aspect-ratio: 9 / 16; border-radius: 3px; overflow: hidden; background: var(--black); box-shadow: 0 30px 80px rgba(0, 0, 0, .7); }
.preview-note { margin: 0; max-width: 270px; text-align: center; }
.preview-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.send-copy { flex: 999 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.form { display: flex; flex-direction: column; gap: 24px; }
.field-group { display: flex; flex-direction: column; gap: 10px; }
.field-group label { font: 500 14px/1.2 var(--font-cond); letter-spacing: .2em; text-transform: uppercase; color: var(--body); }
.field-group label span { color: var(--muted); }
.field {
  min-height: 52px; padding: 0 14px; box-sizing: border-box; width: 100%;
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 2px; background: var(--surface); color: var(--fg);
  font: 300 17px/1.4 var(--font-body);
}
textarea.field { padding: 12px 14px; resize: vertical; }
.field::placeholder { color: var(--faint); }
.field:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0, 194, 237, .25); }
select.field option { background: var(--surface); color: var(--fg); }
.hint { font-size: 14px; font-weight: 300; color: var(--muted); }

/* Send page: "Share it with" suggests names from a class year as you type. */
.picker-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.picker-year { display: flex; align-items: center; gap: 10px; }
.picker-year label { color: var(--muted); }
.picker-year select {
  -webkit-appearance: none; appearance: none; height: 36px; box-sizing: border-box; padding: 0 34px 0 12px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 2px; background-color: var(--surface); color: var(--fg);
  font: 500 16px/1 var(--font-cond); letter-spacing: .06em; font-variant-numeric: tabular-nums;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2300C2ED' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  transition: border-color .3s, box-shadow .3s;
}
.picker-year select:hover { border-color: var(--line-strong); }
.picker-year select:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0, 194, 237, .22); }
.picker-year select option { background: var(--surface); color: var(--fg); }
.picker-box { position: relative; }
.picker-list {
  position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; right: 0; max-height: min(320px, 50vh); overflow-y: auto;
  margin: 0; padding: 6px 0; list-style: none; overscroll-behavior: contain;
  border: 1px solid var(--line-strong); border-radius: 2px; background: var(--surface); box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
}
.picker-list li { padding: 11px 14px; font-size: 17px; font-weight: 300; line-height: 1.3; }
.picker-list [role="option"] { cursor: pointer; }
.picker-list [role="option"]:hover { background: rgba(255, 255, 255, .06); }
.picker-list [aria-selected="true"] { background: rgba(0, 194, 237, .16); color: var(--fg); }
.picker-list mark { background: none; color: var(--cyan-hi); font-weight: 500; }
.picker-list .picker-note { color: var(--muted); cursor: default; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.form-error { margin: 0; font-size: 15px; color: var(--error); }
.sent {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 18px 20px;
  border: 1px solid var(--cyan); border-radius: 2px; background: rgba(0, 194, 237, .08);
  animation: fadeIn .5s var(--ease) both;
}
.sent p { flex: 1 1 200px; margin: 0; font-size: 18px; overflow-wrap: anywhere; }

/* ---------- memories page ----------
   A screening-room wall: an intro, a sticky bar of controls, then a grid of
   film frames with each alum's name and class year set in the frame. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.dir-page {
  /* A faint wash of Olin blue behind the intro, fading into the night background. */
  background:
    radial-gradient(ellipse 70% 420px at 18% 0%, rgba(0, 69, 140, .32), rgba(0, 69, 140, 0) 70%),
    var(--bg);
}
.dir-intro {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 56px;
  padding-block: 28px 44px;
}
.dir-intro .page-title { flex: 1 1 420px; min-width: 0; }
.dir-intro-side { flex: 0 1 400px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.dir-lede { margin: 0; font-size: 18px; font-weight: 300; line-height: 1.6; color: var(--body); }

/* Controls: sticky under the top of the window so they stay in reach down a long grid. */
.dir-bar {
  position: sticky; top: var(--banner-h); z-index: 10;
  border-block: 1px solid var(--line);
  background: rgba(5, 8, 13, .86);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
}
.dir-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding-block: 14px; }

.dir-search {
  position: relative; flex: 1 1 260px; min-width: 0; display: flex; align-items: center;
  color: var(--muted); transition: color .3s;
}
.dir-search:focus-within { color: var(--cyan); }
.dir-search svg { position: absolute; left: 14px; pointer-events: none; }
.dir-search input, .dir-year select {
  height: 46px; box-sizing: border-box; margin: 0;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 2px; background: var(--surface); color: var(--fg);
  transition: border-color .3s, box-shadow .3s;
}
.dir-search input { width: 100%; padding: 0 14px 0 44px; font: 300 17px/1 var(--font-body); }
.dir-search input::placeholder { color: var(--faint); }
.dir-search input::-webkit-search-cancel-button { filter: invert(1) brightness(.7); cursor: pointer; }
.dir-search input:hover, .dir-year select:hover { border-color: var(--line-strong); }
.dir-search input:focus, .dir-year select:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0, 194, 237, .22); }

.dir-year { flex: none; display: flex; align-items: center; gap: 12px; }
.dir-year label, .dir-count {
  font: 500 14px/1 var(--font-cond); letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.dir-year select {
  -webkit-appearance: none; appearance: none; min-width: 150px; padding: 0 40px 0 14px; cursor: pointer;
  font: 500 17px/1 var(--font-cond); letter-spacing: .06em; font-variant-numeric: tabular-nums;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2300C2ED' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.dir-year select option { background: var(--surface); color: var(--fg); }

/* Sort: one segmented control; the chosen order is filled in cyan. */
.dir-sort {
  flex: none; display: flex; margin: 0 0 0 auto; padding: 0; min-width: 0;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 2px;
}
.dir-sort input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.dir-sort label {
  display: flex; align-items: center; justify-content: center; height: 44px; padding: 0 16px; box-sizing: border-box;
  font: 500 13px/1 var(--font-cond); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  color: var(--muted); cursor: pointer; transition: background .25s, color .25s;
}
.dir-sort label + input + label { border-left: 1px solid rgba(255, 255, 255, .12); }
.dir-sort label:hover { color: var(--fg); background: rgba(255, 255, 255, .04); }
.dir-sort input:checked + label { background: var(--cyan); color: var(--bg); font-weight: 600; }
.dir-sort input:focus-visible + label { outline: 2px solid var(--cyan); outline-offset: 2px; position: relative; z-index: 1; }

.dir-main { flex: 1; display: flex; flex-direction: column; gap: 22px; padding-block: 28px 88px; }
.dir-count { margin: 0; font-variant-numeric: tabular-nums; }

.memory-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(172px, 100%), 1fr)); gap: 28px 18px;
}
.memory { min-width: 0; }
.memory-card { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: var(--fg); text-align: left; cursor: pointer; }
.memory-card:focus-visible { outline: none; }
.memory-frame {
  position: relative; display: block; max-width: 100%; aspect-ratio: 9 / 16; overflow: hidden;
  border-radius: 3px; background: var(--surface);
  transition: transform .6s var(--ease), box-shadow .6s ease;
}
.memory-frame > img, .memory-frame > video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  filter: brightness(.66) saturate(.8); transition: filter .6s ease, transform .9s var(--ease), opacity .4s ease;
}
/* The hover preview sits on top of the still and fades in once it's playing. */
.memory-frame > .memory-preview { opacity: 0; filter: none; }
.memory-frame.is-previewing > .memory-preview { opacity: 1; }
/* Shade under the credit so the name reads over any frame. */
.memory-frame::after {
  content: ""; position: absolute; inset: 45% 0 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 8, 13, 0), rgba(5, 8, 13, .55) 45%, rgba(5, 8, 13, .92));
}
.memory-card .play { z-index: 2; top: 42%; width: 48px; }
.memory-credit {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 6px; padding: 0 16px 16px;
}
.memory-name { font: 500 19px/1.2 var(--font-body); overflow-wrap: anywhere; text-wrap: balance; }
.memory-year { font: 500 13px/1.2 var(--font-cond); letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); font-variant-numeric: tabular-nums; }

.memory-card:hover .memory-frame, .memory-card:focus-visible .memory-frame {
  transform: translateY(-4px); box-shadow: 0 28px 70px rgba(0, 0, 0, .75), 0 0 0 1px var(--cyan);
}
.memory-card:focus-visible .memory-frame { box-shadow: 0 28px 70px rgba(0, 0, 0, .75), 0 0 0 2px var(--cyan); }
.memory-card:hover .memory-frame > img, .memory-card:hover .memory-frame > video,
.memory-card:focus-visible .memory-frame > img, .memory-card:focus-visible .memory-frame > video { filter: brightness(.9) saturate(1); transform: scale(1.04); }
.memory-card:hover .play, .memory-card:focus-visible .play { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }

/* The signed-in alum's own card (issue #57): ringed in cyan and tagged, so it's easy to spot. */
.memory[data-mine] .memory-frame { outline: 2px solid var(--cyan); outline-offset: 3px; }
.memory-mine {
  position: absolute; z-index: 2; top: 12px; left: 12px; padding: 5px 8px; border-radius: 2px;
  background: var(--cyan); color: var(--bg); font: 600 12px/1 var(--font-cond); letter-spacing: .16em; text-transform: uppercase;
}

.memory--empty, .dir-none {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
  padding: 28px; border: 1px dashed var(--line-strong); border-radius: 2px;
}
.memory--empty p, .dir-none p { margin: 0; font-size: 18px; font-weight: 300; color: var(--body); overflow-wrap: anywhere; }

/* ---------- passkey pages ---------- */
.page-copy.narrow { flex: 0 1 640px; gap: 32px; }
.lede { margin: 0; font-size: 18px; font-weight: 300; line-height: 1.6; color: var(--body); max-width: 56ch; }
.passkey-box {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px;
  border: 1px solid var(--cyan); border-radius: 2px; background: rgba(0, 194, 237, .08);
}
.passkey { font: 500 clamp(17px, 5.6vw, 34px)/1.2 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; letter-spacing: .06em; color: var(--fg); white-space: nowrap; user-select: all; }
.passkey-wrap { display: flex; flex-direction: column; gap: 8px; }
.passkey-wrap .hint { margin: 0; min-height: 1.4em; }
.passkey-field { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.passkey-field::placeholder { text-transform: none; }
.check { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 17px; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 0; accent-color: var(--cyan); }
.field-group .check { font: 300 17px/1.4 var(--font-body); letter-spacing: normal; text-transform: none; color: var(--fg); }
.check:has(input:disabled) { opacity: .5; cursor: default; }
.btn:disabled { opacity: .6; cursor: progress; }

/* ---------- recorder (record.html) ----------
   Just a background and the vertical camera preview, which runs the full
   height of the screen with its controls on top. On a phone it fills the
   screen. After Submit, the confirm step shows a smaller preview beside (or
   above) its form. */
.rec-body { min-height: 100vh; min-height: 100svh; background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(0, 69, 140, .32), transparent 70%), var(--bg); }
.rec-main { min-height: var(--screen-h); min-height: var(--screen-sh); display: flex; justify-content: center; align-items: center; }
.rec-stage { display: flex; flex-direction: column; align-items: center; gap: 16px; min-width: 0; }
.rec-frame {
  position: relative; height: var(--screen-h); height: var(--screen-sh); width: min(100vw, calc(var(--screen-h) * 9 / 16)); width: min(100vw, calc(var(--screen-sh) * 9 / 16));
  overflow: hidden; background: var(--black);
}
.rec-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.rec-live.is-mirrored { transform: scaleX(-1); }
.rec-playback { cursor: pointer; }
.rec-frame .rec-tag { top: 16px; left: 16px; } /* the banner above already clears the notch */
.rec-timer { font-variant-numeric: tabular-nums; }
.rec-timer.is-ending { color: var(--rec); }
.rec-note {
  position: absolute; inset: 0; margin: 0; padding: 24px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  text-align: center; font-size: 16px; font-weight: 300; line-height: 1.5; color: var(--body);
}
.rec-note p { margin: 0; }
.rec-controls { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
/* On the preview: along the bottom, over a shade so they show up on any video. */
.rec-frame .rec-controls {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; box-sizing: border-box;
  padding: 72px 16px calc(32px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(transparent, rgba(0, 0, 0, .6));
}
.rec-frame .btn-ghost { border-color: rgba(255, 255, 255, .6); background: rgba(0, 0, 0, .35); }
.rec-shutter {
  width: 78px; height: 78px; padding: 0; border: 4px solid var(--fg); border-radius: 50%; background: transparent;
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity .2s ease;
}
/* While the camera starts: shown, but not yet pressable. */
.rec-shutter:disabled { opacity: .4; cursor: progress; }
.rec-shutter::after { content: ""; width: 60px; height: 60px; border-radius: 50%; background: var(--rec); transition: width .25s var(--ease), height .25s var(--ease), border-radius .25s var(--ease); }
.rec-shutter:enabled:hover::after { filter: brightness(1.15); }
.rec-shutter.is-recording::after { width: 30px; height: 30px; border-radius: 5px; }
/* Until a recording is long enough, Stop is dimmed and does nothing. */
.rec-shutter[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
.rec-shutter[aria-disabled="true"]:hover::after { filter: none; }
/* The 3-2-1 before recording (issue #82): a big number in the middle of the preview. */
.rec-countdown {
  position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; pointer-events: none;
  font: 600 clamp(120px, 36vw, 200px)/1 var(--font-cond); font-variant-numeric: tabular-nums; color: var(--fg);
  text-shadow: 0 4px 40px rgba(0, 0, 0, .55);
}
.rec-countdown .is-ticking { animation: countTick 1s var(--ease) both; }
@keyframes countTick { from { opacity: 0; transform: scale(1.5); } 25% { opacity: 1; transform: none; } 80% { opacity: 1; } to { opacity: .2; } }
.rec-min { flex-basis: 100%; margin: 0; text-align: center; font-size: 14px; color: var(--fg); }
/* The confirm step: a smaller preview next to the form. */
.rec-main:is([data-state="confirm"], [data-state="uploading"]) {
  flex-wrap: wrap; gap: 32px 72px; box-sizing: border-box;
  padding: 40px var(--gutter-r) 48px var(--gutter-l);
}
.rec-main:is([data-state="confirm"], [data-state="uploading"]) .rec-frame {
  height: auto; width: min(300px, 100vw - 32px); aspect-ratio: 9 / 16; border-radius: 3px; box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
}
.rec-confirm { flex: 0 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.rec-confirm-title { margin: 0; font-weight: 300; font-size: clamp(40px, 4.6vw, 64px); line-height: 1; text-wrap: balance; }
.rec-confirm-title strong { font-weight: 600; }
.rec-confirm-title:focus { outline: none; }
.rec-confirm .lede { font-size: 17px; }
.choices { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 12px; }
.choices legend { padding: 0; margin-bottom: 14px; font: 500 14px/1.2 var(--font-cond); letter-spacing: .2em; text-transform: uppercase; }
.choice {
  display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: 2px; transition: border-color .3s, background .3s;
}
.choice:hover { border-color: var(--cyan); }
.choice:has(input:checked) { border-color: var(--cyan); background: rgba(0, 194, 237, .08); }
.choice input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--cyan); }
.choice-text { display: flex; flex-direction: column; gap: 4px; }
.choice-name { font-size: 17px; font-weight: 500; }
.choice-desc { font-size: 15px; font-weight: 300; line-height: 1.5; color: var(--body); }
.rec-confirm .hint { margin: 0; }
.rec-confirm :disabled { opacity: .5; cursor: progress; }
/* Uploading (and the face check): a spinner where the confirm form was. */
.rec-wait { flex: 0 1 480px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.rec-wait-title { margin: 0; font-weight: 300; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.1; text-wrap: balance; }
.rec-wait-title:focus { outline: none; }
.rec-wait .hint { margin: 0; font-size: 16px; }
.rec-spinner {
  width: 44px; height: 44px; box-sizing: border-box; border-radius: 50%;
  border: 3px solid var(--line-strong); border-top-color: var(--cyan); animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- responsive ---------- */
@media (max-width: 1300px) {
  .has-tab .wrap { padding-right: max(72px, env(safe-area-inset-right, 0px)); }
}
@media (max-width: 760px) {
  .hero-copy { gap: 18px; }
  .hero-eyebrow { gap: 12px; font-size: 13px; letter-spacing: .26em; white-space: nowrap; }
  .hero-eyebrow::before, .hero-eyebrow::after { width: 20px; }
  .hero-title { font-size: 10.5vw; line-height: 1.1; white-space: normal; text-wrap: balance; } /* two lines: HOPPER / GIVING DAY */
  .hero-sub { max-width: 22ch; text-wrap: balance; }
  .hero-cue { max-width: calc(100% - 32px); text-align: center; letter-spacing: .2em; }
  .about-body { padding-block: 56px 8px; }
  /* The give tab moves off the side, where it narrowed every page, to a button in the bottom corner. */
  .give-tab {
    top: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); right: calc(16px + env(safe-area-inset-right, 0px));
    flex-direction: row; gap: 10px; min-height: 48px; padding: 0 18px; border-radius: 2px;
    font-size: 13px; transform: translateY(calc(100% + 40px));
  }
  .give-tab.is-visible, .give-tab.is-visible:hover { transform: none; }
  .give-tab span { writing-mode: horizontal-tb; transform: none; }
  .has-tab .wrap { padding-right: var(--gutter-r); }
  .site-foot .wrap { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); } /* room for the give button */
  .board { padding: 22px 18px 8px; }
  .board-head h3 { font-size: 18px; }
  .lb-class { grid-template-columns: 2em minmax(0, 1fr) auto; column-gap: 8px; }
  .lb-year { font-size: 34px; }
  .page-main, .send-main { gap: 40px; }
  .dir-intro { padding-block: 16px 32px; }
  .dir-bar { position: static; }
  .dir-year { flex: 1 1 100%; }
  .dir-year select { flex: 1; }
  .dir-sort { flex: 1 1 100%; display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
  .dir-sort label + input + label { border-left: 0; }
  .dir-sort label:nth-of-type(even) { border-left: 1px solid rgba(255, 255, 255, .12); }
  .dir-sort label:nth-of-type(n + 3) { border-top: 1px solid rgba(255, 255, 255, .12); }
  .memory-grid { grid-template-columns: repeat(auto-fill, minmax(min(128px, 100%), 1fr)); gap: 16px 12px; }
  .memory-credit { padding: 0 12px 12px; gap: 4px; }
  .memory-name { font-size: 16px; }
  .memory-year { font-size: 12px; letter-spacing: .16em; }
  .memory-card .play { width: 40px; }
  /* Make room for the confirm form under the video. */
  .rec-main:is([data-state="confirm"], [data-state="uploading"]) .rec-frame { width: 200px; }
  .rec-main:is([data-state="confirm"], [data-state="uploading"]) { padding-top: 24px; }
}
@media (max-width: 900px) {
  .rec-art { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}