:root{
  --orange:#ff8a1f; --orange-d:#e5670a; --orange-l:#ffd2a6; --cream:#fff8ef;
  --white:#fff; --ink:#3b2412; --sky:#ffe9cf; --green:#7cbf5a; --shadow:0 8px 24px rgba(229,103,10,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Trebuchet MS","Hiragino Maru Gothic ProN","Segoe UI",system-ui,sans-serif;color:var(--ink);background:var(--cream);line-height:1.6;
  background-image:radial-gradient(circle at 10px 10px,rgba(255,138,31,.12) 3px,transparent 4px);background-size:36px 36px}
a{color:var(--orange-d)}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:6px;z-index:99}
.site-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border-bottom:3px solid var(--orange)}
.nav{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:.6rem 1rem;flex-wrap:wrap;gap:.4rem}
.brand{font-weight:800;font-size:1.3rem;text-decoration:none;color:var(--orange-d)}.brand span{color:var(--ink);font-weight:400;margin-left:.2rem}
.nav ul{list-style:none;display:flex;gap:1rem;margin:0;padding:0}
.nav ul a{text-decoration:none;font-weight:700;color:var(--ink)}.nav ul a:hover{color:var(--orange-d)}

/* HERO */
.hero{position:relative;overflow:hidden;min-height:90vh;display:flex;align-items:center;justify-content:center;gap:2rem;flex-wrap:wrap;padding:4rem 1.2rem 7rem;
  background:linear-gradient(180deg,#ffb35c 0%,var(--sky) 55%,var(--white) 100%)}
.sun{position:absolute;top:6%;right:8%;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,#fff6d8 0 40%,#ffd36b 41% 60%,transparent 61%);
  box-shadow:0 0 80px 30px rgba(255,220,120,.6);animation:pulse 6s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.06)}}
