/* La casa in sezione: home e pagine dei piani. Segno da tavola razionalista (layout/G-sezione.html).
   Caratteri: Jost e Overpass Mono, serviti dal sito stesso (nessuna richiesta a Google). */

@font-face { font-family: "Jost"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../../fonts/jost-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jost"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("../../fonts/jost-latin-wght-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Overpass Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../../fonts/overpass-mono-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Overpass Mono"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../../fonts/overpass-mono-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Colori: fondo bianco. --paper = fondo (e carta del disegno), --peg = pannello forato, --mute = testi grigi.
   Il disegno (lib/art.js) li legge dalle classi .pp .pg .mu qui sotto: cambiando questi tre valori cambia tutta la casa.
   La camera oscura (--dark, rosso) non dipende dal fondo. */
:root { --ink: #1a1a1a; --paper: #ffffff; --peg: #efefed; --mute: #76736c; --line: #e4e2dc; --dash: #c4c1b9; --red: #b8321f; --dark: #24100e; --g: 32px; }
.pp { fill: var(--paper); }
.pg { fill: var(--peg); }
.mu { fill: var(--mute); }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Jost, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.4; }
h1, h2, h3, p, ol, ul, figure { margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; }
.mono { font-family: "Overpass Mono", ui-monospace, monospace; }
.wrap { width: min(1312px, calc(100% - 2 * var(--g))); margin: 0 auto; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: 8px 12px; z-index: 100; }
.skip-link:focus { left: 8px; top: 8px; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
main { display: block; }

/* ---------- testata ---------- */
.hh { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 28px 0 16px; border-bottom: 1.5px solid var(--ink); }
.lab-badge { position: absolute; top: 6px; left: 0; font: 600 10px/1 "Overpass Mono", monospace; letter-spacing: .14em; color: var(--mute); border: 1px solid var(--mute); padding: 3px 6px; border-radius: 2px; }
.logo { display: block; font-weight: 500; font-size: 26px; letter-spacing: .02em; line-height: 1.2; }
.logo small { display: block; font-family: "Overpass Mono", monospace; font-size: 11px; letter-spacing: .08em; color: var(--mute); font-weight: 400; }
.hh nav { display: flex; gap: 26px; }
.hh nav a { display: flex; flex-direction: column; align-items: flex-end; font-size: 15px; font-weight: 500; }
.hh nav a span { font-family: "Overpass Mono", monospace; font-size: 11px; color: var(--mute); font-weight: 400; }
.hh nav a span b { font-weight: 400; }
.hh nav a span em { font-style: normal; }
.hh nav a.k-photography span { color: var(--red); }
.hh nav a:hover, .hh nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ---------- foglio: disegno + legenda ---------- */
.sheet { display: grid; grid-template-columns: minmax(0, 800px) minmax(280px, 1fr); gap: 56px; padding-top: 26px; }
.title { font-size: 12px; letter-spacing: .08em; display: flex; justify-content: space-between; margin-bottom: 8px; }

/* il disegno: SVG sotto, oggetti HTML (foto, targhette, numeri) sopra, in percentuale del viewBox 640 x 1200 */
.draw-wrap { position: relative; container-type: inline-size; aspect-ratio: 640 / 1200; width: 100%; }
.draw-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.objs { position: absolute; inset: 0; --nd: clamp(15px, calc(100cqw * 14 / 640), 22px); --nf: clamp(8.5px, calc(100cqw * 8 / 640), 10.5px); }
.obj { position: absolute; display: block; overflow: hidden; }
.obj img { width: 100%; height: 100%; object-fit: cover; }
.obj:focus-visible { overflow: visible; outline-offset: 2px; }
.obj.blank { background: transparent; }
.obj.paper { background: var(--paper); border: .8px solid var(--ink); display: flex; align-items: center; justify-content: center;
  font-family: "Overpass Mono", monospace; font-size: calc(100cqw * 7 / 640); letter-spacing: .02em; }
.plate { position: absolute; display: flex; align-items: center; padding-left: calc(100cqw * 5 / 640); background: var(--paper); border: .9px solid var(--ink);
  font-family: "Overpass Mono", monospace; font-size: calc(100cqw * 7.2 / 640); line-height: 1; white-space: nowrap; overflow: hidden; }
.plate:hover { background: var(--ink); color: var(--paper); }
.wash { position: absolute; background: #c8321e; opacity: .28; mix-blend-mode: multiply; pointer-events: none; }

/* numeri cerchiati: area di tocco di 32 px, cerchio disegnato piccolo */
.n { position: absolute; width: 32px; height: 32px; margin: -16px 0 0 -16px; display: grid; place-items: center; -webkit-tap-highlight-color: transparent; }
.n span { display: grid; place-items: center; width: var(--nd); height: var(--nd); border: 1px solid var(--ink); border-radius: 50%; background: var(--paper); color: var(--ink);
  font-family: "Overpass Mono", monospace; font-size: var(--nf); line-height: 1; transition: background .15s, color .15s; }
.n:hover span { background: var(--ink); color: var(--paper); }
.n.dark span { background: var(--dark); border-color: #f1d9d2; color: #f1d9d2; }
.n.dark:hover span { background: #f1d9d2; color: var(--dark); }

/* la camera oscura: le stampe arrivano in negativo, alla luce rossa, e si sviluppano */
.print img { transition: filter 2.6s ease-in-out;
  filter: invert(1) sepia(.85) hue-rotate(-38deg) saturate(2.4) brightness(.78) contrast(1.05); }
.print.developed img { filter: none; }
.print.instant img { transition: none; }
@media (prefers-reduced-motion: reduce) { .print img { transition-duration: .25s; } }

/* ---------- legenda = menu ---------- */
.key { padding-top: 6px; }
.key .intro { font-weight: 300; font-size: 27px; line-height: 1.2; margin-bottom: 26px; }
.key .intro em { color: var(--mute); }
.fl { border-top: 1.5px solid var(--ink); padding: 14px 0 18px; }
.fl .h { display: flex; justify-content: space-between; align-items: baseline; }
.fl .h b { font-weight: 600; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; }
.fl .h span { font-family: "Overpass Mono", monospace; font-size: 11px; color: var(--mute); }
.fl h2 { font-weight: 500; font-size: 34px; line-height: 1.05; margin: 4px 0 10px; }
.fl h2 a { display: flex; justify-content: space-between; align-items: baseline; }
.fl h2 a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.fl h2 small { font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.fl ol { list-style: none; columns: 2 220px; column-gap: 22px; font-size: 14px; line-height: 1.35; }
.fl li { break-inside: avoid; padding: 3px 0 3px 26px; position: relative; }
.fl li i { position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border: 1px solid var(--ink); border-radius: 50%; font-style: normal;
  font-family: "Overpass Mono", monospace; font-size: 9.5px; display: flex; align-items: center; justify-content: center; }
.fl li a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.fl li.more { padding-left: 0; color: var(--mute); }
.fl li.empty { padding-left: 0; color: var(--mute); }
.fl.dark { background: var(--dark); color: #f1d9d2; border-top-color: var(--dark); padding: 14px 14px 18px; margin: 0 -14px; }
.fl.dark .h span { color: #d9705e; }
.fl.dark li i { border-color: #f1d9d2; }
.fl.dark li.more { color: #d9705e; }
.it { font-family: "Overpass Mono", monospace; font-size: 9.5px; border: 1px solid currentColor; padding: 0 3px; margin-left: 4px; white-space: nowrap; }

.block { display: grid; grid-template-columns: repeat(6, 1fr); border: 1.5px solid var(--ink); margin-top: 22px; font-family: "Overpass Mono", monospace; font-size: 10.5px; }
.block > * { padding: 6px 8px; border-right: 1px solid var(--ink); }
.block > :last-child { border-right: 0; }
.block b { display: block; font-family: Jost, sans-serif; font-size: 13px; font-weight: 500; }
.block a:hover { background: var(--ink); color: var(--paper); }

/* ---------- piede ---------- */
.hf { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; border-top: 1.5px solid var(--ink); margin-top: 30px; padding: 14px 0 30px; font-size: 13px; color: var(--mute); }
.hf q { font-style: italic; color: var(--ink); font-size: 18px; font-weight: 300; }
.hf-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.hf .links a:hover { color: var(--ink); text-decoration: underline; }
.social { list-style: none; display: flex; gap: 18px; flex-wrap: wrap; justify-content: flex-end; }
.social a { display: block; width: 22px; height: 22px; color: var(--ink); }
.social svg { width: 100%; height: 100%; fill: currentColor; }
.cookie-reopen { background: none; border: 0; font: 400 11px "Overpass Mono", monospace; color: var(--mute); text-decoration: underline; cursor: pointer; padding: 9px 6px; margin: -9px -6px; }

/* ---------- cookie ---------- */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--paper); border-top: 1.5px solid var(--ink); padding: 14px var(--g); display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cookie-banner[hidden] { display: none; }
.cookie-banner p { font-size: 14px; line-height: 1.5; max-width: 60ch; }
.cookie-banner p .cookie-it { display: block; color: var(--mute); }
.cookie-actions { display: flex; gap: 10px; }
.cookie-actions button { font: 500 14px Jost, sans-serif; min-width: 110px; padding: 10px 18px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer; }
.cookie-actions button:hover { background: var(--ink); color: var(--paper); }

/* ---------- pagine dei piani ---------- */
.floor-page { padding-top: 26px; }
.fl-head { border-top: 1.5px solid var(--ink); padding: 14px 0 22px; }
.fl-head .h { display: flex; justify-content: space-between; align-items: baseline; }
.fl-head .h b { font-weight: 600; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; }
.fl-head .h span { font-family: "Overpass Mono", monospace; font-size: 11px; color: var(--mute); }
.fl-head h1 { font-weight: 500; font-size: clamp(44px, 7vw, 84px); line-height: 1; margin: 8px 0 12px; }
.fl-head .blurb { font-weight: 300; font-size: 24px; line-height: 1.25; max-width: 32ch; }
.fl-head .count { font-size: 12px; letter-spacing: .08em; color: var(--mute); margin-top: 14px; text-transform: uppercase; }
.floor-photography .fl-head { background: var(--dark); color: #f1d9d2; border-top-color: var(--dark); padding: 14px 18px 22px; }
.floor-photography .fl-head .h span, .floor-photography .fl-head .count { color: #d9705e; }
.grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 34px 26px; margin-top: 22px; }
.cell .thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--peg); border: 1px solid var(--ink); }
.cell .thumb img { width: 100%; height: 100%; object-fit: cover; }
.cell .thumb .blank { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font: 400 11px "Overpass Mono", monospace; letter-spacing: .08em;
  background: repeating-linear-gradient(45deg, transparent 0 5px, rgba(26, 26, 26, .55) 5px 6px); }
.cell .thumb .blank:not(:empty) { background-image: none; background-color: var(--paper); }
.cell .meta { padding-top: 10px; }
.cell h2 { font-weight: 500; font-size: 20px; line-height: 1.2; }
.cell h2 a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.cell .when { font-size: 11px; color: var(--mute); margin-top: 4px; }
.cell .desc { font-size: 14px; line-height: 1.4; color: #4a4741; margin-top: 6px; }
.floor-page .empty { margin: 30px 0; color: var(--mute); }
.stairs { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1.5px solid var(--ink); margin-top: 48px; padding-top: 16px; font-weight: 500; }
.stairs a { padding: 8px 0; }
.stairs a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.stairs .mono { font-size: 11px; color: var(--mute); font-weight: 400; }

/* ---------- tablet e telefono: la sezione alta e stretta in cima, sotto la legenda (che e' il menu vero) ---------- */
@media (max-width: 900px) {
  .sheet { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .draw { width: min(100%, 600px); margin: 0 auto; }
  .key .intro { font-size: 24px; }
}
@media (max-width: 600px) {
  :root { --g: 16px; }
  .hh { flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px 0 12px; }
  .logo { font-size: 22px; }
  .logo small { font-size: 10px; }
  .hh nav { width: 100%; justify-content: space-between; gap: 6px; flex-wrap: wrap; row-gap: 10px; }
  .hh nav a { align-items: flex-start; font-size: 13.5px; }
  .hh nav a span { font-size: 9.5px; }
  .sheet { padding-top: 14px; }
  .title { font-size: 10px; }
  .key .intro { font-size: 21px; margin-bottom: 16px; }
  .fl h2 { font-size: 28px; }
  .fl ol { columns: 1; }
  .fl li { padding-top: 6px; padding-bottom: 6px; }
  .fl li i { top: 7px; }
  .block { grid-template-columns: repeat(3, 1fr); }
  .block > :nth-child(3) { border-right: 0; }
  .block > :nth-child(-n+3) { border-bottom: 1px solid var(--ink); }
  .cookie-banner { padding: 10px var(--g); gap: 8px; }
  .cookie-banner p { font-size: 12.5px; line-height: 1.35; }
  .cookie-actions { width: 100%; }
  .cookie-actions button { flex: 1; min-width: 0; padding: 8px 12px; font-size: 13px; }
  .hf { flex-direction: column; gap: 14px; }
  .hf-side { align-items: flex-start; }
  .social { justify-content: flex-start; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 24px 14px; }
  .cell h2 { font-size: 16px; }
  .fl-head .blurb { font-size: 20px; }
}

/* ---------- telefono (sotto i 768 px): la copertina con le quattro fasce, poi i piani ingranditi ---------- */
.phone { display: none; }
@media (max-width: 767px) {
  .desk { display: none; }
  .phone { display: block; }
  /* in home le fasce della copertina fanno da menu: in testata restano il logo e About */
  .hh.is-home { flex-direction: row; align-items: flex-end; justify-content: space-between; padding: 22px 0 12px; }
  .hh.is-home .fl-link { display: none; }
  .hh.is-home nav { width: auto; }
  .hh.is-home nav a { align-items: flex-end; }

  .cover { container-type: inline-size; margin-top: 12px; }
  .cover .title { display: flex; justify-content: space-between; font-size: 10.5px; letter-spacing: .06em; margin-bottom: 4px; }
  .house { position: relative; --h: calc(100cqw * .64 * 1200 / 560); height: var(--h); }
  .house-art { position: relative; width: 64%; aspect-ratio: 560 / 1200; margin-left: -6px; }
  .house-art .art-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .cover .objs { pointer-events: none; }
  .band { position: absolute; left: 0; right: 0; display: flex; justify-content: flex-end; align-items: center; border-top: 1px dashed var(--dash); }
  .band .lab { display: block; width: calc(36cqw + 6px); padding-left: 12px; border-left: 1.5px solid var(--ink); }
  .band b { display: block; font-weight: 500; font-size: clamp(19px, 5.4cqw, 34px); line-height: 1.05; margin: 1px 0 2px; }
  .band .note { display: block; font-size: 12.5px; color: var(--mute); }
  .band .go { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 22px; font-weight: 300; }
  .band:hover, .band:active { background: rgba(26, 26, 26, .04); }
  .band.k-photography b { color: var(--red); }
  .cover .hint { font: 400 11px "Overpass Mono", monospace; color: var(--mute); text-align: center; border-top: 1.5px solid var(--ink); padding-top: 10px; margin-top: 6px; }
  .cover .intro { font-weight: 300; font-size: 20px; line-height: 1.2; padding: 12px 0 0; }
  .cover .intro em { color: var(--mute); }

  .pfloor { padding-top: 26px; scroll-margin-top: 8px; }
  .pfloor .fh { display: flex; justify-content: space-between; align-items: baseline; border-top: 1.5px solid var(--ink); padding-top: 10px; margin-bottom: 8px; }
  .pfloor .fh b { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
  .pfloor .fh a { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 8px 0 8px 8px; margin: -8px 0; }
  .pfloor h2 { font-weight: 500; font-size: 30px; line-height: 1; margin: 0 0 10px; }
  .pfloor.dark .fh { border-top-color: var(--dark); }

  .fwrap { position: relative; container-type: inline-size; width: 100%; }
  .fwrap .art-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  /* numeri, targhette e scritte: ingranditi, almeno 11-12 px effettivi */
  .fwrap .objs { --nd: max(18px, calc(100cqw * 30 / 520)); --nf: clamp(11px, calc(100cqw * 17.5 / 520), 14px); }
  .fwrap .plate { font-size: max(10.5px, calc(100cqw * 17 / 520)); padding-left: calc(100cqw * 6 / 520); border-width: 1px; }
  .rlabel { position: absolute; transform: translateY(-84%); font-weight: 600; font-size: max(11.5px, calc(100cqw * 17 / 520)); letter-spacing: .16em; line-height: 1; white-space: nowrap; color: var(--ink); }
  .rlabel.dark { color: #e5705b; }

  .pfloor ol { list-style: none; margin-top: 10px; font-size: 15.5px; line-height: 1.35; columns: 1; }
  .pfloor li { padding: 7px 0 7px 32px; position: relative; border-bottom: 1px solid var(--line); }
  .pfloor li i { position: absolute; left: 0; top: 7px; width: 22px; height: 22px; border: 1px solid var(--ink); border-radius: 50%; font-style: normal; font: 400 10.5px "Overpass Mono", monospace; display: flex; align-items: center; justify-content: center; }
  .pfloor li.more, .pfloor li.empty { padding-left: 0; color: var(--mute); }
  .pfloor li > a { display: inline-block; padding: 6px 0; margin: -6px 0; }

  .phone .block { margin-bottom: 0; }
  .here { position: fixed; right: 10px; bottom: 12px; z-index: 9; background: rgba(255, 255, 255, .94); border: 1.5px solid var(--ink); padding: 6px 9px 6px 7px; display: flex; gap: 7px; align-items: center; min-height: 44px; }
  .here[hidden] { display: none; }
  .here svg { width: 24px; height: 40px; display: block; }
  .here .t { font: 400 10px/1.25 "Overpass Mono", monospace; color: var(--mute); }
  .here .t b { display: block; font: 600 13px Jost, sans-serif; color: var(--ink); }
  .here rect.on { fill: var(--ink); }
  .here rect.on.d { fill: var(--red); }
}

/* ---------- la piccionaia (Letters, il Substack) ---------- */
.lt-hit { position: absolute; display: block; }
.lt-hit:focus-visible, .lt-pill:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.lt-pill::after { content: ""; position: absolute; inset: -9px -6px; }
.lt-pill { position: absolute; transform: translate(-50%, -50%); font: 600 11.5px "Overpass Mono", monospace; letter-spacing: .06em; background: var(--paper); border: 1px solid var(--ink); padding: 1px 6px; white-space: nowrap; }
.lt-dot { position: absolute; transform: translate(-50%, -50%); width: 15px; height: 15px; border: 1px solid var(--ink); border-radius: 50%; background: var(--paper); font: 600 8.5px "Overpass Mono", monospace; display: flex; align-items: center; justify-content: center; }
.lt-card { position: absolute; z-index: 6; width: 228px; background: var(--paper); border: 1.5px solid var(--ink); padding: 10px 12px 11px; font-size: 13px; line-height: 1.3; box-shadow: 4px 4px 0 rgba(0, 0, 0, .08);
  opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .2s, transform .2s; }
.lt-card .k { font: 600 10.5px "Overpass Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.lt-card .t { font-size: 16px; font-weight: 500; margin: 4px 0 6px; }
.lt-card .u { font: 400 11px "Overpass Mono", monospace; margin-top: 6px; }
.draw-wrap:has(.lt-link:hover) .lt-card, .draw-wrap:has(.lt-link:focus-visible) .lt-card { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .lt-card { transition: none; } }
.hh nav a.k-letters span { color: var(--mute); }
.lt-sec .h b { letter-spacing: .16em; }
.lt-sec h2 small { font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.lt-sec .ph { font: 400 12px "Overpass Mono", monospace; color: var(--mute); margin-top: 4px; }
.lt-sec .ph b { color: var(--ink); font-weight: 600; }
.lt-sec li a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (max-width: 767px) {
  .lt-row { display: flex; align-items: center; gap: 10px; border-top: 1px dashed var(--dash); padding: 12px 0 6px; margin-top: 4px; min-height: 48px; }
  .lt-row i { width: 24px; height: 24px; border: 1px solid var(--ink); border-radius: 50%; font: 600 11px "Overpass Mono", monospace; font-style: normal; display: flex; align-items: center; justify-content: center; flex: none; }
  .lt-row b { font-weight: 500; font-size: 19px; }
  .lt-row span { font-size: 12.5px; color: var(--mute); line-height: 1.3; }
  .lt-row span b { color: var(--ink); }
  .lt-row em { margin-left: auto; font-style: normal; font-size: 20px; font-weight: 300; }
  .pfloor li.lt-li .ph { display: block; font: 400 11.5px "Overpass Mono", monospace; color: var(--mute); }
  .hh.is-home { gap: 16px; }
  .hh.is-home nav { gap: 18px; }
}
@media (hover: none) { .lt-card { display: none; } }

/* =====================================================================================================
   Il resto del sito nello stesso vestito: articoli, gallerie, registro, Index, About, 404.
   ===================================================================================================== */
img.broken { display: none; }
.mh { width: 22px; height: 36px; display: block; flex: none; }
.plates { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.plates a { display: inline-block; font: 400 11px/1 "Overpass Mono", monospace; letter-spacing: .04em; border: 1px solid var(--ink); padding: 8px 8px; min-height: 32px; white-space: nowrap; }
.plates a:hover { background: var(--ink); color: var(--paper); }
.stairs .lbl { display: block; font: 400 11px "Overpass Mono", monospace; letter-spacing: .08em; color: var(--mute); text-transform: uppercase; }
.stairs a { max-width: 40%; }
.stairs .down { text-align: right; }
.stairs .whole { align-self: center; }
.allsheets { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; border-top: 1px dashed var(--dash); margin-top: 34px; padding-top: 14px; }
.allsheets a { font-weight: 500; padding: 8px 0; }
.allsheets a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.allsheets span { font-size: 11px; color: var(--mute); }

/* la libreria dello studio nel disegno e' un link all'Index */
.idx-hit:hover, .idx-hit:focus-visible { outline: 1.5px solid var(--ink); overflow: visible; }
.draw-wrap:has(.idx-hit:hover) .idx-plate, .fwrap:has(.idx-hit:hover) .idx-plate { background: var(--ink); color: var(--paper); }

/* ---------- articolo: la tavola con il cartiglio ---------- */
.sheetpost { display: grid; grid-template-columns: 230px minmax(0, 700px); gap: 64px; padding-top: 26px; justify-content: start; }
.cart { position: sticky; top: 20px; align-self: start; border: 1.5px solid var(--ink); font-size: 13px; }
.cart > div, .cart > a { display: block; padding: 9px 11px; border-bottom: 1px solid var(--ink); }
.cart > :last-child { border-bottom: 0; }
.cart .k { display: block; font: 400 10.5px "Overpass Mono", monospace; letter-spacing: .1em; color: var(--mute); text-transform: uppercase; margin-bottom: 3px; }
.cart .room { display: flex; gap: 10px; align-items: center; }
.cart .room b { font-weight: 600; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; }
.cart a.back:hover { background: var(--ink); color: var(--paper); }
.cart a.back:hover .k { color: var(--paper); }
.cart .v { font-weight: 500; }
.cart .social { justify-content: flex-start; gap: 10px; margin-top: 6px; }
.cart .social a { width: 32px; height: 32px; padding: 5px; }
.ttl { font-weight: 500; font-size: clamp(40px, 5vw, 68px); line-height: 1.02; margin: 6px 0 26px; letter-spacing: -.005em; overflow-wrap: break-word; }
.pb { font-size: 18px; line-height: 1.62; font-weight: 400; min-width: 0; overflow-wrap: break-word; }
.pb p { margin: 0 0 1.15em; }
.pb a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pb h1 { font-weight: 500; font-size: clamp(36px, 4vw, 52px); line-height: 1.05; margin: 0 0 .6em; }
.pb h2, .pb h3 { font-weight: 300; font-size: 26px; line-height: 1.25; margin: 0 0 1em; }
.pb h2:not(:first-child), .pb h3:not(:first-child) { font-weight: 500; font-size: 22px; margin-top: 1.6em; }
.pb h4 { font-weight: 500; font-size: 18px; margin: 1.4em 0 .5em; }
.pb ul, .pb ol { margin: 0 0 1.15em 1.3em; }
.pb li { margin-bottom: .3em; }
.pb { counter-reset: fig; }
.pb figure.photo { margin: 30px 0; counter-increment: fig; }
.pb figure.photo:has(img.broken) { display: none; } /* foto gia' persa sul vecchio sito: niente FIG. vuota */
.pb figure.photo img { width: 100%; height: auto; border: 1px solid var(--ink); }
.pb figure.photo a { display: block; text-decoration: none; }
.pb figcaption { font: 400 11.5px/1.5 "Overpass Mono", monospace; color: var(--mute); margin-top: 8px; }
.pb figure.photo figcaption::before { content: "FIG. " counter(fig) " — "; color: var(--ink); }
.pb figure.photo:not(:has(figcaption))::after { content: "FIG. " counter(fig); display: block; font: 400 11.5px "Overpass Mono", monospace; color: var(--mute); margin-top: 6px; }
.pb blockquote { margin: 0 0 1.6em; padding-left: 14px; border-left: 1.5px solid var(--ink); font-style: italic; font-weight: 300; }
.pb blockquote p { margin: 0; }
.pb img { max-width: 100%; height: auto; }
.pb pre, .pb code { font-family: "Overpass Mono", monospace; font-size: .85em; }
.pb pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.pb table { max-width: 100%; display: block; overflow-x: auto; }
.pb iframe, .pb video { max-width: 100%; }
.pb .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 30px 0; }
.pb .gallery-grid .lb { display: block; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--ink); cursor: zoom-in; text-decoration: none; }
.pb .gallery-grid img { width: 100%; height: 100%; object-fit: cover; border: 0; }
.endtags { border-top: 1.5px solid var(--ink); margin-top: 40px; padding-top: 12px; display: none; }
.endtags .k { font: 400 11px "Overpass Mono", monospace; letter-spacing: .1em; color: var(--mute); margin: 8px 0; }
.ph-meta { display: none; border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--ink); margin: 0 0 22px; padding: 8px 0; font: 400 11px "Overpass Mono", monospace; letter-spacing: .06em; color: var(--mute); }
.ph-top { display: none; }
.post .stairs { margin-top: 36px; }
@media (max-width: 900px) {
  .sheetpost { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cart { display: none; }
  .about .cart { display: block; position: static; margin-top: 26px; order: 2; }
  .ph-meta { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
  .endtags { display: block; }
  .ph-top { display: flex; align-items: center; gap: 10px; padding-top: 16px; }
  .ph-top b { font-weight: 600; font-size: 12px; letter-spacing: .16em; }
  .ph-top a { margin-left: auto; font: 600 12px Jost, sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: 8px 0 8px 8px; }
}
@media (max-width: 600px) {
  .ttl { font-size: 36px; margin-bottom: 16px; }
  .pb { font-size: 17px; }
  .pb h3 { font-size: 22px; }
  .pb .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* testata sul telefono: "About" sale sulla riga del nome, i piani restano su una riga */
@media (max-width: 600px) {
  .hh:not(.is-home) nav { flex-wrap: nowrap; gap: 4px; }
  .hh:not(.is-home) nav a.k-about { position: absolute; right: 0; top: 24px; align-items: flex-end; }
  .hh:not(.is-home) nav a { font-size: 13px; }
  .hh:not(.is-home) nav a span { font-size: 9px; }
  .stairs { display: grid; grid-template-columns: 1fr 1fr; row-gap: 4px; }
  .stairs a { max-width: none; }
  .stairs .whole { grid-column: 1 / -1; grid-row: 2; text-align: center; border-top: 1px dashed var(--dash); padding-top: 12px; }
}

/* ---------- gallerie: il cassetto della camera oscura (tutta la pagina e' scura) ---------- */
.gal { padding-top: 26px; }
.gal .fl-head { background: var(--dark); color: #f1d9d2; border-top-color: #f1d9d2; padding: 14px 0 22px; }
.gal .fl-head .h a { font: 400 11px "Overpass Mono", monospace; color: #d9705e; padding: 9px 0; }
.gal .fl-head .h a:hover { color: #f1d9d2; }
.gal .fl-head .count { color: #d9705e; }
.gal .fl-head h1 { font-size: clamp(44px, 7vw, 84px); }
.gal .title { color: #d9705e; }
.prints { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px 22px; align-items: start; margin-top: 22px; }
.prints > a { display: block; position: relative; cursor: zoom-in; }
.prints img { width: 100%; height: auto; display: block; border: 1px solid #5a2a22; }
.prints .pn { display: flex; gap: 8px; align-items: center; padding-top: 7px; font: 400 11px "Overpass Mono", monospace; color: #d9705e; }
.prints .pn i { width: 20px; height: 20px; border: 1px solid #f1d9d2; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 9.5px; color: #f1d9d2; }
.prints > a:hover img, .prints > a:focus-visible img { border-color: #f1d9d2; }
.others { border-top: 1.5px solid #f1d9d2; margin-top: 34px; padding-top: 12px; }
.others .k { font: 400 11px "Overpass Mono", monospace; letter-spacing: .1em; color: #d9705e; margin-bottom: 8px; }
.others ol { list-style: none; display: flex; gap: 8px; flex-wrap: wrap; }
.others li a { display: flex; gap: 8px; align-items: center; border: 1px solid #f1d9d2; color: #f1d9d2; padding: 6px 10px 6px 6px; min-height: 36px; font-weight: 500; }
.others li a i { width: 20px; height: 20px; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; font: 400 9.5px "Overpass Mono", monospace; font-style: normal; }
.others li a[aria-current] { background: #f1d9d2; color: var(--dark); }
.others li a:hover { background: #f1d9d2; color: var(--dark); }
.dark-room main { background: var(--dark); color: #f1d9d2; padding-bottom: 40px; }
.dark-room .gal .stairs { border-top-color: #f1d9d2; }
.dark-room .gal .stairs .lbl { color: #d9705e; }
.dark-room .gal :focus-visible { outline-color: #f1d9d2; }
.dark-room .hf { margin-top: 0; }
@media (max-width: 600px) { .prints { grid-template-columns: 1fr 1fr; gap: 14px 10px; } .prints .pn { font-size: 10px; } .prints .pn span { display: none; } }

/* ---------- lightbox a schermo intero ---------- */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(20, 8, 7, .97); display: none; align-items: center; justify-content: center; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 94vw; max-height: 86vh; width: auto; height: auto; object-fit: contain; }
.lightbox button { position: absolute; background: none; border: 1px solid #f1d9d2; color: #f1d9d2; font: 400 24px/1 Jost, sans-serif; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; }
.lightbox button:hover { background: #f1d9d2; color: var(--dark); }
.lightbox .lb-close { top: 12px; right: 12px; }
.lightbox .lb-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: 10px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-count { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; color: #d9705e; font: 400 12px "Overpass Mono", monospace; letter-spacing: .08em; pointer-events: none; }
.lightbox :focus-visible { outline-color: #f1d9d2; }
.lightbox.single .lb-prev, .lightbox.single .lb-next, .lightbox.single .lb-count { display: none; }
body.lb-open { overflow: hidden; }
@media (max-width: 600px) { .lightbox .lb-prev, .lightbox .lb-next { top: auto; bottom: 8px; transform: none; } .lightbox img { max-height: 80vh; } }

/* ---------- registro delle tavole: /post, etichette, categorie ---------- */
.arc { padding-top: 26px; }
.arc .fl-head h1 small { display: block; font-size: 12px; letter-spacing: .12em; color: var(--mute); margin-bottom: 6px; font-weight: 400; }
.reg { list-style: none; margin-top: 18px; border-top: 1.5px solid var(--ink); }
.reg li { display: grid; grid-template-columns: 44px 96px minmax(0, 1fr) 110px 110px; gap: 16px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.reg .no { font: 400 11px "Overpass Mono", monospace; color: var(--mute); }
.reg .th { display: block; aspect-ratio: 3 / 2; border: 1px solid var(--ink); overflow: hidden; background: var(--peg); }
.reg .th img { width: 100%; height: 100%; object-fit: cover; }
.reg .th .blank { display: block; width: 100%; height: 100%; background: repeating-linear-gradient(45deg, transparent 0 5px, rgba(26, 26, 26, .55) 5px 6px); }
.reg .tt { font-weight: 500; font-size: 19px; line-height: 1.2; }
.reg .tt:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.reg .dt { font: 400 12px "Overpass Mono", monospace; color: var(--mute); }
.reg .rm { font: 400 11px/1 "Overpass Mono", monospace; letter-spacing: .06em; border: 1px solid var(--ink); padding: 9.5px 8px; justify-self: start; }
.reg .rm:hover { background: var(--ink); color: var(--paper); }
.reg-head { display: grid; grid-template-columns: 44px 96px minmax(0, 1fr) 110px 110px; gap: 16px; font: 400 10.5px "Overpass Mono", monospace; letter-spacing: .1em; color: var(--mute); margin-top: 26px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.filters a { font: 400 11px/1 "Overpass Mono", monospace; border: 1px solid var(--ink); padding: 11px 9px; }
.filters a:hover { background: var(--ink); color: var(--paper); }
.filters a.on { background: var(--ink); color: var(--paper); }
.arc .stairs { margin-top: 36px; }
@media (max-width: 700px) {
  .reg-head { display: none; }
  .reg li { grid-template-columns: 84px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 4px; align-items: start; position: relative; }
  .reg .no { display: none; }
  .reg .th { grid-row: 1 / 3; }
  .reg .tt { font-size: 16.5px; }
  .reg li .dt, .reg li .rm { grid-column: 2; }
  .reg .rm { position: absolute; right: 0; bottom: 8px; }
}

/* ---------- Index: il catalogo di tutta la casa ---------- */
.idx { padding-top: 26px; }
.front { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 40px; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); padding: 22px 0 26px; align-items: center; }
.front .kicker { font-size: 12px; letter-spacing: .12em; color: var(--mute); }
.front h1 { font-weight: 500; font-size: clamp(64px, 11vw, 150px); line-height: .95; margin: 10px 0 8px; letter-spacing: -.01em; }
.front .sub { font-size: 13px; letter-spacing: .06em; color: var(--ink); }
.imprint { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1.5px solid var(--ink); margin-top: 26px; max-width: 460px; font-size: 11px; }
.imprint div { padding: 6px 8px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.imprint div:nth-child(2n) { border-right: 0; }
.imprint div:nth-last-child(-n+2) { border-bottom: 0; }
.imprint dt { color: var(--mute); letter-spacing: .08em; text-transform: uppercase; font-size: 10px; }
.imprint dd { margin: 2px 0 0; font: 500 13px Jost, sans-serif; }
.front-img img { width: 100%; height: auto; border: 1px solid var(--ink); }
.cat { margin-top: 30px; }
.cat h2 { font-weight: 500; font-size: 30px; line-height: 1.1; border-top: 1.5px solid var(--ink); padding-top: 10px; }
.cat h2 a { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.cat h2 b { font: 600 13px Jost, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.cat h2 a:hover span { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.entries { list-style: none; margin-top: 8px; }
.entries li { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; font-size: 17px; line-height: 1.3; }
.entries li i { flex: none; align-self: flex-start; width: 26px; height: 22px; margin-top: 2px; text-align: left; font: 400 11px "Overpass Mono", monospace; font-style: normal; color: var(--mute); }
.entries .et { padding: 4px 0; }
.entries .et:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.entries .lead { flex: 1; border-bottom: 1px dotted var(--dash); min-width: 12px; transform: translateY(-4px); }
.entries .fy { flex: none; font-size: 11px; color: var(--mute); white-space: nowrap; }
.idx .stairs { margin-top: 44px; }
@media (max-width: 800px) { .front { grid-template-columns: minmax(0, 1fr); } .front-img { order: -1; } }
@media (max-width: 600px) {
  .entries li { flex-wrap: wrap; }
  .entries .et { flex: 1 1 calc(100% - 40px); }
  .entries .lead { display: none; }
  .entries .fy { margin-left: 36px; flex-basis: calc(100% - 36px); margin-top: -6px; padding-bottom: 4px; }
}

/* ---------- About ---------- */
.sheetpost.about { grid-template-columns: 230px minmax(0, 980px); }
.about .page-sheet { min-width: 0; }
.about-grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 36px; align-items: start; margin-top: 8px; }
.about-grid .page-image img { width: 100%; height: auto; border: 1px solid var(--ink); }
.about .pb { font-size: 17px; }
.about .pb h1 { font-size: clamp(40px, 5vw, 68px); }
@media (max-width: 900px) { .about-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; } .about { display: flex; flex-direction: column; } }

/* ---------- 404 e rimando ---------- */
.nf { padding-top: 26px; }
.nf-body { display: flex; gap: 28px; align-items: flex-start; margin-top: 26px; border-top: 1.5px solid var(--ink); padding-top: 22px; }
.nf-body .mh { width: 56px; height: 92px; }
.nf h1 { font-weight: 500; font-size: clamp(36px, 6vw, 68px); line-height: 1.02; margin-bottom: 14px; }
.nf p { font-size: 18px; margin-bottom: 16px; }
.nf .plates a { font-size: 13px; }
.redir { margin-top: 20px; }
.redir a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) { .nf-body { flex-direction: column; } }

/* aree di tocco: almeno 32 px */
.hh nav a { min-height: 32px; justify-content: center; }
.logo { padding: 3px 0; }
.hf .links a { display: inline-block; padding: 7px 0; min-width: 32px; text-align: center; }
.social { gap: 8px; }
.social a { width: 32px; height: 32px; padding: 5px; }
.entries .et { padding: 6px 0; }
.reg .tt { padding: 6px 0; }