:root {
  --night: #08070a;
  --ivory: #f3eee5;
  --ink: #2f2a25;
  --muted: #7b7266;
  --wine: #722e40;
  --gold: #c9a55a;
  --gold-deep: #a9823a;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;
  --tamil: "Noto Serif Tamil", serif;
  --ew: 500px;
  --cw: 600px;
  --env-top: 40vh;
  --env-bottom: 70vh;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  height: 100%;
}
body {
  background: var(--night);
  color: #efe6d6;
  font-family: var(--sans);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
button:focus-visible {
  outline: 1.5px solid var(--gold);
  outline-offset: 5px;
}

/* ---------- canvases ---------- */
#bg,
#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
#bg {
  z-index: 0;
}
#scene {
  z-index: 3;
}
body.skipped #scene {
  opacity: 0;
  transition: opacity 0.15s ease;
}

/* ---------- intro type ---------- */
.intro-top {
  position: fixed;
  z-index: 7;
  top: 26px;
  left: 32px;
  right: 32px;
  display: flex;
  justify-content: center;
  font-size: 9px;
  letter-spacing: 2.6px;
  color: #b89b6c;
  transition: opacity 0.8s;
}
.intro-top [lang="ta"] {
  font-family: var(--tamil);
  letter-spacing: 0.5px;
  font-size: 11px;
}
.intro-copy {
  position: fixed;
  z-index: 7;
  left: 0;
  right: 0;
  bottom: calc(100vh - var(--env-top) + 34px);
  bottom: calc(100dvh - var(--env-top) + 34px);
  text-align: center;
  transition:
    opacity 0.7s,
    transform 0.9s cubic-bezier(0.5, 0, 0.2, 1);
}
.kicker {
  margin: 0 0 12px;
  font-size: 9px;
  letter-spacing: 3.2px;
  color: #b89b6c;
  animation: rise 1.4s both 0.2s;
}
.intro-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 4.2vw, 46px);
  line-height: 1;
  color: #f1e7d6;
  animation: rise 1.6s both 0.4s;
}
.intro-title em {
  color: var(--gold);
}
.intro-hint {
  position: fixed;
  z-index: 7;
  left: 0;
  right: 0;
  top: calc(var(--env-bottom) + 34px);
  margin: 0;
  text-align: center;
  font-size: 9.5px;
  letter-spacing: 3px;
  padding-left: 3px;
  text-transform: uppercase;
  color: #cdb489;
  animation: rise 1.4s both 1.1s;
  transition: opacity 0.5s;
}
.intro-hint span {
  color: #8d7a5d;
}
.intro-hint i {
  position: relative;
  display: inline-block;
  width: 0;
  height: 1px;
  vertical-align: middle;
}
.intro-hint i::before {
  content: "";
  position: absolute;
  right: 12px;
  top: 0;
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
/* the matching dash after the text */
.intro-hint i.r::before {
  right: auto;
  left: 12px;
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}
body:not(.is-closed) .intro-top,
body:not(.is-closed) .intro-hint {
  opacity: 0;
}
body:not(.is-closed) .intro-copy {
  opacity: 0;
  transform: translateY(-24px);
}

/* ---------- paper ---------- */
/* --paper-tex is a fibre/grain texture generated once in main.js */
.paper {
  position: absolute;
  inset: 0;
  background-color: #efe6d4;
  background-image: var(--paper-tex);
  background-size: 340px 340px;
}
.edge {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.edge polyline {
  fill: none;
  stroke: rgba(255, 253, 246, 0.85);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.foil {
  background: linear-gradient(
    105deg,
    #8f6a2c 0%,
    #d9b86f 18%,
    #a07a36 34%,
    #f6e6b4 48%,
    #b08a43 62%,
    #e2c582 80%,
    #8f6a2c 100%
  );
  background-size: 260% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- envelope ---------- */
.env-layer {
  position: fixed;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  transform-origin: 50% 50%;
  will-change: transform;
}
#back-layer {
  z-index: 1;
  pointer-events: none;
}
/* the inside of the envelope, behind the letter */
.env-back {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background-color: #ece3d0;
  background-image: var(--paper-tex);
  background-size: 340px 340px;
  box-shadow: 0 24px 40px -18px rgba(0, 0, 0, 0.9);
}
#flap-layer {
  z-index: 5;
  pointer-events: none;
}
#flap-layer.open {
  z-index: 2;
}
.flap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 56%;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
}
.flap-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.flap-front {
  filter: drop-shadow(0 2px 2px rgba(60, 36, 14, 0.32)) drop-shadow(0 6px 8px rgba(60, 36, 14, 0.14));
}
.flap-front .paper {
  clip-path: polygon(0 0, 100% 0, 50.6% 99%, 49.4% 99%);
  background-color: #f1e8d7;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(120, 90, 50, 0.1)),
    var(--paper-tex);
  background-size: auto, 340px 340px;
}
.flap-back {
  transform: rotateX(180deg);
}
.flap-back .inner {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background-color: #e9dfcb;
  background-image:
    linear-gradient(0deg, rgba(70, 45, 20, 0.14), rgba(70, 45, 20, 0) 45%),
    var(--paper-tex);
  background-size: auto, 340px 340px;
}
.env-front {
  z-index: 4;
  cursor: pointer;
  border-radius: 3px;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.35),
    0 24px 40px -18px rgba(0, 0, 0, 0.9),
    0 60px 90px -40px rgba(0, 0, 0, 0.8);
}
.env-front::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 3px;
  clip-path: polygon(0 0, 51.5% 57%, 100% 0, 100% 100%, 0 100%); /* nothing over the letter */
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(255, 252, 244, 0.45),
    inset 0 -10px 22px rgba(80, 50, 20, 0.1),
    inset 0 10px 18px rgba(255, 255, 255, 0.12);
}
.env-front .edge {
  z-index: 1;
}
.env-front .pocket {
  /* no paper in the V above the side folds, so the letter shows through it */
  clip-path: polygon(0 0, 51.5% 57%, 100% 0, 100% 100%, 0 100%);
  border-radius: 3px;
  background-color: #e3d8c3;
  background-image:
    radial-gradient(ellipse at 50% 40%, rgba(0, 0, 0, 0), rgba(70, 45, 20, 0.12)),
    var(--paper-tex);
  background-size: auto, 340px 340px;
}
.fold {
  position: absolute;
  inset: 0;
}
.fold .paper {
  border-radius: 3px;
}
.fold.left {
  filter: drop-shadow(1.5px 0 1.5px rgba(70, 45, 20, 0.22));
}
.fold.left .paper {
  clip-path: polygon(0 0, 51.5% 57%, 0 100%);
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0)),
    var(--paper-tex);
  background-size: auto, 340px 340px;
}
.fold.right {
  filter: drop-shadow(-1.5px 0 1.5px rgba(70, 45, 20, 0.22));
}
.fold.right .paper {
  clip-path: polygon(100% 0, 48.5% 57%, 100% 100%);
  background-color: #e8dec9;
  background-image:
    linear-gradient(270deg, rgba(90, 60, 30, 0.08), rgba(0, 0, 0, 0)),
    var(--paper-tex);
  background-size: auto, 340px 340px;
}
.fold.bottom {
  filter: drop-shadow(0 -1.5px 1.5px rgba(70, 45, 20, 0.25)) drop-shadow(0 -4px 6px rgba(70, 45, 20, 0.08));
}
.fold.bottom .paper {
  clip-path: polygon(0 100%, 0.6% 99%, 49.4% 46.5%, 50.6% 46.5%, 99.4% 99%, 100% 100%);
  background-color: #f2eadb;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 40%),
    var(--paper-tex);
  background-size: auto, 340px 340px;
}
.env-print {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  padding-bottom: 7%;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.seal-layer:has(.seal.broken) .env-title {
  opacity: 0;
}
.env-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(44% + var(--ew) * 0.17);
  transition: opacity 0.5s;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.env-names {
  font-family: var(--serif);
  font-size: calc(var(--ew) * 0.058);
  line-height: 1;
  color: #6b2737;
  letter-spacing: -0.01em;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6),
    0 -0.5px 0 rgba(60, 10, 20, 0.25);
}
.env-names em {
  color: #a9823a;
  font-size: 0.8em;
}
.env-concert {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(var(--ew) * 0.036);
  line-height: 1.25;
  padding: 0 0.2em;
}
.env-date {
  margin-top: auto;
  font-size: calc(var(--ew) * 0.0158);
  letter-spacing: 0.26em;
  color: #8e7553;
}
.seal-layer {
  z-index: 6;
  pointer-events: none;
}
.seal {
  position: absolute;
  left: 50%;
  top: 56%;
  width: calc(var(--ew) * 0.18);
  height: calc(var(--ew) * 0.18);
  min-width: 64px;
  min-height: 64px;
  transform: translate(-50%, -50%);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  pointer-events: auto;
}
.seal::before {
  content: "";
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  border: 1px solid rgba(214, 178, 110, 0.55);
  animation: halo 2.6s ease-out infinite;
}
@keyframes halo {
  from {
    transform: scale(0.85);
    opacity: 0.9;
  }
  to {
    transform: scale(1.45);
    opacity: 0;
  }
}
.seal-half {
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 2px 1.5px rgba(40, 6, 14, 0.5)) drop-shadow(0 6px 8px rgba(40, 6, 14, 0.25));
  transition:
    transform 0.9s cubic-bezier(0.3, 0.6, 0.3, 1),
    opacity 0.7s 0.15s;
}
.seal-half svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.seal-half.left {
  clip-path: polygon(-10% -10%, 53% -10%, 47% 24%, 55% 46%, 46% 66%, 53% 84%, 49% 110%, -10% 110%);
}
.seal-half.right {
  clip-path: polygon(53% -10%, 110% -10%, 110% 110%, 49% 110%, 53% 84%, 46% 66%, 55% 46%, 47% 24%);
}
.seal:hover .seal-half {
  transform: scale(1.04);
}
.seal:focus-visible {
  outline: none;
}
.seal:focus-visible::before {
  border-color: rgba(232, 200, 130, 0.95);
  border-width: 1.5px;
}
.seal.broken {
  pointer-events: none;
  outline: none;
}
.seal.broken::before {
  display: none;
}
.seal.broken .left {
  transform: translate(-34%, 40%) rotate(-38deg);
  opacity: 0;
}
.seal.broken .right {
  transform: translate(34%, 44%) rotate(30deg);
  opacity: 0;
}

/* ---------- the concert card ---------- */
.card {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 3;
  width: var(--cw);
  height: calc(var(--cw) / var(--ca, 1.5));
  transform-origin: 0 0;
  visibility: hidden;
  display: flex;
  border-radius: 2px;
  color: #3a2f27;
  background-color: #f4ede0;
  background-image:
    radial-gradient(ellipse at 22% -10%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%),
    radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(110, 80, 40, 0.13)),
    var(--paper-tex);
  background-size: auto, auto, 340px 340px;
  box-shadow:
    0 0 0 0.5px rgba(80, 60, 30, 0.35),
    0 1px 1px rgba(0, 0, 0, 0.25),
    0 3px 6px rgba(0, 0, 0, 0.2),
    0 30px 50px -22px rgba(0, 0, 0, 0.85);
  will-change: transform, opacity;
}
body.is-journey .card {
  visibility: visible;
}
.card-main {
  position: relative;
  width: 79%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: calc(var(--cw) * 0.05) calc(var(--cw) * 0.04) 0;
}
.card-main::before {
  content: "";
  position: absolute;
  inset: calc(var(--cw) * 0.018);
  border: 1px solid rgba(169, 130, 58, 0.55);
  box-shadow: inset 0 0 0 3px rgba(244, 237, 224, 1), inset 0 0 0 3.6px rgba(169, 130, 58, 0.35);
  pointer-events: none;
}
.card p {
  margin: 0;
}
.c-kicker {
  font-size: calc(var(--cw) * 0.0145);
  letter-spacing: 0.32em;
  color: #8a6f4c;
}
.c-kicker span {
  font-family: var(--serif);
  font-style: italic;
  letter-spacing: 0.02em;
  font-size: 1.5em;
  color: #9a7a43;
}
.c-names {
  margin-top: calc(var(--cw) * 0.016) !important;
  font-family: var(--serif);
  font-size: calc(var(--cw) * 0.078);
  line-height: 0.95;
  letter-spacing: -0.015em;
  color: #6b2737;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7),
    0 -0.6px 0 rgba(60, 10, 20, 0.28);
}
.c-names em {
  color: #a9823a;
  font-size: 0.72em;
}
.c-concert {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(var(--cw) * 0.044);
  line-height: 1.2;
  padding: 0 0.15em;
}
.c-why {
  margin-top: calc(var(--cw) * 0.016) !important;
  max-width: 88%;
  font-family: var(--serif);
  font-size: calc(var(--cw) * 0.0215);
  line-height: 1.38;
  color: #4b4036;
}
.c-prog {
  margin-top: calc(var(--cw) * 0.02) !important;
  display: flex;
  gap: calc(var(--cw) * 0.03);
  font-size: calc(var(--cw) * 0.0128);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6f5c45;
}
.c-prog b {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.5em;
  color: #6b2737;
  margin-right: 0.35em;
  letter-spacing: 0;
}
.c-overture {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--cw) * 0.052);
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(var(--cw) * 0.017);
  letter-spacing: 0.08em;
  color: #9a7a43;
}
.c-overture::before,
.c-overture::after {
  content: "";
  display: inline-block;
  width: calc(var(--cw) * 0.04);
  height: 1px;
  margin: 0 0.8em;
  vertical-align: middle;
  background: currentColor;
  opacity: 0.5;
}
.card-stub {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--cw) * 0.012);
  border-left: 1.5px dashed rgba(120, 95, 60, 0.45);
  background: linear-gradient(90deg, rgba(110, 80, 40, 0.06), rgba(0, 0, 0, 0) 30%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: #6f5c45;
}
.stub-admit {
  font-family: var(--serif);
  font-size: calc(var(--cw) * 0.05);
  letter-spacing: 0.12em;
  color: #6b2737;
}
.stub-who {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(var(--cw) * 0.026);
}
.stub-seat,
.stub-no {
  font-size: calc(var(--cw) * 0.012);
  letter-spacing: 0.24em;
}
.stub-no {
  color: #a9823a;
}
.card.shine .foil {
  animation: sheen 2.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes sheen {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0% 0;
  }
}

