:root{--k:#171717;--w:#F8F6EF;--r:#E52B45;--y:#F5E735;--g:#8D8D8D}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth}
body{background:var(--w);color:var(--k);font:400 16px/1.5 'Space Grotesk',sans-serif;overflow-x:hidden}
h1,h2{font-family:Anton,Impact,sans-serif;text-transform:uppercase;line-height:.9;font-weight:400}
h2{font-size:clamp(3rem,14vw,8rem);margin-bottom:1.5rem;color:var(--r);transform:rotate(-2deg)}
.marker{font-family:'Permanent Marker',cursive}
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:.6rem 1rem;background:var(--k);color:var(--w)}
.logo{font-family:'Bowlby One';color:var(--y);text-decoration:none}
#menuBtn,.btn,.ctrl button{font:700 1rem 'Space Grotesk';background:var(--y);color:var(--k);border:3px solid var(--k);padding:.6rem 1.2rem;cursor:pointer;box-shadow:4px 4px 0 var(--r);text-decoration:none;display:inline-block}
@media(hover:hover){.btn:hover,.ctrl button:hover{transform:translate(-2px,-2px) rotate(-2deg)}}
.ctrl button:focus:not(:focus-visible){outline:none}.ctrl button:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--r)}
#menu{display:none;position:absolute;top:100%;left:0;right:0;background:var(--k);flex-direction:column}
#menu.open{display:flex}#menu a{color:var(--w);padding:1rem;text-decoration:none;font-family:Anton;font-size:1.4rem;border-top:1px solid var(--g)}
@media(min-width:800px){#menuBtn{display:none}#menu{display:flex!important;position:static;flex-direction:row;background:none}#menu a{border:0;padding:.3rem .8rem;font-size:1rem}}
.hero{min-height:100vh;min-height:100svh;padding:5rem 1rem 2rem;background:var(--k);color:var(--w);position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center}
.hero h1{font-size:clamp(3.5rem,19vw,16rem);color:var(--r);text-shadow:4px 4px 0 var(--y);animation:drop 1s cubic-bezier(.2,1.4,.4,1) both;position:relative;z-index:2;max-width:100%;overflow-wrap:anywhere}
@keyframes drop{from{transform:translateY(-120%) rotate(-8deg);opacity:0}}
.pattern{position:absolute;inset:0;opacity:.15;background:repeating-conic-gradient(var(--y) 0 25%,transparent 0 50%) 0 0/60px 60px}
.heroPhoto{width:min(300px,70vw);border:8px solid var(--w);transform:rotate(3deg);box-shadow:10px 10px 0 var(--r);position:relative;z-index:1;margin-top:-2rem;animation:drop 1.2s .3s both}
.heroPhoto img,.collage img{width:100%;display:block;aspect-ratio:3/4;object-fit:cover}
.hero p{position:relative;z-index:2;max-width:30ch;font-size:1.2rem}.hero .btn{position:relative;z-index:2}
.marquee{background:var(--y);border-block:4px solid var(--k);overflow:hidden;white-space:nowrap}
.marquee div{display:inline-block;font:2rem Anton;padding:.4rem 0;animation:mq 20s linear infinite}
@keyframes mq{to{transform:translateX(-50%)}}
.sec{padding:4rem 1rem;position:relative}.sec>*{max-width:1000px;margin-inline:auto}
.paper{background:var(--w)}.dark{background:var(--k);color:var(--w)}.red{background:var(--r);color:var(--w)}.red h2{color:var(--y)}
.aboutGrid{display:grid;gap:1.5rem}@media(min-width:800px){.aboutGrid{grid-template-columns:1fr 1fr}}
.fact{display:flex;gap:.6rem;border-bottom:3px dashed var(--g);padding:.5rem 0;align-items:baseline}
.fact b{font:1.1rem Anton;background:var(--k);color:var(--y);padding:0 .5rem;transform:rotate(-2deg)}
.fact span{font-size:1.1rem;overflow-wrap:anywhere}
.news{column-gap:1.5rem;text-align:justify;background:#fff;padding:1rem;border:2px solid var(--k);clip-path:polygon(0 3%,10% 0,30% 2%,60% 0,100% 3%,98% 100%,60% 97%,30% 100%,0 98%)}
.collage{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media(min-width:800px){.collage{grid-template-columns:repeat(3,1fr)}}
.collage figure{background:var(--w);color:var(--k);padding:.5rem .5rem 1.8rem;cursor:pointer;transition:transform .3s;position:relative;border:0}
.collage figure:nth-child(odd){transform:rotate(-3deg)}.collage figure:nth-child(even){transform:rotate(2.5deg) translateY(1.5rem)}
.collage figure:nth-child(3n){border:5px solid var(--y)}.collage figure:nth-child(4n){background:var(--r)}
.collage figure:hover,.collage figure:focus{transform:rotate(0) scale(1.06);z-index:3;outline:3px solid var(--y)}
.collage figcaption{font-family:'Permanent Marker';position:absolute;bottom:.3rem;left:.6rem}
.archGrid{display:grid;gap:1rem}@media(min-width:700px){.archGrid{grid-template-columns:1fr 1fr}}
.card{border:3px solid var(--k);padding:1rem;background:#fff;box-shadow:6px 6px 0 var(--k)}
.card:nth-child(2n){background:var(--y);transform:rotate(1.5deg)}.card:nth-child(3n){transform:rotate(-1.5deg)}
.card h3{font:1.6rem Anton;color:var(--r)}
.player{display:flex;gap:1.2rem;align-items:center;background:var(--k);padding:1.2rem;border:4px solid var(--y);flex-wrap:wrap}
.vinyl{width:110px;height:110px;border-radius:50%;background:radial-gradient(var(--y) 0 14%,var(--k) 15% 40%,#333 41% 44%,var(--k) 45%);border:3px solid var(--w);flex:none}
.vinyl.spin{animation:sp 3s linear infinite}@keyframes sp{to{transform:rotate(360deg)}}
.player b{display:block;font:1.6rem Anton;color:var(--y)}.player input{width:100%;accent-color:var(--r);margin:.6rem 0}
.player>div:last-child{flex:1;min-width:200px}.ctrl{display:flex;gap:.5rem;flex-wrap:wrap}
#qs p{font:clamp(2rem,9vw,4.5rem)/1 Anton;text-transform:uppercase;margin:1.5rem 0}
#qs p:nth-child(odd){color:var(--y);transform:rotate(-2deg)}#qs p:nth-child(even){color:var(--r);text-align:right;transform:rotate(2deg)}
.end{text-align:center}.end .marker{font-size:1.6rem}.end h2{font-size:clamp(3rem,20vw,10rem)}
.st{position:fixed;z-index:5;font-size:2rem;pointer-events:none;animation:fl 6s ease-in-out infinite;color:var(--y);text-shadow:2px 2px 0 var(--k)}
@keyframes fl{50%{transform:translateY(-18px) rotate(20deg)}}
.lb{position:fixed;inset:0;background:rgba(23,23,23,.95);z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--w);padding:1rem}
.lb[hidden]{display:none}.lb img{max-width:100%;max-height:80vh;border:6px solid var(--w)}.lb button{position:absolute;top:1rem;right:1rem;font:1.2rem Anton;background:var(--r);color:var(--w);border:0;padding:.5rem 1rem}
.reveal{opacity:0;translate:0 24px;transition:opacity .7s,translate .7s}.reveal.in{opacity:1;translate:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1;translate:none}}
/* ===== v2 additions ===== */
body{animation:fin .8s both}@keyframes fin{from{opacity:0}}
.issue{display:inline-block;background:var(--y);color:var(--k);font:1.2rem Anton;padding:.1rem .8rem;border:3px solid var(--k);transform:rotate(-4deg);position:relative;z-index:2}
.tape{position:absolute;top:-14px;left:50%;width:90px;height:26px;background:rgba(245,231,53,.8);transform:translateX(-50%) rotate(-4deg)}
.ar{position:absolute;right:-18px;bottom:-14px;font:2rem 'Reem Kufi',sans-serif;background:var(--y);color:var(--k);padding:.1rem .8rem;border:3px solid var(--k);transform:rotate(6deg)}
.heroPhoto{position:relative}
.barcode{width:130px;height:46px;background:repeating-linear-gradient(90deg,var(--w) 0 2px,transparent 2px 4px,var(--w) 4px 5px,transparent 5px 8px,var(--w) 8px 11px,transparent 11px 12px);position:relative;z-index:2}
.fact a{color:var(--r);font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.chips span,.looks li{background:var(--k);color:var(--y);font:1rem Anton;padding:.1rem .7rem;transform:rotate(-2deg);list-style:none}
.chips span:nth-child(2n){background:var(--r);color:var(--w);transform:rotate(2deg)}
#persText{margin-top:1rem}
.collage figure::before{content:"";position:absolute;top:-10px;left:35%;width:70px;height:22px;background:rgba(245,231,53,.85);transform:rotate(-5deg);z-index:2}
.collage .wide{grid-column:span 2}.collage .wide img{aspect-ratio:4/3}
@media(min-width:800px){.collage .tall{grid-row:span 2}.collage .tall img{aspect-ratio:3/5}}
.looks{display:grid;gap:2rem}@media(min-width:800px){.looks{grid-template-columns:repeat(3,1fr)}}
.look{border:3px solid var(--k);background:#fff;padding:.6rem;position:relative}
.look img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.look .no{position:absolute;top:-1rem;left:-.5rem;font:3rem Anton;color:var(--r);text-shadow:2px 2px 0 var(--y)}
.look ul{display:flex;gap:.4rem;flex-wrap:wrap;padding:0;margin:.5rem 0}
.look .nt{font-family:'Permanent Marker';font-size:.95rem}
.geoBg{background-color:var(--w);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='none' stroke='%23171717' stroke-opacity='.12' stroke-width='2'%3E%3Crect x='14' y='14' width='32' height='32'/%3E%3Crect x='14' y='14' width='32' height='32' transform='rotate(45 30 30)'/%3E%3C/g%3E%3C/svg%3E")}
.legend{margin-bottom:1rem}.badge{font:.9rem 'Space Grotesk';font-style:normal;font-weight:700;padding:.1rem .6rem;border:2px solid var(--k)}
.badge.fact{background:var(--y)}.badge.note{background:var(--r);color:var(--w)}
.card .badge{display:inline-block;margin-bottom:.4rem}.card ul{padding-left:1.1rem}
.mood{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}@media(min-width:800px){.mood{grid-template-columns:repeat(3,1fr)}}
.mood>*{aspect-ratio:1;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;padding:.6rem}
.mood img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.2)}
.mood .cap{position:relative;background:var(--w);color:var(--k);font:.9rem 'Permanent Marker';padding:.1rem .5rem;margin-top:auto}
.mood .text{background:var(--y);color:var(--k);font:clamp(1.4rem,6vw,2.4rem) Anton;transform:rotate(-2deg)}
.mood .geo{background-color:var(--r);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='none' stroke='%23F8F6EF' stroke-width='3'%3E%3Crect x='14' y='14' width='32' height='32'/%3E%3Crect x='14' y='14' width='32' height='32' transform='rotate(45 30 30)'/%3E%3C/g%3E%3C/svg%3E")}
.mood .type{background:var(--w);color:var(--r);font:clamp(3rem,16vw,6rem) 'Bowlby One'}
.art{width:140px;height:140px;object-fit:cover;border:3px solid var(--w);flex:none}
.player button:disabled{opacity:.4;cursor:not-allowed}
.plist{margin:1rem auto 0;padding:0;list-style:none;max-width:1000px}
.plist button{width:100%;text-align:left;background:none;color:var(--w);border:0;border-bottom:2px dashed var(--w);padding:.7rem 0;font:700 1rem 'Space Grotesk';cursor:pointer}
.plist .on{color:var(--y)}
.notes{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}
.notes p{background:var(--w);color:var(--k);font:1.1rem 'Permanent Marker';padding:1rem;transform:rotate(-2deg);max-width:260px;clip-path:polygon(0 4%,12% 0,40% 3%,70% 0,100% 4%,98% 100%,60% 96%,30% 100%,0 97%)}
.notes p:nth-child(2n){background:var(--y);transform:rotate(3deg)}
.end small{display:block;margin-top:2rem;color:var(--g)}

/* grain fotokopi + safe-area ponsel */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.12;mix-blend-mode:multiply;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.nav{padding-top:calc(.6rem + env(safe-area-inset-top,0px))}

/* footer, demo, safe-area */
.nav{padding-left:calc(1rem + env(safe-area-inset-left,0px));padding-right:calc(1rem + env(safe-area-inset-right,0px))}
.foot{background:var(--k);color:var(--w);text-align:center;padding:1.2rem 1rem calc(1.2rem + env(safe-area-inset-bottom,0px));font:700 .85rem 'Space Grotesk',sans-serif;letter-spacing:.04em;border-top:4px solid var(--y)}
.demo .foot{padding-bottom:calc(3.4rem + env(safe-area-inset-bottom,0px))}
.demoBar{position:fixed;left:0;right:0;bottom:0;z-index:150;background:var(--y);color:var(--k);text-align:center;font:1rem Anton,Impact,sans-serif;letter-spacing:.08em;padding:.35rem .5rem calc(.35rem + env(safe-area-inset-bottom,0px));border-top:3px solid var(--k);pointer-events:none}
.wm{position:fixed;inset:0;z-index:140;pointer-events:none;opacity:.1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='200'%3E%3Ctext x='20' y='120' font-family='Impact,sans-serif' font-size='26' fill='%23171717' transform='rotate(-25 170 100)'%3EDEMO PREVIEW WEBLUNE%3C/text%3E%3C/svg%3E")}

.foot{background:var(--k);color:var(--w);text-align:center;padding:1.2rem 1rem calc(1.2rem + env(safe-area-inset-bottom,0px));font:700 .85rem 'Space Grotesk',sans-serif;letter-spacing:.04em;border-top:4px solid var(--y)}
body.demo .foot{padding-bottom:calc(3rem + env(safe-area-inset-bottom,0px))}
html{overflow-x:hidden}.sec{overflow-x:clip}

/* bar geser lagu: area sentuh lebih besar, tidak terganggu scroll halaman */
#bar{height:36px;touch-action:none;cursor:pointer;-webkit-appearance:auto}

.player input#bar{height:36px;touch-action:none;cursor:pointer;margin:.2rem 0}
.tm{display:block;font:700 .85rem 'Space Grotesk',sans-serif;color:var(--w);margin-bottom:.4rem}

#bar{height:36px;touch-action:none;cursor:pointer}
.ctrl{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:.4rem}.ctrl button{padding:.6rem .3rem;text-align:center}