/* ========================================
   PORTFOLIO WEBSITE STYLESHEET
   Nicole Moushailov | Visual Communication
   ======================================== */

:root {
    /* project-page content column: 1100px up to ~1775px screens, then grows with the screen (to 1700px) so huge monitors don't leave a thin strip in the middle */
    --col: clamp(1100px, 62vw, 1700px);
    --page-pad-x: clamp(1.25rem, 4vw, 3rem);
    --page-pad-y: clamp(1rem, 2.5vw, 1.5rem);
    --section-gap: clamp(2rem, 5vw, 3.5rem);
    --nav-clearance: clamp(3.75rem, 9vw, 4.75rem);
    --image-grid-gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

/* RESET & DEFAULTS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    width: 100%;
    overflow-x: hidden;
}

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

body {
    font-family: Helvetica, Arial, sans-serif;
    color: #000;
    background-color: #fff;
    line-height: 1.6;
    font-size: clamp(14px, 2vw, 18px);
    width: 100%;
}

a {
    color: #000;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

img {
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
}

/* ========================================
   GLOBAL NAVIGATION
   ======================================== */
.global-nav {
    background: #fff;
    border-bottom: 1px solid #000;
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: clamp(0.75rem, 2vw, 1.25rem) clamp(1rem, 3vw, 2rem);
    max-width: 100%;
}

.nav-brand {
    font-size: clamp(10px, 1.5vw, 14px);
    font-weight: 400;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: clamp(1.5rem, 4vw, 3rem);
}

.nav-links a {
    font-size: clamp(10px, 1.5vw, 12px);
    letter-spacing: 0.05em;
    display: inline-block;
}

.works-toggle,
.project-index-close {
    border: 0;
    padding: 0;
    color: #000;
    background: transparent;
    font: inherit;
    letter-spacing: 0.05em;
    cursor: pointer;
}

.works-toggle {
    font-size: clamp(10px, 1.5vw, 12px);
}

/* ========================================
   LANDING PAGE
   ======================================== */
.editorial-homepage {
    container-type: inline-size;
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-top: var(--nav-clearance);
    font-family: Helvetica, Arial, sans-serif;
}

/* ========================================
   SITE NAV — ONE fixed bar per page, never
   duplicated: it sits outside the scroll-stack
   and stays put the whole time you scroll
   through home/works/cv. Bold brand left,
   Work / CV + language toggle right.
   ======================================== */
.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--page-pad-y) var(--page-pad-x);
}

.site-nav-brand {
    font-weight: 700;
    font-size: clamp(14px, 1.4vw, 18px);
    letter-spacing: -0.01em;
}

/* Nav brand (see initNavBrandEffect): real text at rest; an invisible canvas
   floats over it and, while hovered, takes over (text hidden, canvas shown).
   JS positions the canvas so its baseline sits on the text's baseline. */
.site-nav-brand.fluid-brand {
    position: relative;
    display: block;
}

.site-nav-brand .baseline-probe {
    display: inline-block;
    width: 0;
    height: 0;
}

.site-nav-brand.fluid-brand canvas {
    position: absolute;
    display: block;
    max-width: none;   /* a global canvas/img max-width:100% was squeezing it narrower than its bitmap */
    opacity: 0;
    cursor: pointer;
}

.site-nav-brand.fluid-brand.is-live canvas { opacity: 1; }
.site-nav-brand.fluid-brand.is-live .brand-text { color: transparent; }

.site-nav-right {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 1.5rem);
    font-size: clamp(10px, 1vw, 12px);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.site-nav-right a:hover {
    opacity: 0.6;
}

/* ========================================
   HOME / WORKS / CV SCROLL STACK
   One continuous page: each panel sticks at
   the top and the next panel scrolls up over
   it, like turning a page.
   ======================================== */
.scroll-stack {
    position: relative;
}

.stack-panel {
    position: sticky;
    top: 0;
    min-height: 100vh;
    width: 100%;
    background: #F2F0EA;
    display: flex;
    flex-direction: column;
}

/* The content of a panel that is being covered scales/fades from JS
   (initStackDepth); the panel background never moves. */
.stack-panel > * {
    will-change: transform, opacity;
}

.home-panel { z-index: 1; height: 100vh; }
.works-panel { z-index: 2; }
.cv-panel { z-index: 3; }

.stack-panel > .global-nav {
    flex-shrink: 0;
}

/* No nested scrollbars: panels grow with their content
   instead of scrolling internally — the page itself is the
   only scroll container. */
