/* A responsive typographic studio, independent of the retired poster sequence. */
.intro-studio,.studio-profile { --studio-paper:var(--paper); --studio-ink:var(--ink); --studio-red:var(--red); font-family:"PingFang SC","PingFang TC",-apple-system,BlinkMacSystemFont,sans-serif; }
.intro-studio { color:var(--studio-ink); background:var(--studio-paper); overflow:clip; }
.studio-meta { display:flex; justify-content:space-between; gap:20px; padding:21px clamp(22px,4vw,64px); border-bottom:1px solid #11110f30; font-size:12px; letter-spacing:.1em; }
.studio-availability { letter-spacing:0; }
.studio-cover { display:grid; grid-template-columns:1.13fr 1fr; align-items:center; gap:clamp(32px,5vw,80px); padding:48px clamp(22px,4vw,64px) 40px; }
.studio-heading { min-width:0; }
.studio-eyebrow { margin:0 0 32px; font-size:12px; line-height:1.6; letter-spacing:.09em; }
.studio-heading h1 { margin:0; padding:0; line-height:1; }
.studio-name { display:block; width:100%; padding:0; border:0; background:none; color:var(--studio-ink); font:750 clamp(74px,9.5vw,156px)/.88 "PingFang SC",sans-serif; letter-spacing:-.065em; text-align:left; cursor:pointer; }
.studio-name>span { display:block; transition:color .5s ease,transform .65s cubic-bezier(.2,.8,.2,1); }
.studio-name>span+span { margin-top:12px; color:var(--studio-red); display:flex; align-items:center; gap:.25em; }
.studio-name .name-star { display:inline-block; font-size:.66em; font-weight:400; line-height:1; transition:transform .8s cubic-bezier(.2,.8,.2,1); }
.studio-name:hover .name-star,.studio-name:focus-visible .name-star { transform:rotate(90deg); }
.name-color-click .studio-name>span:first-child { color:var(--studio-red); }
.name-color-click .studio-name>span+span { color:var(--studio-ink); }
.studio-name:focus-visible,.studio-link:focus-visible,.studio-button:focus-visible,.studio-pdf:focus-visible,.studio-wechat summary:focus-visible { outline:2px solid var(--studio-red); outline-offset:6px; }
.studio-intro { margin-top:30px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; }
.studio-chinese-name { font-size:20px; font-weight:650; }
.studio-intro p { margin:0; padding-left:18px; border-left:1px solid #11110f50; font-size:14px; line-height:1.6; }
.studio-slogan { font-size:clamp(22px,2.5vw,36px); line-height:1.5; margin:28px 0 22px; font-weight:500; letter-spacing:-.025em; }
.studio-link { display:inline-flex; align-items:center; justify-content:space-between; gap:42px; padding:8px 0; font-size:14px; color:inherit; text-decoration:none; border-bottom:1px solid; }
.studio-link>span:last-child { font-size:24px; transition:transform .3s; }
.studio-link:hover>span:last-child { transform:translate(4px,4px); }
.studio-visual { min-width:0; perspective:1200px; }
.portrait-instrument { --view:0; --tilt-x:0deg; --tilt-y:0deg; position:relative; isolation:isolate; aspect-ratio:.88; background:#e7e3d9; overflow:hidden; transform:rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transition:transform .5s ease,background .6s; border:1px solid #11110f18; }
.portrait-disc { position:absolute; z-index:-1; width:100%; aspect-ratio:1; left:10%; top:17%; border-radius:50%; background:var(--studio-red); transform:translateX(calc(var(--view) * -15%)) scale(calc(1 - var(--view) * .18)); transition:transform .2s; }
.portrait-window { position:absolute; inset:0 0 58px; overflow:hidden; }
.portrait-window img { position:absolute; width:100%; max-width:none; height:100%; object-fit:contain; object-position:center bottom; transform:scale(calc(1.48 - var(--view) * .48)) translateY(calc(10% - var(--view) * 10%)); transform-origin:50% 25%; filter:grayscale(1) contrast(1.08); transition:transform .16s linear; }
.portrait-coordinate { position:absolute; z-index:4; inset:18px 18px auto; display:flex; justify-content:space-between; font-size:11px; letter-spacing:.12em; pointer-events:none; }
.portrait-grid { position:absolute; inset:0 0 58px; background-image:linear-gradient(#f2efe83d 1px,transparent 1px),linear-gradient(90deg,#f2efe83d 1px,transparent 1px); background-size:36px 36px; opacity:calc(var(--view) * .5); pointer-events:none; }
.portrait-reticle { position:absolute; z-index:3; left:14%; right:14%; top:24%; bottom:22%; border:1px solid #f2efe870; opacity:var(--view); pointer-events:none; }
.portrait-control { position:absolute; bottom:0; inset-inline:0; min-height:58px; padding:14px 18px; display:flex; gap:20px; align-items:center; background:var(--studio-ink); color:var(--studio-paper); font-size:12px; letter-spacing:.08em; }
.portrait-range { width:100%; min-width:0; height:28px; accent-color:var(--studio-red); cursor:ew-resize; }
.portrait-control>span { flex-shrink:0; white-space:nowrap; }
.portrait-readout { flex-shrink:0; font-variant-numeric:tabular-nums; }
.studio-visual-footer { display:flex; justify-content:space-between; align-items:center; gap:14px; padding-top:17px; font-size:11px; letter-spacing:.075em; }
.studio-wechat { position:relative; z-index:12; font-size:12px; }
.studio-wechat summary { cursor:pointer; list-style:none; display:flex; gap:12px; align-items:center; min-height:30px; }
.studio-wechat summary::-webkit-details-marker { display:none; }
.studio-wechat>div { position:absolute; right:0; bottom:calc(100% + 12px); width:210px; background:var(--studio-paper); border:1px solid var(--studio-ink); padding:12px; box-shadow:0 12px 35px #0002; text-align:center; }
.studio-wechat img { display:block; width:100%; height:auto; margin-bottom:8px; }
.studio-disciplines { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #11110f30; }
.studio-disciplines a { position:relative; display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:82px; padding:22px clamp(16px,2.5vw,40px); text-decoration:none; color:inherit; border-right:1px solid #11110f30; font-size:12px; letter-spacing:.015em; transition:color .25s,background .25s; }
.studio-disciplines a:last-child { border-right:0; }
.studio-disciplines a>span:first-child { color:var(--studio-red); font-variant-numeric:tabular-nums; }
.studio-disciplines b { font-size:24px; font-weight:400; transition:transform .35s; }
.studio-disciplines a:hover,.studio-disciplines a:focus-visible { background:var(--studio-ink); color:var(--studio-paper); }
.studio-disciplines a:hover b { transform:translate(3px,-3px); }
.studio-profile { background:var(--studio-ink); color:var(--studio-paper); padding:0 clamp(22px,5vw,80px); scroll-margin-top:70px; overflow:clip; }
.studio-profile-top { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:30px 0; border-bottom:1px solid #f2efe832; font-size:12px; letter-spacing:.08em; }
.studio-profile-top>span:last-child { color:var(--studio-red); font-size:28px; }
.studio-profile-grid { display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(36px,7vw,110px); align-items:center; padding:76px 0 80px; }
.studio-biography { min-width:0; }
.studio-biography .studio-eyebrow { color:var(--studio-red); margin-bottom:26px; }
.studio-biography h2 { margin:0; font-size:clamp(30px,3.35vw,54px); line-height:1.35; font-weight:600; letter-spacing:-.035em; text-wrap:pretty; }
.studio-biography h2 em { display:block; font-style:normal; color:var(--studio-red); margin-top:8px; }
.studio-summary { font-size:17px; line-height:1.9; color:#e5e1d8; margin:30px 0 0; max-width:36em; text-wrap:pretty; }
.studio-detail { font-size:15px; line-height:1.9; color:#a8a49b; margin:18px 0 0; max-width:36em; }
.studio-actions { display:flex; flex-wrap:wrap; align-items:center; gap:24px; margin-top:34px; }
.studio-button { display:inline-flex; gap:28px; align-items:center; justify-content:space-between; min-height:54px; padding:15px 22px; background:var(--studio-red); color:#fff; font-size:14px; text-decoration:none; transition:background .3s,color .3s; }
.studio-button:hover { background:var(--studio-paper); color:var(--studio-ink); }
.studio-button>span:last-child { font-size:22px; }
.studio-pdf { color:var(--studio-paper); text-decoration:none; font-size:14px; padding:12px 0; border-bottom:1px solid #f2efe866; }
.studio-full-portrait { margin:0; transform:translateY(calc(var(--profile-drift,0) * 18px)); }
.studio-image-frame { background:var(--studio-paper); aspect-ratio:.78; overflow:hidden; padding:24px 0 0; position:relative; }
.studio-image-frame::before { content:'02 / PORTRAIT'; position:absolute; top:18px; left:20px; color:var(--studio-ink); font-size:11px; letter-spacing:.1em; }
.studio-image-frame img { display:block; height:100%; width:100%; object-fit:contain; object-position:center bottom; filter:grayscale(1) contrast(1.08); }
.studio-full-portrait figcaption { display:flex; justify-content:space-between; gap:16px; padding:16px 0 0; font-size:11px; letter-spacing:.07em; color:#aaa79e; }
.studio-transition { display:flex; justify-content:space-between; gap:20px; padding:30px 0 34px; border-top:1px solid #f2efe832; font-size:clamp(36px,6vw,96px); font-weight:600; line-height:1.05; letter-spacing:-.05em; }
.studio-transition>span:last-child { color:var(--studio-red); }
.studio-profile.is-observed .studio-biography { animation:studio-rise .8s both; }
.studio-profile.is-observed .studio-full-portrait { animation:studio-rise 1s .1s both; }
@keyframes studio-rise { from { opacity:.3; translate:0 28px; } to { opacity:1; translate:0 0; } }
@media (min-width:1600px) { .studio-cover { max-width:1600px; margin:auto; } }
@media (max-width:1000px) {
  .studio-cover { gap:28px; padding:36px 28px; }
  .studio-name { font-size:9.3vw; }
  .studio-eyebrow { font-size:11px; margin-bottom:24px; }
  .studio-slogan { font-size:24px; margin-top:24px; }
  .studio-intro { gap:8px; }
  .studio-intro p { padding-left:10px; font-size:12px; }
  .studio-visual-footer { flex-wrap:wrap; font-size:10px; }
  .studio-profile-grid { gap:36px; grid-template-columns:1.25fr 1fr; padding:60px 0; }
  .studio-summary { font-size:16px; }
  .studio-disciplines a { padding:20px 14px; gap:8px; font-size:11px; }
}
@media (max-width:700px) {
  .studio-meta { font-size:10px; padding:18px 20px; letter-spacing:.04em; }
  .studio-meta { flex-wrap:wrap; gap:10px; }
  .studio-availability { order:3; flex-basis:100%; font-size:12px; }
  .studio-cover { grid-template-columns:1fr; padding:30px 20px; gap:32px; }
  .studio-heading .studio-eyebrow { font-size:10px; margin-bottom:20px; }
  .studio-name { display:flex; gap:.09em; font-size:11.8vw; letter-spacing:-.065em; }
  .studio-name>span+span { margin-top:0; }
  .studio-name .name-star { display:none; }
  .studio-intro { margin-top:22px; gap:10px; }
  .studio-chinese-name { font-size:18px; }
  .studio-intro p { font-size:13px; }
  .studio-slogan { margin:20px 0 14px; font-size:25px; line-height:1.4; }
  .studio-link { font-size:13px; }
  .portrait-instrument { aspect-ratio:1; max-height:560px; }
  .studio-visual { width:100%; max-width:520px; margin:auto; }
  .studio-visual-footer { flex-wrap:nowrap; font-size:10px; }
  .studio-disciplines { grid-template-columns:1fr; }
  .studio-disciplines a { min-height:58px; padding:16px 20px; font-size:12px; border-right:0; border-bottom:1px solid #11110f30; }
  .studio-disciplines a>span:nth-child(2) { flex:1; margin-left:12px; }
  .studio-profile { padding:0 24px; scroll-margin-top:60px; }
  .studio-profile-top { padding:24px 0; font-size:10px; letter-spacing:.04em; }
  .studio-profile-grid { grid-template-columns:1fr; padding:42px 0; gap:40px; }
  .studio-biography h2 { font-size:clamp(27px,6.7vw,42px); line-height:1.45; }
  .studio-biography .studio-eyebrow { font-size:12px; margin-bottom:20px; }
  .studio-summary { font-size:16px; line-height:1.85; margin-top:24px; }
  .studio-detail { font-size:14px; }
  .studio-actions { gap:20px; margin-top:26px; }
  .studio-button { min-height:52px; font-size:14px; }
  .studio-full-portrait { width:min(100%,460px); justify-self:center; transform:none; }
  .studio-image-frame { aspect-ratio:.88; }
  .studio-transition { font-size:9vw; padding:26px 0; }
}
@media (prefers-reduced-motion:reduce) {
  .intro-studio *,.studio-profile * { animation:none!important; transition:none!important; }
  .portrait-instrument,.studio-full-portrait { transform:none; }
}

/* Two covers, one scroll-driven stage. The document remains readable without JS. */
.folio-pager { display:none; }
.folio-sequence.folio-motion { --folio-p:0; --folio-top:70px; position:relative; height:260svh; }
.folio-motion .folio-stage { position:sticky; top:var(--folio-top); height:calc(100svh - var(--folio-top)); overflow:hidden; background:var(--ink); perspective:1600px; }
.folio-motion .intro-studio,.folio-motion .studio-profile { position:absolute; inset:0 0 34px; height:auto; min-height:0; will-change:transform; }
.folio-motion .intro-studio { display:grid; grid-template-rows:48px minmax(0,1fr) 64px; transform:translateY(calc(var(--folio-p) * -12%)) scale(calc(1 - var(--folio-p) * .055)); transform-origin:50% 0; filter:brightness(calc(1 - var(--folio-p) * .22)); }
.folio-motion .studio-meta { padding:12px 36px; align-items:center; font-size:11px; }
.folio-motion .studio-cover { display:grid; grid-template-columns:.85fr 1.15fr; grid-template-rows:16px auto auto minmax(0,1fr) 34px; gap:14px 40px; align-items:stretch; min-height:0; padding:24px 42px 28px; }
.folio-motion .studio-heading { display:contents; }
.folio-motion .studio-heading .studio-eyebrow { grid-column:1 / -1; grid-row:1; margin:0; font-size:11px; }
.folio-motion .studio-heading h1 { grid-column:1 / -1; grid-row:2; }
.folio-motion .studio-name { display:flex; align-items:baseline; gap:.095em; font-size:clamp(72px,12.3vw,180px); line-height:.95; letter-spacing:-.075em; }
.folio-motion .studio-name>span+span { margin:0; gap:.25em; }
.folio-motion .studio-name .name-star { font-size:.43em; }
.folio-motion .studio-intro { grid-column:1; grid-row:3; margin:20px 0 0; align-self:start; }
.folio-motion .studio-slogan { grid-column:1; grid-row:4; align-self:center; margin:0; font-size:clamp(24px,3vw,43px); line-height:1.4; }
.folio-motion .studio-link { grid-column:1; grid-row:5; justify-self:start; align-self:end; }
.folio-motion .studio-visual { grid-column:2; grid-row:3 / 6; min-height:0; display:flex; flex-direction:column; }
.folio-motion .portrait-instrument { flex:1; min-height:0; aspect-ratio:auto; border:0; }
.folio-motion .portrait-window { bottom:42px; }
.folio-motion .portrait-grid { bottom:42px; }
.folio-motion .portrait-disc { width:76%; left:20%; top:9%; }
.folio-motion .portrait-control { min-height:42px; padding:5px 16px; }
.folio-motion .portrait-coordinate { top:12px; font-size:10px; }
.folio-motion .studio-visual-footer { padding-top:8px; min-height:28px; }
.folio-motion .studio-disciplines a { min-height:0; padding:12px 24px; }
.folio-motion .studio-profile { z-index:3; display:grid; grid-template-rows:64px minmax(0,1fr) 78px; padding:0 42px; transform:translate3d(0,calc((1 - var(--folio-p)) * 104%),0); border-top:2px solid var(--red); box-shadow:0 -20px 60px #0004; }
.folio-motion .studio-profile-top { padding:16px 0; }
.folio-motion .studio-profile-grid { min-height:0; padding:28px 0; gap:50px; grid-template-columns:1.2fr 1fr; }
.folio-motion .studio-biography { animation:none; transform:translateY(calc((1 - var(--folio-p)) * 34px)); }
.folio-motion .studio-biography h2 { font-size:clamp(27px,3vw,46px); line-height:1.35; }
.folio-motion .studio-biography .studio-eyebrow { margin-bottom:20px; }
.folio-motion .studio-summary { margin-top:22px; font-size:16px; line-height:1.8; }
.folio-motion .studio-detail { margin-top:14px; font-size:14px; }
.folio-motion .studio-actions { margin-top:24px; gap:20px; }
.folio-motion .studio-full-portrait { align-self:stretch; display:flex; flex-direction:column; min-height:0; height:100%; transform:none; animation:none; }
.folio-motion .studio-image-frame { flex:1; min-height:0; aspect-ratio:auto; }
.folio-motion .studio-full-portrait figcaption { flex-shrink:0; }
.folio-motion .studio-transition { font-size:clamp(28px,4.3vw,66px); padding:14px 0; align-items:center; }
.folio-motion .folio-pager { display:flex; position:absolute; z-index:6; bottom:0; inset-inline:0; height:34px; background:var(--paper); color:var(--ink); gap:24px; align-items:center; padding:0 24px; }
.folio-pager button { border:0; background:none; color:inherit; cursor:pointer; font:500 10px/1 "PingFang SC",sans-serif; letter-spacing:.05em; padding:8px 0; white-space:nowrap; }
.folio-pager button[aria-current="true"] { color:var(--red); }
.folio-pager button:focus-visible { outline:2px solid var(--red); outline-offset:2px; }
.folio-progress { height:1px; background:#11110f30; flex:1; }
.folio-progress i { display:block; width:100%; height:2px; background:var(--red); transform:scaleX(var(--folio-p)); transform-origin:left; }
@media (max-width:1100px) and (min-width:701px) {
  .folio-motion .studio-cover { padding:22px 28px; gap:12px 26px; }
  .folio-motion .studio-profile { padding:0 28px; }
  .folio-motion .studio-profile-grid { gap:28px; }
  .folio-motion .studio-biography h2 { font-size:28px; }
  .folio-motion .studio-summary { font-size:15px; }
  .folio-motion .studio-detail { font-size:13px; }
  .folio-motion .studio-actions { gap:12px; }
  .folio-motion .studio-button { padding:12px 14px; }
  .folio-motion .studio-meta { padding:12px 28px; font-size:10px; }
}
@media (max-width:820px) { .folio-sequence.folio-motion { --folio-top:60px; } }
@media (max-width:700px) {
  .folio-motion .intro-studio { grid-template-rows:62px minmax(0,1fr) 48px; }
  .folio-motion .studio-meta { padding:10px 20px; gap:4px 12px; font-size:9px; }
  .folio-motion .studio-availability { font-size:11px; }
  .folio-motion .studio-cover { grid-template-columns:1fr; grid-template-rows:12px auto auto auto minmax(0,1fr); padding:16px 20px 12px; gap:12px; }
  .folio-motion .studio-heading .studio-eyebrow { font-size:9px; letter-spacing:.025em; }
  .folio-motion .studio-name { font-size:12vw; line-height:.95; }
  .folio-motion .studio-name .name-star { display:none; }
  .folio-motion .studio-intro { grid-column:1; grid-row:3; margin:0; gap:10px; }
  .folio-motion .studio-chinese-name { font-size:16px; }
  .folio-motion .studio-intro p { font-size:12px; }
  .folio-motion .studio-slogan { grid-column:1; grid-row:4; margin:0; font-size:22px; line-height:1.35; }
  .folio-motion .studio-link { display:none; }
  .folio-motion .studio-visual { grid-column:1; grid-row:5; width:100%; min-height:0; }
  .folio-motion .studio-visual-footer { min-height:24px; font-size:9px; padding:3px 0 0; }
  .folio-motion .studio-wechat { font-size:10px; }
  .folio-motion .studio-disciplines { grid-template-columns:repeat(3,1fr); }
  .folio-motion .studio-disciplines a { padding:6px 10px; gap:5px; font-size:9px; line-height:1.2; border-right:1px solid #11110f30; }
  .folio-motion .studio-disciplines a>span:first-child,.folio-motion .studio-disciplines b { display:none; }
  .folio-motion .studio-disciplines a>span:nth-child(2) { margin:0; }
  .folio-motion .studio-profile { padding:0 22px; grid-template-rows:44px minmax(0,1fr) 44px; }
  .folio-motion .studio-profile-top { font-size:9px; padding:10px 0; }
  .folio-motion .studio-profile-grid { display:flex; flex-direction:column; align-items:stretch; padding:20px 0 16px; gap:20px; }
  .folio-motion .studio-biography { flex-shrink:0; }
  .folio-motion .studio-biography .studio-eyebrow { font-size:10px; margin-bottom:12px; }
  .folio-motion .studio-biography h2 { font-size:25px; line-height:1.32; }
  .folio-motion .studio-summary { font-size:14px; line-height:1.65; margin-top:16px; }
  .folio-motion .studio-detail { font-size:12px; line-height:1.6; margin-top:10px; }
  .folio-motion .studio-actions { margin-top:16px; gap:14px; }
  .folio-motion .studio-button { min-height:42px; padding:10px 12px; gap:12px; font-size:12px; }
  .folio-motion .studio-pdf { font-size:11px; }
  .folio-motion .studio-full-portrait { width:100%; flex:1; min-height:120px; flex-direction:row; align-items:stretch; gap:16px; }
  .folio-motion .studio-image-frame { flex:1; padding:0; background:var(--paper); }
  .folio-motion .studio-image-frame::before { display:none; }
  .folio-motion .studio-full-portrait figcaption { width:18px; padding:0; writing-mode:vertical-rl; font-size:9px; }
  .folio-motion .studio-transition { font-size:27px; padding:8px 0; }
  .folio-motion .folio-pager { padding:0 16px; gap:16px; }
  .folio-pager button { font-size:9px; }
}