@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=Manrope:wght@400;500;600&display=swap");

:root {
    --dark: #171715;
    --dark-soft: #20201D;
    --dark-text: #F4F4F0;
    --dark-muted: #A8A8A1;
    --dark-line: #30302D;

    --light: #F4F4F0;
    --light-text: #171715;
    --light-muted: #70706A;
    --light-line: #D8D8D2;

    --page-width: 1100px;
    --side-padding: clamp(24px, 5vw, 72px);
}


/* --------------------------------
   Base
-------------------------------- */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    background: var(--dark);
    color: var(--dark-text);

    font-family:
        "Avenir Next",
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    font-size: 16px;
    line-height: 1.5;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: inherit;
}


/* --------------------------------
   Opening
-------------------------------- */

.intro {
    position: relative;

    min-height: 100svh;
    padding: var(--side-padding);

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--dark);
    color: var(--dark-text);
}

.intro-name h1 {
    margin: 0;

    font-family:
        "Avenir Next",
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    font-size: clamp(2.25rem, 6vw, 5.5rem);
    font-weight: 400;
    letter-spacing: -0.045em;
    line-height: 1;
}


/* --------------------------------
   Scroll cue
-------------------------------- */

.scroll-cue {
    position: fixed;
    z-index: 10;

    left: 0;
    right: 0;
    bottom: 0;

    height: 19vh;
    min-height: 120px;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    padding-bottom: 34px;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            rgba(23, 23, 21, 0),
            rgba(23, 23, 21, 0.55) 60%,
            rgba(23, 23, 21, 0.94) 100%
        );

    opacity: 1;
    visibility: visible;

    transition:
        opacity 600ms ease,
        visibility 600ms ease;
}

.scroll-cue.is-hidden {
    opacity: 0;
    visibility: hidden;
}

.scroll-arrow {
    position: relative;

    width: 11px;
    height: 16px;

    opacity: 0.42;

    transform: translateY(0);

    animation:
        subtle-arrow 3.2s ease-in-out infinite;
}

.scroll-arrow::before,
.scroll-arrow::after {
    content: "";

    position: absolute;
    bottom: 0;

    width: 1px;
    height: 9px;

    background: var(--dark-text);
}

.scroll-arrow::before {
    left: 2px;

    transform:
        rotate(-40deg);

    transform-origin: bottom;
}

.scroll-arrow::after {
    right: 2px;

    transform:
        rotate(40deg);

    transform-origin: bottom;
}

@keyframes subtle-arrow {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(2px);
    }
}


/* --------------------------------
   Resume area
-------------------------------- */

.information {
    width: 100%;
    margin: 0;

    padding:
        12vh 0
        17vh;

    background: var(--light);
    color: var(--light-text);
}

.information > * {
    width: min(100%, var(--page-width));
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--side-padding);
    padding-right: var(--side-padding);
}

