/* =============================================================
   SHEARTY.com — stylesheet
   -------------------------------------------------------------
   目次 (このファイル内の見出しジャンプ用):
     1.  ROOT VARIABLES        変数（色・フォント・余白など）
     2.  RESET / BASE          リセットと基本スタイル
     3.  LAYOUT HELPERS        コンテナ・セクション共通クラス
     4.  ACCESSIBILITY         スキップリンク・フォーカス
     5.  BUTTONS & LINKS       ボタン・リンクの共通部品
     6.  HEADER / NAV          ヘッダーとナビゲーション
     7.  MOBILE NAV            スマホ用メニュー
     8.  HERO                  トップのヒーローセクション
     9.  SECTION HEAD          各セクション共通の見出し部品
     10. CONCEPT               思想セクション（分岐ダイアグラム）
     11. ARTIST CARDS          アーティストカード
     12. RELEASE / DISCOGRAPHY 作品カード・一覧
     13. MOVIES                映像カード
     14. NEWS                  お知らせ一覧
     15. PAGE HEADER (SUB)     下層ページの見出しバナー
     16. ARTIST PROFILE        アーティスト個別ページ
     17. CONTACT FORM          お問い合わせフォーム
     18. FOOTER                フッター
     19. REVEAL / MOTION       スクロール表示アニメーション
     20. UTILITIES             汎用クラス

   保守メモ:
   - 色やフォントを変えたいときは「1. ROOT VARIABLES」だけ直せば
     サイト全体に反映されます。
   - 各コンポーネントのレスポンシブ対応は、そのコンポーネントの
     すぐ下に @media を書く方式にしています（ファイル末尾に
     まとめていません）。
   ============================================================= */

/* -------------------------------------------------------------
   1. ROOT VARIABLES
   ------------------------------------------------------------- */
:root {
  /* Color — black / white / gray + kidou purple */
  --c-black: #0b0a0d;
  --c-black-soft: #131218;
  --c-surface: #17161d;
  --c-surface-2: #1c1a23;
  --c-line: #2a2732;
  --c-line-soft: #201e27;
  --c-white: #f2f0f5;
  --c-gray: #9a97a3;
  --c-gray-dim: #6f6c78;
  --c-accent: #9a4dff;
  --c-accent-hi: #b26bff;
  --c-accent-deep: #3d1e73;
  --c-accent-soft: #c9a9ff;

  /* Prism — Shearty独自のRed/Purple/Blue分光。Green不使用。
     CTAボタンの塗り・Navigation背景・Badge・Card背景・本文・常時表示UIには
     絶対に使わない。Hero visual／Artworkの縁／section transition／
     ごく弱いhover chromatic shiftの中だけに存在する（SHEARTY_DESIGN.md 2章）。 */
  --c-prism-red: #ff3d5c;
  --c-prism-blue: #3d6bff;

  /* Type */
  --font-display: 'Unbounded', 'Zen Kaku Gothic New', sans-serif;
  --font-editorial: 'Fraunces', 'Cormorant Garamond', serif;
  --font-jp: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  --font-mono: 'Space Mono', 'DejaVu Sans Mono', monospace;

  --fs-h1: clamp(2rem, 1.4rem + 2.4vw, 3.4rem);
  --fs-h2: clamp(1.6rem, 1.3rem + 1.2vw, 2.35rem);
  --fs-h3: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
  --fs-body: 1rem;
  --fs-lead: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.78rem;

  /* Space */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 10rem;

  /* Layout */
  --container-w: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --header-h: 84px;

  /* Misc — 角丸は最低限。SaaS Dashboardのような見た目にしない */
  --radius-sm: 1px;
  --radius-md: 2px;
  /* Motion: ゆっくり始まり明確に止まるcurve（Vivid+Co由来のsignature ease） */
  --ease: cubic-bezier(0.52, 0.01, 0, 1);
  --dur-fast: 150ms;
  --dur-med: 480ms;
  --dur-slow: 640ms;
  --shadow-card: none;
}

/* -------------------------------------------------------------
   2. RESET / BASE
   ------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--c-black);
  color: var(--c-white);
  font-family: var(--font-jp);
  font-size: var(--fs-body);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.no-scroll {
  overflow: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
p,
figure {
  margin: 0;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3 {
  font-family: var(--font-jp);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-accent-soft);
}

.eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

.lead {
  font-size: var(--fs-lead);
  color: var(--c-gray);
  line-height: 1.85;
}

/* -------------------------------------------------------------
   3. LAYOUT HELPERS
   ------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

main {
  display: block;
}

.section {
  position: relative;
  padding-block: var(--space-2xl);
}

@media (min-width: 900px) {
  .section {
    padding-block: var(--space-3xl);
  }
}

.section--tight {
  padding-block: var(--space-xl);
}

.section--alt {
  background: linear-gradient(180deg, var(--c-black) 0%, var(--c-black-soft) 100%);
  border-top: 1px solid var(--c-line-soft);
  border-bottom: 1px solid var(--c-line-soft);
}

/* TOP background light: extracted from the supplied reference CSS.
   One violet source per section; existing void/closing backgrounds remain.
   Isolated decorative layer stays behind content and cannot intercept input. */
.home-page main > .section { isolation: isolate; }
.home-page main > .section > .container { position: relative; z-index: 1; }
.home-page :is(#manifesto, #artists, #discography, #movies, #news, #archives)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.home-page #manifesto::before {
  background: radial-gradient(46% 42% at 18% 0%, rgba(154, 77, 255, 0.15), transparent 72%);
}
.home-page #artists::before {
  background: radial-gradient(40% 46% at 90% 45%, rgba(154, 77, 255, 0.13), transparent 72%);
}
.home-page #discography::before {
  background: radial-gradient(44% 40% at 10% 100%, rgba(154, 77, 255, 0.14), transparent 72%);
}
.home-page #movies::before {
  background: radial-gradient(38% 44% at 92% 10%, rgba(154, 77, 255, 0.13), transparent 72%);
}
.home-page #news::before {
  background: radial-gradient(42% 38% at 88% 95%, rgba(154, 77, 255, 0.14), transparent 72%);
}
.home-page #archives::before {
  background: radial-gradient(48% 44% at 8% 35%, rgba(154, 77, 255, 0.14), transparent 72%);
}

.section--closing {
  text-align: center;
  background: radial-gradient(60% 80% at 50% 100%, rgba(154, 77, 255, 0.18), transparent 70%),
    var(--c-black);
  border-top: 1px solid var(--c-line-soft);
}

.section--closing .section-head {
  justify-content: center;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.section--closing .section-head__sub {
  max-width: 50ch;
  margin-inline: auto;
}

.section--closing__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
  margin-top: var(--space-lg);
}

.section--closing__social {
  margin-top: var(--space-2xl);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--c-gray);
}

.section--closing__social a {
  transition: color var(--dur-fast) var(--ease);
}

.section--closing__social a:hover {
  color: var(--c-accent-soft);
}

