/* ===== Eepy — reconstruction. Editable tokens first ===== */
:root{
  --sky:#6a8fe8; --label:#5b6b4a; --label-dark:#434f36; --label-text:#eef2e0;
  --bezel:#5d5d5b; --bezel-edge:#4a4a49;
  --paper:#ece5d3; --ink:#2a2622; --margin-line:#d89a8f; --rule:#b9bfd6;
  --sticky:#e8df9b; --cork:#a98962; --cork-edge:#8d6a45; --pin:#c0574a;
  --lcd:#12180f; --lcd-text:#c9e8a5;
  --f-pixel:'Pixelify Sans',monospace; --f-hand:'Gaegu','Comic Sans MS',cursive; --f-mono:'Space Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--sky);color:var(--ink);font-family:var(--f-hand);min-height:100vh;overflow-x:hidden;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
body.locked{overflow:hidden}
.bg{position:fixed;inset:0;z-index:-3;background:var(--sky) url(assets/city-tall.jpg) center top/cover no-repeat;filter:saturate(1.05)}
.clouds{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(ellipse 30% 12% at 15% 35%,#fff9 0,#fff0 70%),radial-gradient(ellipse 35% 14% at 85% 60%,#fff8 0,#fff0 70%),radial-gradient(ellipse 30% 10% at 70% 15%,#fff7 0,#fff0 70%)}

/* loader */
#loader{position:fixed;inset:0;z-index:100;background:var(--sky);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;transition:opacity .8s}
#loader.out{opacity:0;pointer-events:none}
.loader-title{font-family:var(--f-pixel);font-size:48px;color:#fff}
.loader-sub{font-family:var(--f-pixel);color:#fffc;animation:blink 1.2s infinite}
#enter{font-family:var(--f-pixel);font-size:20px;color:var(--label-text);background:var(--label);border:0;padding:10px 22px;border-radius:6px;cursor:pointer;box-shadow:0 4px 0 var(--label-dark)}
#enter:active{transform:translateY(3px);box-shadow:0 1px 0 var(--label-dark)}
@keyframes blink{50%{opacity:.35}}

/* pills / labels (striped green buttons) */
.pill,.label{font-family:var(--f-pixel);color:var(--label-text);text-decoration:none;
  background:repeating-linear-gradient(90deg,#5e6e4c 0 3px,#566644 3px 6px);
  border:0;border-radius:6px;padding:9px 16px;box-shadow:0 3px 0 var(--label-dark),inset 0 1px 0 #ffffff30;cursor:pointer;font-size:17px}
.ca{display:flex;gap:10px;align-items:center;font-family:var(--f-mono);font-size:15px}
.label{display:inline-block;font-size:16px;font-weight:400;padding:5px 18px;margin-bottom:34px;cursor:default}
.topbar{position:absolute;top:18px;right:20px;display:flex;gap:10px;z-index:5}
.pill:hover{filter:brightness(1.1)}

/* TV / speckled frame */
.frame{background:var(--bezel);border-radius:14px;padding:22px;box-shadow:0 6px 0 var(--bezel-edge),0 14px 30px #0003;
  background-image:radial-gradient(#0003 1px,transparent 1.4px),radial-gradient(#fff2 1px,transparent 1.4px);background-size:5px 5px,7px 7px}
.frame video,.frame img{display:block;width:100%;border-radius:3px;background:#000}

/* hero */
.hero{position:relative;min-height:100vh;padding:80px 4vw 60px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.hero-frame{width:min(92vw,calc((100vh - 150px)*1.7778));margin-top:20px}
.scroll-hint{font-family:var(--f-pixel);color:#fff;margin-top:26px;font-size:15px;animation:bob 2s infinite}
@keyframes bob{50%{transform:translateY(5px)}}

.sec{padding:90px 4vw;display:flex;flex-direction:column;align-items:center;text-align:center}
.reveal{opacity:0;transform:translateY(40px);transition:opacity .9s,transform .9s}
.reveal.in{opacity:1;transform:none}

/* notebook */
.paper{position:relative;width:min(92vw,980px);min-height:480px;background:var(--paper);border-radius:4px 8px 6px 4px;transform:rotate(-.6deg);text-align:left;
  background-image:repeating-linear-gradient(transparent 0 43px,var(--rule) 43px 44px);background-position:0 12px;
  box-shadow:0 8px 0 #cfc7b0,0 18px 30px #0003;padding:70px 40px 50px 100px}
.paper::before{content:"";position:absolute;left:78px;top:0;bottom:0;width:2px;background:var(--margin-line)}
.holes{position:absolute;left:24px;top:48px;bottom:30px;display:flex;flex-direction:column;justify-content:space-between}
.holes i{width:14px;height:14px;border-radius:50%;background:#5c5852;display:block}
.paper h2{font-size:56px;font-weight:700;line-height:1;margin-bottom:12px}
.paper p{font-size:32px;line-height:44px;margin-bottom:22px;max-width:58%}
.paper .lead{font-size:34px}
.paper ul{list-style:none;margin-top:40px}
.paper li{font-size:29px;line-height:44px}
.paper li::before{content:"– ";}
.polaroid{position:absolute;right:30px;top:32px;width:36%;background:#f5f1e6;padding:14px 14px 10px;transform:rotate(2deg);box-shadow:0 6px 14px #0003}
.polaroid img{width:100%;aspect-ratio:1/1.1;object-fit:cover;object-position:50% 40%}
.polaroid figcaption{text-align:center;font-size:24px;padding-top:12px}
.tape{position:absolute;left:50%;top:-14px;width:110px;height:30px;background:#d9d0a0cc;transform:translateX(-50%) rotate(-1deg)}

/* nap */
.nap-frame{width:min(88vw,760px);position:relative}
.nap-frame video{aspect-ratio:4/3;object-fit:cover}
.zzz{position:absolute;right:48px;top:40px;font-family:var(--f-pixel);color:#fffd;font-size:34px;animation:z 3s infinite ease-in-out}
@keyframes z{0%{opacity:0;transform:translate(0,12px)}50%{opacity:1}100%{opacity:0;transform:translate(14px,-22px)}}
.sticky{margin-top:-26px;position:relative;z-index:2;background:var(--sticky);padding:18px 40px 14px;transform:rotate(-1.5deg);box-shadow:0 6px 12px #0003;font-size:30px;display:flex;flex-direction:column}
.sticky small{font-size:24px;opacity:.75}

/* corkboard */
.cork-frame{width:min(94vw,1180px)}
.cork{background:var(--cork);border:4px solid var(--cork-edge);border-radius:3px;padding:50px 40px 60px;
  background-image:radial-gradient(#0002 1px,transparent 1.5px);background-size:6px 6px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:50px 34px;align-items:start}
.pin{cursor:zoom-in;position:relative;background:#f4f0e4;padding:12px 12px 6px;transform:rotate(var(--r));box-shadow:0 5px 10px #0004;transition:transform .25s}
.pin:hover{transform:rotate(0) scale(1.05);z-index:3}
.pin::before{content:"";position:absolute;top:-10px;left:50%;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e88a7c,var(--pin));transform:translateX(-50%);box-shadow:0 3px 4px #0005}
.pin img{aspect-ratio:3/4;object-fit:cover;width:100%;display:block}
.pin figcaption{font-size:24px;line-height:1.1;padding:12px 4px 8px;text-align:center}

/* footer */
.foot{text-align:center;padding:60px 5vw 140px;color:#fff;font-size:26px}
.foot-links{display:flex;gap:10px;justify-content:center;margin-bottom:26px}
.disc{font-size:18px;opacity:.75;max-width:520px;margin:14px auto 0}
.radio-state{cursor:pointer;font-family:var(--f-pixel);font-size:14px;margin-top:24px;opacity:.7}

/* player */
.player{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));z-index:50;display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:8px;
  background:repeating-linear-gradient(90deg,#5e6e4c 0 3px,#566644 3px 6px);box-shadow:0 4px 0 var(--label-dark),0 8px 18px #0003}
.lcd{font-family:var(--f-pixel);background:var(--lcd);color:var(--lcd-text);padding:8px 10px;border-radius:4px;min-width:170px;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}
.btn{background:#ffffff18;border:0;color:#eef2e0;border-radius:5px;width:36px;height:34px;display:grid;place-items:center;cursor:pointer}
.btn:hover{background:#ffffff30}
#vol{width:110px;accent-color:#e6e9d8}
.playlist{position:absolute;bottom:calc(100% + 10px);right:0;list-style:none;background:var(--lcd);color:var(--lcd-text);font-family:var(--f-pixel);border-radius:6px;padding:6px;min-width:220px}
.playlist li{padding:7px 10px;cursor:pointer;border-radius:4px}
.playlist li:hover,.playlist li.on{background:#ffffff18}
@keyframes eq{to{transform:scaleY(1)}}

/* leaves */
#leaves{position:fixed;inset:0;pointer-events:none;z-index:20;overflow:hidden}
.leaf{position:absolute;top:-20px;width:9px;height:15px;border-radius:50%;background:#a6643a;opacity:.8;animation:fall linear infinite}
@keyframes fall{to{transform:translate(var(--dx),110vh) rotate(var(--rot))}}

/* mobile */
@media (max-width:760px){
  .topbar{left:12px;right:12px;top:12px;justify-content:center;flex-wrap:wrap}
  .pill{font-size:14px;padding:7px 11px}
  .frame{padding:12px}
  .hero{padding-top:110px}
  .paper{padding:40px 20px 40px 60px;transform:none}
  .paper::before{left:46px}.holes{left:12px}
  .paper p{max-width:100%;font-size:26px;line-height:44px}
  .paper h2{font-size:42px}
  .polaroid{position:relative;right:auto;top:auto;width:80%;margin:30px auto 0}
  .cork{grid-template-columns:repeat(2,1fr);gap:40px 18px;padding:34px 16px}
    .player{left:10px;right:10px;justify-content:space-between}
  .lcd{min-width:0;flex:1}#vol{width:70px}
}
@media (prefers-reduced-motion:reduce){.leaf,.reveal,.scroll-hint{animation:none;transition:none}.reveal{opacity:1;transform:none}}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:200;background:#0b1430d9;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px)}
.lightbox[hidden]{display:none}
.lightbox figure{background:#f4f0e4;padding:14px 14px 8px;box-shadow:0 14px 40px #0006;transform:rotate(-1deg);max-width:min(88vw,560px)}
.lightbox img{display:block;max-width:100%;max-height:72vh;margin:auto}
.lightbox figcaption{font-family:var(--f-hand);font-size:28px;text-align:center;padding:12px 4px 6px;color:var(--ink)}
.lb-close,.lb-nav{position:absolute;background:var(--label);color:var(--label-text);border:0;border-radius:6px;font-family:var(--f-pixel);cursor:pointer;box-shadow:0 3px 0 var(--label-dark)}
.lb-close{top:max(16px,env(safe-area-inset-top));right:16px;width:40px;height:40px;font-size:26px}
.lb-nav{top:50%;transform:translateY(-50%);width:44px;height:54px;font-size:32px}
.lb-nav.prev{left:14px}.lb-nav.next{right:14px}