/* ============================================================
   YUKI-M — Mobile Top Page
   Aesthetic: Moonlight & Silence, Luxury Minimal
   ============================================================ */

/* Hyphen glyph fix: many serif faces render '-' visually as a raised
   middle-dot. Wrap the hyphen in <span class="hy"> so we can render
   just that glyph in a sans-serif with a slight optical tune-up. */
.hy {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  display: inline-block;
  transform: translateY(-0.02em);
  margin: 0 0.02em;
  letter-spacing: 0;
}

:root {
  /* Palette — Indigo (default) */
  --ink-900: oklch(0.11 0.045 265);
  --ink-800: oklch(0.16 0.05 265);
  --ink-700: oklch(0.22 0.045 262);
  --ink-600: oklch(0.32 0.035 262);
  --moon-100: oklch(0.96 0.008 85);
  --moon-200: oklch(0.90 0.010 85);
  --moon-300: oklch(0.78 0.012 85);
  --fog: oklch(0.55 0.015 260);
  --halo: oklch(0.85 0.065 88);       /* soft gold */
  --halo-dim: oklch(0.70 0.045 85);
  --hairline: color-mix(in oklab, var(--moon-100) 18%, transparent);
  --hairline-strong: color-mix(in oklab, var(--moon-100) 32%, transparent);

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-slow: 1600ms;
  --dur-med: 900ms;

  /* Type */
  --f-serif-en: "Cormorant Garamond", "EB Garamond", "Times New Roman", serif;
  --f-serif-jp: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Layout */
  --page-max: 500px;
  --pad-x: 28px;
}

/* Silver variant */
[data-palette="silver"] {
  --ink-900: oklch(0.14 0.012 260);
  --ink-800: oklch(0.19 0.014 260);
  --ink-700: oklch(0.26 0.014 260);
  --ink-600: oklch(0.36 0.012 260);
  --halo: oklch(0.88 0.02 90);
  --halo-dim: oklch(0.74 0.015 90);
}

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

body {
  background: var(--ink-900);
  color: var(--moon-100);
  font-family: var(--f-serif-en);
  font-weight: 300;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Global background: layered moonlight fog */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 60% at 50% -10%,
      color-mix(in oklab, var(--halo) 12%, transparent) 0%,
      transparent 55%),
    radial-gradient(80% 50% at 50% 110%,
      color-mix(in oklab, var(--ink-700) 60%, transparent) 0%,
      transparent 60%),
    linear-gradient(180deg, var(--ink-900) 0%, var(--ink-800) 60%, var(--ink-900) 100%);
  pointer-events: none;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(circle at 20% 30%, color-mix(in oklab, var(--moon-100) 4%, transparent) 0.5px, transparent 1.5px),
    radial-gradient(circle at 70% 60%, color-mix(in oklab, var(--moon-100) 3%, transparent) 0.5px, transparent 1.5px),
    radial-gradient(circle at 45% 85%, color-mix(in oklab, var(--moon-100) 3%, transparent) 0.5px, transparent 1.5px);
  background-size: 240px 240px, 180px 180px, 320px 320px;
  opacity: .6;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Page container — mobile-first, capped */
.page {
  max-width: var(--page-max);
  margin: 0 auto;
  position: relative;
}

/* ==================== NAV ==================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--pad-x);
  margin: 0 auto;
  transition: background var(--dur-med) var(--ease), backdrop-filter var(--dur-med) var(--ease);
}
.nav.scrolled {
  background: color-mix(in oklab, var(--ink-900) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--hairline);
}
.nav__mark {
  font-family: var(--f-serif-en);
  font-weight: 300;
  font-size: 15px;
  letter-spacing: .38em;
  color: var(--moon-100);
  text-transform: uppercase;
}
.nav__toggle {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--moon-100);
  cursor: pointer;
  border-radius: 50%;
}
.nav__links {
  display: none;      /* mobile: hidden */
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav__links li { display: inline; }
.nav__links a {
  color: var(--moon-100);
  text-decoration: none;
  font-family: var(--f-serif-en);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: .18em;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color 300ms var(--ease), border-color 300ms var(--ease);
}
.nav__links a:hover {
  color: var(--halo);
  border-bottom-color: var(--halo);
}
.nav__toggle span {
  display: block;
  width: 12px; height: 1px;
  background: var(--moon-100);
  position: relative;
}
.nav__toggle span::before {
  content:"";
  position: absolute;
  left: 0; top: -4px;
  width: 12px; height: 1px;
  background: var(--moon-100);
}

