/* mac.clemmens.com
   Dark, one page, no framework and no web fonts, so it renders in a single
   round trip. */

:root {
    --bg: #0a0d12;
    --panel: #11161e;
    --line: #232c38;
    --text: #e8ecf2;
    --muted: #97a3b4;
    --accent: #5aa9ff;
    --accent-dark: #1d4d80;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 400 1.0625rem/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.wrap {
    width: 100%;
    max-width: 44rem;
    margin: 0 auto;
    padding: 0 1.35rem;
}

a { color: var(--accent); }
a:hover { color: #8dc4ff; }

/* Visible focus everywhere. The whole point of this site is that the people
   who navigate by keyboard are not an afterthought. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 2px;
}

.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    padding: 0.7rem 1rem;
    background: var(--accent);
    color: #04070c;
    font-weight: 600;
    z-index: 10;
}

.skip:focus {
    left: 0.5rem;
    top: 0.5rem;
}

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

   Two arrangements. On a phone the photo is a band across the top with the
   text underneath it, because a portrait viewport crops a landscape photo so
   hard that laying text over it either hides the subject or leaves him with
   his head cut off. On anything wider the photo goes full bleed behind the
   text, which has room to sit to his left. */

.hero {
    position: relative;
    isolation: isolate;
    padding-bottom: 2.75rem;
    border-bottom: 1px solid var(--line);
}

.hero-media {
    display: block;
    position: relative;
    animation: rise 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.hero-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 6 / 5;
    object-fit: cover;
    object-position: center;
}

/* Dissolves the bottom of the photo into the page rather than ending it on a
   hard line. */
.hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        var(--bg) 1%,
        rgba(10, 13, 18, 0.35) 45%,
        rgba(10, 13, 18, 0.15) 100%);
}

.hero-body {
    position: relative;
    margin-top: -1.5rem;
    animation: rise 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s both;
}

@media (min-width: 46rem) {
    .hero {
        display: flex;
        align-items: flex-end;
        min-height: min(86vh, 44rem);
        padding: 7rem 0 4rem;
        overflow: hidden;
    }

    .hero-media {
        position: absolute;
        inset: 0;
        z-index: -1;
    }

    .hero-media img {
        height: 100%;
        aspect-ratio: auto;
        object-position: 78% 28%;
    }

    /* Heavier on the left, where the text is, and light on the right so he is
       not flattened into the curtain behind him. */
    .hero-media::after {
        background:
            linear-gradient(to top, rgba(10, 13, 18, 0.95) 8%, rgba(10, 13, 18, 0.45) 55%, rgba(10, 13, 18, 0.3) 100%),
            linear-gradient(to right, rgba(10, 13, 18, 0.92) 22%, rgba(10, 13, 18, 0.45) 55%, rgba(10, 13, 18, 0.1) 100%);
    }

    .hero-body {
        margin-top: 0;
        max-width: 62rem;
    }

    .hero-body > * { max-width: 34rem; }
}

@keyframes rise {
    from { opacity: 0; transform: scale(1.04) translateY(1.25rem); }
    to   { opacity: 1; transform: none; }
}

.eyebrow {
    margin: 0 0 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
}

.hero h1 {
    margin: 0;
    font-size: clamp(2.75rem, 11vw, 4.75rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
    font-weight: 700;
}

.roles {
    margin: 0.9rem 0 0;
    font-size: clamp(0.95rem, 3.4vw, 1.15rem);
    font-weight: 500;
    color: #cdd6e2;
}

.lede {
    margin: 1.35rem 0 0;
    max-width: 34rem;
    color: var(--muted);
}

.lede a { color: #bcd8f8; }

.hero-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin: 1.9rem 0 0;
}

.button {
    display: inline-block;
    padding: 0.72rem 1.25rem;
    border-radius: 999px;
    background: var(--accent);
    color: #04070c;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    border: 1px solid var(--accent);
}

.button:hover { background: #8dc4ff; color: #04070c; }

.button.ghost {
    background: transparent;
    color: var(--text);
    border-color: #3b4757;
}

.button.ghost:hover { background: rgba(90, 169, 255, 0.12); color: var(--text); }

/* ---------- sections ---------- */

main { padding: 5.25rem 1.35rem 1rem; }

section + section { margin-top: 3.5rem; }

h2 {
    margin: 0 0 1.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
}

h3 {
    margin: 0.35rem 0 0.6rem;
    font-size: 1.4rem;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

h3 a {
    color: var(--text);
    text-decoration: none;
}

h3 a:hover {
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-underline-offset: 3px;
}

p { margin: 0 0 0.9rem; }

/* ---------- entries ---------- */

/* The whole card is the click target, but only the title is a link: its
   ::after is stretched over the card. That keeps one link per article
   instead of three to the same URL, which is three stops for anyone tabbing
   through or listening to a list of links. */
.entry {
    position: relative;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    overflow: hidden;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.entry:hover,
.entry:focus-within {
    background: #131922;
    border-color: rgba(90, 169, 255, 0.45);
}

.entry + .entry { margin-top: 1.5rem; }

.entry-link::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.entry:hover .entry-link {
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-underline-offset: 3px;
}

.entry-media {
    position: relative;
    display: block;
    line-height: 0;
}

.entry-media img {
    width: 100%;
    height: auto;
    opacity: 0.92;
    transition: opacity 0.2s ease;
}

.entry:hover .entry-media img { opacity: 1; }

/* Corner rather than centre. This thumbnail has the session title burnt into
   the middle of it, and a centred badge sat on top of the words. */
.play {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 50%;
    background: rgba(8, 11, 16, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.4);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.entry:hover .play {
    background: var(--accent);
    border-color: var(--accent);
}

.play::after {
    content: "";
    position: absolute;
    left: 55%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 0.5rem 0 0.5rem 0.82rem;
    border-color: transparent transparent transparent #fff;
}

.entry-body { padding: 1.4rem 1.4rem 1.5rem; }

.kicker {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}

.entry-body p { color: var(--muted); }
.entry-body p:last-child { margin-bottom: 0; }

/* Reads as the thing to click, without being a second link to the same page. */
.action {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 1.15rem;
    margin-bottom: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent);
}

.entry-body p.action { color: var(--accent); }

.action::after {
    content: "\2192";
    transition: transform 0.2s ease;
}

.entry:hover .action::after { transform: translateX(0.2rem); }

#about p { color: var(--muted); }

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

footer {
    margin-top: 4rem;
    padding-top: 1.75rem;
    padding-bottom: 3rem;
    border-top: 1px solid var(--line);
}

.elsewhere {
    display: flex;
    flex-wrap: wrap;
    gap: 1.35rem;
    margin: 0 0 0.9rem;
    font-size: 0.95rem;
}

.fine {
    margin: 0;
    font-size: 0.85rem;
    color: #6d798a;
}

@media (min-width: 46rem) {
    .entry-body { padding: 1.75rem 1.9rem 1.9rem; }
    main { padding-top: 6.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-media img,
    .hero-body {
        animation: none;
    }
    .entry-media img,
    .entry,
    .play,
    .action::after {
        transition: none;
    }
}