/* =================================================================
   DESIGN SYSTEM  —  warm-paper minimal developer portfolio
   ================================================================= */
:root {
  /* Palette */
  --bg:        #f3f2ec;   /* warm paper */
  --bg-alt:    #eceadf;   /* slightly deeper panel */
  --fg:        #15140e;   /* near-black, warm */
  --fg-soft:   #3a382f;
  --muted:     #807d6f;   /* meta / captions */
  --line:      rgba(21, 20, 14, 0.14);
  --line-soft: rgba(21, 20, 14, 0.08);
  --accent:    #4d7c2f;   /* available dot / subtle accent */
  --invert-bg: #15140e;
  --invert-fg: #f3f2ec;

  /* Type */
  --font-display: "Inter Tight", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Layout */
  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 56px);
  --section-pad: clamp(72px, 11vw, 160px);
  --radius: 14px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* ---- top bar condivisa (assets/shared/topbar.css) — tema chiaro ---- */
  --tb-sans: var(--font-display);
  --tb-mono: var(--font-mono);
  --tb-ease: var(--ease);
  --tb-pad: var(--gutter);
  --tb-pill: #e7e7ef;
  --tb-pill-hover: #dcdce8;
  --tb-fg: var(--fg);
  --tb-fg-dim: color-mix(in srgb, var(--fg) 45%, transparent);
  --tb-cta-bg: var(--invert-bg);
  --tb-cta-fg: var(--invert-fg);
  --tb-card: #fff;
  --tb-card-fg: #15140e;
  --tb-card-muted: rgba(21,20,14,.4);
  --tb-link-hover: #1e2bff;
}

/* =================================================================
   RESET
   ================================================================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--fg);
  transition: background-color .7s var(--ease);  /* whole-viewport colour shift between sections */
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv05";
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: var(--fg); color: var(--bg); }

/* =================================================================
   LAYOUT PRIMITIVES
   ================================================================= */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-pad); }
.section--tight { padding-block: clamp(48px, 7vw, 96px); }

/* Eyebrow / section label */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: clamp(36px, 5vw, 64px);
}

/* =================================================================
   TYPOGRAPHY
   ================================================================= */
.display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; }
.h2 { font-size: clamp(34px, 5vw, 64px); letter-spacing: -0.03em; }
.lead { font-size: clamp(22px, 3vw, 34px); line-height: 1.3; font-weight: 400; letter-spacing: -0.01em; }
.mono { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.04em; color: var(--muted); }
.text-muted { color: var(--muted); }

/* =================================================================
   BUTTONS
   ================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 14px 22px;
  border-radius: 100px;
  border: 1px solid var(--fg);
  transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
  white-space: nowrap;
}
.btn .arrow { transition: transform .35s var(--ease); }
.btn:hover .arrow { transform: translate(3px, -3px); }
.btn--solid { background: var(--fg); color: var(--bg); }
.btn--solid:hover { background: transparent; color: var(--fg); }
.btn--ghost:hover { background: var(--fg); color: var(--bg); }
.link-underline { position: relative; }
.link-underline::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease);
}
.link-underline:hover::after { transform: scaleX(1); transform-origin: left; }

/* =================================================================
   HERO — bento (dh- = dev-hero; classi prefissate: main.css è condiviso)
   ================================================================= */
.dh-hero{
  --dh-card:#fbfaf5; --dh-line:rgba(21,20,14,.12); --dh-line2:rgba(21,20,14,.20);
  --dh-iris:#4b46f5; --dh-r:16px;
  position:relative; height:var(--dh-hero-h,100svh); display:flex; flex-direction:column;
  /* padding-top lascia spazio alla top bar fixed (raffinato via JS su misura reale) */
  padding:clamp(90px,12vh,120px) clamp(14px,3.4vw,44px) clamp(14px,2.6vh,24px); gap:clamp(12px,2.2vh,20px);
  overflow:hidden; background:var(--bg); color:var(--fg);
}
.dh-title-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}

.dh-topline{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.dh-eyebrow{display:inline-flex;align-items:center;gap:.6em;}
.dh-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:dh-pulse 2.4s ease-out infinite;}
@keyframes dh-pulse{0%{box-shadow:0 0 0 0 rgba(77,124,47,.45);}70%{box-shadow:0 0 0 9px rgba(77,124,47,0);}100%{box-shadow:0 0 0 0 rgba(77,124,47,0);}}

.dh-grid{position:relative;z-index:1;flex:1;min-height:0;display:grid;gap:clamp(8px,.9vw,13px);
  grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(4,minmax(0,1fr));
  grid-template-areas:
    "ribbon   ribbon   stat     stat     cta      cta"
    "portrait name     name     name     name     imageful"
    "portrait name     name     name     name     imageful"
    "stack    clock    status   status   process  process";}

.dh-tile{position:relative;overflow:hidden;border-radius:var(--dh-r);background:var(--dh-card);
  border:1px solid var(--dh-line);padding:clamp(12px,1.1vw,17px);display:flex;flex-direction:column;
  transition:opacity .65s var(--ease),transform .65s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);}
a.dh-tile,.dh-tile--cta,.dh-tile[data-dh-scroll],.flip-card[data-dh-scroll]{cursor:pointer;}
a.dh-tile:hover,.dh-tile--cta:hover,.dh-tile[data-dh-scroll]:hover{border-color:var(--dh-iris);box-shadow:0 16px 36px rgba(21,20,14,.12);transform:translateY(-3px);}
a.dh-tile:focus-visible,.dh-tile--cta:focus-visible,.dh-tile[data-dh-scroll]:focus-visible,.flip-card[data-dh-scroll]:focus-visible{outline:2px solid var(--dh-iris);outline-offset:3px;}

/* sequenza reveal: le tessere entrano dopo che il titolo si è formato */
.dh-grid .dh-tile{opacity:0;transform:translateY(14px) scale(.985);}
.dh-grid.dh-revealed .dh-tile{opacity:1;transform:none;}
.dh-grid.dh-revealed .dh-tile:nth-child(2){transition-delay:.04s}
.dh-grid.dh-revealed .dh-tile:nth-child(3){transition-delay:.08s}
.dh-grid.dh-revealed .dh-tile:nth-child(4){transition-delay:.11s}
.dh-grid.dh-revealed .dh-tile:nth-child(5){transition-delay:.14s}
.dh-grid.dh-revealed .dh-tile:nth-child(6){transition-delay:.17s}
.dh-grid.dh-revealed .dh-tile:nth-child(7){transition-delay:.20s}
.dh-grid.dh-revealed .dh-tile:nth-child(8){transition-delay:.22s}
.dh-grid.dh-revealed .dh-tile:nth-child(9){transition-delay:.24s}
.dh-grid.dh-revealed .dh-tile:nth-child(10){transition-delay:.26s}

