/* ==========================================================================
   Archivio della Maratona di Sant'Antonio
   Theme: "Almanacco Veneto" — square-edged civic almanac, indigo + brick + gold
   Custom layer over Bootstrap 5. Bootstrap handles grid + responsive only;
   every visual decision below is bespoke.
   ========================================================================== */

:root {
  --ink:            #171a2b;
  --ink-soft:       #4a5068;
  --ink-faint:      #767d97;

  --indigo:         #2f3aa3;
  --indigo-dark:    #1c2270;
  --indigo-mid:     #4d58c4;
  --indigo-pale:    #7f8ae0;
  --indigo-wash:    #e6e8f6;

  --brick:          #b4472c;
  --brick-dark:     #8c3520;
  --brick-wash:     #f6e9e4;

  --gold:           #d99b1c;
  --gold-pale:      #f0d79a;

  --paper:          #f2f3f7;
  --paper-alt:      #ffffff;
  --paper-deep:     #e4e7f1;
  --rule:           #c9cee2;
  --rule-soft:      #dfe3ee;

  --ff-head: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ff-body: "Literata", Georgia, "Times New Roman", serif;

  --measure: 68ch;
  --shell: 1180px;
}

/* ---------- reset-ish / base ---------------------------------------------- */

* { border-radius: 0 !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: 1.0625rem;
  line-height: 1.72;
  font-weight: 400;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--gold-pale); color: var(--ink); }

a {
  color: var(--indigo);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--indigo-pale);
}
a:hover, a:focus { color: var(--brick); text-decoration-color: var(--brick); }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* Safeguard: content is NEVER hidden waiting on JavaScript.
   Any reveal animation is progressive enhancement only. */
[data-aos] { opacity: 1 !important; transform: none !important; }

.shell { max-width: var(--shell); margin-inline: auto; padding-inline: 1.25rem; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--indigo-dark); color: #fff; padding: .6rem 1rem;
  font-family: var(--ff-head); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
}
.skip-link:focus { left: 0; color: #fff; }

/* ---------- typography ---------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--ff-head);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.012em;
  line-height: 1.16;
}

h1 {
  font-size: clamp(1.95rem, 1.35rem + 2.5vw, 3.05rem);
  margin: 0 0 1.1rem;
}

h2 {
  font-size: clamp(1.32rem, 1.08rem + 1.05vw, 1.78rem);
  margin: 2.9rem 0 .95rem;
  padding-top: .85rem;
  border-top: 3px solid var(--gold);
  max-width: var(--measure);
}

h3 {
  font-size: clamp(1.06rem, .98rem + .38vw, 1.24rem);
  margin: 2rem 0 .7rem;
  color: var(--indigo-dark);
  letter-spacing: .005em;
  max-width: var(--measure);
}

p, ul, ol, blockquote, figure, table { max-width: var(--measure); }
p { margin: 0 0 1.15rem; }

.lead {
  font-size: 1.16rem;
  line-height: 1.66;
  color: var(--ink-soft);
  border-left: 4px solid var(--indigo);
  padding-left: 1.05rem;
  margin-bottom: 1.8rem;
}

article ul, article ol { padding-left: 1.35rem; margin: 0 0 1.3rem; }
article li { margin-bottom: .5rem; }
article li::marker { color: var(--brick); }

blockquote {
  margin: 1.8rem 0;
  padding: 1.05rem 1.3rem;
  background: var(--indigo-wash);
  border-left: 4px solid var(--indigo);
  font-style: italic;
  color: var(--ink-soft);
}
blockquote p:last-child { margin-bottom: 0; }

strong { font-weight: 700; color: var(--ink); }

/* ---------- masthead ------------------------------------------------------ */

.masthead {
  background: var(--paper-alt);
  border-bottom: 1px solid var(--rule);
}

.masthead__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 1.05rem;
}

.brand { display: block; text-decoration: none; color: inherit; }
.brand:hover { color: inherit; }

