/* ==========================================================
   Erik Hamburger — Portfolio (rebuild, 2026)
   Shared stylesheet: landing page now, about + project pages later.
   ========================================================== */

/* ---------- Fonts (served locally from ASSETS/Font) ---------- */

@font-face {
    font-family: 'Murecho';
    src: url('../Font/Murecho/Murecho-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: 'Averia Serif Libre';
    src: url('../Font/Averia_Serif_Libre/AveriaSerifLibre-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Averia Serif Libre';
    src: url('../Font/Averia_Serif_Libre/AveriaSerifLibre-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Averia Serif Libre';
    src: url('../Font/Averia_Serif_Libre/AveriaSerifLibre-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Averia Serif Libre';
    src: url('../Font/Averia_Serif_Libre/AveriaSerifLibre-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* The Erased Font project's own typeface, used by its type tester */
@font-face {
    font-family: 'The Erased';
    src: url('../Font/TheErased-English.otf') format('opentype');
    font-display: swap;
}

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

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

body {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #111;
    font-family: 'Averia Serif Libre', serif;
    background-image: url('../../NEW ASSETS/Visuals/Background Place holder.png');
    background-size: cover;
    background-position: center;
    overflow-x: hidden;
}

h1, h2, h3, nav {
    font-family: 'Murecho', sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

/* ---------- Header ---------- */

.site-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end; /* mission + menu hang from the name block's bottom edge */
    padding: 24px 2vw 24px;
}

.identity h1 {
    font-size: 23px;
    font-weight: 700;
    line-height: 1.1;
}

.identity p {
    font-family: 'Murecho', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.15;
}

.mission {
    justify-self: center;
    max-width: 300px; /* sized so the text wraps to exactly 3 lines */
    font-style: italic;
    font-size: 15px;
    line-height: 1.2;
}

.site-nav {
    grid-column: 3; /* stay pinned right even on pages without the mission text */
    justify-self: end;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    text-transform: uppercase;
    line-height: 1.4;
}

/* Every link points away by default; the current page's arrow points
   back at its label, and hovering flips an arrow the same way to say
   "do you want to go here?" */
.site-nav a::before {
    content: "--> ";
}

.site-nav a.active::before,
.site-nav a:hover::before {
    content: "<-- ";
}

.site-nav a.active {
    font-weight: 700;
}

/* Project pages: the lone "Back" link always points back to where you came from */
.site-nav a.back::before {
    content: "<-- ";
}

/* ---------- Project marquee ---------- */

/* The strip is moved by ASSETS/JS/marquee.js, which blends the
   auto-scroll with click-and-drag input from the mouse or finger. */
.marquee {
    overflow: hidden;
    cursor: grab;
    touch-action: pan-y; /* horizontal swipes drag the strip, vertical still scrolls the page */
}

/* Landing page only: the strip is the whole main area. Larger bottom
   padding lifts it up the page (body pins it to the bottom edge). */
main.marquee {
    padding: 40px 0 clamp(56px, 11vh, 140px);
}

.marquee.dragging {
    cursor: grabbing;
}

.marquee-track {
    display: flex;
    width: max-content;
    will-change: transform;
}

.card-set {
    display: flex;
    gap: 10px;
    padding-right: 10px; /* keeps spacing identical at the loop seam */
    list-style: none;
}

.card {
    width: clamp(250px, 24vw, 460px);
}

.card a {
    display: block;
    transition: transform 0.4s ease;
    -webkit-user-drag: none; /* don't let the browser drag the link itself */
    user-select: none;
}

.card a:hover {
    transform: scale(1.04);
}

.thumb {
    overflow: hidden;
    aspect-ratio: 4 / 5;
}

.thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
    user-select: none;
    -webkit-user-drag: none; /* stops the browser's ghost-image drag from hijacking our drag */
}

.card a:hover .thumb img {
    transform: scale(1.09);
}

/* Caption row: project name, a connecting rule, then the client name.
   Shared by landing cards, project-page strips, and single images. */
.caption {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
    /* Small inset so neighbouring captions never sit flush against each other */
    padding: 0 13px;
}

.caption h2 {
    font-size: 16px;
    font-weight: 500;
}

.caption .rule {
    flex: 1;
    height: 1px;
    background: currentColor;
}

.caption .client {
    font-size: 16px; /* matches .card h2 so the two caption ends read as one line */
}

/* ---------- "Coming soon" cards (projects without a page yet) ---------- */

/* No lift on hover — this card doesn't go anywhere yet */
.card a.coming-soon:hover {
    transform: none;
}

.coming-soon .thumb {
    position: relative;
}

.coming-soon .thumb img {
    transition: filter 0.4s ease, transform 0.6s ease;
}

.coming-soon:hover .thumb img {
    filter: blur(8px);
    transform: scale(1.05); /* hides the soft edges the blur creates */
}

.coming-soon .thumb::after {
    content: "Coming soon";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: 'Murecho', sans-serif;
    font-size: 21px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none; /* the label should never catch clicks or drags */
}

.coming-soon:hover .thumb::after {
    opacity: 1;
}

/* ---------- Project pages (stackable template sections) ----------

   A project page is a <main class="project"> holding any mix of these
   sections, in any order, each fully self-contained:

     section.project-block  — title row + body text and/or credit lists
     section.strip.marquee  — auto-scrolling image strip (add .strip-916
                              on the section for tall 9:16 images)
     section.feature        — one full-width image + caption
     section.trio           — three images side by side + captions

   The uniform gap below comes from .project, so sections can be added,
   removed, or reordered without touching any other section. */

.project {
    display: flex;
    flex-direction: column;
    gap: clamp(40px, 4vw, 72px);
    padding: clamp(24px, 3vw, 56px) 0 clamp(56px, 8vh, 120px);
}

/* --- Title + text/credits block (intro, "Behind the work", ...) --- */

.project-block {
    width: min(63vw, 1100px);
    margin: 0 auto;
}

.title-row {
    display: flex;
    align-items: center;
    gap: 24px;
}

.title-row h1 {
    font-size: clamp(26px, 2.6vw, 44px);
    font-weight: 700;
    white-space: nowrap;
}

.title-row .rule {
    flex: 1;
    height: 1.5px;
    background: currentColor;
}

.title-row .client {
    font-size: clamp(22px, 2.2vw, 38px);
    white-space: nowrap;
}

/* Short headed text columns (e.g. three rules side by side) */
.note {
    flex: 1 1 26%;
    min-width: 220px;
    align-self: flex-start;
}

.note h3 {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.note p {
    font-size: 14px;
    line-height: 1.4;
}

/* Columns wrap by width: a text block (~62%) and a credit list (~28%)
   share one row; three credit lists fill a row and push the text down. */
.block-columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 28px 4%;
    margin-top: clamp(20px, 2vw, 36px);
}

.block-text {
    flex: 0 1 62%;
    min-width: min(48ch, 100%);
    font-size: 15px;
    line-height: 1.4;
}

.block-text p + p {
    margin-top: 1em;
}

.block-text a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.credits {
    flex: 1 1 26%;
    min-width: 220px;
    align-self: flex-start;
    list-style: none;
}

.credits li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    line-height: 2;
}

.credits .who {
    font-family: 'Murecho', sans-serif;
    font-weight: 700;
    white-space: nowrap;
}

.credits .rule {
    flex: 1;
    height: 1px;
    background: currentColor;
}

.credits .role {
    white-space: nowrap;
}

/* --- Image strips (same marquee as the landing page) --- */

.strip .card {
    width: clamp(220px, 21vw, 400px);
    user-select: none;
}

.strip-916 .thumb {
    aspect-ratio: 9 / 16;
}

/* Mixed-format strip: every image keeps its own aspect ratio at one
   shared height (matches the height of the 4:5 strip's images) */
.strip-free .card {
    width: auto;
}

.strip-free .thumb {
    aspect-ratio: auto;
    height: clamp(275px, 26.25vw, 500px);
}

.strip-free .thumb img {
    width: auto;
    height: 100%;
}

/* --- Video embed; sits at the same width as the text blocks --- */

.video {
    width: min(63vw, 1100px);
    margin: 0 auto;
}

/* The frame keeps its 16:9 shape whether it holds an <iframe> or,
   until the film is ready, just the placeholder label */
.video .frame {
    aspect-ratio: 16 / 9;
    background: #c9c9c9;
    display: grid;
    place-items: center;
    font-size: clamp(22px, 2.2vw, 38px);
}

.video .frame iframe,
.video .frame video {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

/* --- Single full-width image; side border = the 10px between images --- */

.feature {
    padding: 0 10px;
}

.feature img,
.feature video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* --- Type tester: editable sample text set in a project's font --- */

.type-tester {
    width: min(63vw, 1100px);
    margin: 0 auto;
}

.type-tester .frame {
    padding: 0 13px; /* aligns the text with the caption inset below */
    font-family: 'The Erased', serif;
    font-size: 19px;
    line-height: 1.45;
    /* Readable by default: every ligature feature off ... */
    font-feature-settings: 'liga' 0, 'dlig' 0, 'clig' 0, 'calt' 0;
}

/* ... flip them all on and the censored words get erased */
.type-tester .frame.erased {
    font-feature-settings: 'liga' 1, 'dlig' 1, 'clig' 1, 'calt' 1;
}

.type-tester .frame:focus {
    outline: none;
}

.type-tester .frame p + p {
    margin-top: 1em;
}

.erase-toggle {
    font-family: 'Murecho', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: inherit;
    background: #fff;
    border: 1.5px solid currentColor;
    border-radius: 999px;
    padding: 4px 18px;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease;
}

/* Same yellow as the Erased Font campaign graphics */
.erase-toggle[aria-pressed="true"] {
    background: #e8d010;
    color: #111;
}

/* --- Three images side by side --- */

.trio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 0 10px;
}

/* --- Four square tiles side by side --- */

.quad {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 0 10px;
}

.quad .thumb {
    aspect-ratio: 1 / 1;
}

/* Videos placed inside tiles behave exactly like the images */
.thumb video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 760px) {
    .project-block,
    .video,
    .type-tester {
        width: min(90vw, 1100px);
    }

    .trio {
        grid-template-columns: 1fr;
    }

    .quad {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---------- About page ---------- */

.about-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 56px;
    padding: 24px 5vw 48px;
}

.about-content {
    display: flex;
    align-items: center;
    gap: 4vw;
}

.portrait img {
    display: block;
    width: clamp(260px, 25vw, 500px);
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.about-text {
    max-width: 60ch;
}

.about-text h2 {
    font-family: 'Averia Serif Libre', serif;
    font-size: 27px;
    font-weight: 700;
    margin-bottom: 28px;
}

.about-text p {
    font-size: 18px;
    font-weight: 300;
    line-height: 1.35;
}

.about-text p + p {
    margin-top: 22px;
}

.about-links {
    display: flex;
    gap: 16px;
}

.pill {
    background: #fff;
    border-radius: 999px;
    padding: 12px 44px;
    font-size: 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
}

.pill:hover {
    transform: scale(1.06);
}

/* ---------- Draggable decoration dots ---------- */

.dot-field {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none; /* the field lets clicks through; only dots catch them */
    z-index: 10;
}

.dot {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
    pointer-events: auto;
    cursor: grab;
    touch-action: none; /* dragging a dot shouldn't scroll the page on touch */
}

.dot.held {
    cursor: grabbing;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

/* ---------- Accessibility & mobile ---------- */

@media (max-width: 760px) {
    .site-header {
        grid-template-columns: 1fr auto;
        row-gap: 28px;
        padding-top: 32px;
    }

    .mission {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: start;
    }

    .card {
        width: 64vw;
    }

    .about-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
    }

    .portrait img {
        width: 70vw;
    }

    .about-links {
        flex-wrap: wrap;
    }
}

/* ---------- Squarer screens (4:3 and narrower, e.g. iPad) ---------- */

@media (max-aspect-ratio: 4/3) {
    .mission {
        display: none;
    }

    .card {
        width: clamp(250px, 30vw, 460px);
    }
}

/* ---------- Phone portrait: centered, carousel-sized cards ---------- */

@media (max-aspect-ratio: 2/3) {
    main.marquee {
        flex: 1; /* fill the space under the header ... */
        display: flex;
        flex-direction: column;
        justify-content: center; /* ... and center the strip in it */
        padding: 0;
    }

    .card {
        width: 78vw; /* one card fills the view, the next peeks in from the edge */
    }
}