/*
   Swiss / International Typographic Style.
   Rules of the game: one sans-serif typeface, dark paper, light ink,
   one accent colour (brand cyan), a strict 12-column grid, flush-left ragged-right text,
   hairline rules instead of boxes, and no rounded corners or shadows.
*/

:root {
    /* Brand palette from the original site: near-black, near-white, cyan */
    --paper: #06080d;
    --ink: #f5fbff;
    --grey: #8194a9;
    --accent: #13deef;
    --rule: #333;
    --gutter: 24px;
    --margin: clamp(16px, 4vw, 48px);
    --max: 1400px;
    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

html {
    background: var(--paper);
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.125rem;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    /* The one bold cyan rule across the top of the page */
    border-top: 12px solid var(--accent);
}

a {
    color: inherit;
}

a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* ---- The grid ---- */

.grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    width: min(100% - 2 * var(--margin), var(--max));
    margin: 0 auto;
}

/* ---- Masthead ---- */

.masthead {
    padding: 20px 0;
    font-weight: 700;
}

.wordmark {
    grid-column: 1 / 7;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.wordmark img {
    width: 32px;
    height: 32px;
    display: block;
}

.masthead-contact {
    grid-column: 7 / 13;
    justify-self: end;
    text-decoration: none;
    font-weight: 400;
}

/* ---- Hero ---- */

.hero {
    padding: clamp(48px, 10vw, 140px) 0 clamp(40px, 6vw, 80px);
    align-items: end;
}

h1 {
    grid-column: 1 / 10;
    margin: 0;
    font-size: clamp(3.2rem, 10.5vw, 10rem);
    font-weight: 700;
    line-height: 0.88;
    letter-spacing: -0.045em;
}

/* One word per line, as on a Swiss poster */
h1 span {
    display: block;
}

.portrait {
    grid-column: 10 / 13;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    /* Kept in colour: a real, unedited photo */
}

/* ---- Rows: label | body | aside ---- */

.row {
    border-top: 1px solid var(--rule);
    padding: 20px 0 56px;
}

.label {
    grid-column: 1 / 4;
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.45;
}

.num {
    color: var(--accent);
    margin-right: 0.5em;
    font-variant-numeric: tabular-nums;
}

.body {
    grid-column: 4 / 10;
    margin: 0;
    max-width: 38em;
}

.body a {
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

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

.aside {
    grid-column: 10 / 13;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* The intro is the one big block of text: set larger and full width */
.intro {
    border-top-width: 3px;
}

.intro .body {
    grid-column: 4 / 13;
    max-width: none;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    line-height: 1.3;
    letter-spacing: -0.015em;
}

/* ---- Contact ---- */

.email {
    grid-column: 4 / 13;
    font-size: clamp(2rem, 6vw, 5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.email:hover {
    color: var(--accent);
}

/* ---- Colophon ---- */

.colophon {
    padding-bottom: 48px;
}

.colophon .body {
    font-size: 0.8125rem;
    color: var(--grey);
}

/* ---- Small screens: collapse to one column ---- */

@media (max-width: 760px) {
    .wordmark,
    .masthead-contact,
    h1,
    .portrait,
    .label,
    .body,
    .intro .body,
    .aside,
    .email {
        grid-column: 1 / -1;
    }

    .masthead-contact {
        justify-self: start;
    }

    .portrait {
        width: 50%;
        margin-top: 32px;
    }

    .label {
        margin-bottom: 12px;
    }

    .aside {
        margin-top: 16px;
    }
}