/* Mobile menu */
.menu {
  position: fixed;
  inset: 0;
  z-index: 39;
  background: color-mix(in oklab, var(--ink-900) 94%, transparent);
  backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--pad-x);
  opacity: 0;
  visibility: hidden;
  transition: opacity 500ms var(--ease), visibility 500ms var(--ease);
  max-width: var(--page-max);
  margin: 0 auto;
}
.menu.open { opacity: 1; visibility: visible; }
.menu a {
  display: block;
  font-family: var(--f-serif-en);
  font-size: 30px;
  color: var(--moon-100);
  text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
  font-weight: 300;
  letter-spacing: .04em;
}
.menu a small {
  display: block;
  font-family: var(--f-serif-jp);
  font-size: 11px;
  color: var(--moon-300);
  margin-top: 4px;
  letter-spacing: .3em;
}

/* ==================== TYPE HELPERS ==================== */
.eyebrow {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .42em;
  color: var(--moon-300);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 20px;
  height: 1px;
  background: var(--halo-dim);
  display: inline-block;
}
.jp {
  font-family: var(--f-serif-jp);
  font-weight: 300;
  color: var(--moon-200);
}
.jp-caption {
  font-family: var(--f-serif-jp);
  font-size: 12px;
  color: var(--moon-300);
  letter-spacing: .15em;
  line-height: 1.9;
  font-weight: 300;
}
.serif-italic { font-style: italic; font-weight: 300; }

/* ==================== REVEAL ==================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1200ms var(--ease), transform 1200ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==================== HERO ==================== */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  padding: 120px var(--pad-x) 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  /* pull toward moonlight tone: cool, quieter, richer */
  filter: saturate(.68) brightness(.72) contrast(1.05);
  animation: heroFloat 22s ease-in-out infinite alternate;
}
.hero__bg::before {
  /* deep indigo wash + top and bottom fade to blend with page */
  content:"";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--ink-900) 55%, transparent) 0%,
      color-mix(in oklab, var(--ink-900) 20%, transparent) 35%,
      color-mix(in oklab, var(--ink-900) 55%, transparent) 70%,
      var(--ink-900) 100%),
    radial-gradient(120% 80% at 50% 30%,
      transparent 0%,
      color-mix(in oklab, var(--ink-900) 45%, transparent) 100%);
  mix-blend-mode: multiply;
}
.hero__bg::after {
  /* subtle warm halo of moonlight */
  content:"";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 40% at 50% 20%,
    color-mix(in oklab, var(--halo) 10%, transparent) 0%,
    transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none;
}
@keyframes heroFloat {
  0%   { transform: scale(1.02) translateY(0); }
  100% { transform: scale(1.08) translateY(-14px); }
}

.hero__body { position: relative; z-index: 1; }

.hero__wordmark {
  font-family: var(--f-serif-en);
  font-weight: 300;
  font-size: 13px;
  letter-spacing: .55em;
  color: var(--moon-200);
}

.hero__body {
  margin-top: auto;
  padding-top: 80px;
}
.hero__title {
  font-family: var(--f-serif-en);
  font-weight: 300;
  font-size: clamp(46px, 13.5vw, 68px);
  line-height: 1.05;
  letter-spacing: .02em;
  margin: 0;
  color: var(--moon-100);
}
.hero__title em {
  font-style: italic;
  font-weight: 300;
  color: color-mix(in oklab, var(--moon-100) 88%, var(--halo));
}
.hero__sub-en {
  font-family: var(--f-serif-en);
  font-style: italic;
  font-size: 18px;
  color: var(--moon-200);
  margin-top: 28px;
  letter-spacing: .01em;
  max-width: 300px;
  line-height: 1.5;
}
.hero__sub-jp {
  margin-top: 14px;
  font-family: var(--f-serif-jp);
  font-size: 13px;
  color: var(--moon-300);
  letter-spacing: .28em;
  line-height: 1.9;
}
/* ==================== SECTION FRAME ==================== */
.section {
  padding: 100px var(--pad-x);
  position: relative;
}
.section__head {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 48px;
}
.section__title {
  font-family: var(--f-serif-en);
  font-weight: 300;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--moon-100);
}
.section__title em { font-style: italic; }
.section__title-jp {
  font-family: var(--f-serif-jp);
  font-size: 12px;
  color: var(--moon-300);
  letter-spacing: .38em;
  font-weight: 300;
}
.section__num {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .35em;
  color: var(--halo-dim);
}

