/* infoGBB — CSS unico, senza framework.
   1 Variabili · 2 Base · 3 Header · 4 Home · 5 Archivi
   6 Articoli · 7 Responsive · 8 Stampa · 9 Footer · 10 Titoli */

/* 1. VARIABILI: cambia qui colori, caratteri e larghezze. */
:root {
  --blue: #173f80;
  --blue-dark: #103264;
  --blue-art: #102e60;
  --ink: #102a52;
  --link: #164b91;
  --red: #b62431;
  --muted: #53647b;
  --line: #ccd6e5;
  --paper: #fff;
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --width: 66rem;
  --reading-width: 48rem;
  --photo-position: 50% 56%; /* centro del ritaglio della foto */
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
}

/* 2. BASE E ACCESSIBILITÀ */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  overflow-wrap: break-word;
}
img, svg, video { max-width: 100%; }
img { height: auto; }
a { color: var(--link); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--link); outline-offset: 5px; }
h1, h2, h3 { line-height: 1.25; }
h1 { margin: 0 0 .65rem; font-size: clamp(1.6rem, 2.5vw, 2rem); font-weight: 650; }
h2 { font-size: 1.3rem; font-weight: 650; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1.25rem; }
time, .unavailable, .empty-state { color: var(--muted); }
time { font-variant-numeric: tabular-nums; }
.container { width: min(100% - 2 * var(--gutter), var(--width)); margin-inline: auto; }
.skip-link { position: absolute; left: 1rem; top: -8rem; z-index: 10; background: white; padding: .65rem 1rem; }
.skip-link:focus { top: 1rem; }
.download-link { color: var(--red); }
.download-link:hover { color: #8c1520; }
.download-link span { margin-left: .25em; }
.unavailable { font-size: .9em; }
.empty-state { margin: 1.25rem 0; }
.back-link, .more-link { display: inline-block; }
main { flex: 1; }
.page-content { padding-block: clamp(2rem, 5vw, 3.5rem) 4rem; }

/* 3. INTESTAZIONE. Foto solo in home, barra piena nelle altre pagine.
   Per sostituire la foto cambia static/images/curva.jpg.
   Regola --photo-position per scegliere il centro del ritaglio. */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.masthead { position: relative; isolation: isolate; color: white; background: var(--blue); flex-shrink: 0; }
.masthead a { color: white; }
.masthead a:focus-visible { outline-color: white; }
.masthead__bar { position: relative; z-index: 1; background: var(--blue); }
.masthead__top { display: flex; align-items: center; justify-content: space-between; gap: .5rem 2rem; min-height: 5rem; padding-block: .9rem; }
.brand { display: block; flex-shrink: 0; text-decoration: none; }
.brand__logo { display: block; width: clamp(12.2rem, 20.7vw, 15.9rem); height: auto; }
.brand__star { color: #ed333d; padding-inline: .12em; }
.main-nav { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; }
.main-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; padding-block: .4rem; font-size: .95rem; text-decoration: none; border-bottom: 2px solid transparent; }
.main-nav a:hover { border-bottom-color: white; }
.main-nav a[aria-current] { border-bottom-color: #ff6871; }
/* .masthead--home { height: 88vh; height: 88svh; min-height: 28rem; max-height: 64rem; } */
.masthead--home {height: 100vh; height: 100svh; min-height: 0; max-height: none;}
.masthead__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--photo-position); }
.masthead--home .masthead__bar { background: rgb(12 43 87 / .82); }
.hero-scroll { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); display: grid; place-items: center; width: 3rem; height: 3rem; font-size: 2rem; line-height: 1; text-decoration: none; background: rgb(12 43 87 / .6); border-radius: 50%; }
.hero-scroll:hover { background: var(--blue); }

/* 4. HOME: ultimi tre comunicati e ultimi tre numeri, aggiornati da Hugo. */
.home-columns { display: grid; grid-template-columns: 1fr 1fr; padding-block: 2.25rem 3.5rem; }
.home-columns section { min-width: 0; padding-right: 3rem; }
.home-columns section + section { border-left: 1px solid var(--line); padding-left: 3rem; padding-right: 0; }
.home-columns h2 { margin: 0 0 1rem; font-size: 1.25rem; }
.latest-list, .post-list, .issue-list { list-style: none; margin: 0; padding: 0; }
.latest-list li { padding-block: .9rem; border-bottom: 1px solid var(--line); }
.latest-list time { display: block; margin-bottom: .1rem; font-size: .85rem; }
.latest-list a, .latest-list .issue-title { display: block; }
.latest-list .issue-title { margin-bottom: .15rem; }
.latest-list .empty-state { border: 0; }
.more-link { margin-top: 1.25rem; }

