/* ==============================================================
   Personal Website — Slate index + cream essays
   Single hand-written stylesheet. No preprocessors, no build step.

   The .index theme is now Slate: deep slate background, warm chalk
   cream type, faint ochre accent, with a chalk-dust overlay fixed
   over the homepage. The .post theme (essay pages) is unchanged
   from the Frank-faithful cream paper it always was.
   ============================================================== */


/* --------------------------------------------------------------
   1. Fonts — self-hosted variable EB Garamond + Inter
   -------------------------------------------------------------- */

@font-face {
    font-family: 'EB Garamond';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/eb-garamond.woff2') format('woff2-variations'),
         url('fonts/eb-garamond.woff2') format('woff2');
}

@font-face {
    font-family: 'EB Garamond';
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/eb-garamond-italic.woff2') format('woff2-variations'),
         url('fonts/eb-garamond-italic.woff2') format('woff2');
}

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


/* --------------------------------------------------------------
   2. Variables — sizes, families, themes
   -------------------------------------------------------------- */

:root {
    --font-sans:  'Inter', -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-serif: 'EB Garamond', Georgia, serif;

    --unit-xs:   0.5rem;
    --unit-sm:   0.875rem;
    --unit-md:   1rem;
    --unit-lg:   1.125rem;
    --unit-xl:   1.5rem;
    --unit-xxl:  4rem;

    --unit-gutter:    4rem;
    --unit-textmax:   42rem;
    --unit-layoutmax: 60rem;
    --unit-corner:    0.5rem;
}

/* Essay-page theme — unchanged warm cream paper. */
.post {
    --color-bg:      #e6e2e0;
    --color-text:    #151515;
    --color-textdim: #888;
    --color-surface: #d3d3d1;
    --color-action:  #151515;
    --color-accent:  #888;          /* essays don't use accent; falls back to dim */
}

/* Homepage theme — Slate. */
.index {
    --color-bg:      #12181a;       /* slate w/ faint green-blue undertone */
    --color-text:    #e8e3d4;       /* warm chalk cream */
    --color-textdim: #7a8087;       /* chalk dust */
    --color-surface: #1a2024;       /* slightly raised slate */
    --color-action:  #e8e3d4;
    --color-accent:  #d4b970;       /* faint ochre — chalk yellow */
}


/* --------------------------------------------------------------
   3. Core / reset
   -------------------------------------------------------------- */

*, *::before, *::after {
    box-sizing: border-box;
    text-rendering: optimizeLegibility;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@view-transition {
    navigation: auto;
}

html { scroll-behavior: smooth; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-sans);
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
}

/* Chalk-dust overlay — only on the homepage.
   Fixed across the viewport, screen-blended at 5% so it reads as
   a tooth on the slate rather than a flat noise pattern.        */
body.index::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 100;
    opacity: 0.05;
    mix-blend-mode: screen;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.7 0'/></filter><rect width='320' height='320' filter='url(%23n)'/></svg>");
}

::selection {
    background-color: rgba(212, 185, 112, 0.25);
    color: inherit;
}


/* --------------------------------------------------------------
   4. Block elements
   -------------------------------------------------------------- */

p, li, blockquote {
    font-family: var(--font-serif);
    font-size: var(--unit-lg);
    line-height: 1.5;
    text-wrap: pretty;
    font-variant-numeric: oldstyle-nums;
}

hr { border: none; }

hr::after {
    margin: var(--unit-xxl) auto;
    display: block;
    text-align: center;
    letter-spacing: 0.75em;
    content: '***';
    color: var(--color-textdim);
    font-size: 1rem;
}

time {
    color: var(--color-textdim);
    font-size: var(--unit-sm);
    font-weight: 450;
}

a {
    color: var(--color-action);
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
    text-decoration-color: var(--color-textdim);
    text-underline-offset: 3px;
}

a:hover {
    color: var(--color-accent);
    text-decoration-color: var(--color-accent);
}

h1 {
    font-family: var(--font-serif);
    font-weight: normal;
    margin: 0;
    font-size: var(--unit-xl);
    line-height: 1.2;
}

h1 span {
    display: block;
    color: var(--color-textdim);
}

h2 {
    margin-top: calc(2 * var(--unit-xl));
    font-weight: 600;
    font-size: var(--unit-lg);
}

