/* =========================================================
   GUERNICA — Dance School Portfolio
   1rem = 10px @1920px (desktop) / @390px (mobile)
   ========================================================= */

:root {
  --c-main: #000000;
  --c-sub: #ffffff;
  --c-gray: #e6e6e6;
  --c-gray-dark: #666666;
  --c-line: rgba(200, 210, 220, 0.08);
  /* steel (鋼色) */
  --st-900: #0b0d10;
  --st-800: #171b20;
  --st-700: #2a3139;
  --st-600: #414a54;
  --st-500: #5f6b77;
  --st-400: #86919c;
  --st-300: #aeb7c0;
  --st-200: #cfd6dc;
  --st-100: #eef1f3;
  --metal: linear-gradient(135deg, #2a3139 0%, #8e99a4 18%, #eef1f3 34%, #7a858f 50%, #262c33 68%, #aeb7c0 86%, #5f6b77 100%);
  --metal-v: linear-gradient(180deg, #f4f6f8 0%, #c3cbd2 40%, #6c7782 52%, #b9c2ca 70%, #eef1f3 100%);
  --brush: repeating-linear-gradient(90deg, rgba(255,255,255,0.045) 0 1px, rgba(0,0,0,0.05) 1px 2px, transparent 2px 4px);

  --f-sans: "Zen Kaku Gothic New", "Kumbh Sans", sans-serif;
  --f-num: "Plus Jakarta Sans", sans-serif;
  --f-serif: "Shippori Mincho B1", serif;
  --f-jp: "Zen Kaku Gothic New", sans-serif;

  --ease-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-io: cubic-bezier(0.87, 0, 0.13, 1);
  --gutter: 2rem;
  --ui: max(1.4rem, 10px);
}

html { font-size: calc(100vw / 192); }
@media (max-width: 767px) {
  html { font-size: calc(100vw / 39); }
  :root { --gutter: 1.6rem; --ui: 10px; }
}

*, *::before, *::after { box-sizing: border-box; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--c-main);
  color: var(--c-sub);
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: max(1.6rem, 13px);
  line-height: 1.7;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-loading { overflow: hidden; }
::selection { background: var(--c-sub); color: var(--c-main); }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol, dl, dd, p, h1, h2, h3 { margin: 0; padding: 0; list-style: none; font-weight: inherit; }
em { font-family: var(--f-serif); font-style: normal; font-weight: 500; letter-spacing: 0; }

@media (pointer: fine) { body, a, button { cursor: none; } }

/* ---------- split helpers ---------- */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 0.08em 0.08em 0; margin: 0 -0.08em -0.08em 0; }
.wi { display: inline-block; will-change: transform; }
.c { display: inline-block; will-change: transform; }
.cw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.line { display: block; overflow: hidden; }
.line > span { display: inline-block; will-change: transform; padding-right: 0.12em; }

/* =========================================================
   LOADER — mechanical steel gauge
   ========================================================= */
.loader {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  background: radial-gradient(70vmax 70vmax at 50% 45%, #1a1f25 0%, var(--st-900) 55%, var(--st-950) 100%);
  overflow: hidden;
}
.loader__brush { position: absolute; inset: 0; background: var(--brush); opacity: 0.5; pointer-events: none; }
.loader__dial {
  position: absolute; left: 50%; top: 50%;
  width: min(62rem, 78vmin); height: min(62rem, 78vmin);
  transform: translate(-50%, -50%); overflow: visible;
}
.dial-spin { animation: dialSpin 24s linear infinite; transform-origin: 0 0; }
@keyframes dialSpin { to { transform: rotate(360deg); } }
.dial-ticks line { stroke: var(--st-400); stroke-width: 1; opacity: 0.22; vector-effect: non-scaling-stroke; transition: opacity 0.25s, stroke 0.25s; }
.dial-ticks line.is-major { stroke-width: 1.5; }
.dial-ticks line.is-on { opacity: 1; stroke: var(--st-100); }
.dial-track { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dial-arc { fill: none; stroke: var(--st-200); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; transform: rotate(-90deg); vector-effect: non-scaling-stroke; }
.dial-inner { fill: none; stroke: rgba(255,255,255,0.05); stroke-dasharray: 2 6; vector-effect: non-scaling-stroke; }
.dial-needle { transform: rotate(0deg); }
.dial-needle line { stroke: var(--st-100); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dial-needle circle { fill: var(--st-100); }
.loader__num {
  position: relative; display: flex; align-items: flex-start;
  font-family: var(--f-num); font-weight: 200;
  font-size: max(15rem, 72px); letter-spacing: -0.04em;
}
.loader__pct { font-size: 0.26em; margin: 0.18em 0 0 0.08em; font-weight: 300; color: var(--st-300); letter-spacing: 0; }
.loader__meta {
  position: absolute; right: var(--gutter); bottom: calc(var(--gutter) + 2.4rem);
  text-align: right; font-size: var(--ui); letter-spacing: 0.14em; line-height: 2; color: var(--st-300);
  font-variant-numeric: tabular-nums;
}
.loader__meta i { font-style: normal; color: var(--st-500); margin-right: 1.2rem; }
.loader__label {
  position: absolute; left: var(--gutter); bottom: calc(var(--gutter) + 2.4rem);
  font-size: var(--ui); letter-spacing: 0.14em;
}
.loader__label span { opacity: 0.4; }
.loader__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,0.06); }
.loader__bar span { display: block; height: 100%; width: 100%; background: var(--metal); transform: scaleX(0); transform-origin: left; }

/* mechanical odometer — every column is 0‥9 + a trailing 0 so 9→0 rolls forward */
.odo {
  display: inline-flex; height: 1.1em; line-height: 1.1em; overflow: hidden;
  font-variant-numeric: tabular-nums; vertical-align: top;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, var(--c-main) 12%, var(--c-main) 88%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, var(--c-main) 12%, var(--c-main) 88%, transparent 100%);
}
.odo__col { display: flex; flex-direction: column; will-change: transform; }
.odo__col span { display: block; height: 1.1em; width: 0.64em; text-align: center; }
.odo--steel .odo__col span {
  background: var(--metal-v); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.odo--ui { -webkit-mask-image: none; mask-image: none; }
.odo--ui .odo__col span { width: 0.7em; }

/* =========================================================
   FIXED LAYERS
   ========================================================= */
.webgl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.bg-glow {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background:
    var(--brush),
    radial-gradient(120vmax 90vmax at -18% 118%, var(--st-100) 0%, #9aa5af 10%, #4a535d 24%, #1d2228 40%, rgba(13,16,19,0) 62%);
}
.hero-halo {
  position: fixed; left: 50%; top: 50%; z-index: 0; pointer-events: none;
  width: 110vmin; height: 110vmin; transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(closest-side, rgba(190, 200, 210, 0.16), rgba(120, 132, 145, 0.06) 55%, transparent 100%);
}
.grid-lines {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  display: grid; grid-template-columns: repeat(8, 1fr);
  opacity: 0;
}
.grid-lines span { border-right: 1px solid var(--c-line); transform-origin: top; }
@media (max-width: 767px) { .grid-lines { grid-template-columns: repeat(4, 1fr); } .grid-lines span:nth-child(n+4) { display: none; } }

.grain {
  position: fixed; inset: -50%; z-index: 50; pointer-events: none; opacity: 0.05;
  background-image: url("../assets/img/noise-grain.png");
  animation: grain 0.8s steps(4) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); }
  50% { transform: translate(2%, -3%); } 75% { transform: translate(-1%, 3%); } 100% { transform: translate(0, 0); }
}

/* =========================================================
   CORNER UI (mix-blend difference → auto inverts on white)
   ========================================================= */
.ui {
  position: fixed; z-index: 60;
  font-family: var(--f-sans); font-weight: 400;
  font-size: var(--ui); letter-spacing: 0.12em; line-height: 1;
  color: var(--c-sub); mix-blend-mode: difference;
  white-space: nowrap;
}
.ui--tl { top: var(--gutter); left: var(--gutter); }
.ui--tr { top: var(--gutter); right: var(--gutter); }
.ui--bl { bottom: var(--gutter); left: var(--gutter); font-variant-numeric: tabular-nums; }
.ui--br { bottom: var(--gutter); right: var(--gutter); }
.is-loading .ui { opacity: 0; }
.ui--tr, .ui--br, .ui--tl { transition: opacity 0.4s; }
@media (hover: hover) { .ui--tr:hover, .ui--br:hover, .ui--tl:hover { opacity: 0.5; } }

/* =========================================================
   MENU
   ========================================================= */
.menu { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.menu.is-open { pointer-events: auto; }
.menu__wrap { position: absolute; top: 0; right: 0; width: 50%; height: 100%; overflow: hidden; }
@media (max-width: 767px) { .menu__wrap { width: 100%; } }
.menu__layer, .menu__panel { position: absolute; inset: 0; }
.menu:not(.is-ready) .menu__wrap { visibility: hidden; }
.menu__layer--grad { background: var(--brush), var(--metal); }
.menu__layer--dark { background: var(--st-900); }
.menu__panel {
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 12%;
  background: rgba(14, 17, 20, 0.45);
  -webkit-backdrop-filter: blur(28px) saturate(1.2);
  backdrop-filter: blur(28px) saturate(1.2);
  border-left: 1px solid var(--c-line);
}
.menu__links li { overflow: hidden; }
.menu__links a {
  position: relative; display: inline-block;
  font-size: max(6.4rem, 34px); line-height: 1.2; letter-spacing: 0.02em; font-weight: 300;
}
.menu__links a span, .menu__links a em { display: block; transition: transform 0.7s var(--ease-expo); }
.menu__links a em { position: absolute; left: 0; top: 100%; }
@media (hover: hover) {
  .menu__links a:hover span, .menu__links a:hover em { transform: translateY(-100%); }
}
.menu__sns { display: grid; grid-template-columns: repeat(2, max-content); gap: 1.2rem 6rem; margin-top: 6rem; font-size: max(1.6rem, 13px); }
.menu__sns a { opacity: 0.8; }
.menu__close { top: var(--gutter); right: var(--gutter); opacity: 0; mix-blend-mode: normal; }

/* =========================================================
   CURSOR
   ========================================================= */
.cursor { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; display: none; }
@media (pointer: fine) { .cursor { display: block; } }
.cursor__plus {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  font-size: 14px; line-height: 1; color: var(--c-sub); mix-blend-mode: difference;
  transition: opacity 0.3s;
}
.cursor__ring {
  position: absolute; left: 0; top: 0;
  width: 12rem; height: 12rem; min-width: 84px; min-height: 84px;
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  transition: transform 0.6s var(--ease-expo);
}
.cursor__label { font-size: 11px; letter-spacing: 0.14em; color: var(--c-sub); }
.cursor.is-active .cursor__ring { transform: translate(-50%, -50%) scale(1); }
.cursor.is-liquid .cursor__ring {
  width: 7rem; height: 7rem; min-width: 56px; min-height: 56px;
  background: rgba(220, 228, 235, 0.08); border-color: rgba(238, 241, 243, 0.7);
  animation: liquidRing 1.6s ease-in-out infinite;
}
@keyframes liquidRing {
  0%, 100% { border-radius: 50% 50% 50% 50%; }
  25% { border-radius: 58% 42% 55% 45%; }
  50% { border-radius: 45% 55% 42% 58%; }
  75% { border-radius: 52% 48% 60% 40%; }
}
.cursor.is-active .cursor__plus { opacity: 0; }

/* =========================================================
   SHARED
   ========================================================= */
main { position: relative; z-index: 2; }
section { position: relative; }
.tag {
  font-size: var(--ui); letter-spacing: 0.14em; font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
}

/* placeholder art (差し替え用：写真・動画が来たら img/video に置換) */
.ph {
  position: relative; display: block; width: 100%; height: 100%;
  overflow: hidden; background: var(--st-900);
}
.ph::before {
  content: ""; position: absolute; inset: -20%;
  background:
    var(--brush),
    radial-gradient(60% 50% at var(--x1, 30%) var(--y1, 30%), var(--p1, var(--st-200)) 0%, transparent 60%),
    radial-gradient(70% 60% at var(--x2, 70%) var(--y2, 70%), var(--p2, var(--st-500)) 0%, transparent 65%),
    linear-gradient(160deg, var(--p3, var(--st-700)), #07080a 80%);
  transition: transform 1.2s var(--ease-expo);
}
.ph::after {
  content: attr(data-label);
  position: absolute; left: 8%; bottom: 7%;
  font-family: var(--f-num); font-size: max(1.2rem, 10px); letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.75);
}
.ph--1 { --p1: #e6ebef; --p2: #6c7782; --p3: var(--st-700); --x1: 25%; --y1: 20%; }
.ph--2 { --p1: var(--c-sub); --p2: #56616c; --p3: #1b2026; --x1: 70%; --y1: 30%; --x2: 20%; --y2: 80%; }
.ph--3 { --p1: #b9c3cc; --p2: #3a434c; --p3: #0d1013; --x1: 50%; --y1: 60%; }
.ph--4 { --p1: #dfe5ea; --p2: #7b8793; --p3: #121518; --x1: 80%; --y1: 80%; --x2: 30%; --y2: 20%; }
.ph--5 { --p1: #9aa5af; --p2: var(--st-700); --p3: var(--c-main); --x1: 40%; --y1: 40%; }
.ph--6 { --p1: var(--c-sub); --p2: #8e99a4; --p3: #20262d; --x1: 20%; --y1: 75%; --x2: 75%; --y2: 25%; }
.ph img, .ph video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }

/* =========================================================
   01 HERO
   ========================================================= */
.hero { height: 100svh; min-height: 560px; overflow: hidden; }
.hero__geo {
  position: absolute; left: 50%; top: 50%;
  width: max(100vw, 160vh); height: max(100vw, 160vh);
  transform: translate(-50%, -50%);
  overflow: visible; pointer-events: none;
  fill: none; stroke: rgba(255, 255, 255, 0.28); stroke-width: 1;
}
.hero__geo * { vector-effect: non-scaling-stroke; }
.hero__geo circle, .hero__geo line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.hero__geo circle { transform-box: fill-box; transform-origin: center; transform: rotate(-90deg); }
.geo-lines { stroke: rgba(255, 255, 255, 0.12); }

.hero__labels {
  position: absolute; left: 0; right: 0; top: 50%;
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 0 var(--gutter);
  transform: translateY(-50%);
  font-size: var(--ui); letter-spacing: 0.12em; font-weight: 400;
  color: rgba(255, 255, 255, 0.75);
}
.hero__labels li { padding-top: 1.2rem; }
.hero__labels li:nth-child(2) { text-align: center; transform: translateX(-35%); }
.hero__labels li:nth-child(3) { text-align: center; transform: translateX(35%); }
.hero__labels li:nth-child(4) { text-align: right; }
@media (max-width: 767px) { .hero__labels { grid-template-columns: repeat(2, 1fr); row-gap: 1rem; } .hero__labels li { transform: none !important; text-align: left !important; } .hero__labels li:nth-child(even) { text-align: right !important; } }

.hero__copy {
  position: absolute; right: calc(100% / 8 + var(--gutter)); top: 27%;
  width: 34rem; min-width: 220px;
  font-size: var(--ui); letter-spacing: 0.1em; line-height: 1.6; text-align: right;
  color: rgba(255, 255, 255, 0.75);
}
@media (max-width: 767px) { .hero__copy { right: var(--gutter); top: 14%; width: 60%; } }

.hero__title {
  position: absolute; left: var(--gutter); bottom: calc(var(--gutter) + 3.6rem);
  font-size: max(8.4rem, 38px); line-height: 1.14; letter-spacing: -0.005em; font-weight: 300;
}
.hero__title .ln { display: block; }
.hero__title em { font-weight: 400; }
.hero__jp {
  position: absolute; right: var(--gutter); bottom: calc(var(--gutter) + 3.6rem);
  font-family: var(--f-jp); font-size: max(1.4rem, 11px); letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.7); writing-mode: vertical-rl;
}
@media (max-width: 767px) {
  .hero__title { bottom: 5.6rem; font-size: 3.8rem; }
  .hero__jp { display: none; }
}

/* =========================================================
   02 PROFILE
   ========================================================= */
.profile {
  display: grid; grid-template-columns: repeat(8, 1fr);
  padding: 34rem var(--gutter) 30rem;
  text-shadow: 0 0 30px rgba(0, 0, 0, 0.55);
}
.profile .tag { grid-column: 3 / 4; grid-row: 2; padding-top: 2.6rem; }
.profile__hello {
  grid-column: 1 / -1; grid-row: 1;
  font-size: max(30rem, 110px); line-height: 0.9; letter-spacing: -0.03em; font-weight: 200;
  margin-left: -1.2rem;
}
.profile__lead {
  grid-column: 3 / -1; grid-row: 3;
  font-size: max(5.8rem, 26px); line-height: 1.22; font-weight: 300; margin-top: 2rem;
}
.profile__jp {
  grid-column: 5 / -1; grid-row: 4;
  margin-top: 6rem;
  font-family: var(--f-jp); font-size: max(1.5rem, 12px); line-height: 2.1; letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.92);
}
.profile__meta {
  grid-column: 5 / -1; grid-row: 5; margin-top: 5rem;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
  font-size: max(1.3rem, 11px);
  border-top: 1px solid rgba(255, 255, 255, 0.35); padding-top: 1.6rem;
}
.profile__meta dt { letter-spacing: 0.14em; opacity: 0.7; margin-bottom: 0.4rem; }
.profile__meta dd { font-family: var(--f-jp); }
@media (max-width: 767px) {
  .profile { display: block; padding: 22rem var(--gutter) 18rem; }
  .profile__hello { font-size: 11rem; margin: 0 0 3rem -0.4rem; }
  .profile__lead { font-size: 2.4rem; margin-top: 1.6rem; }
  .profile__jp { margin-top: 4rem; }
  .profile__meta { grid-template-columns: 1fr; }
}

/* =========================================================
   03 STATEMENT (pinned)
   ========================================================= */
.statement__inner {
  position: relative; height: 100svh; overflow: hidden;
  display: grid; place-items: center;
}
.statement__text {
  position: relative; z-index: 2; text-align: center;
  font-size: max(7.6rem, 30px); line-height: 1.22; font-weight: 300;
}
.statement__text .ln { display: block; }
.tile {
  display: inline-block; vertical-align: middle;
  width: 1.9em; height: 0.92em; margin: -0.1em 0.06em 0;
  border-radius: 0.08em; overflow: hidden;
}
.tile .ph::after { font-size: 9px; left: 10%; bottom: 10%; }
.floaty { position: absolute; z-index: 1; overflow: hidden; opacity: 0.85; }
.floaty--1 { width: 16rem; aspect-ratio: 4/3; left: 10%; top: 12%; }
.floaty--2 { width: 12rem; aspect-ratio: 1; right: 14%; top: 18%; }
.floaty--3 { width: 22rem; aspect-ratio: 16/10; left: 4%; bottom: 8%; }
.floaty--4 { width: 14rem; aspect-ratio: 3/4; right: 7%; bottom: 14%; }
.floaty--5 { width: 9rem; aspect-ratio: 1; left: 46%; bottom: 6%; }
@media (max-width: 767px) {
  .statement__text { font-size: 3.2rem; }
  .floaty--1 { width: 12rem; } .floaty--3 { width: 16rem; } .floaty--4 { width: 10rem; }
}

/* =========================================================
   04 REEL (pinned)
   ========================================================= */
.reel__inner { position: relative; height: 100svh; overflow: hidden; }
.reel__strips {
  position: absolute; inset: -4%;
  display: grid; grid-template-rows: repeat(5, 1fr); gap: 0.6rem;
  filter: blur(10px) brightness(0.8);
  transform: scale(1.08);
}
.strip { overflow: hidden; }
.strip__track { display: flex; gap: 0.6rem; height: 100%; width: 170%; will-change: transform; }
.strip__item { flex: 1 1 0; height: 100%; }
.reel__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 3; text-align: center;
}
.reel__play-txt { display: block; font-size: max(8.8rem, 40px); line-height: 1; letter-spacing: 0.02em; font-weight: 300; white-space: nowrap; }
.reel__play-sub { display: block; margin-top: 2rem; font-family: var(--f-jp); font-size: max(1.3rem, 11px); letter-spacing: 0.2em; opacity: 0.8; }
.reel__fade {
  position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0;
  background: var(--brush), radial-gradient(120vmax 90vmax at -18% 118%, var(--st-100) 0%, #9aa5af 10%, #4a535d 24%, #1d2228 40%, var(--c-main) 62%);
}

/* =========================================================
   05 APPROACH
   ========================================================= */
.approach {
  display: grid; grid-template-columns: repeat(8, 1fr);
  padding: 34rem var(--gutter) 20rem;
}
.approach .tag { grid-column: 2 / 3; padding-top: 1.8rem; }
.highlight {
  grid-column: 2 / 8; margin-top: 3rem;
  font-size: max(6.4rem, 28px); line-height: 1.24; font-weight: 300;
}
.highlight .wi { opacity: 0.16; }
.approach__jp {
  grid-column: 6 / -1; margin-top: 8rem;
  font-family: var(--f-jp); font-size: max(1.5rem, 12px); line-height: 2.1; letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.85);
}
@media (max-width: 767px) {
  .approach { display: block; padding: 18rem var(--gutter) 12rem; }
  .highlight { font-size: 2.8rem; }
  .approach__jp br { display: none; }
}

/* =========================================================
   06 PROGRAMS
   ========================================================= */
.programs {
  display: grid; grid-template-columns: repeat(8, 1fr);
  padding: 0 var(--gutter) 24rem;
}
.programs__sticky {
  grid-column: 1 / 5; position: sticky; top: 0; height: 100svh;
  display: grid; place-items: center;
}
.programs__geo {
  width: min(52rem, 70vh); height: min(52rem, 70vh); overflow: visible;
  fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 1;
}
.programs__geo * { vector-effect: non-scaling-stroke; }
.pg-d { fill: var(--c-sub); stroke: none; }
.programs__count {
  position: absolute; left: 0; bottom: 12vh;
  font-family: var(--f-num); font-size: max(2.4rem, 16px); font-weight: 300;
}
.programs__count i { font-style: normal; opacity: 0.5; margin-left: 0.6rem; }
.programs__list { grid-column: 5 / -1; padding-top: 30vh; }
.program {
  min-height: 72vh; padding-left: 3rem; position: relative;
  opacity: 0.25; transition: opacity 0.8s var(--ease-expo);
}
.program.is-active { opacity: 1; }
.program__no { font-family: var(--f-num); font-size: max(1.3rem, 11px); letter-spacing: 0.14em; position: absolute; left: 0; top: 1.6rem; }
.program__title { font-size: max(8.8rem, 38px); line-height: 1.05; letter-spacing: -0.01em; font-weight: 300; }
.program__jp { margin-top: 1.4rem; font-family: var(--f-jp); font-size: max(1.8rem, 14px); letter-spacing: 0.2em; }
.program__txt { margin-top: 2.4rem; max-width: 58rem; font-family: var(--f-jp); font-size: max(1.4rem, 12px); line-height: 2.1; color: rgba(255, 255, 255, 0.8); }
@media (max-width: 767px) {
  .programs { display: block; }
  .programs__sticky { height: 46svh; top: 0; z-index: 0; }
  .programs__geo { width: 26rem; height: 26rem; }
  .programs__count { bottom: 2rem; }
  .programs__list { padding-top: 6vh; position: relative; }
  .program { min-height: 56vh; padding-left: 0; }
  .program__no { position: static; margin-bottom: 1rem; }
  .program__txt br { display: none; }
}

/* =========================================================
   07 PATHS
   ========================================================= */
.paths { padding: 10rem var(--gutter) 26rem; }
.paths__row { display: flex; gap: 0; margin-top: 3rem; height: max(76rem, 520px); }
.path {
  position: relative; flex: 1 1 0; overflow: hidden;
  padding: 5rem 4rem;
  display: flex; flex-direction: column;
  transition: flex-grow 1s var(--ease-expo);
}
.path--joy { background: var(--brush), linear-gradient(165deg, #f4f6f8 0%, var(--st-200) 30%, #8e99a4 75%, var(--st-500) 100%); color: var(--st-900); }
.path--pro { background: var(--brush), linear-gradient(200deg, var(--st-500) 0%, var(--st-700) 40%, var(--st-900) 100%); }
@media (hover: hover) { .paths__row:hover .path { flex-grow: 0.8; } .paths__row .path:hover { flex-grow: 1.35; } }
.path__en { font-size: max(12rem, 52px); line-height: 1; font-weight: 300; letter-spacing: -0.02em; }
.path__jp { margin-top: auto; font-family: var(--f-jp); font-weight: 500; font-size: max(3.2rem, 20px); line-height: 1.5; letter-spacing: 0.06em; }
.path__list { margin-top: 3rem; font-family: var(--f-jp); font-size: max(1.4rem, 12px); line-height: 2.2; }
.path__list li::before { content: "— "; opacity: 0.6; }
@media (max-width: 767px) { .paths { padding: 8rem var(--gutter) 14rem; } .paths__row { flex-direction: column; height: auto; } .path { min-height: 54rem; padding: 3rem 2.4rem; } }

/* =========================================================
   08 ACHIEVEMENTS
   ========================================================= */
.achievements { padding: 8rem var(--gutter) 24rem; }
.achievements__title { font-size: max(19rem, 64px); line-height: 1; letter-spacing: -0.03em; font-weight: 200; margin: 2rem 0 0 -0.8rem; }
.stats {
  display: grid; grid-template-columns: repeat(8, 1fr);
  margin-top: 8rem; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.stats li:nth-child(1) { grid-column: 1 / 3; }
.stats li:nth-child(2) { grid-column: 4 / 6; }
.stats li:nth-child(3) { grid-column: 7 / 9; }
.stats__num { font-family: var(--f-num); font-weight: 300; font-size: max(9.6rem, 44px); line-height: 1.1; display: flex; align-items: flex-start; }
.stats__num i { font-style: normal; font-size: 0.5em; margin-left: 0.2em; line-height: 1.5; color: var(--st-300); }
.stats__label { margin-top: 1rem; font-size: var(--ui); letter-spacing: 0.14em; line-height: 1.6; }
.stats__label span { font-family: var(--f-jp); letter-spacing: 0.06em; opacity: 0.6; }

.works {
  display: grid; grid-template-columns: repeat(8, 1fr);
  column-gap: var(--gutter); row-gap: 14rem; margin-top: 20rem;
}
.work { display: block; }
.work__media { overflow: hidden; clip-path: inset(100% 0 0 0); }
.work__media .ph { transform: scale(1.35); aspect-ratio: 16/10; }
.work:nth-child(1) { grid-column: 3 / 6; }
.work:nth-child(2) { grid-column: 7 / 9; margin-top: 30rem; }
.work:nth-child(2) .ph { aspect-ratio: 4/5; }
.work:nth-child(3) { grid-column: 1 / 3; }
.work:nth-child(3) .ph { aspect-ratio: 3/4; }
.work:nth-child(4) { grid-column: 5 / 8; margin-top: 18rem; }
.work:nth-child(5) { grid-column: 2 / 5; }
.work:nth-child(6) { grid-column: 7 / 9; margin-top: 12rem; }
.work:nth-child(6) .ph { aspect-ratio: 1; }
.work__title { margin-top: 1.6rem; font-family: var(--f-jp); font-size: max(1.8rem, 14px); letter-spacing: 0.04em; }
.work__cat { margin-top: 0.4rem; font-size: var(--ui); letter-spacing: 0.14em; opacity: 0.55; }
@media (hover: hover) { .work:hover .ph::before { transform: scale(1.12) rotate(2deg); } }
@media (max-width: 767px) {
  .achievements__title { font-size: 6.4rem; }
  .stats { grid-template-columns: 1fr; gap: 3rem; }
  .stats li { grid-column: auto !important; }
  .works { grid-template-columns: repeat(4, 1fr); row-gap: 7rem; margin-top: 10rem; }
  .work:nth-child(odd) { grid-column: 1 / 4 !important; margin-top: 0 !important; }
  .work:nth-child(even) { grid-column: 2 / 5 !important; margin-top: 0 !important; }
}

/* =========================================================
   09 CONTACT
   ========================================================= */
.contact { padding: 20rem var(--gutter) 30rem; min-height: 100svh; }
.contact__title {
  margin-top: 4rem;
  font-size: max(27rem, 72px); line-height: 0.92; letter-spacing: -0.035em; font-weight: 200;
  white-space: nowrap; margin-left: -1rem;
}
.contact__jp { margin-top: 6rem; margin-left: calc(100% / 8 * 4); font-family: var(--f-jp); font-size: max(1.6rem, 13px); line-height: 2.1; letter-spacing: 0.06em; }
.contact__cta { margin-top: 5rem; margin-left: calc(100% / 8 * 4); display: flex; flex-wrap: wrap; gap: 2rem; }
.btn {
  position: relative; display: inline-flex; flex-direction: column; gap: 0.6rem;
  padding: 2.6rem 4.4rem; border-radius: 999px;
  background: var(--c-sub); color: var(--c-main); overflow: hidden;
  isolation: isolate;
}
.btn span { font-family: var(--f-jp); font-weight: 500; font-size: max(1.8rem, 14px); letter-spacing: 0.06em; }
.btn i { font-style: normal; font-size: max(1.1rem, 10px); letter-spacing: 0.18em; opacity: 0.6; }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--brush), var(--metal);
  transform: translateY(101%); transition: transform 0.7s var(--ease-expo);
}
.btn--ghost { background: transparent; color: var(--c-sub); border: 1px solid rgba(255, 255, 255, 0.5); }
@media (hover: hover) { .btn:hover::before { transform: translateY(0); } .btn:hover { color: var(--st-900); } }
@media (max-width: 767px) {
  .contact { padding: 14rem var(--gutter) 18rem; }
  .contact__title { font-size: 7.6rem; white-space: normal; }
  .contact__jp, .contact__cta { margin-left: 0; }
  .btn { width: 100%; padding: 2.2rem 2.8rem; }
}

/* =========================================================
   FOOTER (white inversion)
   ========================================================= */
.footer { position: relative; z-index: 3; height: 100svh; min-height: 620px; background: var(--c-sub); color: var(--c-main); overflow: hidden; }
.footer__inner { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); padding: var(--gutter); }
.footer__circles { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(0, 0, 0, 0.1); stroke-width: 1; }
.footer__circles * { vector-effect: non-scaling-stroke; }
.footer__nav { grid-column: 2 / 4; align-self: center; position: relative; }
.footer__nav a { display: inline-block; font-size: max(3.4rem, 22px); line-height: 1.6; letter-spacing: 0.02em; background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; transition: background-size 0.6s var(--ease-expo); }
@media (hover: hover) { .footer__nav a:hover { background-size: 100% 1px; } }
.footer__info { grid-column: 6 / 9; align-self: center; position: relative; text-align: right; font-size: var(--ui); letter-spacing: 0.08em; line-height: 1.8; }
.footer__info div + div { margin-top: 3rem; }
.footer__info dt { color: var(--c-gray-dark); margin-bottom: 0.4rem; letter-spacing: 0.14em; }
.footer__info dd a { display: block; }
.footer__info #clock { font-family: var(--f-num); font-variant-numeric: tabular-nums; }
.footer__logo {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 5.2rem;
  font-size: calc((100vw - var(--gutter) * 2) / 7.2); line-height: 0.8; font-weight: 200; letter-spacing: -0.03em;
  white-space: nowrap; color: var(--c-main);
}
.footer__copy { position: absolute; right: calc(100% / 8 + var(--gutter)); bottom: var(--gutter); font-size: var(--ui); letter-spacing: 0.12em; color: var(--c-gray-dark); }
@media (max-width: 767px) {
  .footer__inner { display: flex; flex-direction: column; justify-content: center; gap: 4rem; padding: 7rem var(--gutter); }
  .footer__info { text-align: left; }
  .footer__copy { right: auto; left: var(--gutter); bottom: 5rem; }
  .footer__logo { bottom: 7.6rem; }
}

/* =========================================================
   MODAL
   ========================================================= */
.modal { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; background: rgba(0, 0, 0, 0.7); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); opacity: 0; pointer-events: none; transition: opacity 0.6s var(--ease-expo); }
.modal.is-open { opacity: 1; pointer-events: auto; }
.modal__box { width: min(120rem, 90vw); aspect-ratio: 16/9; transform: scale(0.94); transition: transform 0.9s var(--ease-expo); }
.modal.is-open .modal__box { transform: scale(1); }
.modal__box video { width: 100%; height: 100%; object-fit: cover; }
.modal__close { top: var(--gutter); right: var(--gutter); mix-blend-mode: normal; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .odo__col { transition: none; }
}

/* =========================================================
   MOBILE TYPE SCALE (rem is 10px @390 here → re-tune big type)
   ========================================================= */
html, body { overflow-x: clip; }
@media (max-width: 767px) {
  .loader__num { font-size: 9.6rem; }
  .loader__meta { bottom: calc(var(--gutter) + 5rem); }
  .menu__links a { font-size: 4.4rem; }
  .menu__sns { gap: 1.2rem 3rem; }
  .reel__play-txt { font-size: 4.4rem; }
  .program__title { font-size: 4.6rem; }
  .program__jp { font-size: 1.6rem; }
  .path__en { font-size: 6.4rem; }
  .path__jp { font-size: 2.2rem; }
  .stats__num { font-size: 6.4rem; }
  .footer__nav a { font-size: 2.6rem; }
  .tile { width: 1.6em; }
}

/* =========================================================
   v3 — 日本語タイポグラフィ / 動画背景 / 経歴 / プレイヤー
   ========================================================= */
.defs { position: absolute; width: 0; height: 0; }

/* ---------- loader: jelly-noise surface ---------- */
.loader { background: #07080a; }
.loader__gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.loader__vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, transparent 35%, rgba(0,0,0,0.65) 100%); }
.loader__num { filter: url(#jelly) drop-shadow(0 10px 40px rgba(0,0,0,0.6)); font-size: max(17rem, 80px); }
.loader__dial { opacity: 0.85; mix-blend-mode: screen; }
.loader__meta, .loader__label { text-shadow: 0 1px 8px rgba(0,0,0,0.8); }

/* ---------- Japanese display type ---------- */
.hero__title { font-family: var(--f-jp); font-weight: 300; font-size: max(7.6rem, 34px); line-height: 1.32; letter-spacing: 0.02em; }
.hero__title em { font-weight: 500; }
.hero__labels, .hero__copy { letter-spacing: 0.16em; }
.profile__hello { font-family: var(--f-jp); font-weight: 300; font-size: max(22rem, 64px); letter-spacing: -0.02em; line-height: 1.05; }
.profile__lead { font-family: var(--f-jp); font-weight: 300; font-size: max(4.6rem, 22px); line-height: 1.55; letter-spacing: 0.02em; }
.statement__text { font-family: var(--f-jp); font-weight: 300; font-size: max(7rem, 28px); line-height: 1.45; letter-spacing: 0.04em; }
.highlight { font-family: var(--f-jp); font-weight: 300; font-size: max(5.8rem, 24px); line-height: 1.5; letter-spacing: 0.02em; }
.highlight .ln { display: block; }
.program__title { font-family: var(--f-jp); font-weight: 300; font-size: max(8rem, 34px); letter-spacing: 0.02em; }
.program__no { position: static; margin-bottom: 1.6rem; font-family: var(--f-jp); letter-spacing: 0.2em; }
.program { padding-left: 0; }
.path__en { font-family: var(--f-jp); font-size: max(10rem, 48px); letter-spacing: 0.04em; }
.reel__play-txt { font-family: var(--f-jp); font-weight: 300; letter-spacing: 0.12em; }
.contact__title { font-family: var(--f-jp); font-weight: 300; font-size: max(17rem, 52px); letter-spacing: 0.02em; line-height: 1.1; white-space: normal; }
.menu__links a { font-family: var(--f-jp); font-weight: 300; font-size: max(5.2rem, 30px); }
.menu__links a em { font-family: var(--f-serif); }
.footer__nav a { font-family: var(--f-jp); font-weight: 300; }
.ui { font-family: var(--f-jp); letter-spacing: 0.14em; }
.tag { font-family: var(--f-jp); letter-spacing: 0.2em; }
.w { padding-right: 0; margin-right: 0; }

/* video: steel grade (desaturated, cool, contrasty) — colour returns on hover where interactive */
video.lazy-v, .floaty img { width: 100%; height: 100%; object-fit: cover; display: block; }
.steel-grade, .strip__item video, .tile video, .floaty img, .programs__window video, .path__bg {
  filter: grayscale(0.85) contrast(1.12) brightness(0.82) sepia(0.12) hue-rotate(180deg) saturate(0.9);
}

/* ---------- statement: metal sea ---------- */
.statement__bg { position: absolute; inset: 0; z-index: 0; clip-path: circle(0% at 50% 55%); will-change: clip-path, transform, filter; }
.statement__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,0.1), rgba(0,0,0,0.7)); }
.statement__text { text-shadow: 0 4px 30px rgba(0,0,0,0.8); }
.tile { width: 2.1em; height: 1em; margin: -0.12em 0.12em 0; border-radius: 0.1em; box-shadow: 0 0 0 1px rgba(238,241,243,0.25); }
.floaty { box-shadow: 0 30px 60px rgba(0,0,0,0.5); }

/* ---------- reel strips (3 per strip) ---------- */
.reel__strips { grid-template-rows: repeat(4, 1fr); }
.strip__track { width: 130%; }
.strip__item { position: relative; overflow: hidden; background: #111; }

/* ---------- fixed Effect Pattern layer: ripple mask from the centre ---------- */
.bg-pattern {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  --r: 0%; --ring: 14%;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, var(--c-main) var(--r), rgba(0,0,0,0.35) calc(var(--r) + 4%), var(--c-main) calc(var(--r) + 8%), transparent var(--ring));
          mask-image: radial-gradient(circle at 50% 50%, var(--c-main) var(--r), rgba(0,0,0,0.35) calc(var(--r) + 4%), var(--c-main) calc(var(--r) + 8%), transparent var(--ring));
  will-change: opacity, transform;
}
.bg-pattern video { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.25) brightness(0.95); opacity: 0.75; }

