/* ─── Imprint design system — niccoloridi.github.io v2 ─── */

:root {
    --page: #f4ede0;
    --ink: #1a1410;
    --ink-secondary: #5a4d3f;
    --rule: #c9bfa7;
    --gold: #a8893a;
    --vermilion: #a73d28;

    --serif: "Spectral", Georgia, "Times New Roman", serif;
    --serif-sc: "Spectral SC", "Spectral", Georgia, serif;
    --display: "Cormorant Garamond", "Spectral", Georgia, serif;

    --t-display: 3.6rem;
    --t-section: 2rem;
    --t-subhead: 1.2rem;
    --t-lead: 1.15rem;
    --t-body: 1.05rem;
    --t-meta: 0.85rem;
    --t-smallcaps: 0.78rem;

    --measure: 70ch;
    --column: 50rem;
    --gutter: clamp(1.25rem, 4vw, 3.5rem);
    --rhythm: 1.7;
}

.dark-mode {
    --page: #121212;
    --ink: #e8eaed;
    --ink-secondary: #9aa0ab;
    --rule: #2a2622;
    --gold: #d4a574;
    --vermilion: #b54732;
}

/* ─── Override the data-essay chrome tokens so their viz cards inherit the imprint page
   colour instead of pure white / dark grey. Only applies to pages that already define
   these tokens (i.e., the data essays). ─── */
:root {
    --background-color: var(--page);
    --header-bg: var(--page);
    --card-bg: var(--page);
    --subtle-border: var(--rule);
    --pullquote-bg: var(--page);
    --pullquote-border: var(--rule);
}
.dark-mode {
    --background-color: var(--page);
    --header-bg: var(--page);
    --card-bg: var(--page);
    --subtle-border: var(--rule);
    --pullquote-bg: var(--page);
    --pullquote-border: var(--rule);
}

/* Specific essay panels that hardcoded a dark background — retype them in imprint tokens
   so the sidebar and tooltip read on cream paper. */
#net-sidebar-header,
.net-tooltip {
    background-color: var(--ink) !important;
    color: var(--page) !important;
}
#net-sidebar-header .subtitle,
#net-sidebar-header .close-btn {
    color: var(--page) !important;
}
.dark-mode #net-sidebar-header,
.dark-mode .net-tooltip {
    background-color: var(--rule) !important;
    color: var(--ink) !important;
}
.dark-mode #net-sidebar-header .subtitle,
.dark-mode #net-sidebar-header .close-btn {
    color: var(--ink) !important;
}

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

html {
    font-family: var(--serif);
    font-size: 17px;
    font-weight: 300;
    color: var(--ink);
    background: var(--page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
    font-feature-settings: "kern", "liga", "onum";
}

body {
    line-height: var(--rhythm);
    font-size: var(--t-body);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--page);
    color: var(--ink);
    transition: background-color 400ms ease, color 400ms ease;
}

a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--gold);
    text-decoration-style: solid;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    display: inline-block;
    position: relative;
    transition: transform 0.08s ease-out;
}
/* Hover — a thicker gold rule draws in from the centre outward, beneath the existing one,
   like a quill stroke completing. Text colour is untouched. */
a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -0.05em;
    width: 100%;
    height: 2px;
    background-color: var(--gold);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
    pointer-events: none;
}
a:hover::after { transform: scaleX(1); }
/* Active — letterpress press into paper */
a:active { transform: translateY(1px); }

em, i { font-style: italic; }
strong, b { font-weight: 500; }

::selection { background: var(--gold); color: var(--page); }

.smallcaps {
    font-family: var(--serif-sc);
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: lowercase;
}

