@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500&family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');

:root { --bg:#fbfbfd; --surface:#fff; --ink:#171719; --muted:#74747c; --line:rgba(23,23,25,.12); --accent:#3568ce; --dark:#151517; --radius:24px; --section-content-gap:56px; --content-scale:1; --scaled-panel-height:calc(100dvh - 88px); color-scheme:light; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:'Manrope','Noto Sans SC',sans-serif; -webkit-font-smoothing:antialiased; }
body.dark { --bg:#111113; --surface:#1a1a1d; --ink:#f5f5f7; --muted:#a1a1a8; --line:rgba(255,255,255,.14); --dark:#f5f5f7; color-scheme:dark; }
a { color:inherit; text-decoration:none; }
img { -webkit-user-drag:none; user-select:none; }
button { font:inherit; color:inherit; }
.site-header { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; height:88px; padding:0 clamp(24px,4vw,72px); border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--bg) 90%,transparent); backdrop-filter:blur(22px); }
.brand,.main-nav,.contact-links,.hero-actions { display:flex; align-items:center; }
.brand { gap:22px; color:var(--ink); }
.brand-name { font-size:30px; font-weight:700; line-height:1; letter-spacing:-.06em; }
.brand-divider { width:1px; height:36px; background:var(--line); }
.brand-role { color:var(--muted); font:500 11px 'DM Mono',monospace; letter-spacing:.22em; white-space:nowrap; }
.brand-mark { display:inline-grid; place-items:center; width:28px; height:28px; border-radius:9px; background:var(--ink); color:var(--bg); font:500 10px 'DM Mono',monospace; letter-spacing:-.1em; }
.main-nav { gap:60px; margin-left:auto; color:var(--ink); }
.main-nav a { position:relative; display:flex; align-items:center; padding:12px 0; white-space:nowrap; transition:color .25s ease; }
.main-nav a:hover { color:var(--accent); }
.nav-label { position:relative; font-size:16px; font-weight:600; letter-spacing:-.03em; }
.nav-label::after { content:""; position:absolute; right:0; bottom:-10px; left:0; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:center; transition:transform .3s ease; }
.main-nav a[aria-current="page"] .nav-label::after { transform:scaleX(1); }
.section-shell { width:min(1280px,calc(100% - 48px)); margin:0 auto; }
.hero { position:relative; min-height:calc(100dvh - var(--header-height)); display:grid; grid-template-columns:1fr .8fr; align-items:center; gap:8vw; padding:72px 0 100px; }
.eyebrow { margin:0 0 24px; color:var(--muted); font:500 10px 'DM Mono',monospace; letter-spacing:.12em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; } h1,h2,h3 { letter-spacing:-.06em; font-weight:600; } h1 { margin-bottom:28px; font-size:clamp(48px,7vw,102px); line-height:.98; } h1 em,h2 em { color:var(--accent); font-style:normal; } h2 { margin-bottom:0; font-size:clamp(40px,5vw,72px); line-height:1; } h3 { margin:0; font-size:20px; }
.hero-description { max-width:460px; margin-bottom:0; color:var(--muted); font-size:15px; line-height:1.9; }
.hero-meta { display:flex; align-items:center; margin:64px 0 0; padding:0; color:var(--muted); font-size:15px; font-weight:600; line-height:1.4; list-style:none; white-space:nowrap; }
.hero-meta li { padding:0 20px; }
.hero-meta li:first-child { padding-left:0; }
.hero-meta li + li { border-left:1px solid var(--line); }
.hero-actions { gap:14px; margin-top:44px; }.button { display:inline-flex; gap:22px; align-items:center; justify-content:space-between; min-width:150px; padding:14px 17px; border:1px solid var(--line); border-radius:999px; font-size:12px; transition:transform .25s ease,background .25s ease,border-color .25s ease; }.button:hover { transform:translateY(-2px); }.button-primary { background:var(--ink); color:var(--bg); border-color:var(--ink); }.button-primary:hover { background:var(--accent); border-color:var(--accent); }.button-ghost:hover { border-color:var(--accent); color:var(--accent); }
.scroll-guide { position:absolute; bottom:24px; left:50%; display:flex; align-items:center; gap:12px; color:var(--muted); font-size:14px; letter-spacing:.02em; white-space:nowrap; transform:translateX(-50%); }
.scroll-guide-mouse { position:relative; display:block; width:18px; height:28px; border:1px solid currentColor; border-radius:10px; }
.scroll-guide-mouse::before { content:""; position:absolute; top:5px; left:50%; width:3px; height:7px; border-radius:3px; background:var(--accent); transform:translateX(-50%); animation:scroll-wheel 1.8s ease-in-out infinite; }
@keyframes scroll-wheel { 0%,100% { opacity:.45; transform:translate(-50%,0); } 50% { opacity:1; transform:translate(-50%,5px); } }
.hero-profile { position:relative; width:min(30vw,360px); aspect-ratio:1; justify-self:end; }.hero-profile img { position:absolute; inset:16%; width:68%; height:68%; object-fit:cover; border-radius:50%; }.profile-orbit { position:absolute; inset:0; border:1px solid var(--line); border-radius:50%; }.profile-orbit:after { content:''; position:absolute; top:5%; right:7%; width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 15%,transparent); }.profile-caption { position:absolute; left:2%; bottom:0; display:flex; width:96%; justify-content:space-between; color:var(--muted); font:10px 'DM Mono',monospace; letter-spacing:.08em; }
.projects-section { padding:130px 0 150px; }.section-heading { display:flex; align-items:end; justify-content:space-between; padding-bottom:50px; border-bottom:1px solid var(--line); }.section-note { max-width:250px; margin:0; color:var(--muted); font-size:13px; line-height:1.8; text-align:right; }
.project-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0 5%; }.project-card { position:relative; display:flex; min-height:250px; padding-top:var(--section-content-gap); flex-direction:column; align-items:center; justify-content:flex-start; text-align:center; transition:transform .3s ease; }.project-card:hover { transform:translateY(-8px); }.project-card img { width:128px; height:128px; margin-bottom:23px; border-radius:29px; box-shadow:0 14px 30px rgba(0,0,0,.13); }.project-card p { margin:7px 0 0; color:var(--muted); font-size:12px; }.project-index { position:absolute; top:18px; left:0; color:var(--muted); font:10px 'DM Mono',monospace; }
@media (min-width:641px) {
  .projects-section { display:flex; height:100%; padding-bottom:24px; flex-direction:column; }
  .projects-section .section-heading { flex:0 0 auto; }
  .project-grid { flex:1 1 auto; min-height:0; padding-top:var(--section-content-gap); grid-template-rows:repeat(2,minmax(0,1fr)); row-gap:clamp(10px,2dvh,22px); }
  .project-card { min-height:0; padding-top:0; }
  .project-card:nth-child(n+5) { top:-18px; }
  .project-card img { width:clamp(80px,14dvh,128px); height:clamp(80px,14dvh,128px); margin-bottom:clamp(10px,2dvh,23px); border-radius:clamp(19px,3dvh,29px); }
}
.showcase-section { padding:130px 0 150px; background:var(--dark); color:var(--bg); }.showcase-section .section-note,.showcase-section .eyebrow { color:color-mix(in srgb,var(--bg) 54%,transparent); }.showcase-section .section-heading { border-color:rgba(255,255,255,.18); }.showcase-intro { display:grid; grid-template-columns:1fr 2fr; gap:10%; padding:48px 0 56px; }.showcase-intro p:last-child { max-width:470px; margin:0; color:color-mix(in srgb,var(--bg) 62%,transparent); font-size:14px; line-height:1.9; }.showcase-number { margin:0; font-size:clamp(50px,8vw,105px); line-height:.9; letter-spacing:-.08em; }.showcase-number span { display:block; margin-top:14px; font:10px 'DM Mono',monospace; letter-spacing:.1em; }.screen-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }.screen-card { overflow:hidden; margin:0; border-radius:var(--radius); background:#27272b; }.screen-card img { display:block; width:100%; height:auto; transition:transform .5s ease; }.screen-card:hover img { transform:scale(1.025); }
#showcase img { border:0; outline:0; box-shadow:none; }
.about-section { padding:130px 0 155px; }.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:13%; padding-top:56px; }.large-copy { max-width:470px; font-size:clamp(26px,3vw,40px); line-height:1.25; letter-spacing:-.05em; }.about-summary > p:nth-child(2) { max-width:460px; color:var(--muted); font-size:14px; line-height:1.9; }.skill-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:35px; }.skill-list span { padding:9px 12px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font:11px 'DM Mono',monospace; }.timeline { padding-top:7px; }.timeline-item { padding:0 0 32px 22px; margin-bottom:28px; border-left:1px solid var(--line); }.timeline-item:last-child { margin-bottom:0; }.timeline-item span { color:var(--accent); font:10px 'DM Mono',monospace; }.timeline-item h3 { margin:11px 0 7px; font-size:19px; letter-spacing:-.04em; }.timeline-item p { margin:0 0 8px; color:var(--muted); font-size:13px; }.timeline-item small { color:var(--muted); font-size:12px; }
.contact-section { padding:125px 0 140px; border-top:1px solid var(--line); background:var(--surface); }.contact-inner { text-align:center; }.contact-inner h2 { margin-bottom:40px; font-size:clamp(54px,8vw,108px); }.contact-inner .eyebrow { color:var(--accent); }.contact-links { justify-content:center; gap:12px; }.site-footer { display:flex; justify-content:space-between; padding:25px clamp(20px,4vw,64px); color:var(--muted); font:10px 'DM Mono',monospace; }.site-footer > div { display:flex; align-items:center; gap:10px; }.site-footer .brand-mark { width:22px; height:22px; border-radius:7px; font-size:8px; }.icp-link { transition:color .2s ease; }.icp-link:hover,.icp-link:focus-visible { color:var(--accent); }.icp-link:focus-visible { outline:1px solid currentColor; outline-offset:4px; }
.reveal { opacity:0; transform:translateY(20px); transition:opacity .7s ease,transform .7s ease; }.reveal.is-visible { opacity:1; transform:none; }
@media (max-width:900px) { .brand { gap:14px; }.brand-name { font-size:25px; }.brand-divider { height:30px; }.brand-role { font-size:9px; letter-spacing:.14em; }.main-nav { margin-left:24px; gap:30px; }.nav-label { font-size:14px; }.hero { grid-template-columns:1fr .65fr; gap:5vw; }.hero-meta { display:grid; grid-template-columns:max-content max-content; gap:10px 0; margin-top:40px; white-space:normal; }.hero-meta li { padding:0 16px; }.hero-meta li:nth-child(odd) { padding-left:0; border-left:0; }.hero-actions { margin-top:32px; }.project-grid { gap:0 3%; }.project-card img { width:105px; height:105px; }.screen-grid { grid-template-columns:repeat(3,1fr); } }
@media (min-width:641px) and (max-width:760px) { .brand-divider,.brand-role { display:none; }.brand-name { font-size:22px; }.main-nav { margin-left:16px; gap:18px; }.nav-label { font-size:13px; } }
@media (max-width:640px) { .site-header { height:64px; padding:0 20px; }.main-nav { display:none; }.section-shell { width:calc(100% - 40px); }.hero { min-height:auto; grid-template-columns:1fr; padding:88px 0 110px; }.hero-profile { width:240px; justify-self:start; margin:30px 0 0 20px; }.hero-description { font-size:14px; }.hero-meta { grid-template-columns:1fr 1fr; width:100%; font-size:12px; }.hero-meta li { padding-right:10px; }.hero-meta li:nth-child(4) { grid-column:1 / -1; padding-left:0; border-left:0; }.hero-actions { margin-top:28px; }.scroll-guide { display:none; }.projects-section,.about-section { padding:92px 0 105px; }.section-heading { display:block; padding-bottom:28px; }.section-note { margin-top:22px; text-align:left; }.project-grid { grid-template-columns:repeat(2,1fr); gap:0 10%; }.project-card { min-height:220px; }.project-card img { width:100px; height:100px; border-radius:23px; }.project-card h3 { font-size:16px; }.project-card p { font-size:10px; }.project-index { top:14px; }.showcase-section { padding:92px 0 105px; }.showcase-intro { display:block; padding:36px 0 40px; }.showcase-intro p:last-child { margin-top:32px; font-size:13px; }.screen-grid { grid-template-columns:repeat(2,1fr); gap:12px; }.screen-card { border-radius:16px; }.about-grid { grid-template-columns:1fr; gap:68px; padding-top:38px; }.contact-section { padding:94px 0 105px; }.contact-inner h2 { margin-bottom:32px; }.contact-links { flex-direction:column; align-items:stretch; }.button { min-width:0; }.site-footer { flex-direction:column; gap:14px; padding:22px 20px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; }.reveal { opacity:1; transform:none; } }

