@font-face {
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("fonts/source-sans-3/source-sans-3-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("fonts/source-sans-3/source-sans-3-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Source Sans 3";
    font-style: italic;
    font-weight: 300 700;
    font-display: swap;
    src: url("fonts/source-sans-3/source-sans-3-latin-ext-italic.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Source Sans 3";
    font-style: italic;
    font-weight: 300 700;
    font-display: swap;
    src: url("fonts/source-sans-3/source-sans-3-latin-italic.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --nav-height: 72px;
    --nav-font-size: 0.96875rem;
    --card: #f5f4ef;
    --ring: #c96442;
    --input: #b4b2a7;
    --muted: #ede9de;
    --accent: #e9e6dc;
    --border: #dad9d4;
    --radius: 1rem;
    --chart-1: #b05730;
    --chart-2: #9c87f5;
    --chart-3: #ded8c4;
    --chart-4: #dbd3f0;
    --chart-5: #b4552d;
    --popover: #ffffff;
    --primary: #c96442;
    --sidebar: #f5f4ee;
    --spacing: 0.25rem;
    --font-mono: var(--font-sans);
    --font-sans-en: "Source Sans 3", "Source Sans Pro", Helvetica, sans-serif;
    --font-sans-zh: Helvetica, "Microsoft YaHei New", "Microsoft YaHei", SimSun, STXihei, sans-serif;
    --font-sans: var(--font-sans-en);
    --secondary: #e9e6dc;
    --background: #faf9f5;
    --font-serif: var(--font-sans);
    --foreground: #3d3929;
    --destructive: #141413;
    --shadow-blur: 3px;
    --shadow-color: oklch(0 0 0);
    --sidebar-ring: #b5b5b5;
    --shadow-spread: 0px;
    --letter-spacing: 0em;
    --shadow-opacity: 0.1;
    --sidebar-accent: #e9e6dc;
    --sidebar-border: #ebebeb;
    --card-foreground: #141413;
    --shadow-offset-x: 0;
    --shadow-offset-y: 1px;
    --sidebar-primary: #c96442;
    --muted-foreground: #6e6d68;
    --accent-foreground: #28261b;
    --popover-foreground: #28261b;
    --primary-foreground: #ffffff;
    --sidebar-foreground: #3d3d3a;
    --secondary-foreground: #535146;
    --destructive-foreground: #ffffff;
    --sidebar-accent-foreground: #343434;
    --sidebar-primary-foreground: #fbfbfb;
    --ink: var(--foreground);
    --line: var(--border);
    --paper: var(--background);
    --soft: var(--card);
    --site-accent: var(--primary);
}

.dark {
    --card: #2c2c2b;
    --ring: #d97757;
    --input: #52514a;
    --muted: #1b1b19;
    --accent: #1a1915;
    --border: #3e3e38;
    --radius: 1rem;
    --chart-1: #b05730;
    --chart-2: #9c87f5;
    --chart-3: #1a1915;
    --chart-4: #2f2b48;
    --chart-5: #b4552d;
    --popover: #30302e;
    --primary: #d97757;
    --sidebar: #1f1e1d;
    --spacing: 0.25rem;
    --font-mono: var(--font-sans);
    --secondary: #faf9f5;
    --background: #262624;
    --font-serif: var(--font-sans);
    --foreground: #f1f1ef;
    --destructive: #ef4444;
    --shadow-blur: 3px;
    --shadow-color: oklch(0 0 0);
    --sidebar-ring: #b5b5b5;
    --shadow-spread: 0px;
    --letter-spacing: 0em;
    --shadow-opacity: 0.1;
    --sidebar-accent: #0f0f0e;
    --sidebar-border: #ebebeb;
    --card-foreground: #faf9f5;
    --shadow-offset-x: 0;
    --shadow-offset-y: 1px;
    --sidebar-primary: #343434;
    --muted-foreground: #b7b5a9;
    --accent-foreground: #f5f4ee;
    --popover-foreground: #e5e5e2;
    --primary-foreground: #141413;
    --sidebar-foreground: #c3c0b6;
    --secondary-foreground: #30302e;
    --destructive-foreground: #ffffff;
    --sidebar-accent-foreground: #c3c0b6;
    --sidebar-primary-foreground: #fbfbfb;
}

:root:lang(zh) {
    --font-sans: var(--font-sans-zh);
}

@theme inline {
    --color-card: var(--card);
    --color-ring: var(--ring);
    --color-input: var(--input);
    --color-muted: var(--muted);
    --color-accent: var(--accent);
    --color-border: var(--border);
    --color-radius: var(--radius);
    --color-chart-1: var(--chart-1);
    --color-chart-2: var(--chart-2);
    --color-chart-3: var(--chart-3);
    --color-chart-4: var(--chart-4);
    --color-chart-5: var(--chart-5);
    --color-popover: var(--popover);
    --color-primary: var(--primary);
    --color-sidebar: var(--sidebar);
    --color-spacing: var(--spacing);
    --color-font-mono: var(--font-mono);
    --color-font-sans: var(--font-sans);
    --color-secondary: var(--secondary);
    --color-background: var(--background);
    --color-font-serif: var(--font-serif);
    --color-foreground: var(--foreground);
    --color-destructive: var(--destructive);
    --color-shadow-blur: var(--shadow-blur);
    --color-shadow-color: var(--shadow-color);
    --color-sidebar-ring: var(--sidebar-ring);
    --color-shadow-spread: var(--shadow-spread);
    --color-letter-spacing: var(--letter-spacing);
    --color-shadow-opacity: var(--shadow-opacity);
    --color-sidebar-accent: var(--sidebar-accent);
    --color-sidebar-border: var(--sidebar-border);
    --color-card-foreground: var(--card-foreground);
    --color-shadow-offset-x: var(--shadow-offset-x);
    --color-shadow-offset-y: var(--shadow-offset-y);
    --color-sidebar-primary: var(--sidebar-primary);
    --color-muted-foreground: var(--muted-foreground);
    --color-accent-foreground: var(--accent-foreground);
    --color-popover-foreground: var(--popover-foreground);
    --color-primary-foreground: var(--primary-foreground);
    --color-sidebar-foreground: var(--sidebar-foreground);
    --color-secondary-foreground: var(--secondary-foreground);
    --color-destructive-foreground: var(--destructive-foreground);
    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    line-height: 1.55;
    letter-spacing: 0;
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
}

img {
    max-width: 100%;
}

.site-header {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    min-height: var(--nav-height);
    background: var(--background);
    border-bottom: 0;
    color: var(--ink);
    z-index: 2000;
    backdrop-filter: none;
}

.site-nav {
    width: 100%;
    min-height: var(--nav-height);
    height: auto;
    margin: 0 auto;
    padding: 0 34px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 22px;
}

.site-nav a {
    color: var(--ink);
    text-decoration: none;
    letter-spacing: 0;
}

.site-nav :is(a, button) {
    text-shadow: none;
    box-shadow: none;
    transform-origin: center;
    transition: transform 160ms ease;
}

.site-nav :is(a, button):is(:hover, :focus-visible) {
    transform: scale(1.04);
}

.site-nav :is(a, button):active {
    transform: scale(1.02);
}

.site-nav__separator {
    color: var(--foreground);
    font-size: var(--nav-font-size);
    font-weight: 400;
    line-height: 1;
    user-select: none;
    pointer-events: none;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: clamp(34px, 3.4vw, 48px);
    height: clamp(34px, 3.4vw, 48px);
}

.site-logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.site-brand:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 5px;
}

.site-links {
    width: auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(18px, 3.4vw, 42px);
}

.site-links a {
    position: relative;
    padding: 8px 0;
    color: var(--foreground);
    font-size: var(--nav-font-size);
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
}

.site-links a::after {
    display: none;
}

.language-toggle {
    appearance: none;
    border: 0;
    padding: 8px 0;
    background: transparent;
    color: var(--foreground);
    font: inherit;
    font-size: var(--nav-font-size);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: uppercase;
    text-align: right;
    cursor: pointer;
}

.hero {
    margin-top: 0;
}

.hero-content h1 {
    font-size: 3.5rem;
    line-height: 1;
    letter-spacing: 0;
}

.hero-content {
    width: min(100%, 820px);
    padding: 0 22px;
}

.hero .subtitle,
.hero .contact-info {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

body[data-section="home"] {
    background: var(--background);
    color: var(--ink);
}

body[data-section="home"] .site-header {
    height: auto;
    min-height: var(--nav-height);
    background: var(--background);
    border-bottom: 0;
    backdrop-filter: none;
}

body[data-section="home"] .site-brand {
    display: inline-flex;
}

body[data-section="home"] .site-nav {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
}

body[data-section="home"] .site-links {
    width: auto;
    justify-content: flex-end;
}

body[data-section="home"] .site-links a {
    color: var(--foreground);
    line-height: 1.4;
    text-transform: uppercase;
}

body[data-section="home"] .site-links a::after {
    display: none;
}

body[data-section="home"] .language-toggle {
    color: var(--foreground);
    line-height: 1.4;
}

:is(body[data-section="home"], body.interior-project-page) .site-header {
    position: absolute;
    top: 0;
    left: 0;
    background: transparent;
}

:is(body[data-section="home"], body.interior-project-page) .site-header :is(.site-links a, .language-toggle, .site-nav__separator) {
    color: var(--primary-foreground);
}

:is(body[data-section="home"], body.interior-project-page) .site-logo {
    filter: brightness(0) invert(1);
}

.home-main-hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    height: 100vh;
    height: 100svh;
    margin-top: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background: var(--background);
}

.home-main-hero .home-slideshow-viewport {
    height: 100%;
}

.home-main-hero .home-slideshow-track {
    height: 100%;
    align-items: stretch;
    gap: 0;
    animation-name: homeHeroSlideLoop;
    animation-duration: 41.8s;
}

.home-main-hero .home-slide {
    width: clamp(420px, 66vw, 1040px);
    height: 100%;
}

.home-main-hero .home-slide img {
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
}

.home-scroll-arrow {
    --arrow-hover-color: #000;
    position: absolute;
    left: 50%;
    bottom: clamp(28px, 5vh, 54px);
    z-index: 5;
    width: 46px;
    height: 46px;
    background: transparent;
    border: 0;
    transform: translateX(-50%);
    text-decoration: none;
    cursor: pointer;
    filter: none;
    box-shadow: none;
    text-shadow: none;
}

.home-scroll-arrow::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 8px;
    width: 28px;
    height: 28px;
    border-right: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
    filter: none;
    box-shadow: none;
    text-shadow: none;
    transform: translateX(-50%) rotate(45deg);
    animation: homeArrowPulse 1600ms ease-in-out infinite;
    transition: border-color 160ms ease;
}

.home-scroll-arrow[data-arrow-hovered]::before {
    border-color: var(--arrow-hover-color, #000);
}

.home-scroll-arrow:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 5px;
}

@keyframes homeArrowPulse {
    0%,
    100% {
        transform: translate(-50%, 0) rotate(45deg);
    }

    50% {
        transform: translate(-50%, 10px) rotate(45deg);
    }
}

body[data-section="home"] .content {
    margin-top: 0;
    padding: 0;
    background: var(--background);
    text-align: left;
}

body[data-section="home"] .center-photo {
    border-radius: 0;
    box-shadow: none;
}

body[data-section="home"] .center-paragraph {
    color: var(--secondary-foreground);
}

body[data-section="home"] .about-contact a {
    color: var(--foreground);
}

.home-showcase {
    padding: clamp(18px, 4vw, 52px) 0 clamp(84px, 10vw, 132px);
    background: var(--background);
    overflow: hidden;
}

.home-slideshow-viewport {
    width: 100%;
    overflow: hidden;
}

.home-slideshow-track {
    width: max-content;
    display: flex;
    align-items: flex-start;
    gap: clamp(18px, 2.4vw, 34px);
    animation: homeSlideLoop 41.8s linear infinite;
    will-change: transform;
}

.home-slide {
    width: clamp(280px, 38vw, 560px);
    margin: 0;
    flex: 0 0 auto;
}

.home-slide img {
    width: 100%;
    aspect-ratio: 3 / 2;
    display: block;
    object-fit: cover;
    background: var(--card);
}

@keyframes homeSlideLoop {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-50% - clamp(9px, 1.2vw, 17px)));
    }
}

