@font-face{font-family:'Gift Serif';src:url('assets/gift-serif.woff') format('woff');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Gift Serif';src:url('assets/gift-serif-italic.woff') format('woff');font-style:italic;font-weight:400;font-display:swap}

:root{color-scheme:light;--background:#fffbef;--ink:#2c4634;--muted:#67735b;--accent:#a76b0c;--gold:#f3c634;--line:#52663b24;--paper:#fffef8;--paper-ink:#404b35;--serif:'Gift Serif',Georgia,'Times New Roman',serif;--sans:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
*{box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth}
body{margin:0;min-width:280px;min-height:100svh;background:radial-gradient(ellipse at 76% 46%,#f5cd5221,transparent 53%),var(--background);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible{outline:2px solid #8a6716;outline-offset:6px}
[hidden]{display:none!important}
::selection{background:#f3d76d;color:#2c4634}
.page-shell{width:min(1160px,calc(100% - 112px));min-height:100svh;margin-inline:auto;display:flex;flex-direction:column}
.masthead{height:100px;display:flex;align-items:center;gap:15px;color:var(--muted);font-size:.8125rem;letter-spacing:.055em}
.monogram{font-family:var(--serif);font-size:2.25rem;line-height:1;color:var(--accent);font-style:italic}
.header-heart{margin-left:auto;font-size:1.55rem;line-height:1;color:#9b751d}
main{flex:1;display:flex;align-items:center;justify-content:center}
.cover{width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);align-items:center;gap:16px;padding:24px 0 62px;animation:appear .7s ease both}
.cover-copy{position:relative;z-index:1;padding-left:26px}
.eyebrow{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.17em;color:var(--muted);display:flex;align-items:center;gap:13px;margin:0 0 30px}
.little-line{width:28px;height:1px;background:#b5923d}
h1{font-family:var(--serif);font-size:clamp(4.6rem,7.9vw,6.75rem);font-weight:400;line-height:.98;letter-spacing:-.04em;margin:0 0 28px}
h1>span,h1>em{display:block}
h1 .salutation{font-size:.57em;line-height:1.2;margin:0 0 11px;font-style:italic;letter-spacing:-.025em}
h1 em{font-weight:400;color:var(--accent);letter-spacing:-.04em}
.intro{font-size:1rem;line-height:1.8;color:var(--muted);margin:0 0 29px;max-width:365px}
.button{min-height:56px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:28px;border:1px solid #d4a62b;padding:15px 25px;font-size:.9375rem;font-weight:500;transition:background .2s,transform .2s,box-shadow .2s}
.button-primary{background:var(--gold);color:#35412a;box-shadow:0 7px 22px #b78b1814}
.button-primary:hover{background:#ffdb59;transform:translateY(-2px);box-shadow:0 9px 25px #b78b1823}
.button-primary:active{transform:translateY(0)}
.small-note{display:block;margin-top:16px;font-size:.75rem;line-height:1.6;color:#777b60;letter-spacing:.015em}
.gift-art{position:relative;margin:0;width:100%;align-self:center;text-align:center}
.gift-art::before{content:'';position:absolute;inset:8% 0;background:radial-gradient(ellipse,#efc54117,transparent 70%);pointer-events:none}
.gift-art img{display:block;position:relative;width:100%;max-width:560px;margin:0 auto;height:auto;aspect-ratio:1;object-fit:contain;mix-blend-mode:multiply;mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,#000 68%,transparent 99%);-webkit-mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,#000 68%,transparent 99%)}
.gift-art figcaption{font-family:var(--serif);font-style:italic;font-size:1.45rem;line-height:1.4;color:#88732e;transform:rotate(-4deg);margin:-6px 0 0 28px;position:relative}
.gift-art--portrait::before{display:none}
.gift-art--portrait img{width:min(100%,390px);max-width:390px;height:auto;aspect-ratio:auto;object-fit:contain;mix-blend-mode:normal;mask-image:none;-webkit-mask-image:none;border:8px solid var(--paper);outline:1px solid #e0d6af;border-radius:3px;box-shadow:0 14px 38px #5d462319}
.gift-art--portrait figcaption{margin:18px 0 0;font-size:1.3rem}
.art-spark{position:absolute;color:#be911e;line-height:1;z-index:1;font-size:2rem}
.art-spark-one{top:15%;right:10%;transform:rotate(14deg)}
.art-spark-two{bottom:23%;left:5%;font-size:1.35rem;transform:rotate(-12deg)}
.page-footer{display:flex;justify-content:space-between;gap:20px;padding:24px 0 28px;border-top:1px solid var(--line);font-size:.75rem;line-height:1.5;letter-spacing:.03em;color:#747c60}
.page-footer>span:last-child{color:#67714f}
.page-footer>span:last-child span{margin-left:8px;color:var(--accent)}
.letter-view{width:100%;max-width:690px;padding:0 0 30px;animation:unfold .65s cubic-bezier(.2,.65,.3,1) both}
.back-button{border:0;padding:13px 0;margin-bottom:15px;display:inline-flex;gap:10px;align-items:center;background:transparent;color:#63734e;font-size:.875rem;min-height:44px}
.back-button:hover{color:var(--ink)}
.letter-paper{position:relative;padding:38px 54px 34px;background:var(--paper);color:var(--paper-ink);border-radius:3px 3px 22px 3px;box-shadow:0 14px 60px #91843f12,6px 6px 0 #c5a95213;border:1px solid #e0d6af;isolation:isolate}
.letter-paper::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#dcb349,#f5d87e,#dcb349);border-radius:3px 3px 0 0}
.letter-topline{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:0 0 22px;color:#7d7954;font-size:.75rem;letter-spacing:.08em}
.letter-topline>span:last-child{font-size:1.8rem;line-height:1;color:#b38d2b}
h2{font-family:var(--serif);font-weight:400;font-style:italic;font-size:3.3rem;line-height:1.1;letter-spacing:-.025em;margin:0 0 24px;outline:none;color:#647046}
.letter-body{font-family:var(--serif);font-size:1.3rem;line-height:1.56}
.letter-body p{margin:0 0 17px}
.letter-body strong{font-weight:600;color:#936415}
.letter-body .letter-last-line{margin-bottom:0;font-style:italic;color:#776638}
.signature-row{display:flex;justify-content:space-between;align-items:center;margin-top:25px;min-height:96px;gap:18px}
.signature{display:flex;flex-direction:column;gap:4px;flex-shrink:0}
.signature>span:first-child{font-size:.8125rem;color:#79774f}
.signature-name{font-family:var(--serif);font-size:2.5rem;line-height:1.2;font-style:italic;color:#647046;transform:rotate(-4deg)}
.signature-name>span{font-size:1.5rem;margin-left:6px;color:#ae811e}
.letter-memento{width:116px;height:116px;object-fit:contain;mix-blend-mode:multiply;transform:rotate(8deg);mask-image:radial-gradient(ellipse,#000 55%,transparent 78%);-webkit-mask-image:radial-gradient(ellipse,#000 55%,transparent 78%)}
.postscript{position:relative;text-align:center;padding-top:24px}
.hug-button{display:inline-flex;justify-content:center;align-items:center;gap:10px;border:1px solid #c6b56e70;border-radius:999px;padding:12px 19px;background:#f6dd811e;color:#736321;min-height:46px;font-size:.875rem;transition:background .2s}
.hug-button:hover{background:#f6dd8140}
.hug-button>span:first-child{font-size:1.4rem;line-height:1}
.hug-message{padding:4px 0 8px;animation:appear .4s ease both}
.hug-message p{font-family:var(--serif);font-size:1.45rem;line-height:1.4;margin:22px 0 10px;color:#687148;font-style:italic}
.hug-sign{font-size:.8125rem;color:#7d7954}
.confetti{pointer-events:none;position:absolute;top:44px;left:50%;width:1px;height:1px;z-index:4}
.confetti i{position:absolute;width:5px;height:5px;border-radius:50%;background:#d7a522;animation:burst .85s ease-out both;opacity:0}
.confetti i:nth-child(3n){background:#718755;width:3px;height:3px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.noscript-message{max-width:640px;padding:20px;margin:0 auto;font-size:1rem;line-height:1.7}
@keyframes appear{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@keyframes unfold{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes burst{0%{opacity:0;transform:translate(0,0) scale(.5)}15%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(.3)}}

@media(min-width:1500px){.cover{gap:45px}.cover-copy{padding-left:25px}.gift-art{max-width:580px}}
@media(max-width:950px){.page-shell{width:calc(100% - 72px)}.cover-copy{padding-left:0}.cover{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:4px}h1{font-size:clamp(4.4rem,8.4vw,5.5rem)}.intro{max-width:290px}.desktop-break{display:none}.gift-art figcaption{font-size:1.2rem;margin-top:0}}
@media(max-width:640px){
  .page-shell{width:calc(100% - 40px)}
  .masthead{height:72px;font-size:.75rem;gap:12px}
  .monogram{font-size:2rem}
  .cover{grid-template-columns:minmax(0,1fr);gap:0;padding:18px 0 34px;text-align:center}
  .cover-copy{display:contents}
  .eyebrow{justify-content:center;font-size:.75rem;letter-spacing:.12em;margin:0 0 18px;order:0}
  h1{font-size:clamp(3.8rem,16vw,5.5rem);line-height:.96;margin:0;order:1}
  h1 .salutation{font-size:.54em;line-height:1.15;margin-bottom:9px}
  .intro{max-width:325px;margin:15px auto 0;order:3;font-size:1rem;line-height:1.65}
  .gift-art{order:2;max-width:300px;width:94%;margin:-3px auto -9px}
  .gift-art img{width:100%}
  .gift-art figcaption{display:none}
  .gift-art--portrait{max-width:260px;width:84%;margin:22px auto 8px}
  .gift-art--portrait img{width:100%;border-width:6px}
  .art-spark-one{right:7%;top:20%;font-size:1.6rem}
  .art-spark-two{left:5%;bottom:25%}
  .button-primary{order:4;justify-self:center;margin-top:23px;min-width:234px;min-height:54px;font-size:.9375rem}
  .small-note{order:5;font-size:.75rem;margin-top:12px}
  .page-footer{padding:20px 0 24px;font-size:.75rem;gap:10px;flex-wrap:wrap}
  .page-footer>span:last-child{margin-left:auto}
  .letter-view{padding:0 0 24px;max-width:520px}
  .back-button{font-size:.875rem;margin:0 0 12px}
  .letter-paper{padding:28px 25px 24px;border-radius:3px 3px 18px 3px;box-shadow:0 12px 38px #91843f12,4px 4px 0 #c5a95213}
  .letter-topline{font-size:.75rem;margin-bottom:18px;letter-spacing:.035em}
  h2{font-size:2.8rem;margin-bottom:20px}
  .letter-body{font-size:1.2rem;line-height:1.55}
  .letter-body p{margin-bottom:17px}
  .signature-row{margin-top:18px;min-height:90px}
  .letter-memento{width:100px;height:100px}
  .signature-name{font-size:2.25rem}
  .signature>span:first-child{font-size:.75rem}
  .postscript{padding-top:22px}
  .hug-message p{font-size:1.3rem}
  .hug-button{font-size:.875rem}
  .header-heart{font-size:1.4rem}
}
@media(max-width:360px){.page-shell{width:calc(100% - 32px)}h1{font-size:3.65rem}.letter-paper{padding:25px 21px}.letter-body{font-size:1.125rem}.gift-art{width:88%}.small-note{max-width:260px;justify-self:center}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.button-primary:hover{transform:none}}