/* 双寿同庆 — seal-and-ink tribute. System fonts only (China-reachable), no downloads. */

:root {
  color-scheme: light;                 /* pin light so device dark mode can't invert */

  /* Hex tokens: the universal baseline every engine understands. */
  --paper:   #f6efe1;                  /* aged rice paper */
  --paper-2: #efe3cd;                  /* deeper paper, for depth + panels */
  --cinnabar:#b83a2e;                  /* 朱砂 seal red — carries identity */
  --lacquer: #7d211a;                  /* deep lacquer red, darker accents */
  --ink:     #241c17;                  /* warm near-black body text */
  --ink-soft:#6e5a44;                  /* attributions, secondary */
  --gold:    #b08d4f;                  /* antique gold — hairlines only, never small text */
  --gold-lt: #e9c984;                  /* light gold for thin frames on dark */
  --overlay: rgba(26, 18, 12, 0.92);   /* warm near-black lightbox scrim (not #000) */

  --serif: "Songti SC","STSong","Noto Serif CJK SC","Source Han Serif SC","SimSun",serif;
  --sans:  -apple-system,"PingFang SC","Microsoft YaHei","Heiti SC","WenQuanYi Micro Hei",system-ui,sans-serif;
}

/* Modern engines (Safari 15.4+/Chromium 111+) override with OKLCH for richer, more controlled
   color. Old WeChat WebViews simply ignore this block and keep the hex above. */
@supports (color: oklch(0.5 0.1 30)) {
  :root {
    --paper:   oklch(0.945 0.020 84);
    --paper-2: oklch(0.910 0.034 80);
    --cinnabar:oklch(0.505 0.150 33);   /* darkened for >=4.5:1 on paper (elderly contrast) */
    --lacquer: oklch(0.420 0.120 31);
    --ink:     oklch(0.270 0.014 62);
    --ink-soft:oklch(0.450 0.035 66);   /* darkened so 1rem secondary text clears 4.5:1 */
    --gold:    oklch(0.680 0.082 80);
    --gold-lt: oklch(0.840 0.090 85);
  }
}

* { box-sizing: border-box; }
html { font-size: 20px; -webkit-text-size-adjust: 100%; }
html, body { overflow-x: hidden; }
body {
  margin: 0;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0) 26%),
    radial-gradient(130% 70% at 50% -5%, var(--paper-2), rgba(0,0,0,0) 60%),
    radial-gradient(120% 50% at 50% 105%, var(--paper-2), rgba(0,0,0,0) 70%);
  font-family: var(--sans);
  line-height: 1.85;
  text-rendering: optimizeLegibility;
}

/* 回纹 (Greek-key) gold border framing the whole page, top + bottom. Inline SVG, zero requests. */
.page-border {
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='20'%3E%3Cpath d='M0 17 H24 M4 17 V4 H20 V14 H9 V8 H15' fill='none' stroke='%23b08d4f' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: repeat-x; background-position: center; background-size: 24px 20px;
  opacity: 0.85;
}
.page-border--bottom { transform: scaleY(-1); }
/* Rice-paper grain: a faint fractal-noise overlay. Inline SVG, zero requests. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.045; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}
img { max-width: 100%; height: auto; display: block; }

:focus-visible { outline: 3px solid var(--cinnabar); outline-offset: 3px; border-radius: 2px; }

/* Reusable "mounted scroll" frame: double gold rule + cinnabar corner brackets. */
.framed { position: relative; border: 1px solid var(--gold);
  box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5px rgba(176,141,79,0.45); }
