/* Les cases del terme.

   Aquesta investigació va de noms i de llistes, i per això no s'assembla
   a la del santuari: aquí la figura és el registre. Un rail d'anys a
   l'esquerra que no es trenca mai, xifres tabulars a tot arreu i
   filets en comptes de caixes. Tot el que hi ha és HTML i CSS: el
   filtre de l'índex són cinc botons de ràdio i un selector de germans.

   Es prova a 1440, a 1180, a 760 i a 420 px, i en tema clar i fosc. */

body {
  --mesura: 660px;
  --toc: 210px;
  --fonts-marge: 224px;
  --acte: clamp(60px, 7.5vw, 104px);
  --rail: 5.2rem;
  --rail-gap: 20px;
}

/* ---------- Capçalera ---------- */

.engrunes-art { max-width: 1200px; padding-block: 28px 0; font-size: .75rem; }
.art-cap { padding: clamp(44px, 5.5vw, 76px) 0 0; margin-bottom: clamp(52px, 6vw, 84px); }
.art-cap .wrap { max-width: 1060px; }
.art-mena { margin-bottom: 22px; color: var(--ink-3); font-size: .6875rem; letter-spacing: .14em; }
.art-titol {
  max-width: 15ch; margin: 0 auto 28px;
  font-family: var(--sans); font-size: clamp(2.4rem, 5.2vw, 4.25rem);
  font-weight: 500; line-height: 1.05; letter-spacing: -.05em;
}
.art-lede {
  max-width: 620px; margin-bottom: 30px; font-family: var(--sans);
  font-size: clamp(1rem, 1.4vw, 1.125rem); line-height: 1.72; letter-spacing: -.01em;
}
.art-dades { gap: 8px 22px; margin: 0; font-size: .75rem; font-variant-numeric: lining-nums tabular-nums; }
.art-dades span + span::before { left: -12px; }
.art-barra { max-width: 780px; margin: 40px auto 0; padding: 18px 0; border-block: 1px solid var(--rule); font-size: .8125rem; }
.escolta, .comparteix { min-height: 44px; gap: 10px; }
.escolta-glif { width: 36px; height: 36px; }
.comparteix { padding: 10px 14px; border-radius: 999px; transition: background .2s; }
.comparteix:hover { background: var(--paper-2); }

/* ---------- Ritme de l'article ---------- */

.art-reixa { max-width: 1480px; margin-inline: auto; }
.art-cos { min-width: 0; padding-bottom: clamp(60px, 7vw, 100px); }
.acte { max-width: 100%; font-size: 1.1875rem; line-height: 1.75; }
.acte p { margin: 0 0 26px; }
.acte b { font-weight: 500; }
.acte > :last-child { margin-bottom: 0; }
.acte-any {
  margin-bottom: 14px; font-size: .6875rem; letter-spacing: .1em;
  color: var(--ink-3); font-variant-numeric: lining-nums tabular-nums;
}
.acte > h2 {
  max-width: 24ch; margin: 0 0 30px; font-family: var(--sans);
  font-size: clamp(1.7rem, 2.6vw, 2.0625rem); font-weight: 500;
  line-height: 1.18; letter-spacing: -.032em; text-wrap: balance;
}
.acte .entradeta { font-size: 1.1875rem; line-height: 1.75; color: var(--ink-2); margin-bottom: 26px; }
.acte .apunt {
  margin-block: 30px; padding: 2px 0 2px 20px;
  border-left: 1px solid var(--rule-2);
  font-size: .9375rem !important; line-height: 1.72; color: var(--ink-2);
}
.acte .apunt b { color: var(--ink); }

.toc { width: var(--toc); margin-right: clamp(28px, 4vw, 72px); top: calc(var(--bar) + 28px); }
.toc ol { gap: 2px; padding: 0 10px 24px 0; }
.toc a { position: relative; padding: 9px 0 9px 15px; font-size: .8125rem; line-height: 1.45; }
.toc a::before { content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 1px; background: transparent; transition: background .2s; }
.toc li.ara a::before { background: var(--ink); }
.toc-any { opacity: 1; margin-bottom: 3px; font-size: .625rem; color: var(--ink-3); }

