/* FONTS — Ortica Linear (Light / Regular / Bold) */
@font-face {
    font-family: 'Ortica';
    src: url('assets/fonts/OrticaLinear-Light.woff2') format('woff2'),
         url('assets/fonts/OrticaLinear-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Ortica';
    src: url('assets/fonts/OrticaLinear-Regular.woff2') format('woff2'),
         url('assets/fonts/OrticaLinear-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Ortica';
    src: url('assets/fonts/OrticaLinear-Bold.woff2') format('woff2'),
         url('assets/fonts/OrticaLinear-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* FONTS — Chomsky (blackletter; single weight, broad range so any requested
   weight renders the one file cleanly) */
@font-face {
    font-family: 'Chomsky';
    src: url('assets/fonts/Chomsky.otf') format('opentype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* FONTS — Interlope (single weight; broad range so any requested weight renders
   the one file cleanly rather than faux-bolding it) */
@font-face {
    font-family: 'Interlope';
    src: url('assets/fonts/Interlope-Regular.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* FONTS — Ortica Angular (Bold) */
@font-face {
    font-family: 'Ortica Angular';
    src: url('assets/fonts/OrticaAngular-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* FONTS — Sinistre (Bold) */
@font-face {
    font-family: 'Sinistre';
    src: url('assets/fonts/Sinistre-Bold.woff2') format('woff2'),
         url('assets/fonts/Sinistre-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* FONTS — Mourier (Regular) */
@font-face {
    font-family: 'Mourier';
    src: url('assets/fonts/Mourier-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* FONTS — Author (Variable, full weight axis) */
@font-face {
    font-family: 'Author Variable';
    src: url('assets/fonts/Author-Variable.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

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

body {
    background-color: #0a0a0c; /* Deep slate background baseline */
    color: #000000;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 300;
    overflow-x: hidden;
    line-height: 1.6;
}

body.night-mode {
    color: #ffffff;
}

body.night-mode .practice-statement,
body.night-mode .project-number,
body.night-mode .project-title,
body.night-mode .project-desc,
body.night-mode .skill-keys span,
body.night-mode .portal-link {
    color: #ffffff;
}

/* RUNNING HEADER */
.running-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 16px 0;
    z-index: 10;
    background: #000000; /* Black */
    overflow: hidden;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes scroll-text {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(0);
    }
}

.header-name {
    font-size: 2.2rem;
    letter-spacing: 0.02em;
    color: #ffffff;
    margin: 0;
    white-space: nowrap;
    font-family: 'Chomsky', serif;
    font-weight: 400;
    animation: scroll-text 8s linear infinite;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    transition: opacity 0.3s ease;
}

.header-name:hover {
    /* single typeface — no switch on hover, just a subtle fade */
    opacity: 0.8;
}

body.night-mode .header-name {
    color: #ffffff;
}

body.night-mode .running-header {
    background: #000000; /* Black for night */
}

/* NAV LINKS — live inside the black running-header, flanking the name.
   Absolutely positioned so the centred name stays perfectly centred. */
.header-link {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Chomsky', serif;
    font-weight: 400;
    font-size: 1.4rem;         /* a little smaller than the 2.2rem name */
    letter-spacing: 0.02em;
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.header-link--left { left: 40px; }
.header-link--right { right: 40px; }

.header-link:hover {
    /* single typeface — no switch on hover, just a subtle fade */
    opacity: 0.6;
}

.header-link--current,
.header-link--current:hover {
    /* peach lifted from the WebGL cloud palette (midDay = 0.93,0.78,0.68) */
    color: #edc7ad;
    opacity: 1;
}

/* INFORMATION PAGE */
body.info-page {
    background-color: #ffffff;
    color: #000000;
}

.info-content {
    position: relative;
    z-index: 1;
    min-height: calc(100vh - 60px);
    margin-top: 60px;          /* clear the fixed running-header */
    padding: 100px 40px; /* clear the fixed running-header, breathing room top/bottom */
    color: inherit;            /* inherits body colour → flips with night-mode */
    display: flex;             /* centre the block in the middle of the page */
    align-items: center;
    justify-content: center;
    text-align: center;
}

.info-inner {
    max-width: 1200px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 56px;
}

.info-intro {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.info-name {
    font-family: 'Ortica', serif;   /* same as the section headings */
    font-weight: 700;
    font-size: 0.95rem;             /* unified info-page size */
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #edc7ad;                  /* peach from the cloud palette */
    margin: 0;
}

.info-tagline {
    font-family: 'Ortica', serif;
    font-weight: 300;
    font-size: 0.95rem;         /* unified info-page size */
    letter-spacing: 0.06em;
    opacity: 0.65;
    margin: 0;
}

/* The three headline sections sit side by side across the page. */
.info-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 48px;
    align-items: flex-start;
}

.info-row .info-section {
    /* wide enough that "Perfume Consultant | Bloom Perfumery" stays on one line */
    flex: 1 1 330px;
    min-width: 330px;
}

.info-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.info-label {
    font-family: 'Ortica', serif;
    font-weight: 700;
    font-size: 0.95rem;         /* unified info-page size */
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.5;
    margin: 0 0 6px;
    white-space: nowrap;        /* keep e.g. "Collaborators" on the heading line */
}

.info-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.info-entry {
    font-family: 'Ortica', serif;
    font-weight: 300;
    font-size: 0.95rem;         /* unified info-page size */
    line-height: 1.5;
    letter-spacing: 0.01em;
    text-align: center;
}

/* Keep each phrase whole so a lone word (e.g. "Perfumery") never drops to its
   own line; the entry may still break at the "|" between role and org. */
.info-entry .role,
.info-entry .org {
    white-space: nowrap;
}

.info-entry .sep {
    opacity: 0.4;
    margin: 0 0.15em;
}

.info-entry .org {
    opacity: 0.62;
}

/* Contact links sit under the tagline in the intro — same type as the info text,
   no heading, no underline. */
.info-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-family: 'Ortica', serif;
    font-weight: 300;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
}

.info-link {
    color: #edc7ad;             /* peach, same as .info-name */
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.info-link:hover {
    opacity: 0.6;
}

.info-entry .note {
    font-size: 1em;             /* same size as everything else on the info page */
    letter-spacing: 0.06em;
    opacity: 0.5;
    text-transform: none;
}

.practice-statement,
.project-number,
.project-title,
.project-desc,
.skill-keys span,
.portal-link {
    color: #000000;
}

/* THE FIXED WEBGL CANVAS */
#atmosphere-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1; /* Sits perfectly behind your content */
    pointer-events: none;
}

.hero-threshold,
.ecosystem-feed,
.portal-footer {
    position: relative;
    z-index: 1;
}

/* 1. HERO THRESHOLD */
.hero-threshold {
    min-height: calc(100vh - 60px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10%;
    margin-top: 60px; /* Space below the fixed header */
}

.statement-wrapper {
    max-width: 900px;
    text-align: center;
}

.practice-statement-link {
    text-decoration: none;
}

.practice-statement {
    font-family: 'Ortica', serif;
    font-weight: 300;
    font-size: clamp(0.95rem, 1.5vw, 1.35rem); /* Fluid typography */
    line-height: 1.4;
    color: #000000; /* Black text */
    margin-bottom: 40px;
    cursor: pointer;
    display: inline-block;
    transition: transform 0.35s ease, opacity 0.35s ease;
}

.practice-statement-link:hover .practice-statement {
    opacity: 0.85;
    transform: scale(1.04);
    color: #ffffff;
}
.practice-statement em {
    font-style: italic;
    font-weight: 400;
}

.cta-link-wrapper {
    margin-top: 2rem;
}


.scroll-indicator {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #a0522d; /* Subtle rust contrast */
}

/* 2. CSS SLIDESHOW */
.projects-page {
    background-color: #ffffff;
    color: #000000;
}

.ecosystem-feed {
    padding: 5em 0 0.5em 0;
    min-height: calc(100vh - 60px);
    margin-top: 60px; /* Space below the fixed header */
    text-align: center;
    background: #ffffff;
    position: relative;
    overflow-x: auto;
    overflow-y: visible;
}

/* HORIZONTAL PROJECT TIMELINE */
.projects-page {
    background-color: #ffffff;
}

.projects-dashboard {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 80px 56px 120px;
    background: transparent;
}

.timeline-row {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
    width: max-content;
    min-width: 100%;
    margin: 0 auto;
    padding: 20px 160px 120px 0;
}

.timeline-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    transition: transform 0.35s ease;
}

.timeline-item.shifted {
    transform: translateX(44px);
}

.project-link {
    display: contents;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.project-box {
    position: relative;
    width: auto;
    min-width: 80px;
    height: 260px;
    overflow: hidden;
    background: #111;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.24);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    cursor: pointer;
    will-change: transform;
}

.timeline-item:hover .project-box {
    transform: scale(1.16);
    box-shadow: 0 50px 140px rgba(0, 0, 0, 0.42);
    z-index: 2;
}

.project-media {
    position: relative;
    height: 100%;
    width: auto;
    overflow: hidden;
    background: #111;
}

.asset-slide {
    position: relative;
    height: 100%;
    width: auto;
    opacity: 1;
    transition: opacity 1.2s ease;
    display: block;
    background: #111;
}

.asset-slide.active {
    opacity: 1;
}

.asset-slide img,
.asset-slide object {
    height: 100%;
    width: auto;
    display: block;
    filter: blur(0px);
    transition: filter 0.35s ease;
}

.project-box:hover .asset-slide img,
.project-box:hover .asset-slide object {
    filter: blur(10px);
}

/* Multi-asset slideshow: the box is resized (by JS) to hug whichever slide is
   currently active — always exactly that slide's own aspect ratio at the fixed
   height, so the image fills the box edge-to-edge with NO dark bars, NO crop,
   NO letterboxing. overflow:hidden (inherited from .project-box) plus flexbox
   gap guarantee the gap to the next item stays a constant 28px and nothing can
   ever spill into a neighbour. Slides are stacked and cross-fade opacity into
   each other; the box width glides in sync with the fade so the resize reads as
   one smooth motion rather than a jump. */
.project-box--multi {
    /* Fallback so the box never collapses to 0 width (every slide is
       position:absolute, so there's no in-flow content to size from) before
       JS finishes loading images and sets the real per-slide width. */
    width: 220px;
    /* Neutral (not #111) so any brief sliver while the width glides between two
       differently-shaped slides shows the page colour, never a black bar. */
    background: transparent;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s ease, box-shadow 0.35s ease;
}

.project-box--multi .project-media {
    width: 100%;
    height: 100%;
    background: transparent;
}

.project-box--multi .asset-slide {
    background: transparent;
}

/* Volatile Archives artwork is transparent PNG — back it with white so the
   transparent areas read as white paper rather than the cloud backdrop. */
.project-box--volatile,
.project-box--volatile .project-media,
.project-box--volatile .asset-slide {
    background: #ffffff;
}

/* Shadows: Project Statement cover is a transparent PDF render — back it white so
   the whole page reads on white rather than the dark box. */
.project-box--shadow-statement,
.project-box--shadow-statement .project-media,
.project-box--shadow-statement .asset-slide {
    background: #ffffff;
}

.project-box--multi .asset-slide {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: auto;
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-box--multi .asset-slide.active {
    opacity: 1;
}

/* Lightbox-only slides — appear when the project is clicked, never in the inline
   timeline crossfade (.asset-extra are extra photos; .asset-pdf is an embedded PDF
   viewer). The mirror is .asset-cover (handled in JS): a timeline-only preview
   image that shows in the card but is excluded from the click-through slideshow. */
.asset-extra,
.asset-pdf {
    display: none !important;
}

/* Info block sitting below each image: title, skillset, date */
.project-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
}

.project-name {
    font-family: 'Ortica', serif;
    font-weight: 600;
    font-size: 0.78rem;
    line-height: 1.3;
    color: #111;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.project-skillset {
    font-family: 'Ortica', serif;
    font-weight: 300;
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.65);
}

.project-date {
    font-family: 'Ortica', serif;
    font-weight: 300;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
    color: rgba(0, 0, 0, 0.45);
    margin-top: 2px;
}

/* External link surfaced under the date for projects that have one. */
.project-external {
    display: inline-block;
    margin-top: 5px;
    font-family: 'Ortica', serif;
    font-weight: 300;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #edc7ad;                 /* peach, same as the header */
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.project-external:hover {
    opacity: 0.55;
}

@media (max-width: 1180px) {
    .projects-dashboard { transform: scale(0.95); }
}
@media (max-width: 1024px) {
    .projects-dashboard { transform: scale(0.82); }
}
@media (max-width: 860px) {
    .projects-dashboard { transform: scale(0.72); }
}
@media (max-width: 720px) {
    .projects-dashboard { transform: scale(0.62); }
}
@media (max-height: 820px) {
    .projects-dashboard { transform: scale(0.85); }
}
@media (max-height: 720px) {
    .projects-dashboard { transform: scale(0.72); }
}

/* LIGHTBOX: enlarge a project's asset(s) as the focal point */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 5vh 6vw;
    /* frosted white: translucent enough for the blur to read, opaque enough that
       the page's details dissolve into a soft wash */
    background: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lightbox.open {
    display: flex;
    flex-direction: column;
    opacity: 1;
    gap: 14px;
}

/* Vertical, scrollable stack of a project's assets. Scrollbar hidden. */
.lightbox-stage {
    position: relative;
    flex: 1;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* centre content vertically when it fits (single-asset projects), but fall
       back to top-aligned + scrollable when it overflows (multi-asset projects) */
    justify-content: safe center;
    gap: 4vh;
    padding: 4vh 0 6vh;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* old Edge/IE */
}
.lightbox-stage::-webkit-scrollbar { width: 0; height: 0; display: none; }  /* WebKit */

.lightbox-slide {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    will-change: transform;
}

/* Paired assets sharing a row (e.g. two narrower images side by side). */
.lightbox-slide.lightbox-row {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2vw;
}
.lightbox-row .lightbox-media {
    max-width: 36vw;
}

/* Every asset is shown WHOLE at its natural aspect ratio (never cropped). The
   parallax only translates the slide as a whole. */
.lightbox-media {
    display: block;
    max-width: 74vw;
    max-height: 66vh;
    width: auto;
    height: auto;
    object-fit: contain;
    /* white backing so transparent PNGs read as white paper, not the dark
       backdrop; invisible behind opaque photos/videos */
    background: #ffffff;
    /* soft, evenly-blended halo (layered low-opacity shadows, minimal offset)
       instead of one harsh offset rectangle */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05),
                0 12px 45px rgba(0, 0, 0, 0.09);
}

/* PDF embed needs explicit dimensions (an iframe has no intrinsic size). */
.lightbox-media--pdf {
    width: 74vw;
    height: 66vh;
    border: none;
    background: #fff;
}

@keyframes lightbox-pop {
    from { opacity: 0; transform: scale(0.94); }
    to { opacity: 1; transform: scale(1); }
}

.lightbox-close {
    position: absolute;
    top: 22px;
    right: 28px;
    background: none;
    border: none;
    color: #111111;
    font-family: 'Ortica', serif;
    font-size: 2.4rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.2s ease;
}

.lightbox-close:hover {
    opacity: 1;
}

.lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #111111;
    cursor: pointer;
    opacity: 0.55;
    padding: 20px;
    transition: opacity 0.2s ease;
    z-index: 1;
}

.lightbox-arrow svg {
    display: block;
}

.lightbox-arrow:hover {
    opacity: 1;
}

.lightbox-prev { left: 1.5vw; }
.lightbox-next { right: 1.5vw; }

.lightbox-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: 2vh;            /* seat the title a little below the top edge */
    color: rgba(0, 0, 0, 0.85);
    /* slideshow counter + LINK use Ortica, matching the project meta text */
    font-family: 'Ortica', serif;
    pointer-events: none;
}

.lightbox-link {
    pointer-events: auto;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #edc7ad;                 /* peach, same as the header */
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: opacity 0.2s ease;
}

.lightbox-link:hover {
    opacity: 0.6;
}

.lightbox-title {
    font-weight: 600;           /* match the timeline project titles' boldness */
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.9);
    text-align: center;
}

.lightbox-counter {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
    color: rgba(0, 0, 0, 0.55);
}

.explore-arrow {
    background: none;
    border: 2px solid #ffffff;
    color: #ffffff;
    font-size: 1rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    transition: all 0.3s ease;
}

.explore-arrow:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
}

.arrow-icon {
    display: inline-block;
    font-size: 1.2rem;
}

/* SIDEBAR PANEL */
.project-sidebar {
    position: fixed;
    right: -380px;
    top: 0;
    width: 380px;
    height: 100vh;
    background-color: #0a0a0c;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding: 60px 30px 40px 30px;
    z-index: 100;
    overflow-y: auto;
    transition: right 0.4s ease;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
}

.project-sidebar.active {
    right: 0;
}

.sidebar-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 99;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.sidebar-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

.sidebar-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: #ffffff;
    font-size: 2rem;
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
}

.sidebar-close:hover {
    color: #a0522d;
}

.sidebar-content {
    color: #ffffff;
}

.sidebar-title {
    font-size: 2rem;
    font-weight: 300;
    margin-bottom: 15px;
    color: #ffffff;
}

.sidebar-description {
    font-size: 0.95rem;
    color: #ffffff;
    margin-bottom: 30px;
    line-height: 1.6;
}

.sidebar-section-title {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #a0522d;
    margin-top: 25px;
    margin-bottom: 12px;
    font-weight: 400;
}

.sidebar-text {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin-bottom: 15px;
}

.sidebar-skills {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-skills li {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.ecosystem-card {
    display: flex;
    align-items: center;
    min-height: 80vh;
    padding: 250px 8%; /* Massive vertical gaps to let the sky breathe */
    gap: 8%;
}

/* Layout variation: Project 1 (Left Image, Right Text) */
.left-variant {
    flex-direction: row;
}

/* Layout variation: Project 2 (Right Image, Left Text) */
.right-variant {
    flex-direction: row;
}

/* Content Elements */
.card-media {
    flex: 1.2;
    max-width: 700px;
}

/* Placeholder box for slideshow */
.media-placeholder {
    width: 100%;
    max-width: 600px;
    height: auto;
    aspect-ratio: 16 / 9;
    background-color: #f0f0f0;
    border: 1px solid #cccccc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    color: #666666;
}

.card-meta {
    flex: 1;
    max-width: 500px;
}

.project-number {
    font-size: 0.85rem;
    color: #000000;
    font-weight: 300;
}

.project-title {
    font-size: 2.2rem;
    font-weight: 300;
    margin: 10px 0 20px 0;
    color: #000000;
}

.project-desc {
    font-size: 0.95rem;
    color: #000000;
    margin-bottom: 30px;
}

.skill-keys span {
    font-size: 0.75rem;
    display: none;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    text-decoration: none;
    letter-spacing: 0.05em;
    transition: letter-spacing 0.3s ease;
}

.portal-link:hover {
    letter-spacing: 0.15em;
}

/* PROJECT DETAIL TEMPLATE */
.project-page {
    background-color: #ffffff;
    color: #1a1a1a;
    animation: detail-fade-in 0.5s ease;
}

@keyframes detail-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.project-detail {
    max-width: 720px;
    margin: 0 auto;
    padding: 5em 40px 6em;
    margin-top: 60px;
}

.back-link {
    display: inline-block;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.6);
    text-decoration: none;
    margin-bottom: 40px;
    transition: color 0.25s ease;
}

.back-link:hover {
    color: #1a1a1a;
}

.project-detail-content {
    margin-top: 30px;
}

.project-hero {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
    margin-bottom: 40px;
}

.project-detail-title {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 2.2rem;
    line-height: 1.25;
    color: #1a1a1a;
    margin-bottom: 12px;
}

.project-detail-date {
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
    color: rgba(0, 0, 0, 0.55);
    margin-bottom: 30px;
}

.project-detail-desc {
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(0, 0, 0, 0.75);
    max-width: 60ch;
}
/* ============================================================
   MOBILE / iPhone — responsive adjustments
   ============================================================ */

/* Phones & small tablets */
@media (max-width: 768px) {
    /* Header: smaller name + pull the nav links in so they fit narrow screens */
    .running-header { height: 54px; padding: 12px 0; }
    .header-name { font-size: 1.3rem; letter-spacing: 0.01em; }
    .header-link { font-size: 0.9rem; }
    .header-link--left { left: 16px; }
    .header-link--right { right: 16px; }

    /* Hero (index) */
    .hero-threshold { padding: 0 24px; margin-top: 54px; }

    /* Timeline: drop the desktop scale-down (it made cards tiny) and let the
       row swipe horizontally at a comfortable size, with momentum on iOS */
    .ecosystem-feed {
        padding: 2.4em 0 0.5em 0;
        margin-top: 54px;
        -webkit-overflow-scrolling: touch;
    }
    .projects-dashboard { transform: none; padding: 20px 16px 56px; }
    .timeline-row { gap: 14px; padding: 8px 24px 40px 16px; }
    .project-box { height: 220px; }

    /* Info page: stack the three sections full-width (min-width:330 overflowed) */
    .info-content { padding: 80px 24px; }
    .info-row { gap: 28px; }
    .info-row .info-section { flex: 1 1 100%; min-width: 0; }
}

/* Narrow phones */
@media (max-width: 480px) {
    .header-name { font-size: 1.1rem; }
    .header-link { font-size: 0.8rem; }
    .header-link--left { left: 12px; }
    .header-link--right { right: 12px; }

    /* Lightbox uses more of the small screen; paired images stack vertically */
    .lightbox { padding: 4vh 3vw; }
    .lightbox-media { max-width: 90vw; max-height: 60vh; }
    .lightbox-media--pdf { width: 90vw; height: 60vh; }
    .lightbox-row { flex-direction: column; gap: 4vh; }
    .lightbox-row .lightbox-media { max-width: 90vw; }
    .lightbox-arrow { padding: 10px; }
    .lightbox-prev { left: 0; }
    .lightbox-next { right: 0; }
    .lightbox-close { top: 14px; right: 16px; }
}

/* Touch devices: don't let hover-only effects stick after a tap */
@media (hover: none) {
    .timeline-item:hover .project-box {
        transform: none;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.24);
    }
    .project-box:hover .asset-slide img,
    .project-box:hover .asset-slide object { filter: none; }
    .practice-statement-link:hover .practice-statement {
        transform: none; opacity: 1; color: #000000;
    }
}

/* iOS Safari: use dynamic viewport height so full-height sections aren't
   hidden behind the browser's collapsing toolbar. */
@supports (height: 100dvh) {
    .hero-threshold { min-height: calc(100dvh - 60px); }
    .info-content { min-height: calc(100dvh - 60px); }
}