/* Shiai Club Kifissia. Kodokan editorial: ink, washi, one red.
   The engine (scrollcraft.css) is the mechanism; everything here is the page. */

:root {
  --ink:        #0f0d0c;
  --ink-2:      #1a1715;
  --ink-3:      #24201d;
  --bone:       #f2ece2;
  --bone-soft:  #bdb3a6;
  --washi:      #efe9df;
  --washi-2:    #e3dacb;
  --sumi:       #17130f;
  --sumi-soft:  #574e44;
  --red:        #e4211f;   /* logo red: fills, large type on ink */
  --red-hi:     #ff4a3d;   /* small red text on ink */
  --red-deep:   #b3161a;   /* red text on washi */
  --on-red:     #fff8f2;

  --sc-canvas: var(--ink);  --sc-surface: var(--ink-2);
  --sc-ink: var(--bone);    --sc-ink-soft: var(--bone-soft);
  --sc-accent: var(--red);  --sc-accent-ink: var(--on-red);
  --sc-font-display: "Fira Sans Extra Condensed", "Arial Narrow", system-ui, sans-serif;
  --sc-font-text: "Commissioner", system-ui, sans-serif;
  --kanji: "Yuji Syuku", "Hiragino Mincho ProN", "Yu Mincho", serif;

  --r: 3px;
  --belt-w: 14px;
  --belt-rail: 44px;

  --rank-white:  #f4f1ea;
  --rank-yellow: #f2c230;
  --rank-orange: #ee7a1d;
  --rank-green:  #2f8a4b;
  --rank-blue:   #2160c4;
  --rank-brown:  #6e4224;
  --rank-black:  #141110;
}

html { background: var(--ink); }
body {
  margin: 0; background: var(--ink); color: var(--bone);
  font-family: var(--sc-font-text); font-size: var(--sc-t-base);
  line-height: 1.65; letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
::selection { background: var(--red); color: var(--on-red); }

.skip {
  position: fixed; left: 56px; top: 12px; z-index: 100; padding: 0.6rem 1rem;
  background: var(--bone); color: var(--sumi); border-radius: var(--r);
  transform: translateY(-160%); transition: transform 160ms var(--sc-ease-out);
}
.skip:focus-visible { transform: none; }

:focus-visible { outline: 2px solid var(--red-hi); outline-offset: 3px; }
.ground-washi :focus-visible { outline-color: var(--red-deep); }

/* ---------------------------------------------------------------- type -- */
.display-xl, .display-lg, .display-md, .display-sm, .rei__title, .creed__line,
.shiai__word, .group__id, .group__time {
  font-family: var(--sc-font-display); font-weight: 900; text-transform: uppercase;
  letter-spacing: -0.01em; line-height: 0.92; margin: 0; text-wrap: balance;
}
.display-xl { font-size: clamp(3rem, 1.6rem + 5.4vw, 7rem); }
.display-lg { font-size: clamp(2.6rem, 1.6rem + 4vw, 5.6rem); }
.display-md { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.4rem); line-height: 0.96; }
.display-sm { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); font-weight: 800; line-height: 1; }
.sc-body { max-width: 58ch; }

/* Grounds hard-cut. Restate color with the tokens: inherited color does not
   follow a redefined token (taste.md). */
.ground-ink   { background: var(--ink); --sc-ink: var(--bone); --sc-ink-soft: var(--bone-soft); color: var(--bone); }
.ground-washi { background: var(--washi); --sc-ink: var(--sumi); --sc-ink-soft: var(--sumi-soft); color: var(--sumi); }
.ground-washi .sc-body { color: var(--sumi-soft); }

/* ------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.95rem 1.35rem; border: 0; border-radius: var(--r);
  font: 600 0.98rem/1 var(--sc-font-text); letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.btn--red { background: var(--red); color: var(--on-red); box-shadow: 0 6px 18px -8px rgb(160 14 12 / 0.7); }
@media (hover: hover) and (pointer: fine) { .btn--red:hover { background: #c81a18; } }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--block { width: 100%; }

.link {
  color: inherit; font-weight: 600; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 0.3em;
  transition: color 160ms var(--sc-ease-out);
}
.ground-washi .link:hover { color: var(--red-deep); }
.ground-ink .link:hover { color: var(--red-hi); }

/* ---------------------------------------------------------------- belt -- */
.belt { position: fixed; z-index: 70; left: 0; top: 0; bottom: 0; width: var(--belt-rail); pointer-events: none; }
.belt__track {
  position: absolute; left: 14px; top: 0; bottom: 0; width: var(--belt-w);
  background: color-mix(in oklab, var(--bone) 9%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--bone) 8%, transparent);
}
.belt__fill {
  position: absolute; inset: 0; transform-origin: 50% 0;
  transform: scaleY(var(--belt-p, 0));
  background-color: var(--rank, var(--rank-white));
  /* two stitch lines down the length, like a real obi */
  background-image:
    linear-gradient(90deg, transparent 3px, rgb(0 0 0 / 0.22) 3px 4px, transparent 4px calc(100% - 4px), rgb(0 0 0 / 0.22) calc(100% - 4px) calc(100% - 3px), transparent calc(100% - 3px)),
    repeating-linear-gradient(180deg, transparent 0 5px, rgb(255 255 255 / 0.06) 5px 6px);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.35), 2px 0 10px rgb(0 0 0 / 0.25);
  transition: background-color 520ms var(--sc-ease-out);
}
.belt__marks { list-style: none; margin: 0; padding: 0; }
.belt__marks li { position: absolute; left: 0; top: var(--at, 0%); }
.belt__marks a {
  pointer-events: auto; position: relative; display: block;
  width: var(--belt-rail); height: 28px; margin-top: -14px; color: var(--bone);
  text-decoration: none;
}
.belt__marks a::before {
  content: ""; position: absolute; left: 10px; top: 12px; width: 22px; height: 4px;
  background: var(--mark, var(--rank-white)); border-radius: 1px;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.45);
  transition: transform 160ms var(--sc-ease-out);
}
.belt__marks a[data-rank="white"]  { --mark: var(--rank-white); }
.belt__marks a[data-rank="yellow"] { --mark: var(--rank-yellow); }
.belt__marks a[data-rank="orange"] { --mark: var(--rank-orange); }
.belt__marks a[data-rank="green"]  { --mark: var(--rank-green); }
.belt__marks a[data-rank="blue"]   { --mark: var(--rank-blue); }
.belt__marks a[data-rank="brown"]  { --mark: var(--rank-brown); }
.belt__marks a[data-rank="black"]  { --mark: #3a3330; }
.belt__marks span {
  position: absolute; left: 40px; top: 3px; padding: 0.2rem 0.55rem;
  background: var(--ink); color: var(--bone); border-radius: var(--r);
  font: 600 0.78rem/1.4 var(--sc-font-text); white-space: nowrap;
  opacity: 0; transform: translateX(-4px); pointer-events: none;
  transition: opacity 160ms var(--sc-ease-out), transform 160ms var(--sc-ease-out);
  box-shadow: var(--sc-e2);
}
.belt__marks a:hover span, .belt__marks a:focus-visible span { opacity: 1; transform: none; }
.belt__marks a:hover::before, .belt__marks a:focus-visible::before { transform: scaleX(1.25); }
.belt__rank {
  position: absolute; left: 7px; bottom: 18px; margin: 0;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font: 600 0.7rem/1 var(--sc-font-text); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bone); mix-blend-mode: difference;
}
.belt__rank-name { display: inline-block; transition: opacity 200ms var(--sc-ease-out), transform 200ms var(--sc-ease-out); }
.belt__rank.is-ranking .belt__rank-name { opacity: 0; transform: translateY(-6px); }
.belt.is-tied .belt__fill { box-shadow: 0 0 0 1px rgb(242 236 226 / 0.3), 2px 0 10px rgb(0 0 0 / 0.25); }

