/* 川流 / Current 2.0 — the shared shell.
   Ink, rice paper and one living current. Loaded after flow.css on every owned page, so it is
   the final authority for the frame (header, footer, buttons, page titles, motion). Exhibits keep
   their own materials; this layer never reaches inside an artwork. */
@font-face{font-family:'Huiwen Mincho';src:url('./assets/fonts/huiwen-mincho-site.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+2000-206F,U+3000-303F,U+3400-9FFF,U+FF00-FFEF}
@font-face{font-family:'Current Serif';src:url('./assets/fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2');font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:'Current Serif';src:url('./assets/fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:'Flow Wide';src:url('./assets/fonts/unbounded-variable.woff2') format('woff2');font-weight:200 900;font-style:normal;font-display:swap}

:root{
  --ink:#0b0d26;--ink-2:#14173a;--ink-3:#1f2350;
  --paper:#e7ebf2;--paper-2:#f3f5f9;--mist:#d9dfea;
  --c-blue:#3d5cff;--c-violet:#7a5cff;--c-pink:#ff5c9a;--c-coral:#ff6b3d;--c-sun:#ffd23f;--c-mint:#35d49a;
  --current:linear-gradient(90deg,#3d5cff 0%,#7a5cff 22%,#ff5c9a 46%,#ff6b3d 66%,#ffd23f 84%,#35d49a 100%);
  --flow-paper:var(--paper);--flow-ink:#10132e;--flow-blue:#2445ef;--flow-pink:#ffc6dc;--flow-yellow:#ffe45c;--flow-orange:#ff6b3d;--flow-mint:#c2efd6;
  --bg:var(--paper);--surface:var(--paper-2);--text:var(--flow-ink);--muted:#4e5373;--line:#10132e1c;
  --serif:'Current Serif','EB Garamond',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  /* Chinese: 汇文明朝体 (Huiwen Mincho), a letterpress Song, for every Chinese line on the site. Self-hosted subset. */
  --zh:'Huiwen Mincho','Noto Serif SC','Songti SC','SimSun',serif;
  --zh-display:var(--zh);
  --zh-strong:var(--zh);
  --zh-mid:var(--zh);
  --body:'DM Sans','Huiwen Mincho','Noto Serif SC','Songti SC',serif;
  --display:'cesso','Huiwen Mincho',serif;
  --brush:var(--zh-display);
  --sans-zh:var(--zh-mid);
  --seal:#d7263d;
  --gutter:clamp(20px,4.2vw,72px);
  --ease-out:cubic-bezier(.16,1,.3,1);--ease-flow:cubic-bezier(.65,0,.35,1);--flow-ease:var(--ease-out)
}
html{font-synthesis:none;overflow-x:clip;scroll-padding-top:96px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{background:var(--paper);color:var(--flow-ink);overflow-x:clip}
::selection{background:var(--c-blue);color:#fff}
html{scrollbar-color:#10132e55 transparent;caret-color:var(--c-blue)}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#10132e40;border-radius:10px;border:3px solid var(--paper)}::-webkit-scrollbar-track{background:transparent}
.ic{width:1em;height:1em;display:inline-block;vertical-align:-.14em;flex-shrink:0}
.nav-count{display:none!important}
:where(a,button,input,summary,select,[tabindex]):focus-visible{outline:2px solid var(--flow-blue);outline-offset:4px;border-radius:4px}

/* Paper has tooth. A fixed grain sits over everything, never catching the pointer. */
html::after{content:'';position:fixed;inset:-50%;z-index:2147483000;pointer-events:none;opacity:.04;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ───────────── Header: a quiet bar that becomes ink or paper with the section beneath it ───────────── */
.site-shell{width:min(1680px,calc(100% - var(--gutter)*2))}
.site-header{position:sticky;top:0;z-index:120;height:76px;margin:0;padding:0;border:0;border-radius:0;background:none!important;box-shadow:none!important;backdrop-filter:none;gap:28px;color:var(--flow-ink);transition:color .5s var(--ease-out)}
.site-header::before{content:'';display:block;position:absolute;inset:0 calc(50% - 50vw);z-index:-1;background:color-mix(in srgb,var(--paper) 0%,transparent);border-bottom:1px solid transparent;box-shadow:none!important;width:auto!important;transition:background .5s var(--ease-out),border-color .5s,backdrop-filter .5s}
.site-header.header-scrolled::before{background:color-mix(in srgb,var(--paper) 80%,transparent);border-color:var(--line);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5)}
.site-header::after{display:none!important}
.brand{font:400 24px/1 var(--display);letter-spacing:-.02em;gap:11px;color:inherit}
.brand-mark{width:34px;height:34px;border-radius:50%;font-size:0!important;color:transparent;background:#0b0d26 url('./assets/flow/mark.svg') center/cover no-repeat;transform:none;box-shadow:0 0 0 1px #ffffff14;transition:transform .8s var(--ease-out)}
.brand-mark *{display:none}
.brand:hover .brand-mark{transform:rotate(-14deg) scale(1.06)}
.brand-dot{color:var(--c-pink)}
.page-nav{counter-reset:nav;gap:2px;padding:0;margin-inline:auto}
.page-nav .nav-link{position:relative;counter-increment:nav;padding:10px 12px 10px 13px;border-radius:0;background:none!important;box-shadow:none!important;border:0!important;color:inherit!important;font:500 13px/1 var(--body);letter-spacing:.01em;opacity:.72;transition:opacity .3s}
.page-nav .nav-link::before{content:'0' counter(nav);position:absolute;left:0;top:4px;font:500 8px/1 var(--mono);letter-spacing:0;opacity:.6}
.page-nav .nav-link::after{content:'';position:absolute;left:13px;right:12px;bottom:3px;height:2px;border-radius:2px;background:var(--current);background-size:200% 100%;transform:scaleX(0);transform-origin:right;transition:transform .55s var(--ease-out)}
.page-nav .nav-link:hover{opacity:1}
.page-nav .nav-link:hover::after{transform:scaleX(1);transform-origin:left}
.page-nav .nav-link[aria-current=page]{opacity:1;font-weight:700}
.page-nav .nav-link[aria-current=page]::after{transform:scaleX(1);animation:cz-current 6s linear infinite}
.nav-count{opacity:.5;margin-left:2px}
@keyframes cz-current{to{background-position:-200% 0}}
.header-tools{gap:8px}
.language-switch{border:1px solid color-mix(in srgb,currentColor 22%,transparent);border-radius:40px;padding:3px;background:none}
.language-switch button{min-width:32px;height:30px;border-radius:30px;font:600 11px var(--body);color:inherit;background:none;opacity:.7}
.language-switch button[aria-pressed=true]{background:currentColor;opacity:1}
.language-switch button[aria-pressed=true]{color:var(--paper)!important;background:var(--flow-ink)}
.atelier-motion,.flow-index-link{width:38px;height:38px;border:1px solid color-mix(in srgb,currentColor 22%,transparent);border-radius:50%;background:none;color:inherit;transition:background .3s,color .3s,border-color .3s}
.atelier-motion:hover,.flow-index-link:hover{background:var(--flow-ink);color:var(--paper);border-color:var(--flow-ink)}
.flow-index-link{font-size:22px}
.flow-index-link[aria-current=page]{background:var(--flow-ink);color:var(--paper)}

/* Ink header over dark chapters (set by flow-current.js from the section under the bar). */
html[data-header-theme=dark] .site-header{color:#e7ebf2}
html[data-header-theme=dark] .site-header.header-scrolled::before{background:color-mix(in srgb,var(--ink) 80%,transparent);border-color:#ffffff14}
html[data-header-theme=dark] .language-switch button[aria-pressed=true]{color:var(--ink)!important;background:#e7ebf2}
html[data-header-theme=dark] .atelier-motion:hover,html[data-header-theme=dark] .flow-index-link:hover{background:#e7ebf2;color:var(--ink);border-color:#e7ebf2}

/* Progress: the current itself, one pixel tall. */
.atelier-progress{height:2px;background:none;z-index:200}
.atelier-progress i{background:var(--current);background-size:100vw 100%}
.atelier-top{width:52px;height:52px;border-radius:50%;background:var(--flow-ink);color:var(--paper);border:0;box-shadow:0 10px 30px -10px #0b0d2666}
.atelier-top .top-track{stroke:#ffffff22}.atelier-top .top-progress{stroke:var(--c-sun)}.atelier-top path{stroke:currentColor}

/* ───────────── Type & buttons ───────────── */
.eyebrow{font:500 13px/1.4 var(--body);letter-spacing:.01em;color:var(--muted)}
.bracket{color:var(--c-pink)}
.primary-button,.gallery-primary-link{position:relative;overflow:hidden;isolation:isolate;background:var(--flow-ink);border:0;color:var(--paper);border-radius:60px;padding:17px 26px;font:600 14px var(--body);gap:18px;transition:translate .5s var(--ease-out),box-shadow .5s}
.primary-button::before,.gallery-primary-link::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--current);transform:translateY(102%);transition:transform .55s var(--ease-out)}
.primary-button:hover,.gallery-primary-link:hover{color:var(--ink);background:var(--flow-ink);translate:0 -2px;box-shadow:0 18px 40px -18px #3d5cff99}
.primary-button:hover::before,.gallery-primary-link:hover::before{transform:none}

/* ───────────── Page titles on every hall: one voice, each room keeps its accent ───────────── */
.gallery-header h1,.posts-heading h1,.now-header h1,.school-header h1,.models-header h1,.usage-hero h1,.flow-index-hero h1,#game-title{font-family:var(--display);font-weight:500;letter-spacing:-.065em;color:var(--flow-ink);-webkit-text-fill-color:currentColor}
/* Hall titles: wide and light, like the homepage's Latin voice; the full stop becomes a drop of the current. */
.gallery-header h1,.posts-heading h1,.now-header h1,.school-header h1,.models-header h1,.usage-hero h1,#game-title{font-family:var(--display)!important;font-weight:400!important;letter-spacing:-.035em!important;line-height:.92!important}
#gallery-title>span,#school-title>span,#now-title>span:first-of-type,#posts-title>span,#game-title>em{display:inline-block;width:.15em;height:.15em;margin-left:.06em;border-radius:50%;font-size:inherit;color:transparent!important;-webkit-text-fill-color:transparent;background:var(--current);background-size:300% 100%;animation:cz-current 7s linear infinite;vertical-align:baseline;overflow:hidden;text-indent:2em}
.usage-hero h1>span{color:var(--c-pink)!important;-webkit-text-fill-color:currentColor}
#game-title>span{color:var(--c-blue)!important;-webkit-text-fill-color:currentColor;background:none}
.now-asterisk,#game-title>b{color:var(--c-pink)!important;-webkit-text-fill-color:currentColor;opacity:.9}
.flow-index-hero h1{font-family:var(--zh-display)!important;font-weight:900;letter-spacing:-.04em}
.flow-index-hero h1 span{font-family:var(--brush);font-weight:400;color:var(--c-blue);-webkit-text-fill-color:currentColor;background:none}
/* The index map: one ink loop, a pink tributary and the current running round it. */
.flow-index-map .index-river-yellow{stroke:var(--flow-ink)!important;stroke-width:1.5!important;opacity:.85}
.flow-index-map .index-river-pink{stroke:var(--c-pink)!important;stroke-width:14!important;opacity:.9;mix-blend-mode:multiply}
.flow-index-map .index-river-blue{stroke:var(--c-blue)!important;stroke-width:5!important;stroke-dasharray:60 900!important;animation:cz-loop 7s linear infinite!important}
@keyframes cz-loop{to{stroke-dashoffset:-960}}
html[data-site-motion=off] .flow-index-map .index-river-blue{animation:none!important}
.flow-index-search,.flow-index-filters{background:var(--paper-2)!important}
.flow-index-filters button[aria-pressed=true]{background:var(--flow-ink)!important;color:var(--paper)!important}
.flow-stream-signature{color:var(--flow-ink);gap:12px}
.flow-stream-signature svg{display:none}
.flow-stream-signature::before{content:'';width:26px;height:26px;border-radius:50%;background:#0b0d26 url('./assets/flow/mark.svg') center/cover;flex-shrink:0}
.flow-stream-signature>span{font:400 19px var(--brush);letter-spacing:.08em}
.flow-stream-signature small{font:400 15px var(--display);letter-spacing:0;opacity:.7}
.flow-breadcrumb{font:500 13px var(--body);letter-spacing:0}
.flow-breadcrumb>a{color:var(--flow-ink);text-decoration:underline;text-decoration-color:var(--c-pink);text-underline-offset:4px}

/* ───────────── The shared ending: directory, the river, and the colophon ───────────── */
.atelier-directory{border-top:1px solid var(--line);margin-top:120px;padding:34px 0 0;gap:0;background:none}
.atelier-directory .directory-label span{font:400 17px/1.2 var(--display);color:var(--muted)}
.atelier-directory .directory-label b{width:34px;height:34px;border-radius:50%;font-size:0;background:#0b0d26 url('./assets/flow/mark.svg') center/cover;display:block}
.atelier-directory .directory-label b *{display:none}
.atelier-directory a{position:relative;border-left:1px solid var(--line);padding:16px 18px 22px;transition:background .45s var(--ease-out),color .45s;color:var(--flow-ink)}
.atelier-directory a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--current);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-out)}
.atelier-directory a:hover::after,.atelier-directory a[aria-current=page]::after{transform:scaleX(1)}
.atelier-directory a:hover{background:color-mix(in srgb,var(--paper-2) 70%,transparent)}
.atelier-directory a small{font:500 11px var(--mono);color:var(--muted)}
.atelier-directory a strong{font:400 clamp(24px,2.2vw,34px)/1.05 var(--display);letter-spacing:-.02em}
.atelier-directory a span{font:500 11px var(--body);color:var(--muted)}

.atelier-finale.cz-finale{position:relative;isolation:isolate;overflow:hidden;margin:60px calc(50% - 50vw) 0;padding:0;min-height:min(78vh,760px);border:0;border-radius:0;background:var(--ink);color:#e7ebf2;display:grid;grid-template-rows:auto 1fr auto}
.cz-finale .h-field{position:absolute;inset:0;z-index:-1}
.cz-finale .h-field canvas{display:block}
.cz-finale-top,.cz-finale-bottom{display:flex;justify-content:space-between;gap:20px;padding:28px var(--gutter);font:400 16px var(--display);letter-spacing:0;color:#e7ebf2b3}
.cz-finale-title{align-self:center;justify-self:center;margin:0;display:flex;gap:.04em;font:400 clamp(90px,17vw,300px)/1 var(--brush);letter-spacing:0;color:#e7ebf2;user-select:none;text-shadow:0 0 60px #0b0d26}
.cz-finale-title span{display:block}
.cz-finale-caption{position:absolute;left:var(--gutter);right:var(--gutter);bottom:84px;display:flex;justify-content:space-between;align-items:end;gap:30px;pointer-events:none}
.cz-finale-caption p{max-width:420px;font:400 clamp(26px,2.4vw,40px)/1.12 var(--display);font-style:normal;color:#e7ebf2}
html[lang=zh-CN] .cz-finale-caption p:first-child{font:900 clamp(26px,2.4vw,40px)/1.3 var(--zh-display);font-style:normal;letter-spacing:-.02em}
.cz-finale-caption p+p{font:500 14px/1.7 var(--body);font-style:normal;color:#e7ebf2b3;text-align:right}
.cz-finale a{pointer-events:auto;color:#e7ebf2;text-decoration:underline;text-decoration-color:var(--c-pink);text-underline-offset:5px}
.cz-finale a:hover{color:var(--c-sun)}
.flow-return-note{display:none!important}
.home-current .atelier-finale{display:none!important}

.site-footer{border-top:0;padding:26px 0 34px;margin:0;display:flex;align-items:center;gap:22px;font:500 13px var(--body);color:var(--muted)}
.site-footer .footer-brand{font:400 22px var(--display);letter-spacing:-.02em;color:var(--flow-ink)}
.site-footer .lime-text{color:var(--c-pink)}
.site-footer>.mono{flex:1;letter-spacing:0;font-family:var(--body)}
.back-top,.flow-footer-index{color:var(--flow-ink);text-decoration:underline;text-decoration-color:var(--c-pink);text-underline-offset:5px}

/* ───────────── Cursor: a small stone in the stream (fine pointers only) ───────────── */
.cz-cursor{position:fixed;left:0;top:0;z-index:2147482000;pointer-events:none;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;border:1px solid #e7ebf2;mix-blend-mode:difference;opacity:0;transform:translate3d(var(--x,-100px),var(--y,-100px),0) scale(var(--s,1));transition:opacity .3s,width .45s var(--ease-out),height .45s var(--ease-out),margin .45s var(--ease-out),background .3s}
.cz-cursor.is-on{opacity:1}
.cz-cursor.is-link{width:70px;height:70px;margin:-35px 0 0 -35px;background:#e7ebf2}
.cz-cursor.is-down{--s:.8}
.cz-cursor b{position:absolute;inset:0;display:grid;place-items:center;font:600 9px var(--mono);letter-spacing:.12em;color:#0b0d26;opacity:0;transition:opacity .2s}
.cz-cursor.has-label b{opacity:1}
@media (hover:none),(pointer:coarse){.cz-cursor{display:none}}

/* ───────────── Reveal: content rises out of the water ───────────── */
.cz-rise{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease-out),transform 1.1s var(--ease-out);transition-delay:var(--d,0s)}
.cz-rise.is-in{opacity:1;transform:none}
html[data-site-motion=off] .cz-rise{opacity:1;transform:none;transition:none}
.cz-split .cz-w{display:inline-block;overflow:clip;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.cz-split .cz-w>i{display:inline-block;font-style:inherit;transform:translateY(105%);transition:transform 1.05s var(--ease-out);transition-delay:calc(var(--i)*38ms)}
.cz-split.is-in .cz-w>i{transform:none}
html[data-site-motion=off] .cz-split .cz-w>i{transform:none;transition:none}

/* ───────────── Page transitions: the next page rises like water ───────────── */
@view-transition{navigation:auto}
.site-header{view-transition-name:flow-header}
::view-transition-old(root){animation:cz-page-out .42s var(--ease-flow) both}
::view-transition-new(root){animation:cz-page-in .78s var(--ease-out) both}
::view-transition-group(flow-header){animation-duration:.5s}
@keyframes cz-page-out{to{opacity:0;transform:translateY(-2.5%) scale(.985)}}
@keyframes cz-page-in{from{clip-path:inset(100% 0 0 0 round 40px 40px 0 0)}to{clip-path:inset(0 0 0 0 round 0)}}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root),::view-transition-group(flow-header){animation:none!important}}

/* ───────────── Mobile shell ───────────── */
@media (max-width:1100px){.page-nav .nav-link{padding:10px 8px 10px 11px;font-size:12px}.page-nav .nav-link::after{left:11px;right:8px}.site-header{gap:14px}}
@media (max-width:760px){
  html{scroll-padding-top:120px}
  .site-shell{width:calc(100% - 32px)}
  .site-header{display:grid;grid-template-columns:1fr auto;height:auto;top:0;margin:0;padding:12px 0 6px;row-gap:6px;border-radius:0}
  .site-header::before{background:color-mix(in srgb,var(--paper) 86%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-color:var(--line)}
  html[data-header-theme=dark] .site-header::before{background:color-mix(in srgb,var(--ink) 78%,transparent);border-color:#ffffff14}
  .page-nav{grid-column:1/-1;grid-row:2;margin:0;border-top:0;padding:0;justify-content:space-between;overflow-x:auto;scrollbar-width:none}
  .page-nav .nav-link{font-size:12px;padding:12px 6px 10px 9px;min-height:40px}
  .page-nav .nav-link::before{display:none}
  .page-nav .nav-link{padding:12px 6px 10px}
  .page-nav .nav-link::after{left:6px;right:6px;bottom:4px}
  .header-tools{grid-column:2;grid-row:1}
  .atelier-motion,.flow-index-link{width:34px;height:34px}
  .atelier-directory{margin-top:80px}
  .atelier-finale.cz-finale{min-height:520px}
  .cz-finale-title{font-size:23vw;flex-wrap:wrap;width:2.1em;justify-content:center;line-height:1}
  .cz-finale-caption{flex-direction:column;align-items:flex-start;bottom:72px;gap:10px}
  html[lang=zh-CN] .cz-finale-caption p:first-child{font:900 clamp(26px,2.4vw,40px)/1.3 var(--zh-display);font-style:normal;letter-spacing:-.02em}
.cz-finale-caption p+p{text-align:left;font-size:13px}
  .cz-finale-top,.cz-finale-bottom{font-size:9px;padding:20px var(--gutter)}
  .site-footer{flex-wrap:wrap;gap:12px 20px}
}
@media (prefers-reduced-motion:reduce){.cz-rise{opacity:1;transform:none}.cz-split .cz-w>i{transform:none}}
/* Unification: the shared ending never drops below 11px on phones. */
@media (max-width:760px){
  .atelier-directory a small{font-size:11px}
  .site-footer,.site-footer>.mono,.flow-footer-index,.back-top{font-size:12px!important}
}
/* 2.1: finale caption keeps Chinese tracking positive; finale rails never drop below 12px */
html[lang=zh-CN] .cz-finale-caption p:first-child{font-weight:400;letter-spacing:.02em}
html[lang=en] .cz-finale-caption p:first-child{letter-spacing:-.01em}
.cz-finale-top,.cz-finale-bottom{font-size:12px}
.cz-finale :is(small,.mono){font-size:max(12px,1em)}
@media (max-width:900px){html .flow-breadcrumb,html .flow-footer-index,html .flow-breadcrumb-meta,html #flow-result-count{font-size:12px}}