/* ---------- chrome ---------- */
.chrome-btn {
  position: fixed;
  z-index: 30;
  border: 1px solid rgba(214, 186, 132, 0.35);
  background: rgba(10, 8, 10, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #e4cfa6;
  border-radius: 99px;
  padding: 9px 16px;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.6s,
    color 0.6s,
    border-color 0.6s,
    background 0.6s;
}
.skip {
  right: 22px;
  bottom: 22px;
}
.sound {
  right: 22px;
  top: 20px;
  display: flex;
  align-items: center;
  gap: 9px;
}
body.is-journey .skip,
body.is-journey .sound,
body.show-page .sound {
  opacity: 1;
  pointer-events: auto;
}
body.show-page .sound {
  top: 60px;
  color: var(--wine);
  border-color: rgba(114, 46, 64, 0.25);
  background: rgba(243, 238, 229, 0.7);
}
.eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 10px;
}
.eq i {
  width: 2px;
  height: 100%;
  background: currentColor;
  transform-origin: bottom;
  animation: eq 0.9s ease-in-out infinite alternate;
}
.eq i:nth-child(2) {
  animation-delay: -0.3s;
}
.eq i:nth-child(3) {
  animation-delay: -0.6s;
}
@keyframes eq {
  from {
    transform: scaleY(0.25);
  }
}
.sound[aria-pressed="false"] .eq i {
  animation: none;
  transform: scaleY(0.2);
}

/* ---------- the landing page ---------- */
.hero {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 54px 20px 60px;
  position: relative;
}
.eyebrow {
  margin: 0;
  font-size: 9.5px;
  letter-spacing: 3.2px;
  color: var(--wine);
}
.staff-ornament {
  width: min(420px, 88vw);
  height: auto;
  margin: 18px 0 6px;
  overflow: visible;
}
.staff-ornament .clef {
  font-family: "Noto Music", serif;
  font-size: 58px;
  fill: #b8913f;
}
.staff-ornament .swara text {
  font-family: var(--tamil);
  font-size: 11px;
  fill: #9a7d47;
}
.names {
  margin: 4px 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(64px, 11vw, 148px);
  line-height: 0.86;
  letter-spacing: -0.03em;
  color: var(--wine);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.names .amp {
  font-style: italic;
  color: var(--gold-deep);
  font-size: 0.42em;
  line-height: 1.25;
}
.names em {
  font-weight: 400;
}
.in-concert {
  margin: 6px 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(26px, 3.2vw, 40px);
  padding: 0 0.2em;
}
.hero-title {
  display: grid;
  justify-items: center;
  gap: 5px;
  margin: 0;
}
.hero-invite {
  margin: 0 0 5px;
  font-family: var(--sans);
  font-size: clamp(9px, 1vw, 12px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.hero-ode {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(58px, 10vw, 132px);
  font-weight: 400;
  font-style: italic;
  line-height: 0.86;
  letter-spacing: -0.035em;
  color: var(--wine);
}
.hero-concert {
  margin: 3px 0 0;
  padding: 0 0.2em;
  font-family: var(--serif);
  font-size: clamp(22px, 2.8vw, 36px);
  font-style: italic;
  line-height: 1;
}
.hero-couple {
  margin: 3px 0 0;
  font-family: var(--serif);
  font-size: clamp(34px, 5.2vw, 68px);
  font-weight: 400;
  line-height: 0.95;
  color: var(--wine);
}
.hero-couple em {
  color: var(--gold-deep);
  font-size: 0.8em;
}
.tamil {
  font-family: var(--tamil);
  color: var(--muted);
  font-size: 15px;
  margin: 20px 0 0;
}
.invite-line {
  margin: 22px 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.4;
  color: #5b5148;
}

#page {
  position: fixed;
  inset: 0;
  z-index: 10;
  overflow-y: auto;
  background: var(--ivory);
  color: var(--ink);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 1.5s ease,
    visibility 0s 1.5s;
}
#page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.5' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}
body.show-page #page {
  opacity: 1;
  visibility: visible;
  transition: opacity 1.5s ease;
}
.r1,
.r2,
.r3,
.r4,
.r5,
.r6 {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.9s ease,
    transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
body.show-page .r1,
body.show-page .r2,
body.show-page .r3,
body.show-page .r4,
body.show-page .r5,
body.show-page .r6 {
  opacity: 1;
  transform: none;
}

@media (max-width: 559px) {
  .card-main {
    width: 80%;
    padding-top: calc(var(--cw) * 0.07);
  }
  .c-kicker {
    font-size: calc(var(--cw) * 0.021);
  }
  .c-names {
    font-size: calc(var(--cw) * 0.094);
  }
  .c-concert {
    font-size: calc(var(--cw) * 0.056);
  }
  .c-why {
    max-width: 94%;
    font-size: calc(var(--cw) * 0.031);
    line-height: 1.32;
  }
  .c-prog {
    flex-direction: column;
    gap: calc(var(--cw) * 0.008);
    font-size: calc(var(--cw) * 0.021);
    letter-spacing: 0.1em;
  }
  .c-overture {
    font-size: calc(var(--cw) * 0.026);
  }
  .stub-admit {
    font-size: calc(var(--cw) * 0.068);
  }
  .stub-who {
    font-size: calc(var(--cw) * 0.036);
  }
  .stub-seat,
  .stub-no {
    font-size: calc(var(--cw) * 0.019);
  }
}
@media (max-width: 640px) {
  .intro-top {
    left: 18px;
    right: 18px;
    top: 20px;
  }
  .hero {
    padding: 44px 16px 48px;
  }
  .skip {
    right: 16px;
    bottom: 16px;
  }
  .sound {
    right: 16px;
    top: 50px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .seal::before,
  .eq i {
    animation: none;
  }
}

/* =====================================================================
   The main page: liner notes, Q&A, guestbook
   ===================================================================== */
#page {
  scroll-behavior: smooth;
}
.hero-dates {
  margin: 26px 0 0;
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--muted);
}
.hero-dates span {
  color: var(--gold-deep);
  padding: 0 8px;
}
.scroll-cue {
  margin-top: 34px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  color: var(--wine);
  text-decoration: none;
}
.scroll-cue span {
  display: inline-block;
  font-style: normal;
  animation: nudge 2s ease-in-out infinite;
}
@keyframes nudge {
  50% {
    transform: translateY(5px);
  }
}
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 1.1s ease,
    transform 1.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 46px;
}
.section-head h2,
.story-head h2 {
  margin: 14px 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5.6vw, 68px);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.section-head h2 em,
.story-head h2 em {
  color: var(--wine);
}
.section-head .sub,
.story-head .sub {
  margin: 16px 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  color: #5b5148;
}

/* ---- the story ---- */
.story {
  max-width: 1040px;
  margin: 0 auto;
  padding: 90px 24px 40px;
}
.story-head {
  text-align: center;
  margin-bottom: 30px;
}
.chapter {
  position: relative;
  padding: 70px 0;
  border-top: 1px solid #dccfb8;
  text-align: center;
}
.chapter::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: var(--gold);
}
.track {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 9.5px;
  letter-spacing: 3px;
  color: var(--gold-deep);
  margin-bottom: 30px;
}
.track i {
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
/* lines inside a chapter arrive one after another */
.chapter > *:not(.track),
.chapter .player,
.mend > span {
  transition:
    opacity 0.9s ease var(--d, 0.15s),
    transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0.15s);
}
.chapter:not(.in) > *:not(.track),
.chapter:not(.in) .mend > span {
  opacity: 0;
  transform: translateY(18px);
}
.narration {
  margin: 0 auto;
  max-width: 640px;
  font-family: var(--serif);
  font-size: clamp(21px, 2.4vw, 27px);
  line-height: 1.45;
  color: #4b4036;
}
.narration.wide {
  max-width: 760px;
  margin-top: 26px;
}

/* cast */
.cast-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 24px;
}
.versus {
  align-self: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 64px;
  color: var(--gold);
  margin-top: -80px;
}
.player {
  margin: 0;
}
.char-wrap {
  position: relative;
  width: min(230px, 60vw);
  margin: 0 auto;
}
.char {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 14px 18px rgba(80, 50, 20, 0.12));
}
.char .bob {
  animation: bob 4.2s ease-in-out infinite;
  transform-origin: 100px 220px;
}
.him .bob {
  animation-duration: 5.4s;
  animation-delay: -1.2s;
}
@keyframes bob {
  50% {
    transform: translateY(-3px) rotate(0.6deg);
  }
}
.char .head {
  transform-origin: 100px 140px;
  animation: tilt 7s ease-in-out infinite;
}
.him .head {
  animation: tilt-him 8s ease-in-out infinite;
}
@keyframes tilt {
  0%,
  60%,
  100% {
    transform: none;
  }
  70%,
  85% {
    transform: rotate(-5deg);
  }
}
@keyframes tilt-him {
  0%,
  50%,
  100% {
    transform: none;
  }
  60%,
  80% {
    transform: rotate(4deg) translateY(1px);
  }
}
.char .eyes {
  transform-box: fill-box;
  transform-origin: center;
  animation: blink 4.6s infinite;
}
.him .eyes {
  animation-delay: -2s;
}
@keyframes blink {
  0%,
  92%,
  100% {
    transform: scaleY(1);
  }
  95% {
    transform: scaleY(0.1);
  }
}
.her .brow.r {
  transform-box: fill-box;
  transform-origin: center;
  animation: brow 7s ease-in-out infinite;
}
@keyframes brow {
  0%,
  60%,
  100% {
    transform: none;
  }
  70%,
  85% {
    transform: translateY(-3px) rotate(-6deg);
  }
}
.chip {
  position: absolute;
  left: var(--x);
  top: var(--y);
  padding: 6px 12px;
  border-radius: 99px;
  background: #fffaf0;
  border: 1px solid #e0d2b8;
  box-shadow: 0 6px 14px -8px rgba(80, 50, 20, 0.4);
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.15;
  color: var(--wine);
  white-space: nowrap;
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 0.5s ease calc(var(--d) + 0.6s),
    transform 0.7s cubic-bezier(0.3, 1.6, 0.5, 1) calc(var(--d) + 0.6s);
}
.chapter.in .chip {
  opacity: 1;
  transform: none;
  animation: float 5s ease-in-out infinite calc(var(--d) + 1.4s);
}
@keyframes float {
  50% {
    translate: 0 -5px;
  }
}
.chill-chip {
  color: #2e6f86;
  font-size: 18px;
}
.player figcaption {
  margin-top: 18px;
}
.player h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 38px;
  color: var(--wine);
}
.player .role {
  margin: 4px auto 12px;
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.player p {
  margin: 0 auto;
  max-width: 330px;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.45;
  color: #4b4036;
}

/* speech bubbles */
.bubble {
  position: relative;
  width: fit-content;
  max-width: min(520px, 86%);
  margin: 18px auto 22px;
  padding: 16px 24px;
  border-radius: 22px;
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.2;
  text-align: left;
}
.bubble.big {
  font-size: clamp(22px, 2.6vw, 30px);
}
.bubble::after {
  content: "";
  position: absolute;
  bottom: -9px;
  width: 20px;
  height: 20px;
  transform: rotate(45deg);
  background: inherit;
}
.him-says {
  margin-left: max(6%, calc(50% - 360px));
  background: #efe6d4;
  border: 1px solid #dccfb8;
  color: var(--ink);
  border-bottom-left-radius: 6px;
}
.him-says::after {
  left: 18px;
  border-right: 1px solid #dccfb8;
  border-bottom: 1px solid #dccfb8;
}
.her-says {
  margin-right: max(6%, calc(50% - 360px));
  background: var(--wine);
  color: #fbeee3;
  border-bottom-right-radius: 6px;
}
.her-says::after {
  right: 18px;
}
.bubble::before {
  position: absolute;
  top: -22px;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--muted);
}
.him-says::before {
  content: "MOHAN";
  left: 6px;
}
.her-says::before {
  content: "RAGHAVI";
  right: 6px;
}
.chapter:not(.in) .him-says {
  transform: translateX(-30px) scale(0.92) !important;
}
.chapter:not(.in) .her-says {
  transform: translateX(30px) scale(0.92) !important;
}
.punchline {
  margin: 40px auto 0;
  max-width: 640px;
  font-family: var(--serif);
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.2;
  color: var(--ink);
}
.punchline em {
  display: block;
  color: var(--wine);
}

/* mending */
.mend {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(40px, 6.4vw, 84px);
  line-height: 1;
  color: var(--wine);
}
.mend span {
  display: inline-block;
}
.mend span + span {
  font-style: italic;
  color: var(--gold-deep);
}
.struck {
  position: relative;
  color: #2e6f86;
  white-space: nowrap;
}
.struck::after {
  content: "";
  position: absolute;
  left: -4%;
  top: 52%;
  width: 108%;
  height: 2.5px;
  border-radius: 2px;
  background: var(--wine);
  transform: scaleX(0) rotate(-4deg);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.6, 0, 0.3, 1) 2s;
}
.chapter.in .struck::after {
  transform: scaleX(1) rotate(-4deg);
}
.hot {
  display: inline-block;
  font-style: italic;
  font-weight: 600;
  background: linear-gradient(0deg, #b6372a, #e8782f 55%, #f4b54a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transform: scale(0.4);
  opacity: 0;
  transition:
    transform 0.7s cubic-bezier(0.3, 1.7, 0.5, 1) 2.6s,
    opacity 0.4s 2.6s;
}
.chapter.in .hot {
  transform: none;
  opacity: 1;
  animation: flicker 1.6s ease-in-out infinite 3.4s;
}
@keyframes flicker {
  50% {
    filter: drop-shadow(0 -3px 6px rgba(232, 120, 47, 0.55));
    transform: translateY(-1px) scale(1.04);
  }
}

/* the podcast correction */
.opposites {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 4.6vw, 56px);
  color: var(--ink);
}
.opposites em {
  color: var(--wine);
}
.podcast {
  position: relative;
  display: flex;
  gap: 18px;
  align-items: center;
  width: min(560px, 100%);
  margin: 34px auto 0;
  padding: 16px 18px;
  text-align: left;
  border-radius: 14px;
  background: #fffaf0;
  border: 1px solid #e0d2b8;
  box-shadow: 0 18px 30px -22px rgba(60, 30, 10, 0.5);
}
.pod-art {
  flex: none;
  width: 70px;
  height: 70px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #f4ddb9;
  background: linear-gradient(135deg, #742d3d, #3e1420);
}
.pod-art svg {
  width: 38px;
}
.pod-label {
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--muted);
}
.pod-title {
  margin: 6px 0 10px;
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.25;
}
.pod-bar {
  height: 3px;
  border-radius: 3px;
  background: #e6dac5;
  overflow: hidden;
}
.pod-bar i {
  display: block;
  height: 100%;
  width: 62%;
  background: var(--wine);
}
.stamp {
  position: absolute;
  right: -14px;
  top: -22px;
  padding: 6px 12px;
  border: 2.5px solid #b23a2e;
  border-radius: 6px;
  color: #b23a2e;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 1.2;
  text-transform: uppercase;
  text-align: center;
  background: rgba(255, 250, 240, 0.7);
  transform: rotate(9deg) scale(2.4);
  opacity: 0;
  transition:
    transform 0.35s cubic-bezier(0.5, 0, 0.8, 0.4) 1.1s,
    opacity 0.2s 1.1s;
}
.chapter.in .stamp {
  transform: rotate(9deg) scale(1);
  opacity: 0.88;
}