/* --------------------------------------------------------------- plate -- */
.plate {
  position: fixed; z-index: 65; top: 14px; right: 14px;
  display: flex; align-items: center; gap: 0.35rem; padding: 0.35rem;
  background: color-mix(in oklab, var(--ink) 88%, transparent);
  border-radius: calc(var(--r) + 3px); box-shadow: var(--sc-edge), var(--sc-e2);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.plate__mark { display: flex; align-items: center; gap: 0.6rem; padding: 0.15rem 0.7rem 0.15rem 0.2rem; color: var(--bone); text-decoration: none; border-radius: var(--r); }
.plate__mark img { width: 34px; height: 37px; object-fit: contain; }
.plate__word { font: 800 1.05rem/1 var(--sc-font-display); text-transform: uppercase; letter-spacing: 0.02em; }
.plate__word em { font-style: normal; color: var(--bone-soft); font-weight: 600; }
.plate__lang {
  display: grid; place-items: center; min-width: 44px; height: 40px; padding: 0 0.6rem;
  color: var(--bone); font: 600 0.82rem/1 var(--sc-font-text); letter-spacing: 0.08em;
  text-decoration: none; border-radius: var(--r);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--bone) 18%, transparent);
  transition: background-color 160ms var(--sc-ease-out);
}
.plate__lang:hover { background: var(--ink-3); }
.plate__cta { padding: 0.8rem 1.1rem; font-size: 0.92rem; box-shadow: none; }

.plate__menu {
  display: grid; place-content: center; gap: 4px; width: 44px; height: 40px; padding: 0; border: 0; border-radius: var(--r);
  background: transparent; cursor: pointer; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--bone) 18%, transparent);
  transition: background-color 160ms var(--sc-ease-out);
}
.plate__menu span { display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--bone); transition: transform 200ms var(--sc-ease-out); }
.plate__menu:hover { background: var(--ink-3); }
.plate__menu[aria-expanded="true"] { background: var(--red); box-shadow: none; }
.menu {
  position: absolute; top: calc(100% + 8px); right: 0; width: min(23rem, calc(100vw - 20px));
  max-height: calc(100dvh - 90px); overflow-y: auto; padding: 0.5rem;
  background: color-mix(in oklab, var(--ink) 96%, transparent); border-radius: calc(var(--r) + 3px);
  box-shadow: var(--sc-edge), var(--sc-e3); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.menu[hidden] { display: none; }
.menu ol { list-style: none; margin: 0; padding: 0; }
.menu a {
  display: flex; align-items: baseline; gap: 0.9rem; min-height: 46px; padding: 0.7rem 0.9rem; border-radius: var(--r);
  color: var(--bone); text-decoration: none; font: 800 1.15rem/1.15 var(--sc-font-display); text-transform: uppercase; letter-spacing: 0.01em;
  transition: background-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out);
}
.menu a:hover, .menu a:focus-visible { background: var(--ink-3); }
.menu a.is-here { color: var(--red-hi); }
.menu__n { font: 600 0.72rem/1 var(--sc-font-text); letter-spacing: 0.1em; color: var(--bone-soft); font-variant-numeric: tabular-nums; }
.menu li:last-child a { margin-top: 0.3rem; background: var(--red); color: var(--on-red); }
.menu li:last-child .menu__n { color: var(--on-red); opacity: 0.8; }

.social {
  position: fixed; z-index: 65; top: 14px; left: calc(var(--belt-rail) + 10px);
  display: flex; gap: 0.25rem; margin: 0; padding: 0.35rem; list-style: none;
  background: color-mix(in oklab, var(--ink) 88%, transparent); border-radius: calc(var(--r) + 3px);
  box-shadow: var(--sc-edge), var(--sc-e2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.social a {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r); color: var(--bone);
  transition: background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out);
}
.social a:hover { background: var(--red); color: var(--on-red); }
.social a:active { transform: scale(0.95); }
.social svg { width: 20px; height: 20px; fill: currentColor; }
.social--menu { position: static; display: none; background: none; box-shadow: none; backdrop-filter: none; padding: 0.6rem 0.4rem 0.2rem; }

