/* Chew On This, reading pages. Shared by /blog/ and every post. */
:root{
  --bg:#1c1020; --ink:#f7f1e4; --mut:#d8c9bc; --mut2:#ae9ca6;
  --gold:#d6b570; --gold2:#ecd198; --gold-ink:#241428; --wine:#6b1d3f;
  --glass:rgba(255,244,230,.065); --glass-h:rgba(255,244,230,.11);
  --bdr:rgba(255,240,220,.14); --bdr-h:rgba(214,181,112,.5);
  --serif:'Lora',Georgia,'Times New Roman',serif;
  --ui:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --pad:18px;
}
*{box-sizing:border-box}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ui);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;padding:0 var(--pad) calc(44px + env(safe-area-inset-bottom))}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:10px}

.aurora{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;
  -webkit-mask-image:linear-gradient(180deg,#000,#000 55%,transparent);mask-image:linear-gradient(180deg,#000,#000 55%,transparent)}
.aurora i{position:absolute;border-radius:50%;filter:blur(60px)}
.a1{width:520px;height:430px;left:-10%;top:-120px;background:rgba(214,181,112,.26);animation:d1 26s ease-in-out infinite alternate}
.a2{width:460px;height:380px;right:-14%;top:40px;background:rgba(122,32,72,.5);animation:d2 34s ease-in-out infinite alternate}
@keyframes d1{to{transform:translate3d(60px,60px,0) scale(1.14)}}
@keyframes d2{to{transform:translate3d(-70px,70px,0) scale(.92)}}
@media (prefers-reduced-motion:reduce){.aurora i{animation:none}}

.wrap{position:relative;z-index:1;max-width:680px;margin:0 auto}
.glass{background:linear-gradient(160deg,rgba(255,244,230,.1),rgba(255,244,230,.035) 70%);border:1px solid var(--bdr);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 24px 60px -34px rgba(0,0,0,.7);
  -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%)}

.crumbs{display:flex;flex-wrap:wrap;gap:7px;align-items:center;font-size:13.5px;color:var(--mut2);padding:20px 0 0}
.crumbs a{text-decoration:none;color:var(--mut)}
.crumbs a:hover{color:var(--gold)}
.crumbs .here{color:var(--mut2)}

.kicker{font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 8px}
.post-head{padding:18px 0 0}
h1{font-family:var(--serif);font-weight:600;font-size:clamp(31px,7.4vw,44px);line-height:1.13;letter-spacing:-.015em;margin:0}
.standfirst{font-size:18px;color:var(--mut);margin:14px 0 0}
.byline{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;margin:18px 0 0;padding:12px 0;font-size:13.5px;color:var(--mut2);
  border-top:1px solid var(--bdr);border-bottom:1px solid var(--bdr)}
.byline .who{display:inline-flex;align-items:center;gap:7px;color:var(--mut)}
.byline b{color:var(--ink);font-weight:600}
.byline svg{color:var(--gold)}

.take{margin:26px 0 0;border-radius:18px;padding:18px 18px 16px}
.take b{display:block;font-family:var(--serif);font-size:19px;font-weight:600;margin-bottom:8px}
.take ul{margin:0;padding:0;list-style:none}
/* Not a flex row: bold text inside a bullet became its own flex item and could not wrap. */
.take li{position:relative;padding:5px 0 5px 19px;font-size:15.5px;line-height:1.5;color:var(--mut)}
.take li::before{content:"";position:absolute;left:0;top:14px;width:7px;height:7px;border-radius:50%;background:var(--gold)}

.body{margin-top:30px}
.body h2{font-family:var(--serif);font-size:clamp(24px,5.4vw,29px);font-weight:600;line-height:1.2;margin:38px 0 0;letter-spacing:-.01em}
.body h3{font-family:var(--serif);font-size:21px;font-weight:600;margin:28px 0 0}
.body p{margin:14px 0 0;color:var(--mut)}
.body strong{color:var(--ink);font-weight:600}
.body a{color:var(--gold);text-underline-offset:3px}
.body ul,.body ol{margin:14px 0 0;padding-left:20px;color:var(--mut)}
.body li{margin:7px 0}
.body li::marker{color:var(--gold)}
.body blockquote{margin:22px 0 0;padding:14px 18px;border-left:3px solid var(--gold);border-radius:0 14px 14px 0;
  background:rgba(255,244,230,.05);font-family:var(--serif);font-size:19px;font-style:italic;color:var(--ink)}
.body blockquote p{color:inherit;margin:0}
.body hr{border:0;height:1px;background:var(--bdr);margin:34px 0 0}
.body img{border-radius:16px;margin:24px 0 0}
.body figure{margin:24px 0 0}
.body figcaption{font-size:13.5px;color:var(--mut2);margin-top:8px;text-align:center}
.tablewrap{margin:22px 0 0;overflow-x:auto;border-radius:16px;border:1px solid var(--bdr);background:rgba(255,244,230,.04)}
.body table{border-collapse:collapse;width:100%;font-size:15px;min-width:420px}
.body th,.body td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--bdr);color:var(--mut);vertical-align:top}
.body th{font-family:var(--ui);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:600;
  background:rgba(214,181,112,.08)}
