@font-face {
  font-family: "Letter Mincho";
  src: url("./assets/letter-mincho.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root { --display: "Letter Mincho", "Hiragino Mincho ProN", serif; --reading-progress: 0; }
body { position: relative; }
.decoration-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.season-candles, .book-decoration, .signature-tree, .about-card-art > img { filter: url("#illustration-gold"); }
body::before { content: ""; position: fixed; inset: 0; z-index: 200; pointer-events: none; background: url("./assets/paper-grain.svg"); opacity: .035; }
h1, h2, h3, .wordmark { font-family: var(--display); }
.preview-note { font-size: 8px; opacity: .75; }
.header { height: 104px; padding: 0 5%; }
.wordmark { font-size: 24px; letter-spacing: .16em; }
.wordmark-dot { width: 3px; height: 3px; background: #dfbc9e; }
.header nav { gap: 32px; font-size: 10px; }
.reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 201; pointer-events: none; }
.reading-progress > span { display: block; height: 100%; background: #d8bb8c; transform: scaleX(var(--reading-progress)); transform-origin: left; }
.hero { width: min(1320px, 88%); min-height: 880px; margin: 90px auto 0; padding: 0; position: relative; }
.hero::before { content: ""; position: absolute; inset: -80px -5% 0; background: radial-gradient(ellipse at 26% 41%, #b4664330, #8b302015 35%, transparent 67%); pointer-events: none; }
.season-garland { position: absolute; top: -60px; right: 0; width: 280px; height: auto; opacity: .58; pointer-events: none; }
.hero-copy { position: absolute; right: 0; top: 163px; width: 49%; height: auto; padding: 0; }
.hero .season-label { position: static; writing-mode: horizontal-tb; color: #dcc0a5; font-size: 10px; letter-spacing: .14em; }
.hero h1 { display: block; position: static; font-size: clamp(40px, 4.3cqw, 60px); letter-spacing: .08em; line-height: 1.8; margin: 45px 0 0; }
.hero h1 > span { display: block; writing-mode: horizontal-tb; white-space: nowrap; }
.hero h1 > span:last-child { padding-left: 1em; margin-top: 10px; }
.hero-description { position: static; font-size: 13px; letter-spacing: .07em; line-height: 2.4; margin-top: 37px; }
.hero-art { position: absolute; left: 3%; top: 235px; width: min(43%, 480px); margin: 0; padding: 0; }
.hero-art > img { width: 100%; height: auto; aspect-ratio: 416 / 283; object-fit: contain; border-radius: 0; clip-path: none; filter: none; box-shadow: 0 35px 80px #30080c2b; }
.hero-art::after { display: none; }
.hero-art figcaption { position: static; writing-mode: horizontal-tb; text-align: left; margin: 19px 0 0; font-size: 9px; letter-spacing: .1em; color: #dfbdb3; }
.hero .read-link { position: absolute; bottom: 85px; right: 7%; display: inline-flex; align-items: center; gap: 95px; margin: 0; padding: 0 0 15px; border-bottom: 1px solid #d2ac8a75; font-size: 11px; }
.hero .read-link span { transition: transform .4s ease; }
.hero .read-link:hover span { transform: translateY(5px); }
.hero-folio { position: absolute; left: 3%; bottom: 22px; color: #dbb8aa; font-size: 10px; line-height: 2.1; letter-spacing: .09em; }
.letter { width: min(1160px, 90%); padding-top: 80px; }
.letter-opening { display: flex; align-items: center; justify-content: center; gap: 20px; font-size: 10px; letter-spacing: .12em; margin-bottom: 0; }
.letter-opening .small-rule { width: 42px; margin: 0; }
.letter-prologue { text-align: center; padding: 80px 0 145px; }
.season-candles { display: block; width: 124px; height: auto; margin: 0 auto 45px; }
.letter-prologue p { font-family: var(--display); font-size: 20px; line-height: 2.5; letter-spacing: .1em; margin-top: 27px; }
.letter-prologue p:first-child { margin-top: 0; }
.letter-prologue > span { display: block; color: #d4ac9c; font-size: 9px; letter-spacing: .15em; margin-top: 53px; }
.reading-rail { position: fixed; z-index: 20; left: 14px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 24px; opacity: 0; visibility: hidden; transition: opacity .5s; }
.is-reading .reading-rail { opacity: 1; visibility: visible; }
.reading-rail a { writing-mode: vertical-rl; color: #d9b9ae; font-size: 8px; letter-spacing: .13em; border-right: 1px solid #bd81703d; padding: 2px 8px 2px 0; transition: color .3s, border-color .3s; }
.reading-rail a[aria-current] { color: #ffe5bc; border-right-color: #d5b481; }
.chapter-first { background: #eee6d9; color: #4b3230; padding: 105px 6.5% 95px; margin-bottom: 175px; position: relative; }
.chapter-first::before { content: ""; position: absolute; top: 10%; bottom: 10%; left: 43%; width: 1px; background: #a9957a29; }
.chapter-first .chapter-copy { display: grid; grid-template-columns: .85fr 1.15fr; gap: 11%; align-items: center; }
.chapter-first .chapter-kicker { position: absolute; left: 138px; top: 42px; color: #8a6558; font-size: 9px; margin: 0; }
.chapter-first h2 { display: flex; flex-direction: row-reverse; justify-content: center; gap: 16px; font-size: 29px; line-height: 1.7; letter-spacing: .14em; margin: 0; }
.chapter-first h2 > span { writing-mode: vertical-rl; white-space: nowrap; }
.chapter-first h2 > span:last-child { padding-top: 70px; }
.book-body p { font-family: var(--serif); font-size: 14px; line-height: 2.6; letter-spacing: .015em; margin-top: 30px; }
.book-body p:first-child { margin-top: 0; }
.book-body .book-emphasis { font-family: var(--display); font-size: 19px; line-height: 2.1; margin-top: 40px; }
.page-folio { position: absolute; right: 35px; bottom: 28px; color: #9e8472; font-family: var(--display); font-size: 11px; }
.book-decoration { position: absolute; left: 28px; top: 22px; width: 84px; height: auto; opacity: 1; filter: url("#illustration-gold") brightness(.83) saturate(1.12); pointer-events: none; }
.chapter-second { display: grid; grid-template-columns: 49% 43%; gap: 8%; align-items: center; min-height: 700px; margin-bottom: 170px; }
.chapter-second .chapter-copy { grid-column: 2; grid-row: 1; }
.chapter-second .chapter-kicker { font-size: 9px; margin-bottom: 27px; }
.chapter-second h2 { font-size: 38px; line-height: 1.85; letter-spacing: .08em; margin-bottom: 32px; }
.chapter-second p { font-size: 13px; line-height: 2.5; letter-spacing: .02em; margin-top: 26px; }
.chapter-second .quiet-wish { font-family: var(--display); font-size: 19px; line-height: 2.2; color: #e6c9b1; margin-top: 39px; }
.quiet-art { position: relative; grid-column: 1; grid-row: 1; width: min(75%, 320px); justify-self: center; margin: 0; }
.quiet-art::before { content: ""; position: absolute; inset: -24px 20px 17px -24px; background: #9c46301a; pointer-events: none; }
.quiet-art img { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: contain; filter: none; border-radius: 0; margin: 0 auto; }
.quiet-art figcaption { text-align: left; margin-top: 20px; font-size: 9px; line-height: 1.9; letter-spacing: .06em; color: #d9b7a8; }
.art-whisper { display: block; position: absolute; right: 17px; bottom: -90px; font-family: var(--display); font-size: 35px; letter-spacing: .12em; }
.closing-letter { display: grid; grid-template-columns: 55% 35%; gap: 70px 10%; text-align: left; padding: 0 0 135px; position: relative; }
.closing-rule { display: block; height: 70px; width: 1px; background: #c09c7d; margin: 0 auto 25px; grid-column: 1 / -1; }
.future-copy { align-self: center; }
.future-copy > .eyebrow { font-size: 9px; letter-spacing: .13em; color: #dfbdb3; }
.closing-letter h2 { font-size: 41px; line-height: 1.85; letter-spacing: .08em; margin: 34px 0; text-align: left; }
.closing-letter h2 > span { display: block; }
.future-copy > p:not(.eyebrow) { font-size: 13px; line-height: 2.5; letter-spacing: .01em; margin-top: 28px; }
.future-copy .future-last { color: #e4c1af; font-family: var(--display); font-size: 19px !important; line-height: 2.2 !important; margin-top: 37px !important; }
.stars-scene { width: 100%; max-width: 300px; align-self: center; justify-self: end; margin: 0; }
.stars-scene > .stars-art { display: block; width: 100%; height: auto; margin: 0; }
.stars-scene figcaption { color: #d9b7a8; text-align: center; font-size: 9px; letter-spacing: .06em; line-height: 2; margin-top: 20px; }
.closing-letter > .letter-signature { grid-column: 1 / -1; font-family: var(--display); font-size: 34px !important; text-align: center; line-height: 2 !important; letter-spacing: .1em; padding-top: 65px; }
.signature-tree { display: block; width: 124px; height: auto; margin: 0 auto 34px; }
.letter-signature > span { display: block; font-family: var(--sans); font-size: 9px; color: #dbb7a6; letter-spacing: .14em; margin-top: 24px; }
.reply-section { background: #490e15; padding-top: 100px; padding-bottom: 95px; }
.section-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 0 50px; text-align: left; }
.section-intro > .eyebrow { grid-column: 1 / -1; font-size: 9px; }
.section-intro h2 { font-size: 34px; margin: 24px 0 0; letter-spacing: .06em; line-height: 1.9; }
.section-intro > p:last-child { align-self: end; padding-bottom: 9px; font-size: 12px; line-height: 2.4; }
.reply-workspace { margin-top: 65px; gap: 75px; }
.reply-form label, .reply-form legend { font-size: 11px; }
.reply-form textarea { background: #f0e9de; color: #493531; border: 0; font-family: var(--serif); }
.reply-form textarea::placeholder { color: #85736a; }
.card-stage { background: transparent; padding: 0 0 0 16px; }
.card-stage canvas { box-shadow: none; }
.preview-caption { padding-left: 16px; }
.create-card { background: #efe5d7 !important; color: #671c24 !important; border-color: #efe5d7 !important; }
.create-card:hover { background: #dfcfbb !important; }
.about-card { padding-top: 140px; grid-template-columns: 57% 30%; gap: 65px 13%; }
.about-card h2 { font-size: 33px; margin: 30px 0; line-height: 1.95; }
.about-card-copy > p:not(.eyebrow) { font-size: 13px; line-height: 2.5; margin-top: 27px; }
.about-card-art { padding: 35px 0; border-left: 1px solid #b9847c55; text-align: center; }
.about-card-art .gift-words { writing-mode: vertical-rl; font-family: var(--display); font-size: 29px; letter-spacing: .13em; line-height: 1.9; margin: auto; text-align: left; }
.about-card-art > img { width: 180px; max-width: 100%; height: auto; aspect-ratio: auto; border-radius: 0; margin: 35px auto 0; }
.about-card-art figcaption { margin-top: 22px; font-size: 9px; }
.card-journey { gap: 45px; border-top-color: #bd8b8055; padding-top: 38px; }
.card-journey h3 { font-size: 21px; }
.card-journey p { font-size: 11px; }
.card-purchase .button { border-color: #b38b72; }
.purchase-photo { height: 270px; max-height: none; object-fit: contain; }
.afterword { padding-top: 75px; }
footer .wordmark { font-size: 19px; }
footer nav { margin-left: auto; }
footer small { margin-left: 24px; font-size: 8px; }

/* Content is visible without JavaScript. Motion is enabled only after observation is ready. */
.reveal-pending { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity 1.15s cubic-bezier(.2,.65,.3,1), transform 1.15s cubic-bezier(.2,.65,.3,1); }
.reveal-pending.is-visible { opacity: 1; transform: none; }
.hero-art.reveal-pending { transition-duration: 1.6s; }
.hero h1 > span:first-child { transition-delay: .18s; }
.hero h1 > span:last-child { transition-delay: .38s; }
.hero-description.reveal-pending { transition-delay: .5s; }
.hero .season-label.reveal-pending { transition-delay: .08s; }
@container gift-page (min-width: 1440px) {
  .hero { min-height: 900px; }
  .hero-copy { top: 195px; }
  .hero .read-link { bottom: 100px; }
}
@container gift-page (max-width: 1190px) {
  .reading-rail { display: none; }
}
@container gift-page (max-width: 1000px) and (min-width: 701px) {
  .hero { min-height: 815px; width: 89%; }
  .hero-copy { top: 145px; width: 49%; }
  .hero h1 { font-size: clamp(28px, 3.8cqw, 38px); }
  .season-garland { width: 210px; top: -48px; }
  .hero-art { width: 43%; top: 165px; }
  .hero-description { font-size: 12px; }
  .hero .read-link { bottom: 70px; gap: 65px; }
  .chapter-first { padding-left: 5%; padding-right: 5%; }
  .chapter-first .chapter-copy { gap: 8%; }
  .chapter-first h2 { font-size: 26px; gap: 8px; }
  .book-body p { font-size: 12px; }
  .book-body .book-emphasis { font-size: 17px; }
  .chapter-second { grid-template-columns: 44% 49%; gap: 7%; }
  .chapter-second h2 { font-size: 31px; }
  .chapter-second p { font-size: 12px; }
  .art-whisper { font-size: 29px; right: 0; }
  .closing-letter { grid-template-columns: 57% 35%; gap: 60px 8%; }
  .closing-letter h2 { font-size: 33px; }
  .future-copy > p:not(.eyebrow) { font-size: 12px; }
  .reply-workspace { gap: 35px; }
  .section-intro h2 { font-size: 28px; }
  .section-intro > p:last-child { font-size: 11px; }
}
@container gift-page (max-width: 700px) {
  .header { height: 88px; padding: 0 23px; }
  .wordmark { font-size: 20px; }
  .header nav { font-size: 9px; }
  .header nav > a:not(.header-reply) { display: none; }
  .hero { width: 100%; min-height: 0; margin: 64px auto 0; padding: 0 0 50px; }
  .hero::before { inset: 140px 0 50px; background: radial-gradient(ellipse at 50% 50%, #a4513329, transparent 68%); }
  .season-garland { width: 118px; top: -54px; right: 25px; opacity: .5; }
  .hero-copy { position: relative; right: auto; top: auto; width: auto; height: auto; padding: 63px 30px 0; }
  .hero .season-label { font-size: 8px; letter-spacing: .02em; line-height: 2; }
  .hero h1 { font-size: clamp(28px, 8cqw, 34px); letter-spacing: .055em; line-height: 1.8; margin-top: 30px; }
  .hero h1 > span:last-child { padding-left: 1em; margin-top: 5px; }
  .hero-description { font-size: 12px; line-height: 2.3; margin-top: 27px; }
  .hero-art { position: relative; width: 82%; max-width: 360px; left: auto; top: auto; margin: 43px auto 38px; }
  .hero-art > img { width: 100%; height: auto; }
  .hero-art figcaption { font-size: 8px; line-height: 1.8; margin-top: 14px; }
  .hero .read-link { position: relative; right: auto; bottom: auto; margin: 0 0 0 31px; gap: 85px; font-size: 10px; padding-bottom: 11px; }
  .hero-folio { position: static; margin: 33px 30px 0; font-size: 9px; line-height: 2.1; }
  .letter { width: auto; padding: 55px 18px 0; }
  .letter-opening { font-size: 9px; gap: 13px; }
  .letter-opening .small-rule { width: 26px; }
  .letter-prologue { padding: 55px 8px 85px; }
  .season-candles { width: 104px; margin-bottom: 34px; }
  .letter-prologue p { font-size: 16px; line-height: 2.5; letter-spacing: .04em; margin-top: 24px; }
  .letter-prologue > span { font-size: 8px; margin-top: 38px; }
  .chapter-first { padding: 120px 26px 70px; margin-bottom: 110px; }
  .chapter-first::before { display: none; }
  .chapter-first .chapter-copy { display: block; }
  .chapter-first .chapter-kicker { top: 43px; left: 110px; font-size: 8px; }
  .chapter-first h2 { display: block; font-size: 25px; line-height: 1.9; letter-spacing: .04em; margin-bottom: 35px; }
  .chapter-first h2 > span { display: block; writing-mode: horizontal-tb; white-space: normal; }
  .chapter-first h2 > span:last-child { padding: 0; }
  .book-body p { font-size: 12px; line-height: 2.5; letter-spacing: 0; margin-top: 26px; }
  .book-body .book-emphasis { font-size: 18px; line-height: 2.1; margin-top: 32px; }
  .page-folio { right: 24px; bottom: 23px; font-size: 9px; }
  .book-decoration { width: 63px; left: 25px; top: 22px; }
  .chapter-second { display: flex; flex-direction: column; min-height: 0; margin: 0 13px 90px; gap: 95px; }
  .chapter-second .chapter-copy { order: 2; padding-left: 0; }
  .chapter-second h2 { font-size: 31px; }
  .chapter-second p { font-size: 13px; line-height: 2.4; }
  .chapter-second .chapter-kicker { font-size: 9px; }
  .chapter-second .quiet-wish { font-size: 19px; }
  .quiet-art { width: 75%; max-width: 270px; margin: 0 auto; order: 1; }
  .quiet-art::before { inset: -15px 14px 14px -15px; }
  .quiet-art img { width: 100%; height: auto; }
  .quiet-art figcaption { font-size: 8px; margin-top: 17px; }
  .art-whisper { font-size: 29px; bottom: -61px; right: 0; }
  .closing-letter { display: flex; flex-direction: column; gap: 0; padding: 0 13px 85px; text-align: left; }
  .closing-rule { height: 52px; margin: 0 auto 45px; }
  .future-copy > .eyebrow { font-size: 8px; }
  .closing-letter h2 { font-size: 32px; line-height: 1.9; margin: 28px 0; }
  .future-copy > p:not(.eyebrow) { font-size: 12px; line-height: 2.4; }
  .future-copy .future-last { font-size: 18px !important; margin-top: 32px !important; }
  .stars-scene { width: 70%; max-width: 250px; align-self: center; margin: 50px auto 0; }
  .stars-scene figcaption { font-size: 8px; margin-top: 18px; }
  .closing-letter > .letter-signature { font-size: 24px !important; line-height: 2 !important; letter-spacing: .03em; padding-top: 48px; }
  .letter-signature > span { font-size: 8px; margin-top: 18px; letter-spacing: .07em; }
  .signature-tree { width: 100px; margin-bottom: 28px; }
  .reply-section { padding: 65px 25px 60px; }
  .section-intro { display: block; }
  .section-intro > .eyebrow { font-size: 9px; }
  .section-intro h2 { font-size: clamp(21px, 6cqw, 27px); line-height: 1.9; margin: 23px 0; }
  .section-intro > p:last-child { font-size: 12px; padding: 0; }
  .reply-workspace { gap: 43px; margin-top: 38px; }
  .reply-form textarea { font-size: 16px; }
  .card-stage { padding: 0 17px; }
  .preview-caption { padding: 0 17px; }
  .about-card { margin: 0 31px; padding: 85px 0 30px; grid-template-columns: 1fr; gap: 40px; }
  .about-card h2 { font-size: 28px; line-height: 1.95; }
  .about-card-copy > p:not(.eyebrow) { font-size: 12px; line-height: 2.5; }
  .about-card-art { width: 100%; border: 0; padding: 25px 0; }
  .about-card-art .gift-words { font-size: 25px; }
  .about-card-art > img { width: 155px; }
  .card-journey { gap: 27px; }
  .card-journey h3 { font-size: 21px; }
  footer { gap: 16px; }
  footer nav { margin-left: 0; }
  footer small { margin-left: 0; }
  .reveal-pending { transform: translate3d(0, 16px, 0); }
}
@container gift-page (max-width: 360px) {
  .hero-copy { padding: 63px 26px 0; }
  .hero h1 { font-size: 28px; }
  .hero-description { font-size: 11px; }
  .hero .read-link { margin-left: 26px; }
  .hero-folio { margin-left: 26px; }
  .letter-prologue p { font-size: 14px; }
  .chapter-first { padding-left: 22px; padding-right: 20px; }
  .chapter-first h2 { font-size: 22px; }
  .book-body p { font-size: 11px; }
  .book-body .book-emphasis { font-size: 17px; }
  .chapter-second h2 { font-size: 28px; }
  .chapter-second p { font-size: 12px; }
  .chapter-second .quiet-wish { font-size: 18px; }
  .closing-letter h2 { font-size: 28px; }
  .future-copy > p:not(.eyebrow) { font-size: 11px; }
  .closing-letter > .letter-signature { font-size: 21px !important; }
  .about-card h2 { font-size: 25px; }
  .about-card-copy > p:not(.eyebrow) { font-size: 11px; }
}
/* Readable letter text and guidance, including the smaller mobile widths. */
:root { --ink: #fff1e5; --muted: #ecd4c3; --letter-body: 17px; --letter-caption: 13px; }
.hero-description,
.chapter-second p:not(.chapter-kicker):not(.quiet-wish),
.future-copy > p:not(.eyebrow):not(.future-last),
.about-card-copy > p:not(.eyebrow) {
  font-size: var(--letter-body); line-height: 2.25; letter-spacing: .035em;
}
.hero .season-label { font-size: 13px; line-height: 2; color: var(--muted); }
.hero-art figcaption, .quiet-art figcaption, .stars-scene figcaption,
.hero-folio, .letter-prologue > span, .letter-signature > span,
.about-card-art figcaption {
  font-size: var(--letter-caption); line-height: 2.1; color: var(--muted);
}
.letter-opening { font-size: 14px; line-height: 2; letter-spacing: .06em; }
.letter-prologue p { font-size: 23px; line-height: 2.35; letter-spacing: .06em; }
.book-body p:not(.book-emphasis) { font-size: 16px; line-height: 2.35; }
.chapter-second .chapter-kicker, .future-copy > .eyebrow,
.section-intro > .eyebrow, .about-card-copy > .eyebrow {
  font-size: var(--letter-caption); color: var(--muted); letter-spacing: .08em;
}
.chapter-second .quiet-wish, .future-copy .future-last { color: #f6dec5; }
.hero .read-link { font-size: 14px; }
.section-intro > p:last-child { font-size: 16px; line-height: 2.25; }
.reply-form label, .reply-form legend { font-size: 14px; }
.reply-form label > span { font-size: 12px; }
.reply-form input, .reply-form textarea { font-size: 16px; }
.examples button { font-size: 13px; }
.color-option { font-size: 14px; }
.message-meta, .privacy-note, .preview-caption, .card-hint,
.card-result > p, .card-search, .purchase-preview-note, .dialog-description,
.back-top, footer nav { font-size: 13px; line-height: 2; }
.result-note { font-size: 13px !important; }
.button, .card-purchase .button, .dialog-actions .button { font-size: 15px; }
.card-journey p { font-size: 15px; line-height: 2.2; }
.afterword > p { font-size: 20px; }
.preview-note { font-size: 11px; opacity: 1; }
@container gift-page (max-width: 700px) {
  .letter-page { --letter-body: 16px; --letter-caption: 12px; }
  .hero .season-label { font-size: 12px; }
  .letter-opening { font-size: 12px; }
  .letter-prologue p { font-size: 19px; line-height: 2.3; letter-spacing: .035em; }
  .book-body p:not(.book-emphasis) { font-size: 15px; line-height: 2.3; }
  .section-intro > p:last-child { font-size: 15px; }
  .letter-signature > span { max-width: 25em; margin-left: auto; margin-right: auto; }
  .afterword > p { font-size: 18px; }
}
@container gift-page (max-width: 360px) {
  .letter-prologue p { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-pending { opacity: 1; transform: none; transition: none; }
  .hero .read-link span, .reading-rail a { transition: none; }
}