/* Fine tuning from browser review */
.brand-mark { width:28px; height:28px; border-radius:0; background:transparent; color:var(--ink); font:600 25px/1 'Noto Sans SC',sans-serif; letter-spacing:0; }
.hero-copy h1 em { display:inline-block; font-size:.6em; letter-spacing:-.045em; white-space:nowrap; }
.project-index { display:none; }
.showcase-section .section-heading h2 { font-size:clamp(34px,4vw,58px); }
.case-title-sub { font-size:.58em; letter-spacing:-.035em; }
.timeline-work { margin:10px 0 0; color:var(--muted); font-size:12px; line-height:1.8; }
.showcase-section .screen-grid { margin-top:32px; }
.work-history { padding-top:var(--section-content-gap); }
.resume-profile { max-width:620px; margin-bottom:52px; color:var(--muted); font-size:18px; line-height:1.8; }
.work-history .timeline { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 8%; padding-top:0; }
.work-history .timeline-item { padding:0 0 44px 24px; margin:0 0 24px; }
.work-history .timeline-item h3 { margin-top:12px; }
.resume-project { margin:0 !important; color:var(--ink) !important; font-size:13px !important; line-height:1.5; }
.work-history .timeline-item > .resume-list + p + .resume-project { margin-top:13px !important; }
.resume-list { margin:12px 0 22px; padding-left:22px; color:var(--muted); font-size:12px; line-height:1.85; }
.resume-list li { margin-bottom:7px; padding-left:3px; }
@media (max-width:900px) { .work-history .timeline { grid-template-columns:1fr; gap:0; } }
@media (max-width:640px) { .work-history { padding-top:var(--section-content-gap); }.resume-profile { margin-bottom:36px; font-size:16px; }.work-history .timeline-item { padding-left:18px; }.resume-list { font-size:11px; } }
.work-history .timeline { display:block; max-width:920px; }
.work-history .timeline-item > span { color:var(--muted); line-height:1.5; }
.work-history .timeline-item > p:not(.resume-project):not(.timeline-work) { margin-bottom:8px; color:var(--accent); font-weight:600; line-height:1.5; transform:translateY(10px); }

/* Fixed Chinese type scale */
.site-header .brand,
.site-header .main-nav a { font-size:inherit; }
.hero-copy h1 { font-size:48px; }
.button { font-size:16px; }
.section-heading h2,
.showcase-section .section-heading h2 { font-size:38px; }
.project-card h3 { font-size:20px; }
.work-history .timeline-item h3 { font-size:24px; }
.work-history .timeline-item > span { font-size:20px; }
.work-history .timeline-item > p:not(.resume-project):not(.timeline-work) { font-size:20px; }
.work-history .timeline-item .resume-project { font-size:20px !important; }
.work-history .resume-list { font-size:18px; }
.contact-inner h2 { font-size:38px; }
.contact-section { scroll-margin-top:74px; }
.contact-section { padding:clamp(56px,8dvh,92px) 0; }
.contact-inner { display:grid; grid-template-columns:minmax(0,.9fr) minmax(460px,1fr); align-items:center; gap:clamp(64px,10vw,150px); text-align:left; }
.contact-copy .eyebrow { margin-bottom:24px; color:var(--accent); }
.contact-inner .contact-copy h2 { max-width:560px; margin:0; font-size:clamp(42px,4.5vw,68px); line-height:1.08; }
.contact-inner .contact-copy h2 em { display:inline-block; margin-top:14px; }
.contact-content { display:grid; width:100%; max-width:430px; grid-template-columns:minmax(0,1fr) 184px; align-items:center; justify-self:start; gap:40px; }
.contact-details { display:grid; gap:28px; margin:0; font-style:normal; }
.contact-item { display:grid; gap:8px; }
.contact-item span { color:var(--muted); font-size:13px; }
.contact-item strong { font-size:18px; font-weight:500; letter-spacing:-.02em; overflow-wrap:anywhere; }
.wechat-contact { display:grid; justify-items:center; gap:14px; text-align:center; }
.wechat-qr-image { display:block; width:184px; aspect-ratio:1; object-fit:cover; border:1px solid var(--line); border-radius:12px; }
@media (max-width:900px) {
  .contact-inner { grid-template-columns:1fr; gap:48px; }
  .contact-content { grid-template-columns:minmax(0,1fr) 168px; gap:36px; }
  .wechat-qr-image { width:168px; }
}
@media (max-width:640px) {
  .contact-section { padding:52px 0 44px; }
  .contact-inner { gap:38px; }
  .contact-inner .contact-copy h2 { font-size:36px; }
  .contact-content { max-width:none; grid-template-columns:1fr; gap:34px; }
  .contact-details { gap:22px; }
  .contact-item strong { font-size:16px; }
  .wechat-contact { width:128px; gap:12px; }
  .wechat-qr-image { width:128px; border-radius:10px; }
}
.hero-copy h1 { font-size:68px; }
.hero-description { font-size:16px; }
.project-card h3 { font-size:24px; }
.project-card p { font-size:16px; }
.section-heading h2,
.showcase-section .section-heading h2 { font-size:40px; }
.work-history .timeline-item h3 { font-size:30px; }
.hero-description { max-width:none; white-space:nowrap; }
.project-card > div { position:relative; top:-10px; }
.work-history .timeline-item { display:grid; grid-template-columns:220px minmax(0,1fr); column-gap:44px; position:relative; padding:0 0 48px; border-left:0; }
.work-history .timeline-item::before { content:""; position:absolute; top:0; bottom:24px; left:220px; border-left:1px solid var(--line); }
.work-history .timeline-item > span { grid-column:1; grid-row:1; z-index:1; }
.work-history .timeline-item > h3 { grid-column:1; grid-row:1; z-index:1; margin-top:0; }
.work-history .timeline-item > span { grid-row:2; }
.work-history .timeline-item > span { font-family:'Manrope','Noto Sans SC',sans-serif; font-variant-numeric:normal; letter-spacing:0; }
.work-history .timeline-item--internal-transfer > .timeline-note { grid-column:1; grid-row:2; align-self:start; color:var(--muted); font-size:13px; line-height:1.5; white-space:nowrap; }
.work-history .timeline-item--internal-transfer > span { grid-row:2; align-self:start; margin-top:22px; }
.work-history .timeline-item > p,
.work-history .timeline-item > ol { grid-column:2; z-index:1; }
.hero-description strong { font-weight:700; }
@media (max-width:640px) {
  .hero-description { white-space:normal; }
  .work-history .timeline-item { display:block; padding-left:18px; border-left:1px solid var(--line); }
  .work-history .timeline-item > h3 { margin-top:0; }
  .work-history .timeline-item--internal-transfer > .timeline-note { display:block; margin-top:4px; }
  .work-history .timeline-item--internal-transfer > span { display:block; margin-top:4px; }
  .work-history .timeline-item::before { display:none; }
}

