/* Character File: the character first, then their story, people, knowledge and voice.
   One column of reading with a sticky index; the research record is one link away. */
.character-file-page { margin:0; color:var(--ink); background:var(--paper); font:400 var(--type-body)/1.6 var(--font-sans); }
.character-file-page * { box-sizing:border-box; }
.character-file-page :where(h1,h2,h3,p,figure,blockquote,dl,dd) { margin:0; }
.character-file-page :where(h1,h2,h3) { color:var(--ink-strong); font-weight:500; }
:where(.character-file-page) a { color:inherit; text-decoration:none; }
.file-wrap { width:var(--page-width); margin-inline:auto; }

.file-breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2) var(--space-3); padding-block:var(--space-4) var(--space-6); color:var(--ink-muted); font-size:var(--type-small); }
.file-breadcrumb a { transition:color var(--motion-fast) var(--ease-out); }
.file-breadcrumb a:hover { color:var(--action); }
.file-breadcrumb [aria-current] { color:var(--ink); }

/* ---- Hero ---------------------------------------------------------------- */
.file-hero { display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1fr); gap:clamp(2rem,6vw,6rem); align-items:start; }
.file-art { position:relative; margin:0; overflow:hidden; aspect-ratio:4/5; border-radius:var(--radius-media); background:var(--ink-950,#16241c); box-shadow:0 0 0 1px var(--line); }
.file-art > img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
.file-art.art-johnny > img { object-position:65% center; }
.file-art.art-judy > img,.file-art.art-rogue > img,.file-art.art-maiko > img { object-position:center 20%; }
.file-hero.is-world-art .file-art { aspect-ratio:auto; overflow:visible; background:none; box-shadow:none; }
.file-hero.is-world-art .file-art > img { position:static; height:auto; aspect-ratio:460/215; border-radius:var(--radius-media); box-shadow:0 0 0 1px var(--line); }
.file-art figcaption { margin-top:var(--space-3); font-size:var(--type-small); color:var(--ink-muted); }
.file-identity { display:flex; flex-direction:column; align-items:flex-start; min-width:0; padding-top:var(--space-4); }
.file-identity h1 { font-size:var(--type-h1); line-height:1.02; letter-spacing:var(--track-display); max-width:100%; text-wrap:balance; }
.file-role { margin-top:var(--space-3); font-size:var(--type-lead); color:var(--ink-muted); }
.file-role::first-letter { text-transform:uppercase; }
.character-file-page .file-voice { margin-block:var(--space-10) var(--space-8); max-width:30rem; }
.file-voice blockquote { font:400 clamp(1.75rem,1.3rem + 1.4vw,2.375rem)/1.2 var(--font-serif); letter-spacing:-.01em; color:var(--ink-strong); text-wrap:balance; }
.file-voice > p { font:400 var(--type-h3)/1.35 var(--font-serif); color:var(--ink); }
.file-voice figcaption { margin-top:var(--space-3); font-size:var(--type-small); color:var(--ink-muted); }
.file-voice figcaption a { color:var(--ink); text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:4px; transition:color var(--motion-fast) var(--ease-out); }
.file-voice figcaption a:hover { color:var(--action); }
.file-actions { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-4) var(--space-8); }
.file-primary {
  display:inline-flex; align-items:center; gap:var(--space-4); min-height:52px; padding:0 var(--space-6); border-radius:var(--radius-control);
  background:var(--action); color:var(--paper-raised)!important; font-weight:500;
  transition:background-color var(--motion-normal) var(--ease-out),transform var(--motion-fast) var(--ease-out);
}
.file-primary > span { transition:transform var(--motion-normal) var(--ease-out); }
.file-primary:hover { background:var(--action-strong); }
.file-primary:hover > span { transform:translateX(3px); }
.file-primary:active { transform:translateY(1px); }
.file-secondary { font-weight:500; color:var(--ink-strong); text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:6px; transition:color var(--motion-fast) var(--ease-out); }
.file-secondary:hover { color:var(--action); }
.file-state-sheet { width:100%; margin-top:var(--space-10); padding-top:var(--space-5); border-top:1px solid var(--line); }
.file-state-sheet h2 { font-size:var(--type-small); font-weight:500; color:var(--ink-strong); }
.file-state-sheet h2 > span { margin-left:var(--space-2); font-weight:400; color:var(--ink-muted); }
.file-state-sheet dl { display:flex; flex-wrap:wrap; gap:var(--space-3) var(--space-10); margin-top:var(--space-3); }
.file-state-sheet dl > div { display:grid; gap:2px; }
.file-state-sheet dt { color:var(--ink-muted); font-size:var(--type-small); }
.file-state-sheet dd { margin:0; color:var(--ink-strong); }

/* ---- Index: sticks under the top edge while reading the dossier ---------- */
.file-chapters {
  position:sticky; top:0; z-index:5; margin-top:var(--space-16); background:color-mix(in srgb,var(--paper) 92%,transparent);
  -webkit-backdrop-filter:saturate(1.2) blur(10px); backdrop-filter:saturate(1.2) blur(10px);
  border-block:1px solid var(--line);
}
.file-chapters ol { display:flex; gap:var(--space-1) var(--space-8); list-style:none; margin:0; padding:0; overflow-x:auto; scrollbar-width:none; }
.file-chapters ol::-webkit-scrollbar { display:none; }
.file-chapters a {
  position:relative; display:flex; align-items:center; gap:var(--space-2); padding:var(--space-4) 0; white-space:nowrap; color:var(--ink-muted); font-weight:500;
  transition:color var(--motion-fast) var(--ease-out);
}
.file-chapters a::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--current); transform:scaleX(0); transform-origin:left; transition:transform var(--motion-normal) var(--ease-out); }
.file-chapters a:hover,.file-chapters a[aria-current="true"] { color:var(--ink-strong); }
.file-chapters a[aria-current="true"]::after { transform:scaleX(1); }
.file-chapter-detail { font-weight:400; font-size:var(--type-small); color:var(--ink-muted); font-variant-numeric:tabular-nums; }

