/* joy-prose.css - the look of a piece of writing on this site.
 *
 * ONE FILE, TWO SCREENS. The reading page (/post/<slug>) and the editor (/admin/write) both
 * use it, which is the whole point: what he sees while writing IS what a reader gets, because
 * it is not a copy of those rules, it is the same rules. Every previous "preview" I have seen
 * drifts from the real page within a week; this cannot.
 *
 * Everything is scoped to .pb so it can be dropped onto any page without touching it.
 */

:root{--fs:19px;--lh:1.68;}
[data-joy-font="lora"] .pb{font-family:'Lora',Georgia,serif;}
.rule{border:none;border-top:3px solid var(--ink);opacity:.18;margin:26px 0;}
/* body blocks */
.pb{font-size:var(--fs);line-height:var(--lh);}
.pb p{margin:0 0 20px;}
.pb h2{font-family:'Permanent Marker',cursive;font-size:24px;line-height:1.2;margin:34px 0 10px;}
.pb h3{font-family:'Permanent Marker',cursive;font-size:19px;line-height:1.25;margin:28px 0 8px;}
.pb h4{font-family:'Patrick Hand SC',cursive;font-size:16px;letter-spacing:.04em;text-transform:uppercase;margin:24px 0 6px;opacity:.85;}
.pb ul,.pb ol{margin:0 0 20px;padding-left:28px;}
/* The global stylesheet sets list-style:none on lists app-wide, which is right for
   nav menus and wrong for prose. A numbered list that lost its numbers is not the
   list he wrote, so the reading page puts the markers back for its own body only. */
.pb ul{list-style:disc outside;}
.pb ol{list-style:decimal outside;}
.pb ul ul{list-style:circle outside;}
.pb ol ol{list-style:lower-alpha outside;}
.pb li{margin:0 0 10px;padding-left:4px;}
.pb li::marker{color:var(--mint-deep);font-weight:700;}
.pb blockquote{margin:0 0 22px;padding:4px 0 4px 18px;border-left:5px solid var(--mint-deep);font-size:21px;line-height:1.5;}
.pb a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--mint-deep);}
.pb strong{font-weight:700;}
.pb figure{margin:0 0 24px;}
.pb figure img{width:100%;border:3px solid var(--ink);border-radius:14px;display:block;box-shadow:4px 4px 0 var(--ink);background:var(--cream);}
.pb figcaption{font-family:'Patrick Hand',cursive;font-size:14px;opacity:.7;text-align:center;margin-top:8px;}
.pb pre{background:var(--ink);color:#f5f5f5;border-radius:14px;padding:14px 16px;overflow:auto;font-size:14px;line-height:1.5;margin:0 0 22px;}
.pb code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;}
.btnrow{margin:0 0 24px;}
.pbtn{display:inline-block;font-family:'Permanent Marker',cursive;font-size:16px;background:var(--mint);border:3px solid var(--ink);border-radius:12px;padding:10px 18px;text-decoration:none;box-shadow:3px 3px 0 var(--ink);}
.pbtn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink);}
.bmk{display:flex;gap:12px;align-items:stretch;border:3px solid var(--ink);border-radius:14px;background:var(--cream);text-decoration:none;overflow:hidden;margin:0 0 24px;box-shadow:3px 3px 0 var(--ink);}
.bmk .bt{padding:12px 14px;flex:1;min-width:0;}
.bmk .bh{font-family:'Patrick Hand SC',cursive;font-size:16px;margin-bottom:4px;}
.bmk .bd{font-size:14px;opacity:.75;line-height:1.4;}
.bmk .bu{font-family:'Patrick Hand SC',cursive;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;opacity:.55;margin-top:8px;}
.bmk img{width:34%;max-width:180px;object-fit:cover;border-left:3px solid var(--ink);}
.embed{position:relative;width:100%;padding-top:56.25%;border:3px solid var(--ink);border-radius:14px;overflow:hidden;margin:0 0 24px;box-shadow:4px 4px 0 var(--ink);background:var(--ink);}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.pb video{width:100%;border:3px solid var(--ink);border-radius:14px;margin:0 0 24px;box-shadow:4px 4px 0 var(--ink);background:#000;}
.cta{border:3px solid var(--ink);border-radius:16px;background:var(--tint-paleyellow);padding:16px 18px;margin:0 0 24px;box-shadow:4px 4px 0 var(--ink);}
.cta .sp{font-family:'Patrick Hand SC',cursive;font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.6;margin-bottom:6px;}
.filecard{display:flex;gap:12px;align-items:center;border:3px dashed var(--ink);border-radius:14px;padding:12px 14px;margin:0 0 24px;text-decoration:none;background:var(--cream);}

/* Transcripts. On Ghost these were html cards driven by Alpine.js - a framework this site does
   not load - so they would have rendered as a dead button above a wall of markup. <details> is
   the browser's own version of the same thing and needs no JavaScript at all. */
.tsc{border:3px solid var(--ink);border-radius:14px;background:var(--cream);margin:0 0 24px;
  box-shadow:3px 3px 0 var(--ink);overflow:hidden;}
.tsc>summary{font-family:'Patrick Hand SC',cursive;font-size:14px;letter-spacing:.05em;
  text-transform:uppercase;padding:12px 14px;cursor:pointer;list-style:none;display:flex;
  justify-content:space-between;align-items:center;gap:10px;}
.tsc>summary::-webkit-details-marker{display:none;}
.tsc>summary::after{content:'\25be';transition:transform .2s;font-size:16px;}
.tsc[open]>summary::after{transform:rotate(180deg);}
.tsc .tscbody{padding:0 14px 14px;font-size:16px;line-height:1.6;opacity:.9;
  max-height:60vh;overflow-y:auto;white-space:pre-wrap;}