/* ============================================================
 * Selari Atelier — Main Stylesheet
 *
 * Aesthetic: ultra-minimal, museum/gallery feel — direct
 * replication of ebasg.com.
 *   - Fixed top-left sidebar holds the logo and a vertical nav
 *   - Non-current nav items are invisible until the sidebar is hovered
 *   - Project grids: 2 columns, full-bleed landscape thumbnails
 *   - Single project: image on the right, title + tabs bottom-left
 * ============================================================ */

/* ----- Design tokens -------------------------------------------------- */
:root {
    --c-bg: #FFFFFF;
    --c-text: #111111;
    --c-muted: #B5B5B5;
    --c-line: #ECECEC;
    --c-overlay: rgba(0, 0, 0, 0.45);

    --font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    --font-serif: 'Cormorant Garamond', Georgia, serif;

    --fs-logo: 0.95rem;
    --fs-nav: 0.95rem;
    --fs-base: 0.95rem;
    --fs-title: 1.4rem;
    --fs-small: 0.82rem;

    --s-1: 8px;
    --s-2: 16px;
    --s-3: 24px;
    --s-4: 40px;
    --s-5: 64px;
    --s-6: 96px;

    --sidebar-w: 280px;
    --edge: 40px;

    --t-fast: 0.2s;
    --t-base: 0.4s;
}

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

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: 1.55;
    color: var(--c-text);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

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

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--t-base) ease, opacity var(--t-base) ease;
}

ul { list-style: none; }

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    word-wrap: normal !important;
}

.skip-link:focus {
    position: fixed;
    left: var(--s-2);
    top: var(--s-2);
    background: #fff;
    padding: var(--s-1) var(--s-2);
    z-index: 9999;
    width: auto;
    height: auto;
    clip: auto;
    clip-path: none;
}

/* ============================================================
 *  Layout shell — fixed top-left sidebar + main content area
 * ============================================================ */
.site {
    min-height: 100vh;
    position: relative;
}

.site-header {
    position: fixed;
    top: var(--edge);
    left: var(--edge);
    z-index: 100;
    width: calc(var(--sidebar-w) - var(--edge));
    transition: background 0.4s ease;
}

.site-header__inner {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    align-items: flex-start;
}

/* Branding */
.site-branding { line-height: 1; }
.site-title {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: var(--fs-logo);
    font-weight: 400;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--c-text);
}
.site-branding__link { display: inline-block; }
.site-logo,
.custom-logo {
    width: 80px;
    height: auto;
    display: block;
    transition: filter 0.4s ease;
}
/* On the homepage the logo sits over a dark image — turn the dark mark white */
.home .site-logo,
.home .custom-logo {
    filter: brightness(0) invert(1);
}

/* Nav — hover-reveal pattern. Tight stack to match ebasg.com (no gap,
 * line-height drives spacing). */
.site-nav__list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.site-nav__list a {
    display: inline-block;
    font-size: var(--fs-nav);
    font-weight: 400;
    line-height: 1.35;
    color: var(--c-text);
    padding: 0;
    transition: color var(--t-base) ease, opacity var(--t-base) ease;
}
/* Hover-reveal pattern: only fade non-current items when there IS a current
 * item (i.e. on inner pages). On the homepage no item is current, so all
 * remain visible — matching ebasg.com behaviour. */
.site-nav__list:has(.current-menu-item, .current_page_item) > li:not(.current-menu-item):not(.current_page_item) > a {
    opacity: 0;
    pointer-events: none;
}
.site-header:hover .site-nav__list:has(.current-menu-item, .current_page_item) > li:not(.current-menu-item):not(.current_page_item) > a,
.site-header:focus-within .site-nav__list:has(.current-menu-item, .current_page_item) > li:not(.current-menu-item):not(.current_page_item) > a {
    opacity: 1;
    color: var(--c-muted);
    pointer-events: auto;
}
.site-header:hover .site-nav__list > li:not(.current-menu-item):not(.current_page_item) > a:hover,
.site-header:focus-within .site-nav__list > li:not(.current-menu-item):not(.current_page_item) > a:focus {
    color: var(--c-text);
}

/* Sub-menus (e.g. Works → categories): mobile-only — the desktop nav stays
 * flat. Project categories appear instead in the Works page sidebar filter. */
