/* =========================================================
   IOANA SAVIN — PORTFOLIO
   Design system + layout + components
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600;700&display=swap');

:root{
  --bg:        #ffffff;
  --bg-soft:   #f7f6f4;
  --panel:     #f2f0ec;
  --line:      rgba(17,17,17,.12);
  --line-soft: rgba(17,17,17,.07);
  --ink:       #111111;
  --ink-dim:   #6b6b68;
  --ink-faint: #a3a19b;
  --red:       #e8241b;
  --red-dark:  #b81810;
  --paper:     #fffefb;

  --frame-top:  68px;
  --frame-side: 56px;

  --radius-xl: 40px;
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 10px;

  --ease: cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);

  --f-display: 'Bricolage Grotesque', sans-serif;
  --f-serif: 'Instrument Serif', serif;
  --f-body: 'Inter', sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--bg); }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ margin:0; font-family:var(--f-display); font-weight:600; letter-spacing:-.01em; }
p{ margin:0; }
button{ font-family:inherit; background:none; border:none; color:inherit; cursor:pointer; }
em{ font-family:var(--f-serif); font-style:italic; color:var(--red); font-weight:400; }

::selection{ background:var(--red); color:#fff; }

/* subtle grain overlay for texture */
.grain{
  position:fixed; inset:0; z-index:9998; pointer-events:none;
  opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* custom cursor */
.cursor{
  position:fixed; top:0; left:0; width:12px; height:12px; border-radius:50%;
  background:var(--red); pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%); transition:opacity .25s var(--ease-soft);
}
/* over links and buttons the dot only fades back — it keeps its size and its
   red, so the cursor stays one consistent object across the whole site */
.cursor.dim{ opacity:.2; }
.cursor.hide{ opacity:0; }
@media (hover:none), (pointer:coarse){ .cursor{ display:none; } }

/* =========================================================
   FRAME — top bar (full site navigation)
   ========================================================= */
.frame-top{
  position:fixed; top:0; left:0; right:0; height:var(--frame-top);
  z-index:700; display:flex; align-items:center; justify-content:space-between;
  padding:0 26px; background:var(--bg); border-bottom:1px solid var(--line);
}
.ft-logo{ font-family:var(--f-display); font-weight:700; font-size:17px; letter-spacing:-.01em; }
.ft-logo span{ color:var(--red); }

.ft-nav{ display:flex; align-items:center; gap:6px; }
.ft-nav > a{
  position:relative; display:flex; align-items:center; gap:6px; padding:10px 16px;
  font-size:13.5px; font-weight:500; color:var(--ink-dim); border-radius:100px;
  transition:color .3s, background .3s; cursor:pointer;
}
.ft-nav > a .n{ font-size:10px; color:var(--red); font-weight:600; }
.ft-nav > a:hover{ color:var(--ink); background:var(--panel); }
.ft-nav > a.active{ color:var(--ink); font-weight:600; }