/* 5. ARCHIVI: righe semplici, nessuna griglia di riquadri. */
.archive { max-width: 58rem; }
.page-heading { margin-bottom: 2rem; }
.page-heading p { margin: 0; color: var(--muted); }
.year-group { margin-block: 2rem; }
.year-group h2 { margin: 0 0 .7rem; font-size: 1.15rem; }
.post-list li { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; padding-block: .7rem; border-bottom: 1px solid var(--line); }
.post-list time { font-size: .9rem; padding-top: .05rem; }
.issue-list li { display: flex; justify-content: space-between; align-items: baseline; gap: .4rem 1.5rem; padding-block: .65rem; border-bottom: 1px solid var(--line); }
.issue-list .download-link, .issue-list .unavailable { flex-shrink: 0; }
.issue-list .empty-state { border: 0; }
.archive > .back-link { margin-top: 2rem; }
.simple-list { padding-left: 1.25rem; }

/* 6. ARTICOLO: larghezza di lettura, file rossi, navigazione blu. */
.article { max-width: var(--reading-width); }
.article > .back-link { margin-bottom: 1.75rem; }
.article__heading { border-bottom: 1px solid var(--line); padding-bottom: 1.1rem; margin-bottom: 1.8rem; }
.article__heading time { display: block; margin-bottom: .6rem; font-size: .9rem; }
.article__heading h1 { margin: 0; font-size: clamp(1.6rem, 3vw, 2rem); }
.prose { font-size: 1.0625rem; line-height: 1.75; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose h2 { margin-top: 2rem; }
.prose h3 { margin-top: 1.5rem; }
.prose ul, .prose ol { padding-left: 1.4rem; margin-block: 1.2rem; }
.prose li + li { margin-top: .3rem; }
.prose blockquote { border-left: 3px solid var(--line); margin: 1.5rem 0; padding-left: 1.2rem; color: var(--muted); }
.prose img, .prose video { display: block; height: auto; margin-block: 1.5rem; }
.prose pre { overflow-x: auto; padding: 1rem; background: #f3f6fa; font-size: .9rem; }
.prose code { font-size: .9em; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 2rem; }
.table-scroll { max-width: 100%; overflow-x: auto; margin-block: 1.5rem; }
.prose table { width: 100%; border-collapse: collapse; font-size: .95em; }
.prose th, .prose td { padding: .55rem .75rem; border-bottom: 1px solid var(--line); text-align: left; }
.prose th { font-weight: 650; }
.article__download { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.article-nav { display: flex; justify-content: space-between; gap: 1rem 2rem; margin-top: 2rem; font-size: .95rem; }
.article-nav > span { flex: 1; min-width: 0; }
.article-nav > span:last-child { text-align: right; }

/* 7. RESPONSIVE. Menu sempre visibile, senza JavaScript. */
@media (max-width: 48rem) {
  .home-columns section { padding-right: 1.5rem; }
  .home-columns section + section { padding-left: 1.5rem; }
}
@media (max-width: 40rem) {
  .masthead__top { flex-direction: column; align-items: flex-start; gap: .4rem; padding-block: 1rem .35rem; }
  .brand__logo { width: 13.4rem; }
  .main-nav { width: 100%; gap: .25rem 1.25rem; border-top: 1px solid rgb(255 255 255 / .22); }
  .main-nav a { font-size: .9rem; }
  /* .masthead--home { height: 82vh; height: 82svh; min-height: 26rem; max-height: 52rem; } */
  .masthead--home {height: 100vh; height: 100svh; min-height: 0; max-height: none;}
  .home-columns { grid-template-columns: 1fr; padding-block: 2rem 3rem; }
  .home-columns section { padding: 0; }
  .home-columns section + section { padding: 2rem 0 0; margin-top: 2rem; border-left: 0; border-top: 1px solid var(--line); }
  .post-list li { grid-template-columns: 1fr; gap: .15rem; }
  .post-list time { font-size: .8rem; }
  .issue-list li { flex-wrap: wrap; }
  .article-nav { flex-direction: column; }
  .article-nav > span:last-child { text-align: left; }
  .prose { font-size: 1rem; }
}
@media (max-height: 32rem) and (orientation: landscape) {
  .masthead--home { min-height: 22rem; }
}

/* 8. STAMPA */
@media print {
  .masthead, .site-footer, .skip-link, .back-link, .article-nav, .article__download { display: none; }
  body { color: #000; font-size: 11pt; }
  .container { width: 100%; max-width: none; }
  .page-content { padding: 0; }
  a { color: inherit; }
  .prose { font-size: inherit; }
  .prose a[href]::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* 9. FOOTER. Contatto a sinistra, solo RSS a destra. */
.site-footer { flex-shrink: 0; margin-top: auto; padding-block: 1.5rem 1rem; background: white; border-top: 2px solid var(--blue); }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; }
.footer-brand { color: var(--blue); font-size: 1.4rem; font-weight: 750; text-decoration: none; }
.footer-contact { margin: .5rem 0 0; font-size: .9rem; }
.footer-contact a { font-weight: 600; }
.footer-nav { font-size: .9rem; }
.footer-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; margin-top: 1.5rem; font-family: ui-monospace, Consolas, monospace; color: var(--muted); font-size: .65rem; letter-spacing: .05em; }
.footer-bottom p { margin: 0; }
@media (max-width: 36rem) {
  .footer-top, .footer-bottom { flex-direction: column; gap: .75rem; }
}

/* Archivi condivisi: allegati rossi e paginazione senza JavaScript. */
.archive-download { margin-top: .2rem; font-size: .875rem; }
.archive-pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .5rem 1rem;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: .9rem;
}
.archive-pagination > div:last-child { text-align: right; }
.archive-pagination > span { color: var(--muted); font-size: .8rem; }
.archive-pagination a { display: inline-flex; align-items: center; min-height: 2.75rem; }
@media (max-width: 36rem) {
  .archive-pagination { grid-template-columns: 1fr 1fr; }
  .archive-pagination > span { grid-column: 1 / -1; grid-row: 1; text-align: center; }
}



/* 10. TITOLI. Passata ripetuta su ogni riga, testo dritto.
   L’SVG è una semplice sagoma locale: niente immagini remote o script. */
.titolo-evidenziato { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 700; line-height: 1.85; overflow-wrap: anywhere; }
.titolo-evidenziato > span { color: white; padding: .18em .45em .24em; background: url("../images/passata.svg") center / 100% 100% no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.home-columns h2.titolo-evidenziato { font-size: 1.2rem; }
.article__heading h1.titolo-evidenziato { font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.85; }
.latest-list a { color: var(--ink); font-size: 1rem; font-weight: 600; line-height: 1.5; text-decoration: none; }
.latest-list a:hover { text-decoration: underline; }
.latest-list time { margin-top: .3rem; margin-bottom: 0; font-size: .8rem; }
@media print {
  .titolo-evidenziato > span { color: black; background: none; padding: 0; }
}


/* 11. SIMBOLO NEL MARGINE: solo pagine interne e desktop ampi.
   La larghezza segue lo spazio libero a sinistra della container più larga.
   Il contenitore taglia il disegno: non può invadere testo o collegamenti.
   Per ridimensionarlo cambia width dell’immagine, per il taglio left/bottom. */
.corner-emblem { display: none; }
@media screen and (min-width: 96rem) {
  .corner-emblem {
    display: block;
    position: fixed;
    left: 0;
    bottom: 0;
    width: min(28rem, max(0px, calc((100vw - var(--width)) / 2 - 1.5rem)));
    height: min(34rem, 65vh);
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    z-index: 2;
  }
  .corner-emblem img {
    position: absolute;
    /* L’immagine arriva esattamente al bordo destro del margine:
       si ritaglia solo a sinistra e in basso, mai sul lato destro. */
    width: calc(100% + 11rem);
    max-width: none;
    height: auto;
    left: -11rem;
    bottom: -4rem;
    /* Riempie di bianco le trasparenze e nasconde la riga del footer. */
    background: var(--paper);
  }
  /* Simbolo sopra lo sfondo del footer, ma confinato al margine vuoto.
     Non copre contatti o testi e non intercetta clic. */
  .page-content, .site-footer { position: relative; z-index: 1; }
  .masthead { position: relative; z-index: 3; }
}


/* 12. PROGETTI. Due presentazioni affiancate, senza ombre o riquadri.
   Le copertine hanno proporzioni identiche; senza foto compare il titolo. */
.projects-page { max-width: var(--width); }
.projects-intro { margin-bottom: 2rem; }
.projects-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; margin-block: 2rem 3rem; }
.project-card { min-width: 0; display: flex; flex-direction: column; border-bottom: 2px solid var(--blue); }
.project-card__visual { aspect-ratio: 3 / 2; overflow: hidden; background: var(--blue); }
.project-card__visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
.project-card__visual--type { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(1.25rem, 3vw, 2.25rem); color: white; }
.project-card__eyebrow { font-family: ui-monospace, Consolas, monospace; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.project-card__lettering { max-width: 100%; font-size: clamp(1.6rem, 3.5vw, 3rem); line-height: 1.15; font-weight: 750; overflow-wrap: anywhere; }
.project-card__star { color: #ff6871; font-size: 1.5rem; line-height: 1; }
.project-card__body { display: flex; flex-direction: column; flex: 1; align-items: flex-start; padding-block: 1.4rem 1rem; }
.project-card__body h2 { margin: 0 0 .7rem; color: var(--ink); font-size: 1.3rem; line-height: 1.35; }
.project-card__body p { margin: 0 0 1.2rem; color: var(--muted); font-size: 1rem; }
.project-card__link { display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: auto; font-weight: 650; }
@media (max-width: 44rem) {
  .projects-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .project-card__lettering { font-size: clamp(2rem, 8vw, 3rem); }
}
@media print {
  .projects-grid { display: block; }
  .project-card { break-inside: avoid; margin-bottom: 2rem; }
}