:root {
  color-scheme: light;
  --red: #8c0c1a;
  --red-deep: #6f0b16;
  --red-glow: #a42131;
  --ink: #332127;
  --muted: #675359;
  --paper: #fffaf3;
  --cream: #fff0d8;
  --gold: #f3d8ad;
  --line: #e9dcd6;
  --serif: Georgia, "Times New Roman", serif;
  font: 1rem/1.5 system-ui, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; color: var(--ink); background: #faf5ef; }
main { width: min(100%, 70rem); margin-inline: auto; padding: 1.5rem clamp(1rem, 4vw, 3rem) 3rem; }
h1, h2, p { margin: 0; }
h1, h2 { line-height: 1.04; }
h1 { font-family: var(--serif); font-weight: 500; letter-spacing: -.045em; }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -.035em; }
a { color: var(--red); text-underline-offset: .22em; }
:focus-visible { outline: .18rem solid var(--red); outline-offset: .25rem; }

.brand-header {
  display: flex;
  min-height: 5.4rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand-header > a { display: block; }
.brand-logo { display: block; width: 3.7rem; height: auto; }
.eyebrow { color: var(--red); font-size: .72rem; font-weight: 760; letter-spacing: .17em; text-transform: uppercase; }
.brand-header .eyebrow { padding: .55rem .85rem; border: 1px solid var(--line); border-radius: 2rem; }
.ornament { display: block; width: 100%; height: auto; aspect-ratio: 1; }

.hero, .memory-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--paper);
  background: radial-gradient(ellipse at 78% 34%, var(--red-glow), transparent 65%), var(--red);
}
.hero::before, .memory-hero::before {
  position: absolute;
  z-index: -1;
  inset: .7rem;
  border: 1px solid #f3d8ad42;
  border-radius: .85rem;
  content: "";
  pointer-events: none;
}
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  align-items: center;
  margin-top: 1.15rem;
  border-radius: 1.55rem;
  padding: clamp(1.7rem, 3.6vw, 3.2rem) clamp(1.7rem, 5.5vw, 4.5rem);
}
.hero-copy { z-index: 1; }
.hero .eyebrow, .memory-hero .eyebrow { color: var(--gold); }
.hero h1 { max-width: 12ch; margin-block: .7rem .9rem; font-size: clamp(2.9rem, 6.3vw, 5.25rem); }
.lede { max-width: 32ch; color: var(--cream); font-size: clamp(1rem, 2vw, 1.2rem); }
.hero .ornament { justify-self: center; width: min(115%, 28rem); }
.entry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; margin-top: 1rem; }
.entry {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .85rem;
  min-height: 5.25rem;
  padding: .9rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: .95rem;
  background: var(--paper);
  text-decoration: none;
}
.entry:hover { border-color: var(--red); }
.entry-number { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: #f5e6e2; font-size: .72rem; font-weight: 750; }
.entry strong, .entry small { display: block; }
.entry small { color: var(--muted); }

[data-page="actor"] main { max-width: 65rem; }
.operator-heading { margin-block: 1.35rem 1.4rem; }
.operator-heading h1 { margin-top: .35rem; color: var(--red-deep); font-size: clamp(2.35rem, 5.6vw, 4.1rem); }
.panel {
  padding: clamp(1rem, 3.5vw, 2rem);
  border: 1px solid var(--line);
  border-radius: 1.15rem;
  color: var(--ink);
  background: var(--paper);
}
.panel h1 { color: var(--red-deep); font-size: clamp(2rem, 5vw, 3rem); }
.panel h2 { color: var(--red-deep); }
.panel > .status, .panel > p:not(.eyebrow) { margin-top: .55rem; }
.status { color: var(--muted); }
.mode-note { margin-top: .8rem; color: var(--muted); font-size: .82rem; }
.alert { margin-block: .65rem; color: var(--red); font-weight: 650; }
.alert:empty, #countdown:empty { display: none; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-top: .95rem; }
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  min-height: 2.8rem;
  padding: .6rem 1rem;
  border: 1px solid #cdb6b5;
  border-radius: .55rem;
  background: var(--paper);
  color: var(--red-deep);
  font: inherit;
  font-weight: 680;
  cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--red); }
