/* font self-hosted: nessuna richiesta esterna */
@font-face{
  font-family:"Cormorant Garamond";
  src:url("../fonts/cormorant-garamond-latin.woff2") format("woff2");
  font-weight:300 500; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Kubicol — camera oscura
   nero, osso, ottone. serif da museo + mono da terminale. */

:root{
  --bg:#07070a;
  --bg-2:#0c0c10;
  --ink:#ece6da;
  --dim:#8f8b82;
  --dim-2:#5f5c57;
  --line:rgba(236,230,218,.14);
  --gold:#c8a24b;
  --red:#c8324b;
  --serif:"Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
  --mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --pad:clamp(20px, 5vw, 80px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--serif); font-weight:300; font-size:clamp(17px,1.15vw,19px);
  line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.lock{overflow:hidden}
img{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
h1,h2,h3{margin:0; font-weight:300; line-height:1.02; letter-spacing:-.015em}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
::selection{background:var(--gold); color:#000}

.mono{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:400; color:var(--dim)}
.kicker{font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold)}

.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--gold);color:#000;padding:10px 16px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.skip:focus{left:12px;top:12px}

/* grana */
body::after{
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* torcia */
.torch{position:fixed; z-index:1; left:0; top:0; width:760px; height:760px; margin:-380px 0 0 -380px;
  pointer-events:none; opacity:0; transition:opacity .6s; background:radial-gradient(circle, rgba(200,162,75,.075), rgba(200,162,75,0) 62%)}
@media (hover:hover) and (pointer:fine){ .torch{opacity:1} }

/* barra */
.bar{position:fixed; z-index:50; inset:0 0 auto 0; display:flex; align-items:center; gap:24px;
  padding:16px var(--pad); transition:background .4s, border-color .4s, padding .4s;
  border-bottom:1px solid transparent}
.bar.solid{background:rgba(7,7,10,.82); backdrop-filter:blur(14px); border-bottom-color:var(--line); padding-top:12px; padding-bottom:12px}
.mark{font-family:var(--serif); font-size:20px; letter-spacing:.34em; text-transform:uppercase; padding-right:6px}
.mark::after{content:""; display:inline-block; width:5px; height:5px; margin-left:10px; background:var(--gold); transform:translateY(-4px) rotate(45deg)}
.nav{margin-left:auto; display:flex; gap:clamp(14px,2.2vw,34px)}
.nav a{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); position:relative; padding:4px 0; transition:color .25s}
.nav a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--gold); transition:right .35s var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{right:0}
.ext{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink);
  border:1px solid var(--line); padding:9px 14px; transition:background .3s, color .3s, border-color .3s}
.ext:hover{background:var(--gold); border-color:var(--gold); color:#000}

/* HERO */
.hero{position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 var(--pad) clamp(28px,5vh,54px); overflow:hidden; isolation:isolate}
.hero-media{position:absolute; inset:0; z-index:-2}
.hero-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(.15) contrast(1.06) brightness(.62); opacity:0; transition:opacity 2.4s var(--ease), transform 12s linear}
.hero-media img.on{opacity:1; transform:scale(1.04)}
.hero::before{content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(120% 90% at 50% 100%, rgba(7,7,10,.96) 0%, rgba(7,7,10,.55) 45%, rgba(7,7,10,.25) 70%),
    linear-gradient(to top, var(--bg) 2%, rgba(7,7,10,.72) 38%, rgba(7,7,10,.12) 78%)}