/* Current artwork showcase */
.showcase-section { --showcase-bg:#151517; --showcase-ink:#f5f5f7; --showcase-muted:#a9a9b0; --showcase-line:rgba(255,255,255,.16); background:var(--showcase-bg); color:var(--showcase-ink); }
body.dark .showcase-section { --showcase-bg:#18181b; }

/* Boundary-aware full-page navigation */
:root { --header-height:88px; --page-heading-offset:56px; --page-duration:720ms; --page-ease:cubic-bezier(.16,1,.3,1); }
html,body { height:100%; overflow:hidden; }
body { min-height:100dvh; }
.site-header { position:relative; flex:0 0 var(--header-height); height:var(--header-height); }
.page-viewport { position:relative; height:calc(100dvh - var(--header-height)); overflow:hidden; }
.page-track { display:flex; height:100%; flex-direction:column; will-change:transform; }
.page-track.is-ready { transition:transform var(--page-duration) var(--page-ease); }
.page-panel { position:relative; flex:0 0 100%; width:100%; height:100%; min-height:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior-y:contain; outline:none; scrollbar-gutter:stable; -webkit-overflow-scrolling:touch; }
.is-page-transitioning .site-header a,.is-page-transitioning .site-header button,.is-page-transitioning .portfolio-dock { pointer-events:none; }
.hero-page .hero { min-height:100%; }
.page-panel > .projects-section,.page-panel.showcase-section,.page-panel > .about-section { padding-top:var(--page-heading-offset); }
.page-panel > .about-section { padding-bottom:36px; }
.contact-page { display:flex; flex-direction:column; background:var(--surface); }
.contact-page .contact-section { display:flex; flex:1 0 auto; align-items:center; width:100%; }
.contact-page .site-footer { flex:0 0 auto; }

/* Pearl-white ambient gradients for the light portfolio pages. */
#top,
#projects,
#about,
#contact {
  background-color:var(--bg);
  background-repeat:no-repeat;
  animation-play-state:paused;
}

#top.is-active,
#projects.is-active,
#about.is-active,
#contact.is-active {
  animation-play-state:running;
  will-change:background-position;
}

#top {
  background-image:
    radial-gradient(ellipse at center,rgba(248,220,215,.48) 0%,rgba(248,220,215,.2) 34%,transparent 72%),
    radial-gradient(ellipse at center,rgba(224,229,250,.5) 0%,rgba(224,229,250,.2) 36%,transparent 73%),
    radial-gradient(ellipse at center,rgba(218,235,251,.48) 0%,rgba(218,235,251,.18) 34%,transparent 72%),
    radial-gradient(ellipse at center,rgba(237,224,248,.42) 0%,rgba(237,224,248,.17) 36%,transparent 74%);
  background-size:72% 76%,68% 72%,72% 70%,66% 72%;
  animation:ambient-top 38s ease-in-out -9s infinite alternate;
}

#projects {
  background-image:
    radial-gradient(ellipse at center,rgba(222,235,252,.5) 0%,rgba(222,235,252,.18) 35%,transparent 72%),
    radial-gradient(ellipse at center,rgba(246,220,229,.42) 0%,rgba(246,220,229,.16) 34%,transparent 72%),
    radial-gradient(ellipse at center,rgba(234,226,249,.46) 0%,rgba(234,226,249,.17) 36%,transparent 74%),
    radial-gradient(ellipse at center,rgba(250,229,215,.4) 0%,rgba(250,229,215,.15) 35%,transparent 73%);
  background-size:66% 70%,72% 74%,70% 72%,62% 68%;
  animation:ambient-projects 44s ease-in-out -17s infinite alternate;
}

#about {
  background-image:
    radial-gradient(ellipse at center,rgba(237,224,248,.46) 0%,rgba(237,224,248,.17) 35%,transparent 73%),
    radial-gradient(ellipse at center,rgba(218,235,251,.48) 0%,rgba(218,235,251,.18) 34%,transparent 72%),
    radial-gradient(ellipse at center,rgba(250,225,216,.42) 0%,rgba(250,225,216,.15) 36%,transparent 74%),
    radial-gradient(ellipse at center,rgba(226,230,249,.44) 0%,rgba(226,230,249,.16) 35%,transparent 73%);
  background-size:70% 64%,74% 70%,66% 62%,68% 66%;
  animation:ambient-about 49s ease-in-out -24s infinite alternate;
}

#contact {
  background-image:
    radial-gradient(ellipse at center,rgba(247,221,228,.42) 0%,rgba(247,221,228,.16) 34%,transparent 72%),
    radial-gradient(ellipse at center,rgba(221,235,251,.5) 0%,rgba(221,235,251,.18) 36%,transparent 74%),
    radial-gradient(ellipse at center,rgba(236,227,249,.44) 0%,rgba(236,227,249,.16) 35%,transparent 73%),
    radial-gradient(ellipse at center,rgba(250,228,217,.38) 0%,rgba(250,228,217,.14) 36%,transparent 74%);
  background-size:68% 72%,72% 76%,66% 68%,62% 64%;
  animation:ambient-contact 42s ease-in-out -31s infinite alternate;
}

.contact-page .contact-section { background:transparent; }

@keyframes ambient-top {
  0% { background-position:-26% -24%,120% -18%,-26% 118%,116% 116%; }
  50% { background-position:-12% -12%,108% -4%,-14% 103%,102% 108%; }
  100% { background-position:-20% 2%,114% -12%,-5% 112%,110% 98%; }
}

@keyframes ambient-projects {
  0% { background-position:-20% -16%,112% 4%,-14% 112%,116% 102%; }
  50% { background-position:-6% -4%,99% -10%,-2% 98%,104% 112%; }
  100% { background-position:-14% 5%,108% -2%,8% 106%,96% 94%; }
}

@keyframes ambient-about {
  0% { background-position:-24% 2%,118% -18%,-16% 106%,112% 78%; }
  50% { background-position:-8% -8%,105% -4%,-2% 94%,98% 90%; }
  100% { background-position:-16% -14%,112% 4%,5% 101%,106% 84%; }
}

@keyframes ambient-contact {
  0% { background-position:-18% -20%,118% -4%,-20% 112%,110% 106%; }
  50% { background-position:-4% -6%,103% -12%,-5% 98%,98% 114%; }
  100% { background-position:-12% 3%,112% -2%,4% 106%,104% 96%; }
}

@keyframes ambient-header {
  0% { background-position:0% 50%; }
  100% { background-position:100% 50%; }
}

.site-header {
  background-image:linear-gradient(110deg,rgba(250,228,222,.28),rgba(255,255,255,.86) 42%,rgba(225,232,250,.3));
  background-size:180% 100%;
  animation:ambient-header 46s ease-in-out -12s infinite alternate;
}

@media (max-width:640px) {
  :root { --header-height:64px; --page-heading-offset:28px; --section-content-gap:38px; --page-duration:660ms; }
  .brand { gap:12px; }
  .brand-name { font-size:22px; }
  .brand-divider { height:26px; }
  .brand-role { font-size:8px; letter-spacing:.1em; }
  .hero-page .hero { min-height:100%; }
  .page-panel { scrollbar-gutter:auto; }
}

@media (prefers-reduced-motion:reduce) {
  .page-track.is-ready { transition:none; }
  .site-header,
  #top,
  #projects,
  #about,
  #contact { animation:none!important; }
}

@media (min-width:641px) and (max-height:660px) {
  .projects-section { padding-bottom:12px; }
  .projects-section .section-heading { padding-bottom:36px; }
  .project-card img { width:clamp(72px,14dvh,92px); height:clamp(72px,14dvh,92px); margin-bottom:clamp(8px,1.5dvh,10px); }
  .project-card h3 { font-size:19px; }
  .project-card p { margin-top:4px; font-size:13px; }
}

/* Mobile hero: portrait first, profile copy and resume action second. */
@media (max-width:640px) {
  .project-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    column-gap:10px;
  }

  .project-card {
    min-width:0;
    min-height:190px;
  }

  .project-card img {
    width:80px;
    height:80px;
    border-radius:19px;
  }

  .project-card h3 {
    font-size:16px;
    overflow-wrap:anywhere;
  }

  .project-card p {
    font-size:12px;
  }

  .hero-page .hero {
    display:flex;
    min-height:100%;
    padding:clamp(30px,5dvh,46px) 0 72px;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
  }

  .hero-profile {
    order:1;
    width:min(62vw,240px);
    margin:0;
    align-self:center;
    justify-self:auto;
    flex:0 0 auto;
  }

  .profile-caption {
    display:none;
  }

  .hero-copy {
    order:2;
    width:100%;
  }

  .hero-copy h1 {
    font-size:54.4px;
  }

  .hero-meta {
    font-size:14px;
  }

  .hero-meta li:nth-child(3) {
    grid-column:1 / -1;
    padding-left:0;
    border-left:0;
    white-space:nowrap;
  }
}

