/* Rilievo — base: colori, carattere, testata, segni di taglio, tavole, piede.
   Blu di Prussia come fondo, sabbia per i punti, bianco cianotipo per il testo; il rosso solo per la linea laser.
   I ruoli dei colori sono variabili: le tavole su carta (.carta) li invertono, inchiostro di Prussia sul bianco. */
:root {
  --blu: #1F3A5C;
  --blu-notte: #182F4B;
  --sabbia: #D8C7A3;
  --bianco: #F1EEE6;
  --rosso: #C8321F;
  --testo: var(--bianco);
  --testo-tenue: rgb(241 238 230 / .82);
  --accento: var(--sabbia);
  --fuoco: var(--sabbia);
  --linea: rgb(241 238 230 / .62);
  --linea-tenue: rgb(241 238 230 / .2);
  --carattere: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --margine: clamp(16px, 4.6vw, 72px);
  --testata: 64px;
  --lenta: cubic-bezier(.22, .61, .36, 1);
  color-scheme: dark;
}
@media (max-width: 47.99rem) { :root { --testata: 56px; } }
@media (max-height: 34rem) and (min-aspect-ratio: 1/1) { :root { --testata: 52px; } }

/* la carta: bianco cianotipo, inchiostro di Prussia, una sabbia scura per gli occhielli (contrasto AA) */
.carta {
  --testo: var(--blu);
  --testo-tenue: rgb(31 58 92 / .8);
  --accento: #7A5D32;
  --fuoco: var(--blu);
  --linea: rgb(31 58 92 / .55);
  --linea-tenue: rgb(31 58 92 / .2);
  background: var(--bianco); color: var(--testo); color-scheme: light;
}
.carta ::selection { background: var(--blu); color: var(--bianco); }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--blu); color: var(--bianco); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100svh; background: var(--blu);
  font: 400 1.0625rem/1.56 var(--carattere); font-stretch: 100%; font-kerning: normal;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern", "liga";
}
::selection { background: var(--sabbia); color: var(--blu); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
figure, blockquote { margin: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--fuoco); outline-offset: 3px; }
/* i bersagli del fuoco da script (scene, titoli) non disegnano un contorno attorno a tutta la tavola */
.scena:focus, .scena:focus-visible { outline: none; }
[hidden] { display: none !important; }

/* il carattere prima di mostrare (al massimo 1,2 s); se lo script non parte, la pagina compare comunque */
html:not(.pronto) .testata, html:not(.pronto) main, html:not(.pronto) .piede { opacity: 0; animation: rivela .5s 2.5s forwards; }
@keyframes rivela { to { opacity: 1; } }
.testata, main, .piede { transition: opacity .5s var(--lenta); }

.scena.entra { animation: entra .55s var(--lenta) both; }
@keyframes entra { from { opacity: 0; } }

.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.salta { position: fixed; left: var(--margine); top: 8px; z-index: 50; padding: .6em 1em; background: var(--bianco); color: var(--blu); transform: translateY(-160%); transition: transform .2s; }
.salta:focus { transform: none; }

/* Carattere: Archivo largo e leggero per i titoli; stretto, maiuscolo, cifre tabellari per le scritte tecniche
   (mai sotto i 13 px sugli schermi larghi, 12 px sui telefoni); didascalie in tondo, normali, a 14 px */