.dh-t-eyebrow{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.dh-t-title{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;line-height:1;}
.dh-on-dark{color:#fff;font-size:clamp(18px,1.9vw,26px);}

.dh-tile--name{grid-area:name;background:transparent;border:none;padding:0;opacity:1!important;transform:none!important;}

/* ritratto — SLOT (invisibile) su cui atterra la flip-card; nessun box dietro.
   NON partecipa alla trasformazione del reveal: deve restare fermo così la
   flip-card (posizionata sul suo rect) si allinea; la card compare via cloak. */
.dh-tile--portrait{grid-area:portrait;padding:0;background:transparent;border:none;overflow:visible;
  opacity:1!important;transform:none!important;}
.dh-portrait-slot{position:absolute;inset:0;}

/* ribbon */
.dh-tile--ribbon{grid-area:ribbon;padding:0;}
.dh-tile--ribbon video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.dh-tile--ribbon .dh-cap{position:relative;margin-top:auto;padding:12px 14px;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;
  background:linear-gradient(to top,rgba(10,9,6,.78),transparent);color:#fff;}
.dh-tile--ribbon .dh-t-eyebrow{color:rgba(255,255,255,.82);}
.dh-badge{position:absolute;top:10px;left:10px;z-index:2;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:rgba(10,9,6,.5);backdrop-filter:blur(6px);padding:4px 8px;border-radius:100px;}
.dh-live{width:5px;height:5px;border-radius:50%;background:#57e08a;box-shadow:0 0 8px #57e08a;}

/* performance */
.dh-tile--stat{grid-area:stat;justify-content:space-between;}
.dh-stats{display:flex;gap:clamp(14px,2vw,34px);flex-wrap:wrap;align-items:flex-end;margin-top:auto;}
.dh-stat{display:flex;flex-direction:column;}
.dh-stat b{font-family:var(--font-display);font-weight:800;font-size:clamp(30px,3.6vw,54px);line-height:.9;letter-spacing:-.03em;}
.dh-stat b em{font-style:normal;color:var(--accent);}
.dh-stat b small{font-size:.42em;font-weight:600;}
.dh-stat span{font-family:var(--font-mono);font-size:clamp(10px,1vw,12.5px);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-top:7px;}

/* stack — finestra scorrevole + barra highlight che scende fino ad AI agents */
.dh-tile--stack{grid-area:stack;justify-content:flex-start;gap:8px;}
.dh-tech-window{position:relative;overflow:hidden;flex:1;min-height:0;width:100%;}
.dh-tech{list-style:none;display:flex;flex-direction:column;gap:clamp(3px,1vh,9px);margin:0;padding:0;position:relative;z-index:1;
  transition:transform .45s var(--ease);will-change:transform;}
.dh-tech li{font-family:var(--font-display);font-weight:600;font-size:clamp(15px,1.55vw,23px);letter-spacing:-.015em;line-height:1.05;
  color:var(--fg);transition:color .35s var(--ease);white-space:nowrap;}
.dh-tech li span{color:var(--muted);font-weight:500;}
.dh-tech li.dh-hl{color:var(--dh-iris);}
.dh-tech li.dh-hl span{color:#8b87ff;}

/* processo */
.dh-tile--process{grid-area:process;justify-content:space-between;gap:8px;}
.dh-proc{display:flex;align-items:center;justify-content:space-between;gap:clamp(4px,.8vw,12px);
  font-family:var(--font-display);font-weight:800;font-size:clamp(19px,2.5vw,36px);letter-spacing:-.03em;line-height:1;margin-top:auto;white-space:nowrap;}
.dh-proc i{font-style:normal;color:var(--dh-iris);font-weight:500;}
.dh-proc-note{font-family:var(--font-mono);font-size:clamp(12px,1.35vw,17px);color:var(--muted);letter-spacing:.02em;}

/* orologio */
.dh-tile--clock{grid-area:clock;justify-content:center;gap:3px;}
.dh-clock-time{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;font-size:clamp(20px,2vw,30px);line-height:1;font-variant-numeric:tabular-nums;}
.dh-clock-sub{font-family:var(--font-mono);font-size:9.5px;color:var(--muted);letter-spacing:.04em;}

/* terminale */
.dh-tile--status{grid-area:status;background:#14130d;border-color:#14130d;color:#e9e7dc;justify-content:flex-start;gap:clamp(10px,2vh,20px);}
.dh-term-head{font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;color:rgba(233,231,220,.45);display:flex;align-items:center;height:9px;}
.dh-term-head::before{content:"";width:9px;height:9px;border-radius:50%;background:#ff5f57;box-shadow:15px 0 0 #febc2e,30px 0 0 #28c840;margin-right:38px;flex:none;}
.dh-term-body{font-family:var(--font-mono);font-size:clamp(13px,1.4vw,18px);line-height:1.55;word-break:break-word;margin-top:auto;}
.dh-term-arrow{color:#7fe9a0;}
#dh-typed{color:#e9e7dc;}
.dh-term-cur{display:inline-block;width:7px;height:1.05em;background:#7fe9a0;vertical-align:-2px;margin-left:2px;animation:dh-blink 1.05s steps(1) infinite;}
@keyframes dh-blink{0%,50%{opacity:1;}50.01%,100%{opacity:0;}}

/* imageful — compressione */
.dh-tile--imageful{grid-area:imageful;background:#0f1420;border-color:rgba(255,255,255,.08);padding:0;}
.dh-if-mini{position:absolute;inset:0;display:grid;place-items:center;z-index:0;overflow:hidden;}
.dh-if-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;width:66%;transition:gap 2.4s var(--ease),width 2.4s var(--ease);}
.dh-if-grid.dh-anim{gap:1px;width:38%;}
.dh-if-grid span{aspect-ratio:1;border-radius:2px;background:linear-gradient(135deg,#6f6bff,#b9a7ff);opacity:1;transition:opacity 1s var(--ease);}
.dh-if-cap{position:relative;z-index:1;margin-top:auto;padding:12px 14px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;
  background:linear-gradient(to top,rgba(15,20,32,.92),rgba(15,20,32,.2) 70%,transparent);color:#fff;}
.dh-tile--imageful .dh-t-eyebrow{color:rgba(255,255,255,.7);}
.dh-if-counter{font-family:var(--font-mono);color:#fff;white-space:nowrap;}
.dh-if-counter b{font-weight:600;font-size:clamp(15px,1.5vw,21px);}
.dh-if-counter span{opacity:.6;font-size:.75em;}
.dh-tile--imageful .dh-arrow-c{color:#fff;border-color:rgba(255,255,255,.28);}

.dh-arrow-c{position:absolute;top:12px;right:12px;z-index:2;width:28px;height:28px;border-radius:50%;border:1px solid var(--dh-line2);
  display:grid;place-items:center;font-size:13px;color:var(--fg);transition:.4s var(--ease);}
a.dh-tile:hover .dh-arrow-c{background:var(--dh-iris);border-color:var(--dh-iris);color:#fff;transform:rotate(-45deg);}

/* cta — Contattami → selettore */
.dh-tile--cta{grid-area:cta;background:linear-gradient(150deg,#4b46f5,#7d3af5 55%,#c24bd6);border-color:transparent;color:#fff;}
.dh-cta-front{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-between;height:100%;gap:8px;
  transition:opacity .35s var(--ease),transform .45s var(--ease);}
.dh-cta-lead{font-family:var(--font-display);font-weight:600;font-size:clamp(17px,2vw,28px);line-height:1.08;letter-spacing:-.01em;color:#fff;max-width:15ch;}
.dh-cta-big{font-family:var(--font-display);font-weight:800;font-size:clamp(24px,2.7vw,40px);line-height:.98;letter-spacing:-.02em;margin-top:auto;}
/* contenuto del selettore: compatto e scalato in vh, così NON esce mai dal box
   (il box CTA è alto 1 riga di griglia, che varia con l'altezza del viewport) */
.dh-cta-back{position:absolute;inset:0;padding:clamp(10px,1.3vh,15px);display:flex;flex-direction:column;justify-content:center;gap:clamp(3px,0.6vh,6px);overflow:hidden;
  opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .4s var(--ease),transform .5s var(--ease);}
.dh-cta-head{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.82);margin-bottom:0;flex:none;}
.dh-cta-methods{display:flex;flex-direction:column;gap:clamp(3px,0.6vh,6px);min-height:0;}
.dh-cta-methods a{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-display);font-weight:600;
  font-size:clamp(13px,1.45vh,16px);color:#fff;padding:clamp(4px,0.65vh,7px) 13px;border-radius:8px;background:rgba(255,255,255,.15);
  opacity:0;transform:translateY(8px);transition:opacity .35s var(--ease),transform .35s var(--ease),background .25s;}
.dh-cta-methods a::after{content:"→";opacity:.65;}
.dh-cta-methods a:hover{background:rgba(255,255,255,.28);}
.dh-tile--cta.dh-open .dh-cta-front{opacity:0;transform:scale(.96) translateY(-10px);pointer-events:none;}
.dh-tile--cta.dh-open .dh-cta-back{opacity:1;transform:none;pointer-events:auto;}
.dh-tile--cta.dh-open .dh-cta-methods a{opacity:1;transform:none;}
.dh-tile--cta.dh-open .dh-cta-methods a:nth-child(1){transition-delay:.08s}
.dh-tile--cta.dh-open .dh-cta-methods a:nth-child(2){transition-delay:.13s}
.dh-tile--cta.dh-open .dh-cta-methods a:nth-child(3){transition-delay:.18s}
.dh-tile--cta.dh-open .dh-cta-methods a:nth-child(4){transition-delay:.23s}

@media (max-width:860px){
  .dh-hero{
    --dh-r:13px;
    height:var(--dh-hero-h,100dvh);
    min-height:0;
    padding:calc(env(safe-area-inset-top,0px) + 70px) clamp(8px,2.8vw,14px) calc(env(safe-area-inset-bottom,0px) + 8px);
  }
  .dh-title-canvas{inset:0;height:100%;}
  .dh-grid{
    gap:clamp(5px,1.5vw,8px);
    grid-template-columns:repeat(6,minmax(0,1fr));
    grid-template-rows:.82fr 1.15fr 1.15fr 1fr 1fr .78fr;
    grid-template-areas:
      "ribbon  ribbon  ribbon  stat    stat     stat"
      "name    name    name    name    name     name"
      "name    name    name    name    name     name"
      "portrait portrait stack   stack   imageful imageful"
      "portrait portrait stack   stack   imageful imageful"
      "status  status  status  process process  process";
  }
  .dh-tile{
    min-width:0;
    min-height:0;
    padding:clamp(7px,2vw,10px);
    border-radius:var(--dh-r);
  }
  .dh-tile--cta,.dh-tile--clock{display:none;}

  .dh-t-eyebrow{font-size:clamp(7px,2vw,9px);letter-spacing:.09em;}
  .dh-on-dark{font-size:clamp(16px,5vw,22px);}

  .dh-tile--ribbon::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:linear-gradient(to top,rgba(10,9,6,.82) 0%,rgba(10,9,6,.42) 42%,rgba(10,9,6,0) 78%);
  }
  .dh-tile--ribbon .dh-cap{z-index:2;padding:8px 9px;background:none;}
  .dh-badge{z-index:3;top:7px;left:7px;font-size:7px;padding:3px 6px;}

  .dh-tile--stat{gap:6px;}
  .dh-stats{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:4px;
    width:100%;
  }
  .dh-stat b{font-size:clamp(22px,8vw,34px);}
  .dh-stat span{font-size:clamp(6.5px,1.8vw,8px);line-height:1.1;margin-top:5px;white-space:nowrap;}
  .dh-stat-bp{display:none;}

  .dh-tile--stack{gap:6px;}
  .dh-tech li{font-size:clamp(14px,4.2vw,18px);}

  .dh-tile--imageful{padding:0;}
  .dh-if-grid{width:58%;gap:2px;}
  .dh-if-grid.dh-anim{width:34%;gap:1px;}
  .dh-if-cap{padding:8px 9px;gap:6px;}
  .dh-if-counter{display:none;}
  .dh-if-counter b{font-size:clamp(13px,4vw,17px);}
  .dh-arrow-c{top:8px;right:8px;width:24px;height:24px;font-size:12px;}

  .dh-tile--status{gap:6px;}
  .dh-term-head{font-size:7px;height:7px;white-space:nowrap;overflow:hidden;}
  .dh-term-head::before{width:7px;height:7px;box-shadow:11px 0 0 #febc2e,22px 0 0 #28c840;margin-right:28px;}
  .dh-term-body{display:flex;align-items:flex-end;font-size:clamp(11px,3.5vw,15px);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:clip;}
  .dh-term-arrow,.dh-term-cur{flex:none;}
  #dh-typed{display:inline-block;flex:none;max-width:none;overflow:visible;text-overflow:clip;vertical-align:bottom;white-space:nowrap;transition:transform .16s linear;}

  .dh-tile--process{gap:5px;}
  .dh-proc{width:100%;justify-content:space-between;font-size:clamp(13px,3.85vw,16px);gap:2px;letter-spacing:-.04em;}
  .dh-proc-note{font-size:clamp(8px,2.4vw,11px);white-space:nowrap;overflow:hidden;text-overflow:clip;}
}

@media (max-width:420px) and (max-height:740px){
  .dh-hero{padding-inline:7px;padding-bottom:7px;}
  .dh-grid{gap:5px;grid-template-rows:.74fr 1.08fr 1.08fr .96fr .96fr .7fr;}
  .dh-tile{padding:7px;}
  .dh-tile--ribbon .dh-cap,.dh-if-cap{padding:7px;}
  .dh-stat b{font-size:clamp(20px,7.3vw,29px);}
  .dh-stat span{font-size:6px;}
  .dh-term-head{display:none;}
  .dh-term-body{font-size:11px;}
  .dh-proc{font-size:clamp(12px,3.7vw,15px);}
  .dh-proc-note{font-size:8px;}
}
@media (prefers-reduced-motion:reduce){
  .dh-dot,.dh-term-cur{animation:none;}
  .dh-grid .dh-tile{opacity:1;transform:none;}
}

/* Marquee */
.marquee { border-block: 1px solid var(--line); padding-block: 18px; overflow: hidden; white-space: nowrap; }
.marquee__track { display: inline-flex; gap: 48px; animation: marquee 28s linear infinite; }
.marquee__track span { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(20px, 3vw, 34px); letter-spacing: -0.01em; color: var(--fg-soft); display: inline-flex; align-items: center; gap: 48px; }
.marquee__track span::after { content: "✦"; color: var(--muted); font-size: 0.6em; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* =================================================================
   ABOUT — "Hey!" + shared pinned flip card
   ================================================================= */
.about { position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center; padding-block: clamp(120px, 14vh, 180px); }
.about__inner { width: 100%; display: flex; flex-direction: column; justify-content: center;
  gap: clamp(250px, 42vh, 400px); }
.about__hey { font-family: var(--font-display); font-weight: 800; font-size: clamp(56px, 9vw, 120px);
  letter-spacing: -0.04em; line-height: 0.9; margin-bottom: clamp(20px, 3vw, 36px); }
.about__bio { font-size: clamp(20px, 2.6vw, 32px); font-weight: 500; line-height: 1.22;
  letter-spacing: -0.015em; max-width: 17ch; }
.about__right { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 30px); }
.about__text { display: flex; flex-direction: column; gap: 16px; color: var(--fg-soft);
  font-size: clamp(15px, 1.5vw, 18px); line-height: 1.5; max-width: 44ch; }
.about__cta { font-family: var(--font-mono); font-size: 13px; text-transform: uppercase;
  letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; }
.about__cta .arrow { transition: transform .35s var(--ease); }
.about__cta:hover .arrow { transform: translate(3px, -3px); }
.about__slot { display: none; }

@media (min-width: 920px) {
  .about__inner { display: grid; grid-template-columns: 1fr minmax(360px, 460px) 1fr;
    gap: clamp(36px, 4vw, 72px); align-items: stretch; }
  .about__left { display: flex; flex-direction: column; justify-content: space-between; }
  .about__left .about__hey { margin-bottom: 0; }
  .about__right { justify-content: flex-end; }
  .about__slot { display: block; }
}

/* Shared portrait flip card — pinned by JS while scrolling hero → about */
.flip-card { position: absolute; top: 50%; left: 50%; z-index: 20;
  width: clamp(220px, 30vw, 460px); aspect-ratio: 1 / 1.12;
  transform: translate(-50%, -50%); perspective: 1600px;
  will-change: transform, width; filter: drop-shadow(0 50px 80px rgba(0,0,0,.32));
  transition: opacity .7s var(--ease); }
/* cloak: nascosta finché la hero bento non rivela le tessere (poi il JS la mostra) */
.flip-card.dh-cloak { opacity: 0; }
.flip-card__inner { position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d; transform: rotateY(180deg); will-change: transform; }
.flip-card__face { position: absolute; inset: 0; border-radius: 20px; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-card__face--back { transform: rotateY(180deg); }
.flip-card__face img, .flip-card__ph { width: 100%; height: 100%; object-fit: cover; display: block; }
.flip-card__face--front img { filter: grayscale(1) brightness(.82) contrast(1.05); }
.flip-card__ph { display: grid; place-items: center; font-family: var(--font-display);
  font-weight: 800; font-size: clamp(64px, 9vw, 130px);
  background: radial-gradient(120% 120% at 50% 0%, #2c2c31, #050505); color: rgba(255,255,255,.55); }
.flip-card__ph--color { background: linear-gradient(160deg, #ff5a5a 0%, #c01a1a 46%, #5e0a0a 100%);
  color: rgba(255,255,255,.92); }

/* The hero → about snapping is handled in JS (smooth, eased) — see main.js.
   CSS scroll-snap is intentionally NOT used: its glide speed isn't controllable. */

/* =================================================================
   APPROACH — headline + blue ribbon drawn on scroll + card
   ================================================================= */
/* No own background — the whole viewport background is shifted via JS
   (see viewportTheme) so there's never a hard seam between sections. */
.approach { position: relative; color: var(--fg);
  overflow: hidden; isolation: isolate; padding-block: clamp(80px, 12vh, 150px); }
.approach ::selection { background: var(--ribbon); color: #fff; }

.approach__ribbon { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.approach__ribbon svg { width: 100%; height: 100%; display: block; }
#ribbonPath { filter: drop-shadow(0 24px 44px color-mix(in srgb, var(--ribbon) 38%, transparent)); }

.approach__inner { position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr;
  gap: clamp(36px, 6vw, 90px) clamp(24px, 4vw, 64px); align-items: start; min-height: 80vh; }

.approach__heading { grid-column: 1 / -1; grid-row: 1;
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em; line-height: 0.98;
  font-size: clamp(46px, 9.5vw, 168px); }
.approach__heading span { display: block; }

/* Invisible anchor slot — the shared reel box (fixed) renders the visible card. */
.approach__card { grid-column: 1; grid-row: 2; align-self: end;
  width: 100%; max-width: 560px; aspect-ratio: 16 / 11; visibility: hidden; }

.approach__col { grid-column: 2; grid-row: 2; align-self: center; justify-self: end;
  display: flex; flex-direction: column; gap: clamp(26px, 3.5vw, 42px); max-width: 42ch; }
.approach__text { font-size: clamp(18px, 1.9vw, 24px); line-height: 1.4; letter-spacing: -0.01em; }
.approach__cta { position: relative; overflow: hidden; isolation: isolate;
  align-self: flex-start; display: inline-flex; align-items: center;
  background: #fff; color: var(--fg); border-radius: 100px; padding: 15px 26px 15px 47px;
  font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em;
  box-shadow: 0 12px 28px -14px rgba(20, 20, 60, .3); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.approach__cta:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -16px rgba(20, 20, 60, .4); }

.approach__cta-label { position: relative; z-index: 1; transition: color .3s var(--ease); }

/* pallino nero a sinistra → in hover si espande fino a riempire di nero il pulsante */
.approach__cta-dot { position: absolute; z-index: 0; top: 50%; left: 26px;
  width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--fg);
  transform: scale(1); transform-origin: center; transition: transform .7s var(--ease); }

/* freccia → verso destra, nascosta oltre il bordo sinistro, entra in hover */
.approach__cta-arrow { position: absolute; z-index: 2; top: 50%; left: 22px;
  width: 16px; height: 16px; margin-top: -8px; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; opacity: 0; transform: translateX(-42px);
  transition: transform .45s var(--ease), opacity .3s var(--ease); }
.approach__cta-arrow svg { display: block; }

.approach__cta:hover .approach__cta-dot { transform: scale(70); }
.approach__cta:hover .approach__cta-label { color: #fff; }
.approach__cta:hover .approach__cta-arrow { opacity: 1; transform: translateX(0); }

@media (max-width: 820px) {
  .approach__inner { grid-template-columns: 1fr; grid-template-rows: auto auto auto; min-height: 0; }
  .approach__heading { grid-column: 1; }
  .approach__col { grid-column: 1; grid-row: 2; justify-self: start; align-self: start; max-width: none; }
  .approach__card { grid-column: 1; grid-row: 3; max-width: none; }
}

/* ---- Pin/sticky della sezione Approach (solo desktop + JS + motion ok) ----
   Il track è alto 2.2×viewport: la sezione (sticky, alta 1×) resta fissa nel
   viewport per ~1.2× di scroll mentre il ribbon si disegna (mappato dal JS su
   questo range in ribbonDraw); a ribbon completo la sticky si rilascia e lo
   scroll prosegue. Altezze su --app-vh CONGELATA (px) per non saltare al
   toggle della barra indirizzi mobile. Senza JS/con reduce/su mobile: flusso
   normale, nessun pin. */
.approach-pin { position: relative; }
@media (min-width: 821px) {
  html.js:not(.reduce) .approach-pin { height: calc(2.2 * var(--app-vh, 100vh)); }
  html.js:not(.reduce) .approach {
    position: sticky; top: 0;
    height: var(--app-vh, 100vh);
    padding-block: 0;
    display: flex; align-items: center;
  }
  html.js:not(.reduce) .approach__inner { width: 100%; min-height: 0; }
}

/* =================================================================
   REEL — scroll-driven: the card morphs into a near-fullscreen player
   ================================================================= */
.reel { position: relative; height: calc(2.2 * var(--app-vh, 100vh)); }   /* tall = scroll room; --app-vh CONGELATA (px) → non "salta" al toggle della barra mobile (gotcha). Il morph+hold+uscita del player consuma una distanza di scroll FISSA (~2.08× dalla cima del reel, guidata dalla salita della card, 1:1 con lo scroll): l'altezza oltre quella è solo coda vuota. 2.2× = morph+hold+uscita + un piccolo margine prima della sezione successiva, SENZA il viewport quasi-bianco che dava 2.5×. NB: sotto ~2.1× il player non fa in tempo a uscire e si sovrappone alla sezione dopo. */
.reel__box {
  position: fixed; top: 0; left: 0; z-index: 40;         /* JS sets top/left/width/height */
  width: 400px; height: 250px; border-radius: 18px; overflow: hidden;
  transform-origin: 0 0;
  will-change: transform, border-radius;
  contain: layout paint style;
  box-shadow: 0 50px 110px -50px rgba(40, 30, 120, .5);
  isolation: isolate; visibility: hidden;                /* JS positions & reveals it */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.reel__media { position: absolute; inset: 0; }
.reel__media img, .reel__media-ph, .reel__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel__poster { z-index: 0; }
.reel__video { z-index: 1; opacity: 0; transition: opacity .18s linear; }
.reel__box.is-video-ready .reel__video { opacity: 1; }
/* warm, colourful placeholder (revealed once the blue tint fades) */
.reel__media-ph {
  background:
    radial-gradient(38% 50% at 22% 30%, #ff5d8f 0%, transparent 60%),
    radial-gradient(40% 46% at 70% 22%, #ffb35c 0%, transparent 62%),
    radial-gradient(46% 54% at 82% 72%, #18b6a6 0%, transparent 60%),
    radial-gradient(50% 60% at 38% 82%, #c98bff 0%, transparent 64%),
    radial-gradient(60% 70% at 55% 50%, #ffd9c2 0%, transparent 70%),
    linear-gradient(135deg, #e8c7b0, #d9b8c8 55%, #b9c2e6);
}
/* blue/violet monochrome overlay — JS fades its opacity 1 → 0 */
.reel__tint {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #2f2bf0 0%, #5b32e8 55%, #7a2be0 100%);
  mix-blend-mode: color;
}

/* crosshair framing markers */
.reel__markers { position: absolute; inset: -34px 0; opacity: 0; pointer-events: none; }
.reel__markers-row { position: absolute; left: 0; right: 0; display: flex; justify-content: space-between; padding-inline: 4%; }
.reel__markers-row--top { top: 0; }
.reel__markers-row--bottom { bottom: 0; }
.reel__markers span { font-family: var(--font-body); font-weight: 400; font-size: 22px; line-height: 1; color: var(--fg); opacity: .55; }

/* PLAY ⏵ REEL overlay */
.reel__ui {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: clamp(16px, 3vw, 40px);
  color: #fff; opacity: 0; will-change: opacity, transform;
}
.reel__word { font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  letter-spacing: -0.01em; font-size: clamp(28px, 5vw, 76px); text-shadow: 0 4px 30px rgba(0,0,0,.25); }
.reel__play { display: grid; place-items: center; width: clamp(58px, 7vw, 96px); aspect-ratio: 1;
  background: #fff; color: var(--fg); border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 12px 40px -10px rgba(0,0,0,.4); transition: transform .35s var(--ease); }
.reel__ui:hover .reel__play { transform: scale(1.08); }
.reel__play svg { margin-left: 3px; }

/* ---- Header "Featured Work" (fixed, in cima al player) ----
   Titolo con reveal per-lettera dal basso (identico a /portraits .pt2-fw-title);
   opacità/visibilità guidate dal JS (reelMorph) in base al progresso del morph. */
.reel__head {
  position: fixed; top: clamp(80px, 12vh, 150px); left: 0; right: 0; z-index: 39; /* sotto il player (.reel__box z-index:40) */
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding-inline: var(--gutter); text-align: center;
  opacity: 0; pointer-events: none; will-change: opacity;
}
/* Titolo GRANDE del gruppo ("Featured Work"), con reveal per-lettera (staggered). */
.reel__group {
  margin: 0; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(40px, 6vw, 88px); line-height: 0.9; letter-spacing: -0.03em;
  color: var(--fg); white-space: nowrap; text-align: center;
}
/* Titolo della sola sezione ("Ribbon") — più piccolo del titolo di gruppo. */
.reel__title {
  margin: 0; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(24px, 3vw, 44px); line-height: 0.95; letter-spacing: -0.02em;
  color: var(--fg);
}
.reel__copy { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.reel__title__word { display: inline-flex; overflow: hidden; white-space: nowrap; padding-bottom: 0.05em; }
.reel__title__space { display: inline-block; width: 0.28em; }
.reel__title__char {
  display: inline-block; transform: translate3d(0, 112%, 0) rotateX(34deg); transform-origin: 50% 100%;
  opacity: 0; will-change: transform, opacity;
  transition: transform 0.82s cubic-bezier(.2, .86, .16, 1), opacity 0.48s ease;
  transition-delay: calc(var(--i, 0) * 34ms);
}
.reel__title.is-in .reel__title__char,
.reel__group.is-in .reel__title__char { transform: translate3d(0, 0, 0) rotateX(0deg); opacity: 1; }
.reel__eyebrow { color: var(--muted); }
.reel__intro {
  max-width: 56ch; margin: 0; font-family: var(--font-body);
  font-size: clamp(15px, 1.35vw, 19px); font-weight: 400;
  line-height: 1.55; color: var(--fg-soft);
}
/* Desktop: "Featured Work" (gruppo) centrato a tutta larghezza in alto; sotto, la
   copy della sezione Ribbon nella colonna sinistra (1/3), player a destra (2/3).
   left/width/top del head e la posizione del player li imposta reelMorph (JS). */
.reel__head--group { align-items: stretch; text-align: initial; gap: 26px; padding-inline: 0; }
.reel__head--group .reel__copy { align-self: flex-start; align-items: flex-start; text-align: left; }
.reel__head--group .reel__intro { max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .reel__title__char { transition: none; transform: none; opacity: 1; }
}

@media (max-width: 760px) {
  .reel { height: calc(2.2 * var(--app-vh, 100vh)); }
  .reel__word { font-size: clamp(22px, 7vw, 40px); }
  .reel__play { width: clamp(44px, 12vw, 58px); }
  .reel__head { top: clamp(64px, 10vh, 110px); }
  .reel__group { font-size: clamp(30px, 9vw, 52px); white-space: normal; }
  .reel__title { font-size: clamp(22px, 6vw, 36px); white-space: normal; }
}

/* =================================================================
   SERVICES
   ================================================================= */
.services__list { border-top: 1px solid var(--line); }
.service {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 4vw, 64px);
  align-items: start; padding-block: clamp(28px, 4vw, 44px); border-bottom: 1px solid var(--line);
  transition: padding-left .4s var(--ease);
}
.service:hover { padding-left: 12px; }
.service__num { font-family: var(--font-mono); font-size: 13px; color: var(--muted); padding-top: 6px; }
.service__body { display: grid; grid-template-columns: 1fr; gap: 16px; }
.service__title { font-size: clamp(26px, 3.4vw, 40px); }
.service__desc { color: var(--fg-soft); max-width: 52ch; }
.service__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.tag { font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); border: 1px solid var(--line); border-radius: 100px; padding: 5px 12px; }
@media (min-width: 800px) {
  .service__body { grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
}

/* =================================================================
   PROJECTS
   ================================================================= */
.projects__grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 48px); }
@media (min-width: 760px) { .projects__grid { grid-template-columns: repeat(2, 1fr); } }
.project { display: block; }
.project__media {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden;
  background: var(--bg-alt); border: 1px solid var(--line); margin-bottom: 20px;
}
.project__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.project:hover .project__media img { transform: scale(1.04); }
/* generated placeholder when no image */
.project__placeholder { position: absolute; inset: 0; display: grid; place-items: center;
  background: radial-gradient(120% 120% at 30% 20%, var(--bg-alt), var(--bg));
  font-family: var(--font-display); font-size: clamp(40px, 6vw, 72px); font-weight: 600;
  text-transform: uppercase; letter-spacing: -0.03em; color: color-mix(in srgb, var(--fg) 14%, transparent); }
.project__overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 18px;
  opacity: 0; transition: opacity .4s var(--ease); }
.project:hover .project__overlay { opacity: 1; }
.project__view { background: var(--bg); color: var(--fg); font-family: var(--font-mono); font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.04em; padding: 10px 16px; border-radius: 100px; display: inline-flex; gap: 8px; }
.project__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.project__title { font-size: clamp(22px, 2.4vw, 30px); }
.project__year { font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.project__meta { font-family: var(--font-mono); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-top: 6px; }

/* =================================================================
   TESTIMONIALS
   ================================================================= */
.testi__grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 800px) { .testi__grid { grid-template-columns: repeat(2, 1fr); } }
.testi { background: var(--bg); padding: clamp(28px, 4vw, 44px); display: flex; flex-direction: column; gap: 24px; min-height: 100%; }
.testi__quote { font-size: clamp(18px, 2vw, 22px); line-height: 1.45; letter-spacing: -0.01em; }
.testi__quote::before { content: "“"; font-family: var(--font-display); }
.testi__foot { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.testi__avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--invert-bg); color: var(--invert-fg);
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 16px; flex-shrink: 0; }
.testi__name { font-weight: 500; font-family: var(--font-display); letter-spacing: -0.01em; }
.testi__role { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }

/* =================================================================
   THOUGHTS / BLOG
   ================================================================= */
.posts { border-top: 1px solid var(--line); }
.post-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px;
  padding-block: clamp(22px, 3vw, 34px); border-bottom: 1px solid var(--line);
  transition: padding-left .4s var(--ease);
}
.post-row:hover { padding-left: 12px; }
.post-row__main { display: flex; flex-direction: column; gap: 8px; }
.post-row__title { font-size: clamp(22px, 2.6vw, 32px); }
.post-row__excerpt { color: var(--muted); max-width: 60ch; font-size: 15px; }
.post-row__date { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.post-row__arrow { transition: transform .35s var(--ease); }
.post-row:hover .post-row__arrow { transform: translate(4px, -4px); }

/* =================================================================
   CTA
   ================================================================= */
.cta { background: var(--invert-bg); color: var(--invert-fg); border-radius: clamp(20px, 3vw, 32px); margin-inline: var(--gutter);
  padding: clamp(56px, 9vw, 130px) clamp(28px, 6vw, 90px); text-align: center; }
.cta ::selection { background: var(--bg); color: var(--fg); }
.cta__heading { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: -0.04em;
  font-size: clamp(56px, 12vw, 180px); line-height: 0.9; }
.cta__text { color: color-mix(in srgb, var(--invert-fg) 65%, transparent); max-width: 46ch; margin: 28px auto 40px; font-size: clamp(16px, 2vw, 19px); }
.cta .btn { border-color: var(--invert-fg); }
.cta .btn--solid { background: var(--invert-fg); color: var(--invert-bg); }
.cta .btn--solid:hover { background: transparent; color: var(--invert-fg); }

/* Footer /dev = sezione condivisa "Esplora lo studio"
   (stile in assets/shared/explore.css, inlineato da partials/explore.html). */

/* =================================================================
   SINGLE / LIST PAGES
   ================================================================= */
.page-head { padding-top: clamp(120px, 16vh, 180px); padding-bottom: clamp(32px, 5vw, 56px); border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: clamp(40px, 8vw, 110px); text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.9; }
.page-head .lead { margin-top: 24px; max-width: 50ch; color: var(--fg-soft); }
.prose { max-width: 70ch; font-size: 18px; line-height: 1.7; }
.prose h2 { font-size: clamp(26px, 3vw, 36px); margin-top: 1.8em; margin-bottom: 0.5em; }
.prose h3 { font-size: clamp(20px, 2.4vw, 26px); margin-top: 1.6em; margin-bottom: 0.4em; }
.prose p, .prose ul, .prose ol { margin-bottom: 1.1em; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin-bottom: 0.4em; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose img { border-radius: var(--radius); margin-block: 1.5em; }
.prose blockquote { border-left: 2px solid var(--fg); padding-left: 1em; font-style: italic; color: var(--fg-soft); margin-block: 1.2em; }
.prose code { font-family: var(--font-mono); font-size: 0.86em; background: var(--bg-alt); padding: 2px 6px; border-radius: 6px; }
.prose pre { background: var(--invert-bg); color: var(--invert-fg); padding: 20px; border-radius: var(--radius); overflow-x: auto; margin-block: 1.4em; }
.prose pre code { background: none; padding: 0; color: inherit; }
.back-link { font-family: var(--font-mono); font-size: 13px; color: var(--muted); display: inline-flex; gap: 8px; margin-bottom: 32px; }
.back-link:hover { color: var(--fg); }

/* =================================================================
   SCROLL REVEAL
   ================================================================= */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .08s; }
[data-reveal][data-delay="2"] { transition-delay: .16s; }
[data-reveal][data-delay="3"] { transition-delay: .24s; }

/* =================================================================
   IMAGEFUL — sezione prodotto /dev (teaser statico + mock finestra)
   ================================================================= */
.imgf { padding-block: clamp(36px, 5vw, 72px) var(--section-pad); }
.imgf__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.imgf__copy { max-width: 34ch; }
.imgf__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 5vw, 60px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin-top: 20px;
}
.imgf__text {
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.5;
  color: var(--fg-soft);
  margin-top: 22px;
}
.imgf__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.imgf__chip {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--fg-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
}

/* CTA — pill scura che si riempie di teal all'hover (stessa logica di .approach__cta) */
.imgf__cta {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center;
  margin-top: 34px; padding: 15px 26px 15px 47px;
  border-radius: 999px;
  background: var(--invert-bg); color: var(--invert-fg);
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.imgf__cta:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -16px rgba(11, 17, 31, .5); }
.imgf__cta-label { position: relative; z-index: 1; transition: color .3s var(--ease); }
.imgf__cta-dot {
  position: absolute; z-index: 0; top: 50%; left: 26px;
  width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%;
  background: #3ce0c5; transform: scale(1); transform-origin: center;
  transition: transform .7s var(--ease);
}
.imgf__cta-arrow {
  position: absolute; z-index: 2; top: 50%; left: 22px; margin-top: -8px;
  width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center;
  color: #06231f; opacity: 0; transform: translateX(-42px);
  transition: opacity .3s var(--ease), transform .45s var(--ease);
}
.imgf__cta:hover .imgf__cta-dot { transform: scale(70); }
.imgf__cta:hover .imgf__cta-label { color: #06231f; }
.imgf__cta:hover .imgf__cta-arrow { opacity: 1; transform: translateX(0); }

/* Mock finestra macOS con placeholder + barra "peso" animata */
.imgf__stage { perspective: 1400px; }
.imgf__window {
  border-radius: 16px;
  background: #fbfbf7;
  border: 1px solid var(--line);
  box-shadow: 0 40px 80px -40px rgba(21, 20, 14, .4), 0 2px 0 rgba(255,255,255,.6) inset;
  overflow: hidden;
  transform: rotateY(-6deg) rotateX(3deg);
  transition: transform .9s var(--ease);
}
.imgf__stage.is-in .imgf__window { transform: rotateY(0deg) rotateX(0deg); }
.imgf__titlebar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-bottom: 1px solid var(--line-soft);
  background: var(--bg-alt);
}
.imgf__dot { width: 11px; height: 11px; border-radius: 50%; background: #cfccbf; }
.imgf__dot--r { background: #ff5f57; }
.imgf__dot--y { background: #febc2e; }
.imgf__dot--g { background: #28c840; }
.imgf__winname { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-left: 8px; }
.imgf__canvas { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0; }
.imgf__thumb {
  position: relative; min-height: 210px;
  display: grid; place-items: end start; padding: 14px;
  background:
    linear-gradient(135deg, rgba(60,224,197,.16), rgba(78,161,255,.16)),
    repeating-conic-gradient(#e9e7dc 0% 25%, #f4f2ea 0% 50%) 0 / 26px 26px;
}
.imgf__thumb-label {
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-soft);
  background: rgba(255,255,255,.72); padding: 4px 8px; border-radius: 6px;
}
.imgf__panel { padding: 18px 20px; display: flex; flex-direction: column; justify-content: center; gap: 12px; border-left: 1px solid var(--line-soft); }
.imgf__row { display: flex; align-items: baseline; justify-content: space-between; font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.imgf__q { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.imgf__meter { height: 8px; border-radius: 999px; background: var(--bg-alt); overflow: hidden; }
.imgf__meter i {
  display: block; height: 100%; width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #3ce0c5, #4ea1ff);
  transition: width 1.4s var(--ease);
  transition-delay: .3s;
}
.imgf__stage.is-in .imgf__meter i { width: 11%; }
.imgf__sizes { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-mono); font-size: 13px; }
.imgf__before { color: var(--muted); text-decoration: line-through; font-weight: 400; }
.imgf__arrow { color: var(--muted); }
.imgf__after { color: var(--fg); font-weight: 500; opacity: 0; transition: opacity .5s var(--ease) .9s; }
.imgf__stage.is-in .imgf__after { opacity: 1; }
.imgf__saved { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: #2f8f7c; opacity: 0; transition: opacity .5s var(--ease) 1.1s; }
.imgf__stage.is-in .imgf__saved { opacity: 1; }

@media (max-width: 900px) {
  .imgf__grid { grid-template-columns: 1fr; gap: 44px; }
  .imgf__copy { max-width: none; }
  .imgf__window { transform: none; }
  .imgf__stage.is-in .imgf__window { transform: none; }
}
@media (max-width: 460px) {
  .imgf__canvas { grid-template-columns: 1fr; }
  .imgf__panel { border-left: none; border-top: 1px solid var(--line-soft); }
}

/* =================================================================
   CASE STUDY — "questo sito è il portfolio". Griglia di demo LIVE.
   Ogni tile prova una tecnica realmente usata sul sito. Le animazioni
   sono pilotate da main.js (csDemos) con fallback prefers-reduced-motion.
   ================================================================= */
.cs { padding-block: clamp(64px, 9vw, 132px); background: var(--bg); position: relative; }
.cs__inner { display: flex; flex-direction: column; }

.cs__head { max-width: 780px; }
.cs__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 6vw, 74px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin-top: 22px;
  color: var(--fg);
}
.cs__mark { position: relative; white-space: nowrap; }
@media (max-width: 620px) { .cs__mark { white-space: normal; } }
.cs__mark-line {
  position: absolute; left: 0; right: -0.06em; bottom: -0.16em;
  width: 100%; height: 0.34em; color: var(--tb-link-hover); overflow: visible;
  stroke-dasharray: 340; stroke-dashoffset: 340;
}
.cs__title.is-in .cs__mark-line { animation: cs-draw 0.9s var(--ease) 0.45s forwards; }
@keyframes cs-draw { to { stroke-dashoffset: 0; } }
.cs__lead {
  margin-top: 26px;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.55;
  color: var(--fg-soft);
  max-width: 640px;
}

/* ---- griglia tile ---- */
.cs__grid {
  margin-top: clamp(44px, 6vw, 76px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.4vw, 20px);
}
@media (max-width: 900px) { .cs__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .cs__grid { grid-template-columns: 1fr; } }

.cs__tile {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-alt);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .5s var(--ease), transform .5s var(--ease);
}
.cs__tile:hover { border-color: color-mix(in srgb, var(--tb-link-hover) 45%, var(--line)); }
.cs__stage {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(30,43,255,0.05), transparent 60%),
    var(--bg);
}

/* tile 1 — morph blob */
.cs__blob {
  width: 46%; aspect-ratio: 1;
  background: linear-gradient(135deg, #1e2bff 0%, #6b4dff 55%, #b06bff 100%);
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  box-shadow: 0 18px 44px -18px rgba(30,43,255,0.55);
  will-change: border-radius, transform;
}

/* tile 2 — ribbon path */
.cs__stage--ribbon { color: var(--tb-link-hover); }
.cs__ribbon { width: 80%; height: 80%; overflow: visible; }
.cs__ribbon-path { stroke-dasharray: 460; stroke-dashoffset: 460; }
.cs__tile.is-in .cs__ribbon-path { animation: cs-ribbon 5.4s var(--ease) infinite; }
@keyframes cs-ribbon {
  0%   { stroke-dashoffset: 460; }
  45%  { stroke-dashoffset: 0; }
  55%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -460; }
}

/* tile 3 — parallax dots */
.cs__stage--para { cursor: crosshair; --px: 0; --py: 0; }
.cs__dot {
  position: absolute; left: var(--x); top: var(--y);
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; background: var(--fg);
  transform: translate3d(calc(var(--px) * var(--d) * 26px), calc(var(--py) * var(--d) * 26px), 0);
  transition: transform .25s var(--ease);
}
.cs__dot--big { width: 34px; height: 34px; margin: -17px 0 0 -17px; background: var(--tb-link-hover); }
.cs__dot--ring { background: transparent; border: 2px solid var(--fg); }
.cs__dot--sq { border-radius: 3px; }
.cs__para-hint {
  position: absolute; left: 12px; bottom: 10px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em;
  color: var(--muted); opacity: .8; pointer-events: none;
}
/* mouse fine → "muovi il cursore"; touch/coarse → "tocca il riquadro" */
.cs__para-hint--tap { display: none; }
@media (hover: none), (pointer: coarse) {
  .cs__para-hint--move { display: none; }
  .cs__para-hint--tap { display: block; }
}

/* tile 4 — weight meter */
.cs__stage--weight { place-items: stretch; }
.cs__weigh {
  align-self: center; width: 100%; padding: clamp(14px, 2vw, 22px);
  display: flex; flex-direction: column; gap: 9px; position: relative;
}
.cs__weigh-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cs__weigh-name { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; color: var(--muted); }
.cs__weigh-from { font-family: var(--font-mono); font-size: 15px; font-weight: 500; color: var(--muted); text-decoration: line-through; }
.cs__weigh-to { font-family: var(--font-mono); font-size: 22px; font-weight: 500; color: var(--fg); }
.cs__weigh-track { height: 7px; border-radius: 999px; background: rgba(21,20,14,0.1); overflow: hidden; }
.cs__weigh-track i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, #1e2bff, #6b4dff);
  border-radius: 999px; transform-origin: left center;
  transition: transform 2.2s var(--ease);
}
.cs__tile.is-in .cs__weigh-track i { transform: scaleX(0.02); }
.cs__weigh-badge {
  align-self: flex-start; margin-top: 2px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  color: #2f8f7c; letter-spacing: .03em;
}

/* caption comune */
.cs__cap {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 13px 16px; border-top: 1px solid var(--line-soft);
}
.cs__cap-k { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--fg); }
.cs__cap-v { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .03em; color: var(--muted); text-align: right; }

/* ---- readout numeri ---- */
.cs__spec {
  margin-top: clamp(28px, 3.5vw, 44px);
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--bg-alt);
}
.cs__spec li {
  padding: clamp(18px, 2.4vw, 28px);
  border-right: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 6px;
}
.cs__spec li:last-child { border-right: none; }
.cs__spec b {
  font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums;
  font-size: clamp(30px, 3.6vw, 48px); line-height: 1; letter-spacing: -0.02em; color: var(--fg);
}
.cs__spec span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .03em; color: var(--muted); }
@media (max-width: 720px) {
  .cs__spec { grid-template-columns: 1fr 1fr; }
  .cs__spec li:nth-child(2) { border-right: none; }
  .cs__spec li:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
}

/* ---- CTA — identica a .approach__cta: pill bianca, il pallino scuro si
        espande all'hover fino a riempirla, label bianca, freccia da sinistra ---- */
.cs__cta {
  position: relative; overflow: hidden; isolation: isolate;
  align-self: flex-start; margin-top: clamp(30px, 3.5vw, 46px);
  display: inline-flex; align-items: center;
  background: #fff; color: var(--fg); border-radius: 100px; padding: 15px 26px 15px 47px;
  font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em;
  box-shadow: 0 12px 28px -14px rgba(20, 20, 60, .3);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.cs__cta:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -16px rgba(20, 20, 60, .4); }
.cs__cta-label { position: relative; z-index: 1; transition: color .3s var(--ease); }
/* pallino scuro a sinistra → in hover si espande fino a riempire il pulsante */
.cs__cta-dot { position: absolute; z-index: 0; top: 50%; left: 26px;
  width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--fg);
  transform: scale(1); transform-origin: center; transition: transform .7s var(--ease); }
/* freccia → nascosta oltre il bordo sinistro, entra in hover */
.cs__cta-arrow { position: absolute; z-index: 2; top: 50%; left: 22px;
  width: 16px; height: 16px; margin-top: -8px; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; opacity: 0; transform: translateX(-42px);
  transition: transform .45s var(--ease), opacity .3s var(--ease); }
.cs__cta-arrow svg { display: block; }
.cs__cta:hover .cs__cta-dot { transform: scale(70); }
.cs__cta:hover .cs__cta-label { color: #fff; }
.cs__cta:hover .cs__cta-arrow { opacity: 1; transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .cs__blob, .cs__ribbon-path, .cs__mark-line { animation: none !important; }
  .cs__ribbon-path { stroke-dashoffset: 0; }
  .cs__mark-line { stroke-dashoffset: 0; }
  .cs__dot { transition: none; }
}