/* ─── Custom Properties ─────────────────────────────────────────────────── */

:root {
    --color-bg: #fff;
    --color-text: #000000;
    --color-portfolio-muted: #eeeeee;
    --font-family: 'RM Neue', Helvetica, Tahoma, sans-serif;
    --nav-margin-top: 32px;
}

/* ─── Fonts ──────────────────────────────────────────────────────────────── */

@font-face {
    font-family: 'RM Neue';
    src: url('fonts/RMNeue-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'RM Neue';
    src: url('fonts/RMNeue-SemiBold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'RM Neue';
    src: url('fonts/RMNeue-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ─── Reset ──────────────────────────────────────────────────────────────── */

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

/* ─── Base ───────────────────────────────────────────────────────────────── */

html {
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-text-size-adjust: 100%;
}

body {
    width: 100%;
    min-height: 100%;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0.001em;
    transition: background-color 0.1s ease-out;
    /* Guards the full-bleed .project__media breakout (100vw-based), which can
       otherwise introduce a stray horizontal scrollbar. Must live here, not
       on an ancestor inside .main (max-width:1440px) — that would clip the
       breakout itself on any viewport wider than 1440px. */
    overflow-x: hidden;
}

body.dark-theme {
    background-color: var(--color-text);
    color: var(--color-bg);
}

a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    /* Without this, mobile browsers hold a short delay after a tap to see if
       a second one arrives (to tell a click apart from double-tap-to-zoom,
       which the viewport meta above leaves enabled). An impatient re-tap in
       that window reads as the zoom gesture and cancels the click instead of
       firing it — this tells the browser a tap here is never the start of
       that gesture, so it fires immediately with no disambiguation delay. */
    touch-action: manipulation;
}

a:hover, a:active {
    outline: 0;
}

img {
    display: block;
    width: 100%;
    border: 0;
}

video {
    display: block;
    width: 100%;
    height: auto;
    border: none;
}

h1, h2, h3, h4 {
    font-weight: 400;
}

h1 {
    letter-spacing: -0.03em;
}

h2 {
    font-family: var(--font-family);
    font-size: 36px;
}

h3 {
    font-size: 32px;
    font-weight: 600;
    line-height: 36px;
    text-align: left;
}

@media (min-width: 960px) {
    h3 { font-size: 36px; }
}

h4 {
    font-family: var(--font-family);
    font-weight: 700;
    letter-spacing: 0.002em;
    text-transform: uppercase;
}

p {
    text-align: left;
}

@media (min-width: 48em) {
    body { font-size: 24px; }
    h2   { font-size: 48px; }
}

/* ─── Utilities ──────────────────────────────────────────────────────────── */

.spacer_right      { margin-left: 20px; }
.spacer_left       { margin-left: 20px; }
.spacer_left_right { margin-left: 20px; margin-right: 20px; }

/* ─── Link underline ─────────────────────────────────────────────────────── */

.link {
    position: relative;
}

.link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    opacity: 0;
    transition: opacity 0.1s ease-out;
}

.link.active::after {
    opacity: 1;
}

@media (hover: hover) {
    .link:hover::after {
        opacity: 1;
    }
}

body.dark-theme .link::after {
    background-color: #fff;
}

/* ─── Caret ──────────────────────────────────────────────────────────────── */

.caret {
    width: 0;
    height: 0;
}

.caret--down {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid currentColor;
}

body.dark-theme .caret--down {
    border-top-color: #fff;
}

@media (min-width: 48em) {
    .caret--down {
        border-left-width: 10px;
        border-right-width: 10px;
        border-top-width: 10px;
    }
}

/* ─── Navigation ─────────────────────────────────────────────────────────── */

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    margin-top: var(--nav-margin-top);
}

.navigation {
    list-style: none;
    font-size: 20px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    text-align: center;
    line-height: 1;
    letter-spacing: 0.002em;
}

.navigation__item {
    display: inline-block;
    line-height: 1;
}

.navigation__item + .navigation__item {
    margin-left: 34px;
}

@media (min-width: 48em) {
    :root { --nav-margin-top: 48px; }

    .navigation {
        font-size: 24px;
    }

    .navigation__item + .navigation__item {
        margin-left: 60px;
    }
}

/* ─── Masthead ───────────────────────────────────────────────────────────── */

.masthead {
    /* min-height, not height: a structural safety net so that even if the
       --vh correction above is ever imperfectly timed, the hero can only
       ever grow to fit its content, never render short and crop it. */
    min-height: 100vh;
    min-height: 100dvh;
    min-height: calc(var(--vh, 1vh) * 100);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow-x: clip;
}

.ver-center-parent {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.ver-center-child {
    display: contents;
}

.masthead__scroll-button-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
}

.masthead__scroll-button {
    display: inline-block;
    vertical-align: bottom;
    cursor: pointer;
    padding: 32px;
    user-select: none;
    transition: opacity 0.2s ease;
    animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(8px); }
}

