/* ==========================================================================
   Trans Rhetoric Library
   Same visual language as Emma's interactive CV: trans-flag palette,
   Fraunces / Hanken Grotesk / JetBrains Mono, soft cards, a sidebar beside
   the reading column, light and dark themes.
   ========================================================================== */

:root{
  /* Flag colours are too pale for text, so each has a readable partner. */
  --blue:        #5BCEFA;   /* flag light blue: fills and decoration */
  --blue-ink:    #1C7FB5;   /* readable blue: links, labels */
  --pink:        #F5A9B8;   /* flag pink: accents */
  --pink-ink:    #C2577D;   /* readable rose */
  --ink:         #16222E;   /* headings */
  --ink-soft:    #39485A;   /* body text */
  --panel:       #EAF4FB;
  --panel-line:  #D7E7F1;
  --paper:       #FBFCFE;
  --text:        #16222E;
  --muted:       #5E6B7D;
  --card:        #FFFFFF;
  --pink-panel:  #FDEFF3;
  --shadow:      0 1px 2px rgba(22,34,46,.04), 0 8px 24px rgba(22,34,46,.06);
  --shadow-lift: 0 4px 10px rgba(22,34,46,.08), 0 18px 40px rgba(28,127,181,.16);
  --radius:      16px;
  --sidebar-bg:  linear-gradient(165deg, #E9F5FD 0%, #FBFCFE 52%, #FDEFF3 100%);
  --accent-strong: #1C7FB5; /* fills under white text */
}

[data-theme="dark"]{
  --blue-ink:    #79C7EE;
  --pink-ink:    #F3A6BD;
  --ink:         #EAF1F8;
  --ink-soft:    #C2D2DF;
  --panel:       #1D2C38;
  --panel-line:  #2C3F4D;
  --paper:       #0E1820;
  --text:        #EAF1F8;
  --muted:       #93A6B4;
  --card:        #16242F;
  --pink-panel:  #2A1E27;
  --shadow:      0 1px 2px rgba(0,0,0,.32), 0 8px 24px rgba(0,0,0,.36);
  --shadow-lift: 0 4px 10px rgba(0,0,0,.42), 0 18px 40px rgba(91,206,250,.18);
  --sidebar-bg:  linear-gradient(165deg, #182934 0%, #0E1820 52%, #1E1722 100%);
  --accent-strong: #2F84BE;
}

/* ----- base -------------------------------------------------------------- */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:24px; }
body{
  background:var(--paper); color:var(--text);
  font-family:"Hanken Grotesk", system-ui, sans-serif;
  font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--blue-ink); text-decoration:none; }