.panel-scroll {
    padding: var(--nav-clearance) var(--page-pad-x) clamp(2rem, 6vw, 4rem);
}

.panel-heading {
    font-family: "Courier New", Courier, monospace;
    font-size: clamp(10px, 1vw, 12px);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #666;
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

/* Works index rows within the stack */
/* Reference (Nicole): stacked big bold names, tight tracking, a thin rule
   under every row spanning the full width, the small right-hand text column
   left empty. */
.work-index-list {
    list-style: none;
    width: 100%;
}

.work-index-item {
    display: block;
    padding: 0.12em 0 0.06em;
    border-bottom: 1px solid #000;
    font-size: clamp(22px, 6.4vw, 96px);   /* floor 22px so "THE WITCH AS A MUSE" fits a 390px phone */
    font-weight: 800;
    line-height: 0.95;
    text-transform: uppercase;
    letter-spacing: -0.045em;
    color: #000;
}

a.work-index-item {
    transition: opacity 0.2s ease;
}

a.work-index-item:hover {
    opacity: 0.5;
    text-decoration: none;
}

.work-index-item--static {
    color: #aaa;
    cursor: default;
}

.work-index-meta {
    display: none;
}

.work-index-item--static .work-index-meta {
    color: #bbb;
}

.editorial-homepage a {
    color: #000;
}

/* Hero — brand/nav top, small rotating image +
   tags on the left, giant bottom-anchored wordmark.
   Reference: "Studio" composition sent by Nicole. */
.hero-side {
    --fw: clamp(145px, 18vw, 221px);   /* image width; the bracket frame is derived from it */
    flex-shrink: 0;
    margin: clamp(1rem, 3vw, 2rem) var(--page-pad-x) 0;
}

.hero-gif {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #eee;
    margin: 0 0 clamp(0.5rem, 1.5vw, 0.75rem);
}

.hero-gif-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Square brackets that frame the hero image. Every measurement derives from
   the image width (--fw): brackets 13% taller than the image, arms ~20%,
   gap ~12%. */
/* On the page the brackets rest CLOSED, "[ ]". On hover the gap between them
   widens and the gif is revealed from the centre; leaving closes it again.
   Touch screens have no hover, so there it stays open. */
.hero-frame {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.hero-frame .bk {
    position: static;
    flex: none;
    height: calc(var(--fw) * 0.8475);
}

.hero-reveal {
    display: flex;
    justify-content: center;
    width: 0;
    margin: 0 calc(var(--fw) * 0.06);
    overflow: hidden;
    transition: width 0.8s cubic-bezier(0.76, 0, 0.24, 1), margin 0.8s cubic-bezier(0.76, 0, 0.24, 1);
}

.hero-reveal .hero-gif {
    flex: none;
    width: var(--fw);
    margin: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.hero-frame:hover .hero-reveal {
    width: var(--fw);
    margin: 0 calc(var(--fw) * 0.118);
}

.hero-frame:hover .hero-reveal .hero-gif {
    opacity: 1;
    transition-delay: 0.25s;
}

@media (hover: none) {
    .hero-reveal {
        width: var(--fw);
        margin: 0 calc(var(--fw) * 0.118);
    }

    .hero-reveal .hero-gif { opacity: 1; }
}

/* Drawn like a real bold bracket glyph, not a box: a heavy stem with
   thinner, longer arms (equal-thickness borders all round made squat,
   clunky blocks). Stem ~21px / arms ~15px / width ~44px at full size. */
.bk {
    position: absolute;
    top: calc(var(--fw) * -0.049);
    bottom: calc(var(--fw) * -0.049);
    width: calc(var(--fw) * 0.2);
    border: 0 solid #000;
}

.bk--l {
    left: calc(var(--fw) * -0.318);
    border-width: calc(var(--fw) * 0.068) 0 calc(var(--fw) * 0.068) calc(var(--fw) * 0.095);
}

.bk--r {
    right: calc(var(--fw) * -0.318);
    border-width: calc(var(--fw) * 0.068) calc(var(--fw) * 0.095) calc(var(--fw) * 0.068) 0;
}

/* Entrance on a fresh visit / refresh of the home page: everything starts
   hidden and eases in one piece after another (js/script.js initIntro adds
   html.is-entering). */
.site-nav,
.hero-side,
.hero-wordmark,
.hero-bottom-bar {
    transition: opacity 1s cubic-bezier(0.65, 0, 0.35, 1) var(--enter-delay, 0s),
                transform 1s cubic-bezier(0.65, 0, 0.35, 1) var(--enter-delay, 0s);
}

.site-nav { --enter-delay: 0.1s; }
.hero-side { --enter-delay: 0.35s; }
.hero-wordmark { --enter-delay: 0.5s; }
.hero-bottom-bar { --enter-delay: 0.7s; }

html.is-loading:not(.is-entering) .site-nav,
html.is-loading:not(.is-entering) .hero-side,
html.is-loading:not(.is-entering) .hero-wordmark,
html.is-loading:not(.is-entering) .hero-bottom-bar {
    opacity: 0;
}

html.is-loading:not(.is-entering) .hero-side,
html.is-loading:not(.is-entering) .hero-wordmark,
html.is-loading:not(.is-entering) .hero-bottom-bar {
    transform: translateY(18px);
}

.hero-wordmark {
    flex: 1;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0 var(--page-pad-x);
}

/* top/left are set precisely in px by FluidTypeLine.positionYearMark()
   in script.js, from the real measured text box — not guessable in plain
   CSS since the canvas carries padding around the glyphs. */
.hero-year {
    position: absolute;
    margin-left: calc(0.15em + 5px);
    line-height: 1;
    white-space: nowrap;
    font-size: clamp(12px, 1.6vw, 22px);
    font-weight: 700;
    z-index: 1;
}

/* ========================================
   HERO TYPOGRAPHY — FLUID CANVAS TYPE
   Each line ("Nicole" / "Moushailov") is its
   own FluidTypeLine instance (js/script.js):
   the real word is rasterized to an offscreen
   canvas once, then redrawn strip-by-strip into
   the visible canvas with a physics-driven
   horizontal displacement field, so the pointer
   deforms the glyph pixels themselves rather
   than moving whole letters. Resize this via
   --hero-font-size / --hero-line-height below —
   FluidTypeLine reads the resolved font-size at
   runtime. FLUID_TYPE_CONFIG in script.js has
   every physics constant.
   ======================================== */
.hero-name {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin: 0;
    font-weight: 800;
}

.fluid-type {
    --hero-font-size: clamp(30px, 9.775vw, 148.75px);   /* floor lowered from 47.6 so on phones the name + ’26 stay inside the screen */
    --hero-line-height: 0.85;
    position: relative;
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    font-size: var(--hero-font-size);
    line-height: var(--hero-line-height);
}

.fluid-type canvas {
    display: block;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


.hero-bottom-bar {
    flex-shrink: 0;
    padding: clamp(0.75rem, 2vw, 1rem) var(--page-pad-x) var(--page-pad-y);
    font-size: 11px;
    letter-spacing: 0.05em;
}

.hero-bottom-bar a:hover {
    opacity: 0.6;
}

/* ========================================
   WORKS PAGE
   ======================================== */
.works-page {
    min-height: 100vh;
    padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 3vw, 3rem);
}

.works-content h1 {
    font-size: clamp(24px, 5vw, 48px);
    font-weight: 400;
    margin-bottom: clamp(1.5rem, 5vw, 3rem);
    letter-spacing: -0.01em;
}

.works-list {
    list-style: none;
}

.works-list li {
    padding: clamp(0.5rem, 2vw, 1rem) 0;
    border-bottom: 1px solid #e0e0e0;
    font-size: clamp(14px, 2vw, 18px);
}

.works-list a {
    display: block;
    padding: clamp(0.75rem, 2vw, 1.25rem) 0;
}

.works-list a:hover {
    text-decoration: none;
    padding-left: 1rem;
    transition: padding-left 0.2s ease;
}

/* ========================================
   INFO PAGE
   ======================================== */
.info-page {
    min-height: 100vh;
    padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 3vw, 3rem);
}

.info-content h1 {
    font-size: clamp(24px, 5vw, 48px);
    font-weight: 400;
    margin-bottom: clamp(1.5rem, 5vw, 2rem);
}

.info-content p {
    font-size: clamp(14px, 2vw, 16px);
    max-width: 60ch;
    line-height: 1.7;
}

/* ========================================
   CV PAGE
   ======================================== */
.cv-page {
    min-height: 100vh;
    padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 3vw, 3rem);
}

.cv-content h1 {
    font-size: clamp(24px, 5vw, 48px);
    font-weight: 400;
    margin-bottom: clamp(1.5rem, 5vw, 2rem);
}

.cv-content p {
    font-size: clamp(14px, 2vw, 16px);
}

.cv-columns {
    display: grid;
    grid-template-columns: clamp(110px, 14vw, 170px) 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}

.cv-photo {
    width: 100%;
    aspect-ratio: 3 / 4;   /* taller, closer to the photo's own shape — the 4:3 crop cut her head/shoulders oddly */
    background: #eee;
    margin: 0;
    overflow: hidden;
}

.cv-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 45%;
}

