@font-face {
    font-family: "Mercator ST";
    src:
        url("assets/MercatorST-Regular.woff2") format("woff2"),
        url("assets/MercatorST-Regular.woff") format("woff"),
        url("assets/MercatorST-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Type scale (font-size per Figma breakpoint):
   390→15 | 768→19 | 1024→21 | 1440→28 | 2200→34
   --gap shared by page padding + column gaps. */

:root {
    --color-bg: #fedf16;
    --color-text: #e55121;
    --gap: 10px;
    --rule: max(1px, 0.066em) solid currentColor;
    font-size: clamp(15px, calc(1.058vw + 10.87px), 19px);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

@media (min-width: 768px) {
    :root {
        font-size: clamp(19px, calc(0.781vw + 13px), 21px);
        --gap: clamp(10px, calc(1.953vw - 5px), 15px);
    }
}

@media (min-width: 1024px) {
    :root {
        font-size: clamp(21px, calc(1.682vw + 3.78px), 28px);
        --gap: clamp(15px, calc(1.202vw + 2.69px), 20px);
    }
}

@media (min-width: 1440px) {
    :root {
        font-size: clamp(28px, calc(0.789vw + 16.64px), 34px);
        --gap: clamp(20px, calc(1.316vw + 1.05px), 30px);
    }
}

@media (min-width: 2200px) {
    :root {
        font-size: 34px;
        --gap: 30px;
    }
}

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

html,
body {
    margin: 0;
}

body {
    font-family: "Mercator ST", "Univers", "Arial", sans-serif;
    text-transform: lowercase;
    background-color: var(--color-bg);
    color: var(--color-text);
    min-block-size: 100dvh;
    line-height: 1;
    display: flex;
    flex-direction: column;
    padding: var(--gap);
}

h1,
h2,
h3 {
    text-wrap: balance;
    margin: 0;
    font-weight: normal;
    font-size: 1rem;
    line-height: 1;
}

h2 {
    margin-block-end: 1.5em;
}

p {
    text-wrap: pretty;
    margin: 0;
    line-height: 1.2;

    &.indent {
        text-indent: 4ch;
    }
}

.masthead {
    display: flex;
    flex-direction: column;
    gap: 0.08em;
    flex-shrink: 0;
}

.content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Desktop: constrain content to left column. */
@media (min-width: 1024px) {
    .masthead,
    .content {
        max-inline-size: clamp(488px, calc(75vw - 280px), 800px);
    }
}

@media (min-width: 1440px) {
    .masthead,
    .content {
        max-inline-size: clamp(800px, calc(10vw + 656px), 874px);
    }
}

@media (min-width: 2200px) {
    .masthead,
    .content {
        max-inline-size: 874px;
    }
}

.spacer {
    flex-grow: 1;
    min-block-size: 20px;
}

.bottom {
    margin-block-start: auto;
    display: flex;
    align-items: flex-end;
    padding-block-start: 40px;
}

/* Projects list */

.projects {
    list-style: none;
    padding: 0;
    margin: 0;
    inline-size: 100%;
    display: grid;
    grid-auto-flow: row;
    border-bottom: var(--rule);
}

.projects li {
    padding-block-start: 7px;
    padding-block-end: 10px;
    border-top: var(--rule);
}

.projects li > a,
.projects li:not(:has(a)) {
    display: grid;
    grid-template-columns: 1.75fr 1fr;
    align-items: baseline;
}

.projects a {
    color: inherit;
    text-decoration: none;
}

.ext-arrow {
    font-size: 0.75em;
    padding-left: 0.5em;
}

/* Hover reveals: ext-arrow ≥768px, borders ≥1024px */

@media (hover: hover) and (min-width: 768px) {
    .ext-arrow {
        opacity: 0;
    }
    .projects li:hover .ext-arrow {
        opacity: 1;
    }
}

@media (hover: hover) and (min-width: 1024px) {
    .projects {
        border-bottom-color: transparent;
    }
    .projects li {
        border-top-color: transparent;
    }
    .projects li:hover,
    .projects li:hover + li {
        border-top-color: currentColor;
    }
    .projects:has(li:last-child:hover) {
        border-bottom-color: currentColor;
    }
}

/* Toggle */

#toggle {
    display: none;
}

label[for="toggle"] {
    cursor: pointer;
}

.more-btn {
    min-block-size: 44px;
    display: flex;
    align-items: flex-end;
    font: inherit;
    color: inherit;
}

.bio {
    display: none;
    line-height: 1.2;
}

/* Secondary view */

body:has(#toggle:checked) {
    background-color: var(--color-text);
    color: var(--color-bg);
}

body:has(#toggle:checked) .descriptor,
body:has(#toggle:checked) .spacer,
body:has(#toggle:checked) .content h2,
body:has(#toggle:checked) .projects,
body:has(#toggle:checked) .more-btn {
    display: none;
}

body:has(#toggle:checked) .bio {
    display: block;
}

/* Detail-nav */

.detail-nav {
    display: none;
}

body:has(#toggle:checked) .detail-nav {
    display: block;
    inline-size: 100%;
    transform: translateY(3px);
}

summary {
    list-style: none;
    cursor: pointer;
    min-block-size: 32px;
    display: flex;
    align-items: center;
    gap: 8px;
}

summary::-webkit-details-marker {
    display: none;
}

.twisty {
    display: inline-block;
    font-size: 0.5em;
    transform: translateY(4px);
}

details[open] .twisty {
    transform: rotate(90deg) translateX(3px);
}

details .detail-content {
    margin-block: 0.55em 1em;
    padding-inline-start: 0;
    border-top: var(--rule);
}

/* CV table */

.cv-table {
    inline-size: 100%;
}

.cv-row {
    display: grid;
    grid-template-columns: 0.5fr 0.25fr 2fr;
    column-gap: var(--gap);
    padding-block: 5px;
}

.cv-row:last-child {
    border-bottom: var(--rule);
    padding-block-end: 0.7em;
    margin-block-end: 0.5em;
}

.summary-subhead {
    border-top: var(--rule);
    margin-block-start: 0.5em;
    padding-block-start: 0.5em;
}

.cv-desc,
.cv-dates {
    line-height: 1.2;
    font-variant-numeric: lining-nums tabular-nums;
}

/* Changelog */

.changelog-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-auto-flow: row;
}

.changelog-entry {
    display: grid;
    grid-template-columns: 0.5fr 2.25fr;
    column-gap: var(--gap);
    border-bottom: var(--rule);
    padding-block: 7px;
    padding-right: 1em;
}

.changelog-entry:last-child {
    padding-block-end: 0.35em;
    margin-block-end: 0.5em;
}

.changelog-text {
    line-height: 1.2;
}

/* Contact list */

.contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-auto-flow: row;
}

.contact-list li {
    display: grid;
    grid-template-columns: 0.5fr 2.25fr;
    column-gap: var(--gap);
    border-bottom: var(--rule);
    padding-block: 7px;
}

.contact-list li:last-child {
    padding-block-end: 0.5em;
    margin-block-end: 0.5em;
}

.contact-list a {
    grid-column: 2;
    color: inherit;
    text-decoration: none;
}

/* Debug grid: toggle with 'g' */

#debug-grid {
    display: none;
    position: fixed;
    inset: 0;
    grid-template-columns: repeat(12, 1fr);
    padding-inline: var(--gap);
    pointer-events: none;
    z-index: 9999;
}

#debug-grid.visible {
    display: grid;
}

#debug-grid .col {
    background: rgba(68, 0, 255, 0.33);
}