@font-face {
  font-family: "Playfair Display";
  src: url("assets/fonts/playfair-display.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("assets/fonts/playfair-display-italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
}

:root{--ink:#29213e;--muted:#594b65;--paper:#fff8e9;--purple:#5c36a1;--line:#ded0ba;--white:#fffdf7}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:var(--paper);font:1rem/1.65 "Segoe UI",system-ui,sans-serif}
a{color:inherit}button{font:inherit;color:inherit;cursor:pointer}img{display:block;max-width:100%}
:focus-visible{outline:3px solid #8044ba;outline-offset:5px}
.skip{position:absolute;left:1rem;top:-6rem;z-index:5;background:white;padding:.5rem 1rem}.skip:focus{top:1rem}
.wrap{width:min(1120px,calc(100% - 2.5rem));margin-inline:auto}
.masthead{border-bottom:1px solid var(--line)}.top,.footer{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 0}
.brand{font-weight:800;text-decoration:none}.brand span{color:#a33e70;font-size:1.5em;vertical-align:middle;margin-right:.2em}
.edition,.label{font-size:.76rem;font-weight:850;letter-spacing:.11em}.edition{white-space:nowrap}.edition b{background:#ffd876;padding:.25rem .55rem;border-radius:6px;margin-left:.3rem}
.hero{display:grid;grid-template-columns:1fr 1.12fr;align-items:center;gap:2.2rem;padding-block:4rem}
.label{color:#684296;margin:0 0 .7rem}.event{background:#ffedb6;border:1px solid #eacb75;padding:.45rem .75rem;border-radius:.5rem;display:inline-block;letter-spacing:.065em}
h1,h2,h3,p{margin-top:0}h1,h2{font-family:"Playfair Display",Georgia,serif;line-height:1.22;font-weight:600}
h1{font-size:clamp(3.35rem,7.1vw,6.4rem);margin:.15em 0 .16em}h1 em{color:var(--purple);font-style:italic}h1 span{color:#bc5678;font:normal .38em/1 system-ui;vertical-align:top}
.deck{color:#923759;font-weight:800;font-size:clamp(1.25rem,3vw,1.8rem);margin-bottom:.35em}.intro{color:var(--muted);max-width:36ch}
.button{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;border:1px solid #d6c4e4;background:var(--white);padding:.58rem 1rem;border-radius:2rem;font-weight:750;text-decoration:none}.button:hover{background:#f4e8ff}.primary{background:#5c36a1;color:white;border-color:transparent;box-shadow:0 4px #40236e;padding:.7rem 1.25rem}.primary:hover{background:#6b43b1}.button:disabled{opacity:.48;cursor:default}
.classline {
  width: fit-content;
  margin: 1.55rem 0 0;
  padding: .55rem .85rem;
  border-left: 4px solid #bb6f98;
  border-radius: .55rem;
  background: #f6e5ff;
  color: #492967;
  font-size: clamp(1rem, 1.45vw, 1.2rem);
  font-weight: 700;
}
.classline [data-class] {
  white-space: nowrap;
  color: #882f60;
  font-weight: 850;
}
@media (prefers-reduced-motion: no-preference) {
  .classline { animation: rise-in .58s .45s ease-out both; }
}
.cover-art{position:relative;transform:rotate(1.6deg);border:9px solid #fffdf8;border-radius:2rem;background:#e3efff;box-shadow:0 12px 35px #59426829}.cover-art img{width:100%;border-radius:1.5rem}
.art-tag{position:absolute;right:3%;bottom:1%;background:#ffdc84;padding:.35rem .8rem;border-radius:.4rem;font-size:.85rem;font-weight:800;transform:rotate(-6deg)}
.petal{position:absolute;font-size:2rem;pointer-events:none}.petal-one{top:7%;right:8%;color:#ad4675}.petal-two{bottom:22%;left:9%;color:#704ca8}

.toc{background:#f4e6ff;border-block:1px solid #dec9f0}.toc-links{display:flex;justify-content:center;flex-wrap:wrap;gap:.35rem .7rem;padding:.65rem 0}.toc a{font-weight:750;text-decoration:none;padding:.25rem .68rem;border-radius:1rem}.toc a:hover{background:white}
.sample{margin-top:1.5rem;border-left:4px solid #de9c31;padding:.45rem .8rem;color:var(--muted);font-size:.9rem}
.section{padding-block:clamp(2.8rem,6vw,5.4rem)}.section-title{text-align:center;margin-bottom:2rem}.section-title h2{font-size:clamp(2.05rem,5vw,3.5rem);margin-bottom:.4rem}.section-title>p:last-child{color:var(--muted);margin-bottom:0}
.letter{max-width:660px;margin:auto;background:#fff2d1;border:2px solid #ead092;border-radius:1.25rem;box-shadow:0 6px #ebd9ad;overflow:hidden}.letter summary{cursor:pointer;padding:1.25rem 1.5rem;text-align:center;font-weight:800}.letter-body{margin:0 1rem 1rem;padding:1.3rem;background:var(--white);border-radius:.7rem}.letter-body p:last-child{margin-bottom:0}
.lilac{background:#eee3fb}.peach{background:#ffe4dc}.mint{background:#dcf3df}
.book{max-width:730px;margin:auto;background:var(--white);border:2px solid #cdb2e5;border-left:12px solid #9670c5;border-radius:1.1rem;box-shadow:0 8px #d8c1ec;overflow:hidden}.book article{padding:1.4rem clamp(1rem,5vw,3rem);min-height:15rem;background:var(--white)}.book article p.body{line-height:2rem;background-image:repeating-linear-gradient(to bottom,transparent 0 1.34rem,#ebe4f3 1.34rem calc(1.34rem + 1px),transparent calc(1.34rem + 1px) 2rem);background-position:0 0;background-size:100% 2rem;background-repeat:repeat-y}.book-controls{display:flex;align-items:center;justify-content:space-between;gap:.4rem;padding:.8rem;background:#f9f2ff;font-size:.86rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:1.3rem}.art-card,.memory{background:var(--white);border:1px solid var(--line);border-radius:1rem;box-shadow:0 5px #34234713}.art-card{padding:.65rem;text-align:left;display:grid;gap:.5rem}.art-card:hover{transform:translateY(-4px)}.art-card img{width:100%;aspect-ratio:4/3;object-fit:contain;border-radius:.65rem;background:#f4edfb}.art-card strong{padding:.15rem .5rem .35rem}
.memory{padding:1.3rem 1.4rem;border-top:6px solid #f1a6a1}.memory h3,.flower-story h3,.book h3{margin-bottom:.4rem;font-size:1.3rem}.body{white-space:pre-line;overflow-wrap:anywhere;margin-bottom:0}
.tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:.65rem;margin:0 auto 1.35rem}.tab{border:2px solid #d5b9e8;border-radius:999px;padding:.65rem 1.1rem;background:#fffdf8;color:var(--ink);font:inherit;font-weight:750;cursor:pointer;box-shadow:0 3px #34234712;transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease}.tab:hover,.tab[aria-selected=true]{transform:translateY(-2px);background:#ffebae;border-color:#d5a83b;box-shadow:0 5px #34234719}.tab:focus-visible{outline:3px solid #7a50a3;outline-offset:3px}.tab-panel[hidden]{display:none}.video-card{overflow:hidden;padding:.65rem;background:var(--white);border:1px solid var(--line);border-radius:1rem;box-shadow:0 5px #34234713}.video-card video{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:.65rem;background:#30263c}.video-card h3{margin:.75rem .4rem .3rem;font-size:1rem}
#ky-niem .video-feature{max-width:920px;margin:0 auto 1.6rem;padding:1rem;display:grid;grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr);align-items:center;gap:1.2rem;background:#fffdf8;border:2px solid #f0b4a0;border-radius:1.4rem;box-shadow:0 7px #8e5c4620}.video-feature-copy{padding:clamp(.5rem,2vw,1.2rem)}.video-feature-copy .label{color:#9f4a68}.video-feature-copy h3{font-family:"Playfair Display",Georgia,serif;font-size:clamp(1.5rem,3vw,2.2rem);margin:.35rem 0}.video-feature-copy p:last-child{margin:0;color:var(--muted)}.video-feature video{display:block;width:100%;max-height:430px;aspect-ratio:16/10;object-fit:cover;border-radius:1rem;background:#30263c}
.album-slide{display:grid;justify-items:center;gap:.6rem}.album-slide img{width:100%;max-height:64vh;object-fit:contain;background:#f7f1e7;border-radius:.7rem}.album-caption{margin:0;text-align:center;font-weight:750}.album-controls{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:.55rem;margin-top:.8rem}.album-position{min-width:3.5rem;text-align:center;font-weight:750;color:var(--muted)}
.art-card-media,.album-media{position:relative;display:grid;place-items:center;overflow:hidden;background:linear-gradient(110deg,#f3eaf7 8%,#fff8eb 18%,#f3eaf7 33%);background-size:200% 100%;border-radius:.65rem}.art-card-media{width:100%;aspect-ratio:4/3}.art-card-media img{width:100%;height:100%;aspect-ratio:auto}.album-media{width:100%;min-height:12rem;max-height:66vh}.album-media img{position:relative;z-index:1}.image-status{position:absolute;z-index:2;display:flex;align-items:center;gap:.55rem;padding:.45rem .75rem;border-radius:999px;background:#fffdf1e8;color:var(--ink);font-size:.88rem;font-weight:700;box-shadow:0 2px 10px #33234d19}.image-status::before{width:.85rem;height:.85rem;border:2px solid #d7c8e4;border-top-color:#8759a8;border-radius:50%;content:"";animation:image-spin .8s linear infinite}.is-error .image-status{color:#8b344d}.is-error .image-status::before{display:none}.is-error{background:#fbe9e8}.art-card-media.is-loading,.album-media.is-loading{animation:image-shimmer 1.5s ease-in-out infinite}.image-status[hidden]{display:none}@keyframes image-spin{to{transform:rotate(360deg)}}@keyframes image-shimmer{to{background-position:-200% 0}}
#making-gallery img,#school-gallery img{object-fit:cover}.writing-snippet{padding:.4rem .5rem .65rem;color:var(--muted);font-size:.95rem;line-height:1.65}
.notes{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:1rem}.notes li{background:#ffe495;padding:1.15rem;border-radius:.3rem 1rem .3rem .3rem;box-shadow:0 4px #34234714;font-weight:650}.notes li:nth-child(3n+2){background:#ffd7e4}.notes li:nth-child(3n+3){background:#dceafc}
.flowers{display:flex;justify-content:center;flex-wrap:wrap;gap:.8rem;max-width:1040px;margin-inline:auto}.flower{display:flex;flex:0 1 calc((100% - 2.4rem)/4);min-height:6rem;flex-direction:column;align-items:center;justify-content:center;border:1px solid #98bd9e;background:#fffdf7;border-radius:1rem;padding:.65rem .8rem;font-weight:750;text-align:center;line-height:1.35}.flower[aria-pressed=true]{background:#fff0af;border-color:#8a6820}.flower-story{max-width:700px;margin:1.25rem auto 0;padding:1.15rem 1.5rem;border-radius:1rem;background:#fffdf7;border:1px solid #afd0b2}
.creative{text-align:center}.postcard{display:inline-grid;gap:.2rem;justify-items:center;min-width:min(100%,18rem);background:#ffdfed;border:2px dashed #b84c80;border-radius:1.15rem;padding:1.2rem 2rem;box-shadow:0 6px #edbcd2;transform:rotate(-2deg)}.postcard:hover{transform:rotate(0)}.postcard strong{font-family:"Playfair Display",Georgia,serif;font-size:1.75rem;font-weight:600}
footer{background:#33234d;color:#fff5e5}.footer p{margin:0;font-size:.85rem}.footer a{font-weight:750}
dialog{width:min(650px,calc(100% - 2rem));max-height:85vh;border:2px solid #bd9ed8;border-radius:1.25rem;padding:1.3rem;background:var(--white);color:var(--ink)}dialog::backdrop{background:#261934b5}dialog form{display:flex;justify-content:flex-end;margin-bottom:.3rem}dialog img{margin:auto;max-height:58vh;object-fit:contain}
dialog{width:min(1000px,calc(100% - 2rem));scrollbar-width:thin;scrollbar-color:#85bf8a #edf5e9}dialog::-webkit-scrollbar,#dialog-content::-webkit-scrollbar{width:8px}dialog::-webkit-scrollbar-track,#dialog-content::-webkit-scrollbar-track{background:#edf5e9;border-radius:1rem}dialog::-webkit-scrollbar-thumb,#dialog-content::-webkit-scrollbar-thumb{background:#85bf8a;border:2px solid #edf5e9;border-radius:1rem}dialog.is-album{width:min(1120px,calc(100% - 2rem));height:min(92dvh,900px);max-height:calc(100dvh - 1.2rem);display:flex;flex-direction:column;gap:.45rem;overflow:hidden;border:6px solid #8acb8d;border-radius:1.5rem;padding:1.1rem 1.25rem 1rem;background:#fffdfd;box-shadow:0 18px 60px #10201650}dialog.is-album form{position:absolute;z-index:5;top:.55rem;right:.6rem;margin:0}dialog.is-album .close{width:2.6rem;height:2.6rem;padding:0;border:0;background:#fff;color:#787878;font-size:1.8rem;line-height:1;box-shadow:none}dialog.is-album .close:hover{background:#ffe3ed;color:#ad3769;transform:rotate(90deg)}dialog.is-album #dialog-content{display:flex;flex:1;min-height:0;overflow:hidden}dialog.is-album .album-slide{width:100%;height:100%;min-height:0;grid-template-rows:minmax(0,1fr) auto;gap:.45rem}dialog.is-album .album-media{height:100%;min-height:0;max-height:none;background:#fbfaf5}dialog.is-album .album-slide img{width:100%;height:100%;max-height:none}dialog.is-album .album-caption{color:#d73372;font-size:clamp(1rem,2vw,1.3rem)}dialog.is-album .album-controls{flex:0 0 auto;margin:0;padding:.1rem 0 .15rem}
.album-arrow{position:absolute;z-index:4;top:50%;display:grid;place-items:center;width:3.5rem;height:3.5rem;padding:0;border:2px solid #7b283f;border-radius:50%;background:#f23e7c;color:#fff;font:800 2.35rem/1 system-ui;box-shadow:0 5px 12px #2e1d2d46;transform:translateY(-50%);transition:transform .18s ease,background-color .18s ease,box-shadow .18s ease}.album-arrow:hover{background:#d92366;box-shadow:0 7px 16px #2e1d2d55;transform:translateY(-50%) scale(1.09)}.album-arrow:focus-visible{outline:3px solid #672c85;outline-offset:3px}.album-arrow-prev{left:.8rem}.album-arrow-next{right:.8rem}.album-play{min-width:9rem;border-color:#83bb86;background:#f4fff1;color:#276a3b}.album-play:hover{background:#def6dc}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:700px){.hero{grid-template-columns:1fr;gap:1.6rem;padding-block:2.5rem}.cover-art{transform:none}.footer{align-items:flex-start;flex-direction:column}.edition{font-size:.65rem}}
@media(max-width:700px){#ky-niem .video-feature{grid-template-columns:1fr;gap:.25rem}.video-feature-copy{padding:.45rem .6rem}.video-feature video{max-height:55vh}}
@media(max-width:520px){.tabs{display:grid;grid-template-columns:1fr;width:100%}.tab{width:100%;text-align:center}.gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}.art-card{padding:.45rem}.art-card strong{font-size:.84rem;line-height:1.3}.video-card{padding:.45rem}.album-controls{gap:.4rem}.album-controls .button{padding:.55rem .75rem;font-size:.9rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.petal{animation:none}}
@media(prefers-reduced-motion:reduce){.flower-rain{display:none}.album-arrow,.album-play{transition:none!important}}
@media(max-width:600px){dialog.is-album{width:calc(100% - 1rem);height:min(90dvh,780px);max-height:calc(100dvh - 1rem);border-width:4px;border-radius:1.1rem;padding:.8rem}.album-arrow{width:2.8rem;height:2.8rem;font-size:2rem}.album-arrow-prev{left:.45rem}.album-arrow-next{right:.45rem}}
@media(prefers-reduced-motion:reduce){.art-card-media.is-loading,.album-media.is-loading{animation:none}.image-status::before{animation:none}}

.back-top {
  position: fixed;
  z-index: 2;
  right: max(.9rem, env(safe-area-inset-right));
  bottom: max(.9rem, env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 2px solid #a53c70;
  border-radius: 50%;
  background: #ffe2ee;
  color: #80315a;
  box-shadow: 0 4px 12px #33234d33;
  transition: transform .2s ease, background-color .2s ease;
}
.back-top[hidden] { display: none; }
.back-top:hover { background: #ffcee4; transform: translateY(-3px); }
.back-top svg { width: 2rem; height: 2rem; }
.footer { padding-right: 3.6rem; }

@keyframes rise-in {
  from { opacity: .65; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .cover-copy, .section-title.in-view,
  .flower-story > *, dialog[open] {
    animation: rise-in .38s ease-out;
  }
}
@media (prefers-reduced-motion: reduce) {
  .back-top { transition: none; }
}

.envelope {
  position: relative;
  display: inline-block;
  width: 3rem;
  height: 1.95rem;
  margin: .65rem .45rem 0;
  vertical-align: middle;
  isolation: isolate;
  border-radius: .3rem;
  background: #c95883;
  perspective: 8rem;
}
.envelope::before, .envelope::after {
  position: absolute;
  inset: 0;
  content: "";
  border-radius: inherit;
}
.envelope::before {
  z-index: 2;
  background: #f5a8c4;
  clip-path: polygon(0 0, 50% 60%, 100% 0, 100% 100%, 0 100%);
}
.envelope::after {
  z-index: 3;
  background: #df719b;
  clip-path: polygon(0 0, 100% 0, 50% 67%);
  transform-origin: top;
}
.envelope-paper {
  position: absolute;
  z-index: 1;
  inset: .12rem .38rem auto;
  height: 1.65rem;
  border-radius: .18rem;
  background: #fffdf6;
  color: #a4376c;
  text-align: center;
  font-size: .8rem;
}
.letter[open] .envelope::after,
.card-envelope::after {
  z-index: 0;
  transform: rotateX(180deg);
}
.letter[open] .envelope-paper,
.card-envelope .envelope-paper {
  transform: translateY(-.8rem);
}

.flower-icon {
  --petal-color: #eb88af;
  position: relative;
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  margin: .1rem auto .25rem;
}
.flower:nth-child(2) .flower-icon { --petal-color: #b39be6; }
.flower:nth-child(3) .flower-icon { --petal-color: #ffbd73; }
.flower:nth-child(4) .flower-icon { --petal-color: #82cda0; }
.flower:nth-child(5) .flower-icon { --petal-color: #79bce8; }
.flower:nth-child(6) .flower-icon { --petal-color: #f28f83; }
.flower:nth-child(7) .flower-icon { --petal-color: #e9bd58; }
.flower-icon::after {
  position: absolute;
  inset: calc(50% - .36rem);
  border-radius: 50%;
  background: #ffe08a;
  box-shadow: inset 0 0 0 1px #a67838;
  content: "";
}
.flower-petal {
  position: absolute;
  top: calc(50% - .9rem);
  left: calc(50% - .38rem);
  width: .76rem;
  height: .9rem;
  border-radius: 55% 55% 45% 45%;
  background: var(--petal-color);
  transform: rotate(var(--angle)) translateY(-.12rem);
  transform-origin: center bottom;
}
.flower[aria-pressed="true"] .flower-petal {
  transform: rotate(var(--angle)) translateY(-.34rem) scale(1.08);
}

@keyframes open-envelope {
  0% { z-index: 3; transform: rotateX(0); }
  100% { z-index: 0; transform: rotateX(180deg); }
}
@keyframes lift-paper {
  from { transform: translateY(0); }
  to { transform: translateY(-.8rem); }
}
@media (prefers-reduced-motion: no-preference) {
  .letter[open] .envelope::after,
  .card-envelope::after {
    animation: open-envelope .35s ease-in-out both;
  }
  .letter[open] .envelope-paper,
  .card-envelope .envelope-paper {
    animation: lift-paper .35s .23s ease-out both;
  }
  .letter[open] .letter-body { animation: rise-in .38s .15s ease-out both; }
  .flower-petal { transition: transform .38s cubic-bezier(.2, .7, .35, 1.35); }
}

#book-page { position: relative; overflow: hidden; }
.page-turn { display: none; }

@keyframes cover-title-in {
  from { opacity: 0; transform: translateY(.25em); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes drift-to-cover {
  from { opacity: 0; transform: translate(var(--start-x), -1.5rem) rotate(-25deg); }
  to { opacity: 1; transform: translate(0, 0) rotate(0); }
}
@keyframes turn-paper-edge {
  from { opacity: .85; transform: scaleX(1); }
  to { opacity: 0; transform: scaleX(.08); }
}

@media (prefers-reduced-motion: no-preference) {
  #ten-bao em {
    display: inline-block;
    animation: cover-title-in .65s .25s ease-out both;
  }
  .petal { animation: drift-to-cover 1.15s .25s ease-out both; }
  .petal-one { --start-x: .9rem; }
  .petal-two { --start-x: -.9rem; animation-delay: .52s; }

  .page-turn {
    position: absolute;
    inset-block: 0;
    width: min(18%, 5rem);
    display: block;
    pointer-events: none;
    animation: turn-paper-edge .42s ease-out both;
  }
  .page-turn[data-direction="next"] {
    right: 0;
    transform-origin: right;
    background: linear-gradient(to right, transparent, #eee3d6 70%, #cbb1dc);
  }
  .page-turn[data-direction="previous"] {
    left: 0;
    transform-origin: left;
    background: linear-gradient(to left, transparent, #eee3d6 70%, #cbb1dc);
  }
}

/* A brief entrance for each piece of the scrapbook. */
@keyframes scrapbook-arrive {
  from {
    opacity: .35;
    translate: var(--enter-x, 0) 22px;
    rotate: var(--enter-angle, 0deg);
  }
  72% { translate: 0 -3px; }
  to { opacity: 1; translate: 0 0; rotate: 0deg; }
}

@keyframes garden-sparkle {
  0% { opacity: 0; translate: 0 10px; scale: .55; }
  32% { opacity: .85; }
  100% { opacity: 0; translate: var(--sparkle-x) -32px; scale: 1.25; rotate: 24deg; }
}

@media (prefers-reduced-motion: no-preference) {
  :is(.letter, .book, .art-card, .memory, .notes li, .flower, .flower-story, .postcard).in-view {
    animation: scrapbook-arrive .56s var(--enter-delay, 0s) cubic-bezier(.2,.65,.35,1) backwards;
  }
  .letter, .art-card, .memory, .notes li, .postcard {
    --enter-x: -9px;
    --enter-angle: -2deg;
  }
  :is(.art-card, .memory, .notes li, .flower):nth-child(even) {
    --enter-x: 9px;
    --enter-angle: 2deg;
    --enter-delay: .09s;
  }
  :is(.notes li, .flower):nth-child(3n) { --enter-delay: .16s; }

  :is(#net-ve, #loi-chuc, #viec-tot) .section-title { position: relative; }
  :is(#net-ve, #loi-chuc, #viec-tot) .section-title.in-view::before,
  :is(#net-ve, #loi-chuc, #viec-tot) .section-title.in-view::after {
    position: absolute;
    top: -.85rem;
    color: #a74980;
    font-size: clamp(.8rem, 3vw, 1.65rem);
    pointer-events: none;
    animation: garden-sparkle 1s ease-out both;
  }
  :is(#net-ve, #loi-chuc, #viec-tot) .section-title.in-view::before {
    content: "✿" / "";
    left: .6rem;
    --sparkle-x: .85rem;
  }
  :is(#net-ve, #loi-chuc, #viec-tot) .section-title.in-view::after {
    content: "✦" / "";
    right: .6rem;
    color: #7650a0;
    --sparkle-x: -.85rem;
    animation-delay: .13s;
  }
}

.toc {
  position: sticky;
  top: 0;
  z-index: 3;
  box-shadow: 0 3px 10px #33234d18;
}
main section[id] { scroll-margin-top: calc(var(--toc-height, 4rem) + .75rem); }

@media (max-width: 600px) {
  .toc-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: calc(100% - 1rem);
    gap: .2rem;
    padding-block: .25rem;
  }
  .toc a {
    display: grid;
    place-items: center;
    min-height: 44px;
    padding: .15rem .2rem;
    text-align: center;
    font-size: .85rem;
    line-height: 1.2;
  }
}

.toc a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border: 1px solid transparent;
}
.toc-icon {
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  flex: none;
  border-radius: .55rem;
  background: #ffdf92;
  line-height: 1;
}
.toc a:nth-child(3n+2) .toc-icon { background: #ccefd5; }
.toc a:nth-child(3n) .toc-icon { background: #ffd1e3; }
.toc a:is(:focus-visible, :active) {
  background: #fffdf7;
  border-color: #c5a7e7;
}
@media (hover: hover) {
  .toc a:hover {
    background: #fffdf7;
    border-color: #c5a7e7;
    box-shadow: 0 3px #dec9f0;
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .toc a, .toc-icon { transition: transform .18s ease-out; }
  .toc a:hover { transform: translateY(-2px); }
  .toc a:hover .toc-icon { transform: rotate(-12deg) scale(1.12); }
}
@media (max-width: 600px) {
  .toc a {
    flex-direction: column;
    justify-content: center;
    gap: .16rem;
    min-height: 52px;
  }
  .toc-icon { width: 1.35rem; height: 1.35rem; }
}

/* Cut-paper backgrounds leave the reading surface unobstructed. */
#loi-ngo, #net-ve, #loi-chuc, #sang-tao {
  position: relative;
  isolation: isolate;
}
#loi-ngo::before, #net-ve::before, #loi-chuc::before, #sang-tao::before {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  content: "";
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#loi-ngo::before {
  inset: .5rem 0 0;
  background-image: url("assets/heart-paper.svg");
}
#loi-ngo { padding-bottom: 7rem; }
#net-ve::before {
  inset: 0;
  background-image: url("assets/flower-paper.svg");
  opacity: .7;
}
#net-ve .gallery { padding: .4rem; }

#van-hoc {
  border-radius: 3% 3% 0 0 / 1.5rem 1.5rem 0 0;
  border-top: 3px dashed #cdb6e4;
  border-bottom: 3px dashed #cdb6e4;
}
#ky-niem {
  border-radius: 5rem 1rem 5rem 1rem;
  margin-inline: clamp(.5rem, 2vw, 2rem);
}
#loi-chuc::before {
  inset: .8rem 0 auto auto;
  width: clamp(6rem, 20vw, 13rem);
  height: clamp(6rem, 20vw, 13rem);
  background-image: url("assets/heart-paper.svg");
  opacity: .65;
}
.notes { gap: 1.5rem; }
.notes li {
  position: relative;
  isolation: isolate;
  padding: 1.7rem 1.15rem 1.2rem;
  border-radius: 1rem 1rem 2rem 2rem;
}
.notes li::before {
  position: absolute;
  content: "";
  top: -.75rem;
  left: calc(50% - 1rem);
  width: 2rem;
  height: 2rem;
  background: url("assets/heart-paper.svg") center / contain no-repeat;
}
.notes li:nth-child(even) { border-radius: 2rem .8rem 2rem .8rem; }
.notes li:nth-child(even)::before { background-image: url("assets/flower-paper.svg"); }

#viec-tot {
  border-radius: 3rem 3rem 0 0;
  background-image: url("assets/flower-paper.svg"), url("assets/flower-paper.svg");
  background-size: 6rem, 8rem;
  background-repeat: no-repeat;
  background-position: left .5rem bottom .25rem, right .5rem bottom .25rem;
}
#sang-tao { padding-top: 8rem; }
#sang-tao::before {
  content: "20–11" / "";
  top: 1.2rem;
  left: 0;
  width: 100%;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: clamp(4.5rem, 12vw, 9rem);
  line-height: 1;
  color: #e5cfe9;
  letter-spacing: .04em;
}

@media (max-width: 600px) {
  #loi-ngo { padding-bottom: 3rem; }
  #loi-ngo::before {
    inset: .75rem 0 auto auto;
    width: 8rem;
    height: 7rem;
    opacity: .6;
  }
  #net-ve::before { background-position: center top; background-size: 14rem; }
  #ky-niem { border-radius: 2rem .75rem; }
  #viec-tot { border-radius: 2rem 2rem 0 0; padding-bottom: 2rem; }
  #sang-tao { padding-top: 6.5rem; }
}

.masthead {
  background: linear-gradient(#eef6ff, #fff8e9);
  border-bottom: 0;
}
.top {
  position: relative;
  padding-block: 1.15rem .5rem;
}
.schoolyard {
  height: clamp(5rem, 14vw, 12rem);
  background: url("assets/san-truong.svg") center bottom / auto 100% repeat-x;
}
.brand {
  padding: .3rem .65rem;
  border-radius: 1rem;
  background: #fffdf7d9;
}
footer {
  background: #eaf4dc;
  color: var(--ink);
}
.footer-yard { height: clamp(7rem, 18vw, 14rem); }
.footer {
  width: 100%;
  background: #33234d;
  color: #fff5e5;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  gap: .5rem;
  padding: 1.4rem 4.5rem 1.6rem 1.25rem;
}
.footer strong {
  font: 600 clamp(1.3rem, 3vw, 1.75rem) "Playfair Display", Georgia, serif;
}
.footer-signature { font-size: .9rem; color: #f1d8ed; }

#sang-tao { padding-bottom: 3rem; }
.craft-table {
  position: relative;
  isolation: isolate;
  width: min(100%, 720px);
  margin: 1rem auto 0;
  padding: 3rem clamp(1.2rem, 6vw, 5rem) 1rem;
  border: 2px solid #e5cc9f;
  border-radius: 2rem;
  background: repeating-linear-gradient(0deg, #fff0d4 0 28px, #f7e6c6 28px 29px);
  box-shadow: 0 8px 0 #e4cfac55;
}
.craft-table .postcard {
  position: relative;
  max-width: 100%;
  min-width: min(100%, 18rem);
  background: #ffe1ec;
  box-shadow: 0 8px 18px #9d527033;
}
.craft-decoration {
  position: absolute;
  pointer-events: none;
  line-height: 1;
}
.craft-pencil {
  left: 4%;
  bottom: 20%;
  font-size: 5rem;
  color: #936628;
  rotate: -25deg;
}
.craft-flower {
  right: 4%;
  top: 1rem;
  font-size: 5rem;
  color: #bd769b;
}
.craft-heart {
  left: 6%;
  top: 1rem;
  font-size: 2.5rem;
  color: #b75c7f;
  rotate: -12deg;
}
.craft-tape {
  position: absolute;
  z-index: 1;
  width: 5rem;
  height: 1.5rem;
  top: -.8rem;
  left: calc(50% - 2.5rem);
  background: #c7b1e6bb;
  rotate: -5deg;
  border-inline: 3px dotted #fff4e9;
}
.craft-caption {
  position: relative;
  font-size: .85rem;
  color: #694a58;
  font-weight: 650;
  margin: 1.3rem 0 .2rem;
}
@media (max-width: 600px) {
  .top { flex-wrap: wrap; justify-content: center; gap: .25rem .7rem; }
  .schoolyard { background-size: auto 100%; height: 6rem; }
  .footer-yard { height: 8rem; }
  .footer { align-items: center; }
  .craft-table { padding-top: 3rem; border-radius: 1.2rem; }
  .craft-pencil { font-size: 2.4rem; left: .3rem; bottom: 3rem; }
  .craft-flower { font-size: 2.6rem; right: .5rem; top: .4rem; }
  .craft-heart { font-size: 1.7rem; left: .6rem; top: .65rem; }
}

.masthead .schoolyard {
  height: clamp(8rem, 22vw, 17rem);
  background-image: url("assets/buc-giang.svg");
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-color: #f5f0e4;
}
.music-toggle {
  position: fixed;
  z-index: 4;
  right: max(.9rem, env(safe-area-inset-right));
  bottom: max(4.8rem, calc(env(safe-area-inset-bottom) + 4.8rem));
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 3rem;
  padding: .45rem .8rem;
  border: 2px solid #b94e7b;
  border-radius: 2rem;
  background: #fff0c9;
  color: #573567;
  box-shadow: 0 4px 12px #33234d2b;
  font: inherit;
  font-weight: 750;
}
.music-note { color: #aa376d; font-size: 1.5rem; line-height: 1; }
.music-toggle[aria-pressed="true"] .music-note { animation: music-bounce .55s ease-in-out infinite alternate; }
@keyframes music-bounce { to { transform: rotate(12deg) scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .music-note { animation: none !important; } }
@media (max-width: 600px) {
  .masthead .schoolyard { height: 10rem; }
}

/* Keep the album image, arrows and controls centered as one vertical layout. */
dialog.is-album #dialog-content { flex-direction: column; align-items: stretch; }
dialog.is-album .album-slide { flex: 1 1 auto; width: 100%; height: auto; min-width: 0; }
dialog.is-album .album-media { flex: 1 1 auto; width: 100%; }
dialog.is-album .album-controls { width: 100%; justify-content: center; }

/* Tiny CSS blossoms drift down the page; three carry a little ten-point mark. */
.flower-rain { position: fixed; z-index: 3; inset: 0; overflow: hidden; pointer-events: none; }
.flower-rain span {
  position: absolute; top: -7vh; left: var(--flower-x); width: 27px; height: 27px;
  border-radius: 50%; opacity: .76;
  background:
    radial-gradient(ellipse 28% 39% at 50% 13%, var(--flower-petal, #f29cba) 0 92%, transparent 100%),
    radial-gradient(ellipse 28% 39% at 82% 32%, var(--flower-petal, #f29cba) 0 92%, transparent 100%),
    radial-gradient(ellipse 28% 39% at 82% 68%, var(--flower-petal, #f29cba) 0 92%, transparent 100%),
    radial-gradient(ellipse 28% 39% at 50% 87%, var(--flower-petal, #f29cba) 0 92%, transparent 100%),
    radial-gradient(ellipse 28% 39% at 18% 68%, var(--flower-petal, #f29cba) 0 92%, transparent 100%),
    radial-gradient(ellipse 28% 39% at 18% 32%, var(--flower-petal, #f29cba) 0 92%, transparent 100%),
    radial-gradient(circle at 50% 50%, var(--flower-center, #ffd86e) 0 20%, transparent 23%);
  filter: drop-shadow(0 1px 1px #60345036);
  animation: flower-fall var(--flower-duration, 22s) var(--flower-delay, 0s) linear infinite;
}
.flower-rain span::after { content: ""; }
.flower-rain .flower-ten::after {
  content: "10"; position: absolute; inset: 0; display: grid; place-items: center;
  color: #71482e; font: 900 7px/1 system-ui, sans-serif; text-shadow: 0 0 2px #fff4c8;
}
.flower-rain span:nth-child(1) { --flower-x: 5%; --flower-delay: -12s; --flower-duration: 22s; --flower-drift: 10vw; --flower-spin: 360deg; }
.flower-rain span:nth-child(2) { --flower-x: 17%; --flower-delay: -3s; --flower-duration: 19s; --flower-drift: -8vw; --flower-spin: 180deg; --flower-petal: #ed9bc5; --flower-center: #ffe486; }
.flower-rain span:nth-child(3) { --flower-x: 29%; --flower-delay: -15s; --flower-duration: 24s; --flower-drift: 12vw; --flower-spin: 540deg; --flower-petal: #cda5df; }
.flower-rain span:nth-child(4) { --flower-x: 42%; --flower-delay: -8s; --flower-duration: 20s; --flower-drift: -11vw; --flower-spin: 360deg; --flower-petal: #f3aec2; }
.flower-rain span:nth-child(5) { --flower-x: 55%; --flower-delay: -18s; --flower-duration: 25s; --flower-drift: 8vw; --flower-spin: 180deg; --flower-petal: #ffd17a; --flower-center: #fff0a5; }
.flower-rain span:nth-child(6) { --flower-x: 68%; --flower-delay: -6s; --flower-duration: 21s; --flower-drift: -13vw; --flower-spin: 540deg; --flower-petal: #cda5df; }
.flower-rain span:nth-child(7) { --flower-x: 79%; --flower-delay: -14s; --flower-duration: 23s; --flower-drift: 10vw; --flower-spin: 360deg; --flower-petal: #ed9bc5; }
.flower-rain span:nth-child(8) { --flower-x: 91%; --flower-delay: -9s; --flower-duration: 20s; --flower-drift: -9vw; --flower-spin: 180deg; --flower-petal: #ffd17a; --flower-center: #fff0a5; }
.flower-rain span:nth-child(9) { --flower-x: 98%; --flower-delay: -20s; --flower-duration: 26s; --flower-drift: -14vw; --flower-spin: 540deg; --flower-petal: #cda5df; }
@keyframes flower-fall { to { transform: translate3d(var(--flower-drift, 8vw), 115vh, 0) rotate(var(--flower-spin, 360deg)); } }
@media (prefers-reduced-motion: reduce) { .flower-rain { display: none; } }

/* Draw recognizable six-petal flowers rather than round gradient dots. */
.flower-rain > span {
  width: 46px; height: 46px; border-radius: 0; background: none; filter: none;
  opacity: .92;
}
.flower-rain > span > i {
  position: absolute; top: 3px; left: 17px; width: 12px; height: 21px;
  border: 1px solid #9e5671a8; border-radius: 55% 55% 48% 48%;
  background: var(--flower-petal, #f29cba);
  transform-origin: 6px 20px;
}
.flower-rain > span > i:nth-of-type(2) { transform: rotate(60deg); }
.flower-rain > span > i:nth-of-type(3) { transform: rotate(120deg); }
.flower-rain > span > i:nth-of-type(4) { transform: rotate(180deg); }
.flower-rain > span > i:nth-of-type(5) { transform: rotate(240deg); }
.flower-rain > span > i:nth-of-type(6) { transform: rotate(300deg); }
.flower-rain > span::after {
  content: ""; position: absolute; z-index: 1; left: 13px; top: 13px;
  width: 20px; height: 20px; border: 1px solid #a2793f;
  border-radius: 50%; background: var(--flower-center, #ffda6c);
  box-shadow: inset 0 0 0 2px #fff6cf;
}
.flower-rain > span.flower-ten > b {
  position: absolute; z-index: 2; left: 50%; top: 50%;
  color: #684322; font: 1000 13px/1 system-ui, sans-serif;
  text-shadow: 0 1px #fff1c3; transform: translate(-50%, -50%);
}
.flower-rain > span:nth-child(1) { --flower-x: 5%; --flower-spin: 360deg; }
.flower-rain > span:nth-child(2) { --flower-x: 16%; --flower-spin: 0deg; }
.flower-rain > span:nth-child(3) { --flower-x: 27%; --flower-spin: 360deg; }
.flower-rain > span:nth-child(4) { --flower-x: 38%; --flower-spin: 360deg; }
.flower-rain > span:nth-child(5) { --flower-x: 49%; --flower-spin: 0deg; }
.flower-rain > span:nth-child(6) { --flower-x: 60%; --flower-spin: 360deg; }
.flower-rain > span:nth-child(7) { --flower-x: 71%; --flower-spin: 360deg; }
.flower-rain > span:nth-child(8) { --flower-x: 82%; --flower-spin: 0deg; }
.flower-rain > span:nth-child(9) { --flower-x: 92%; --flower-spin: 360deg; }

/* Keep the full photograph and its caption/buttons within the dialog viewport. */
dialog.is-album { height: min(88dvh, 860px); max-height: calc(100dvh - 2rem); }
dialog.is-album #dialog-content { flex-direction: column; align-items: stretch; }
dialog.is-album .album-slide {
  display: grid; flex: 1 1 auto; width: 100%; height: auto; min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto;
}
dialog.is-album .album-media { width: 100%; height: 100%; min-height: 0; max-height: none; }
dialog.is-album .album-slide img {
  width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain;
}
/* Give the viewer image a definite box so portrait photos scale down instead of cropping. */
dialog.is-album .album-media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: min(62dvh, 680px);
  min-height: 0;
  max-height: 62dvh;
}
dialog.is-album .album-media > img {
  display: block;
  flex: 0 1 auto;
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain !important;
}
dialog.is-album .album-controls { width: 100%; justify-content: center; }
.album-arrow svg { display: block; width: 1.45rem; height: 1.45rem; overflow: visible; }
.album-arrow svg path { fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
dialog.is-album .close svg { display: block; width: 1.35rem; height: 1.35rem; }
dialog.is-album .close svg path { fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; }
@media (max-width: 600px) {
  dialog.is-album { height: min(88dvh, 760px); }
  .flower-rain > span { transform: scale(.82); }
  .album-arrow { width: 3rem; height: 3rem; }
}
@media (max-width: 700px) {
  .flowers { max-width: 540px; gap: .65rem; }
  .flower { flex-basis: calc((100% - .65rem)/2); min-height: 5.6rem; padding: .55rem .45rem; }
  .flower-story { max-width: 540px; }
}

/* Give every dialog a visible, consistently centered close control. */
dialog:not(.is-album) { position: fixed; width: min(820px, calc(100% - 2rem)); max-height: min(88dvh, 860px); overflow-y: auto; padding: 3.25rem clamp(1rem, 3vw, 1.6rem) 1.35rem; }
dialog:not(.is-album) form { position: absolute; z-index: 5; top: .6rem; right: .65rem; margin: 0; }
dialog:not(.is-album) .close { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; padding: 0; border: 1px solid #efb8d0; border-radius: 50%; background: #ffe7f0; color: #a93768; box-shadow: 0 3px 8px #33234720; font-size: 1.5rem; }
dialog:not(.is-album) .close:hover { background: #ffd3e4; transform: rotate(90deg); }
dialog:not(.is-album) .close svg { display: block; width: 1.3rem; height: 1.3rem; }
dialog:not(.is-album) .close svg path { fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; }
dialog.is-card { width: min(880px, calc(100% - 2rem)); }
dialog.is-card #dialog-content { display: grid; justify-items: center; gap: .8rem; }
dialog.is-card .card-envelope { margin: .2rem auto 0; transform: scale(1.12); }
dialog.is-card #dialog-content img { width: min(100%, 42rem); max-height: 47dvh; height: auto; object-fit: contain; border-radius: .85rem; }
dialog.is-card #dialog-content p.body { width: min(100%, 45rem); margin: 0; padding: 1rem clamp(1rem, 3vw, 1.6rem); border: 1px dashed #e5a9c0; border-radius: 1rem; background: #fff4f7; text-align: center; line-height: 1.8; }
@media (max-width: 600px) {
  dialog:not(.is-album) { width: calc(100% - 1rem); max-height: 90dvh; padding: 3rem .85rem 1rem; }
  dialog.is-card { width: calc(100% - 1rem); }
  dialog.is-card #dialog-content img { max-height: 42dvh; }
  dialog.is-album .album-media { height: min(56dvh, 460px); max-height: 56dvh; }
}