/* ============================================================
   Christopher Teh Boon Sung — personal site
   Design tokens from the Stitch export (des.txt):
   parchment ground, hairline rules, flat surfaces, no shadows,
   EB Garamond display / Hanken Grotesk text / JetBrains Mono data.
   ============================================================ */

:root {
    --bg: #f9f8f3;
    --surface: #fbf9f8;
    --surface-low: #f5f3f3;
    --surface-mid: #efeded;
    --surface-high: #eae8e7;
    --ink: #1b1c1c;
    --primary: #000101;
    --muted: #44474a;
    --faint: #848480;
    --accent: #9f3e43;
    --accent-dark: #80272e;
    --accent-pale: #ffdad9;
    --hairline: rgba(27, 28, 28, 0.15);
    --hairline-soft: rgba(27, 28, 28, 0.08);
    --chip-border: rgba(0, 1, 1, 0.2);

    --font-serif: "EB Garamond", Georgia, serif;
    --font-sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
    --font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;

    --margin: 24px;
    --gutter: 32px;
}

@media (min-width: 900px) {
    :root { --margin: 80px; }
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 120px;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    margin: 0;
    background-color: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

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

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

a { color: inherit; }

/* ---------- typography ---------- */

.display {
    font-family: var(--font-serif);
    font-size: clamp(42px, 5.2vw, 64px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 500;
    margin: 0;
}

.headline {
    font-family: var(--font-serif);
    font-size: 32px;
    line-height: 1.2;
    font-weight: 500;
    margin: 0;
}

.headline-sm {
    font-family: var(--font-serif);
    font-size: 24px;
    line-height: 1.25;
    font-weight: 500;
    margin: 0;
}

.body-lg {
    font-size: 18px;
    line-height: 1.6;
    letter-spacing: 0.01em;
    overflow-wrap: anywhere;
}

.label {
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.1em;
    font-weight: 700;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.mono {
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 400;
}

.muted { color: var(--muted); }
.faint { color: var(--faint); }
.accent { color: var(--accent); }

/* ---------- layout ---------- */

.container {
    width: 100%;
    max-width: 1536px;
    margin-inline: auto;
    padding-inline: var(--margin);
}

main.container { flex-grow: 1; padding-block: 48px 96px; }

@media (min-width: 900px) {
    main.container { padding-block: 96px 128px; }
}

.grid12 { display: grid; grid-template-columns: 1fr; gap: var(--gutter); }

@media (min-width: 900px) {
    .grid12 { grid-template-columns: repeat(12, 1fr); }
    .col-4 { grid-column: span 4; }
    .col-6 { grid-column: span 6; }
    .col-8 { grid-column: span 8; }
    .col-12 { grid-column: span 12; }
    .col-start-5 { grid-column: 5 / span 8; }
    .col-start-6 { grid-column: 6 / span 6; }
    .sticky-side { position: sticky; top: 128px; align-self: start; }
}

.hairline-t { border-top: 1px solid var(--hairline); }
.hairline-b { border-bottom: 1px solid var(--hairline); }

.section { margin-bottom: 96px; padding-top: 48px; }
.section:last-child { margin-bottom: 0; }

/* ---------- homepage hero ---------- */

.home-hero {
    align-items: end;
    margin-bottom: 128px;
}

.home-hero-aside {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.hero-portrait {
    width: min(100%, 260px);
    aspect-ratio: 896 / 1197;
    margin: 0 0 32px;
    border: 1px solid var(--hairline);
    background: var(--surface-low);
    overflow: hidden;
}

.hero-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
    mix-blend-mode: multiply;
}

@media (max-width: 899px) {
    .home-hero { margin-bottom: 96px; }
    .hero-portrait { width: min(72vw, 240px); margin-bottom: 28px; }
}

/* ---------- nav ---------- */

.site-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg);
    border-bottom: 1px solid rgba(0, 1, 1, 0.1);
}

.site-nav .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: 28px;
    gap: 24px;
    min-width: 0;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--primary);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.brand-icon {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
}
.brand-icon path { stroke: currentColor; }

