:root {
  --royal-blue: #17458f;
  --oro: #f7a81b;
  --oro-chiaro: color-mix(in srgb, var(--oro) 80%, #fff);
  --deep: #0a1c40;
  --tenue: #9db2d4;

  --c-ryla: #3f6cad;
  --c-partner: #9a5a12;
  --c-alumni: #82569c;
  --c-contatti: #0975a2;
  --c-rylini: #9d4d73;
  --c-rotary: #0c7b7c;

  --font-titoli: Constantia, "Iowan Old Style", Charter, "Palatino Linotype",
                 Palatino, Georgia, "Noto Serif", serif;
  --font-testo: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, sans-serif;

  --fondo:
    radial-gradient(ellipse at 50% -10%, rgba(23, 69, 143, .85) 0%, transparent 62%),
    linear-gradient(180deg, #0d2a5c 0%, #0a1c40 100%);
}

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

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

body {
  --dim: clamp(300px, min(60vmin, 54vh), 540px);
  --raggio: calc(var(--dim) * .42);
  --raggio-neg: calc(var(--dim) * -.42);
  --nodo: calc(var(--dim) * .25);
  --estensione: calc(var(--raggio) + var(--nodo) * .5 + var(--dim) * .015);
  --ruota-dim: calc(var(--dim) * .34);
  --etichetta: calc(var(--nodo) * .135);
  --sposta: clamp(0px, calc((100vh - 750px) * .42), 52px);
  --alto-marchi: clamp(1rem, 3vh, 1.7rem);
  --lato-marchi: clamp(1.4rem, 3.2vw, 5.5rem);
  --largh-angolo: var(--testata-ryla);
  --centro-marchi: calc(var(--alto-marchi) +
    (var(--testata-distretto) * .46 - var(--largh-angolo) * .4984) / 2);

  --testata-ryla: clamp(96px, min(11.5vw, 16.5vh), 176px);
  --fattore-distretto: 1.5;
  --testata-distretto: calc(var(--testata-ryla) * var(--fattore-distretto));

  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-testo);
  font-variant-numeric: lining-nums;
  line-height: 1.65;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--fondo);
  background-color: var(--deep);
  overflow-x: hidden;
  animation: entra .5s ease both;
}

@keyframes entra {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

body.uscita {
  animation: none;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .34s ease, transform .34s ease;
}

body.stato-intro { overflow: hidden; height: 100vh; height: 100dvh; }

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

.topbar {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--alto-marchi);
  padding-left: max(var(--lato-marchi), env(safe-area-inset-left));
  padding-right: max(var(--lato-marchi), env(safe-area-inset-right));
}
.topbar img {
  width: var(--testata-distretto);
  opacity: .9;
  transition: opacity .2s ease;
}
.topbar a:hover img { opacity: 1; }

.testata-intro {
  position: fixed;
  z-index: 6;
  top: calc(clamp(4.6rem, 15vh, 8.6rem) + var(--sposta));
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2.4rem, 6.8vh, 5rem);
  padding: 0 1.2rem;
  transition: opacity .4s ease;
}
.lockup-ryla {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.3rem, 3vw, 2.1rem);
}

.lockup-ryla .marchio {
  width: min(clamp(120px, 15vw, 244px), 25vh);
  transform: translateX(4.5%);
}
.lockup-ryla .wordmark {
  width: min(clamp(100px, 12.4vw, 202px), 20.5vh);
  transform: translateX(-7.5%);
}

.lockup-ryla .filetto {
  flex: 0 0 1px;
  align-self: stretch;
  margin: .6rem 0;
  background: rgba(255, 255, 255, .26);
}

.stato-portale .testata-intro { opacity: 0; pointer-events: none; }

