/* =====================================================================
   Vitruvian Perspective · stile
   Nessun backdrop-filter in tutto il sito: i pannelli sono scuri e
   semitrasparenti. Animazioni CSS solo lente e morbide.
   ===================================================================== */
:root {
  color-scheme: dark;
  --void: #000;
  --ink: #ece6da;
  --muted: #8d877d;
  --line: rgba(236,230,218,.16);
  --abyss: #5fc4ff;
  --ember: #ff6a2b;
  --ember-2: #ffb347;
  --core: #f3c96b;
  --accent: #9fd8b8;
  --f-display: "Syne", "Arial Black", system-ui, sans-serif;
  --f-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --f-hand: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; overflow: hidden; background: var(--void); color: var(--ink); font: 400 16px/1.6 var(--f-body); -webkit-font-smoothing: antialiased; touch-action: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- la scena ---------- */
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#flatimg { position: fixed; z-index: 0; max-width: none; }
.veil { position: fixed; inset: 0; pointer-events: none; z-index: 4; background:
  linear-gradient(180deg, rgba(0,0,0,.55) 0, rgba(0,0,0,0) 14%, rgba(0,0,0,0) 80%, rgba(0,0,0,.45) 100%),
  linear-gradient(90deg, rgba(0,0,0,.45) 0, rgba(0,0,0,0) 22%); }

/* ---------- porte ---------- */
#nodes { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
.node { position: absolute; left: 0; top: 0; width: 64px; height: 64px; margin: -32px 0 0 -32px; border: 0; padding: 0; background: none; border-radius: 50%; cursor: pointer; pointer-events: auto; }
.node span { position: absolute; left: 50%; bottom: calc(100% - 2px); translate: -50% 4px; white-space: nowrap; font: italic 500 15px/1 var(--f-hand); letter-spacing: .02em; color: var(--c);
  text-shadow: 0 0 12px rgba(0,0,0,.9); opacity: 0; transition: opacity .4s, translate .4s; pointer-events: none; }
.node:hover span, .node:focus-visible span { opacity: 1; translate: -50% 0; }
.node:focus-visible { outline: 1px solid var(--c); outline-offset: -10px; }
.node.wall { width: 96px; height: 96px; margin: -48px 0 0 -48px; }
/* la stella dei Sapionauti che galleggia sul vortice dei libri: dondola piano, come su un'onda */
.floater { position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: -34px 0 0 -17px; pointer-events: none; }
.floater img { width: 100%; height: 100%; display: block; mix-blend-mode: screen; opacity: .92; filter: drop-shadow(0 0 6px rgba(255,214,90,.35));
  -webkit-mask-image: linear-gradient(180deg, #000 55%, rgba(0,0,0,.15) 100%); mask-image: linear-gradient(180deg, #000 55%, rgba(0,0,0,.15) 100%);
  animation: bob 5.2s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-6px) rotate(4deg); } }
body.away #nodes, body.away .road, body.away .hint, body.away #stick, body.away .way { opacity: 0; pointer-events: none; }

/* ---------- testata ---------- */
.bar { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: calc(16px + env(safe-area-inset-top, 0px)) 20px 0; pointer-events: none; }
.bar > * { pointer-events: auto; }
.mark { display: grid; gap: 3px; text-decoration: none; }
.mark b { font: 800 14px/1 var(--f-display); letter-spacing: .26em; }
.mark .pre { margin-top: 4px; font: 500 8.5px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 52%, transparent); }
.idx-btn { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; padding: 10px 12px; border-radius: 99px; border: 1px solid var(--line); background: rgba(0,0,0,.45); font: 500 11px/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); transition: border-color .3s; }
.idx-btn:hover, .idx-btn[aria-expanded="true"] { border-color: var(--accent); }
.idx-btn i { width: 14px; height: 14px; display: grid; gap: 3px; align-content: center; }
.idx-btn i::before, .idx-btn i::after { content: ""; height: 1px; background: currentColor; }

/* ---------- menu ---------- */
.index { position: fixed; z-index: 30; top: calc(62px + env(safe-area-inset-top, 0px)); right: 20px; width: min(152px, calc(100vw - 40px)); max-height: calc(100vh - 90px); overflow-y: auto;
  background: rgba(4,4,4,.26); border: 1px solid rgba(236,230,218,.12); padding: 4px 0; text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 0 10px rgba(0,0,0,.8); }
