/* ============================================================
   Noah Gumm — Portfolio
   Multi-page static site: a Works homepage (horizontal rail),
   an About page, and five individual project pages.
   System: near-white paper + neutral ink, Archivo for all
   typography (system fallbacks behind it), ink-colored focus
   and interaction states. No frameworks, no build step.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
    --paper: #FCFCFA;
    --ink: #161615;
    --ink-soft: #6B6B63; /* >= 4.5:1 on --paper (WCAG AA for small text) */
    --hairline: rgba(22, 22, 21, 0.10);

    --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Helvetica, Arial, sans-serif;

    --gutter: clamp(16px, 2vw, 32px);
    --page-margin: clamp(20px, 4vw, 72px);
    --max-content: 1680px;
    --header-h: 52px;      /* lightbox bar height */
    --info-header-h: 48px; /* shared informational header height */

    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --dur-fast: 200ms;
    --dur-med: 300ms;
}

/* ---------- Reset & base ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ink);
    background-color: var(--paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.dialog-open {
    overflow: hidden;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: inherit;
}

ul,
ol {
    list-style: none;
}

a {
    color: inherit;
}

::selection {
    background: var(--ink);
    color: var(--paper);
}

/* The lightbox shares the fluid page margins of the rest of the site. */
.lightbox {
    padding-inline: max(var(--page-margin), calc((100% - var(--max-content)) / 2));
}

/* ---------- Utilities ---------- */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---------- Focus: restrained ink outline ---------- */
:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
}

/* ---------- Skip link ---------- */
.skip-link {
    position: fixed;
    top: 0;
    left: var(--page-margin);
    z-index: 100;
    padding: 0.75rem 1rem;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--paper);
    background: var(--ink);
    transform: translateY(-120%);
    transition: transform var(--dur-fast) var(--ease-out);
}

.skip-link:focus-visible {
    transform: translateY(0);
}

/* ---------- Plates ----------
   Images are bare, isolated objects on the canvas —
   no matting, no frames, no borders. */
.plate img {
    width: auto;
    max-width: 100%;
    height: auto;
}

.plate__button {
    display: block;
    width: fit-content;
    max-width: 100%;
    padding: 0;
    cursor: zoom-in;
}

/* ---------- Lightbox (shared by all project pages) ---------- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    padding-top: 0;
    padding-bottom: clamp(12px, 2vh, 24px);
    background: var(--paper);
    opacity: 0;
    transition: opacity var(--dur-med) var(--ease-out);
}

.lightbox[hidden] {
    display: none;
}

.lightbox.is-open {
    opacity: 1;
}

.lightbox__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-h);
    flex: none;
    border-bottom: 1px solid var(--hairline);
}

.lightbox__title {
    font-family: var(--sans);
    font-size: 0.8125rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 40%;
}

.lightbox__counter {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    color: var(--ink-soft);
}

.lightbox__close {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.lightbox__stage {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    padding-block: clamp(12px, 2.5vh, 28px);
}

.lightbox__image {
    max-width: 92%;
    max-height: 100%;
    min-height: 0;
    object-fit: contain;
    transition: opacity var(--dur-fast) var(--ease-out),
        transform var(--dur-med) var(--ease-out);
}

.lightbox:not(.is-open) .lightbox__image {
    transform: scale(0.98);
}

.lightbox__image.is-switching {
    opacity: 0;
}

.lightbox__caption {
    font-size: 0.8125rem;
    font-family: var(--sans);
    color: var(--ink-soft);
    text-align: center;
    min-height: 1.2em;
}

.lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    min-width: 44px;
    min-height: 44px;
    padding: 0.75rem;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--ink);
    transition: color var(--dur-fast) var(--ease-out);
}

.lightbox__nav--prev {
    left: max(var(--page-margin), calc((100% - var(--max-content)) / 2));
}

.lightbox__nav--next {
    right: max(var(--page-margin), calc((100% - var(--max-content)) / 2));
}

.lightbox__nav[disabled] {
    opacity: 0.25;
    pointer-events: none;
}

.lightbox__thumbs {
    flex: none;
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    overflow-x: auto;
    padding-top: 0.75rem;
}

.lightbox__thumbs:empty {
    display: none;
}

.lightbox__thumbs button {
    flex: none;
    width: 64px;
    height: 64px;
    padding: 0;
    border: 1px solid transparent;
    overflow: hidden;
    opacity: 0.45;
    transition: opacity var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out);
}

.lightbox__thumbs button:hover,
.lightbox__thumbs button:focus-visible {
    opacity: 1;
}

.lightbox__thumbs button[aria-current="true"] {
    opacity: 1;
    border-color: var(--ink);
}

.lightbox__thumbs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- Site link: ink underline draw ---------- */
.rd-link {
    text-decoration: none;
    padding-bottom: 2px;
    background-image: linear-gradient(var(--ink), var(--ink));
    background-repeat: no-repeat;
    background-position: left 100%;
    background-size: 0% 1px;
    transition: background-size var(--dur-fast) var(--ease-out);
}

