/* Ed Scriver — laid out like phospress.com, coloured like edscriver.com:
   slate blue + deep navy, cool grey bands, Montserrat headings, Baskerville text. */
/* Fonts, served from this site (not Google), so visitors' details aren't shared.
   Both are free under the SIL Open Font License; see fonts/OFL-*.txt. */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/montserrat-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/montserrat-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/montserrat-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/montserrat-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:800;font-display:swap;src:url("/fonts/montserrat-latin-800-normal.woff2") format("woff2")}
@font-face{font-family:"Marcellus SC";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/marcellus-sc-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Libre Baskerville";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/libre-baskerville-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Libre Baskerville";font-style:italic;font-weight:400;font-display:swap;src:url("/fonts/libre-baskerville-latin-400-italic.woff2") format("woff2")}
@font-face{font-family:"Libre Baskerville";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/libre-baskerville-latin-700-normal.woff2") format("woff2")}

:root{
  --paper:#FFFFFF; --band:#F3F5F9; --surface:#FFFFFF;
  --ink:#1D2942; --text:#3D4658; --muted:#667085; --rule:#E1E5EE;
  --accent:#4A6283; --accent-fill:#7F9AC2; --accent-soft:#E8EEF7;
  --btn:#293C5B; --btn-text:#FFFFFF; --btn-hover:#576E8D; --btn-hover-text:#FFFFFF;
  --cover-a:#1D2942; --cover-b:#33486C; --on-cover:#EEF2F9; --glow:#9DB4D8;
  --head:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --body:"Libre Baskerville",Georgia,"Times New Roman",serif;
  --display:"Marcellus SC",Georgia,"Times New Roman",serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --paper:#10141D; --band:#171C28; --surface:#171C28;
  --ink:#E9EDF5; --text:#C4CBD8; --muted:#8F98AB; --rule:#283043;
  --accent:#A9BEDD; --accent-fill:#A9BEDD; --accent-soft:#1E2A3E;
  --btn:#E9EDF5; --btn-text:#10141D; --btn-hover:#A9BEDD; --btn-hover-text:#10141D;
  --cover-a:#1E2A40; --cover-b:#33486C; --on-cover:#EEF2F9;
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#10141D; --band:#171C28; --surface:#171C28;
  --ink:#E9EDF5; --text:#C4CBD8; --muted:#8F98AB; --rule:#283043;
  --accent:#A9BEDD; --accent-fill:#A9BEDD; --accent-soft:#1E2A3E;
  --btn:#E9EDF5; --btn-text:#10141D; --btn-hover:#A9BEDD; --btn-hover-text:#10141D;
  --cover-a:#1E2A40; --cover-b:#33486C; --on-cover:#EEF2F9;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--text);font:16px/1.75 var(--body);-webkit-font-smoothing:antialiased;padding-inline:16px}
img{max-width:100%;height:auto;display:block}
/* Resized images arrive wrapped in <picture>; let the <img> inside lay out as before */
picture{display:contents}
picture > source{display:none}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent-fill);outline-offset:3px;border-radius:3px}
.wrap{max-width:1080px;margin-inline:auto}