@media (min-width: 48em) {
    .masthead__scroll-button-container {
        bottom: 16px;
    }
}

/* ─── Headlines ──────────────────────────────────────────────────────────── */

.homepage__headline {
    font-size: 122px;
    letter-spacing: -0.03em;
    line-height: 1;
    text-align: center;
    color: var(--color-text);
    margin: auto;
    max-width: 80%;
}

.masthead__headline {
    font-size: 90px;
    line-height: 0.9;
    color: var(--color-text);
    margin: auto;
    max-width: 80%;
    text-align: center;
}

.masthead__headline__dark {
    font-size: 90px;
    line-height: 0.9;
    color: #fff;
    margin: auto;
    max-width: 66%;
}

@media (min-width: 48em) {
    .homepage__headline       { font-size: 170px; }
    .masthead__headline       { font-size: 184px; line-height: 0.9; }
    .masthead__headline__dark { font-size: 184px; line-height: 0.9; max-width: 850px; }
}

/* "Top Trump Trumps" wraps onto 2-3 lines at this title's size (unlike most
   single-line case study titles), and the site-wide 0.9 line-height is tight
   enough that ascenders and descenders on adjacent lines touch. Loosened
   just for this page rather than site-wide, to avoid shifting every other
   masthead title's rhythm. */
.work--toptrumptrumps .masthead__headline { line-height: 1.05; }

/* ─── Layout ─────────────────────────────────────────────────────────────── */

.main {
    max-width: 1440px;
    margin: 0 auto;
}

.container {
    margin: 0 auto;
}

.content {
    padding-top: 48px;
    max-width: 1220px;
    margin: auto;
}

@media (min-width: 48em) {
    .container { margin-right: 7.8125%; margin-left: 7.8125%; }
    .content   { padding-top: 48px; }
}

@media (min-width: 90em) {
    .container { margin-right: 8.33333%; margin-left: 8.33333%; }
}

/* ─── Masthead center content ────────────────────────────────────────────── */

.masthead__center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}

@media (min-width: 48em) {
    .masthead__center { gap: 16px; }
}

/* ─── Welcome / Intro text ───────────────────────────────────────────────── */

.welcome-text {
    font-size: 20px;
    width: calc(100% - 10px);
    padding: 0 64px;
    box-sizing: border-box;
    text-align: center;
    line-height: 1.40;
}

.para-line {
    display: block;
    white-space: nowrap;
    overflow-wrap: break-word;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
}

@media (min-width: 48em) {
    .welcome-text {
        font-size: 30px;
        line-height: 1.40;
        max-width: 650px;
        padding: 0;
    }
}