.site-nav__list .sub-menu {
    display: none;
}

/* Mobile toggle: hidden by default, shown via @media below */
.site-nav__toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 26px;
    height: 18px;
}
.site-nav__toggle-bar {
    height: 1.5px;
    background: var(--c-text);
}

/* ============================================================
 *  Main content
 * ============================================================ */
.site-main {
    min-height: 100vh;
    padding: var(--edge) var(--edge) var(--s-6) var(--sidebar-w);
}

.container {
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
}

/* ============================================================
 *  Homepage — full-bleed hero slider (logo overlays it)
 * ============================================================ */
.home .site-main {
    padding: 0;
}

.hero-slider-section {
    position: relative;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background: #111;
}

.hero-slider,
.hero-slider .slide {
    position: absolute;
    inset: 0;
}

.hero-slider .slide {
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.4s ease;
}

.hero-slider .slide.active {
    opacity: 1;
    animation: kenburns 14s ease-in-out infinite alternate;
    z-index: 2;
}

@keyframes kenburns {
    from { transform: scale(1); }
    to   { transform: scale(1.05); }
}

.slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0) 45%);
    pointer-events: none;
}

.slide-content {
    position: absolute;
    bottom: var(--s-5);
    left: var(--sidebar-w);
    z-index: 3;
    color: #fff;
}

.slide-link { display: block; }

.slide-title {
    font-size: var(--fs-title);
    font-weight: 500;
    color: #fff;
    margin-bottom: 4px;
}

.slide-location {
    font-size: var(--fs-base);
    color: rgba(255, 255, 255, 0.85);
}

.slider-nav {
    position: absolute;
    bottom: var(--s-4);
    right: var(--s-4);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: var(--s-3);
}

.slider-prev,
.slider-next {
    color: #fff;
    font-size: 1.3rem;
    opacity: 0.75;
}
.slider-prev:hover,
.slider-next:hover { opacity: 1; }

/* On the homepage the logo + nav sit on top of the image — make text white */
.home .site-title,
.home .site-nav__list a {
    color: #fff;
}
.home .site-header:hover .site-nav__list > li:not(.current-menu-item) > a {
    color: rgba(255, 255, 255, 0.7);
}
.home .site-header:hover .site-nav__list > li:not(.current-menu-item) > a:hover {
    color: #fff;
}

/* Homepage is full-bleed image only — no footer, no slide overlay,
 * no slider chrome, no back-to-top, no scroll. Matches ebasg.com homepage. */
.home .site-footer,
.home .back-to-top,
.home .slide-content,
.home .slider-nav {
    display: none;
}
html:has(body.home),
body.home {
    height: 100vh;
    overflow: hidden;
}

/* ============================================================
 *  Works grid page
 * ============================================================ */
.page-works .site-main,
.site-main.page-works,
.post-type-archive-project .site-main {
    /* Push grid to match ebasg's offset — extra horizontal padding on top
     * of the sidebar so each image renders at ~640px (not full-width).
     * padding-top aligns the first row with the "Works" menu item
     * (edge 40 + logo ~30 + gap 40 = 110px). */
    padding: 110px 3vw var(--s-6) calc(var(--sidebar-w) + 18vw) !important;
}

.page-works .page-header,
.post-type-archive-project .page-header {
    display: none; /* ebasg has no page title — the "Works" nav item is the label */
}

/* Vertical category filter — rendered inside .site-header (after the nav)
 * so it stacks naturally below the nav with no overlap calculation. */
.works-filter {
    margin-top: var(--s-3);
    width: 100%;
}

.works-filter ul {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filter-btn {
    display: inline-block;
    text-align: left;
    padding: 2px 0;
    font-size: var(--fs-nav);
    color: var(--c-muted);
    transition: color var(--t-base) ease, opacity var(--t-base) ease;
    opacity: 0;
    pointer-events: none;
}
.filter-btn.active {
    color: var(--c-text);
    opacity: 1;
    pointer-events: auto;
}
.works-filter:hover .filter-btn,
.works-filter:focus-within .filter-btn {
    opacity: 1;
    pointer-events: auto;
}
.filter-btn:hover { color: var(--c-text); }

/* 2-column project grid — tight gap to match ebasg.com */
.project-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
}

