/* Portfolio (served at "/"). Design: grey-green notebook paper, near-black ink,
   pine green accent. Every section is one full screen with scroll snapping. */

:root {
    --paper: #e7e9e2;
    --card: #f2f3ee;
    --card-line: #c3c7bb;
    --media: #d5d9ce;
    --ink: #1a1c19;
    --ink-soft: #3d413b;
    --muted: #5b6058;
    --pine: #274b3d;
    --pine-dark: #1a3a2e;
    --pine-light: #8fb4a2;
    --on-pine: #eef2ec;
    --dark-line: #353832;
    --dark-muted: #8a8f86;

    --font-display: 'Schibsted Grotesk', 'Arial Narrow', Arial, sans-serif;
    --font-body: 'Newsreader', Georgia, 'Times New Roman', serif;
    --font-mono: 'Martian Mono', ui-monospace, Consolas, monospace;

    --content: 1120px;
    --gutter: 80px;
}

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

html {
    scroll-snap-type: y mandatory;
    background: var(--paper);
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

body {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-body);
    background: var(--paper);
}

h1, h2, h3, p { margin: 0; text-wrap: pretty; }
h1, h2 { text-wrap: balance; }

a { color: var(--pine); text-decoration: none; }
a:hover { color: var(--pine-dark); }
a:focus-visible, button:focus-visible {
    outline: 2px solid var(--pine);
    outline-offset: 3px;
}

.g { font-family: var(--font-display); }
.m { font-family: var(--font-mono); }
.accent { color: var(--pine); }
.ink { color: var(--ink); }

.show-mobile { display: none; }

/* Horizontal gutter: at least --gutter, centered content beyond 1280px. */
.wrap {
    padding-inline: max(var(--gutter), calc((100% - var(--content)) / 2));
}

.eyebrow {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.body-text {
    font-size: 19px;
    line-height: 1.5;
    color: var(--ink-soft);
}

.stack { font-size: 11px; color: var(--muted); }

/* ── Screens ─────────────────────────────────────────────────────────────── */

.screen {
    min-height: 100vh;
    min-height: 100svh;
    scroll-snap-align: start;
    background: var(--paper);
}

.section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 64px;
    border-top: 1px solid var(--ink);
}

