: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;
}

/* ---------- intro type ---------- */
.intro-top {
  position: fixed;
  z-index: 7;
  top: 26px;
  left: 32px;
  right: 32px;
  display: flex;
  justify-content: space-between;
  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;
  text-transform: uppercase;
  color: #cdb489;
  animation: rise 1.4s both 1.1s;
  transition: opacity 0.5s;
}
.intro-hint span {
  color: #8d7a5d;
}
.intro-hint i {
  display: inline-block;
  width: 26px;
  height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 12px;
  opacity: 0.6;
}
@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;
}
#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;
  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 {
  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;
  bottom: 9%;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.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: calc(var(--ew) * 0.014);
  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;
}
.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 1.2s ease,
    transform 1.4s 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;
}
body.show-page .r1 {
  transition-delay: 0.5s;
}
body.show-page .r2 {
  transition-delay: 0.75s;
}
body.show-page .r3 {
  transition-delay: 1s;
}
body.show-page .r4 {
  transition-delay: 1.35s;
}
body.show-page .r5 {
  transition-delay: 1.65s;
}
body.show-page .r6 {
  transition-delay: 1.95s;
}

@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;
  }
  .events {
    grid-template-columns: 1fr;
  }
  .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, the concert, 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 {
  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 0 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;
}

/* ---- the concert ---- */
.concert,
.faq,
.wishes {
  padding: 110px 24px;
}
.concert {
  background: linear-gradient(180deg, rgba(114, 46, 64, 0), rgba(114, 46, 64, 0.04));
}
.concert .events {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  max-width: 820px;
  margin: 0 auto;
}
.event {
  position: relative;
  padding: 26px 28px 28px;
  border: 1px solid #dacdb6;
  background: rgba(255, 252, 245, 0.6);
  text-align: left;
}
.event .side {
  font-size: 8.5px;
  letter-spacing: 2.4px;
  color: var(--muted);
}
.event .date {
  font-family: var(--serif);
  font-size: 72px;
  line-height: 1;
  color: var(--wine);
  margin: 12px 0 6px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.event .date small {
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 2.2px;
  color: var(--gold-deep);
}
.event h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 30px;
}
.event .ta {
  font-family: var(--tamil);
  font-size: 12px;
  color: var(--muted);
}
.event .venue {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.55;
}
.event .venue span {
  color: var(--muted);
  font-size: 12.5px;
}
.facts {
  list-style: none;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px dashed #d6c7ad;
  display: grid;
  gap: 6px;
  font-size: 13.5px;
  color: #4b4036;
}
.facts b {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--wine);
}

/* ---- 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);
}
.wish-wall {
  max-width: 1000px;
  margin: 40px auto 0;
  columns: 3 260px;
  column-gap: 18px;
}
.wish-note {
  break-inside: avoid;
  margin: 0 0 18px;
  padding: 20px 22px;
  background: #fffaf0;
  border: 1px solid #e3d6bf;
  box-shadow: 0 10px 20px -16px rgba(60, 30, 10, 0.45);
  rotate: var(--r, 0deg);
}
.wish-note p {
  margin: 0;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.4;
}
.wish-note span {
  display: block;
  margin-top: 12px;
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* ---- closing ---- */
.closing {
  max-width: 760px;
  margin: 0 auto;
  padding: 110px 24px 220px;
  text-align: center;
}
.thanks {
  margin: 18px 0 0;
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.35;
}
.thanks em {
  display: block;
  margin-top: 10px;
  color: var(--wine);
}
.see-you {
  margin: 22px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: #4b4036;
}
.blessing {
  display: block;
  margin-top: 30px;
  font-family: var(--tamil);
  color: var(--gold-deep);
}
.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;
  }
  .concert .events {
    grid-template-columns: 1fr;
  }
  .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;
}
#game-root {
  max-width: 920px;
  margin: 0 auto;
  min-height: 200px;
}
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));
}