/* collision: two worlds meet as the chapter scrolls through the view */
.worlds {
  position: relative;
  height: 170px;
  max-width: 520px;
  margin: 0 auto 26px;
}
.world {
  --p: 0;
  position: absolute;
  top: 50%;
  width: 120px;
  height: 120px;
  margin-top: -60px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 40px;
  color: rgba(255, 245, 230, 0.9);
}
.world.hers {
  left: calc(50% - 60px - (1 - var(--p)) * 180px);
  background: radial-gradient(circle at 35% 30%, #a8455a, #5c1a2a);
  box-shadow: 0 16px 30px -12px rgba(92, 26, 42, 0.6);
}
.world.his {
  left: calc(50% - 60px + (1 - var(--p)) * 180px);
  background: radial-gradient(circle at 35% 30%, #e6c886, #a9823a);
  box-shadow: 0 16px 30px -12px rgba(150, 110, 40, 0.6);
  mix-blend-mode: multiply;
}
.world i {
  font-style: normal;
}
.spark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 240px;
  height: 240px;
  margin: -120px 0 0 -120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 228, 160, 0.9), rgba(255, 228, 160, 0) 60%);
  opacity: 0;
  transform: scale(0.3);
  pointer-events: none;
}
.collision.met .spark {
  animation: burst 1.4s ease-out both;
}
@keyframes burst {
  30% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: scale(1.4);
  }
}
.collide-date {
  margin: 6px 0 0;
  font-family: var(--serif);
  font-size: clamp(44px, 7vw, 92px);
  line-height: 1;
  color: var(--wine);
}
.rest {
  margin-top: 26px;
  font-style: italic;
}
.dots {
  display: inline-block;
  animation: dots 2.4s steps(5) infinite;
  overflow: hidden;
  vertical-align: bottom;
  width: 1.4em;
  white-space: nowrap;
}

.faq,
.wishes {
  padding: 110px 24px;
}
.faq {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding-block: 80px;
}
/* ---- Q & A ---- */
.qa-list {
  max-width: 760px;
  margin: 0 auto;
}
.qa-list details {
  border-top: 1px solid #dccfb8;
}
.qa-list details:last-child {
  border-bottom: 1px solid #dccfb8;
}
.qa-list summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 4px;
  font-family: var(--serif);
  font-size: clamp(21px, 2.4vw, 26px);
  color: var(--ink);
}
.qa-list summary::-webkit-details-marker {
  display: none;
}
.qa-list summary::after {
  content: "+";
  color: var(--gold-deep);
  transition: transform 0.3s;
}
.qa-list details[open] summary::after {
  transform: rotate(45deg);
}
.qa-list details p {
  margin: -6px 4px 24px;
  max-width: 620px;
  font-size: 15.5px;
  line-height: 1.6;
  color: #4b4036;
}

/* ---- guestbook ---- */
.wish-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
  max-width: 720px;
  margin: 0 auto;
  padding: 30px;
  background: rgba(255, 252, 245, 0.7);
  border: 1px solid #dacdb6;
}
.field {
  display: grid;
  gap: 8px;
  font-size: 9.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
}
.field small {
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
}
.field.wide {
  grid-column: 1 / -1;
}
.field input,
.field textarea {
  font: inherit;
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid #cdbd9f;
  padding: 6px 2px;
  resize: vertical;
  outline: none;
}
.field input:focus,
.field textarea:focus {
  border-bottom-color: var(--wine);
}
.hp {
  position: absolute;
  left: -9999px;
}
.wish-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.send {
  border: 0;
  border-radius: 99px;
  padding: 13px 26px;
  background: var(--wine);
  color: #fbeee3;
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}
.send:disabled {
  opacity: 0.5;
}
.wish-status {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--muted);
}

/* ---- closing ---- */
/* the Q & A page: a thank-you note to the travellers beside the questions,
   the two side by side so they fit on one screen */
.faq-spread {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 72px;
  /* top-aligned (level with the heading) so the note clears the record player */
  align-items: start;
  max-width: 1140px;
  margin: 0 auto;
}
.faq .section-head {
  text-align: left;
  max-width: none;
  margin: 0 0 26px;
}
.faq .section-head h2 {
  font-size: clamp(36px, 4vw, 52px);
}
.faq .qa-list summary {
  padding: 17px 4px;
  font-size: clamp(20px, 1.9vw, 23px);
}
.faq .qa-list details p {
  margin-bottom: 18px;
}
@media (min-width: 1100px) and (min-height: 820px) {
  .faq .section-head h2 {
    font-size: 58px;
  }
  .faq .qa-list summary {
    padding: 22px 4px;
    font-size: 25px;
  }
  .faq .qa-list details p {
    font-size: 16.5px;
  }
}
.closing {
  margin-top: 44px;
  padding: 46px 40px 42px;
  text-align: center;
}
.thanks {
  margin: 18px 0 0;
  font-family: var(--serif);
  font-size: clamp(21px, 2vw, 25px);
  line-height: 1.45;
}
@media (max-width: 900px) {
  .faq-spread {
    grid-template-columns: 1fr;
    gap: 64px;
  }
  .closing {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 38px 24px 32px;
  }
  .faq .section-head {
    text-align: center;
  }
}
.thanks [lang="ta"] {
  font-family: var(--tamil);
  font-size: 0.8em;
}
.sign {
  margin-top: 30px;
  font-size: 9.5px;
  letter-spacing: 3px;
  color: var(--muted);
}

@media (max-width: 760px) {
  .cast-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .versus {
    margin: -20px 0;
  }
  .wish-form {
    grid-template-columns: 1fr;
    padding: 22px;
  }
  .chip {
    font-size: 13px;
  }
  .stamp {
    right: -6px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .char *,
  .chip,
  .hot,
  .dots,
  .scroll-cue span {
    animation: none !important;
  }
}
@keyframes dots {
  from {
    width: 0;
  }
  to {
    width: 1.4em;
  }
}
.play {
  padding: 110px 24px 40px;
}
/* on a phone the heading and the game's start card share one screen, so
   Begin is always in view */
@media (max-width: 760px) {
  .play {
    padding: 40px 16px 32px;
  }
  .play .section-head {
    margin-bottom: 20px;
  }
  .play .section-head h2 {
    font-size: 34px;
  }
  .play .section-head .sub {
    margin-top: 10px;
    font-size: 16.5px;
    line-height: 1.35;
  }
}
/* the same on a short laptop screen */
@media (min-width: 761px) and (max-height: 820px) {
  .play {
    padding-top: 40px;
  }
  .play .section-head {
    margin-bottom: 22px;
  }
  .play .section-head h2 {
    font-size: clamp(36px, 4.6vw, 52px);
  }
  .play .section-head .sub {
    margin-top: 10px;
    font-size: 17px;
  }
}
#game-root {
  max-width: 920px;
  margin: 0 auto;
  min-height: 200px;
}
/* a bigger board when the game has a tall, wide screen to itself */
@media (min-width: 1100px) and (min-height: 820px) {
  #game-root {
    max-width: 1040px;
  }
}
body.show-page .chrome-btn.sound {
  display: none;
}
.deck {
  color: var(--ink);
}
#page {
  overflow-x: hidden;
}
.bubble {
  margin-top: 34px;
}
@media (max-width: 760px) {
  .char-wrap {
    width: min(200px, 54vw);
  }
}
.chapter {
  overflow-x: clip;
}
.world.hers {
  left: calc(50% - 60px - (1 - var(--p)) * min(180px, 26vw));
}
.world.his {
  left: calc(50% - 60px + (1 - var(--p)) * min(180px, 26vw));
}

/* =====================================================================
   Tracks as full pages, handed over by scroll-driven animation
   ===================================================================== */
/* Every section starts a page and the story's tracks never rest half-way
   (mandatory, not proximity). A section taller than the screen still scrolls
   freely inside; a fling stops at each track rather than skipping past it. */
#page {
  scroll-snap-type: y mandatory;
}
#page > section:not(.story) {
  scroll-snap-align: start;
}
.chapter {
  scroll-snap-stop: always;
}
/* the game, the Q & A, Backstage Pass and the guestbook are a page each too:
   a screen tall, content centred, and a fling stops at every one */
.play,
.backstage,
.audience {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-content: center;
}
/* auto side margins would shrink a grid item to its content; keep them full
   width so each block's own max-width and margin: auto still centre it */
