/* ===== HISTORY ===== */
.hhero h1 { max-width: 11ch; }
.crumbs { position: absolute; top: 120px; left: var(--m); display: flex; gap: 10px; font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.crumbs a { color: var(--ink-2); }
.crumbs a:hover { color: var(--red); }
.hhero .phero__bg img { filter: brightness(.6) contrast(1.1); }

/* Quick answer */
.hquick { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px 6vw; align-items: start; }
.hquick .tag { grid-column: 1 / -1; }
.hquick__text { font-size: clamp(1.25rem, 1rem + .9vw, 1.875rem); line-height: 1.45; color: var(--ink-2); max-width: 40ch; }
.hquick__text strong { color: var(--ink); font-weight: 800; }
.hquick__facts { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.hquick__facts div { display: flex; justify-content: space-between; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.hquick__facts dt { color: var(--ink-3); font-size: .8125rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.hquick__facts dd { margin: 0; font-family: var(--display); font-size: 1.5rem; text-transform: uppercase; text-align: right; }
@media (max-width: 860px) { .hquick { grid-template-columns: 1fr; } }

/* Merge: 糸 + 東 → 糸東流 */
.merge { position: relative; height: 300vh; background: radial-gradient(60% 50% at 50% 45%, rgba(255,31,20,.12), transparent 70%), var(--bg); }
.merge__pin { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; overflow: hidden; }
.merge__stage { position: relative; width: min(1100px, 92vw); height: 52vh; display: flex; justify-content: center; align-items: center; gap: clamp(8px, 2vw, 30px); }
.mk { display: grid; justify-items: center; gap: 10px; text-align: center; }
.mk .kanji { font-size: clamp(7rem, 20vw, 20rem); line-height: 1; color: var(--ink); }
.mk--to .kanji { color: var(--red); text-shadow: 0 0 80px var(--red-glow); }
.mk--ryu .kanji { color: var(--red); }
.mk b { font-family: var(--display); font-weight: 400; font-size: clamp(1.25rem, 2vw, 2rem); text-transform: uppercase; letter-spacing: .04em; }
.mk small { color: var(--ink-3); font-size: .875rem; font-weight: 700; letter-spacing: .06em; max-width: 22ch; }
.merge__line { position: absolute; left: 10%; right: 10%; bottom: -10px; height: 2px; background: var(--red); box-shadow: 0 0 20px var(--red); transform: scaleX(0); }
.merge__cap { position: absolute; bottom: 9vh; left: 50%; translate: -50% 0; width: min(640px, 88vw); text-align: center; font-size: var(--fs-lead); color: var(--ink-2); line-height: 1.5; }
.merge__cap b { color: var(--ink); font-family: var(--kanji); font-weight: 900; }
@media (max-width: 760px) { .merge { height: 240vh; } .mk small { display: none; } .merge__stage { height: 44vh; } }

/* Timeline */
.tl { position: relative; background: var(--bg-2); }
.tl__pin { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 44px; padding: 110px 0 60px; overflow: hidden; }
.tl__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; }
.tl__head h2 { font-size: var(--fs-xl); }
.tl__year { display: grid; justify-items: end; gap: 12px; }
.tl__yr { font-family: var(--display); font-size: clamp(4rem, 10vw, 10rem); line-height: .85; color: transparent; -webkit-text-stroke: 1.5px var(--red); font-variant-numeric: tabular-nums; text-shadow: 0 0 40px rgba(255,31,20,.25); }
.tl__bar { width: min(320px, 40vw); height: 2px; background: var(--line); position: relative; overflow: hidden; }
.tl__bar b { position: absolute; inset: 0; background: var(--red); transform: scaleX(0); transform-origin: left; box-shadow: 0 0 10px var(--red); }
.tl__track { list-style: none; margin: 0; display: flex; gap: 24px; padding: 0 var(--m); width: max-content; will-change: transform; }
.tc { position: relative; width: clamp(280px, 26vw, 380px); flex: 0 0 auto; padding: 34px 30px 36px; border-radius: 22px; background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 14px; align-content: start; transition: box-shadow .5s var(--ease), transform .6s var(--ease); }
.tc::before { content: ""; position: absolute; left: 30px; top: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 2px var(--red), 0 0 16px var(--red-glow); }
.tc:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px rgba(255,31,20,.55), 0 30px 70px -30px var(--red-glow); }
.tc__y { font-family: var(--display); font-size: clamp(2.5rem, 4vw, 3.75rem); line-height: .9; color: var(--red); }
.tc h3 { font-size: 1.75rem; line-height: 1; }
.tc p { color: var(--ink-2); font-size: 1rem; line-height: 1.55; }
.tc--img { background: linear-gradient(180deg, rgba(7,7,7,.2), rgba(7,7,7,.92) 55%), url("../assets/masters-of-karate.jpg") center/cover; }
.tc--now { background: radial-gradient(120% 80% at 0% 0%, rgba(255,31,20,.28), transparent 60%), var(--bg-3); }
.tc--now .btn { justify-self: start; margin-top: 8px; }
.tl__track::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--line); }
.tl__track { position: relative; padding-top: 0; }
@media (max-width: 860px) {
  .tl__pin { padding: 90px 0 60px; }
  .tl__head { flex-direction: column; align-items: flex-start; }
  .tl__year { justify-items: start; }
  .tl__track { width: auto; flex-direction: column; padding: 0 var(--m); gap: 30px; border-left: 2px solid var(--line); margin-left: calc(var(--m) + 8px); padding-left: 28px; }
  .tl__track::before { display: none; }
  .tc { width: auto; }
  .tc::before { left: -38px; top: 34px; }
}

