:root {
  color-scheme: light;
  --paper: #f6f3ed;
  --paper-deep: #ede9e1;
  --ink: #211f20;
  --muted: #77736e;
  --line: #d8d3ca;
  --sky: #abc8ea;
  --pink: #eab9c6;
  --gold: #e9970a;
  --clay: #ca8d5e;
  --lavender: #ae95c0;
  --header-height: 78px;
  --page-gutter: clamp(22px, 5.3vw, 92px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--paper); font-family: Manrope, "Noto Sans SC", "Microsoft YaHei", sans-serif; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
img, video { display: block; max-width: 100%; }
::selection { color: var(--ink); background: var(--pink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 200; top: 12px; left: 12px; padding: 12px 18px; background: var(--paper); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: fixed; z-index: 80; top: 0; left: 0; right: 0; height: var(--header-height); display: flex; align-items: center; padding: 0 var(--page-gutter); transition: background 260ms ease, box-shadow 260ms ease; }
.site-header.is-scrolled { background: rgba(246, 243, 237, .94); box-shadow: 0 1px 0 rgba(33, 31, 32, .08); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.wordmark { position: relative; z-index: 1; margin-right: auto; font-size: 13px; font-weight: 700; letter-spacing: 0; white-space: nowrap; opacity: 0; transition: opacity 260ms ease; }
.wordmark-dot { color: var(--gold); }
.wordmark-home { display: none; }
.site-header .wordmark { opacity: 1; }
.site-header:not(.is-scrolled) .wordmark { color: #fff; font-size: 16px; }
.site-header:not(.is-scrolled) .wordmark-home { display: inline; }
.site-header:not(.is-scrolled) .wordmark-inner { display: none; }
.site-nav { position: relative; z-index: 1; display: flex; gap: clamp(24px, 3.1vw, 56px); align-items: center; }
.site-nav a { --nav-light-x: 50%; --nav-light-y: 0%; position: relative; isolation: isolate; display: inline-flex; gap: 6px; align-items: baseline; padding: 12px 0; font-size: 12px; font-weight: 600; white-space: nowrap; opacity: 0; transition: opacity 260ms ease, color 200ms ease, transform 220ms cubic-bezier(.2,.8,.2,1); }
.site-nav a span { font-family: "DM Mono", monospace; font-size: 9px; font-weight: 400; letter-spacing: .02em; color: var(--muted); }
.site-nav a::before { position: absolute; z-index: -2; inset: -5px -7px; border: 1px solid transparent; border-radius: 999px; background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(25,24,25,.28) 48%, rgba(255,255,255,.16)) padding-box, linear-gradient(125deg, rgba(255,255,255,.9), rgba(171,200,234,.68) 30%, rgba(234,185,198,.68) 68%, rgba(255,255,255,.86)) border-box; box-shadow: inset 0 1px 1px rgba(255,255,255,.68), inset 0 -1px 1px rgba(0,0,0,.16), 0 4px 14px rgba(0,0,0,.2); -webkit-backdrop-filter: blur(17px) saturate(1.5); backdrop-filter: blur(17px) saturate(1.5); -webkit-backdrop-filter: blur(17px) saturate(1.5); opacity: .88; transform: scale(.985); transition: opacity 220ms ease, transform 220ms cubic-bezier(.2,.8,.2,1), background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease; pointer-events: none; content: ""; }
.site-nav a::after { position: absolute; z-index: -1; inset: -5px -7px; border-radius: 999px; background: linear-gradient(currentColor,currentColor) 12px calc(100% - 6px) / 0 1px no-repeat, radial-gradient(ellipse 110px 54px at var(--nav-light-x) var(--nav-light-y), rgba(255,255,255,.4), transparent 75%), linear-gradient(118deg, transparent 24%, rgba(255,255,255,.19) 44%, transparent 62%); opacity: .34; transition: background-size 240ms ease, opacity 220ms ease; pointer-events: none; content: ""; }
.site-nav a:hover, .site-nav a:focus-visible { transform: translateY(-1px); }
.site-nav a:hover::before, .site-nav a:focus-visible::before { opacity: 1; transform: scale(1); box-shadow: inset 0 1px 1px rgba(255,255,255,.8), inset 0 -1px 1px rgba(0,0,0,.1), 0 7px 18px rgba(0,0,0,.18); }
.site-nav a:hover::after, .site-nav a:focus-visible::after { background-size: calc(100% - 24px) 1px, auto, auto; opacity: .78; }
.site-header.is-scrolled .wordmark, .site-header.is-scrolled .site-nav a, .site-header:focus-within .wordmark, .site-header:focus-within .site-nav a { opacity: 1; }
.site-header:not(.is-scrolled) .site-nav a { color: #fff; }
.site-header.is-scrolled .site-nav a { color: var(--ink); }
.site-header.is-scrolled .site-nav a span { color: var(--muted); }
.site-header:not(.is-scrolled) .site-nav a span { color: rgba(255,255,255,.76); }
.site-header.is-scrolled .site-nav a::before { border-color: rgba(255,255,255,.84); background: linear-gradient(135deg, rgba(255,255,255,.86), rgba(255,255,255,.48) 52%, rgba(255,255,255,.66)), rgba(246,243,237,.2); box-shadow: inset 0 1px 1px rgba(255,255,255,.95), inset 0 -1px 1px rgba(33,31,32,.04), 0 4px 12px rgba(33,31,32,.09); }
.site-header.is-scrolled .site-nav a::after { background-image: linear-gradient(currentColor,currentColor), radial-gradient(ellipse 110px 54px at var(--nav-light-x) var(--nav-light-y), rgba(255,255,255,.88), transparent 75%), linear-gradient(118deg, transparent 24%, rgba(255,255,255,.62) 44%, transparent 62%); }
.site-header.is-scrolled .site-nav a:hover::before, .site-header.is-scrolled .site-nav a:focus-visible::before { box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px rgba(33,31,32,.06), 0 7px 16px rgba(33,31,32,.13); }
.site-header:not(.is-scrolled) .site-nav { position: absolute; inset: 0; display: block; pointer-events: none; }
.site-header:not(.is-scrolled) .site-nav a { position: absolute; top: 13px; pointer-events: auto; }
.site-header:not(.is-scrolled) .site-nav a:nth-child(1) { left: 76.5%; }
.site-header:not(.is-scrolled) .site-nav a:nth-child(2) { left: 82%; }
.site-header:not(.is-scrolled) .site-nav a:nth-child(3) { left: 88%; }
.site-header:not(.is-scrolled) .site-nav a:nth-child(4) { left: 93%; }
.header-availability { display: none; }

.hero { position: relative; height: 120svh; min-height: 760px; background: var(--paper); --scroll-progress: 0; }
.hero-stage { position: sticky; top: 0; height: min(100svh, 56.25vw); overflow: hidden; isolation: isolate; background: #aeb5b8 url("assets/hero-yang-title-poster.jpg") center / cover no-repeat; touch-action: pan-y; cursor: none; transform: scale(calc(1 - var(--scroll-progress) * .055)); transform-origin: 50% 0; border-radius: calc(var(--scroll-progress) * 26px); }
.hero-video { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; }
.hero-stage::after { position: absolute; z-index: -1; inset: auto 0 0; height: 20%; background: linear-gradient(transparent, rgba(8, 10, 13, .54)); pointer-events: none; content: ""; }
.hero-mobile-shade { display: none; }
.video-message { position: absolute; z-index: 6; top: 50%; left: 50%; margin: 0; padding: 11px 17px; border-radius: 999px; color: #fff; background: rgba(20,20,22,.55); font-size: 11px; transform: translate(-50%, -50%); pointer-events: none; }
.hero[data-video-state="ready"] .video-message { display: none; }
.hero[data-video-state="error"] .video-message { background: rgba(33,31,32,.78); }
.hero-mobile-copy { display: none; }
.hero-scroll-note { position: absolute; z-index: 1; right: var(--page-gutter); bottom: -14px; display: flex; gap: 18px; align-items: center; color: var(--ink); font: 10px "DM Mono", monospace; letter-spacing: .08em; }
.hero-scroll-note i { display: block; width: 1px; height: 70px; background: var(--ink); }

.section-padding { padding-left: var(--page-gutter); padding-right: var(--page-gutter); }
.section-kicker, .intro-index, .about-topline, .card-meta, .card-media-tag, .work-note, .about-art-index, .site-footer { font-family: "DM Mono", monospace; letter-spacing: .07em; }
.section-kicker { margin: 0; font-size: 11px; color: var(--muted); }
.intro { position: relative; min-height: 85svh; display: grid; grid-template-columns: 1fr 2.2fr; align-items: start; gap: 6vw; padding-top: clamp(130px, 19vw, 270px); padding-bottom: clamp(140px, 19vw, 270px); overflow: hidden; }
.intro-index { display: flex; flex-direction: column; gap: 16px; padding-top: 14px; color: var(--muted); font-size: 10px; }
.intro-index span:first-child { color: var(--ink); }
.intro-content { position: relative; z-index: 1; max-width: 960px; }
.intro h2 { margin: 0; font-size: clamp(47px, 6.4vw, 110px); font-weight: 500; line-height: 1.21; letter-spacing: -.065em; }
.intro h2 em { color: var(--clay); font-style: normal; }
.intro-content p { max-width: 480px; margin: 44px 0 0 auto; font-size: clamp(15px, 1.1vw, 18px); line-height: 1.9; color: #5b5855; }
.intro-orbit { position: absolute; width: min(46vw, 660px); aspect-ratio: 1; right: -22vw; top: 8%; border: 1px solid rgba(202,141,94,.28); border-radius: 50%; box-shadow: 0 0 0 62px rgba(202,141,94,.035), 0 0 0 124px rgba(202,141,94,.028); pointer-events: none; }

.work { padding-top: clamp(100px, 11vw, 170px); padding-bottom: clamp(110px, 14vw, 210px); background: var(--paper-deep); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 50px; margin-bottom: 60px; }
.section-heading h2 { display: flex; gap: 16px; align-items: flex-start; margin: 14px 0 0; font-size: clamp(54px, 7vw, 118px); line-height: 1.1; font-weight: 500; letter-spacing: -.07em; }
.heading-star { margin-top: 3px; color: var(--gold); font-size: .42em; font-weight: 400; }
.section-heading > p { margin: 0 0 7px; color: #625d58; font-size: 14px; line-height: 1.8; }
.work-filters { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 28px; }
.filter-button { padding: 9px 15px; border: 1px solid #cfc9bf; border-radius: 999px; background: transparent; color: #5b5753; font-size: 11px; transition: color 200ms ease, background 200ms ease, border-color 200ms ease, transform 200ms ease; }
.filter-button:hover { transform: translateY(-2px); border-color: var(--ink); }
.filter-button.is-active { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.filter-button sup { margin-left: 3px; font: 9px "DM Mono", monospace; }
.work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 2.6vw, 46px); row-gap: clamp(55px, 6vw, 96px); perspective: 1400px; }
.work-card { --card-pointer-x: 0; --card-pointer-y: 0; --card-rotate-x: 0deg; --card-rotate-y: 0deg; --card-shift-x: 0px; --card-shift-y: 0px; --card-press-x: 0px; --card-press-y: 2px; --card-image-x: 0px; --card-image-y: 0px; --card-arrow-x: 0px; --card-arrow-y: 0px; --card-light-x: 50%; --card-light-y: 50%; position: relative; padding: clamp(13px, 1.5vw, 24px); border-radius: 28px; transform: translate3d(var(--card-shift-x), var(--card-shift-y), 0) rotateX(var(--card-rotate-x)) rotateY(var(--card-rotate-y)); transform-origin: center; transform-style: preserve-3d; transition: transform 540ms cubic-bezier(.16, 1, .3, 1), box-shadow 540ms cubic-bezier(.16, 1, .3, 1); }
.work-card::before { position: absolute; z-index: 0; inset: 0; border-radius: inherit; background: radial-gradient(ellipse at var(--card-light-x) var(--card-light-y), rgba(255,255,255,.4), rgba(255,255,255,.12) 22%, transparent 52%); opacity: 0; transition: opacity 260ms ease; pointer-events: none; content: ""; }
.work-card:hover, .work-card:focus-within { z-index: 2; transform: translate3d(var(--card-shift-x), calc(var(--card-shift-y) - 5px), 18px) rotateX(var(--card-rotate-x)) rotateY(var(--card-rotate-y)); box-shadow: 0 24px 46px rgba(30,24,20,.14); }
.work-card:hover::before, .work-card:focus-within::before { opacity: .88; }
.work-card.is-pressed { transform: translate3d(var(--card-press-x), var(--card-press-y), 1px) scale(.985) rotateX(var(--card-rotate-x)) rotateY(var(--card-rotate-y)); transition-duration: 140ms; }
.work-card--motion { background: #abc8ea; }
.work-card--graphic { background: #eab9c6; }
.work-card--digital { background: #c5b3cf; }
.work-card--space { background: #deb58b; }
.work-card:nth-child(even) { margin-top: 90px; }
.work-card[hidden] { display: none; }
.card-button { position: relative; z-index: 1; display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; transform-style: preserve-3d; }
.card-media { position: relative; display: block; width: 100%; aspect-ratio: 1.27; overflow: hidden; border-radius: 13px; isolation: isolate; transform: translateZ(14px); transition: border-radius 520ms cubic-bezier(.16, 1, .3, 1), box-shadow 520ms ease, transform 520ms cubic-bezier(.16, 1, .3, 1); }
.card-button:hover .card-media, .card-button:focus-visible .card-media { border-radius: 20px; transform: translateZ(28px) scale(.985); box-shadow: 0 16px 30px rgba(30, 24, 20, .14); }
.card-media > img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.95); transform: scale(1.015) translate3d(var(--card-image-x), var(--card-image-y), 0); transition: transform 820ms cubic-bezier(.16, 1, .3, 1), filter 520ms ease; }
.card-button:hover .card-media > img, .card-button:focus-visible .card-media > img { transform: scale(1.08) translate3d(var(--card-image-x), var(--card-image-y), 0); filter: saturate(1.04); }
.card-media::before { position: absolute; z-index: 2; inset: 0; background: radial-gradient(ellipse at var(--card-light-x) var(--card-light-y), rgba(255,255,255,.42), rgba(255,255,255,.12) 20%, transparent 49%); opacity: 0; transition: opacity 260ms ease; pointer-events: none; content: ""; }
.card-button:hover .card-media::before, .card-button:focus-visible .card-media::before { opacity: .78; }
.card-media::after { position: absolute; z-index: 1; inset: 0; border: 1px solid rgba(255,255,255,.28); border-radius: inherit; pointer-events: none; content: ""; }
.card-media--motion { background: var(--sky); }
.card-media--graphic { background: var(--pink); }
.card-media--digital { background: #b4a1c6; }
.card-media--space { background: #d5a778; }
.card-media-tag { position: absolute; z-index: 3; left: 22px; top: 22px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.7); border-radius: 3px; color: #fff; background: rgba(34,31,30,.18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 9px; }
.card-arrow { position: absolute; z-index: 3; right: 18px; bottom: 18px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); background: var(--paper); font-size: 23px; line-height: 1; transform: translate3d(var(--card-arrow-x), var(--card-arrow-y), 38px) rotate(0); transition: transform 440ms cubic-bezier(.16, 1, .3, 1), background 300ms ease; }
.card-button:hover .card-arrow, .card-button:focus-visible .card-arrow { transform: translate3d(var(--card-arrow-x), var(--card-arrow-y), 38px) rotate(45deg) scale(1.06); background: #fff; }
.card-meta { display: flex; justify-content: space-between; gap: 15px; margin: 22px 4px 9px; color: #504a47; font-size: 10px; transform: translateZ(7px); }
.card-title { display: block; margin: 0 4px 7px; font-size: clamp(18px, 2.1vw, 30px); font-weight: 600; letter-spacing: -.04em; transform: translateZ(4px); }
.card-title > span { margin: 0 2px; color: #9a9188; font-weight: 400; }
.art-ring { position: absolute; width: 57%; aspect-ratio: 1; border: clamp(22px, 4vw, 68px) solid #cf6f69; border-radius: 50%; box-shadow: inset 12px 9px 21px #a9575b55, 18px 17px 22px #7f4c4e44; transform: rotate(-22deg) scaleY(.84); transition: transform 600ms ease; }
.art-ring--one { top: -17%; left: 2%; }
.art-ring--two { right: -11%; bottom: -30%; width: 67%; border-color: #f3d47b; transform: rotate(26deg) scaleY(.84); }
.card-button:hover .art-ring--one { transform: rotate(8deg) scaleY(.84) translateY(9px); }
.card-button:hover .art-ring--two { transform: rotate(-8deg) scaleY(.84) translateX(-10px); }
.art-word { position: absolute; top: 37%; left: 12%; color: #3f3034; font-size: clamp(48px, 7vw, 112px); font-weight: 700; letter-spacing: -.1em; line-height: .82; transform: rotate(-8deg); }
.art-disc { position: absolute; left: 19%; top: 8%; width: 65%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 27%, #ffdfdd 0 7%, #ecaaa9 18%, #bb6e88 48%, #5a5b92 75%, #384c81 100%); box-shadow: inset -24px -30px 40px #27336066, 28px 28px 40px #4b425e66; transition: transform 600ms ease; }
.card-button:hover .art-disc { transform: translateY(-14px) rotate(10deg); }
.art-grid { position: absolute; inset: 0; opacity: .4; background: linear-gradient(transparent 95%, #ffffffb5 96%) 0 0 / 100% 25%, linear-gradient(90deg, transparent 95%, #ffffffb5 96%) 0 0 / 25% 100%; mix-blend-mode: screen; }
.art-caption { position: absolute; z-index: 1; left: 8%; bottom: 8%; color: #fff; font: clamp(18px, 2.3vw, 34px) Manrope, sans-serif; font-weight: 600; letter-spacing: -.05em; line-height: 1.05; }
.art-arch { position: absolute; bottom: -7%; width: 49%; height: 105%; border-radius: 52% 52% 0 0 / 35% 35% 0 0; transition: transform 600ms ease; }
.art-arch--back { left: 10%; background: linear-gradient(110deg, #b26845, #efc291 70%); box-shadow: 17px 0 32px #8e553844; }
.art-arch--front { right: 7%; width: 45%; height: 83%; border: clamp(24px, 4vw, 65px) solid #f2d4a4; border-bottom: 0; background: linear-gradient(150deg, #ac6948, #d79163); box-shadow: -18px 0 28px #78452f66, inset 13px 0 22px #6d3d2b55; }
.card-button:hover .art-arch--front { transform: translateX(-12px); }
.card-button:hover .art-arch--back { transform: translateX(8px); }
.art-floor { position: absolute; left: -5%; right: -5%; bottom: -10%; height: 22%; background: linear-gradient(180deg, #f4d2a8, #b97f59); transform: skewY(-5deg); }
.work-note { max-width: 640px; margin: 90px 0 0; color: #756f69; font-size: 10px; line-height: 1.8; }

.about { padding-top: clamp(100px, 12vw, 180px); padding-bottom: clamp(120px, 14vw, 210px); }
.about-topline { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line); font-size: 10px; }
.about-topline span:last-child { color: var(--muted); }
.about-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(50px, 8vw, 150px); align-items: center; padding-top: clamp(65px, 8vw, 130px); }
.about-art { position: relative; min-height: 560px; overflow: hidden; border-radius: 12px; background: var(--sky); }
.about-art::before { position: absolute; width: 90%; aspect-ratio: 1; left: -25%; top: -22%; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; box-shadow: 0 0 0 70px rgba(255,255,255,.09), 0 0 0 140px rgba(255,255,255,.06); content: ""; }
.about-art-orb { position: absolute; width: 60%; aspect-ratio: 1; right: -4%; top: 19%; border-radius: 50%; background: radial-gradient(circle at 25% 25%, #fcebd5, var(--pink) 28%, #a96b9c 65%, #5b699b); box-shadow: inset -20px -24px 35px #555d9044, 20px 26px 27px #61728c55; }
.about-art-type { position: absolute; left: 9%; bottom: 7%; color: rgba(255,255,255,.87); font-size: clamp(160px, 23vw, 350px); font-weight: 600; line-height: .8; letter-spacing: -.14em; }
.about-art-type span { display: inline-block; transform: translateY(-.17em); color: #f8e7cd; }
.about-art-index { position: absolute; top: 24px; left: 24px; font-size: 9px; }
.about-copy h2 { margin: 30px 0 30px; font-size: clamp(39px, 4.6vw, 72px); font-weight: 500; letter-spacing: -.07em; line-height: 1.24; }
.about-copy h2 span { color: #bd7950; }
.about-copy > p:not(.section-kicker) { max-width: 500px; font-size: 15px; line-height: 2.05; color: #5e5954; }
.about-education { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; max-width: 500px; margin: 28px 0 0; padding: 18px 0; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.8; }
.about-education dt { color: var(--muted); }
.about-education dd { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; }
.about-education strong { font-weight: 600; }
.about-education .education-date { flex-basis: 100%; color: var(--muted); font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: 0; }
.experience-note { max-width: 500px; margin-top: 20px; padding: 18px 0 0; border-top: 1px solid var(--line); font-size: 12px; }
.experience-note h3 { margin: 0 0 8px; font-size: 12px; font-weight: 500; }
.experience-list { margin: 0; padding: 0; list-style: none; }
.experience-entry { display: grid; grid-template-columns: 142px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.experience-date { margin: 0; color: var(--muted); font-family: "DM Mono", monospace; font-size: 10px; line-height: 1.9; letter-spacing: 0; }
.experience-entry h4 { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.8; overflow-wrap: anywhere; }
.experience-role { margin: 4px 0 0; color: #5e5954; font-size: 12px; line-height: 1.8; }
.experience-description { margin: 9px 0 0; color: var(--muted); font-size: 12px; line-height: 1.9; }
.about-details { max-width: 500px; margin-top: 8px; border-bottom: 1px solid var(--line); font-size: 12px; }
.about-details summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; cursor: pointer; list-style: none; }
.about-details summary::-webkit-details-marker { display: none; }
.about-details summary::after { content: "+"; flex: 0 0 20px; font-size: 20px; line-height: 1; text-align: center; }
.about-details[open] summary::after { content: "-"; }
.about-details-content { padding: 0 0 20px; }
.about-skills { margin: 0; }
.about-skills > div { margin-top: 14px; }
.about-skills dt { font-weight: 600; line-height: 1.8; }
.about-skills dd { margin: 4px 0 0; color: #5e5954; line-height: 1.9; overflow-wrap: anywhere; }
.campus-experience { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.campus-experience h3 { margin: 0 0 5px; font-size: 13px; font-weight: 600; line-height: 1.8; }
.campus-experience p:not(.experience-date) { margin: 10px 0 0; color: #5e5954; line-height: 1.9; }

.contact { min-height: 75svh; display: flex; flex-direction: column; justify-content: center; padding-top: 120px; padding-bottom: 120px; background: var(--gold); }
.contact .section-kicker { color: #63410f; }
.contact h2 { margin: 35px 0 80px; font-size: clamp(50px, 7.4vw, 128px); line-height: 1.15; font-weight: 500; letter-spacing: -.07em; }
.contact h2 em { color: #fff8e7; font-style: normal; }
.contact-bottom { display: flex; justify-content: space-between; align-items: end; gap: 25px; padding-top: 26px; border-top: 1px solid rgba(34, 30, 25, .35); }
.contact-bottom p { margin: 0; font-size: 13px; line-height: 1.8; }
.back-top { display: inline-flex; align-items: center; gap: 18px; font-size: 12px; font-weight: 700; }
.back-top span { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--ink); border-radius: 50%; font-size: 18px; transition: transform 220ms ease, background 220ms ease; }
.back-top:hover span { transform: translateY(-5px); background: #fff8e7; }
.site-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 22px var(--page-gutter); background: #242222; color: #e5dfd5; font-size: 9px; }

.project-dialog { width: min(900px, calc(100% - 32px)); max-height: calc(100svh - 32px); padding: clamp(28px, 5vw, 56px); border: 0; border-radius: 16px; background: var(--paper); color: var(--ink); box-shadow: 0 30px 100px #0005; }
.project-dialog::backdrop { background: rgba(18,17,18,.66); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.dialog-close { position: absolute; top: 18px; right: 22px; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: transparent; font-size: 27px; line-height: 1; }
.project-dialog h2 { margin: 15px 45px 24px 0; font-size: clamp(30px, 4vw, 54px); font-weight: 500; letter-spacing: -.06em; }
.dialog-project-picker { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; margin-bottom: 18px; }
.dialog-project-picker label { color: var(--muted); font-size: 12px; }
.dialog-project-picker select { width: 100%; min-width: 0; padding: 10px 32px 10px 12px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); background: var(--paper); font: inherit; font-size: 13px; text-overflow: ellipsis; }
.dialog-gallery-shell { --gallery-card-width: clamp(220px, 31vw, 320px); position: relative; height: clamp(360px, 49svh, 500px); min-height: 320px; margin: 2px -10px 0; padding: 0 10px; overflow: hidden; isolation: isolate; }
.dialog-gallery-viewport { position: relative; z-index: 1; height: calc(100% - 38px); overflow-x: auto; overflow-y: hidden; cursor: grab; perspective: 1000px; perspective-origin: 50% 42%; scrollbar-width: none; touch-action: pan-x pan-y; overscroll-behavior-x: contain; }
.dialog-gallery-viewport::-webkit-scrollbar { display: none; }
.dialog-gallery-viewport.is-dragging { cursor: grabbing; user-select: none; }
/* Keep the track plane from intercepting cards translated behind it. */
.dialog-gallery-track { position: relative; display: flex; align-items: center; gap: clamp(18px, 2.5vw, 30px); width: max-content; min-width: 100%; height: 100%; padding: 54px calc((100% - var(--gallery-card-width)) / 2) 70px; transform-style: preserve-3d; pointer-events: none; }
.dialog-gallery-item { position: relative; flex: 0 0 var(--gallery-card-width); display: flex; flex-direction: column; justify-content: flex-start; gap: 12px; height: min(330px, calc(100% - 22px)); margin: 0; padding: 9px; border: 1px solid rgba(255,255,255,.65); border-radius: 8px; background: var(--paper); box-shadow: 0 18px 34px rgba(45,37,30,.13), inset 0 1px 0 rgba(255,255,255,.85); transform: translate3d(0, var(--gallery-y, 0px), var(--gallery-z, 0px)) rotateZ(var(--gallery-rotate, 0deg)) rotateY(var(--gallery-rotate-y, 0deg)) scale(var(--gallery-scale, .88)); transform-origin: 50% 50%; opacity: var(--gallery-opacity, .5); transition: box-shadow 360ms ease, border-color 260ms ease; cursor: pointer; pointer-events: auto; }
.dialog-gallery-item::before { position: absolute; z-index: -1; inset: -1px; border-radius: inherit; background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.75), transparent 54%); opacity: .72; pointer-events: none; content: ""; }
.dialog-gallery-item.is-active { border-color: rgba(33,31,32,.28); box-shadow: 0 25px 42px rgba(45,37,30,.2), 0 0 0 2px rgba(255,255,255,.46), inset 0 1px 0 #fff; cursor: default; }
.dialog-gallery-item:hover { border-color: rgba(33,31,32,.45); }
.dialog-gallery-item.is-active .dialog-gallery-item-label { color: var(--ink); }
.dialog-gallery-item-media { position: relative; display: grid; place-items: center; width: 100%; min-height: 0; flex: 1; overflow: hidden; border-radius: 4px; background: var(--paper); }
.dialog-gallery-item-media::after { position: absolute; z-index: 2; inset: 0; border: 1px solid rgba(255,255,255,.36); border-radius: inherit; pointer-events: none; content: ""; }
.dialog-gallery-item-media > .dialog-gallery-select, .dialog-gallery-item-media > video { position: absolute; inset: 0; min-width: 0; min-height: 0; }
.dialog-gallery-item img, .dialog-gallery-item video { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.dialog-gallery-select { display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: none; color: inherit; cursor: pointer; }
.dialog-gallery-select:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; }
.dialog-gallery-video-select { flex: 0 0 26px; width: 26px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--muted); font-size: 16px; cursor: pointer; }
.dialog-gallery-video-select:hover, .dialog-gallery-video-select:focus-visible { border-color: var(--ink); color: var(--ink); }
.dialog-gallery-item img { pointer-events: none; user-select: none; }
.dialog-gallery-item video { background: #171717; }
.dialog-gallery-item-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 0 0 26px; min-width: 0; padding: 0 3px 1px; color: var(--muted); font: 11px "DM Mono", monospace; letter-spacing: 0; line-height: 1.35; }
.dialog-gallery-item-label span:first-child { flex-shrink: 0; white-space: nowrap; }
.dialog-gallery-item-label span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dialog-gallery-nav { position: absolute; z-index: 4; top: 50%; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(33,31,32,.16); border-radius: 50%; color: var(--ink); background: rgba(246,243,237,.68); box-shadow: 0 8px 18px rgba(45,37,30,.12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 26px; line-height: 1; transform: translateY(-50%); transition: transform 180ms ease, background 180ms ease; }
.dialog-gallery-nav:hover, .dialog-gallery-nav:focus-visible { background: #fff; transform: translateY(-50%) scale(1.06); }
.dialog-gallery-nav:disabled { opacity: .3; cursor: default; }
.dialog-gallery-nav--prev { left: 16px; }
.dialog-gallery-nav--next { right: 16px; }
.dialog-gallery-footer { position: absolute; z-index: 2; right: 20px; bottom: 11px; left: 20px; display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font: 10px "DM Mono", monospace; letter-spacing: 0; pointer-events: none; }
.dialog-gallery-footer span:last-child { color: var(--ink); }
.dialog-gallery-item[aria-hidden="true"] { pointer-events: none; }
.project-dialog .dialog-caption { margin: 14px 0 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.dialog-placeholder { min-height: 240px; display: grid; place-items: center; padding: 30px; color: #5e534b; background: linear-gradient(130deg, var(--pink), var(--sky)); font-size: 14px; text-align: center; }
.project-dialog > p:not(.section-kicker) { font-size: 14px; line-height: 1.85; }
.project-dialog .dialog-status { padding-top: 17px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }

.error-body { min-height: 100svh; }
.error-page { min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(24px, 5vw, 80px) var(--page-gutter); background: var(--paper); }
.error-wordmark { opacity: 1; }
.error-page h1 { margin: 12px 0 45px; font-size: clamp(150px, 24vw, 420px); font-weight: 500; line-height: .85; letter-spacing: -.1em; }
.error-page h1 span { display: block; margin-top: 32px; font-size: clamp(25px, 4vw, 60px); letter-spacing: -.05em; line-height: 1.25; }
.error-back { display: inline-flex; gap: 25px; padding-bottom: 8px; border-bottom: 1px solid var(--ink); font-size: 14px; font-weight: 700; }
.error-footnote { margin: 0; color: var(--muted); font: 10px "DM Mono", monospace; letter-spacing: .08em; }

.js .reveal:not(.is-visible) { opacity: 0; transform: translateY(35px); }
.reveal { transition: opacity 700ms ease, transform 700ms cubic-bezier(.2,.8,.2,1); }
.work-card.reveal { transition: opacity 700ms ease, transform 540ms cubic-bezier(.16, 1, .3, 1), box-shadow 540ms cubic-bezier(.16, 1, .3, 1); }

@media (max-width: 1050px) {
  .site-nav a span { display: none; }
  .about-layout { gap: 5vw; }
  .about-art { min-height: 490px; }
}

@media (max-width: 760px) {
  .dialog-gallery-shell { --gallery-card-width: min(62vw, 270px); }
  .dialog-gallery-track { padding-top: 22px; padding-bottom: 32px; }
  :root { --header-height: 64px; --page-gutter: 22px; }
  .site-header { background: rgba(246,243,237,.94); box-shadow: 0 1px 0 rgba(33,31,32,.07); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
  .wordmark, .site-nav a { opacity: 1; }
  .wordmark { font-size: 10px; }
  .site-header .site-nav a { color: var(--ink); }
  .site-header:not(.is-scrolled) .wordmark { color: var(--ink); }
  .site-header:not(.is-scrolled) .site-nav { position: relative; inset: auto; display: flex; pointer-events: auto; }
  .site-header:not(.is-scrolled) .site-nav a { position: relative; top: auto; left: auto; }
  .site-header:not(.is-scrolled) .site-nav a:nth-child(n) { left: auto; }
  .site-nav { gap: 17px; }
  .site-nav a:first-child { display: none; }
  .site-nav a { font-size: 10px; }
  .hero { height: auto; min-height: 100svh; padding-top: var(--header-height); }
  .hero-stage { position: relative; top: auto; height: min(62svh, 590px); min-height: 390px; border-radius: 0; transform: none; }
  .hero-video { top: -80px; height: calc(100% + 80px); object-position: 85% center; }
  .hero-mobile-shade { position: absolute; z-index: -1; inset: 0; display: block; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.35)); pointer-events: none; }
  .hero-stage::after { height: 31%; }
  .hero-mobile-copy { display: block; padding: 34px var(--page-gutter) 70px; }
  .eyebrow { margin: 0 0 18px; font: 9px "DM Mono", monospace; letter-spacing: .08em; color: var(--muted); }
  .hero-mobile-copy .mobile-name { margin: 0; font-size: clamp(30px, 9.2vw, 64px); font-weight: 500; line-height: 1.05; letter-spacing: 0; }
  .hero-mobile-copy .mobile-name span { display: block; margin-top: 8px; font-size: 17px; font-weight: 500; letter-spacing: 0; }
  .text-link { display: inline-flex; gap: 32px; margin-top: 30px; padding-bottom: 8px; border-bottom: 1px solid var(--ink); font-size: 12px; font-weight: 700; }
  .hero-scroll-note { display: none; }
  .intro { min-height: auto; grid-template-columns: 1fr; gap: 45px; padding-top: 100px; padding-bottom: 130px; }
  .intro-index { flex-direction: row; justify-content: space-between; gap: 15px; padding: 0; }
  .intro h2 { font-size: clamp(44px, 9vw, 72px); }
  .intro-content p { margin: 28px 0 0; font-size: 14px; }
  .intro-orbit { right: -45%; width: 80vw; }
  .work { padding-top: 95px; padding-bottom: 115px; }
  .section-heading { display: block; margin-bottom: 35px; }
  .section-heading h2 { font-size: clamp(54px, 12vw, 88px); }
  .section-heading > p { margin-top: 20px; }
  .work-filters { flex-wrap: nowrap; width: calc(100% + 2 * var(--page-gutter)); margin-left: calc(-1 * var(--page-gutter)); padding: 0 var(--page-gutter) 8px; overflow-x: auto; scrollbar-width: none; }
  .work-filters::-webkit-scrollbar { display: none; }
  .filter-button { flex: 0 0 auto; }
  .work-grid { grid-template-columns: 1fr; row-gap: 55px; }
  .work-card:nth-child(even) { margin-top: 0; }
  .card-media { aspect-ratio: 1.13; }
  .card-meta { font-size: 9px; }
  .card-title { font-size: 21px; }
  .art-word { font-size: 18vw; }
  .work-note { margin-top: 60px; }
  .about { padding-top: 100px; padding-bottom: 120px; }
  .about-layout { grid-template-columns: 1fr; gap: 65px; padding-top: 55px; }
  .about-art { min-height: 410px; }
  .about-art-type { font-size: 55vw; }
  .about-copy h2 { font-size: clamp(38px, 8vw, 64px); }
  .experience-entry { grid-template-columns: 1fr; gap: 4px; }
  .contact { min-height: 65svh; padding-top: 110px; padding-bottom: 100px; }
  .contact h2 { margin-bottom: 75px; font-size: clamp(48px, 10vw, 84px); }
  .contact-bottom { align-items: start; flex-direction: column; }
  .site-footer { font-size: 8px; }
}

@media (max-width: 420px) {
  .site-nav { gap: 12px; }
  .site-nav a { font-size: 9px; }
  .wordmark { font-size: 9px; }
  .hero-stage { min-height: 340px; height: 55svh; }
  .hero-mobile-copy { padding-bottom: 55px; }
  .about-art { min-height: 340px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .js .reveal:not(.is-visible) { opacity: 1; transform: none; }
  .hero-stage { transform: none; }
  .work-card, .work-card:hover, .work-card:focus-within, .work-card.is-pressed,
  .site-nav a:hover, .site-nav a:focus-visible,
  .card-button:hover .card-media, .card-button:focus-visible .card-media,
  .card-button:hover .card-media > img, .card-button:focus-visible .card-media > img,
  .card-button:hover .card-arrow, .card-button:focus-visible .card-arrow { transform: none; }
  .work-card, .work-card::before, .site-nav a, .site-nav a::before, .site-nav a::after, .card-media, .card-media::before, .card-media > img, .card-arrow { transition: none; }
}

/* ===== 作品视频全屏播放器 =====
   用 <dialog> 承载：既进入浏览器 top layer（保证盖住作品详情弹窗），
   又刻意保持「零变换祖先」——不设 transform / perspective / will-change / filter，
   以保证 iOS WebKit 与微信 X5 内核下 <video> 能正常渲染（3D 变换容器内的视频在这些内核上会黑屏）。 */
dialog.video-player { position: fixed; inset: 0; display: none; box-sizing: border-box; width: 100%; height: 100%; max-width: 100%; max-height: 100%; margin: 0; padding: clamp(10px, 3vw, 32px); border: 0; background: transparent; overflow: visible; }
dialog.video-player[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; }
dialog.video-player::backdrop { background: rgba(18,16,14,.95); }
/* 播放器打开时把作品详情弹窗藏掉，避免它透过遮罩在标题/底部条位置留下暗块 */
.project-dialog.is-behind-player { visibility: hidden; }
.video-player-panel { display: flex; flex-direction: column; gap: 10px; }
.video-player-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; }
.video-player-title { margin: 0; color: #f6f3ed; font: 600 clamp(15px, 2.1vw, 20px)/1.3 "Manrope", system-ui, sans-serif; }
.video-player-close { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid rgba(246,243,237,.45); border-radius: 50%; background: rgba(246,243,237,.14); color: #f6f3ed; font-size: 21px; line-height: 1; cursor: pointer; transition: background 180ms ease, color 180ms ease; }
.video-player-close:hover, .video-player-close:focus-visible { background: #f6f3ed; color: #171717; }
.video-player-stage { position: relative; display: block; width: 100%; background: #000; border-radius: 10px; }
.video-player-stage > video { display: block; width: 100%; height: 100%; background: #000; border-radius: 10px; object-fit: contain; }
.video-player-loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; border-radius: 10px; background: rgba(0,0,0,.6); color: #f6f3ed; font: 11px "DM Mono", monospace; letter-spacing: .04em; pointer-events: none; }
.video-player-loading[hidden] { display: none; }
.video-player-meta { width: 100%; margin: 0; color: rgba(246,243,237,.72); font: 11px "DM Mono", monospace; letter-spacing: .02em; }

/* 画廊视频卡片上的「打开」按钮：明显的播放入口，点击后进入全屏播放器 */
.dialog-gallery-play { position: absolute; z-index: 3; top: 50%; left: 50%; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 1px solid rgba(255,255,255,.62); border-radius: 50%; background: rgba(20,18,16,.46); color: #fff; cursor: pointer; transform: translate(-50%, -50%); transition: background 180ms ease, transform 180ms ease, opacity 220ms ease; }
.dialog-gallery-play::before { margin-left: 3px; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 14px solid currentColor; content: ""; }
.dialog-gallery-play:hover, .dialog-gallery-play:focus-visible { background: rgba(20,18,16,.72); transform: translate(-50%, -50%) scale(1.08); }
.dialog-gallery-item.is-playing .dialog-gallery-play { opacity: 0; pointer-events: none; }

@media (max-width: 640px) {
  .dialog-gallery-play { width: 46px; height: 46px; }
  .video-player-title { font-size: 14px; }
  .video-player-meta { font-size: 10px; }
}
.video-player-fallback { width: 100%; margin: 0; color: rgba(246,243,237,.82); font: 11px "DM Mono", monospace; }
.video-player-fallback[hidden] { display: none; }
.video-player-fallback a { color: #f6f3ed; text-decoration: underline; text-underline-offset: 3px; }
dialog.video-player.is-fallback { position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(18,16,14,.95); }