/* CHILLBONER — museum-of-chill, colour-blocked. Shared stylesheet, loaded on every page. */

:root{
  --sage:#A9BA8B;        /* main background, brighter than the logo olive */
  --sage-deep:#46503A;   /* dark blocks, footer top */
  --teal:#6FB3A0;        /* sweatpants teal */
  --cream:#F8F2E0;       /* marble / cards */
  --gold:#EFB92B;        /* laurel gold */
  --brick:#D8503C;       /* sneaker red */
  --ink:#1C1E17;
  --wrap:1120px;
  --radius:3px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--sage);
  color:var(--ink);
  font-family:'Space Mono', ui-monospace, monospace;
  font-size:16px;
  line-height:1.55;
  overflow-x:hidden;
}
h1,h2,h3{font-family:'Fraunces', Georgia, serif;font-weight:900;margin:0 0 .4em;letter-spacing:-0.015em;}
h2{font-size:clamp(28px,4.4vw,50px);text-transform:uppercase;line-height:.98;}
h3{font-size:20px;}
a{color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin:0 0 8px;}
section{padding:64px 0;}
.sec-cream{background:var(--cream);color:var(--ink);}
.sec-teal{background:var(--teal);color:var(--ink);}
.sec-deep{background:var(--sage-deep);color:var(--cream);}
.sec-gold{background:var(--gold);color:var(--ink);}
.sec-cream .eyebrow{color:var(--brick);}
.sec-teal .eyebrow{color:var(--ink);opacity:.7;}
.sec-deep .eyebrow{color:var(--gold);}
.sec-gold .eyebrow{color:var(--ink);opacity:.7;}

/* ---------- plaque nav ---------- */
.plaque-nav{position:sticky;top:0;z-index:50;background:var(--ink);border-bottom:4px solid var(--gold);}
.plaque-nav .row{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;max-width:var(--wrap);margin:0 auto;gap:16px;flex-wrap:wrap;}
.plaque-brand{display:flex;align-items:center;gap:10px;font-family:'Fraunces',serif;font-weight:900;color:var(--cream);font-size:19px;text-decoration:none;text-transform:uppercase;}
.plaque-brand img{width:32px;height:32px;border-radius:50%;border:2px solid var(--gold);}
.wings{display:flex;gap:5px;flex-wrap:wrap;list-style:none;margin:0;padding:0;}
.wings a{display:inline-block;text-decoration:none;color:var(--cream);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:8px 12px;border:1.5px solid rgba(248,242,224,.3);border-radius:var(--radius);transition:all .15s ease;}
.wings a:hover,.wings a.active{background:var(--gold);color:var(--ink);border-color:var(--gold);transform:translateY(-2px);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Space Mono',monospace;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  padding:15px 24px;border-radius:var(--radius);border:2.5px solid var(--ink);
  background:var(--gold);color:var(--ink);text-decoration:none;cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;box-shadow:5px 5px 0 var(--ink);
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink);}
.btn:active{transform:translate(0,0);box-shadow:2px 2px 0 var(--ink);}
.btn.brick{background:var(--brick);color:var(--cream);}
.btn.teal{background:var(--teal);color:var(--ink);}
.btn.cream{background:var(--cream);}
.btn[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none;}

/* ---------- hero ---------- */
.hero{padding:60px 0 46px;position:relative;overflow:hidden;}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;}
.hero h1{font-size:clamp(40px,6.6vw,80px);line-height:.9;text-transform:uppercase;color:var(--ink);text-shadow:4px 4px 0 var(--cream);}
.hero p.lede{font-size:16px;max-width:46ch;}
.hero-figure{position:relative;}
.hero-figure img,.hero-figure video{filter:drop-shadow(12px 14px 0 rgba(28,30,23,.25));animation:float 5s ease-in-out infinite;border-radius:var(--radius);}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1deg);}50%{transform:translateY(-14px) rotate(1deg);}}
.laurel-badge{
  position:absolute;top:0;right:0;z-index:2;background:var(--brick);color:var(--cream);
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:8px;border:2.5px solid var(--ink);border-radius:50%;
  width:86px;height:86px;display:flex;align-items:center;justify-content:center;text-align:center;
  animation:spin-slow 14s linear infinite;
}
@keyframes spin-slow{from{transform:rotate(6deg);}to{transform:rotate(366deg);}}

/* ---------- cards ---------- */
.placard{background:var(--cream);border:2.5px solid var(--ink);border-radius:var(--radius);padding:22px 24px;box-shadow:7px 7px 0 var(--ink);}
.sec-cream .placard{background:#fff;}
.placard .tag{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--brick);font-weight:700;margin:0 0 4px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}

/* ---------- alternating image+text rows ---------- */
.row-split{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;}
.row-split.flip .row-media{order:2;}
.row-media img,.row-media video{border:3px solid var(--ink);border-radius:var(--radius);box-shadow:9px 9px 0 var(--ink);width:100%;}