.index button { display: flex; width: 100%; justify-content: space-between; gap: 12px; align-items: center; padding: 11px 18px; border: 0; background: none; cursor: pointer; text-align: left; font: 500 15px/1.2 var(--f-body); transition: background .2s, color .2s; }
.index button:hover { background: rgba(255,255,255,.05); }
.index .s button:hover { color: var(--abyss); }
.index .p button:hover { color: var(--ember-2); }
.index .k button:hover { color: var(--core); }
.index .grp + .grp { border-top: 1px solid rgba(236,230,218,.12); }
.index .g { font: 700 14px/1.2 var(--f-display); letter-spacing: .04em; padding: 11px 12px; justify-content: flex-start; gap: 8px; }
.index .g b { width: 10px; font: 400 14px/1 var(--f-mono); color: var(--muted); }
.index .g .wip { margin-left: auto; font: 500 8px/1 var(--f-mono); letter-spacing: .14em; color: var(--muted); border: 1px solid rgba(236,230,218,.22); padding: 3px 4px; }
.index .sub { display: grid; padding: 0 0 8px; margin-left: 17px; border-left: 1px solid rgba(236,230,218,.14); }
.index .grp.closed > .sub { display: none; }
.index .grp:not(.all) .more-i, .index .grp:not(.all) .less { display: none; }
.index .grp.all .more { display: none; }
.index .sub button { justify-content: flex-start; gap: 0; font: 500 12.5px/1.2 var(--f-body); padding: 6px 10px; color: color-mix(in srgb, var(--ink) 82%, transparent); }
.index .sub button::before { content: "–"; color: var(--muted); margin-right: 6px; }
.index .sub button.more, .index .sub button.less { font: 500 10px/1 var(--f-mono); letter-spacing: .1em; color: var(--muted); padding-top: 8px; }
.index .sub button.more::before, .index .sub button.less::before { content: none; }
.index .sub a { display: grid; gap: 2px; padding: 6px 10px; text-decoration: none; color: var(--ink); font: 500 11px/1.25 var(--f-mono); overflow-wrap: normal; word-break: normal; }
.index .sub a span { font: 500 8.5px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.index .sub a:hover { background: rgba(255,255,255,.05); color: var(--core); }
@media (max-width: 640px) {
  .index { top: calc(54px + env(safe-area-inset-top, 0px)); right: 14px; width: min(128px, calc(100vw - 28px)); padding: 2px 0; }
  .index .g { font-size: 11px; padding: 7px 9px; gap: 6px; letter-spacing: .03em; }
  .index .g b { width: 8px; font-size: 11px; }
  .index .g .wip { font-size: 7px; padding: 2px 3px; }
  .index .sub { margin-left: 13px; padding-bottom: 5px; }
  .index .sub button { font-size: 10.5px; padding: 4px 8px; }
  .index .sub button::before { margin-right: 4px; }
  .index .sub button.more, .index .sub button.less { font-size: 8.5px; padding-top: 5px; }
  .index .sub a { font-size: 9.5px; padding: 4px 8px; }
  .index .sub a span { font-size: 7px; }
}

/* ---------- road map, levetta, segna-via, motto ---------- */
.road { position: fixed; z-index: 8; left: 18px; top: 50%; translate: 0 -50%; display: flex; flex-direction: column-reverse; gap: 9px; transition: opacity .6s; opacity: .8; }
.road .ch { position: relative; display: grid; grid-template-columns: auto auto; align-items: center; gap: 8px; }
.road .step { border: 0; background: none; padding: 4px 0; cursor: pointer; font: 500 9px/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.road .step::before { content: ""; width: 10px; height: 1px; background: currentColor; }
.road .ch.here .step { color: var(--ink); }
.road .ch.here .step::before { width: 18px; background: var(--ink); }
.road .step:disabled { cursor: default; }
.road .ch:not(.here) .step:hover { color: var(--ink); }
.road .par { display: flex; gap: 6px; }
.road .par button { width: 6px; height: 6px; padding: 0; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--c) 80%, transparent); background: transparent; cursor: pointer; transition: background .3s, transform .3s; }
.road .par button:hover, .road .par button:focus-visible { background: var(--c); transform: scale(1.25); outline: none; }
.road .par button.seen { background: color-mix(in srgb, var(--c) 55%, transparent); }
@media (max-width: 640px) { .road { left: 12px; top: auto; bottom: calc(26px + env(safe-area-inset-bottom, 0px)); translate: 0 0; gap: 10px; } .road .step span { display: none; } }

