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

/* ——— 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 ——— */
.site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

/* 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 — Figma: y=85px */
.header-divider {
    position: absolute;
    top: 7.61vh;
    left: 0;
    right: 0;
    height: 1px;
    background: #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;
    }
}


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