::selection{ background:var(--blue-ink); color:#fff; }
:focus-visible{ outline:2.5px solid var(--blue-ink); outline-offset:3px; border-radius:4px; }

.skip-link{
  position:absolute; left:16px; top:-60px; z-index:60;
  background:var(--accent-strong); color:#fff; padding:8px 14px; border-radius:999px;
}
.skip-link:focus{ top:16px; }

/* ----- layout: sticky sidebar beside the reading column ----------------- */
.layout{
  max-width:1240px; margin:0 auto;
  display:grid; grid-template-columns:minmax(280px, 360px) minmax(0, 1fr);
  align-items:start;
}
.sidebar{
  position:sticky; top:0; height:100vh; overflow-y:auto;
  background:var(--sidebar-bg);
  padding:clamp(28px, 3.5vw, 48px) clamp(22px, 3vw, 40px);
  scrollbar-width:thin; scrollbar-color:var(--panel-line) transparent;
}
.content{
  min-width:0;
  padding:clamp(40px, 5vw, 72px) clamp(20px, 4.5vw, 64px) 56px;
}

/* ----- sidebar ----------------------------------------------------------- */
.brand{ display:block; position:relative; color:inherit; }
.badge{
  width:46px; height:46px; color:var(--pink); margin-bottom:18px;
  filter:drop-shadow(0 4px 8px rgba(245,169,184,.55));
  animation:spin 26s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.eyebrow{
  display:block;
  font-family:"JetBrains Mono", monospace;
  font-size:.8rem; font-weight:500; letter-spacing:.06em;
  color:var(--blue-ink); text-transform:lowercase; margin-bottom:6px;
}
.name{
  display:block;
  font-family:"Fraunces", serif; font-weight:600;
  font-size:clamp(1.9rem, 2.6vw, 2.4rem); line-height:1.04; letter-spacing:-.01em;
  color:var(--ink);
}
.role{ margin-top:12px; font-size:.98rem; font-weight:500; color:var(--ink-soft); }

/* trans-flag accent: blue · pink · white · pink · blue */
.flag-bar{
  width:108px; height:5px; margin-top:18px; border-radius:999px;
  background:linear-gradient(90deg,
    var(--blue) 0 20%, var(--pink) 20% 40%, #fff 40% 60%,
    var(--pink) 60% 80%, var(--blue) 80% 100%);
  box-shadow:0 1px 4px rgba(22,34,46,.12);
}

.block{ margin-top:30px; }
.block-title{
  font-family:"JetBrains Mono", monospace;
  font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:12px;
  display:flex; align-items:center; gap:10px;
}
.block-title::after{ content:""; flex:1; height:1px; background:var(--panel-line); }
.block p{ color:var(--ink-soft); font-size:.92rem; }

.nav-list{ list-style:none; display:flex; flex-direction:column; gap:4px; }
.nav-list > li > a{
  display:flex; align-items:baseline; gap:12px;
  padding:7px 12px; margin:0 -12px; border-radius:10px;
  color:var(--ink-soft); font-weight:600;
  transition:background .18s ease, color .18s ease, transform .18s ease;
}
.nav-list > li > a:hover{ color:var(--blue-ink); transform:translateX(2px); }
.nav-list > li > a[aria-current="page"]{ background:var(--card); color:var(--ink); box-shadow:var(--shadow); }
.nav-num{
  font-family:"JetBrains Mono", monospace; font-size:.72rem; font-weight:600;
  color:var(--blue-ink);
}

/* on-this-page list, filled in by site.js */
.toc{ list-style:none; margin:8px 0 8px 10px; padding-left:14px; border-left:2px solid var(--panel-line); }
.toc:empty{ display:none; }
.toc li{ font-size:.86rem; line-height:1.35; }
.toc a{ display:block; padding:4px 0; color:var(--muted); transition:color .18s ease; }
.toc a:hover, .toc a.is-active{ color:var(--blue-ink); }
.toc .toc-group{
  font-family:"JetBrains Mono", monospace; font-size:.66rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--pink-ink);
  margin-top:10px; padding-bottom:2px;
}
.toc .toc-group:first-child{ margin-top:2px; }
.toc .toc-group a{ color:inherit; }

.link-list{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.link-list a{ font-weight:600; font-size:.93rem; }
.link-list a:hover{ text-decoration:underline; }
.link-list span{ display:block; font-size:.82rem; color:var(--muted); }

/* ----- theme toggle ------------------------------------------------------ */
.theme-toggle{
  position:fixed; top:18px; right:18px; z-index:40;
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:var(--card); color:var(--blue-ink);
  border:1px solid var(--panel-line); box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}
.theme-toggle:hover{ transform:translateY(-2px) rotate(-8deg); box-shadow:var(--shadow-lift); }
.theme-toggle svg{ width:21px; height:21px; }
.theme-toggle .icon-sun{ display:none; }
[data-theme="dark"] .theme-toggle .icon-sun{ display:block; }
[data-theme="dark"] .theme-toggle .icon-moon{ display:none; }

/* ----- page head --------------------------------------------------------- */
.page-head{ margin-bottom:clamp(32px, 4vw, 48px); max-width:760px; }
.page-title{
  font-family:"Fraunces", serif; font-weight:600;
  font-size:clamp(2.2rem, 4.2vw, 3.1rem); line-height:1.05; letter-spacing:-.015em;
  color:var(--ink);
}
.page-lead{ margin-top:14px; font-size:1.1rem; color:var(--ink-soft); }

/* ----- prose: rendered Markdown ------------------------------------------ */
.prose{ max-width:860px; color:var(--ink-soft); }
.prose > * + *{ margin-top:16px; }
.prose p{ font-size:1rem; }
.prose strong{ color:var(--ink); font-weight:700; }
.prose em{ font-style:italic; }
.prose a{ text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--blue-ink) 35%, transparent); text-underline-offset:3px; }
.prose a:hover{ text-decoration-color:var(--blue-ink); }

/* the Markdown's own h1 repeats the page title, so the layout shows one */
.prose > h1:first-child{ display:none; }
.prose > h1:first-child + *{ margin-top:0; }

