/* Foresight Strategico — tavola didattica
   Palette and type locked in foresightstrategico.it-status.md.
   Written with native CSS nesting; no preprocessor, no framework, no cascade layers. */

@font-face {
  font-family: "Prata";
  src: url("/assets/fonts/prata-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: "Fira Sans";
  src: url("/assets/fonts/firasans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: "Fira Sans";
  src: url("/assets/fonts/firasans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: "Fira Sans Condensed";
  src: url("/assets/fonts/firasanscond-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: "Fira Sans Condensed";
  src: url("/assets/fonts/firasanscond-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: optional;
}

/* The leader-dot run animates a LENGTH, so the property has to be registered or
   the transition has nothing to interpolate and the row snaps. initial-value is 0
   because an unhovered entry shows no run at all. */
@property --corsa {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

:root {
  --carta: #eae6da;
  --carta-piena: #f4f2ec;
  --inchiostro: #191714;
  --inchiostro-tenue: #57524a;
  --viola: #4b2e83;
  --viola-chiaro: #6a4fa8;
  --oliva: #8f7d12;
  --filo: 1px;
  --filo-forte: 2px;
  --filo-chiave: 3px;

  --tavola-max: 78rem;
  --colonna: 44rem;

  --passo: 1.5rem;
  --passo-grande: 3rem;

  /* litho-press: fast out, long settle, no overshoot anywhere on this site */
  --pressa: 320ms cubic-bezier(0.16, 0.84, 0.24, 1);
  --pressa-breve: 180ms cubic-bezier(0.16, 0.84, 0.24, 1);

  --tipo-titolo: "Prata", "Times New Roman", serif;
  --tipo-testo: "Fira Sans", system-ui, sans-serif;
  --tipo-etichetta: "Fira Sans Condensed", "Fira Sans", system-ui, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 2rem;

  @media (prefers-reduced-motion: reduce) {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font-family: var(--tipo-testo);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

/* ---------- il foglio: the chart sheet the whole page sits on ---------- */

.foglio {
  max-width: var(--tavola-max);
  margin: 1rem auto;
  padding: 1.5rem;
  /* The sheet has to stack over the survey field behind it, and its background has
     to stay opaque — the field is masked by the paper, not tinted through it. */
  position: relative;
  z-index: 1;
  background: var(--carta-piena);
  border: var(--filo-chiave) solid var(--inchiostro);
  outline: var(--filo) solid var(--inchiostro);
  outline-offset: 5px;

  @media (min-width: 60rem) {
    margin: 2.5rem auto;
    padding: 3rem 3.5rem;
  }
}

/* ---------- testata ---------- */

.testata {
  border-bottom: var(--filo-chiave) solid var(--inchiostro);
  padding-bottom: 1.25rem;
  margin-bottom: 2rem;
}

.testata__riga {
  display: flex;
  align-items: center;
  /* the mobile panel is a full-width row of its own: without the wrap it stays a
     flex item beside the wordmark and is drawn over it */
  flex-wrap: wrap;
  gap: 1.25rem;
}

.marchio {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  /* basis 0, not auto: with wrapping enabled the line is packed on the basis, and
     the wordmark's max-content width pushed the hamburger onto a line of its own.
     At basis 0 the button keeps its place and the wordmark grows into what is left. */
  flex: 1 1 0;
  min-width: 0;
}

.marchio__segno {
  flex: none;
  display: block;
  width: 3rem;
  height: 3rem;
  background: var(--viola);
  border: var(--filo-forte) solid var(--inchiostro);
  padding: 0.3rem;

  @media (min-width: 40rem) {
    width: 3.5rem;
    height: 3.5rem;
  }
}

.marchio > span {
  display: block;
  min-width: 0;
}

.marchio__nome {
  display: block;
  font-family: var(--tipo-titolo);
  font-size: clamp(1.35rem, 4.2vw, 2.4rem);
  line-height: 1.05;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}

.marchio__serie {
  display: block;
  font-family: var(--tipo-etichetta);
  font-weight: 700;
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--inchiostro-tenue);
  margin: 0.25rem 0 0;
}

/* ---------- navigazione: identical markup on every page ---------- */

.interruttore {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.leva {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: var(--filo-forte) solid var(--inchiostro);
  background: transparent;
  cursor: pointer;

  & svg {
    display: block;
    width: 1.35rem;
    height: 1.35rem;
  }

  @media (min-width: 60rem) {
    display: none;
  }
}

/* The index of the sheet, drawn as a keyed legend — the same numeral-in-a-box as
   the plate legends, so the header and the figures speak one language. Below the
   column breakpoint it is the hamburger panel and the rows are the same rows. */
.bussola {
  display: none;
  width: 100%;
  border-top: var(--filo-forte) solid var(--inchiostro);
  margin-top: 1.25rem;
  padding-top: 1rem;

  & ol {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  & a {
    display: grid;
    grid-template-columns: 1.6rem minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0;
    text-decoration: none;
    color: inherit;
    transition: background-color var(--pressa-breve), color var(--pressa-breve);
  }

  & li + li a {
    border-top: var(--filo) solid color-mix(in srgb, var(--inchiostro) 25%, transparent);
  }
}

.bussola__chiave {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.4rem;
  border: var(--filo-forte) solid var(--inchiostro);
  background: var(--carta-piena);
  font-family: var(--tipo-etichetta);
  font-weight: 700;
  font-size: 0.6875rem;
  line-height: 1;
  transition: background-color var(--pressa-breve), color var(--pressa-breve);
}

.bussola__voce {
  font-family: var(--tipo-etichetta);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.bussola a:hover .bussola__chiave,
.bussola a:focus-visible .bussola__chiave {
  background: var(--viola);
  color: var(--carta-piena);
}

.bussola a:hover .bussola__voce,
.bussola a:focus-visible .bussola__voce {
  color: var(--viola);
}

/* the page you are on is keyed in solid ink, not underlined */
.bussola [aria-current="true"] .bussola__chiave {
  background: var(--inchiostro);
  color: var(--carta-piena);
}

.bussola [aria-current="true"] .bussola__voce {
  text-decoration: none;
}

@media (min-width: 60rem) {
  .bussola {
    display: block !important;
    flex: none;
    align-self: center;
    width: 17.5rem;
    margin-top: 0;
    padding: 0;
    border: var(--filo-chiave) solid var(--inchiostro);
    background: #e2ddcd;

    & a {
      padding: 0.35rem 0.7rem;
    }

    & li + li a {
      border-top: var(--filo-forte) solid var(--inchiostro);
    }

    & a:hover,
    & a:focus-visible {
      background: color-mix(in srgb, var(--viola) 8%, transparent);
    }
  }
}

.interruttore:checked ~ .bussola {
  display: block;
}

/* ---------- la tavola: plate + keyed legend ---------- */

.tavola {
  display: grid;
  gap: 1.25rem;
  margin-bottom: 2.5rem;

  @media (min-width: 64rem) {
    grid-template-columns: minmax(0, 2fr) minmax(15rem, 1fr);
    gap: 1.5rem;
  }
}

.lastra {
  position: relative;
  background: #fff;
  border: var(--filo-chiave) solid var(--inchiostro);
  padding: 2.25rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;

  @media (min-width: 48rem) {
    padding: 2.5rem 2rem 1.5rem;
  }
}

.lastra__sigla {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  font-family: var(--tipo-etichetta);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: var(--filo-forte) solid var(--inchiostro);
  padding: 0.15rem 0.5rem;
  background: var(--carta-piena);
}

.lastra__disegno {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 0;

  & svg {
    width: 100%;
    height: auto;
  }

  /* Plate lettering is sized in user units, so it shrinks with the plate. On a
     phone the plate is roughly three quarters of its authored width, which is
     why the callouts are set this large rather than at body size. */
  & text {
    font-family: var(--tipo-etichetta);
    font-weight: 700;
  }

  & .chiave {
    font-size: 19px;
    fill: var(--inchiostro);
  }

  /* the cone's nodes carry two-digit numerals, so they are set below the callout
     size — a "12" at 19px does not fit inside its own marker */
  & .nodo {
    font-size: 14px;
    fill: var(--inchiostro);
  }

  & .banda {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    fill: var(--inchiostro-tenue);
  }

  /* every node is a link into the entry it stands for */
  & a {
    cursor: pointer;

    & circle {
      transition: fill var(--pressa-breve);
    }

    &:hover circle,
    &:focus-visible circle {
      fill: var(--viola);
    }

    &:hover .nodo,
    &:focus-visible .nodo {
      fill: var(--carta-piena);
    }
  }

  & .asse {
    font-size: 15px;
    font-weight: 600;
    fill: var(--inchiostro-tenue);
    letter-spacing: 0.08em;
  }
}

.lastra__didascalia {
  font-family: var(--tipo-titolo);
  font-size: clamp(1.05rem, 2.4vw, 1.5rem);
  line-height: 1.25;
  text-align: center;
  margin: 0;
  padding-top: 0.9rem;
  border-top: var(--filo-forte) solid var(--inchiostro);
}

/* ---------- tavola fuori testo: the tipped-in lithograph ----------
   Deliberately not styled like .lastra. A drawn figure is part of the argument and
   gets the serif caption, centred, inside a heavy plate border; a lithograph is an
   object bound into the volume, so it takes the thin double rule of the sheet
   itself and a left-aligned caption in the label face. Two classes of illustration,
   two treatments — otherwise the reader cannot tell which one is evidence. */
.fuoritesto {
  margin: 2rem 0 2.5rem;

  & picture {
    display: block;
    border: var(--filo) solid var(--inchiostro);
    outline: var(--filo) solid var(--inchiostro);
    outline-offset: 4px;
  }

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

.fuoritesto__didascalia {
  font-family: var(--tipo-etichetta);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--inchiostro-tenue);
  margin: 1.15rem 0 0;
  padding-top: 0.6rem;
  border-top: var(--filo) solid var(--inchiostro);
}

.fuoritesto__sigla {
  display: block;
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--inchiostro);
  margin-bottom: 0.2rem;
}

.legenda {
  background: #e2ddcd;
  border: var(--filo-chiave) solid var(--inchiostro);
  padding: 1.25rem;

  & > h2,
  & > h3 {
    font-family: var(--tipo-etichetta);
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0 0 0.9rem;
    padding-bottom: 0.5rem;
    border-bottom: var(--filo-forte) solid var(--inchiostro);
  }
}

.legenda__voci {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  font-size: 0.8125rem;
  line-height: 1.45;
}

.legenda__voce {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
}

.legenda__chiave {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  display: grid;
  place-items: center;
  border: var(--filo-forte) solid var(--inchiostro);
  background: #fff;
  font-family: var(--tipo-etichetta);
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1;
}

.legenda__nota {
  margin: 1.1rem 0 0;
  padding-top: 0.8rem;
  border-top: var(--filo-forte) solid var(--inchiostro);
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--inchiostro-tenue);
}

/* ---------- verticali: the two silos, split by a key-line ---------- */

.verticali {
  display: grid;
  gap: var(--filo-forte);
  background: var(--inchiostro);
  border: var(--filo-chiave) solid var(--inchiostro);
  margin-bottom: 2.5rem;

  @media (min-width: 48rem) {
    grid-template-columns: 1fr 1fr;
  }
}

.verticale {
  background: #fff;
  padding: 1.5rem;

  @media (min-width: 48rem) {
    padding: 2.25rem;
  }

  & > p {
    font-size: 0.9375rem;
    margin: 0 0 1.5rem;
  }
}

.verticale__numero {
  display: block;
  font-family: var(--tipo-etichetta);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.7rem;
  color: var(--viola);
}

.verticale__titolo {
  font-family: var(--tipo-titolo);
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  line-height: 1.15;
  margin: 0 0 0.9rem;
}

/* ---------- bottone timbrato ---------- */

.timbro {
  display: inline-block;
  font-family: var(--tipo-etichetta);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.6rem 1.4rem;
  border: var(--filo-forte) solid var(--inchiostro);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--pressa-breve), color var(--pressa-breve);

  &:hover,
  &:focus-visible {
    background: var(--inchiostro);
    color: var(--carta-piena);
  }
}

/* ---------- il registro: leader-dot index ---------- */

.registro__intestazione {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;

  & h2 {
    flex: none;
    font-family: var(--tipo-titolo);
    font-size: clamp(1.3rem, 3vw, 1.85rem);
    line-height: 1.15;
    margin: 0;
  }

  &::after {
    content: "";
    flex: 1 1 auto;
    height: var(--filo-chiave);
    background: var(--inchiostro);
  }
}

.registro {
  border: var(--filo-chiave) solid var(--inchiostro);
  background: #fff;
  padding: 1.25rem;
  margin-bottom: 2.5rem;

  @media (min-width: 48rem) {
    padding: 2rem;
  }

  & ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.2rem 2.5rem;

    @media (min-width: 52rem) {
      grid-template-columns: 1fr 1fr;
    }
  }
}

.voce {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  overflow: hidden;
  text-decoration: none;
  padding: 0.35rem 0;
  font-family: var(--tipo-etichetta);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  transition: color var(--pressa-breve);

  &:hover,
  &:focus-visible {
    color: var(--viola);
  }
}

.voce__titolo {
  flex: none;
  max-width: 78%;
}

/* leader-dot-run: the dots are a masked track that fills to the right on hover.
   The dot row itself is decorative, so it never reaches the accessibility tree. */
.voce__filo {
  flex: 1 1 auto;
  align-self: center;
  height: 1em;
  min-width: 1.5rem;
  background-image: radial-gradient(circle at center, currentColor 0.9px, transparent 1px);
  background-size: 0.42em 1em;
  background-repeat: repeat-x;
  background-position: 0 center;
  opacity: 0.28;
  -webkit-mask-image: linear-gradient(to right, #000 0 var(--corsa, 0%), rgba(0, 0, 0, 0.001) var(--corsa, 0%));
  mask-image: linear-gradient(to right, #000 0 var(--corsa, 0%), rgba(0, 0, 0, 0.001) var(--corsa, 0%));
  transition: --corsa var(--pressa), opacity var(--pressa-breve);
}

.voce:hover .voce__filo,
.voce:focus-visible .voce__filo {
  --corsa: 100%;
  opacity: 0.85;
}

.voce__segnatura {
  flex: none;
  font-variant-numeric: tabular-nums;
  color: var(--inchiostro-tenue);
}

@media (prefers-reduced-motion: reduce) {
  .voce__filo {
    -webkit-mask-image: none;
    mask-image: none;
    transition: opacity var(--pressa-breve);
  }
}

/* ---------- colonna di lettura ---------- */

.corpo {
  display: grid;
  gap: 2rem;
  margin-bottom: 2.5rem;

  @media (min-width: 64rem) {
    grid-template-columns: minmax(0, 1fr) 15rem;
    gap: 3rem;
  }
}

.prosa {
  max-width: var(--colonna);
  font-size: 1.0625rem;

  & > h2 {
    font-family: var(--tipo-titolo);
    font-size: clamp(1.3rem, 2.8vw, 1.75rem);
    line-height: 1.2;
    margin: 2.4rem 0 0.8rem;
    padding-bottom: 0.4rem;
    border-bottom: var(--filo-forte) solid var(--inchiostro);
  }

  & > h3 {
    font-family: var(--tipo-etichetta);
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: 0.02em;
    margin: 1.8rem 0 0.5rem;
  }

  & > p {
    margin: 0 0 1.1rem;
  }

  & > ul,
  & > ol {
    margin: 0 0 1.2rem;
    padding-left: 1.35rem;
  }

  & li {
    margin-bottom: 0.45rem;
  }

  & > p a,
  & > ul a,
  & > ol a,
  & > table a {
    text-decoration: none;
    color: var(--viola);
    border-bottom: var(--filo-forte) solid color-mix(in srgb, var(--viola) 35%, transparent);
    transition: border-bottom-color var(--pressa-breve);

    &:hover,
    &:focus-visible {
      border-bottom-color: var(--viola);
    }
  }

  & strong {
    font-weight: 600;
  }
}

.attacco {
  font-size: 1.1875rem;
  line-height: 1.55;
  border-left: var(--filo-chiave) solid var(--viola);
  padding-left: 1rem;
  margin: 0 0 1.6rem;
}

.margine {
  font-family: var(--tipo-etichetta);
  font-size: 0.8125rem;
  line-height: 1.5;

  & > * + * {
    margin-top: 1.5rem;
  }

  /* The whole column travels with the reader, not just the index: a sticky index
     above static siblings overlaps them as they scroll past. Only from the width
     at which the column exists as a column — below that it is stacked under the
     article and there is nothing to stick to. */
  @media (min-width: 64rem) {
    position: sticky;
    top: 2rem;
    align-self: start;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}

.margine__blocco {
  border-top: var(--filo-chiave) solid var(--inchiostro);
  padding-top: 0.7rem;

  & h2 {
    font-weight: 700;
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0 0 0.6rem;
  }

  & ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  & li {
    margin-bottom: 0.4rem;
  }

  & a {
    text-decoration: none;
    border-bottom: var(--filo) solid color-mix(in srgb, var(--inchiostro) 30%, transparent);

    &:hover,
    &:focus-visible {
      color: var(--viola);
      border-bottom-color: var(--viola);
    }
  }
}

/* ---------- intestazione di pagina ---------- */

.frontespizio {
  border-bottom: var(--filo-chiave) solid var(--inchiostro);
  padding-bottom: 1.25rem;
  margin-bottom: 1.75rem;
}

.frontespizio__briciole {
  font-family: var(--tipo-etichetta);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--inchiostro-tenue);
  margin: 0 0 0.8rem;

  & ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
  }

  & li + li::before {
    content: "/";
    margin-right: 0.5rem;
    opacity: 0.55;
  }

  & a {
    text-decoration: none;

    &:hover,
    &:focus-visible {
      color: var(--viola);
    }
  }
}

.frontespizio h1 {
  font-family: var(--tipo-titolo);
  font-size: clamp(1.7rem, 5vw, 3rem);
  line-height: 1.1;
  margin: 0;
}

.frontespizio__dati {
  font-family: var(--tipo-etichetta);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--inchiostro-tenue);
  margin: 0.8rem 0 0;
}

/* ---------- quesiti (FAQ) ---------- */

.quesiti {
  margin: 2.5rem 0;
  max-width: var(--colonna);
}

.quesito {
  border-top: var(--filo-forte) solid var(--inchiostro);

  &:last-of-type {
    border-bottom: var(--filo-forte) solid var(--inchiostro);
  }

  & > summary {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    cursor: pointer;
    padding: 0.85rem 0;
    list-style: none;

    &::-webkit-details-marker {
      display: none;
    }

    &::after {
      content: "";
      flex: none;
      margin-left: auto;
      width: 0.85rem;
      height: 0.85rem;
      border-right: var(--filo-forte) solid var(--inchiostro);
      border-bottom: var(--filo-forte) solid var(--inchiostro);
      transform: rotate(45deg) translateY(-0.15rem);
      transition: transform var(--pressa);
    }

    &:hover .quesito__domanda,
    &:focus-visible .quesito__domanda {
      color: var(--viola);
    }
  }

  &[open] > summary::after {
    transform: rotate(225deg) translateY(-0.15rem);
  }
}

.quesito__domanda {
  font-family: var(--tipo-etichetta);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
  margin: 0;
  transition: color var(--pressa-breve);
}

.quesito__risposta {
  padding: 0 0 1.1rem;
  font-size: 0.9375rem;

  & p {
    margin: 0 0 0.8rem;
  }

  & p:last-child {
    margin-bottom: 0;
  }
}

/* ---------- la legenda attiva ---------- */

/* Pointing at a legend row leaves that part of the plate drawn and drops the rest
   to a trace: the reader's eye is put where the sentence is, without a caption
   having to say "see the dashed line". The skeleton — axes, frame, the origin dot —
   carries no key and never dims, or the drawing would lose its scaffolding.
   Written with :has(), so hover and focus need no script at all; the press state
   exists for touch, where there is no hover to use. */

.lastra [data-parte] {
  transition: opacity var(--pressa);
}

.legenda__voce {
  transition: opacity var(--pressa-breve);
}

.legenda__chiave {
  padding: 0;
  cursor: pointer;
  color: inherit;
  transition: background-color var(--pressa-breve), color var(--pressa-breve);

  &:hover,
  &:focus-visible {
    background: var(--viola);
    color: var(--carta-piena);
  }

  &[aria-pressed="true"] {
    background: var(--inchiostro);
    color: var(--carta-piena);
  }
}

.tavola:has(.legenda__voce[data-chiave="1"]:hover) .lastra [data-parte]:not([data-parte="1"]),
.tavola:has(.legenda__chiave[aria-pressed="true"][aria-label$="1 della tavola"]) .lastra [data-parte]:not([data-parte="1"]),
.tavola:has(.legenda__voce[data-chiave="1"] .legenda__chiave:focus-visible) .lastra [data-parte]:not([data-parte="1"]) {
  opacity: 0.1;
}

.tavola:has(.legenda__voce[data-chiave="1"]:hover) .legenda__voce:not([data-chiave="1"]),
.tavola:has(.legenda__chiave[aria-pressed="true"][aria-label$="1 della tavola"]) .legenda__voce:not([data-chiave="1"]),
.tavola:has(.legenda__voce[data-chiave="1"] .legenda__chiave:focus-visible) .legenda__voce:not([data-chiave="1"]) {
  opacity: 0.4;
}

.tavola:has(.legenda__voce[data-chiave="2"]:hover) .lastra [data-parte]:not([data-parte="2"]),
.tavola:has(.legenda__chiave[aria-pressed="true"][aria-label$="2 della tavola"]) .lastra [data-parte]:not([data-parte="2"]),
.tavola:has(.legenda__voce[data-chiave="2"] .legenda__chiave:focus-visible) .lastra [data-parte]:not([data-parte="2"]) {
  opacity: 0.1;
}

.tavola:has(.legenda__voce[data-chiave="2"]:hover) .legenda__voce:not([data-chiave="2"]),
.tavola:has(.legenda__chiave[aria-pressed="true"][aria-label$="2 della tavola"]) .legenda__voce:not([data-chiave="2"]),
.tavola:has(.legenda__voce[data-chiave="2"] .legenda__chiave:focus-visible) .legenda__voce:not([data-chiave="2"]) {
  opacity: 0.4;
}

.tavola:has(.legenda__voce[data-chiave="3"]:hover) .lastra [data-parte]:not([data-parte="3"]),
.tavola:has(.legenda__chiave[aria-pressed="true"][aria-label$="3 della tavola"]) .lastra [data-parte]:not([data-parte="3"]),
.tavola:has(.legenda__voce[data-chiave="3"] .legenda__chiave:focus-visible) .lastra [data-parte]:not([data-parte="3"]) {
  opacity: 0.1;
}

.tavola:has(.legenda__voce[data-chiave="3"]:hover) .legenda__voce:not([data-chiave="3"]),
.tavola:has(.legenda__chiave[aria-pressed="true"][aria-label$="3 della tavola"]) .legenda__voce:not([data-chiave="3"]),
.tavola:has(.legenda__voce[data-chiave="3"] .legenda__chiave:focus-visible) .legenda__voce:not([data-chiave="3"]) {
  opacity: 0.4;
}

.tavola:has(.legenda__voce[data-chiave="4"]:hover) .lastra [data-parte]:not([data-parte="4"]),
.tavola:has(.legenda__chiave[aria-pressed="true"][aria-label$="4 della tavola"]) .lastra [data-parte]:not([data-parte="4"]),
.tavola:has(.legenda__voce[data-chiave="4"] .legenda__chiave:focus-visible) .lastra [data-parte]:not([data-parte="4"]) {
  opacity: 0.1;
}

.tavola:has(.legenda__voce[data-chiave="4"]:hover) .legenda__voce:not([data-chiave="4"]),
.tavola:has(.legenda__chiave[aria-pressed="true"][aria-label$="4 della tavola"]) .legenda__voce:not([data-chiave="4"]),
.tavola:has(.legenda__voce[data-chiave="4"] .legenda__chiave:focus-visible) .legenda__voce:not([data-chiave="4"]) {
  opacity: 0.4;
}

.tavola:has(.legenda__voce[data-chiave="5"]:hover) .lastra [data-parte]:not([data-parte="5"]),
.tavola:has(.legenda__chiave[aria-pressed="true"][aria-label$="5 della tavola"]) .lastra [data-parte]:not([data-parte="5"]),
.tavola:has(.legenda__voce[data-chiave="5"] .legenda__chiave:focus-visible) .lastra [data-parte]:not([data-parte="5"]) {
  opacity: 0.1;
}

.tavola:has(.legenda__voce[data-chiave="5"]:hover) .legenda__voce:not([data-chiave="5"]),
.tavola:has(.legenda__chiave[aria-pressed="true"][aria-label$="5 della tavola"]) .legenda__voce:not([data-chiave="5"]),
.tavola:has(.legenda__voce[data-chiave="5"] .legenda__chiave:focus-visible) .legenda__voce:not([data-chiave="5"]) {
  opacity: 0.4;
}

.tavola:has(.legenda__voce[data-chiave="6"]:hover) .lastra [data-parte]:not([data-parte="6"]),
.tavola:has(.legenda__chiave[aria-pressed="true"][aria-label$="6 della tavola"]) .lastra [data-parte]:not([data-parte="6"]),
.tavola:has(.legenda__voce[data-chiave="6"] .legenda__chiave:focus-visible) .lastra [data-parte]:not([data-parte="6"]) {
  opacity: 0.1;
}

.tavola:has(.legenda__voce[data-chiave="6"]:hover) .legenda__voce:not([data-chiave="6"]),
.tavola:has(.legenda__chiave[aria-pressed="true"][aria-label$="6 della tavola"]) .legenda__voce:not([data-chiave="6"]),
.tavola:has(.legenda__voce[data-chiave="6"] .legenda__chiave:focus-visible) .legenda__voce:not([data-chiave="6"]) {
  opacity: 0.4;
}

.tavola:has(.legenda__voce[data-chiave="7"]:hover) .lastra [data-parte]:not([data-parte="7"]),
.tavola:has(.legenda__chiave[aria-pressed="true"][aria-label$="7 della tavola"]) .lastra [data-parte]:not([data-parte="7"]),
.tavola:has(.legenda__voce[data-chiave="7"] .legenda__chiave:focus-visible) .lastra [data-parte]:not([data-parte="7"]) {
  opacity: 0.1;
}

.tavola:has(.legenda__voce[data-chiave="7"]:hover) .legenda__voce:not([data-chiave="7"]),
.tavola:has(.legenda__chiave[aria-pressed="true"][aria-label$="7 della tavola"]) .legenda__voce:not([data-chiave="7"]),
.tavola:has(.legenda__voce[data-chiave="7"] .legenda__chiave:focus-visible) .legenda__voce:not([data-chiave="7"]) {
  opacity: 0.4;
}

.tavola:has(.legenda__voce[data-chiave="8"]:hover) .lastra [data-parte]:not([data-parte="8"]),
.tavola:has(.legenda__chiave[aria-pressed="true"][aria-label$="8 della tavola"]) .lastra [data-parte]:not([data-parte="8"]),
.tavola:has(.legenda__voce[data-chiave="8"] .legenda__chiave:focus-visible) .lastra [data-parte]:not([data-parte="8"]) {
  opacity: 0.1;
}

.tavola:has(.legenda__voce[data-chiave="8"]:hover) .legenda__voce:not([data-chiave="8"]),
.tavola:has(.legenda__chiave[aria-pressed="true"][aria-label$="8 della tavola"]) .legenda__voce:not([data-chiave="8"]),
.tavola:has(.legenda__voce[data-chiave="8"] .legenda__chiave:focus-visible) .legenda__voce:not([data-chiave="8"]) {
  opacity: 0.4;
}

.tavola:has(.legenda__voce[data-chiave="9"]:hover) .lastra [data-parte]:not([data-parte="9"]),
.tavola:has(.legenda__chiave[aria-pressed="true"][aria-label$="9 della tavola"]) .lastra [data-parte]:not([data-parte="9"]),
.tavola:has(.legenda__voce[data-chiave="9"] .legenda__chiave:focus-visible) .lastra [data-parte]:not([data-parte="9"]) {
  opacity: 0.1;
}

.tavola:has(.legenda__voce[data-chiave="9"]:hover) .legenda__voce:not([data-chiave="9"]),
.tavola:has(.legenda__chiave[aria-pressed="true"][aria-label$="9 della tavola"]) .legenda__voce:not([data-chiave="9"]),
.tavola:has(.legenda__voce[data-chiave="9"] .legenda__chiave:focus-visible) .legenda__voce:not([data-chiave="9"]) {
  opacity: 0.4;
}
.tavola:has(.legenda__voce[data-chiave="10"]:hover) .lastra [data-parte]:not([data-parte="10"]),
.tavola:has(.legenda__chiave[aria-pressed="true"][aria-label$="10 della tavola"]) .lastra [data-parte]:not([data-parte="10"]),
.tavola:has(.legenda__voce[data-chiave="10"] .legenda__chiave:focus-visible) .lastra [data-parte]:not([data-parte="10"]) {
  opacity: 0.1;
}

.tavola:has(.legenda__voce[data-chiave="10"]:hover) .legenda__voce:not([data-chiave="10"]),
.tavola:has(.legenda__chiave[aria-pressed="true"][aria-label$="10 della tavola"]) .legenda__voce:not([data-chiave="10"]),
.tavola:has(.legenda__voce[data-chiave="10"] .legenda__chiave:focus-visible) .legenda__voce:not([data-chiave="10"]) {
  opacity: 0.4;
}
.tavola:has(.legenda__voce[data-chiave="11"]:hover) .lastra [data-parte]:not([data-parte="11"]),
.tavola:has(.legenda__chiave[aria-pressed="true"][aria-label$="11 della tavola"]) .lastra [data-parte]:not([data-parte="11"]),
.tavola:has(.legenda__voce[data-chiave="11"] .legenda__chiave:focus-visible) .lastra [data-parte]:not([data-parte="11"]) {
  opacity: 0.1;
}

.tavola:has(.legenda__voce[data-chiave="11"]:hover) .legenda__voce:not([data-chiave="11"]),
.tavola:has(.legenda__chiave[aria-pressed="true"][aria-label$="11 della tavola"]) .legenda__voce:not([data-chiave="11"]),
.tavola:has(.legenda__voce[data-chiave="11"] .legenda__chiave:focus-visible) .legenda__voce:not([data-chiave="11"]) {
  opacity: 0.4;
}
.tavola:has(.legenda__voce[data-chiave="12"]:hover) .lastra [data-parte]:not([data-parte="12"]),
.tavola:has(.legenda__chiave[aria-pressed="true"][aria-label$="12 della tavola"]) .lastra [data-parte]:not([data-parte="12"]),
.tavola:has(.legenda__voce[data-chiave="12"] .legenda__chiave:focus-visible) .lastra [data-parte]:not([data-parte="12"]) {
  opacity: 0.1;
}

.tavola:has(.legenda__voce[data-chiave="12"]:hover) .legenda__voce:not([data-chiave="12"]),
.tavola:has(.legenda__chiave[aria-pressed="true"][aria-label$="12 della tavola"]) .legenda__voce:not([data-chiave="12"]),
.tavola:has(.legenda__voce[data-chiave="12"] .legenda__chiave:focus-visible) .legenda__voce:not([data-chiave="12"]) {
  opacity: 0.4;
}

@media (prefers-reduced-motion: reduce) {
  .lastra [data-parte],
  .legenda__voce {
    transition: none;
  }
}

/* ---------- indice della tavola ---------- */

/* The index is marked by its dot and its weight, so the margin column's
   underline treatment is switched off inside it: two cues on one row read as a
   list of links that are all somehow active. */
.filza-ground a {
  border-bottom: 0;
}

.filza-ground .filza-count {
  font-family: var(--tipo-etichetta);
  color: var(--inchiostro-tenue);
  opacity: 1;
}

.filza-ground .filza-tile > a {
  font-family: var(--tipo-etichetta);
  font-size: 0.8125rem;
}

/* ---------- pie' di tavola ---------- */

.piede {
  border-top: var(--filo-chiave) solid var(--inchiostro);
  padding-top: 1.5rem;
  display: grid;
  gap: 1.75rem;

  @media (min-width: 52rem) {
    grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 0.8fr));
    gap: 2.5rem;
  }
}

.piede h2 {
  font-family: var(--tipo-etichetta);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 0.8rem;
}

.piede ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--tipo-etichetta);
  font-size: 0.8125rem;

  & li {
    margin-bottom: 0.4rem;
  }

  & a {
    text-decoration: none;
    border-bottom: var(--filo) solid color-mix(in srgb, var(--inchiostro) 30%, transparent);

    &:hover,
    &:focus-visible {
      color: var(--viola);
      border-bottom-color: var(--viola);
    }
  }
}

.piede__insegna {
  font-family: var(--tipo-titolo);
  font-size: 1.4rem;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}

.piede__nota {
  font-family: var(--tipo-etichetta);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--inchiostro-tenue);
  margin: 0 0 1rem;
}

/* ---------- lessico: le voci del glossario ---------- */

.lessico {
  margin: 0 0 2.5rem;
  counter-reset: lemma;
}

.lessico__gruppo {
  border-top: var(--filo-chiave) solid var(--inchiostro);
  padding-top: 0.6rem;
  margin-bottom: 2rem;

  & > h2 {
    font-family: var(--tipo-etichetta);
    font-weight: 700;
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 1rem;
    color: var(--inchiostro-tenue);
  }

  & dl {
    margin: 0;
    display: grid;
    gap: 0 1.2rem;

    @media (min-width: 48rem) {
      grid-template-columns: 13rem minmax(0, 1fr);
    }
  }

  & dt {
    counter-increment: lemma;
    font-family: var(--tipo-etichetta);
    font-weight: 700;
    font-size: 0.9375rem;
    letter-spacing: 0.02em;
    padding: 0.55rem 0 0.15rem;
    border-top: var(--filo) solid color-mix(in srgb, var(--inchiostro) 30%, transparent);

    &::before {
      content: counter(lemma, decimal-leading-zero);
      display: block;
      font-size: 0.625rem;
      letter-spacing: 0.14em;
      color: var(--oliva);
      margin-bottom: 0.15rem;
    }

    & a {
      color: inherit;
      text-decoration: none;
      border-bottom: var(--filo-forte) solid color-mix(in srgb, var(--viola) 40%, transparent);

      &:hover,
      &:focus-visible {
        border-bottom-color: var(--viola);
      }
    }
  }

  & dd {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    padding: 0.55rem 0 0.9rem;

    @media (min-width: 48rem) {
      border-top: var(--filo) solid color-mix(in srgb, var(--inchiostro) 30%, transparent);
    }

    & a {
      color: var(--viola);
      text-decoration: none;
      border-bottom: var(--filo) solid color-mix(in srgb, var(--viola) 40%, transparent);

      &:hover,
      &:focus-visible {
        border-bottom-color: var(--viola);
      }
    }
  }
}

/* ---------- scaffale: la bibliografia ---------- */

.scaffale {
  margin: 0 0 2.5rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}

.volume {
  display: grid;
  gap: 0.15rem 1.1rem;
  padding: 0.9rem 0;
  border-top: var(--filo) solid color-mix(in srgb, var(--inchiostro) 30%, transparent);

  @media (min-width: 48rem) {
    grid-template-columns: 3.5rem minmax(0, 1fr);
  }

  &:first-child {
    border-top: var(--filo-chiave) solid var(--inchiostro);
  }
}

.volume__anno {
  font-family: var(--tipo-etichetta);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--oliva);
  padding-top: 0.1rem;
}

