/* ============================================================================
   site.css — Shelf marketing theme, third edition: "a fine-press book."
   ============================================================================
   Design language: medieval · literary · library · books · simple · elegant.
   The page is set like the interior of a beautifully printed book — not a
   parchment simulation. One typeface (EB Garamond, an old-style face cut
   from 16th-century punches) does everything: display, body, UI, numerals.
   Four colors total: ivory paper, soft-black ink, oxblood (bookbinding
   leather) as the single accent, and a faded ink for marginalia. No
   textures, no gradients, no shadows — the devices are the book's own:
   hairline rules, small capitals, the asterism, a classic drop cap, and an
   accountant's double rule in the ledger.

   The class/ID contract is stable: every selector used by the static pages
   and by the blog function's SSR layout (supabase/functions/blog/render.ts)
   keeps its name, so this restyles the blog for free. The gated app pages
   (course/watch/thanks) do not link this file.                             */

:root{
  --paper:#FBF8F1;    /* ivory book paper                          */
  --ink:#1C1712;      /* soft black ink                            */
  --oxblood:#722F2A;  /* bookbinding leather — the single accent   */
  --faded:#6B6155;    /* faded ink — dates, notes, marginalia (AA on paper) */
  --rule:rgba(28,23,18,.25);       /* hairline rules               */
  --rule-soft:rgba(28,23,18,.12);  /* lighter hairlines            */
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"EB Garamond",Georgia,serif;
  font-size:20px;
  line-height:1.65;
  font-feature-settings:"liga","kern";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3{ font-weight:500; line-height:1.15; margin:0 0 18px; letter-spacing:-0.005em; }
h1{ font-size:clamp(40px,6vw,64px); }
h2{ font-size:clamp(28px,3.6vw,38px); }
h3{ font-size:23px; margin-bottom:10px; }
p{ margin:0 0 18px; }
a{ color:var(--oxblood); text-decoration-thickness:1px; text-underline-offset:3px; }
img{ max-width:100%; height:auto; }
strong{ font-weight:600; }
em{ font-style:italic; }
::selection{ background:var(--oxblood); color:var(--paper); }
:focus-visible{ outline:2px solid var(--oxblood); outline-offset:3px; }

.wrap{ max-width:1000px; margin:0 auto; padding:0 24px; }
.narrow{ max-width:660px; margin:0 auto; }

/* The lede — the larger opening paragraph under a title. */
.lede{ font-size:23px; line-height:1.6; }

/* The home hero mark — the wordmark set large as the frontispiece. */
.hero-mark{ display:block; margin:0 auto 30px; width:min(380px,76%); height:auto; }

/* Small capitals, letterspaced — the book's entire UI voice. */
.caps, .rubric, .site-nav a, .btn, .seal, .post-meta, .calc label,
.site-footer nav a{
  font-variant:all-small-caps;
  letter-spacing:.22em;
  font-feature-settings:"liga","kern","smcp","c2sc";
}

/* ============================================================================
   Header — a running head: wordmark, spaced small-cap links, one hairline. */
.site-header{
  background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:24px; padding-bottom:20px; gap:18px; flex-wrap:wrap;
}
.brand{ display:flex; align-items:center; text-decoration:none; }
.brand img{ height:44px; width:auto; display:block; }
.site-nav{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.site-nav a{
  color:var(--ink); text-decoration:none; font-size:17px;
}
.site-nav a:hover{ color:var(--oxblood); }
.site-nav a[aria-current="page"]{
  color:var(--oxblood);
  border-bottom:1px solid var(--oxblood); padding-bottom:2px;
}
.site-nav .cta{
  color:var(--oxblood);
  border:1px solid var(--oxblood);
  padding:6px 16px 7px;
}
.site-nav .cta:hover{ background:var(--oxblood); color:var(--paper); border-bottom:1px solid var(--oxblood); }
@media (max-width:640px){
  .site-header .wrap{ justify-content:center; }
  .site-nav{ justify-content:center; gap:18px; }
}

/* ============================================================================
   The book's devices                                                        */

/* Chapter label — small capitals in oxblood above a heading. */
.rubric{
  font-size:16px; color:var(--oxblood); margin-bottom:16px;
}

/* Asterism divider between chapters. The markup carries a fleuron glyph;
   it is simply set quiet and centered — no rules, no flourish. */
/* A symmetric rosette between chapters — an inline SVG of four petals
   crossed at 0/45/90/135 degrees, so it is identical under reflection and
   rotation about every axis. font-size:0 hides the ornament glyph in the
   markup; the ::before draws the flower, so every page and the blog get it
   without touching their HTML. Faded ink; centre punched out in paper. */
.fleuron{
  display:block; text-align:center;
  margin:56px auto; line-height:0; font-size:0;
}
.fleuron::before{
  content:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='30'%20height='30'%20viewBox='0%200%2030%2030'%3E%3Cg%20fill='%236B6155'%3E%3Cellipse%20cx='15'%20cy='15'%20rx='2.8'%20ry='11'/%3E%3Cellipse%20cx='15'%20cy='15'%20rx='2.8'%20ry='11'%20transform='rotate(45%2015%2015)'/%3E%3Cellipse%20cx='15'%20cy='15'%20rx='2.8'%20ry='11'%20transform='rotate(90%2015%2015)'/%3E%3Cellipse%20cx='15'%20cy='15'%20rx='2.8'%20ry='11'%20transform='rotate(135%2015%2015)'/%3E%3Ccircle%20cx='15'%20cy='15'%20r='3.4'%20fill='%23FBF8F1'/%3E%3Ccircle%20cx='15'%20cy='15'%20r='1.7'/%3E%3C/g%3E%3C/svg%3E");
}
.fleuron::after{ content:none; }

/* A classic literary drop cap: bare, oversized, oxblood. No box. */
.dropcap::first-letter{
  float:left;
  font-size:86px; line-height:.72;
  padding:10px 12px 0 0;
  color:var(--oxblood); font-weight:500;
}

/* An entry ("plate"): no card, no box — a hairline rule and space, the way
   a book separates entries in an index. */
.plate{
  background:none; border:none; padding:26px 0 6px;
  border-top:1px solid var(--rule);
}

/* Edition note (the old "seal"): a line of spaced small caps in oxblood. */
.seal{
  display:inline-block;
  color:var(--oxblood); font-size:16px;
  border-top:1px solid var(--oxblood);
  border-bottom:1px solid var(--oxblood);
  padding:5px 4px 6px;
}

/* ============================================================================
   Sections, buttons                                                          */
.section{ padding:88px 0; }
.section.alt{
  background:none;
  border-top:1px solid var(--rule-soft);
  border-bottom:1px solid var(--rule-soft);
}

.btn{
  display:inline-block; cursor:pointer; text-decoration:none;
  background:none; color:var(--ink);
  font-size:17px;
  border:1px solid var(--ink);
  padding:12px 30px 13px;
  transition:background .15s ease, color .15s ease;
}
.btn:hover{ background:var(--ink); color:var(--paper); }
.btn.ghost{
  border:none; padding:12px 4px 13px;
  color:var(--oxblood);
  text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:5px;
}
.btn.ghost:hover{ background:none; color:var(--ink); }

.muted{ color:var(--faded); }
.center{ text-align:center; }

.grid{ display:grid; gap:0 56px; }
@media (min-width:760px){
  .grid.cols-2{ grid-template-columns:1fr 1fr; }
  .grid.cols-3{ grid-template-columns:1fr 1fr 1fr; }
}

/* Page-load reveal — kept, gentled. */
.rise{ opacity:0; transform:translateY(10px); animation:rise .8s ease forwards; }
.rise.d1{ animation-delay:.15s; } .rise.d2{ animation-delay:.3s; } .rise.d3{ animation-delay:.45s; }
@keyframes rise{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  .rise{ animation:none; opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ============================================================================
   Footer — the colophon: centered, quiet, one rule above.                  */
.site-footer{
  border-top:1px solid var(--rule);
  margin-top:96px;
  padding:44px 0 64px;
  color:var(--faded); font-size:16px;
}
.site-footer .wrap{
  display:flex; flex-direction:column; align-items:center; gap:18px;
  text-align:center;
}
.site-footer strong{ color:var(--ink); font-weight:500; }
.site-footer nav{ display:flex; gap:26px; flex-wrap:wrap; justify-content:center; }
.site-footer nav a{ color:var(--faded); text-decoration:none; font-size:15px; }
.site-footer nav a:hover{ color:var(--oxblood); }
.site-footer a{ color:var(--oxblood); }

/* ============================================================================
   Blog — the index reads like a table of contents; a post like a chapter.  */
.post-list{ list-style:none; padding:0; margin:0; }
.post-card{
  background:none; border:none; box-shadow:none;
  padding:30px 0;
  border-top:1px solid var(--rule);
}
.post-card::before{ content:none; }
.post-list .post-card:last-child{ border-bottom:1px solid var(--rule); }
.post-card h2{ margin:2px 0 8px; font-size:29px; }
.post-card a{ text-decoration:none; color:var(--ink); }
.post-card a:hover{ color:var(--oxblood); }
.post-card p{ margin-bottom:0; }
.post-meta{ font-size:15px; color:var(--faded); margin-bottom:6px; }
.post-meta a{ color:var(--oxblood); }

.post-body{ max-width:660px; }
.post-body h2,.post-body h3{ margin-top:52px; }
.post-body pre{
  border:1px solid var(--rule); background:none;
  padding:18px 20px; overflow-x:auto; font-size:14px; line-height:1.6;
}
.post-body code{ font-family:ui-monospace,Consolas,monospace; font-size:.78em; }
.post-body p>code, .post-body li>code{ border:1px solid var(--rule-soft); padding:1px 6px; }
.post-body blockquote{
  margin:28px 0; padding:0 0 0 26px;
  border-left:1px solid var(--oxblood);
  font-style:italic; color:var(--ink);
}
.post-body blockquote p{ margin-bottom:0; }
.post-body img{ border:1px solid var(--rule); }
.post-body hr{
  border:none; margin:44px auto; width:120px;
  border-top:1px solid var(--rule);
}
.post-body ul,.post-body ol{ padding-left:26px; }
.post-body li{ margin-bottom:6px; }
/* Comparison tables: hairline rules, like the pricing ledger. */
.post-body table{
  width:100%; border-collapse:collapse; margin:32px 0;
  font-size:16px; font-variant-numeric:tabular-nums lining-nums;
}
.post-body thead th{
  text-align:left; padding:10px 12px; font-weight:600;
  border-bottom:1px solid var(--oxblood); vertical-align:bottom;
}
.post-body tbody td{
  text-align:left; padding:10px 12px;
  border-bottom:1px solid var(--rule-soft); vertical-align:top;
}
.post-body tbody tr:last-child td{ border-bottom:1px solid var(--rule); }
.post-body table code{ font-size:.85em; }
@media (max-width:560px){
  .post-body table{ font-size:14px; display:block; overflow-x:auto; }
  .post-body thead th,.post-body tbody td{ padding:8px 9px; white-space:nowrap; }
}

/* ============================================================================
   Pricing — editions of the same book; the calculator, a bookkeeper's page. */
.tier-price{
  font-size:52px; line-height:1.1; margin:10px 0 4px;
  font-variant-numeric:oldstyle-nums;
}
.tier-price span{ font-size:20px; color:var(--faded); }
.tier-note{ font-size:16px; color:var(--faded); }
.tier-list{ list-style:none; padding:0; margin:18px 0 0; }
.tier-list li{
  padding:9px 0; border-bottom:1px solid var(--rule-soft);
}
.tier-list li:last-child{ border-bottom:none; }
.tier-list li::before{ content:none; }
/* The founding edition carries the accent rule and price. */
#founding{ border-top:2px solid var(--oxblood); }
#founding .tier-price{ color:var(--oxblood); }

.calc{ margin-top:26px; }
.calc label{
  display:block; font-size:14px; color:var(--faded); margin-bottom:4px;
}
.calc .fields{ display:grid; gap:26px; margin-bottom:34px; }
@media (min-width:640px){ .calc .fields{ grid-template-columns:1fr 1fr 1.4fr; } }
.calc input,.calc select{
  width:100%; font-size:22px; font-family:inherit; color:var(--ink);
  background:none; border:none; border-bottom:1px solid var(--rule);
  border-radius:0; padding:6px 2px 8px;
  font-variant-numeric:tabular-nums lining-nums;
}
.calc input:focus,.calc select:focus{ outline:none; border-bottom:1px solid var(--oxblood); }

/* The ledger: hairline entries; the accountant's double rule before totals. */
.ledger{ width:100%; border-collapse:collapse; font-size:19px; }
.ledger th,.ledger td{
  text-align:left; padding:11px 4px;
  border-bottom:1px solid var(--rule-soft);
}
.ledger td:last-child,.ledger th:last-child{
  text-align:right;
  font-variant-numeric:tabular-nums lining-nums;
}
.ledger .total td{
  font-weight:500; font-size:21px;
  border-top:3px double var(--ink); border-bottom:none;
}
.ledger .total td:last-child{ color:var(--oxblood); }

.compare-bars{ display:grid; gap:14px; margin-top:18px; }
.compare-row{
  display:grid; grid-template-columns:110px 1fr 100px; align-items:center; gap:14px;
  font-size:17px;
}
.compare-row .bar{
  height:8px; background:none;
  border-bottom:1px solid var(--rule-soft);
  position:relative; overflow:hidden;
}
.compare-row .bar>span{ position:absolute; inset:0 auto 0 0; background:var(--faded); }
.compare-row.shelf .bar>span{ background:var(--oxblood); }
.compare-row .amt{
  text-align:right; font-variant-numeric:tabular-nums lining-nums;
}
.compare-row.shelf{ font-weight:600; }
.compare-row.shelf .amt{ color:var(--oxblood); }
/* Guard the ledger's fixed columns on very narrow screens. */
@media (max-width:420px){
  .compare-row{ grid-template-columns:72px 1fr 66px; gap:9px; font-size:14px; }
  /* Long small-cap CTAs (the email button) bloat with wide tracking — tighten
     it and let a long address break rather than push the page wide. */
  .btn{ padding-left:18px; padding-right:18px; letter-spacing:.08em; overflow-wrap:anywhere; }
}