/* =============================================================
   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;
}

html {
    width: 100%;
    height: 100%;
    /* scroll-behavior handled by GSAP on pages that need it */
}

body {
    width: 100%;
    height: 100%;
}

body {
    background: #fff;
    color: #000;
    font-family: 'Intel One Mono', monospace;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* =============================================================
   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 */
}

/* ——— Sketch illustration ———
   Figma: x=932 y=160  w=603  h=853  opacity=0.9
   Portrait image, placed in right column, no transform needed. */
.hero__sketch {
    position: absolute;
    display: block;
    left: 53.94vw;          /* 932 / 1728 */
    top: 14.33vh;           /* 160 / 1117 */
    width: 34.90vw;         /* 603 / 1728 */
    height: 76.37vh;        /* 853 / 1117 */
    opacity: 0.9;
    object-fit: cover;
    object-position: center top;
    pointer-events: none;
    user-select: none;
}

/* ——— 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: 74.19vw;          /* 1282 / 1728 */
    top: calc(50vh + 377.5px); /* 936px = 50%+377.5px at 1117px ref */
    width: 9.95vw;          /* 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: 400;       /* closest to Medium on Google Fonts */
    font-style: italic;
}

.img-cap--bold {
    font-weight: 700;
    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: 8.28vw;
    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: 8.28vw;
    top: calc(50vh + 262.5px);
    width: 26.79vw;                         /* 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: 8.28vw;
    top: calc(50vh + 346.5px);
    width: 39.35vw;
    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: 700;
    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: 8.85vw;
    top: min(calc(50vh + 510.5px), calc(100vh - 48px));
    width: 44.97vw;
    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: 700;
    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);
    }
}


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

@media (max-width: 1023px) {

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

    /* Hero: flex column, text stacked at bottom */
    .hero {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 0 8vw 7vh;
        min-height: 100svh;
    }

    /* White-to-transparent gradient for text readability over sketch */
    .hero::after {
        content: '';
        position: absolute;
        inset: auto 0 0;
        height: 60%;
        background: linear-gradient(to top, #fff 38%, transparent 100%);
        z-index: 1;
        pointer-events: none;
    }

    /* Portrait sketch — right-aligned, fills upper-right area */
    .hero__sketch {
        left: auto;
        right: 0;
        top: 8.5vh;
        width: 48vw;    /* portrait image shows well at this width */
        height: 70vh;
        transform: none;
        opacity: 0.85;
        object-position: center top;
    }

    /* Image caption: pulled into flex flow between tagline and bottom caption */
    .hero__img-caption {
        position: relative;
        top: auto;
        bottom: auto;
        right: auto;
        left: auto;
        width: auto;
        max-width: 100%;
        min-width: 0;
        text-align: right;
        font-size: clamp(8px, 1.1vw, 10px);
        margin-bottom: 1.5vh;
        z-index: 2;
    }

    /* All text elements: escape absolute, join flex flow */
    .hero__title,
    .hero__body,
    .hero__tagline,
    .hero__caption {
        position: relative;
        left: auto;
        top: auto;
        right: auto;
        z-index: 2;
        min-width: 0;
        width: auto;
    }

    .hero__title {
        font-size: clamp(48px, 8vw, 80px);
        white-space: normal;
        margin-bottom: 3vh;
    }

    .hero__body {
        font-size: clamp(11px, 1.5vw, 14px);
        line-height: 1.65;
        max-width: 46ch;
        margin-bottom: 2.5vh;
    }

    .hero__tagline {
        font-size: clamp(18px, 2.5vw, 28px);
        letter-spacing: 0.14em;
        margin-bottom: 2.5vh;
    }

    .hero__caption {
        text-align: left;
        font-size: clamp(10px, 1.1vw, 12px);
    }

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

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


/* =============================================================
   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 8.85vw 0 8.28vw;
    height: 7.61vh;
    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(10px, 0.81vw, 14px);
    letter-spacing: 0.06em;
    color: rgba(0, 0, 0, 0.85);
    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;
}

/* 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: 700;
    color: #000;
}

/* ——— Global two-column layout ——— */
.about-layout {
    display: grid;
    grid-template-columns: clamp(220px, 26vw, 450px) 1fr;
    flex: 1;
    align-items: start;
}

/* ——— Sticky sidebar ——— */
.about-sidebar {
    position: sticky;
    top: max(56px, 7.61vh);
    align-self: start;
    height: fit-content;
    padding-left: 8.28vw;
    padding-top: clamp(56px, 7vh, 112px);
    padding-bottom: clamp(56px, 7vh, 112px);
}

/* ——— Sidebar navigation ——— */
.about-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: clamp(14px, 2.5vh, 32px);
}

.about-nav__link {
    display: block;
    font-family: 'Intel One Mono', monospace;
    font-weight: 700;
    font-style: normal;
    font-size: clamp(15px, 1.35vw, 23px);
    line-height: 1.3;
    text-align: right;
    color: rgba(0, 0, 0, 0.28);
    text-decoration: none;
    /* Section links start hidden; revealed progressively via JS */
    opacity: 0;
    transform: translateY(10px);
    transition: color 0.2s ease, opacity 0.45s ease, transform 0.45s ease;
}

.about-nav__link:hover {
    color: rgba(0, 0, 0, 0.65);
}

.about-nav__link.is-active {
    color: #000;
}

/* Revealed once the section has been scrolled to — stays visible */
.about-nav__link.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ——— ABOUT — large page-title link ——— */
.about-nav__link--title {
    font-size: clamp(44px, 5.5vw, 95px);
    font-weight: 300;
    line-height: 1;
    text-align: left;
    align-self: flex-start;
    color: rgba(0, 0, 0, 0.72);
    margin-bottom: clamp(20px, 3vh, 44px);
    /* ABOUT title is always visible — override the hidden default */
    opacity: 1;
    transform: none;
}

.about-nav__link--title:hover {
    color: rgba(0, 0, 0, 0.85);
}

.about-nav__link--title.is-active {
    color: rgba(0, 0, 0, 0.85);
    /* keep 300 weight even when active — it's a display title */
    font-weight: 300;
}

/* ——— Scrolling content column ——— */
.about-content {
    padding-left: clamp(32px, 5vw, 80px);
    padding-right: 8.85vw;
}

/* ——— Sections — padding only, no borders ——— */
.about-section {
    padding-top: clamp(56px, 7vh, 108px);
    padding-bottom: clamp(56px, 7vh, 108px);
    scroll-margin-top: max(56px, 7.61vh);
}

/* ——— Intro layout: text left, diagram right ——— */
.about-intro__inner {
    display: flex;
    align-items: flex-start;
    gap: clamp(32px, 4vw, 80px);
}

.about-intro__text {
    flex: 1 1 auto;
    min-width: 0;
    max-width: clamp(240px, 25vw, 420px);
}

.about-intro__lead {
    font-family: 'Intel One Mono', monospace;
    font-weight: 700;
    font-style: normal;
    font-size: clamp(12px, 0.93vw, 16px);
    line-height: 1.6;
    color: #000;
    margin-bottom: 1.4em;
}

.about-intro__body {
    font-family: 'Intel One Mono', monospace;
    font-weight: 300;
    font-style: normal;
    font-size: clamp(11px, 0.75vw, 13px);
    line-height: 1.75;
    color: rgba(0, 0, 0, 0.82);
}

.about-intro__body strong {
    font-weight: 700;
}

.about-intro__diagram {
    flex: 0 0 auto;
    width: clamp(300px, 28vw, 480px);
}

.about-intro__diagram img {
    width: 100%;
    height: auto;
    display: block;
}

/* ——— General section prose (Outlook, etc.) ——— */
.about-section > p {
    font-family: 'Intel One Mono', monospace;
    font-weight: 300;
    font-style: normal;
    font-size: clamp(11px, 0.75vw, 13px);
    line-height: 1.75;
    color: rgba(0, 0, 0, 0.82);
    max-width: 68ch;
}

.about-section > p + p {
    margin-top: 1.4em;
}

.about-section strong {
    font-weight: 700;
    color: #000;
}

/* Approach intro paragraph — same specificity weight, declared after,
   overrides max-width from .about-section > p */
p.about-section__lead {
    max-width: 72ch;
    margin-bottom: 2em;
}

/* ——— Accordion ——— */
.accordion {
    border-top: 1px solid rgba(0, 0, 0, 0.14);
    max-width: clamp(360px, 42vw, 640px);
}

.accordion__item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.14);
}

.accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 18px 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: 'Intel One Mono', monospace;
    font-weight: 700;
    font-size: clamp(11px, 0.81vw, 14px);
    line-height: 1.2;
    color: #000;
    gap: 16px;
    transition: opacity 0.15s ease;
}

.accordion__trigger:hover { opacity: 0.65; }
.accordion__trigger:focus-visible {
    outline: 2px solid rgba(0, 0, 0, 0.5);
    outline-offset: 2px;
}

.accordion__label {
    display: flex;
    align-items: baseline;
    gap: 1.5em;
}

.accordion__num {
    font-weight: 700;
    opacity: 0.75;
    min-width: 2em;
    flex-shrink: 0;
}

.accordion__icon {
    font-size: 15px;
    font-weight: 300;
    line-height: 1;
    flex-shrink: 0;
    opacity: 0.7;
    /* prevent layout shift when icon changes between +/− */
    min-width: 1em;
    text-align: center;
}

/* Smooth expand / collapse — CSS grid rows trick */
.accordion__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.32s ease;
}

.accordion__panel.is-open {
    grid-template-rows: 1fr;
}

.accordion__inner {
    overflow: hidden;
}

.accordion__inner p {
    padding-bottom: 22px;
    font-family: 'Intel One Mono', monospace;
    font-weight: 300;
    font-size: clamp(11px, 0.75vw, 13px);
    line-height: 1.75;
    color: rgba(0, 0, 0, 0.72);
    max-width: 64ch;
}