.project-card {
    position: relative;
    overflow: hidden;
}

.project-image {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: #f5f5f5;
}

.project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.9s ease;
}

.project-overlay {
    position: absolute;
    inset: 0;
    background: var(--c-overlay);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0;
    transition: opacity var(--t-base) ease;
    text-align: center;
    padding: var(--s-3);
}

.project-card:hover .project-overlay { opacity: 1; }
.project-card:hover .project-image img { transform: scale(1.03); }

.project-overlay h3 {
    font-size: var(--fs-title);
    font-weight: 500;
    margin-bottom: 4px;
}
.project-overlay .project-location {
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--fs-base);
}

/* ============================================================
 *  Single project — spec-sheet layout (text left + image right).
 *  Uses the same intro-spread pattern as About/Contact, with a
 *  bold title, justified description, and a 2-col metadata grid.
 * ============================================================ */
.single-project .site-main {
    padding: 0;
}

.project-intro {
    display: grid;
    /* All four spacing values are customizer-driven via CSS variables
     * (Appearance → Customize → Project Page). Fallbacks below match the
     * defaults shown in the customizer descriptions. */
    grid-template-columns: var(--project-content-w, 32vw) minmax(0, 1fr);
    column-gap: var(--project-col-gap, var(--s-5));
    align-items: stretch;
    min-height: 100vh;
    padding: var(--project-pad-top, 110px) var(--s-4) var(--project-pad-bot, var(--s-5)) var(--edge);
    /* Rendered width of the gallery column: viewport minus text column,
     * column gap and the intro's own left/right paddings. */
    --gallery-w: calc(100vw - var(--edge) - var(--project-content-w, 32vw) - var(--project-col-gap, var(--s-5)) - var(--s-4));
    /* Shared zone height for image + text (client's yellow/red boxes).
     * The image keeps its natural ratio (--slide-ratio, inline from
     * single-project.php), sits on the top line, and its REAL rendered
     * bottom is the line the text must end on. Wide landscape images are
     * width-limited (zone shrinks to the image's height); portrait/square
     * images cap at the full viewport frame. No ratio known = full frame. */
    --gallery-h: min(
        calc(100vh - var(--project-pad-top, 110px) - var(--project-pad-bot, var(--s-5))),
        calc(var(--gallery-w) / var(--slide-ratio, 0.5))
    );
}

.project-content {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    /* Pin the content column's bottom to the image's real bottom line
     * (--gallery-h zone + flex-end) so the last meta row (e.g. "Status /
     * Complete") ends exactly on it. min-height — NOT height — so a text
     * block taller than the zone (long description + wide image = short
     * zone) grows DOWNWARD past the line instead of overflowing upward
     * into the sidebar menu. The 100px top margin is the menu keep-out:
     * the nav list ends ~163px from the viewport top, so overflowing
     * content can never start on top of it. */
    margin-top: 100px;
    min-height: calc(var(--gallery-h) - 100px);
    align-self: start;
    justify-content: flex-end;
}

.project-title {
    font-size: 1.4rem;
    font-weight: 700;
    /* Color inherits from context:
     *   - Single project page → body text (dark)
     *   - Works grid overlay → .project-overlay color: #fff (white) */
    margin: 0;
}

.project-description {
    font-size: 0.88rem;
    line-height: var(--line-body, 1.55);
    font-weight: 500;
    color: var(--c-text);
    text-align: justify;
    text-align-last: left;
    -webkit-hyphens: auto;
    hyphens: auto;
}
.project-description p + p { margin-top: var(--s-2); }

/* 2-column metadata grid — label on top, value below */
.project-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--s-4);
    row-gap: var(--s-3);
    margin-top: var(--s-2);
}
.meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.meta-label {
    font-size: 0.78rem;
    font-weight: 300;
    color: #b3b3b3;
    margin: 0;
}
.meta-value {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--c-text);
    margin: 0;
}

/* Gallery — right column, swipe/drag to navigate (no visible chrome).
 * Height = the shared image/text zone (--gallery-h on .project-intro):
 * top edge on the top line, bottom edge = the image's real bottom. */
