/* Self-hosted fonts used by the fixed Simplified Chinese build. */
@font-face {
  font-family: "Cormorant Garamond Subset";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/cormorant-600.woff2") format("woff2");
}

@font-face {
  font-family: "Outfit Subset";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/outfit-400.woff2") format("woff2");
}

@font-face {
  font-family: "Outfit Subset";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/outfit-500.woff2") format("woff2");
}

@font-face {
  font-family: "Outfit Subset";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/outfit-600.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono Subset";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jetbrains-mono-400.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Serif SC Subset";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/noto-serif-sc-600.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Sans SC Subset";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/noto-sans-sc-400.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Sans SC Subset";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/noto-sans-sc-500.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Sans SC Subset";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/noto-sans-sc-700.woff2") format("woff2");
}

/* =========================================================================
   调律诗篇 10th Anniversary Roadmap — page styles.
   Ported from the Claude Design prototype (调律诗篇 10th Roadmap.html <style> +
   ds/styles.css). EVERYTHING is scoped under .rm-page so it cannot leak into
   the rest of the portal (this file is imported globally by Next.js).

   Asset URLs are absolute under the portal basePath (/portal/10th/...),
   matching the existing globals.css convention (/portal/assets/...).

   Page-local design tokens reproduce the prototype's blue-black palette
   (#050811) faithfully, regardless of the portal's warm-brown body theme.
   To instead adopt the portal's warm-brown theme, delete the token
   overrides in the `.rm-page` block below.
   ========================================================================= */

.rm-page {
  /* ── page-local tokens (faithful to the design prototype) ─────────────── */
  --color-background: #050811;
  --color-foreground: #edeadd;
  --color-muted: rgba(237, 234, 221, 0.55);
  --color-muted-2: rgba(237, 234, 221, 0.35);

  --color-card: rgba(255, 255, 255, 0.025);
  --color-card-hover: rgba(255, 255, 255, 0.045);
  --color-border: rgba(255, 255, 255, 0.06);
  --color-border-hover: rgba(255, 255, 255, 0.12);

  --color-accent: #c9a66b;
  --color-accent-light: #e0c48a;
  --color-accent-dim: #8b7340;
  --color-accent-bright: #fbdfbb;

  --color-diff-whisper: #5ec4d4;

  --radius-pill: 9999px;
  --shadow-card: 0 4px 24px -4px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  --shadow-card-hover: 0 8px 32px -4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --ease-glass: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* CJK glyphs have no coverage in Cormorant, so Latin keeps Cormorant while
     CJK is re-routed to the language-correct regional SANS face. */
  --font-display: "Cormorant Garamond Subset", "Cormorant Garamond", Georgia, "Times New Roman",
    "PingFang TC", "PingFang SC", "Hiragino Sans", "Microsoft JhengHei", "Microsoft YaHei",
    "Noto Sans CJK TC", "Noto Sans TC", sans-serif;
  --font-ornament: "Kawoszeh", "Cormorant Garamond Subset", "Cormorant Garamond", serif;

  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--color-background);
  color: var(--color-foreground);

  /* density tokens (fixed = comfortable) */
  --rail-w: 64px; --card-pad: 1.15rem; --gap: 1rem; --month-gap: 3rem;
  --art-banner-h: 200px; --art-thumb-h: 144px; --sticker-size: 66px;
  --title-size: 1.12rem; --desc-size: 0.9rem; --marker-size: 1.0rem;
  --section-name-size: 1.55rem;

  /* hero layout-driven props — mobile defaults */
  --hero-art-ratio: 16 / 9; --hero-art-pos: 50% 50%; --hero-art-maxh: none;
  --hero-copy-pad: 1.4rem 1.25rem 0; --hero-copy-align: center; --hero-text: center;
  --hero-logo-h: 86px; --hero-title-size: clamp(2rem, 7.5vw, 2.9rem);
  --legend-justify: center;
}