/* ==================== PROFILE ==================== */
.profile {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}
.profile__portrait {
  aspect-ratio: 3 / 2;
  width: 100%;
  border: 1px solid var(--hairline);
}
.profile__text-en {
  font-family: var(--f-serif-en);
  font-size: 17px;
  line-height: 1.7;
  color: var(--moon-100);
  font-weight: 300;
  text-wrap: pretty;
}
.profile__text-en em {
  font-style: italic;
  color: color-mix(in oklab, var(--moon-100) 90%, var(--halo));
}
.profile__text-jp {
  margin-top: 20px;
  font-family: var(--f-serif-jp);
  font-size: 12.5px;
  line-height: 2.1;
  color: var(--moon-300);
  letter-spacing: .1em;
  font-weight: 300;
}
.profile__more {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 32px;
  padding: 10px 0 8px;
  border-bottom: 1px solid var(--halo-dim);
  color: var(--moon-100);
  text-decoration: none;
  font-family: var(--f-serif-en);
  font-style: italic;
  font-size: 15px;
  letter-spacing: .05em;
  font-weight: 300;
  transition: color 300ms var(--ease), border-color 300ms var(--ease);
}
.profile__more-jp {
  font-family: var(--f-serif-jp);
  font-style: normal;
  font-size: 11px;
  color: var(--moon-300);
  letter-spacing: .3em;
}
.profile__more-arrow {
  font-style: normal;
  color: var(--halo-dim);
  transition: transform 300ms var(--ease), color 300ms var(--ease);
  margin-left: auto;
  padding-left: 8px;
}
.profile__more:hover {
  color: var(--halo);
  border-color: var(--halo);
}
.profile__more:hover .profile__more-arrow {
  transform: translateX(4px);
  color: var(--halo);
}

/* ==================== YUTORI (hero section) ==================== */
.yutori {
  padding: 140px var(--pad-x) 140px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg,
    transparent 0%,
    color-mix(in oklab, var(--ink-800) 40%, transparent) 20%,
    color-mix(in oklab, var(--ink-800) 60%, transparent) 50%,
    color-mix(in oklab, var(--ink-800) 40%, transparent) 80%,
    transparent 100%);
}
.yutori::before {
  content: "";
  position: absolute;
  top: 20%; left: 50%;
  width: 480px; height: 480px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in oklab, var(--halo) 18%, transparent) 0%,
    color-mix(in oklab, var(--halo) 6%, transparent) 40%,
    transparent 70%);
  pointer-events: none;
  animation: haloBreath 8s ease-in-out infinite alternate;
}
@keyframes haloBreath {
  0%   { opacity: .55; transform: translateX(-50%) scale(1); }
  100% { opacity: 1; transform: translateX(-50%) scale(1.08); }
}

.yutori__label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .5em;
  color: var(--halo);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 22px;
}

.yutori__title {
  font-family: var(--f-serif-en);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(72px, 22vw, 120px);
  line-height: .92;
  text-align: center;
  letter-spacing: -.015em;
  color: var(--moon-100);
  margin: 0;
  position: relative;
}
.yutori__title-jp {
  text-align: center;
  font-family: var(--f-serif-jp);
  font-size: 13px;
  color: var(--moon-200);
  letter-spacing: .55em;
  margin-top: 18px;
  font-weight: 300;
}
.yutori__meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .35em;
  color: var(--moon-300);
  text-transform: uppercase;
}
.yutori__meta .dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--halo);
}
.yutori__image {
  margin: 56px 0 44px;
  aspect-ratio: 1 / 1;
  width: 100%;
  border: 1px solid var(--hairline);
}
.yutori__poetry {
  font-family: var(--f-serif-en);
  font-style: italic;
  font-size: 19px;
  line-height: 1.65;
  color: var(--moon-100);
  text-align: center;
  max-width: 380px;
  margin: 0 auto;
  font-weight: 300;
  text-wrap: balance;
}
.yutori__poetry-jp {
  margin-top: 24px;
  font-family: var(--f-serif-jp);
  font-size: 12.5px;
  line-height: 2.1;
  color: var(--moon-300);
  text-align: center;
  letter-spacing: .12em;
  text-wrap: pretty;
}
.yutori__ma {
  text-align: center;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--hairline);
}
.yutori__ma-en {
  font-family: var(--f-serif-en);
  font-style: italic;
  font-size: 16px;
  color: var(--moon-200);
  line-height: 1.6;
  font-weight: 300;
}
.yutori__ma-jp {
  margin-top: 10px;
  font-family: var(--f-serif-jp);
  font-size: 11.5px;
  color: var(--moon-300);
  letter-spacing: .18em;
}
.yutori__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 48px auto 0;
  padding: 18px 32px;
  border: 1px solid var(--hairline-strong);
  color: var(--moon-100);
  text-decoration: none;
  font-family: var(--f-serif-en);
  font-style: italic;
  font-size: 15px;
  letter-spacing: .1em;
  transition: all 400ms var(--ease);
  position: relative;
}
.yutori__cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}
.yutori__cta:hover {
  border-color: var(--halo);
  color: var(--halo);
  background: color-mix(in oklab, var(--halo) 6%, transparent);
}
.yutori__cta .arrow {
  transition: transform 400ms var(--ease);
}
.yutori__cta:hover .arrow { transform: translateX(4px); }