/* Header */
header.site{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--band) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--rule);margin-inline:-16px;padding-inline:16px}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding-block:16px}
.mark{display:flex;align-items:center;gap:18px;text-decoration:none;color:var(--ink)}
/* Photo with a slate-blue gradient ring: the border shows the gradient, the padding a thin gap */
.mark .face{flex:none;width:88px;height:88px;border-radius:50%;object-fit:cover;padding:3px;border:3px solid transparent;background:linear-gradient(var(--band),var(--band)) padding-box,linear-gradient(145deg,var(--glow),var(--accent) 55%,var(--cover-a)) border-box;box-shadow:0 10px 20px -12px rgba(20,30,55,.6);transition:transform .25s ease}
.mark:hover .face{transform:rotate(-4deg) scale(1.04)}
/* The name: classical small capitals (Marcellus SC), slate-blue "Ed", navy "Scriver" */
.wm{display:flex;align-items:baseline;gap:.3em;white-space:nowrap;font:400 46px/1.1 var(--display);letter-spacing:.02em;color:var(--ink);font-synthesis:none}
.wm-ed{color:var(--accent)}
nav.main{display:flex;gap:4px;flex-wrap:wrap}
nav.main a{font:600 12.5px/1 var(--head);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:10px 12px;color:var(--muted)}
nav.main a:hover{color:var(--ink)}
nav.main a[aria-current]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent-fill)}
nav.main a.ext::after{font-size:.95em;opacity:.7}
/* Dropdowns: hover on a computer; the arrow button opens them on phones */
nav.main .has-sub{position:relative;display:flex;align-items:center}
nav.main .sub-toggle{display:flex;align-items:center;border:0;background:none;color:var(--muted);padding:10px 8px 10px 0;margin-left:-8px;cursor:pointer;border-radius:4px}
nav.main .sub-toggle:hover,nav.main .has-sub.open .sub-toggle{color:var(--ink)}
nav.main .sub-toggle svg{transition:transform .2s}
nav.main .has-sub.open .sub-toggle svg{transform:rotate(180deg)}
nav.main .sub{display:none;position:absolute;top:100%;right:0;z-index:20;min-width:270px;margin:0;padding:8px;list-style:none;background:var(--surface);border:1px solid var(--rule);border-radius:12px;box-shadow:0 18px 40px -20px rgba(20,30,55,.45)}
nav.main .has-sub.open .sub{display:block}
@media (hover:hover){nav.main .has-sub:hover .sub{display:block}nav.main .has-sub:hover .sub-toggle svg{transform:rotate(180deg)}}
nav.main .sub a{display:grid;gap:3px;padding:10px 12px;border-radius:8px;font:600 14px/1.3 var(--head);letter-spacing:0;text-transform:none;color:var(--ink);box-shadow:none}
nav.main .sub a span{font:400 12.5px/1.45 var(--body);color:var(--muted)}
nav.main .sub a:hover,nav.main .sub a[aria-current]{background:var(--band);box-shadow:none}
nav.main .sub .sub-all{margin-top:4px;padding-top:4px;border-top:1px solid var(--rule)}
nav.main .sub .sub-all a{font:700 12.5px/1.3 var(--head);color:var(--accent)}
/* Phones: the dropdown spans the menu's width so it never runs off screen */
@media (max-width:560px){
  nav.main{position:relative}
  nav.main .has-sub{position:static}
  nav.main .sub{left:0;right:0;min-width:0}
  nav.main .sub-toggle{padding:8px 6px 8px 0;margin-left:-5px}
}

main{padding-block:56px 72px;display:grid;gap:72px}

/* Type */
.eyebrow{font:700 12px/1.2 var(--head);letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
h1,h2,h3{font-family:var(--head);font-weight:700;color:var(--ink);text-wrap:balance;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(34px,5.2vw,54px);line-height:1.1;font-weight:800}
h1 em{font-style:normal;color:var(--accent)}
h2{font-size:clamp(24px,3.4vw,32px);line-height:1.2}
h3{font-size:20px;line-height:1.3}
p{margin:0;max-width:65ch}
.lede{font-size:18.5px;line-height:1.7;color:var(--text)}
.stack{display:grid;gap:16px;align-content:start}
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:12px 24px;flex-wrap:wrap}

