/* Book landing page and order page. A file, not inline, so book pages can run a CSP without 'unsafe-inline'. */
:root { --bg:#0e0b0a; --panel:#17110f; --ink:#efe6d6; --muted:#b9ab96; --accent:#c9a45c; --wine:#7a2830; --rule:#3a2a24; --paper:#f7f1e6; --paper-ink:#1f1a17; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:18px/1.6 "EB Garamond", Georgia, serif; }
a { color:var(--accent); }
.wrap { max-width:1080px; margin:0 auto; padding:0 20px; }
header.top { display:flex; flex-wrap:wrap; gap:8px 16px; justify-content:space-between; align-items:center; padding:18px 0; font:600 12px/1 "Cormorant Garamond", serif; letter-spacing:.3em; text-transform:uppercase; }
header.top a { color:var(--muted); text-decoration:none; }
.hero { display:grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap:56px; align-items:center; padding:28px 0 64px; }
.hero img { width:100%; height:auto; display:block; box-shadow:0 30px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.05); }
.kicker { font:600 12px/1.4 "Cormorant Garamond", serif; letter-spacing:.3em; text-transform:uppercase; color:var(--accent); }
h1 { font:500 clamp(40px, 6vw, 68px)/1.02 "Cormorant Garamond", serif; margin:.25em 0 .2em; }
.sub { font-style:italic; color:var(--muted); font-size:20px; margin:0 0 1.2em; }
.byline { letter-spacing:.14em; text-transform:uppercase; font-size:14px; color:var(--muted); }
.cta { display:flex; gap:12px; flex-wrap:wrap; margin:28px 0 8px; }
.btn { display:inline-block; background:var(--wine); color:var(--ink); padding:13px 22px; text-decoration:none; font:600 13px/1 "Cormorant Garamond", serif; letter-spacing:.2em; text-transform:uppercase; border:1px solid #9a3a43; }
.btn.ghost { background:transparent; border-color:var(--rule); color:var(--ink); }
.btn.off { opacity:.55; cursor:default; }
button.btn { margin:0; cursor:pointer; -webkit-appearance:none; appearance:none; border-radius:0; }
.btn:hover { border-color:var(--accent); }
.btn:focus-visible, .checkout-close:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.small { font-size:15px; color:var(--muted); }
section { padding:56px 0; border-top:1px solid var(--rule); }
h2 { font:500 36px/1.1 "Cormorant Garamond", serif; margin:0 0 20px; }
.cols { display:grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap:56px; }
ul.inside { list-style:none; padding:0; margin:0; }
ul.inside li { padding:10px 0 10px 26px; border-bottom:1px solid var(--rule); position:relative; }
ul.inside li::before { content:"✦"; position:absolute; left:0; color:var(--accent); font-size:13px; top:14px; }
table.formats { width:100%; border-collapse:collapse; }
table.formats td { padding:16px 8px; border-bottom:1px solid var(--rule); vertical-align:top; }
table.formats td.price { font:600 22px/1 "Cormorant Garamond", serif; white-space:nowrap; }
table.formats td:last-child { text-align:right; }
.reading { background:var(--paper); color:var(--paper-ink); padding:56px 0; border:0; }
.reading h2 { color:var(--paper-ink); }
.reading .wrap { max-width:720px; }
.reading .small { color:#6b5e51; }
.reading .small a { color:#7a2830; }
.letter { margin:0 0 48px; }
.letter h3 { text-align:center; font:500 14px/1 "EB Garamond", serif; letter-spacing:.25em; text-transform:uppercase; margin:40px 0 8px; }
.letter .address { text-align:center; font-style:italic; margin:0 0 16px; }
.letter p { margin:0; text-indent:1.3em; text-align:justify; hyphens:auto; }
.letter .note + p, .letter .address + p { text-indent:0; }
.letter .dateline { text-align:right; font-style:italic; margin-top:8px; }
.letter .ps { text-indent:0; margin-top:8px; }
.note { display:block; border-top:1px solid var(--wine); border-bottom:1px solid var(--wine); padding:12px 0; margin:0 0 18px; font-size:16px; }
.note span { font:600 11px/1 "Cormorant Garamond", serif; letter-spacing:.2em; text-transform:uppercase; color:var(--wine); margin-right:6px; }
sup.fn { font-size:.65em; color:var(--wine); }
ol.notes { font-size:14px; border-top:1px solid #d8cdbb; margin-top:14px; padding-top:8px; }
.faq dt { font-weight:500; margin-top:18px; }
.faq dd { margin:4px 0 0; color:var(--muted); }
footer { border-top:1px solid var(--rule); padding:36px 0 48px; font-size:15px; color:var(--muted); }
footer nav a { margin-right:18px; color:var(--muted); }

/* Test mode (stamped per host; docs/commerce.md §7). */
.testmode { background:var(--accent); color:var(--paper-ink); text-align:center; padding:9px 16px; font-size:15px; line-height:1.4; }
.testmode strong { font:600 12px/1 "Cormorant Garamond", serif; letter-spacing:.2em; text-transform:uppercase; margin-right:4px; }
.testmode span { white-space:nowrap; }

/* Checkout dialog: Stripe's embedded form mounts in .checkout-mount. */
html:has(dialog.checkout[open]) { overflow:hidden; }
dialog.checkout { width:min(1040px, calc(100vw - 32px)); max-width:none; max-height:calc(100vh - 32px); padding:0; border:0; background:#fff; color:var(--paper-ink); box-shadow:0 30px 80px rgba(0,0,0,.6); }
dialog.checkout::backdrop { background:rgba(14,11,10,.82); }
.checkout-head { position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 20px; background:var(--paper); border-bottom:1px solid #e4dccd; }
.checkout-head h2 { font:500 24px/1.15 "Cormorant Garamond", serif; margin:0; color:var(--paper-ink); }
.checkout-close { flex:none; background:transparent; border:1px solid #d8cdbb; color:var(--paper-ink); padding:10px 14px; font:600 12px/1 "Cormorant Garamond", serif; letter-spacing:.2em; text-transform:uppercase; cursor:pointer; }
.checkout-note { margin:0; padding:10px 20px; font-size:15px; background:#fbf3df; border-bottom:1px solid #eadfc4; }
.checkout-status { margin:0; padding:28px 20px; font-size:17px; color:#4a3f36; }
.checkout-status:empty { display:none; }
.checkout-status a { color:var(--wine); }
.checkout-status button { margin-left:6px; background:transparent; border:1px solid #d8cdbb; color:var(--paper-ink); padding:6px 10px; font:inherit; font-size:15px; cursor:pointer; }
.checkout-mount { min-height:120px; }

/* Order-status page (thanks/). */
.order { max-width:720px; padding:28px 0 72px; }
.order h1 { font-size:clamp(36px, 5vw, 56px); }
.order dl { display:grid; grid-template-columns:max-content minmax(0, 1fr); gap:12px 28px; margin:28px 0; padding:20px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.order dt { font:600 12px/1.9 "Cormorant Garamond", serif; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.order dd { margin:0; overflow-wrap:anywhere; }
.order .downloads { list-style:none; padding:0; display:flex; gap:12px; flex-wrap:wrap; margin:8px 0 10px; }

@media (max-width: 760px) {
  dialog.checkout { width:100vw; height:100vh; height:100dvh; max-height:none; margin:0; box-shadow:none; }
  .checkout-head { padding:12px 16px; }
  .checkout-head h2 { font-size:20px; }
  .order dl { grid-template-columns:1fr; gap:2px; }
  .order dd { margin-bottom:12px; }
  .hero, .cols { grid-template-columns: 1fr; gap:32px; }
  .hero img { max-width:320px; margin:0 auto; }
  table.formats td:last-child { text-align:left; }
  table.formats tr { display:grid; grid-template-columns:1fr auto; }
  table.formats td:last-child { grid-column: 1 / -1; padding-top:0; }
}