/* Nuova barra superiore e adattamenti globali (sostituisce la barra laterale) */
:root { --rail: 0px; --accent: #b4452b; --soft: #f5f4f1; --tb: 72px; }
.rail { display: none; }
main, .site-footer { margin-left: 0; }
.preview-banner { left: 0; }
.topbar {
  position: fixed; z-index: 40; inset: 0 0 auto 0; height: var(--tb);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 var(--pad); background: var(--paper); color: var(--ink);
  border-bottom: 1px solid var(--line); transition: background .4s, color .4s, border-color .4s;
}
.tb-logo { font-size: 13px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
.tb-nav { display: flex; gap: clamp(18px, 2.6vw, 40px); font-size: 11px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; }
.tb-nav a:hover, .tb-nav a[aria-current] { color: var(--accent); }
.topbar .rail-menu { display: none; color: inherit; }
body:not(.page-home) main { padding-top: var(--tb); }
.page-home .topbar { background: transparent; color: #fff; border-color: transparent; }
.page-home .topbar.is-solid { background: var(--paper); color: var(--ink); border-color: var(--line); }
.drawer-panel li a:hover, .drawer-panel li a[aria-current] { color: var(--accent); }
.filter-row button:hover { color: var(--accent); }
@media (max-width: 760px) {
  .tb-nav { display: none; }
  .topbar .rail-menu { display: block; }
}

/* Pagina Progetti: griglia di quadrati uguali */
.portfolio .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1180px; gap: clamp(10px, 1.6vw, 24px); }
.portfolio .tile { aspect-ratio: 1 / 1; background: #fff; }
.portfolio .tile-art { inset: 0; padding: 0; background: #fff; }
.portfolio .tile-fill img { width: 100%; height: 100%; object-fit: cover; }
.portfolio .tile-draw { padding: 14%; }
.portfolio .tile-draw img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: normal; }
@media (max-width: 760px) { .portfolio .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Quadrati identici: i riquadri hanno sempre la stessa misura, qualunque sia l'immagine */
.portfolio .tile { width: 100%; height: 0; padding-bottom: 100%; aspect-ratio: auto; user-select: none; -webkit-user-select: none; }
.portfolio .tile-art { position: absolute; inset: 0; display: block; }
.portfolio .tile-art img { position: absolute; display: block; width: auto; height: auto; max-width: none; user-select: none; -webkit-user-drag: none; }
.portfolio .tile-fill img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portfolio .tile-draw { padding: 0; }
.portfolio .tile-draw img { inset: 14%; width: 72%; height: 72%; object-fit: contain; }
.portfolio .tile ::selection { background: transparent; }

/* Miniature più vicine */
.portfolio .grid { gap: 4px; max-width: 1100px; }
.portfolio .tile-draw img { inset: 7%; width: 86%; height: 86%; }
.portfolio .filters { margin-bottom: clamp(24px, 3.5vw, 48px); }

/* Planimetria nella scheda progetto */
.plan-block { max-width: 1320px; margin: clamp(40px, 6vw, 88px) auto; background: var(--soft); padding: clamp(24px, 4vw, 64px); }
.plan-block h2 { margin: 0 0 clamp(20px, 3vw, 36px); font-weight: 200; font-size: clamp(26px, 3.4vw, 44px); letter-spacing: -.03em; }
.plan-sheets { display: grid; gap: clamp(16px, 2vw, 32px); }
.plan-sheets figure { margin: 0; background: #fff; padding: clamp(12px, 2.4vw, 40px); }
.plan-sheets img { width: 100%; height: auto; display: block; cursor: zoom-in; }
.plan-sheets figcaption { margin-top: 12px; font-size: 12px; color: var(--muted); }

/* Prima e dopo (cantiere) */
.ba-block { max-width: 1320px; margin: clamp(40px, 6vw, 88px) auto; }
.ba-block h2 { margin: 0 0 clamp(16px, 2.4vw, 32px); font-weight: 200; font-size: clamp(26px, 3.4vw, 44px); letter-spacing: -.03em; }
.ba-item { margin: 0 0 clamp(20px, 3vw, 40px); }
.ba { position: relative; overflow: hidden; aspect-ratio: var(--r, 1.5); background: var(--soft); user-select: none; -webkit-user-select: none; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ba .ba-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.18); pointer-events: none; }
.ba-handle i { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: #fff; color: #141414; display: grid; place-items: center; box-shadow: 0 2px 14px rgba(0,0,0,.28); }
.ba-tag { position: absolute; top: 14px; padding: 6px 12px; background: rgba(255,255,255,.92); color: #141414; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; pointer-events: none; }
.ba-tag-l { left: 14px; } .ba-tag-r { right: 14px; }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; -webkit-appearance: none; appearance: none; }
.ba-range::-webkit-slider-thumb { -webkit-appearance: none; width: 60px; height: 3000px; }
.ba-range::-moz-range-thumb { width: 60px; height: 3000px; border: 0; }
.ba:focus-within .ba-handle i { outline: 2px solid var(--accent); outline-offset: 3px; }
.ba-item figcaption { margin-top: 10px; font-size: 12px; color: var(--muted); }

/* Cursore prima/dopo: dimensione contenuta, sempre interamente visibile a schermo */
.ba-block { max-width: 1100px; }
.ba { width: min(100%, calc(78vh * var(--r, 1.5))); margin-inline: auto; }
.ba-item figcaption { text-align: center; }

.ba-tag { transition: opacity .2s; }
.ba-tag.is-off { opacity: 0; }

/* Più confronti affiancati (2-3 per riga) */
.ba-block { max-width: 1320px; }
.ba-grid { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); align-items: start; }
.ba-grid:has(> .ba-item:only-child) { max-width: 900px; margin-inline: auto; }
.ba-grid .ba-item { margin: 0; }
.ba-grid .ba { width: 100%; aspect-ratio: 4 / 3; }
.ba-grid .ba-tag { top: 10px; padding: 4px 9px; font-size: 10px; }
.ba-grid .ba-tag-l { left: 10px; } .ba-grid .ba-tag-r { right: 10px; }
.ba-grid .ba-handle i { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
@media (max-width: 760px) { .ba-grid { grid-template-columns: 1fr; } }

.hero-copy h1 { max-width: 16ch; white-space: normal; }

/* Studio: foto e collaboratori */
.studio-photo { margin: clamp(28px, 5vw, 64px) 0; }
.studio-photo img { width: 100%; max-height: 78vh; object-fit: cover; display: block; background: var(--plaster, #f3f3ef); }
.studio-photo figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); }
.people { margin-top: clamp(48px, 8vw, 112px); }
.people h2 { margin: 0 0 18px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 400; color: var(--muted); }
.people ul { list-style: none; margin: 0; padding: 0; }
.people li { display: grid; grid-template-columns: 1.2fr 1.4fr .6fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line, #e5e5e0); font-size: 17px; }
.people li:last-child { border-bottom: 1px solid var(--line, #e5e5e0); }
.people strong { font-weight: 400; letter-spacing: -.01em; }
.people span, .people em { color: var(--muted); font-style: normal; }
.people em { text-align: right; font-size: 14px; }
@media (max-width: 620px) { .people li { grid-template-columns: 1fr; gap: 2px; } .people em { text-align: left; } }

/* Mobile / touch */
.drawer-note { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; }
@media (hover: none), (max-width: 820px) {
  .portfolio .tile-label, .hcp-portfolio .tile-label { display: none; }
  .portfolio .tile-art img { transform: none !important; }
}