@media (max-width: 700px) {
    .cv-columns {
        grid-template-columns: 1fr;
    }

    .cv-photo-col {
        width: clamp(110px, 40vw, 170px);
    }
}

/* "Download CV" — a pill button above the contact icons, same black outline
   / invert-on-hover language as the icon buttons and the old nav toggle. */
.cv-download {
    display: inline-block;
    margin-top: clamp(0.75rem, 1.6vw, 1rem);
    padding: 0.55em 1.2em;
    border: 1px solid #000;
    border-radius: 999px;
    color: #000;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: background 0.2s ease, color 0.2s ease;
}

.cv-download:hover {
    background: #000;
    color: #fff;
    text-decoration: none;
}

/* Skills / Tools: items separated by thin vertical rules (trailing, so a
   wrapped line never starts with one). */
.cv-inline-list span:not(:last-child)::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 0.85em;
    margin: 0 0.65em;
    background: currentColor;
    vertical-align: -0.05em;
}

.cv-copy-note {
    min-height: 1.4em;
    margin-top: 0.6rem;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: #777;
}

.cv-contact-list {
    list-style: none;
    display: flex;
    gap: clamp(0.65rem, 1.8vw, 1rem);
}

.cv-contact-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(40px, 5vw, 48px);
    height: clamp(40px, 5vw, 48px);
    border: 1px solid #000;
    border-radius: 999px;
    color: #000;
    transition: background 0.2s ease, color 0.2s ease;
}

