/* Romanelli — sito personale, stile ledger scuro */

:root{
  --bg:         #0a0a0c;
  --surface:    #141317;
  --surface-2:  #1b1a1f;
  --line:       #272529;
  --text:       #ece9e4;
  --text-soft:  #9b98a0;
  --text-faint: #65626a;
  --gold:       #c9a227;
  --gold-bg:    #2a2412;
  --steel:      #6f9fc0;
  --steel-bg:   #16232b;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Work Sans', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
::selection{ background:var(--gold-bg); color:var(--gold); }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
img{ max-width:100%; }

.mono{ font-family:'IBM Plex Mono', ui-monospace, monospace; }

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-faint);
}

h1,h2{ margin:0; text-wrap:balance; font-weight:600; }

p{ margin:0; line-height:1.65; color:var(--text-soft); max-width:60ch; }

/* ---------- NAV ---------- */
.topnav{
  position:fixed; top:0; left:0; right:0; z-index:10;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap;
  gap:8px 20px;
  padding:18px clamp(16px,5vw,48px);
  font-family:'IBM Plex Mono', monospace;
  font-size:.74rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:linear-gradient(180deg, rgba(10,10,12,.75), rgba(10,10,12,0));
}
.topnav .brand{
  color:var(--text-soft);
  text-transform:none;
  letter-spacing:.02em;
  font-size:.82rem;
  white-space:nowrap;
}
.topnav nav{ display:flex; gap:clamp(16px,4vw,28px); }
.topnav nav a{ color:var(--text-soft); transition:color .2s ease; padding:4px 0; }
.topnav nav a:hover, .topnav nav a[aria-current="page"]{ color:var(--gold); }

@media (max-width:520px){
  .topnav{ justify-content:center; text-align:center; }
  .topnav .brand{ width:100%; text-align:center; font-size:.72rem; }
  .topnav nav{ width:100%; justify-content:center; }
}

/* ---------- SHELL ---------- */
.wrap{ max-width:880px; margin:0 auto; padding:clamp(120px,16vw,170px) clamp(20px,5vw,28px) 80px; }
.wrap-narrow{ max-width:640px; }

/* ---------- HOME ---------- */
.home-stage{
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:40px 20px;
  overflow:hidden;
}
.home-logo-wrap{
  position:relative;
  width:min(560px, 80vw);
  aspect-ratio:1 / 1;
  overflow:hidden;
  filter:drop-shadow(0 0 32px rgba(201,162,39,.14));
}
.home-logo{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
/* Il sipario copre il logo e si apre scorrendo lungo la diagonale
   del trend rialzista disegnato nel logo stesso (basso-sx -> alto-dx). */
.home-logo-curtain{
  position:absolute;
  inset:-8%;
  background:#000;
  transform:translate(0, 0);
  animation:curtainOpen 1.7s cubic-bezier(.76,0,.24,1) forwards;
  animation-delay:.25s;
}
@keyframes curtainOpen{
  to{ transform:translate(125%, -125%); }
}
/* Bagliore che si accende sulla punta del trend quando il sipario la scopre */
.home-logo-flare{
  position:absolute;
  top:6%;
  right:3%;
  width:22%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,241,205,.95) 0%, rgba(201,162,39,.35) 42%, transparent 72%);
  opacity:0;
  transform:scale(.5);
  animation:flareBurst 1.1s ease-out forwards;
  animation-delay:1.55s;
  pointer-events:none;
}
@keyframes flareBurst{
  0%{ opacity:0; transform:scale(.5); }
  30%{ opacity:1; transform:scale(1); }
  100%{ opacity:0; transform:scale(1.3); }
}
.home-links{
  margin-top:44px;
  display:flex; gap:28px;
  font-family:'IBM Plex Mono', monospace;
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  opacity:0;
  animation:fadeUp .8s ease forwards;
  animation-delay:1.9s;
}
.home-links a{
  color:var(--text-soft);
  border-bottom:1px solid var(--line);
  padding-bottom:6px;
  transition:color .2s ease, border-color .2s ease;
}
.home-links a:hover{ color:var(--gold); border-color:var(--gold); }
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .home-logo-curtain, .home-logo-flare{ display:none; }
  .home-links{ animation:none; opacity:1; transform:none; }
}