.play > *,
.backstage > *,
.audience > * {
  width: 100%;
}
.play,
.faq,
.backstage,
.audience {
  scroll-snap-stop: always;
}
.story {
  max-width: none;
  padding: 0;
}
.story-head {
  min-height: 70vh;
  min-height: 70dvh;
  display: grid;
  place-content: center;
  margin: 0;
  scroll-snap-align: start;
}
.chapter {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 90px 24px;
  border-top: 0;
  scroll-snap-align: start;
  view-timeline: --track block;
  isolation: isolate;
}
.chapter::before {
  display: none;
}
.chapter .scene {
  width: min(1040px, 100%);
  position: relative;
  z-index: 1;
}
/* the big track number behind each page */
.chapter::after {
  content: attr(data-n);
  position: absolute;
  right: 3vw;
  top: 50%;
  z-index: 0;
  font-family: var(--serif);
  font-size: clamp(180px, 30vw, 420px);
  line-height: 1;
  color: rgba(169, 130, 58, 0.07);
  transform: translateY(-50%);
  pointer-events: none;
}
.chapter:nth-child(odd)::after {
  right: auto;
  left: 3vw;
}
@supports (animation-timeline: view()) {
  .chapter .scene {
    animation: track-pass linear both;
    animation-timeline: --track;
    animation-range: cover 0% cover 100%;
  }
  .chapter::after {
    animation: number-drift linear both;
    animation-timeline: --track;
    animation-range: cover 0% cover 100%;
  }
  @keyframes track-pass {
    0% {
      opacity: 0;
      transform: translateY(14vh) scale(0.93);
    }
    32%,
    68% {
      opacity: 1;
      transform: none;
    }
    100% {
      opacity: 0;
      transform: translateY(-12vh) scale(1.04);
    }
  }
  @keyframes number-drift {
    from {
      transform: translateY(-10%) scale(0.9);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    to {
      transform: translateY(-90%) scale(1.06);
      opacity: 0;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .chapter .scene,
  .chapter::after {
    animation: none !important;
  }
}

/* ---- Track 06: night falls for the star chart ---- */
.chapter.collision {
  background:
    radial-gradient(ellipse at 50% 42%, rgba(40, 46, 80, 0.55), rgba(0, 0, 0, 0) 60%),
    linear-gradient(180deg, var(--ivory) 0%, #0d0c14 16%, #0d0c14 84%, var(--ivory) 100%);
  color: #ece0c8;
}
.collision::after {
  color: rgba(201, 165, 90, 0.08);
}
.collision .track {
  color: #c9a55a;
}
.collision .narration {
  color: #e6d9c0;
}
.collision .collide-date {
  color: #f0d79c;
}
.sky-chart {
  margin: 0 auto 26px;
  display: grid;
  justify-items: center;
}
.sky-chart canvas {
  display: block;
  max-width: 100%;
  border-radius: 50%;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8);
}
.sky-chart figcaption {
  margin-top: 16px;
  font-size: 9.5px;
  letter-spacing: 2.6px;
  line-height: 1.9;
  color: #b9a27a;
}
.sky-note {
  margin: 18px auto 0;
  max-width: 540px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.45;
  color: #c9b896;
}

/* ---- the track rail ---- */
.track-rail {
  position: fixed;
  z-index: 11;
  right: 22px;
  top: 50%;
  display: grid;
  gap: 6px;
  transform: translate(20px, -50%);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.5s,
    transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.track-rail.on {
  opacity: 1;
  transform: translate(0, -50%);
  pointer-events: auto;
}
.track-rail a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: rgba(122, 108, 90, 0.7);
  text-decoration: none;
}
.track-rail a::after {
  content: "";
  width: 14px;
  height: 1px;
  background: currentColor;
  transition: width 0.3s;
}
.track-rail a[aria-current] {
  color: var(--wine);
}
.track-rail a[aria-current]::after {
  width: 30px;
}
@media (max-width: 760px) {
  .track-rail {
    display: none;
  }
  .chapter {
    padding: 70px 18px 150px;
  }
}

/* ---- no numbers: the rail is a column of dots, the pages carry only names ---- */
.chapter::after {
  display: none;
}
.track-rail {
  gap: 12px;
  /* a soft pill so the dots stay readable over the duet's photo */
  right: 16px;
  padding: 10px 6px;
  border-radius: 99px;
  background: rgba(246, 239, 225, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.track-rail a {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(114, 46, 64, 0.45);
  justify-content: center;
}
.track-rail a::after {
  display: none;
}
.track-rail a[aria-current] {
  background: var(--wine);
  transform: scale(1.25);
}
.track-rail a span {
  position: absolute;
  right: 20px;
  white-space: nowrap;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--wine);
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
}
.track-rail a:hover span,
.track-rail a:focus-visible span {
  opacity: 1;
  transform: none;
}

/* ---- the collision page keeps the ivory; the sky is its background ---- */
.chapter.collision {
  background: none;
  color: inherit;
}
.collision .track {
  color: var(--gold-deep);
}
.collision .narration {
  color: #4b4036;
}
.collision .collide-date {
  color: var(--wine);
}
.sky-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.collision .scene {
  padding: 30px 0;
  background: radial-gradient(ellipse 64% 50% at 50% 50%, rgba(243, 238, 229, 0.94), rgba(243, 238, 229, 0.7) 60%, rgba(243, 238, 229, 0) 100%);
}
/* where the map was drawn, as a caption along the bottom of the page */
.sky-where {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 28px;
  z-index: 1;
  margin: 0;
  /* same side padding as the page, so it centres under the words above */
  padding-inline: inherit;
  text-align: center;
  font-size: 9.5px;
  letter-spacing: 2.6px;
  color: var(--muted);
}
@media (max-width: 760px) {
  /* on a phone the player and the notes badge fill the bottom corners */
  .sky-where {
    bottom: 146px;
  }
}
.sky-note {
  /* one whole line where there is room; balanced lines on a phone */
  max-width: none;
  font-size: clamp(17px, 1.9vw, 21px);
  text-wrap: balance;
  color: #5b5148;
  /* a cream halo so the map's lines don't run through the words */
  text-shadow:
    0 0 4px #f3eee5,
    0 0 10px #f3eee5,
    0 0 18px #f3eee5;
}

/* =====================================================================
   The record player: a 3D deck you operate directly (turntable3d.js)
   ===================================================================== */
.deck {
  --active-record: #742d3d;
  position: fixed;
  z-index: 12;
  left: 6px;
  bottom: 4px;
  color: var(--ink);
  opacity: 0;
  visibility: hidden;
  transform: translateY(40px);
  transition:
    opacity 1s ease 1.2s,
    transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 1.2s,
    visibility 0s 2.4s;
}
body.show-page .deck {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 1s ease 1.2s,
    transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 1.2s;
}
.deck-3d {
  width: 390px;
  height: 288px;
}
.deck-3d canvas {
  display: block;
}
.deck-keys {
  position: absolute;
  left: 18px;
  bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 320px;
}
.deck-keys button {
  border: 1px solid rgba(114, 46, 64, 0.35);
  background: rgba(255, 251, 243, 0.92);
  border-radius: 99px;
  padding: 7px 12px;
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--wine);
}
.deck-keys button[aria-pressed="true"] {
  background: var(--wine);
  color: #fbeee3;
}
/* hidden until a keyboard reaches it, or when 3D isn't available */
.deck:not(.no3d) .deck-keys:not(:focus-within) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.deck.no3d .deck-3d {
  height: 60px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 760px) {
  .deck-3d {
    width: 230px;
    height: 170px;
  }
}

/* the little note beside the deck when the page first appears */
.deck-hint {
  position: absolute;
  z-index: 3;
  left: calc(100% - 46px);
  bottom: 118px;
  width: max-content;
  max-width: 280px;
  margin: 0;
  padding: 12px 16px 12px;
  border-radius: 16px 16px 16px 4px;
  background: #fffaf0;
  border: 1px solid #e0d2b8;
  box-shadow: 0 16px 30px -18px rgba(60, 30, 10, 0.55);
  display: grid;
  gap: 4px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transform-origin: 0 100%;
  transition:
    opacity 0.5s,
    transform 0.6s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.deck-hint::after {
  content: "";
  position: absolute;
  left: -7px;
  bottom: 12px;
  width: 12px;
  height: 12px;
  background: inherit;
  border-left: 1px solid #e0d2b8;
  border-bottom: 1px solid #e0d2b8;
  transform: rotate(45deg);
}
.deck.hinting .deck-hint {
  opacity: 1;
  transform: none;
}
.hint-now {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.hint-now em {
  font-family: var(--serif);
  font-size: 1.6em;
  letter-spacing: 0;
  text-transform: none;
  color: var(--wine);
}
.hint-pick {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.2;
  color: var(--ink);
}
.hint-how {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 3px;
}
.deck.hinting .hint-pick {
  animation: hint-wiggle 2.4s ease-in-out 1.4s 2;
}
@keyframes hint-wiggle {
  0%,
  100% {
    transform: none;
  }
  10% {
    transform: rotate(-2deg);
  }
  20% {
    transform: rotate(2deg);
  }
  30% {
    transform: none;
  }
}
@media (max-width: 760px) {
  .deck-hint {
    left: calc(100% - 34px);
    bottom: 92px;
    max-width: 205px;
    padding: 10px 12px;
  }
  .hint-pick {
    font-size: 15px;
  }
}

/* =====================================================================
   Opening screen: the sky caption and the easy way in
   ===================================================================== */
.sky-caption {
  position: fixed;
  z-index: 7;
  left: 0;
  right: 0;
  bottom: 18px;
  margin: 0;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  color: rgba(214, 190, 150, 0.7);
  animation: rise 1.6s both 1.6s;
  transition: opacity 0.6s;
  pointer-events: none;
}
.sky-caption span {
  white-space: nowrap;
}
.easy-entry {
  position: fixed;
  z-index: 8;
  right: 22px;
  bottom: 16px;
  border: 0;
  background: none;
  font-size: 10.5px;
  letter-spacing: 1.2px;
  color: rgba(214, 190, 150, 0.75);
  text-decoration: underline;
  text-underline-offset: 4px;
  animation: rise 1.4s both 2s;
}
body:not(.is-closed) .sky-caption,
body:not(.is-closed) .easy-entry {
  opacity: 0;
  pointer-events: none;
}
/* the personal line, written above the date like an address on the envelope */
.env-for {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--ew) * 0.006);
  max-width: 70%;
  text-align: center;
}
.env-for[hidden] {
  display: none;
}
.env-for-label {
  display: flex;
  align-items: center;
  gap: 0.9em;
  font-size: calc(var(--ew) * 0.0135);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #a9823a;
}
.env-for-label::before,
.env-for-label::after {
  content: "";
  width: calc(var(--ew) * 0.05);
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.env-for-name {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(var(--ew) * 0.044);
  line-height: 1.1;
  color: #6b2737;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
.env-for:not([hidden]) + .env-date {
  margin-top: calc(var(--ew) * 0.022);
}
@media (max-width: 640px) {
  .sky-caption {
    bottom: 46px;
    font-size: 12px;
    padding: 0 24px;
  }
  .sky-caption i {
    display: block;
    height: 0;
    overflow: hidden;
  }
  .easy-entry {
    left: 0;
    right: 0;
    bottom: 14px;
  }
}

/* =====================================================================
   The 3D layer and the programme at the top of the page
   ===================================================================== */
.hero {
  position: relative;
  isolation: isolate;
}
.hero > :not(.hero-3d) {
  position: relative;
  z-index: 1;
}
.hero-3d {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-3d canvas {
  display: block;
}
.programme {
  width: min(640px, 100%);
  margin: 30px auto 0;
  padding: 18px 20px 16px;
  border-radius: 6px;
  background: rgba(255, 251, 243, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid #e0d2b8;
  box-shadow: 0 20px 40px -30px rgba(60, 30, 10, 0.6);
  text-align: left;
}
.prog-title {
  margin: 0 0 6px;
  font-size: 9.5px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.prog-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px dashed #dccdb2;
}
.prog-date {
  display: grid;
  justify-items: center;
  line-height: 1;
}
.prog-date b {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 40px;
  color: var(--wine);
}
.prog-date small {
  margin-top: 4px;
  font-size: 9px;
  letter-spacing: 1.6px;
  color: var(--muted);
}
.prog-info strong {
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  color: var(--ink);
}
.prog-info span {
  font-size: 14px;
  color: #5b5148;
}
.prog-acts,
.prog-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.prog-foot {
  padding-top: 12px;
  border-top: 1px dashed #dccdb2;
}
.prog-btn {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 99px;
  border: 1px solid rgba(114, 46, 64, 0.35);
  font-size: 13px;
  color: var(--wine);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.5);
}
.prog-btn:hover {
  background: rgba(114, 46, 64, 0.08);
}
.prog-btn.solid {
  background: var(--wine);
  color: #fbeee3;
  border-color: var(--wine);
}
@media (max-width: 640px) {
  .prog-row {
    grid-template-columns: 54px 1fr;
  }
  .prog-acts {
    grid-column: 1 / -1;
  }
}

/* =====================================================================
   RSVP, Backstage pass
   ===================================================================== */
.rsvp,
.backstage {
  padding: 110px 24px;
}
.rsvp-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 22px 24px;
  max-width: 720px;
  margin: 0 auto;
  padding: 30px;
  background: rgba(255, 252, 245, 0.75);
  border: 1px solid #dacdb6;
}
.stepper {
  display: flex;
  align-items: center;
  gap: 10px;
}
.stepper button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #cdbd9f;
  background: #fffaf0;
  font-size: 22px;
  color: var(--wine);
}
.stepper output {
  min-width: 34px;
  text-align: center;
  font-family: var(--serif);
  font-size: 30px;
  color: var(--ink);
}
.rsvp-events {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.rsvp-events legend {
  padding: 0;
  margin-bottom: 10px;
}
.check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 99px;
  border: 1px solid #d6c7ad;
  background: #fffaf0;
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  cursor: pointer;
}
.check input {
  width: 18px;
  height: 18px;
  accent-color: var(--wine);
}
.rsvp-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}
.send.wa {
  background: #1f6f4a;
}
.send.ghost {
  background: transparent;
  color: var(--wine);
  border: 1px solid rgba(114, 46, 64, 0.35);
}
.pass-grid {
  display: grid;
  /* four cards: a 2 x 2 grid */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 820px;
  margin: 0 auto;
}
.pass {
  position: relative;
  padding: 24px 24px 26px;
  background: rgba(255, 252, 245, 0.7);
  border: 1px solid #dacdb6;
  border-radius: 4px;
}
.pass::before {
  content: "";
  position: absolute;
  top: 0;
  right: 24px;
  width: 26px;
  height: 14px;
  border: 1px solid #dacdb6;
  border-top: 0;
  border-radius: 0 0 14px 14px;
  background: var(--ivory);
}
.pass-tag {
  font-size: 9px;
  letter-spacing: 2.4px;
  color: var(--gold-deep);
}
.pass h3 {
  margin: 10px 0 8px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 25px;
  color: var(--ink);
}
.pass p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #4b4036;
}
.pass .send {
  display: inline-flex;
  margin-top: 16px;
  text-decoration: none;
}
/* a screen of its own on a big display: wider, roomier passes */
@media (min-width: 1100px) and (min-height: 760px) {
  .pass-grid {
    max-width: 1060px;
    gap: 22px;
  }
  .pass {
    padding: 32px 34px 34px;
  }
  .pass h3 {
    font-size: 29px;
  }
  .pass p {
    font-size: 16.5px;
  }
}
@media (max-width: 860px) {
  .pass-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .pass-grid,
  .rsvp-card {
    grid-template-columns: 1fr;
  }
  .rsvp-card {
    padding: 22px;
  }
}

/* =====================================================================
   Wishes as stars on the sky page
   ===================================================================== */
.wish-sky {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
/* a real star on the chart, lit up: a soft glow that breathes in and out,
   with the star itself glowing at the centre */
.wish-star {
  position: absolute;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  pointer-events: auto;
  cursor: pointer;
}
.wish-star::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(226, 178, 84, 0.6), rgba(226, 178, 84, 0.2) 38%, rgba(226, 178, 84, 0) 70%);
  animation: wish-pulse var(--tw, 3s) ease-in-out var(--delay, 0s) infinite;
}
.wish-star::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: #c9963c;
  box-shadow: 0 0 6px 2px rgba(226, 178, 84, 0.75);
  transition: transform 0.25s;
}
/* the guest's name beside their star, set like the map's own star names */
.wish-name {
  position: absolute;
  left: calc(50% + 12px);
  bottom: calc(50% + 2px);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(13px, 1.3vw, 17px);
  line-height: 1.1;
  color: rgba(114, 46, 64, 0.85);
  text-align: left;
  pointer-events: none;
}
.wish-name.left {
  left: auto;
  right: calc(50% + 12px);
  text-align: right;
}
/* no room beside this star for the name: it shows with the wish instead */
.wish-name.quiet {
  visibility: hidden;
}
.wish-star.mine::before {
  background: radial-gradient(circle, rgba(114, 46, 64, 0.5), rgba(114, 46, 64, 0.16) 38%, rgba(114, 46, 64, 0) 70%);
}
.wish-star.mine::after {
  background: var(--wine);
  box-shadow: 0 0 6px 2px rgba(114, 46, 64, 0.55);
}
.wish-star:hover::before,
.wish-star:focus-visible::before {
  animation: none;
  opacity: 1;
  transform: scale(1.7);
  transition: transform 0.3s;
}
.wish-star:hover::after,
.wish-star:focus-visible::after {
  transform: scale(1.4);
}
.wish-star:focus-visible {
  outline: none;
}
@keyframes wish-pulse {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(0.65);
  }
  50% {
    opacity: 1;
    transform: scale(1.3);
  }
}
@media (prefers-reduced-motion: reduce) {
  .wish-star::before {
    animation: none;
  }
}
.wish-card {
  position: absolute;
  z-index: 3;
  width: min(280px, 80vw);
  margin: 0;
  padding: 16px 18px;
  background: #fffaf0;
  border: 1px solid #e0d2b8;
  border-radius: 10px;
  box-shadow: 0 20px 40px -24px rgba(60, 30, 10, 0.6);
  pointer-events: auto;
  text-align: left;
  animation: crate-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.wish-card p {
  margin: 0;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.35;
}
.wish-card span {
  display: block;
  margin-top: 8px;
  font-size: 9.5px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--gold-deep);
}
@keyframes crate-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* =====================================================================
   Swaras rising where you tap
   ===================================================================== */
.taps {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  overflow: hidden;
}
.taps span {
  position: absolute;
  font-family: var(--tamil);
  font-size: 18px;
  color: var(--gold-deep);
  text-shadow: 0 0 8px rgba(255, 220, 150, 0.7);
  transform: translate(-50%, -50%);
  animation: swara-rise 1.3s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
@keyframes swara-rise {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--r)) scale(1.1);
  }
}
.taps i {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  border: 1.5px solid rgba(201, 165, 90, 0.8);
  animation: tap-ring 0.8s ease-out both;
}
@keyframes tap-ring {
  to {
    transform: scale(7);
    opacity: 0;
  }
}