/* ----------------------------------------------------- 2b · THE HALL -- */
.hall__stage { background: var(--washi); overflow: hidden; --q: min(1, calc(var(--sc-p, 0) * 1.7)); }
.hall__frame {
  position: absolute; inset: 0; overflow: hidden;
  clip-path: inset(calc((1 - var(--q)) * 18%) calc((1 - var(--q)) * 26%) round calc((1 - var(--q)) * 10px));
}
.hall__frame picture, .hall__frame img { display: block; width: 100%; height: 100%; }
.hall__frame img {
  object-fit: cover; object-position: 50% 55%;
  transform: scale(calc(1.32 - var(--q) * 0.32)); transform-origin: 50% 60%;
  filter: brightness(calc(0.72 + var(--q) * 0.28));
}
.hall__shade {
  position: absolute; inset: 0; pointer-events: none; opacity: var(--q);
  background: linear-gradient(to top, rgb(11 10 9 / 0.86) 0%, rgb(11 10 9 / 0.45) 32%, transparent 58%),
              linear-gradient(to right, rgb(11 10 9 / 0.45) 0%, transparent 45%);
}
.hall__copy { position: absolute; left: calc(var(--belt-rail) + var(--sc-gutter) * 0.6); bottom: 9vh; color: var(--bone); max-width: 40rem; }
.hall__kanji { display: block; margin-bottom: 0.15em; font: 400 clamp(4rem, 9vw, 9rem)/1 var(--kanji); color: var(--bone); letter-spacing: 0.08em; }
.hall__copy .display-xl { color: var(--bone); }
.hall__copy p { margin: 1rem 0 0; font-size: var(--sc-t-lg); line-height: 1.45; color: var(--bone); max-width: 34ch; }
.about-sec { padding-block: clamp(6rem, 14vh, 10rem) clamp(5rem, 12vh, 9rem); }
.about-sec .about { margin-top: 0; }

/* ----------------------------------------------------------- 1 · REI -- */
.rei__stage { background: #0b0a09; overflow: hidden; }
.plane { position: absolute; will-change: transform; pointer-events: none; }
.rei__far { inset: -5%; z-index: 0;
  transform: translate3d(calc(var(--mx, 0) * -6px), calc(var(--sc-p, 0) * -2.5vh + var(--my, 0) * -4px), 0)
             scale(calc(1.1 - var(--sc-p, 0) * 0.07)); }
.rei__far img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; filter: blur(1.2px) brightness(0.86); }
.rei__sun {
  z-index: 1; right: 7vw; top: 11vh; width: min(34vw, 540px);
  transform: translate3d(calc(var(--mx, 0) * -12px), calc(var(--sc-p, 0) * -6vh + var(--my, 0) * -8px), 0);
}
.rei__logo { position: relative; z-index: 1; width: 100%; height: auto; filter: drop-shadow(0 30px 50px rgb(0 0 0 / 0.5)); }
.rei__logo--ink { position: absolute; inset: 0; z-index: 3; filter: drop-shadow(0 0 1px rgb(242 236 226 / 0.35)) drop-shadow(0 12px 18px rgb(0 0 0 / 0.45)); }
.rei__mark {
  position: absolute; z-index: 2; left: 50%; top: 37%; translate: -50% -50%; margin: 0;
  display: grid; justify-items: center; white-space: nowrap; color: var(--bone); pointer-events: none;
}
.rei__mark--sub { z-index: 4; top: 57%; }
.rei__mark--sub .rei__mark-small { margin-top: 0; text-shadow: 0 1px 2px rgb(0 0 0 / 0.9), 0 2px 14px rgb(0 0 0 / 0.75); }
.rei__mark-big {
  font: 900 calc(min(34vw, 540px) * 0.27)/0.8 "Unbounded", var(--sc-font-display); letter-spacing: 0.03em; margin-right: -0.03em;
  text-shadow: 0 6px 24px rgb(0 0 0 / 0.45);
}
.rei__mark-small {
  margin-top: 0.7em; font: 600 calc(min(34vw, 540px) * 0.052)/1 var(--sc-font-text); letter-spacing: 0.62em; margin-right: -0.62em;
  text-transform: uppercase; color: var(--bone); text-shadow: 0 2px 10px rgb(0 0 0 / 0.6);
}
.rei__scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse 62% 70% at 14% 34%, rgb(11 10 9 / 0.78) 0%, rgb(11 10 9 / 0.5) 45%, transparent 75%);
}
.rei__copy {
  position: absolute; z-index: 3; left: calc(var(--belt-rail) + var(--sc-gutter) * 0.6); top: 17vh;
  max-width: min(46rem, 52vw);
}
.rei__title { font-size: clamp(3rem, 1rem + 5.6vw, 6.9rem); color: var(--bone); }
.rei__sub { margin: 1.4rem 0 1.8rem; max-width: 36ch; color: var(--bone-soft); font-size: var(--sc-t-lg); line-height: 1.5; }
.rei__beat {
  position: absolute; z-index: 3; left: calc(var(--belt-rail) + var(--sc-gutter) * 0.6); top: 19vh; margin: 0;
  max-width: 13ch; font: 900 clamp(2.2rem, 1rem + 3.6vw, 4.6rem)/0.94 var(--sc-font-display);
  text-transform: uppercase; color: var(--bone); text-wrap: balance;
}
.rei__dust { inset: 0; z-index: 4; width: 100%; height: 100%; }
.rei__line {
  z-index: 5; left: 31vw; right: -3vw; bottom: -3vh; transform-origin: 30% 100%;
  transform: translate3d(calc(var(--mx, 0) * -16px), calc(var(--sc-p, 0) * -9vh), 0) scale(calc(1 + var(--sc-p, 0) * 0.07));
}
.rei__line img {
  width: 100%; height: auto; max-width: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 95%);
          mask-image: linear-gradient(to bottom, #000 78%, transparent 95%);
}
.rei__floor {
  z-index: 6; left: 0; right: 0; bottom: 0; height: 26vh;
  background:
    linear-gradient(to top, #0b0a09 0%, rgb(11 10 9 / 0.92) 34%, rgb(11 10 9 / 0.5) 64%, transparent 100%);
  transform: translate3d(0, calc((1 - var(--sc-p, 0)) * 5vh), 0);
}
.rei__fore {
  z-index: 7; right: 2.5vw; top: -18vh; width: 64px; height: 80vh; opacity: 0.92;
  transform: translate3d(calc(var(--mx, 0) * -34px), calc(var(--sc-p, 0) * -42vh), 0) rotate(7deg);
  filter: blur(6px);
}
.hang-belt {
  width: 100%; height: 100%; border-radius: 6px;
  background:
    linear-gradient(90deg, transparent 8px, rgb(255 255 255 / 0.08) 8px 10px, transparent 10px calc(100% - 10px), rgb(255 255 255 / 0.08) calc(100% - 10px) calc(100% - 8px), transparent 0),
    linear-gradient(90deg, #050404 0%, #2b2420 38%, #0a0908 70%, #3a2f28 96%);
  box-shadow: -6px 10px 30px rgb(0 0 0 / 0.55);
}

/* ------------------------------------------------------ 2 · DISCIPLINE -- */
.creed { padding-block: clamp(6rem, 15vh, 11rem) clamp(4rem, 10vh, 7rem); overflow: hidden; }
.creed__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sc-5);
  padding-left: calc(var(--sc-gutter) + var(--belt-rail) * 0.5);
}
.creed__line { grid-column: 1 / 11; font-size: clamp(2.8rem, 1rem + 6.4vw, 7.4rem); color: var(--sumi); }
.creed__l { display: block; }
.creed__red { color: var(--red-deep); margin-top: 0.08em; }
.creed__kanji {
  grid-column: 11 / 13; grid-row: 1 / 3; justify-self: end;
  writing-mode: vertical-rl; font: 400 clamp(5rem, 11vw, 11rem)/1 var(--kanji); color: var(--sumi);
}
.creed__body { grid-column: 5 / 11; margin-top: clamp(3rem, 8vh, 5rem); }
.creed__lede { font-size: var(--sc-t-lg); line-height: 1.55; color: var(--sumi) !important; }
.about {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sc-5); row-gap: clamp(3rem, 7vh, 5rem);
  margin-top: clamp(6rem, 14vh, 10rem); padding-left: calc(var(--sc-gutter) + var(--belt-rail) * 0.5);
}
.about__intro { grid-column: 1 / 8; }
.about__intro h2 { color: var(--sumi); margin-bottom: 2rem; }
.about__cols p { margin: 0; color: var(--sumi-soft); max-width: 60ch; }
.about__photo { grid-column: 8 / 13; margin: 0; align-self: center; }
.about__photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 34% 50%; border-radius: var(--r); box-shadow: 0 30px 60px -30px rgb(40 20 10 / 0.45); }
.pillars { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sc-7); margin: 0; }
.pillars > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.8rem; padding: 1.6rem 0 2rem; border-top: 1px solid color-mix(in oklab, var(--sumi) 16%, transparent); }
.pillars dt { font: 800 1.5rem/1.05 var(--sc-font-display); text-transform: uppercase; color: var(--red-deep); }
.pillars dd { margin: 0; color: var(--sumi-soft); font-size: var(--sc-t-sm); line-height: 1.65; max-width: 58ch; }
.creed__note {
  margin: 0; padding-top: 1rem; max-width: 52ch; font-size: var(--sc-t-base); font-weight: 700; line-height: 1.5;
  color: var(--sumi); border-top: 1px solid color-mix(in oklab, var(--sumi) 16%, transparent);
}