h3 {
    font-size: var(--unit-md);
    font-weight: 400;
}

pre, code {
    font-size: 12px;
    line-height: 1.4;
    background-color: var(--color-surface);
    padding: 4px;
    border-radius: 2px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

pre {
    padding: var(--unit-md);
    overflow-x: auto;
    margin: var(--unit-xl) 0;
}

audio, video {
    display: block;
    border-radius: var(--unit-corner);
    margin: var(--unit-xxl) auto;
    max-width: var(--unit-textmax);
    width: 100%;
}

iframe {
    display: block;
    border-radius: var(--unit-corner);
    margin: var(--unit-xxl) auto;
    width: 100%;
    max-width: var(--unit-textmax);
    aspect-ratio: 16 / 9;
}

figure {
    margin: var(--unit-xxl) 0;
}

figure img {
    display: block;
    width: 100%;
    border-radius: var(--unit-corner);
}

figure.limit {
    max-width: calc(var(--unit-textmax) / 2);
    margin-left: auto;
    margin-right: auto;
}

.full {
    width: 100dvw;
    left: 50%;
    right: 50%;
    margin-left: -50dvw;
    margin-right: -50dvw;
    position: relative;
}

.full img { border-radius: 0; }

@media (min-width: 1440px) {
    .full {
        max-width: 1400px;
        margin-left: -700px;
        margin-right: auto;
    }
    .full img { border-radius: var(--unit-corner); }
}

figcaption {
    text-align: center;
    font-size: var(--unit-sm);
    font-weight: 450;
    color: var(--color-textdim);
    padding-top: var(--unit-xs);
}

figcaption a { color: var(--color-textdim); }

blockquote {
    margin: var(--unit-xl) 0 var(--unit-xl) var(--unit-xl);
    font-style: italic;
}

blockquote p { margin: 0 0 var(--unit-md); }


/* --------------------------------------------------------------
   5. Slate primitives — eyebrow and equation
   Two classes appear on the homepage's section openers.
   -------------------------------------------------------------- */

.eyebrow {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--color-accent);
    font-feature-settings: normal;
    margin: 0 0 0.65rem;
    opacity: 0.85;
}

.equation {
    display: block;
    text-align: center;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.35rem;
    color: var(--color-accent);
    margin: 2.4rem 0;
    letter-spacing: 0.02em;
    opacity: 0.92;
}


/* --------------------------------------------------------------
   6. Card component — used in section.writing
   -------------------------------------------------------------- */

a.card {
    display: block;
    font-size: var(--unit-sm);
    font-family: var(--font-sans);
    text-decoration: none;
    color: var(--color-text);
    text-align: center;
    outline: transparent solid 1px;
    border-radius: var(--unit-corner);
    transition: background-color 0.25s ease, outline-color 0.25s ease;
    padding-bottom: var(--unit-xs);
    text-wrap: balance;
}

a.card u {
    color: var(--color-action);
    text-decoration-color: var(--color-textdim);
    text-underline-offset: 3px;
    font-family: var(--font-serif);
    font-size: var(--unit-lg);
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

a.card div {
    padding: var(--unit-xs) 0;
}

a.card div > * {
    display: block;
}

a.card figure { margin: 0 0 var(--unit-xs) 0; }

a.card img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

a.card span { color: var(--color-textdim); }

a.card.horz {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--unit-xl);
    text-align: left;
    padding: 0;
}

a.card.horz div { align-self: center; }

a.card.horz figure,
a.card.horz figure img,
a.card.horz div {
    margin: 0;
    padding: 0;
}

a.card:hover {
    background-color: var(--color-surface);
    outline: 8px solid var(--color-surface);
    color: var(--color-text);
}

a.card:hover u {
    color: var(--color-accent);
    text-decoration-color: var(--color-accent);
}


/* --------------------------------------------------------------
   7. Post / essay (unchanged — drives the cream essay pages)
   -------------------------------------------------------------- */

article {
    background-color: var(--color-bg);
    padding: var(--unit-xxl) clamp(1rem, 7dvw, 56px);
}

article header {
    text-align: center;
    padding: var(--unit-xxl) 0;
}

article header h1,
article header h2 {
    font-size: 2rem;
    line-height: 1.1;
    font-family: var(--font-serif);
    font-weight: normal;
    margin: 0 auto;
    max-width: 20em;
    text-wrap: balance;
}