.cv-contact-btn svg {
    width: 45%;
    height: 45%;
}

.cv-contact-btn:hover {
    background: #000;
    color: #fff;
}

.cv-section {
    margin-bottom: clamp(1.1rem, 2.4vw, 1.6rem);
}

.cv-section h2 {
    font-size: clamp(16px, 2.5vw, 20px);
    font-weight: 600;
    margin-bottom: clamp(0.35rem, 0.9vw, 0.55rem);
    letter-spacing: 0.05em;
}

.cv-section p {
    font-size: clamp(14px, 2vw, 16px);
    line-height: 1.5;
    color: #333;
    max-width: 70ch;
}

/* ========================================
   PROJECT PAGE LAYOUT
   ======================================== */
body.project-page {
    background: #fff;
    overflow: hidden;
}

.project-container {
    --left-panel-width: 50vw;
    display: grid;
    grid-template-columns: var(--left-panel-width) 1px calc(100% - var(--left-panel-width) - 1px);
    height: 100vh;
    width: 100vw;
    max-width: 100%;
    overflow: hidden;
}

.project-panel {
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    box-sizing: border-box;
}

.project-left {
    border-right: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
    container-type: inline-size;
}

.project-right {
    background: #fff;
    min-width: 0;
}

.project-divider {
    position: relative;
    width: 1px;
    height: 100%;
    background: #000;
    cursor: col-resize;
    touch-action: none;
    user-select: none;
}

.project-divider::before {
    position: absolute;
    top: 0;
    left: -5px;
    width: 11px;
    height: 100%;
    content: "";
}

body.is-resizing-panels {
    cursor: col-resize;
    user-select: none;
}

/* Left panel navigation */
.project-left .global-nav {
    position: relative;
    border-right: 0;
    border-bottom: 1px solid #000;
    flex-shrink: 0;
    margin: 0;
}

.project-left .global-nav .nav-container {
    border-bottom: 1px solid #000;
    margin: 0;
    padding: clamp(0.75rem, 2vw, 1rem) clamp(1rem, 3vw, 1.5rem);
}

/* ========================================
   PROJECT INFO SECTION
   ======================================== */
.project-info {
    flex: 1;
    padding: clamp(1rem, 2.5vw, 1.5rem) clamp(0.25rem, 0.5vw, 0.5rem) clamp(1.5rem, 3vw, 2rem) clamp(0.875rem, 2vw, 1.25rem);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    text-align: left;
}

.project-left.works-open .project-info {
    display: none;
}

.project-index {
    display: none;
    flex: 1;
    padding: clamp(1rem, 2.5vw, 1.5rem) clamp(0.875rem, 2vw, 1.25rem);
    overflow-y: auto;
}

