:root{
  --cream:#F6F1E7; --beige:#EDE3D0; --wood:#C9A876; --ink:#2E2620; --ink-soft:#6B5D4F; --accent:#8B6F52; --hover:#9A5B3F; --hover-inv:#E6B08E;
  --serif-zh:'Noto Serif SC',serif; --serif-en:'Fraunces',serif; --sans:'Poppins','Noto Sans SC',-apple-system,sans-serif;
  --sp-1:.6rem; --sp-2:1.2rem; --sp-3:1.8rem; --sp-4:3rem; --sp-5:4.5rem; --sp-6:6rem;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --cream:#1C1712; --beige:#241E17; --wood:#A9814F; --ink:#F3ECDF; --ink-soft:#C9BBA6; --accent:#C9A876; --hover:#C99273; --hover-inv:#9A5B3F; }
}
:root[data-theme="dark"]{ --cream:#1C1712; --beige:#241E17; --wood:#A9814F; --ink:#F3ECDF; --ink-soft:#C9BBA6; --accent:#C9A876; --hover:#C99273; --hover-inv:#9A5B3F; }
html{ scroll-padding-top:calc(84px + env(safe-area-inset-top,0px)); scroll-behavior:smooth; }
*{ margin:0; padding:0; box-sizing:border-box; }
body{ font-family:var(--sans); background:var(--cream); color:var(--ink); overflow-x:hidden; }
img{ max-width:100%; display:block; }
h1,h2,h3{ font-family:var(--serif-zh); font-weight:500; letter-spacing:.02em; }
em{ font-family:var(--serif-en); font-style:italic; font-weight:400; }
a{ color:inherit; text-decoration:none; }
.eyebrow{ display:flex; align-items:center; gap:.65rem; font-size:.8rem; color:var(--wood); margin-bottom:var(--sp-2); letter-spacing:.03em; font-family:var(--serif-en); font-style:italic; }
.eyebrow::before{ content:""; width:4px; height:4px; border-radius:50%; background:var(--wood); flex:none; }

nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  padding:calc(1.4rem + env(safe-area-inset-top,0px)) 2.5rem 1.4rem;
  display:flex; align-items:center; justify-content:space-between;
  transition:background .4s ease, color .4s ease, box-shadow .4s ease;
  color:#fff;
}
nav.solid{ background:var(--cream); color:var(--ink); box-shadow:0 1px 0 rgba(0,0,0,.06); }
.logo{ font-family:var(--serif-zh); font-size:1.1rem; letter-spacing:.08em; }
.nav-links{ display:flex; gap:2.2rem; font-size:.92rem; letter-spacing:.03em; }
.nav-links a{ opacity:.9; }
.lang-toggle{ font-size:.82rem; opacity:.75; display:flex; gap:.4rem; }
.lang-toggle span{ cursor:pointer; }
.lang-toggle span.active{ text-decoration:underline; opacity:1; }
.nav-right{ display:flex; align-items:center; gap:1.15rem; }
.theme-toggle{ position:relative; display:grid; place-items:center; width:32px; height:32px; padding:0; border-radius:50%; cursor:pointer;
  border:1px solid currentColor; background:transparent; color:inherit; opacity:.8; transition:color .2s ease, opacity .2s ease, background .2s ease; }
.theme-toggle:hover{ opacity:1; color:var(--hover); }
nav:not(.solid) .theme-toggle:hover{ color:var(--hover-inv); }
.theme-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.theme-toggle svg{ position:absolute; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
  transition:opacity .35s ease, transform .5s cubic-bezier(.3,1.3,.5,1); }
.theme-toggle .i-sun{ opacity:0; transform:rotate(-60deg) scale(.6); }
.theme-toggle.is-dark .i-moon{ opacity:0; transform:rotate(40deg) scale(.6); }
.theme-toggle.is-dark .i-sun{ opacity:1; transform:none; }
#hero .scene{ transition:filter .45s ease; }
#hero.is-dusk .scene{ filter:brightness(.28) saturate(.75); }
@media (max-width:720px){ .nav-right{ gap:.8rem; } .nav-links{ display:none; } nav{ padding-left:1.4rem; padding-right:1.4rem; } }

/* Hero — layered illustration on an artboard stage (2364×1773 art px), fitted by JS */
#hero{ position:relative; width:100%; height:66svh; min-height:420px; overflow:hidden; background:#B9A8BA; isolation:isolate; }
#hero .scene{ position:absolute; inset:0; overflow:hidden; }
#hero .cam{ position:absolute; inset:0; transform-origin:0 0; transition:transform 1.15s cubic-bezier(.6,.02,.2,1); }
#hero .stage{ position:absolute; left:0; top:0; width:2364px; height:1773px; transform-origin:0 0; --sy:0px; }
#hero .wplane{ position:absolute; inset:0; transform-origin:1890px 914px; transform:perspective(1754.6px) rotateY(-18.0deg);
  transition:transform 1.15s cubic-bezier(.6,.02,.2,1); }
#hero.is-focus .wplane{ transform:perspective(1754.6px) rotateY(0deg); }
#hero .wart-front{ pointer-events:none; }
#hero .wart{ position:absolute; inset:0; transform-origin:1890px 914px; transform:matrix3d(1.051462,0,0,0.00018519, 0,1,0,0, 0,0,1,0, 0,0,0,1); }
#hero img.wext{ position:absolute; left:1100px; top:-600px; width:3200px; height:2860px; max-width:none; }
#hero .ly{ position:absolute; inset:0; pointer-events:none; transform:translate3d(0, 0, 0); will-change:transform; }
/* scroll depth: where the browser has scroll-driven animations the layers lag the page on the compositor, in step with
   the scroll (hero.js sets the travel; elsewhere the script moves them) */
@keyframes wl-depth{ from{ transform:translate3d(0, 0, 0); } to{ transform:translate3d(0, var(--depth-y, 0px), 0); } }
@supports (animation-timeline: scroll()){
  #hero.sd-depth .ly{ animation:wl-depth linear both; animation-timeline:scroll(root block); animation-range:0px var(--depth-range, 100vh); }
}
#hero .fp{ position:absolute; inset:0; transition:transform 1.15s cubic-bezier(.6,.02,.2,1); }
#hero .ly img, #hero .ly canvas{ position:absolute; display:block; max-width:none; user-select:none; -webkit-user-drag:none; }
#hero .ly-bg img.bg{ left:0; top:0; width:2364px; height:1773px;
  -webkit-mask-image:linear-gradient(to right, #000 2170px, transparent 2364px); mask-image:linear-gradient(to right, #000 2170px, transparent 2364px); }
#hero canvas.room{ left:0; top:0; width:2364px; height:1773px; visibility:hidden;
  -webkit-mask-image:linear-gradient(to right, #000 2170px, transparent 2364px); mask-image:linear-gradient(to right, #000 2170px, transparent 2364px); }
#hero.gl-on canvas.room{ visibility:visible; }
#hero.gl-on img.bg{ visibility:hidden; }

/* the curtain (still image; WebGL takes over and lets the wind move it) */
#hero img.cur{ left:880px; top:0px; width:840px; height:1500px; }
#hero canvas.curtain{ left:880px; top:0px; width:980px; height:1500px; visibility:hidden; }
#hero.gl-on canvas.curtain{ visibility:visible; }
#hero.gl-on img.cur{ visibility:hidden; }
/* the cats (cut from the full illustration): bodies breathe; heads look about; the black cat's tail stirs; the white cat blinks */
#hero .cat{ position:absolute; transform-origin:50% 100%; }
#hero .cat-b{ left:751.7px; top:1167.3px; width:285.6px; height:433.7px; }
#hero .cat-w{ left:1342.0px; top:1351.3px; width:402.0px; height:268.7px; }
#hero .cat-in{ position:absolute; inset:0; }
#hero .cat .pc{ position:absolute; left:0; top:0; width:100%; height:100%; will-change:transform; }
#hero .cat .pc img, #hero .cat .eye img{ position:absolute; left:0; top:0; width:100%; height:100%; max-width:none; }
#hero .cat img.n{ display:none; }
#hero.is-night .cat img.n{ display:block; } #hero.is-night .cat img.d{ display:none; }
#hero .cat-b .body{ transform-origin:50% 96%; }
#hero .cat-b .head{ transform-origin:123.9px 144.9px; }
#hero .cat-b .tailb{ transform-origin:252.0px 417.9px; }
#hero .cat-b .tailt{ transform-origin:115.5px 420.0px; }
#hero .cat-w .body{ transform-origin:62% 92%; }
#hero .cat-w .head{ transform-origin:128.4px 140.3px; }
#hero .cat-w .tailb{ transform-origin:314.1px 126.4px; }
#hero .cat-w .tailt{ transform-origin:300.3px 246.9px; }
#hero .cat-w .eye{ position:absolute; left:47.41px; top:43.46px; width:41.48px; height:33.58px; visibility:hidden; }
#hero .cat canvas.cat-gl{ position:absolute; display:block; pointer-events:none; }
#hero .cat.gl-cat .cat-in{ visibility:hidden; }
#hero .cat-w .eye.on{ visibility:visible; }

#hero .hx-close{ position:absolute; z-index:3; left:50%; bottom:calc(12px + env(safe-area-inset-bottom,0px)); display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 16px 0 12px;
  border-radius:18px; border:1px solid rgba(255,255,255,.7); background:rgba(70,46,70,.26); color:#fff; font-family:var(--sans); font-size:13px; letter-spacing:.08em;
  cursor:pointer; opacity:0; pointer-events:none; transform:translate(-50%, 8px); transition:opacity .4s ease, transform .4s ease; text-shadow:0 1px 2px rgba(50,30,50,.3); }
#hero .hx-close svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
#hero.is-focus .hx-close, #hero.is-sea-touch .hx-close{ opacity:1; pointer-events:auto; transform:translate(-50%, 0); transition-delay:.5s; }
#hero .hx-close:hover{ background:rgba(70,46,70,.4); }
#hero .hx-close:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

/* the wall player — frontal-wall coordinates; its painted glass is un-skewed by .pg-art */
#hero .pg{ position:absolute; left:0; top:0; width:666px; height:1169px; transform-origin:0 0; pointer-events:auto; cursor:pointer; }
#hero.is-focus .pg{ cursor:default; }
#hero .pg-float{ position:absolute; inset:0; }
@keyframes hx-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
#hero .pg-art{ position:absolute; inset:0; }
/* a glass slab mounted a finger's width off the wall, lit from the window on the left:
   its shadow falls to the lower right, the light bent through its edge draws a warm line inside that shadow,
   and the slab's back face shows as a second, fainter outline */
#hero .pg-art > i{ position:absolute; left:-26px; top:74px; width:674px; height:1038px; border-radius:50px; pointer-events:none; }
#hero .pg-art::before{ content:""; position:absolute; left:-26px; top:74px; width:674px; height:1038px; border-radius:50px;
  box-shadow:5px 7px 10px -1px rgba(58,32,66,.26), 2px 3px 3px rgba(58,32,66,.12); }