/* ---------- Citacions ---------- */

.cita { font-size: .625rem; margin-left: .35em; color: var(--ink-3); }
.cita-panell { padding-left: 16px; margin: 22px 0 32px; border-color: var(--rule); }
.cita-panell .cita-lit { font-size: .875rem; line-height: 1.6; margin-bottom: 12px; color: var(--ink-2); }
.cita-panell .cita-ref { margin: 0; padding-top: 11px; font-size: .75rem; line-height: 1.62; overflow-wrap: anywhere; }
.cita-panell .cita-ref + .cita-ref { margin-top: 8px; }
.cita-panell .cita-accions { margin: 12px 0 0; }
.cita-accions a { font-size: .75rem; min-height: 28px; }
.cita-altra .cita-ref { padding-top: 0; border-top: 0; }

/* ---------- Dues fonts que no diuen el mateix ---------- */

.discrepa { margin: 40px 0; border-color: var(--rule); border-radius: 12px; background: var(--paper-2); }
.discrepa .discrepa-cap { margin: 0; padding: 16px 22px; border-color: var(--rule); font-size: .6875rem; line-height: 1.5; letter-spacing: .08em; }
.discrepa-cares > div { padding: 22px; border-color: var(--rule); }
.discrepa .discrepa-qui { margin: 0 0 12px; font-size: .75rem; line-height: 1.55; }
.discrepa .discrepa-diu { margin: 0; font-size: 1.0625rem; line-height: 1.5; }
.discrepa .discrepa-nostre { margin: 0; padding: 22px; border-color: var(--rule); font-size: .9375rem; line-height: 1.72; }
.discrepa-nostre::before { content: none; }
.discrepa-nostre b { color: var(--ink); font-weight: 500; }
@media (min-width: 620px) {
  .discrepa-cares > div:nth-child(odd) { border-left: 0; }
}

/* ─────────────────────────────────────────────────────────
   El perfil per segles. Barres horitzontals, que aguanten a
   qualsevol amplada perquè cada una és una renglera.
   ───────────────────────────────────────────────────────── */

