:root {
  --kyoto-ink: #173f48;
  --kyoto-ink-soft: #48666d;
  --kyoto-paper: #fffdf8;
  --kyoto-line: #cdd8d5;
  --kyoto-north: #d9eee7;
  --kyoto-south: #f7d8ca;
  --kyoto-coral: #f26a50;
  --kyoto-gold: #c9a24a;
}

.kyoto-station-lp,
.kyoto-purpose-article {
  color: var(--kyoto-ink);
  display: grid;
  gap: clamp(2.8rem, 6vw, 6.8rem);
  min-width: 0;
}

.kyoto-station-lp h2,
.kyoto-purpose-article h2,
.kyoto-station-lp h3,
.kyoto-purpose-article h3 {
  text-wrap: balance;
}

.kyoto-station-lp p,
.kyoto-purpose-article p,
.kyoto-station-lp li,
.kyoto-purpose-article li {
  text-wrap: pretty;
}

.kyoto-station-mode {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}

.kyoto-station-mode a {
  background: var(--kyoto-paper);
  border: 1px solid var(--kyoto-line);
  border-radius: 1.1rem;
  color: var(--kyoto-ink);
  display: grid;
  gap: .35rem;
  min-height: 6.5rem;
  padding: 1.2rem;
  text-decoration: none;
}

.kyoto-station-mode a:hover {
  border-color: var(--kyoto-ink);
  transform: translateY(-2px);
}

.kyoto-station-mode strong { font-size: 1.03rem; }
.kyoto-station-mode small { color: var(--kyoto-ink-soft); line-height: 1.5; }

.kyoto-direct-answer {
  align-items: start;
  background: var(--kyoto-north);
  border: 2px solid var(--kyoto-ink);
  border-radius: clamp(1.2rem, 3vw, 2.2rem);
  box-shadow: .55rem .55rem 0 rgba(23, 63, 72, .13);
  display: grid;
  gap: clamp(1.25rem, 4vw, 3rem);
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  padding: clamp(1.5rem, 4vw, 3.4rem);
}

.kyoto-direct-answer h2 {
  font-family: "Fraunces", "Noto Sans JP", serif;
  font-size: clamp(1.9rem, 4.4vw, 3.8rem);
  line-height: 1.03;
  margin: .55rem 0 0;
}

.kyoto-direct-answer > p {
  font-size: clamp(1.05rem, 1.7vw, 1.28rem);
  line-height: 1.78;
  margin: 0;
}

.kyoto-orientation {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(14rem, .72fr) minmax(0, 1.28fr);
}

.kyoto-orientation > div:first-child {
  align-self: center;
  max-width: 33rem;
}

.kyoto-orientation h2,
.kyoto-purpose-library h2,
.kyoto-decisions h2,
.kyoto-station-story h2,
.kyoto-fingerprint h2,
.kyoto-sequence h2,
.kyoto-scenarios h2,
.kyoto-considerations h2,
.kyoto-recovery h2 {
  font-family: "Fraunces", "Noto Sans JP", serif;
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  line-height: 1.12;
  margin: .45rem 0 1rem;
}

.kyoto-orientation__diagram {
  display: grid;
  gap: .75rem;
  min-width: 0;
  position: relative;
}

.kyoto-orientation__diagram::before,
.kyoto-orientation__diagram::after {
  background: var(--kyoto-ink);
  content: "";
  height: .8rem;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 2px;
  z-index: 2;
}

.kyoto-orientation__diagram::before { top: calc(33.333% - .2rem); }
.kyoto-orientation__diagram::after { bottom: calc(33.333% - .2rem); }

.kyoto-orientation__side,
.kyoto-orientation__station {
  border: 1px solid var(--kyoto-line);
  border-radius: 1.5rem;
  display: grid;
  gap: .42rem;
  justify-items: center;
  min-width: 0;
  padding: 1.4rem;
  text-align: center;
}

.kyoto-orientation__side--north { background: var(--kyoto-north); }
.kyoto-orientation__side--south { background: var(--kyoto-south); }
.kyoto-orientation__side span,
.kyoto-orientation__station > span {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .13em;
}
.kyoto-orientation__side strong { font-size: clamp(1.35rem, 3vw, 2.1rem); }
.kyoto-orientation__side small { color: var(--kyoto-ink-soft); line-height: 1.45; }

.kyoto-orientation__station {
  background: var(--kyoto-ink);
  color: #fff;
  position: relative;
}
.kyoto-orientation__station > div {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  justify-content: center;
}
.kyoto-orientation__station b {
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  font-size: .72rem;
  padding: .35rem .58rem;
}
.kyoto-orientation__station small { color: rgba(255,255,255,.78); }

