:root {
  --ink: #4c3831;
  --ink-soft: #826b62;
  --cream: #fff4e7;
  --paper: #fffaf3;
  --apricot: #f08e72;
  --apricot-light: #ffc3a8;
  --sage: #b8c5a2;
  --sage-deep: #755047;
  --sun: #f2bd5f;
  --line: rgba(98, 67, 57, 0.14);
  --display: "YouYuan", "Yuanti SC", "STKaiti", serif;
  --body: "Avenir Next Rounded", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
svg { display: block; }
button { font: inherit; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: 1rem;
  left: 1rem;
  transform: translateY(-150%);
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: white;
  border-radius: 999px;
}
.skip-link:focus { transform: translateY(0); }

.grain {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 99;
  opacity: 0.065;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.site-header {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 88px;
  padding: 0 5vw;
  transition: background 250ms ease, box-shadow 250ms ease, height 250ms ease;
}
.site-header.scrolled {
  height: 72px;
  background: rgba(255, 244, 231, 0.9);
  box-shadow: 0 1px 0 rgba(36, 57, 47, 0.09);
  backdrop-filter: blur(18px);
}
.wordmark { display: inline-flex; align-items: center; gap: 0.62rem; width: max-content; }
.wordmark svg { width: 29px; fill: var(--apricot); }
.wordmark span { font-family: Georgia, serif; font-size: 0.9rem; letter-spacing: 0.22em; font-weight: 700; }

.desktop-nav { display: flex; gap: clamp(1.5rem, 4vw, 3.2rem); }
.desktop-nav a { position: relative; font-size: 0.82rem; letter-spacing: 0.08em; }
.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -9px;
  height: 1px;
  background: var(--apricot);
  transition: left 200ms ease, right 200ms ease;
}
.desktop-nav a:hover::after { left: 0; right: 0; }
.header-cta { justify-self: end; display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; letter-spacing: 0.08em; }
.header-cta svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform 180ms ease; }
.header-cta:hover svg { transform: translateX(4px); }
.menu-button, .mobile-nav { display: none; }

.hero {
  position: relative;
  min-height: 810px;
  height: 100svh;
  display: grid;
  grid-template-columns: 0.96fr 1.04fr;
  align-items: center;
  padding: 110px 7vw 58px 9vw;
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -16%;
  right: -7%;
  width: 60vw;
  height: 115%;
  border-radius: 47% 0 0 56%;
  background: radial-gradient(circle at 48% 45%, #ffd8c4 0 18%, #f7b18f 19% 58%, #ed9275 90%);
  transform: rotate(4deg);
}
.hero::after {
  content: "SUI";
  position: absolute;
  z-index: -1;
  right: -2vw;
  bottom: -0.14em;
  font-family: Georgia, serif;
  font-size: clamp(11rem, 22vw, 23rem);
  line-height: 1;
  color: rgba(255, 250, 240, 0.1);
  letter-spacing: -0.08em;
}

.eyebrow { display: flex; align-items: center; gap: 0.7rem; margin: 0 0 1.5rem; font-size: 0.67rem; font-weight: 700; letter-spacing: 0.2em; }
.eyebrow span { display: block; width: 32px; height: 1px; background: var(--apricot); }
.hero h1, .section-heading h2, .moments-heading h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.045em;
}
.hero h1 { max-width: 700px; font-size: clamp(3.6rem, 6vw, 7rem); line-height: 1.13; font-weight: 700; }
em { color: var(--apricot); font-style: italic; font-weight: 400; }
.hero-intro { margin: 2rem 0 0; color: var(--ink-soft); font-size: clamp(0.95rem, 1.1vw, 1.08rem); line-height: 2; letter-spacing: 0.04em; }
.hero-actions { display: flex; align-items: center; gap: 2.2rem; margin-top: 2.6rem; }
.primary-button {
  display: inline-flex;
  align-items: center;
  gap: 1.8rem;
  padding: 1.05rem 1.35rem 1.05rem 1.6rem;
  border-radius: 999px;
  color: #fffaf0;
  background: var(--ink);
  font-size: 0.82rem;
  letter-spacing: 0.11em;
  box-shadow: 0 15px 35px rgba(106, 69, 57, 0.18);
  transition: transform 180ms ease, background 180ms ease;
}
.primary-button svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform 180ms ease; }
.primary-button:hover { transform: translateY(-3px); background: var(--sage-deep); }
.primary-button:hover svg { transform: translateX(4px); }
.today-note { display: flex; align-items: center; gap: 0.7rem; margin: 0; }
.today-note > span { font-family: Georgia, serif; font-size: 2rem; color: var(--apricot); }
.today-note small { max-width: 4.2rem; color: var(--ink-soft); font-size: 0.66rem; line-height: 1.45; }

