@layer base, layout, components, responsive, features;

@layer base {
  :root { --paper:#f7f9fc; --ink:#242832; --muted:#747d8b; --line:#dde3eb; --cyan:#24aed3; --blue:#4b79d8; --violet:#9a7bc0; --pink:#de3c83; --ease:cubic-bezier(.22,1,.36,1); --page-gutter:7.2vw; --nav-height:76px; --display:"Arial Black","Helvetica Neue",Arial,sans-serif; }
  * { box-sizing:border-box; }
  html { scroll-behavior:smooth; scroll-padding-top:var(--nav-height); }
  body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter,"Helvetica Neue","PingFang SC","Microsoft YaHei",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
  body.intro-active,body.dialog-open { overflow:hidden; }
  button,input { font:inherit; }
  button,a { -webkit-tap-highlight-color:transparent; }
  button { cursor:pointer; }
  button { color:inherit; }
  button:disabled { cursor:wait; }
  button,a,input { outline-offset:6px; }
  :focus-visible { outline:2px solid var(--cyan); }
  button { border:0; background:none; }
  a { color:inherit; text-decoration:none; }
  img { display:block; max-width:100%; }
  p,h1,h2,h3 { margin:0; }
  svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:square; stroke-linejoin:miter; }
  ::selection { background:#91d7eb; color:#122b39; }
  [hidden] { display:none!important; }
  .svg-library { position:absolute; width:0; height:0; overflow:hidden; }
  .sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .tiny-label { font-size:10px; letter-spacing:1.8px; font-weight:600; }
  .gradient-text { background:linear-gradient(105deg,var(--cyan),var(--blue) 46%,var(--violet) 78%,var(--pink)); background-clip:text; -webkit-background-clip:text; color:transparent; }
  .status-dot { display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--cyan); box-shadow:0 0 0 3px #24aed318; margin:0 0 2px 9px; }
  .cyan { color:var(--cyan); }
  .wordmark { display:inline-flex; align-items:center; gap:9px; font-family:var(--display); font-size:24px; font-weight:950; font-style:italic; letter-spacing:-1.2px; line-height:1; }
  .wordmark svg { width:27px; height:29px; }
  .wordmark-cn { margin-left:5px; padding-left:13px; border-left:1px solid currentColor; font-size:14px; font-style:normal; letter-spacing:3px; font-weight:700; }
  .icon-button { display:inline-grid; place-items:center; min-width:44px; min-height:44px; padding:10px; transition:color .25s,background .25s; }
  .icon-button:hover { color:var(--cyan); }
  .text-link { display:inline-flex; align-items:center; gap:22px; font-size:13px; font-weight:600; white-space:nowrap; padding:10px 0; }
  .text-link svg { width:18px; height:18px; transition:transform .3s var(--ease); }
  .text-link:hover svg { transform:translate(3px,-3px); }
  .text-link:hover { color:var(--blue); }
  .solid-button { display:inline-flex; align-items:center; justify-content:space-between; min-width:198px; gap:35px; background:var(--ink); color:white; min-height:52px; padding:0 22px; font-size:13px; clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%); transition:background .25s; }
  .solid-button:hover { background:var(--blue); }
  .solid-button svg { width:18px; }
}