.project-gallery {
    height: var(--gallery-h);
    align-self: start;
    overflow: hidden;
}
.project-gallery-slider,
.slider-main {
    height: 100%;
    min-height: inherit;
    position: relative;
}
.gallery-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}
.gallery-slide.active {
    opacity: 1;
    pointer-events: auto;
}
.gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Anchor to the top line — a slide with a different ratio than the
     * first image still keeps its top edge on the shared top line. */
    object-position: center top;
}
.gallery-slide--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-muted);
    background: #fafafa;
    opacity: 1;
}

/* Slider chrome hidden — user swipes/drags left-right to navigate.
 * Keyboard arrow keys still work for accessibility. */
.gallery-prev,
.gallery-next,
.gallery-dots {
    display: none !important;
}
.project-gallery-slider[data-gallery] {
    cursor: grab;
    user-select: none;
    touch-action: pan-y;
}
.project-gallery-slider[data-gallery].is-dragging {
    cursor: grabbing;
}

/* ============================================================
 *  Shared "intro spread" layout — used by About + Contact.
 *  Two-column: content middle, image right; both vertically
 *  centered in the viewport. Matches ebasg.com.
 * ============================================================ */
/* Zero the base .site-main padding on About + Contact. WordPress emits
 * `page-template-page-studio(-php)` body classes — the bare `.page-studio`
 * selector never matched, which silently double-stacked 40px top / 280px
 * left padding under the intro grid. Keep both forms for safety. */
.page-studio .site-main,
.page-contact .site-main,
.page-template-page-studio .site-main,
.page-template-page-studio-php .site-main,
.page-template-page-contact .site-main,
.page-template-page-contact-php .site-main {
    padding: 0;
}

.studio-intro,
.contact-intro {
    display: grid;
    /* HARDCODED per client-approved mockup — intentionally NOT tied to the
     * Project Page customizer variables. Changing customizer values affects
     * the single project page only; About + Contact stay fixed.
     * Horizontal zones per client's Canva guides (ruler 521 / 984 / 1520
     * converted against known anchors = 499px / 941px / right edge kept):
     *   text zone  33vw -> 62.2vw (40px gap sits inside, before the image)
     *   image zone 62.2vw -> 100vw minus 48px right margin
     *   bottom 100px = generous whitespace below image per mockup */
    grid-template-columns: minmax(0, calc(29.2vw - 40px)) minmax(0, 1fr);
    column-gap: 40px;
    align-items: start;
    /* Fixed viewport height — the page must never scroll on desktop. */
    height: 100vh;
    overflow: hidden;
    /* 96px top = measured Y of the first menu item ("About" link box top
     * 95.5px: header edge 40 + logo 15.5 + gap 40). Text + image tops land
     * on the client's green guide line through the menu. */
    padding: 96px 48px 100px 33vw;
}

/* Lock scrolling entirely on About + Contact (desktop only — mobile stacks
 * image above text and must remain scrollable). */
@media (min-width: 901px) {
    body.page-template-page-studio,
    body.page-template-page-studio-php,
    body.page-template-page-contact,
    body.page-template-page-contact-php {
        height: 100vh;
        overflow: hidden;
    }
}

.studio-side-image,
.contact-side-image {
    /* Image top sits on the menu line (96px, matching the intro padding-top),
     * bottom sits 100px above the viewport bottom — the two green guides. */
    width: 100%;
    height: calc(100vh - 96px - 100px);
    overflow: hidden;
    justify-self: end;
}
.studio-side-image img,
.contact-side-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* About-specific narrative */
.studio-narrative {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--c-text);
}
.studio-narrative p + p { margin-top: var(--s-3); }

/* Contact-specific info blocks */
.contact-info {
    display: grid;
    gap: var(--s-3);
    font-size: 1rem;
    line-height: 1.55;
}
.contact-info__group {
    display: flex;
    flex-direction: column;
}
.contact-info__label {
    color: var(--c-text);
}
.contact-info__value {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--c-text);
}
.contact-info__value a {
    color: inherit;
}
.contact-info__value a:hover {
    color: var(--c-muted);
}