@keyframes homeHeroSlideLoop {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-main-hero .home-slideshow-track,
    .home-slideshow-track,
    .home-scroll-arrow::before {
        animation: none;
    }

    .site-nav :is(a, button) {
        transition: none;
    }

    .home-scroll-arrow::before {
        transition: none;
    }
}

.about-contact {
    margin: 24px auto 0;
    max-width: 800px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    text-align: left;
}

.about-contact a {
    color: var(--foreground);
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0;
    text-decoration: none;
}

.about-editorial {
    --about-vellum: var(--background);
    --about-ink: var(--foreground);
    --about-graphite: var(--secondary-foreground);
    --about-stone: var(--muted-foreground);
    --about-ash: var(--border);
    --about-charcoal: var(--accent-foreground);
    color: var(--about-ink);
    background: var(--about-vellum);
}

.about-editorial__inner {
    width: min(100%, 1240px);
    margin: 0 auto;
    padding: clamp(84px, 10vw, 136px) clamp(22px, 5vw, 72px) clamp(72px, 8vw, 112px);
    display: grid;
    grid-template-columns: minmax(260px, 0.86fr) minmax(360px, 1.14fr);
    gap: clamp(34px, 6vw, 88px);
    align-items: center;
}

.about-editorial__media {
    position: relative;
    min-height: 420px;
}

