/* Long-form reader: bio + blog archive + post pages.
   Brand-aligned with the TikTok-style landing — dark backgrounds, brand
   accents (yellow #ffce00, red #e60000), Caveat Brush for display
   headings, Inter for body so long-form reading stays comfortable. */

:root{
  --bg:#0f0a0a;
  --ink:#f3eee6;
  --ink-dim:#a89c8b;
  --accent:#ffce00;
  --accent-2:#e60000;
  --rule:rgba(255,255,255,0.10);
  --card:rgba(255,255,255,0.04);
  --card-hover:rgba(255,206,0,0.06);
}

*{ box-sizing:border-box; }
html, body{ margin:0; padding:0; background:var(--bg); color:var(--ink); }
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--accent); text-decoration:none; }
a:hover{ color:#fff; text-decoration:underline; }

/* Site header */
.sshead{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 28px;
  border-bottom:1px solid var(--rule);
  background:rgba(0,0,0,0.4);
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(180%) blur(8px);
}
.sshead-brand{
  font-family:'Caveat Brush',Impact,sans-serif;
  font-size:28px; letter-spacing:.04em;
  color:var(--ink); text-transform:lowercase;
}
.sshead-brand:hover{ color:var(--accent); text-decoration:none; }
.sshead-nav{ display:flex; gap:18px; }
.sshead-nav a{ color:var(--ink-dim); font-weight:500; }
.sshead-nav a.active, .sshead-nav a:hover{ color:var(--accent); text-decoration:none; }

/* Footer */
.ssfoot{
  border-top:1px solid var(--rule);
  padding:22px 28px;
  color:var(--ink-dim);
  font-size:14px;
  text-align:center;
  margin-top:80px;
}
.ssfoot a{ color:var(--ink-dim); }
.ssfoot a:hover{ color:var(--accent); }

/* ---- Archive ---- */
.archive{ max-width:880px; margin:0 auto; padding:48px 28px 80px; }
.archive-hero{ margin-bottom:48px; }
.archive-hero h1{
  font-family:'Caveat Brush',Impact,sans-serif;
  font-size:72px; margin:0 0 12px; letter-spacing:.02em;
  text-shadow:0 0 24px rgba(255,206,0,0.25);
}
.archive-hero p{ color:var(--ink-dim); margin:0 0 18px; font-size:18px; }
#archive-filter{
  width:100%; max-width:420px;
  padding:11px 14px; border-radius:8px;
  border:1px solid var(--rule);
  background:rgba(0,0,0,0.5); color:var(--ink);
  font-family:inherit; font-size:15px;
}
#archive-filter:focus{ outline:none; border-color:var(--accent); }

