: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:56%;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:26%;top:0;transform:rotate(2deg);z-index:2}
.stackimg.s2{left:50%;top:36px;transform:rotate(8deg);z-index:1;opacity:.96}
@media(max-width:820px){.hero .wrap{grid-template-columns:1fr}.stack{height:320px;margin-top:8px}.stackimg{width:48%}}

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