.brand__eyebrow {
  font-family: var(--ff-head);
  font-size: .655rem;
  letter-spacing: .215em;
  text-transform: uppercase;
  color: var(--brick);
  font-weight: 600;
  margin-bottom: .18rem;
}

.brand__name {
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: clamp(1.02rem, .9rem + .55vw, 1.4rem);
  color: var(--indigo-dark);
  line-height: 1.1;
  letter-spacing: -.015em;
}

.brand__sub {
  font-family: var(--ff-head);
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: .22rem;
  font-weight: 500;
}

.langswitch { display: flex; gap: .1rem; align-items: center; flex-shrink: 0; }
.langswitch a {
  font-family: var(--ff-head);
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600;
  padding: .38rem .62rem;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  text-decoration: none;
  background: var(--paper);
}
.langswitch a:hover { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.langswitch a[aria-current="true"] { background: var(--indigo-dark); border-color: var(--indigo-dark); color: #fff; }

.navtoggle {
  display: none;
  font-family: var(--ff-head); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600; background: var(--indigo-dark); color: #fff;
  border: 0; padding: .5rem .85rem; cursor: pointer;
}

/* ---------- primary nav: the original pipe-rail, modernised ---------------- */

.pipenav { background: var(--indigo-dark); }
.pipenav ul {
  list-style: none; margin: 0; padding: 0; max-width: none;
  display: flex; flex-wrap: wrap; align-items: center;
}
.pipenav li { margin: 0; display: flex; align-items: center; }
.pipenav li + li::before {
  content: "|"; color: var(--indigo-pale); opacity: .5; font-size: .8rem;
}
.pipenav a {
  display: block;
  font-family: var(--ff-head);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  color: #d8dcf6;
  padding: .78rem .6rem;
  text-decoration: none;
}
.pipenav a:hover, .pipenav a:focus { background: var(--indigo); color: #fff; }
.pipenav a[aria-current="page"] { color: var(--gold); box-shadow: inset 0 -3px 0 var(--gold); }

/* ---------- standing non-affiliation notice ------------------------------- */

.notice {
  background: var(--gold-pale);
  border-bottom: 1px solid var(--gold);
  color: #4a3708;
  font-size: .845rem;
  line-height: 1.5;
}
.notice p { margin: 0; padding-block: .58rem; max-width: none; }
.notice strong { color: #3b2c05; }

/* ---------- page frame ---------------------------------------------------- */

.frame { padding-block: 2.4rem 3.4rem; }

.layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 2.9rem; align-items: start; }
.layout--wide { grid-template-columns: minmax(0, 1fr); }

/* ---------- section rail (echo of the 2004 CMS's grouped sidebar) ---------- */

.rail { position: sticky; top: 1.25rem; font-family: var(--ff-head); }

.rail__group + .rail__group { margin-top: 1.5rem; }

.rail__title {
  font-size: .655rem; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 700; color: var(--brick);
  padding-bottom: .42rem; margin-bottom: .5rem;
  border-bottom: 2px solid var(--ink);
}

.rail ul { list-style: none; margin: 0; padding: 0; max-width: none; }
.rail li { margin: 0; }
.rail a {
  display: block; padding: .34rem 0 .34rem .72rem;
  font-size: .845rem; font-weight: 500; line-height: 1.35;
  color: var(--ink-soft); text-decoration: none;
  border-left: 3px solid var(--rule-soft);
}
.rail a:hover { color: var(--indigo); border-left-color: var(--indigo-pale); background: var(--paper-alt); }
.rail a[aria-current="page"] {
  color: var(--indigo-dark); font-weight: 700;
  border-left-color: var(--gold); background: var(--paper-alt);
}

/* ---------- article ------------------------------------------------------- */

.article__kicker {
  font-family: var(--ff-head);
  font-size: .67rem; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 700; color: var(--brick); margin-bottom: .6rem;
}

.article__meta {
  font-family: var(--ff-head);
  font-size: .755rem; letter-spacing: .085em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 500;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding-block: .55rem; margin-bottom: 2rem;
}

article > h2:first-of-type { margin-top: 2.3rem; }

/* ---------- figures / images ---------------------------------------------- */

figure { margin: 2rem 0 2.1rem; max-width: none; }
figure img { border: 1px solid var(--rule); background: var(--paper-alt); }
figcaption {
  font-family: var(--ff-head);
  font-size: .755rem; line-height: 1.5; color: var(--ink-faint);
  padding-top: .55rem; border-top: 1px solid var(--rule-soft); margin-top: .55rem;
  max-width: var(--measure);
}

.hero { margin: 0 0 2.2rem; max-width: none; }
.hero img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border: 1px solid var(--rule); }

/* ---------- data table (the albo d'oro is the site's best asset) ----------- */

.tablewrap { overflow-x: auto; margin: 1.7rem 0 2.2rem; border: 1px solid var(--rule); background: var(--paper-alt); }

table {
  width: 100%; max-width: none; border-collapse: collapse;
  font-family: var(--ff-head); font-size: .875rem;
  font-variant-numeric: tabular-nums;
}
caption {
  caption-side: top; text-align: left;
  font-family: var(--ff-head); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 700; color: #fff; background: var(--indigo-dark);
  padding: .62rem .85rem;
}
thead th {
  background: var(--indigo-wash);
  color: var(--indigo-dark);
  font-size: .655rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 700;
  text-align: left; padding: .6rem .85rem;
  border-bottom: 2px solid var(--indigo);
  white-space: nowrap;
}
tbody td, tbody th {
  padding: .52rem .85rem; border-bottom: 1px solid var(--rule-soft);
  vertical-align: top; text-align: left; font-weight: 400;
}
tbody th { font-weight: 700; color: var(--indigo-dark); white-space: nowrap; }
tbody tr:nth-child(odd) td, tbody tr:nth-child(odd) th { background: #fafbfe; }
tbody tr:hover td, tbody tr:hover th { background: var(--gold-pale); }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }

/* ---------- homepage stat strip ------------------------------------------- */

.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 0; border: 1px solid var(--ink); margin: 0 0 2.6rem; max-width: none;
  background: var(--paper-alt);
}
.facts div { padding: 1.05rem 1.1rem; border-right: 1px solid var(--rule); }
.facts div:last-child { border-right: 0; }
.facts dt {
  font-family: var(--ff-head); font-size: .625rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--brick); font-weight: 700; margin-bottom: .28rem;
}
.facts dd {
  font-family: var(--ff-head); font-size: 1.42rem; font-weight: 700;
  color: var(--indigo-dark); margin: 0; line-height: 1.14; font-variant-numeric: tabular-nums;
}
.facts dd small { display: block; font-size: .74rem; font-weight: 500; color: var(--ink-faint); letter-spacing: .02em; margin-top: .2rem; }

