/* =============================================================
   The Research Atelier — Main Stylesheet
   Reference frame: MacBook Pro 16" · 1728 × 1117px  (frame "- 1")
   ============================================================= */

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

:root {
    --tra-font: 'Intel One Mono', monospace;
    --tra-ink: rgba(0, 0, 0, 0.82);
    --tra-ink-strong: #000;
    --tra-ink-muted: rgba(0, 0, 0, 0.74);
    --tra-ink-faint: rgba(0, 0, 0, 0.52);
    --tra-rule: rgba(0, 0, 0, 0.42);
    --tra-rule-soft: rgba(0, 0, 0, 0.26);
    --tra-edge: 9.84vw;
    --tra-title-inset: 6.9vw;
    --tra-page-title: clamp(42px, 3.7vw, 64px);
    --tra-mobile-title: clamp(48px, 15vw, 72px);
    --tra-feature-title: clamp(17px, 1.28vw, 22px);
    --tra-ui-label: clamp(10px, 0.7vw, 12px);
    --tra-small: clamp(9px, 0.64vw, 11px);
    --tra-micro: clamp(9px, 0.58vw, 10px);
    --tra-footer-size: clamp(8px, 0.52vw, 9px);
    --tra-footer-height: 48px;
}

html {
    width: 100%;
    /* No fixed height: pages that need to lock to one screen (the homepage)
       set their own height explicitly. Leaving html/body auto lets normal
       pages (about, practice) grow with content and scroll correctly. */
}

body {
    width: 100%;
    min-height: 100vh;
}

