/* ═══════════════════════════════════════════════════════════════════
   AD MAIOREM DEI GLORIAM — proposta visiva e accessibilità
   Direzione: legatura in pelle dorata, alta leggibilità.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --ink:      #100e0c;   /* nero d'inchiostro, caldo */
  --ink-2:    #191512;
  --oxblood:  #34191f;   /* rosso sangue di bue, banda penitenziale */
  --gilt:     #c19a4e;   /* oro brunito */
  --gilt-hi:  #eed79b;   /* riflesso della doratura */
  --gilt-lo:  #8f6d2f;
  --vellum:   #e9e2d3;   /* pergamena */
  --vellum-2: #ded5c2;
  --text:     #1a1714;   /* testo scuro rafforzato per contrasto */
  --text-2:   #4a433a;
  --stone:    #e6dfd1;   /* testo su fondo scuro */

  /* Fontes tradicionais de altíssima legibilidade */
  --display:  "Cormorant Garamond", Georgia, serif;
  --roman:    "Cinzel", "Times New Roman", serif;
  --body:     "Spectral", Georgia, serif;
  --util:     "Archivo", Helvetica, Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0; background:var(--ink); color:var(--text);
  font-family:var(--body); font-size:1.125rem; line-height:1.8; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
:focus-visible{outline:2px solid var(--gilt);outline-offset:4px}

/* ── grana della carta ───────────────────────────────────────────── */
.grain::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light; opacity:.55;
}
section,header,footer{position:relative}
.inner{position:relative;z-index:2}

/* ── impalcatura ──────────────────────────────────────────────────── */
.wrap{width:100%;max-width:70rem;margin-inline:auto;padding-inline:1.75rem}
.measure{max-width:34em}
.measure-w{max-width:44em}
.center{text-align:center}
.mx{margin-inline:auto}