/* ---------- card grid (section index on the homepage) --------------------- */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin: 1.6rem 0 2.4rem; max-width: none; }
.card {
  background: var(--paper-alt); padding: 1.2rem 1.25rem 1.35rem;
  display: block; text-decoration: none; color: inherit;
  border-top: 3px solid transparent;
}
.card:hover { background: #fff; border-top-color: var(--gold); color: inherit; }
.card h3 { margin: 0 0 .45rem; font-size: 1rem; color: var(--indigo-dark); }
.card p { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--ink-soft); }

/* ---------- inline callout ------------------------------------------------ */

.callout {
  border: 1px solid var(--brick); border-left-width: 5px;
  background: var(--brick-wash); padding: 1.05rem 1.25rem;
  margin: 1.9rem 0; max-width: var(--measure);
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--brick-dark); }

/* ---------- footer -------------------------------------------------------- */

.foot { background: var(--ink); color: #b9beda; margin-top: 3rem; }
.foot__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 2rem; padding-block: 2.6rem 1.9rem;
}
.foot h2 {
  font-size: .655rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 .8rem; padding: 0; border: 0; font-weight: 700;
}
.foot p { font-size: .875rem; line-height: 1.62; color: #a2a8c8; max-width: 40ch; }
.foot ul { list-style: none; margin: 0; padding: 0; max-width: none; }
.foot li { margin-bottom: .34rem; }
.foot a { color: #d8dcf6; text-decoration: none; font-size: .875rem; }
.foot a:hover { color: var(--gold); text-decoration: underline; }

.foot__pipe { border-top: 1px solid #2c3050; padding-block: 1rem; }
.foot__pipe ul { display: flex; flex-wrap: wrap; align-items: center; }
.foot__pipe li { margin: 0; display: flex; align-items: center; }
.foot__pipe li + li::before { content: "|"; color: #4a5080; margin-inline: .2rem; }
.foot__pipe a {
  font-family: var(--ff-head); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; padding: .3rem .38rem; font-weight: 500;
}

.foot__legal {
  border-top: 1px solid #2c3050; padding-block: 1.1rem 1.7rem;
  font-size: .79rem; color: #868cad;
}
.foot__legal p { max-width: 78ch; margin-bottom: .5rem; font-size: .79rem; }
.foot__legal p:last-child { margin-bottom: 0; }

/* ---------- 404 ----------------------------------------------------------- */

.notfound { padding-block: 4rem 5rem; text-align: left; }
.notfound__code {
  font-family: var(--ff-head); font-weight: 700; font-size: clamp(3.6rem, 2rem + 8vw, 7rem);
  line-height: .9; color: var(--indigo-pale); letter-spacing: -.04em; margin-bottom: .9rem;
}

/* ---------- responsive ---------------------------------------------------- */

@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .rail { position: static; order: 2; border-top: 2px solid var(--ink); padding-top: 1.4rem; }
}

@media (max-width: 720px) {
  body { font-size: 1.0125rem; }
  .navtoggle { display: inline-block; }
  .pipenav ul { display: none; flex-direction: column; align-items: stretch; padding-bottom: .5rem; }
  .pipenav.is-open ul { display: flex; }
  .pipenav li + li::before { display: none; }
  .pipenav li { border-top: 1px solid rgba(255,255,255,.1); }
  .pipenav a { padding: .72rem 1.25rem; }
  .masthead__bar { padding-block: .85rem; }
  .facts div { border-right: 0; border-bottom: 1px solid var(--rule); }
  .facts div:last-child { border-bottom: 0; }
  h2 { margin-top: 2.3rem; }
}

@media print {
  .pipenav, .rail, .langswitch, .navtoggle, .foot__pipe { display: none; }
  body { background: #fff; }
}

/* ---------- corrections form (colophon only) ------------------------------ */

.corrections { margin-top: 1rem; }
.corrform { max-width: var(--measure); border: 1px solid var(--rule); background: var(--paper-alt); padding: 1.35rem 1.4rem .6rem; }
.corrform p { margin-bottom: 1.05rem; max-width: none; }
.corrform label {
  display: block; font-family: var(--ff-head); font-size: .68rem;
  letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
  color: var(--ink-soft); margin-bottom: .32rem;
}
.corrform input, .corrform textarea {
  width: 100%; font-family: var(--ff-body); font-size: 1rem;
  padding: .58rem .7rem; border: 1px solid var(--rule);
  background: var(--paper); color: var(--ink);
}
.corrform input:focus, .corrform textarea:focus { border-color: var(--indigo); background: #fff; }
.corrform textarea { resize: vertical; min-height: 8rem; }
.corrform button {
  font-family: var(--ff-head); font-size: .74rem; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 700;
  background: var(--indigo-dark); color: #fff; border: 0;
  padding: .72rem 1.4rem; cursor: pointer;
}
.corrform button:hover { background: var(--brick); }