.kyoto-decisions,
.kyoto-purpose-library,
.kyoto-fingerprint,
.kyoto-sequence,
.kyoto-scenarios,
.kyoto-considerations,
.kyoto-recovery,
.kyoto-station-faq,
.kyoto-station-sources {
  display: grid;
  gap: clamp(1.3rem, 3vw, 2.4rem);
}

.kyoto-decisions > div:last-child,
.kyoto-fingerprint > div:last-child {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kyoto-decisions article,
.kyoto-fingerprint article,
.kyoto-considerations article {
  background: var(--kyoto-paper);
  border: 1px solid var(--kyoto-line);
  border-radius: 1.2rem;
  min-width: 0;
  padding: 1.35rem;
}
.kyoto-decisions article > span,
.kyoto-fingerprint article > span,
.kyoto-considerations article > span,
.kyoto-before-during article > span {
  color: #9e4b3a;
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  margin-bottom: .85rem;
}
.kyoto-decisions h3,
.kyoto-fingerprint h3,
.kyoto-considerations h3 {
  font-size: 1.15rem;
  line-height: 1.28;
  margin: 0 0 .65rem;
}
.kyoto-decisions article p,
.kyoto-fingerprint article p,
.kyoto-considerations article p { color: var(--kyoto-ink-soft); line-height: 1.65; margin: 0; }

.kyoto-purpose-library > div:last-child {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kyoto-purpose-card {
  background: var(--kyoto-paper);
  border: 1px solid var(--kyoto-line);
  border-radius: 1.45rem;
  color: var(--kyoto-ink);
  display: flex;
  flex-direction: column;
  min-height: 19rem;
  min-width: 0;
  padding: clamp(1.3rem, 3vw, 2rem);
  text-decoration: none;
}
.kyoto-purpose-card:hover { border-color: var(--kyoto-ink); box-shadow: 0 .7rem 1.8rem rgba(23,63,72,.08); transform: translateY(-3px); }
.kyoto-purpose-card > span { align-items: center; display: flex; justify-content: space-between; }
.kyoto-purpose-card > span b { color: #9e4b3a; font-size: .78rem; letter-spacing: .08em; }
.kyoto-purpose-card > span small { color: var(--kyoto-ink-soft); }
.kyoto-purpose-card h3 { font-family: "Fraunces", "Noto Sans JP", serif; font-size: clamp(1.45rem, 2.8vw, 2.1rem); line-height: 1.13; margin: 1.5rem 0 .8rem; }
.kyoto-purpose-card p { color: var(--kyoto-ink-soft); line-height: 1.7; margin: 0 0 1.5rem; }
.kyoto-purpose-card strong { border-top: 1px solid var(--kyoto-line); margin-top: auto; padding-top: 1rem; }
.kyoto-purpose-card i { float: right; font-style: normal; }

.kyoto-complete-read {
  align-items: end;
  background: var(--kyoto-ink);
  border-radius: clamp(1.3rem, 3vw, 2rem);
  color: #fff;
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: clamp(1.6rem, 4vw, 3.4rem);
}
.kyoto-complete-read h2 { font-family: "Fraunces", "Noto Sans JP", serif; font-size: clamp(1.8rem, 4vw, 3.2rem); margin: .45rem 0 .9rem; }
.kyoto-complete-read p,
.kyoto-complete-read li { color: rgba(255,255,255,.82); line-height: 1.7; }
.kyoto-complete-read > a { background: var(--kyoto-coral); border-radius: 999px; color: var(--kyoto-ink); font-weight: 700; padding: 1rem 1.35rem; text-decoration: none; white-space: nowrap; }

.kyoto-live-details {
  border: 1px solid var(--kyoto-line);
  border-radius: 1.3rem;
  overflow: clip;
}
.kyoto-live-details > summary {
  align-items: center;
  background: var(--kyoto-paper);
  cursor: pointer;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 1.2rem 1.4rem;
}
.kyoto-live-details > summary span { font-weight: 700; }
.kyoto-live-details > summary small { color: var(--kyoto-ink-soft); }
.kyoto-live-details > div { border-top: 1px solid var(--kyoto-line); display: grid; gap: 2rem; min-width: 0; padding: clamp(1rem, 3vw, 2rem); }

.kyoto-station-story {
  border-block: 1px solid var(--kyoto-line);
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  padding-block: clamp(2rem, 5vw, 4rem);
}
.kyoto-station-story p { font-size: 1.05rem; line-height: 1.85; margin-top: 0; }
.kyoto-station-story a { color: var(--kyoto-ink); font-weight: 700; }

.kyoto-station-boundary {
  align-items: start;
  background: #f5ead2;
  border-radius: 1.5rem;
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: clamp(1.4rem, 3.5vw, 2.6rem);
}
.kyoto-station-boundary h2 { font-size: clamp(1.45rem, 3vw, 2.25rem); margin: .45rem 0 .7rem; }
.kyoto-station-boundary p { line-height: 1.75; margin: 0; }
.kyoto-station-boundary dl { display: grid; gap: .75rem; margin: 0; min-width: 12rem; }
.kyoto-station-boundary dl > div { border-bottom: 1px solid rgba(23,63,72,.2); padding-bottom: .65rem; }
.kyoto-station-boundary dt { color: var(--kyoto-ink-soft); font-size: .75rem; font-weight: 700; }
.kyoto-station-boundary dd { font-weight: 700; margin: .25rem 0 0; }

.kyoto-faq-list { display: grid; gap: .7rem; }
.kyoto-faq-list details { background: var(--kyoto-paper); border: 1px solid var(--kyoto-line); border-radius: 1rem; overflow: clip; }
.kyoto-faq-list summary { cursor: pointer; font-weight: 700; line-height: 1.45; padding: 1.15rem 3rem 1.15rem 1.2rem; position: relative; }
.kyoto-faq-list summary::after { content: "+"; font-size: 1.4rem; position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%); }
.kyoto-faq-list details[open] summary::after { content: "−"; }
.kyoto-faq-list details p { border-top: 1px solid var(--kyoto-line); color: var(--kyoto-ink-soft); line-height: 1.75; margin: 0; padding: 1.15rem 1.2rem 1.3rem; }

.kyoto-station-sources { border-top: 1px solid var(--kyoto-line); padding-top: 2rem; }
.kyoto-station-sources h2 { font-size: clamp(1.45rem, 3vw, 2.3rem); margin: .45rem 0 .7rem; }
.kyoto-station-sources ul { display: grid; gap: .65rem; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.kyoto-station-sources a { background: var(--kyoto-paper); border: 1px solid var(--kyoto-line); border-radius: .9rem; color: var(--kyoto-ink); display: block; font-weight: 600; line-height: 1.45; padding: 1rem; }

.kyoto-before-during {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.kyoto-before-during article { border-left: .3rem solid var(--kyoto-coral); padding: .4rem 1.4rem; }
.kyoto-before-during article + article { border-left-color: var(--kyoto-gold); }
.kyoto-before-during h2 { font-size: clamp(1.3rem, 2.6vw, 1.9rem); margin: 0 0 .7rem; }
.kyoto-before-during p { color: var(--kyoto-ink-soft); line-height: 1.7; margin: 0; }

.kyoto-sequence > ol,
.kyoto-recovery > ol { counter-reset: none; display: grid; gap: .65rem; list-style: none; margin: 0; padding: 0; }
.kyoto-sequence > ol > li,
.kyoto-recovery > ol > li { align-items: center; background: var(--kyoto-paper); border: 1px solid var(--kyoto-line); border-radius: 1rem; display: grid; gap: 1rem; grid-template-columns: 3rem minmax(0, 1fr); padding: 1rem; }
.kyoto-sequence li > span,
.kyoto-recovery li > span { align-items: center; background: var(--kyoto-ink); border-radius: 50%; color: #fff; display: flex; font-size: .75rem; font-weight: 700; height: 3rem; justify-content: center; }
.kyoto-recovery li > span { background: var(--kyoto-coral); color: var(--kyoto-ink); }
.kyoto-sequence li p,
.kyoto-recovery li p { line-height: 1.65; margin: 0; }

.kyoto-scenarios > div:last-child { display: grid; gap: .75rem; }
.kyoto-scenarios details { background: var(--kyoto-paper); border: 1px solid var(--kyoto-line); border-radius: 1.2rem; overflow: clip; }
.kyoto-scenarios summary { align-items: center; cursor: pointer; display: grid; gap: 1rem; grid-template-columns: 2.4rem minmax(0, 1fr); padding: 1.2rem; }
.kyoto-scenarios summary span { align-items: center; background: var(--kyoto-south); border-radius: 50%; display: flex; font-size: .72rem; font-weight: 700; height: 2.4rem; justify-content: center; }
.kyoto-scenarios summary strong { font-size: 1.08rem; line-height: 1.4; }
.kyoto-scenarios details > div { border-top: 1px solid var(--kyoto-line); padding: 1.2rem clamp(1.2rem, 4vw, 3.5rem); }
.kyoto-scenarios details p,
.kyoto-scenarios details li { line-height: 1.72; }
.kyoto-scenarios details ol { padding-left: 1.4rem; }

.kyoto-considerations > div:last-child { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kyoto-recovery { background: var(--kyoto-north); border-radius: 1.5rem; padding: clamp(1.4rem, 4vw, 3rem); }

.kyoto-phrase {
  align-items: start;
  border-block: 1px solid var(--kyoto-line);
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  padding-block: 2.2rem;
}
.kyoto-phrase h2 { font-size: clamp(1.45rem, 3vw, 2.2rem); margin: .4rem 0 .6rem; }
.kyoto-phrase article { background: var(--kyoto-ink); border-radius: 1.2rem; color: #fff; padding: 1.4rem; }
.kyoto-phrase blockquote { font-size: clamp(1.15rem, 2.5vw, 1.55rem); font-weight: 700; line-height: 1.65; margin: 0; }
.kyoto-phrase article > p { color: rgba(255,255,255,.76); line-height: 1.6; }
.kyoto-phrase button { background: var(--kyoto-coral); border: 0; border-radius: 999px; color: var(--kyoto-ink); cursor: pointer; font: inherit; font-weight: 700; padding: .8rem 1rem; }

.kyoto-next { display: grid; gap: .7rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kyoto-next a { align-items: center; background: var(--kyoto-paper); border: 1px solid var(--kyoto-line); border-radius: 1rem; color: var(--kyoto-ink); display: flex; font-weight: 700; gap: 1rem; justify-content: space-between; line-height: 1.45; padding: 1rem; text-decoration: none; }
.kyoto-next__complete { background: var(--kyoto-ink) !important; color: #fff !important; }

.kyoto-station-mode a:focus-visible,
.kyoto-purpose-card:focus-visible,
.kyoto-complete-read > a:focus-visible,
.kyoto-live-details > summary:focus-visible,
.kyoto-faq-list summary:focus-visible,
.kyoto-scenarios summary:focus-visible,
.kyoto-phrase button:focus-visible,
.kyoto-next a:focus-visible,
.kyoto-station-sources a:focus-visible {
  outline: 3px solid #0a67c2;
  outline-offset: 3px;
}

@media (max-width: 960px) {
  .kyoto-orientation,
  .kyoto-station-story { grid-template-columns: 1fr; }
  .kyoto-decisions > div:last-child,
  .kyoto-fingerprint > div:last-child { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .kyoto-station-lp,
  .kyoto-purpose-article { gap: 3.2rem; }
  .kyoto-station-mode { grid-template-columns: 1fr; }
  .kyoto-station-mode a { min-height: 0; }
  .kyoto-direct-answer,
  .kyoto-complete-read,
  .kyoto-station-boundary,
  .kyoto-before-during,
  .kyoto-phrase { grid-template-columns: 1fr; }
  .kyoto-direct-answer { box-shadow: .3rem .3rem 0 rgba(23, 63, 72, .13); }
  .kyoto-purpose-library > div:last-child,
  .kyoto-decisions > div:last-child,
  .kyoto-fingerprint > div:last-child,
  .kyoto-considerations > div:last-child,
  .kyoto-station-sources ul,
  .kyoto-next { grid-template-columns: 1fr; }
  .kyoto-purpose-card { min-height: 0; }
  .kyoto-complete-read > a { justify-self: start; white-space: normal; }
  .kyoto-station-boundary dl { min-width: 0; }
  .kyoto-sequence > ol > li,
  .kyoto-recovery > ol > li { align-items: start; grid-template-columns: 2.5rem minmax(0, 1fr); }
  .kyoto-sequence li > span,
  .kyoto-recovery li > span { height: 2.5rem; }
  .kyoto-orientation__station b { font-size: .65rem; }
}

@media (prefers-reduced-motion: reduce) {
  .kyoto-station-mode a,
  .kyoto-purpose-card { transition: none; }
  .kyoto-station-mode a:hover,
  .kyoto-purpose-card:hover { transform: none; }
}

@media (forced-colors: active) {
  .kyoto-direct-answer,
  .kyoto-orientation__station,
  .kyoto-recovery,
  .kyoto-phrase article,
  .kyoto-next__complete { forced-color-adjust: auto; }
}