@media (orientation: landscape) and (max-height: 600px) {
    .header {
        margin-top: calc(var(--nav-margin-top) - 16px);
    }
    .masthead__scroll-button-container {
        bottom: calc(var(--nav-margin-top) - 48px);
    }
    .welcome-text {
        font-size: 20px;
        padding: 0 40px;
    }
    .masthead__center {
        margin-top: 20px;
    }
    .masthead__headline__dark {
        font-size: 90px;
        /* Narrower than the 66%/850px used elsewhere so "about me" wraps
           together onto the last line instead of leaving "me" as a widow. */
        max-width: 650px;
    }
    .masthead__headline {
        font-size: 90px;
        line-height: 0.9;
    }
}

/* ─── Project grid (CSS Columns — no JS masonry needed) ─────────────────── */

.projects-container {
    max-width: 2400px;
    margin: 0 auto;
    padding-bottom: 30px;
}

@media (min-width: 600px) {
    .projects-container { padding: 0 12px 30px; }
}

@media (min-width: 960px) {
    .projects-container { padding: 0 48px 160px; }
}

.projects {
    margin-top: 48px;
}

@media (min-width: 960px) {
    .projects {
        display: flex;
        gap: 48px;
        align-items: flex-start;
    }
    .projects-col {
        flex: 1;
        min-width: 0;
    }
}

.project-container {
    width: 100%;
    margin-bottom: 64px;
}

@media (min-width: 600px) {
    .project-container { padding: 0 12px; }
}

@media (min-width: 960px) {
    .project-container { padding: 0; }
}

/* ─── Scroll-in animation ────────────────────────────────────────────────── */

.scroll-container {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.scroll-container.show {
    opacity: 1;
    transform: translateY(0);
}

/* ─── Project card ───────────────────────────────────────────────────────── */

.project {
    background-color: var(--color-portfolio-muted);
    background-size: cover;
    background-position: center;
    margin-bottom: 20px;
    position: relative;
    border-radius: 0;
    transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@media (min-width: 600px) {
    .project { border-radius: 8px; }
}

.project::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 0;
    box-shadow: 0 10px 30px rgba(34, 34, 34, 0.25);
    opacity: 0;
    transition: opacity 0.3s ease;
}

@media (min-width: 600px) {
    .project::after { border-radius: 8px; }
}

@media (min-width: 960px) and (hover: hover) {
    .project:hover {
        transform: scale(0.985);
    }

    .project:hover::after {
        opacity: 1;
    }
}

.project-tooltip {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, calc(-100% - 16px));
    background: #fff;
    color: #000;
    padding: 12px 24px;
    border-radius: 100px;
    box-shadow: 0 10px 30px rgba(34, 34, 34, 0.25);
    font-family: var(--font-family);
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
}

.project-tooltip__icon {
    height: 20px;
    width: auto;
    flex-shrink: 0;
}

@media (min-width: 960px) and (hover: hover) {
    .project:hover .project-tooltip { opacity: 1; }
}

.project.tooltip-tap-active .project-tooltip {
    opacity: 1;
    /* Centered on tap (no cursor to sit above, unlike the desktop hover case) */
    transform: translate(-50%, -50%);
}

.project-info {
    margin: -6px 26px 0;
}

@media (min-width: 600px) {
    .project-info { margin: 0; }
}

.project-title-link {
    display: block;
    width: fit-content;
    color: inherit;
    text-decoration: none;
}

/* hover:hover excludes touch devices — otherwise tapping the title link
   triggers the underline's :hover state with no mouse-leave to ever clear
   it, leaving it stuck (and the first tap gets consumed entering that state
   instead of following the link). Same pattern as .swatch:hover in
   casestudy.css. */
@media (hover: hover) {
    .project-title-link:hover .project-title {
        text-decoration: underline;
        text-underline-offset: 6px;
    }
}

.project-title {
    font-weight: 600;
    font-size: 32px;
    text-align: left;
    line-height: 32px;
    margin-left: -1px;
    letter-spacing: -0.012em;
    margin-bottom: 10px;
    margin-top: 26px;
}

