/* ============================================================
   二十八結編法
   霞、和紙、糸、結び目をCSS/SVGだけで描く
============================================================ */
:root {
  --washi: #F5F3EC;
  --washi-blue: #EFF3F3;
  --kasumi: #E2E9EB;
  --byakugun: #A8C5CE;
  --asahanada: #7FA5BC;
  --ainezu: #5E7E90;
  --kon: #2E4A5C;
  --usuzumi: #454B50;
  --sumi: #2B2E31;
  --haizakura: #E5D7D4;
  --araishu: #E3CBB8;
  --usubeni: #DCC6CC;
  --fujinezu: #CFC8DA;
  --ito-1: #B9D4DA;
  --ito-2: #A4C6D2;
  --ito-3: #8FB5C7;
  --ito-4: #7AA3BC;
  --ito-5: #6690B0;
  --ito-6: #52789E;
  --ito-7: #3E5F8A;
  --font-serif: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --ease-flow: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-flow: 1100ms;
  --flow-color: var(--ito-1);
  --chapter-progress: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background:
    radial-gradient(ellipse at 24% 8%, rgba(255,255,255,0.58), transparent 42%),
    radial-gradient(ellipse at 78% 22%, rgba(168,197,206,0.22), transparent 38%),
    linear-gradient(180deg, var(--washi) 0%, var(--washi-blue) 46%, var(--washi) 100%);
  color: var(--usuzumi);
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 2.1;
  letter-spacing: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}

body::after {
  content: "";
  position: fixed;
  inset: -12vh -10vw;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 14% 34%, rgba(255,255,255,0.54), transparent 34%),
    radial-gradient(ellipse at 82% 58%, rgba(255,255,255,0.42), transparent 36%),
    radial-gradient(ellipse at 52% 88%, rgba(226,233,235,0.38), transparent 42%);
  opacity: 0.72;
}

a {
  color: inherit;
}

button {
  color: inherit;
  font: inherit;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 200;
  transform: translateY(-80px);
  background: var(--washi);
  border: 1px solid var(--asahanada);
  padding: 8px 12px;
}

.skip-link:focus {
  transform: none;
}

.thread-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 28px;
  color: var(--kon);
  transition: background 600ms var(--ease-flow), border-color 600ms var(--ease-flow);
}

.thread-nav.is-scrolled {
  background: rgba(245, 243, 236, 0.78);
  border-bottom: 1px solid rgba(168,197,206,0.32);
  backdrop-filter: blur(10px);
}

.thread-nav a {
  position: relative;
  text-decoration: none;
  font-size: 0.86rem;
}

.thread-nav__home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 36px;
  white-space: nowrap;
}

.thread-nav__logo {
  display: block;
  width: 46px;
  height: auto;
  filter: brightness(0) saturate(100%) invert(34%) sepia(17%) saturate(891%) hue-rotate(158deg) brightness(88%) contrast(88%);
  opacity: 0.58;
  transition: opacity 300ms var(--ease-flow), filter 300ms var(--ease-flow), transform 300ms var(--ease-flow);
}

.thread-nav__home:hover .thread-nav__logo,
.thread-nav__home:focus-visible .thread-nav__logo {
  opacity: 0.82;
  transform: translateY(-1px);
}

.thread-nav__items {
  display: flex;
  align-items: center;
  gap: 22px;
}

.thread-nav__items a::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--asahanada);
  opacity: 0;
  transition: opacity 300ms var(--ease-flow);
}

.thread-nav__items a.is-active::after {
  opacity: 1;
}

main,
.page-footer {
  position: relative;
  z-index: 1;
}

.page-section {
  position: relative;
  padding: 120px 24px;
}

.section-head {
  max-width: 1080px;
  margin: 0 auto 44px;
  color: var(--kon);
}

.section-head span {
  display: block;
  margin-bottom: 8px;
  color: var(--ainezu);
  font-size: 0.78rem;
}

.section-head h2 {
  margin: 0;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.6;
}

.hero-section {
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 84px 24px;
}

