@font-face {
  font-family: "Years Songti";
  src: local("STSongti-SC-Regular");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Years Songti";
  src: local("STSongti-SC-Bold");
  font-weight: 700;
  font-display: swap;
}
:root {
  color-scheme: light dark;
  --paper: #fbf9f4;
  --ink: #34302a;
  --muted: #6f6457;
  --accent: #a94e30; /* App's deeper terracotta: AA contrast for small text. */
  --button-ink: #fffaf4;
  --band: #f4ece0;
  --line: #ddd1c1;
  --halo: #f0cfb599;
  --hero-glow: #f6dcc4;
  --hero-top: #f8eee2;
  --shadow: 0 30px 70px #71533924, 0 6px 18px #7153391a;
  --stage-shadow: drop-shadow(0 26px 30px #71533926) drop-shadow(0 3px 8px #71533918);
  --header-bg: #fbf9f4d9;
  --serif: "Years Songti", "Songti SC", "STSong", "Noto Serif CJK SC", "SimSun", serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.85 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; text-underline-offset: 5px; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; border-radius: 3px; }
main:focus { outline: none; }
img { display: block; max-width: 100%; }
figure, h1, h2, p, dl, dd, blockquote { margin: 0; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.wrap { width: min(1160px, calc(100% - 96px)); margin-inline: auto; }
h1, h2 { font-family: var(--serif); font-weight: 700; letter-spacing: .02em; }
h1 { font-size: clamp(46px, 5.6vw, 80px); line-height: 1.32; }
h2 { font-size: clamp(34px, 3.6vw, 54px); line-height: 1.38; }

.skip-link { position: absolute; z-index: 30; top: 12px; left: 20px; padding: 8px 16px; background: var(--paper); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--header-bg); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid transparent; transition: border-color .25s; }
.site-header.is-scrolled { border-bottom-color: var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; }
.brand { display: inline-flex; gap: 12px; align-items: center; flex-shrink: 0; }
.brand img { width: 40px; height: 40px; border-radius: 10px; }
.brand span { font: 700 23px/1.3 var(--serif); letter-spacing: 2px; }
nav { display: flex; gap: 6px; }
nav a { font-size: 14px; padding: 10px 14px; border-radius: 999px; transition: background .2s; }
nav a:hover { text-decoration: none; background: var(--band); }

/* Buttons */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; padding: 13px 26px; min-height: 52px; background: var(--accent); color: var(--button-ink); border-radius: 999px; font: 500 16px/1.6 var(--sans); box-shadow: 0 10px 24px #a94e302e; transition: transform .2s, filter .2s; }
.button:hover { text-decoration: none; filter: brightness(.93); transform: translateY(-1px); }
.text-link { font-size: 16px; padding-block: 6px; border-bottom: 1px solid var(--line); }

/* Real-screenshot crops. Original 1320 × 2868 artwork stays intact; viewports
   isolate the real screen and drop the existing marketing titles. Nothing is redrawn. */
.shot { position: relative; overflow: hidden; background: var(--paper); box-shadow: var(--shadow); --x: .1197; --w: .7606; --y: .1813; --h: .758; }
.shot img { position: absolute; max-width: none; height: auto; width: calc(100% / var(--w)); left: calc(var(--x) / var(--w) * -100%); top: calc(var(--y) / var(--h) * -100%); }
.phone { aspect-ratio: 1004 / 2174; border-radius: 9.3% / 4.3%; }
.detail { --x: .053; --w: .894; --y: .2789; --h: .537; aspect-ratio: 1180 / 1540; border-radius: 6.7% / 5.1%; }
/* "bleed" shows the top of a phone and dissolves it into the page. */
/* The source exports bake a dark shadow band under each sheet. "clean" ends the crop under the credit row (the
   location card of the source screenshot is deliberately left out) and pads with the sheet colour; "fade" dissolves the sheet instead. Both only hide pixels; no UI is redrawn. */
.detail-clean { --h: .4899; --end: .7444; aspect-ratio: 1180 / 1405; background: #fbf9f4; border-radius: 6.7% / 5.5%; }
.detail-clean::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 3px #fbf9f4; pointer-events: none; }
.detail-clean img { clip-path: inset(0 0 calc((1 - var(--end)) * 100%) 0); }
.detail-fade { --h: .5098; aspect-ratio: 1180 / 1462; border-radius: 6.7% 6.7% 0 0 / 5.3% 5.3% 0 0; box-shadow: none; -webkit-mask-image: linear-gradient(#000 94%, transparent); mask-image: linear-gradient(#000 94%, transparent); }
.phone.bleed { --h: .52; aspect-ratio: 1004 / 1491; border-radius: 9.3% / 6.3% 6.3% 0 0; box-shadow: none; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
figcaption { margin-top: 26px; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.8; }

/* Hero */
.hero { background: radial-gradient(52% 62% at 76% 42%, var(--hero-glow) 0, transparent 72%), linear-gradient(180deg, var(--hero-top) 0, var(--paper) 100%); overflow: clip; }
.hero-inner { padding-top: 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); align-items: center; gap: 40px; min-height: min(780px, calc(100svh - 72px)); }
.hero-subtitle { font: 400 clamp(20px, 1.9vw, 26px)/1.8 var(--serif); color: var(--muted); margin-top: 26px; letter-spacing: .06em; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 30px; margin-top: 44px; }
/* Extra horizontal room keeps the mask from slicing the tilted side phones. */
.hero-stage { width: calc(100% + 120px); margin-inline: -60px; padding-inline: 60px; align-self: end; -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
.hero-stage-inner { position: relative; width: 100%; aspect-ratio: 560 / 700; }
.hero-stage .shot { position: absolute; margin: 0; }
.hero-main { width: 54%; left: 23%; top: 0; z-index: 3; box-shadow: 0 40px 80px #5a3a2230, 0 8px 22px #5a3a221c; }
.hero-side { width: 37%; top: 17%; box-shadow: 0 24px 50px #5a3a2226; }
.hero-left { left: 5%; z-index: 1; transform: rotate(-6deg); transform-origin: 80% 100%; }
.hero-right { right: 5%; z-index: 2; transform: rotate(6deg); transform-origin: 20% 100%; }

/* Sections */
.section { padding-block: clamp(76px, 10vw, 140px); overflow: clip; }
.section-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(48px, 8vw, 120px); }
.section-copy { max-width: 460px; }
.section-label { color: var(--accent); font-size: 14px; letter-spacing: .14em; margin-bottom: 22px; }
.lead { color: var(--muted); font-size: 17px; line-height: 2; margin-top: 28px; }
.aside { font: 400 22px/1.8 var(--serif); color: var(--ink); margin-top: 28px; }
.notes { margin-top: 36px; border-top: 1px solid var(--line); }
.notes > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 20px; padding-block: 18px; border-bottom: 1px solid var(--line); }
.notes dt { font-weight: 500; font-size: 16px; }
.notes dd { color: var(--muted); font-size: 14px; }
.halo { position: absolute; z-index: 0; inset: 8% -22% 6%; background: radial-gradient(closest-side, var(--halo) 0, transparent 100%); pointer-events: none; }

.memory-stage, .growth-stage { position: relative; justify-self: center; width: min(100%, 470px); }
.growth-stage { width: min(100%, 370px); }
.memory-stage .shot, .growth-stage .shot { position: relative; z-index: 1; }
.memory-stage figcaption, .growth-stage figcaption { position: relative; z-index: 1; }

.gallery-section { background: var(--band); padding-bottom: 0; }
.gallery-stage { position: relative; display: flex; justify-content: flex-end; width: 100%; margin-bottom: -2px; }
.gallery-stage .phone { filter: var(--stage-shadow); position: relative; z-index: 1; width: min(62%, 330px); }
.months { position: absolute; z-index: 0; left: 0; top: 10%; display: flex; flex-direction: column; font: 700 clamp(60px, 6.2vw, 92px)/1.3 var(--serif); color: var(--accent); opacity: .16; letter-spacing: .04em; user-select: none; }
.gallery-section .section-copy { padding-bottom: clamp(76px, 10vw, 140px); }

/* Deep, warm section for rhythm */
.growth-section { --paper: #2b231e; --ink: #f6ede2; --muted: #cdbfae; --accent: #eba583; --line: #4f4137; --halo: #c9794a38; background: var(--paper); color: var(--ink); }
.growth-section .shot { --paper: #fbf9f4; box-shadow: 0 34px 80px #0007, 0 0 0 1px #ffffff12; }

.keepsakes-section { background: var(--paper); }
.pull-quote { margin-top: 44px; padding-left: 26px; border-left: 2px solid var(--accent); }
.pull-quote p { font: 700 clamp(24px, 2.4vw, 32px)/1.6 var(--serif); letter-spacing: .03em; }
.pull-quote footer { margin-top: 12px; font-size: 13px; color: var(--muted); }
.keepsakes-section .section-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
.keepsakes-stage { position: relative; justify-self: end; width: min(100%, 640px); aspect-ratio: 640 / 700; }
.keepsakes-stage { filter: var(--stage-shadow); }
.keepsakes-stage .shot { position: absolute; }
.keep-back { width: 42%; left: 0; top: 2%; transform: rotate(-4deg); transform-origin: 60% 100%; }
.keep-front { width: 62%; right: 0; top: 22%; transform: rotate(2deg); z-index: 2; }

/* Contact */
.contact-section { background: linear-gradient(180deg, var(--paper) 0, var(--hero-top) 100%); padding-block: clamp(84px, 11vw, 150px) clamp(72px, 9vw, 120px); text-align: center; }
.contact-icon { width: 88px; height: 88px; border-radius: 22px; margin: 0 auto 34px; box-shadow: 0 20px 44px #a94e3033, 0 2px 8px #71533922; }
.contact-inner > p { margin: 24px 0 36px; color: var(--muted); font-size: 17px; }
.contact-email { display: block; width: fit-content; margin: 20px auto 0; font-size: 14px; color: var(--muted); }
.mobile-break { display: none; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); background: var(--hero-top); }
.footer-inner { display: flex; align-items: start; justify-content: space-between; gap: 40px; padding-block: 34px 44px; }
.footer-name { font-family: var(--serif); font-size: 19px; }
.footer-name span { margin-left: 8px; font: 12px var(--sans); color: var(--muted); }
.footer-identity p { font-size: 12px; color: var(--muted); margin-top: 9px; }
.footer-links { display: grid; grid-template-columns: repeat(2, auto); gap: 12px 32px; font-size: 13px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 28px; }
.external-label { font-size: 11px; color: var(--muted); }
.footer-links svg { width: 15px; height: 15px; margin-left: 8px; }

/* Entrance motion (only when JS + motion are allowed; content is visible otherwise) */
.js-reveal .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); }
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise { from { opacity: 0; translate: 0 36px; } to { opacity: 1; translate: 0 0; } }
  @keyframes fade-up { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
  .hero-copy > * { animation: fade-up .8s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-subtitle { animation-delay: .1s; }
  .hero-actions { animation-delay: .2s; }
  .hero-main { animation: rise 1s cubic-bezier(.2, .7, .2, 1) .15s both; }
  .hero-left { animation: rise 1s cubic-bezier(.2, .7, .2, 1) .35s both; }
  .hero-right { animation: rise 1s cubic-bezier(.2, .7, .2, 1) .45s both; }
}

@media (max-width: 960px) {
  .wrap { width: calc(100% - 64px); }
  .hero-inner { grid-template-columns: 1fr; gap: 24px; min-height: 0; padding-top: 48px; }
  .hero-stage { width: min(calc(100% + 120px), 640px); margin-inline: 0; justify-self: center; }
  .section-grid, .keepsakes-section .section-grid { grid-template-columns: 1fr; gap: 56px; }
  .section-copy { max-width: 560px; }
  .gallery-section .section-copy { grid-row: 1; padding-bottom: 0; }
  .keepsakes-stage { margin-top: 8px; justify-self: center; }
}
@media (max-width: 600px) {
  .wrap { width: calc(100% - 44px); }
  html { scroll-padding-top: 64px; }
  .header-inner { min-height: 64px; gap: 12px; }
  .brand { gap: 9px; }
  .brand img { width: 32px; height: 32px; border-radius: 8px; }
  .brand span { font-size: 20px; letter-spacing: 1px; }
  nav { gap: 0; margin-right: -10px; }
  nav a { font-size: 13px; padding: 12px 10px; min-height: 44px; display: inline-flex; align-items: center; }
  h1 { font-size: 42px; line-height: 1.38; }
  h2 { font-size: 33px; line-height: 1.42; }
  .hero-inner { padding-top: 36px; }
  .hero-stage { width: calc(100% + 44px); margin-inline: -22px; padding-inline: 22px; }
  .hero-subtitle { margin-top: 20px; font-size: 18px; letter-spacing: .02em; }
  .hero-actions { margin-top: 30px; gap: 12px 24px; }
  .button { font-size: 15px; padding: 12px 22px; gap: 12px; }
  .section { padding-block: 64px; }
  .section-grid { gap: 44px; }
  .section-label { font-size: 13px; margin-bottom: 16px; }
  .lead { font-size: 16px; margin-top: 22px; }
  .aside { font-size: 20px; margin-top: 22px; }
  .notes { margin-top: 28px; }
  .months { font-size: 52px; }
  .gallery-stage .phone { width: 64%; }
  .growth-stage { width: min(100%, 300px); }
  figcaption { font-size: 12px; margin-top: 20px; }
  .pull-quote { margin-top: 34px; padding-left: 20px; }
  .contact-section { padding-block: 72px 60px; }
  .contact-icon { width: 72px; height: 72px; border-radius: 18px; margin-bottom: 28px; }
  .contact-inner > p { font-size: 15px; margin-block: 20px 28px; }
  .contact-section h2 { font-size: 31px; }
  .mobile-break { display: inline; }
  .footer-inner { display: block; padding-block: 28px 34px; }
  .footer-links { margin-top: 22px; gap: 12px 20px; grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #171512;
    --ink: #f3eade;
    --muted: #baac9c;
    --accent: #e19a77;
    --button-ink: #241810;
    --band: #211d18;
    --line: #473c30;
    --halo: #e19a7724;
    --hero-glow: #3a2618;
    --hero-top: #1e1812;
    --shadow: 0 30px 70px #0007, 0 0 0 1px #a9987b28;
    --stage-shadow: drop-shadow(0 26px 30px #0009) drop-shadow(0 3px 8px #0006);
    --header-bg: #171512d9;
  }
  .growth-section { --paper: #231c17; --ink: #f6ede2; --muted: #cdbfae; --accent: #eba583; --line: #4f4137; }
  .shot { --paper: #fbf9f4; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}