/* ============================================================
   storyforkehlani — shared engine styles
   Theme variables each variant page must define on :root —
     --sfk-bg          page background
     --sfk-ink         body text color
     --sfk-ink-soft    muted text
     --sfk-accent      theme accent
     --sfk-k-blue      karaoke blue   (current word)
     --sfk-k-gold      karaoke gold   (spoken trail)
     --sfk-said        color of already-spoken words
     --sfk-dock-bg     dock chrome background
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: auto; }

body {
  background: var(--sfk-bg, #faf7f2);
  color: var(--sfk-ink, #2b2422);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Cover hero ---------- */

.sfk-hero {
  position: relative;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
}

.sfk-hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(3rem, 8vh, 6rem) 1.5rem 0;
  text-align: center;
}

.sfk-play-slot {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(1.2rem, 3vh, 2.2rem);
}

.sfk-title {
  max-width: 17ch;
  line-height: 1.08;
  opacity: 0;
  transform: translateY(18px);
  animation: sfk-rise 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards;
}

.sfk-subtitle {
  margin-top: 1.1rem;
  opacity: 0;
  transform: translateY(14px);
  animation: sfk-rise 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.7s forwards;
}

@keyframes sfk-rise {
  to { opacity: 1; transform: translateY(0); }
}

/* Cover art bleed-in */
.sfk-cover-art {
  position: relative;
  z-index: 1;
  width: min(72vw, 460px);
  margin: clamp(1rem, 3vh, 2.5rem) auto 0;
  justify-self: center;
  align-self: end;
}

.sfk-cover-art img {
  display: block;
  width: 100%;
  height: auto;
  /* Matt's PNG is a true cutout (transparent bg) — it floats on the
     page. No opaque grounds, borders, or box shadows on it, ever. */
  background: transparent;
  position: relative;
  z-index: 1;
}

/* soft white glow behind the cutout (never a box) — strength themable */
.sfk-cover-art::before {
  content: '';
  position: absolute;
  inset: -12%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 62% 55% at 50% 42%,
      rgba(255, 255, 255, var(--sfk-art-glow, 0.30)) 0%,
      rgba(255, 255, 255, calc(var(--sfk-art-glow, 0.30) * 0.45)) 45%,
      transparent 72%);
}

