/* Parti condivise: base, griglia, header, footer, barra, torre e scorrimento guidato, estratti dalla home. */
@font-face { font-family: "Archivo"; src: url("font/archivo-vf.woff2") format("woff2"); font-display: swap; font-weight: 100 900; font-stretch: 62% 125%; }
/* finché Archivo non arriva, o se non arriva: un carattere di sistema ridotto, così i titoli stretti non escono dallo schermo */
@font-face { font-family: "Archivo ripiego"; src: local("Arial Bold"), local("Helvetica Bold"), local("Roboto Bold"), local("Arial"), local("Helvetica"), local("Roboto"); font-weight: 100 900; size-adjust: 74%; }
@font-face { font-family: "Source Serif 4"; src: url("font/source-serif-4-400.woff2") format("woff2"); font-display: swap; font-weight: 400; }

/* ===== Base: notte calda, osso, grigi caldi, un solo arancione ===== */
:root { --fondo: #111110; --ink: #E8E4DA; --grigio: #8F897E; --linea: #2F2D29; --linea-forte: #E8E4DA; --acc: #FF4F1F;
        --testo: "Source Serif 4", Georgia, serif; --etichette: "Archivo", "Archivo ripiego", sans-serif;
        --pad: 48px; --gap: 24px; }
/* fascia invertita: osso con inchiostro. L'arancione sull'osso non basta nemmeno per il contorno del focus */
.chiaro { --fondo: #E8E4DA; --ink: #111110; --grigio: #5C584F; --linea: #C4BFB3; --linea-forte: #111110; background: var(--fondo); color: var(--ink); }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: #111110; scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
body { margin: 0; background: var(--fondo); color: var(--ink); font-family: var(--testo); font-size: 18px; line-height: 1.5; overflow-x: clip; -webkit-font-smoothing: antialiased; counter-reset: sezione; }
h1, h2, p, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.chiaro a:focus-visible { outline-color: #111110; }
.acc { color: var(--acc); }
.salta { position: absolute; left: -9999px; }
.salta:focus { left: 16px; top: 16px; z-index: 120; background: var(--ink); color: var(--fondo); padding: 8px 16px; }
.freccia { display: inline-block; width: 24px; height: 12px; vertical-align: middle; flex: none; }

.g { --pad-l: max(var(--pad), env(safe-area-inset-left, 0px)); --pad-r: max(var(--pad), env(safe-area-inset-right, 0px));
     --col: calc((100% - var(--pad-l) - var(--pad-r) - 11 * var(--gap)) / 12);
     position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-left: var(--pad-l); padding-right: var(--pad-r); }
/* griglia in vista: due filetti da 1px lungo tutta la pagina (asse del contenuto e colonna 11) */
.g::before, .g::after { content: ""; position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid var(--linea); pointer-events: none; }
.g::before { left: calc(var(--pad-l) + 2 * var(--col) + 1.5 * var(--gap)); }
.g::after { left: calc(var(--pad-l) + 10 * var(--col) + 9.5 * var(--gap)); }

.idx, .menu a, .marchio, .lingue, .riga-piede, .dispo, .et { font-family: var(--etichette); font-size: 12px; line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; }
.idx, .et { color: var(--grigio); }
/* numero di sezione nella colonna sinistra: progressivo, così il footer condiviso non lo deve sapere */
.idx { grid-column: 1 / 3; }
.idx::before { counter-increment: sezione; content: counter(sezione, decimal-leading-zero); }
.nome { font-family: "Archivo", "Archivo ripiego", sans-serif; font-weight: 800; font-stretch: 62%; line-height: 0.84; letter-spacing: -0.01em; text-transform: uppercase; }
.nome .riga, .nome .riga > span { display: block; }

/* filetti come elementi, per poterli allungare */
.filo { position: absolute; left: 0; right: 0; top: 0; border-top: 1px solid var(--linea); pointer-events: none; transform-origin: 0 50%; }
.g > .filo { grid-column: auto !important; }

/* ---------- Header ---------- */
.testa { align-items: center; min-height: 64px; border-bottom: 1px solid var(--linea); }
.marchio { grid-column: 3 / 7; padding: 6px 0; color: var(--acc); }
.menu-tel { grid-column: 7 / 11; }
.menu-tel > summary { display: none; }
.menu-tel::details-content { content-visibility: visible; display: contents; }
.menu { display: flex; gap: 32px; }
.menu a { display: block; padding: 6px 0; white-space: nowrap; }
/* voce della pagina corrente: sottolineata come la lingua corrente, nessun colore in più */
.menu a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.lingue { grid-column: 11 / 13; justify-self: end; }
.lingue a, .lingue [aria-current] { padding: 6px 2px; }
.lingue [aria-current] { text-decoration: underline; text-underline-offset: 4px; }
.lingue .sep { color: var(--grigio); }

/* ---------- Footer ---------- */
.piede { padding-top: 24px; padding-bottom: 40px; align-items: end; }
.piede .filo { border-top: 6px solid var(--linea-forte); }
.piede .idx { grid-row: 1; }
.mail { grid-column: 3 / 13; grid-row: 2; padding: 96px 0 96px; font-family: "Archivo", "Archivo ripiego", sans-serif; font-weight: 600; font-stretch: 75%; font-size: clamp(36px, 5.6vw, 96px); line-height: 1; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.riga-piede { grid-column: 3 / 13; grid-row: 3; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 40px; padding-top: 16px; border-top: 1px solid var(--linea); }
.riga-piede strong { font-weight: 700; }
.riga-piede a, .riga-piede [aria-current] { padding: 4px 0; }
.riga-piede .anno { margin-left: auto; color: var(--grigio); }

/* ---------- Barra Available ---------- */
.dispo { position: fixed; z-index: 30; left: var(--pad); right: var(--pad); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); height: 56px; display: flex; align-items: stretch; padding: 6px 0 6px 20px; background: var(--acc); color: #111110; }
.dispo-t { align-self: center; margin-right: auto; white-space: nowrap; }
.dispo-t::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 12px; background: currentColor; vertical-align: 1px; }
.dispo-a { display: inline-flex; align-items: center; gap: 12px; padding: 0 20px; background: #111110; color: #E8E4DA; white-space: nowrap; }
.dispo-x { flex: none; width: 56px; margin-block: -6px; border: 0; background: transparent; color: #111110; font: inherit; font-size: 22px; letter-spacing: 0; cursor: pointer; }
.dispo a:focus-visible { outline: 2px solid #E8E4DA; outline-offset: -5px; }
.dispo button:focus-visible { outline: 2px solid #111110; outline-offset: -5px; }
/* sugli schermi larghi "Available" sta sull'asse del contenuto */
@media (min-width: 1024px) { .dispo { padding-left: calc((100vw - 2 * var(--pad) - 11 * var(--gap)) / 12 * 2 + 2 * var(--gap)); } }
.dispo.su { animation: dispo-apri 0.32s steps(4, end); }
@keyframes dispo-apri { from { clip-path: inset(100% 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .dispo.su { animation: none; } }
/* spazio in fondo: a fine pagina la barra sta sotto l'ultima riga del footer */
.js body.con-dispo .piede { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
.js .dispo:not(.su), .dispo[hidden] { visibility: hidden; }
html:not(.js) .dispo { position: static; margin: 0 var(--pad) 24px; padding-right: 6px; }
html:not(.js) .dispo-x { display: none; }

/* ---------- Hover (mouse) e tocco: inversione secca, istantanea ---------- */
.menu a:active, .lingue a:active, .mail a:active, .riga-piede a:active, .inv:active { background: var(--ink); color: var(--fondo); }
.marchio:active { background: var(--acc); color: #111110; }
.dispo-a:active { background: #E8E4DA; color: #111110; }
.dispo-x:active { background: #111110; color: #E8E4DA; }
@media (hover: hover) and (pointer: fine) {
  .menu a:hover, .lingue a:hover, .mail a:hover, .riga-piede a:hover, .inv:hover { background: var(--ink); color: var(--fondo); }
  .marchio:hover { background: var(--acc); color: #111110; }
  .dispo-a:hover { background: #E8E4DA; color: #111110; }
  .dispo-x:hover { background: #111110; color: #E8E4DA; }
}

/* ---------- Scorrimento guidato: nascosto solo con html.scorre (JavaScript attivo, niente reduced-motion) ---------- */
.scorre:not(.scorre-ok) :is(.idx, .filo, .mail, .riga-piede) { visibility: hidden; }

/* ---------- Torre: solo figura, le finestre accese sono copie arancioni create dallo script ---------- */
.monolite { display: block; width: 100%; height: auto; overflow: visible; }
.monolite path { stroke: #A8A295; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: miter; }
.monolite .f-top { fill: #58544C; } .monolite .f-sx { fill: #36332E; } .monolite .f-dx { fill: #25231F; }
.monolite .rampa { fill: #6B665C; } .monolite .rampa-lato { fill: #2D2B27; }
.monolite .fessura { fill: #111110; stroke: none; } .monolite .luce { fill: var(--acc); stroke: none; }
.monolite .gradino { fill: none; stroke: #8F897E; }
.monolite .lume { fill: var(--acc); stroke: none; opacity: 0; }
.monolite .lume.on { opacity: 1; }
.monolite .lume.spe { animation: spegni 0.36s steps(3, end); }
.monolite.vive .luce { fill: #111110; }
@keyframes spegni { from { opacity: 1; } to { opacity: 0; } }

/* ---------- Tablet ---------- */
@media (min-width: 701px) and (max-width: 1023px) { .menu { gap: 16px; } }
@media (max-width: 1023px) {
  .dispo { left: 32px; right: 32px; }
  .g { --pad: 32px; --gap: 16px; }
}

/* ---------- Telefono: una colonna, margini di 20px, niente testo verticale ---------- */
@media (max-width: 43.75rem) {
  .g { --pad: 20px; --gap: 0px; grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .g > * { grid-column: 1 !important; grid-row: auto !important; }
  .g::before, .g::after { display: none; }
  .idx { display: none !important; }
  .testa { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "marchio lingue menu"; min-height: 56px; }
  .testa > .marchio { grid-area: marchio; grid-column: 1 !important; grid-row: 1 !important; display: flex; align-items: center; min-height: 56px; padding: 0; }
  .testa > .lingue { grid-area: lingue; grid-column: 2 !important; grid-row: 1 !important; display: flex; align-items: center; margin-right: 4px; }
  .testa > .menu-tel { grid-area: menu; grid-column: 3 !important; grid-row: 1 !important; position: static; margin-right: -10px; }
  .lingue a, .lingue [aria-current] { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; }
  .menu-tel::details-content { display: block; content-visibility: visible; }
  .menu-tel:not([open])::details-content { content-visibility: hidden; display: none; }
  .menu-tel > summary { display: flex; align-items: center; gap: 10px; min-width: 44px; min-height: 44px; padding: 0 10px; list-style: none; cursor: pointer; font-family: var(--etichette); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
  .menu-tel > summary::-webkit-details-marker { display: none; }
  .menu-tel > summary:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
  .menu-ico { position: relative; display: block; width: 18px; height: 2px; background: currentColor; }
  .menu-ico::before, .menu-ico::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; }
  .menu-ico::before { top: -6px; } .menu-ico::after { top: 6px; }
  .menu-tel[open] > summary { background: var(--ink); color: var(--fondo); }
  .menu-tel .nav { position: absolute; z-index: 40; left: 0; right: 0; top: 100%; margin: 0; border-bottom: 1px solid var(--linea); background: #111110; }
  .menu-tel[open] .nav { animation: tendina-menu 0.24s steps(4, end); }
  .menu-tel .menu { display: block; }
  .menu-tel .menu li { border-top: 1px solid var(--linea); }
  .menu-tel .menu a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 var(--pad-r) 0 var(--pad-l); font-family: "Archivo", "Archivo ripiego", sans-serif; font-weight: 700; font-stretch: 75%; font-size: 26px; letter-spacing: 0; }
  .mail { padding: 32px 0 48px; font-size: min(calc((100vw - 40px) / 15.5), 40px); }
  .riga-piede { gap: 8px 24px; }
  .riga-piede .anno { margin-left: 0; }
  .dispo { left: max(20px, env(safe-area-inset-left, 0px)); right: max(20px, env(safe-area-inset-right, 0px)); height: 52px; padding: 4px 0 4px 14px; letter-spacing: 0.1em; }
  .dispo-t::before { margin-right: 8px; }
  .dispo-a { padding: 0 12px; gap: 8px; }
  .dispo-a .freccia { width: 18px; }
  .dispo-x { width: 44px; margin-block: -4px; }
  .js body.con-dispo .piede { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  html:not(.js) .dispo { margin: 0 20px calc(24px + env(safe-area-inset-bottom, 0px)); padding-right: 4px; }
}
@keyframes tendina-menu { from { clip-path: inset(0 0 100% 0); } }
@media (prefers-reduced-motion: reduce) { .menu-tel[open] .nav { animation: none; } }
@media (max-width: 22.5rem) {
  .dispo { padding-left: 12px; letter-spacing: 0.06em; }
  .dispo-t::before { display: none; }
  .dispo-a { padding: 0 10px; gap: 6px; }
}