.volume__corpo {
  & h3 {
    font-family: var(--tipo-titolo);
    font-size: 1.0625rem;
    line-height: 1.3;
    margin: 0 0 0.25rem;
  }

  & p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
  }

  & .volume__autore {
    font-family: var(--tipo-etichetta);
    font-size: 0.8125rem;
    letter-spacing: 0.03em;
    color: var(--inchiostro-tenue);
    margin-bottom: 0.3rem;
  }

  & a {
    color: var(--viola);
    text-decoration: none;
    border-bottom: var(--filo) solid color-mix(in srgb, var(--viola) 40%, transparent);

    &:hover,
    &:focus-visible {
      border-bottom-color: var(--viola);
    }
  }
}

.bollettino {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  border: var(--filo-forte) solid var(--inchiostro);
  max-width: 22rem;
  font-family: var(--tipo-etichetta);

  & a {
    flex: 1 1 auto;
    text-align: center;
    padding: 0.6rem 0.9rem;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    text-decoration: none;
    color: inherit;
    transition: background-color var(--pressa-breve), color var(--pressa-breve);

    &:hover,
    &:focus-visible {
      background: var(--inchiostro);
      color: var(--carta-piena);
    }
  }
}

.bollettino__feed {
  flex: none;
  border-left: var(--filo-forte) solid var(--inchiostro);
  color: var(--inchiostro-tenue);
}

.colofone {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: var(--filo-forte) solid var(--inchiostro);
  font-family: var(--tipo-etichetta);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--inchiostro-tenue);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
}

/* ---------- utilita' ---------- */

.salta {
  position: absolute;
  left: -9999px;

  &:focus {
    left: 1rem;
    top: 1rem;
    z-index: 10;
    background: var(--inchiostro);
    color: var(--carta-piena);
    padding: 0.5rem 1rem;
    font-family: var(--tipo-etichetta);
    font-weight: 700;
    font-size: 0.8125rem;
    text-transform: uppercase;
  }
}

.solo-lettori {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Fluid steps must never go BELOW the phone reading size: the body scale is
   pinned flat and only the display faces are allowed to move with the viewport. */
@media (max-width: 26rem) {
  body {
    font-size: 1rem;
  }

  .prosa {
    font-size: 1rem;
  }

  .attacco {
    font-size: 1.0625rem;
  }
}

@media print {
  .foglio {
    border: 0;
    outline: 0;
    max-width: none;
    padding: 0;
  }

  .leva,
  .bollettino {
    display: none;
  }

  .quesito__risposta {
    display: block !important;
  }
}