/* 
   THE WORLD WITHOUT WANT — FLEMING'S CHARACTERS
   Self-contained page. The palette is deliberately bookish rather than cinematic.
   Main site colours can be changed here.
*/
#twww-bonds-bar{
  --paper:#f3efe5;
  --paper2:#fbf8f0;
  --ink:#151515;
  --muted:#6f6a61;
  --line:#d5cdbd;
  --wine:#6f1720;
  --wine-dark:#431015;
  --gold:#a47b38;
  --cream:#e8dfcd;
  --green:#355846;
  --shadow:0 12px 34px rgba(30,20,12,.09);
}
#twww-bonds-bar *{box-sizing:border-box}

#twww-bonds-bar{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}
#twww-bonds-bar a{color:inherit}
#twww-bonds-bar .shell{max-width:1480px;margin:0 auto;padding:34px 24px 72px}
#twww-bonds-bar .masthead{border-top:8px solid var(--ink);padding-top:20px}
#twww-bonds-bar .eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:var(--wine)}
#twww-bonds-bar h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(48px,7vw,90px);line-height:.9;letter-spacing:-.035em;margin:12px 0 18px;max-width:1100px}
#twww-bonds-bar .deck{font-family:Georgia,"Times New Roman",serif;font-size:clamp(19px,2vw,25px);line-height:1.48;max-width:950px;color:#3c3832}
#twww-bonds-bar .rule-note{margin:26px 0;background:var(--paper2);border:1px solid var(--line);border-left:5px solid var(--wine);padding:18px 20px;line-height:1.5}
#twww-bonds-bar .rule-note strong{font-family:Georgia,"Times New Roman",serif;font-size:18px}
#twww-bonds-bar .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0 26px}
#twww-bonds-bar .stat{background:var(--paper2);border:1px solid var(--line);padding:16px 17px}
#twww-bonds-bar .stat .number{font-family:Georgia,"Times New Roman",serif;font-size:34px;line-height:1;font-weight:bold}
#twww-bonds-bar .stat .label{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-top:6px}
#twww-bonds-bar .controls-wrap{position:sticky;top:0;z-index:20;background:rgba(243,239,229,.96);backdrop-filter:blur(8px);padding:12px 0;border-bottom:1px solid var(--line);margin-bottom:14px}
#twww-bonds-bar .controls{display:grid;grid-template-columns:minmax(260px,1fr) 220px 210px 240px 180px;gap:9px}
#twww-bonds-bar input,#twww-bonds-bar select,#twww-bonds-bar button{font:inherit;border:1px solid #aaa092;background:#fffdf8;padding:11px 12px;border-radius:2px;min-width:0}
#twww-bonds-bar button{cursor:pointer;background:var(--ink);color:white;border-color:var(--ink);font-weight:700}
#twww-bonds-bar button:hover{background:var(--wine-dark)}
#twww-bonds-bar .results-line{display:flex;justify-content:space-between;gap:20px;align-items:center;color:var(--muted);font-size:13px;padding:10px 1px}
#twww-bonds-bar .results-line b{color:var(--ink)}
#twww-bonds-bar .legend{display:flex;gap:12px;flex-wrap:wrap}
#twww-bonds-bar .legend span{display:inline-flex;align-items:center;gap:6px}
#twww-bonds-bar .dot{width:8px;height:8px;border-radius:50%;display:inline-block}
#twww-bonds-bar .dot.novel{background:var(--wine)}
#twww-bonds-bar .dot.story{background:var(--gold)}