.perfil { margin: 40px 0 44px; padding: 24px 0 0; border-top: 1px solid var(--rule); }
.perfil-cap {
  margin: 0 0 18px !important; font-size: .6875rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.perfil-llista { list-style: none; margin: 0; padding: 0; }
.perfil-fila {
  display: grid; grid-template-columns: 4.4rem minmax(0, 1fr) 2.2rem;
  align-items: center; gap: 12px; margin: 0 0 7px; padding: 0;
  font-family: var(--sans);
}
.perfil-seg {
  font-size: .75rem; color: var(--ink-2); letter-spacing: .01em;
  font-variant-numeric: lining-nums tabular-nums;
}
.perfil-barra { display: block; height: 9px; background: var(--rule); border-radius: 2px; }
.perfil-barra i {
  display: block; height: 100%; min-width: 3px; border-radius: 2px;
  background: var(--ink-2);
}
.perfil-fila:nth-child(8) .perfil-barra i { background: var(--foix); }
.perfil-n {
  font-size: .75rem; color: var(--ink); text-align: right;
  font-variant-numeric: lining-nums tabular-nums;
}
.perfil-peu {
  margin: 18px 0 0 !important; font-size: .8125rem; line-height: 1.68;
  color: var(--ink-3);
}

/* ─────────────────────────────────────────────────────────
   L'índex de les cases. Rail d'anys a l'esquerra, sempre.
   ───────────────────────────────────────────────────────── */

.idx { margin: 40px 0 44px; }

/* Els botons de ràdio hi són per al teclat, però no es veuen: el que
   es clica és l'etiqueta. Cap JavaScript. */
.idx-r {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

.idx-filtres {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding-bottom: 22px;
}
.idx-filtres label {
  display: inline-flex; align-items: baseline; gap: 6px;
  min-height: 34px; padding: 7px 13px;
  border: 1px solid var(--rule-2); border-radius: 999px;
  font-family: var(--sans); font-size: .75rem; line-height: 1.4;
  color: var(--ink-2); cursor: pointer;
  transition: border-color .18s, color .18s, background .18s;
}
.idx-filtres label b {
  font-weight: 400; font-size: .6875rem; color: var(--ink-3);
  font-variant-numeric: lining-nums tabular-nums;
}
.idx-filtres label:hover { border-color: var(--ink-3); color: var(--ink); }

#idx-tot:checked ~ .idx-filtres label[for="idx-tot"],
#idx-p1:checked  ~ .idx-filtres label[for="idx-p1"],
#idx-p2:checked  ~ .idx-filtres label[for="idx-p2"],
#idx-p3:checked  ~ .idx-filtres label[for="idx-p3"],
#idx-p4:checked  ~ .idx-filtres label[for="idx-p4"],
#idx-p5:checked  ~ .idx-filtres label[for="idx-p5"] {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
}
#idx-tot:checked ~ .idx-filtres label[for="idx-tot"] b,
#idx-p1:checked  ~ .idx-filtres label[for="idx-p1"] b,
#idx-p2:checked  ~ .idx-filtres label[for="idx-p2"] b,
#idx-p3:checked  ~ .idx-filtres label[for="idx-p3"] b,
#idx-p4:checked  ~ .idx-filtres label[for="idx-p4"] b,
#idx-p5:checked  ~ .idx-filtres label[for="idx-p5"] b { color: var(--paper); opacity: .62; }

#idx-tot:focus-visible ~ .idx-filtres label[for="idx-tot"],
#idx-p1:focus-visible  ~ .idx-filtres label[for="idx-p1"],
#idx-p2:focus-visible  ~ .idx-filtres label[for="idx-p2"],
#idx-p3:focus-visible  ~ .idx-filtres label[for="idx-p3"],
#idx-p4:focus-visible  ~ .idx-filtres label[for="idx-p4"],
#idx-p5:focus-visible  ~ .idx-filtres label[for="idx-p5"] {
  outline: 2px solid var(--foix); outline-offset: 2px;
}

/* Quan hi ha un període triat, la llista es queda plana: les lletres
   de tall no hi pinten res, i cauen soles perquè no porten classe. */
#idx-p1:checked ~ .idx-llista > :not(.p1),
#idx-p2:checked ~ .idx-llista > :not(.p2),
#idx-p3:checked ~ .idx-llista > :not(.p3),
#idx-p4:checked ~ .idx-llista > :not(.p4),
#idx-p5:checked ~ .idx-llista > :not(.p5) { display: none; }

/* I es reordena per data: cada fila porta el seu número d'ordre
   cronològic a --o, i només compta quan la llista passa a flex. */
#idx-p1:checked ~ .idx-llista,
#idx-p2:checked ~ .idx-llista,
#idx-p3:checked ~ .idx-llista,
#idx-p4:checked ~ .idx-llista,
#idx-p5:checked ~ .idx-llista { display: flex; flex-direction: column; }
#idx-p1:checked ~ .idx-llista .cas,
#idx-p2:checked ~ .idx-llista .cas,
#idx-p3:checked ~ .idx-llista .cas,
#idx-p4:checked ~ .idx-llista .cas,
#idx-p5:checked ~ .idx-llista .cas { order: var(--o); }

.idx-cap {
  display: none;
  grid-template-columns: var(--rail) minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 6px var(--rail-gap);
  padding-bottom: 9px; border-bottom: 1px solid var(--ink);
  font-size: .625rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3);
}

.acte ul.idx-llista { list-style: none; margin: 0; padding: 0; }
.acte .idx-llista > li { margin: 0; }

.idx-lletra {
  padding: 26px 0 8px;
  font-family: var(--sans); font-size: .75rem; font-weight: 500;
  letter-spacing: .16em; color: var(--ink-3);
}
.idx-lletra:first-child { padding-top: 12px; }

