:root { --bg:#07131a; --gold:#ffd12f; --white:#fff; --muted:#c8d0d3; --input-bg:#10232e; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html,body { margin:0; background:var(--bg); color:var(--white); }
body { font-family:'Poppins',Arial,sans-serif; }
.hero-desktop,.mobile-hero { position:relative; isolation:isolate; overflow:hidden; }
.hero-bg { position:absolute; inset:0; background:center/cover no-repeat; z-index:-3; pointer-events:none; }
.hero-bg-desktop { background-image:url('/assets/background-scene-desktop.jpg'); }
.hero-bg-mobile { background-image:url('/assets/background-mobile-towers.png'); }
.hero-overlay { position:absolute; inset:0; z-index:-2; pointer-events:none; background:linear-gradient(90deg,#020a0c99, #020a0c15 52%,transparent 75%),linear-gradient(0deg,#020a0cc9,transparent 28%); }
.logo { margin:0; }
.logo-art { display:block; width:100%; height:100%; object-fit:contain; object-position:left center; }
.eyebrow { text-align:center; font-size:11px; letter-spacing:.34em; text-transform:uppercase; margin:0; }
.tagline { margin:0; text-align:right; font:700 30px/1.12 'Caveat',cursive; transform:rotate(-4deg); }
.scene-tagline { position:absolute; top:5%; right:4%; }
.scene-tagline::after { content:''; display:block; height:3px; background:var(--gold); margin-top:10px; border-radius:50%; transform:rotate(-7deg); }
.details { display:flex; gap:16px; font-size:12px; line-height:1.45; }
.details-item { display:flex; align-items:flex-start; gap:10px; color:white; text-decoration:none; }
.details-item + .details-item { border-left:1px solid #ffffff55; padding-left:16px; }
.details-item .icon { width:26px; height:26px; color:var(--gold); flex:none; }
.details strong { text-transform:uppercase; font-weight:600; }
a.details-item:hover { text-decoration:underline; text-underline-offset:3px; }
a:focus-visible,button:focus-visible { outline:2px solid var(--gold); outline-offset:5px; }
.rsvp-card { background:#03141ef2; border:1.5px solid #597078; border-radius:17px; padding:20px 24px; box-shadow:0 18px 60px #0004; }
.rsvp-form h2 { font:700 58px/1 'Caveat',cursive; color:var(--gold); margin:0; }
.rsvp-form > p:not(.fine-print) { font-size:13px; color:var(--muted); margin:8px 0 14px; }
.form-fields { display:flex; flex-direction:column; gap:10px; }
.rsvp-form label { position:relative; display:block; font-size:0; }
.rsvp-form input { display:block; width:100%; height:52px; padding:12px 14px 12px 46px; border:1.5px solid #52616b; border-radius:8px; background:var(--input-bg); color:white; font:400 16px 'Poppins',Arial,sans-serif; }
.rsvp-form input::placeholder { color:#95a4ac; }
.rsvp-form input:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 2px #ffd12f22; }
.field-icon { position:absolute; top:15px; left:15px; width:22px; height:22px; stroke:#c5d1d6; fill:none; stroke-width:1.6; pointer-events:none; }
.rsvp-form input:-webkit-autofill { -webkit-text-fill-color:white; box-shadow:0 0 0 1000px var(--input-bg) inset; caret-color:white; }
.rsvp-form button { height:52px; border:0; border-radius:8px; background:linear-gradient(110deg,#ffcf31,#ffdb54); color:#111; font:800 20px 'Poppins',Arial,sans-serif; cursor:pointer; transition:filter .2s,transform .2s; }
.rsvp-form button:hover { filter:brightness(1.06); transform:translateY(-1px); }
.form-note { margin:0; }
.fine-print { display:flex; flex-direction:column; gap:7px; margin:15px 0 0; font-size:12px; line-height:1.4; color:var(--muted); }
.fine-print span { display:flex; align-items:center; gap:9px; }
.fine-print svg { width:18px; height:18px; fill:none; stroke:var(--gold); stroke-width:1.6; flex:none; }
.thankyou-inline { display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; outline:none; }
.thankyou-check { display:grid; place-items:center; width:35px; height:35px; border:1px solid var(--gold); border-radius:50%; color:var(--gold); font-size:22px; }
.thankyou-inline h3 { margin:5px 0; color:var(--gold); font:700 40px/1 'Caveat',cursive; }
.thankyou-inline p { margin:3px 0; font-size:12px; color:var(--muted); }
.thankyou-inline small { font-size:9px; color:#91a3ad; margin-top:9px; }
.features { display:flex; }
.features > div { display:flex; flex-direction:column; align-items:center; gap:6px; padding:0 22px; font-size:11px; text-transform:uppercase; font-weight:600; }
.features > div:first-child { padding-left:0; }
.features > div + div { border-left:1px solid #ffffff60; }
.features .icon { width:28px; height:28px; color:var(--gold); }
.zagreb-caption { display:flex; align-items:center; gap:8px; font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:0; }
.heart { width:18px; filter:brightness(0) invert(1); opacity:.8; }
.hero-figures,.mobile-figures { pointer-events:none; }
.figure { position:absolute; display:block; height:auto; }
.figure-daniel { filter:drop-shadow(0 12px 18px #0005); }
.miko-caption { position:absolute; font:700 26px/1 'Caveat',cursive; text-align:center; transform:rotate(-5deg); }
.miko-arrow { display:block; position:absolute; width:36px; height:48px; fill:none; stroke:white; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; left:42%; top:100%; }
.alfred-block { display:flex; align-items:center; gap:12px; pointer-events:none; }
.alfred-figure { width:74px; height:auto; }
.alfred-bubble { position:relative; width:125px; min-height:96px; border:2px solid #fff9; border-radius:55% 48% 52% 42%; padding:16px; font:700 23px/1 'Caveat',cursive; text-align:center; transform:rotate(-6deg); }
.alfred-bubble::before { content:''; position:absolute; left:-10px; bottom:17px; width:16px; height:17px; border-left:2px solid #fff9; border-bottom:2px solid #fff9; background:#091312; transform:skew(-25deg) rotate(16deg); }
.alfred-signature { position:absolute; top:calc(100% + 5px); left:10px; white-space:nowrap; font-size:22px; }
.venue-sign { position:absolute; right:3%; top:28%; color:#ffe3be; background:linear-gradient(10deg,#1c100bbb,#51311ecc); padding:10px 15px; border-block:2px solid #a2784566; font:700 clamp(17px,1.8vw,30px) 'Poppins',Arial,sans-serif; text-transform:uppercase; letter-spacing:.04em; transform:rotate(-6deg); text-shadow:0 0 12px #ffc57477; pointer-events:none; }
.scene-books { position:absolute; width:clamp(110px,12vw,205px); left:43%; bottom:13%; pointer-events:none; }
.hero-desktop { height:100svh; min-height:600px; }
.hero-content { position:absolute; left:4%; top:4%; width:clamp(350px,32vw,490px); display:flex; flex-direction:column; gap:clamp(12px,2vh,22px); }
.hero-desktop .logo { height:clamp(100px,18vh,200px); width:88%; margin-inline:auto; }
.hero-desktop .hero-figures { position:absolute; inset:0; }
.hero-desktop .figure-daniel { width:auto; height:59%; bottom:20%; right:12%; }
.hero-desktop .figure-miko { width:auto; height:23%; bottom:23%; left:56%; }
.hero-desktop .figure-props { position:absolute; width:clamp(240px,31vw,530px); right:9%; bottom:9%; }
.hero-desktop .miko-caption { left:55%; bottom:calc(46% + 55px); }
.hero-bottom-bar { position:absolute; left:4%; bottom:3%; display:flex; flex-direction:column; gap:16px; }
.hero-desktop .alfred-block { position:absolute; right:3%; bottom:5%; }
.hero-mobile { display:none; }
@media (min-width:861px) and (max-height:820px) {
  .hero-content { top:3%; gap:12px; }
  .hero-desktop .logo { height:15vh; }
  .rsvp-card { padding:16px 20px; }
  .rsvp-form h2 { font-size:48px; }
  .rsvp-form > p:not(.fine-print) { margin:5px 0 12px; }
  .rsvp-form input,.rsvp-form button { height:46px; }
  .field-icon { top:12px; }
  .fine-print { margin-top:12px; }
  .features .icon { width:24px; height:24px; }
  .hero-bottom-bar { gap:12px; }
}
@media (min-width:861px) and (max-height:700px) {
  .hero-desktop .logo { height:13vh; }
  .hero-content { gap:10px; }
  .rsvp-card { padding:12px 18px; }
  .rsvp-form h2 { font-size:42px; }
  .fine-print { font-size:11px; gap:5px; margin-top:10px; }
  .hero-bottom-bar { bottom:2%; gap:10px; }
}
@media (min-width:861px) and (max-width:1100px) {
  .hero-content { width:350px; }
  .hero-desktop .figure-daniel { height:50%; right:6%; bottom:25%; }
  .hero-desktop .figure-miko { height:18%; left:51%; bottom:25%; }
  .hero-desktop .miko-caption { left:50%; bottom:calc(43% + 50px); font-size:22px; }
  .scene-books { left:44%; bottom:13%; width:110px; }
  .hero-desktop .figure-props { width:250px; right:13%; bottom:13%; }
  .venue-sign { top:22%; right:3%; }
  .hero-desktop .alfred-block { right:3%; bottom:5%; }
  .alfred-figure { width:54px; }
  .alfred-bubble { width:105px; min-height:80px; font-size:20px; padding:12px; }
}


@media (prefers-reduced-motion:reduce) { .rsvp-form button { transition:none; } }
.hero-desktop .figure-daniel { z-index:1; bottom:24%; }
.hero-desktop .figure-miko { z-index:2; }
.hero-desktop .figure-props { z-index:3; width:39%; right:5%; bottom:10%; }
.hero-desktop .miko-caption { z-index:2; }
@media (min-width:861px) and (max-width:1100px) {
  .hero-desktop .figure-props { width:36%; right:4%; bottom:14%; }
}
.hero-desktop .miko-arrow { width:48px; height:80px; }
@media (min-width:861px) and (min-height:701px) and (max-height:820px) {
  .hero-desktop .logo { height:20vh; }
}

/* Desktop: one aligned invitation column, with room for the garden scene. */
@media (min-width:861px) {
  .hero-content { left:4%; top:4%; width:clamp(330px,29vw,460px); gap:clamp(15px,2.3vh,26px); }
  .hero-desktop .logo { width:100%; height:clamp(130px,21vh,225px); margin:0; }
  .hero-desktop .rsvp-card { padding:17px 20px; }
  .hero-desktop .rsvp-form h2 { font-size:clamp(45px,4vw,58px); }
  .hero-desktop .rsvp-form > p:not(.fine-print) { margin:5px 0 12px; font-size:12px; }
  .hero-desktop .rsvp-form input,.hero-desktop .rsvp-form button { height:46px; }
  .hero-desktop .field-icon { top:12px; }
  .hero-desktop .form-fields { gap:9px; }
  .hero-desktop .fine-print { flex-direction:row; align-items:center; justify-content:space-between; gap:9px; font-size:10px; margin-top:13px; white-space:nowrap; }
  .hero-desktop .fine-print span { gap:5px; }
  .hero-desktop .fine-print svg { width:15px; height:15px; }
  .hero-bottom-bar { position:static; width:100%; gap:18px; }
  .hero-desktop .features { width:100%; }
  .hero-desktop .features > div { flex:1; padding:0 12px; }
  .hero-desktop .features > div:first-child { padding-left:12px; }
  .hero-desktop .zagreb-caption { justify-content:center; }
  .hero-desktop .figure-props { width:40%; right:6%; bottom:8%; filter:drop-shadow(0 7px 5px #0005); }
  .hero-desktop .alfred-figure { width:clamp(90px,7vw,126px); }
  .hero-desktop .alfred-block { right:2.5%; bottom:5.5%; gap:17px; z-index:5; }
  .scene-note { position:absolute; left:38%; top:34%; margin:0; font:600 clamp(23px,2vw,32px)/1.03 'Caveat',cursive; transform:rotate(-7deg); color:#fff; text-align:center; pointer-events:none; }
  .scene-note span { display:block; color:var(--gold); font-size:32px; margin-top:7px; }
}
@media (min-width:861px) and (max-height:820px) {
  .hero-content { top:3%; gap:16px; }
  .hero-desktop .logo { height:19vh; }
  .hero-desktop .rsvp-form h2 { font-size:46px; }
  .hero-bottom-bar { gap:14px; }
}
@media (min-width:861px) and (max-height:700px) {
  .hero-content { top:2.5%; gap:12px; }
  .hero-desktop .logo { height:16vh; }
  .hero-desktop .rsvp-card { padding:12px 17px; }
  .hero-desktop .rsvp-form h2 { font-size:40px; }
  .hero-bottom-bar { gap:14px; }
}
@media (min-width:861px) and (max-width:1100px) {
  .hero-content,.hero-bottom-bar { width:330px; }
  .hero-desktop .figure-props { width:39%; right:4%; bottom:14%; }
  .hero-desktop .alfred-figure { width:85px; }
  .scene-note { left:43%; top:26%; font-size:22px; }
}


@media (min-width:861px) { .hero-content .hero-bottom-bar { width:100%; } }
@media (min-width:1101px) {
  .hero-desktop .figure-props { bottom:10%; }
  .hero-desktop .alfred-block { bottom:2.5%; }
}
@media (min-width:861px) and (max-width:1100px) {
  .hero-desktop .alfred-block { bottom:2.5%; }
}
@media (min-width:861px) {
  .hero-desktop .alfred-block { bottom:clamp(36px,4.5vh,52px); }
}

/* Keep the invitation aligned, with the city line at the viewport footer. */
@media (min-width:861px) {
  .hero-content { gap:clamp(18px,2.7vh,30px); }
  .hero-desktop .details { display:grid; grid-template-columns:40% 1fr; align-items:center; gap:12px; padding:0 21px; }
  .hero-desktop .details-item { gap:9px; }
  .hero-desktop .details-item + .details-item { padding-left:12px; }
  .hero-desktop .hero-bottom-bar { padding-top:3px; }
  .desktop-footer { position:absolute; left:4%; bottom:3%; width:clamp(330px,29vw,460px); }
  .garden-guests { position:absolute; left:35%; bottom:28%; width:clamp(230px,24vw,440px); opacity:.76; filter:blur(1.2px) brightness(.84); pointer-events:none; z-index:-1; }
  .scene-note { left:auto; right:2.5%; top:43%; width:clamp(110px,11vw,180px); padding:18px 10px; background:linear-gradient(135deg,#13241de6,#07140ee6); border:5px solid #51371eb3; border-radius:2px; box-shadow:3px 7px 15px #0007; font-size:clamp(21px,1.8vw,29px); transform:rotate(-5deg); z-index:0; }
  .scene-note span { font-size:30px; }
  .hero-desktop .alfred-figure { width:clamp(114px,8.5vw,156px); }
  .hero-desktop .alfred-block { align-items:flex-start; gap:13px; bottom:clamp(34px,4.5vh,52px); }
  .hero-desktop .alfred-bubble { margin-top:5px; }
}
@media (min-width:861px) and (max-height:820px) {
  .hero-content { gap:18px; }
}
@media (min-width:861px) and (max-height:700px) {
  .hero-content { gap:14px; }
}
@media (min-width:861px) and (max-width:1100px) {
  .hero-desktop .details { padding-inline:18px; gap:8px; font-size:11px; }
  .hero-desktop .details-item { gap:7px; }
  .hero-desktop .details-item .icon { width:23px; height:23px; }
  .hero-desktop .details-item + .details-item { padding-left:9px; }
  .desktop-footer { width:330px; }
  .garden-guests { left:40%; bottom:29%; width:220px; }
  .hero-desktop .figure-daniel { right:9%; }
  .scene-note { right:1.5%; top:42%; width:95px; padding:12px 5px; font-size:19px; }
  .hero-desktop .alfred-figure { width:110px; }
}
@media (min-width:861px) {
  .garden-guests { opacity:.9; filter:blur(1px) brightness(.98); }
}
@media (min-width:861px) and (max-width:1100px) {
  .scene-note { left:43%; right:auto; top:24%; width:135px; padding:12px 8px; font-size:19px; }
}
@media (min-width:861px) {
  .hero-content { --card-padding:20px; }
  .hero-desktop .rsvp-card { padding-inline:var(--card-padding); }
  .hero-desktop .details { padding-inline:calc(var(--card-padding) + 1.5px); }
}
@media (min-width:861px) and (max-height:700px) {
  .hero-content { --card-padding:17px; }
}

/* Casual faces stay in the background, and Alfred has his own foreground space. */
@media (min-width:861px) {
  .hero-desktop .details { transform:translateX(10px); }
  .garden-guests { left:35%; bottom:35%; width:clamp(230px,23vw,420px); opacity:.86; filter:blur(1.3px) brightness(.86); mask-image:linear-gradient(to bottom,#000 45%,transparent 100%); }
  .hero-desktop .alfred-block { bottom:12px; }
  .hero-desktop .alfred-bubble { margin-top:0; }
  .hero-desktop .alfred-signature { position:static; display:block; margin-top:8px; font-size:21px; }
  .hero-desktop .alfred-bubble { min-height:105px; padding:13px; font-size:22px; }
  .hero-desktop .figure-props { right:10%; bottom:16%; width:37%; }
}
@media (min-width:861px) and (max-width:1100px) {
  .hero-desktop .figure-props { width:37%; right:7%; bottom:20%; }
  .garden-guests { left:40%; bottom:38%; width:200px; }
  .hero-desktop .details { transform:translateX(8px); }
  .hero-desktop .alfred-bubble { min-height:94px; font-size:20px; width:115px; }
}


@media (min-width:1101px) {
  .hero-desktop .figure-props { width:33%; right:22%; bottom:10%; }
  .scene-books { left:40%; width:11%; }
}
@media (min-width:861px) and (max-width:1100px) {
  .hero-desktop .figure-props { width:35%; right:7%; bottom:19%; }
}


@media (min-width:1101px) { .scene-books { left:38.5%; } }

/* Background guests share the photograph's light and depth. */
@media (min-width:861px) {
  .hero-bg-desktop { background-image:url('/assets/background-garden-guests.png'); }
  .hero-desktop .figure-daniel { bottom:19%; }
  .scene-note { top:53%; }
  .hero-desktop .miko-caption { left:56%; bottom:calc(46% + 28px); }
  .hero-desktop .miko-arrow { left:17%; width:35px; height:65px; }
}
@media (min-width:861px) and (max-width:1100px) {
  .scene-note { top:27%; }
  .hero-desktop .miko-caption { left:51%; bottom:calc(43% + 28px); }
}


/* Handwritten birthday subtitle, matching the supplied logo reference. */
.eyebrow { font-family:'Caveat',cursive; font-weight:600; color:var(--gold); font-size:28px; line-height:1; letter-spacing:.12em; transform:rotate(-5deg); }
@media (min-width:861px) and (max-height:820px) { .eyebrow { font-size:25px; } }





/* Mobile has a compact portrait scene and a readable invitation below it. */
@media (max-width:860px) {
  .hero-desktop { display:none; }
  .hero-mobile { display:block; }
  .mobile-hero { height:clamp(430px,58svh,540px); }
  .hero-bg-mobile { background-size:auto 125%; background-position:center bottom; }
  .mobile-hero .hero-overlay { background:linear-gradient(0deg,#07131a88,transparent 25%); }
  .mobile-brand { position:absolute; top:12px; left:16px; width:52%; max-width:255px; z-index:6; }
  .mobile-brand .logo { height:100px; }
  .mobile-brand .eyebrow { font-size:18px; line-height:1; letter-spacing:.08em; }
  .mobile-tagline { position:absolute; top:18px; right:16px; font-size:17px; line-height:1.05; z-index:6; }
  .mobile-venue-sign { top:82px; right:12px; padding:5px 8px; font-size:12px; line-height:1; z-index:1; }
  .mobile-figures { position:absolute; inset:0; }
  .mobile-figures .figure-daniel { height:clamp(330px,105vw,450px); right:max(-14px,calc((100vw - 560px)/2)); bottom:-35px; z-index:2; }
  .mobile-figures .figure-miko { height:clamp(115px,35vw,155px); left:max(13px,calc((100vw - 510px)/2)); bottom:42px; z-index:5; }
  .mobile-figures .miko-caption { left:max(18px,calc((100vw - 510px)/2)); bottom:calc(clamp(115px,35vw,155px) + 89px); font-size:20px; z-index:5; }
  .mobile-figures .miko-arrow { height:60px; width:33px; left:35%; }
  .mobile-props { position:absolute; width:100%; max-width:580px; right:50%; transform:translateX(50%); bottom:20px; z-index:4; }
  .mobile-hero .alfred-block { position:absolute; left:auto; right:max(12px,calc((100vw - 540px)/2)); bottom:4px; gap:7px; z-index:6; align-items:center; }
  .mobile-hero .alfred-figure { width:48px; }
  .mobile-hero .alfred-bubble { width:88px; min-height:56px; padding:7px; font-size:16px; }
  .mobile-hero .alfred-signature { position:static; display:block; margin-top:3px; font-size:13px; }
  .mobile-content { max-width:540px; margin:auto; padding:16px 16px 28px; display:flex; flex-direction:column; gap:18px; }
  .mobile-content .details { gap:10px; font-size:11px; }
  .mobile-content .details > * { flex:1; }
  .mobile-content .details-item { gap:8px; }
  .mobile-content .details-item + .details-item { padding-left:12px; }
  .mobile-content .details-item .icon { width:23px; height:23px; }
  .mobile-content .rsvp-card { padding:18px 20px; }
  .mobile-content .rsvp-form h2 { font-size:50px; }
  .mobile-content .rsvp-form > p:not(.fine-print) { font-size:12px; margin:5px 0 12px; }
  .mobile-content .rsvp-form input,.mobile-content .rsvp-form button { height:50px; }
  .mobile-content .field-icon { top:14px; }
  .mobile-content .fine-print { flex-direction:row; justify-content:center; align-items:center; gap:7px; white-space:nowrap; font-size:11px; line-height:1.5; margin-top:12px; }
  .mobile-features { justify-content:center; }
  .mobile-features > div { padding:0 20px; font-size:10px; }
  .mobile-features > div:first-child { padding-left:20px; }
  .mobile-footer { display:flex; justify-content:center; margin-top:4px; }
  .mobile-footer .zagreb-caption { font-size:9px; }
  .scene-note { display:none; }
}
@media (max-width:360px) {
  .mobile-brand .logo { height:86px; }
  .mobile-brand .eyebrow { font-size:16px; }
  .mobile-tagline { font-size:15px; }
  .mobile-venue-sign { top:75px; font-size:11px; }
  .mobile-figures .figure-daniel { right:-23px; }
  .mobile-content .rsvp-card { padding-inline:18px; }
  .mobile-content .fine-print { font-size:10.5px; gap:5px; }
}
@media (min-width:600px) and (max-width:860px) {
  .mobile-hero { height:540px; }
  .mobile-venue-sign { top:125px; right:6%; }
}
@media (max-width:860px) {
  .mobile-venue-sign { top:72px; }
  .mobile-figures .figure-daniel { clip-path:inset(0 0 76px 0); }
}
@media (min-width:600px) and (max-width:860px) {
  .mobile-venue-sign { top:120px; }
}
@media (max-width:860px) {
  .mobile-figures .figure-miko { height:clamp(135px,40vw,175px); }
  .mobile-figures .miko-caption { bottom:calc(clamp(135px,40vw,175px) + 89px); }
}
@media (min-width:600px) and (max-width:860px) {
  .mobile-venue-sign { right:12px; }
}
@media (min-width:600px) and (max-width:860px) {
  .mobile-figures .figure-daniel { right:calc((100vw - 500px)/2); }
}

/* Miko peeks over the event details; books sit farther back on the table. */
@media (max-width:860px) {
  .mobile-content { position:relative; isolation:isolate; }
  .mobile-miko { position:absolute; height:clamp(135px,40vw,175px); left:19px; top:-102px; z-index:-1; pointer-events:none; }
  .mobile-content .details { position:relative; z-index:1; background:linear-gradient(90deg,#07131aee,#07131af5 55%); border-radius:8px; }
  .mobile-figures .miko-caption { bottom:110px; left:110px; font-size:18px; text-shadow:0 2px 5px #000; }
  .mobile-figures .miko-arrow { left:-25px; height:51px; transform:scaleX(-1); }
  .mobile-books { position:absolute; width:clamp(66px,20vw,95px); left:13px; bottom:102px; z-index:4; pointer-events:none; }
}

@media (max-width:860px) {
  .hero-bg-mobile { background-size:cover; background-position:center center; }
  .mobile-miko { top:calc(-1 * clamp(135px,40vw,175px) + 20px); }
  .mobile-books { width:clamp(85px,25vw,120px); bottom:95px; left:10px; }
  .mobile-figures .miko-caption { bottom:175px; left:115px; }
  .mobile-figures .miko-arrow { left:-26px; height:44px; width:48px; transform:none; }
  .mobile-hero .alfred-figure { width:77px; }
  .mobile-hero .alfred-block { bottom:10px; gap:5px; }
  .mobile-venue-sign { background:linear-gradient(175deg,#704b2a,#372012); border:1px solid #a67946; border-radius:2px; box-shadow:0 3px 6px #0009,inset 0 0 0 2px #2d1a1077; color:#ffe8c7; letter-spacing:.075em; font-size:13px; padding:7px 9px; transform:rotate(-7deg); }
}

@media (max-width:599px) {
  .mobile-venue-sign { top:82px; font-size:11px; padding:5px 8px; right:7px; }
}

@media (max-width:860px) {
  .mobile-figures .miko-caption { bottom:146px; }
  .mobile-passport { position:absolute; width:72px; left:37%; bottom:18px; z-index:5; pointer-events:none; filter:drop-shadow(0 3px 3px #0007); }
}

@media (max-width:860px) {
  .mobile-content .fine-print { gap:12px; }
  .mobile-content .fine-print span { gap:4px; }
  .mobile-content .fine-print svg { width:14px; height:14px; }
}
@media (max-width:360px) {
  .mobile-content .fine-print { gap:8px; font-size:10.5px; }
  .mobile-content .fine-print svg { width:12px; height:12px; }
}



@media (max-width:860px) {
  .mobile-books { width:clamp(95px,28vw,135px); }
}

@media (max-width:860px) {
  .mobile-miko { left:43px; }
  .mobile-figures .miko-caption { left:139px; }
}

/* Keep the portrait clear of the title on phones with short browser viewports. */
@media (max-width:599px) {
  .mobile-figures .figure-daniel { height:min(clamp(330px,105vw,450px),calc(100% - 110px)); }
  .mobile-content .details-item { text-decoration:none; }
}
@media (max-width:360px) {
  .mobile-brand { left:12px; }
  .mobile-tagline { right:12px; font-size:14px; }
  .mobile-venue-sign { font-size:10px; padding:5px 6px; }
  .mobile-hero .alfred-figure { width:68px; }
  .mobile-hero .alfred-bubble { width:80px; font-size:15px; }
  .mobile-hero .alfred-block { right:8px; }
  .mobile-passport { width:62px; left:39%; }
}

/* A low stack leaves room for the garden and the birthday portrait. */
@media (max-width:599px) {
  .mobile-figures .figure-daniel { height:min(clamp(330px,105vw,450px),calc(100% - 75px)); right:15px; }
  .mobile-venue-sign { top:29%; right:0; font-size:11px; padding:6px 8px; transform:rotate(-7deg); z-index:3; }
  .mobile-books { width:112px; left:8px; bottom:90px; }
  .mobile-interests { position:absolute; left:12px; bottom:161px; margin:0; font:600 15px/1.2 'Caveat',cursive; color:#ffe8c7; transform:rotate(-5deg); text-shadow:0 2px 4px #000; z-index:5; }
  .mobile-figures .miko-caption { left:125px; bottom:127px; font-size:17px; }
  .mobile-figures .miko-arrow { height:33px; width:37px; left:-19px; }
}
@media (min-width:600px) and (max-width:860px) {
  .mobile-books { width:135px; }
  .mobile-interests { position:absolute; left:14px; bottom:175px; font:600 18px/1.2 'Caveat',cursive; color:#ffe8c7; z-index:5; }
}

/* A handwritten thought replaces the books in the mobile scene. */
@media (max-width:860px) {
  .mobile-miko { left:19px; }
  .mobile-interests { left:14px; bottom:164px; max-width:170px; margin:0; font:600 16px/1.2 'Caveat',cursive; color:#ffe8c7; transform:rotate(-5deg); text-shadow:0 2px 4px #000; }
  .mobile-figures .miko-caption { left:103px; bottom:128px; font-size:17px; }
  .mobile-figures .miko-arrow { width:35px; height:34px; left:-19px; }
}
@media (max-width:360px) {
  .mobile-interests { font-size:14px; max-width:150px; bottom:157px; }
}

/* Books sit between Miko and Daniel; Alfred rests at the table edge. */
@media (max-width:860px) {
  .mobile-miko { left:-17px; }
  .mobile-books { left:85px; bottom:93px; width:105px; }
  .mobile-figures .miko-caption { left:9px; bottom:151px; font-size:17px; }
  .mobile-figures .miko-arrow { left:12px; width:31px; height:42px; transform:scaleX(-1); }
  .mobile-hero .alfred-block { bottom:0; }
}
@media (max-width:360px) {
  .mobile-books { left:75px; width:92px; bottom:90px; }
}

@media (max-width:860px) {
  .mobile-hero { overflow:visible; }
  .mobile-hero .alfred-block { bottom:-20px; }
  .mobile-books { left:90px; bottom:51px; width:82px; z-index:5; }
}
@media (max-width:360px) { .mobile-books { left:73px; width:72px; bottom:48px; } }

@media (max-width:860px) { .mobile-hero .alfred-bubble { transform:translateY(8px); } }

@media (max-width:860px) {
  .mobile-figures .miko-caption { bottom:132px; }
  .mobile-figures .miko-arrow { left:16px; width:26px; height:27px; transform:none; }
}

@media (max-width:860px) { .mobile-figures .miko-caption { left:7px; bottom:114px; } }

@media (max-width:599px) { .mobile-figures .figure-daniel { right:33px; } }