.kasumi {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 30% 42%, rgba(255,255,255,0.82), transparent 35%),
    radial-gradient(ellipse at 68% 56%, rgba(226,233,235,0.52), transparent 42%);
  opacity: 0.7;
  transform: translate3d(0,0,0);
}

.kasumi-a {
  animation: kasumiDriftA 72s linear infinite alternate;
}

.kasumi-b {
  opacity: 0.48;
  animation: kasumiDriftB 88s linear infinite alternate;
}

.hero-section__inner {
  position: relative;
  z-index: 1;
  min-height: 560px;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
  align-items: center;
  width: min(1040px, 100%);
}

.hero-yomi {
  align-self: end;
  color: var(--ainezu);
  font-size: 0.78rem;
  margin: 0 0 68px;
}

.hero-section h1 {
  margin: 0;
  color: var(--kon);
  font-size: 3.8rem;
  font-weight: 500;
  line-height: 1.55;
  writing-mode: vertical-rl;
  justify-self: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 3000ms var(--ease-flow), transform 3000ms var(--ease-flow);
}

.is-ready .hero-section h1 {
  opacity: 1;
  transform: translateY(0);
}

.hero-subtitle {
  align-self: end;
  max-width: 300px;
  color: var(--kon);
  font-size: 1rem;
  margin: 0 0 24px;
}

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.moon-dot {
  width: 9px;
  height: 9px;
  border: 1px solid var(--asahanada);
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
}

.moon-dot:nth-child(2) {
  background: var(--asahanada);
}

.concept-section {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.68), transparent 52%),
    linear-gradient(180deg, rgba(239,243,243,0.72), rgba(245,243,236,0.72));
}

.concept-copy {
  max-width: 760px;
  margin: 0 auto 56px;
  color: var(--kon);
  font-size: 1.24rem;
  line-height: 2.2;
}

.concept-copy p {
  margin: 0 0 18px;
}

.concept-grid {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 42px;
}

.concept-panel {
  border-left: 1px solid var(--kasumi);
  padding-left: 24px;
}

.concept-panel__head {
  margin-bottom: 22px;
}

.concept-panel__head span {
  color: var(--ainezu);
  font-size: 0.78rem;
}

.concept-panel__head h3 {
  margin: 4px 0 0;
  color: var(--kon);
  font-size: 1.35rem;
  font-weight: 500;
}

.thread-list {
  display: grid;
  gap: 18px;
}

.thread-item {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 18px;
  align-items: start;
}

.thread-stroke {
  display: block;
  position: relative;
  margin-top: 16px;
  height: 1px;
  background: var(--thread-color);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1200ms var(--ease-flow);
}

.thread-list--cols .thread-stroke {
  width: 1px;
  height: 54px;
  margin: 0 auto;
  transform-origin: top center;
  transform: scaleY(0);
}

.is-visible .thread-stroke,
.concept-section .reveal.is-visible .thread-stroke {
  transform: scaleX(1);
}

.thread-list--cols .is-visible .thread-stroke,
.concept-section .reveal.is-visible .thread-list--cols .thread-stroke {
  transform: scaleY(1);
}

.thread-item h4 {
  margin: 0 0 4px;
  color: var(--kon);
  font-size: 1.05rem;
  font-weight: 500;
}

.thread-item p {
  margin: 0;
  color: var(--ainezu);
  font-size: 0.9rem;
  line-height: 1.9;
}

.weave-section {
  padding-bottom: 140px;
}

.matrix {
  max-width: 1180px;
  margin: 0 auto;
}

.matrix-loading,
.matrix-error {
  color: var(--ainezu);
  padding: 40px 0;
}

.matrix-desktop {
  position: relative;
  display: block;
  aspect-ratio: 1000 / 620;
  min-height: 520px;
}

.matrix-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.thread-path {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0.42;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition:
    stroke-dashoffset 2100ms var(--ease-flow),
    opacity 420ms var(--ease-flow),
    stroke-width 420ms var(--ease-flow);
}

.thread-path.thread-col {
  transition-delay: var(--draw-delay, 0ms);
}

.thread-path.thread-row {
  transition-delay: var(--draw-delay, 500ms);
}

.weave-section.is-drawn .thread-path {
  stroke-dashoffset: 0;
}