.rd-link:hover,
.rd-link:focus-visible {
    background-size: 100% 1px;
}

/* ---------- Shared informational header ----------
   Four quiet groups spread across the top of every page. */
.info-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gutter);
    align-items: start;
    min-height: var(--info-header-h);
    padding-top: 14px;
    padding-inline: max(var(--page-margin), calc((100% - var(--max-content)) / 2));
    background: var(--paper);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.55;
}

.info-header a {
    text-decoration: none;
    padding-block: 4px;
}

.info-header__name {
    display: block;
    width: fit-content;
    color: var(--ink);
}

.info-header__nav {
    display: block;
    margin-top: 2px;
}

.info-header__nav a {
    color: var(--ink-soft);
}

.info-header__nav a[aria-current="page"] {
    color: var(--ink);
}

.info-header__group--social {
    justify-self: end;
    text-align: right;
}

.info-header__group--social a {
    color: var(--ink);
}

/* ---------- Works page: horizontal rail on a white field ---------- */
.works-rail {
    height: 100svh;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(22, 22, 21, 0.25) transparent;
}

.works-rail::-webkit-scrollbar {
    height: 5px;
}

.works-rail::-webkit-scrollbar-thumb {
    background: rgba(22, 22, 21, 0.22);
}

.works-rail::-webkit-scrollbar-track {
    background: transparent;
}

.works-rail:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: -2px;
}

.works-rail__track {
    display: flex;
    align-items: center;
    width: max-content;
    min-width: 100%;
    height: 100%;
    margin: 0;
    padding-top: 12vh; /* shifts the shared center axis to ~56vh */
    padding-inline: max(var(--page-margin), calc((100% - var(--max-content)) / 2));
    padding-right: clamp(72px, 10vw, 180px); /* firm end: one calm margin after 05 */
    gap: clamp(96px, 14vw, 260px);
    list-style: none;
}

.works-item {
    flex: none;
    margin: 0;
    margin-top: var(--item-offset, 0);
}

/* 01 Funway is the tallest anchor; no two neighbors share a height */
.works-item--01 { --item-h: 30vh; }
.works-item--02 { --item-h: 24vh; --item-offset: 4vh; }
.works-item--03 { --item-h: 21vh; --item-offset: -3vh; }
.works-item--04 { --item-h: 25vh; --item-offset: 4.5vh; }
.works-item--05 { --item-h: 24vh; }

/* 05 is the Barcode logo: a wide, short mark from a 500px source —
   cap its width so it never upscales into visible pixelation */
.works-item--05 .works-item__image {
    max-width: min(500px, 100%);
}

.works-item__link {
    display: block;
    text-decoration: none;
}

.works-item__image {
    display: block;
    width: auto;
    max-width: none;
    height: var(--item-h, auto);
    transition: opacity var(--dur-fast) var(--ease-out);
}

