/* Hallmark · shape: Pianta (sette stanze ricavate nel muro, una per contenuto) · genre: editorial · theme: custom · job: visit · idea: "Il sito è una pianta: sette stanze nelle sette proporzioni che Palladio fissò a Vicenza, e l'ultima è la porta che dà su giuliatobattistin.it" · vibe: "pianta d'architetto, muro pieno, stanze chiare"
 * paper: oklch(29% 0.045 252) · accent: oklch(53% 0.2 28) · display: Piazzolla · body: Albert Sans · hero: la pianta intera, sette stanze che chiudono un rettangolo, il titolo nella sala a due quadri · nav: wordmark, legenda di sette sagome in proporzione, un link di ricerca · footer: una riga di dati legali e tre link · imagery: none, la geometria è il contenuto · signature: le sette stanze in proporzione esatta e l'anta che si apre sulla ricerca
 * axes: dark/roman-serif/chromatic-red · posture: muro scuro come superficie dichiarata, stanze chiare, rosso solo sulla ricerca · surface: palette ereditata da giuliatobattistin.it · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P5 H4 E4 S5 R4 V5 · weakest: H, sette stanze sulla prima schermata si contendono lo sguardo; la sala a due quadri è la più grande e l'unica con un pulsante colorato */
/* answered 80: le sagome sono un diagramma di un sistema reale (le sette proporzioni dei Quattro Libri), con aria-label */
/* answered 42: la nav è una legenda di sagome, non una riga di link di testo */
@import url("./tokens.css");
@import url("./base.css");

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + var(--space-lg)); }
h1, h2, h3 { font-weight: 500; letter-spacing: var(--tracking-display); }
h2 { font-size: var(--text-section); line-height: 1.06; max-width: 19em; }

/* Stanza: un vuoto chiaro nel muro */
.room { background: var(--color-room); color: var(--color-room-ink); --color-focus: var(--color-room-ink); position: relative; }
.room ::selection { background: color-mix(in oklab, var(--color-accent) 22%, transparent); color: var(--color-room-ink); }

/* Controlli */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding-inline: var(--space-lg); border: 0; border-radius: var(--radius-card); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 600; font-size: var(--text-md); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-micro) linear, transform var(--dur-micro) var(--ease-out); }
.button:hover { background: var(--color-accent-hi); }
.button:active { transform: translateY(1px); }
.button:disabled, .button[aria-disabled="true"] { background: var(--color-room-muted); opacity: 0.6; cursor: not-allowed; transform: none; }
.button-line { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding-inline: var(--space-lg); border: 1px solid var(--color-room-ink); color: var(--color-room-ink); font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color var(--dur-micro) linear, color var(--dur-micro) linear; }
.button-line:hover { background: var(--color-room-ink); color: var(--color-room-hi); }
.button-line:active { background: var(--color-paper-2); color: var(--color-room-hi); }
.link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration-line: underline; text-decoration-thickness: 1px; }
.link:hover { text-decoration-thickness: 2px; }
.link:active { opacity: 0.75; }