button:disabled { opacity: .65; cursor: default; }
button.primary { border-color: var(--red); color: white; background: var(--red); }
button.primary:hover:not(:disabled) { background: var(--red-deep); }
.meeting-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .8rem; margin-bottom: .75rem; }
.media-stage { position: relative; }
video { display: block; width: 100%; max-height: 58svh; border-radius: .65rem; background: #f2e7e2; object-fit: contain; }
#remote { min-height: 10rem; aspect-ratio: 16 / 9; }
.preview { position: absolute; right: .6rem; bottom: .6rem; width: min(28%, 10rem); border: 2px solid var(--paper); aspect-ratio: 16 / 9; object-fit: cover; }
#countdown { color: var(--red); font-size: clamp(1.65rem, 5vw, 2.7rem); font-weight: 780; text-align: center; }
.consent { display: flex; align-items: center; gap: .55rem; margin-top: .85rem; }
.consent input { width: 1.2rem; height: 1.2rem; accent-color: var(--red); }

[data-page="totem"] {
  color: var(--paper);
  background: radial-gradient(ellipse at 50% 35%, var(--red-glow), transparent 68%), var(--red);
}
[data-page="totem"] main {
  position: relative;
  display: flex;
  width: min(100%, 52rem);
  min-height: 100svh;
  flex-direction: column;
  padding: clamp(1rem, 4vh, 3rem) clamp(1.35rem, 6vw, 4.5rem) 1rem;
}
[data-page="totem"] main::before {
  position: absolute;
  inset: .6rem;
  border: 1px solid #f3d8ad42;
  border-radius: 1.1rem;
  content: "";
  pointer-events: none;
}
[data-page="totem"] .brand-header { justify-content: center; min-height: auto; }
[data-page="totem"] .brand-logo { width: clamp(3.5rem, 7vh, 5.75rem); filter: brightness(0) invert(1); }
[data-page="totem"] .panel { width: 100%; margin: auto; }
[data-page="totem"] .welcome { display: grid; justify-items: center; margin: auto 0; padding-block: .4rem 1.15rem; text-align: center; }
.welcome .ornament { width: min(56vw, 28svh, 18rem); margin-bottom: .3rem; }
.welcome .eyebrow { color: var(--gold); }
.welcome h1 { margin-block: .5rem .75rem; font-size: clamp(2.7rem, min(10vw, 8.2vh), 6.1rem); }
.welcome .status { max-width: 28ch; color: var(--cream); font-size: clamp(.95rem, 2.6vw, 1.3rem); }
.welcome .actions { justify-content: center; }
.welcome button.primary {
  min-height: clamp(3.15rem, 7.5vh, 4.7rem);
  padding-inline: clamp(1.05rem, 4vw, 2.25rem);
  border-color: var(--cream);
  border-radius: 3rem;
  color: var(--red-deep);
  background: var(--cream);
  font-size: clamp(1rem, 3vw, 1.4rem);
}
.welcome button.primary:hover:not(:disabled) { background: #fff7e8; }
.welcome button:focus-visible { outline-color: var(--cream); }
[data-page="totem"] .mode-note { color: var(--cream); text-align: center; }
[data-page="totem"] .alert { color: var(--cream); text-align: center; }
[data-page="totem"] #remote { max-height: 47svh; }
.qr-panel { text-align: center; }
.qr-panel h2 { margin-top: .4rem; }
#qr { display: block; width: min(100%, 15rem, 38svh); height: auto; margin: .8rem auto .45rem; padding: .2rem; background: white; }
.qr-panel button { margin-top: .8rem; }

[data-page="video"] main { max-width: 40rem; }
[data-page="video"] .brand-header { justify-content: center; }
.memory-card { overflow: hidden; margin-top: 1rem; border: 1px solid var(--line); border-radius: 1.2rem; background: var(--paper); text-align: center; }
.memory-hero { display: grid; justify-items: center; padding: 1rem 1.5rem 1.75rem; }
.memory-hero .ornament { width: clamp(6.5rem, 24vw, 10.5rem); }
.memory-hero h1 { max-width: 15ch; margin-top: .4rem; font-size: clamp(2.1rem, 7vw, 3.9rem); }
.memory-content { padding: 1.15rem; }
.memory-content video { margin-top: .9rem; }

@media (max-width: 40rem) {
  main { padding-top: .9rem; }
  .brand-header { min-height: 4.7rem; }
  .hero { grid-template-columns: 1fr; gap: .15rem; }
  .hero .ornament { width: min(62vw, 16rem); margin-block: -.35rem -.7rem; }
  .entry-grid { grid-template-columns: 1fr; }
  .entry { min-height: 4.6rem; }
}
@media (max-height: 650px) {
  [data-page="totem"] main { padding-top: .9rem; }
  .welcome .ornament { width: min(43vw, 23svh, 10rem); }
}