/* Team section — appears below the intro, only when team members exist */
.team-section {
    padding: var(--s-6) var(--s-4) var(--s-6) var(--sidebar-w);
    border-top: 1px solid var(--c-line);
}
.section-title {
    font-size: var(--fs-title);
    font-weight: 500;
    margin-bottom: var(--s-4);
}
.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-3);
}
.team-member-card .member-photo {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    margin-bottom: var(--s-1);
    background: #f5f5f5;
}
.team-member-card .member-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    transition: filter var(--t-base) ease;
}
.team-member-card:hover .member-photo img { filter: grayscale(0%); }
.member-name {
    font-size: var(--fs-base);
    font-weight: 500;
    margin-top: var(--s-2);
}
.member-role {
    font-size: var(--fs-small);
    color: var(--c-muted);
}

/* ============================================================
 *  Publications page (best-guess layout)
 * ============================================================ */
.page-publications .page-header { display: none; }
.publication-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-4);
}
.publication-card {
    color: inherit;
}
.publication-card .pub-cover {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    margin-bottom: var(--s-2);
    background: #f5f5f5;
}
.publication-card .pub-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.publication-card .pub-type {
    font-size: var(--fs-small);
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.publication-card .pub-title {
    font-size: 1.05rem;
    font-weight: 500;
    margin: var(--s-1) 0;
}
.publication-card .pub-meta {
    font-size: var(--fs-small);
    color: var(--c-muted);
    display: flex;
    gap: var(--s-2);
}

/* ============================================================
 *  Contact page (best-guess layout)
 * ============================================================ */
.page-contact .page-header { display: none; }
.contact-info {
    max-width: 520px;
    display: grid;
    gap: var(--s-2);
}
.contact-info p { font-size: var(--fs-base); }
.contact-info a { color: var(--c-text); }
.contact-info a:hover { color: var(--c-muted); }

/* ============================================================
 *  Journal / archive / 404
 * ============================================================ */
.page-header {
    margin-bottom: var(--s-4);
}
.page-title {
    font-size: var(--fs-title);
    font-weight: 500;
}

.journal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-3);
}

.error-404 {
    display: grid;
    place-items: center;
    min-height: 70vh;
    text-align: center;
    color: var(--c-muted);
}
.error-404 h1 { font-size: 4rem; font-weight: 400; }

/* ============================================================
 *  Footer — sits at the bottom-left, very small
 * ============================================================ */
.site-footer {
    position: fixed;
    bottom: var(--s-3);
    left: var(--sidebar-w);
    right: var(--edge);
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: var(--s-3);
    font-size: var(--fs-small);
    color: var(--c-muted);
    z-index: 50;
    pointer-events: none;
}
.site-footer > * { pointer-events: auto; }

.home .site-footer { color: rgba(255, 255, 255, 0.85); }

.site-footer__social {
    display: flex;
    gap: var(--s-2);
}
.site-footer__social a { color: inherit; }
.site-footer__social a:hover { color: var(--c-text); }
.home .site-footer__social a:hover { color: #fff; }

/* ============================================================
 *  Floating buttons (WhatsApp + back-to-top)
 * ============================================================ */
.floating-whatsapp {
    position: fixed;
    bottom: var(--s-3);
    right: var(--s-3);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    transition: transform var(--t-base) ease;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}
.floating-whatsapp:hover { transform: scale(1.08); }

.back-to-top {
    position: fixed;
    bottom: var(--s-3);
    right: 72px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--c-text);
    color: #fff;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-base) ease, visibility var(--t-base) ease;
    z-index: 199;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}
.back-to-top.visible { opacity: 1; visibility: visible; }

/* ============================================================
 *  Reveal-on-scroll utility
 * ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
 *  Responsive (mobile / tablet)
 * ============================================================ */