.prose h2{
  font-family:"Fraunces", serif; font-weight:600;
  font-size:clamp(1.6rem, 2.8vw, 2.05rem); letter-spacing:-.01em; color:var(--ink);
  margin-top:clamp(44px, 5vw, 64px);
  display:flex; align-items:baseline; gap:14px;
}
.prose h2 .count{
  font-family:"JetBrains Mono", monospace; font-size:.78rem; font-weight:600; color:var(--blue-ink);
}
.prose h3{
  font-family:"Fraunces", serif; font-weight:600; font-size:1.3rem; line-height:1.25;
  color:var(--ink); margin-top:28px;
}
.prose h2 + *, .prose h3 + *{ margin-top:12px; }

.prose ul, .prose ol{ padding-left:0; display:flex; flex-direction:column; gap:9px; }
.prose ul{ list-style:none; }
.prose ul > li{ position:relative; padding-left:20px; }
.prose ul > li::before{
  content:""; position:absolute; left:2px; top:.66em;
  width:6px; height:6px; border-radius:50%; background:var(--pink);
}
.prose ol{ list-style:none; counter-reset:item; }
.prose ol > li{ counter-increment:item; position:relative; padding-left:34px; }
.prose ol > li::before{
  content:counter(item, decimal-leading-zero);
  position:absolute; left:0; top:.15em;
  font-family:"JetBrains Mono", monospace; font-size:.76rem; font-weight:600; color:var(--blue-ink);
}

.prose code{
  font-family:"JetBrains Mono", monospace; font-size:.84em;
  background:var(--panel); color:var(--blue-ink);
  padding:1px 6px; border-radius:5px;
  overflow-wrap:anywhere;
}

.prose blockquote{
  background:var(--pink-panel); border-left:4px solid var(--pink);
  border-radius:0 var(--radius) var(--radius) 0; padding:16px 20px;
}

.prose hr{ border:0; height:1px; background:var(--panel-line); margin:40px 0; }

/* ----- entry cards: each h3 and what follows it (built by site.js) ------- */
.entries{ display:flex; flex-direction:column; gap:16px; margin-top:20px; }
.entry{
  background:var(--card); border:1px solid var(--panel-line);
  border-radius:var(--radius); padding:22px 24px; box-shadow:var(--shadow);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.entry:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); border-color:transparent; }
.entry:has(:target){ border-color:var(--blue-ink); }
.entry > h3{ margin-top:0; }
.entry > * + *{ margin-top:12px; }
.entry ul{ gap:8px; }
.entry li, .entry p{ font-size:.96rem; }
.entry .anchor{
  margin-left:8px; font-family:"JetBrains Mono", monospace; font-size:.85rem;
  color:var(--muted); text-decoration:none; opacity:0; transition:opacity .18s ease;
}
.entry:hover .anchor, .entry .anchor:focus{ opacity:1; }

/* origins: entries hang off the CV's timeline spine */
[data-style="timeline"] .entries{ position:relative; padding-left:30px; gap:22px; }
[data-style="timeline"] .entries::before{
  content:""; position:absolute; left:6px; top:8px; bottom:8px; width:2px; border-radius:2px;
  background:linear-gradient(var(--blue), var(--pink) 70%, var(--panel-line));
}
[data-style="timeline"] .entry{ position:relative; }
[data-style="timeline"] .entry::before{
  content:""; position:absolute; left:-31px; top:26px;
  width:15px; height:15px; border-radius:50%;
  background:var(--card); border:3px solid var(--blue-ink);
  transition:transform .25s ease, background .25s ease, box-shadow .25s ease;
}
[data-style="timeline"] .entry:hover::before{
  background:var(--blue-ink); transform:scale(1.25); box-shadow:0 0 0 5px rgba(28,127,181,.16);
}

/* ----- tables ------------------------------------------------------------ */
.table-card{
  background:var(--card); border:1px solid var(--panel-line);
  border-radius:var(--radius); box-shadow:var(--shadow);
  overflow-x:auto; scrollbar-width:thin;
}
.prose table{ border-collapse:collapse; width:100%; font-size:.92rem; }
/* without site.js the table scrolls on its own instead of in a card */
.prose > table{ display:block; overflow-x:auto; }
.prose th{
  font-family:"JetBrains Mono", monospace; font-size:.7rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  text-align:left; padding:14px 16px; background:var(--panel);
  border-bottom:1px solid var(--panel-line); white-space:nowrap;
}
.prose td{ padding:12px 16px; vertical-align:top; border-top:1px solid var(--panel-line); }
.prose tr:first-child td{ border-top:0; }
.prose tbody tr{ transition:background .18s ease; }
.prose tbody tr:hover{ background:color-mix(in srgb, var(--panel) 55%, transparent); }
.prose td:first-child{ color:var(--ink); font-weight:600; min-width:150px; }
.prose td code{ overflow-wrap:normal; word-break:normal; }
.prose td:last-child{ min-width:120px; }