/* ==================== WI-FI (Upcoming) ==================== */
.wifi {
  padding: 100px var(--pad-x);
  text-align: center;
}
.wifi__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  border: 1px solid var(--hairline-strong);
  border-radius: 100px;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .4em;
  color: var(--moon-200);
  text-transform: uppercase;
  margin-bottom: 32px;
}
.wifi__badge .pulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--halo);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--halo) 60%, transparent);
  animation: pulse 2.2s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--halo) 60%, transparent); }
  70%  { box-shadow: 0 0 0 12px color-mix(in oklab, var(--halo) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--halo) 0%, transparent); }
}
.wifi__title {
  font-family: var(--f-serif-en);
  font-style: italic;
  font-weight: 300;
  font-size: 62px;
  line-height: 1;
  margin: 0;
  color: var(--moon-100);
  letter-spacing: -.01em;
}
.wifi__title-jp {
  margin-top: 16px;
  font-family: var(--f-serif-jp);
  font-size: 12px;
  color: var(--moon-300);
  letter-spacing: .4em;
}
.wifi__poetry {
  margin: 40px auto 0;
  font-family: var(--f-serif-en);
  font-style: italic;
  font-size: 17px;
  color: var(--moon-200);
  line-height: 1.7;
  max-width: 320px;
  font-weight: 300;
  text-wrap: balance;
}
.wifi__poetry-jp {
  margin-top: 18px;
  font-family: var(--f-serif-jp);
  font-size: 12px;
  color: var(--moon-300);
  letter-spacing: .18em;
  line-height: 2;
}
.wifi__winter {
  margin: 60px auto 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--hairline);
}
.wifi__signal {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
  height: 22px;
}
.wifi__signal span {
  display: block;
  width: 4px;
  background: var(--halo);
  opacity: .4;
  animation: signal 2.4s ease-in-out infinite;
}
.wifi__signal span:nth-child(1){ height: 30%; animation-delay: 0s; }
.wifi__signal span:nth-child(2){ height: 55%; animation-delay: .15s; }
.wifi__signal span:nth-child(3){ height: 80%; animation-delay: .3s; }
.wifi__signal span:nth-child(4){ height: 100%; animation-delay: .45s; }
@keyframes signal {
  0%,100% { opacity: .25; transform: scaleY(.9); }
  50%     { opacity: 1;   transform: scaleY(1); }
}
.wifi__cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}
.wifi__cta {
  display: inline-flex;
  align-items: baseline;
  gap: 16px;
  padding: 16px 28px;
  border: 1px solid var(--hairline-strong);
  color: var(--moon-100);
  text-decoration: none;
  font-family: var(--f-serif-en);
  font-style: italic;
  font-size: 15px;
  letter-spacing: .08em;
  font-weight: 300;
  transition: color 400ms var(--ease), border-color 400ms var(--ease), background 400ms var(--ease);
}
.wifi__cta-jp {
  font-family: var(--f-serif-jp);
  font-style: normal;
  font-size: 11px;
  color: var(--moon-300);
  letter-spacing: .3em;
}
.wifi__cta .arrow {
  font-style: normal;
  color: var(--halo-dim);
  transition: transform 400ms var(--ease), color 400ms var(--ease);
}
.wifi__cta:hover {
  border-color: var(--halo);
  color: var(--halo);
  background: color-mix(in oklab, var(--halo) 6%, transparent);
}
.wifi__cta:hover .arrow {
  transform: translateX(4px);
  color: var(--halo);
}

