/* ─────────────────────────────────────────────────────────
   LIMINAL LAB — Analog Museum / Yazoo palette
   ───────────────────────────────────────────────────────── */

@font-face {
    font-family: "Cormorant Garamond";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/cormorant-garamond-500.ttf") format("truetype");
}

@font-face {
    font-family: "Cormorant Garamond";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/cormorant-garamond-600.ttf") format("truetype");
}

@font-face {
    font-family: "Cormorant Garamond";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/cormorant-garamond-700.ttf") format("truetype");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/inter-400.ttf") format("truetype");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/inter-500.ttf") format("truetype");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/inter-600.ttf") format("truetype");
}

:root {
    color-scheme: light;
    --bg:       #F4F2EE;
    --surface:  #F3EEE6;
    --ink:      #1A1A18;
    --ink-muted:#4A443B;
    --bordeaux: #5B1F2A;
    --olive:    #5B6B4A;
    --header-bg: rgba(244,242,238,0.92);
    --border-soft: rgba(26,26,24,0.15);
    --border: rgba(26,26,24,0.12);
    --border-faint: rgba(26,26,24,0.1);
    --border-hairline: rgba(26,26,24,0.08);
    --image-surface: rgba(255,255,255,0.5);
    --divider: rgba(26,26,24,0.2);


    --font-title: "Cormorant Garamond", Georgia, 'Times New Roman', serif;
    --font-body:  "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    --font-mono:  'Courier New', Courier, monospace;

    --panel-pad: 24px;
    --max-w:     1100px;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg:       #1B1A16;
    --surface:  #24221D;
    --ink:      #F4F2EE;
    --ink-muted:#C8BFB0;
    --bordeaux: #B56A76;
    --olive:    #9AA884;
    --header-bg: rgba(27,26,22,0.9);
    --border-soft: rgba(244,242,238,0.18);
    --border: rgba(244,242,238,0.14);
    --border-faint: rgba(244,242,238,0.1);
    --border-hairline: rgba(244,242,238,0.08);
    --image-surface: rgba(244,242,238,0.08);
    --divider: rgba(244,242,238,0.22);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg:       #1B1A16;
        --surface:  #24221D;
        --ink:      #F4F2EE;
        --ink-muted:#C8BFB0;
        --bordeaux: #B56A76;
        --olive:    #9AA884;
        --header-bg: rgba(27,26,22,0.9);
        --border-soft: rgba(244,242,238,0.18);
        --border: rgba(244,242,238,0.14);
        --border-faint: rgba(244,242,238,0.1);
        --border-hairline: rgba(244,242,238,0.08);
        --image-surface: rgba(244,242,238,0.08);
        --divider: rgba(244,242,238,0.22);
    }
}

/* ─── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.8;
    min-height: 100vh;
}

@media (prefers-reduced-motion: no-preference) {
    body,
    header,
    .theme-switcher,
    .theme-switcher button {
        transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
    }
}

img { display: block; max-width: 100%; height: auto; }
a   { color: var(--bordeaux); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--olive); }

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--bordeaux);
    outline-offset: 4px;
}

.skip-link {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1000;
    transform: translateY(-160%);
    background: var(--ink);
    color: var(--bg);
    padding: 8px 12px;
    font-family: var(--font-mono);
    font-size: 12px;
    text-decoration: none;
}

.skip-link:focus {
    transform: translateY(0);
}

h2 {
    font-family: var(--font-title);
    font-weight: 700;
    letter-spacing: -0.2px;
}

h3 {
    font-family: var(--font-title);
    font-weight: 600;
    letter-spacing: 0px;
}

/* ─── Paper grain (CSS-only, no external image) ──────────── */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    opacity: 0.032;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 260px 260px;
    pointer-events: none;
    z-index: 0;
}

/* ─── Container ─────────────────────────────────────────── */
.container {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 1;
}

/* ─── Header / Nav ───────────────────────────────────────── */
header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--header-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border-soft);
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    gap: 24px;
}

.logo {
    font-family: var(--font-title);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    flex-shrink: 0;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

nav ul li a {
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
    text-decoration: none;
    padding: 4px 0;
    border: none;
    transition: color 0.2s;
}

nav ul li a:hover,
nav ul li a[aria-current="page"] {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.theme-switcher {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    padding: 2px;
    border: 1px solid var(--border);
    background: transparent;
    opacity: 0.72;
    transition: opacity 0.2s, border-color 0.2s;
}

.theme-switcher:hover,
.theme-switcher:focus-within {
    opacity: 1;
}

.theme-switcher button {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--ink-muted);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0;
    line-height: 1;
    min-width: 24px;
    min-height: 24px;
    padding: 6px;
    text-transform: uppercase;
}

.theme-switcher button:hover,
.theme-switcher button[aria-pressed="true"] {
    color: var(--ink);
    background: var(--border-faint);
}

.header-content .theme-switcher {
    flex-shrink: 0;
}

/* ─── Page hero ──────────────────────────────────────────── */
.page-hero {
    padding: 60px 0 40px;
    margin-bottom: 56px;
}

.page-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 12px;
}