.project-left.works-open .project-index {
    display: block;
}

.project-index-close {
    display: block;
    margin-bottom: clamp(1.25rem, 3vw, 2rem);
    font-size: clamp(10px, 1.5vw, 12px);
}

.project-index ul {
    list-style: none;
}

.project-index li {
    margin-bottom: 0.45rem;
    font-size: clamp(14px, 1.8vw, 18px);
    line-height: 1.25;
}

.project-title {
    width: 66.666%;
    min-width: 0;
    margin: 0 0 clamp(1rem, 2vw, 1.5rem);
    font-size: clamp(18px, 8cqi, 64px);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 0.95;
    text-transform: uppercase;
    white-space: nowrap;
}

.project-meta {
    width: 66.666%;
    min-width: 0;
    margin-bottom: clamp(1rem, 2vw, 1.5rem);
    color: #333;
    font-family: "Courier New", Courier, monospace;
    font-size: clamp(11px, 1vw, 13px);
    line-height: 1.4;
    letter-spacing: 0;
}

.project-meta p {
    margin: 0;
}

.project-description {
    width: 66.666%;
    min-width: 0;
    max-width: none;
    font-size: clamp(12px, 1.1vw, 15px);
    line-height: 1.45;
    font-weight: 400;
    color: #333;
}

.project-description p {
    max-width: 52ch;
    margin-bottom: 0;
}

/* ========================================
   PROJECT NAVIGATION
   ======================================== */
.project-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: clamp(1rem, 2.5vw, 1.5rem) clamp(0.875rem, 2vw, 1.25rem);
    border-top: 1px solid #000;
    margin-top: auto;
    flex-shrink: 0;
    gap: 1rem;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: clamp(11px, 1.3vw, 12px);
    letter-spacing: 0.05em;
}

.nav-arrow {
    display: inline-block;
}

.nav-item a {
    display: inline;
}

.nav-center {
    flex: 1;
    text-align: center;
    font-size: clamp(11px, 1.3vw, 12px);
    letter-spacing: 0.05em;
}

/* ========================================
   PROJECT VISUALS / RIGHT PANEL
   ======================================== */
.project-visuals {
    width: min(100%, 760px);
    margin: 0 auto;
    padding: clamp(1rem, 2.5vw, 1.5rem) clamp(0.875rem, 2vw, 1.5rem);
}

.project-visuals img {
    width: 100%;
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
    display: block;
    max-width: 100%;
    overflow: hidden;
}

/* IMAGE SEQUENCE ANIMATIONS */
.project-visuals--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
    align-items: start;
    width: 100%;
    max-width: none;
}

.project-visuals--split .image-sequence:nth-child(2) {
    margin-top: clamp(2rem, 6vw, 4rem);
}

.image-sequence {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
    overflow: hidden;
    background: #f5f5f5;
}

.sequence-image {
    width: 100%;
    display: block;
    height: 100%;
    object-fit: cover;
    opacity: 1;
}

.strong-image {
    width: 100%;
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
    display: block;
}

/* ========================================
   PROJECT PAGE — FEATURED LAYOUT
   Reference: name/role top-left, statement
   top-right, dot accent, "Featured works"
   label + image row — full width, no boxed
   card, no rounded corners (per feedback).
   ======================================== */
body.project-card-page {
    --project-label-size: clamp(11px, 0.83vw, 12px);   /* project name/role and the details share this size */
    background: #F2F0EA;
    min-height: 100vh;
    padding-top: var(--nav-clearance);
    font-family: Helvetica, Arial, sans-serif;
}

.project-card {
    position: relative;
    max-width: var(--col);
    margin: 0 auto;
    padding: 0 var(--page-pad-x);
}

.project-card-top {
    display: grid;
    grid-template-columns: minmax(90px, 160px) 1fr;
    gap: clamp(1rem, 3vw, 2rem);
    position: relative;
    padding-bottom: clamp(3.5rem, 9vw, 6.5rem);
}

.project-card-meta {
    font-size: calc(var(--project-label-size) * 1.3);   /* project name/role: 30% larger than the details */
    line-height: 1.3;
    color: #555;
}

.project-card-meta p:first-child {
    color: #000;
    font-weight: 700;
}

.project-card-statement {
    font-size: clamp(16px, 1.9vw, 22px);
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: -0.01em;
    max-width: 56ch;
    color: #111;
}

/* Big monitors: the statement text and the small labels keep growing a little
   with the screen (smoothly, from 1440px up) so they stay in proportion with
   the wider column instead of looking tiny in the middle of a huge screen. */