body {
    background: #fff;
    color: #000;
    font-family: var(--tra-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* =============================================================
   HOMEPAGE WRAPPER — locks page to one screen, no scroll
   100dvh = dynamic viewport height: shrinks when mobile browser
   bars (address bar, tab bar) are visible so content never hides
   behind them. env(safe-area-inset-bottom) clears the iOS home
   indicator and bottom tab bar on iPhones with no home button.
   ============================================================= */

/* Lock any page that contains the homepage hero wrapper. This is more
   reliable than depending only on WordPress body classes, and prevents
   the header + hero from creating a tiny extra scroll range. */
html:has(.hero-page),
body:has(.hero-page),
body.home {
    overflow: hidden;
    height: 100dvh;
}

/* If testing while logged in, WordPress injects the admin bar and offsets
   the root element. Keep the public-facing hero math intact underneath it. */
body.admin-bar:has(.hero-page) .hero-page {
    height: calc(100dvh - 32px);
}

@media (max-width: 782px) {
    body.admin-bar:has(.hero-page) .hero-page {
        height: calc(100dvh - 46px);
    }
}

/* JS-assisted homepage lock. This class is added by assets/js/home-lock.js
   and avoids relying on WordPress body classes or :has() support alone. */
html.research-home-root,
html.research-home-root body,
body.research-home-lock {
    overflow: hidden !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
}

html.research-home-root {
    margin-top: 0 !important;
}

html.research-home-root .hero-page {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh !important;
    max-height: 100dvh !important;
}

body.admin-bar.research-home-lock .hero-page {
    top: 32px;
    height: calc(100dvh - 32px) !important;
    max-height: calc(100dvh - 32px) !important;
}

@media (max-width: 782px) {
    body.admin-bar.research-home-lock .hero-page {
        top: 46px;
        height: calc(100dvh - 46px) !important;
        max-height: calc(100dvh - 46px) !important;
    }
}

.hero-page {
    height: 100dvh;                              /* adjusts for mobile browser chrome */
    overflow: hidden;                            /* no document scroll on homepage */
    display: flex;
    flex-direction: column;
    /* push content above iOS home indicator / bottom tab bar */
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Hero fills whatever space is left after the header */
.hero-page .hero {
    flex: 1 1 0;
    height: auto;            /* override the standalone 100vh */
    min-height: 0;           /* allow flex to shrink below 600px on tiny screens */
}

/* Desktop: header floats over the hero (same as Figma intent).
   position:absolute takes the header out of the flex flow so the
   hero fills the full 100dvh and vh-based content positions are correct. */
@media (min-width: 1024px) {
    .hero-page {
        position: relative;          /* contain the absolutely-placed header */
    }

    .hero-page > .page-header {
        position: absolute;          /* out of flex flow — hero gets all the height */
        top: 0;
        left: 0;
        right: 0;
    }
}


/* =============================================================
   HERO — Desktop (≥ 1024px)
   Pixel-accurate to Figma 1728 × 1117 reference frame.
   ============================================================= */

.hero {
    position: relative;
    width: 100vw;
    height: 100vh;
    min-height: 600px;
    background: #fff;
    overflow: clip;               /* clips visually without blocking sticky */
}

/* ——— Centered content column (Figma content width = 1728px) ———
   Transparent by default (display:contents) so the mobile / short-desktop
   fallbacks keep treating .hero__media + .hero__text as flex children of
   .hero. On the locked desktop it becomes a real 1728px column, centered,
   and serves as the positioning context for the absolute hero elements —
   so on wider viewports (e.g. 1920) the composition stays fixed and centers
   with equal margins (matching Figma "homepage in windows" 2:2857). */
.hero__stage { display: contents; }

/* Only the true locked desktop (≥1024 wide AND ≥820 tall — the same gate as
   home-lock.js) turns the stage into a real centered column. In every
   fallback it stays display:contents, so .hero__media / .hero__text remain
   flex children of .hero and the mobile / short-desktop layouts are untouched. */
@media (min-width: 1024px) and (min-height: 880px) {
    html.research-home-root .hero__stage {
        display: block;
        position: relative;
        width: min(100vw, 1728px);
        height: 100%;
        margin: 0 auto;
    }
}

/* ——— Image wrapper — contains sketch + interactive hotspots ———
   Figma: x=932 y=160  w=603  h=853
   Wrapper holds the absolute position; hotspot divs live inside. */
.hero-image-wrapper {
    position: absolute;
    display: block;
    left: 55.96%;           /* 967 / 1728 — % of the centered stage */
    top: 14.33vh;           /* 160 / 1117 */
    height: 76.37vh;        /* 853 / 1117 */
    width: auto;
    /* Lock to the sketch's natural ratio so the image is never cropped and
       the brush hotspots (positioned as % of this box) always line up with
       the drawing. At the 1728×1117 reference this equals the old 34.90vw. */
    aspect-ratio: 2480 / 3508;
}

.hero__sketch {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0.9;
    object-fit: contain;
    object-position: center top;
    pointer-events: none;
    user-select: none;
}

/* ——— Interactive watercolor-brush hotspots over the sketch ———
   Each .brush-wrapper is a full-size overlay; the .yellow-brush image inside
   is positioned as a % of the wrapper and revealed on hover. Pointer events
   pass through the wrapper so only the brush shape itself is interactive. */
.brush-wrapper {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.yellow-brush {
    position: absolute;
    cursor: pointer;
    opacity: 0;
    pointer-events: auto;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s ease;
    /* soft watercolor glow */
    filter: drop-shadow(0 0 10px rgba(249, 189, 7, 0.4))
            drop-shadow(0 0 25px rgba(249, 189, 7, 0.15));
}

.yellow-brush:hover,
.yellow-brush.is-active {
    opacity: 0.9;
    transform: scale(1.02);
}

/* ——— Per-element brush placement (% of the image wrapper) ——— */
.brush--kha-khru-kya      { top: 70%; left: 12%; width: 60%; }
.brush--khakro-thanwa-khya { top: 30%; left: 40%; width: 45%; }
.brush--ya-thuwa-khya     { top: 75%; left: 60%; width: 20%; }
.brush--syotang           { top: 43%; left: 28%; width: 60%; }
.brush--kheku             { top: 34%; left: 5%;  width: 20%; }
.brush--thakyang          { top: 42%; left: 80%; width: 15%; }
.brush--chaulo-phopte     { top: 65%; left: 58%; width: 15%; }
.brush--kopra             { top: 70%; left: 60%; width: 20%; }
.brush--ghaito            { top: 51%; left: 45%; width: 14%; }

/* ——— Cursor-following tooltip ——— */
.svg-tooltip {
    position: absolute;
    z-index: 20;
    pointer-events: none;
    max-width: 260px;
    padding: 12px 16px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.10);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(0.96);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.svg-tooltip.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.svg-tooltip__title {
    font-family: 'Intel One Mono', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    color: #111;
    margin-bottom: 5px;
}

.svg-tooltip__desc {
    font-family: 'Intel One Mono', monospace;
    font-size: 0.72rem;
    font-weight: 300;
    color: #444;
    line-height: 1.5;
}

/* ——— Image caption ———
   Figma: left-edge=1282px top=936px = calc(50%+377.5px)  w=172px  h=43px  10px italic
   "kha-khru-kya" (Medium Italic), regular text (Light Italic), "Thakali house" (Bold Italic) */
.hero__img-caption {
    position: absolute;
    left: 78.24%;           /* 1352 / 1728 — % of the centered stage */
    top: calc(50vh + 377.5px); /* 936px = 50%+377.5px at 1117px ref */
    width: 9.95%;           /* 172 / 1728 */
    min-width: 120px;
    text-align: right;
    font-family: 'Intel One Mono', monospace;
    font-weight: 300;
    font-style: italic;
    font-size: clamp(8px, 0.58vw, 10px);
    line-height: 2;
    color: #000;
}

.img-cap--medium {
    font-weight: 500;       /* Medium Italic (Figma) */
    font-style: italic;
}

.img-cap--bold {
    font-weight: 600;       /* SemiBold Italic (Figma) */
    font-style: italic;
}

/* ——— Header / Navigation ———
   Lives BEFORE .hero in the DOM; negative margin pulls hero up so header
   visually overlays the hero top while staying sticky on the document. */
.site-header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    margin-bottom: -7.61vh;       /* hero slides up to overlap header */
}

/* Nav items: y=46px (4.12vh), right edge of last at 1575px → right: 8.85vw */
.site-nav {
    display: flex;
    justify-content: flex-end;
    padding-top: 4.12vh;
    padding-right: 8.85vw;
}

.site-nav ul {
    display: flex;
    list-style: none;
    gap: 3.47vw;
}

.site-nav a {
    display: block;
    width: 4.63vw;
    min-width: 52px;
    text-align: center;
    font-family: 'Intel One Mono', monospace;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(11px, 0.81vw, 14px);
    line-height: 1;
    color: rgba(0, 0, 0, 0.8);
    text-decoration: none;
    white-space: nowrap;
}

.site-nav a:hover {
    color: #000;
}

/* Hamburger: hidden on desktop */
.hamburger-btn {
    display: none;
    position: absolute;
    top: 4.12vh;
    right: 6vw;
    transform: translateY(-50%);
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    padding: 10px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 20;
}

.hamburger-line {
    display: block;
    width: 22px;
    height: 1px;
    background: rgba(0, 0, 0, 0.8);
}

/* Full-width divider — rendered as border-bottom on .site-header */
.header-divider { display: none; }   /* kept in HTML but visually hidden */

.site-header { border-bottom: 1px solid #000; }

/* ——— Hero Title ———
   120px Light — left=143px top=426px */
.hero__title {
    position: absolute;
    left: 9.84%;            /* 170 / 1728 — % of the centered stage */
    top: 38.14vh;
    font-family: 'Intel One Mono', monospace;
    font-weight: 300;
    font-style: normal;
    font-size: clamp(40px, 6.94vw, 120px);
    line-height: 1;
    color: rgba(0, 0, 0, 0.8);
    white-space: nowrap;
}

/* ——— Hero Body Copy ———
   14px Light — left=143px  top=calc(50%+262.5px)=821px  width=463px
   Figma uses calc(50%+262.5px) — keeps proportional gap at any viewport height.
   Ends with "....more" in Light Italic */
.hero__body {
    position: absolute;
    left: 10.24%;                           /* 177 / 1728 — % of the centered stage */
    top: calc(50vh + 264.5px);              /* 823px = 50%+264.5px */
    width: 26.79%;                          /* 463 / 1728 */
    min-width: 220px;
    font-family: 'Intel One Mono', monospace;
    font-weight: 300;
    font-style: normal;
    font-size: clamp(11px, 0.81vw, 14px);
    line-height: 1.43;
    color: #000;
}

.hero__body em {
    font-style: italic;
    font-weight: 300;
}

/* ——— Hero Tagline ———
   28px  letter-spacing 4.2px — left=143px  top=calc(50%+346.5px)=905px  width=680px */
.hero__tagline {
    position: absolute;
    left: 10.24%;                           /* 177 / 1728 — % of the centered stage */
    top: calc(50vh + 346.5px);
    width: 39.35%;
    min-width: 280px;
    font-family: 'Intel One Mono', monospace;
    font-weight: 300;
    font-style: normal;
    font-size: clamp(16px, 1.62vw, 28px);
    line-height: 1.5;
    letter-spacing: 0.243vw;
    color: #000;
}

.hero__tagline p {
    margin: 0;
}

.hero__tagline strong {
    font-weight: 600;       /* SemiBold (Figma) */
    font-style: normal;
}

/* ——— Bottom Caption ———
   Mixed sizes: 12px Light base, 16px Bold for "architecture" and "design works"
   Figma: right-edge=1575px  top=calc(50%+510.5px)=1069px  width=777px  text-right
   min() guard: keeps it on-screen when vh < 1117px (e.g. 900px monitors) */
.hero__caption {
    position: absolute;
    right: 11.46%;          /* 198 / 1728 → right edge at 1530 — % of the centered stage */
    top: min(calc(50vh + 510.5px), calc(100vh - 48px));
    width: 44.97%;
    text-align: right;
    font-family: 'Intel One Mono', monospace;
    font-weight: 300;
    font-style: normal;
    font-size: clamp(10px, 0.69vw, 12px);
    line-height: 2;
    color: #000;
}

/* "architecture" and "design works" are 16px SemiBold in Figma */
.hero__caption strong {
    font-weight: 600;       /* SemiBold (Figma) */
    font-style: normal;
    font-size: clamp(12px, 0.93vw, 16px);
}


/* =============================================================
   MOBILE MENU OVERLAY
   ============================================================= */

.mobile-menu {
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 100;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 10vw;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.mobile-menu.is-open {
    opacity: 1;
    pointer-events: auto;
}

.mobile-menu__close {
    position: absolute;
    top: 28px;
    right: 6vw;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Intel One Mono', monospace;
    font-weight: 300;
    font-size: 22px;
    line-height: 1;
    color: rgba(0, 0, 0, 0.7);
    padding: 10px;
}

.mobile-menu__close:hover {
    color: #000;
}

.mobile-menu__nav ul {
    list-style: none;
}

.mobile-menu__nav li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.mobile-menu__nav li:first-child {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.mobile-menu__nav a {
    display: block;
    font-family: 'Intel One Mono', monospace;
    font-weight: 300;
    font-style: normal;
    font-size: clamp(28px, 5vw, 52px);
    line-height: 1;
    color: rgba(0, 0, 0, 0.8);
    text-decoration: none;
    padding: 22px 0;
    letter-spacing: 0.03em;
}

.mobile-menu__nav a:hover {
    color: #000;
}

.mobile-menu__caption {
    margin-top: 48px;
    font-family: 'Intel One Mono', monospace;
    font-weight: 300;
    font-size: clamp(9px, 0.85vw, 12px);
    color: rgba(0, 0, 0, 0.4);
    line-height: 1.8;
}


/* =============================================================
   RESEARCH HOVER ARC
   Hidden on all viewports by default; desktop media query below
   reveals and animates it. This prevents arc items from rendering
   as raw inline text on mobile / tablet.
   ============================================================= */

.research-arc {
    display: none;          /* collapsed on mobile/tablet */
}


/* =============================================================
   RESEARCH HOVER ARC — Desktop only (≥ 1024px)
   Arc of 7 research-area keywords fans out to the right of RESEARCH.
   Uses CSS cos()/sin() (Chrome 111+, Firefox 108+, Safari 15.4+).
   ============================================================= */

@media (min-width: 1024px) {

    /* Wrapper — inline-block so ::after underline tracks the word width */
    .research-word {
        position: relative;
        display: inline-block;
        cursor: default;
    }

    /* Underline: slides in from left on hover */
    .research-word::after {
        content: '';
        position: absolute;
        bottom: -3px;
        left: 0;
        width: 0;
        height: 3px;
        background: rgba(0, 0, 0, 0.85);
        transition: width 0.3s ease;
    }

    .research-word:hover::after {
        width: 100%;
    }

    /* Zero-size anchor — centred on the word; items radiate from here */
    .research-arc {
        display: block;         /* override the base display:none */
        position: absolute;
        left: 50%;
        top: 50%;
        width: 0;
        height: 0;
        pointer-events: none;
        z-index: 5;
    }

    /* Arc items — collapsed at origin by default */
    .arc-item {
        --r: 22vw;                              /* arc radius, scales with vp */
        position: absolute;
        left: 0;
        top: 0;
        transform: translate(-50%, -50%) scale(0.4);
        opacity: 0;
        font-family: 'Intel One Mono', monospace;
        font-weight: 400;
        font-style: normal;
        font-size: clamp(10px, 0.81vw, 14px);
        line-height: 1.5;
        color: rgba(0, 0, 0, 0.7);
        white-space: nowrap;
        pointer-events: none;
        /* Exit: fast collapse, no delay — all disappear together */
        transition:
            transform  0.2s ease-in,
            opacity    0.15s ease-in;
        transition-delay: 0s;
    }

    /* Hover: bloom out to arc positions with spring easing */
    .research-word:hover .arc-item {
        transform:
            translate(
                calc(-50% + var(--r) * cos(var(--angle))),
                calc(-50% + var(--r) * sin(var(--angle)))
            )
            scale(1);
        opacity: 1;
        transition:
            transform  0.5s cubic-bezier(0.34, 1.4, 0.64, 1),
            opacity    0.4s ease-out;
        transition-delay: var(--delay, 0s);
    }
}

/* The arc fans out with its full radius; it only clears the body copy when the
   window is tall enough. Below that, hide it (rather than squishing it) so it
   never overlaps — it's a decorative flourish for spacious screens. */
@media (min-width: 1024px) and (max-height: 1059px) {
    .research-arc { display: none; }
}


/* =============================================================
   TABLET (768px – 1023px) + MOBILE (≤ 767px) — SHARED
   Hamburger replaces nav. Text escapes absolute, flows to bottom.
   ============================================================= */

/* =============================================================
   CONSTRAINED VIEWPORTS — MOBILE + TABLET (≤ 1023px)
   Clean scrollable vertical flow: sketch on top, then title + copy.
   The single-screen lock is released (see also home-lock.js) so nothing
   is squeezed or clipped.
   ============================================================= */

@media (max-width: 1023px) {

    /* ——— Release the homepage single-screen lock ——— */
    html.research-home-root,
    html.research-home-root body,
    body.research-home-lock,
    html:has(.hero-page),
    body:has(.hero-page),
    body.home {
        overflow: visible !important;
        overflow-y: auto !important;
        height: auto !important;
        max-height: none !important;
    }

    html.research-home-root .hero-page {
        position: static;
        width: auto;
        height: auto !important;
        max-height: none !important;
    }

    .hero-page {
        display: block;             /* was flex column — let content grow the page */
        height: auto;
        min-height: 100dvh;
        overflow: visible;
    }

    .site-nav    { display: none; }
    .hamburger-btn { display: flex; }

    /* ——— Hero: centered vertical flow ——— */
    .hero {
        position: static;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 660px;
        margin: 0 auto;
        height: auto;
        min-height: 0;
        padding: clamp(24px, 5vh, 56px) 8vw clamp(40px, 8vh, 80px);
        gap: clamp(18px, 3.2vh, 36px);
        overflow: visible;
    }

    .hero::after { content: none; }   /* no overlap → no readability gradient */

    /* ——— Media block: sketch centered, caption beneath ——— */
    .hero__media {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .hero-image-wrapper {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        width: clamp(220px, 62vw, 420px);
        height: auto;               /* aspect-ratio (base rule) sets height */
        margin: 0 auto;
    }

    .hero__sketch {
        transform: none;
        opacity: 0.92;
    }

    /* Brush hotspots hidden — image is too small for precise interaction */
    .brush-wrapper { display: none; }

    .hero__img-caption {
        position: static;
        left: auto; right: auto; top: auto; bottom: auto;
        width: auto;
        min-width: 0;
        max-width: 100%;
        text-align: center;
        font-size: clamp(9px, 1.5vw, 11px);
    }

    /* ——— Text block ——— */
    .hero__text {
        display: flex;
        flex-direction: column;
        gap: clamp(16px, 3vh, 30px);
    }

    .hero__title,
    .hero__body,
    .hero__tagline,
    .hero__caption {
        position: static;
        left: auto;
        top: auto;
        right: auto;
        z-index: 2;
        min-width: 0;
        width: auto;
    }

    .hero__title {
        font-size: clamp(46px, 9vw, 76px);
        line-height: 1.02;
        white-space: normal;
    }

    .hero__body {
        font-size: clamp(12px, 1.6vw, 14px);
        line-height: 1.7;
        max-width: 52ch;
    }

    .hero__tagline {
        font-size: clamp(18px, 3vw, 28px);
        letter-spacing: 0.1em;
        line-height: 1.5;
    }

    .hero__caption {
        text-align: left;
        font-size: clamp(11px, 1.5vw, 13px);
        line-height: 1.9;
    }

    .hero__caption strong {
        font-size: clamp(13px, 1.8vw, 16px);
    }

    .header-divider {
        top: 8vh;
    }
}


/* =============================================================
   CONSTRAINED VIEWPORTS — SHORT DESKTOP (≥ 1024px wide, < 820px tall)
   Desktop windows squeezed by browser tabs + OS taskbars. Keep the
   two-column feel (text left, sketch right) but release the lock and
   let the page scroll so tagline / caption are never clipped.
   ============================================================= */

@media (min-width: 1024px) and (max-height: 879px) {

    html.research-home-root,
    html.research-home-root body,
    body.research-home-lock,
    html:has(.hero-page),
    body:has(.hero-page),
    body.home {
        overflow: visible !important;
        overflow-y: auto !important;
        height: auto !important;
        max-height: none !important;
    }

    html.research-home-root .hero-page {
        position: static;
        width: auto;
        height: auto !important;
        max-height: none !important;
    }

    .hero-page { display: block; height: auto; min-height: 100dvh; overflow: visible; }

    /* Header stays put at the top of the flow */
    .hero-page > .page-header { position: sticky; }

    .hero {
        position: static;
        display: flex;
        flex-direction: row-reverse;   /* media right, text left */
        align-items: center;
        justify-content: center;
        gap: clamp(40px, 6vw, 100px);
        width: 100%;
        max-width: 1400px;
        margin: 0 auto;
        height: auto;
        min-height: calc(100dvh - max(56px, 7.61vh));
        padding: clamp(28px, 6vh, 64px) 8vw;
        overflow: visible;
    }

    .hero::after { content: none; }

    .hero__media {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .hero-image-wrapper {
        position: relative;
        left: auto; right: auto; top: auto;
        width: auto;
        height: min(72vh, 620px);   /* aspect-ratio sets the width */
        margin: 0;
    }

    /* Keep the interactive brush overlays on short desktops — the image is
       still large enough here (up to 620px). */
    .brush-wrapper { display: block; }

    .hero__img-caption {
        position: static;
        left: auto; right: auto; top: auto;
        width: auto;
        min-width: 0;
        text-align: center;
        font-size: clamp(8px, 0.58vw, 10px);
    }

    .hero__text {
        flex: 0 1 460px;
        display: flex;
        flex-direction: column;
        gap: clamp(14px, 2.6vh, 26px);
    }

    .hero__title,
    .hero__body,
    .hero__tagline,
    .hero__caption {
        position: static;
        left: auto; top: auto; right: auto;
        width: auto;
        min-width: 0;
    }

    .hero__title {
        font-size: clamp(48px, 5vw, 88px);
        line-height: 1.0;
        white-space: normal;
    }

    .hero__body    { font-size: clamp(12px, 0.81vw, 14px); line-height: 1.5; max-width: 460px; }
    .hero__tagline { font-size: clamp(18px, 1.5vw, 26px); letter-spacing: 0.08em; line-height: 1.45; }
    .hero__caption {
        text-align: left;
        right: auto;
        width: auto;
        font-size: clamp(10px, 0.69vw, 12px);
        line-height: 1.8;
    }
    .hero__caption strong { font-size: clamp(12px, 0.93vw, 16px); }
}


/* =============================================================
   ABOUT PAGE — Global layout
   Reference frame: MacBook Pro 16" · 1728px wide
   Global two-column: sticky sidebar left, scrolling content right.
   ============================================================= */

/* ——— About page wrapper ——— */
.about-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ——— Page-level header — sticky on about page ——— */
.page-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    padding: 0 min(10.42vw, 180px) 0 9.84vw;   /* Figma: logo x170, rule at y75 */
    height: 6.71vh;
    min-height: 56px;
    border-bottom: 1px solid #000;
    background: #fff;
    gap: 0;
}

.page-header__logo {
    font-family: 'Intel One Mono', monospace;
    font-weight: 300;
    font-style: normal;
    font-size: clamp(12px, 1.04vw, 18px);      /* Figma 18px @1728 */
    letter-spacing: 0.3em;                     /* Figma 5.4px on 18px */
    color: rgba(0, 0, 0, 0.8);
    text-decoration: none;
    white-space: nowrap;
    margin-right: auto;
}

/* Override hero-specific padding on .site-nav when inside page-header */
.page-header .site-nav {
    padding-top: 0;
    padding-right: 0;
    flex: 0 0 auto;
}

/* Inner-page nav: match Figma exactly (12px, item centers 1048…1508) */
.page-header .site-nav ul { gap: min(2.31vw, 40px); }
.page-header .site-nav li:last-child { margin-left: max(-1.16vw, -20px); }
.page-header .site-nav a {
    width: min(4.63vw, 80px);
    min-width: 0;
    text-align: center;
    font-size: clamp(11px, 0.694vw, 12px);
    color: rgba(0, 0, 0, 0.8);
}

/* Override absolute position on hamburger when inside page-header */
.page-header .hamburger-btn {
    position: static;
    top: auto;
    right: auto;
    transform: none;
    display: none;
    margin-left: auto;
}

/* Active page link */
.page-header .site-nav a[aria-current="page"] {
    font-weight: 600;               /* Figma "about" is SemiBold */
    color: rgba(0, 0, 0, 0.8);
}

/* ——— HOME PAGE header — identical to every inner page (logo on the left,
   nav center-aligned, same padding). The home page therefore uses the base
   .page-header rules above; only the 1728-column centering is home-specific,
   so the header rule stays aligned with the hero column on wide screens. ——— */
@media (min-width: 1024px) {
    html.research-home-root .hero-page > .page-header {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: min(100vw, 1728px);
    }
}



/* =============================================================
   ABOUT PAGE — Tablet (768px – 1023px)
   Single column; sidebar nav hidden.
   ============================================================= */

@media (max-width: 1023px) {

    /* Header */
    .page-header {
        padding: 0 6vw;
        height: auto;
        min-height: 60px;
        padding-top: max(16px, 2vh);
        padding-bottom: max(16px, 2vh);
    }

    .page-header .site-nav { display: none; }

    .page-header .hamburger-btn {
        display: flex;
        position: static;
        transform: none;
        top: auto;
        right: auto;
        margin-left: auto;
    }

    }


/* =============================================================
   MOBILE ONLY (≤ 767px)
   Tighter spacing, adjusted sketch size, safe-area support.
   ============================================================= */

@media (max-width: 767px) {

    .hamburger-btn {
        top: max(18px, env(safe-area-inset-top, 0px));
        right: 24px;
        transform: none;
    }

    .header-divider {
        top: 60px;
    }

    .hero {
        padding: clamp(20px, 4vh, 40px) 24px max(36px, env(safe-area-inset-bottom, 0px));
    }

    /* Portrait sketch — prominent on narrow screens */
    .hero-image-wrapper {
        width: clamp(200px, 74vw, 340px);
    }

    .hero__sketch {
        opacity: 0.9;
    }

    .hero__img-caption {
        font-size: clamp(9px, 2.6vw, 11px);
    }

    .hero__title {
        font-size: clamp(44px, 13vw, 64px);
    }

    .hero__body {
        font-size: clamp(12px, 3.5vw, 14px);
        line-height: 1.7;
        max-width: 100%;
    }

    .hero__tagline {
        font-size: clamp(18px, 5.8vw, 24px);
        letter-spacing: 0.06em;
    }

    .hero__caption {
        font-size: clamp(10px, 2.8vw, 12px);
        color: rgba(0, 0, 0, 0.7);
    }

    .hero__caption strong {
        font-size: clamp(12px, 3.2vw, 14px);
    }

    /* Mobile menu */
    .mobile-menu {
        padding: 80px 24px 40px;
    }

    .mobile-menu__close {
        top: max(22px, env(safe-area-inset-top, 0px));
        right: 24px;
    }

    .mobile-menu__nav a {
        font-size: clamp(28px, 9vw, 44px);
        padding: 18px 0;
    }

    .mobile-menu__caption {
        margin-top: 32px;
        font-size: 10px;
    }

    /* About page — mobile overrides */
    .page-header {
        padding-left: 24px;
        padding-right: 24px;
    }

    .about-content {
        padding-left: 24px;
        padding-right: 24px;
    }

}

/* =============================================================
   ATELIER PAGE
   Reference: Figma ATELIER frame, 1728 × 1117.
   ============================================================= */

.atelier-page {
    --header-h: max(56px, 6.71vh);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: #fff;
    color: #000;
}

/* Desktop: two columns — ATELIER title + intro pinned in a sticky sidebar on
   the LEFT (always visible), the fragments flowing on the right. */
.atelier-main {
    display: grid;
    grid-template-columns: minmax(260px, 26vw) minmax(0, 1fr);
    gap: clamp(32px, 3.5vw, 72px);
    align-items: start;
    flex: 1 1 auto;
    padding: 0 9.84vw;
}

/* Left: sticky sidebar; ATELIER title + intro pinned at the bottom (Figma). */
.atelier-page .atelier-intro {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: var(--header-h);
    height: calc(100vh - var(--header-h) - 72px);
    max-width: 372px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.atelier-page .atelier-intro h1 {
    margin: 0 0 clamp(8px, 1.3vh, 16px);
    font-family: 'Intel One Mono', monospace;
    font-size: clamp(48px, 5.1vw, 88px);      /* Figma 88px */
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0;
    color: rgba(0, 0, 0, 0.8);
}
.atelier-page .atelier-intro p {
    max-width: 372px;
    font-family: 'Intel One Mono', monospace;
    font-size: clamp(11px, 0.72vw, 12px);     /* Figma 12px */
    font-weight: 300;
    line-height: 1.33;                         /* ≈16px */
    color: #000;
}

/* Right: the fragment list flows. Each fragment = title/caption + image + desc
   in three columns, echoing the Figma arrangement. */
.atelier-list {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: clamp(48px, 8vh, 104px);
    padding: clamp(44px, 8vh, 96px) 0 clamp(56px, 9vh, 104px);
}
/* A flex row that WRAPS: title/caption + image + description sit on one line
   (Figma) when there's room; when the row gets tight the description drops to
   its own line at full width instead of squeezing into a narrow strip.
   max-width keeps the group from spreading across ultra-wide screens. */
.atl-item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: clamp(22px, 2.2vw, 44px);
    max-width: 860px;
}

.atl-head {
    flex: 0 0 auto;
    width: clamp(108px, 8.5vw, 134px);
    align-self: center;          /* Figma: title/caption centred against the image */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}
.atl-title {
    margin: 0;
    font-family: 'Intel One Mono', monospace;
    font-weight: 500;             /* Figma: Medium */
    color: #000;
}
.atl-title--jhyalai  { font-size: clamp(17px, 1.27vw, 22px); line-height: 1.45; }
.atl-title--pani     { font-size: clamp(17px, 1.39vw, 24px); line-height: 1.33; }
.atl-title--concrete { font-size: clamp(17px, 1.39vw, 24px); line-height: 1.33; }
.atl-cap {
    max-width: 134px;
    margin: 6px 0 0;
    font-family: 'Intel One Mono', monospace;
    font-weight: 300;
    font-size: clamp(11px, 0.72vw, 12px);
    line-height: 1.33;
    color: rgba(0, 0, 0, 0.7);
}

/* Image boxes at the Figma display aspect (cropped). */
.atl-img {
    flex: 0 0 auto;
    width: clamp(150px, 11vw, 168px);
    align-self: center;
    margin: 0;
    overflow: hidden;
}
.atl-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.atl-img--jhyalai  { aspect-ratio: 164 / 212; }  /* Figma 164×212 */
.atl-img--jhyalai img  { opacity: 0.7; }
.atl-img--pani     { aspect-ratio: 166 / 222; }  /* Figma 166×222 */
.atl-img--pani img     { opacity: 0.8; }
.atl-img--concrete { aspect-ratio: 167 / 201; }  /* Figma 167×201 */

.atl-desc {
    flex: 1 1 300px;             /* prefers 300px; wraps below when tighter */
    align-self: flex-start;
    margin: 0;
    max-width: 499px;
    font-family: 'Intel One Mono', monospace;
    font-weight: 300;
    font-size: clamp(11px, 0.72vw, 12px);
    line-height: 1.5;
    color: #000;
}

/* Tablet + mobile: stack the intro, then each fragment (title, image, desc). */
@media (max-width: 1023px) {
    .atelier-main {
        display: block;
        padding: clamp(36px, 5vh, 56px) 8vw clamp(48px, 8vh, 80px);
    }
    .atelier-page .atelier-intro {
        position: static; height: auto; display: block; max-width: none;
        margin-bottom: clamp(36px, 6vh, 56px);
    }
    .atelier-page .atelier-intro h1 { font-size: clamp(48px, 8vw, 72px); }
    .atelier-page .atelier-intro p { max-width: 60ch; }
    .atelier-list { padding: 0; gap: clamp(40px, 7vh, 72px); }
    .atl-item { display: block; }
    .atl-head { align-items: flex-start; text-align: left; margin-bottom: 12px; }
    .atl-title { font-size: 22px; line-height: 1.3; }
    .atl-cap { max-width: none; margin-top: 4px; }
    .atl-img { width: min(70vw, 260px); margin-bottom: 16px; }
    .atl-desc { max-width: 60ch; }
}

/* =============================================================
   ARCHIVES PAGE
   Reference: Figma ARCHIVES frame, 1728 × 1117.
   ============================================================= */

.archives-page {
    --header-h: max(56px, 6.71vh);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: #fff;
    color: #000;
}

/* Desktop: two columns — ARCHIVES title + intro pinned in a sticky sidebar on
   the LEFT (always visible), the numbered list flowing on the right. */
.archives-main {
    display: grid;
    grid-template-columns: minmax(280px, 30vw) minmax(0, 1fr);
    gap: clamp(40px, 5vw, 96px);
    align-items: start;
    flex: 1 1 auto;
    padding: 0 9.84vw;
}

.archives-list {
    grid-column: 2;
    grid-row: 1;
    align-self: center;          /* Figma: list sits vertically centred */
    max-width: 680px;
    padding: clamp(48px, 8vh, 96px) 0;
}

.archive-item {
    border-top: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.45);
}
.archive-item h2 { margin: 0; font: inherit; }

.archive-item__button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border: 0;
    background: transparent;
    color: #000;
    padding: 5px 2px 6px;                    /* Figma rows are tight (~16px) */
    font-family: 'Intel One Mono', monospace;
    font-size: clamp(12px, 0.81vw, 14px);   /* Figma 14px Medium */
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0.1em;                   /* 1.4px on 14px */
    text-align: left;
    cursor: pointer;
}

.archive-item__button b { display: inline-block; min-width: 2.7em; font-weight: 500; }

.archive-item__mark {
    flex: 0 0 auto;
    font-size: 1em;
    font-weight: 500;
    line-height: 1;
    transition: transform 180ms ease;
}
.archive-item.is-open .archive-item__mark { transform: rotate(45deg); }

.archive-item__panel {
    max-width: 62ch;
    padding: 2px 28px 14px 2.7em;
    font-size: clamp(11px, 0.72vw, 12px);
    font-weight: 300;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.72);
}

/* Left: sticky sidebar, ARCHIVES title + intro pinned at the bottom.
   .archives-page prefix so these beat the shared --tra type system below. */
.archives-page .archives-intro {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: var(--header-h);
    left: auto;
    height: calc(100vh - var(--header-h) - 72px);
    width: auto;
    max-width: 432px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.archives-page .archives-intro h1 {
    margin: 0 0 clamp(8px, 1.3vh, 16px);
    font-family: 'Intel One Mono', monospace;
    font-size: clamp(48px, 5.1vw, 88px);     /* Figma 88px */
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0;
    color: rgba(0, 0, 0, 0.8);
}
.archives-page .archives-intro p {
    max-width: 428px;
    font-family: 'Intel One Mono', monospace;
    font-size: clamp(11px, 0.72vw, 12px);    /* Figma 12px */
    font-weight: 300;
    line-height: 1.33;
    color: #000;
}
.archives-page .archive-item__button {
    font-size: clamp(12px, 0.81vw, 14px);    /* Figma 14px — beat --tra-micro */
}

/* Tablet + mobile: stack the intro, then the numbered list. */
@media (max-width: 1023px) {
    .archives-main {
        display: block;
        padding: clamp(36px, 5vh, 56px) 8vw clamp(48px, 8vh, 80px);
    }
    .archives-page .archives-intro {
        position: static; height: auto; display: block; max-width: none;
        margin-bottom: clamp(36px, 6vh, 56px);
    }
    .archives-page .archives-intro h1 { font-size: clamp(48px, 8vw, 72px); }
    .archives-page .archives-intro p { max-width: 60ch; }
    .archives-list { padding: 0; max-width: none; }
}

/* =============================================================
   PRACTICE PAGE — index layout
   Reference: Figma PRACTICE frame, 1728 × 1117.
   ============================================================= */

.practice-index-page {
    --header-h: max(56px, 6.71vh);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: #fff;
    color: #000;
}

/* Desktop: two columns — PRACTICE title + intro pinned in a sticky sidebar on
   the LEFT (always visible), the project list flowing/scrolling on the right.
   Same pattern as the journal page. */
.practice-index {
    display: grid;
    grid-template-columns: minmax(280px, 30vw) minmax(0, 1fr);
    gap: clamp(40px, 5vw, 96px);
    align-items: start;
    flex: 1 1 auto;
    padding: 0 9.84vw;
}

/* Left: sticky sidebar; PRACTICE title + intro pinned at the bottom (Figma). */
.practice-index-page .practice-index__intro {
    position: sticky;
    top: var(--header-h);
    height: calc(100vh - var(--header-h) - 72px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    max-width: 422px;
}
.practice-index-page .practice-index__intro h1 {
    font-family: 'Intel One Mono', monospace;
    font-weight: 300;
    font-size: clamp(48px, 5.1vw, 88px);      /* Figma 88px */
    line-height: 1;
    letter-spacing: 0;
    color: rgba(0, 0, 0, 0.8);
    margin-bottom: clamp(8px, 1.3vh, 16px);
}
.practice-index-page .practice-index__intro p {
    font-family: 'Intel One Mono', monospace;
    font-weight: 300;
    font-size: clamp(11px, 0.72vw, 12px);     /* Figma 12px */
    line-height: 1.33;                         /* ≈16px */
    color: #000;
    max-width: 422px;
}

/* Right: the project list flows; each project is a row (title + image). */
.practice-list {
    display: flex;
    flex-direction: column;
    gap: clamp(44px, 7vh, 88px);
    padding: clamp(44px, 8vh, 96px) 0 clamp(56px, 9vh, 104px);
}
.prac-item {
    display: flex;
    align-items: center;
    gap: clamp(24px, 3vw, 56px);
    text-decoration: none;
}
.prac-title {
    flex: 0 0 auto;
    width: clamp(96px, 7.5vw, 130px);   /* Figma 130 */
    margin: 0;
    font-family: 'Intel One Mono', monospace;
    font-weight: 500;             /* Figma: Medium */
    font-size: clamp(17px, 1.27vw, 22px);   /* Figma 22px */
    line-height: 1.45;
    color: #000;
    text-align: right;
}
.prac-item:hover .prac-title { color: rgba(0, 0, 0, 0.55); }
/* Image boxes at the Figma display sizes (cropped to the frame's aspect). */
.prac-img {
    flex: 0 0 auto;
    display: block;
    overflow: hidden;
}
.prac-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.25s ease; }
.prac-item:hover .prac-img img { opacity: 0.82; }
.prac-img--deep     { width: clamp(150px, 12vw,   203px); aspect-ratio: 203 / 120; }  /* Figma 203×120 */
.prac-img--bhrikuti { width: clamp(150px, 11.5vw, 199px); aspect-ratio: 199 / 207; }  /* Figma 199×207 */
.prac-img--chima    { width: clamp(178px, 14vw,   244px); aspect-ratio: 244 / 176; }  /* Figma 244×176 */

/* Tablet + mobile: stack the intro, then the project list. */
@media (max-width: 1023px) {
    .practice-index {
        display: block;
        padding: clamp(36px, 5vh, 56px) 8vw clamp(48px, 8vh, 80px);
    }
    .practice-index-page .practice-index__intro {
        position: static; height: auto; display: block; max-width: none;
        margin-bottom: clamp(36px, 6vh, 56px);
    }
    .practice-index-page .practice-index__intro h1 { font-size: clamp(48px, 8vw, 72px); }
    .practice-index-page .practice-index__intro p { max-width: 60ch; }
    .practice-list { padding: 0; gap: clamp(36px, 6vh, 64px); }
}

@media (max-width: 640px) {
    .prac-item { flex-direction: column; align-items: flex-start; gap: 12px; }
    .prac-title { width: auto; text-align: left; font-size: 22px; }
    .prac-img--deep, .prac-img--bhrikuti, .prac-img--chima { width: min(66vw, 260px); }
}

/* =============================================================
   DEEP PRACTICE DETAIL PAGE
   Exact exported Figma SVG, with baked-in SVG nav cropped away.
   ============================================================= */

html:has(.deep-page),
body:has(.deep-page),
html.research-deep-root,
html.research-deep-root body {
    overflow: hidden;
    height: 100dvh;
}

.deep-page {
    position: relative;
    height: 100dvh;
    background: #fff;
    color: #000;
    overflow: hidden;
}

/* Sticky chrome overlays the scrolling strip */
.deep-page .page-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.deep-scroll {
    position: absolute;
    inset: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: #fff;
}

.deep-scroll::-webkit-scrollbar { height: 7px; }
.deep-scroll::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.06); }
.deep-scroll::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.42); }

/* The strip is the Figma frame's coordinate space (29239 × 1117), scaled to
   fit the viewport height. Children are positioned as % of this box, and
   container-query height units (cqh) let text scale with it. */
.deep-strip {
    position: relative;
    height: 100%;
    aspect-ratio: 29239 / 1117;
    width: auto;
    container-type: size;
}

.deep-img {
    position: absolute;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
    cursor: zoom-in;
    transition: opacity 0.2s ease, outline-color 0.2s ease;
    outline: 1px solid transparent;
}
.deep-img:hover { outline-color: rgba(0, 0, 0, 0.35); outline-offset: 2px; }

.deep-text {
    position: absolute;
    font-family: 'Intel One Mono', monospace;
    font-weight: 300;
    line-height: 1.42;
    letter-spacing: 0.01em;
    color: #000;
}

.deep-text strong { font-weight: 700; }

/* ——— Sticky project title (overlays the SVG's baked-in title) ——— */
.deep-title {
    position: fixed;
    top: max(56px, 7.61vh);          /* sits just under the sticky header */
    left: 0;
    z-index: 40;
    margin: 0;
    padding: clamp(14px, 2.2vh, 26px) clamp(48px, 6vw, 90px) clamp(14px, 2vh, 22px) 9.84vw;
    font-family: 'Intel One Mono', monospace;
    font-weight: 300;
    font-size: clamp(34px, 4.2vw, 64px);
    line-height: 1;
    color: rgba(0, 0, 0, 0.85);
    white-space: nowrap;
    pointer-events: none;
    /* White backing fades to transparent so it covers the baked title
       yet blends into the scrolling artwork on the right. */
    background: linear-gradient(to right, #fff 62%, rgba(255, 255, 255, 0));
}

.deep-title__num { font-weight: 300; }

/* ——— Horizontal-scroll arrows ——— */
.deep-arrow {
    position: fixed;
    bottom: clamp(20px, 5vh, 54px);
    z-index: 45;
    width: clamp(52px, 4.2vw, 74px);
    height: 40px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.8);
    transition: color 0.2s ease, opacity 0.25s ease, transform 0.2s ease;
}

.deep-arrow--left  { left:  clamp(16px, 3vw, 48px); }
.deep-arrow--right { right: clamp(16px, 3vw, 48px); }

.deep-arrow:hover { color: #000; }
.deep-arrow--left:hover  { transform: translateX(-3px); }
.deep-arrow--right:hover { transform: translateX(3px); }

.deep-arrow[hidden] { display: none; }

.deep-arrow svg {
    width: 100%;
    height: auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: square;
    stroke-linejoin: miter;
}

/* ——— Image lightbox ——— */
.deep-lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    padding: clamp(20px, 5vh, 64px);
    background: rgba(255, 255, 255, 0.97);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    overscroll-behavior: contain;
}
.deep-lightbox[hidden] { display: none; }

.deep-lightbox__img {
    max-width: 92vw;
    max-height: 88vh;
    object-fit: contain;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.20);
    cursor: zoom-in;
    background: #fff;
}
.deep-lightbox__img.is-zoomed {
    max-width: none;
    max-height: none;
    width: auto;
    cursor: zoom-out;
    margin: auto;                 /* keep centered while the box scrolls to pan */
}

