/* ─────────────────────────────────────────────────────────
   PORTFOLIO PUNK / COLLAGE — Simone Fusco
   Tutto è ruvido, ruotato, sporco. On purpose.
   ───────────────────────────────────────────────────────── */

:root{
  --ink:#0A0A0A;
  --cream:#F2EFE6;
  --paper:#EAE5D6;
  --yellow:#FFE600;
  --red:#E63946;
  --blue:#1D3FE6;
  --magenta:#FF2E93;
  --grain-op:.18;
  --glitch:1;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--cream);color:var(--ink);font-family:'Space Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
body{min-height:100vh;cursor:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}

/* ── Lenis required ── */
html.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* ── Grain overlay ── */
body::before{
  content:"";position:fixed;inset:-50%;pointer-events:none;z-index:9998;opacity:var(--grain-op);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode:multiply;
  animation:grain 1.2s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}
  20%{transform:translate(-8%,4%)}
  40%{transform:translate(6%,-2%)}
  60%{transform:translate(-2%,-6%)}
  80%{transform:translate(4%,8%)}
  100%{transform:translate(0,0)}
}

/* ── Halftone paper ── */
.paper{
  background:
    radial-gradient(circle at 20% 30%,rgba(10,10,10,.04) 0 1px,transparent 2px) 0 0/14px 14px,
    var(--cream);
}

/* ── Tipografia ── */
.brutal{font-family:'Anton','Archivo Black',Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:-.01em;line-height:.85}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;letter-spacing:-.01em}
.serif{font-family:'Boldonse','Playfair Display',serif}

/* ── Sections base ── */
section{position:relative;padding:120px 6vw;overflow:hidden}
.section-tag{
  position:absolute;top:18px;left:6vw;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;opacity:.55;
  display:flex;align-items:center;gap:10px;
}
.section-tag::before{content:"";width:28px;height:1px;background:currentColor}

/* ── Tape strip ── */
.tape{
  position:absolute;width:90px;height:24px;
  background:rgba(255,230,0,.78);
  box-shadow:0 1px 0 rgba(0,0,0,.04) inset,0 4px 10px rgba(0,0,0,.08);
  mix-blend-mode:multiply;
  pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 2px,transparent 2px 6px);
}

/* ── Glitch text RGB shift (DISABLED — kept for backwards compat, no data-text in markup) ── */
.glitch{position:relative;display:inline-block}
.glitch[data-text]::before,
.glitch[data-text]::after{
  content:attr(data-text);position:absolute;inset:0;
  pointer-events:none;mix-blend-mode:multiply;
}
.glitch[data-text]::before{color:var(--red);transform:translate(calc(-2px * var(--glitch)),0);opacity:.85}
.glitch[data-text]::after{color:var(--blue);transform:translate(calc(2px * var(--glitch)),calc(1px * var(--glitch)));opacity:.85}

/* ── Hero (scrollable stage 200vh) ── */
#hero{
  position:relative;
  height:220vh;
  padding:0;
  overflow:visible;
}
.hero-stage{
  position:sticky;top:0;height:100vh;width:100%;
  display:flex;flex-direction:column;justify-content:center;
  padding:120px 6vw 60px;gap:24px;
  overflow:hidden;
  perspective:1500px;
  background:var(--ink);color:var(--cream);
}
.hero-video{
  position:absolute;inset:0;z-index:0;
  overflow:hidden;
  will-change:transform,opacity;
}
.hero-video video,.hero-video .placeholder{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
/* Placeholder: dark abstract animated film */
.hero-video .placeholder{
  background:
    radial-gradient(ellipse at 30% 40%, rgba(255,230,0,.12) 0%, transparent 45%),
    radial-gradient(ellipse at 80% 70%, rgba(230,57,70,.18) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(29,63,230,.18) 0%, transparent 55%),
    linear-gradient(180deg,#0a0a0a 0%,#141414 100%);
  filter:contrast(1.1) saturate(1.2);
  animation:videopulse 8s ease-in-out infinite;
}
.hero-video .scanlines{
  position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 2px,transparent 2px 4px);
  mix-blend-mode:multiply;
}
.hero-video::after{
  content:none;
}
@keyframes videopulse{
  0%,100%{transform:scale(1) translate(0,0);filter:contrast(1.1) saturate(1.2) hue-rotate(0)}
  50%{transform:scale(1.04) translate(-1%,1%);filter:contrast(1.2) saturate(1.4) hue-rotate(8deg)}
}
.hero-video .vignette{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,.7) 100%);
  pointer-events:none;
}

/* ── New hero layout (no glitched name) ── */
.hero-statement{
  position:relative;z-index:2;width:100%;color:var(--cream);
  display:flex;flex-direction:column;gap:18px;
}
.hero-statement .lead{
  font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.2em;
  text-transform:uppercase;opacity:.7;
  display:flex;align-items:center;gap:10px;
}
.hero-statement .lead::before{content:"";width:32px;height:1px;background:currentColor}
.hero-headline{
  font-family:'Anton',sans-serif;text-transform:uppercase;
  font-size:clamp(48px,8vw,160px);line-height:1.5;letter-spacing:-.015em;
  color:var(--cream);
  max-width:18ch;
}
.hero-headline .ln{display:block;will-change:transform,opacity}
.hero-headline .accent-red{color:var(--red)}
.hero-headline .accent-yellow{color:var(--yellow)}
.hero-headline .marker{
  display:inline-block;background:var(--yellow);color:var(--ink);
  padding:0 .12em 0.06em;line-height:.85;
  transform:rotate(-1.5deg);
}
.hero-headline .crossed-out{
  position:relative;display:inline-block;
  color:rgba(242,239,230,.55);
}
.hero-headline .crossed-out .scribble{
  position:absolute;left:-6%;right:-6%;top:42%;
  width:112%;height:30%;
  pointer-events:none;
  overflow:visible;
}
.hero-headline .crossed-out .scribble path{
  transition:stroke-dashoffset 1.4s cubic-bezier(.6,.0,.2,1) .3s;
}
.hero-headline .crossed-out.drawn .scribble path{stroke-dashoffset:0 !important}
.hero-signoff{
  display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px;
  margin-top:14px;
}
.hero-signoff .who{
  font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.5;
}
.hero-signoff .who b{font-family:'Anton';font-size:22px;letter-spacing:.01em;display:block;color:var(--cream)}
.hero-signoff .who span{opacity:.65}

/* ── Hero photo slots (drag-and-drop, swap on scroll, yellow punk frame) ── */
.hero-photos-wrap{
  position:absolute;
  bottom:0;                 /* anchored to the bottom → reaches the end of the hero */
  right:4vw;
  /* frame matches the photos' real 3:4 ratio, so object-fit:cover shows the
     WHOLE portrait — no crop, no letterbox bands — at any screen size */
  aspect-ratio:3 / 4;
  height:min(94vh, 118vw);  /* big; auto-shrinks on short/narrow screens to stay whole */
  width:auto;
  max-width:62vw;
  z-index:3;
  border:7px solid var(--yellow);
  background:var(--ink);
  box-shadow: 14px 14px 0 var(--ink), -4px -4px 0 var(--red);
  transform: rotate(-1.4deg);
  overflow:hidden;
}
.hero-photos-wrap::before{
  /* tape strip at top-left, on top of the frame */
  content:"";
  position:absolute;top:-12px;left:24px;z-index:8;
  width:80px;height:22px;
  background:rgba(242,239,230,.82);
  background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 2px,transparent 2px 6px);
  transform:rotate(-6deg);
  pointer-events:none;
  box-shadow:0 2px 4px rgba(0,0,0,.15);
}
.hero-photos-wrap::after{
  content:none;
}
.hero-photos-wrap .hero-photo{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center top;
  display:block;
  background:var(--cream);
  will-change:opacity,transform;
}
.hero-photos-wrap .hero-photo[data-photo-idx="1"]{opacity:0}
@media (min-width: 1101px){
  .hero-statement{ padding-right: calc(min(48vw, 640px) + 8vw); }
}
/* shorter desktops: shrink the frame but keep the 3:4 ratio (whole photo) */
@media(min-width:1101px) and (max-height:820px){
  .hero-photos-wrap{height:min(86vh, 680px)}
}
/* ≤1100: photo becomes a clean band anchored bottom-CENTER, with the text
   pushed to the top so the cream headline never sits over the bright photo */