article header h2 {
    color: var(--color-textdim);
    margin: 1rem auto 1rem;
    font-style: italic;
}

article header time {
    display: block;
    margin-top: 0.5em;
}

.article-wrap {
    max-width: var(--unit-textmax);
    margin: 0 auto;
}

.post-hero {
    font-size: var(--unit-sm);
    font-weight: 450;
    display: block;
    margin: 0 auto;
    text-align: center;
}

.post-hero a {
    display: inline-block;
    text-decoration: none;
    color: var(--color-textdim);
}

.post-hero svg {
    opacity: 0.45;
    transition: opacity 0.2s ease;
    display: block;
}

.post-hero a:hover svg { opacity: 1; }

.post-navigation {
    padding: 0 clamp(1rem, 7dvw, 56px) var(--unit-xxl);
    color: var(--color-textdim);
}

.post-navigation > div {
    max-width: var(--unit-textmax);
    margin: 0 auto;
}

.post-navigation a {
    display: inline-block;
    margin-bottom: var(--unit-lg);
}

@media (min-width: 50rem) {
    .post-navigation > div {
        display: flex;
        justify-content: space-between;
        gap: var(--unit-xl);
    }
    .post-navigation .nav-next { text-align: right; }
}


/* --------------------------------------------------------------
   8. Index / homepage layout shell
   -------------------------------------------------------------- */

.index {
    padding: var(--unit-xxl) clamp(1rem, 7dvw, 64px);
    background-color: var(--color-bg);
    color: var(--color-text);
    position: relative;
}

body.index {
    padding: 0 !important;
}

.index-wrap {
    max-width: var(--unit-layoutmax);
    margin: 0 auto;
    display: grid;
    gap: var(--unit-xl);
    position: relative;
    z-index: 1;
}


/* --------------------------------------------------------------
   9. section.info — Intro (name, role, bio, portrait)
   Keeps Frank's two-column intro: text left, portrait right at
   ≥45rem; stacked on narrow.
   -------------------------------------------------------------- */

section.info p {
    font-family: var(--font-serif);
    font-size: var(--unit-md);
    line-height: 1.6;
    text-wrap: pretty;
    max-width: 30em;
}

section.info .role {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--color-textdim);
    font-size: var(--unit-lg);
    margin: 0.4em 0 1.4em;
    max-width: none;
}

section.info .links {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-textdim);
    font-feature-settings: normal;
    margin: 1.2em 0 0;
    max-width: none;
}

section.info .links a {
    color: var(--color-text);
    text-decoration: none;
    margin-right: 0.4em;
}

section.info .links a:hover {
    color: var(--color-accent);
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-underline-offset: 4px;
}

section.info .links .sep {
    color: var(--color-surface);
    margin-right: 0.4em;
}

section.info figure {
    width: 100%;
    max-width: 14rem;
    margin: 0 0 var(--unit-lg);
}

section.info figure img {
    width: 100%;
    height: auto;
    display: block;
}

section.info { margin-bottom: var(--unit-xxl); }


/* --------------------------------------------------------------
   10. Research — focus statement + questions list
   -------------------------------------------------------------- */

section.research p.focus {
    font-family: var(--font-serif);
    font-size: var(--unit-lg);
    color: var(--color-text);
    line-height: 1.55;
}

ul.questions {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: none;
}

ul.questions li {
    margin: 0 0 0.6em;
    padding-left: 1.25em;
    text-indent: -1.25em;
    color: var(--color-text);
    font-family: var(--font-serif);
    font-size: var(--unit-lg);
    line-height: 1.5;
}

ul.questions li::before {
    content: '—';
    color: var(--color-textdim);
    margin-right: 0.5em;
}


/* --------------------------------------------------------------
   11. Publications & Projects — chronological lists
   -------------------------------------------------------------- */

ul.papers,
ul.projects-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: none;
}

ul.papers > li,
ul.projects-list > li {
    padding: 1.1rem 0;
    border-bottom: 1px dotted var(--color-surface);
    margin: 0;
    font-variant-numeric: normal;
}

ul.papers > li:last-child,
ul.projects-list > li:last-child {
    border-bottom: 0;
}

.paper-title,
.project-title {
    font-family: var(--font-serif);
    font-size: var(--unit-md);
    color: var(--color-text);
    margin-bottom: 0.25em;
    line-height: 1.35;
}

