:root{
 --ink:#120e10;--ink2:#1d1618;--paper:#fbf7f3;--wine:#7c1d31;--wine2:#a8263f;
 --gold:#c8912f;--rose:#e7c9c2;--line:#e8ddd5;--mut:#6d6058;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.68 Georgia,'Iowan Old Style','Times New Roman',serif;-webkit-font-smoothing:antialiased}
a{color:var(--wine);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* header */
header.top{background:rgba(18,14,16,.97);backdrop-filter:blur(6px);color:var(--paper);padding:15px 0;position:sticky;top:0;z-index:50;border-bottom:1px solid #2c2225}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.brand{font-size:21px;letter-spacing:.2em;text-transform:uppercase;color:#fff;font-weight:400}
.brand span{color:var(--gold)}
nav a{color:#e8ddd5;margin-left:20px;font:13px/1 Arial,Helvetica,sans-serif;letter-spacing:.14em;text-transform:uppercase}
nav a:hover{color:var(--gold);text-decoration:none}

/* hero */
.hero{padding:0;border:0;background:var(--ink);color:var(--paper);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 20%,rgba(200,145,47,.18),transparent 55%);pointer-events:none}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding:70px 24px 74px;position:relative;z-index:2}
.kicker{font:12px/1 Arial,sans-serif;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin:0 0 18px}
.hero h1{font-size:clamp(34px,4.6vw,58px);line-height:1.03;margin:0 0 20px;letter-spacing:-.8px;font-weight:400}
.hero h1 em{font-style:italic;color:var(--rose)}
.hero p.lede{font-size:19px;color:#d9cbc4;max-width:46ch;margin:0 0 30px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.stack{position:relative;height:430px}
.stackimg{position:absolute;width:50%;height:auto;border-radius:3px;box-shadow:0 26px 50px rgba(0,0,0,.55)}
.stackimg.s0{left:0;top:26px;transform:rotate(-6deg);z-index:3}
.stackimg.s1{left:24%;top:0;transform:rotate(2deg);z-index:2}
.stackimg.s2{left:48%;top:36px;transform:rotate(8deg);z-index:1;opacity:.96}
@media(max-width:820px){.hero .wrap{grid-template-columns:1fr}.stack{display:none}}

/* buttons */
.btn{display:inline-block;background:var(--wine);color:#fff;padding:14px 28px;border-radius:2px;font:14px/1 Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;transition:background .15s}
.btn:hover{background:var(--wine2);text-decoration:none}
.btn.gold{background:var(--gold);color:#1a1113}
.btn.gold:hover{background:#dcae52}
.btn.ghost{background:transparent;color:var(--paper);border:1px solid #5c4a4f}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold)}

/* sections */
section{padding:62px 0;border-bottom:1px solid var(--line)}
section.dark{background:var(--ink2);color:var(--paper);border:0}
section.dark .muted{color:#ab9a92}
h2{font:13px/1 Arial,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
h2+p.sub{color:var(--mut);margin:0 0 34px;font-size:17px}
h3{font-size:25px;margin:0 0 8px;font-weight:400}

/* covers grid */
.grid{display:grid;gap:32px;grid-template-columns:repeat(auto-fill,minmax(184px,1fr))}
.card{display:block;color:inherit}
.card img{width:100%;height:auto;border-radius:3px;box-shadow:0 14px 30px rgba(30,20,22,.24);display:block;transition:transform .2s}
.card:hover img{transform:translateY(-4px)}
.card .t{font-size:19px;margin:15px 0 3px}
.card .s{font:11px/1.5 Arial,sans-serif;color:var(--mut);letter-spacing:.13em;text-transform:uppercase;min-height:2.7em}
.cardwrap{display:flex;flex-direction:column;height:100%}
.buy-mini{display:block;margin:14px 0 0;text-align:center;font:11px/1 Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#7c1d31;border:1px solid #c9b6bd;border-radius:2px;padding:11px 10px;text-decoration:none}
.buy-mini:hover{background:#7c1d31;border-color:#7c1d31;color:#fff}
.cardwrap .card{flex:1 1 auto}
.cardwrap .buy-mini{flex:0 0 auto;margin-top:auto}
/* Kit's embed injects its own floating card. These rules drag it back into the page
   where the signup actually belongs, instead of hovering over the hero. */
.signup-box{min-height:1px;width:100%;max-width:520px}
.signup-box .formkit-form,.signup-box form.seva-form,.signup-box form{position:static!important;margin:0!important;padding:0!important;background:transparent!important;box-shadow:none!important;width:100%!important;max-width:100%!important;border:0!important}
.signup-box .formkit-form *{max-width:100%!important;box-sizing:border-box}
.signup-box .formkit-form .formkit-input{border:1px solid #4a3b40!important;background:#241a1d!important;color:#fff!important;font:16px Georgia,serif!important;padding:14px!important;border-radius:0!important}
.signup-box .formkit-form .formkit-submit{background:var(--gold,#c8912f)!important;color:#120e10!important;font:700 13px/1 Arial,sans-serif!important;letter-spacing:.12em!important;text-transform:uppercase!important;border-radius:2px!important}
.ph{aspect-ratio:2/3;border-radius:3px;display:flex;flex-direction:column;justify-content:flex-end;
 padding:20px 18px;color:#fff;box-shadow:0 14px 30px rgba(30,20,22,.24);
 background:linear-gradient(160deg,hsl(var(--h) 34% 22%),hsl(var(--h) 42% 12%));
 background-image:linear-gradient(160deg,hsl(var(--h) 34% 22%),hsl(var(--h) 42% 12%)),repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 8px,transparent 8px 16px);
 position:relative;overflow:hidden}
.ph::before{content:"";position:absolute;inset:10px;border:1px solid hsla(var(--h),60%,70%,.35)}
.ph span{font-size:24px;line-height:1.1;position:relative}
.ph em{display:block;margin-top:8px;font:10px/1 Arial,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:hsl(var(--h) 60% 78%)}
.tag{display:inline-block;font:10px/1 Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:6px 9px;border:1px solid var(--line);color:var(--mut);border-radius:2px;margin-left:9px;vertical-align:2px}
.tag.live{background:#eaf7ec;border-color:#c2e2c9;color:#2a6a3a}

/* series */
.series-grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.series-card{display:block;padding:26px 24px;border:1px solid var(--line);border-left:4px solid hsl(var(--h) 45% 40%);
 background:#fff;color:inherit;transition:transform .15s,box-shadow .15s}
.series-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(30,20,22,.1);text-decoration:none}
.series-card h3{font-size:22px;margin:0 0 10px}
.series-card p{color:var(--mut);font-size:15px;margin:0 0 16px}
.series-card .who{font:11px/1 Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:hsl(var(--h) 45% 40%)}

/* tables */
table{width:100%;border-collapse:collapse;font-size:16px}
th,td{text-align:left;padding:13px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{font:11px/1.4 Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
section.dark th{border-color:#3a2d31;color:#a08f88}
section.dark td{border-color:#2e2528}

/* misc */
.muted{color:var(--mut);font-size:15px}
.blurb{max-width:68ch;font-size:18px}
.blurb p{margin:0 0 18px}
.content-note{max-width:68ch;font-size:15px;color:var(--mut);border-top:1px solid var(--line);padding-top:16px;margin-top:26px}
.note{background:#fff6e5;border-left:3px solid var(--gold);padding:15px 18px;font-size:15px;margin:18px 0}
form.signup{display:flex;gap:10px;flex-wrap:wrap;max-width:540px}
.nl-top{margin-top:26px;max-width:560px}
.hero .signup ~ .muted,.hero .muted{color:#cdbcb4}
form.signup input{flex:1 1 240px;padding:14px;border:1px solid #4a3b40;background:#241a1d;color:#fff;font:16px Georgia,serif}
footer{background:var(--ink);color:#b8a8a1;padding:52px 0;font-size:14px}
footer a{color:#e8ddd5}
footer .wrap{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap}
footer .brand{font-size:17px;margin-bottom:10px;display:block}
.stats{display:flex;gap:34px;flex-wrap:wrap;margin:8px 0 0}
.stats div strong{display:block;font-size:30px;color:var(--gold);line-height:1}
.signup-box{max-width:520px}
.signup-box input[type=email]{min-height:46px}
.stats div span{font:11px/1.6 Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#a08f88}

/* PHONE FIX 2026-11-01: the nav laid out at 408px inside a 390px screen, so every page
   scrolled sideways on a phone. These are !important because the desktop rules that set
   the nav's display and nowrap win on specificity, and a half-fixed nav is still broken. */
@media (max-width:560px){
  header{display:block !important;padding:10px 0}
  header nav, nav{display:flex !important;flex-wrap:wrap !important;white-space:normal !important;
                  justify-content:center !important;gap:10px 16px !important;
                  padding:8px 16px !important;max-width:100% !important;width:auto !important}
  header nav a, nav a{margin:0 !important;font-size:13px !important;letter-spacing:.03em;
                      white-space:normal !important}
  .wrap{padding-left:18px !important;padding-right:18px !important}
  body{overflow-wrap:break-word}
  .stack{max-width:100% !important;height:300px !important}
  table{display:block;overflow-x:auto;max-width:100%}
  h1{font-size:clamp(28px,9vw,52px) !important}
}

/* DARK PANEL CONTRAST 2026-11-01: on the dark sections the body colour was inherited, so
   "Coming next" and "Never miss one" were dark text on a near-black panel, ie unreadable. */
.dark{color:#e6d9cf}
.dark h2,.dark h1,.dark h3{color:#fbf6f1}
.dark p,.dark .sub,.dark .muted,.dark li,.dark td,.dark th{color:#cbb6a8}
.dark a{color:#e8c37a}
.dark .btn.gold{color:#1b1416}
.dark .btn.ghost{color:#f3e7dc}

/* ---------------------------------------------------------------- DESIGN PASS 2026-11-01
   Full-width heroes for the inside pages (the home hero grid left a dead right column on
   About, Calendar, Series and 404), the book page's cover column, and a current-page nav mark. */
.hero.slim .wrap{grid-template-columns:1fr;padding:56px 24px 60px}
.hero.slim h1{font-size:clamp(30px,4.2vw,48px);margin-bottom:12px}
.hero.slim p.lede{margin-bottom:0}
.intro{max-width:66ch;color:var(--mut);margin:0 0 32px;font-size:17px}
nav a[aria-current="page"]{color:var(--gold)}
nav a[aria-current="page"]:hover{text-decoration:none}

.book-top{display:grid;grid-template-columns:312px 1fr;gap:48px;align-items:start}
.book-top .cover{margin:0}
.book-top .cover img{width:100%;height:auto;display:block;border-radius:3px;
 box-shadow:0 24px 46px rgba(30,20,22,.3)}
.book-top .blurb{margin:22px 0 0}
.buy-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 6px}
.buy-row .muted{margin:0}
@media(max-width:760px){.book-top{grid-template-columns:1fr;gap:28px}
 .book-top .cover{max-width:250px}.hero.slim .wrap{padding:34px 18px 40px}}

/* footer, made a little more finished */
footer{position:relative}
footer .brand{font-size:15px;letter-spacing:.22em}
footer .fine{opacity:.72;display:block;margin-top:6px;max-width:46ch}

/* RHYTHM PASS 2026-11-01: the inside heroes inherits the home hero's 40px grid gap, which left a
   hole between the title and the byline. Book pages also needed air under the buy row. */
.hero.slim .wrap{gap:6px}
.hero.slim h1{margin-bottom:2px}
.hero.slim p.muted{margin:0}
.book-top h2{margin-top:30px}
.author-card{border:1px solid var(--line);background:#fff;padding:24px 22px}
.author-card h3{margin-bottom:8px}
.author-card .who{font:11px/1.7 Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;
 color:var(--mut);margin:12px 0 0}
.table-wrap{max-width:820px}
tbody tr:nth-child(even) td{background:rgba(30,20,22,.02)}
@media(max-width:560px){th,td{padding:10px 6px;font-size:14px}}
.promise{background:#fff;border-top:1px solid var(--line)}
.promise-grid{display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.promise-grid h3{font-size:21px;margin:0 0 8px}
.promise-grid p{color:var(--mut);font-size:15px;margin:0;max-width:38ch}
.promise-grid > div{border-top:2px solid var(--gold);padding-top:14px}