.cas {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  grid-template-areas: "any nom" ". font";
  gap: 4px var(--rail-gap);
  padding: 13px 0 14px;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
}
.cas-any {
  grid-area: any; align-self: start;
  font-size: .8125rem; line-height: 1.35; letter-spacing: .01em;
  color: var(--ink); font-variant-numeric: lining-nums tabular-nums;
}
.cas-any-aprox { color: var(--ink-2); }
.cas-nom {
  grid-area: nom; min-width: 0;
  font-size: 1rem; line-height: 1.4; font-weight: 500; color: var(--ink);
}
.cas-forma {
  display: block; margin-top: 3px;
  font-size: .8125rem; font-weight: 400; font-style: italic;
  line-height: 1.5; color: var(--ink-2);
}
.cas-font {
  grid-area: font; min-width: 0;
  font-size: .75rem; line-height: 1.55; color: var(--ink-3);
}
.cas-avis {
  display: block; margin-top: 4px; padding-left: 13px;
  position: relative; color: var(--ink-2);
}
.cas-avis::before {
  content: ''; position: absolute; left: 0; top: .52em;
  width: 5px; height: 5px; border-radius: 50%;
  border: 1px solid var(--ink-3);
}

.idx-peu {
  margin: 22px 0 0 !important; padding-top: 18px;
  border-top: 1px solid var(--ink);
  font-size: .8125rem; line-height: 1.68; color: var(--ink-3);
}

@media (min-width: 860px) {
  .idx-cap { display: grid; }
  .cas {
    grid-template-columns: var(--rail) minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-areas: "any nom font";
    align-items: start;
  }
  .cas-font { padding-top: 2px; }
}

/* ─────────────────────────────────────────────────────────
   Les 58 rengleres del mapa de la parròquia
   ───────────────────────────────────────────────────────── */

.full58 { margin: 40px 0 44px; }
/* Els filets de la graella són l'outline de cada casella, que cau dins
   del solc d'un píxel. Així l'última renglera, que no s'omple mai del
   tot, no deixa cap bloc de color penjant. */
.acte ul.f58-graella {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(134px, 1fr));
  gap: 1px; list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--rule); border-radius: 8px; overflow: hidden;
}
.acte .f58 {
  display: flex; align-items: baseline; gap: 8px;
  margin: 0; padding: 9px 11px;
  outline: 1px solid var(--rule);
  font-family: var(--sans); font-size: .75rem; line-height: 1.4;
  min-width: 0;
}
.f58-n {
  flex: 0 0 auto; min-width: 1.35em; text-align: right;
  font-size: .625rem; color: var(--ink-3);
  font-variant-numeric: lining-nums tabular-nums;
}
.f58-t { min-width: 0; overflow-wrap: anywhere; }
.f58-segur .f58-t { color: var(--ink); font-weight: 500; }
.f58-probable .f58-t { color: var(--ink-2); }
.f58-dubtos .f58-t { color: var(--ink-3); font-style: italic; }

.f58-clau {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
  margin: 14px 0 0 !important;
  font-size: .6875rem; line-height: 1.5; color: var(--ink-3);
}
.f58-mostra {
  display: inline-block; width: 9px; height: 9px; margin-right: -10px;
  border-radius: 2px;
}
.f58-clau .f58-segur { background: var(--ink); }
.f58-clau .f58-probable { background: var(--ink-2); }
.f58-clau .f58-dubtos { background: var(--rule-2); }

.full58 figcaption {
  margin-top: 16px; font-family: var(--sans);
  font-size: .8125rem; line-height: 1.7; color: var(--ink-2);
}
.full58 .fig-any {
  display: block; margin-bottom: 5px;
  font-size: .625rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
}
.full58 .credit {
  display: block; margin-top: 8px;
  font-size: .6875rem; line-height: 1.6; color: var(--ink-3);
}

/* ---------- Tancament ---------- */

