/* A quiet birthday keepsake. All rules stay inside the birthday page. */
.birthday-page {
  --birthday-ink: #f3e8d5;
  --birthday-muted: #c1b3a0;
  --birthday-gold: #d5af73;
  --birthday-line: #d5af7338;
  --birthday-serif: "Noto Serif SC", "Songti SC", serif;
  --birthday-latin: "Cormorant Garamond", Georgia, serif;
  margin: 0;
  color: var(--birthday-ink);
  background: radial-gradient(ellipse at 76% 12%, #8a613012, transparent 34%), #211c19;
  font-family: "Noto Sans SC", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.9;
  color-scheme: dark;
}
.birthday-page::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 3; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23grain)' opacity='.65' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
.birthday-page *, .birthday-page *::before, .birthday-page *::after { box-sizing: border-box; }
.birthday-page a { color: inherit; text-decoration: none; }
.birthday-page button { font: inherit; cursor: pointer; }
.birthday-page [hidden] { display: none !important; }
.birthday-page :is(h1, h2, h3) { color: var(--birthday-ink); font-family: var(--birthday-serif); font-weight: 400; }
.birthday-page :is(a, button, summary):focus-visible { outline: 2px solid #efcb93; outline-offset: 6px; }
.birthday-page .skip-link { background: var(--birthday-gold); color: #211c19; }
.birthday-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.birthday-edition { width: min(1200px, calc(100% - 80px)); margin: auto; container-type: inline-size; }
.birthday-nav { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 27px 0; border-bottom: 1px solid var(--birthday-line); }
.birthday-brand { font-family: var(--birthday-latin); font-size: 25px; line-height: 1.3; }
.birthday-brand span { margin: 0 5px; color: var(--birthday-gold); font-style: italic; }
.birthday-nav-note { font-size: 10px; letter-spacing: .23em; color: var(--birthday-muted); }
.birthday-nav>a:last-child { font-size: 12px; color: var(--birthday-muted); }
.birthday-nav>a:last-child span { margin-left: 10px; color: var(--birthday-gold); }
.birthday-hero { display: grid; grid-template-columns: .94fr 1.1fr; align-items: center; gap: 62px; padding: 66px 12px 58px; }
.birthday-hero-copy { min-width: 0; }
.birthday-eyebrow { margin: 0 0 21px; font-size: 10px; line-height: 1.7; letter-spacing: .15em; color: var(--birthday-gold); }
.birthday-eyebrow>span[aria-hidden] { margin: 0 15px; }
.birthday-age { display: flex; align-items: center; gap: 25px; margin: 20px 0 34px; color: var(--birthday-gold); font-family: var(--birthday-latin); font-variant-numeric: lining-nums; }
.birthday-age>span { font-size: clamp(176px, 17.7vw, 248px); line-height: .8; letter-spacing: -.075em; font-weight: 300; text-shadow: 0 1px 0 #f7da9a20, 0 -2px 1px #0d0a08; }
.birthday-age small { padding-top: 40px; font-size: 22px; font-weight: 400; font-style: italic; line-height: 1.1; }
.birthday-hero h1 { margin: 0; font-size: clamp(32px, 3.2vw, 44px); line-height: 1.65; letter-spacing: .045em; }
.birthday-hero-date { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; letter-spacing: .07em; color: var(--birthday-muted); margin: 28px 0 24px; }
.birthday-hero-date>span[aria-hidden] { color: #9b7e58; }
.birthday-lead { font-size: 16px; line-height: 2; color: #d4c6b1; margin: 0 0 29px; }
.birthday-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 34px; min-height: 48px; padding: 12px 24px; border: 1px solid var(--birthday-gold); background: var(--birthday-gold); color: #211c19 !important; font-size: 14px; line-height: 1.6; transition: background .2s, transform .2s; }
.birthday-button:hover { background: #e7c18b; transform: translateY(-2px); }
.birthday-ritual { min-width: 0; align-self: center; }
.birthday-art { position: relative; margin: 0; border: 1px solid var(--birthday-line); background: linear-gradient(155deg, #b58a4808, #08060418); padding: 22px 23px 25px; box-shadow: inset 0 0 0 6px #211c19, inset 0 0 0 7px #d5af7310; }
.birthday-art-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 2px; color: var(--birthday-muted); font-size: 9px; letter-spacing: .16em; }
.birthday-art-top>span:nth-child(2) { font-size: 23px; color: var(--birthday-gold); line-height: 1; }
.birthday-cake { display: block; width: 100%; height: auto; overflow: visible; margin: -27px 0 -7px; }
.birthday-art figcaption { text-align: center; }
.birthday-art-script { display: block; font-family: var(--birthday-latin); font-size: 34px; font-style: italic; font-weight: 300; color: var(--birthday-gold); line-height: 1.25; }
.birthday-art figcaption>span:last-child { display: block; margin-top: 9px; font-family: var(--birthday-serif); font-size: 14px; color: var(--birthday-muted); }
.birthday-wish-controls { text-align: center; padding-top: 24px; }
.birthday-wish-button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 46px; padding: 6px 8px; border: 0; border-bottom: 1px solid #d5af7370; background: none; color: var(--birthday-gold); font-size: 15px !important; transition: color .2s; }
.birthday-wish-button:hover { color: #ffe0ad; }
.birthday-wish-icon { display: inline-block; font-size: 24px; line-height: 1; transition: transform .6s; }
.birthday-wish-status { min-height: 2em; font-size: 14px; color: var(--birthday-muted); margin: 12px 0 0; }
.birthday-flame { transform-box: fill-box; transform-origin: center bottom; transition: opacity .35s ease, transform .45s ease; }
.birthday-candle-light { transition: opacity .8s ease; }
.birthday-wicks { transition: stroke .5s; }
.birthday-embers { opacity: 0; transition: opacity .4s; }
.birthday-smoke { opacity: 0; pointer-events: none; }
.birthday-ritual.is-extinguished .birthday-flame { opacity: 0; transform: scaleY(.2) rotate(8deg); }
.birthday-ritual.is-extinguished .birthday-candle-light { opacity: .08; }
.birthday-ritual.is-extinguished .birthday-wicks { stroke: #8e7257; }
.birthday-ritual.is-extinguished .birthday-embers { opacity: .65; }
.birthday-ritual.is-extinguished .birthday-wish-icon { transform: rotate(90deg); }
.birthday-ritual.is-extinguished .birthday-smoke { animation: birthday-smoke 1.4s .1s ease-out both; }
.birthday-clock { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding: 29px 31px; border-top: 1px solid var(--birthday-line); border-bottom: 1px solid var(--birthday-line); background: linear-gradient(100deg, #d5af7305, transparent); }
.birthday-clock-copy .birthday-eyebrow { font-size: 9px; margin-bottom: 7px; }
#birthday-clock-label { margin: 0; font-family: var(--birthday-serif); font-size: 18px; line-height: 1.8; }
.birthday-timezone { font-size: 11px; color: var(--birthday-muted); letter-spacing: .045em; margin: 5px 0 0; }
.birthday-clock-units { display: flex; align-items: flex-start; gap: 22px; }
.birthday-clock-units>span { display: flex; flex-direction: column; align-items: center; min-width: 44px; }
.birthday-clock-units b { font-family: var(--birthday-latin); font-size: 42px; line-height: 1.1; font-weight: 400; font-variant-numeric: lining-nums tabular-nums; color: var(--birthday-gold); }
.birthday-clock-units small { font-size: 10px; margin-top: 10px; color: var(--birthday-muted); }
.birthday-clock-units i { font-style: normal; font-family: var(--birthday-latin); font-size: 23px; color: var(--birthday-gold); }
.birthday-clock-after { margin: 0; font-size: 13px; color: var(--birthday-muted); text-align: right; }
.birthday-clock-after>span { display: block; font-family: var(--birthday-latin); font-size: 33px; font-style: italic; color: var(--birthday-gold); }
.birthday-section { padding-top: 100px; }
.birthday-section h2 { font-size: clamp(27px, 2.8vw, 35px); line-height: 1.8; letter-spacing: .025em; margin: 0; }
.birthday-section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 36px; }
.birthday-section-heading>p { margin: 0 0 8px; font-family: var(--birthday-serif); font-size: 16px; color: var(--birthday-muted); line-height: 2; }
.birthday-memory-list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; padding: 0; margin: 0; }
.birthday-memory-list li { display: flex; flex-direction: column; border-top: 1px solid var(--birthday-line); padding: 25px 0 0; }
.birthday-memory-top { display: flex; justify-content: space-between; align-items: center; font-size: 11px; letter-spacing: .05em; color: var(--birthday-gold); }
.birthday-memory-top>span { font-family: var(--birthday-latin); font-size: 22px; color: #b4a089; font-style: italic; }
.birthday-memory-list h3 { margin: 19px 0 12px; font-size: 19px; line-height: 1.8; }
.birthday-memory-list p { margin: 0 0 23px; font-size: 16px; line-height: 2; color: var(--birthday-muted); }
.birthday-text-link { display: block; align-self: flex-start; margin-top: auto; border-bottom: 1px solid #d5af7360; padding: 6px 0; color: var(--birthday-gold) !important; font-size: 13px; }
.birthday-text-link span { margin-left: 13px; }
.birthday-text-link:hover { color: #ffe0ad !important; }
.birthday-letter-section { display: grid; grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr); align-items: start; gap: 50px; margin-top: 96px; padding-top: 70px; border-top: 1px solid var(--birthday-line); scroll-margin-top: 30px; }
.birthday-letter-heading p:not(.birthday-eyebrow) { color: var(--birthday-muted); font-family: var(--birthday-serif); font-size: 16px; line-height: 2.1; margin: 24px 0; }
.birthday-letter-heading>span { display: block; color: var(--birthday-gold); font-family: var(--birthday-latin); font-style: italic; font-size: 30px; margin-top: 30px; }
.birthday-letter { min-width: 0; background: linear-gradient(135deg, #d5af7309, transparent 62%), #2a2320; border: 1px solid #d5af7352; box-shadow: 0 12px 35px #100b0825; }
.birthday-letter summary { position: relative; list-style: none; cursor: pointer; padding: 25px 35px 0; border: 6px solid #211c1900; outline-offset: 7px !important; }
.birthday-letter summary::before { content: ""; position: absolute; inset: 0; pointer-events: none; border: 1px solid #d5af731c; }
.birthday-letter summary::-webkit-details-marker { display: none; }
.birthday-card-overline { display: block; color: var(--birthday-muted); font-size: 9px; letter-spacing: .15em; }
.birthday-card-address { display: flex; flex-direction: column; align-items: flex-start; margin-top: 30px; }
.birthday-card-address small { color: var(--birthday-muted); font-family: var(--birthday-serif); font-size: 14px; }
.birthday-card-address strong { font-family: var(--birthday-latin); font-weight: 400; font-style: italic; font-size: 51px; color: var(--birthday-gold); line-height: 1.4; }
.birthday-card-address>span { font-family: var(--birthday-serif); font-size: 14px; color: #d6c8b3; margin-top: 6px; }
.birthday-letter-seal { position: absolute; right: 34px; top: 65px; font-family: var(--birthday-latin); font-variant-numeric: lining-nums; font-size: 99px; letter-spacing: -.075em; line-height: 1.2; color: #d5af7322; text-shadow: 0 1px 0 #e3c48b12, 0 -1px 0 #120e0a50; }
.birthday-card-action { display: flex; justify-content: space-between; align-items: center; margin-top: 32px; padding: 15px 0; border-top: 1px solid var(--birthday-line); font-size: 12px; color: var(--birthday-gold); }
.birthday-letter-toggle { font-size: 21px; line-height: 1; transition: transform .25s; }
.birthday-close-label, .birthday-letter[open] .birthday-open-label { display: none; }
.birthday-letter[open] .birthday-close-label { display: inline; }
.birthday-letter[open] .birthday-letter-toggle { transform: rotate(45deg); }
.birthday-letter-body { max-width: 34em; margin: 0 auto; padding: 29px 41px 20px; font-family: var(--birthday-serif); font-size: 17px; line-height: 2.2; color: #e9ddca; scroll-margin-top: 30px; outline: none; }
.birthday-letter-body>p { margin: 0 0 26px; }
.birthday-letter[open] .birthday-letter-body { animation: birthday-unfold .35s ease-out; }
.birthday-letter-body .birthday-dear { color: var(--birthday-gold); font-size: 20px; }
.birthday-letter-body .birthday-signature { font-size: 13px; line-height: 2; color: var(--birthday-muted); text-align: right; padding-top: 13px; margin-top: 33px; border-top: 1px solid var(--birthday-line); }
.birthday-signature time { white-space: nowrap; }
.birthday-ending { position: relative; text-align: center; padding: 105px 0 85px; }
.birthday-ending-star { display: block; font-size: 33px; line-height: 1; color: var(--birthday-gold); margin-bottom: 29px; }
.birthday-ending .birthday-eyebrow { font-size: 9px; }
.birthday-ending h2 { font-size: clamp(32px, 3.2vw, 42px); line-height: 1.8; font-weight: 400; margin: 22px 0 24px; }
.birthday-ending-names { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 14px; font-family: var(--birthday-latin); font-size: 25px; margin: 0 0 31px; }
.birthday-ending-names img { border-radius: 50%; object-fit: cover; padding: 3px; border: 1px solid var(--birthday-line); }
.birthday-ending-names i { color: var(--birthday-gold); margin: 0 5px; font-size: 22px; }
.birthday-ending-links { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.birthday-button-outline { background: none; color: var(--birthday-ink) !important; border-color: #d5af7370; }
.birthday-button-outline:hover { background: #d5af7312; }
.birthday-home { font-size: 13px; color: var(--birthday-muted) !important; }
.birthday-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; border-top: 1px solid var(--birthday-line); font-size: 9px; letter-spacing: .13em; color: var(--birthday-muted); }
.birthday-footer>span:nth-child(2)>span { margin: 0 14px; }
@keyframes birthday-smoke { 0% { opacity: 0; transform: translateY(3px); } 15% { opacity: .75; } 100% { opacity: 0; transform: translateY(-25px); } }
@keyframes birthday-unfold { from { opacity: .7; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1100px) {
  .birthday-edition { width: calc(100% - 64px); }
  .birthday-hero { gap: 30px; padding: 55px 0 48px; }
  .birthday-age { gap: 19px; }
  .birthday-age small { font-size: 20px; }
  .birthday-art { padding: 18px 18px 24px; }
  .birthday-art-script { font-size: 30px; }
  .birthday-letter-section { grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr); gap: 30px; }
  .birthday-memory-list { gap: 24px; }
  .birthday-clock { padding: 26px 18px; gap: 20px; }
  .birthday-clock-units { gap: 14px; }
}
@media (max-width: 800px) {
  .birthday-nav-note { display: none; }
  .birthday-hero { grid-template-columns: 1fr 1fr; gap: 25px; }
  .birthday-age { gap: 12px; margin-bottom: 30px; }
  .birthday-age>span { font-size: 166px; }
  .birthday-age small { font-size: 18px; }
  .birthday-hero h1 { font-size: 32px; }
  .birthday-lead { font-size: 16px; }
  .birthday-art { padding: 17px 14px 20px; }
  .birthday-art-top { font-size: 8px; letter-spacing: .08em; }
  .birthday-art-top>span:nth-child(2) { display: none; }
  .birthday-art-script { font-size: 28px; }
  .birthday-art figcaption>span:last-child { font-size: 12px; }
  .birthday-hero-date { font-size: 11px; gap: 10px; }
  .birthday-clock-units { gap: 9px; }
  .birthday-clock-units>span { min-width: 34px; }
  .birthday-clock-units b { font-size: 36px; }
  #birthday-clock-label { font-size: 16px; }
  .birthday-section-heading>p { font-size: 16px; }
  .birthday-memory-list { gap: 22px; }
  .birthday-memory-list h3 { font-size: 18px; }
  .birthday-letter-section { grid-template-columns: 1fr; gap: 30px; }
  .birthday-letter-heading>span { margin-top: 20px; }
  .birthday-letter { width: 100%; max-width: 680px; margin: 0 auto; }
}
@media (max-width: 650px) {
  .birthday-edition { width: calc(100% - 40px); }
  .birthday-nav { padding: 21px 0; gap: 12px; }
  .birthday-brand { font-size: 22px; }
  .birthday-nav>a:last-child { font-size: 11px; }
  .birthday-nav>a:last-child span { margin-left: 5px; }
  .birthday-hero { grid-template-columns: 1fr; gap: 38px; padding: 34px 0 33px; }
  .birthday-eyebrow { font-size: 9px; }
  .birthday-eyebrow>span[aria-hidden] { margin: 0 10px; }
  .birthday-age { margin: 26px 0 27px; gap: 25px; }
  .birthday-age>span { font-size: 164px; }
  .birthday-age small { font-size: 21px; padding-top: 27px; }
  .birthday-hero h1 { font-size: 32px; line-height: 1.6; }
  .birthday-hero-date { font-size: 11px; margin: 22px 0 20px; gap: 12px; }
  .birthday-lead { font-size: 16px; margin-bottom: 24px; }
  .birthday-art { padding: 20px 17px 24px; }
  .birthday-art-top { font-size: 8px; letter-spacing: .13em; }
  .birthday-art-top>span:nth-child(2) { display: inline; font-size: 19px; }
  .birthday-cake { margin-top: -22px; }
  .birthday-art-script { font-size: 32px; }
  .birthday-art figcaption>span:last-child { font-size: 13px; }
  .birthday-wish-controls { padding-top: 18px; }
  .birthday-wish-status { font-size: 13px; }
  .birthday-clock { align-items: flex-start; flex-direction: column; gap: 23px; padding: 25px 12px; }
  .birthday-clock-units { justify-content: space-between; width: 100%; gap: 10px; }
  .birthday-clock-units b { font-size: 36px; }
  .birthday-clock-units small { margin-top: 8px; }
  .birthday-clock-after { text-align: left; }
  .birthday-clock-after>span { font-size: 34px; }
  .birthday-section { padding-top: 64px; }
  .birthday-section-heading { display: block; margin-bottom: 25px; }
  .birthday-section h2 { font-size: 26px; line-height: 1.8; }
  .birthday-section-heading>p { margin: 18px 0 0; }
  .birthday-memory-list { grid-template-columns: 1fr; gap: 23px; }
  .birthday-memory-list li { padding: 20px 0 0; }
  .birthday-memory-list h3 { margin-top: 14px; font-size: 19px; }
  .birthday-memory-list p { margin-bottom: 12px; }
  .birthday-letter-section { margin-top: 62px; padding-top: 52px; gap: 27px; }
  .birthday-letter-heading>span { font-size: 28px; }
  .birthday-letter summary { padding: 22px 18px 0; }
  .birthday-card-overline { font-size: 8px; letter-spacing: .08em; }
  .birthday-card-address { margin-top: 25px; }
  .birthday-card-address strong { font-size: 47px; }
  .birthday-letter-seal { right: 22px; top: 67px; font-size: 86px; }
  .birthday-card-action { margin-top: 28px; }
  .birthday-letter-body { padding: 24px 24px 8px; font-size: 16px; line-height: 2.15; }
  .birthday-letter-body .birthday-dear { font-size: 18px; }
  .birthday-letter-body .birthday-signature { font-size: 12px; }
  .birthday-signature>span { display: none; }
  .birthday-signature time { display: block; }
  .birthday-ending { padding: 73px 0 62px; }
  .birthday-ending h2 { font-size: 31px; }
  .birthday-ending-names { gap: 10px; font-size: 24px; }
  .birthday-ending-names img { width: 32px; height: 32px; }
  .birthday-footer { flex-wrap: wrap; gap: 14px; padding: 22px 0; font-size: 8px; }
  .birthday-footer>span:nth-child(2)>span { margin: 0 5px; }
}
/* Container width also accounts for browser zoom. */
@container (max-width: 650px) {
  .birthday-nav-note { display: none; }
  .birthday-hero { grid-template-columns: 1fr; gap: 38px; }
  .birthday-ritual { width: 100%; max-width: 510px; justify-self: center; }
  .birthday-section-heading { display: block; }
  .birthday-section-heading>p { margin-top: 20px; }
  .birthday-memory-list, .birthday-letter-section { grid-template-columns: 1fr; }
  .birthday-clock { flex-direction: column; align-items: flex-start; }
  .birthday-clock-units { width: 100%; justify-content: space-between; }
  .birthday-clock-after { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .birthday-page *, .birthday-page *::before, .birthday-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .birthday-smoke { display: none; }
}