.deep-lightbox__close {
    position: fixed;
    top: clamp(14px, 2.6vh, 26px);
    right: clamp(16px, 3vw, 36px);
    z-index: 2;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    color: rgba(0, 0, 0, 0.75);
    cursor: pointer;
}
.deep-lightbox__close:hover { color: #000; border-color: rgba(0, 0, 0, 0.4); }

.deep-lightbox__hint {
    position: fixed;
    bottom: clamp(14px, 3vh, 28px);
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    font-family: 'Intel One Mono', monospace;
    font-size: clamp(9px, 0.7vw, 11px);
    letter-spacing: 0.06em;
    color: rgba(0, 0, 0, 0.5);
    pointer-events: none;
}



/* =============================================================
   ABOUT PAGE  (Overview) — rebuilt to Figma "ABOUT - overview"
   Reference frame: 1728px wide. Sticky one-screen sidebar (nav +
   studio meta) on the left; scrolling content with accordion
   blocks on the right.
   ============================================================= */

.about-page {
    --header-h: max(56px, 6.71vh);
}

/* ——— Two-column layout ——— */
.about-layout {
    display: grid;
    grid-template-columns: clamp(300px, 31.25vw, 540px) 1fr;   /* 540/1728 */
    flex: 1;
    align-items: start;
}

/* ——— Sticky sidebar — pinned; the -72px leaves room for the footer so the
   sticky element never has to release/slip while the content scrolls. Uses
   min-height (not height) so it GROWS when a nav section is expanded, instead
   of overflowing its top behind the header and hiding the nav. ——— */
.about-sidebar {
    position: sticky;
    top: var(--header-h);
    min-height: calc(100vh - var(--header-h) - 72px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 4vh 2vw 6.5vh 9.84vw;   /* 170/1728 left */
}

/* ——— Section navigation (grouped; sub-items show for the current section) ——— */
.about-nav {
    display: flex;
    flex-direction: column;
    margin-bottom: clamp(48px, 11.9vh, 140px);   /* Figma nav→ABOUT gap ≈133px @1117 */
    max-width: 300px;
}

.about-nav__link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1em;
    font-family: 'Intel One Mono', monospace;
    font-weight: 400;                        /* Figma top-level: Regular */
    font-size: clamp(13px, 0.81vw, 14px);    /* Figma 14px @1728 */
    line-height: 16px;                       /* Figma leading 16px */
    color: rgba(0, 0, 0, 0.75);
    text-decoration: none;
    padding: 6px 0;                          /* → 28px row rhythm */
    cursor: pointer;
    transition: color 0.2s ease;
}

.about-nav__link:hover { color: #000; }

/* Figma: a divider under every top-level row (and under the current row's
   sub-group). Rendered as a bottom border on the group + on the current label. */
.about-nav__group { border-bottom: 1px solid rgba(0, 0, 0, 0.2); }
.about-nav__group.is-current > .about-nav__link--section { border-bottom: 1px solid rgba(0, 0, 0, 0.2); }

.about-nav__link--section { color: rgba(0, 0, 0, 0.9); }

.about-nav__link--sub {
    padding-left: 12px;
    font-weight: 300;                        /* Figma sub-items: Light */
    font-size: clamp(12px, 0.81vw, 14px);
}

/* Sub-items: collapsed by default, revealed for the current section */
.about-nav__subs {
    display: flex;
    flex-direction: column;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
}

.about-nav__group.is-current .about-nav__subs {
    max-height: 320px;
    opacity: 1;
}

/* Arrow on sections you can jump TO (i.e. not the current one).
   Figma: a thin 15px line-arrow, not a chunky glyph. */
.about-nav__group:not(.is-current) .about-nav__link--section::after {
    content: '';
    align-self: center;
    flex: 0 0 auto;
    width: 16px;
    height: 10px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h14M10 1l4 4-4 4' fill='none' stroke='%23222' stroke-width='1'/%3E%3C/svg%3E") center/contain no-repeat;
    opacity: 0.7;
}

/* Active states — Figma keeps top-level Regular; presence of subs (vs → arrow)
   is what marks the current section, so we only deepen the colour. */
.about-nav__link.is-active { color: #000; }
.about-nav__group.is-current > .about-nav__link--section { color: #000; }

/* ——— Studio meta block (bottom of sidebar) ——— */
.about-meta__title {
    font-family: 'Intel One Mono', monospace;
    font-weight: 300;
    font-size: clamp(48px, 5.1vw, 88px);    /* Figma ABOUT 88px @1728 */
    line-height: 1;
    color: rgba(0, 0, 0, 0.8);
    letter-spacing: -0.01em;
    margin-bottom: clamp(4px, 0.6vh, 8px);       /* Figma ABOUT→tagline ≈6px */
}

.about-meta__tagline {
    font-family: 'Intel One Mono', monospace;
    font-weight: 300;
    font-size: clamp(11px, 0.72vw, 12px);        /* Figma 12px */
    line-height: 1.6;
    color: rgba(0, 0, 0, 0.75);
    max-width: 260px;
    margin-bottom: clamp(8px, 1vh, 12px);        /* Figma tagline→contact ≈10px */
}

.about-meta__contact {
    display: flex;
    flex-direction: column;
    gap: 0;
    font-style: normal;
    font-family: 'Intel One Mono', monospace;
    font-weight: 300;
    font-size: clamp(11px, 0.72vw, 12px);        /* Figma 12px */
    line-height: 1.67;                           /* Figma 20px leading on 12px */
    color: rgba(0, 0, 0, 0.7);
}

.about-meta__name {
    font-weight: 600;                            /* Figma SemiBold */
    letter-spacing: 0.5em;                       /* Figma 6.4px on 12px */
    color: rgba(0, 0, 0, 0.85);
    margin-bottom: 0;
}

.about-meta__contact a {
    color: inherit;
    text-decoration: none;
}

.about-meta__contact a:hover { color: #000; text-decoration: underline; }

/* ——— Scrolling content column ——— */
.about-content {
    padding: clamp(72px, 12vh, 150px) clamp(70px, 12vw, 240px) clamp(80px, 12vh, 140px) clamp(16px, 1.39vw, 24px);
    min-width: 0;                            /* Figma: text at x564 = col 540 + 24 inset */
}

.about-section { scroll-margin-top: calc(var(--header-h) + 24px); }

/* Shared prose column width (Figma body ≈ 680px on the 1728 frame). */
.about-content { --prose-w: clamp(320px, 39.4vw, 680px); }

/* ——— Tabbed views: only the active section is rendered ——— */
.about-view { display: none; }
.about-view.is-active { display: block; }

/* ——— Intro paragraph ——— */
.about-intro {
    font-family: 'Intel One Mono', monospace;
    font-weight: 300;                       /* Figma intro: Light 18px / 28px */
    font-size: clamp(15px, 1.15vw, 18px);
    line-height: 1.56;
    color: #000;
    max-width: var(--prose-w);
    margin-bottom: 0;
}

/* ——— Accordion / read-more blocks ——— */
.about-block {
    scroll-margin-top: calc(var(--header-h) + 24px);
    margin-top: clamp(52px, 8.5vh, 104px);
}

.about-block__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    max-width: var(--prose-w);
    padding: 0 0 8px;
    background: none;
    border: none;
    border-bottom: 1px solid #000;          /* Figma: rule sits BELOW the header */
    cursor: pointer;
    text-align: left;
    color: #000;
}

/* Gap from the header rule down to the body (Figma ≈11px) */
.about-block__head + .about-block__excerpt,
.about-block__head + .about-block__intro,
.about-block__excerpt.about-block__excerpt--replace { margin-top: 11px; }

/* Figma: the header rule spans the full 720px content column (x540–1260),
   24px to the LEFT of the 24px-inset text. Extend the head on desktop. */
@media (min-width: 1024px) {
    .about-block__head {
        margin-left: calc(-1 * clamp(16px, 1.39vw, 24px));
        padding-left: clamp(16px, 1.39vw, 24px);
        padding-right: 16px;
        width: calc(var(--prose-w) + clamp(16px, 1.39vw, 24px) + 16px);
        max-width: none;
    }
}

.about-block__title {
    font-family: 'Intel One Mono', monospace;
    font-weight: 700;
    font-size: clamp(12px, 0.9vw, 14px);
    letter-spacing: 0.4em;                  /* Figma 5.6px on 14px */
    text-transform: none;
    line-height: 1.2;
}

.about-block__toggle {
    font-family: 'Intel One Mono', monospace;
    font-weight: 700;
    font-size: clamp(13px, 0.9vw, 14px);    /* Figma "+" is 14px Bold */
    line-height: 1;
    flex-shrink: 0;
    color: #000;
}

/* Body copy — normal weight, airy leading (matches Figma) */
.about-block__excerpt p,
.about-prose p,
.about-block__intro,
.about-block__close,
.rupture p {
    font-family: 'Intel One Mono', monospace;
    font-weight: 300;                       /* Figma body: Light */
    font-size: clamp(11.5px, 0.72vw, 12px); /* Figma body 12px @1728 */
    line-height: 1.7;                       /* ≈20px leading */
    color: #000;
}

.about-block__excerpt,
.about-block__intro,
.about-block__close { max-width: var(--prose-w); }

.about-block__excerpt p + p,
.about-prose p + p { margin-top: 1.4em; }

.about-block__intro strong,
.about-block__close strong,
.rupture p strong,
.about-prose p strong { font-weight: 500; color: #000; }   /* Figma emphasis: Medium */

/* Inline "…read more" — shown only while collapsed */
.about-readmore-inline { display: inline; }
.about-block.is-expanded .about-readmore-inline { display: none; }

.about-readmore-dots { color: rgba(0, 0, 0, 0.88); }

.about-readmore {
    font-style: italic;
    color: rgba(0, 0, 0, 0.72);
    text-decoration: none;
    white-space: nowrap;
}

.about-readmore:hover { color: #000; text-decoration: underline; }

/* Collapsible "full" region — smooth expand via grid rows */
.about-block__more {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s ease;
}

.about-block.is-expanded .about-block__more { grid-template-rows: 1fr; }

.about-block__more-inner { overflow: hidden; min-height: 0; }

/* Where-We-Begin full: prose (left) + pull-quote (right margin) */
.about-block__more-grid {
    display: grid;
    grid-template-columns: var(--prose-w) minmax(0, 1fr);
    gap: clamp(24px, 3vw, 60px);
    align-items: start;
    padding-top: 1.4em;
}

.about-pullquote {
    font-family: 'Intel One Mono', monospace;
    font-weight: 500;                       /* Figma: Medium Italic 14px */
    font-style: italic;
    font-size: clamp(13px, 0.81vw, 14px);
    line-height: 1.43;
    color: #000;
    max-width: 22ch;
    margin-top: 3.4em;
}

/* Ecosystem diagram + caption — centred under the prose column */
.about-figure {
    width: var(--prose-w);
    margin: clamp(40px, 6vh, 80px) 0 0;
    text-align: center;
}

.about-figure img {
    display: block;
    width: clamp(280px, 22vw, 380px);
    height: auto;
    margin: 0 auto clamp(18px, 2.6vh, 30px);
}

.about-figure figcaption {
    font-family: 'Intel One Mono', monospace;
    font-weight: 300;                       /* Figma: Light Italic 10px */
    font-style: italic;
    font-size: clamp(9px, 0.58vw, 10px);
    line-height: 1.6;
    color: rgba(0, 0, 0, 0.85);
    max-width: 42ch;
    margin: 0 auto;
}

.about-figure figcaption strong { font-weight: 500; font-style: italic; color: #000; }   /* Figma: "Figure" Medium Italic */

/* Outlook block */
.about-block__intro { margin-bottom: 1.6em; }

.rupture-grid {
    display: grid;
    grid-template-columns: 288fr 354fr;     /* Figma: cultural 288, ecological 354 */
    column-gap: clamp(30px, 2.66vw, 46px);  /* Figma gap ≈46px */
    row-gap: 0;
    margin: 0 0 1.6em;
    max-width: 688px;                       /* Figma ruptures span x562–1250 = 688 */
}

/* Divider centred in the gap; the ecological column's text stays flush with
   its column edge (x896) — aligned like the cultural column, not indented. */
.rupture + .rupture {
    border-left: 1px solid rgba(0, 0, 0, 0.2);
    margin-left: calc(-0.5 * clamp(30px, 2.66vw, 46px));
    padding-left: calc(0.5 * clamp(30px, 2.66vw, 46px));
}

.rupture__title {
    font-family: 'Intel One Mono', monospace;
    font-weight: 500;                       /* Figma: Medium */
    font-size: clamp(11.5px, 0.72vw, 12px);
    line-height: 1.7;
    color: #000;
    margin-bottom: 1.4em;
}

.rupture p + p { margin-top: 1.2em; }

/* Replace-style excerpt (Questions): hidden once expanded */
.about-block.is-expanded .about-block__excerpt--replace { display: none; }


/* =============================================================
   OUR APPROACH — section-specific content
   ============================================================= */

/* ——— Opening statement (styled like the section lead) ——— */
.about-statement {
    max-width: var(--prose-w);
    margin-top: 0;                          /* view-first element sits at top (Figma y222) */
}

.about-statement__lead,
.about-statement__turn {
    font-family: 'Intel One Mono', monospace;
    font-weight: 300;                       /* Figma: Light, 18px / 28px */
    font-style: normal;
    font-size: clamp(15px, 1.15vw, 18px);
    line-height: 1.56;
    color: #000;
}

/* Figma separates the two sentences by a blank line, same style */
.about-statement__turn { margin-top: 28px; }

/* ——— Three Lenses — one column collapsed, three columns expanded ——— */
.lenses-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(24px, 3vw, 56px);
    max-width: var(--prose-w);
    padding-top: 11px;                      /* Figma: ~11px below the header rule */
}

.about-block.is-expanded .lenses-grid {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 0;                          /* dividers below supply the spacing */
}

.lens--more { display: none; }
.about-block.is-expanded .lens--more { display: block; }

/* Figma: a vertical rule between each of the three lens columns.
   Gap ≈40px total (20 each side) so columns stay ~200px wide, not narrow+tall. */
.about-block.is-expanded .lens + .lens {
    border-left: 1px solid rgba(0, 0, 0, 0.2);
    margin-left: clamp(14px, 1.16vw, 20px);
    padding-left: clamp(14px, 1.16vw, 20px);
}

.lens p {
    font-family: 'Intel One Mono', monospace;
    font-weight: 300;                       /* Figma: Light */
    font-size: clamp(11.5px, 0.72vw, 12px);
    line-height: 1.7;
    color: #000;
}

.lens strong { font-weight: 500; color: #000; }   /* Figma: Medium */

/* ——— Our Process — six phases in a 3×2 grid ——— */
.phases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;                                 /* dividers + padding instead of gap */
    max-width: var(--prose-w);
    padding-top: 11px;                      /* Figma: ~11px below the header rule */
}

/* Figma: the six phases form a lined 3×2 grid (≈40px column gaps) */
.phase { padding: clamp(18px, 2.2vh, 26px) clamp(14px, 1.16vw, 20px); }
.phase:nth-child(3n+1) { padding-left: 0; }
.phase:nth-child(3n)   { padding-right: 0; }
.phase:not(:nth-child(3n+1)) { border-left: 1px solid rgba(0, 0, 0, 0.2); }
.phase:nth-child(n+4) { border-top: 1px solid rgba(0, 0, 0, 0.2); }

.phase__num {
    font-family: 'Intel One Mono', monospace;
    font-weight: 500;                       /* Figma: 20px Medium, own line */
    font-size: clamp(17px, 1.16vw, 20px);
    line-height: 1;
    letter-spacing: 0.08em;
    color: #000;
    margin-bottom: 0.5em;
}

.phase__title {
    font-family: 'Intel One Mono', monospace;
    font-weight: 500;                       /* Figma: Medium 14px */
    font-size: clamp(13px, 0.81vw, 14px);
    line-height: 1.43;
    color: #000;
    margin-bottom: 0.9em;
}

.phase__body {
    font-family: 'Intel One Mono', monospace;
    font-weight: 300;                       /* Figma: Light 12px */
    font-size: clamp(11.5px, 0.72vw, 12px);
    line-height: 1.7;
    color: #000;
}

/* ——— Questions — full list ——— */
.about-prose--questions { max-width: var(--prose-w); padding-top: 1.4em; }
.about-prose--questions p + p { margin-top: 1.4em; }


/* =============================================================
   WHAT WE DO — "The Work, in Four Strands"
   Staggered editorial layout: text + figure, alternating sides.
   ============================================================= */

/* First element of the What-we-do view sits at the top (Figma) */
.about-wwd-intro { margin-top: 0; }

.strands {
    display: flex;
    flex-direction: column;
    gap: clamp(48px, 7vh, 96px);
    max-width: var(--prose-w);
    padding-top: 1.8em;
}

.strand {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 3vw, 56px);
    align-items: center;
}

/* Alternate which side the image sits on */
.strand--img-right .wwd-figure { order: 2; }

/* Strand without a figure — text keeps the column rhythm */
.strand--no-img { grid-template-columns: 1fr 1fr; }
.strand--no-img .strand__text { grid-column: 2; }

.strand__num {
    font-family: 'Intel One Mono', monospace;
    font-weight: 700;                       /* Figma: number on its own line, Bold 14px */
    font-size: clamp(13px, 0.81vw, 14px);
    line-height: 1.43;
    color: #000;
}

.strand__title {
    font-family: 'Intel One Mono', monospace;
    font-weight: 700;                       /* Figma: Bold 14px */
    font-size: clamp(13px, 0.81vw, 14px);
    line-height: 1.43;
    color: #000;
    margin-bottom: 1em;
}

.strand__body {
    font-family: 'Intel One Mono', monospace;
    font-weight: 300;                       /* Figma: Light 12px */
    font-size: clamp(11.5px, 0.72vw, 12px);
    line-height: 1.7;
    color: #000;
}

/* ——— Figures (with graceful placeholder until images are added) ——— */
.wwd-figure { margin: 0; }

.wwd-figure__frame {
    display: block;
    width: 100%;
}

/* Sketches show at their natural aspect on the page (not cropped) */
.wwd-figure__frame img {
    display: block;
    width: 100%;
    height: auto;
}

/* Grey box shown only if the image file is missing */
.wwd-figure__frame.is-empty {
    aspect-ratio: 4 / 3;
    background: #f1f0ec;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.wwd-figure__frame.is-empty::after {
    content: 'image pending';
    font-family: 'Intel One Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: rgba(0, 0, 0, 0.35);
}

.wwd-figure figcaption {
    font-family: 'Intel One Mono', monospace;
    font-weight: 300;                       /* Figma: Light Italic 10px */
    font-style: italic;
    font-size: clamp(9px, 0.58vw, 10px);
    line-height: 1.6;
    color: rgba(0, 0, 0, 0.85);
    margin-top: 10px;
}

.wwd-figure figcaption strong { font-weight: 500; font-style: italic; color: #000; }   /* Figma: "Figure" Medium Italic */

/* =============================================================
   STUDIO — "Inside the studio" (placeholder / coming soon)
   ============================================================= */

.about-studio {
    margin-top: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: clamp(32px, 4.5vw, 80px);
    align-items: center;              /* text vertically centred against the illustration */
}

.about-studio__lead {
    font-family: 'Intel One Mono', monospace;
    font-weight: 300;                       /* Figma: Light 18px / 28px */
    font-size: clamp(15px, 1.15vw, 18px);
    line-height: 1.56;
    color: #000;
}

/* "We're currently shaping our studio…" — Regular Italic (Figma) */
.about-studio__turn {
    font-family: 'Intel One Mono', monospace;
    font-weight: 400;
    font-style: italic;
    font-size: clamp(15px, 1.15vw, 18px);
    line-height: 1.56;
    color: #000;
    margin-top: 28px;
}

/* Studio content is vertically centred against the illustration (Figma) */
#view-studio.is-active {
    display: flex;
    align-items: center;
    min-height: calc(100vh - var(--header-h) - clamp(140px, 22vh, 260px));
}
.about-studio { width: 100%; }

.about-studio__figure { margin: 0; }

/* Illustration at natural size (never upscaled beyond its resolution) */
.about-studio__figure .wwd-figure__frame img {
    display: block;
    width: 100%;
    max-width: 459px;
    height: auto;
    margin-left: auto;               /* sit toward the right edge */
}


/* ——— Footer bar ——— */
/* =============================================================
   JOURNAL PAGE — reuses the About sticky-sidebar + scrolling layout.
   Sidebar: entry list (top) + JOURNAL title/tagline (bottom).
   Content: entries stacked (title, date, body).
   ============================================================= */

/* =============================================================
   JOURNAL PAGE — tab-switch magazine layout (Figma 2:174/202/229)
   Left nav switches the entry shown on the right; no scrolling
   between posts. Absolute-positioned per the 1728×1117 frame.
   ============================================================= */
.journal-page {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: #fff;
    color: #000;
}

.journal-main {
    position: relative;
    flex: 1 1 auto;
}

/* Sidebar wrapper is transparent by default so the absolute desktop layout and
   the ≤1023 stacked flow treat nav + meta as direct children of journal-main.
   The short-desktop query below turns it into a real sticky column. */
.journal-sidebar { display: contents; }

/* ——— Entry nav (tab list, left) ——— */
.journal-nav {
    position: absolute;
    left: 10.13vw;                /* 175 / 1728 */
    top: 18.3vh;                  /* entry 1 at frame y284 */
    width: 29.51vw;               /* 510 / 1728 */
    display: flex;
    flex-direction: column;
}
.jn-entry {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 5px 0 5px 17px;      /* text inset 17px (192−175) */
    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
    font-family: 'Intel One Mono', monospace;
    font-weight: 400;             /* Regular (inactive) */
    font-size: clamp(12px, 0.81vw, 14px);   /* 14px */
    line-height: 1.25;
    letter-spacing: 0.1em;        /* 1.4px on 14px */
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
.jn-entry.is-active { font-weight: 500; }    /* Figma: Medium */
.jn-entry:not(.is-active)::after {           /* thin arrow to switch */
    content: '';
    align-self: center;
    flex: 0 0 auto;
    width: 16px;
    height: 10px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h14M10 1l4 4-4 4' fill='none' stroke='%23222' stroke-width='1'/%3E%3C/svg%3E") center/contain no-repeat;
    opacity: 0.7;
}

/* ——— JOURNAL title + tagline (bottom-left) ——— */
.journal-meta {
    position: absolute;
    left: 9.84vw;                 /* 170 / 1728 */
    top: 64.19vh;                 /* JOURNAL at frame y792 */
    width: 22vw;
}
.journal-meta__title {
    font-family: 'Intel One Mono', monospace;
    font-weight: 300;
    font-size: clamp(48px, 5.1vw, 88px);     /* 88px */
    line-height: 1;
    letter-spacing: -0.01em;
    color: rgba(0, 0, 0, 0.8);
    margin: 0 0 clamp(6px, 1vh, 12px);
}
.journal-meta__tagline {
    max-width: 335px;
    font-family: 'Intel One Mono', monospace;
    font-weight: 300;
    font-size: clamp(11px, 0.72vw, 12px);    /* 12px */
    line-height: 1.33;
    color: #000;
    margin: 0;
}

/* ——— Views: only the active entry shows ——— */
.journal-view:not(.is-active) { display: none; }
.journal-view--ikc.is-active,
.journal-view--khapaudi.is-active { position: absolute; inset: 0; display: block; }

/* The full-bleed view container must not swallow clicks meant for the nav
   underneath it; only its actual content stays interactive. */
.journal-view { pointer-events: none; }
.journal-view > * { pointer-events: auto; }

.jv-title {
    position: absolute;
    margin: 0;
    font-family: 'Intel One Mono', monospace;
    font-weight: 500;             /* Medium */
    font-size: clamp(17px, 1.27vw, 22px);    /* 22px */
    line-height: 1.36;            /* ≈30px */
    color: #000;
}
.jv-date {
    position: absolute;
    margin: 0;
    font-family: 'Intel One Mono', monospace;
    font-weight: 300;
    font-size: clamp(11px, 0.72vw, 12px);
    line-height: 1.33;
    color: #000;
}
.jv-body {
    font-family: 'Intel One Mono', monospace;
    font-weight: 300;
    font-size: clamp(11px, 0.72vw, 12px);
    line-height: 1.67;            /* ≈20px */
    color: #000;
}
.jv-img { position: absolute; margin: 0; overflow: hidden; }
.jv-img img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* IKC (Figma 2:174) */
.jv-title--ikc     { left: 54.46vw; top: 5.91vh;  width: 15.22vw; }               /* 941,141 · 263 */
.jv-date--ikc      { left: 54.46vw; top: 11.82vh; }                               /* 941,207 */
.jv-img--ikc-main  { left: 59.03vw; top: 14.24vh; width: 26.22vw; aspect-ratio: 453/444; }  /* 1020,234 — exposure/opacity baked into the PNG */
.jv-img--ikc-inset { left: 74.88vw; top: 58.01vh; width: 13.66vw; aspect-ratio: 236/218; }  /* 1294,723 */
.jv-body--ikc      { position: absolute; left: 53.70vw; top: 55.33vh; width: 19.97vw; }  /* 928,693 · 345 */

/* Khapaudi (Figma 2:202) */
.jv-title--khapaudi { left: 54.28vw; top: 9.04vh;  width: 16vw; }                 /* 938,176 */
.jv-date--khapaudi  { left: 54.28vw; top: 11.91vh; }                              /* 938,208 */
.jv-img--khapaudi   { left: 56.08vw; top: 16.38vh; width: 25.52vw; aspect-ratio: 441/496; }  /* 969,258 */
.jv-body--khapaudi  { position: absolute; left: 79.05vw; top: 33.04vh; width: 9.78vw; }  /* 1366,444 · 169 */

/* Siddhis (Figma 2:229): text only — flows so the long body scrolls */
.journal-view--siddhis.is-active {
    display: block;
    position: relative;
    margin: 3.85vh 0 clamp(48px, 8vh, 90px) 54.17vw;   /* 936, from frame y118 */
    width: 34.32vw;               /* 593 / 1728 */
    max-width: 593px;
}
.jv-title--siddhis { position: static; max-width: 502px; margin-bottom: 12px; }
.jv-date--siddhis  { position: static; margin-bottom: 12px; }
.jv-body--siddhis p + p { margin-top: 1.4em; }

/* ——— Desktop: two columns — a full-height STICKY sidebar with the entry nav
   pinned near the top and the JOURNAL title at the bottom (matching Figma and
   the About sidebar) + the active entry flowing/scrolling on the right. This
   replaces the fragile single-screen absolute composition at every desktop
   width so it never compresses. */
@media (min-width: 1024px) {
    .journal-page { --header-h: max(56px, 6.71vh); min-height: 100dvh; }

    .journal-main {
        display: grid;
        grid-template-columns: minmax(280px, 30vw) minmax(0, 1fr);
        gap: clamp(40px, 5vw, 96px);
        align-items: start;
        padding: 0 9.84vw;
    }

    /* Left column: sticky, nav at top + JOURNAL title at bottom. The -72px
       leaves room for the footer so the sticky element never slips while the
       content scrolls. */
    .journal-sidebar {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: sticky;
        top: var(--header-h);
        height: calc(100vh - var(--header-h) - 72px);
        padding: clamp(28px, 6vh, 64px) 0 clamp(28px, 5vh, 56px);
    }
    .journal-nav, .journal-meta {
        position: static;
        left: auto; top: auto; right: auto; width: auto; max-width: none;
    }
    .journal-meta__title { font-size: clamp(48px, 5.1vw, 88px); }
    .journal-meta__tagline { max-width: 335px; }

    /* Right column: the active entry flows in normal order and scrolls. */
    .journal-view--ikc.is-active,
    .journal-view--khapaudi.is-active,
    .journal-view--siddhis.is-active {
        position: static;
        inset: auto;
        display: flex;
        flex-direction: column;
        width: auto;
        max-width: 620px;
        margin: clamp(28px, 6vh, 64px) 0 clamp(48px, 8vh, 88px);
    }
    .jv-title, .jv-date, .jv-img, .jv-body {
        position: static;
        left: auto; top: auto; right: auto; inset: auto;
        width: auto; max-width: none; margin: 0;
    }
    .jv-title { order: 1; font-size: clamp(19px, 1.35vw, 22px); line-height: 1.36; margin-bottom: 8px; }
    .jv-date  { order: 2; margin-bottom: 22px; color: rgba(0, 0, 0, 0.7); }
    .jv-img   { order: 3; width: min(100%, 460px); overflow: visible; margin-bottom: 24px; aspect-ratio: auto; }
    .jv-img img { height: auto; }
    .jv-img--ikc-inset { display: none; }         /* the overlapping inset is single-screen-composition only */
    .jv-body  { order: 4; max-width: 64ch; }
    .jv-body--siddhis p + p { margin-top: 1.4em; }
}

/* ——— Footer ——— */
/* ——— Responsive: stack JOURNAL heading, nav, then the active entry ——— */
@media (max-width: 1023px) {
    .journal-main {
        padding: clamp(28px, 5vh, 48px) 8vw clamp(40px, 7vh, 72px);
        display: flex;
        flex-direction: column;
    }

    .journal-nav, .journal-meta,
    .journal-view--ikc.is-active, .journal-view--khapaudi.is-active,
    .journal-view--siddhis.is-active,
    .jv-title, .jv-date, .jv-img, .jv-body {
        position: static;
        left: auto; top: auto; right: auto; inset: auto;
        width: auto; max-width: none;
        margin-left: 0;
    }

    .journal-meta { order: -2; margin-bottom: clamp(28px, 4vh, 44px); }
    .journal-meta__title { font-size: clamp(48px, 15vw, 72px); }
    .journal-meta__tagline { max-width: 52ch; }

    .journal-nav { order: -1; width: 100%; max-width: 560px; margin-bottom: clamp(28px, 5vh, 48px); }

    .journal-view--ikc.is-active,
    .journal-view--khapaudi.is-active,
    .journal-view--siddhis.is-active {
        display: flex;
        flex-direction: column;
        margin: 0;
    }

    .jv-title { order: 1; font-size: clamp(20px, 5.5vw, 24px); line-height: 1.3; margin-bottom: 6px; }
    .jv-date { order: 2; margin-bottom: 18px; color: rgba(0, 0, 0, 0.7); }
    .jv-img { order: 3; width: min(100%, 480px); overflow: visible; margin-bottom: 22px; aspect-ratio: auto; }
    .jv-img img { height: auto; }
    .jv-img--ikc-inset { display: none; }         /* inset only on desktop */
    .jv-body { order: 4; max-width: 64ch; }

}


/* =============================================================
   ABOUT PAGE — Tablet + Mobile (≤ 1023px)
   Single column; sidebar becomes a static top block.
   ============================================================= */

@media (max-width: 1023px) {

    .about-layout {
        grid-template-columns: 1fr;
    }

    .about-sidebar {
        position: static;
        height: auto;
        justify-content: flex-start;
        padding: clamp(28px, 5vh, 56px) 8vw clamp(20px, 3vh, 36px);
    }

    /* Studio title/tagline first (acts as the page heading), then nav */
    .about-meta { order: -1; margin-bottom: clamp(28px, 4vh, 44px); }

    .about-nav { margin-bottom: 0; max-width: 520px; }

    .about-content {
        --prose-w: 100%;
        padding: clamp(8px, 2vh, 24px) 8vw clamp(48px, 8vh, 80px);
    }

    .about-block__more-grid {
        grid-template-columns: 1fr;
        gap: clamp(20px, 4vh, 36px);
    }

    /* Compact tab menu (same behaviour as desktop): only the active section
       shows its sub-items; the others keep the → arrow. Keeps the header short
       instead of dumping every sub-item into one long list. */
    .about-nav__link--section { padding: 10px 0; }
    .about-nav__link--sub { padding: 8px 0 8px 14px; }

    /* Approach grids collapse to two columns on tablet — the 3-col divider
       rules don't map here, so revert to gap-based spacing. */
    .lenses-grid,
    .about-block.is-expanded .lenses-grid,
    .phases-grid {
        grid-template-columns: 1fr 1fr;
        column-gap: clamp(24px, 4vw, 44px);
        row-gap: clamp(28px, 4vh, 44px);
    }
    .about-block.is-expanded .lens + .lens {
        border-left: none;
        margin-left: 0;
        padding-left: 0;
    }
    .phase { padding: 0; border: none !important; }

    .about-figure { width: 100%; }

    .about-pullquote {
        margin-top: 0;
        max-width: 100%;
        padding-left: 16px;
        border-left: 2px solid rgba(0, 0, 0, 0.5);
    }
}

@media (max-width: 640px) {

    .rupture-grid { grid-template-columns: 1fr; row-gap: clamp(26px, 4.5vh, 40px); }

    .lenses-grid,
    .about-block.is-expanded .lenses-grid,
    .phases-grid {
        grid-template-columns: 1fr;
    }

    /* Studio: stack illustration under the text */
    .about-studio { grid-template-columns: 1fr; gap: clamp(28px, 5vh, 48px); }
    .about-studio__figure .wwd-figure__frame img { margin-left: 0; }

    /* Strands: stack figure over text */
    .strand,
    .strand--no-img { grid-template-columns: 1fr; gap: clamp(14px, 3vh, 22px); }
    .strand--img-right .wwd-figure { order: 0; }
    .strand--no-img .strand__text { grid-column: auto; }
    .wwd-figure__frame { aspect-ratio: 3 / 2; }

    .rupture + .rupture {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        padding-top: 0;
    }
}

/* =============================================================
   SITE-WIDE FIGMA CONSISTENCY LAYER
   Shared typography, ink, rules, title rhythm, and footer chrome.
   Page-specific layouts above remain responsible only for composition.
   ============================================================= */

.page-header {
    border-bottom-color: var(--tra-ink-strong);
    background: rgba(255, 255, 255, 0.98);
}

.page-header__logo,
.page-header .site-nav a {
    color: var(--tra-ink);
}

.page-header .site-nav a:hover,
.page-header .site-nav a[aria-current="page"] {
    color: var(--tra-ink-strong);
}

.atelier-intro,
.practice-index__intro,
.archives-intro {
    left: var(--tra-title-inset);
    width: clamp(300px, 25vw, 432px);
}

.atelier-intro h1,
.practice-index__intro h1,
.archives-intro h1,
.about-meta__title {
    margin-bottom: clamp(10px, 1vh, 14px);
    font-family: var(--tra-font);
    font-size: var(--tra-page-title);
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0;
    color: var(--tra-ink);
}

.atelier-intro p,
.practice-index__intro p,
.archives-intro p,
.about-meta__tagline {
    max-width: 48ch;
    font-family: var(--tra-font);
    font-size: var(--tra-micro);
    font-weight: 300;
    line-height: 1.45;
    color: var(--tra-ink-muted);
}

.practice-project__label,
.about-nav__link--section {
    font-size: var(--tra-ui-label);
}

.atelier-fragment__heading strong,
.journal-article__title {
    font-size: var(--tra-feature-title);
}

.atelier-fragment__heading small,
.atelier-fragment__description p,
.journal-nav__link,
.journal-article__body p {
    font-size: var(--tra-small);
}

.about-nav__link--sub,
.journal-article__meta,
.archive-item__button,
.archive-item__panel {
    font-size: var(--tra-micro);
}

.about-nav__link,
.journal-nav__link {
    color: var(--tra-ink-faint);
}

.about-nav__link:hover,
.about-nav__link.is-active,
.about-nav__group.is-current > .about-nav__link--section,
.journal-nav__link:hover,
.journal-nav__link.is-active {
    color: var(--tra-ink-strong);
}

.about-nav__link--section,
.journal-nav,
.journal-nav__link,
.archive-item,
.archive-item:first-child {
    border-color: var(--tra-rule-soft);
}

/* ——— Site footer — one shared bar across every page ——— */
.site-footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: var(--tra-footer-height);
    padding: 0 var(--tra-edge);
    border-top: 1px solid var(--tra-rule);
    font-family: var(--tra-font);
    font-size: var(--tra-footer-size);
    font-weight: 300;
    line-height: 1.35;
    letter-spacing: 0.03em;
    color: var(--tra-ink-muted);
}

.site-footer a {
    color: inherit;
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--tra-ink-strong);
    text-decoration: underline;
}

/* =============================================================
   ABOUT — Figma type scale (2:255). Higher-specificity overrides
   so the shared --tra-* system above doesn't shrink these.
   ============================================================= */
.about-page .about-meta__title {
    font-size: clamp(48px, 5.1vw, 88px);     /* ABOUT 88px @1728 */
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.01em;
    color: rgba(0, 0, 0, 0.8);
}

.about-page .about-meta__tagline {
    font-size: clamp(11px, 0.72vw, 12px);    /* 12px */
    line-height: 1.6;
    color: rgba(0, 0, 0, 0.75);
}

.about-page .about-nav__link {
    color: rgba(0, 0, 0, 0.75);
}

.about-page .about-nav__link--section {
    font-size: clamp(13px, 0.81vw, 14px);    /* 14px Regular */
    color: rgba(0, 0, 0, 0.9);
}

.about-page .about-nav__link--sub {
    font-size: clamp(12px, 0.81vw, 14px);    /* 14px Light */
    font-weight: 300;
    color: rgba(0, 0, 0, 0.7);
}

.about-page .about-nav__link:hover,
.about-page .about-nav__link.is-active,
.about-page .about-nav__group.is-current > .about-nav__link--section {
    color: #000;
}

@media (max-width: 767px) {
    .about-page .about-meta__title { font-size: var(--tra-mobile-title); }
}

@media (max-width: 767px) {
    .atelier-intro h1,
    .practice-index__intro h1,
    .archives-intro h1,
    .about-meta__title {
        font-size: var(--tra-mobile-title);
    }

    .atelier-intro p,
    .practice-index__intro p,
    .archives-intro p,
    .about-meta__tagline,
    .journal-article__body p {
        font-size: 10px;
        line-height: 1.5;
    }

    .site-footer {
        min-height: 0;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        padding: 18px 24px max(18px, env(safe-area-inset-bottom, 0px));
        font-size: 8px;
    }
}

@media (min-width: 768px) and (max-height: 800px) {
    .practice-index__intro {
        top: 68%;
    }
}


/* =============================================================
   HOME PAGE v2 (Figma 2:2773)
   Nav-only header (the big title is the wordmark); large spaced
   "THE RESEARCH ATELIER" over an annotated sketch on the right;
   "cultivating…" bottom-left; studio-led tagline bottom-right.
   All positions in vw so the composition scales with viewport WIDTH
   and keeps the Figma proportions; scrolls if the window is short.
   ============================================================= */
.home2-page {
    --header-h: max(56px, 6.71vh);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: #fff;
    color: #000;
}

/* Nav-only header, pushed to the right (no logo — the title is the wordmark) */
.home2-header {
    justify-content: flex-end;
}

/* The whole composition is a stage that scales UNIFORMLY to fit both the
   viewport width and the available height — so shorter desktops keep the exact
   Figma layout, just smaller, instead of restacking. --cw is the fitted
   composition width; every element is sized/positioned as a fraction of it
   (design px / 1728). y positions are frame-y minus the 75px header band. */
.home2 {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    --cw: min(100vw, calc((100dvh - var(--header-h)) * 1728 / 1042));
}
.home2__stage {
    position: relative;
    flex: 0 0 auto;
    width: var(--cw);
    height: calc(var(--cw) * 1042 / 1728);
}

/* Sketch image — right, vertically centred, 70% opacity (Figma). */
.home2__image {
    position: absolute;
    left: calc(var(--cw) * 1047 / 1728);
    top:  calc(var(--cw) *   85 / 1728);   /* frame y160 − 75 */
    width:  calc(var(--cw) * 681 / 1728);
    height: calc(var(--cw) * 797 / 1728);
    margin: 0;
    overflow: hidden;
    opacity: 0.7;
}
.home2__image img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Big spaced title — vertically centred over the image. */
.home2__title {
    position: absolute;
    left:  calc(var(--cw) *  218 / 1728);
    top:   calc(var(--cw) *  424 / 1728);   /* frame y499 − 75 */
    width: calc(var(--cw) * 1360 / 1728);
    margin: 0;
    font-family: 'Intel One Mono', monospace;
    font-weight: 400;
    font-size:      calc(var(--cw) *  30 / 1728);
    letter-spacing: calc(var(--cw) *  36 / 1728);
    line-height:    calc(var(--cw) * 120 / 1728);
    text-align: center;
    color: rgba(0, 0, 0, 0.8);
    white-space: nowrap;
    z-index: 2;
    pointer-events: none;
}

/* cultivating … — bottom-left */
.home2__cultivating {
    position: absolute;
    left:  calc(var(--cw) *  57 / 1728);
    top:   calc(var(--cw) * 733 / 1728);   /* frame y808 − 75 */
    width: calc(var(--cw) * 263 / 1728);
    margin: 0;
    font-family: 'Intel One Mono', monospace;
    font-weight: 300;
    font-size:      calc(var(--cw) *  24 / 1728);
    line-height:    calc(var(--cw) *  42 / 1728);
    letter-spacing: calc(var(--cw) * 3.6 / 1728);
    color: #000;
}
.home2__cultivating strong { font-weight: 600; }

/* studio-led approach … — bottom-right */
.home2__tagline {
    position: absolute;
    left:  calc(var(--cw) * 753 / 1728);
    top:   calc(var(--cw) * 994 / 1728);   /* frame y1069 − 75 */
    width: calc(var(--cw) * 777 / 1728);
    margin: 0;
    font-family: 'Intel One Mono', monospace;
    font-weight: 300;
    font-size:   calc(var(--cw) * 12 / 1728);
    line-height: calc(var(--cw) * 24 / 1728);
    text-align: right;
    color: #000;
}
.home2__tagline strong { font-weight: 500; }

/* ——— Mobile (narrow widths only): stack into a clean scrolling column ——— */
@media (max-width: 767px) {
    .home2 { display: block; overflow: visible; }
    .home2__stage {
        width: auto;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: clamp(28px, 6vh, 56px) 8vw clamp(40px, 7vh, 72px);
        gap: clamp(28px, 5vh, 48px);
    }
    .home2__image,
    .home2__title,
    .home2__cultivating,
    .home2__tagline {
        position: static;
        left: auto; top: auto;
        width: 100%;
        max-width: none;
        white-space: normal;
        text-align: left;
    }
    .home2__title {
        order: -1;
        font-size: clamp(20px, 6vw, 34px);
        letter-spacing: clamp(4px, 2.4vw, 12px);
        line-height: 1.25;
    }
    .home2__image {
        order: 0;
        width: min(78vw, 360px);
        height: auto;
        aspect-ratio: 681 / 797;
        opacity: 0.85;
    }
    .home2__cultivating { order: 1; max-width: 34ch; font-size: clamp(18px, 6vw, 24px); line-height: 1.75; letter-spacing: 0.15em; }
    .home2__tagline { order: 2; max-width: 60ch; font-size: 12px; line-height: 1.7; }
}