/* ============================================================
   MARCELLO CIRILLO — sistema di design "manifesto teatrale"
   Inchiostro scuro / ottone / rosso velluto (con parsimonia)
   Archivio in bianco e nero, presente a colori.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,500;1,9..144,700&family=Inter:wght@400;500;600;700&family=Oswald:wght@400;500;600;700&display=swap');

:root{
  --ink:        #0e1626;
  --ink-2:      #182236;
  --paper:      #faf8f4;
  --paper-2:    #f2ede4;
  --brass:      #9c7a34;
  --brass-2:    #c9a34e;
  --velvet:     #6e1423;
  --velvet-2:   #8a1b2c;
  --line:       rgba(14,22,38,0.12);
  --line-dark:  rgba(250,248,244,0.16);
  --ink-soft:   rgba(14,22,38,0.68);
  --paper-soft: rgba(250,248,244,0.72);

  --serif: 'Fraunces', Georgia, serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --cond:  'Oswald', sans-serif;

  --maxw: 1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 1.4rem; }

/* ---------- Eyebrow / condensed utility label ---------- */
.eyebrow{
  font-family:var(--cond);
  text-transform:uppercase;
  letter-spacing:0.16em;
  font-size:0.72rem;
  font-weight:600;
  color:var(--brass);
}
.eyebrow.on-dark{ color:var(--brass-2); }

.portrait-badge{
  display:flex; align-items:center; gap:0.7rem;
  margin-bottom:0.9rem;
}
.portrait-badge img{
  width:52px; height:52px; border-radius:50%; object-fit:cover;
  border:2px solid var(--brass-2);
}
.portrait-badge span{
  font-family:var(--cond); text-transform:uppercase; letter-spacing:0.08em;
  font-size:0.7rem; color:var(--paper-soft);
}

/* ---------- Headings ---------- */
h1,h2,h3{ font-family:var(--serif); margin:0; color:var(--ink); }
.h1{ font-size:clamp(2.4rem,7vw,4.4rem); font-weight:700; line-height:1.02; letter-spacing:-0.01em; }
.h2{ font-size:clamp(1.9rem,4.6vw,2.8rem); font-weight:600; line-height:1.08; }
.h3{ font-size:clamp(1.3rem,3vw,1.6rem); font-weight:600; }
.on-dark, .on-dark h1, .on-dark h2, .on-dark h3{ color:var(--paper); }

.rule{ width:52px; height:2px; background:var(--brass); border:0; margin:1rem 0 0; }
.rule.center{ margin-left:auto; margin-right:auto; }

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--cond);
  text-transform:uppercase;
  letter-spacing:0.09em;
  font-size:0.8rem;
  font-weight:600;
  padding:0.9em 1.7em;
  border-radius:2px;
  display:inline-block;
  border:1px solid var(--brass);
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, color .18s ease;
}
.btn-solid{ background:var(--brass); color:var(--ink); }
.btn-solid:hover{ background:var(--brass-2); transform:translateY(-1px); }
.btn-outline{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--paper); }
.on-dark .btn-outline{ color:var(--paper); border-color:var(--brass-2); }
.on-dark .btn-outline:hover{ background:var(--brass-2); color:var(--ink); }
.btn-velvet{ background:var(--velvet); color:var(--paper); border-color:var(--velvet); }
.btn-velvet:hover{ background:var(--velvet-2); transform:translateY(-1px); }

.cta-row{ display:flex; gap:0.9rem; flex-wrap:wrap; }

/* ---------- Header / nav ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--ink);
  border-bottom:1px solid var(--line-dark);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:60px;
}
.wordmark{
  font-family:var(--cond); text-transform:uppercase; letter-spacing:0.14em;
  font-size:0.92rem; font-weight:600; color:var(--paper);
}
.wordmark span{ color:var(--brass-2); }
.nav-toggle{
  background:none; border:1px solid var(--line-dark); color:var(--paper);
  width:38px; height:38px; border-radius:2px; font-family:var(--cond); font-size:0.85rem;
}
.main-nav{
  display:none;
  position:fixed; inset:60px 0 0 0; z-index:49;
  background:var(--ink); overflow-y:auto;
  padding:1rem 0 3rem;
}
.main-nav.open{ display:block; }
.main-nav a{
  display:block; padding:1.05rem 1.4rem;
  font-family:var(--cond); text-transform:uppercase; letter-spacing:0.08em;
  font-size:1rem; color:var(--paper-soft);
  border-bottom:1px solid var(--line-dark);
}
.main-nav a.current{ color:var(--brass-2); }
.main-nav .nav-cta{ padding:1.6rem 1.4rem 0; }

@media (min-width:920px){
  .nav-toggle{ display:none; }
  .main-nav{
    display:flex; position:static; inset:auto; background:none; padding:0;
    align-items:center; gap:1.6rem; overflow:visible;
  }
  .main-nav a{
    padding:0; border:0; font-size:0.76rem; letter-spacing:0.1em;
  }
  .main-nav a:hover{ color:var(--brass-2); }
  .main-nav .nav-cta{ padding:0; margin-left:0.4rem; }
  .main-nav .nav-cta .btn{ padding:0.6em 1.2em; font-size:0.72rem; }
}

/* ---------- Sections ---------- */
section{ padding:clamp(3rem,7vw,5.5rem) 0; }
section.dark{ background:var(--ink); color:var(--paper); }
section.paper2{ background:var(--paper-2); }
.section-head{ margin-bottom:2.4rem; }
.section-head.center{ text-align:center; }

