/* ==========================================================================
   Ali Ghavampour — site styles
   Flat surfaces, no backdrop-filter, no animated blurs. Everything here is
   cheap to paint so the page stays smooth on older hardware.
   ========================================================================== */

/* --- DESIGN TOKENS ------------------------------------------------------ */
/* Dark is the default theme. The accent is the single colour knob: change
   --accent (and --accent-strong in the light block) to re-skin the site. */
:root {
    /* VS Code "Dark Modern"-flavoured neutrals — grey, not blue */
    --bg:            #1b1b1b;
    --surface:       #212121;
    --surface-hover: #272727;
    --border:        #333333;
    --border-strong: #4a4a4a;

    --text:          #e4e4e4;
    --text-muted:    #a0a0a0;
    --text-faint:    #7d7d7d;

    /* Accent. Alternatives: #c98a7a (clay) · #4ec9b0 (teal) · #b5a0d8 (lilac) */
    --accent:        #e0a45c;
    --accent-soft:   rgba(224, 164, 92, 0.14);
    --accent-ink:    #241703; /* text drawn on top of --accent */

    --shadow:        0 1px 2px rgba(0, 0, 0, 0.3);

    /* Spacing scale */
    --sp-1: 0.5rem;
    --sp-2: 0.85rem;
    --sp-3: 1.25rem;
    --sp-4: 2rem;
    --sp-5: 3rem;
    --sp-6: 5rem;

    --radius:    10px;
    --radius-sm: 7px;
    --nav-h:     66px;
    --ctl-h:     38px;   /* shared height: nav links, CV button, theme toggle */
    --measure:   1080px;

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
            Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
            "Liberation Mono", monospace;

    color-scheme: dark;
}

:root[data-theme="light"] {
    --bg:            #f7f7f6;
    --surface:       #ffffff;
    --surface-hover: #fbfbfa;
    --border:        #e2e2df;
    --border-strong: #c8c8c4;

    --text:          #1d1d1c;
    --text-muted:    #57575a;
    --text-faint:    #78787c;

    --accent:        #a35b12;
    --accent-soft:   rgba(163, 91, 18, 0.10);
    --accent-ink:    #ffffff;

    --shadow:        0 1px 2px rgba(0, 0, 0, 0.05);

    color-scheme: light;
}

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

html {
    font-size: 106.25%;            /* ~17px base — everything scales from here */
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + 1.5rem);
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font);
    background-color: var(--bg);   /* flat, single colour */
    color: var(--text);
    line-height: 1.65;
    letter-spacing: -0.005em;
    -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

a { color: var(--accent); }

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

:where(a, button, input):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Slim, theme-aware scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border: 3px solid var(--bg);
    border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

.wrap { width: 100%; max-width: var(--measure); margin: 0 auto; padding: 0 var(--sp-3); }
.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- BACKGROUND GRAIN --------------------------------------------------- */
/* One tiled noise image, fixed to the viewport, sitting between the page
   background and everything drawn on top of it. Cards, buttons and the nav
   paint their own opaque backgrounds over it, so only the background itself
   is textured. It is painted once and never repainted while scrolling.

   Each tile is white specks whose alpha comes from an SVG noise filter; the
   light theme inverts them to black specks. Three knobs:

     1. texture     data-grain="..." on <html> in index.html
     2. how much    --grain-amount below
     3. how coarse  --grain-size below                                      */
:root {
    /* KNOB: strength. 0 = off · 0.5 = whisper · 1 = default · 2 = strong.
       Each texture carries its own --grain-gain, so the same amount reads
       about the same whichever texture is selected. */
    --grain-amount: 1.2;

    /* KNOB: coarseness. auto = the texture's own scale (finest, crispest).
       A px value stretches the tile — 260px is chunky, 90px is tighter. */
    --grain-size: 100px;

    /* Default texture, used when <html> carries no data-grain. */
    --grain: var(--grain-film);
    --grain-gain: 0.19;

    /* Texture library — seamless (stitchTiles) feTurbulence tiles. */
    --grain-film: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 0 0 0 -0.5'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
    --grain-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.5 0.72' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 0 0 0 -0.26'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
    --grain-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.32' numOctaves='5' stitchTiles='stitch'/%3E%3CfeGaussianBlur stdDeviation='0.4'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 0 0 0 -0.5'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
    --grain-static: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='1' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='discrete' tableValues='0 1'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 0 0 0 -0.5'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* film    fine, even, 35mm-style grain
   paper   fibrous and directional, like laid paper or a risograph print
   soft    large soft mottling, closer to watercolour paper
   static  coarse per-pixel TV static                                       */
:root[data-grain="film"]   { --grain: var(--grain-film);   --grain-gain: 0.19; }
:root[data-grain="paper"]  { --grain: var(--grain-paper);  --grain-gain: 0.14; }
:root[data-grain="soft"]   { --grain: var(--grain-soft);   --grain-gain: 0.20; }
:root[data-grain="static"] { --grain: var(--grain-static); --grain-gain: 0.055; }
:root[data-grain="off"]    { --grain-amount: 0; }

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;                   /* over the page background, under content */
    pointer-events: none;
    background-image: var(--grain);
    background-size: var(--grain-size);
    opacity: calc(var(--grain-amount) * var(--grain-gain));
}