/* ---------- the fan of record sleeves ---------- */
.fan {
  position: absolute;
  left: 131px;
  bottom: 120px;
  width: 0;
  height: 0;
  pointer-events: none;
}
/* an invisible catch area so the fan stays open while the pointer crosses gaps */
.deck.open .fan::before {
  content: "";
  position: absolute;
  left: -150px;
  bottom: -40px;
  width: calc(var(--R) * 1.9 + 120px);
  height: calc(var(--R) + 110px);
  pointer-events: auto;
}
.fan {
  --R: 210px;
  --size: 76px;
}
.fan-rec {
  --a: 0deg;
  position: absolute;
  left: calc(var(--size) / -2);
  bottom: calc(var(--size) / -2);
  width: var(--size);
  height: var(--size);
  padding: 0;
  border: 0;
  background: none;
  pointer-events: none;
  opacity: 0;
  transform: rotate(var(--a)) translateY(-30px) rotate(calc(var(--a) * -1)) scale(0.4);
  transition:
    transform 0.55s cubic-bezier(0.2, 0.9, 0.25, 1.15) calc(var(--i) * 28ms),
    opacity 0.3s calc(var(--i) * 28ms);
}
.deck.open .fan-rec {
  pointer-events: auto;
  opacity: 1;
  transform: rotate(var(--a)) translateY(calc(var(--R) * -1)) rotate(calc(var(--a) * -1)) rotate(calc(var(--a) * 0.12));
}
.fan-rec .sleeve-face {
  position: absolute;
  inset: 0;
  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 10px 18px -8px rgba(30, 15, 5, 0.6);
  z-index: 1;
}
.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%);
}
.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,
.fan-rec[aria-pressed="true"] .peek {
  transform: translateY(-34%);
}
.fan-rec:hover .sleeve-face,
.fan-rec:focus-visible .sleeve-face {
  transform: translateY(2px);
}
.fan-rec[aria-pressed="true"] .sleeve-face {
  box-shadow:
    0 0 0 2px var(--wine),
    0 10px 18px -8px rgba(30, 15, 5, 0.6);
}
/* title card under the hovered sleeve */
.fan-rec .tip {
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  width: 170px;
  margin-left: -85px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(255, 251, 243, 0.96);
  border: 1px solid #e0d2b8;
  box-shadow: 0 10px 18px -12px rgba(60, 30, 10, 0.5);
  text-align: center;
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.15;
  color: var(--ink);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s, transform 0.25s;
  pointer-events: none;
  z-index: 3;
}
.fan-rec .tip small {
  display: block;
  margin-top: 3px;
  font-family: var(--sans);
  font-size: 9.5px;
  color: var(--muted);
}
.fan-rec:hover .tip,
.fan-rec:focus-visible .tip {
  opacity: 1;
  transform: none;
}
.fan-rec.own .sleeve-face {
  background: repeating-linear-gradient(135deg, #f1e8d6 0 7px, #e6dac3 7px 14px);
  border: 1.5px dashed #c2ab80;
  display: grid;
  place-items: center;
  font-size: 30px;
  color: var(--wine);
}
.fan-rec.own input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 4;
}
.fan-rec.own .peek {
  display: none;
}

@media (max-width: 760px) {
  .fan {
    --R: 150px;
    --size: 58px;
    left: 84px;
    bottom: 80px;
  }
  .fan-rec .tip {
    width: 130px;
    margin-left: -65px;
    font-size: 12.5px;
  }
}
.fan {
  --R: 268px;
  --size: 72px;
}
@media (max-width: 760px) {
  .fan {
    --R: 176px;
    --size: 52px;
  }
}
/* a hand of cards: the pivot sits below the deck, so the sleeves arc gently above it */
.fan {
  --R: 560px;
  --size: 66px;
  left: 250px;
  bottom: -300px;
}
.fan-rec {
  transform: rotate(var(--a)) translateY(calc(var(--R) * -0.8)) scale(0.5);
}
.deck.open .fan-rec {
  transform: rotate(var(--a)) translateY(calc(var(--R) * -1));
}
.deck.open .fan-rec:hover,
.deck.open .fan-rec:focus-visible {
  z-index: 5;
  transform: rotate(var(--a)) translateY(calc(var(--R) * -1 - 12px)) scale(1.08);
}
.fan-rec .tip {
  top: auto;
  bottom: calc(100% + 14px);
}
.deck.open::before {
  content: "";
  position: absolute;
  left: -10px;
  bottom: 0;
  width: 580px;
  height: 360px;
}
.deck.open .fan::before {
  display: none;
}
@media (max-width: 760px) {
  .fan {
    --R: 380px;
    --size: 46px;
    left: 190px;
    bottom: -220px;
  }
  .deck.open::before {
    width: 380px;
    height: 250px;
  }
  .fan-rec .tip {
    font-size: 12px;
  }
}

/* =====================================================================
   Tracks as full pages, handed over by scroll-driven animation
   ===================================================================== */
#page {
  scroll-snap-type: y proximity;
}
.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;
}
.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 50% 46% at 50% 50%, rgba(243, 238, 229, 0.92), rgba(243, 238, 229, 0.6) 55%, rgba(243, 238, 229, 0) 100%);
}
.sky-where {
  margin: 14px 0 0;
  font-size: 9.5px;
  letter-spacing: 2.6px;
  color: var(--muted);
}
.sky-note {
  color: #5b5148;
}

/* =====================================================================
   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;
}
.fan {
  left: 290px;
  bottom: -300px;
}
.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;
  }
  .fan {
    left: 150px;
    bottom: -240px;
  }
}
/* the deck must stay clickable above the fan's invisible catch area */
.deck-3d {
  position: relative;
  z-index: 1;
}
.fan {
  z-index: 2;
}