#twww-bonds-bar .table-wrap{background:var(--paper2);border:1px solid var(--line);overflow:auto;box-shadow:var(--shadow)}
#twww-bonds-bar table{width:100%;border-collapse:collapse;min-width:1200px}
#twww-bonds-bar thead th{position:sticky;top:0;background:var(--ink);color:#fff;text-align:left;padding:12px 11px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
#twww-bonds-bar tbody td{border-top:1px solid var(--line);padding:13px 11px;vertical-align:top;font-size:14px}
#twww-bonds-bar tbody tr.character-row{cursor:pointer;transition:background .15s}
#twww-bonds-bar tbody tr.character-row:hover{background:#f7f1e5}
#twww-bonds-bar tbody tr.character-row.open{background:#f3e9da}
#twww-bonds-bar .rank{font-family:Georgia,"Times New Roman",serif;font-size:22px;font-weight:bold;width:62px}
#twww-bonds-bar .character-name{font-family:Georgia,"Times New Roman",serif;font-size:19px;font-weight:bold;min-width:180px}
#twww-bonds-bar .character-name .chev{font-family:Arial,sans-serif;font-size:11px;margin-left:6px;color:var(--wine)}
#twww-bonds-bar .appearances{font-family:Georgia,"Times New Roman",serif;font-size:21px;font-weight:bold;text-align:center}
#twww-bonds-bar .tags{display:flex;flex-wrap:wrap;gap:5px;max-width:260px}
#twww-bonds-bar .tag{display:inline-block;background:#ebe3d5;border:1px solid #d5cab7;padding:3px 6px;font-size:10px;letter-spacing:.04em;text-transform:uppercase}
#twww-bonds-bar .works-list{line-height:1.5;max-width:360px;min-width:260px;white-space:normal;overflow-wrap:anywhere}
#twww-bonds-bar .work-link{white-space:normal}
#twww-bonds-bar .work-link::after{content:" · ";color:#aaa}
#twww-bonds-bar .work-link:last-child::after{content:""}
#twww-bonds-bar .detail-row{display:none}
#twww-bonds-bar .detail-row.open{display:table-row}
#twww-bonds-bar .detail-cell{padding:0!important;background:#efe6d7}
#twww-bonds-bar .profile{display:grid;grid-template-columns:minmax(250px,.85fr) minmax(420px,1.8fr);gap:28px;padding:26px 30px 30px;border-left:5px solid var(--wine)}
#twww-bonds-bar .profile h2{font-family:Georgia,"Times New Roman",serif;font-size:33px;margin:0 0 8px}
#twww-bonds-bar .profile .meta{color:var(--wine);font-weight:bold;text-transform:uppercase;letter-spacing:.08em;font-size:11px;margin-bottom:18px}
#twww-bonds-bar .profile p{font-family:Georgia,"Times New Roman",serif;font-size:17px;line-height:1.55;margin:0 0 14px}
#twww-bonds-bar .profile .small{font-family:Arial,Helvetica,sans-serif;font-size:13px;color:var(--muted)}
#twww-bonds-bar .timeline-title{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:bold;margin-bottom:10px}
#twww-bonds-bar .timeline{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}
#twww-bonds-bar .work-chip{min-height:56px;border:1px solid #c9beaa;background:#faf6ed;padding:7px 6px;position:relative}
#twww-bonds-bar .work-chip.active{background:#fff;border-color:var(--wine)}
#twww-bonds-bar .work-chip.active.story{border-color:var(--gold)}
#twww-bonds-bar .work-chip .code{font-weight:800;font-size:10px;letter-spacing:.05em}
#twww-bonds-bar .work-chip .yr{font-size:10px;color:var(--muted);margin-top:3px}
#twww-bonds-bar .work-chip .mark{position:absolute;right:5px;top:5px;width:7px;height:7px;border-radius:50%;background:#d7d0c4}
#twww-bonds-bar .work-chip.active .mark{background:var(--wine)}
#twww-bonds-bar .work-chip.active.story .mark{background:var(--gold)}
#twww-bonds-bar .tip{position:relative}
#twww-bonds-bar .tip:hover::after{content:attr(data-title);position:absolute;left:0;bottom:calc(100% + 5px);background:#151515;color:white;padding:5px 7px;font-size:11px;white-space:nowrap;z-index:5}
#twww-bonds-bar .empty{padding:45px 20px;text-align:center;font-family:Georgia,"Times New Roman",serif;font-size:21px;color:var(--muted)}
#twww-bonds-bar .footer{border-top:1px solid var(--line);margin-top:28px;padding-top:18px;color:var(--muted);font-size:13px;line-height:1.6}
#twww-bonds-bar .footer strong{color:var(--ink)}
#twww-bonds-bar .footer a{color:var(--wine)}
#twww-bonds-bar .mobile-note{display:none}
@media (max-width:1050px){
  #twww-bonds-bar .controls{grid-template-columns:1fr 1fr 1fr}
  #twww-bonds-bar .controls #search{grid-column:1/-1}
  #twww-bonds-bar .stats{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  #twww-bonds-bar .shell{padding:25px 14px 52px}
  #twww-bonds-bar h1{font-size:52px}
  #twww-bonds-bar .controls-wrap{position:static}
  #twww-bonds-bar .controls{grid-template-columns:1fr}
  #twww-bonds-bar .controls #search{grid-column:auto}
  #twww-bonds-bar .profile{grid-template-columns:1fr;padding:22px 18px}
  #twww-bonds-bar .timeline{grid-template-columns:repeat(4,1fr)}
  #twww-bonds-bar .results-line{align-items:flex-start;flex-direction:column}
  #twww-bonds-bar .mobile-note{display:block;font-size:12px;color:var(--muted);margin:7px 0}
}

#twww-bonds-bar{width:100%;max-width:100%;isolation:isolate;overflow:visible;}

#twww-bonds-bar .shell{width:100%;max-width:1480px;margin:0 auto;padding:34px 20px 72px;}