#hero .pg-cast{ transform:translate(56px, 40px); background:rgba(54,28,64,.3); filter:blur(24px);
  box-shadow:-30px -22px 14px 2px rgba(54,28,64,.32); }
#hero .pg-art img{ position:absolute; max-width:none; }
#hero .pg-ui{ position:absolute; inset:0; }
#hero .pg-shade{ position:absolute; left:-26px; top:74px; width:674px; height:1038px; border-radius:50px; overflow:hidden; pointer-events:none; }
#hero .pg-shade i{ position:absolute; top:-30%; bottom:-30%; left:-70%; right:-70%; }
#hero .pg-shade .sh{ transform:translateX(var(--sx, 0px)); opacity:var(--so, .3); mix-blend-mode:multiply; will-change:transform, opacity;
  background:linear-gradient(56.6deg, transparent 33%, rgba(96,66,104,.7) 44%, rgba(96,66,104,.75) 51%, transparent 63%); }
#hero .pg-shade .rf{ top:-10%; bottom:-10%; left:-40%; right:-40%; transform:translateX(var(--rx, 0px)); transition:transform .9s cubic-bezier(.2,.7,.2,1); mix-blend-mode:screen; will-change:transform;
  background:linear-gradient(118deg, transparent 38%, rgba(255,255,255,.11) 44%, rgba(255,255,255,.04) 47%, transparent 50%, transparent 55%, rgba(255,255,255,.06) 57%, transparent 60%); }
#hero .pg-shade .eg{ inset:0; transform:none; mix-blend-mode:screen; opacity:calc(var(--lo, .3) * 1.4);
  background:linear-gradient(90deg, rgba(255,198,140,.55) 0, rgba(255,198,140,.18) 9px, transparent 26px), linear-gradient(0deg, rgba(255,204,150,.42) 0, rgba(255,204,150,.12) 8px, transparent 22px);
  -webkit-mask:linear-gradient(180deg, transparent 4%, #000 14%, transparent 22%, #000 38%, #000 46%, transparent 55%, #000 70%, #000 100%); mask:linear-gradient(180deg, transparent 4%, #000 14%, transparent 22%, #000 38%, #000 46%, transparent 55%, #000 70%, #000 100%); }
#hero .pg-shade .eg{ display:none; }
#hero .pg-shade .lt{ transform:translateX(calc(var(--sx, 0px) * -.55 + 120px)); opacity:calc(var(--lo, .3) * .45); mix-blend-mode:screen; will-change:transform, opacity;
  background:linear-gradient(42deg, transparent 36%, rgba(255,196,140,.0) 39%, rgba(255,204,150,.5) 42.5%, rgba(255,222,184,.2) 45.5%, transparent 49%,
    transparent 53%, rgba(255,200,146,.36) 55.5%, rgba(255,226,190,.12) 57.5%, transparent 61%); }
/* the cover: a CD that spins while playing */
#hero .pl-cd{ position:absolute; left:61px; top:150px; width:500px; height:500px; border-radius:50%;
  box-shadow:0 30px 44px -22px rgba(48,24,46,.55), 0 0 0 2.5px rgba(255,255,255,.55), 0 0 0 5px rgba(120,96,118,.18);
  transition:transform .3s ease, opacity .3s ease; }
#hero .cd-disc{ position:absolute; inset:0; border-radius:50%; overflow:hidden; animation:hx-spin 9s linear infinite; animation-play-state:paused;
  -webkit-mask:radial-gradient(circle, transparent 0 4.2%, rgba(0,0,0,.72) 4.6% 15.6%, #000 16.2%); mask:radial-gradient(circle, transparent 0 4.2%, rgba(0,0,0,.72) 4.6% 15.6%, #000 16.2%); }
#hero .pg.is-playing .cd-disc{ animation-play-state:running; }
#hero .cd-disc img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; max-width:none; }
@keyframes hx-spin{ to{ transform:rotate(360deg); } }
#hero .cd-grooves{ position:absolute; inset:0; border-radius:50%; pointer-events:none; mix-blend-mode:soft-light;
  background:repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.16) 0 1px, rgba(0,0,0,.06) 1px 2.4px, transparent 2.4px 5px);
  -webkit-mask:radial-gradient(circle, transparent 0 16.5%, #000 17.5%); mask:radial-gradient(circle, transparent 0 16.5%, #000 17.5%); }
/* the iridescent band stays still while the disc turns under it — that is what makes a CD look like a CD */
#hero .cd-sheen{ position:absolute; inset:0; border-radius:50%; pointer-events:none; mix-blend-mode:screen;
  background:
    linear-gradient(132deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(255,255,255,.12) 100%),
    conic-gradient(from 200deg at 50% 50%, rgba(255,255,255,0) 0deg, rgba(255,170,210,.3) 20deg, rgba(170,214,255,.38) 40deg, rgba(196,255,214,.26) 60deg, rgba(255,240,180,.18) 78deg, rgba(255,255,255,0) 100deg,
      rgba(255,255,255,0) 180deg, rgba(255,226,170,.26) 200deg, rgba(186,206,255,.32) 222deg, rgba(234,186,255,.22) 244deg, rgba(255,255,255,0) 268deg, rgba(255,255,255,0) 360deg);
  -webkit-mask:radial-gradient(circle, transparent 0 17%, rgba(0,0,0,.5) 19%, #000 40%, rgba(0,0,0,.7) 99%, transparent 100%); mask:radial-gradient(circle, transparent 0 17%, rgba(0,0,0,.5) 19%, #000 40%, rgba(0,0,0,.7) 99%, transparent 100%); }
#hero .cd-hub{ position:absolute; left:50%; top:50%; width:33%; height:33%; margin:-16.5% 0 0 -16.5%; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, transparent 0 25.5%, rgba(255,255,255,.95) 26.5% 29%, rgba(255,255,255,.18) 30% 58%, rgba(255,255,255,.55) 59% 61%, rgba(255,255,255,.12) 62% 95%, rgba(255,255,255,.75) 96.5% 100%);
  box-shadow:0 0 0 1px rgba(120,90,110,.12); }
#hero .pl-halo{ position:absolute; left:33px; top:122px; width:556px; height:556px; border-radius:50%; pointer-events:none;
  opacity:0; transform:scale(.94); transition:opacity .9s ease, transform 1.1s cubic-bezier(.2,.8,.2,1); }
#hero .pl-halo::before{ content:""; position:absolute; inset:0; border-radius:50%;
  box-shadow:0 0 26px 6px rgba(255,214,168,.55), 0 0 70px 18px rgba(255,190,130,.22), inset 0 0 22px 4px rgba(255,226,190,.5);
  border:2px solid rgba(255,244,228,.85); animation:hx-halo 4.2s ease-in-out infinite; animation-play-state:paused; }
#hero .pl-halo i{ position:absolute; inset:-3px; border-radius:50%; animation:hx-spin 6s linear infinite; animation-play-state:paused;
  background:conic-gradient(from 0deg, transparent 0 8%, rgba(255,250,240,.95) 13%, transparent 20% 52%, rgba(255,236,206,.8) 58%, transparent 66% 100%);
  -webkit-mask:radial-gradient(circle, transparent 0 calc(50% - 4px), #000 calc(50% - 2.5px) calc(50% - .5px), transparent 50%); mask:radial-gradient(circle, transparent 0 calc(50% - 4px), #000 calc(50% - 2.5px) calc(50% - .5px), transparent 50%);
  filter:drop-shadow(0 0 6px rgba(255,220,170,.9)); }
#hero .pg.is-playing .pl-halo{ opacity:1; transform:none; }
#hero .pg.is-playing .pl-halo::before, #hero .pg.is-playing .pl-halo i{ animation-play-state:running; }
#hero.is-night .pl-halo::before{ border-color:rgba(214,226,255,.85); box-shadow:0 0 26px 6px rgba(110,150,255,.6), 0 0 80px 22px rgba(80,120,255,.26), inset 0 0 22px 4px rgba(150,180,255,.45); }
#hero.is-night .pl-halo i{ background:conic-gradient(from 0deg, transparent 0 8%, rgba(230,238,255,.95) 13%, transparent 20% 52%, rgba(180,204,255,.8) 58%, transparent 66% 100%); filter:drop-shadow(0 0 6px rgba(140,175,255,.95)); }
#hero .is-swap .pl-halo{ opacity:0; }
@keyframes hx-halo{ 0%,100%{ opacity:.78; transform:scale(1); } 50%{ opacity:1; transform:scale(1.012); } }
#hero .is-swap .pl-cd{ transform:scale(.9) rotate(-20deg); opacity:0; }
#hero .pl-album{ position:absolute; left:61px; top:150px; width:500px; height:500px; border-radius:50%; }

#hero .pl-title, #hero .pl-sub, #hero .pl-time{ position:absolute; white-space:nowrap; font-family:var(--sans); color:#fff; line-height:1; text-shadow:0 1px 2px rgba(70,50,62,.4), 0 0 10px rgba(70,46,74,.25);
  transition:opacity .3s ease; pointer-events:none; }