@media (max-width: 900px) {
    :root {
        --sidebar-w: 0px;
        --edge: 24px;
    }

    /* Header collapses to a horizontal bar — scrolls with the page, not sticky */
    .site-header {
        position: static;
        width: 100%;
        padding: var(--s-2) var(--s-3);
        background: var(--c-bg);
        border-bottom: none;
    }
    .site-header__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--s-2);
        width: 100%;
    }

    /* Lift the logo + toggle above the drawer (they share the root stacking
     * context once .site-header has no z-index). Drawer overlays the rest. */
    .site-branding,
    .site-nav__toggle {
        position: relative;
        z-index: 200;
    }

    .site-nav {
        position: fixed;
        inset: 0;
        background: var(--c-bg);
        z-index: 150;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.4s ease, visibility 0s linear 0.4s;
        padding: 110px var(--s-3) var(--s-4);
        overflow-y: auto;
    }
    .site-nav.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity 0.4s ease, visibility 0s linear 0s;
    }

    /* Separator below header — aligned to logo-left / X-right (24px edges),
     * with extra gap above (so it sits clearly below the logo). */
    .site-nav::before {
        content: '';
        position: absolute;
        top: 88px;
        left: var(--s-3);
        right: var(--s-3);
        height: 2px;
        background: rgba(0, 0, 0, 0.55);
    }

    .site-nav__list { gap: var(--s-1); }
    .site-nav__list > li > a {
        opacity: 1 !important;
        pointer-events: auto !important;
        font-size: 0.95rem;
        font-weight: 400;
        line-height: 1.4;
        padding: 2px 0;
        color: var(--c-text) !important;
    }

    /* Sub-menu (Works → category links) — smaller, lighter color */
    .site-nav__list .sub-menu {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin: 2px 0 var(--s-1);
        padding-left: 0;
    }
    .site-nav__list .sub-menu li { padding: 0; }
    .site-nav__list .sub-menu a {
        font-size: 0.85rem;
        font-weight: 400;
        line-height: 1.4;
        padding: 0;
        color: var(--c-muted) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    .site-nav__list .sub-menu a:hover {
        color: var(--c-text) !important;
    }

    .site-nav__toggle { display: flex; }
    .site-nav__toggle-bar {
        transition: transform 0.3s ease, opacity 0.2s ease, background 0.4s ease;
        transform-origin: center;
    }
    /* Morph hamburger → X when drawer open. Force dark color on open
     * regardless of page — drawer background is always white. */
    .site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar {
        background: var(--c-text);
    }
    .site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(2) {
        opacity: 0;
    }
    .site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* Homepage on mobile: transparent header overlay (no white bar).
     * Logo + hamburger float over the hero image. */
    .home .site-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: auto;
        padding: var(--s-3);
        background: transparent;
        border-bottom: none;
    }
    .home .site-nav__toggle-bar {
        background: #fff;
    }

    /* When the drawer is open on home mobile, swap the overlay header back
     * to a solid bar so the logo + close X are readable against white.
     * Compound selector — body has BOTH .home and .nav-open classes. */
    body.home.nav-open .site-header {
        background: var(--c-bg);
    }
    body.home.nav-open .site-logo,
    body.home.nav-open .custom-logo {
        filter: none;
    }
    body.home.nav-open .site-nav__toggle-bar {
        background: var(--c-text);
    }

    /* Base mobile padding for inner pages (home/about/contact override below) */
    .site-main {
        padding: var(--s-3);
    }
    /* Works only — needs !important to override the desktop works rule's !important */
    .page-works .site-main,
    .site-main.page-works,
    .post-type-archive-project .site-main {
        padding: var(--s-3) !important;
    }

    .home .site-main { padding: 0; }

    .hero-slider-section { width: 100%; }
    .slide-content { left: var(--s-3); bottom: var(--s-4); }

    /* Grids collapse to a single column */
    .project-grid,
    .publication-grid,
    .team-grid,
    .journal-grid {
        grid-template-columns: 1fr;
        gap: var(--s-3);
    }

    /* About + Contact: image first (top), text second (bottom) — matches ebasg */
    .studio-intro,
    .contact-intro {
        grid-template-columns: 1fr;
        row-gap: var(--s-4);
        padding: var(--s-3);
        min-height: auto;
    }
    .studio-side-image,
    .contact-side-image {
        order: -1;
        height: 50vh;
    }
    .team-section { padding: var(--s-4) var(--s-3); }

    /* Make the header row wrap so the filter sits on a new line below
     * the logo + hamburger (matches ebasg mobile Works layout). */
    .site-header__inner { flex-wrap: wrap; }

    .works-filter {
        flex-basis: 100%;
        order: 10;
        margin-top: var(--s-3);
        width: 100%;
    }
    .works-filter ul {
        flex-direction: column;
        gap: 2px;
    }
    .filter-btn {
        opacity: 1;
        pointer-events: auto;
        font-size: 0.85rem;
        font-weight: 400;
        line-height: 1.4;
        color: var(--c-muted);
        text-align: left;
        padding: 0;
    }
    .filter-btn.active { color: var(--c-text); }

    /* Single project — stack vertically on mobile.
     * Image on top, content (title + description + meta) below. */
    .single-project .site-main { padding: 0; }

    .project-intro {
        grid-template-columns: 1fr;
        row-gap: var(--s-4);
        padding: var(--s-3);
        min-height: auto;
    }
    .project-gallery {
        order: -1;          /* image first */
        height: 60vh;
    }
    /* Mobile stacks vertically — release the desktop zone lock so the
     * text flows naturally under the image. */
    .project-content {
        margin-top: 0;
        min-height: 0;
        justify-content: flex-start;
    }
    .project-meta-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Footer becomes static at end of content */
    .site-footer {
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--s-1);
        padding: var(--s-3);
        background: var(--c-bg);
        border-top: 1px solid var(--c-line);
        color: var(--c-muted);
    }
    .home .site-footer { color: var(--c-muted); }
}