.section__title {
    font-size: 52px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.card {
    background: var(--card);
    box-shadow: 0 0 0 1px var(--card-line);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 24px;
    font-size: 15px;
    font-weight: 700;
}
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: var(--pine); color: var(--on-pine); }
.btn--outline { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn--outline:hover { color: var(--pine); box-shadow: inset 0 0 0 1px var(--pine); }
.btn--mono { padding: 15px 18px; font-size: 12px; font-weight: 400; gap: 8px; }

/* ── Nav ─────────────────────────────────────────────────────────────────── */

.nav {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: 22px;
    border-bottom: 1px solid var(--ink);
}

.nav__brand {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.nav__links {
    display: flex;
    gap: 32px;
    font-size: 15px;
    font-weight: 500;
}
.nav__links a:not(.accent) { color: var(--ink); }
.nav__links a:not(.accent):hover { color: var(--pine); }

.nav__toggle {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    cursor: pointer;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.screen--hero {
    display: flex;
    flex-direction: column;
}

/* Headline block on top, actions and "right now" below, with a clear but
   capped gap between them. The pair is centered slightly above the middle
   (more bottom padding) so tall screens don't open up a big empty band. */
.hero {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(64px, 11vh, 120px);
    padding-block: 24px 64px;
}

.hero__top {
    display: flex;
    flex-direction: column;
    gap: 28px;
    max-width: 900px;
}

.hero__bottom {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 24px;
    align-items: end;
}

.hero__title {
    font-size: clamp(56px, 7.5vw, 104px);
    line-height: 0.95;
    font-weight: 800;
    letter-spacing: -0.035em;
}

.hero__actions {
    grid-column: span 8;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.now {
    grid-column: 10 / span 3;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding-left: 20px;
    border-left: 1px solid var(--ink);
}

.now__item { display: flex; flex-direction: column; gap: 4px; }
.now__label { font-size: 11px; color: var(--pine); }
.now__text {
    font-size: 22px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.scroll-hint {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding-bottom: 28px;
    font-size: 11px;
    color: var(--muted);
}
.scroll-hint:hover { color: var(--pine); }

/* ── Work ────────────────────────────────────────────────────────────────── */

.work { gap: 32px; }

.work__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}
.work__more { padding: 12px 20px; }

.featured {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    min-height: 360px;
}

.featured__media {
    grid-column: span 7;
    display: flex;
    padding: 24px;
    background: var(--ink);
}

.featured__placeholder {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #4a4e47;
    font-size: 11px;
    color: var(--dark-muted);
}

.featured__body {
    grid-column: span 5;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 32px;
}

.featured__body .body-text { font-size: 18px; }

.featured__meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 11px;
    color: var(--muted);
}

.status { display: inline-flex; align-items: center; gap: 6px; color: var(--pine); }
.status__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pine); }

.featured__title {
    font-size: 44px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.featured__links {
    display: flex;
    gap: 24px;
    margin-top: auto;
    font-size: 15px;
    font-weight: 700;
}

.projects {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.project {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    min-height: 170px;
}

.project__media {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--media);
    font-size: 10px;
    color: var(--muted);
}

.project__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 24px;
}

.project__category { font-size: 11px; color: var(--muted); }

.project__title {
    font-size: 24px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.project__summary {
    font-size: 17px;
    line-height: 1.45;
    color: var(--ink-soft);
}

.project__foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-top: auto;
}
.project__foot a { font-size: 14px; font-weight: 700; }

/* ── Experience ──────────────────────────────────────────────────────────── */

.experience { gap: 40px; }

.section__intro { display: flex; flex-direction: column; gap: 14px; }

.skills { display: flex; flex-direction: column; }

.skills__row {
    display: grid;
    grid-template-columns: 260px repeat(2, minmax(0, 1fr));
    gap: 32px;
    align-items: center;
    padding: 22px 32px;
    border-bottom: 1px solid var(--card-line);
}
.skills__row:last-child { border-bottom: 0; }

.skills__row--head {
    padding-block: 16px;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.skills__name { font-size: 18px; font-weight: 700; }

.legend { display: inline-flex; align-items: center; gap: 8px; }
.legend__swatch {
    width: 10px;
    height: 10px;
    box-shadow: inset 0 0 0 1px var(--ink);
}
.legend__swatch--solid { background: var(--pine); box-shadow: none; }

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
}

.chip {
    padding: 5px 11px;
    box-shadow: inset 0 0 0 1px var(--ink);
}
.chip--solid {
    background: var(--pine);
    color: var(--on-pine);
    box-shadow: none;
}

/* ── About ───────────────────────────────────────────────────────────────── */

.about {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 24px;
    align-content: center;
    align-items: end;
}

.about__main {
    grid-column: span 7;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.about__story {
    font-size: 34px;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.about__side {
    grid-column: 9 / span 4;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.education {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 22px;
}

.education__degree {
    font-size: 22px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.education__school { font-size: 17px; color: var(--ink-soft); }

.cv-note {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-block: 14px;
    border-top: 1px solid var(--card-line);
    font-size: 15px;
    color: var(--ink-soft);
}

/* ── Contact ─────────────────────────────────────────────────────────────── */

.contact {
    display: flex;
    flex-direction: column;
    background: var(--ink);
    color: var(--paper);
}

.contact__main {
    flex-grow: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 48px;
    padding-block: 64px;
}

.contact__title {
    max-width: 820px;
    font-size: clamp(50px, 6.9vw, 88px);
    line-height: 0.96;
    font-weight: 800;
    letter-spacing: -0.035em;
}

.contact__accent { color: var(--pine-light); }

.contact__links {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    flex-shrink: 0;
    font-size: 13px;
}
.contact__links a { color: var(--paper); }
.contact__links a:hover { color: var(--pine-light); }
.contact a:focus-visible { outline-color: var(--pine-light); }

.footer {
    display: flex;
    justify-content: space-between;
    padding-block: 22px;
    border-top: 1px solid var(--dark-line);
    font-size: 11px;
    color: var(--dark-muted);
}

/* ── Tablet ──────────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
    :root { --gutter: 48px; }
    .hero__actions { grid-column: span 12; }
    .now {
        grid-column: span 12;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px 40px;
    }
    .now > .eyebrow { flex-basis: 100%; }
    .project { grid-template-columns: 140px minmax(0, 1fr); }
    .skills__row { grid-template-columns: 180px repeat(2, minmax(0, 1fr)); gap: 24px; padding-inline: 24px; }
    .about__main { grid-column: span 12; }
    .about__side { grid-column: span 12; max-width: 420px; }
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
    :root { --gutter: 20px; }

    .hide-mobile { display: none !important; }
    .show-mobile { display: inline; }

    .section { padding-block: 36px; }
    .section__title { font-size: 34px; }

    /* Nav collapses into a menu button. */
    .nav { padding-block: 8px; }
    .nav__toggle { display: inline-flex; }
    .nav__links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 10;
        flex-direction: column;
        gap: 0;
        padding: 8px 20px 16px;
        background: var(--paper);
        border-bottom: 1px solid var(--ink);
    }
    .nav__links a { padding-block: 12px; }
    .nav.is-open .nav__links { display: flex; }

    .hero { gap: 56px; padding-block: 16px 40px; }
    .hero__top { gap: 20px; }
    .hero__title { font-size: 50px; line-height: 0.98; }
    .hero__bottom { display: flex; flex-direction: column; align-items: stretch; gap: 28px; }
    .hero__actions .btn--solid { width: 100%; height: 52px; }
    .now {
        flex-direction: column;
        gap: 12px;
        padding-left: 16px;
    }
    .now > .eyebrow { flex-basis: auto; }
    .now__item { flex-direction: row; align-items: baseline; gap: 6px; }
    .now__label { font-size: 10px; }
    .now__text { font-size: 18px; }
    .eyebrow { font-size: 10px; }
    .scroll-hint { padding-bottom: 20px; font-size: 10px; }

    /* Work: header dissolves so "See more" can drop to the bottom. */
    .work { gap: 16px; }
    .work__head { display: contents; }
    .work__more { order: 10; width: 100%; height: 48px; }
    .featured { display: flex; flex-direction: column; min-height: 0; }
    .featured__media { height: 170px; padding: 14px; }
    .featured__placeholder { font-size: 10px; }
    .featured__body { gap: 8px; padding: 16px; }
    .featured__body .body-text { font-size: 16px; line-height: 1.45; }
    .featured__meta { font-size: 10px; }
    .featured__title { font-size: 30px; }
    .featured__links a { padding-block: 6px; }
    .projects { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .project { grid-template-columns: 76px minmax(0, 1fr); min-height: 76px; }
    .project__body { justify-content: center; gap: 4px; padding: 12px 14px; }
    .project__category { font-size: 10px; }
    .project__title { font-size: 18px; letter-spacing: -0.01em; }

    /* Experience: one card, chips of both levels flow together per group. */
    .experience { gap: 18px; }
    .skills__row {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding: 16px;
    }
    .skills__row--head { gap: 20px; padding: 14px 16px; font-size: 10px; }
    .skills__spacer { display: none; }
    .skills__name { flex-basis: 100%; margin-bottom: 4px; font-size: 16px; }
    .skills__row .chips { display: contents; font-size: 13px; }
    .chip { padding: 5px 10px; }
    .legend__swatch { width: 9px; height: 9px; }

    .about { display: flex; flex-direction: column; align-items: stretch; gap: 20px; }
    .about__main { gap: 20px; }
    .about__story { font-size: 26px; }
    .about .body-text { font-size: 17px; }
    .about__side { max-width: none; gap: 12px; }
    .education { padding: 16px; }
    .education__degree { font-size: 19px; }
    .education__school { font-size: 16px; }
    .cv-note { padding-block: 0; border-top: 0; font-size: 14px; }

    .contact__main {
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 28px;
        padding-block: 36px;
    }
    .contact__title { font-size: 50px; line-height: 0.98; }
    .contact__links { align-items: stretch; gap: 0; font-size: 12px; }
    .contact__links a { padding-block: 14px; border-bottom: 1px solid var(--dark-line); }
    .contact__links a:last-child { border-bottom: 0; }
    .footer { font-size: 10px; }
}