/* The nav is painted in --bg, so without this it reads as a flat strip across
   an otherwise textured page. Fixed attachment keeps its tile in step with
   the layer above; z-index -1 keeps the grain off the nav's own text. */
.nav::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: var(--grain);
    background-size: var(--grain-size);
    background-attachment: fixed;
    opacity: calc(var(--grain-amount) * var(--grain-gain));
}

/* Black specks read on a pale background; white ones do not. */
:root[data-theme="light"] body::before,
:root[data-theme="light"] .nav::after { filter: invert(1); }

/* --- NAVBAR ------------------------------------------------------------- */
.nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg);         /* opaque: no backdrop-filter, no blur cost */
    border-bottom: 1px solid var(--border);
}

.nav-inner {
    height: var(--nav-h);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.nav-brand {
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text);
    text-decoration: none;
    margin-right: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    white-space: nowrap;
}

.nav-brand::before {
    content: "";
    width: 9px; height: 9px;
    border-radius: 2px;
    background: var(--accent);
    flex: none;
}

.nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}

.nav-links a {
    display: inline-flex;
    align-items: center;
    height: var(--ctl-h);
    padding: 0 0.8rem;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.nav-links a:hover { color: var(--text); background: var(--surface-hover); }
.nav-links a.is-active { color: var(--accent); background: var(--accent-soft); }

.nav-actions { display: flex; align-items: center; gap: var(--sp-1); }

/* CV button */
.btn-cv {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: var(--ctl-h);
    padding: 0 0.95rem;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--accent-ink);
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.15s ease;
}
.btn-cv:hover { opacity: 0.85; }
.btn-cv svg { flex: none; }

/* Theme toggle */
.theme-btn {
    width: var(--ctl-h); height: var(--ctl-h);
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;                      /* no box — matches the bare nav links */
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.theme-btn:hover { color: var(--text); background: var(--surface-hover); }

/* Show the icon for the theme you'd switch to */
.theme-btn .icon-moon { display: none; }
:root[data-theme="light"] .theme-btn .icon-sun  { display: none; }
:root[data-theme="light"] .theme-btn .icon-moon { display: block; }

/* --- SECTIONS ----------------------------------------------------------- */
.section { padding: var(--sp-6) 0; }
.section + .section { padding-top: 0; }

.section-head {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--border);
}

.section-title {
    font-size: clamp(1.6rem, 3.2vw, 2.05rem);
    font-weight: 650;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.section-count {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-faint);
}

/* --- HERO --------------------------------------------------------------- */
.hero {
    padding: clamp(2.5rem, 6vw, 4.25rem) 0 var(--sp-4);
}

.hero-grid {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: center;
}

.hero-photo {
    width: 100%;
    height: auto;                  /* let aspect-ratio win over the HTML height attr */
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
}

.hero h1 {
    font-size: clamp(2.1rem, 5vw, 3rem);
    font-weight: 680;
    line-height: 1.1;
    letter-spacing: -0.035em;
    margin-bottom: var(--sp-2);
}

.hero h1 .name { color: var(--accent); }

.hero-role {
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    font-weight: 500;
    color: var(--text);
    margin-bottom: var(--sp-2);
}

.hero-bio {
    font-size: 1.03rem;
    color: var(--text-muted);
    max-width: 56ch;
    margin-bottom: var(--sp-3);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
}

.btn {
    display: inline-flex;
    align-items: center;
    padding: 0.62rem 1.25rem;
    border-radius: var(--radius-sm);
    font-size: 0.97rem;
    font-weight: 550;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { opacity: 0.85; }

.btn-ghost { border-color: var(--border-strong); color: var(--text); }
.btn-ghost:hover { background: var(--surface-hover); border-color: var(--accent); color: var(--accent); }

/* --- PROJECT CARDS ------------------------------------------------------ */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: var(--sp-3);
}

