:root{--night:#0f1730;--deep:#0a1024;--panel:#151f3d;--cream:#efe3c8;--soft:#c9bfa8;--copper:#d08a57;--line:#26335a}
*{box-sizing:border-box}
html{font-size:18px}
body{margin:0;background:var(--deep);color:var(--cream);font-family:"EB Garamond",Georgia,"Times New Roman",serif;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--copper);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:#f0b07f}
h1,h2,h3{font-family:"Cormorant Garamond","EB Garamond",Georgia,serif;font-weight:600;letter-spacing:.01em;line-height:1.2}
h1{font-size:2.3rem;margin:.3rem 0 1rem}
h2{font-size:1.6rem;margin:2.4rem 0 .8rem;color:var(--cream);border-bottom:1px solid var(--line);padding-bottom:.3rem}
h3{font-size:1.2rem;margin:1.6rem 0 .4rem;color:#f3e7cf}
header.site{display:flex;justify-content:space-between;align-items:center;gap:1rem;max-width:860px;margin:0 auto;padding:1rem 1.2rem}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--cream);text-decoration:none;font-family:"Cormorant Garamond",serif;font-size:1.35rem;letter-spacing:.12em;text-transform:uppercase}
nav a{margin-left:1rem;color:var(--soft);text-decoration:none;font-size:.95rem}
main{max-width:860px;margin:0 auto;padding:0 1.2rem 3rem}
.hero img{width:100%;height:auto;border-radius:10px;display:block}
.lede{font-size:1.15rem;color:var(--soft);margin:1.2rem 0}
.kicker{color:var(--copper);text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;margin:1.2rem 0 0}
.answer{font-size:1.18rem;background:var(--panel);border-left:3px solid var(--copper);padding:1rem 1.2rem;border-radius:0 8px 8px 0}
.video{position:relative;aspect-ratio:16/9;margin:1.4rem 0 .6rem;border-radius:10px;overflow:hidden;background:#000}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.btn{display:inline-block;background:var(--copper);color:var(--deep);padding:.35rem .9rem;border-radius:999px;text-decoration:none;font-weight:500}
.btn:hover{background:#e7a575;color:var(--deep)}
.small{font-size:.85rem;color:var(--soft)}
ol.chapters{list-style:none;padding:0;columns:2;column-gap:2rem}
ol.chapters li{break-inside:avoid;margin:.15rem 0}
ol.chapters a{color:var(--cream);text-decoration:none}
ol.chapters a:hover{color:var(--copper)}
time{font-variant-numeric:tabular-nums;color:var(--copper);display:inline-block;min-width:4.2em}
.qa{background:var(--panel);border-radius:8px;padding:.2rem 1.1rem .6rem;margin:.8rem 0}
.qa h3{margin-top:.8rem}
details summary{cursor:pointer;color:var(--copper);font-size:1.05rem;margin:.4rem 0 1rem}
#transcript p{color:#e6dcc4}
#transcript h3 a{font-size:.85rem;margin-right:.4rem}
ul.cards{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.1rem}
ol.cards{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem}
.cards a{display:flex;flex-direction:column;background:var(--panel);border-radius:10px;overflow:hidden;text-decoration:none;color:var(--cream);height:100%}
.cards img{width:100%;height:auto;display:block}
.cards span{padding:.6rem .8rem}
.cards .q{font-family:"Cormorant Garamond",serif;font-size:1.15rem;font-weight:600;line-height:1.25;padding-bottom:.2rem}
.cards .len{color:var(--copper);font-size:.8rem;padding-top:0}
.small-cards{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))!important}
ul.plain{padding-left:1.1rem}
footer.site{max-width:860px;margin:0 auto;padding:2rem 1.2rem 3rem;border-top:1px solid var(--line);color:var(--soft);font-size:.95rem}
@media (max-width:600px){html{font-size:17px}h1{font-size:1.8rem}ol.chapters{columns:1}nav a{margin-left:.7rem}.brand span{font-size:1.1rem}}
@media (prefers-reduced-motion:no-preference){a{transition:color .2s}}