/* ---------- programs: circular video window ---------- */
.programs__sticky { position: sticky; }
.programs__window {
  position: absolute; left: 50%; top: 50%;
  width: min(40rem, 54vh); height: min(40rem, 54vh);
  transform: translate(-50%, -50%);
  border-radius: 50%; overflow: hidden; background: var(--st-900);
  box-shadow: 0 0 0 1px rgba(238,241,243,0.2), 0 40px 90px rgba(0,0,0,0.6);
}
.programs__window .pv { position: absolute; inset: 0; opacity: 0; }
.programs__window .pv.is-on { opacity: 1; }
.programs__geo { position: relative; z-index: 1; }
@media (max-width: 767px) { .programs__window { width: 22rem; height: 22rem; } }

/* ---------- paths: dance video behind each panel ---------- */
.path { isolation: isolate; }
.path__bg { position: absolute; inset: 0; z-index: -1; opacity: 0.38; transform: scale(1.05); transition: opacity 0.9s var(--ease-expo), transform 1.4s var(--ease-expo), filter 0.9s; mix-blend-mode: luminosity; }
.path--joy .path__bg { mix-blend-mode: multiply; opacity: 0.45; }
@media (hover: hover) { .path:hover .path__bg { opacity: 0.7; transform: scale(1); filter: grayscale(0.2) contrast(1.05); } }