.hero-art { position: relative; height: min(720px, 80vh); min-height: 580px; }
.cover-visual {
  position: absolute;
  z-index: 2;
  left: 9%;
  top: 2%;
  width: min(34vw, 520px);
  margin: 0;
  padding: 14px 14px 22px;
  border-radius: 52px;
  background: rgba(255,250,243,0.95);
  box-shadow: 0 35px 80px rgba(110,61,44,0.22), inset 0 0 0 1px rgba(255,255,255,0.9);
  transform: rotate(-2deg);
}
.cover-visual::before {
  content: "";
  position: absolute;
  inset: -12px;
  z-index: -1;
  border: 2px dashed rgba(255,250,243,0.45);
  border-radius: 62px;
}
.cover-visual img { display: block; width: 100%; aspect-ratio: 0.82; object-fit: cover; border-radius: 40px; }
.cover-visual figcaption { display: flex; justify-content: space-between; align-items: end; gap: 1rem; padding: 1rem 1rem 0.1rem; }
.cover-visual figcaption span { color: var(--apricot); font-size: 0.55rem; font-weight: 700; letter-spacing: 0.15em; }
.cover-visual figcaption strong { font-family: Georgia, serif; font-size: 0.7rem; letter-spacing: 0.1em; white-space: nowrap; }
.cover-sticker { position: absolute; z-index: 3; top: 28px; right: -24px; padding: 0.72rem 1rem; border-radius: 999px; color: white; background: var(--sage-deep); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; transform: rotate(8deg); box-shadow: 0 10px 24px rgba(76,56,49,0.2); }
.cover-bubble { position: absolute; border-radius: 50%; background: rgba(255,250,243,0.28); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35); }
.bubble-one { width: 96px; height: 96px; right: 4%; top: 12%; }
.bubble-two { width: 46px; height: 46px; left: 1%; bottom: 18%; }
.moon-scene { position: absolute; left: 14%; top: 5%; width: min(36vw, 500px); height: min(36vw, 500px); }
.moon {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: inset -35px -24px 0 rgba(237, 189, 101, 0.25), 0 40px 80px rgba(99, 61, 37, 0.17);
}
.moon::after {
  content: "";
  position: absolute;
  left: 31%;
  top: -6%;
  width: 82%;
  height: 88%;
  border-radius: 50%;
  background: #e9a47d;
  transform: rotate(-12deg);
}
.moon-dimple { position: absolute; z-index: 1; border-radius: 50%; background: rgba(237, 189, 101, 0.2); }
.dimple-one { width: 36px; height: 36px; left: 19%; top: 25%; }
.dimple-two { width: 18px; height: 18px; left: 33%; top: 66%; }
.bear { position: absolute; z-index: 2; width: 55%; left: 2%; top: 32%; color: var(--ink); stroke-width: 3; }
.bear-fill { fill: #fff4df; }
.swing-line { position: absolute; z-index: 1; top: 65%; width: 1px; height: 43%; background: rgba(36, 57, 47, 0.55); transform-origin: top; }
.line-left { left: 10%; transform: rotate(5deg); }
.line-right { left: 45%; transform: rotate(-4deg); }

.birth-card {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 7%;
  width: 214px;
  padding: 1.45rem 1.55rem;
  color: var(--ink);
  background: rgba(255, 250, 240, 0.92);
  border-radius: 24px;
  box-shadow: 0 24px 50px rgba(80, 44, 28, 0.18);
  transform: rotate(4deg);
  backdrop-filter: blur(8px);
}
.birth-card::before { content: ""; position: absolute; top: -12px; left: 50%; width: 48px; height: 24px; border-radius: 6px; background: rgba(255, 225, 175, 0.8); transform: translateX(-50%) rotate(-2deg); }
.birth-card > span { font-size: 0.58rem; letter-spacing: 0.2em; }
.birth-card strong { display: block; margin: 0.3rem 0; font-family: Georgia, serif; font-size: 2.5rem; letter-spacing: 0.08em; font-weight: 500; }
.birth-card p { margin: 0; color: var(--ink-soft); font-size: 0.66rem; letter-spacing: 0.05em; }

.orbit { position: absolute; z-index: -1; border: 1px solid rgba(255, 250, 240, 0.25); border-radius: 50%; }
.orbit-one { width: 82%; aspect-ratio: 1; left: 4%; top: -7%; }
.orbit-two { width: 58%; aspect-ratio: 1; right: -4%; bottom: 4%; }
.star { position: absolute; fill: var(--paper); animation: twinkle 3s ease-in-out infinite; }
.star-one { width: 34px; right: 16%; top: 13%; }
.star-two { width: 17px; left: 4%; bottom: 23%; animation-delay: 1.2s; }
@keyframes twinkle { 0%,100% { transform: scale(0.78) rotate(0); opacity: 0.55; } 50% { transform: scale(1.08) rotate(12deg); opacity: 1; } }
.scroll-cue { position: absolute; left: 5vw; bottom: 2.3rem; display: flex; align-items: center; gap: 0.8rem; transform: rotate(-90deg); transform-origin: left center; }
.scroll-cue span { width: 44px; height: 1px; background: var(--ink); }
.scroll-cue small { font-size: 0.58rem; letter-spacing: 0.18em; }

.ticker { overflow: hidden; color: var(--paper); background: var(--sage-deep); }
.ticker-track { display: flex; justify-content: space-around; align-items: center; gap: 2rem; min-width: 900px; max-width: 1440px; margin: auto; padding: 1.45rem 4vw; }
.ticker p { display: flex; align-items: baseline; gap: 0.7rem; margin: 0; }
.ticker span { opacity: 0.6; font-size: 0.62rem; letter-spacing: 0.12em; }
.ticker strong { font-family: Georgia, serif; font-size: 1rem; font-weight: 400; letter-spacing: 0.06em; }
.ticker i { width: 4px; height: 4px; border-radius: 50%; background: var(--apricot-light); }

.story-section { position: relative; padding: 9rem 8vw 10rem; background: var(--paper); }
.story-section::before { content: ""; position: absolute; top: 3.2rem; right: 7vw; width: 90px; height: 90px; border-radius: 50%; background: rgba(255,195,168,0.22); box-shadow: -60px 46px 0 -24px rgba(242,189,95,0.22); }
.section-heading { display: grid; grid-template-columns: 0.9fr 1.35fr 0.75fr; gap: 4vw; align-items: end; max-width: 1320px; margin: 0 auto 7rem; }
.section-heading .eyebrow { align-self: start; margin-top: 0.8rem; }
.section-heading h2, .moments-heading h2 { font-size: clamp(3rem, 5vw, 5.5rem); line-height: 1.16; }
.section-heading > p:last-child { margin: 0 0 0.6rem; color: var(--ink-soft); font-size: 0.9rem; line-height: 2; }

.timeline { position: relative; max-width: 1220px; margin: auto; }
.timeline::before { content: ""; position: absolute; left: 50%; top: -2rem; bottom: -2rem; width: 1px; background: linear-gradient(transparent, var(--line) 6%, var(--line) 94%, transparent); }
.chapter { position: relative; display: grid; grid-template-columns: 1fr 0.9fr; gap: 8vw; align-items: center; margin-bottom: 9rem; }
.chapter:last-child { margin-bottom: 0; }
.chapter-number { position: absolute; z-index: 2; top: -2rem; left: -2.7rem; font-family: Georgia, serif; font-size: 5rem; color: rgba(223, 129, 95, 0.17); }
.chapter-image { position: relative; overflow: hidden; aspect-ratio: 1.25; border-radius: 38px; box-shadow: 0 20px 50px rgba(105,73,60,0.1); }
.chapter-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(130deg, transparent 60%, rgba(255,255,255,0.22)); }
.chapter-image svg { width: 100%; height: 100%; fill: none; stroke: rgba(36,57,47,0.68); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.image-arrival { background: #e8c6a7; }
.image-arrival svg circle { fill: #fff2d8; stroke: none; }
.image-arrival .cloud-line { fill: rgba(255,255,255,0.35); }
.image-smile { background: #bdcdb1; }
.image-smile svg circle { fill: #eaa17e; stroke: none; opacity: 0.42; }
.image-steps { background: #e9bd68; }
.date-tag { position: absolute; z-index: 2; left: 1.25rem; bottom: 1.25rem; padding: 0.55rem 0.85rem; border-radius: 999px; color: var(--ink); background: rgba(255,250,240,0.88); font-family: Georgia, serif; font-size: 0.63rem; letter-spacing: 0.12em; }
.chapter-copy { max-width: 420px; }
.chapter-copy time { color: var(--apricot); font-family: Georgia, serif; font-size: 0.7rem; letter-spacing: 0.13em; }
.chapter-copy h3 { margin: 1.1rem 0 1.3rem; font-family: var(--display); font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1.35; font-weight: 500; }
.chapter-copy p { margin: 0 0 1.7rem; color: var(--ink-soft); font-size: 0.92rem; line-height: 2; }
.chapter-copy a { display: inline-flex; align-items: center; gap: 0.7rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--ink); font-size: 0.74rem; letter-spacing: 0.08em; }
.chapter-copy a span { color: var(--apricot); transition: transform 180ms ease; }
.chapter-copy a:hover span { transform: translate(3px, -3px); }
.chapter-reverse .chapter-image { grid-column: 2; grid-row: 1; }
.chapter-reverse .chapter-copy { grid-column: 1; grid-row: 1; justify-self: end; }
.chapter-reverse .chapter-number { right: -2.7rem; left: auto; }

.moments-section { padding: 9rem 8vw 10rem; color: var(--paper); background: linear-gradient(145deg, #7d5147, #a76555); }
.moments-heading { display: flex; justify-content: space-between; align-items: end; gap: 6rem; max-width: 1320px; margin: 0 auto 5rem; }
.moments-heading .eyebrow { color: var(--apricot-light); }
.eyebrow.light span { background: var(--apricot-light); }
.moments-heading h2 em { color: var(--apricot-light); }
.moments-heading > p { max-width: 400px; margin: 0 0 0.7rem; color: rgba(255,250,240,0.65); font-size: 0.9rem; line-height: 2; }
.moment-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; max-width: 1320px; margin: auto; }
.moment-card { transition: transform 300ms cubic-bezier(.2,.8,.2,1); }
.moment-card:nth-child(2) { transform: translateY(3rem); }
.moment-card:hover { transform: translateY(-0.65rem); }
.moment-card:nth-child(2):hover { transform: translateY(2.35rem); }
.moment-art { position: relative; overflow: hidden; aspect-ratio: 0.86; border: 10px solid rgba(255,250,243,0.92); border-radius: 36px; background: #f7d6c5; box-shadow: 0 24px 50px rgba(63,38,31,0.22); }
.moment-art svg { width: 100%; height: 100%; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 600ms cubic-bezier(.2,.8,.2,1); }
.moment-card:hover .moment-art svg { transform: scale(1.04) rotate(1deg); }
.moment-art video { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 600ms cubic-bezier(.2,.8,.2,1); }
.moment-card:hover .moment-art video { transform: scale(1.035); }
.video-play {
  position: absolute;
  inset: 50% auto auto 50%;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 50%;
  color: var(--ink);
  background: rgba(255,250,240,0.84);
  box-shadow: 0 12px 32px rgba(36,57,47,0.2);
  transform: translate(-50%,-50%);
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: transform 180ms ease, opacity 180ms ease;
}
.video-play:hover { transform: translate(-50%,-50%) scale(1.08); }
.video-play svg { width: 26px; height: 26px; fill: currentColor; stroke: none; transform: translateX(1px); }
.video-card.playing .video-play { opacity: 0; pointer-events: none; }
.card-sun .moment-art { background: #ddb173; }
.card-sun .moment-art svg circle { fill: #f5d99e; }
.card-flower .moment-art { background: #d5a38e; }
.card-flower .moment-art svg circle { fill: #f2d18c; }
.card-moon .moment-art { background: #b8c6ae; }
.card-moon .moment-art svg path:first-child { fill: #fff1d3; }
.moment-meta { display: flex; gap: 1rem; padding: 1.2rem 0; border-top: 1px solid rgba(255,250,240,0.26); margin-top: 0.8rem; }
.moment-meta > span { color: var(--apricot-light); font-family: Georgia, serif; font-size: 0.72rem; }
.moment-meta p { margin: 0; font-family: var(--display); font-size: 1.15rem; line-height: 1.5; }
.moment-meta small { color: rgba(255,250,240,0.5); font-family: Georgia, serif; font-size: 0.63rem; letter-spacing: 0.08em; }

.letter-section { position: relative; display: grid; place-items: center; min-height: 760px; padding: 8rem 5vw; overflow: hidden; text-align: center; background: linear-gradient(180deg, var(--cream), #ffe8db); }
.letter-section::before, .letter-section::after { content: ""; position: absolute; border: 1px solid rgba(223,129,95,0.2); border-radius: 50%; }
.letter-section::before { width: 50vw; height: 50vw; left: -25vw; top: -10vw; }
.letter-section::after { width: 38vw; height: 38vw; right: -15vw; bottom: -20vw; }
.letter-ornament { position: absolute; left: 9%; top: 17%; width: 80px; color: rgba(223,129,95,0.2); }
.letter-ornament svg { fill: currentColor; }
.letter { position: relative; z-index: 1; max-width: 850px; }
.letter .eyebrow { justify-content: center; }
.letter blockquote { margin: 2rem 0 2.4rem; font-family: var(--display); font-size: clamp(2.5rem, 5vw, 5rem); line-height: 1.45; letter-spacing: -0.04em; }
.letter > p { max-width: 680px; margin: auto; color: var(--ink-soft); line-height: 2.1; font-size: 0.94rem; }
.signature { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 3rem; }
.signature span { color: var(--ink-soft); font-size: 0.65rem; letter-spacing: 0.16em; }
.signature strong { color: var(--apricot); font-family: var(--display); font-size: 1.35rem; font-weight: 500; }

footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; padding: 2rem 5vw; color: var(--paper); background: #5c4038; }
footer p { margin: 0; color: rgba(255,250,240,0.55); font-size: 0.58rem; letter-spacing: 0.14em; }
footer p:last-child { justify-self: end; }
.footer-wordmark svg { fill: var(--apricot-light); }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity 800ms ease, transform 800ms cubic-bezier(.2,.8,.2,1); }
.reveal[data-delay="1"] { transition-delay: 130ms; }
.reveal[data-delay="2"] { transition-delay: 260ms; }
.reveal.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr auto; height: 72px; }
  .desktop-nav, .header-cta { display: none; }
  .menu-button { display: grid; place-content: center; gap: 7px; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; }
  .menu-button span { width: 24px; height: 1px; background: var(--ink); transition: transform 200ms ease; }
  .menu-button[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-button[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .mobile-nav { position: fixed; inset: 72px 0 auto; display: flex; flex-direction: column; gap: 0; padding: 1rem 5vw 2rem; background: rgba(247,240,227,0.97); transform: translateY(-130%); opacity: 0; pointer-events: none; transition: transform 250ms ease, opacity 250ms ease; }
  .mobile-nav.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .mobile-nav a { padding: 1rem 0; border-bottom: 1px solid var(--line); font-family: var(--display); font-size: 1.25rem; }
  .hero { min-height: 860px; height: auto; grid-template-columns: 1fr; padding: 130px 7vw 90px; }
  .hero::before { top: 45%; right: -18%; width: 100vw; height: 68%; border-radius: 50% 0 0 0; }
  .hero-copy { position: relative; z-index: 2; }
  .hero h1 { font-size: clamp(3.4rem, 10vw, 5.3rem); }
  .hero-art { height: 580px; min-height: 0; margin-top: -2rem; }
  .cover-visual { left: 18%; top: 4%; width: min(62vw, 450px); }
  .birth-card { right: 8%; bottom: 2%; }
  .scroll-cue { display: none; }
  .section-heading { grid-template-columns: 1fr 1.5fr; }
  .section-heading > p:last-child { grid-column: 2; }
  .chapter { gap: 6vw; }
  .chapter-number { left: -1rem; }
  .chapter-reverse .chapter-number { right: -1rem; }
}

@media (max-width: 720px) {
  .site-header { padding: 0 5.5vw; }
  .hero { min-height: 780px; padding: 112px 5.5vw 65px; }
  .hero h1 { font-size: clamp(3rem, 14vw, 4.2rem); line-height: 1.18; }
  .desktop-only { display: none; }
  .hero-intro { max-width: 31rem; line-height: 1.9; }
  .hero-actions { align-items: flex-start; gap: 1.1rem; }
  .primary-button { gap: 1rem; padding-inline: 1.2rem; }
  .today-note { margin-top: 0.35rem; }
  .today-note > span { font-size: 1.65rem; }
  .hero-art { height: 480px; margin-top: 0; }
  .cover-visual { left: 8%; top: 6%; width: 78vw; padding: 10px 10px 18px; border-radius: 38px; }
  .cover-visual img { border-radius: 30px; }
  .cover-visual figcaption { padding: 0.8rem 0.7rem 0; }
  .cover-visual figcaption strong { font-size: 0.56rem; }
  .cover-sticker { top: 20px; right: -12px; }
  .birth-card { right: 1%; bottom: 0; width: 178px; padding: 1.2rem; }
  .birth-card strong { font-size: 2rem; }
  .star-one { right: 4%; }
  .ticker { overflow-x: auto; scrollbar-width: none; }
  .ticker::-webkit-scrollbar { display: none; }
  .ticker-track { justify-content: flex-start; min-width: max-content; padding-inline: 6vw; }
  .story-section, .moments-section { padding: 6.5rem 5.5vw 7.5rem; }
  .section-heading { display: block; margin-bottom: 4rem; }
  .section-heading h2, .moments-heading h2 { font-size: clamp(2.8rem, 13vw, 4rem); }
  .section-heading > p:last-child { margin-top: 1.8rem; }
  .timeline::before { left: 12px; }
  .chapter, .chapter-reverse { display: flex; flex-direction: column; align-items: stretch; gap: 2rem; padding-left: 2.2rem; margin-bottom: 6rem; }
  .chapter-reverse .chapter-image, .chapter-reverse .chapter-copy { grid-column: auto; grid-row: auto; }
  .chapter-reverse .chapter-image { order: 0; }
  .chapter-reverse .chapter-copy { order: 1; }
  .chapter-number, .chapter-reverse .chapter-number { top: -1.5rem; left: 0; right: auto; font-size: 3.6rem; }
  .chapter-copy { max-width: none; }
  .moments-heading { display: block; margin-bottom: 3.5rem; }
  .moments-heading > p { margin-top: 1.8rem; }
  .moment-grid { grid-template-columns: 1fr; gap: 3rem; }
  .moment-card, .moment-card:nth-child(2), .moment-card:hover, .moment-card:nth-child(2):hover { transform: none; }
  .moment-art { aspect-ratio: 1.06; }
  .letter-section { min-height: 690px; padding-inline: 6vw; }
  .letter blockquote { font-size: clamp(2.25rem, 10vw, 3.25rem); }
  .letter > p { font-size: 0.88rem; }
  footer { grid-template-columns: 1fr auto; padding: 2rem 5.5vw; }
  footer > p:nth-child(2) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Nicoli-inspired scrapbook redesign: original assets, copy and warm palette. */
body { background: #fff; }
.grain { opacity: 0.035; }
.site-header { height: 74px; padding-inline: 2.7vw; }
.site-header.scrolled { height: 62px; background: rgba(255,255,255,0.92); }
.wordmark { gap: 0.38rem; }
.wordmark svg { width: 22px; }
.wordmark span { font-family: "Avenir Next", sans-serif; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; }
.desktop-nav { display: none; }
.header-cta { padding: 0.7rem 1.15rem; border-radius: 999px; color: #fff; background: #23201f; font-size: 0.67rem; }
.header-cta svg { display: none; }

.hero {
  min-height: 760px;
  height: 100svh;
  max-height: 980px;
  grid-template-columns: 0.8fr 1.2fr;
  align-items: end;
  padding: 120px 5vw 82px 4.3vw;
  background: #fff;
}
.hero::before { display: none; }
.hero::after {
  content: "";
  right: auto;
  left: 47%;
  bottom: 4%;
  width: 38vw;
  height: 110px;
  border-radius: 50%;
  background: #9be1de;
  transform: rotate(-8deg) skewX(-28deg);
  opacity: 0.72;
}
.hero-copy { z-index: 5; padding-bottom: 0.8rem; }
.hero h1 { max-width: 620px; font-family: "Avenir Next", "PingFang SC", sans-serif; font-size: clamp(3.1rem, 5.2vw, 6.3rem); font-weight: 800; line-height: 1.06; letter-spacing: -0.07em; }
.hero h1 em { display: inline-block; font-family: inherit; font-weight: 800; transform: rotate(-2deg); }
.hero-intro { max-width: 500px; margin-top: 1.4rem; font-size: 0.84rem; line-height: 1.8; }
.eyebrow { font-family: "Avenir Next", sans-serif; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.13em; }
.hero-actions { margin-top: 1.7rem; }
.primary-button { padding: 0.78rem 1.2rem 0.78rem 1.35rem; font-size: 0.68rem; box-shadow: none; }
.today-note > span { font-size: 1.55rem; }

.hero-art { align-self: stretch; height: 100%; min-height: 560px; }
.cover-visual {
  left: 10%;
  top: -2%;
  width: min(43vw, 650px);
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: rotate(-1.5deg);
}
.cover-visual::before { display: none; }
.cover-visual img {
  width: 100%;
  aspect-ratio: 1.1;
  object-position: center 45%;
  border-radius: 0;
  clip-path: polygon(9% 4%, 61% 0, 91% 8%, 100% 31%, 94% 70%, 77% 96%, 40% 100%, 8% 89%, 0 57%, 4% 23%);
  filter: drop-shadow(0 18px 22px rgba(66,43,35,0.12));
}
.cover-visual figcaption { position: absolute; left: -4%; top: 23%; display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; padding: 0; transform: rotate(-7deg); }
.cover-visual figcaption span, .cover-visual figcaption strong { padding: 0.3rem 0.5rem; color: #23201f; background: #fff; font-family: "Avenir Next", sans-serif; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em; }
.cover-sticker { top: 3%; right: 7%; padding: 0.65rem 0.9rem; background: #23201f; font-size: 0.58rem; box-shadow: none; }
.birth-card { right: 3%; bottom: 2%; width: 196px; padding: 1.2rem 1.3rem; border: 2px solid #23201f; border-radius: 0; box-shadow: 8px 8px 0 #f4c8c7; transform: rotate(2deg); }
.birth-card::before { display: none; }
.birth-card strong { font-size: 2.1rem; }
.cover-bubble { opacity: 1; box-shadow: none; }
.bubble-one { right: -1%; top: 6%; width: 118px; height: 118px; background: #f5d4d4; }
.bubble-two { left: 2%; bottom: 18%; width: 90px; height: 90px; background: #dff36f; }
.paint-mark { position: absolute; display: block; z-index: -1; }
.paint-coral { right: 3%; top: 18%; width: 160px; height: 150px; background: #ff665e; clip-path: polygon(15% 0,85% 8%,100% 41%,88% 92%,42% 100%,2% 76%,0 30%); transform: rotate(9deg); }
.paint-mango { left: 0; top: 7%; width: 140px; height: 120px; border-radius: 46% 54% 61% 39% / 44% 39% 61% 56%; background: #ff9b4a; transform: rotate(-8deg); }
.paint-sage { right: 17%; bottom: 2%; width: 130px; height: 92px; border-radius: 44% 56% 38% 62%; background: #c8dca9; transform: rotate(12deg); }
.star-one { right: 2%; top: 42%; width: 28px; fill: #fff; }
.star-two { left: 5%; bottom: 11%; fill: #ff665e; }
.scroll-cue { left: 2.6vw; bottom: 1.7rem; }

.ticker { overflow: visible; color: #23201f; background: #fff; }
.ticker-track { justify-content: center; flex-wrap: wrap; min-width: 0; max-width: none; padding: 1rem 4vw 3.5rem; }
.ticker p { padding: 0.75rem 1.1rem; border: 1px solid #23201f; border-radius: 999px; background: #fff; }
.ticker span { color: #7d6b64; opacity: 1; }
.ticker strong { font-family: "Avenir Next", sans-serif; font-size: 0.78rem; font-weight: 700; }
.ticker i { width: 14px; height: 14px; background: #ff9b4a; }
.ticker i:nth-of-type(2) { background: #dff36f; }
.ticker i:nth-of-type(3) { background: #ff665e; }

.manifesto { position: relative; display: grid; justify-items: center; gap: 1.8rem; min-height: 520px; padding: 10rem 6vw 8rem; overflow: hidden; text-align: center; background: #fff; }
.manifesto-watermark { position: absolute; z-index: 0; top: 0.1em; left: 50%; color: #f8fafc; font-family: "Avenir Next", sans-serif; font-size: clamp(8rem, 22vw, 22rem); font-weight: 900; letter-spacing: -0.08em; white-space: nowrap; transform: translateX(-50%); }
.manifesto p, .manifesto a { position: relative; z-index: 1; }
.manifesto p { margin: 0; font-size: 0.9rem; font-weight: 600; line-height: 2.35; letter-spacing: 0.06em; }
.manifesto p + p { color: var(--ink-soft); font-size: 0.76rem; font-weight: 400; }
.manifesto a { padding: 0.7rem 1.25rem; border-radius: 999px; color: #fff; background: #23201f; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; }
.paint-ribbon { display: flex; align-items: center; width: 100%; height: 150px; overflow: hidden; background: #fff; }
.paint-ribbon i { flex: 1; height: 105px; margin-inline: -6px; transform: rotate(var(--r,0deg)); }
.paint-ribbon i:nth-child(1) { --r: 6deg; background:#dff36f; border-radius: 54% 46% 61% 39%; }
.paint-ribbon i:nth-child(2) { --r: -5deg; background:#f5c8ca; clip-path:polygon(0 18%,93% 0,100% 85%,12% 100%); }
.paint-ribbon i:nth-child(3) { --r: 8deg; background:#ff9b4a; border-radius: 42% 58% 46% 54%; }
.paint-ribbon i:nth-child(4) { --r: -8deg; background:#9be1de; clip-path:polygon(15% 0,100% 22%,78% 100%,0 72%); }
.paint-ribbon i:nth-child(5) { --r: 5deg; background:#ff665e; border-radius: 61% 39% 57% 43%; }
.paint-ribbon i:nth-child(6) { --r: -5deg; background:#ffd8c4; clip-path:polygon(0 15%,100% 0,88% 100%,12% 87%); }

.story-section { padding: 7rem 5vw 14rem; background: #fff; }
.story-section::before { display: none; }
.section-heading { display: block; max-width: 1320px; margin-bottom: 12rem; }
.section-heading .eyebrow { margin-bottom: 1.2rem; }
.section-heading h2 { max-width: 780px; font-family: "Avenir Next", "PingFang SC", sans-serif; font-size: clamp(3.1rem, 6vw, 6rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.07em; }
.section-heading > p:last-child { max-width: 390px; margin: 2rem 0 0 auto; font-size: 0.78rem; line-height: 2; }
.timeline::before { display: none; }
.chapter { grid-template-columns: 1.05fr 0.95fr; gap: 10vw; margin-bottom: 16rem; }
.chapter-number { top: -4.5rem; left: -1rem; font-family: "Avenir Next", sans-serif; font-size: 6.5rem; font-weight: 900; color: #f6f6f3; }
.chapter-reverse .chapter-number { right: -1rem; }
.chapter-image { border-radius: 0; box-shadow: none; clip-path: polygon(4% 2%,96% 0,100% 88%,89% 100%,0 96%,2% 14%); }
.chapter:nth-child(2) .chapter-image { clip-path: polygon(0 8%,92% 0,100% 13%,95% 100%,7% 95%); }
.chapter:nth-child(3) .chapter-image { clip-path: polygon(7% 0,100% 5%,94% 96%,0 100%,2% 15%); }
.chapter-copy time { font-family: "Avenir Next", sans-serif; font-weight: 800; }
.chapter-copy h3 { font-family: "Avenir Next", "PingFang SC", sans-serif; font-size: clamp(1.8rem, 3vw, 3rem); font-weight: 700; letter-spacing: -0.04em; }
.chapter-copy a { border: 0; padding: 0.62rem 1rem; border-radius: 999px; color: #fff; background: #23201f; }

.moments-section { position: relative; padding: 8rem 5vw 15rem; color: #23201f; background: #fff; }
.moments-section::before { content:""; position:absolute; left:-2vw; top:5rem; width:160px; height:130px; background:#dff36f; border-radius:47% 53% 42% 58%; transform:rotate(10deg); }
.moments-section::after { content:""; position:absolute; right:2vw; bottom:4rem; width:180px; height:140px; background:#f5c8ca; clip-path:polygon(8% 0,100% 12%,88% 100%,0 84%); transform:rotate(-9deg); }
.moments-heading { position: relative; z-index: 1; display: block; margin-bottom: 10rem; }
.moments-heading .eyebrow { color: #23201f; }
.eyebrow.light span { background: #ff665e; }
.moments-heading h2 { font-family: "Avenir Next", "PingFang SC", sans-serif; font-size: clamp(3.5rem, 7vw, 7rem); font-weight: 800; line-height: 0.96; letter-spacing: -0.08em; }
.moments-heading h2 em { color: #ff665e; font-family: inherit; font-weight: 800; }
.moments-heading > p { max-width: 380px; margin: 2rem 0 0 auto; color: var(--ink-soft); font-size: 0.78rem; }
.moment-grid { position: relative; z-index: 1; align-items: start; gap: 3vw; }
.moment-card:nth-child(2) { transform: translateY(7rem); }
.moment-card:nth-child(3) { transform: translateY(-3rem); }
.moment-card:hover { transform: translateY(-0.6rem) rotate(-1deg); }
.moment-card:nth-child(2):hover { transform: translateY(6.4rem) rotate(1deg); }
.moment-art { border: 0; border-radius: 0; box-shadow: none; clip-path: polygon(4% 0,100% 6%,95% 100%,0 94%); }
.moment-card:nth-child(2) .moment-art { clip-path: polygon(0 5%,93% 0,100% 94%,8% 100%); }
.moment-card:nth-child(3) .moment-art { clip-path: polygon(8% 0,100% 3%,94% 100%,0 91%); }
.moment-meta { border: 0; color: #23201f; }
.moment-meta > span { color: #ff665e; }
.moment-meta p { font-family: "Avenir Next", "PingFang SC", sans-serif; font-size: 1rem; font-weight: 700; }
.moment-meta small { color: #8a7670; }

.letter-section { min-height: 900px; background: #e7f5ff; border-radius: 54px 54px 0 0; }
.letter blockquote { font-family: "Avenir Next", "PingFang SC", sans-serif; font-weight: 800; letter-spacing: -0.055em; }
.letter > p { max-width: 620px; font-size: 0.8rem; }
footer { background: #e7f5ff; color: #23201f; }
footer p { color: #6e7377; }
.footer-wordmark svg { fill: #ff665e; }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; align-items: start; min-height: 1050px; height: auto; padding: 100px 7vw 72px; }
  .hero-copy { align-self: end; order: 2; padding-top: 560px; }
  .hero-art { position: absolute; inset: 82px 4vw auto 4vw; height: 620px; }
  .cover-visual { left: 22%; top: 0; width: min(68vw,520px); }
  .birth-card { right: 8%; bottom: 1%; }
  .section-heading { margin-bottom: 8rem; }
}

@media (max-width: 720px) {
  .site-header { height: 64px; padding-inline: 4.5vw; }
  .hero { min-height: 820px; padding: 84px 5.5vw 52px; }
  .hero-copy { padding-top: 475px; }
  .hero h1 { font-size: clamp(2.8rem,13vw,4rem); }
  .hero-intro { font-size: 0.76rem; }
  .hero-art { inset: 70px 1vw auto; height: 500px; }
  .cover-visual { left: 14%; top: 2%; width: 76vw; }
  .cover-visual img { aspect-ratio: 1; }
  .cover-visual figcaption { left: -7%; top: 17%; }
  .cover-visual figcaption span, .cover-visual figcaption strong { font-size: 0.48rem; }
  .birth-card { right: 3%; bottom: 0; width: 155px; padding: 0.8rem 0.9rem; box-shadow: 5px 5px 0 #f4c8c7; }
  .birth-card strong { font-size: 1.6rem; }
  .birth-card p { font-size: 0.5rem; }
  .paint-coral { width: 100px; height: 90px; }
  .paint-mango { width: 90px; height: 75px; }
  .bubble-one { width: 75px; height: 75px; }
  .ticker-track { gap: 0.5rem; padding-bottom: 2rem; }
  .ticker p { padding: 0.55rem 0.75rem; }
  .ticker span { font-size: 0.5rem; }
  .ticker strong { font-size: 0.62rem; }
  .ticker i { display: none; }
  .manifesto { min-height: 580px; padding: 10rem 8vw 7rem; }
  .manifesto-watermark { top: 0.8em; font-size: 7.5rem; }
  .manifesto p { font-size: 0.8rem; }
  .manifesto p + p { font-size: 0.68rem; }
  .paint-ribbon { height: 100px; }
  .paint-ribbon i { min-width: 72px; height: 72px; }
  .story-section { padding: 6rem 5.5vw 9rem; }
  .section-heading { margin-bottom: 7rem; }
  .section-heading h2 { font-size: clamp(2.8rem,13vw,4.5rem); }
  .section-heading > p:last-child { margin-left: 18%; }
  .chapter, .chapter-reverse { padding-left: 0; margin-bottom: 9rem; }
  .chapter-number, .chapter-reverse .chapter-number { left: -0.2rem; top: -3.4rem; font-size: 5rem; }
  .moments-section { padding: 7rem 5.5vw 11rem; }
  .moments-heading { margin-bottom: 5rem; }
  .moments-heading h2 { font-size: clamp(3.6rem,17vw,5.5rem); }
  .moments-heading > p { margin-left: 15%; }
  .moment-grid { gap: 5rem; }
  .moment-card:nth-child(2), .moment-card:nth-child(3), .moment-card:nth-child(2):hover { transform: none; }
  .moment-art { aspect-ratio: 1; }
  .letter-section { min-height: 760px; border-radius: 36px 36px 0 0; }
}

/* Hero v3 — centered scrapbook cover inspired by editorial cut-paper layouts. */
.site-header {
  height: 86px;
  grid-template-columns: 1fr auto;
  padding: 0 2.7vw 0 1.3vw;
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }
.site-header.scrolled {
  height: 68px;
  background: rgba(255,255,255,0.9);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.08em;
  color: #262422;
  font-family: "Arial Rounded MT Bold", "Avenir Next", "Microsoft YaHei", sans-serif;
  font-size: clamp(1.65rem, 2.15vw, 2.55rem);
  font-weight: 900;
  letter-spacing: -0.09em;
  line-height: 1;
}
.wordmark span { font: inherit; letter-spacing: inherit; }
.wordmark i {
  display: grid;
  place-items: center;
  width: 0.68em;
  height: 0.68em;
  margin: 0 0.09em 0.05em;
  overflow: hidden;
  border-radius: 50%;
  color: #56cde1;
  font-size: 0.46em;
  font-style: normal;
  background: #56cde1;
  box-shadow: 0.62em 0 0 -0.18em #56cde1, -0.62em 0 0 -0.18em #56cde1;
}
.desktop-nav { display: none; }
.header-cta {
  position: relative;
  z-index: 60;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  min-width: 148px;
  padding: 0.72rem 1.05rem 0.72rem 1.65rem;
  border-radius: 999px;
  color: #fff;
  background: #232322;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0;
}
.header-cta > i { display: grid; gap: 5px; width: 20px; }
.header-cta > i b { display: block; width: 18px; height: 1px; background: #fff; }
.menu-button, .mobile-nav { display: none; }

.hero {
  position: relative;
  display: block;
  height: 100svh;
  min-height: 780px;
  max-height: 1040px;
  padding: 0;
  overflow: hidden;
  color: #262422;
  background: #fff;
  isolation: isolate;
}
.hero::before, .hero::after { display: none; }
.hero-shapes { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.paper-shape { position: absolute; display: block; }
.shape-lime {
  left: 2.6%; top: 18%; width: 18vw; height: 37%;
  min-width: 220px;
  background: #dff36f;
  clip-path: polygon(8% 3%, 33% 0, 58% 4%, 82% 1%, 98% 18%, 95% 47%, 100% 71%, 85% 95%, 58% 99%, 34% 94%, 12% 98%, 0 78%, 3% 51%, 0 24%);
  transform: rotate(-2deg);
}
.shape-blue {
  left: 41%; top: 5%; width: 21vw; height: 12%;
  background: #7298f5;
  clip-path: polygon(4% 30%, 18% 15%, 30% 28%, 45% 2%, 58% 18%, 75% 5%, 98% 28%, 91% 67%, 76% 77%, 59% 96%, 43% 76%, 25% 92%, 9% 67%);
  transform: rotate(2deg);
}
.shape-red {
  right: 3.7%; top: 15%; width: 21vw; height: 43%;
  background: #ff5052;
  clip-path: polygon(8% 7%, 33% 2%, 50% 8%, 68% 0, 93% 7%, 98% 31%, 94% 54%, 100% 74%, 85% 94%, 63% 88%, 45% 100%, 20% 92%, 11% 73%, 0 56%, 5% 34%, 0 18%);
  transform: rotate(2deg);
}
.shape-cyan {
  right: 1.3%; bottom: -4%; width: 28vw; height: 38%;
  background: #8edfe8;
  clip-path: polygon(8% 3%, 100% 44%, 80% 66%, 99% 100%, 34% 88%, 16% 96%, 22% 68%, 0 42%);
  transform: rotate(-5deg);
}
.shape-pink {
  left: 10%; bottom: -9%; width: 24vw; height: 22%;
  background: #f6cdcf;
  clip-path: polygon(0 18%, 28% 0, 55% 6%, 80% 0, 100% 23%, 92% 68%, 65% 84%, 43% 100%, 19% 85%, 4% 58%);
  transform: rotate(-4deg);
}
.shape-orange {
  left: 42%; bottom: -15%; width: 19vw; aspect-ratio: 1;
  border-radius: 50%;
  background: #ff9c4f;
}

.hero-art {
  position: absolute;
  z-index: 3;
  inset: 8% auto auto 23.5%;
  width: 53vw;
  height: 82%;
  min-height: 0;
  transform: none;
}
.cover-visual {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.cover-visual::before { display: none; }
.cover-visual img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  object-fit: cover;
  object-position: center 48%;
  clip-path: polygon(11% 5%, 31% 1%, 53% 4%, 72% 0, 91% 8%, 97% 26%, 95% 49%, 100% 70%, 88% 90%, 68% 94%, 49% 100%, 29% 94%, 7% 90%, 2% 70%, 4% 48%, 0 25%);
  filter: none;
}
.cover-visual figcaption {
  position: absolute;
  z-index: 5;
  left: 16%;
  top: 18%;
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0;
  transform: rotate(-3deg);
}
.cover-visual figcaption span,
.cover-visual figcaption strong {
  display: block;
  padding: 0.62rem 0.38rem;
  color: #262422;
  background: rgba(255,255,255,0.96);
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: clamp(0.62rem, 0.75vw, 0.86rem);
  font-weight: 800;
  line-height: 1.55;
  letter-spacing: 0.08em;
  writing-mode: vertical-rl;
  box-shadow: 0 3px 9px rgba(38,36,34,0.08);
}
.cover-visual figcaption strong { margin-top: -3.2rem; }
.cover-sticker {
  position: absolute;
  z-index: 6;
  top: 1.8%;
  right: 8%;
  padding: 0.47rem 0.75rem;
  border-radius: 999px;
  color: #fff;
  background: #242322;
  font-size: clamp(0.46rem,0.52vw,0.62rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  transform: rotate(4deg);
  box-shadow: none;
}
.cover-bubble, .paint-mark, .hero-art .star, .birth-card { display: none; }

.hero-copy {
  position: absolute;
  z-index: 8;
  left: 3.5%;
  bottom: 3.8%;
  width: min(65vw, 1040px);
  padding: 0;
}
.hero-copy .eyebrow {
  margin: 0 0 1rem 0.25rem;
  font-size: clamp(0.5rem,0.62vw,0.7rem);
  font-weight: 800;
  letter-spacing: 0.13em;
}
.hero-copy .eyebrow span { width: 32px; background: #ff5052; }
.hero h1 {
  max-width: none;
  margin: 0;
  color: #262422;
  font-family: "Arial Rounded MT Bold", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: clamp(4rem, 6.15vw, 7.35rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.065em;
}
.hero h1 em {
  color: #262422;
  font: inherit;
  font-style: normal;
}
.hero-intro, .hero-actions { display: none; }
.hero-side-nav {
  position: absolute;
  z-index: 9;
  top: 9.7%;
  right: 4.4%;
  display: grid;
  justify-items: start;
  gap: 0.75rem;
  font-family: "Avenir Next", "PingFang SC", sans-serif;
  font-size: clamp(0.88rem,1vw,1.08rem);
  font-weight: 600;
}
.hero-side-nav a { transition: transform 180ms ease; }
.hero-side-nav a:hover { transform: translateX(6px); }
.hero-side-nav .side-contact {
  margin-top: 0.7rem;
  padding: 0.08rem 0.45rem 0.12rem;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  line-height: 1;
}
.scroll-cue {
  left: auto;
  right: 3.2%;
  bottom: 4%;
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  transform: none;
}
.scroll-cue span { width: 2px; height: 62px; background: #262422; transform: rotate(2deg); }
.scroll-cue small { font-size: 0.72rem; font-weight: 900; line-height: 1.1; letter-spacing: 0; }

@media (max-width: 980px) {
  .site-header { height: 72px; padding-inline: 4.5vw; }
  .wordmark { font-size: 1.72rem; }
  .header-cta { display: none; }
  .menu-button { display: grid; place-content: center; gap: 7px; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: #232322; }
  .menu-button span { width: 21px; height: 1px; background: #fff; }
  .mobile-nav { top: 72px; background: rgba(255,255,255,0.97); }
  .hero { min-height: 850px; height: 100svh; max-height: none; }
  .hero-art { inset: 9% auto auto 11%; width: 78vw; height: 65%; }
  .hero-copy { left: 5.5%; bottom: 4%; width: 91%; }
  .hero h1 { font-size: clamp(3.35rem, 9.6vw, 5.7rem); }
  .hero-side-nav { display: none; }
  .shape-lime { left: -7%; top: 18%; width: 29vw; min-width: 180px; height: 34%; }
  .shape-red { right: -6%; top: 17%; width: 30vw; height: 39%; }
  .shape-blue { left: 39%; top: 5%; width: 29vw; }
  .shape-cyan { width: 40vw; }
  .shape-orange { left: 43%; width: 26vw; }
}

@media (max-width: 620px) {
  .hero { min-height: 760px; }
  .hero-art { inset: 11% auto auto 5%; width: 90vw; height: 57%; }
  .cover-visual figcaption { left: 12%; top: 21%; gap: 0.3rem; }
  .cover-visual figcaption span,
  .cover-visual figcaption strong { padding: 0.4rem 0.27rem; font-size: 0.56rem; }
  .cover-visual figcaption strong { margin-top: -1.5rem; }
  .cover-sticker { top: 2%; right: 5%; }
  .hero-copy { bottom: 4.2%; }
  .hero-copy .eyebrow { margin-bottom: 0.65rem; }
  .hero h1 { font-size: clamp(2.9rem, 13.8vw, 4.6rem); line-height: 1.12; }
  .shape-lime { left: -21%; top: 22%; width: 53vw; height: 31%; }
  .shape-red { right: -18%; top: 19%; width: 48vw; height: 34%; }
  .shape-blue { left: 35%; top: 7%; width: 39vw; height: 10%; }
  .shape-cyan { right: -13%; bottom: -1%; width: 58vw; height: 26%; }
  .shape-pink { left: -4%; bottom: -4%; width: 52vw; height: 18%; }
  .shape-orange { left: 46%; bottom: -11%; width: 38vw; }
  .scroll-cue { display: none; }
  .ticker-track { padding-top: 1.4rem; }
}

@font-face {
  font-family: "NishikiDiary";
  src: url("/fonts/nishiki-teki-2.ttf") format("truetype");
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

/* Softer type direction: Nishiki handwritten display face with a rounded fallback. */
.wordmark {
  font-family: "NishikiDiary", "Comic Sans MS", "Arial Rounded MT Bold", sans-serif;
  font-weight: 400;
  letter-spacing: -0.06em;
}
.hero h1,
.section-heading h2,
.moments-heading h2,
.letter blockquote,
.chapter-copy h3 {
  font-family: "NishikiDiary", "YouYuan", "SIMYOU", "Yuanti SC", "STKaiti", "Microsoft YaHei", sans-serif;
  font-weight: 400;
  letter-spacing: -0.025em;
}
.hero h1 { line-height: 1.16; }
.hero h1 em { font-weight: 400; }
.hero-copy .eyebrow,
.cover-visual figcaption,
.hero-side-nav,
.header-cta { font-family: "NishikiDiary", "YouYuan", "SIMYOU", "Microsoft YaHei", sans-serif; }
.hero-side-nav { font-weight: 600; }