/* People pages (3 Nov 2026): /characters hub, /characters/<slug> and /factions.
   The site is a dark iron warehouse where only people, weapons and data are lit (DESIGN-SYSTEM §0). These pages take that
   literally: the game's own cut-out bestiary portraits stand on the page background with no box around them, so each
   character reads as one figure lit in the dark. Only existing tokens; no new colour, no rounded corners, no glow. */

/* ---------- character page: the stage (portrait right, name left) ---------- */
.ch-stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0 0 30px; }
.ch-text { min-width: 0; }
.ch-text h1 { margin: 0; }
.ch-stage .lede { margin-top: 22px; }
.ch-fig { position: relative; margin: 0 calc(var(--gutter) * -1) 15px; height: 300px; overflow: hidden; order: -1; }
.ch-fig img { position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; max-width: none; transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); }
@media (min-width: 761px) { .ch-fig img {
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%), linear-gradient(to right, transparent 0, #000 14%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, #000 72%, transparent 100%), linear-gradient(to right, transparent 0, #000 14%); mask-composite: intersect; } }
.ch-fig figcaption { position: absolute; right: var(--gutter); bottom: 6px; font-size: 12px; letter-spacing: .06em; color: var(--ink-4); text-align: right; max-width: 60%; }
.ch-fig--none { height: auto; overflow: visible; margin: 0 0 15px; order: 0; }
@media (min-width: 761px) {
  .ch-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 32px; align-items: center; }
  .ch-fig { order: 0; margin: 0; height: 520px; }
  .ch-fig figcaption { right: 0; }
}
@media (min-width: 1200px) { .ch-fig { height: 600px; } }

/* the one-line "who" strip under the name: faction · where · quests, each a link */
.ch-who { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--fs-small); line-height: 1.45; color: var(--ink-3); max-width: none; }
.ch-who li { margin: 0; }
.ch-who b { display: block; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--ink-4); }
.ch-who a { color: var(--ink); }

/* ---------- ties: who this person is to the others ---------- */
.ties { list-style: none; padding: 0; margin: 0; max-width: none; border-top: 1px solid var(--rule); }
.tie { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 18px; padding: 18px 0; border-bottom: 1px solid var(--rule-soft); margin: 0; }
.tie__p { grid-row: span 3; width: 64px; height: 64px; display: block; background: var(--stage); }
.tie__p img { width: 64px; height: 64px; object-fit: cover; object-position: top center; display: block; }
.tie__p .seal { width: 64px; height: 64px; font-size: 22px; padding: 0; }
.tie__k { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--sec-characters); margin: 0; }
.tie__n { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; color: var(--ink); margin: 0; }
.tie__n a { color: inherit; }
.tie__t { margin: 4px 0 0; color: var(--ink-2); }
.tie__q { grid-column: 2; margin: 8px 0 0; padding-left: 14px; border-left: 2px solid var(--steel); color: var(--ink); max-width: var(--measure); }
.tie__q cite { display: block; font-style: normal; font-size: var(--fs-small); color: var(--ink-3); margin-top: 4px; }
@media (min-width: 1200px) { .tie { grid-template-columns: 80px minmax(0, 1fr); } .tie__p, .tie__p img, .tie__p .seal { width: 80px; height: 80px; } }

/* spoiler folds: closed by default, labelled, the content complete when opened */
.spoil { margin: 0; border-bottom: 1px solid var(--rule-soft); }
.spoil > summary { cursor: pointer; list-style: none; padding: 14px 0; min-height: var(--tap); display: flex; align-items: center; gap: 12px; color: var(--ink); font-weight: 600; }
.spoil > summary::-webkit-details-marker { display: none; }
.spoil > summary::before { content: "Spoiler"; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--red-text); border: 1px solid rgba(var(--red-rgb), .6); padding: 3px 6px 2px; border-radius: 1px; font-weight: 600; }
.spoil[data-k]::before { content: none; }
.spoil > summary[data-k]::before { content: attr(data-k); }
.spoil > summary::after { content: "+"; margin-left: auto; color: var(--ink-3); font-weight: 400; font-size: 22px; line-height: 1; }
.spoil[open] > summary::after { content: "–"; }
.spoil > .ties { border-top: 0; }