.framed::before, .framed::after {
  content: ""; position: absolute; width: 20px; height: 20px; border: 2px solid var(--cinnabar);
}
.framed::before { top: 9px; left: 9px; border-right: 0; border-bottom: 0; }
.framed::after  { bottom: 9px; right: 9px; border-left: 0; border-top: 0; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(2rem, 7vw, 4rem) 1rem clamp(1.5rem, 5vw, 2.5rem);
  box-shadow: inset 0 0 90px rgba(36, 28, 23, 0.07);   /* soft edge vignette for depth */
}
/* Giant ghost 寿 watermark — scale as drama, 5% opacity stays clear of the title. */
.hero::before {
  content: "寿"; position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--serif); font-weight: 700; line-height: 1;
  font-size: clamp(17rem, 64vw, 26rem); color: var(--cinnabar);
  opacity: 0.07; pointer-events: none; z-index: 0; user-select: none;
}
.hero__inner {
  position: relative; z-index: 1; max-width: 600px; margin: 0 auto;
  padding: clamp(1.75rem, 6vw, 2.75rem) clamp(0.6rem, 3vw, 1.5rem);
}
.hero__eyebrow {
  font-family: var(--serif); color: var(--lacquer);
  letter-spacing: 0.55em; text-indent: 0.55em;
  font-size: clamp(0.95rem, 3.5vw, 1.15rem); margin: 0 0 clamp(0.75rem, 3vw, 1.25rem);
}
/* Spotlight halo behind the seal */
.hero__seal-wrap { position: relative; display: inline-block; }
.hero__seal-wrap::before {
  content: ""; position: absolute; inset: -34%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(184,58,46,0.20), rgba(184,58,46,0) 68%);
}
.hero__seal {
  width: clamp(100px, 27vw, 138px); height: auto; margin: 0 auto clamp(1rem, 4vw, 1.5rem);
  filter: drop-shadow(0 6px 14px rgba(125, 33, 26, 0.22));
  animation: seal-glow 5s ease-in-out infinite;
}
@keyframes seal-glow {
  0%, 100% { filter: drop-shadow(0 6px 14px rgba(125, 33, 26, 0.20)); }
  50%      { filter: drop-shadow(0 8px 22px rgba(184, 58, 46, 0.40)); }
}
.hero__title { margin: 0; font-family: var(--serif); font-weight: 700; line-height: 1.32; }
.hero__greet {
  display: block; color: var(--ink-soft); font-weight: 400;
  font-size: clamp(1.1rem, 4vw, 1.4rem); letter-spacing: 0.2em; margin-bottom: 0.4em;
}
.hero__line { display: block; color: var(--cinnabar); white-space: nowrap;
  font-size: clamp(1.4rem, 8vw, 2.05rem); letter-spacing: 0.03em; }
.hero__line + .hero__line { margin-top: 0.18em; }
.hero__line .gap { display: inline-block; width: 0.32em; }
.hero__date {
  font-family: var(--serif); color: var(--ink-soft);
  font-size: clamp(1rem, 3.6vw, 1.2rem); letter-spacing: 0.16em; margin: clamp(1rem, 4vw, 1.5rem) 0 0;
}
/* Double gold-hairline frame around the hero photo */
/* 全家福 mounted as a hanging scroll (挂轴): lacquer roller rods + gold end-knobs */
.hero__scroll {
  position: relative; z-index: 1; max-width: 440px; margin: clamp(1.5rem, 6vw, 2.5rem) auto 0;
  padding: 0 14px;   /* houses the protruding knobs so they aren't clipped */
}
.scroll__rod {
  position: relative; height: 15px; border-radius: 6px;
  background: linear-gradient(180deg, #a83226, var(--lacquer));
  box-shadow: 0 2px 5px rgba(36, 28, 23, 0.30);
}
.scroll__rod::before, .scroll__rod::after {
  content: ""; position: absolute; top: 50%; transform: translateY(-50%);
  width: 12px; height: 21px; border-radius: 5px;
  background: linear-gradient(180deg, var(--gold-lt), var(--gold));
  box-shadow: 0 1px 3px rgba(36, 28, 23, 0.30);
}
.scroll__rod::before { left: -9px; }
.scroll__rod::after  { right: -9px; }
.scroll__rod--top    { margin-bottom: -2px; z-index: 2; }
.scroll__rod--bottom { margin-top: -2px; z-index: 2; }
.scroll__art {
  display: block; padding: 7px; background: var(--paper); border: 1px solid var(--gold);
  box-shadow: 0 2px 6px rgba(36, 28, 23, 0.10), 0 16px 42px rgba(36, 28, 23, 0.20);
}
.hero__photo { width: 100%; border: 1px solid var(--gold); }

/* ---------- Sections ---------- */
main { max-width: 640px; margin: 0 auto; padding: 0 1.25rem; }
.section-title {
  display: flex; align-items: center; gap: 1rem;
  margin: clamp(2.5rem, 9vw, 4rem) 0 clamp(1.25rem, 5vw, 2rem);
  font-family: var(--serif); font-weight: 700; color: var(--cinnabar);
}
.section-title::before, .section-title::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(176,141,79,0) 0%, var(--gold) 50%, rgba(176,141,79,0) 100%);
}
/* small diamond seal-dots flanking the heading text */
.section-title span { position: relative; font-size: clamp(1.4rem, 5.5vw, 1.85rem);
  letter-spacing: 0.12em; white-space: nowrap; padding: 0 0.2em; }