/* -------------------------------------------------------- 3 · TRAINING -- */
.training__stage { background: var(--ink); overflow: hidden; display: flex; align-items: center; }
.rail {
  display: flex; align-items: stretch; gap: clamp(1rem, 1.6vw, 1.6rem);
  padding: 0 calc(var(--sc-gutter) * 0.8) 0 calc(var(--belt-rail) + var(--sc-gutter) * 0.6);
  height: min(68vh, 640px);
}
.rail__lead { flex: none; width: min(32rem, 80vw); display: flex; flex-direction: column; justify-content: center; gap: 1.2rem; padding-right: 2vw; }
.rail__lead .sc-body { margin: 0; }
.finder { margin-top: 0.6rem; }
.finder label { display: block; margin-bottom: 0.5rem; font: 600 0.82rem/1 var(--sc-font-text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone-soft); }
.finder__row { display: flex; gap: 0.5rem; }
.finder input, .book input, .book select {
  min-width: 0; flex: 1; height: 52px; padding: 0 1rem; border-radius: var(--r);
  background: var(--ink-3); color: var(--bone); font: 500 1.05rem/1 var(--sc-font-text);
  border: 1px solid color-mix(in oklab, var(--bone) 16%, transparent);
  caret-color: var(--red-hi); transition: border-color 160ms var(--sc-ease-out);
}
.finder input::placeholder { color: color-mix(in oklab, var(--bone) 45%, transparent); }
.finder input:focus-visible, .book input:focus-visible, .book select:focus-visible { outline: 2px solid var(--red-hi); outline-offset: 1px; border-color: transparent; }
.finder__out { min-height: 1.6em; margin: 0.8rem 0 0; color: var(--bone); font-weight: 500; }
.finder__out strong { color: var(--red-hi); }