/* Nav: wordmark, legenda delle stanze, ricerca */
.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: var(--nav-h); }
.wordmark { font-family: var(--font-outlier); font-weight: 500; font-size: var(--text-lg); letter-spacing: var(--tracking-display); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; }
.legend { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.legend a { position: relative; display: grid; place-items: center; min-width: 44px; height: 44px; color: var(--color-ink); }
.glyph { display: block; height: 14px; width: calc(14px * var(--r)); border: 1.5px solid currentColor; transition: background-color var(--dur-micro) linear; }
.glyph-tonda { border-radius: 50%; }
.legend a:hover .glyph, .legend a[aria-current] .glyph { background: currentColor; }
.legend a:active .glyph { opacity: 0.7; }
.legend-nome { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding: var(--space-2xs) var(--space-xs); background: var(--color-ink); color: var(--color-room-ink); font-size: var(--text-xs); line-height: 1.3; white-space: nowrap; clip-path: inset(50%); pointer-events: none; }
.legend a:hover .legend-nome, .legend a:focus-visible .legend-nome { clip-path: none; }
.salta { position: absolute; left: var(--space-md); top: var(--space-md); z-index: calc(var(--z-sticky-nav) + 1); padding: var(--space-sm) var(--space-md); background: var(--color-ink); color: var(--color-room-ink); font-weight: 600; transform: translateY(-200%); }
.salta:focus-visible { transform: none; }
.nav-cerca { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.nav-cerca:hover { text-decoration-thickness: 2px; }
.nav-cerca:active { opacity: 0.75; }

/* 1. La pianta */
.hero { container-type: inline-size; display: grid; align-content: center; min-height: calc(100svh - var(--nav-h)); padding: var(--space-md) var(--gutter) var(--space-xl); }
.plan { display: flex; flex-direction: column; gap: var(--wall); width: 100%; max-width: calc(var(--container) - 2 * var(--gutter)); margin-inline: auto; }
.row { display: flex; align-items: center; gap: var(--wall); }
.pair { display: contents; }
.plan .room { flex: var(--r) 1 0; aspect-ratio: var(--r); min-width: 0; container-type: inline-size; text-decoration: none; }
.plan .tonda { flex-grow: 0.625; border-radius: 50%; }
.room-in { position: absolute; inset: 0; overflow: hidden; display: flex; flex-direction: column; gap: var(--space-2xs); --room-pad: clamp(var(--space-sm), 7cqi, var(--space-lg)); padding: var(--room-pad); }
.room-name { font-family: var(--font-display); font-weight: 500; letter-spacing: var(--tracking-display); font-size: var(--text-title); line-height: 1.1; }
.room-what { font-size: var(--text-sm); line-height: 1.35; color: var(--color-room-muted); }
.tonda .room-in { align-items: center; justify-content: center; text-align: center; }
.room-link { transition: background-color var(--dur-short) linear; }
.room-link:hover { background: var(--color-room-hi); }
.room-link:hover .room-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
.room-link:active { background: var(--color-ink-2); }
.room-link:focus-visible { outline-offset: -6px; }

.atrio .room-in { --room-pad: clamp(var(--space-md), 4.5cqi, var(--space-xl)); gap: 0; }
.atrio h1 { font-size: clamp(2.1rem, 7.4cqi, 3.6rem); line-height: 1.04; }
.atrio-lede { margin-top: clamp(var(--space-xs), 2cqi, var(--space-md)); font-size: clamp(1rem, 2.7cqi, 1.25rem); line-height: 1.45; max-width: 34em; }
.atrio-foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-md); }

@keyframes apri { from { opacity: 0; transform: scale(0.96); } }
/* L'apertura delle stanze solo dove la pianta sta tutta nella prima schermata */
@media (min-width: 62.5rem) and (prefers-reduced-motion: no-preference) {
  .plan .room { animation: apri var(--dur-long) var(--ease-out) backwards; }
  .pair-a .room:first-child { animation-delay: 70ms; }
  .pair-a .tonda { animation-delay: 140ms; }
  .pair-b .room:first-child { animation-delay: 210ms; }
  .pair-b .room:last-child { animation-delay: 280ms; }
  .pair-c .room:first-child { animation-delay: 350ms; }
  .pair-c .room:last-child { animation-delay: 420ms; }
}

/* Le porte: varchi nel muro tra una stanza e l'altra, solo nella pianta intera */
@media (min-width: 62.5rem) {
  .plan .room::after, .atrio::before, .pair-a .room:first-child::before { content: ""; position: absolute; background: inherit; }
  .plan .room::after { left: 100%; top: 50%; width: var(--space-lg); height: var(--space-xl); transform: translateY(-50%); }
  .plan .tonda::after, .pair-c .room:last-child::after { content: none; }
  .atrio::before, .pair-a .room:first-child::before { top: 100%; width: var(--space-xl); height: var(--space-lg); }
  .atrio::before { left: 18%; }
  .pair-a .room:first-child::before { left: 40%; }
}

/* Sezioni */
.section { padding-block: var(--section-gap); }

