/* Five small worlds, with independent compositions and bounded motion. */
.wg { --wg-ease: cubic-bezier(.22,1,.36,1); max-width:1280px; margin:auto; padding:80px 40px 100px; color:var(--text); }
.wg *, .wg *::before, .wg *::after { box-sizing:border-box; }
.wg button { font:inherit; color:inherit; cursor:pointer; }
.wg button:focus-visible,.wg a:focus-visible { outline:2px solid currentColor; outline-offset:5px; }
.wg-eyebrow { display:flex; align-items:center; gap:12px; font:11px/1.5 var(--font-mono); letter-spacing:.1em; }
.wg-heading { position:relative; padding-bottom:58px; }
.wg-heading>.wg-eyebrow { justify-content:space-between; margin-bottom:35px; }
.wg-heading h1 { margin:0; font:500 clamp(42px,5.5vw,76px)/1.22 var(--font-book,serif); letter-spacing:-.045em; }
.wg-heading h1 em { color:#a6533c; font-style:normal; position:relative; }
.wg-heading h1 em::after { content:''; position:absolute; bottom:-5px; left:0; width:93%; height:7px; border-bottom:2px solid currentColor; border-radius:50%; transform:rotate(-3deg); }
.wg-heading-note { position:absolute; right:8px; bottom:50px; }
.wg-hand { display:block; font:18px var(--font-book,serif); transform:rotate(-5deg); }
.wg-heading-note p { font-size:12px; line-height:1.9; margin:20px 0; color:var(--text-secondary); }
.wg-down { font-size:32px; }
.wg-os { position:relative; display:grid; grid-template-columns:1fr 260px; align-items:center; min-height:275px; padding:35px 46px; border:1px solid var(--border); background:linear-gradient(115deg, color-mix(in srgb,var(--bg) 80%,#b8c8b0),var(--bg)); overflow:hidden; }
.wg-os .wg-eyebrow i { width:6px; height:6px; border-radius:50%; background:#597656; }
.wg-os h2 { font:500 46px/1.2 var(--font-display,serif); letter-spacing:-2px; margin:16px 0; }
.wg-os h2 span { display:inline-block; margin-left:15px; padding-left:16px; border-left:1px solid var(--border-strong,var(--border)); font:300 33px var(--font-sans,sans-serif); letter-spacing:0; }
.wg-os p { font-size:13px; line-height:1.9; margin:0; color:var(--text-secondary); max-width:490px; }
.wg-os-flower { position:relative; display:grid; place-items:center; height:190px; }
.wg-os-flower img { position:relative; width:145px; height:145px; object-fit:contain; border-radius:50%; transition:transform .7s var(--wg-ease); }
.wg-os-flower i { position:absolute; width:205px; height:205px; border:1px solid color-mix(in srgb,var(--text) 12%,transparent); border-radius:50%; }
.wg-os-flower i::before { content:''; position:absolute; inset:13px -20px; border:1px solid color-mix(in srgb,var(--text) 8%,transparent); border-radius:50%; transform:rotate(-32deg); }
.wg-os-flower>span { position:absolute; bottom:-18px; font-size:10px; letter-spacing:.16em; }
.wg-os-enter { margin-top:20px; font-size:12px; display:flex; align-items:center; gap:18px; }
.wg-os-enter b { font-size:20px; font-weight:400; transition:transform .3s var(--wg-ease); }
.wg-index { display:flex; align-items:center; gap:28px; padding:20px 0; margin:35px 0 25px; border-bottom:1px solid var(--border); }
.wg-index>span { margin-right:auto; font:15px var(--font-book,serif); white-space:nowrap; }
.wg-index a { display:flex; gap:8px; align-items:center; min-height:44px; font-size:12px; white-space:nowrap; transition:color .2s; }
.wg-index a small { font:9px var(--font-mono); opacity:.45; }
.wg-index a[aria-current] { color:var(--accent); }
.wg-exhibits { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:52px 30px; }
.wg-work { min-width:0; scroll-margin-top:105px; }
.wg-feng,.wg-reader { grid-column:span 7; }
.wg-gist,.wg-aether { grid-column:span 5; }
.wg-label { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:20px 2px 0; }
.wg-label>div>span { font-size:10px; color:var(--text-secondary); }
.wg-label h2 { margin:7px 0 0; font:500 23px/1.3 var(--font-book,serif); }
.wg-label h2 small { font:10px var(--font-sans,sans-serif); vertical-align:middle; margin-left:8px; border:1px solid var(--border); padding:3px 7px; }
.wg-label a { display:flex; gap:20px; align-items:center; min-height:44px; font-size:12px; }
.wg-label a i { font-size:22px; font-style:normal; transition:transform .3s var(--wg-ease); }
.wg-pocket { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; padding:50px 60px; gap:30px; background:color-mix(in srgb,var(--bg) 92%,#c7c5bf); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.wg-pocket-copy { align-self:center; padding:30px 0; }
.wg-pocket-copy h2 { font:500 clamp(35px,4.5vw,60px)/1.2 var(--font-book,serif); margin:22px 0; letter-spacing:-.04em; }
.wg-pocket-copy h2 em { font-style:normal; color:var(--text-secondary); }
.wg-pocket-copy>p { font-size:13px; line-height:1.9; color:var(--text-secondary); }
.wg-pocket-gestures { display:grid; gap:15px; margin:32px 0; font-size:12px; }
.wg-pocket-gestures b { margin-right:20px; font:10px var(--font-mono); color:var(--text-secondary); }
.wg-text-link { display:inline-flex; gap:32px; padding:10px 0; align-items:center; border-bottom:1px solid var(--text); font-size:13px; }
.wg-text-link>span { font-size:23px; }
.wg-pocket-state { display:block; font-size:10px; color:var(--text-secondary); margin-top:15px; }
.wg-pocket-stage { position:relative; display:grid; justify-items:center; padding-top:32px; }
.wg-pocket-annotation { position:absolute; top:0; right:10px; font:14px var(--font-book,serif); transform:rotate(8deg); z-index:2; }
.wg-end { padding-top:75px; text-align:center; }
.wg-end>span { font:30px var(--font-book,serif); }
.wg-end p { font-size:12px; color:var(--text-secondary); margin:16px 0 24px; }
.wg-end a { display:inline-block; padding:12px; font-size:11px; }
.wg-screen-scene { --scene-ink:#733a2f; --scene-paper:#e8dcc5; height:430px; padding:24px; display:flex; flex-direction:column; gap:16px; position:relative; color:var(--scene-ink); background:var(--scene-paper); }
.wg-screen-scene--gist { --scene-ink:#f59689; --scene-paper:#222328; }
.wg-screen-scene--reader { --scene-ink:#384237; --scene-paper:#d7d8cb; }
.wg-screen-scene--aether { --scene-ink:#d7bc8a; --scene-paper:#302d28; }
.wg-shot-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; min-height:18px; font:11px/1.5 var(--font-mono); }
.wg-shot-heading small { font-size:9px; opacity:.85; text-align:right; }
.wg-shot-frame { margin:0; min-height:0; flex:1; display:flex; flex-direction:column; gap:15px; }
.wg-shot-frame .image-open { min-height:0; flex:1; border:1px solid color-mix(in srgb,var(--scene-ink) 30%,transparent); border-radius:4px; overflow:hidden; background:#f9f7f1; box-shadow:0 12px 25px #14100d18; }
.wg-shot-frame img { width:100%; height:100%; object-fit:contain; }
.wg-shot-frame figcaption { font:12px/1.6 var(--font-book,serif); margin:0; min-height:20px; }
.wg-screen-scene--feng .image-open { transform:rotate(-1deg); }
.wg-screen-scene--gist .image-open { transform:rotate(1deg); background:#0c0c0d; }
.wg-screen-scene--reader .image-open { transform:rotate(-1deg); background:#f1ead6; }
.wg-screen-scene--aether .image-open { transform:rotate(.6deg); background:#181510; }
.wg-shot-tabs { display:flex; gap:8px; }
.wg-shot-tabs button { border:1px solid color-mix(in srgb,var(--scene-ink) 45%,transparent); min-height:44px; min-width:62px; padding:8px 14px; border-radius:3px; background:transparent; color:var(--scene-ink); font:12px var(--font-sans); transition:background 160ms,color 160ms; }
.wg-shot-tabs button[aria-pressed=true] { background:var(--scene-ink); color:var(--scene-paper); border-color:var(--scene-ink); }
.wg-feng-seal { position:absolute; right:24px; bottom:24px; padding:5px; border:2px solid #963f31; color:#963f31; font:600 13px/1.1 var(--font-book,serif); text-align:center; transform:rotate(-6deg); pointer-events:none; }
@media(hover:hover) and (pointer:fine) {
  .wg-os:hover .wg-os-flower img { transform:rotate(12deg) scale(1.06); }
  .wg-label a:hover i,.wg-os:hover .wg-os-enter b { transform:translate(3px,-3px); }
  .wg-shot-tabs button:hover { border-color:var(--scene-ink); }
}
@media(max-width:1050px) {
  .wg { padding:100px 28px 75px; }
  .wg-heading-note { right:0; bottom:45px; }
  .wg-heading-note p { font-size:11px; }
  .wg-index { gap:20px; }
  .wg-exhibits { gap:38px 22px; }
  .wg-feng,.wg-reader,.wg-gist,.wg-aether { grid-column:span 6; }
  .wg-screen-scene { height:380px; padding:20px; }
  .wg-shot-heading { flex-wrap:wrap; gap:3px; }
  .wg-pocket { padding:40px; }
}
@media(max-width:760px) {
  .wg { padding:98px 20px 65px; }
  .wg-heading { padding-bottom:35px; }
  .wg-heading>.wg-eyebrow { margin-bottom:27px; font-size:10px; }
  .wg-heading>.wg-eyebrow>span { font-size:8px; }
  .wg-heading h1 { font-size:clamp(38px,8vw,58px); }
  .wg-heading-note { position:static; margin:28px 0 0; display:flex; align-items:center; justify-content:space-between; gap:20px; }
  .wg-heading-note p { display:none; }
  .wg-hand { font-size:15px; }
  .wg-down { font-size:23px; }
  .wg-os { grid-template-columns:minmax(0,1fr) 100px; padding:24px; min-height:250px; gap:10px; }
  .wg-os h2 { font-size:32px; }
  .wg-os h2 span { font-size:23px; padding-left:9px; margin-left:9px; }
  .wg-os p { font-size:12px; }
  .wg-os-flower { height:120px; }
  .wg-os-flower img { width:85px; height:85px; }
  .wg-os-flower i { width:110px; height:110px; }
  .wg-os-flower>span { display:none; }
  .wg-os-enter { font-size:12px; }
  .wg-index { overflow-x:auto; gap:24px; margin:24px 0; padding:7px 0 14px; scrollbar-width:thin; }
  .wg-index>span { display:none; }
  .wg-exhibits { display:flex; flex-direction:column; gap:40px; }
  .wg-label { padding-top:17px; }
  .wg-label h2 { font-size:24px; }
  .wg-label a { font-size:12px; gap:12px; }
  .wg-screen-scene { height:auto; min-height:0; padding:20px; gap:18px; }
  .wg-shot-heading { flex-wrap:nowrap; font-size:10px; }
  .wg-shot-frame { flex:auto; }
  .wg-shot-frame .image-open { flex:auto; aspect-ratio:1.6; }
  .wg-screen-scene--reader .image-open { aspect-ratio:1.44; }
  .wg-shot-frame figcaption { font-size:12px; padding-right:24px; }
  .wg-feng-seal { right:20px; bottom:20px; }
  .wg-pocket { display:flex; flex-direction:column; padding:25px 22px 30px; gap:20px; }
  .wg-pocket-copy { align-self:stretch; padding:8px 0; }
  .wg-pocket-copy h2 { font-size:42px; }
  .wg-pocket-copy>p { font-size:13px; }
  .wg-pocket-gestures { display:none; }
  .wg-pocket-copy .wg-text-link { margin-top:10px; }
  .wg-pocket-stage { width:100%; padding-top:20px; }
  .wg-pocket-annotation { right:-4px; top:0; font-size:12px; }
  .wg-end { padding-top:50px; }
}
@media(max-width:390px) {
  .wg { padding-inline:18px; }
  .wg-os { padding:20px; grid-template-columns:minmax(0,1fr) 70px; }
  .wg-os-flower i { width:90px; height:90px; }
  .wg-os-flower img { width:65px; height:65px; }
  .wg-os h2 { font-size:28px; }
  .wg-pocket { padding-inline:14px; }
  .wg-shot-heading small { font-size:8px; }
}
@media(prefers-reduced-motion:reduce) { .wg *, .wg *::before,.wg *::after { animation:none; transition:none; scroll-behavior:auto; } }