/* Traditional Chinese — orthodox 繁體 forms first.
   Noto Serif TC pairs with the serif Latin display; Noto Sans TC with the sans
   body. Both are placed ahead of the system faces so the loaded webfont wins. */
.rm-page[data-lang="zh-TW"] {
  --font-display: "Cormorant Garamond Subset", "Noto Serif TC Subset",
    "Cormorant Garamond", Georgia, "Times New Roman", "Noto Serif TC",
    "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei",
    "Noto Sans CJK TC", "Noto Sans TC", "Source Han Sans TC", sans-serif;
  --font-body: "Outfit Subset", "Noto Sans TC Subset",
    "Outfit", "Noto Sans TC", "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei",
    "Noto Sans CJK TC", "Noto Sans TC", "Source Han Sans TC", system-ui, sans-serif;
}
/* Simplified Chinese — 简体 forms first */
.rm-page[data-lang="zh-CN"] {
  --font-display: "Cormorant Garamond Subset", "Noto Serif SC Subset",
    "Cormorant Garamond", Georgia, "Times New Roman", "Noto Serif SC",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC", sans-serif;
  --font-body: "Outfit Subset", "Noto Sans SC Subset",
    "Outfit", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC", system-ui, sans-serif;
}
/* Japanese — JP kanji forms first */
.rm-page[data-lang="ja"] {
  --font-display: "Cormorant Garamond Subset", "Noto Serif JP Subset",
    "Cormorant Garamond", Georgia, "Times New Roman", "Noto Serif JP",
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo",
    "Noto Sans CJK JP", "Noto Sans JP", "Source Han Sans JP", sans-serif;
  --font-body: "Outfit Subset", "Noto Sans JP Subset",
    "Outfit", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo",
    "Noto Sans CJK JP", "Noto Sans JP", "Source Han Sans JP", system-ui, sans-serif;
}
/* Korean — Hangul faces first */
.rm-page[data-lang="ko"] {
  --font-display: "Cormorant Garamond Subset", "Noto Serif KR Subset",
    "Cormorant Garamond", Georgia, "Times New Roman", "Noto Serif KR",
    "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", "Noto Sans KR",
    "Source Han Sans KR", sans-serif;
  --font-body: "Outfit Subset", "Noto Sans KR Subset",
    "Outfit", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR",
    "Noto Sans KR", "Source Han Sans KR", system-ui, sans-serif;
}

/* ── Background layers ─────────────────────────────────────────────────── */
.rm-page .bg-keyart-blur { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: url("art/kv/kv-hero-blur.webp") no-repeat center top / cover;
  opacity: 0.72; }
.rm-page .bg-grad { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(201,166,107,0.07) 0%, rgba(5,8,17,0) 24%,
    rgba(5,8,17,0) 68%, rgba(94,196,212,0.05) 100%); }
.rm-page .wrap { max-width: 64rem; margin: 0 auto; padding: 0 1.5rem 1rem; position: relative; z-index: 10; }

/* ── desktop hero layout values ───────────────────────────────────────── */
@media (min-width: 900px) {
  .rm-page {
    --hero-art-ratio: 16 / 9; --hero-art-pos: 50% 50%; --hero-art-maxh: none;
    --hero-copy-pad: 1.8rem 1.5rem 0; --hero-copy-align: flex-start; --hero-text: left;
    --hero-logo-h: clamp(180px, 12.5vw, 248px); --hero-title-size: clamp(2.6rem, 3.6vw, 3.8rem);
    --legend-justify: flex-start;
  }
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.rm-page .hero { position: relative; isolation: isolate;
  width: 100vw; margin-left: calc(50% - 50vw); padding: 0 0 0.5rem; }
.rm-page .hero-inner { display: flex; flex-direction: column; align-items: stretch; gap: 0; }

.rm-page .hero-art { position: relative; order: -1; width: 100%;
  aspect-ratio: var(--hero-art-ratio); max-height: var(--hero-art-maxh); overflow: hidden; }
.rm-page .hero-art-img { display: block; width: 100%; height: 100%; object-fit: cover;
  object-position: center var(--hero-art-pos); opacity: 0.97; }
.rm-page .hero-art::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(5,8,17,0.35) 0%, rgba(5,8,17,0) 20%,
    rgba(5,8,17,0) 62%, var(--color-background) 100%); }