.about-editorial__photo {
    width: min(42vw, 470px);
    max-height: 720px;
    aspect-ratio: 3 / 4;
    display: block;
    object-fit: cover;
    object-position: center 34%;
    border-radius: 3px;
    filter: saturate(0.82) contrast(0.96);
}

.about-editorial__label {
    margin: 0 0 22px;
    color: var(--about-stone);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.about-editorial__copy {
    position: relative;
    z-index: 1;
    max-width: 690px;
}

.about-editorial__copy p:not(.about-editorial__label) {
    max-width: 640px;
    margin: 0 0 22px;
    color: var(--about-graphite);
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.58;
}

.about-editorial .about-contact {
    margin: 34px 0 0;
    width: 100%;
    max-width: 640px;
    justify-content: space-between;
    align-items: center;
    padding-top: 18px;
    border-top: 1px solid var(--about-ash);
    gap: 12px 28px;
}

.about-editorial .about-contact a {
    max-width: 100%;
    overflow-wrap: anywhere;
    color: var(--about-ink);
    font-size: 0.86rem;
    letter-spacing: 0.02em;
}

.about-resume {
    width: min(100%, 1240px);
    margin: 0 auto;
    padding: 0 clamp(22px, 5vw, 72px) clamp(94px, 11vw, 150px);
    display: grid;
    grid-template-columns: minmax(210px, 300px) minmax(0, 1fr);
    gap: clamp(34px, 5vw, 72px);
    align-items: start;
}

.about-resume__heading {
    position: sticky;
    top: calc(var(--nav-height) + 38px);
}

.about-resume__heading h2 {
    margin: 0 0 24px;
    color: var(--about-charcoal);
    font-family: var(--font-sans);
    font-size: clamp(1.65rem, 2.5vw, 2.35rem);
    font-weight: 400;
    line-height: 1.18;
}

.about-resume__button {
    display: inline-block;
    padding: 9px 16px;
    border-radius: 3px;
    background: var(--primary);
    color: var(--primary-foreground);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
}

.about-resume__button:hover {
    background: var(--foreground);
}

.about-resume__entries {
    border-top: 1px solid var(--about-ash);
}

.resume-entry {
    display: grid;
    grid-template-columns: 122px minmax(0, 1fr);
    gap: 28px;
    padding: 26px 0;
    border-bottom: 1px solid var(--about-ash);
}

.resume-entry > p {
    margin: 4px 0 0;
    color: var(--about-stone);
    font-size: 0.86rem;
    line-height: 1.45;
}

.resume-entry h3 {
    margin: 0 0 8px;
    color: var(--about-charcoal);
    font-family: var(--font-sans);
    font-size: clamp(1.18rem, 1.7vw, 1.42rem);
    font-weight: 400;
    line-height: 1.35;
}

.resume-entry div p {
    max-width: 680px;
    margin: 0;
    color: var(--about-graphite);
    font-size: clamp(0.95rem, 1.2vw, 1.04rem);
    line-height: 1.56;
}

.about-resume__preview {
    grid-column: 2;
    margin-top: 30px;
}

.about-resume__preview img {
    width: min(100%, 760px);
    display: block;
    border: 1px solid var(--about-ash);
    border-radius: 3px;
    background: var(--popover);
}

.container {
    width: 100%;
    margin-top: var(--nav-height);
    display: grid;
    grid-template-columns: minmax(230px, 282px) minmax(0, 1fr);
    align-items: start;
}

body[data-section="projects"] .container {
    display: block;
}

body[data-section="projects"] .project-index {
    display: none;
}

.side-selector,
.fixed-selector-bar {
    position: sticky;
    top: var(--nav-height);
    left: auto;
    width: auto;
    min-height: calc(100vh - var(--nav-height));
    height: calc(100vh - var(--nav-height));
    overflow-y: auto;
    padding: 42px 26px;
    background: var(--sidebar);
    border-right: 1px solid var(--line);
    z-index: 100;
}

.side-label {
    margin: 0 0 24px;
    color: var(--muted-foreground);
    font-size: 0.78rem;
    font-weight: 700;
}

.side-selector a,
.fixed-selector-bar a {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: baseline;
    gap: 10px;
    margin: 0;
    padding: 11px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
    color: var(--muted-foreground);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.25;
    text-decoration: none;
    transition: color 160ms ease, border-color 160ms ease;
}

.side-selector a span,
.fixed-selector-bar a span {
    color: var(--muted-foreground);
    font-size: 0.74rem;
}

.side-selector a:hover,
.fixed-selector-bar a:hover,
.side-selector a.is-current,
.fixed-selector-bar a.is-current,
.side-selector a[style*="font-weight: bold"] {
    color: var(--ink);
    border-color: var(--primary);
}

.main-body {
    width: 100%;
    max-width: 1240px;
    margin-left: 0;
    padding: 46px 46px 72px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

body[data-section="projects"] .main-body.project-gallery {
    max-width: 1240px;
    margin: 0 auto;
    padding: 46px clamp(20px, 5vw, 72px) 72px;
}

.project-back-link {
    position: static;
    top: auto;
    z-index: 60;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    margin: 0 0 18px;
    padding: 4px 0;
    color: var(--primary);
    background: var(--background);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
}

.project-back-link:hover {
    color: var(--foreground);
}

.project-hero {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(260px, 1.1fr);
    gap: 36px;
    align-items: end;
    padding: 0 0 34px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--line);
}

.project-kicker {
    margin: 0 0 12px;
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 700;
}

.project-hero h1 {
    margin: 0;
    font-size: 2.8rem;
    line-height: 1.05;
    font-weight: 500;
    letter-spacing: 0;
}

.project-summary {
    max-width: 560px;
    margin: 0;
    color: var(--muted-foreground);
    font-size: 1rem;
}

.main-body > img,
.main-body .image-row,
.main-body .two-images-same-size {
    width: 100%;
    max-width: none;
    margin: 0;
}

.main-body > img {
    display: block;
    height: auto;
    background: var(--soft);
}

.project-gallery > img:first-of-type {
    width: 100%;
    max-height: none;
}

.image-row,
.two-images-same-size {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    align-items: start;
}

.image-row img,
.two-images-same-size img {
    width: 100%;
    height: auto;
    max-width: none;
    margin: 0;
    object-fit: contain;
    background: var(--soft);
}

.thesis-book {
    gap: clamp(42px, 7vw, 88px);
}

.thesis-book img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.thesis-title-spread {
    min-height: min(620px, calc(100vh - var(--nav-height) - 120px));
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.84fr);
    align-items: center;
    gap: clamp(48px, 8vw, 128px);
    padding: clamp(58px, 9vw, 118px) 0;
    border-bottom: 1px solid var(--border);
}

