/* SHUMIRA Bespoke · clean edition (loads after bespoke.css)
   Restraint over effects: smaller, widely spaced titles; one line of copy;
   no pills and no custom cursor; a single quiet progress readout. */
.bk-cursor { display: none !important; }
body.bespoke.has-cursor, body.bespoke.has-cursor a, body.bespoke.has-cursor button { cursor: auto; }
.bk-grain { opacity: 0.035; }
.bk-vignette { background: radial-gradient(ellipse 85% 80% at 50% 50%, rgba(3, 5, 14, 0) 50%, rgba(3, 5, 14, 0.75) 100%); }

/* entry */
.bk-intro { gap: 56px; background: #03050d; }
.bk-intro .wm-name { font-size: clamp(2rem, 4.6vw, 3.2rem); }
.bk-load-bar { width: 120px; background: rgba(238, 242, 251, 0.12); }
.bk-enter { border: 0; padding: 8px 0; font-size: 0.66rem; letter-spacing: 0.42em; color: #EEF2FB; position: relative; }
.bk-enter::after { content: ""; position: absolute; left: 0; right: 0.42em; bottom: 0; height: 1px; background: currentColor; transform-origin: left; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.bk-enter:hover { background: none; color: #fff; }
.bk-enter:hover::after { transform: scaleX(0.4); }
.bk-enter.soft { color: rgba(238, 242, 251, 0.45); }
.bk-enter.soft::after { transform: scaleX(0); }
.bk-enter.soft:hover { color: #EEF2FB; }
.bk-enter.soft:hover::after { transform: scaleX(1); }
.bk-doors { gap: 48px; }

/* header: the wordmark, and a quiet sound line */
.bk-head { padding: 28px 40px; }
.bk-head .wm-name { font-size: 1.25rem; letter-spacing: 0.3em; padding-left: 0.3em; }
.bk-sound { width: auto; height: auto; border: 0; padding: 6px 0; }
.bk-sound svg { width: 26px; opacity: 0.7; }

/* progress: one line at the bottom, the current chapter beside it */
.bk-progress { left: 40px; right: auto; top: auto; bottom: 34px; transform: none; display: flex; align-items: center; gap: 18px; }
.bk-progress-line { order: 1; width: 90px; height: 1px; }
.bk-progress-line i { transform-origin: left; transform: scaleX(0); background: #EEF2FB; }
.bk-progress ol { order: 2; display: block; position: relative; height: 12px; min-width: 200px; }
.bk-progress li { position: absolute; left: 0; top: 0; opacity: 0; transform: translateY(6px); transition: opacity 0.6s, transform 0.6s; color: rgba(238, 242, 251, 0.7); font-size: 0.58rem; letter-spacing: 0.32em; white-space: nowrap; cursor: default; }
.bk-progress li.on { opacity: 1; transform: none; color: rgba(238, 242, 251, 0.7); }
.bk-progress li span, .bk-progress:hover li span { opacity: 1; transform: none; }
.bk-progress li b { margin-right: 14px; color: #EEF2FB; }

/* chapters */
.bk-ch { min-height: 180svh; padding: 0 clamp(24px, 10vw, 180px); }
.bk-text { max-width: 440px; gap: 18px; }
.bk-text.center { max-width: 760px; }
.bk-eyebrow { font-size: 0.6rem; letter-spacing: 0.5em; color: rgba(238, 242, 251, 0.55); }
.bk-num { font-size: 0.8rem; letter-spacing: 0.4em; color: rgba(238, 242, 251, 0.55); }
.bk-num::after { width: 28px; opacity: 0.4; }
.bk-big { font-size: clamp(1.9rem, min(3.6vw, 7vh), 3.3rem); letter-spacing: 0.16em; line-height: 1.15; font-weight: 400; text-shadow: none; color: #F4F6FB; }
.bk-text.center .bk-big { font-size: clamp(2.2rem, min(5vw, 9vh), 4.4rem); letter-spacing: 0.2em; }
.bk-ch.final .bk-big { font-size: clamp(2rem, min(4vw, 8vh), 3.6rem); }
.bk-big .ch { filter: blur(8px); transform: translateY(0.18em); transition-duration: 1.4s, 1.4s, 1.6s; transition-delay: calc(var(--i) * 30ms); }
.bk-sub { font-size: 0.95rem; line-height: 1.85; color: rgba(226, 232, 246, 0.62); max-width: 36ch; font-weight: 300; }
.bk-scroll { margin-top: 40px; }
.bk-scroll span { height: 56px; }

.bk-metals { gap: 0; border-top: 1px solid rgba(238, 242, 251, 0.12); margin-top: 8px; width: 240px; }
.bk-metals li { display: block; width: 100%; border: 0; border-bottom: 1px solid rgba(238, 242, 251, 0.12); border-radius: 0; padding: 13px 0; background: none; backdrop-filter: none; font-size: 0.6rem; letter-spacing: 0.3em; color: rgba(238, 242, 251, 0.4); position: relative; transition: color 0.6s, padding 0.6s; }
.bk-metals li::before { content: ""; position: absolute; left: 0; top: 50%; width: 0; height: 1px; background: #EEF2FB; transition: width 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.bk-metals li.on { color: #fff; background: none; padding-left: 26px; }
.bk-metals li.on::before { width: 16px; }

.bk-actions { gap: 44px; margin-top: 18px; }
.bk-link { font-size: 0.64rem; letter-spacing: 0.36em; text-transform: uppercase; text-decoration: none; color: #EEF2FB; padding-bottom: 8px; border-bottom: 1px solid rgba(238, 242, 251, 0.5); transition: border-color 0.4s, opacity 0.4s; }
.bk-link:hover { border-color: #fff; opacity: 0.7; }

@media (max-width: 860px) {
  .bk-head { padding: 18px 20px; grid-template-columns: 1fr auto 1fr; }
  .bk-progress { display: flex; left: 20px; bottom: 22px; }
  .bk-progress-line { width: 50px; }
  .bk-big { font-size: clamp(1.6rem, 7.5vw, 2.4rem); letter-spacing: 0.12em; }
  .bk-text.center .bk-big { font-size: clamp(1.9rem, 9vw, 2.8rem); }
  .bk-metals { width: 220px; margin-inline: auto; }
  .bk-metals li { text-align: center; }
  .bk-metals li.on { padding-left: 0; }
  .bk-metals li::before { display: none; }
  .bk-actions { flex-direction: column; align-items: center; gap: 22px; }
  .bk-doors { flex-direction: column; align-items: center; gap: 22px; }
  .bk-text { padding-bottom: 12svh; }
}