/* =========================================================
   Trent'anni — Landing page
   Inchiostro #0B0B0C · Crema #EFEAE1 · Vermiglio #FF4A17
   Display: Fraunces · UI: Space Grotesk
   ========================================================= */

/* ---------- TOKENS ---------- */
:root{
  --bg:#0B0B0C;
  --cream:#EFEAE1;
  --ink:#EFEAE1;
  --ink-dim:#9C978C;
  --accent:#FF4A17;
  --line:rgba(239,234,225,.16);
  --line-dark:rgba(11,11,12,.22);
  --pad:clamp(16px,4.2vw,64px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
  --ff-display:'Fraunces',Georgia,'Times New Roman',serif;
  --ff-ui:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--ff-ui);font-weight:400;
  font-size:clamp(15px,1.02vw,17px);line-height:1.6;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body.is-loading{overflow:hidden;height:100vh}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,p,dl,dd,figure{margin:0}
img,svg,canvas{display:block;max-width:100%}
::selection{background:var(--accent);color:#0B0B0C}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

section[id]{scroll-margin-top:clamp(64px,9vh,110px)}

/* ---------- LAYOUT ---------- */
.wrap{width:100%;max-width:1680px;margin-inline:auto;padding-inline:var(--pad)}
.on-cream{background:var(--cream);color:#0B0B0C}

.eyebrow{
  font-family:var(--ff-ui);
  font-size:clamp(10px,.82vw,12px);
  letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  line-height:1.5;color:var(--ink-dim);
}
.on-cream .eyebrow{color:rgba(11,11,12,.6)}

/* ---------- GRAIN ---------- */
.grain{
  position:fixed;inset:-25%;z-index:200;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size:260px 260px;opacity:.22;will-change:transform;
  animation:grain 7s steps(8) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}
  12%{transform:translate(-2%,-3%)}
  25%{transform:translate(3%,-1%)}
  37%{transform:translate(-1%,4%)}
  50%{transform:translate(-4%,2%)}
  62%{transform:translate(2%,3%)}
  75%{transform:translate(-3%,-4%)}
  87%{transform:translate(1%,-2%)}
}

/* ---------- PROGRESS ---------- */
.progress{
  position:fixed;top:0;left:0;width:100%;height:2px;z-index:210;
  background:var(--accent);transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;
}

/* ---------- CURSORE ---------- */
.cursor{position:fixed;inset:0;z-index:300;pointer-events:none;display:none}
.cursor__dot,.cursor__ring{
  position:absolute;top:0;left:0;border-radius:50%;
  transform:translate3d(-100px,-100px,0);
}
.cursor__dot{width:6px;height:6px;background:var(--accent);margin:-3px 0 0 -3px}
.cursor__ring{
  width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid rgba(239,234,225,.5);
  transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),
             border-color .35s var(--ease),background .35s var(--ease);
}
.cursor.is-hover .cursor__ring{
  width:64px;height:64px;margin:-32px 0 0 -32px;
  border-color:var(--accent);background:rgba(255,74,23,.12);
}
@media (hover:hover) and (pointer:fine){
  .cursor{display:block}
  body{cursor:none}
  a,button{cursor:none}
}

/* ---------- LOADER ---------- */
.loader{
  position:fixed;inset:0;z-index:400;background:var(--accent);color:var(--cream);
  display:grid;place-content:center;justify-items:center;gap:.2em;
  transition:transform .95s var(--ease-io);
}
.loader.is-out{transform:translateY(-101%)}
.loader__num{
  font-family:var(--ff-display);font-weight:600;line-height:.8;
  font-size:clamp(6rem,28vw,24rem);letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
  font-optical-sizing:auto;
  transition:transform .95s var(--ease-io),opacity .5s;
}
.loader.is-out .loader__num{transform:scale(1.08);opacity:0}
.loader__cap{
  font-size:clamp(10px,.82vw,12px);letter-spacing:.2em;text-transform:uppercase;
  opacity:.85;text-align:center;padding-inline:1rem;
}

/* ---------- NAV ---------- */
.nav{
  position:fixed;top:0;left:0;width:100%;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:calc(clamp(14px,2vw,26px) + var(--safe-t)) var(--pad) clamp(14px,2vw,26px);
  color:#fff;mix-blend-mode:difference;pointer-events:none;
}
.nav > *{pointer-events:auto;min-width:0}
.nav__mark{
  font-family:var(--ff-display);font-weight:600;font-size:1.2rem;
  letter-spacing:-.02em;font-optical-sizing:auto;
}
.nav__links{
  display:flex;align-items:center;gap:clamp(12px,2.2vw,38px);
  font-size:clamp(10px,.8vw,12px);letter-spacing:.14em;text-transform:uppercase;font-weight:500;
}
.nav__links a{opacity:.78;transition:opacity .3s;white-space:nowrap}
.nav__links a:hover{opacity:1}
.nav__cta{
  opacity:1!important;border:1px solid #fff;border-radius:99px;
  padding:.6em 1.2em;transition:background .35s var(--ease),color .35s var(--ease);
}
.nav__cta:hover{background:#fff;color:#000;mix-blend-mode:normal}

/* ---------- HERO ---------- */
.hero{
  position:relative;min-height:100vh;min-height:100svh;
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  padding-block:calc(clamp(14px,2vw,26px) + var(--safe-t) + 52px) calc(var(--pad) * .9 + var(--safe-b));
  overflow:hidden;isolation:isolate;
}
.hero__glow{
  position:absolute;inset:-30%;z-index:-1;pointer-events:none;
  background:radial-gradient(46vw circle at var(--mx,50%) var(--my,42%),
             rgba(255,74,23,.20), rgba(255,74,23,.06) 42%, transparent 68%);
  filter:blur(30px);transition:opacity .6s;
}
.hero__top{
  max-width:1680px;margin-inline:auto;width:100%;padding-inline:var(--pad);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;
}
.hero__mid{
  display:flex;align-items:center;padding-inline:var(--pad);
  overflow:hidden;min-height:0;
}
.hero__title{
  width:100%;margin:0;font-family:var(--ff-display);font-weight:600;
  font-size:clamp(2.6rem,17vw,20rem);line-height:.82;letter-spacing:-.04em;
  text-align:center;font-optical-sizing:auto;
  text-wrap:nowrap;will-change:transform;
}
.fit-inner{display:inline-block;white-space:nowrap}
.hero__title .l{
  display:inline-block;opacity:0;transform:translateY(.42em);filter:blur(14px);
  transition:opacity 1.1s var(--ease),transform 1.35s var(--ease),filter 1.1s var(--ease);
}
body.is-ready .hero__title .l{opacity:1;transform:translateY(0);filter:blur(0)}
.hero__title .l:nth-child(1){transition-delay:.02s}
.hero__title .l:nth-child(2){transition-delay:.08s}
.hero__title .l:nth-child(3){transition-delay:.14s}
.hero__title .l:nth-child(4){transition-delay:.20s}
.hero__title .l:nth-child(5){transition-delay:.26s}
.hero__title .l:nth-child(6){transition-delay:.32s}

.hero__bot{
  max-width:1680px;margin-inline:auto;width:100%;padding-inline:var(--pad);
  display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;
}
.hero__date{min-width:0}
.hero__date-line{
  font-family:var(--ff-display);font-weight:500;
  font-size:clamp(1.05rem,1.8vw,1.7rem);letter-spacing:-.01em;
  font-optical-sizing:auto;
}
.hero__date-sub{
  margin-top:.45em;font-size:clamp(10px,.82vw,12px);letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-dim);line-height:1.8;
}
.hero__aside{
  display:inline-block;margin-top:.6em;
  font-family:var(--ff-display);font-style:italic;font-weight:400;
  font-size:clamp(.9rem,1.2vw,1.1rem);line-height:1.5;
  letter-spacing:0;text-transform:none;
  color:rgba(239,234,225,.72);
}

.badge{
  position:relative;width:clamp(88px,11vw,150px);aspect-ratio:1;
  display:grid;place-items:center;flex:none;
}
.badge__svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 26s linear infinite}
.badge__svg text{
  font-family:var(--ff-ui);font-size:9.4px;letter-spacing:.16em;
  fill:var(--ink);text-transform:uppercase;font-weight:500;
}
.badge__arrow{font-size:1.1rem;color:var(--accent);transition:transform .45s var(--ease)}
.badge:hover .badge__arrow{transform:translateY(5px)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- MARQUEE ---------- */
.marquee{
  background:var(--accent);color:#0B0B0C;overflow:hidden;
  padding-block:clamp(10px,1.4vw,20px);
  border-block:1px solid rgba(11,11,12,.18);
}
.marquee__track{display:flex;width:max-content;animation:marquee 46s linear infinite}
.marquee__set{
  display:flex;align-items:center;gap:clamp(14px,2.4vw,40px);
  padding-right:clamp(14px,2.4vw,40px);
}
.marquee span{
  font-family:var(--ff-display);font-style:italic;font-weight:400;
  font-size:clamp(1.35rem,3.2vw,2.9rem);line-height:1.15;
  text-transform:uppercase;letter-spacing:-.005em;
  font-optical-sizing:auto;white-space:nowrap;
}
.marquee i{font-style:normal;font-size:clamp(.9rem,1.8vw,1.6rem);opacity:.55}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- SEC-HEAD ---------- */
.sec-head{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;
  gap:.35rem 2rem;
  padding-bottom:clamp(12px,1.6vw,20px);
  border-bottom:1px solid var(--line);
}
.sec-head--dark{border-bottom-color:var(--line-dark)}

/* ---------- 01 STATEMENT ---------- */
.statement{padding-block:clamp(64px,10vw,170px)}
.statement__text{
  margin-top:clamp(30px,4.5vw,68px);max-width:26ch;
  font-family:var(--ff-display);font-weight:400;
  font-size:clamp(1.5rem,3.7vw,3.4rem);line-height:1.2;letter-spacing:-.012em;
  font-optical-sizing:auto;
}
.statement__text .wd{
  display:inline-block;opacity:.12;transform:translateY(.2em);
  transition:opacity .9s var(--ease),transform 1s var(--ease);
}
.statement__text.is-in .wd{opacity:1;transform:none}

/* ---------- 02 COUNTDOWN ---------- */
.count{
  position:relative;overflow:hidden;isolation:isolate;
  padding-block:clamp(56px,8vw,120px) clamp(64px,9vw,140px);
}
.count__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-2;opacity:.9}
.count__ghost{
  position:absolute;right:-.04em;bottom:-.22em;z-index:-1;pointer-events:none;
  font-family:var(--ff-display);font-weight:600;
  font-size:clamp(14rem,42vw,40rem);line-height:.72;letter-spacing:-.06em;
  color:transparent;-webkit-text-stroke:1px rgba(239,234,225,.10);
  font-optical-sizing:auto;will-change:transform;
}
.count__inner{position:relative;min-width:0}
.count__grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:clamp(28px,4.2vw,60px);
}
.unit{
  display:flex;flex-direction:column;gap:.16em;min-width:0;
  padding-left:clamp(10px,2vw,30px);border-left:1px solid var(--line);
}
.unit:first-child{border-left:0;padding-left:0}
.unit__n{
  font-family:var(--ff-display);font-weight:400;line-height:.88;
  font-size:clamp(2.5rem,10vw,9.5rem);letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;font-optical-sizing:auto;
}
.unit__l{
  font-size:clamp(10px,.8vw,12px);letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-dim);line-height:1.4;
}
.count__note{
  margin-top:clamp(30px,4.5vw,60px);max-width:44ch;
  font-size:clamp(.92rem,1.05vw,1.02rem);line-height:1.7;
  color:var(--ink-dim);
}

