/* giva — design "Il colpo v2". Valori presi uno a uno dagli stili del design.
   Niente stili inline: la Content-Security-Policy li vieta. */

/* ---------- Font (ospitati in locale, licenza OFL) ---------- */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/space-grotesk-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: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/space-grotesk-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Reenie Beanie';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/reenie-beanie-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;
}

/* ---------- Token ----------
   Notte (default) e giorno: valori presi dai temi del design. Il tema si sceglie con ◐ nella nav
   (data-theme su <html>, impostato da theme.js prima del rendering). */
:root {
  --bg: #121211;
  --bg-deep: #0e0e0d;
  --bg-hover: #171715;
  --bg-active: #1f1f1d;
  --grid-major: #1f1f1d;
  --grid-minor: #181817;
  --ink: #ecebe6;
  --ink-2: #c9c8c1;
  --mute: #a09f98;
  --mute-2: #6a6963;
  --mute-3: #5c5b55;
  --mute-4: #57564f;
  --rule: #3a3a36;
  --rule-2: #2a2a27;
  --stripe: #171716;
  --badge-line: #c9c8c1;
  --on-amber: #121211;
  --scrim: rgb(10 10 9 / .72);

  /* Fallback sRGB per i browser senza oklch() */
  --amber: #f7b83d;
  --amber-18: rgb(247 184 61 / .18);
  --amber-60: rgb(247 184 61 / .6);
  --amber-0: rgb(247 184 61 / 0);
  --cyan: #00e0ea;
  --pink: #ff99d2;

  /* La tela della lavagna e i blocchi di codice restano scuri in entrambi i temi. */
  --draw-bg: #121211;
  --draw-dots: #2a2a27;
  --chalk: #ecebe6;
  --chalk-amber: #f7b83d;

  --sans: 'Space Grotesk', sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --hand: 'Reenie Beanie', cursive;

  /* Margini laterali del design; su schermi molto larghi il contenuto si ferma a 1440px e si centra. */
  --gx: max(clamp(20px, 3.2cqi, 40px), (100cqi - 1440px) / 2);
  --gx-nav: max(clamp(16px, 3.2cqi, 40px), (100cqi - 1440px) / 2);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f4f3ef;
  --bg-deep: #eae8e2;
  --bg-hover: #ecebe6;
  --bg-active: #e2e0d9;
  --grid-major: #e2e0d9;
  --grid-minor: #ebe9e3;
  --ink: #121211;
  --ink-2: #33322e;
  --mute: #57554e;
  --mute-2: #6f6d66;
  --mute-3: #7a7870;
  --mute-4: #a09f98;
  --rule: #c2c0b7;
  --rule-2: #d9d7cf;
  --stripe: #ecebe6;
  --badge-line: #3a3a36;
  --on-amber: #fbfaf7;
  --scrim: rgb(18 18 17 / .4);
  --amber: #a56300;
  --amber-18: rgb(165 99 0 / .14);
  --amber-60: rgb(165 99 0 / .6);
  --amber-0: rgb(165 99 0 / 0);
  color-scheme: light;
}
@supports (color: oklch(0 0 0)) {
  :root {
    --amber: oklch(0.82 0.15 80);
    --amber-18: oklch(0.82 0.15 80 / .18);
    --amber-60: oklch(0.82 0.15 80 / .6);
    --amber-0: oklch(0.82 0.15 80 / 0);
    --cyan: oklch(0.82 0.15 200);
    --pink: oklch(0.82 0.15 350);
    --chalk-amber: oklch(0.82 0.15 80);
  }
  :root[data-theme="light"] {
    --amber: oklch(0.56 0.13 68);
    --amber-18: oklch(0.56 0.13 68 / .14);
    --amber-60: oklch(0.56 0.13 68 / .6);
    --amber-0: oklch(0.56 0.13 68 / 0);
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); }
a { color: inherit; text-decoration: none; }
a:hover { opacity: .9; }
a:not([href]) { cursor: default; }
button { color: inherit; }
p, h1, h2, h3, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
kbd { padding: 1px 6px; border: 1px solid var(--rule); border-radius: 4px; font: 11px var(--mono); }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 10;
  padding: 10px 14px; border-radius: 6px; background: var(--amber); color: var(--on-amber); font-weight: 600;
}
.skip:focus { top: 12px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.accent { color: var(--amber); }
.nowrap { white-space: nowrap; }
.strike { text-decoration: line-through; text-decoration-color: var(--amber); color: var(--mute-2); }

/* ---------- Pagina: carta da blueprint ---------- */
.page {
  container-type: inline-size;
  min-height: 100vh;
  overflow-y: clip; /* il velo della ricerca (100vh) non allunga le pagine corte */
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  color: var(--ink);
  font-family: var(--sans);
}
.page--fill { display: flex; flex-direction: column; min-height: 100dvh; }

/* ---------- Elementi comuni ---------- */
.eyebrow { font: 500 11px var(--mono); color: var(--amber); letter-spacing: .1em; }
.label-xs { font: 500 10px var(--mono); color: var(--mute); letter-spacing: .1em; }
.aside-note { font: 12px var(--mono); color: var(--mute); }

.page-head { padding: clamp(56px, 8cqi, 112px) var(--gx) clamp(40px, 5cqi, 64px); }
.page-head--chi { padding-bottom: clamp(64px, 8cqi, 104px); }
.page-head--lavagna { padding-bottom: clamp(32px, 4cqi, 48px); }
/* Il minimo del design (56/52px) scende solo sotto i ~370px, dove una parola lunga non ci starebbe. */
.page-title { margin: 14px 0 0; font-weight: 600; font-size: clamp(min(56px, 15cqi), 8.4cqi, 108px); line-height: .95; letter-spacing: -.05em; }
.page-head--lavagna .page-title { font-size: clamp(min(52px, 15cqi), 8.4cqi, 108px); }
.lede { margin: 20px 0 0; max-width: 560px; font-size: clamp(17px, 1.6cqi, 19px); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.lede--flush { margin: 0; }

.h2 { margin: 10px 0 0; font-weight: 600; letter-spacing: -.035em; }
.h2--lg { font-size: clamp(32px, 3.5cqi, 44px); }
.h2--md { font-size: clamp(28px, 3cqi, 40px); }

.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; margin-bottom: 20px; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-row--spaced { margin-top: 32px; }
.btn { display: flex; align-items: center; gap: 12px; height: 54px; border-radius: 6px; font-size: 16px; }
.btn--primary { padding: 0 24px; background: var(--amber); color: var(--on-amber); font-weight: 600; }
.btn--ghost { padding: 0 22px; border: 1px solid var(--rule); background: var(--bg); font-weight: 500; }
.btn--tight { gap: 0; }
.btn-note { font: 500 11px var(--mono); color: var(--mute); }
.btn-note--inherit { color: inherit; }

/* ---------- Nav (GivaNav, turno 8) ----------
   Sotto i 1000px: giva (30px) · lente · burger, pulsanti 48×48 solo icona; il resto sta nel menu a tendina.
   Da 1000px: tutto su una riga, Home e A–E, ricerca compatta che apre il Command, IT/EN e Notte/Giorno da 36px. */
.nav-wrap { position: relative; z-index: 50; }
.nav {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  padding: 10px var(--gx-nav);
  border-bottom: 1px solid var(--rule); background: var(--bg); color: var(--ink); font-family: var(--sans);
}
.nav-brand { display: flex; align-items: center; min-height: 44px; padding-right: 4px; font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: -.03em; }
.nav-links { display: none; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; font-size: 15px; font-weight: 500; }
.nav-links::-webkit-scrollbar { display: none; }
.nav-link { flex: none; display: flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 12px; border-radius: 6px; color: var(--mute); }
.nav-key { font: 500 10px var(--mono); color: var(--mute-3); }
.nav-link[aria-current="page"] { background: var(--bg-active); color: var(--ink); }
.nav-link[aria-current="page"] .nav-key { color: var(--amber); }

.nav-search {
  margin-left: auto; flex: none; display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 48px; height: 48px; padding: 0;
  border: 1px solid var(--rule); border-radius: 6px; background: transparent; color: var(--ink);
  font: 12px var(--mono); text-align: left; cursor: pointer;
}
.nav-search:hover { border-color: var(--mute-2); }
.nav-search[aria-expanded="true"] { border-color: var(--amber); background: var(--bg-active); }
.nav-search-lens { flex: none; display: block; width: 24px; height: 24px; }
.nav-search-lens circle, .nav-search-lens path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.nav-search-hint { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-search-hint, .nav-search-kbd { display: none; }
.nav-search-kbd { flex: none; padding: 1px 6px; font-size: 10px; color: var(--mute); }
.nav-kbd-open, .nav-search[aria-expanded="true"] .nav-kbd-closed { display: none; }
.nav-search[aria-expanded="true"] .nav-kbd-open { display: inline; }

.nav-lang { display: none; height: 36px; padding: 3px; border: 1px solid var(--rule); border-radius: 6px; font: 500 12px var(--mono); }
.nav-lang-opt { display: grid; place-items: center; min-width: 28px; padding: 0 6px; border-radius: 4px; color: var(--mute); }
.nav-lang-opt[aria-current] { background: var(--bg-active); color: var(--ink); }

/* Interruttore del tema: luna di notte, sole di giorno (render.mjs). Cambiando tema la luna ruota, il
   ritaglio scivola via, il disco si stringe e spuntano i raggi. */
.nav-theme, .nav-menu-theme {
  place-items: center; padding: 0; border: 1px solid var(--rule); border-radius: 6px;
  background: transparent; color: var(--ink); cursor: pointer;
}
.nav-theme { display: none; width: 36px; height: 36px; }
.nav-menu-theme { display: grid; width: 48px; height: 48px; }
.nav-theme:hover, .nav-menu-theme:hover { border-color: var(--mute-2); }
.theme-ico { display: block; overflow: visible; transform: rotate(-25deg); transition: transform .55s cubic-bezier(.2, .7, .2, 1); }
.theme-ico-cut { transform: translate(6px, -5px); transition: transform .55s cubic-bezier(.2, .7, .2, 1); }
.theme-ico-core { transform-origin: 12px 12px; transition: transform .55s cubic-bezier(.2, .7, .2, 1); }
.theme-ico-rays { transform-origin: 12px 12px; transform: scale(.4); opacity: 0; transition: transform .55s cubic-bezier(.2, .7, .2, 1), opacity .3s; }
:root[data-theme="light"] .theme-ico { transform: rotate(90deg); }
:root[data-theme="light"] .theme-ico-cut { transform: translate(15px, -15px); }
:root[data-theme="light"] .theme-ico-core { transform: scale(.55); }
:root[data-theme="light"] .theme-ico-rays { transform: scale(1); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .theme-ico, .theme-ico * { transition: none; } }

/* Menu a tendina (telefoni e schermi stretti). */
.nav-menu-btn {
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  border: 1px solid var(--rule); border-radius: 6px; background: transparent; color: var(--ink);
  cursor: pointer; list-style: none; user-select: none;
}
.nav-menu-btn::-webkit-details-marker { display: none; }
.nav-menu[open] .nav-menu-btn { border-color: var(--amber); background: var(--bg-active); }
.nav-menu-close, .nav-menu[open] .nav-menu-open { display: none; }
.nav-menu[open] .nav-menu-close { display: block; }
.nav-burger { position: relative; flex: none; width: 24px; height: 18px; }
.nav-burger span {
  position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform .2s, top .2s, opacity .15s;
}
.nav-burger span:nth-child(1) { top: 0; }
.nav-burger span:nth-child(2) { top: 8px; }
.nav-burger span:nth-child(3) { top: 16px; }
.nav-menu[open] .nav-burger span:nth-child(1) { top: 8px; transform: rotate(45deg); }
.nav-menu[open] .nav-burger span:nth-child(2) { opacity: 0; }
.nav-menu[open] .nav-burger span:nth-child(3) { top: 8px; transform: rotate(-45deg); }
.nav-menu-drop { position: absolute; left: 0; right: 0; top: 100%; color: var(--ink); }
.nav-menu-scrim { position: absolute; left: 0; right: 0; top: 0; height: 100vh; background: rgb(18 18 17 / .5); }
.nav-menu-panel { position: relative; border-bottom: 1.5px solid var(--ink); background: var(--bg); }
.nav-menu-link {
  display: flex; align-items: center; gap: 16px; min-height: 60px; padding: 0 20px;
  border-bottom: 1px solid var(--rule-2); color: var(--mute);
}
.nav-menu-link[aria-current="page"] { background: var(--bg-active); color: var(--ink); }
.nav-menu-link:focus-visible { outline-offset: -2px; }
.nav-menu-key {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center;
  border: 1.5px solid var(--mute-3); border-radius: 99px; color: var(--mute-3); font: 700 11px var(--mono);
}
.nav-menu-name { flex: 1; font-weight: 600; font-size: 21px; letter-spacing: -.02em; }
.nav-menu-arrow { font: 13px var(--mono); color: var(--mute-3); }
.nav-menu-link[aria-current="page"] .nav-menu-key { border-color: var(--amber); color: var(--amber); }
.nav-menu-link[aria-current="page"] .nav-menu-arrow { color: var(--amber); }
.nav-menu-prefs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px 20px 20px; }
.nav-menu-pref { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.nav-menu-label { font: 500 10px var(--mono); color: var(--mute); letter-spacing: .1em; }
.nav-menu-seg { display: flex; height: 48px; padding: 3px; border: 1px solid var(--rule); border-radius: 6px; font: 500 14px var(--mono); }
.nav-menu-opt {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0;
  border: 0; border-radius: 4px; background: transparent; color: var(--mute); font: inherit; cursor: pointer;
}
.nav-menu-opt[aria-current] { background: var(--bg-active); color: var(--ink); }

/* Telefoni molto stretti: lingua e tema uno sotto l'altro, i pulsanti Notte/Giorno non ci starebbero. */
@container (max-width: 340px) {
  .nav-menu-prefs { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-burger span { transition: none; }
}

@container (min-width: 1000px) {
  .nav-brand { padding-right: 40px; font-size: 24px; }
  /* Le voci restano intere: a stringersi è la ricerca. */
  .nav-links { display: flex; flex: none; }
  .nav-search { flex: 0 1 240px; justify-content: flex-start; width: auto; min-width: 0; height: 36px; padding: 0 6px 0 12px; background: var(--bg-deep); color: var(--mute); }
  .nav-search:hover { border-color: var(--mute-2); }
  .nav-search[aria-expanded="true"] { border-color: var(--amber); background: var(--bg-active); }
  .nav-search-lens { width: 16px; height: 16px; color: var(--amber); }
  .nav-search-hint, .nav-search-kbd { display: block; }
  .nav-lang { display: flex; }
  .nav-theme { display: grid; }
  .nav-menu { display: none; }
}

/* Barre che scorrono in orizzontale (nav e filtri del blog): sfumatura dove c'è altro da vedere. */
.more-right { mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
.more-left { mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent); }
.more-left.more-right { mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); }

/* ---------- Footer ---------- */
.footer { border-top: 1.5px solid var(--ink); background: var(--bg-deep); color: var(--ink); font-family: var(--sans); }
.footer-main {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 40px 64px; align-items: end;
  padding: clamp(56px, 7cqi, 88px) var(--gx) clamp(40px, 5cqi, 64px);
}
.footer-title { margin-top: 16px; font-weight: 600; font-size: clamp(46px, 6.9cqi, 88px); line-height: .92; letter-spacing: -.05em; }
.footer-mail {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 32px; padding-bottom: 6px;
  border-bottom: 2px solid var(--amber); font: 500 clamp(17px, 1.7cqi, 22px) var(--mono);
}
.footer-side { display: flex; flex-direction: column; gap: 20px; }
.pgp { padding: 18px 20px; border: 1px solid var(--rule); font: 12px/1.8 var(--mono); }
.pgp-head { display: flex; justify-content: space-between; color: var(--mute); }
.pgp-copy {
  padding: 0; border: 0; border-bottom: 1px solid var(--rule); background: none;
  color: var(--ink); font: inherit; cursor: pointer;
}
.pgp-fp { margin-top: 6px; font-size: 13px; }
.socials { display: flex; gap: 8px; font: 500 13px var(--mono); }
.social { flex: 1; padding: 14px 8px; text-align: center; border: 1px solid var(--rule); }
.footer-main { border-bottom: 1px solid var(--rule-2); }
.footer-bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  padding: 20px var(--gx); font: 11px/1.6 var(--mono); color: var(--mute); letter-spacing: .04em;
}
.footer-bar-end { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.footer-privacy { color: var(--ink); border-bottom: 1px solid var(--rule); }
.footer-concept { color: var(--ink); border-bottom: 1px dashed var(--mute-2); }

/* ---------- Home ---------- */
.hero { padding: clamp(64px, 10cqi, 136px) var(--gx) clamp(48px, 7cqi, 96px); }
/* Sotto i ~310px il minimo del design (52px) scende quanto basta perché "is ‸ secure." stia su una riga. */
.hero-quote { max-width: 12em; font-weight: 500; font-size: clamp(min(52px, (100cqi - 40px) / 5.25), 9.4cqi, 120px); line-height: 1.05; letter-spacing: -.045em; }
/* "è ‸ sicuro." resta su una riga e tiene libero lo spazio sopra per "quasi" scritto a mano. */
.hero-tail { display: inline-block; padding-top: 1.05em; white-space: nowrap; }
.caret { position: relative; display: inline-block; width: 1.15em; height: .7em; }
/* Segno d'inserimento tracciato a mano: aste irregolari che arrivano quasi alle parole accanto, inclinato. */
.caret-mark {
  position: absolute; left: 50%; bottom: 0; width: .95em; height: .84em; margin-left: -.5em;
  overflow: visible; transform-origin: 43% 100%; transform: rotate(7deg);
}
.caret-mark path {
  fill: none; stroke: var(--amber); stroke-width: .06em; stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.caret-mark .caret-echo { stroke-width: .022em; opacity: .7; }
.caret-word {
  position: absolute; left: 50%; bottom: .9em;
  font-family: var(--hand); font-size: 1.05em; font-weight: 400; letter-spacing: 0; line-height: 1; white-space: nowrap;
  color: var(--amber); transform: translateX(-50%) rotate(-6deg);
}
.hero-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px 48px; margin-top: clamp(40px, 5cqi, 64px); }
.hero-intro { display: flex; flex-direction: column; gap: 16px; max-width: 600px; }
.hero-id { display: flex; flex-direction: column; gap: 6px; }
.hero-name { font-weight: 600; font-size: clamp(24px, 2.5cqi, 30px); line-height: 1.1; letter-spacing: -.025em; }
.hero-role { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 17px; line-height: 1.4; }
.hero-role-v { font-weight: 500; }
.hero-role-at { color: var(--mute); }
.hero-text { font-size: clamp(17px, 1.6cqi, 19px); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.status { display: flex; align-items: center; gap: 10px; font: 500 13px var(--mono); color: var(--amber); }
.pulse { flex: none; width: 8px; height: 8px; border-radius: 99px; background: var(--amber); animation: giva-pulse 2s infinite; }
@keyframes giva-pulse {
  0% { box-shadow: 0 0 0 0 var(--amber-60); }
  70% { box-shadow: 0 0 0 12px var(--amber-0); }
  100% { box-shadow: 0 0 0 0 var(--amber-0); }
}

.spec-sec { padding: 0 var(--gx) clamp(72px, 9cqi, 112px); }
/* Competenze: un riquadro per voce, con il quadratino ambra; poi l'etichetta delle certificazioni sopra i tesserini. */
.spec-block { display: flex; flex-direction: column; gap: 16px; margin-bottom: clamp(40px, 5cqi, 56px); }
.spec-label { margin: 0; font: 500 13px var(--mono); color: var(--mute); letter-spacing: .1em; }
.spec-label--certs { margin-bottom: 16px; }
.skills { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.skill {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 20px;
  border: 1.5px solid var(--ink); background: var(--bg);
  font-weight: 600; font-size: clamp(20px, 2.2cqi, 26px); letter-spacing: -.02em;
}
.skill-dot { flex: none; width: 10px; height: 10px; background: var(--amber); }

/* ---------- Certificazioni: tesserini al cordino (GivaBadges) ----------
   Ogni tesserino è un pendolo appeso alla barra: il cordino passa sopra la barra e il perno è al centro
   della barra (transform-origin a 3px, metà dei suoi 6px). Su schermi larghi vanno a capo e ogni riga ha
   la sua barra (ogni tesserino ne disegna un tratto fino al bordo destro, tagliato dal riquadro); sui
   telefoni stanno su una striscia che scorre, con frecce e puntini. Il movimento è in badges.js.
   overflow: clip e non hidden: il riquadro non deve scorrere da solo quando un tesserino prende il focus. */
.certs { display: flex; flex-direction: column; gap: 16px; }
.certs-vp { position: relative; overflow: hidden; overflow: clip; padding: 8px 0 36px; touch-action: pan-y; }
.certs-track { display: flex; flex-wrap: wrap; gap: 40px 24px; padding: 0 16px; }
.cert { position: relative; flex: none; width: 220px; }
.cert::before {
  content: ''; position: absolute; top: 0; left: -24px; right: -100vw; height: 6px;
  border-radius: 3px; background: var(--rule);
}
.cert-hang {
  position: relative; display: flex; flex-direction: column; align-items: center;
  transform-origin: 50% 3px; user-select: none; -webkit-user-select: none;
}
.lanyard { display: block; flex: none; overflow: visible; }
.lanyard path { fill: none; stroke: var(--amber); stroke-width: 3; stroke-linecap: round; }
.cert-clip { flex: none; width: 26px; height: 12px; margin-top: -3px; border-radius: 3px 3px 1px 1px; background: var(--mute-2); }
.cert-card {
  display: block; width: 100%; padding: 16px; border-radius: 10px;
  background: var(--ink); color: var(--bg); box-shadow: 0 16px 24px -14px rgb(0 0 0 / .55);
}
a.cert-card { padding-bottom: 0; -webkit-user-drag: none; }
a.cert-card:hover { opacity: 1; box-shadow: 0 0 0 2px var(--amber), 0 16px 24px -14px rgb(0 0 0 / .55); }
a.cert-card:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--amber), 0 16px 24px -14px rgb(0 0 0 / .55); }
.cert-top { display: flex; justify-content: space-between; font: 600 9px var(--mono); letter-spacing: .1em; }
.cert-id { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
.cert-chip { flex: none; width: 30px; height: 22px; border-radius: 4px; background: var(--amber); box-shadow: inset 0 0 0 1px var(--bg); }
.cert-name { font: 700 30px var(--mono); letter-spacing: -.04em; overflow-wrap: anywhere; }
.cert-zone {
  display: flex; flex-direction: column; gap: 3px; margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--badge-line); font: 10px/1.4 var(--mono);
}
.cert-by { color: var(--mute-4); }
.cert-verify {
  display: flex; justify-content: space-between; align-items: center; min-height: 40px; margin-top: 10px;
  border-top: 1px dashed var(--badge-line); font: 600 11px var(--mono);
}
/* Il prossimo, "in stampa": tutto tratteggiato. */
.cert--next .lanyard path { stroke: var(--mute-2); stroke-dasharray: 5 5; }
.cert--next .cert-clip { border: 1.5px dashed var(--mute-2); background: none; }
.cert--next .cert-card { border: 1.5px dashed var(--mute-2); background: var(--bg); color: var(--mute); box-shadow: none; }
.cert--next .cert-chip { border: 1.5px dashed var(--mute-2); background: none; box-shadow: none; }
.cert-printing { min-height: 32px; margin-top: 8px; font-size: 12px; line-height: 1.35; }
.cert--next .cert-zone { border-top: 1px dashed var(--rule); }

/* Telefoni: striscia che scorre, due alla volta o uno sotto i 330px (badges.js aggiunge is-single,
   is-pair, la larghezza --cert-w e la traslazione della striscia). */
.certs.is-single .certs-track {
  flex-wrap: nowrap; width: max-content; gap: 16px;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.certs.is-single .cert { width: var(--cert-w, 260px); }
.certs.is-single .cert::before { left: -100vw; }
.certs.is-pair .cert-name { font-size: 24px; }
@media (prefers-reduced-motion: reduce) { .certs.is-single .certs-track { transition: none; } }
.certs-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.certs-where { display: flex; flex-direction: column; gap: 8px; }
.certs-pos { font: 500 12px var(--mono); color: var(--ink); }
.certs-dots { display: flex; gap: 6px; }
.certs-dot { width: 6px; height: 6px; border-radius: 3px; background: var(--rule); }
.certs-dot.is-on { width: 18px; background: var(--amber); }
.certs-arrows { display: flex; gap: 8px; }
.certs-arrow {
  width: 48px; height: 48px; padding: 0; border: 1px solid var(--mute-2); border-radius: 6px;
  background: var(--bg); color: var(--ink); font: 500 18px var(--mono); cursor: pointer;
}
.certs-arrow:disabled { border-color: var(--rule-2); color: var(--mute-3); cursor: default; }

/* ---------- Home: la pianta ---------- */
.plan-sec { padding: 0 var(--gx) clamp(80px, 10cqi, 120px); }
/* Flex e non grid: se l'ultima riga resta incompleta la stanza si allarga, invece di lasciare
   una cella vuota che mostrerebbe il muro chiaro. */
.plan-grid { display: flex; flex-wrap: wrap; gap: 3px; padding: 3px; background: var(--ink-2); }
.room {
  position: relative; flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 12px;
  min-height: clamp(210px, 21cqi, 270px); padding: 24px 28px; background: var(--bg);
}
.room:hover { background: var(--bg-hover); }
.room::before { /* la porta: un varco nel muro sotto la stanza */
  content: ''; position: absolute; left: 40px; bottom: -3px; width: 56px; height: 3px; background: var(--bg);
}
.room-top { display: flex; justify-content: space-between; align-items: center; }
.room-code { font: 500 11px var(--mono); color: var(--mute); letter-spacing: .1em; }
.room-key {
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 99px;
  border: 1.5px solid var(--amber); color: var(--amber); font: 700 11px var(--mono);
}
.room-title { margin-top: 8px; font-weight: 600; font-size: clamp(30px, 3.1cqi, 40px); line-height: 1; letter-spacing: -.035em; }
.room-desc { font-size: 16px; line-height: 1.5; color: var(--mute); text-wrap: pretty; }
.room-foot { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font: 500 13px var(--mono); }
.room-meta { min-width: 0; color: var(--mute-3); }
.room-enter { flex: none; white-space: nowrap; color: var(--amber); }

/* ---------- Chi sono ---------- */
.about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 40px 64px; margin-top: clamp(36px, 5cqi, 64px); }
.portrait {
  position: relative; aspect-ratio: 4 / 5; max-height: 560px; display: flex; align-items: flex-end; padding: 16px;
  border: 1.5px solid var(--ink); background: repeating-linear-gradient(135deg, var(--stripe) 0 10px, var(--bg) 10px 20px);
  font: 12px var(--mono); color: var(--mute);
}
.portrait--photo { padding: 0; }
.portrait--photo img { width: 100%; height: 100%; object-fit: cover; }
.about-side { display: flex; flex-direction: column; gap: 28px; }
.about-text { display: flex; flex-direction: column; gap: 16px; font-size: clamp(18px, 1.7cqi, 21px); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.hl { color: var(--ink); }
.facts { border: 1.5px solid var(--ink); background: var(--bg); font-family: var(--mono); }
.fact { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--rule); }
.fact:last-child { border-bottom: 0; }
.fact dt { font-size: 10px; line-height: 20px; color: var(--mute); letter-spacing: .08em; }
.fact dd { font-size: 14px; line-height: 20px; color: var(--ink); }
.fact dd.accent { color: var(--amber); }

.dinner-sec { padding: 0 var(--gx) clamp(72px, 9cqi, 112px); }
.dinner { display: flex; flex-wrap: wrap; gap: 1px; background: var(--rule); border: 1.5px solid var(--ink); }
.dinner-talk { flex: 2 1 560px; min-width: 0; padding: clamp(28px, 4cqi, 48px) clamp(20px, 3.4cqi, 44px); background: var(--bg); }
.dinner-lines { display: flex; flex-direction: column; gap: 16px; max-width: 720px; margin-top: 28px; }
.line { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: baseline; }
.line-who { font: 500 11px var(--mono); color: var(--mute-2); letter-spacing: .06em; }
.line-text { font-weight: 500; font-size: clamp(17px, 1.7cqi, 21px); line-height: 1.3; letter-spacing: -.015em; color: var(--mute); text-wrap: pretty; }
.line--me .line-who { color: var(--amber); }
.line--me .line-text { color: var(--ink); }
.line--big .line-text { font-size: clamp(19px, 2.1cqi, 26px); }
.dinner-cv {
  flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
  padding: clamp(28px, 4cqi, 48px) clamp(20px, 3cqi, 36px); background: var(--bg);
}
.dinner-cv-label { font: 13px/1.7 var(--mono); color: var(--mute); }
.dinner-cv-text { margin-top: 8px; font: 500 17px/1.5 var(--sans); color: var(--ink); }
.compare { display: flex; flex-direction: column; gap: 14px; font: 13px var(--mono); }
.compare-row { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; }
.compare-row--first { padding-bottom: 14px; border-bottom: 1px dashed var(--rule); }
.compare-who { color: var(--mute); }
.compare-who.accent { color: var(--amber); }

.creds-sec { padding: 0 var(--gx) clamp(80px, 10cqi, 120px); }
.h2--creds { margin-bottom: 28px; }

/* ---------- Progetti ---------- */
.projects-sec { padding: 0 var(--gx) clamp(80px, 10cqi, 120px); }
.projects { display: flex; flex-wrap: wrap; gap: 3px; padding: 3px; background: var(--ink-2); }
.project { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 16px; min-height: 360px; padding: 28px; background: var(--bg); scroll-margin-top: 24px; }
.project-top { display: flex; justify-content: space-between; font: 500 11px var(--mono); letter-spacing: .08em; }
.project-code { color: var(--mute); }
.project-state { display: flex; align-items: center; gap: 6px; color: var(--mute); }
.project-state.is-active { color: var(--amber); }
.project-dot { width: 6px; height: 6px; border-radius: 99px; background: currentColor; }
.project-name { margin-top: 8px; font: 700 clamp(28px, 2.7cqi, 34px) var(--mono); letter-spacing: -.04em; }
.project-desc { font-size: 17px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; font: 12px var(--mono); }
.chips li { padding: 5px 9px; border: 1px solid var(--rule); border-radius: 4px; color: var(--mute); }
.project-links { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px; border-top: 1px solid var(--rule-2); font: 500 13px var(--mono); }
.project-gh { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--rule); border-radius: 6px; }
.project-more { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; color: var(--amber); }

/* ---------- Blog ---------- */
.blog-intro { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 48px; margin-top: 20px; }
.blog-search {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: min(100%, 340px); height: 48px; padding: 0 14px;
  border: 1px solid var(--rule); border-radius: 6px; background: var(--bg);
  font: 13px var(--mono); color: var(--mute); cursor: pointer; text-align: left;
}

.series-sec { padding: 0 var(--gx) clamp(64px, 8cqi, 104px); }
.h2--series { margin-bottom: 24px; }
.series { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.series-card {
  display: flex; flex-direction: column; min-height: 220px; padding: 24px;
  border: 1px solid var(--mute-2); background: var(--bg);
  box-shadow: 6px -6px 0 -1px var(--stripe), 6px -6px 0 0 var(--rule);
}
.series-card[href]:hover { background: var(--bg-hover); }
.series-top { display: flex; justify-content: space-between; font: 500 11px var(--mono); color: var(--mute); letter-spacing: .08em; }
.series-title { margin-top: 16px; font-size: clamp(24px, 2.2cqi, 28px); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.series-sub { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--mute); }
.sheets { margin-top: auto; padding-top: 20px; display: flex; gap: 4px; }
.sheet { flex: 1; height: 20px; border: 1px solid var(--rule); }
.sheet--done { border-color: var(--amber); background: var(--amber-18); }
.series-count { margin-top: 8px; font: 11px var(--mono); color: var(--mute); }

.posts-sec { padding: 0 var(--gx) clamp(80px, 10cqi, 120px); }
.h2--posts { margin-bottom: 20px; }
.blog-filters { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.filters { display: flex; gap: 6px; max-width: 100%; overflow-x: auto; scrollbar-width: none; font: 500 14px var(--sans); }
.filters::-webkit-scrollbar { display: none; }
.filter-chip {
  flex: none; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 12px;
  border: 1px solid var(--rule); border-radius: 6px; background: var(--bg); color: var(--ink);
  font: inherit; cursor: pointer;
}
.filter-chip[aria-pressed="true"] { border-color: var(--ink); background: var(--bg-active); }
.filter-n { font: 11px var(--mono); color: var(--mute); }
.filter-n:empty { display: none; }
.topics { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font: 12px var(--mono); }
.topics-label { margin-right: 6px; font-size: 10px; color: var(--mute-3); letter-spacing: .1em; }
.topic {
  min-height: 36px; padding: 0 10px; border: 0; border-bottom: 1.5px solid transparent;
  background: transparent; color: var(--mute); font: inherit; cursor: pointer;
}
.topic[aria-pressed="true"] { border-bottom-color: var(--amber); color: var(--ink); }

/* Simboli delle categorie: Guide ○ · Writeup ■ · Tool ◇ · Opinioni ▲ (e "Tutti" tratteggiato). */
.shape { flex: none; width: 12px; height: 12px; display: grid; place-items: center; }
.shape::before { content: ''; box-sizing: border-box; }
.shape--circle::before { width: 11px; height: 11px; border: 1.5px solid var(--amber); border-radius: 99px; }
.shape--square::before { width: 10px; height: 10px; background: var(--amber); }
.shape--diamond::before { width: 9px; height: 9px; border: 1.5px solid var(--amber); transform: rotate(45deg); }
.shape--triangle::before { width: 12px; height: 12px; background: var(--amber); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.shape--all::before { width: 10px; height: 10px; border: 1.5px dashed var(--mute); border-radius: 2px; }

.post-list { border: 1px solid var(--rule); background: var(--bg); }
.post {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 32px;
  padding: clamp(20px, 2.2cqi, 28px) clamp(16px, 2cqi, 24px);
  border-bottom: 1px solid var(--rule-2); scroll-margin-top: 24px;
}
.post[href]:hover, .post:target { background: var(--bg-hover); }
.post-cat {
  flex: 0 0 140px; display: flex; align-items: center; gap: 10px; min-height: 28px;
  font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase;
}
.post-main { flex: 1 1 380px; min-width: 0; }
.post-title { font-size: clamp(20px, 1.9cqi, 24px); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; text-wrap: pretty; }
.post-sub { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--mute); }
.post-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 12px; font: 12px var(--mono); }
.post-tags { color: var(--mute); }
.post-when { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font: 13px/1.6 var(--mono); color: var(--mute); }
.post-more {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; min-height: 60px;
  padding: 0 clamp(16px, 2cqi, 24px); border: 0; background: none;
  color: var(--amber); font: 500 16px var(--sans); cursor: pointer; text-align: left;
}
.post-more:hover { opacity: .9; }
.post-more-count { font: 13px var(--mono); }

.post-empty { padding: 28px 24px; font: 13px var(--mono); color: var(--mute); }

/* ---------- Articolo (design "Articolo", turno 9) ----------
   Intestazione sulla carta da progetto; il resto su fondo pieno sotto una riga di 1,5px. Da 1000px in su
   l'indice è una colonna fissa a destra; sotto è un riquadro richiudibile sopra il testo. */
.art-head { padding: clamp(40px, 6cqi, 88px) var(--gx) clamp(32px, 4cqi, 56px); }
.art-head > * { max-width: 1040px; }
.art-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font: 500 11px var(--mono); letter-spacing: .1em; }
.art-back { display: flex; align-items: center; min-height: 36px; color: var(--mute); }
.art-back:hover { color: var(--ink); opacity: 1; }
.art-sep { color: var(--mute-3); }
.art-cat { display: flex; align-items: center; gap: 8px; color: var(--amber); }
.art-series {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 18px; padding: 8px 12px;
  border: 1px solid var(--rule); background: var(--bg); font: 500 12px var(--mono);
}
.art-series:hover { background: var(--bg-hover); opacity: 1; }
.art-series-k { color: var(--mute); }
.art-title { margin: 20px 0 0; max-width: 15em; font-weight: 600; font-size: clamp(40px, 5.8cqi, 76px); line-height: 1; letter-spacing: -.045em; text-wrap: balance; overflow-wrap: break-word; }
.art-sub { margin: 20px 0 0; max-width: 620px; font-size: clamp(18px, 1.8cqi, 22px); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.art-meta {
  display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 28px; padding-top: 16px;
  border-top: 1px solid var(--rule); font: 13px var(--mono); color: var(--mute);
}
.art-tags { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.art-tags a, .art-other { color: var(--ink); }
.art-tags a:hover, .art-other:hover { color: var(--amber); opacity: 1; }

.art-sheet { border-top: 1.5px solid var(--ink); background: var(--bg); }
.art-cols { display: flex; justify-content: center; gap: 72px; padding: clamp(32px, 5cqi, 64px) var(--gx) clamp(64px, 8cqi, 104px); }
.art-main { flex: 1 1 0; min-width: 0; max-width: 700px; }

/* Indice: riquadro richiudibile (schermi stretti) e colonna fissa (da 1000px). */
.toc-m { margin: 16px var(--gx) 0; border: 1px solid var(--rule); }
.toc-m-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 16px;
  font: 500 12px var(--mono); letter-spacing: .08em; cursor: pointer; list-style: none;
}
.toc-m-btn::-webkit-details-marker { display: none; }
.toc-m-arrow { font-size: 14px; color: var(--amber); transition: transform .2s; }
.toc-m[open] .toc-m-arrow { transform: rotate(180deg); }
.toc-m-list { display: flex; flex-direction: column; padding: 4px 0 10px; border-top: 1px solid var(--rule-2); }
.toc-m .toc-link { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 14px; font-size: 15px; line-height: 1.3; color: var(--mute); }
.toc-m .toc-link--3 { padding-left: 30px; }
.toc-m .toc-num { font: 500 11px var(--mono); color: var(--amber); }
.art-aside { display: none; }
.toc-d { display: flex; flex-direction: column; margin-top: 12px; border-left: 1px solid var(--rule); }
.toc-d .toc-link {
  display: flex; gap: 8px; margin-left: -1px; padding: 7px 0 7px 14px; border-left: 2px solid transparent;
  font-size: 14px; line-height: 1.35; color: var(--mute);
}
.toc-d .toc-link--3 { padding-left: 30px; font-size: 13px; }
.toc-d .toc-num { flex: none; font: 500 10px/1.9 var(--mono); color: var(--amber); }
.toc-link:hover { color: var(--ink); opacity: 1; }
.toc-link[aria-current] { color: var(--ink); }
.toc-d .toc-link[aria-current] { border-left-color: var(--amber); }
.art-aside-reply {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--rule); border-radius: 6px; font: 500 12px var(--mono);
}
.art-aside-reply:hover { background: var(--bg-hover); opacity: 1; }
@container (min-width: 1000px) {
  .toc-m { display: none; }
  .art-aside {
    flex: 0 0 220px; position: sticky; top: 24px; align-self: flex-start; display: flex; flex-direction: column; gap: 24px;
    max-height: calc(100vh - 48px); overflow-y: auto;
  }
}

/* Il testo, dal Markdown (src/site/markdown.mjs). */
.prose { font-size: clamp(17px, 1.7cqi, 19px); line-height: 1.7; color: var(--ink-2); }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p { margin: 0 0 24px; text-wrap: pretty; }
.prose h2, .prose h3, .prose h4 { color: var(--ink); font-weight: 600; scroll-margin-top: 24px; overflow-wrap: break-word; }
.prose h2 {
  display: flex; align-items: baseline; gap: 14px; margin: 56px 0 20px; padding-top: 20px;
  border-top: 1px solid var(--rule); font-size: clamp(28px, 3cqi, 36px); line-height: 1.15; letter-spacing: -.03em;
}
.prose h2 > span:last-child { min-width: 0; }
.h-num { flex: none; font: 500 12px var(--mono); color: var(--amber); letter-spacing: .06em; }
.prose h3 { margin: 36px 0 14px; font-size: 22px; line-height: 1.25; letter-spacing: -.02em; }
.prose h4 { margin: 28px 0 10px; font-size: 18px; line-height: 1.3; }
.prose a { color: var(--amber); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.prose strong { font-weight: 600; color: var(--ink); }
.prose ul, .prose ol { display: flex; flex-direction: column; gap: 12px; margin: 0 0 28px; padding: 0; font-size: clamp(17px, 1.7cqi, 18px); line-height: 1.6; }
.prose ul { list-style: none; }
.prose ul > li { position: relative; padding-left: 26px; }
.prose ul > li::before { content: ''; position: absolute; left: 0; top: 11px; width: 8px; height: 8px; background: var(--amber); }
.prose ol { padding-left: 1.6em; }
.prose ol > li::marker { font: 500 .8em var(--mono); color: var(--amber); }
.prose li > :is(ul, ol) { margin: 12px 0 0; }
.prose li > p { margin: 0 0 8px; }
.prose hr { margin: 40px 0; border: 0; border-top: 1px dashed var(--rule); }
.prose :not(pre) > code {
  padding: 1px 6px; border: 1px solid var(--rule-2); border-radius: 4px; background: var(--bg-active);
  color: var(--ink); font: .86em var(--mono); overflow-wrap: anywhere;
}
.prose table { display: block; max-width: 100%; margin: 0 0 28px; overflow-x: auto; border-collapse: collapse; font-size: .9em; }
.prose th, .prose td { padding: 8px 14px; border: 1px solid var(--rule); text-align: left; vertical-align: top; }
.prose th { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }

.callout { margin: 0 0 28px; padding: 18px 20px; border: 1.5px solid var(--ink); background: var(--bg-deep); }
.callout-label { font: 500 10px var(--mono); color: var(--amber); letter-spacing: .1em; text-transform: uppercase; }
.prose .callout p { margin: 8px 0 0; font-size: 18px; line-height: 1.6; color: var(--ink); }
.callout > :is(ul, ol) { margin: 12px 0 0; color: var(--ink); }

.figure { margin: 8px 0 32px; }
.figure img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }
.figure figcaption { margin-top: 10px; font: 12px/1.6 var(--mono); color: var(--mute); }

/* Codice: sempre scuro, anche in modalità giorno (come nel design). */
.code-block { margin: 0 0 28px; border: 1px solid #3a3a36; border-radius: 6px; background: #0e0e0d; overflow: hidden; }
.code-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 0 6px 0 14px;
  border-bottom: 1px solid #2a2a27; font: 500 11px var(--mono); color: #a09f98;
}
.code-meta { display: flex; gap: 12px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.code-lang { color: var(--chalk-amber); }
.code-file { overflow: hidden; text-overflow: ellipsis; }
.code-copy { flex: none; min-height: 40px; padding: 0 10px; border: 0; background: none; color: #a09f98; font: inherit; cursor: pointer; }
.code-copy:hover, .code-copy.is-done { color: var(--chalk-amber); }
.code-copy:focus-visible { outline: 2px solid var(--chalk-amber); outline-offset: -4px; }
.prose pre.code { margin: 0; padding: 16px 18px; overflow-x: auto; font: 14px/1.65 var(--mono); color: #ecebe6; }
.code code { font: inherit; }
.tk-kw, .hljs-keyword, .hljs-selector-tag, .hljs-doctag, .hljs-section { color: var(--chalk-amber); }
.tk-flag, .hljs-built_in, .hljs-type, .hljs-attribute, .hljs-selector-id, .hljs-selector-class { color: #87c8e8; }
.tk-str, .hljs-string, .hljs-regexp, .hljs-addition, .hljs-template-tag { color: #8ed09c; }
.tk-num, .hljs-number, .hljs-literal, .hljs-symbol, .hljs-bullet, .hljs-deletion { color: #f8a49d; }
.tk-var, .hljs-variable, .hljs-template-variable, .hljs-params, .hljs-attr, .hljs-property { color: #c6b1f0; }
.tk-com, .hljs-comment, .hljs-quote { color: #6a6963; font-style: italic; }
.tk-out, .tk-op, .hljs-meta, .hljs-link, .hljs-punctuation { color: #a09f98; }
.tk-pr { color: #5c5b55; }
.hljs-title, .hljs-name { color: #ecebe6; font-weight: 700; }
@supports (color: oklch(0 0 0)) {
  .tk-flag, .hljs-built_in, .hljs-type, .hljs-attribute, .hljs-selector-id, .hljs-selector-class { color: oklch(0.8 0.08 230); }
  .tk-str, .hljs-string, .hljs-regexp, .hljs-addition, .hljs-template-tag { color: oklch(0.8 0.1 150); }
  .tk-num, .hljs-number, .hljs-literal, .hljs-symbol, .hljs-bullet, .hljs-deletion { color: oklch(0.8 0.1 25); }
  .tk-var, .hljs-variable, .hljs-template-variable, .hljs-params, .hljs-attr, .hljs-property { color: oklch(0.8 0.09 300); }
}

/* Diagrammi mermaid: disegnati nel browser (article.js) con i colori del tema; finché non sono pronti,
   o se il disegno non riesce, resta visibile il sorgente. */
.diagram { margin: 0 0 28px; border: 1px solid var(--rule); background: var(--bg); }
.diagram-head {
  display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px;
  border-bottom: 1px solid var(--rule-2); font: 500 10px var(--mono); color: var(--mute); letter-spacing: .1em;
}
/* Il disegno si stringe fino a stare tutto nella colonna (su schermi stretti mermaid ne fa una versione compatta). */
.diagram-body { overflow-x: auto; padding: 20px 16px; }
.diagram-out { display: flex; justify-content: center; }
.diagram-out:empty { display: none; }
.diagram-out svg { display: block; max-width: 100%; height: auto; }
.prose pre.diagram-src { margin: 0; font: 12px/1.6 var(--mono); color: var(--mute-3); white-space: pre; }
.diagram.is-ready .diagram-src { display: none; }
/* La pagina nascosta che disegna i diagrammi: deve avere una vera larghezza per misurare i testi. */
.mm-frame { position: fixed; top: 0; left: -10000px; width: 1200px; height: 800px; border: 0; visibility: hidden; pointer-events: none; }

/* Fine articolo: firma, serie, risposta via email, commenti, correlati. */
.art-sign {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; margin-top: 48px; padding-top: 16px;
  border-top: 1px solid var(--rule); font: 12px var(--mono); color: var(--mute);
}
.art-serie { margin-top: 40px; border: 1.5px solid var(--ink); }
.art-serie-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 14px 18px;
  border-bottom: 1px solid var(--rule); font: 500 11px var(--mono); letter-spacing: .08em; color: var(--mute);
}
.art-serie-sheets { display: flex; gap: 4px; padding: 14px 18px 0; }
.art-sheet-cell { flex: 1; height: 14px; border: 1px solid var(--rule); }
.art-sheet-cell.is-done { border-color: var(--amber); background: var(--amber-18); }
.art-sheet-cell.is-current { border-color: var(--amber); background: var(--amber); }
.art-serie-nav {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1px; margin-top: 14px;
  border-top: 1px solid var(--rule); background: var(--rule);
}
.art-serie-link { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: var(--bg); }
a.art-serie-link:hover { background: var(--bg-hover); opacity: 1; }
.art-serie-k { font: 500 11px var(--mono); color: var(--mute); }
.art-serie-t { font-weight: 600; font-size: 17px; line-height: 1.3; }
.art-serie-link.is-soon, .art-serie-link.is-soon .art-serie-k { color: var(--mute-3); }
.art-serie-soon { font: 11px var(--mono); }

.art-reply {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 40px;
  padding: 22px; border: 1px solid var(--rule); background: var(--bg-deep);
}
.art-reply-text { flex: 1 1 280px; }
.art-reply-title { margin: 0; font-weight: 600; font-size: 22px; line-height: 1.2; letter-spacing: -.02em; }
.art-reply-sub { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--mute); }
.art-reply .btn { flex: none; height: 52px; padding: 0 22px; }

.art-comments { margin-top: 56px; }
.art-comments-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px;
  padding-bottom: 14px; border-bottom: 1.5px solid var(--ink); font: 11px var(--mono); color: var(--mute);
}
.art-comments-title { margin: 0; font: 600 28px var(--sans); letter-spacing: -.03em; color: var(--ink); }
.art-comments-gate { margin-top: 20px; border: 1px solid var(--rule); }
.art-comments-text { margin: 0; padding: 14px 16px 18px; font-size: 16px; line-height: 1.5; color: var(--mute); }
.art-comments-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding: 10px 10px 10px 16px; border-top: 1px solid var(--rule-2);
}
.art-comments-note { flex: 1 1 220px; font: 12px/1.5 var(--mono); color: var(--mute); }
.art-comments-btn {
  flex: none; display: flex; align-items: center; height: 44px; padding: 0 16px; border: 1px solid var(--ink); border-radius: 6px;
  background: none; color: var(--ink); font: 600 15px var(--sans); cursor: pointer;
}
.art-comments-btn:hover { background: var(--bg-hover); }
.art-comments-frame:empty { display: none; }
.art-comments-frame { margin-top: 20px; }

.art-related { margin-top: 56px; }
.art-related .eyebrow { margin: 0; }
.art-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; margin-top: 14px; }
.art-related-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--rule); }
.art-related-card:hover { background: var(--bg-hover); opacity: 1; }
.art-related-k { display: flex; align-items: center; gap: 8px; font: 500 11px var(--mono); letter-spacing: .06em; }
.art-related-t { font-weight: 600; font-size: 18px; line-height: 1.3; letter-spacing: -.01em; }

/* ---------- Contatti ---------- */
.contact-sec { padding: clamp(56px, 8cqi, 112px) var(--gx) clamp(80px, 10cqi, 120px); }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 56px 64px; align-items: start; margin-top: 20px; }
.contact-side { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.contact-title { font-weight: 600; font-size: clamp(min(52px, 15cqi), 7.6cqi, 96px); line-height: .92; letter-spacing: -.05em; }
.contact-mail { align-self: flex-start; max-width: 100%; margin-top: 0; overflow-wrap: anywhere; }
.contact-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.btn--small { gap: 10px; height: auto; min-height: 44px; padding: 0 16px; font-size: 15px; }
.channels { border: 1.5px solid var(--ink); background: var(--bg); }
.channel {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center;
  padding: 16px 18px; border-bottom: 1px solid var(--rule);
}
.channel[href]:hover { background: var(--bg-hover); opacity: 1; }
.channel-name { font-weight: 600; font-size: 18px; letter-spacing: -.01em; }
.channel-desc { margin-top: 2px; font: 12px var(--mono); color: var(--mute); }
.pgp--channels { padding: 16px 18px; border: 0; }

.contact-box { min-width: 0; border: 1.5px solid var(--ink); background: var(--bg); }
.contact-box-head {
  display: flex; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--rule);
  font: 500 11px var(--mono); letter-spacing: .1em; color: var(--mute);
}
.contact-form { display: flex; flex-direction: column; gap: 20px; padding: 24px 20px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field legend { padding: 0; margin-bottom: 8px; }
.field-input {
  height: 52px; padding: 0 14px; border: 1px solid var(--rule); border-radius: 6px;
  background: var(--bg-deep); color: var(--ink); font: 500 16px var(--sans); outline: none;
}
.field-input--mono { font-family: var(--mono); }
.field-textarea { height: auto; padding: 14px; font: 16px/1.5 var(--sans); resize: vertical; }
.field-input::placeholder { color: var(--mute-2); }
.field-input:focus-visible { border-color: var(--amber); }
.reasons { display: flex; flex-wrap: wrap; gap: 6px; }
.reason { position: relative; }
.reason input { position: absolute; opacity: 0; pointer-events: none; }
.reason span {
  display: flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--rule); border-radius: 99px;
  font: 500 14px var(--sans); cursor: pointer;
}
.reason input:checked + span { border-color: var(--amber); background: var(--amber-18); }
.reason input:focus-visible + span { outline: 2px solid var(--amber); outline-offset: 2px; }
.form-send { display: flex; flex-wrap: wrap; gap: 10px; }
.send-btn--tall { height: 54px; }
.form-note { font: 12px/1.6 var(--mono); color: var(--mute); }
.form-note a, .board-privacy a { color: var(--ink); border-bottom: 1px solid var(--rule); }
.contact-form .board-status { margin-top: 0; }
.contact-sent { display: flex; flex-direction: column; gap: 16px; padding: 40px 20px; }
.contact-sent-label { font: 500 12px var(--mono); color: var(--amber); letter-spacing: .08em; }
.contact-sent-text { font-weight: 600; font-size: clamp(26px, 2.6cqi, 34px); line-height: 1.15; letter-spacing: -.03em; }
.contact-sent .tool-text { align-self: flex-start; font: 500 13px var(--mono); }

/* ---------- Concept (TAV. 00) ----------
   La pianta è una tavola 16:9 larga almeno 760px: sui telefoni il riquadro scorre di lato. Stanze, porte,
   percorso e note a mano sono posizionati in percentuale, come nel design. */
.page-head--concept { padding-bottom: clamp(48px, 6cqi, 80px); }
.page-head--concept .page-title { max-width: 11em; font-size: clamp(min(48px, 13cqi), 7.6cqi, 96px); line-height: .98; text-wrap: balance; }
.lede--concept { margin-top: 24px; max-width: 600px; }
.concept-sec { padding: 0 var(--gx) clamp(64px, 8cqi, 104px); }
.concept-sec--end { display: flex; justify-content: flex-end; padding-bottom: clamp(80px, 10cqi, 120px); }
.h2--concept { margin-bottom: 24px; }

.cp-scroll { overflow-x: auto; scrollbar-width: thin; border: 1px solid var(--rule); background: var(--bg); }
.cp-scroll:focus-visible { outline-offset: -2px; }
.cp-plan { position: relative; min-width: 760px; aspect-ratio: 16 / 9; margin: clamp(16px, 2.4cqi, 32px); border: 5px solid var(--ink); }
.cp-room {
  position: absolute; display: flex; flex-direction: column; gap: 4px; padding: 16px;
  border: 1.5px solid var(--ink); color: var(--ink);
}
.cp-room:hover { opacity: 1; background-color: var(--bg-hover); }
.cp-room:focus-visible { outline-offset: -4px; }
.cp-room--a { left: 0; top: 0; width: 26%; height: 62%; }
.cp-room--in { left: 0; top: 62%; width: 26%; height: 38%; justify-content: flex-end; }
.cp-room--b { left: 26%; top: 0; width: 24%; height: 44%; }
.cp-room--c { left: 50%; top: 0; width: 24%; height: 44%; }
.cp-room--e {
  left: 26%; top: 62%; width: 48%; height: 38%; justify-content: flex-end;
  background-image: repeating-linear-gradient(135deg, transparent 0 10px, var(--bg-active) 10px 11px);
}
.cp-room--d { left: 74%; top: 0; width: 26%; height: 100%; justify-content: flex-end; border: 6px double var(--ink); }
.cp-key {
  flex: none; width: 26px; height: 26px; display: grid; place-items: center;
  border: 1.5px solid var(--amber); border-radius: 99px; background: var(--bg); color: var(--amber); font: 700 11px var(--mono);
}
.cp-key--small { width: 20px; height: 20px; font-size: 9px; }
.cp-name { margin-top: 6px; font-weight: 600; font-size: clamp(18px, 1.8cqi, 24px); letter-spacing: -.02em; }
.cp-page { font: 11px var(--mono); color: var(--mute); }
.cp-corridor {
  position: absolute; left: 26%; top: 44%; width: 48%; height: 18%; display: flex; justify-content: flex-end;
  padding: 6px 12px; font: 10px var(--mono); color: var(--mute-3); letter-spacing: .12em;
}
.cp-north { position: absolute; top: 12px; right: 14px; font: 500 11px var(--mono); color: var(--mute); }
.cp-dial {
  position: absolute; left: 87%; top: 30%; width: clamp(64px, 8cqi, 96px); aspect-ratio: 1; transform: translate(-50%, -50%);
  display: grid; place-items: center; border: 3px solid var(--ink); border-radius: 99px;
}
.cp-dial span {
  width: 45%; height: 45%; border: 1.5px solid var(--ink); border-radius: 99px;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 1.5px 100% no-repeat;
}
/* Porte: aperture nei muri, del colore del foglio. */
.cp-door { position: absolute; background: var(--bg); }
.cp-door--1 { left: calc(21% - 22px); bottom: -5px; width: 44px; height: 5px; }
.cp-door--2 { left: calc(21% - 20px); top: calc(62% - 2px); width: 40px; height: 4px; }
.cp-door--3 { left: calc(26% - 2px); top: calc(53% - 20px); width: 4px; height: 40px; }
.cp-door--4 { left: calc(38% - 20px); top: calc(44% - 2px); width: 40px; height: 4px; }
.cp-door--5 { left: calc(62% - 20px); top: calc(44% - 2px); width: 40px; height: 4px; }
.cp-door--6 { left: calc(50% - 20px); top: calc(62% - 2px); width: 40px; height: 4px; }
.cp-door--7 { left: calc(74% - 1px); top: calc(53% - 22px); width: 8px; height: 44px; }
.cp-paths { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cp-paths path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.cp-route { stroke: var(--amber); stroke-width: 2.5; stroke-dasharray: 7 6; }
.cp-ways { stroke: var(--mute-2); stroke-width: 1.5; stroke-dasharray: 2 5; }
.cp-step {
  position: absolute; width: 28px; height: 28px; display: grid; place-items: center; transform: translate(-50%, -50%);
  border-radius: 99px; background: var(--amber); color: var(--bg); font: 700 12px var(--mono); pointer-events: none;
}
.cp-step--1 { left: 21%; top: 86%; }
.cp-step--2 { left: 21%; top: 36%; }
.cp-step--3 { left: 87%; top: 44%; }
/* Note a mano sotto la pianta: il segno sulla pianta (1, 1→3, 3, E) e cosa vuol dire. */
.cp-notes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1px;
  margin-top: 12px; background: var(--rule); border: 1px solid var(--rule);
}
.cp-notes-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--bg); }
.cp-notes-key {
  flex: none; min-width: 28px; height: 28px; padding: 0 6px; display: grid; place-items: center;
  border-radius: 99px; background: var(--amber); color: var(--bg); font: 700 12px var(--mono);
}
.cp-notes-key--room { width: 28px; padding: 0; border: 1.5px solid var(--amber); background: none; color: var(--amber); font-size: 11px; }
.cp-notes-text { font: clamp(26px, 2.6cqi, 32px)/1 var(--hand); color: var(--amber); }
.cp-cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; margin-top: 10px; font: 11px var(--mono); color: var(--mute); }

.legend {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1px;
  background: var(--rule); border: 1.5px solid var(--ink);
}
.legend-item { display: flex; gap: 18px; padding: 22px; background: var(--bg); }
.legend-icon { flex: none; width: 56px; height: 44px; display: grid; place-items: center; }
.legend-icon--1 { border: 1.5px solid var(--ink); }
.legend-dash { width: 52px; border-top: 2.5px dashed var(--amber); }
.legend-icon--3 { font: 34px/1 var(--hand); color: var(--amber); white-space: nowrap; }
/* "almost" a 34px è largo 73px: in inglese si rimpicciolisce per stare nei 56px della colonna. */
html[lang="en"] .legend-icon--3 { font-size: 26px; }
.legend-badge {
  position: relative; width: 34px; height: 42px; display: flex; justify-content: center; padding-top: 10px;
  border-radius: 5px; background: var(--ink);
}
.legend-badge::before {
  content: ''; position: absolute; top: 4px; left: 50%; width: 12px; height: 3px; margin-left: -6px; border-radius: 99px; background: var(--bg);
}
.legend-badge span { width: 14px; height: 10px; border-radius: 2px; background: var(--amber); }
.legend-icon--5 { display: flex; align-items: center; justify-content: center; gap: 2px; }
.legend-icon--6 {
  border: 1px solid var(--rule);
  background-image: linear-gradient(var(--rule-2) 1px, transparent 1px), linear-gradient(90deg, var(--rule-2) 1px, transparent 1px);
  background-size: 8px 8px;
}
.legend-t { font-weight: 600; font-size: 18px; }
.legend-d { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--mute); }

.titleblock {
  width: min(100%, 680px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 1px;
  background: var(--rule); border: 1.5px solid var(--ink); font-family: var(--mono);
}
.titleblock > div { padding: 12px 14px; background: var(--bg); }
.titleblock > div:last-child { grid-column: 1 / -1; }
.titleblock dt { font-size: 9px; color: var(--mute); letter-spacing: .1em; }
.titleblock dd { margin-top: 4px; font-size: 13px; font-weight: 500; }

/* ---------- Privacy ---------- */
.page-head--privacy { padding-bottom: clamp(40px, 5cqi, 56px); }
.lede--wide { max-width: 620px; }
.privacy-date { margin-top: 16px; font: 12px var(--mono); color: var(--mute); }
.privacy-sec { padding: 0 var(--gx) clamp(80px, 10cqi, 120px); }
.privacy { max-width: 880px; border: 1.5px solid var(--ink); background: var(--bg); }
.privacy-row { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 24px clamp(18px, 2.4cqi, 28px); border-bottom: 1px solid var(--rule); }
.privacy-row:last-child { border-bottom: 0; }
.privacy-n { flex: 0 0 40px; font: 500 12px var(--mono); color: var(--amber); }
.privacy-body { flex: 1 1 300px; min-width: 0; overflow-wrap: anywhere; }
.privacy-h { font-weight: 600; font-size: 22px; letter-spacing: -.02em; }
.privacy-body p { margin-top: 8px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.privacy-link { color: var(--ink); border-bottom: 1px solid var(--amber); }
.privacy-table { margin: 14px 0 0; border: 1px solid var(--rule); }
.privacy-table > div { display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 14px 16px; border-bottom: 1px solid var(--rule-2); }
.privacy-table > div:last-child { border-bottom: 0; }
.privacy-table dt { flex: 0 0 160px; font: 500 12px var(--mono); }
.privacy-table dd { flex: 1 1 240px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.privacy-times {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 1px;
  margin-top: 14px; background: var(--rule); border: 1px solid var(--rule);
}
.privacy-times > div { padding: 14px 16px; background: var(--bg); }
.privacy-time { margin-top: 6px; font-weight: 600; font-size: 20px; }

/* ---------- Lavagna ---------- */
.hand-segno { font-family: var(--hand); font-weight: 400; font-size: 1.15em; letter-spacing: 0; color: var(--amber); }

.board-sec { padding: 0 var(--gx) clamp(64px, 8cqi, 104px); }
.board { border: 1.5px solid var(--ink); background: var(--bg); }
.board-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 10px 12px; border-bottom: 1px solid var(--rule); }
.tool-group { display: flex; gap: 4px; }
.tool-group--text { font: 500 12px var(--mono); }
.tool-group--end { margin-left: auto; }
.tool-sep { width: 1px; height: 28px; background: var(--rule); }
.tool-btn {
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--rule); border-radius: 6px; background: var(--bg); cursor: pointer;
}
.tool-btn[aria-pressed="true"] { border-color: var(--amber); }
.swatch { width: 20px; height: 20px; border-radius: 99px; }
.swatch--0 { background: var(--chalk); }
.swatch--1 { background: var(--chalk-amber); }
.swatch--2 { background: var(--cyan); }
.swatch--3 { background: var(--pink); }
.dot { border-radius: 99px; background: var(--ink); }
.dot--0 { width: 6px; height: 6px; }
.dot--1 { width: 11px; height: 11px; }
.dot--2 { width: 18px; height: 18px; }
.tool-text {
  height: 44px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 6px;
  background: var(--bg); color: var(--ink); font: inherit; cursor: pointer;
}
.tool-text[aria-pressed="true"] { border-color: var(--amber); }
.tool-text:disabled { color: var(--mute-3); cursor: default; }
/* Con la gomma, le misure diventano anelli: la gomma ha le sue tre misure, separate da quelle della penna. */
.board.is-erasing .dot { background: none; box-shadow: inset 0 0 0 1.5px var(--ink); }
.board.is-erasing .dot--0 { width: 8px; height: 8px; }
.board.is-erasing .dot--1 { width: 14px; height: 14px; }
.board.is-erasing .dot--2 { width: 22px; height: 22px; }

.board-canvas-wrap { position: relative; }
.board-canvas {
  display: block; width: 100%; height: clamp(300px, 44cqi, 540px);
  touch-action: none; cursor: crosshair;
  background-color: var(--draw-bg); background-image: radial-gradient(var(--draw-dots) 1px, transparent 1px); background-size: 24px 24px;
}
.board-empty {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  font: clamp(32px, 4cqi, 52px)/1 var(--hand); color: var(--mute-3);
}
.board.has-ink .board-empty { display: none; }
.board-label { position: absolute; left: 12px; bottom: 10px; font: 10px var(--mono); color: var(--mute-3); letter-spacing: .08em; pointer-events: none; }
.board-hint { position: absolute; right: 12px; bottom: 10px; font: 10px var(--mono); color: var(--mute-3); letter-spacing: .04em; pointer-events: none; }
@media (pointer: coarse) { .board-hint { display: none; } }
/* Cerchio grande quanto il tratto o la gomma, al posto del cursore (lavagna.js lo muove e lo colora). */
.board-cursor {
  position: absolute; left: 0; top: 0; display: none; box-sizing: border-box; border-radius: 50%;
  border: 1.5px solid currentColor; color: var(--chalk); box-shadow: 0 0 0 1px rgb(0 0 0 / .45);
  pointer-events: none; will-change: transform;
}
.board.is-erasing .board-cursor { background: rgb(236 235 230 / .1); }
.board-canvas-wrap.has-cursor .board-cursor { display: block; }
.board-canvas-wrap.has-cursor .board-canvas { cursor: none; }

.board-send { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px; border-top: 1px solid var(--rule); }
.name-input {
  flex: 1 1 240px; min-width: 0; height: 52px; padding: 0 14px;
  border: 1px solid var(--rule); border-radius: 6px; background: var(--bg-deep); color: var(--ink);
  font: 500 15px var(--mono); outline: none;
}
.name-input::placeholder { color: var(--mute-2); }
.name-input:focus-visible { border-color: var(--amber); }
.name-input[aria-invalid="true"] { border-color: var(--pink); }
.send-btn {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 24px;
  border: 0; border-radius: 6px; background: var(--mute-2); color: var(--on-amber);
  font: 600 16px var(--sans); cursor: pointer;
}
.board.has-ink .send-btn, .send-btn.is-on { background: var(--amber); }
.send-btn[aria-busy="true"] { cursor: progress; opacity: .7; }

.board-status { margin-top: 12px; font: 13px var(--mono); color: var(--amber); }
.board-status:empty { display: none; }
.board-status.is-error { color: var(--pink); }
.board-privacy { padding: 12px 14px; border-top: 1px solid var(--rule-2); font: 12px/1.6 var(--mono); color: var(--mute); text-wrap: pretty; }

/* Cloudflare Turnstile: una riga di stato a tutta larghezza sotto nome e pulsante (niente finte caselle).
   Il widget ufficiale ha uno spazio suo sotto la riga e compare solo se Cloudflare chiede un'interazione. */
.ts { flex: 1 0 100%; order: 3; min-width: 0; }
.ts-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 20px; font: 12px/1.5 var(--mono); color: var(--mute); }
.ts-dot { flex: none; width: 7px; height: 7px; border-radius: 99px; border: 1.5px solid var(--mute-2); }
.ts[data-state="running"] .ts-dot, .ts[data-state="interactive"] .ts-dot { border-color: var(--amber); }
.ts[data-state="ok"] .ts-dot { border-color: var(--amber); background: var(--amber); }
.ts[data-state="interactive"] .ts-status { color: var(--ink); }
.ts[data-state="error"] .ts-status { color: var(--pink); }
.ts[data-state="error"] .ts-dot { border-color: var(--pink); }
.ts-retry { padding: 0; border: 0; border-bottom: 1px solid currentColor; background: none; color: var(--ink); font: inherit; cursor: pointer; }
.ts-widget { max-width: 100%; }
.ts-widget:empty { display: none; }
.ts-widget:not(:empty) { margin-top: 10px; }

.wall-state { display: flex; align-items: center; gap: 12px; }
/* Il disegno sul muro è un pulsante che apre l'evidenza a schermo intero. */
.wall-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.wall-open:focus-visible { outline-offset: -2px; }
/* Evidenza a schermo intero: sempre scura come la tela, qualunque sia il tema. */
.ev-view {
  --bg: #121211; --bg-active: #1f1f1d; --ink: #ecebe6; --mute: #a09f98; --mute-3: #5c5b55; --rule: #3a3a36; --rule-2: #2a2a27;
  --amber: var(--chalk-amber);
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: var(--draw-bg); color: var(--ink); font-family: var(--sans);
}
.ev-view[open] { display: flex; flex-direction: column; }
.ev-view::backdrop { background: rgb(10 10 9 / .9); }
.ev-view-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px var(--gx-nav);
  border-bottom: 1px solid var(--rule); font: 13px var(--mono);
}
.ev-view-title { flex: 1 1 200px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-view-date { color: var(--mute); }
.ev-view-tools { display: flex; gap: 6px; }
.ev-view-tools .tool-text:disabled { color: var(--mute-3); cursor: default; }
.ev-view-canvas {
  flex: 1; min-height: 0; display: block; width: 100%; touch-action: pan-y;
  background-color: var(--draw-bg); background-image: radial-gradient(var(--draw-dots) 1px, transparent 1px); background-size: 24px 24px;
}
.wall-sec { padding: 0 var(--gx) clamp(80px, 10cqi, 120px); }
.wall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.wall-item { display: flex; flex-direction: column; border: 1px solid var(--mute-2); background: var(--bg); }
.wall-canvas { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--draw-bg); border-bottom: 1px solid var(--rule-2); }
.wall-meta { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; font: 12px var(--mono); }
.wall-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wall-date { color: var(--mute); font-size: 11px; }
.wall-free {
  display: grid; place-items: center; aspect-ratio: 16 / 10;
  border: 1.5px dashed var(--rule); font: 11px var(--mono); color: var(--mute-3); letter-spacing: .08em;
}