/* =====================================================================
   Easy view: larger text, no scroll animation or snapping
   ===================================================================== */
.easy-toggle {
  position: fixed;
  z-index: 30;
  right: 18px;
  top: 18px;
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 99px;
  border: 1px solid rgba(114, 46, 64, 0.3);
  background: rgba(255, 251, 243, 0.9);
  font-size: 12px;
  color: var(--wine);
}
.easy-toggle span {
  font-family: var(--serif);
  font-size: 18px;
}
body.show-page .easy-toggle {
  display: inline-flex;
}
.easy-toggle[aria-pressed="true"] {
  background: var(--wine);
  color: #fbeee3;
}
body.easy #page {
  scroll-snap-type: none;
}
body.easy #page > section,
body.easy .story > * {
  zoom: 1.2;
}
body.easy .chapter .scene,
body.easy .chapter::after {
  animation: none !important;
}
body.easy .reveal,
body.easy .chapter:not(.in) .scene > *,
body.easy .chapter:not(.in) .mend > span {
  opacity: 1 !important;
  transform: none !important;
}

/* ---- the names on one line, sized to fit any screen ---- */
.names {
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: 0.18em;
  white-space: nowrap;
  font-size: clamp(38px, 9.2vw, 132px);
  line-height: 1;
}
.names .amp {
  font-size: 0.55em;
  line-height: 1;
}
.in-concert {
  margin-top: 10px;
}

/* ---- the mending page now carries the podcast too ---- */
.mending .mend {
  font-size: clamp(36px, 5.6vw, 76px);
}
.mend-rule {
  display: block;
  margin: 34px 0 14px;
  color: var(--gold);
  font-size: 18px;
}
.mending .opposites {
  font-size: clamp(28px, 3.6vw, 44px);
}
.mending .podcast {
  margin-top: 22px;
}
.narration.small {
  font-size: clamp(18px, 2vw, 22px);
  margin-top: 20px;
}

/* ---- the guestbook: one letter on programme paper, the last page ---- */
/* extra room at the bottom so the form clears the player */
.audience {
  padding: 110px 24px 220px;
}
/* programme paper, shared with the thank-you note on the Q & A page */
.wish-form.letter,
.closing {
  position: relative;
  background-color: #f6efe1;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 60%),
    var(--paper-tex);
  background-size: auto, 340px 340px;
  border: 1.5px solid #b08a43;
  border-radius: 2px;
  box-shadow:
    inset 0 0 0 5px #f6efe1,
    inset 0 0 0 6px rgba(176, 138, 67, 0.45),
    0 30px 50px -34px rgba(60, 30, 10, 0.55);
}
.wish-form.letter {
  max-width: 640px;
  padding: 44px 44px 36px;
  gap: 26px 24px;
}
.letter-rule {
  position: absolute;
  top: -11px;
  left: 50%;
  translate: -50% 0;
  padding: 0 12px;
  background: var(--ivory);
  font-style: normal;
  font-size: 15px;
  color: var(--gold);
}
.letter textarea {
  font-size: 23px;
  line-height: 1.5;
  min-height: 140px;
  background-image: repeating-linear-gradient(transparent 0 33px, rgba(176, 138, 67, 0.22) 33px 34px);
  border-bottom: 0;
}
/* the guestbook page on a big screen: a larger letter with more lines */
@media (min-width: 1100px) and (min-height: 760px) {
  /* the centred letter is clear of the corner player here */
  .audience {
    padding-block: 80px 120px;
  }
  .wish-form.letter {
    max-width: 760px;
    padding: 52px 56px 44px;
  }
  .letter textarea {
    min-height: 210px;
  }
}
.letter textarea::placeholder {
  font-style: italic;
  color: rgba(120, 100, 70, 0.45);
}
.letter .wish-actions {
  justify-content: center;
  text-align: center;
  padding-top: 6px;
}
@media (max-width: 600px) {
  .wish-form.letter {
    grid-template-columns: 1fr;
    padding: 34px 22px 28px;
  }
}
.hero-3d {
  overflow: hidden;
}
.hero-3d canvas {
  width: 100% !important;
  height: 100% !important;
}
.names {
  font-size: clamp(40px, 11vw, 132px);
}

/* =====================================================================
   The programme: an ornate, traditional invitation card
   ===================================================================== */
.programme.ornate {
  position: relative;
  width: min(760px, 100%);
  margin: 30px auto 0;
  padding: 26px 42px 26px;
  border-radius: 2px;
  text-align: left;
  color: var(--ink);
  background-color: #f6efe1;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 60%),
    var(--paper-tex);
  background-size: auto, 340px 340px;
  border: 1.5px solid #b08a43;
  box-shadow:
    inset 0 0 0 5px #f6efe1,
    inset 0 0 0 6px rgba(176, 138, 67, 0.55),
    0 24px 50px -34px rgba(60, 30, 10, 0.7);
  backdrop-filter: none;
}
.orn-corner {
  position: absolute;
  width: 46px;
  height: 46px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2060%2060%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23b08a43%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M60%204%20H20%20C11%204%204%2011%204%2020%20V60%27/%3E%3Cpath%20d%3D%27M60%2010%20H24%20C16%2010%2010%2016%2010%2024%20V60%27%20stroke-opacity%3D%27.55%27/%3E%3Cpath%20d%3D%27M4%2020%20C4%2013%2010%2012%2013%2015%20C16%2018%2014%2022%2010%2021%27/%3E%3Cpath%20d%3D%27M20%204%20C13%204%2012%2010%2015%2013%20C18%2016%2022%2014%2021%2010%27/%3E%3Ccircle%20cx%3D%2715%27%20cy%3D%2715%27%20r%3D%271.6%27%20fill%3D%27%23b08a43%27%20stroke%3D%27none%27/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events: none;
}
.orn-corner.tl { left: 4px; top: 4px; }
.orn-corner.tr { right: 4px; top: 4px; transform: scaleX(-1); }
.orn-corner.bl { left: 4px; bottom: 4px; transform: scaleY(-1); }
.orn-corner.br { right: 4px; bottom: 4px; transform: scale(-1, -1); }
.prog-head {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin-bottom: 14px;
}
.prog-lotus {
  width: 30px;
  color: #b08a43;
  line-height: 0;
}
.prog-lotus svg {
  width: 100%;
}
.programme.ornate .prog-title {
  position: relative;
  margin: 0;
  padding: 0 18px;
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #3a2f27;
}
.programme.ornate .prog-title::before,
.programme.ornate .prog-title::after {
  content: "";
  position: absolute;
  top: 50%;
  width: min(140px, 18vw);
  height: 1px;
  background: linear-gradient(90deg, rgba(176, 138, 67, 0), #b08a43);
}
.programme.ornate .prog-title::before { right: 100%; }
.programme.ornate .prog-title::after { left: 100%; transform: scaleX(-1); }
.prog-day {
  --prog-date-column: 96px;
  --prog-date-column-half: 48px;
  display: grid;
  grid-template-columns: var(--prog-date-column) 1fr;
  align-items: start;
  padding: 10px 0;
}
.programme.ornate .prog-date {
  position: relative;
  display: grid;
  justify-items: center;
  align-self: stretch;
  align-content: center;
  padding-right: 18px;
  margin-right: 22px;
  border-right: 1px solid rgba(176, 138, 67, 0.55);
}
.programme.ornate .prog-date::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  background: #f6efe1;
  border: 1px solid #b08a43;
  transform: rotate(45deg);
}
.programme.ornate .prog-date b {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 46px;
  line-height: 1;
  color: #6b2737;
}
.programme.ornate .prog-date small {
  margin-top: 6px;
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.18em;
  color: #4b4036;
}
.prog-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 18px;
  align-items: center;
}
.prog-info {
  display: grid;
  gap: 2px;
}
.programme.ornate .prog-info strong {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.1;
  color: #6b2737;
  margin-bottom: 4px;
}
.prog-time,
.prog-venue {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.3;
  color: #3a2f27;
}
.prog-note {
  font-family: var(--serif);
  font-size: 14px;
  color: #6f5c45;
}
.prog-acts {
  display: flex;
  gap: 10px;
}
.prog-act {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1.5px solid #b08a43;
  box-shadow: inset 0 0 0 2.5px #f6efe1, inset 0 0 0 3.2px rgba(176, 138, 67, 0.45);
  background: rgba(255, 252, 245, 0.5);
  font-family: var(--serif);
  font-size: 15px;
  color: #3a2f27;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s;
}
.prog-act:hover {
  background: rgba(176, 138, 67, 0.12);
}
.prog-act svg {
  width: 16px;
  height: 16px;
  color: #3a2f27;
}
.prog-sep {
  position: relative;
  height: 1px;
  margin: 6px 0;
  background-image: linear-gradient(90deg, rgba(176, 138, 67, 0.6) 40%, rgba(0, 0, 0, 0) 0);
  background-size: 5px 1px;
}
.prog-sep::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -3.5px;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  background: #f6efe1;
  border: 1px solid #b08a43;
  transform: rotate(45deg);
}
.prog-sep.inner {
  margin: 12px 0;
  background-image: linear-gradient(90deg, rgba(176, 138, 67, 0.5), rgba(176, 138, 67, 0.5));
  background-size: auto;
  width: 60%;
}
.prog-sep.inner::after {
  /* The inner rule is 60% of the event column; offset its marker so it
     shares the full programme's centre line with the day separator. */
  left: calc(83.333333% - var(--prog-date-column-half));
}
@media (max-width: 640px) {
  .programme.ornate {
    padding: 22px 20px;
  }
  .prog-day {
    --prog-date-column: 64px;
    --prog-date-column-half: 32px;
  }
  .programme.ornate .prog-date {
    padding-right: 10px;
    margin-right: 14px;
  }
  .programme.ornate .prog-date b {
    font-size: 36px;
  }
  .programme.ornate .prog-date small {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-align: center;
  }
  .prog-item {
    grid-template-columns: 1fr;
  }
  .programme.ornate .prog-info strong {
    font-size: 23px;
  }
  .prog-time,
  .prog-venue {
    font-size: 15.5px;
  }
  .prog-act {
    min-height: 38px;
    padding: 0 12px;
    font-size: 14px;
  }
}

/* =====================================================================
   The postcard: the programme in a traditional frame
   ===================================================================== */