.thread-path.is-muted {
  opacity: 0.15;
}

.thread-path.is-highlight {
  opacity: 0.86;
  stroke-width: 2.2;
}

.matrix-label {
  position: absolute;
  z-index: 3;
  color: var(--ainezu);
  font-size: 0.82rem;
  text-align: center;
  pointer-events: none;
}

.matrix-label--col {
  transform: translate(-50%, -50%);
  width: 86px;
}

.matrix-label--col strong,
.matrix-label--row strong {
  display: block;
  color: var(--kon);
  font-size: 0.9rem;
  font-weight: 500;
}

.matrix-label--col span {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-bottom: 4px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: rgba(245,243,236,0.62);
}

.matrix-label--row {
  transform: translate(-100%, -50%);
  width: 72px;
  text-align: right;
}

.matrix-buttons {
  position: absolute;
  inset: 0;
}

.knot {
  position: absolute;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.72);
  transition:
    opacity 800ms var(--ease-flow) var(--knot-delay, 0ms),
    transform 300ms var(--ease-flow),
    filter 300ms var(--ease-flow);
}

.weave-section.is-drawn .knot {
  opacity: 1;
  transform: scale(1);
}

.knot::before,
.knot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 300ms var(--ease-flow), height 300ms var(--ease-flow), opacity 300ms var(--ease-flow);
}

.knot::before {
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, #FDFCF8 0 28%, var(--row-color) 72%, rgba(255,255,255,0) 100%);
  opacity: 0.66;
}

.knot::after {
  width: 0;
  height: 0;
  background: radial-gradient(circle, var(--row-color) 0, rgba(255,255,255,0) 70%);
  opacity: 0;
}

.knot:hover::before,
.knot:focus-visible::before,
.knot.is-selected::before {
  width: 16px;
  height: 16px;
  opacity: 0.95;
}

.knot:hover::after,
.knot:focus-visible::after,
.knot.is-selected::after {
  width: 44px;
  height: 44px;
  opacity: 0.25;
}

.knot:focus-visible {
  outline: 1px solid var(--asahanada);
  outline-offset: 2px;
}

.knot.is-dimmed {
  opacity: 0.15;
}

.knot-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%) translateY(6px);
  min-width: 5em;
  color: var(--kon);
  font-size: 0.82rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms var(--ease-flow), transform 300ms var(--ease-flow);
}

.knot:hover .knot-tooltip,
.knot:focus-visible .knot-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.matrix-mobile {
  display: none;
}

.chapters-section {
  max-width: 1120px;
  margin: 0 auto;
  padding-left: 82px;
}

.chapter-flow {
  position: absolute;
  left: 34px;
  top: 60px;
  bottom: 80px;
  width: 40px;
  height: calc(100% - 140px);
  overflow: visible;
}

.chapter-flow path {
  fill: none;
  stroke: var(--flow-color);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.72;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--chapter-progress));
}

.chapter-section {
  position: relative;
  padding: 110px 0 90px;
}

.chapter-section + .chapter-section {
  border-top: 1px solid rgba(168,197,206,0.26);
}

.chapter-watermark {
  position: absolute;
  right: 0;
  top: 60px;
  color: var(--kon);
  font-size: 8rem;
  line-height: 1;
  opacity: 0.05;
  pointer-events: none;
}

.chapter-head {
  position: relative;
  max-width: 680px;
  margin-bottom: 44px;
}

.chapter-head span {
  color: var(--ainezu);
  font-size: 0.86rem;
}

.chapter-head h2 {
  margin: 8px 0 10px;
  color: var(--kon);
  font-size: 2rem;
  font-weight: 500;
}

.chapter-head p {
  margin: 0;
  color: var(--ainezu);
}

.jutsu-card-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.jutsu-card {
  border-left: 1px solid var(--row-color);
  background: rgba(255,255,255,0.2);
  border-radius: 6px;
  overflow: hidden;
}

.jutsu-card[open] {
  background: rgba(255,255,255,0.36);
}

.jutsu-card summary {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 18px;
  padding: 22px 22px 20px;
  cursor: pointer;
  list-style: none;
}

.jutsu-card summary::-webkit-details-marker {
  display: none;
}