/* ─── Header ─── */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 1.25rem var(--gutter);
    background: var(--page);
    border-bottom: 1px solid var(--rule);
    font-family: var(--serif-sc);
    font-size: var(--t-smallcaps);
    letter-spacing: 0.12em;
    text-transform: lowercase;
    color: var(--ink-secondary);
    flex-shrink: 0;
    z-index: 50;
    gap: 1rem;
    transition: background-color 400ms ease, border-color 400ms ease;
}
.page-header a { text-decoration: none; color: var(--ink-secondary); }
/* Hover/active handled by the global a::after animation and a:active translate */
.page-header .home {
    color: var(--ink);
    font-family: var(--display);
    font-style: normal;
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: none;
    text-decoration: none;
}
.page-header .home:hover { text-decoration: none; color: var(--vermilion); }
.page-header nav {
    display: flex;
    gap: 1.75rem;
    align-items: baseline;
    flex-wrap: wrap;
}
.page-header nav .ext-group {
    display: flex;
    gap: 1.25rem;
    padding-left: 1.25rem;
    border-left: 1px solid var(--rule);
    opacity: 0.85;
}

.theme-toggle {
    background: none;
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    cursor: pointer;
    font-family: var(--serif-sc);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: lowercase;
    color: var(--ink-secondary);
    transition: all 0.2s ease;
    flex-shrink: 0;
    line-height: 1;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--gold); }

.hamburger-menu {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    z-index: 51;
}
.hamburger-menu .line {
    display: block;
    width: 22px;
    height: 1.5px;
    background-color: var(--ink);
    margin: 5px 0;
    transition: transform 0.3s ease, opacity 0.3s ease, background-color 400ms ease;
}

/* ─── Article / page content ─── */
main { flex: 1; display: flex; flex-direction: column; }

.page-body {
    max-width: var(--column);
    margin: 0 auto;
    padding: 4rem var(--gutter) 5rem;
    width: 100%;
}

article {
    max-width: var(--measure);
    margin: 0 auto;
}

h1.display, .display-h1 {
    font-family: var(--display);
    font-style: normal;
    font-size: clamp(2.4rem, 6vw, var(--t-display));
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.12;
    margin: 0 0 1rem;
    color: var(--ink);
}

/* Page title — small caps, restrained */
h1.section {
    font-family: var(--serif-sc);
    font-size: 1.7rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: lowercase;
    line-height: 1.15;
    margin: 0 0 1.25rem;
    color: var(--ink);
}

/* In-page section heading — smaller, still small caps */
h2.section, .section-h {
    font-family: var(--serif-sc);
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    margin: 3rem 0 1rem;
    color: var(--ink);
}

h3 {
    font-family: var(--serif-sc);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: lowercase;
    color: var(--ink-secondary);
    margin: 2.5rem 0 1rem;
}

article p {
    margin: 0 0 1.25rem;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

p.subtitle, .subtitle {
    font-style: italic;
    color: var(--ink-secondary);
    font-size: var(--t-subhead);
    margin-bottom: 2.5rem;
    text-align: left;
    hyphens: none;
}

p.lead, .lead {
    font-size: var(--t-lead);
    margin-bottom: 1.5rem;
    font-weight: 400;
    text-align: justify;
    hyphens: auto;
}

.dropcap::first-letter {
    font-family: var(--display);
    font-style: normal;
    font-weight: 500;
    font-size: 4.5em;
    float: left;
    line-height: 0.85;
    margin: 0.05em 0.12em 0 0;
    color: var(--ink);
}

.fleuron {
    text-align: center;
    color: var(--gold);
    letter-spacing: 0.5em;
    margin: 3rem 0;
    font-size: 1.2rem;
    user-select: none;
}
.fleuron::before { content: "⁂"; }

article ul, article ol { margin: 1.5rem 0; text-indent: 0; }
article ul { list-style: none; padding-left: 0; }
article ul li {
    display: grid;
    grid-template-columns: 1.4em 1fr;
    column-gap: 0.5em;
    margin-bottom: 0.6rem;
    line-height: var(--rhythm);
    text-indent: 0;
}
article ul li::before {
    content: "◊";
    color: var(--gold);
    font-size: 0.95em;
    font-style: normal;
    line-height: var(--rhythm);
    text-align: left;
}
article ol { padding-left: 1.6em; }
article ol li { margin-bottom: 0.65rem; }
article ol li::marker { color: var(--gold); }

hr, .rule {
    border: 0;
    height: 1px;
    background: var(--rule);
    margin: 3rem 0;
}

blockquote {
    margin: 2rem 1.5rem;
    font-style: italic;
    color: var(--ink-secondary);
    border: 0;
}

/* ─── Figure / image ─── */
figure.figure {
    margin: 2.5rem 0;
    text-align: center;
}
figure.figure img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border: 1px solid var(--rule);
}
figure.figure figcaption {
    margin-top: 0.75rem;
    font-family: var(--serif-sc);
    font-size: var(--t-smallcaps);
    letter-spacing: 0.06em;
    color: var(--ink-secondary);
    text-transform: lowercase;
}