@media (min-width: 960px) {
    .project-title { font-size: 36px; line-height: 42px; margin-left: -2px; }
}

.project-intro {
    font-size: 20px;
    line-height: 1.40;
    margin-bottom: 24px;
    text-align: left;
}

@media (min-width: 960px) {
    .project-intro { margin-bottom: 50px; }
}

/* ─── Project page ───────────────────────────────────────────────────────── */

.work__projects { margin-bottom: 30px; }

.project__intro { margin-bottom: 45px; }

.project__title { margin-bottom: 30px; }

.project__blocks { margin-bottom: 80px; }

/* About page builds its own bottom spacing via the footer — keep its
   original, smaller wrapper margin so that isn't doubled up. */
.work--about .project__blocks { margin-bottom: 0; padding-bottom: 10px; }

.project__block + .project__block { margin-top: 10px; }

.project__block__body {
    font-size: 20px;
    line-height: 1.4;
    margin-bottom: 64px;
    letter-spacing: 0.002em;
    text-align: justify;
}
.project__block__body a {
    text-decoration: underline;
}

.project__content-negative { margin-top: -102px; }

/* Full-bleed breakout: match the homepage project grid's own gutter/max-width
   (.projects-container) rather than the narrower .content text column these
   sit inside — media should feel as wide as the homepage, not text-width. */
.project__media, .project__media__b, .project__video {
    position: relative;
    left: 50%;
    width: min(100vw, 2400px);
    margin-left: calc(min(100vw, 2400px) / -2);
    box-sizing: border-box;
}
.project__media__b { margin-bottom: 64px; }
.project__video    { margin-bottom: 64px; }

@media (min-width: 600px) {
    .project__media, .project__media__b, .project__video { padding: 0 12px; }
}
@media (min-width: 960px) {
    .project__media, .project__media__b, .project__video { padding: 0 48px; }
}

/* Scroll-in reveal (see scroll-reveal.js) — same fade + rise as the
   homepage's .scroll-container project thumbnails. */