.nav-links {
    display: none;
    align-items: center;
    gap: 22px;
    flex-wrap: nowrap;
}

.nav-links a:not(.btn) {
    font-family: var(--font-sans);
    font-size: 12px;
    letter-spacing: 0.1em;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--muted);
    padding-bottom: 3px;
    white-space: nowrap;
    transition: color 0.15s;
}

.nav-links a:not(.btn):hover { color: var(--primary); }

.nav-links a.active {
    color: var(--accent);
    border-bottom: 1px solid var(--accent);
}

.btn {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 12px;
    letter-spacing: 0.1em;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-dark); }

.btn-muted { background: var(--muted); color: var(--bg); }
.btn-muted:hover { background: var(--primary); }

.btn-outline {
    background: transparent;
    color: var(--primary);
    border: 1px solid var(--primary);
}
.btn-outline:hover { background: var(--primary); color: #fff; }

.menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    background: none;
    border: none;
    padding: 8px 0;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 12px;
    letter-spacing: 0.1em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--primary);
}

/* mobile menu */
.mobile-menu {
    display: none;
    border-top: 1px solid var(--hairline);
    padding: 16px var(--margin) 32px;
    flex-direction: column;
    gap: 20px;
    background: var(--bg);
}

.mobile-menu.open { display: flex; }

.mobile-menu a {
    font-family: var(--font-sans);
    font-size: 12px;
    letter-spacing: 0.1em;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--muted);
}

.mobile-menu a.active { color: var(--accent); }

@media (min-width: 1180px) {
    .nav-links { display: flex; }
    .menu-toggle { display: none; }
    .mobile-menu { display: none !important; }
}

/* ---------- chips / badges ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 12px; }

.chip {
    font-family: var(--font-sans);
    font-size: 12px;
    letter-spacing: 0.1em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--primary);
    border: 1px solid var(--chip-border);
    padding: 8px 16px;
}

.badge {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: 0.1em;
    font-weight: 700;
    text-transform: uppercase;
    border: 1px solid var(--chip-border);
    color: var(--primary);
    padding: 4px 8px;
}

.badge-accent { border-color: var(--accent); color: var(--accent); }

/* ---------- entry rows (dates left, content right) ---------- */

.entry {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding-block: 32px;
    border-bottom: 1px solid var(--hairline);
}

.entry:first-child { border-top: 1px solid var(--hairline); }

@media (min-width: 700px) {
    .entry { grid-template-columns: 140px 1fr; gap: var(--gutter); }
}

.entry .when {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--muted);
    padding-top: 4px;
}

.entry h3 { margin: 0 0 8px; }
.entry p { margin: 0 0 8px; }
.entry p:last-child { margin-bottom: 0; }

/* publication list item */
.pub {
    padding-block: 24px;
    border-bottom: 1px solid var(--hairline);
}

.pub p { margin: 0; }

.pub .ref { font-size: 15px; line-height: 1.55; color: var(--muted); }
.pub .ref strong { color: var(--primary); }
.pub .ref em { color: var(--muted); }
.pub .ref a { color: var(--accent); text-decoration: none; word-break: break-all; }
.pub .ref a:hover { text-decoration: underline; }

.id-links a { color: var(--muted); text-decoration: none; transition: color 0.15s; }
.id-links a:hover { color: var(--accent); text-decoration: underline; }

/* year block heading with trailing rule */
.year-head {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin: 0 0 8px;
}
.year-head::after { content: ""; flex-grow: 1; border-top: 1px solid var(--hairline); }

/* ---------- tables (grants, courses) ---------- */

.data-table { width: 100%; border-collapse: collapse; }

.data-table th {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 400;
    color: var(--muted);
    text-align: left;
    padding: 12px 16px 12px 0;
    border-bottom: 1px solid var(--hairline);
}