/* -------------------------------------------------------------
   4. ACCESSIBILITY
   ------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: -60px;
  left: var(--space-md);
  z-index: 500;
  background: var(--c-accent);
  color: var(--c-white);
  padding: 0.75em 1.25em;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  transition: top var(--dur-fast) var(--ease);
}

.skip-link:focus {
  top: var(--space-md);
}

:focus-visible {
  outline: 2px solid var(--c-accent-soft);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* -------------------------------------------------------------
   5. BUTTONS & LINKS
   ------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  padding: 0.95em 1.9em;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  background: transparent;
  border: 1px solid var(--c-white);
  border-radius: var(--radius-sm);
  transition: background-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.btn-primary {
  color: var(--c-white);
}

.btn-primary:hover {
  background: var(--c-white);
  color: var(--c-black);
}

.btn-outline {
  color: var(--c-white);
  border-color: var(--c-line);
}

.btn-outline:hover {
  border-color: var(--c-white);
}

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.05em;
  color: var(--c-white);
  border-bottom: 1px solid var(--c-line);
  padding-bottom: 0.3em;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.arrow-link svg {
  width: 14px;
  height: 14px;
  transition: transform var(--dur-fast) var(--ease);
}

.arrow-link:hover {
  color: var(--c-accent-soft);
  border-color: var(--c-accent-soft);
}

.arrow-link:hover svg {
  transform: translateX(4px);
}

/* -------------------------------------------------------------
   6. HEADER / NAV
   ------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease),
    backdrop-filter var(--dur-med) var(--ease);
}

.site-header.is-scrolled {
  background: rgba(11, 10, 13, 0.5);
  border-bottom-color: var(--c-line-soft);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--c-white);
}

.brand__mark {
  display: block;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.brand__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.main-nav {
  display: none;
}

@media (min-width: 1100px) {
  .main-nav {
    display: block;
  }

  .main-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
  }

  .main-nav__list a {
    position: relative;
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    letter-spacing: 0.06em;
    color: var(--c-gray);
    padding-block: 0.4em;
    transition: color var(--dur-fast) var(--ease);
  }

  .main-nav__list a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 1px;
    background: var(--c-accent-soft);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-fast) var(--ease);
  }

  .main-nav__list a:hover,
  .main-nav__list a:focus-visible {
    color: var(--c-white);
  }

  .main-nav__list a:hover::after,
  .main-nav__list a:focus-visible::after {
    transform: scaleX(1);
  }

  .main-nav__list a.is-current {
    color: var(--c-white);
  }

  .main-nav__list a.is-current::after {
    transform: scaleX(1);
  }

  .main-nav__cta {
    border: 1px solid var(--c-line);
    border-radius: var(--radius-sm);
    padding: 0.55em 1.1em !important;
    color: var(--c-white) !important;
  }

  .main-nav__cta::after {
    display: none;
  }

  .main-nav__cta:hover {
    border-color: var(--c-accent-soft);
    background: rgba(154, 77, 255, 0.1);
  }
}

/* -------------------------------------------------------------
   7. MOBILE NAV
   ------------------------------------------------------------- */
.menu-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
  width: 40px;
  height: 40px;
}

@media (min-width: 1100px) {
  .menu-toggle {
    display: none;
  }
}

.menu-toggle__bar {
  display: block;
  height: 1.5px;
  background: var(--c-white);
  border-radius: 2px;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease),
    width var(--dur-fast) var(--ease);
  width: 26px;
}

.menu-toggle__bar:nth-child(2) {
  width: 19px;
}

.menu-toggle[aria-expanded='true'] .menu-toggle__bar {
  width: 26px;
}

.menu-toggle[aria-expanded='true'] .menu-toggle__bar:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}

.menu-toggle[aria-expanded='true'] .menu-toggle__bar:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded='true'] .menu-toggle__bar:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--c-black);
  padding-top: var(--header-h);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease),
    visibility 0s linear var(--dur-med);
}

.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease),
    visibility 0s linear 0s;
}

@media (min-width: 1100px) {
  .mobile-nav {
    display: none;
  }
}

.mobile-nav__list {
  padding: var(--space-xl) var(--container-pad);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.mobile-nav__list a {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 8vw, 2.4rem);
  font-weight: 600;
  color: var(--c-white);
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
}

.mobile-nav__list a.is-current {
  color: var(--c-accent-soft);
}

.mobile-nav__foot {
  padding: var(--space-lg) var(--container-pad) var(--space-xl);
  border-top: 1px solid var(--c-line-soft);
}

.mobile-nav__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--c-gray);
}

/* -------------------------------------------------------------
   8. HERO
   ------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--header-h);
  overflow: hidden;
  isolation: isolate;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: radial-gradient(50% 45% at 82% 20%, rgba(154, 77, 255, 0.16), transparent 72%),
    radial-gradient(40% 35% at 6% 94%, rgba(61, 30, 115, 0.32), transparent 72%),
    var(--c-black);
}

.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(242, 240, 245, 0.035) 0,
    rgba(242, 240, 245, 0.035) 1px,
    transparent 1px,
    transparent 54px
  );
  mix-blend-mode: overlay;
}

/* --- Prism: Shearty独自のRed/Purple/Blue分光。Hero visualの中だけの表現 --- */
.hero__prism {
  position: absolute;
  z-index: -1;
  top: 50%;
  right: clamp(-4rem, 2vw, 4rem);
  transform: translateY(-50%);
  width: clamp(280px, 36vw, 560px);
  aspect-ratio: 400 / 420;
  pointer-events: none;
}

.hero__prism-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(56px);
  mix-blend-mode: screen;
  will-change: transform;
}

.hero__prism-glow--purple {
  width: 66%;
  height: 66%;
  left: 17%;
  top: 16%;
  background: var(--c-accent);
  opacity: 0.55;
}

.hero__prism-glow--red {
  width: 42%;
  height: 42%;
  left: 0%;
  top: 40%;
  background: var(--c-prism-red);
  opacity: 0.32;
}

.hero__prism-glow--blue {
  width: 42%;
  height: 42%;
  right: 2%;
  top: 46%;
  background: var(--c-prism-blue);
  opacity: 0.32;
}

.hero__prism-facets {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero__prism-facets polygon,
.hero__prism-facets line {
  fill: none;
  stroke: var(--c-white);
  stroke-width: 1;
  opacity: 0.22;
}

@media (prefers-reduced-motion: no-preference) {
  .hero__prism-glow {
    animation: prismShimmer 7.2s ease-in-out infinite alternate;
  }

  .hero__prism-glow--red {
    animation-duration: 8.4s;
    animation-delay: -2.5s;
  }

  .hero__prism-glow--blue {
    animation-duration: 6.6s;
    animation-delay: -4.2s;
  }
}

@keyframes prismShimmer {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(2%, -3%) scale(1.06);
  }
  100% {
    transform: translate(-2%, 2%) scale(0.97);
  }
}

@media (max-width: 720px) {
  .hero__prism {
    width: clamp(220px, 62vw, 340px);
    right: 50%;
    top: 62%;
    transform: translate(50%, -50%);
    opacity: 0.7;
  }
}

.hero__inner {
  padding-block: var(--space-2xl);
}

.hero__eyebrow {
  margin-bottom: var(--space-md);
}

.hero__title-row {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 2.6vw, 1.75rem);
}

.hero__title {
  flex: 1 1 auto;
  min-width: 0;
}

.hero__title svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.hero__title text {
  font-family: var(--font-display);
  font-weight: 500;
  fill: var(--c-white);
}

.hero__logo {
  flex-shrink: 0;
  width: clamp(44px, 8.5vw, 128px);
  height: clamp(44px, 8.5vw, 128px);
  border-radius: var(--radius-sm);
  filter: drop-shadow(0 0 22px rgba(154, 77, 255, 0.4));
}

.hero__statement {
  margin-top: var(--space-lg);
  max-width: 18ch;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: clamp(1.7rem, 1.2rem + 2.4vw, 3.1rem);
  line-height: 1.4;
  color: var(--c-white);
}

.hero__scroll {
  position: absolute;
  left: var(--container-pad);
  bottom: var(--space-lg);
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-gray);
}

.hero__scroll-line {
  width: 1px;
  height: 46px;
  background: linear-gradient(to bottom, var(--c-accent-soft), transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .hero__scroll-line {
    animation: scrollPulse 2.4s ease-in-out infinite;
  }
}

@keyframes scrollPulse {
  0%,
  100% {
    opacity: 0.4;
    transform: scaleY(0.7);
    transform-origin: top;
  }
  50% {
    opacity: 1;
    transform: scaleY(1);
    transform-origin: top;
  }
}

@media (max-width: 640px) {
  .hero__scroll {
    display: none;
  }
}

/* -------------------------------------------------------------
   9. SECTION HEAD
   ------------------------------------------------------------- */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.section-head__title {
  margin-top: var(--space-2xs);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h1);
  color: var(--c-white);
}

.section-head__sub {
  margin-top: var(--space-xs);
  color: var(--c-gray);
  font-size: var(--fs-body);
  max-width: 46ch;
}