/* 3. La società */
.societa { padding-block: var(--section-gap) var(--section-gap); }
.societa-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); gap: var(--space-2xl); align-items: end; }
.societa-testo p { margin-top: var(--space-lg); font-size: var(--text-lead); line-height: 1.5; max-width: 34em; color: var(--color-ink-2); }
.quadrata { aspect-ratio: 1; display: flex; flex-direction: column; padding: var(--space-xl); }
.dati { flex: 1; display: grid; align-content: center; margin: 0; }
.dati > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-md); align-items: baseline; padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-room-rule); }
.dati > div:last-child { border-bottom: var(--rule-hair) solid var(--color-room-rule); }
.dati dt { font-size: var(--text-sm); color: var(--color-room-muted); }
.dati dd { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--text-title); line-height: 1.2; }
.dati a { display: inline-block; padding-block: var(--space-sm); margin-block: calc(-1 * var(--space-sm)); }
.dati a:hover { text-decoration-thickness: 2px; }
.dati a:active { opacity: 0.75; }

/* 4. Tre stanze di lavoro */
.lavoro-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); align-items: start; margin-top: var(--space-2xl); }
.stanza { aspect-ratio: calc(1 / var(--r)); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); padding: var(--space-xl); scroll-margin-top: calc(var(--nav-h) + var(--space-lg)); }
.stanza h3 { font-size: var(--text-3xl); line-height: 1.05; }
.stanza p:not([class]) { max-width: 30ch; }
.stanza .link { margin-top: auto; }

/* 5. Strumenti */
.strumenti { padding-block: var(--section-gap-s); }
.sala-strumenti { aspect-ratio: 5 / 3; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-2xl); padding: var(--space-2xl); }
.strumenti-testa { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-lg); }
.elenco { display: grid; align-content: space-between; list-style: none; margin: 0; padding: 0; }
.elenco li { display: grid; gap: var(--space-2xs); padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-room-rule); }
.elenco-nome { font-family: var(--font-display); font-weight: 500; font-size: var(--text-title); line-height: 1.2; letter-spacing: var(--tracking-display); }
.elenco-cosa { font-size: var(--text-sm); color: var(--color-room-muted); }

/* 6. La porta */
.porta { padding-block: var(--section-gap-s) var(--section-gap-l); }
.sala-porta { aspect-ratio: 2; padding: var(--space-2xl); }
.sala-porta::after { content: ""; position: absolute; left: 100%; top: calc(50% - var(--door) / 2); width: 100%; height: var(--door); background: var(--color-room); }
.porta-in { display: flex; flex-direction: column; gap: var(--space-lg); height: 100%; max-width: 46rem; }
.cerca { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--space-md); align-items: end; margin-top: auto; }
.campo { display: grid; gap: var(--space-2xs); }
.campo label { font-size: var(--text-sm); font-weight: 600; }
.campo select { width: 100%; height: 48px; padding-inline: var(--space-md); border: 1px solid var(--color-room-muted); border-radius: var(--radius-card); background: var(--color-room-hi); color: var(--color-room-ink); cursor: pointer; transition: border-color var(--dur-micro) linear; }
.campo select:hover { border-color: var(--color-room-ink); }
.campo select:active { background: var(--color-room); }
.campo select:disabled { opacity: 0.6; cursor: not-allowed; background: var(--color-room); }
.porta-nota { font-size: var(--text-sm); color: var(--color-room-muted); max-width: 46ch; }
.anta { position: absolute; right: 0; top: calc(50% - var(--door) / 2); width: var(--door); height: var(--door); overflow: visible; }
.anta-arco { stroke: var(--color-accent); stroke-width: 1.5; stroke-dasharray: 3 5; }
.anta-foglia { stroke: var(--color-accent); stroke-width: 5; transform-box: view-box; transform-origin: 140px 0; transform: rotate(20deg); transition: transform var(--dur-long) var(--ease-out); }
.sala-porta:has(.cerca:hover, .cerca:focus-within) .anta-foglia { transform: rotate(90deg); }

