/* 35 · The inner pages: Work, About, The Dor Awards, Contact, Thank You and 404.
   Same black tie as the home page (studio.css comes first and does most of the work): black,
   warm white, one gold; Fraunces for the display, Jost for every sentence; fine gold hairline
   frames, a warm bloom on the white type, the fine grain over everything. */

/* ---------- the top of every inner page: a gold label, the title with its echo ---------- */
.page main > section:first-child { padding-top: calc(var(--nav-h) + clamp(36px, 4.4vw, 116px)); }
.page-top { padding: 0 var(--m); }
.page-top--center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.title {
  position: relative; isolation: isolate; width: fit-content; max-width: 100%; margin: .12em 0 0;
  font: italic 800 clamp(58px, 7vw, 180px)/.94 var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1;
  letter-spacing: -.02em; padding: 0 .08em .08em 0; color: var(--ink); text-wrap: balance;
  text-shadow: 0 0 2px rgba(255, 244, 225, .6), 0 0 .07em rgba(255, 232, 200, .32), 0 0 .3em rgba(255, 214, 170, .14);
}
/* the optical-printer echo, as on the home page's name */
.title::before, .title::after {
  content: attr(data-text); content: attr(data-text) / "";
  position: absolute; inset: 0; padding: inherit;
  color: var(--black); text-shadow: none; pointer-events: none;
  -webkit-text-stroke: clamp(1px, .08vw, 2px) rgba(245, 240, 230, .6);
}
.title::before { transform: translate(.02em, .026em); z-index: -1; }
.title::after { transform: translate(.04em, .052em); z-index: -2; -webkit-text-stroke-color: rgba(245, 240, 230, .32); }
.page-sub { margin-top: clamp(14px, 1.2vw, 30px); max-width: 30em; font-size: var(--lead); line-height: 1.45; color: var(--soft); text-wrap: balance; }