/* 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;
}
.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;
}
.env-for {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(var(--ew) * 0.03);
  color: #6b2737;
  margin-top: calc(var(--ew) * 0.012);
}
@media (max-width: 640px) {
  .sky-caption {
    bottom: 46px;
    font-size: 12px;
    padding: 0 24px;
  }
  .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,
.event-acts,
.prog-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.prog-foot {
  padding-top: 12px;
  border-top: 1px dashed #dccdb2;
}
.event-acts {
  margin-top: 16px;
}
.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, Encore
   ===================================================================== */
.rsvp,
.backstage,
.encore {
  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,
.encore-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 1000px;
  margin: 0 auto;
}
.encore-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 820px;
}
.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;
}
.qr svg {
  width: 120px;
  height: 120px;
  margin-top: 14px;
  background: #fff;
  border-radius: 6px;
}
@media (max-width: 860px) {
  .pass-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .pass-grid,
  .encore-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;
}
.wish-star {
  position: absolute;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  padding: 0;
  border: 0;
  background: none;
  pointer-events: auto;
  cursor: pointer;
}
.wish-star::before {
  content: "";
  position: absolute;
  inset: 5px;
  background: #c9a55a;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  animation: twinkle var(--tw, 3s) ease-in-out infinite;
}
.wish-star.mine::before {
  background: var(--wine);
  inset: 1px;
}
.wish-star:hover::before,
.wish-star:focus-visible::before {
  transform: scale(1.4);
}
@keyframes twinkle {
  50% {
    opacity: 0.45;
    transform: scale(0.8) rotate(20deg);
  }
}
.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);
  }
}

/* =====================================================================
   Five hidden swaras, their tracker and the note they unlock
   ===================================================================== */
.swara-gem {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 10px auto 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  font-family: var(--tamil);
  font-size: 15px;
  color: rgba(169, 130, 58, 0.55);
  cursor: pointer;
  animation: gem 4s ease-in-out infinite;
  transition: color 0.3s, transform 0.3s;
}
.swara-gem:hover {
  color: var(--gold-deep);
  transform: scale(1.2);
}
.swara-gem.found {
  color: var(--wine);
  animation: none;
}
.swara-gem.ping {
  animation: ping 0.9s ease-out;
}
@keyframes gem {
  50% {
    color: rgba(201, 165, 90, 0.95);
    text-shadow: 0 0 10px rgba(240, 200, 120, 0.8);
  }
}
@keyframes ping {
  30% {
    transform: scale(1.7) rotate(-8deg);
    color: var(--gold);
  }
}
.swara-tracker {
  position: fixed;
  z-index: 12;
  right: 18px;
  bottom: 18px;
  display: grid;
  gap: 4px;
  justify-items: end;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255, 251, 243, 0.9);
  border: 1px solid #e0d2b8;
  cursor: pointer;
}
body:not(.show-page) .swara-tracker {
  display: none;
}
.st-label {
  font-size: 8.5px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--muted);
}
.st-notes {
  display: flex;
  gap: 8px;
  font-family: var(--tamil);
  font-size: 15px;
}
.st-notes i {
  font-style: normal;
  color: rgba(120, 100, 70, 0.3);
  transition: color 0.4s, transform 0.4s;
}
.st-notes i.on {
  color: var(--wine);
  transform: translateY(-2px);
}
.secret {
  max-width: 440px;
  padding: 34px 32px 28px;
  border: 1px solid #e0d2b8;
  border-radius: 8px;
  background: #fffaf0 var(--paper-tex);
  background-size: 340px 340px;
  text-align: center;
  color: var(--ink);
}
.secret::backdrop {
  background: rgba(30, 20, 15, 0.45);
  backdrop-filter: blur(3px);
}
.secret h2 {
  margin: 10px 0 12px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 32px;
  color: var(--wine);
}
.secret p {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.45;
}
.secret .eyebrow {
  font-family: var(--tamil);
  letter-spacing: 6px;
}

/* =====================================================================
   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;
}
.tip-note {
  margin-top: 5px;
  font-style: italic;
  color: var(--wine) !important;
}
.swara-tracker[hidden] {
  display: none;
}

/* ---- 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;
}

/* ---- reply and wish, side by side on one page ---- */
.audience {
  padding: 110px 24px;
}
.audience-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 1040px;
  margin: 0 auto;
  align-items: stretch;
}
.audience-grid .rsvp-card,
.audience-grid .wish-form {
  max-width: none;
  margin: 0;
  padding: 26px 26px 28px;
  align-content: start;
}
.audience-grid .rsvp-card {
  grid-template-columns: 1fr auto;
}
.card-title {
  grid-column: 1 / -1;
  margin: 0 0 4px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 28px;
  color: var(--ink);
}
.card-title small {
  display: block;
  margin-top: 4px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 12px;
  color: var(--muted);
}
@media (max-width: 860px) {
  .audience-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .audience-grid .rsvp-card {
    grid-template-columns: 1fr;
  }
}
.hero-3d {
  overflow: hidden;
}
.hero-3d canvas {
  width: 100% !important;
  height: 100% !important;
}
.names {
  font-size: clamp(40px, 11vw, 132px);
}