.storybook {
  --story-gold: #e8c992;
  --story-text: #f8ecd8;
  background: radial-gradient(ellipse at 49% 0%, #2b2344 0%, #15172b 32%, #111427 100%);
  color: var(--story-text);
  padding: clamp(72px, 10vw, 138px) max(22px, calc((100vw - 1160px) / 2)) clamp(52px, 9vw, 110px);
  overflow: hidden;
}
.story-beat {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: center;
  min-height: clamp(350px, 65svh, 690px);
  padding: clamp(60px, 9vw, 128px) 0;
  text-align: center;
}
.story-beat::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 17% 25%, #f6dbaf95 0 1px, transparent 2px),
    radial-gradient(circle at 27% 71%, #f6dbaf70 0 1px, transparent 2px),
    radial-gradient(circle at 80% 60%, #f6dbaf70 0 1px, transparent 2px),
    radial-gradient(circle at 88% 28%, #f6dbaf95 0 1px, transparent 2px),
    radial-gradient(ellipse at 50% 48%, var(--beat-glow, #9872b93e), transparent 64%);
}
.story-beat--date {
  --beat-glow: #e1a46c62;
  min-height: clamp(465px, 83svh, 770px);
  border-top: 1px solid #e3c78e35;
}
.story-beat .date-countdown { margin: 0 0 clamp(22px, 5vw, 42px); }
.date-countdown .beat-lead { margin-bottom: 9px; }
.date-count {
  display: inline-flex;
  align-items: baseline;
  gap: .075em;
  color: #f3c88e;
  font: 500 clamp(76px, 15vw, 164px)/.83 var(--serif);
  font-variant-numeric: lining-nums;
  letter-spacing: -.055em;
}
.date-count em { font-size: .40em; letter-spacing: -.045em; }
.date-digits { display: inline-flex; perspective: 350px; }
.date-digits > span { display: block; transform-origin: center 72%; }
.story-beat--date.visible .date-digits > span {
  animation: date-digit .92s var(--digit-delay, .12s) cubic-bezier(.19,.72,.24,1) both;
}
.date-digits > span:nth-child(2) { --digit-delay: .28s; }
.date-digits > span:nth-child(3) { --digit-delay: .44s; }
.story-beat--date.visible .date-count em { animation: date-line .48s .65s ease-out both; }
@keyframes date-digit {
  0% { opacity: 0; transform: translateY(.36em) rotateX(-78deg); }
  58% { opacity: 1; color: #fff4d6; text-shadow: 0 0 .32em #f8bd75; }
  77% { transform: translateY(-.075em) rotateX(9deg); }
  100% { opacity: 1; transform: none; }
}
.story-beat .date-title {
  color: #fff3df;
  font: 500 clamp(45px, 9vw, 116px)/.87 var(--serif);
  letter-spacing: -.052em;
  text-shadow: 0 4px 34px #151223c7;
}
.date-title em { display: inline-block; margin-top: .11em; color: #ffe2b5; }
.story-beat--date.visible .date-title { animation: date-line .85s 1.03s cubic-bezier(.18,.72,.26,1) both; }
.story-beat--date.visible .date-title em { animation: date-title-glow 1.35s 1.1s ease-out both; }
@keyframes date-line {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@keyframes date-title-glow {
  45% { color: #fff5e2; text-shadow: 0 0 .48em #ffd38d77; }
}
.date-orbit {
  position: absolute;
  inset: calc(50% - clamp(92px, 17svh, 152px)) auto auto 50%;
  transform: translate(-50%, -50%);
  width: min(105%, 1080px);
  z-index: -1;
  overflow: visible;
  pointer-events: none;
}
.date-orbit-fine, .date-orbit-sweep { fill: none; }
.date-orbit-fine { stroke: #f3bf8942; stroke-width: 1; }
.date-orbit-sweep {
  stroke: #ffda99;
  stroke-width: 1.6;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 6px #ffb469);
}
.date-sparks { opacity: 0; color: #ffe8b2; filter: drop-shadow(0 0 8px #fbbc78); }
.story-beat--date.visible .date-orbit-sweep { animation: beat-trace 1.65s .12s cubic-bezier(.25,.65,.24,1) forwards; }
.story-beat--date.visible .date-sparks { animation: date-sparkle 1.35s .8s ease-out forwards; }
@keyframes date-sparkle { 0% { opacity: 0; } 38% { opacity: 1; } 100% { opacity: .76; } }
.date-itinerary { text-align: center; }
.date-itinerary-copy {
  max-width: 45ch;
  margin: 0 auto clamp(23px, 4vw, 48px);
  color: #f8e9d8;
  font-size: clamp(16px, 2vw, 21px);
  line-height: 1.65;
}
.date-itinerary-copy span { color: var(--story-gold); }
.date-scenes {
  --route-gap: clamp(26px, 5vw, 66px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--route-gap);
  position: relative;
  padding: clamp(12px, 2vw, 26px);
  border-block: 1px solid #e8c99242;
  background: linear-gradient(115deg, #26224880, #48324257);
}
.date-scene { min-width: 0; margin: 0; position: relative; }
.date-scene .date-stage { aspect-ratio: 1.45; }
.date-scene figcaption { margin-top: 12px; color: #f6dcae; font: 500 clamp(20px, 3vw, 34px)/1.1 var(--serif); }
.date-stage[data-scene="bowling"] {
  background: radial-gradient(ellipse at 53% 37%, #392864 0, #202849 53%, #11152e 100%);
}
.date-stage[data-scene="coast"] {
  background: radial-gradient(ellipse at 35% 25%, #a6606b 0, #5a4c66 36%, #20344c 73%, #151e34 100%);
}
.date-connection {
  position: absolute;
  z-index: 1;
  inset: 45% auto auto 50%;
  transform: translate(-50%, -50%);
  color: var(--story-gold);
  font-size: clamp(20px, 3vw, 34px);
  text-shadow: 0 0 14px #ffd39a;
  pointer-events: none;
}
.story-beat h2 { margin: 0; }
.beat-lead {
  display: block;
  margin-bottom: 12px;
  font: 600 clamp(12px, 1.7vw, 16px)/1.3 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
}
.beat-count {
  display: block;
  color: #ffe4b8;
  font: 500 clamp(91px, 18vw, 232px)/.79 var(--serif);
  letter-spacing: -.065em;
  white-space: nowrap;
  text-shadow: 0 0 .27em #ffba6636;
}
.beat-count em { font-size: .52em; letter-spacing: -.05em; }
.story-beat p { margin: clamp(24px, 4vw, 43px) 0 0; font-size: clamp(15px, 2.2vw, 21px); line-height: 1.6; }
.story-beat time { margin-top: 10px; color: var(--story-gold); font-size: 12px; }
.beat-trail {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: -1;
  width: min(94%, 740px);
  height: auto;
  transform: translate(-50%, -50%);
  overflow: visible;
  pointer-events: none;
}
.beat-trail path:first-child { fill: none; stroke: #e8c99275; stroke-width: 1.1; stroke-dasharray: 1; stroke-dashoffset: 1; }
.beat-trail .beat-star { fill: #ffe9bf; opacity: 0; filter: drop-shadow(0 0 6px #f9cf7d); }
.story-beat.visible .beat-trail path:first-child { animation: beat-trace 1.25s .18s cubic-bezier(.24,.65,.32,1) forwards; }
.story-beat.visible .beat-star { animation: beat-light .75s .78s ease-out forwards; }
.story-beat.visible .beat-count { animation: beat-arrive 1s cubic-bezier(.18,.72,.28,1) both; }
@keyframes beat-trace { to { stroke-dashoffset: 0; } }
@keyframes beat-light { to { opacity: .86; } }
@keyframes beat-arrive { from { opacity: .15; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }
.story-pause h2 { margin: 18px 0; font: 500 clamp(56px, 9vw, 112px)/.91 var(--serif); letter-spacing: -.04em; }
.story-pause h2 em { color: #edce99; font-weight: 500; }
.story-pause .pause-copy > p:last-child { color: #ddd0cf; font-size: clamp(14px, 2vw, 18px); line-height: 1.65; }
.story-chapter {
  display: grid;
  grid-template-columns: minmax(0, .76fr) minmax(0, 1.24fr);
  gap: clamp(32px, 6vw, 94px);
  align-items: center;
  border-top: 1px solid #e3c78e35;
  padding: clamp(30px, 6vw, 68px) 0;
}
.story-chapter:nth-of-type(even) { grid-template-columns: minmax(0, 1.24fr) minmax(0, .76fr); }
.story-chapter:nth-of-type(even) .chapter-illustration { grid-column: 1; grid-row: 1; }
.story-chapter:nth-of-type(even) .chapter-copy { grid-column: 2; grid-row: 1; }
.chapter-copy .eyebrow { color: var(--story-gold); margin: 0 0 11px; }
.chapter-copy h3 {
  font: 500 clamp(42px, 5vw, 68px)/.94 var(--serif);
  letter-spacing: -.035em;
  margin: 0 0 17px;
}
.chapter-copy > p:not(.eyebrow) { color: #dcd2d6; max-width: 36ch; font-size: 15px; line-height: 1.76; }
.chapter-photo {
  display: block;
  width: min(176px, 65%);
  margin: 23px 0 0;
  padding: 5px 5px 6px;
  background: #e9d8bc;
  color: #3f3543;
  transform: rotate(-3deg);
  box-shadow: 0 9px 24px #0b081a77;
}
.chapter-photo img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; display: block; }
#la-salle .chapter-photo img { aspect-ratio: auto; }
.chapter-photo figcaption { padding: 6px 5px 1px; font-size: 10px; }
.chapter-illustration {
  position: relative;
  margin: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 1.45;
  isolation: isolate;
  border: 1px solid #e4c38d42;
  border-radius: 3px;
  background: radial-gradient(ellipse at 50% 48%, var(--scene-mid, #42334d) 0%, var(--scene-edge, #1b203a) 68%, #111325 100%);
  box-shadow: inset 0 0 55px #0809197d, 0 17px 40px #090a1970;
}
.chapter-illustration::after { content: ''; position: absolute; inset: 9px; border: 1px solid #edce9b32; pointer-events: none; }
.chapter-illustration canvas { width: 100%; height: 100%; position: absolute; inset: 0; }
.chapter-placeholder { color: #ead09f; font-size: 36px; }
.chapter-illustration.is-rendered .chapter-placeholder { visibility: hidden; }
.chapter-illustration[data-scene="school"] { --scene-mid: #62464a; --scene-edge: #242139; }
.story-pause {
  display: grid;
  min-height: 100svh;
  place-items: center;
  padding: 60px 20px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  color: #fff4df;
  background: radial-gradient(ellipse at 50% 48%, #30223f 0%, #1a192d 47%, #101425 80%);
}
.pause-copy { z-index: 1; }
.pause-copy .eyebrow { color: #eacb9c; }
.pause-stars { position: absolute; inset: 0; pointer-events: none; }
.pause-stars span { position: absolute; color: #e2c399; opacity: .46; }
.pause-stars span:nth-child(1) { top: 24%; left: 31%; }
.pause-stars span:nth-child(2) { top: 71%; left: 37%; }
.pause-stars span:nth-child(3) { top: 36%; right: 29%; }
.music.needs-play { border-color: #e9c992; }
.cork-intro { max-width: 560px; margin: 0 auto clamp(28px, 6vw, 65px); text-align: center; }
.cork-intro > span { display: inline-block; color: #96754d; font-size: 24px; }
.cork-intro h2 { margin: 12px 0 15px; }
.cork-intro p { max-width: 37ch; margin: auto; color: #63504e; font-size: clamp(15px, 1.6vw, 18px); line-height: 1.65; }
#recuerdos .cork-collection { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fourth-cork {
  padding: clamp(42px, 8vw, 106px) 24px;
  overflow: hidden;
  color: #fff2de;
  background: radial-gradient(ellipse at 34% 50%, #463353 0%, #231c35 46%, #121627 90%);
}
.fourth-cork-inner {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  gap: clamp(30px, 6vw, 90px);
  max-width: 970px;
  margin: auto;
}
.fourth-cork-art {
  display: grid;
  position: relative;
  isolation: isolate;
  place-items: center;
  margin: auto;
  width: min(100%, 330px);
  aspect-ratio: 1;
  background: radial-gradient(circle, #dcaa6239, transparent 60%);
}
.fourth-orbit {
  position: absolute;
  inset: 9%;
  border: 1px solid #e5c58c65;
  border-radius: 50%;
  transform: rotate(-27deg) scaleY(.57);
}
.fourth-orbit:nth-child(2) { transform: rotate(32deg) scaleY(.70); border-color: #e5c58c35; }
.fourth-spark { position: absolute; color: #ffe1a4; text-shadow: 0 0 16px #ffca80; }
.fourth-spark:nth-of-type(1) { left: 13%; top: 54%; }
.fourth-spark:nth-of-type(2) { right: 13%; top: 31%; font-size: 30px; }
.fourth-spark:nth-of-type(3) { right: 22%; bottom: 21%; font-size: 10px; }
.fourth-cork-shape {
  transform: rotate(13deg);
  color: #3f263b;
  font: 500 68px/1 var(--serif);
  box-shadow: 0 12px 45px #160d2e8c, 0 0 33px #ffc78045;
}
.fourth-cork-inner.visible .fourth-cork-shape { animation: fourth-float 4s ease-in-out infinite; }
@keyframes fourth-float { 50% { transform: translateY(-10px) rotate(7deg); } }
.fourth-cork-copy h2 { margin: 0 0 20px; font-size: clamp(50px, 7vw, 99px); line-height: .9; }
.fourth-cork-copy h2 em { color: #f5d39f; }
.fourth-cork-copy p { max-width: 32ch; color: #f2e1d5; font-size: clamp(16px, 2vw, 20px); line-height: 1.6; }
.fourth-next { margin-top: 10px; }
@media (max-width: 700px) {
  .story-chapter,
  .story-chapter:nth-of-type(even) { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .story-chapter:nth-of-type(even) .chapter-copy,
  .story-chapter:nth-of-type(even) .chapter-illustration { grid-column: auto; grid-row: auto; }
  .chapter-copy > p:not(.eyebrow) { max-width: 42ch; }
  .chapter-photo { margin-top: 16px; width: 142px; }
  .date-scenes { grid-template-columns: 1fr; gap: 0; }
  .date-scene .date-stage { aspect-ratio: 1.20; }
  .date-connection { position: static; transform: rotate(90deg); justify-self: center; padding: 8px 0; }
  #recuerdos .cork-collection { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #recuerdos .memory:last-child { grid-column: 1 / -1; }
  .fourth-cork-inner { grid-template-columns: 1fr; gap: 8px; text-align: center; }
  .fourth-cork-art { width: min(66vw, 255px); }
  .fourth-cork-copy p { margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .story-beat.visible .beat-count,
  .story-beat.visible .beat-trail path { animation: none; }
  .beat-trail path:first-child { stroke-dashoffset: 0; }
  .beat-trail .beat-star { opacity: .86; }
  .story-beat--date.visible .date-orbit-sweep,
  .story-beat--date.visible .date-sparks,
  .story-beat--date.visible .date-digits > span,
  .story-beat--date.visible .date-count em,
  .story-beat--date.visible .date-title,
  .story-beat--date.visible .date-title em { animation: none; }
  .date-orbit-sweep { stroke-dashoffset: 0; }
  .date-sparks { opacity: .76; }
  .fourth-cork-inner.visible .fourth-cork-shape { animation: none; }
}