.group {
  position: relative; flex: none; width: clamp(15rem, 19vw, 18.5rem);
  display: flex; flex-direction: column; padding: 1.6rem 1.5rem;
  background: var(--ink-2); border-radius: var(--r); box-shadow: var(--sc-edge), var(--sc-e1);
  transition: box-shadow 240ms var(--sc-ease-out), background-color 240ms var(--sc-ease-out);
}
.group__pic { position: relative; margin: -1.6rem -1.5rem 1.1rem; height: 38%; flex: none; overflow: hidden; border-radius: var(--r) var(--r) 0 0; }
.group__pic::after { content: ""; position: absolute; inset: auto 0 0 0; height: 22%; background: linear-gradient(to top, var(--ink-2), transparent); pointer-events: none; }
.group__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.group__id { font-size: clamp(3.4rem, 4.6vw, 5rem); color: var(--red); line-height: 0.8; }
.group--adult .group__id { font-size: clamp(2.6rem, 3.4vw, 3.4rem); line-height: 0.9; }
.group__years { margin: 1.2rem 0 0; font: 600 1.05rem/1.3 var(--sc-font-text); color: var(--bone); }
.days { list-style: none; display: flex; gap: 6px; padding: 0; margin: auto 0 0.9rem; }
.days li {
  display: grid; place-items: center; width: 34px; height: 30px; border-radius: 2px;
  font: 600 0.72rem/1 var(--sc-font-text); color: color-mix(in oklab, var(--bone) 38%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--bone) 14%, transparent);
}
.days li.on { background: var(--bone); color: var(--sumi); box-shadow: none; }
.group__time { font-size: clamp(2.2rem, 2.6vw, 2.8rem); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--bone); }
.group__note { margin: 0.9rem 0 0; font-size: var(--sc-t-sm); color: var(--bone-soft); line-height: 1.5; }
.group__more {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 1rem; width: 100%;
  height: 44px; padding: 0 0.9rem; border: 0; border-radius: var(--r); cursor: pointer;
  background: var(--ink-3); color: var(--bone); font: 600 0.88rem/1 var(--sc-font-text);
  transition: background-color 160ms var(--sc-ease-out);
}
.group__more span:last-child { font-size: 1.2rem; color: var(--red-hi); }
.group__more:hover { background: #33292a; }
.group__more:active { transform: scale(0.98); }
.info { max-width: min(40rem, calc(100vw - 2rem)); width: 100%; padding: 0; border: 0; border-radius: calc(var(--r) + 3px); background: var(--ink-2); color: var(--bone); box-shadow: var(--sc-e3); }
.info::backdrop { background: rgb(10 9 8 / 0.75); }
.info__card { position: relative; padding: clamp(1.6rem, 4vw, 2.6rem); display: grid; gap: 1rem; justify-items: start; }
.info__id { margin: 0; font: 900 4.5rem/0.8 var(--sc-font-display); color: var(--red); text-transform: uppercase; }
.info h3 { color: var(--bone); }
.info__text { margin: 0; color: var(--bone-soft); line-height: 1.7; }
.info__close { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--ink-3); color: var(--bone); cursor: pointer; }
.info__close:hover { background: var(--red); }
.group.is-match { background: #2a1514; box-shadow: inset 0 0 0 2px var(--red), var(--sc-e2); }
.group.is-match::after {
  content: attr(data-match); position: absolute; top: 1.1rem; right: 1.1rem; padding: 0.3rem 0.55rem;
  background: var(--red); color: var(--on-red); border-radius: 2px;
  font: 600 0.72rem/1 var(--sc-font-text); letter-spacing: 0.08em; text-transform: uppercase;
}
.dojo-card { flex: none; width: clamp(24rem, 38vw, 36rem); margin: 0; display: flex; flex-direction: column; background: var(--ink-2); border-radius: var(--r); overflow: hidden; box-shadow: var(--sc-edge), var(--sc-e1); }
.dojo-card img { width: 100%; height: 56%; object-fit: cover; }
.dojo-card figcaption { padding: 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; }
.dojo-card p { margin: 0; color: var(--bone-soft); font-size: var(--sc-t-sm); }
.dojo-card .dojo-card__hours { color: var(--bone); font-weight: 600; }
.rail__end {
  flex: none; align-self: center; width: 17rem; margin: 0 0 0 2vw;
  font: 800 1.9rem/1.02 var(--sc-font-display); text-transform: uppercase; color: var(--bone);
}
@media (prefers-reduced-motion: no-preference) {
  .rail > :not(:first-child) {
    opacity: clamp(0.55, calc((var(--sc-p, 0) - (var(--i, 0) - 3) / 9) * 6 + 0.55), 1);
  }
}

/* ---------------------------------------------------------- 4 · FAMILY -- */
.family { padding-block: clamp(6rem, 14vh, 10rem); }
.family__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sc-5);
  padding-left: calc(var(--sc-gutter) + var(--belt-rail) * 0.5); align-items: start;
}
.family__copy { grid-column: 1 / 6; grid-row: 1; padding-top: 2rem; }
.family__copy h2 { color: var(--sumi); }
.family figure { margin: 0; }
.family img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r); }
.family figcaption { margin-top: 0.6rem; font: 600 0.8rem/1 var(--sc-font-text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sumi-soft); }
.family__a { grid-column: 6 / 13; grid-row: 1 / 3; }
.family__a img { aspect-ratio: 16 / 10; }
.family__b { grid-column: 2 / 6; grid-row: 2 / 4; margin-top: 3rem !important; }
.family__b img { aspect-ratio: 4 / 5; object-position: 40% 50%; }
.family__c { grid-column: 7 / 12; grid-row: 3; margin-top: 2rem !important; }
.family__c img { aspect-ratio: 3 / 2; }