.card {
  display: grid;
  place-items: center;
  height: auto;
  overflow: hidden;
  cursor: default;
  color: var(--ink);
  border-radius: 2px;
  background-color: #f6efe1;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 60%),
    radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0) 60%, rgba(110, 80, 40, 0.1)),
    var(--paper-tex);
  background-size: auto, auto, 340px 340px;
  border: 1.5px solid #b08a43;
  box-shadow:
    inset 0 0 0 6px #f6efe1,
    inset 0 0 0 7px rgba(176, 138, 67, 0.55),
    0 30px 50px -22px rgba(0, 0, 0, 0.85);
  outline: none;
}
.card .orn-corner {
  width: 52px;
  height: 52px;
}
.card-content {
  width: var(--cw);
  padding: calc(var(--cw) * 0.04) calc(var(--cw) * 0.055) calc(var(--cw) * 0.035);
}
.programme.bare {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.card-keys {
  width: 40%;
  height: calc(var(--cw) * 0.07);
  min-height: 30px;
  margin: calc(var(--cw) * 0.03) auto 0;
}
body.is-waiting .card {
  cursor: pointer;
  animation: card-breathe 2.6s ease-in-out infinite;
}
@keyframes card-breathe {
  50% {
    box-shadow:
      inset 0 0 0 6px #f6efe1,
      inset 0 0 0 7px rgba(176, 138, 67, 0.55),
      0 30px 50px -22px rgba(0, 0, 0, 0.85),
      0 0 0 6px rgba(214, 178, 110, 0.25);
  }
}
.card-hint {
  position: fixed;
  z-index: 7;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #e3c98f;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.5s,
    transform 0.5s;
  pointer-events: none;
}
.card-hint i {
  display: inline-block;
  width: 24px;
  height: 1px;
  margin: 0 12px;
  vertical-align: middle;
  background: currentColor;
  opacity: 0.6;
}
body.is-waiting .card-hint {
  opacity: 1;
  transform: none;
}

/* =====================================================================
   The record player: flat, top-down, in the invitation's colours
   ===================================================================== */
.deck {
  --record: #722e40;
  left: 20px;
  bottom: 18px;
  display: grid;
  justify-items: center;
  gap: 8px;
}
.plinth {
  position: relative;
  width: 168px;
  height: 168px;
  border-radius: 10px;
  background-color: #f2ead9;
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 45%),
    var(--paper-tex);
  background-size: auto, 340px 340px;
  border: 1px solid #c8ab72;
  box-shadow:
    inset 0 0 0 4px #f2ead9,
    inset 0 0 0 5px rgba(176, 138, 67, 0.45),
    0 1px 1px rgba(60, 30, 10, 0.2),
    0 16px 30px -16px rgba(60, 30, 10, 0.55);
}
.plate {
  position: absolute;
  left: 12px;
  top: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 96px;
  padding: 3px 6px;
  border: 1px solid #b08a43;
  border-radius: 3px;
  background: linear-gradient(135deg, #e9d6a8, #c9a55a 60%, #e2c98f);
  font-family: var(--serif);
  font-size: 9px;
  line-height: 1.1;
  color: #3a2a12;
  text-align: left;
  z-index: 3;
}
.plate-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.plate-switch {
  font-size: 9px;
  opacity: 0.7;
}
.platter {
  position: absolute;
  left: 18px;
  top: 30px;
  width: 116px;
  height: 116px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle, #d9cfbb 0 62%, #c8bca4 63% 100%);
  box-shadow: inset 0 0 0 2px rgba(120, 95, 60, 0.35);
  cursor: pointer;
  touch-action: none;
}
.record {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(0, 0, 0, 0) 33%, rgba(255, 255, 255, 0.05) 34%, rgba(0, 0, 0, 0) 35%),
    repeating-radial-gradient(circle, #2a1a20 0 1.2px, #3a2530 1.4px 2.4px);
  background-color: #2a1a20;
  box-shadow: 0 2px 4px rgba(30, 10, 10, 0.35);
  animation: spin 1.8s linear infinite;
  animation-play-state: paused;
}
.record::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 300deg, rgba(255, 255, 255, 0) 0deg, rgba(255, 240, 220, 0.14) 25deg, rgba(255, 255, 255, 0) 55deg, rgba(255, 255, 255, 0) 180deg, rgba(255, 240, 220, 0.1) 205deg, rgba(255, 255, 255, 0) 235deg);
}
.record-label {
  position: absolute;
  inset: 33%;
  border-radius: 50%;
  background-color: var(--record);
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4);
}
.record-label::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px;
  border-radius: 50%;
  background: #e9dfcc;
}
.deck.playing .record {
  animation-play-state: running;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.arm-control {
  position: absolute;
  right: 6px;
  top: 8px;
  width: 92px;
  height: 92px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  clip-path: polygon(66% 0, 100% 0, 100% 88%, 55% 100%, 30% 86%, 54% 62%);
  z-index: 2;
}
.arm-control svg {
  display: block;
  width: 100%;
  height: 100%;
}
.arm-swing {
  transform-origin: 82px 16px;
  /* Retract the lifted arm so its cartridge clears the volume track. */
  transform: rotate(-16deg) scaleY(0.76);
  transition: transform 1s cubic-bezier(0.3, 0.1, 0.3, 1);
}
.deck.arm-down .arm-swing {
  transform: rotate(calc(1deg + var(--progress, 0) * 9deg)) scaleY(1);
}
.power-switch {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #9b8152;
  border-radius: 50%;
  background: linear-gradient(145deg, #f6eddb, #bfae91);
  color: #4b3828;
  box-shadow: 0 1px 2px rgba(45, 25, 12, 0.28);
  cursor: pointer;
}
.power-switch {
  right: 13px;
  top: 13px;
  width: 17px;
  height: 17px;
}
.power-switch span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #9e8d71;
  box-shadow: 0 0 0 2px rgba(255, 252, 242, 0.65);
}
.deck.playing .power-switch span {
  background: #d1a84f;
  box-shadow: 0 0 0 2px rgba(255, 252, 242, 0.65), 0 0 8px #d7ae53;
}
.transport-switch {
  position: absolute;
  left: 11px;
  bottom: 10px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  padding: 0;
  border: 1px solid #9b8152;
  border-radius: 50%;
  background: linear-gradient(145deg, #f6eddb, #bfae91);
  color: #6b2737;
  box-shadow: 0 1px 2px rgba(45, 25, 12, 0.28);
  cursor: pointer;
}
.transport-switch span {
  width: 0;
  height: 0;
  margin-left: 2px;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid currentColor;
}
.deck.playing .transport-switch span {
  width: 6px;
  height: 8px;
  margin-left: 0;
  border: 0;
  border-left: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
.volume-control {
  position: absolute;
  z-index: 4;
  right: 8px;
  bottom: 29px;
  width: 20px;
  height: 56px;
  font: 600 6px/1 var(--sans);
  letter-spacing: 0.6px;
  color: #65513a;
  text-align: center;
}
.volume-control > span {
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: 0;
}
.volume-control input {
  position: absolute;
  left: -13px;
  top: 18px;
  width: 46px;
  height: 10px;
  margin: 0;
  accent-color: var(--wine);
  transform: rotate(-90deg);
  cursor: ns-resize;
}
.power-dot {
  position: absolute;
  right: 14px;
  bottom: 13px;
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #b9a98d;
  box-shadow: 0 0 0 2px #e6dcc8;
  transition: background 0.4s, box-shadow 0.4s;
  cursor: pointer;
  z-index: 5;
}
.deck.playing .power-dot {
  background: #c9a55a;
  box-shadow: 0 0 0 2px #e6dcc8, 0 0 8px #e8c272;
}
.deck.playing .power-dot[aria-pressed="true"] {
  background: var(--wine);
  box-shadow: 0 0 0 2px #e6dcc8, 0 0 7px rgba(114, 46, 64, 0.7);
}
.deck-2d :is(button, input):focus-visible {
  outline: 2px solid var(--wine);
  outline-offset: 3px;
}

/* ---------- the other records, fanned out around the deck ---------- */
/* .fan is a point at the middle of the deck; each card sits on a quarter
   circle around it, from straight up (0deg) round to the right (90deg).
   page.js sets each card's --a and the fan's --step (radians between cards). */
.fan {
  --w: 84px;
  --h: 118px;
  --size: 60px;
  --R0: 200px;
  --R: max(var(--R0), calc((var(--w) + 10px) / var(--step, 1)));
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}
/* the deck's controls stay above the fan's catch area */
.deck-2d .plinth {
  z-index: 1;
}
/* an invisible disc under the cards, so crossing the gaps keeps the fan open */
.deck.open .fan::before {
  content: "";
  position: absolute;
  left: calc(var(--R) * -1 - 70px);
  top: calc(var(--R) * -1 - 70px);
  width: calc(var(--R) * 2 + 140px);
  height: calc(var(--R) * 2 + 140px);
  border-radius: 50%;
  pointer-events: auto;
}
.fan-rec {
  --a: 45deg;
  position: absolute;
  left: calc(var(--w) / -2);
  top: calc(var(--h) / -2);
  display: grid;
  /* one column the card's width, so a long artist line ends in "…" instead of
     widening the column past the card */
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-content: start;
  gap: 6px;
  width: var(--w);
  height: var(--h);
  padding: 8px 4px 0;
  border: 1px solid #e0d2b8;
  border-radius: 8px;
  background: #fffaf0;
  box-shadow: 0 14px 24px -16px rgba(60, 30, 10, 0.6);
  color: inherit;
  font: inherit;
  cursor: pointer;
  opacity: 0;
  /* tucked away behind the deck */
  transform: rotate(var(--a)) translateY(calc(var(--R) * -0.35)) rotate(calc(var(--a) * -1)) scale(0.4);
  transition:
    transform 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.15) calc(var(--i) * 45ms),
    opacity 0.25s calc(var(--i) * 45ms);
}
/* out along the arc, each card tilted a little like a hand of cards */
.deck.open .fan-rec {
  opacity: 1;
  pointer-events: auto;
  transform: rotate(var(--a)) translateY(calc(var(--R) * -1)) rotate(calc(var(--a) * -1)) rotate(calc((var(--a) - 45deg) * 0.18));
}
.deck.open .fan-rec:hover,
.deck.open .fan-rec:focus-visible {
  z-index: 2;
  transform: rotate(var(--a)) translateY(calc(var(--R) * -1 - 10px)) rotate(calc(var(--a) * -1)) scale(1.06);
}
.fan-rec .sleeve {
  position: relative;
  width: var(--size);
  height: var(--size);
}
.fan-rec .sleeve-face {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 3px;
  background-color: var(--c);
  background-image: var(--art);
  background-size: cover;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.25) inset,
    0 8px 14px -8px rgba(30, 15, 5, 0.6);
}
.fan-rec .sleeve-face::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 45%);
}
/* the record inside slides up out of its sleeve on hover */
.fan-rec .peek {
  position: absolute;
  top: 7%;
  left: 7%;
  width: 86%;
  height: 86%;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, #141414 0 1px, #2a2a2a 1.3px 2px);
  box-shadow: 0 0 0 1px #000;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fan-rec .peek::after {
  content: "";
  position: absolute;
  inset: 34%;
  border-radius: 50%;
  background: var(--c);
}
.fan-rec:hover .peek,
.fan-rec:focus-visible .peek {
  transform: translateY(-26%);
}
.fan-rec .cap {
  max-width: 100%;
  font-family: var(--serif);
  font-size: 12px;
  line-height: 1.1;
  text-align: center;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.fan-rec .cap span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.fan-rec .cap small {
  display: block;
  margin-top: 2px;
  font-family: var(--sans);
  font-size: 8.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* the record that just came off the deck drops back into its slot */
.deck.open .fan-rec.returned .sleeve {
  animation: fan-return 0.45s cubic-bezier(0.2, 0.9, 0.25, 1.15);
}
@keyframes fan-return {
  from {
    transform: translateY(28px) scale(0.7);
    opacity: 0;
  }
}
@media (max-width: 760px) {
  .deck {
    left: 12px;
    bottom: 12px;
  }
  .plinth {
    width: 124px;
    height: 124px;
  }
  .platter {
    left: 12px;
    top: 24px;
    width: 86px;
    height: 86px;
  }
  .arm-control {
    width: 70px;
    height: 70px;
  }
  .plate {
    left: 8px;
    top: 4px;
    max-width: 74px;
    font-size: 8px;
  }
  .power-switch {
    right: 9px;
    top: 9px;
    width: 15px;
    height: 15px;
  }
  .transport-switch {
    left: 8px;
    bottom: 7px;
    width: 18px;
    height: 18px;
  }
  .volume-control {
    right: 5px;
    bottom: 23px;
    transform: scale(0.84);
    transform-origin: 50% 100%;
  }
  .power-dot {
    right: 10px;
    bottom: 10px;
  }
  .fan {
    --w: 68px;
    --h: 98px;
    --size: 46px;
    --R0: 150px;
  }
  .fan-rec {
    padding-top: 6px;
    gap: 4px;
  }
  .fan-rec .cap {
    font-size: 10.5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .record {
    animation: none !important;
  }
}
.programme.ornate .prog-date small,
.programme.bare .prog-date small {
  white-space: nowrap;
  letter-spacing: 0.12em;
}

/* =====================================================================
   Photo frames, waiting for the real photos (content.js PHOTOS)
   ===================================================================== */
.photo-frame {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 60%),
    linear-gradient(160deg, #efe4cf, #e2d3b6);
  border: 1.5px solid #b08a43;
  box-shadow:
    inset 0 0 0 5px rgba(246, 239, 225, 0.9),
    inset 0 0 0 6px rgba(176, 138, 67, 0.45),
    0 20px 40px -26px rgba(60, 30, 10, 0.55);
}
.photo-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-frame:not(.has-photo)::before {
  content: attr(data-initial);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(40px, 8vw, 84px);
  color: rgba(114, 46, 64, 0.22);
}
.photo-frame:not(.has-photo)::after {
  content: "photo to come";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14%;
  text-align: center;
  font-size: 9px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: rgba(120, 95, 60, 0.6);
}
.photo-frame.portrait {
  width: min(230px, 56vw);
  aspect-ratio: 3 / 4;
  margin: 0 auto;
  border-radius: 999px 999px 10px 10px;
}
/* Portraits are cut-outs: they stand inside the inner gold line, feet on the
   frame's floor, with headroom under the arch. */
.photo-frame.portrait img {
  inset: 13% 6px 6px;
  width: calc(100% - 12px);
  height: calc(87% - 6px);
  object-fit: contain;
  object-position: 50% 100%;
  border-radius: 0 0 5px 5px;
}
.photo-frame.together {
  width: min(560px, 88vw);
  aspect-ratio: 16 / 10;
  margin: 0 auto 30px;
  border-radius: 10px;
}
/* Full-length portraits framing the first duet from both sides (sizes and
   placement live with the duet layout below). */
.photo-frame.half {
  border-radius: 50% / 50%;
  z-index: 0;
}
.photo-frame.half.left::before {
  padding-left: 50%;
}
.photo-frame.half.right::before {
  padding-right: 50%;
}
.photo-frame.half::after {
  display: none;
}
.photo-frame.half img {
  object-fit: cover;
  object-position: 50% 50%;
}
/* the whole photo, for screens too narrow for the two halves */
.photo-frame.whole {
  display: none;
}
.duet .scene {
  position: relative;
  z-index: 1;
}

/* =====================================================================
   The first duet as a chat: typing, sent, seen, typing, reply
   ===================================================================== */
.chat > * {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.5s ease,
    transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.chat.s1 .c1,
.chat.s1 .c2,
.chat.s3 .c3,
.chat.s4 .c4,
.chat.s4 .c5 {
  opacity: 1;
  transform: none;
}
.msg {
  display: flex;
  margin: 26px max(6%, calc(50% - 360px)) 8px;
}
.msg.her {
  justify-content: flex-end;
}
.msg .bubble {
  display: none;
  margin: 0;
}
.chat.s2 .c2 .bubble,
.chat.s5 .c5 .bubble {
  display: block;
  animation: msg-pop 0.45s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.chat.s2 .c2 .typing,
.chat.s5 .c5 .typing {
  display: none;
}
@keyframes msg-pop {
  from {
    opacity: 0;
    transform: scale(0.85) translateY(10px);
  }
}
.typing {
  display: inline-flex;
  gap: 5px;
  padding: 14px 18px;
  border-radius: 20px;
  background: #efe6d4;
  border: 1px solid #dccfb8;
}
.msg.her .typing {
  background: var(--wine);
  border-color: var(--wine);
}
.typing i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(60, 40, 30, 0.45);
  animation: dot 1.1s ease-in-out infinite;
}
.msg.her .typing i {
  background: rgba(255, 240, 230, 0.75);
}
.typing i:nth-child(2) {
  animation-delay: 0.15s;
}
.typing i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes dot {
  0%,
  60%,
  100% {
    transform: none;
    opacity: 0.5;
  }
  30% {
    transform: translateY(-5px);
    opacity: 1;
  }
}
.seen {
  margin: 0 max(6%, calc(50% - 360px)) 18px;
  text-align: left;
  padding-left: 8px;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--muted);
}
.seen::after {
  content: " ✓✓";
  color: #3f7ea6;
}
.duet .narration {
  margin-top: 22px;
}

/* ---- the reprise stays still ---- */
.chapter.static .scene,
.chapter.static .scene > * {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.reprise-line {
  max-width: 680px;
  margin: 0 auto;
  font-family: var(--serif);
  font-size: clamp(23px, 2.6vw, 31px);
  line-height: 1.35;
  color: var(--ink);
}
.reprise-line em {
  color: var(--wine);
}
.reprise .bubble {
  margin-top: 40px;
}
.reprise .bubble + .bubble {
  margin-top: 46px;
}
.reprise .reprise-line + .bubble {
  margin-top: 48px;
}
.reprise .bubble + .reprise-line {
  margin-top: 40px;
}

/* ---- the mending: the two of them, and the words ---- */
.mending .mend {
  font-size: clamp(34px, 5vw, 66px);
}

/* keep the cast clear of the player in the bottom-left corner */
@media (min-width: 761px) {
  .cast .scene {
    width: min(860px, 100%);
  }
}
/* between phone and wide screens, centre the story pages in the room to the
   right of the player so nothing slides under it */
@media (min-width: 761px) and (max-width: 1439px) {
  .chapter:not(.collision) {
    padding-left: 230px;
    padding-right: 56px;
  }
  .cast .scene {
    width: 100%;
  }
}

/* ---- the first duet: a photo against each edge, the chat between them ----
   Wide screens: each photo is a half-oval the full height of the page, its
   flat side cut off by the screen edge, sized so the chat column between
   them stays at least ~420px. Narrower: one photo of the two of them with
   the tree between, above the chat. */
@media (min-width: 1001px) {
  .chapter.duet {
    --half-w: min(42svh, 360px, calc((100vw - 500px) / 2));
    --gap: 32px;
    padding-left: calc(var(--half-w) + var(--gap));
    padding-right: calc(var(--half-w) + var(--gap));
  }
  .photo-frame.half {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--half-w);
    box-shadow: 0 20px 40px -26px rgba(60, 30, 10, 0.55);
  }
  .photo-frame.half.left {
    left: 0;
    border-left: 0;
    border-radius: 0 100% 100% 0 / 0 50% 50% 0;
  }
  .photo-frame.half.left img {
    object-position: 22% 50%;
  }
  .photo-frame.half.right img {
    object-position: 72% 50%;
  }
  .photo-frame.half.right {
    right: 0;
    border-right: 0;
    border-radius: 100% 0 0 100% / 50% 0 0 50%;
  }
  .duet .bubble {
    font-size: clamp(20px, 2.1vw, 30px);
  }
}
@media (max-width: 1000px) {
  .chapter.duet {
    --chat-room: 640px; /* the chat, the gap and the page's padding */
    grid-template-columns: 1fr;
    grid-template-areas:
      "photo"
      "scene";
    align-content: center;
    gap: 34px;
    padding: 70px 20px 90px;
  }
  .photo-frame.half {
    display: none;
  }
  /* a wide frame, as big as the height left over by the chat allows */
  .photo-frame.whole {
    display: block;
    grid-area: photo;
    justify-self: center;
    width: min(100%, 560px, max(220px, (100svh - var(--chat-room)) * 4 / 3));
    aspect-ratio: 4 / 3;
    border-radius: 20px;
  }
  .photo-frame.whole img {
    object-fit: cover;
    object-position: 50% 92%;
  }
  .duet .scene {
    grid-area: scene;
    width: min(560px, 100%);
    justify-self: center;
  }
}
/* ---- the mending: the two of them as the whole page, the words above ----
   The photo fills the page edge to edge; a dusk scrim from the top keeps the
   words readable over the window and wall, and the two of them stay clear
   below. */
.chapter.mending {
  align-items: start;
  padding: clamp(56px, 9vh, 96px) 56px 90px;
  color: #f6efe1;
}
.mending::after {
  display: none;
}
.mending .photo-frame.together {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: auto;
  aspect-ratio: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #2b211a;
}
.mending .photo-frame.together img {
  object-position: 50% 62%;
}
.mending .photo-frame.together.has-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(22, 15, 10, 0.84) 0%, rgba(22, 15, 10, 0.6) 24%, rgba(22, 15, 10, 0.14) 48%, rgba(22, 15, 10, 0) 60%),
    linear-gradient(0deg, rgba(22, 15, 10, 0.4) 0%, rgba(22, 15, 10, 0) 22%);
}
.mending .scene {
  width: min(860px, 100%);
  text-shadow: 0 2px 22px rgba(10, 6, 4, 0.45);
}
.mending .track {
  color: #e2c27a;
}
.mending .mend span {
  color: #f6efe1;
}
.mending .mend span + span {
  color: #e2c27a;
}
.mending .narration {
  color: rgba(246, 239, 225, 0.9);
}
.mending .struck {
  color: #a9d6e3;
}
.mending .struck::after {
  background: #f08a5d;
}
.mending .hot {
  text-shadow: none;
}
@media (max-width: 760px) {
  .chapter.mending {
    padding: 56px 22px 90px;
  }
  .mending .photo-frame.together img {
    object-position: 50% 50%;
  }
  .mending .photo-frame.together.has-photo::after {
    background:
      linear-gradient(180deg, rgba(22, 15, 10, 0.86) 0%, rgba(22, 15, 10, 0.66) 34%, rgba(22, 15, 10, 0.12) 56%, rgba(22, 15, 10, 0) 66%),
      linear-gradient(0deg, rgba(22, 15, 10, 0.4) 0%, rgba(22, 15, 10, 0) 22%);
  }
}
/* phones: just the chat, so the reply clears the player in the corner */
@media (max-width: 760px) {
  .chapter.duet {
    grid-template-areas: "scene";
  }
  .photo-frame.whole {
    display: none;
  }
}
@media (max-width: 760px) {
  /* room under the scroll cue so the programme's last row clears the player */
  .hero {
    padding-bottom: 196px;
  }
}
@media (max-width: 760px) {
  .reprise .bubble,
  .reprise .bubble + .bubble,
  .reprise .reprise-line + .bubble,
  .reprise .bubble + .reprise-line {
    margin-top: 26px;
  }
  .reprise-line {
    font-size: 22px;
  }
}
@media (max-width: 760px) {
  /* clear the player and its two-line caption */
  .chapter {
    padding-bottom: 190px;
  }
}

.card-hint {
  display: none;
}

/* the playbill on the opening card: the raga, not the dates */
.playbill {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: calc(var(--cw) * 0.03) 0 calc(var(--cw) * 0.01);
}
.pb-lotus {
  display: block;
  width: calc(var(--cw) * 0.03);
  height: calc(var(--cw) * 0.02);
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 1C12 6 10 9 15 15c5-6 3-9 0-14zM6 7c4 1 7 4 9 8-5 0-8-3-9-8zM24 7c-4 1-7 4-9 8 5 0 8-3 9-8zM2 12c5 0 9 2 13 6-5 1-10-1-13-6zM28 12c-5 0-9 2-13 6 5 1 10-1 13-6z' fill='%23b08a43'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pb-eyebrow {
  margin-top: calc(var(--cw) * 0.012) !important;
  font-size: calc(var(--cw) * 0.0145);
  letter-spacing: 0.34em;
  color: #9a7a43;
}
.pb-raga {
  margin: calc(var(--cw) * 0.012) 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: calc(var(--cw) * 0.11);
  line-height: 1;
  letter-spacing: -0.01em;
  color: #6b2737;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7), 0 -0.6px 0 rgba(60, 10, 20, 0.28);
}
.pb-tamil {
  margin-top: calc(var(--cw) * 0.008) !important;
  font-family: var(--tamil);
  font-size: calc(var(--cw) * 0.026);
  color: #9a7a43;
}
.pb-scale {
  margin-top: calc(var(--cw) * 0.03);
  display: grid;
  gap: calc(var(--cw) * 0.012);
}
.pb-scale p {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: calc(var(--cw) * 0.016);
}
.pb-scale span {
  width: calc(var(--cw) * 0.13);
  text-align: right;
  font-size: calc(var(--cw) * 0.0125);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8a6f4c;
}
.pb-scale b {
  font-family: var(--tamil);
  font-weight: 500;
  font-size: calc(var(--cw) * 0.03);
  min-width: 1.6em;
  color: #6b2737;
}
.pb-line {
  margin-top: calc(var(--cw) * 0.03) !important;
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(var(--cw) * 0.03);
  line-height: 1.35;
  color: #4b4036;
}
.pb-kural {
  margin: calc(var(--cw) * 0.016) 0 0;
  font-family: var(--tamil);
  font-weight: 500;
  font-size: calc(var(--cw) * 0.052);
  line-height: 1.4;
  color: #6b2737;
}
.pb-en {
  margin-top: calc(var(--cw) * 0.014) !important;
}
.pb-raga-s {
  margin-top: calc(var(--cw) * 0.03) !important;
  font-size: calc(var(--cw) * 0.0125);
  letter-spacing: 0.34em;
  color: #9a7a43;
}
.pb-scale {
  margin-top: calc(var(--cw) * 0.012);
}
.pb-scale b {
  font-size: calc(var(--cw) * 0.024);
}

/* =====================================================================
   The concert bill: the title lives on the staff; the programme reads
   like a printed performance bill instead of a grid of controls.
   ===================================================================== */
.hero {
  justify-content: flex-start;
  padding-top: 48px;
}
.hero-title {
  gap: 0;
  padding-block: clamp(22px, 4vh, 48px) clamp(16px, 2vh, 28px);
}
.hero-invite {
  margin: 0 0 clamp(14px, 2.4vw, 28px);
  padding-left: 0.32em;
  font-size: clamp(10.5px, 1vw, 12.5px);
  letter-spacing: 0.32em;
  color: #7a5b26;
}
.hero-ode {
  margin: -0.1em -0.16em -0.24em;
  padding: 0.1em 0.16em 0.24em;
  font-size: clamp(44px, 13.5vw, 188px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  white-space: nowrap;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.6s cubic-bezier(0.65, 0, 0.25, 1) 0.9s;
}
body.show-page .hero-ode {
  clip-path: inset(0 0 0 0);
}
.hero-concert {
  display: flex;
  align-items: center;
  gap: 0.55em;
  margin: clamp(12px, 1.8vw, 22px) 0 0;
  font-size: clamp(22px, 2.6vw, 34px);
}
.hero-concert::before,
.hero-concert::after {
  content: "";
  width: clamp(24px, 5vw, 72px);
  height: 1px;
  background: #b08a43;
  opacity: 0.7;
}
.hero-concert.foil {
  background-image: linear-gradient(105deg, #7d5a22 0%, #a9823a 30%, #d9b86f 48%, #a9823a 66%, #7d5a22 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
}
body.show-page .hero-concert.foil {
  animation: sheen 2.6s cubic-bezier(0.4, 0, 0.2, 1) 2.3s both;
}
.hero-couple {
  margin: clamp(10px, 1.6vw, 18px) 0 0;
  padding-left: 0.14em;
  font-size: clamp(22px, 3.4vw, 46px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hero-couple em {
  margin: 0 0.12em;
  font-size: 1.25em;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gold-deep);
}
.hero-3d canvas {
  animation: staff-in 1.6s ease both;
}
@keyframes staff-in {
  from { opacity: 0; }
}

.programme.ornate {
  width: min(800px, 100%);
  margin-top: clamp(36px, 6vh, 64px);
  padding: 34px 56px 30px;
  box-shadow:
    inset 0 0 0 5px #f6efe1,
    inset 0 0 0 6px rgba(176, 138, 67, 0.55),
    0 30px 60px -40px rgba(60, 30, 10, 0.55);
}
.programme.ornate .prog-head {
  margin-bottom: 18px;
}
.programme.ornate .prog-title {
  font-size: 13px;
  letter-spacing: 0.36em;
  color: #4b3a2a;
}
.prog-day {
  grid-template-columns: 104px 1fr;
  padding: 18px 0;
}
.programme.ornate .prog-date {
  align-content: start;
  padding-top: 14px;
}
.programme.ornate .prog-date::after {
  top: 44px;
  margin-top: 0;
}
.programme.ornate .prog-date b {
  font-size: 56px;
  font-weight: 400;
}
.programme.ornate .prog-date small {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: #7a5b26;
}
.prog-item {
  grid-template-columns: 1fr;
}
.prog-info {
  gap: 4px;
}
.prog-mvt {
  margin: 0 0 4px;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #7a5b26;
}
.prog-line {
  display: grid;
  grid-template-columns: auto minmax(24px, 1fr) auto;
  align-items: baseline;
  column-gap: 14px;
}
.prog-line.no-name {
  grid-template-columns: auto;
}
.prog-name {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.05;
  color: #6b2737;
}
.prog-leader {
  height: 3px;
  transform: translateY(-0.3em);
  background: radial-gradient(circle, #b08a43 0.8px, transparent 1.3px) 0 50% / 7px 3px repeat-x;
  opacity: 0.8;
}
.programme.ornate .prog-time {
  font-style: italic;
  font-size: 20px;
  color: var(--wine);
  white-space: nowrap;
}
.programme.ornate .prog-venue {
  font-size: 17px;
  line-height: 1.35;
}
.programme.ornate .prog-acts {
  flex-wrap: wrap;
  gap: 0 24px;
  margin-top: 2px;
}
.programme.ornate .prog-act {
  min-height: 44px;
  margin-block: -6px;
  padding: 0;
  gap: 8px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  font-size: 15.5px;
  color: var(--wine);
}
.programme.ornate .prog-act svg {
  width: 15px;
  height: 15px;
  color: #a9823a;
}
.programme.ornate .prog-act span {
  text-decoration: underline 1px rgba(176, 138, 67, 0.55);
  text-underline-offset: 5px;
  transition: text-decoration-color 0.2s, text-underline-offset 0.2s;
}
.programme.ornate .prog-act:hover span {
  text-decoration-color: var(--wine);
  text-underline-offset: 3px;
}
.programme.ornate .prog-act:focus-visible {
  outline: 2px solid var(--wine);
  outline-offset: 3px;
  border-radius: 3px;
}
.prog-sep {
  background: rgba(176, 138, 67, 0.45);
  background-image: none;
}
.prog-sep.inner {
  width: 40px;
  margin: 16px 0;
  background: #b08a43;
  opacity: 0.6;
}
.prog-sep.inner::after {
  display: none;
}

@media (min-width: 761px) and (max-width: 1099px) {
  .programme.ornate { width: min(760px, 100%); }
  .hero { padding-bottom: 210px; }
}
@media (max-width: 640px) {
  .hero-title {
    padding-block: 30px 20px;
  }
  .programme.ornate {
    padding: 26px 22px 22px;
  }
  .prog-day {
    grid-template-columns: 1fr;
    padding: 14px 0;
  }
  .programme.ornate .prog-date {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 10px;
    padding: 0 0 8px;
    margin: 0 0 14px;
    border-right: 0;
    border-bottom: 1px solid rgba(176, 138, 67, 0.45);
  }
  .programme.ornate .prog-date::after {
    right: auto;
    left: 0;
    top: auto;
    bottom: -4px;
  }
  .programme.ornate .prog-date b {
    font-size: 40px;
  }
  .programme.ornate .prog-date small {
    margin-top: 0;
    text-align: left;
  }
  .prog-name {
    font-size: 25px;
  }
}
@media (max-width: 560px) {
  .prog-line {
    grid-template-columns: 1fr;
    row-gap: 2px;
  }
  .prog-leader { display: none; }
  .programme.ornate .prog-time { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-ode {
    clip-path: none;
    transition: none;
  }
  body.show-page .hero-concert.foil {
    animation: none;
    background-position: 50% 0;
  }
  .hero-3d canvas { animation: none; }
}

/* =====================================================================
   Editorial split: the opening reads like an album cover beside its
   programme insert instead of a headline stacked on top of a card.
   ===================================================================== */
.hero-title {
  position: relative;
  justify-items: start;
  width: min(100%, 540px);
  padding: 0;
  text-align: left;
}
.hero-title::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: -45vw;
  right: -16vw;
  top: 43%;
  height: 82px;
  opacity: 0.72;
  transform: rotate(-0.45deg);
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 15px,
    rgba(176, 138, 67, 0.22) 15px 16px
  );
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 78%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 78%, transparent);
  pointer-events: none;
}
.hero-title::after {
  content: "";
  position: absolute;
  left: -28px;
  top: -26px;
  width: 74px;
  height: 74px;
  border: 1px solid rgba(176, 138, 67, 0.38);
  border-radius: 50%;
  box-shadow: inset 0 0 0 10px rgba(176, 138, 67, 0.045);
  pointer-events: none;
}
.hero-invite {
  position: relative;
  z-index: 1;
  margin: 0 0 24px;
  padding: 0 0 10px;
  font-size: 10.5px;
  letter-spacing: 0.3em;
  color: #7a5b26;
  border-bottom: 1px solid rgba(176, 138, 67, 0.55);
}
.hero-ode {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0 0 0.08em;
  font-size: clamp(72px, 8vw, 128px);
  line-height: 0.73;
  letter-spacing: -0.055em;
  white-space: normal;
}
.hero-ode span {
  display: block;
  white-space: nowrap;
}
.hero-ode span + span {
  margin-left: 0.48em;
}
.hero-concert {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 32px 0 0;
  font-family: var(--sans);
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.27em;
  text-transform: uppercase;
  color: #7a5b26;
  background: none;
  -webkit-text-fill-color: currentColor;
}
.hero-concert::before {
  width: 46px;
}
.hero-concert::after {
  display: none;
}
body.show-page .hero-concert.foil {
  animation: none;
}
.hero-couple {
  margin: 12px 0 0;
  padding: 0;
  font-family: var(--serif);
  font-size: clamp(30px, 3vw, 46px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.015em;
  text-transform: none;
}
.hero-couple em {
  margin: 0 0.08em;
  font-size: 0.86em;
}

.programme.ornate {
  width: 100%;
  max-width: 840px;
  margin: 0;
  padding: 42px 50px 36px;
  border: 0;
  border-left: 3px solid var(--wine);
  border-radius: 0 14px 14px 0;
  background-color: rgba(248, 242, 231, 0.92);
  box-shadow:
    inset 1px 0 rgba(255, 255, 255, 0.9),
    0 30px 80px -48px rgba(60, 30, 10, 0.72);
}
.programme.ornate::before,
.programme.ornate::after {
  content: "";
  position: absolute;
  left: -7px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--wine);
  border-radius: 50%;
  background: #f6efe1;
}
.programme.ornate::before { top: 28px; }
.programme.ornate::after { bottom: 28px; }
.programme.ornate .orn-corner {
  display: none;
}
.programme.ornate .prog-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 13px;
  margin: 0 0 24px;
}
.programme.ornate .prog-lotus {
  width: 24px;
}
.programme.ornate .prog-title {
  padding: 0;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.34em;
  color: #3a2f27;
}
.programme.ornate .prog-title::before,
.programme.ornate .prog-title::after {
  display: none;
}
.programme.ornate .prog-day {
  grid-template-columns: 82px 1fr;
  padding: 19px 0;
}
.programme.ornate .prog-date {
  align-content: start;
  justify-items: start;
  margin: 0 24px 0 0;
  padding: 2px 24px 0 0;
  border-right: 1px solid rgba(176, 138, 67, 0.42);
}
.programme.ornate .prog-date::after {
  display: none;
}
.programme.ornate .prog-date b {
  font-size: 50px;
  line-height: 0.86;
}
.programme.ornate .prog-date small {
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.16em;
  white-space: nowrap;
}
.programme.ornate .prog-mvt {
  margin-bottom: 7px;
  font-size: 9.5px;
  letter-spacing: 0.24em;
}
.programme.ornate .prog-name {
  font-size: 31px;
}
.programme.ornate .prog-time {
  font-size: 18px;
}
.programme.ornate .prog-venue {
  font-size: 16.5px;
}
.programme.ornate .prog-acts {
  margin-top: 6px;
}
.programme.ornate .prog-sep {
  margin: 4px 0;
  background: rgba(176, 138, 67, 0.36);
}
.programme.ornate .prog-sep::after {
  left: 82px;
  background: #f6efe1;
}
.programme.ornate .prog-sep.inner {
  width: 54px;
  margin: 14px 0;
}

@media (min-width: 960px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(350px, 0.78fr) minmax(590px, 1.22fr);
    grid-template-rows: 1fr auto;
    column-gap: clamp(44px, 6vw, 104px);
    align-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: clamp(64px, 8vh, 104px) clamp(54px, 7vw, 128px) 38px;
    text-align: left;
  }
  .hero-title {
    grid-column: 1;
    align-self: center;
    transform: translateY(-10px);
  }
  .programme.ornate {
    grid-column: 2;
    align-self: center;
  }
  .hero .scroll-cue {
    grid-column: 1 / -1;
    justify-self: center;
    margin-top: 28px;
  }
}

@media (max-width: 959px) {
  .hero {
    justify-content: flex-start;
    padding-top: 74px;
  }
  .hero-title {
    justify-items: center;
    width: min(580px, 100%);
    text-align: center;
  }
  .hero-title::after {
    left: 10%;
  }
  .hero-invite {
    margin-bottom: 22px;
  }
  .hero-ode {
    font-size: clamp(62px, 15vw, 108px);
  }
  .hero-ode span + span {
    margin-left: 0.28em;
  }
  .hero-concert {
    margin-top: 26px;
  }
  .programme.ornate {
    width: min(720px, 100%);
    margin-top: 58px;
  }
}

@media (max-width: 640px) {
  .hero {
    padding-top: 56px;
  }
  .hero-title::after {
    left: 2px;
    top: -20px;
    width: 58px;
    height: 58px;
  }
  .hero-invite {
    font-size: 9px;
    letter-spacing: 0.24em;
  }
  .hero-ode {
    font-size: clamp(58px, 20vw, 88px);
  }
  .hero-couple {
    font-size: clamp(28px, 9vw, 38px);
  }
  .programme.ornate {
    margin-top: 46px;
    padding: 30px 24px 26px 28px;
    border-left-width: 2px;
  }
  .programme.ornate .prog-day {
    grid-template-columns: 1fr;
    padding: 15px 0;
  }
  .programme.ornate .prog-date {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 17px;
    padding: 0 0 10px;
    border-right: 0;
    border-bottom: 1px solid rgba(176, 138, 67, 0.4);
  }
  .programme.ornate .prog-date b {
    font-size: 38px;
  }
  .programme.ornate .prog-date small {
    margin: 0;
  }
  .programme.ornate .prog-sep::after {
    left: 50%;
  }
  .prog-line {
    grid-template-columns: 1fr;
    row-gap: 4px;
  }
  .prog-leader {
    display: none;
  }
}

/* =====================================================================
   Centred reprise: the original concert-poster composition, tightened and
   given a broader programme so the title and details feel like one piece.
   ===================================================================== */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  min-height: 100dvh;
  /* the invitation line starts about a fifth of the way down the screen
     (less the title block's own top padding) */
  padding: calc(20vh - clamp(8px, 1.5vh, 16px)) 24px 54px;
  padding-top: calc(20svh - clamp(8px, 1.5svh, 16px));
  text-align: center;
}
.hero-title {
  position: relative;
  display: grid;
  justify-items: center;
  width: 100%;
  max-width: none;
  /* a little room above the invitation, more under the names before the programme */
  padding: clamp(8px, 1.5vh, 16px) 0 clamp(96px, 17vh, 190px);
  text-align: center;
  transform: none;
}
.hero-title::before {
  display: none;
}
.hero-title::after {
  display: none;
}
.hero-invite {
  margin: 0 0 clamp(14px, 1.6vw, 22px);
  padding: 0;
  font-size: clamp(10px, 0.9vw, 12px);
  letter-spacing: 0.34em;
  border: 0;
}
.hero-ode {
  margin: -0.08em -0.12em -0.18em;
  padding: 0.08em 0.12em 0.18em;
  font-size: clamp(58px, 11.6vw, 172px);
  line-height: 0.86;
  letter-spacing: -0.045em;
  white-space: nowrap;
}
.hero-concert {
  display: flex;
  align-items: center;
  gap: 0.55em;
  margin: clamp(12px, 1.5vw, 20px) 0 0;
  font-family: var(--serif);
  font-size: clamp(19px, 2.1vw, 30px);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: #a9823a;
  background: none;
  -webkit-text-fill-color: currentColor;
}
.hero-concert::before,
.hero-concert::after {
  display: block;
  width: clamp(28px, 4vw, 58px);
}
body.show-page .hero-concert.foil {
  animation: none;
}
.hero-couple {
  margin: clamp(9px, 1.2vw, 14px) 0 0;
  padding: 0;
  font-family: var(--serif);
  font-size: clamp(30px, 4vw, 58px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: none;
}
.hero-couple em {
  margin: 0 0.1em;
  font-size: 0.84em;
}

.programme.ornate {
  width: min(980px, calc(100vw - 96px));
  max-width: 980px;
  margin: 26px auto 0;
  padding: 34px 58px 32px;
  border: 1.5px solid #b08a43;
  border-left: 1.5px solid #b08a43;
  border-radius: 2px;
  background-color: #f6efe1;
  box-shadow:
    inset 0 0 0 5px #f6efe1,
    inset 0 0 0 6px rgba(176, 138, 67, 0.55),
    0 30px 64px -42px rgba(60, 30, 10, 0.62);
}
.programme.ornate::before,
.programme.ornate::after {
  content: none;
}
.programme.ornate .orn-corner {
  display: block;
}
.programme.ornate .prog-head {
  display: grid;
  justify-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 0 18px;
}
.programme.ornate .prog-lotus {
  width: 30px;
}
.programme.ornate .prog-title {
  position: relative;
  padding: 0 20px;
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.4em;
}
.programme.ornate .prog-title::before,
.programme.ornate .prog-title::after {
  display: block;
}
.programme.ornate .prog-day {
  grid-template-columns: 106px 1fr;
  padding: 18px 0;
}
.programme.ornate .prog-date {
  align-content: start;
  justify-items: center;
  margin: 0 24px 0 0;
  padding: 13px 24px 0 0;
  border-right: 1px solid rgba(176, 138, 67, 0.5);
}
.programme.ornate .prog-date::after {
  display: block;
  top: 44px;
}
.programme.ornate .prog-date b {
  font-size: 54px;
  line-height: 1;
}
.programme.ornate .prog-date small {
  margin-top: 6px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.18em;
}
.programme.ornate .prog-mvt {
  margin-bottom: 6px;
  font-size: 9.5px;
  letter-spacing: 0.24em;
}
.programme.ornate .prog-name {
  font-size: 31px;
}
.programme.ornate .prog-time {
  font-size: 18px;
}
.programme.ornate .prog-venue {
  font-size: 16.5px;
}
.programme.ornate .prog-acts {
  margin-top: 5px;
}
.programme.ornate .prog-sep {
  margin: 5px 0;
  background: rgba(176, 138, 67, 0.42);
}
.programme.ornate .prog-sep::after {
  left: 50%;
  background: #f6efe1;
}
.programme.ornate .prog-sep.inner {
  width: 46px;
  margin: 14px 0;
}
.hero .scroll-cue {
  margin-top: 28px;
}

@media (min-width: 761px) and (max-width: 1099px) {
  .programme.ornate {
    width: min(820px, calc(100vw - 56px));
    padding-inline: 46px;
  }
}

@media (max-width: 640px) {
  .hero {
    padding: calc(16vh - 8px) 16px 196px;
    padding-top: calc(16svh - 8px);
  }
  .hero-title {
    padding: 8px 0 96px;
  }
  .hero-invite {
    font-size: 8.5px;
    letter-spacing: 0.25em;
  }
  .hero-ode {
    font-size: clamp(48px, 15.5vw, 72px);
  }
  .hero-concert {
    font-size: 19px;
  }
  .hero-couple {
    font-size: clamp(29px, 9vw, 38px);
  }
  .programme.ornate {
    width: 100%;
    margin-top: 26px;
    padding: 28px 22px 24px;
    border-left: 1.5px solid #b08a43;
    border-radius: 2px;
  }
  .programme.ornate .prog-day {
    grid-template-columns: 1fr;
    padding: 14px 0;
  }
  .programme.ornate .prog-date {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 15px;
    padding: 0 0 9px;
    border-right: 0;
    border-bottom: 1px solid rgba(176, 138, 67, 0.42);
  }
  .programme.ornate .prog-date::after {
    display: block;
    left: 0;
    right: auto;
    top: auto;
    bottom: -4px;
  }
  .programme.ornate .prog-date b {
    font-size: 39px;
  }
  .programme.ornate .prog-date small {
    margin: 0;
  }
  .programme.ornate .prog-sep::after {
    left: 50%;
  }
  .prog-line {
    grid-template-columns: 1fr;
    row-gap: 3px;
  }
  .prog-leader {
    display: none;
  }
}

/* =====================================================================
   The sign-off: mohanaragam across the very bottom of the site, as wide as
   the window, the page's edge cutting through it so only the tops show
   ===================================================================== */
.sign-off {
  overflow: hidden;
  margin: 0;
  container-type: inline-size;
  scroll-snap-align: end;
}
/* sized so the inked letters (not just the text box) run from edge to edge
   of the footer: the word's ink is about 4.54× its font size wide, and the
   italic leans it ~0.03em right of centre */
.sign-off-names {
  height: 0.7em;
  margin: 0;
  font-family: var(--serif);
  font-size: 21.6vw;
  font-size: 22cqi;
  font-weight: 500;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.055em;
  white-space: nowrap;
  text-align: center;
  color: var(--wine);
  transform: translateX(-0.029em);
}
.sign-off-names span {
  color: var(--gold-deep);
}