/* Showcase background study: seamless grain, diffuse halftone, and sparse particles. */
.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; }
.page-panel.showcase-section {
  padding:0;
  background:#11171d;
  color:#e8e5e0;
  scrollbar-gutter:stable;
  scrollbar-width:auto;
}
.page-panel.showcase-section::-webkit-scrollbar,
.showcase-more-page::-webkit-scrollbar,
.page-panel#about::-webkit-scrollbar { width:8px; }
.page-panel.showcase-section::-webkit-scrollbar-track,
.showcase-more-page::-webkit-scrollbar-track,
.page-panel#about::-webkit-scrollbar-track { background:transparent; }
.page-panel.showcase-section::-webkit-scrollbar-thumb,
.showcase-more-page::-webkit-scrollbar-thumb,
.page-panel#about::-webkit-scrollbar-thumb { background:var(--accent); border-radius:999px; }
.page-panel.showcase-section::-webkit-scrollbar-button,
.showcase-more-page::-webkit-scrollbar-button,
.page-panel#about::-webkit-scrollbar-button { display:none; height:12px; background-color:transparent; background-repeat:no-repeat; background-position:center; background-size:8px 6px; }
.page-panel.showcase-section::-webkit-scrollbar-button:vertical:start:decrement,
.showcase-more-page::-webkit-scrollbar-button:vertical:start:decrement,
.page-panel#about::-webkit-scrollbar-button:vertical:start:decrement { display:block; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'%3E%3Cpath fill='%233568ce' d='M4 0 8 6H0z'/%3E%3C/svg%3E"); }
.page-panel.showcase-section::-webkit-scrollbar-button:vertical:end:increment,
.showcase-more-page::-webkit-scrollbar-button:vertical:end:increment,
.page-panel#about::-webkit-scrollbar-button:vertical:end:increment { display:block; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'%3E%3Cpath fill='%233568ce' d='M0 0h8L4 6z'/%3E%3C/svg%3E"); }
.page-panel.showcase-section::-webkit-scrollbar-corner,
.showcase-more-page::-webkit-scrollbar-corner,
.page-panel#about::-webkit-scrollbar-corner { background:transparent; }
.showcase-backdrop {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:100%;
  padding-bottom:0;
  background:
    radial-gradient(ellipse 46% 25% at 18% 38%,rgba(45,65,77,.31),transparent 79%) 0 0 / 100% 1700px repeat-y,
    radial-gradient(ellipse 40% 22% at 82% 70%,rgba(73,61,53,.21),transparent 80%) 0 0 / 100% 1700px repeat-y,
    linear-gradient(90deg,#10151b 0%,#1a2026 48%,#10151b 100%);
}
.showcase-backdrop::before {
  content:"";
  position:absolute;
  inset:0;
  opacity:1;
  pointer-events:none;
  background:url("artworks/showcase-dust.svg?v=20260930-c1") 0 0 / 1600px 1600px repeat;
}
.showcase-backdrop::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse 47% 34% at 53% 48%,transparent 36%,rgba(3,7,11,.17) 100%) 0 0 / 100% 1700px repeat-y;
}
.showcase-starfield { position:absolute; inset:0; z-index:1; pointer-events:none; }
.showcase-starfield span {
  position:absolute;
  width:3px;
  height:3px;
  border-radius:50%;
  background:#dce6e9;
  opacity:.18;
  animation:showcase-star-twinkle 8s ease-in-out infinite;
}
.showcase-starfield span::before,.showcase-starfield span::after {
  content:"";
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  background:linear-gradient(transparent,rgba(224,235,238,.78),transparent);
}
.showcase-starfield span::before { width:1px; height:13px; }
.showcase-starfield span::after { width:13px; height:1px; background:linear-gradient(90deg,transparent,rgba(224,235,238,.78),transparent); }
.showcase-starfield span:nth-child(1) { left:3.5%; top:7%; animation-delay:-1.8s; animation-duration:8.3s; }
.showcase-starfield span:nth-child(2) { left:10%; top:24%; animation-delay:-5.1s; animation-duration:10.7s; }
.showcase-starfield span:nth-child(3) { left:5.6%; top:42%; animation-delay:-3.4s; animation-duration:9.4s; }
.showcase-starfield span:nth-child(4) { left:12%; top:69%; animation-delay:-7.2s; animation-duration:11.8s; }
.showcase-starfield span:nth-child(5) { left:4%; top:91%; animation-delay:-2.7s; animation-duration:8.9s; }
.showcase-starfield span:nth-child(6) { right:5%; top:15%; animation-delay:-6.3s; animation-duration:10.2s; }
.showcase-starfield span:nth-child(7) { right:11%; top:36%; animation-delay:-.8s; animation-duration:8.7s; }
.showcase-starfield span:nth-child(8) { right:3.3%; top:58%; animation-delay:-4.4s; animation-duration:11.1s; }
.showcase-starfield span:nth-child(9) { right:8%; top:83%; animation-delay:-7.9s; animation-duration:9.8s; }
@keyframes showcase-star-twinkle {
  0%,100% { opacity:.13; transform:scale(.78); }
  48% { opacity:.66; transform:scale(1.1); }
}

/* Every showcase chapter uses a 1920-unit canvas scaled into this 1140px
   content width. New chapters align content to the canvas x=0 / x=1920 rails. */
.showcase-content-width {
  width:min(calc(1140px * var(--content-scale)),calc(100% - 48px));
  margin-inline:auto;
}

/* Scale each page's content as one group. The panel and background keep their
   viewport size so a shorter window reveals more content through scrolling. */