/* a picture in the black-tie frame: a hairline, and a gold one just inside it */
.plate { position: relative; overflow: hidden; border-radius: var(--radius); box-shadow: 0 0 0 1px var(--line), 0 0 7vw rgba(255, 224, 186, .05); background: #0b0b0a; }
.plate img { width: 100%; height: 100%; object-fit: cover; }
.plate::after { content: ''; position: absolute; inset: clamp(5px, .38vw, 10px); border: 1px solid rgba(201, 162, 75, .45); pointer-events: none; }

/* the last word of every inner page: one line and the key to start a project */
.coda { position: relative; margin-top: var(--gap); padding: calc(var(--gap) * .9) var(--m) calc(var(--gap) * .95); text-align: center; display: flex; flex-direction: column; align-items: center; }
.coda::before { content: ''; position: absolute; top: 0; left: 50%; width: clamp(60px, 5vw, 128px); height: 1px; transform: translateX(-50%); background: var(--gold); }
.coda__line { max-width: 18em; font: italic 600 clamp(34px, 3.3vw, 86px)/1.06 var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1; letter-spacing: -.012em; text-wrap: balance; text-shadow: var(--halo-big); }
.key--big { margin-top: clamp(26px, 2.2vw, 56px); min-height: clamp(58px, 3.2vw, 82px); padding: .2em 2.2em; font-size: clamp(16px, calc(10px + .34vw), 19px); }

/* ---------- a picture that plays: the bar low on the left, the lettering left clear ---------- */
.reel a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.reel__pic { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); box-shadow: 0 0 0 1px var(--line); background: #0b0b0a; transition: box-shadow .25s ease; cursor: pointer; }
.reel__pic img { width: 100%; height: 100%; object-fit: cover; transition: filter .35s ease; }
a.reel__pic::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(to top, rgba(4, 4, 4, .66), rgba(4, 4, 4, 0)); pointer-events: none; }
.reel a:focus-visible { outline: 0; }
.reel a:hover .reel__pic, .reel a:focus-visible .reel__pic, a.reel__pic:hover, a.reel__pic:focus-visible { box-shadow: 0 0 0 2px var(--gold), 0 0 2.4vw rgba(201, 162, 75, .18); }
.reel a:hover .reel__pic img, .reel a:focus-visible .reel__pic img, a.reel__pic:hover img, a.reel__pic:focus-visible img { filter: brightness(1.12) saturate(1.04); }
a.reel__pic:focus-visible { outline: 0; }
.reel__bar {
  --pad: clamp(9px, .7vw, 18px);
  position: absolute; z-index: 1; left: var(--pad); right: calc(var(--pad) * 1.3); bottom: var(--pad);
  display: flex; align-items: center; gap: clamp(9px, .7vw, 18px);
}
.reel__play {
  flex: none; display: grid; place-items: center; width: clamp(42px, 2.7vw, 70px); aspect-ratio: 1; border-radius: 50%;
  background: rgba(4, 4, 4, .5); box-shadow: inset 0 0 0 1px rgba(245, 240, 230, .9), 0 0 1.4em rgba(0, 0, 0, .4);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s, box-shadow .2s;
}
.reel__play i { width: 0; height: 0; margin-left: .2em; border-style: solid; border-width: .52em 0 .52em .86em; border-color: transparent transparent transparent var(--ink); font-size: clamp(13px, .82vw, 21px); transition: border-color .2s; }
.reel a:hover .reel__play, .reel a:focus-visible .reel__play, a.reel__pic:hover .reel__play, a.reel__pic:focus-visible .reel__play { background: var(--gold); box-shadow: inset 0 0 0 1px var(--gold), 0 0 1.6em rgba(201, 162, 75, .55); }
.reel a:hover .reel__play i, .reel a:focus-visible .reel__play i, a.reel__pic:hover .reel__play i, a.reel__pic:focus-visible .reel__play i { border-left-color: #000; }
.reel__track { position: relative; flex: 1; min-width: 0; height: 2px; background: rgba(245, 240, 230, .42); }
.reel__track::before { content: ''; position: absolute; left: 0; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); transform: translate(-30%, -50%); box-shadow: 0 0 8px rgba(201, 162, 75, .7); }
.reel__tag { flex: none; font: 500 var(--label)/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); text-shadow: 0 0 6px rgba(0, 0, 0, .7); }
@media (prefers-reduced-motion: no-preference) {
  .reel__pic img { transition: filter .35s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
  .reel a:hover .reel__pic img, .reel a:focus-visible .reel__pic img, a.reel__pic:hover img, a.reel__pic:focus-visible img { transform: scale(1.025); }
}
/* under each picture of a list: the play key, then the name, so the thumbnail's own lettering stays whole */
.reel__row { display: flex; align-items: flex-start; gap: clamp(12px, .8vw, 20px); padding-top: clamp(12px, .9vw, 22px); }
.reel__row .reel__play { width: clamp(38px, 2.1vw, 54px); margin-top: -.1em; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1px rgba(201, 162, 75, .75); }
.reel__row .reel__play i { font-size: clamp(11px, .62vw, 16px); }
.reel--big .reel__row .reel__play { width: clamp(46px, 2.7vw, 70px); }
.reel--big .reel__row .reel__play i { font-size: clamp(13px, .8vw, 20px); }
.reel__txt { display: flex; flex-direction: column; gap: .3em; min-width: 0; }
.reel__row .reel__txt { padding-top: .3em; }
.reel__name { font: italic 600 clamp(21px, 1.3vw, 34px)/1.14 var(--serif); font-variation-settings: "SOFT" 100, "WONK" 0; text-wrap: balance; text-shadow: var(--halo); }
.reel a:hover .reel__name { color: #fff; }
.reel__sub { font: 400 clamp(15px, calc(8px + .5vw), 21px)/1.4 var(--sans); color: var(--dim); text-wrap: balance; }
.reel__line { font-size: var(--text); line-height: 1.5; color: var(--soft); text-wrap: pretty; }

/* ---------- WORK: the screening programme ---------- */
/* the four programmes, as a bill of four parts. Without the script they are links down the page */
.bill {
  margin-top: clamp(30px, 2.8vw, 72px); width: min(100%, 1500px);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--nav-h) + 12px);
}
.bill__tab {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3em;
  min-height: 44px; padding: clamp(14px, 1.2vw, 30px) .6em; text-decoration: none; color: var(--dim);
  transition: color .2s, background .2s;
}
.bill__tab + .bill__tab::before { content: ''; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: var(--line); }
.bill__n { font: 500 var(--label)/1.3 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.bill__t { font: italic 600 clamp(22px, 1.75vw, 46px)/1.1 var(--serif); font-variation-settings: "SOFT" 100, "WONK" 0; text-wrap: balance; }
.bill__tab:hover { color: #fff; text-shadow: var(--halo); }
.bill__tab:focus-visible { outline-offset: -6px; }
/* the programme showing: full white, the fine gold frame around it, a soft warm light */
.bill__tab[aria-selected="true"] { color: var(--ink); background: radial-gradient(ellipse at 50% 120%, rgba(201, 162, 75, .16), rgba(201, 162, 75, 0) 70%); text-shadow: var(--halo-big); }
.bill__tab[aria-selected="true"]::after { content: ''; position: absolute; inset: clamp(4px, .32vw, 8px); border: 1px solid rgba(201, 162, 75, .6); pointer-events: none; }

.programme { padding: calc(var(--gap) * .62) var(--m) 0; }
.has-tabs .programme { padding-top: calc(var(--gap) * .5); }

/* the chosen piece of each programme: larger, the name beside it */
.feat { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: center; }
.feat__txt { grid-column: 1 / span 5; padding-right: clamp(0px, 2vw, 60px); container-type: inline-size; text-align: center; display: flex; flex-direction: column; align-items: center; }
.feat__name {
  margin: .14em 0 .1em; max-width: 100%;
  font: 900 min(clamp(64px, 7vw, 190px), calc(var(--fit, 12) * 1cqi))/.94 var(--serif); font-variation-settings: "SOFT" 100, "WONK" 0;
  letter-spacing: .005em; text-wrap: balance; text-shadow: var(--halo-big);
}
.feat__by { font: italic 500 clamp(22px, 1.5vw, 40px)/1.2 var(--serif); font-variation-settings: "SOFT" 100, "WONK" 0; color: var(--gold); }
.feat__txt .lead { margin-top: .8em; max-width: 21em; text-wrap: balance; }
.feat__txt .keys { justify-content: center; }
.feat__pic { grid-column: 6 / -1; }

/* "More Films": a label between two hairlines, then the grid */
.also { margin: calc(var(--gap) * .62) 0 calc(var(--step) * 1.05); display: flex; align-items: center; gap: 1.4em; font: 500 var(--label)/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
.also::before, .also::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, transparent, var(--line)); }
.also::after { background: linear-gradient(to left, transparent, var(--line)); }
.reels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--step) * 1.15) clamp(18px, 1.6vw, 44px); }
.reel { min-width: 0; }