.ft-th4ura{
  display:flex; align-items:center; gap:8px; padding:9px 16px 9px 12px; border-radius:100px;
  background:#0d0d0d; color:#c8ff5c; font-size:12.5px; font-weight:600; letter-spacing:.03em;
}
.ft-th4ura .dot{ width:6px; height:6px; border-radius:50%; background:#c8ff5c; box-shadow:0 0 8px #c8ff5c; }
.ft-th4ura:hover{ background:#000; }

.ft-burger{ display:none; }

/* =========================================================
   FRAME — left sidebar (in-page section navigation)
   ========================================================= */
/* ---------------------------------------------------------------
   INTEGRAZIONE RAIL ↔ FOOTER — effetto negativo reale

   Due livelli sovrapposti, identici come geometria:

     LIVELLO A — .frame-side-l / .frame-side-r, z-index 600.
       È la rail normale: fondo bianco, testo grigio, rosso attivo.
       Sta SOTTO il footer (650), quindi dove arriva il footer viene
       coperta dal nero: il footer resta pieno da bordo a bordo dello
       schermo, senza strisce bianche laterali.

     LIVELLO B — la copia .rail-neg, generata da main.js e inserita
       DENTRO <footer class="site-footer">. È position:fixed, quindi
       resta ancorata al viewport esattamente sopra il livello A, ma
       .site-footer ha clip-path:inset(0) e la ritaglia sul proprio box.
       Risultato: il livello B si vede SOLO dove c'è il nero.

   Il ritaglio è il box del footer in persona, calcolato dal browser
   nello stesso frame del footer: nessuna misura in JS, nessun ritardo,
   nessun seam. L'inversione segue la sovrapposizione geometrica reale,
   quindi funziona anche a metà lettera.
--------------------------------------------------------------- */
.frame-side-l{
  position:fixed; top:var(--frame-top); left:0; bottom:0; width:var(--frame-side);
  /* filetto verticale rimosso: resta 1px trasparente per non spostare di
     mezzo pixel il contenuto della rail (box model invariato) */
  z-index:600; background:var(--bg); border-right:1px solid transparent;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
}
.fsl-nav{ display:flex; flex-direction:column; align-items:center; gap:26px; }
.fsl-nav a{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-size:12px; font-weight:500; letter-spacing:.06em; color:var(--ink-faint);
  transition:color .35s var(--ease); display:flex; align-items:center; gap:10px;
}
.fsl-nav a .d{ width:5px; height:5px; border-radius:50%; background:var(--ink-faint); transition:background .3s, transform .3s; }
.fsl-nav a:hover{ color:var(--ink); }
.fsl-nav a.active{ color:var(--red); font-weight:600; }
.fsl-nav a.active .d{ background:var(--red); transform:scale(1.6); }

/* =========================================================
   FRAME — right sidebar (social / contact / scroll)
   ========================================================= */
.frame-side-r{
  position:fixed; top:var(--frame-top); right:0; bottom:0; width:var(--frame-side);
  /* filetto verticale rimosso — vedi nota sulla rail sinistra */
  z-index:600; background:var(--bg); border-left:1px solid transparent;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:34px 0;
}
.fsr-social{ display:flex; flex-direction:column; align-items:center; gap:22px; }
.fsr-social a{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-size:11.5px; font-weight:600; letter-spacing:.1em; color:var(--ink-faint);
  transition:color .3s;
}
.fsr-social a:hover{ color:var(--red); }
.fsr-social a.contact{ color:var(--ink); }
.fsr-social a.contact:hover{ color:var(--red); }

.fsr-scroll{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.fsr-scroll span{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-size:10px; letter-spacing:.2em; color:var(--ink-faint); text-transform:uppercase;
}
.fsr-scroll .ln{ width:1px; height:34px; background:var(--ink-faint); position:relative; overflow:hidden; }
.fsr-scroll .ln::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--red);
  animation:scrolldrip 2.2s ease-in-out infinite;
}
@keyframes scrolldrip{ 0%{ top:-100%; } 60%,100%{ top:100%; } }

/* =========================================================
   LIVELLO B — copia in negativo delle rail, ritagliata dal footer.
   Vive dentro .site-footer (che ha clip-path:inset(0)), quindi esiste
   solo dentro il box nero. Sopra il footer non viene disegnata affatto:
   lì si vede il livello A, grigio su bianco. Il passaggio segue il bordo
   del footer pixel per pixel, anche a metà lettera.
   ========================================================= */
.rail-neg{
  z-index:2;                 /* sopra il fondo del footer, dentro il suo contesto */
  background:transparent;
  pointer-events:none;       /* la colonna non intercetta nulla… */
  -webkit-user-select:none; user-select:none;
}
.rail-neg a{ pointer-events:auto; } /* …ma i link sì: il clip li limita al footer */

/* testi e segni inattivi → bianchi/chiari sul nero */
.rail-neg .fsl-nav a{ color:rgba(255,255,255,.78); }
.rail-neg .fsl-nav a .d{ background:rgba(255,255,255,.5); }
.rail-neg .fsr-social a{ color:rgba(255,255,255,.78); }
.rail-neg .fsr-social a.contact{ color:#fff; }
.rail-neg .fsr-scroll span{ color:rgba(255,255,255,.9); }
.rail-neg .fsr-scroll .ln{ background:rgba(255,255,255,.6); }
.rail-neg .fsl-nav a:hover{ color:#fff; }
.rail-neg .fsr-social a:hover{ color:var(--red); }

/* il ROSSO non si inverte mai: identico nei due livelli, e poiché i due
   livelli non si sovrappongono mai (A è coperta dal footer dove B esiste)
   non c'è doppio tratto */
.rail-neg .fsl-nav a.active{ color:var(--red); }
.rail-neg .fsl-nav a.active .d{ background:var(--red); }
.rail-neg .fsr-scroll .ln::after{ background:var(--red); }

/* mobile nav */
.mobile-nav{ display:none; }

/* =========================================================
   Layout shell
   ========================================================= */
main{
  padding-left:var(--frame-side);
  padding-right:var(--frame-side);
  padding-top:var(--frame-top);
  min-height:100vh;
  display:flex; flex-direction:column;
}
main > .site-footer{ margin-top:auto; }

/* Introductory labels site-wide share one voice: the red serif italic already
   used for the homepage byline. No rule, no uppercase — the hierarchy comes
   from the italic and the colour alone. Declared once for both selectors so
   the two can never drift apart. */
.section-label,
.split .tx .split-meta{
  font-family:var(--f-serif); font-style:italic; font-weight:400;
  font-size:clamp(17px,1.5vw,21px); line-height:1.5; letter-spacing:0;
  text-transform:none; color:var(--red); display:block;
}

/* buttons / links */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-body); font-size:13px; font-weight:600; letter-spacing:.02em;
  padding:15px 28px; border-radius:100px; border:1.5px solid var(--ink);
  color:var(--ink); transition:all .4s var(--ease);
}
.btn:hover{ background:var(--ink); color:#fff; }
.btn.solid{ background:var(--red); border-color:var(--red); color:#fff; }
.btn.solid:hover{ background:var(--red-dark); border-color:var(--red-dark); color:#fff; }
.btn .arrow{ transition:transform .4s var(--ease); }
.btn:hover .arrow{ transform:translate(3px,-3px); }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(32px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:#ddd8d0; border-radius:10px; }

/* =========================================================
   Footer
   ========================================================= */
/* =========================================================
   CLOSING PAGE — not a footer bar.
   Paper tinted with a desaturated TH4URA green, so light it reads as white
   until it sits next to the real white above it. Three tiers only: the
   statement, the one action (the address), then everything factual demoted
   to a single quiet line. No headings, no columns, no boxes.
   The TH4URA sigil sits in the corner at 6% — invisible at a glance,
   findable if you look.
   ========================================================= */
/* A red closing block. The background is the site's own accent graded down to
   75%, not a second red — derived from --red so the two can never diverge,
   with an equivalent literal as a fallback. Everything on top is white. */
/* Full-bleed closing strip. `main` is inset by the side frame, so the footer
   cancels that inset with negative margins to reach both viewport edges —
   the same technique the hero band uses. Black matches the TH4URA pill in the
   top bar, so the page opens and closes on the same value.

   The side rails are position:fixed at z-index 600; the footer simply paints
   over them at 650 (still under the fixed header at 700). Because the cover
   IS the footer's own box, the boundary is the same geometry in the same
   frame — no measuring, no scroll listener, so no one-frame lag and no
   sub-pixel seam where the rails meet the black. */
.site-footer{
  position:relative; z-index:650;
  background:#0d0d0d; color:#fff;
  margin-left:calc(-1 * var(--frame-side));
  margin-right:calc(-1 * var(--frame-side));
  padding:clamp(34px,4.4vh,52px) 60px clamp(24px,3vh,34px);
  /* ritaglia sul proprio box i figli position:fixed (le copie .rail-neg).
     inset(0) = esattamente il border box: nessun effetto visivo sul footer,
     serve solo a definire il confine dell'inversione. */
  clip-path:inset(0);
}
/* the black runs edge to edge; the composition stays inside a wide editorial
   measure so the headline can carry the section on its own */
.site-footer .sf-inner{ max-width:1240px; margin:0 auto; }

/* ---- headline: the whole hierarchy of the footer lives here ---- */
.site-footer .sf-headline{
  font-family:var(--f-display); font-weight:600; text-transform:uppercase;
  font-size:clamp(30px,7.4vw,104px); line-height:.98; letter-spacing:-.035em;
  color:#f2f2f0; margin:0;
}
.site-footer .sf-l1,
.site-footer .sf-l2{ display:block; }
/* keeps the capsule welded to "ORA." so a wrap can never strand it alone */
.site-footer .sf-tail{ white-space:nowrap; }
.site-footer .sf-accent{ color:var(--red); }

/* the photograph sits physically inside the sentence: an inline capsule
   scaled off the line's own em, so it always matches the type size */
.site-footer .sf-cap{
  display:inline-block; vertical-align:baseline;
  width:2.55em; height:.78em; margin:0 .16em -.04em;
  border-radius:999px; overflow:hidden; background:#1a1a1a;
}
.site-footer .sf-cap img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---- CTA: one link, to the contact page ---- */
.site-footer .sf-cta{
  display:flex; align-items:center; gap:16px; color:#fff;
  margin-top:clamp(30px,4.2vh,56px);
}
.site-footer .sf-dot{
  width:7px; height:7px; border-radius:50%; background:var(--red); flex:0 0 auto;
}
.site-footer .sf-cta-label{
  font-family:var(--f-body); font-size:12px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; white-space:nowrap;
}
.site-footer .sf-cta-line{ flex:1; height:1px; background:rgba(255,255,255,.22); }
.site-footer .sf-cta-arrow{ font-size:18px; line-height:1; transition:transform .4s var(--ease); }
.site-footer .sf-cta:hover .sf-cta-arrow{ transform:translateX(6px); }
.site-footer .sf-cta:hover .sf-cta-line{ background:rgba(255,255,255,.42); }

/* ---- contacts ---- */
.site-footer .sf-contacts{
  display:flex; align-items:center; justify-content:space-between; gap:18px 40px; flex-wrap:wrap;
  margin-top:clamp(26px,3.4vh,44px); padding-top:clamp(20px,2.6vh,32px);
  border-top:1px solid rgba(255,255,255,.12);
}
.site-footer .sf-mail{
  font-family:var(--f-body); font-size:clamp(15px,1.4vw,19px); color:#fff;
  transition:opacity .3s var(--ease);
}
.site-footer .sf-mail:hover{ opacity:.65; }

.site-footer .sf-social{ display:flex; align-items:center; gap:26px; }
.site-footer .sf-social a{
  display:grid; place-items:center; color:#fff;
  opacity:.9; transition:opacity .3s var(--ease);
}
.site-footer .sf-social a:hover{ opacity:1; }
.site-footer .sf-social svg{ width:24px; height:24px; display:block; }
/* the sigil is a tall, open mark: matched by optical weight rather than by the
   same box, and forced to flat white while keeping its transparency */
.site-footer .sf-sigil img{
  width:26px; height:26px; object-fit:contain; display:block;
  filter:brightness(0) invert(1);
}

.site-footer .sf-copy{
  margin:0; padding-top:clamp(16px,2.2vh,24px);
  border-top:1px solid rgba(255,255,255,.12);
  margin-top:clamp(18px,2.4vh,26px);
  text-align:center; font-size:11.5px; letter-spacing:.04em; color:rgba(255,255,255,.55);
}

/* below 1000px `main` drops its side padding, so the negative margins that
   create the full bleed must go with it or the strip overhangs the viewport */
@media (max-width:1000px){
  .site-footer{ margin-left:0; margin-right:0; }
}
@media (max-width:700px){
  .site-footer{ padding:34px 22px 26px; }
  /* email above, icons below — both left-aligned with the headline */
  .site-footer .sf-contacts{ flex-direction:column; align-items:flex-start; gap:18px; }
  .site-footer .sf-cta{ gap:12px; }
  .site-footer .sf-cta-label{ letter-spacing:.16em; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1000px){
  :root{ --frame-side:0px; --frame-top:60px; }
  .frame-side-l, .frame-side-r{ display:none; }
  main{ padding-left:0; padding-right:0; }
  .ft-nav{ display:none; }
  .ft-th4ura span.lbl{ display:none; }
  .ft-burger{
    display:flex; width:30px; height:20px; position:relative; cursor:pointer;
  }
  .ft-burger span{ position:absolute; left:0; right:0; height:2px; background:var(--ink); border-radius:2px; transition:transform .35s var(--ease), opacity .3s; }
  .ft-burger span:nth-child(1){ top:0; }
  .ft-burger span:nth-child(2){ top:9px; }
  .ft-burger span:nth-child(3){ top:18px; }
  .ft-burger.open span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
  .ft-burger.open span:nth-child(2){ opacity:0; }
  .ft-burger.open span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

  .mobile-nav{
    display:block; position:fixed; inset:0; z-index:650; background:var(--bg);
    transform:translateY(-100%); transition:transform .55s var(--ease);
    padding:100px 26px 40px; overflow:auto;
  }
  .mobile-nav.open{ transform:translateY(0); }
  .mobile-nav a{
    display:flex; gap:14px; align-items:baseline; padding:15px 0; border-bottom:1px solid var(--line);
    font-family:var(--f-display); font-size:28px; font-weight:600; color:var(--ink-dim);
  }
  .mobile-nav a .n{ font-family:var(--f-body); font-size:12px; color:var(--red); }
  .mobile-nav a.active{ color:var(--ink); }
  .mobile-nav .mth{ margin-top:26px; display:inline-flex; background:#0d0d0d; color:#c8ff5c; padding:12px 20px; border-radius:100px; font-size:14px; font-weight:600; }
}

/* =========================================================
   HOME — Echelon-style parallax grid hero
   ========================================================= */
.echo-hero{
  position:relative; height:100vh; min-height:560px; overflow:hidden;
  background:#0a0a0a; color:#fff; margin-top:calc(-1 * var(--frame-top));
  margin-left:calc(-1 * var(--frame-side)); margin-right:calc(-1 * var(--frame-side));
  cursor:grab; -webkit-user-select:none; user-select:none;
  /* Senza questo il browser considera il tocco un possibile scorrimento
     della pagina, se lo prende e manda pointercancel: il trascinamento si
     interrompeva dopo pochi pixel. Con pan-y lo scorrimento verticale
     resta al browser e il gesto orizzontale arriva a noi, che da lì in poi
     muoviamo la superficie su entrambi gli assi. */
  touch-action:pan-y;
}
.echo-hero *::selection{ background:transparent; }
.echo-hero.dragging{ cursor:grabbing; }
.echo-viewport{ position:absolute; inset:0; overflow:hidden; }
.echo-grid{
  position:absolute; left:50%; top:50%; width:280%;
  transform:translate(-50%,-50%);
  display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:auto;
  gap:56px; will-change:transform;
}
.echo-tile{
  position:relative; aspect-ratio:1/1; overflow:hidden;
  border:none; outline:none; box-shadow:none;
  -webkit-user-select:none; user-select:none;
}
.echo-tile img{
  width:100%; height:100%; object-fit:cover; pointer-events:none;
  -webkit-user-drag:none; user-select:none; border:none; outline:none; vertical-align:top;
}
.echo-center{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  text-align:center; pointer-events:none; padding:0 20px; z-index:3;
}
/* Il nome è un timbro grafico dentro il collage, non il titolo della pagina:
   sans del sito in Semibold, tracking quasi chiuso perché resti compatto, e
   il rosso pieno dell'identità contro il nero della hero.
   Nessun effetto, nessuna decorazione: il carattere nasce dal solo contrasto
   fra rosso, nero e fotografie. */
.echo-center h1{
  font-family:var(--f-display), sans-serif;
  font-size:clamp(20px,4.2vw,82px);
  font-weight:600; letter-spacing:.02em; line-height:1;
  white-space:nowrap; color:var(--red);
  /* il tracking viene aggiunto anche dopo l'ultima lettera: lo tolgo qui,
     altrimenti il blocco risulterebbe spostato a sinistra di mezzo spazio */
  margin-right:-.02em;
}
.echo-scrolldown{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:3;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#fff;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.echo-scrolldown .line{ width:1px; height:30px; background:#fff; opacity:.8; animation:echoscroll 1.8s ease-in-out infinite; }
@keyframes echoscroll{ 0%{ transform:scaleY(0); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } 50.01%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }
@media (max-width:1000px){
  .echo-grid{ width:380%; grid-template-columns:repeat(12,1fr); gap:20px; }
}

/* ---------------------------------------------------------------
   HOME — ingresso a schermo pieno e passaggio graduale al sito normale.

   L'hero era già 100vw × 100vh (i margini negativi annullano il padding di
   main su tutti e quattro i lati): a coprirlo erano solo header e rail, che
   sono position:fixed. Tutto quello che segue agisce quindi solo su opacità,
   colore e translate di elementi fuori dal flusso — nessun reflow, nessuna
   colonna riservata, nessuno scostamento orizzontale, l'hero non si stringe
   mai mentre le rail entrano.

     .home-intro              marcato inline nel <head>, prima del primo paint
     .ui-header               il menu è comparso (da 10px di scroll)
     .ui-solid                l'hero è finito: header dal tema chiaro
     .ui-rails                rail al 100%, tornano interattive
     --i-p     (0 → 1)        avanzamento della singola voce di rail, scritto
                              da main.js su ogni voce in base al progresso
                              dell'hero, con un leggero sfasamento fra l'una
                              e l'altra

   Le copie .rail-neg sono sempre escluse: appartengono all'inversione del
   footer e non c'entrano con questa transizione.
--------------------------------------------------------------- */

/* comparsa del menu */
.home-intro .frame-top{
  opacity:0; transform:translateY(-12px);
  pointer-events:none; visibility:hidden;
  transition:opacity .32s var(--ease-soft), transform .32s var(--ease-soft),
             background-color .45s var(--ease-soft), border-color .45s var(--ease-soft),
             visibility 0s linear .32s;
}
.home-intro.ui-header .frame-top{
  opacity:1; transform:none;
  pointer-events:auto; visibility:visible;
  transition:opacity .32s var(--ease-soft), transform .32s var(--ease-soft),
             background-color .45s var(--ease-soft), border-color .45s var(--ease-soft),
             visibility 0s;
}

/* sopra l'hero il menu galleggia sulla fotografia: fondo trasparente, nessun
   filetto, testo bianco. Il rosso della numerazione resta il rosso del sito. */
.home-intro:not(.ui-solid) .frame-top{
  background:transparent;
  border-bottom-color:transparent;
}
.home-intro:not(.ui-solid) .ft-logo,
.home-intro:not(.ui-solid) .ft-nav > a,
.home-intro:not(.ui-solid) .ft-nav > a.active{ color:#fff; }
.home-intro:not(.ui-solid) .ft-nav > a:hover{ color:#fff; background:rgba(255,255,255,.14); }
.home-intro:not(.ui-solid) .ft-burger span{ background:#fff; }
.home-intro .ft-logo,
.home-intro .ft-nav > a,
.home-intro .ft-burger span{
  transition:color .45s var(--ease-soft), background-color .45s var(--ease-soft);
}

/* LA HERO È UN SIPARIO.

   Le rail sono position:fixed con z-index 600, quindi dipingerebbero SOPRA
   la hero, che sta in flusso normale dentro <main> con z-index auto: è per
   questo che le voci si vedevano stampate sul nero. Durante l'intro le
   riporto a z-index:auto — restando posizionate dipingono in ordine di
   documento, e <aside> viene prima di <main>: la hero le copre davvero.

   L'occlusione è quindi la hero stessa, con la sua geometria reale, risolta
   dal browser nello stesso frame: nessuna maschera da sincronizzare, nessun
   ritardo, e nessuna porzione di testo può finire sopra il nero. Man mano
   che la hero sale, scopre progressivamente ciò che sta sotto.

   Il fondo delle rail non viene animato: resta il bianco normale del sito,
   invisibile perché sotto la hero e indistinguibile dalla pagina bianca una
   volta scoperto. Nessuna fascia, nessun pannello, nessun gradiente. */
.home-intro:not(.ui-rails) .frame-side-l:not(.rail-neg),
.home-intro:not(.ui-rails) .frame-side-r:not(.rail-neg){
  z-index:auto;
}

/* Alla rivelazione si somma un piccolo movimento verticale: le voci partono
   più in basso e salgono, con un avanzamento --i-p calcolato da main.js sul
   progresso reale dello scroll. Se lo scroll si ferma il movimento si ferma,
   se torna indietro si inverte: nessuna animazione a tempo, nessuna classe
   one-shot. Si animano solo testi e pallini, mai un contenitore. */
.home-intro .frame-side-l:not(.rail-neg) .fsl-nav a,
.home-intro .frame-side-r:not(.rail-neg) .fsr-social a{
  opacity:var(--i-p, 0);
  transform:translateY(calc((1 - var(--i-p, 0)) * 24px)) rotate(180deg);
}
.home-intro .frame-side-r:not(.rail-neg) .fsr-scroll{
  opacity:var(--i-p, 0);
  transform:translateY(calc((1 - var(--i-p, 0)) * 24px));
}
/* stato finale: identico a quello delle altre pagine, nessun residuo */
.home-intro.ui-rails .frame-side-l:not(.rail-neg) .fsl-nav a,
.home-intro.ui-rails .frame-side-r:not(.rail-neg) .fsr-social a{
  opacity:1; transform:rotate(180deg);
}
.home-intro.ui-rails .frame-side-r:not(.rail-neg) .fsr-scroll{
  opacity:1; transform:none;
}

.split{
  display:grid; grid-template-columns:1fr 1fr; gap:70px; padding:120px 60px; align-items:center;
}
.split .ph{ border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:4/5; }
.split .ph img{ width:100%; height:100%; object-fit:cover; }

/* ---- carosello "Chi sono" ------------------------------------------
   Le fotografie sono quadrate: il riquadro prende la stessa proporzione,
   così nessuna viene tagliata. I comandi stanno sotto l'immagine, non
   sopra: niente chrome bianco che deve lottare col contrasto della foto.
   Senza JS resta la prima fotografia, il riquadro non cambia. */
.split .ph.cr{ border-radius:0; overflow:visible; aspect-ratio:auto; }
.cr-frame{
  position:relative; aspect-ratio:1/1;
  border-radius:var(--radius-xl); overflow:hidden;
  cursor:grab;
  /* il trascinamento orizzontale è nostro, quello verticale resta alla
     pagina: così sul telefono si continua a scorrere normalmente */
  touch-action:pan-y;
}
.cr.is-drag .cr-frame{ cursor:grabbing; }
.cr.is-drag{ user-select:none; -webkit-user-select:none; }

.cr-slide{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0;
  transition:opacity .7s var(--ease-soft), transform .7s var(--ease-soft);
  user-select:none; -webkit-user-select:none;
  -webkit-user-drag:none;
}
.cr-slide.is-on{ opacity:1; }

.cr-bar{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  margin-top:18px;
}
.cr-dots{ display:flex; align-items:center; gap:9px; }
.cr-dot{
  width:7px; height:7px; padding:0; border:none; border-radius:50%;
  background:var(--line); cursor:pointer;
  transition:background .25s var(--ease-soft), transform .25s var(--ease-soft);
}
.cr-dot:hover{ background:var(--ink-faint); }
.cr-dot.is-on{ background:var(--red); transform:scale(1.25); }

.cr-arrows{ display:flex; align-items:center; gap:6px; }
.cr-arw{
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  padding:0; border:none; background:none; cursor:pointer;
  font-family:var(--f-body); font-size:15px; line-height:1;
  color:var(--red); opacity:.75;
  transition:opacity .25s var(--ease-soft), transform .25s var(--ease-soft);
}
.cr-arw:hover{ opacity:1; }
.cr-prev:hover{ transform:translateX(-3px); }
.cr-next:hover{ transform:translateX(3px); }

@media (prefers-reduced-motion:reduce){
  .cr-slide{ transition:none; }
}
.split .tx .section-label{ margin-bottom:22px; }
.split .tx .split-meta{ max-width:480px; margin-bottom:24px; }
.split .tx h2{ font-size:clamp(28px,3.6vw,46px); line-height:1.08; font-weight:600; margin-bottom:26px; }
.split .tx p{ color:var(--ink-dim); font-size:16px; line-height:1.75; max-width:480px; margin-bottom:16px; }
@media (max-width:1000px){ .split{ grid-template-columns:1fr; padding:70px 22px; gap:36px; } }

.services{ padding:40px 60px 120px; }

/* Le tre fasi non sono più card: nessun bordo, nessun raggio, nessuna ombra,
   nessun fondo a riposo. Sono tre colonne della stessa griglia editoriale.
   gap:0 e i margini negativi servono proprio a questo: il testo della prima
   colonna resta allineato al titolo "Il mio approccio", mentre il blocco che
   si accende in hover arriva fino al bordo della sua colonna, senza le
   scanalature che facevano leggere tre riquadri separati. */
.services .grid3{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  /* il margine superiore compensa il padding ridotto della colonna: il
     testo resta dov'era, si stringe solo il rosso */
  margin:18px -28px 0;
}
.service-card{
  position:relative; padding:22px 28px 24px;
  transition:color .38s var(--ease-soft);
}
/* il blocco rosso è dipinto da uno pseudo-elemento: si espande in verticale
   con una scala, quindi non sposta di un pixel né le colonne vicine né le
   sezioni sotto. Nessun rimbalzo, nessuna scala vistosa. */
.service-card::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:var(--red); opacity:0; transform:scaleY(.92);
  transition:opacity .38s var(--ease-soft), transform .38s var(--ease-soft);
}
.service-card > *{ position:relative; z-index:1; }
/* il rosso arriva al bordo della colonna e basta: niente sbordo oltre il
   padding, che sommandosi apriva un vuoto di mezzo centimetro sopra il
   numero e sotto l'ultima riga. Resta una scala, quindi non sposta nulla. */
.service-card:hover::before{ opacity:1; transform:scaleY(1); }

.service-card .num{
  font-family:var(--f-body); font-size:12px; color:var(--red); font-weight:700;
  transition:color .38s var(--ease-soft);
}
.service-card h3{
  font-size:26px; margin:22px 0 14px; font-weight:600; color:var(--ink);
  transition:color .38s var(--ease-soft);
}
.service-card p{
  color:var(--ink-dim); font-size:14.5px; line-height:1.65;
  transition:color .38s var(--ease-soft);
}
/* in hover si accende solo la colonna sotto il puntatore: le altre due
   restano bianche e ferme */
.service-card:hover .num,
.service-card:hover h3,
.service-card:hover p{ color:#fff; }

@media (max-width:1000px){
  .services{ padding:20px 22px 70px; }
  /* impilate: stesso principio, il blocco rosso arriva ai bordi dello schermo */
  .services .grid3{ grid-template-columns:1fr; margin:6px -22px 0; }
  .service-card{ padding:30px 22px 34px; }
}

.works-teaser{ padding:40px 60px 130px; }
.works-teaser .wt-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:40px; }
/* "Il mio approccio" and "Progetti selezionati" are peer section titles on the
   homepage, so they share one declaration and cannot drift apart. Both sit
   flush left above their grid, with the same 40px to the content below —
   .wt-head carries it as margin-bottom; under .grid3 the same 40px is split
   between its 6px margin-top and the 34px top padding of each column, so the
   red hover block has room above the number without moving the text. */
.works-teaser .wt-head h2,
.services .sv-head h2{ font-size:clamp(28px,4vw,52px); font-weight:600; }
.wt-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.wt-card{ position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:3/4; }
.wt-card img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.wt-card:hover img{ transform:scale(1.08); }
.wt-card .wt-tag{
  position:absolute; left:16px; bottom:16px; font-size:11px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; padding:9px 16px; border-radius:100px; background:rgba(255,255,255,.9); color:var(--ink);
}
@media (max-width:1000px){ .works-teaser{ padding:20px 22px 70px; } .wt-grid{ grid-template-columns:1fr 1fr; } }
/* Su telefono il pulsante sta sotto le fotografie, non incastrato fra il
   titolo e la prima scheda. display:contents scioglie il contenitore
   dell'intestazione: titolo e pulsante diventano figli diretti della sezione
   e l'ordine può metterli prima e dopo la griglia. Il desktop non è toccato. */
@media (max-width:768px){
  .works-teaser{ display:flex; flex-direction:column; }
  .works-teaser .wt-head{ display:contents; }
  .works-teaser .wt-head h2{ order:1; margin-bottom:24px; }
  .works-teaser .wt-grid{ order:2; }
  .works-teaser .wt-head .btn{ order:3; margin-top:26px; align-self:flex-start; }
}
@media (max-width:560px){ .wt-grid{ grid-template-columns:1fr; } }

/* La chiusura di ogni pagina è ora il footer condiviso: la vecchia
   .cta-band ("Hai un progetto?" / "Ti va di aggiungere il tuo progetto qui?"
   / "Parliamo del tuo progetto?") è stata rimossa da home, progetti e metodo
   perché duplicava l'invito che il footer già porta. */

/* =========================================================
   WORKS — list + floating cursor preview
   ========================================================= */
.works-hero{ padding:70px 60px 30px; }
.works-hero h1{ font-size:clamp(38px,7vw,96px); font-weight:700; line-height:1; }
.works-hero p{ color:var(--ink-dim); max-width:520px; margin-top:20px; font-size:15px; line-height:1.7; }

.works-list{ position:relative; padding:30px 60px 90px; }
.wl-group-head{ padding:40px 6px 14px; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); scroll-margin-top:100px; }
.wl-rows{ border-top:1px solid var(--line); }
.wl-row{
  display:flex; align-items:center; gap:26px; padding:28px 6px; border-bottom:1px solid var(--line);
  cursor:pointer; position:relative; transition:padding .4s var(--ease);
}
.wl-row:hover{ padding-left:22px; }
.wl-row .wl-index{ font-size:12px; color:var(--red); font-weight:700; width:26px; }
.wl-row .wl-name{
  font-family:var(--f-display); font-size:clamp(24px,4vw,48px); font-weight:600; flex:1;
  color:var(--ink); transition:color .4s var(--ease);
}
.wl-row:hover .wl-name{ color:var(--red); }
.wl-row .wl-meta{ font-size:11px; font-weight:600; letter-spacing:.08em; color:var(--ink-faint); text-transform:uppercase; display:none; }
.wl-row .wl-arrow{ font-size:20px; color:var(--ink-faint); transition:transform .4s var(--ease), color .4s; }
.wl-row:hover .wl-arrow{ transform:rotate(45deg); color:var(--red); }
@media (min-width:700px){ .wl-row .wl-meta{ display:block; } }

.wl-preview{
  position:fixed; top:0; left:0; width:320px; height:410px; border-radius:var(--radius-lg);
  overflow:hidden; pointer-events:none; z-index:400; opacity:0; transform:translateY(-100%) scale(.92);
  transform-origin:bottom left;
  transition:opacity .45s var(--ease), transform .45s var(--ease);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.35);
}
.wl-preview.show{ opacity:1; transform:translateY(-100%) scale(1); }
.wl-preview img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .5s var(--ease);
}
.wl-preview img.active{ opacity:1; }
@media (max-width:1000px){ .wl-preview{ display:none; } .wl-row:hover{ padding-left:6px; } }

/* =========================================================
   WORK DETAIL page (standalone project page)
   ========================================================= */
/* niente più colonna dei metadati a fianco: il titolo occupa la sua riga
   per intero, senza colonna vuota residua */
.wd-hero{ padding:110px 60px 40px; }
.wd-hero .wd-cat{ margin-bottom:20px; }
.wd-hero h1{ font-size:clamp(36px,6.4vw,88px); font-weight:700; line-height:1; }
@media (max-width:1000px){ .wd-hero{ padding:80px 22px 20px; } }

/* =========================================================
   EXHIBIT — free editorial composition (project galleries)
   No grid, no masonry, no equal spacing: a hand-tuned bank of
   size/alignment/rhythm variants cycles per photograph so the
   sequence never repeats a pattern within a project.
   ========================================================= */
.exhibit{ position:relative; width:100%; padding:2vw 6vw 14vw; max-width:1680px; margin:0 auto; }
.exhibit-item{
  position:relative; display:block; margin:0; width:56%;
  transition-property:opacity, transform;
}
.exhibit-item img{
  width:100%; height:auto; display:block; -webkit-user-drag:none;
  transition:transform .4s var(--ease-soft);
}
.exhibit-item:hover img{ transform:scale(1.02); }

.exhibit-item + .exhibit-item{ margin-top:11vw; }
.exhibit-item:nth-child(8n+1){ width:58%; margin-left:auto; margin-right:auto; }
.exhibit-item:nth-child(8n+2){ width:37%; margin-left:5%; margin-right:auto; margin-top:7vw; }
.exhibit-item:nth-child(8n+3){ width:45%; margin-left:auto; margin-right:7%; margin-top:10vw; }
.exhibit-item:nth-child(8n+4){ width:79%; margin-left:auto; margin-right:auto; margin-top:13vw; }
.exhibit-item:nth-child(8n+5){ width:29%; margin-left:11%; margin-right:auto; margin-top:-6vw; z-index:2; }
.exhibit-item:nth-child(8n+6){ width:49%; margin-left:auto; margin-right:15%; margin-top:10vw; }
.exhibit-item:nth-child(8n+7){ width:61%; margin-left:19%; margin-right:auto; margin-top:9vw; }
.exhibit-item:nth-child(8n){ width:35%; margin-left:auto; margin-right:23%; margin-top:-5vw; z-index:2; }

/* =========================================================
   Elemento editoriale a piena larghezza dentro il mosaico.
   column-span:all è il meccanismo nativo del layout a colonne: interrompe il
   flusso senza toccare la griglia esistente. Lo spread mantiene il suo
   rapporto originale, quindi nessun crop e nessuna deformazione.
   ========================================================= */
.mosaic-gallery .mg-grid .mg-feature{
  column-span:all; break-inside:avoid;
  margin:clamp(30px,4.5vw,80px) 0;
}
.mosaic-gallery .mg-grid .mg-feature img{
  width:100%; height:auto; display:block;
}

/* La Creative Collection usa la stessa masonry delle altre gallerie
   fotografiche: il layout a tre colonne editoriali che stava qui è stato
   sostituito, quindi le sue regole sono state rimosse. */

@media (max-width:1000px){
  .exhibit{ padding:10vw 7vw 24vw; }
  .exhibit-item + .exhibit-item{ margin-top:20vw; }
  .exhibit-item:nth-child(8n+1){ width:88%; }
  .exhibit-item:nth-child(8n+2){ width:62%; margin-left:0; margin-top:14vw; }
  .exhibit-item:nth-child(8n+3){ width:70%; margin-right:0; margin-top:16vw; }
  .exhibit-item:nth-child(8n+4){ width:94%; margin-top:18vw; }
  .exhibit-item:nth-child(8n+5){ width:58%; margin-left:0; margin-top:-2vw; }
  .exhibit-item:nth-child(8n+6){ width:66%; margin-right:0; margin-top:15vw; }
  .exhibit-item:nth-child(8n+7){ width:80%; margin-left:6%; margin-top:14vw; }
  .exhibit-item:nth-child(8n){ width:60%; margin-right:0; margin-top:0; }
}

/* ---------- custom cursor: "View" label on exhibit photographs ---------- */
.cursor.view{
  width:74px; height:74px; background:var(--ink); opacity:1;
  display:flex; align-items:center; justify-content:center;
}
.cursor.view::after{
  content:'View'; color:#fff; font-family:var(--f-body); font-size:11px;
  letter-spacing:.08em; text-transform:uppercase;
}

/* ---------- fullscreen viewer: shared-element transition, minimal chrome ---------- */
.exhibit-viewer{
  position:fixed; inset:0; z-index:950; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .45s var(--ease), visibility 0s .45s;
}
.exhibit-viewer.open{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .45s var(--ease); }
.ev-backdrop{ position:absolute; inset:0; background:rgba(8,8,8,.86); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }
.ev-stage{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:6vh 6vw; }
.ev-img{ max-width:88vw; max-height:86vh; width:auto; height:auto; object-fit:contain; display:block; }
.ev-close,.ev-nav{
  position:fixed; width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  border:none; background:none; color:#fff; font-size:16px; opacity:.6; cursor:pointer;
  transition:opacity .3s;
}
.ev-close:hover,.ev-nav:hover{ opacity:1; }
.ev-close{ top:22px; right:22px; font-size:15px; }
.ev-nav{ top:50%; transform:translateY(-50%); font-size:20px; font-weight:300; }
.ev-prev{ left:18px; }
.ev-next{ right:18px; }
.ev-count{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  font-family:var(--f-body); font-size:11px; letter-spacing:.1em; color:rgba(255,255,255,.55);
}
@media (max-width:700px){ .ev-nav{ display:none; } .ev-stage{ padding:4vh 5vw; } }

/* =========================================================
   MOSAIC GALLERY — project index row + dense masonry.
   The index row lists every project with the current one in full black
   and the rest greyed back, set in the site's body face like the other
   navs and labels. The photos sit in an edge-to-edge column masonry with
   a hairline gutter. No scroll effect: the composition is the piece.
   ========================================================= */
.mosaic-gallery{ position:relative; width:100%; padding:6vw 0 12vw; }

.mg-head{ padding:0 8px 2.4vw; }
.mg-index{
  display:flex; justify-content:center; align-items:baseline;
  flex-wrap:wrap; gap:14px 30px;
}
.mg-index a{
  font-family:var(--f-body); font-weight:600; text-transform:uppercase;
  font-size:12px; line-height:1; letter-spacing:.14em;
  color:var(--ink-faint); transition:color .35s var(--ease-soft);
}
.mg-index a:hover{ color:var(--ink-dim); }
.mg-index a.current{ color:var(--ink); }

/* Masonry vera: le colonne si adattano alle fotografie, non il contrario.
   Nessun aspect-ratio imposto e nessun object-fit:cover — ogni scatto tiene
   le sue proporzioni. Le immagini portano width/height nel markup, quindi
   il browser conosce l'altezza di ciascuna già prima del caricamento e
   bilancia le colonne correttamente anche con il lazy loading.
   L'ordine nel DOM non cambia: il viewer a schermo intero continua a
   scorrere le foto nella sequenza giusta.                                */
/* colonne e gutter vivono in due variabili: le legge il CSS per la resa
   di base e le rilegge masonry.js per collocare le foto. Un solo punto
   di verità, quindi i due layout non possono divergere. */
/* --mg-feature-gap resta un valore in px semplice, non un clamp(): masonry.js
   lo legge con parseFloat e le custom property non vengono risolte. */
.mosaic-gallery{ --mg-gap:12px; --mg-cols:5; --mg-feature-gap:64px; }
.mosaic-gallery.cols-4{ --mg-cols:4; }
.mosaic-gallery.cols-3{ --mg-cols:3; }

.mg-grid{
  column-count:var(--mg-cols); column-gap:var(--mg-gap);
  padding:0 var(--mg-gap);
}
.mosaic-gallery .mg-grid .exhibit-item{
  break-inside:avoid; -webkit-column-break-inside:avoid;
  display:block; width:100%; margin:0 0 var(--mg-gap);
  overflow:hidden; aspect-ratio:auto;
}
.mosaic-gallery .mg-grid .exhibit-item img{
  width:100%; height:auto; display:block; object-fit:fill; -webkit-user-drag:none;
}

/* masonry vera, accesa da masonry.js: ogni foto va nella colonna più corta
   in quel momento, così le colonne arrivano in fondo quasi alla pari e non
   resta la fascia bianca in basso a destra. Le colonne CSS qui sopra
   restano come resa di base se lo script non parte. */
/* stessa specificità della regola di .mg-feature, ma più in basso nel
   foglio: così anche il margine dello spread viene azzerato, altrimenti su
   un elemento assoluto si somma al top e lo spread scende sulle foto. */
.mg-grid.is-masonry{ position:relative; columns:auto; }
.mosaic-gallery .mg-grid.is-masonry > *{ position:absolute; margin:0; }

/* schermi molto larghi: una colonna in più invece di foto sovradimensionate */
@media (min-width:1700px){
  .mosaic-gallery,
  .mosaic-gallery.cols-4{ --mg-cols:6; }
  .mosaic-gallery.cols-3{ --mg-cols:4; }
}
@media (max-width:1100px){
  .mosaic-gallery,
  .mosaic-gallery.cols-4,
  .mosaic-gallery.cols-3{ --mg-gap:10px; --mg-cols:3; --mg-feature-gap:44px; }
}
@media (max-width:700px){
  .mosaic-gallery{ padding:10vw 0 18vw; }
  .mosaic-gallery,
  .mosaic-gallery.cols-4,
  .mosaic-gallery.cols-3{ --mg-gap:8px; --mg-cols:2; --mg-feature-gap:30px; }
  .mg-index{ gap:12px 18px; }
}

/* =========================================================
   JEWELRY — tavola espositiva.
   Non è una masonry: sono quattro fasce orizzontali, ognuna con la sua
   linea di allineamento, alternata fra piede e testa. Le fotografie hanno
   larghezze diverse e altezza libera, quindi dentro la fascia le altezze
   variano ma il filo di allineamento resta uno solo.
   Le larghezze sono percentuali della tavola: nessun ritaglio, nessun
   riquadro con proporzione imposta, nessuna etichetta sopra le foto.
   Ogni fascia parte da un rientro diverso: il ritmo sta lì, non in
   dimensioni casuali.
   ========================================================= */
.jw-table{
  --jw-gap:clamp(12px,1.3vw,20px);
  --jw-band-gap:clamp(40px,4.4vw,68px);
  max-width:1240px; margin:clamp(20px,2.6vw,40px) auto 0;
  /* il margine negativo delle fasce fa sporgere il loro contenitore oltre
     la tavola: le fotografie restano dentro, ma senza questo comparirebbe
     una barra di scorrimento orizzontale */
  overflow:hidden;
}
.jw-band{ display:flex; gap:var(--jw-gap); }
.jw-band + .jw-band{ margin-top:var(--jw-band-gap); }

/* le fasce dispari si appoggiano al piede, le pari alla testa */
.jw-b1, .jw-b3{ align-items:flex-end; }
.jw-b2, .jw-b4{ align-items:flex-start; }

/* Rientri piccoli e controllati: sinistra, dentro, sinistra, a destra.
   Il margine negativo a destra serve a non restringere la fascia: senza,
   le percentuali delle foto si calcolerebbero su una tavola più stretta e
   la stessa classe di misura darebbe larghezze diverse da fascia a fascia.
   Così il rientro sposta soltanto, e le misure restano confrontabili. */
.jw-b1{ margin-left:0; }
.jw-b2{ margin-left:8%;  margin-right:-8%; }
.jw-b3{ margin-left:2%;  margin-right:-2%; }
.jw-b4{ margin-left:15%; margin-right:-15%; }

/* qui .exhibit-item deve perdere le larghezze della composizione verticale
   usata altrove nel sito: tre classi per vincere sulle regole nth-child */
.jw-table .jw-band .exhibit-item{ flex:0 0 auto; margin:0; overflow:hidden; }
.jw-table .jw-band .exhibit-item img{ width:100%; height:auto; display:block; }

/* scala: prodotto piccolo, still life medio, ambientata grande.
   Stessa specificità della regola qui sopra, altrimenti la larghezza
   verrebbe sovrascritta e le figure collasserebbero. */
.jw-table .jw-band > .jw-xs{ width:17%; }
.jw-table .jw-band > .jw-s { width:20%; }
.jw-table .jw-band > .jw-m { width:24%; }
.jw-table .jw-band > .jw-l { width:28%; }
.jw-table .jw-band > .jw-xl{ width:30%; }

/* Intervallo chiuso invece di un solo limite superiore: senza il minimo,
   queste regole più specifiche sopravvivevano anche sotto i 700px e il
   blocco mobile non riusciva a sovrascriverle. */
@media (min-width:769px) and (max-width:1180px){
  /* Due o tre per fascia: quelle da quattro vanno a capo in due coppie,
     quelle da tre restano in linea. Con flex-wrap ogni riga mantiene il
     proprio allineamento, quindi il principio non si perde.
     I selettori ripetono .jw-band per pareggiare la specificità delle
     classi di misura qui sopra, altrimenti restano le misure da desktop. */
  .jw-band{ flex-wrap:wrap; row-gap:var(--jw-gap); }
  .jw-b2{ margin-left:5%; margin-right:-5%; }
  .jw-b3{ margin-left:2%; margin-right:-2%; }
  .jw-b4{ margin-left:8%; margin-right:-8%; }

  .jw-table .jw-band.jw-b1 > *,
  .jw-table .jw-band.jw-b3 > *{ width:44%; }
  .jw-table .jw-band.jw-b1 > *:nth-child(even),
  .jw-table .jw-band.jw-b3 > *:nth-child(even){ width:50%; }

  .jw-table .jw-band.jw-b2 > .jw-m { width:28%; }
  .jw-table .jw-band.jw-b2 > .jw-xl{ width:34%; }
  .jw-table .jw-band.jw-b2 > .jw-s { width:26%; }
  .jw-table .jw-band.jw-b4 > .jw-s { width:26%; }
  .jw-table .jw-band.jw-b4 > .jw-l { width:34%; }
  .jw-table .jw-band.jw-b4 > .jw-m { width:28%; }
}
/* ---- Jewelry sotto i 768px ------------------------------------------
   Le fasce affiancate qui non reggono: le fotografie scendevano sotto i
   170px e fra una e l'altra restavano vuoti più grandi delle immagini.
   Su telefono ogni fascia diventa una colonna sola, ma non una griglia:
   le larghezze restano fra il 74% e il 100%, gli allineamenti si alternano
   fra sinistra e destra e qualche scatto sfiora il bordo. Il carattere
   asimmetrico resta, la dispersione no. Ordine e contenuti invariati. */
@media (max-width:768px){
  .jw-table{ --jw-band-gap:clamp(34px,9vw,56px); overflow:visible; }
  .jw-band{ display:block; margin-left:0; margin-right:0; }
  .jw-table .jw-band > .exhibit-item{
    display:block; width:auto; margin:0 0 clamp(20px,5.5vw,32px);
  }
  .jw-table .jw-band > .exhibit-item:last-child{ margin-bottom:0; }

  /* fascia 01 — apre larga, poi rientra a destra, poi piena */
  .jw-table .jw-b1 > *:nth-child(1){ width:90%; }
  .jw-table .jw-b1 > *:nth-child(2){ width:74%; margin-left:auto; }
  .jw-table .jw-b1 > *:nth-child(3){ width:100%; }
  .jw-table .jw-b1 > *:nth-child(4){ width:78%; margin-left:auto; margin-right:6%; }

  /* fascia 02 — la fotografia in natura si prende tutta la riga */
  .jw-table .jw-b2 > *:nth-child(1){ width:82%; margin-left:8%; }
  .jw-table .jw-b2 > *:nth-child(2){ width:100%; }
  .jw-table .jw-b2 > *:nth-child(3){ width:74%; margin-left:auto; }

  /* fascia 03 — quattro pezzi, respiro alternato */
  .jw-table .jw-b3 > *:nth-child(1){ width:96%; }
  .jw-table .jw-b3 > *:nth-child(2){ width:76%; margin-left:auto; }
  .jw-table .jw-b3 > *:nth-child(3){ width:84%; margin-left:5%; }
  .jw-table .jw-b3 > *:nth-child(4){ width:100%; }

  /* fascia 04 — su telefono la campagna con la cornice gialla non c'è,
     quindi a chiudere è la collana, a piena larghezza */
  .jw-table .jw-b4 > *:nth-child(1){ width:78%; margin-left:auto; }
  .jw-table .jw-b4 > *:nth-child(2){ display:none; }
  .jw-table .jw-b4 > *:nth-child(3){ width:100%; margin-left:0; }
}

/* Navigazione fra progetti: precedente a sinistra, successivo a destra.
   Fondo bianco come il resto della pagina e nessun filetto: a staccarla
   dalla gallery basta lo spazio. L'etichetta e la freccia usano il rosso
   del sito attenuato dall'opacità — nessun secondo rosso introdotto — e al
   passaggio del mouse va a pieno insieme al nome. */
.wd-nav{
  display:flex; justify-content:space-between; align-items:flex-start; gap:40px;
  padding:44px 60px;
}
.wd-nav a{ display:block; max-width:46%; }
.wd-nav-next{ text-align:right; }

.wd-nav .lbl{
  display:flex; align-items:center; gap:9px; margin-bottom:9px;
  font-family:var(--f-body); font-size:11px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--red); opacity:.75;
  transition:opacity .25s var(--ease-soft);
}
.wd-nav-next .lbl{ justify-content:flex-end; }
.wd-nav .arw{ display:inline-block; font-size:13px; line-height:1;
  transition:transform .25s var(--ease-soft); }

.wd-nav .nm{
  display:block; font-family:var(--f-display); font-weight:600; line-height:1.1;
  font-size:clamp(18px,2.4vw,28px); color:var(--ink);
  transition:color .25s var(--ease-soft);
}

.wd-nav a:hover .lbl{ opacity:1; }
.wd-nav a:hover .nm{ color:var(--red); }
.wd-nav-prev:hover .arw{ transform:translateX(-4px); }
.wd-nav-next:hover .arw{ transform:translateX(4px); }

@media (max-width:1000px){
  .wd-nav{ padding:34px 22px; flex-direction:column; align-items:stretch; gap:26px; }
  .wd-nav a{ max-width:none; }
  .wd-nav-next{ text-align:left; }
  .wd-nav-next .lbl{ justify-content:flex-start; }
}

/* =========================================================
   METHOD
   ========================================================= */
.method-hero{ padding:110px 60px 20px; }
.method-hero h1{ font-size:clamp(36px,7vw,92px); font-weight:700; line-height:1; }
.method-hero p{ color:var(--ink-dim); max-width:560px; margin-top:20px; font-size:15px; line-height:1.7; }

.method-wrap{ display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; padding:40px 60px 120px; align-items:start; }
.method-sticky{ position:sticky; top:calc(var(--frame-top) + 40px); border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:4/5; background:var(--panel); }
.method-sticky .msi-wrap{ position:relative; width:100%; height:100%; }
.method-sticky img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .7s var(--ease); }
.method-sticky img.active{ opacity:1; }

.m-step{ padding:50px 0; border-bottom:1px solid var(--line); transition:opacity .5s; opacity:.4; scroll-margin-top:110px; }
.m-step.active{ opacity:1; }
.m-step .m-num{ font-size:13px; color:var(--red); font-weight:700; margin-bottom:14px; display:block; }
.m-step h3{ font-size:clamp(24px,3vw,36px); font-weight:700; margin-bottom:16px; }
.m-step p{ color:var(--ink-dim); font-size:15.5px; line-height:1.75; max-width:520px; }
.m-step:first-child{ padding-top:0; }
@media (max-width:1000px){
  .method-wrap{ grid-template-columns:1fr; padding:30px 22px 70px; }
  .method-sticky{ position:relative; top:0; aspect-ratio:16/10; }
}

/* =========================================================
   CONTACT
   ========================================================= */
/* The contact page is short, so `main`'s min-height:100vh used to leave the
   slack as one dead gap above the footer. The vertical rhythm below is sized
   in vh so the content itself breathes into that space and the footer lands
   at the bottom of the viewport rather than being pushed there. */
.contact-hero{ padding:clamp(56px,6.5vh,96px) 60px clamp(24px,3.2vh,42px); scroll-margin-top:100px; margin-top:auto; }
.contact-hero .section-label{ margin-bottom:14px; }
/* same intro-paragraph treatment as the Works and Method heroes */
.contact-hero p{ color:var(--ink-dim); max-width:560px; margin-top:18px; font-size:15px; line-height:1.7; }
.contact-hero h1{ font-size:clamp(26px,4.4vw,52px); font-weight:700; line-height:1.06; max-width:1100px; }

/* un unico profilo rosso attorno al form: cambia solo il colore del bordo
   esterno. Spessore, raggio, margini e tutto il resto restano quelli di prima,
   e le linee dei campi qui dentro rimangono neutre. */
.contact-toggle{
  margin:clamp(26px,4vh,46px) 60px; border:1.5px solid var(--red); border-radius:var(--radius-xl);
  transition:border-color .5s var(--ease); scroll-margin-top:100px; overflow:hidden;
}
/* il form è visibile da subito: il passaggio "Contattami" è stato rimosso.
   .contact-toggle resta il contenitore grande con bordo e raggio — il form
   non è stato ridisegnato in nessuna sua parte. */
.contact-inquiry{ padding:44px; }
.contact-inquiry .cf-row{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:26px; }
.contact-inquiry label{ display:block; font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:10px; }
.contact-inquiry input, .contact-inquiry select, .contact-inquiry textarea{
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--line); color:var(--ink);
  font-family:var(--f-body); font-size:16px; padding:12px 2px; outline:none; transition:border-color .3s;
}
.contact-inquiry select{ cursor:pointer; }
.contact-inquiry input:focus, .contact-inquiry select:focus, .contact-inquiry textarea:focus{ border-color:var(--red); }
.contact-inquiry textarea{ resize:vertical; min-height:100px; }
.contact-inquiry .cf-full{ margin-bottom:28px; }

/* privacy consent — the generic field rules above style labels as uppercase
   micro-captions and inputs as full-width underlines, so both are reset here
   for a readable sentence next to a real checkbox. */
.contact-inquiry .cf-consent{ display:flex; align-items:flex-start; gap:13px; margin-bottom:30px; }
.contact-inquiry .cf-consent input[type="checkbox"]{
  appearance:none; -webkit-appearance:none;
  flex:0 0 auto; width:18px; height:18px; margin:2px 0 0; padding:0;
  border:1.5px solid var(--line); border-radius:5px; background:transparent;
  position:relative; cursor:pointer; transition:border-color .3s, background .3s;
}
.contact-inquiry .cf-consent input[type="checkbox"]:hover{ border-color:var(--ink-faint); }
.contact-inquiry .cf-consent input[type="checkbox"]:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }
.contact-inquiry .cf-consent input[type="checkbox"]:checked{ background:var(--red); border-color:var(--red); }
.contact-inquiry .cf-consent input[type="checkbox"]:checked::after{
  content:''; position:absolute; left:5px; top:1px; width:4px; height:9px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}
/* quiet reassurance under the submit button — smallest voice on the page */
.contact-inquiry .cf-note{
  margin-top:18px; font-size:12px; line-height:1.6; color:var(--ink-faint); max-width:520px;
}
.contact-inquiry .cf-consent label{
  margin:0; cursor:pointer;
  font-size:13px; font-weight:400; line-height:1.6; letter-spacing:0;
  text-transform:none; color:var(--ink-dim);
}
/* ---- stati del form: errore, invio, esito -------------------------------
   Nessun ridisegno: si aggiungono soltanto i messaggi, nella voce più
   piccola della pagina e nel rosso già in uso. Il campo in errore cambia
   solo il colore della propria linea. */
.contact-inquiry .cf-err{
  margin:8px 0 0; font-family:var(--f-body); font-size:12px; line-height:1.5;
  color:var(--red); text-transform:none; letter-spacing:0; font-weight:500;
}
.contact-inquiry .is-invalid input,
.contact-inquiry .is-invalid select,
.contact-inquiry .is-invalid textarea{ border-bottom-color:var(--red); }
.contact-inquiry .cf-err-consent{ margin:-22px 0 26px; }
.contact-inquiry .cf-consent.is-invalid input[type="checkbox"]{ border-color:var(--red); }

/* è un <button>, ma nel testo deve leggersi come il resto della frase */
.contact-inquiry .cf-privacy-link{
  padding:0; border:none; background:none; font:inherit; cursor:pointer;
  color:var(--ink-dim); text-decoration:underline; text-underline-offset:2px;
  transition:color .25s var(--ease-soft);
}
.contact-inquiry .cf-privacy-link:hover{ color:var(--red); }
.contact-inquiry .cf-privacy-link:focus-visible{ outline:2px solid var(--red); outline-offset:2px; border-radius:2px; }

/* ---- finestra dell'Informativa sulla Privacy --------------------------
   Stessi elementi del resto del sito: pannello bianco, raggio grande,
   filetto sottile, rosso dell'identità. Niente stili nuovi inventati. */
.pm{
  border:none; padding:0; background:transparent;
  width:min(560px, calc(100vw - 40px));
  max-height:calc(100dvh - 48px);
  overflow:visible;
}
.pm::backdrop{ background:rgba(17,17,17,.55); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }

.pm-panel{
  display:flex; flex-direction:column;
  max-height:calc(100dvh - 48px);
  background:#fff; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:0 30px 80px -24px rgba(0,0,0,.32);
}
.pm-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  padding:30px 30px 18px; border-bottom:1px solid var(--line); flex:0 0 auto;
}
.pm-title{
  margin:0; font-family:var(--f-display); font-weight:600;
  font-size:clamp(19px,2.4vw,26px); line-height:1.2; color:var(--ink);
}
.pm-close{
  flex:0 0 auto; width:34px; height:34px; margin:-4px -6px 0 0;
  display:flex; align-items:center; justify-content:center;
  padding:0; border:none; background:none; cursor:pointer;
  font-size:15px; line-height:1; color:var(--red); opacity:.75;
  transition:opacity .25s var(--ease-soft);
}
.pm-close:hover{ opacity:1; }
.pm-close:focus-visible{ outline:2px solid var(--red); outline-offset:2px; border-radius:50%; }

/* se il testo è lungo scorre qui dentro, non la pagina */
.pm-body{
  flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:24px 30px 30px;
  font-family:var(--f-body); font-size:14.5px; line-height:1.75; color:var(--ink-dim);
}
.pm-body:focus-visible{ outline:2px solid var(--red); outline-offset:-4px; }
/* impaginazione già pronta per il testo definitivo */
.pm-body h3{
  margin:26px 0 8px; font-family:var(--f-display); font-weight:600;
  font-size:15px; line-height:1.35; color:var(--ink);
}
.pm-body h3:first-child{ margin-top:0; }
.pm-body p{ margin:0 0 14px; }
.pm-body ul{ margin:0 0 14px; padding-left:20px; }
.pm-body li{ margin-bottom:6px; }
.pm-body strong{ font-weight:600; color:var(--ink); }
.pm-body a{ color:var(--red); text-decoration:underline; text-underline-offset:2px; }
.pm-body a:hover{ color:var(--ink); }

/* chiusura dell'informativa: staccata da un filetto, non da un riquadro —
   deve leggersi come una firma, non come la sezione di un contratto */
.pm-foot{ margin-top:26px; padding-top:20px; border-top:1px solid var(--line); }
.pm-foot p{ margin:0 0 10px; }
.pm-foot p:last-child{ margin-bottom:0; }
.pm-body p:last-child, .pm-body ul:last-child{ margin-bottom:0; }

@media (max-width:600px){
  .pm{ width:calc(100vw - 32px); max-height:calc(100dvh - 32px); }
  .pm-panel{ max-height:calc(100dvh - 32px); border-radius:var(--radius-lg); }
  .pm-head{ padding:22px 20px 14px; }
  .pm-body{ padding:18px 20px 24px; font-size:15px; }
}

/* la trappola per i bot: fuori dallo schermo, mai display:none */
.contact-inquiry .cf-hp{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

.contact-inquiry .cf-status{
  margin:18px 0 0; font-family:var(--f-body); font-size:13px; line-height:1.6;
  color:var(--red); max-width:520px;
}
.contact-inquiry button[disabled]{ opacity:.55; cursor:default; }
.contact-inquiry button[disabled] .arrow{ opacity:0; }

.cf-done{ padding:44px; }
.cf-done .cf-done-title{
  font-family:var(--f-display); font-weight:600; font-size:clamp(22px,2.6vw,30px);
  line-height:1.2; color:var(--ink); margin:0;
}
.cf-done .cf-done-sub{ margin:10px 0 0; font-size:15px; line-height:1.7; color:var(--ink-dim); }
@media (max-width:600px){ .cf-done{ padding:26px; } }

@media (max-width:600px){ .contact-inquiry{ padding:26px; } .contact-inquiry .cf-row{ grid-template-columns:1fr; gap:0; } }

/* Stesso linguaggio delle tre fasi di "Il mio approccio": struttura aperta,
   nessun contenitore, blocco rosso pieno in hover. Qui i contenuti sono molto
   più corti, quindi ritmo verticale e sbordo del rosso sono ricalibrati.
   gap:0, e il padding laterale della griglia è ridotto dei 24px che ora sono
   dentro ogni colonna: il testo resta allineato a 116px come titolo, form e
   chiusura, mentre il rosso arriva al bordo della sua colonna. Niente margini
   negativi — qui padding e margin starebbero sullo stesso elemento e la
   griglia sborderebbe dal viewport. */
.contact-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  padding:clamp(24px,3.2vh,42px) 36px clamp(56px,6.5vh,96px);
  scroll-margin-top:100px; margin-bottom:auto;
}
/* on tall screens the leftover height is split evenly above and below the
   content by the two auto margins above, so it reads as symmetric breathing
   room instead of one dead gap — the closing line then sits flush at the
   bottom without needing its own auto margin. */
.c-card{ position:relative; padding:26px 24px 30px; }
.c-card::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:var(--red); opacity:0; transform:scaleY(.92);
  transition:opacity .38s var(--ease-soft), transform .38s var(--ease-soft);
}
.c-card > *{ position:relative; z-index:1; }
/* :focus-within e :active affiancano l'hover per i dispositivi touch, dove
   il puntatore non esiste */
.c-card:hover::before,
.c-card:focus-within::before,
.c-card:active::before{ opacity:1; transform:scaleY(1.2); }

.c-card .h{
  font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:16px; transition:color .38s var(--ease-soft);
}
.c-card a, .c-card p{
  display:block; font-family:var(--f-display); font-weight:600; font-size:19px;
  color:var(--ink); padding:6px 0; transition:color .38s var(--ease-soft);
}
/* l'hover del singolo link resta discreto: solo un filetto, nessun colore nuovo */
.c-card a:hover{ text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }
.c-card:hover .h, .c-card:focus-within .h, .c-card:active .h,
.c-card:hover a, .c-card:focus-within a, .c-card:active a,
.c-card:hover p, .c-card:focus-within p, .c-card:active p{ color:#fff; }
/* chiusura editoriale della sola pagina Contatti: un filetto, la mail a
   sinistra, il copyright a destra. Niente social — sono già nelle card e
   nella rail — niente CTA, niente banda nera. Il footer del sito non viene
   toccato: semplicemente non compare qui. */
.contact-end{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px 40px; flex-wrap:wrap;
  margin:0 60px; padding:22px 0 34px;
  border-top:1px solid var(--line);
}
.contact-end a{
  font-family:var(--f-body); font-size:15px; color:var(--ink);
  transition:color .3s var(--ease);
}
.contact-end a:hover{ color:var(--red); }
.contact-end p{
  margin:0; font-size:11.5px; letter-spacing:.04em; color:var(--ink-faint);
}

@media (max-width:1000px){
  .contact-hero{ padding:56px 22px 24px; }
  .contact-toggle{ margin:30px 22px; }
  /* impilate: stesso principio, il rosso arriva ai bordi dello schermo */
  .contact-grid{ grid-template-columns:1fr; padding:24px 0 64px; }
  .c-card{ padding:24px 22px 28px; }
  .contact-end{ margin:0 22px; }
}

/* =========================================================
   TH4URA — NASCOSTO TEMPORANEAMENTE
   ---------------------------------------------------------
   Interruttore unico: niente è stato rimosso dal progetto.
   th4ura.html, il sigillo, gli asset, il markup e gli stili
   restano tutti al loro posto.

   PER RIATTIVARLO: cancellare (o commentare) questo blocco.
   Nessuna modifica all'HTML è necessaria.
   ========================================================= */
.ft-th4ura,                    /* pill nella barra superiore */
.mobile-nav .mth,              /* voce nel menu mobile */
.site-footer .sf-sigil{        /* sigillo nel footer */
  display:none !important;
}
/* senza la pill la barra superiore avrebbe solo logo + nav, e con
   space-between la nav scivolerebbe a destra: la si àncora al centro della
   barra così non resta uno spazio vuoto dove stava TH4URA */
@media (min-width:1001px){
  .frame-top .ft-nav{
    position:absolute; left:50%; transform:translateX(-50%);
  }
}
/* =========== fine blocco TH4URA nascosto ================= */

/* =========================================================
   SOCIAL & GRAPHIC DESIGN — tavola editoriale.
   Una sola griglia invisibile di dodici colonne, uguale per tutti i
   progetti. Dentro quella griglia ogni progetto ha una composizione sua:
   nuclei di dimensioni diverse, sfalsati, separati da bianco voluto.
   Gli scarti verticali non sono margini a caso ma align-self: un blocco
   basso si allinea al piede di quello alto, così lo sfalsamento resta
   corretto a qualsiasi larghezza.
   Gerarchia di scala: telefono e visual principale grandi, gruppi di post
   medi, grafiche secondarie piccole.
   ========================================================= */
.sgd{ padding:0 60px clamp(50px,6vw,90px); }
.sgd img{ width:100%; height:auto; display:block; }
.sgd figure{ margin:0; }

.sgd-canvas{ max-width:1240px; margin:clamp(26px,3.6vw,52px) auto 0; }

.sgd-p{
  display:grid; grid-template-columns:repeat(12,1fr);
  gap:clamp(14px,1.7vw,22px);
  align-items:start;
  margin-top:clamp(84px,11vw,168px);
}
.sgd-p:first-of-type{ margin-top:0; }

/* intestazione piccola e discreta, una colonna stretta */
.sgd-label{ grid-column:1 / span 2; grid-row:1; }
.sgd-num{
  display:block; font-family:var(--f-body); font-size:11px; font-weight:700;
  letter-spacing:.08em; color:var(--red); margin-bottom:6px;
}
.sgd-label h3{
  font-family:var(--f-display); font-weight:600; letter-spacing:-.01em;
  font-size:clamp(14px,1.15vw,17px); line-height:1.2; margin-bottom:5px;
}
.sgd-meta{
  font-family:var(--f-body); font-size:10px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-faint); margin:0; line-height:1.5;
}
.sgd-note{ margin:9px 0 0; font-size:10.5px; line-height:1.6; color:var(--ink-faint); }

/* didascalia di gruppo: serve a leggere una serie come serie */
.sgd figcaption{
  font-family:var(--f-body); font-size:9.5px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-faint); margin-top:9px;
}