/* ---------- Hero (home) ---------- */
.hero{
  position:relative;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(156,122,52,0.14), transparent 55%),
    linear-gradient(180deg, var(--ink), #1d1611 70%, var(--ink-2));
  color:var(--paper);
  padding:clamp(3rem,9vw,6rem) 0 clamp(3.5rem,8vw,5rem);
}
.hero-grid{
  display:grid; gap:2.4rem;
  grid-template-columns:1fr;
  align-items:center;
}
@media (min-width:860px){
  .hero-grid{ grid-template-columns:1.05fr 0.95fr; gap:3rem; }
}
.hero-media{
  position:relative;
  border:1px solid var(--line-dark);
  padding:10px;
  aspect-ratio:4/5;
  overflow:hidden;
}
.hero-media img, .hero-media video{ width:100%; height:100%; display:block; object-fit:cover; }
.hero-media::before, .hero-media::after{
  content:""; position:absolute; width:26px; height:26px;
  border:2px solid var(--brass-2);
}
.hero-media::before{ top:0; left:0; border-right:0; border-bottom:0; }
.hero-media::after{ bottom:0; right:0; border-left:0; border-top:0; }

.hero-now{
  font-family:var(--cond); text-transform:uppercase; letter-spacing:0.1em;
  font-size:0.78rem; color:var(--velvet-2);
  background:rgba(110,20,35,0.14); border:1px solid rgba(138,27,44,0.5);
  display:inline-block; padding:0.4em 0.9em; border-radius:2px; margin-bottom:1rem;
}
.hero h1{ margin-top:0.3rem; }
.hero .lede{ color:var(--paper-soft); font-size:1.06rem; max-width:44ch; margin:1.1rem 0 1.6rem; }

/* ---------- Trust / stat strip ---------- */
.stat-strip{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem 1rem;
}
@media (min-width:700px){ .stat-strip{ grid-template-columns:repeat(4,1fr); } }
.stat{ border-top:2px solid var(--brass); padding-top:0.7rem; }
.stat .num{ font-family:var(--serif); font-weight:700; font-size:clamp(1.7rem,4vw,2.3rem); }
.stat .label{ font-family:var(--cond); text-transform:uppercase; letter-spacing:0.06em; font-size:0.72rem; color:var(--ink-soft); }
.on-dark .stat .label{ color:var(--paper-soft); }

/* ---------- Card grid (spettacoli) ---------- */
.card-grid{ display:grid; gap:1.4rem; grid-template-columns:1fr; }
@media (min-width:700px){ .card-grid{ grid-template-columns:repeat(2,1fr); } }
.show-card{
  position:relative; display:block; background:var(--ink); overflow:hidden;
  border:1px solid var(--line);
}
.show-card .media{ aspect-ratio:4/3; overflow:hidden; }
.show-card .media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.show-card:hover .media img{ transform:scale(1.04); }
.show-card .body{ padding:1.4rem 1.5rem 1.6rem; color:var(--paper); }
.show-card .eyebrow{ color:var(--brass-2); }
.show-card h3{ color:var(--paper); margin:0.4rem 0 0.5rem; }
.show-card p{ color:var(--paper-soft); font-size:0.94rem; margin:0 0 1rem; }
.show-card .tag{
  font-family:var(--cond); font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink); background:var(--brass-2); display:inline-block; padding:0.25em 0.6em; border-radius:2px;
}

/* ---------- Archive vs live photography ---------- */
.archive-img{ filter:grayscale(1) contrast(1.05); }
.live-img{ filter:none; }
.archive-tag, .live-tag{
  font-family:var(--cond); text-transform:uppercase; letter-spacing:0.08em; font-size:0.66rem;
  padding:0.25em 0.6em; border-radius:2px; display:inline-block;
}
.archive-tag{ background:var(--paper-2); color:var(--ink-soft); border:1px solid var(--line); }
.live-tag{ background:var(--velvet); color:var(--paper); }

/* ---------- Date list ---------- */
.date-list{ border-top:1px solid var(--line); }
.date-row{
  display:grid; grid-template-columns:auto 1fr auto; gap:1rem 1.2rem;
  align-items:center; padding:1.3rem 0; border-bottom:1px solid var(--line);
}
.date-row .d{
  font-family:var(--cond); text-align:center; line-height:1;
  border:1px solid var(--brass); padding:0.5rem 0.7rem; min-width:64px;
}
.date-row .d .day{ font-size:1.5rem; font-weight:600; display:block; }
.date-row .d .mon{ font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--brass); }
.date-row .info .show{ font-family:var(--serif); font-weight:600; font-size:1.08rem; }
.date-row .info .place{ font-family:var(--cond); text-transform:uppercase; letter-spacing:0.05em; font-size:0.76rem; color:var(--ink-soft); margin-top:0.2rem; }
.date-row .actions{ display:flex; gap:0.6rem; flex-wrap:wrap; }
.date-row .actions .btn{ padding:0.6em 1.1em; font-size:0.7rem; }
@media (max-width:600px){
  .date-row{ grid-template-columns:auto 1fr; }
  .date-row .actions{ grid-column:1 / -1; }
}