/* ---------- the player: the title links to the film on YouTube ---------- */
.player__title { align-items: center; gap: .4em 1.1em; }
.player__name { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35em 1em; min-width: 0; color: var(--ink); text-decoration: none; }
/* the linked title wears a faint gold underline (the plain one, Lost Between Cuts, none) */
a.player__name b { text-decoration: underline; text-decoration-color: rgba(201, 162, 75, .5); text-decoration-thickness: 1px; text-underline-offset: .2em; transition: text-decoration-color .2s; }
.player__name--plain b { text-decoration: none; }
.player__bar .key { margin-left: auto; }
a.player__name:hover b, a.player__name:focus-visible b { color: #fff; text-decoration-color: var(--gold); }
.player__yt {
  display: inline-flex; align-items: center; gap: .45em; min-height: 36px; padding: .15em .85em;
  border: 1px solid var(--gold); color: var(--gold); white-space: nowrap;
  font: 500 var(--label)/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  transition: background .2s, color .2s;
}
a.player__name:hover .player__yt, a.player__name:focus-visible .player__yt { background: var(--gold); color: #000; }
.player__name--plain { color: var(--ink); }
/* the screen in the double frame: a hairline, black, then a gold hairline */
.player__screen {
  position: relative;
  box-shadow: 0 0 0 1px var(--line), 0 0 0 clamp(5px, .38vw, 10px) var(--black), 0 0 0 calc(clamp(5px, .38vw, 10px) + 1px) rgba(201, 162, 75, .5), 0 0 9vw rgba(255, 224, 186, .08);
}
.player__screen iframe, .player__screen video { display: block; width: 100%; height: 100%; border: 0; background: #000; }
.player__again { position: relative; display: block; width: 100%; height: 100%; }
.player__again img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.45); }
.player__again-key { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 1em; font: 500 var(--label)/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink); text-shadow: 0 0 8px rgba(0, 0, 0, .8); }
.player__again:hover .reel__play, .player__again:focus-visible .reel__play { background: var(--gold); }
.player__again:hover .reel__play i, .player__again:focus-visible .reel__play i { border-left-color: #000; }
.player__again:focus-visible { outline-offset: -6px; }
.player__edge { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ---------- ABOUT: the after-party, questions and answers ---------- */
.party { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: var(--step); align-items: center; padding-left: var(--m); padding-right: var(--m); }
.party__txt { grid-column: 1 / span 5; }
.party__txt .page-sub { max-width: 22em; text-wrap: pretty; }
.party__pic { grid-column: 7 / -1; aspect-ratio: 1456 / 816; }

.talk-sec { padding: var(--gap) var(--m) 0; }
.talk { margin: 0 auto; max-width: 1560px; }
.talk__x { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: clamp(24px, 2.6vw, 72px); align-items: baseline; padding: calc(var(--step) * .8) 0; }
.talk__x + .talk__x { border-top: 1px solid var(--line); }
.talk__q { text-align: right; font: italic 600 clamp(26px, 1.9vw, 50px)/1.15 var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--ink); text-wrap: balance; text-shadow: var(--halo-big); }
.talk__q::before { content: '\2014\2009'; color: var(--gold); }
.talk__a { max-width: 30em; font-size: var(--lead); line-height: 1.45; color: var(--soft); text-wrap: pretty; }
.talk__a a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: .22em; }
.talk__a a:hover { color: #fff; }
.talk--stack .talk__x { grid-template-columns: minmax(0, 1fr); row-gap: .5em; }
.talk--stack .talk__q { text-align: left; }

.toast { position: relative; margin-top: var(--gap); padding: calc(var(--gap) * .7) var(--m) 0; display: grid; grid-template-columns: 1.45fr 1fr 1fr; align-items: end; text-align: center; }
.toast::before { content: ''; position: absolute; top: 0; left: 50%; width: clamp(60px, 5vw, 128px); height: 1px; transform: translateX(-50%); background: var(--gold); }
.toast__h { grid-column: 1 / -1; margin-bottom: calc(var(--step) * 1.1); }

.secret { padding: var(--gap) var(--m) 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: var(--step); align-items: center; }
.secret__pic { grid-column: 1 / span 6; aspect-ratio: 1456 / 816; }
.secret__txt { grid-column: 8 / -1; }
.secret__txt .talk { margin-top: calc(var(--step) * .5); }

.said-sec { padding: var(--gap) var(--m) 0; text-align: center; }
.said-sec > .label { margin-bottom: calc(var(--step) * 1.1); }
.quotes3 {
  --qgap: clamp(28px, 3.2vw, 84px);
  margin: calc(var(--step) * 1.5) auto 0; max-width: 2000px; padding-top: calc(var(--step) * 1.1); border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--step) var(--qgap); text-align: left;
}
.quotes3 .quote { flex: 0 1 calc((100% - 2 * var(--qgap)) / 3); max-width: 28em; }
.quotes3 .quote blockquote { font-size: var(--lead); line-height: 1.45; }