/* ==================== DISCOGRAPHY ==================== */
.discography {
  padding: 100px var(--pad-x);
}
.disc-list {
  display: flex;
  flex-direction: column;
  gap: 72px;
}
.disc-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.disc-item__art {
  aspect-ratio: 1 / 1;
  width: 100%;
  border: 1px solid var(--hairline);
}
.disc-item__art--wide {
  aspect-ratio: 4 / 3;
}
.disc-item__num {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .35em;
  color: var(--halo-dim);
}
.disc-item__title {
  font-family: var(--f-serif-en);
  font-weight: 300;
  font-size: 30px;
  line-height: 1.05;
  margin: 8px 0 4px;
  color: var(--moon-100);
}
.disc-item__title em { font-style: italic; }
.disc-item__title:lang(ja),
.disc-item__title[lang="ja"] {
  font-family: var(--f-serif-jp);
  letter-spacing: .06em;
}
/* Any title that starts with Japanese chars renders in Mincho automatically */
.disc-item__title:has(> :not(em)):not(:has(em)) { }
.disc-item__title-jp {
  font-family: var(--f-serif-jp);
  font-size: 12px;
  color: var(--moon-300);
  letter-spacing: .3em;
}
.disc-item__date {
  margin-top: 14px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .3em;
  color: var(--moon-300);
  text-transform: uppercase;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}
.disc-item__desc {
  margin-top: 14px;
  font-family: var(--f-serif-en);
  font-style: italic;
  font-size: 15px;
  line-height: 1.65;
  color: var(--moon-200);
  font-weight: 300;
  text-wrap: pretty;
}
.disc-item__desc-jp {
  margin-top: 10px;
  font-family: var(--f-serif-jp);
  font-size: 12px;
  color: var(--moon-300);
  line-height: 2;
  letter-spacing: .1em;
}

/* Credits block inside each discography item */
.disc-item__credits {
  margin: 22px 0 0;
  padding: 0;
}
.disc-item__credits-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 18px;
  padding: 12px 0;
  border-top: 1px solid var(--hairline);
  align-items: baseline;
}
.disc-item__credits-row:last-child { border-bottom: 1px solid var(--hairline); }
.disc-item__credits-row dt {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .32em;
  color: var(--moon-300);
  text-transform: uppercase;
  margin: 0;
}
.disc-item__credits-row dd {
  font-family: var(--f-serif-en);
  font-style: italic;
  font-size: 15px;
  color: var(--moon-100);
  margin: 0;
  letter-spacing: .04em;
  font-weight: 300;
}

/* Featured (Kaguya's Light) treatment inside the discography list */
.disc-item--featured {
  padding-bottom: 72px;
  border-bottom: 1px solid var(--hairline);
  position: relative;
}
.disc-item__badge {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .5em;
  color: var(--halo);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 4px;
}
.disc-item__art--featured {
  border-color: var(--hairline-strong);
  position: relative;
}
.disc-item__art--featured::after {
  content: "";
  position: absolute;
  inset: -1px;
  box-shadow:
    0 0 60px color-mix(in oklab, var(--halo) 22%, transparent),
    0 0 120px color-mix(in oklab, var(--halo) 12%, transparent);
  pointer-events: none;
}
.disc-item__title--lg {
  font-size: 40px;
  line-height: 1.02;
}
.disc-item--featured .disc-item__date {
  color: var(--halo);
  border-bottom-color: color-mix(in oklab, var(--halo) 40%, transparent);
}
.disc-item--featured .disc-item__desc {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--moon-100);
}
.disc-item__listen {
  display: flex;
  gap: 22px;
  margin-top: 22px;
}
.disc-item__listen a {
  font-family: var(--f-serif-en);
  font-style: italic;
  font-size: 14px;
  color: var(--moon-200);
  text-decoration: none;
  letter-spacing: .05em;
  padding: 6px 0;
  border-bottom: 1px solid var(--hairline);
  transition: color 300ms var(--ease), border-color 300ms var(--ease);
}
.disc-item__listen a:hover {
  color: var(--halo);
  border-color: var(--halo);
}