@media(max-width:1100px){
  .hero-stage{ justify-content:flex-start; padding:96px 6vw 0; }
  .hero-statement{ padding-right:0; position:relative; z-index:2; }
  .hero-headline{ font-size:clamp(34px,7vw,60px); line-height:1.12; max-width:none; }
  .hero-signoff{ margin-top:10px; }
  .hero-photos-wrap{
    right:50%; bottom:12px;
    transform:translateX(50%) rotate(-1.4deg);
    height:min(40vh, 360px);
    max-width:80vw;
    z-index:1;
    opacity:1;
  }
  /* scene-2 quote must fit one screen width when it reveals on scroll */
  .hero-scene2 .quote{ font-size:clamp(28px,8vw,42px); }
}
/* phones: tighten further so everything fits one screen with no overlap */
@media(max-width:620px){
  .hero-stage{ padding:84px 6vw 0; gap:16px; }
  .hero-headline{ font-size:clamp(30px,8.5vw,44px); }
  .hero-signoff .who{ font-size:11px; }
  .hero-signoff .who b{ font-size:17px; }
  .hero-photos-wrap{ height:min(34vh, 280px); }
  .hero-photos-wrap::after{ font-size:9px; }
}
.hero-rotor{
  font-size:clamp(22px,3.4vw,52px);
  font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:-.01em;
  display:inline-flex;align-items:baseline;gap:18px;flex-wrap:wrap;
  color:var(--cream);
}
.hero-rotor .stamp{
  display:inline-block;border:2px solid var(--cream);padding:2px 12px;transform:rotate(-3deg);
  background:var(--yellow);color:var(--ink);
}
.hero-meta{
  display:grid;grid-template-columns:1fr auto;gap:20px;align-items:end;
  font-family:'JetBrains Mono',monospace;font-size:13px;
  color:var(--cream);
}
.hero-meta .pill{
  display:inline-block;padding:6px 12px;border:1.5px solid var(--cream);border-radius:999px;
  margin-right:6px;background:transparent;color:var(--cream);
}
.hero-meta .pill.solid{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.hero-meta .pill.blue{background:var(--blue);color:var(--cream);border-color:var(--blue)}
.hero-marquee{
  position:absolute;left:0;right:0;bottom:48px;
  font-family:'Anton',sans-serif;font-size:42px;text-transform:uppercase;
  white-space:nowrap;color:var(--cream);
  display:flex;gap:40px;
  pointer-events:none;z-index:2;
}
.hero-marquee span{display:inline-block}
.hero-marquee .dot{width:14px;height:14px;background:var(--red);border-radius:50%;align-self:center}

/* Hero overlay scenes (revealed by scroll) */
.hero-scene2{
  position:absolute;inset:0;z-index:3;
  display:flex;align-items:center;justify-content:center;
  padding:6vw;
  opacity:0;will-change:opacity,transform;
  pointer-events:none;
}
.hero-scene2 .quote{
  font-family:'Anton',sans-serif;text-transform:uppercase;
  font-size:clamp(40px,7vw,120px);line-height:.9;
  color:var(--cream);max-width:18ch;text-align:center;
}
.hero-scene2 .quote em{font-style:normal;color:var(--yellow);display:inline-block;transform:rotate(-2deg)}
.hero-scene2 .quote .strike{text-decoration:line-through;opacity:.4}

.hero-scroll-hint{
  position:absolute;left:6vw;bottom:18px;z-index:4;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cream);opacity:.6;
  display:flex;align-items:center;gap:8px;
}
.hero-scroll-hint .bar{width:40px;height:1px;background:currentColor}

/* ── BRIEF vs READ ── */
#brief{background:var(--ink);color:var(--cream);min-height:100vh}
#brief .section-tag{color:var(--cream)}
#brief .brief-title{font-size:clamp(40px,7vw,110px);max-width:14ch;margin-bottom:60px}
#brief .toggle{
  display:inline-flex;gap:0;border:2px solid var(--cream);border-radius:0;margin-bottom:40px;
  font-family:'JetBrains Mono',monospace;text-transform:uppercase;font-size:13px;
}
#brief .toggle button{padding:14px 22px;border-right:2px solid var(--cream);color:var(--cream)}
#brief .toggle button:last-child{border-right:0}
#brief .toggle button.on{background:var(--yellow);color:var(--ink)}
#brief .doc{
  background:var(--cream);color:var(--ink);padding:50px 5vw;border-radius:2px;position:relative;
  font-family:'JetBrains Mono',monospace;font-size:15px;line-height:1.7;
  transform:rotate(-.6deg);
  box-shadow:0 30px 80px rgba(0,0,0,.4);
  max-width:880px;
}
#brief .doc h3{font-family:'Anton';font-size:32px;text-transform:uppercase;margin-bottom:18px}
#brief .doc p{margin-bottom:14px}
#brief .doc .anno{
  position:relative;display:inline-block;
}
#brief .doc.read .anno{
  color:var(--red);text-decoration:underline wavy;
}
#brief .doc.read .anno::after{
  content:attr(data-note);
  position:absolute;left:calc(100% + 10px);top:-10px;
  font-family:'Anton',sans-serif;text-transform:uppercase;font-size:14px;
  color:var(--blue);background:var(--yellow);padding:2px 8px;white-space:nowrap;
  transform:rotate(-2deg);
}
#brief .doc.read .strike{text-decoration:line-through;opacity:.45}
#brief .doc.read .scribble{
  position:relative;color:var(--red);font-family:'Anton';font-size:1.2em;text-transform:uppercase;
}
#brief .doc.read .arrow{
  display:inline-block;color:var(--blue);font-family:'Anton';transform:rotate(-3deg);margin:0 6px;
}

/* ── WORK = lavagna ── */
#work{
  padding-top:160px;
  background:#13211b;
  background-image:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.05), transparent 55%),
    radial-gradient(80% 60% at 82% 100%, rgba(255,255,255,.035), transparent 60%);
  color:var(--cream);
  border-top:12px solid #2c2218;
  border-bottom:12px solid #2c2218;
}
#work .section-tag{color:rgba(244,241,230,.82)}
#work .work-title{color:#f4f1e6;text-shadow:0 1px 0 rgba(0,0,0,.35)}
#work > p.mono{color:rgba(244,241,230,.78)}
/* taped cards sit on light paper → force dark ink so text stays readable
   (otherwise they'd inherit the board's cream color and vanish) */
#work .case-embed{color:var(--ink)}
#work .case-embed-head .case-cat{color:var(--ink)}
/* the reverse card keeps its dark panel + cream text */
#work .case-embed.reverse .case-embed-text,
#work .case-embed.reverse .case-embed-text h3,
#work .case-embed.reverse .case-link{color:var(--cream)}
/* content above the chalk drawing */
#work .work-title,#work .work-list,#work > p{position:relative;z-index:1}
/* tag stays in its absolute top placement (relative would collide w/ title) */
#work .section-tag{z-index:2}
#work .chalk-layer{position:absolute;inset:0;z-index:0;pointer-events:none}
/* cards read as taped notes on the board */
#work .case-embed{border-color:rgba(244,241,230,.5)}
#work .case-embed:hover{box-shadow:14px 14px 0 rgba(244,241,230,.16)}
#work .case-embed-head{border-bottom-color:rgba(244,241,230,.35)}
#work .case-canva{border-right-color:rgba(244,241,230,.35)}
#work .case-embed.reverse .case-canva{border-left-color:rgba(244,241,230,.35)}
#work .work-title{font-size:clamp(60px,11vw,200px);line-height:.85;margin-bottom:40px}
#work .work-intro{max-width:62ch;font-size:14px;line-height:1.7;opacity:.7;margin-bottom:28px;position:relative;z-index:1}
#work .case-deck{position:relative;z-index:1}