.band{padding-block:7rem}
.band--vellum{background:var(--vellum);color:var(--text)}
.band--vellum-2{background:var(--vellum-2)}
.band--ink{background:var(--ink);color:var(--stone)}
.band--ox{background:var(--oxblood);color:#efe4dc}
@media(max-width:700px){.band{padding-block:4.25rem}}

/* ── oro su fondo scuro ───────────────────────────────────────────── */
.gilt{
  background:linear-gradient(96deg,var(--gilt-lo) 0%,var(--gilt-hi) 34%,var(--gilt) 58%,var(--gilt-hi) 82%,var(--gilt-lo) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--gilt);
}

/* ── etichette e titoli ───────────────────────────────────────────── */
.eyebrow{
  font-family:var(--util); font-size:.75rem; font-weight:600;
  letter-spacing:.3em; text-transform:uppercase; color:var(--gilt-lo);
  margin:0 0 1.5rem;
}
.band--vellum .eyebrow, .band--vellum-2 .eyebrow {
  color: var(--oxblood);
}

h1,h2,h3{font-family:var(--display);font-weight:600;margin:0;font-optical-sizing:auto}
.h1{font-family:var(--roman);font-size:clamp(2.2rem,5vw,3.8rem);line-height:1.1;letter-spacing:.02em}
.h2{font-size:clamp(2rem,4vw,3.1rem);line-height:1.2;letter-spacing:-.005em;margin-bottom:1.5rem}
.h3{font-size:1.45rem;line-height:1.3;margin-bottom:.6rem;font-weight:600}
.lede{font-size:clamp(1.15rem,1.8vw,1.35rem);line-height:1.7;color:var(--text-2);font-weight:400}
.band--ink .lede,.band--ox .lede{color:rgba(230,223,209,.85)}
p{margin:0 0 1.3rem}p:last-child{margin-bottom:0}
.band--ink p:not(.lede):not(.eyebrow):not(.micro),.band--ox p:not(.lede):not(.eyebrow):not(.micro){color:rgba(230,223,209,.9)}
.micro{font-family:var(--util);font-size:.82rem;line-height:1.6;letter-spacing:.02em;color:var(--text-2)}
.band--ink .micro{color:rgba(230,223,209,.6)}
.stack>*+*{margin-top:1.3rem}

/* ── ornamento ────────────────────────────────────────────────────── */
.fleuron{display:block;margin:2.5rem auto;width:9.5rem;height:auto;color:var(--gilt);opacity:.9}
.fleuron--sm{width:6.5rem;margin:1.75rem auto}

/* ═══ EROE ══════════════════════════════════════════════════════════ */
.hero{
  background:radial-gradient(120% 85% at 50% 6%,#241d17 0%,var(--ink) 52%,#0a0908 100%);
  padding:5rem 1.75rem 6rem; text-align:center; overflow:hidden;
}
.hero__tooling{position:absolute;inset:1.5rem;pointer-events:none;z-index:2}
.hero__tooling::before,.hero__tooling::after{content:"";position:absolute;inset:0;border:1px solid}
.hero__tooling::before{border-color:rgba(193,154,78,.42)}
.hero__tooling::after{inset:.5rem;border-color:rgba(193,154,78,.17)}
.hero__corner{position:absolute;width:2.6rem;height:2.6rem;color:var(--gilt);opacity:.7}
.hero__corner--tl{top:-.1rem;left:-.1rem}
.hero__corner--tr{top:-.1rem;right:-.1rem;transform:scaleX(-1)}
.hero__corner--bl{bottom:-.1rem;left:-.1rem;transform:scaleY(-1)}
.hero__corner--br{bottom:-.1rem;right:-.1rem;transform:scale(-1,-1)}

.hero__inner{position:relative;z-index:3;max-width:44rem;margin-inline:auto}
.emblem{width:clamp(9rem,22vw,12.5rem);height:auto;margin:0 auto 2.25rem;display:block}
.hero__title{
  font-family:var(--roman);font-weight:600;
  font-size:clamp(2.15rem,6.2vw,4.2rem);line-height:1.08;letter-spacing:.02em;
  color:var(--stone);
}
.hero__title small{
  display:block;font-family:var(--util);font-weight:500;
  font-size:clamp(.68rem,1.5vw,.8rem);letter-spacing:.32em;text-transform:uppercase;
  color:rgba(230,223,209,.65);margin-bottom:1.35rem;
}
.hero__motto{
  font-family:var(--display);font-style:italic;font-weight:600;
  font-size:clamp(1.1rem,2.3vw,1.4rem);letter-spacing:.06em;
  margin:1.5rem 0 0;
}
.hero__sub{
  font-family:var(--body);font-weight:300;font-style:italic;
  font-size:clamp(1.08rem,2vw,1.25rem);line-height:1.66;
  color:rgba(230,223,209,.82);max-width:30rem;margin:1.6rem auto 0;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center;margin-top:2.9rem}

/* ── animation ───────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(14px);animation:rise .95s cubic-bezier(.2,.7,.25,1) forwards}
.reveal:nth-child(1){animation-delay:.05s}
.reveal:nth-child(2){animation-delay:.2s}
.reveal:nth-child(3){animation-delay:.38s}
.reveal:nth-child(4){animation-delay:.54s}
.reveal:nth-child(5){animation-delay:.68s}
.reveal:nth-child(6){animation-delay:.82s}
@keyframes rise{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ── pulsanti ─────────────────────────────────────────────────────── */
.btn{
  display:inline-block;font-family:var(--util);font-size:.78rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  padding:.95rem 1.85rem;border:1px solid var(--gilt);color:var(--gilt);
  transition:background .25s,color .25s,box-shadow .25s;
}
.btn:hover{background:rgba(193,154,78,.13);box-shadow:0 0 0 3px rgba(193,154,78,.08)}
.btn--gilt{
  background:linear-gradient(180deg,var(--gilt-hi),var(--gilt) 55%,var(--gilt-lo));
  color:#191512;border-color:transparent;font-weight:700;
}
.btn--gilt:hover{filter:brightness(1.08)}

/* ═══ PRINCIPIO E FONDAMENTO ══════════════════════════════════════ */
.creed{
  font-family:var(--display);font-style:italic;font-weight:600;
  font-size:clamp(1.55rem,3.3vw,2.55rem);line-height:1.35;margin:0;color:var(--ink);
}
.creed__ref{
  display:block;font-family:var(--util);font-size:.72rem;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--oxblood);margin-top:2rem;
}

/* ═══ TRE COLONNE ════════════════════════════════════════════════ */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.pillar{padding:0 2.5rem;border-left:1px solid rgba(36,31,26,.18)}
.pillar:first-child{padding-left:0;border-left:0}
.pillar:last-child{padding-right:0}
.pillar__num{
  font-family:var(--roman);font-size:2.2rem;line-height:1;display:block;
  margin-bottom:1rem;color:var(--oxblood);font-weight:700;
}
@media(max-width:860px){
  .pillars{grid-template-columns:1fr;gap:2.5rem}
  .pillar{padding:0;border-left:0;border-top:1px solid rgba(36,31,26,.18);padding-top:2.25rem}
  .pillar:first-child{border-top:0;padding-top:0}
}

/* ═══ LE QUATTRO SETTIMANE ═══════════════════════════════════════ */
.weeks{list-style:none;margin:3.5rem 0 0;padding:0}
.week{
  display:grid;grid-template-columns:6.5rem 1fr;gap:0 2.5rem;
  padding:2.5rem 0;border-top:1px solid rgba(193,154,78,.25);
}
.week:last-child{border-bottom:1px solid rgba(193,154,78,.25)}
.week__num{font-family:var(--roman);font-size:2.8rem;line-height:.86;font-weight:600;color:var(--gilt-hi)}
.week__ref{
  display:block;font-family:var(--util);font-size:.65rem;letter-spacing:.2em;
  color:rgba(230,223,209,.5);margin-top:.85rem;font-weight:600;
}
.week h3{color:var(--stone)}

/* ═══ ORARIO ══════════════════════════════════════════════════════ */
.horarium{border-top:1px solid rgba(36,31,26,.28)}
.hrow{
  display:flex;align-items:baseline;gap:1rem;padding:.65rem 0;
  border-bottom:1px solid rgba(36,31,26,.15);
}
.hrow__t{
  font-family:var(--util);font-variant-numeric:tabular-nums;font-size:.88rem;
  font-weight:600;color:var(--oxblood);min-width:3.8rem;
}
.hrow__w{font-size:1.02rem;font-weight:500}
.hrow__n{font-family:var(--util);font-size:.72rem;letter-spacing:.06em;color:var(--text-2);margin-left:auto;text-align:right;font-style:italic}

/* ── plate ───────────────────────────────────────────────────────── */
.plate{position:relative;background:var(--ink-2);aspect-ratio:4/5;overflow:hidden}
.plate__hatch{position:absolute;inset:0;opacity:.5}
.plate__frame{position:absolute;inset:.7rem;border:1px solid rgba(193,154,78,.3)}
.plate__label{
  position:absolute;left:0;right:0;bottom:1.6rem;text-align:center;
  font-family:var(--util);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(193,154,78,.85);
}
.plate__cap{font-family:var(--util);font-size:.72rem;color:var(--text-2);margin-top:.85rem;font-style:italic}

.two{display:grid;grid-template-columns:1fr 1fr;gap:4.5rem;align-items:start}
.two--narrow{grid-template-columns:.85fr 1.15fr}
@media(max-width:860px){.two,.two--narrow{grid-template-columns:1fr;gap:3rem}}

/* ═══ PIEDE ══════════════════════════════════════════════════════ */
.foot{background:#0a0908;color:rgba(230,223,209,.7);padding-block:4.5rem;font-size:.95rem}
.foot a{color:rgba(230,223,209,.95);text-decoration:none;border-bottom:1px solid rgba(193,154,78,.4)}
.foot a:hover{border-bottom-color:var(--gilt)}
.foot__cols{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:3rem}
.foot h4{font-family:var(--util);font-size:.68rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gilt);margin:0 0 1rem}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:.55rem}
.foot__mark{font-family:var(--roman);font-size:1.35rem;color:var(--stone);margin-bottom:.7rem}
.foot__legal{margin-top:3.5rem;padding-top:1.75rem;border-top:1px solid rgba(230,223,209,.12);font-family:var(--util);font-size:.72rem;color:rgba(230,223,209,.4)}
@media(max-width:780px){.foot__cols{grid-template-columns:1fr;gap:2.25rem}}

