/* Motion is progressive enhancement. The static document is always usable. */
html.lenis, html.lenis body { scroll-behavior: auto; }
.hero { background: radial-gradient(ellipse at 50% 74%, #f8fbff, #fff 62%); }
.hero h1 { font-size: clamp(52px,6.5vw,100px); }
.hero h1 > div { padding-bottom: .07em; margin-bottom: -.07em; }
.app-dock { position: relative; isolation: isolate; }
.dock-app { z-index: 1; }
.dock-app > .app-icon { transition: box-shadow .4s; }
.dock-app:hover > .app-icon { scale: 1; }
.dock-halo { position: absolute; z-index: 0; pointer-events: none; left: -8%; top: 10%; width: 116%; height: 69%; border-radius: 50%; border: 2px solid #ffffffef; background: linear-gradient(120deg,#d8f5ff50,#fff9 42%,#ede5ff5c 82%,#d7f6ff5c); box-shadow: 0 6px 28px #9ddeef35,inset 0 -1px 8px #fff,0 -4px 22px #e7defb30; }
.nav-links a { position: relative; }
.nav-links a:after { content: ''; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.22,1,.36,1); }
.nav-links a:hover:after, .nav-links a[aria-current]:after { transform: scaleX(1); }
.button { position: relative; overflow: hidden; isolation: isolate; transition: background .25s, box-shadow .25s, scale .15s; }
.button:active { scale: .97; }
.button:before { content: ''; z-index: -1; position: absolute; inset: 0; background: linear-gradient(110deg,transparent 20%,#fff2 48%,transparent 76%); transform: translateX(-105%); transition: transform .7s cubic-bezier(.22,1,.36,1); }
.button:hover:before { transform: translateX(105%); }
.button:hover { background: #0065ce; }
.button svg { transition: transform .3s cubic-bezier(.22,1,.36,1); }
.button:hover svg { transform: translate(2px,-1px); }
.theme-red .button:hover { background: #ad2a1c; }
.theme-mint .button:hover { background: #0b6d63; }
.chapter-rail { visibility: hidden; transition: opacity .3s, visibility .3s; }
.chapter-rail.is-visible { visibility: visible; }
.chapter-rail a { height: 44px; }
.chapter-rail i { box-shadow: 0 0 0 4px #ffffff70; }
.chapter .project-title > span { padding-bottom: .1em; margin-bottom: -.1em; }
.chapter-stage { border-top: 1px solid #fff9; }
.theme-dark .chapter-stage { border-top-color: #23272f; }
.preview-caption { color: #677180; font-size: 11px; }
.theme-dark .preview-caption, .theme-dark .chapter-index { color: #a1a9b6; }
.chapter-index { color: #677180; }
.chapter-index i { opacity: 1; color: #6c7685; }
.theme-dark .chapter-index i { color: #a1a9b6; }
.ma-float > b { font-weight: 400; }
.personal-links a { position: relative; transition: border-color .4s; }
.personal-links a:after { content: ''; position: absolute; height: 1px; bottom: -1px; left: 0; width: 100%; background: #0071e3; transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.22,1,.36,1); }
.personal-links a:hover:after, .personal-links a:focus-visible:after { transform: scaleX(1); }
.personal-links p, .site-footer, .empty-editorial p, .coming-soon, .editorial-page h1 > span, .editorial-intro, .resume-section article > span, .post-list time, .post-page time, .post-list p, .text-link { color: #646d7a; }
.editorial-page { overflow-wrap: anywhere; }
.empty-mark { color: #edf0f5; }
.empty-editorial p { text-wrap: balance; }
.product-art { transform-style: preserve-3d; }
@media(min-width:1500px) {
  .hero-button { font-size: 20px; padding: 19px 42px; min-height: 66px; }
  .dock-app > .app-icon { width: 144px; height: 144px; }
  .app-dock { max-width: 1170px; margin-top: 84px; }
  .dock-app { gap: 28px; }
  .dock-app > span:nth-child(2) { font-size: 19px; }
}
@media(max-width:999px) {
  .hero h1 { font-size: clamp(42px,6.8vw,67px); }
  .dock-halo { left: -5%; width: 110%; }
}
@media(max-width:600px) {
  .hero h1 { font-size: clamp(34px,8.9vw,48px); }
  .hero { padding-top: calc(var(--nav) + 75px); }
  .dock-halo { top: 14%; height: 68%; left: -5%; transform: rotate(-12deg); opacity: .72; }
  .nav-links a:after { bottom: 8px; }
  .preview-caption { font-size: 10px; }
  .next-chapter h2 { white-space: normal; }
}
@media(max-width:360px) { .hero h1 { font-size: 32px; } }
@media(prefers-reduced-motion:reduce) {
  .hero-content,.app-dock,.dock-halo,.chapter-copy > *,.chapter .project-title span,.product-art,.next-chapter > * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

/* Personal portfolio: three clear paths and an open editorial finish. */
.hero-content > p { max-width: 1080px; margin-left: auto; margin-right: auto; text-wrap: balance; }
.hero-actions { display: flex; justify-content: center; align-items: center; gap: 52px; margin-top: 42px; }
.hero-actions .hero-button { margin-top: 0; }
.hero-text-link { display: inline-flex; align-items: center; gap: 15px; min-height: 48px; font-size: 22px; letter-spacing: -.025em; transition: color .25s; }
.hero-text-link svg { width: 21px; height: 21px; color: #667080; transition: transform .3s; }
.hero-text-link:hover { color: var(--blue); }
.hero-text-link:hover svg { transform: translateX(4px); color: currentColor; }
.works-section { position: relative; }
.legacy-anchor { position: absolute; top: 0; left: 0; }
.works-intro { max-width: 1410px; margin: auto; padding: 72px 44px 68px; display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; }
.works-intro h2 { font-size: 48px; font-weight: 600; letter-spacing: -.045em; }
.works-intro p { margin-top: 14px; color: #646d7a; font-size: 19px; }
.works-count { font-size: 14px; color: #646d7a; white-space: nowrap; padding-bottom: 6px; font-variant-numeric: tabular-nums; }
.project-kind { margin-left: 20px; letter-spacing: .02em; }
.project-monogram { font-size: 48px; color: #315c91; font-weight: 600; }
.chapter-label .project-monogram { font-size: 18px; }
.project-cover { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 22px; background: #fff; box-shadow: 0 25px 70px -35px #1b3a6c50; }
.project-cover img { width: 100%; height: 100%; object-fit: cover; }
.project-cover-type { padding: 10%; display: flex; flex-direction: column; justify-content: center; color: var(--ink); }
.project-cover-type > span { color: #646d7a; font-size: 16px; }
.project-cover-type > strong { font-size: clamp(32px,4vw,62px); letter-spacing: -.045em; line-height: 1.2; margin: 25px 0; overflow-wrap: anywhere; }
.project-cover-type > p { color: #646d7a; font-size: 18px; }
.next-chapter { max-width: 1440px; padding: 112px 88px 100px; }
.next-chapter h2 { font-size: clamp(58px,7.1vw,110px); letter-spacing: -.065em; line-height: 1.25; }
.next-intro { font-size: clamp(20px,2.25vw,35px); color: #646d7a; text-align: center; margin-top: 18px; text-wrap: balance; }
.personal-links { margin-top: 80px; padding-top: 50px; border-top: 1px solid #dfe2e8; gap: 0; }
.personal-links > a { padding: 22px 42px 26px; border-bottom: 0; }
.personal-links > a + a { border-left: 1px solid #dfe2e8; padding-left: 96px; }
.personal-links > a > span { font-size: 60px; font-weight: 450; line-height: 1.15; letter-spacing: -.045em; }
.personal-links svg { width: 35px; height: 35px; color: #242b34; }
.personal-links h3 { font-size: 30px; font-weight: 550; letter-spacing: -.03em; margin-top: 28px; }
.personal-links p { font-size: 22px; margin-top: 14px; text-wrap: pretty; }
.personal-links small { display: block; font-size: 17px; margin-top: 40px; color: #646d7a; }
.personal-links a:after { left: 42px; width: calc(100% - 84px); }
.personal-links a + a:after { left: 96px; width: calc(100% - 138px); }
.editorial-links { display: flex; flex-wrap: wrap; gap: 18px 38px; margin-top: 42px; padding-top: 24px; border-top: 1px solid #e6e8ed; }
.editorial-links a { min-height: 44px; display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: #006acb; }
.editorial-links svg { width: 18px; height: 18px; transition: transform .25s; }
.editorial-links a:hover svg { transform: translateX(4px); }
.resume-download { margin-top: 30px; }
.site-footer .wordmark { font-size: 14px; }
.site-footer > span, .back-top { font-size: 13px; }
@media(min-width:1500px) {
  .hero-content > p { font-size: 28px; }
  .hero-actions { margin-top: 42px; }
  .app-dock { margin-top: 84px; }
}
@media(max-width:1200px) {
  .personal-links > a { padding-left: 24px; padding-right: 24px; }
  .personal-links > a + a { padding-left: 48px; }
  .personal-links > a > span { font-size: 48px; }
  .personal-links h3 { font-size: 26px; }
  .personal-links p { font-size: 18px; }
  .personal-links a:after { left: 24px; width: calc(100% - 48px); }
  .personal-links a + a:after { left: 48px; width: calc(100% - 72px); }
}
@media(max-width:999px) {
  .hero-content > p { max-width: 680px; font-size: 20px; }
  .hero-actions { gap: 36px; margin-top: 32px; }
  .hero-text-link { font-size: 18px; }
  .works-intro { padding: 58px 40px; }
  .works-intro h2 { font-size: 38px; }
  .works-intro p { font-size: 17px; }
  .next-chapter { padding: 85px 48px 75px; }
  .personal-links { margin-top: 54px; padding-top: 30px; }
  .personal-links p { font-size: 17px; }
  .personal-links small { font-size: 14px; margin-top: 28px; }
}
@media(max-width:600px) {
  .hero { padding-top: calc(var(--nav) + 65px); padding-bottom: 75px; }
  .hero h1 { white-space: normal; }
  .hero-content > p { white-space: normal; max-width: 335px; font-size: 15px; line-height: 1.8; margin: 18px auto 0; text-wrap: pretty; }
  .hero-actions { gap: 24px; margin-top: 28px; }
  .hero-actions .hero-button { padding: 13px 22px; min-height: 48px; }
  .hero-text-link { font-size: 15px; gap: 7px; min-height: 48px; }
  .hero-text-link svg { width: 16px; height: 16px; }
  .app-dock { margin-top: 51px; }
  .works-intro { padding: 44px 24px 40px; align-items: flex-start; gap: 14px; }
  .works-intro h2 { font-size: 31px; }
  .works-intro p { font-size: 14px; margin-top: 12px; max-width: 220px; }
  .works-count { font-size: 11px; padding-top: 15px; }
  .project-kind { margin-left: 12px; }
  .project-monogram { font-size: 32px; }
  .next-chapter { padding: 70px 27px 60px; }
  .next-chapter h2 { font-size: 49px; white-space: normal; }
  .next-intro { font-size: 16px; margin-top: 18px; }
  .personal-links { display: block; margin-top: 40px; padding-top: 0; }
  .personal-links > a, .personal-links > a + a { display: block; padding: 30px 0; border-left: 0; }
  .personal-links > a + a { border-top: 1px solid #dfe2e8; }
  .personal-links > a > span { font-size: 39px; }
  .personal-links svg { width: 27px; height: 27px; }
  .personal-links h3 { margin-top: 17px; font-size: 22px; }
  .personal-links p { font-size: 15px; margin-top: 9px; }
  .personal-links small { font-size: 12px; margin-top: 20px; }
  .personal-links a:after, .personal-links a + a:after { left: 0; width: 100%; }
  .editorial-links { gap: 10px 25px; margin-top: 30px; padding-top: 18px; }
  .editorial-links a { font-size: 14px; }
  .site-footer .wordmark { font-size: 12px; }
  .site-footer > span, .back-top { font-size: 11px; }
}
@media(max-width:360px) {
  .hero-content > p { max-width: 290px; font-size: 14px; }
  .hero-actions { gap: 16px; }
  .hero-actions .hero-button { padding-left: 18px; padding-right: 18px; }
  .hero-text-link { font-size: 14px; }
  .works-intro { padding-left: 20px; padding-right: 20px; }
  .works-intro p { max-width: 192px; }
  .next-chapter { padding-left: 24px; padding-right: 24px; }
  .next-chapter h2 { font-size: 44px; }
}

/* The portfolio is one continuous path; every work gets a full-size chapter. */
.hero { height: auto; min-height: 0; max-height: none; padding: 132px 40px 66px; overflow: visible; background: #fff; }
.hero h1 { font-size: clamp(54px,6.1vw,94px); }
.hero-content > p { font-size: clamp(18px,1.6vw,25px); margin-top: 23px; }
.hero-actions { margin-top: 30px; gap: 42px; }
.hero-actions .hero-button { min-height: 58px; font-size: 18px; padding: 16px 32px; }
.hero-text-link { font-size: 20px; }
.works-intro { max-width: 1536px; padding: 28px 64px 38px; border-top: 1px solid #eef0f3; }
.works-intro h2 { font-size: 32px; letter-spacing: -.035em; }
.works-intro p { font-size: 16px; margin-top: 10px; }
@media(max-width:999px) {
  .hero { padding: 124px 32px 52px; }
  .hero h1 { font-size: clamp(44px,6.8vw,67px); }
  .hero-content > p { font-size: 19px; max-width: 640px; }
  .hero-actions .hero-button { font-size: 16px; min-height: 52px; padding: 14px 28px; }
  .hero-text-link { font-size: 18px; }
  .works-intro { padding: 25px 40px 32px; }
}
@media(max-width:600px) {
  .hero { padding: 112px 22px 42px; }
  .hero h1 { font-size: clamp(30px,8.8vw,49px); }
  .hero-content > p { font-size: 15px; line-height: 1.8; max-width: 335px; margin-top: 18px; }
  .hero-actions { margin-top: 25px; gap: 22px; }
  .hero-actions .hero-button { min-height: 48px; font-size: 14px; padding: 13px 22px; }
  .hero-text-link { font-size: 15px; }
  .works-intro { padding: 24px 24px 28px; }
  .works-intro h2 { font-size: 26px; }
  .works-intro p { font-size: 13px; margin-top: 8px; }
  .works-count { padding-top: 9px; }
}
@media(max-width:360px) {
  .hero { padding-left: 16px; padding-right: 16px; }
  .hero-actions { gap: 16px; }
  .hero-actions .hero-button { padding-left: 18px; padding-right: 18px; }
  .hero-text-link { font-size: 14px; }
}

.product-showcase { display: block; min-width: 0; }
.chapter .preview-caption { display: flex; align-items: center; justify-content: space-between; font-size: 12px; padding: 0 6px; }
.preview-open { display: inline-flex; align-items: center; gap: 4px; }
.preview-open svg { width: 16px; height: 16px; transition: transform .3s; }
.product-showcase:hover .preview-open { color: var(--accent); }
.product-showcase:hover .preview-open svg { transform: translate(2px,-2px); }
.theme-dark .product-showcase:hover .preview-open { color: #daff8b; }
@media(max-width:600px) { .chapter .preview-caption { font-size: 11px; } }