/* ==================== SINGING YOGA ==================== */
.yoga {
  padding: 100px var(--pad-x);
  text-align: center;
  position: relative;
}
.yoga__label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .5em;
  color: var(--halo);
  text-transform: uppercase;
  margin-bottom: 26px;
}
.yoga__title {
  font-family: var(--f-serif-en);
  font-weight: 300;
  font-size: 44px;
  line-height: 1.05;
  color: var(--moon-100);
  margin: 0;
  letter-spacing: .005em;
}
.yoga__title em {
  font-style: italic;
  color: color-mix(in oklab, var(--moon-100) 88%, var(--halo));
}
.yoga__schedule {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.yoga__schedule-en {
  font-family: var(--f-serif-en);
  font-style: italic;
  font-size: 15px;
  color: var(--moon-200);
  letter-spacing: .03em;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hairline);
}
.yoga__schedule-en em { font-style: italic; }
.yoga__schedule-jp {
  font-family: var(--f-serif-jp);
  font-size: 12px;
  color: var(--moon-300);
  letter-spacing: .28em;
}
.yoga__visual {
  margin: 48px 0 44px;
  aspect-ratio: 1 / 1;
  width: 100%;
  border: 1px solid var(--hairline);
}
.yoga__body-en {
  font-family: var(--f-serif-en);
  font-style: italic;
  font-size: 17px;
  line-height: 1.7;
  color: var(--moon-100);
  max-width: 340px;
  margin: 0 auto;
  font-weight: 300;
  text-wrap: balance;
}
.yoga__body-jp {
  margin: 22px auto 0;
  font-family: var(--f-serif-jp);
  font-size: 12.5px;
  color: var(--moon-300);
  line-height: 2.1;
  letter-spacing: .18em;
}
.yoga__cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}
.yoga__cta {
  display: inline-flex;
  align-items: baseline;
  gap: 16px;
  padding: 16px 28px;
  border: 1px solid var(--hairline-strong);
  color: var(--moon-100);
  text-decoration: none;
  font-family: var(--f-serif-en);
  font-style: italic;
  font-size: 15px;
  letter-spacing: .08em;
  font-weight: 300;
  transition: color 400ms var(--ease), border-color 400ms var(--ease), background 400ms var(--ease);
}
.yoga__cta-jp {
  font-family: var(--f-serif-jp);
  font-style: normal;
  font-size: 11px;
  color: var(--moon-300);
  letter-spacing: .3em;
}
.yoga__cta .arrow {
  font-style: normal;
  color: var(--halo-dim);
  transition: transform 400ms var(--ease), color 400ms var(--ease);
}
.yoga__cta:hover {
  border-color: var(--halo);
  color: var(--halo);
  background: color-mix(in oklab, var(--halo) 6%, transparent);
}
.yoga__cta:hover .arrow {
  transform: translateX(4px);
  color: var(--halo);
}

/* ==================== NEWS ==================== */
.news {
  padding: 100px var(--pad-x);
}
.news-list {
  position: relative;
  padding-left: 24px;
}
.news-list::before {
  content:"";
  position: absolute;
  left: 4px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--hairline-strong) 15%,
    var(--hairline-strong) 85%,
    transparent 100%);
}
.news-item {
  position: relative;
  padding: 18px 0 32px;
}
.news-item::before {
  content:"";
  position: absolute;
  left: -24px;
  top: 26px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink-900);
  border: 1px solid var(--halo-dim);
}
.news-item.featured::before {
  background: var(--halo);
  box-shadow: 0 0 12px color-mix(in oklab, var(--halo) 60%, transparent);
}
.news-item__date {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .3em;
  color: var(--moon-300);
  text-transform: uppercase;
}
.news-item__title {
  margin: 10px 0 6px;
  font-family: var(--f-serif-en);
  font-size: 18px;
  line-height: 1.4;
  color: var(--moon-100);
  font-weight: 300;
  text-wrap: pretty;
}
.news-item.featured .news-item__title {
  font-style: italic;
  color: color-mix(in oklab, var(--moon-100) 88%, var(--halo));
}
.news-item.featured .news-item__title::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background: var(--halo);
  margin-top: 12px;
}
.news-item__title-jp {
  font-family: var(--f-serif-jp);
  font-size: 12px;
  color: var(--moon-300);
  line-height: 1.9;
  letter-spacing: .1em;
  margin-top: 6px;
}