#stick { position: fixed; z-index: 8; left: 50%; bottom: calc(46px + env(safe-area-inset-bottom, 0px)); translate: -50% 0; width: 58px; height: 58px; border-radius: 50%; border: 1px solid rgba(236,230,218,.28); background: radial-gradient(circle, rgba(0,0,0,.15), rgba(0,0,0,.5)); touch-action: none; cursor: grab; transition: opacity .6s; }
#stick i { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: rgba(236,230,218,.75); box-shadow: 0 0 12px rgba(236,230,218,.35); pointer-events: none; }

/* il lumino riporta all'approdo; tremola appena, come una fiamma (niente battiti) */
.way { position: fixed; z-index: 8; right: 18px; bottom: calc(78px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 8px; transition: opacity .6s; }
.way .arrows { display: flex; flex-direction: column; gap: 6px; }
.way .arrows button { width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 1px solid rgba(236,230,218,.26); background: rgba(0,0,0,.32); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: border-color .3s, opacity .3s; touch-action: manipulation; }
.way .arrows button:hover:not(:disabled) { border-color: var(--ink); }
.way .arrows button:disabled { opacity: .3; cursor: default; }
.lumino { position: relative; flex: none; width: 66px; height: 80px; padding: 0; border: 0; background: radial-gradient(closest-side, rgba(255,200,110,.34), rgba(255,160,60,.12) 55%, transparent); border-radius: 50%; cursor: pointer; transition: opacity .6s, filter .4s; }
.lumino svg { width: 44px; height: 62px; display: block; margin: 8px auto 0; overflow: visible; filter: drop-shadow(0 0 6px rgba(255,190,90,.75)) drop-shadow(0 0 14px rgba(255,140,40,.4)); }
.lumino .fl { transform-origin: 12px 26px; animation: flame 4.3s ease-in-out infinite; }
@keyframes flame { 0%,100% { transform: scale(1,1) skewX(0deg); opacity: .95; } 23% { transform: scale(.97,1.04) skewX(-2deg); opacity: 1; } 51% { transform: scale(1.02,.97) skewX(1.5deg); opacity: .9; } 77% { transform: scale(.99,1.02) skewX(-1deg); opacity: .97; } }
.lumino:hover, .lumino:focus-visible { filter: brightness(1.25); outline: none; }
.lumino.home { opacity: .55; }
@media (max-width: 640px) { .way { right: 8px; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } }

.hint { position: fixed; z-index: 8; bottom: calc(26px + env(safe-area-inset-bottom, 0px)); transition: opacity 1.2s; pointer-events: none; }
.hint.motto { right: 22px; text-align: right; font: italic 500 16px/1.25 var(--f-hand); letter-spacing: .02em; color: color-mix(in srgb, var(--ink) 66%, transparent); max-width: 60vw; }
@media (max-width: 640px) { .hint.motto { right: 14px; font-size: 14px; } }

.guide { position: fixed; z-index: 9; left: 50%; top: calc(96px + env(safe-area-inset-top, 0px)); translate: -50% 0; width: min(330px, calc(100vw - 40px)); padding: 12px 14px; border-radius: 10px; background: rgba(4,4,6,.42); border: 1px solid rgba(236,230,218,.14); font: 400 11.5px/1.55 var(--f-mono); letter-spacing: .04em; color: color-mix(in srgb, var(--ink) 86%, transparent); text-align: center; text-shadow: 0 1px 6px rgba(0,0,0,.8); transition: opacity 1.2s; pointer-events: none; }
.guide.off { opacity: 0; }
#diag { position: fixed; z-index: 70; left: 8px; top: calc(60px + env(safe-area-inset-top, 0px)); margin: 0; padding: 8px 10px; background: rgba(0,0,0,.78); color: #9fe; font: 10px/1.45 var(--f-mono); border-radius: 6px; pointer-events: none; white-space: pre; }

/* ---------- luogo in formazione ---------- */
.beyond { position: fixed; inset: 0; z-index: 9; display: grid; place-items: center; padding: 24px; pointer-events: none; opacity: 0; transition: opacity .8s; }
.beyond.on { opacity: 1; pointer-events: auto; }
.beyond .card { display: grid; gap: 12px; justify-items: center; text-align: center; max-width: 420px; }
.beyond .eyebrow { color: var(--c); }
.beyond h2 { margin: 0; font: 800 clamp(28px, 5vw, 44px)/1 var(--f-display); }
.beyond p { margin: 0; font: italic 500 18px/1.4 var(--f-hand); color: color-mix(in srgb, var(--ink) 80%, transparent); }
.beyond button { margin-top: 10px; cursor: pointer; padding: 12px 18px; border-radius: 99px; border: 1px solid var(--c); background: rgba(0,0,0,.45); font: 500 11px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; }
.beyond button:hover { background: var(--c); color: #000; }

/* ---------- cassetti: vetro scuro sospeso sul mondo (senza sfocatura) ---------- */
#drawer { position: fixed; z-index: 25; top: calc(62px + env(safe-area-inset-top, 0px)); right: 14px; width: min(520px, calc(100vw - 28px));
  max-height: calc(100vh - 62px - 18px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
  background: linear-gradient(180deg, rgba(4,4,6,.66), rgba(4,4,6,.54));
  border: 1px solid rgba(236,230,218,.14); border-radius: 14px; text-shadow: 0 1px 8px rgba(0,0,0,.8);
  transform: translateX(calc(100% + 24px)); transition: transform .8s cubic-bezier(.2,.7,.2,1); visibility: hidden; }
#drawer.open { transform: none; visibility: visible; box-shadow: 0 0 0 1px rgba(255,255,255,.03), 0 20px 60px rgba(0,0,0,.35); }
#drawer .x { position: sticky; top: 0; float: right; margin: 10px 10px 0 0; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; background: rgba(0,0,0,.35); cursor: pointer; font: 400 17px/1 var(--f-mono); color: var(--ink); z-index: 2; }
.panel-in { padding: 24px 26px 34px; display: grid; gap: 34px; clear: both; }
.world { display: grid; gap: 30px; }
.world[data-world="stillnox"] { --accent: var(--abyss); }
.world[data-world="forge"] { --accent: var(--ember); }
.world[data-world="sapio"] { --accent: var(--ember); }
.world[data-world="molecolar"] { --accent: #9fd8ff; }
.world[data-world="zedge"], .world[data-world="contatti"], .world[data-world="info"] { --accent: var(--core); }
.w-head { display: grid; gap: 10px; }
.eyebrow { font: 500 11px/1.4 var(--f-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.w-head h1 { margin: 0; font: 800 clamp(30px, 5vw, 44px)/.95 var(--f-display); letter-spacing: -.01em; text-wrap: balance; }
.w-head p { margin: 0; max-width: 46ch; font-size: 15px; line-height: 1.55; color: color-mix(in srgb, var(--ink) 86%, transparent); }
.subnav { display: flex; flex-wrap: wrap; gap: 6px; }
.subnav a { font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; padding: 9px 11px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); }
.subnav a:hover { color: var(--ink); border-color: var(--accent); }
.blk { display: grid; gap: 18px; scroll-margin-top: 70px; }
.blk h2 { margin: 0; font: 600 13px/1.2 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.blk h2::before { content: ""; width: 22px; height: 1px; background: var(--accent); }
.blk > p { margin: 0; max-width: 52ch; color: color-mix(in srgb, var(--ink) 80%, transparent); }
.note { font: 400 12px/1.5 var(--f-mono); color: var(--muted); }
.howto { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; color: color-mix(in srgb, var(--ink) 84%, transparent); }

.accs { display: grid; gap: 0; border-top: 1px solid var(--line); }
.acc { border-bottom: 1px solid var(--line); scroll-margin-top: 70px; }
.acc > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 12px; padding: 13px 2px; }
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary span { font: 800 clamp(17px, 2.6vw, 22px)/1.05 var(--f-display); letter-spacing: .01em; }
.acc > summary small { font: 500 10px/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-left: auto; }
.acc > summary::after { content: ""; width: 8px; height: 8px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); transform: rotate(45deg); margin-left: 8px; transition: transform .3s; align-self: center; flex: none; }
.acc[open] > summary::after { transform: rotate(-135deg); }
.acc-in { display: grid; gap: 0; padding: 0 0 14px 14px; border-left: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); margin-left: 4px; }
.acc.sub { border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.acc.sub:last-child { border-bottom: 0; }
.acc.sub > summary { font: 600 11px/1.2 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; padding: 11px 2px; }
.acc.sub > summary i { font-style: normal; font-size: 9px; color: var(--muted); margin-left: auto; letter-spacing: .16em; }
.acc.sub > :not(summary) { margin: 4px 0 16px; }
.acc.sub > p { margin: 0 0 14px; max-width: 52ch; color: color-mix(in srgb, var(--ink) 80%, transparent); }

/* galleria Philamentose */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gallery button { padding: 0; border: 0; background: #050a10; aspect-ratio: 2/3; max-width: 100%; overflow: hidden; cursor: zoom-in; position: relative; }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .4s; filter: saturate(.9); }
.gallery button:hover img { transform: scale(1.04); filter: saturate(1.1); }
.gallery figcaption { position: absolute; left: 6px; bottom: 6px; font: 400 10px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; background: rgba(0,0,0,.6); padding: 5px 6px; }
.grammar { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(236,230,218,.12); border: 1px solid var(--line); }
.grammar div { background: rgba(0,0,0,.25); padding: 16px; display: grid; gap: 6px; }
.grammar b { font: 600 15px/1.2 var(--f-display); letter-spacing: .02em; }
.grammar span { font-size: 14px; color: var(--muted); }

.cta { display: inline-flex; align-items: center; gap: 10px; justify-self: start; text-decoration: none; font: 500 12px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; padding: 14px 16px; border: 1px solid var(--accent); color: var(--ink); border-radius: 2px; transition: background .25s, color .25s; }
button.cta { background: none; cursor: pointer; }
.cta:hover { background: var(--accent); color: #000; }

/* volumi dei Sapionauti */
.books { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px 14px; }
.book { display: grid; gap: 10px; align-content: start; }
.book .cv { aspect-ratio: 1447/2048; max-width: 100%; overflow: hidden; border-radius: 3px; background: #120400; box-shadow: 0 0 0 1px rgba(255,106,43,.25); }
.book .cv img { width: 100%; height: 100%; object-fit: cover; display: block; }
.book.soon .cv img { filter: grayscale(.7) brightness(.55); }
.book h3 { margin: 0; font: 600 15px/1.2 var(--f-display); }
.book p { margin: 0; font: 400 11px/1.5 var(--f-mono); letter-spacing: .06em; color: var(--muted); }
.book a { font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ember-2); text-decoration: none; }
.book a:hover { color: var(--ink); }
.book .tag { font: 500 10px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.facts { display: flex; flex-wrap: wrap; gap: 8px 22px; font: 400 12px/1.5 var(--f-mono); color: var(--muted); }
.facts b { color: var(--ember-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.sealed { padding: 18px; border: 1px dashed rgba(255,179,71,.35); display: grid; gap: 6px; background: rgba(0,0,0,.25); }
.sealed b { font: 500 11px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ember-2); }

/* contatti */
.links { display: grid; gap: 8px; margin-top: 14px; }
.links a { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 13px 14px; border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: border-color .25s; }
.links a:hover { border-color: var(--core); }
.links span { font: 500 10px/1.2 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.links b { font: 500 13px/1 var(--f-mono); }
.mail { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mail code { font: 500 14px/1 var(--f-mono); padding: 12px 12px; border: 1px solid var(--line); user-select: all; overflow-wrap: anywhere; min-width: 0; }
.mail button { cursor: pointer; font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; padding: 14px; background: var(--core); color: #000; border: 0; }

/* lightbox e avviso */
.sheet { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.72); }
#lightbox { cursor: zoom-out; }
#lightbox img { max-width: min(92vw, 900px); max-height: 86vh; width: auto; height: auto; display: block; }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); translate: -50% 0; z-index: 60; background: var(--ink); color: #000; font: 500 11px/1 var(--f-mono); letter-spacing: .12em; padding: 12px 14px; }

@media (max-width: 520px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .grammar { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  #drawer { top: calc(58px + env(safe-area-inset-top, 0px)); max-height: calc(100vh - 58px - 150px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); right: 12px; width: calc(100vw - 24px); border-radius: 12px; }
  .panel-in { padding: 18px 16px 26px; gap: 26px; }
  .world { gap: 22px; }
  .w-head h1 { font-size: 28px; }
  .w-head p { font-size: 13.5px; line-height: 1.5; }
  .eyebrow { font-size: 9.5px; }
  .facts { font-size: 11px; gap: 4px 14px; }
  .subnav a { font-size: 9.5px; padding: 7px 8px; }
  .blk { gap: 12px; }
  .blk h2 { font-size: 11px; }
  .blk > p, .acc.sub > p { font-size: 13.5px; }
  .acc > summary span { font-size: 16px; }
  .acc.sub > summary { font-size: 10px; padding: 9px 2px; }
  .books { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px 10px; }
  .book h3 { font-size: 12.5px; }
  .book p, .book a { font-size: 9.5px; }
  .cta { font-size: 10px; padding: 11px 12px; }
  .gallery { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; } }

/* The Voids Walkers: la serie, con i versi della clip */
.verse { margin: 6px 0 16px; font: italic 500 19px/1.45 var(--f-hand); color: color-mix(in srgb, var(--ink) 86%, transparent); letter-spacing: .01em; }
.series { display: grid; grid-template-columns: 1fr; gap: 6px; margin-bottom: 12px; }
.series button { padding: 0; border: 0; background: #050a10; aspect-ratio: 4/3; overflow: hidden; cursor: zoom-in; display: block; width: 100%; }
.series img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.series button:hover img { transform: scale(1.03); }
@media (min-width: 700px) { .series { grid-template-columns: 1fr 1fr; } }
.series.wide button { aspect-ratio: 16/9; }
/* Resonance: la clip verticale, contenuta nello schermo */
.clip { display: grid; justify-items: center; margin: 4px 0 14px; }
.clip video { display: block; width: auto; height: min(68vh, 640px); max-width: 100%; aspect-ratio: 9/16; background: #000; object-fit: contain; }
.series.nat button { aspect-ratio: auto; }
.series.nat img { height: auto; }
.series.two { grid-template-columns: 1fr 1fr; align-items: start; }
@media (min-width: 700px) { .series.two { grid-template-columns: repeat(3, 1fr); } }
.verse.ep { font-size: 17px; line-height: 1.5; max-width: 52ch; }

/* clip quadrate e larghe (The Domain) */
.clips { display:grid; grid-template-columns:1fr; gap:6px; margin-bottom:12px; }
.clips video { display:block; width:100%; aspect-ratio:1; background:#000; object-fit:cover; }
.clips video.wide { grid-column:1/-1; aspect-ratio:16/9; }
@media (min-width: 700px) { .clips { grid-template-columns:repeat(3,1fr); } }

/* lightbox: frecce, chiudi e contatore */
#lightbox { cursor: default; }
#lightbox img { cursor: pointer; }
#lightbox button { position: absolute; border: 0; background: rgba(0,0,0,.45); color: var(--ink, #ece6da); font: 300 30px/1 var(--f-mono, monospace); width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; padding: 0 0 3px; }
#lightbox .lb-prev { left: 8px; top: 50%; translate: 0 -50%; }
#lightbox .lb-next { right: 8px; top: 50%; translate: 0 -50%; }
#lightbox .lb-x { right: 12px; top: calc(12px + env(safe-area-inset-top, 0px)); font-size: 26px; }
#lightbox.single .lb-prev, #lightbox.single .lb-next { display: none; }
#lightbox .lb-n { position: absolute; left: 50%; translate: -50% 0; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); font: 400 11px/1 var(--f-mono, monospace); letter-spacing: .14em; color: rgba(236,230,218,.75); }

/* lightbox: schermo intero e rotazione */
#lightbox .lb-fs { left: 12px; top: calc(12px + env(safe-area-inset-top, 0px)); }
#lightbox .lb-rot { left: 64px; top: calc(12px + env(safe-area-inset-top, 0px)); }
#lightbox [hidden] { display: none !important; }
#lightbox.fs { background: #000; padding: 0; }
#lightbox.fs img { max-width: 100vw; max-height: 100vh; }
#lightbox { background: rgba(0,0,0,.9); }
#lightbox.rot img.mis { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(90deg); max-width: 86vh; max-height: 94vw; }
#lightbox.fs.rot img.mis { max-width: 100vh; max-height: 100vw; }
#lightbox.rot .lb-rot { background: rgba(236,230,218,.25); }