.band { padding-bottom: 0; }

/* ---------- THE DOR AWARDS: the gala, after the fact ---------- */
.gala__line { margin-top: .5em; font: italic 500 clamp(24px, 1.9vw, 50px)/1.2 var(--serif); font-variation-settings: "SOFT" 100, "WONK" 0; color: var(--soft); text-wrap: balance; text-shadow: var(--halo); }
/* the trophies: the picture cut low and wide, so the poster's own lettering stays out of it */
.gala__pic { margin-top: clamp(30px, 2.8vw, 72px); width: min(100%, 1880px); aspect-ratio: 2.7 / 1; }
.gala__pic img { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; }

.was { padding: var(--gap) var(--m) 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: calc(var(--step) * 1.2); align-items: center; }
.was__txt { grid-column: 1 / span 4; }
.was__txt .lead { margin-top: .8em; }
.was__txt .body { margin-top: .9em; }
.themes { grid-column: 6 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g); }
.theme {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(26px, 2.2vw, 58px) clamp(18px, 1.6vw, 42px) clamp(28px, 2.4vw, 62px);
  border-radius: var(--radius); box-shadow: 0 0 0 1px var(--line); background: rgba(245, 240, 230, .022);
}
.theme::before { content: ''; position: absolute; inset: clamp(5px, .38vw, 10px); border: 1px solid rgba(201, 162, 75, .32); pointer-events: none; }
.theme__icon { width: clamp(52px, 3.6vw, 92px); height: auto; fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 .4em rgba(201, 162, 75, .35)); }
.theme__icon circle { fill: var(--gold); stroke: none; }
.theme__name { margin-top: .35em; font: italic 700 clamp(32px, 2.4vw, 62px)/1 var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1; text-shadow: var(--halo-big); }
.theme__line { margin-top: .7em; max-width: 15em; font-size: var(--text); line-height: 1.5; color: var(--soft); text-wrap: pretty; }