.titolo {
  font-weight: 300; font-stretch: 106%; font-size: clamp(2.45rem, 1.3rem + 4.3vw, 5.1rem);
  line-height: 1.01; letter-spacing: -.02em;
}
.titolo-medio { font-weight: 300; font-stretch: 104%; font-size: clamp(1.85rem, 1.25rem + 2.4vw, 3.1rem); line-height: 1.08; letter-spacing: -.014em; }
.tecnico {
  font-stretch: 75%; font-weight: 500; font-size: .8125rem; line-height: 1.4; letter-spacing: .06em;
  text-transform: uppercase; font-variant-numeric: tabular-nums lining-nums;
}
.dida { font-stretch: 92%; font-weight: 400; font-size: .875rem; line-height: 1.45; letter-spacing: .004em; color: var(--testo-tenue); }
.dida .num { font-stretch: 75%; font-weight: 500; letter-spacing: .06em; font-variant-numeric: tabular-nums lining-nums; color: var(--accento); }
@media (max-width: 47.99rem) { .tecnico { font-size: .75rem; } .dida { font-size: .84rem; } }
.occhiello { margin: 0 0 1.1rem; color: var(--accento); }
.attacco { font-weight: 330; font-size: clamp(1.125rem, 1rem + .45vw, 1.36rem); line-height: 1.45; max-width: 34em; }
.citazione p {
  margin: 0; font-weight: 300; font-size: clamp(1.32rem, 1.06rem + .9vw, 1.9rem); line-height: 1.28; letter-spacing: -.008em;
  text-indent: -.43em;
}
@supports (hanging-punctuation: first) { .citazione p { text-indent: 0; hanging-punctuation: first; } }
.firma { margin: .9rem 0 0; font-stretch: 88%; font-size: .9375rem; line-height: 1.4; color: var(--accento); }
.vai {
  display: inline-flex; gap: .45em; align-items: baseline; padding: .35em 0; text-decoration: none;
  font-stretch: 88%; font-weight: 500; letter-spacing: .01em; border-bottom: 1px solid var(--linea);
  transition: border-color .3s, color .3s;
}
.vai:hover { border-color: var(--accento); color: var(--accento); }
.vai span { transition: transform .3s var(--lenta); }
.vai:hover span { transform: translateX(4px); }
.discreto { font-stretch: 92%; color: var(--accento); max-width: 34em; }

