@font-face {
  font-family: "Cormorant Garamond Local";
  src: url("../assets/fonts/cormorant-garamond/CormorantGaramond-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond Local";
  src: url("../assets/fonts/cormorant-garamond/CormorantGaramond-Italic-Variable.ttf") format("truetype");
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Raleway Local";
  src: url("../assets/fonts/raleway/Raleway-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Lora Local";
  src: url("../assets/fonts/lora/Lora-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Lora Local";
  src: url("../assets/fonts/lora/Lora-Italic-Variable.ttf") format("truetype");
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
}

:root {
  color-scheme: dark light;
  --plum: #26171d;
  --wine: #632e40;
  --amber: #c59168;
  --ivory: #f1dfcd;
  --rose: #9b6c72;
  --paper: #ead4c0;
  --ink: #402c32;
  --muted-dark: #d0b7ac;
  --muted-light: #70545a;
  --serif-title: "Cormorant Garamond Local", "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans-body: "Raleway Local", Raleway, "Segoe UI", Arial, sans-serif;
  --serif-letter: "Lora Local", Lora, Georgia, "Times New Roman", serif;
  --page-gutter: clamp(1.5rem, 6vw, 6rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--plum); color: var(--ivory); font-family: var(--sans-body); font-size: 1rem; line-height: 1.8; -webkit-font-smoothing: antialiased; }
::selection { background: var(--wine); color: var(--ivory); }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-family: var(--serif-title); font-weight: 400; }
h1, h2 { text-wrap: balance; }
h1 { font-size: clamp(3.2rem, 7.5vw, 7.4rem); line-height: 1.06; letter-spacing: -.055em; }
h2 { font-size: clamp(2.55rem, 5.2vw, 4.6rem); line-height: 1.12; letter-spacing: -.045em; }
h3 { font-size: 1.7rem; line-height: 1.3; }
em { font-weight: 400; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .3em; }
a:focus-visible, [tabindex="-1"]:focus-visible { outline: 2px solid var(--amber); outline-offset: 7px; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.container { width: min(100% - var(--page-gutter) * 2, 1120px); margin-inline: auto; }
.chapter { position: relative; }
.eyebrow { font-size: .65rem; line-height: 1.6; letter-spacing: .23em; text-transform: uppercase; font-weight: 600; }
.section-heading .eyebrow { margin-bottom: 1.5rem; }
.section-heading > p:not(.eyebrow, .period) { margin-top: 1.6rem; max-width: 34rem; }
.skip-link { position: absolute; z-index: 10; top: 1rem; left: 1rem; padding: .7rem 1rem; background: var(--ivory); color: var(--plum); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }

/* ACTO I: luz contenida, espacio y una composición tipográfica de portada. */
.hero { min-height: 800px; min-height: 100svh; padding: 0 var(--page-gutter); display: flex; flex-direction: column; isolation: isolate; background: radial-gradient(ellipse at 50% 44%, #633e372b, transparent 53%), var(--plum); }
.masthead { display: flex; justify-content: space-between; align-items: center; padding-block: 1.8rem; gap: 1rem; border-bottom: 1px solid #c591682c; }
.identity { font-family: var(--serif-title); font-size: 1.25rem; letter-spacing: -.025em; }
.identity span { margin-inline: .2em; color: var(--amber); font-style: italic; }
.masthead-note { font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-dark); }
.hero-content { padding-block: 3.5rem 4rem; margin-block: auto; position: relative; text-align: center; }
.flame-note { max-width: 28rem; margin: 0 auto 1rem; color: var(--muted-dark); font: italic clamp(.95rem, 1.6vw, 1.15rem)/1.5 var(--serif-title); letter-spacing: .01em; text-wrap: balance; }
.hero-content .eyebrow { color: var(--amber); margin: 1.6rem 0 1.8rem; }
.hero h1 em { color: #d6a783; }
.hero-intro { color: var(--muted-dark); margin: 1.8rem auto 2.2rem; font-size: .93rem; line-height: 1.85; }
.start-link { display: inline-flex; align-items: center; justify-content: center; width: min(100%, 360px); min-height: 58px; padding: .7rem 3.25rem .82rem; border: 2px solid #c591688f; background: #f6d9a408; box-shadow: none; font-size: .84rem; letter-spacing: .04em; text-align: center; text-decoration: none; border-radius: 3px; }
.start-link-label { padding-block: .2rem; }
.start-link-arrow { position: absolute; right: 1.15rem; width: 18px; height: 30px; fill: none; stroke: var(--amber); stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }
.hero-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1.5rem; color: var(--muted-dark); font-size: .7rem; text-transform: uppercase; letter-spacing: .16em; }
.scroll-cue { display: flex; align-items: center; gap: 1rem; text-transform: none; letter-spacing: .05em; }
.scroll-cue i { display: block; height: 30px; width: 1px; background: linear-gradient(var(--amber), transparent); }
.hero-orbit { position: absolute; z-index: -1; width: min(75%, 820px); height: 78%; left: 50%; top: 13%; transform: translateX(-50%); border: 1px solid #c5916814; border-radius: 50%; pointer-events: none; }
.flame { width: 48px; height: 66px; margin-inline: auto; position: relative; isolation: isolate; }
.flame::before { content: ""; position: absolute; z-index: -1; inset: -55px -65px; border-radius: 50%; background: radial-gradient(ellipse, #e5b78530, #c5916810 38%, transparent 70%); pointer-events: none; }
.flame svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 11px #dca36c80); }
.flame-shape, .flame-core { transform-box: fill-box; transform-origin: 50% 90%; }
.beginnings { padding-block: 6rem 7rem; background: linear-gradient(var(--plum), #382229 70%, #432b30); }
.beginnings .section-heading { text-align: center; }
.beginnings .section-heading > p { margin-inline: auto; color: var(--muted-dark); }
.beginnings .section-heading .eyebrow { color: var(--amber); }
.beginnings h2 em { color: #d6a783; }
.timeline { list-style: none; margin: 3.5rem 0 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 2.5rem 2rem; border-left: 1px solid #c5916859; }
.timeline li:last-child { padding-bottom: 0; }
/* A decorative trace follows milestones once. The original track stays visible. */
.timeline li::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 1px; background: var(--amber); transform-origin: top; }
.timeline-year { font-family: var(--serif-title); font-size: 3.8rem; line-height: 1.1; color: #dfbaa0; letter-spacing: -.04em; }
.timeline-point { position: absolute; left: -5px; top: 1.9rem; width: 9px; height: 9px; border: 1px solid var(--amber); border-radius: 50%; background: #382229; }
.date-note { margin: 1.1rem 0 .65rem; color: #dfbaa0; font-size: .63rem; text-transform: uppercase; letter-spacing: .17em; }
.timeline h3 + p { color: var(--muted-dark); margin-top: .8rem; font-size: .9rem; max-width: 30rem; }
.chapter-footnote { max-width: 31rem; margin: 3.5rem auto 0; text-align: center; text-wrap: balance; font: italic 1.35rem/1.5 var(--serif-title); color: #dfbaa0; }
.beginning-photo { width: min(54%, 220px); min-width: 170px; margin: 3.5rem auto 0; transform: rotate(-3deg); }
.beginning-photo figcaption { text-align: left; }

/* ACTO II: la superficie pasa del vino al papel a lo largo de las secciones. */
.memories { padding-block: 5rem 4rem; background: linear-gradient(#432b30, #70504b 28rem, #c3a28b 51rem, var(--paper) min(74rem, 100%)); }
.album-heading { margin-bottom: 3rem; }
.album-heading > p { color: #eddbcb; font-size: .92rem; }
.album { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.album .photo-main { width: min(84%, 360px); justify-self: start; }
.album .photo-portrait { width: min(96%, 390px); justify-self: end; }
.album .photo-detail { width: min(72%, 310px); justify-self: start; }
.photo-frame { background: linear-gradient(125deg, #fbf0e3, #f0e0ce); color: var(--ink); padding: .7rem .7rem 0; border: 1px solid #fff8ef80; box-shadow: 0 2px 3px #26171d08, 0 14px 28px #26171d14; }
.photo-placeholder { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.2rem; text-align: center; color: var(--ink); position: relative; background: radial-gradient(ellipse at 25% 25%, #e6d2c0, transparent 75%), #d0b5a4; }
.photo-placeholder::after { content: ""; position: absolute; inset: .6rem; border: 1px solid #76564e30; pointer-events: none; }
.photo-placeholder > span:not(.photo-mark) { font: italic 1.3rem/1.5 var(--serif-title); }
.photo-placeholder small { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; margin-top: .65rem; }
.photo-mark { font: 400 3.2rem/1.2 var(--serif-title); opacity: .55; margin-bottom: 1.5rem; }
.landscape { aspect-ratio: 4 / 3; }
.portrait { aspect-ratio: 3 / 4; }
.square { aspect-ratio: 1; }
.photo-frame figcaption { display: flex; justify-content: space-between; gap: 1rem; padding: .9rem .25rem 1.05rem; font-size: .74rem; font-weight: 500; letter-spacing: .025em; }
.photo-frame img { width: 100%; object-fit: cover; }
.beginning-photo img, .album .photo-frame img { object-fit: contain; height: auto; }
.photo-portrait { width: 84%; justify-self: end; }
.photo-portrait .photo-placeholder { background: radial-gradient(ellipse at 70% 20%, #d9bcb1, transparent 80%), #bd9791; }
.photo-detail { width: 86%; }
.photo-detail .photo-placeholder { background: radial-gradient(ellipse at 20% 70%, #d7c5b0, transparent 80%), #b2ad9c; }
.photo-small { width: 77%; justify-self: end; }
.editorial-note { color: #654c4d; font-size: .7rem; text-align: center; margin-top: 3rem; }
.learning { background: linear-gradient(var(--paper), #ecdbc9); color: var(--ink); padding-block: 5rem 0; }
.learning .eyebrow, .reunion .eyebrow, .letter .eyebrow { color: var(--wine); }
.learning h2 em, .reunion h2 em, .letter h2 em { color: var(--wine); }
.period { color: var(--muted-light); font-size: .75rem; letter-spacing: .15em; margin-top: 1.8rem; }
.learning-copy { margin-top: 2.5rem; font-size: .96rem; max-width: 36rem; }
.learning-copy > p + p { margin-top: 1.4rem; }
.learning-copy .reflection { margin-top: 2.2rem; padding-top: 1.7rem; border-top: 1px solid #632e402e; color: var(--wine); font: italic 1.55rem/1.5 var(--serif-title); }
.interlude { text-align: center; padding: 4.5rem var(--page-gutter) 3rem; }
.interlude > span { color: var(--wine); font-size: 2rem; }
.interlude p { font: 400 clamp(1.7rem, 3vw, 2.6rem)/1.4 var(--serif-title); max-width: 28rem; margin: 1.4rem auto 0; text-wrap: balance; }
.interlude .interlude-thread { display: block; height: 54px; width: 1px; background: linear-gradient(#9b6c7280, #9b6c7200); margin: 2rem auto 0; }

/* ACTO III: marfil, luz de día y detalles en vino. */
.reunion { color: var(--ink); background: linear-gradient(#ecdbc9, #f5e6d6 64%, var(--ivory)); padding-block: 2rem 5rem; }
.reunion, .letter { isolation: isolate; }
.reunion::before, .letter::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 45% 50%, #fffaf0b3, transparent 67%); }
.reunion-art { position: relative; padding: 3.5rem 1rem 2.5rem; }
.reunion-year { position: absolute; top: -1.5rem; left: 0; font: 400 clamp(6rem, 13vw, 10rem)/1 var(--serif-title); letter-spacing: -.06em; color: #632e402b; }
.photo-current { position: relative; width: min(100%, 340px); margin-inline: auto; transform: rotate(-4deg); }
.photo-current .photo-placeholder { background: radial-gradient(ellipse at 30% 10%, #f2e5c9, transparent 85%), #d2c4a9; }
.reunion-caption { position: absolute; bottom: 0; right: .5rem; color: var(--muted-light); font: italic 1.1rem/1.5 var(--serif-title); }
.reunion-copy { margin-top: 3rem; }
.reunion-copy > p:not(.eyebrow) { font-size: .96rem; }
.reunion-copy > p.reunion-closing { font: italic 1.65rem/1.5 var(--serif-title); color: var(--wine); padding-top: 1.3rem; border-top: 1px solid #632e4026; }
.reunion-memories { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 1.25rem; margin-top: 2.5rem; }
.reunion-detail { width: 100%; transform: rotate(-2deg); }
.reunion-wide { grid-column: 1 / -1; grid-row: 2; width: min(88%, 430px); justify-self: center; transform: rotate(2deg); }
.reunion-last { transform: rotate(3deg); margin-top: 1.5rem; }
.reunion-memories .photo-frame img, .photo-current img { display: block; width: 100%; height: auto; object-fit: contain; }
.letter { background: var(--ivory); color: var(--ink); padding-top: 4rem; }
.letter::before { background: radial-gradient(ellipse at 50% 55%, #fffaf0d9, transparent 66%); }
.letter-content { text-align: center; }
.letter .section-heading > p { margin-inline: auto; }
.letter .section-heading > p:not(.eyebrow) { color: var(--muted-light); font-size: .94rem; }
.letter-experience { max-width: 720px; margin: 0 auto 5rem; }
.letter-reserved { max-width: 520px; margin: 3.5rem auto 0; position: relative; z-index: 2; }
.envelope-button { display: block; width: 100%; padding: 0; border: 0; border-radius: 6px; background: transparent; color: inherit; cursor: pointer; position: relative; isolation: isolate; }
.envelope-button:focus-visible, .letter-close:focus-visible, .letter-sheet:focus-visible { outline: 2px solid var(--wine); outline-offset: 7px; }
.envelope-glow { position: absolute; z-index: -1; inset: 8% 5%; border-radius: 50%; background: radial-gradient(ellipse, #fffaf0cc, #c5916824 55%, transparent 73%); opacity: .42; }
.envelope { position: relative; z-index: 1; width: 100%; transform: rotate(-3deg); filter: drop-shadow(0 18px 15px #6b42421a); overflow: visible; }
.envelope-flap, .envelope-seal { transform-box: fill-box; }
.envelope-flap { transform-origin: 50% 0; }
.envelope-seal { transform-origin: center; }
.letter-preview { position: absolute; z-index: 0; left: 21%; bottom: 15%; width: 58%; aspect-ratio: 4 / 3; padding: 10% 9%; background: linear-gradient(145deg, #fffaf1, #ecd7c3); border: 1px solid #c6a88d; box-shadow: 0 12px 20px #6b42421f; opacity: 0; transform: translateY(24%) scale(.92); }
.letter-preview i { display: block; height: 1px; margin-bottom: 8%; background: #70545a42; }
.letter-preview i:nth-child(2) { width: 82%; }
.letter-preview i:nth-child(3) { width: 62%; }
.letter-reserved figcaption { font: italic 1.45rem/1.5 var(--serif-title); margin-top: 1.7rem; }
.letter-reserved figcaption span { display: block; margin-top: .7rem; color: var(--muted-light); font: .68rem/1.7 var(--sans-body); }
.letter-reserved figcaption small { display: block; margin-top: .9rem; color: var(--muted-light); font: 600 .62rem/1.6 var(--sans-body); letter-spacing: .1em; text-transform: uppercase; }
.letter-panel { display: grid; grid-template-rows: 0fr; margin-top: -2rem; opacity: 0; position: relative; z-index: 3; }
.letter-panel[hidden] { display: none; }
.letter-panel-inner { min-height: 0; overflow: hidden; padding: 0 1px 1.5rem; }
.letter-sheet { width: min(100%, 640px); margin-inline: auto; padding: clamp(2rem, 7vw, 4.5rem) clamp(1.5rem, 7vw, 4.75rem); text-align: left; background: linear-gradient(145deg, #fff9ef, #f2dfcc); border: 1px solid #c6a88d99; box-shadow: 0 22px 55px #6b42412b, 0 2px 4px #6b424116; transform: translateY(-4rem) scale(.96); transform-origin: 50% 0; }
.letter-copy { color: var(--ink); font-family: var(--serif-letter); font-size: clamp(.96rem, 2vw, 1.04rem); line-height: 1.9; }
.letter-copy p + p { margin-top: 1.6rem; }
.proposal-question { margin-top: 2.4rem; padding-top: 2rem; border-top: 1px solid #632e4033; color: var(--wine); text-align: center; text-wrap: balance; font: italic clamp(1.85rem, 5vw, 3rem)/1.3 var(--serif-letter); }
.letter-close { display: block; min-height: 44px; margin: 2.6rem auto 0; padding: .65rem 1rem; border: 0; border-bottom: 1px solid #632e4066; background: transparent; color: var(--muted-light); font: 600 .66rem/1.4 var(--sans-body); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.letter-noscript { max-width: 32rem; margin: 2rem auto 0; color: var(--muted-light); font-size: .8rem; }
.footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem 2rem; border-top: 1px solid #632e4026; padding-block: 1.5rem; color: var(--muted-light); font-size: .72rem; letter-spacing: .06em; }
.music-started .footer { padding-bottom: max(4.75rem, calc(3.75rem + env(safe-area-inset-bottom))); }
.footer > span:first-child { font: 1.1rem/1.5 var(--serif-title); color: var(--wine); }
.footer > span:last-child { font-size: .78rem; }
.footer > span:last-child > span { padding-left: .6rem; }

/* Control ambiental: aparece solo después de una reproducción iniciada por el usuario. */
.music-control { position: fixed; z-index: 20; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: .65rem; min-width: 48px; min-height: 48px; padding: .45rem .75rem .45rem .55rem; border: 1px solid #c5916870; border-radius: 4px; background: #26171dec; color: #f5e8dc; box-shadow: 0 10px 28px #130b0f42; font-family: var(--sans-body); text-align: left; cursor: pointer; backdrop-filter: blur(8px); }
.music-control[hidden] { display: none; }
.music-control:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
.music-control-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid #c591685c; color: var(--amber); }
.music-control-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.music-paused { opacity: 0; }
.music-control.is-paused .music-note { opacity: .35; }
.music-control.is-paused .music-paused { opacity: 1; }
.music-control-copy { display: grid; gap: .08rem; padding-right: .1rem; }
.music-control-copy > span { font: italic .84rem/1.1 var(--serif-title); white-space: nowrap; }
.music-control-copy small { color: #d8c4b8; font-size: .54rem; line-height: 1.2; letter-spacing: .11em; text-transform: uppercase; }