/* ---- telefoni ------------------------------------------------------
   Il PNG originale è un canvas 2000x2000 con il device dentro e molto
   spazio attorno: qui viene usata la versione ritagliata a filo, quindi
   larghezza del file = larghezza del device.
   La figura si stira all'altezza della riga; la didascalia si prende la
   sua parte e l'immagine occupa tutto il resto. Il device risulta così
   alto esattamente quanto il feed a fianco, a qualsiasi larghezza e
   senza misure fisse. flex-basis:0 serve a non far pesare l'immagine
   nel calcolo dell'altezza della riga, che deve dipendere dal feed.   */
.sgd .ph-fit{
  align-self:stretch;
  display:flex; flex-direction:column; align-items:flex-start;
  min-height:0;
}
.sgd .ph-fit img{
  flex:1 1 0; min-height:0;
  width:auto; height:auto; max-width:100%;
}

/* ---- 01 Rhapsody ----------------------------------------------------
   riga 1: profilo e feed pubblicato, stesso top e stessa altezza
   riga 2: i tre feed, identici fra loro, alternati sinistra/destra    */
.p-rhapsody .a-phone  { grid-column:4 / span 3; grid-row:1; }
.p-rhapsody .a-feedpub{ grid-column:7 / span 4; grid-row:1; }