.paper-authors {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    color: var(--color-textdim);
    font-style: italic;
    margin-bottom: 0.4em;
    line-height: 1.4;
}

.paper-authors .you {
    color: var(--color-text);
    font-style: normal;
}

.project-desc {
    font-family: var(--font-serif);
    font-size: var(--unit-md);
    color: var(--color-text);
    margin: 0 0 0.45em;
    line-height: 1.45;
}

.paper-venue,
.project-meta {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-textdim);
    font-feature-settings: normal;
}

.paper-venue .status {
    color: var(--color-accent);
    margin-right: 0.5em;
}

.paper-venue a,
.project-meta a {
    color: var(--color-textdim);
    text-decoration: none;
    margin-left: 0.4em;
}

.paper-venue a:hover,
.project-meta a:hover { color: var(--color-accent); }


/* --------------------------------------------------------------
   12. section.about — Frank-style about list, slate-skinned
   -------------------------------------------------------------- */

section.about {
    margin-bottom: 0 !important;
}

section.about h2 {
    color: var(--color-textdim);
    font-size: var(--unit-md);
    margin-top: calc(2 * var(--unit-xl));
}

.about-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: none;
}

.about-list a {
    color: var(--color-text);
    text-decoration: underline;
    text-decoration-color: var(--color-textdim);
}

.about-list a:hover {
    color: var(--color-accent);
    text-decoration-color: var(--color-accent);
}

.about-list li {
    font-family: var(--font-sans);
    font-size: var(--unit-sm);
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--color-surface);
    padding: 12px 0;
    font-variant-numeric: normal;
    margin: 0;
    gap: var(--unit-md);
}

.about-list time,
.about-list span {
    display: block;
    color: var(--color-textdim);
}

.about-list li > div {
    flex: 1 1 auto;
}

@media (min-width: 40rem) {
    .about-list.split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 var(--unit-xl);
    }
}


/* --------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------- */

footer.index {
    padding: 0 clamp(1rem, 7dvw, 64px) var(--unit-xxl);
    font-size: var(--unit-sm);
    color: var(--color-textdim);
    font-family: var(--font-sans);
    position: relative;
    z-index: 1;
}

footer.index .wrap {
    max-width: var(--unit-layoutmax);
    margin: 0 auto;
    border-top: 1px solid var(--color-surface);
    padding-top: var(--unit-sm);
}

footer.index a {
    color: var(--color-textdim);
    text-decoration: none;
}

footer.index a:hover { color: var(--color-accent); }

@media (min-width: 40rem) {
    footer.index .wrap {
        display: flex;
        justify-content: space-between;
    }
}


/* --------------------------------------------------------------
   14. Responsive grid — Frank's marquee desktop move.
   At ≥45rem: info section becomes 1fr 1fr (text + portrait).
   At ≥60rem: research / publications / projects / writing / about
   sections become 1fr 2fr with the whole <header> sticky, so the
   section title (including its eyebrow and chalk rule) follows
   the reader through the section's content.
   -------------------------------------------------------------- */

section.research,
section.publications,
section.projects,
section.writing,
section.about {
    margin-bottom: var(--unit-xxl);
}

section.research h1,
section.publications h1,
section.projects h1,
section.writing h1,
section.about h1 {
    text-wrap: balance;
}

section.research,
section.publications,
section.projects,
section.writing,
section.writing > div,
section.about {
    display: grid;
    gap: var(--unit-xl);
}

@media (min-width: 45rem) {
    section.info figure { margin: 0; }
}

@media (min-width: 60rem) {
    section.research,
    section.publications,
    section.projects,
    section.writing,
    section.about {
        grid-template-columns: 1fr 2fr;
    }

    section.research > header,
    section.publications > header,
    section.projects > header,
    section.writing > header,
    section.about > header {
        position: sticky;
        top: var(--unit-xl);
        align-self: start;
    }

    section.writing > div {
        grid-template-columns: 1fr;
    }

    section.info {
        display: grid;
        gap: var(--unit-lg);
        grid-template-columns: 1fr 2fr;
        align-items: start;
    }

    section.info > figure {
        justify-self: start;
        margin: 0;
    }

    section.info > .intro-info {
        grid-column: 2;
    }
}