/* ============================================================
   Shell condiviso: identita', navigazione, footer, focus.
   Contiene SOLO le regole identiche in tutte le pagine; quelle
   che divergono da pagina a pagina restano nel <style> locale.
   Caricato DOPO prefs.css e PRIMA dello <style> di pagina, per
   conservare l'ordine di cascata che c'era quando era inline.
   ============================================================ */

:root {
    --orange: #FF3B00;
    --orange-ink: #C42E00;
    --ink: #1A1A1A;
    --cream: #F5F0E8;
    --white: #FFFFFF;
    --acid: #C8FF00;
    --muted: #4A4944;
    --muted-light: #B5B5AF;
    --line: rgba(26,26,26,0.14);
    --rail: 112px;
    --font-display: 'Syne', sans-serif;
    --font-body: 'Inter', sans-serif;
  }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--cream); padding: 12px 18px; z-index: 1100; border-radius: 0 0 6px 0; font-size: 0.875rem; font-weight: 500; }
.skip:focus { left: 0; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 2px; }
/* ---- Sidebar rail ---- */
.rail { position: fixed; top: 0; left: 0; bottom: 0; width: var(--rail); background: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 28px 0; z-index: 20; }
.mark { width: 34px; height: 34px; }
.rail-name { text-decoration: none; color: var(--cream); font-family: var(--font-display); font-weight: 800; font-size: 1.375rem; letter-spacing: 0.34em; writing-mode: vertical-rl; transform: rotate(180deg); padding: 6px; }
.rail-name:hover { color: var(--orange); }
.rail-contacts { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.rail-contacts a { color: var(--muted-light); display: flex; padding: 4px; transition: color .2s ease; }
.rail-contacts a:hover { color: var(--orange); }
.rail-contacts svg { width: 21px; height: 21px; display: block; }
/* ---- Main ---- */
.main { margin-left: var(--rail); min-height: 100vh; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 30; display: flex; justify-content: flex-end; padding: 20px 56px; background: var(--cream); transition: box-shadow .2s ease; }
.topbar.stuck { box-shadow: 0 1px 0 var(--line); }
.nav { display: flex; flex-wrap: wrap; gap: 12px 30px; justify-content: flex-end; }
.nav a { position: relative; text-decoration: none; color: var(--muted); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 0; transition: color .2s ease; }
.nav a::after { content: ""; position: absolute; left: 0; bottom: -5px; width: 100%; height: 7px; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 12"><path d="M2 3 Q50 13 98 3" fill="none" stroke="%23FF3B00" stroke-width="2.5" stroke-linecap="round"/></svg>') no-repeat center / 100% 100%; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.nav a:hover, .nav a:focus-visible { color: var(--ink); }
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }
/* Allarga l'area cliccabile a ~31px senza spostare nulla di un pixel: le voci
   erano alte 23px, uno sotto il minimo di 24px di WCAG 2.2 (SC 2.5.8). Un
   pseudo-elemento trasparente evita di aggiungere padding, che avrebbe fatto
   scendere l'arco della sottolineatura e crescere la topbar. */
.nav a::before { content: ""; position: absolute; inset: -4px 0; }
.content { padding: 40px 56px 64px; flex: 1; max-width: 1180px; }
/* ---- Footer ----
   Tre gruppi distinti (naviga / scrivimi / lettura) invece di un elenco
   piatto in cui link e comandi si somigliavano. Le due voci sotto "Lettura"
   sono <button>: aprono un pannello e accendono i raggi X, non portano da
   nessuna parte, quindi hanno la forma a pillola dei comandi e non quella
   dei link. Tutte le aree cliccabili stanno sopra i 24px richiesti da
   WCAG 2.2 (SC 2.5.8): prima erano alte 17px. */
.foot { margin-left: var(--rail); border-top: 1px solid var(--line); padding: 36px 56px 26px; color: var(--muted); }
.foot-inner { display: flex; flex-wrap: wrap; gap: 30px 72px; max-width: 1180px; }
.foot-heading { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange-ink); margin: 0 0 8px; }
.foot-nav, .foot-contacts { display: flex; flex-direction: column; }
.foot a { color: var(--muted); text-decoration: none; font-size: 0.875rem; display: inline-block; padding: 5px 0; }
.foot a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.foot-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.foot-tools { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
/* Il bordo e' cio' che distingue un comando da un link, quindi deve reggere il
   contrasto 3:1 di WCAG 1.4.11 (SC non testuale). Con var(--line) sarebbe stato
   1.2:1 e la pillola si sarebbe letta a malapena. */
.foot-tool { font-family: var(--font-body); font-size: 0.875rem; font-weight: 500; color: var(--muted); background: transparent; border: 1.5px solid var(--muted); border-radius: 999px; padding: 7px 16px; cursor: pointer; line-height: 1.35; transition: border-color .2s ease, color .2s ease, background .2s ease; }
.foot-tool:hover { border-color: var(--ink); color: var(--ink); background: rgba(26,26,26,0.04); }
.foot-tool[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.foot-ext { display: inline-block; width: 0.7em; height: 0.7em; margin-left: 6px; vertical-align: baseline; }
.foot-base { display: flex; gap: 24px; justify-content: space-between; flex-wrap: wrap; max-width: 1180px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 0.8125rem; }

/* Non tutta la tipografia display sta dentro h1/h2/h3: i titoli delle card e la
   domanda di apertura dei case study sono <p>, quindi la regola in prefs.css non
   li copriva e a schermo stretto sfondavano. Stesso trattamento: sillabazione
   italiana e, in ultima istanza, spezzatura.
   min-width:0 sugli elementi di griglia serve perche' il default e' auto: senza,
   la parola piu' lunga di una card detta la larghezza della colonna. */
.card-title, .domanda-q { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.proj-grid > *, .proj-list > * { min-width: 0; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 820px) {
  :root { --rail: 0px; }
  .rail { position: static; width: 100%; flex-direction: row; justify-content: space-between; padding: 16px 22px; }
  .rail-name { writing-mode: horizontal-tb; transform: none; font-size: 1.0625rem; letter-spacing: 0.2em; }
  .rail-contacts { flex-direction: row; gap: 10px; }
  .topbar { padding: 14px 22px; }
  .nav { gap: 10px 18px; }
  .content { padding: 28px 22px 48px; }
  .foot { margin-left: 0; padding: 22px; }
  .foot-inner { gap: 24px 44px; }
}
@media (max-width: 480px) {
  .nav a { font-size: 0.75rem; letter-spacing: 0.08em; }
}
@media (prefers-reduced-motion: reduce) {
  .cursor-ring { display: none !important; }
  .nav a::after { transition: none; }
  html { scroll-behavior: auto; }
  .foot-tool { transition: none; }
}