.marca-angolo {
  position: fixed;
  z-index: 6;
  top: var(--centro-marchi);
  left: max(var(--lato-marchi), env(safe-area-inset-left));
  width: var(--largh-angolo);
  opacity: 0;
  transition: opacity .55s ease .4s;
  pointer-events: none;
}
.stato-portale .marca-angolo { opacity: 1; pointer-events: auto; }
.marca-angolo a {
  display: block;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.marca-angolo a:hover img { opacity: .82; }
.marca-angolo img { transition: opacity .2s ease; }

.etichetta-home {
  display: block;
  margin-top: .32rem;
  font-size: min(clamp(.76rem, 2.2vw, .86rem),
    calc(var(--largh-angolo) * .175));
  font-weight: 700;
  letter-spacing: .16em;
  text-indent: .16em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(255, 255, 255, .72);
  transition: color .2s ease;
}
.marca-angolo a:hover .etichetta-home { color: var(--oro); }

.atrio .topbar {
  position: fixed;
  z-index: 6;
  top: 0;
  left: 0;
  right: 0;
}
.atrio .footer {
  position: fixed;
  z-index: 6;
  left: 0;
  right: 0;
  bottom: 0;
}
.atrio .palco { min-height: 100vh; min-height: 100dvh; }

.atrio { overflow: hidden; height: 100vh; height: 100dvh; }

.palco {
  position: relative;
  transform: translateY(var(--sposta));
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 max(1.2rem, env(safe-area-inset-left));
  text-align: center;
}

.blocco-intro,
.coordinate {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(94vw, 62ch);
  margin: 0;
}
.blocco-intro { top: calc(50% + var(--ruota-dim) * .5 + clamp(.25rem, .9vh, .6rem)); }
.coordinate   { top: auto; bottom: calc(50% + var(--estensione) + clamp(.5rem, 1.6vh, 1.2rem)); }

.orbita {
  position: relative;
  width: var(--dim);
  height: var(--dim);
  display: grid;
  grid-template: 1fr / 1fr;
  place-items: center;
  align-content: center;
}
.orbita > * { grid-area: 1 / 1; }

.orbita-traccia {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  stroke: rgba(255, 255, 255, .17);
  stroke-width: 1;
  opacity: 0;
  transform: scale(.85);
  transition: opacity .8s ease .3s, transform .9s cubic-bezier(.2, .8, .3, 1) .3s;
}
.stato-portale .orbita-traccia { opacity: 1; transform: none; }

.perno { z-index: 2; }
.perno .ruota {
  width: var(--ruota-dim);
  filter: drop-shadow(0 8px 26px rgba(0, 0, 0, .42));
}
.stato-portale .perno .ruota {
  animation: giro 1.25s cubic-bezier(.42, 0, .22, 1) forwards;
}
@keyframes giro {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.chiusura .perno .ruota {
  animation: giro-indietro 1.1s cubic-bezier(.42, 0, .22, 1) forwards;
}
@keyframes giro-indietro {
  from { transform: rotate(360deg); }
  to   { transform: rotate(0deg); }
}
.chiusura .sezioni li { transition-delay: calc(var(--j) * 60ms); }
.chiusura .orbita-traccia { transition-delay: .25s; }
.chiusura .testata-intro { transition-delay: .5s; }
.chiusura .blocco-intro { transition-delay: .55s; }

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

.sezioni .sez--ryla { --i: 0; --j: 5; }
.sezioni .sez--partner { --i: 1; --j: 4; }
.sezioni .sez--alumni { --i: 2; --j: 3; }
.sezioni .sez--contatti { --i: 3; --j: 2; }
.sezioni .sez--rylini { --i: 4; --j: 1; }
.sezioni .sez--rotary { --i: 5; --j: 0; }

.sezioni li {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  opacity: 0;
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--i) * 60deg))
    translateY(0)
    rotate(calc(var(--i) * -60deg))
    scale(.25);
  transition:
    transform .9s cubic-bezier(.2, .9, .3, 1.04),
    opacity .45s ease;
  transition-delay: calc(420ms + var(--i) * 80ms);
  pointer-events: none;
}
.stato-portale .sezioni li {
  opacity: 1;
  pointer-events: auto;
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--i) * 60deg))
    translateY(var(--raggio-neg))
    rotate(calc(var(--i) * -60deg))
    scale(1);
}

.sezioni a {
  --colore: var(--c-ryla);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--nodo) * .045);
  width: var(--nodo);
  height: var(--nodo);
  padding: calc(var(--nodo) * .07);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  background-color: var(--colore);
  background-image: linear-gradient(174deg,
    rgba(255, 255, 255, .11) 0%,
    rgba(255, 255, 255, 0) 52%,
    rgba(0, 0, 0, .07) 100%);
  box-shadow: 0 10px 22px -8px rgba(3, 10, 26, .7);
  color: #fff;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .28s cubic-bezier(.2, .8, .3, 1),
              box-shadow .28s ease,
              border-color .28s ease;
}
.sezioni a:hover,
.sezioni a:focus-visible {
  transform: translateY(-2px) scale(1.045);
  border-color: rgba(255, 255, 255, .42);
  box-shadow: 0 16px 30px -10px rgba(3, 10, 26, .82);
}
.sezioni a:active { transform: scale(.985); }

