/* 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:"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;
}
@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%;display:block}
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 20px;flex-wrap:wrap;padding-block:12px}
.mark{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.mark .face{flex:none;width:42px;height:42px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--accent-fill)}
.wm{font:500 26px/1.1 var(--head);letter-spacing:.01em;white-space:nowrap}
.wm span{color:var(--accent);font-weight:400}
.wm b{font-weight:700}
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="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent-fill)}
nav.main a.ext::after{font-size:.95em;opacity:.7}

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:90px}

@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){
  .wm{font-size:22px}
  .mark .face{width:36px;height:36px}
  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}}

/* 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;max-width:760px;padding-block:24px}
.not-found h1 em{font-style:normal;color:var(--accent)}

/* 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}}
