/* Official banner composition, sized by available viewport height on desktop. */
#home.hero-official{--site-header-height:86px;position:relative;isolation:isolate;display:grid;grid-template-rows:auto minmax(0,1fr) auto;justify-items:center;align-items:stretch;gap:clamp(8px,1.2svh,16px);height:calc(100svh - var(--site-header-height));min-height:0;max-height:none;padding:clamp(12px,1.8svh,24px) var(--content-gutter) clamp(16px,2.2svh,30px);background:radial-gradient(ellipse at 50% 25%,#ffdbac55,transparent 65%),linear-gradient(#f9e9d6,#f5eadc 65%,#f0ede7);overflow:hidden;text-align:center}
#home.hero-official:before,#home.hero-official:after{display:none}
#home>.anniversary-badge{position:relative;inset:auto;transform:none;display:flex;justify-content:center;align-items:center;width:max-content;max-width:100%;margin:0 auto;padding:6px 18px;gap:12px;border:1px solid #fff8ea;border-radius:999px;background:#fffaf0a6;box-shadow:0 3px 18px #a5682605;z-index:2}
#home>.anniversary-badge>span{font-size:13px;line-height:1.5;font-weight:600;color:#796853}
#home>.anniversary-badge>i{width:5px;height:5px;border-radius:50%;background:var(--brand-orange)}
#home>.hero-scene{position:relative;width:100%;min-height:0;max-width:1360px;overflow:hidden;isolation:isolate;mask-image:linear-gradient(transparent,#000 8%,#000 89%,transparent)}
#home .hero-official-background{position:absolute;top:50%;left:50%;width:auto;max-width:none;height:205%;margin:0;object-fit:contain;transform:translate(-50%,-37%) translate3d(0,var(--hero-art-y,0px),0);mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent),linear-gradient(0deg,transparent,#000 25%,#000 85%,transparent);mask-composite:intersect;mix-blend-mode:multiply;pointer-events:none;will-change:transform}
#home .hero-scene:after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(transparent 50%,#f6e9d933 76%,#f4e9dc 100%);pointer-events:none}
#home .hero-anniversary-label{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);z-index:2;width:max-content;max-width:100%;margin:0;padding:3px 10px;font-size:11px;line-height:1.5;letter-spacing:.16em;font-weight:700;color:#836344;background:#f7ecdd99;border-radius:999px}
#home>.hero-copy{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;max-width:1360px;margin:0;padding:0;z-index:2;pointer-events:auto;transform:translate3d(0,var(--hero-copy-y,0px),0)}
#home .hero-copy>h1{max-width:100%;margin:0 0 clamp(8px,1svh,14px);font-size:clamp(32px,min(3.25vw,5.5svh),64px);font-weight:900;line-height:1.08;letter-spacing:-.035em;color:var(--brand-orange);text-wrap:balance}
#home .hero-subtitle{margin:0 0 clamp(7px,.9svh,12px);font-size:clamp(20px,min(2.1vw,3.35svh),32px);line-height:1.3;letter-spacing:-.025em;font-weight:700;color:#373932}
#home .hero-subtitle em{color:var(--brand-orange);font-family:inherit;font-weight:inherit;font-style:normal}
#home .hero-quote{max-width:900px;margin:0 auto clamp(12px,1.6svh,20px);font-size:clamp(16px,1.05vw,18px);line-height:1.5;font-style:italic;font-weight:400;color:#877055;text-wrap:balance}
#home .hero-actions{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px 20px;margin:0 auto clamp(12px,1.8svh,22px)}
#home .hero-actions>.button{font-size:14px;line-height:1.5;font-weight:500;min-height:44px;padding:11px 19px;gap:10px;white-space:normal;justify-content:center;border-radius:999px}
#home .hero-actions>.hero-tvc{background:var(--brand-orange);border:1px solid var(--brand-orange);color:#fff;box-shadow:0 5px 16px #ae651514}
#home .hero-actions>.hero-tvc:hover{background:var(--brand-orange);border-color:var(--brand-orange)}
#home .hero-actions>.hero-letter{background:#fffaf2c9;border:1px solid #deceba;color:#64533f;box-shadow:none}
#home .hero-actions>.hero-wish{border:0;background:transparent;color:#9b6229;box-shadow:none}
#home .hero-actions svg{width:14px;height:14px;flex-shrink:0}
#home .countup{width:min(540px,100%);max-width:100%;margin:0 auto;padding:clamp(10px,1.4svh,16px) 22px;border:1px solid #fffdf3;border-radius:20px;background:#fffaf3b3;box-shadow:0 8px 30px #88612c07;backdrop-filter:blur(8px)}
#home .count-heading{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:0 0 clamp(8px,1svh,12px)}
#home .count-heading>strong{font-size:11px;line-height:1.5;letter-spacing:.06em;font-weight:600;color:#a07749}
#home .count-heading>span{font-size:12px;line-height:1.5;font-weight:600;color:#796343;background:#f0e4cf;padding:2px 9px;border-radius:999px}
#home .count-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));width:100%;max-width:none;gap:0}
#home .count-grid>div{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;padding:0 8px;border-right:1px solid #e3d7c5;background:none;border-radius:0}
#home .count-grid>div:last-child{border:0}
#home .count-grid strong{font-size:clamp(22px,min(2vw,3.2svh),30px);line-height:1.1;font-weight:600;color:#4b4c42;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
#home .count-grid>div:last-child strong{color:var(--brand-orange)}
#home .count-grid span{font-size:10px;line-height:1.5;font-weight:500;letter-spacing:.06em;margin-top:4px;color:#92826d}
@media(min-width:801px) and (max-height:720px){#home.hero-official{gap:5px;padding-top:9px;padding-bottom:12px}#home>.anniversary-badge{padding-block:4px}#home .hero-copy>h1{font-size:clamp(29px,min(3.2vw,5.3svh),42px);margin-bottom:6px}#home .hero-subtitle{font-size:clamp(18px,2.9svh,24px);margin-bottom:5px}#home .hero-quote{font-size:14px;margin-bottom:10px}#home .hero-actions{margin-bottom:10px}#home .hero-actions>.button{min-height:40px;padding:9px 16px}#home .countup{padding:9px 18px}#home .count-heading{margin-bottom:6px}#home .count-grid strong{font-size:22px}#home .count-grid span{font-size:9px}#home .hero-anniversary-label{font-size:10px}}
/* Mobile uses a readable flow instead of compressing text into the viewport. */
@media(max-width:800px){#home.hero-official{height:auto;min-height:calc(100svh - var(--site-header-height));grid-template-rows:auto clamp(230px,34svh,340px) auto;gap:12px;padding-top:20px;padding-bottom:32px}#home>.hero-scene{width:calc(100% + 32px)}#home .hero-official-background{height:185%;will-change:auto}#home .hero-copy>h1{font-size:clamp(30px,5.6vw,44px);margin-bottom:12px;line-height:1.14}#home .hero-subtitle{font-size:clamp(21px,3.7vw,26px);line-height:1.35;margin-bottom:12px}#home .hero-quote{font-size:16px;line-height:1.65;max-width:560px;margin-bottom:20px}#home .hero-actions{gap:10px 14px;margin-bottom:22px}#home .countup{padding:15px 18px}#home .count-heading{margin-bottom:12px}#home .count-grid strong{font-size:26px}#home .count-grid span{font-size:10px}}
@media(max-width:500px){#home.hero-official{grid-template-rows:auto clamp(220px,31svh,270px) auto;gap:10px;padding-top:16px;padding-bottom:28px}#home>.anniversary-badge{padding:5px 15px;gap:10px}#home>.anniversary-badge>span{font-size:12px}#home .hero-anniversary-label{font-size:10px;letter-spacing:.13em}#home .hero-copy>h1{font-size:30px;line-height:1.13;margin-bottom:10px}#home .hero-subtitle{font-size:21px;line-height:1.35;margin-bottom:10px}#home .hero-quote{font-size:16px;line-height:1.6;margin-bottom:18px}#home .hero-actions{display:grid;grid-template-columns:auto auto;justify-content:center;gap:10px 12px;width:100%;margin-bottom:20px}#home .hero-actions>.button{font-size:14px;min-height:44px;padding:11px 15px}#home .hero-actions>.hero-tvc{grid-column:1/-1;justify-self:center}#home .hero-actions>.hero-letter,#home .hero-actions>.hero-wish{justify-self:center}#home .countup{padding:14px 10px;border-radius:18px}#home .count-heading{gap:6px 8px;margin-bottom:12px}#home .count-heading>strong{font-size:10px}#home .count-heading>span{font-size:11px}#home .count-grid>div{padding:0 4px}#home .count-grid strong{font-size:24px}#home .count-grid span{font-size:9px;letter-spacing:.02em}}
@media(max-width:350px){#home .hero-copy>h1{font-size:28px}#home .hero-subtitle{font-size:20px}#home .hero-actions{gap:8px}#home .hero-actions>.button{padding-inline:10px;font-size:13px}#home .count-grid strong{font-size:21px}#home .count-grid span{font-size:8px}}
@media(prefers-reduced-motion:reduce){#home .hero-official-background,#home>.hero-copy{will-change:auto;transform:none}#home .hero-official-background{transform:translate(-50%,-37%)}}
/* Keep the anniversary caption crisp above the soft image edge. */
#home>.hero-scene{mask-image:none}
#home .hero-anniversary-label{font-size:11px}
#home>.hero-scene{mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(180deg,transparent,#000 8%,#000);mask-composite:intersect}