/* ==================== CONTACT ==================== */
.contact {
  padding: 120px var(--pad-x) 60px;
  text-align: center;
}
.contact__portrait {
  width: 100%;
  aspect-ratio: 3 / 2;
  border: 1px solid var(--hairline);
  margin: 0 auto 64px;
}
.contact__mark {
  font-family: var(--f-serif-en);
  font-style: italic;
  font-weight: 300;
  font-size: 24px;
  color: var(--moon-100);
  margin-bottom: 6px;
}
.contact__label {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .5em;
  color: var(--moon-300);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.contact__agency {
  font-family: var(--f-serif-en);
  font-size: 15px;
  color: var(--moon-200);
  margin-top: 6px;
  letter-spacing: .08em;
}
.contact__email {
  display: inline-block;
  margin-top: 20px;
  font-family: var(--f-serif-en);
  font-style: italic;
  font-size: 18px;
  color: var(--moon-100);
  text-decoration: none;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--halo-dim);
  letter-spacing: .04em;
}
.contact__email:hover { color: var(--halo); border-color: var(--halo); }
.contact__divider {
  width: 40px; height: 1px;
  background: var(--hairline-strong);
  margin: 56px auto 40px;
}
.contact__socials {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.contact__socials a {
  padding: 18px 0;
  border-top: 1px solid var(--hairline);
  color: var(--moon-100);
  text-decoration: none;
  font-family: var(--f-serif-en);
  font-size: 15px;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 300;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color 300ms var(--ease);
}
.contact__socials a:last-child { border-bottom: 1px solid var(--hairline); }
.contact__socials a:hover { color: var(--halo); }
.contact__socials a .arrow {
  font-family: var(--f-serif-en);
  font-style: italic;
  color: var(--halo-dim);
  transition: transform 300ms var(--ease);
}
.contact__socials a:hover .arrow { transform: translateX(4px); color: var(--halo); }

/* ==================== FOOTER ==================== */
.footer {
  padding: 60px var(--pad-x) 40px;
  text-align: center;
  border-top: 1px solid var(--hairline);
}
.footer__mark {
  font-family: var(--f-serif-en);
  font-style: italic;
  font-size: 20px;
  color: var(--moon-200);
  margin-bottom: 12px;
}
.footer__copy {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .35em;
  color: var(--fog);
  text-transform: uppercase;
}
.footer__jp {
  font-family: var(--f-serif-jp);
  font-size: 10.5px;
  color: var(--fog);
  letter-spacing: .35em;
  margin-top: 10px;
}

/* ==================== FIGURE / IMG DEFAULTS ==================== */
figure {
  margin: 0;
  padding: 0;
  background: var(--ink-900);
  overflow: hidden;
  display: block;
}
figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
}
figure video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* Progress line at the very top */
.progress {
  position: fixed;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--page-max);
  height: 1px;
  z-index: 50;
  pointer-events: none;
}
.progress__bar {
  height: 100%;
  width: var(--progress, 0%);
  background: linear-gradient(90deg,
    transparent 0%,
    var(--halo) 50%,
    transparent 100%);
  transition: width 200ms linear;
}

/* Chapter counter overlay while scrolling */
.chapter-indicator {
  position: fixed;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 14px;
  pointer-events: none;
}
.chapter-indicator span {
  display: block;
  width: 1px;
  height: 22px;
  background: var(--hairline);
  transition: background 400ms var(--ease), transform 400ms var(--ease);
  transform-origin: center;
}
.chapter-indicator span.active {
  background: var(--halo);
  transform: scaleY(1.4);
}


/* ============================================================
   ============  DESKTOP / TABLET RESPONSIVE  =================
   Layout up to 500px stays mobile-first.
   ≥ 760px: cap widens, section paddings grow.
   ≥ 900px: nav goes horizontal, Profile/Wi-Fi become 2-col,
            Discography becomes 2-col (Featured is full width).
   ≥ 1200px: max page widens further, titles get grander.
   ============================================================ */

@media (min-width: 760px) {
  :root {
    --page-max: 760px;
    --pad-x: 56px;
  }
  .section { padding: 140px var(--pad-x); }
  .hero { padding: 140px var(--pad-x) 80px; }
}