.page-title {
    font-family: var(--font-title);
    font-size: clamp(28px, 5vw, 52px);
    font-weight: normal;
    line-height: 1.15;
    color: var(--ink);
    margin-bottom: 16px;
}

.page-subtitle {
    font-size: 17px;
    color: var(--ink-muted);
    max-width: 580px;
}

/* ─── Section ────────────────────────────────────────────── */
section {
    margin-bottom: 72px;
}

/* Progressive enhancement: animazione solo se JS è attivo */
.js section {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.js section.visible {
    opacity: 1;
    transform: translateY(0);
}

.section-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 8px;
}

.section-title {
    font-family: var(--font-title);
    font-size: clamp(20px, 3vw, 28px);
    font-weight: normal;
    color: var(--ink);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-soft);
}

/* ─── Museum card (placard) ──────────────────────────────── */
.placard {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.75;
}

.placard-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 10px;
    display: block;
}

/* ─── Metadata row ───────────────────────────────────────── */
.meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
    margin-bottom: 16px;
}

.meta-item {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.95rem;
    font-style: normal;
    color: var(--ink-muted);
}

.meta-item strong {
    font-weight: 600;
    color: var(--ink);
}

/* ─── Presence / bio ─────────────────────────────────────── */
.bio-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 40px;
    align-items: start;
}

.profile-figure {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.profile-img-wrap {
    aspect-ratio: 3/4;
    overflow: hidden;
    border: 1px solid var(--border-soft);
}

.profile-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(20%);
    transition: filter 0.4s;
}

.profile-img-wrap img:hover { filter: grayscale(0%); }

.profile-caption {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-muted);
    letter-spacing: 0.1em;
    line-height: 1.5;
    text-align: center;
}

.bio-heading {
    font-family: var(--font-title);
    font-size: clamp(24px, 4vw, 40px);
    font-weight: normal;
    line-height: 1.2;
    margin-bottom: 6px;
}

.bio-role {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-muted);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 24px;
    display: block;
}

.bio-text p { margin-bottom: 16px; color: var(--ink-muted); }
.bio-text p:last-child { margin-bottom: 0; }

/* ─── Field list (spec table) ────────────────────────────── */
.field-list {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 10px 16px;
    font-size: 14px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.field-key {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
    padding-top: 2px;
}

.field-val {
    color: var(--ink-muted);
}

/* ─── Projects grid ──────────────────────────────────────── */
.projects-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.project-card {
    padding: 3.5rem 0;
    border-top: 1px solid var(--border-faint);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.projects-grid .field-list {
    border-top: none;
}

.interventions-page .project-card {
    gap: 10px;
}

.interventions-page .project-card .field-list {
    grid-template-columns: 132px 1fr;
    gap: 5px 16px;
    font-size: 13px;
    line-height: 1.55;
    margin-top: 12px;
    padding-top: 0;
}

.interventions-page .project-card .field-key {
    font-size: 10px;
    padding-top: 1px;
}

.intervention-rules {
    margin-bottom: 88px;
}

.intervention-rules .section-title {
    margin-bottom: 26px;
    padding-bottom: 0;
    border-bottom: none;
}

.intervention-rules .field-list {
    gap: 14px 16px;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.intervention-access .aside-note {
    margin: 30px 0 34px;
}

.evidence-section {
    margin-bottom: 52px;
}

.evidence-section .aside-note {
    margin: 28px 0 0;
}

.card-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--ink-muted);
    margin-bottom: 8px;
    display: block;
}

.card-title {
    font-family: var(--font-title);
    font-size: 20px;
    font-weight: normal;
    color: var(--ink);
    line-height: 1.25;
}

.card-title a {
    color: inherit;
    text-decoration: none;
}

.card-title a:hover {
    color: var(--bordeaux);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.case-status {
    display: inline-block;
    margin-left: 10px;
    padding: 3px 8px;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    color: var(--ink-muted);
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}

.case-status--published {
    border-color: rgba(91,107,74,0.45);
    color: var(--olive);
}

.card-desc {
    font-size: 14px;
    color: var(--ink-muted);
    flex: 1;
}

/* .card-metrics, .tech-tags, .tech-tag, .card-evidence — rimossi: HTML migrato a .research-meta */

/* ─── Skills grid ────────────────────────────────────────── */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 36px;
}

.skill-block {
    padding: 0;
}

.skill-block h4 {
    font-family: var(--font-title);
    font-size: 15px;
    font-weight: normal;
    color: var(--ink);
    margin-bottom: 12px;
}

.skill-block ul {
    list-style: none;
    font-size: 13px;
    color: var(--ink-muted);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.skill-block ul li::before {
    content: '·  ';
    color: var(--ink-muted);
}

/* ─── Pipeline ───────────────────────────────────────────── */
.pipeline {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 28px 0;
}

.pipeline-step {
    flex: 1;
    min-width: 90px;
    padding: 16px 10px;
    text-align: center;
    transition: opacity 0.2s;
}

.pipeline-step:hover { opacity: 0.7; }

.step-num {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-muted);
    letter-spacing: 0.12em;
    margin-bottom: 6px;
}

.step-name {
    display: block;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
    font-family: var(--font-body);
}

/* ─── Protocol notes ─────────────────────────────────────── */
.protocol-notes {
    border-left: 3px solid var(--olive);
    padding: 8px 0 8px 20px;
    font-size: 14px;
    color: var(--ink-muted);
    line-height: 1.9;
}

.protocol-notes .note-line::before {
    content: '→ ';
    color: var(--olive);
    font-family: var(--font-mono);
}

/* ─── Research items ─────────────────────────────────────── */
.research-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.research-item {
    border-top: 1px solid var(--border-faint);
    padding: 3.5rem 0;
}

.research-date {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-muted);
    letter-spacing: 0.12em;
    margin-bottom: 8px;
    display: block;
}