/* ---------- career: image + text rows ---------- */
.career { padding: 8rem var(--gutter) 24rem; }
.career__title { font-family: var(--f-jp); font-weight: 300; font-size: max(19rem, 64px); line-height: 1.1; letter-spacing: 0.04em; margin-top: 2rem; }
.stats__num i { font-family: var(--f-num); font-style: normal; font-size: 0.34em; margin: 0.3em 0.3em 0 0; color: var(--st-300); letter-spacing: 0.1em; line-height: 1; }
.stats__label { font-family: var(--f-jp); letter-spacing: 0.12em; }
.records { margin-top: 16rem; display: flex; flex-direction: column; gap: 18rem; }
.record { display: grid; grid-template-columns: repeat(8, 1fr); column-gap: var(--gutter); align-items: center; }
.record__media { grid-column: 1 / 5; position: relative; overflow: hidden; aspect-ratio: 1; background: var(--st-900); box-shadow: 0 0 0 1px rgba(238,241,243,0.12); }
.record__media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.record:nth-child(1) .record__media { aspect-ratio: 4 / 5; }
.record__body { grid-column: 5 / 9; padding-left: 4rem; }
.record:nth-child(even) .record__media { grid-column: 5 / 9; grid-row: 1; }
.record:nth-child(even) .record__body { grid-column: 1 / 5; grid-row: 1; padding: 0 4rem 0 0; text-align: right; }
.record__no { font-family: var(--f-num); font-size: max(1.3rem, 11px); letter-spacing: 0.2em; color: var(--st-400); }
.record__cat { margin-top: 1.2rem; font-size: var(--ui); letter-spacing: 0.2em; color: var(--st-300); }
.record__name { margin-top: 2.4rem; font-family: var(--f-num); font-weight: 300; font-size: max(4.8rem, 24px); line-height: 1.15; letter-spacing: 0.01em; }
.record__name span { display: block; margin-top: 1rem; font-family: var(--f-jp); font-size: 0.42em; letter-spacing: 0.08em; color: var(--st-200); }
.record__result { margin-top: 3.2rem; font-family: var(--f-jp); font-size: max(2.4rem, 16px); letter-spacing: 0.1em; }
.record__result em { font-size: 1.9em; margin-right: 0.3em; background: var(--metal-v); -webkit-background-clip: text; background-clip: text; color: transparent; }
.record__txt { margin-top: 2.4rem; max-width: 56rem; font-family: var(--f-jp); font-size: max(1.5rem, 13px); line-height: 2.1; color: rgba(238,241,243,0.82); }
.record:nth-child(even) .record__txt { margin-left: auto; }
@media (max-width: 767px) {
  .records { gap: 10rem; margin-top: 8rem; }
  .record { display: block; }
  .record__body, .record:nth-child(even) .record__body { padding: 3rem 0 0; text-align: left; }
  .record:nth-child(even) .record__txt { margin-left: 0; }
  .career__title { font-size: 8rem; }
}

/* ---------- contact: 90s waveform CRT ---------- */
.contact { position: relative; overflow: hidden; }
.contact__bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; transform: scaleX(0) scaleY(0.004); transform-origin: 50% 50%;
  --fringe: 0px;
}
.contact__bg video { width: 100%; height: 100%; object-fit: cover; opacity: 1; transform: scaleY(1.6); filter: drop-shadow(var(--fringe) 0 0 rgba(255, 60, 60, 0.55)) drop-shadow(calc(var(--fringe) * -1) 0 0 rgba(60, 220, 255, 0.55)) brightness(1.7) contrast(1.25); }
.contact__bg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,0.28) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.75) 100%);
}
.contact > *:not(.contact__bg) { position: relative; }
.contact__jp, .contact__cta { margin-left: calc(100% / 8 * 4); }

/* ---------- modal player + playlist ---------- */
.modal__stage { display: grid; grid-template-columns: minmax(0, 1fr) 34rem; gap: 3rem; width: min(150rem, 92vw); max-height: 86vh; }
.modal__player { position: relative; background: var(--c-main); align-self: center; }
.modal__player video { width: 100%; max-height: 78vh; display: block; background: var(--c-main); }
.modal__now { margin-top: 1.4rem; font-family: var(--f-jp); font-size: max(1.4rem, 12px); letter-spacing: 0.12em; display: flex; gap: 1.6rem; }
.modal__now span:first-child { font-family: var(--f-num); color: var(--st-400); }
.modal__list { overflow-y: auto; max-height: 86vh; display: flex; flex-direction: column; gap: 0.8rem; padding-right: 0.6rem; }
.modal__list button { display: grid; grid-template-columns: 9rem 1fr; gap: 1.2rem; align-items: center; width: 100%; text-align: left; padding: 0.6rem; border: 1px solid transparent; transition: background 0.4s, border-color 0.4s; }
.modal__list img { width: 9rem; aspect-ratio: 16 / 10; object-fit: cover; filter: grayscale(0.8); transition: filter 0.4s; }
.modal__list span { font-family: var(--f-jp); font-size: max(1.3rem, 11px); letter-spacing: 0.06em; line-height: 1.5; }
.modal__list i { display: block; font-style: normal; font-family: var(--f-num); color: var(--st-400); letter-spacing: 0.14em; }
.modal__list li.is-current button, .modal__list button:hover { background: rgba(238,241,243,0.06); border-color: rgba(238,241,243,0.25); }
.modal__list li.is-current img, .modal__list button:hover img { filter: none; }
.modal__box { display: none; }
@media (max-width: 767px) {
  .modal__stage { grid-template-columns: 1fr; width: 94vw; }
  .modal__list { max-height: 34vh; }
  .contact__jp, .contact__cta { margin-left: 0; }
  .hero__title { font-size: 3.4rem; }
  .profile__hello { font-size: 7.2rem; }
  .profile__lead { font-size: 2.2rem; }
  .statement__text { font-size: 2.8rem; }
  .highlight { font-size: 2.4rem; }
  .program__title { font-size: 4.4rem; }
  .path__en { font-size: 5.6rem; }
  .contact__title { font-size: 5.6rem; }
  .menu__links a { font-size: 3.6rem; }
  .loader__num { font-size: 11rem; }
}
.record__link { display: inline-block; margin-top: 2.4rem; padding: 1.2rem 2.4rem; border: 1px solid rgba(238,241,243,0.4); border-radius: 999px; font-family: var(--f-jp); font-size: max(1.3rem, 12px); letter-spacing: 0.1em; transition: background 0.5s var(--ease-expo), color 0.5s; }
@media (hover: hover) { .record__link:hover { background: var(--st-100); color: var(--st-900); } }

/* =========================================================
   v4 — 作図イントロ / TV グリッチ / 戦績 / 角丸 / 境界モーション
   ========================================================= */

/* ---------- hero drafting ---------- */
.geo-axes line { stroke: rgba(238,241,243,0.16); }
.geo-guides circle { stroke: rgba(238,241,243,0.18); stroke-dasharray: 2 7; stroke-dashoffset: 0; transform: none; }
.geo-circles circle { stroke: rgba(238,241,243,0.42); }
.geo-mark { fill: var(--c-sub); filter: drop-shadow(0 0 6px rgba(255,255,255,0.9)); transform-box: fill-box; }
.geo-labels text { fill: rgba(238,241,243,0.9); font-family: var(--f-num); font-size: 9px; letter-spacing: 0.12em; stroke: none; }
.geo-center line { stroke: rgba(255,255,255,0.8); stroke-dasharray: none; stroke-dashoffset: 0; }
.geo-center .geo-dot { fill: var(--c-sub); stroke: none; }
.geo-center .geo-pulse { fill: none; stroke: rgba(255,255,255,0.7); stroke-dasharray: none; stroke-dashoffset: 0; transform: none; }
.hero__geo .geo-center circle, .hero__geo .geo-marks circle { transform: none; stroke-dasharray: none; }

/* ---------- profile ---------- */
.profile__hi { grid-column: 1 / -1; grid-row: 1; font-family: var(--f-jp); font-weight: 300; font-size: max(3.2rem, 18px); letter-spacing: 0.2em; color: var(--st-300); }
.profile__hello { grid-row: 2; font-size: max(12rem, 44px); line-height: 1.15; margin-top: 1rem; }
.profile__hello em { font-family: var(--f-num); font-weight: 300; letter-spacing: -0.01em; margin: 0 0.12em; background: var(--metal-v); -webkit-background-clip: text; background-clip: text; color: transparent; }
.profile .tag { grid-row: 3; }
.profile__lead { grid-row: 4; }
.profile__jp { grid-row: 5; }
.lessons { grid-column: 3 / -1; grid-row: 6; margin-top: 8rem; display: grid; grid-template-columns: 1.25fr 1fr; gap: 2.4rem; align-items: start; }
.lesson { position: relative; margin: 0; border-radius: 2rem; overflow: hidden; aspect-ratio: 4 / 5; background: var(--st-900); }
.lesson:nth-child(2) { aspect-ratio: 16 / 10; margin-top: 12rem; }
.lesson video { position: absolute; inset: 0; }
.lesson figcaption { position: absolute; left: 1.6rem; bottom: 1.4rem; z-index: 3; font-family: var(--f-jp); font-size: max(1.4rem, 12px); letter-spacing: 0.1em; text-shadow: 0 2px 10px rgba(0,0,0,0.8); }
.lesson figcaption i { display: block; font-style: normal; font-family: var(--f-num); font-size: 0.8em; letter-spacing: 0.2em; color: var(--st-300); }
.profile__meta { grid-row: 7; }
@media (max-width: 767px) {
  .profile__hello { font-size: 4.8rem; }
  .lessons { grid-template-columns: 1fr; margin-top: 5rem; }
  .lesson:nth-child(2) { margin-top: 0; }
}

/* ---------- rounded corners on every image / video ---------- */
.tile { border-radius: 0.14em; overflow: hidden; }
.floaty { border-radius: 1.6rem; overflow: hidden; }
.floaty img { border-radius: inherit; }
.path { border-radius: 2.4rem; }
.paths__row { gap: 1.6rem; }
.statement__bg video, .bg-pattern video, .contact__bg video { border-radius: 0; }

/* ---------- TV look for small videos (no blur / mosaic) ---------- */
.steel-grade, .strip__item video, .tile video, .floaty img, .programs__window video, .path__bg, .lesson video {
  filter: saturate(0.8) contrast(1.08) brightness(0.92);
}
.tvfx { position: relative; isolation: isolate; }
.tvfx::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,0.26) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%);
  mix-blend-mode: multiply;
}
.tvfx::after {
  content: ""; position: absolute; inset: -40%; z-index: 2; pointer-events: none; opacity: 0.12;
  background-image: url("../assets/img/noise-tv.png");
  animation: tvNoise 0.4s steps(3) infinite;
}
@keyframes tvNoise { 0% { transform: translate(0,0); } 33% { transform: translate(-6%,4%); } 66% { transform: translate(5%,-5%); } 100% { transform: translate(0,0); } }
.tvfx.is-glitch video, .tvfx.is-glitch img { animation: tvGlitch 0.55s steps(1) both; }
.tvfx.is-glitch::after { opacity: 0.85; }
@keyframes tvGlitch {
  0%   { transform: translate(0,0); clip-path: inset(0 0 0 0); filter: saturate(0.8) contrast(1.08) brightness(0.92); }
  10%  { transform: translate(-8%,0); clip-path: inset(12% 0 58% 0); filter: drop-shadow(6px 0 0 rgba(255,40,40,0.9)) drop-shadow(-6px 0 0 rgba(40,220,255,0.9)) brightness(1.6); }
  22%  { transform: translate(7%,2%); clip-path: inset(46% 0 22% 0); filter: hue-rotate(90deg) contrast(1.6); }
  34%  { transform: translate(-3%,-3%); clip-path: inset(0 0 70% 0); filter: drop-shadow(-10px 0 0 rgba(255,40,40,0.9)) drop-shadow(10px 0 0 rgba(40,220,255,0.9)); }
  46%  { transform: translate(5%,0); clip-path: inset(62% 0 4% 0); filter: brightness(2.2) saturate(0); }
  58%  { transform: translate(-2%,1%); clip-path: inset(28% 0 38% 0); filter: drop-shadow(4px 0 0 rgba(255,40,40,0.8)) drop-shadow(-4px 0 0 rgba(40,220,255,0.8)); }
  72%  { transform: translate(1%,0); clip-path: inset(0 0 0 0); filter: contrast(1.3) brightness(1.2); }
  100% { transform: translate(0,0); clip-path: inset(0 0 0 0); filter: saturate(0.8) contrast(1.08) brightness(0.92); }
}
.programs__window .pv { transition: none; }

