/* Desktop proportions follow the 1920 × 5021 PDF canvas. */
.hero { position: relative; height: 46.875vw; color: white; background: #35829a url('../assets/images/hero/hero-background.webp') center top / 100% auto no-repeat; }
.site-header { --header-expanded-top: 2.8vw; --header-expanded-bottom: 2.6vw; --header-compact-space: 22px; padding-top: var(--header-expanded-top); }
.site-header.is-fixed { position: fixed; inset: 0 0 auto; z-index: 30; padding-top: var(--header-compact-space); background: #28758b; box-shadow: 0 5px 18px #123e5024; animation: header-expand 220ms ease-out; }
.site-header.is-fixed .header-rule { margin-top: var(--header-compact-space); height: 3px; animation: header-rule-expand 220ms ease-out; }
html { scroll-padding-top: var(--navigation-offset, 120px); }
@keyframes header-expand { from { padding-top: 0; } to { padding-top: var(--header-compact-space); } }
@keyframes header-rule-expand { from { margin-top: 0; } to { margin-top: var(--header-compact-space); } }
@media (prefers-reduced-motion: reduce) { .site-header.is-fixed, .site-header.is-fixed .header-rule { animation: none; } }
.header-inner { display: flex; align-items: center; gap: 1.8vw; }
.logo { width: 9.6354vw; flex-shrink: 0; }
.main-nav { margin-left: auto; display: flex; align-items: center; gap: 1.65vw; font-size: 1.6667vw; color: #e2e9dc; white-space: nowrap; }
.header-tools { display: flex; align-items: center; gap: .9vw; }
.header-tools button { padding: 0; border: 0; background: transparent; width: 1.35vw; }
.header-rule { position: relative; margin-top: 2.6vw; height: 3px; }
.scroll-progress { --progress-tip: clamp(36px, 4.4vw, 84px); position: absolute; inset: 0; background: #a5c9c2a6; color: var(--color-pale); pointer-events: none; z-index: 20; }
.scroll-progress-fill { position: absolute; inset: 0 auto 0 0; width: max(0px, calc(var(--progress-tip) - 8px)); background: currentColor; }
.scroll-progress-arrow { position: absolute; left: var(--progress-tip); top: 50%; width: 10px; height: 12px; transform: translate(-100%, -50%); }
.scroll-progress-arrow path { fill: currentColor; stroke: currentColor; stroke-width: 1; stroke-linejoin: round; }
.hero-copy { padding-top: 8vw; }
.hero h1 { font-size: 7.3vw; line-height: 1; letter-spacing: -.14vw; }
.hero-subtitle { font-size: 3.75vw; font-weight: bold; line-height: 1.4; }
.hero-caption { margin-top: 5.5vw; font-family: "Brush Script MT", "Segoe Script", cursive; font-size: 1.25vw; font-style: italic; line-height: 1.1; }
.interests { height: 9.375vw; background: var(--color-cream); }
.interest-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: center; gap: 1vw; height: 100%; }
.interest-list li { display: flex; min-width: 0; align-items: center; gap: .65vw; color: #aaa98e; }
.interest-list img { flex: 0 0 5vw; width: 5vw; height: 4.8vw; object-fit: contain; }
.interest-list h2 { font-size: 1.6vw; font-weight: 400; white-space: nowrap; }
.interest-list p { font-size: .72vw; white-space: nowrap; }
.motto { height: 4.375vw; overflow: hidden; background: var(--color-blue-soft); color: var(--color-paper); }
.motto-track { display: flex; width: max-content; animation: motto-scroll 28s linear infinite; will-change: transform; }
.motto p { flex: 0 0 auto; font-size: 4.15vw; white-space: nowrap; line-height: 1.05; }
@keyframes motto-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
html.fonts-loading .motto:not(.fonts-ready) .motto-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .motto-track { animation: none; will-change: auto; }
}
.works { height: 48vw; padding-top: 3vw; color: var(--color-brown); }
.project { display: grid; grid-template-columns: 64% 34%; gap: 2%; }
.project-art { border: .2vw solid #a28d73; padding: .45vw; background: #fff; height: 31.93vw; }
.project-art img { width: 100%; height: 100%; object-fit: fill; }
.project-copy { display: flex; flex-direction: column; }
.project-heading { display: flex; gap: 1.5vw; align-items: center; }
.project-number { font-size: 6vw; line-height: .95; }
.project-heading h2 { font-size: 2.55vw; line-height: 1; white-space: nowrap; }
.project-heading p { font-size: 1vw; line-height: 1.5; }
.project-description { margin-top: 2.2vw; font-family: var(--font-sans); font-size: 1.25vw; line-height: 1.85; color: #a28f6e; }
.project-tags { display: flex; justify-content: space-between; padding: 0 .5vw; margin-top: 2vw; gap: .8vw; font: 1.15vw/1.7 var(--font-sans); color: var(--color-cream); }
.project-tags li { padding: 0 1vw; border-radius: 2vw; background: #9a9d56; }
.project-tags li:nth-child(2) { background: #7198a5; }
.project-tags li:nth-child(3) { background: #8e734a; }
.project-bottom { margin-top: auto; }
.project-link { display: inline-block; border: 0; padding: .5vw .9vw; background: #b51e2b; color: #f6d9c9; font-size: 1.65vw; }
.project-quote { margin-top: 1vw; font-size: 1.55vw; white-space: nowrap; color: #ac9878; }
.project-quote-en { font-size: .56vw; line-height: 1.8; color: #ac9878; }
/* 5 major points, 24 minor points per interval; all positions share one rail. */
.project-timeline { margin-top: 4vw; padding-inline: .5vw; }
.timeline-track { position: relative; height: 1vw; }
.timeline-point { position: absolute; left: var(--point-position); top: 50%; transform: translate(-50%, -50%); width: .4vw; height: .4vw; border-radius: 50%; background: #c3b89e; }
.timeline-point.is-major { width: .72vw; height: .72vw; }
.timeline-point.is-reached { background: var(--color-brown); }
.timeline-leaf { position: absolute; width: 2vw; max-width: none; left: var(--plant-position); bottom: 50%; transform: translateX(-40%); pointer-events: none; }
.project-timeline-labels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.project-timeline-labels li { padding-top: 1.05vw; color: #c0b39a; }
.project-timeline .is-current { color: #a48860; }
.project-timeline h3 { font-size: 1.7vw; }
.project-timeline p { font-size: 1.25vw; line-height: 1.5; }
.experience-banner { height: 23.75vw; background: var(--color-blue); color: var(--color-pale); }
.experience-inner { display: flex; justify-content: space-between; height: 100%; padding-block: 3.05vw 2.8vw; }
.experience-years { position: relative; width: 43vw; height: 100%; }
.experience-years > strong { display: flex; align-items: flex-start; gap: 1.4vw; height: calc(100% - .7vw); padding: 0; margin-top: .7vw; }
.experience-five { height: 100%; width: auto; overflow: visible; }
.experience-plus { width: 6.316vw; height: auto; overflow: visible; }
.experience-five text, .experience-plus text { font: 700 100px var(--font-impact); fill: currentColor; }
.experience-description { position: absolute; left: calc(17.2vw * 56.4 / 74 + 1.4vw); bottom: 0; }
.experience-years h2 { font-size: 1.95vw; }
.experience-years p { font-size: 1.2vw; margin-top: .8vw; color: #a9c9c3; text-box: trim-both text; }
.experience-title { display: flex; flex-direction: column; justify-content: space-between; text-align: right; }
.experience-title h2 { font: bold 4.4vw/1 var(--font-sans); text-box: trim-both cap alphabetic; }
.experience-title p { font: bold 2.3vw/1.5 var(--font-sans); }
.experience-title > strong { display: block; margin-top: auto; font: bold 9vw/1 var(--font-sans); color: #75a6a6; text-box: trim-both cap alphabetic; transform: translateY(-.27vw); }
.profile { height: 27.4vw; padding-top: 4.5vw; font-family: var(--font-sans); }
.profile-grid { display: grid; grid-template-columns: 20% 37.5% 39%; gap: 2.6vw 1.75%; }
.profile-grid > div { border-left: .16vw solid #5e9ba9; padding-left: .55vw; }
.profile-grid dt { font-size: 1.2vw; color: #7a7b6c; margin-bottom: .3vw; }
.profile-grid dd { font-size: 1.2vw; line-height: 1.45; }
.profile-summary { margin-top: 5.5vw; font-size: 1.25vw; line-height: 1.8; color: #797b70; }
.career { height: 41.55vw; overflow: hidden; background: #919071; color: var(--color-pale); }
.career-inner { display: grid; grid-template-columns: 60% 40%; height: 100%; }
.career-portrait { position: relative; height: 100%; overflow: hidden; }
.career-portrait img { position: absolute; width: 23.96vw; max-width: none; top: 1.8vw; left: 10.5vw; }
.career-copy { padding-top: 3.3vw; }
.career-copy header { display: flex; align-items: center; gap: 1.1vw; }
.career-copy header > span { font: bold 6vw/.9 var(--font-sans); }
.career-copy h2 { font-size: 2vw; white-space: nowrap; }
.career-copy header p { font: 1.55vw/1.5 var(--font-sans); }
.career-date { font-size: 1.9vw; font-weight: bold; margin-top: 1.3vw; }
.career-details { list-style: decimal; padding-left: 1.4vw; margin-top: 1.7vw; font: 1.25vw/1.75 var(--font-sans); }
.career-footer { display: flex; align-items: flex-start; gap: 2.4vw; margin-top: 3.3vw; }
.career-labels { display: flex; align-items: flex-start; gap: 2.1vw; flex-shrink: 0; }
.career-labels li { writing-mode: vertical-rl; padding: 1.35vw .55vw; border: .12vw solid var(--color-pale); font: 1.55vw/1 var(--font-sans); background: #94b1c6; }
.career-labels li:nth-child(2) { background: #c69946; }.career-labels li:nth-child(3) { background: #7caf84; }
.career-footer > div > p:first-child { font-size: 1.35vw; line-height: 1.5; }
.career-quote { margin-top: 3vw; font: italic .85vw/1.6 "Segoe Script", cursive; }
.thinking { min-height: 56.18vw; padding-top: 4.1vw; color: #96967b; }
.thinking-inner { display: flex; justify-content: space-between; }
.thinking h2 { font-size: 4.7vw; line-height: 1.2; }
.thinking-subtitle { display: flex; align-items: center; gap: 2vw; margin-top: .6vw; }
.thinking-subtitle strong { font-size: 2.7vw; }.thinking-subtitle p { font-size: 1.95vw; }
.thinking-note { text-align: right; padding-top: .5vw; }.thinking-note > p:first-child { font-size: 1.65vw; }
.thinking-note > span { display: inline-block; font-size: 1vw; border-bottom: 1px solid; padding-bottom: .4vw; }
.thinking-english { font-size: 1.55vw; margin-top: 2vw; }