/* ============================================================
 *  Single blog post — editorial layout matching Selari aesthetic
 * ============================================================ */
.single-post .site-main {
    padding: 120px var(--s-5) var(--s-6) calc(var(--sidebar-w) + var(--s-5));
    min-height: 100vh;
}

.single-post .post {
    max-width: 920px;
}

/* Hero featured image */
.post-hero {
    margin: 0 0 var(--s-5);
}
.post-hero img {
    width: 100%;
    height: auto;
    display: block;
}
.post-hero figcaption {
    font-size: 0.82rem;
    color: var(--c-muted);
    margin-top: var(--s-2);
    line-height: 1.5;
}

/* Header — breadcrumb + title + meta + lead */
.post-header {
    margin-bottom: var(--s-5);
    max-width: 720px;
}

.post-breadcrumb {
    font-size: 0.82rem;
    color: var(--c-muted);
    margin-bottom: var(--s-3);
}
.post-breadcrumb a {
    color: var(--c-muted);
    transition: color var(--t-base) ease;
}
.post-breadcrumb a:hover { color: var(--c-text); }
.post-breadcrumb span { margin: 0 6px; }

.post-title {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--c-text);
    margin: 0 0 var(--s-3);
}

.post-meta {
    font-size: 0.85rem;
    color: var(--c-muted);
    margin-bottom: var(--s-4);
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
}
.post-meta__sep { color: var(--c-line); }

.post-lead {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--c-text);
    font-weight: 400;
    margin: var(--s-3) 0 0;
}

/* Body content — comfortable reading column */
.post-content {
    max-width: 720px;
    font-size: 1rem;
    line-height: var(--line-body, 1.7);
    color: var(--c-text);
}

.post-content p {
    margin: 0 0 var(--s-3);
}

.post-content h2 {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    margin: var(--s-5) 0 var(--s-2);
    color: var(--c-text);
}

.post-content h3 {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.4;
    margin: var(--s-4) 0 var(--s-2);
    color: var(--c-text);
}

.post-content h4 {
    font-size: 1rem;
    font-weight: 600;
    margin: var(--s-3) 0 var(--s-1);
    color: var(--c-text);
}

.post-content ul,
.post-content ol {
    margin: 0 0 var(--s-3) var(--s-3);
    padding: 0;
}
.post-content li {
    margin-bottom: var(--s-1);
}
.post-content li > p {
    margin-bottom: var(--s-1);
}

.post-content a {
    color: var(--c-text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--t-base) ease;
}
.post-content a:hover { color: var(--c-muted); }

.post-content strong { font-weight: 600; }
.post-content em { font-style: italic; }

.post-content blockquote {
    margin: var(--s-4) 0;
    padding: 0 0 0 var(--s-3);
    border-left: 2px solid var(--c-text);
    font-size: 1.05rem;
    font-style: italic;
    color: var(--c-text);
}
.post-content blockquote p { margin-bottom: var(--s-1); }