.jutsu-card summary:focus-visible {
  outline: 1px solid var(--asahanada);
  outline-offset: -4px;
}

.jutsu-no {
  color: var(--ainezu);
  font-size: 0.86rem;
}

.jutsu-title h3 {
  margin: 0;
  color: var(--kon);
  font-size: 1.38rem;
  font-weight: 500;
}

.jutsu-title small {
  color: var(--ainezu);
  font-size: 0.78rem;
}

.jutsu-title p {
  margin: 12px 0 0;
  color: var(--usuzumi);
  font-size: 0.94rem;
}

.jutsu-detail {
  padding: 0 22px 24px 92px;
}

.jutsu-detail section + section {
  margin-top: 20px;
}

.jutsu-detail h4,
.detail-body h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  color: var(--kon);
  font-size: 0.94rem;
  font-weight: 500;
}

.jutsu-detail h4 span,
.detail-body h3 span {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--kasumi);
  border-radius: 50%;
  color: var(--asahanada);
}

.jutsu-detail h4 small,
.detail-body h3 small {
  color: var(--ainezu);
  font-size: 0.76rem;
  font-weight: 400;
}

.jutsu-detail p,
.detail-body p {
  margin: 0;
  font-size: 0.94rem;
}

.book-cta {
  position: relative;
  max-width: 840px;
  margin: 0 auto;
  padding: 54px 24px 70px;
  text-align: center;
  color: var(--kon);
}

.book-cta::before {
  content: "";
  display: block;
  width: min(320px, 64vw);
  height: 1px;
  margin: 0 auto 30px;
  background: linear-gradient(90deg, transparent, rgba(127,165,188,0.58), transparent);
}

.book-cta--between {
  margin-top: -26px;
  padding-bottom: 88px;
}

.book-cta--bottom {
  padding-top: 18px;
  padding-bottom: 92px;
}

.book-cta__kicker {
  margin: 0 0 10px;
  color: var(--ainezu);
  font-size: 0.78rem;
}

.book-cta h2 {
  margin: 0;
  color: var(--kon);
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.8;
}

.book-cta p:not(.book-cta__kicker) {
  max-width: 620px;
  margin: 12px auto 24px;
  color: var(--ainezu);
  font-size: 0.95rem;
}

.book-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 8px 20px;
  border: 1px solid rgba(127,165,188,0.58);
  border-radius: 4px;
  background: rgba(245,243,236,0.42);
  color: var(--kon);
  text-decoration: none;
  transition: border-color 300ms var(--ease-flow), background 300ms var(--ease-flow), transform 300ms var(--ease-flow);
}

.book-cta__button::after {
  content: "→";
  margin-left: 12px;
  color: var(--asahanada);
}

.book-cta__button:hover,
.book-cta__button:focus-visible {
  border-color: var(--asahanada);
  background: rgba(255,255,255,0.36);
  transform: translateY(-1px);
}

.conclusion-section {
  min-height: 84svh;
  display: grid;
  align-content: center;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(255,255,255,0.62), transparent 46%),
    linear-gradient(180deg, rgba(245,243,236,0.1), rgba(239,243,243,0.54));
}

.naming-copy,
.tagline-lines {
  max-width: 780px;
  margin: 0 auto;
}

.naming-copy {
  color: var(--kon);
  font-size: 1.16rem;
}

.naming-copy p {
  margin: 0 0 18px;
}

.tagline-lines {
  margin-top: 48px;
  color: var(--kon);
  font-size: 1.35rem;
  line-height: 2.2;
}

.tagline-lines span {
  display: block;
}

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--duration-flow) var(--ease-flow), transform var(--duration-flow) var(--ease-flow);
}

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

.detail-shell {
  position: fixed;
  inset: 0;
  z-index: 120;
  pointer-events: none;
}

.detail-shell.is-open {
  pointer-events: auto;
}

.detail-scrim {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(226,233,235,0.6);
  opacity: 0;
  backdrop-filter: blur(2px);
  transition: opacity 420ms var(--ease-flow);
}

.detail-shell.is-open .detail-scrim {
  opacity: 1;
}