#hero .pl-title{ left:40px; top:706px; max-width:490px; overflow:hidden; text-overflow:ellipsis; font-size:36px; font-weight:500; letter-spacing:.01em; }
#hero .pl-sub{ left:41px; top:756px; max-width:490px; overflow:hidden; text-overflow:ellipsis; font-size:22px; color:rgba(255,255,255,.86); letter-spacing:.08em; }
#hero .pl-time{ top:830px; font-size:20px; color:rgba(255,255,255,.72); font-variant-numeric:tabular-nums; }
#hero .pl-time.cur{ left:42px; } #hero .pl-time.rem{ right:106px; }
#hero .is-swap .pl-title, #hero .is-swap .pl-sub{ opacity:0; }
#hero .pl-seek{ position:absolute; left:42px; top:797px; width:518px; height:36px; padding:0; border:0; background:none; cursor:pointer; }
#hero .pl-track{ position:absolute; left:0; right:0; top:16.5px; height:3.2px; border-radius:2px; background:rgba(255,255,255,.62); box-shadow:0 1.6px 1.2px rgba(84,62,74,.32); }
#hero .pl-fill{ position:absolute; left:0; top:0; bottom:0; width:calc(var(--p, .24) * 100%); border-radius:inherit; background:#fff; }
#hero .pl-knob{ position:absolute; top:50%; left:calc(var(--p, .24) * 100%); width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%; background:#fff;
  box-shadow:0 1.6px 2.4px rgba(84,62,74,.4); transition:transform .2s ease; }
#hero .pl-seek:hover .pl-knob{ transform:scale(1.3); }
#hero .pl-btn{ position:absolute; padding:0; border:0; background:none; cursor:pointer; border-radius:50%; color:#fff; }
#hero .pl-btn::before{ content:""; position:absolute; inset:-16px; border-radius:50%; background:rgba(255,255,255,.2); opacity:0; transform:scale(.7); transition:opacity .2s ease, transform .2s ease; }
#hero .pl-btn:hover::before{ opacity:1; transform:scale(1); }
#hero .pl-play{ left:252px; top:834px; width:118px; height:118px; display:grid; place-items:center;
  background:radial-gradient(circle at 38% 32%, #FFFFFF 0%, #F8F7F6 46%, #ECE8E6 100%);
  box-shadow:3px 5px 7px rgba(92,70,82,.34), inset -2px -3px 5px rgba(120,96,104,.1); transition:transform .15s ease; }
#hero .pl-play::before{ display:none; }
#hero .pl-play:hover{ transform:scale(1.05); }
#hero .pl-play:active{ transform:scale(.96); }
#hero .pl-play svg{ width:56px; height:56px; fill:#000; }
#hero .pl-play .i-pause{ display:none; }
#hero .pg.is-playing .pl-play .i-play{ display:none; }
#hero .pg.is-playing .pl-play .i-pause{ display:block; }
#hero .pl-prev svg, #hero .pl-next svg, #hero .pl-ico svg{ position:absolute; inset:0; width:100%; height:100%; fill:#fff; filter:drop-shadow(0 1px 1.2px rgba(84,62,74,.35)); }
#hero .pl-ico{ position:absolute; pointer-events:none; opacity:.85; }
#hero .pl-ico svg{ fill:none; stroke:#fff; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
#hero .pl-pill{ position:absolute; left:276px; top:74px; width:70px; height:13px; border-radius:7px; pointer-events:none;
  border:1.5px solid rgba(255,255,255,.72); background:rgba(255,255,255,.16); box-shadow:inset 0 1px 2px rgba(80,56,76,.18); }
#hero .pl-listbtn{ position:absolute; left:139.5px; top:996px; width:348px; height:86px; display:flex; align-items:center; justify-content:center; gap:12px;
  border-radius:43px; border:1.5px solid rgba(255,255,255,.62); background:rgba(255,255,255,.22); color:#fff; cursor:pointer;
  font-family:var(--sans); font-weight:600; font-size:29px; letter-spacing:.08em; text-shadow:0 1px 2px rgba(70,50,62,.3);
  box-shadow:0 8px 18px -8px rgba(60,40,60,.45), inset 0 1px 0 rgba(255,255,255,.45); transition:background .25s ease, color .25s ease; }
#hero .pl-listbtn:hover{ background:rgba(255,255,255,.34); }
#hero .pl-listbtn svg{ width:33px; height:33px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; }
#hero .pl-listbtn b{ display:grid; place-items:center; min-width:33px; height:33px; padding:0 9px; border-radius:17px; background:rgba(255,255,255,.9); color:#6E5560;
  font-size:18px; font-weight:600; letter-spacing:0; text-shadow:none; }
#hero.is-list .pl-listbtn{ background:#fff; color:#4A3A44; text-shadow:none; }
#hero.is-list .pl-listbtn b{ background:#4A3A44; color:#fff; }

/* the episode list: a frosted card hung on the blank wall beside the player */
#hero .wlist{ position:absolute; left:0; top:0; width:638px; height:1086px; transform-origin:0 0; pointer-events:none; }
#hero .pl-sheet{ position:absolute; inset:0; box-sizing:border-box; padding:40px 30px 30px; border-radius:40px; color:#3B2F38; font-family:var(--sans);
  background:linear-gradient(160deg, rgba(255,255,255,.74), rgba(255,250,252,.5)); border:2px solid rgba(255,255,255,.8);
  box-shadow:0 46px 70px -34px rgba(64,34,62,.42), inset 0 1px 0 rgba(255,255,255,.9);
  opacity:0; transform:translateX(var(--from, -30px)) scale(.97); transition:opacity .4s ease, transform .55s cubic-bezier(.2,.8,.2,1); }
#hero.is-list .wlist{ pointer-events:auto; }
#hero.is-list .pl-sheet{ opacity:1; transform:none; transition-delay:.15s; }
#hero .pl-sheet header{ display:flex; align-items:center; justify-content:space-between; padding:0 12px 22px; border-bottom:1.5px solid rgba(90,62,82,.14); }
#hero .pl-sheet h3{ margin:0; font-family:var(--sans); font-size:40px; font-weight:500; letter-spacing:.08em; color:#3B2F38; }
#hero .pl-sheet header p{ margin:8px 0 0; font-size:21px; letter-spacing:.06em; color:rgba(70,52,64,.6); }
#hero .pl-sheet .x{ width:58px; height:58px; border-radius:50%; border:0; background:rgba(90,62,82,.08); color:#5A4452; font-size:30px; line-height:1; cursor:pointer; }
#hero .pl-sheet .x:hover{ background:rgba(90,62,82,.16); }
/* the list scrolls inside the card: the header stays put, rows scroll under it.
   Padding on the scroller (cancelled by negative margin) gives the selected row's highlight and shadow room, so they are
   never cut off or pushed against the card's edge; soft fades at the top and bottom say "there is more". */
#hero .pl-sheet{ display:flex; flex-direction:column; }
#hero .pl-sheet header{ flex:none; }
#hero .pl-eps{ list-style:none; flex:1 1 auto; min-height:0; margin:0 -14px; padding:14px 14px 18px; overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:rgba(90,62,82,.22) transparent;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 26px), transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 26px), transparent 100%); }
#hero .pl-eps::-webkit-scrollbar{ width:8px; }
#hero .pl-eps::-webkit-scrollbar-thumb{ border-radius:4px; background:rgba(90,62,82,.22); }
#hero .pl-eps::-webkit-scrollbar-track{ background:transparent; }
#hero .pl-eps > li:last-child > .pl-ep{ margin-bottom:0; }
#hero .pl-ep{ display:grid; grid-template-columns:minmax(0,1fr) 62px; align-items:center; gap:18px; width:100%; margin:0 0 4px; padding:15px 16px 15px 18px;
  border:0; border-radius:26px; background:none; color:#3B2F38; text-align:left; cursor:pointer; font-family:var(--sans); transition:background .2s ease; }
#hero .pl-ep:hover{ background:rgba(255,255,255,.5); }
#hero .pl-ep.is-current{ background:rgba(255,255,255,.72); box-shadow:0 6px 16px -10px rgba(64,34,62,.35); }
#hero .pl-ep.is-pin .no{ font-family:var(--sans); font-style:normal; font-size:19px; font-weight:600; letter-spacing:.24em; }
#hero .pl-ep .no{ display:block; font-family:var(--serif-en); font-style:italic; font-size:23px; color:#A0644A; letter-spacing:.02em; }
/* a video episode carries the same 视频 tag as the episode list on the Podcast page */
#hero .pl-ep .no .vt{ display:inline-block; margin:-6px 0 -6px 14px; padding:3px 11px 4px; border:1.5px solid rgba(160,100,74,.75); border-radius:99px;
  font-family:var(--sans); font-style:normal; font-size:16px; font-weight:500; line-height:1.2; letter-spacing:.14em; color:#A0644A; vertical-align:3px; }
#hero .pl-ep .t{ display:block; margin-top:4px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:32px; font-weight:500; letter-spacing:.03em; }
#hero .pl-ep .m{ display:block; margin-top:6px; font-size:21px; color:rgba(70,52,64,.58); letter-spacing:.04em; }
#hero .pl-ep .st{ display:grid; place-items:center; width:62px; height:62px; border-radius:50%; background:rgba(90,62,82,.08); }
#hero .pl-ep .st svg{ width:26px; height:26px; fill:#6E5560; }
#hero .pl-ep .eq{ display:none; align-items:flex-end; gap:5px; height:26px; }
#hero .pl-ep .eq i{ width:6px; height:100%; border-radius:3px; background:#A0644A; transform-origin:50% 100%; transform:scaleY(.35); }
#hero .pl-ep.is-current .st{ background:rgba(160,100,74,.12); }
#hero .pl-ep.is-current .st svg{ display:none; }
#hero .pl-ep.is-current .eq{ display:flex; }
#hero .pg.is-playing ~ .wlist .pl-ep.is-current .eq i, #hero.is-playing .pl-ep.is-current .eq i{ animation:hx-eq .9s ease-in-out infinite; }
#hero.is-playing .pl-ep.is-current .eq i:nth-child(2){ animation-delay:-.3s; animation-duration:.75s; }
#hero.is-playing .pl-ep.is-current .eq i:nth-child(3){ animation-delay:-.55s; animation-duration:1.05s; }
@keyframes hx-eq{ 0%,100%{ transform:scaleY(.3); } 50%{ transform:scaleY(1); } }
#hero .pl-btn:focus-visible, #hero .pl-seek:focus-visible, #hero .pl-album:focus-visible, #hero .pl-listbtn:focus-visible, #hero .pl-ep:focus-visible, #hero .pl-sheet .x:focus-visible{ outline:3px solid #fff; outline-offset:4px; }
#hero .pl-ep:focus-visible, #hero .pl-sheet .x:focus-visible{ outline-color:#A0644A; }
#hero .pl-ep:focus-visible{ outline-offset:-3px; } /* inside the scroller the ring stays visible instead of being clipped */