/* -------------------------------------------------------------
   10. MANIFESTO / FEATURED RELEASE
   ------------------------------------------------------------- */
.concept__grid {
  display: grid;
  gap: var(--space-2xl);
  align-items: start;
}

@media (min-width: 980px) {
  .concept__grid {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-2xl);
  }
}

.concept__eyebrow {
  margin-bottom: var(--space-md);
}

.concept__title {
  font-family: var(--font-jp);
  font-weight: 600;
  font-size: var(--fs-h1);
  color: var(--c-white);
  max-width: 16ch;
}

.concept__text {
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  color: var(--c-gray);
  font-size: var(--fs-body);
  max-width: 52ch;
}

.concept__text strong {
  color: var(--c-white);
  font-weight: 700;
}

/* Editorial: 巨大なStatementに対して、精密で小さなMetadataを対比させる（EPIC由来） */
.manifesto__roster {
  padding-top: var(--space-xs);
}

@media (min-width: 980px) {
  .manifesto__roster {
    padding-top: 6.5rem;
  }
}

.manifesto__roster-label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-gray-dim);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--c-line);
}

.manifesto__roster-list li {
  font-family: var(--font-jp);
  font-size: 1.05rem;
  color: var(--c-white);
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--c-line-soft);
}

.manifesto__roster-list li:last-child {
  border-bottom: none;
}

/* --- Featured Release: EPICの Black Media Void を応用 --- */
.section--void {
  position: relative;
  background: var(--c-black);
  overflow: hidden;
}

.section--void::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(55% 45% at 50% 0%, rgba(61, 30, 115, 0.28), transparent 72%);
  pointer-events: none;
}

.featured-release {
  position: relative;
  display: grid;
  gap: var(--space-2xl);
  align-items: center;
}

@media (min-width: 900px) {
  .featured-release {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

.featured-release__media {
  aspect-ratio: 1 / 1;
  background: var(--c-black);
  overflow: hidden;
}

.featured-release__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featured-release__title {
  margin-top: var(--space-md);
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2.4rem, 1.6rem + 3.4vw, 5rem);
  line-height: 1.05;
  color: var(--c-white);
}

.featured-release__credit {
  margin-top: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  color: var(--c-gray);
}

.featured-release__info .arrow-link {
  margin-top: var(--space-lg);
}

/* -------------------------------------------------------------
   11. ARTIST CARDS
   ------------------------------------------------------------- */
.artist-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg) var(--space-md);
}

.artist-card--featured {
  grid-column: 1 / -1;
}

@media (max-width: 860px) {
  .artist-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .artist-grid {
    grid-template-columns: 1fr;
  }
}

.artist-card {
  position: relative;
  display: block;
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--c-surface);
  transition: border-color var(--dur-med) var(--ease);
}

.artist-card:hover,
.artist-card:focus-visible {
  border-color: var(--c-accent);
}

.artist-card__frame {
  position: relative;
  aspect-ratio: 5 / 7;
  overflow: hidden;
  background: var(--c-black-soft);
}

.artist-card--featured .artist-card__frame {
  aspect-ratio: 5 / 3;
}

.artist-card__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}

.artist-card:hover .artist-card__frame img,
.artist-card:focus-visible .artist-card__frame img {
  transform: scale(1.05);
}

.artist-card__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(11, 10, 13, 0.92) 100%);
}

.artist-card__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: var(--space-md);
}

.artist-card__role {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-accent-soft);
  margin-bottom: 0.4em;
}

.artist-card__name {
  font-family: var(--font-jp);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  font-weight: 600;
  color: var(--c-white);
}

.artist-card__alt {
  display: block;
  margin-top: 0.2em;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--c-gray);
}

.artist-card__go {
  position: absolute;
  right: var(--space-md);
  bottom: var(--space-md);
  z-index: 1;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(242, 240, 245, 0.35);
  border-radius: 50%;
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease);
}

.artist-card__go svg {
  width: 14px;
  height: 14px;
}

.artist-card:hover .artist-card__go,
.artist-card:focus-visible .artist-card__go {
  border-color: var(--c-accent-soft);
  background: var(--c-accent);
  transform: rotate(45deg);
}

/* -------------------------------------------------------------
   12. RELEASE / DISCOGRAPHY
   ------------------------------------------------------------- */
.release-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-lg) var(--space-md);
}

.release-card {
  display: block;
}

.release-card__cover {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--c-black-soft);
}

.release-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}

.release-card:hover .release-card__cover img {
  transform: scale(1.04);
}

.release-card__meta {
  margin-top: var(--space-sm);
}

.release-card__cat {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--c-gray-dim);
  letter-spacing: 0.05em;
  margin-bottom: 0.3em;
}

.release-card__title {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--c-white);
}

.release-card__artist {
  margin-top: 0.2em;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--c-gray);
}

.release-list {
  display: flex;
  flex-direction: column;
}

.release-row {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  align-items: center;
  gap: var(--space-md);
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--c-line-soft);
}

.release-row__cover {
  width: 76px;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--c-line-soft);
}

.release-row__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.release-row__cat {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--c-gray-dim);
  letter-spacing: 0.05em;
  margin-bottom: 0.25em;
}

.release-row__title {
  font-weight: 700;
  color: var(--c-white);
}

.release-row__artist {
  margin-top: 0.15em;
  font-size: var(--fs-small);
  color: var(--c-gray);
}

.release-row__tag {
  justify-self: end;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--c-accent-soft);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  padding: 0.4em 0.7em;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .release-row {
    grid-template-columns: 56px 1fr;
  }
  .release-row__tag {
    grid-column: 2;
    justify-self: start;
    margin-top: 0.4em;
  }
}

/* -------------------------------------------------------------
   13. MOVIES
   ------------------------------------------------------------- */
.movie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg) var(--space-md);
}

.movie-card__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c-black-soft);
}

.movie-card__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}

.movie-card:hover .movie-card__frame img {
  transform: scale(1.04);
}

.movie-card__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* --- Click-to-load 用のPlay Buttonオーバーレイ --- */
.movie-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 10, 13, 0.22);
  cursor: pointer;
  border: 0;
  padding: 0;
  transition: background var(--dur-fast) var(--ease);
}

.movie-card__play:hover,
.movie-card__play:focus-visible {
  background: rgba(11, 10, 13, 0.4);
}

.movie-card__play-icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-white);
  border-radius: 50%;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.movie-card__play:hover .movie-card__play-icon,
.movie-card__play:focus-visible .movie-card__play-icon {
  background: var(--c-white);
  transform: scale(1.06);
}

.movie-card__play-icon svg {
  width: 18px;
  height: 18px;
  margin-left: 3px;
  color: var(--c-white);
}

.movie-card__play:hover .movie-card__play-icon svg,
.movie-card__play:focus-visible .movie-card__play-icon svg {
  color: var(--c-black);
}

.movie-card__meta {
  margin-top: var(--space-sm);
}

.movie-card__type {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--c-accent-soft);
  letter-spacing: 0.06em;
  margin-bottom: 0.3em;
}

.movie-card__title {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--c-white);
}

.movie-card__artist {
  margin-top: 0.2em;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--c-gray);
}

/* -------------------------------------------------------------
   14. NEWS
   ------------------------------------------------------------- */
.news-list {
  display: flex;
  flex-direction: column;
}

.news-item {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-md);
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--c-line-soft);
}

.news-item:first-child {
  border-top: 1px solid var(--c-line-soft);
}

.news-item__date {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--c-gray-dim);
  padding-top: 0.2em;
}

.news-item__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--c-accent-soft);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  padding: 0.25em 0.6em;
  margin-bottom: 0.7em;
}

.news-item__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--c-white);
  line-height: 1.6;
}

.news-item__excerpt {
  margin-top: 0.5em;
  color: var(--c-gray);
  font-size: var(--fs-small);
  max-width: 62ch;
}

@media (max-width: 560px) {
  .news-item {
    grid-template-columns: 1fr;
    gap: var(--space-2xs);
  }
}