@media (min-width:641px) {
  .page-panel > .section-shell,
  .contact-section > .section-shell { width:1280px; max-width:none; zoom:var(--content-scale); }
  .hero-page .hero { min-height:var(--scaled-panel-height); }
  .projects-section { height:var(--scaled-panel-height); }
}
.showcase-artboard-stage {
  position:relative;
  z-index:2;
  aspect-ratio:1920 / 3245;
}
.showcase-artboard {
  position:absolute;
  top:0;
  left:0;
  width:1920px;
  height:3245px;
  --showcase-left-rail-shift:57px;
  --showcase-mark-rail-shift:70px;
  --showcase-content-scale:.95;
  --showcase-image-scale:1.033333;
  --showcase-pair-inset-positive:-36px;
  --showcase-pair-inset-negative:36px;
  transform-origin:top left;
}
.showcase-chapter-head {
  position:absolute;
  top:112px;
  right:0;
  width:1250px;
  text-align:right;
  transform:scale(var(--showcase-content-scale));
  transform-origin:top right;
}
.showcase-chapter-index {
  margin:0 0 30px;
  color:rgba(223,210,188,.54);
  font:500 17px/1.4 'DM Mono',monospace;
  letter-spacing:.22em;
}
.showcase-chapter-head h3 {
  margin:0;
  color:#f2e9da;
  font:300 268px/.82 'Cormorant Garamond','Bodoni MT',serif;
  letter-spacing:-.079em;
  word-spacing:.22em;
  white-space:nowrap;
}
.showcase-chapter-signature {
  position:absolute;
  z-index:1;
  top:137px;
  left:-285px;
  display:block;
  width:486px;
  height:auto;
  pointer-events:none;
}
.showcase-chapter-subtitle {
  margin:32px 0 0;
  color:#c9bda9;
  font:400 27px/1.55 'Manrope',sans-serif;
  letter-spacing:.16em;
}
.showcase-side-marks { position:absolute; inset:0 auto 0 calc(-110px + var(--showcase-mark-rail-shift,0px)); width:110px; pointer-events:none; }
.side-mark { position:absolute; left:40px; display:flex; width:70px; align-items:center; flex-direction:column; color:#b9a889; scale:.9; transform:scale(var(--showcase-content-scale)); transform-origin:top center; }
.side-mark--first { top:562px; }
.side-mark--second { top:var(--showcase-second-mark-top,2002px); }
.side-mark--first,.side-mark--second,.side-mark--chapter-three-first,.side-mark--chapter-three { align-items:flex-start; transform-origin:top left; }
.side-mark--first span,.side-mark--second span,.side-mark--chapter-three-first span,.side-mark--chapter-three span { text-align:left; }
.side-mark span { font:400 46px/.82 'Cormorant Garamond',serif; text-align:center; }
.side-mark p {
  margin:38px 0;
  color:rgba(215,201,184,.41);
  font:400 42px/1 'Cormorant Garamond',serif;
  letter-spacing:.16em;
  writing-mode:vertical-rl;
  white-space:nowrap;
}
.showcase-study { position:absolute; display:grid; align-items:start; column-gap:60px; }
.showcase-study--first { top:570px; left:0; grid-template-columns:600px 600px 600px; }
.showcase-study .showcase-study-sparkles {
  top:auto;
  bottom:calc(1300px - 1300px * var(--showcase-image-scale));
  scale:1.188;
  pointer-events:none;
}
.showcase-study--first .showcase-study-sparkles {
  left:auto;
  right:0;
  transform-origin:bottom right;
}
.showcase-study--second { top:var(--showcase-second-top,2010px); left:0; grid-template-columns:600px 600px 600px; }
.showcase-study--second .showcase-study-sparkles {
  left:0;
  right:auto;
  transform-origin:bottom left;
}
.showcase-image-frame {
  width:600px;
  height:1300px;
  margin:0;
  overflow:hidden;
  border:0;
  outline:0;
  box-shadow:none;
  border-radius:18px;
  background:transparent;
  transform:scale(var(--showcase-image-scale));
  transform-origin:top center;
}
.showcase-study--first .showcase-image-frame:first-child {
  transform:translateX(calc(30px + var(--showcase-left-rail-shift))) scale(var(--showcase-image-scale));
  transform-origin:top left;
}
.showcase-study--first .showcase-image-frame:nth-child(2) { transform:translateX(calc(var(--showcase-pair-inset-negative) + 30px + var(--showcase-left-rail-shift))) scale(var(--showcase-image-scale)); }
.showcase-study--second .showcase-image-frame:nth-of-type(1) { transform:translateX(var(--showcase-pair-inset-positive)) scale(var(--showcase-image-scale)); }
.showcase-study--second .showcase-image-frame:last-child { transform-origin:top right; }
.showcase-image-frame img { display:block; width:100%; height:100%; object-fit:contain; border:0; outline:0; }
.showcase-study-copy {
  color:#e6ded1;
  font:400 28px/1.85 'Noto Sans SC',sans-serif;
  letter-spacing:.045em;
  transform:scale(var(--showcase-content-scale));
}
.showcase-study-copy--right { text-align:right; transform-origin:top right; }
.showcase-study-copy--right > :not(.showcase-study-divider) { text-align:right; }
.showcase-study-copy--left { text-align:left; transform-origin:top left; }
.showcase-study--second .showcase-study-copy--left { transform:translateX(calc(30px + var(--showcase-left-rail-shift))) scale(var(--showcase-content-scale)); }
.showcase-study-kicker {
  margin:0 0 27px;
  color:#b4a68e;
  font:500 20px/1.4 'DM Mono',monospace;
  letter-spacing:.17em;
}
.showcase-study-copy h4 {
  margin:0;
  color:#f2e9db;
  font:500 36px/1.45 'Noto Sans SC',sans-serif;
  letter-spacing:.06em;
}
.showcase-study-meta { margin:22px 0 0; color:#d1c6b7; }
.showcase-study-divider {
  width:84px;
  height:1px;
  margin:82px 0 42px;
  background:rgba(215,192,157,.54);
}
.showcase-study-copy:has(> h5) .showcase-study-divider { margin-bottom:90px; }
.showcase-study-copy--right .showcase-study-divider { margin-left:auto; margin-right:0; }
.showcase-study-copy h5 {
  margin:0 0 22px;
  color:#f2e9db;
  font:500 36px/1.4 'Noto Sans SC',sans-serif;
  letter-spacing:.07em;
}
.showcase-study-copy p:last-child { margin:0; }
.showcase-study-copy h5 + p {
  color:#d1c6b7;
  width:350px;
  max-width:100%;
  overflow-wrap:anywhere;
}
.showcase-study-copy.showcase-study-copy--right h5 + p { margin-left:auto; }
.showcase-display-title {
  background-image:
    url("artworks/showcase-title-grain.svg?v=20260930-1"),
    linear-gradient(167deg,#fff8eb 3%,#d9c6ad 28%,#fff2da 49%,#b79878 76%,#efddc3 100%);
  background-size:128px 128px,100% 100%;
  background-repeat:repeat,no-repeat;
  background-blend-mode:soft-light,normal;
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(2px 2px 0 rgba(102,64,48,.52));
}
.showcase-evil-title {
  font:300 120px/1 'Cormorant Garamond','Bodoni MT',serif;
  letter-spacing:-.057em;
  word-spacing:.08em;
}

/* Second showcase chapter: paired lead images and five animated pixel characters. */
.showcase-chapter-two-stage {
  position:relative;
  z-index:2;
  aspect-ratio:1920 / 3580;
}
.showcase-chapter-two {
  position:absolute;
  inset:0 auto auto 0;
  width:1920px;
  height:3580px;
  --showcase-content-scale:.95;
  --showcase-chapter-two-image-scale:.8;
  --showcase-chapter-two-lower-image-scale:1;
  transform-origin:top left;
}
.showcase-chapter-two .showcase-side-marks { left:auto; right:0; }
.side-mark--chapter-two-lower,.side-mark--chapter-four-lower { top:var(--showcase-chapter-two-lower-mark-top,2042px); align-items:flex-end; transform-origin:top right; }
.side-mark--chapter-two-lower span,.side-mark--chapter-four-lower span { text-align:right; }
.showcase-chapter-two-head {
  position:absolute;
  top:80px;
  left:0;
  width:1920px;
  text-align:left;
}
.showcase-chapter-two-head h3 {
  margin:0;
  font:300 120px/1 'Cormorant Garamond','Bodoni MT',serif;
  letter-spacing:-.057em;
  word-spacing:.08em;
  white-space:nowrap;
}
.showcase-chapter-two-copy {
  position:absolute;
  top:280px;
  left:0;
  width:520px;
}
#showcase-chapter-two .showcase-study-meta {
  width:350px;
  max-width:100%;
  overflow-wrap:anywhere;
}
.showcase-chapter-two-small-images {
  position:absolute;
  top:var(--showcase-character-column-top,700px);
  left:-15px;
  display:flex;
  flex-direction:column;
  gap:36px;
  transform:scale(.81);
  transform-origin:top left;
}
.showcase-chapter-two.is-lower-row-active .showcase-chapter-two-small-images { visibility:hidden; }
.showcase-chapter-two-placeholder {
  overflow:hidden;
  border:0;
  outline:0;
  box-shadow:none;
  border-radius:18px;
  background:transparent;
}
.showcase-chapter-two-placeholder img { display:block; width:100%; height:100%; object-fit:contain; }
.showcase-chapter-two-small-images .showcase-chapter-two-placeholder { width:207px; height:auto; aspect-ratio:1 / 1; overflow:visible; border-radius:0; }
.showcase-chapter-two-small-images img { object-fit:contain; }
.showcase-chapter-two-small-images .showcase-character { position:relative; }
.showcase-chapter-two-small-images .showcase-character-frame {
  position:absolute;
  top:var(--character-frame-top);
  left:var(--character-frame-left);
  display:block;
  width:636.9px;
  height:auto;
  max-width:none;
  aspect-ratio:965 / 318;
  object-fit:contain;
  pointer-events:none;
}
.showcase-chapter-four-bosses {
  position:absolute;
  z-index:2;
  top:var(--showcase-chapter-four-boss-top,620px);
  left:0;
  display:grid;
  width:var(--showcase-chapter-four-boss-width,388.27px);
  justify-items:start;
  gap:var(--showcase-chapter-four-boss-gap,31px);
}
.showcase-chapter-four-boss-sprite {
  display:block;
  width:100%;
  aspect-ratio:816 / 336;
  background-position:0 0;
  background-repeat:no-repeat;
  background-size:400% 100%;
  animation:showcase-boss-action 6s steps(1,end) infinite;
  animation-delay:var(--boss-delay,0s);
  animation-play-state:paused;
}
.showcase-chapter-four-bosses.is-playing .showcase-chapter-four-boss-sprite {
  animation-play-state:running;
}
@keyframes showcase-boss-action {
  0%, 10% { background-position:0 0; }
  10.0001%, 12.333333% { background-position:33.333333% 0; }
  12.333433%, 15.5% { background-position:66.666667% 0; }
  15.5001%, 20% { background-position:100% 0; }
  20.0001%, 100% { background-position:0 0; }
}
.showcase-character:nth-child(1) { --character-frame-left:-28px; --character-frame-top:-6px; }
.showcase-character:nth-child(2) { --character-frame-left:-23px; --character-frame-top:0px; }
.showcase-character:nth-child(3) { --character-frame-left:-29px; --character-frame-top:-4px; }
.showcase-character:nth-child(4) { --character-frame-left:-33px; --character-frame-top:-2px; }
.showcase-character:nth-child(5) { --character-frame-left:-24px; --character-frame-top:-5px; }
.showcase-chapter-two-main-images {
  position:absolute;
  top:280px;
  right:100px;
  display:flex;
  gap:40px;
}
.showcase-chapter-two-main-images .showcase-chapter-two-placeholder {
  width:calc(600px * var(--showcase-chapter-two-image-scale));
  height:calc(1300px * var(--showcase-chapter-two-image-scale));
  aspect-ratio:1125 / 2436;
}
.showcase-chapter-two-three-images {
  position:absolute;
  top:var(--showcase-chapter-two-lower-top,2050px);
  left:0;
  display:flex;
  justify-content:flex-start;
  width:1920px;
  gap:50px;
}
.showcase-chapter-two-lower-item {
  flex:none;
  margin:0;
  width:calc(600px * var(--showcase-chapter-two-lower-image-scale));
}
.showcase-chapter-two-lower-item figcaption {
  display:flex;
  align-items:baseline;
  gap:18px;
  height:50px;
  color:#f2e9db;
  font:500 30px/36px 'Noto Sans SC',sans-serif;
  letter-spacing:.06em;
  text-align:left;
  white-space:nowrap;
  transform:translateY(-16px);
}
.showcase-chapter-two-lower-index {
  flex:none;
  color:#b4a68e;
  font:500 20px/1.4 'DM Mono',monospace;
  letter-spacing:.17em;
}
.showcase-chapter-two-lower-item .showcase-chapter-two-placeholder {
  width:100%;
  height:auto;
  aspect-ratio:1125 / 2436;
}
.showcase-chapter-two-ornaments { position:absolute; inset:0; pointer-events:none; }
.showcase-chapter-two-dots {
  position:absolute;
  top:280px;
  right:0;
  display:block;
  width:84px;
  height:694px;
  background:radial-gradient(circle,rgba(205,195,178,.55) 1.9px,transparent 2.5px) 0 0 / 28px 52px repeat;
}
.showcase-chapter-two-spark {
  position:absolute;
  top:307px;
  left:592px;
  color:rgba(205,191,165,.35);
  font:400 28px/1.05 'Cormorant Garamond',serif;
  letter-spacing:.08em;
}
/* Each selected-work group fills one viewport and has its own scroll stop. */
.showcase-chapter-three-stage { position:relative; z-index:2; }
.showcase-chapter-three {
  position:absolute;
  top:0;
  left:0;
  width:1920px;
  height:3000px;
  --showcase-left-rail-shift:57px;
  --showcase-mark-rail-shift:70px;
  transform-origin:top left;
  background:
    radial-gradient(ellipse 720px 850px at 1450px 520px,rgba(101,64,47,.2),transparent 84%),
    radial-gradient(ellipse 690px 930px at 460px 75%,rgba(103,69,47,.17),transparent 83%);
}
.showcase-chapter-three-group { position:absolute; left:0; width:1920px; height:var(--third-page-height,1000px); }
.showcase-chapter-three-group--one { top:0; }
.showcase-chapter-three-group--two { top:var(--third-page-height,1000px); }
.showcase-chapter-three-group--three { top:calc(var(--third-page-height,1000px) * 2); }
.showcase-chapter-three-image {
  position:absolute;
  z-index:2;
  width:var(--third-trio-width,400px);
  margin:0;
  overflow:hidden;
  border:0;
  outline:0;
  border-radius:18px;
  background:transparent;
  box-shadow:none;
}
.showcase-chapter-three-image img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1125 / 2436;
  object-fit:contain;
  border:0;
  outline:0;
  box-shadow:none;
}
.showcase-chapter-three-group--one .showcase-chapter-three-image { width:var(--third-last-width,400px); }
.showcase-chapter-three-group--one .showcase-chapter-three-image:nth-of-type(1) { top:calc(var(--third-first-inset) + var(--third-first-stagger)); left:var(--third-first-start); }
.showcase-chapter-three-group--one .showcase-chapter-three-image:nth-of-type(2) { top:calc(var(--third-first-inset) + var(--third-first-stagger) / 2); left:var(--third-first-middle); }
.showcase-chapter-three-group--one .showcase-chapter-three-image:nth-of-type(3) { top:var(--third-first-inset); right:0; }
.showcase-chapter-three-group--two .showcase-chapter-three-image { width:var(--third-pair-width,420px); }
.showcase-chapter-three-group--two .showcase-chapter-three-image:nth-of-type(1) { top:var(--third-pair-inset); left:calc(var(--third-pair-start) + var(--showcase-left-rail-shift)); }
.showcase-chapter-three-group--two .showcase-chapter-three-image:nth-of-type(2) { top:calc(var(--third-pair-inset) + var(--third-pair-stagger)); left:calc(var(--third-pair-last) + var(--showcase-left-rail-shift)); }
.showcase-chapter-three-chibis {
  position:absolute;
  z-index:2;
  right:0;
  top:var(--third-chibi-top,420px);
  display:grid;
  width:var(--third-chibi-width,142.8px);
  justify-items:end;
  gap:var(--third-chibi-gap,31px);
}
.showcase-chapter-three-chibis img {
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}
.showcase-chapter-three-group--three .showcase-chapter-three-image { width:var(--third-last-width,400px); }
.showcase-chapter-three-group--three .showcase-chapter-three-image:nth-of-type(1) { top:var(--third-last-inset); left:0; }
.showcase-chapter-three-group--three .showcase-chapter-three-image:nth-of-type(2) { top:calc(var(--third-last-inset) + var(--third-last-stagger) / 2); left:var(--third-last-middle); }
.showcase-chapter-three-group--three .showcase-chapter-three-image:nth-of-type(3) { top:calc(var(--third-last-inset) + var(--third-last-stagger)); left:var(--third-last-final); }
.side-mark--chapter-three-last {
  z-index:2;
  left:auto;
  right:0;
  top:var(--third-last-mark-top,0px);
  align-items:flex-end;
  transform:translateY(-100%);
  transform-origin:top right;
  pointer-events:none;
}
.side-mark--chapter-three-last span { text-align:right; }
.showcase-chapter-three-copy {
  position:absolute;
  z-index:3;
  width:570px;
  color:#e6ded1;
  font:400 28px/1.7 'Noto Sans SC',sans-serif;
  letter-spacing:.045em;
  transform:scale(.95);
}
.showcase-chapter-three-copy--left { left:0; transform-origin:top left; text-align:left; }
.showcase-chapter-three-copy--right { right:0; transform-origin:top right; text-align:right; }
.showcase-chapter-three-copy h4 { margin:0; color:#f2e9db; font:500 36px/1.45 'Noto Sans SC',sans-serif; letter-spacing:.06em; }
.showcase-chapter-three-copy h4 + p { margin:20px 0 0; color:#d1c6b7; }
.showcase-chapter-three-copy .showcase-study-divider { margin-bottom:0; }
.showcase-chapter-three-copy--right .showcase-study-divider { margin-left:auto; margin-right:0; }
.showcase-chapter-three-group--one .showcase-chapter-three-copy { top:var(--third-first-inset); width:520px; }
.showcase-chapter-three-group--two .showcase-chapter-three-copy { top:var(--third-image-inset); }
.showcase-chapter-three-group--two .showcase-chapter-three-copy h4 + p,
.showcase-chapter-three-group--three .showcase-chapter-three-copy h4 + p {
  width:350px;
  max-width:100%;
  margin-left:auto;
}
.showcase-chapter-three-group--three .showcase-chapter-three-copy { top:var(--third-last-inset,var(--third-image-inset)); width:500px; }
.side-mark--chapter-three-first { top:var(--third-first-mark-top,420px); }
.side-mark--chapter-three { top:var(--third-second-mark-top,1030px); }
.showcase-chapter-three-watermark {
  position:absolute;
  z-index:1;
  left:0;
  width:1920px;
  margin:0;
  color:rgba(176,135,103,.22);
  font:300 175px/1 'Cormorant Garamond','Bodoni MT',serif;
  letter-spacing:-.06em;
  white-space:nowrap;
  pointer-events:none;
}
.showcase-chapter-three-watermark--one { top:var(--third-first-watermark-top,830px); text-align:right; font-size:150px; word-spacing:.24em; }
.showcase-chapter-three-watermark--three { top:var(--third-last-watermark-top,2830px); text-align:left; font-size:160px; word-spacing:.3em; }

/* Fifth showcase chapter: existing pairs and trio followed by a landscape carousel. */
.showcase-chapter-five-stage { position:relative; z-index:2; }
.showcase-chapter-five {
  position:absolute;
  inset:0 auto auto 0;
  width:1920px;
  height:3000px;
  --showcase-left-rail-shift:57px;
  --showcase-mark-rail-shift:70px;
  --showcase-content-scale:.95;
  --showcase-chapter-five-image-scale:.8;
  --showcase-chapter-five-trio-scale:.9;
  transform-origin:top left;
}
.showcase-chapter-five-row {
  position:absolute;
  left:0;
  width:1920px;
  height:var(--showcase-chapter-five-page-height,1000px);
}
.showcase-chapter-five-row--one { top:0; }
.showcase-chapter-five-row--two { top:var(--showcase-chapter-five-page-height,1000px); }
.showcase-chapter-five-row--three { top:calc(var(--showcase-chapter-five-page-height,1000px) * 2); }
.showcase-chapter-five-row--carousel { top:calc(var(--showcase-chapter-five-page-height,1000px) * 3); }
.showcase-chapter-five--hide-two-image-page .showcase-chapter-five-row--two,
.showcase-chapter-five--hide-two-image-page .side-mark--chapter-five-two { display:none; }
.showcase-chapter-five--hide-two-image-page .showcase-chapter-five-row--three {
  top:var(--showcase-chapter-five-page-height,1000px);
}
.showcase-chapter-five--hide-two-image-page .showcase-chapter-five-row--carousel {
  top:calc(var(--showcase-chapter-five-page-height,1000px) * 2);
}
.showcase-chapter-five-pair {
  position:absolute;
  top:var(--showcase-chapter-five-pair-top,20px);
  left:0;
  display:grid;
  width:1920px;
  grid-template-columns:600px 600px 600px;
  column-gap:60px;
  align-items:start;
}
.showcase-chapter-five-image {
  width:600px;
  height:1300px;
  margin:0;
  overflow:hidden;
  border:0;
  outline:0;
  border-radius:18px;
  background:transparent;
  box-shadow:none;
  transform:scale(var(--showcase-chapter-five-image-scale));
  transform-origin:top center;
}
.showcase-chapter-five-image img,
.showcase-chapter-five-trio-image img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  border:0;
  outline:0;
}
.showcase-chapter-five-pair--right-copy .showcase-chapter-five-image:first-child {
  transform:translateX(calc(30px + var(--showcase-left-rail-shift))) scale(var(--showcase-chapter-five-image-scale));
  transform-origin:top left;
}
.showcase-chapter-five-pair--right-copy .showcase-chapter-five-image:nth-child(2) {
  transform:translateX(calc(var(--showcase-chapter-five-pair-inset-negative) + 30px + var(--showcase-left-rail-shift))) scale(var(--showcase-chapter-five-image-scale));
}
.showcase-chapter-five-row--one .showcase-study-sparkles {
  top:auto;
  left:auto;
  right:0;
  bottom:calc(1300px - 1300px * var(--showcase-chapter-five-image-scale));
  scale:1.188;
  transform-origin:bottom right;
  pointer-events:none;
}
.showcase-chapter-five-pair--left-copy .showcase-chapter-five-image:nth-of-type(1) {
  transform:translateX(var(--showcase-chapter-five-pair-inset-positive)) scale(var(--showcase-chapter-five-image-scale));
}
.showcase-chapter-five-pair--left-copy .showcase-chapter-five-image:last-child { transform-origin:top right; }
.showcase-chapter-five-pair--left-copy .showcase-study-copy--left {
  transform:translateX(calc(30px + var(--showcase-left-rail-shift))) scale(var(--showcase-content-scale));
}
.side-mark--chapter-five-one,
.side-mark--chapter-five-two { align-items:flex-start; transform-origin:top left; }
.side-mark--chapter-five-one span,
.side-mark--chapter-five-two span { text-align:left; }
.side-mark--chapter-five-one { top:var(--showcase-chapter-five-pair-top,20px); }
.side-mark--chapter-five-two { top:calc(var(--showcase-chapter-five-page-height,1000px) + var(--showcase-chapter-five-pair-top,20px)); }
.showcase-chapter-five-trio {
  position:absolute;
  top:var(--showcase-chapter-five-trio-top,20px);
  left:0;
  display:flex;
  width:1920px;
  gap:50px;
}
.showcase-chapter-five-trio-item {
  flex:none;
  width:calc(600px * var(--showcase-chapter-five-trio-scale));
  margin:0;
}
.showcase-chapter-five-trio-item figcaption {
  display:flex;
  align-items:baseline;
  gap:18px;
  height:50px;
  color:#f2e9db;
  font:500 30px/36px 'Noto Sans SC',sans-serif;
  letter-spacing:.06em;
  white-space:nowrap;
  transform:translateY(-16px);
}
.showcase-chapter-five-trio-item figcaption span {
  flex:none;
  color:#b4a68e;
  font:500 20px/1.4 'DM Mono',monospace;
  letter-spacing:.17em;
}
.showcase-chapter-five-trio-item figcaption strong { font:inherit; }
.showcase-chapter-five-trio-image {
  width:100%;
  height:auto;
  overflow:hidden;
  aspect-ratio:1125 / 2436;
  border-radius:18px;
}
.side-mark--chapter-five-three {
  z-index:2;
  left:auto;
  right:0;
  top:var(--showcase-chapter-five-trio-mark-top,0px);
  align-items:flex-end;
  transform:translateY(-100%) scale(var(--showcase-content-scale));
  transform-origin:top right;
  pointer-events:none;
}
.side-mark--chapter-five-three span { text-align:right; }
.showcase-chapter-five-row--carousel {
  --showcase-carousel-vertical-inset:max(0px,calc((var(--showcase-chapter-five-page-height,1000px) - 1250px - var(--showcase-carousel-gap-extra,0px)) / 2));
}
.showcase-chapter-five-carousel-heading {
  position:absolute;
  top:var(--showcase-carousel-vertical-inset);
  left:0;
  margin:0;
  white-space:nowrap;
}
.showcase-chapter-five-carousel-main {
  position:absolute;
  top:calc(150px + var(--showcase-carousel-vertical-inset) + var(--showcase-carousel-gap-extra,0px));
  left:0;
  width:1920px;
  margin:0;
  overflow:hidden;
  aspect-ratio:1690 / 781;
  border-radius:18px;
}
.showcase-chapter-five-carousel-main img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.showcase-chapter-five-carousel-main img.is-swapping { animation:showcase-carousel-swap .3s ease-out; }
@keyframes showcase-carousel-swap { from { opacity:.35; } to { opacity:1; } }
.showcase-chapter-five-carousel-thumbs {
  position:absolute;
  top:calc(1095px + var(--showcase-carousel-vertical-inset) + var(--showcase-carousel-gap-extra,0px));
  left:0;
  display:flex;
  width:1920px;
  align-items:flex-start;
  justify-content:space-between;
  gap:48px;
}
.showcase-chapter-five-carousel-thumb {
  position:relative;
  flex:1 1 0;
  min-width:0;
  padding:0;
  border:0;
  border-radius:5px;
  background:transparent;
  cursor:pointer;
  opacity:.58;
  transition:opacity .2s ease;
}
.showcase-chapter-five-carousel-thumb:hover,
.showcase-chapter-five-carousel-thumb:focus-visible,
.showcase-chapter-five-carousel-thumb.is-active { opacity:1; }
.showcase-chapter-five-carousel-thumb:focus-visible { outline:4px solid #d2b994; outline-offset:5px; }
.showcase-chapter-five-carousel-thumb img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1690 / 781;
  object-fit:cover;
  border-radius:5px;
}
.showcase-chapter-five-carousel-thumb.is-active::after {
  position:absolute;
  right:4px;
  bottom:-22px;
  left:4px;
  height:5px;
  background:#3879e8;
  content:"";
}
@media (max-width:640px) {
  .showcase-chapter-five-carousel-thumbs {
    justify-content:flex-start;
    gap:40px;
    overflow-x:auto;
    overflow-y:visible;
    padding-bottom:30px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .showcase-chapter-five-carousel-thumbs::-webkit-scrollbar { display:none; }
  .showcase-chapter-five-carousel-thumb { flex:0 0 540px; }
}
@media (prefers-reduced-motion:reduce) {
  .showcase-chapter-five-carousel-main img.is-swapping { animation:none; }
  .showcase-chapter-five-carousel-thumb { transition:none; }
}

/* Sixth showcase chapter: one continuous title entrance followed by eight artwork rows. */
.showcase-chapter-six-stage { position:relative; z-index:2; }
.showcase-chapter-six {
  position:absolute;
  inset:0 auto auto 0;
  width:1920px;
  height:9000px;
  --showcase-content-scale:.95;
  --showcase-chapter-six-image-width:660px;
  --showcase-chapter-six-image-height:1270px;
  --showcase-chapter-six-image-gap:40px;
  --showcase-chapter-six-pair-top:20px;
  --showcase-chapter-six-content-top:280px;
  transform-origin:top left;
}
.showcase-chapter-six-row {
  position:absolute;
  left:0;
  width:1920px;
  height:var(--showcase-chapter-six-page-height,1000px);
  overflow:hidden;
}
.showcase-chapter-six-head { top:80px; }
.showcase-chapter-six-row--one {
  top:var(--showcase-chapter-six-content-top,280px);
  overflow:visible;
}
.showcase-chapter-six-row--two {
  top:calc(var(--showcase-chapter-six-content-top,280px) + var(--showcase-chapter-six-page-height,1000px));
}
.showcase-chapter-six-row--new-three {
  top:calc(var(--showcase-chapter-six-content-top,280px) + var(--showcase-chapter-six-page-height,1000px) + var(--showcase-chapter-six-page-height,1000px));
}
.showcase-chapter-six-row--new-four {
  top:calc(var(--showcase-chapter-six-content-top,280px) + var(--showcase-chapter-six-page-height,1000px) + var(--showcase-chapter-six-page-height,1000px) + var(--showcase-chapter-six-page-height,1000px));
}
.showcase-chapter-six-row--three {
  top:calc(var(--showcase-chapter-six-content-top,280px) + var(--showcase-chapter-six-page-height,1000px) + var(--showcase-chapter-six-page-height,1000px) + var(--showcase-chapter-six-page-height,1000px) + var(--showcase-chapter-six-page-height,1000px));
}
.showcase-chapter-six-row--four {
  top:calc(var(--showcase-chapter-six-content-top,280px) + var(--showcase-chapter-six-page-height,1000px) + var(--showcase-chapter-six-page-height,1000px) + var(--showcase-chapter-six-page-height,1000px) + var(--showcase-chapter-six-page-height,1000px) + var(--showcase-chapter-six-page-height,1000px));
}
.showcase-chapter-six-row--five {
  top:calc(var(--showcase-chapter-six-content-top,280px) + var(--showcase-chapter-six-page-height,1000px) + var(--showcase-chapter-six-page-height,1000px) + var(--showcase-chapter-six-page-height,1000px) + var(--showcase-chapter-six-page-height,1000px) + var(--showcase-chapter-six-page-height,1000px) + var(--showcase-chapter-six-page-height,1000px));
}
.showcase-chapter-six-row--six {
  top:calc(var(--showcase-chapter-six-content-top,280px) + var(--showcase-chapter-six-page-height,1000px) + var(--showcase-chapter-six-page-height,1000px) + var(--showcase-chapter-six-page-height,1000px) + var(--showcase-chapter-six-page-height,1000px) + var(--showcase-chapter-six-page-height,1000px) + var(--showcase-chapter-six-page-height,1000px) + var(--showcase-chapter-six-page-height,1000px));
  height:calc(var(--showcase-chapter-six-page-height,1000px) + var(--showcase-chapter-six-character-extra-height,0px));
}
.showcase-chapter-six-row--one .showcase-chapter-two-copy {
  top:var(--showcase-chapter-six-pair-top,20px);
  width:430px;
}
.showcase-chapter-six-row--one .showcase-study-meta {
  width:350px;
  max-width:100%;
}
.showcase-chapter-six-copy--new-three {
  top:var(--showcase-chapter-six-pair-top,20px);
  left:80px;
  width:430px;
}
.showcase-chapter-six-row--new-three .showcase-chapter-six-image {
  width:var(--showcase-chapter-six-new-image-width,635px);
}
.side-mark--chapter-six-new-three {
  top:var(--showcase-chapter-six-pair-top,20px);
  left:0;
  align-items:flex-start;
  transform-origin:top left;
  pointer-events:none;
}
.side-mark--chapter-six-new-three span { text-align:left; }
.showcase-chapter-six-new-spark {
  top:auto;
  bottom:30px;
  left:0;
  scale:1.188;
  transform-origin:bottom left;
  pointer-events:none;
}
.showcase-chapter-six-landscape-title {
  position:absolute;
  top:var(--showcase-chapter-six-landscape-title-top,70px);
  left:0;
}
.showcase-chapter-six-landscape-title .showcase-study-kicker { margin:0; }
.showcase-chapter-six-landscape {
  position:absolute;
  top:var(--showcase-chapter-six-landscape-top,120px);
  left:0;
  width:1920px;
  height:1080px;
  margin:0;
  overflow:hidden;
  border-radius:18px;
}
.showcase-chapter-six-landscape img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.showcase-chapter-six-skills {
  position:absolute;
  z-index:3;
  top:var(--showcase-chapter-six-skill-top,420px);
  left:var(--showcase-chapter-six-skill-left,0px);
  display:flex;
  flex-direction:column;
  gap:var(--showcase-chapter-six-skill-gap,18px);
  width:var(--showcase-chapter-six-skill-width,520px);
  pointer-events:none;
}
.showcase-chapter-six-skills img {
  display:block;
  width:100%;
  height:auto;
  max-width:none;
}
.showcase-chapter-six-images {
  position:absolute;
  top:var(--showcase-chapter-six-pair-top,20px);
  display:flex;
  gap:var(--showcase-chapter-six-image-gap,40px);
}
.showcase-chapter-six-images--right { right:0; }
.showcase-chapter-six-images--left { left:83px; }
.showcase-chapter-six-images--trio {
  top:var(--showcase-chapter-six-trio-top,220px);
  right:0;
  gap:var(--showcase-chapter-six-trio-gap,32px);
}
.showcase-chapter-six-image {
  flex:none;
  width:var(--showcase-chapter-six-image-width,660px);
  height:var(--showcase-chapter-six-image-height,1270px);
  margin:0;
  overflow:hidden;
  border-radius:18px;
}
.showcase-chapter-six-image img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.showcase-chapter-six-images--trio .showcase-chapter-six-image {
  position:relative;
  width:var(--showcase-chapter-six-trio-image-width,445px);
  height:var(--showcase-chapter-six-trio-image-height,857px);
}
.showcase-chapter-six-images--trio .showcase-chapter-six-image:nth-child(1) {
  top:calc(var(--showcase-chapter-six-trio-stagger,40px) + var(--showcase-chapter-six-trio-stagger,40px));
}
.showcase-chapter-six-images--trio .showcase-chapter-six-image:nth-child(2) {
  top:var(--showcase-chapter-six-trio-stagger,40px);
}
.showcase-chapter-six-copy--right {
  position:absolute;
  top:var(--showcase-chapter-six-pair-top,20px);
  right:0;
  width:var(--showcase-chapter-six-copy-width,340px);
}
.showcase-chapter-six-row--two .showcase-study-kicker { white-space:nowrap; }
.showcase-chapter-six-copy--right h5 + p {
  overflow-wrap:normal;
  word-break:normal;
}
.showcase-chapter-six-feature-characters {
  position:absolute;
  z-index:2;
  top:calc(var(--showcase-chapter-six-pair-top,20px) + var(--showcase-chapter-six-image-height,1270px) - 394.106px);
  right:0;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:60.632px;
  pointer-events:none;
}
.showcase-chapter-six-feature-characters img {
  display:block;
  width:auto;
  height:166.737px;
  max-width:none;
  object-fit:contain;
}
.side-mark--chapter-six-two {
  top:var(--showcase-chapter-six-pair-top,20px);
  left:0;
  align-items:flex-start;
  transform-origin:top left;
}
.side-mark--chapter-six-two span { text-align:left; }
.showcase-chapter-six-copy--three {
  top:var(--showcase-chapter-six-trio-copy-top,220px);
  width:430px;
}
#showcase-chapter-six-row-four .showcase-chapter-six-copy--three,
#showcase-chapter-six-row-five .showcase-chapter-six-copy--three { z-index:3; }
#showcase-chapter-six-row-four .showcase-chapter-six-copy--three h4,
#showcase-chapter-six-row-five .showcase-chapter-six-copy--three h4 { white-space:nowrap; }
#showcase-chapter-six-row-five .showcase-chapter-six-copy--three h4 { font-size:32.4px; }
.showcase-chapter-six-row--three .showcase-chapter-two-dots {
  top:var(--showcase-chapter-six-trio-copy-top,220px);
}
.showcase-chapter-six-row--three .showcase-chapter-two-spark {
  top:calc(var(--showcase-chapter-six-trio-copy-top,220px) + 28px);
  left:448px;
}
.side-mark--chapter-six-trio {
  z-index:2;
  top:var(--showcase-chapter-six-third-mark-top,640px);
  left:0;
  align-items:flex-start;
  transform-origin:top left;
  pointer-events:none;
}
.side-mark--chapter-six-trio span { text-align:left; }

.showcase-chapter-six-character-title {
  position:absolute;
  top:var(--showcase-chapter-six-character-title-top,32px);
  left:0;
}
.showcase-chapter-six-character-title .showcase-study-kicker { margin:0; }
.showcase-chapter-six-character-gallery {
  position:absolute;
  top:var(--showcase-chapter-six-character-gallery-top,88px);
  left:var(--showcase-chapter-six-character-left,0px);
  width:var(--showcase-chapter-six-character-width,1920px);
}
.showcase-chapter-six-character-poster {
  width:100%;
  margin:0;
  overflow:hidden;
  border-radius:18px;
  aspect-ratio:var(--showcase-chapter-six-character-poster-ratio,2048 / 724);
}
.showcase-chapter-six-character-poster img,
.showcase-chapter-six-character-card img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.showcase-chapter-six-character-cards {
  position:relative;
  display:flex;
  height:var(--showcase-chapter-six-character-card-row-height,180px);
  align-items:flex-start;
  justify-content:center;
  gap:var(--showcase-chapter-six-character-gap,28px);
  margin-top:var(--showcase-chapter-six-character-row-gap,28px);
}
.showcase-chapter-six-character-card {
  flex:0 0 auto;
  width:auto;
  height:var(--showcase-chapter-six-character-card-height,180px);
  margin:0;
  aspect-ratio:var(--showcase-chapter-six-character-card-ratio,590 / 606);
  transform:translateY(var(--showcase-chapter-six-character-card-offset,0px));
}
.showcase-chapter-six-character-caption {
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  margin:0;
  font-size:102px;
  line-height:120px;
  text-align:center;
  white-space:nowrap;
  transform:translateY(var(--showcase-chapter-six-character-caption-offset,0px));
}
.showcase-caption-hyphen { font-family:Arial,sans-serif; }

.showcase-more {
  position:absolute;
  z-index:3;
  left:50%;
  transform:translateX(-50%);
  text-align:center;
}
.showcase-more-toggle {
  display:inline-flex;
  min-height:54px;
  align-items:center;
  justify-content:center;
  gap:22px;
  padding:0 60px;
  border:0;
  border-radius:999px;
  background:#fff;
  color:#171719;
  font-family:inherit;
  font-size:16px;
  font-weight:600;
  line-height:1.3;
  cursor:pointer;
  transition:opacity .25s ease,transform .25s ease,background .25s ease;
}
.showcase-more-toggle.is-pending-reveal { visibility:hidden; opacity:0; pointer-events:none; }
.showcase-more-toggle:hover,
.showcase-more-toggle:focus-visible { background:#f0f0f2; transform:translateY(-2px); }
.showcase-more-toggle:focus-visible { outline:2px solid #fff; outline-offset:4px; }
.showcase-more-toggle[hidden] { display:none; }
.showcase-more-toggle-mark { font:300 18px/1 Arial,sans-serif; }
.showcase-section.is-more-page-active { overflow-y:hidden; scrollbar-gutter:auto; }
.showcase-more-page {
  position:absolute;
  z-index:5;
  inset:0;
  overflow-y:auto;
  overscroll-behavior-y:contain;
  padding:40px 0;
  scrollbar-gutter:stable;
  scrollbar-width:auto;
  background:
    url("artworks/showcase-dust.svg?v=20260930-c1") 0 0 / 1600px 1600px repeat,
    radial-gradient(ellipse 46% 25% at 18% 38%,rgba(45,65,77,.31),transparent 79%) 0 0 / 100% 1700px repeat-y,
    radial-gradient(ellipse 40% 22% at 82% 70%,rgba(73,61,53,.21),transparent 80%) 0 0 / 100% 1700px repeat-y,
    linear-gradient(90deg,#10151b 0%,#1a2026 48%,#10151b 100%);
}
.showcase-more-page[hidden] { display:none; }
@supports (-moz-appearance:none) {
  .page-panel.showcase-section,
  .showcase-more-page,
  .page-panel#about { scrollbar-color:var(--accent) transparent; scrollbar-width:auto; }
}
.showcase-more-gallery {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
  width:min(calc(1140px * var(--content-scale)),calc(100% - 48px));
  margin-inline:auto;
  column-gap:28px;
  row-gap:52px;
  text-align:left;
}
.showcase-more-gallery[hidden] { display:none; }
.showcase-more-gallery figure { min-width:0; margin:0; }
.showcase-more-gallery figcaption {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:40px;
  color:#f2e9db;
  font:500 18px/1.4 'Noto Sans SC',sans-serif;
  letter-spacing:.06em;
}
.showcase-more-gallery figcaption span {
  color:#b4a68e;
  font:500 12px/1.4 'DM Mono',monospace;
  letter-spacing:.17em;
}
.showcase-more-gallery figcaption strong { font:inherit; }
.showcase-more-gallery img {
  display:block;
  width:100%;
  height:auto;
  border-radius:12px;
}
@media (max-width:640px) {
  #showcase-more { translate:none; }
  .showcase-more-gallery { grid-template-columns:minmax(0,1fr); row-gap:32px; }
  .showcase-more-toggle { min-height:46px; padding-inline:58px; }
}

/* Entrance motion stays separate from each artwork's existing scale and layout. */
#showcase.showcase-motion-ready .showcase-enter {
  --showcase-enter-distance:38px;
  --showcase-enter-duration:.48s;
  opacity:0;
  translate:0 var(--showcase-enter-distance);
  transition:opacity var(--showcase-enter-duration) linear,
    translate var(--showcase-enter-duration) ease;
}
#showcase.showcase-motion-ready .showcase-enter--image {
  --showcase-enter-distance:54px;
}
#showcase.showcase-motion-ready .showcase-enter--characters {
  --showcase-enter-distance:0px;
}
#showcase.showcase-motion-ready .showcase-enter--decor {
  --showcase-enter-distance:28px;
}
#showcase.showcase-motion-ready .showcase-enter.is-visible { opacity:1; translate:0 0; }
#showcase.showcase-motion-resetting .showcase-enter { transition:none; }
@media (prefers-reduced-motion:reduce) {
  .showcase-chapter-four-boss-sprite {
    animation:none!important;
    background-position:0 0;
  }
  #showcase.showcase-motion-ready .showcase-enter {
    opacity:1;
    translate:none;
    transition:none;
  }
}
@media (max-width:640px) {
  .showcase-backdrop { padding-bottom:30px; }
  .showcase-backdrop > .showcase-content-width {
    position:absolute;
    left:50%;
    margin-inline:0;
    translate:-50% 0;
  }
  #showcase-chapter-two .showcase-chapter-two-head h3,
  #showcase-chapter-four .showcase-chapter-two-head h3,
  #showcase-chapter-six .showcase-chapter-six-head h3 {
    font-size:90px;
  }
  #showcase-chapter-six .showcase-chapter-six-head { top:150px; }
  #projects .section-heading h2,
  #about .section-heading h2 { font-size:32px; }
  .work-history .timeline-item h3 { font-size:24px; }
  .work-history .timeline-item > span,
  .work-history .timeline-item > p:not(.resume-project):not(.timeline-work) { font-size:16px; }
  .work-history .timeline-item .resume-project { font-size:16px !important; }
  .work-history .resume-list { font-size:14.4px; }
  .work-history .timeline-item { padding-bottom:16px; }
  .work-history .timeline-item > .resume-list:last-child { margin-bottom:0; }
  .work-history .timeline-item > .resume-list:last-child li:last-child { margin-bottom:0; }
}