/* ---------- Timeline (carriera) ---------- */
.timeline{ position:relative; max-width:820px; }
.timeline::before{ content:""; position:absolute; left:96px; top:6px; bottom:6px; width:1px; background:var(--line); }
@media (max-width:600px){ .timeline::before{ left:20px; } }
.t-item{ position:relative; padding-left:140px; margin-bottom:2.3rem; }
@media (max-width:600px){ .t-item{ padding-left:52px; } }
.t-item .yr{
  position:absolute; left:0; top:2px; width:84px; text-align:right;
  font-family:var(--cond); font-weight:600; color:var(--brass); font-size:0.9rem;
}
@media (max-width:600px){ .t-item .yr{ position:static; display:block; text-align:left; margin-bottom:0.2rem; } }
.t-item::before{ content:""; position:absolute; left:92px; top:6px; width:9px; height:9px; border-radius:50%; background:var(--brass); box-shadow:0 0 0 3px var(--paper); }
@media (max-width:600px){ .t-item::before{ left:16px; } }
.t-item h3{ font-size:1.1rem; margin-bottom:0.3rem; }
.t-item p{ margin:0; color:var(--ink-soft); font-size:0.96rem; }

/* ---------- Fact table (scheda tecnica) ---------- */
.fact-table{ width:100%; border-collapse:collapse; }
.fact-table tr{ border-bottom:1px solid var(--line); }
.fact-table td{ padding:0.85rem 0.4rem; vertical-align:top; font-size:0.95rem; }
.fact-table td:first-child{
  font-family:var(--cond); text-transform:uppercase; letter-spacing:0.05em; font-size:0.72rem;
  color:var(--ink-soft); width:38%; padding-right:1rem;
}

/* ---------- Orchestra list ---------- */
.roster{ display:grid; grid-template-columns:1fr; gap:0; border-top:1px solid var(--line); }
@media (min-width:640px){ .roster{ grid-template-columns:1fr 1fr; } }
.roster .r{ display:flex; justify-content:space-between; gap:1rem; padding:0.75rem 0.2rem; border-bottom:1px solid var(--line); font-size:0.92rem; }
.roster .r .instr{ color:var(--ink-soft); font-family:var(--cond); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.04em; }

/* ---------- Form ---------- */
.form-field{ margin-bottom:1.1rem; }
.form-field label{ display:block; font-family:var(--cond); text-transform:uppercase; letter-spacing:0.06em; font-size:0.72rem; margin-bottom:0.4rem; color:var(--ink-soft); }
.form-field input, .form-field select, .form-field textarea{
  width:100%; padding:0.75em 0.9em; font-family:var(--sans); font-size:0.96rem;
  border:1px solid var(--line); background:var(--paper); border-radius:2px;
}
.form-field textarea{ resize:vertical; min-height:110px; }
.choice-row{ display:grid; grid-template-columns:1fr 1fr; gap:0.8rem; }
@media (max-width:520px){ .choice-row{ grid-template-columns:1fr; } }
.choice-card{
  border:1px solid var(--line); padding:1.2rem; cursor:pointer; text-align:left;
  background:var(--paper); transition:border-color .15s ease, background .15s ease;
}
.choice-card:hover{ border-color:var(--brass); }
.choice-card.selected{ border-color:var(--brass); background:var(--paper-2); }
.choice-card h3{ font-size:1.02rem; margin-bottom:0.3rem; }
.choice-card p{ margin:0; font-size:0.86rem; color:var(--ink-soft); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:var(--paper); padding:3rem 0 2rem; }
.footer-grid{ display:grid; gap:2rem; grid-template-columns:1fr; }
@media (min-width:760px){ .footer-grid{ grid-template-columns:1.2fr 1fr 1fr; } }
.footer-grid h3{ color:var(--brass-2); font-size:1rem; margin-bottom:0.8rem; }
.footer-grid a{ display:block; color:var(--paper-soft); font-size:0.92rem; margin-bottom:0.5rem; }
.footer-grid a:hover{ color:var(--brass-2); }
.foot-bottom{ border-top:1px solid var(--line-dark); margin-top:2.4rem; padding-top:1.4rem; font-family:var(--cond); font-size:0.7rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--paper-soft); }

/* ---------- Utility ---------- */
.mt-0{ margin-top:0; }
.small{ font-size:0.88rem; }
.center{ text-align:center; }
.gold-list{ list-style:none; padding:0; margin:0; }
.gold-list li{ padding-left:1.4rem; position:relative; margin-bottom:0.6rem; }
.gold-list li::before{ content:"—"; position:absolute; left:0; color:var(--brass); }

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