@media (min-width: 1441px) {
    .project-card-statement {
        font-size: calc(22px + (min(100vw, 3200px) - 1440px) * 0.0055);
    }

    body.project-card-page {
        --project-label-size: calc(12px + (min(100vw, 3200px) - 1440px) * 0.0026);
    }
}

.project-card-statement p + p {
    margin-top: 1em;
}

/* Project details (format / pages / year): fixed in the LEFT GUTTER at the
   bottom of the viewport, a left-aligned gray list that travels with you while
   you scroll. The content column is 1100px wide and centred, so the gutter to
   its left is (100vw - 1100px) / 2; the list is capped to that gutter (minus a
   gap, and at most 240px) so it can never touch the work. When the screen is
   too narrow to leave a usable gutter (under ~1400px, phones included) there is
   no room beside the work, so it becomes a normal one-line row above the
   images instead. It fades out when the footer comes into view. */
.project-meta-sticky {
    --meta-gutter: calc((100vw - var(--col)) / 2 - 1.5rem);
    position: fixed;
    left: var(--page-pad-x);
    bottom: clamp(1rem, 2.5vw, 1.75rem);
    z-index: 90;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 0.12em;
    width: min(var(--meta-gutter), 240px);
    max-width: min(var(--meta-gutter), 240px);
    margin: 0;
    text-align: left;
    font-size: var(--project-label-size);
    line-height: 1.25;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #777;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.project-meta-sticky.is-hidden {
    opacity: 0;
}

.project-meta-sticky .meta-sep {
    display: none;
}

@media (max-width: 1399px) {
    .project-meta-sticky {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        column-gap: 0.5em;
        width: auto;
        max-width: none;
        margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
        font-size: 11px;
    }

    .project-meta-sticky .meta-sep {
        display: inline;
        color: #aaa;
    }
}

/* Scroll reveal (initScrollReveal): images rise a little and fade in as they
   enter the viewport; JS adds .reveal, then .is-in when seen. */
.reveal {
    opacity: 0;
    transform: translateY(56px);
    transition: opacity 1.5s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0s),
                transform 1.7s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0s);
}

.reveal.is-in {
    opacity: 1;
    transform: none;
}

/* leaving through the top: drift up and fade, equally slowly */
.reveal.is-above {
    transform: translateY(-36px);
}

.project-card-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--image-grid-gap);
}

/* fanzine.html opens with its 3 gifs, each full width in its own row
   (stacked in one column) — Nicole's request. */
.page-fanzine .project-card-row {
    grid-template-columns: 1fr;
}

/* On the Map: the gifs keep their own transparent background and colours;
   they just sit a little smaller than the column, centred, and the empty
   transparent margin above/below each spread is clipped (not edited in the
   file) so the gap between fanzines stays tight. */
.page-fanzine .project-card-row img {
    width: 80%;
    margin-inline: auto;
    aspect-ratio: 1080 / 776;
    object-fit: cover;
    object-position: 50% 49.3%;
}

/* Docu — Dad opens with its gif alone in the top row. */
.page-docu .project-card-row {
    grid-template-columns: 1fr;
}

.page-docu .project-card-row img {
    width: 80%;
    margin-inline: auto;
    /* clip the empty transparent margin above/below the drawing (the file
       itself is untouched) so the gap to the rest of the page stays tight */
    aspect-ratio: 1080 / 720;
    object-fit: cover;
    object-position: 50% 47.2%;
}

.page-fanzine .project-card-top {
    padding-bottom: clamp(2rem, 5vw, 3.75rem);
}
.project-card-row img {
    width: 100%;
    display: block;
}

.project-more {
    max-width: var(--col);
    margin: var(--image-grid-gap) auto 0;
    padding: 0 var(--page-pad-x);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--image-grid-gap);
}

.project-more img {
    width: 100%;
    display: block;
    object-fit: cover;
}

.project-more video {
    grid-column: 1 / -1;
    width: 100%;
    display: block;
    object-fit: cover;
}

/* ASPEN keeps its own image grid at 2 columns (Nicole's request) while
   every other project page uses the shared 3-column grid above. */
.page-aspen .project-more {
    grid-template-columns: repeat(2, 1fr);
}

/* Nicole's request: the remaining-images grid runs 2 columns for its
   first half, then 3 columns for its second half. Each half is its own
   nested grid, spanning the full width of the outer .project-more grid
   (which stays a plain 3-col grid for pages that don't use this split,
   like ASPEN/belief). */