.section-title span::before, .section-title span::after {
  content: ""; position: absolute; top: 50%; width: 6px; height: 6px;
  background: var(--cinnabar); transform: translateY(-50%) rotate(45deg);
}
.section-title span::before { left: -0.85em; }
.section-title span::after  { right: -0.85em; }

/* ---------- Letter: a personal note to 爷爷奶奶 ---------- */
.letter__body { max-width: 600px; margin: 0 auto; }
.letter__salutation {
  font-family: var(--serif); color: var(--cinnabar);
  font-size: clamp(1.2rem, 4.5vw, 1.4rem); letter-spacing: 0.06em; margin: 0 0 1rem;
}
.letter__body p {
  margin: 0 0 1.15rem; font-size: 1.08rem; color: var(--ink); line-height: 1.95;
  text-align: justify; text-justify: inter-character; text-indent: 2em;  /* 首行缩进 */
}
.letter__salutation, .letter__sign { text-indent: 0; }
.letter__sign {
  text-align: right; font-family: var(--serif); color: var(--cinnabar);
  letter-spacing: 0.16em; margin-top: 1.5rem; font-size: 1.05rem;
}
.letter__sign::before { content: "·"; color: var(--gold); margin-right: 0.45em; }

/* ---------- Gallery ---------- */
/* Single featured memory: centered portrait, shown whole */
.gallery__featured { max-width: 340px; margin: 0 auto; }
.gallery__featured .gallery__link { aspect-ratio: 776 / 1040; }
.gallery__caption {
  text-align: center; font-family: var(--serif); color: var(--ink-soft);
  letter-spacing: 0.14em; font-size: 1rem; margin-top: 0.8rem;
}
.gallery__caption::before { content: "· "; color: var(--cinnabar); }
.gallery__link {
  display: block; aspect-ratio: 4 / 3; overflow: hidden;
  padding: 5px; background: var(--paper); border: 1px solid var(--gold);
  box-shadow: 0 6px 18px rgba(36, 28, 23, 0.14);
}
.gallery__link img { width: 100%; height: 100%; object-fit: cover; }

/* CSS-only lightbox via :target — works with JS disabled */
.lightbox {
  position: fixed; inset: 0; top: 0; right: 0; bottom: 0; left: 0;  /* explicit offsets: old WebViews ignore `inset` shorthand */
  background: var(--overlay);
  display: none; align-items: center; justify-content: center; padding: 1.25rem; z-index: 50;
}
.lightbox:target { display: flex; }
.lightbox img { width: auto; max-width: 100%; max-height: 86vh; border: 2px solid var(--gold-lt); }
.lightbox__close {
  position: absolute; top: 0.75rem; right: 1rem; color: var(--paper);
  font-size: 2.4rem; line-height: 1; text-decoration: none;
  width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
}

/* ---------- Closing: calm centered couplet + stamped seal ---------- */
.closing { padding: clamp(2.75rem, 10vw, 4.5rem) 1.5rem clamp(3rem, 11vw, 5rem); text-align: center; }
.closing__inner { max-width: 480px; margin: 0 auto; }
.closing__inner::before {
  content: ""; display: block; width: 72px; height: 1px; margin: 0 auto clamp(1.75rem, 7vw, 2.5rem);
  background: linear-gradient(90deg, rgba(176,141,79,0), var(--gold), rgba(176,141,79,0));
}
.closing__banner {
  font-family: var(--serif); font-weight: 700; color: var(--cinnabar);
  font-size: clamp(1.3rem, 5vw, 1.6rem); letter-spacing: 0.36em; text-indent: 0.36em;
  margin: 0 0 clamp(1.5rem, 6vw, 2.25rem);
}
.closing__couplet {
  font-family: var(--serif); font-weight: 700; color: var(--cinnabar);
  font-size: clamp(1.55rem, 6.4vw, 2.05rem); line-height: 1.8; letter-spacing: 0.16em; margin: 0;
}
.closing__couplet span { display: block; }
.closing__text {
  font-family: var(--serif); color: var(--ink);
  font-size: clamp(1.1rem, 4vw, 1.3rem); letter-spacing: 0.08em;
  margin: clamp(1.5rem, 6vw, 2.25rem) 0 clamp(1.4rem, 5vw, 1.9rem);
}
.closing__seal { margin-top: clamp(1.5rem, 6vw, 2.25rem); }
.closing__stamp {
  width: 48px; height: auto; margin: 0 auto;
  filter: drop-shadow(0 4px 9px rgba(125, 33, 26, 0.28));
  animation: seal-glow 5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}