.rm-page .hero-art > span { position: absolute; width: clamp(28px, 5.5%, 60px); height: clamp(28px, 5.5%, 60px); z-index: 2; }
.rm-page .hf-bl, .rm-page .hf-br { display: none; }
.rm-page .hf-tl { top: 14px; left: 16px;  border-top: 2px solid rgba(201,166,107,0.5); border-left: 2px solid rgba(201,166,107,0.5); border-top-left-radius: 6px; }
.rm-page .hf-tr { top: 14px; right: 16px; border-top: 2px solid rgba(201,166,107,0.5); border-right: 2px solid rgba(201,166,107,0.5); border-top-right-radius: 6px; }

.rm-page .hero-copy { box-sizing: border-box; width: 100%; max-width: 64rem; margin: -1.4rem auto 0;
  padding: var(--hero-copy-pad); display: flex; flex-direction: column;
  align-items: var(--hero-copy-align); text-align: var(--hero-text); position: relative; z-index: 1; }
.rm-page .hero-eyebrow { display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-body); font-weight: 600; font-size: 0.72rem;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--color-accent); opacity: 0.85; }
.rm-page .hero-eb-dot { color: var(--color-muted-2); }
.rm-page .hero-logo { position: absolute; z-index: 3; left: 50%; bottom: 3%; transform: translateX(-50%);
  display: block; width: clamp(210px, 42vw, 430px); height: auto; max-height: 90%; margin: 0;
  object-fit: contain;
  filter: drop-shadow(0 2px 22px rgba(5,8,17,0.55)) drop-shadow(0 1px 10px rgba(201,166,107,0.28)); }
.rm-page .hero-title { font-family: var(--font-display); font-weight: 600;
  font-size: var(--hero-title-size); line-height: 1.06; letter-spacing: -0.01em;
  margin: 0.8rem 0 0.6rem; text-wrap: balance; }
.rm-page .hero-sub { color: var(--color-muted); font-size: clamp(0.9rem, 1.6vw, 1.02rem);
  max-width: 54rem; margin: 0; line-height: 1.6; text-wrap: pretty; }

.rm-page .legend { display: flex; flex-wrap: wrap; justify-content: var(--legend-justify); align-items: center;
  gap: 0.55rem 1.1rem; margin-top: 1.5rem; }
.rm-page .legend-label { font-family: var(--font-body); font-weight: 600; font-size: 0.62rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-muted-2);
  padding-right: 0.4rem; border-right: 1px solid var(--color-border); }
.rm-page .legend-item { display: inline-flex; align-items: center; gap: 0.42rem;
  font-size: 0.8rem; color: var(--color-muted); }
.rm-page .legend-dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 8px -1px currentColor; }

/* ── Timeline ─────────────────────────────────────────────────────────── */
/* The month grid is [rail | cards]; the rail's width biases the card column
   right of page-centre. Pull the whole timeline left by half the rail so the
   cards sit centred under the (centred) hero, while the rail rides the left
   margin. The hero/footer keep their own centring. */
.rm-page .timeline { position: relative; margin-top: 1.5rem;
  margin-left: calc(var(--rail-w) / -2); margin-right: calc(var(--rail-w) / 2); }
.rm-page .month { position: relative; display: grid; grid-template-columns: var(--rail-w) 1fr;
  padding-bottom: var(--month-gap); }

.rm-page .month-rail { position: relative; }
.rm-page .month-rail::before {
  content: ""; position: absolute; top: 4px; bottom: calc(-1 * var(--month-gap));
  left: calc(var(--rail-w) / 2 - 0.5px); width: 1px;
  background: linear-gradient(180deg, rgba(201,166,107,0.55), rgba(201,166,107,0.16));
}
.rm-page .month:last-child .month-rail::before {
  bottom: 0;
  background: linear-gradient(180deg, rgba(201,166,107,0.4), transparent);
}
.rm-page .month-soon .month-rail::before { background-image: none;
  background: repeating-linear-gradient(180deg, rgba(201,166,107,0.4) 0 5px, transparent 5px 11px); }