/* -------------------------------------------------------------
   15. PAGE HEADER (sub pages)
   ------------------------------------------------------------- */
.page-header {
  position: relative;
  padding-top: calc(var(--header-h) + var(--space-2xl));
  padding-bottom: var(--space-xl);
  background: radial-gradient(50% 60% at 85% 0%, rgba(154, 77, 255, 0.22), transparent 65%),
    var(--c-black);
  border-bottom: 1px solid var(--c-line-soft);
}

.page-header__eyebrow {
  margin-bottom: var(--space-md);
}

.page-header__title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  color: var(--c-white);
}

.page-header__lead {
  margin-top: var(--space-md);
  max-width: 60ch;
  color: var(--c-gray);
  font-size: var(--fs-lead);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--c-gray-dim);
  margin-bottom: var(--space-lg);
}

.breadcrumb a {
  color: var(--c-gray);
  transition: color var(--dur-fast) var(--ease);
}

.breadcrumb a:hover {
  color: var(--c-accent-soft);
}

/* -------------------------------------------------------------
   16. ARTIST PROFILE
   ------------------------------------------------------------- */
.profile-hero {
  display: grid;
  gap: var(--space-lg);
  align-items: start;
}

@media (min-width: 860px) {
  .profile-hero {
    grid-template-columns: minmax(260px, 380px) 1fr;
    gap: var(--space-2xl);
  }

  .profile-hero.profile-hero--featured {
    grid-template-columns: 1fr;
  }
}

.profile-hero__frame {
  aspect-ratio: 5 / 7;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--c-line-soft);
}

.profile-hero--featured .profile-hero__frame {
  aspect-ratio: 5 / 3;
}

.profile-hero__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-hero__role {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-accent-soft);
}

.profile-hero__name {
  margin-top: var(--space-sm);
  font-family: var(--font-jp);
  font-size: var(--fs-h1);
  color: var(--c-white);
}

.profile-hero__alt {
  margin-top: 0.4em;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--c-gray);
}

.profile-hero__tagline {
  margin-top: var(--space-md);
  font-size: var(--fs-lead);
  color: var(--c-gray);
  max-width: 46ch;
}

.profile-hero__links {
  margin-top: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.profile-bio {
  margin-top: var(--space-2xl);
  max-width: 68ch;
}

.profile-bio h2 {
  font-size: var(--fs-h3);
  color: var(--c-white);
  margin-bottom: var(--space-sm);
}

.profile-bio h3 {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-accent-soft);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}

.profile-bio p {
  color: var(--c-gray);
  margin-bottom: var(--space-sm);
}

.member-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
  padding: var(--space-md);
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius-md);
}

.member-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3em 0.8em;
}

.member-role {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--c-gray);
  min-width: 12em;
}

.member-name {
  color: var(--c-white);
  font-weight: 700;
}

.member-name a {
  color: inherit;
  border-bottom: 1px solid var(--c-line);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.member-name a:hover {
  color: var(--c-accent-soft);
  border-color: var(--c-accent-soft);
}

.profile-bio__placeholder {
  font-style: italic;
  color: var(--c-gray-dim);
  border-left: 2px solid var(--c-line);
  padding-left: var(--space-sm);
}

.profile-cta {
  margin-top: var(--space-2xl);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--c-line-soft);
}

/* -------------------------------------------------------------
   17. CONTACT FORM
   ------------------------------------------------------------- */
.contact-grid {
  display: grid;
  gap: var(--space-2xl);
}

@media (min-width: 900px) {
  .contact-grid {
    grid-template-columns: 0.85fr 1.15fr;
  }
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.contact-info__block h2 {
  font-size: var(--fs-h3);
  color: var(--c-white);
  margin-bottom: var(--space-xs);
}

.contact-info__block p,
.contact-info__block a {
  color: var(--c-gray);
}

.contact-info__block a {
  transition: color var(--dur-fast) var(--ease);
}

.contact-info__block a:hover {
  color: var(--c-accent-soft);
}

.social-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
}

.form-field {
  margin-bottom: var(--space-md);
}

.form-field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-gray);
  margin-bottom: 0.6em;
}

.form-field .req {
  color: var(--c-accent-soft);
  margin-left: 0.3em;
}

.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  padding: 0.9em 1em;
  color: var(--c-white);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.form-field textarea {
  resize: vertical;
  min-height: 8em;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--c-gray-dim);
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--c-accent);
  background: var(--c-surface-2);
}

.form-row {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 560px) {
  .form-row {
    grid-template-columns: 1fr 1fr;
  }
}

.form-note {
  margin-top: var(--space-sm);
  font-size: var(--fs-small);
  color: var(--c-gray-dim);
}

.form-status {
  margin-top: var(--space-sm);
  font-size: var(--fs-small);
  color: var(--c-accent-soft);
  min-height: 1.5em;
}

/* -------------------------------------------------------------
   18. FOOTER
   ------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--c-line-soft);
  background: var(--c-black-soft);
}

.site-footer__inner {
  padding-block: var(--space-2xl) var(--space-xl);
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 780px) {
  .site-footer__inner {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

.site-footer__tagline {
  margin-top: var(--space-md);
  color: var(--c-gray);
  max-width: 34ch;
  font-size: var(--fs-small);
}

.site-footer__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-gray-dim);
  margin-bottom: var(--space-sm);
}

.site-footer__nav ul,
.site-footer__social ul {
  display: flex;
  flex-direction: column;
  gap: 0.7em;
}

.site-footer__nav a,
.site-footer__social a {
  color: var(--c-gray);
  font-size: var(--fs-small);
  transition: color var(--dur-fast) var(--ease);
}

.site-footer__nav a:hover,
.site-footer__social a:hover {
  color: var(--c-accent-soft);
}

.site-footer__bottom {
  padding-block: var(--space-md);
  border-top: 1px solid var(--c-line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--c-gray-dim);
}

/* -------------------------------------------------------------
   19. REVEAL / MOTION
   ------------------------------------------------------------- */
/*
 * 重要: 「.reveal-ready」は js/main.js が実行された瞬間に <body> へ
 * 付与するクラスです。CSSだけでは opacity:0 にせず、JSが確実に動いた
 * ときだけ隠す＝プログレッシブエンハンスメント方式にしています。
 * こうすることで、万が一JSが読み込まれなかった／失敗した場合でも、
 * コンテンツは最初から普通に表示されます（消えたままになりません）。
 */
@media (prefers-reduced-motion: no-preference) {
  .reveal-ready [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  }

  .reveal-ready [data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .reveal-ready [data-reveal-group] > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  }

  .reveal-ready [data-reveal-group].is-visible > * {
    opacity: 1;
    transform: translateY(0);
  }

  .reveal-ready [data-reveal-group].is-visible > *:nth-child(1) { transition-delay: 0ms; }
  .reveal-ready [data-reveal-group].is-visible > *:nth-child(2) { transition-delay: 60ms; }
  .reveal-ready [data-reveal-group].is-visible > *:nth-child(3) { transition-delay: 120ms; }
  .reveal-ready [data-reveal-group].is-visible > *:nth-child(4) { transition-delay: 180ms; }
  .reveal-ready [data-reveal-group].is-visible > *:nth-child(5) { transition-delay: 240ms; }
  .reveal-ready [data-reveal-group].is-visible > *:nth-child(6) { transition-delay: 300ms; }
}

/* -------------------------------------------------------------
   20. UTILITIES
   ------------------------------------------------------------- */
.mt-0 { margin-top: 0; }
.text-center { text-align: center; }

.divider {
  height: 1px;
  background: var(--c-line-soft);
  border: 0;
  margin-block: var(--space-2xl);
}

.caption {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--c-gray-dim);
  margin-top: var(--space-sm);
  letter-spacing: 0.02em;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
}

.tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--c-gray);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  padding: 0.4em 0.75em;
}

.empty-note {
  color: var(--c-gray-dim);
  font-style: italic;
  padding-block: var(--space-lg);
  border-top: 1px solid var(--c-line-soft);
}