.project-more-grid {
    grid-column: 1 / -1;
    display: grid;
    gap: var(--image-grid-gap);
}

.project-more-grid img {
    width: 100%;
    display: block;
    object-fit: cover;
}

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

.project-more-grid--three {
    grid-template-columns: repeat(3, 1fr);
}

/* One image on its own row (On the Map: the three back covers together). */
.project-more-grid--single {
    grid-template-columns: 1fr;
}

.project-more-grid--single img {
    width: 62%;
    margin-inline: auto;
}

/* Belief : Awakening — a justified-rows gallery. Each image's flex-grow is
   its own width/height ratio (set inline), so every image in a row ends up
   the same height and the row fills the full width with no cropping. */
.belief-row {
    display: flex;
    align-items: flex-start;
    gap: var(--image-grid-gap);
}

.project-more .belief-row img,
.project-card-row.belief-row img {
    width: auto;
    min-width: 0;
    flex: 1 1 0;
    height: auto;
    object-fit: initial;
}

/* the four cover pages sit in one row on big screens; on tablets they wrap
   into two rows of two so each stays a readable size */
@media (max-width: 1100px) {
    .belief-row--covers { flex-wrap: wrap; }
    .project-more .belief-row--covers img {
        flex: 1 1 calc(50% - var(--image-grid-gap));
    }
}

@media (max-width: 700px) {
    .belief-row { flex-direction: column; }
    .project-more .belief-row img,
    .project-card-row.belief-row img { width: 100%; flex: none; }
}

/* Sound toggle on project videos. Videos autoplay muted (browsers only allow
   that); the button is the viewer's click that allows sound. White +
   mix-blend-mode:difference keeps it readable over any footage. */
.video-frame {
    position: relative;
    display: block;
    grid-column: 1 / -1;
}

.project-more-grid .video-frame {
    grid-column: auto;
}

/* Interior Faces: the three motion pieces are 10% narrower than the column
   (centred) so each one fits on a full screen. */
.video-frame--motion {
    width: 90%;
    justify-self: center;
}

