:root {
  --night: #000; --paper: #f3eee2; --ink: #484039; --pencil: #746c61;
  --faint: #8b8276; --rose: #975e62; --rule: #76665433;
  --hand: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
  --serif: 'Lora', Georgia, serif; --sans: 'DM Sans', Arial, sans-serif;
  --flower-width: 46%; --mobile-banner: 180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: var(--night); color: var(--ink); font-family: var(--serif); -webkit-font-smoothing: antialiased; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .55; }
a { color: inherit; text-underline-offset: 4px; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px dashed var(--rose); outline-offset: 6px; border-radius: 2px; }
[hidden] { display: none !important; }
h1, h2, h3, p, figure { margin: 0; }
p { font-size: 14px; line-height: 1.95; }
svg { display: block; }
.sketch-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.sketch { width: 100%; height: 100%; color: var(--pencil); fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; filter: url(#pencil); }
.pencil-wash { fill: #b3a18c16; }
.rose-wash { fill: var(--rose); fill-opacity: .13; }
.rose-stroke { stroke: var(--rose); }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 20; clip-path: inset(50%); padding: 12px; background: var(--paper); font-family: var(--sans); font-size: 12px; }
.skip-link:focus { clip-path: none; }
.ambient-ascii { position: fixed; inset: 0; overflow: hidden; color: #b7ada1; opacity: .07; pointer-events: none; z-index: 0; }
.ambient-ascii pre { margin: 0; font: 16px/15vh monospace; letter-spacing: 1.4vw; white-space: pre; }

/* Fixed flowers, with one natural document scroll beside them. */
.flower-panel { position: fixed; inset: 0 auto 0 0; width: var(--flower-width); height: 100vh; height: 100dvh; color: #d8d0c4; background: #000; z-index: 2; overflow: hidden; }
.flower-heading { position: absolute; z-index: 2; top: 47px; left: 0; right: 0; text-align: center; pointer-events: none; }
.small-label { display: block; font: 8px/1.6 var(--sans); letter-spacing: 2.8px; color: #8f897f; }
.flower-heading > p { font: 38px/1.3 var(--hand); color: #e9e1d4; margin-top: 14px; }
.flower-heading > p span { display: inline-block; color: #b17d81; margin-left: 9px; transform: rotate(-12deg); font-size: 28px; }
.flower-subtitle { display: block; color: #a49b8f; font: italic 11px/1.6 var(--serif); margin-top: 9px; }
.flower-canvas-wrap { position: absolute; inset: 18% 0 12%; }
.flower-canvas-wrap iframe { display: block; position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; pointer-events: none; }
.flower-fallback { position: absolute; inset: 0; display: grid; place-content: center; margin: 0; text-align: center; font: 16px/1.4 monospace; color: #a29279; }
.flower-bottom { position: absolute; bottom: 35px; left: 15px; right: 15px; z-index: 2; text-align: center; }
.flower-dedication { font: 24px/1.4 var(--hand); color: #cfc4b3; }
.flower-controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 17px; color: #666058; }
.flower-controls button { border: 0; background: none; padding: 5px 0; color: #b8ada0; font: 9px/1.4 var(--sans); letter-spacing: .5px; }
.flower-controls button:hover { color: #fff8ea; }
.flower-controls button:focus-visible { outline-color: #d7bcab; }
.flower-status { font: 8px/1.7 var(--sans); color: #8c8376; margin-top: 7px; min-height: 14px; }
.chapter-nav { position: fixed; top: 0; right: 0; left: var(--flower-width); z-index: 5; padding: 22px 5vw 23px 26px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #ada598; background: linear-gradient(#000 72%, #0000); }
.chapter-nav > span { font: 9px/1.5 var(--sans); letter-spacing: .5px; }
.chapter-nav > div { display: flex; gap: 13px; }
.chapter-nav a { text-decoration: none; font: 10px/29px var(--sans); width: 29px; height: 29px; text-align: center; border: 1px solid transparent; border-radius: 48% 52% 46% 54%; transition: color .3s, border-color .3s; }
.chapter-nav a:hover { color: #f2e7d6; }
.chapter-nav a[aria-current] { color: #e9dac3; border-color: #b8a78e; transform: rotate(-9deg); }

/* A wrinkled sheet, fiber grain and a soft floating shadow. */
.paper-lane { position: relative; z-index: 1; margin-left: var(--flower-width); padding: 92px 4.5vw 90px 18px; }
.paper-float { position: relative; max-width: 740px; margin: auto; animation: paper-arrive 1.4s cubic-bezier(.2,.8,.2,1) both; }
.paper { position: relative; isolation: isolate; overflow: hidden; background-color: var(--paper); background-image: linear-gradient(167deg, transparent 0 11%, #b2a59609 11.15%, #fff8ee50 11.35%, transparent 11.6% 48%, #978c7d0b 48.15%, #fff9ec60 48.4%, transparent 48.7%), linear-gradient(94deg, transparent 42%, #99876c0b 48.7%, #fff9eb55 49.1%, transparent 51%); box-shadow: 0 4px 8px #0006, -13px 20px 65px #000a, 1px 0 0 #eadcc1; padding: 33px clamp(26px,4vw,70px) 25px; border-radius: 2px 1px 3px 1px; }
.paper::before { content: ''; pointer-events: none; position: absolute; inset: 0; background: url('assets/paper-texture.svg') repeat; background-size: 480px 480px; mix-blend-mode: multiply; opacity: .31; z-index: -1; }
.paper::after { content: ''; pointer-events: none; position: absolute; inset: 0; box-shadow: inset 0 0 50px #87765814, inset 3px 0 7px #75654b0b; z-index: -1; }
.paper-topline { display: flex; justify-content: space-between; gap: 15px; padding-bottom: 22px; border-bottom: 1px solid var(--rule); color: #85776a; font: 7px/1.6 var(--sans); letter-spacing: 1.3px; }
.chapter { position: relative; padding: 52px 0 58px; border-bottom: 1px solid var(--rule); scroll-margin-top: 0; }
.chapter-label { display: flex; align-items: center; gap: 12px; font: 10px/1.6 var(--sans); color: #877a6d; letter-spacing: .3px; margin-bottom: 26px; }
.chapter-label > span { color: #a37570; font-size: 9px; }
h1, h2 { font-family: var(--hand); font-weight: 500; line-height: 1.05; letter-spacing: -1.5px; }
h1 { font-size: clamp(46px,4.8vw,72px); margin: 18px 0 30px; }
h2 { font-size: clamp(39px,3.8vw,57px); margin-bottom: 22px; }
h1 em, h2 em { font-style: normal; color: var(--rose); }
.chapter p + p { margin-top: 17px; }
.salutation { font: 28px/1.3 var(--hand); margin-top: 34px; color: #797061; }
.opening .chapter-label { padding-right: 90px; margin-bottom: 20px; }
.opening-stamp { position: absolute; top: 48px; right: -5px; width: 75px; height: 75px; border: 1px solid #8b7f6e77; border-radius: 50%; text-align: center; transform: rotate(12deg); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #8d7a68; }
.opening-stamp::after { content: ''; position: absolute; inset: 4px; border: 1px dashed #8b7f6e55; border-radius: 50%; }
.opening-stamp span { font: 34px/1 var(--hand); }
.opening-stamp small { font: 6px/1.8 var(--sans); letter-spacing: 1px; }
.opening-bottom { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 20px; }
.margin-note { font: 23px/1.3 var(--hand); color: var(--rose); transform: rotate(-3deg); }
.opening-bottom .pencil-link { display: inline-block; margin-top: 28px; }
.dora-doodle { width: 155px; min-width: 125px; flex-shrink: 0; transform: rotate(3deg); }
.dora-doodle .sketch { height: 175px; }
.dora-doodle figcaption { font: 17px/1.2 var(--hand); text-align: center; color: var(--pencil); }
.pencil-link { background: none; border: 0; border-bottom: 1px solid #8b7b6566; padding: 3px 0 6px; font: 11px/1.6 var(--sans); text-decoration: none; color: var(--ink); }
.pencil-link:hover { color: var(--rose); border-color: var(--rose); }
.pencil-link > span { margin-left: 8px; }
.pencil-button { padding: 11px 17px; border: 1px solid #8e7a655e; border-radius: 2px 5px 3px 5px; background: #fff9ed30; font: 18px/1.4 var(--hand); color: var(--ink); box-shadow: 1px 2px 0 #8972570c; transition: border-color .2s, background .2s; }
.pencil-button:hover { border-color: var(--rose); background: #e7d4c12b; }
.pencil-button > span { margin-left: 10px; color: var(--rose); }
.chapter-intro { color: #6d6257; font-size: 13px; margin-bottom: 27px; }
.memory-entry { border-bottom: 1px dashed #88745c3b; padding: 22px 0; }
.memory-entry:first-child { padding-top: 4px; }
.memory-entry:last-child { border-bottom: 0; }
.memory-entry summary { list-style: none; display: grid; grid-template-columns: 92px 1fr 15px; align-items: center; gap: 16px; cursor: pointer; }
.memory-entry summary::-webkit-details-marker { display: none; }
.memory-entry summary .sketch { height: 85px; }
.memory-entry summary small { display: block; font: 7px/1.6 var(--sans); letter-spacing: 1px; color: #83766a; margin-bottom: 7px; }
.memory-entry summary strong { display: block; font: 27px/1.1 var(--hand); font-weight: 500; }
.memory-caption { display: block; font: 10px/1.7 var(--serif); color: #7a6d60; margin-top: 8px; }
.open-mark { font: 22px var(--hand); color: var(--rose); transition: transform .3s; }
.memory-entry[open] .open-mark { transform: rotate(45deg); }
.memory-entry summary:hover strong { color: var(--rose); }
.memory-body { padding: 18px 10px 0 108px; animation: unfold .3s both; }
.memory-body p { font-size: 12px; }
.memory-body p.margin-note { font: 20px/1.4 var(--hand); margin-top: 12px; }
.section-afterthought { margin-top: 21px; font: 20px/1.5 var(--hand); color: var(--rose); text-align: center; transform: rotate(-2deg); }
.little-things-shelf { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; margin: 33px -5px 0; }
.little-thing { padding: 0 0 10px; min-width: 0; border: 0; background: transparent; color: var(--ink); text-align: center; }
.little-thing .sketch { height: 123px; margin-bottom: 13px; transition: transform .35s; }
.little-thing:hover .sketch { transform: translateY(-5px) rotate(-3deg); }
.little-thing > span { display: block; font: 18px/1.1 var(--hand); }
.little-thing > small { display: block; font: 7px/1.6 var(--sans); color: #8e7d6b; margin-top: 7px; }
.gift-note-wrap { margin-top: 28px; border-top: 1px dashed #8e7d6b44; padding-top: 18px; display: flex; gap: 10px; }
.note-arrow { font: 24px var(--hand); color: var(--rose); }
.gift-note { font: 20px/1.4 var(--hand); min-height: 68px; color: var(--rose); }
.egg-top { transform-origin: 99px 80px; transform: var(--egg-open,none); transition: transform .7s; }
.egg-surprise { opacity: var(--heart-show,0); transition: opacity .7s; }
.cracked { --egg-open: translate(-4px,-13px) rotate(-22deg); --heart-show: 1; }
#makeup-illustration { --rose: #975e62; }
#dress-illustration { --dress-fill: #a48baa25; }
.dress-fabric { fill: var(--dress-fill,#a48baa25); transition: fill .5s; }
.distance-drawing { height: 195px; position: relative; max-width: 380px; margin: 28px auto 8px; }
.distance-drawing > .sketch { height: 165px; }
.house-labels { position: absolute; bottom: 6px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 10%; font: 20px var(--hand); }
.travel-heart { position: absolute; left: 18%; top: 47%; color: var(--rose); font: 27px Georgia,serif; opacity: 0; }
.hug-action { text-align: center; margin-top: 15px; }
.quiet-status { font: 10px/1.8 var(--sans); color: #817263; min-height: 35px; margin-top: 14px; }
.superhero-note { position: relative; margin: 36px -3px 0 13px; padding: 25px 23px 14px; background: #d7c7a51b; border: 1px solid #8d795c38; transform: rotate(-1deg); }
.superhero-note::before { content: ''; position: absolute; width: 53px; height: 16px; top: -8px; left: calc(50% - 26px); transform: rotate(4deg); background: #c4b99440; border-inline: 1px dashed #c4b99466; }
.superhero-note h3 { font: 25px/1.2 var(--hand); font-weight: 500; margin-bottom: 10px; }
.superhero-note > p:not(.quiet-status) { font-size: 12px; line-height: 1.9; }
.superhero-note .pencil-link { margin-top: 14px; font-size: 10px; }
.superhero-note .quiet-status { font-size: 9px; min-height: 46px; }
.note-pin { position: absolute; right: 10px; top: 5px; color: var(--rose); font: 24px Georgia,serif; }
.final-letter { border-bottom: 0; padding-bottom: 28px; }
.envelope-sketch { width: 145px; height: 105px; margin: 0 auto 12px; transform: rotate(3deg); }
.final-letter h2 { text-align: center; margin-bottom: 32px; }
.letter-copy p { font-size: 14px; line-height: 2; }
.unfold-button { margin: 27px 0 5px; }
.letter-rest { margin-top: 28px; animation: unfold .5s both; }
.signature { font: 25px/1.5 var(--hand); margin-top: 33px !important; }
.signature span { font-size: 32px; color: var(--rose); }
.final-ps { font: 18px/1.5 var(--hand); color: #8b7766; margin-top: 16px !important; }
.letter-ending { text-align: center; margin-top: 45px; padding-top: 25px; border-top: 1px solid var(--rule); }
.letter-ending > span { color: #9f8572; font-size: 25px; }
.letter-ending > p { font: 25px/1.5 var(--hand); margin-top: 8px; }
.letter-ending .pencil-link { font-size: 10px; margin-top: 15px; display: inline-block; }
.paper-footer { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; padding-top: 21px; border-top: 1px solid var(--rule); font: 7px/1.8 var(--sans); color: #857767; }
.paper-footer > span { width: 100%; text-align: center; letter-spacing: 1.4px; margin-bottom: 3px; }
.paper-footer a { text-decoration-color: #a5978555; }
@keyframes paper-arrive { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes unfold { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

@media (min-width: 1700px) {
  :root { --flower-width: 48%; }
  .paper-lane { padding-right: 6vw; }
  .flower-canvas-wrap { inset: 16% 5% 12%; }
}
@media (max-width: 1200px) and (min-width: 801px) {
  :root { --flower-width: 42%; }
  .paper-lane { padding-right: 3vw; padding-left: 12px; }
  .paper { padding-inline: 34px; }
  .chapter-nav { padding-right: 3vw; padding-left: 18px; }
  .chapter-nav > div { gap: 9px; }
  .flower-heading > p { font-size: 33px; }
  .flower-subtitle { font-size: 10px; }
  .small-label { font-size: 7px; letter-spacing: 2px; }
  .memory-entry summary { grid-template-columns: 78px 1fr 12px; gap: 12px; }
  .memory-body { padding-left: 90px; }
  .little-things-shelf { gap: 5px; }
  .little-thing > span { font-size: 17px; }
  .little-thing .sketch { height: 111px; }
  .opening-bottom .margin-note { font-size: 21px; }
  .dora-doodle { width: 130px; }
}
/* A compact, persistent flower banner on phones and tablets. */
@media (max-width: 800px) {
  :root { --flower-width: 100%; }
  html { scroll-padding-top: calc(var(--mobile-banner) + 70px); }
  .flower-panel { width: 100%; height: var(--mobile-banner); z-index: 6; border-bottom: 1px solid #332e2744; }
  .flower-heading { top: 24px; left: 25px; right: auto; width: 53%; text-align: left; }
  .small-label { font-size: 6px; letter-spacing: 1.8px; }
  .flower-heading > p { font-size: 30px; line-height: 1.1; max-width: 190px; margin-top: 9px; }
  .flower-heading > p span { font-size: 22px; margin-left: 4px; }
  .flower-subtitle { font-size: 9px; line-height: 1.7; max-width: 180px; margin-top: 9px; }
  .flower-canvas-wrap { inset: 2px 0 0 auto; width: 43%; height: 176px; }
  .flower-fallback { font-size: 8px; }
  .flower-bottom { bottom: 11px; left: 25px; right: auto; max-width: 54%; text-align: left; }
  .flower-dedication, .flower-status { display: none; }
  .flower-controls { justify-content: flex-start; gap: 10px; margin-top: 0; }
  .flower-controls button { font-size: 8px; padding: 6px 0; }
  .chapter-nav { top: var(--mobile-banner); left: 0; padding: 8px 25px 12px; height: 49px; background: #000; border-bottom: 1px solid #28231e; z-index: 6; }
  .chapter-nav > span { font-size: 8px; }
  .chapter-nav > div { gap: 10px; }
  .chapter-nav a { width: 25px; height: 25px; line-height: 23px; font-size: 9px; }
  .paper-lane { margin-left: 0; padding: calc(var(--mobile-banner) + 69px) 27px 45px; }
  .paper { max-width: 620px; margin: auto; padding: 29px 45px 22px; }
  .paper-float { animation: none; }
  .paper-topline { font-size: 6px; letter-spacing: 1.1px; }
  .chapter { padding-block: 41px 48px; scroll-margin-top: 0; }
  h1 { font-size: 63px; }
  h2 { font-size: 51px; }
  .opening-stamp { top: 37px; }
  .chapter-label { font-size: 9px; }
  .skip-link { z-index: 10; }
}
@media (max-width: 480px) {
  :root { --mobile-banner: 166px; }
  .flower-heading { top: 21px; left: 20px; width: 53%; }
  .flower-heading > p { font-size: 27px; max-width: 185px; }
  .small-label { font-size: 5.5px; letter-spacing: 1.2px; }
  .flower-subtitle { font-size: 8px; max-width: 160px; }
  .flower-canvas-wrap { height: 164px; width: 42%; }
  .flower-bottom { left: 20px; bottom: 9px; }
  .flower-controls { gap: 8px; }
  .flower-controls button { font-size: 7px; }
  .chapter-nav { padding-inline: 20px; }
  .chapter-nav > span { font-size: 7px; max-width: 112px; }
  .chapter-nav > div { gap: 7px; }
  .paper-lane { padding-inline: 14px; padding-top: calc(var(--mobile-banner) + 65px); }
  .paper { padding: 23px 25px 20px; }
  .paper-topline { font-size: 5.5px; letter-spacing: .7px; gap: 6px; padding-bottom: 18px; }
  .chapter { padding-block: 36px 43px; }
  .chapter-label { font-size: 8px; gap: 9px; margin-bottom: 22px; }
  .opening .chapter-label { padding-right: 58px; }
  .opening-stamp { width: 58px; height: 58px; top: 31px; right: -4px; }
  .opening-stamp span { font-size: 28px; }
  .opening-stamp small { font-size: 4.5px; letter-spacing: .6px; }
  .salutation { font-size: 25px; margin-top: 35px; }
  h1 { font-size: 52px; letter-spacing: -1px; margin: 18px 0 24px; }
  h2 { font-size: 43px; letter-spacing: -1px; }
  p { font-size: 12px; line-height: 1.95; }
  .opening-bottom { margin-top: 22px; gap: 0; }
  .opening-bottom .margin-note { font-size: 20px; }
  .opening-bottom .pencil-link { font-size: 9px; max-width: 130px; margin-top: 22px; }
  .dora-doodle { width: 117px; min-width: 100px; }
  .dora-doodle .sketch { height: 147px; }
  .dora-doodle figcaption { font-size: 14px; }
  .chapter-intro { font-size: 11px; }
  .memory-entry { padding-block: 21px; }
  .memory-entry summary { grid-template-columns: 64px 1fr 10px; gap: 10px; }
  .memory-entry summary .sketch { height: 67px; }
  .memory-entry summary small { font-size: 6px; letter-spacing: .6px; }
  .memory-entry summary strong { font-size: 24px; }
  .memory-caption { font-size: 8px; margin-top: 7px; line-height: 1.8; }
  .memory-body { padding: 15px 2px 0 15px; border-left: 1px solid #975e6244; margin-left: 19px; }
  .memory-body p { font-size: 11px; }
  .memory-body p.margin-note { font-size: 19px; }
  .section-afterthought { font-size: 19px; }
  .little-things-shelf { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 14px; margin-inline: 0; }
  .little-thing .sketch { height: 130px; }
  .little-thing > span { font-size: 21px; }
  .little-thing > small { font-size: 7px; }
  .gift-note { font-size: 20px; min-height: 80px; }
  .distance-drawing { height: 163px; margin-top: 22px; }
  .distance-drawing > .sketch { height: 135px; }
  .house-labels { font-size: 18px; bottom: 6px; }
  .pencil-button { font-size: 17px; padding: 10px 13px; }
  .quiet-status { font-size: 9px; }
  .superhero-note { padding: 24px 17px 13px; margin-left: 3px; }
  .superhero-note h3 { font-size: 24px; }
  .superhero-note > p:not(.quiet-status) { font-size: 11px; }
  .superhero-note .quiet-status { min-height: 61px; font-size: 8px; }
  .envelope-sketch { width: 125px; height: 95px; }
  .letter-copy p { font-size: 12px; }
  .signature { font-size: 22px; }
  .signature span { font-size: 28px; }
  .final-ps { font-size: 17px; }
  .paper-footer { font-size: 6px; }
  .paper-footer > span { font-size: 6px; letter-spacing: 1.1px; }
}
@media (max-width: 350px) {
  .flower-heading > p { font-size: 25px; }
  .flower-subtitle { max-width: 145px; }
  .flower-controls button { font-size: 6.5px; }
  .chapter-nav { padding-inline: 16px; }
  .chapter-nav > div { gap: 3px; }
  .paper { padding-inline: 21px; }
  h1 { font-size: 46px; }
  h2 { font-size: 39px; }
  .opening-bottom .margin-note { font-size: 18px; }
  .dora-doodle { width: 100px; }
  .memory-entry summary { grid-template-columns: 53px 1fr 10px; gap: 8px; }
  .memory-entry summary strong { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}