/* ── Film-strip rail of tabs ── */
.case-rail{
  display:grid;grid-template-columns:repeat(8, minmax(150px,1fr));gap:10px;
  margin-bottom:24px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding:6px 2px 14px;scrollbar-width:thin;
}
.case-rail::-webkit-scrollbar{height:6px}
.case-rail::-webkit-scrollbar-thumb{background:rgba(244,241,230,.25);border-radius:3px}
.case-tab{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;
  gap:4px;padding:12px 14px;
  background:rgba(244,241,230,.06);
  border:2px solid rgba(244,241,230,.22);
  color:var(--cream);text-align:left;cursor:pointer;
  font-family:'JetBrains Mono',monospace;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
  min-width:0;
}
.case-tab:hover{
  background:rgba(244,241,230,.12);border-color:rgba(244,241,230,.45);
  transform:translate(-1px,-1px);
}
.case-tab .ct-num{
  font-family:'Anton';font-size:28px;line-height:.9;letter-spacing:.02em;
  color:var(--cream);opacity:.85;
}
.case-tab .ct-client{
  font-family:'Anton';font-size:15px;text-transform:uppercase;letter-spacing:.04em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.case-tab .ct-cat{
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;opacity:.6;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
/* accent color stripe at top of the tab */
.case-tab::before{
  content:"";position:absolute;left:0;right:0;top:-2px;height:4px;
  background:var(--accent,var(--cream));opacity:.85;
}
.case-tab.accent-red::before   {--accent:var(--red)}
.case-tab.accent-blue::before  {--accent:var(--blue)}
.case-tab.accent-yellow::before{--accent:var(--yellow)}

/* Active state — pulled forward like a card snapped out of the strip */
.case-tab.is-active{
  background:var(--paper);color:var(--ink);border-color:var(--ink);
  transform:translate(-2px,-4px) rotate(-.6deg);
  box-shadow:6px 6px 0 var(--accent,var(--yellow));
}
.case-tab.is-active .ct-num,
.case-tab.is-active .ct-client{color:var(--ink)}
.case-tab.is-active .ct-cat{color:var(--ink);opacity:.7}
.case-tab.is-active::before{height:6px;top:-3px}

/* ── Stage card: zero margin, takes over the deck ── */
#work .case-deck .case-embed{margin:0}
#work .case-deck .case-embed-body{min-height:520px}

/* ── Prev/Next + counter row ── */
.case-nav{
  display:flex;align-items:center;justify-content:center;gap:22px;
  margin-top:26px;
}
.cn-arrow{
  width:54px;height:54px;border-radius:50%;
  background:var(--paper);color:var(--ink);
  border:2px solid var(--ink);
  font-family:'Anton';font-size:28px;line-height:1;cursor:pointer;
  display:grid;place-items:center;
  box-shadow:4px 4px 0 var(--yellow);
  transition:transform .15s ease, box-shadow .15s ease;
}
.cn-arrow:hover{transform:translate(-2px,-2px) rotate(-3deg);box-shadow:6px 6px 0 var(--red)}
.cn-arrow:active{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ink)}
.cn-counter{
  display:flex;align-items:center;gap:10px;
  font-family:'Anton';color:var(--cream);
  letter-spacing:.06em;
}
.cn-counter b{font-size:42px;line-height:1;color:var(--yellow);font-weight:400}
.cn-counter i{width:30px;height:2px;background:rgba(244,241,230,.45);display:block}
.cn-counter span{font-size:22px;line-height:1;opacity:.7}

/* Stage entrance animation when active changes */
@keyframes case-pop{
  0%{opacity:0;transform:translateY(14px) scale(.99)}
  100%{opacity:1;transform:none}
}
@media (prefers-reduced-motion: no-preference){
  #work .case-deck .case-embed{animation:case-pop .35s ease-out both}
}

/* ── Mobile/tablet rail ── */
@media (max-width: 1100px){
  .case-rail{grid-template-columns:repeat(8, 160px);}
}
@media (max-width: 700px){
  .case-rail{grid-template-columns:repeat(8, 140px); gap:8px}
  .case-tab{padding:10px 12px}
  .case-tab .ct-num{font-size:24px}
  .case-tab .ct-client{font-size:13px}
  #work .case-deck .case-embed-body{min-height:auto}
  .cn-arrow{width:46px;height:46px;font-size:22px}
  .cn-counter b{font-size:32px}
}

/* ── Rail scroll-hint gradient (mobile) ── */
.case-rail-wrap{
  position:relative;
}
.case-rail-wrap::after{
  content:"";position:absolute;right:0;top:0;bottom:14px;
  width:64px;pointer-events:none;display:none;
  background:linear-gradient(to right, transparent, var(--ink) 90%);
}
@media (max-width:1100px){
  .case-rail-wrap::after{display:block}
}
.case-rail-hint{
  display:none;text-align:right;
  font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream);opacity:.5;margin-bottom:8px;
}
@media (max-width:1100px){
  .case-rail-hint{display:block}
}
/* ===== Work — embed Canva reali ===== */
.work-list{display:flex;flex-direction:column;gap:40px}
.case-embed{
  position:relative;background:var(--paper);border:2px solid var(--ink);
  transition:box-shadow .2s, transform .2s;
}
.case-embed:hover{box-shadow:14px 14px 0 var(--ink);transform:translate(-2px,-2px)}
.case-embed-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 22px;border-bottom:2px solid var(--ink);
  font-family:'JetBrains Mono',monospace;text-transform:uppercase;
}
.case-embed-head .case-num{
  font-family:'Anton';font-size:18px;letter-spacing:.02em;
  background:var(--ink);color:var(--cream);padding:2px 12px;
}
.case-embed-head .case-cat{font-size:11px;letter-spacing:.18em;opacity:.65;text-align:right}
.case-embed.accent-red .case-num{background:var(--red);color:var(--cream)}
.case-embed.accent-blue .case-num{background:var(--blue);color:var(--cream)}
.case-embed.accent-yellow .case-num{background:var(--yellow);color:var(--ink)}

.case-embed-body{display:grid;grid-template-columns:1.15fr .85fr;gap:0}
/* alternanza: embed a destra, testo a sinistra */
.case-embed.reverse .case-embed-body{grid-template-columns:.85fr 1.15fr}
.case-embed.reverse .case-canva{order:2;border-right:0;border-left:2px solid var(--ink)}
.case-embed.reverse .case-embed-text{order:1}
.case-embed.reverse .case-embed-text{background:var(--ink);color:var(--cream)}
.case-embed.reverse .case-link{color:var(--cream)}
.case-canva{
  position:relative;border-right:2px solid var(--ink);
  background:var(--ink);aspect-ratio:16/9;overflow:hidden;
}
.case-canva iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* scroll-trap shield: blocks the iframe from capturing the page scroll
   until the user explicitly clicks to interact with the deck */
.canva-shield{
  position:absolute;inset:0;z-index:3;cursor:pointer;border:0;
  background:rgba(10,10,10,.04);
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:16px;
  transition:background .2s, opacity .2s;
}
.canva-shield:hover{background:rgba(10,10,10,.12)}
.canva-shield .cs-pill{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cream);background:var(--ink);
  padding:8px 14px;border:1.5px solid var(--cream);
  box-shadow:3px 3px 0 rgba(0,0,0,.5);transition:transform .15s;
}
.canva-shield:hover .cs-pill{transform:translateY(-2px)}
.case-canva.is-live .canva-shield{opacity:0;pointer-events:none}
.case-canva-soon{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;text-decoration:none;
  background-image:repeating-linear-gradient(45deg,#1a1a1a 0 8px,#0a0a0a 8px 16px);
  color:var(--cream);font-family:'JetBrains Mono',monospace;
}
.case-canva-soon span{font-size:12px;letter-spacing:.22em}
.case-canva-soon small{font-size:11px;opacity:.6;letter-spacing:.1em}

.case-embed-text{padding:28px 30px;display:flex;flex-direction:column}
.case-embed-text h3{
  font-family:'Anton';text-transform:uppercase;font-size:clamp(30px,3.4vw,46px);
  line-height:.9;letter-spacing:.01em;
}
.case-embed-text .case-sub{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17px;
  margin-top:10px;line-height:1.2;
}
.case-embed-text .case-pull{
  font-family:'Anton','Archivo Black',Impact,sans-serif;text-transform:uppercase;
  font-size:clamp(22px,2.5vw,34px);line-height:.96;letter-spacing:.005em;
  margin-top:18px;text-wrap:balance;
  border-left:5px solid var(--yellow);padding-left:14px;
}
.case-embed-text .case-pull em{
  font-style:normal;color:var(--red);
  background:linear-gradient(transparent 62%, rgba(255,230,0,.55) 62%);
}
.case-embed.accent-blue .case-embed-text .case-pull{border-left-color:var(--blue)}
.case-embed.accent-red .case-embed-text .case-pull{border-left-color:var(--red)}
.case-embed.accent-red .case-embed-text .case-pull em{color:var(--blue)}
.case-embed.reverse .case-embed-text .case-pull em{
  color:var(--yellow);background:none;
}
.case-embed-text p{
  font-family:'Space Grotesk',sans-serif;font-size:14px;line-height:1.65;
  opacity:.82;margin-top:14px;text-wrap:pretty;
}
.case-embed-text .case-pending{font-family:'JetBrains Mono',monospace;font-size:12px;opacity:.5}
.case-link{
  margin-top:auto;padding-top:18px;align-self:flex-start;
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;
  border-bottom:2px solid currentColor;padding-bottom:2px;
}
.case-embed.accent-red .case-link:hover{color:var(--red)}
.case-embed.accent-blue .case-link:hover{color:var(--blue)}
.case-embed.accent-yellow .case-link:hover{color:var(--ink);opacity:.6}

@media (max-width:900px){
  .case-embed-body{grid-template-columns:1fr}
  .case-canva{border-right:0;border-bottom:2px solid var(--ink)}
  .case-embed-head .case-cat{font-size:10px}
  .case-embed.reverse .case-canva{order:0;border-left:0;border-bottom:2px solid var(--ink)}
  .case-embed.reverse .case-embed-text{order:0}
}

/* ── SOCIAL PROOF MUSHROOM ── */
#social{background:var(--yellow);color:var(--ink);min-height:100vh;padding-top:160px;padding-bottom:140px;overflow:hidden}
#social .rotor{
  font-family:'Anton';font-size:clamp(50px,9vw,150px);text-transform:uppercase;line-height:.85;
  position:relative;display:flex;flex-direction:column;
}
#social .rotor .swap{display:block;position:relative;height:1.05em;line-height:.95;overflow:hidden;margin-bottom:18px}
#social .rotor .swap b{position:absolute;left:0;top:0;font-weight:400;white-space:nowrap}
#social .mushroom-stage{
  position:relative;height:680px;margin-top:50px;margin-bottom:40px;
}

