/* Doodle History — "the history notebook". Generated by scripts/build-site.ts */
:root{
  --cream:#FBF3E2; --ink:#1d1a16; --red:#E0503A; --line:#1d1a16;
  --muted:#6b635a; --card:#fffdf8; --paper:#f3e7cf; --mood:#E0503A;
  --wobble:255px 15px 225px 15px/15px 225px 15px 255px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font:17px/1.65 "Atkinson Hyperlegible",Georgia,serif;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .03 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1,h2,h3,.brand,.pill,.lnk,.yt-btn{font-family:"Shantell Sans","Comic Sans MS",cursive}
.wrap{max-width:860px; margin:0 auto; padding:0 22px}

/* header */
header.site{border-bottom:3px solid var(--line); background:var(--cream); position:sticky; top:0; z-index:10}
.nav{display:flex; align-items:center; gap:16px; padding:12px 0}
.brandlink{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.nav img{width:46px; height:46px; border-radius:50%; border:2px solid var(--line); background:#fff}
.brand{font-weight:800; font-size:20px; letter-spacing:.2px}
.nav nav{margin-left:auto; display:flex; align-items:center; gap:14px}
.nav nav a{color:var(--ink); text-decoration:none; font-weight:700; font-size:15.5px}
.nav nav a:hover,.nav nav a[aria-current]{color:var(--red)}
.nav nav a[aria-current]{text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:5px; text-decoration-color:var(--red)}
.yt-btn{background:var(--red); color:#fff!important; padding:7px 14px; border:2px solid var(--line);
  border-radius:12px 4px 12px 4px; box-shadow:3px 3px 0 var(--line)}
.yt-btn:hover{transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--line)}

/* hero */
.hero{padding:56px 0 34px; border-bottom:3px solid var(--line)}
.hero h1{font-size:clamp(34px,6vw,52px); line-height:1.08; margin:0 0 14px; font-weight:800}
.squiggle{position:relative; white-space:nowrap; color:var(--red)}
.squiggle::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:10px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 6 Q12 1 25 6 T50 6 T75 6 T100 6' fill='none' stroke='%231d1a16' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%}
.hero p.lead,main p.lead{font-size:20px; color:var(--muted); margin:0 0 22px; max-width:62ch}
.pill{display:inline-block; background:var(--red); color:#fff; font-weight:700;
  padding:11px 20px; border-radius:var(--wobble); text-decoration:none; border:2px solid var(--line);
  box-shadow:4px 4px 0 var(--line); transition:transform .06s ease, box-shadow .06s ease}
.pill:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--line)}
.pill.alt{background:var(--card); color:var(--ink)}
.social-row{display:flex; flex-wrap:wrap; gap:14px; align-items:center}