.thesis-title-spread h1 {
    max-width: 560px;
    margin: 0;
    font-size: clamp(2.2rem, 4vw, 4.65rem);
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: 0;
    text-transform: uppercase;
}

.thesis-title-spread p {
    max-width: 480px;
    margin: 18px 0 0;
    color: var(--muted-foreground);
    font-size: clamp(1rem, 1.8vw, 1.32rem);
    line-height: 1.35;
}

.thesis-title-meta {
    margin-top: clamp(44px, 7vw, 96px);
    align-self: end;
    display: grid;
    gap: 16px;
    color: var(--foreground);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.35;
    text-transform: uppercase;
}

.thesis-title-meta span {
    display: block;
}

.thesis-chapter {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(280px, 1.1fr);
    gap: clamp(36px, 7vw, 118px);
    align-items: center;
    min-height: 330px;
    padding: clamp(44px, 7vw, 92px) 0;
    border-top: 1px solid var(--border);
}

.thesis-chapter h2 {
    margin: 0;
    font-size: clamp(1.4rem, 2.5vw, 2.35rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: 0;
    text-transform: uppercase;
}

.thesis-chapter p,
.thesis-copy p {
    margin: 0;
    color: var(--foreground);
    font-size: 0.98rem;
    line-height: 1.72;
}

.thesis-copy {
    display: grid;
    gap: 18px;
}

.thesis-spread {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(34px, 6vw, 92px);
    align-items: center;
}

.thesis-spread--top {
    align-items: start;
}

.thesis-spread--reverse > :first-child {
    order: 2;
}

.thesis-spread--reverse > :last-child {
    order: 1;
}

.thesis-figure,
.thesis-figure-stack,
.thesis-plate {
    margin: 0;
}

.thesis-figure {
    display: grid;
    gap: 8px;
}

.thesis-figure-stack {
    display: grid;
    gap: clamp(20px, 3vw, 34px);
}

.thesis-caption {
    color: var(--muted-foreground);
    font-size: 0.72rem;
    line-height: 1.35;
}

.thesis-small-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 2.4vw, 28px);
    align-items: start;
}

.thesis-map-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2.8vw, 34px);
    align-items: start;
}

.thesis-design-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2.8vw, 34px);
    align-items: start;
}

.thesis-wide-plate {
    margin: 0;
    display: grid;
    gap: 10px;
}

.thesis-wide-plate img {
    max-height: 76vh;
}

.thesis-section-label {
    margin: 0 0 18px;
    color: var(--primary);
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.35;
    text-transform: uppercase;
}

.thesis-site-block {
    display: grid;
    gap: clamp(24px, 4vw, 48px);
    padding-top: clamp(24px, 5vw, 66px);
    border-top: 1px solid var(--border);
}

.thesis-site-block h3 {
    margin: 0 0 16px;
    font-size: clamp(1.45rem, 2.4vw, 2.1rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
}

.thesis-site-block .thesis-copy {
    max-width: 560px;
}

.thesis-model-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 22px);
    align-items: start;
}

.thesis-render-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 3vw, 36px);
}

main {
    color: var(--ink);
}

.architecture-index-page {
    --arch-canvas: var(--background);
    --arch-ink: var(--foreground);
    --arch-graphite: var(--secondary-foreground);
    --arch-ash: var(--muted-foreground);
    --tile-bg: var(--secondary);
    background: var(--arch-canvas);
    color: var(--arch-ink);
}

.architecture-index-page .site-header {
    background: var(--arch-canvas);
}

.architecture-index {
    margin-top: var(--nav-height);
    min-height: calc(100vh - var(--nav-height));
    padding: 34px clamp(20px, 4.8vw, 72px) clamp(96px, 10vw, 150px);
    background: var(--arch-canvas);
}

.architecture-intro {
    min-height: clamp(280px, 36vw, 430px);
    display: grid;
    place-items: center;
    padding: clamp(54px, 8vw, 96px) 0 clamp(62px, 9vw, 122px);
}