/* ——— Scope of works grid ——— */
.scope-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: clamp(48px, 5vw, 80px);
    column-gap: clamp(32px, 4vw, 64px);
    max-width: clamp(420px, 52vw, 760px);
}

.scope-item__fig {
    width: 100%;
    margin-bottom: 18px;
}

.scope-item__fig img {
    width: 100%;
    height: auto;
    display: block;
    opacity: 0.88;
    transition: opacity 0.3s ease;
}

.scope-item__fig img:hover { opacity: 1; }

.scope-item__title {
    font-family: 'Intel One Mono', monospace;
    font-weight: 700;
    font-style: normal;
    font-size: clamp(11px, 0.81vw, 14px);
    line-height: 1.4;
    color: #000;
    margin-bottom: 10px;
}

.scope-item__desc {
    font-family: 'Intel One Mono', monospace;
    font-weight: 300;
    font-style: normal;
    font-size: clamp(10px, 0.69vw, 12px);
    line-height: 1.8;
    color: rgba(0, 0, 0, 0.72);
}

.scope-item__desc strong { font-weight: 700; }

/* ——— Mobile page title "ABOUT" ————————————————————————————
   Mirrors the sidebar .about-nav__link--title on small screens.
   Hidden on desktop where the sidebar carries the title.        */
.about-page__title {
    display: none;
    font-family: 'Intel One Mono', monospace;
    font-weight: 300;
    font-size: clamp(44px, 14vw, 80px);
    line-height: 1;
    color: rgba(0, 0, 0, 0.72);
    margin-bottom: clamp(24px, 4vh, 40px);
    letter-spacing: -0.01em;
}

@media (max-width: 1023px) {
    .about-page__title { display: block; }
}

/* ——— Inline section headings (mobile/tablet only) ——————————
   On desktop the sidebar carries all section titles.
   On tablet/mobile the sidebar is hidden, so we show a heading
   at the top of each section instead.                          */