/* 7. Contatti */
.contatti { padding-block: var(--section-gap-s) var(--section-gap); }
.contatti-grid { display: grid; grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); gap: var(--space-2xl); align-items: center; }
.sala-tonda { aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; }
.tonda-in { display: grid; justify-items: center; gap: var(--space-xs); text-align: center; }
.telefono { display: inline-flex; align-items: center; min-height: 48px; font-family: var(--font-display); font-weight: 500; font-size: var(--text-3xl); line-height: 1; letter-spacing: var(--tracking-display); text-decoration: none; }
.telefono:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.telefono:active { opacity: 0.75; }
.orari { margin: var(--space-xl) 0 var(--space-lg); max-width: 40rem; }
.orari > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-md); align-items: baseline; padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.orari > div:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.orari dt { color: var(--color-ink-2); }
.orari dd { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--text-title); line-height: 1.2; }

/* Piede */
.piede { border-top: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-xl); font-size: var(--text-sm); color: var(--color-muted); }
.piede-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md) var(--space-xl); }
.piede p { max-width: none; }
.piede ul { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); list-style: none; margin: 0; padding: 0; }
.piede a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.piede a:hover { color: var(--color-ink); text-decoration-thickness: 2px; }
.piede a:active { opacity: 0.75; }

/* Tablet: la pianta si ricompone a coppie, le stanze restano in proporzione */
@media (max-width: 62.4375rem) {
  .hero { min-height: 0; padding: var(--space-xs) var(--gutter) var(--space-xl); }
  .row { flex-direction: column; align-items: stretch; }
  .pair { display: flex; align-items: center; gap: var(--wall); }
  .row > .room { flex: none; width: 100%; }
  .societa-grid, .contatti-grid { grid-template-columns: minmax(0, 1fr); }
  .quadrata, .sala-tonda { width: 100%; max-width: 34rem; }
  .lavoro-grid { grid-template-columns: minmax(0, 1fr); }
  .stanza { aspect-ratio: var(--r); }
  .sala-strumenti, .sala-porta { padding: var(--space-xl); gap: var(--space-xl); }
}
@media (max-width: 45rem) {
  .legend { display: none; }
  .sala-strumenti { grid-template-columns: minmax(0, 1fr); aspect-ratio: auto; }
  .cerca { grid-template-columns: minmax(0, 1fr); margin-top: var(--space-md); }
  .sala-porta { aspect-ratio: auto; padding-bottom: calc(var(--door) + var(--space-2xl)); }
  .anta, .sala-porta::after { top: auto; bottom: var(--space-xl); }
}
/* Telefono: le stanze si alzano in piedi, stesse proporzioni */
@media (max-width: 35rem) {
  .row > .atrio { aspect-ratio: 1 / 2; }
  .pair-a { flex-direction: column; }
  .pair-a .room { flex: none; width: 100%; }
  .pair-a .tonda { width: 62%; }
  .pair-b, .pair-c { align-items: flex-start; }
  .pair-b .room, .pair-c .room { aspect-ratio: calc(1 / var(--r)); flex-grow: calc(1 / var(--r)); }
  .quadrata { padding: var(--space-lg); }
  .dati > div { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: var(--space-2xs); }
  .dati dd { font-size: var(--text-lg); }
  .stanza { aspect-ratio: calc(1 / var(--r)); padding: var(--space-lg); }
  .sala-strumenti, .sala-porta { padding: var(--space-lg); }
  .sala-strumenti { aspect-ratio: 3 / 5; }
  .sala-strumenti h2, .sala-porta h2 { font-size: var(--text-xl); }
  .elenco-cosa { display: none; }
  .elenco li { padding-block: var(--space-xs); }
  .elenco-nome { font-size: var(--text-lg); }
  .sala-porta { aspect-ratio: 1 / 2; padding-bottom: var(--space-lg); }
  .anta, .sala-porta::after { bottom: var(--space-2xl); }
  .orari > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .telefono { font-size: var(--text-2xl); }
}
/* Il modulo di ricerca non entra mai nell'arco dell'anta */
@media (min-width: 45.0625rem) { .sala-porta { padding-right: calc(var(--door) + var(--space-lg)); } }