.architecture-intro p {
    max-width: 640px;
    margin: 0 auto;
    color: var(--arch-graphite);
    font-size: clamp(1.1rem, 2.1vw, 1.5rem);
    font-weight: 400;
    line-height: 1.22;
    text-align: center;
}

.architecture-projects {
    width: 100%;
}

.architecture-section-heading {
    margin-bottom: clamp(56px, 8vw, 122px);
}

.architecture-section-heading p {
    margin: 0;
    color: var(--arch-ash);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.038em;
}

.architecture-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(44px, 5vw, 74px) clamp(24px, 4.6vw, 65px);
}

.architecture-card {
    display: block;
    color: var(--arch-ink);
    text-decoration: none;
}

.architecture-card__visual {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    display: block;
    border-radius: 0;
    background: var(--tile-bg);
    overflow: hidden;
}

.architecture-card__preview {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    width: min(72%, 390px);
    aspect-ratio: 4 / 3;
    display: block;
    object-fit: cover;
    border-radius: 0;
    background: var(--popover);
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.92);
    transition: transform 180ms ease;
}

/* Viewports center the ink; index thumbnail scale and weight match Complicating The Line. */
.architecture-cover-sketch {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #fff;
}

.architecture-card__preview--ink-frame {
    overflow: hidden;
}

.architecture-card__preview--ink-frame > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Expand only the transparent sketch's ink; keep the card's white matte outside the filter. */
.brick-curves-sketch-ink {
    filter: drop-shadow(0.3px 0 0 rgb(0 0 0 / 55%))
        drop-shadow(-0.3px 0 0 rgb(0 0 0 / 55%))
        drop-shadow(0 0.3px 0 rgb(0 0 0 / 55%))
        drop-shadow(0 -0.3px 0 rgb(0 0 0 / 55%));
}

.architecture-card:hover .architecture-card__preview,
.architecture-card:focus-visible .architecture-card__preview {
    transform: translate(-50%, -50%) scale(1.04);
}

.architecture-card__preview--placeholder {
    display: grid;
    place-items: center;
    color: color-mix(in srgb, var(--foreground) 64%, transparent);
    font-family: var(--font-sans);
    font-size: clamp(1.2rem, 2vw, 2rem);
    letter-spacing: 0.02em;
    text-align: center;
    text-transform: uppercase;
}

.architecture-card:hover .architecture-card__visual,
.architecture-card:focus-visible .architecture-card__visual {
    box-shadow: none;
}

.architecture-card__meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 16px;
    padding-top: 14px;
    color: var(--arch-ink);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.35;
}

.architecture-card__meta > span:first-child {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.architecture-card__meta > span:last-child:not(:only-child) {
    color: var(--arch-ash);
    white-space: nowrap;
}

.architecture-card__meta > span:only-child {
    grid-column: 1 / -1;
}

.architecture-card__separator,
.architecture-card__type {
    color: var(--arch-ash);
}

body[data-section="others"] main {
    margin-top: var(--nav-height);
}

body.art-index-page .architecture-index {
    margin-top: var(--nav-height);
}

body[data-section="others"] .fixed-selector-bar ~ main {
    margin-top: var(--nav-height);
    margin-left: 0;
    padding: 46px;
}

body[data-section="others"] .fixed-selector-bar {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    width: 230px;
    min-height: calc(100vh - var(--nav-height));
    height: calc(100vh - var(--nav-height));
    display: block;
}

body[data-section="others"] .fixed-selector-bar ~ main {
    margin-left: 230px;
}

body[data-section="others"] .fixed-selector-bar a {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: baseline;
    gap: 10px;
    margin: 0;
    padding: 11px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
    color: var(--muted-foreground);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.25;
    text-decoration: none;
}

body[data-section="others"] .fixed-selector-bar a:hover,
body[data-section="others"] .fixed-selector-bar a.is-current {
    color: var(--ink);
    border-color: var(--primary);
}

.other-works-index {
    max-width: 1180px;
}

.other-works-hero {
    margin-bottom: 46px;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--line);
}

.other-works-hero h1 {
    margin: 0;
    font-size: clamp(3rem, 7vw, 6rem);
    line-height: 0.95;
    font-weight: 600;
    letter-spacing: 0;
}

.other-work-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 52px 38px;
}

.other-work-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px 18px;
    color: var(--ink);
    text-decoration: none;
}

.other-work-card img {
    grid-column: 1 / -1;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--soft);
}

.other-work-card span {
    color: var(--muted-foreground);
    font-size: 0.8rem;
    font-weight: 700;
}

.other-work-card h2 {
    margin: 0;
    font-family: inherit;
    font-size: 1.5rem;
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: 0;
}

.other-work-card p {
    grid-column: 2;
    margin: -4px 0 0;
    color: var(--muted-foreground);
    font-size: 0.86rem;
    line-height: 1.35;
}

.other-work-card:hover h2 {
    color: var(--primary);
}

.drawing-work-page,
.fabric-work-page {
    background: var(--background);
}

.drawing-work-page .site-header,
.fabric-work-page .site-header {
    background: var(--background);
}

body[data-section="others"] .drawing-work,
body[data-section="others"] .fabric-work {
    margin-top: var(--nav-height);
    margin-left: 230px;
    padding: 76px 4vw 120px;
}

.drawing-work .grid-container {
    max-width: 1180px;
    margin: 0 auto 42px;
    padding: 0;
    gap: 42px 28px;
}

.drawing-work .grid-item img {
    width: 100%;
    max-width: none;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
    background: var(--soft);
}

.drawing-work .grid-item .image-title {
    margin-top: 12px;
    color: var(--ink);
    font-size: 0.86rem;
    font-weight: 600;
    text-align: left;
}

.drawing-work .grid-item .image-title a {
    color: inherit;
}

.drawing-wall {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 48px 28px;
    max-width: 1480px;
    margin: 0 auto;
}

.drawing-card {
    width: min(100%, 390px);
    margin: 0;
    justify-self: center;
    color: var(--ink);
}

.drawing-card.is-landscape {
    grid-column: 1 / -1;
    width: min(100%, 520px);
    justify-self: start;
}