/* zig-zag: quattro righe da mezza altezza, ogni feed ne occupa due.
   Il feed 02 parte a metà del 01 e finisce a metà del 03, quindi il suo
   centro cade esattamente a metà fra i centri degli altri due.
   Il row-gap non rompe questa simmetria — sposta i tre blocchi della
   stessa quantità — e serve a staccare i due feed di sinistra.        */
.p-rhapsody .a-zig{
  grid-column:1 / -1; grid-row:2;
  display:grid; grid-template-columns:repeat(12,1fr);
  column-gap:clamp(14px,1.7vw,22px); row-gap:clamp(26px,3.6vw,56px);
  align-items:start;
}
.p-rhapsody .a-sil{ grid-column:1 / span 6; grid-row:1 / span 2; }
.p-rhapsody .a-pos{ grid-column:7 / span 6; grid-row:2 / span 2; }
.p-rhapsody .a-str{ grid-column:1 / span 6; grid-row:3 / span 2; }

/* ---- 02 Symbols — feed e profilo, stesso top e stessa altezza ------ */
.p-symbols .b-sys  { grid-column:1 / span 4; grid-row:2; }
.p-symbols .b-phone{ grid-column:6 / span 3; grid-row:2; }

/* ---- 03 Tessiture — una sola fascia orizzontale --------------------
   info, locandina e feed condividono la riga 1: stesso top, due colonne
   uguali separate da una colonna vuota della griglia.                 */