/* ═══ NAVIGAZIONE ════════════════════════════════════════════════ */
.nav{position:absolute;top:0;left:0;right:0;z-index:10}
.nav__in{display:flex;align-items:center;gap:1.5rem;min-height:4.5rem;padding-top:.5rem}
.nav__mark{font-family:var(--roman);font-size:1rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:rgba(230,223,209,.85);margin-right:auto;font-weight:600}
.nav__links{display:flex;gap:1.6rem}
.nav__links a{font-family:var(--util);font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:rgba(230,223,209,.7);padding-bottom:.2rem;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.nav__links a:hover{color:var(--gilt-hi);border-bottom-color:var(--gilt-hi)}
@media(max-width:820px){.nav{position:static;background:#0a0908}.nav__in{flex-wrap:wrap;padding-block:.9rem;gap:.6rem 1.2rem;min-height:0}.nav__mark{flex:1 1 100%;margin-right:0}.nav__links{flex-wrap:wrap;gap:.5rem 1.2rem}}

/* ═══ PÁGINAS INTERNAS (SANT'IGNAZIO, ETC) ═════════════════════ */
.hero--sm {
  padding: 6.5rem 1.75rem 3.5rem;
  text-align: center;
  background: var(--ink);
  color: var(--stone);
}
.dropcap::first-letter {
  font-family: var(--display);
  font-size: 4.2rem;
  line-height: .8;
  float: left;
  margin: 0.2rem 0.6rem 0 0;
  color: var(--oxblood);
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════
   SUBNAV INTERNO E ACCORDIONS (SANT'IGNAZIO, ETC)
   ═══════════════════════════════════════════════════════════════════ */

.subnav {
  background: #100e0c;
  border-top: 1px solid var(--gilt-lo);
  border-bottom: 1px solid var(--gilt-lo);
  padding: 0.75rem 0;
  margin-bottom: 2.5rem;
  position: sticky;
  top: 0;
  z-index: 99;
  box-shadow: 0 4px 15px rgba(0,0,0,0.6);
}
.subnav__in {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 0.8rem;
  font-family: var(--util);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.subnav__in a, 
.subnav__in a:visited {
  color: var(--gilt-hi) !important;
  text-decoration: none !important;
  padding: 0.45rem 0.85rem;
  border: 1px solid rgba(193, 154, 78, 0.4);
  background: rgba(25, 21, 18, 0.9);
  border-radius: 3px;
  transition: all 0.2s ease-in-out;
  display: inline-block;
}
.subnav__in a:hover, 
.subnav__in a:active {
  color: #100e0c !important;
  background: var(--gilt-hi) !important;
  border-color: var(--gilt-hi) !important;
  transform: translateY(-1px);
}

details.chrono-card {
  background: var(--vellum);
  border: 1px solid rgba(193, 154, 78, 0.5);
  margin-bottom: 1rem;
  border-left: 5px solid var(--oxblood);
  border-radius: 3px;
  transition: background 0.2s, box-shadow 0.2s, border-color 0.2s;
}
details.chrono-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-color: var(--oxblood);
}
details.chrono-card summary {
  font-family: var(--roman);
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer !important;
  color: var(--oxblood);
  padding: 1.1rem 1.2rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  -webkit-tap-highlight-color: rgba(193, 154, 78, 0.2);
}
details.chrono-card summary * {
  cursor: pointer !important;
}
details.chrono-card summary::-webkit-details-marker { display: none; }

details.chrono-card summary::after {
  content: "▼ TAP PER APRIRE";
  font-family: var(--util);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #ffffff;
  background: var(--oxblood);
  padding: 0.35rem 0.7rem;
  border-radius: 2px;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
  margin-left: 0.8rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
details.chrono-card[open] summary::after {
  content: "▲ CHIUDI";
  background: var(--gilt-lo);
  color: #ffffff;
}
details.chrono-card summary:hover::after {
  background: var(--gilt);
  color: #100e0c;
}
details.chrono-card .chrono-content {
  padding: 0 1.2rem 1.2rem 1.2rem;
  border-top: 1px dashed rgba(52, 25, 31, 0.2);
  margin-top: 0.2rem;
  padding-top: 0.9rem;
}

/* ════════════════ LIGHTBOX (AMPLIAÇÃO DE IMAGENS) ════════════════ */
img.lightbox-enabled {
  cursor: zoom-in !important;
  transition: transform 0.2s ease, filter 0.2s ease;
}
img.lightbox-enabled:hover {
  filter: brightness(1.05);
}

.lightbox {
  display: none;
  position: fixed;
  z-index: 9999;
  inset: 0;
  background: rgba(10, 9, 8, 0.92);
  backdrop-filter: blur(5px);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 2rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.lightbox.active {
  display: flex;
  opacity: 1;
}
.lightbox__content {
  max-width: 92vw;
  max-height: 82vh;
  object-fit: contain;
  border: 1px solid var(--gilt-lo);
  box-shadow: 0 10px 40px rgba(0,0,0,0.8);
  border-radius: 2px;
}
.lightbox__caption {
  margin-top: 1.2rem;
  color: var(--stone);
  font-family: var(--util);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-align: center;
  max-width: 40rem;
}
.lightbox__close {
  position: absolute;
  top: 1.5rem;
  right: 2rem;
  color: var(--gilt-hi);
  font-size: 2.5rem;
  font-weight: 300;
  cursor: pointer;
  line-height: 1;
  user-select: none;
  transition: color 0.2s;
}
.lightbox__close:hover {
  color: #ffffff;
}