.rm-page .month-node {
  position: absolute; top: 2px; left: calc(var(--rail-w) / 2 - 7px);
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--color-accent-light), var(--color-accent) 55%, var(--color-accent-dim));
  box-shadow: 0 0 0 4px rgba(201,166,107,0.10), 0 0 14px -2px rgba(201,166,107,0.6);
}
.rm-page .month-soon .month-node {
  background: var(--color-background);
  border: 1.5px solid var(--color-accent); box-shadow: 0 0 0 4px rgba(201,166,107,0.07);
}

.rm-page .rail-sd { position: absolute; left: calc(var(--rail-w) / 2);
  transform-origin: center bottom; pointer-events: none; z-index: 2;
  opacity: 0.92; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45));
  image-rendering: auto; }
@media (max-width: 600px) { .rm-page .rail-sd { display: none; } }

.rm-page .month-body { min-width: 0; padding-left: 0.4rem; }
.rm-page .month-head { margin-bottom: 0.2rem; }
.rm-page .month-marker-row { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
.rm-page .month-marker { font-family: var(--font-body); font-weight: 600; color: var(--color-accent);
  font-size: var(--marker-size); letter-spacing: 0.06em; }
.rm-page .month-year { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em;
  color: var(--color-muted-2); }
.rm-page .month-title { font-family: var(--font-display); font-weight: 600; color: var(--color-foreground);
  font-size: var(--section-name-size); line-height: 1.15; letter-spacing: -0.01em;
  margin: 0.15rem 0 0; }

/* ── Cards grid ───────────────────────────────────────────────────────── */
.rm-page .cards { display: grid; grid-template-columns: 1fr; gap: var(--gap); margin-top: 1.1rem; }
@media (min-width: 880px) { .rm-page .cards { grid-template-columns: 1fr 1fr; } }
.rm-page .rc-featured { grid-column: 1 / -1; }
.rm-page .cards:has(> .rc:only-child) > .rc { grid-column: 1 / -1; }

.rm-page .rc { overflow: hidden; display: flex; flex-direction: column; position: relative; }
.rm-page .rc-has-sticker { overflow: visible; }

/* category color carried by the card itself (border · tint · hover glow) */
.rm-page .timeline .rc {
  border: 1px solid color-mix(in oklab, var(--bk) 30%, var(--color-border));
  background:
    linear-gradient(157deg, var(--bk-tint) 0%, transparent 48%),
    rgba(5,8,17,0.42),
    var(--color-card);
  box-shadow: var(--shadow-card);
  transition: border-color 0.35s var(--ease-glass), box-shadow 0.35s var(--ease-glass),
    background 0.35s var(--ease-glass), transform 0.35s var(--ease-glass);
}
.rm-page .timeline .rc:hover {
  border-color: var(--bk-line);
  background:
    linear-gradient(157deg, var(--bk-tint) 0%, transparent 44%),
    rgba(5,8,17,0.42),
    var(--color-card-hover, var(--color-card));
  box-shadow: var(--shadow-card-hover), 0 0 34px -10px var(--bk);
  transform: translateY(-2px);
}
.rm-page .rc-body { padding: var(--card-pad); display: flex; flex-direction: column; gap: 0.5rem; flex: 1;
  position: relative; z-index: 6; }
.rm-page .rc-has-sticker .rc-body { border-radius: inherit; }

/* ── Scattered decorations (cards without a main image) ───────────────── */
.rm-page .rc-deco { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.rm-page .deco-slot { position: absolute;
  transform: rotate(var(--rot, 0deg));
  transition: transform 0.3s var(--ease-out, ease);
  filter: drop-shadow(0 7px 16px rgba(0,0,0,0.5)); }
.rm-page .rc:hover .deco-slot { transform: rotate(0deg) scale(1.06); }
.rm-page .deco-slot img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* real illustration banner */
.rm-page .rc-art { position: relative; width: 100%; overflow: hidden;
  border-bottom: 1px solid var(--art-line); background: #0a0e1a; }
.rm-page .rc-art-banner { height: var(--art-banner-h); }
.rm-page .rc-art-thumb  { height: var(--art-thumb-h); }
.rm-page .rc-art-img { display: block; width: 100%; height: 100%; object-fit: cover;
  object-position: var(--art-pos, center 42%); }
.rm-page .rc-art-fade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(5,8,17,0.18) 0%, rgba(5,8,17,0) 26%,
    rgba(5,8,17,0) 64%, rgba(5,8,17,0.55) 100%); }
.rm-page .rc-featured .rc-art-img { object-position: var(--art-pos, center 40%); }

/* placeholder art */
.rm-page .ph-art { position: relative; width: 100%; display: grid; place-items: center;
  background-color: rgba(255,255,255,0.015);
  background-image:
    repeating-linear-gradient(135deg, var(--art-line) 0 1px, transparent 1px 13px),
    linear-gradient(160deg, var(--art-tint), transparent 62%);
  border-bottom: 1px solid var(--color-border); }
.rm-page .ph-banner { height: var(--art-banner-h); }
.rm-page .ph-thumb  { height: var(--art-thumb-h); }
.rm-page .ph-label { display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-muted-2); }
.rm-page .ph-corner { position: absolute; width: 13px; height: 13px; opacity: 0.5; }
.rm-page .ph-tl { top: 9px; left: 9px; border-top: 1.5px solid var(--art-color); border-left: 1.5px solid var(--art-color); }
.rm-page .ph-tr { top: 9px; right: 9px; border-top: 1.5px solid var(--art-color); border-right: 1.5px solid var(--art-color); }
.rm-page .ph-bl { bottom: 9px; left: 9px; border-bottom: 1.5px solid var(--art-color); border-left: 1.5px solid var(--art-color); }
.rm-page .ph-br { bottom: 9px; right: 9px; border-bottom: 1.5px solid var(--art-color); border-right: 1.5px solid var(--art-color); }

