/* =========================================================
   Characters page — Mobile First
   ========================================================= */

.characters-page {
  background: #0c0c0b;
}

.characters-hero {
  position: relative;
  min-height: 78svh;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--header-h) + 60px) 22px 76px;
  background: #0c0c0b;
}

.characters-hero__bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(8,8,8,.30), rgba(8,8,8,.52) 56%, #0c0c0b 100%),
    linear-gradient(90deg, rgba(8,8,8,.40), transparent 48%, rgba(8,8,8,.28)),
    url("../assets/thermidor-flag-scene.png") center 38% / cover no-repeat;
  filter: saturate(.75) brightness(.68);
  transform: scale(1.035);
}

.characters-hero__inner {
  position: relative;
  z-index: 1;
  width: min(100%, 760px);
  margin: 0 auto;
}

.characters-hero__eyebrow {
  margin: 0 0 20px;
  color: rgba(224,216,198,.60);
  font-size: .68rem;
  letter-spacing: .12em;
}

.characters-hero h1 {
  margin: 0;
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(2.8rem, 15vw, 5rem);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: .08em;
}

.characters-hero__en {
  margin: 8px 0 0;
  color: rgba(224,216,198,.38);
  font-family: "Bodoni 72", "Didot", "Times New Roman", serif;
  font-size: .62rem;
  letter-spacing: .26em;
}

.characters-hero__lead {
  margin: 34px 0 0;
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  font-size: 1.08rem;
  line-height: 2;
  letter-spacing: .07em;
}

.characters-hero__scroll {
  position: absolute;
  z-index: 2;
  right: 20px;
  bottom: 34px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(224,216,198,.22);
  color: rgba(224,216,198,.55);
  font-size: .8rem;
}

.character-map-section,
.character-details {
  background:
    radial-gradient(circle at 12% 8%, rgba(25,57,84,.075), transparent 24%),
    radial-gradient(circle at 88% 12%, rgba(116,31,28,.075), transparent 24%),
    #0c0c0b;
  color: var(--paper-light);
}

.character-map-section {
  padding: 76px 18px 42px;
}

.character-section-inner {
  width: min(100%, 980px);
  margin: 0 auto;
}

.character-section-heading {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: start;
  margin-bottom: 42px;
}

.character-section-number {
  margin: 5px 0 0;
  color: rgba(224,216,198,.36);
  font-family: "Times New Roman", serif;
  font-size: .72rem;
  letter-spacing: .12em;
}

.character-section-heading h2 {
  margin: 0;
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  font-size: 1.55rem;
  font-weight: 500;
  letter-spacing: .08em;
}

.character-section-heading p:not(.character-section-number) {
  margin: 6px 0 0;
  color: rgba(224,216,198,.48);
  font-size: .72rem;
}

.character-network {
  position: relative;
  height: min(132vw, 520px);
  min-height: 460px;
  max-height: 520px;
  width: 100%;
  margin: 0 auto;
  padding: 4px 0 8px;
  isolation: isolate;
}

.character-network::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 31%;
  width: 170px;
  height: 170px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(116,31,28,.09), transparent 70%);
  pointer-events: none;
}

.character-network__lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.character-relation-line {
  stroke: rgba(224,216,198,.28);
  stroke-width: 1;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  animation: relationLineIn .34s ease both;
}