.hero-text{position:relative;z-index:2;max-width:560px;text-align:center}
.eyebrow{font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-d);font-weight:700;margin:0}
h1{font-size:clamp(2.6rem,9vw,5rem);margin:.2rem 0 .6rem;color:var(--white);text-shadow:3px 3px 0 var(--orange-d),6px 6px 0 rgba(0,0,0,.08);line-height:1.05}
.quote{font-size:clamp(1.15rem,3.6vw,1.6rem);margin:.4rem 0;font-weight:700}
.quote small{font-size:.65em;font-weight:400;opacity:.8}
.quote-cute{color:var(--orange-d)}.quote-cute em{font-style:normal;color:#ff5d8f}
.quote-twist{display:inline-block;margin-top:1rem;padding:.5rem 1.1rem;border-radius:999px;background:var(--white);box-shadow:var(--shadow);cursor:pointer;user-select:none;transition:all .25s;outline-offset:4px}
.quote-twist .twist-back{display:none}
.quote-twist.on{background:#2a0d0d;color:#ff3b3b;letter-spacing:.12em;animation:shake .35s}
.quote-twist.on .twist-front{display:none}.quote-twist.on .twist-back{display:inline}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
body.uso .hero{filter:saturate(.4) hue-rotate(-20deg) brightness(.75);transition:filter .3s}

/* CSS hat (Rena's white sun hat) */
.hero-art{position:relative;z-index:2;width:260px;height:200px}
.hat{position:absolute;inset:0;animation:bob 4s ease-in-out infinite}
.hat-brim{position:absolute;left:0;right:0;bottom:30px;height:70px;border-radius:50%;background:var(--white);box-shadow:inset 0 -10px 0 #f3e6d6,var(--shadow)}
.hat-top{position:absolute;left:55px;right:55px;bottom:62px;height:110px;border-radius:50% 50% 30% 30%/70% 70% 30% 30%;background:var(--white);box-shadow:inset -14px -6px 0 #f4eadf}
.hat-ribbon{position:absolute;left:55px;right:55px;bottom:62px;height:24px;background:var(--orange);border-radius:4px}
.hat-ribbon::after{content:"";position:absolute;right:-18px;top:6px;width:40px;height:60px;background:var(--orange);clip-path:polygon(0 0,100% 0,70% 100%,40% 70%,10% 100%)}
@keyframes bob{50%{transform:translateY(-10px) rotate(-3deg)}}

/* CSS cicadas */
.cicada{position:absolute;width:46px;height:70px;z-index:1}
.cicada span,.cicada::before,.cicada::after{position:absolute;content:""}
.cicada span{left:13px;top:6px;width:20px;height:48px;border-radius:50% 50% 45% 45%;background:linear-gradient(#4a3524,#2c1d12)}
.cicada::before,.cicada::after{top:12px;width:22px;height:54px;border-radius:50% 50% 50% 50%/40% 40% 60% 60%;background:rgba(255,255,255,.55);border:1.5px solid rgba(80,60,40,.5)}
.cicada::before{left:0;transform:rotate(14deg)}.cicada::after{right:0;transform:rotate(-14deg)}
.cicada-1{left:6%;top:18%;animation:fly 9s ease-in-out infinite}
.cicada-2{right:12%;bottom:22%;transform:scale(.7);animation:fly 12s ease-in-out infinite reverse}
.cicada:hover::before,.cicada:hover::after{animation:buzz .08s linear infinite}
@keyframes fly{25%{translate:30px -20px;rotate:10deg}50%{translate:60px 10px;rotate:-6deg}75%{translate:20px 25px;rotate:4deg}}
@keyframes buzz{50%{opacity:.4}}
.grass{position:absolute;left:0;right:0;bottom:0;height:70px;background:
  radial-gradient(ellipse at 50% 100%,var(--green) 0 60%,transparent 61%) 0 100%/60px 70px repeat-x,
  linear-gradient(transparent 60%,#6aab49 60%)}

/* sections */
.section{max-width:1100px;margin:0 auto;padding:4rem 1.2rem}
h2{font-size:clamp(1.8rem,5vw,2.6rem);text-align:center;margin:0 0 1.5rem;color:var(--orange-d)}
h2::after{content:"";display:block;width:80px;height:6px;margin:.4rem auto 0;border-radius:3px;background:repeating-linear-gradient(90deg,var(--orange) 0 14px,transparent 14px 20px)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem}
.card{background:var(--white);border-radius:18px;padding:1.2rem 1.4rem;box-shadow:var(--shadow);border-top:6px solid var(--orange);transition:transform .2s}
.card:hover{transform:translateY(-4px) rotate(-.4deg)}
.card h3{margin:.2rem 0 .5rem;color:var(--orange-d)}
.two-sides .sunny{font-weight:800;color:var(--orange-d)}.two-sides .shady{font-weight:800;color:#7a1f1f}
.fact-note,.hint{text-align:center;font-style:italic;opacity:.85}

.moments{background:var(--white);border-radius:28px;box-shadow:var(--shadow);margin:1rem auto}
.moment-list{list-style:none;counter-reset:m;padding:0;margin:0;display:grid;gap:1rem}
.moment{counter-increment:m;position:relative;padding:1rem 1rem 1rem 4rem;border-radius:16px;background:var(--cream)}
.moment::before{content:counter(m);position:absolute;left:1rem;top:1rem;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--orange);color:#fff;font-weight:800;display:grid;place-items:center}
.moment h3{margin:0 0 .3rem}
.spoiler{display:block;width:100%;margin-top:.5rem;text-align:left;font:inherit;color:inherit;border:2px dashed var(--orange);border-radius:12px;padding:.7rem 1rem;background:#ffe3c7;cursor:pointer;position:relative}
.spoiler span{filter:blur(6px);transition:filter .3s;user-select:none}
.spoiler::before{content:"SPOILER · tap to reveal";position:absolute;inset:0;display:grid;place-items:center;font-weight:800;letter-spacing:.08em;color:var(--orange-d);z-index:1}
.spoiler.revealed{background:#fff;border-style:solid;cursor:default}
.spoiler.revealed span{filter:none;user-select:auto}.spoiler.revealed::before{display:none}

.play{text-align:center}
.cute-row{display:flex;justify-content:center;flex-wrap:wrap;gap:1.2rem;margin:1.5rem 0}
.cute{width:120px;height:120px;border-radius:24px;border:3px solid var(--orange-l);background:var(--white);box-shadow:var(--shadow);cursor:pointer;display:grid;place-items:center;transition:transform .15s}
.cute:hover{transform:scale(1.08) rotate(-3deg)}.cute:active{transform:scale(.94)}
.cute:focus-visible{outline:3px solid var(--orange-d)}
.kitty{position:relative;width:70px;height:56px}
.kitty .face{position:absolute;inset:8px 0 0;border-radius:50%;background:var(--orange);
  background-image:radial-gradient(circle at 32% 45%,#3b2412 4px,transparent 5px),radial-gradient(circle at 68% 45%,#3b2412 4px,transparent 5px),radial-gradient(ellipse at 50% 64%,#ff7aa2 4px,transparent 5px),radial-gradient(circle at 22% 66%,rgba(255,120,160,.6) 6px,transparent 7px),radial-gradient(circle at 78% 66%,rgba(255,120,160,.6) 6px,transparent 7px)}
.kitty .ear{position:absolute;top:0;width:24px;height:24px;background:var(--orange);clip-path:polygon(50% 0,100% 100%,0 100%)}
.kitty .ear.l{left:4px;transform:rotate(-15deg)}.kitty .ear.r{right:4px;transform:rotate(15deg)}
.mini-cicada{position:relative;width:46px;height:70px;display:block}
.mini-cicada span{position:absolute;left:13px;top:6px;width:20px;height:48px;border-radius:50%;background:#4a3524}
.mini-cicada::before,.mini-cicada::after{content:"";position:absolute;top:12px;width:22px;height:54px;border-radius:50%;background:rgba(173,216,230,.5);border:1.5px solid #6b5640}
.mini-cicada::before{left:0;transform:rotate(14deg)}.mini-cicada::after{right:0;transform:rotate(-14deg)}
.kenta{position:relative;width:60px;height:86px;display:block}
.kenta-head{position:absolute;left:15px;top:0;width:30px;height:30px;border-radius:50%;background:#ffe0bd;box-shadow:inset 0 -9px 0 #fff;border:2px solid #ccc}
.kenta-head::after{content:"";position:absolute;left:5px;top:10px;width:18px;height:5px;border-radius:3px;background:#222}
.kenta-body{position:absolute;left:6px;top:30px;width:48px;height:54px;border-radius:12px 12px 6px 6px;background:#fff;border:2px solid #ddd}
.kenta-body::before{content:"";position:absolute;left:18px;top:2px;width:10px;height:12px;background:#222;clip-path:polygon(0 0,100% 0,50% 100%)}
.ohagi{display:block;width:70px;height:56px;border-radius:50% 50% 45% 45%;background:radial-gradient(circle at 35% 35%,#8b4a5a,#5a2a35);box-shadow:inset -6px -6px 0 rgba(0,0,0,.15)}
.counter{font-size:1.1rem}

#popup-layer{position:fixed;inset:0;pointer-events:none;z-index:50;overflow:hidden}
.popup{position:absolute;transform:translate(-50%,-50%);background:var(--white);color:#ff5d8f;font-weight:800;font-size:1.4rem;padding:.4rem 1rem;border-radius:999px;border:3px solid var(--orange);box-shadow:var(--shadow);white-space:nowrap;animation:pop 1.6s ease-out forwards}
.popup.heart{background:none;border:none;box-shadow:none;font-size:1.6rem;padding:0}
@keyframes pop{0%{opacity:0;transform:translate(-50%,-30%) scale(.5)}15%{opacity:1;transform:translate(-50%,-60%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-220%) scale(1)}}

.site-footer{text-align:center;padding:2rem 1rem 3rem;background:var(--orange);color:var(--white);margin-top:3rem}
.site-footer p{margin:.3rem 0}.cicada-sound{font-style:italic;opacity:.8}

@media (max-width:600px){
  .nav{justify-content:center}.nav ul{gap:.8rem;font-size:.95rem}
  .hero{min-height:auto;padding:3rem 1rem 6rem}
  .sun{width:90px;height:90px;right:4%}
  .hero-art{transform:scale(.7);height:150px;margin-top:-1rem}
  .moment{padding-left:3.4rem}.moment::before{left:.7rem}
  .cute{width:96px;height:96px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}