/* ── Mobile: switch profs from absolute to horizontal scroll strip ── */
@media (max-width:800px){
  /* People → horizontal swipe slider (like the work rail) */
  .mushroom-stage{
    height:auto;display:flex;gap:16px;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding:6px 0 18px;margin-top:34px;
    scrollbar-width:none;
  }
  .mushroom-stage::-webkit-scrollbar{display:none}
  .prof{
    position:relative!important;left:auto!important;top:auto!important;
    flex:0 0 82%;max-width:82%;min-width:0;
    transform:none!important;rotate:0deg!important;
    display:flex;flex-direction:column;gap:0;
    border:2.5px solid var(--ink);background:var(--cream);
    box-shadow:7px 7px 0 var(--ink);
    scroll-snap-align:center;overflow:hidden;
  }
  .prof.on{transform:none!important}
  .prof .notif{display:none}
  .prof .photo{
    width:100%;height:auto;aspect-ratio:4/3;border:0;border-bottom:2.5px solid var(--ink);
  }
  .prof .photo img{width:100%;height:100%;object-fit:cover}
  .prof .name{
    text-align:left;background:none;color:var(--ink);border:0;
    padding:14px 16px 0;font-size:20px;margin:0;line-height:1;
  }
  .prof .role{
    text-align:left;background:none;color:var(--red);
    padding:4px 16px 0;font-size:11px;letter-spacing:.04em;
  }
  .prof .bubble{
    position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;
    transform:none!important;opacity:1!important;
    width:auto!important;min-width:0!important;max-width:100%!important;margin:12px 16px 16px;
    background:var(--ink);color:var(--cream);padding:14px;border:0;
    box-shadow:none;
  }
  .prof .bubble::before,.prof .bubble::after{display:none}
  .prof .bubble .bam{
    position:static;display:inline-block;background:var(--yellow);color:var(--ink);
    font-family:'Anton';font-size:12px;padding:2px 8px;margin-bottom:8px;
  }
  .prof .bubble .quote{display:block;font-size:13.5px;line-height:1.55}
  .prof .bubble .cite{
    display:block;margin-top:10px;font-family:'JetBrains Mono',monospace;
    font-size:10px;color:var(--yellow);letter-spacing:.05em;border:0;padding:0;
  }
  #social .helper.mobile-scroll-hint{
    display:block;text-align:center;
    font-family:'JetBrains Mono',monospace;font-size:11px;
    letter-spacing:.16em;text-transform:uppercase;opacity:.55;margin-top:8px;
  }
  #social .helper:not(.mobile-scroll-hint){display:none}
  /* rotor headline was clipped mid-phrase at the desktop size — shrink to fit one line */
  #social .rotor{font-size:clamp(19px,5.4vw,26px)}
  #social .rotor .swap{margin-bottom:12px}
  /* the "referenze reali" note was colliding with the cards — give it air */
  #social .mono{margin-top:24px}
}
@media (min-width:801px){
  #social .mobile-scroll-hint{display:none}
}
.prof{
  position:absolute;width:170px;
  transform:scale(0);transform-origin:bottom center;
  rotate:var(--rot,-2deg);
  transition:transform .25s cubic-bezier(.4,2.2,.4,1);
}
.prof.on{transform:scale(1)}
.prof .photo{
  aspect-ratio:3/4;background:var(--ink);position:relative;overflow:hidden;
  border:6px solid var(--cream);box-shadow:0 12px 30px rgba(0,0,0,.25);
}
.prof .photo img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:center 28%;
  filter:contrast(1.05) saturate(.92);
}
.prof:hover .photo img{filter:contrast(1.12) saturate(1.05)}
.prof .name{
  font-family:'Anton';font-size:16px;text-transform:uppercase;text-align:center;
  background:var(--ink);color:var(--cream);padding:6px 8px;margin-top:-2px;
  border:6px solid var(--cream);border-top:0;
}
.prof .role{
  font-family:'JetBrains Mono',monospace;font-size:10px;text-align:center;
  background:var(--red);color:var(--cream);padding:3px;letter-spacing:.1em;text-transform:uppercase;
}

/* Notification badge on prof card */
.prof .notif{
  position:absolute;top:-10px;right:-10px;
  min-width:26px;height:26px;padding:0 6px;
  background:var(--red);color:var(--cream);
  border:3px solid var(--cream);border-radius:50%;
  font-family:'JetBrains Mono',monospace;font-weight:700;font-size:11px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 10px rgba(0,0,0,.25);
  z-index:3;
  animation:bumpNotif 1.6s ease-in-out infinite;
}
@keyframes bumpNotif{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.12)}
}

/* Manga speech bubble on prof hover */
.prof{cursor:default}
.prof .bubble{
  position:absolute;left:50%;bottom:calc(100% + 26px);
  width:320px;transform:translate(-50%, 10px) scale(0);
  background:var(--cream);color:var(--ink);
  font-family:'Space Grotesk',sans-serif;text-transform:none;
  font-size:12.5px;line-height:1.45;font-weight:500;letter-spacing:0;
  padding:22px 22px 26px;
  border:3px solid var(--ink);
  /* Spiky manga edges */
  clip-path: polygon(
    0% 8%, 6% 0%, 14% 6%, 22% 0%, 30% 6%, 38% 0%, 46% 6%, 54% 0%, 62% 6%, 70% 0%, 78% 6%, 86% 0%, 94% 6%, 100% 0%,
    100% 92%, 94% 100%, 86% 94%, 78% 100%, 70% 94%, 62% 100%, 54% 94%, 46% 100%, 38% 94%, 30% 100%, 22% 94%, 14% 100%, 6% 94%, 0% 100%
  );
  transform-origin:bottom center;
  transition:transform .22s cubic-bezier(.4,2.2,.4,1), opacity .15s;
  opacity:0;z-index:5;pointer-events:none;
}
.prof .bubble::before{
  content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:14px solid transparent;border-top-color:var(--ink);
}
.prof .bubble::after{
  content:"";position:absolute;top:calc(100% - 4px);left:50%;transform:translateX(-50%);
  border:11px solid transparent;border-top-color:var(--cream);
}
.prof .bubble .quote{display:block}
.prof .bubble .cite{
  display:block;margin-top:12px;padding-top:10px;
  border-top:1.5px solid rgba(10,10,10,.18);
  font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;opacity:.65;
}
.prof .bubble .bam{
  position:absolute;top:-18px;right:-18px;
  background:var(--yellow);color:var(--ink);
  font-family:'Anton';font-size:14px;padding:3px 8px;
  transform:rotate(-10deg);
  border:2px solid var(--ink);
}
.prof:hover .bubble{transform:translate(-50%,0) scale(1);opacity:1}
.prof:hover{z-index:10}
.prof:hover .notif{display:none}