/* ─── Two-column (profile photo + bio) ─── */
.two-col {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 3rem;
    margin: 2.5rem 0;
    align-items: start;
}
.two-col .col-photo img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--rule);
    filter: sepia(0.08) saturate(0.9);
}
.two-col.photo-left { grid-template-columns: 1fr 1.4fr; }

/* ─── Bottom grid: positions + education side-by-side (profile) ─── */
.bottom-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 3rem;
    margin: 1.5rem 0 2rem;
    align-items: start;
}
.bottom-grid > div { min-width: 0; }
.bottom-grid h2.section { margin-top: 0; }

/* ─── Illustration plate (leading or closing ornament) ─── */
.illustration {
    display: block;
    text-align: center;
    margin: 4rem auto 1.5rem;
    color: var(--vermilion);
    transition: color 400ms ease;
}
.illustration.top { margin: 0.5rem auto 2.5rem; }
.illustration .plate-svg {
    display: inline-block;
    width: clamp(120px, 14vw, 180px);
    color: inherit;
}
.illustration .plate-svg svg {
    width: 100%;
    height: auto;
    display: block;
}

/* ─── Position list (profile) ─── */
.position-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 2rem;
}
.position-list li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px dotted var(--rule);
    align-items: baseline;
}
.position-list li::before { content: none; }
.position-list .pos-title strong { font-weight: 500; color: var(--ink); }
.position-list .pos-where { color: var(--ink-secondary); font-style: italic; }
.position-list .pos-year {
    font-family: var(--serif-sc);
    font-size: var(--t-smallcaps);
    letter-spacing: 0.08em;
    color: var(--ink-secondary);
    text-transform: lowercase;
    white-space: nowrap;
}

/* ─── Catalogue (data lists) ─── */
.catalogue {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
}
.catalogue li {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--rule);
    display: block;
}
.catalogue li:first-child { border-top: 1px solid var(--rule); }
.catalogue li::before { content: none; }
.catalogue .work-title {
    font-style: italic;
    font-size: var(--t-subhead);
    margin-bottom: 0.25rem;
    line-height: 1.4;
}
.catalogue .work-title a { text-decoration: none; color: var(--ink); }
/* .catalogue .work-title a hover handled by the global a::after animation */
.catalogue .work-meta {
    font-family: var(--serif-sc);
    font-size: var(--t-smallcaps);
    letter-spacing: 0.08em;
    color: var(--ink-secondary);
    margin-bottom: 0.5rem;
    text-transform: lowercase;
}
.catalogue .work-desc {
    font-size: var(--t-body);
    color: var(--ink-secondary);
    text-align: justify;
    hyphens: auto;
}

/* ─── Filter chips (research) ─── */
.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    align-items: center;
    margin: 2rem 0 1.5rem;
    font-family: var(--serif-sc);
    font-size: var(--t-smallcaps);
    letter-spacing: 0.08em;
    text-transform: lowercase;
}
.filter-btn {
    background: none;
    border: none;
    color: var(--ink-secondary);
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    padding: 0.2rem 0;
    border-bottom: 1px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.filter-btn:hover { color: var(--ink); }
.filter-btn.active { color: var(--vermilion); border-bottom-color: var(--gold); }
.year-select {
    background: var(--page);
    border: 1px solid var(--rule);
    color: var(--ink);
    font-family: var(--serif-sc);
    font-size: var(--t-smallcaps);
    letter-spacing: 0.08em;
    padding: 0.25rem 0.6rem;
    cursor: pointer;
    margin-left: auto;
}

/* ─── Publication list ─── */
.pub-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}
.pub-list li {
    display: block;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--rule);
    line-height: 1.55;
    font-size: var(--t-body);
    color: var(--ink);
    text-align: left;
    hyphens: none;
}
.pub-list li::before { content: none; }
.pub-list .pub-chip {
    display: inline-block;
    font-family: var(--serif-sc);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: lowercase;
    color: var(--gold);
    border: 1px solid var(--rule);
    padding: 0.05rem 0.45rem;
    margin-left: 0.5rem;
    border-radius: 999px;
    text-decoration: none;
    vertical-align: 0.05em;
}
.pub-list .pub-chip:hover { color: var(--vermilion); border-color: var(--vermilion); }
.pub-list .pub-note {
    display: inline-block;
    margin-left: 0.5rem;
    font-family: var(--serif-sc);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--ink-secondary);
    text-transform: lowercase;
}