.drawing-card.is-landscape:nth-child(even) {
    justify-self: end;
}

.drawing-wall.is-positioned {
    display: block;
}

.drawing-wall.is-positioned .drawing-card {
    position: absolute;
}

.drawing-card > a {
    display: block;
}

.drawing-card > a:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 6px;
}

.drawing-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    border-radius: 0;
    box-shadow: none;
}

.drawing-card figcaption {
    padding-top: 12px;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.25;
}

.fabric-work .project-image {
    width: 100%;
    max-width: 980px;
    margin: 0 auto 28px;
    border-radius: 0;
    box-shadow: none;
    background: var(--soft);
}

.collage-work-page {
    background: var(--background);
}

.collage-work-page .site-header {
    background: var(--background);
}

.collage-work {
    margin-top: var(--nav-height);
    margin-left: 230px;
    padding: 76px 4vw 120px;
}

.other-work-detail-hero {
    display: block;
    max-width: 1480px;
    margin: 0 auto 56px;
}

.collage-section-label {
    margin: 0;
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 700;
}

.collage-back-link {
    width: fit-content;
    text-decoration: none;
}

.collage-back-link:hover {
    color: var(--ink);
}

.other-work-detail-hero h1 {
    margin: 18px 0 0;
    font-family: inherit;
    font-size: clamp(4rem, 8vw, 7rem);
    line-height: 0.9;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.other-work-detail-description {
    max-width: 580px;
    margin: 18px 0 0;
    color: var(--muted-foreground);
    font-size: 0.95rem;
    line-height: 1.6;
}

.collage-filter {
    max-width: 1480px;
    margin: 0 auto 54px;
    display: flex;
    flex-wrap: wrap;
    gap: 18px 30px;
    align-items: center;
}

.collage-filter button {
    position: relative;
    border: 0;
    padding: 0 0 0 14px;
    background: transparent;
    color: var(--muted-foreground);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

.collage-filter button::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    transform: translateY(-50%);
    opacity: 0;
}

.collage-filter button:hover,
.collage-filter button.is-active {
    color: var(--ink);
}

.collage-filter button.is-active::before {
    opacity: 1;
    background: var(--primary);
}

.collage-wall {
    max-width: 1480px;
    margin: 0 auto;
    position: relative;
    min-height: 10480px;
    display: block;
}

.collage-card {
    position: absolute;
    width: min(24vw, 340px);
    margin: 0;
    color: var(--ink);
}

.collage-card[hidden] {
    display: none;
}

.collage-card.span-3 {
    grid-column: span 3;
}

.collage-card.span-4 {
    grid-column: span 4;
}

.collage-card.push-right {
    grid-column-end: -1;
}

.collage-card.push-left {
    grid-column-start: 2;
}

.collage-card.pull-up-sm {
    margin-top: -28px;
}

.collage-card.pull-down-sm {
    margin-top: 34px;
}

.collage-card.pull-down-md {
    margin-top: 72px;
}

.collage-card.pull-down-lg {
    margin-top: 116px;
}

.collage-card:nth-child(1) {
    top: 0;
    left: 7%;
    width: min(36vw, 520px);
}

.collage-card:nth-child(2) {
    top: 830px;
    left: 50%;
    width: min(30vw, 440px);
}

.collage-card:nth-child(3) {
    top: 1550px;
    right: 7%;
    width: min(30.8vw, 440px);
}

.collage-card:nth-child(4) {
    top: 2050px;
    left: 14%;
    width: min(31.9vw, 462px);
}

.collage-card:nth-child(5) {
    top: 2570px;
    right: 12%;
    width: min(33vw, 473px);
}

.collage-card:nth-child(6) {
    top: 3100px;
    left: 38%;
    width: min(39.6vw, 572px);
}

.collage-card:nth-child(7) {
    top: 3730px;
    left: 6%;
    width: min(31.9vw, 462px);
}

.collage-card:nth-child(8) {
    top: 4210px;
    left: 56%;
    width: min(31.9vw, 462px);
}

.collage-card:nth-child(9) {
    top: 4720px;
    left: 24%;
    width: min(30vw, 440px);
}

.collage-card:nth-child(10) {
    top: 5530px;
    right: 5%;
    width: min(40.7vw, 594px);
}

.collage-card:nth-child(11) {
    top: 5990px;
    left: 10%;
    width: min(32vw, 460px);
}

.collage-card:nth-child(12) {
    top: 6710px;
    left: 48%;
    width: min(30vw, 430px);
}

.collage-card:nth-child(13) {
    top: 7580px;
    right: 12%;
    width: min(31.9vw, 462px);
}

.collage-card:nth-child(14) {
    top: 7880px;
    left: 5%;
    width: min(41.8vw, 616px);
}

.collage-card:nth-child(15) {
    top: 8510px;
    left: 52%;
    width: min(33vw, 473px);
}

.collage-card:nth-child(16) {
    top: 9070px;
    right: 6%;
    width: min(30vw, 440px);
}

.collage-card:nth-child(17) {
    top: 9810px;
    left: 28%;
    width: min(31.9vw, 462px);
}

.collage-card img {
    width: 100%;
    display: block;
    background: var(--muted);
    object-fit: cover;
}

.collage-card figcaption {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding-top: 12px;
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.25;
}

.collage-card figcaption span:last-child {
    color: var(--muted-foreground);
    font-weight: 600;
    white-space: nowrap;
}

.photography-work-page {
    background: var(--background);
}

.photography-work-page .site-header {
    background: var(--background);
}

.photography-work {
    margin-top: var(--nav-height);
    margin-left: 230px;
    padding: 76px 4vw 120px;
}

.photography-hero {
    display: block;
}

.photography-wall {
    max-width: 1480px;
    min-height: 23000px;
    margin: 0 auto;
    position: relative;
    display: block;
}

.photography-card {
    position: absolute;
    width: min(32vw, 460px);
    margin: 0;
    color: var(--ink);
}

.photography-card[hidden] {
    display: none;
}

.photography-card:nth-child(1) {
    top: 0;
    left: 7%;
    width: min(37.4vw, 550px);
}

.photography-card:nth-child(2) {
    top: 700px;
    left: 52%;
    width: min(33vw, 473px);
}

.photography-card:nth-child(3) {
    top: 1220px;
    left: 14%;
    width: min(34.1vw, 495px);
}

.photography-card:nth-child(4) {
    top: 1760px;
    right: 6%;
    width: min(37.4vw, 550px);
}

.photography-card:nth-child(5) {
    top: 2340px;
    left: 38%;
    width: min(30vw, 430px);
}

.photography-card:nth-child(6) {
    top: 3040px;
    left: 5%;
    width: min(34vw, 500px);
}

.photography-card:nth-child(7) {
    top: 2680px;
    left: 57%;
    width: min(30vw, 430px);
}

.photography-card:nth-child(8) {
    top: 3240px;
    left: 8%;
    width: min(31vw, 450px);
}

.photography-card:nth-child(9) {
    top: 3800px;
    right: 4%;
    width: min(35.2vw, 517px);
}

.photography-card:nth-child(10) {
    top: 4410px;
    left: 8%;
    width: min(37.4vw, 550px);
}

.photography-card:nth-child(11) {
    top: 4950px;
    left: 50%;
    width: min(32vw, 470px);
}

.photography-card:nth-child(12) {
    top: 5530px;
    left: 5%;
    width: min(33vw, 473px);
}

.photography-card:nth-child(13) {
    top: 6030px;
    right: 5%;
    width: min(35.2vw, 517px);
}

.photography-card:nth-child(14) {
    top: 6530px;
    left: 36%;
    width: min(34.1vw, 495px);
}

.photography-card:nth-child(15) {
    top: 7290px;
    left: 7%;
    width: min(37.4vw, 550px);
}

.photography-card:nth-child(16) {
    top: 7830px;
    right: 7%;
    width: min(35.2vw, 517px);
}

.photography-card:nth-child(17) {
    top: 8350px;
    left: 34%;
    width: min(34.1vw, 495px);
}

.photography-card:nth-child(18) {
    top: 8890px;
    left: 6%;
    width: min(33vw, 473px);
}

.photography-card:nth-child(19) {
    top: 9430px;
    right: 4%;
    width: min(37.4vw, 550px);
}

.photography-card:nth-child(20) {
    top: 10010px;
    left: 45%;
    width: min(31.68vw, 465px);
}

.photography-card:nth-child(21) {
    top: 10580px;
    left: 1%;
    width: min(34.1vw, 495px);
}

.photography-card:nth-child(22) {
    top: 11120px;
    right: 10%;
    width: min(37.4vw, 550px);
}

.photography-card:nth-child(23) {
    top: 11840px;
    left: 7%;
    width: min(37.4vw, 550px);
}

.photography-card:nth-child(24) {
    top: 12370px;
    right: 7%;
    width: min(29vw, 430px);
}

.photography-card:nth-child(25) {
    top: 13090px;
    left: 10%;
    width: min(30vw, 450px);
}

.photography-card:nth-child(26) {
    top: 13840px;
    right: 9%;
    width: min(29vw, 430px);
}

.photography-card:nth-child(27) {
    top: 14600px;
    left: 36%;
    width: min(30vw, 450px);
}

.photography-card:nth-child(28) {
    top: 15370px;
    left: 6%;
    width: min(29vw, 430px);
}

.photography-card:nth-child(29) {
    top: 16090px;
    right: 8%;
    width: min(30vw, 450px);
}

.photography-card:nth-child(30) {
    top: 16850px;
    left: 26%;
    width: min(31vw, 470px);
}

.photography-card:nth-child(31) {
    top: 17710px;
    left: 6%;
    width: min(29vw, 430px);
}

.photography-card:nth-child(32) {
    top: 18130px;
    right: 8%;
    width: min(30vw, 440px);
}

.photography-card:nth-child(33) {
    top: 18650px;
    left: 36%;
    width: min(28vw, 410px);
}

.photography-card:nth-child(34) {
    top: 19370px;
    left: 8%;
    width: min(29vw, 430px);
}

.photography-card:nth-child(35) {
    top: 19930px;
    right: 7%;
    width: min(30.4vw, 450px);
}

.photography-card:nth-child(36) {
    top: 20680px;
    left: 42%;
    width: min(28vw, 410px);
}

.photography-card:nth-child(37) {
    top: 21400px;
    left: 5%;
    width: min(30vw, 440px);
}

.photography-card:nth-child(38) {
    top: 22030px;
    right: 10%;
    width: min(28.4vw, 420px);
}

.photography-card:nth-child(39) {
    top: 22790px;
    left: 31%;
    width: min(30.4vw, 450px);
}

.photography-card img {
    width: 100%;
    height: auto;
    display: block;
    border-style: solid;
    border-color: var(--popover);
    border-width: clamp(8px, 0.9vw, 12px) clamp(52px, 5.6vw, 80px);
    background: var(--muted);
}

.photography-card.has-native-frame > img {
    border: 0;
    background: transparent;
}

.photography-frame {
    display: block;
    width: 100%;
    padding: clamp(8px, 0.9vw, 12px) clamp(52px, 5.6vw, 80px);
    background: var(--popover);
}

.photography-frame img {
    height: auto;
    border: 0;
    background: transparent;
    filter: brightness(0.86) contrast(1.2) saturate(1.04);
}

.photography-card figcaption {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding-top: 12px;
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.25;
}

.photography-card figcaption span:last-child {
    color: var(--muted-foreground);
    font-weight: 600;
    white-space: nowrap;
}

.project-entry {
    gap: 42px;
    padding-left: 0;
    margin-bottom: 42px;
}

.project-image {
    width: min(58vw, 720px);
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--soft);
}