#hero .fade{ position:absolute; inset:0; pointer-events:none; transition:opacity .8s ease;
  background:linear-gradient(180deg, rgba(40,24,40,.2) 0%, rgba(40,24,40,.06) 10%, rgba(40,24,40,0) 18%); }
#hero.is-focus .fade{ opacity:.55; }
@media (prefers-reduced-motion: reduce){
  #hero .cat-in, #hero .pc, #hero .eye, #hero .pg-float, #hero .pl-ep .eq i, #hero .cd-disc, #hero .pg-glint i, #hero .pl-halo::before, #hero .pl-halo i{ animation:none !important; }
  #hero .cam, #hero .wplane, #hero .fp{ transition-duration:.01s; }
}
nav:not(.solid){ text-shadow:0 1px 10px rgba(52,26,46,.38); }
/* /Hero */
/* day <-> night is a slow crossfade, never a cut */
#hero{ transition:background-color 2.6s cubic-bezier(.45,0,.55,1); }
#hero img.wext-day, #hero img.wext-night{ display:block !important; }
#hero img.wext-night{ opacity:0; transition:opacity 2.6s cubic-bezier(.45,0,.55,1); }
#hero.is-night img.wext-night{ opacity:1; }
#hero .ly img.bg-day, #hero .ly img.bg-night{ display:block !important; }
#hero .ly img.bg-night{ opacity:0; transition:opacity 2.6s cubic-bezier(.45,0,.55,1); }
#hero.is-night .ly img.bg-night{ opacity:1; }
#hero.gl-on .ly img.bg-day, #hero.gl-on .ly img.bg-night{ visibility:hidden; }
#hero .pg-float, #hero .pg-cast, #hero .pg-shade .eg{ transition:opacity 2.6s cubic-bezier(.45,0,.55,1), filter 2.6s cubic-bezier(.45,0,.55,1), background 2.6s cubic-bezier(.45,0,.55,1), transform 2.6s cubic-bezier(.45,0,.55,1); }
html.theming body, html.theming body *:not(#hero *){ transition:background-color 1.4s ease, color 1.4s ease, border-color 1.4s ease, fill 1.4s ease, stroke 1.4s ease !important; }

#hero.is-night .pl-cd{ filter:brightness(.92); }
#hero .cd-disc img.cd-n{ opacity:0; transition:opacity 2.6s cubic-bezier(.45,0,.55,1); }
#hero.is-night .cd-disc img.cd-n{ opacity:1; }
#hero .pl-cd{ transition:filter 2.6s cubic-bezier(.45,0,.55,1), transform .3s ease, opacity .3s ease; }
/* the slab itself, lifted from the two mockups: the rim, the thick edge that catches the low sun in broken gold streaks
   (blue under the moon), the grey glass reflecting the window bars; day and night crossfade with the room */
#hero .pg-art img.gn{ opacity:0; }
#hero .pg-art img.gd, #hero .pg-art img.gn{ transition:opacity 2.6s cubic-bezier(.45,0,.55,1); }
#hero.is-night .pg-art img.gn{ opacity:1; } #hero.is-night .pg-art img.gd{ opacity:0; }
#hero .pl-pill{ display:none; }
#hero .pg-art::after{ opacity:0; }
#hero .pg-art::after{ transition:background 2.6s cubic-bezier(.45,0,.55,1); }

#hero.is-night .pg-cast{ background:rgba(8,6,26,.34); filter:blur(30px); transform:translate(44px, 30px); }
#hero.is-night .pg-shade .eg{ opacity:0; }

/* night: the same room under the moon (follows the site's dark theme) */
#hero .ly img.bg-night, #hero img.wext-night{ display:none; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) #hero .bg-day{ display:none; }
  :root:not([data-theme="light"]) #hero .wext-day{ display:none; }
  :root:not([data-theme="light"]) #hero .bg-night{ display:block; }
  :root:not([data-theme="light"]) #hero .wext-night{ display:block; }
  :root:not([data-theme="light"]) #hero:not(.gl-on) .ly-curtain .fp{ filter:brightness(.5) saturate(.55) sepia(.25) hue-rotate(196deg); opacity:.88; }
  :root:not([data-theme="light"]) #hero{ background:#1B1A33; }
  :root:not([data-theme="light"]) #hero .pg-float{ filter:brightness(.92); }
}
:root[data-theme="dark"] #hero .bg-day{ display:none; }
:root[data-theme="dark"] #hero .wext-day{ display:none; }
:root[data-theme="dark"] #hero .bg-night{ display:block; }
:root[data-theme="dark"] #hero .wext-night{ display:block; }
:root[data-theme="dark"] #hero:not(.gl-on) .ly-curtain .fp{ filter:brightness(.5) saturate(.55) sepia(.25) hue-rotate(196deg); opacity:.88; }
:root[data-theme="dark"] #hero{ background:#1B1A33; }
:root[data-theme="dark"] #hero .pg-float{ filter:brightness(.92); }