.data-table td {
    padding: 20px 16px 20px 0;
    border-bottom: 1px solid var(--hairline);
    vertical-align: baseline;
    font-size: 15px;
}

.data-table td.num, .data-table th.num { text-align: right; padding-right: 0; }
.data-table td.mono-cell { font-family: var(--font-mono); font-size: 13px; color: var(--muted); white-space: nowrap; }
.data-table tr:hover td { background: var(--surface-low); }

/* ---------- cards ---------- */

.tile {
    background: var(--surface-low);
    border: 1px solid var(--hairline-soft);
    padding: 32px;
}

.tile-white {
    background: #fff;
    border: 1px solid var(--chip-border);
    padding: 32px;
}

/* figure placeholder */
.placeholder-fig {
    background: var(--surface-high);
    border: 1px solid var(--hairline);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--faint);
    font-family: var(--font-mono);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: center;
    padding: 16px;
}

.portrait { filter: grayscale(1); mix-blend-mode: multiply; opacity: 0.92; }

/* ---------- links ---------- */

.text-link {
    color: var(--primary);
    text-decoration: none;
    font-family: var(--font-sans);
    font-size: 12px;
    letter-spacing: 0.1em;
    font-weight: 700;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(0, 1, 1, 0.3);
    padding-bottom: 4px;
    transition: color 0.15s, border-color 0.15s;
}

.text-link:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- forms ---------- */

.plain-form input,
.plain-form textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--chip-border);
    border-radius: 0;
    padding: 12px 0;
    font-family: var(--font-sans);
    font-size: 16px;
    color: var(--primary);
    outline: none;
    transition: border-color 0.15s;
}

.plain-form input:focus,
.plain-form textarea:focus { border-bottom-color: var(--accent); }

.plain-form ::placeholder { color: var(--faint); }

.plain-form textarea { resize: none; }

/* ---------- footer ---------- */

.site-footer {
    margin-top: auto;
    background: var(--bg);
    border-top: 1px solid rgba(0, 1, 1, 0.1);
}

.site-footer .inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
    padding-block: 48px;
    text-align: center;
}

@media (min-width: 900px) {
    .site-footer .inner { flex-direction: row; text-align: left; }
}

.site-footer a {
    color: var(--faint);
    text-decoration: none;
    transition: color 0.15s;
}

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

.footer-links { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; }

/* ---------- stats strip ---------- */

.stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--hairline);
    border: 1px solid var(--hairline);
}

@media (min-width: 700px) {
    .stats { grid-template-columns: repeat(4, 1fr); }
}

.stats > div { background: var(--bg); padding: 24px; }

.stats .figure {
    font-family: var(--font-serif);
    font-size: 40px;
    line-height: 1.1;
    font-weight: 500;
    color: var(--primary);
}

/* ---------- misc ---------- */

.rule-short { width: 48px; border: none; border-top: 1px solid rgba(0, 1, 1, 0.2); margin: 16px 0 0; }

.num-marker {
    font-family: var(--font-sans);
    font-size: 12px;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--accent);
    display: block;
    margin-bottom: 8px;
}

ul.clean { list-style: none; margin: 0; padding: 0; }

/* ---------- numbered reference lists (publications, media, etc.) ---------- */

ol.ref-list { margin: 0; padding-left: 2.2em; }

ol.ref-list li {
    padding: 14px 0 14px 6px;
    border-bottom: 1px solid var(--hairline);
    font-size: 15px;
    line-height: 1.55;
    color: var(--muted);
}

ol.ref-list li::marker {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--faint);
}

ol.ref-list li strong { color: var(--primary); }
ol.ref-list li em { font-style: italic; }
ol.ref-list a { color: var(--accent); text-decoration: none; word-break: break-word; }
ol.ref-list a:hover { text-decoration: underline; }

ol.ref-list .tag {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--accent);
    white-space: nowrap;
}