/* RELEASES: retain the existing cards and editorial artwork layout. */
.release-card__cover, .release-row__cover { display: block; }
.release-artwork-empty { display: grid; place-items: center; aspect-ratio: 1; padding: 1rem; background: var(--c-black); color: var(--c-white); text-align: center; }
.release-description { white-space: pre-line; overflow-wrap: anywhere; margin-top: 1.5rem; }
.release-links, .release-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 2rem; }
.release-notes, .release-back { margin-top: 3rem; }
.release-card__title, .release-row__title, .featured-release__title { overflow-wrap: anywhere; }

/* Master Dataset archive details; source images retain their original resolution. */
.release-artwork-empty[hidden] { display: none; }
.featured-release__media, .release-card__cover, .release-row__cover { aspect-ratio: 1; }
.featured-release__media img, .release-card__cover img, .release-row__cover img { width: 100%; height: 100%; object-fit: cover; }
.release-tracklist { padding-left: 2.4rem; margin-top: 1.2rem; }
.release-tracklist li { padding: .45rem 0; overflow-wrap: anywhere; }
.release-tracklist small { display: block; margin-top: .3rem; }
.release-edition { border-top: 1px solid var(--c-line, #333); padding-top: 2rem; }
.release-filter { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; }
.release-filter select { color: var(--c-white); background: var(--c-black); border: 1px solid #666; border-radius: .25rem; font: inherit; padding: .75rem; max-width: 100%; }
.release-price { margin-top: 1rem; font-size: 1.15rem; }

/* Contact only: use the existing near-black surfaces, outline CTA and spacing. */
.contact-form { min-width: 0; }
.contact-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
.contact-form__legend { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.contact-form .form-field { min-width: 0; }
.contact-form .form-field label { text-transform: none; }
.contact-optional { margin-left: .5em; color: var(--c-gray); }
.contact-form .contact-field-error { margin-top: var(--space-2xs); font-size: var(--fs-small); color: var(--c-white); overflow-wrap: anywhere; }
.contact-form [hidden] { display: none !important; }
.contact-form [aria-invalid="true"] { border-color: var(--c-white); border-style: dashed; }
.contact-form .form-status { color: var(--c-white); overflow-wrap: anywhere; }
.contact-form .form-status[data-state="error"] { border-left: 1px solid var(--c-white); padding-left: var(--space-sm); }
.contact-form button:disabled { opacity: .6; cursor: wait; }
.contact-form input:focus-visible, .contact-form select:focus-visible, .contact-form textarea:focus-visible, .contact-form button:focus-visible, .contact-form .form-status:focus-visible { outline: 2px solid var(--c-white); outline-offset: 3px; }
.contact-form .form-note a { text-decoration: underline; text-underline-offset: .2em; }
.contact-form .form-note { color: var(--c-gray); }
@media (max-width: 559px) { .contact-form .form-field input, .contact-form .form-field select, .contact-form .form-field textarea { font-size: 1rem; } }

/* ARCHIVES — gallery index; follows the primary + three-secondary Artists rhythm. */
.archive-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); }
.archive-card { min-width: 0; border-bottom: 1px solid var(--c-line); }
.archive-card--primary { grid-column: 1 / -1; }
.archive-card__link { display: block; height: 100%; }
.archive-card--primary .archive-card__link { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: center; gap: var(--space-lg); }
.archive-visual { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: radial-gradient(ellipse at 50% 65%, rgba(154,77,255,.2), transparent 65%), var(--c-black-soft); }
.archive-card--primary .archive-visual { aspect-ratio: 16 / 9; }
.archive-visual::before { content: ''; position: absolute; inset: 25% 12%; border-top: 1px solid rgba(154,77,255,.5); border-bottom: 1px solid rgba(154,77,255,.2); transform: rotate(-18deg); background: linear-gradient(90deg, rgba(255,61,92,.08), rgba(154,77,255,.12), rgba(61,107,255,.08)); }
.archive-visual--programs::before { inset: 35% 18%; transform: rotate(0deg); }
.archive-visual--bailedeaire::before { inset: 18% 30%; transform: rotate(25deg); }
.archive-visual--hado-slamdiva::before { inset: 18% 20%; transform: rotate(-35deg); }
.archive-visual__number { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: 500; font-size: clamp(4rem, 9vw, 9rem); color: rgba(242,240,245,.18); }
.archive-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.archive-card__body { padding-block: var(--space-md); }
.archive-kind { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em; color: var(--c-gray); margin-bottom: var(--space-xs); }
.archive-card__title, .archive-entry__title, .archive-page-title, .archive-heading, .archive-branches { text-transform: none; }
.archive-card__title { font-family: var(--font-jp); font-weight: 500; font-size: clamp(1.4rem, 1.1rem + .6vw, 1.8rem); line-height: 1.3; margin-bottom: var(--space-sm); overflow-wrap: anywhere; }
.archive-card--primary .archive-card__title { font-size: clamp(2rem, 3.4vw, 3.5rem); }
.archive-card__description { color: var(--c-gray); line-height: 1.85; }
.archive-card__go { display: inline-block; margin-top: var(--space-md); font-family: var(--font-mono); font-size: .75rem; transition: transform var(--dur-med) var(--ease); }
.archive-card__link:hover .archive-card__go { transform: translateX(4px); }
.archive-card__link:focus-visible, .archive-page a:focus-visible { outline: 2px solid var(--c-white); outline-offset: 5px; }
.archive-statement { font-family: var(--font-jp); font-size: clamp(1.4rem, 2.6vw, 2.4rem); font-weight: 500; line-height: 1.6; text-transform: none; }
.archive-page-title { overflow-wrap: anywhere; }
.archive-entries { border-top: 1px solid var(--c-line); }
.archive-entry { padding-block: var(--space-lg); border-bottom: 1px solid var(--c-line); }
.archive-entry__title { font-family: var(--font-jp); font-weight: 500; font-size: clamp(1.5rem, 3vw, 2.5rem); margin-bottom: var(--space-xs); }
.archive-entry p, .archive-note { color: var(--c-gray); }
.archive-branches { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); list-style: none; padding: 0; margin-top: var(--space-md); font-family: var(--font-mono); font-size: .8rem; }
.archive-entry__image { width: min(100%, 600px); height: auto; margin-bottom: var(--space-md); }
.archive-note, .archive-back { margin-top: var(--space-lg); }
@media (max-width: 860px) {
  .archive-grid { grid-template-columns: minmax(0, 1fr); }
  .archive-card--primary .archive-card__link { display: block; }
  .archive-visual { aspect-ratio: 16 / 7; }
  .archive-card--primary .archive-visual { aspect-ratio: 16 / 9; }
  .archive-card__title { font-size: 1.6rem; }
  .archive-card--primary .archive-card__title { font-size: clamp(2rem, 6vw, 3rem); }
}
@media (prefers-reduced-motion: reduce) { .archive-card__go { transition: none; } .archive-card__link:hover .archive-card__go { transform: none; } }

/* PRODUCED EVENTS Phase 2: scoped editorial history; prism colors live only in the visual asset. */
.produced-page h1, .produced-page h2, .produced-page h3, .produced-page h4, .produced-page h5 { text-transform: none; overflow-wrap: anywhere; }
.produced-page .breadcrumb { display: block; overflow-wrap: anywhere; line-height: 2; }
.produced-page h2 { font-family: var(--font-jp); font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 2.3rem); margin-bottom: var(--space-md); }
.produced-page h3, .produced-page h4, .produced-page h5 { font-weight: 500; }
.produced-page .event-block, .produced-page .event-release, .produced-page .event-history { margin-top: var(--space-xl); }
.produced-page .event-block, .produced-page .event-release { border-top: 1px solid var(--c-line); padding-top: var(--space-md); }
.produced-page .event-flyer { margin: 0; background: var(--c-black-soft); }
.produced-page .event-flyer img { display: block; width: 100%; height: auto; max-height: 78vh; object-fit: contain; }
.produced-page .event-label { font-family: var(--font-mono); font-size: .8rem; color: var(--c-gray); margin-bottom: var(--space-sm); }
.produced-page .event-muted { color: var(--c-gray); }
.produced-page .event-prose { max-width: 52rem; line-height: 1.95; margin-block: var(--space-md); white-space: pre-line; }
.produced-page .event-meta { margin-top: var(--space-md); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md) var(--space-lg); }
.produced-page .event-meta > div { min-width: 0; display: grid; grid-template-columns: minmax(6rem, .45fr) minmax(0, 1fr); gap: var(--space-sm); }
.produced-page .event-meta dt { font-family: var(--font-mono); font-size: .75rem; color: var(--c-gray); }
.produced-page .event-meta dd { margin: 0; overflow-wrap: anywhere; }
.produced-page .event-meta dd span { display: block; }
.produced-page .event-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md) var(--space-lg); }
.produced-page .event-roles h3, .produced-page .event-roles h5 { font-family: var(--font-mono); font-size: .8rem; color: var(--c-gray); margin-bottom: var(--space-xs); }
.produced-page .event-roles ul { list-style: none; padding: 0; }
.produced-page .event-roles li { margin-bottom: .5rem; overflow-wrap: anywhere; }
.produced-page .event-roles small { color: var(--c-gray); }
.produced-page .event-release__body { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); align-items: center; gap: var(--space-lg); }
.produced-page .event-release__artwork img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.produced-page .event-release__title { font-family: var(--font-jp); font-size: clamp(1.4rem, 2vw, 2rem); margin-bottom: var(--space-sm); }
.produced-page .event-timetable > div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--space-sm); border-bottom: 1px solid var(--c-line-soft); padding-block: var(--space-sm); }
.produced-page .event-timetable dt { font-family: var(--font-mono); color: var(--c-gray); }
.produced-page .event-timetable dd { margin: 0; overflow-wrap: anywhere; }
.produced-page .event-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); }
.produced-page .event-gallery img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
.produced-page .event-gallery__fallback { grid-column: 1 / -1; max-width: 800px; }
.produced-page .event-card { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: var(--space-lg); padding-block: var(--space-xl); border-top: 1px solid var(--c-line); }
.produced-page .event-card__body { min-width: 0; }
.produced-page .event-card__title { font-family: var(--font-jp); font-size: clamp(1.6rem, 3vw, 2.7rem); line-height: 1.5; margin-bottom: var(--space-md); }
.produced-page .event-card .event-meta, .produced-page .event-card .event-release__body { grid-template-columns: minmax(0, 1fr); }
.produced-page .event-card .event-release, .produced-page .event-card .event-block { margin-top: var(--space-md); }
.produced-page .event-card .event-release h4 { font-family: var(--font-mono); font-size: .75rem; color: var(--c-gray); margin-bottom: var(--space-sm); }
.produced-page .event-detail-link { display: inline-block; margin-top: var(--space-md); }
.produced-page .event-concept { margin-block: var(--space-md); }
.produced-page .event-concept blockquote { padding-left: var(--space-md); border-left: 1px solid var(--c-line); margin-block: var(--space-sm); line-height: 1.8; }
.produced-page .event-series-concept { font-family: var(--font-jp); font-size: clamp(1.3rem, 2.8vw, 2rem); }
.produced-page .event-links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); }
.produced-page .event-links a { text-decoration: underline; text-underline-offset: .3em; }
.produced-page .event-hashtags { margin-top: var(--space-md); color: var(--c-gray); overflow-wrap: anywhere; }
.produced-page .event-related + .event-related { margin-top: var(--space-lg); }
@media (max-width: 1000px) { .produced-page .event-card { grid-template-columns: minmax(0, 1fr); } .produced-page .event-card .event-flyer { max-width: 640px; } .produced-page .event-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .produced-page .event-meta, .produced-page .event-roles, .produced-page .event-release__body, .produced-page .event-gallery { grid-template-columns: minmax(0, 1fr); } .produced-page .event-release__artwork { max-width: 240px; } .produced-page .event-meta > div { grid-template-columns: 6rem minmax(0, 1fr); } .produced-page .event-timetable > div { grid-template-columns: 4rem minmax(0, 1fr); } }