.p-tessiture .sgd-label{ grid-column:1 / span 2; grid-row:1; }
.p-tessiture .c-vol    { grid-column:4 / span 4; grid-row:1; margin-top:0; }
.p-tessiture .c-grid   { grid-column:9 / span 4; grid-row:1; margin-top:0; }

/* ---- 04 Lana Del Rey — assi espliciti ------------------------------
   info, locandina e ticket partono dallo stesso top; ticket e banner
   condividono l'asse sinistro e la larghezza; il piede del banner
   torna sulla linea del piede della locandina.                        */
.p-ldr .sgd-label{ grid-column:1 / span 3; grid-row:1; }
.p-ldr .d-loc{ grid-column:4 / span 4;  grid-row:1 / span 2; }
.p-ldr .d-tic{ grid-column:9 / span 4;  grid-row:1; }
.p-ldr .d-spo{ grid-column:9 / span 4;  grid-row:2; align-self:end; }
/* la nota deve restare su due righe esatte, a capo solo prima di
   "Marchi": il <br> impone il punto, questo impedisce altri a capo */
.p-ldr .sgd-note{ white-space:nowrap; }

/* ---- 05 Selected graphic works — tre nuclei, non una fila di card --- */
.sgd-nuc{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(10px,1.2vw,16px);
}
.sgd-nuc .nuc-name{
  grid-column:1 / -1; margin:0 0 2px;
  font-family:var(--f-body); font-size:10px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-dim);
}
/* due nuclei: Aeromondo in alto verso destra, Dog World sotto a sinistra
   allineato al bordo dell'etichetta. Scale diverse, non due blocchi gemelli. */