.body tr:last-child td{border-bottom:0}

.faq{margin:40px 0 0}
.faq h2{font-family:var(--serif);font-size:clamp(24px,5.4vw,29px);font-weight:600;margin:0 0 14px}
.faq details{border-radius:14px;border:1px solid var(--bdr);background:rgba(255,244,230,.045);margin-top:9px;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:14px 16px;font-weight:600;font-size:16px;display:flex;gap:12px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;color:var(--gold);font-weight:600}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{color:var(--gold)}
.faq p{margin:0;padding:0 16px 15px;color:var(--mut);font-size:15.5px}

.sources{margin:40px 0 0;border-radius:18px;padding:18px}
.sources b{display:block;font-family:var(--serif);font-size:19px;font-weight:600;margin-bottom:8px}
.sources ol{margin:0;padding-left:20px;font-size:14.5px;color:var(--mut)}
.sources li{margin:7px 0}
.sources a{color:var(--gold);word-break:break-word}
.sources .checked{margin:12px 0 0;font-size:13.5px;color:var(--mut2)}

.disc-box{margin:26px 0 0;border-radius:16px;padding:14px 16px;border:1px solid var(--bdr);background:rgba(255,244,230,.04)}
.disc-box p{margin:0;font-size:13.5px;line-height:1.6;color:var(--mut2)}

.guide-cta{display:flex;gap:16px;align-items:center;margin:40px 0 0;border-radius:22px;padding:18px;
  border:1px solid rgba(214,181,112,.4);background:linear-gradient(145deg,rgba(214,181,112,.18),rgba(214,181,112,.05) 60%,rgba(255,244,230,.04))}
