/* Controvento v4 - foglio di stile consolidato */

:root {
  --card-gap: 10px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font: 16px/1.42 Arial,Helvetica,sans-serif;
}

a,button {
  color: inherit;
}

.topbar {
  background: var(--red);
}

header {
  display: grid;
  align-content: space-between;
}

.kicker,.label,.type,.cross-label {
  text-transform: uppercase;
  letter-spacing: .15em;
  font-weight: 800;
  font-size: .7rem;
}

.kicker {
  display: flex;
  align-items: center;
  gap: 9px;
}

.kicker-icon {
  width: 2.15em;
  height: 2.15em;
  flex: 0 0 auto;
}

.title-prefix {
  display: block;
  margin-bottom: .24em;
}

.title-main {
  display: block;
}

.intro {
  margin: 0;
}

.issue {
  border-left: 8px solid var(--red);
  padding-left: 18px;
  font-weight: 800;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.metrics {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(3,1fr);
}

.metric {
  padding: 14px 16px 0 0;
}

.metric b {
  display: block;
  line-height: 1;
}

.metric span {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.toolbar {
  position: sticky;
  z-index: 8;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  backdrop-filter: blur(12px);
}

.search-box {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 260px;
}

.search-box input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--black);
  padding: 12px 46px 12px 14px;
  font: inherit;
}

.search-box input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.clear-search {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-transform: none;
}

.filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

button {
  border: 1px solid var(--black);
  border-radius: 0;
  background: var(--white);
  padding: 10px 13px;
  font: 700 .76rem Arial;
  text-transform: uppercase;
  cursor: pointer;
}

.system {
  border-bottom: 2px solid var(--black);
}

.system-head {
  display: grid;
  gap: 30px;
}

.system h2,.constellation h2 {
  margin: 0;
  font-size: clamp(2.4rem,6vw,6.8rem);
  letter-spacing: -.065em;
}

.system-copy {
  max-width: 590px;
  align-self: end;
  font-size: 1.05rem;
}

.system-emphasis {
  font-weight: 900;
  text-transform: uppercase;
}

.system-grid {
  display: grid;
  grid-template-columns: minmax(420px,620px) minmax(300px,1fr);
  gap: clamp(30px,5vw,80px);
  align-items: center;
  overflow: hidden;
}

.orbit {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.wheel {
  width: 72%;
  aspect-ratio: 1;
  border: 2px solid var(--black);
  position: relative;
  transition: .2s;
}

.wheel:after {
  white-space: pre;
  position: absolute;
  inset: 31%;
  display: grid;
  place-items: center;
  text-align: center;
  font-weight: 900;
  border: 2px solid var(--black);
}

.wheel-links {
  position: absolute;
}

.wheel-links a {
  position: absolute;
  z-index: 2;
  display: grid;
  text-decoration: none;
}

.wheel-links a b {
  line-height: 1;
}

.legend {
  display: grid;
  border-top: 2px solid var(--black);
  min-width: 0;
}

.legend:before {
  padding: 0 0 12px;
  font-size: .7rem;
  text-transform: uppercase;
}

.legend a {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  gap: 16px;
  text-decoration: none;
  padding: 13px 0;
  border-bottom: 1px solid var(--black);
}

.legend a:hover {
  color: var(--red);
}

.legend b {
  color: var(--red);
  font-size: 1.2rem;
}

.area {
  padding: 55px 0 70px;
  scroll-margin-top: 80px;
}

.area-head {
  display: grid;
  grid-template-columns: minmax(150px,12vw) minmax(340px,1fr) minmax(240px,.8fr);
  column-gap: clamp(34px,4vw,72px);
  margin-bottom: 42px;
  align-items: start;
}

.num {
  font-size: clamp(4rem,7vw,7.4rem);
  line-height: .82;
  letter-spacing: -.065em;
  font-variant-numeric: tabular-nums;
}

.area h2 {
  margin: 0;
  padding-top: .02em;
  font-size: clamp(2rem,4.3vw,4.6rem);
}

.area-desc {
  margin: 0;
  max-width: 440px;
  font-size: 1.05rem;
}

.grid {
  display: grid;
  border-top: 1px solid var(--black);
  border-left: 1px solid var(--black);
}

.card {
  position: relative;
  padding: 20px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--black);
  border-bottom: 1px solid var(--black);
}

.visual {
  width: calc(100% + 40px);
  height: 190px;
  margin: -20px -20px 18px;
  object-fit: cover;
  border-bottom: 1px solid var(--black);
  transition: .25s;
}

.card:hover .visual {
  filter: grayscale(0) contrast(1);
}

.visual.contain {
  object-fit: contain;
  padding: 12px;
  background: var(--white);
}

.type {
  margin-bottom: 7px;
}

.card h3 {
  margin: 0 0 10px;
  line-height: 1;
  letter-spacing: -.035em;
}

.card p {
  margin: 0 0 20px;
  color: #333;
}

.links {
  margin: 20px -20px -20px;
  padding: 13px 20px 17px;
  border-top: 1px solid var(--black);
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.links:before {
  content: 'Materiali e risorse';
  flex-basis: 100%;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mid);
}

.links:empty {
  display: none;
}

.links a {
  font-size: .72rem;
  font-weight: 900;
  line-height: 1.15;
  padding-bottom: 3px;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 3px solid var(--red);
}

.links a:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 3px;
}

.credit {
  font-size: .62rem !important;
  color: var(--mid) !important;
}

.empty {
  padding: 70px;
  text-align: center;
  text-transform: uppercase;
  font-weight: 800;
}

.cross {
  display: grid;
  min-height: 260px;
}

