/* ==========================================================
   THE IMPERIAL CABINET · 多宝格 — the collection shown the way the Qing court kept its Ru ware:
   a zitan curio cabinet against a vermilion palace wall, each piece in its own silk-lined niche.
   First-screen study.
   ========================================================== */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(../assets/fonts/cormorant.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 700; font-display: swap; src: url(../assets/fonts/cormorant-italic.woff2) format('woff2'); }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 300 400; font-display: swap; src: url(../assets/fonts/dm-mono-400.woff2) format('woff2'); }
@font-face { font-family: 'Ma Shan Zheng'; font-style: normal; font-weight: 400; font-display: block; src: url(../assets/fonts/seal-tian.woff2) format('woff2'); unicode-range: U+5929; }

:root {
  /* the scholar's study: the story's paper, a huanghuali cabinet, linen niches, ink type */
  --wall: #ece6dc; --wall-deep: #e2d9c9;
  --zitan: #7a4a2a; --zitan-hi: #9b6640; --zitan-lo: #55301a;
  --gold: #8a6a2c; --gold-deep: #a88457; --gold-soft: rgba(27,23,18,.22);
  --silk: #efe9dc; --silk-deep: #e1d8c6;
  --cream: #1b1712; --cream-dim: #6b5f52;
  --serif: 'Cormorant Garamond', 'Noto Serif SC', 'Songti SC', serif;
  --cn: 'Noto Serif SC', 'Songti SC', 'STSong', serif;
  --mono: 'DM Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--wall-deep); color: var(--cream); font-family: var(--serif); overflow: hidden; }
body[data-mode="focus"] { overflow-y: auto; }
button { font: inherit; color: inherit; }

/* ---------- the palace wall ---------- */
.palace { position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 50% 42%, rgba(255,190,120,.16), transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 40%, var(--wall) 0%, #7a2117 55%, var(--wall-deep) 100%); }
/* lime plaster grain on the red wall */
.palace::before { content: ''; position: absolute; inset: 0; opacity: .22; mix-blend-mode: multiply; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .08 0 0 0 0 .05 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* a gold meander frieze along the top, like the painted beams of the hall */
.frieze { position: absolute; left: 0; right: 0; top: 84px; height: 22px; opacity: .9;
  background:
    linear-gradient(var(--gold-deep), var(--gold-deep)) top / 100% 1px no-repeat,
    linear-gradient(var(--gold-deep), var(--gold-deep)) bottom / 100% 1px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='22' viewBox='0 0 44 22'%3E%3Cpath d='M2 18V4h16v10H8V8h6' fill='none' stroke='%23c9a35a' stroke-width='1.6'/%3E%3Cpath d='M24 4v14h16V8H30v6h6' fill='none' stroke='%23c9a35a' stroke-width='1.6'/%3E%3C/svg%3E") center / 44px 22px repeat-x;
  background-color: rgba(60,14,9,.55); }

/* ---------- header (the story's crown, gold on red) ---------- */
.crown { position: fixed; z-index: 40; top: 0; left: 0; right: 0; height: 84px; padding: 0 4.6vw; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  background: linear-gradient(180deg, rgba(40,8,5,.55), rgba(40,8,5,0)); }
.brand { display: flex; align-items: center; gap: 12px; color: var(--cream); text-decoration: none; font: 500 19px var(--serif); letter-spacing: .14em; }
.seal { display: grid; place-items: center; width: 34px; height: 34px; background: #b8322a; color: #f6e9d8; font: 22px 'Ma Shan Zheng', var(--cn); border-radius: 3px; box-shadow: inset 0 0 0 2px rgba(246,233,216,.35), 0 0 0 1px var(--gold-soft); }
.brand em { display: block; font: 10px var(--cn); font-style: normal; letter-spacing: .6em; color: var(--cream-dim); }
.crown__nav { justify-self: end; display: flex; align-items: center; gap: 26px; }
.crown__nav a { color: var(--cream); text-decoration: none; font: 13px var(--cn); letter-spacing: .2em; }
.lang { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--gold-soft); border-radius: 100px; }
.lang button { width: 30px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; border-radius: 100px; font: 10px var(--mono); color: var(--cream-dim); transition: background .4s, color .4s; }
.lang button[data-lang="zh"] { font: 12px var(--cn); }
.lang button[aria-pressed="true"] { background: var(--gold); color: #3a120c; }

/* ---------- the cabinet ---------- */
.cabinet { position: absolute; left: 50%; top: 128px; width: min(1180px, 84vw); height: min(560px, 60vh); transform: translateX(-50%);
  padding: 14px; background: linear-gradient(180deg, var(--zitan-hi), var(--zitan) 30%, var(--zitan-lo));
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 2px 0 1px var(--gold-deep), 0 40px 80px -20px rgba(30,5,2,.85), 0 0 120px rgba(255,190,120,.12); }
/* carved cornice on top and plinth below */
.cabinet::before { content: ''; position: absolute; left: -22px; right: -22px; top: -26px; height: 26px;
  background: linear-gradient(180deg, var(--zitan-hi), var(--zitan)); clip-path: polygon(2% 0, 98% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 -2px 0 var(--gold-deep); }
.cabinet::after { content: ''; position: absolute; left: -16px; right: -16px; bottom: -34px; height: 34px;
  background:
    radial-gradient(ellipse 4% 70% at 6% 100%, var(--wall-deep) 98%, transparent) ,
    radial-gradient(ellipse 4% 70% at 94% 100%, var(--wall-deep) 98%, transparent),
    linear-gradient(180deg, var(--zitan), var(--zitan-lo));
  box-shadow: inset 0 2px 0 var(--gold-deep); }
.grid { position: relative; height: 100%; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(6, 1fr); gap: 10px; }

/* each niche: silk lining, carved frame, a pool of light on the piece */
.niche { margin: 0; border: 0; font: inherit; cursor: pointer; min-width: 0; min-height: 0; position: relative; overflow: hidden; display: grid; place-items: end center; padding: 9% 8% 10%;
  background:
    radial-gradient(ellipse 60% 70% at 50% 35%, rgba(255,232,170,.45), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='40' viewBox='0 0 60 40'%3E%3Cpath d='M10 24c0-6 8-6 8 0s-8 6-8 0m4-4c4-8 14-8 16 0M40 14c0-6 8-6 8 0s-8 6-8 0m-4 4c-4 6-12 6-14 0' fill='none' stroke='%23a07a2e' stroke-width='1' opacity='.55'/%3E%3C/svg%3E") 0 0 / 60px 40px,
    linear-gradient(180deg, var(--silk) 0%, var(--silk-deep) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,220,150,.35), inset 0 14px 18px -8px rgba(30,8,4,.75), inset 0 -6px 10px -6px rgba(30,8,4,.5), 0 0 0 4px var(--zitan-hi), 0 0 0 5px rgba(0,0,0,.5); }
/* the ledge each piece stands on */
.niche::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 9%; min-height: 8px;
  background: linear-gradient(180deg, var(--zitan-hi), var(--zitan-lo)); box-shadow: 0 -1px 0 var(--gold-deep); }
.niche img { position: relative; z-index: 1; max-width: 100%; max-height: 100%; min-height: 0; margin-bottom: 4%; object-fit: contain; object-position: bottom;
  filter: drop-shadow(0 10px 8px rgba(50,20,5,.45)); transition: transform .8s cubic-bezier(.16,1,.3,1), filter .8s; }
.niche:hover img { transform: translateY(-3%) scale(1.04); filter: drop-shadow(0 16px 12px rgba(50,20,5,.5)) brightness(1.05); }
/* the piece in focus: brighter light, a gold rim on its niche */
.niche.is-on { box-shadow: inset 0 0 0 1px rgba(255,230,170,.7), inset 0 14px 18px -8px rgba(30,8,4,.6), 0 0 0 4px var(--zitan-hi), 0 0 0 5px var(--gold), 0 0 40px rgba(255,210,140,.35); }
.niche.is-on::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 60% at 50% 30%, rgba(255,246,215,.55), transparent 70%); }

/* decorative niches: a lattice panel and a gold plaque */
.niche--lattice { background: var(--zitan); padding: 0;
  background-image: repeating-linear-gradient(0deg, transparent 0 16px, var(--gold-deep) 16px 17px), repeating-linear-gradient(90deg, transparent 0 16px, var(--gold-deep) 16px 17px);
  opacity: .9; }
.niche--lattice::after { display: none; }
.niche--plaque { place-items: center; background: linear-gradient(180deg, #3a1a14, var(--zitan)); }
.niche--plaque::after { display: none; }
.plaque { text-align: center; color: var(--gold); }
.plaque b { display: block; font: 900 clamp(26px, 2.6vw, 40px) var(--cn); letter-spacing: .3em; margin-right: -.3em; }
.plaque i { display: block; margin-top: 8px; font: italic 13px var(--serif); letter-spacing: .2em; color: var(--cream-dim); }

/* positions (12 × 6) */
.n-ruyi { grid-area: 1 / 1 / 3 / 4; } .n-cloud { grid-area: 1 / 4 / 3 / 6; } .n-plum { grid-area: 1 / 6 / 7 / 8; } .n-lotus { grid-area: 1 / 8 / 3 / 10; } .n-eleph { grid-area: 1 / 10 / 3 / 13; }
.n-round { grid-area: 3 / 1 / 5 / 3; } .n-petal { grid-area: 3 / 3 / 5 / 6; } .n-dragon { grid-area: 3 / 8 / 7 / 10; } .n-qilin { grid-area: 3 / 10 / 5 / 13; }
.n-paired { grid-area: 5 / 1 / 7 / 4; } .n-lattice { grid-area: 5 / 4 / 7 / 6; } .n-plaque { grid-area: 5 / 10 / 7 / 13; }
.n-plum { padding: 6% 10% 7%; } .n-plum img, .n-dragon img { height: 88%; } .n-dragon { padding: 8% 10%; }

/* ---------- the label beneath ---------- */
.label { position: absolute; left: 50%; bottom: 4.5vh; width: min(1180px, 84vw); transform: translateX(-50%); display: grid; grid-template-columns: 1fr 320px auto; align-items: end; gap: 3vw; }
.label .k { font: 10px var(--mono); letter-spacing: .26em; color: var(--gold); margin: 0 0 10px; }
.label h1 { margin: 0; font: 900 clamp(36px, 3.8vw, 58px)/1.05 var(--cn); letter-spacing: .06em; color: var(--cream); text-shadow: 0 2px 20px rgba(40,6,3,.6); }
.label h1 em { display: block; margin-top: 8px; font: italic 400 20px var(--serif); letter-spacing: .02em; color: var(--cream-dim); }
.label p { margin: 0; font: 14px/1.9 var(--cn); color: var(--cream-dim); }
.arrows { display: flex; gap: 10px; }
.arrows button { width: 44px; height: 44px; padding: 0; border: 1px solid var(--gold-soft); border-radius: 50%; background: rgba(60,12,7,.25); cursor: pointer; display: grid; place-items: center; color: var(--gold); font-size: 16px; transition: background .3s, border-color .3s; }
.arrows button:hover { background: rgba(216,180,104,.18); border-color: var(--gold); }

/* ---------- phones: the cabinet stands upright ---------- */
@media (max-width: 750px) {
  .crown { height: 68px; padding: 0 16px; grid-template-columns: 1fr auto; }
  .brand em { display: none; }
  .crown__nav { gap: 12px; } .crown__nav a.story { display: none; } .crown__nav a { font-size: 12px; letter-spacing: .1em; }
  .chips { position: absolute; top: 96px; left: 0; right: 0; padding: 0 16px; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
  .chips button { flex: 0 0 auto; white-space: nowrap; min-height: 28px; padding: 0 10px; }
  html[lang="en"] .chips button { letter-spacing: .08em; }
  .frieze { top: 68px; height: 16px; background-size: 100% 1px, 100% 1px, 32px 16px; }
  .cabinet { top: 150px; width: calc(100vw - 32px); height: 50svh; padding: 8px; }
  .grid { grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(8, 1fr); gap: 6px; }
  .n-plum { grid-area: 1 / 3 / 6 / 5; } .n-ruyi { grid-area: 1 / 1 / 3 / 3; } .n-eleph { grid-area: 1 / 5 / 3 / 7; }
  .n-round { grid-area: 3 / 1 / 5 / 3; } .n-lotus { grid-area: 3 / 5 / 5 / 7; }
  .n-petal { grid-area: 5 / 1 / 7 / 3; } .n-qilin { grid-area: 5 / 5 / 7 / 7; } .n-dragon { grid-area: 6 / 3 / 9 / 5; }
  .n-cloud { grid-area: 7 / 1 / 9 / 3; } .n-paired { grid-area: 7 / 5 / 9 / 7; }
  .n-lattice, .n-plaque { display: none; }
  .label { bottom: 22px; width: calc(100vw - 32px); grid-template-columns: 1fr auto; }
  .label p { display: none; }
  .label h1 { font-size: 34px; }
}

/* ---------- category chips (in the crown) ---------- */
.chips { display: flex; gap: 8px; }
.chips button { min-height: 30px; padding: 0 12px; border: 1px solid var(--gold-soft); border-radius: 100px; background: rgba(60,12,7,.3); color: var(--cream-dim); cursor: pointer;
  font: 12px var(--cn); letter-spacing: .14em; transition: background .3s, color .3s, border-color .3s; }
html[lang="en"] .chips button { font: 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.chips button span { font: 10px var(--mono); color: var(--gold); margin-left: 4px; }
.chips button:hover, .chips button[aria-pressed="true"] { border-color: var(--gold); background: rgba(216,180,104,.2); color: var(--cream); }

/* ---------- niches: chosen, filtered out ---------- */
.niche { transition: opacity .6s ease, filter .6s ease, box-shadow .6s ease; }
.niche:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.niche.is-off { opacity: .32; filter: grayscale(.7) brightness(.7); cursor: default; }
.niche.is-off img { transform: none !important; }
.niche.is-on img { transform: translateY(-2%) scale(1.03); }
.label.swap > * { animation: labelIn .7s cubic-bezier(.16,1,.3,1) both; }
.label.swap > *:nth-child(2) { animation-delay: .06s; } .label.swap > *:nth-child(3) { animation-delay: .1s; }
@keyframes labelIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- opening a piece: the view moves into its niche ---------- */
.cabinet { transform-origin: 0 0; transform: translateX(-50%) translate(0px, 0px) scale(1); transition: transform .95s cubic-bezier(.7,0,.2,1); will-change: transform; }
.frieze, .label { transition: opacity .5s ease; }
body[data-mode="focus"] .frieze, body[data-mode="focus"] .chips { opacity: 0; pointer-events: none; }
body[data-mode="focus"] .niche:not(.is-on) { opacity: .18; filter: brightness(.6); }
body[data-mode="focus"] .niche.is-on { cursor: default; }
.focus-ui { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s ease .45s; }
body[data-mode="focus"] .focus-ui { opacity: 1; }
body[data-mode="focus"] .focus-ui > * { pointer-events: auto; }
.back { position: absolute; top: 108px; left: 4.6vw; height: 50px; padding: 0 24px; border: 0; border-radius: 2px; cursor: pointer;
  background: linear-gradient(180deg, #e8c77c, #c99a45); color: #4a120b; box-shadow: 0 0 0 1px #8a6522, 0 10px 24px -8px rgba(40,6,3,.8);
  font: 600 15px var(--cn); letter-spacing: .18em; transition: transform .25s, box-shadow .25s; }
.back:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px #8a6522, 0 14px 28px -8px rgba(40,6,3,.85); }
.close-x { position: absolute; top: 108px; right: 4.6vw; width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--gold); background: rgba(60,12,7,.55); color: var(--gold);
  font: 300 30px/1 var(--serif); cursor: pointer; display: grid; place-items: center; transition: background .25s, transform .25s; }
.close-x:hover { background: rgba(216,180,104,.22); transform: rotate(90deg); }
html[lang="en"] .back { font: 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.focus-cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer;
  font: 12px var(--cn); letter-spacing: .3em; color: var(--cream); }
html[lang="en"] .focus-cue { font: 10px var(--mono); letter-spacing: .22em; text-transform: uppercase; }
.focus-cue i { width: 1px; height: 36px; background: linear-gradient(var(--gold), transparent); animation: cueDrop 1.8s ease-in-out infinite; }
@keyframes cueDrop { 0%, 100% { transform: scaleY(.5); transform-origin: top; } 50% { transform: scaleY(1); } }

/* ---------- the object's archive: warm paper below the hall ---------- */
.archive { display: none; position: relative; z-index: 2; padding: clamp(80px, 11vw, 160px) 8vw; background: #f1ead9; color: #1b1712;
  grid-template-columns: minmax(240px, .88fr) minmax(300px, 1.1fr); gap: clamp(36px, 7vw, 110px); align-items: start;
  border-top: 3px solid var(--gold-deep); box-shadow: inset 0 6px 0 #8e2a1d; }
body[data-mode="focus"] .archive { display: grid; }
.story-kicker, .story-photo-label { margin: 0 0 15px; color: #8a6a2c; font: 10px var(--mono); letter-spacing: .22em; text-transform: uppercase; }
html[lang="zh-CN"] .story-kicker { font: 12px var(--cn); letter-spacing: .3em; }
.story-intro h2 { margin: 0; color: #1b1712; font: 400 clamp(56px, 7vw, 108px)/.95 var(--serif); }
html[lang="zh-CN"] .story-intro h2 { font: 900 clamp(46px, 5.6vw, 86px)/1.1 var(--cn); letter-spacing: .04em; }
.story-subtitle { margin: 14px 0 0; font: italic 20px var(--serif); color: #6b5f52; }
.story-deck { margin: 40px 0 30px; color: #3a3129; font: 18px/1.75 var(--serif); }
html[lang="zh-CN"] .story-deck { font: 16px/2 var(--cn); }
.story-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 26px; margin: 0; }
.story-specs div { padding-top: 10px; border-top: 1px solid rgba(160,120,50,.4); }
.story-specs dt { color: #8a6a2c; font: 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; }
html[lang="zh-CN"] .story-specs dt { font: 12px var(--cn); letter-spacing: .2em; }
.story-specs dd { margin: 6px 0 0; color: #1b1712; font: 16px var(--serif); }
html[lang="zh-CN"] .story-specs dd { font: 14px var(--cn); }
.story-image-wrap { position: relative; }
.story-material { grid-column: 1 / -1; display: grid; grid-template-columns: .88fr 1.1fr; gap: clamp(36px, 7vw, 110px); padding-top: clamp(60px, 9vw, 130px); border-top: 1px solid rgba(160,120,50,.4); }
.story-material > p:last-of-type { margin: 0; max-width: 560px; color: #3a3129; font: 18px/1.8 var(--serif); }
html[lang="zh-CN"] .story-material > p:last-of-type { font: 15px/2 var(--cn); }
.story-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 12px; }
.story-return { min-height: 44px; padding: 0 18px; border: 1px solid rgba(27,23,18,.4); background: transparent; color: #1b1712; cursor: pointer; font: 13px var(--cn); letter-spacing: .14em; }
html[lang="en"] .story-return, html[lang="en"] .story-shop-link { font: 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.story-return:hover { background: #1b1712; color: #f1ead9; }
.story-shop-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; background: #8e2a1d; color: #f6ead3; text-decoration: none; font: 13px var(--cn); letter-spacing: .14em; box-shadow: inset 0 0 0 1px var(--gold-deep); }
.story-shop-link:hover { background: #a8301f; }
/* the colleague's gallery, in gold and ink */
.listing-gallery, .listing-card h3 { color: #1b1712; }
.listing-heading { border-top-color: rgba(160,120,50,.4); }
.listing-heading p, .listing-card figcaption, .story-image-wrap .story-photo-label { color: #8a6a2c; }
.listing-thumbs button { color: #6b5f52; }
.listing-thumbs button[aria-pressed=true] { border-color: #8a6a2c; }

/* reading the archive: the crown turns to paper */
body.viewing-story .crown { background: rgba(241,234,217,.95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(160,120,50,.3); }
body.viewing-story .brand, body.viewing-story .crown__nav a { color: #1b1712; }
body.viewing-story .brand em { color: #6b5f52; }
body.viewing-story .lang { border-color: rgba(27,23,18,.25); }
body.viewing-story .lang button { color: #6b5f52; }
body.viewing-story .lang button[aria-pressed="true"] { background: #1b1712; color: #f1ead9; }

@media (max-width: 750px) {
  .label { bottom: 18px; }
  .label .k { font-size: 9px; letter-spacing: .14em; }
  .back { top: 84px; left: 16px; }
  .archive { grid-template-columns: 1fr; padding: 70px 20px; }
  .story-material { grid-template-columns: 1fr; }
  .story-actions { grid-column: 1; }
}


/* ---------- each niche wears its name on a small gilt plaque ---------- */
.niche { padding-bottom: 16%; }
.tag { position: absolute; z-index: 2; left: 50%; bottom: 3px; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  padding: 2px 10px 3px; background: linear-gradient(180deg, #3d1e17, #241009); border: 1px solid var(--gold-deep); box-shadow: 0 1px 0 rgba(255,220,150,.15);
  color: var(--gold); font: 12px var(--cn); letter-spacing: .22em; transition: opacity .4s, color .3s, border-color .3s; }
html[lang="en"] .tag { font: italic 13px var(--serif); letter-spacing: .04em; }
.niche:not(.is-off):hover, .niche:not(.is-off):focus-visible { box-shadow: inset 0 0 0 1px rgba(255,230,170,.7), inset 0 14px 18px -8px rgba(30,8,4,.6), 0 0 0 4px var(--zitan-hi), 0 0 0 5px var(--gold), 0 0 34px rgba(255,210,140,.3); }
.niche:not(.is-off):hover .tag { color: #fff1c4; border-color: var(--gold); }
.niche:not(.is-off):hover img { transform: translateY(-3%) scale(1.05); }
body[data-mode="focus"] .tag { opacity: 0; }
/* arrows walk between pieces once one is open */
.arrows { opacity: 0; pointer-events: none; transition: opacity .4s ease .5s; }
body[data-mode="focus"] .arrows { opacity: 1; pointer-events: auto; }
body[data-mode="focus"] #label-note { visibility: hidden; }
@media (max-width: 750px) {
  .tag { font-size: 10px; letter-spacing: .1em; padding: 1px 6px 2px; bottom: 2px; }
  html[lang="en"] .tag { font-size: 11px; }
  .niche { padding-bottom: 20%; }
  .back { top: 82px; left: 16px; height: 44px; padding: 0 16px; font-size: 14px; }
  .close-x { top: 82px; right: 16px; width: 44px; height: 44px; }
}

/* the way down to the archive sits above the arrows, out of the name's way */
.focus-cue { left: auto; right: calc((100vw - min(1180px, 84vw)) / 2); bottom: calc(4.5vh + 64px); transform: none; flex-direction: row; gap: 12px;
  padding: 8px 4px; border-bottom: 1px solid var(--gold-soft); }
.focus-cue i { width: 14px; height: 14px; background: none; border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold); transform: rotate(45deg) translate(-3px, -3px); animation: cueBob 1.8s ease-in-out infinite; }
@keyframes cueBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 4px; } }
@media (max-width: 750px) {
  .focus-cue { right: auto; left: 50%; transform: translateX(-50%); bottom: 118px; white-space: nowrap; }
}

/* ==========================================================
   THE STUDY · the cabinet in the story's own light: paper wall, window light, linen niches, ink labels
   ========================================================== */
.palace { background: radial-gradient(ellipse 70% 60% at 22% 0%, rgba(255,250,236,.9), transparent 60%), linear-gradient(180deg, var(--wall) 0%, var(--wall-deep) 100%); }
.palace::before { opacity: .08; }
.frieze { top: 84px; height: 1px; background: rgba(27,23,18,.18); opacity: 1; }
.crown { background: linear-gradient(180deg, rgba(236,230,220,.92), rgba(236,230,220,0)); }
.seal { box-shadow: inset 0 0 0 2px rgba(246,233,216,.35); }
.lang { border-color: rgba(27,23,18,.2); }
.lang button[aria-pressed="true"] { background: #1b1712; color: #f1ead9; }
.cabinet { box-shadow: 0 0 0 1px #55301a, 0 30px 60px -28px rgba(60,35,15,.55), 0 4px 10px rgba(60,35,15,.15); }
.cabinet::before { box-shadow: inset 0 -1px 0 #55301a; }
.cabinet::after { background: radial-gradient(ellipse 4% 70% at 6% 100%, var(--wall-deep) 98%, transparent), radial-gradient(ellipse 4% 70% at 94% 100%, var(--wall-deep) 98%, transparent), linear-gradient(180deg, var(--zitan), var(--zitan-lo)); box-shadow: inset 0 1px 0 var(--zitan-hi); }
/* niches: plain linen, a little shadow under the shelf above, the window's light from the left */
.niche { background: radial-gradient(ellipse 80% 70% at 30% 20%, rgba(255,253,246,.85), transparent 70%), linear-gradient(180deg, var(--silk), var(--silk-deep));
  box-shadow: inset 0 12px 16px -10px rgba(60,35,15,.45), inset 0 0 0 1px rgba(85,48,26,.25), 0 0 0 4px var(--zitan), 0 0 0 5px var(--zitan-lo); }
.niche::after { box-shadow: 0 -1px 0 rgba(255,235,205,.25); }
.niche img { filter: drop-shadow(0 8px 6px rgba(70,45,20,.25)); }
.niche.is-on { box-shadow: inset 0 12px 16px -10px rgba(60,35,15,.35), inset 0 0 0 1px rgba(85,48,26,.3), 0 0 0 4px var(--zitan), 0 0 0 5px var(--zitan-lo), 0 18px 40px -16px rgba(60,35,15,.5); }
.niche.is-on::before { background: radial-gradient(ellipse 60% 60% at 40% 25%, rgba(255,253,246,.6), transparent 70%); }
.niche:not(.is-off):hover, .niche:not(.is-off):focus-visible { box-shadow: inset 0 12px 16px -10px rgba(60,35,15,.35), inset 0 0 0 1px rgba(85,48,26,.3), 0 0 0 4px var(--zitan-hi), 0 0 0 5px var(--zitan-lo), 0 16px 34px -14px rgba(60,35,15,.45); }
.niche:not(.is-off):hover img { filter: drop-shadow(0 14px 10px rgba(70,45,20,.3)); }
.niche.is-off { opacity: .4; filter: grayscale(.5); }
body[data-mode="focus"] .niche:not(.is-on) { opacity: .25; filter: grayscale(.4); }
/* name slips: paper with ink, like the labels in a scholar's cabinet */
.tag { background: #faf6ec; border: 1px solid rgba(85,48,26,.35); box-shadow: 0 1px 2px rgba(60,35,15,.15); color: #3a3129; }
.niche:not(.is-off):hover .tag { color: #1b1712; border-color: rgba(85,48,26,.6); }
.niche--lattice { background-color: #e8e0cf; background-image: repeating-linear-gradient(0deg, transparent 0 16px, rgba(122,74,42,.55) 16px 17px), repeating-linear-gradient(90deg, transparent 0 16px, rgba(122,74,42,.55) 16px 17px); }
.niche--plaque { background: linear-gradient(180deg, #f3ede0, #e6dccb); }
.plaque { color: #1b1712; }
.plaque i { color: #6b5f52; }
/* the label: ink on paper, as in the story */
.label h1 { text-shadow: none; }
.label .k { color: #2f5d50; }
.arrows button { border-color: rgba(27,23,18,.3); background: rgba(255,253,246,.5); color: #1b1712; }
.arrows button:hover { background: #1b1712; border-color: #1b1712; color: #f1ead9; }
.chips button { border-color: rgba(27,23,18,.2); background: rgba(255,253,246,.5); color: #6b5f52; }
.chips button span { color: #2f5d50; }
.chips button:hover, .chips button[aria-pressed="true"] { border-color: #1b1712; background: #1b1712; color: #f1ead9; }
.chips button[aria-pressed="true"] span { color: #c9dccf; }
/* the way back: ink, plain and easy to find */
.back { background: #1b1712; color: #f1ead9; box-shadow: 0 10px 24px -12px rgba(27,23,18,.6); }
.back:hover { box-shadow: 0 14px 28px -12px rgba(27,23,18,.7); }
.close-x { border-color: #1b1712; background: rgba(255,253,246,.7); color: #1b1712; }
.close-x:hover { background: #1b1712; color: #f1ead9; }
.focus-cue { border-bottom-color: rgba(27,23,18,.3); }
.focus-cue i { border-color: #1b1712; }
/* the archive continues the same paper */
.archive { background: #f1ead9; border-top: 1px solid rgba(27,23,18,.12); box-shadow: none; }
.story-kicker, .story-specs dt { color: #2f5d50; }
.story-shop-link { background: #2f5d50; box-shadow: none; }
.story-shop-link:hover { background: #24493e; }
body { background: var(--wall); }

.niche--lattice { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0.0 0.0L20.5 0.0 M0.0 0.0L0.0 17.5 M0.0 17.5L18.1 13.8 M0.0 17.5L0.0 35.1 M18.1 13.8L0.0 35.1 M0.0 35.1L20.1 33.5 M0.0 35.1L0.0 62.1 M0.0 35.1L19.1 54.0 M0.0 62.1L19.1 54.0 M0.0 62.1L0.0 74.0 M0.0 74.0L14.3 78.9 M0.0 74.0L0.0 100.0 M0.0 74.0L24.6 100.0 M0.0 100.0L24.6 100.0 M20.5 0.0L34.7 0.0 M20.5 0.0L18.1 13.8 M34.7 0.0L18.1 13.8 M18.1 13.8L36.1 21.8 M18.1 13.8L20.1 33.5 M20.1 33.5L46.3 41.1 M20.1 33.5L19.1 54.0 M19.1 54.0L38.6 66.7 M19.1 54.0L14.3 78.9 M14.3 78.9L33.7 85.0 M14.3 78.9L24.6 100.0 M33.7 85.0L24.6 100.0 M24.6 100.0L37.1 100.0 M34.7 0.0L55.0 0.0 M34.7 0.0L36.1 21.8 M36.1 21.8L54.6 17.3 M36.1 21.8L46.3 41.1 M46.3 41.1L64.4 35.5 M46.3 41.1L38.6 66.7 M64.4 35.5L38.6 66.7 M38.6 66.7L61.1 61.9 M38.6 66.7L33.7 85.0 M33.7 85.0L58.2 80.7 M33.7 85.0L37.1 100.0 M58.2 80.7L37.1 100.0 M37.1 100.0L53.9 100.0 M55.0 0.0L73.8 0.0 M55.0 0.0L54.6 17.3 M73.8 0.0L54.6 17.3 M54.6 17.3L75.9 22.5 M54.6 17.3L64.4 35.5 M64.4 35.5L79.0 37.4 M64.4 35.5L61.1 61.9 M61.1 61.9L81.2 59.3 M61.1 61.9L58.2 80.7 M58.2 80.7L77.2 84.1 M58.2 80.7L53.9 100.0 M58.2 80.7L82.8 100.0 M53.9 100.0L82.8 100.0 M73.8 0.0L100.0 0.0 M73.8 0.0L75.9 22.5 M75.9 22.5L100.0 16.4 M75.9 22.5L79.0 37.4 M75.9 22.5L100.0 41.0 M79.0 37.4L100.0 41.0 M79.0 37.4L81.2 59.3 M79.0 37.4L100.0 60.4 M81.2 59.3L100.0 60.4 M81.2 59.3L77.2 84.1 M100.0 60.4L77.2 84.1 M77.2 84.1L100.0 85.3 M77.2 84.1L82.8 100.0 M77.2 84.1L100.0 100.0 M82.8 100.0L100.0 100.0 M100.0 0.0L100.0 16.4 M100.0 16.4L100.0 41.0 M100.0 41.0L100.0 60.4 M100.0 60.4L100.0 85.3 M100.0 85.3L100.0 100.0' fill='none' stroke='%237a4a2a' stroke-width='3' vector-effect='non-scaling-stroke' stroke-linecap='square'/%3E%3C/svg%3E") center / 100% 100% no-repeat, #e8e0cf; }
/* the arrows belong to an opened piece only (the label's entrance animation must not bring them back) */
body[data-mode="shelf"] .arrows { visibility: hidden; }
.tag { max-width: 94%; overflow: hidden; text-overflow: ellipsis; }
/* with a piece open, the name below sits on a band of paper so it reads cleanly over the dimmed cabinet */
.palace::after { content: ''; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 26vh; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(236,230,220,0), rgba(236,230,220,.92) 55%, var(--wall)); transition: opacity .6s ease .3s; }
body[data-mode="focus"] .palace::after { opacity: 1; }
.label, .focus-ui { z-index: 3; }