/* ---------- 03 INFO ---------- */
.info{padding-block:clamp(56px,8vw,130px)}
.info__wrap{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(30px,6vw,110px);
  align-items:start;
}
.info__aside{position:sticky;top:clamp(76px,12vh,140px);min-width:0}
.info__title{
  margin-top:clamp(22px,3.2vw,42px);
  font-family:var(--ff-display);font-weight:500;
  font-size:clamp(2.2rem,5.6vw,5rem);line-height:.98;letter-spacing:-.03em;
  font-optical-sizing:auto;
}
.info__title em{font-style:italic;font-weight:400;color:var(--accent)}
.info__lead{
  margin-top:clamp(18px,2.4vw,32px);max-width:36ch;
  color:var(--ink-dim);font-size:clamp(.94rem,1.1vw,1.06rem);line-height:1.7;
}
.info__actions{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-top:clamp(24px,3.2vw,40px);
}

.info__list{display:flex;flex-direction:column;min-width:0}
.info__list .row{
  display:grid;grid-template-columns:minmax(88px,.28fr) minmax(0,1fr);
  gap:1.25rem;
  padding-block:clamp(15px,2vw,26px);
  border-top:1px solid var(--line);
  transition:padding-left .5s var(--ease),border-color .5s;
}
.info__list .row:last-child{border-bottom:1px solid var(--line)}
.info__list .row:hover{padding-left:clamp(5px,.9vw,12px);border-top-color:var(--accent)}
.info__list dt{
  font-size:clamp(10px,.78vw,11.5px);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-dim);padding-top:.5em;line-height:1.5;
}
.info__list dd{
  font-family:var(--ff-display);font-weight:500;
  font-size:clamp(1.05rem,1.8vw,1.55rem);line-height:1.32;letter-spacing:-.008em;
  font-optical-sizing:auto;overflow-wrap:break-word;min-width:0;
}
.info__list dd em{
  display:block;margin-top:.55em;max-width:46ch;
  font-family:var(--ff-display);font-style:italic;font-weight:400;
  font-size:clamp(.98rem,1.2vw,1.16rem);line-height:1.68;
  letter-spacing:0;color:var(--ink-dim);
  font-optical-sizing:auto;
}