.hero-lines{position:absolute; z-index:-1; inset:-10% -10% auto auto; width:min(70vw,780px); height:min(70vw,780px);
  color:rgba(200,162,75,.30); opacity:.9; animation:spin 240s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-inner{position:relative; max-width:1100px; animation:fade-up 1s var(--ease) .1s both}
.hero-title{font-size:clamp(66px, 15.5vw, 232px); line-height:.8; letter-spacing:-.045em; margin:.12em 0 .1em;
  font-weight:300; text-transform:uppercase}
.hero-title::first-letter{color:var(--gold)}
.lede{max-width:34ch; font-size:clamp(19px,1.7vw,26px); line-height:1.35; color:#d9d3c7; font-weight:300}
.lede::first-line{color:var(--ink)}
.hero-foot{animation:fade-up 1s var(--ease) .3s both; display:flex; justify-content:space-between; gap:20px; align-items:baseline;
  margin-top:clamp(26px,5vh,54px); padding-top:16px; border-top:1px solid rgba(236,230,218,.18)}
.hero-foot-r{text-align:right}
.cue{position:absolute; right:var(--pad); top:50%; transform:translateY(-50%); writing-mode:vertical-rl;
  font-family:var(--mono); font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--dim);
  display:flex; align-items:center; gap:12px}
.cue span{width:1px; height:52px; background:linear-gradient(var(--gold),transparent); position:relative; overflow:hidden}
.cue span::after{content:""; position:absolute; inset:0; background:var(--ink); animation:drop 2.6s var(--ease) infinite}
@keyframes drop{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* sezioni */
.sec{padding:clamp(80px,12vh,150px) var(--pad); position:relative; z-index:2}
.sec + .sec{border-top:1px solid var(--line)}
.sec-head{display:flex; justify-content:space-between; align-items:flex-end; gap:28px; flex-wrap:wrap; margin-bottom:clamp(34px,6vh,64px)}
.sec-title{font-size:clamp(46px,8.5vw,124px); line-height:.85; letter-spacing:-.035em}
.sec-note{text-align:right; line-height:1.9; max-width:26ch; text-wrap:balance}

/* chips */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(26px,4vh,44px)}
.chip{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
  border:1px solid var(--line); padding:9px 14px; border-radius:999px; transition:all .28s var(--ease)}
.chip:hover{color:var(--ink); border-color:rgba(236,230,218,.4)}
.chip[aria-pressed="true"]{background:var(--gold); border-color:var(--gold); color:#08080a}

/* griglia opere */
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:clamp(10px,1.2vw,18px)}
.card{position:relative; overflow:hidden; background:var(--bg-2); cursor:pointer; text-align:left;
  border:1px solid rgba(236,230,218,.07); transition:border-color .4s, transform .6s var(--ease), opacity .5s}
.card.hide{display:none}
.card img{aspect-ratio:3/4; width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease), filter .6s; filter:saturate(.92) brightness(.92)}
.card::after{content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(4,4,6,.96) 0%, rgba(4,4,6,.6) 30%, rgba(4,4,6,0) 62%);
  opacity:0; transition:opacity .5s}
.card:hover{border-color:rgba(200,162,75,.55)}
.card:hover img{transform:scale(1.045); filter:saturate(1.05) brightness(1)}
.card:hover::after,.card:focus-visible::after{opacity:1}
.card-txt{position:absolute; left:0; right:0; bottom:0; padding:16px 18px; opacity:0; transform:translateY(8px);
  transition:opacity .45s var(--ease), transform .45s var(--ease); z-index:2}
.card:hover .card-txt,.card:focus-visible .card-txt{opacity:1; transform:none}
.card-txt strong{display:block; font-size:22px; text-shadow:0 2px 22px rgba(0,0,0,.9); font-weight:400; letter-spacing:-.01em; line-height:1.1}
.card-txt span{font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold)}

/* serie */
.series{border-top:1px solid var(--line)}
.series li{border-bottom:1px solid var(--line)}
.series a,.series .row{display:grid; grid-template-columns:80px 1fr auto; align-items:center; gap:20px;
  padding:clamp(18px,2.6vh,30px) 0; transition:padding .4s var(--ease), color .3s; cursor:pointer; width:100%; text-align:left}
.series .idx{font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--dim-2)}
.series .s-name{font-size:clamp(28px,4.6vw,58px); line-height:1; letter-spacing:-.03em; transition:color .3s, transform .5s var(--ease)}
.series .s-ct{font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim)}
.series .s-desc{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:none;
  color:var(--dim-2); margin-top:8px; max-width:52ch; line-height:1.7; opacity:0; max-height:0; transition:opacity .4s, max-height .4s}