/* ─── Essay cards (data page) ─── */
.essay-card {
    display: block;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--rule);
    text-decoration: none;
    color: var(--ink);
}
.essay-card:first-of-type { border-top: 1px solid var(--rule); }
.essay-card:hover .essay-card-title { color: var(--vermilion); }
.essay-card-title {
    font-family: var(--display);
    font-style: italic;
    font-size: 1.45rem;
    line-height: 1.3;
    margin-bottom: 0.4rem;
    color: var(--ink);
    transition: color 0.15s ease;
}
.essay-card-desc {
    font-size: var(--t-body);
    color: var(--ink-secondary);
    text-align: justify;
    hyphens: auto;
    line-height: 1.55;
}

/* ─── Footer ─── */
.page-footer {
    border-top: 1px solid var(--rule);
    padding: 1.25rem var(--gutter);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--serif-sc);
    font-size: var(--t-meta);
    color: var(--ink-secondary);
    letter-spacing: 0.06em;
    text-transform: lowercase;
    flex-shrink: 0;
    gap: 1rem;
    flex-wrap: wrap;
    transition: background-color 400ms ease, border-color 400ms ease, color 400ms ease;
}
.page-footer a {
    color: var(--ink-secondary);
    text-decoration: none;
}
/* Hover handled by the global a::after animation */
.page-footer .rights {
    font-family: var(--serif-sc);
    font-size: var(--t-meta);
    letter-spacing: 0.06em;
    color: var(--ink-secondary);
    text-transform: lowercase;
}

/* ─── Mobile ─── */
@media (max-width: 768px) {
    body.nav-open { overflow: hidden; }
    .page-header { padding: 1rem var(--gutter); }
    .page-header .home { font-size: 1.2rem; }
    .hamburger-menu { display: block; }
    .page-header nav {
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100vh;
        background-color: var(--page);
        display: flex; flex-direction: column;
        justify-content: center; align-items: center;
        gap: 1.5rem;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
        font-size: 1.05rem;
        letter-spacing: 0.18em;
        z-index: 49;
        padding: 0;
    }
    .page-header nav .ext-group {
        flex-direction: column;
        border-left: 0;
        border-top: 1px solid var(--rule);
        padding-left: 0; padding-top: 1.5rem;
        margin-top: 0.5rem; gap: 1rem;
        align-items: center;
    }
    body.nav-open .page-header nav { transform: translateX(0); }
    body.nav-open .hamburger-menu .line-1 { transform: rotate(45deg) translate(5px, 5px); }
    body.nav-open .hamburger-menu .line-2 { opacity: 0; }
    body.nav-open .hamburger-menu .line-3 { transform: rotate(-45deg) translate(5px, -5px); }

    .two-col, .two-col.photo-left { grid-template-columns: 1fr; gap: 2rem; }
    .bottom-grid { grid-template-columns: 1fr; gap: 2rem; }
    .position-list li { grid-template-columns: 1fr; gap: 0.2rem; }
    .filters { gap: 0.4rem 1rem; }
    .year-select { margin-left: 0; }

    .page-body { padding: 2.5rem var(--gutter) 3rem; }
    h1.display, .display-h1 { font-size: clamp(2rem, 8vw, 3rem); }

    .page-footer { padding: 1rem var(--gutter); flex-direction: column; align-items: center; gap: 0.5rem; }
}