.detail-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(480px, 40vw);
  height: 100%;
  overflow: auto;
  padding: 34px 36px 42px;
  border-left: 1px solid var(--row-color, var(--asahanada));
  background: rgba(245,243,236,0.96);
  transform: translateX(100%);
  transition: transform 560ms var(--ease-flow);
}

.detail-shell.is-open .detail-panel {
  transform: translateX(0);
}

.detail-close {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-left: auto;
  border: 1px solid var(--kasumi);
  border-radius: 50%;
  background: var(--washi);
  cursor: pointer;
}

.detail-close:focus-visible,
.detail-pager button:focus-visible {
  outline: 1px solid var(--asahanada);
  outline-offset: 2px;
}

.detail-yomi {
  margin: 4px 0 12px;
  color: var(--ainezu);
  font-size: 0.8rem;
}

.detail-panel h2 {
  margin: 0 0 18px;
  color: var(--kon);
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.5;
  writing-mode: vertical-rl;
  min-height: 6em;
}

.detail-band {
  display: inline-block;
  margin: 0 0 18px;
  padding: 4px 0;
  color: var(--ainezu);
  border-bottom: 1px solid var(--kasumi);
  font-size: 0.88rem;
}

.detail-definition {
  margin: 0 0 30px;
  color: var(--kon);
  font-size: 1.02rem;
}

.detail-body section + section {
  margin-top: 26px;
}

.detail-pager {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 34px;
}

.detail-pager button {
  min-height: 44px;
  border: 0;
  border-top: 1px solid var(--kasumi);
  background: transparent;
  color: var(--kon);
  cursor: pointer;
}

.moon-nav {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 70;
  display: flex;
  gap: 10px;
  transform: translateX(-50%);
  padding: 8px 10px;
  background: rgba(245,243,236,0.66);
  border: 1px solid rgba(168,197,206,0.36);
  border-radius: 999px;
  backdrop-filter: blur(10px);
}

.moon-button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.moon-button:focus-visible {
  outline: 1px solid var(--asahanada);
  outline-offset: 2px;
}

.moon-shape,
.footer-moons span {
  display: block;
  width: 12px;
  height: 12px;
  border: 1px solid var(--asahanada);
  border-radius: 50%;
  background: var(--moon-bg, transparent);
  transition: background 300ms var(--ease-flow), transform 300ms var(--ease-flow), border-color 300ms var(--ease-flow);
}

.moon-button.is-active .moon-shape {
  border-color: var(--kon);
  transform: scale(1.18);
}

.moon-phase-1 { --moon-bg: radial-gradient(circle at 50% 50%, transparent 0 45%, rgba(94,126,144,0.3) 48%); }
.moon-phase-2 { --moon-bg: linear-gradient(90deg, transparent 0 56%, var(--asahanada) 57%); }
.moon-phase-3 { --moon-bg: linear-gradient(90deg, transparent 0 48%, var(--asahanada) 49%); }
.moon-phase-4 { --moon-bg: var(--asahanada); }
.moon-phase-5 { --moon-bg: linear-gradient(90deg, var(--asahanada) 0 55%, transparent 56%); }
.moon-phase-6 { --moon-bg: linear-gradient(90deg, var(--asahanada) 0 44%, transparent 45%); }
.moon-phase-7 { --moon-bg: radial-gradient(circle at 50% 50%, transparent 0 45%, rgba(94,126,144,0.3) 48%); }

.page-footer {
  padding: 42px 24px 84px;
  text-align: center;
  color: var(--ainezu);
  font-size: 0.82rem;
}

.footer-moons {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}

.footer-moons span:nth-child(1) { --moon-bg: transparent; }
.footer-moons span:nth-child(2) { --moon-bg: linear-gradient(90deg, transparent 0 56%, var(--asahanada) 57%); }
.footer-moons span:nth-child(3) { --moon-bg: linear-gradient(90deg, transparent 0 48%, var(--asahanada) 49%); }
.footer-moons span:nth-child(4) { --moon-bg: var(--asahanada); }
.footer-moons span:nth-child(5) { --moon-bg: linear-gradient(90deg, var(--asahanada) 0 55%, transparent 56%); }
.footer-moons span:nth-child(6) { --moon-bg: linear-gradient(90deg, var(--asahanada) 0 44%, transparent 45%); }
.footer-moons span:nth-child(7) { --moon-bg: transparent; }