.about-section__heading {
    display: none; /* hidden on desktop — sidebar handles titles */
    font-family: 'Intel One Mono', monospace;
    font-weight: 700;
    font-size: clamp(22px, 5vw, 36px);
    line-height: 1.1;
    color: rgba(0, 0, 0, 0.72);
    margin-bottom: clamp(20px, 4vh, 36px);
}

@media (max-width: 1023px) {
    .about-section__heading { display: block; }
}

/* ——— Contact ——— */
.contact-block {
    font-style: normal;
    font-family: 'Intel One Mono', monospace;
    font-weight: 300;
    font-size: clamp(11px, 0.75vw, 13px);
    line-height: 2.1;
    color: rgba(0, 0, 0, 0.82);
}

.contact-block__name {
    font-weight: 700;
}

.contact-block a {
    color: inherit;
    text-decoration: none;
}

.contact-block a:hover { text-decoration: underline; }

/* ——— About page footer bar ——— */
.about-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.14);
    padding: 22px 8.85vw 24px 8.28vw;
    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;
}

.about-footer strong {
    font-weight: 700;
    font-size: clamp(12px, 0.81vw, 14px);
}


/* =============================================================
   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;
    }

    /* Sidebar: hidden on tablet/mobile */
    .about-sidebar {
        display: none;
    }

    /* Layout: single column */
    .about-layout {
        grid-template-columns: 1fr;
    }

    /* Content uses full-width with page margins */
    .about-content {
        padding-left: 8vw;
        padding-right: 8vw;
    }

    /* Intro: diagram wraps below text on narrow screens */
    .about-intro__inner {
        flex-wrap: wrap;
    }

    .about-intro__diagram {
        width: clamp(220px, 50vw, 340px);
        margin: 0 auto;
    }

    .about-footer {
        padding-left: 8vw;
        padding-right: 8vw;
    }
}


/* =============================================================
   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: 0 24px max(32px, env(safe-area-inset-bottom, 0px));
        min-height: 100svh;
    }

    .hero::after {
        height: 65%;
        background: linear-gradient(to top, #fff 42%, transparent 100%);
    }

    /* Portrait image — more generous on narrow screens */
    .hero__sketch {
        width: 62vw;
        height: 60vh;
        top: 6.5vh;
        opacity: 0.8;
    }

    /* Image caption: hidden on small mobile — sketch context is clear enough */
    .hero__img-caption {
        display: none;
    }

    .hero__title {
        font-size: clamp(44px, 13vw, 62px);
        margin-bottom: 16px;
    }

    .hero__body {
        font-size: clamp(11px, 3.5vw, 13px);
        line-height: 1.65;
        max-width: 100%;
        margin-bottom: 14px;
    }

    .hero__tagline {
        font-size: clamp(16px, 5.8vw, 22px);
        letter-spacing: 0.08em;
        margin-bottom: 14px;
    }

    .hero__caption {
        font-size: clamp(9px, 2.8vw, 11px);
        color: rgba(0, 0, 0, 0.6);
    }

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

    /* 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;
    }

    .about-intro__lead  { font-size: clamp(13px, 3.6vw, 16px); }
    .about-intro__body  { font-size: clamp(11px, 2.8vw, 13px); }

    .about-section > p,
    p.about-section__lead,
    .accordion__inner p { font-size: clamp(11px, 2.8vw, 13px); }

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

    .accordion__trigger  { font-size: clamp(12px, 3.2vw, 14px); }
    .accordion__inner p  { font-size: clamp(12px, 3vw, 13px); }

    .scope-item__title   { font-size: clamp(12px, 3.2vw, 14px); }
    .scope-item__desc    { font-size: clamp(11px, 2.8vw, 13px); }

    .contact-block       { font-size: clamp(12px, 3vw, 14px); }

    .about-footer {
        padding-left: 24px;
        padding-right: 24px;
        text-align: left;
    }

    .about-footer,
    .about-footer strong { font-size: clamp(10px, 2.8vw, 12px); }
}