.resume-section {
    display: grid;

    grid-template-columns:
        minmax(130px, 0.28fr)
        minmax(0, 1fr);

    column-gap: clamp(32px, 8vw, 110px);

    padding-top: 64px;
    padding-bottom: 64px;

    opacity: 0;
    transform: translateY(18px);

    transition:
        opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.resume-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.resume-section + .resume-section {
    border-top: 1px solid var(--light-line);
}


/* --------------------------------
   Section headings
-------------------------------- */

.resume-section h2 {
    margin: 0;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 0.78rem;
    font-weight: 700;

    letter-spacing: 0.08em;
    line-height: 1;

    text-transform: uppercase;
}


/* --------------------------------
   Entries
-------------------------------- */

.entries {
    min-width: 0;
}

.entry {
    display: grid;

    /*
        The image occupies its own column.
        The row itself is vertically centered,
        rather than aligning the image with
        the first line of text.
    */

    grid-template-columns: 56px minmax(0, 1fr);

    column-gap: 24px;

    align-items: center;

    opacity: 0;
    transform: translateY(12px);

    transition:
        opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.resume-section.is-visible .entry {
    opacity: 1;
    transform: translateY(0);
}

.resume-section.is-visible .entry:nth-child(1) {
    transition-delay: 80ms;
}

.resume-section.is-visible .entry:nth-child(2) {
    transition-delay: 150ms;
}

.resume-section.is-visible .entry:nth-child(3) {
    transition-delay: 220ms;
}

.resume-section.is-visible .entry:nth-child(4) {
    transition-delay: 290ms;
}

.resume-section.is-visible .entry:nth-child(5) {
    transition-delay: 360ms;
}

.entry + .entry {
    margin-top: 36px;
}


/* --------------------------------
   Logos
-------------------------------- */

.entry-logo {
    width: 48px;
    height: 48px;

    display: block;

    object-fit: contain;
    object-position: center;

    /*
        Slight rounding makes photographic
        or rectangular logos feel intentional
        alongside transparent logos.
    */

    border-radius: 7px;
}


/* --------------------------------
   Entry typography
-------------------------------- */

.entry-content {
    min-width: 0;
}

.entry-primary {
    margin: 0;

    color: var(--light-text);

    font-family:
        "Manrope",
        sans-serif;

    font-size: 1rem;
    font-weight: 600;

    letter-spacing: -0.025em;
    line-height: 1.25;
}

.entry-secondary {
    margin: 2px 0 0;

    color: var(--light-text);

    font-family:
        "Manrope",
        sans-serif;

    font-size: 0.93rem;
    font-weight: 400;

    letter-spacing: -0.018em;
    line-height: 1.25;
}

.entry-date {
    margin: 4px 0 0;

    color: var(--light-muted);

    font-family:
        "Manrope",
        sans-serif;

    font-size: 0.82rem;
    font-style: italic;
    font-weight: 400;

    letter-spacing: -0.012em;
    line-height: 1.2;
}


/* --------------------------------
   Footer
-------------------------------- */

.footer {
    width: 100%;

    background: var(--dark);
    color: var(--dark-text);

    border-top: 1px solid var(--dark-line);
}

.footer-inner {
    width: min(100%, var(--page-width));
    margin: 0 auto;

    padding:
        48px var(--side-padding)
        56px;

    display: flex;
    align-items: baseline;
    justify-content: space-between;

    gap: 32px;
}

.footer-name {
    margin: 0;

    font-family:
        "Avenir Next",
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    font-size: 0.9rem;
    font-weight: 500;
}

.social-links {
    display: flex;
    flex-wrap: wrap;

    justify-content: flex-end;

    gap: 18px 24px;
}

.social-links a {
    color: var(--dark-muted);

    font-family:
        "Avenir Next",
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    font-size: 0.875rem;
    font-weight: 400;

    text-decoration: none;

    transition:
        color 180ms ease;
}

.social-links a:hover,
.social-links a:focus-visible {
    color: var(--dark-text);
}


/* --------------------------------
   Loading / empty states
-------------------------------- */

.entries:empty::after {
    content: "";

    display: block;

    width: 18px;
    height: 1px;

    background: var(--light-line);
}


/* --------------------------------
   Responsive
-------------------------------- */

@media (max-width: 700px) {
    .intro {
        justify-content: flex-start;
        align-items: flex-end;

        padding-bottom: 15vh;
    }

    .intro-name h1 {
        font-size: clamp(2.4rem, 12vw, 4rem);
    }

    .resume-section {
        display: block;

        padding: 52px 0;
    }

    .resume-section h2 {
        margin-bottom: 34px;
    }

    .entry {
        grid-template-columns: 44px minmax(0, 1fr);

        column-gap: 18px;
    }

    .entry-logo {
        width: 40px;
        height: 40px;

        border-radius: 6px;
    }

    .entry-primary {
        font-size: 0.98rem;
    }

    .entry-secondary {
        font-size: 0.92rem;
    }

    .entry-date {
        font-size: 0.82rem;
    }

    .entry + .entry {
        margin-top: 32px;
    }

    .footer-inner {
        display: block;
    }

    .social-links {
        justify-content: flex-start;

        margin-top: 20px;
    }
}


/* --------------------------------
   Reduced motion
-------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .scroll-arrow {
        animation: none;
    }

    .scroll-cue,
    .resume-section,
    .entry {
        transition: none;
    }

    .resume-section,
    .entry {
        opacity: 1;
        transform: none;
    }
}