.watch, .guests { padding: var(--gap) var(--m) 0; }
.watch__head, .guests__head { text-align: center; margin-bottom: calc(var(--step) * 1.2); }
.watch__list { margin: 0 auto; max-width: 2100px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--step) clamp(24px, 2.4vw, 64px); }
.reel--big .reel__name { font-size: clamp(26px, 1.9vw, 50px); }
.reel--big .reel__txt { gap: .45em; }

/* the ten judges: cameo portraits in fine gold ovals, grey until pointed at or focused */
.cameos { margin: 0 auto; max-width: 2100px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(var(--step) * 1.2) clamp(18px, 2vw, 54px); }
.cameo { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; container-type: inline-size; border-radius: var(--radius); }
.cameo:focus-visible { outline-offset: 8px; }
.cameo__pic {
  position: relative; display: block; width: min(100%, 300px); aspect-ratio: 4 / 5; overflow: hidden; border-radius: 50%;
  background: #111; box-shadow: 0 0 0 1px var(--line), 0 0 0 clamp(5px, .38vw, 10px) var(--black), 0 0 0 calc(clamp(5px, .38vw, 10px) + 1px) rgba(201, 162, 75, .55);
  margin: calc(clamp(5px, .38vw, 10px) + 2px);
}
.cameo__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; filter: grayscale(1) contrast(1.1) brightness(.9); transition: filter .4s ease; }
.cameo:hover .cameo__pic img, .cameo:focus .cameo__pic img, .cameo:focus-within .cameo__pic img { filter: none; }
.cameo:hover .cameo__pic, .cameo:focus .cameo__pic { box-shadow: 0 0 0 1px var(--line), 0 0 0 clamp(5px, .38vw, 10px) var(--black), 0 0 0 calc(clamp(5px, .38vw, 10px) + 1px) var(--gold), 0 0 2em rgba(201, 162, 75, .25); }
.cameo__name { margin-top: .7em; font: italic 700 min(clamp(22px, 1.45vw, 38px), 10.4cqi)/1.05 var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1; letter-spacing: -.01em; white-space: nowrap; text-shadow: var(--halo-big); }
.cameo__role { margin-top: .45em; font-size: clamp(15px, calc(8px + .5vw), 21px); line-height: 1.4; color: var(--ink); text-wrap: balance; }
.cameo__more { margin-top: .5em; font-size: clamp(15px, calc(8px + .5vw), 21px); line-height: 1.45; color: var(--dim); text-wrap: balance; }

.panel { margin: calc(var(--step) * 1.8) auto 0; max-width: 2100px; padding-top: calc(var(--step) * 1.1); border-top: 1px solid var(--line); text-align: center; }
.minis { margin-top: calc(var(--step) * .9); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--step) var(--g); }
.mini { display: flex; flex-direction: column; align-items: center; gap: .8em; min-width: 0; }
.mini__pic { flex: none; width: clamp(84px, 5.4vw, 140px); aspect-ratio: 1; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 1px rgba(201, 162, 75, .5); background: #111; }
.mini__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; filter: grayscale(1) contrast(1.1) brightness(.9); transition: filter .4s ease; }
.mini:hover .mini__pic img { filter: none; }
.mini__txt { display: flex; flex-direction: column; gap: .25em; }
.mini__name { font: italic 600 clamp(21px, 1.25vw, 32px)/1.1 var(--serif); font-variation-settings: "SOFT" 100, "WONK" 0; text-shadow: var(--halo); }
.mini__role { font-size: clamp(15px, calc(8px + .5vw), 21px); line-height: 1.4; color: var(--dim); text-wrap: balance; }