.acte-tanca { border-top: 1px solid var(--rule); padding-top: 52px; }
.acte-tanca > ul:not(.fonts-llista) { margin: 32px 0 0; padding: 0; list-style: none; }
.acte-tanca > ul:not(.fonts-llista) li {
  margin: 0; padding: 22px 0; border-top: 1px solid var(--rule);
  font-size: 1.0625rem; line-height: 1.68;
}
.acte-tanca > ul:not(.fonts-llista) li > b:first-child {
  display: block; margin-bottom: 7px;
  font-family: var(--sans); font-size: .9375rem; font-weight: 500;
}
.acte .demana {
  max-width: none; margin: 44px 0 60px; padding: clamp(24px, 4vw, 34px);
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: 12px;
}
.demana .h3 { font-family: var(--sans); font-size: 1.3125rem; font-weight: 500; line-height: 1.3; margin-bottom: 16px; }
.acte .demana p { margin: 0 0 18px; font-family: var(--sans); font-size: .9375rem; line-height: 1.72; }
.acte .demana .demana-com { margin: 0; line-height: 1.72; }
.acte-tanca .demana + h2 { font-size: 1.5625rem; margin-bottom: 26px; }
.acte ul.fonts-llista { margin: 0; padding: 0; }
.acte .fonts-llista li { margin: 0; padding: 16px 0; font-size: .8125rem; line-height: 1.7; }
.acte .fonts-llista a { color: var(--ink-2); text-decoration: none; }
.acte .fonts-llista a:hover { text-decoration: underline; color: var(--ink); }
.acte .fitxa-credit { margin: 44px 0 0; padding-top: 26px; font-size: .75rem; line-height: 1.8; }

/* ---------- Amplades ---------- */

@media (min-width: 1180px) {
  .cita-marge { margin-left: clamp(28px, 4vw, 72px); }
  .cita-panell { margin: 0; }
}
@media (max-width: 1179px) {
  .art-cap .wrap { max-width: 780px; }
  .cita-panell { max-width: 540px; }
}
@media (max-width: 700px) {
  body { --gut: 24px; --rail: 4.6rem; --rail-gap: 14px; --acte: 60px; }
  .engrunes-art { padding-top: 20px; font-size: .6875rem; }
  .art-cap { padding-top: 40px; margin-bottom: 48px; }
  .art-titol { font-size: clamp(2.125rem, 9.4vw, 3.25rem); letter-spacing: -.042em; margin-bottom: 22px; }
  .art-mena { margin-bottom: 18px; }
  .art-lede { font-size: 1rem; line-height: 1.7; margin-bottom: 24px; }
  .art-dades { gap: 8px 16px; font-size: .6875rem; }
  .art-dades span + span::before { left: -9px; }
  .art-barra { margin-top: 26px; padding-block: 13px; }
  .escolta-txt { display: inline; }
  .escolta-temps { display: none; }
  .comparteix { padding-inline: 4px; font-size: .75rem; }
  .acte { font-size: 1.0625rem; line-height: 1.76; }
  .acte > h2 { font-size: 1.5rem; margin-bottom: 22px; line-height: 1.2; }
  .acte p { margin-bottom: 22px; }
  .acte .entradeta { font-size: 1.0625rem; }
  .cita-panell { margin: 22px 0 32px; padding-left: 15px; }
  .discrepa-cares > div, .discrepa .discrepa-cap, .discrepa .discrepa-nostre { padding: 20px; }
  .perfil-fila { grid-template-columns: 3.9rem minmax(0, 1fr) 2rem; gap: 10px; }
  .acte .demana { margin-block: 34px 48px; }
  .acte-tanca { padding-top: 38px; }
}
@media (max-width: 440px) {
  body { --gut: 20px; --rail: 4.3rem; }
  .art-dades { max-width: 260px; margin-inline: auto; }
  .art-dades span + span::before { content: none; }
  .escolta { gap: 8px; font-size: .75rem; }
  .idx-filtres label { padding: 6px 11px; font-size: .6875rem; }
  .cas-nom { font-size: .9375rem; }
  .cas-any { font-size: .78125rem; }
  .acte ul.f58-graella { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .acte .f58 { padding: 8px 9px; font-size: .6875rem; }
}