/* Nicola Sabaini — segnaposto
   ============================
   Nessuno stile inline e nessuno script inline in tutto il sito: e' cio' che
   permette al server di applicare una Content-Security-Policy stretta, senza
   'unsafe-inline'. Se aggiungi contenuti, tienili fuori dall'HTML. */

:root {
    --sfondo:        #0a0e14;
    --sfondo-alto:   #11161f;
    --bordo:         #1e2733;
    --testo:         #dbe3ec;
    --testo-tenue:   #8b97a6;
    --accento:       #4db8a8;
    --raggio:        10px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    padding: 0;
    background: var(--sfondo);
    color: var(--testo);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Gutter laterale garantito a ogni larghezza: padding-block separato, mai
   una shorthand che azzeri i lati. */
.guscio {
    width: 100%;
    max-width: 640px;
    padding-inline: 24px;
    padding-block: 56px;
}

.intestazione { margin-bottom: 40px; }

.sopratitolo {
    margin: 0 0 10px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    color: var(--accento);
}

h1 {
    margin: 0 0 6px;
    font-size: clamp(2rem, 7vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.ruolo {
    margin: 0;
    color: var(--testo-tenue);
    font-size: 1.05rem;
}

.riquadro {
    background: var(--sfondo-alto);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: 22px 24px;
    margin-bottom: 18px;
}

.riquadro h2 {
    margin: 0 0 10px;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.riquadro p { margin: 0; color: var(--testo-tenue); }

a {
    color: var(--accento);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease;
}

a:hover, a:focus-visible { border-bottom-color: var(--accento); }

/* Focus sempre visibile da tastiera: il contorno non si toglie mai senza
   sostituirlo con qualcosa di altrettanto evidente. */
a:focus-visible {
    outline: 2px solid var(--accento);
    outline-offset: 3px;
    border-radius: 2px;
}

.chiusura {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--bordo);
    color: var(--testo-tenue);
    font-size: 0.85rem;
}

.chiusura p { margin: 0; }

/* Chi ha chiesto meno animazioni non deve subirle. */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* Il sito e' pensato scuro, ma su un sistema chiaro deve restare leggibile
   invece di imporre il nero. */
@media (prefers-color-scheme: light) {
    :root {
        --sfondo:      #f6f7f9;
        --sfondo-alto: #ffffff;
        --bordo:       #dde2e8;
        --testo:       #1a2029;
        --testo-tenue: #5a6675;
        --accento:     #16776a;
    }
}