/* ---------- PAGE HEAD ---------- */
.page-head{ padding-bottom:30px; margin-bottom:46px; border-bottom:1px solid var(--line); }
.page-head .eyebrow{ display:block; margin-bottom:14px; }
.page-head h1{ font-size:clamp(1.9rem,4.6vw,2.5rem); line-height:1.12; }
.page-head p{ margin-top:14px; }

/* ---------- LEDGER (performance) ---------- */
.year-select-row{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:24px;
}
.year-select-row .eyebrow{ margin:0; }
.year-select{
  background:var(--surface);
  border:1px solid var(--line);
  color:var(--text);
  padding:9px 36px 9px 14px;
  font-family:'IBM Plex Mono', monospace;
  font-size:.85rem;
  letter-spacing:.04em;
  border-radius:2px;
  appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, var(--text-faint) 50%), linear-gradient(135deg, var(--text-faint) 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 13px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat:no-repeat;
  cursor:pointer;
}
.year-select:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; }

.ledger-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.ledger-grid.single{
  grid-template-columns:1fr;
  max-width:360px;
}
.ledger-cell{
  background:var(--surface);
  padding:28px 24px 26px;
  display:flex; flex-direction:column; gap:16px;
}
.ledger-cell .yr{ font-family:'IBM Plex Mono', monospace; font-size:.8rem; color:var(--text-faint); letter-spacing:.06em; }
.status{
  display:inline-flex; align-items:center; gap:7px;
  font-family:'IBM Plex Mono', monospace;
  font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 9px; border-radius:2px; width:max-content;
}
.status .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.status.closed{ background:var(--gold-bg); color:var(--gold); }
.status.pending{ background:var(--steel-bg); color:var(--steel); }

.metric-row{ display:flex; flex-direction:column; gap:4px; }
.metric-row .label{ font-family:'IBM Plex Mono', monospace; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); }
.metric-row .value{
  font-family:'IBM Plex Mono', monospace;
  font-weight:600;
  font-size:clamp(1.9rem,4.6vw,2.5rem);
  font-variant-numeric:tabular-nums;
  line-height:1;
}
.ledger-cell:first-child .metric-row .value{ color:var(--gold); }
.ledger-cell:last-child .metric-row .value{ color:var(--steel); }
.ledger-cell .note{ font-size:.78rem; color:var(--text-faint); margin-top:4px; }

@media (max-width:620px){ .ledger-grid{ grid-template-columns:1fr; } }

.chart-card{
  margin-top:28px;
  border:1px solid var(--line);
  border-radius:2px;
  padding:22px clamp(14px,4vw,26px) 16px;
  background:var(--surface);
}
.chart-card svg{ display:block; width:100%; height:auto; overflow:visible; }
.chart-caption{ margin-top:12px; font-family:'IBM Plex Mono', monospace; font-size:.68rem; color:var(--text-faint); }

.defs{ margin-top:46px; display:grid; gap:18px; grid-template-columns:1fr 1fr; }
.defs .def h2{ font-size:1.1rem; margin-bottom:8px; }
.defs .def p{ font-size:.92rem; }
@media (max-width:620px){ .defs{ grid-template-columns:1fr; } }

.disclaimer{
  margin-top:50px;
  border-top:1px solid var(--line);
  padding-top:20px;
  font-size:.76rem;
  color:var(--text-faint);
  line-height:1.6;
}

/* ---------- CONTATTI ---------- */
.contact-stage{
  min-height:100vh;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
}
.contact-email{
  font-family:'IBM Plex Mono', monospace;
  font-size:clamp(1.4rem,4vw,2.1rem);
  color:var(--text);
  border-bottom:1px solid var(--line);
  padding-bottom:10px;
  display:inline-block;
  margin-top:26px;
  transition:color .2s ease, border-color .2s ease;
}
.contact-email:hover{ color:var(--gold); border-color:var(--gold); }

footer.site{
  padding:18px clamp(20px,5vw,48px);
  font-family:'IBM Plex Mono', monospace;
  font-size:.68rem;
  color:var(--text-faint);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  border-top:1px solid var(--line);
}
.footer-logo{
  height:64px;
  width:auto;
  opacity:1;
}