/* ---------- CONTACT: the RSVP card ---------- */
.rsvp { padding: 0 var(--m) var(--gap); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: calc(var(--step) * 1.3); align-items: start; }
.rsvp__side { grid-column: 1 / span 4; }
.title--side { font-size: clamp(56px, 5vw, 132px); }
.rsvp__joke { margin-top: clamp(18px, 1.5vw, 40px); font: italic 500 clamp(24px, 1.7vw, 44px)/1.2 var(--serif); font-variation-settings: "SOFT" 100, "WONK" 0; color: var(--gold); text-wrap: balance; }
.rsvp__side > .body { margin-top: .9em; max-width: 24em; }
.rsvp__else { margin-top: calc(var(--step) * 1.2); padding-top: calc(var(--step) * .7); border-top: 1px solid var(--line); }
.rsvp__else ul { margin-top: .5em; display: flex; flex-wrap: wrap; gap: 0 1.6em; }
.rsvp__else a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text); color: var(--soft); text-decoration: none; }
.rsvp__else a:hover { color: #fff; text-shadow: var(--halo); }
.rsvp .brief { grid-column: 5 / -1; }
.brief--rsvp .brief__top { flex-direction: column; align-items: flex-start; gap: .5em; }
/* the choices in even rows of three, so no choice is left alone on a row */
@media (min-width: 901px) {
  .brief--rsvp .chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brief--rsvp .chip { display: flex; }
  .brief--rsvp .chip span { flex: 1; }
}
@media (min-width: 1701px) {
  .rsvp__side { grid-column: 1 / span 4; }
  .rsvp .brief { grid-column: 6 / -1; }
  /* the card is narrower than the home page's brief: the steps stay one under another */
  .brief--rsvp { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "top top" "need need" "budget budget" "subject name" "words email" "words send"; }
}

/* ---------- THANK YOU and 404: one screen, one joke, two ways on ---------- */
.note {
  min-height: 100svh; padding-bottom: clamp(28px, 3vw, 80px); padding-left: var(--m); padding-right: var(--m);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: var(--step); align-content: center; align-items: center;
}
.page .note:first-child { padding-top: calc(var(--nav-h) + clamp(24px, 2.4vw, 64px)); }
.note__txt { grid-column: 1 / span 6; }
.title--note { font-size: clamp(50px, 5.6vw, 150px); }
.note__txt .lead { margin-top: clamp(16px, 1.4vw, 36px); max-width: 22em; }
.note__txt .body { margin-top: .7em; }
.note__txt .keys { margin-top: clamp(22px, 2vw, 52px); }
.guestlist { grid-column: 8 / -1; position: relative; padding: clamp(24px, 2.4vw, 64px) clamp(24px, 2.6vw, 70px); border-radius: var(--radius); box-shadow: 0 0 0 1px var(--line); background: rgba(245, 240, 230, .022); }
.guestlist::before { content: ''; position: absolute; inset: clamp(5px, .38vw, 10px); border: 1px solid rgba(201, 162, 75, .32); pointer-events: none; }
.guestlist ul { margin-top: calc(var(--step) * .6); }
.guestlist li { display: flex; align-items: baseline; gap: .6em; padding: .5em 0; font-size: var(--text); line-height: 1.35; color: var(--dim); }
.gl__name { font: italic 500 1.08em/1.3 var(--serif); font-variation-settings: "SOFT" 100, "WONK" 0; }
.gl__dots { flex: 1; min-width: 1.5em; border-bottom: 1px dotted rgba(245, 240, 230, .35); transform: translateY(-.3em); }
.gl__state { flex: none; font: 500 var(--label)/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.guestlist .is-you { color: var(--ink); }
.guestlist .is-you .gl__name { font-weight: 700; color: var(--ink); text-shadow: var(--halo-big); }
.guestlist .is-you .gl__dots { border-bottom-color: var(--gold); }
.guestlist .is-you .gl__state { color: var(--gold); }
/* 404: the engraving on the left, the words on the right */
.note--lost .note__pic { grid-column: 1 / span 6; aspect-ratio: 1456 / 816; }
.note--lost .note__txt { grid-column: 8 / -1; }

/* ---------- narrower windows ---------- */
@media (max-width: 1700px) {
  .reels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quotes3 .quote blockquote { font-size: var(--text); }
}
@media (max-width: 1100px) {
  .feat__txt { grid-column: 1 / -1; order: 2; padding: var(--step) 0 0; }
  .feat__pic { grid-column: 1 / -1; }
  .feat__name { font-size: min(calc(clamp(46px, 12.5vw, 110px) * var(--fit, 12) / 11), 96px); }
  .reels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .party__txt, .party__pic, .secret__pic, .secret__txt, .was__txt, .themes { grid-column: 1 / -1; }
  .secret__pic { order: 2; }
  .cameos { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
  .rsvp__side, .rsvp .brief { grid-column: 1 / -1; }
  .note__txt, .guestlist, .note--lost .note__pic, .note--lost .note__txt { grid-column: 1 / -1; }
  .guestlist { max-width: 640px; }
  .note--lost .note__pic { max-width: 720px; }
}
@media (max-width: 900px) {
  .talk__x { grid-template-columns: minmax(0, 1fr); row-gap: .5em; }
  .talk__q { text-align: left; }
  .toast { grid-template-columns: minmax(0, 1fr); row-gap: 34px; }
  .toast .figure strong { font-size: clamp(42px, 11.5vw, 80px); }
  .quotes3 .quote { flex-basis: 100%; max-width: 34em; }
  .watch__list { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
  .player__title { gap: .3em .8em; }
}
@media (max-width: 700px) {
  .bill { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bill__tab:nth-child(3)::before { display: none; }
  .bill__tab:nth-child(n+3) { border-top: 1px solid var(--line); }
  .themes { grid-template-columns: minmax(0, 1fr); }
  .theme { flex-direction: row; flex-wrap: wrap; align-items: center; text-align: left; column-gap: 1.1em; padding: 22px 22px 24px; }
  .theme__icon { width: 48px; }
  .theme__name { margin-top: 0; }
  .theme__line { flex-basis: 100%; max-width: none; }
  .gala__pic { aspect-ratio: 16 / 10; }
  .gala__pic img { left: 50%; width: 170%; max-width: none; transform: translateX(-50%); }
  .minis { grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 420px; margin-left: auto; margin-right: auto; }
  .mini { flex-direction: row; text-align: left; gap: 18px; }
  .mini__pic { width: 72px; }
}
@media (max-width: 560px) {
  /* the grid as a list: the picture on the left, the name beside it */
  .reels { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .reel a { flex-direction: row; align-items: center; gap: 14px; }
  .reel:not(.reel--big) .reel__pic { flex: none; width: 46%; }
  .reel:not(.reel--big) .reel__row { padding-top: 0; flex: 1; min-width: 0; gap: 10px; }
  .reel:not(.reel--big) .reel__row .reel__txt { padding-top: 0; }
  .reel:not(.reel--big) .reel__name { font-size: 19px; }
  .reel:not(.reel--big) .reel__sub { font-size: 15px; }
  .reel:not(.reel--big) .reel__play { width: 30px; margin-top: -2px; }
  .reel:not(.reel--big) .reel__play i { font-size: 9px; }
  .reel--big a { flex-direction: column; align-items: stretch; }
  .feat__txt .keys { flex-direction: column; align-items: stretch; width: 100%; }
  .key--big { padding: .2em 1.4em; }
  .cameo__more { display: none; }
  .note .keys { flex-direction: column; align-items: stretch; }
  /* the guest list: each name whole on its own line, the dots and the answer under it */
  .guestlist { padding: 22px 20px 24px; }
  .guestlist li { flex-wrap: wrap; row-gap: 0; padding: .35em 0; }
  .gl__name { flex: 1 0 100%; }
  .player__bar { flex-wrap: wrap; }
  .player__yt { letter-spacing: .12em; }
}

/* A dry word under "More Music Videos" (the early-AI ones) */
.also__note { margin: calc(var(--step) * -.6) auto calc(var(--step) * 1.05); max-width: 46ch; text-align: center; font: 400 var(--text)/1.5 var(--sans); color: var(--dim); text-wrap: balance; }