/* /anaescobar v2. One stylesheet for the hub and every chapter folder. Mobile first; breakpoints at 720 and 1040.
   Tokens: graphite-blue base, Trends blue for data, red only for her claimed dates and what cuts against her,
   amber for her own labels, green for what supports her or what we measured. */

:root{
  color-scheme:dark;
  --bg:#111826; --bg-2:#0d131d; --panel:#18212f; --panel-2:#1e2838; --line:#2a3444;
  --ink:#e8edf3; --ink-2:#c7d0dc; --muted:#8e9bb0; --white:#f7fafc;
  --blue:#5b9cff; --blue-2:#7fb2ff; --red:#ff4d4d; --red-soft:#ff6b5e; --amber:#f2b84b; --ok:#43c08a;
  --head:'Oswald','Arial Narrow',sans-serif; --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --maxw:1180px; --narrow:760px; --gutter:16px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden;padding-top:60px}
h1,h2,h3,h4{font-family:var(--head);font-weight:600;line-height:1.1;margin:0;letter-spacing:.005em}
h1{font-size:clamp(32px,6.2vw,64px);font-weight:700}
h2{font-size:clamp(26px,4.4vw,40px)}
h3{font-size:clamp(20px,2.6vw,26px)}
h4{font-size:18px}
p{margin:0 0 14px}
a{color:var(--blue-2);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
code{font-family:ui-monospace,Consolas,monospace;font-size:.92em;color:var(--ink-2)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 max(var(--gutter),env(safe-area-inset-right)) 0 max(var(--gutter),env(safe-area-inset-left))}
.wrap.narrow{max-width:var(--narrow)}
.muted{color:var(--muted)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:70px;z-index:90;background:var(--red);color:#fff;padding:8px 12px;border-radius:8px}

/* ---------- top bar ---------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;gap:14px;min-height:60px;padding:8px max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left));
  background:rgba(17,24,38,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.topbar .brand{display:flex;align-items:center;gap:8px;font-family:var(--head);font-weight:600;font-size:16px;color:var(--white)}
.topbar .brand .dot{width:9px;height:9px;border-radius:2px;background:var(--red)}
.topbar .home{color:var(--ink-2);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.topbar .home[aria-current]{color:var(--white)}
.menu-btn{margin-left:auto;min-height:40px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);font:inherit;font-size:14px;cursor:pointer}
.chapters{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bg-2);border-bottom:1px solid var(--line);padding:8px 16px 14px;flex-direction:column;max-height:calc(100vh - 60px);overflow:auto}
.topbar.open .chapters{display:flex}
.chapters a{padding:10px 8px;border-bottom:1px solid var(--line);color:var(--ink-2);font-size:15px}
.chapters a[aria-current]{color:var(--white);border-left:3px solid var(--amber);padding-left:10px}
.topbar .topshare{display:none}
@media (min-width:1040px){
  .topbar .topshare{display:inline-flex}
  .chapters{position:static;display:flex;flex-direction:row;flex-wrap:nowrap;gap:2px;background:none;border:0;padding:0;overflow-x:auto;max-height:none;scrollbar-width:none;flex:1;min-width:0}
  .chapters::-webkit-scrollbar{display:none}
  .chapters a{border:0;padding:6px 9px;font-size:13px;white-space:nowrap;border-radius:6px}
  .chapters a[aria-current]{background:var(--panel-2);border-left:0;padding-left:9px}
  .menu-btn{display:none}
}

/* ---------- hero + demo ---------- */
.hero{padding:34px 0 10px;background:linear-gradient(180deg,#0f1623 0%,var(--bg) 100%)}
.hero h1{max-width:18ch}
.hero .lead{font-size:clamp(16px,2vw,19px);color:var(--ink-2);max-width:68ch;margin:16px 0 0}
.demo-wrap{margin-top:22px}
.demo{position:relative;background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:12px 10px 8px}
.demo canvas{display:block;width:100%}
.nd-cap{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;padding:8px 6px 2px;font-size:14px;color:var(--ink-2);min-height:28px}
.nd-cap b{color:var(--white);font-family:var(--head);font-size:18px;font-weight:600}
.nd-cap small{color:var(--muted)}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 10px}
.fact{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.fact b{display:block;font-family:var(--head);font-size:28px;font-weight:700;color:var(--white);line-height:1}
.fact span{font-size:13px;color:var(--muted)}
@media (min-width:720px){.facts{grid-template-columns:repeat(4,1fr)}}

/* ---------- sections ---------- */
.sec{padding:38px 0 14px}
.sec h2{margin-bottom:8px}
.sec .sub{color:var(--muted);max-width:72ch;margin:0 0 18px}
ol.plain{padding-left:22px;margin:4px 0 0}
ol.plain li{margin:0 0 10px;color:var(--ink-2)}
.breath{border-left:3px solid var(--amber);padding:8px 14px;background:var(--bg-2);border-radius:0 10px 10px 0;color:var(--ink)}

/* ---------- map ---------- */
.map-layout{display:grid;grid-template-columns:1fr;gap:12px}
.map{position:relative;height:420px;border:1px solid var(--line);border-radius:14px;background:radial-gradient(600px 300px at 50% 40%,#16203000,transparent),var(--bg-2);overflow:hidden;touch-action:none}
.map canvas{display:block}
.map-fallback{padding:20px;color:var(--muted)}
.map-tip{background:var(--panel);color:var(--ink);padding:6px 9px;border-radius:8px;border:1px solid var(--line);font:13px/1.35 var(--sans)}
.map-panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px}
.map-panel[hidden]{display:none}
.map-kind{font-size:13px;margin-bottom:6px}
.map-panel h3{margin:0 0 8px}
.map-panel p{color:var(--ink-2);font-size:15px}
.btn{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border-radius:10px;background:var(--blue);color:#0b1220;font-weight:600;margin:4px 8px 4px 0}
.btn:hover{text-decoration:none;filter:brightness(1.08)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
.map-legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin:10px 0 0;font-size:13px;color:var(--ink-2)}
.map-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle}
.map-list{width:100%}
.map-list summary{cursor:pointer;color:var(--blue-2)}
.map-list ul{columns:1;padding-left:18px}
.map-list button{background:none;border:0;color:var(--blue-2);font:inherit;cursor:pointer;padding:2px 0;text-align:left}
@media (min-width:1040px){.map-layout{grid-template-columns:1fr 340px}.map{height:600px}.map-list ul{columns:3}}

/* ---------- timeline ---------- */
.tl-scroll{overflow-x:auto;overflow-y:hidden;border:1px solid var(--line);border-radius:14px;background:var(--bg-2);-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.tl-inner{position:relative;padding:0 0 10px}
.tl-axis{position:relative;height:30px;border-bottom:1px solid var(--line)}
.tl-tick{position:absolute;top:0;height:100%;border-left:1px solid var(--line)}
.tl-tick span{position:absolute;left:5px;top:6px;font-size:12px;color:var(--muted);white-space:nowrap}
.tl-lane{position:relative;display:flex;flex-direction:column}
.tl-lane-label{position:sticky;left:0;z-index:2;display:inline-block;background:var(--panel);color:var(--ink-2);font-size:12px;padding:3px 10px;border-radius:0 8px 8px 0;margin:10px 0 2px}
.tl-track{position:relative;height:150px;border-bottom:1px dashed var(--line)}
.lane-claim .tl-dot{background:var(--amber)}.lane-google .tl-dot{background:var(--blue)}.lane-ours .tl-dot{background:var(--ok)}
.tl-ev{position:absolute;top:8px;width:0}
.tl-ev.alt{top:70px}
.tl-dot{position:absolute;left:-5px;top:0;width:10px;height:10px;border-radius:50%}
.tl-ev.key .tl-dot{width:14px;height:14px;left:-7px;top:-2px;box-shadow:0 0 0 3px rgba(255,255,255,.08)}
.tl-card{position:absolute;left:10px;top:-4px;width:210px;font-size:12px;line-height:1.35;color:var(--ink-2)}
.tl-card time{display:block;color:var(--muted);font-size:11px}
.tl-card b{display:block;color:var(--white);font-weight:600}
.tl-card p{margin:2px 0 3px;display:none}
.tl-ev.key .tl-card{width:240px}
.tl-ev.key .tl-card p{display:block}
.tl-card a.ts{margin-top:3px;min-height:28px;font-size:11px}
.tl-help{font-size:13px;color:var(--muted);margin-top:8px}

/* ---------- chapter grid ---------- */
.chapter-grid{display:grid;grid-template-columns:1fr;gap:10px}
.ch{display:block;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink)}
.ch b{display:block;font-family:var(--head);font-size:21px;font-weight:600;color:var(--white);margin-bottom:4px}
.ch span{font-size:14px;color:var(--muted)}
.ch:hover{text-decoration:none;border-color:var(--blue)}
@media (min-width:720px){.chapter-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.chapter-grid{grid-template-columns:1fr 1fr 1fr}}

/* ---------- chapter pages ---------- */
.chapter-head{padding:28px 0 8px}
.crumb{font-size:13px;color:var(--muted)}
.chapter-head .lead{font-size:clamp(16px,2vw,19px);color:var(--ink-2);max-width:66ch;margin-top:12px}
.chapter-body{padding:10px 0 20px}
.chapter-body h3{margin:30px 0 10px}
.chapter-body h3 .count{font-family:var(--sans);font-size:13px;color:var(--muted);font-weight:400;margin-left:6px}
.prose{max-width:var(--narrow)}
.prose p,.fair p{color:var(--ink-2)}
.fair p b{color:var(--white)}
.gfx{margin:14px 0 26px;background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:12px}
.gfx img{display:block;width:100%;height:auto}

/* her chain */
.link{border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:12px;background:var(--panel);padding:16px;margin:0 0 14px}
.link header{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:8px}
.link header .n{font-family:var(--head);font-size:26px;color:var(--amber);line-height:1}
.link header h3{margin:0;font-size:22px}
.record{border-top:1px dashed var(--line);margin-top:10px;padding-top:10px}
.record h4{color:var(--blue-2);margin-bottom:6px;font-family:var(--sans);font-size:14px;font-weight:600}
.record p{color:var(--ink-2);margin:0}

/* quotes, tags, timestamps */
blockquote.q{margin:10px 0;padding:10px 14px;border-left:3px solid var(--line);background:var(--bg-2);border-radius:0 10px 10px 0;color:var(--ink)}
blockquote.q .who{display:block;margin-top:6px;font-size:13px;color:var(--muted)}
blockquote.q.screen{font-family:ui-monospace,Consolas,monospace;font-size:13px;border-left-color:var(--amber)}
blockquote.q.screen .who:first-child{margin:0 0 4px;color:var(--amber)}
.limits{margin-top:8px;font-size:14px;color:var(--muted)}
.limits b{color:var(--amber);font-weight:600}
.tag{display:inline-block;font-size:12px;padding:2px 8px;border-radius:6px;border:1px solid var(--line);color:var(--ink-2);vertical-align:middle}
.tag.strong{border-color:rgba(255,77,77,.6);color:var(--red-soft)}
.tag.medium{border-color:rgba(242,184,75,.6);color:var(--amber)}
.tag.weak{color:var(--muted)}
.tag.official{border-color:rgba(91,156,255,.6);color:var(--blue-2)}
.tag.ours{border-color:rgba(67,192,138,.6);color:var(--ok)}
.tag.own{color:var(--amber)}
a.ts{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:2px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px;color:var(--blue-2);background:var(--panel)}
a.ts:hover{border-color:var(--blue);text-decoration:none}
a.ts .ic{width:0;height:0;border-left:7px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}
a.ts.rumble{color:var(--ok)}

/* receipts */
.group{margin:0 0 30px}
.receipt{padding:2px 0 6px;border-bottom:1px solid var(--line)}
.receipt .limits{margin-top:2px;margin-bottom:8px}
details.more{margin:8px 0}
details.more summary{cursor:pointer;color:var(--blue-2);font-size:14px}

/* tests */
.finding{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:16px;margin:0 0 14px}
.finding h3{margin:0 0 8px;font-size:22px}
.grid{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:720px){.grid{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.grid.three{grid-template-columns:1fr 1fr 1fr}}
figure.shot{margin:0;background:var(--bg-2);border:1px solid var(--line);border-radius:10px;overflow:hidden}
figure.shot img{display:block;width:100%;height:auto;background:#fff}
figure.shot figcaption{padding:8px 10px;font-size:13px;color:var(--ink-2)}
figure.shot figcaption .m{display:block;font-size:11.5px;color:var(--muted);margin-top:3px}
table.t{width:100%;border-collapse:collapse;font-size:14px;margin:8px 0 14px;min-width:520px}
table.t th,table.t td{text-align:left;padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
table.t th{font-size:12px;color:var(--muted);font-weight:600}
table.t td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.scroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.callout{border:1px solid rgba(242,184,75,.5);background:rgba(242,184,75,.06);border-radius:12px;padding:14px 16px;margin:14px 0}
.callout.red{border-color:rgba(255,77,77,.5);background:rgba(255,77,77,.06)}
.callout.ok{border-color:rgba(67,192,138,.5);background:rgba(67,192,138,.06)}
.callout h3{margin:0 0 6px}

/* duels (her words vs her sheet) */
.duels{display:grid;grid-template-columns:1fr;gap:12px;margin:0 0 20px}
@media (min-width:720px){.duels{grid-template-columns:1fr 1fr 1fr}}
.duel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px}
.duel-lab{font-size:13px;color:var(--muted);margin-bottom:6px}
.duel-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.duel-row b{display:block;font-family:var(--head);font-size:40px;font-weight:700;line-height:1}
.duel-a b{color:var(--amber)}.duel-b b{color:var(--white)}
.duel-row span{font-size:12px;color:var(--muted)}
.duel-vs{color:var(--muted);font-size:13px}
.duel-note{margin:8px 0 0;font-size:13px;color:var(--muted)}

/* pairs (her screen vs ours) */
figure.pair{margin:0 0 26px;border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:12px}
.pair-term{font-family:var(--head);font-size:20px;color:var(--white);margin:0 0 10px}
.pair-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:720px){.pair-grid{grid-template-columns:1fr 1fr}}
.pane-lab{font-size:13px;color:var(--muted);margin-bottom:6px}
.pane img{display:block;width:100%;height:auto;border-radius:8px;background:#fff}
.pane-cap{font-size:13px;color:var(--ink-2);margin-top:6px}
.pair-overlay .ov-box{position:relative;border-radius:8px;overflow:hidden;background:#fff}
.pair-overlay .ov-box img{display:block;width:100%;height:auto}
.pair-overlay .ov-top{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pair-overlay label{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:13px;color:var(--muted)}
.pair-overlay input[type=range]{flex:1;accent-color:var(--blue)}
.ov-toggle{margin-top:10px;min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg-2);color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.pair-note{margin:10px 0 0;font-size:14px;color:var(--ink-2)}

/* contradictions */
.grp{margin-top:30px}
.contra{border:1px solid var(--line);border-left:4px solid var(--red);border-radius:12px;background:var(--panel);padding:16px;margin:0 0 14px}
.contra header{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:8px}
.contra header .n{font-size:13px;color:var(--muted)}
.contra header h4{margin:0;font-size:19px}
.two{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:720px){.two{grid-template-columns:1fr 1fr}}
.side{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:12px;min-width:0;overflow-wrap:anywhere}
.side-lab{font-size:12px;color:var(--muted);margin-bottom:6px}
.side blockquote.q{background:var(--panel)}
.gap{padding:8px 0;border-bottom:1px solid var(--line);color:var(--ink-2);font-size:14px}
.attack{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:14px 16px;margin:0 0 12px}
.attack h4{margin:0 0 6px}
.own{border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:12px;background:var(--panel);padding:12px 16px;margin:0 0 12px}

/* videos, lists */
.video{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:12px}
.video img{display:block;width:100%;border-radius:8px}
.video h3{margin:10px 0 8px;font-size:20px}
.chapters-list{list-style:none;margin:0;padding:0;columns:1;column-gap:20px}
@media (min-width:720px){.chapters-list{columns:2}}
.chapters-list li{break-inside:avoid;padding:4px 0;font-size:14px}
.vlist{list-style:none;margin:0;padding:0}
.vlist li{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line)}
.vlist time{font-size:13px;color:var(--muted);min-width:92px}

/* prev / next */
.prevnext{display:grid;grid-template-columns:1fr;gap:10px;margin:30px auto 10px}
@media (min-width:720px){.prevnext{grid-template-columns:1fr 1fr 1fr}}
.pn{display:block;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--white);font-family:var(--head);font-size:18px}
.pn small{display:block;font-family:var(--sans);font-size:12px;color:var(--muted)}
.pn.next{text-align:right}.pn.up{text-align:center}
.pn:hover{text-decoration:none;border-color:var(--blue)}

/* share */
a.share-x{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 10px;border:1px solid var(--line);border-radius:8px;color:var(--ink-2);font-size:13px;background:var(--panel)}
a.share-x:hover{border-color:var(--ink-2);text-decoration:none}
a.share-x-icon{width:36px;height:36px;padding:0;justify-content:center;vertical-align:middle}
a.share-x-compact{min-height:34px;font-size:12px;white-space:nowrap}
[data-share]{display:inline-flex;vertical-align:middle}

/* footer */
.foot{padding:40px 0 60px;color:var(--muted);font-size:13px}
.foot a{color:var(--ink-2)}

/* player */
.vp{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:12px}
.vp[hidden]{display:none}
.vp-back{position:absolute;inset:0;background:rgba(5,7,10,.86)}
.vp-box{position:relative;width:min(100%,960px);background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.vp-head{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line)}
.vp-title{flex:1;font-size:13px;color:var(--ink-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vp-yt{font-size:12px;white-space:nowrap}
.vp-close{width:40px;height:40px;border:0;border-radius:8px;background:var(--bg-2);color:var(--ink);font-size:24px;cursor:pointer}
.vp-frame{position:relative;aspect-ratio:16/9;background:#000}
.vp-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vp-cap{padding:10px 12px;font-size:14px;color:var(--ink-2);max-height:120px;overflow:auto}
body.vp-open{overflow:hidden}
.tl-ev.small .tl-dot{width:9px;height:9px;left:-4px;display:block}
.tl-ev.small{top:auto}
.tl-card{background:rgba(13,19,29,.92);padding:4px 6px 6px;border-radius:6px}
.tl-card p{max-height:3.9em;overflow:hidden}
.tl-ev.small a.tl-dot:hover,.tl-ev.small a.tl-dot:focus-visible{transform:scale(1.5)}
.tl-track{height:300px}