.sezioni svg {
  width: calc(var(--nodo) * .29);
  height: calc(var(--nodo) * .29);
  fill: currentColor;
  flex-shrink: 0;
}
.etichetta {
  font-size: var(--etichetta);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .015em;
  max-width: 100%;
  hyphens: none;
  color: rgba(255, 255, 255, .93);
}

.verso-sezione .sezioni li { transition-delay: 0s; }

.sezioni li.va-in-pagina a {
  transform: scale(1.9);
  opacity: 0;
  transition: transform .46s cubic-bezier(.3, 0, .2, 1), opacity .46s ease .08s;
}

.verso-sezione .sezioni li:not(.va-in-pagina) {
  opacity: 0;
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--i) * 60deg))
    translateY(0)
    rotate(calc(var(--i) * -60deg))
    scale(.3);
  transition: transform .42s cubic-bezier(.4, 0, .3, 1), opacity .3s ease;
}
.stato-portale .perno { cursor: pointer; }

.verso-sezione .orbita-traccia { opacity: 0; transition: opacity .3s ease; }
.verso-sezione .perno { opacity: 0; transition: opacity .4s ease .1s; }
.verso-sezione .coordinate,
.verso-sezione .marca-angolo,
.verso-sezione .topbar { opacity: 0; transition: opacity .3s ease; }

.rientro .sezioni li {
  opacity: 0;
  transition: none;
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--i) * 60deg))
    translateY(0)
    rotate(calc(var(--i) * -60deg))
    scale(.25);
}
.rientro .orbita-traccia { opacity: 0; transform: scale(.85); transition: none; }

.sez--ryla     a { --colore: var(--c-ryla); }
.sez--partner  a { --colore: var(--c-partner); }
.sez--alumni   a { --colore: var(--c-alumni); }
.sez--contatti a { --colore: var(--c-contatti); }
.sez--rylini   a { --colore: var(--c-rylini); }
.sez--rotary   a { --colore: var(--c-rotary); }

.blocco-intro { transition: opacity .35s ease; }
.stato-portale .blocco-intro { opacity: 0; pointer-events: none; }

.rule {
  width: clamp(88px, 12vw, 112px);
  height: 4px;
  margin: clamp(.6rem, 1.5vh, 1rem) auto clamp(.55rem, 1.4vh, .85rem);
  border: 0;
  border-radius: 2px;
  background: linear-gradient(90deg,
    var(--c-contatti) 0 25%,
    var(--oro) 25% 50%,
    var(--c-rotary) 50% 75%,
    var(--c-rylini) 75% 100%);
}

