/* 
   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-bond-timeline{
  --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-bond-timeline *{box-sizing:border-box}

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

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

#twww-bond-timeline{width:100%;max-width:100%;isolation:isolate;overflow:visible;}

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

/* Timeline-specific components (no table in this page) */
#twww-bond-timeline .controls-wrap{display:block}
#twww-bond-timeline .order-toggle{display:inline-flex;border:1px solid var(--ink);background:#fffdf8}
#twww-bond-timeline .toggle-btn{font:inherit;font-weight:700;font-size:13px;letter-spacing:.03em;border:none;background:transparent;color:var(--ink);padding:12px 22px;cursor:pointer}
#twww-bond-timeline .toggle-btn.active{background:var(--ink);color:#fff}
#twww-bond-timeline .toggle-btn:not(.active):hover{background:#ece4d4}

#twww-bond-timeline .timeline-wrap{background:var(--paper2);border:1px solid var(--line);box-shadow:var(--shadow)}
#twww-bond-timeline .timeline-list{position:relative}
#twww-bond-timeline .timeline-list::before{content:"";position:absolute;left:44px;top:0;bottom:0;width:1px;background:var(--line)}
#twww-bond-timeline .timeline-item{position:relative;display:flex;align-items:center;gap:16px;padding:16px 20px 16px 0;border-top:1px solid var(--line);cursor:pointer;transition:background .15s}
#twww-bond-timeline .timeline-item:first-child{border-top:none}
#twww-bond-timeline .timeline-item:hover{background:#f7f1e5}
#twww-bond-timeline .timeline-item.open{background:#f3e9da}
#twww-bond-timeline .t-rank{position:relative;z-index:1;width:88px;flex:0 0 88px;display:flex;align-items:center;justify-content:center}
#twww-bond-timeline .t-rank .num{font-family:Georgia,"Times New Roman",serif;font-size:24px;font-weight:bold;background:var(--paper2);border:2px solid var(--wine);color:var(--wine);width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center}
#twww-bond-timeline .timeline-item.story .t-rank .num{border-color:var(--gold);color:var(--gold-dark,#8a6420)}
#twww-bond-timeline .t-main{flex:1;min-width:0}
#twww-bond-timeline .t-title{font-family:Georgia,"Times New Roman",serif;font-size:20px;font-weight:bold}
#twww-bond-timeline .t-title .chev{font-family:Arial,sans-serif;font-size:11px;margin-left:6px;color:var(--wine);font-weight:normal}
#twww-bond-timeline .t-meta{font-size:12.5px;color:var(--muted);margin-top:3px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
#twww-bond-timeline .t-meta .sep{color:#c9beaa}
#twww-bond-timeline .t-badge{flex:0 0 auto;font-size:11px;font-weight:800;letter-spacing:.04em;padding:5px 10px;border:1px solid transparent;white-space:nowrap}
#twww-bond-timeline .t-badge.up{color:var(--green);border-color:var(--green);background:#eef4f0}
#twww-bond-timeline .t-badge.down{color:var(--wine);border-color:var(--wine);background:#f6ecea}
#twww-bond-timeline .t-badge.none{color:var(--muted);border-color:var(--line)}
#twww-bond-timeline .timeline-detail{display:none;padding:0 20px 26px 108px;border-top:none}
#twww-bond-timeline .timeline-detail.open{display:block}
#twww-bond-timeline .timeline-detail p{font-family:Georgia,"Times New Roman",serif;font-size:16px;line-height:1.55;margin:0 0 12px;max-width:760px}
#twww-bond-timeline .timeline-detail .note{background:#efe6d7;border-left:4px solid var(--gold);padding:10px 14px;font-size:14px;color:#3c3832;max-width:760px;margin-top:6px}
#twww-bond-timeline .timeline-detail .dates{font-size:12.5px;color:var(--muted);margin-top:12px}

@media (max-width:760px){
  #twww-bond-timeline .t-rank{width:56px;flex:0 0 56px}
  #twww-bond-timeline .t-rank .num{width:36px;height:36px;font-size:18px}
  #twww-bond-timeline .timeline-list::before{left:28px}
  #twww-bond-timeline .t-title{font-size:17px}
  #twww-bond-timeline .timeline-detail{padding-left:20px}
  #twww-bond-timeline .toggle-btn{padding:11px 14px;font-size:12px}
}