/* Readable compact layout after proportional desktop scaling reaches its limit. */
@media (min-width:641px) and (max-width:1050px) {
  .page-panel > .section-shell,
  .contact-section > .section-shell {
    width:min(960px,calc(100% - 48px));
    zoom:1;
  }
  .showcase-content-width { width:min(850px,calc(100% - 48px)); }
  .hero-page .hero { grid-template-columns:minmax(0,1fr) minmax(220px,.6fr); gap:30px; }
  .hero-copy h1 { font-size:clamp(48px,5.7vw,60px); }
  .hero-description { max-width:520px; white-space:normal; }
  .hero-meta { flex-wrap:wrap; gap:12px 0; white-space:normal; }
  .hero-profile { width:min(30vw,300px); }
  .main-nav { gap:clamp(16px,2vw,24px); }
}

@media (min-width:641px) and (max-width:850px) {
  .brand-role,.brand-divider { display:none; }
  .site-header { padding-inline:24px; }
  .main-nav { margin-left:20px; gap:clamp(12px,1.7vw,18px); }
  .nav-label { font-size:13px; }
}

.nav-toggle { display:none; }
@media (max-width:640px) {
  .nav-toggle {
    display:block;
    padding:9px 12px;
    border:1px solid var(--line);
    border-radius:8px;
    background:var(--surface);
    font-size:14px;
    font-weight:600;
  }
  .site-header .main-nav.is-open {
    position:absolute;
    top:100%;
    right:0;
    left:0;
    display:flex;
    align-items:stretch;
    flex-direction:column;
    gap:0;
    margin:0;
    padding:10px 20px 18px;
    border-bottom:1px solid var(--line);
    background:var(--surface);
    box-shadow:0 18px 28px rgba(25,28,40,.08);
  }
  .site-header .main-nav.is-open a { padding:12px 0; }
}