/* main text */
main{padding:36px 0 10px}
main h1{font-size:clamp(28px,5vw,40px); line-height:1.15; margin:14px 0 8px; font-weight:800}
main h2{font-size:25px; margin:38px 0 12px; font-weight:700; border-bottom:2px solid var(--line); padding-bottom:6px}
main p,main li{color:#2a2620}
a{color:var(--red)}
.card{background:var(--card); border:2px solid var(--line); border-radius:14px; padding:18px 20px; margin:18px 0; box-shadow:4px 4px 0 var(--line)}
.note{font-size:14.5px; color:var(--muted)}

/* video facade */
.video-facade{position:relative; aspect-ratio:16/9; border:3px solid var(--line);
  border-radius:14px; overflow:hidden; background:#000; box-shadow:6px 6px 0 var(--line); margin:20px 0}
.video-facade img{width:100%; height:100%; object-fit:cover; display:block}
.video-facade iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.vf-link{display:block; height:100%}
.vf-play{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:34px; color:#fff}
.vf-play::before{content:""; position:absolute; width:92px; height:64px; background:var(--mood);
  border:3px solid var(--line); border-radius:var(--wobble); z-index:-1; box-shadow:4px 4px 0 rgba(0,0,0,.45);
  transition:transform .08s ease}
.vf-play{z-index:1}
.vf-link:hover .vf-play::before{transform:scale(1.08)}

/* episode grid */
.ep-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:22px; margin:20px 0 34px}
.ep-card{display:flex; flex-direction:column; background:var(--card); border:2px solid var(--line);
  border-radius:14px; overflow:hidden; text-decoration:none; color:var(--ink);
  box-shadow:4px 4px 0 var(--line); transition:transform .07s ease, box-shadow .07s ease}
.ep-card:hover{transform:translate(-2px,-3px); box-shadow:7px 7px 0 var(--line)}
.ep-card img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block; border-bottom:3px solid var(--mood)}
.ep-card-body{display:flex; flex-direction:column; gap:6px; padding:13px 15px 15px}
.ep-card-title{font-weight:700; font-family:"Shantell Sans",cursive; font-size:16.5px; line-height:1.3}
.ep-card-meta{font-size:13.5px; color:var(--muted)}
.latest h3{margin:8px 0 6px; font-size:23px}
.latest h3 a{color:var(--ink); text-decoration:none}
.latest h3 a:hover{color:var(--red)}
.more{font-weight:700}

/* episode page */
.crumbs{font-size:14px; color:var(--muted); margin-top:16px}
.crumbs a{color:var(--muted)}
.ep-meta{color:var(--muted); font-size:15px; margin:2px 0 6px}
.answer{background:var(--card); border:2px solid var(--mood); border-radius:var(--wobble);
  padding:20px 24px; margin:24px 0; box-shadow:5px 5px 0 var(--mood)}
.answer-label{margin:0 0 8px!important; border:none!important; font-size:15px!important;
  text-transform:uppercase; letter-spacing:1.5px; color:var(--mood)}
.answer p{margin:0; font-size:18.5px}
.chapter-list{list-style:none; padding:0; margin:10px 0; display:flex; flex-direction:column; gap:2px}
.chapter-list a{display:flex; gap:12px; align-items:baseline; padding:8px 12px; text-decoration:none;
  color:var(--ink); border-radius:10px}
.chapter-list a:hover{background:var(--paper)}
.ts{font-variant-numeric:tabular-nums; font-weight:700; color:var(--mood); min-width:44px; font-size:14.5px}
.sources ul{padding-left:22px}
.transcript details{background:var(--card); border:2px solid var(--line); border-radius:14px; padding:4px 20px; box-shadow:4px 4px 0 var(--line)}
.transcript summary{cursor:pointer; font-weight:700; padding:12px 0; font-family:"Shantell Sans",cursive}
.transcript p{font-size:16px}
.cta-box{background:var(--paper); border:2px solid var(--line); border-radius:14px; padding:6px 20px; margin:30px 0}
.prevnext{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:26px 0 10px}
.pn-card{display:flex; flex-direction:column; gap:4px; background:var(--card); border:2px solid var(--line);
  border-radius:14px; padding:13px 16px; text-decoration:none; color:var(--ink); font-weight:700;
  box-shadow:4px 4px 0 var(--line)}
.pn-card:hover{transform:translate(-1px,-2px); box-shadow:6px 6px 0 var(--line)}
.pn-k{font-size:12.5px; text-transform:uppercase; letter-spacing:1px; color:var(--muted)}

/* links hub */
.hub{max-width:520px;margin:0 auto;padding:38px 22px 60px;text-align:center}
.hub img.logo{width:104px;height:104px;border-radius:50%;border:3px solid var(--line);background:#fff}
.hub h1{font-size:30px;margin:16px 0 4px}
.hub-tag{color:var(--muted);margin:0 0 26px}
.links{display:flex;flex-direction:column;gap:14px}
.lnk{display:flex;align-items:center;justify-content:center;gap:10px;
  border:2px solid var(--line);border-radius:14px;padding:15px 18px;
  font-weight:700;font-size:17px;text-decoration:none;color:var(--ink);background:var(--card);
  transition:transform .06s ease, box-shadow .06s ease}
.lnk:hover{transform:translateY(-2px);box-shadow:4px 4px 0 var(--line)}
.lnk.primary{background:var(--red);color:#fff}
.lnk small{display:block;font-weight:600;font-size:12.5px;opacity:.8}
.hub footer{margin-top:30px;font-size:13px;color:var(--muted)}
.hub footer a{color:var(--ink)}

/* legacy pages (privacy.html / terms.html are hand-maintained, not generated) */
.nav > a{color:var(--ink); text-decoration:none; font-weight:700; font-size:15.5px}
.nav > a:hover{color:var(--red)}
.nav > a.spacer{margin-left:auto}
table{width:100%; border-collapse:separate; border-spacing:0; margin:18px 0; font-size:15px;
  background:var(--card); border:2px solid var(--line); border-radius:14px; overflow:hidden;
  box-shadow:4px 4px 0 var(--line); display:block; overflow-x:auto}
table thead,table tbody{display:table; width:100%; table-layout:fixed}
th,td{padding:11px 14px; text-align:left; vertical-align:top; border-bottom:2px solid var(--line)}
td+td,th+th{border-left:2px solid var(--line)}
tbody tr:last-child td{border-bottom:none}
th{background:var(--paper); font-family:"Shantell Sans",cursive; font-weight:700; font-size:14px;
  text-transform:uppercase; letter-spacing:.6px}
tbody tr:nth-child(even) td{background:#faf4e6}
.tag{display:inline-block; background:var(--paper); border:2px solid var(--line); border-radius:8px;
  padding:1px 8px; font-size:13px; font-weight:700; margin:2px 4px 2px 0}
.updated{font-size:14px; color:var(--muted); margin-top:-4px}

/* footer */
footer.site{border-top:3px solid var(--line); margin-top:50px; padding:26px 0; color:var(--muted); font-size:14px}
footer.site a{color:var(--ink); font-weight:600}
.foot-tag{font-family:"Shantell Sans",cursive; font-weight:700; color:var(--ink); font-size:16px}

/* stagger-in cards */
@media (prefers-reduced-motion:no-preference){
  .ep-grid .ep-card{animation:rise .45s ease backwards}
  .ep-grid .ep-card:nth-child(2){animation-delay:.05s}
  .ep-grid .ep-card:nth-child(3){animation-delay:.1s}
  .ep-grid .ep-card:nth-child(4){animation-delay:.15s}
  .ep-grid .ep-card:nth-child(5){animation-delay:.2s}
  .ep-grid .ep-card:nth-child(6){animation-delay:.25s}
  @keyframes rise{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
}
@media(max-width:560px){
  .hero h1{font-size:32px}
  .nav .brand{display:none}
  .nav nav{gap:10px}
  .prevnext{grid-template-columns:1fr}
}