.scroll-cue{ position:absolute; bottom:1.8rem; left:50%; transform:translateX(-50%); color:#fff; font-size:.78rem; letter-spacing:.15em; opacity:.85; display:flex; flex-direction:column; align-items:center; gap:.45rem; }
.scroll-cue::after{ content:""; width:1px; height:28px; background:rgba(255,255,255,.7); animation:drop 2.2s ease-in-out infinite; }
@keyframes drop{ 0%{transform:scaleY(0); transform-origin:top;} 50%{transform:scaleY(1); transform-origin:top;} 51%{transform-origin:bottom;} 100%{transform:scaleY(0); transform-origin:bottom;} }
@media (prefers-reduced-motion: reduce){ .scroll-cue::after{ animation:none; } }

section{ padding:var(--sp-6) 2.5rem; max-width:1120px; margin:0 auto; }
@media (max-width:720px){ section{ padding:var(--sp-5) 1.4rem; } }

/* taller first screen: it reaches down to where the rule under the Journal title used to sit (never taller than the window) */
@media (min-width:861px){ #hero{ height:min(calc(66svh + 234px), 100svh); } }
/* Metal */
@font-face{ font-family:'Metal'; font-weight:400; font-style:normal; font-display:swap; src:url(../assets/fonts/metal.woff) format('woff'); }
/* /Metal */
/* Logo mark */
:root{ --logo-mask:url(../assets/brand/logo-mark.png); --logo-ratio:2.7439; }
.logo{ display:inline-block; line-height:0; }
.logo-mark{ display:block; height:var(--logo-h,40px); aspect-ratio:var(--logo-ratio); background:currentColor;
  -webkit-mask:var(--logo-mask) center/contain no-repeat; mask:var(--logo-mask) center/contain no-repeat; }
nav:not(.solid) .logo-mark{ filter:drop-shadow(0 1px 8px rgba(52,26,46,.38)); }
.ft-mark .logo-mark{ --logo-h:76px; }
/* /Logo mark */
/* Our Story copy — LXGW WenKai (bookish kai) with the system serif for punctuation */
#connect .story-comp{ max-width:470px; --st:'Noto Sans SC','Source Han Sans SC',-apple-system,sans-serif; --st-ink:#3A322B; --st-soft:#7A6A5A; --st-accent:#9A5B3F; }
#connect .story-in{ padding:33cqw 0 31cqw 11cqw; }
#connect .story-script{ font-size:37cqw; }
#connect .story-script.our{ top:9cqw; }
#connect .story-script.story{ right:-10cqw; bottom:4cqw; }
#connect .story-head{ margin:0 0 .35em; font-family:var(--st); font-weight:400; font-size:clamp(20px,5.3cqw,24px); line-height:1.5; letter-spacing:.12em; }
#connect .story-body{ font-family:var(--st); font-weight:300; font-size:clamp(13.5px,3.1cqw,15px); line-height:1.95; letter-spacing:.07em; color:var(--st-ink); text-align:left; line-break:strict; }
#connect .story-body p + p{ margin-top:0; }
#connect .story-body .sb-lead{ margin:0 0 1.1em; font-size:1em; letter-spacing:.07em; color:var(--st-ink); }
#connect .story-body .sb-who p{ margin:0; }
#connect .story-body .sb-who p + p{ margin-top:.55em; }
#connect .story-body .sb-who b{ display:inline; margin-right:.55em; font-weight:400; letter-spacing:.2em; color:var(--st-accent); }
#connect .story-body .sb-who span, #connect .story-body .sb-quote span{ display:inline; }
#connect .story-body .sb-who span:nth-of-type(2){ display:block; }
#connect .story-body .sb-who span{ color:var(--st-soft); }
#connect .story-body .sb-meet{ margin:1.1em 0 0; text-wrap:pretty; }
#connect .story-body .sb-quote{ position:relative; margin:1.15em 0 0; padding:0 0 0 .1em; font-weight:400; color:var(--st-ink); letter-spacing:.08em; line-height:1.9; }
#connect .story-body .sb-quote span{ display:block; }
#connect .story-body .sb-quote span:first-child::before, #connect .story-body .sb-quote span:last-child::after{ font-family:var(--st); font-size:1.7em; line-height:1; color:var(--st-accent); }
#connect .story-body .sb-quote span:first-child::before{ content:"“"; position:absolute; margin-left:-1.2em; margin-top:.2em; }
#connect .story-body .sb-quote span:last-child::after{ content:"”"; margin-left:.1em; vertical-align:-.2em; line-height:0; }
#connect .story-head{ font-family:'Noto Sans SC','Source Han Sans SC',-apple-system,sans-serif; }
#connect .story-body .sb-lead, #connect .story-body .sb-who, #connect .story-body .sb-meet{ font-family:'Noto Serif SC','Source Han Serif SC','Source Han Serif CN','Noto Serif CJK SC',serif; }
#connect .story-head{ font-weight:500; }
#connect .story-body .sb-lead, #connect .story-body .sb-who, #connect .story-body .sb-meet{ font-weight:400; color:var(--st-ink); }
#connect .story-body .sb-lead{ color:var(--st-ink); }
#connect .story-body .sb-who b{ font-weight:600; }
#connect .story-body .sb-meet{ font-weight:600; }
/* full-width rule right under the typewriter (same hairline as the Journal rules) */
#connect .cw{ border-bottom:0 !important; }
#connect{ border-bottom:1px solid rgba(46,38,32,.42) !important; }
@media (min-resolution:2dppx){ #connect{ border-bottom-width:.5px !important; border-bottom-color:rgba(46,38,32,.62) !important; } }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) #connect{ border-bottom-color:rgba(243,236,223,.34) !important; } }
:root[data-theme="dark"] #connect{ border-bottom-color:rgba(243,236,223,.34) !important; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) #connect .story-comp{ --st-ink:#E6DED2; --st-soft:#A39C94; --st-accent:#C99273; } }
:root[data-theme="dark"] #connect .story-comp{ --st-ink:#E6DED2; --st-soft:#A39C94; --st-accent:#C99273; }
#connect .story-body .sb-quote{ font-family:'Noto Serif SC','Source Han Serif SC','Source Han Serif CN','Noto Serif CJK SC',serif; font-weight:600; }
#connect .story-body .sb-meet{ color:var(--st-accent); }
#connect .story-body .sb-meet{ margin-top:2.3em; }
/* /Our Story copy */
/* Poppins */
@font-face{ font-family:'Poppins'; font-weight:300; font-style:normal; font-display:swap; src:url(../assets/fonts/poppins-300.woff) format('woff'); }
@font-face{ font-family:'Poppins'; font-weight:400; font-style:normal; font-display:swap; src:url(../assets/fonts/poppins-400.woff) format('woff'); }
@font-face{ font-family:'Poppins'; font-weight:500; font-style:normal; font-display:swap; src:url(../assets/fonts/poppins-500.woff) format('woff'); }
@font-face{ font-family:'Poppins'; font-weight:700; font-style:normal; font-display:swap; src:url(../assets/fonts/poppins-700.woff) format('woff'); }
/* /Poppins */
/* SHS Heavy */
@font-face{ font-family:'SHS Heavy'; font-weight:900; font-style:normal; font-display:swap; src:url(../assets/fonts/shs-heavy-subset.woff) format('woff'); }
/* /SHS Heavy */
/* Journal — contents sheet: hairline grid, italic column labels, dates where prices would sit */
#journal{ --faint:color-mix(in srgb, var(--ink-soft) 62%, transparent); max-width:none; padding:0; overflow:hidden; container-type:inline-size; --rule:rgba(46,38,32,.42); --edge:max(2.5rem, calc((100cqw - 1040px) / 2)); }
.jx{ position:relative; display:grid; grid-template-columns:minmax(0, var(--jl, 65fr)) minmax(0, var(--jr, 35fr)); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) #journal{ --rule:rgba(243,236,223,.34); } }
:root[data-theme="dark"] #journal{ --rule:rgba(243,236,223,.34); }
.jx::before{ content:""; position:absolute; top:0; bottom:0; left:var(--split, 65%); width:1px; background:var(--rule); z-index:1; transform-origin:0 0; }
.jx-rule{ height:1px; background:var(--rule); transform-origin:0 0; }
@media (min-resolution:2dppx){
  #journal{ --rule:rgba(46,38,32,.62); }
  .jx::before{ transform:scaleX(.5); }
  .jx-rule{ transform:scaleY(.5); }
}
.jx-rule.full{ grid-column:1 / -1; }
.jx-rule.left{ grid-column:1; }
.jx-head{ grid-column:1; grid-row:1; padding:var(--sp-6) 3rem 3.2rem var(--edge); }
/* same display face as the column names */
.jx-title{ margin:0; font-family:'Metal','Fraunces',serif; font-weight:400; font-size:clamp(3.2rem,6vw,5.4rem); line-height:1; letter-spacing:.01em; color:var(--ink); }
.jx-title em{ font-family:inherit; font-style:normal; font-weight:400; }
.jx-sub{ margin:0; font-family:var(--sans); font-weight:400; font-size:.98rem; line-height:1.95; letter-spacing:.24em; color:var(--ink-soft); }
.jx-side{ grid-column:2; grid-row:1; padding:calc(var(--sp-6) + .5rem) 0 0 1.15rem; }
.jx-side span{ writing-mode:vertical-rl; font-family:var(--sans); font-weight:500; font-size:.78rem; letter-spacing:.5em; color:var(--ink); }
.jx-group{ grid-column:1; padding:2.1rem 3rem 2.3rem var(--edge); }
.jx-colhead{ display:flex; justify-content:space-between; align-items:flex-start; gap:2rem; margin-bottom:1.9rem; }
.jx-label{ margin:0; display:flex; align-items:baseline; flex-wrap:wrap; column-gap:.55rem; line-height:1.15; }
.jx-label em{ font-family:'Metal','Fraunces',serif; font-style:normal; font-weight:400; font-size:calc(2.06rem - 6px); letter-spacing:.01em; color:#7A5B47; }
.jx-label .jx-bar{ font-family:var(--sans); font-weight:300; font-size:calc(1.37rem * .879); color:var(--ink-soft); opacity:.55; }
.jx-label b{ font-family:'Source Han Serif CN','Noto Serif SC','Noto Serif CJK SC',serif; font-weight:600; font-size:calc(1.28rem * .879); letter-spacing:.12em; color:#7A5B47; }
.jx-slg{ margin:.3rem 0 0; font-family:var(--sans); font-weight:300; font-size:.82rem; letter-spacing:.2em; color:var(--ink-soft); }
.jx-kw{ margin:.5rem 0 0; text-align:right; font-family:var(--sans); font-weight:300; font-size:.74rem; line-height:1.9; letter-spacing:.14em; color:var(--faint); }
.jx-item{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:2.5rem; color:inherit; }
.jx-item + .jx-item{ margin-top:1.9rem; }
.jx-item h3{ grid-column:1; margin:0 0 .6rem; word-break:keep-all; overflow-wrap:anywhere; font-family:'Source Han Serif CN','Noto Serif SC','Noto Serif CJK SC',serif; font-weight:600; font-size:calc(1.4rem + 2px); line-height:1.5; letter-spacing:.03em; color:var(--ink); }
.jx-item p{ grid-column:1; margin:0; font-family:var(--sans); font-weight:300; font-size:.88rem; line-height:1.85; color:var(--ink-soft); text-wrap:pretty; max-width:36em;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; height:calc(1.85em * 4); }
.jx-meta{ grid-column:2; grid-row:1 / span 2; text-align:right; padding-top:.15rem; white-space:nowrap; }
.jx-date{ display:block; font-family:var(--sans); font-weight:400; font-size:.9rem; letter-spacing:.06em;  font-variant-numeric:tabular-nums; color:var(--faint); }
.jx-author{ display:block; margin-top:.4rem; font-family:var(--sans); font-size:.76rem; letter-spacing:.14em; color:var(--faint); }
.jx-item:hover h3{ text-decoration:underline; text-underline-offset:5px; text-decoration-color:var(--wood); }
.jx-item:focus-visible{ outline:2px solid var(--accent); outline-offset:8px; }
.jx-aside{ grid-column:2; grid-row:3 / 8; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding:2.1rem 2rem 2.3rem 2rem; text-align:center; }
.jx-logo{ margin:0; width:calc(15rem * var(--ak, 1)); max-width:80%; }
.jx-logo img{ display:block; width:100%; height:auto; mix-blend-mode:multiply; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .jx-logo img{ filter:invert(1); mix-blend-mode:screen; } }
:root[data-theme="dark"] .jx-logo img{ filter:invert(1); mix-blend-mode:screen; }
.jx-slogan{ margin:0; font-family:'Source Han Serif CN','Noto Serif SC','Noto Serif CJK SC',serif; font-weight:500; font-size:calc(1.02rem * var(--ak, 1)); letter-spacing:.16em; text-indent:.16em; color:var(--ink); }
.jx-slogan i{ display:block; margin-top:calc(.55rem * var(--ak, 1)); font-family:var(--serif-en); font-weight:300; font-size:calc(.82rem * var(--ak, 1)); letter-spacing:.02em; text-indent:0; color:var(--ink-soft); }
.jx-foot{ grid-column:1; grid-row:9; display:flex; align-items:center; padding:2.6rem 3rem 2.8rem var(--edge); }
.jx-more{ font-family:var(--serif-zh); font-size:.95rem; letter-spacing:.1em; color:var(--ink); border-bottom:1px solid currentColor; padding-bottom:3px; }
.jx-more:hover{ color:var(--accent); }
.jx-mark{ grid-column:2; grid-row:9; margin:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2.6rem 1rem 2.8rem; text-align:center; }
@media (max-width:860px){
  #journal{ --edge:1.4rem; }
  .jx{ grid-template-columns:minmax(0,1fr); }
  .jx::before, .jx-side{ display:none; }
  .jx > *{ grid-column:1 !important; grid-row:auto !important; }
  .jx-head{ padding:var(--sp-5) var(--edge) 2.4rem; }
  .jx-aside{ display:none; }   /* the hero right above already shows this room on phones */
  .jx-group{ padding:2rem var(--edge) 2.2rem; }
  .jx-item{ column-gap:1.25rem; }
  .jx-colhead{ flex-direction:column; gap:.2rem; }
  .jx-kw{ text-align:left; margin:.7rem 0 0; }
  .jx-foot{ padding:2rem var(--edge) .6rem; justify-content:center; }
  .jx-mark{ padding:1rem 0 2.4rem; }
}
/* /Journal */

/* Stay in Touch — why-statement left, the letter on the typewriter right.
   Paper content is positioned in the artwork's own pixels via --u, so it stays locked to the sheet at any width. */
#connect{ padding-bottom:0; overflow:hidden; }
.cw{ --gap:clamp(2.5rem,6vw,6.5rem); container-type:inline-size;
  display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); column-gap:var(--gap); align-items:center;
  border-bottom:1px solid rgba(46,38,32,.16); }
/* Our Story: script "Our" / "Story" framing a justified text block (Ms Madi, subset to these 7 letters, embedded) */
@font-face{ font-family:'Story Script'; src:url(../assets/fonts/story-script-subset.woff2) format('woff2'); font-display:block; }
.why-col{ align-self:center; transform:translateY(var(--storyY, 0px)); }
.story-comp{ container-type:inline-size; max-width:440px; }
.story-in{ position:relative; padding:28cqw 0 37cqw 15cqw; }
.story-script{ position:absolute; z-index:0; font-family:'Story Script',cursive; font-weight:400; font-size:43cqw; line-height:1;
  color:#9A5B3F; white-space:nowrap; pointer-events:none; user-select:none; }
.story-script.our{ left:-3cqw; top:0; }
.story-script.story{ right:-16cqw; bottom:0; }
.story-head, .story-body{ position:relative; z-index:1; }
.story-head{ margin:0 0 1.1em; font-family:var(--serif-zh); font-weight:700; font-size:clamp(16px,4.6cqw,18.5px); line-height:1.75; letter-spacing:.06em; color:var(--ink); }
.story-head span{ display:block; }
.story-head .greet{ margin-left:45cqw; }
.story-body{ font-family:var(--serif-zh); font-size:clamp(14.5px,3.95cqw,16px); line-height:1.95; color:var(--ink);
  text-align:justify; text-justify:inter-character; }
.story-body p{ margin:0; }
.story-body p + p{ margin-top:.95em; }
.tw{ position:relative; width:100%; container-type:inline-size; --u:calc(100cqw / 887); clip-path:inset(-90px -90px 0 -90px); }
.tw > img{ display:block; width:100%; height:auto; }
/* the paper's own shadow is a separate layer (dark warm tone + alpha) so it adapts to the page: soft brown on cream, near-black on the dark page */
.tw > .tw-shadow{ position:absolute; left:0; top:0; pointer-events:none; opacity:.92; }
.tw > .tw-art{ position:relative; filter:drop-shadow(0 2px 9px rgba(70,46,26,.12)); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .tw > .tw-shadow{ opacity:1; filter:brightness(0); } :root:not([data-theme="light"]) .tw > .tw-art{ filter:none; } }
:root[data-theme="dark"] .tw > .tw-shadow{ opacity:1; filter:brightness(0); }
:root[data-theme="dark"] .tw > .tw-art{ filter:none; }
@media (min-resolution:2dppx){ .cw, #connect{ border-bottom-width:.5px !important; } }
@media (max-width:900px){
  #connect{ border-bottom:1px solid rgba(46,38,32,.16); }
  .cw{ grid-template-columns:minmax(0,1fr); row-gap:var(--sp-5); border-bottom:0; }
  .story-script.story{ right:-3cqw; }
  .story-comp{ margin-inline:auto; }
  .tw{ width:min(620px,137vw); left:50%; transform:translateX(calc(-50% - 0.68%)); }
}
.tw .abs{ position:absolute; left:calc(183 * var(--u)); width:calc(514 * var(--u)); margin:0; }
.tw-head{ top:calc(80 * var(--u)); font-family:var(--serif-zh); font-weight:900; font-size:calc(64 * var(--u)); line-height:1.2; letter-spacing:.04em; color:#2E2620; }
.tw-body{ top:calc(192 * var(--u)); font-family:var(--serif-zh); font-size:calc(27 * var(--u)); line-height:1.75; color:#5E5144; }
.tw-field-label{ top:calc(352 * var(--u)); font-family:var(--serif-zh); font-size:calc(26 * var(--u)); font-weight:700; color:#2E2620; letter-spacing:.06em; }
.tw-input{ top:calc(392 * var(--u)); height:calc(60 * var(--u)); padding:0 0 calc(8 * var(--u)); box-sizing:border-box;
  font-family:'Courier Prime',var(--serif-zh),monospace; font-size:calc(30 * var(--u)); color:#2E2620;
  background:transparent; border:0; border-bottom:calc(2.4 * var(--u)) dotted rgba(46,38,32,.5); border-radius:0; outline:none; }
.tw-input::placeholder{ color:rgba(107,93,79,.5); }
.tw-input:focus{ border-bottom-style:solid; border-bottom-color:#8B6F52; }
.tw-input[aria-invalid="true"]{ border-bottom-style:solid; border-bottom-color:#A3553D; }
/* wide typewriter key: the button is the cap, drawn in CSS so it can be any width */
.tw-key{ position:absolute; left:calc(183 * var(--u)); top:calc(494 * var(--u)); width:calc(514 * var(--u)); height:calc(94 * var(--u));
  padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent; border-radius:calc(47 * var(--u));
  background:linear-gradient(180deg,#FBF7EE 0%,#F1E8D8 100%); border:calc(2 * var(--u)) solid #D7C5A6;
  box-shadow:0 calc(8 * var(--u)) 0 #B99B72, 0 calc(14 * var(--u)) calc(16 * var(--u)) rgba(46,38,32,.26), inset 0 calc(3 * var(--u)) 0 rgba(255,255,255,.95), inset 0 calc(-5 * var(--u)) calc(8 * var(--u)) rgba(150,118,76,.14);
  transition:transform .12s ease, box-shadow .2s ease, filter .15s ease; }
.tw-key .legend{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; pointer-events:none;
  font-family:var(--sans); font-weight:500; font-size:calc(31 * var(--u)); line-height:1; color:#2E2620; letter-spacing:.5em; text-indent:.5em; }
.tw-key:hover{ box-shadow:0 calc(8 * var(--u)) 0 #B99B72, 0 calc(22 * var(--u)) calc(26 * var(--u)) calc(-2 * var(--u)) rgba(46,38,32,.42), inset 0 calc(3 * var(--u)) 0 rgba(255,255,255,.95), inset 0 calc(-5 * var(--u)) calc(8 * var(--u)) rgba(150,118,76,.14); }
.tw-key:hover .legend{ color:#9A5B3F; }
.tw-key .legend{ transition:color .2s ease; }
.tw-key:active, .tw-key.is-pressed{ transform:translateY(calc(8 * var(--u))); transition-duration:.06s; box-shadow:0 0 0 0 #B99B72, 0 0 0 0 rgba(46,38,32,0), inset 0 calc(3 * var(--u)) 0 rgba(255,255,255,.95), inset 0 calc(-5 * var(--u)) calc(8 * var(--u)) rgba(150,118,76,.14); }
.tw-key:focus-visible{ outline:2px solid #8B6F52; outline-offset:3px; }
.tw .tw-note{ top:calc(618 * var(--u)); min-height:calc(30 * var(--u)); font-family:var(--serif-zh); font-size:calc(20 * var(--u)); line-height:1.5; color:#6B5D4F; }
.tw-note.is-error{ color:#A3553D; }
.tw-note.is-done{ color:#2E2620; }
.tw-social-label{ top:calc(680 * var(--u)); font-family:var(--serif-zh); font-size:calc(23 * var(--u)); font-weight:700; color:#2E2620; letter-spacing:.06em; }
.tw-social{ top:calc(730 * var(--u)); display:grid; grid-template-columns:repeat(3,max-content); justify-content:start; gap:calc(18 * var(--u)) calc(34 * var(--u)); font-family:var(--serif-zh); font-size:calc(22.5 * var(--u)); }
.tw-social a{ display:inline-flex; align-items:center; gap:.36em; color:#2E2620; text-decoration:none; }
.tw-social a span{ text-decoration:underline; text-decoration-color:rgba(46,38,32,.25); text-underline-offset:.3em; }
.tw-social a:hover span{ text-decoration-color:#8B6F52; }
.tw-social a:focus-visible{ outline:2px solid #8B6F52; outline-offset:3px; border-radius:2px; }
.tw-social svg{ width:1.08em; height:1.08em; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; color:#7A5B47; }
@media (prefers-reduced-motion: reduce){ .tw-key{ transition:none; } }

/* Our Story cards — two profile cards fanned on the left (hover brings one forward), the founders' wish at the top right */
.story-grid{ display:grid; grid-template-columns:auto minmax(0, 1fr); column-gap:3rem; align-items:start; }
.stack{ --cw:288px; --off:182px; display:grid; width:calc(var(--cw) + var(--off)); padding:0 14px 26px 6px; }
.stack .pcard{ grid-area:1 / 1; width:var(--cw); transform-origin:50% 62%; cursor:pointer;
  transition:transform .6s cubic-bezier(.2,.8,.2,1), filter .5s ease; }
.stack .pcard .pcard-in{ transition:box-shadow .5s ease; }
/* 涵倪 sits on the left, 灵晞 to the right; whichever is in front is upright and full size, the other leans back behind it */
.stack .pc-a.is-front{ z-index:2; transform:translate(0, 0); }
.stack .pc-a.is-back { z-index:1; transform:translate(-8px, 22px) rotate(-6.5deg) scale(.88); }
.stack .pc-b.is-front{ z-index:2; transform:translate(var(--off), 0); }
.stack .pc-b.is-back { z-index:1; transform:translate(calc(var(--off) + 10px), 24px) rotate(7deg) scale(.88); }
.stack .pcard.is-back{ filter:saturate(.94) brightness(.985); }
.stack .pcard.is-back .pcard-in{ box-shadow:inset 0 0 0 1.5px var(--rim), 0 0 0 1px rgba(31,27,24,.05), 0 6px 18px -10px rgba(31,27,24,.16), 0 30px 50px -34px rgba(31,27,24,.22); }
.stack .pcard.is-front .pcard-in{ box-shadow:inset 0 0 0 1.5px var(--rim), 0 0 0 1px rgba(31,27,24,.055), 0 2px 5px rgba(31,27,24,.04), 0 18px 34px -16px rgba(31,27,24,.2), 0 60px 90px -44px rgba(31,27,24,.32); }
@media (min-width:1120px){ .stack{ margin-top:var(--align, 99px); } }
@media (prefers-reduced-motion: reduce){ .stack .pcard, .stack .pcard .pcard-in{ transition:none; } }
.pcard{ container-type:inline-size; --card:#FBFAF8; --rim:#FFFFFF; --name:#1F1B18; --bio:#7A7570;
  --btn:#EDECE9; --btn-top:#F2F1EF; --btn-h:#E7E5E1; --btn-hi:rgba(255,255,255,.95); --btn-rim:rgba(255,255,255,.75); --btn-ink:#161310; }
.pcard-in{ background:var(--card); border-radius:12cqw; padding:2.5cqw;
  box-shadow:inset 0 0 0 1.5px var(--rim), 0 0 0 1px rgba(31,27,24,.055), 0 2px 5px rgba(31,27,24,.03), 0 10px 26px -14px rgba(31,27,24,.1), 0 52px 80px -40px rgba(31,27,24,.26); }
.pcard-photo{ margin:0; aspect-ratio:494 / 523; border-radius:9.5cqw; overflow:hidden; background:#E6E2DC; }
.pcard-photo img{ display:block; width:100%; height:100%; object-fit:cover; }
.pcard-body{ padding:9.3cqw 7.2cqw 7cqw; }
.pcard-name{ margin:0; font-family:var(--sans); font-weight:500; font-size:max(18px, 7cqw); line-height:1.2; letter-spacing:.03em; color:var(--name); }
.pcard-bio{ margin:2.9cqw 0 0; min-height:calc(1.83em * 2); font-family:var(--sans); font-weight:400;
  font-size:max(13px, 4.5cqw); line-height:1.83; color:var(--bio); word-break:keep-all; overflow-wrap:anywhere; }
/* the reference's soft pill: flat light fill, a lit top edge, a faint shade inside the bottom edge, a bright rim just below */
.pcard-btn{ position:relative; isolation:isolate; display:flex; align-items:center; justify-content:center; gap:.5em; width:100%; height:max(42px, 15.5cqw); margin-top:7.2cqw;
  border-radius:999px; background:linear-gradient(var(--btn-top), var(--btn) 55%); font-family:var(--sans); font-weight:600; font-size:max(14px, 5.1cqw); letter-spacing:.03em; color:var(--btn-ink);
  box-shadow:inset 0 1px 1px var(--btn-hi), inset 0 -3px 6px -2px rgba(31,27,24,.045), 0 0 0 1px var(--btn-rim), 0 0 0 1.5px rgba(31,27,24,.035), 0 4px 12px -4px rgba(31,27,24,.09);
  transition:color .32s ease, box-shadow .32s ease, transform .15s ease; }
/* hover and press: the black fill fades in as its own layer (a gradient cannot be tweened into a flat colour), type takes the brand tone */
.pcard-btn::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:#9A5B3F; opacity:0; transition:opacity .32s cubic-bezier(.4,0,.2,1); }
.pcard-btn:hover{ color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 0 transparent, 0 0 0 1px #9A5B3F, 0 0 0 1.5px transparent, 0 8px 16px -7px rgba(154,91,63,.55); }
.pcard-btn:hover::before{ opacity:1; }
.pcard-btn:active{ color:#fff; transform:translateY(1px); transition-duration:.06s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 0 transparent, 0 0 0 1px #84492F, 0 0 0 1.5px transparent, 0 3px 8px -3px rgba(132,73,47,.45); }
.pcard-btn:active::before{ opacity:1; background:#84492F; }
.pcard-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.pcard-btn svg{ width:1.02em; height:1.02em; flex:none; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
/* the wish: serif, open leading, each wish begins at the margin and its continuation hangs two characters in */
.vow{ justify-self:end; margin:-.5em 0 0; text-align:right; font-family:'Noto Serif SC','Source Han Serif SC','Source Han Serif CN','Noto Serif CJK SC',serif; font-weight:400; font-size:16.5px; line-height:2.2; letter-spacing:.08em; color:var(--ink); font-feature-settings:'palt' 0; }
.vow p{ margin:0; }
.vow p + p{ margin-top:var(--vow2, 1.1em); }
.vow > p > span{ display:block; white-space:nowrap; }
/* decorative quotes: the opening mark hangs before the first word, the closing mark after the last, both outside the text edge */
.vow .qo, .vow .qc{ position:relative; }
.vow .qo::before, .vow .qc::after{ position:absolute; font-family:var(--serif-en); font-weight:400; font-size:4.4em; line-height:1; letter-spacing:0; color:#9A5B3F; opacity:.9; pointer-events:none; }
.vow .qo::before{ content:"“"; right:100%; top:0; transform:translate(-.06em, -.18em); }
.vow .qc::after{ content:"”"; left:100%; top:0; transform:translate(-.1em, -.18em); }
.vow b{ font-weight:700; color:#9A5B3F; }
.vow i.k{ font-style:normal; font-weight:600; }
@media (max-width:1119px){
  .story-grid{ grid-template-columns:minmax(0, 1fr); }
  .vow{ order:-1; margin:var(--sp-2) 0 var(--sp-5); }
}
@media (max-width:720px){ .vow{ padding-right:2.4em; } }
@media (max-width:660px){ .stack{ --cw:58vw; --off:25vw; justify-self:center; } }
@media (max-width:480px){
  .vow{ font-size:15px; letter-spacing:.03em; }
  .vow > p > span{ white-space:normal; }
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .pcard{ --card:#2A2521; --rim:rgba(255,255,255,.06); --name:#F2EEE9; --bio:#A39C94; --btn:#38332E; --btn-top:#3E3934; --btn-hi:rgba(255,255,255,.08); --btn-rim:rgba(255,255,255,.04); --btn-h:#423C36; --btn-ink:#F2EEE9; }
  :root:not([data-theme="light"]) .vow b, :root:not([data-theme="light"]) .vow .qo::before, :root:not([data-theme="light"]) .vow .qc::after{ color:#C99273; } }
:root[data-theme="dark"] .pcard{ --card:#2A2521; --rim:rgba(255,255,255,.06); --name:#F2EEE9; --bio:#A39C94; --btn:#38332E; --btn-top:#3E3934; --btn-hi:rgba(255,255,255,.08); --btn-rim:rgba(255,255,255,.04); --btn-h:#423C36; --btn-ink:#F2EEE9; }
:root[data-theme="dark"] .vow b, :root[data-theme="dark"] .vow .qo::before, :root[data-theme="dark"] .vow .qc::after{ color:#C99273; }
/* /Our Story cards */

/* Footer — hairline frame after the reference: statement, contact and social left of a vertical rule, link columns right, slim bar below */
footer{ position:relative; container-type:inline-size; --edge:max(2.5rem, calc((100cqw - 1040px) / 2)); --rule:rgba(46,38,32,.42); --hair:1px;
  --ft-pt:64px; --ft-mark:76px; --ft-gap:52px; background:var(--cream); color:var(--ink); border-top:var(--hair) solid var(--rule); }
@media (min-resolution:2dppx){ footer{ --rule:rgba(46,38,32,.62); --hair:.5px; } }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) footer{ --rule:rgba(243,236,223,.34); } }
:root[data-theme="dark"] footer{ --rule:rgba(243,236,223,.34); }
.ft-main{ display:grid; grid-template-columns:minmax(0, 55fr) minmax(0, 45fr); border-bottom:var(--hair) solid var(--rule); }
.ft-left{ padding:var(--ft-pt) 3rem 4rem var(--edge); border-right:var(--hair) solid var(--rule); }
.ft-mark{ display:block; width:max-content; line-height:0; }
.ft-lead{ margin-top:var(--ft-gap); font-family:var(--serif-zh); font-weight:400; font-size:clamp(17px, 1.45vw, 20px); line-height:1.7; letter-spacing:.1em; }
.ft-lead span{ display:block; }
.ft-lead .ft-en{ margin-top:.3em; font-family:var(--serif-en); font-style:italic; font-weight:300; font-size:.82em; letter-spacing:.02em; color:var(--ink-soft); }
.ft-mail{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; width:min(340px, 100%); margin-top:4rem; padding-bottom:.9rem;
  border-bottom:var(--hair) solid var(--rule); font-family:var(--sans); font-size:15.5px; letter-spacing:.02em; color:var(--ink-soft); transition:color .2s ease; }
.ft-mail svg{ width:16px; height:16px; flex:none; fill:none; stroke:var(--ink); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease; }
.ft-social{ display:flex; gap:12px; margin-top:5.5rem; }
.ft-social svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.ft-social a{ display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--ink); color:var(--cream);
  font-family:var(--serif-zh); font-size:14px; line-height:1; transition:transform .2s ease, background .2s ease; }
.ft-social a:hover{ transform:translateY(-2px); background:var(--hover); }
.ft-right{ padding:calc(var(--ft-pt) + var(--ft-mark) + var(--ft-gap) + 6px) var(--edge) 4rem clamp(2.5rem, 5vw, 4.5rem); }
.ft-top{ position:absolute; top:calc(var(--ft-pt) - 5px); right:var(--edge); display:inline-flex; align-items:center; gap:.6rem; height:38px; padding:0 1.05rem 0 1.25rem;
  border-radius:999px; background:var(--ink); color:var(--cream); font-family:var(--sans); font-size:13px; letter-spacing:.06em; transition:opacity .2s ease; }
.ft-top:hover{ opacity:.85; }
.ft-top svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ft-cols{ display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:2.6rem 2rem; }
.ft-cols h4{ margin:0 0 1rem; font-family:var(--sans); font-weight:500; font-size:14px; letter-spacing:.03em; color:var(--ink); }
.ft-cols a{ display:block; width:fit-content; font-family:var(--sans); font-size:14px; line-height:1.95; color:var(--ink-soft); transition:color .2s ease; }
.ft-cols a:hover{ color:var(--ink); }
.ft-bar{ display:flex; justify-content:space-between; align-items:center; gap:1.5rem; padding:1.7rem var(--edge) calc(1.7rem + env(safe-area-inset-bottom,0px));
  font-family:var(--sans); font-size:12.5px; letter-spacing:.03em; color:var(--ink-soft); }
.ft-legal{ display:flex; gap:1.6rem; }
.ft-legal a:hover{ color:var(--ink); }
footer a:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
@media (max-width:860px){
  footer{ --ft-pt:52px; --ft-gap:56px; }
  .ft-main{ grid-template-columns:minmax(0, 1fr); }
  .ft-left{ padding:var(--ft-pt) var(--edge) 3.5rem; border-right:0; }
  .ft-right{ padding:2.6rem var(--edge) 3.2rem; border-top:var(--hair) solid var(--rule); }
  .ft-social{ margin-top:3.5rem; }
}
@media (max-width:720px){ footer{ --edge:1.4rem; } .ft-lead{ font-size:21px; } }
@media (max-width:480px){ .ft-cols{ grid-template-columns:repeat(2, minmax(0, 1fr)); } .ft-bar{ flex-direction:column; align-items:flex-start; gap:.6rem; } }
/* /Footer */

/* Hover — every text link / button label turns the brand tone */
.nav-links a, .lang-toggle span{ transition:color .2s ease, opacity .2s ease; }
.nav-links a:hover{ color:var(--hover); opacity:1; }
nav:not(.solid) .nav-links a:hover, nav:not(.solid) .lang-toggle span:hover{ color:var(--hover-inv); }
.lang-toggle span:hover{ color:var(--hover); opacity:1; }
.jx-item h3{ transition:color .2s ease; }
.jx-item:hover h3{ color:var(--hover); text-decoration-color:var(--hover); }
.jx-more{ transition:color .2s ease; }
.jx-more:hover{ color:var(--hover); }
.ft-cols a:hover, .ft-legal a:hover{ color:var(--hover); }
.ft-legal a{ transition:color .2s ease; }
.ft-top{ transition:color .2s ease, opacity .2s ease; }
.ft-top:hover{ opacity:1; color:var(--hover-inv); }
.tw-social a span{ transition:color .2s ease, text-decoration-color .2s ease; }
.tw-social a:hover span{ color:#9A5B3F; text-decoration-color:#9A5B3F; }
.tw-social a svg{ transition:color .2s ease; }
.tw-social a:hover svg{ color:#9A5B3F; }
#hero .pl-ep{ transition:background .2s ease, color .2s ease; }
#hero .pl-ep:hover{ color:#9A5B3F; }

.ft-mail{ position:relative; }
.ft-mail input{ flex:1; min-width:0; border:0; outline:0; background:transparent; padding:0; font:inherit; color:var(--ink); letter-spacing:.02em; }
.ft-mail input::placeholder{ color:rgba(107,93,79,.55); opacity:1; }
.ft-mail:focus-within{ border-bottom-color:var(--hover); }
.ft-mail button{ flex:none; display:grid; place-items:center; width:30px; height:30px; margin:-6px -6px -6px 0; border:0; border-radius:50%; background:transparent; cursor:pointer; }
.ft-mail button svg{ stroke:var(--ink); transition:transform .2s ease, stroke .2s ease; }
.ft-mail button:hover svg, .ft-mail button:focus-visible svg{ stroke:var(--hover); transform:translateX(3px); }
.ft-mail button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.ft-note{ position:absolute; left:0; top:calc(100% + 9px); margin:0; font-size:12.5px; letter-spacing:.04em; color:var(--hover); }
.ft-note:empty{ display:none; }
.ft-mail.is-err{ border-bottom-color:var(--hover); }
.ft-social a{ position:relative; }
.ft-social a::after{ content:attr(data-name); position:absolute; left:50%; top:calc(100% + 9px); transform:translate(-50%,-3px); white-space:nowrap; font-family:var(--sans); font-size:12.5px; line-height:1; letter-spacing:.06em; color:var(--hover); opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; }
.ft-social a:hover::after, .ft-social a:focus-visible::after{ opacity:1; transform:translate(-50%,0); }

/* Scroll reveals (js/reveal.js). The hidden starting state applies only while the script runs the page (html.rv is
   set in <head> when motion is welcome); each element is uncovered (.rv-in) as its turn comes, and is left exactly as
   the static page when its animation ends. */
html.rv #journal .jx-rule:not(.rv-in){ clip-path:inset(0 100% 0 0); }
html.rv #journal .jx:not(.rv-vl)::before{ clip-path:inset(0 0 100% 0); }
#journal .jx.rv-vl::before{ transition:clip-path 2.2s cubic-bezier(.45,.05,.25,1); }
html.rv :is(#journal .jx-colhead, #journal .jx-item, #journal .jx-logo img, #journal .jx-foot, #journal .jx-mark,
  #connect .story-script, #connect .sb-lead, #connect .sb-who p, #connect .sb-meet, #connect .sb-quote,
  .tw > .tw-art, .tw > .tw-shadow, #twHead, .tw-body, .tw-field-label, .tw-input, .tw-key, .tw-social-label, .tw-social a,
  #story .vow p, #story .pcard,
  footer .ft-mark, footer .ft-lead span, footer .ft-mail, footer .ft-social, footer .ft-cols > div, footer .ft-bar, footer .ft-top):not(.rv-in){ opacity:0 !important; }
span.rv-l{ display:block !important; }
rv-c{ opacity:0; transition:opacity .07s linear; }
rv-c.on{ opacity:1; }
/* the typewriter's cursor (a short underscore): takes no room in the line, blinks while it waits, holds steady while it types */
rv-caret{ display:inline-block; position:relative; width:0; height:1em; }
rv-caret::after{ content:""; position:absolute; left:.06em; bottom:-.14em; width:.6em; height:max(2px, .085em); background:currentColor; border-radius:1px;
  animation:rv-blink 1.05s steps(1, end) infinite; }
rv-caret.typing::after{ animation:none; }
rv-caret.out::after{ animation:none; opacity:0; transition:opacity .5s ease; }
@keyframes rv-blink{ 0%{ opacity:1; } 50%{ opacity:0; } }
/* the first screen comes together: the two cats, then the room and the view, the curtain, the player on the wall */
/* until the room is in, the first screen is the page's own colour */
html.rv #hero:not(.in-done){ background:var(--cream); }
html.rv #hero.in-2:not(.in-done){ background:#B9A8BA; transition:background 1.5s cubic-bezier(.4,0,.2,1); }
html.rv #hero:not(.in-done) :is(.ly-bg, .ly-curtain, .ly-cat-b, .ly-cat-w, .pg){ opacity:0; }
html.rv #hero:not(.in-done) .wplane > img.wext{ filter:opacity(0); }
html.rv #hero:not(.in-done) :is(.ly-cat-b, .ly-cat-w){ translate:0 10px; }
html.rv #hero:not(.in-done) .pg{ translate:0 12px; }
html.rv #hero.in-1:not(.in-done) :is(.ly-cat-b, .ly-cat-w){ opacity:1; translate:0 0;
  transition:opacity 1.1s cubic-bezier(.4,0,.2,1), translate 1.4s cubic-bezier(.22,.61,.36,1); }
html.rv #hero.in-2:not(.in-done) .ly-bg{ opacity:1; transition:opacity 1.5s cubic-bezier(.4,0,.2,1); }
html.rv #hero.in-2:not(.in-done) .wplane > img.wext{ filter:opacity(1); transition:filter 1.5s cubic-bezier(.4,0,.2,1); }
html.rv #hero.in-2:not(.in-done) .ly-curtain{ opacity:1; transition:opacity 1.5s cubic-bezier(.4,0,.2,1); }
html.rv #hero:not(.in-done) .pg{ will-change:opacity, translate; }
html.rv #hero.in-4:not(.in-done) .pg{ opacity:1; translate:0 0;
  transition:opacity 1.7s cubic-bezier(.33,0,.15,1), translate 2.1s cubic-bezier(.16,.84,.3,1); }

/* scroll-stepped sections that hold still while the reader scrolls (js/reveal.js): the block is pinned mid-screen and
   a runway after it supplies the scroll; sticky needs every ancestor to be non-scrolling, so the clip replaces hidden */
html.rv #connect{ overflow:clip; }
html.rv .rv-pin{ position:sticky; top:var(--rv-top, 0px); }
.rv-runway{ display:block; height:0; pointer-events:none; }
/* on shorter laptops a held block needs the whole screen: the navigation slides up out of the way meanwhile */
html.rv nav{ transition:background .4s ease, color .4s ease, box-shadow .4s ease, translate .5s cubic-bezier(.4,0,.2,1), opacity 1.2s cubic-bezier(.4,0,.2,1); }
/* the navigation (light type, made for the picture) waits for the room before it shows on the first screen */
html.rv:has(#hero:not(.in-2):not(.in-4):not(.in-done)) nav:not(.solid){ opacity:0; }
html.rv nav.rv-tuck{ translate:0 -100%; }

/* ---------- subscribed: a card rises from the bottom (every subscribe form on the site; Journal 结构稿 v6) ---------- */
.sheet{ --sheet:#FBF8F2; --sheet-shadow:rgba(46,38,32,.18); --sheet-rule:rgba(46,38,32,.42); --sheet-hair:1px;
  position:fixed; z-index:45; left:50%; bottom:calc(16px + env(safe-area-inset-bottom,0px)); width:min(460px, calc(100% - 32px));
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:1.1rem; padding:1.15rem 1.15rem 1.15rem 1.35rem;
  border-radius:18px; background:var(--sheet); color:var(--ink); box-shadow:0 18px 50px var(--sheet-shadow), 0 0 0 var(--sheet-hair) var(--sheet-rule);
  translate:-50% calc(100% + 40px); transition:translate .55s cubic-bezier(.2,.85,.25,1); }
.sheet[hidden]{ display:none; }
.sheet.up{ translate:-50% 0; }
body.has-mini .sheet{ bottom:calc(84px + env(safe-area-inset-bottom,0px)); }
@media (min-resolution:2dppx){ .sheet{ --sheet-rule:rgba(46,38,32,.62); --sheet-hair:.5px; } }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .sheet{ --sheet:#2A231C; --sheet-shadow:rgba(0,0,0,.5); --sheet-rule:rgba(243,236,223,.3); } }
:root[data-theme="dark"] .sheet{ --sheet:#2A231C; --sheet-shadow:rgba(0,0,0,.5); --sheet-rule:rgba(243,236,223,.3); }
.sheet-mark{ --logo-h:22px; color:var(--ink); }
.sheet-text b{ display:block; font-family:'Source Han Serif CN','Noto Serif SC','Noto Serif CJK SC',serif; font-weight:600; font-size:1rem; letter-spacing:.1em; }
.sheet-text span{ display:block; margin-top:.2rem; font-family:var(--sans); font-weight:300; font-size:.8rem; line-height:1.7; color:var(--ink-soft); overflow-wrap:anywhere; }
.sheet-ok{ border:0; background:var(--ink); color:var(--cream); font-family:var(--sans); font-size:.8rem; letter-spacing:.1em; padding:.6rem 1rem; border-radius:99px; cursor:pointer; }
.sheet-ok:focus-visible{ outline:2px solid var(--hover); outline-offset:3px; }
@media (max-width:480px){ .sheet{ grid-template-columns:minmax(0,1fr) auto; } .sheet-mark{ display:none; } }
@media (prefers-reduced-motion: reduce){ .sheet{ transition:none; } }

.lang-toggle{ display:none; }
@media (min-width:721px){ .nav-links{ position:absolute; left:50%; translate:-50% 0; } }