.project__media, .project__media__b, .project__video {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.project__media.show, .project__media__b.show, .project__video.show {
    opacity: 1;
    transform: translateY(0);
}

/* Side-by-side image pairs within one .project__media. On narrow portrait
   mobile there isn't room for two images across, so they stack into a
   single column instead — no special "paired" gap there, just one
   consistent margin between every stacked image, in and out of a pair.
   Uses the larger (45px) spacing rather than the mobile block-margin
   figure (10px), which reads as barely-there between full-width stacked
   images. Landscape mobile and wider viewports keep the side-by-side
   pairing, also at 45px. */
.project__media--pair {
    display: flex;
    flex-direction: column;
    gap: 45px;
}
.project__media--pair img { flex: 1 1 0; min-width: 0; }

@media (min-width: 48em), (orientation: landscape) {
    .project__media--pair { flex-direction: row; }
}

@media (orientation: portrait) and (max-width: 47.9375em) {
    .project__block:has(> .project__media--pair) + .project__block:has(> .project__media--pair) {
        margin-top: 45px;
    }
}

.intro-text {
    font-size: 30px;
    margin: 0 auto;
    line-height: 1.28;
    font-weight: 400;
}

@media (max-width: 47.9375em) {
    .project__content-inset {
        padding: 0 32px;
    }
}

@media (min-width: 48em) {
    .work__projects   { margin-bottom: 134px; }
    .project__intro   { margin-bottom: 63px; }
    .project__title   { margin-bottom: 30px; margin-top: 60px; }
    .project__blocks  { margin-bottom: 160px; }
    .work--about .project__blocks { margin-bottom: 0; padding-bottom: 160px; }

    .project__block + .project__block { margin-top: 45px; }
    .project__block + .project__block .project__content-negative { margin-top: -86px; }

    .project__block__body { font-size: 24px; margin-bottom: 110px; }

    .project__content-negative { margin-top: -86px; }

    .project__media__b  { margin-bottom: 110px; }
    .project__video     { margin-bottom: 110px; }

    .intro-text {
        font-size: 36px;
        line-height: 1.35;
    }

    .project__content-inset {
        padding: 0 16.66667%;
    }
}

/* ─── Case study client label ────────────────────────────────────────────── */

.drop {
    margin-top: -18px;
    margin-bottom: 10px;
    font-size: 30px;
    line-height: 1.28;
}

@media (min-width: 48em) {
    .drop {
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 36px;
        line-height: 1.35;
    }
}

/* ─── About page ─────────────────────────────────────────────────────────── */

/* ─── About block spacing ────────────────────────────────────────────────── */

@media (min-width: 48em) {
    .work--about .project__block__body { font-size: 24px; }
}

@media (min-width: 48em) {
    /* Gap between all blocks */
    .work--about .project__block + .project__block { margin-top: 80px; }

    /* Zero out all body margins — block gap handles spacing */
    .work--about .project__block__body { margin-bottom: 0; }

    /* Bio: padding (not margin) avoids collapse — 80px padding + 80px block gap = 160px to first company block */
    .work--about .project__block:first-child { padding-bottom: 80px; }

    /* Last company block: no extra margin — footer padding-top owns the 160px gap */
    .work--about .project__block:last-child .project__block__body { margin-bottom: 0; }
}

.project__block__body--centered {
    text-align: center;
    font-size: 26px;
    line-height: 1.3;
    padding-top: 120px;
}

.project__block__body--centered .principle {
    margin-bottom: 8px;
}

.project__block__body--centered .principle:last-child {
    margin-bottom: 0;
}

@media (max-width: 47.99em) {
    /* margin-top here would collapse through the parent (no padding/border
       to contain it) and land on the wrong element — use padding to get a
       reliable 64px gap that actually matches the bottom spacing. */
    .project__block__body--centered {
        padding-top: 64px;
    }

    /* .content's own padding-top (48px, shared across every page) stacks
       on top of the 64px above — remove it here only, scoped to about.html,
       so mobile gets exactly the intended 64px. */
    .work--about .content {
        padding-top: 0;
    }
}

@media (min-width: 48em) {
    .work--about .project__block__body--centered {
        font-size: 42px;
        line-height: 1.4;
        margin-bottom: 160px;
    }
    .project__block__body--centered .principle {
        margin-bottom: 0;
    }
}

@media (orientation: landscape) and (max-height: 600px) {
    .project__content-inset {
        padding: 0 32px;
    }
    .work--about .content {
        padding-top: 0;
    }
    .work--about .project__block__body {
        font-size: 20px;
        margin-bottom: 64px;
    }
    .work--about .project__block + .project__block {
        margin-top: 10px;
    }
    .work--about .project__block:first-child {
        padding-bottom: 0;
    }
    .work--about .project__block__body--centered {
        font-size: 26px;
        line-height: 1.3;
        padding-top: 64px;
        margin-bottom: 64px;
    }
    .project__block__body--centered .principle {
        margin-bottom: 8px;
    }
    .project__block__body--centered .principle:last-child {
        margin-bottom: 0;
    }
}

.word {
    display: inline-block;
}

.principle {
    display: block;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.principle.visible {
    opacity: 1;
    transform: translateY(0);
}

.about__company-header {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 32px;
}

.about__company-logo {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.about__company-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.about__role-meta {
    font-size: 18px;
    line-height: 1.36;
    opacity: 0.5;
    text-align: left;
    margin-bottom: 0;
}

@media (min-width: 48em) {
    .about__company-logo { width: 80px; height: 80px; }
    .about__company-info { gap: 8px; }
    .about__role-meta    { font-size: 20px; }
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */

.footer {
    display: none;
    padding: 0 0 48px;
    font-size: 18px;
}

.footer-links {
    display: none;
}