.series li:hover .s-name{color:var(--gold); transform:translateX(10px)}
.series li:hover .s-desc{opacity:1; max-height:60px}
.series li:hover .s-ct{color:var(--ink)}

.preview{position:fixed; z-index:40; width:230px; pointer-events:none; opacity:0; transform:translate(-50%,-50%) scale(.96);
  transition:opacity .3s, transform .3s var(--ease); box-shadow:0 30px 80px rgba(0,0,0,.7)}
.preview.on{opacity:1; transform:translate(-50%,-50%) scale(1)}
.preview img{width:100%; aspect-ratio:3/4; object-fit:cover; border:1px solid rgba(200,162,75,.4)}

/* bio */
.bio{display:grid; gap:0; border-top:1px solid var(--line)}
.chapter{display:grid; grid-template-columns:150px minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(16px,3vw,48px);
  padding:clamp(24px,4.4vh,44px) 0; border-bottom:1px solid var(--line); align-items:start}
.chapter .when{font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--gold); padding-top:8px}
.chapter h3{font-size:clamp(26px,3.2vw,42px); line-height:1.06; letter-spacing:-.025em}
.chapter p:last-child{color:#cbc5b9; font-size:clamp(16px,1.05vw,18px); line-height:1.72; max-width:62ch}

/* tecnica */
.tech{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,4vw,64px); align-items:start}
.tech-copy p{font-size:clamp(18px,1.35vw,22px); line-height:1.6; color:#d5cfc3; max-width:52ch}
.facts{display:grid; grid-template-columns:1fr 1fr; gap:1px; margin:clamp(26px,4vh,42px) 0 0; background:var(--line); border:1px solid var(--line)}
.facts div{background:var(--bg); padding:16px 18px}
.facts dt{font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim-2); margin-bottom:6px}
.facts dd{margin:0; font-size:17px; line-height:1.35}