.character-relation-label-bg {
  fill: rgba(12,12,11,.92);
  stroke: rgba(224,216,198,.12);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.character-relation-label {
  fill: rgba(224,216,198,.58);
  font-family: -apple-system, BlinkMacSystemFont, "Yu Gothic", sans-serif;
  font-size: 9px;
  letter-spacing: .04em;
  text-anchor: middle;
  dominant-baseline: middle;
}

@keyframes relationLineIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.character-node {
  position: absolute;
  z-index: 2;
  width: 30%;
  min-width: 0;
  min-height: 56px;
  border: 1px solid rgba(224,216,198,.17);
  background: rgba(13,13,12,.88);
  color: rgba(224,216,198,.75);
  padding: 8px 4px 9px;
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(.68rem, 3vw, .86rem);
  line-height: 1.35;
  letter-spacing: .015em;
  text-align: center;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, color .25s ease, transform .25s ease, opacity .25s ease;
}

.character-node__relation {
  display: block;
  margin-bottom: 3px;
  min-height: 1.25em;
  color: rgba(224,216,198,.35);
  font-family: -apple-system, BlinkMacSystemFont, "Yu Gothic", sans-serif;
  font-size: .49rem;
  line-height: 1.25;
  letter-spacing: .035em;
}

.character-node small {
  display: block;
  margin-top: 4px;
  color: rgba(224,216,198,.34);
  font-family: -apple-system, BlinkMacSystemFont, "Yu Gothic", sans-serif;
  font-size: .45rem;
  line-height: 1.3;
  letter-spacing: 0;
}

.character-node.is-active {
  border-color: rgba(224,216,198,.68);
  background: rgba(116,31,28,.23);
  color: var(--paper-light);
}

/* Keep each node's positioning transform intact when selected. */
.character-node.is-active:not(.character-node--maximilien):not(.character-node--augustin):not(.character-node--antoinette) {
  transform: translateY(-1px);
}

.character-node--maximilien.is-active,
.character-node--augustin.is-active,
.character-node--antoinette.is-active {
  transform: translateX(-50%) translateY(-1px);
}

.character-node.is-related:not(.is-active) {
  border-color: rgba(224,216,198,.32);
  color: rgba(224,216,198,.90);
  background: rgba(25,23,20,.92);
}

.character-network.has-selection .character-node:not(.is-active):not(.is-related) {
  opacity: .52;
}

/*
   Mobile-first visual arrangement.
   The boxes deliberately float with generous gaps rather than forming a table.

   Charlotte     Maximilien      Danton
   Eleonore       Augustin        Anne
          Fouche          Saint-Just
                Antoinette
          Roland             Trio
*/
.character-node--charlotte {
  left: 0;
  top: 1%;
}
.character-node--maximilien {
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}
.character-node--danton {
  right: 0;
  top: 2%;
}

.character-node--eleonore {
  left: 0;
  top: 24%;
}
.character-node--augustin {
  left: 50%;
  top: 23%;
  width: 33%;
  min-height: 68px;
  transform: translateX(-50%);
  border-color: rgba(224,216,198,.42);
  font-size: clamp(.73rem, 3.25vw, .91rem);
}
.character-node--anne {
  right: 0;
  top: 25%;
}

.character-node--fouche {
  left: 17%;
  top: 48%;
}
.character-node--saintjust {
  right: 17%;
  top: 49%;
}

.character-node--antoinette {
  left: 50%;
  top: 69%;
  width: 31%;
  transform: translateX(-50%);
}

.character-node--roland {
  left: 17%;
  bottom: 0;
  width: 29%;
}
.character-node--trio {
  right: 17%;
  bottom: 0;
  width: 31%;
}

.character-node--minor {
  min-height: 56px;
  color: rgba(224,216,198,.62);
}

.character-node:active {
  transform: translateY(1px);
}
.character-node--maximilien:active,
.character-node--augustin:active,
.character-node--antoinette:active {
  transform: translateX(-50%) translateY(1px);
}

.character-details {
  min-height: 560px;
  padding: 38px 20px 88px;
}

.character-detail {
  position: relative;
  border-top: 1px solid rgba(224,216,198,.22);
  padding-top: 32px;
  animation: characterFade .38s ease both;
}

@keyframes characterFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.character-detail[hidden] { display: none; }

.character-detail__number {
  position: absolute;
  right: 0;
  top: 22px;
  color: rgba(224,216,198,.06);
  font-family: "Bodoni 72", "Didot", "Times New Roman", serif;
  font-size: clamp(5rem, 25vw, 9rem);
  line-height: 1;
  pointer-events: none;
}

.character-detail__body {
  position: relative;
  z-index: 1;
}

.character-detail__roman {
  margin: 0 0 8px;
  color: rgba(224,216,198,.38);
  font-family: "Bodoni 72", "Didot", "Times New Roman", serif;
  font-size: .60rem;
  letter-spacing: .18em;
}

.character-detail h2 {
  margin: 0;
  max-width: 13em;
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(1.8rem, 8.8vw, 3rem);
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: .045em;
}

.character-detail__catch {
  margin: 32px 0 24px;
  color: #d7cdbb;
  font-family: "Yu Mincho", "YuMincho", serif;
  font-size: 1.06rem;
  line-height: 1.9;
  letter-spacing: .06em;
}

.character-detail__text {
  margin: 0 0 16px;
  color: rgba(224,216,198,.70);
  font-size: .88rem;
  line-height: 2.05;
}




.character-cast {
  margin: 18px 0 22px;
  padding: 13px 0 14px;
  border-top: 1px solid rgba(224,216,198,.13);
  border-bottom: 1px solid rgba(224,216,198,.13);
}

.character-cast__label {
  margin: 0 0 7px;
  color: rgba(224,216,198,.38);
  font-size: .62rem;
  line-height: 1.4;
  letter-spacing: .10em;
}

.character-cast__label span {
  margin-left: 7px;
  color: rgba(224,216,198,.28);
  font-size: .52rem;
}

.character-cast__single {
  margin: 0;
  color: rgba(224,216,198,.84);
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  font-size: .94rem;
  letter-spacing: .045em;
}

.character-cast__rows {
  display: grid;
  gap: 0;
}

.character-cast__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 7px 0;
  border-top: 1px solid rgba(224,216,198,.075);
}