/* Testata: trasparente in cima, velata quando si scorre; sempre leggibile (sulla carta, inchiostro) */
.testata {
  position: fixed; inset: 0 0 auto; z-index: 30; height: calc(var(--testata) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(var(--margine), env(safe-area-inset-right)) 0 max(var(--margine), env(safe-area-inset-left));
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: linear-gradient(rgb(31 58 92 / .82), rgb(31 58 92 / 0));
}
.testata::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .35s;
  background: rgb(24 47 75 / .9); box-shadow: 0 1px 0 var(--linea-tenue);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.testata.sopra::before { opacity: 1; }
.marchio { font-weight: 500; font-stretch: 110%; font-size: 1rem; letter-spacing: .005em; text-decoration: none; white-space: nowrap; }
.testata nav { display: flex; gap: clamp(14px, 2.4vw, 36px); }
.testata nav a {
  position: relative; padding: 10px 0; text-decoration: none; white-space: nowrap;
  font-stretch: 75%; font-weight: 500; font-size: .8125rem; letter-spacing: .07em; text-transform: uppercase;
}
.testata nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--lenta);
}
.testata nav a:hover::after, .testata nav a[aria-current="page"]::after { transform: scaleX(1); }
.testata nav a[aria-current="page"] { color: var(--sabbia); }
@media (max-width: 26rem) {
  .marchio { font-size: .9rem; font-stretch: 100%; }
  .testata nav { gap: 12px; }
  .testata nav a { font-size: .75rem; letter-spacing: .05em; }
}
/* il sopralluogo è su carta: anche la testata e il piede */
html:has(body[data-scena="sopralluogo"]), body[data-scena="sopralluogo"] { background: var(--bianco); }
body[data-scena="sopralluogo"] .testata { color: var(--blu); background: linear-gradient(rgb(241 238 230 / .92), rgb(241 238 230 / 0)); }
body[data-scena="sopralluogo"] .testata::before { background: rgb(241 238 230 / .94); box-shadow: 0 1px 0 rgb(31 58 92 / .16); }
body[data-scena="sopralluogo"] .testata nav a[aria-current="page"] { color: #7A5D32; }
body[data-scena="sopralluogo"] .testata :focus-visible { outline-color: var(--blu); }

/* Segni di taglio da tipografia, fuori dalla cornice: allungano i bordi con un piccolo stacco */
.tacche { position: relative; --t: 14px; --g: 6px; --e: calc(var(--t) + var(--g)); --c: var(--linea); }
@media (max-width: 47.99rem) { .tacche { --t: 9px; --g: 4px; } }
.tacche::before {
  content: ""; position: absolute; inset: calc(-1 * var(--e)); pointer-events: none; z-index: 2;
  background:
    linear-gradient(var(--c) 0 0) 0 var(--e) / var(--t) 1px no-repeat,
    linear-gradient(var(--c) 0 0) var(--e) 0 / 1px var(--t) no-repeat,
    linear-gradient(var(--c) 0 0) 100% var(--e) / var(--t) 1px no-repeat,
    linear-gradient(var(--c) 0 0) right var(--e) top 0 / 1px var(--t) no-repeat,
    linear-gradient(var(--c) 0 0) left 0 bottom var(--e) / var(--t) 1px no-repeat,
    linear-gradient(var(--c) 0 0) var(--e) 100% / 1px var(--t) no-repeat,
    linear-gradient(var(--c) 0 0) right 0 bottom var(--e) / var(--t) 1px no-repeat,
    linear-gradient(var(--c) 0 0) right var(--e) bottom 0 / 1px var(--t) no-repeat;
}

/* Tavole: segnaposto sfocato (LQIP) o tono medio, poi la foto che si dissolve quando è decodificata */
.tavola { margin: 0; }
.tavola .cornice {
  position: relative; aspect-ratio: var(--rapporto); overflow: visible;
  background: var(--tono, #2b4466) var(--lqip) var(--lqip-pos, center) / var(--lqip-misura, cover) no-repeat;
}
.tavola .foto { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s var(--lenta); }
.tavola .foto.pronta { opacity: 1; }
/* una finestra di taglio: la foto intera dietro, si vede solo la parte scelta (i segni restano fuori) */
.tavola .finestra { position: absolute; inset: 0; overflow: hidden; }
.tavola figcaption { display: flex; gap: 1.2em; margin-top: 14px; max-width: 60em; }
.tavola .tacche + figcaption { margin-top: calc(var(--e, 20px) + 8px); }
@media (max-width: 47.99rem) { .tavola .tacche + figcaption { margin-top: 20px; } }
.tavola figcaption .num { flex: none; }
/* il riferimento della tavola, accanto al segno di taglio in alto a sinistra (come le foto di un rilievo) */
.tavola .tacche[data-rif]::after {
  content: attr(data-rif); position: absolute; left: 9px; bottom: calc(100% + 5px); pointer-events: none;
  font-stretch: 75%; font-weight: 500; font-size: .8125rem; line-height: 1; letter-spacing: .06em; color: var(--accento);
  font-variant-numeric: tabular-nums lining-nums;
}
@media (max-width: 47.99rem) { .tavola .tacche[data-rif]::after { font-size: .75rem; } }
/* la quota: sotto la tavola, tra i segni di taglio che fanno da linee di richiamo; una misura di tempo */
.quota-tavola {
  position: absolute; left: 0; right: 0; top: calc(100% + 13px); height: 1px; background: rgb(216 199 163 / .75); pointer-events: none;
}
.quota-tavola::before, .quota-tavola::after { content: ""; position: absolute; top: -4px; width: 1px; height: 9px; background: var(--sabbia); transform: rotate(45deg); }
.quota-tavola::before { left: 0; } .quota-tavola::after { right: 0; }
.quota-tavola span {
  position: absolute; left: 50%; top: 5px; transform: translateX(-50%); white-space: nowrap;
  font-style: italic; font-weight: 400; font-stretch: 92%; font-size: .95rem; line-height: 1.2; color: var(--sabbia);
}
.tavola:has(.quota-tavola) figcaption { margin-top: 48px; }
@media (max-width: 47.99rem) { .quota-tavola { top: calc(100% + 9px); } .tavola:has(.quota-tavola) figcaption { margin-top: 40px; } }

.piede {
  display: flex; flex-wrap: wrap; gap: 8px 32px; justify-content: space-between;
  padding: 40px max(var(--margine), env(safe-area-inset-right)) calc(36px + env(safe-area-inset-bottom)) max(var(--margine), env(safe-area-inset-left));
  border-top: 1px solid var(--linea-tenue); color: rgb(241 238 230 / .78);
}
.piede p { margin: 0; }
.piede a { text-decoration: none; }
.piede a:hover { color: var(--sabbia); }
body[data-scena="sopralluogo"] .piede { background: var(--bianco); color: rgb(31 58 92 / .8); border-top-color: rgb(31 58 92 / .2); }
body[data-scena="sopralluogo"] .piede a:hover { color: #7A5D32; }
body[data-scena="sopralluogo"] .piede :focus-visible { outline-color: var(--blu); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .vai span, .testata nav a::after { transition: none; }
}