/* ----------------------------------------------------------- 5 · SHIAI -- */
.shiai__stage { overflow: hidden; background: var(--red); }
.shiai__ground { position: absolute; inset: 0; z-index: 0; }
.shiai__ippon {
  position: absolute; left: calc(var(--belt-rail) + 2vw); top: 50%; translate: 0 -50%;
  writing-mode: vertical-rl; white-space: nowrap; font: 400 min(42vh, 30vw)/1 var(--kanji); color: var(--ink);
}
.shiai__results {
  position: absolute; z-index: 1; right: var(--sc-gutter); top: 50%; translate: 0 -50%;
  width: min(44rem, 54vw); display: grid; gap: 1rem;
}
.shiai__head, .shiai__intl { background: var(--ink); color: var(--bone); border-radius: var(--r); padding: clamp(1.4rem, 2.4vw, 2.2rem); box-shadow: 0 30px 60px -30px rgb(60 0 0 / 0.6); }
.shiai__label { margin: 0 0 0.6rem; font: 600 0.8rem/1 var(--sc-font-text); letter-spacing: 0.16em; text-transform: uppercase; color: var(--red-hi); }
.shiai__head .display-xl { font-size: clamp(2.6rem, 1.2rem + 3.6vw, 5rem); }
.shiai__sub { margin: 0.9rem 0 0; color: var(--bone-soft); max-width: 46ch; }
.medals { display: flex; gap: clamp(1.5rem, 3vw, 3rem); margin: 1.4rem 0 0; }
.medals div { display: flex; flex-direction: column-reverse; }
.medals dt { font: 600 0.78rem/1 var(--sc-font-text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone-soft); margin-top: 0.4rem; }
.medals dd { margin: 0; font: 900 clamp(3rem, 4.4vw, 4.6rem)/0.9 var(--sc-font-display); }
.medals .m-gold dd { color: #e8c15a; }
.medals .m-silver dd { color: #cfd3d6; }
.medals .m-bronze dd { color: #d49162; }
.shiai__intl-h { margin: 0 0 0.6rem; font: 600 0.8rem/1 var(--sc-font-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-soft); }
.ledger { list-style: none; margin: 0; padding: 0; }
.ledger li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-top: 1px solid color-mix(in oklab, var(--bone) 12%, transparent); font-size: var(--sc-t-sm); }
.ledger li span:last-child { color: var(--bone-soft); text-align: right; }

.shiai__mat {
  position: absolute; inset: 0; z-index: 5; background: var(--ink); transform-origin: 0% 100%;
  will-change: transform; box-shadow: 30px 0 80px rgb(0 0 0 / 0.55);
}
.shiai__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 45%; }
.shiai__photo { position: absolute; inset: 0; }
.shiai__mat-scrim { position: absolute; inset: 0; background: radial-gradient(ellipse 50% 45% at 12% 92%, rgb(11 10 9 / 0.8) 0%, transparent 100%), linear-gradient(to top, rgb(11 10 9 / 0.55) 0%, transparent 30%); }
.shiai__words { position: absolute; left: calc(var(--belt-rail) + var(--sc-gutter) * 0.6); bottom: 7vh; }
.shiai__word { position: absolute; left: 0; bottom: 0; width: min(62vw, 11ch); font-size: clamp(3rem, 1rem + 5.6vw, 7rem); color: var(--bone); }
.shiai__word--red { color: var(--red-hi); }
.shiai__flash { position: absolute; inset: 0; z-index: 6; background: var(--on-red); opacity: 0; pointer-events: none; }

/* --------------------------------------------------------- 6 · COACHES -- */
.coaches { padding-block: clamp(6rem, 14vh, 10rem); }
.coaches .sc-wrap { padding-left: calc(var(--sc-gutter) + var(--belt-rail) * 0.5); }
.coaches__h { margin-bottom: clamp(2.5rem, 6vh, 4rem); }
.coaches__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sc-5); }
.coach { display: grid; gap: 1.6rem; align-content: start; }
.coach--head { grid-column: 1 / 5; }
.coach--olympian { grid-column: 5 / 9; margin-top: clamp(3rem, 10vh, 7rem); }
.coach__frame { border-radius: var(--r); overflow: hidden; box-shadow: var(--sc-e3); background: var(--ink-2); }
.coach__frame img { width: 100%; height: min(58vh, 560px); object-fit: cover; object-position: 50% 18%; }
.coach__text p { margin: 0; color: var(--bone-soft); max-width: 52ch; }
.coach__text .display-md { color: var(--bone); }
.coach__rank { display: flex; align-items: center; gap: 0.7rem; font: 600 0.82rem/1 var(--sc-font-text) !important; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone) !important; }
.coach__olympic { font: 500 var(--sc-t-base)/1.5 var(--sc-font-text) !important; color: var(--bone-soft) !important; margin-top: 0.6rem !important; }
.bio summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px;
  font: 600 0.92rem/1 var(--sc-font-text); color: var(--bone); text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px;
}
.bio summary::-webkit-details-marker { display: none; }
.bio summary::after { content: "+"; color: var(--red-hi); font-size: 1.2rem; text-decoration: none; transition: transform 200ms var(--sc-ease-out); }
.bio[open] summary::after { transform: rotate(45deg); }
.bio summary:hover { color: #fff; }
.bio__body { display: grid; gap: 0.9rem; padding-top: 0.6rem; }
.bio__body p { margin: 0; color: var(--bone-soft); font-size: var(--sc-t-sm); line-height: 1.65; max-width: 60ch; }
.coach--third { grid-column: 9 / 13; margin-top: clamp(1.5rem, 4vh, 3rem); }
.ord { display: inline-block; font-size: 0.68em; line-height: 1; vertical-align: 0.42em; margin-left: 0.04em; text-transform: none; letter-spacing: 0; }
.belt-chip { display: inline-block; width: 34px; height: 8px; border-radius: 1px; background: var(--rank-black); box-shadow: 0 0 0 1px color-mix(in oklab, var(--bone) 35%, transparent); }
.belt-chip--rw { background: repeating-linear-gradient(90deg, var(--red) 0 8.5px, #f4f1ea 8.5px 17px); }

/* ---------------------------------------------------- 7 · GALLERY/NEWS -- */
.gallery { padding-block: clamp(6rem, 14vh, 10rem) clamp(5rem, 12vh, 8rem); }
.gallery .sc-wrap { padding-left: calc(var(--sc-gutter) + var(--belt-rail) * 0.5); }
.gallery h2 { color: var(--sumi); }
.gallery__head, .news__head { display: flex; align-items: end; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: 2rem; }
.filters { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.filter {
  height: 44px; padding: 0 1.05rem; border: 0; border-radius: var(--r); cursor: pointer;
  background: transparent; color: var(--sumi); font: 600 0.9rem/1 var(--sc-font-text);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sumi) 22%, transparent);
  transition: background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out);
}
.filter:hover { background: var(--washi-2); }
.filter[aria-pressed="true"] { background: var(--sumi); color: var(--washi); box-shadow: none; }
.filter:active { transform: scale(0.97); }

.photos { list-style: none; margin: 0; padding: 0; columns: 4 15rem; column-gap: var(--sc-4); }
.ph { break-inside: avoid; margin-bottom: var(--sc-4); }
.ph[hidden], .ph.is-extra:not(.is-shown) { display: none; }
.ph__btn {
  display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in; overflow: hidden;
  border-radius: var(--r); background: var(--washi-2);
}
.ph__btn img { width: 100%; height: auto; transition: transform 420ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .ph__btn:hover img { transform: scale(1.035); } }
.ph__btn:focus-visible { outline: 2px solid var(--red-deep); outline-offset: 3px; }
.photos__more { display: flex; justify-content: center; margin-top: 1.6rem; }
.photos__more[hidden] { display: none; }
.btn--ghost { background: transparent; color: var(--sumi); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sumi) 30%, transparent); }
.btn--ghost:hover { background: var(--washi-2); }

.lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgb(10 9 8 / 0.96); color: var(--bone);
}
.lightbox::backdrop { background: rgb(10 9 8 / 0.7); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox__fig { margin: 0; display: grid; justify-items: center; gap: 0.9rem; padding: 4.5rem 5rem 3.5rem; }
.lightbox__img { max-width: min(1400px, calc(100vw - 10rem)); max-height: calc(100dvh - 10rem); width: auto; height: auto; border-radius: var(--r); box-shadow: var(--sc-e3); }
.lightbox__cap { font: 600 0.95rem/1.4 var(--sc-font-text); color: var(--bone); text-align: center; max-width: 60ch; }
.lightbox__btn {
  position: fixed; display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%;
  background: var(--ink-3); color: var(--bone); font: 400 1.8rem/1 var(--sc-font-text); cursor: pointer;
  box-shadow: var(--sc-edge); transition: background-color 160ms var(--sc-ease-out);
}
.lightbox__btn:hover { background: var(--red); }
.lightbox__btn:active { transform: scale(0.95); }
.lightbox__close { top: 18px; right: 18px; font-size: 1.2rem; }
.lightbox__prev { left: 18px; top: 50%; translate: 0 -50%; }
.lightbox__next { right: 18px; top: 50%; translate: 0 -50%; }
.lightbox__count { position: fixed; top: 32px; left: 24px; margin: 0; font: 600 0.8rem/1 var(--sc-font-text); letter-spacing: 0.12em; color: var(--bone-soft); font-variant-numeric: tabular-nums; }

.news { margin-top: clamp(5rem, 12vh, 8rem); }
.news h2 { color: var(--sumi); }
.news__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.2rem var(--sc-5); }
.news__list li { display: grid; align-content: start; gap: 0.6rem; padding-top: 1rem; border-top: 1px solid color-mix(in oklab, var(--sumi) 16%, transparent); }
.news__list img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); }
.news__list li.is-extra:not(.is-shown) { display: none; }
.news__list li[data-noimg] { padding: 1.3rem 1.3rem 1.5rem; border-top: 0; border-radius: var(--r); background: var(--washi-2); align-content: start; }
.news__list li[data-noimg] p { font-size: var(--sc-t-base); }
.news__more { display: flex; justify-content: center; margin-top: 2.2rem; }
.news__more[hidden] { display: none; }
.news__list time { font: 600 0.9rem/1.4 var(--sc-font-text); font-variant-numeric: tabular-nums; color: var(--red-deep); }
.news__list p { margin: 0; color: var(--sumi); font-size: var(--sc-t-sm); line-height: 1.55; }