/* Prof tag line — sezione esplicativa */
#social .helper{
  font-family:'JetBrains Mono',monospace;font-size:13px;
  display:inline-block;background:var(--ink);color:var(--yellow);
  padding:8px 14px;margin-top:10px;letter-spacing:.1em;text-transform:uppercase;
  transform:rotate(-1deg);
}

/* ── CHAOS MAP ── */
#chaos{background:var(--ink);color:var(--cream);min-height:100vh}
#chaos .section-tag{color:var(--cream)}
#chaos .title{font-size:clamp(50px,9vw,160px);line-height:.85;margin-bottom:20px}
#chaos .sub{font-family:'JetBrains Mono',monospace;font-size:14px;opacity:.65;margin-bottom:30px;max-width:60ch}
.chaos-canvas{
  position:relative;width:100%;height:680px;border:2px solid var(--cream);
}

/* ── Mobile: chaos map becomes vertical card list ── */
@media (max-width:800px){
  .chaos-canvas{
    height:auto!important;border:0;overflow:visible;cursor:default;
  }
  .chaos-inner{
    position:relative!important;left:auto!important;top:auto!important;
    width:100%!important;height:auto!important;transform:none!important;
    display:grid;grid-template-columns:1fr;gap:14px;
  }
  .chaos-inner svg.chaos-line{display:none}
  .postit{
    position:relative!important;left:auto!important;top:auto!important;
    width:auto!important;min-height:0!important;
    transform:none!important;
    opacity:1!important;
    font-size:13px;
  }
  .postit h4{font-size:16px}
  .chaos-hint{display:none}
}

/* (re-open .chaos-canvas for desktop rules) */
.chaos-canvas{
  background:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/40px 40px,
    var(--ink);
  overflow:hidden;cursor:grab;user-select:none;
  touch-action:none;
}
.chaos-canvas.dragging{cursor:grabbing}
.chaos-inner{position:absolute;left:0;top:0;width:2400px;height:1400px;}
.postit{
  position:absolute;width:200px;min-height:200px;padding:18px;
  font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.4;
  box-shadow:0 12px 30px rgba(0,0,0,.45);
  transform:rotate(var(--r,-2deg));
  cursor:default;
}
.postit.yellow{background:var(--yellow);color:var(--ink)}
.postit.red{background:var(--red);color:var(--cream)}
.postit.blue{background:var(--blue);color:var(--cream)}
.postit.cream{background:var(--cream);color:var(--ink)}
.postit h4{font-family:'Anton';font-size:22px;text-transform:uppercase;margin-bottom:8px;line-height:.95}
.postit .tag{font-family:'JetBrains Mono';font-size:9px;letter-spacing:.2em;text-transform:uppercase;opacity:.7;margin-top:10px;display:block}
.chaos-line{position:absolute;pointer-events:none;overflow:visible}
.chaos-hint{
  position:absolute;bottom:14px;right:14px;
  font-family:'JetBrains Mono',monospace;font-size:11px;opacity:.6;
  display:flex;gap:8px;align-items:center;
  background:rgba(255,255,255,.05);padding:6px 10px;border:1px solid rgba(255,255,255,.15);
}
.chaos-hint kbd{
  font-family:'JetBrains Mono';font-size:10px;padding:2px 6px;background:var(--cream);color:var(--ink);
}

/* ── LAB ── */
#lab{padding-top:160px}
#lab .title{font-size:clamp(60px,10vw,180px);line-height:.85;margin-bottom:8px}
#lab .sub{font-family:'JetBrains Mono';font-size:14px;opacity:.65;margin-bottom:50px}
.lab-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.lab-grid{grid-template-columns:1fr}}
.lab-card{
  border:2px solid var(--ink);padding:22px;min-height:240px;
  display:flex;flex-direction:column;justify-content:space-between;
  position:relative;overflow:hidden;
  background:var(--cream);
}
.lab-card h4{font-family:'Anton';font-size:28px;text-transform:uppercase;line-height:.95;margin-bottom:8px}
.lab-card .desc{font-family:'JetBrains Mono';font-size:12px;opacity:.7;line-height:1.5}
.lab-card .play{
  margin-top:14px;font-family:'JetBrains Mono';font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;align-self:flex-start;
  border:1.5px solid var(--ink);padding:8px 14px;
}
.lab-card .play:hover{background:var(--ink);color:var(--cream)}
.lab-card .out{
  margin-top:14px;font-family:'JetBrains Mono';font-size:13px;line-height:1.5;
  min-height:50px;color:var(--red);
}
.lab-card[data-color="yellow"]{background:var(--yellow)}
.lab-card[data-color="blue"]{background:var(--blue);color:var(--cream)}
.lab-card[data-color="blue"] .play{border-color:var(--cream)}
.lab-card[data-color="blue"] .play:hover{background:var(--cream);color:var(--blue)}
.lab-card[data-color="red"]{background:var(--red);color:var(--cream)}
.lab-card[data-color="red"] .play{border-color:var(--cream)}
.lab-card[data-color="red"] .play:hover{background:var(--cream);color:var(--red)}
/* output text must contrast with the card bg — red-on-red / red-on-blue were unreadable */
.lab-card[data-color="red"] .out{color:var(--cream)}
.lab-card[data-color="blue"] .out{color:var(--yellow)}

/* ══════════════════════════════════════════════════════════
   DIARIO / BLOG — edicola newsprint
   ══════════════════════════════════════════════════════════ */
#diario{
  background:var(--paper);color:var(--ink);
  padding-top:150px;
  border-top:3px solid var(--ink);
  overflow:hidden;
}
.diario-grain{
  position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background:
    radial-gradient(circle at 1px 1px, rgba(10,10,10,.10) 1px, transparent 1.6px) 0 0/12px 12px;
}
#diario > *:not(.section-tag){position:relative;z-index:1}
#diario .section-tag{color:var(--ink);z-index:2}

/* ── masthead ── */
.edicola-head{
  border-bottom:3px solid var(--ink);
  margin-bottom:44px;padding-bottom:10px;text-align:center;
}
.edi-rule{
  display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;opacity:.7;
  border-bottom:1px solid var(--ink);padding-bottom:10px;margin-bottom:8px;
}
.edi-name{
  font-size:clamp(52px,10.5vw,148px);line-height:.92;letter-spacing:-.02em;
  display:block;text-align:center;white-space:nowrap;
  margin:18px 0 6px;
}
.edi-tag{
  max-width:64ch;margin:0 auto;text-align:center;
  font-size:14px;line-height:1.7;opacity:.78;
}
.edi-archive{
  display:inline-block;margin:18px auto 0;text-align:center;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  border-bottom:2px solid var(--ink);padding-bottom:3px;transition:color .15s,border-color .15s;
}
.edi-archive:hover{color:var(--red);border-color:var(--red)}

/* ── grid of clippings ── */
.edicola-grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:26px;
  align-items:start;
}
.clip{
  position:relative;grid-column:span 2;
  background:var(--cream);border:2px solid var(--ink);
  padding:26px 24px 22px;
  box-shadow:6px 6px 0 rgba(10,10,10,.16);
  transform:rotate(var(--rot,0deg));
  transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s;
  display:flex;flex-direction:column;gap:14px;min-height:280px;
}
.clip::before{ /* faux tape */
  content:"";position:absolute;top:-12px;left:50%;width:84px;height:24px;
  transform:translateX(-50%) rotate(-3deg);
  background:rgba(255,230,0,.55);
  box-shadow:0 1px 0 rgba(10,10,10,.12);
  mix-blend-mode:multiply;
}
.clip:hover{ transform:rotate(0deg) translate(-3px,-4px); box-shadow:12px 14px 0 var(--ink); }
.clip-link{position:absolute;inset:0;z-index:5}
/* Cover image in card */
.clip-cover{
  width:100%;aspect-ratio:16/9;overflow:hidden;
  border-bottom:2px solid var(--ink);margin:-28px -28px 18px;
  width:calc(100% + 56px);
}
.clip-cover img{
  display:block;width:100%;height:100%;object-fit:cover;
  filter:contrast(1.05) saturate(.9);
  transition:transform .35s ease, filter .35s ease;
}
.clip:hover .clip-cover img{transform:scale(1.04);filter:contrast(1.1) saturate(1)}
/* Featured card cover — larger, underneath text */
.clip.feat .clip-cover{
  position:absolute;inset:0;width:100%;height:100%;
  aspect-ratio:auto;margin:0;border:0;z-index:0;
}
.clip.feat .clip-cover img{opacity:.25;filter:contrast(1.15) saturate(.5)}
.clip.feat .clip-cover::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, var(--ink) 10%, transparent 60%);
}
.clip.feat .clip-kick,
.clip.feat .clip-title,
.clip.feat .clip-dek,
.clip.feat .clip-meta{position:relative;z-index:2}
.clip-kick{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;border-bottom:1.5px solid var(--ink);padding-bottom:10px;
}
.clip-cat{font-weight:700}
.clip-flag{
  background:var(--ink);color:var(--cream);padding:2px 8px;letter-spacing:.12em;
}
.clip-title{
  font-family:'Anton','Archivo Black',Impact,sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:-.01em;line-height:1.0;
  font-size:clamp(22px,2.1vw,30px);text-wrap:balance;padding-bottom:2px;
}
.clip-dek{
  font-family:'Space Grotesk',sans-serif;font-size:14px;line-height:1.55;
  opacity:.82;flex:1;text-wrap:pretty;
}
.clip-meta{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:11px;letter-spacing:.06em;opacity:.66;
  border-top:1.5px dashed rgba(10,10,10,.3);padding-top:12px;
}
.clip-meta .dot{opacity:.5}
.clip-go{margin-left:auto;font-weight:700;opacity:1;color:var(--ink)}