/* ---- Dossier sections ------------------------------------------------------ */
.file-section { padding-top:var(--space-16); scroll-margin-top:var(--space-16); }
.file-section-header { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:var(--space-2) var(--space-6); margin-bottom:var(--space-3); }
.file-section h2 { font-size:var(--type-h2); line-height:1.15; letter-spacing:var(--track-heading); }
.file-section-header > p { font-size:var(--type-small); color:var(--ink-muted); }
.file-section-header > a { font-weight:500; color:var(--action); }
.file-section-header > a > span { display:inline-block; transition:transform var(--motion-normal) var(--ease-out); }
.file-section-header > a:hover > span { transform:translateX(3px); }
.file-section-intro { max-width:42rem; margin-bottom:var(--space-6)!important; color:var(--ink-muted); }
.file-dossier-list,.file-facts,.file-boundaries,.file-voice-excerpts { list-style:none; padding:0; margin:0; }
.file-dossier-list > li { border-top:1px solid var(--line); }
.file-dossier-list > li:last-child { border-bottom:1px solid var(--line); }
.file-entry { margin:0; padding:0; border:0; background:none; border-radius:0; }
.file-entry > summary {
  display:flex; gap:var(--space-5); align-items:baseline; padding:var(--space-4) var(--space-3); margin-inline:calc(-1 * var(--space-3));
  border-radius:var(--radius-control); cursor:pointer; list-style:none; transition:background-color var(--motion-fast) var(--ease-out);
}
.file-entry > summary:hover { background:var(--paper-sunk); }
.file-entry > summary::-webkit-details-marker { display:none; }
.file-entry > summary::after {
  content:''; flex:none; align-self:center; width:8px; height:8px; margin-left:auto; border-right:1.5px solid var(--ink-muted); border-bottom:1.5px solid var(--ink-muted);
  transform:translateY(-2px) rotate(45deg); transition:transform var(--motion-normal) var(--ease-out);
}
.file-entry[open] > summary::after { transform:translateY(2px) rotate(-135deg); }
.file-entry strong { font-size:var(--type-lead); font-weight:500; line-height:1.35; color:var(--ink-strong); }
.file-entry-index { min-width:2ch; color:var(--ink-muted); font-size:var(--type-small); font-variant-numeric:tabular-nums lining-nums; }
.file-entry-cue { display:block; margin-top:2px; color:var(--ink-muted); font-size:var(--type-small); }
.file-entry-body { max-width:44rem; margin:0 0 var(--space-6) calc(2ch + var(--space-5)); }
.file-entry[open] .file-entry-body { animation:bank-fade-up var(--motion-slow) var(--ease-out) both; }
.file-entry-body > p { margin-bottom:var(--space-3); }
.file-record-link { display:inline-flex; align-items:center; gap:var(--space-2); margin-top:var(--space-4); font-size:var(--type-small); font-weight:500; color:var(--ink-strong); text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:4px; transition:color var(--motion-fast) var(--ease-out); }
.file-record-link:hover { color:var(--action); }
.file-state-rows > div { display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-6); padding-block:var(--space-2); border-top:1px solid var(--line); }
.file-state-rows dt { color:var(--ink-muted); font-size:var(--type-small); }
.file-state-rows dd { margin:0; text-align:right; }
.file-state-note { max-width:38rem; margin-top:var(--space-4)!important; color:var(--ink-muted); font-size:var(--type-small); }
.file-relationship-phase + .file-relationship-phase { margin-top:var(--space-5); }
.file-phase-heading,.file-fact-scope { color:var(--ink-muted); font-size:var(--type-small); }
.file-knowledge-columns { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-8) clamp(2rem,6vw,6rem); align-items:start; }
.file-knowledge-columns h3 { font-size:var(--type-h3); margin-bottom:var(--space-2); letter-spacing:-.01em; }
.file-knowledge-columns .file-section-intro { margin-bottom:var(--space-4)!important; font-size:var(--type-small); }
.file-facts li,.file-boundaries li { padding-block:var(--space-3); border-top:1px solid var(--line); }
.file-fact-scope { display:inline-block; margin-top:var(--space-1); padding:0 var(--space-2); border-radius:var(--radius-control); background:var(--paper-sunk); }
.file-boundary-topic { display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--space-1) var(--space-3); }
.file-boundary-topic strong { font-weight:500; color:var(--ink-strong); }
.file-boundary-topic span { color:var(--ink-muted); font-size:var(--type-small); }
.file-boundaries li > p + p { margin-top:var(--space-1); font-size:var(--type-small); color:var(--ink-muted); }
.file-boundaries .file-boundary-condition { max-width:40rem; }
.file-voice-excerpts { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-6) clamp(2rem,6vw,6rem); }
.file-voice-excerpts li { padding-top:var(--space-5); border-top:1px solid var(--line); }
.file-voice-excerpts blockquote { font:400 var(--type-h3)/1.35 var(--font-serif); color:var(--ink-strong); }