.p-works .n-aero{ grid-column:4 / span 6; grid-row:1; }
.p-works .n-dog { grid-column:1 / span 5; grid-row:2; }

/* =========================== tablet ==================================
   la griglia resta di dodici colonne: cambiano solo le campate, così i
   rapporti fra gli elementi di uno stesso progetto non si perdono.     */
@media (max-width:1180px){
  .sgd-p{ margin-top:clamp(66px,9vw,120px); }
  .sgd-label{ grid-column:1 / -1; grid-row:1; }

  .p-rhapsody .a-phone  { grid-column:1 / span 4;  grid-row:2; }
  .p-rhapsody .a-feedpub{ grid-column:6 / span 5;  grid-row:2; }
  .p-rhapsody .a-zig    { grid-row:3; }
  .p-rhapsody .a-sil{ grid-column:1 / span 9;  grid-row:1 / span 2; }
  .p-rhapsody .a-pos{ grid-column:4 / span 9;  grid-row:2 / span 2; }
  .p-rhapsody .a-str{ grid-column:1 / span 9;  grid-row:3 / span 2; }

  .p-symbols .b-sys  { grid-column:1 / span 6;  grid-row:2; }
  .p-symbols .b-phone{ grid-column:8 / span 4;  grid-row:2; }

  /* mezza tavola ciascuno: al tablet il feed deve restare leggibile */
  .p-tessiture .sgd-label{ grid-column:1 / -1;  grid-row:1; }
  .p-tessiture .c-vol { grid-column:1 / span 6; grid-row:2; }
  .p-tessiture .c-grid{ grid-column:7 / span 6; grid-row:2; }

  .p-ldr .sgd-label{ grid-column:1 / -1; grid-row:1; }
  .p-ldr .d-loc{ grid-column:1 / span 5;  grid-row:2 / span 2; }
  .p-ldr .d-tic{ grid-column:7 / span 6;  grid-row:2; }
  .p-ldr .d-spo{ grid-column:7 / span 6;  grid-row:3; align-self:end; }

  .p-works .n-aero{ grid-column:1 / span 8; grid-row:2; }
  .p-works .n-dog { grid-column:5 / span 8; grid-row:3; margin-top:0; }
}
@media (max-width:1000px){ .sgd{ padding:0 22px clamp(44px,8vw,80px); } }