.post-content img {
    max-width: 100%;
    height: auto;
    margin: var(--s-4) 0;
    display: block;
}
.post-content figure {
    margin: var(--s-4) 0;
}
.post-content figcaption {
    font-size: 0.82rem;
    color: var(--c-muted);
    margin-top: var(--s-2);
    line-height: 1.5;
}

.post-content hr {
    border: 0;
    border-top: 1px solid var(--c-line);
    margin: var(--s-5) 0;
}

.post-content pre,
.post-content code {
    background: #f6f6f6;
    border-radius: 2px;
    font-family: 'SF Mono', Monaco, Consolas, monospace;
    font-size: 0.9em;
}
.post-content code { padding: 2px 6px; }
.post-content pre {
    padding: var(--s-3);
    overflow-x: auto;
    margin: var(--s-3) 0;
    line-height: 1.5;
}
.post-content pre code { background: transparent; padding: 0; }

/* Collapsible details (FAQ) */
.post-content details {
    border-top: 1px solid var(--c-line);
    padding: var(--s-3) 0;
}
.post-content details:last-of-type {
    border-bottom: 1px solid var(--c-line);
}
.post-content details summary {
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-right: var(--s-3);
}
.post-content details summary::-webkit-details-marker { display: none; }
.post-content details summary::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 0;
    font-size: 1.2rem;
    font-weight: 300;
    transition: transform var(--t-base) ease;
}
.post-content details[open] summary::after {
    content: '−';
}
.post-content details summary h3 {
    display: inline;
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
}
.post-content details p {
    margin-top: var(--s-2);
    color: var(--c-text);
    font-size: 0.95rem;
}

/* Tags */
.post-tags {
    max-width: 720px;
    margin-top: var(--s-5);
    padding-top: var(--s-4);
    border-top: 1px solid var(--c-line);
    font-size: 0.85rem;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1);
    align-items: baseline;
}
.post-tags__label {
    color: var(--c-muted);
    margin-right: var(--s-2);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
}
.post-tag {
    color: var(--c-text);
    padding: 2px 8px;
    border: 1px solid var(--c-line);
    border-radius: 2px;
    transition: border-color var(--t-base) ease, color var(--t-base) ease;
}
.post-tag:hover {
    border-color: var(--c-text);
}

/* Author box */
.post-author-box {
    max-width: 720px;
    margin-top: var(--s-5);
    padding: var(--s-4);
    background: #fafafa;
    border-left: 2px solid var(--c-text);
}
.post-author-box__heading {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 var(--s-2);
    color: var(--c-muted);
}
.post-author-box p {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--c-text);
    margin: 0 0 var(--s-2);
}
.post-author-box__links {
    font-size: 0.88rem !important;
}
.post-author-box__links span {
    color: var(--c-muted);
    margin: 0 6px;
}
.post-author-box__links a {
    color: var(--c-text);
}
.post-author-box__links a:hover { color: var(--c-muted); }

/* Previous / next navigation */
.post-navigation {
    max-width: 920px;
    margin-top: var(--s-6);
    padding-top: var(--s-4);
    border-top: 1px solid var(--c-line);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-4);
}
.post-nav-link {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--c-text);
    transition: color var(--t-base) ease;
}
.post-nav-link:hover { color: var(--c-muted); }
.post-nav-link--placeholder {
    cursor: default;
    pointer-events: none;
}
.post-nav-link__direction {
    font-size: 0.78rem;
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.post-nav-link__title {
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.4;
}
.post-nav-next {
    text-align: right;
    align-items: flex-end;
}

/* ============================================================
 *  Single post — mobile responsive
 * ============================================================ */
@media (max-width: 900px) {
    .single-post .site-main {
        padding: var(--s-4) var(--s-3) var(--s-6);
    }
    .post-title { font-size: 1.6rem; }
    .post-lead  { font-size: 1rem; }
    .post-content h2 { font-size: 1.25rem; }
    .post-content h3 { font-size: 1.05rem; }

    .post-meta {
        flex-direction: column;
        gap: 4px;
    }
    .post-meta__sep { display: none; }

    .post-navigation {
        grid-template-columns: 1fr;
    }
    .post-nav-next {
        text-align: left;
        align-items: flex-start;
    }
    .post-author-box {
        padding: var(--s-3);
    }
}