.cross-side {
  padding: 25px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cross-symbol {
  font-size: 5rem;
  font-weight: 900;
  line-height: .8;
}

.cross-body {
  padding: clamp(26px,5vw,60px);
}

.cross h2 {
  font-size: clamp(2rem,5vw,5.5rem);
  line-height: .86;
  margin: 0 0 20px;
}

.cross-body p {
  max-width: 820px;
  font-size: 1.08rem;
}

.cross-visual {
  margin: 0;
  border-left: 2px solid var(--red);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.cross-visual a {
  display: grid;
  place-items: center;
  padding: 26px 26px 14px;
  min-height: 0;
}

.cross-visual img {
  display: block;
  width: 100%;
  max-height: 310px;
  object-fit: contain;
}

.cross-visual figcaption {
  padding: 0 20px 20px;
  font-size: .62rem;
  line-height: 1.35;
  color: var(--mid);
  text-align: center;
}

.cross-visual figcaption a {
  display: inline;
  padding: 0;
  font-weight: 800;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
}

.constellation-head {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 30px;
  align-items: end;
  margin-bottom: 45px;
}

.constellation-head p {
  max-width: 520px;
  margin: 0;
}

.people {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
}

.person {
  height: 100%;
  border-top: 5px solid var(--red);
  color: var(--black);
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.person img,.person-placeholder {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  display: block;
  flex: none;
}

.person-placeholder {
  display: grid;
  place-items: center;
  background: #d8d8d5;
}

.person-placeholder span {
  font-size: 4rem;
  font-weight: 900;
  letter-spacing: -.08em;
}

.person-info {
  padding: 14px;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.person h3 {
  margin: 0 0 8px;
}

.person p {
  font-size: .8rem;
  margin: 0 0 14px;
}

.bio {
  align-self: flex-start;
  margin-top: auto;
  border: 0;
  border-bottom: 3px solid var(--red);
  padding: 4px 0;
  background: transparent;
  font-size: .64rem;
  text-transform: uppercase;
  font-weight: 900;
}

.bio:hover,.bio:focus-visible {
  background: var(--red);
  color: var(--white);
  padding-inline: 6px;
}

.archive-open {
  align-self: flex-start;
  flex: 0 0 auto;
}

.archive-open:hover,.archive-open:focus-visible {
  background: var(--red);
}

.archive-entry {
  max-width: 720px;
}

.archive-entry h3 {
  margin-top: 0;
}

.archive-entry .sources {
  margin-bottom: 0;
}

footer {
  padding: 30px max(4vw,28px);
  display: grid;
  grid-template-columns: minmax(180px,1fr) minmax(300px,1.45fr) minmax(180px,1fr);
  gap: clamp(24px,4vw,58px);
  align-items: start;
  border-top: 12px solid var(--red);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.footer-archive {
  display: grid;
  gap: 14px;
  padding-inline: clamp(24px,4vw,58px);
  border-inline: 1px solid var(--black);
}

.footer-archive p {
  margin: 0;
  max-width: 480px;
  text-transform: none;
  font-size: .82rem;
  font-weight: 400;
}

.footer-credits {
  justify-self: end;
  text-align: right;
}

.more {
  margin-top: 14px;
  align-self: flex-start;
  border: 0;
  border-bottom: 3px solid var(--red);
  padding: 5px 0;
  background: transparent;
  font-weight: 900;
  font-size: .72rem;
  text-transform: uppercase;
}

.more:hover {
  background: var(--red);
  color: var(--white);
  padding-inline: 7px;
}

.detail {
  width: min(900px,calc(100% - 30px));
  max-height: 90vh;
  padding: 0;
  border: 2px solid var(--black);
  color: var(--black);
}

.detail::backdrop {
  background: #000c;
  backdrop-filter: blur(4px);
}

.detail-top {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  color: var(--white);
  border-bottom: 2px solid var(--black);
}

.detail-top span {
  font-size: .7rem;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: .13em;
}

.close {
  border: 1px solid var(--white);
  background: transparent;
  color: var(--white);
  font-size: 1.2rem;
  padding: 3px 10px;
}

.detail-content {
  padding: clamp(24px,6vw,70px);
}

.detail-content h2 {
  margin: 0 0 30px;
  line-height: .83;
}

.detail-content h3 {
  margin: 32px 0 10px;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.detail-content p,.detail-content li {
  max-width: 720px;
  font-size: 1.04rem;
}

.detail-content ul,.detail-content ol {
  padding-left: 22px;
}

.detail-content a {
  text-decoration-color: var(--red);
}

.detail-note {
  margin-top: 35px;
  padding: 18px;
  border-left: 8px solid var(--red);
  background: var(--grey);
}

body.modal-open {
  overflow: hidden;
}

.sources {
  max-width: 720px;
  margin-top: 12px;
  padding-left: 28px !important;
  list-style-position: outside;
}

.sources li {
  padding: 10px 0 10px 2px;
  border-top: 1px solid #bbb;
  font-size: .9rem;
}

.sources li:last-child {
  border-bottom: 1px solid #bbb;
}

.sources a {
  font-weight: 700;
}

.bibliography {
  max-width: 720px;
  padding-left: 22px;
}

.bibliography li {
  margin: 8px 0;
  font-size: .9rem;
}

.resource-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 1.65em;
  color: var(--black);
  text-decoration: none !important;
}

.resource-link>span:last-child {
  line-height: 1.65em;
  hyphens: auto;
  overflow-wrap: break-word;
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.external-arrow {
  display: inline-block;
  width: .82em;
  height: .82em;
  margin-left: .32em;
  vertical-align: -.04em;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.resource-badge {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.65em;
  height: 1.65em;
  border-radius: 5px;
  background: var(--black);
  color: var(--white);
  font-size: .9em;
  text-decoration: none;
}

.links a.resource-link {
  border-bottom: 0;
  padding-bottom: 0;
}

.links a,.more,.bio {
  padding-bottom: 3px;
}

.detail-content a {
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}

.person-meta {
  font-size: .68rem !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 900;
  color: var(--red);
}

.person-project {
  padding-top: 10px;
  border-top: 1px solid #bbb;
}

.constellation-head>div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(18px,2vw,30px);
  min-width: 0;
}

.card-no {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 12px;
  min-width: 43px;
  height: 32px;
  padding: 0 7px;
  display: grid;
  place-items: center;
  color: var(--white);
  border: 1px solid var(--black);
  font-size: .65rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.contamination-details .resource-link {
  text-transform: uppercase;
  font-size: .78rem;
  letter-spacing: .025em;
}

.wheel:after {
  line-height: .92;
}

.wheel-links {
  inset: 14%;
}

.wheel-links a {
  width: 34%;
  border: 1px solid var(--black);
  grid-template-columns: 1.35rem minmax(0,1fr);
  gap: 6px;
  align-items: start;
  overflow-wrap: break-word;
}

.wheel-links a b {
  color: var(--red);
}

.wheel-links a span {
  min-width: 0;
}

.wheel-links a:nth-child(1) {
  top: 9%;
  right: 5%;
  color: var(--black);
}

.wheel-links a:nth-child(2) {
  top: 42%;
  right: 1%;
  width: 30%;
  color: var(--black);
}

.wheel-links a:nth-child(3) {
  bottom: 8%;
  right: 5%;
  color: var(--black);
}

.wheel-links a:nth-child(4) {
  bottom: 8%;
  left: 5%;
  color: var(--black);
}

.wheel-links a:nth-child(5) {
  top: 42%;
  left: 1%;
  width: 30%;
  color: var(--black);
}

.wheel-links a:nth-child(6) {
  top: 9%;
  left: 5%;
  color: var(--black);
}

.wheel-links a:hover,.wheel-links a:focus-visible {
  outline-offset: 1px;
}

.legend a {
  align-items: center;
}

.legend b {
  display: flex;
  align-items: center;
  height: 100%;
  line-height: 1;
}

.grid {
  border: 0;
  background: transparent;
}

.credit {
  margin: -18px -20px 13px !important;
  padding: 7px 20px;
  border-bottom: 1px solid var(--black);
}

.card .links {
  margin: auto -20px -20px;
}

.card .more {
  margin-bottom: 22px;
}

.detail {
  container-type: inline-size;
  overflow-x: hidden;
}

.detail-content {
  min-width: 0;
}

.detail-content h2 {
  max-width: 100%;
  font-size: clamp(1.85rem,7cqw,4.5rem);
  overflow-wrap: anywhere;
  hyphens: auto;
}

@media(max-width:1100px) {.people{grid-template-columns:repeat(3,minmax(0,1fr))}}

@media(max-width:900px) {header,.system-head,.constellation-head{grid-template-columns:1fr}.issue{justify-self:start}.system-grid{grid-template-columns:1fr;overflow:visible}.orbit{width:min(100%,620px);margin:24px auto}.area-head{grid-template-columns:120px minmax(0,1fr);column-gap:34px}.area-desc{grid-column:2}.people{grid-template-columns:repeat(2,minmax(0,1fr))}.cross{grid-template-columns:1fr}.cross-side{min-height:120px;flex-direction:row}.cross-visual{border-left:0;border-top:2px solid var(--red)}.cross-visual img{max-height:260px}.metrics{grid-template-columns:1fr}}

@media(max-width:580px) {:root{--page-gutter:clamp(18px,6vw,26px)}
      html,body{max-width:100%;overflow-x:hidden}
      .topbar{height:8px}
      header{min-height:0;padding-top:32px;padding-bottom:36px;gap:30px;grid-template-columns:minmax(0,1fr)}
      header>*{min-width:0}
      h1{width:100%;max-width:100%;margin:12px 0 24px;font-size:clamp(2.25rem,11.3vw,3.05rem);line-height:.82;letter-spacing:-.07em}
      .title-prefix{margin-bottom:.3em;font-size:.42em;line-height:1.05;letter-spacing:-.04em}
      .title-main{max-width:100%;transform:none}
      .intro{font-size:1rem;line-height:1.42}
      .issue{max-width:100%;padding-left:14px;font-size:.78rem}
      .metrics{gap:16px;padding-top:4px}
      .metric{padding-top:8px}
      .metric b{font-size:2.35rem}
      .toolbar{position:relative;display:block;padding-block:10px;overflow:hidden}
      .search-box{width:100%;min-width:0}
      .search-box input{font-size:16px;padding-block:11px}
      .filters{width:100%;max-width:100%;min-width:0;margin-top:8px;overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;padding-bottom:3px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
      .filters button{flex:0 0 auto;padding:9px 12px}
      .system{padding:42px var(--page-gutter)}
      .system-head{gap:24px;margin-bottom:28px}
      .system-head>*{min-width:0}
      .system h2,.constellation h2{font-size:clamp(2.7rem,14vw,4rem)}
      .constellation{overflow:hidden}
      .constellation h2{max-width:100%;font-size:clamp(2.15rem,11vw,3.15rem);overflow-wrap:anywhere}
      .constellation-head,.constellation-head p{min-width:0;max-width:100%;overflow-wrap:anywhere}
      .more,.bio,.cross-return,.links a{color:var(--black)}
      .system-copy{font-size:1rem}
      .wheel{width:78%}
      .wheel-links{inset:11%}
      .wheel-links a{grid-template-columns:.9rem minmax(0,1fr);gap:2px;font-size:.34rem;width:34%;padding:4px}
      .wheel-links a b{font-size:.48rem}
      .wheel-links a:nth-child(2),.wheel-links a:nth-child(5){width:31%}
      main{padding-bottom:55px}
      .area{padding:42px 0 52px}
      .area-head{grid-template-columns:1fr;row-gap:16px;margin-bottom:28px}
      .area-desc{grid-column:1}
      .num{font-size:4rem}
      .grid{grid-template-columns:minmax(0,1fr);gap:var(--card-gap)}
      .cross{margin:42px var(--page-gutter)}
      .cross-body{padding:26px 20px}
      .people{grid-template-columns:1fr}
      .person:nth-child(even){margin-top:0}
      .visual{height:165px}
      .detail{width:calc(100% - 18px);max-height:94vh}
      footer{grid-template-columns:1fr;gap:22px}.footer-archive{order:2;padding:22px 0 0;border-inline:0;border-top:1px solid var(--black)}.footer-credits{order:3;justify-self:start;text-align:left}}

:root {
  --page-gutter: max(5vw,28px);
}

body {
  font-family: "Avenir Next",Avenir,"Helvetica Neue",Arial,sans-serif;
  background-size: 7px 7px;
}

.topbar {
  height: 0;
}

.story-nav {
  position: fixed;
  z-index: 20;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 9px;
}

.story-nav a {
  width: 11px;
  height: 11px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  font-size: 0;
}

.story-nav a:hover,.story-nav a:focus-visible {
  background: var(--red);
  outline: 3px solid var(--paper);
}

header {
  position: relative;
  padding: clamp(28px,5vw,68px) var(--page-gutter);
  grid-template-rows: auto 1fr auto;
  gap: 32px;
  border: 0;
  overflow: hidden;
}

.hero-orbit {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
}

.hero-orbit:before,.hero-orbit:after {
  content: "";
  position: absolute;
  border: 1px solid #f2eddf38;
  border-radius: 50%;
}

.hero-orbit:after {
  border: 0;
}

.hero-index {
  grid-column: 1/-1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1;
  border-bottom: 1px solid #f2eddf55;
  padding-bottom: 14px;
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.kicker {
  font-size: .72rem;
}

.kicker-icon {
  display: none;
}

h1 {
  position: relative;
  z-index: 1;
  align-self: center;
  max-width: 1150px;
  margin: 0;
}

.title-prefix {
  max-width: 700px;
  margin: 0 0 .24em;
  font-family: "Avenir Next",Arial,sans-serif;
  line-height: 1.15;
  text-transform: uppercase;
}

.title-main {
  text-transform: none;
  transform: none;
}

.intro {
  position: relative;
  z-index: 1;
  align-self: end;
  font-size: clamp(1.1rem,1.7vw,1.45rem);
  line-height: 1.35;
}

.issue {
  position: relative;
  z-index: 1;
  align-self: end;
  justify-self: start;
  max-width: 330px;
  border: 0;
  border-top: 8px solid var(--lime);
  padding: 16px 0 0;
  font-size: .86rem;
}

.metrics {
  position: relative;
  z-index: 1;
  border-top: 1px solid #f2eddf55;
}

.metric b {
  font-size: 2.7rem;
}

.thesis {
  padding: clamp(70px,10vw,150px) var(--page-gutter);
  display: grid;
  gap: clamp(40px,8vw,130px);
}

.thesis-label {
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.thesis blockquote {
  margin: 0;
  font-size: clamp(2.2rem,5.1vw,5.8rem);
  line-height: .98;
  letter-spacing: -.045em;
}

.thesis blockquote em {
  font-weight: 400;
  text-decoration-thickness: .06em;
  text-underline-offset: .09em;
}

.thesis-note {
  align-self: end;
  max-width: 520px;
  border-top: 1px solid var(--ink);
  padding-top: 18px;
}

.toolbar {
  top: 0;
  padding: 13px var(--page-gutter);
  border-bottom: 1px solid var(--ink);
}

.search-box input,button {
  border-color: var(--ink);
  background: var(--paper);
}

button:hover,button.active {
  background: var(--ink);
  color: var(--paper);
}

.system {
  padding: clamp(70px,9vw,130px) var(--page-gutter);
  border: 0;
}

.system-head {
  grid-template-columns: minmax(0,1.25fr) minmax(300px,.75fr);
}

.system h2,.constellation h2 {
  line-height: .88;
}

.system-copy {
  border-left: 1px solid var(--ink);
  padding-left: 28px;
}

.legend b {
  font-family: "Avenir Next",sans-serif;
}

main {
  padding: 20px var(--page-gutter) 110px;
}

.operational-head {
  padding-top: 90px;
}

.area {
  border-color: var(--ink);
}

.area h2 {
  line-height: .94;
}

.area-desc {
  border-top: 5px solid var(--lime);
  padding-top: 12px;
}

.card {
  min-height: 350px;
  transition: transform .18s,box-shadow .18s;
}

.card:hover {
  background: var(--white);
}

.card:nth-child(3n+2) {
  transform: rotate(.35deg);
}

.card:nth-child(3n) {
  transform: rotate(-.3deg);
}

.card h3 {
  font-size: 1.75rem;
}

.card-no,.crossing-no {
  background: var(--blue);
  border: 0;
}

.visual {
  filter: grayscale(1) sepia(.12);
}

.links a {
  border-color: var(--red);
}

.cross {
  margin: 80px var(--page-gutter);
  grid-template-columns: 180px minmax(0,1fr) minmax(250px,340px);
}

.cross-visual {
  border-color: var(--ink);
}

.constellation {
  padding: clamp(80px,10vw,140px) var(--page-gutter);
}

.constellation-head p {
  border-top: 1px solid var(--paper);
  padding-top: 16px;
}

.people {
  gap: 16px;
}

.person {
  background: var(--paper);
}

.person img,.person-placeholder {
  filter: grayscale(1) contrast(1.1);
}

.bio {
  border-color: var(--red);
}

footer {
  border-color: var(--lime);
}

.footer-archive {
  border-color: #f2eddf66;
}

.detail {
  background: var(--paper);
}

.detail-content h3 {
  color: var(--blue);
}

@media(max-width:900px) {.story-nav{display:none}.thesis{grid-template-columns:1fr}.system-head{grid-template-columns:1fr}.system-copy{border-left:0;border-top:1px solid var(--ink);padding:20px 0 0}.cross{grid-template-columns:1fr}.hero-orbit{opacity:.55}}

@media(max-width:580px) {header{min-height:94svh;grid-template-columns:1fr}.hero-index{align-items:flex-start;gap:20px}.hero-index span:last-child{text-align:right}h1{font-size:clamp(3.9rem,19vw,6rem)}.intro{font-size:1.05rem}.issue{display:none}.metrics{grid-template-columns:repeat(3,1fr);gap:10px}.metric b{font-size:2rem}.metric span{font-size:.55rem}.thesis{padding-block:70px}.thesis blockquote{font-size:clamp(2.15rem,10vw,3.5rem)}.card:nth-child(n){transform:none}.cross{box-shadow:7px 7px 0 var(--ink)}}

body {
  background-image: none;
}

.story-nav {
  left: auto;
  right: 18px;
  padding: 12px 8px;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 999px;
}

.story-nav a {
  background: transparent;
}

.story-nav a:hover {
  background: var(--red);
}

header {
  min-height: 100svh;
  grid-template-columns: minmax(0,1fr) minmax(260px,.42fr);
  padding-top: 28px;
  border-bottom: 1px solid var(--ink);
}

.hero-orbit {
  right: -16vw;
  top: 4vh;
  width: clamp(470px,68vw,1100px);
  border: 2px solid var(--blue);
  opacity: .9;
}

.hero-orbit:before {
  inset: 18%;
  border: 2px solid var(--red);
}

.hero-orbit:after {
  inset: 36%;
  background: var(--lime);
  opacity: 1;
  mix-blend-mode: multiply;
}

.hero-index {
  color: var(--ink);
  border-color: var(--ink);
}

.kicker {
  color: var(--blue);
}

h1 {
  font-family: "Avenir Next",Avenir,Arial,sans-serif;
  font-weight: 900;
  line-height: .68;
  text-transform: uppercase;
}

.title-prefix {
  font-size: .09em;
  color: var(--blue);
}

.title-main {
  max-width: none;
}

.intro {
  padding: 22px 0;
  border-top: 9px solid var(--red);
  font-weight: 700;
}

.issue {
  border-color: var(--blue);
}

.metrics {
  border-color: var(--ink);
}

.metric b {
  font-family: "Avenir Next",sans-serif;
  font-style: normal;
  font-weight: 900;
  color: var(--blue);
}

.thesis {
  min-height: 78vh;
  grid-template-columns: minmax(240px,.55fr) minmax(0,1.45fr);
  align-items: center;
}

.thesis blockquote {
  font-family: "Avenir Next",sans-serif;
  font-weight: 800;
}

.thesis blockquote em {
  text-decoration: none;
  font-style: normal;
}

.thesis-note {
  border-color: var(--paper);
  font-weight: 500;
}

.route {
  padding: clamp(70px,10vw,150px) var(--page-gutter);
}

.route-head {
  grid-template-columns: .65fr 1.35fr;
  gap: 40px;
}

.route h2 {
  margin: 0;
  font-size: clamp(3.4rem,8vw,8rem);
  line-height: .78;
  letter-spacing: -.07em;
  text-transform: uppercase;
}

.route-intro {
  max-width: 560px;
  align-self: end;
  font-size: 1.2rem;
}

.route-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  border-top: 1px solid var(--paper);
  border-left: 1px solid var(--paper);
}

.route-card {
  min-height: 260px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--paper);
  border-bottom: 1px solid var(--paper);
  text-decoration: none;
  transition: .2s;
}

.route-card:hover,.route-card:focus-visible {
  background: var(--lime);
  color: var(--ink);
  outline: 0;
}

.route-no {
  font-size: .68rem;
  letter-spacing: .15em;
}

.route-card strong {
  margin-top: auto;
  font-size: clamp(1.45rem,2.5vw,2.5rem);
  line-height: .96;
}

.route-card span:last-child {
  margin-top: 16px;
  font-size: .82rem;
}

.toolbar {
  background: var(--lime);
  border-block: 1px solid var(--ink);
}

.search-box input {
  background: var(--white);
  border-width: 2px;
  border-radius: 999px;
  padding-left: 20px;
}

.filters button {
  border: 0;
  border-radius: 999px;
  background: transparent;
}

.filters button:hover,.filters button.active {
  background: var(--ink);
}

.system h2 {
  font-family: "Avenir Next",sans-serif;
  font-weight: 900;
  text-transform: uppercase;
}

.system-copy {
  border-color: var(--blue);
}

.system-emphasis {
  color: var(--blue);
}

.wheel {
  border-radius: 50%;
  transform: none;
  background: conic-gradient(var(--blue) 0 16.66%,var(--red) 0 33.33%,var(--lime) 0 50%,#ffb64b 0 66.66%,#49b88f 0 83.33%,var(--ink) 0);
}

.wheel:after {
  border-radius: 50%;
  transform: none;
  background: var(--paper-2);
}

.wheel-links a {
  box-shadow: none;
  border-radius: 999px;
}

.operational-head h2,.area h2 {
  font-family: "Avenir Next",sans-serif;
  font-weight: 900;
  text-transform: uppercase;
}

.area {
  padding-block: 90px;
}

.area:nth-child(even) {
  margin-inline: calc(-1 * var(--page-gutter));
  padding-inline: var(--page-gutter);
  background: var(--paper-2);
}

.area-desc {
  border-color: var(--red);
}

.num {
  font-family: "Avenir Next",sans-serif;
  font-style: normal;
  font-weight: 900;
  color: var(--red);
}

.grid {
  grid-template-columns: repeat(12,1fr);
  gap: 18px;
}

.card {
  grid-column: span 4;
  border-radius: 22px;
  background: var(--white);
  overflow: hidden;
}

.card:nth-child(n) {
  transform: none;
}

.card:nth-child(5n+1) {
  grid-column: span 6;
}

.card:nth-child(5n+2) {
  grid-column: span 6;
}

.card:hover {
  transform: translateY(-7px);
}

.card h3 {
  font-family: "Avenir Next",sans-serif;
  font-weight: 800;
}

.card-no {
  background: var(--red);
  border-radius: 999px;
}

.type {
  color: var(--blue);
}

.links {
  background: var(--paper-2);
}

.cross {
  transform: none;
  border-radius: 30px;
  overflow: hidden;
}

.cross h2 {
  font-family: "Avenir Next",sans-serif;
  font-weight: 900;
  text-transform: uppercase;
}

.constellation h2 {
  font-family: "Avenir Next",sans-serif;
  font-weight: 900;
  text-transform: uppercase;
}

.person {
  border-radius: 18px;
  overflow: hidden;
}

.contaminations-head {
  overflow: hidden;
}

.crossing {
  border-radius: 18px;
  overflow: hidden;
}

.detail-content h2 {
  font-family: "Avenir Next",sans-serif;
  font-weight: 900;
  text-transform: uppercase;
}

@media(max-width:1000px) {.route-grid{grid-template-columns:repeat(2,1fr)}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.card:nth-child(n){grid-column:auto}}

@media(max-width:700px) {.route-head{grid-template-columns:1fr}.route-grid{grid-template-columns:1fr}.route-card{min-height:190px}.grid{grid-template-columns:1fr}.thesis{grid-template-columns:1fr}h1{font-size:clamp(4.2rem,22vw,7rem)}.hero-orbit{right:-60vw}.story-nav{display:none}}

header .hero-index {
  justify-content: flex-start;
}

.hero-index span:last-child {
  display: none;
}

header .kicker {
  letter-spacing: .12em;
}

.title-prefix {
  letter-spacing: .12em;
}

.route-head {
  display: block;
  margin-bottom: 52px;
}

.route-intro {
  display: none;
}

.wheel:after {
  content: '6\A MOVIMENTI';
  font-size: clamp(.72rem,1.35vw,1.08rem);
  letter-spacing: .04em;
}

.wheel-links a {
  font-family: Arial,"Helvetica Neue",sans-serif;
  font-size: .58rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  padding: 8px 10px;
  background: var(--white);
  color: var(--ink);
}

.wheel-links a b {
  font-size: .7rem;
  font-weight: 700;
}

.wheel-links a:hover,.wheel-links a:focus-visible {
  background: var(--lime);
  color: var(--ink);
  outline: 2px solid var(--ink);
}

.wheel-links a:hover b,.wheel-links a:focus-visible b {
  color: var(--blue);
}

.legend:before {
  content: 'Scegli un movimento o uno strumento per raggiungerlo';
  font-family: Arial,"Helvetica Neue",sans-serif;
  font-weight: 600;
  letter-spacing: .06em;
}

.legend a {
  font-family: Arial,"Helvetica Neue",sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
}

.legend b {
  font-weight: 700;
}

.legend span {
  line-height: 1.35;
}

.operational-head .cross-label {
  font-size: 0;
}

.operational-head .cross-label:after {
  content: 'Strumenti per operare nei diversi ambiti didattici';
  font-size: .7rem;
}

.area h2 {
  letter-spacing: -.035em;
}

.card {
  border: 1px solid #8e9aa3;
}

.card:hover {
  border-color: var(--blue);
}

.card .links {
  background: #e6edf1;
  border-top: 1px solid #8e9aa3;
}

.constellation-head h2 {
  letter-spacing: -.035em;
  line-height: .9;
}

.constellation-head p {
  line-height: 1.55;
}

.contaminations>.area-head {
  display: none;
}

.bridge-mark .cross-label:empty {
  display: none;
}

.cross-body .cross-label {
  letter-spacing: .1em;
}

.cross-side .cross-label {
  display: none;
}

@media(max-width:580px) {.wheel-links a{font-size:.44rem;font-weight:600;line-height:1.15;padding:5px}.wheel-links a b{font-size:.52rem}.legend a{font-size:.92rem}.constellation-head h2{letter-spacing:-.02em}}

h1 {
  font-size: clamp(4.4rem,12vw,12rem);
  letter-spacing: 0;
}

.title-main {
  letter-spacing: 0;
  font-kerning: normal;
}

.operational-head h2:after {
  font-kerning: normal;
}

.operational-head h2,.area h2,.card h3,.constellation-head h2,.person h3,.contaminations-copy h2,.crossing h3 {
  letter-spacing: 0;
  font-kerning: normal;
}

.grid {
  column-gap: 18px;
  row-gap: 26px;
}

.area {
  position: relative;
  border-bottom: 0;
}

.area:after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100vw;
  height: 2px;
  background: var(--ink);
  transform: translateX(-50%);
}

.contaminations-head {
  padding-bottom: 44px;
}

.bridge-mark img {
  width: min(150px,100%);
  filter: brightness(0) saturate(100%);
}

.crossings {
  margin-top: 0;
}

.cross {
  border: 3px solid var(--ink);
}

@media(max-width:760px) {.contaminations-head{grid-template-columns:1fr;gap:26px}.bridge-mark{min-height:0;padding:0;align-items:flex-start}.bridge-mark img{width:96px}.contaminations-copy{padding:0}}

@media(max-width:580px) {h1{font-size:clamp(3.5rem,17vw,5.7rem);letter-spacing:0}.operational-head h2:after{font-size:clamp(2.35rem,11vw,3.6rem);line-height:.9}.area h2,.card h3,.constellation-head h2,.crossing h3{letter-spacing:0}}

.reminder {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-underline-offset: 4px;
}

.contaminations {
  padding: clamp(58px,8vw,110px) var(--page-gutter);
  background: #e7edf0;
  border-top: 2px solid var(--black);
  overflow: hidden;
}

.bridge-mark {
  flex-direction: column;
}

.bridge-mark i {
  font-size: clamp(5rem,11vw,10rem);
  line-height: 1;
}

.bridge-mark a {
  align-self: flex-start;
  font-size: .6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-underline-offset: 3px;
}

.contaminations-copy h2 {
  margin: 12px 0 22px;
  max-width: 1050px;
  font-size: clamp(3rem,7.4vw,8rem);
  text-transform: uppercase;
}

.contaminations-tagline {
  margin: 0 0 28px;
  font-size: clamp(1.15rem,2.2vw,1.75rem);
  font-weight: 900;
  max-width: 850px;
}

.contaminations-intro {
  columns: 2;
  column-gap: 42px;
  max-width: 1050px;
}

.contaminations-intro p {
  margin: 0 0 16px;
  break-inside: avoid;
}

.crossings-label {
  margin: 42px 0 14px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: .68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .13em;
}

.crossings-label:after {
  content: '';
  height: 1px;
  flex: 1;
}

.crossings {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: var(--card-gap);
}

.crossing {
  position: relative;
  min-width: 0;
  background: var(--white);
  display: flex;
  flex-direction: column;
}

.crossing-no {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 12px;
  display: grid;
  place-items: center;
  background: var(--red);
  color: var(--white);
  font-weight: 900;
  border: 1px solid var(--black);
}

.crossing-media {
  display: block;
  height: 245px;
  overflow: hidden;
  border-bottom: 1px solid var(--black);
  background: #d8d8d5;
}

.crossing-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: .25s;
}

.crossing-media.book img {
  object-fit: contain;
  padding: 18px;
  background: #ececea;
}

.crossing:hover .crossing-media img {
  filter: grayscale(0);
}

.crossing-credit {
  margin: 0;
  padding: 7px 14px;
  border-bottom: 1px solid #bbb;
  color: var(--mid);
  font-size: .58rem;
  line-height: 1.25;
}

.crossing-body {
  padding: 20px;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.crossing-question {
  margin: 0 0 8px;
  color: var(--red);
  font-size: .67rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.crossing h3 {
  margin: 0 0 12px;
}

.crossing-authors {
  margin: 0 0 13px !important;
  color: var(--mid) !important;
  font-size: .76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.crossing-text {
  margin: 0 0 22px;
  font-size: .92rem;
}

.crossing .more {
  margin-top: auto;
  margin-bottom: 0;
}

.contaminations-head {
  border-color: var(--red);
}

#app .area:last-child {
  border-bottom: 0;
}

.crossings-label:after {
  background: var(--red);
}

.crossing {
  border: 2px solid var(--red);
}

.crossing-no {
  border-color: var(--red);
}

.crossing-media,.crossing-credit {
  border-bottom-color: var(--red);
}

.contamination-details .detail-note {
  border-left-color: var(--red);
}

.contaminations .area-head {
  margin: 48px 0 28px;
}

.contaminations .area-head h2 {
  margin: 0;
  padding-top: .02em;
  font-size: clamp(2rem,4.3vw,4.6rem);
  line-height: .9;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.contaminations.search-results {
  padding-top: 55px;
  border: 0;
}

.contaminations.search-results .contaminations-head {
  display: none;
}

.contaminations.search-results .area-head {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.crossing[hidden] {
  display: none;
}

.contaminations.search-results .crossings {
  grid-template-columns: 1fr;
}

.archive-entry {
  padding: 30px 0;
  border-top: 3px solid var(--black);
}

.archive-entry:last-child {
  border-bottom: 3px solid var(--black);
}

.detail-content .archive-entry>h3:first-child {
  margin: 0 0 14px;
  font-size: clamp(1.3rem,3cqw,1.65rem);
  line-height: 1.05;
  letter-spacing: .035em;
}

.archive-index {
  max-width: 720px;
  margin: 22px 0 30px;
  padding: 14px 0;
  border-block: 1px solid var(--black);
  font-size: clamp(.72rem,2.7cqw,.86rem);
  font-weight: 900;
  line-height: 1.85;
  text-transform: uppercase;
  letter-spacing: .025em;
}

.archive-index-item {
  display: inline-block;
  white-space: nowrap;
}

.archive-index a {
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}

.archive-index-separator {
  padding: 0 .42em;
  color: var(--red);
}

.archive-entry {
  scroll-margin-top: 72px;
}

.crossing-no {
  min-width: 43px;
  width: auto;
  height: 32px;
  padding: 0 7px;
  font-size: .65rem;
  font-variant-numeric: tabular-nums;
}

@media(max-width:1100px) {.crossings{grid-template-columns:repeat(2,minmax(0,1fr))}}

.bridge-mark>img {
  height: auto;
}

.operational-head h2 {
  text-transform: uppercase;
}

.contaminations {
  border: 0;
  border-bottom: 2px solid var(--black);
}

.contaminations .area-head {
  padding-top: 0;
  border-top: 0;
}

.mobile-actions,.mobile-nav {
  display: none;
}

.cross {
  scroll-margin-top: 80px;
}

.cross h2 {
  margin-top: 12px;
}

.cross-return {
  display: inline;
  margin-top: 12px;
  font-size: .72rem;
  font-weight: 900;
  line-height: 1.55;
  text-transform: uppercase;
  text-decoration-color: var(--red);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

.constellation-head h2,.constellation-head .cross-label {
  margin-left: 0;
  transform: none;
}

#index-inclusione {
  scroll-margin-top: 90px;
}

@media(max-width:760px) {.contaminations-head{grid-template-columns:minmax(0,1fr)}.bridge-mark{min-height:230px;flex-direction:column;align-items:stretch}.bridge-mark>img{width:96px;max-width:100%}.contaminations-copy,.contaminations-copy>*{min-width:0;max-width:100%}.contaminations-copy h2{font-size:clamp(2rem,9vw,3.4rem);overflow-wrap:anywhere;hyphens:auto}.contaminations-intro{columns:1}.crossings{grid-template-columns:minmax(0,1fr)}.crossing-media{height:230px}.contaminations .area-head>*{min-width:0;max-width:100%}.contaminations .area-head h2{overflow-wrap:anywhere;hyphens:auto}}

@media(max-width:580px) {body{padding-bottom:76px}
      .mobile-actions{position:fixed;z-index:20;left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;pointer-events:none}
      .mobile-action{width:52px;height:52px;padding:0;display:grid;place-items:center;border:2px solid var(--black);border-radius:50%;background:var(--white);color:var(--black);box-shadow:0 4px 0 var(--black);font-size:1.05rem;pointer-events:auto;transition:opacity .18s,transform .18s}
      .mobile-action:hover,.mobile-action:focus-visible{background:var(--red);color:var(--white)}
      .mobile-search[hidden]{display:grid;opacity:0;transform:translateY(12px);pointer-events:none}
      .mobile-nav{position:fixed;z-index:30;inset:0;display:block;background:#0008;opacity:0;visibility:hidden;transition:opacity .22s,visibility .22s}
      .mobile-nav.open{opacity:1;visibility:visible}
      .mobile-nav-sheet{position:absolute;left:0;right:0;bottom:0;max-height:min(82vh,720px);overflow:auto;padding:18px var(--page-gutter) max(26px,env(safe-area-inset-bottom));background:var(--white);border-top:3px solid var(--black);transform:translateY(100%);transition:transform .25s ease-out}
      .mobile-nav.open .mobile-nav-sheet{transform:translateY(0)}
      .mobile-nav-head{position:sticky;top:-18px;z-index:1;display:flex;align-items:center;justify-content:space-between;margin:0 calc(-1 * var(--page-gutter)) 12px;padding:18px var(--page-gutter) 12px;background:var(--white);border-bottom:1px solid var(--black)}
      .mobile-nav-head strong{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase}
      .mobile-nav-close{width:40px;height:40px;padding:0;font-size:1.25rem}
      .mobile-nav-links{display:grid;border-top:1px solid #aaa}.mobile-nav-links a,.mobile-nav-group summary{display:grid;grid-template-columns:42px minmax(0,1fr);gap:10px;align-items:center;padding:13px 0;border-bottom:1px solid #aaa;text-decoration:none;font-size:.88rem;font-weight:800;line-height:1.15}.mobile-nav-links b,.mobile-nav-group summary b{display:grid;width:42px;min-height:25px;place-items:center;color:var(--red);font-size:1.2rem}.mobile-nav-links a:hover,.mobile-nav-links a:focus-visible,.mobile-nav-group summary:hover,.mobile-nav-group summary:focus-visible{color:var(--red)}
      .mobile-nav-group summary{position:relative;cursor:pointer;list-style:none}.mobile-nav-group summary::-webkit-details-marker{display:none}.mobile-nav-group summary:after{content:'+';position:absolute;right:2px;font-size:1.2rem}.mobile-nav-group[open] summary:after{content:'−'}.mobile-nav-submenu{padding:3px 0 7px 26px;border-bottom:1px solid #aaa;background:#f4f4f1}.mobile-nav-submenu a{grid-template-columns:38px minmax(0,1fr);padding:10px 0;border-bottom:1px solid #ccc;font-size:.8rem}.mobile-nav-submenu a:last-child{border-bottom:0}.mobile-nav-submenu b{width:38px;font-size:.82rem}}

.operational-head {
  min-height: clamp(300px,34vw,500px);
  padding: 0 !important;
  display: flex;
  align-items: center;
}

.operational-head .cross-label {
  display: none !important;
}

.operational-head h2 {
  display: flex;
  align-items: center;
  min-height: 100%;
  margin: 0 !important;
  font-size: 0 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.operational-head h2:after {
  display: block;
  font-size: clamp(3rem,7.4vw,8rem) !important;
  line-height: .88 !important;
  letter-spacing: 0 !important;
}

@media(max-width:580px) {.operational-head{min-height:280px}.operational-head h2:after{font-size:clamp(2.35rem,11vw,3.6rem)!important;line-height:.94!important}}

.contaminations-copy h2 {
  font-family: "Avenir Next",Avenir,"Helvetica Neue",Arial,sans-serif;
  font-weight: 800;
  letter-spacing: 0 !important;
  font-kerning: normal;
  line-height: .9;
}

.crossing h3 {
  font-family: "Avenir Next",Avenir,"Helvetica Neue",Arial,sans-serif;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: 0 !important;
  font-kerning: normal;
  line-height: 1.02;
}

.person {
  border: 1px solid #8e9aa3;
  transition: transform .18s,box-shadow .18s,border-color .18s;
}

.person:hover {
  transform: translateY(-7px);
  border-color: var(--lime);
  box-shadow: 0 18px 0 var(--lime);
}

.person h3 {
  font-family: "Avenir Next",Avenir,"Helvetica Neue",Arial,sans-serif;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: 0 !important;
  font-kerning: normal;
  line-height: 1.05;
}

@media(max-width:580px) {.contaminations-copy h2{font-size:clamp(2.45rem,12vw,4rem);letter-spacing:0!important}.crossing h3,.person h3{letter-spacing:0!important}}

.people {
  column-gap: 16px;
  row-gap: 30px;
  counter-reset: master;
}

.person {
  position: relative;
  counter-increment: master;
}

.person:before {
  content: 'M.' counter(master,decimal-leading-zero);
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 12px;
  min-width: 48px;
  height: 32px;
  padding: 0 8px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--red);
  color: var(--white);
  font-size: .65rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.contaminations-head {
  display: grid !important;
  grid-template-columns: minmax(0,1.5fr) minmax(180px,.5fr) !important;
  gap: clamp(34px,6vw,90px);
  align-items: end;
  margin-bottom: 48px !important;
  padding: 0 0 44px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.contaminations-copy {
  grid-column: 1;
  grid-row: 1;
  padding: 0 !important;
  background: transparent !important;
}

.bridge-mark {
  grid-column: 2;
  grid-row: 1;
  min-height: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  background: transparent !important;
}

.bridge-mark>img {
  width: min(170px,78%) !important;
  margin-left: auto;
  align-self: flex-end !important;
  filter: brightness(0) invert(1) !important;
}

.operational-head h2:after {
  content: 'I sei movimenti' !important;
  white-space: normal;
}

@media(min-width:1001px) {.grid>.card:nth-child(3):last-child{grid-column:span 6}}

@media(max-width:760px) {.contaminations-head{grid-template-columns:1fr!important;gap:28px}.contaminations-copy{grid-column:1;grid-row:1}.bridge-mark{grid-column:1;grid-row:2;justify-content:flex-start}.bridge-mark>img{width:96px!important;margin-left:0;align-self:flex-start!important}}

.story-nav a {
  position: relative;
}

.story-nav a:after {
  content: attr(aria-label);
  position: absolute;
  right: 24px;
  top: 50%;
  width: max-content;
  max-width: 220px;
  padding: 8px 11px;
  border: 1px solid var(--ink);
  border-radius: 6px;
  background: var(--ink);
  color: var(--paper);
  font: 700 .68rem/1.2 Arial,"Helvetica Neue",sans-serif;
  letter-spacing: .02em;
  text-transform: none;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translate(8px,-50%);
  transition: opacity .16s,transform .16s,visibility .16s;
  pointer-events: none;
  box-shadow: 0 5px 14px #10253d38;
}

.story-nav a:hover:after,.story-nav a:focus-visible:after {
  opacity: 1;
  visibility: visible;
  transform: translate(0,-50%);
}

#tesi,#rotta,#repertorio,#operational-title,#inclusione-trasversale,#maestri,#contaminazioni-educative,#archivio {
  scroll-margin-top: clamp(82px,9vh,120px);
}

#inizio {
  scroll-margin-top: 0;
}

.clear-search {
  right: 9px;
  width: 32px;
  height: 32px;
  padding: 0 !important;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--ink) !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--ink) !important;
  font-size: 1.05rem;
  line-height: 1;
  box-shadow: none !important;
  transition: background .15s,color .15s,border-color .15s;
}

.clear-search:hover,.clear-search:focus-visible {
  border-color: var(--blue) !important;
  background: var(--paper-2) !important;
  color: var(--blue) !important;
  outline: 2px solid transparent;
  box-shadow: none !important;
}

.clear-search[hidden] {
  display: none;
}

.mobile-bridge {
  display: grid !important;
  place-items: center;
}

.mobile-bridge img {
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(37%) sepia(96%) saturate(1917%) hue-rotate(337deg) brightness(106%) contrast(104%);
}

.legend .legend-movement {
  border-bottom: 0;
}

.legend-tools {
  flex-wrap: wrap;
  gap: 7px;
}

.legend .legend-tool {
  align-items: center;
  font-family: Arial,"Helvetica Neue",sans-serif;
  text-transform: none;
}

.legend .legend-tool:hover,.legend .legend-tool:focus-visible {
  border-color: var(--blue);
}

.card[id^="tool-"] {
  scroll-margin-top: 105px;
}

@media(max-width:580px) {.legend-tools{padding-left:0}.legend .legend-tool{font-size:.7rem}}

.legend-tools {
  display: block;
}

.legend .legend-tool {
  display: inline !important;
  width: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}

.legend .legend-tool+.legend-tool:before {
  content: '•';
  display: inline-block;
  color: var(--red);
  font-weight: 900;
}

.legend .legend-tool:hover,.legend .legend-tool:focus-visible {
  border: 0 !important;
  background: transparent !important;
  color: var(--blue) !important;
  outline: none;
  text-decoration: none;
}

@media(max-width:580px) {.legend-tools{padding-left:0}.legend .legend-tool{font-size:.72rem}}

.legend-group {
  border-bottom: 1px solid #7f8990;
}

.legend .legend-movement {
  padding: 8px 0 2px;
  line-height: 1.15;
}

.legend-tools {
  padding: 0 0 7px 58px;
  line-height: 1.25;
}

.legend .legend-tool {
  padding: 0 !important;
  font-size: .72rem;
  line-height: 1.3;
}

.legend .legend-tool+.legend-tool:before {
  margin: 0 .5em;
}

@media(max-width:580px) {.legend .legend-movement{padding:7px 0 2px}.legend-tools{padding:0 0 6px}.legend .legend-tool{font-size:.68rem;line-height:1.25}.legend .legend-tool+.legend-tool:before{margin:0 .4em}}

.system {
  --system-space: clamp(36px,4.5vw,64px);
  padding-block: var(--system-space);
}

.system-head {
  margin-bottom: clamp(24px,2.5vw,36px);
}

@media(max-width:1100px) {.system-head{grid-template-columns:1fr;gap:18px}
      .system-copy{max-width:720px;border-left:0;border-top:1px solid var(--ink);padding:18px 0 0}}

@media(max-width:900px) {.system{--system-space:clamp(30px,5vw,42px)}
      .system-head{margin-bottom:var(--system-space)}
      .system-grid{row-gap:var(--system-space)}
      .orbit{width:min(92%,560px);margin:0 auto}}

@media(max-width:580px) {.system{--system-space:28px;padding-block:var(--system-space)}
      .system-head{gap:14px;margin-bottom:var(--system-space)}
      .system-copy{padding-top:14px}
      .system-grid{row-gap:var(--system-space)}
      .orbit{width:min(100%,480px)}
      .wheel{width:82%}}

.hero-index,.issue {
  font-weight: 600;
}

.route-no {
  font-weight: 700;
}

.links:before,.links a {
  font-weight: 700;
}

.story-nav a:last-child:after {
  width: 210px;
  max-width: 210px;
  white-space: normal;
  overflow-wrap: normal;
}

.detail-content h2 {
  letter-spacing: 0 !important;
  font-kerning: normal;
}

.legend,.legend:before,.legend a,.legend b,.legend span,.legend .legend-tool {
  font-family: "Avenir Next",Avenir,"Helvetica Neue",Arial,sans-serif;
}

.crossing {
  transition: transform .18s,box-shadow .18s,border-color .18s;
}

.crossing:hover {
  transform: translateY(-7px);
  border-color: var(--red);
}

main {
  border-bottom: 0;
}

.area:last-child:after {
  display: none;
}

.contaminations.search-results {
  background: #e7edf0;
  border-bottom: 2px solid var(--black);
}

#inclusione-trasversale[hidden] {
  display: none !important;
}

@media(max-width:580px) {h1{width:100%;font-size:clamp(2.4rem,12.5vw,3.8rem)}
      .title-main{width:100%;max-width:100%;white-space:nowrap}
      .route h2{max-width:100%;font-size:clamp(2.05rem,10vw,3rem);line-height:.86;letter-spacing:-.045em;overflow-wrap:anywhere;hyphens:auto}
      .metric span{display:block;line-height:1.08}}

:root {
  --red: #e1251b;
  --red-dark: #8f1712;
  --red-soft: #f3b6b1;
  --route-red: #9f3029;
  --ink: #0b0b0b;
  --paper: #f7f7f5;
  --paper-2: #e5e5e2;
  --lime: #ffffff;
  --blue: #8f1712;
  --white: #ffffff;
  --black: #0b0b0b;
  --grey: #e5e5e2;
  --mid: #626262;
  --magenta: #e1251b;
}

body {
  color: var(--ink);
}

.story-nav {
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: rgba(255, 255, 255, 0.95);
}

.story-nav a:hover, .story-nav a:focus-visible {
  outline-color: var(--white);
}

header {
  color: var(--black);
  border-bottom-color: var(--black);
}

.hero-orbit::after {
  mix-blend-mode: multiply;
}

.hero-index, .metrics {
  color: var(--black);
}

.kicker, .title-prefix, .metric b {
  color: var(--red);
}

.intro {
  grid-column-start: 1;
  grid-column-end: -1;
  justify-self: start;
  max-width: 720px;
}

.thesis {
  color: var(--white);
}

.thesis blockquote em {
  color: var(--red-soft);
}

.route {
  color: var(--white);
}

.route-card:hover, .route-card:focus-visible {
  color: var(--black);
}

.toolbar {
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: rgba(255, 255, 255, 0.94);
}

.filters button:hover, .filters button.active {
  color: var(--white);
}

.system-emphasis, .num, .type {
  color: var(--red);
}

.wheel-links a:hover, .wheel-links a:focus-visible {
  color: var(--white);
}

.wheel-links a:hover b, .wheel-links a:focus-visible b {
  color: var(--white);
}

.legend b, .legend a:hover, .legend a:focus-visible {
  color: var(--red);
}

.card {
  border-top-color: rgb(155, 155, 152);
  border-right-color: rgb(155, 155, 152);
  border-bottom-color: rgb(155, 155, 152);
  border-left-color: rgb(155, 155, 152);
  box-shadow: rgba(11, 11, 11, 0.094) 0px 8px 18px;
}

.card:hover {
  box-shadow: 0 18px 0 var(--red);
}

.card-no, .crossing-no {
  color: var(--white);
}

.card .links, .links {
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: rgb(237, 237, 235);
  border-top-color: rgb(155, 155, 152);
  border-right-color: rgb(155, 155, 152);
  border-bottom-color: rgb(155, 155, 152);
  border-left-color: rgb(155, 155, 152);
}

.cross {
  box-shadow: rgba(11, 11, 11, 0.14) 0px 12px 24px;
}

.cross-side {
  color: var(--white);
}

.constellation {
  color: var(--white);
}

.constellation-head p {
  color: rgb(210, 210, 210);
  border-top-color: rgb(210, 210, 210);
  border-right-color: rgb(210, 210, 210);
  border-bottom-color: rgb(210, 210, 210);
  border-left-color: rgb(210, 210, 210);
}

.person {
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: rgb(119, 119, 119);
  border-right-color: rgb(119, 119, 119);
  border-bottom-color: rgb(119, 119, 119);
  border-left-color: rgb(119, 119, 119);
  border-image-source: none;
  border-image-slice: 100%;
  border-image-width: 1;
  border-image-outset: 0;
  border-image-repeat: stretch;
  box-shadow: rgba(0, 0, 0, 0.533) 0px 8px 18px;
}

.person:hover, .person:focus-within {
  transform: translateY(-7px);
  box-shadow: 0 18px 0 var(--red-soft);
}

.person-info {
  color: var(--black);
}

.contaminations-head {
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: transparent;
}

.bridge-mark {
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: transparent;
  color: var(--black);
}

.crossing {
  border-top-color: rgb(153, 153, 153);
  border-right-color: rgb(153, 153, 153);
  border-bottom-color: rgb(153, 153, 153);
  border-left-color: rgb(153, 153, 153);
  box-shadow: rgba(11, 11, 11, 0.125) 0px 8px 18px;
}

.crossing:hover {
  box-shadow: 0 15px 0 var(--red);
}

footer {
  color: var(--white);
}

.footer-archive {
  border-top-color: rgba(255, 255, 255, 0.4);
  border-right-color: rgba(255, 255, 255, 0.4);
  border-bottom-color: rgba(255, 255, 255, 0.4);
  border-left-color: rgba(255, 255, 255, 0.4);
}

.archive-open {
  color: var(--white);
}

.mobile-nav-links b, .mobile-nav-group summary b {
  color: var(--red);
}

.story-nav a::after {
  color: var(--white);
  box-shadow: rgba(0, 0, 0, 0.267) 0px 5px 14px;
}

.reminder {
  color: var(--red);
  text-decoration-color: var(--red);
}

@font-face {font-family: OpenDyslexic; src: url("font/OpenDyslexic-Regular.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap;}

@font-face {font-family: OpenDyslexic; src: url("font/OpenDyslexic-Bold.woff2") format("woff2"); font-style: normal; font-weight: 700 900; font-display: swap;}

.reading-toggle {
  position: relative;
  width: 16px;
  height: 18px;
  margin-top: 8px;
  margin-right: -2px;
  margin-bottom: 0px;
  margin-left: -2px;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  border-top-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 0px;
  border-left-width: 0px;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
  border-top-color: currentcolor;
  border-right-color: currentcolor;
  border-bottom-color: currentcolor;
  border-left-color: currentcolor;
  border-image-source: none;
  border-image-slice: 100%;
  border-image-width: 1;
  border-image-outset: 0;
  border-image-repeat: stretch;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: transparent;
  color: var(--black);
  display: grid;
  align-items: center;
  justify-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: none;
  line-height: 1;
  cursor: pointer;
  font-family: OpenDyslexic, Arial, sans-serif !important;
}

.reading-toggle:hover, .reading-toggle:focus-visible, .reading-toggle[aria-pressed="true"] {
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: transparent;
  color: var(--red);
  outline-color: initial;
  outline-style: initial;
  outline-width: 0px;
}

.reading-toggle::after {
  content: attr(aria-label);
  position: absolute;
  right: 35px;
  top: 50%;
  width: max-content;
  max-width: 230px;
  padding-top: 8px;
  padding-right: 11px;
  padding-bottom: 8px;
  padding-left: 11px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
  color: var(--white);
  font-style: normal;
  font-variant-caps: normal;
  font-variant-ligatures: normal;
  font-variant-numeric: normal;
  font-variant-east-asian: normal;
  font-variant-alternates: normal;
  font-size-adjust: none;
  font-language-override: normal;
  font-kerning: auto;
  font-optical-sizing: auto;
  font-feature-settings: normal;
  font-variation-settings: normal;
  font-variant-position: normal;
  font-variant-emoji: normal;
  font-weight: 700;
  font-stretch: normal;
  font-size: 0.68rem;
  line-height: 1.2;
  font-family: Arial, sans-serif;
  white-space-collapse: collapse;
  text-wrap-mode: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translate(8px, -50%);
  transition-behavior: normal, normal, normal;
  transition-duration: 0.16s, 0.16s, 0.16s;
  transition-timing-function: ease, ease, ease;
  transition-delay: 0s, 0s, 0s;
  transition-property: opacity, transform, visibility;
  pointer-events: none;
  box-shadow: rgba(0, 0, 0, 0.267) 0px 5px 14px;
}

.reading-toggle:hover::after, .reading-toggle:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translate(0px, -50%);
}

.mobile-reading-toggle {
  width: 100%;
  display: grid;
  grid-template-columns: 42px minmax(0px, 1fr);
  row-gap: 10px;
  column-gap: 10px;
  align-items: center;
  padding-top: 15px;
  padding-right: 0px;
  padding-bottom: 15px;
  padding-left: 0px;
  margin-top: 8px;
  border-right-width: 0px;
  border-bottom-width: 0px;
  border-left-width: 0px;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
  border-right-color: currentcolor;
  border-bottom-color: currentcolor;
  border-left-color: currentcolor;
  border-image-source: none;
  border-image-slice: 100%;
  border-image-width: 1;
  border-image-outset: 0;
  border-image-repeat: stretch;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: transparent;
  color: var(--ink);
  text-align: left;
  text-transform: none;
}

.mobile-reading-toggle:hover, .mobile-reading-toggle:focus-visible {
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: transparent;
  color: var(--red);
}

.reading-icon {
  box-sizing: border-box;
  height: 38px;
  aspect-ratio: 1 / 1;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: currentcolor;
  border-right-color: currentcolor;
  border-bottom-color: currentcolor;
  border-left-color: currentcolor;
  border-image-source: none;
  border-image-slice: 100%;
  border-image-width: 1;
  border-image-outset: 0;
  border-image-repeat: stretch;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  align-items: center;
  justify-items: center;
  font-weight: 700;
  line-height: 1;
  width: 38px !important;
  min-height: 38px !important;
  display: grid !important;
  color: var(--red) !important;
  font-family: OpenDyslexic, Arial, sans-serif !important;
  font-size: 1rem !important;
}

.mobile-reading-toggle > .reading-label {
  font-size: 0.88rem;
  font-weight: 800;
}

html.reading-mode {
  color-scheme: dark;
  --red: #ff746a;
  --red-dark: #ff9a92;
  --red-soft: #5b2522;
  --route-red: #5e211e;
  --ink: #f5f3ea;
  --paper: #0b0b0b;
  --paper-2: #1b1b1b;
  --white: #171717;
  --black: #f5f3ea;
  --grey: #242424;
  --mid: #cbc8bd;
  --magenta: #ff9a92;
}

html.reading-mode body, html.reading-mode body :not(svg):not(path) {
  font-family: OpenDyslexic, Arial, sans-serif !important;
}

html.reading-mode body {
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: rgb(11, 11, 11);
  color: rgb(245, 243, 234);
}

html.reading-mode p, html.reading-mode li, html.reading-mode .route-card span, html.reading-mode .legend a {
  line-height: 1.65;
  letter-spacing: 0.025em;
  word-spacing: 0.1em;
}

html.reading-mode h1, html.reading-mode h2, html.reading-mode h3, html.reading-mode strong {
  line-height: 1.28;
}

html.reading-mode header, html.reading-mode .system, html.reading-mode .area:nth-child(2n), html.reading-mode .contaminations, html.reading-mode .contaminations.search-results {
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: rgb(16, 16, 16);
  color: rgb(245, 243, 234);
}

html.reading-mode header {
  min-height: auto;
  grid-template-columns: minmax(0px, 1fr);
  grid-template-rows: auto;
  row-gap: clamp(30px, 5vw, 64px);
  column-gap: clamp(30px, 5vw, 64px);
  padding-block-start: clamp(32px, 6vw, 80px);
  padding-block-end: clamp(32px, 6vw, 80px);
}

html.reading-mode header h1 {
  max-width: 100%;
  font-size: clamp(3.2rem, 9vw, 8rem);
  line-height: 1;
  overflow-wrap: anywhere;
}

html.reading-mode header .intro {
  max-width: 780px;
  align-self: auto;
}

html.reading-mode header .issue {
  max-width: 620px;
  align-self: auto;
}

html.reading-mode .hero-orbit {
  opacity: 0.28;
}

html.reading-mode .hero-orbit::after {
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: rgb(109, 41, 37);
}

html.reading-mode .thesis, html.reading-mode .constellation, html.reading-mode footer {
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: rgb(5, 5, 5);
  color: rgb(245, 243, 234);
}

html.reading-mode .route {
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: rgb(94, 33, 30);
  color: rgb(255, 255, 255);
}

html.reading-mode .toolbar {
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: rgba(17, 17, 17, 0.95);
  color: rgb(245, 243, 234);
}

html.reading-mode .search-box input, html.reading-mode .filters button, html.reading-mode .wheel-links a, html.reading-mode .legend-tool {
  background-image: initial !important;
  background-position-x: initial !important;
  background-position-y: initial !important;
  background-size: initial !important;
  background-repeat: initial !important;
  background-attachment: initial !important;
  background-origin: initial !important;
  background-clip: initial !important;
  background-color: rgb(29, 29, 29) !important;
  color: rgb(245, 243, 234) !important;
  border-top-color: rgb(216, 213, 202) !important;
  border-right-color: rgb(216, 213, 202) !important;
  border-bottom-color: rgb(216, 213, 202) !important;
  border-left-color: rgb(216, 213, 202) !important;
}

html.reading-mode .card, html.reading-mode .crossing, html.reading-mode .person, html.reading-mode .person-info, html.reading-mode .cross, html.reading-mode .detail {
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: rgb(24, 24, 24);
  color: rgb(245, 243, 234);
  border-top-color: rgb(189, 185, 174);
  border-right-color: rgb(189, 185, 174);
  border-bottom-color: rgb(189, 185, 174);
  border-left-color: rgb(189, 185, 174);
}

html.reading-mode .links, html.reading-mode .card .links, html.reading-mode .cross-visual, html.reading-mode .mobile-nav-submenu, html.reading-mode .detail-note {
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: rgb(38, 38, 38);
  color: rgb(245, 243, 234);
}

html.reading-mode .mobile-nav-panel {
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: rgb(16, 16, 16);
  color: rgb(245, 243, 234);
}

html.reading-mode .person:hover, html.reading-mode .person:focus-within, html.reading-mode .card:hover, html.reading-mode .crossing:hover {
  box-shadow: rgb(91, 37, 34) 0px 14px 0px;
}

html.reading-mode .detail-content h3 {
  color: rgb(255, 170, 163);
}

html.reading-mode .card p, html.reading-mode .crossing-text, html.reading-mode .crossing-authors, html.reading-mode .person p, html.reading-mode .credit, html.reading-mode .crossing-credit {
  color: rgb(214, 211, 201) !important;
}

html.reading-mode .operational-head {
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
}

html.reading-mode .operational-head h2 {
  min-width: 0px;
  width: 100%;
  max-width: 100%;
}

html.reading-mode .operational-head h2::after {
  width: 100%;
  max-width: 100%;
  overflow-wrap: break-word;
  font-size: clamp(2.2rem, 7vw, 6rem) !important;
  line-height: 1.25 !important;
  white-space-collapse: collapse !important;
  text-wrap-mode: wrap !important;
}

html.reading-mode img:not(.mobile-bridge img) {
  filter: grayscale(1) contrast(1.08) brightness(0.78);
}

html.reading-mode .story-nav {
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: rgba(11, 11, 11, 0.95);
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: rgb(245, 243, 234);
  border-right-color: rgb(245, 243, 234);
  border-bottom-color: rgb(245, 243, 234);
  border-left-color: rgb(245, 243, 234);
  border-image-source: none;
  border-image-slice: 100%;
  border-image-width: 1;
  border-image-outset: 0;
  border-image-repeat: stretch;
}

html.reading-mode .story-nav a {
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: transparent;
  border-top-color: rgb(245, 243, 234);
  border-right-color: rgb(245, 243, 234);
  border-bottom-color: rgb(245, 243, 234);
  border-left-color: rgb(245, 243, 234);
}

html.reading-mode .story-nav a:hover, html.reading-mode .story-nav a:focus-visible {
  outline-color: rgb(11, 11, 11);
}

html.reading-mode .reading-toggle {
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: transparent;
  color: rgb(245, 243, 234);
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  outline-color: initial;
  outline-style: initial;
  outline-width: 0px;
}

html.reading-mode .reading-toggle:hover, html.reading-mode .reading-toggle:focus-visible, html.reading-mode .reading-toggle[aria-pressed="true"] {
  color: var(--red);
}

html.reading-mode .reading-icon {
  color: rgb(11, 11, 11) !important;
}

.mobile-action svg {
  display: block;
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cross-body {
  min-width: 0px;
}

.cross h2 {
  letter-spacing: 0px;
  font-kerning: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
}

@media (max-width: 1100px) and (min-width: 901px) {
  .cross {
    grid-template-columns: 140px minmax(0px, 1fr) minmax(160px, 220px);
  }
}

@media (max-width: 1100px) and (min-width: 901px) {
  .cross-visual img {
    width: 78%;
    max-height: 220px;
    margin-inline-start: auto;
    margin-inline-end: auto;
  }
}

@media (max-width: 1100px) and (min-width: 901px) {
  .cross h2 {
    font-size: clamp(2rem, 4.3vw, 4rem);
  }
}

@media (max-width: 900px) {
  .cross h2 {
    font-size: clamp(1.9rem, 8vw, 3.5rem);
    line-height: 1.08;
  }
}

@media (max-width: 900px) {
  .cross-visual a {
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
  }
}

@media (max-width: 900px) {
  .cross-visual img {
    width: min(58%, 180px);
    max-height: 180px;
    margin-inline-start: auto;
    margin-inline-end: auto;
  }
}

@media (max-width: 580px) {
  .cross h2 {
    font-size: clamp(1.75rem, 9vw, 2.7rem);
  }
}

@media (max-width: 580px) {
  .mobile-nav-links > a[href="#archivio"] {
    border-bottom-width: 0px;
    border-bottom-style: none;
    border-bottom-color: currentcolor;
  }
}

@media (max-width: 580px) {
  .mobile-reading-toggle {
    margin-top: 0px;
  }
}

@media (max-width: 580px) {
  .operational-head h2::after, html.reading-mode .operational-head h2::after {
    font-size: clamp(1.9rem, 10vw, 3rem) !important;
    line-height: 1.25 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reading-toggle, .card, .person, .crossing {
    transition-behavior: normal !important;
    transition-duration: 0s !important;
    transition-timing-function: ease !important;
    transition-delay: 0s !important;
    transition-property: none !important;
  }
}

body {
  background: var(--paper);
}

header {
  background: var(--white);
}

.thesis {
  background: var(--black);
}

.route {
  background: var(--route-red);
}

.system {
  background: var(--paper-2);
}

.cross {
  background: var(--white);
}

.cross-side {
  background: var(--red);
}

.cross-visual {
  background: var(--paper-2);
}

.constellation {
  background: var(--black);
}

.person-info {
  background: var(--white);
}

.contaminations,.contaminations.search-results {
  background: var(--paper-2);
}

.detail-top {
  background: var(--red);
}

footer {
  background: var(--black);
}

.archive-open {
  background: var(--red);
}

.mobile-nav-panel {
  background: var(--paper);
}

.mobile-nav-submenu {
  background: var(--paper-2);
}

/* Storynav: le etichette lunghe restano leggibili e dentro il fumetto. */
.story-nav a:last-of-type::after {
  width: 300px;
  max-width: min(300px, calc(100vw - 100px));
  white-space: normal;
  overflow-wrap: break-word;
}

.reading-toggle::after,
html.reading-mode .reading-toggle::after {
  width: 280px;
  max-width: min(280px, calc(100vw - 100px));
  white-space: normal;
  overflow-wrap: break-word;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
}

/* Le ombre delle schede sono permanenti: nessun sollevamento al passaggio. */
.grid {
  row-gap: 44px;
}

.card,
.card:hover,
.card:focus-within {
  transform: none;
  box-shadow: 0 18px 0 var(--red);
}

.people {
  row-gap: 48px;
}

.person,
.person:hover,
.person:focus-within {
  transform: none;
  box-shadow: 0 18px 0 var(--red-soft);
}

.crossings {
  row-gap: 39px;
}

.crossing,
.crossing:hover,
.crossing:focus-within {
  transform: none;
  box-shadow: 0 15px 0 var(--red);
}

html.reading-mode .card,
html.reading-mode .card:hover,
html.reading-mode .card:focus-within,
html.reading-mode .person,
html.reading-mode .person:hover,
html.reading-mode .person:focus-within,
html.reading-mode .crossing,
html.reading-mode .crossing:hover,
html.reading-mode .crossing:focus-within {
  transform: none;
  box-shadow: 0 14px 0 rgb(91, 37, 34);
}