/* accents tint the tape + flag */
.clip.accent-yellow::before{background:rgba(255,230,0,.6)}
.clip.accent-red::before{background:rgba(230,57,70,.42)}
.clip.accent-blue::before{background:rgba(29,63,230,.32)}
.clip.accent-magenta::before{background:rgba(255,46,147,.4)}
.clip.accent-red .clip-flag{background:var(--red)}
.clip.accent-blue .clip-flag{background:var(--blue);color:var(--cream)}
.clip.accent-magenta .clip-flag{background:var(--magenta)}

/* featured = wide hero clipping */
.clip.feat{
  grid-column:1 / -1;flex-direction:column;justify-content:center;
  background:var(--ink);color:var(--cream);min-height:360px;padding:40px 38px;
}
/* the two posts under the banner go half-and-half so the row fills with no void */
.edicola-grid > .clip:nth-child(2),
.edicola-grid > .clip:nth-child(3){ grid-column:span 3; }
.clip.feat .clip-title{font-size:clamp(34px,4.4vw,64px);line-height:.94}
.clip.feat .clip-dek{font-size:clamp(15px,1.3vw,18px);opacity:.85;max-width:48ch}
.clip.feat .clip-kick{border-bottom-color:rgba(242,239,230,.35)}
.clip.feat .clip-meta{border-top-color:rgba(242,239,230,.35);opacity:.8}
.clip.feat .clip-go{color:var(--yellow)}
.clip.feat .clip-flag{background:var(--yellow);color:var(--ink)}
.clip.feat::before{background:rgba(255,230,0,.85);width:120px;height:30px}
.clip.feat:hover{box-shadow:14px 16px 0 var(--yellow)}

/* CTA card */
.clip.clip-cta{
  grid-column:span 2;background:var(--yellow);border-color:var(--ink);
  justify-content:space-between;
}
.clip.clip-cta::before{background:rgba(10,10,10,.18)}
.clip.clip-cta .clip-cat{background:var(--ink);color:var(--yellow);padding:2px 8px}
.clip.clip-cta .clip-kick{border-bottom-color:rgba(10,10,10,.35)}
.clip-cta-btn{
  display:inline-block;align-self:flex-start;margin-top:8px;
  background:var(--ink);color:var(--yellow);padding:12px 20px;
  font-size:12px;letter-spacing:.14em;border:2px solid var(--ink);
  box-shadow:4px 4px 0 rgba(10,10,10,.4);transition:transform .15s,box-shadow .15s;
  position:relative;z-index:6;
}
.clip-cta-btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgba(10,10,10,.5)}

@media(max-width:1100px){
  .edicola-grid{grid-template-columns:repeat(4,1fr)}
  .clip{grid-column:span 2}
  .clip.feat{grid-column:1 / -1}
  /* reset the wide pair back to 2 cols so 4-col rows stay even */
  .edicola-grid > .clip:nth-child(2),
  .edicola-grid > .clip:nth-child(3){ grid-column:span 2; }
  /* full-width CTA closes the dangling empty cell on the last row */
  .clip.clip-cta{grid-column:1 / -1}
}
@media(max-width:680px){
  #diario{padding-top:120px}
  .edicola-grid{grid-template-columns:1fr;gap:30px}
  .clip,.clip.feat,.clip.clip-cta{grid-column:1;transform:rotate(0deg);min-height:0}
  /* override the wide-pair span so it doesn't spawn a phantom 2nd column */
  .edicola-grid > .clip:nth-child(2),
  .edicola-grid > .clip:nth-child(3){ grid-column:1; }
  .clip.feat{padding:30px 24px}
  .edi-rule{font-size:9.5px;letter-spacing:.1em;gap:6px}
}

/* ── CONTACT anti-form ── */
#contact{background:var(--red);color:var(--cream);min-height:100vh;padding-top:160px}
#contact .section-tag{color:var(--cream)}
#contact .title{font-size:clamp(60px,12vw,220px);line-height:.82;margin-bottom:40px}
#contact .form{display:flex;flex-direction:column;gap:30px;max-width:880px}
.q{position:relative}
.q .num{
  font-family:'JetBrains Mono';font-size:11px;letter-spacing:.2em;opacity:.7;
}
.q .label{
  font-family:'Anton';text-transform:uppercase;font-size:clamp(22px,3vw,40px);line-height:1;margin:6px 0 12px;
}
.q input,.q textarea,.q select{
  width:100%;background:transparent;border:0;border-bottom:2px solid var(--cream);
  color:var(--cream);font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(24px,4vw,52px);
  padding:6px 0;outline:none;resize:none;
}
.q input::placeholder,.q textarea::placeholder{color:rgba(242,239,230,.4)}
.q .opts{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.q .opt{
  font-family:'JetBrains Mono';font-size:13px;text-transform:uppercase;
  border:1.5px solid var(--cream);padding:10px 16px;cursor:default;
}
.q .opt.on{background:var(--cream);color:var(--red)}
#contact .submit{
  margin-top:30px;font-family:'Anton';font-size:42px;text-transform:uppercase;
  background:var(--yellow);color:var(--ink);padding:24px 40px;align-self:flex-start;
  transform:rotate(-1.5deg);border:3px solid var(--ink);
  box-shadow:8px 8px 0 var(--ink);
}
#contact .submit:hover{transform:rotate(0deg) translate(2px,2px);box-shadow:4px 4px 0 var(--ink)}
#contact .submit:disabled{opacity:.7;cursor:wait;transform:rotate(-1.5deg)}
#contact .form-err{
  color:var(--ink);background:var(--yellow);align-self:flex-start;
  padding:10px 16px;border:2px solid var(--ink);font-size:13px;
  letter-spacing:.04em;max-width:60ch;margin-top:-10px;
}
#contact .done{
  font-family:'Anton';font-size:clamp(50px,9vw,130px);line-height:.85;
  border-top:3px solid var(--cream);padding-top:30px;margin-top:30px;
}

/* ── Footer ── */
footer{
  background:var(--ink);color:var(--cream);padding:50px 6vw 100px;
}
footer .row1{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:30px}
footer .big{font-family:'Anton';font-size:clamp(40px,8vw,120px);line-height:.85;text-transform:uppercase}
footer .meta{font-family:'JetBrains Mono';font-size:12px;opacity:.6;line-height:1.6}

/* ── Falling logos (Brief section) ── */
.fall-logo{
  position:absolute;top:0;
  width:72px;height:72px;
  display:flex;align-items:center;justify-content:center;
  padding:12px;
  border:2.5px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink);
  z-index:4;pointer-events:none;
  will-change:transform;
}
.fall-logo img{
  width:100%;height:100%;object-fit:contain;
  display:block;
}
.fall-logo.fall-round { border-radius:50% }
.fall-logo.fall-square{ border-radius:8px }
.fall-logo.fall-tilt  { border-radius:8px;transform:rotate(8deg) }
@media(max-width:700px){
  /* falling icons drift down over the body copy on phones — hide them */
  .fall-logo{display:none}
}
#brief{position:relative}
.brief-cat{
  position:absolute;top:0;right:6vw;
  width:170px;height:170px;z-index:5;pointer-events:none;
  will-change:transform;
}
.brief-cat svg{width:100%;height:100%;display:block;filter:drop-shadow(0 10px 0 rgba(0,0,0,.45))}
.brief-cat .meow{
  position:absolute;top:-26px;right:80%;
  font-family:'Anton',sans-serif;font-size:22px;color:var(--yellow);
  background:var(--ink);padding:3px 10px;border:2px solid var(--yellow);
  transform:rotate(-6deg);
  text-transform:uppercase;letter-spacing:.05em;
  white-space:nowrap;
}
@media(max-width:700px){
  .brief-cat{display:none}
}

