/* ============================================
   Perché la casa — landing site
   Brutalist editorial / DIY-zine
   ============================================ */

:root{
  --purple:#AB58C3;
  --orange:#F4512F;
  --mint:#BDDCC3;
  --ink:#2C2C2C;
  --paper:#F4F1EA;     /* off-white as fallback */

  --fg:var(--ink);
  --bg:var(--paper);

  --pad: clamp(2.25rem, 8vw, 9.5rem);
  --pad-y: clamp(3rem, 8vw, 7rem);

  --type-display: clamp(3.5rem, 13vw, 13rem);
  --type-h1: clamp(2.6rem, 8vw, 7.5rem);
  --type-h2: clamp(2rem, 5.5vw, 5rem);
  --type-h3: clamp(1.4rem, 2.6vw, 2.4rem);
  --type-lead: clamp(1.25rem, 1.9vw, 2rem);
  --type-body: clamp(1.05rem, 1.18vw, 1.25rem);
  --type-meta: clamp(.78rem, .85vw, .95rem);

  --rule: 2px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{
  background:var(--ink);
  color:var(--ink);
  font-family:"protipo","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:400;
  line-height:1.25;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
html{scroll-behavior:smooth}
body{overflow-x:hidden}

img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

::selection{background:var(--orange);color:var(--ink)}

/* ============================================
   Top chrome (logo + social, fixed)
   ============================================ */
.chrome{
  position:fixed;
  inset:0 0 auto 0;
  z-index:50;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: clamp(.9rem,1.6vw,1.3rem) clamp(1.25rem, 3vw, 2.75rem);
  pointer-events:none;
  mix-blend-mode:difference;
  color:#fff;
}
.chrome > *{pointer-events:auto}
.chrome a{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-weight:700;
  letter-spacing:.02em;
  font-size:var(--type-meta);
  text-transform:uppercase;
}
.chrome .logo{
  width: clamp(44px, 4.5vw, 64px);
  height:auto;
  filter:invert(1);
}
.chrome .logo:hover{transform:rotate(-3deg)}
.chrome nav{display:flex;gap:1.25rem;align-items:center}
.chrome nav a:hover{text-decoration:underline;text-underline-offset:4px}
@media (max-width:520px){
  .chrome nav a.hide-sm{display:none}
}

/* ============================================
   Section base
   ============================================ */
section{
  position:relative;
  padding: var(--pad-y) var(--pad);
  min-height:auto;
  isolation:isolate;
}
section .num{
  position:absolute;
  top: calc(var(--pad-y) * .55);
  left: var(--pad);
  font-size:var(--type-meta);
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.7;
  font-variant-numeric:tabular-nums;
}
section .num::before{
  content:"";
  display:inline-block;
  width:1.5em;height:1px;
  background:currentColor;
  vertical-align:middle;
  margin-right:.7em;
  transform:translateY(-.15em);
}

/* color modes */
.bg-orange{background:var(--orange);color:var(--ink)}
.bg-purple{background:var(--purple);color:var(--ink)}
.bg-mint  {background:var(--mint);  color:var(--ink)}
.bg-ink   {background:var(--ink);   color:var(--paper)}
.bg-paper {background:var(--paper); color:var(--ink)}

/* ============================================
   HERO
   ============================================ */
.hero{
  height:100svh;
  height:100vh;
  padding-top: clamp(5rem, 9vw, 8rem);
  padding-bottom: calc(var(--pad-y) * .9);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
  background:var(--purple);
  color:var(--ink);
}
.hero .bg{
  position:absolute;
  inset:0;
  z-index:-1;
}
.hero .bg video,
.hero .bg .video-fallback{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero .bg::after{
  /* color wash so type stays bold */
  content:"";
  position:absolute;
  inset:0;
  background: var(--purple);
  mix-blend-mode:multiply;
  opacity:.85;
}
.hero[data-bg="video-on"] .bg::after{opacity:.55}
.hero[data-bg="solid"] .bg video,
.hero[data-bg="solid"] .bg .video-fallback{display:none}
.hero[data-bg="solid"] .bg::after{opacity:1}

.hero .top-strip{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  text-align:center;
  gap:1rem;
  font-size:var(--type-meta);
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.hero .top-strip span{
  color:#fff;
}
.hero .top-strip .right{text-align:right;max-width:22ch}

.hero .lockup{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: clamp(1rem,2vw,2rem);
  margin-top:auto;
  margin-bottom:auto;
}
@keyframes shadow-cycle {
  0%   { filter: drop-shadow(0 2px 20px #ffffff) drop-shadow(0 0 8px #ffffff); }
  50%  { filter: drop-shadow(0 2px 20px #AB58C3) drop-shadow(0 0 8px #AB58C3); }
  100% { filter: drop-shadow(0 2px 20px #ffffff) drop-shadow(0 0 8px #ffffff); }
}
.hero .lockup .title-svg{
  height: clamp(12rem, 55vh, 30rem);
  width: auto;
  max-width: min(92vw, 1300px);
  transform: translateX(-2%);
  animation: shadow-cycle 5s linear infinite;
}

.hero .lockup .title-svg path{fill:currentColor}
.hero .lockup .tagline{
  font-size: var(--type-lead);
  font-style:italic;
  max-width:38ch;
  line-height:1.15;
  font-weight:500;
  text-align:center;
}
.hero .lockup .tagline em{font-style:normal;font-weight:900}

.hero .scroll-cue{
  position:absolute;
  left:50%;
  bottom: 1.2rem;
  transform:translateX(-50%);
  font-size:var(--type-meta);
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.35rem;
  animation: nudge 2.4s ease-in-out infinite;
}
@keyframes nudge{
  0%,100%{transform:translate(-50%,0)}
  50%{transform:translate(-50%,6px)}
}

/* ============================================
   MARQUEE (between sections)
   ============================================ */
.marquee{
  background:var(--ink);
  color:var(--paper);
  padding: .85rem 0;
  overflow:hidden;
  white-space:nowrap;
  border-top: var(--rule) solid var(--ink);
  border-bottom: var(--rule) solid var(--ink);
}
.marquee.alt{background:var(--orange);color:var(--ink)}
.marquee .track{
  display:inline-flex;
  gap: 3rem;
  animation: scroll-x 30s linear infinite;
  font-weight:900;
  text-transform:uppercase;
  font-size: 12px;
  letter-spacing:.01em;
}
.marquee .track span{display:inline-block}
.marquee .track .dot{
  width:.5em;height:.5em;border-radius:50%;
  background:currentColor;
  align-self:center;
  flex:0 0 auto;
}
@keyframes scroll-x{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

/* ============================================
   INTRO (Sezione 1)
   ============================================ */
.intro{
  background: var(--mint);
  color:var(--ink);
}
.intro .grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  margin-top: clamp(2rem, 5vw, 4rem);
}
@media (min-width: 880px){
  .intro .grid{
    grid-template-columns: 1.3fr .9fr;
    align-items:start;
  }
}
.intro .lede{
  font-size: var(--type-h3);
  font-weight:500;
  line-height:1.15;
  max-width: 20ch;
}
.intro .lede strong{font-weight:900}
.intro .body{
  font-size: var(--type-lead);
  line-height:1.4;
  max-width: 40ch;
}
.intro .body p + p{margin-top:1em}
.intro .body em{font-weight:900;font-style:italic}

.intro .lead-block{
  display:grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.intro .house-stage{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  min-height: clamp(160px, 40vw, 360px);
  margin-top: clamp(1rem,3vw,2rem);
}
.intro .house-stage svg{
  width: clamp(220px, 35vw, 520px);
  height:auto;
  cursor:pointer;
}
.intro .house-stage svg path{fill:var(--ink)}
.intro .house-stage .label{
  position:absolute;
  bottom:-.5rem;
  left:50%;
  transform:translateX(-50%);
  font-size:var(--type-meta);
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  white-space:nowrap;
  opacity:.7;
}

/* the falling-bits animation: applied to specific child paths by JS */
.intro .house-stage .falling{
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 1.4s cubic-bezier(.5,.1,.6,1), opacity .8s ease;
}
.intro .house-stage.fall .fall-1{transform: translate(-6px, 80vh) rotate(-30deg)}
.intro .house-stage.fall .fall-2{transform: translate(10px, 80vh) rotate(25deg)}
.intro .house-stage.fall .fall-3{transform: translate(-2px, 80vh) rotate(-12deg)}
.intro .house-stage.fall .fall-4{transform: translate(4px, 80vh) rotate(40deg)}

/* ============================================
   VIDEO (Crowdfunding — Sezione 2)
   ============================================ */
.video-section{
  background:var(--ink);
  color:var(--paper);
}
.video-section .crowdfunding-title{
  font-size:var(--type-h2);
  font-weight:900;
  line-height:.95;
  letter-spacing:-.01em;
  text-align:center;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.video-section .crowdfunding-title em{font-style:italic;color:var(--orange)}
.video-section .grid{
  display:grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns:1fr;
}
@media (min-width: 880px){
  .video-section .grid{
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items:start;
  }
}
.video-section h2{
  font-size:var(--type-h2);
  font-weight:900;
  line-height:.95;
  letter-spacing:-.01em;
}
.video-section h2 em{font-style:italic;color:var(--orange)}
.video-section .pitch{
  font-size:var(--type-lead);
  line-height:1.35;
  max-width:42ch;
}
.video-section .pitch p + p{margin-top:1em}
.video-section .cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
  width:100%;
  background:var(--orange);
  color:var(--ink);
  padding: 1.1em 1.4em;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  border: var(--rule) solid var(--ink);
  box-shadow: 6px 6px 0 var(--paper);
  transition: transform .18s ease, box-shadow .18s ease;
  margin-top:1.5rem;
}
.video-section .cta:hover{
  transform:translate(-2px,-2px);
  box-shadow: 10px 10px 0 var(--paper);
}
.video-section .cta .arrow{transform:translateY(1px);font-weight:900;font-size:1.3em}

.video-frame{
  position:relative;
  aspect-ratio: 16/9;
  background:#1a1a1a;
  border: var(--rule) solid var(--paper);
  overflow:hidden;
}
.video-frame .placeholder{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:1rem;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,.04) 0 14px,
      rgba(255,255,255,.0) 14px 28px
    );
  color: var(--paper);
}
.video-frame .placeholder .play-btn{
  width: clamp(64px, 8vw, 120px);
  aspect-ratio:1;
  border: var(--rule) solid var(--paper);
  border-radius:50%;
  display:grid;
  place-items:center;
  background: rgba(0,0,0,.2);
}
.video-frame .placeholder .play-btn::after{
  content:"";
  width:0;height:0;
  border:.55em solid transparent;
  border-left-color: var(--paper);
  border-right:0;
  margin-left:.3em;
}
.video-frame .placeholder .meta{
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: var(--type-meta);
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.7;
}

/* ============================================
   PRESS (Sezione 3)
   ============================================ */
.press{
  background:var(--purple);
  color:var(--ink);
}
.press .grid{
  display:grid;
  gap: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 5vw, 4rem);
  margin-top: clamp(2rem, 4vw, 3.2rem);
}
@media (min-width: 880px){
  .press .grid{
    grid-template-columns: 1fr 1.6fr;
    grid-template-rows: auto auto;
    align-items:start;
  }
  .press .press-intro    { grid-column: 1; grid-row: 1 }
  .press .press-list     { grid-column: 2; grid-row: 1 / span 2 }
  .press .press-illu-wrap{ grid-column: 1; grid-row: 2; align-self:end; justify-self:start }
}
.press h2{
  font-size:var(--type-h2);
  font-weight:900;
  line-height:.95;
}
.press .blurb{
  font-size: var(--type-lead);
  line-height:1.35;
  max-width:40ch;
  margin-top:1rem;
}
.press-list{
  display:grid;
  gap:0;
}
.press-item{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:baseline;
  gap:1rem;
  padding: 1.1rem 0;
  border-bottom: var(--rule) solid var(--ink);
  transition: padding-left .25s ease, background .25s ease;
}
.press-item:first-child{border-top: var(--rule) solid var(--ink)}
.press-item:hover{
  padding-left:.6rem;
  background: rgba(0,0,0,.06);
}
.press-item .name{
  font-weight:900;
  font-size: clamp(1.3rem, 2.8vw, 2.1rem);
  line-height:1.1;
  display:flex;
  align-items:baseline;
  gap:.6rem;
  flex-wrap:wrap;
}
.press-item .name .tag{
  font-size: var(--type-meta);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:700;
  background: var(--ink);
  color: var(--purple);
  padding:.2em .55em;
  align-self:center;
}
.press-item .date{
  font-size: var(--type-meta);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-variant-numeric:tabular-nums;
  opacity:.8;
  display:flex;
  align-items:baseline;
  gap:.6rem;
}
.press-item .date::after{
  content:"\2197\FE0E";
  display:inline-block;
  font-weight:900;
  font-family:"protipo","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.press-illu-wrap{
  display:flex;
  justify-content:flex-start;
  margin-top: clamp(1rem, 2vw, 1.5rem);
}
.press-illu{
  width: clamp(140px, 22vw, 240px);
  height:auto;
  transform: rotate(-6deg);
  display:block;
}
.press-illu-wrap{}

/* ============================================
   GALLERY (Sezione 4)
   ============================================ */
.gallery{
  background:var(--paper);
  color:var(--ink);
}
.gallery .head{
  display:flex;
  flex-direction:column;
  gap:.6rem;
  margin-bottom: clamp(2rem,4vw,3rem);
}
.gallery h2{
  font-size:var(--type-h2);
  font-weight:900;
  line-height:.95;
}
.gallery .sub{
  font-size: var(--type-body);
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:700;
}

/* — Carousel layout — */
.gallery .reel-wrap{
  position:relative;
  margin: 0 calc(var(--pad) * -1);
  padding: 0 var(--pad);
}
.gallery .reel{
  display:flex;
  gap: clamp(.8rem, 2vw, 1.6rem);
  overflow-x:auto;
  scroll-snap-type: x mandatory;
  scrollbar-width:none;
  padding-bottom:.5rem;
}
.gallery .reel::-webkit-scrollbar{display:none}
.gallery .reel .card{
  scroll-snap-align: center;
  flex: 0 0 min(80vw, 360px);
  aspect-ratio: 4/5;
  background: var(--ink);
  position:relative;
  overflow:hidden;
  border: var(--rule) solid var(--ink);
}
.gallery .reel .card img,
.gallery .mosaic .card img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.gallery .reel .card:hover img,
.gallery .mosaic .card:hover img{ transform: scale(1.04); }
.gallery .reel .card figcaption,
.gallery .mosaic .card figcaption{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; flex-direction:column; gap:.15rem;
  padding: .9rem 1rem;
  color: var(--paper);
  background: linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,.3) 60%, rgba(0,0,0,0) 100%);
  pointer-events:none;
}
.gallery .reel .card figcaption .tag,
.gallery .mosaic .card figcaption .tag{
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; opacity:.8;
}
.gallery .reel .card figcaption .cap,
.gallery .mosaic .card figcaption .cap{
  font-weight:900; font-size: clamp(1rem, 1.6vw, 1.3rem); line-height:1.1;
}
.gallery .reel .card .placeholder{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:1rem;
  background:
    repeating-linear-gradient(45deg,
      rgba(244,241,234,.07) 0 14px,
      rgba(244,241,234,0) 14px 28px),
    var(--ink);
  color: var(--paper);
}
.gallery .reel .card .placeholder .tag{
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.8;
}
.gallery .reel .card .placeholder .cap{
  font-weight:900;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  margin-top:.25rem;
  line-height:1.1;
}
.gallery .reel-controls{
  display:flex;
  gap:.6rem;
  justify-content:flex-end;
  margin-top:1rem;
}
.gallery .reel-controls button{
  width: 3rem;height: 3rem;
  border: var(--rule) solid var(--ink);
  background: var(--paper);
  font-weight:900;
  font-size:1.2rem;
  transition: background .2s ease, color .2s ease;
}
.gallery .reel-controls button:hover{background:var(--ink);color:var(--paper)}

/* — Mosaic layout (alt) — */
.gallery[data-layout="mosaic"] .reel-wrap{display:none}
.gallery[data-layout="mosaic"] .mosaic{display:grid}
.gallery[data-layout="reel"] .mosaic{display:none}
.gallery .mosaic{
  display:none;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(140px, 1fr);
  gap: clamp(.6rem, 1.2vw, 1rem);
}
.gallery .mosaic .card{
  background:var(--ink);
  border: var(--rule) solid var(--ink);
  position:relative;
  overflow:hidden;
  min-height:140px;
}
.gallery .mosaic .card .placeholder{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:.75rem 1rem;
  color:var(--paper);
  background:
    repeating-linear-gradient(45deg,
      rgba(244,241,234,.07) 0 14px,
      rgba(244,241,234,0) 14px 28px),
    var(--ink);
}
.gallery .mosaic .card .placeholder .tag{
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;opacity:.75;
}
.gallery .mosaic .card .placeholder .cap{
  font-weight:900;font-size:1rem;margin-top:.25rem;line-height:1.1;
}
/* mosaic spans */
.gallery .mosaic .m1{grid-column: span 3; grid-row: span 2}
.gallery .mosaic .m2{grid-column: span 3; grid-row: span 1}
.gallery .mosaic .m3{grid-column: span 2; grid-row: span 1}
.gallery .mosaic .m4{grid-column: span 4; grid-row: span 1}
.gallery .mosaic .m5{grid-column: span 2; grid-row: span 1}
.gallery .mosaic .m6{grid-column: span 4; grid-row: span 1}
.gallery .mosaic .m7{grid-column: span 6; grid-row: span 1}
@media (max-width: 880px){
  .gallery .mosaic{grid-template-columns: repeat(2, 1fr); grid-auto-rows:minmax(180px, 1fr)}
  .gallery .mosaic .m1,
  .gallery .mosaic .m2,
  .gallery .mosaic .m3,
  .gallery .mosaic .m4,
  .gallery .mosaic .m5,
  .gallery .mosaic .m6,
  .gallery .mosaic .m7{grid-column: span 2; grid-row: span 1}
}

/* ============================================
   CHI SIAMO (Sezione 5)
   ============================================ */
.about{
  background: var(--mint);
  color:var(--ink);
}
.about .grid{
  display:grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  grid-template-columns:1fr;
}
/* Mobile order: text first, then small portrait */
.about .grid .portrait{order:2}
.about .grid > div:not(.portrait){order:1}
@media (min-width: 880px){
  .about .grid{grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); align-items:start}
  .about .grid .portrait{order:0}
  .about .grid > div:not(.portrait){order:0}
}
.about h2{
  font-size:var(--type-h2);
  font-weight:900;
  line-height:.95;
}
.about .name{
  font-size:var(--type-h3);
  font-weight:900;
  margin-top:1rem;
}
.about .role{
  font-size:var(--type-meta);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:700;
  opacity:.7;
  margin-top:.4em;
}
.about .bio{
  font-size: var(--type-body);
  line-height:1.55;
  max-width: 56ch;
  font-weight:400;
}
.about .bio em{font-weight:900;font-style:italic}
.about .portrait{
  display:flex;
  justify-content:center;
}
.about .portrait svg,
.about .portrait img{
  width: clamp(110px, 18vw, 360px);
  height:auto;
  display:block;
}
@media (min-width: 880px){
  .about .portrait svg,
  .about .portrait img{
    width: clamp(220px, 28vw, 360px);
  }
}
.about .portrait svg path{fill:var(--ink)}

/* ============================================
   NEWSLETTER (Sezione 6)
   ============================================ */
.subscribe{
  background:var(--orange);
  color:var(--ink);
}
.subscribe .grid{
  display:grid;
  grid-template-columns:1fr;
  gap: clamp(2rem, 4vw, 3rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 880px){
  .subscribe .grid{grid-template-columns: 1.2fr 1fr; align-items:start}
}
.subscribe h2{
  font-size:var(--type-h2);
  font-weight:900;
  line-height:.95;
}
.subscribe .blurb{
  font-size:var(--type-lead);
  line-height:1.35;
  max-width: 36ch;
  margin-top:1rem;
}
.subscribe .sub-frame{
  border:var(--rule) solid var(--ink);
  background:#fff;
  overflow:hidden;
  min-height: 320px;
}
.subscribe iframe{width:100%;height:320px;border:0;display:block}

/* ============================================
   FOOTER
   ============================================ */
footer{
  background:var(--ink);
  color: var(--paper);
  padding: clamp(2rem, 5vw, 4rem) var(--pad) clamp(1.5rem, 3vw, 2rem);
}
footer .row{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: clamp(1.5rem, 4vw, 3rem);
}
@media (min-width: 720px){
  footer .row{flex-direction:row; justify-content:space-between; align-items:flex-end}
}
footer .wordmark{
  display:block;
  max-width: min(560px, 70vw);
}
footer .wordmark img{
  width:100%;
  height:auto;
  display:block;
  filter: invert(1);
}
footer .socials{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.75rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size: var(--type-body);
}
@media (min-width: 720px){
  footer .socials{align-items:flex-start}
}
footer .socials a{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding-bottom:.18em;
  border-bottom: var(--rule) solid currentColor;
  width:fit-content;
}
footer .socials a:hover{color:var(--orange)}
footer .legal{
  margin-top: clamp(2rem, 5vw, 4rem);
  text-align:center;
  font-size: var(--type-meta);
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:700;
  opacity:.6;
}

/* ============================================
   Reveal on enter
   ============================================ */
.reveal{
  opacity:0;
  transform: translateY(24px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}
.reveal.in{opacity:1; transform:none}

/* tilt sprinkles for zine feel */
.tilt-l{transform: rotate(-2deg)}
.tilt-r{transform: rotate(2deg)}

/* Tweaks toggle hidden when off — handled by JS */

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}