/* Three-page visual composition. Functional controls and destinations are unchanged. */
@font-face{font-family:'Yico Script';src:url('assets/fonts/yico-script.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
:root{--u:calc(100vw / 1024);--night:#030b13;--panel:#091420;--gold:#efc48f;--cream:#ffe5bc;--text:#f3f0e9;--muted:#c4cbd5;--line:#c3bbad38;--script:'Yico Script','Segoe Script','Snell Roundhand',cursive}
body{background-color:var(--night);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
.wrap{width:91.4%;max-width:none}
.header{height:calc(53 * var(--u));min-height:53px;background:#02081088;border-bottom:1px solid #e0d2bc0a}
.header-inner{gap:calc(24 * var(--u))}.logo{font-size:calc(36 * var(--u));letter-spacing:.025em}
.nav{gap:calc(29 * var(--u));font-size:clamp(14px,calc(13 * var(--u)),22px)}
.header .btn{padding:calc(6 * var(--u)) calc(22 * var(--u));min-height:calc(35 * var(--u));font-size:clamp(14px,calc(13 * var(--u)),22px);border-color:#efc48f}
.btn{background:#02091155;border-color:#efc48f;border-width:1px;font-size:clamp(14px,calc(15 * var(--u)),24px);box-shadow:none}
.btn-gold{background:linear-gradient(115deg,#ffe9c4 0%,#f6d19c 48%,#eebd83 100%);color:#1c150c;border-color:#efc48f66;box-shadow:inset 0 1px 0 #fff7,0 3px 15px #0a070326}
.btn-gold:hover{background:linear-gradient(115deg,#fff0d5,#f6cf97)}
.hero{height:calc(430 * var(--u));min-height:430px;max-height:none;border-bottom:1px solid #d5c5a322}
.hero-art{width:100%;height:100%;object-fit:cover;object-position:center;filter:brightness(1.055) saturate(1.03)}
.hero:before{background:linear-gradient(90deg,#030a130b,transparent 60%),linear-gradient(0deg,#030b1338,transparent 12%)}
.hero .wrap{height:100%;padding-top:calc(87 * var(--u));padding-bottom:0}
.hero-copy{margin-left:calc(24 * var(--u));max-width:52%}
.eyebrow{font-size:clamp(12px,calc(12 * var(--u)),20px);letter-spacing:.52em;margin-bottom:calc(8 * var(--u));color:#efc997}
.hero h1{font-size:calc(102 * var(--u));line-height:.94;letter-spacing:.015em;color:#ffe6be;font-weight:400}
.hero-tagline{font-size:calc(29 * var(--u));line-height:1.3;letter-spacing:.045em;margin:calc(2 * var(--u)) 0 calc(12 * var(--u));white-space:nowrap}
.hero-description{font-size:clamp(16px,calc(14 * var(--u)),27px);line-height:1.5;letter-spacing:.04em;max-width:calc(420 * var(--u));color:#dce0e7}
.actions{gap:calc(12 * var(--u));margin-top:calc(17 * var(--u))}
.hero .btn{min-height:calc(44 * var(--u));padding:calc(9 * var(--u)) calc(30 * var(--u))}
.tags{gap:calc(34 * var(--u));margin-top:calc(20 * var(--u));font-size:clamp(14px,calc(13 * var(--u)),22px);color:#d4d7df}
.tags span{gap:calc(8 * var(--u))}.tags .ui-icon{width:calc(25 * var(--u));height:calc(25 * var(--u));stroke-width:1.25;color:#f5ce98}
.hero-note{right:6.1%;top:38%;font-family:var(--script);font-size:calc(69 * var(--u));font-weight:400;line-height:.95;transform:rotate(-10deg);color:#f5d1a3}
.hero-note small{font-size:clamp(9px,calc(9 * var(--u)),16px);letter-spacing:.22em;line-height:1.7;margin-top:calc(17 * var(--u))}
.home-content,.birthday-content{padding-top:calc(8 * var(--u));padding-bottom:calc(20 * var(--u));background:#030b13}
.home-content:before{background:linear-gradient(180deg,#030b1330 0%,#030b1300 30%,#030b1320 50%,#030b13dd 77%,#030b1370 100%),url('assets/moonlit-bay.webp') center calc(115 * var(--u))/100% auto no-repeat;opacity:1}
.section{padding:calc(18 * var(--u)) 0 0}
.section-heading{gap:calc(18 * var(--u));margin-bottom:calc(7 * var(--u))}
.section-title{gap:calc(21 * var(--u))}.section-title:after{width:calc(34 * var(--u));background:#d2a76e;height:1px}
h2{font-size:calc(28 * var(--u));line-height:1.25;letter-spacing:.065em}
.section-intro{font-size:clamp(14px,calc(13 * var(--u)),23px);line-height:1.5;letter-spacing:.03em;margin:0 0 calc(9 * var(--u));color:#c3cad5}
.section-heading>small{font-size:clamp(9px,calc(8 * var(--u)),14px);letter-spacing:.28em;color:#b5bdce;line-height:1.9}
.text-link{font-size:clamp(14px,calc(13 * var(--u)),22px)}
.photo-card{border:1px solid #adb9cb45;border-radius:calc(10 * var(--u));box-shadow:inset 0 1px 0 #ffffff08;background:#07121e}
.photo-card>img{filter:brightness(1.065) saturate(1.025)}
.entry-grid{gap:calc(12 * var(--u))}.entry{min-height:calc(169 * var(--u));padding:calc(12 * var(--u)) calc(22 * var(--u))}
.entry>img{width:57%;height:100%;left:auto;object-fit:cover;object-position:center}
.entry:before{background:linear-gradient(90deg,#020a13fa 0%,#020a13ce 39%,#020a1322 67%,transparent 88%)}
.entry .number{font-size:clamp(12px,calc(11 * var(--u)),18px);letter-spacing:.16em;color:#eac391}
.entry h3{font-size:calc(28 * var(--u));line-height:1.3;letter-spacing:.08em;margin:calc(1 * var(--u)) 0 calc(3 * var(--u))}
.entry p{font-size:clamp(14px,calc(14 * var(--u)),25px);line-height:1.5;max-width:calc(305 * var(--u));color:#e0e3e7}
.entry .btn{min-height:calc(36 * var(--u));padding:calc(5 * var(--u)) calc(25 * var(--u));font-size:clamp(14px,calc(13 * var(--u)),22px);margin-top:calc(9 * var(--u))}
#moods .section-heading>small{font-family:var(--script);font-size:calc(23 * var(--u));letter-spacing:0;line-height:1.05;color:#dfb181}
.moods{gap:calc(10 * var(--u))}.mood{min-height:calc(124 * var(--u));padding:calc(14 * var(--u)) calc(7 * var(--u)) calc(10 * var(--u));border-radius:calc(10 * var(--u));background:linear-gradient(145deg,#25344758,#08152388);border:1px solid #b9c6d230;box-shadow:inset 0 1px 0 #e7eff607;backdrop-filter:blur(2px)}
.mood-icon{margin-bottom:calc(9 * var(--u));color:#ffe6bf}.mood-icon .ui-icon{width:calc(29 * var(--u));height:calc(29 * var(--u));stroke-width:1.5}
.mood strong{font-size:clamp(14px,calc(15 * var(--u)),26px);font-weight:400}.mood p{font-size:clamp(13px,calc(13 * var(--u)),23px);line-height:1.55;margin-top:calc(3 * var(--u));color:#bcc6d5}
.quote-grid{gap:calc(10 * var(--u))}.quote{min-height:calc(154 * var(--u));padding:calc(17 * var(--u)) calc(18 * var(--u))}
.quote:before{background:linear-gradient(90deg,#020b15a3,#020b150b 83%),linear-gradient(0deg,#020b1538,transparent 60%)}
.quote blockquote{font-size:clamp(16px,calc(16 * var(--u)),28px);line-height:1.6;letter-spacing:.045em;color:#fff4df;text-shadow:0 1px 5px #0007}
.quote cite{font-size:clamp(10px,calc(9 * var(--u)),16px);letter-spacing:.35em;margin-top:calc(9 * var(--u))}
.quote img[data-art=harbor]{object-position:82% 55%}.quote img[data-art=skyline]{object-position:90% 25%}.quote img[data-art=cat-wide]{object-position:65% center}.quote img[data-art=moon]{object-position:93% 40%}
.about-grid{grid-template-columns:minmax(0,1.95fr) minmax(0,.81fr) minmax(0,.97fr);gap:calc(10 * var(--u));align-items:stretch}
.about-person{grid-column:auto;gap:calc(24 * var(--u));padding:calc(5 * var(--u)) 0;align-items:center}
.avatar{width:calc(146 * var(--u));height:calc(146 * var(--u));border:2px solid #e7c69a;box-shadow:0 0 0 4px #deb5760c,0 0 25px #edb55d33}
.profile-copy{flex:1;min-width:0}.profile-heading{gap:calc(7 * var(--u)) calc(12 * var(--u));margin-bottom:calc(7 * var(--u))}
.profile-title{font-size:calc(25 * var(--u));letter-spacing:.015em}.badge{font-size:clamp(11px,calc(11 * var(--u)),18px);padding:calc(2 * var(--u)) calc(7 * var(--u));line-height:1.4}
.profile-tags{gap:calc(7 * var(--u));margin-bottom:calc(9 * var(--u))}.profile-tags span{font-size:clamp(12px,calc(13 * var(--u)),22px);min-height:calc(27 * var(--u));padding:calc(3 * var(--u)) calc(12 * var(--u));border:1px solid #bcc5d13d;background:linear-gradient(180deg,#3b424dcc,#222a36cc);box-shadow:inset 0 1px 0 #ffffff0a}
.about-person p{font-size:clamp(13px,calc(13 * var(--u)),24px);line-height:1.65;max-width:none;letter-spacing:.025em;color:#cbd2df}
.id-card,.qr-card{min-height:calc(160 * var(--u));height:100%;padding:calc(14 * var(--u)) calc(16 * var(--u));border:1px solid #b8c3d43d;border-radius:calc(9 * var(--u))}
.qr-card:before{background:linear-gradient(90deg,#03101aae,#03101a15),linear-gradient(0deg,#03101a88,transparent 70%),url('assets/night-lights.webp') center/cover}
.qr-card h3{font-size:clamp(14px,calc(14 * var(--u)),24px)}
.qr-card img{width:calc(85 * var(--u));height:calc(85 * var(--u));margin:calc(8 * var(--u)) 0 calc(5 * var(--u));object-fit:contain;image-rendering:auto;border:3px solid #fff8ed;border-radius:2px}
.qr-card p{font-size:clamp(12px,calc(11 * var(--u)),20px);line-height:1.4}
.id-card{justify-content:flex-end}.id-card:before{background:linear-gradient(0deg,#030c15d9 0%,#030c1545 33%,transparent 70%),url('assets/id-moonlight.webp') center/cover;opacity:1}
.id-card p{font-size:clamp(12px,calc(12 * var(--u)),21px)}.copy-id{font-size:calc(18 * var(--u));gap:calc(11 * var(--u));justify-content:flex-start}.copy-id span{font-size:clamp(12px,calc(12 * var(--u)),20px);color:#ddc7aa}
.gallery{gap:calc(8 * var(--u))}.gallery button{aspect-ratio:1.28;border-radius:calc(6 * var(--u));border-color:#a7b8cb4d}.gallery img{filter:brightness(1.035)}
.footer{padding:calc(19 * var(--u)) 0;background:linear-gradient(90deg,#030b13f5,#030b13d9),url('assets/home-hero.webp') center 85%/cover;border-top:1px solid #bbc5d21c}
.footer .logo{font-size:calc(34 * var(--u))}.footer p{font-size:clamp(12px,calc(11 * var(--u)),19px)}.footer small{font-size:clamp(10px,calc(10 * var(--u)),17px)}.footer .btn{min-height:calc(42 * var(--u));font-size:clamp(14px,calc(13 * var(--u)),22px);padding:calc(7 * var(--u)) calc(24 * var(--u))}
/* Birthday: the same portrait scale, with a compact editorial rhythm. */
.birthday-hero{height:calc(440 * var(--u));min-height:443px;max-height:none;border:0}
.birthday-hero .wrap{padding-top:calc(87 * var(--u));padding-bottom:0}.birthday-hero .hero-copy{max-width:54%;margin-left:calc(24 * var(--u))}
.birthday-hero .eyebrow{font-size:calc(12 * var(--u));letter-spacing:.6em;margin-bottom:calc(11 * var(--u))}
.birthday-hero h1{font-size:calc(67 * var(--u));line-height:1.12;letter-spacing:.04em}.birthday-hero h1 span{font-size:1.5em;line-height:.88;letter-spacing:.025em}
.birthday-hero .hero-tagline{font-size:calc(20 * var(--u));line-height:1.4;letter-spacing:.07em;margin:calc(17 * var(--u)) 0 calc(18 * var(--u))}
.birthday-hero .actions{margin-top:calc(22 * var(--u))}.birthday-hero .hero-note{top:35%;right:5.4%;font-size:calc(54 * var(--u));line-height:1.1}
.birthday-content{padding-top:0;padding-bottom:0}.birthday-content:before{background:linear-gradient(180deg,#030b13d0 0%,#030b13a0 36%,#030b1320 100%),url('assets/moonlit-bay.webp') center bottom/100% auto no-repeat}
.birthday-content .section{padding:calc(18 * var(--u)) 0 0}.birthday-content .section:first-child{padding-top:calc(9 * var(--u))}.birthday-content .section-heading{margin-bottom:calc(16 * var(--u))}
.keywords{gap:calc(12 * var(--u))}.keyword{min-height:calc(175 * var(--u));padding:calc(20 * var(--u)) calc(21 * var(--u))}
.keyword:before{background:linear-gradient(90deg,#030d18cd,#030d1805 90%),linear-gradient(0deg,#030d1822,transparent 55%)}
.keyword .mood-icon{font-size:calc(28 * var(--u));margin-bottom:calc(10 * var(--u))}.keyword h3{font-size:calc(25 * var(--u));letter-spacing:.12em}.keyword h3:after{width:calc(27 * var(--u));margin:calc(13 * var(--u)) 0;background:#d5b181}
.keyword p{font-size:clamp(14px,calc(14 * var(--u)),25px);line-height:1.6;max-width:none;color:#d6dce4}.keyword img[data-art=moon]{object-position:92% 36%}.keyword img[data-art=starry-bay]{object-position:80% 20%}
.moments{gap:calc(12 * var(--u))}.moment{min-height:calc(207 * var(--u));padding:calc(20 * var(--u)) calc(22 * var(--u))}
.moment:before{background:linear-gradient(0deg,#030c15ed 0%,#030c1566 31%,transparent 67%)}.moment h3{font-size:calc(25 * var(--u));margin-bottom:calc(5 * var(--u))}.moment p{font-size:clamp(14px,calc(14 * var(--u)),25px);line-height:1.65;color:#d4dbe7}
.birthday-quotes{gap:calc(11 * var(--u))}.birthday-quotes .quote{min-height:calc(113 * var(--u));padding:calc(17 * var(--u)) calc(22 * var(--u))}.birthday-quotes .quote blockquote{font-size:clamp(16px,calc(16 * var(--u)),28px);line-height:1.6}.birthday-quotes .quote cite{font-size:clamp(10px,calc(10 * var(--u)),17px)}
.birthday-quotes img[data-art=candle-flowers]{object-position:30% 62%}.birthday-quotes img[data-art=night-lights]{object-position:85% 25%}
.light-banner{min-height:calc(136 * var(--u));padding:calc(20 * var(--u)) calc(36 * var(--u));background:#081624}
.light-banner>img{width:47%;height:100%;object-fit:contain;object-position:68% center;mask-image:linear-gradient(90deg,transparent 3%,#000 20%,#000 85%,transparent)}
.light-banner:after{display:block;background:linear-gradient(90deg,#07131f90,#07131f20),url('assets/wish-scene.webp') center 28%/100% auto;z-index:-3}
.light-banner:before{background:linear-gradient(90deg,transparent 32%,#05101b55 59%,#05101b35)}
.light-banner .light-copy{width:38%;font-size:clamp(16px,calc(15 * var(--u)),26px);line-height:1.65;color:#e7e5e1}.light-copy .btn{margin-top:calc(10 * var(--u));min-height:calc(38 * var(--u));padding:calc(7 * var(--u)) calc(27 * var(--u));font-size:clamp(14px,calc(13 * var(--u)),22px)}
.birthday-greeting{min-height:calc(220 * var(--u));padding:calc(22 * var(--u)) 0 calc(42 * var(--u));margin-top:0;background:linear-gradient(90deg,#030b1388,transparent 70%),url('assets/wish-scene.webp') center 25%/100% auto}
.birthday-greeting h2{margin-bottom:calc(18 * var(--u))}.birthday-greeting p{margin-left:10%;font-size:calc(24 * var(--u));line-height:1.6;letter-spacing:.085em;color:#f5d7aa}.birthday-greeting small{margin:calc(14 * var(--u)) 0 0 10%;font-size:clamp(13px,calc(13 * var(--u)),22px);letter-spacing:.4em}
.birthday-signature{font-family:var(--script);right:8%;top:calc(38 * var(--u));font-size:calc(48 * var(--u));line-height:.9;color:#f0c390;transform:rotate(-9deg)}
/* Wish: keep the photographic lantern intact and the text as sharp live type. */
body[data-page=wish]{background:#030b13 url('assets/wish-scene.webp') center top/100% auto no-repeat}
body[data-page=wish] .header{height:calc(94 * var(--u));background:transparent;border:0}
body[data-page=wish] .header .logo{font-size:calc(36 * var(--u))}
.wish-page{background:linear-gradient(90deg,#01091338,transparent 58%)}
.wish-hero{padding:calc(116 * var(--u)) 0 0;min-height:calc(744 * var(--u));overflow:visible}
.wish-hero>.wrap{width:87.2%}.wish-hero .eyebrow{font-size:calc(13 * var(--u));letter-spacing:.55em}
.wish-hero h1{font-size:calc(85 * var(--u));line-height:1.16;letter-spacing:.035em;margin-top:calc(20 * var(--u));color:#ffe5bd}
.wish-hero h2{font-size:calc(34 * var(--u));line-height:1.3;letter-spacing:.07em;margin:calc(10 * var(--u)) 0 calc(29 * var(--u));color:#f5ecd9}
.wish-hero h2 span{font-size:1.4em}.wish-hero p{font-size:calc(18 * var(--u));line-height:1.7;letter-spacing:.065em;color:#e8e3d9;text-shadow:0 1px 8px #0008}
.wish-hero .hero-note{top:32%;right:4%;font-size:calc(58 * var(--u));line-height:1.05;color:#e3b584}.wish-hero .hero-note small{font-size:calc(10 * var(--u));letter-spacing:.4em}
.wish-page>.wrap{width:81.7%;max-width:none}
.wish-panel{border:1px solid #e7bb80;border-radius:calc(14 * var(--u));padding:calc(24 * var(--u)) 5% calc(20 * var(--u));background:linear-gradient(90deg,#03101c42,#03101c10),url('assets/wish-scene.webp') center 27%/100% auto;box-shadow:inset 0 0 45px #030b1322}
.wish-panel:before{top:calc(-19 * var(--u));left:calc(50% - 28 * var(--u));width:calc(56 * var(--u));font-size:calc(26 * var(--u));line-height:calc(34 * var(--u));background:#071422;color:#f9d49c}
.wish-panel h2{font-size:calc(26 * var(--u));line-height:1.3;letter-spacing:.2em;color:#efc48f}
.wish-panel .eyebrow{font-size:clamp(10px,calc(10 * var(--u)),17px);letter-spacing:.6em;margin-top:calc(7 * var(--u));color:#b6bdc9}
.ritual-lights{gap:calc(32 * var(--u));margin:calc(18 * var(--u)) auto calc(10 * var(--u))}.ritual-lamp{min-width:calc(48 * var(--u));gap:calc(7 * var(--u))}.ritual-lamp .lantern-icon{width:calc(22 * var(--u));height:calc(36 * var(--u))}.ritual-lamp span,.ritual-progress{font-size:clamp(12px,calc(12 * var(--u)),20px)}
.wish-panel .wish-quote{max-width:78%;margin:calc(16 * var(--u)) auto calc(15 * var(--u));padding:calc(13 * var(--u)) calc(20 * var(--u));font-size:calc(25 * var(--u));line-height:1.65;letter-spacing:.12em;color:#fff2db;border:1px solid #cdd6e02a;border-radius:calc(7 * var(--u));background:linear-gradient(90deg,#1a2a3f8c,#213b5280);text-shadow:0 1px 7px #0008}
.wish-signature{font-size:clamp(12px,calc(12 * var(--u)),20px);letter-spacing:.6em;color:#e0d5c4}
.wish-actions{margin:calc(35 * var(--u)) auto 0;gap:calc(33 * var(--u));justify-content:center}.wish-actions .btn{min-width:30%;min-height:calc(57 * var(--u));padding:calc(12 * var(--u)) calc(34 * var(--u));font-size:calc(19 * var(--u));gap:calc(14 * var(--u))}
.wish-bottom{padding:calc(21 * var(--u)) 0 calc(42 * var(--u));text-align:center}.wish-bottom .spark{font-size:calc(23 * var(--u))}.wish-bottom p{margin:calc(16 * var(--u)) auto;font-size:clamp(14px,calc(13 * var(--u)),23px);line-height:1.8;letter-spacing:.33em;color:#c8b8a3}.wish-bottom small{font-size:clamp(10px,calc(10 * var(--u)),17px);letter-spacing:.6em}
/* Tablet keeps the reference's three-column profile instead of leaving a blank half-row. */
@media(min-width:761px) and (max-width:1000px){.header-inner{gap:14px}.nav{gap:15px;font-size:13px}.header .btn{font-size:12px;padding:7px 13px}.hero .wrap{padding-top:78px}.hero h1{font-size:88px}.hero-tagline{font-size:25px}.hero-description{font-size:14px}.hero .btn{font-size:13px;padding:9px 20px;min-height:40px}.tags{font-size:12px;gap:20px;margin-top:18px}.hero-copy{max-width:58%}.entry p{font-size:14px}.entry .btn{font-size:13px}.profile-heading{gap:5px 8px}.profile-title{font-size:22px}.profile-tags{gap:4px}.profile-tags span{font-size:12px;padding:3px 7px}.about-person{gap:16px}.about-person p{font-size:12px}.about-person p br{display:none}.avatar{width:110px;height:110px}.id-card,.qr-card{padding:12px;min-height:170px}.qr-card img{width:85px;height:85px}.copy-id{font-size:16px}.birthday-hero .hero-copy{max-width:59%}.birthday-hero h1{font-size:58px}.birthday-hero .hero-tagline{font-size:17px}}
@media(max-width:760px){:root{--u:1px}.wrap{width:calc(100% - 36px)}.header{height:64px;min-height:64px}.header-inner{gap:12px}.logo{font-size:30px}.header .btn{font-size:12px;padding:7px 13px;min-height:36px}.nav{font-size:15px;gap:7px}.hero{height:auto;min-height:0;max-height:none;padding-top:302px}.hero-art{height:440px;object-position:67% center}.hero:before{background:linear-gradient(0deg,#030b13 25%,#030b13e6 42%,#030b1320 76%,transparent 88%)}.hero .wrap{height:auto;padding:0}.hero-copy{max-width:none;margin-left:0;padding-bottom:27px}.hero h1{font-size:82px}.hero-tagline{font-size:25px;white-space:normal;margin:8px 0 14px;line-height:1.45}.hero-description{font-size:16px;line-height:1.65;max-width:none}.eyebrow{font-size:12px}.hero .btn{min-height:45px;padding:10px 21px;font-size:14px}.actions{gap:10px;margin-top:20px}.tags{gap:17px;margin-top:20px;font-size:13px;flex-wrap:wrap}.tags .ui-icon{width:24px;height:24px}.hero-note{display:none}.home-content{padding-top:0;padding-bottom:22px}.home-content:before{background:linear-gradient(180deg,#030b1320,#030b1399),url('assets/moonlit-bay.webp') 65% 150px/auto 1150px no-repeat}.entry-grid{gap:12px}.entry{min-height:185px;padding:19px 22px}.entry>img{width:62%}.entry h3{font-size:28px}.entry p{font-size:15px;line-height:1.5;max-width:310px}.entry .btn{font-size:14px;min-height:40px;padding:7px 24px;margin-top:11px}.section{padding:25px 0 0}.section-heading{margin-bottom:9px;gap:10px}.section-title{gap:12px}.section-title:after{width:27px}h2{font-size:26px;letter-spacing:.045em}.section-intro{font-size:14px;line-height:1.6;margin-bottom:13px}.section-heading>small{font-size:9px}.moods{gap:9px}.mood{min-height:142px;padding:16px 7px 13px}.mood strong{font-size:15px}.mood p{font-size:13px;line-height:1.5}.mood-icon .ui-icon{width:28px;height:28px}.quote-grid{gap:10px}.quote{min-height:185px;padding:19px 15px}.quote blockquote{font-size:16px;line-height:1.65;letter-spacing:.015em}.quote cite{font-size:10px}.about-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:10px}.about-person{grid-column:1/-1;gap:17px;padding:4px 0 14px}.avatar{width:108px;height:108px}.profile-title{font-size:25px}.profile-heading{gap:6px 10px}.badge{font-size:11px}.profile-tags{gap:5px}.profile-tags span{font-size:12px;padding:3px 9px;min-height:26px}.about-person p{font-size:14px;line-height:1.65}.about-person p br{display:none}.qr-card,.id-card{min-height:213px;padding:16px}.qr-card h3{font-size:15px}.qr-card img{width:103px;height:103px}.qr-card p{font-size:13px}.id-card p{font-size:13px}.copy-id{font-size:19px;justify-content:space-between;gap:8px}.gallery{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.gallery button{aspect-ratio:1}.footer{padding:22px 0}.footer .logo{font-size:30px}.footer p{font-size:12px}.footer small{font-size:10px}.footer .btn{min-height:39px;font-size:13px;padding:7px 20px}.birthday-hero{height:auto;min-height:0;padding-top:288px}.birthday-hero .wrap{padding:0}.birthday-hero .hero-copy{max-width:none;margin:0}.birthday-hero .eyebrow{font-size:12px}.birthday-hero h1{font-size:53px}.birthday-hero .hero-tagline{font-size:18px;line-height:1.6;white-space:normal;max-width:none;margin:17px 0}.birthday-hero .actions{margin-top:20px}.birthday-content .section{padding-top:25px}.birthday-content .section:first-child{padding-top:0}.birthday-content:before{background:linear-gradient(180deg,#030b13c9,#030b1322),url('assets/moonlit-bay.webp') 65% bottom/auto 1100px no-repeat}.birthday-content .section-heading{margin-bottom:14px}.keywords{gap:11px}.keyword{min-height:204px;padding:23px 17px}.keyword h3{font-size:24px}.keyword p{font-size:14px}.moments{gap:12px}.moment{min-height:260px;padding:24px}.moment h3{font-size:26px}.moment p{font-size:15px}.birthday-quotes .quote{min-height:140px;padding:25px}.birthday-quotes .quote blockquote{font-size:18px}.light-banner{min-height:295px;padding:25px;align-items:flex-end}.light-banner>img{width:100%;height:74%;object-position:center 8%;mask-image:linear-gradient(0deg,transparent,#000 30%)}.light-banner:before{background:linear-gradient(0deg,#061221f2,transparent 90%)}.light-banner:after{background-size:auto 750px;background-position:70% 25%}.light-banner .light-copy{width:100%;font-size:16px}.birthday-greeting{padding:28px 0 48px;min-height:240px;background-size:auto 800px;background-position:75% 28%}.birthday-greeting p{font-size:22px;margin-left:0;letter-spacing:.03em}.birthday-greeting small{font-size:13px;margin-left:0;letter-spacing:.2em}.birthday-signature{display:none}body[data-page=wish]{background-size:auto 980px;background-position:54% top}body[data-page=wish] .header{height:74px}body[data-page=wish] .header .logo{font-size:30px}.wish-hero{min-height:665px;padding:106px 0 0}.wish-hero>.wrap{width:calc(100% - 40px)}.wish-hero .eyebrow{font-size:12px;letter-spacing:.3em}.wish-hero h1{font-size:50px;letter-spacing:.02em;margin-top:18px}.wish-hero h2{font-size:23px;line-height:1.45;letter-spacing:0;margin:13px 0 23px}.wish-hero p{font-size:16px;line-height:1.8;letter-spacing:0}.wish-page>.wrap{width:calc(100% - 36px)}.wish-panel{padding:29px 17px 22px;background-size:auto 720px;background-position:75% 23%;border-radius:13px}.wish-panel h2{font-size:24px}.wish-panel .eyebrow{font-size:9px;letter-spacing:.35em}.ritual-lights{gap:14px;margin:24px auto 13px}.ritual-lamp{min-width:40px;gap:8px}.ritual-lamp .lantern-icon{width:21px;height:35px}.ritual-lamp span,.ritual-progress{font-size:12px}.wish-panel .wish-quote{max-width:none;padding:20px 10px;font-size:20px;line-height:1.85;letter-spacing:.035em;margin-top:19px}.wish-signature{font-size:12px}.wish-actions{gap:13px;margin-top:27px}.wish-actions .btn{min-width:0;min-height:49px;width:100%;font-size:16px;padding:12px 22px}.wish-bottom{padding:26px 0 42px}.wish-bottom .spark{font-size:24px}.wish-bottom p{font-size:13px;letter-spacing:.06em;margin:16px auto}.wish-bottom small{font-size:9px;letter-spacing:.25em}}
@media(max-width:380px){.header-inner{gap:8px}.header .btn{padding:7px 10px}.hero-tagline{font-size:22px}.hero .btn{font-size:13px;padding:10px 17px}.tags{gap:14px;font-size:12px}.about-person{gap:12px;align-items:flex-start}.avatar{width:86px;height:86px}.profile-tags span{padding:3px 7px}.id-card,.qr-card{padding:13px}.copy-id{font-size:16px}.wish-hero h1{font-size:45px}.wish-hero h2{font-size:21px}.ritual-lights{gap:10px}.ritual-lamp{min-width:38px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* One original QR image, centered without changing the card layout. */
.qr-card img{height:auto;aspect-ratio:430/420;object-fit:contain;object-position:center;margin-left:auto;margin-right:auto;filter:none;image-rendering:pixelated}

/* Align the QR card and retain a complete, high-resolution moon scene. */
.qr-card{align-items:center;text-align:center}
.qr-card h3,.qr-card p{width:100%;text-align:center}
.qr-card img{border:0;border-radius:0;outline:0;box-shadow:none;background:#fff;padding:3px;image-rendering:auto}
.id-card:before{background:linear-gradient(0deg,#030c15e6 0%,#030c1559 32%,transparent 65%),url('assets/moonlit-bay.webp') right top/cover no-repeat;filter:none}

/* Desktop proportions follow the earlier, comfortably sized layout. */
@media(min-width:1001px){
 :root{--u:clamp(.75px,calc(100vw / 1440),1.4px)}
 .wrap{width:min(1408px,91.4%)}
 .hero{height:clamp(430px,33.2vw,680px)}
 .hero .wrap{padding-top:calc(95 * var(--u))}
 .hero-copy{margin-left:0}
 .nav{font-size:14px;gap:clamp(22px,2vw,40px)}
 .header .btn{font-size:14px;padding:7px 23px;min-height:36px}
 .hero .btn{font-size:16px;min-height:44px;padding:9px 30px}
 .hero-description{font-size:clamp(16px,1.1vw,19px)}
 .tags{font-size:14px;gap:34px;margin-top:18px}
 .tags .ui-icon{width:25px;height:25px}
 .entry .btn{font-size:15px;min-height:38px;padding:6px 25px}
 .entry p{font-size:clamp(14px,1.05vw,19px)}
}

/* Compact mobile home: portrait and copy share one composition. */
@media(max-width:760px){
 body[data-page=home] .header{height:60px;min-height:60px}
 body[data-page=home] .header-inner{gap:10px}
 body[data-page=home] .logo{font-size:28px}
 body[data-page=home] .header .btn{font-size:12px;padding:7px 12px;min-height:36px}
 body[data-page=home] .menu-toggle{width:38px;height:38px;flex-shrink:0}
 body[data-page=home] .hero{height:auto;min-height:0;padding-top:clamp(180px,46vw,235px)}
 body[data-page=home] .hero-art{height:clamp(360px,85vw,440px);object-position:64% center}
 body[data-page=home] .hero:before{background:linear-gradient(90deg,#030b134d,transparent 80%),linear-gradient(0deg,#030b13 28%,#030b13e6 46%,#030b1359 67%,transparent 85%)}
 body[data-page=home] .hero-copy{padding-bottom:22px}
 body[data-page=home] .hero .eyebrow{font-size:12px;letter-spacing:.42em;margin-bottom:7px}
 body[data-page=home] .hero h1{font-size:clamp(56px,15vw,64px);line-height:1;letter-spacing:.015em}
 body[data-page=home] .hero-tagline{font-size:clamp(19px,5.2vw,23px);line-height:1.4;letter-spacing:.01em;margin:9px 0 13px}
 body[data-page=home] .hero-description{font-size:16px;line-height:1.55;letter-spacing:0}
 body[data-page=home] .hero .actions{display:grid;grid-template-columns:1.12fr 1fr;gap:9px;margin-top:17px}
 body[data-page=home] .hero .btn{min-height:44px;padding:9px 10px;font-size:14px;white-space:nowrap;letter-spacing:0}
 body[data-page=home] .tags{gap:12px 16px;margin-top:16px;font-size:13px}
 body[data-page=home] .tags span{gap:6px}
 body[data-page=home] .tags .ui-icon{width:22px;height:22px}
 body[data-page=home] .home-content{padding-top:8px}
 body[data-page=home] .entry-grid{grid-template-columns:1fr;gap:10px}
 body[data-page=home] .entry{min-height:178px;padding:17px 19px}
 body[data-page=home] .entry h3{font-size:26px;margin:2px 0 5px}
 body[data-page=home] .entry p{font-size:16px;line-height:1.5}
 body[data-page=home] .entry .btn{min-height:44px;font-size:14px;padding:8px 21px;margin-top:11px}
 body[data-page=home] .section{padding-top:23px}
 body[data-page=home] h2{font-size:24px}
 body[data-page=home] .section-title{gap:10px}
 body[data-page=home] .section-title:after{width:22px}
 body[data-page=home] .moods{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
 body[data-page=home] .mood{min-height:133px;padding:14px 7px 12px}
 body[data-page=home] .mood p{font-size:14px;line-height:1.5}
 body[data-page=home] .mood-icon .ui-icon{width:25px;height:25px}
 body[data-page=home] .quote{min-height:169px;padding:17px 14px}
}
@media(max-width:350px){
 body[data-page=home] .header .btn{font-size:12px;padding:7px 9px}
 body[data-page=home] .hero .btn{font-size:13px;padding:9px 7px}
 body[data-page=home] .tags{gap:10px 12px}
 body[data-page=home] .moods{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Complete the mobile moments grid without changing the desktop row. */
.gallery .mobile-gallery-extra{display:none}
@media(max-width:760px){
 body[data-page=home] .gallery{grid-template-columns:repeat(4,minmax(0,1fr))}
 body[data-page=home] .gallery .mobile-gallery-extra{display:block}
}

/* A compact discovery card shared by the profile buttons on all pages. */
.yico-contact{width:min(380px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;margin:auto;padding:22px;border:1px solid #e8c38b70;border-radius:16px;background:linear-gradient(145deg,#112234,#06101c);color:var(--text);box-shadow:0 24px 80px #0009;text-align:center}
.yico-contact::backdrop{background:#020811d9}
.yico-contact-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.yico-contact h2{font-family:var(--serif);font-size:22px;line-height:1.4;letter-spacing:.04em;color:var(--cream)}
.yico-contact-heading button{width:44px;height:44px;padding:0;border:1px solid #edc18e33;border-radius:50%;background:#ffffff05;color:var(--cream);font-size:26px;line-height:1;flex-shrink:0}
.yico-contact-qr{width:min(200px,100%);height:auto;margin:0 auto 20px;background:#fff;border:0;border-radius:0;object-fit:contain;image-rendering:auto}
.yico-contact-id{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 0;border-top:1px solid #edc18e26;border-bottom:1px solid #edc18e26;text-align:left}
.yico-contact-id p{font-size:14px;line-height:1.5;color:#c4cbd5}
.yico-contact-id strong{font-size:24px;font-weight:400;line-height:1.5;letter-spacing:.04em}
.yico-contact-id .btn{font-size:14px;min-height:44px;padding:9px 16px;color:var(--gold);white-space:nowrap}
#yico-contact-note{margin-top:17px;font-size:14px;line-height:1.75;color:#c4cbd5}
.yico-contact .btn:focus-visible,.yico-contact-heading button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.yico-contact-status:empty{display:none}
.yico-contact-status{margin-top:12px;font-size:14px;line-height:1.5;color:var(--gold)}

/* Birthday and wish pages share the homepage's viewport scale. */
@media(min-width:761px){
 body[data-page=birthday] .birthday-hero{height:clamp(430px,33.2vw,680px);min-height:430px}
 body[data-page=birthday] .birthday-hero .wrap{padding-top:calc(95 * var(--u))}
 body[data-page=birthday] .birthday-hero .hero-copy{margin-left:0}
 body[data-page=birthday] .birthday-hero .btn{font-size:16px;min-height:44px;padding:9px 30px}
 body[data-page=wish]{background-size:auto clamp(700px,62vw,1100px);background-position:right top}
 body[data-page=wish] .header{height:calc(53 * var(--u));min-height:53px;background:#02081088;border-bottom:1px solid #e0d2bc0a}
 body[data-page=wish] .wish-hero{min-height:clamp(430px,33.2vw,680px);padding-top:calc(95 * var(--u));padding-bottom:30px}
 body[data-page=wish] .wish-hero>.wrap,body[data-page=wish] .wish-page>.wrap{width:min(1408px,91.4%)}
 body[data-page=wish] .wish-hero h1{font-size:calc(72 * var(--u));margin-top:calc(12 * var(--u))}
 body[data-page=wish] .wish-hero h2{font-size:calc(28 * var(--u));margin:calc(12 * var(--u)) 0 calc(20 * var(--u))}
 body[data-page=wish] .wish-hero p{font-size:clamp(16px,calc(16 * var(--u)),21px);line-height:1.65;letter-spacing:.03em}
 body[data-page=wish] .wish-hero .hero-note{font-size:calc(45 * var(--u));top:27%}
 body[data-page=wish] .wish-panel{padding:calc(22 * var(--u)) 5%;border-radius:calc(10 * var(--u))}
 body[data-page=wish] .wish-panel .wish-quote{font-size:clamp(18px,calc(20 * var(--u)),28px);line-height:1.65;letter-spacing:.055em}
 body[data-page=wish] .wish-actions{margin-top:calc(22 * var(--u));gap:calc(18 * var(--u))}
 body[data-page=wish] .wish-actions .btn{min-width:0;min-height:44px;padding:10px 30px;font-size:16px}
 body[data-page=wish] .wish-bottom p{font-size:clamp(14px,calc(13 * var(--u)),18px);letter-spacing:.12em}
}
@media(max-width:760px){
 body[data-page=birthday] .header,body[data-page=wish] .header{height:60px;min-height:60px}
 body[data-page=birthday] .header-inner,body[data-page=wish] .header-inner{gap:10px}
 body[data-page=birthday] .header .logo,body[data-page=wish] .header .logo{font-size:28px}
 body[data-page=birthday] .header .btn,body[data-page=wish] .header .btn{font-size:12px;padding:7px 12px;min-height:36px}
 body[data-page=birthday] .birthday-hero{padding-top:clamp(180px,46vw,235px);min-height:0;height:auto}
 body[data-page=birthday] .birthday-hero .hero-art{height:clamp(360px,85vw,440px);object-position:64% center}
 body[data-page=birthday] .birthday-hero:before{background:linear-gradient(90deg,#030b134d,transparent 80%),linear-gradient(0deg,#030b13 28%,#030b13e6 46%,#030b1359 67%,transparent 85%)}
 body[data-page=birthday] .birthday-hero .hero-copy{padding-bottom:22px}
 body[data-page=birthday] .birthday-hero .eyebrow{font-size:12px;margin-bottom:7px}
 body[data-page=birthday] .birthday-hero h1{font-size:clamp(36px,10vw,42px);line-height:1.1;letter-spacing:.025em}
 body[data-page=birthday] .birthday-hero h1 span{font-size:1.5em;line-height:1}
 body[data-page=birthday] .birthday-hero .hero-tagline{font-size:16px;line-height:1.55;letter-spacing:0;margin:13px 0}
 body[data-page=birthday] .birthday-hero .actions{display:grid;grid-template-columns:1fr 1.12fr;gap:9px;margin-top:17px}
 body[data-page=birthday] .birthday-hero .btn{min-height:44px;font-size:14px;padding:9px 10px;white-space:nowrap;letter-spacing:0}
 body[data-page=birthday] .section{padding-top:23px}
 body[data-page=birthday] .birthday-content .section:first-child{padding-top:8px}
 body[data-page=birthday] h2{font-size:24px}
 body[data-page=birthday] .section-heading{margin-bottom:12px}
 body[data-page=birthday] .keyword{min-height:168px;padding:17px 15px}
 body[data-page=birthday] .keyword h3{font-size:22px}
 body[data-page=birthday] .keyword p{font-size:16px;line-height:1.5}
 body[data-page=birthday] .keyword h3:after{margin:10px 0}
 body[data-page=birthday] .moment{min-height:205px;padding:19px}
 body[data-page=birthday] .moment h3{font-size:24px}
 body[data-page=birthday] .moment p{font-size:16px;line-height:1.5}
 body[data-page=birthday] .birthday-quotes .quote{min-height:130px;padding:19px}
 body[data-page=birthday] .birthday-quotes .quote blockquote{font-size:16px;line-height:1.65}
 body[data-page=birthday] .light-banner{min-height:220px;padding:21px}
 body[data-page=birthday] .light-copy .btn{min-height:44px;font-size:14px;padding:9px 21px}
 body[data-page=birthday] .birthday-greeting{min-height:200px;padding:23px 0 32px}
 body[data-page=birthday] .birthday-greeting p{font-size:20px;line-height:1.6}
 body[data-page=wish]{background-size:auto 800px;background-position:54% top}
 body[data-page=wish] .wish-hero{padding:96px 0 28px;min-height:520px}
 body[data-page=wish] .wish-hero>.wrap,body[data-page=wish] .wish-page>.wrap{width:calc(100% - 36px)}
 body[data-page=wish] .wish-hero h1{font-size:clamp(42px,12vw,56px);line-height:1.15;margin-top:12px;letter-spacing:.02em}
 body[data-page=wish] .wish-hero h2{font-size:21px;line-height:1.45;margin:12px 0 18px}
 body[data-page=wish] .wish-hero p{font-size:16px;line-height:1.55;letter-spacing:0}
 body[data-page=wish] .wish-panel{padding:23px 17px 20px;border-radius:10px}
 body[data-page=wish] .wish-panel h2{font-size:24px;letter-spacing:.08em}
 body[data-page=wish] .ritual-lights{gap:clamp(10px,3.5vw,20px);margin:20px auto 12px}
 body[data-page=wish] .ritual-lamp{min-width:36px}
 body[data-page=wish] .wish-panel .wish-quote{font-size:18px;line-height:1.65;padding:17px 10px;margin-top:17px}
 body[data-page=wish] .wish-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:20px}
 body[data-page=wish] .wish-actions .btn{width:100%;min-width:0;min-height:44px;padding:9px 10px;font-size:14px;gap:8px;white-space:nowrap}
 body[data-page=wish] .wish-bottom{padding:23px 0 32px}
 body[data-page=wish] .wish-bottom p{font-size:14px;letter-spacing:.03em;line-height:1.6}
}