.character-cast__row:first-child {
  border-top: 0;
}

.character-cast__performance {
  color: rgba(224,216,198,.48);
  font-size: .68rem;
  line-height: 1.55;
}

.character-cast__row strong {
  color: rgba(224,216,198,.84);
  font-family: "Yu Mincho", "YuMincho", serif;
  font-size: .82rem;
  font-weight: 500;
  white-space: nowrap;
}

.characters-footer-cta {
  padding: 86px 22px calc(92px + var(--safe-bottom));
  text-align: center;
  background:
    radial-gradient(circle at 50% 35%, rgba(116,31,28,.12), transparent 34%),
    #090909;
}
.characters-footer-cta > p {
  margin: 0 0 28px;
  font-family: "Yu Mincho", "YuMincho", serif;
  font-size: 1.08rem;
  letter-spacing: .08em;
}
.characters-footer-cta .button { min-width: 190px; margin-top: 0; }
.characters-back {
  display: block;
  margin-top: 32px;
  color: rgba(224,216,198,.36);
  font-size: .68rem;
}

@media (min-width: 760px) {
  .characters-hero {
    min-height: 88vh;
    padding-left: 48px;
    padding-right: 48px;
  }
  .characters-hero__bg { background-position: center 42%; }
  .characters-hero h1 { font-size: clamp(4rem, 7vw, 6rem); }
  .characters-hero__lead { font-size: 1.3rem; }

  .character-map-section { padding: 110px 44px 70px; }
  .character-network { width: min(100%, 760px); height: 560px; min-height: 560px; max-height: 560px; }
  .character-node { width: 29%; min-height: 70px; font-size: .94rem; padding: 12px 8px; }
  .character-node__relation { font-size: .58rem; }
  .character-node--augustin { width: 31%; min-height: 82px; }
  .character-node--antoinette { width: 29%; }
  .character-node--roland { width: 27%; }
  .character-node--trio { width: 29%; }
  .character-node--minor { min-height: 62px; }
  .character-node small { font-size: .53rem; }
  .character-relation-label { font-size: 10px; }

  .character-details { padding: 60px 44px 120px; min-height: 610px; }
  .character-detail { display: grid; grid-template-columns: 160px 1fr; gap: 42px; padding-top: 45px; }
  .character-detail__number { position: static; font-size: 8rem; color: rgba(224,216,198,.07); }
  .character-detail h2 { font-size: 2.7rem; }
  .character-detail__body { max-width: 640px; }
  .character-detail__text { font-size: .92rem; }

}


/* Relationship text is displayed inside related character boxes, not on the SVG line. */
.character-node__relation {
  transition: color .25s ease, opacity .25s ease;
}

.character-node.is-related .character-node__relation {
  color: rgba(224,216,198,.72);
}

.character-node.is-active .character-node__relation {
  color: rgba(224,216,198,.48);
}

/* SVG relation labels are intentionally not used in v18. */
.character-relation-label,
.character-relation-label-bg {
  display: none;
}


/* =========================================================
   v20 — Draggable character detail bottom sheet
   ========================================================= */