/* PROGRAMS Phase 3 — scoped portfolio / compact broadcast history. No new motion or visual identity. */
.program-page h1, .program-page h2, .program-page h3, .program-page summary { text-transform: none; overflow-wrap: anywhere; }
.program-page .breadcrumb { display: block; line-height: 2; overflow-wrap: anywhere; }
.program-page h2 { font-family: var(--font-jp); font-weight: 500; font-size: clamp(1.5rem,2.6vw,2.3rem); margin-bottom: var(--space-md); }
.program-page h3 { font-family: var(--font-jp); font-weight: 500; font-size: 1.25rem; margin-bottom: var(--space-sm); }
.program-page .program-section { margin-top: var(--space-xl); padding-top: var(--space-md); border-top: 1px solid var(--c-line); }
.program-page .program-visual { margin: 0; background: var(--c-black-soft); }
.program-page .program-visual img { display: block; width: 100%; height: auto; max-height: 75vh; object-fit: contain; }
.program-page .program-prose { max-width: 54rem; line-height: 1.9; margin-block: var(--space-md); }
.program-page .program-meta { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-md) var(--space-lg); margin-top: var(--space-lg); }
.program-page .program-meta > div { min-width: 0; }
.program-page .program-meta dt, .program-page .program-label, .program-page .program-period { font-family: var(--font-mono); font-size: .8rem; color: var(--c-gray); margin-bottom: var(--space-xs); }
.program-page .program-meta dd { margin: 0; overflow-wrap: anywhere; }
.program-page .program-cast { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-md); }
.program-page .program-cast ul, .program-page .program-text-list { list-style: none; padding: 0; }
.program-page .program-cast li { margin-bottom: var(--space-xs); }
.program-page .program-cast small { display: block; color: var(--c-gray); }
.program-page .program-format { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--space-md); list-style: none; padding: 0; }
.program-page .program-format li { border-top: 1px solid var(--c-line); padding-top: var(--space-sm); }
.program-page .program-identity { margin-bottom: var(--space-lg); font-size: 1.3rem; }
.program-page .program-lineage { list-style: none; padding: 0; }
.program-page .program-lineage li + li::before { content: '↓'; display: block; margin-block: var(--space-sm); color: var(--c-gray); }
.program-page .program-lineage small { display: block; color: var(--c-gray); }
.program-page .program-lineage span { font-size: clamp(1.2rem,2vw,1.8rem); overflow-wrap: anywhere; }
.program-page .program-history-note { color: var(--c-gray); margin-block: var(--space-md); line-height: 1.8; }
.program-page .program-history { border-block-start: 1px solid var(--c-line); }
.program-page summary { cursor: pointer; padding-block: var(--space-md); line-height: 1.8; }
.program-page summary span { font-family: var(--font-mono); color: var(--c-gray); font-size: .8rem; padding-left: .6rem; }
.program-page summary:focus-visible { outline: 2px solid var(--c-white); outline-offset: 3px; }
.program-page .program-year { margin-left: var(--space-md); border-top: 1px solid var(--c-line-soft); }
.program-page .program-records { list-style: none; padding: 0; }
.program-page .program-record { padding-block: var(--space-md); border-top: 1px solid var(--c-line-soft); overflow-wrap: anywhere; line-height: 1.85; }
.program-page .program-record p { white-space: pre-wrap; }
.program-page .program-record__heading { margin-bottom: var(--space-xs); font-weight: 500; }
.program-page .program-links { display: flex; flex-wrap: wrap; list-style: none; padding: 0; gap: var(--space-xs) var(--space-md); margin-top: var(--space-sm); font-size: .85rem; }
.program-page .program-links a { text-decoration: underline; text-underline-offset: .25em; overflow-wrap: anywhere; }
.program-page .program-lessons { list-style: none; padding: 0; margin-block: var(--space-md); }
.program-page .program-lessons li { padding-block: var(--space-xs); overflow-wrap: anywhere; }
.program-page .program-lessons span { font-family: var(--font-mono); color: var(--c-gray); padding-right: var(--space-sm); }
.program-page .program-gallery { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-sm); }
.program-page .program-gallery img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; }
.program-page .program-card { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); align-items: center; gap: var(--space-lg); border-top: 1px solid var(--c-line); padding-block: var(--space-xl); }
.program-page .program-card > div { min-width: 0; }
.program-page .program-card h3 { font-size: clamp(1.5rem,3vw,2.5rem); line-height: 1.5; }
.program-page .program-appearances { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--c-line); color: var(--c-gray); }
.program-page .program-appearances h2 { font-family: var(--font-mono); font-size: .9rem; }
.program-page .program-appearances h3 { font-size: 1.05rem; color: var(--c-white); }
.program-page .program-appearances ul { list-style: none; padding: 0; }
.program-page .program-appearances li { margin-top: var(--space-md); }
@media (max-width: 960px) { .program-page .program-format, .program-page .program-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); } .program-page .program-card { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 600px) { .program-page .program-meta, .program-page .program-cast, .program-page .program-format, .program-page .program-gallery { grid-template-columns: minmax(0,1fr); } .program-page .program-year { margin-left: .5rem; } }