/* =========================== mobile ==================================
   sei colonne. Le coppie che devono restare insieme — profilo e feed,
   fronte e retro, i post appaiati — restano affiancate.                */
@media (max-width:700px){
  .sgd-p{ grid-template-columns:repeat(6,1fr); gap:12px; margin-top:clamp(54px,13vw,88px); }
  /* ogni figura riceve una collocazione esplicita: una campata rimasta
     dal desktop creerebbe colonne implicite e sfascerebbe la griglia */
  .sgd-p > figure{ grid-column:1 / -1; grid-row:auto; align-self:auto; }

  /* qui il telefono non è più affiancato a un feed: senza un vicino più
     alto la riga non ha altezza da cedere, quindi torna immagine normale */
  .sgd .ph-fit{ display:block; align-self:auto; }
  .sgd .ph-fit img{ flex:none; width:100%; height:auto; }

  .p-rhapsody .a-phone  { grid-column:1 / span 4; grid-row:2; }
  .p-rhapsody .a-feedpub{ grid-column:1 / -1;     grid-row:3; }
  /* niente zig-zag su una colonna sola: i tre feed si impilano */
  .p-rhapsody .a-zig{
    grid-column:1 / -1; grid-row:4;
    grid-template-columns:1fr; row-gap:12px;
  }
  .p-rhapsody .a-sil{ grid-column:1; grid-row:1; }
  .p-rhapsody .a-pos{ grid-column:1; grid-row:2; }
  .p-rhapsody .a-str{ grid-column:1; grid-row:3; }

  .p-symbols .b-sys  { grid-column:1 / -1;     grid-row:2; }
  .p-symbols .b-phone{ grid-column:1 / span 4; grid-row:3; align-self:auto; }

  .p-tessiture .sgd-label{ grid-column:1 / -1;  grid-row:1; }
  .p-tessiture .c-vol { grid-column:1 / span 5; grid-row:2; }
  .p-tessiture .c-grid{ grid-column:1 / -1;     grid-row:3; }

  .p-ldr .sgd-label{ grid-column:1 / -1; grid-row:1; }
  .p-ldr .sgd-note { white-space:normal; }
  .p-ldr .d-loc{ grid-column:1 / span 5; grid-row:2; }
  .p-ldr .d-tic{ grid-column:1 / -1;     grid-row:3; }
  .p-ldr .d-spo{ grid-column:1 / -1;     grid-row:4; align-self:auto; }

  .p-works .n-aero{ grid-column:1 / span 6; grid-row:2; }
  .p-works .n-dog { grid-column:1 / span 6; grid-row:3; margin-top:0; }
}