@media (min-width: 900px) {
  :root {
    --page-max: 1080px;
    --pad-x: 72px;
  }

  /* Nav — desktop horizontal */
  .nav {
    padding: 22px var(--pad-x);
  }
  .nav__toggle { display: none; }
  .nav__links {
    display: flex;
    gap: 38px;
    align-items: center;
  }
  .menu { display: none !important; }

  /* Hero: bigger presence, left-aligned poetic block */
  .hero {
    min-height: 100vh;
    padding: 160px var(--pad-x) 100px;
  }
  .hero__title {
    font-size: clamp(72px, 8vw, 108px);
    line-height: 1.02;
  }
  .hero__body {
    max-width: 620px;
  }
  .hero__sub-en { font-size: 20px; max-width: 420px; }
  .hero__sub-jp { font-size: 14px; }

  /* Section head — leave the calm center feel */
  .section__head {
    margin-bottom: 72px;
  }
  .section__title {
    font-size: 64px;
  }

  /* ---------- PROFILE 2-COL ---------- */
  .profile {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 64px;
    align-items: center;
  }
  .profile__portrait {
    aspect-ratio: 3 / 4;
  }
  .profile__text-en { font-size: 18px; }

  /* ---------- YUTORI (feature) — center, wider max ---------- */
  .yutori {
    padding: 200px var(--pad-x);
  }
  .yutori::before {
    width: 720px; height: 720px;
    top: 15%;
  }
  .yutori__title {
    font-size: clamp(140px, 16vw, 200px);
  }
  .yutori__image {
    max-width: 720px;
    margin: 72px auto 60px;
  }
  .yutori__poetry { font-size: 22px; max-width: 520px; }
  .yutori__poetry-jp { font-size: 13.5px; max-width: 520px; }
  .yutori__ma-en { font-size: 18px; max-width: 540px; margin: 0 auto; }

  /* ---------- WI-FI (upcoming) — 2 col: title left / visual right ---------- */
  .wifi {
    padding: 140px var(--pad-x);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 72px;
    align-items: center;
    text-align: left;
  }
  .wifi__badge,
  .wifi__title,
  .wifi__poetry,
  .wifi__poetry-jp,
  .wifi__signal,
  .wifi__cta-wrap {
    grid-column: 1;
    justify-content: flex-start;
    text-align: left;
  }
  .wifi__title { font-size: 84px; }
  .wifi__poetry { margin-left: 0; margin-right: 0; }
  .wifi__poetry-jp { text-align: left; }
  .wifi__winter {
    grid-column: 2;
    grid-row: 1 / span 8;
    margin: 0;
    aspect-ratio: 1 / 1;
    align-self: center;
  }
  .wifi__signal { display: flex; gap: 5px; }

  /* ---------- KAGUYA (featured) — 2 col ---------- */
  .disc-item--featured {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
    align-items: center;
  }
  .disc-item--featured .disc-item__badge {
    grid-column: 1 / -1;
  }
  .disc-item--featured .disc-item__art--featured {
    grid-column: 1;
    grid-row: 2;
  }
  .disc-item--featured > div {
    grid-column: 2;
    grid-row: 2;
  }
  .disc-item__title--lg { font-size: 56px; }

  /* ---------- DISCOGRAPHY GRID (non-featured items) ---------- */
  /* Wrap all non-featured items in a 2-col grid.
     The featured item stays full width by being outside this grid via CSS-only trick:
     we make disc-list a grid and give the featured item full span. */
  .disc-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 96px 56px;
  }
  .disc-item--featured {
    grid-column: 1 / -1;   /* full-width row */
    padding-bottom: 96px;
  }

  /* ---------- YOGA — 2 col: text left / visual right ---------- */
  .yoga {
    padding: 140px var(--pad-x);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 72px;
    align-items: center;
    text-align: left;
  }
  .yoga__label,
  .yoga__title,
  .yoga__schedule,
  .yoga__body-en,
  .yoga__body-jp,
  .yoga__cta-wrap {
    grid-column: 1;
    text-align: left;
    align-items: flex-start;
  }
  .yoga__schedule { align-items: flex-start; }
  .yoga__title { font-size: 64px; }
  .yoga__body-en { margin-left: 0; margin-right: 0; }
  .yoga__body-jp { margin-left: 0; margin-right: 0; }
  .yoga__cta-wrap { justify-content: flex-start; }
  .yoga__visual {
    grid-column: 2;
    grid-row: 1 / span 8;
    margin: 0;
    align-self: center;
  }

  /* ---------- NEWS ---------- */
  .news-list {
    padding-left: 32px;
    max-width: 760px;
    margin: 0 auto;
  }
  .news-item__title { font-size: 22px; }

  /* ---------- CONTACT — 2 col: portrait left / info right ---------- */
  .contact {
    padding: 160px var(--pad-x) 80px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 72px;
    align-items: center;
    text-align: left;
  }
  .contact__portrait {
    grid-column: 1;
    grid-row: 1 / span 20;
    margin: 0;
    aspect-ratio: 4 / 5;
    align-self: center;
  }
  .contact__mark,
  .contact__label,
  .contact__agency,
  .contact__email,
  .contact__divider,
  .contact__socials {
    grid-column: 2;
    text-align: left;
  }
  .contact__divider { margin: 40px 0; }
  .contact__socials a { font-size: 16px; }

  /* Footer widens */
  .footer { padding: 80px var(--pad-x) 60px; }

  /* Chapter indicator hidden on desktop (nav is enough) */
  .chapter-indicator { display: none !important; }

  /* Hide mobile menu overlay entirely */
  .menu { display: none !important; }
}

@media (min-width: 1200px) {
  :root {
    --page-max: 1200px;
    --pad-x: 96px;
  }
  .hero__title {
    font-size: clamp(96px, 8vw, 128px);
  }
  .section__title { font-size: 76px; }
  .yutori__title { font-size: clamp(180px, 15vw, 240px); }
  .yutori__image { max-width: 800px; }
}