/* ---- Encounters and the research record ----------------------------------- */
.file-encounters { list-style:none; margin:0; padding:0; }
.file-encounters li { border-top:1px solid var(--line); }
.file-encounters li:last-child { border-bottom:1px solid var(--line); }
.file-encounters a {
  display:grid; grid-template-columns:12rem minmax(0,1fr) 24px; gap:var(--space-8); align-items:baseline; padding:var(--space-5) var(--space-3); margin-inline:calc(-1 * var(--space-3));
  border-radius:var(--radius-control); transition:background-color var(--motion-fast) var(--ease-out);
}
.file-encounters a:hover { background:var(--paper-sunk); }
.file-encounter-kind { font-size:var(--type-small); color:var(--ink-muted); }
.file-encounter-prompt { font:400 var(--type-lead)/1.4 var(--font-serif); color:var(--ink-strong); max-width:40em; }
.file-encounters .file-arrow { justify-self:end; color:var(--ink-muted); transition:transform var(--motion-normal) var(--ease-out),color var(--motion-fast) var(--ease-out); }
.file-encounters a:hover .file-arrow { color:var(--action); transform:translateX(3px); }
.file-research { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-4) var(--space-8); align-items:center; margin-top:var(--space-16); padding:var(--space-6) var(--space-8); border-radius:var(--radius-media); background:var(--paper-sunk); }
.file-research h2 { font-size:var(--type-lead); font-weight:500; }
.file-research p { margin-top:var(--space-1); color:var(--ink-muted); }
.file-research nav { display:flex; flex-wrap:wrap; gap:var(--space-3) var(--space-8); }
.file-research nav a { font-weight:500; color:var(--action); }
.file-research nav a > span { display:inline-block; transition:transform var(--motion-normal) var(--ease-out); }
.file-research nav a:hover > span { transform:translateX(3px); }
.file-error { padding-block:var(--space-16); min-height:50vh; }
.file-error h1 { font-size:var(--type-h1); margin-bottom:var(--space-5); letter-spacing:var(--track-display); }
.file-error a { color:var(--action); text-decoration:underline; text-underline-offset:5px; }

@media(max-width:1000px) {
  .file-encounters a { grid-template-columns:9rem minmax(0,1fr) 24px; gap:var(--space-5); }
}
@media(max-width:760px) {
  .file-hero { grid-template-columns:1fr; gap:var(--space-6); }
  .file-art { aspect-ratio:4/3; }
  .file-identity { padding-top:0; }
  .character-file-page .file-voice { margin-block:var(--space-6); }
  .file-chapters { margin-top:var(--space-10); margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--gutter); }
  .file-knowledge-columns,.file-voice-excerpts { grid-template-columns:1fr; }
  .file-entry-body { margin-left:0; }
  .file-entry > summary { gap:var(--space-4); }
  .file-encounters a { grid-template-columns:minmax(0,1fr) 24px; gap:var(--space-2) var(--space-3); }
  .file-encounter-kind { grid-column:1/-1; }
  .file-identity h1 { overflow-wrap:anywhere; }
  .file-research { padding:var(--space-5); }
}