/*
   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 / 9;
    margin: 0;
    font-size: clamp(3.2rem, 10.5vw, 10rem);
    font-weight: 700;
    line-height: 0.88;
    letter-spacing: -0.045em;
}

/* One line per span, as on a Swiss poster. Direct children only, so spans
   nested inside a line (the blanks, scrambled letters) stay inline. */
h1 > span {
    display: block;
}

/* A blank to be filled in: a fixed-width cyan rule sitting on the baseline */
.slot {
    position: relative;
    display: inline-block;
    width: 4.5em;
    height: 0.1em;
    background: var(--accent);
    vertical-align: baseline;
}

/*
   The words written on the blank. Absolutely positioned so they never
   change the rule's size or position, and set small enough that the
   longest phrase still fits on the rule.
*/
.slot-text {
    position: absolute;
    left: 0;
    bottom: 100%;
    padding-bottom: 0.12em;
    font-size: 0.38em;
    line-height: 1;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

/* Letters mid-scramble flicker in cyan before settling to white */
.scramble-glyph {
    color: var(--accent);
}

.portrait {
    grid-column: 9 / 13;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    /* Kept in colour */
}

/* ---- 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;
}

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

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

/* A little air between lines in a multi-line aside */
.aside li + li {
    margin-top: 6px;
}

/* Label half of a "label: value" aside line, lighter than the value */
.aside-label {
    font-weight: 400;
    color: var(--grey);
}

/* Small certifying-body logo used as an aside link on its own */
.aside .badge {
    display: block;
    height: 64px;
    width: auto;
}

/* 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;
}

/* A body that holds more than one paragraph */
.body p {
    margin: 0;
}

.body p + p {
    margin-top: 16px;
}

/* Working with me: the response-time figure under the paragraph, in cyan */
.body .stat {
    margin-top: 16px;
    color: var(--accent);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

/* Normal-sized follow-on paragraph under the response-time figure */
.body .after-stat {
    margin-top: 16px;
}

/* ---- 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: 70%;
        margin-top: 32px;
    }

    .label {
        margin-bottom: 12px;
    }

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