/* Hero */
.hero{display:grid;grid-template-columns:1.3fr 1fr;gap:56px;align-items:center}
.hero .links{margin-top:8px}
.feature-card{background:linear-gradient(160deg,var(--cover-a),var(--cover-b));color:var(--on-cover);border-radius:14px;padding:28px;display:grid;grid-template-columns:132px 1fr;gap:22px;align-items:center;position:relative;overflow:hidden;box-shadow:0 24px 48px -28px rgba(20,30,55,.7)}
.feature-card::after{content:"";position:absolute;right:-80px;top:-80px;width:240px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(157,180,216,.42),transparent 65%);pointer-events:none}
.feature-card .cover{transform:rotate(-3deg);box-shadow:0 18px 30px -12px rgba(0,0,0,.6)}
.feature-card .meta{display:grid;gap:8px;position:relative}
.feature-card .tag{font:700 11px/1.4 var(--head);letter-spacing:.18em;text-transform:uppercase;color:var(--glow)}
.feature-card h2{color:#fff;font-size:24px}
.feature-card p{font-size:14.5px;line-height:1.6;color:rgba(238,242,249,.82)}
.feature-card .btn{justify-self:start;margin-top:6px;background:#fff;border-color:#fff;color:#1D2942}
.feature-card .btn:hover{background:var(--glow);border-color:var(--glow);color:#1D2942}

/* Buttons */
.links{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:6px;font:700 13.5px/1 var(--head);letter-spacing:.02em;text-decoration:none;padding:13px 20px;border-radius:8px;border:1px solid var(--btn);background:var(--btn);color:var(--btn-text);cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .15s}
.btn:hover{background:var(--btn-hover);border-color:var(--btn-hover);color:var(--btn-hover-text);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn.ghost:hover{border-color:var(--accent-fill);background:transparent;color:var(--ink)}
.ext::after{content:"↗";font-size:.9em}

/* Strip */
.strip{background:var(--accent-soft);border-radius:14px;padding:28px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px 40px;flex-wrap:wrap}
.strip .stack{flex:1 1 420px;gap:10px}
.strip h2{font-size:clamp(22px,3vw,28px)}
.strip p{color:var(--ink)}

/* Books */
.books{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.book{display:grid;gap:12px;align-content:start}
.book .btn{justify-self:start}
.book .sub{font:600 14px/1.4 var(--head);color:var(--accent)}
.book p{font-size:15px;line-height:1.7}
.cover{aspect-ratio:2/3;max-width:100%;border-radius:3px 8px 8px 3px;background:linear-gradient(165deg,var(--cover-a),var(--cover-b));box-shadow:0 14px 28px -16px rgba(20,30,55,.65);overflow:hidden;position:relative;transition:transform .25s ease,box-shadow .25s ease}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.cover::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 6px 0 0 rgba(0,0,0,.18),inset 0 0 0 1px rgba(0,0,0,.08);pointer-events:none}
.book:hover .cover{transform:translateY(-4px);box-shadow:0 22px 36px -18px rgba(20,30,55,.7)}
.status{justify-self:start;font:700 11px/1 var(--head);letter-spacing:.12em;text-transform:uppercase;padding:7px 10px;border-radius:999px;background:var(--accent-soft);color:var(--ink)}
.status.free{background:var(--btn);color:var(--btn-text)}
.status.soon{background:transparent;border:1px solid var(--rule);color:var(--muted)}

/* About */
.profile-head{display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center}
.portrait{width:128px;aspect-ratio:1;border-radius:50%;object-fit:cover;object-position:center 30%;box-shadow:0 0 0 4px var(--paper),0 0 0 6px var(--accent-fill)}
.tagline{font-size:19px;line-height:1.6;color:var(--muted);font-style:italic}
.cols{display:grid;grid-template-columns:1.5fr 1fr;gap:56px;align-items:start}
.facts{margin:0;border-top:2px solid var(--ink)}
.facts div{display:grid;grid-template-columns:110px 1fr;gap:12px;padding-block:12px;border-bottom:1px solid var(--rule);font-size:15px}
.facts dt{font:700 11px/2.1 var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:0;color:var(--ink)}
blockquote{margin:0;padding:4px 0 4px 22px;border-left:3px solid var(--accent-fill);font:italic 400 18px/1.65 var(--body);color:var(--ink);max-width:60ch}
blockquote cite{display:block;margin-top:10px;font:700 11px/1 var(--head);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.stack p a,.facts a{color:var(--ink);text-decoration-color:var(--accent-fill);text-underline-offset:3px}

/* Newsletter band */
.band{background:var(--band);border-radius:14px;padding:36px;display:grid;grid-template-columns:1fr 2fr;gap:32px}

/* Contact form */
.contact{display:grid;grid-template-columns:1fr 1.4fr;gap:56px;align-items:start}
form[data-form]{background:var(--band);border:1px solid var(--rule);border-radius:14px;padding:32px;display:grid;gap:18px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
form[data-form] label{display:grid;gap:7px;font:600 13px/1.2 var(--head);color:var(--ink)}
form[data-form] :is(input,select,textarea){font:15px/1.5 var(--body);color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:8px;padding:11px 13px;width:100%;transition:border-color .15s,box-shadow .15s}
form[data-form] textarea{min-height:170px;resize:vertical}
form[data-form] :is(input,select,textarea):focus{outline:none;border-color:var(--accent-fill);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-fill) 30%,transparent)}
.btn:disabled{opacity:.6;cursor:default;transform:none}
.hint{font:400 14px/1.6 var(--body);color:var(--muted)}
.hint a{color:var(--ink);text-decoration-color:var(--accent-fill);text-underline-offset:3px}
.notice{font:500 14px/1.5 var(--head);padding:12px 14px;border-radius:8px;border:1px solid var(--rule)}
.notice.ok{border-color:#2F6B4F;color:#2F6B4F}
.notice.err{border-color:#A23B3B;color:#A23B3B}
:root[data-theme="dark"] .notice.ok{border-color:#7CC4A0;color:#7CC4A0}
:root[data-theme="dark"] .notice.err{border-color:#E68A8A;color:#E68A8A}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .notice.ok{border-color:#7CC4A0;color:#7CC4A0}:root:not([data-theme="light"]) .notice.err{border-color:#E68A8A;color:#E68A8A}}
.form-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Blog list */
.post-list{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.post-card{background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:26px;display:grid;gap:20px;align-content:start;transition:border-color .2s,transform .2s,box-shadow .2s}
.post-card:hover{border-color:var(--accent-fill);transform:translateY(-2px);box-shadow:0 18px 34px -24px rgba(20,30,55,.45)}
.post-card h2{font-size:21px;line-height:1.3}
.post-card h2 a{text-decoration:none}
.post-card h2 a::after{content:"";position:absolute;inset:0}
.post-card{position:relative}
.post-card p{font-size:15px;line-height:1.7}
.post-card .more{font:700 13px/1 var(--head);color:var(--accent);text-decoration:none;margin-top:4px}
.post-card .thumb{display:block;border-radius:8px;overflow:hidden;aspect-ratio:16/9;background:linear-gradient(160deg,var(--cover-a),var(--cover-b))}
.post-card .thumb img{width:100%;height:100%;object-fit:cover;object-position:center 25%}
.post-card.lead{grid-column:1 / -1;grid-template-columns:1.1fr 1fr;align-items:center;gap:32px;padding:30px}
.post-card.lead:not(:has(.thumb)){grid-template-columns:1fr}
.post-card.lead h2{font-size:clamp(24px,3.2vw,32px)}
.post-card.lead p{font-size:16.5px}
.pager{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}

/* Single post */
.post{display:grid;gap:32px;max-width:720px;margin-inline:auto;width:100%}
.post-head{display:grid;gap:14px}
.post-head h1{font-size:clamp(30px,4.6vw,46px)}
.back{font:600 13px/1 var(--head);color:var(--muted);text-decoration:none;justify-self:start;margin-bottom:6px}
.back:hover{color:var(--ink)}
.post-cover{width:100%;max-height:440px;object-fit:cover;object-position:center 25%;border-radius:12px}
.prose{display:grid;gap:18px;font-size:17px;line-height:1.85}
.prose > *{margin:0;max-width:none}
.prose h2{font-size:clamp(22px,3vw,27px);margin-top:16px}
.prose h3{font-size:20px;margin-top:8px}
.prose ul,.prose ol{padding-left:1.3em;display:grid;gap:8px}
.prose li::marker{color:var(--accent)}
.prose a{color:var(--ink);text-decoration-color:var(--accent-fill);text-underline-offset:3px;text-decoration-thickness:1.5px}
.prose a:hover{color:var(--accent)}
.prose img{border-radius:10px;margin-block:8px}
.prose hr{border:0;border-top:1px solid var(--rule);margin-block:12px}
.prose code{font:14px/1.5 ui-monospace,Menlo,Consolas,monospace;background:var(--band);padding:2px 6px;border-radius:5px}
.prose blockquote{font-size:19px}
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:720px;margin-inline:auto;width:100%}
.post-nav a{display:grid;gap:6px;padding:18px 20px;border:1px solid var(--rule);border-radius:12px;text-decoration:none;font:700 15px/1.35 var(--head);color:var(--ink);transition:border-color .15s}
.post-nav a:hover{border-color:var(--accent-fill)}
.post-nav a span{font:700 11px/1 var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.post-nav a.next{text-align:right}

/* Book card inside a post: {% book "slug" %} */
.book-card{display:grid;grid-template-columns:132px 1fr;gap:26px;align-items:center;background:var(--band);border:1px solid var(--rule);border-radius:14px;padding:24px;margin-block:12px}
.book-card .cover{display:block;transform:rotate(-2deg)}
.book-card-body{display:grid;gap:8px;justify-items:start}
.book-card h3{font-size:22px;margin:0}
.book-card .sub{font:600 14px/1.4 var(--head);color:var(--accent)}
.book-card p{font-size:15px;line-height:1.65;margin:0}
.prose .book-card a.btn{color:var(--btn-text);text-decoration:none;margin-top:6px}
.prose .book-card a.btn:hover{color:var(--btn-hover-text)}

/* RSS link on the blog page */
.rss{display:inline-flex;align-items:center;gap:8px;justify-self:start;margin-top:4px;font:600 13px/1 var(--head);color:var(--accent);text-decoration:none}
.rss:hover{color:var(--ink)}

/* Footer */
footer.site{border-top:1px solid var(--rule);padding-block:28px 40px;display:flex;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;font:500 13.5px/1.6 var(--head);color:var(--muted)}
footer.site nav{display:flex;gap:16px;flex-wrap:wrap}
footer.site a{text-decoration:none}
footer.site a:hover{color:var(--ink)}
footer.site nav + nav{margin-left:auto}
[id]{scroll-margin-top:140px}

@media (max-width:860px){
  .hero,.band,.cols,.contact,.post-card.lead{grid-template-columns:1fr}
  .post-list{grid-template-columns:1fr}
  .books{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .bar{padding-block:12px}
  .mark{gap:12px}
  .wm{font-size:30px}
  .mark .face{width:60px;height:60px;padding:2px;border-width:2.5px}
  main{padding-block:36px 56px;gap:52px}
  nav.main{gap:0}
  nav.main a{padding:8px 7px;font-size:11.5px;letter-spacing:.06em}
  .feature-card{grid-template-columns:96px 1fr;padding:22px;gap:16px}
  .band,.strip,form[data-form]{padding:22px}
  .row{grid-template-columns:1fr}
  .post-nav{grid-template-columns:1fr}
  .post-card,.post-card.lead{padding:20px}
  .book-card{grid-template-columns:92px 1fr;gap:16px;padding:18px;align-items:start}
  .book-card h3{font-size:19px}
  .profile-head{grid-template-columns:1fr;gap:20px}
  .portrait{width:96px}
  .facts div{grid-template-columns:1fr;gap:2px}
  footer.site nav + nav{margin-left:0}
  .books{grid-template-columns:1fr;gap:28px}
  .book{grid-template-columns:110px 1fr;column-gap:16px;row-gap:8px}
  .book .cover{grid-row:1 / span 5}
  .book > :not(.cover){grid-column:2}
}
@media (prefers-reduced-motion:no-preference){
  main > *{animation:rise .45s ease-out both}
  main > *:nth-child(2){animation-delay:.05s}
  main > *:nth-child(3){animation-delay:.1s}
  @keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.mark .face{transition:none}.mark:hover .face{transform:none}}

/* Small phones: keep the five menu items on one line */
@media (max-width:400px){
  nav.main a{padding:8px 5px;font-size:11px;letter-spacing:.03em}
  nav.main a.ext::after{display:none}
}

/* Blog search (Pagefind), matched to the site's colours */
.search{margin-top:18px;max-width:720px;
  --pagefind-ui-scale:.9;
  --pagefind-ui-primary:var(--accent);
  --pagefind-ui-text:var(--ink);
  --pagefind-ui-background:var(--paper);
  --pagefind-ui-border:var(--rule);
  --pagefind-ui-tag:var(--accent-soft);
  --pagefind-ui-border-width:1px;
  --pagefind-ui-border-radius:10px;
  --pagefind-ui-font:var(--head)}
.search .pagefind-ui__search-input{font-family:var(--body);font-weight:400}
.search .pagefind-ui__search-input:focus{outline:none;border-color:var(--accent-fill);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-fill) 30%,transparent)}
.search .pagefind-ui__result-link{color:var(--ink);text-decoration-color:var(--accent-fill);text-underline-offset:3px}
.search .pagefind-ui__result-excerpt{font-family:var(--body);color:var(--text);line-height:1.7}
.search mark{background:var(--accent-soft);color:var(--ink);padding:0 2px;border-radius:3px}
.search .pagefind-ui__message{font-family:var(--head);color:var(--muted)}
body.searching .hide-when-searching{display:none}
.search .pagefind-ui__search-clear{border:0;background:transparent;font:600 13px/1 var(--head);color:var(--muted);right:6px;padding-inline:12px}
.search .pagefind-ui__search-clear:hover{color:var(--ink)}

/* Legal pages (privacy, terms) */
.legal .summary{background:var(--accent-soft);border-radius:12px;padding:20px 24px;margin-top:6px}
.legal .summary p{max-width:none;color:var(--ink);font-size:16px;line-height:1.75}
.legal .prose{font-size:16px;line-height:1.8}
.legal .prose h2{font-size:clamp(20px,2.6vw,24px);padding-top:18px;border-top:1px solid var(--rule)}
.legal .prose h3{font-size:17px}
.prose table{border-collapse:collapse;width:100%;font-size:14.5px;line-height:1.55;display:block;overflow-x:auto}
.prose th{font:700 11px/1.4 var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:left}
.prose th,.prose td{padding:10px 14px 10px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.prose td:first-child{font-weight:700;color:var(--ink);white-space:nowrap}

/* 404 page */
.not-found{display:grid;gap:16px;justify-items:center;text-align:center;max-width:720px;margin-inline:auto;padding-block:8px 24px}
.not-found p{margin-inline:auto}
.not-found h1{font-size:clamp(28px,4vw,38px)}
.not-found .quip{font:italic 400 clamp(18px,2.4vw,21px)/1.5 var(--body);color:var(--ink)}
.not-found .links{justify-content:center;margin-top:8px}
/* The giant 404 in Marcellus SC, filled with the slate-to-navy gradient, with two sparkles */
.big-404{position:relative;display:flex;gap:.04em;margin:0 0 4px;padding-inline:.35em;font:400 clamp(104px,19vw,176px)/1 var(--display);letter-spacing:.02em}
.big-404 span{background:linear-gradient(170deg,var(--accent-fill) 10%,var(--accent) 55%,var(--cover-a));-webkit-background-clip:text;background-clip:text;color:transparent}
.big-404 .zero{display:inline-block;transform-origin:50% 55%}
.big-404::before,.big-404::after{content:"✦";position:absolute;font:400 .2em/1 var(--head);color:var(--accent-fill)}
.big-404::before{left:0;top:.12em}
.big-404::after{right:0;bottom:.18em;font-size:.14em}
@media (prefers-reduced-motion:no-preference){
  .big-404 .zero{animation:wobble 6s ease-in-out infinite}
  .big-404::before,.big-404::after{animation:twinkle 2.8s ease-in-out infinite}
  .big-404::after{animation-delay:1.4s}
  @keyframes wobble{0%,82%,100%{transform:none}86%{transform:rotate(-12deg)}90%{transform:rotate(9deg)}94%{transform:rotate(-4deg)}}
  @keyframes twinkle{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}
}

/* Home: "Latest from the blog" strip */
.latest{flex-wrap:nowrap}
.latest-thumb{flex:none;width:150px;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:linear-gradient(160deg,var(--cover-a),var(--cover-b));box-shadow:0 12px 24px -16px rgba(20,30,55,.6)}
.latest-thumb img{width:100%;height:100%;object-fit:cover;object-position:center 25%}
.latest h2 a{text-decoration:none}
.latest h2 a:hover{color:var(--accent)}
.latest .links{flex:none}
@media (max-width:860px){.latest{flex-wrap:wrap}.latest-thumb{width:100%;max-width:320px;aspect-ratio:16/9}}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Tools page */
.tool-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.tool-card{display:grid;gap:10px;align-content:start;padding:26px;border:1px solid var(--rule);border-radius:14px;background:var(--surface);text-decoration:none;color:inherit;transition:border-color .2s,transform .2s,box-shadow .2s}
.tool-card:hover{border-color:var(--accent-fill);transform:translateY(-2px);box-shadow:0 18px 34px -24px rgba(20,30,55,.45)}
.tool-card h2{font-size:21px}
.tool-card p{font-size:15px;line-height:1.7}
.tool-card .more{font:700 13px/1 var(--head);color:var(--accent);margin-top:4px}

/* Peikoff Podcast Index */
.ix-stats{font:600 13px/1 var(--head);letter-spacing:.06em;color:var(--muted)}
.ix-about{max-width:720px;border:1px solid var(--rule);border-radius:12px;padding:14px 18px;background:var(--surface)}
.ix-about summary{cursor:pointer;font:700 14px/1.4 var(--head);color:var(--ink)}
.ix-about .prose{font-size:15.5px;line-height:1.75;margin-top:12px;gap:12px}
.ix{display:grid;gap:8px;max-width:860px}
/* Keep the search box close to the introduction (main has a big gap between sections) */
.ix-head + .ix{margin-top:-48px}
.ix-search{position:sticky;top:calc(var(--header-h,0px) + 8px);z-index:4;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 12px;padding:12px 16px;background:var(--surface);border:1px solid var(--rule);border-radius:12px;box-shadow:0 12px 28px -22px rgba(20,30,55,.5)}
.ix-search[hidden]{display:none}
.ix-search svg{color:var(--muted)}
.ix-search input{font:16px/1.4 var(--body);color:var(--ink);background:transparent;border:0;outline:none;width:100%;padding:6px 0}
.ix-search:focus-within{border-color:var(--accent-fill);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-fill) 30%,transparent)}
.ix-count{grid-column:1 / -1;font:600 12.5px/1.3 var(--head);color:var(--muted);max-width:none}
.ix-results{display:grid}
.ep{padding-block:20px;border-bottom:1px solid var(--rule);
  /* Don't lay out or draw episodes until they're near the screen (big speed-up
     for 400+ episodes). The size is a guess until each one is first drawn. */
  content-visibility:auto;contain-intrinsic-size:auto 240px}
.ep h2{font-size:18px;line-height:1.35}
.ep h2 a{text-decoration:none;color:var(--ink)}
.ep h2 a:hover{color:var(--accent)}
.ep-note{font:italic 15px/1.6 var(--body);color:var(--muted);margin-top:4px}
.qs{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:10px}
.qs a{display:block;position:relative;padding-left:24px;font-size:15.5px;line-height:1.65;color:var(--text);text-decoration:none}
.qs a::before{content:"»";position:absolute;left:2px;top:-1px;font-weight:700;color:var(--accent-fill)}
.qs a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent-fill);text-underline-offset:3px}
.ix mark{background:var(--accent-soft);color:var(--ink);padding:0 2px;border-radius:3px}
.ix-none{padding-block:24px;color:var(--muted)}
.ix-end{padding-top:16px;font:600 13px/1 var(--head)}
.ix-end a{color:var(--accent);text-decoration:none}

/* Narrowest phones: keep the menu on one line */
@media (max-width:360px){
  nav.main a{padding:8px 4px;letter-spacing:.01em}
  nav.main .sub-toggle{padding:8px 4px 8px 0;margin-left:-3px}
}

/* Phones: smaller section gap, so pull the search box up less */
@media (max-width:560px){.ix-head + .ix{margin-top:-32px}}