/* Phase 4: project archive only. Shared Design System and asset resolver unchanged. */
.baile-page .breadcrumb { display:block; }
.baile-page h1,.baile-page h2,.baile-page h3,.baile-nav a { text-transform:none; overflow-wrap:anywhere; }
.baile-nav { display:flex; flex-wrap:wrap; gap:1rem 2rem; border-block:1px solid var(--c-line); padding:1.5rem 0; }
.baile-nav a { font-size:.9rem; }
.baile-section { scroll-margin-top:7rem; }
.baile-section h2 { margin-bottom:2rem; }
.baile-overview { display:grid; grid-template-columns:1.3fr 1fr; align-items:center; gap:clamp(2rem,5vw,5rem); }
.baile-overview figure { margin:0; min-width:0; }
.baile-overview img { width:100%; height:auto; display:block; object-fit:contain; }
.baile-lead { font-size:clamp(1.1rem,1.6vw,1.4rem); line-height:2; }
.baile-copy { max-width:52rem; line-height:2; margin-block:1.5rem; }
.baile-album { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:clamp(2rem,6vw,6rem); align-items:center; }
.baile-album .event-release__artwork { width:100%; max-width:420px; aspect-ratio:1; }
.baile-album h3 { font-size:clamp(1.7rem,3vw,2.8rem); }
.baile-tour { list-style:none; padding:0; counter-reset:tour; }
.baile-tour>li { counter-increment:tour; display:grid; grid-template-columns:4rem minmax(0,1fr); padding:2rem 0; border-top:1px solid var(--c-line); }
.baile-tour>li::before { content:counter(tour,decimal-leading-zero); color:var(--c-gray); font-family:var(--font-mono); }
.baile-tour h3 { font-size:1.4rem; margin-bottom:.7rem; }
.baile-source-notes { margin-top:2rem; max-width:56rem; line-height:2; }
.baile-source-notes summary { cursor:pointer; }
.baile-source-notes ul { padding-left:1.5rem; }
.baile-page a:focus-visible,.baile-page summary:focus-visible { outline:2px solid var(--c-white); outline-offset:5px; }
@media(max-width:900px) { .baile-overview,.baile-album { grid-template-columns:1fr; } .baile-overview figure { max-width:48rem; } }
@media(max-width:600px) { .baile-nav { display:grid; grid-template-columns:1fr; gap:1rem; } .baile-tour>li { grid-template-columns:2.5rem minmax(0,1fr); } }

.baile-album .event-release__artwork img { display:block; width:100%; height:auto; object-fit:contain; }
.baile-page .event-label { font-family:var(--font-mono); color:var(--c-gray); font-size:.85rem; }

.baile-page .btn { text-transform:none; }
.baile-page .release-tracklist { list-style:decimal; }

