@font-face { font-family:"Playfair Display"; src:url("../fonts/playfair-display-v40-latin-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Playfair Display"; src:url("../fonts/playfair-display-v40-latin-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Playfair Display"; src:url("../fonts/playfair-display-v40-latin-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Playfair Display"; src:url("../fonts/playfair-display-v40-latin-italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Hanken Grotesk"; src:url("../fonts/hanken-grotesk-v12-latin-regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Hanken Grotesk"; src:url("../fonts/hanken-grotesk-v12-latin-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Hanken Grotesk"; src:url("../fonts/hanken-grotesk-v12-latin-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }

:root {
  --srf-0:#0C0B0B;
  --srf-1:#151414;
  --srf-2:#201E1E;
  --nero:#000000;
  --ink:#F1EFE9;
  --ink-soft:#A39D92;
  --ink-faint:#8A857C;
  --line:rgba(241,239,233,.10);
  --line-strong:rgba(241,239,233,.20);
  --accent:#C2A05B;
  --accent-viva:#D4B26C;
  --on-accent:#120E07;
  --font-display:"Playfair Display", Georgia, serif;
  --font-body:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --maxw:1200px;
  --gutter:clamp(20px, 6vw, 72px);
  --sezione:clamp(72px, 10vw, 130px);
  --ease:cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing:border-box; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior:smooth; } }
body {
  margin:0;
  background:var(--srf-0);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:18px;
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img { max-width:100%; height:auto; display:block; }
::selection { background:var(--accent); color:var(--on-accent); }

a { color:inherit; text-decoration:none; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

.contenitore { max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

body::after {
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.045; mix-blend-mode:overlay;
  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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.salta {
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--accent); color:var(--on-accent);
  padding:10px 18px; font-weight:600; font-size:.85rem;
  text-transform:uppercase; letter-spacing:.12em; border-radius:2px;
}
.salta:focus { left:12px; top:12px; }

.sr-solo {
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

.segno { display:inline-block; width:22px; height:22px; color:var(--ink-faint); }
.segno svg { display:block; width:100%; height:100%; overflow:visible; }

.testata { border-bottom:1px solid var(--line); }
.testata-int {
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; min-height:72px;
}
.marchio { display:flex; align-items:center; gap:14px; }
.marchio .segno { color:var(--accent); width:18px; height:18px; }
.marchio-nome {
  font-family:var(--font-display); font-weight:600; font-size:1rem;
  letter-spacing:.32em; text-transform:uppercase; color:var(--ink);
}
.marchio-nome em { font-style:normal; color:var(--ink-soft); }
.nav-principale { display:flex; flex-wrap:wrap; gap:clamp(16px, 3vw, 36px); }
.nav-principale a {
  font-size:.78rem; font-weight:500; text-transform:uppercase;
  letter-spacing:.14em; color:var(--ink-soft); padding-block:6px;
  background:linear-gradient(var(--accent), var(--accent)) left bottom / 0 1px no-repeat;
  transition:color .3s var(--ease), background-size .35s var(--ease);
}
.nav-principale a:hover { color:var(--ink); background-size:100% 1px; }

.apertura { position:relative; text-align:center; padding-block:clamp(64px, 9vw, 112px); overflow:hidden; }
.apertura::before {
  content:""; position:absolute; inset:-10% -20%; pointer-events:none;
  background:radial-gradient(46% 38% at 50% 26%, rgba(194,160,91,.11), transparent 68%);
}
.apertura > .contenitore { position:relative; }
.apertura .segno { margin-bottom:26px; }

.cerchio-rituale {
  position:absolute; top:50%; left:50%; translate:-50% -50%;
  width:min(780px, 112vw); aspect-ratio:1; pointer-events:none; color:var(--accent);
}
.cerchio-rituale svg { width:100%; height:100%; overflow:visible; fill:none; stroke:currentColor; }
.cr-orlo    { stroke-width:.5;  opacity:.17; stroke-dasharray:1; }
.cr-interno { stroke-width:.45; opacity:.11; stroke-dasharray:1; }
.cr-soglia  { stroke-width:.45; opacity:.08; stroke-dasharray:1; }
.cr-punti, .cr-punti-2 {
  stroke-width:1.7; stroke-linecap:round;
  transform-box:fill-box; transform-origin:center;
}
.cr-punti   { stroke-dasharray:.1 13; opacity:.22; }
.cr-punti-2 { stroke-dasharray:.1 9;  opacity:.14; }

.braci { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.brace {
  position:absolute; bottom:-10px; width:3px; height:3px; border-radius:50%;
  background:var(--accent-viva); opacity:0;
  box-shadow:0 0 7px 1px rgba(212,178,108,.45);
}
.occhiello {
  display:block; font-size:.72rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.2em; color:var(--ink-faint); margin-bottom:22px;
}
.apertura h1 {
  margin:0 auto; max-width:16ch;
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(2.6rem, 6.4vw, 4.4rem); line-height:1.04;
  letter-spacing:-.01em;
}
.apertura .lettera {
  margin:26px auto 0;
  font-size:clamp(1.15rem, 1.6vw, 1.35rem); line-height:1.6;
  color:var(--ink-soft);
}

.parola { display:inline-block; overflow:hidden; vertical-align:bottom;
  padding-bottom:.16em; margin-bottom:-.16em; --i:0; }
.parola:nth-child(2) { --i:1; }
.parola:nth-child(3) { --i:2; }
.parola:nth-child(4) { --i:3; }
.parola:nth-child(5) { --i:4; }
.parola:nth-child(6) { --i:5; }
.parola:nth-child(7) { --i:6; }
.parola:nth-child(n+8) { --i:7; }
.parola > span { display:inline-block; }

@media (prefers-reduced-motion: no-preference) {
  .apertura .segno,
  .apertura .occhiello,
  .apertura .lettera { animation:sale .9s var(--ease) both; }
  .apertura .segno { animation-delay:.05s; }
  .apertura .occhiello { animation-delay:.22s; }
  .apertura .parola > span { animation:sale .95s var(--ease) both;
    animation-delay:calc(.34s + var(--i) * .055s); }
  .apertura .lettera { animation-delay:.72s; }

  @keyframes sale { from { opacity:0; transform:translateY(.85em); } to { opacity:1; transform:translateY(0); } }

  .apertura .segno [pathLength] { animation:traccia 1.5s var(--ease) .15s both; }
  @keyframes traccia { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }

  .cr-orlo    { stroke-dashoffset:1; animation:traccia 2.4s var(--ease) .2s forwards; }
  .cr-interno { stroke-dashoffset:1; animation:traccia 2.4s var(--ease) .55s forwards; }
  .cr-soglia  { stroke-dashoffset:1; animation:traccia 2.8s var(--ease) .9s forwards; }
  .cr-punti   { animation:gira 210s linear infinite; }
  .cr-punti-2 { animation:gira 160s linear infinite reverse; }
  @keyframes gira { to { transform:rotate(360deg); } }

  .apertura::before { animation:fiamma 9s ease-in-out 1s infinite alternate; }
  @keyframes fiamma {
    from { opacity:.72; transform:scale(1); }
    55%  { opacity:1;   transform:scale(1.015); }
    to   { opacity:.86; transform:scale(.99); }
  }
}
.segno [pathLength] { stroke-dasharray:1; }

.figura {
  position:relative; overflow:hidden; border:1px solid var(--line-strong);
  border-radius:2px; background:var(--srf-1); display:block;
  transition:border-color .45s var(--ease);
}
a.figura:hover, a:hover > .figura { border-color:rgba(194,160,91,.5); }
.figura-fondo {
  position:absolute; inset:-8% 0;
  background:
    radial-gradient(120% 90% at 18% 0%, #1D1A17 0%, transparent 55%),
    radial-gradient(90% 70% at 90% 100%, rgba(194,160,91,.07), transparent 60%),
    linear-gradient(165deg, #181615 0%, #100F0E 58%, #0C0B0B 100%);
}
.figura-fondo::after {
  content:""; position:absolute; inset:0; margin:auto; width:32%; aspect-ratio:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F1EFE9' stroke-opacity='0.07' stroke-width='0.6'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3C/svg%3E");
  background-size:contain; background-repeat:no-repeat; background-position:center;
}
.figura-nota {
  position:absolute; left:14px; bottom:12px;
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint);
}

.evidenza { padding-block:var(--sezione); border-top:1px solid var(--line); }
.evidenza-int {
  display:grid; grid-template-columns:7fr 5fr;
  gap:clamp(28px, 4.5vw, 64px); align-items:center;
}
.evidenza .figura { aspect-ratio:4 / 3; }
.evidenza-testo .occhiello { color:var(--accent); margin-bottom:16px; }
.evidenza-testo h2 {
  margin:0; font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.8rem, 3.4vw, 2.7rem); line-height:1.12; letter-spacing:-.008em;
}
.evidenza-testo h2 a { transition:color .3s var(--ease); }
.evidenza-testo h2 a:hover { color:var(--accent-viva); }
.evidenza-testo .estratto { margin:20px 0 0; color:var(--ink-soft); }
.firma-riga {
  margin-top:26px; padding-top:18px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:8px 28px;
  font-size:.72rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.18em; color:var(--ink-faint);
}
.firma-riga .autore { color:var(--ink-soft); transition:color .3s var(--ease); }
.firma-riga a.autore:hover { color:var(--accent); }

.coppia { padding-bottom:var(--sezione); }
.coppia-int { display:grid; grid-template-columns:6fr 5fr; gap:clamp(28px, 4vw, 56px); }
.scheda { display:flex; flex-direction:column; }
.scheda .figura { aspect-ratio:16 / 10; }
.scheda:nth-child(2) { margin-top:clamp(24px, 4vw, 56px); }
.scheda-corpo { padding-top:20px; }
.scheda-corpo .categoria {
  font-size:.7rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.18em; color:var(--accent); transition:color .3s var(--ease);
}
.scheda-corpo .categoria:hover { color:var(--accent-viva); }
.scheda-corpo h3 {
  margin:10px 0 0; font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.35rem, 2.2vw, 1.75rem); line-height:1.18;
}
.scheda-corpo h3 a { transition:color .3s var(--ease); }
.scheda-corpo h3 a:hover { color:var(--accent-viva); }
.scheda-corpo .estratto { margin:12px 0 0; font-size:.98rem; color:var(--ink-soft); }
.scheda-corpo .meta {
  margin-top:14px; font-size:.7rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.16em; color:var(--ink-faint);
}

.registro { padding-block:var(--sezione); background:var(--srf-1); border-block:1px solid var(--line); }
.titolo-sezione { text-align:center; margin-bottom:clamp(40px, 6vw, 64px); }
.titolo-sezione .segno { margin-bottom:18px; width:20px; height:20px; }
.titolo-sezione h2 {
  margin:0; font-family:var(--font-display); font-weight:500;
  font-size:clamp(2rem, 4.2vw, 3rem); line-height:1.06;
}
.registro-griglia {
  display:grid; grid-template-columns:1fr 1fr;
  column-gap:clamp(40px, 6vw, 88px);
}
.voce { position:relative; padding-block:24px 26px; }
.voce::before {
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:var(--line-strong); transform-origin:left center;
  transform:scaleX(var(--sx, 1));
}
.voce h3 {
  margin:0; font-family:var(--font-display); font-weight:500;
  font-size:1.32rem; line-height:1.22;
}
.voce h3 a { transition:color .3s var(--ease); }
.voce h3 a:hover { color:var(--accent-viva); }
.voce .meta {
  margin-top:10px; font-size:.7rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.16em; color:var(--ink-faint);
}
.voce .meta a { color:var(--ink-soft); transition:color .3s var(--ease); }
.voce .meta a:hover { color:var(--accent); }
.registro-coda { margin-top:clamp(36px, 5vw, 56px); text-align:center; }

.filo {
  display:inline-block; border:1px solid var(--line-strong); border-radius:2px;
  padding:15px 34px; min-height:52px;
  font-size:.74rem; font-weight:600; text-transform:uppercase; letter-spacing:.16em;
  color:var(--ink); background:transparent;
  transition:border-color .35s var(--ease), color .35s var(--ease), background .35s var(--ease);
}
.filo:hover { border-color:var(--accent); color:var(--accent-viva); background:rgba(194,160,91,.06); }

.firma { background:var(--nero); border-bottom:1px solid var(--line); padding-block:var(--sezione); }
.firma-int {
  display:grid; grid-template-columns:auto 1fr; gap:clamp(24px, 4vw, 52px);
  align-items:center;
}
.ritratto {
  width:clamp(120px, 15vw, 172px); aspect-ratio:1;
  border:1px solid var(--line-strong); border-radius:2px; position:relative;
  overflow:hidden; background:var(--srf-1);
}
.ritratto img { width:100%; height:100%; object-fit:cover; filter:saturate(.92); }
.firma-testo .occhiello { color:var(--ink-faint); margin-bottom:14px; }
.firma-testo h2 {
  margin:0; font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.7rem, 3vw, 2.3rem); line-height:1.1;
}
.firma-testo p { margin:16px 0 0; color:var(--ink-soft); font-size:1rem; }
.credenziali {
  list-style:none; margin:22px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:10px 28px;
  font-size:.7rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.16em; color:var(--ink-faint);
}
.firma-testo .andare {
  display:inline-block; margin-top:24px;
  font-size:.74rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.16em; color:var(--accent);
  background:linear-gradient(var(--accent), var(--accent)) left bottom / 0 1px no-repeat;
  transition:background-size .35s var(--ease), color .3s var(--ease);
}
.firma-testo .andare:hover { color:var(--accent-viva); background-size:100% 1px; }

.piede { background:var(--nero); }
.piede-int {
  padding-block:clamp(48px, 7vw, 80px) 36px;
  display:flex; flex-direction:column; align-items:center; gap:28px;
  text-align:center;
}

.sigillo {
  position:relative; display:block;
  width:clamp(190px, 27vw, 292px); aspect-ratio:1;
}
.sigillo img { position:absolute; inset:0; width:100%; height:100%; }
.sigillo-anello { will-change:transform; }
.sigillo-centro { pointer-events:none; }
.piede-nav { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 32px; }
.piede-nav a {
  font-size:.74rem; font-weight:500; text-transform:uppercase;
  letter-spacing:.14em; color:var(--ink-soft); transition:color .3s var(--ease);
  display:inline-block; padding-block:13px;
}
.piede-nav a:hover { color:var(--ink); }
.piede-legale {
  border-top:1px solid var(--line); width:100%; padding-top:24px;
  font-size:.78rem; color:var(--ink-faint);
}

.moto .rivela,
.moto .cascata > * { opacity:0; animation:moto-rete .01s linear 3s forwards; }
.moto .figura-velo { clip-path:inset(0 0 100% 0); animation:moto-rete-velo .01s linear 3s forwards; }
.moto .voce { --sx:0; }
.moto .sigillo { opacity:0; animation:moto-rete .01s linear 3s forwards; }

@keyframes moto-rete { to { opacity:1; } }
@keyframes moto-rete-velo { to { clip-path:inset(0 0 0% 0); } }

@media (max-width: 900px) {
  .evidenza-int, .coppia-int, .registro-griglia { grid-template-columns:1fr; }
  .coppia-int { gap:44px; }
  .scheda:nth-child(2) { margin-top:0; }
  .registro-griglia { column-gap:0; }
  .firma-int { grid-template-columns:1fr; text-align:center; justify-items:center; }
  .credenziali { justify-content:center; }
  .firma-testo p { margin-inline:auto; }
}
@media (max-width: 700px) {
  .testata-int { flex-direction:column; align-items:flex-start; gap:10px; padding-block:16px; }
  .apertura h1 { max-width:none; }
  .nav-principale a { padding-block:12px; }
}

.figura > img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter:saturate(.92);
}

.banda-autori { padding-block:var(--sezione); border-top:1px solid var(--line); }
.banda-griglia {
  list-style:none; margin:36px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(118px, 1fr));
  gap:clamp(16px, 2vw, 26px);
}
.banda-griglia li { text-align:center; }
.banda-griglia a { display:block; }
.penna-ritratto {
  display:block; aspect-ratio:1; overflow:hidden;
  border:1px solid var(--line-strong); border-radius:2px; background:var(--srf-1);
  transition:border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.penna-ritratto img { width:100%; height:100%; object-fit:cover; filter:saturate(.92); }
.banda-griglia a:hover .penna-ritratto {
  border-color:rgba(194,160,91,.5);
  box-shadow:0 0 26px rgba(194,160,91,.18);
}
.banda-griglia a:hover .penna-nome { color:var(--accent-viva); }
.penna-nome {
  display:block; margin-top:12px; font-size:.86rem; font-weight:600;
  color:var(--ink); transition:color .3s var(--ease);
}
.penna-campo { display:block; margin-top:4px; font-size:.74rem; color:var(--ink-faint); }