@keyframes kasumiDriftA {
  from { transform: translateX(-4%); }
  to { transform: translateX(5%); }
}

@keyframes kasumiDriftB {
  from { transform: translateX(5%) translateY(-2%); }
  to { transform: translateX(-5%) translateY(2%); }
}

@media (max-width: 960px) {
  .thread-nav {
    padding: 14px 18px;
  }

  .thread-nav__home {
    width: 46px;
  }

  .thread-nav__logo {
    width: 36px;
  }

  .thread-nav__items {
    gap: 14px;
  }

  .hero-section__inner {
    min-height: 520px;
    grid-template-columns: 1fr auto 1fr;
  }

  .hero-section h1 {
    font-size: 3.1rem;
  }

  .concept-grid,
  .jutsu-card-list {
    grid-template-columns: 1fr;
  }

  .matrix-desktop {
    display: none;
  }

  .matrix-mobile {
    display: grid;
    gap: 18px;
  }

  .mobile-band {
    border-left: 1px solid var(--col-color);
    padding: 18px 0 18px 18px;
  }

  .mobile-band h3 {
    margin: 0 0 14px;
    color: var(--kon);
    font-size: 1.14rem;
    font-weight: 500;
  }

  .mobile-knot-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  .mobile-knot {
    min-height: 76px;
    border: 1px solid rgba(168,197,206,0.42);
    border-radius: 6px;
    background: rgba(255,255,255,0.24);
    color: var(--kon);
    cursor: pointer;
  }

  .mobile-knot span {
    display: block;
    color: var(--ainezu);
    font-size: 0.74rem;
  }

  .detail-panel {
    top: auto;
    bottom: 0;
    width: 100%;
    height: 85vh;
    border-left: 0;
    border-top: 1px solid var(--row-color, var(--asahanada));
    transform: translateY(100%);
  }

  .detail-shell.is-open .detail-panel {
    transform: translateY(0);
  }
}

@media (max-width: 640px) {
  body {
    font-size: 15px;
  }

  .thread-nav {
    align-items: flex-start;
    gap: 10px;
  }

  .thread-nav__items {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .thread-nav a {
    font-size: 0.78rem;
  }

  .thread-nav__home {
    width: 36px;
    height: 30px;
  }

  .thread-nav__logo {
    width: 30px;
  }

  .book-cta {
    padding-left: 18px;
    padding-right: 18px;
  }

  .book-cta h2 {
    font-size: 1.2rem;
  }

  .page-section {
    padding: 88px 18px;
  }

  .section-head h2,
  .chapter-head h2 {
    font-size: 1.55rem;
  }

  .hero-section__inner {
    display: flex;
    min-height: 560px;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
  }

  .hero-yomi,
  .hero-subtitle {
    align-self: auto;
    margin: 0;
    text-align: center;
  }

  .hero-section h1 {
    font-size: 2.6rem;
  }

  .concept-copy,
  .naming-copy,
  .tagline-lines {
    font-size: 1rem;
  }

  .thread-item {
    grid-template-columns: 42px 1fr;
  }

  .mobile-knot-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chapters-section {
    padding-left: 42px;
  }

  .chapter-flow {
    left: 12px;
    width: 26px;
  }

  .chapter-watermark {
    font-size: 5rem;
  }

  .jutsu-card summary {
    grid-template-columns: 42px 1fr;
    padding: 18px;
  }

  .jutsu-detail {
    padding: 0 18px 20px 60px;
  }

  .detail-panel {
    padding: 24px 22px 34px;
  }

  .detail-panel h2 {
    writing-mode: horizontal-tb;
    min-height: 0;
    font-size: 2rem;
  }

  .moon-nav {
    gap: 6px;
    bottom: 12px;
  }

  .moon-button {
    width: 24px;
    height: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .reveal,
  .hero-section h1,
  .thread-stroke,
  .thread-list--cols .thread-stroke,
  .thread-path,
  .knot {
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
}