/* ---------- how to buy steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:step;}
.step{background:var(--cream);border:2.5px solid var(--ink);border-radius:var(--radius);padding:22px;box-shadow:7px 7px 0 var(--ink);position:relative;}
.step::before{
  counter-increment:step;content:counter(step);
  position:absolute;top:-18px;left:-18px;width:44px;height:44px;border-radius:50%;
  background:var(--brick);color:var(--cream);border:2.5px solid var(--ink);
  display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-weight:900;font-size:20px;
}

/* ---------- panic sell ---------- */
.panic-box{background:var(--ink);color:var(--cream);border:3px solid var(--gold);border-radius:var(--radius);padding:34px;text-align:center;position:relative;overflow:hidden;}
#panicBtn{font-size:16px;padding:18px 34px;}
.panic-counter{font-family:'Fraunces',serif;font-size:46px;font-weight:900;color:var(--gold);margin:8px 0;}
.panic-msg{min-height:24px;font-size:13px;opacity:.85;}
.shake{animation:shake .35s ease;}
@keyframes shake{10%,90%{transform:translateX(-1px);}20%,80%{transform:translateX(2px);}30%,50%,70%{transform:translateX(-4px);}40%,60%{transform:translateX(4px);}}

/* ---------- marquee ---------- */
.marquee{background:var(--brick);color:var(--cream);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);overflow:hidden;white-space:nowrap;padding:10px 0;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;}
.marquee span{display:inline-block;padding-left:100%;animation:scroll 24s linear infinite;}
.marquee.gold{background:var(--gold);color:var(--ink);}
@keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-100%);}}

/* ---------- sticker rail ---------- */
.rail{display:flex;gap:16px;overflow-x:auto;padding:6px 0 16px;scroll-snap-type:x mandatory;}
.rail img{width:190px;height:190px;object-fit:cover;flex:0 0 auto;border:2.5px solid var(--ink);border-radius:var(--radius);box-shadow:6px 6px 0 var(--ink);scroll-snap-align:start;background:var(--sage);transition:transform .15s ease;}
.rail img:hover{transform:translateY(-6px) rotate(-2deg);}

/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--cream);padding:44px 0 30px;font-size:12px;}
footer .cols{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;}
footer a{text-decoration:none;color:var(--gold);}
.disclaimer{margin-top:22px;padding-top:18px;border-top:1px solid rgba(248,242,224,.18);font-size:11px;line-height:1.6;opacity:.72;max-width:80ch;}

/* ---------- misc ---------- */
.grain{pointer-events:none;position:fixed;inset:0;z-index:9999;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

@media (max-width:820px){
  .hero .wrap,.grid-2,.grid-3,.row-split,.steps{grid-template-columns:1fr;}
  .row-split.flip .row-media{order:0;}
  .hero-figure{max-width:300px;margin:0 auto;}
  .laurel-badge{width:70px;height:70px;font-size:10px;}
}
@media (max-width:400px){
  .wings a{font-size:10px;padding:6px 8px;}
  .hero h1{font-size:34px;}
  .step::before{left:-10px;top:-16px;}
}

/* ---------- back-compat aliases (pagine interne) ---------- */
:root{ --marble:var(--cream); --marble-dim:var(--cream); --bg:var(--sage); --bg-deep:var(--sage-deep); }
.marble-sec{background:var(--cream);color:var(--ink);}
.deep{background:var(--sage-deep);color:var(--cream);}
.deep .eyebrow{color:var(--gold);}
.marble-sec .eyebrow{color:var(--brick);}

/* hero cutout: cap dimensioni */
.hero-figure img,.hero-figure video{max-height:520px;width:auto;max-width:100%;margin:0 auto;}
@media (max-width:820px){ .hero-figure img,.hero-figure video{max-height:360px;} }

/* ---------- exhibit wall ---------- */
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:16px;}
.wall figure{margin:0;}
.wall img,.wall video{width:100%;aspect-ratio:1/1;object-fit:cover;border:2.5px solid var(--ink);border-radius:var(--radius);box-shadow:6px 6px 0 var(--ink);background:var(--sage);transition:transform .15s ease;}
.wall img:hover,.wall video:hover{transform:translateY(-5px) rotate(-1deg);}
.wall .wide{grid-column:span 2;}
.wall .wide img,.wall .wide video{aspect-ratio:16/9;}
.wall figcaption{font-size:10px;letter-spacing:.08em;text-transform:uppercase;opacity:.62;margin-top:7px;}
.sec-deep .wall figcaption{opacity:.75;}
@media (max-width:520px){ .wall .wide{grid-column:span 1;} .wall .wide img,.wall .wide video{aspect-ratio:1/1;} }
.inline-img{border:2.5px solid var(--ink);border-radius:var(--radius);box-shadow:6px 6px 0 var(--ink);margin:0 0 14px;}