/* ---------- TV section (記録映像) ---------- */
.tv { position: relative; }
.tv__inner { height: 100svh; display: grid; grid-template-columns: repeat(8, 1fr); column-gap: var(--gutter); align-items: center; padding: 0 var(--gutter); }
.tv__screen { grid-column: 1 / 6; position: relative; height: 76vh; border-radius: 2.8rem; box-shadow: 0 0 0 1px rgba(238,241,243,0.14), 0 50px 120px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(255,255,255,0.05); background: var(--st-950); }
.tv__screen canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
.tv__decoders { position: absolute; inset: 0; opacity: 0.001; pointer-events: none; overflow: hidden; border-radius: inherit; z-index: -1; }
.tv__decoders video { position: absolute; inset: 0; width: 100%; height: 100%; }
.tv__rec, .tv__time { position: absolute; top: 2rem; z-index: 2; font-family: var(--f-num); font-size: max(1.2rem, 11px); letter-spacing: 0.2em; color: rgba(255,255,255,0.85); text-shadow: 0 0 8px rgba(0,0,0,0.9); }
.tv__rec { left: 2.4rem; display: flex; align-items: center; gap: 0.8rem; }
.tv__rec i { width: 0.8rem; height: 0.8rem; border-radius: 50%; background: #ff3b3b; animation: rec 1.2s steps(2) infinite; }
@keyframes rec { 50% { opacity: 0; } }
.tv__time { right: 2.4rem; font-variant-numeric: tabular-nums; }
.tv__side { grid-column: 6 / 9; padding-left: 2rem; }
.tv__ch { margin-top: 2.4rem; display: flex; align-items: flex-start; gap: 1rem; font-family: var(--f-num); font-weight: 200; font-size: max(12rem, 56px); line-height: 1; letter-spacing: -0.02em; }
.tv__ch > .odo { font-size: 1em; }
.tv__ch i { font-style: normal; font-size: 0.18em; margin-top: 0.4em; color: var(--st-400); letter-spacing: 0.1em; }
.tv__ch::first-letter { font-size: 0.2em; }
.tv__title { margin-top: 2rem; font-family: var(--f-jp); font-weight: 300; font-size: max(4.4rem, 22px); letter-spacing: 0.06em; }
.tv__sub { margin-top: 0.6rem; font-family: var(--f-jp); font-size: max(1.4rem, 12px); letter-spacing: 0.14em; color: var(--st-300); }
.tv__index { margin-top: 4rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem 2rem; }
.tv__index button { display: flex; gap: 1rem; align-items: baseline; width: 100%; text-align: left; padding: 0.6rem 0; border-bottom: 1px solid rgba(238,241,243,0.12); font-family: var(--f-jp); font-size: max(1.2rem, 11px); letter-spacing: 0.08em; color: rgba(238,241,243,0.45); transition: color 0.4s, border-color 0.4s; }
.tv__index i { font-style: normal; font-family: var(--f-num); letter-spacing: 0.14em; }
.tv__index li.is-on button { color: var(--c-sub); border-color: rgba(238,241,243,0.8); }
.tv__hint { margin-top: 3rem; font-family: var(--f-jp); font-size: max(1.2rem, 11px); letter-spacing: 0.14em; color: var(--st-500); }
@media (max-width: 767px) {
  .tv__inner { display: flex; flex-direction: column; justify-content: center; gap: 2.4rem; }
  .tv__screen { width: 100%; height: 48svh; }
  .tv__side { padding: 0; width: 100%; }
  .tv__ch { font-size: 6.4rem; margin-top: 1rem; }
  .tv__index { display: none; }
}

/* ---------- career (戦績) ---------- */
.career__title em { background: var(--metal-v); -webkit-background-clip: text; background-clip: text; color: transparent; }
.career__lead { margin-top: 3rem; font-family: var(--f-jp); font-size: max(2.2rem, 16px); letter-spacing: 0.08em; color: var(--st-200); }
.career__lead strong { font-weight: 700; color: var(--c-sub); }
.stats__num { align-items: flex-end; gap: 0.2em; }
.stats__num b { font-family: var(--f-num); font-weight: 300; font-size: 0.42em; color: var(--st-300); margin-bottom: 0.2em; }
.results { margin-top: 14rem; display: flex; flex-direction: column; gap: 16rem; }
.result { display: grid; grid-template-columns: repeat(8, 1fr); column-gap: var(--gutter); align-items: center; }
.result__media { grid-column: 1 / 5; position: relative; border-radius: 2.4rem; overflow: hidden; background: var(--st-900); box-shadow: 0 0 0 1px rgba(238,241,243,0.14), 0 40px 100px rgba(0,0,0,0.6); }
.result--wide .result__media { grid-column: 1 / 6; }
.result__media img { display: block; width: 100%; height: auto; }
.result__mark {
  position: absolute; border: 2px solid var(--c-sub); border-radius: 0.6rem;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.0), 0 0 24px rgba(255,255,255,0.6);
  transition: box-shadow 0.8s var(--ease-expo);
}
.result__mark b {
  position: absolute; left: 0; top: -0.4rem; transform: translateY(-100%);
  padding: 0.5rem 1rem; border-radius: 999px; background: var(--c-sub); color: var(--st-900);
  font-family: var(--f-num); font-size: max(1.2rem, 11px); letter-spacing: 0.08em; white-space: nowrap;
}
.result__mark.is-lit { box-shadow: 0 0 0 9999px rgba(0,0,0,0.42), 0 0 30px rgba(255,255,255,0.8); animation: markPulse 1.8s ease-in-out infinite; }
@keyframes markPulse { 50% { border-color: rgba(255,255,255,0.45); } }
.result__body { grid-column: 5 / 9; padding-left: 3rem; }
.result--wide .result__body { grid-column: 6 / 9; }
.result:nth-child(even) .result__media { grid-column: 5 / 9; grid-row: 1; }
.result:nth-child(even) .result__body { grid-column: 1 / 5; grid-row: 1; padding: 0 3rem 0 0; }
.result__ig { display: inline-flex; align-items: center; gap: 1rem; padding: 0.8rem 1.6rem 0.8rem 1rem; border-radius: 999px; border: 1px solid rgba(238,241,243,0.3); font-family: var(--f-num); font-size: max(1.3rem, 12px); letter-spacing: 0.06em; transition: background 0.5s, color 0.5s; }
.result__ig svg { width: 2.2rem; height: 2.2rem; min-width: 18px; min-height: 18px; }
.result__ig i { font-style: normal; font-family: var(--f-jp); color: var(--st-300); font-size: 0.92em; }
@media (hover: hover) { .result__ig:hover { background: var(--c-sub); color: var(--st-900); } .result__ig:hover i { color: #333; } }
.result__name { margin-top: 2.4rem; font-family: var(--f-num); font-weight: 600; font-size: max(5.6rem, 28px); line-height: 1; letter-spacing: 0.01em; }
.result__sub { margin-top: 1rem; font-family: var(--f-num); font-size: max(1.4rem, 12px); letter-spacing: 0.16em; color: var(--st-300); }
.result__rank { margin-top: 3rem; display: flex; align-items: flex-end; gap: 1.2rem; line-height: 0.8; }
.result__rank span { font-family: var(--f-num); font-weight: 300; font-size: max(3.2rem, 18px); letter-spacing: 0.2em; color: var(--st-200); padding-bottom: 1.2rem; }
.result__rank strong { display: inline-block; min-width: 1.6em; font-family: var(--f-num); font-weight: 200; font-size: max(20rem, 96px); letter-spacing: -0.04em; background: var(--metal-v); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.result__entry { margin-top: 1.6rem; font-family: var(--f-jp); font-size: max(2rem, 15px); letter-spacing: 0.08em; }
.result__entry em { font-family: var(--f-num); font-weight: 400; font-size: 1.8em; margin: 0 0.1em; font-variant-numeric: tabular-nums; }
.result__txt { margin-top: 2rem; max-width: 56rem; font-family: var(--f-jp); font-size: max(1.5rem, 13px); line-height: 2.05; color: rgba(238,241,243,0.82); }
.result__btn { display: inline-block; margin-top: 2.8rem; padding: 1.6rem 2.8rem; border-radius: 999px; background: var(--c-sub); color: var(--st-900); font-family: var(--f-jp); font-weight: 500; font-size: max(1.4rem, 12px); letter-spacing: 0.08em; }
.teams { margin-top: 18rem; display: grid; grid-template-columns: repeat(8, 1fr); column-gap: var(--gutter); row-gap: 3rem; }
.teams__head { grid-column: 1 / -1; font-family: var(--f-jp); font-size: max(1.6rem, 13px); letter-spacing: 0.12em; color: var(--st-300); }
.teams__head a { display: inline-flex; align-items: center; gap: 0.8rem; color: var(--c-sub); }
.teams__head svg { width: 2rem; height: 2rem; min-width: 16px; min-height: 16px; }
.teams__head i { font-style: normal; color: var(--st-400); margin-left: 1rem; }
.team { grid-column: span 3; }
.team:nth-of-type(1) { grid-column: 2 / 5; }
.team:nth-of-type(2) { grid-column: 5 / 8; margin-top: 10rem; }
.team__media { border-radius: 2rem; overflow: hidden; aspect-ratio: 1; }
.team__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team__cat { margin-top: 1.6rem; font-family: var(--f-jp); font-size: var(--ui); letter-spacing: 0.16em; color: var(--st-300); }
.team__name { margin-top: 0.6rem; font-family: var(--f-num); font-weight: 400; font-size: max(2.4rem, 17px); }
.team__sub { margin-top: 0.4rem; font-family: var(--f-jp); font-size: max(1.4rem, 12px); color: var(--st-200); }
@media (max-width: 767px) {
  .result { display: block; }
  .result__body, .result:nth-child(even) .result__body { padding: 3rem 0 0; }
  .result__rank strong { font-size: 12rem; }
  .teams { grid-template-columns: 1fr; }
  .team, .team:nth-of-type(1), .team:nth-of-type(2) { grid-column: auto; margin-top: 0; }
  .results { gap: 10rem; margin-top: 8rem; }
}

/* ---------- section seams: soft, moving boundaries ---------- */
.statement__inner::before, .statement__inner::after {
  content: ""; position: absolute; left: 0; right: 0; height: 22vh; z-index: 1; pointer-events: none;
}
.statement__inner::before { top: 0; background: linear-gradient(180deg, var(--c-main) 0%, transparent 100%); }
.statement__inner::after { bottom: 0; background: linear-gradient(0deg, var(--c-main) 0%, transparent 100%); }
.footer { overflow: visible; }
.footer__wave { position: absolute; left: 0; right: 0; bottom: 100%; width: 100%; height: 14vh; margin-bottom: -1px; fill: var(--c-sub); pointer-events: none; }
.footer__inner { overflow: hidden; }

/* keyboard focus stays visible */
a:focus-visible, button:focus-visible { outline: 2px solid var(--c-sub); outline-offset: 4px; border-radius: 0.4rem; }
@media (prefers-reduced-motion: reduce) {
  .tvfx::after, .tv__rec i, .result__mark.is-lit { animation: none; }
}
/* metallic text on split headings: paint each character (a parent's background-clip can't reach transformed children) */
.profile__hello em, .career__title em { background: none; color: inherit; -webkit-background-clip: border-box; background-clip: border-box; }
.profile__hello em .wi, .career__title em .wi { background: var(--metal-v); -webkit-background-clip: text; background-clip: text; color: transparent; }
.profile__hello em .w { padding-right: 0.04em; }
/* riku zeff highlight — readable on both white brackets and dark ones */
.result__mark { border: 3px solid var(--st-900); box-shadow: 0 0 0 3px var(--c-sub); }
.result__mark b { background: var(--st-900); color: var(--c-sub); box-shadow: 0 0 0 2px var(--c-sub); }
.result__mark.is-lit { box-shadow: 0 0 0 3px var(--c-sub), 0 0 0 9999px rgba(8, 10, 12, 0.5), 0 0 26px 6px rgba(255, 255, 255, 0.7); animation: markPulse 1.6s ease-in-out infinite; }
@keyframes markPulse { 50% { box-shadow: 0 0 0 6px var(--c-sub), 0 0 0 9999px rgba(8, 10, 12, 0.5), 0 0 34px 10px rgba(255, 255, 255, 0.9); } }

/* =========================================================
   v5 — ブランド / TVセット / 3Dスマホ / riku zeff 浮き上がり / 可読性
   ========================================================= */
:root {
  --st-950: #050607;
  --ink: var(--st-900);
  --paper: var(--c-sub);
  --line-strong: rgba(238, 241, 243, 0.24);
  --text-2: rgba(238, 241, 243, 0.84);   /* secondary text: ≥ 4.5:1 on the dark steel */
  --text-3: rgba(238, 241, 243, 0.68);
  --radius-l: 2.4rem;
  --radius-m: 1.6rem;
  --ui: max(1.4rem, 11px);                /* smallest UI text never below 11px */
}

/* ---------- brand lockup (top-left) ---------- */
.brand {
  position: fixed; top: calc(var(--gutter) - 0.4rem); left: var(--gutter); z-index: 60;
  display: flex; align-items: center; gap: 1.2rem;
  color: var(--paper); mix-blend-mode: difference; transition: opacity 0.4s;
}
.is-loading .brand { opacity: 0; }
.brand__mark {
  display: block; width: 3.8rem; height: 3.8rem; min-width: 30px; min-height: 30px;
  background: var(--paper);
  -webkit-mask: url(../assets/img/logo-mark-256.png) center / contain no-repeat;
          mask: url(../assets/img/logo-mark-256.png) center / contain no-repeat;
  transition: transform 0.8s var(--ease-expo);
}
.brand__text { display: flex; flex-direction: column; line-height: 1.25; }
.brand__text b { font-family: var(--f-jp); font-weight: 500; font-size: max(1.4rem, 11px); letter-spacing: 0.16em; }
.brand__text i { font-style: normal; font-family: var(--f-num); font-weight: 400; font-size: max(1.05rem, 9px); letter-spacing: 0.26em; opacity: 0.75; }
@media (hover: hover) { .brand:hover .brand__mark { transform: rotate(-8deg) scale(1.08); } }
.menu__brand { display: flex; align-items: center; gap: 1.4rem; margin-bottom: 5rem; color: var(--paper); }
.menu__brand .brand__mark { width: 5.6rem; height: 5.6rem; background: var(--metal-v); }
.menu__brand b { display: block; font-family: var(--f-jp); font-weight: 500; font-size: max(1.8rem, 14px); letter-spacing: 0.16em; }
.menu__brand i { display: block; font-style: normal; font-family: var(--f-num); font-size: max(1.2rem, 10px); letter-spacing: 0.26em; color: var(--text-3); }
@media (max-width: 767px) { .brand__text b { font-size: 11px; letter-spacing: 0.1em; } .brand__text i { font-size: 8.5px; } }

/* ---------- readability fixes ---------- */
.ui, .tag, .hero__labels, .hero__copy { color: var(--text-2); }
.hero__copy { font-size: max(1.5rem, 12px); line-height: 1.9; letter-spacing: 0.08em; width: 38rem; }
@media (max-width: 767px) { .hero__labels { display: none; } .hero__copy { top: 12%; } }
.profile__lead, .profile__jp { text-shadow: 0 2px 24px rgba(0,0,0,0.85), 0 0 2px rgba(0,0,0,0.6); }
.statement__text::before {
  content: ""; position: absolute; inset: -18% -12%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(5,6,7,0.78), rgba(5,6,7,0.35) 60%, transparent);
}
.path--joy .path__bg { opacity: 0.26; }
.path--joy::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(238,241,243,0.9) 0%, rgba(238,241,243,0.55) 45%, rgba(238,241,243,0.15) 100%); }
.path--pro::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(5,6,7,0.85) 0%, rgba(5,6,7,0.35) 55%, transparent 100%); }
.path__list, .program__txt, .result__txt, .record__txt { color: var(--text-2); }
.path--joy .path__list { color: var(--ink); }
.tv__hint { color: var(--text-3); }
.tv__index button { min-height: 44px; }
.stats__label { color: var(--text-2); }

/* ---------- TV section layout ---------- */
.tv__stage { grid-column: 1 / 6; position: relative; height: 80vh; perspective: 1600px; display: grid; place-items: center; }
.tv__stage > .tvset, .tv__stage > .phone { grid-area: 1 / 1; }
.tv__stage > .tvset:not(.is-active), .tv__stage > .phone:not(.is-active) { opacity: 0; pointer-events: none; }
.tv__device { margin-top: 1rem; font-family: var(--f-jp); font-size: var(--ui); letter-spacing: 0.2em; color: var(--text-3); }
.tv__index b { margin-left: auto; font-weight: 400; font-size: 0.9em; color: var(--text-3); }
.tv__screen { display: none; }   /* v4 screen replaced by the TV set */

/* ---------- retro TV set (pure CSS) ---------- */
.tvset { position: relative; width: min(100%, 118vh); transform-style: preserve-3d; }
.tvset__body {
  position: relative; display: grid; grid-template-columns: 1fr 13%; gap: 2.2%;
  padding: 3% 3% 3.4%; border-radius: 3.2rem;
  background: var(--brush), linear-gradient(160deg, #56606b 0%, #2c333b 38%, var(--st-800) 70%, #3a434c 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.28), inset 0 -3px 0 rgba(0,0,0,0.5),
    inset 0 0 0 1px rgba(255,255,255,0.08),
    0 3px 0 var(--st-900), 0 14px 0 -2px #1b2026, 0 50px 90px rgba(0,0,0,0.7);
}
.tvset__bezel {
  position: relative; padding: 3.2%; border-radius: 2.6rem;
  background: linear-gradient(180deg, #07080a, #121519);
  box-shadow: inset 0 8px 24px rgba(0,0,0,0.9), inset 0 0 0 2px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.12);
}
.tvset__screen { position: relative; aspect-ratio: 4 / 3; border-radius: 2.4rem / 2.8rem; overflow: hidden; background: #020303; box-shadow: inset 0 0 40px rgba(0,0,0,0.9); }
.tvset__screen canvas, .tvset__screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.tvset__glass {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(255,255,255,0.16), transparent 45%),
    linear-gradient(115deg, transparent 55%, rgba(255,255,255,0.06) 62%, transparent 70%),
    radial-gradient(ellipse at center, transparent 58%, rgba(0,0,0,0.55) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.tvset__screen .tv__rec, .tvset__screen .tv__time { position: absolute; top: 4%; z-index: 4; font-family: var(--f-num); font-size: max(1.2rem, 10px); letter-spacing: 0.2em; color: rgba(255,255,255,0.9); text-shadow: 0 0 6px rgba(0,0,0,0.9); }
.tvset__screen .tv__rec { left: 5%; display: flex; align-items: center; gap: 0.7rem; }
.tvset__screen .tv__time { right: 5%; font-variant-numeric: tabular-nums; }
.tvset__panel { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8%; padding-top: 6%; }
.tvset__brand { font-family: var(--f-num); font-weight: 600; font-size: max(1.1rem, 9px); letter-spacing: 0.3em; color: var(--st-200); text-shadow: 0 1px 0 var(--c-main); }
.tvset__knob { position: relative; width: 62%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--st-100), #8e99a4 40%, var(--st-700) 75%);
  box-shadow: 0 6px 12px rgba(0,0,0,0.6), inset 0 -3px 6px rgba(0,0,0,0.5), 0 0 0 4px var(--st-900); }
.tvset__knob i { position: absolute; inset: 12%; border-radius: 50%; background: conic-gradient(from 0deg, var(--st-500), var(--st-200), var(--st-500), var(--st-200), var(--st-500)); }
.tvset__knob i::after { content: ""; position: absolute; left: 50%; top: 4%; width: 10%; height: 34%; transform: translateX(-50%); border-radius: 2px; background: var(--st-900); }
.tvset__knob em { position: absolute; left: 50%; top: 104%; transform: translateX(-50%); font-style: normal; font-family: var(--f-num); font-size: max(0.9rem, 8px); letter-spacing: 0.2em; color: var(--st-300); }
.tvset__knob--vol { width: 48%; }
.tvset__grille { width: 70%; flex: 1; min-height: 20%; margin-top: 18%; border-radius: 1rem;
  background: repeating-linear-gradient(180deg, var(--st-900) 0 3px, #3a434c 3px 5px); box-shadow: inset 0 2px 6px rgba(0,0,0,0.8); }
.tvset__led { width: 0.9rem; height: 0.9rem; border-radius: 50%; background: #ff4747; box-shadow: 0 0 10px #ff4747, 0 0 2px var(--c-sub) inset; opacity: 0.15; }
.tvset__leg { position: absolute; bottom: -6%; width: 5%; height: 7%; background: linear-gradient(90deg, var(--st-800), var(--st-500), var(--st-800)); border-radius: 0 0 0.6rem 0.6rem; z-index: -1; }
.tvset__leg--l { left: 12%; transform: skewX(12deg); }
.tvset__leg--r { right: 12%; transform: skewX(-12deg); }
.tvset__shadow { position: absolute; left: 6%; right: 6%; bottom: -10%; height: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,0.75), transparent); z-index: -2; filter: blur(6px); }
.tvset--mini { width: 100%; }
.tvset--mini .tvset__screen { aspect-ratio: 16 / 9; }
.result__media--tv { background: none !important; box-shadow: none !important; overflow: visible !important; padding-bottom: 3rem; }

/* ---------- 3D smartphone ---------- */
.phone { position: relative; transform-style: preserve-3d; }
.phone--tv { height: 74vh; aspect-ratio: 9 / 19.2; transform: rotateY(-14deg) rotateX(4deg); }
.phone::before {                    /* titanium frame */
  content: ""; position: absolute; inset: 0; border-radius: 5.4rem;
  background: linear-gradient(135deg, var(--st-200) 0%, var(--st-500) 20%, var(--st-100) 42%, var(--st-600) 64%, var(--st-300) 82%, var(--st-700) 100%);
  box-shadow: 0 40px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.15), inset 0 0 0 1px rgba(255,255,255,0.3);
}
.phone::after {                     /* side thickness for depth */
  content: ""; position: absolute; inset: 0; border-radius: 5.4rem; transform: translateZ(-14px);
  background: var(--st-800); box-shadow: 0 0 0 2px var(--st-900);
}
.phone__screen { position: absolute; inset: 1.4%; border-radius: 4.8rem; overflow: hidden; background: var(--c-main); box-shadow: inset 0 0 0 3px var(--c-main); transform: translateZ(1px); }
.phone__screen canvas, .phone__screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.phone__island { position: absolute; top: 2.2%; left: 50%; width: 30%; height: 3.4%; transform: translateX(-50%); border-radius: 999px; background: var(--c-main); z-index: 4; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05); }
.phone__glass { position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit;
  background: linear-gradient(120deg, rgba(255,255,255,0.14) 0%, transparent 32%, transparent 68%, rgba(255,255,255,0.06) 80%, transparent 90%); }
.phone__btn { position: absolute; width: 0.6rem; min-width: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--st-600), var(--st-300)); z-index: -1; }
.phone__btn--a { left: -0.5rem; top: 18%; height: 4%; }
.phone__btn--b { left: -0.5rem; top: 25%; height: 8%; }
.phone__btn--c { right: -0.5rem; top: 24%; height: 12%; background: linear-gradient(270deg, var(--st-600), var(--st-300)); }
.phone__shadow { position: absolute; left: 10%; right: 10%; bottom: -6%; height: 4%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,0.7), transparent); filter: blur(8px); transform: translateZ(-40px); }
.phone--mini { width: 100%; aspect-ratio: 9 / 19.2; transform: perspective(1400px) rotateY(12deg) rotateX(3deg); animation: phoneFloat 6s ease-in-out infinite; }
.phone--mini::before, .phone--mini::after { border-radius: 4.2rem; }
.phone--mini .phone__screen { border-radius: 3.7rem; }
@keyframes phoneFloat { 50% { transform: perspective(1400px) rotateY(6deg) rotateX(-2deg) translateY(-1.2rem); } }
.lesson--phone { aspect-ratio: auto !important; overflow: visible !important; background: none !important; width: 78%; justify-self: center; }
.lesson--phone figcaption { position: static; margin-top: 3rem; text-shadow: none; }
@media (max-width: 767px) {
  .tv__stage { height: 50svh; width: 100%; }
  .phone--tv { height: 46svh; }
  .tvset { width: 100%; }
  .lesson--phone { width: 62%; }
}

/* ---------- riku zeff lifts off the bracket ---------- */
.result__media { perspective: 900px; }
.result__pop {
  position: absolute; z-index: 3; pointer-events: none;
  left: calc(var(--l) * 1%); top: calc(var(--t) * 1%); width: calc(var(--w) * 1%); height: calc(var(--h) * 1%);
  background-repeat: no-repeat;
  background-size: calc(10000% / var(--w)) calc(10000% / var(--h));
  background-position: calc(var(--l) / (100 - var(--w)) * 100%) calc(var(--t) / (100 - var(--h)) * 100%);
  border-radius: 0.6rem; transform-origin: var(--ox) var(--oy);
  filter: contrast(1.35) brightness(1.08);
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--ink), 0 24px 40px rgba(0,0,0,0.65), 0 0 40px rgba(255,255,255,0.55);
  opacity: 0;
}
.result__pop.is-up { opacity: 1; animation: popFloat 2.6s ease-in-out infinite; }
@keyframes popFloat { 0%, 100% { transform: translateZ(60px) scale(1.42) rotateX(8deg) rotateY(-6deg); } 50% { transform: translateZ(80px) scale(1.5) rotateX(2deg) rotateY(4deg) translateY(-4%); } }
.result__mark.is-lit { border-color: transparent; }
.result__mark b { z-index: 4; transform: translateY(-130%); }