.year{ margin-bottom:48px; }
.year-head{
  font-family:'Caveat Brush',Impact,sans-serif;
  font-size:42px; margin:0 0 18px;
  color:var(--accent);
  letter-spacing:.04em;
}
.post-list{ list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.post-card{ border:1px solid var(--rule); border-radius:10px; background:var(--card); transition:background .15s ease, border-color .15s ease, transform .15s ease; overflow:hidden; }
.post-card:hover{ background:var(--card-hover); border-color:var(--accent); transform:translateY(-1px); }
.post-card a{ display:flex; gap:16px; padding:14px 18px; color:var(--ink); align-items:center; }
.post-card a:hover{ text-decoration:none; }
.post-thumb{ flex:0 0 90px; width:90px; height:90px; border-radius:8px; overflow:hidden; background:#000; }
.post-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.post-card-body{ flex:1 1 auto; min-width:0; }
.post-card h3{
  margin:0 0 4px;
  font-family:'Caveat Brush',Impact,sans-serif;
  font-weight:400; font-size:24px; letter-spacing:.01em;
  color:var(--ink);
}
.post-card:hover h3{ color:var(--accent); }
.post-date{ margin:0 0 6px; color:var(--ink-dim); font-size:13px; }
.post-excerpt{ margin:0; color:var(--ink-dim); font-size:14px; line-height:1.5; }

/* ---- Reader (single post + bio) ---- */
.reader{ max-width:720px; margin:0 auto; padding:32px 24px 80px; }
.reader-hero{ margin:0 0 24px; border-radius:10px; overflow:hidden; box-shadow:0 10px 40px rgba(0,0,0,0.6); }
.reader-hero img{ width:100%; height:auto; display:block; max-height:360px; object-fit:cover; }
.reader-back{
  display:inline-block; margin-bottom:18px;
  color:var(--ink-dim); font-size:14px;
}
.reader-back:hover{ color:var(--accent); }
.reader-header{ margin-bottom:24px; padding-bottom:18px; border-bottom:1px solid var(--rule); }
.reader-header h1{
  font-family:'Caveat Brush',Impact,sans-serif;
  font-weight:400; font-size:54px; line-height:1.05;
  margin:0 0 8px;
  letter-spacing:.01em;
  text-shadow:0 0 20px rgba(255,206,0,0.18);
}
.reader-date{ margin:0; color:var(--ink-dim); font-size:14px; }
.reader-body{ font-size:17px; }
.reader-body p{ margin:0 0 1.2em; }
.reader-body h2{
  font-family:'Caveat Brush',Impact,sans-serif;
  font-weight:400; font-size:34px;
  margin:1.4em 0 .5em;
  color:var(--accent);
}
.reader-body h3{ font-size:22px; margin:1.2em 0 .4em; color:var(--ink); }
.reader-body a{ color:var(--accent); border-bottom:1px dotted rgba(255,206,0,0.4); }
.reader-body a:hover{ color:#fff; border-bottom-color:#fff; }
.reader-body strong{ color:#fff; }
.reader-body em{ color:var(--ink); font-style:italic; }
.reader-body img{ max-width:100%; height:auto; display:block; margin:1.4em auto; border-radius:6px; box-shadow:0 6px 20px rgba(0,0,0,0.5); }
/* Bio headshot: floats right so the bio paragraphs wrap around it. */
.bio-page .reader-body .bio-headshot{
  float:right;
  width:180px; height:180px;
  object-fit:cover;
  margin:4px 0 14px 22px;
  border-radius:50%;
  box-shadow:0 10px 28px rgba(0,0,0,0.55), 0 0 0 2px rgba(255,206,0,0.35);
  shape-outside:circle();
}
@media (max-width:520px){
  .bio-page .reader-body .bio-headshot{ width:120px; height:120px; margin:2px 0 10px 14px; }
}
.reader-body blockquote{
  margin:1.4em 0; padding:8px 0 8px 16px;
  border-left:3px solid var(--accent);
  color:var(--ink-dim); font-style:italic;
}
.reader-body hr{ border:0; border-top:1px solid var(--rule); margin:2em 0; }
.reader-body ul, .reader-body ol{ margin:0 0 1.2em; padding-left:1.4em; }

/* Prev / next pager */
.reader-pager{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  margin-top:48px; padding-top:24px;
  border-top:1px solid var(--rule);
}
.reader-pager > *{
  display:block; padding:14px 16px; border-radius:8px;
  border:1px solid var(--rule); background:var(--card);
  min-height:64px;
}
.reader-pager a{ color:var(--ink); transition:border-color .15s ease, background .15s ease; }
.reader-pager a:hover{ border-color:var(--accent); background:var(--card-hover); text-decoration:none; }
.reader-pager .pager-next{ text-align:right; }
.reader-pager span{ display:block; font-size:12px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.08em; margin-bottom:4px; }
.reader-pager strong{ font-family:'Caveat Brush',Impact,sans-serif; font-weight:400; font-size:20px; color:var(--ink); }
.reader-pager a:hover strong{ color:var(--accent); }

/* ---- Topics: rail, pills, chips, topic-page hero, filed-under ---- */
.topics-rail{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  margin:0 0 36px;
  padding:14px 16px;
  border:1px solid var(--rule);
  border-radius:10px;
  background:rgba(0,0,0,0.35);
}
.topics-rail-label{
  text-transform:uppercase; letter-spacing:.12em;
  font-size:12px; color:var(--ink-dim);
  margin-right:4px;
}
.topic-chip{
  display:inline-block;
  padding:5px 11px;
  border-radius:999px;
  font-size:12px;
  font-weight:500;
  letter-spacing:.04em;
  white-space:nowrap;
  border:1px solid currentColor;
  background:transparent;
  transition:background .15s ease, color .15s ease;
}
.topic-chip:hover{ text-decoration:none; }
.topic-chip-lg{ padding:8px 16px; font-size:14px; }

.topic-chip.topic-banking { color:var(--accent); }
.topic-chip.topic-banking:hover { background:var(--accent); color:#0a0a0a; }
.topic-chip.topic-cio     { color:#ff5252; }
.topic-chip.topic-cio:hover     { background:#ff5252; color:#0a0a0a; }
.topic-chip.topic-career  { color:#f3eee6; }
.topic-chip.topic-career:hover  { background:#f3eee6; color:#0a0a0a; }

/* Topic page hero */
.topic-page .reader-back{ display:inline-block; margin-bottom:12px; }
.topic-hero{ margin:0 0 36px; padding-bottom:18px; border-bottom:1px solid var(--rule); }
.topic-eyebrow{
  font-size:12px; text-transform:uppercase; letter-spacing:.16em;
  margin:0 0 6px; color:var(--ink-dim);
}
.topic-hero h1{
  font-family:'Caveat Brush',Impact,sans-serif;
  font-size:64px; line-height:0.95;
  margin:0 0 8px; letter-spacing:.02em;
}
.topic-hero .topic-kicker{
  font-style:italic; font-size:20px; margin:0 0 8px;
  color:var(--ink);
}
.topic-hero .topic-blurb{
  margin:0; color:var(--ink-dim);
  display:flex; flex-wrap:wrap; gap:12px; align-items:baseline;
}
.topic-count{
  font-size:12px; text-transform:uppercase; letter-spacing:.12em;
  color:var(--accent);
}

.topic-page-banking .topic-hero h1{ color:var(--accent); text-shadow:0 0 24px rgba(255,206,0,0.3); }
.topic-page-cio     .topic-hero h1{ color:#ff5252;       text-shadow:0 0 24px rgba(255,82,82,0.3); }
.topic-page-career  .topic-hero h1{ color:#f3eee6;       text-shadow:0 0 24px rgba(243,238,230,0.18); }

.topic-section .year-head{ font-size:32px; }

/* Filed-under footer on a post page */
.filed-under{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  margin-top:36px; padding-top:18px;
  border-top:1px solid var(--rule);
}
.filed-under-label{
  font-size:12px; text-transform:uppercase; letter-spacing:.12em;
  color:var(--ink-dim);
}

/* ---- Mobile ---- */
@media (max-width:640px){
  .archive-hero h1{ font-size:54px; }
  .reader-header h1{ font-size:38px; }
  .reader{ padding:24px 18px 60px; }
  .archive{ padding:32px 18px 60px; }
  .reader-pager{ grid-template-columns:1fr; }
  .reader-pager .pager-next{ text-align:left; }
  .sshead{ padding:14px 18px; }
  .topic-hero h1{ font-size:46px; }
  .topics-rail{ padding:12px 14px; }
}