@layer layout {
  .section-wrap { max-width:1600px; margin:auto; padding:100px var(--page-gutter); }
  .section-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:26px; }
  .section-eyebrow { display:flex; gap:15px; align-items:center; font-size:10px; font-weight:700; letter-spacing:2.1px; }
  .section-eyebrow>span { padding-right:15px; border-right:1px solid #b6c4d4; color:var(--cyan); font-size:12px; }
  .section-top>.tiny-label { color:var(--muted); font-weight:400; font-size:11px; letter-spacing:1px; }
  .section-heading { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:35px; gap:24px; }
  .section-heading h2 { font-size:clamp(28px,3vw,44px); font-weight:800; letter-spacing:-2px; line-height:1.5; }
  .section-heading h2>span { color:var(--cyan); }
  .section-heading h2>span:not(:first-child) { font-weight:750; }
  .section-heading p { font:900 italic clamp(20px,2.1vw,30px)/1.05 var(--display); letter-spacing:-.8px; }
  .heading-slash { padding-left:10px; color:var(--cyan); }
  .grid-paper { background-image:linear-gradient(#b6c5d719 1px,transparent 1px),linear-gradient(90deg,#b6c5d719 1px,transparent 1px); background-size:36px 36px; }
  .js-ready .reveal { opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease),transform .8s var(--ease); }
  .js-ready .reveal.is-visible { opacity:1; transform:none; }
}

@layer components {
  /* The opening is a separate, keyboard-accessible entrance. */
  .intro { position:fixed; z-index:100; inset:0; min-height:540px; overflow:hidden; background:#f5f8fb; color:#202936; }
  .intro-grid { position:absolute; inset:0; background-image:linear-gradient(#afc0d224 1px,transparent 1px),linear-gradient(90deg,#afc0d224 1px,transparent 1px); background-size:62px 62px; mask-image:linear-gradient(90deg,#0006,transparent 40%,#0008); }
  .intro::before { content:""; width:680px; height:680px; position:absolute; right:-250px; bottom:-480px; border:1px solid #bbcad3; border-radius:50%; box-shadow:0 0 0 28px #f5f8fb,0 0 0 29px #cfdae3,0 0 0 60px #f5f8fb,0 0 0 61px #dce4ec,0 0 0 102px #f5f8fb,0 0 0 103px #e1e7ed; }
  .intro-top { position:absolute; z-index:3; top:39px; left:4vw; right:4vw; display:flex; justify-content:space-between; align-items:center; }
  .intro-top>.tiny-label { color:var(--muted); font-size:9px; }
  /* Anchor the tilted panel to the content so its label stays above the eyebrow at every aspect ratio. */
  .intro-frame { position:absolute; z-index:-1; pointer-events:none; left:calc(50% - 42.8vw); top:0; bottom:-52px; width:max-content; border-left:1px solid #aebdc84d; border-bottom:1px solid #aebdc84d; transform:skewY(-3deg); transform-origin:top left; }
  .intro-frame>span { display:block; position:relative; top:-32px; left:0; white-space:nowrap; font:600 9px/1.5 monospace; letter-spacing:2px; color:#8995a4; }
  .intro-frame>i { display:block; position:absolute; top:0; left:-2px; width:3px; height:38px; background:var(--cyan); }
  .intro-art { position:absolute; right:6%; top:15%; width:30vw; height:46vh; opacity:.24; clip-path:polygon(27% 0,100% 0,75% 100%,0 100%); transform:translateX(25px); animation:introArt 1.8s .1s var(--ease) forwards; }
  .intro-art img { width:100%; height:100%; object-fit:cover; object-position:34% center; filter:saturate(.45); }
  .intro-art>div { position:absolute; inset:0; background:linear-gradient(0deg,#f5f8fb,transparent 80%); }
  .intro-center { position:absolute; z-index:2; left:50%; top:49%; width:min(900px,82vw); transform:translate(-50%,-50%); }
  .intro-eyebrow { display:flex; align-items:center; gap:12px; font-size:10px; font-weight:650; letter-spacing:3px; padding-left:3px; animation:fadeUp .8s .08s var(--ease) both; }
  .intro-eyebrow>span { width:25px; height:4px; transform:skewX(-18deg); background:var(--cyan); }
  .intro-title { display:flex; align-items:baseline; font-family:var(--display); font-style:italic; font-weight:950; font-size:clamp(98px,16.5vw,230px); line-height:1.1; letter-spacing:-.095em; margin-left:-13px; position:relative; }
  .intro-title>span { display:block; animation:wordReveal 1.1s .12s var(--ease) both; }
  .intro-title>span:nth-child(2) { animation-delay:.22s; }
  .intro-title>i { color:var(--cyan); font-style:italic; animation:wordReveal 1s .36s var(--ease) both; }
  .intro-subline { display:flex; justify-content:space-between; align-items:center; width:92%; gap:20px; padding:12px 0 16px 5px; border-top:1px solid #afbcc94d; animation:fadeUp .9s .32s var(--ease) both; }
  .intro-cn { font-size:clamp(15px,1.5vw,20px); font-weight:700; letter-spacing:4px; }
  .intro-subline>.gradient-text { font:900 italic 13px/1.3 var(--display); letter-spacing:-.4px; }
  .enter-button { display:flex; align-items:center; gap:18px; margin-top:42px; background:#25313c; color:#fff; min-height:66px; padding:0 23px 0 18px; min-width:265px; clip-path:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,0 100%); text-align:left; animation:fadeUp 1s .5s var(--ease) both; transition:background .25s,transform .35s var(--ease); }
  .enter-button:hover { background:#287f99; transform:translateY(-3px); }
  .enter-button:focus-visible { outline-offset:-4px; outline:2px solid #79e6fb; }
  .enter-button>span:nth-child(2) { font-size:14px; font-weight:650; letter-spacing:2px; }
  .enter-icon { color:#84d8e7; font-size:26px; border-right:1px solid #ffffff35; padding-right:18px; }
  .button-en { display:block; font-size:8px; margin-top:5px; letter-spacing:1.9px; font-weight:400; color:#bfccd7; }
  .enter-arrow { margin-left:auto; padding-left:26px; font-size:23px; transition:transform .3s; }
  .enter-button:hover .enter-arrow { transform:translateX(4px); }
  .intro-hint { color:#88939f; font-size:11px; letter-spacing:1px; margin-top:18px; animation:fadeUp 1s .6s var(--ease) both; }
  .intro-bottom { position:absolute; bottom:31px; left:4vw; right:4vw; display:flex; justify-content:space-between; align-items:center; gap:20px; font-size:8px; letter-spacing:1.8px; color:#8895a2; }
  .intro-bottom i { display:inline-block; width:20px; height:1px; background:#b6c4cf; vertical-align:middle; margin:0 12px; }
  .intro-ready .status-dot { margin:0 8px 2px 0; }
  .intro-curtain { position:absolute; z-index:5; inset:0; background:var(--cyan); transform:translateX(-160%) skewX(-12deg); pointer-events:none; }
  .intro.leaving { animation:exitIntro .9s .1s var(--ease) forwards; pointer-events:none; }
  .intro.leaving .intro-center { transition:opacity .4s,filter .6s,translate .8s var(--ease); opacity:0; translate:60px 0; filter:blur(3px); }
  .intro.leaving .intro-curtain { animation:curtain .9s var(--ease) both; }
  @keyframes fadeUp { from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none} }
  /* Italic glyphs extend beyond their inline boxes; the reveal must include that overhang. */
  @keyframes wordReveal { from{opacity:0;transform:translate(-35px,35px);clip-path:inset(0 -.25em 100% -.25em)}to{opacity:1;transform:none;clip-path:inset(-.12em -.25em)} }
  @keyframes introArt { to{opacity:.32;transform:none} }
  @keyframes curtain { 0%{transform:translateX(-160%) skewX(-12deg)}50%{transform:translateX(0) skewX(-12deg)}100%{transform:translateX(160%) skewX(-12deg)} }
  @keyframes exitIntro { 0%,38%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}100%{clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%)} }

  .skip-link { position:fixed; left:20px; top:-100px; z-index:200; background:white; color:var(--ink); padding:15px; }
  .skip-link:focus { top:12px; }
  .header { position:absolute; top:0; z-index:20; width:100%; height:98px; display:flex; align-items:center; justify-content:space-between; padding:0 4vw; color:#fff; border-bottom:1px solid #ffffff25; transition:background .3s,color .3s,height .3s; }
  .header.scrolled { position:fixed; height:var(--nav-height); color:var(--ink); background:#f7f9fcf7; border-color:var(--line); box-shadow:0 4px 24px #1b2f4805; animation:fadeHeader .3s var(--ease); }
  .desktop-nav { display:flex; align-items:stretch; height:100%; gap:38px; }
  .desktop-nav a { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; position:relative; min-width:46px; font-size:13px; font-weight:600; letter-spacing:2px; }
  .desktop-nav a>span { font-size:8px; font-weight:500; letter-spacing:1.4px; opacity:.65; }
  .desktop-nav a::after { content:""; position:absolute; bottom:-1px; width:0; height:3px; background:#8edce8; transition:width .3s; }
  .desktop-nav a:hover::after,.desktop-nav a.active::after { width:38px; }
  .header-actions { display:flex; align-items:center; gap:16px; }
  .header-note { font-size:8px; letter-spacing:1.5px; }
  .header-divider { width:1px; height:19px; background:currentColor; opacity:.25; }
  .header-actions svg { width:18px; height:18px; }
  .menu-toggle { display:none; }
  .mobile-nav { position:absolute; top:100%; left:0; width:100%; background:var(--paper); color:var(--ink); padding:22px; border-bottom:1px solid var(--line); box-shadow:0 20px 30px #11223316; }
  .mobile-nav a { display:flex; padding:22px 10px; gap:24px; align-items:center; border-bottom:1px solid var(--line); font-size:10px; color:var(--muted); }
  .mobile-nav b { font-size:18px; color:var(--ink); margin-right:auto; }
  @keyframes fadeHeader { from{transform:translateY(-100%)}to{transform:none} }

  .hero { position:relative; width:100%; height:100svh; min-height:730px; max-height:1200px; color:#fff; background:#162c39; overflow:hidden; isolation:isolate; }
  .hero-images,.hero-slide,.hero-shade,.hero-grid { position:absolute; inset:0; }
  .hero-slide { opacity:0; transition:opacity 850ms var(--ease); z-index:-4; }
  .hero-slide.active { opacity:1; z-index:-3; }
  .hero-slide img { width:100%; height:100%; object-fit:cover; object-position:var(--position); transform:scale(1.045); transition:transform 7.2s linear; }
  .hero-slide.active img { transform:scale(1); }
  .hero-shade { background:linear-gradient(90deg,#0b2339bf 0%,#10243375 32%,#071c3220 58%,#0b1c3625 100%),linear-gradient(0deg,#0a203bc7 0%,transparent 42%,#07182b48 100%); z-index:-2; }
  .hero-grid { z-index:-1; background-image:linear-gradient(90deg,transparent calc(100% - 1px),#ffffff0b 1px); background-size:25% 100%; margin:0 4vw; }
  .hero-content { position:absolute; left:var(--page-gutter); top:48%; transform:translateY(-50%); }
  .hero-eyebrow { display:flex; align-items:center; gap:10px; font-size:9px; letter-spacing:1.5px; margin-bottom:27px; color:#e7f2f2; }
  .small-square { display:block; width:6px; height:6px; background:#74d6e8; }
  .hero-line { width:48px; height:1px; margin-left:6px; background:#b4c9d670; }
  .hero-content h2 { font-size:clamp(54px,6.4vw,104px); line-height:1.22; font-weight:850; letter-spacing:-5px; font-style:italic; margin-left:-5px; position:relative; }
  .hero-content h2>span { color:#e9f7fb; }
  .hero-content h2.hero-welcome { font-family:var(--display); font-size:clamp(54px,5vw,78px); font-weight:900; line-height:1.04; letter-spacing:-.045em; }
  .hero-welcome>span { display:block; }
  .hero-content h2.hero-welcome>span { color:#f7f9fc; }
  .hero-content h2.hero-welcome>.hero-welcome-world { color:#e9f7fb; }
  .hero-period { display:inline-block; color:#84dbea; font-style:normal; font-size:.7em; margin-left:7px; vertical-align:baseline; line-height:1.15; }
  .hero-english { margin-top:22px; font:900 italic clamp(19px,2.3vw,32px)/1.12 var(--display); letter-spacing:-.7px; }
  .hero-english>span { color:#9ce8f1; }
  .hero-description { max-width:390px; font-size:14px; font-weight:400; line-height:2; letter-spacing:1.2px; color:#e1e9eddd; margin-top:21px; }
  .hero-cta { display:inline-flex; gap:32px; align-items:center; padding:14px 0 9px; border-bottom:1px solid #d2ebf090; font-size:12px; letter-spacing:1px; margin-top:18px; transition:gap .3s; }
  .hero-cta:hover { gap:40px; }
  .hero-cta svg { width:19px; height:19px; }
  /* Reveal the hero during the curtain exit, without exposing static text first. */
  .intro-active .hero-content>* { opacity:0; transform:translateY(22px); }
  :is(.hero-revealing,.site-entered) .hero-content>* { animation:fadeUp .65s .28s var(--ease) both; }
  :is(.hero-revealing,.site-entered) .hero-content>*:nth-child(2) { animation-delay:.32s; }
  :is(.hero-revealing,.site-entered) .hero-content>*:nth-child(3) { animation-delay:.36s; }
  :is(.hero-revealing,.site-entered) .hero-content>*:nth-child(4) { animation-delay:.40s; }
  :is(.hero-revealing,.site-entered) .hero-content>*:nth-child(5) { animation-delay:.44s; }
  .hero-side { position:absolute; right:24px; top:44%; writing-mode:vertical-rl; font-size:8px; letter-spacing:2px; color:#ffffffa6; }
  .hero-side>span { margin:18px 0; color:#87dcee; font-size:12px; }
  .hero-caption { position:absolute; right:var(--page-gutter); bottom:150px; width:332px; display:flex; align-items:center; gap:13px; background:#f7f9fcf2; color:var(--ink); padding:17px 12px 18px 15px; border:1px solid #fff; box-shadow:7px 7px 0 #162c4d25; }
  .hero-caption::before { content:""; position:absolute; inset:4px; border:1px solid #c1ccd93d; pointer-events:none; }
  .caption-rule { width:3px; height:42px; background:var(--cyan); flex-shrink:0; }
  .hero-caption>div { flex:1; min-width:0; }
  .caption-kicker { font-size:7px; font-weight:700; letter-spacing:1px; color:#738090; display:flex; justify-content:space-between; gap:10px; }
  .hero-caption h3 { font-size:17px; font-weight:850; font-style:italic; margin:6px 0 5px; letter-spacing:-.4px; }
  .hero-caption p { font-size:6px; letter-spacing:.7px; font-weight:700; color:var(--blue); }
  .hero-caption.changing { animation:captionChange .4s var(--ease); }
  @keyframes captionChange { from{opacity:.25;translate:16px 0}to{opacity:1;translate:0 0} }
  .hero-bottom { position:absolute; left:var(--page-gutter); right:var(--page-gutter); bottom:45px; display:flex; justify-content:space-between; align-items:center; }
  .carousel-control { display:flex; align-items:center; gap:15px; }
  .slide-index { font:900 italic 30px/1 var(--display); }
  .slide-divider { width:28px; height:1px; background:#ffffff66; }
  .slide-thumbs { display:flex; gap:8px; }
  .slide-thumb { display:block; padding:3px; border:1px solid transparent; width:62px; height:44px; opacity:.58; transition:border-color .3s,opacity .3s,transform .3s; }
  .slide-thumb img { width:100%; height:100%; object-fit:cover; }
  .slide-thumb.active { opacity:1; border-color:#acdded; }
  .slide-thumb:hover { opacity:1; transform:translateY(-3px); }
  .play-toggle { margin-left:0; }
  .play-toggle svg { width:14px; height:14px; }
  .scroll-cue { position:absolute; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:13px; }
  .scroll-cue>span { font-size:7px; letter-spacing:2px; }
  .scroll-cue svg { width:15px; height:24px; animation:scrollArrow 2s infinite; }
  @keyframes scrollArrow { 0%,100%{transform:translateY(-3px);opacity:.5}50%{transform:translateY(3px);opacity:1} }
  .wallpaper-link { display:flex; align-items:center; gap:10px; color:#ffffffce; font-size:10px; letter-spacing:.5px; padding:14px 0 14px 10px; }
  .wallpaper-link svg { width:12px; height:12px; }
  .hero-progress { position:absolute; bottom:0; width:100%; height:2px; background:#ffffff15; }
  .hero-progress>span { display:block; width:100%; height:100%; transform:scaleX(0); transform-origin:left; background:#8ce4ec; }

  .journal { padding-bottom:82px; }
  .journal-bar { display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); margin-bottom:30px; padding-top:17px; gap:20px; }
  .filters { display:flex; gap:28px; }
  .filters button { font-size:12px; color:var(--muted); padding:8px 0; transition:color .2s; }
  .filters button.active,.filters button:hover { color:var(--ink); font-weight:700; }
  .filters button.active::before { content:""; width:5px; height:5px; background:var(--cyan); display:inline-block; margin-right:8px; vertical-align:2px; }
  .filters button>span { font-size:8px; vertical-align:super; padding-left:3px; color:var(--cyan); }
  .preview-label { font-size:8px; letter-spacing:1px; color:#8b95a2; }
  .journal-grid { display:grid; grid-template-columns:1.16fr 1fr; gap:40px; align-items:start; min-height:350px; }
  .article-card { display:block; text-align:left; width:100%; padding:0; }
  .article-image { overflow:hidden; position:relative; background:#d8e2e9; }
  .article-image img { width:100%; height:100%; object-fit:cover; transition:transform .65s var(--ease),filter .65s; }
  .article-card:hover .article-image img { transform:scale(1.045); filter:saturate(1.12); }
  .featured-card .article-image { aspect-ratio:1.92; }
  .article-image .image-label { position:absolute; left:16px; top:15px; padding:6px 10px; background:#f7f9fce8; font-size:9px; font-weight:700; letter-spacing:1px; }
  .image-open { position:absolute; bottom:0; right:0; width:44px; height:44px; display:grid; place-items:center; color:#fff; background:#283642b8; }
  .image-open svg { width:19px; height:19px; }
  .article-meta { display:flex; align-items:center; gap:12px; font-size:9px; color:var(--muted); letter-spacing:.4px; }
  .article-meta i { width:3px; height:3px; background:#a2adb9; border-radius:50%; }
  .article-meta .article-category { color:var(--blue); }
  .featured-card .article-meta { margin-top:20px; }
  .article-card h3 { font-size:19px; font-weight:750; line-height:1.5; margin-top:11px; letter-spacing:-.4px; transition:color .25s; }
  .article-card:hover h3 { color:var(--blue); }
  .article-card p { color:var(--muted); font-size:13px; line-height:1.9; margin-top:9px; }
  .article-list { display:flex; flex-direction:column; }
  .list-card { display:grid; grid-template-columns:1fr 123px; gap:22px; padding:0 0 24px; margin-bottom:24px; border-bottom:1px solid var(--line); }
  .list-card:last-child { padding-bottom:0; margin-bottom:0; border-bottom:0; }
  .list-card .article-image { grid-column:2; grid-row:1; width:123px; height:119px; }
  .list-card .article-info { grid-column:1; grid-row:1; }
  .list-card h3 { font-size:15px; line-height:1.6; margin-top:8px; }
  .list-card p { font-size:12px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .article-read { display:flex; align-items:center; gap:8px; color:#7a8796; font:600 7px/1 sans-serif; letter-spacing:1px; margin-top:13px; }
  .article-read svg { width:12px; height:12px; }
  .journal-grid.filtered { grid-template-columns:repeat(2,1fr); }
  .journal-grid.filtered .article-image { aspect-ratio:1.92; }
  .journal-grid.filtered .article-meta { margin-top:20px; }
  .journal-footnote { display:flex; justify-content:space-between; margin-top:28px; padding-top:20px; border-top:1px solid var(--line); font-size:9px; letter-spacing:.5px; color:#919aa5; }
  .journal-footnote>span:last-child { font-size:8px; letter-spacing:1.4px; }

  .works { border-top:1px solid #e5eaf1; border-bottom:1px solid #e5eaf1; background-color:#f1f5fa; }
  .works>.section-wrap { padding-top:83px; padding-bottom:0; }
  .work-counter { font-size:12px; color:#8894a2; padding-bottom:6px; }
  .work-counter b { color:var(--ink); font:900 italic 27px var(--display); margin-right:5px; }
  .work-stage { display:grid; grid-template-columns:1.45fr 1fr; gap:8%; padding-top:19px; align-items:center; }
  .work-visual { position:relative; padding:0 12px 20px 0; }
  .work-visual::before { content:""; position:absolute; left:-17px; bottom:0; width:90%; height:70%; background:#dce5ee; z-index:0; }
  .work-image-frame { position:relative; width:100%; aspect-ratio:1.35; overflow:hidden; clip-path:polygon(0 0,96% 0,100% 7%,100% 100%,0 100%); background:#223b4b; z-index:1; }
  .work-image-frame>img { width:100%; height:100%; object-fit:cover; object-position:65% center; filter:saturate(.65); transition:transform .7s var(--ease),opacity .3s; }
  .work-image-frame:hover>img { transform:scale(1.035); }
  .work-image-shade { position:absolute; inset:0; background:linear-gradient(90deg,#102839aa,#10283900),linear-gradient(0deg,#0e2733a6,transparent 65%); }
  .work-image-label { position:absolute; top:24px; left:26px; color:#e1edf7; font-size:8px; letter-spacing:1.4px; }
  .work-image-title { position:absolute; left:27px; bottom:76px; color:#f2f7fc; font:900 italic clamp(25px,3.5vw,49px)/1.03 var(--display); letter-spacing:-2px; }
  .work-image-title em { color:#9ae5f0; font-style:italic; }
  .work-image-bottom { position:absolute; bottom:24px; left:27px; right:24px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid #ffffff60; padding-top:15px; color:#ffffffb9; font-size:7px; letter-spacing:1.1px; }
  .work-image-bottom svg { width:18px; height:18px; }
  .work-edge { position:absolute; left:-35px; top:0; writing-mode:vertical-rl; font-size:7px; letter-spacing:1.9px; color:#91a0af; }
  .work-cross { position:absolute; right:-11px; bottom:3px; font-size:24px; color:var(--blue); font-weight:300; }
  .work-info { padding-bottom:20px; }
  .work-tag { font-size:9px; font-weight:600; color:var(--blue); letter-spacing:1.3px; }
  .work-tag::before { content:""; display:inline-block; width:17px; height:3px; background:var(--cyan); vertical-align:2px; margin-right:9px; }
  .work-info h3 { font-size:clamp(25px,2.8vw,38px); font-weight:800; line-height:1.6; letter-spacing:-1.1px; margin-top:18px; }
  .work-info>p { font-size:14px; line-height:2.1; color:var(--muted); margin-top:20px; }
  .work-tags { display:flex; flex-wrap:wrap; gap:9px; margin:23px 0 30px; }
  .work-tags>span { border:1px solid #cad5e0; padding:6px 10px; color:#728194; font-size:9px; }
  .work-tabs { display:flex; align-items:stretch; gap:32px; border-top:1px solid #ced9e4; margin-top:37px; }
  .work-tabs button { display:flex; align-items:center; gap:12px; padding:25px 0; position:relative; opacity:.48; }
  .work-tabs button::before { content:""; height:3px; width:0; position:absolute; left:0; top:-2px; background:var(--blue); transition:width .3s; }
  .work-tabs button.active { opacity:1; }
  .work-tabs button.active::before { width:100%; }
  .work-tabs button>span { color:var(--blue); font:800 italic 12px var(--display); }
  .work-tabs button>b { font-size:11px; font-weight:600; }
  .work-tabs button>small { font-size:7px; letter-spacing:.7px; color:#7a8999; }
  .work-tabs-note { margin-left:auto; align-self:center; color:#93a0ac; font-size:7px; letter-spacing:1px; }

  .about { display:grid; grid-template-columns:1.1fr 1fr; gap:10%; padding-top:119px; padding-bottom:126px; align-items:center; }
  .about-copy h2 { margin-top:27px; font-size:clamp(33px,3.8vw,54px); line-height:1.55; font-weight:800; letter-spacing:-2px; }
  .about-intro { display:flex; gap:21px; margin-top:30px; }
  .about-line { height:55px; width:3px; margin-top:4px; background:#b6d2df; }
  .about-intro h3 { font-size:16px; font-weight:650; }
  .about-intro h3>span { color:#8392a2; font:800 italic 12px var(--display); margin-left:11px; }
  .about-intro p { margin-top:12px; color:var(--muted); font-size:14px; line-height:2.1; }
  .about-copy>.text-link { margin-top:25px; margin-left:24px; }
  .about-visual { position:relative; padding:20px; }
  .about-visual::before { content:""; position:absolute; inset:0 0 50px 0; border:1px solid #cbd6e0; transform:rotate(5deg); }
  .about-photo { position:relative; aspect-ratio:1.07; overflow:hidden; background:#1d283e; }
  .about-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,#16213395,transparent 65%); }
  .about-photo>img { width:100%; height:100%; object-fit:cover; object-position:48% center; }
  .about-photo>span { position:absolute; bottom:24px; left:24px; z-index:1; color:white; font:900 italic clamp(17px,2vw,27px)/1.15 var(--display); letter-spacing:-.8px; }
  .about-photo>span i { color:#ffd8ae; }
  .about-photo-caption { display:flex; justify-content:flex-end; margin-top:15px; font-size:9px; color:#7b8796; gap:10px; }
  .about-photo-caption>span:last-child { font-size:7px; letter-spacing:1px; }
  .about-corner { position:absolute; right:-2px; top:-20px; font-size:20px; color:var(--cyan); }
  .about-coordinate { position:absolute; left:24px; bottom:-23px; color:#b3becb; font-size:8px; letter-spacing:2px; }
  .closing-line { overflow:hidden; display:flex; align-items:center; justify-content:space-around; gap:25px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px 3vw; font:900 italic clamp(17px,2.8vw,38px)/1 var(--display); letter-spacing:-1.3px; white-space:nowrap; color:#8b9eaf; }
  .closing-star { color:#58bdd4; font-size:24px; font-weight:400; }
  .footer { padding:44px 4vw 40px; display:flex; align-items:center; justify-content:space-between; gap:35px; }
  .footer .wordmark { font-size:21px; }
  .footer .wordmark-cn { font-size:12px; }
  .footer>div>p { font-size:9px; color:#8794a2; margin-top:14px; letter-spacing:1px; }
  .footer-middle { display:flex; flex-direction:column; gap:10px; font-size:8px; color:#8995a2; letter-spacing:.7px; }
  .footer-middle>span:last-child { font-size:8px; letter-spacing:0; }
  .icp-link { color:var(--muted); font-size:12px; line-height:1.8; letter-spacing:0; white-space:nowrap; }
  .icp-link:hover { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
  .icp-link:focus-visible { outline:2px solid currentColor; outline-offset:4px; }
  .footer-actions { display:flex; flex-direction:column; align-items:flex-end; gap:13px; font-size:8px; }
  .footer-actions button { color:#8895a2; font-size:10px; padding:6px 0; }
  .footer-actions button>span { padding-left:13px; }
  .footer-actions>a { display:flex; align-items:center; gap:20px; letter-spacing:1px; font-weight:600; }
  .footer-actions svg { width:15px; height:15px; transform:rotate(180deg); }

  /* Reading, search and the wallpaper collection share a native dialog. */
  .content-dialog { width:min(1080px,calc(100vw - 64px)); max-width:none; max-height:calc(100svh - 64px); margin:auto; background:var(--paper); color:var(--ink); border:1px solid #c6d2df; padding:0; overscroll-behavior:contain; box-shadow:0 20px 90px #05182f35; }
  .content-dialog::backdrop { background:#12263ada; backdrop-filter:blur(7px); }
  .content-dialog[open] { animation:dialogIn .35s var(--ease); }
  @keyframes dialogIn { from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none} }
  .dialog-toolbar { display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:2; padding:12px 24px; background:#f7f9fcf7; border-bottom:1px solid var(--line); }
  .dialog-toolbar .wordmark { font-size:18px; }
  .dialog-toolbar .wordmark svg { width:20px; height:22px; }
  .dialog-toolbar>span { font-size:8px; letter-spacing:2px; color:#8192a3; }
  .dialog-toolbar .icon-button { width:44px; }
  .dialog-toolbar svg { width:20px; height:20px; }
  .dialog-reading { max-width:800px; margin:auto; padding:42px 48px 62px; }
  .dialog-reading>.article-meta { margin-bottom:15px; }
  .dialog-reading h1 { font-size:clamp(24px,3vw,36px); line-height:1.5; font-weight:800; letter-spacing:-1px; }
  .reading-english { font:900 italic 13px var(--display); letter-spacing:.3px; color:var(--blue); margin-top:8px; }
  .reading-cover { width:100%; aspect-ratio:1.9; object-fit:cover; margin:30px 0; }
  .reading-content { font-size:15px; line-height:2.15; }
  .reading-content p { margin:23px 0; }
  .reading-content h2 { font-size:22px; margin:38px 0 17px; font-weight:750; }
  .reading-content blockquote { border-left:3px solid var(--cyan); padding:18px 22px; margin:28px 0; background:#eaf0f7; font-size:17px; font-weight:600; }
  .reading-content .demo-note { font-size:12px; background:#eaf0f6; border-left:2px solid #a5b6c9; padding:12px 16px; line-height:1.8; color:#738499; }
  .reading-content pre { max-width:100%; overflow:auto; background:#202d3a; color:#bfe6ed; padding:22px; font:12px/1.8 monospace; }
  .reading-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:40px; border-top:1px solid var(--line); padding-top:24px; }
  .reading-footer>span { font:700 9px sans-serif; letter-spacing:1px; color:var(--muted); }
  .archive-content { padding:38px 40px 45px; }
  .dialog-section-title { font:900 italic 32px/1.2 var(--display); letter-spacing:-1px; }
  .dialog-subtitle { font-size:12px; color:var(--muted); margin-top:12px; line-height:1.8; }
  .search-box { display:flex; align-items:center; gap:12px; margin:25px 0; padding:9px 13px; border:1px solid #b9c8d6; }
  .search-box svg { width:20px; height:20px; color:var(--muted); }
  .search-box input { background:transparent; border:0; min-width:0; flex:1; min-height:35px; color:var(--ink); font-size:13px; outline:none; }
  .search-box:focus-within { outline:2px solid var(--cyan); outline-offset:3px; }
  .archive-results { margin-top:30px; }
  .archive-row { display:grid; grid-template-columns:100px 1fr 24px; gap:23px; width:100%; align-items:center; text-align:left; padding:22px 0; border-top:1px solid var(--line); }
  .archive-row img { width:100px; height:78px; object-fit:cover; }
  .archive-row h3 { font-size:17px; line-height:1.6; margin-top:6px; }
  .archive-row:hover h3 { color:var(--blue); }
  .archive-row>svg { width:18px; height:18px; }
  .no-results { padding:36px 0; color:var(--muted); line-height:2; font-size:13px; }
  .gallery-content { padding:32px; }
  .gallery-title-row { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:23px; }
  .gallery-count { font:900 italic 20px var(--display); color:var(--blue); }
  .gallery-main { position:relative; background:#172738; overflow:hidden; }
  .gallery-main img { width:100%; height:min(46vh,540px); object-fit:contain; }
  .gallery-arrow { position:absolute; top:50%; transform:translateY(-50%); background:#14233499; color:white; width:45px; height:52px; }
  .gallery-arrow:hover { background:#142334dd; }
  .gallery-arrow.prev { left:0; }
  .gallery-arrow.prev svg { transform:rotate(180deg); }
  .gallery-arrow.next { right:0; }
  .gallery-detail { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:18px; }
  .gallery-detail h2 { font-size:20px; font-weight:750; }
  .gallery-detail p { font-size:8px; color:var(--muted); margin-top:6px; letter-spacing:1px; }
  .gallery-detail .solid-button { font-size:11px; min-width:150px; min-height:44px; }
  .gallery-thumbnails { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:23px; }
  .gallery-thumb { border:1px solid transparent; padding:4px; opacity:.6; }
  .gallery-thumb.active { border-color:var(--blue); opacity:1; }
  .gallery-thumb:hover { opacity:1; }
  .gallery-thumb img { width:100%; height:76px; object-fit:cover; }
  .gallery-credit { margin-top:17px; font-size:9px; color:var(--muted); line-height:1.8; }
  .toast { position:fixed; z-index:200; bottom:30px; left:50%; transform:translate(-50%,12px); background:#233440; color:#edf6fa; padding:15px 24px; font-size:12px; opacity:0; pointer-events:none; transition:opacity .25s,transform .25s; width:max-content; max-width:calc(100vw - 32px); text-align:center; box-shadow:0 8px 35px #0002; }
  .toast.visible { opacity:1; transform:translate(-50%,0); }
}

@layer responsive {
  .hero-content h2.hero-welcome { font-size:clamp(54px,5vw,78px); line-height:1.04; letter-spacing:-.045em; }
  .hero-english br { display:block; }
  @media(min-width:1650px) { .hero-content{left:max(7.2vw,calc((100vw - 1360px)/2))}.hero-caption{right:max(7.2vw,calc((100vw - 1360px)/2))} }
  @media(max-width:1100px) {
    :root{--page-gutter:6vw}
    .desktop-nav{gap:25px}.header-note,.header-divider{display:none}.header-actions{gap:0}
    .hero-content h2{font-size:74px}.hero-caption{width:296px;bottom:160px}.hero-description{font-size:11px}.hero-bottom{bottom:35px}.slide-thumb{width:53px;height:42px}.carousel-control{gap:10px}.scroll-cue{left:61%}.hero-eyebrow{font-size:8px;letter-spacing:1px}
    .section-wrap{padding-top:75px;padding-bottom:75px}.journal-grid{gap:27px;grid-template-columns:1.08fr 1fr}.list-card{grid-template-columns:1fr 95px;gap:15px;margin-bottom:18px;padding-bottom:18px}.list-card .article-image{width:95px;height:113px}.list-card h3{font-size:14px}.article-meta{font-size:8px;gap:8px}.list-card p{font-size:10px}.featured-card .article-image{aspect-ratio:1.65}
    .work-stage{gap:6%;grid-template-columns:1.25fr 1fr}.work-tabs-note{display:none}.work-info h3{font-size:29px}.work-info>p{font-size:11px}.work-tags{margin:17px 0 23px}.work-image-frame{aspect-ratio:1.05}.work-info h3{margin-top:15px}.work-info>p{margin-top:14px}.work-tabs{gap:30px}.work-tabs button>small{font-size:6px}
    .about{gap:8%;padding-top:90px;padding-bottom:90px}.about .section-eyebrow{font-size:8px;letter-spacing:1.5px}.about-intro h3{font-size:14px}.about-photo{aspect-ratio:.9}.about-photo-caption{font-size:8px}.about-photo-caption>span:last-child{display:none}.about-copy h2{font-size:40px}.footer{gap:25px}.footer-middle{font-size:7px}
  }
  @media(max-width:760px) {
    :root{--page-gutter:24px}
    :root{--nav-height:66px}.header{height:78px;padding:0 24px}.header.scrolled{height:var(--nav-height)}.header .wordmark{font-size:22px}.wordmark-cn{font-size:12px;padding-left:10px;margin-left:2px}.desktop-nav{display:none}.header-actions{gap:2px}.header-actions .icon-button{min-width:40px;width:40px}.menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:6px}.menu-toggle>span{display:block;width:19px;height:1px;background:currentColor;transition:transform .2s}.menu-toggle[aria-expanded=true]>span:first-child{transform:translateY(3.5px) rotate(45deg)}.menu-toggle[aria-expanded=true]>span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
    .intro{min-height:520px}.intro-top{left:24px;right:24px;top:26px}.intro-top .wordmark{font-size:21px}.intro-top>.tiny-label{font-size:6px;letter-spacing:.7px;max-width:96px;line-height:1.8;text-align:right}.intro-top .status-dot{width:4px;height:4px;margin-left:5px}.intro-center{width:calc(100% - 48px);top:46%}.intro-title{font-size:clamp(82px,20.7vw,155px);letter-spacing:-.09em;margin-left:-5px;line-height:1.3}.intro-eyebrow{font-size:7px;letter-spacing:1.9px;gap:8px}.intro-eyebrow>span{width:17px;height:3px}.intro-subline{flex-direction:column;align-items:flex-start;gap:12px;padding-top:13px;width:100%}.intro-cn{font-size:16px;letter-spacing:3px}.intro-subline>.gradient-text{font-size:10px}.intro-art{right:-24%;top:11%;width:80%;height:44%;opacity:.2}.intro-frame{left:-6px;bottom:-26px}.intro-frame>span{font-size:6px;letter-spacing:1.5px;top:-26px}.enter-button{min-width:250px;min-height:63px;margin-top:32px}.intro-hint{font-size:9px;letter-spacing:.4px;margin-top:18px}.intro-bottom{left:24px;right:24px;bottom:25px;font-size:6px;letter-spacing:1px;flex-wrap:wrap;row-gap:15px}.intro-bottom>span:last-child{width:100%;font-size:6px;opacity:.65}.intro-bottom i{margin:0 7px;width:12px}
    .hero{height:100svh;min-height:760px;max-height:1100px}.hero-slide img{object-position:var(--mobile-position)}.hero-slide:first-child img{position:absolute;top:-9%;height:112%;}.hero-shade{background:linear-gradient(0deg,#081a33ed 0%,#09244195 39%,#09243c08 75%,#0d233c50 100%),linear-gradient(90deg,#112c3d30,transparent 60%)}.hero-side{right:12px;top:26%;font-size:6px;letter-spacing:1.5px}.hero-content{top:auto;bottom:250px;transform:none;left:24px;right:24px}.hero-eyebrow{font-size:6px;letter-spacing:1.1px;margin-bottom:16px}.hero-line{width:30px}.hero-content h2{font-size:clamp(49px,12.8vw,74px);line-height:1.25;letter-spacing:-3px;margin-left:0}.hero-period{margin-left:4px}.hero-english{font-size:16px;margin-top:14px;line-height:1.2}.hero-english br{display:block}.hero-description{font-size:12px;line-height:1.95;letter-spacing:.7px;margin-top:15px}.hero-cta{font-size:11px;gap:25px;margin-top:12px;padding:11px 0 8px}.hero-cta svg{width:16px;height:16px}.hero-caption{left:24px;right:24px;bottom:119px;width:auto;max-width:350px;padding:12px;box-shadow:5px 5px 0 #10263a3b}.hero-caption h3{font-size:16px}.caption-kicker{font-size:6px}.hero-caption p{font-size:6px}.hero-caption .caption-rule{height:39px}.hero-bottom{left:24px;right:24px;bottom:34px}.carousel-control{gap:10px;width:100%}.slide-index{font-size:24px}.slide-divider{width:14px}.slide-thumbs{gap:7px;flex:1}.slide-thumb{width:48px;height:36px;padding:2px}.play-toggle{margin-left:auto;min-width:35px;width:35px;padding:10px}.scroll-cue,.wallpaper-link{display:none}.hero-grid{margin:0 24px;background-size:50% 100%}
    .section-wrap{padding:60px 24px}.section-top{margin-bottom:18px}.section-top>.tiny-label{display:none}.section-eyebrow{font-size:8px;gap:10px;letter-spacing:1.5px}.section-eyebrow>span{font-size:10px;padding-right:10px}.section-heading{gap:15px;margin-bottom:27px}.section-heading h2{font-size:29px;line-height:1.6;letter-spacing:-1.5px}.section-heading p{font-size:20px;letter-spacing:-.7px}.section-heading>.text-link{font-size:10px;gap:10px;padding:6px 0}.section-heading>.text-link svg{width:14px}.journal-bar{padding-top:12px;margin-bottom:23px;gap:9px}.filters{gap:21px}.filters button{font-size:10px;white-space:nowrap}.filters button.active::before{width:4px;height:4px;margin-right:6px}.preview-label{font-size:6px;letter-spacing:.2px;max-width:58px;text-align:right;line-height:1.8}.journal-grid{grid-template-columns:1fr;gap:26px;min-height:0}.featured-card .article-image{aspect-ratio:1.65}.featured-card .article-meta{margin-top:17px}.article-card h3{font-size:20px}.article-card p{font-size:11px}.article-meta{font-size:9px;gap:10px}.article-list{border-top:1px solid var(--line);padding-top:24px}.list-card{grid-template-columns:1fr 100px;gap:17px;padding-bottom:20px;margin-bottom:20px}.list-card .article-image{width:100px;height:105px}.list-card h3{font-size:14px}.list-card .article-meta{font-size:8px;gap:8px}.list-card .article-meta>span:last-child,.list-card .article-meta>i:last-of-type{display:none}.list-card p{font-size:10px;margin-top:6px}.article-read{margin-top:10px}.journal-footnote{margin-top:25px;gap:15px;font-size:8px;line-height:1.9}.journal-footnote>span:last-child{font-size:6px;min-width:90px;text-align:right}.journal-grid.filtered{grid-template-columns:1fr;gap:30px}
    .works>.section-wrap{padding:60px 24px 0}.work-counter{font-size:10px;white-space:nowrap}.work-counter b{font-size:22px}.work-stage{grid-template-columns:1fr;gap:26px;padding-top:5px}.work-visual{padding-right:0;padding-bottom:12px}.work-visual::before{left:-9px}.work-image-frame{aspect-ratio:1.35}.work-image-label{font-size:7px;left:21px;top:20px}.work-image-title{font-size:34px;left:21px;bottom:67px;letter-spacing:-1.5px}.work-image-bottom{left:21px;right:20px;bottom:18px;font-size:6px;letter-spacing:.7px}.work-edge{display:none}.work-cross{right:-9px;bottom:-2px}.work-info{padding-bottom:0}.work-tag{font-size:8px}.work-info h3{font-size:28px;line-height:1.5;margin-top:13px}.work-info>p{font-size:12px;line-height:2;margin-top:16px}.work-tags{margin:19px 0 23px;gap:8px}.work-tags>span{font-size:9px;padding:5px 9px}.work-info>.solid-button{min-height:48px;font-size:12px}.work-tabs{gap:26px;margin-top:30px}.work-tabs button{padding:21px 0;gap:9px;flex-wrap:wrap}.work-tabs button>small{display:none}.work-tabs button>b{font-size:11px}.work-tabs button>span{font-size:10px}
    .about{grid-template-columns:1fr;gap:46px;padding-top:64px;padding-bottom:67px}.about-copy h2{font-size:44px;letter-spacing:-2px;line-height:1.5;margin-top:23px}.about-intro{gap:18px;margin-top:24px}.about-intro h3{font-size:15px}.about-intro p{font-size:12px}.about-copy>.text-link{margin-left:21px;font-size:12px;margin-top:20px}.about-visual{margin:0 12px;padding:12px}.about-photo{aspect-ratio:1.3}.about-photo>span{font-size:24px;bottom:21px;left:20px}.about-visual::before{inset:0 0 33px}.about-photo-caption>span:last-child{display:inline;font-size:6px}.about-coordinate{bottom:-12px;font-size:6px;left:12px}.about-corner{right:-5px;top:-18px}.closing-line{padding:20px 24px;gap:18px;justify-content:flex-start;font-size:20px;letter-spacing:-.8px}.closing-line>span:nth-child(n+5){display:none}.closing-star{font-size:16px}.footer{padding:35px 24px;flex-wrap:wrap;gap:28px}.footer>div:first-child{width:calc(100% - 112px)}.footer .wordmark{font-size:21px}.footer .wordmark-cn{font-size:11px}.footer .wordmark svg{width:24px;height:25px}.footer-middle{order:3;width:100%;padding-top:22px;border-top:1px solid var(--line);font-size:7px;gap:10px}.footer-middle>span:last-child{font-size:8px}.footer-actions{gap:14px;font-size:7px}.footer-actions>a{gap:10px}.footer-actions button{font-size:9px}
    .content-dialog{width:calc(100vw - 20px);max-height:calc(100svh - 24px)}.dialog-toolbar{padding:7px 12px}.dialog-toolbar>span{font-size:6px;letter-spacing:1px}.dialog-toolbar .wordmark{font-size:16px}.dialog-reading{padding:28px 20px 40px}.dialog-reading h1{font-size:25px}.reading-english{font-size:10px;line-height:1.6}.reading-cover{margin:24px 0;aspect-ratio:1.5}.reading-content{font-size:14px;line-height:2}.reading-content h2{font-size:20px;margin-top:30px}.reading-content blockquote{font-size:15px;margin:24px 0;padding:16px}.reading-content .demo-note{font-size:11px}.reading-content pre{font-size:10px;padding:16px}.reading-footer .text-link{font-size:11px;gap:12px}.archive-content{padding:26px 20px 35px}.dialog-section-title{font-size:27px}.dialog-subtitle{font-size:11px}.archive-content .filters{gap:20px}.archive-row{grid-template-columns:77px 1fr 16px;gap:13px;padding:18px 0}.archive-row img{width:77px;height:74px}.archive-row h3{font-size:14px}.archive-row .article-meta{font-size:7px;gap:6px}.archive-row .article-meta>span:last-child,.archive-row .article-meta>i:last-of-type{display:none}.archive-row>svg{width:15px;height:15px}.gallery-content{padding:23px 15px}.gallery-title-row{gap:10px}.gallery-title-row .dialog-section-title{font-size:25px}.gallery-count{font-size:15px;white-space:nowrap}.gallery-main img{height:36vh;min-height:215px}.gallery-arrow{width:34px;height:44px}.gallery-detail{align-items:flex-start;flex-direction:column;gap:15px}.gallery-detail h2{font-size:18px}.gallery-detail p{font-size:7px}.gallery-detail .solid-button{font-size:10px;min-height:43px}.gallery-thumbnails{gap:5px;margin-top:19px}.gallery-thumb{padding:2px}.gallery-thumb img{height:48px}.gallery-credit{font-size:8px}
  }
  @media(max-width:370px) { .hero-content h2{font-size:46px}.hero-content{bottom:246px}.slide-thumb{width:41px}.carousel-control{gap:8px}.slide-thumbs{gap:5px}.section-heading h2{font-size:26px}.filters{gap:15px}.intro-title{font-size:20vw}.intro-cn{font-size:15px;letter-spacing:2px}.intro-top .wordmark-cn{display:none} }
  @media(max-width:760px) { .hero-content h2.hero-welcome{font-size:clamp(42px,11vw,58px);line-height:1.04;letter-spacing:-.045em} }
  @media(prefers-reduced-motion:reduce) {
    *,*::before,*::after { animation-duration:.01ms!important; animation-delay:0s!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
    html { scroll-behavior:auto; }.js-ready .reveal{opacity:1;transform:none}.hero-slide img{transform:none!important}.intro-art{transform:none;opacity:.28}.intro-title>span,.intro-title>i{clip-path:none}.hero-progress>span{display:none}
  }
}

@layer features {
/* Music and reading utilities. */
.music { border-top:1px solid var(--line); }
.snippet-list { max-height:600px; overflow:auto; padding-right:8px; display:grid; gap:0; border-top:1px solid var(--line); }
.snippet-card { position:relative; padding:22px 0 23px 24px; border-bottom:1px solid var(--line); }
.snippet-card::before { content:""; position:absolute; left:0; top:27px; width:5px; height:5px; background:var(--cyan); }
.snippet-meta { display:flex; gap:18px; color:var(--muted); font:700 9px/1.2 var(--display); letter-spacing:1px; text-transform:uppercase; }
.snippet-meta span { color:var(--blue); }
.snippet-card p { margin-top:13px; font-size:16px; line-height:1.8; }
.snippet-card small { display:block; margin-top:12px; color:var(--muted); font-size:9px; letter-spacing:1px; }
.music-promo { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:28px; align-items:center; padding:clamp(24px,4vw,56px); border:1px solid var(--line); background:linear-gradient(135deg,#edf5fa,#f8fbff); position:relative; overflow:hidden; }
.music-promo>.solid-button { position:relative; z-index:1; }
.music-promo::after { pointer-events:none; content:"♪"; position:absolute; right:22px; bottom:-26px; font:900 170px/1 var(--display); color:#24aed322; transform:rotate(-12deg); }
.music-promo-mark { display:grid; place-items:center; width:64px; height:64px; color:#fff; background:var(--blue); }
.music-promo-mark svg { width:21px; height:21px; }
.music-promo h3 { position:relative; z-index:1; margin-top:12px; font-size:clamp(22px,2.3vw,34px); line-height:1.45; }
.music-promo h3 em { color:var(--blue); font-style:normal; }
.music-promo-copy>p:not(.section-eyebrow) { position:relative; z-index:1; margin:12px 0 0; color:var(--muted); font-size:12px; line-height:1.9; }
.snippet-form { display:flex; align-items:flex-end; justify-content:space-between; gap:26px; margin-top:30px; padding-top:22px; border-top:1px solid var(--line); }
.snippet-form label { display:grid; gap:10px; flex:1; }
.snippet-form label span { color:var(--muted); font-size:10px; letter-spacing:1px; }
.snippet-form textarea { font-family:inherit; resize:vertical; min-height:46px; padding:11px 13px; border:1px solid var(--line); background:transparent; color:var(--ink); outline:none; font-size:13px; line-height:1.6; }
.snippet-form textarea:focus { border-color:var(--cyan); box-shadow:0 0 0 2px #24aed333; }
.music-player { position:fixed; z-index:120; left:50%; bottom:18px; transform:translateX(-50%); display:flex; align-items:center; gap:8px; width:min(620px,calc(100vw - 36px)); padding:9px 12px 9px 9px; color:#edf7ff; background:#132334eF; border:1px solid #8fb7c755; box-shadow:0 15px 40px #07182f33; backdrop-filter:blur(16px); }
.music-cover { display:grid; place-items:center; flex:none; width:40px; height:40px; color:#fff; background:linear-gradient(135deg,var(--cyan),var(--blue)); }
.music-cover svg { width:19px; height:19px; }
.music-current { display:grid; gap:4px; min-width:0; flex:1; }
.music-current b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; font-weight:600; }
.music-current input { width:100%; min-width:0; height:12px; margin:0; accent-color:var(--cyan); }
.music-current span { color:#a9bdc9; font:9px var(--display); letter-spacing:1px; }
.music-player .icon-button { width:30px; height:34px; color:inherit; }
.music-player .icon-button:disabled { opacity:.35; }
.music-player .icon-button svg { width:14px; height:14px; }
.music-volume { display:flex; align-items:center; gap:6px; color:#b6d1dc; }
.music-volume svg { width:15px; height:15px; }
.music-volume input { accent-color:var(--cyan); width:70px; }
.music-hall { padding:40px 44px 52px; }
.music-hall-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
.music-note { margin-top:20px; padding:12px 15px; border-left:2px solid var(--cyan); background:#eaf3f7; color:var(--muted); font-size:11px; line-height:1.8; }
.music-hall-now { display:flex; align-items:center; gap:15px; margin-top:30px; padding:18px; border:1px solid var(--line); }
.music-hall-icon { display:grid; place-items:center; width:42px; height:42px; color:#fff; background:var(--blue); }
.music-hall-icon svg { width:20px; height:20px; }
.music-hall-now>div { display:grid; gap:6px; flex:1; min-width:0; }
.music-hall-now b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
.music-hall-now span { color:var(--muted); font-size:10px; }
.music-seek { width:100%; margin:22px 0 8px; accent-color:var(--cyan); }
.music-list { list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.music-list li { border-bottom:1px solid var(--line); }
.music-list li button { display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:10px; width:100%; padding:14px 5px; text-align:left; }
.music-list li button span { color:var(--muted); font:10px var(--display); }
.music-list li button b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.music-list li button small { color:var(--muted); font-size:10px; }
.music-list li.active button b { color:var(--blue); }
.music-empty { padding:26px 5px; color:var(--muted); font-size:12px; }
.reading-progress { position:sticky; top:68px; z-index:1; height:3px; margin:-42px -48px 32px; background:var(--line); }
.reading-progress span { display:block; width:0; height:100%; background:linear-gradient(90deg,var(--cyan),var(--pink)); transition:width .1s linear; }
.reading-layout { display:grid; grid-template-columns:150px minmax(0,1fr); gap:32px; align-items:start; }
.reading-toc { position:sticky; top:95px; display:grid; gap:11px; padding-top:4px; }
.reading-toc span { color:var(--muted); font:800 8px var(--display); letter-spacing:1.5px; }
.reading-toc a { color:var(--muted); font-size:11px; line-height:1.5; }
.reading-toc a:hover,.reading-toc a.active { color:var(--blue); }
.archive-month { margin-top:32px; }
.archive-month:first-child { margin-top:0; }
.archive-month>h2 { display:flex; align-items:baseline; gap:12px; margin-bottom:0; font:900 italic 22px var(--display); }
.archive-month>h2 small { color:var(--muted); font:9px var(--display); letter-spacing:1px; }

html[data-theme="dark"] { --paper:#111923; --ink:#edf4f8; --muted:#9eabb9; --line:#2b3948; --cyan:#4ad0e9; --blue:#80a9ff; --violet:#b89bdd; --pink:#f27aa8; color-scheme:dark; }
html[data-theme="dark"] body { background:var(--paper); }
html[data-theme="dark"] .header.scrolled { background:#111923e6; }
html[data-theme="dark"] .grid-paper { background-color:#111923; background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px); }
html[data-theme="dark"] .music-promo { background:linear-gradient(135deg,#182938,#172432); }
html[data-theme="dark"] .content-dialog { background:#131e29; border-color:#415263; }
html[data-theme="dark"] .dialog-toolbar { background:#131e29f5; }
html[data-theme="dark"] .reading-content blockquote,html[data-theme="dark"] .reading-content .demo-note,html[data-theme="dark"] .music-note { background:#1c2a38; }
html[data-theme="dark"] .search-box { border-color:#536579; }
html[data-theme="dark"] .about,html[data-theme="dark"] .journal,html[data-theme="dark"] .footer { background:var(--paper); }
html[data-theme="dark"] .snippet-form textarea { background:#172431; }

@media (max-width:760px) {
  .music-promo { grid-template-columns:auto minmax(0,1fr); gap:20px; }
  .music-promo>.solid-button { grid-column:2; justify-self:start; }
  .snippet-card p { font-size:14px; }
  .music-promo { padding:25px 22px; }
  .snippet-form { display:grid; gap:17px; }
  .music-player { bottom:10px; width:calc(100vw - 20px); }
  .music-volume { display:none; }
  .music-hall { padding:27px 20px 36px; }
  .music-hall-heading { align-items:flex-start; flex-direction:column; }
  .music-hall-heading .solid-button { min-height:42px; }
  .reading-progress { top:58px; margin:-28px -20px 25px; }
  .reading-layout { display:block; }
  .reading-toc { position:relative; top:auto; display:flex; overflow:auto; gap:10px; margin-bottom:25px; padding:10px 0; border-block:1px solid var(--line); }
  .reading-toc span { flex:none; }
  .reading-toc a { flex:none; padding:3px 8px; border:1px solid var(--line); }
}


.hall-transport { display:flex; align-items:center; gap:10px; margin-top:10px; font-size:11px; color:var(--muted); }
.hall-transport label { display:flex; align-items:center; gap:10px; margin-left:auto; }
.hall-transport input { width:90px; accent-color:var(--cyan); }
.music-hall-now .music-hall-icon { color:white; }
.music-hall button:disabled,.music-player button:disabled { cursor:default; opacity:.4; }
.snippet-remove { font-size:10px; padding:10px 0 0; color:var(--muted); }
.snippet-card p { overflow-wrap:anywhere; white-space:pre-wrap; }
#dialog-player-slot { position:sticky; bottom:0; z-index:3; }
#dialog-player-slot .music-player { position:static; margin:0 auto; width:100%; transform:none; border-width:1px 0 0; box-shadow:none; }
body:has(>.music-player:not([hidden])) .footer { padding-bottom:115px; }
body.intro-active>.music-player { display:none; }
body:has(.music-player:not([hidden])) .toast { bottom:95px; }
.content-dialog[data-mode="article"] .dialog-reading { max-width:980px; }
html[data-theme="light"] { color-scheme:light; }
html[data-theme="dark"] .solid-button { background:#82ace9; color:#101e2e; }
html[data-theme="dark"] .solid-button:hover { background:var(--cyan); }
html[data-theme="dark"] .hero-caption,html[data-theme="dark"] .article-image .image-label { color:#242832; }
html[data-theme="dark"] .work-visual::before { background:#28394c; }
html[data-theme="dark"] .works { border-color:var(--line); }
html[data-theme="dark"] .reading-content .demo-note,html[data-theme="dark"] .work-tags>span { color:var(--muted); }
html[data-theme="dark"] .work-tags>span,html[data-theme="dark"] .work-tabs { border-color:var(--line); }
@media(max-width:1100px) { .header-actions{gap:0}.desktop-nav{gap:22px} }
@media(max-width:760px) {
  .music .section-heading { align-items:flex-start; flex-direction:column; gap:14px; }
  .music .section-heading h2 { font-size:clamp(24px,7vw,34px); }
  .music .section-heading>.text-link { min-height:44px; }
  .hall-transport { flex-wrap:wrap; gap:4px; }
  .hall-transport label { width:100%; margin:0; min-height:44px; }
  .hall-transport input { flex:1; }
  .reading-toc { align-items:center; }
  .reading-toc a { min-height:44px; display:flex; align-items:center; }
}

}

@layer features {
  .intro-subline { justify-content:flex-end; }
  .journal-footnote { justify-content:flex-end; }
  @media(max-width:760px) { .intro-subline { align-items:flex-end; } }
}

@layer features {
  .project-navigation { display:flex; align-items:center; gap:24px; margin-top:37px; border-top:1px solid var(--line); }
  .project-navigation .work-tabs { flex:1; min-width:0; flex-wrap:wrap; margin:0; border:0; }
  .project-arrows { display:flex; gap:12px; padding:15px 0; }
  .project-arrows button:disabled { opacity:.25; cursor:default; }
  .project-cover.without-image { background:var(--paper, #edf2f7); border:1px solid var(--line); }
  .project-cover.without-image .work-image-label { color:var(--muted); }
  .project-cover.without-image .work-image-title { color:var(--ink); }
  .project-cover.without-image .work-image-title em { color:var(--blue); }
  .collection { border-top:1px solid var(--line); }
  .collection-tabs { gap:clamp(16px,3vw,48px); border-color:var(--line); }
  .collection-tabs button { flex:1; min-width:0; }
  .collection-panel { margin-top:0; }
  .collection-panel .work-info { min-height:275px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
  .collection-cover.without-image .work-image-bottom { color:var(--muted); border-color:var(--line); }
  .collection-cover-music { background:#182e44; }
  .collection-cover-music .work-image-title { z-index:1; }
  .collection-record { position:absolute; width:76%; aspect-ratio:1; right:-9%; top:9%; border-radius:50%; background:repeating-radial-gradient(circle,#101f30 0px,#101f30 3px,#263e54 4px,#101f30 5px); box-shadow:0 16px 40px #0004; }
  .collection-record span { position:absolute; inset:35%; border-radius:50%; background:var(--blue); border:1px solid #9ec4eb; }
  .collection-record span::after { content:""; position:absolute; inset:44%; border-radius:50%; background:#182e44; }
  .collection-list { list-style:none; padding:0; }
  .collection-list li { padding:24px 0; border-bottom:1px solid var(--line); }
  .collection-list h3 { font-size:20px; }
  .collection-list p { margin-top:12px; color:var(--muted); line-height:1.8; }
  html[data-theme="dark"] .project-cover.without-image { background:#172432; }
  @media(max-width:760px) {
    :is(.works,.collection) .section-heading { display:block; position:relative; }
    :is(.works,.collection) .section-heading .work-counter { position:absolute; right:0; bottom:0; }
    .collection-tabs { gap:12px; justify-content:space-between; }
    .collection-tabs button { flex-direction:column; align-items:flex-start; gap:8px; }
    .collection-panel .work-info { min-height:220px; }
    .collection-panel .work-image-title { font-size:clamp(26px,8vw,34px); }
    .project-navigation { margin-top:30px; }
  }
}

@layer features {
  /* Collection pages let the artwork carry the layout. */
  #collection-view { min-height:100svh; background:var(--paper); padding-bottom:0; }
  .collection-footer { flex-shrink:0; display:flex; justify-content:center; align-items:center; min-height:40px; padding:6px 24px; border-top:1px solid var(--line); }
  .collection-header { display:flex; align-items:center; gap:24px; min-height:56px; padding:0 max(24px,calc((100vw - 1320px)/2 + 40px)); border-bottom:1px solid var(--line); }
  .collection-header .wordmark { margin-right:auto; }
  .collection-header .text-link { min-height:44px; }
  #collection-navigation { display:flex; gap:32px; max-width:1320px; margin:auto; padding:0 40px; overflow-x:auto; }
  #collection-navigation a { flex-shrink:0; padding:12px 0; font-size:13px; color:var(--muted); border-bottom:2px solid transparent; }
  #collection-navigation a[aria-current] { color:var(--ink); border-bottom-color:var(--ink); }
  #collection-body { width:100%; max-width:1320px; margin:0 auto; }
  #collection-body>.poster-page,#collection-body>.gallery-content { padding:8px 40px 64px; }
  #collection-body .poster-heading,#collection-body .music-hall-heading { min-height:44px; margin-bottom:8px; align-items:center; }
  #collection-body .poster-kicker { display:none; }
  #collection-body .poster-heading h1,#collection-body .music-hall-heading h1 { font-size:20px; letter-spacing:0; }
  #collection-body .music-hall-heading .solid-button { min-height:44px; padding:0 18px; }
  @media(max-width:600px) {
    .collection-header { min-height:52px; padding:0 20px; gap:12px; }
    .collection-header .wordmark-cn { display:none; }
    .collection-header .text-link { font-size:12px; }
    #collection-navigation { padding:0 20px; gap:28px; }
    #collection-body>.poster-page,#collection-body>.gallery-content { padding:4px 20px 48px; }
    #collection-body .poster-heading,#collection-body .music-hall-heading { margin-bottom:4px; gap:8px; }
    #collection-body .poster-heading h1,#collection-body .music-hall-heading h1 { font-size:18px; }
    #collection-body .music-hall-heading { flex-direction:row; flex-wrap:wrap; }
  }
  .content-dialog:is([data-mode="gallery"],[data-mode="collection"],[data-mode="music"]) { width:min(1320px,calc(100vw - 64px)); }
  .poster-page { padding:44px clamp(24px,4vw,60px) 64px; min-height:58svh; }
  .poster-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:36px; }
  .poster-kicker { font:700 9px var(--display); letter-spacing:2px; color:var(--muted); margin-bottom:12px; }
  .poster-heading h1 { font-size:clamp(28px,3vw,42px); font-weight:800; letter-spacing:-1px; }
  .poster-heading>span { font:12px var(--display); color:var(--muted); padding-bottom:5px; white-space:nowrap; }
  .poster-wall { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:34px 24px; list-style:none; padding:0; margin:0; }
  .poster-item { display:block; min-width:0; text-align:left; align-self:start; }
  .poster-art { display:block; position:relative; overflow:hidden; aspect-ratio:2/3; background:var(--line); }
  .poster-art img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .65s var(--ease); }
  .poster-item:hover .poster-art img { transform:scale(1.035); }
  .poster-number { position:absolute; bottom:12px; left:14px; color:white; font:700 10px var(--display); letter-spacing:2px; text-shadow:0 1px 5px #000; }
  .poster-caption { display:block; margin-top:14px; }
  .poster-caption b,.poster-caption h2 { font-size:15px; font-weight:650; line-height:1.6; overflow-wrap:anywhere; }
  .poster-caption p { margin-top:6px; font-size:12px; line-height:1.8; color:var(--muted); overflow-wrap:anywhere; }
  .poster-year { font:11px var(--display); color:var(--muted); }
  .poster-empty { min-height:28vh; display:grid; place-items:center; color:var(--muted); font-size:14px; border-top:1px solid var(--line); margin-top:36px; }
  .poster-missing { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:20px; font-size:20px; line-height:1.6; overflow-wrap:anywhere; color:var(--muted); }
  .poster-missing small { font-size:10px; margin-top:12px; }
  .poster-back { display:block; min-height:44px; margin-bottom:14px; font-size:12px; color:var(--muted); }
  .music-list.music-poster-wall { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px 24px; margin-top:24px; border:0; }
  .music-poster-wall li { border:0; min-width:0; }
  .music-list.music-poster-wall li button { display:flex; flex-direction:column; align-items:stretch; gap:8px; padding:0; }
  .music-list.music-poster-wall li button b { white-space:normal; font-size:14px; line-height:1.5; overflow-wrap:anywhere; }
  .music-poster-wall .album-art { display:grid; place-items:center; position:relative; aspect-ratio:1; width:100%; background:var(--line); overflow:hidden; margin-bottom:5px; }
  .album-record { display:block; position:relative; width:76%; aspect-ratio:1; border-radius:50%; background:repeating-radial-gradient(circle at center,#27313d 0 2px,#323d4a 3px 4px); box-shadow:4px 8px 16px #0002; transition:transform .5s var(--ease); }
  .album-record::after { content:""; display:block; position:absolute; left:50%; top:50%; width:24%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background:var(--paper); border:9px solid #667d90; }
  .music-poster-wall .active .album-record { transform:rotate(18deg); }
  .music-list.music-poster-wall .album-number { position:absolute; left:12px; bottom:12px; color:var(--muted); font-size:10px; }
  .music-poster-wall .music-empty { grid-column:1/-1; }
  .poster-page .music-note { padding:0; border:0; background:none; font-size:11px; }
  .poster-page .music-hall-now { border:0; border-top:1px solid var(--line); padding:24px 0 10px; }
  @media(max-width:1000px) { .portrait-poster-wall,.music-list.music-poster-wall { grid-template-columns:repeat(3,minmax(0,1fr)); } }
  @media(max-width:600px) {
    .content-dialog:is([data-mode="gallery"],[data-mode="collection"],[data-mode="music"]) { width:calc(100vw - 20px); }
    .poster-page { padding:28px 18px 40px; }
    .poster-heading { margin-bottom:26px; }
    .poster-wall,.music-list.music-poster-wall { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 14px; }
    .poster-caption b,.poster-caption h2 { font-size:14px; }
    .poster-page .music-hall-heading { align-items:flex-start; flex-direction:column; }
    .poster-page .music-hall-heading .solid-button { min-height:44px; }
    .poster-number { font-size:9px; }
  }
}
@layer features {
  .image-poster-wall { display:block; columns:3; column-gap:22px; }
  .image-poster-wall .poster-item { break-inside:avoid; width:100%; margin-bottom:22px; }
  .image-poster-wall .poster-art { aspect-ratio:auto; }
  .image-poster-wall .poster-art img { height:auto; }
  .gallery-thumbnails { display:flex; gap:10px; overflow-x:auto; padding-bottom:8px; }
  .gallery-thumb { flex:0 0 110px; }
  @media(prefers-reduced-motion:reduce) { .poster-art img,.album-record { transition:none; }.poster-item:hover .poster-art img { transform:none; } }
  .gallery-thumb img { width:100%; height:64px; object-fit:cover; }
  @media(max-width:1000px) { .image-poster-wall { columns:2; } }
  @media(max-width:600px) { .image-poster-wall { columns:2; column-gap:12px; }.image-poster-wall .poster-item { margin-bottom:12px; }.gallery-thumb { flex-basis:78px; } }
}

@layer features {
  .poster-tools { display:flex; align-items:center; gap:24px; font-size:12px; color:var(--muted); }
  .poster-tools>span { white-space:nowrap; }
  .poster-layout-switch { display:flex; gap:18px; }
  .poster-tools button { min-height:44px; border-bottom:2px solid transparent; white-space:nowrap; }
  .poster-layout-switch [aria-pressed="true"] { color:var(--ink); border-color:var(--ink); }
  .poster-motion { color:var(--ink); min-width:64px; }
  .poster-motion:disabled { color:var(--muted); cursor:default; }
  #collection-view.has-poster-collage { height:100svh; min-height:640px; padding-bottom:0; display:flex; flex-direction:column; }
  .has-poster-collage .collection-header { flex-shrink:0; min-height:56px; }
  .has-poster-collage #collection-navigation { width:100%; flex-shrink:0; padding-top:0; }
  .has-poster-collage #collection-body { width:100%; max-width:none; flex:1; min-height:0; display:flex; }
  #collection-body>.collage-page { display:flex; flex-direction:column; min-height:0; width:100%; padding:8px 8px 8px; }
  .collage-page .poster-heading { width:100%; max-width:1240px; margin:0 auto 8px; padding:0; align-items:center; }
  .collage-page .poster-kicker { display:none; }
  .collage-page .poster-heading h1 { font-size:20px; letter-spacing:0; }
  .poster-collage { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-width:none; overflow-anchor:none; }
  .poster-collage::-webkit-scrollbar { display:none; }
  .poster-collage-track { will-change:transform; }
  .poster-mosaic { display:grid; grid-template-columns:repeat(var(--mosaic-columns),minmax(0,1fr)); grid-template-rows:repeat(var(--mosaic-rows),minmax(0,1fr)); aspect-ratio:calc(var(--mosaic-columns)*2) / calc(var(--mosaic-rows)*3); gap:6px; padding-bottom:6px; }
  .collage-tile { position:relative; min-width:0; min-height:0; overflow:hidden; background:var(--line); }
  .collage-tile img { display:block; width:100%; height:100%; object-fit:cover; }
  .collage-tile span { position:absolute; bottom:0; left:0; right:0; padding:26px 12px 10px; background:linear-gradient(transparent,#000c); color:white; font-size:12px; opacity:0; transform:translateY(4px); transition:opacity .25s,transform .25s; pointer-events:none; }
  .collage-tile:hover span { opacity:1; transform:none; }
  @media(max-width:1320px) { .collage-page .poster-heading { padding:0 32px; } }
  @media(min-width:900px) {
    #collection-view { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:56px auto auto; align-content:start; }
    #collection-view.has-poster-collage { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:56px minmax(0,1fr) auto; }
    .collection-footer { grid-area:3 / 1; }
    .collection-header { grid-area:1 / 1; }
    #collection-navigation,.has-poster-collage #collection-navigation { grid-area:1 / 1; justify-self:center; align-self:center; width:auto; margin:0; padding:0; gap:28px; }
    #collection-body { grid-area:2 / 1; }
    .has-poster-collage #collection-body { grid-area:2 / 1; height:100%; }
  }
  @media(max-width:600px) {
    #collection-view.has-poster-collage { min-height:520px; }
    .has-poster-collage .collection-header { min-height:52px; }
    #collection-body>.collage-page { padding:4px 4px 4px; }
    .collage-page .poster-heading { padding:0 16px; gap:8px; margin-bottom:4px; flex-wrap:wrap; }
    .collage-page .poster-heading h1 { font-size:18px; }
    .collage-page .poster-tools { gap:12px; font-size:11px; }
    .poster-tools { gap:16px; flex-wrap:wrap; }
    .poster-layout-switch { gap:16px; }
    .poster-mosaic { gap:4px; padding-bottom:4px; }
    .collage-tile span { display:none; }
  }
  @media(prefers-reduced-motion:reduce) { .collage-tile span { transition:none; } }
}