/* ── LAB background texture (animated) ── */
#lab{position:relative;overflow:hidden;isolation:isolate;background:var(--cream)}
.lab-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  opacity:.45;
}
/* Big outlined LAB text repeated as background — cleaner, brand-y */
.lab-bg::before{
  content:"LAB / EXPERIMENT  LAB / EXPERIMENT  LAB / EXPERIMENT  LAB / EXPERIMENT";
  position:absolute;left:-10%;top:0;right:-10%;
  font-family:'Anton',sans-serif;text-transform:uppercase;
  font-size:clamp(120px,18vw,260px);line-height:.95;
  color:transparent;
  -webkit-text-stroke:1.5px var(--ink);
  white-space:nowrap;
  display:flex;flex-direction:column;gap:30px;
  animation:labtxtA 40s linear infinite;
  opacity:.65;
}
.lab-bg::after{
  content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(0deg, transparent 0 100px, rgba(10,10,10,.06) 100px 101px),
    repeating-linear-gradient(90deg,transparent 0 100px, rgba(10,10,10,.06) 100px 101px);
  animation:labgrid 30s linear infinite;
}
@keyframes labtxtA{
  0%  {transform:translateX(0)}
  100%{transform:translateX(-25%)}
}
@keyframes labgrid{
  0%  {background-position:0 0,0 0}
  100%{background-position:200px 200px,200px 200px}
}
#lab > *:not(.lab-bg):not(.section-tag){position:relative;z-index:1}
#lab > .section-tag{z-index:3}
#lab .section-tag{
  background:var(--cream);padding:4px 12px 4px 0;
}
#lab .title,#lab .sub{position:relative;z-index:2}

/* ── CERTIFICATIONS ── */
#cert{
  background:var(--ink);color:var(--cream);
  padding-top:160px;min-height:100vh;position:relative;overflow:hidden;
}
#cert .section-tag{color:var(--cream)}
#cert .title{
  font-family:'Anton';text-transform:uppercase;
  font-size:clamp(50px,9vw,160px);line-height:.85;margin-bottom:14px;
  max-width:18ch;
}
#cert .title .q{color:var(--yellow)}
#cert .title .q2{color:var(--red)}
#cert .sub{
  font-family:'JetBrains Mono',monospace;font-size:13px;opacity:.7;margin-bottom:60px;
  max-width:60ch;
}

.cert-stage{
  position:relative;perspective:1600px;perspective-origin:center;
  height:560px;
}
.cert-bg{
  position:absolute;inset:-50px;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,transparent 0 80px,rgba(255,230,0,.06) 80px 81px),
    repeating-linear-gradient(0deg, transparent 0 80px,rgba(255,230,0,.06) 80px 81px);
  animation:certgrid 24s linear infinite;
}
.cert-bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(230,57,70,.18) 0 8%, transparent 35%),
    radial-gradient(circle at 80% 70%, rgba(29,63,230,.18) 0 8%, transparent 35%),
    radial-gradient(circle at 50% 50%, rgba(255,230,0,.10) 0 5%, transparent 25%);
  animation:certblobs 18s ease-in-out infinite alternate;
}
@keyframes certgrid{
  0%{background-position:0 0,0 0}
  100%{background-position:160px 160px,160px 160px}
}
@keyframes certblobs{
  0%  {transform:scale(1) translate(0,0)}
  50% {transform:scale(1.15) translate(-3%,2%)}
  100%{transform:scale(.95) translate(4%,-3%)}
}
.cert-box{
  position:absolute;inset:30px;
  transform-style:preserve-3d;
  border:3px solid var(--cream);
  background:rgba(10,10,10,.6);
  backdrop-filter:blur(2px);
  padding:36px;
  display:grid;grid-template-columns:repeat(6,1fr);gap:18px;
  grid-auto-rows:1fr;
  will-change:transform;
  box-shadow:
    0 30px 80px rgba(0,0,0,.55),
    inset 0 0 0 2px rgba(255,230,0,.15);
}
.cert-box::before{
  content:"// REGISTRO TITOLI 2022–2024";
  position:absolute;top:-14px;left:24px;
  background:var(--ink);padding:0 10px;
  font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.2em;color:var(--yellow);
}
.cert-box::after{
  content:"✓ CERTIFIED";
  position:absolute;bottom:-14px;right:24px;
  background:var(--ink);padding:0 10px;
  font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.2em;color:var(--red);
}
@media(max-width:800px){
  .cert-stage{height:auto!important;min-height:0!important;perspective:none!important;padding:0;}
  .cert-bg{display:none}
  .cert-box{
    position:relative!important;inset:auto!important;
    transform:none!important;transform-style:flat!important;
    backdrop-filter:none;background:rgba(10,10,10,.55);
    grid-template-columns:1fr;padding:24px;gap:14px;
    margin:0;
  }
}

.cert-card{
  background:var(--cream);color:var(--ink);
  padding:18px;position:relative;
  border:2px solid var(--cream);
  display:flex;flex-direction:column;gap:8px;
  min-height:160px;
  transform-style:preserve-3d;
  grid-column:span 2;
}
.cert-card.wide{grid-column:span 3}
@media(max-width:800px){.cert-card,.cert-card.wide{grid-column:1}}
.cert-card .ck{
  display:flex;justify-content:space-between;align-items:center;
  font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;
}
.cert-card .ck .type{background:var(--ink);color:var(--yellow);padding:3px 7px}
.cert-card .ck .year{opacity:.5}
.cert-card h4{
  font-family:'Anton';font-size:22px;text-transform:uppercase;line-height:.95;
  letter-spacing:-.01em;
}
.cert-card .iss{
  font-family:'JetBrains Mono',monospace;font-size:12px;line-height:1.45;opacity:.8;
  margin-top:auto;
}
.cert-card .stamp{
  position:absolute;top:8px;right:8px;
  width:54px;height:54px;border-radius:50%;
  border:2.5px solid var(--red);color:var(--red);
  display:flex;align-items:center;justify-content:center;
  font-family:'Anton';font-size:14px;line-height:.9;text-align:center;
  transform:rotate(-12deg);
  text-transform:uppercase;letter-spacing:.05em;
  opacity:.85;
}
.cert-card.diploma .stamp{border-color:var(--blue);color:var(--blue)}

