/* johangronstedt.com — reading surface + mirrored libraries.
   grail.works reads on cream paper with teal ink and a gold accent. This is the
   monochrome reinterpretation of that same idea: the body flips to a warm off-white
   sheet with near-black ink, so long reading is comfortable, while the site chrome
   stays black. The accent is weight and rule, never colour. */

:root{
  --paper:#F4F3F0;
  --pink:#14140F;          /* paper ink */
  --pmute:#5F5F58;
  --prule:rgba(20,20,15,.16);
  --measure:760px;
}

/* ---------------- the sheet ---------------- */
body.page-reading{
  background:var(--paper);
  color:var(--pink);
  font-family:'Inter',system-ui,sans-serif;
  font-size:19.5px;line-height:1.72;
}
/* the chrome is built for a black page; keep it black while the sheet is light */
body.page-reading .site-header{background:rgba(10,10,10,.94);border-bottom-color:rgba(255,255,255,.1);}
body.page-reading .site-header.stuck{background:rgba(10,10,10,.96);}
body.page-reading .site-footer{background:var(--bg);color:var(--ink);border-top:0;margin-top:0;}

.rd{padding:150px 24px 20px;}
.rd-col{max-width:var(--measure);margin:0 auto;}
.rd-wide{max-width:calc(var(--measure) + 220px);}

.rd-back{color:var(--pmute);margin-bottom:26px;display:inline-flex;}
.rd-back:hover{color:var(--pink);}

.rd-kicker{
  font-weight:700;text-transform:uppercase;letter-spacing:.2em;font-size:11.5px;
  color:var(--pmute);margin-bottom:20px;
}
.rd-title{
  font-family:'Anton',Impact,sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(36px,5.4vw,64px);line-height:.94;letter-spacing:.004em;color:var(--pink);
}
.rd-guest{margin-top:16px;font-size:19px;font-weight:600;}
.rd-guest span{font-weight:400;color:var(--pmute);}
.rd-byline{margin-top:14px;font-size:14px;color:var(--pmute);}
.rd-source{
  margin:44px 0 0;padding-top:22px;border-top:1px solid var(--prule);
  font-size:14px;color:var(--pmute);
}
.rd-source a{border-bottom:1px solid var(--prule);}
.rd-source a:hover{border-bottom-color:var(--pink);}

/* ---------------- the body ---------------- */
.rd-body{margin-top:38px;}
.rd-body p{margin:0 0 23px;}
.rd-body p.sqsrte-large{font-size:19.5px;line-height:1.72;}
.rd-body p.sqsrte-small{font-size:15px;line-height:1.55;color:var(--pmute);}

/* Headings. grail rules them in gold; here a black rule does the same job. */
.rd-body h2,.rd-body h3,.rd-body h4{
  font-family:'Anton',Impact,sans-serif;font-weight:400;text-transform:uppercase;
  color:var(--pink);line-height:1.1;margin:52px 0 8px;letter-spacing:.004em;
}
.rd-body h2{font-size:31px;} .rd-body h3{font-size:26px;} .rd-body h4{font-size:21px;}
.rd-body h2::before,.rd-body h3::before,.rd-body h4::before{
  content:"";display:block;width:34px;height:3px;background:var(--pink);margin-bottom:17px;
}
.rd-body h2 strong,.rd-body h3 strong,.rd-body h4 strong{font-weight:inherit;}

/* Deck. The source corpus is inconsistent (h3>em, h3>strong, p>strong>em), and
   grail's CSS silently no-ops on two of the three. Cover all three here so every
   essay gets the treatment rather than only the ones that happen to match. */
.rd-body > h3:first-of-type:has(em),
.rd-body > .article-image:first-child + h3:has(em){
  font-family:'Inter',sans-serif;font-weight:400;font-size:23px;line-height:1.5;
  color:var(--pmute);margin:0 0 40px;max-width:33em;text-transform:none;letter-spacing:0;
}
.rd-body > h3:first-of-type:has(em)::before,
.rd-body > .article-image:first-child + h3:has(em)::before{display:none;}
.rd-body > h3:first-of-type:has(em) em{font-style:italic;}

.rd-body blockquote{
  margin:36px 0;padding:2px 0 2px 26px;border-left:3px solid var(--pink);
  font-size:25px;line-height:1.36;font-weight:600;
}
.rd-body blockquote p{margin:0;}
.rd-body .answer-first{
  border-left:3px solid var(--prule);padding:4px 0 4px 20px;font-weight:600;margin:26px 0;
}