/* ------------------------------------------------------------- 9 · FAQ -- */
.faq { padding-block: clamp(6rem, 14vh, 10rem); }
.faq__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sc-5); padding-left: calc(var(--sc-gutter) + var(--belt-rail) * 0.5); }
.faq__h { grid-column: 1 / 5; align-self: start; position: sticky; top: 16vh; }
.faq__list { grid-column: 5 / 13; }
.faq details { border-top: 1px solid color-mix(in oklab, var(--bone) 14%, transparent); }
.faq details:last-child { border-bottom: 1px solid color-mix(in oklab, var(--bone) 14%, transparent); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1.5rem; align-items: center;
  padding: 1.25rem 0; font: 600 var(--sc-t-lg)/1.35 var(--sc-font-text); color: var(--bone);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background: linear-gradient(var(--red-hi), var(--red-hi)) center / 100% 2px no-repeat, linear-gradient(var(--red-hi), var(--red-hi)) center / 2px 100% no-repeat;
  transition: transform 200ms var(--sc-ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: #fff; }
.faq details p { margin: 0 0 1.4rem; max-width: 62ch; color: var(--bone-soft); }

/* ----------------------------------------------------------- 10 · CLOSE -- */
.close { position: relative; overflow: hidden; padding-top: clamp(6rem, 16vh, 11rem); }
.close__photo { position: absolute; top: 0; right: 0; width: 62%; height: 74%; }
.close__img {
  width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%;
  filter: saturate(0.55) brightness(0.55);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 45%), linear-gradient(to top, transparent 0%, #000 40%);
          mask-image: linear-gradient(to right, transparent 0%, #000 45%), linear-gradient(to top, transparent 0%, #000 40%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.close__grid {
  position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sc-5);
  padding-left: calc(var(--sc-gutter) + var(--belt-rail) * 0.5); align-items: start;
}
.close__lead { grid-column: 1 / 7; }
.close__lead .display-xl { max-width: 11ch; }
.close__body { margin: 1.4rem 0 2rem; color: var(--bone-soft); }
.knot { display: block; width: min(100%, 480px); height: auto; margin: 1.6rem 0 0; overflow: visible; --k: 0; }
.knot path, .knot rect { fill: none; stroke-linecap: butt; }
.knot__band, .knot__tail { stroke: #231e1b; stroke-width: 22; }
.knot__band { stroke-dasharray: 240; stroke-dashoffset: calc(240 - var(--k) * 240); }
.knot__tail { stroke-width: 20; stroke-dasharray: 80; stroke-dashoffset: calc(80 - clamp(0, var(--k) * 2.4 - 1.4, 1) * 80); }
.knot__stitch { stroke: rgb(242 236 226 / 0.28); stroke-width: 1; stroke-dasharray: 5 4; opacity: clamp(0, var(--k) * 3 - 2, 1); }
.knot__knot {
  fill: #1b1715; stroke: rgb(242 236 226 / 0.35); stroke-width: 1.2;
  transform-box: fill-box; transform-origin: center;
  transform: scale(clamp(0, var(--k) * 2.4 - 1.2, 1)) rotate(calc((1 - clamp(0, var(--k) * 2.4 - 1.2, 1)) * -45deg));
}
.knot { filter: drop-shadow(0 1px 0 rgb(242 236 226 / 0.18)) drop-shadow(0 10px 14px rgb(0 0 0 / 0.5)); }
.contact { scroll-margin-top: 96px; list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.contact li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; font-size: var(--sc-t-sm); }
.contact li > span:first-child { color: var(--bone-soft); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.75rem; padding-top: 0.2em; }
.contact a { color: var(--bone); text-underline-offset: 0.25em; }
.contact a:hover { color: var(--red-hi); }

.book {
  grid-column: 8 / 13; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  padding: clamp(1.4rem, 2.4vw, 2.2rem); background: var(--ink-2); border-radius: calc(var(--r) + 2px);
  box-shadow: var(--sc-edge), var(--sc-e3); align-self: end;
}
.book h3 { grid-column: 1 / -1; margin-bottom: 0.4rem; color: var(--bone); }
.field { grid-column: 1 / -1; display: grid; gap: 0.45rem; }
.field--half { grid-column: span 1; }
.field label { font: 600 0.78rem/1.2 var(--sc-font-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone-soft); }
.book select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--bone) 50%), linear-gradient(135deg, var(--bone) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.4rem; }
.book [aria-invalid="true"] { border-color: var(--red-hi); }
.book .btn { grid-column: 1 / -1; margin-top: 0.4rem; height: 56px; }
.book__note { grid-column: 1 / -1; margin: 0; font-size: 0.85rem; color: var(--bone-soft); }
.book__note.is-error { color: var(--red-hi); }

.foot {
  position: relative; display: flex; align-items: center; gap: 1.2rem 2rem; flex-wrap: wrap;
  margin-top: clamp(4rem, 10vh, 7rem); padding-block: 1.6rem 2.2rem;
  padding-left: calc(var(--sc-gutter) + var(--belt-rail) * 0.5);
  border-top: 1px solid color-mix(in oklab, var(--bone) 12%, transparent);
  font-size: 0.82rem; color: var(--bone-soft);
}
.foot p { margin: 0; }
.foot__logo { width: 30px; height: auto; }
.foot__links { display: flex; gap: 1.2rem; margin-left: auto !important; }
.foot__links a { color: var(--bone); }
.foot__legal { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; align-items: center; font-size: 0.78rem; color: var(--bone-soft); }
.foot__legal span { margin-right: auto; }
.foot__legal a { color: var(--bone-soft); }
.foot__legal a:hover { color: var(--bone); }
.book__privacy { grid-column: 1 / -1; margin: 0; font-size: 0.8rem; line-height: 1.5; color: var(--bone-soft); }
.book__privacy a { color: var(--bone); }

/* ------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .plane { transform: none !important; }
  .hall__stage { --q: 1; }
  .belt__fill { transition: none; }
}

/* --------------------------------------------------------------- phone -- */
@media (max-width: 860px) {
  :root { --belt-rail: 0px; }
  .belt { right: 0; bottom: auto; width: auto; height: 6px; }
  .belt__track { left: 0; right: 0; top: 0; width: auto; height: 6px; }
  .belt__fill { transform-origin: 0 50%; transform: scaleX(var(--belt-p, 0)); background-image: repeating-linear-gradient(90deg, transparent 0 5px, rgb(0 0 0 / 0.14) 5px 6px); }
  .belt__marks, .belt__rank { display: none; }
  .plate { top: 12px; right: 10px; left: 10px; justify-content: space-between; }
  .plate__word { display: none; }
  .plate__mark { padding-right: 0.2rem; margin-right: auto; }
  .plate__cta { padding: 0.75rem 0.8rem; font-size: 0.84rem; }
  .plate__menu { width: 42px; }
  .menu { width: 100%; }

  .rei__copy { left: var(--sc-gutter); right: var(--sc-gutter); top: 13svh; max-width: none; }
  .rei__title { font-size: clamp(2.3rem, 9.6vw, 3.4rem); }
  .rei__sub { font-size: var(--sc-t-base); margin: 1rem 0 1.3rem; }
  .rei__beat { left: var(--sc-gutter); top: 15svh; font-size: clamp(2rem, 9vw, 3rem); }
  .rei__sun { width: 54vw; right: 9vw; top: auto; bottom: 25svh; }
  .rei__mark-big { font-size: calc(54vw * 0.25); }
  .rei__mark-small { font-size: calc(54vw * 0.05); letter-spacing: 0.5em; margin-right: -0.5em; }
  .social { display: none; }
  .social--menu { display: flex; }
  .hall__copy { left: var(--sc-gutter); right: var(--sc-gutter); bottom: 7svh; }
  .rei__line { left: -52vw; right: auto; width: 190vw; bottom: -1svh; }
  .rei__fore { display: none; }
  .rei__scrim { background: linear-gradient(to bottom, rgb(11 10 9 / 0.8) 0%, rgb(11 10 9 / 0.55) 45%, transparent 70%); }

  .creed__grid, .family__grid, .coaches__grid, .faq__grid, .close__grid { grid-template-columns: minmax(0, 1fr); padding-left: var(--sc-gutter); }
  .creed__line, .creed__body, .family__copy, .family__a, .family__b, .family__c,
  .coach--head, .coach--olympian, .faq__h, .faq__list, .close__lead, .book { grid-column: 1 / -1; grid-row: auto; }
  .creed__kanji { grid-column: 1 / -1; grid-row: 1; justify-self: start; writing-mode: horizontal-tb; font-size: 4.5rem; margin-bottom: 1.5rem; }
  .creed__body { margin-top: 2.5rem; }
  .family__b, .family__c { margin-top: 0 !important; }
  .family__b { width: 72%; }
  .family__c { width: 86%; justify-self: end; }
  .coach--olympian { margin-top: 3rem; }
  .coach--third { grid-column: 1 / -1; margin-top: 3rem; }
  .about, .pillars { grid-template-columns: minmax(0, 1fr); padding-left: var(--sc-gutter); }
  .about { padding-left: var(--sc-gutter); }
  .about__intro, .about__photo, .pillars { grid-column: 1 / -1; }
  .pillars > div { grid-template-columns: 1fr; gap: 0.5rem; }
  .faq__h { position: static; }
  .rail { height: 74svh; padding-left: var(--sc-gutter); }
  .rail__lead { width: 84vw; }
  .group { width: 72vw; }
  .dojo-card { width: 84vw; }
  .photos { columns: 2; column-gap: 0.6rem; }
  .ph { margin-bottom: 0.6rem; }
  .news__list { grid-template-columns: 1fr; }
  .lightbox__fig { padding: 4.5rem 0.75rem 6rem; }
  .lightbox__img { max-width: calc(100vw - 1.5rem); max-height: calc(100dvh - 12rem); }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 18px; translate: none; }
  .lightbox__next { right: 18px; } .lightbox__prev { left: 18px; }
  .shiai__words { left: var(--sc-gutter); }
  .shiai__ippon { left: 4vw; top: 12svh; translate: none; writing-mode: horizontal-tb; font-size: 30vw; }
  .shiai__results { left: var(--sc-gutter); right: var(--sc-gutter); width: auto; top: auto; bottom: 3svh; translate: none; gap: 0.6rem; }
  .shiai__intl { display: none; }
  .shiai__words { left: var(--sc-gutter); bottom: 8svh; }
  .shiai__photo img { position: absolute; left: 0; top: 16svh; width: 100%; height: auto; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 82%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 82%, transparent 100%); }
  .close__photo { width: 100%; height: 42svh; }
  .close__img { -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 60%); mask-image: linear-gradient(to top, transparent 0%, #000 60%); }
  .close { padding-top: 22svh; }
  .contact li { grid-template-columns: 1fr; gap: 0.2rem; }
  .book { grid-template-columns: 1fr; }
  .field--half { grid-column: 1 / -1; }
  .foot__links { margin-left: 0 !important; }
}