/* token clean-up for later layers */
.result__mark { border-color: var(--ink); }
.result__mark b { background: var(--ink); color: var(--paper); }
.result__btn { background: var(--paper); color: var(--ink); }
/* lift the name straight toward the viewer (perspective origin sits on the name, not the image centre) */
.result--wide .result__media { perspective-origin: 9% 44%; }
.result:not(.result--wide):not(.result--da) .result__media { perspective-origin: 11% 85%; }
@media (max-width: 767px) {
  .tvset__brand { display: none; }
  .tvset__panel { gap: 10%; padding-top: 10%; }
  .tvset__body { border-radius: 2rem; }
  .tvset__bezel, .tvset__screen { border-radius: 1.4rem; }
  .result__name { font-size: 3.4rem; line-height: 1.1; }
  .result__rank strong { font-size: 10rem; }
  .tv__hint { display: none; }
  .tv__title { font-size: 2.8rem; }
}

/* =========================================================
   v6 — アー写 / 指導 / 3段リール / 粒子TV
   ========================================================= */
:root {
  --reel-h: clamp(120px, 21vh, 230px);   /* one row = one tile height; the whole section stays compact */
  --reel-gap: 1.2rem;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- profile layout with the artist photo ---------- */
.profile { row-gap: 0; }
.profile .tag { grid-column: 4 / 5; grid-row: 3; padding-top: 5rem; }
.profile__lead { grid-column: 4 / -1; grid-row: 4; }
.profile__jp { grid-column: 4 / -1; grid-row: 5; }
.profile__wins { grid-column: 4 / -1; grid-row: 6; }
.profile__meta { grid-column: 4 / -1; grid-row: 7; }
.artist { grid-column: 1 / 4; grid-row: 3 / 8; align-self: start; margin: 6rem 3rem 0 0; perspective: 1200px; }
.artist__frame {
  position: relative; border-radius: var(--radius-l); overflow: hidden; aspect-ratio: 4 / 5;
  background: var(--st-800); transform-style: preserve-3d;
  box-shadow: 0 0 0 1px var(--line-strong), 0 50px 100px rgba(0,0,0,0.6);
}
.artist__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.artist__shine {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(60% 40% at var(--sx, 30%) var(--sy, 20%), rgba(255,255,255,0.35), transparent 70%);
}
.artist figcaption { margin-top: 1.6rem; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.artist figcaption b { font-family: var(--f-num); font-weight: 400; font-size: max(2rem, 15px); letter-spacing: 0.02em; }
.artist figcaption i { font-style: normal; font-family: var(--f-num); font-size: var(--ui); letter-spacing: 0.18em; color: var(--text-3); }
.profile__wins { margin-top: 5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.profile__wins a {
  display: flex; flex-direction: column; gap: 0.6rem; padding: 2rem 2.2rem; min-height: 44px;
  border-radius: var(--radius-m); border: 1px solid var(--line-strong);
  background: linear-gradient(160deg, rgba(238,241,243,0.06), rgba(238,241,243,0.01));
  transition: background 0.5s var(--ease-out-expo), transform 0.5s var(--ease-out-expo), border-color 0.5s;
}
.profile__wins i { font-style: normal; font-family: var(--f-num); font-size: var(--ui); letter-spacing: 0.2em; color: var(--text-3); }
.profile__wins b { font-family: var(--f-num); font-weight: 400; font-size: max(1.7rem, 13px); letter-spacing: 0.04em; }
.profile__wins span { font-family: var(--f-num); font-weight: 200; font-size: max(4.2rem, 28px); line-height: 1; background: var(--metal-v); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (hover: hover) { .profile__wins a:hover { background: rgba(238,241,243,0.1); border-color: var(--st-200); transform: translateY(-4px); } }
@media (max-width: 767px) {
  .artist { margin: 4rem 0 0; }
  .profile__wins { grid-template-columns: 1fr; }
}

/* ---------- teach ---------- */
.teach { padding: 20rem var(--gutter) 22rem; display: grid; grid-template-columns: repeat(8, 1fr); column-gap: var(--gutter); }
.teach .tag { grid-column: 1 / -1; }
.teach__title { grid-column: 1 / -1; margin-top: 2rem; font-family: var(--f-jp); font-weight: 300; font-size: max(10rem, 40px); line-height: 1.15; letter-spacing: 0.03em; }
.teach__title--2 { margin-top: 0; padding-left: calc(100% / 8 * 2); }
.teach__title em .wi { background: var(--metal-v); -webkit-background-clip: text; background-clip: text; color: transparent; }
.teach__grid { grid-column: 1 / -1; margin-top: 10rem; display: grid; grid-template-columns: repeat(8, 1fr); column-gap: var(--gutter); row-gap: 8rem; align-items: start; }
.teach__main { grid-column: 1 / 6; position: relative; margin: 0; border-radius: var(--radius-l); overflow: hidden; aspect-ratio: 16 / 9; background: var(--st-800); box-shadow: 0 0 0 1px var(--line-strong), 0 50px 100px rgba(0,0,0,0.6); }
.teach__main video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) contrast(1.06); }
.teach__main figcaption, .lesson--wide figcaption { position: absolute; left: 2rem; bottom: 1.8rem; z-index: 3; font-family: var(--f-jp); font-size: max(1.5rem, 12px); letter-spacing: 0.1em; text-shadow: 0 2px 12px rgba(0,0,0,0.9); }
.teach__main figcaption i, .lesson--wide figcaption i { display: block; font-style: normal; font-family: var(--f-num); font-size: 0.78em; letter-spacing: 0.24em; color: var(--st-300); }
.teach__body { grid-column: 6 / 9; padding-left: 2rem; }
.teach__lead { font-family: var(--f-jp); font-size: max(1.7rem, 14px); line-height: 2.1; color: var(--text-2); }
.stats--teach { margin-top: 4rem; grid-template-columns: 1fr; row-gap: 3rem; border-top: 1px solid var(--line-strong); }
.stats--teach li { grid-column: auto !important; }
.stats__num--word { font-family: var(--f-jp); font-weight: 300; font-size: max(5.6rem, 32px); letter-spacing: 0.06em; }
.stats__num--word small { font-size: 0.6em; color: var(--text-3); }
.teach .lesson--phone { grid-column: 2 / 4; width: 100%; }
.lesson--wide { grid-column: 5 / 9; position: relative; margin: 8rem 0 0; border-radius: var(--radius-l); overflow: hidden; aspect-ratio: 16 / 10; background: var(--st-800); }
.lesson--wide video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.teach__welcome {
  grid-column: 2 / 8; margin-top: 12rem; padding: 4.4rem 5rem; border-radius: var(--radius-l); text-align: center;
  font-family: var(--f-jp); font-size: max(2.2rem, 15px); line-height: 2; letter-spacing: 0.06em;
  background: var(--brush), linear-gradient(160deg, rgba(238,241,243,0.08), rgba(238,241,243,0.02));
  border: 1px solid var(--line-strong);
}
@media (max-width: 767px) {
  .teach { display: block; padding: 12rem var(--gutter) 14rem; }
  .teach__title { font-size: 4.4rem; }
  .teach__title--2 { padding-left: 0; }
  .teach__grid { display: flex; flex-direction: column; gap: 5rem; margin-top: 5rem; }
  .teach__body { padding: 0; }
  .teach .lesson--phone { width: 60%; align-self: center; }
  .lesson--wide { margin: 0; }
  .teach__welcome { padding: 3rem 2.4rem; text-align: left; margin-top: 6rem; }
  .teach__welcome br { display: none; }
}

/* ---------- reels: 3 rows, uniform square tiles ---------- */
.reels { padding: 16rem 0 18rem; overflow: hidden; }
.reels__head { padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(8, 1fr); column-gap: var(--gutter); align-items: end; }
.reels__head .tag { grid-column: 1 / -1; }
.reels__title { grid-column: 1 / 6; margin-top: 2rem; font-family: var(--f-jp); font-weight: 300; font-size: max(8.4rem, 36px); letter-spacing: 0.03em; line-height: 1.15; }
.reels__title em .wi { background: var(--metal-v); -webkit-background-clip: text; background-clip: text; color: transparent; }
.reels__lead { grid-column: 6 / 9; text-align: right; font-family: var(--f-jp); font-size: max(1.5rem, 12px); letter-spacing: 0.12em; color: var(--text-2); padding-bottom: 1.4rem; }
.reels__rows { margin-top: 7rem; display: flex; flex-direction: column; gap: var(--reel-gap); transform: rotate(-2deg); width: 106%; margin-left: -3%; }
.reel-row { overflow: visible; }
.reel-row__track { display: flex; gap: var(--reel-gap); width: max-content; will-change: transform; }
.reel-tile {
  position: relative; margin: 0; flex: 0 0 auto; height: var(--reel-h); aspect-ratio: 1 / 1;
  border-radius: var(--radius-m); overflow: hidden; background: var(--st-800);
  box-shadow: 0 0 0 1px var(--line-strong);
  transition: transform 0.6s var(--ease-out-expo), box-shadow 0.6s;
}
.reel-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.55) contrast(1.1) brightness(0.85); transition: filter 0.6s; }
.reel-tile figcaption { position: absolute; left: 1.2rem; bottom: 1rem; z-index: 3; font-family: var(--f-jp); font-size: max(1.2rem, 11px); letter-spacing: 0.08em; text-shadow: 0 1px 8px rgba(0,0,0,0.9); }
.reel-tile figcaption i { display: block; font-style: normal; font-family: var(--f-num); font-size: 0.85em; letter-spacing: 0.2em; color: var(--st-300); }
.reel-tile.is-hot { transform: scale(1.05); z-index: 2; box-shadow: 0 0 0 2px var(--st-100), 0 20px 50px rgba(0,0,0,0.6); }
.reel-tile.is-hot video { filter: none; }
@media (max-width: 767px) {
  :root { --reel-h: 118px; --reel-gap: 0.8rem; }
  .reels { padding: 10rem 0 12rem; }
  .reels__head { display: block; }
  .reels__title { font-size: 4.2rem; }
  .reels__lead { text-align: left; margin-top: 1.4rem; }
  .reels__rows { margin-top: 4rem; }
}

/* ---------- DANCE ALIVE TV: particles + video fills the screen ---------- */
.result__media--tv { position: relative; }
.tvset__particles { position: absolute; inset: -12% -12% -18%; width: 124%; height: 130%; z-index: 4; pointer-events: none; }
.tvset--mini .tvset__screen { aspect-ratio: 1280 / 668; border-radius: 1.6rem; }
.tvset--mini .tvset__screen video { object-fit: cover; border-radius: inherit; }
.tvset--mini .tvset__bezel { padding: 2.4%; border-radius: 2.2rem; }

/* old channel-TV section is gone */
.tv, .tv__stage, .phone--tv { display: none; }
@media (max-width: 767px) {
  .artist { width: 78%; margin: 4rem auto 0; }
  .artist figcaption { flex-direction: column; gap: 0.4rem; }
  .artist figcaption b { white-space: nowrap; }
  .teach__main figcaption, .lesson--wide figcaption { left: 1.2rem; bottom: 1rem; }
}
@media (max-width: 767px) {
  .reels__title { font-size: 3.4rem; letter-spacing: 0.01em; }
  .reels__lead { font-size: 12px; letter-spacing: 0.06em; }
  .teach__title { font-size: 3.8rem; }
}
/* artist photo: live film — moving grain, gate weave, slow exposure breathing */
.artist__frame::after {
  content: ""; position: absolute; inset: -30%; z-index: 2; pointer-events: none; opacity: 0.22; mix-blend-mode: overlay;
  background-image: url("../assets/img/noise-film.png");
  animation: filmGrain 0.5s steps(4) infinite;
}
.artist__frame img { animation: gateWeave 7s ease-in-out infinite; }
.artist__frame::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(90% 70% at 70% 10%, rgba(255,245,230,0.10), transparent 60%);
  animation: exposure 5.5s ease-in-out infinite;
}
@keyframes filmGrain { 0% { transform: translate(0,0); } 25% { transform: translate(-4%,3%); } 50% { transform: translate(3%,-4%); } 75% { transform: translate(-2%,-3%); } }
@keyframes gateWeave { 0%,100% { transform: scale(1.02) translate(0,0); } 30% { transform: scale(1.02) translate(0.15%,-0.1%); } 60% { transform: scale(1.02) translate(-0.1%,0.12%); } }
@keyframes exposure { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .artist__frame::after, .artist__frame img, .artist__frame::before { animation: none; } }

/* =========================================================
   v7 — トップの3連ロゴ（中央：鋼／左：電子ノイズ／右：サーモ）
   ========================================================= */