.rd-body a{color:var(--pink);border-bottom:1px solid var(--prule);}
.rd-body a:hover{border-bottom-color:var(--pink);}
.rd-body strong{font-weight:650;}
.rd-body ul,.rd-body ol{margin:0 0 23px;padding-left:0;}
.rd-body li{margin:0 0 14px 26px;position:relative;list-style:none;}
.rd-body ul li::before{
  content:"";position:absolute;left:-20px;top:.68em;width:7px;height:7px;
  border-radius:50%;background:var(--pink);
}
.rd-body ol{counter-reset:n;}
.rd-body ol li{counter-increment:n;}
.rd-body ol li::before{content:counter(n) ".";position:absolute;left:-26px;font-weight:700;}
.rd-body .sqsrte-text-highlight{
  background:linear-gradient(transparent 55%, rgba(20,20,15,.16) 55%);
}

.rd-body .article-image{margin:40px 0;text-align:center;}
.rd-body .article-image img{
  width:100%;height:auto;border-radius:5px;box-shadow:0 18px 44px -26px rgba(0,0,0,.5);
}
.rd-body .article-image figcaption{
  font-size:14px;line-height:1.55;color:var(--pmute);font-style:italic;
  text-align:left;margin-top:12px;white-space:pre-wrap;
}
.rd-body > .article-image:first-child{margin:6px 0 30px;}
@media (min-width:768px){
  .rd-body .article-image.img-card{display:flex;align-items:center;gap:40px;text-align:left;}
  .rd-body .article-image.img-card > picture{flex:0 0 55%;min-width:0;}
  .rd-body .article-image.img-card figcaption{flex:1;min-width:0;margin-top:0;}
  .rd-body .article-image.img-card.card-right{flex-direction:row-reverse;}
}
/* end mark, the way grail closes an article */
.rd-body::after{
  content:"\2022 \2022 \2022";display:block;text-align:center;letter-spacing:6px;
  font-size:14px;color:var(--pmute);margin:52px 0 0;
}

/* ---------------- episode extras ---------------- */
.ep-video{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;
  background:#000;box-shadow:0 26px 60px -34px rgba(0,0,0,.6);margin:34px 0 8px;}
.ep-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.ep-listen{margin:26px 0 6px;padding:22px 0;border-top:1px solid var(--prule);border-bottom:1px solid var(--prule);}
.ep-listen-l{font-weight:700;text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:var(--pmute);margin-bottom:14px;}
.ep-listen .pill-ghost{color:var(--pink);box-shadow:inset 0 0 0 1.5px var(--prule);}
.ep-listen .pill-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--pink);}
.ep-listen audio{width:100%;margin-top:16px;}
.ep-notes p{margin:0 0 20px;}
.ep-transcript{margin:34px 0 0;border-top:1px solid var(--prule);padding-top:22px;}
.ep-transcript summary{cursor:pointer;font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--pmute);}
.ep-transcript summary:hover{color:var(--pink);}
.ep-transcript .tr-wrap{margin-top:24px;max-height:70vh;overflow-y:auto;padding-right:8px;}
.tr-turn{margin:0 0 18px;}
.tr-meta{display:flex;gap:10px;align-items:baseline;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:11px;color:var(--pmute);margin-bottom:5px;}
.tr-time{font-weight:400;opacity:.7;}
.tr-turn p{margin:0;font-size:16.5px;line-height:1.62;}

/* ---------------- prev / next ---------------- */
.rd-pag{
  max-width:calc(var(--measure) + 48px);margin:20px auto 0;padding:30px 24px 70px;
  display:flex;gap:20px;justify-content:space-between;
  border-top:1px solid var(--prule);
}
.rd-pag .pag{max-width:46%;}
.rd-pag .next{text-align:right;margin-left:auto;}
.rd-pag .lbl{display:block;font-weight:700;text-transform:uppercase;letter-spacing:.18em;
  font-size:10.5px;color:var(--pmute);margin-bottom:7px;}
.rd-pag .ttl{font-family:'Anton',Impact,sans-serif;text-transform:uppercase;font-size:20px;
  line-height:1.06;color:var(--pink);}
.rd-pag .pag:hover .ttl{opacity:.62;}

@media (max-width:640px){
  body.page-reading{font-size:18px;}
  .rd{padding-top:120px;}
  .rd-pag{flex-direction:column;}
  .rd-pag .pag,.rd-pag .next{max-width:none;text-align:left;margin-left:0;}
}