/* ── Cursor variants per section ── */
.dot-cursor{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;transition:transform .15s;}
.dot-cursor .glyph{
  font-family:'Anton',sans-serif;text-transform:uppercase;
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:14px;pointer-events:none;
}
body.cursor-hero    .dot-cursor{width:14px;height:14px;background:var(--yellow);mix-blend-mode:difference}
/* "il cliente" → occhiali: legge tra le righe */
.dot-cursor .lens,.dot-cursor .bridge{display:none}
body.cursor-brief   .dot-cursor{width:48px;height:22px;background:transparent;border:0;mix-blend-mode:normal;transform:translate(-50%,-50%) rotate(-4deg)}
body.cursor-brief   .dot-cursor .glyph{display:none}
body.cursor-brief   .dot-cursor .lens{display:block;position:absolute;top:1px;width:18px;height:18px;border:2.5px solid var(--ink);border-radius:50%;background:rgba(255,230,0,.38)}
body.cursor-brief   .dot-cursor .lens-l{left:1px}
body.cursor-brief   .dot-cursor .lens-r{right:1px}
body.cursor-brief   .dot-cursor .bridge{display:block;position:absolute;left:50%;top:5px;width:13px;height:0;border-top:2.5px solid var(--ink);transform:translateX(-50%)}
body.cursor-brief   .dot-cursor.big{transform:translate(-50%,-50%) rotate(-4deg) scale(1.35)}
body.cursor-work    .dot-cursor{width:16px;height:48px;background:transparent;border:0;border-radius:0;mix-blend-mode:normal;transform:translate(-22%,-72%) rotate(-40deg);filter:drop-shadow(0 4px 5px rgba(0,0,0,.5))}
body.cursor-work    .dot-cursor .glyph{display:none}
/* marker barrel */
body.cursor-work    .dot-cursor::before{content:"";position:absolute;left:0;top:0;width:16px;height:34px;border-radius:5px 5px 2px 2px;background:linear-gradient(90deg,#cfae00 0,#ffe600 42%,#fff48a 55%,#ffe600 70%,#b89c00 100%);box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.4)}
/* dark collar band near the tip */
body.cursor-work    .dot-cursor::after{content:"";position:absolute;left:2px;top:31px;width:12px;height:16px;background:linear-gradient(180deg,#1a1a1a 0 5px,#ffe600 5px);clip-path:polygon(0 0,100% 0,62% 100%,38% 100%)}
body.cursor-work    .dot-cursor.big{transform:translate(-22%,-72%) rotate(-40deg) scale(1.18)}
body.cursor-social  .dot-cursor{width:34px;height:34px;background:var(--yellow);border:2px solid var(--ink);border-radius:50% 50% 50% 0;transform:translate(-50%,-50%) rotate(-12deg);mix-blend-mode:normal}
body.cursor-chaos   .dot-cursor{width:24px;height:24px;background:var(--red);border:3px solid var(--cream);border-radius:50%;mix-blend-mode:normal}
body.cursor-lab     .dot-cursor{width:36px;height:36px;background:transparent;color:var(--red);border-radius:0;mix-blend-mode:normal;font-size:32px}
body.cursor-lab     .dot-cursor .glyph{color:var(--red);font-size:30px}
body.cursor-cert    .dot-cursor{width:38px;height:38px;background:var(--yellow);border:2px solid var(--ink);border-radius:50%;mix-blend-mode:normal}
body.cursor-cert    .dot-cursor .glyph{color:var(--ink);font-size:18px}
body.cursor-diario  .dot-cursor{width:34px;height:34px;background:var(--ink);border:2px solid var(--cream);border-radius:50% 50% 50% 4px;mix-blend-mode:normal;transform:translate(-50%,-50%) rotate(-8deg)}
body.cursor-diario  .dot-cursor .glyph{color:var(--cream);font-size:17px}
body.cursor-contact .dot-cursor{width:30px;height:30px;background:var(--yellow);mix-blend-mode:normal;border-radius:50%;border:2px solid var(--ink)}
body.cursor-contact .dot-cursor .glyph{color:var(--red);font-size:20px;line-height:1}

.dot-cursor.big{transform:translate(-50%,-50%) scale(1.6)}
body.cursor-social .dot-cursor.big{transform:translate(-50%,-50%) rotate(-12deg) scale(1.5)}

/* ── One dismissible sticker (bottom-left) ── */
.sticker-solo{
  position:fixed;left:24px;bottom:24px;z-index:90;
  background:var(--yellow);color:var(--ink);padding:12px 16px;
  font-family:'Anton',sans-serif;text-transform:uppercase;font-size:16px;
  border:2px solid var(--ink);transform:rotate(-4deg);
  box-shadow:6px 6px 0 var(--ink);
  display:flex;align-items:center;gap:10px;
  max-width:240px;line-height:1.05;
}
.sticker-solo .x{
  width:22px;height:22px;border:1.5px solid var(--ink);
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;cursor:pointer;font-size:12px;
  font-family:'JetBrains Mono',monospace;
  flex-shrink:0;
}
.sticker-solo .x:hover{background:var(--ink);color:var(--yellow)}
@media(max-width:600px){.sticker-solo{display:none}}

/* ── Big jump-to-form CTA, sprinkled across sections ── */
.cta-jump{
  display:inline-block;
  margin-top:48px;
  background:var(--yellow);color:var(--ink);
  font-family:'Anton',sans-serif;text-transform:uppercase;
  font-size:clamp(20px,2.6vw,30px);letter-spacing:.01em;line-height:1.08;
  padding:18px 28px;border:3px solid var(--ink);
  box-shadow:8px 8px 0 var(--ink);
  transition:transform .15s ease, box-shadow .15s ease;
  position:relative;z-index:6;text-decoration:none;white-space:nowrap;
}
.cta-jump:hover{transform:translate(-3px,-3px) rotate(-.6deg);box-shadow:12px 12px 0 var(--ink);color:var(--ink)}
.cta-jump:active{transform:translate(2px,2px);box-shadow:4px 4px 0 var(--ink)}
.cta-jump .cta-k{
  font-family:'JetBrains Mono',monospace;font-size:.62em;
  background:var(--ink);color:var(--yellow);padding:3px 7px;margin-right:12px;
  vertical-align:2px;
}
@media(max-width:700px){
  .cta-jump{margin-top:36px;padding:15px 22px;box-shadow:6px 6px 0 var(--ink);display:block;text-align:center;white-space:normal}
  .cta-jump .cta-k{display:inline-block}
}

/* ── Nav ── */
nav.topnav{
  position:fixed;top:18px;left:6vw;right:6vw;z-index:100;
  display:flex;justify-content:flex-end;align-items:center;
  font-family:'JetBrains Mono';font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  mix-blend-mode:difference;color:var(--cream);
  pointer-events:none;
}
nav.topnav ul,nav.topnav .nav-burger{pointer-events:auto}
nav.topnav ul{display:flex;gap:20px;list-style:none}
nav.topnav a:hover{color:var(--yellow)}

/* ── Brand logo (separate, never blended → always legible) ── */
.brand-logo{
  position:fixed;top:14px;left:6vw;z-index:102;
  display:block;background:var(--ink);
  padding:9px 14px;border:2px solid var(--cream);
  box-shadow:4px 4px 0 rgba(0,0,0,.45);
  transition:transform .18s ease, box-shadow .18s ease;
  isolation:isolate;line-height:0;
}
.brand-logo img{height:38px;width:auto;display:block}
.brand-logo:hover{transform:translate(-2px,-2px) rotate(-1deg);box-shadow:6px 6px 0 var(--yellow)}

/* ── mobile menu ── */
.nav-burger{display:none}
.nav-sheet{display:none}
@media(max-width:700px){
  nav.topnav > ul{display:none}
  nav.topnav{mix-blend-mode:normal;color:var(--ink)}
  body.menu-open nav.topnav{color:var(--cream)}
  .brand-logo{padding:8px 12px}
  .brand-logo img{height:28px}
  body.menu-open .brand-logo{z-index:102}
  .nav-burger{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;padding:10px;z-index:120;position:relative;
  }
  .nav-burger span{
    display:block;height:2.5px;width:100%;background:currentColor;
    transition:transform .28s, opacity .2s;transform-origin:center;
  }
  .nav-burger.on span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .nav-burger.on span:nth-child(2){opacity:0}
  .nav-burger.on span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

  .nav-sheet{
    position:fixed;inset:0;z-index:110;background:var(--ink);color:var(--cream);
    display:none;align-items:center;justify-content:flex-start;
    padding:0 8vw;pointer-events:none;
  }
  .nav-sheet.on,
  body.menu-open .nav-sheet{display:flex;pointer-events:auto}
  .nav-sheet ul{display:flex;flex-direction:column;gap:6px;list-style:none}
  .nav-sheet li{transform:none}
  .nav-sheet a{
    display:flex;align-items:baseline;gap:16px;
    font-family:'Anton',sans-serif;font-size:clamp(34px,11vw,58px);
    text-transform:uppercase;letter-spacing:-.01em;line-height:1.05;
  }
  .nav-sheet a:hover,.nav-sheet a:active{color:var(--yellow)}
  .nav-sheet .ix{font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.1em;opacity:.5}
}

/* ===== Contact links footer ===== */
.contact-links{
  margin-top:56px;border-top:3px solid var(--ink);padding-top:28px;
}
.contact-links .cl-name{
  font-family:'Anton';text-transform:uppercase;
  font-size:clamp(34px,6vw,78px);line-height:.9;letter-spacing:.01em;
}
.contact-links .cl-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:22px;
  font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;
}
.contact-links .cl-row a{
  color:var(--ink);text-decoration:none;
  background:var(--yellow);padding:8px 16px;border:2px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);transition:transform .15s, box-shadow .15s;
}
.contact-links .cl-row a:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.contact-links .cl-row .cl-loc{opacity:.6}