.occhiello {
  margin: 0;
  font-size: clamp(.78rem, 1.9vw, .88rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .26em;
  text-indent: .26em;
  color: var(--tenue);
}

.blocco-intro h1 {
  margin: clamp(.3rem, 1vh, .6rem) 0 .35rem;
  font-family: var(--font-titoli);
  font-size: clamp(1.45rem, min(3.2vw, 4vh), 2.25rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-indent: .08em;
}
.blocco-intro h1 .anno {
  display: block;
  margin-top: .1rem;
  font-size: .62em;
  letter-spacing: .16em;
  color: var(--oro);
}
.blocco-intro h1 .zona {
  display: block;
  margin-top: .2rem;
  font-size: clamp(.68rem, 1.6vw, .78rem);
  font-weight: 700;
  letter-spacing: .3em;
  text-indent: .3em;
  color: var(--tenue);
}

.quando {
  margin: 0 0 .3rem;
  font-family: var(--font-titoli);
  font-size: clamp(1.2rem, min(2.9vw, 3.1vh), 1.7rem);
  color: rgba(255, 255, 255, .8);
}
.quando-data {
  font-weight: 700;
  letter-spacing: .02em;
  color: inherit;
}
.claim {
  margin: 0 0 .85rem;
  font-family: var(--font-titoli);
  font-size: clamp(1.05rem, min(2.4vw, 2.7vh), 1.4rem);
  color: rgba(255, 255, 255, .72);
}
.claim em { color: var(--oro); font-style: italic; }

.avvio {
  display: inline-flex;
  align-items: center;
  padding: .5rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 100px;
  background: transparent;
  color: rgba(255, 255, 255, .7);
  font-family: inherit;
  font-size: clamp(.74rem, 1.4vh, .8rem);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  animation: respiro 2.6s ease-in-out infinite;
  transition: border-color .2s ease, color .2s ease;
}
.avvio:hover { border-color: var(--oro); color: var(--oro); }
@keyframes respiro {
  0%, 100% { opacity: .84; }
  50%      { opacity: 1; }
}

.coordinate {
  opacity: 0;
  transition: opacity .7s ease .8s;
}
.stato-portale .coordinate { opacity: 1; }

.coordinate {
  --corpo-data: clamp(1.06rem, 3.2vw, 1.32rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .22em;
}
.coordinate-anno {
  font-family: var(--font-titoli);
  font-weight: 700;
  font-size: calc(var(--corpo-data) * .82);
  line-height: 1.2;
  letter-spacing: .16em;
  text-indent: .16em;
  text-transform: uppercase;
  color: var(--oro);
}
.coordinate-riga {
  font-family: var(--font-titoli);
  font-size: var(--corpo-data);
  line-height: 1.25;
  white-space: nowrap;
  color: rgba(255, 255, 255, .8);
}
.coordinate-data {
  font-weight: 400;
  letter-spacing: .02em;
  color: inherit;
}

.footer {
  padding: 1rem 1.2rem max(1.1rem, calc(env(safe-area-inset-bottom) + .6rem));
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, .1);
  transition: opacity .6s ease .5s;
}
.stato-intro .footer { opacity: 0; }
.footer p { margin: 0; font-size: .76rem; color: rgba(255, 255, 255, .5); }

.social {
  display: flex;
  justify-content: center;
  gap: .7rem;
  margin: 0 0 .55rem;
  padding: 0;
  list-style: none;
}
.social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: rgba(255, 255, 255, .55);
  transition: color .2s ease, background .2s ease;
}
.social svg { width: 21px; height: 21px; }
.social a:hover { color: var(--oro); background: rgba(255, 255, 255, .06); }

.atrio .social { margin-bottom: .25rem; }
.atrio .social a { width: 38px; height: 38px; }
.atrio .social svg { width: 18px; height: 18px; }

a:focus-visible, .avvio:focus-visible {
  outline: 3px solid var(--oro);
  outline-offset: 5px;
}

.pagina {
  flex: 1;
  width: min(100% - 2.4rem, 70ch);
  margin-inline: auto;
  padding: clamp(2rem, 6vh, 3.5rem) 0;
}
.pagina .torna {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 2rem;
  color: rgba(255, 255, 255, .7);
  text-decoration: none;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.pagina .torna:hover { color: var(--oro); }
.segno {
  --colore: var(--c-ryla);
  width: clamp(62px, 9.4vw, 82px);
  height: clamp(62px, 9.4vw, 82px);
  display: grid;
  place-items: center;
  margin: 0 auto 1.2rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  background-color: var(--colore);
  background-image: linear-gradient(174deg,
    rgba(255, 255, 255, .11) 0%,
    rgba(255, 255, 255, 0) 52%,
    rgba(0, 0, 0, .07) 100%);
  box-shadow: 0 10px 22px -8px rgba(3, 10, 26, .7);
  color: #fff;
  animation: arriva .6s cubic-bezier(.2, .9, .3, 1.05) both;
}
.segno svg { width: 52%; height: 52%; fill: currentColor; }

@keyframes arriva {
  from { transform: scale(1.55); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.uscita-sezione .segno {
  transform: scale(1.9);
  opacity: 0;
  transition: transform .44s cubic-bezier(.3, 0, .2, 1), opacity .44s ease .06s;
  animation: none;
}
.uscita-sezione .pagina > :not(.segno),
.uscita-sezione .footer,
.uscita-sezione .topbar,
.uscita-sezione .marca-angolo {
  opacity: 0;
  transition: opacity .3s ease;
}

.altre {
  margin: 3.4rem 0 0;
  padding-top: 2.7rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.altre ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: start;
  gap: 1.5rem 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.altre li { width: 5.6rem; }
.altre a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: rgba(255, 255, 255, .86);
  -webkit-tap-highlight-color: transparent;
}
.altre-cerchio {
  --colore: var(--c-ryla);
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  background-color: var(--colore);
  background-image: linear-gradient(174deg,
    rgba(255, 255, 255, .11) 0%,
    rgba(255, 255, 255, 0) 52%,
    rgba(0, 0, 0, .07) 100%);
  box-shadow: 0 10px 22px -8px rgba(3, 10, 26, .7);
  color: #fff;
  transition: transform .28s cubic-bezier(.2, .8, .3, 1),
              box-shadow .28s ease,
              border-color .28s ease;
}
.altre-cerchio svg { width: 50%; height: 50%; fill: currentColor; }
.altre-nome {
  font-size: .8rem;
  line-height: 1.3;
  text-align: center;
  transition: color .2s ease;
}
.altre a:hover .altre-cerchio,
.altre a:focus-visible .altre-cerchio {
  transform: translateY(-2px) scale(1.05);
  border-color: rgba(255, 255, 255, .42);
  box-shadow: 0 16px 30px -10px rgba(3, 10, 26, .82);
}
.altre a:hover .altre-nome { color: var(--oro); }

.verso--ryla     .altre-cerchio { --colore: var(--c-ryla); }
.verso--partner  .altre-cerchio { --colore: var(--c-partner); }
.verso--alumni   .altre-cerchio { --colore: var(--c-alumni); }
.verso--contatti .altre-cerchio { --colore: var(--c-contatti); }
.verso--rylini   .altre-cerchio { --colore: var(--c-rylini); }
.verso--rotary   .altre-cerchio { --colore: var(--c-rotary); }

.altre-ruota {
  display: block;
  margin: 1.9rem auto 0;
  width: fit-content;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255, 255, 255, .55);
  transition: color .2s ease;
}
.altre-ruota:hover { color: var(--oro); }

.segno--ryla     { --colore: var(--c-ryla); }
.segno--partner  { --colore: var(--c-partner); }
.segno--alumni   { --colore: var(--c-alumni); }
.segno--contatti { --colore: var(--c-contatti); }
.segno--rylini   { --colore: var(--c-rylini); }
.segno--rotary   { --colore: var(--c-rotary); }

.pagina h1 {
  margin: 0 0 1.2rem;
  font-family: var(--font-titoli);
  font-size: clamp(1.7rem, 5vw, 2.5rem);
  font-weight: 400;
  text-align: center;
}
.pagina .sommario {
  max-width: 56ch;
  margin-inline: auto;
  font-family: var(--font-titoli);
  font-size: clamp(1.05rem, 2.8vw, 1.3rem);
  line-height: 1.55;
  text-align: center;
  text-wrap: pretty;
  color: rgba(255, 255, 255, .9);
}
.pagina p { color: rgba(255, 255, 255, .8); }

.pagina h2 {
  margin: 2.8rem 0 1rem;
  font-family: var(--font-titoli);
  font-size: clamp(1.2rem, 3.4vw, 1.6rem);
  font-weight: 400;
  color: #fff;
}
.pagina h3 {
  margin: 0 0 .35rem;
  font-size: 1.02rem;
  font-weight: 700;
  color: #fff;
}

.blocco {
  display: grid;
  gap: .4rem 2.4rem;
  padding: 2.2rem 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.blocco:last-of-type { border-bottom: 1px solid rgba(255, 255, 255, .16); }
.etichetta-sezione {
  margin: 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oro);
}
.blocco-corpo > :first-child { margin-top: 0; }
.blocco-corpo > :last-child { margin-bottom: 0; }

@media (min-width: 760px) {
  .blocco { grid-template-columns: 12ch 1fr; }
  .etichetta-sezione { padding-top: .35rem; }
  .blocco-corpo .azioni { margin-left: calc(-12ch - 2.4rem); }
}

.nome-grande {
  margin: 0;
  font-family: var(--font-titoli);
  font-size: clamp(1.35rem, 3.6vw, 1.7rem);
  color: #fff;
}
.ruolo {
  margin: .1rem 0 .7rem;
  font-size: .92rem;
  color: rgba(255, 255, 255, .6);
}
.recapito { margin: 0; }
.recapito a { color: var(--oro); }

.elenco-persone {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: grid;
  grid-template-rows: repeat(8, auto);
  grid-auto-flow: column;
  column-gap: 2.4rem;
}
.elenco-persone li {
  padding: .5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  font-size: .98rem;
  color: rgba(255, 255, 255, .88);
}
@media (max-width: 520px) {
  .elenco-persone { display: block; }
}

.dati {
  margin: 1.8rem 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.dati > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .4rem 1.5rem;
  padding: .85rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.dati dt {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.dati dd {
  margin: 0;
  font-family: var(--font-titoli);
  font-size: 1.14rem;
  color: #fff;
}
.dati--evidenza dd { color: var(--oro); }

.foto-testo {
  display: grid;
  gap: 1.6rem 2.4rem;
  margin: 2.2rem 0;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
  align-items: start;
}
@media (min-width: 760px) {
  .foto-testo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.foto {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 3px;
}
.foto img {
  width: 100%;
  display: block;
}
.foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(13, 42, 92, .18) 0%,
    rgba(10, 28, 64, .34) 100%);
  pointer-events: none;
}
.foto figcaption {
  margin-top: .6rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  text-align: center;
  text-wrap: balance;
}

.foto--larga {
  margin: 2.2rem 0;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
  border-radius: 0;
  overflow: visible;
}
.foto--larga img { border-radius: 3px; }
.foto--larga::after { top: 1.8rem; bottom: 1.6rem; border-radius: 3px; }

@media (min-width: 760px) {
  .foto-testo--rovescio { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .foto-testo--rovescio .foto { order: 2; }
}

.elenco-sezioni { list-style: none; margin: 1.4rem 0 2rem; padding: 0; }
.elenco-sezioni li {
  padding: .7rem 0 .7rem 1.2rem;
  border-left: 3px solid var(--oro);
  margin-bottom: .5rem;
  font-family: var(--font-titoli);
  font-size: 1.08rem;
}
.elenco-sezioni a { color: #fff; text-decoration: none; }
.elenco-sezioni a:hover { color: var(--oro); }

.confronto { list-style: none; margin: 1.4rem 0; padding: 0; }
.confronto li {
  padding: .7rem 0 .7rem 1.2rem;
  border-left: 3px solid var(--oro);
  margin-bottom: .5rem;
  font-family: var(--font-titoli);
  font-size: 1.08rem;
  color: #fff;
}
.confronto span { color: rgba(255, 255, 255, .55); }

.percorso, .passi {
  list-style: none;
  counter-reset: passo;
  margin: 1.6rem 0;
  padding: 0;
}
.percorso li, .passi li {
  position: relative;
  counter-increment: passo;
  padding: 0 0 1.6rem 2.6rem;
  border-left: 1px solid rgba(255, 255, 255, .18);
  margin-left: .6rem;
}
.percorso li:last-child, .passi li:last-child { border-left-color: transparent; padding-bottom: 0; }
.percorso li::before, .passi li::before {
  content: "";
  position: absolute;
  left: -6px;
  top: .35rem;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--oro);
}
.passi li { padding-left: 3.4rem; border-left: 0; margin-left: 0; }
.passi li::before {
  content: counter(passo);
  left: 0;
  top: -.35rem;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  font-family: var(--font-titoli);
  font-size: 2.1rem;
  line-height: 1;
  color: color-mix(in srgb, var(--oro) 85%, transparent);
}
.percorso time {
  display: block;
  margin-bottom: .2rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--oro);
}
.percorso p, .passi p { margin: 0; font-size: .96rem; }

.avviso {
  margin: 1.8rem 0;
  padding: 1.2rem 1.3rem;
  border-left: 4px solid var(--oro);
  border-radius: 0 10px 10px 0;
  background: color-mix(in srgb, var(--oro) 10%, transparent);
}
.avviso h3 { margin-bottom: .4rem; color: var(--oro); }
.avviso p { margin: 0; }

.rimando {
  margin-top: 2.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .95rem;
  text-align: center;
}
.rimando a { color: var(--oro); }

.griglia-valore {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.6rem 2.4rem;
  margin: 1.8rem 0;
}
.griglia-valore > div { padding-top: .9rem; border-top: 2px solid var(--oro); }
.griglia-valore h3 { margin-bottom: .3rem; }
.griglia-valore p { margin: 0; font-size: .95rem; color: rgba(255, 255, 255, .74); }
.griglia-valore > .valore--largo { grid-column: 1 / -1; }

.livelli { margin: 1.8rem 0; border-top: 1px solid rgba(255, 255, 255, .16); }
.livello {
  display: grid;
  gap: .4rem 2.4rem;
  padding: 1.8rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
@media (min-width: 760px) {
  .livello { grid-template-columns: 19ch 1fr; align-items: start; }
}
.livello-testata > :first-child { margin-top: 0; }
.livello--principale .livello-quota { color: var(--oro); }
.livello-nome {
  margin: 0;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
}
.livello-quota {
  margin: .1rem 0 0;
  font-family: var(--font-titoli);
  font-size: clamp(1.9rem, 5.5vw, 2.5rem);
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}
.livello-nota {
  margin: .35rem 0 0;
  font-size: .82rem;
  color: rgba(255, 255, 255, .55);
}
.livello ul { margin: 0; padding: 0; list-style: none; }
.livello li {
  position: relative;
  margin-bottom: .4rem;
  padding-left: 1.1rem;
  font-size: .95rem;
  color: rgba(255, 255, 255, .8);
}
.livello li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 5px;
  height: 1px;
  background: var(--oro);
}

.azioni {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem;
  margin: 2.2rem 0 0;
}
.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .85rem 1.6rem;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 3px;
  color: #fff;
  text-decoration: none;
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.bottone:hover { border-color: var(--oro); color: var(--oro); }
.bottone--primario {
  border-color: var(--oro);
  background: var(--oro);
  color: #12233f;
}
.bottone--primario:hover { background: var(--oro-chiaro); border-color: var(--oro-chiaro); color: #12233f; }

.bottone--in-attesa { opacity: .55; cursor: not-allowed; pointer-events: none; }
.nota-segnaposto {
  margin: .8rem 0 0;
  font-size: .84rem;
  color: rgba(255, 255, 255, .5);
}

.video {
  position: relative;
  margin: 1.7rem 0 1.1rem;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 4px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 6%, rgba(23, 69, 143, .8) 0%, transparent 72%),
    linear-gradient(180deg, #133460 0%, #0a1c40 100%);
}
.video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-avvio {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .95rem;
  width: 100%;
  padding: 1.2rem;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
}
.video-avvio:focus-visible { outline: 3px solid var(--oro); outline-offset: -7px; }

.video-play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(52px, 8.5vw, 66px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 50%;
  transition: border-color .2s ease, background .2s ease;
}
.video-play svg {
  width: 40%;
  fill: #fff;
  transform: translateX(7%);
  transition: fill .2s ease;
}

.video-titolo {
  display: block;
  font-family: var(--font-titoli);
  font-size: clamp(1rem, 2.4vw, 1.18rem);
  line-height: 1.35;
  color: #fff;
  transition: color .2s ease;
}
.video-fonte {
  display: block;
  margin-top: .34rem;
  font-size: .78rem;
  letter-spacing: .03em;
  color: rgba(255, 255, 255, .58);
}

.video-avvio:hover .video-play { border-color: var(--oro); background: color-mix(in srgb, var(--oro) 14%, transparent); }
.video-avvio:hover .video-play svg { fill: var(--oro); }
.video-avvio:hover .video-titolo { color: var(--oro); }

.video + .video { margin-top: 1.1rem; }

.stato-lavori {
  display: inline-block;
  margin: 0 0 1rem;
  padding: .35rem .9rem;
  border: 1px solid color-mix(in srgb, var(--oro) 50%, transparent);
  border-radius: 100px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oro);
}

@media (max-width: 900px) {
  body {
    --sposta: clamp(0px, calc((100vh - 660px) * .34), 44px);
    --largh-angolo: clamp(
      calc(var(--testata-ryla) * .68),
      calc(var(--testata-ryla) * .68 + (100vh - 640px) * .1),
      var(--testata-ryla));
    --dim: min(92vw, 420px);
    --raggio: calc(var(--dim) * .385);
    --raggio-neg: calc(var(--dim) * -.385);
    --nodo: calc(var(--dim) * .26);
    --etichetta: max(13px, calc(var(--nodo) * .142));
    --ruota-dim: calc(var(--dim) * .3);
    --testata-ryla: clamp(86px, 21vw, 116px);
    --fattore-distretto: 1.42;
  }

  .atrio .topbar img {
    transition: transform .75s cubic-bezier(.25, .8, .3, 1), opacity .2s ease;
  }
  .atrio.stato-intro .topbar img {
    transform: translateX(calc(50% + var(--lato-marchi) - 50vw));
  }

  .testata-intro { top: calc(clamp(6rem, 19vh, 9.8rem) + var(--sposta)); gap: clamp(1rem, 2.8vh, 1.6rem); }
  .lockup-ryla { gap: clamp(1rem, 4vw, 1.6rem); }
  .lockup-ryla .marchio { width: clamp(126px, 37vw, 200px); }
  .lockup-ryla .wordmark { width: clamp(102px, 30vw, 164px); }


  .blocco-intro .marchio { width: min(48vw, 210px); margin-bottom: .7rem; }
  .blocco-intro .wordmark { width: min(38vw, 166px); }
  .lead { font-size: clamp(.98rem, 3.8vw, 1.12rem); }

  .coordinate { top: auto; bottom: calc(50% + var(--estensione) + clamp(.7rem, calc(1.2rem + (100vh - 660px) * .17), 3.2rem)); }
  .blocco-intro { top: calc(50% + var(--ruota-dim) * .5 + clamp(.8rem, calc(.8rem + (100vh - 660px) * .12), 2.8rem)); }
}

@media (orientation: landscape) and (max-height: 560px) {
  body {
    --dim: min(58vh, 290px);
    --raggio: calc(var(--dim) * .37);
    --raggio-neg: calc(var(--dim) * -.37);
    --nodo: calc(var(--dim) * .24);
    --ruota-dim: calc(var(--dim) * .3);
    --testata-ryla: clamp(68px, 8vw, 88px);
    --fattore-distretto: 1.35;
  }

  .testata-intro { top: calc(1.9rem + var(--sposta)); gap: .5rem; }
  .lockup-ryla { gap: .7rem; }
  .lockup-ryla .marchio { width: clamp(88px, 10vw, 120px); }
  .lockup-ryla .wordmark { width: clamp(74px, 8.4vw, 100px); }

  .etichetta {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .sezioni svg { width: calc(var(--nodo) * .46); height: calc(var(--nodo) * .46); }

  .blocco-intro .wordmark,
  .blocco-intro .lead,
  .blocco-intro .occhiello,
  .blocco-intro .claim { display: none; }
  .blocco-intro .quando { font-size: .82rem; margin-bottom: 0; }
  .blocco-intro .marchio { width: min(22vw, 150px); }
  .rule { margin: .5rem auto .45rem; }
  .blocco-intro h1 { margin-bottom: .35rem; font-size: .95rem; }
  .blocco-intro { top: calc(50% + var(--ruota-dim) * .5 + .4rem); }
  .blocco-intro .quando { line-height: 1.25; }
  .avvio { padding: .45rem 1.1rem; font-size: .7rem; }
  .footer { padding-top: .6rem; }

  .coordinate { top: auto; bottom: calc(50% + var(--estensione) + .2rem); }
  .coordinate-anno { display: none; }
  .coordinate { --corpo-data: .88rem; }
}

.cursore {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
  will-change: transform;
}
.cursore.pronto { opacity: 1; }
.cursore img {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5));
  transition: transform .38s cubic-bezier(.25, .9, .3, 1.05);
}
.cursore.su-link img { transform: rotate(72deg) scale(1.75); }

.cursore-attivo .atrio,
.cursore-attivo .atrio a,
.cursore-attivo .atrio button {
  cursor: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
  body { opacity: 1 !important; transform: none !important; }
}


@media (min-width: 901px) and (max-height: 920px) {
  .testata-intro { gap: clamp(1.4rem, 4vh, 2.6rem); }
  .blocco-intro { top: calc(50% + var(--ruota-dim) * .5 + .7rem); }
  .rule { margin: .7rem auto .55rem; }
  .occhiello { margin-bottom: .35rem; }
  .quando { margin-bottom: .3rem; }
  .claim { margin-bottom: .75rem; }
}

@media (max-width: 900px) and (max-height: 810px) {
  .rule { margin: .7rem auto .55rem; }
  .occhiello { margin-bottom: .3rem; }
  .quando { margin-bottom: .3rem; }
  .claim { margin-bottom: .7rem; }
}



@media (min-width: 901px) {
  .coordinate { --corpo-data: clamp(1.32rem, min(1.95vw, 3.6vh), 2.1rem); }
}