.works-item__link:hover .works-item__image,
.works-item__link:focus-visible .works-item__image {
    opacity: 0.85;
}

.works-item__caption {
    margin-top: 10px;
}

.works-item__number {
    display: block;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
}

.works-item__label {
    display: block;
    margin-top: 3px;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity var(--dur-fast) var(--ease-out),
        transform var(--dur-fast) var(--ease-out);
}

.works-item__link:hover .works-item__label,
.works-item__link:focus-visible .works-item__label {
    opacity: 1;
    transform: none;
}

.works-item__title {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ink);
}

.works-item__meta {
    display: block;
    margin-top: 1px;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* Touch devices: no hover, so nothing may hide behind it */
@media (hover: none) {
    .works-item__label {
        opacity: 1;
        transform: none;
    }
}

/* ---------- Intro name card (homepage only, once per session) ----------
   A brief visual introduction, not a loading screen: the solid
   overlay is visible from the first paint, the two name words fade
   in and hold, then the complete overlay fades out as the header
   and the rail fade in underneath.
   The overlay is OPAQUE while displayed (opacity: 1) — only the
   words start transparent. .is-leaving (0,2,0) overrides this
   base rule (0,1,0) to fade the whole overlay away.
   It is hidden in markup, so no-JS visitors never see it; JS
   un-hides it once per tab session and removes it afterwards. */
.intro-screen {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--paper);
    opacity: 1;
    transition: opacity 500ms var(--ease-out);
}

.intro-screen[hidden] {
    display: none;
}

/* Pre-JS boot state (set by a tiny inline script in index.html when
   the intro will play): reveal the overlay despite [hidden] so the
   page never flashes through before js/main.js takes over.
   html.intro-boot (0,2,1) outranks .intro-screen[hidden] (0,2,0). */
html.intro-boot .intro-screen {
    display: flex;
}