.research-title {
    font-family: var(--font-title);
    font-size: 22px;
    font-weight: normal;
    color: var(--ink);
    margin-bottom: 12px;
}

.research-body {
    font-size: 15px;
    color: var(--ink-muted);
    margin-bottom: 16px;
}

.research-meta {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-muted);
    line-height: 1.8;
}

.research-meta strong { color: var(--ink-muted); }

/* ─── Case study pages ───────────────────────────────────── */
.case-study-page .page-subtitle {
    max-width: 760px;
}

.case-summary {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
    gap: 48px;
    align-items: start;
}

.case-lead {
    font-size: 1.05rem;
    color: var(--ink-muted);
    line-height: 1.8;
}

.case-flow,
.case-artifacts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 32px;
    border-top: 1px solid var(--border-faint);
}

.case-node,
.case-artifact {
    padding: 2rem 0;
    border-bottom: 1px solid var(--border-faint);
}

.case-figure-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 44px 32px;
    border-top: 1px solid var(--border-faint);
    padding-top: 32px;
}

.case-figure {
    margin: 0;
}

.case-figure img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--border);
    background: var(--image-surface);
}

.case-figure figcaption {
    margin-top: 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.7;
    letter-spacing: 0;
    color: var(--ink-muted);
}

.case-node-num {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    color: var(--ink-muted);
    margin-bottom: 10px;
}

.case-node strong {
    display: block;
    font-family: var(--font-title);
    font-size: 20px;
    font-weight: normal;
    color: var(--ink);
    margin-bottom: 8px;
}

.case-node p {
    font-size: 14px;
    color: var(--ink-muted);
    line-height: 1.75;
}

.case-code {
    overflow-x: auto;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 24px 0;
    margin: 20px 0 12px;
    color: var(--ink-muted);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.8;
}

.case-caption {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-muted);
    letter-spacing: 0.08em;
}

.case-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: center;
}

/* ─── CTA button ─────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0 0 2px;
    border: none;
    border-bottom: 1px solid transparent;
    color: var(--ink);
    background: transparent;
    transition: border-color 0.2s, color 0.2s;
    font-family: var(--font-body);
    cursor: pointer;
}

.btn::after {
    content: '→';
    display: inline-block;
    transition: transform 0.25s ease;
}

.btn:hover {
    border-bottom-color: var(--ink);
}

.btn:hover::after {
    transform: translateX(4px);
}

.btn-bordeaux {
    color: var(--bordeaux);
}

.btn-bordeaux:hover {
    border-bottom-color: var(--bordeaux);
}

/* ─── Contact layout ─────────────────────────────────────── */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-top: 32px;
}

.contact-block h3 {
    font-family: var(--font-title);
    font-size: 18px;
    font-weight: normal;
    color: var(--ink);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.contact-block p {
    font-size: 14px;
    color: var(--ink-muted);
    margin-bottom: 16px;
}

.contact-link {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--ink-muted);
    text-decoration: none;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-hairline);
    transition: color 0.2s;
}

.contact-link:hover { color: var(--bordeaux); }

.contact-link-label {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-muted);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-right: auto;
}

/* ─── Entry page (index) ─────────────────────────────────── */
.entry-wrap {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 40px 24px;
    position: relative;
    z-index: 1;
}