.video-sound {
    position: absolute;
    left: 0;
    top: 100%;
    height: var(--image-grid-gap);
    z-index: 2;
    padding: 0;
    border: 0;
    background: none;
    color: #8a8a8a;
    font: inherit;
    font-size: 10px;
    line-height: var(--image-grid-gap);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

.video-sound:hover { color: #000; }

/* A video nested inside a .project-more-grid (e.g. ALIEN's two portrait
   videos side by side) sits in its own column instead of spanning full
   width — overrides the "always full width" .project-more video rule
   above, which is meant for a video placed as a direct .project-more
   child. */
.project-more-grid video {
    grid-column: auto;
    width: 100%;
    display: block;
    object-fit: cover;
    aspect-ratio: 9 / 16;
}

/* aspen-video.mp4 has a thin black letterbox baked into the recording
   (measured ~17px top/bottom at its native 1280x720) — crop it out by
   setting the container to the clean-content ratio and letting cover
   scale/crop the bars away symmetrically. */
.project-more video[src*="aspen-video"] {
    aspect-ratio: 1280 / 680;
}

.project-footer {
    max-width: var(--col);
    margin: var(--section-gap) auto 0;
    padding: var(--page-pad-y) var(--page-pad-x) var(--page-pad-y);
    font-size: 12px;
    letter-spacing: 0.05em;
}

.project-footer-nav {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.project-copyright {
    margin-top: clamp(0.5rem, 1.5vw, 0.75rem);
    color: #777;
    font-size: 11px;
    letter-spacing: 0.02em;
}

@media (max-width: 700px) {
    .project-card-top {
        grid-template-columns: 1fr;
        padding-bottom: clamp(3rem, 12vw, 4.5rem);
    }

    .project-card-row,
    .project-more,
    .project-more-grid--three {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* TABLET: Around 1024px and below */
@media (max-width: 1200px) {
    .project-panel {
        width: 100%;
    }

    .nav-links {
        gap: clamp(1rem, 3vw, 2rem);
    }

    .project-nav {
        flex-wrap: wrap;
        gap: clamp(1rem, 2vw, 1.5rem);
    }

    .nav-item {
        width: 100%;
        justify-content: flex-start;
    }

    .nav-center {
        width: 100%;
        text-align: left;
    }
}

/* MOBILE: Around 768px and below */
@media (max-width: 768px) {
    body.project-page {
        overflow-y: auto;
        overflow-x: hidden;
    }

    .project-container {
        display: flex;
        flex-direction: column;
        height: auto;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .project-panel {
        width: 100%;
        height: auto;
        overflow: visible;
        border-right: none;
        border-bottom: 1px solid #000;
        max-width: 100%;
        overflow-x: hidden;
    }

    .project-divider {
        display: none;
    }

    .project-left {
        border-bottom: 1px solid #000;
        min-height: auto;
    }

    .project-left .global-nav {
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .project-info {
        padding: clamp(1rem, 4vw, 1.5rem) clamp(0.875rem, 4vw, 1.25rem);
        overflow: visible;
        flex: none;
        display: flex;
        align-items: flex-end;
        text-align: left;
    }

    .project-title {
        width: 100%;
        padding-top: clamp(1.5rem, 8vw, 3rem);
        margin-bottom: clamp(1rem, 4vw, 1.5rem);
        font-size: clamp(30px, 12cqi, 64px);
    }

    .project-meta {
        width: 100%;
        margin-bottom: 1.5rem;
        font-size: 10px;
    }

    .project-meta p {
        margin-bottom: 0;
    }

    .project-description {
        width: 100%;
        max-width: none;
        font-size: 11px;
        line-height: 1.35;
    }

    .project-description p {
        max-width: 52ch;
    }

    .project-index {
        flex: none;
        padding: clamp(1rem, 4vw, 1.5rem) clamp(0.875rem, 4vw, 1.25rem);
    }

    .project-nav {
        flex-direction: column;
        align-items: flex-start;
        border-top: 1px solid #000;
    }

    .nav-item {
        width: auto;
    }

    .nav-center {
        width: auto;
        text-align: left;
    }

    .project-right {
        border-top: 1px solid #000;
        border-bottom: none;
    }

    .project-visuals {
        padding: clamp(1rem, 4vw, 1.5rem) clamp(0.875rem, 4vw, 1.25rem);
    }

    /* Adjust navigation for mobile */
    .nav-container {
        flex-direction: row;
        gap: 1rem;
        align-items: center;
        width: 100%;
    }

    .nav-links {
        flex-direction: row;
        gap: 1rem;
        width: auto;
    }

    .nav-brand {
        width: auto;
    }

    .project-visuals {
        width: 100%;
        overflow-x: hidden;
    }

    .project-visuals img {
        width: 100%;
        overflow-x: hidden;
    }
}

/* SMALL MOBILE: Around 480px and below */
@media (max-width: 480px) {
    .works-content h1 {
        font-size: clamp(18px, 6vw, 28px);
    }

    .info-content h1,
    .cv-content h1 {
        font-size: clamp(18px, 6vw, 28px);
    }

    .project-meta {
        font-size: clamp(11px, 1.5vw, 13px);
    }

    .project-nav {
        gap: 0.75rem;
    }

    .nav-item {
        font-size: clamp(10px, 1.2vw, 11px);
    }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */
.no-scroll {
    overflow: hidden;
}

/* Ensure proper text rendering */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    max-width: 100%;
    overflow-x: hidden;
}

/* Prevent horizontal scrollbar on all elements */
* {
    max-width: 100%;
}

/* Special handling for project visuals to prevent overflow */
.project-visuals {
    overflow-x: hidden;
    max-width: 100%;
    width: 100%;
}

.project-visuals > * {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

/* ========================================
   VERY LARGE SCREENS (above 1920px)
   Up to 1920px everything is exactly as designed. Beyond it the home page
   keeps growing smoothly with the screen (instead of freezing at its maximum
   sizes and looking small on a huge monitor). Project pages grow through
   --col and the text rules above.
   ======================================== */
@media (min-width: 1921px) {
    .fluid-type { --hero-font-size: calc(148.75px + (100vw - 1920px) * 0.0978); }
    .hero-side { --fw: calc(221px + (100vw - 1920px) * 0.4); }
    .hero-year { font-size: calc(22px + (100vw - 1920px) * 0.0156); }
    .work-index-item { font-size: calc(96px + (100vw - 1920px) * 0.064); }
    .site-nav-brand { font-size: calc(18px + (100vw - 1920px) * 0.0125); }
    .site-nav-right { font-size: calc(12px + (100vw - 1920px) * 0.0063); }
    .hero-bottom-bar { font-size: calc(11px + (100vw - 1920px) * 0.0063); }
    .cv-content p { font-size: calc(16px + (100vw - 1920px) * 0.0063); }
}