/* corner sticker (chibi shown as circle) */
.rm-page .ph-sticker { position: absolute; top: -12px; right: -8px; z-index: 6;
  width: var(--sticker-size); height: var(--sticker-size); border-radius: 50%;
  padding: 3px; transform: rotate(4deg);
  background: linear-gradient(150deg, rgba(237,234,221,0.55), rgba(237,234,221,0.12));
  box-shadow: 0 6px 18px -5px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,0,0,0.35);
  transition: transform 0.25s var(--ease-out, ease); }
.rm-page .rc-has-sticker:hover .ph-sticker { transform: rotate(0deg) scale(1.04); }
.rm-page .ph-sticker-inner { display: grid; place-items: center; width: 100%; height: 100%;
  border-radius: 50%; overflow: hidden;
  background-color: var(--color-card);
  background-image:
    repeating-linear-gradient(135deg, var(--art-line) 0 1px, transparent 1px 7px),
    radial-gradient(circle at 38% 32%, var(--art-tint), transparent 72%);
  box-shadow: inset 0 0 0 1px var(--art-line); }
.rm-page .ph-sticker-inner img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* meta row */
.rm-page .rc-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.rm-page .rc-chip { display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.18rem 0.6rem; border-radius: var(--radius-pill);
  border: 1px solid; font-family: var(--font-body); font-weight: 600;
  font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.rm-page .rc-dot { width: 6px; height: 6px; border-radius: 50%; }
.rm-page .rc-date { display: inline-flex; align-items: center; gap: 0.32rem;
  font-family: var(--font-mono); font-size: 0.74rem; color: var(--color-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.rm-page .rc-date-tba { color: var(--color-muted-2); text-transform: uppercase; letter-spacing: 0.08em;
  font-family: var(--font-body); font-size: 0.66rem; font-weight: 600; }

.rm-page .rc-title { font-family: var(--font-body); font-weight: 600; color: var(--color-foreground);
  font-size: var(--title-size); line-height: 1.28; margin: 0.1rem 0 0; text-wrap: pretty; }
.rm-page .rc-featured .rc-title { font-family: var(--font-display); font-weight: 600;
  font-size: calc(var(--title-size) * 1.5); letter-spacing: -0.005em; }
.rm-page .rc-featured.rc-small-title .rc-title { font-family: var(--font-body);
  font-size: var(--title-size); letter-spacing: 0; }
.rm-page .rc-desc { font-family: var(--font-body); font-size: var(--desc-size); line-height: 1.55;
  color: rgba(237,234,221,0.72); margin: 0; text-wrap: pretty; white-space: pre-line; }

/* tracklist */
.rm-page .rc-tracks { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.3rem; }
.rm-page .rc-track { display: flex; align-items: baseline; gap: 0.45rem;
  font-family: var(--font-body); font-size: var(--desc-size); line-height: 1.45; color: rgba(237,234,221,0.72); }
.rm-page .rc-track-mark { flex: 0 0 auto; font-size: 0.82em; transform: translateY(0.02em); }
.rm-page .rc-track-text { flex: 1 1 auto; min-width: 0; text-wrap: pretty; }
.rm-page .rc-track-name { color: rgba(237,234,221,0.72); }
.rm-page .rc-track-sep { color: rgba(237,234,221,0.32); }
.rm-page .rc-track-artist { color: rgba(237,234,221,0.72); }
.rm-page .rc-tracks-cta { font-family: var(--font-body); font-size: var(--desc-size);
  line-height: 1.55; color: rgba(237,234,221,0.72); margin: 0.5rem 0 0; text-wrap: pretty; }

/* grouped tracklists */
.rm-page .rc-track-group { margin: 0.65rem 0 0; }
.rm-page .rc-track-head { font-family: var(--font-body); font-weight: 600; font-size: var(--desc-size);
  line-height: 1.5; color: rgba(237,234,221,0.86); margin: 0 0 0.3rem; text-wrap: pretty; }
.rm-page .rc-track-group .rc-tracks { margin-top: 0; }
.rm-page .rc-note { font-family: var(--font-body); font-size: calc(var(--desc-size) * 0.86);
  line-height: 1.45; color: rgba(237,234,221,0.5); margin: 0; text-wrap: pretty; }
.rm-page .rc-note-after { margin-top: 0.5rem; }

/* coda */
.rm-page .rc-coda { margin-top: 0.7rem; padding-top: 0.6rem;
  border-top: 1px solid color-mix(in oklab, var(--bk) 28%, transparent); }
.rm-page .rc-coda-lead { font-family: var(--font-body); font-weight: 600;
  font-size: var(--title-size); line-height: 1.28;
  color: var(--color-foreground); margin: 0 0 0.3rem; text-wrap: pretty; }
.rm-page .rc-coda-text { font-family: var(--font-body); font-size: var(--desc-size);
  line-height: 1.45; color: rgba(237,234,221,0.8); margin: 0; text-wrap: pretty; }
.rm-page .rc-bullets-lead { font-family: var(--font-body); font-weight: 600; font-size: var(--desc-size);
  line-height: 1.5; color: rgba(237,234,221,0.86); margin: 0.5rem 0 0.3rem; text-wrap: pretty; }

/* bullets */
.rm-page .rc-bullets { list-style: none; margin: 0.2rem 0 0; padding: 0; display: grid; gap: 0.36rem; }
.rm-page .rc-featured .rc-bullets { grid-template-columns: 1fr; gap: 0.4rem; margin-top: 0.4rem; }
.rm-page .rc-bullets li { display: flex; align-items: baseline; gap: 0.5rem;
  font-family: var(--font-body); font-size: var(--desc-size);
  color: rgba(237,234,221,0.8); line-height: 1.4; }
.rm-page .rc-bullet-mark { font-size: 0.42rem; transform: translateY(-0.18em); flex-shrink: 0; }

/* rich (nested) bullet list */
.rm-page .rc-featured .rc-bullets-rich { grid-template-columns: 1fr; gap: 0.5rem; }
.rm-page .rc-bullets-rich > li { flex-wrap: wrap; font-weight: 500; color: rgba(237,234,221,0.92); }
.rm-page .rc-subbullets { list-style: none; margin: 0.34rem 0 0 0; padding: 0;
  flex-basis: 100%; display: grid; gap: 0.3rem; }
.rm-page .rc-subbullets li { display: flex; align-items: baseline; gap: 0.5rem;
  font-family: var(--font-body); font-size: var(--desc-size);
  font-weight: 500; color: rgba(237,234,221,0.9); line-height: 1.45; }
.rm-page .rc-subbullet-mark { font-size: 0.42rem; transform: translateY(-0.18em); flex-shrink: 0; }

/* event-period line */
.rm-page .rc-period { display: flex; align-items: center; flex-wrap: wrap; gap: 0.28rem 0.55rem; margin: 0.3rem 0 0; }
.rm-page .rc-period > svg { color: var(--color-accent); flex-shrink: 0; }
.rm-page .rc-period-label { font-family: var(--font-body); font-weight: 600; font-size: 0.62rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent); }
.rm-page .rc-period-time { font-family: var(--font-mono); font-size: 0.78rem;
  font-variant-numeric: tabular-nums; color: var(--color-foreground); letter-spacing: 0.01em; }

/* ── Footer ───────────────────────────────────────────────────────────── */
.rm-page .rm-footer { margin: 1rem 0 2.5rem; position: relative; z-index: 10; }
.rm-page .footer-mark { text-align: center; font-family: var(--font-display); font-size: 26px;
  letter-spacing: 0.18em; color: rgba(201,166,107,0.22); user-select: none; margin: 1.4rem 0; }
.rm-page .footer-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  flex-wrap: wrap; font-size: 0.74rem; color: var(--color-muted); }
.rm-page .footer-left { display: flex; align-items: center; gap: 0.55rem; }
.rm-page .footer-left img { height: 48px; width: auto; opacity: 0.78; }
.rm-page .footer-sep { color: rgba(237,234,221,0.25); }
.rm-page .footer-copy { color: var(--color-muted-2); margin: 0; font-size: 0.72rem; }

/* ── Mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .rm-page { --rail-w: 34px; }
  .rm-page .wrap { padding: 0 1rem 1rem; }
  /* zero side padding keeps the full-bleed hero art symmetric; no top gap */
  .rm-page .hero { padding: 0 0 1.5rem; }
  /* recentre the cards; shift by the 1rem wrap padding, not the full rail/2,
     so the rail dots are never clipped at the viewport edge */
  .rm-page .timeline { margin-left: -1rem; margin-right: 1rem; }
  .rm-page .month-body { padding-left: 0.1rem; }
  /* mobile-only object-position override via --art-pos-m; inline style can't be
     media-queried, so the value rides a CSS var. Falls back to --art-pos, then base. */
  .rm-page .rc-art-img { object-position: var(--art-pos-m, var(--art-pos, center 42%)); }
  /* featured rule must be repeated inside the media query — .rc-featured .rc-art-img
     has higher specificity and would otherwise beat the mobile override above */
  .rm-page .rc-featured .rc-art-img { object-position: var(--art-pos-m, var(--art-pos, center 40%)); }
  /* mobile-only banner height via aspect-ratio (--art-ar-m). A fixed height would
     override aspect-ratio, so --art-h-m must be set to auto alongside the ratio;
     both fall back so untouched cards keep the fixed --art-banner-h. */
  .rm-page .rc-art-banner { height: var(--art-h-m, var(--art-banner-h)); aspect-ratio: var(--art-ar-m, auto); }
}

@media (prefers-reduced-motion: reduce) {
  .rm-page .deco-slot, .rm-page .ph-sticker, .rm-page .timeline .rc { transition: none !important; }
}