/* Premiere Partnerships v3: the screening.
   Base rules lay every scene out as an ordinary section, in reading order. That is the page without
   script and under reduced motion. `.pp-live` (set in <head> when motion is allowed) stacks the same
   scenes inside one pinned stage, and v3.js drives them from scroll. The engine files are untouched. */

:root {
  --sc-canvas:     #0A0707;
  --sc-surface:    #151010;
  --sc-ink:        #F6EEE6;
  --sc-ink-soft:   #BDB1A7;
  --sc-accent:     #E0525D;   /* carpet red, light stop: focus, caret, selection */
  --sc-accent-ink: #0A0707;
  --pp-carpet:     #9E1B27;   /* carpet red, deep stop: the one filled control */
  --ag-copper:     #DDA77C;   /* Angel's copper: partner and Guild labels only */
  --pp-house:      #050303;   /* the dark of the room */
  --sc-font-display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --sc-font-text:    "Montserrat", "Avenir Next", system-ui, sans-serif;
  --sc-shadow-color: 10 30% 3%;
  --bar-h: 3.75rem;
  --cut: 0px;                 /* the part of the tall viewport a phone's URL bar can cover */
}
@supports (height: 100lvh) { :root { --cut: calc(100lvh - 100svh); } }

body { font-family: var(--sc-font-text); background: var(--sc-canvas); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
img { max-width: 100%; }

/* ------------------------------------------------------------------ cta -- */
.cta {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.25rem; padding: 0.95rem 2.2rem 0.95rem calc(2.2rem + 0.22em);
  border: 0; border-radius: 1px; cursor: pointer;
  background: var(--pp-carpet); color: var(--sc-ink);
  font-family: var(--sc-font-text); font-weight: 600; font-size: 0.74rem; line-height: 1;
  letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  box-shadow:
    0 2px 3px hsl(var(--sc-shadow-color) / 0.35),
    0 14px 28px -12px hsl(352 70% 4% / 0.7),
    inset 0 1px 0 rgb(255 236 226 / 0.18),
    inset 0 -16px 22px -12px rgb(28 0 6 / 0.55);
  transition: background-color 180ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.cta::after {
  content: ""; position: absolute; inset: 4px; z-index: -1; pointer-events: none;
  border: 1px solid rgb(246 238 230 / 0.32);
  transition: transform 240ms var(--sc-ease-out), border-color 240ms var(--sc-ease-out);
}
.cta:active { transform: translateY(1px); }
.cta[aria-disabled="true"] { opacity: 0.6; cursor: progress; }
.cta:focus-visible { outline-offset: 4px; border-radius: 1px; }
.cta--sm { min-height: 2.6rem; padding: 0.65rem 1.25rem 0.65rem calc(1.25rem + 0.18em); font-size: 0.66rem; letter-spacing: 0.18em; }
@media (hover: hover) and (pointer: fine) {
  .cta:hover { background: #87141F; }
  .cta:hover::after { transform: scale(0.97, 0.84); border-color: rgb(246 238 230 / 0.6); }
}

/* --------------------------------------------------------------- lockup -- */
/* Credits order: the partner, the relationship, the studio, on one centre line. The Angel mark is
   sized so the cap height of ANGEL equals the cap height of PREMIERE. */
.lockup { --lw: clamp(15.5rem, 9rem + 13vw, 27rem); width: var(--lw); display: grid; justify-items: center; gap: calc(var(--lw) * 0.058); }
.lockup__pp { display: block; width: 100%; height: auto; }
.lockup__tie {
  margin: 0; width: 100%; display: flex; align-items: center; gap: 1em;
  font-family: var(--sc-font-text); font-weight: 500; font-size: max(0.58rem, calc(var(--lw) * 0.034)); line-height: 1;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--ag-copper); white-space: nowrap;
}
.lockup__tie span { margin-right: -0.3em; }   /* the tracking after the last letter is not part of the word */
.lockup__tie::before, .lockup__tie::after { content: ""; flex: 1; height: 1px; }
.lockup__tie::before { background: linear-gradient(to right, transparent, rgb(221 167 124 / 0.7)); }
.lockup__tie::after  { background: linear-gradient(to left,  transparent, rgb(221 167 124 / 0.7)); }
.lockup__angel { display: block; width: 46%; height: auto; }
.lockup--sm { --lw: 15rem; }
/* On the lit curtain the label is ivory: copper on red measured 3.3:1. */
.hero .lockup__tie { color: var(--sc-ink); font-weight: 600; font-size: max(0.6rem, calc(var(--lw) * 0.036)); }
.hero .lockup__tie::before { background: linear-gradient(to right, transparent, rgb(246 238 230 / 0.6)); }
.hero .lockup__tie::after  { background: linear-gradient(to left,  transparent, rgb(246 238 230 / 0.6)); }

/* ------------------------------------------------------------------ bar -- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome, 60);
  height: var(--bar-h); display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.25rem);
  padding: 0 var(--sc-gutter);
  background: rgb(10 7 7 / 0.95); border-bottom: 1px solid rgb(221 167 124 / 0.2);
  transition: background-color 320ms var(--sc-ease-out), border-color 320ms var(--sc-ease-out);
}
.bar__brand { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; min-height: 2.75rem; transition: opacity 320ms var(--sc-ease-out), transform 320ms var(--sc-ease-out), visibility 0s; }
.bar__pp { display: block; line-height: 0; flex: none; }
.bar__pp img { display: block; height: 1.7rem; width: auto; max-width: none; }
.bar__rule { flex: none; width: 1px; height: 1.7rem; background: rgb(246 238 230 / 0.24); }
.bar__tie { flex: none; white-space: nowrap; font-weight: 500; font-size: 0.54rem; line-height: 1.45; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ag-copper); }
.bar__angel { flex: none; height: 1.32rem; width: auto; }
.bar__nav { margin-left: auto; display: flex; gap: clamp(1rem, 2.2vw, 2rem); }
.bar__nav a {
  display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--sc-ink); text-decoration: none;
  font-weight: 500; font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.86;
  transition: opacity 160ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .bar__nav a:hover { opacity: 1; } }
.bar .cta { flex: none; transition: opacity 320ms var(--sc-ease-out), background-color 180ms var(--sc-ease-out), visibility 0s; }
/* While the curtain is closed the hero carries the lockup and the action at full size. */
.pp-live .bar.is-hero { background: transparent; border-color: transparent; }
.pp-live .bar.is-hero .bar__brand, .pp-live .bar.is-hero .cta { opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 200ms var(--sc-ease-out), transform 200ms var(--sc-ease-out), visibility 0s linear 200ms; }
@media (max-width: 760px) {
  .bar { gap: 0.7rem; }
  .bar__tie { display: none; }
  .bar__brand { gap: 0.65rem; }
  .bar__pp { width: 1.42rem; overflow: hidden; }   /* crops the horizontal logo to its monogram */
  .bar__pp img { height: 1.7rem; }
  .bar__angel { height: 1.12rem; }
  .bar .cta { margin-left: auto; padding-inline: 0.8rem; font-size: 0.58rem; letter-spacing: 0.13em; }
}

/* ----------------------------------------------------------- the stage -- */
.show { position: relative; background: var(--pp-house); }
.pp-live .show { height: calc(var(--span, 7.7) * 100vh); }
.pp-live .show__stage { position: sticky; top: 0; height: 100vh; overflow: clip; isolation: isolate; background: var(--pp-house); }
.pp-live .hero, .pp-live .films, .pp-live .film { position: absolute; inset: 0; min-height: 0; }
.pp-live .hero  { z-index: 5; background: none; }
.pp-live .films { z-index: 3; will-change: transform; transform-origin: 50% 50%; }
.is-off { visibility: hidden !important; pointer-events: none !important; }

/* ----------------------------------------------------------------- hero -- */
.hero { position: relative; isolation: isolate; overflow: clip; min-height: 100vh; min-height: 100svh; background: #1A0507; color: var(--sc-ink); }
.hero__curtain { position: absolute; inset: 0; z-index: 0; overflow: clip; }
.curtain {
  --cw: max(100vw, 177.78vh);
  position: absolute; top: 0; bottom: 0; width: calc(50% + 1px);
  background: #23070A url(assets/curtain-wide-2400.webp) no-repeat; background-size: var(--cw) auto;
  will-change: transform;
}
.curtain--l { left: 0;  background-position: calc(50vw - var(--cw) / 2) 0; transform-origin: 0 50%; }
.curtain--r { right: 0; background-position: calc(1px - var(--cw) / 2) 0;  transform-origin: 100% 50%; }
.curtain::after {   /* the leading edge falls into shadow as the halves gather */
  content: ""; position: absolute; top: 0; bottom: 0; width: 26%; opacity: var(--open, 0);
  background: linear-gradient(to left, rgb(6 1 2 / 0.78), transparent);
}
.curtain--l::after { right: 0; }
.curtain--r::after { left: 0; transform: scaleX(-1); }
@media (max-aspect-ratio: 4/5) {
  .curtain { --cw: max(100vw, 56.25vh); background-image: url(assets/curtain-tall-1100.webp); }
}
/* Something is already playing behind it. */
.hero__seam {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; translate: -50% 0; opacity: 0.4;
  background: linear-gradient(to bottom, transparent 4%, rgb(255 226 190 / 0.85) 30%, rgb(255 214 170 / 0.95) 72%, transparent 97%);
  box-shadow: 0 0 22px 5px rgb(255 190 130 / 0.28);
}
.hero__hem {
  position: absolute; inset: auto 0 0 0; height: 30%; opacity: 0.75;
  background: radial-gradient(58% 100% at 50% 100%, rgb(255 200 150 / 0.3), rgb(255 170 110 / 0.1) 46%, transparent 72%);
}
@media (prefers-reduced-motion: no-preference) {
  .hero__seam { animation: ppFlicker 6.4s linear infinite; }
  .hero__hem  { animation: ppFlicker 6.4s linear -2.1s infinite; }
}
@keyframes ppFlicker {
  0%, 100% { opacity: 0.42; } 7% { opacity: 0.6; } 9% { opacity: 0.3; } 22% { opacity: 0.52; }
  38% { opacity: 0.34; } 41% { opacity: 0.66; } 44% { opacity: 0.4; } 63% { opacity: 0.56; } 81% { opacity: 0.3; } 86% { opacity: 0.5; }
}
.hero__pool {   /* a follow-spot: the light in the room leans with the pointer */
  position: absolute; z-index: 1; left: 50%; top: 34%; width: min(120vw, 120vh); aspect-ratio: 1; translate: -50% -50%;
  background: radial-gradient(closest-side, rgb(255 232 208 / 0.13), rgb(255 226 200 / 0.05) 55%, transparent 100%);
  mix-blend-mode: screen; pointer-events: none; will-change: transform;
}
.hero::before {   /* density under the copy block only: the pool of light is bright red, the type is ivory */
  content: ""; position: absolute; z-index: 2; left: 50%; top: 48%; width: min(64rem, 118vw); height: 78%; translate: -50% -50%; pointer-events: none; opacity: var(--copy, 1);
  background: radial-gradient(closest-side, rgb(20 3 5 / 0.62), rgb(20 3 5 / 0.4) 55%, transparent 100%);
}
.hero__copy {
  position: relative; z-index: 3; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: calc(var(--bar-h) + 1rem) var(--sc-gutter) clamp(6.5rem, 17vh, 10rem);
}
.pp-live .hero__copy { height: 100svh; min-height: 0; will-change: transform, opacity; }
.hero__title {
  margin: clamp(1.5rem, 4.6vh, 3.1rem) 0 0; max-width: 12.5em;
  font-family: var(--sc-font-display); font-weight: 500; font-variation-settings: "opsz" 96;
  font-size: clamp(2.5rem, min(1.1rem + 4.5vw, 10vh), 6.4rem);
  line-height: 1.01; letter-spacing: -0.014em; text-wrap: balance;
  text-shadow: 0 2px 30px rgb(20 2 4 / 0.55);
}
.hero__title i { font-weight: 400; }
.hero__sub {
  margin: clamp(1rem, 2.6vh, 1.7rem) auto 0; max-width: 47ch;
  font-size: clamp(0.98rem, 0.92rem + 0.3vw, 1.16rem); line-height: 1.58; letter-spacing: 0.004em; text-wrap: balance;
  text-shadow: 0 1px 14px rgb(20 2 4 / 0.7);
}
.hero__copy .cta { margin-top: clamp(1.3rem, 3.4vh, 2.2rem); }
@media (prefers-reduced-motion: no-preference) {
  .pp-live .hero__copy > * { animation: ppArrive 900ms var(--sc-ease-out) both; }
  .pp-live .hero__copy > :nth-child(2) { animation-delay: 140ms; }
  .pp-live .hero__copy > :nth-child(3) { animation-delay: 260ms; }
  .pp-live .hero__copy > :nth-child(4) { animation-delay: 360ms; }
}
@keyframes ppArrive { from { opacity: 0; transform: translateY(14px); } }

/* The row in front of you. */
.hero__seats { position: absolute; inset: auto 0 0 0; height: 0; z-index: 4; pointer-events: none; will-change: transform; transform-origin: 50% 100%; }
.hero__seats::before { content: ""; position: absolute; inset: auto 0 0 0; height: 8.5rem; background: linear-gradient(to top, #050203 42%, rgb(5 2 3 / 0.6) 70%, transparent); }
.seats { position: absolute; left: -5%; right: -5%; bottom: 0; background-repeat: repeat-x; will-change: transform; }
.seats--back {
  height: 7.4rem; bottom: 1.9rem; background-size: 9.4rem auto; background-position: calc(50% + 4.7rem) 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 126'%3E%3Cpath d='M11 126V48Q11 12 47 12h66q36 0 36 36v78z' fill='%23110506'/%3E%3Cpath d='M11 52V48Q11 12 47 12h66q36 0 36 36v4' fill='none' stroke='%23762028' stroke-width='2.5'/%3E%3C/svg%3E");
}
.seats--front {
  height: 9.6rem; bottom: -2.2rem; background-size: 13.6rem auto; background-position: 50% 100%; filter: blur(1.2px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 126'%3E%3Cpath d='M9 126V48Q9 10 47 10h66q38 0 38 38v78z' fill='%23060203'/%3E%3Cpath d='M9 52V48Q9 10 47 10h66q38 0 38 38v4' fill='none' stroke='%233D0E13' stroke-width='3'/%3E%3C/svg%3E");
}
@media (max-width: 700px) {
  .seats--back { height: 5rem; bottom: 1.1rem; background-size: 6.4rem auto; background-position: calc(50% + 3.2rem) 100%; }
  .seats--front { height: 6.2rem; bottom: -1.6rem; background-size: 9rem auto; }
  .hero__seats::before { height: 5.5rem; }
  .hero__copy { padding-bottom: clamp(5rem, 13vh, 7rem); }
  .hero__title { font-size: clamp(2.15rem, min(10.2vw, 6.6vh), 3.1rem); line-height: 1.04; }
  .hero__sub { font-size: 0.98rem; max-width: 33ch; }
}
@media (max-width: 900px) {
  .bar__nav { display: none; }
  .bar .cta { margin-left: auto; }
  .pp-live .hero__copy { padding-top: 1.75rem; }   /* the bar is empty here while the curtain is closed */
}
@media (max-height: 780px) and (min-width: 701px) {
  .lockup:not(.lockup--sm) { --lw: 15rem; }
  .hero__title { font-size: clamp(2.2rem, min(1.1rem + 4vw, 9.2vh), 4.4rem); margin-top: clamp(1rem, 3vh, 2rem); }
  .hero__sub { font-size: 0.96rem; margin-top: 0.9rem; }
  .hero__copy { padding-top: calc(var(--bar-h) + 0.25rem); padding-bottom: 6.4rem; }
  .hero__copy .cta { margin-top: 1.1rem; min-height: 2.9rem; }
  .seats--back { height: 5rem; bottom: 1.1rem; background-size: 6.8rem auto; background-position: calc(50% + 3.4rem) 100%; }
  .seats--front { height: 6.2rem; bottom: -1.6rem; background-size: 9.6rem auto; }
  .hero__seats::before { height: 5.5rem; }
}
@media (max-height: 700px) and (max-width: 700px) {
  .lockup:not(.lockup--sm) { --lw: 13.5rem; }
  .hero__title { font-size: clamp(1.9rem, 9.2vw, 2.4rem); margin-top: 1.1rem; }
  .hero__sub { font-size: 0.9rem; line-height: 1.5; margin-top: 0.8rem; }
  .hero__copy .cta { margin-top: 1rem; min-height: 2.9rem; }
  .hero__copy { padding-bottom: 4.4rem; }
  .seats--back { display: none; }
  .seats--front { height: 5rem; bottom: -1.9rem; }
  .hero__seats::before { height: 4rem; }
}

/* ---------------------------------------------------------------- films -- */
.films { position: relative; background: var(--pp-house); }
.film { position: relative; isolation: isolate; overflow: clip; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; }
.film__art { position: absolute; inset: 0; z-index: -1; will-change: transform; }
.film__art video { display: block; width: 100%; height: 100%; object-fit: cover; }
.film__title { margin: 0; position: relative; will-change: transform, opacity; }
.film__title img { display: block; height: auto; max-width: none; }
.film__meta {
  position: absolute; bottom: calc(var(--cut) + clamp(1.6rem, 6vh, 4rem)); will-change: transform, opacity;
  display: grid; gap: 0.5rem;
}
.film__kind { margin: 0; font-weight: 600; font-size: 0.66rem; line-height: 1; letter-spacing: 0.26em; text-transform: uppercase; }
.film__date {
  margin: 0; font-family: var(--sc-font-display); font-style: italic; font-weight: 400; font-variation-settings: "opsz" 96;
  font-size: clamp(2.3rem, 1.3rem + 3.3vw, 4.4rem); line-height: 1; letter-spacing: -0.008em; white-space: nowrap;
}
.film__place { margin: 0.15rem 0 0; font-weight: 500; font-size: clamp(0.78rem, 0.72rem + 0.24vw, 0.95rem); line-height: 1.2; letter-spacing: 0.22em; text-transform: uppercase; }

/* Zero A.D.: Angel's own footage, the title over it. Meta in the lead corner. */
.film--zero { background: #070A10; color: var(--sc-ink); }
.film--zero .film__art::after { content: ""; position: absolute; inset: 0; background: var(--pp-house); opacity: var(--dim, 0); pointer-events: none; }
.film--zero .film__scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46% 34% at 50% 47%, rgb(4 6 12 / 0.6), rgb(4 6 12 / 0.28) 60%, transparent 100%),
    radial-gradient(70% 62% at 0% 100%, rgb(4 6 12 / 0.86), rgb(4 6 12 / 0.5) 45%, transparent 78%),
    linear-gradient(to bottom, rgb(4 6 12 / 0.55), transparent 20%);
}
.film--zero .film__title img { width: min(64vw, 60rem); }
.film--zero .film__meta { left: var(--sc-gutter); text-align: left; }
.film--zero .film__kind { color: var(--ag-copper); }

/* Fing!: the poster is white with orange fur, so the screen goes white. Meta in the trail corner. */
.film--fing { background: #F4F0E8; color: #1B120C; }
.film--fing .film__art { background: radial-gradient(64% 62% at 50% 46%, #FFFFFF 0%, #F6F2EA 52%, #E9E2D5 100%); }
.film--fing .film__title img { width: min(66vw, 58rem, 112vh); filter: drop-shadow(0 2.2rem 1.6rem rgb(150 70 10 / 0.2)); }
.film--fing .film__meta { right: var(--sc-gutter); text-align: right; justify-items: end; }
.film--fing .film__kind { color: #A2430F; }

/* Adventures in Odyssey: its own green and gold. Meta centred. */
.film--odyssey { background: #47704C; color: #FBF4E6; }
.film--odyssey .film__art { background: radial-gradient(62% 60% at 50% 44%, #5E8E62 0%, #47704C 50%, #24402B 100%); }
.film--odyssey .film__title { margin-bottom: clamp(4rem, 15vh, 9rem); }
.film--odyssey .film__title img { width: min(50vw, 46rem, 76vh); filter: drop-shadow(0 1.6rem 1.4rem rgb(8 26 12 / 0.45)); }
.film--odyssey .film__meta { left: 0; right: 0; text-align: center; justify-items: center; }
.film--odyssey .film__kind { color: #F3D58A; }
.film--odyssey .film__date { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.6rem); }

.pp-live .film--fing, .pp-live .film--odyssey { will-change: clip-path; }
.pp-live .film--fing { z-index: 2; clip-path: circle(0px at 50% 50%); }
.pp-live .film--odyssey { z-index: 3; clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); }

/* The iris rim: a ring of light that opens out of the Ø in ZERO A.D. */
.films__ring, .films__edge { display: none; }
.pp-live .films__ring {
  display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: var(--ring, 0);
  background: radial-gradient(circle at var(--ix, 50%) var(--iy, 50%),
    transparent calc(var(--ir, 0px) - 1px), rgb(255 255 255 / 0.98) var(--ir, 0px), rgb(255 226 176 / 0.6) calc(var(--ir, 0px) + 10px),
    rgb(255 190 110 / 0.22) calc(var(--ir, 0px) + 52px), transparent calc(var(--ir, 0px) + 150px));
}
/* The sweep: a gold edge with light running ahead of it. */
.pp-live .films__edge {
  display: block; position: absolute; z-index: 4; left: 0; top: -30%; height: 160%; width: 4px; margin-left: -2px; pointer-events: none; opacity: 0;
  background: linear-gradient(to bottom, transparent, #FFE9B0 18%, #F6C968 50%, #FFE9B0 82%, transparent);
  box-shadow: 0 0 34px 8px rgb(255 206 112 / 0.5);
  will-change: transform, opacity;
}
.pp-live .films__edge::before {
  content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: 22vw;
  background: linear-gradient(to left, rgb(255 226 150 / 0.34), transparent);
}

/* Once the camera has left, the screen keeps playing all three. */
.films.is-reel .film__meta { opacity: 0 !important; }
.films.is-reel .film__title { opacity: 1 !important; visibility: visible !important; transform: none !important; }
.films.is-reel .film--fing, .films.is-reel .film--odyssey { transition: opacity 900ms linear; }
.films.is-reel[data-reel="1"] .film--odyssey { opacity: 0; }
.films.is-reel[data-reel="2"] .film--odyssey, .films.is-reel[data-reel="2"] .film--fing { opacity: 0; }

@media (max-width: 700px) {
  .film--zero .film__title img { width: 88vw; }
  .film--fing .film__title img { width: 92vw; }
  .film--odyssey .film__title img { width: 86vw; }
  .film--odyssey .film__title { margin-bottom: 0; }
  .film--zero .film__scrim {
    background:
      radial-gradient(90% 26% at 50% 49%, rgb(4 6 12 / 0.62), rgb(4 6 12 / 0.3) 60%, transparent 100%),
      linear-gradient(to top, rgb(4 6 12 / 0.9), rgb(4 6 12 / 0.55) 22%, transparent 44%),
      linear-gradient(to bottom, rgb(4 6 12 / 0.55), transparent 16%);
  }
}

/* ---------------------------------------------------------------- house -- */
.house {
  position: relative; isolation: isolate; overflow: clip; min-height: 100vh; min-height: 100svh;
  background: var(--pp-house); color: var(--sc-ink); text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(2.5rem, 7vh, 4.5rem);
  padding: 6rem var(--sc-gutter);
}
.house__lights { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; z-index: -1; }
.house > :not(canvas) { position: relative; width: min(48rem, 100%); }
.house__lead {
  margin: 0; font-family: var(--sc-font-display); font-weight: 500; font-variation-settings: "opsz" 72;
  font-size: clamp(1.75rem, 1.1rem + 2.5vw, 3.3rem); line-height: 1.1; letter-spacing: -0.008em; text-wrap: balance;
}
.house__figure { margin: 0; font: inherit; }
.house__num {
  display: block; font-family: var(--sc-font-display); font-weight: 500; font-variation-settings: "opsz" 96;
  font-size: clamp(3.4rem, min(12.5vw, 18vh), 10rem); line-height: 0.94; letter-spacing: -0.022em;
  font-variant-numeric: lining-nums tabular-nums; white-space: nowrap;
}
.house__plus { font-family: var(--sc-font-text); font-weight: 300; font-size: 0.5em; vertical-align: 0.52em; margin-left: 0.04em; color: var(--ag-copper); letter-spacing: 0; }
.house__label {
  margin: clamp(0.7rem, 1.8vh, 1.2rem) 0 0; display: flex; align-items: center; justify-content: center; gap: 0.8rem;
  font-weight: 600; font-size: clamp(0.74rem, 0.66rem + 0.3vw, 0.96rem); letter-spacing: 0.26em; text-transform: uppercase; color: var(--ag-copper);
}
.house__label img { height: 2.2em; width: auto; }
.house__line {
  margin: clamp(1rem, 3vh, 1.9rem) auto 0; max-width: 33rem;
  font-size: clamp(1.02rem, 0.94rem + 0.42vw, 1.32rem); line-height: 1.5; text-wrap: balance;
}
.house__reach {
  margin: 0; font-family: var(--sc-font-display); font-weight: 500; font-variation-settings: "opsz" 72;
  font-size: clamp(1.9rem, 1.1rem + 3vw, 3.7rem); line-height: 1.06; letter-spacing: -0.01em; text-wrap: balance;
}
.house__how { margin: clamp(1rem, 2.8vh, 1.7rem) auto 0; max-width: 35rem; font-size: clamp(1.02rem, 0.94rem + 0.42vw, 1.3rem); line-height: 1.52; text-wrap: balance; }

/* Live: the canvas is the room, the film frame sits in it, and the three blocks share the centre. */
.pp-live .house { position: absolute; inset: 0; min-height: 0; display: block; padding: 0; overflow: visible; isolation: auto; background: none; }
.pp-live .house__lights { z-index: 1; }
.pp-live .house > :not(canvas) {
  position: absolute; z-index: 4; left: 50%; top: calc(50% - var(--cut) / 2); translate: -50% -50%;
  width: min(50rem, calc(100% - 2 * var(--sc-gutter))); opacity: 0; will-change: opacity, transform;
}
.pp-live .house .house__count { top: calc(55% - var(--cut) / 2); }
@media (max-width: 700px) {
  .pp-live .house .house__count { top: calc(57% - var(--cut) / 2); }
  .house__line { font-size: 1.02rem; }
}

/* ----------------------------------------------------------- invitation -- */
.invite { position: relative; background: var(--sc-canvas); padding-bottom: clamp(1.5rem, 4vh, 2.5rem); }
.invite__seat { position: relative; isolation: isolate; overflow: clip; height: min(94vh, 62rem); height: min(94svh, 62rem); min-height: 33rem; background: var(--pp-house); }
.invite__seat picture, .invite__seat img { position: absolute; inset: 0; width: 100%; height: 100%; }
.invite__seat img { object-fit: cover; object-position: 46% 38%; }
.invite__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, var(--pp-house) 0%, rgb(5 3 3 / 0.45) 16%, transparent 34%),
    linear-gradient(to top, var(--sc-canvas) 2%, rgb(10 7 7 / 0.86) 20%, rgb(10 7 7 / 0.3) 44%, transparent 60%);
}
.invite__head { position: absolute; left: 0; right: 0; bottom: clamp(2.25rem, 8vh, 5rem); padding-inline: var(--sc-gutter); max-width: calc(var(--sc-maxw)); margin-inline: auto; }
.invite__title {
  margin: 0; max-width: 11em; font-family: var(--sc-font-display); font-weight: 500; font-variation-settings: "opsz" 96;
  font-size: clamp(2.6rem, 1.3rem + 5vw, 6rem); line-height: 0.98; letter-spacing: -0.016em; text-wrap: balance;
}
.invite__lede { margin: clamp(1rem, 2.4vh, 1.6rem) 0 0; max-width: 31rem; font-size: clamp(1.05rem, 0.96rem + 0.45vw, 1.36rem); line-height: 1.5; color: var(--sc-ink); text-wrap: balance; }

.invite__body {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: clamp(2.5rem, 7vw, 8rem);
  align-items: start; padding-top: clamp(3rem, 9vh, 6rem);
}
.creed {
  margin: 0; font-family: var(--sc-font-display); font-weight: 400; font-style: italic; font-variation-settings: "opsz" 48;
  font-size: clamp(1.4rem, 1.05rem + 1.3vw, 2.15rem); line-height: 1.28; letter-spacing: -0.004em; text-wrap: pretty; max-width: 19em;
}
/* Who is inviting you: the three marks and one line, centred on the page. */
.invite__partners { display: grid; justify-items: center; text-align: center; padding-top: clamp(2.75rem, 8vh, 5rem); }
.marks { display: flex; align-items: center; justify-content: center; gap: clamp(1.1rem, 2.6vw, 2.5rem); }
.marks img { width: auto; flex: none; }
.marks__pp { height: 4.9rem; } .marks__angel { height: 3rem; } .marks__guild { height: 5.9rem; }
.marks__rule { flex: none; width: 1px; height: 3.8rem; background: var(--sc-hairline-strong); }
.invite__note { margin: var(--sc-6) auto 0; max-width: 30rem; font-size: var(--sc-t-sm); line-height: 1.6; color: var(--sc-ink-soft); text-wrap: balance; }

form { display: grid; gap: var(--sc-5) var(--sc-6); grid-template-columns: 1fr 1fr; }
.form__intro { grid-column: 1 / -1; margin: 0 0 var(--sc-2); font-size: var(--sc-t-base); line-height: 1.6; color: var(--sc-ink); max-width: 40ch; }
.field { display: grid; gap: var(--sc-2); }
.field--wide { grid-column: 1 / -1; }
.field label { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sc-ink-soft); }
.field label span { letter-spacing: 0.04em; text-transform: none; font-weight: 400; }
.field input, .field textarea {
  width: 100%; background: transparent; border: 0; border-radius: 0;
  border-bottom: 1px solid var(--sc-hairline-strong);
  padding: 0.55rem 0 0.7rem; font-family: inherit; font-size: var(--sc-t-base); color: var(--sc-ink);
  transition: border-color var(--sc-d-fast) var(--sc-ease-out);
}
.field textarea { resize: vertical; min-height: 5.5rem; line-height: 1.55; }
.field input::placeholder, .field textarea::placeholder { color: color-mix(in oklab, var(--sc-ink-soft) 62%, transparent); }
.field input:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--sc-accent); }
.field [aria-invalid="true"] { border-color: var(--sc-accent); }
.field .err { min-height: 1.2em; margin: 0; font-size: var(--sc-t-xs); color: #EC7A84; }
.form__status { flex-basis: 100%; margin: 0; min-height: 1.2em; font-size: var(--sc-t-xs); color: #EC7A84; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__foot { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--sc-5); flex-wrap: wrap; margin-top: var(--sc-2); }
.form__note { margin: 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); max-width: 30ch; }
.thanks { display: none; }
.is-sent form { display: none; }
.is-sent .thanks { display: block; }
.thanks h3 { font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-2xl); line-height: 1.05; margin: 0; }
.thanks p { color: var(--sc-ink-soft); margin: var(--sc-4) 0 0; max-width: 40ch; }
.thanks:focus { outline: none; }

.team { margin-top: clamp(4rem, 11vh, 7rem); padding-top: var(--sc-6); border-top: 1px solid var(--sc-hairline); }
.team__title { margin: 0; font-family: var(--sc-font-text); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sc-ink-soft); }
.team__list { list-style: none; margin: var(--sc-5) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-5) clamp(2rem, 6vw, 6rem); }
.member { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); gap: var(--sc-4); align-items: start; }
.member__photo { width: 4.25rem; height: 5.667rem; object-fit: cover; object-position: 50% 28%; border-radius: 2px; border: 1px solid rgb(221 167 124 / 0.4); box-shadow: 0 8px 18px -10px rgb(4 2 1 / 0.8); }
.member__name { margin: 0.15rem 0 0; font-family: var(--sc-font-display); font-weight: 500; font-size: 1.3rem; line-height: 1.15; }
.member__role { margin: 0.35rem 0 0; font-size: 0.64rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sc-ink-soft); }
.member__more { margin-top: 0.3rem; }
.member__more summary {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; cursor: pointer; list-style: none;
  font-size: 0.82rem; color: var(--sc-ink); text-decoration: underline; text-decoration-color: rgb(246 238 230 / 0.35); text-underline-offset: 0.25em;
}
.member__more summary::-webkit-details-marker { display: none; }
.member__more summary::after { content: "+"; font-size: 0.95rem; line-height: 1; color: var(--sc-accent); }
.member__more[open] summary::after { content: "\2212"; }
@media (hover: hover) and (pointer: fine) { .member__more summary:hover { text-decoration-color: var(--sc-accent); } }
.member__more p { margin: 0.4rem 0 0; font-size: 0.88rem; line-height: 1.62; color: var(--sc-ink-soft); max-width: 46ch; }
.member__more .member__belief { margin-top: 0.6rem; font-family: var(--sc-font-display); font-style: italic; font-size: 1rem; line-height: 1.45; color: var(--sc-ink); }

.colophon { margin-top: clamp(4rem, 11vh, 7rem); padding: var(--sc-8) 0 var(--sc-5); border-top: 1px solid var(--sc-hairline); display: grid; justify-items: center; text-align: center; }
.colophon__small { margin: var(--sc-7) auto 0; font-size: var(--sc-t-xs); line-height: 1.7; color: var(--sc-ink-soft); max-width: 68ch; }

@media (max-width: 860px) {
  .invite__body { grid-template-columns: minmax(0, 1fr); row-gap: clamp(3rem, 9vw, 4.5rem); }
  form { grid-template-columns: minmax(0, 1fr); }
  .field input, .field textarea { font-size: 1rem; }  /* no iOS zoom on focus */
  .team__list { grid-template-columns: minmax(0, 1fr); }
  .marks__pp { height: 3.3rem; } .marks__angel { height: 2rem; } .marks__guild { height: 4rem; } .marks__rule { height: 2.5rem; }
  .invite__seat img { object-position: 50% 50%; }
}

/* ------------------------------------------------ without motion or script -- */
html:not(.pp-live) .hero__copy { padding-top: calc(var(--bar-h) + 2rem); }
html:not(.pp-live) .hero__pool { display: none; }
html:not(.pp-live) .film__art video { position: absolute; inset: 0; }
html:not(.pp-live) .house__lights { opacity: 0.5; }