.hero__geo { display: none; }
.hero__labels { top: 17%; transform: none; }
.hero__tag {
  position: fixed; left: 0; top: 0; z-index: 3; pointer-events: none; opacity: 0;
  margin: 1rem 0 0 -11rem; width: 22rem; text-align: center;
  font-family: var(--f-num); font-size: max(1.1rem, 10px); letter-spacing: 0.18em; line-height: 1.6;
  will-change: transform, opacity;
}
.hero__tag i { display: block; font-style: normal; color: var(--text-3); white-space: nowrap; }
.hero__tag b { display: block; font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero__tag--glitch b { color: #7fe9ff; text-shadow: 2px 0 rgba(255, 40, 160, 0.7), -2px 0 rgba(40, 230, 255, 0.7); }
.hero__bars { display: flex; gap: 3px; justify-content: center; margin-top: 0.6rem; height: 10px; align-items: flex-end; }
.hero__bars em { width: 3px; background: #7fe9ff; animation: bars 1.1s steps(3) infinite; }
.hero__bars em:nth-child(2) { animation-delay: -0.2s; } .hero__bars em:nth-child(3) { animation-delay: -0.5s; }
.hero__bars em:nth-child(4) { animation-delay: -0.7s; } .hero__bars em:nth-child(5) { animation-delay: -0.9s; }
@keyframes bars { 0% { height: 20%; } 33% { height: 100%; } 66% { height: 55%; } 100% { height: 30%; } }
.hero__tag--thermal b { font-size: 1.5em; letter-spacing: 0.06em; color: #ffd36b; }
.hero__scale { display: flex; justify-content: space-between; margin: 0.6rem auto 0; width: 10rem; padding-top: 0.8rem; font-style: normal;
  background: linear-gradient(90deg, #04000b, #1a0075, #8e009e, #f01f29, #ff8f00, #fff048, #fff) top / 100% 4px no-repeat; color: var(--text-3); }
.hero__scale em { font-style: normal; }
@media (max-width: 767px) {
  .hero__tag { display: none; }
  .hero__labels { top: 24%; }
}
@media (prefers-reduced-motion: reduce) { .hero__bars em { animation: none; height: 60%; } }

/* =========================================================
   v8 — 記録映像：5体のロゴが周回するステージ + 波動の背景
   ========================================================= */
.reels { padding-top: 4rem; }
.reels__head {
  position: relative; isolation: isolate; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 14rem var(--gutter);
}
.reels__head::before {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; pointer-events: none;
  width: min(118rem, 112vw); height: 74%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(5, 6, 7, 0.78), rgba(5, 6, 7, 0.42) 58%, transparent);
}
.reels__title { margin-top: 2.4rem; font-size: max(7rem, 34px); line-height: 1.32; letter-spacing: 0.04em; }
.reels__title .ln { display: block; }
.reels__title .ln + .ln { font-size: 0.64em; margin-top: 1.6rem; letter-spacing: 0.12em; color: var(--text-2); }
.reels__lead { text-align: center; max-width: 100rem; margin-top: 4.8rem; padding: 0; line-height: 2.2; font-size: max(1.7rem, 13px); color: #e9edf1;
  text-shadow: 0 0 14px rgba(0, 0, 0, 0.95), 0 0 3px rgba(0, 0, 0, 0.9); }
.reels__lead--sub { margin-top: 2.4rem; color: var(--text-2); }
.orbit-tag {
  position: fixed; left: 0; top: 0; z-index: 3; pointer-events: none; opacity: 0;
  width: 20rem; margin: 0.8rem 0 0 -10rem; text-align: center; white-space: nowrap;
  font-family: var(--f-num); font-size: max(1rem, 9px); letter-spacing: 0.24em; color: var(--text-3);
  will-change: transform, opacity;
}
.orbit-tag b { font-family: var(--f-jp); font-weight: 400; margin: 0 0.4em; letter-spacing: 0.1em; }
.orbit-tag--steel b { color: #dfe7ef; }
.orbit-tag--signal b { color: #7fe9ff; text-shadow: 1px 0 rgba(255, 40, 160, 0.7), -1px 0 rgba(40, 230, 255, 0.7); }
.orbit-tag--thermal b { color: #ffc14d; }
.orbit-tag--flame b { color: #ff7a2f; text-shadow: 0 0 8px rgba(255, 110, 20, 0.7); }
.orbit-tag--mosaic b { color: #c8d0d8; }
@media (max-width: 767px) {
  .reels__head { padding: 12rem var(--gutter); }
  .reels__title { font-size: 2.5rem; letter-spacing: 0.02em; }
  .reels__title .ln + .ln { font-size: 0.8em; letter-spacing: 0.06em; }
  .reels__lead { font-size: 12px; letter-spacing: 0.04em; line-height: 2.1; text-align: left; }
  .reels__lead br { display: none; }
  .orbit-tag { display: none; }
}

/* =========================================================
   v10 — タイポグラフィ刷新
   見出し＝明朝（Shippori Mincho B1）／本文＝ゴシック（Zen Kaku Gothic New）
   欧文・数字＝コンデンスド（Barlow Condensed）。見出しはプロポーショナル詰め。
   ========================================================= */
:root {
  --f-head: "Shippori Mincho B1", serif;
  --f-jp: "Zen Kaku Gothic New", sans-serif;
  --f-sans: "Zen Kaku Gothic New", sans-serif;
  --f-num: "Barlow Condensed", "Zen Kaku Gothic New", sans-serif;
  --f-serif: "Shippori Mincho B1", serif;
}
body { counter-reset: sec; }
em { font-family: var(--f-head); font-weight: 800; }

/* display */
.hero__title, .profile__hi, .profile__hello, .profile__lead, .career__title, .teach__title,
.statement__text, .reels__title, .highlight, .program__title, .path__en, .path__jp,
.contact__title, .menu__links a, .footer__nav a {
  font-family: var(--f-head); font-weight: 600; font-feature-settings: "palt"; letter-spacing: 0.02em;
}
.profile__hello, .career__title, .contact__title { letter-spacing: -0.01em; }

/* text */
.profile__jp, .career__lead, .result__txt, .teach__lead, .teach__welcome, .reels__lead, .approach__jp,
.program__txt, .path__list, .contact__jp, .stats__label, .team__sub, .profile__meta dd {
  font-family: var(--f-jp); font-weight: 400; letter-spacing: 0.05em; font-feature-settings: "palt" 0;
}

/* latin / numerals */
.brand__text i, .menu__brand i, .result__name, .result__sub, .result__ig span, .result__rank span, .result__rank strong,
.stats__num, .stats__num i, .team__cat, .team__name, .program__no, .programs__count, .footer__logo, .artist figcaption i {
  font-family: var(--f-num);
}
.result__name { font-weight: 600; font-size: max(6.4rem, 32px); text-transform: uppercase; letter-spacing: 0.01em; }
.result__sub { font-weight: 500; letter-spacing: 0.12em; }
.result__rank span { font-weight: 500; letter-spacing: 0.14em; }
.result__rank strong { font-weight: 500; letter-spacing: -0.02em; }
.stats__num { font-weight: 500; }
.team__name { font-weight: 600; letter-spacing: 0.02em; }
.brand__text i, .menu__brand i { font-weight: 500; letter-spacing: 0.3em; }
.footer__logo { font-weight: 600; letter-spacing: -0.01em; line-height: 0.8; font-size: calc((100vw - var(--gutter) * 2) / 3.75); }

/* section labels: 01 プロフィール —— (no braces) */
.tag {
  counter-increment: sec; display: flex; align-items: center; gap: 1.2rem;
  font-family: var(--f-jp); font-size: max(1.3rem, 11px); font-weight: 500; letter-spacing: 0.24em; color: var(--st-300);
}
.tag::before { content: counter(sec, decimal-leading-zero); font-family: var(--f-num); font-weight: 600; font-size: 1.3em; letter-spacing: 0.06em; color: var(--c-sub); }
.tag::after { content: ""; width: 4rem; min-width: 24px; height: 1px; background: currentColor; opacity: 0.6; }

/* menu button */
.ui--tr { display: inline-flex; align-items: center; gap: 1rem; font-family: var(--f-jp); font-weight: 500; letter-spacing: 0.2em; }
.menu-btn__bars { display: inline-flex; flex-direction: column; gap: 5px; }
.menu-btn__bars i { display: block; width: 20px; height: 1px; background: currentColor; }
.menu-btn__bars i + i { width: 13px; }

/* hero: one statement + one line */
.hero__title {
  left: var(--gutter); bottom: calc(var(--gutter) + 8.4rem);
  font-size: max(9.6rem, 40px); line-height: 1.24; font-weight: 600;
}
.hero__title em { font-weight: 800; }
.hero__title em .wi { background: var(--metal-v); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__sub {
  position: absolute; left: var(--gutter); bottom: calc(var(--gutter) + 2.6rem); overflow: hidden; padding: 0.2em 0;
  font-family: var(--f-jp); font-weight: 500; font-size: max(2.4rem, 15px); letter-spacing: 0.16em; color: var(--st-200);
}
.hero__sub span { display: inline-flex; align-items: center; gap: 1.4rem; }
.hero__sub span::before { content: ""; width: 4.8rem; min-width: 28px; height: 1px; background: currentColor; opacity: 0.7; }
@media (max-width: 767px) {
  .hero__title { font-size: 3.5rem; bottom: 8.4rem; line-height: 1.3; }
  .hero__sub { font-size: 13px; letter-spacing: 0.08em; bottom: 3.6rem; }
  .ui--tr { letter-spacing: 0.12em; gap: 0.8rem; }
}

.profile__hello { margin-left: 0; width: fit-content; max-width: 100%; }
.career__title .ln { display: block; }
.profile__jp, .career__lead, .result__txt, .teach__lead, .teach__welcome, .approach__jp, .program__txt, .path__list, .contact__jp {
  font-size: max(1.6rem, 13px); line-height: 2.05;
}
/* legibility over the moving backgrounds */
.program__no, .program__txt, .program__title { text-shadow: 0 0 18px rgba(0, 0, 0, 0.95), 0 0 4px rgba(0, 0, 0, 0.9); }
.program__txt { color: #eef1f3; }
.approach__jp { color: #eef1f3; text-shadow: 0 0 16px rgba(0, 0, 0, 0.95), 0 0 4px rgba(0, 0, 0, 0.9); }
.contact__jp { position: relative; z-index: 2; color: #eef1f3; text-shadow: 0 0 18px rgba(0, 0, 0, 1), 0 0 6px rgba(0, 0, 0, 1); }
/* footer wordmark: fills the width without touching the nav above it */
.footer__logo { font-size: calc((100vw - var(--gutter) * 2) / 4.7); letter-spacing: 0.055em; }
.contact__jp { width: fit-content; max-width: calc(100% / 8 * 4); padding: 1.8rem 2.4rem; background: rgba(5, 6, 7, 0.66); border-radius: 1.2rem; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (max-width: 767px) { .contact__jp { max-width: 100%; padding: 1.4rem 1.6rem; } }
.footer__logo { font-size: min(calc((100vw - var(--gutter) * 2) / 4.7), 31svh); }
@media (max-width: 767px) { .career__lead br { display: none; } }
/* keep names and headline lines whole */
.profile__hello em { white-space: nowrap; }
.career__title .ln, .hero__title .ln { white-space: nowrap; }
@media (max-width: 767px) {
  .profile__hello { font-size: 3.6rem; line-height: 1.35; }
  .career__title { font-size: 5rem; line-height: 1.25; }
  .profile__jp .line, .profile__jp .line > span { display: inline; padding: 0; }
}
@media (max-width: 767px) {
  .teach__title { font-size: 3.4rem; white-space: nowrap; }
  .teach__lead br, .teach__welcome br, .approach__jp br, .contact__jp br, .program__txt br { display: none; }
}
/* line breaking: balanced headings, no one-character last lines in body copy */
h1, h2, h3, .highlight, .statement__text, .contact__title, .program__title, .path__jp { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
.sp-br { display: none; }
.highlight .ln, .contact__title { white-space: nowrap; }
@media (max-width: 767px) {
  .sp-br { display: inline; }
  .highlight { font-size: 2.15rem; }
  .contact__title { font-size: 4.1rem; }
  .path__list li { letter-spacing: 0.02em; }
}
@media (max-width: 767px) { .path__list { font-size: 12px; } .path__list li { letter-spacing: 0; } }
@media (max-width: 767px) {
  .footer { height: auto; min-height: 100svh; }
  .footer__inner { position: relative; inset: auto; min-height: 100svh; padding: 9rem var(--gutter) 18rem; }
  .footer__nav a { font-size: 2.6rem; line-height: 1.55; }
}
@media (max-width: 767px) { .footer__logo { bottom: 8.6rem; } .footer__copy { bottom: 3.6rem; } }
@media (max-width: 767px) { .programs__count { display: none; } }
.menu__brand b, .brand__text b { white-space: nowrap; } @media (max-width: 767px) { .menu__brand b { font-size: 14px; letter-spacing: 0.1em; } }
.hero__sub span { white-space: nowrap; }
@media (max-width: 767px) {
  .hero__sub { font-size: min(13px, 3.7vw); letter-spacing: 0.04em; }
  .hero__sub span { gap: 1rem; }
  .hero__sub span::before { width: 2rem; min-width: 18px; }
}

/* =========================================================
   v11 — 電子的な背景／粒子のダンサー／入賞多数
   ========================================================= */
.efx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

.programs__dancer {
  position: absolute; left: 50%; top: 50%; z-index: 2; pointer-events: none;
  width: min(62rem, 84vh); height: min(62rem, 84vh); transform: translate(-50%, -50%);
}
.program__dancer { display: none; }
@media (max-width: 767px) {
  .programs__sticky { display: none; }
  .program__dancer { display: block; width: 100%; height: 64vw; margin: 0.4rem 0 1.2rem; }
}

.more-wins { margin-top: 16rem; position: relative; }
.more-wins__ticker {
  overflow: hidden; margin: 0 calc(var(--gutter) * -1); padding: 2.4rem 0;
  border-top: 1px solid rgba(238, 241, 243, 0.14); border-bottom: 1px solid rgba(238, 241, 243, 0.14);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.more-wins__track { display: flex; width: max-content; gap: 7rem; animation: winsTicker 30s linear infinite; }
.more-wins__track span {
  font-family: var(--f-head); font-weight: 800; font-size: max(9rem, 44px); line-height: 1.25; white-space: nowrap;
  font-feature-settings: "palt"; color: transparent; -webkit-text-stroke: 1px rgba(238, 241, 243, 0.55);
}
.more-wins__track span:nth-child(even) { background: var(--metal-v); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 0; }
@keyframes winsTicker { to { transform: translateX(-50%); } }
.more-wins__txt {
  margin: 4.4rem 0 0 calc(100% / 8 * 3); max-width: 70rem;
  font-family: var(--f-jp); font-size: max(1.8rem, 14px); line-height: 2.05; letter-spacing: 0.05em; color: var(--text-2);
}
.more-wins__txt strong { color: #fff; font-weight: 700; }
.more-wins__plus { font-family: var(--f-num); font-weight: 600; font-size: 1.7em; line-height: 1; margin-right: 1.2rem; vertical-align: -0.12em; color: #fff; }
@media (max-width: 767px) {
  .more-wins { margin-top: 10rem; }
  .more-wins__txt { margin-left: 0; }
  .more-wins__txt br { display: none; }
  .more-wins__track span { font-size: 3.6rem; }
}
@media (prefers-reduced-motion: reduce) { .more-wins__track { animation: none; } }
.more-wins__txt strong { white-space: nowrap; } @media (max-width: 767px) { .more-wins__txt strong { white-space: normal; } }
.program__txt { max-width: 66rem; }
.programs__dancer, .program__dancer { background: radial-gradient(closest-side, rgba(5, 6, 7, 0.62), rgba(5, 6, 7, 0.25) 70%, transparent); border-radius: 50%; }
@media (max-width: 767px) { .program__dancer { height: 80vw; width: 80vw; margin: 0.4rem auto 1.2rem; } }

/* =========================================================
   v12 — トップのコピーを背景に応じて反転（difference）
   ========================================================= */
.hero-text {
  position: absolute; left: 0; top: 0; width: 100%; height: 100svh; min-height: 560px;
  z-index: 3; pointer-events: none; mix-blend-mode: difference; color: #fff;
}
.hero-text .hero__title { bottom: calc(var(--gutter) + 12rem); color: #fff; }
.hero-text .hero__title em .wi { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fff; }
.hero-text .hero__sub { bottom: calc(var(--gutter) + 2.2rem); color: #fff; display: flex; flex-direction: column; gap: 0.6rem; }
.hero-text .hero__sub span:nth-child(2) { font-size: 0.72em; letter-spacing: 0.2em; opacity: 0.8; padding-left: calc(4.8rem + 1.4rem); }
.hero-text .hero__sub span:nth-child(2)::before { display: none; }
@media (max-width: 767px) {
  .hero-text .hero__title { bottom: 11.4rem; }
  .hero-text .hero__sub { bottom: 3rem; }
  .hero-text .hero__sub span:nth-child(2) { padding-left: calc(max(2rem, 18px) + 1rem); letter-spacing: 0.1em; font-size: 0.86em; }
}
/* reels: let the footage read as moving footage — lighter scanlines, colour back */
.reel-tile video { filter: grayscale(0.12) contrast(1.06) brightness(0.98); }
.reel-tile.tvfx::before { opacity: 0.35; }
.reel-tile.tvfx::after { opacity: 0.05; }

/* =========================================================
   v12b — DANCE ALIVE：レトロTVをやめ、薄い鋼フチの放送モニターに
   ========================================================= */
@property --rim { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.result--da .tvset__body {
  grid-template-columns: 1fr; gap: 0; padding: 0.7rem; border-radius: 2.4rem;
  background: linear-gradient(135deg, rgba(238, 241, 243, 0.6), rgba(96, 106, 118, 0.3) 28%, rgba(16, 19, 23, 0.85) 55%, rgba(206, 214, 222, 0.5));
  box-shadow: 0 0 0 1px rgba(238, 241, 243, 0.16), 0 40px 90px rgba(0, 0, 0, 0.65), 0 0 80px rgba(150, 200, 255, 0.07);
}
.result--da .tvset__body::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--rim), transparent 0 64%, rgba(170, 225, 255, 0.95) 76%, rgba(255, 255, 255, 1) 80%, transparent 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: rimRun 5.5s linear infinite;
}
@keyframes rimRun { to { --rim: 360deg; } }
.result--da .tvset__bezel { padding: 0; border-radius: 1.8rem; background: #000; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.9); }
.result--da .tvset__screen { border-radius: 1.8rem; }
.result--da .tvset__panel, .result--da .tvset__leg { display: none; }
.result--da .tvset__shadow { left: 10%; right: 10%; bottom: -9%; opacity: 0.55; }
.result--da .tvset__glass {
  background:
    linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.07) 48%, transparent 56%),
    radial-gradient(ellipse at center, transparent 62%, rgba(0, 0, 0, 0.45) 100%);
}
.result--da .tv__rec { font-family: var(--f-num); font-weight: 600; letter-spacing: 0.24em; }
@media (prefers-reduced-motion: reduce) { .result--da .tvset__body::before { animation: none; } }

/* =========================================================
   v15 — タイポグラフィ補強
   欧文・数字＝Archivo（幅の可変軸）。数字は細長く縦に、大会名は横に広く
   打ち出して、バトルのフライヤーや鋼の刻印のような幅のコントラストに。
   大会データ・キャプション＝JetBrains Mono（中継画面の表示のように）。
   ========================================================= */
:root {
  --f-num: "Archivo", "Zen Kaku Gothic New", sans-serif;
  --f-mono: "JetBrains Mono", "Zen Kaku Gothic New", monospace;
}
.brand__text i, .menu__brand i, .result__name, .result__sub, .result__ig span, .result__rank span, .result__rank strong,
.stats__num, .stats__num i, .team__cat, .team__name, .program__no, .programs__count, .footer__logo, .artist figcaption i,
.tag::before, .more-wins__plus {
  font-stretch: 75%;
}
/* scoreboard numerals: tall and tight */
.stats__num, .result__rank strong { font-stretch: 62%; font-weight: 700; letter-spacing: -0.01em; }
.stats__num i, .result__rank span { font-stretch: 75%; font-weight: 600; }
/* event names: wide and heavy, like a stamped plate */
.result__name { font-stretch: 125%; font-weight: 800; font-size: max(5rem, 26px); line-height: 1.02; letter-spacing: -0.005em; }
.team__name { font-stretch: 112%; font-weight: 700; letter-spacing: 0; }
/* data lines read like a broadcast overlay */
.result__sub, .team__cat, .result__ig i, .result--da .tv__rec {
  font-family: var(--f-mono); font-weight: 500; font-size: max(1.2rem, 11px); letter-spacing: 0.08em; text-transform: uppercase;
}
.result__ig span { font-stretch: 100%; font-weight: 600; letter-spacing: 0.02em; }
.footer__logo { font-stretch: 62%; font-weight: 800; letter-spacing: 0.02em; }
@media (max-width: 767px) {
  .result__name { font-size: 26px; }
}

/* 実績と経験 → だから教えられる */
.proof { margin-top: 20rem; display: grid; grid-template-columns: repeat(8, 1fr); column-gap: var(--gutter); }
.proof__title {
  grid-column: 1 / 8; font-family: var(--f-head); font-weight: 600; font-feature-settings: "palt";
  font-size: max(6.6rem, 30px); line-height: 1.42; letter-spacing: 0.01em; color: #fff; text-wrap: balance;
}
.proof__title em { font-weight: 800; background: var(--metal-v); -webkit-background-clip: text; background-clip: text; color: transparent; }
.proof__body { grid-column: 4 / 9; margin-top: 6.4rem; max-width: 64rem; }
.proof__body p {
  font-family: var(--f-jp); font-weight: 400; font-size: max(1.7rem, 14px); line-height: 2.15; letter-spacing: 0.05em;
  color: var(--text-2); text-wrap: pretty;
}
.proof__body p + p { margin-top: 1.5em; }
.proof__sign { display: flex; align-items: center; gap: 1.6rem; margin-top: 4rem !important; }
.proof__sign::before { content: ""; width: 4.8rem; min-width: 28px; height: 1px; background: currentColor; opacity: 0.6; }
.proof__sign span { font-family: var(--f-num); font-stretch: 125%; font-weight: 800; font-size: max(2.4rem, 18px); letter-spacing: 0; color: #fff; }
@media (max-width: 767px) {
  .proof { margin-top: 12rem; display: block; }
  .proof__title { font-size: 2.7rem; line-height: 1.5; }
  .proof__body { margin-top: 4rem; }
  .proof__body p { font-size: 14px; letter-spacing: 0.03em; line-height: 2.05; }
}
/* odometer slots follow the narrower scoreboard numerals */
.stats__num .odo__col span, .result__rank .odo__col span { width: 0.47em; }
/* four results across one row */
@media (min-width: 768px) {
  .stats { column-gap: 2.4rem; }
  .stats li:nth-child(1) { grid-column: 1 / 3; }
  .stats li:nth-child(2) { grid-column: 3 / 5; }
  .stats li:nth-child(3) { grid-column: 5 / 7; }
  .stats li:nth-child(4) { grid-column: 7 / 9; }
}
.result__sub { text-transform: none; }   /* keep names as the teams write them (stunna thug crew) */

/* =========================================================
   v16 — スクロールの物語（KPR の技法を鋼の世界観で）
   ========================================================= */
/* ---- HUD ---- */
.hud { position: fixed; inset: 0; z-index: 58; pointer-events: none; opacity: 0; visibility: hidden; color: #fff; mix-blend-mode: difference; }
.hud__frame {
  position: absolute; inset: 0.9rem; border: 1px solid rgba(238, 241, 243, 0.22); border-radius: 1.8rem;
}
.hud__index {
  position: absolute; top: calc(var(--gutter) + 0.2rem); left: 50%; transform: translateX(-50%);
  display: flex; gap: 2.8rem; pointer-events: auto;
}
.hud__index a {
  position: relative; font-family: var(--f-jp); font-size: max(1.2rem, 11px); font-weight: 500; letter-spacing: 0.2em; line-height: 1;
  color: rgba(238, 241, 243, 0.42); transition: color 0.4s; white-space: nowrap;
}
.hud__index a::before {
  content: ""; position: absolute; left: -1.3rem; top: 50%; width: 5px; height: 5px; margin-top: -2.5px;
  background: currentColor; transform: scale(0); transition: transform 0.4s var(--ease-expo);
}
.hud__index a.is-on { color: #fff; }
.hud__index a.is-on::before { transform: scale(1); }
@media (hover: hover) { .hud__index a:hover { color: #fff; } }
.hud__index a:focus-visible { outline: 1px solid #fff; outline-offset: 6px; }
.hud__reticle {
  position: absolute; right: 2.2rem; top: 50%; width: max(3.2rem, 26px); height: max(3.2rem, 26px);
}
.hud__reticle svg { width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: square; }
.hud__ticks {
  position: absolute; right: calc(2.2rem + max(1.6rem, 13px) - 1px); bottom: 3.2rem; display: flex; flex-direction: column-reverse; gap: 0.5rem;
}
.hud__ticks i { display: block; width: 2px; height: 1rem; min-height: 7px; background: rgba(238, 241, 243, 0.3); transition: background 0.3s; }
.hud__ticks i.is-on { background: #fff; }
@media (max-width: 767px) {
  .hud__frame { inset: 0.6rem; border-radius: 1.4rem; }
  .hud__index { gap: 0; top: calc(var(--gutter) + 0.4rem); }
  .hud__index a { display: none; font-size: 11px; }
  .hud__index a.is-on { display: block; }
  .hud__index a::before { left: -12px; }
  .hud__reticle { right: 1.4rem; }
  .hud__ticks { display: none; }
}

/* ---- tab-cut plates ---- */
[data-tab] { border-radius: 0 !important; }

/* ---- chapter ---- */
.chapter { position: relative; height: 100svh; background: var(--st-950); z-index: 3; }
.chapter__stage { position: relative; height: 100%; overflow: hidden; perspective: 1500px; }
.chapter__card {
  position: absolute; inset: 0.9rem; overflow: hidden; background: #000;
  transform-origin: 50% 50%; will-change: transform, clip-path; backface-visibility: hidden;
}
.chapter__card video { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.25) contrast(1.08) brightness(0.92); }
.chapter__shade {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 6, 7, 0.1) 40%, rgba(5, 6, 7, 0.78) 100%);
}
.chapter__head {
  position: absolute; left: calc(var(--gutter) * 2); top: 16vh; z-index: 2;
  font-family: var(--f-head); font-weight: 600; font-feature-settings: "palt";
  font-size: max(9.6rem, 38px); line-height: 1.2; letter-spacing: 0.01em; color: #fff;
}
.chapter__head .ln { display: block; will-change: transform, opacity; white-space: nowrap; }
.chapter__head em { font-weight: 800; background: var(--metal-v); -webkit-background-clip: text; background-clip: text; color: transparent; }
.chapter__subs { position: absolute; left: 0; right: 0; bottom: 10vh; height: 3em; z-index: 3; pointer-events: none; }
.chapter__sub {
  position: absolute; left: 50%; bottom: 0; transform: translate3d(-50%, 12px, 0); opacity: 0;
  font-family: var(--f-jp); font-weight: 500; font-size: max(2.4rem, 16px); letter-spacing: 0.12em; white-space: nowrap;
  color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.9);
}
@media (max-width: 767px) {
  .chapter__card { inset: 0.6rem; }
  .chapter__head { left: var(--gutter); top: 13vh; font-size: 3.6rem; }
  .chapter__subs { bottom: 12vh; }
  .chapter__sub { font-size: 14px; letter-spacing: 0.04em; white-space: normal; width: calc(100% - var(--gutter) * 4); text-align: center; }
}

/* ---- pixel wipe ---- */
.wipe { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 55; pointer-events: none; visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .wipe { display: none; } }

/* ---- proof: the page flips to a light steel plate (KPR-style light chapter) ---- */
.proof {
  position: relative; margin: 20rem calc(var(--gutter) * -1) 0; padding: 16rem calc(var(--gutter) * 2) 16rem;
  background: #e7ebee; color: var(--st-900);
  grid-template-columns: repeat(8, 1fr); column-gap: var(--gutter);
}
.proof__big {
  position: absolute; left: calc(var(--gutter) * 1.2); top: 50%; z-index: 0;
  writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg);
  display: flex; align-items: flex-start; gap: 0.12em; white-space: nowrap; pointer-events: none;
  font-family: var(--f-num); font-stretch: 62%; font-weight: 800; line-height: 0.8; color: var(--st-900);
  font-size: max(30rem, 120px); letter-spacing: -0.02em;
}
.proof__big span { font-size: 0.42em; font-stretch: 75%; line-height: 1; color: var(--st-500); }
.proof__title { grid-column: 3 / 9; color: var(--st-900); position: relative; z-index: 1; }
.proof__title em { background: linear-gradient(180deg, #2a3139 0%, #5f6b77 45%, #0b0d10 55%, #414a54 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.proof__body { grid-column: 5 / 9; position: relative; z-index: 1; }
.proof__body p { color: var(--st-700); }
.proof__sign span { color: var(--st-900); }
.proof__sign::before { opacity: 0.5; }
@media (max-width: 767px) {
  .proof { margin: 12rem calc(var(--gutter) * -1) 0; padding: 9rem calc(var(--gutter) * 1.5) 10rem; }
  .proof__big { position: relative; left: auto; top: auto; transform: none; writing-mode: horizontal-tb; align-items: flex-end; margin-bottom: 3rem; font-size: 11rem; }
  .proof__big span { padding-bottom: 0.1em; }
}
.chapter__cap {
  position: absolute; right: 3.2rem; top: 3rem; z-index: 3; opacity: 0; display: inline-flex; align-items: center; gap: 1rem;
  font-family: var(--f-mono); font-weight: 500; font-size: max(1.2rem, 11px); letter-spacing: 0.14em; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}
.chapter__cap i { width: 7px; height: 7px; border-radius: 50%; background: #e33; box-shadow: 0 0 10px rgba(255, 60, 60, 0.8); animation: capBlink 1.2s steps(2) infinite; }
@keyframes capBlink { 50% { opacity: 0.2; } }
@media (prefers-reduced-motion: reduce) { .chapter__cap i { animation: none; } }
@media (max-width: 767px) {
  .hud__index { display: none; }
  .hud__reticle { top: auto; bottom: 1.8rem; right: 1.6rem; width: 22px; height: 22px; }
  .chapter__cap { right: 1.6rem; top: 1.8rem; }
}

/* ---- lesson footage carries the repeaters count ---- */
.teach__stat {
  position: absolute; right: 1.8rem; bottom: 1.8rem; z-index: 4; padding: 1.6rem 2.2rem 1.4rem;
  background: rgba(5, 6, 7, 0.62); border: 1px solid rgba(238, 241, 243, 0.18); border-radius: 1.4rem;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.teach__stat .stats__num { font-size: max(7.2rem, 40px); line-height: 1; }
.teach__stat .stats__num b { font-family: var(--f-jp); font-weight: 500; font-size: 0.34em; margin-left: 0.3em; align-self: flex-end; padding-bottom: 0.2em; color: var(--st-200); }
.teach__stat .stats__label { margin-top: 0.8rem; font-family: var(--f-jp); font-size: max(1.3rem, 11px); letter-spacing: 0.12em; color: var(--st-200); }
@media (max-width: 767px) {
  .teach__main { width: 100%; align-self: stretch; }
  .teach__stat { right: 1rem; bottom: 1rem; padding: 1rem 1.4rem 0.9rem; border-radius: 1rem; }
  .teach__stat .stats__num { font-size: 32px; }
  .teach__stat .stats__label { font-size: 10px; letter-spacing: 0.06em; }
  .teach__main figcaption { bottom: auto; top: 1rem; }
}
@media (max-width: 767px) { .teach__main { aspect-ratio: 4 / 3.4; } }

/* ---- opening curtain ---- */
.curtain { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 120; pointer-events: none; }
.curtain-cover { position: fixed; inset: 0; z-index: 119; background: #050607; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .curtain-cover { display: none; } }

/* ---- menu: a floating steel panel inside the frame (KPR) ---- */
.menu::before {
  content: ""; position: absolute; inset: 0; background: rgba(206, 214, 220, 0.16); -webkit-backdrop-filter: blur(6px) saturate(0.6); backdrop-filter: blur(6px) saturate(0.6);
  opacity: 0; transition: opacity 0.7s var(--ease-expo);
}
.menu.is-open::before { opacity: 1; }
.menu__wrap { top: 0.9rem; right: 0.9rem; height: auto; bottom: 0.9rem; width: min(64rem, calc(100% - 1.8rem)); border-radius: 1.8rem; transition: box-shadow 0.6s; }
.menu.is-open .menu__wrap { box-shadow: 0 0 0 1px rgba(238, 241, 243, 0.14), 0 40px 120px rgba(0, 0, 0, 0.6); }
.menu__panel { border-radius: inherit; }
.menu__links a { display: inline-block; padding: 0.05em 0.3em 0.1em; margin-left: -0.3em; }
.menu__links a.is-current span {
  background: #eef1f3; color: #0b0d10; padding: 0 0.28em; margin-left: -0.28em;
  clip-path: polygon(0 0, calc(100% - 0.36em) 0, 100% 0.36em, 100% 100%, 0 100%);
}
.menu__links a.is-current em { display: none; }
.menu__links a::after {
  content: attr(href); position: absolute; right: -0.2em; top: 0.3em; transform: translateX(100%);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--st-500); opacity: 0; transition: opacity 0.3s;
}
@media (hover: hover) { .menu__links a:hover::after { opacity: 1; } }
@media (max-width: 767px) { .menu__wrap { top: 0.6rem; right: 0.6rem; bottom: 0.6rem; width: calc(100% - 1.2rem); } .menu__links a::after { display: none; } }

/* ---- menu button: a corner-cut steel tab (KPR "SIGN IN") ---- */
.ui--tr#menuOpen {
  top: calc(var(--gutter) - 0.6rem); right: calc(var(--gutter) - 0.4rem); padding: 1rem 1.5rem 1rem 1.3rem;
  background: #eef1f3; color: #0b0d10; mix-blend-mode: difference; border-radius: 0.6rem;
  clip-path: polygon(0.9rem 0, 100% 0, 100% 100%, 0 100%, 0 0.9rem);
}
.ui--tr#menuOpen .menu-btn__bars i { background: #0b0d10; }
@media (max-width: 767px) { .ui--tr#menuOpen { padding: 0.9rem 1.2rem; top: calc(var(--gutter) - 0.4rem); } }

/* =========================================================
   v17 — KPR の技法をページ全体へ
   ========================================================= */
/* file-name captions on media */
[data-cap] { position: relative; }
.dot-cap {
  position: absolute; right: 1.6rem; top: 1.4rem; z-index: 5; display: inline-flex; align-items: center; gap: 0.8rem;
  padding: 0.5rem 0.9rem; border-radius: 0.5rem; background: rgba(5, 6, 7, 0.62);
  font-family: var(--f-mono); font-weight: 500; font-size: max(1.1rem, 10px); letter-spacing: 0.1em; color: #eef1f3;
  opacity: 0; transform: translateY(-6px); transition: opacity 0.6s var(--ease-expo), transform 0.6s var(--ease-expo); pointer-events: none;
}
.dot-cap.is-on { opacity: 1; transform: none; }
.dot-cap i { width: 5px; height: 5px; background: currentColor; }
.teach__main .dot-cap { top: 1.4rem; right: 1.6rem; }
@media (max-width: 767px) { .dot-cap { right: 1rem; top: 1rem; font-size: 9px; padding: 0.4rem 0.7rem; } .teach__main .dot-cap { display: none; } }

/* chapter: annotation markers over the footage */
.chapter__mark { position: absolute; z-index: 3; display: flex; align-items: center; gap: 1rem; opacity: 0; pointer-events: none; color: #fff; }
.chapter__mark b { width: max(4.4rem, 30px); height: max(4.4rem, 30px); border: 1px solid rgba(238, 241, 243, 0.8); border-radius: 50%; position: relative; }
.chapter__mark b::before, .chapter__mark b::after { content: ""; position: absolute; left: 50%; top: 50%; background: #fff; }
.chapter__mark b::before { width: 1px; height: 140%; transform: translate(-50%, -50%); opacity: 0.5; }
.chapter__mark b::after { width: 5px; height: 5px; transform: translate(-50%, -50%); }
.chapter__mark i { font-style: normal; font-family: var(--f-mono); font-size: max(1.1rem, 10px); letter-spacing: 0.12em; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9); }
.chapter__mark--a { left: 16%; top: 26%; }
.chapter__mark--b { right: 18%; top: 58%; flex-direction: row-reverse; }
@media (max-width: 767px) { .chapter__mark--a { left: 8%; top: 22%; } .chapter__mark--b { right: 8%; top: 52%; } }

/* stats: a measuring ruler beside each number (KPR crystal gauge) */
.stats li { position: relative; padding-left: 2.2rem; }
.stats li::before {
  content: ""; position: absolute; left: 0; top: 0.6rem; bottom: 0.4rem; width: 0.9rem;
  background:
    repeating-linear-gradient(180deg, rgba(238, 241, 243, 0.55) 0 1px, transparent 1px 0.9rem) left / 0.5rem 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(238, 241, 243, 0.9) 0 1px, transparent 1px 4.5rem) left / 0.9rem 100% no-repeat;
  border-right: 1px solid rgba(238, 241, 243, 0.25);
}
.stats--teach li::before { display: none; }
.stats--teach li { padding-left: 0; }

/* 記録映像: footage through the letters */
.reels__knock { position: relative; margin: 8rem var(--gutter) 0; height: max(26vw, 110px); }
.reels__knock-cv { position: absolute; inset: 0; width: 100%; height: 100%; filter: grayscale(0.25) contrast(1.2) brightness(1.25); }
.reels__knock video { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
@media (max-width: 767px) { .reels__knock { margin-top: 5rem; height: 27vw; } }

/* 考え方: line diagram */
.approach { position: relative; }
.approach__geo {
  position: absolute; right: 4%; top: 50%; width: min(64rem, 60vw); height: min(64rem, 60vw); margin-top: calc(min(64rem, 60vw) / -2);
  fill: none; stroke: rgba(238, 241, 243, 0.28); stroke-width: 1; pointer-events: none; z-index: 0;
}
.approach__geo * { vector-effect: non-scaling-stroke; }
.approach__geo .geo-dot { fill: #eef1f3; stroke: none; }
.approach > *:not(.approach__geo) { position: relative; z-index: 1; }
@media (max-width: 767px) { .approach__geo { right: -30%; width: 110vw; height: 110vw; margin-top: -55vw; opacity: 0.6; } }

/* プログラム: giant vertical numeral */
.programs__big {
  position: absolute; left: calc(var(--gutter) * 1.5); top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl;
  font-family: var(--f-num); font-stretch: 62%; font-weight: 800; font-size: max(34rem, 150px); line-height: 0.8; letter-spacing: -0.02em;
  color: transparent; -webkit-text-stroke: 1px rgba(238, 241, 243, 0.4); pointer-events: none; z-index: 0;
}
@media (max-width: 767px) { .programs__big { display: none; } }

/* あなたへ: plate labels */
.path__label {
  position: absolute; right: 3rem; top: calc(2rem + 26px); z-index: 3; font-family: var(--f-mono); font-weight: 500;
  font-size: max(1.2rem, 11px); letter-spacing: 0.14em; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}
.path--pro .path__label { top: 2rem; right: 3rem; }

/* buttons: corner-cut steel plates (KPR btn-main) */
.btn, .result__btn { border-radius: 0.8rem !important; clip-path: polygon(1.4rem 0, 100% 0, 100% calc(100% - 1.4rem), calc(100% - 1.4rem) 100%, 0 100%, 0 1.4rem); }
.btn--ghost { background: rgba(238, 241, 243, 0.06); }

/* footer: KPR grid — hairline columns and square labels */
.footer__inner::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.08) 1px, transparent 1px) 0 0 / calc(100% / 4) 100%,
    linear-gradient(0deg, rgba(0, 0, 0, 0.08) 1px, transparent 1px) 0 calc(100% - 12rem) / 100% 100% no-repeat;
}
.footer__info dt::before { content: "■ "; font-size: 0.8em; }
.footer__nav li::before { content: counter(fnav, decimal-leading-zero); counter-increment: fnav; display: inline-block; width: 3.4em; font-family: var(--f-mono); font-size: max(1.1rem, 10px); letter-spacing: 0.1em; color: var(--st-500); vertical-align: 0.9em; }
.footer__nav { counter-reset: fnav; }
@media (max-width: 767px) { .chapter__cap { top: 6.4rem; right: 1.8rem; } }

/* =========================================================
   v18 — OP：黒い画面にデータが立ち上がるオープニング
   ========================================================= */
.op {
  --open: 0; --live: 1;
  position: fixed; inset: 0; z-index: 120; background: #000; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(50% - var(--open) * 50.5%), transparent calc(50% - var(--open) * 50.5%), transparent calc(50% + var(--open) * 50.5%), #000 calc(50% + var(--open) * 50.5%));
  mask-image: linear-gradient(90deg, #000 calc(50% - var(--open) * 50.5%), transparent calc(50% - var(--open) * 50.5%), transparent calc(50% + var(--open) * 50.5%), #000 calc(50% + var(--open) * 50.5%));
}
.op__cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.op__half { display: none; }
.op__data {
  position: absolute; margin: 0; padding: 0; list-style: none; opacity: var(--live);
  font-family: var(--f-mono); font-weight: 500; font-size: 11px; line-height: 1.9; letter-spacing: 0.12em; color: #aeb7c0;
}
.op__data b { display: inline-block; width: 7.2em; font-weight: 500; color: #5f6b77; }
.op__data em { font-style: normal; color: #5f6b77; }
.op__data--tl { left: 28px; top: 26px; }
.op__data--tl li { white-space: nowrap; }
.op__data--tr { right: 28px; top: 26px; display: flex; align-items: center; gap: 10px; }
.op__data--tr i { width: 7px; height: 7px; border-radius: 50%; background: #e33; animation: capBlink 0.9s steps(2) infinite; }
.op__data--bl { left: 28px; bottom: 26px; display: flex; flex-direction: column; gap: 6px; }
.op__bars { display: flex; align-items: stretch; gap: 2px; height: 26px; }
.op__bars i { display: block; background: #eef1f3; animation: opBar 0.5s steps(2) infinite; }
.op__bars i:nth-child(3n) { animation-duration: 0.31s; }
.op__bars i:nth-child(4n+1) { animation-duration: 0.73s; }
@keyframes opBar { 50% { transform: scaleY(0.45); } }
.op__data--br { right: 28px; bottom: 26px; display: flex; gap: 10px; align-items: baseline; }
.op__tc { font-size: 13px; color: #eef1f3; font-variant-numeric: tabular-nums; }
@media (max-width: 767px) {
  .op__data { font-size: 9px; letter-spacing: 0.06em; }
  .op__data--tl { left: 16px; top: 18px; } .op__data--tr { right: 16px; top: 18px; }
  .op__data--bl { left: 16px; bottom: 18px; } .op__data--br { right: 16px; bottom: 18px; }
  .op__data b { width: 6.4em; }
  .op__tc { font-size: 11px; }
}

/* =========================================================
   v18 — 画面の枠（KPR the-frame）：左のレール・上のバー・進捗ライン
   ========================================================= */
:root { --frame: 0.9rem; --rail: 5.4rem; --bar: 5.6rem; }
.hud__rail, .hud__bar { position: absolute; background: rgba(238, 241, 243, 0.22); }
.hud__rail { left: calc(var(--frame) + var(--rail)); top: var(--frame); bottom: var(--frame); width: 1px; }
.hud__bar { left: var(--frame); right: var(--frame); top: calc(var(--frame) + var(--bar)); height: 1px; }
.hud__prog { position: absolute; left: calc(var(--frame) + var(--rail)); right: var(--frame); top: calc(var(--frame) + var(--bar) - 1px); height: 3px; }
.hud__prog i { display: block; width: 100%; height: 100%; background: #fff; transform: scaleX(0); transform-origin: 0 50%; }
.hud__reticle { left: calc(var(--frame) + var(--rail) / 2); right: auto; top: 50%; }
.hud__ticks { left: calc(var(--frame) + var(--rail) / 2 - 1px); right: auto; bottom: 2.6rem; }
.hud__index { top: calc(var(--frame) + var(--bar) / 2); transform: translate(-50%, -50%); }
@media (min-width: 768px) {
  :root { --gutter: calc(var(--frame) + var(--rail) + 2rem); }
  .ui--tl { top: calc(var(--frame) + var(--bar) / 2); transform: translateY(-50%); left: calc(var(--frame) + var(--rail) + 2rem); }
  .ui--tr#menuOpen { top: calc(var(--frame) + var(--bar) / 2); transform: translateY(-50%); right: calc(var(--frame) + 1.6rem); }
  .menu__close { top: calc(var(--frame) + 2rem); right: calc(var(--frame) + 2.4rem); }
}
@media (max-width: 767px) {
  :root { --frame: 0.6rem; --rail: 0rem; --bar: 5.4rem; }
  .hud__rail { display: none; }
  .hud__prog { left: var(--frame); }
  .hud__reticle { left: auto; right: 1.6rem; top: auto; bottom: 1.8rem; }
}

/* OP: bright edges on the slit */
.op::before, .op::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: #eef1f3; opacity: 0; }
.op.is-open::before, .op.is-open::after { opacity: calc(1 - var(--open)); }
.op::before { left: calc(50% - var(--open) * 50.5% - 1px); }
.op::after { left: calc(50% + var(--open) * 50.5%); }

/* ---- chapter: satellite cards that fold into the main one (KPR collage) ---- */
.chapter__sat {
  position: absolute; inset: var(--frame); overflow: hidden; z-index: 1; will-change: transform, opacity; backface-visibility: hidden;
  transform-origin: 50% 50%; pointer-events: none;
}
.chapter__sat img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.3) contrast(1.08) brightness(0.9); }
.chapter__card { z-index: 2; }

/* ---- 記録映像: the fan ---- */
.fan { position: relative; height: 100svh; margin-top: 6rem; }
.fan__stage { position: relative; height: 100%; perspective: 1700px; overflow: hidden; }
.fan__cards { position: absolute; left: 50%; top: 52%; width: 0; height: 0; transform-style: preserve-3d; }
.fan__card {
  position: absolute; left: 0; top: 0; margin: calc(min(52vh, 30vw * 1.34) / -2) 0 0 calc(min(39vh, 30vw) / -2);
  width: min(39vh, 30vw); height: min(52vh, 30vw * 1.34); overflow: hidden; background: #0b0d10;
  will-change: transform; backface-visibility: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.fan__card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fan__count {
  position: absolute; left: var(--gutter); top: 16%; display: flex; align-items: baseline; gap: 1rem; z-index: 5;
  font-family: var(--f-num); font-stretch: 62%; font-weight: 800; font-size: max(12rem, 64px); line-height: 0.9; color: #fff;
}
.fan__count i { font-style: normal; font-family: var(--f-mono); font-weight: 500; font-size: max(1.3rem, 11px); letter-spacing: 0.14em; color: var(--st-300); }
.fan__mark { position: absolute; left: 50%; width: 0; height: 0; margin-left: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; opacity: var(--fan, 0); z-index: 5; }
.fan__mark--t { top: calc(52% - min(52vh, 30vw * 1.34) / 2 - 2.6rem); border-top: 8px solid #fff; }
.fan__mark--b { top: calc(52% + min(52vh, 30vw * 1.34) / 2 + 1.8rem); border-bottom: 8px solid #fff; }
@media (max-width: 767px) {
  .fan { margin-top: 3rem; }
  .fan__card { width: 52vw; height: 70vw; margin: -35vw 0 0 -26vw; }
  .fan__mark--t { top: calc(52% - 35vw - 2.2rem); } .fan__mark--b { top: calc(52% + 35vw + 1.2rem); }
  .fan__count { top: 12%; font-size: 56px; }
}
@media (prefers-reduced-motion: reduce) { .fan { display: none; } }

/* tablet: only the current section name in the bar */
@media (min-width: 768px) and (max-width: 1099px) {
  .hud__index { gap: 0; }
  .hud__index a { display: none; }
  .hud__index a.is-on { display: block; }
}
/* touch target for the menu tab */
@media (max-width: 767px) {
  .ui--tr#menuOpen { min-height: 44px; padding: 0 1.4rem; top: calc(var(--frame) + 0.5rem); right: calc(var(--frame) + 0.5rem); display: inline-flex; align-items: center; }
  .ui--tl { top: calc(var(--frame) + 1.4rem); }
}

/* the frame never gets smaller than a usable size (tablet widths shrink rem) */
@media (min-width: 768px) {
  :root { --frame: max(0.9rem, 8px); --rail: max(5.4rem, 44px); --bar: max(5.6rem, 50px); }
  .ui--tr#menuOpen { min-height: 32px; display: inline-flex; align-items: center; }
  .hud__frame { inset: var(--frame); }
  .chapter__card { inset: var(--frame); }
}
/* touch target for the menu close button */
.menu__close { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 1.2rem; }
@media (max-width: 767px) { .menu__close { top: calc(var(--frame) + 0.6rem); right: calc(var(--frame) + 0.6rem); } }

/* =========================================================
   v19 — ステートメント：輪になって踊る仲間（3D cypher）
   ========================================================= */
.statement__bg { background: radial-gradient(ellipse at 50% 70%, #0d1013 0%, #050607 70%); }
.statement__bg::after { background: radial-gradient(ellipse at center, transparent 55%, rgba(5, 6, 7, 0.55) 100%); }
.cypher { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.statement__text { position: relative; z-index: 2; transform-origin: 50% 50%; }
.statement__inner { place-items: start center; }
.statement__text { margin-top: 15vh; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.9); }
@media (max-width: 767px) { .statement__text { margin-top: 13vh; } }

/* =========================================================
   v20 — プロフィール写真の背景：全身のエングレービング
   ========================================================= */
.artist { position: relative; }
.artist__body {
  position: absolute; z-index: -1; pointer-events: none; user-select: none;
  left: 18%; top: -58%; width: 250%; height: auto; max-width: none;
  opacity: 0.42; mix-blend-mode: screen; filter: drop-shadow(0 0 30px rgba(174, 183, 192, 0.12));
}
.artist__frame { z-index: 1; }
@media (max-width: 767px) {
  .artist__body { left: -10%; top: -30%; width: 175%; opacity: 0.38; }
}

/* =========================================================
   v21 — 動画に流れる細い線（スキャンライン）
   2本：残光をひく細い光の線（速い）＋ほぼ見えない極細線（遅い）。
   transform だけで動かすので、描画の負荷はほぼ増えない。
   ========================================================= */
.vl {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden;
  border-radius: inherit; container-type: size;
}
.vl--under { z-index: -1; }
.vl::before, .vl::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; will-change: transform, opacity;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
/* the bright line (1.5px core) with a short afterglow above it */
.vl::before {
  height: 22px; margin-top: -22px;
  background: linear-gradient(180deg, transparent 0%, rgba(205, 225, 245, 0.06) 55%, rgba(225, 238, 255, 0.2) 88%, rgba(255, 255, 255, 0.95) 93%, rgba(255, 255, 255, 0.95) 100%);
  filter: drop-shadow(0 0 3px rgba(190, 220, 255, 0.55));
  animation: vlRun var(--vl-d, 5.4s) cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  animation-delay: var(--vl-o, 0s);
}
/* a 1px hairline that drifts slower */
.vl::after {
  height: 1px; background: rgba(238, 241, 243, 0.5);
  animation: vlRun calc(var(--vl-d, 5.4s) * 1.7) linear infinite;
  animation-delay: calc(var(--vl-o, 0s) * 1.3 - 1.7s);
}
@keyframes vlRun {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  10% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translate3d(0, calc(100cqh + 22px), 0); opacity: 0; }
}
@media (max-width: 767px) { .vl::before { height: 16px; margin-top: -16px; } }
@media (prefers-reduced-motion: reduce) { .vl { display: none; } }
/* mobile: titles that must stay on one line scale with the screen (11 characters + margins) */
@media (max-width: 767px) { .teach__title { font-size: min(3.4rem, calc((100vw - var(--gutter) * 2) / 11.4)); } }
/* contact: the ghost button sits on a busy background — give it a solid, readable plate */
.contact .btn--ghost { background: rgba(5, 6, 7, 0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-color: rgba(238, 241, 243, 0.55); }
.contact .btn--ghost i { opacity: 0.85; }

/* v22 — off-screen frames don't run their line animation */
.vl:not(.is-on)::before, .vl:not(.is-on)::after { animation-play-state: paused; visibility: hidden; }
/* v22 — phones: a soft frosted strip under the corner UI so the brand reads over busy video */
@media (max-width: 767px) {
  .topveil { position: fixed; left: 0; right: 0; top: 0; height: 64px; z-index: 55; pointer-events: none;
    -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
    -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent); mask-image: linear-gradient(180deg, #000 45%, transparent); }
  .is-loading .topveil { display: none; }
}
@media (min-width: 768px) { .topveil { display: none; } }

/* =========================================================
   v23 — stacked pages: the next block slides up over a held section
   ========================================================= */
.sheet {
  --cols: 8;
  position: relative; z-index: 4;
  background:
    linear-gradient(90deg, var(--c-line) 1px, transparent 1px) 0 0 / calc(100% / var(--cols)) 100%,
    var(--st-950);
  border-radius: calc(var(--sheet-r, 1) * 3.2rem) calc(var(--sheet-r, 1) * 3.2rem) 0 0;
  box-shadow: 0 -3rem 8rem rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(225, 235, 245, 0.18);
}
@media (max-width: 767px) { .sheet { --cols: 4; border-radius: calc(var(--sheet-r, 1) * 2rem) calc(var(--sheet-r, 1) * 2rem) 0 0; } }
/* the career page only needs to be solid for the screen that covers the chapter, then opens up again */
.career.sheet {
  background:
    linear-gradient(90deg, var(--c-line) 1px, transparent 1px) 0 0 / calc(100% / var(--cols)) 100svh repeat-x,
    linear-gradient(180deg, var(--st-950) 0, var(--st-950) 100svh, transparent calc(100svh + 40vh));
}
.reels__sheet { padding-top: 8rem; }
.reels__sheet .reels__knock { margin-top: 0; }
/* the reel rows land as one tilted sheet that fills the screen */
.sheet--rows { z-index: 5; min-height: 100svh; justify-content: center; padding: 8rem 0; background: var(--st-950); }
/* the held page underneath: rounds off, sinks back and dims */
.is-stacked { overflow: hidden; border-radius: calc(var(--cover, 0) * 3.2rem); }
.is-stacked::after {
  content: ""; position: absolute; inset: 0; z-index: 60; pointer-events: none;
  background: #000; opacity: calc(var(--cover, 0) * 0.8);
}
@media (max-width: 767px) { .is-stacked { border-radius: calc(var(--cover, 0) * 2rem); } }

/* =========================================================
   v24 — お問い合わせ：予約アプリを iPhone のホーム画面に追加する手順
   ========================================================= */
.howapp {
  position: relative; z-index: 2; margin-top: 5rem; margin-left: calc(100% / 8 * 4); max-width: 64rem;
  padding: 2.8rem 3.2rem 3rem; border-radius: 1.6rem;
  background: rgba(5, 6, 7, 0.8); border: 1px solid rgba(225, 235, 245, 0.16);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.howapp__k { display: flex; align-items: center; gap: 1.2rem; font-family: var(--f-jp); font-weight: 700; font-size: max(1.9rem, 15px); letter-spacing: 0.08em; color: #f2f5f7; }
.howapp__k span { font-family: var(--f-num); font-weight: 600; font-size: max(1.1rem, 10px); letter-spacing: 0.2em; color: var(--st-950); background: #e9eef2; border-radius: 99px; padding: 0.4rem 1.1rem; }
.howapp__steps { list-style: none; margin: 2.2rem 0 0; padding: 0; counter-reset: none; }
.howapp__steps li { display: grid; grid-template-columns: auto auto 1fr; align-items: start; column-gap: 1.6rem; padding: 1.8rem 0; border-top: 1px solid rgba(225, 235, 245, 0.12); }
.howapp__n { font-style: normal; font-family: var(--f-num); font-weight: 600; font-size: max(1.2rem, 11px); letter-spacing: 0.14em; color: var(--text-3, #8b96a1); padding-top: 0.6rem; }
.howapp__ic { width: max(3.2rem, 26px); height: max(3.2rem, 26px); fill: none; stroke: #e9eef2; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  padding: 0.5rem; border: 1px solid rgba(225, 235, 245, 0.3); border-radius: 0.9rem; box-sizing: content-box; }
.howapp__steps p { margin: 0; }
.howapp__steps b { display: block; font-family: var(--f-jp); font-weight: 500; font-size: max(1.6rem, 14px); line-height: 1.75; letter-spacing: 0.04em; color: #f2f5f7; }
.howapp__steps em { font-style: normal; font-weight: 700; color: #fff; background: rgba(225, 235, 245, 0.12); border-radius: 0.5rem; padding: 0.1rem 0.5rem; white-space: nowrap; }
.howapp__steps small { display: block; margin-top: 0.6rem; font-size: max(1.3rem, 12px); line-height: 1.7; letter-spacing: 0.04em; color: #b9c3cc; }
/* the panel reads as instructions: plain gothic, button names kept on one line */
.howapp__steps b, .howapp__steps small, .howapp__steps em { font-family: var(--f-sans); }
.howapp { max-width: 68rem; }
@media (max-width: 767px) {
  .howapp { margin-left: 0; max-width: none; padding: 2rem 1.6rem 2.2rem; }
  /* number sits above the icon so the text gets the full width */
  .howapp__steps li { grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; column-gap: 1.4rem; row-gap: 0.6rem; padding: 1.6rem 0; }
  .howapp__n { grid-column: 1; grid-row: 1; padding-top: 0; text-align: center; }
  .howapp__ic { grid-column: 1; grid-row: 2; }
  .howapp__steps p { grid-column: 2; grid-row: 1 / span 2; }
  .howapp__steps em { padding: 0.1rem 0.3rem; }
}


/* =========================================================
   v25 — 端末側の負荷を下げる（見た目はそのまま）
   ========================================================= */
/* Netlify が差し込む「Powered by Netlify」バッジは表示しない */
#nl-badge-frame, iframe[title="Powered by Netlify"] { display: none !important; }

@media (max-width: 767px), (pointer: coarse) {
  /* 画面全体のザラつき：巨大な層を動かし続けない（質感は同じまま静止） */
  .grain { inset: 0; animation: none; }
  /* 動画の上のすりガラス：毎フレームのぼかし計算をやめ、少し濃い地色で同じ読みやすさに */
  .teach__stat, .howapp, .contact__jp, .contact .btn--ghost { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .teach__stat { background: rgba(5, 6, 7, 0.78); }
  .howapp { background: rgba(5, 6, 7, 0.9); }
  .contact__jp { background: rgba(5, 6, 7, 0.82); }
  .contact .btn--ghost { background: rgba(5, 6, 7, 0.9); }
  .topveil { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(180deg, rgba(5, 6, 7, 0.72), rgba(5, 6, 7, 0)); }
}

/* =========================================================
   v26 — phones: recorded footage in place of the live 3D (js/lite.js)
   ========================================================= */
.is-lite .webgl, .is-lite .cypher, .is-lite .orbit-tag { display: none !important; }
.lite-hero { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; mix-blend-mode: screen; }
.lite-hero video { position: absolute; left: 0; width: 100vw; object-fit: cover; }
/* the line of logos: a band recorded at 52 % of an 844 px screen, sized by width like the 3D camera */
.lite-hero__band { top: calc(50% - 33vw); height: 75.2vw; }
/* converge → grow → shatter: the full screen, centred */
.lite-hero__scroll { top: calc(50% - 108.4vw); height: 216.8vw; }
.lite-orbit { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; }
.lite-cypher { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the recorded dancer sits on black: fade that black out toward the rim the way the live canvas's soft dark disc did */
.lite-dancer { object-fit: cover; background: none !important; border-radius: 0 !important;
  -webkit-mask-image: radial-gradient(closest-side, #000 74%, rgba(0, 0, 0, 0.55) 90%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 74%, rgba(0, 0, 0, 0.55) 90%, transparent 100%); }

/* v27 — the white pixel wipe into the chapter is gone */
.wipe { display: none !important; }
/* phones: blend only the small HUD marks, not a full-screen layer */
@media (max-width: 767px) {
  .hud { mix-blend-mode: normal; }
  .hud > * { mix-blend-mode: difference; }
}

/* v28 — looping effects pause while their block is off screen (js/lite.js adds .is-off) */
.is-off, .is-off::before, .is-off::after, .is-off img, .is-off i { animation-play-state: paused !important; }

/* v29 — phones: the 5 % film-grain sheet over the whole screen costs a full-screen blend every frame */
@media (max-width: 767px) { .grain { display: none; } }

/* v30 — phones: the blended hero layer shrinks to the band of logos while the shatter clip is not showing */
.lite-hero.is-band { inset: auto; left: 0; right: 0; top: calc(50% - 33vw); height: 75.2vw; }
.lite-hero.is-band .lite-hero__band { top: 0; }
.lite-hero.is-band .lite-hero__scroll { display: none; }

/* v31 — phones: the film grain moves again, cheaply: a sheet only 12 % larger than the screen
   (instead of 4×), shifted a few pixels five times a second on the compositor (the tile is a
   pre-rendered image, so nothing is repainted) */
@media (max-width: 767px) {
  .grain { display: block; inset: -6%; will-change: transform; animation: grainM 0.8s steps(4) infinite; }
  @keyframes grainM {
    0% { transform: translate3d(0, 0, 0); } 25% { transform: translate3d(-11px, 8px, 0); }
    50% { transform: translate3d(8px, -11px, 0); } 75% { transform: translate3d(-4px, 11px, 0); } 100% { transform: translate3d(0, 0, 0); }
  }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) { .grain { animation: none; } }

/* v32 — chapter: no pin, no growing card. The battle clips run past in one row. */
.chapter { height: auto; padding: 16rem 0 14rem; overflow: hidden; }
.chapter__title {
  margin: 0 calc(var(--gutter) * 2) 6rem;
  font-family: var(--f-head); font-weight: 600; font-feature-settings: "palt";
  font-size: max(8.4rem, 38px); line-height: 1.2; letter-spacing: 0.01em; color: #fff;
}
.chapter__title .ln { display: block; }
.chapter__title em { font-weight: 800; background: var(--metal-v); -webkit-background-clip: text; background-clip: text; color: transparent; }
.chapter__strip { position: relative; overflow: hidden; }
.chapter__track { display: flex; gap: 1.6rem; width: max-content; will-change: transform; }
.chapter__clip { position: relative; flex: none; height: max(46vh, 240px); margin: 0; overflow: hidden; border-radius: 1.4rem; background: #0b0d0f; }
.chapter__clip--w { aspect-ratio: 16 / 9; }
.chapter__clip--t { aspect-ratio: 9 / 16; }
.chapter__clip video { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(0.2) contrast(1.06) brightness(0.95); }
.chapter__lines { margin: 6rem calc(var(--gutter) * 2) 0; display: grid; gap: 0.9em; }
.chapter__lines p { margin: 0; font-family: var(--f-jp); font-weight: 500; font-size: max(2.2rem, 16px); letter-spacing: 0.1em; line-height: 1.7; color: #fff; }
.chapter__lines p:last-child { color: var(--st-200, #c9d1d8); }
@media (max-width: 767px) {
  .chapter { padding: 10rem 0 9rem; }
  .chapter__title { margin: 0 var(--gutter) 3.6rem; font-size: 3.6rem; }
  .chapter__track { gap: 1rem; }
  .chapter__clip { height: 230px; border-radius: 1rem; }
  .chapter__lines { margin: 3.6rem var(--gutter) 0; }
  .chapter__lines p { font-size: 15px; letter-spacing: 0.04em; }
}