.sfk-cover-art .art-sharp {
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 38%, #000 55%, transparent 78%);
  mask-image: radial-gradient(ellipse 60% 55% at 50% 38%, #000 55%, transparent 78%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 0% 0%;
  mask-size: 0% 0%;
  -webkit-mask-position: center;
  mask-position: center;
  animation: sfk-bleed 2.6s cubic-bezier(0.22, 1, 0.36, 1) 0.9s forwards;
}

.sfk-cover-art .art-ghost {
  position: absolute;
  inset: 0;
  filter: blur(14px);
  opacity: 0;
  animation: sfk-ghost 3s ease 0.55s forwards;
}

@keyframes sfk-bleed {
  0%   { -webkit-mask-size: 0% 0%; mask-size: 0% 0%; }
  100% { -webkit-mask-size: 340% 340%; mask-size: 340% 340%; }
}

@keyframes sfk-ghost {
  0%   { opacity: 0; }
  30%  { opacity: 0.55; }
  100% { opacity: 0; }
}

.sfk-scroll-hint {
  position: absolute;
  bottom: 1.4rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sfk-ink-soft, #9a8c83);
  opacity: 0;
  animation: sfk-rise 1.2s ease 2.4s forwards;
}

/* ---------- Story body ---------- */

.sfk-story {
  position: relative;
  max-width: var(--sfk-measure, 680px);
  margin: 0 auto;
  padding: clamp(3rem, 9vh, 6rem) 1.5rem 9rem;
}

.sfk-story p {
  margin-bottom: 1.6em;
  position: relative;
}

/* word spans */
.sfk-story .w {
  font-style: normal;
  border-radius: 3px;
  cursor: default;
  transition: color 0.35s ease, background-color 0.35s ease;
}

body.sfk-audio-live .sfk-story .w { cursor: pointer; }

.sfk-story .w.said {
  color: var(--sfk-said, inherit);
}

.sfk-story .w.now {
  background-image: linear-gradient(100deg, var(--sfk-k-blue, #3d6ea8), var(--sfk-k-gold, #c99a3c));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  animation: sfk-shimmer 1.4s linear infinite;
  background-size: 200% 100%;
}

@keyframes sfk-shimmer {
  0%   { background-position: 0% 0; }
  100% { background-position: -200% 0; }
}

/* recent trail — the few words just spoken keep a golden warmth */
.sfk-story .w.trail {
  color: var(--sfk-k-gold, #c99a3c);
}

/* bookmark target hover while dragging */
.sfk-story .w.bm-target {
  outline: 2px dashed var(--sfk-accent, #b4543e);
  outline-offset: 2px;
  border-radius: 4px;
}

/* placed bookmark marker in the margin */
.sfk-bm-marker {
  position: absolute;
  left: -2.1rem;
  top: 0.05em;
  width: 1.15rem;
  height: 1.5rem;
  pointer-events: none;
}

.sfk-bm-marker svg {
  width: 100%;
  height: 100%;
  fill: var(--sfk-accent, #b4543e);
  stroke: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}

@media (max-width: 900px) {
  .sfk-bm-marker { left: -1.4rem; }
}

/* ---------- Section breaks & icons ---------- */

.sfk-break {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.1rem;
  margin: 3.2rem 0;
  color: var(--sfk-ink-soft, #9a8c83);
  letter-spacing: 0.5em;
  font-size: 0.95rem;
  user-select: none;
}

.sfk-icon-break {
  margin: 4rem auto;
  width: min(52vw, 300px);
  position: relative;
}

.sfk-icon-break img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transform: translateY(26px) scale(0.94);
  filter: blur(10px);
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 40%, transparent 75%);
  mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 40%, transparent 75%);
  -webkit-mask-size: 60% 60%;
  mask-size: 60% 60%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transition:
    opacity 1.3s ease,
    transform 1.5s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1.3s ease,
    -webkit-mask-size 1.6s cubic-bezier(0.22, 1, 0.36, 1);
  transition:
    opacity 1.3s ease,
    transform 1.5s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1.3s ease,
    mask-size 1.6s cubic-bezier(0.22, 1, 0.36, 1),
    -webkit-mask-size 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.sfk-icon-break.revealed img {
  opacity: var(--sfk-icon-opacity, 1);
  transform: translateY(0) scale(1);
  filter: blur(0);
  -webkit-mask-size: 300% 300%;
  mask-size: 300% 300%;
}

/* ---------- Closing photograph + dedication ---------- */

.sfk-outro {
  margin: 6rem auto 2rem;
  max-width: min(78vw, 420px);
  text-align: center;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.4s ease, transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.sfk-outro.revealed {
  opacity: 1;
  transform: translateY(0);
}

.sfk-outro img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.45);
}

.sfk-outro figcaption {
  margin-top: 1.4rem;
  font-size: 1.02em;
  line-height: 1.5;
  color: var(--sfk-ink, inherit);
}

/* ---------- Dock (play + bookmark follow you) ---------- */

.sfk-dock {
  position: fixed;
  top: 1.1rem;
  right: 1.2rem;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.sfk-dock .sfk-dock-play-slot { display: flex; }

.sfk-bookmark-btn {
  background: var(--sfk-dock-bg, rgba(255,255,255,0.82));
  border: 1px solid rgba(0,0,0,0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  color: var(--sfk-ink, #2b2422);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
  touch-action: none;
}

.sfk-bookmark-btn:hover { transform: scale(1.07); }
.sfk-bookmark-btn:active { cursor: grabbing; transform: scale(0.96); }

/* hover tooltip */
@media (hover: hover) {
  .sfk-bookmark-btn { position: relative; }
  .sfk-bookmark-btn::after {
    content: "Drag and drop to save";
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    white-space: nowrap;
    background: var(--sfk-ink, #2b2422);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 0.45em 0.8em;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.14);
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.18s ease 0.15s, transform 0.18s ease 0.15s;
  }
  .sfk-bookmark-btn:hover::after { opacity: 1; transform: translateY(0); }
  .sfk-bookmark-btn:active::after { opacity: 0; transition: none; }
}

.sfk-bookmark-btn svg {
  width: 19px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
  transition: fill 0.3s ease;
}

.sfk-bookmark-btn.has-bookmark svg {
  fill: var(--sfk-accent, #b4543e);
  stroke: var(--sfk-accent, #b4543e);
}

/* ghost that follows the pointer while dragging the bookmark */
.sfk-bm-ghost {
  position: fixed;
  z-index: 400;
  width: 22px;
  height: 27px;
  pointer-events: none;
  transform: translate(-50%, -60%);
}

.sfk-bm-ghost svg {
  width: 100%;
  height: 100%;
  fill: var(--sfk-accent, #b4543e);
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.3));
}

.sfk-drag-hint {
  position: fixed;
  z-index: 390;
  top: 4.6rem;
  right: 1.2rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  background: var(--sfk-dock-bg, rgba(255,255,255,0.92));
  color: var(--sfk-ink, #2b2422);
  border: 1px solid rgba(0,0,0,0.08);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

body.sfk-dragging .sfk-drag-hint { opacity: 1; transform: translateY(0); }

/* ---------- Play buttons ---------- */

/* The play button lives in ONE fixed element; JS moves it between
   the hero slot position and the dock position via transform. */
.sfk-play {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 210;
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.sfk-play.no-anim { transition: none; }

/* --- liquid metal button (vanilla port of the 21st.dev component) --- */
.lm-btn {
  position: relative;
  border-radius: 999px;
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
  width: 142px;
  height: 46px;
  transition: width 0.4s ease;
  outline: none;
}

.lm-btn.icon-mode { width: 46px; }

.lm-shader,
.lm-fallback {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.3),
    0 20px 12px rgba(0, 0, 0, 0.08),
    0 9px 9px rgba(0, 0, 0, 0.12),
    0 2px 5px rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.2s ease;
}

.lm-shader canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  position: absolute;
  inset: 0;
}

.lm-fallback {
  background: conic-gradient(from 210deg at 50% 50%,
    #d8d8dc, #8a8a92 12%, #f4f4f6 26%, #6f6f78 44%,
    #e9e9ee 58%, #82828a 74%, #f0f0f3 88%, #d8d8dc);
}

.lm-core {
  position: absolute;
  inset: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, #202020 0%, #000 100%);
  transition: box-shadow 0.15s ease;
}

.lm-btn:active .lm-core {
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}

.lm-btn:active { transform: translateY(1px) scale(0.98); }

.lm-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #d9d9dc;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  white-space: nowrap;
  pointer-events: none;
}

.lm-label svg {
  width: 13px;
  height: 13px;
  fill: #d9d9dc;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.55));
}

.lm-ripple {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
  animation: lm-ripple 0.6s ease-out forwards;
}

@keyframes lm-ripple {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(4); opacity: 0; }
}

/* --- "Press to play" expanding pill (vanilla port of Skiper3) --- */
.pp-btn {
  position: relative;
  display: flex;
  align-items: center;
  border: none;
  cursor: pointer;
  outline: none;
  height: 54px;
  width: 54px;
  border-radius: 999px;
  background: var(--sfk-pill-bg, rgba(20, 18, 16, 0.9));
  color: var(--sfk-pill-ink, #f5efe8);
  overflow: hidden;
  transition:
    width 0.6s cubic-bezier(0.34, 1.4, 0.64, 1),
    transform 0.2s ease,
    background-color 0.3s ease;
  transform-origin: center;
}

.pp-btn:active { transform: scale(0.96); }

.pp-btn.expanded { width: 250px; }

.pp-btn .pp-play-wrap {
  position: absolute;
  right: 0;
  top: 0;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.pp-btn svg.pp-icon {
  width: 17px;
  height: 17px;
  fill: currentColor;
  transition: opacity 0.25s ease, transform 0.25s ease, filter 0.25s ease;
}

.pp-btn .pp-content {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: calc(100% - 50px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  filter: blur(4px);
  transition: opacity 0.35s ease 0.15s, filter 0.35s ease 0.15s;
  white-space: nowrap;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pp-btn.expanded .pp-content { opacity: 1; filter: blur(0); }

.pp-btn .pp-track {
  display: none;
  align-items: center;
  gap: 7px;
}

.pp-btn .pp-bar {
  width: 60px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  overflow: hidden;
}

.pp-btn .pp-bar i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sfk-k-blue, #7fa8d8), var(--sfk-k-gold, #e3b45c));
}

.pp-btn .pp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
}

.pp-btn .pp-dot.lit { background: var(--sfk-k-gold, #e3b45c); }

.pp-btn.playing .pp-label { display: none; }
.pp-btn.playing .pp-track { display: flex; }

/* ---------- Progress bar ---------- */

.sfk-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: 300;
  background: transparent;
  pointer-events: none;
}

.sfk-progress i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--sfk-k-blue, #3d6ea8), var(--sfk-k-gold, #c99a3c));
}

/* ---------- Return-to-voice + resume chips ----------
   The chip is Matt's GlassButton component, ported to vanilla DOM:
     .sfk-chip.glass-button-wrap
       > button.glass-button > span.glass-button-text (children)
       > div.glass-button-shadow
   The wrap carries the fixed positioning + enter animation; the button
   carries the liquid glass; the shadow div is the cast shadow beneath. */

.sfk-chip {
  position: fixed;
  bottom: 1.6rem;
  left: 50%;
  transform: translate(-50%, 140%);
  z-index: 250;
  max-width: calc(100vw - 1.6rem);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}

.sfk-chip.show { transform: translate(-50%, 0); opacity: 1; }

/* no position here — .sfk-chip's fixed placement is the containing block
   for the absolutely-positioned shadow layer */
.glass-button-wrap {
  isolation: isolate;
  border-radius: 999px;
  cursor: pointer;
}

.glass-button {
  all: unset;
  box-sizing: border-box;
  position: relative;
  z-index: 3;
  display: block;
  max-width: 100%;
  cursor: pointer;
  border-radius: 999px;
  background: linear-gradient(-75deg,
              rgba(255, 255, 255, 0.22),
              rgba(255, 255, 255, 0.62),
              rgba(255, 255, 255, 0.22));
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 1px rgba(255, 255, 255, 0.4),
    inset 1px 0 0 rgba(255, 255, 255, 0.55),
    inset -1px 0 0 rgba(255, 255, 255, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.45);
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1),
              box-shadow 0.3s ease, background 0.3s ease;
}

/* specular sweep across the top of the glass */
.glass-button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(120deg, transparent 12%,
              rgba(255, 255, 255, 0.55) 42%,
              rgba(255, 255, 255, 0.08) 52%, transparent 70%);
  opacity: 0.75;
  pointer-events: none;
}

.glass-button:hover { transform: scale(1.03); }
.glass-button:active { transform: scale(0.985); }
.glass-button:focus-visible {
  outline: 2px solid var(--sfk-accent, #0F7E9C);
  outline-offset: 3px;
}

/* the cast shadow sitting under the glass */
.glass-button-shadow {
  position: absolute;
  z-index: 1;
  inset: 14% 4% -14%;
  border-radius: 999px;
  background: radial-gradient(60% 100% at 50% 50%,
              rgba(35, 32, 30, 0.28),
              rgba(35, 32, 30, 0.14) 60%, transparent 78%);
  filter: blur(11px);
  pointer-events: none;
}

.glass-button-text {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;          /* the component's default size */
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.02em;          /* tracking-tighter */
  white-space: nowrap;
  color: var(--sfk-ink, #26262A);
  user-select: none;
  -webkit-user-select: none;
}

.glass-button-text .lbl { overflow: hidden; text-overflow: ellipsis; }

.glass-button-text svg {
  width: 15px;
  height: 15px;
  flex: none;
  fill: var(--sfk-accent, #0F7E9C);
}

.glass-button-text .dismiss {
  margin-left: 0.2rem;
  flex: none;
  opacity: 0.5;
  font-size: 1rem;
  padding: 0 0.15rem;
}
.glass-button-text .dismiss:hover { opacity: 0.9; }

/* phones: the component's sm size, one line always */
@media (max-width: 540px) {
  .glass-button-text {
    padding: 0.55rem 1rem;
    font-size: clamp(0.74rem, 3.4vw, 0.9rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .glass-button, .glass-button:hover, .glass-button:active { transform: none; }
}

/* ---------- Now-playing ribbon ---------- */

.sfk-ribbon {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 110%);
  width: min(100%, 760px);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.65rem 1.1rem calc(0.65rem + env(safe-area-inset-bottom));
  background: var(--sfk-dock-bg, rgba(255, 255, 255, 0.92));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  z-index: 240;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

body.sfk-audio-live .sfk-ribbon { transform: translate(-50%, 0); }

.sfk-ribbon .rb-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--sfk-ink, #2b2422);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: none;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 0.15s ease, background-color 0.2s ease;
}

/* invisible 44px hit area (mobile-design: touch targets) */
.sfk-ribbon .rb-btn::after {
  content: '';
  position: absolute;
  inset: -6px;
}

.sfk-ribbon .rb-btn:active { transform: scale(0.92); }

.sfk-ribbon .rb-btn:hover {
  background: color-mix(in srgb, var(--sfk-ink, #2b2422) 8%, transparent);
}

.sfk-ribbon .rb-play svg { width: 17px; height: 17px; fill: currentColor; }
.sfk-ribbon .rb-back svg { width: 18px; height: 18px; }
.sfk-ribbon .rb-speed { font-weight: 600; letter-spacing: 0.01em; }

.sfk-ribbon .rb-time {
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--sfk-ink, #2b2422);
  opacity: 0.75;
  min-width: 3.2em;
  text-align: center;
}

.sfk-ribbon .rb-track {
  position: relative;
  flex: 1;
  height: 22px;
  cursor: pointer;
  touch-action: none;
  display: flex;
  align-items: center;
}

.sfk-ribbon .rb-track::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sfk-ink, #2b2422) 14%, transparent);
}

.sfk-ribbon .rb-fill {
  position: absolute;
  left: 0;
  height: 3px;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sfk-k-blue, #3d6ea8), var(--sfk-k-gold, #c99a3c));
  pointer-events: none;
}

.sfk-ribbon .rb-thumb {
  position: absolute;
  left: 0%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--sfk-k-gold, #c99a3c);
  border: 2px solid var(--sfk-dock-bg, #fff);
  transform: translateX(-50%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.sfk-ribbon .rb-follow {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--sfk-ink, #2b2422);
  padding: 0.3rem 0.4rem;
  border-radius: 999px;
  white-space: nowrap;
}

.sfk-ribbon .rb-follow i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sfk-k-gold, #c99a3c);
  box-shadow: 0 0 8px var(--sfk-k-gold, #c99a3c);
  flex: none;
}

.sfk-ribbon .rb-follow.off { opacity: 0.55; }
.sfk-ribbon .rb-follow.off i {
  background: transparent;
  border: 1.5px solid currentColor;
  box-shadow: none;
  opacity: 0.6;
}

.sfk-ribbon .rb-follow.pulse { animation: sfk-pulse 1s ease 2; }

@keyframes sfk-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}

.sfk-ribbon .rb-sec {
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  color: var(--sfk-ink, #2b2422);
  opacity: 0.55;
  white-space: nowrap;
}

body.sfk-audio-live .sfk-chip { bottom: 5.2rem; }

@media (max-width: 640px) {
  .sfk-ribbon { gap: 0.45rem; padding-left: 0.7rem; padding-right: 0.7rem; }
  .sfk-ribbon .rb-follow span { display: none; }
  .sfk-ribbon .rb-sec { display: none; }
  .sfk-ribbon .rb-tot { display: none; }
}

/* keyboard focus (a11y) */
.sfk-ribbon .rb-btn:focus-visible,
.sfk-ribbon .rb-follow:focus-visible,
.sfk-ribbon .rb-track:focus-visible,
.sfk-wmenu button:focus-visible,
.sfk-map button:focus-visible,
.sfk-bookmark-btn:focus-visible {
  outline: 2px solid var(--sfk-accent, #b4543e);
  outline-offset: 2px;
}

/* ---------- Word menu ---------- */

.sfk-wmenu {
  position: fixed;
  z-index: 260;
  display: flex;
  border-radius: 12px;
  overflow: hidden;
  background: var(--sfk-dock-bg, rgba(255, 255, 255, 0.97));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
  opacity: 0;
  transform: translateY(4px) scale(0.97);
  transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.sfk-wmenu.show { opacity: 1; transform: translateY(0) scale(1); }

.sfk-wmenu button {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--sfk-ink, #2b2422);
  padding: 0.8rem 1rem;
  min-height: 44px;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.sfk-wmenu button + button {
  border-left: 1px solid rgba(0, 0, 0, 0.08);
}

.sfk-wmenu button:hover { color: var(--sfk-accent, #b4543e); }

.sfk-wmenu svg {
  width: 13px;
  height: 13px;
  fill: var(--sfk-accent, #b4543e);
  flex: none;
}

.sfk-wmenu svg.bm { fill: none; stroke: var(--sfk-accent, #b4543e); stroke-width: 2; }

/* ---------- Section dot map ---------- */

.sfk-map {
  position: fixed;
  right: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 190;
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: center;
}

.sfk-map button {
  width: 6px;
  height: 6px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: color-mix(in srgb, var(--sfk-ink, #2b2422) 22%, transparent);
  transition: background 0.3s ease, transform 0.2s ease;
}

.sfk-map button.big { width: 8px; height: 8px; }

.sfk-map button:hover { transform: scale(1.5); }

.sfk-map button.done {
  background: color-mix(in srgb, var(--sfk-k-gold, #c99a3c) 55%, transparent);
}

.sfk-map button.cur {
  background: var(--sfk-accent, #b4543e);
  transform: scale(1.45);
  box-shadow: 0 0 8px color-mix(in srgb, var(--sfk-accent, #b4543e) 60%, transparent);
}

@media (max-width: 900px) {
  .sfk-map { display: none; }
}

/* one-time discovery hint reuses the drag bubble */
.sfk-drag-hint.show { opacity: 1; transform: translateY(0); }

/* ---------- Temporary structure editor ---------- */

.sfk-editbar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.55rem 1rem;
  background: #1C1C1E;
  color: #F5F1EA;
  border-radius: 0 0 12px 12px;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  max-width: calc(100vw - 16px);
  flex-wrap: wrap;
  justify-content: center;
}

.sfk-editbar b { color: #F0C46A; letter-spacing: 0.12em; }
.sfk-editbar span { opacity: 0.65; }

.sfk-editbar button {
  background: rgba(255, 255, 255, 0.12);
  color: inherit;
  border: none;
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  font: inherit;
  cursor: pointer;
}

.sfk-editbar button:hover { background: rgba(255, 255, 255, 0.22); }

body.sfk-editing .sfk-story .w { cursor: pointer; }

body.sfk-editing .sfk-story p {
  border-top: 1px dashed color-mix(in srgb, var(--sfk-accent, #b4543e) 30%, transparent);
  padding-top: 0.35em;
}

body.sfk-editing .sfk-story p:hover {
  background: color-mix(in srgb, var(--sfk-accent, #b4543e) 5%, transparent);
}

body.sfk-editing .sfk-story .w:hover {
  outline: 2px solid var(--sfk-accent, #b4543e);
  outline-offset: 1px;
  border-radius: 3px;
}

/* first word of each paragraph shows as the merge handle while editing */
body.sfk-editing .sfk-story p .w:first-child {
  box-shadow: inset 3px 0 0 var(--sfk-accent, #b4543e);
  padding-left: 3px;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .sfk-cover-art .art-sharp,
  .sfk-cover-art .art-ghost,
  .sfk-title, .sfk-subtitle, .sfk-scroll-hint { animation-duration: 0.01s; animation-delay: 0s; }
  .sfk-icon-break img { transition-duration: 0.01s; }
  .sfk-play { transition: none; }
  .sfk-story .w.now { animation: none; }
  .sfk-ribbon { transition: none; }
  .sfk-ribbon .rb-follow.pulse { animation: none; }
}

/* small phones / short screens: keep play + title + her above the fold */
@media (max-width: 640px), (max-height: 740px) {
  .sfk-hero-inner { padding-top: clamp(1.6rem, 4vh, 3rem); }
  .sfk-play-slot { min-height: 62px; margin-bottom: 1rem; }
  .sfk-cover-art { width: min(56vw, 320px); }
}

@media (max-width: 640px) {
  .sfk-dock { top: 0.8rem; right: 0.8rem; }
  .sfk-bookmark-btn { width: 42px; height: 42px; }
  .pp-btn.expanded { width: 220px; }
}


/* ---------- section titles + song embeds (v11) ---------- */
.sfk-sec-title {
  font-size: 1.2rem; font-weight: 600; margin: 2.8rem 0 1.2rem;
  line-height: 1.3; color: var(--sfk-ink, #2b2422); text-wrap: balance;
}
.sfk-track {
  margin: 1.8rem auto 2rem; padding: 0.9rem 1rem 0.75rem; border-radius: 14px;
  background: rgba(255,255,255,0.6); border: 1px solid rgba(0,0,0,0.09);
}
.sfk-track-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.55rem;
  font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; }
.sfk-track-head svg { width: 13px; height: 13px; fill: none; stroke: var(--sfk-accent, #b4543e); stroke-width: 1.7; flex: none; }
.sfk-track iframe { display: block; border: 0; }
/* the ✳ mark isn't in the subset serif faces — keep it on a system face */
.sfk-break { font-family: system-ui, 'Apple Symbols', sans-serif; }


/* closing photograph placed by the script's [INSERT PHOTO] marker */
.sfk-outro-inline { margin: 3.5rem auto 2.5rem; max-width: min(78vw, 420px); }
.sfk-outro-inline img { display: block; width: 100%; height: auto; border-radius: 2px; }