:root {
  color-scheme: light;
  --paper: #f6f3eb;
  --ink: #354342;
  --muted: #65716b;
  --blue: #60839a;
  --line: #d7dcd3;
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
body { margin: 0; }

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: .16;
  background: url('./assets/paper.svg') repeat;
}

.page {
  max-width: 1760px;
  min-height: 100svh;
  margin-inline: auto;
  padding: 34px clamp(48px, 6vw, 112px) 24px;
  display: flex;
  flex-direction: column;
}

.page-header, .page-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.page-header { position: relative; z-index: 1; }
.dedication, .eyebrow, .story-cue, .chapter-number {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .19em;
  line-height: 1.6;
}
.dedication { display: flex; align-items: center; gap: 13px; color: #54645f; }
.dedication img { flex-shrink: 0; }
.edition { color: var(--muted); font-style: italic; font-size: 14px; }
.introduction-wrap { position: relative; flex: 1; min-height: 0; }
.introduction {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: clamp(24px, 4vw, 76px);
  width: 100%;
  max-width: 1260px;
  margin: 0 auto;
  padding: 22px 0 30px;
}
.introduction-copy { padding-left: clamp(12px, 2vw, 34px); }
.eyebrow { display: flex; align-items: center; gap: 12px; color: var(--muted); margin: 0 0 27px; }
.eyebrow span { width: 25px; height: 1px; background: #a7b7b2; flex-shrink: 0; }
h1 { font-weight: 400; font-size: clamp(68px, 6.7vw, 106px); letter-spacing: -.055em; line-height: 1.04; margin: 0; }
h1 em { color: var(--blue); font-weight: 400; }
.message { font-size: clamp(16px, 1.35vw, 20px); color: var(--muted); line-height: 1.8; margin: 29px 0 0; }
.handwritten { font-size: 20px; font-style: italic; color: #58798b; margin: 25px 0 0; }
.locket-portrait { margin: 0; position: relative; display: flex; align-items: center; flex-direction: column; isolation: isolate; }
.portrait-halo {
  position: absolute;
  width: 100%;
  height: 77%;
  top: 14%;
  z-index: -1;
  border-radius: 49% 51% 45% 55% / 53% 46% 54% 47%;
  background: radial-gradient(ellipse at 48% 55%, #dfe7e4 0%, #e8ebe2 48%, #eff0e7 68%, transparent 73%);
  opacity: .85;
}
.locket { display: block; width: min(100%, 400px); height: clamp(450px, 65vh, 640px); object-fit: contain; }
svg.locket { overflow: visible; }
.sparkle { position: absolute; color: #a5b4aa; font-size: 30px; font-weight: 400; }
.sparkle-one { left: 15%; top: 32%; }
.sparkle-two { right: 13%; top: 61%; font-size: 22px; }
figcaption { color: var(--muted); font-size: 15px; font-style: italic; text-align: center; margin-top: 6px; line-height: 1.5; }
figcaption > span { display: block; width: 1px; height: 24px; background: #c2cec4; margin: 0 auto 15px; }
.page-footer { color: var(--muted); margin-top: 12px; }
.story-cue { display: flex; align-items: center; gap: 14px; margin: 0; font-size: 9px; }
.cue-line { height: 26px; width: 1px; background: linear-gradient(#9bafa7, #d4dcd3); }
.chapter-number { display: flex; align-items: center; gap: 16px; font-size: 11px; }
.chapter-rule { width: 48px; height: 1px; background: var(--line); }

a.story-cue { color: inherit; text-decoration: none; width: fit-content; }
a.story-cue:hover { color: var(--blue); }
.cue-arrow { font-size: 18px; letter-spacing: 0; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 7px; }

/* One pinned stage: the landing text and the note share a grid row while
   the original illustration travels from the right column to the left. */
.story-scene { position: relative; }
.introduction-copy { grid-column: 1; grid-row: 1; }
.locket-portrait { grid-column: 2; grid-row: 1; }
figcaption > .caption-words { display: inline; width: auto; height: auto; background: none; margin: 0; }
.opening-copy { grid-column: 1 / -1; grid-row: 2; width: 100%; max-width: 620px; margin: 80px auto 40px; }
.opening-copy h2 { font-weight: 400; font-size: clamp(42px, 4.1vw, 66px); letter-spacing: -.045em; line-height: 1.13; margin: 0; }
.opening-copy h2 em { color: var(--blue); font-weight: 400; }
.opening-note { margin-top: 28px; color: var(--muted); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.85; }
.opening-note > p { margin: 0 0 19px; }
.opening-note > .handwritten { margin: 30px 0 0; font-size: 20px; }
.has-story-motion { min-height: calc(100svh + var(--story-travel)); }
.has-story-motion .page { position: sticky; top: 0; height: 100svh; min-height: 0; }
.has-story-motion .introduction {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%) scale(var(--intro-scale, 1));
  transform-origin: center;
}
.has-story-motion .locket-portrait { z-index: 2; pointer-events: none; }
.has-story-motion .memories {
  position: absolute;
  inset: 0;
  padding: 0;
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.has-story-motion .memories-composition {
  flex-shrink: 0;
  width: 100%;
  max-width: 1080px;
  transform: scale(var(--memory-scale, 1));
  transform-origin: center;
}
.has-story-motion .memories-heading > img { opacity: 0; }
.has-story-motion .memories-eyebrow { margin-bottom: 28px; }
.has-story-motion .memories-signoff { margin-top: 30px; }
.has-story-motion .memory-circle { gap: 22px 30px; }
.has-story-motion .memory-card { transition: none; }
.has-story-motion .portrait-halo { will-change: opacity; }
.has-story-motion .opening-copy { grid-column: 2; grid-row: 1; max-width: none; margin: 0; }
.has-story-motion .locket-portrait { will-change: transform; }
/* Fallback text flows after the introduction when motion is reduced or JS
   is unavailable. Desktop height changes keep the pinned timeline. */

/* Desktop layout remains two columns. Allow natural page scrolling at high zoom
   or in short windows rather than clipping the story to the viewport. */
@media (max-width: 1100px) {
  .page { padding-inline: 44px; }
  .introduction-copy { padding-left: 0; }
  .introduction { gap: 20px; }
  .dedication { letter-spacing: .13em; }
}

/* The collage uses the same viewport as the locket. Its unscaled layout also
   serves as a readable normal-flow fallback when motion is reduced. */
.memories {
  max-width: 1516px;
  margin-inline: auto;
  padding: 90px clamp(44px, 6vw, 112px) 32px;
}
.memories-eyebrow { justify-content: center; margin-bottom: 52px; }
.memory-circle {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  align-items: center;
  gap: 28px clamp(20px, 2.6vw, 40px);
  max-width: 1180px;
  margin-inline: auto;
}
.memories-heading { grid-column: 2 / 4; grid-row: 2; text-align: center; padding: 12px 0; }
.memories-heading > img { display: block; margin: 0 auto 18px; }
.memories-heading h2 { font-size: clamp(32px, 3.5vw, 51px); font-weight: 400; line-height: 1.15; letter-spacing: -.045em; margin: 0; }
.memories-heading h2 em { color: var(--blue); font-weight: 400; }
.memories-heading p { color: var(--muted); font-size: 17px; line-height: 1.7; margin: 18px 0 0; }
.memory-card { margin: 0; min-width: 0; }
.memory-print { padding: 10px 10px 15px; background: #fffdf6; border: 1px solid #e5e4d9; box-shadow: 0 5px 15px #48574e0b; transform: rotate(var(--tilt)); }
.memory-image { position: relative; aspect-ratio: 4 / 3; background: var(--photo-paper); }
.memory-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.placeholder-label { position: absolute; top: 63%; left: 0; width: 100%; text-align: center; font: 9px/1.5 'Helvetica Neue', Arial, sans-serif; letter-spacing: .18em; color: #607674; }
.memory-card figcaption { font-size: clamp(13px, 1.2vw, 16px); line-height: 1.5; margin: 13px 0 0; padding-inline: 2px; text-wrap: pretty; }
.memory-one { grid-column: 2; grid-row: 1; --tilt: -5deg; --photo-paper: #dce7e5; }
.memory-two { grid-column: 3; grid-row: 1; --tilt: 4deg; --photo-paper: #e9e3d7; }
.memory-three { grid-column: 4; grid-row: 2; --tilt: 5deg; --photo-paper: #e1e6dc; }
.memory-four { grid-column: 3; grid-row: 3; --tilt: -3deg; --photo-paper: #e8ded8; }
.memory-five { grid-column: 2; grid-row: 3; --tilt: 4deg; --photo-paper: #e0e5eb; }
.memory-six { grid-column: 1; grid-row: 2; --tilt: -4deg; --photo-paper: #e8e7d9; }
.memories-signoff { margin: 52px 0 0; text-align: center; font-size: 17px; }


/* The fourth chapter shares the stage; the original flowers move to its arc. */
.reflection { padding: 80px 0; }
.reflection-composition { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: clamp(30px, 5vw, 80px); max-width: 1120px; width: 100%; margin-inline: auto; }
.reflection-copy h2 { font-size: clamp(48px, 4.8vw, 76px); line-height: 1.09; letter-spacing: -.045em; font-weight: 400; margin: 0; }
.reflection-copy h2 em { color: var(--blue); font-weight: 400; }
.reflection-note { color: var(--muted); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.85; margin-top: 28px; }
.reflection-note > p { margin: 0 0 20px; }
.reflection-note > .handwritten { margin: 28px 0 0; font-size: 20px; }
.reflection-garden { position: relative; height: clamp(360px, 55vh, 520px); }
.reflection-garden > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.reflection-wash { position: absolute; inset: 8% -4%; border-radius: 50%; background: radial-gradient(ellipse, #e3e9df90, transparent 70%); }
.reflection-static-flower { position: absolute; left: 72%; top: 46%; }
.has-story-motion .reflection { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0; pointer-events: none; }
.has-story-motion .reflection-composition { flex-shrink: 0; transform: scale(var(--reflection-scale, 1)); transform-origin: center; }
.has-story-motion .reflection-static-flower { opacity: 0; }


.closing { padding: 90px 0; text-align: center; }
.closing-composition { max-width: 850px; width: 100%; margin-inline: auto; }
.closing-flower { display: block; margin: 0 auto 26px; }
.closing-eyebrow { justify-content: center; margin-bottom: 26px; }
.closing h2 { margin: 0; font-weight: 400; font-size: clamp(56px, 5.6vw, 88px); line-height: 1.08; letter-spacing: -.05em; }
.closing h2 em { color: var(--blue); font-weight: 400; }
.closing-note { color: var(--muted); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.85; margin: 30px auto 0; }
.closing-note:empty, .closing-signature:empty { display: none; }
.closing-signature { color: var(--muted); font-size: 15px; line-height: 1.8; margin: 34px 0 0; }
.closing-signature em { color: var(--ink); font-size: 21px; }
.has-story-motion .closing { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0; pointer-events: none; }
.has-story-motion .closing-composition { flex-shrink: 0; transform: scale(var(--closing-scale, 1)); transform-origin: center; }
.has-story-motion .closing-flower { opacity: 0; }

/* Quiet details share the same blue/silver palette and leave the text still. */
.chapter-number { gap: 9px; font-variant-numeric: tabular-nums; }
.chapter-rule { position: relative; width: 96px; margin-right: 9px; overflow: hidden; }
.story-progress { position: absolute; inset: 0; background: var(--blue); transform: scaleX(0); transform-origin: left center; }
.chapter-total { color: #78857d; font-size: 9px; letter-spacing: .12em; }
.story-scene:not(.has-story-motion) .chapter-number { display: none; }
.story-cue { min-height: 32px; }
.story-cue .cue-arrow { display: inline-block; transition: transform .25s ease; }
.story-cue:hover .cue-arrow { transform: translateY(3px); }
.story-cue[href="#story"]:hover .cue-arrow { transform: translateY(-3px); }
.memory-print { transition: transform .3s ease, box-shadow .3s ease; }
.memories:not([inert]) .memory-print { pointer-events: auto; }
.memory-print:hover { transform: translateY(-4px) rotate(calc(var(--tilt) * .6)); box-shadow: 0 10px 24px #48574e14; }
.has-story-motion .sparkle { animation: quiet-glint 6s ease-in-out infinite; }
.has-story-motion .sparkle-two { animation-delay: -3s; }
.flowers-awake .story-flower > use {
  transform-origin: 0 0;
  animation: flower-breeze 7s ease-in-out infinite;
  animation-delay: var(--bloom-delay, 0s);
}
.is-paused .story-flower > use, .is-paused .sparkle { animation-play-state: paused; }
@keyframes flower-breeze {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-1.5px) rotate(1.5deg); }
}
@keyframes quiet-glint {
  0%, 100% { transform: scale(.9) rotate(-5deg); }
  50% { transform: scale(1.05) rotate(5deg); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* The invitation is visible before scripts run; the story starts after entry. */
[hidden] { display: none !important; }
body.entry-locked { overflow: hidden; }
.entry-locked #gift-story { visibility: hidden; pointer-events: none; }
.entry-locked .story-scene * { animation-play-state: paused !important; }
.entry {
  position: fixed;
  inset: 0;
  z-index: 10;
  overflow: auto;
  display: grid;
  place-items: center;
  padding: 40px 24px;
  background: radial-gradient(ellipse at 50% 35%, #e4edf077, transparent 58%), var(--paper);
}
.entry::before { content: ''; position: fixed; inset: 0; background: url('./assets/paper.svg'); opacity: .12; pointer-events: none; }
.entry-card { position: relative; width: min(100%, 480px); text-align: center; }
.entry-flower { display: block; margin: 0 auto 26px; filter: drop-shadow(0 6px 10px #60839a18); }
.entry-eyebrow { font: 500 10px/1.6 'Helvetica Neue', Arial, sans-serif; letter-spacing: .2em; color: var(--muted); margin: 0 0 26px; }
.entry h1 { font-size: clamp(42px, 5vw, 66px); line-height: 1.12; letter-spacing: -.045em; }
.entry-description { font-size: 17px; color: var(--muted); line-height: 1.75; margin: 22px 0 28px; }
#entry-form { max-width: 330px; margin: 0 auto; text-align: left; }
#entry-form label { display: block; margin-bottom: 10px; font: 12px/1.5 'Helvetica Neue', Arial, sans-serif; color: var(--muted); }
.password-field { display: flex; border: 1px solid #b7c4c4; border-radius: 5px; background: #fffdf780; transition: border-color .2s, box-shadow .2s; }
.password-field:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px #60839a18; }
.password-field input { min-width: 0; width: 100%; background: transparent; border: 0; padding: 14px 16px; color: var(--ink); font: 17px/1.5 'Helvetica Neue', Arial, sans-serif; outline: none; }
.password-toggle { display: grid; place-items: center; flex: 0 0 48px; border: 0; background: transparent; color: var(--muted); cursor: pointer; border-radius: 4px; }
.entry-error { min-height: 36px; margin: 8px 0 4px; color: #895849; font: 12px/1.5 'Helvetica Neue', Arial, sans-serif; }
.entry-submit { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 20px; border: 1px solid #577c92; border-radius: 5px; background: #577c92; color: #fffdf7; font: 13px/1.4 'Helvetica Neue', Arial, sans-serif; cursor: pointer; transition: background .2s, transform .2s; }
.entry-submit:hover { background: #466c83; transform: translateY(-1px); }
.entry-submit:disabled { opacity: .65; cursor: wait; }
.entry button:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.entry-footnote { margin: 28px 0 0; font-size: 14px; line-height: 1.7; color: var(--muted); font-style: italic; }
@media (prefers-reduced-motion: reduce) { .entry *, .entry *::before { transition: none !important; } }

.entry h1:focus { outline: none; }

.password-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
#entry-form .password-label-row label { margin-bottom: 0; }
.password-hint { position: relative; }
.password-hint summary { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--blue); cursor: pointer; list-style: none; transition: background .2s; }
.password-hint summary::-webkit-details-marker { display: none; }
.password-hint summary:hover, .password-hint[open] summary { background: #60839a15; }
.password-hint summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.password-hint p { position: absolute; z-index: 1; right: 0; bottom: calc(100% + 8px); width: 240px; margin: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); box-shadow: 0 6px 20px #35434210; color: var(--muted); font-size: 15px; font-style: italic; line-height: 1.5; }

/* Copy spans preserve the decorative rules around chapter labels. */
.eyebrow .copy-text { width: auto; height: auto; flex-shrink: 1; background: none; }