/* ---------- quest by quest ---------- */
.qlist { list-style: none; padding: 0; margin: 0; max-width: none; counter-reset: q; }
.qitem { margin: 0; padding: 20px 0 18px; border-top: 1px solid var(--rule-soft); }
.qitem__k { margin: 0 0 4px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.qitem__n { margin: 0 0 8px; font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; color: var(--ink); }
.qitem__n a { color: inherit; }
.qitem p { margin: 0 0 10px; }

/* ---------- keep reading ---------- */
.ch-more { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 28px; margin: 0; padding: 0; list-style: none; max-width: none; }
.ch-more li { margin: 0; }
.ch-more a { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 2px 14px; align-items: center; border-top: 1px solid var(--rule); padding: 12px 0 14px; text-decoration: none; color: var(--ink); min-height: var(--tap); }
.ch-more a:hover { border-top-color: var(--red); }
.ch-more img, .ch-more .ch-more__x { grid-row: span 2; width: 48px; height: 48px; object-fit: cover; object-position: top center; background: var(--stage); }
.ch-more .ch-more__x { display: flex; align-items: center; justify-content: center; color: var(--ink-4); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.ch-more b { font-weight: 600; font-size: 17px; line-height: 1.3; }
.ch-more span { color: var(--ink-3); font-size: 14.5px; line-height: 1.35; }

/* ---------- hub: the line-up of lit figures ---------- */
.lineup { list-style: none; padding: 0; margin: 0 0 15px; max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.lineup li { margin: 0; }
.lineup a { display: block; text-decoration: none; color: var(--ink); position: relative; }
.lineup__f { display: block; height: 220px; position: relative; overflow: hidden; border-bottom: 1px solid var(--rule); }
.lineup__f img { position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; max-width: none; transform: translateX(-50%); transition: transform .5s cubic-bezier(.2,.7,.2,1); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); }
.lineup a:hover .lineup__f img, .lineup a:focus-visible .lineup__f img { transform: translateX(-50%) scale(1.04); }
.lineup a:hover .lineup__f { border-bottom-color: var(--red); }
.lineup__n { display: block; font-weight: 600; font-size: 18px; line-height: 1.25; margin: 10px 0 2px; }
.lineup__d { display: block; color: var(--ink-3); font-size: 14.5px; line-height: 1.4; margin-bottom: 22px; }
@media (min-width: 761px) { .lineup { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; } .lineup__f { height: 300px; } }
@media (min-width: 1200px) { .lineup { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lineup__f { height: 340px; } }
@media (prefers-reduced-motion: reduce) { .lineup__f img { transition: none; } .lineup a:hover .lineup__f img { transform: translateX(-50%); } }

/* hub: everyone else, region by region */
.cast { list-style: none; padding: 0; margin: 0; max-width: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 28px; }
@media (min-width: 900px) { .cast { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cast li { margin: 0; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 2px 14px; padding: 14px 0; border-top: 1px solid var(--rule-soft); scroll-margin-top: 16px; }
.cast__p { grid-row: span 3; width: 56px; height: 56px; background: var(--stage); display: flex; align-items: center; justify-content: center; }
.cast__p img { width: 56px; height: 56px; object-fit: cover; object-position: top center; }
.cast__p .seal { font-size: 18px; padding: 0; width: 56px; height: 56px; }
.cast__n { font-weight: 600; font-size: 17.5px; line-height: 1.3; color: var(--ink); margin: 0; }
.cast__n a { color: inherit; }
.cast__d { margin: 2px 0 0; font-size: 15.5px; line-height: 1.45; color: var(--ink-2); }
.cast__q { margin: 4px 0 0; font-size: 14.5px; line-height: 1.4; color: var(--ink-3); }
.cast__q a { color: var(--ink-2); }

/* the bestiary note: the game's own words, set as a long quotation (no italics, steel rule like .qt) */
.ch-note { margin: 0 0 30px; padding: 0 0 0 18px; border-left: 2px solid var(--steel); max-width: var(--measure); }
.ch-note p { color: var(--ink); }
.ch-note footer { font-size: var(--fs-small); color: var(--ink-3); }

/* people pages have no right-hand rail: the main column takes the whole wrap */
@media (min-width: 1200px) { .layout.layout--full { grid-template-columns: minmax(0, 1fr); } }
.layout--full .main { max-width: none; }

/* no portrait in the game's files: the name as one large seal stands where the figure would (Chinese only in the Chinese edition) */
.ch-fig--seal { height: auto; overflow: visible; margin: 0 0 15px; order: 0; display: none; }
.ch-fig--seal .seal { font-size: 64px; letter-spacing: .04em; padding: 22px 18px 18px; writing-mode: vertical-rl; box-shadow: inset 0 0 0 4px var(--red), inset 0 0 0 6px rgba(var(--seal-ink-rgb), .4); }
.ch-fig--seal figcaption { position: static; margin-top: 14px; max-width: 24ch; text-align: center; }
@media (min-width: 761px) { .ch-fig--seal { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 420px; } .ch-fig--seal figcaption { text-align: center; } }
.tie__p .seal--long, .cast__p .seal--long, .ch-more .seal--long { font-size: 13px; letter-spacing: 0; line-height: 1.15; flex-wrap: wrap; text-align: center; white-space: normal; padding: 4px; }
.tie__p .seal { display: flex; }

/* no cut-out in the bestiary: a still from the game's own animation, cinematic or launch build stands in, faded into the dark */
.ch-fig--still { height: auto; overflow: hidden; }
.ch-fig--still img { position: static; transform: none; width: 100%; height: auto; display: block;
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); }
.ch-fig--still figcaption { position: static; text-align: left; max-width: none; margin: 6px var(--gutter) 0; }
@media (min-width: 761px) { .ch-fig--still { height: auto; } .ch-fig--still figcaption { margin: 8px 0 0; } }

/* how the person looks in the game: stills with the line said in that scene */
.ch-gal { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px 24px; }
@media (min-width: 761px) { .ch-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ch-gal figure { margin: 0; }
.ch-gal img { width: 100%; height: auto; display: block; background: var(--stage); }
.ch-gal figcaption { margin-top: 10px; color: var(--ink); font-size: 16px; line-height: 1.5; }
.ch-gal__k { display: block; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--ink-4); margin-bottom: 3px; }
.ch-gal__by { color: var(--ink-3); white-space: nowrap; }
.ch-gal__c { margin: 14px 0 0; font-size: 12px; letter-spacing: .06em; color: var(--ink-4); }

/* hub: the count strip under the lede */
.hub-stats { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 10px 30px; max-width: none; }
.hub-stats li { margin: 0; color: var(--ink-3); font-size: var(--fs-small); }
.hub-stats b { display: block; font-size: 34px; line-height: 1.1; font-weight: 600; color: var(--ink); font-variant-numeric: lining-nums; }
/* line-up: a still (no cut-out in the bestiary) fills the frame; a seal stands where no picture exists */
.lineup__f img.is-still { position: absolute; inset: 0; left: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transform: none; }
.lineup a:hover .lineup__f img.is-still, .lineup a:focus-visible .lineup__f img.is-still { transform: scale(1.04); transform-origin: 50% 50%; }
.lineup__seal { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 40px; writing-mode: vertical-rl; padding: 14px 10px; }
@media (prefers-reduced-motion: reduce) { .lineup a:hover .lineup__f img.is-still { transform: none; } }
/* hub: region headings inside the roster */
.cast-h3 { margin: 34px 0 6px; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.cast-h3__a { font-size: var(--fs-small); font-weight: 400; color: var(--ink-3); }
.cast__n b { font-weight: 600; }

/* factions page: one block per faction or region */
.fac { padding: 22px 0 24px; border-top: 1px solid var(--rule-soft); scroll-margin-top: 16px; }
.fac__n { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
.fac__n .seal { font-size: 15px; padding: 3px 6px 2px; }
.fac p { max-width: var(--measure); }
.fac .tie__q { margin: 12px 0 14px; }
.fac__k { margin: 14px 0 8px; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--ink-4); }
.fac__k a { color: inherit; }
.fac__m { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; max-width: none; }
.fac__m li { margin: 0; }
.fac__m a { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); color: var(--ink); text-decoration: none; font-size: 15.5px; }
.fac__m a:hover span { text-decoration: underline; }
.fac__m img, .fac__m .seal { width: 40px; height: 40px; object-fit: cover; object-position: top center; background: var(--stage); flex: none; }
.fac__m .seal { display: flex; align-items: center; justify-content: center; font-size: 13px; padding: 0; }
.lineup__f img.is-still { -webkit-mask-image: radial-gradient(120% 95% at 50% 35%, #000 55%, transparent 100%); mask-image: radial-gradient(120% 95% at 50% 35%, #000 55%, transparent 100%); }
.fac__m .seal--long, .cast__p .seal--long, .tie__p .seal--long { font-size: 11px; line-height: 1.1; overflow: hidden; }
@media (max-width: 760px) { .hub-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; } }

/* seals in a Latin-script edition carry initials (owner, 31 Oct: no Chinese outside the Chinese edition): set them flat, not in a column */
.seal--latin { writing-mode: horizontal-tb !important; letter-spacing: .08em; font-variant-numeric: lining-nums; }
.ch-fig--seal .seal--latin { font-size: 72px; padding: 26px 30px 22px; }
.lineup__seal.seal--latin { font-size: 44px; padding: 16px 18px 12px; }