:root {--paper: #f5f3ed; --ink: #191919; --muted: #686760; --line: #cfcdc5; --orange: #ff4d00; --gutter: clamp(22px,5vw,80px); --gap: 24px; --sans: Arial,Helvetica,"Microsoft YaHei","PingFang SC",sans-serif;}
* {box-sizing: border-box;}
html {scroll-behavior: smooth; scroll-padding-top: 32px;}
body {margin: 0px; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased;}
button, input, textarea {font: inherit;}
a {color: inherit; text-decoration: none;}
button, a {-webkit-tap-highlight-color: transparent;}
button {color: inherit;}
h1, h2, h3, p, figure, dl, dd {margin: 0px;}
button {cursor: pointer;}
img {display: block; width: 100%; height: 100%; object-fit: cover;}
::selection {background: var(--orange); color: rgb(255, 255, 255);}
:focus-visible {outline: 2px solid var(--orange); outline-offset: 5px;}
.wrap {max-width: 1600px; margin: auto; padding-inline: var(--gutter);}
.grid {display: grid; grid-template-columns: repeat(12, minmax(0px, 1fr)); gap: var(--gap);}
.meta {font-size: 11px; line-height: 1.5; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;}
.muted {color: var(--muted);}
.skip {position: fixed; left: 20px; top: -80px; z-index: 100; background: var(--ink); color: var(--paper); padding: 12px;}
.skip:focus {top: 10px;}
.masthead {padding-block: 27px 23px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--ink); gap: 24px;}
.brand {font-size: 14px; font-weight: 700; letter-spacing: 0.015em; white-space: nowrap;}
.brand span {display: inline-block; color: var(--orange); padding-inline: 6px;}
.nav {display: flex; gap: 27px; font-size: 12px;}
.nav a {position: relative; padding-block: 9px;}
.nav a::after {content: ""; position: absolute; bottom: 3px; left: 0px; width: 100%; height: 1px; background: var(--orange); transform: scaleX(0); transform-origin: left center; transition: transform 0.2s;}
.nav a:hover::after, .nav a:focus-visible::after {transform: scaleX(1);}
.hero {padding-top: 36px; padding-bottom: 70px;}
.hero-top {display: flex; justify-content: space-between; margin-bottom: 58px;}
.hero-title {grid-column: 1 / 9; align-self: start; font-size: clamp(60px, 8.5vw, 136px); letter-spacing: -0.07em; line-height: 0.88; font-weight: 800; padding-top: 25px;}
.hero-title span {display: block;}
.hero-portrait {grid-area: 1 / 9 / 3 / 13;}
.image-box {position: relative; overflow: hidden; background: rgb(222, 219, 210); isolation: isolate;}
.hero-portrait .image-box {aspect-ratio: 4 / 5;}
.image-box img {transition: transform 0.55s cubic-bezier(0.2, 0.65, 0.3, 1), filter 0.4s, opacity 0.4s; filter: saturate(0.82); opacity: 0.96;}
.image-box::after {content: ""; position: absolute; left: 0px; bottom: 0px; width: 100%; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left center; transition: transform 0.4s; z-index: 2;}
figcaption {display: flex; gap: 20px; justify-content: space-between; padding-top: 13px; font-size: 11px; line-height: 1.65; color: var(--muted);}
.caption-text {max-width: 80%; text-align: right;}
.hero-intro {grid-column: 1 / 8; padding-top: 44px; align-self: end;}
.hero-name {font-size: 25px; line-height: 1.4; letter-spacing: -0.02em; margin-bottom: 10px;}
.hero-intro p {font-size: 15px; line-height: 1.85; color: var(--muted);}
.hero-bottom {margin-top: 52px; display: flex; justify-content: space-between; align-items: end;}
.direction {font-size: 26px; font-weight: 400; color: var(--orange);}
.hero-bottom a {font-size: 12px; display: flex; align-items: center; gap: 20px; min-height: 44px;}
.section {padding-block: 84px 100px; border-top: 1px solid var(--line);}
.section-head {display: grid; grid-template-columns: repeat(12, minmax(0px, 1fr)); gap: var(--gap); align-items: baseline; margin-bottom: 52px;}
.section-index {grid-column: 1 / 3; color: var(--orange);}
.section-title {grid-column: 3 / 10; font-size: clamp(25px, 3vw, 42px); font-weight: 500; letter-spacing: -0.045em; line-height: 1.15;}
.section-note {grid-column: 10 / 13; text-align: right; color: var(--muted);}
.identity-statement {grid-column: 3 / 9; font-size: clamp(22px, 2.5vw, 34px); line-height: 1.7; letter-spacing: -0.02em;}
.identity-statement .secondary {display: block; color: var(--muted);}
.identity-facts {grid-column: 10 / 13; display: grid; gap: 20px; align-content: start; padding-top: 9px;}
.identity-facts dt {font-size: 10px; letter-spacing: 0.09em; color: var(--muted); margin-bottom: 4px;}
.identity-facts dd {font-size: 14px; line-height: 1.7;}
.identity-body {grid-column: 3 / 9; margin-top: 18px; font-size: 15px; line-height: 1.9; color: var(--muted); max-width: 620px;}
.skills {grid-column: 3 / 13; display: grid; grid-template-columns: 1fr 3fr; gap: 24px; margin-top: 35px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.9;}
.skills .meta {padding-top: 4px;}
.routes {margin-left: calc((100% + var(--gap))*2/12);}
.route {display: grid; grid-template-columns: 45px minmax(230px, 1fr) minmax(200px, 1.65fr); gap: 24px; align-items: baseline; padding: 26px 0px; border-bottom: 1px solid var(--line);}
.route:first-child {border-top: 1px solid var(--line);}
.route-num {font-size: 11px; color: var(--muted);}
.route h3 {font-size: clamp(21px, 2.3vw, 32px); font-weight: 500; letter-spacing: -0.035em;}
.route p {font-size: 14px; line-height: 1.85; color: var(--muted); max-width: 490px;}
.route:nth-last-child(-n+2) h3 {font-size: 25px;}
.section-intro {grid-column: 3 / 9; max-width: 600px; font-size: 14px; color: var(--muted); line-height: 1.85; margin-bottom: 36px;}
.experiences {margin-left: calc((100% + var(--gap))*2/12);}
.experience {border-bottom: 1px solid var(--line);}
.experience:first-child {border-top: 1px solid var(--ink);}
summary {list-style: none; cursor: pointer;}
summary::-webkit-details-marker {display: none;}
.experience > summary {display: grid; grid-template-columns: 86px 1fr 32px; gap: 24px; align-items: baseline; padding-block: 29px; min-height: 90px;}
.experience-year {font-size: 11px; color: var(--muted);}
.experience h3 {font-size: clamp(20px, 2.05vw, 29px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.35;}
.experience-subtitle {display: block; font-size: 12px; font-weight: 400; color: var(--muted); letter-spacing: 0px; margin-top: 8px;}
.expand {position: relative; width: 20px; height: 20px; place-self: center end;}
.expand::before, .expand::after {content: ""; position: absolute; background: var(--ink); left: 2px; top: 9px; width: 16px; height: 1px;}
.expand::after {transform: rotate(90deg); transition: transform 0.2s;}
details[open] > summary .expand::after {transform: rotate(0deg);}
details[open] > summary .expand::before {background: var(--orange);}
.experience-content {padding-top: 8px; padding-bottom: 44px; display: grid; grid-template-columns: repeat(10, minmax(0px, 1fr)); gap: 24px;}
.experience-photo {grid-column: 1 / 7;}
.experience-photo .image-box {aspect-ratio: 3 / 2;}
.experience-copy {grid-column: 7 / 11; align-self: end; font-size: 14px; line-height: 1.9;}
.experience-copy .meta {margin-bottom: 16px;}
.experience-copy p + p {margin-top: 14px;}
.frames-head {margin-bottom: 34px;}
.frames-intro {grid-column: 3 / 11; font-size: clamp(29px, 4.7vw, 66px); line-height: 1.08; letter-spacing: -0.045em; font-weight: 500; margin-bottom: 60px;}
.frames-intro small {display: block; font-size: 13px; font-weight: 400; color: var(--muted); letter-spacing: 0px; margin-top: 20px; line-height: 1.8;}
.frame-landscape {grid-column: 1 / 12;}
.frame-landscape .image-box {aspect-ratio: 2.15 / 1;}
.frame-portrait {grid-column: 8 / 13; margin-top: 78px;}
.frame-portrait .image-box {aspect-ratio: 4 / 5;}
.frame-aside {grid-area: 2 / 3 / auto / 6; align-self: center; font-size: 18px; line-height: 1.75; color: var(--muted);}
.frame-detail {grid-column: 2 / 8; margin-top: -30px;}
.frame-detail .image-box {aspect-ratio: 3 / 2;}
.frame-number {font-size: 12px; color: var(--ink);}
.frame-caption {opacity: 1; transition: opacity 0.3s, transform 0.3s;}
.frames-grid {row-gap: 0px;}
.current-content {grid-column: 3 / 13;}
.current-disclosure {border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line);}
.current-disclosure > summary {display: grid; grid-template-columns: 1fr 32px; gap: 20px; align-items: center; padding-block: 25px; font-size: 21px; line-height: 1.6;}
.current-disclosure > summary small {display: block; font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 6px;}
.current-rows {padding: 12px 0px 32px;}
.current-row {display: grid; grid-template-columns: 180px 1fr; gap: 24px; padding-block: 17px; font-size: 14px; line-height: 1.85;}
.current-row p {max-width: 640px;}
.current-row .meta {color: var(--muted); padding-top: 4px;}
.applying {grid-column: 3 / 13; display: grid; grid-template-columns: 180px 1fr; gap: 24px; padding-top: 38px; font-size: 14px; line-height: 1.9;}
.applying .meta {color: var(--muted); padding-top: 4px;}
.applying p {max-width: 620px;}
.applying-title {display: block; font-size: 20px; margin-bottom: 10px; line-height: 1.5; letter-spacing: -0.015em;}
.next {padding-bottom: 70px;}
.next-statement {grid-column: 3 / 13; font-size: clamp(36px, 5.7vw, 82px); line-height: 1.05; font-weight: 500; letter-spacing: -0.055em;}
.next-statement span {display: block;}
.next-note {grid-column: 3 / 9; font-size: 14px; line-height: 1.8; margin-top: 28px; color: var(--muted);}
.contact {grid-column: 3 / 13; margin-top: 62px; border-top: 1px solid var(--ink); padding-top: 28px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 24px;}
.contact h3 {font-size: 34px; font-weight: 500; letter-spacing: -0.04em; margin-top: 12px;}
.contact-info {font-size: 15px; line-height: 1.8; align-self: end;}
.contact-info p + p {margin-top: 10px;}
.footer {border-top: 1px solid var(--line); padding-block: 22px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 10px; letter-spacing: 0.04em; color: var(--muted);}
.footer-right {display: flex; gap: 22px; align-items: center;}
@media (min-width: 701px) and (hover: hover) and (pointer: fine){
.photo:hover img {transform: scale(1.018); filter: saturate(1); opacity: 1;}
.photo:hover .image-box::after {transform: scaleX(1);}
.frame-caption {opacity: 0.32; transform: translateY(3px);}
.photo:hover .frame-caption, .photo:focus-within .frame-caption {opacity: 1; transform: translateY(0px);}
}
@keyframes arrive { 
  0% { opacity: 0.45; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0px); }
}
.arrive {animation: 0.55s ease 0s 1 normal both running arrive;}
.hero-title .hero-word::first-letter {color: var(--orange);}
.community-list {list-style: none; margin: 10px 0px 0px; padding: 0px;}
.community-list li + li {margin-top: 5px;}
.skills-copy p + p {margin-top: 14px;}
.contact-info a {border-bottom: 1px solid var(--line);}
.contact-info a:hover {border-color: var(--orange);}
@media (min-width: 701px){
.hero-intro {align-self: start; padding-top: 20px;}
.hero-top {margin-bottom: 42px;}
.hero-bottom {margin-top: 36px;}
.hero {padding-bottom: 58px;}
}
@media (max-width: 700px){
.index-label {display: none;}
.section-index {white-space: nowrap;}
.frame-caption {opacity: 1; transform: none;}
}
@media (any-hover: none), (pointer: coarse){
.frame-caption {opacity: 1; transform: none;}
}
.text-wrap {overflow-wrap: anywhere;}
.grid > * {min-width: 0px;}
.photo:focus-visible {outline: 2px solid var(--orange); outline-offset: 6px;}
.photo:focus .frame-caption {opacity: 1; transform: none;}
.photo:focus .image-box::after {transform: scaleX(1);}
.skip {top: 10px; width: 1px; height: 1px; padding: 0px; overflow: hidden; clip-path: inset(50%);}
.skip:focus {width: auto; height: auto; padding: 12px; clip-path: none;}
@media (max-width: 700px){
.nav a {min-height: 44px;}
.hero-portrait img {object-position: center 38%;}
}
@media (min-width: 1600px){
.hero-title {font-size: 136px;}
}
@media (max-width: 1050px){
:root {--gap: 20px; --gutter: 36px;}
.nav {gap: 16px;}
.hero-title {font-size: 8.2vw;}
.hero-top {margin-bottom: 32px;}
.hero-intro {padding-top: 30px;}
.section-note {font-size: 10px;}
.routes, .experiences {margin-left: 0px;}
.route {grid-template-columns: 30px 1fr 1.5fr;}
.section-index {grid-column: 1 / 2;}
.section-title {grid-column: 2 / 10;}
.identity-statement, .identity-body {grid-column: 2 / 9;}
.skills {grid-column: 2 / 13;}
.identity-facts {grid-column: 10 / 13;}
.frames-intro, .current-content, .applying, .next-statement, .next-note, .contact {grid-column: 2 / 13;}
.frame-detail {margin-top: 0px;}
.experience > summary {grid-template-columns: 65px 1fr 24px;}
.applying, .current-row {grid-template-columns: 150px 1fr;}
}
@media (max-width: 700px){
:root {--gutter: 22px; --gap: 16px;}
.grid, .section-head {grid-template-columns: repeat(4, minmax(0px, 1fr));}
.masthead {padding-block: 19px 14px; display: block;}
.brand {font-size: 13px;}
.nav {gap: 0px; justify-content: space-between; margin-top: 15px; font-size: 11px;}
.nav a {min-height: 36px; padding-block: 9px;}
.hero {padding-top: 22px; padding-bottom: 47px;}
.hero-top {margin-bottom: 28px; font-size: 9px; letter-spacing: 0.045em; gap: 14px;}
.hero-title {grid-column: 1 / 5; font-size: clamp(48px, 13.3vw, 90px); padding-top: 0px; line-height: 0.93; letter-spacing: -0.065em;}
.hero-title span:first-child {margin-bottom: 2px;}
.hero-portrait {grid-area: 2 / 2 / auto / 5; margin-top: 18px;}
.hero-portrait .image-box {aspect-ratio: 6 / 5;}
.hero-portrait figcaption {font-size: 9px; gap: 12px; padding-top: 9px;}
.hero-intro {grid-area: 3 / 1 / auto / 5; padding-top: 13px;}
.hero-name {font-size: 20px; margin-bottom: 9px;}
.hero-intro p {font-size: 13px; line-height: 1.85;}
.hero-bottom {margin-top: 27px; align-items: center;}
.hero-bottom .meta {font-size: 9px;}
.hero-bottom a {font-size: 11px; gap: 12px;}
.direction {font-size: 22px;}
.section {padding-block: 43px 54px;}
.section-head {gap: 0px 16px; margin-bottom: 30px; align-items: start;}
.section-index {grid-column: 1; font-size: 10px; padding-top: 6px;}
.section-title {grid-column: 2 / 5; font-size: 28px; line-height: 1.12;}
.section-note {grid-column: 2 / 5; font-size: 9px; text-align: left; margin-top: 9px;}
.identity-statement {grid-column: 1 / 5; font-size: 24px; line-height: 1.65;}
.identity-body {grid-column: 1 / 5; font-size: 13px; line-height: 1.9; margin-top: 4px;}
.identity-facts {grid-column: 1 / 5; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 12px; padding-top: 10px;}
.identity-facts dt {font-size: 9px;}
.identity-facts dd {font-size: 12px;}
.skills {grid-column: 1 / 5; grid-template-columns: 1fr; gap: 8px; margin-top: 14px; padding-top: 18px; font-size: 12px;}
.skills .meta {font-size: 10px;}
.route {grid-template-columns: 24px 1fr; gap: 8px 16px; padding-block: 20px;}
.route-num {grid-column: 1; font-size: 10px; padding-top: 5px;}
.route h3 {grid-column: 2; font-size: 25px;}
.route p {grid-column: 2; font-size: 12px; line-height: 1.85;}
.route:nth-last-child(-n+2) h3 {font-size: 25px;}
.section-intro {grid-column: 1 / 5; font-size: 12px; margin-bottom: 25px;}
.experience > summary {grid-template-columns: 1fr 24px; gap: 10px; padding-block: 21px; min-height: 100px;}
.experience-year {grid-column: 1; font-size: 10px; line-height: 1.2;}
.experience h3 {grid-column: 1; font-size: 21px;}
.experience-subtitle {font-size: 11px; margin-top: 6px;}
.experience > summary .expand {grid-area: 1 / 2 / 3;}
.experience-content {grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 20px; padding-bottom: 30px;}
.experience-photo {grid-column: 1 / 5;}
.experience-photo .image-box {aspect-ratio: 3 / 2;}
.experience-photo figcaption {font-size: 10px; gap: 12px;}
.experience-copy {grid-column: 1 / 5; font-size: 13px; line-height: 1.85;}
.experience-copy .meta {margin-bottom: 12px; font-size: 10px;}
.frames-head {margin-bottom: 30px;}
.frames-intro {grid-column: 1 / 5; font-size: 38px; line-height: 1.06; margin-bottom: 30px;}
.frames-intro small {font-size: 12px; line-height: 1.8; margin-top: 17px;}
.frame-landscape {grid-column: 1 / 5;}
.frame-landscape .image-box {aspect-ratio: 1.45 / 1;}
.frame-portrait {grid-column: 2 / 5; margin-top: 38px;}
.frame-portrait .image-box {aspect-ratio: 4 / 5;}
.frame-aside {grid-area: 3 / 1 / auto / 4; font-size: 14px; line-height: 1.75; margin-top: 26px;}
.frame-detail {grid-area: 4 / 1 / auto / 4; margin-top: 27px;}
.frame-detail .image-box {aspect-ratio: 1.25 / 1;}
.frames-grid figcaption {font-size: 10px; gap: 10px; padding-top: 9px;}
.frame-number {font-size: 10px;}
.current-content {grid-column: 1 / 5;}
.current-disclosure > summary {font-size: 20px; padding-block: 20px;}
.current-disclosure > summary small {font-size: 11px; line-height: 1.8;}
.current-row {grid-template-columns: 1fr; gap: 6px; padding-block: 15px; font-size: 13px; line-height: 1.85;}
.current-row .meta {font-size: 10px;}
.applying {grid-column: 1 / 5; grid-template-columns: 1fr; gap: 12px; padding-top: 30px; font-size: 13px;}
.applying .meta {font-size: 10px;}
.applying-title {font-size: 20px; margin-bottom: 12px;}
.next-statement {grid-column: 1 / 5; font-size: clamp(34px, 9.5vw, 54px); line-height: 1.1; letter-spacing: -0.055em;}
.next-note {grid-column: 1 / 5; font-size: 13px; margin-top: 10px;}
.contact {grid-column: 1 / 5; grid-template-columns: 1fr; margin-top: 28px; padding-top: 22px; gap: 20px;}
.contact h3 {font-size: 30px; margin-top: 9px;}
.contact-info {font-size: 13px;}
.footer {align-items: start; padding-block: 18px 24px; font-size: 9px; line-height: 1.7;}
.footer-right {gap: 10px; flex-wrap: wrap; justify-content: end; max-width: 180px;}
.next {padding-bottom: 45px;}
}
@media (max-width: 374px){
:root {--gutter: 20px; --gap: 14px;}
.brand {font-size: 12px;}
.nav {font-size: 10px;}
.hero-title {font-size: 13.1vw;}
.hero-top {font-size: 8px;}
.section-title {font-size: 26px;}
.frames-intro {font-size: 34px;}
.experience h3 {font-size: 19px;}
.identity-statement {font-size: 22px;}
}
@media (prefers-reduced-motion: reduce){
html {scroll-behavior: auto;}
*, ::before, ::after {animation: auto ease 0s 1 normal none running none !important; transition: none !important;}
.photo:hover img {transform: none;}
.frame-caption {transform: none;}
}
.experience-status {color: var(--orange); font-size: 10px; letter-spacing: 0.02em;}
.experience-sources {display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 11px; color: var(--muted);}
.experience-sources a {border-bottom: 1px solid var(--line); padding-block: 4px;}
.experience-sources a:hover {color: var(--ink); border-color: var(--orange);}
.experience-itinerary {margin-top: 20px; font-size: 12px; line-height: 1.8; color: var(--muted);}
.experience-itinerary > div {display: grid; grid-template-columns: 45px minmax(0px, 1fr); gap: 12px; padding-block: 8px;}
.experience-itinerary dt {font-size: 10px; padding-top: 2px;}
@media (max-width: 700px){
.nav a {min-height: 44px;}
.experience-sources {font-size: 10px;}
.experience-itinerary {font-size: 12px;}
}
.gallery-track {position: absolute; inset: 0px; display: flex; overflow: auto hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; cursor: zoom-in; touch-action: manipulation;}
.gallery-track::-webkit-scrollbar {display: none;}
.gallery-track:active {cursor: grabbing;}
.photo-slide {position: relative; flex: 0 0 100%; min-width: 0px; height: 100%; scroll-snap-align: start; scroll-snap-stop: always;}
.photo-slide img {user-select: none; -webkit-user-drag: none;}
.hero-portrait .photo-slide:first-child img {object-position: center top;}
.gallery-controls[hidden] {display: none;}
.gallery-controls {display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; color: var(--muted); font-size: 10px;}
.gallery-nav {display: flex; align-items: center; gap: 4px;}
.gallery-controls button {border: 0px; background: none; color: var(--ink); min-width: 36px; min-height: 36px; padding: 6px; font-size: 17px; line-height: 1;}
.gallery-count {min-width: 57px; text-align: center; font-variant-numeric: tabular-nums; letter-spacing: 0.04em;}
.gallery-nav[hidden] {display: none;}
.photo[data-chart] .image-box {background: rgb(255, 255, 255);}
.photo[data-document] .image-box {background: rgb(249, 249, 249);}
.photo[data-chart] img, .photo[data-chart]:hover img, .photo[data-document] img, .photo[data-document]:hover img {object-fit: contain; filter: none; opacity: 1; transform: none;}
.photo[data-full-photo] .image-box {background: var(--paper);}
.photo[data-full-photo] img, .photo[data-full-photo]:hover img {object-fit: contain; object-position: center center; filter: none; opacity: 1; transform: none;}
.experience-photo[data-full-photo] .image-box {aspect-ratio: 4 / 3;}
.experience-photo[data-project] .image-box {aspect-ratio: 10 / 7;}
.photo[data-photo="experience-model"] .image-box, .photo[data-photo="experience-cccc4"] .image-box, .photo[data-photo="experience-geoscene"] .image-box {aspect-ratio: 16 / 9;}
.frame-landscape[data-full-photo] .image-box {aspect-ratio: 2 / 1;}
.frame-portrait[data-full-photo] .image-box {aspect-ratio: 3 / 4;}
.frame-detail[data-full-photo] .image-box {aspect-ratio: 4 / 3;}
.frames-grid .gallery-count {min-width: 45px;}
@media (max-width: 700px){
.frame-landscape[data-full-photo] .image-box {aspect-ratio: 4 / 3;}
.frame-portrait[data-full-photo] .gallery-controls, .frame-detail[data-full-photo] .gallery-controls {display: flex;}
}
.chart-viewer {border: 0px; padding: 18px; background: var(--paper); color: var(--ink); width: calc(100% - 32px); max-width: 1280px; max-height: calc(100dvh - 32px);}
.chart-viewer::backdrop {background: rgba(25, 25, 25, 0.627);}
.chart-toolbar {display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px;}
.chart-toolbar > div {display: flex; gap: 16px;}
.chart-toolbar button {border: 0px; background: none; padding: 8px 0px; font-size: 12px; min-height: 44px;}
.chart-toolbar button:hover {color: var(--orange);}
.chart-viewport {height: auto; aspect-ratio: var(--chart-ratio,1.6); max-height: min(68dvh, 100dvh - 210px); overflow: auto; overscroll-behavior: contain; background: rgb(255, 255, 255); margin-inline: auto;}
.chart-viewport img {width: 100%; height: 100%; object-fit: contain;}
.chart-viewer.is-zoomed .chart-viewport {height: min(68dvh, 100dvh - 210px); aspect-ratio: auto;}
.chart-viewer.is-zoomed img {width: var(--chart-width,1950px); max-width: none; max-height: none; height: auto; margin: 0px;}
#chart-caption {font-size: 12px; line-height: 1.7; margin-top: 12px;}
.chart-hint {font-size: 11px; line-height: 1.6; color: var(--muted); margin-top: 6px;}
@media (max-width: 700px){
.chart-viewer {padding: 12px;}
.chart-toolbar .meta {font-size: 9px; letter-spacing: 0.02em;}
.chart-toolbar button {font-size: 11px;}
.chart-toolbar > div {gap: 14px;}
}
.gallery-controls button:hover {color: var(--orange);}
.gallery-controls button:disabled {opacity: 0.35; cursor: default;}
.gallery-noscript {font-size: 11px; color: var(--muted); line-height: 1.6; margin-top: 10px;}
@media (max-width: 700px){
.gallery-controls button {min-width: 44px; min-height: 44px;}
.gallery-controls {gap: 8px; margin-top: 0px;}
}
.experience > summary {grid-template-columns: 86px minmax(0px, 1fr) 78px;}
.current-disclosure > summary {grid-template-columns: minmax(0px, 1fr) 78px; row-gap: 6px;}
.current-disclosure .disclosure-heading {grid-area: 1 / 1;}
.current-disclosure .disclosure-hint {grid-area: 2 / 1; margin: 0px;}
.current-disclosure > summary > .disclosure-action {grid-area: 1 / 2 / 3;}
.experience > summary, .current-disclosure > summary {position: relative;}
.experience > summary::after, .current-disclosure > summary::after {content: ""; position: absolute; inset: auto 0px 0px; height: 1px; background: var(--orange); transform: scaleX(0); transform-origin: left center; transition: transform 0.2s;}
.experience[open] > summary::after, .current-disclosure[open] > summary::after {transform: scaleX(1);}
.disclosure-action {display: inline-flex; align-items: center; place-self: center end; gap: 9px; min-height: 32px; color: var(--ink);}
.disclosure-label {font-size: 12px; font-weight: 500; line-height: 1.5; border-bottom: 1px solid var(--orange); padding-bottom: 3px; white-space: nowrap;}
.disclosure-action .expand {width: 22px; height: 22px; flex: 0 0 auto;}
.disclosure-action .expand::before, .disclosure-action .expand::after {left: 3px; top: 10px; width: 16px; background: var(--orange);}
.disclosure-open {display: none;}
details[open] > summary .disclosure-closed {display: none;}
details[open] > summary .disclosure-open {display: inline;}
@media (hover: hover) and (pointer: fine){
.experience > summary:hover::after, .current-disclosure > summary:hover::after {transform: scaleX(1);}
}
@media (max-width: 1050px){
.experience > summary {grid-template-columns: 65px minmax(0px, 1fr) 78px;}
}
@media (max-width: 700px){
.experience > summary {grid-template-columns: minmax(0px, 1fr) 72px; gap: 8px 16px; align-items: center;}
.experience-year {grid-area: 1 / 1; align-self: center;}
.experience h3 {grid-area: 2 / 1 / auto / -1;}
.experience > summary > .disclosure-action {grid-area: 1 / 2;}
.current-disclosure > summary {grid-template-columns: minmax(0px, 1fr) 72px; gap: 8px 14px;}
.current-disclosure .disclosure-heading {grid-column: 1 / -1;}
.current-disclosure .disclosure-hint {align-self: center;}
.current-disclosure > summary > .disclosure-action {grid-row: 2;}
.disclosure-label {font-size: 11px;}
}
.section-head {align-items: baseline;}
.section-head > * {min-width: 0px;}
.section-index {white-space: nowrap; padding-top: 0px;}
@media (max-width: 1050px){
.section-head {row-gap: 9px;}
.section-head .index-label {display: none;}
.section-index {grid-area: 1 / 1;}
.section-title {grid-area: 1 / 2 / auto / -1;}
.section-note {grid-area: 2 / 2 / auto / -1; text-align: left; margin-top: 0px;}
}
@keyframes disclosure-enter { 
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0px); }
}
.experience[open] > .experience-content, .current-disclosure[open] > .current-rows {animation: 0.26s ease-out 0s 1 normal both running disclosure-enter;}
.experience[open] > summary .disclosure-label, .current-disclosure[open] > summary .disclosure-label {color: var(--orange);}
@supports (interpolate-size:allow-keywords) and (transition-behavior:allow-discrete) and selector(details::details-content){
.experience, .current-disclosure {interpolate-size: allow-keywords;}
.experience::details-content, .current-disclosure::details-content {block-size: 0px; opacity: 0; overflow: clip; transition: block-size 0.34s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s, content-visibility 0.34s allow-discrete;}
.experience[open]::details-content, .current-disclosure[open]::details-content {block-size: auto; opacity: 1;}
.experience > .experience-content, .current-disclosure > .current-rows {transform: translateY(8px); transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);}
.experience[open] > .experience-content, .current-disclosure[open] > .current-rows {animation: auto ease 0s 1 normal none running none; transform: translateY(0px);}
}
@media (prefers-reduced-motion: reduce){
.experience::details-content, .current-disclosure::details-content, .experience > .experience-content, .current-disclosure > .current-rows {animation: auto ease 0s 1 normal none running none !important; transition: none !important; transform: none !important;}
}