.card {
    display: flex;
    flex-direction: column;
    padding: var(--sp-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.card:hover { border-color: var(--border-strong); background: var(--surface-hover); }

.card h3 {
    font-size: 1.14rem;
    font-weight: 620;
    letter-spacing: -0.015em;
    line-height: 1.3;
    margin-bottom: var(--sp-1);
}

.card p {
    font-size: 0.97rem;
    color: var(--text-muted);
    margin-bottom: var(--sp-3);
}

.card .tags { margin-top: auto; }

.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.tags span {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    line-height: 1.6;
    padding: 0.1rem 0.55rem;
    border-radius: 4px;
    background: var(--accent-soft);
    color: var(--accent);
}

/* Inline links inside prose */
.card p a, .pub-item p a, .about p a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.card p a:hover, .pub-item p a:hover, .about p a:hover { text-decoration-thickness: 2px; }

/* --- PUBLICATIONS ------------------------------------------------------- */
.pub-list { display: flex; flex-direction: column; gap: var(--sp-2); }

.pub-item {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: var(--sp-3);
    padding: var(--sp-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.pub-item:hover { border-color: var(--border-strong); background: var(--surface-hover); }

.pub-year {
    font-family: var(--font-mono);
    font-size: 0.87rem;
    color: var(--accent);
    padding-top: 0.15rem;
}

.pub-item h4 {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.35;
    margin-bottom: 0.3rem;
}

.pub-meta { font-size: 0.93rem; color: var(--text-muted); margin-bottom: 0.5rem; }

.link-arrow {
    display: inline-block;
    font-size: 0.93rem;
    font-weight: 550;
    color: var(--accent);
    text-decoration: none;
}
.link-arrow::after { content: " \2192"; }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --- ABOUT -------------------------------------------------------------- */
.about {
    padding: var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.about p {
    font-size: 1.03rem;
    color: var(--text-muted);
    max-width: 68ch;
    margin-bottom: var(--sp-3);
}

.about p + p { margin-top: calc(var(--sp-3) * -0.5); }

.social-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.social-pill {
    padding: 0.42rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text-muted);
    font-size: 0.92rem;
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.social-pill:hover { color: var(--accent); border-color: var(--accent); }

/* --- FOOTER ------------------------------------------------------------- */
.footer {
    margin-top: var(--sp-6);
    border-top: 1px solid var(--border);
}

.footer-inner {
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    font-size: 0.9rem;
    color: var(--text-faint);
}

.cam-whisper {
    width: 18px; height: 18px;
    border: 1px solid var(--border);
    border-radius: 50%;
    opacity: 0.5;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}
.cam-whisper:hover { opacity: 1; border-color: var(--accent); }

/* --- PROJECT PAGES ------------------------------------------------------ */
/* Standalone pages under /<project>/, e.g. /ergodigit/. They reuse the nav,
   section heads, cards and buttons above; only what is new lives here. */
.crumb {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--text-faint);
    text-decoration: none;
    margin-bottom: var(--sp-3);
    transition: color 0.15s ease;
}
.crumb::before { content: "\2190  "; }
.crumb:hover { color: var(--accent); }

.proj-hero { padding: clamp(2rem, 5vw, 3.5rem) 0 0; }

.proj-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: center;
}

.proj-hero h1 {
    font-size: clamp(2.3rem, 5.5vw, 3.3rem);
    font-weight: 680;
    line-height: 1.05;
    letter-spacing: -0.035em;
    margin: var(--sp-2) 0;
}
.proj-hero h1 .name { color: var(--accent); }

.proj-lead {
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    font-weight: 500;
    margin-bottom: var(--sp-2);
}

.proj-hero-photo {
    width: 100%;
    height: auto;
    aspect-ratio: 10 / 7;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
}

/* Four cards read better as 2 × 2 than as 3 + 1 */
.card-grid.two-up { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }

/* Prose block — same card treatment as .about */
.prose {
    padding: var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.prose p {
    font-size: 1.03rem;
    color: var(--text-muted);
    max-width: 68ch;
}
.prose p + p { margin-top: var(--sp-2); }
.prose strong { color: var(--text); font-weight: 600; }

/* 3D viewer */
.viewer {
    position: relative;
    height: clamp(340px, 62vw, 560px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.viewer model-viewer {
    width: 100%;
    height: 100%;
    background: transparent;
    --poster-color: transparent;
    --progress-bar-color: var(--accent);
}

/* Poster: a still render, shown while the model loads — and in its place if
   the model file is missing or the viewer script cannot load. */
.viewer-poster {
    position: absolute;
    inset: 0;
}
.viewer-poster img {
    position: absolute;
    top: var(--sp-4);
    left: var(--sp-4);
    width: calc(100% - 2 * var(--sp-4));
    height: calc(100% - 2 * var(--sp-4));
    object-fit: contain;
    opacity: 0.9;
}

.viewer-hint {
    position: absolute;
    left: var(--sp-3);
    bottom: var(--sp-2);
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--text-faint);
    pointer-events: none;
}
.viewer-hint .when-missing { display: none; }
.viewer.is-missing .viewer-hint .when-ready { display: none; }
.viewer.is-missing .viewer-hint .when-missing { display: inline; }

/* Key figures */
.spec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1px;
    background: var(--border);         /* shows through the gaps as hairlines */
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.spec {
    padding: var(--sp-3);
    background: var(--surface);
}
.spec dt {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent);
    margin-bottom: 0.3rem;
}
.spec dd { font-size: 0.97rem; color: var(--text-muted); }
.spec dd b { display: block; font-size: 1.14rem; font-weight: 620; color: var(--text); }

/* What's in the box */
.box-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.6rem var(--sp-4);
}
.box-list li {
    display: flex;
    gap: 0.7rem;
    font-size: 0.99rem;
    color: var(--text-muted);
}
.box-list li::before {
    content: "";
    flex: none;
    width: 7px; height: 7px;
    margin-top: 0.62em;
    border-radius: 2px;
    background: var(--accent);
}
.box-list b { color: var(--text); font-weight: 600; }

/* Photo gallery */
.gallery {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--sp-3);
}
.gallery figure { grid-column: span 2; }
.gallery figure.wide { grid-column: span 3; }
.gallery a { display: block; }
.gallery img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    transition: border-color 0.15s ease;
}
.gallery a:hover img { border-color: var(--accent); }
.gallery figcaption {
    margin-top: 0.5rem;
    font-size: 0.88rem;
    color: var(--text-faint);
}

/* Closing call to action */
.cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-4);
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
}
.cta h2 {
    font-size: 1.35rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    margin-bottom: 0.3rem;
}
.cta p { color: var(--text-muted); max-width: 58ch; }
.cta p a {
    color: var(--accent);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

@media (max-width: 860px) {
    .proj-hero-grid { grid-template-columns: 1fr; }
    .proj-hero-photo { order: -1; }
    .gallery { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
    .gallery figure, .gallery figure.wide { grid-column: span 1; }
}

@media (max-width: 760px) {
    .prose, .cta { padding: var(--sp-3); }
}

@media (max-width: 420px) {
    .gallery { grid-template-columns: 1fr; }
}

/* --- SCROLL REVEAL ------------------------------------------------------ */
/* Only applied when JS is running, so no-JS visitors always see content.
   Animates opacity/transform only — compositor work, no layout or repaint. */
.js .reveal {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.45s ease-out, transform 0.45s ease-out;
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js .reveal { opacity: 1; transform: none; transition: none; }
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* --- RESPONSIVE --------------------------------------------------------- */
@media (max-width: 900px) {
    .hero-grid { grid-template-columns: 200px 1fr; }
}

@media (max-width: 760px) {
    :root { --nav-h: auto; --ctl-h: 34px; --sp-6: 3.5rem; }

    /* Two-row nav instead of hiding the links */
    .nav-inner {
        flex-wrap: wrap;
        justify-content: center;
        padding: 0.6rem 0;
        gap: 0.6rem;
    }
    .nav-brand { margin-right: auto; }
    .nav-links { order: 3; width: 100%; justify-content: center; gap: 0.15rem; }
    .nav-links a { padding: 0 0.6rem; font-size: 0.9rem; }

    .hero { padding-top: 2.5rem; }
    .hero-grid { grid-template-columns: 1fr; gap: var(--sp-3); }
    .hero-photo { width: 150px; }

    .pub-item { grid-template-columns: 1fr; gap: 0.35rem; }
    .pub-year { padding-top: 0; }

    .about { padding: var(--sp-3); }
    .footer-inner { height: auto; padding: var(--sp-3) 0; }
}

@media (max-width: 420px) {
    .btn, .btn-cv { padding-left: 0.8rem; padding-right: 0.8rem; }
    .card-grid { grid-template-columns: 1fr; }
    /* Five links have to fit one row on a phone */
    .nav-links a { padding: 0 0.4rem; font-size: 0.86rem; }
}