.entry-inner {
    max-width: 640px;
    width: 100%;
    text-align: center;
}

.entry-logo {
    font-family: var(--font-title);
    font-size: clamp(32px, 7vw, 64px);
    font-weight: normal;
    letter-spacing: 0.4px;
    color: var(--ink);
    margin-bottom: 24px;
}

.entry-tagline {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 40px;
}

.entry-desc {
    font-size: 1.05rem;
    color: var(--ink-muted);
    max-width: 560px;
    margin: 0 0 40px;
    line-height: 1.75;
}

.entry-statement {
    font-size: 1.05rem;
    color: var(--ink-muted);
    max-width: 560px;
    margin: 0 0 28px;
    line-height: 1.75;
}

.entry-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    justify-content: center;
    margin-bottom: 56px;
}

.entry-nav a {
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
    text-decoration: none;
    padding: 4px 0;
    border: none;
    transition: color 0.2s, opacity 0.2s;
    font-family: var(--font-body);
}

.entry-nav a:hover {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.entry-inner .theme-switcher {
    margin-top: -28px;
}

.entry-cta {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-muted);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: color 0.2s;
}

.entry-cta:hover { color: var(--bordeaux); }

.entry-divider {
    width: 1px;
    height: 48px;
    background: var(--divider);
    margin: 0 auto 24px;
}

/* ─── Legal / compliance pages ───────────────────────────── */
.legal-page section {
    max-width: 820px;
}

.legal-page p {
    color: var(--ink-muted);
    margin-bottom: 16px;
}

.legal-page ul {
    color: var(--ink-muted);
    margin: 0 0 24px 20px;
}

.legal-page li {
    margin-bottom: 8px;
}

.legal-page .field-list {
    margin-bottom: 24px;
}

.legal-note {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
    border-top: 1px solid var(--border-soft);
    padding-top: 16px;
}

/* ─── Footer ─────────────────────────────────────────────── */
footer {
    margin-top: 80px;
    border-top: 1px solid var(--border-soft);
    padding: 28px 0;
}

.footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.footer-copy {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-muted);
    letter-spacing: 0.08em;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px 18px;
}

.footer-links a {
    font-size: 13px;
    color: var(--ink-muted);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-links a:hover { color: var(--bordeaux); }

/* ─── Inline note / quote ────────────────────────────────── */
.aside-note {
    font-family: var(--font-title);
    font-weight: 500;
    font-style: normal;
    font-size: 1.15rem;
    line-height: 1.9;
    color: var(--ink);
    border-left: 2px solid var(--bordeaux);
    padding: 24px 32px;
    margin: 40px 0;
}

/* ─── Title letter-spacing (Cormorant Garamond) ─────────── */
.page-title, .section-title, .bio-heading, .card-title,
.research-title, .skill-block h4, .contact-block h3 {
    letter-spacing: 0.4px;
}

/* ─── Responsive — tablet ≤768px ────────────────────────── */
@media (max-width: 768px) {
    .bio-layout {
        grid-template-columns: 1fr;
    }

    .profile-figure {
        max-width: 200px;
        margin: 0 auto;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .case-summary,
    .case-flow,
    .case-artifacts,
    .case-figure-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .case-figure-grid {
        gap: 36px;
    }

    .header-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .header-content .theme-switcher {
        margin-top: 2px;
    }

    nav ul {
        justify-content: flex-start;
        gap: 16px;
    }

    .pipeline {
        flex-direction: column;
    }

    .pipeline-step {
        display: flex;
        align-items: center;
        gap: 12px;
        text-align: left;
        padding: 12px 16px;
    }

    /* .projects-grid è già flex colonna — nessun override necessario */

    .skills-grid {
        grid-template-columns: 1fr 1fr;
    }

    .field-list {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .interventions-page .project-card .field-list {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .field-key { padding-top: 8px; }

    .footer-content {
        align-items: flex-start;
    }

    .footer-links {
        justify-content: flex-start;
    }

    .page-hero {
        padding: 36px 0 28px;
        margin-bottom: 36px;
    }

    /* Testo fluido su schermi stretti, senza giustificazione forzata */
    .bio-text p,
    .research-body,
    .card-desc,
    .case-lead,
    .case-node p,
    .aside-note,
    .protocol-notes,
    .placard {
        hyphens: auto;
        overflow-wrap: break-word;
    }
}

/* ─── Responsive — mobile ≤480px ────────────────────────── */
@media (max-width: 480px) {
    .container { padding: 0 16px; }

    .skills-grid { grid-template-columns: 1fr; }

    .entry-nav a { padding: 4px 0; }

    nav ul li a { padding: 6px 0; font-size: 11px; }

    .logo { font-size: 15px; }

    .page-title { font-size: 24px; }

    .pipeline-step { padding: 10px 14px; }
}