.project-info {
    font-size: 1.5rem;
    font-weight: 600;
}

.project-info a {
    color: var(--ink);
}

@media (max-width: 900px) {
    .site-nav {
        padding: 10px 18px;
        gap: 12px;
    }

    .site-links {
        flex-wrap: wrap;
        gap: 8px 24px;
    }

    body[data-section="home"] .site-nav {
        height: auto;
        min-height: var(--nav-height);
        padding-top: 10px;
        padding-bottom: 10px;
    }

    body[data-section="home"] .site-links {
        flex-wrap: wrap;
    }

    body[data-section="home"] .site-links a {
        line-height: 1.28;
    }

    .home-hero-image {
        object-position: 56% center;
    }

    .home-slide {
        width: clamp(260px, 72vw, 420px);
    }

    .about-editorial__inner {
        grid-template-columns: 1fr;
        padding: 58px 20px 54px;
        gap: 48px;
    }

    .about-editorial__media {
        min-height: 0;
    }

    .about-editorial__photo {
        width: min(100%, 520px);
        margin: 0 auto;
    }

    .about-editorial__copy {
        max-width: none;
    }

    .about-resume {
        grid-template-columns: 1fr;
        padding: 0 20px 72px;
        gap: 28px;
    }

    .about-resume__heading {
        position: static;
    }

    .about-resume__preview {
        grid-column: auto;
    }

    .container {
        display: block;
        margin-top: var(--nav-height);
    }

    .side-selector,
    .fixed-selector-bar,
    body[data-section="others"] .fixed-selector-bar {
        position: relative;
        top: auto;
        width: 100%;
        min-height: 0;
        height: auto;
        padding: 22px 20px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 0 18px;
    }

    .side-label {
        grid-column: 1 / -1;
        margin-bottom: 10px;
    }

    .main-body,
    body[data-section="others"] .fixed-selector-bar ~ main {
        padding: 28px 20px 54px;
    }

    .project-hero {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .project-hero h1 {
        font-size: 2rem;
    }

    .thesis-title-spread,
    .thesis-chapter,
    .thesis-spread,
    .thesis-map-grid,
    .thesis-design-grid,
    .thesis-render-pair {
        grid-template-columns: 1fr;
    }

    .thesis-title-spread {
        min-height: 0;
        gap: 32px;
    }

    .thesis-spread--reverse > :first-child,
    .thesis-spread--reverse > :last-child {
        order: initial;
    }

    .thesis-small-grid,
    .thesis-model-strip {
        grid-template-columns: 1fr;
    }

    body[data-section="others"] main {
        margin-top: 0;
    }

    body[data-section="others"] .fixed-selector-bar {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        min-height: 0;
        height: auto;
        display: grid;
        margin-top: var(--nav-height);
    }

    body[data-section="others"] .fixed-selector-bar ~ main {
        margin-left: 0;
        margin-top: 0;
    }

    .other-works-index {
        max-width: none;
    }

    .other-work-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .collage-work {
        margin-left: 0;
        padding: 34px 20px 64px;
    }

    .photography-work {
        margin-left: 0;
        padding: 34px 20px 64px;
    }

    body[data-section="others"] .drawing-work,
    body[data-section="others"] .fabric-work {
        margin-left: 0;
        padding: 34px 20px 64px;
    }

    .other-work-detail-hero h1 {
        max-width: 100%;
        font-size: clamp(2.8rem, 13vw, 4.2rem);
        overflow-wrap: anywhere;
    }

    .other-work-detail-description {
        margin-top: 16px;
    }

    .collage-hero,
    .photography-hero {
        display: block;
    }

    .drawing-work .grid-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 34px 16px;
    }

    .collage-filter {
        gap: 14px 22px;
        margin-bottom: 28px;
    }

    .collage-wall {
        position: static;
        min-height: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 34px 16px;
    }

    .collage-card {
        position: static;
        width: auto;
    }

    .collage-card.span-3,
    .collage-card.span-4,
    .collage-card.push-left,
    .collage-card.push-right {
        grid-column: span 1;
    }

    .collage-card:nth-child(n) {
        grid-column: auto;
        margin-top: 0;
    }

    .collage-card:nth-child(3n + 1) {
        grid-column: 1 / -1;
    }

    .collage-card.pull-up-sm,
    .collage-card.pull-down-sm,
    .collage-card.pull-down-md,
    .collage-card.pull-down-lg {
        margin-top: 0;
    }

    .collage-card figcaption {
        display: block;
        font-size: 0.76rem;
    }

    .collage-card figcaption span {
        display: block;
    }

    .photography-wall {
        position: static;
        min-height: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 34px 16px;
    }

    .photography-card,
    .photography-card:nth-child(n) {
        position: static;
        width: auto;
    }

    .photography-card:nth-child(3n + 1) {
        grid-column: 1 / -1;
    }

    .photography-card.is-landscape,
    .photography-card.is-landscape:nth-child(n),
    .photography-card.is-landscape:nth-child(3n + 1) {
        grid-column: 1 / -1;
        justify-self: center;
        width: min(58vw, 560px);
    }

    .photography-card.is-portrait,
    .photography-card.is-portrait:nth-child(n) {
        grid-column: auto;
        justify-self: center;
        width: min(38vw, 390px);
    }

    .photography-card figcaption {
        display: block;
        font-size: 0.76rem;
    }

    .photography-card figcaption span {
        display: block;
    }

    .project-entry {
        display: grid;
        gap: 18px;
    }

    .project-image {
        width: 100%;
    }

    .architecture-index {
        padding: 34px 20px 72px;
    }

    .architecture-intro {
        min-height: 280px;
        padding: 48px 0 70px;
    }

    .architecture-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 42px 20px;
    }
}

@media (max-width: 620px) {
    :root {
        --nav-height: 66px;
        --nav-font-size: 0.8125rem;
    }

    .site-brand {
        width: 28px;
        height: 28px;
    }

    .site-links a {
        padding: 2px 0;
        line-height: 1.25;
    }

    .site-links {
        gap: 8px 16px;
    }

    .language-toggle {
        min-width: 32px;
        padding: 2px 0;
        line-height: 1.25;
    }

    .hero-content h1 {
        font-size: 2.7rem;
    }

    .hero .subtitle {
        font-size: 1rem;
        line-height: 1.35;
    }

    .resume-entry {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 22px 0;
    }

    .architecture-section-heading {
        margin-bottom: 38px;
    }

    .architecture-grid {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .image-row,
    .two-images-same-size {
        grid-template-columns: 1fr;
    }
}