/* ---------- Ricerca (GivaSearch) ----------
   Pannello sotto la nav: velo sul resto della pagina, schede, risultati raggruppati, tasti in fondo. */
.search { position: absolute; left: 0; right: 0; top: 100%; z-index: 1; padding: 6px var(--gx-nav) 0; }
.search-scrim { position: absolute; left: 0; right: 0; top: 0; height: 100vh; background: rgb(18 18 17 / .45); }
.search-panel {
  position: relative; transform-origin: 50% 0;
  border: 1.5px solid var(--ink); background: var(--bg); color: var(--ink); font-family: var(--sans);
  box-shadow: 0 30px 60px -24px rgb(0 0 0 / .7);
}
.search-head { display: flex; align-items: center; gap: 12px; padding: 0 10px 0 18px; border-bottom: 1px solid var(--rule); }
.search-glyph { font-size: 20px; color: var(--amber); }
.search-input {
  flex: 1; min-width: 0; height: 52px; padding: 0; border: 0; background: transparent; color: var(--ink);
  font: 500 clamp(17px, 1.8cqi, 20px) var(--sans); outline: none; appearance: none;
}
.search-input::placeholder { color: var(--mute); opacity: 1; }
.search-input::-webkit-search-cancel-button { appearance: none; }
.search-esc {
  flex: none; min-width: 44px; height: 44px; padding: 0 10px;
  border: 1px solid var(--rule); border-radius: 6px; background: transparent; color: var(--mute);
  font: 500 11px var(--mono); cursor: pointer;
}
.search-tabs { display: flex; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--rule-2); overflow-x: auto; scrollbar-width: none; }
.search-tabs::-webkit-scrollbar { display: none; }
.search-tab {
  flex: none; display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px;
  border: 1px solid var(--rule); border-radius: 99px; background: transparent; color: var(--ink);
  font: 500 13px var(--sans); cursor: pointer;
}
.search-tab[aria-pressed="true"] { border-color: var(--ink); background: var(--bg-active); }
.search-tab-n { font: 11px var(--mono); color: var(--mute); }
.search-tab-n:empty { display: none; }
.search-body { max-height: min(56vh, 460px); overflow-y: auto; overscroll-behavior: contain; }
.search-topics { display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 6px; }
.search-topic-list { display: flex; flex-wrap: wrap; gap: 6px; }
.search-topic {
  min-height: 40px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 6px;
  background: transparent; color: var(--ink); font: 13px var(--mono); cursor: pointer;
}
.search-topic:hover { border-color: var(--amber); }
.search-group { padding: 8px 0 4px; }
.search-group-head { display: flex; justify-content: space-between; padding: 10px 18px 6px; font: 500 10px var(--mono); color: var(--mute); letter-spacing: .1em; }
.search-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 14px; align-items: center; margin: 0 6px; padding: 10px 12px; border-radius: 6px; }
.search-row.is-sel { background: var(--bg-active); opacity: 1; }
.search-icon {
  width: 28px; height: 28px; display: grid; place-items: center;
  border: 1px solid var(--rule); border-radius: 4px; font: 700 11px var(--mono); color: var(--amber);
}
.search-row.is-sel .search-icon { border-color: var(--amber); }
.search-row-body { min-width: 0; }
.search-row-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 16px; line-height: 1.3; letter-spacing: -.01em; }
.search-row-title--mono { font-family: var(--mono); }
.search-hit { color: var(--amber); text-decoration: underline; text-underline-offset: 3px; }
.search-row-meta { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 12px var(--mono); color: var(--mute); }
.search-enter { font: 500 13px var(--mono); color: transparent; }
.search-row.is-sel .search-enter { color: var(--amber); }
.search-none { padding: 28px 18px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.search-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 12px 18px;
  border-top: 1px solid var(--rule); font: 11px var(--mono); color: var(--mute);
}
.search-keys { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.search-keys b { color: var(--ink); }
@container (min-width: 1000px) {
  .search-panel { max-width: 620px; margin-left: auto; transform-origin: 85% 0; }
}

/* ---------- Schermi stretti ---------- */
@container (max-width: 600px) {
  /* Data e durata dell'articolo in riga quando la colonna va a capo. */
  .post-when { flex-direction: row; align-items: baseline; gap: 12px; }
  /* I separatori della barra strumenti finirebbero a fine riga, da soli. */
  .tool-sep { display: none; }
  .board-hint { display: none; }
}
@container (max-width: 360px) {
  /* Tabella di "Chi sono": etichetta sopra il valore, la colonna da 112px non ci sta. */
  .fact { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .pulse { animation: none; }
}