/* wwwroot/css/site.css
   Trimmed stylesheet for the Razor markup in the starter project.
   Mirrors the editorial-grid look (V1) from the prototype — adopt or
   swap with V2/V3 tokens as desired. */

:root {
    --bg: #fafaf7;
    --surface: #ffffff;
    --surface-alt: #f3f1ea;
    --ink: #0f0f0f;
    --ink-soft: #33332f;
    --ink-mute: #6b6b66;
    --line: #e5e3dc;
    --line-strong: #cfcdc4;
    --accent: #2a3550;
    --accent-ink: #ffffff;

    --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

    --pad-x: 88px;
}

[data-theme="dark"] {
    --bg: #0d0e10;
    --surface: #15171a;
    --surface-alt: #1c1f23;
    --ink: #f3f1ec;
    --ink-soft: #c8c6bf;
    --ink-mute: #8a8a83;
    --line: #25272b;
    --line-strong: #3a3d42;
    --accent: #a8bde6;
    --accent-ink: #0d0e10;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; line-height: 1.45; }
a { color: inherit; text-decoration: none; }

/* ── Nav ──────────────────────────────────────────────── */
.navbar { display: flex; justify-content: space-between; align-items: center; padding: 28px var(--pad-x); border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; }
.navbar__brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-soft); }
.dot { width: 8px; height: 8px; background: var(--accent); display: inline-block; }
.navbar__links { list-style: none; display: flex; gap: 28px; margin: 0; padding: 0; }
.navbar__links a { color: var(--ink-soft); text-transform: uppercase; }

/* ── Eyebrow + section ────────────────────────────────── */
.eyebrow { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 24px; }
.section { padding: 96px var(--pad-x); border-bottom: 1px solid var(--line); }
.section__title { font-size: 40px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 500; margin: 0 0 56px 0; max-width: 720px; }
.section__lead { font-size: 22px; line-height: 1.5; color: var(--ink-soft); max-width: 720px; }

/* ── Hero ─────────────────────────────────────────────── */
.hero { padding: 120px var(--pad-x) 96px; display: grid; grid-template-columns: 1fr 360px; gap: 80px; align-items: end; border-bottom: 1px solid var(--line); }
.hero__name { font-size: 96px; line-height: 0.96; font-weight: 500; letter-spacing: -0.03em; margin: 0; }
.hero__tagline { font-size: 22px; line-height: 1.4; color: var(--ink-soft); max-width: 560px; margin-top: 36px; }
.hero__meta { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 56px; font-family: var(--mono); font-size: 12px; color: var(--ink-mute); }
.hero__meta dt { text-transform: uppercase; letter-spacing: 0.08em; }
.hero__meta dd { margin: 6px 0 0; font-family: var(--sans); font-size: 14px; color: var(--ink); }
.hero__photo { aspect-ratio: 4/5; background: var(--surface-alt); border: 1px solid var(--line); margin: 0; overflow: hidden; position: relative; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__photo figcaption { position: absolute; bottom: 16px; left: 16px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; background: var(--bg); padding: 6px 10px; border: 1px solid var(--line); }

/* ── Project card ─────────────────────────────────────── */
.project { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.project__visual {
    aspect-ratio: 4/3;
    background: repeating-linear-gradient(135deg, var(--surface-alt) 0 12px, var(--bg) 12px 24px);
    border: 1px solid var(--line);
    position: relative;
}
    .project__visual img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Fill container, keep aspect ratio, crop overflow */
        object-position: center; /* Center the image */
        display: block; /* Remove inline gap */
    }
    .project__visual figcaption {
        position: absolute;
        bottom: 16px;
        left: 16px;
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        background: var(--bg);
        padding: 6px 10px;
        border: 1px solid var(--line);
    }

.project__body h3 { font-size: 30px; font-weight: 500; letter-spacing: -0.02em; margin: 0; line-height: 1.15; }
.project__meta { font-family: var(--mono); font-size: 12px; color: var(--ink-mute); letter-spacing: 0.06em; margin-top: 16px; }
.project__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 28px 0 0; }
.project__tags li { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; padding: 5px 10px; border: 1px solid var(--line); color: var(--ink-soft); }
.project__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 36px 0 0; padding-top: 28px; border-top: 1px solid var(--line); }
.project__metrics dt { font-size: 36px; font-weight: 500; letter-spacing: -0.02em; }
.project__metrics dd { margin: 4px 0 0; font-family: var(--mono); font-size: 11px; color: var(--ink-mute); letter-spacing: 0.08em; text-transform: uppercase; }

/* ── Skills + edu ─────────────────────────────────────── */
.skills, .edu { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 64px; row-gap: 36px; }
.skills div { padding-top: 20px; border-top: 1px solid var(--line); }
.skills dt { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); letter-spacing: 0.14em; text-transform: uppercase; }
.skills dd { margin: 14px 0 0; font-size: 16px; color: var(--ink); }
.edu li { padding-top: 24px; border-top: 1px solid var(--line); }
.edu h3 { font-size: 18px; font-weight: 500; margin: 0; }
.edu p { font-size: 14px; color: var(--ink-soft); margin-top: 6px; font-family: var(--mono); }

/* ── Contact form ─────────────────────────────────────── */
.contact-form { display: flex; flex-direction: column; gap: 20px; max-width: 560px; }
.contact-form__field { display: flex; flex-direction: column; gap: 8px; }
.contact-form__field label { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); letter-spacing: 0.14em; text-transform: uppercase; }
.contact-form__field input, .contact-form__field textarea { background: transparent; border: none; border-bottom: 1px solid var(--line-strong); padding: 10px 0; font-size: 16px; color: var(--ink); font-family: inherit; outline: none; }
.contact-form__field textarea { min-height: 120px; resize: vertical; }
.contact-form__field input:focus, .contact-form__field textarea:focus { border-bottom-color: var(--ink); }
.contact-form__error { color: #c25; font-size: 12px; font-family: var(--mono); }
.contact-form__summary { color: #c25; font-size: 13px; }
.contact-form__submit { align-self: flex-start; background: var(--ink); color: var(--bg); border: none; padding: 16px 28px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; }

/* Honeypot — visually hidden but accessible to bots. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ── Thanks page ──────────────────────────────────────── */
.thanks { padding: 160px var(--pad-x); max-width: 720px; }
.thanks__eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.thanks__title { font-size: 56px; line-height: 1.05; letter-spacing: -0.03em; font-weight: 500; margin: 16px 0 24px; }
.thanks__lead { font-size: 20px; color: var(--ink-soft); line-height: 1.5; }
.thanks__back { display: inline-block; margin-top: 40px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }

/* ── Footer ───────────────────────────────────────────── */
.footer { display: flex; justify-content: space-between; padding: 48px var(--pad-x); font-family: var(--mono); font-size: 11px; color: var(--ink-mute); letter-spacing: 0.08em; text-transform: uppercase; }