.intro-screen__name {
    display: flex;
    align-items: baseline;
    gap: clamp(48px, 18vw, 320px);
    margin: 0;
    font-size: clamp(0.8125rem, 1.1vw, 1rem);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.intro-screen__word {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 500ms var(--ease-out),
        transform 500ms var(--ease-out);
}

.intro-screen.is-active .intro-screen__word {
    opacity: 1;
    transform: none;
}

.intro-screen.is-active .intro-screen__word:last-child {
    transition-delay: 120ms;
}

.intro-screen.is-leaving {
    opacity: 0;
}

/* While the intro plays, both the fixed header and the Works content
   are transparent (the opaque overlay covers them); removing the
   boot/playing classes fades them in as the overlay fades out. */
.info-header,
.works-main {
    transition: opacity 500ms var(--ease-out);
}

html.intro-boot .info-header,
html.intro-boot .works-main,
body.intro-playing .info-header,
body.intro-playing .works-main {
    opacity: 0;
}

/* ---------- Project page: a quiet exhibition room ---------- */
.project-main {
    padding-top: calc(var(--info-header-h) + clamp(36px, 7vh, 80px));
    padding-bottom: 14vh;
    padding-inline: max(var(--page-margin), calc((100% - var(--max-content)) / 2));
}

.project__header {
    max-width: 620px;
}

.project__eyebrow {
    display: flex;
    gap: 1.75em;
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.project__title {
    margin-top: 0.875rem;
    font-size: 1.0625rem;
    font-weight: 500;
    letter-spacing: -0.005em;
}

.project__meta {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.project__meta-row {
    font-size: 0.8125rem;
    line-height: 1.5;
}

.project__meta-row dt {
    display: inline;
    font-weight: 600;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.project__meta-row dt::after {
    content: " — ";
    font-weight: 400;
    color: var(--ink-soft);
}

.project__meta-row dd {
    display: inline;
}

.project__description {
    margin-top: 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    max-width: 34em;
}

.project__lead {
    margin: clamp(3.5rem, 10vh, 8rem) auto 0;
    width: fit-content;
    max-width: 100%;
}

.project__lead img {
    max-width: min(58vw, 100%);
    max-height: 62vh;
    width: auto;
    height: auto;
}

.project__support {
    margin-top: clamp(80px, 10vh, 130px);
    max-width: 100%;
}

.project__support--right {
    width: min(31vw, 480px);
    margin-left: auto;
    margin-right: clamp(32px, 9vw, 144px);
}

.project__support--left {
    width: min(25vw, 390px);
    margin-top: clamp(70px, 10vh, 130px);
    margin-left: clamp(28px, 7vw, 120px);
}

.project__support img {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: none;
}

/* ---------- Project art-direction variants ----------
   Per-page placement and scale so each room is individually
   art-directed while staying inside the shared system. */

/* Lead placed left (Superfluous) */
.project__lead--left {
    margin-left: clamp(24px, 10vw, 180px);
    margin-right: 0;
}

.project__lead--left img {
    max-width: min(44vw, 100%);
    max-height: 56vh;
}

/* Lead kept tall and isolated (Project Funway) */
.project__lead--tall img {
    max-width: min(40vw, 100%);
    max-height: 74vh;
}

/* Lead document, near natural size, placed left (SMP & DMP's) */
.project__lead--doc {
    margin-left: clamp(16px, 6vw, 110px);
    margin-right: 0;
}

.project__lead--doc img {
    max-width: min(38vw, 662px);
    max-height: 66vh;
}

/* Supporting document, offset right in a paired rhythm */
.project__support--doc {
    width: min(26vw, 430px);
    margin-left: auto;
    margin-right: clamp(32px, 10vw, 170px);
}

/* Lead shown as an isolated brand mark from a small source
   (Barcode logo): modest width, never upscaled */
.project__lead--mark img {
    max-width: min(34vw, 460px);
    max-height: none;
}

/* Small artifacts in an archive composition (Barcode) */
.project__support--artifact {
    width: min(13vw, 200px);
    margin-left: auto;
    margin-right: clamp(48px, 14vw, 240px);
}

.project__caption {
    margin-top: 9px;
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
}

/* Plate hover: a quiet opacity settle instead of any scale movement */
.project-page .plate__button img {
    transition: opacity var(--dur-fast) var(--ease-out);
}

.project-page .plate__button:hover img,
.project-page .plate__button:focus-visible img {
    opacity: 0.88;
}

.project__pagination {
    margin-top: clamp(96px, 16vh, 180px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.project__pagination a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 0.75rem;
    color: var(--ink-soft);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
}

.project__pagination a:hover,
.project__pagination a:focus-visible {
    color: var(--ink);
}

/* ---------- About page ----------
   Portrait pinned to the far left edge; the biography positioned
   substantially farther right; contact at the distant right edge. */
.about-main {
    min-height: 100svh;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gutter);
    align-items: start;
    padding-top: calc(var(--info-header-h) + clamp(40px, 9vh, 96px));
    padding-bottom: 12vh;
    padding-inline: max(var(--page-margin), calc((100% - var(--max-content)) / 2));
}

.about-figure {
    grid-column: 1 / 4;
    margin: 0;
}

.about-figure__image {
    width: 100%;
    max-width: 300px;
    height: auto;
    filter: grayscale(1);
}

.about-bio {
    grid-column: 7 / 11;
    margin-top: clamp(24px, 6vh, 64px);
}

.about-bio__text {
    margin: 0;
    font-size: clamp(1.125rem, 1.6vw, 1.375rem);
    line-height: 1.65;
    max-width: 30em;
}

.about-facts {
    margin-top: clamp(2rem, 4vh, 3rem);
    font-size: 0.8125rem;
    line-height: 1.9;
    color: var(--ink-soft);
    list-style: none;
}

.about-contact {
    grid-column: 12 / 13;
    justify-self: end;
    margin-top: clamp(120px, 24vh, 260px);
    text-align: right;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 2.1;
    list-style: none;
}

/* ============================================================
   Responsive — tablet (768–1199px)
   ============================================================ */
@media (max-width: 1199px) {
    .lightbox__thumbs {
        display: none;
    }

    .works-rail__track {
        padding-top: 10vh;
        gap: clamp(64px, 10vw, 160px);
    }

    .works-item--01 { --item-h: 24vh; }
    .works-item--02 { --item-h: 19vh; }
    .works-item--03 { --item-h: 17vh; }
    .works-item--04 { --item-h: 20vh; }
    .works-item--05 { --item-h: 20vh; }

    .about-figure {
        grid-column: 1 / 5;
    }

    .about-bio {
        grid-column: 6 / 13;
    }

    .about-contact {
        grid-column: 6 / 13;
        justify-self: start;
        margin-top: clamp(3rem, 8vh, 5rem);
        text-align: left;
    }
}

/* ============================================================
   Responsive — mobile (<=767px)
   ============================================================ */
@media (max-width: 767px) {
    /* Header: identity left, social right; title/location hidden */
    .info-header {
        grid-template-columns: 1fr auto;
        gap: 4px 12px;
        padding-top: 12px;
    }

    .info-header__group--title,
    .info-header__group--location {
        display: none;
    }

    .info-header__group--social {
        display: flex;
        gap: 0.9rem;
        align-self: start;
    }

    .info-header__group--social li {
        display: inline;
    }

    .info-header__group--social a {
        padding-block: 0.6rem;
    }

    /* Intro words sit closer together on narrow screens */
    .intro-screen__name {
        gap: clamp(24px, 8vw, 64px);
    }

    /* Works: natural horizontal swipe rail, labels always visible */
    .works-rail {
        scroll-snap-type: x proximity;
    }

    .works-rail__track {
        padding-top: 0;
        padding-inline: 24px;
        padding-right: 24px; /* firm end on touch: a normal page margin */
        gap: 18vw;
    }

    .works-item {
        width: 72vw;
        margin-top: 0;
        scroll-snap-align: center;
    }

    .works-item__image {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    /* Project page: images settle into one calm column */
    .project__lead img {
        max-width: 100%;
        max-height: 52vh;
    }

    .project__support {
        margin-top: 80px;
    }

    .project__support--right,
    .project__support--left,
    .project__support--doc,
    .project__support--artifact {
        width: auto;
        max-width: 100%;
        margin-inline: 0;
    }

    .project__support img {
        width: auto;
        max-width: 100%;
        max-height: 55vh;
    }

    .project__lead--left,
    .project__lead--doc {
        margin-left: 0;
    }

    .project__lead--left img {
        max-width: 100%;
        max-height: 52vh;
    }

    .project__lead--tall img {
        max-width: 100%;
        max-height: 62vh;
    }

    .project__lead--doc img {
        max-width: 100%;
        max-height: 55vh;
    }

    .project__lead--mark img {
        max-width: min(70vw, 460px);
        max-height: none;
    }

    .project__pagination {
        flex-wrap: wrap;
    }

    /* About: portrait, bio, contact in reading order */
    .about-main {
        display: block;
    }

    .about-figure__image {
        max-width: 240px;
    }

    .about-bio {
        margin-top: 2.5rem;
    }

    .about-contact {
        margin-top: 3rem;
        text-align: left;
        line-height: 2.4;
    }

    /* Lightbox controls move to a bottom bar */
    .lightbox__title {
        max-width: 46%;
    }

    .lightbox__image {
        max-width: 100%;
    }

    .lightbox__nav {
        top: auto;
        bottom: clamp(12px, 2vh, 24px);
        transform: none;
        background: var(--paper);
        border: 1px solid var(--hairline);
    }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }

    .lightbox__image {
        transform: none;
    }

    /* The intro is skipped entirely (JS also never un-hides it) */
    .intro-screen {
        display: none !important;
    }

    .works-rail {
        scroll-snap-type: none;
    }

    .works-item__label {
        transform: none;
    }

    .works-item__image,
    .project-page .plate__button img {
        transition: none;
    }
}