.term{background:#050507; border:1px solid rgba(236,230,218,.16); box-shadow:0 40px 90px rgba(0,0,0,.6)}
.term-bar{display:flex; align-items:center; gap:7px; padding:11px 14px; border-bottom:1px solid rgba(236,230,218,.12)}
.term-bar span{width:8px; height:8px; border-radius:50%; background:#2a2a30}
.term-bar span:first-child{background:#5c2c31}
.term-bar span:nth-child(2){background:#5c5028}
.term-bar span:nth-child(3){background:#2c4a35}
.term-bar i{margin-left:auto; font-family:var(--mono); font-style:normal; font-size:10px; letter-spacing:.1em; color:var(--dim-2)}
.term pre{margin:0; padding:clamp(16px,2.4vw,26px); overflow-x:auto}
.term code{font-family:var(--mono); font-size:clamp(10.5px,.86vw,13px); line-height:2.05; color:#b9b3a7; white-space:pre}
.term .c{color:#4e4b46}
.term .k{color:var(--gold)}
.term .cursor{color:var(--gold); animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.marquee{overflow:hidden; margin-top:clamp(46px,7vh,90px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:18px 0; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex; gap:22px; width:max-content; animation:scroll 46s linear infinite;
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim)}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}

/* contatti */
.sec-contact{padding-bottom:clamp(60px,9vh,110px)}
.links{border-top:1px solid var(--line)}
.links li{border-bottom:1px solid var(--line)}
.links a{display:grid; grid-template-columns:1fr auto 44px; align-items:center; gap:16px; padding:clamp(16px,2.4vh,26px) 0; transition:padding-left .4s var(--ease), color .3s}
.links a:hover{padding-left:14px}
.l-name{font-size:clamp(26px,3.6vw,44px); line-height:1; letter-spacing:-.02em; transition:color .3s}
.links a:hover .l-name{color:var(--gold)}
.l-note{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim-2)}
.l-arrow{font-size:20px; color:var(--dim); text-align:right; transition:transform .35s var(--ease), color .3s}
.links a:hover .l-arrow{transform:translate(3px,-3px); color:var(--gold)}

.foot{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:baseline;
  padding:26px var(--pad); border-top:1px solid var(--line); color:var(--dim-2); font-size:14px; position:relative; z-index:2}

/* 404 */
.err-page{min-height:100svh; display:flex; flex-direction:column; justify-content:center}
.err-page .sec-title{margin:.1em 0 .3em}
.err-lede{max-width:40ch}
.err-back{margin-top:2.2em}

/* lightbox */
.lb{position:fixed; inset:0; z-index:80; display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(20px,3vw,50px);
  align-items:center; padding:clamp(20px,4vw,60px); background:rgba(4,4,6,.94); backdrop-filter:blur(18px);
  opacity:0; transition:opacity .35s var(--ease)}
.lb[hidden]{display:none}
.lb.on{opacity:1}
.lb-fig{margin:0; display:flex; justify-content:center; align-items:center; height:100%; max-height:86vh}
.lb-fig img{max-height:86vh; width:auto; max-width:100%; object-fit:contain; box-shadow:0 50px 120px rgba(0,0,0,.85); animation:in .5s var(--ease)}
@keyframes in{from{opacity:0; transform:scale(.985)}to{opacity:1; transform:none}}
.lb-text{max-width:44ch}
.lb-text h3{font-size:clamp(30px,3.6vw,52px); margin:.15em 0 .5em; line-height:1.02}
.lb-desc{color:#c6c0b4; font-size:16.5px; line-height:1.7; max-height:32vh; overflow-y:auto; padding-right:8px}
.lb-meta{margin-top:18px; line-height:1.9}
.lb-link{margin-top:22px; display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; border-bottom:1px solid var(--gold); padding-bottom:6px; color:var(--gold)}
.lb-close{position:fixed; top:18px; right:20px; font-size:34px; line-height:1; color:var(--dim); width:46px; height:46px; transition:color .3s, transform .4s}
.lb-close:hover{color:var(--ink); transform:rotate(90deg)}
.lb-nav{position:fixed; top:50%; transform:translateY(-50%); width:52px; height:52px; font-size:20px; color:var(--dim);
  border:1px solid var(--line); border-radius:50%; transition:all .3s}
.lb-nav:hover{color:#000; background:var(--gold); border-color:var(--gold)}
.lb-prev{left:18px}
.lb-next{right:18px}

/* entrata in scena del primo schermo (nessuno stato nascosto legato allo scroll) */
@keyframes fade-up{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}

/* responsive */
@media (max-width:1000px){
  .chapter{grid-template-columns:120px 1fr}
  .chapter p:last-child{grid-column:2}
  .tech{grid-template-columns:1fr}
  .lb{grid-template-columns:1fr; align-content:center; overflow-y:auto; padding-bottom:84px}
  .lb-nav{top:50%; bottom:auto; transform:translateY(-50%); width:44px; height:44px}
  .lb-fig{max-height:52vh; margin-top:40px}
  .lb-fig img{max-height:52vh}
  .lb-desc{max-height:none}
  .preview{display:none}
}
@media (max-width:720px){
  .hero-media img{object-position:50% 34%; filter:grayscale(.1) contrast(1.04) brightness(.74)}
  .hero::before{background:linear-gradient(to top, var(--bg) 3%, rgba(7,7,10,.8) 42%, rgba(7,7,10,.25) 88%)}
  .nav{display:none}
  .mark{font-size:17px; letter-spacing:.26em}
  .ext{margin-left:auto; padding:8px 11px; font-size:10px}
  .hero-foot{flex-direction:column; gap:8px}
  .hero-foot-r{text-align:left}
  .cue{display:none}
  .grid{grid-template-columns:repeat(2,1fr); gap:8px}
  .series a,.series .row{grid-template-columns:44px 1fr auto; gap:12px}
  .chapter{grid-template-columns:1fr}
  .chapter p:last-child{grid-column:1}
  .facts{grid-template-columns:1fr}
  .links a{grid-template-columns:1fr 30px}
  .l-note{display:none}
  .sec-note{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}