/* status chips on the sources page */
.status{
  display:inline-block; font-family:"JetBrains Mono", monospace;
  font-size:.68rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 10px; border-radius:999px; white-space:nowrap; margin-bottom:4px;
}
.status-checked{ background:var(--accent-strong); color:#fff; }
.status-unverified{ background:var(--pink-panel); color:var(--pink-ink); border:1px solid var(--pink); }
.status-recheck{ background:var(--panel); color:var(--blue-ink); border:1px solid var(--panel-line); }
td .status + .status-note{ display:block; font-size:.82rem; color:var(--muted); font-weight:400; }

/* ----- home -------------------------------------------------------------- */
.hero{ max-width:780px; }
.hero .page-title{ font-size:clamp(2.5rem, 5vw, 3.6rem); }
.hero .page-lead{ font-size:1.15rem; }

.section-cards{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:18px;
  margin-top:20px;
}
.section-card{
  display:flex; flex-direction:column; gap:6px;
  background:var(--card); border:1px solid var(--panel-line);
  border-radius:var(--radius); padding:22px 24px; box-shadow:var(--shadow);
  color:inherit; text-decoration:none !important;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.section-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); border-color:transparent; }
.section-card .card-num{
  font-family:"JetBrains Mono", monospace; font-size:.72rem; font-weight:600; color:var(--blue-ink);
}
.section-card .card-title{ font-family:"Fraunces", serif; font-weight:600; font-size:1.35rem; color:var(--ink); }
.section-card .card-text{ font-size:.94rem; color:var(--ink-soft); }
.section-card .card-go{ margin-top:auto; padding-top:8px; font-weight:600; font-size:.88rem; color:var(--blue-ink); }

.stats{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:18px; margin-top:20px;
}
.stat{
  background:var(--card); border:1px solid var(--panel-line);
  border-radius:var(--radius); padding:20px 22px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:8px;
}
.stat-value{
  font-family:"Fraunces", serif; font-weight:700; font-size:2.3rem; line-height:1; color:var(--ink);
}
.stat-label{ font-size:.94rem; color:var(--ink-soft); }
.stat-source{
  margin-top:auto; padding-top:6px;
  font-family:"JetBrains Mono", monospace; font-size:.7rem; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; color:var(--blue-ink);
}

.rules{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; margin-top:20px; }
.rule{
  border:1px solid var(--panel-line); border-radius:var(--radius); padding:16px 18px;
  background:color-mix(in srgb, var(--card) 60%, transparent);
}
.rule h3{ font-family:"Hanken Grotesk", sans-serif; font-size:1rem; font-weight:700; margin:0 0 4px; color:var(--ink); }
.rule p{ font-size:.92rem; }

/* ----- footer ------------------------------------------------------------ */
.site-foot{ max-width:860px; margin-top:72px; }
.site-foot p{ margin-top:14px; font-size:.86rem; color:var(--muted); }

/* ----- theme fade -------------------------------------------------------- */
body, .sidebar, .entry, .section-card, .stat, .table-card, .theme-toggle{
  transition:background-color .3s ease, color .3s ease, border-color .3s ease, transform .25s ease, box-shadow .25s ease;
}

/* ----- small screens: one column, sidebar becomes a header --------------- */
@media (max-width: 900px){
  .layout{ grid-template-columns:1fr; }
  .sidebar{ position:static; height:auto; overflow:visible; padding:28px 20px 24px; }
  .sidebar .block:last-child, .toc{ display:none; }
  .nav-list{ flex-direction:row; flex-wrap:wrap; gap:6px; }
  .nav-list > li > a{ margin:0; padding:6px 12px; border:1px solid var(--panel-line); border-radius:999px; background:var(--card); }
  .nav-num{ display:none; }
  .content{ padding:32px 16px 48px; }
  .entry{ padding:18px 18px; }
  [data-style="timeline"] .entries{ padding-left:24px; }
  [data-style="timeline"] .entry::before{ left:-25px; }
  .theme-toggle{ top:14px; right:14px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation:none !important; transition:none !important; }
}