/* Archive */
.harch { display: grid; grid-template-columns: 1.2fr 1fr; gap: 6vw; align-items: center; }
.harch__fig { margin: 0; border-radius: 22px; aspect-ratio: 1089 / 760; }
.harch__fig img { filter: grayscale(1) contrast(1.15) brightness(.95); }
.harch__body { display: grid; gap: 24px; }
.harch__body h2 { font-size: var(--fs-l); }
.harch__body p { color: var(--ink-2); font-size: var(--fs-lead); max-width: 44ch; }
.harch__body .harch__credit { font-size: .8125rem; color: var(--ink-3); }
@media (max-width: 860px) { .harch { grid-template-columns: 1fr; } }

/* Lineage */
.lin__wrap { border-radius: 26px; background: radial-gradient(70% 60% at 50% 40%, rgba(255,31,20,.08), transparent 70%), var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); padding: clamp(20px, 4vw, 60px); overflow-x: auto; }
.lin__svg { width: 100%; min-width: 640px; height: auto; display: block; }
.lin__links path { stroke: rgba(244,239,232,.28); }
.lin__links .lin__dash { stroke-dasharray: 6 8; }
.ln-node rect { fill: var(--bg-3); stroke: rgba(244,239,232,.2); stroke-width: 1.5; transition: stroke .3s, fill .3s; }
.ln-node text { fill: var(--ink); font-family: var(--display); font-size: 22px; text-anchor: middle; text-transform: uppercase; letter-spacing: .02em; }
.ln-node text.s { fill: var(--ink-2); font-family: var(--body); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: none; }
.ln-node--key rect { fill: #1e0605; stroke: var(--red); }
.ln-node--zk rect { fill: var(--red); stroke: var(--red); }
.ln-node--zk text, .ln-node--zk text.s { fill: #fff; }
.ln-node:hover rect { stroke: var(--red); }
.lin__note { color: var(--ink-3); margin-top: 22px; font-size: .9375rem; }

/* Kata */
.kata { display: grid; grid-template-columns: 1fr 1.6fr; gap: 6vw; align-items: start; }
.kata__intro { position: sticky; top: 110px; display: grid; gap: 26px; }
.kata__intro h2 { font-size: var(--fs-xl); }
.kata__intro p { color: var(--ink-2); font-size: var(--fs-lead); max-width: 40ch; }
.kata__img { margin: 0; border-radius: 20px; aspect-ratio: 4 / 5; max-width: 340px; }
.kata__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.kcol { padding: 30px 26px; border-radius: 22px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.kcol h3 { font-size: 1.75rem; display: flex; align-items: center; gap: 12px; line-height: 1; }
.kcol h3 .kanji { font-size: 2.25rem; color: var(--red); }
.kcol__sub { color: var(--ink-3); font-size: .875rem; margin: 10px 0 18px; }
.kcol ul { list-style: none; margin: 0; padding: 0; }
.kcol li { padding: 11px 0; border-bottom: 1px solid var(--line); font-weight: 700; transition: color .3s, padding .4s var(--ease); }
.kcol li:hover { color: var(--red); padding-left: 8px; }
.kata__note { grid-column: 2; color: var(--ink-3); font-size: .9375rem; }
@media (max-width: 1100px) { .kata__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) { .kata { grid-template-columns: 1fr; } .kata__intro { position: static; } .kata__cols { grid-template-columns: 1fr; } .kata__note { grid-column: 1; } }

/* Modern */
.modern__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mc { padding: 40px 34px; border-radius: 24px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); transition: transform .6s var(--ease), box-shadow .5s; }
.mc:hover { transform: translateY(-8px); box-shadow: inset 0 0 0 1px rgba(255,31,20,.5), 0 30px 80px -30px var(--red-glow); }
.mc__n { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(3.5rem, 6vw, 5.5rem); line-height: .9; color: var(--red); text-shadow: 0 0 40px var(--red-glow); }
.mc h3 { font-size: 1.875rem; margin: 18px 0 12px; }
.mc p { color: var(--ink-2); }
@media (max-width: 860px) { .modern__grid { grid-template-columns: 1fr; } }

/* FAQ + sources */
.hsrc__list { list-style: none; margin: 24px 0 0; padding: 0; columns: 2; column-gap: 40px; }
.hsrc__list li { break-inside: avoid; padding: 10px 0; border-bottom: 1px solid var(--line); }
.hsrc__list a { color: var(--ink-2); font-size: .9375rem; }
.hsrc__list a:hover { color: var(--red); }
.hsrc__note { color: var(--ink-3); font-size: .875rem; margin-top: 20px; max-width: 70ch; }
@media (max-width: 760px) { .hsrc__list { columns: 1; } }

/* Lineage — phone version */
.lin__m { display: none; list-style: none; margin: 0; padding: 0; }
@media (max-width: 700px) {
  .lin__wrap { display: none; }
  .lin__m { display: grid; gap: 34px; position: relative; }
  .lin__m::before { content: ""; position: absolute; left: 50%; top: 20px; bottom: 20px; width: 2px; background: var(--line); }
  .lin__m li { position: relative; display: grid; justify-items: center; gap: 4px; padding: 22px 18px; border-radius: 22px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); text-align: center; }
  .lin__m span { font-family: var(--display); text-transform: uppercase; font-size: 1.375rem; line-height: 1.1; }
  .lin__m small { color: var(--ink-2); font-size: .8125rem; font-weight: 700; margin-bottom: 8px; }
  .lin__m small:last-child { margin-bottom: 0; }
  .lin__plus { color: var(--red); font-size: 1.75rem !important; }
  .lin__m .key { background: #1e0605; box-shadow: inset 0 0 0 1.5px var(--red); }
  .lin__m .zk { background: var(--red); box-shadow: 0 20px 50px -20px var(--red-glow); }
  .lin__m .zk small { color: #fff; }
}

/* archival hero photo */
.hhero .phero__bg img { object-position: 50% 35%; filter: grayscale(1) brightness(.5) contrast(1.15); }