/* ---------- BOTTONI ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.7em;border-radius:99px;
  padding:.88em 1.5em;font-size:clamp(.76rem,.86vw,.86rem);
  letter-spacing:.11em;text-transform:uppercase;font-weight:500;
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
  will-change:transform;text-align:left;
}
.btn .ar{display:inline-block;transition:transform .4s var(--ease);flex:none}
.btn:hover .ar{transform:translate(3px,-3px)}
.btn--ghost{border:1px solid var(--line)}
.btn--ghost:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn--dark{border-color:var(--line-dark);color:#0B0B0C}
.btn--dark:hover{background:#0B0B0C;color:var(--cream);border-color:#0B0B0C}

/* ---------- OUTRO ---------- */
.outro{
  padding-block:clamp(52px,8vw,120px) clamp(24px,4vw,56px);
  overflow:hidden;
}
.outro__title{
  margin:0;padding-inline:calc(var(--pad) * .5);
  font-family:var(--ff-display);font-weight:600;line-height:.86;
  font-size:clamp(1.9rem,13vw,17rem);letter-spacing:-.04em;
  text-align:center;text-transform:uppercase;
  font-optical-sizing:auto;text-wrap:nowrap;
}
.outro__meta{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(200px,auto);
  gap:clamp(20px,4vw,60px);
  padding:clamp(30px,4.6vw,68px) var(--pad) 0;
  border-top:1px solid var(--line-dark);
  margin-top:clamp(26px,4vw,60px);
}
.outro__col{min-width:0}
.outro__meta p{
  margin-top:.7em;font-size:clamp(.92rem,1.05vw,1rem);line-height:1.65;
  color:rgba(11,11,12,.78);overflow-wrap:break-word;
}
.outro__col--end{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.outro__note{max-width:32ch;font-size:.86rem;line-height:1.6;color:rgba(11,11,12,.62)}
.outro__note a{
  border-bottom:1px solid rgba(11,11,12,.4);padding-bottom:1px;
  transition:border-color .3s,color .3s;
}
.outro__note a:hover{color:var(--accent);border-color:var(--accent)}

.footer{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 1.5rem;
  margin-top:clamp(36px,5.5vw,86px);
  padding:clamp(18px,2.2vw,28px) var(--pad) calc(clamp(18px,2.2vw,28px) + var(--safe-b));
  border-top:1px solid var(--line-dark);
  font-size:clamp(10px,.76vw,11.5px);letter-spacing:.18em;text-transform:uppercase;
  color:rgba(11,11,12,.5);
}

/* ---------- FAB ---------- */
.fab{
  position:fixed;right:calc(var(--pad) * .8);
  bottom:calc(var(--pad) * .75 + var(--safe-b));z-index:95;
  border:1px solid #fff;border-radius:99px;padding:.78em 1.25em;
  font-size:clamp(.7rem,.78vw,.8rem);letter-spacing:.13em;
  text-transform:uppercase;font-weight:500;
  color:#fff;mix-blend-mode:difference;white-space:nowrap;
  opacity:0;transform:translateY(18px);pointer-events:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.fab.is-on{opacity:1;transform:none;pointer-events:auto}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width:1200px){
  .info__wrap{gap:clamp(26px,4.5vw,70px)}
  .info__list .row{grid-template-columns:minmax(80px,.26fr) minmax(0,1fr)}
}

@media (max-width:1024px){
  .info__wrap{grid-template-columns:minmax(0,1fr);gap:clamp(26px,4.5vw,46px)}
  .info__aside{position:static;top:auto}
  .info__title br{display:none}
  .info__title em{display:block}
  .info__lead{max-width:52ch}
  .info__list .row{grid-template-columns:minmax(96px,.24fr) minmax(0,1fr);gap:1.5rem}
}

@media (max-width:820px){
  .nav__links a:not(.nav__cta){display:none}
  .hero__bot{flex-direction:column;align-items:flex-start;gap:20px}
  .badge{width:88px;align-self:flex-end;margin-top:-4px}
  .info__list .row{grid-template-columns:minmax(0,1fr);gap:.55rem}
  .info__list dt{padding-top:0}
  .info__list dd em{max-width:none}
  .outro__meta{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .outro__col--end{grid-column:1/-1}
}

@media (max-width:720px){
  .hero{
    padding-block:calc(clamp(14px,2vw,26px) + var(--safe-t) + 48px)
                 calc(var(--pad) + var(--safe-b));
  }
  .hero__top{flex-direction:column;align-items:flex-start;gap:.4rem}
  .hero__mid{padding-inline:calc(var(--pad) * .85)}
  .hero__date-sub{letter-spacing:.14em;line-height:1.9}

  .count__grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(20px,4vw,34px)}
  .unit:nth-child(odd){border-left:0;padding-left:0}
  .unit:nth-child(n+3){
    border-top:1px solid var(--line);
    padding-top:clamp(16px,3vw,24px);
  }
  .count__note{max-width:38ch}

  .sec-head{gap:.25rem 1rem}
  .sec-head .eyebrow:last-child{opacity:.75}

  .info__actions{gap:8px}
  .info__actions .btn{flex:1 1 auto;justify-content:space-between;min-width:min(100%,220px)}

  .outro__meta{padding-top:clamp(26px,5vw,44px)}
}

@media (max-width:520px){
  .hero__date-line{font-size:1.02rem}
  .outro__meta{grid-template-columns:minmax(0,1fr);gap:22px}
  .outro__col--end{grid-column:auto;align-items:stretch}
  .outro__col--end .btn{width:100%;justify-content:space-between}
  .outro__note{max-width:none}
  .info__actions .btn{width:100%;flex:1 1 100%}
  .marquee span{font-size:1.25rem}
  .footer{flex-direction:column;gap:.55rem;align-items:flex-start}
}

@media (max-height:560px) and (orientation:landscape){
  .hero{
    min-height:auto;
    padding-block:calc(clamp(12px,2vw,22px) + var(--safe-t)) clamp(16px,3vw,26px);
  }
  .hero__bot{gap:14px}
  .badge{width:72px}
  .hero__top .eyebrow:last-child{display:none}
  .count{padding-block:clamp(40px,7vw,70px)}
  .info__aside{position:static}
}

@media (min-width:1900px){
  .statement__text{max-width:28ch}
  .info__lead{max-width:40ch}
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .grain,.marquee__track,.badge__svg{animation:none}
  .hero__title .l{opacity:1;transform:none;filter:none;transition:none}
  .statement__text .wd{opacity:1;transform:none;transition:none}
  .cursor{display:none!important}
  body{cursor:auto}
  *{transition-duration:.01ms!important}
}

/* ---------- PRINT ---------- */
@media print{
  .grain,.cursor,.progress,.loader,.nav,.fab,.count__canvas,.count__ghost{display:none!important}
  body{background:#fff;color:#000}
  .on-cream{background:#fff;color:#000}
}