/* Museo — bianco e neutro, molto spazio, caratteri sottili. Le fotografie sono le protagoniste.
   Colori, caratteri, spazi e ombre si cambiano dal pannello (Temi → Personalizza). */

:root {
    --ink: #1c1c1c;
    --paper: #fff;
    --muted: #8c8c8c;
    --title-color: #1c1c1c;
    --link: #1c1c1c;
    --hover: #000;
    --font: "Helvetica Neue", "Avenir Next", "Segoe UI", system-ui, sans-serif;
    --font-title: "Helvetica Neue", "Avenir Next", "Segoe UI", system-ui, sans-serif;
    --font-weight: 300;
    --title-scale: 1;
    --title-weight: 200;
    --title-tracking: .12em;
    --size-body: 16px;
    --size-prose: 18px;
    --size-menu: 11px;
    --size-small: 11px;
    --space: 96px;
    --line-w: 1px;
    --line-color: #e2e2e2;
    --radius: 0px;
    --box-alpha: .92;
    --page-alpha: 94%;
    --photo-border: none;
    --shadow-color: var(--ink);
    --shadow-alpha: 0%;
    --shadow-offset: 0px;
    --shadow-blur: 18px;
    --lift: 0px;
    --ease: cubic-bezier(.2, .7, .2, 1);

    --line: var(--line-w) solid var(--line-color);
    --shadow: var(--shadow-offset) var(--shadow-offset) var(--shadow-blur) color-mix(in srgb, var(--shadow-color) var(--shadow-alpha), transparent);

    /* Elementi che i moduli (bacheca, commenti...) riprendono dal tema */
    --hairline: var(--line-color);
    --card-border: var(--line);
    --card-radius: var(--radius);
    --card-bg: transparent;
    --card-hover-transform: translateY(calc(var(--lift) * -1));
    --card-hover-shadow: var(--shadow);
    --focus-shadow: var(--shadow);
}

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

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

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    color: var(--ink);
    font: var(--font-weight) var(--size-body)/1.7 var(--font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

main { flex: 1 0 auto; width: 100%; }
.site-footer { margin-top: auto; }

a { color: inherit; }

::selection { background: var(--ink); color: var(--paper); }

/* ---------- Box fluttuante della homepage ---------- */

.box {
    background: color-mix(in srgb, var(--box-bg, var(--paper)) calc(var(--box-alpha) * 100%), transparent);
    color: var(--box-ink, var(--ink));
    -webkit-backdrop-filter: blur(var(--box-blur, 14px));
    backdrop-filter: blur(var(--box-blur, 14px));
    border: var(--box-border-w, 0px) solid var(--box-border-color, var(--line-color));
    border-radius: var(--box-radius, var(--radius));
    padding: var(--box-pad, 28px 30px);
    box-shadow: 0 10px var(--box-shadow-blur, 0px) color-mix(in srgb, var(--shadow-color) 28%, transparent);
    animation: var(--box-anim, rise 1.2s var(--ease) both);
}

.box__brand { display: flex; flex-direction: column; gap: 4px; }
.box__title { font-family: var(--font-title); font-size: var(--box-title-size, calc(18px * var(--title-scale))); font-weight: var(--title-weight); color: var(--box-ink, var(--title-color)); letter-spacing: var(--title-tracking); text-transform: uppercase; }
.box__subtitle { font-size: var(--box-sub-size, var(--size-small)); color: var(--muted); letter-spacing: .22em; text-transform: uppercase; }
.box .menu a, .box .menu__here { font-size: var(--box-menu-size, var(--size-menu)); }

/* ---------- Menu ---------- */

.menu ul { list-style: none; margin: 26px 0; padding: 0; display: grid; gap: 4px; }

.menu a {
    display: inline-block;
    padding: 5px 0;
    font-size: var(--size-menu);
    letter-spacing: .24em;
    text-transform: uppercase;
    text-decoration: none;
    opacity: .62;
    transition: opacity .5s var(--ease);
}

.menu a:hover, .menu a.is-current { opacity: 1; color: var(--hover); }

.menu__here {
    display: inline-block;
    padding: 5px 0;
    font-size: var(--size-menu);
    letter-spacing: .24em;
    text-transform: uppercase;
    opacity: 1;
    border-bottom: var(--line-w) solid currentColor;
    cursor: default;
    user-select: none;
}

.menu--header ul { display: flex; gap: 36px; margin: 0; }

/* ---------- Anteprima ultimo post ---------- */

.latest {
    display: grid;
    gap: 6px;
    border-top: var(--line);
    padding: 18px 0 0;
    text-decoration: none;
    transition: opacity .5s var(--ease);
}

.latest:hover { opacity: .65; }
.latest__label { font-size: var(--size-small); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.latest__title { font-family: var(--font-title); font-size: 17px; font-weight: var(--title-weight); line-height: 1.35; letter-spacing: calc(var(--title-tracking) / 4); }
.latest__date { font-size: var(--size-small); color: var(--muted); letter-spacing: .1em; }
.latest__text { font-size: 13px; line-height: 1.6; color: var(--muted); }

/* ---------- Pagine interne ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--paper);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 26px clamp(20px, 5vw, 64px);
    border-bottom: var(--line);
}

.site-header__brand { font-family: var(--font-title); font-size: 14px; font-weight: var(--title-weight); color: var(--title-color); letter-spacing: var(--title-tracking); text-transform: uppercase; text-decoration: none; }

.site-footer { padding: 40px clamp(20px, 5vw, 64px); border-top: var(--line); color: var(--muted); font-size: var(--size-small); letter-spacing: .14em; text-transform: uppercase; }
.site-footer small { font-size: inherit; }

.page { max-width: 820px; margin: 0 auto; padding: var(--space) clamp(20px, 5vw, 32px) calc(var(--space) * 1.2); animation: appear .9s var(--ease) both; }
.page__title { font-family: var(--font-title); font-size: calc(clamp(26px, 4vw, 38px) * var(--title-scale)); line-height: 1.2; font-weight: var(--title-weight); letter-spacing: var(--title-tracking); text-transform: uppercase; color: var(--title-color); margin: 0 0 calc(var(--space) * .5); }

.entry { padding: 36px 0; border-top: var(--line); }
.entry:last-child { border-bottom: var(--line); }
.entry__date { font-size: var(--size-small); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.entry__title { font-family: var(--font-title); font-size: calc(24px * var(--title-scale)); line-height: 1.3; margin: 10px 0 12px; font-weight: var(--title-weight); letter-spacing: calc(var(--title-tracking) / 3); color: var(--title-color); }
.entry__title a { text-decoration: none; transition: opacity .5s var(--ease); }
.entry__title a:hover { opacity: .6; }
.entry__text { margin: 0; color: var(--muted); }

.post__cover { display: block; width: 100%; height: auto; border: var(--photo-border); border-radius: 0; margin: 0 0 calc(var(--space) * .5); }
.post__back { margin-top: calc(var(--space) * .6); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }

.prose { font-size: var(--size-prose); line-height: 1.85; }
.prose h2, .prose h3 { font-family: var(--font-title); font-weight: var(--title-weight); letter-spacing: calc(var(--title-tracking) / 2); color: var(--title-color); line-height: 1.3; margin: 2.2em 0 .7em; }
.prose img { display: block; max-width: 100%; height: auto; border: var(--photo-border); border-radius: 0; margin: 2em 0; }
.prose blockquote { margin: 2em 0; padding: 0 0 0 24px; border-left: var(--line-w) solid var(--line-color); color: var(--muted); font-style: italic; }
.prose a, .page a:not([class]) { color: var(--link); text-decoration-thickness: var(--line-w); text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent); transition: text-decoration-color .4s, color .4s; }
.prose a:hover, .page a:not([class]):hover { color: var(--hover); text-decoration-color: currentColor; }
.prose hr { border: 0; border-top: var(--line); margin: 3em 0; }

/* ---------- Sopra uno sfondo fotografico ---------- */

body:has(.bg):not(.is-home) .site-footer {
    background: color-mix(in srgb, var(--paper) var(--page-alpha), transparent);
}

/* ---------- Movimenti (appena percettibili) ---------- */

@keyframes rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

@keyframes float {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -6px; }
}

@keyframes appear {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .box, .page { animation: none; }
    .latest, .menu a, .entry__title a { transition: none; }
}

@media (max-width: 560px) {
    .box { padding: 20px 22px; }
    .site-header { flex-direction: column; align-items: flex-start; gap: 14px; }
    .menu--header ul { flex-wrap: wrap; gap: 6px 22px; }
}

.site-header__brand { display: inline-flex; align-items: center; }
.brand-logo { height: var(--logo-height, 34px); width: auto; display: block; }

/* Articolo: meno spazio tra titolo, categoria e immagine */
.post > time.entry__date { display: block; margin: 0 0 6px; }
.post .page__title { margin-bottom: 10px; }
.post > p.entry__date { margin: 0 0 14px; }
.post .post__coverbox, .post > .post__cover { margin-top: 0; }

/* ---------- Contenitore unico delle pagine interne ---------- */
/* Intestazione del percorso, articolo in evidenza e contenuto stanno nella stessa colonna, con gli stessi margini. */
.shell { flex: 1 0 auto; width: 100%; display: flex; flex-direction: column; }
.shell__in { flex: 1 0 auto; width: 100%; max-width: var(--col-w, 920px); margin: 0 auto; box-sizing: border-box; padding-inline: clamp(20px, 5vw, 40px); }
.shell .page, .shell .glist, .shell .gallery { max-width: none; margin: 0; padding-inline: 0; }
.shell .acc > * { max-width: 460px; }
body.is-home .shell, body.is-home .shell__in { display: contents; }
body:has(.bg):not(.is-home):not(.layout-column) .shell,
body.layout-column:has(.bg):not(.is-home) .shell__in { background: color-mix(in srgb, var(--paper) var(--page-alpha, 90%), transparent); }
/* Su schermi stretti niente scorrimento orizzontale: parole lunghe, tabelle e codice restano nella colonna. */
.shell__in { overflow-wrap: anywhere; }
.shell .prose table { display: block; max-width: 100%; overflow-x: auto; }
.shell .prose pre { max-width: 100%; overflow-x: auto; }
.shell .prose img, .shell .prose iframe, .shell .prose video { max-width: 100%; height: auto; }