.guide-cta img{width:96px;flex:none;border-radius:9px;box-shadow:0 14px 34px -14px rgba(0,0,0,.7)}
.guide-cta .t{flex:1;min-width:0}
.guide-cta .tier{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.guide-cta b{display:block;font-family:var(--serif);font-size:21px;font-weight:600;line-height:1.2;margin:4px 0 5px}
.guide-cta p{margin:0 0 12px;font-size:15px;color:var(--mut)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 18px;border-radius:14px;
  background:linear-gradient(150deg,var(--gold2),var(--gold));color:var(--gold-ink);font-weight:600;font-size:16px;text-decoration:none;
  transition:transform .15s ease-out,box-shadow .2s}
.btn:hover{box-shadow:0 14px 36px -14px rgba(214,181,112,.8)}
.btn:active{transform:scale(.97)}
/* a button inside the article body is still a button: the link colour must not paint it gold on gold */
.body a.btn,.body .btn,.upgrade a.btn,.guide-cta a.btn{color:var(--gold-ink);text-decoration:none}
/* On a phone a wide table becomes one card per row, each cell labelled, so nothing scrolls or clips */
@media (max-width:600px){
  .tablewrap{overflow:visible;border:0;background:none}
  .body table{min-width:0}
  .body table thead{display:none}
  .body table,.body table tbody,.body table tr,.body table td{display:block;width:100%}
  .body table tr{margin:0 0 12px;border:1px solid var(--bdr);border-radius:14px;background:rgba(255,244,230,.04);overflow:hidden}
  .body table td{border-bottom:1px solid var(--bdr);padding:10px 14px}
  .body table td:last-child{border-bottom:0}
  .body table td[data-label]::before{content:attr(data-label);display:block;font-family:var(--ui);font-size:11px;font-weight:600;
    letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:3px}
  .body table td:first-child{background:rgba(214,181,112,.08);color:var(--ink);font-weight:600}
}

/* On the narrowest phones the cover leaves too little room beside it for the button. */
@media (max-width:399px){
  .guide-cta{flex-direction:column;align-items:flex-start;gap:14px}
  .guide-cta img{width:84px}
  .guide-cta .btn{width:100%}
}

.related{margin:44px 0 0}
.related h2{font-family:var(--serif);font-size:25px;font-weight:600;margin:0 0 12px}
.rlist{display:grid;gap:10px}
.rlist a{display:flex;gap:13px;align-items:center;padding:13px 15px;border-radius:16px;text-decoration:none;transition:all .2s ease-out}
.rlist a:hover{border-color:var(--bdr-h);background:var(--glass-h)}
.rlist b{display:block;font-size:15.5px;font-weight:600;line-height:1.3}
.rlist span{display:block;font-size:13.5px;color:var(--mut);margin-top:2px}
.rlist .chev{margin-left:auto;color:var(--mut2)}

.sub-cta{margin:44px 0 0;border-radius:22px;padding:22px 20px;border:1px solid var(--bdr);
  background:linear-gradient(160deg,rgba(255,244,230,.1),rgba(255,244,230,.035) 70%)}
.sub-cta h2{font-family:var(--serif);font-size:24px;font-weight:600;line-height:1.2;margin:0}
.sub-cta p{color:var(--mut);font-size:15.5px;margin:8px 0 16px}
.sub-cta .btn{display:flex}

footer{margin-top:46px;padding-top:22px;border-top:1px solid var(--bdr);text-align:center}
.legal{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;font-size:13.5px;color:var(--mut)}
.legal a{text-decoration:none}
.legal a:hover{color:var(--gold)}
.cr{font-size:12.5px;color:var(--mut2);margin:12px 0 0}

/* ---------- the index ---------- */
.idx-head{padding:26px 0 0;text-align:center}
.idx-head h1{margin:0 auto}
.idx-head p{color:var(--mut);font-size:16px;margin:12px auto 0;max-width:460px}
.cluster{margin:40px 0 0}
.cluster h2{font-family:var(--serif);font-size:25px;font-weight:600;margin:0 0 4px}
.cluster .note{color:var(--mut2);font-size:14.5px;margin:0 0 14px}
.plist{display:grid;gap:11px}
.pcard{display:block;padding:16px 18px;border-radius:18px;text-decoration:none;transition:all .2s ease-out}
.pcard:hover{border-color:var(--bdr-h);background:var(--glass-h)}
.pcard .m{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);font-weight:600}
.pcard b{display:block;font-family:var(--serif);font-size:20px;font-weight:600;line-height:1.25;margin:6px 0 5px}
.pcard span{display:block;font-size:15px;color:var(--mut);line-height:1.5}
.empty{margin:30px 0 0;border-radius:18px;padding:20px;text-align:center;color:var(--mut)}
@media (min-width:920px){
  body{padding:0 32px 60px}
  .plist{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wrap{max-width:720px}
}

/* An editor's note: a line still waiting on Laura. These pages are noindex until it is written. */
mark.todo{display:inline-block;background:rgba(226,165,60,.16);color:var(--gold2);border:1px dashed rgba(226,165,60,.55);
  border-radius:8px;padding:2px 9px;font-size:14px;font-style:italic}

/* Diagrams. Same drawing as the PDF guides, drawn in points and scaled up here. */
/* The drawing is set in points for print. Below about 380px its labels get too small to
   read, so the box scrolls sideways instead, the same way a wide table does. */
.fig-wrap{margin:26px 0 0;padding:16px 14px;border-radius:18px;border:1px solid var(--bdr);
  background:rgba(255,244,230,.04);overflow-x:auto}
.fig-wrap .fig{width:100%;min-width:380px;height:auto;display:block}

/* The content upgrade: the same offer as the card at the end, but where the post has just
   become useful. Quiet enough not to read as an advert. */
.upgrade{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:30px 0 0;padding:16px 18px;border-radius:16px;
  border:1px dashed rgba(214,181,112,.45);background:rgba(214,181,112,.07)}
.upgrade div{flex:1;min-width:190px}
.upgrade b{display:block;font-family:var(--serif);font-size:18px;font-weight:600;line-height:1.25}
.upgrade p{margin:5px 0 0;font-size:14.5px;color:var(--mut);line-height:1.5}
.upgrade .btn{flex:none;min-height:46px;font-size:15px}
@media (max-width:520px){.upgrade .btn{width:100%}}

/* A source named for attribution but deliberately not linked. */
.sources .nolink{color:var(--mut2);word-break:break-word}

/* ---------- the email box: subscribes straight to Substack ---------- */
.subform{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.subform input[type=email]{flex:1 1 200px;min-width:0;min-height:50px;padding:0 16px;border-radius:14px;border:1px solid rgba(214,181,112,.45);
  background:rgba(255,244,230,.07);color:#f7f1e4;font:inherit;font-size:16px;outline:none;transition:border-color .18s,box-shadow .18s}
.subform input[type=email]::placeholder{color:rgba(247,241,228,.5)}
.subform input[type=email]:focus{border-color:#d6b570;box-shadow:0 0 0 3px rgba(214,181,112,.18)}
/* no white autofill box on a dark page */
.subform input:-webkit-autofill,.subform input:-webkit-autofill:hover,.subform input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 100px #2a1830 inset;-webkit-text-fill-color:#f7f1e4;caret-color:#f7f1e4;transition:background-color 9999s}
.subform .btn{flex:0 0 auto;min-height:50px;border:0;cursor:pointer;font-family:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fine,.sub-cta .fine,.feat .fine{font-size:12.5px;line-height:1.5;color:#ae9ca6;margin:10px 0 0;text-wrap:pretty}
.fine a{color:#d6b570}
@media (max-width:420px){.subform .btn{flex:1 1 100%}}

.subbar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:30;display:flex;align-items:center;gap:12px;
  padding:10px 10px 10px 16px;border-radius:16px;background:rgba(28,16,32,.94);border:1px solid rgba(214,181,112,.4);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 18px 40px -18px rgba(0,0,0,.8);text-decoration:none;color:#f7f1e4}
.subbar[hidden]{display:none}
.subbar > span:first-child{flex:1;min-width:0}
.subbar b{display:block;font-size:14px;font-weight:600}
.subbar em{display:block;font-style:normal;font-size:12px;color:#ae9ca6}
.subbar .go{flex:none;padding:10px 16px;border-radius:12px;background:linear-gradient(150deg,#ecd198,#d6b570);color:#241428;font-weight:600;font-size:14px}
@media (min-width:900px){.subbar{left:auto;right:24px;max-width:380px}}
.upgrade .subform{flex:1 1 100%}

/* ---------- Substack's own sign up embed ---------- */
.subembed{border-radius:16px;overflow:hidden;border:1px solid rgba(214,181,112,.3);background:#000;margin-top:6px}
.subembed iframe{display:block;width:100%;height:320px;border:0;background:#000}

/* ---------- no flicker on scroll ----------
   Frosted glass (backdrop-filter) on every card, laid over a fixed, blurred, moving background, makes
   the browser repaint all of it on every scroll step, and Chrome shows that as a flicker. The cards are
   already translucent, so they keep their look without the blur. The moving glow gets its own layer so
   it never repaints with the page. Only the bars that float over scrolling text keep their blur. */
.glass{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.aurora{transform:translateZ(0);will-change:transform;contain:strict}
.aurora i{will-change:transform;transform:translateZ(0)}