@media (max-width: 759px) {
  .characters-page .character-details {
    --sheet-offset: 100svh;
    position: fixed;
    z-index: 80;
    left: 0;
    right: 0;
    bottom: 0;
    height: 92svh;
    min-height: 0;
    padding: 0;
    background: rgba(12, 12, 11, .985);
    border-top: 1px solid rgba(224, 216, 198, .24);
    box-shadow: 0 -18px 42px rgba(0, 0, 0, .48);
    transform: translateY(calc(100% + 12px));
    transition:
      transform .36s cubic-bezier(.22,.7,.25,1),
      border-color .24s ease,
      box-shadow .24s ease;
    overflow: hidden;
    overscroll-behavior: contain;
    will-change: transform;
  }

  .characters-page .character-details.is-open {
    transform: translateY(var(--sheet-offset));
  }

  .characters-page .character-details.is-dragging {
    transition: none;
  }

  .characters-page .character-details.is-expanded {
    border-top-color: rgba(224,216,198,.34);
    box-shadow: 0 -24px 56px rgba(0,0,0,.58);
  }

  .character-sheet__topbar {
    position: relative;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(224, 216, 198, .09);
    touch-action: none;
    user-select: none;
    cursor: grab;
  }

  .characters-page .character-details.is-dragging .character-sheet__topbar {
    cursor: grabbing;
  }

  .character-sheet__handle {
    position: absolute;
    top: 9px;
    width: 44px;
    height: 3px;
    border-radius: 2px;
    background: rgba(224, 216, 198, .34);
  }

  .character-sheet__hint {
    margin-top: 11px;
    color: rgba(224,216,198,.30);
    font-size: .52rem;
    letter-spacing: .08em;
    transition: color .2s ease;
  }

  .characters-page .character-details.is-expanded .character-sheet__hint {
    color: rgba(224,216,198,.40);
  }

  .character-sheet__close {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: rgba(224, 216, 198, .58);
    padding: 10px;
    font-size: .68rem;
    letter-spacing: .06em;
    cursor: pointer;
  }

  .character-sheet__scroll {
    height: calc(100% - 48px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  .characters-page .character-details .character-section-inner {
    width: 100%;
    padding: 20px 22px calc(34px + env(safe-area-inset-bottom, 0px));
  }

  .characters-page .character-detail {
    min-height: 0;
    grid-template-columns: 34px 1fr;
    gap: 13px;
    padding: 0;
  }

  .characters-page .character-detail__number {
    padding-top: 4px;
    font-size: .62rem;
  }

  .characters-page .character-detail__roman {
    margin-bottom: 4px;
    font-size: .52rem;
  }

  .characters-page .character-detail h2 {
    margin: 0 0 7px;
    font-size: clamp(1.2rem, 5.6vw, 1.55rem);
    line-height: 1.45;
  }

  .characters-page .character-detail__catch {
    margin: 0 0 8px;
    font-size: .82rem;
  }

  .characters-page .character-detail__text {
    margin: 7px 0 0;
    font-size: .78rem;
    line-height: 1.85;
  }

  .characters-page .character-cast {
    margin: 12px 0 14px;
    padding: 10px 0 11px;
  }

  .characters-page .character-cast__single {
    font-size: .86rem;
  }

  .characters-page .character-cast__row {
    grid-template-columns: minmax(0, 1fr) minmax(4.4em, auto);
    gap: 9px;
    padding: 6px 0;
  }

  .characters-page .character-cast__performance {
    font-size: .62rem;
  }

  .characters-page .character-cast__row strong {
    font-size: .76rem;
  }

  /* Do not reserve normal-flow height for the fixed sheet. */
  .characters-page .character-map-section {
    padding-bottom: 70px;
  }
}

@media (min-width: 760px) {
  .character-sheet__topbar {
    display: none;
  }

  .character-sheet__scroll {
    display: contents;
  }

  .characters-page .character-details {
    position: static;
    transform: none;
  }

  .character-cast {
    max-width: 640px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .characters-page .character-details,
  .character-sheet__hint {
    transition: none;
  }
}


/* v22 — performer names only */
.character-cast--double,
.character-cast--trio {
  padding-top: 8px;
}

@media (max-width: 759px) {
  .characters-page .character-cast--double,
  .characters-page .character-cast--trio {
    padding-top: 7px;
  }
}


/* =========================================================
   Trio node — wider single-line label
   タリアン ／ バラス ／ フレロン
   ========================================================= */

/* ロランとの間隔を保ちながら、この枠だけ横長にする */
.character-node--trio {
  right: 2%;
  width: 45%;
}

/* 三人の名前だけは折り返さない */
.character-node--trio > span:not(.character-node__relation) {
  white-space: nowrap;
  font-size: .62rem;
  letter-spacing: -.015em;
}

@media (min-width: 760px) {
  .character-node--trio {
    right: 9%;
    width: 38%;
  }

  .character-node--trio > span:not(.character-node__relation) {
    font-size: .84rem;
    letter-spacing: .01em;
  }
}


/* =========================================================
   Bottom-row centering
   ロラン + タリアン／バラス／フレロン を全体として中央配置
   ========================================================= */

/* Mobile:
   9% + 29% + 8% + 45% + 9% = 100%
*/
.character-node--roland {
  left: 9%;
}

.character-node--trio {
  right: 9%;
}

/* Desktop:
   13% + 27% + 9% + 38% + 13% = 100%
*/
@media (min-width: 760px) {
  .character-node--roland {
    left: 13%;
  }

  .character-node--trio {
    right: 13%;
  }
}

/* =========================================================
   2026-09-11 Readability pass
   ========================================================= */

.characters-hero__eyebrow { font-size: .76rem; }
.characters-hero__lead { font-size: 1.14rem; }
.character-network__hint { font-size: .78rem; }
.character-node { font-size: clamp(.76rem, 3.25vw, .92rem); }
.character-node__relation { font-size: .58rem; }
.character-node small { font-size: .56rem; }
.character-detail__eyebrow { font-size: .7rem; }
.character-detail__catch { font-size: 1.1rem; line-height: 1.9; }
.character-detail__text { font-size: .96rem; line-height: 2; }
.character-detail__role { font-size: .72rem; }
.character-detail__cast { font-size: 1rem; }
.character-detail__schedule { font-size: .76rem; line-height: 1.7; }

@media (max-width: 759px) {
  .character-node { min-height: 62px; }
  .character-detail__catch { font-size: .92rem; }
  .character-detail__text { font-size: .88rem; line-height: 1.95; }
}

@media (min-width: 760px) {
  .characters-hero__lead { font-size: 1.34rem; }
  .character-node { font-size: 1rem; }
  .character-node__relation { font-size: .64rem; }
  .character-detail__text { font-size: 1rem; }
}


/* =========================================================
   2026-09-11 Readability refinement 2
   Larger character descriptions + brighter secondary text.
   ========================================================= */

.character-network__hint {
  color: rgba(224,216,198,.72);
}

.character-node {
  color: rgba(224,216,198,.88);
}

.character-node__relation {
  color: rgba(224,216,198,.64);
  font-size: .64rem;
}

.character-node small {
  color: rgba(224,216,198,.62);
  font-size: .62rem;
}

.character-node--minor {
  color: rgba(224,216,198,.80);
}

.character-detail__roman,
.character-cast__label,
.character-detail__role,
.character-detail__schedule {
  color: rgba(224,216,198,.64);
}

/* Short one-line character introduction inside each box/detail. */
.character-detail__catch {
  font-size: 1.08rem;
  line-height: 1.9;
  color: rgba(224,216,198,.92);
}

/* Long description shown after selecting a character. */
.character-detail__text {
  font-size: 1rem;
  line-height: 2;
  color: rgba(224,216,198,.86);
}

@media (max-width: 759px) {
  .character-node__relation {
    font-size: .62rem;
  }

  .character-detail__catch {
    font-size: 1rem;
    line-height: 1.9;
  }

  .character-detail__text {
    font-size: .96rem;
    line-height: 2;
  }
}

@media (min-width: 760px) {
  .character-node__relation {
    font-size: .7rem;
  }

  .character-detail__catch {
    font-size: 1.16rem;
  }

  .character-detail__text {
    font-size: 1.06rem;
  }
}

/* =========================================================
   2026-09-11 Readability refinement 3
   Character long-form copy: match the visual weight of cast names.
   ========================================================= */
.character-detail__text,
.characters-page .character-detail__text {
  font-size: 1.2rem;
  line-height: 2;
}

@media (max-width: 759px) {
  .character-detail__text,
  .characters-page .character-detail__text {
    font-size: 1.2rem;
    line-height: 2;
  }
}

@media (min-width: 760px) {
  .character-detail__text,
  .characters-page .character-detail__text {
    font-size: 1.2rem;
    line-height: 2;
  }
}

/* =========================================================
   2026-09-11 Readability refinement 4
   Long character description: match the short comment size.
   ========================================================= */
.character-detail__text,
.characters-page .character-detail__text {
  font-size: 1.08rem;
  line-height: 2;
}

@media (max-width: 759px) {
  .character-detail__text,
  .characters-page .character-detail__text {
    font-size: 1rem;
    line-height: 2;
  }
}

@media (min-width: 760px) {
  .character-detail__text,
  .characters-page .character-detail__text {
    font-size: 1.16rem;
    line-height: 2;
  }
}

/* =========================================================
   2026-09-11 Character detail typography refinement
   Match long description typeface to the short comment.
   ========================================================= */
.character-detail__text,
.characters-page .character-detail__text {
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
}