/* Phase 5: Career Portfolio. Typography and hairlines, no game UI. */
.career-page .breadcrumb { display:block; }
.career-page h1,.career-page h2,.career-page h3,.career-page h4,.career-page .btn { text-transform:none; overflow-wrap:anywhere; }
.career-period { font-family:var(--font-mono); margin-block:1.5rem; font-size:clamp(1rem,2vw,1.7rem); }
.career-hero { margin:3rem 0 0; }
.career-hero img { display:block; width:100%; height:auto; max-height:70vh; object-fit:contain; }
.career-nav,.career-year-nav,.career-sources { display:flex; flex-wrap:wrap; gap:1rem 2rem; }
.career-nav { padding-block:2rem; border-block:1px solid var(--c-line); font-size:.9rem; }
.career-section,.career-year,.career-record { scroll-margin-top:7rem; }
.career-section h2 { margin-bottom:3rem; }
.career-section h3 { margin-block:1.5rem; }
.career-section p { line-height:1.9; margin-block:.8rem; }
.career-intro { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:clamp(2rem,6vw,6rem); }
.career-muted { color:var(--c-gray); font-size:.85rem; }
.career-roster-phase { margin-block:3rem; }
.career-roster { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem 3rem; padding:0; }
.career-roster li { border-top:1px solid var(--c-line); padding-block:1.5rem; }
.career-roster h4 { font-size:1.2rem; }
.career-worldcup { padding-block:2rem 4rem; }
.career-worldcup .career-worldcup__result { font-family:var(--font-display); font-size:clamp(2.1rem,7vw,6rem); line-height:1.2; letter-spacing:-.04em; }
.career-worldcup__years { font-size:clamp(1.5rem,4vw,3rem); }
.career-highlights { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; }
.career-highlights>a { border-top:1px solid var(--c-line); padding-top:1.5rem; }
.career-highlights h3 { font-size:1.05rem; }
.career-year { margin-top:4rem; }
.career-year>h3 { font-size:clamp(2rem,5vw,4rem); }
.career-record { display:grid; grid-template-columns:minmax(9rem,1fr) minmax(0,3fr); gap:2rem; border-top:1px solid var(--c-line); padding-block:2rem; }
.career-record__date { font-family:var(--font-mono); color:var(--c-gray); font-size:.8rem; }
.career-record__date span { display:block; margin-bottom:.7rem; }
.career-record h4 { font-size:clamp(1.2rem,2vw,1.7rem); }
.career-result { font-size:1.2rem; }
.career-record__image { margin:1.5rem 0 0; max-width:560px; }
.career-record__image img,.career-gallery img,.career-photo-empty img { width:100%; height:auto; display:block; object-fit:contain; }
.career-details { margin-top:1rem; line-height:1.9; }
.career-details summary,.career-photo-group summary { cursor:pointer; padding-block:.8rem; }
.career-media { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem; margin-bottom:4rem; }
.career-media h4 { color:var(--c-gray); margin-bottom:1rem; }
.career-media li { line-height:2; }
.career-press article { border-top:1px solid var(--c-line); padding:1.5rem 0; overflow-wrap:anywhere; }
.career-creative { max-width:55rem; margin-bottom:4rem; }
.career-creative h4 { font-size:1.4rem; }
.career-photo-group { border-top:1px solid var(--c-line); padding:1rem 0; }
.career-photo-group summary { overflow-wrap:anywhere; }
.career-photo-group summary span { font-size:.8rem; color:var(--c-gray); }
.career-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; padding:1rem; }
.career-gallery figure { margin:0; }
.career-photo-empty { max-width:600px; margin:0; }
.career-page a:focus-visible,.career-page summary:focus-visible { outline:2px solid var(--c-white); outline-offset:5px; }
@media(max-width:900px) { .career-intro { grid-template-columns:1fr; } .career-highlights,.career-roster { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .career-nav { display:grid; grid-template-columns:1fr; } .career-record,.career-media,.career-highlights,.career-roster,.career-gallery { grid-template-columns:minmax(0,1fr); } .career-record { gap:.5rem; } }

/* Phase 6: server-rendered editorial NEWS; scoped legacy-body normalization. */
.news-ssr-list .news-item > div { min-width: 0; }
.news-ssr-list .news-item__title { text-transform: none; overflow-wrap: anywhere; }
.news-ssr-list .news-item__title a:hover { color: var(--color-purple, #ba98ef); }
.news-type-labels, .news-detail-meta { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.news-read { margin-top: 1rem; font-size: .8rem; }
.news-page .page-header__title { max-width: 1100px; font-size: clamp(1.65rem, 4vw, 3.5rem); text-transform: none; overflow-wrap: anywhere; line-height: 1.5; }
.news-page .breadcrumb { margin-bottom: 2rem; font-size: .8rem; }
.news-detail-meta { margin-bottom: 1.5rem; font-size: .8rem; }
.news-detail { max-width: 840px; margin-inline: auto; min-width: 0; }
.news-featured { margin: 0 0 3rem; }
.news-featured img { display: block; max-width: 100%; height: auto; margin-inline: auto; }
.news-article-body { line-height: 2; overflow-wrap: anywhere; }
.news-article-body > * + * { margin-top: 1.5rem; }
.news-article-body h2, .news-article-body h3, .news-article-body h4, .news-article-body h5, .news-article-body h6 { text-transform: none; line-height: 1.5; margin-block: 2.5rem 1rem; }
.news-article-body h2 { font-size: clamp(1.35rem, 3vw, 2rem); }
.news-article-body h3 { font-size: 1.3rem; }
.news-article-body a { text-decoration: underline; text-underline-offset: .2em; }
.news-article-body ul { list-style: disc; }
.news-article-body ol { list-style: decimal; }
.news-article-body ul, .news-article-body ol { padding-left: 1.7rem; }
.news-article-body blockquote { border-left: 2px solid #9265bb; padding-left: 1.5rem; margin-left: 0; }
.news-article-body img, .news-article-body video, .news-article-body audio { max-width: 100%; height: auto; }
.news-article-body figure, .news-article-body .wp-caption { max-width: 100%; margin-inline: 0; }
.news-article-body figcaption { font-size: .85rem; color: #b6b2be; }
.news-article-body .gallery, .news-article-body .wp-block-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 1rem; }
.news-article-body .gallery > *, .news-article-body .wp-block-gallery > * { min-width: 0; }
.news-embed { width: 100%; aspect-ratio: 16 / 9; }
.news-embed iframe { display: block; width: 100%; height: 100%; border: 0; }
.news-table-scroll { overflow-x: auto; max-width: 100%; }
.news-table-scroll table { border-collapse: collapse; width: 100%; }
.news-table-scroll th, .news-table-scroll td { border: 1px solid #49404f; padding: .7rem; }
.news-article-body pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.news-pagination { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 3rem; align-items: center; }
.news-pagination a, .news-pagination span { padding: .65rem .85rem; }
.news-pagination a { border: 1px solid #65526e; }
.news-pagination [aria-current="page"] { background: #493254; color: #fff; }
.news-pagination [aria-disabled="true"] { color: #96909d; }
.news-page a:focus-visible, .news-ssr a:focus-visible, .news-table-scroll:focus-visible { outline: 2px solid #cba4ff; outline-offset: 4px; }
@media(max-width: 600px) { .news-ssr-list .news-item { grid-template-columns: 1fr; gap: .75rem; } .news-page .section { padding-block: 3rem; } }

.news-article-body p, .news-article-body ul, .news-article-body ol, .news-article-body figure, .news-article-body .news-embed, .news-article-body .news-table-scroll { margin-block: 1.5rem; }

/* Phase 15: text-led credit portfolio, scoped to WORKS. */
.works-page [hidden] { display: none !important; }
.works-page .breadcrumb { display: flex; flex-wrap: wrap; gap: .4em; }
.works-context { margin-top: var(--space-lg); color: var(--c-gray); }
.works-title { font-size: clamp(1.8rem, 4.5vw, 4rem); overflow-wrap: anywhere; }
.works-intro { max-width: 48rem; margin-top: var(--space-md); color: var(--c-gray); }
.works-controls { margin-bottom: var(--space-lg); }
.works-filters { border: 0; padding: 0; margin: 0 0 var(--space-md); min-width: 0; }
.works-filters legend, .works-controls label { display: block; margin-bottom: var(--space-sm); color: var(--c-gray); }
.works-filter-buttons { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.works-filter-buttons .btn { padding: .7rem 1rem; font-size: .75rem; white-space: normal; text-align: left; gap: .5em; }
.works-filter-buttons [aria-pressed="true"] { border-color: var(--c-white); text-decoration: underline; text-underline-offset: .3em; }
.works-filter-buttons [aria-pressed="true"]::before { content: '✓'; }
.works-search { display: flex; gap: var(--space-sm); max-width: 48rem; }
.works-search input { min-width: 0; width: 100%; border: 1px solid var(--c-line); border-radius: 0; padding: .85rem 1rem; background: var(--c-black-soft); color: var(--c-white); font: inherit; }
.works-page :is(button,input,a):focus-visible { outline: 2px solid var(--c-accent-soft); outline-offset: 4px; }
.works-count { color: var(--c-gray); font-family: var(--font-mono); margin-bottom: var(--space-md); }
.works-list-heading { font-size: 1.4rem; margin-bottom: var(--space-sm); }
.work-row { display: grid; grid-template-columns: 6rem minmax(0,1fr); gap: var(--space-lg); padding: var(--space-md) 0; border-top: 1px solid var(--c-line); }
.work-row__year { font-family: var(--font-mono); font-size: .85rem; color: var(--c-gray); }
.work-row__body { min-width: 0; overflow-wrap: anywhere; }
.work-row__artist { color: var(--c-gray); margin-bottom: .4rem; }
.work-row__artist a { text-decoration: underline; text-underline-offset: .25em; }
.work-row__title { font-family: var(--font-jp); font-weight: 500; font-size: clamp(1.2rem,2vw,1.6rem); line-height: 1.6; text-transform: none; }
.work-row__credits, .work-row__collaborators { margin-top: .6rem; }
.work-row__label { color: var(--c-gray); font-family: var(--font-mono); font-size: .8rem; margin-right: .75em; }
.works-project { margin-bottom: var(--space-xl); }
.works-project > h2 { margin: var(--space-lg) 0 var(--space-md); font-family: var(--font-jp); font-weight: 500; }
@media (max-width: 650px) {
  .work-row { grid-template-columns: 1fr; gap: .6rem; }
  .works-search { flex-wrap: wrap; }
  .works-search input { flex: 1 1 100%; }
  .works-filter-buttons .btn { min-height: 44px; }
}

/* Owner review: one-line tagline and reusable archive media. */
.hero__statement { max-width: none; width: calc(100% - clamp(44px, 8.5vw, 128px) - clamp(.85rem, 2.6vw, 1.75rem)); white-space: nowrap; font-family: var(--font-display); font-size: clamp(.85rem, 3.1vw, 2.5rem); }
.profile-bottom-links { padding-bottom: var(--space-xl); }
#releases { scroll-margin-top: 110px; }
.baile-visual-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-md); }
.baile-visual-grid img, .career-later-image img { display:block; width:100%; height:auto; }
.career-later-image { margin:var(--space-lg) auto 0; max-width:1100px; }
.movies-filter { display:flex; flex-wrap:wrap; gap:var(--space-sm); margin-bottom:var(--space-lg); }
.movies-filter button[aria-pressed="true"] { border-color:var(--c-accent); color:var(--c-white); }
.movie-card[hidden] { display:none; }
@media(max-width:600px) { .baile-visual-grid { grid-template-columns:1fr; } }

/* 1.19.0 in-place content update */
.program-visual > a { display:block; }
.program-audio { display:block; width:100%; border:0; margin-block:var(--space-md); }
.main-nav__list a, .mobile-nav__list a, .site-footer__nav a { text-transform:none; }

.movies-filter .btn { text-transform:none; }