/* Layout: a single dark "scriptorium" page lit from above like the cover; one vellum band for reading. */
:root {
  --umber: #17110b;        /* page ground, the cover's darkest brown */
  --umber-2: #211810;      /* raised band */
  --umber-3: #2e2216;      /* rules, card ground */
  --gold: #c9a464;         /* illuminated gold, display type and accents */
  --gold-soft: #a88a56;    /* secondary gold for labels */
  --ink: #ece3d2;          /* body text on dark */
  --ink-dim: #b9ac95;      /* secondary text on dark */
  --teal: #6fd0d4;         /* the circuit glow, used sparingly */
  --vellum: #efe6d3;       /* reading surface */
  --vellum-ink: #2a2017;   /* text on vellum */
  --vellum-rule: #d4c5a8;

  --display: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --body: "EB Garamond", "Garamond", "Georgia", serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --measure: 36rem;
  --wide: 72rem;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--umber);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.1875rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 2px; }

.wrap {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}

h1, h2, h3 { font-family: var(--display); font-weight: 500; text-wrap: balance; margin: 0; color: var(--gold); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); letter-spacing: 0.04em; line-height: 1.2; }
h3 { font-size: 1.05rem; letter-spacing: 0.06em; line-height: 1.3; }
p { margin: 0; }
.eyebrow {
  font-family: var(--display); font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-soft); margin: 0;
}
.rule { width: 7rem; height: 1px; background: var(--gold-soft); opacity: 0.7; border: 0; margin: 0; }

/* Header */
.site-head {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: rgba(23, 17, 11, 0.88);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--umber-3);
}
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.7rem; }
.wordmark { font-family: var(--display); color: var(--gold); text-decoration: none; letter-spacing: 0.14em; font-size: 0.95rem; white-space: nowrap; }
.nav { display: flex; gap: 1.4rem; align-items: center; }
.nav a { color: var(--ink-dim); text-decoration: none; font-size: 1rem; }
.nav a:hover { color: var(--gold); }
@media (max-width: 760px) { .nav .nav-link { display: none; } }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--display); font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.95rem 1.4rem; border-radius: 2px; text-decoration: none; line-height: 1;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.btn-gold { background: var(--gold); color: var(--umber); border: 1px solid var(--gold); }
.btn-gold:hover { background: var(--ink); border-color: var(--ink); color: var(--umber); }
.btn-line { color: var(--gold); border: 1px solid var(--gold-soft); background: transparent; }
.btn-line:hover { border-color: var(--ink); color: var(--ink); }
.btn-small { padding: 0.6rem 0.9rem; font-size: 0.72rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Hero */
.hero {
  background:
    radial-gradient(ellipse 55% 75% at 50% 0%, rgba(150, 120, 70, 0.42), rgba(23, 17, 11, 0) 70%),
    var(--umber);
  border-bottom: 1px solid var(--umber-3);
}
.hero .wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-block: clamp(3rem, 7vw, 6rem);
}
.hero-book { justify-self: center; width: min(100%, 25rem); filter: drop-shadow(0 30px 40px rgba(0,0,0,0.6)); }
.hero-text { display: grid; gap: 1.4rem; min-width: 0; }
.hero h1 { font-size: clamp(2.6rem, 6.4vw, 4.6rem); line-height: 1.02; letter-spacing: 0.05em; }
.hero .subtitle { font-style: italic; font-size: clamp(1.3rem, 2.4vw, 1.6rem); color: var(--ink); line-height: 1.3; }
.hero .question { font-family: var(--display); font-size: 1.15rem; letter-spacing: 0.04em; color: var(--ink); line-height: 1.45; max-width: 30rem; }
.hero .by { color: var(--ink-dim); font-size: 1.05rem; }
.hero .formats { color: var(--ink-dim); font-size: 0.98rem; }
@media (max-width: 820px) {
  .hero .wrap { grid-template-columns: 1fr; text-align: left; }
  .hero-book { width: min(70%, 17rem); }
}

/* Generic section */
.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section + .section { border-top: 1px solid var(--umber-3); }
.section-head { display: grid; gap: 0.9rem; margin-bottom: 2.5rem; max-width: var(--measure); }
.prose { display: grid; gap: 1.1rem; max-width: var(--measure); }
.prose p { color: var(--ink); }
.closing-line { font-style: italic; color: var(--gold); font-size: 1.35rem; line-height: 1.4; }

/* Who it's for: text + two habits */
.for-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 860px) { .for-grid { grid-template-columns: 1fr; } }

.habits { display: grid; gap: 1.25rem; }
.habit { display: grid; gap: 0.4rem; }
.habit h3 { font-size: 1.3rem; letter-spacing: 0.18em; }
.habit .acronym { font-family: var(--mono); font-size: 0.82rem; color: var(--teal); letter-spacing: 0.02em; }
.habit p { color: var(--ink-dim); }

.prompt {
  background: #0f0b07; border: 1px solid var(--umber-3); border-radius: 3px;
  font-family: var(--mono); font-size: 0.84rem; line-height: 1.6; color: var(--ink);
  padding: 1.25rem 1.3rem; display: grid; gap: 0.7rem; margin-top: 0.5rem;
}
.prompt .cap { font-family: var(--display); font-size: 0.7rem; letter-spacing: 0.2em; color: var(--gold-soft); text-transform: uppercase; }
.prompt b { color: var(--teal); font-weight: 500; }

/* Contents */
.parts { display: grid; gap: 3rem; }
.part { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 2rem; }
.part-label { display: grid; gap: 0.5rem; align-content: start; }
.part-label h3 { font-size: 1.25rem; }
.part-label p { color: var(--ink-dim); font-size: 1rem; line-height: 1.5; }
@media (max-width: 820px) { .part { grid-template-columns: 1fr; gap: 1.2rem; } }

.chapters { list-style: none; margin: 0; padding: 0; display: grid; }
.chapters li {
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; column-gap: 1rem; row-gap: 0.15rem;
  padding-block: 1rem; border-bottom: 1px solid var(--umber-3); align-items: baseline;
}
.chapters li:first-child { border-top: 1px solid var(--umber-3); }
.ch-num { font-family: var(--display); color: var(--gold-soft); font-size: 1rem; font-variant-numeric: tabular-nums; grid-row: span 2; }
.ch-title { font-size: 1.2rem; color: var(--ink); }
.ch-ref { font-style: italic; color: var(--gold-soft); font-size: 0.95rem; white-space: nowrap; text-align: right; }
.ch-desc { grid-column: 2 / 4; color: var(--ink-dim); font-size: 1.02rem; line-height: 1.5; }
@media (max-width: 560px) {
  .chapters li { grid-template-columns: 2rem minmax(0, 1fr); }
  .ch-ref { grid-column: 2; text-align: left; }
  .ch-desc { grid-column: 2; }
  .ch-num { grid-row: span 3; }
}
.backmatter { margin-top: 2rem; color: var(--ink-dim); font-size: 1rem; max-width: var(--measure); }

/* Foreword: vellum band */
.vellum { background: var(--vellum); color: var(--vellum-ink); }
.vellum h2, .vellum .eyebrow { color: #7a5a24; }
.vellum .section-head { margin-bottom: 2rem; }
.foreword { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 860px) { .foreword { grid-template-columns: 1fr; } }
.pull {
  margin: 0; font-size: clamp(1.45rem, 2.8vw, 1.9rem); line-height: 1.35; font-style: italic; color: var(--vellum-ink);
  padding-left: 1.4rem; border-left: 2px solid #b08d4f;
}
.foreword .prose p { color: var(--vellum-ink); }
.signed { display: grid; gap: 0.15rem; margin-top: 0.6rem; }
.signed strong { font-family: var(--display); font-weight: 500; letter-spacing: 0.08em; font-size: 1rem; }
.signed span { color: #6b5a44; font-size: 1rem; }

/* Sample chapter */
.sample { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 860px) { .sample { grid-template-columns: 1fr; } }
.signup {
  background: var(--umber-2); border: 1px solid var(--umber-3); border-radius: 3px;
  padding: clamp(1.4rem, 3vw, 2rem); display: grid; gap: 1rem;
}
.signup iframe { width: 100%; height: 150px; border: 0; background: transparent; border-radius: 2px; }
.signup .fine { color: var(--ink-dim); font-size: 0.95rem; }

/* Author */
.author { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.author figure { margin: 0; }
.author img { border-radius: 2px; box-shadow: 0 24px 50px rgba(0,0,0,0.5); }
@media (max-width: 820px) { .author { grid-template-columns: 1fr; } .author figure { max-width: 24rem; } }
.also { border-top: 1px solid var(--umber-3); padding-top: 1.1rem; color: var(--ink-dim); font-size: 1.02rem; }

/* Workbench */
.workbench { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.workbench figure { margin: 0; }
.workbench figure img { border-radius: 2px; }
.workbench figcaption { color: var(--ink-dim); font-size: 0.92rem; font-style: italic; margin-top: 0.6rem; }
@media (max-width: 820px) { .workbench { grid-template-columns: 1fr; } .workbench figure { max-width: 24rem; order: -1; } }
.links { display: grid; gap: 0.9rem; margin-top: 0.5rem; }
.link-card {
  display: grid; gap: 0.2rem; text-decoration: none; padding: 1rem 1.2rem;
  border: 1px solid var(--umber-3); border-radius: 3px; background: var(--umber-2);
  transition: border-color 0.2s;
}
.link-card:hover { border-color: var(--gold-soft); }
.link-card strong { font-family: var(--display); font-weight: 500; letter-spacing: 0.06em; color: var(--gold); font-size: 1rem; }
.link-card span { color: var(--ink-dim); font-size: 1rem; }
.link-card .url { font-family: var(--mono); font-size: 0.8rem; color: var(--teal); }

/* Buy band */
.buy {
  text-align: center;
  background: radial-gradient(ellipse 50% 90% at 50% 0%, rgba(150, 120, 70, 0.35), rgba(23, 17, 11, 0) 70%), var(--umber);
}
.buy .wrap { display: grid; justify-items: center; gap: 1.4rem; }
.buy img { width: 9rem; box-shadow: 0 18px 40px rgba(0,0,0,0.6); }
.buy .btn-row { justify-content: center; }
.buy .line { font-style: italic; font-size: 1.35rem; color: var(--ink); max-width: 30rem; }

/* Footer */
.site-foot { border-top: 1px solid var(--umber-3); padding-block: 2.2rem; color: var(--ink-dim); font-size: 0.95rem; }
.site-foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; }
.site-foot a { color: var(--ink-dim); }
.site-foot a:hover { color: var(--gold); }
.foot-links { display: flex; flex-wrap: wrap; gap: 1.2rem; }

/* ---------- Chapter reading page ---------- */
.reader { background: var(--vellum); color: var(--vellum-ink); }
.reader main.wrap { max-width: 44rem; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.reader header.ch-head { text-align: center; display: grid; gap: 1rem; justify-items: center; margin-bottom: 2.5rem; }
.reader .eyebrow { color: #7a5a24; }
.reader h1 { color: var(--vellum-ink); font-size: clamp(2rem, 5vw, 2.9rem); letter-spacing: 0.05em; }
.reader .epigraph { font-style: italic; font-size: 1.2rem; max-width: 30rem; line-height: 1.5; }
.reader .epigraph cite { display: block; font-style: normal; font-size: 0.95rem; color: #6b5a44; margin-top: 0.4rem; }
.reader article { display: grid; gap: 1.1rem; font-size: 1.2rem; line-height: 1.68; }
.reader article h2 { color: var(--vellum-ink); font-size: 1.3rem; letter-spacing: 0.06em; margin-top: 1.4rem; }
.reader article p:first-of-type::first-letter {
  font-family: var(--display); float: left; font-size: 4.1rem; line-height: 0.8; padding: 0.35rem 0.5rem 0 0; color: #8a6528;
}
.reader sup a { text-decoration: none; color: #8a6528; font-size: 0.75em; padding-inline: 1px; }
.reader .prompt { background: #f7f1e4; border-color: var(--vellum-rule); color: var(--vellum-ink); }
.reader .prompt b { color: #1f6f73; }
.reader .box { background: #e6dbc4; border-radius: 3px; padding: 1.3rem 1.4rem; display: grid; gap: 0.6rem; font-size: 1.08rem; }
.reader .box h2 { margin-top: 0; font-size: 1.05rem; }
.reader ol { margin: 0; padding-left: 1.4rem; display: grid; gap: 0.6rem; }
.reader .notes { border-top: 1px solid var(--vellum-rule); margin-top: 2.5rem; padding-top: 1.5rem; font-size: 0.98rem; color: #4a3d2e; }
.reader .notes ol { gap: 0.5rem; }
.reader .notes a { color: #7a5a24; word-break: break-word; }
.reader .end-cta { margin-top: 3rem; padding: 2rem; background: var(--umber); color: var(--ink); border-radius: 3px; display: grid; gap: 1rem; justify-items: start; }
.reader .end-cta h2 { color: var(--gold); margin: 0; }
.nav a.btn-gold, .nav a.btn-gold:hover { color: var(--umber); }
.reader .site-head { background: var(--umber); }

/* Anchor targets clear the sticky header */
section[id] { scroll-margin-top: 4.5rem; }

/* Buy buttons before the Amazon links exist */
.btn.is-pending { cursor: default; opacity: 0.6; pointer-events: none; }
.pending-note { color: var(--ink-dim); }

/* Contact */
.contact { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 820px) { .contact { grid-template-columns: 1fr; } }
.contact-form {
  display: grid; gap: 1.1rem; background: var(--umber-2); border: 1px solid var(--umber-3);
  border-radius: 3px; padding: clamp(1.3rem, 3vw, 2rem); min-width: 0;
}
.field { display: grid; gap: 0.35rem; }
.field label { font-family: var(--display); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-soft); }
.field .opt { text-transform: none; letter-spacing: 0; font-family: var(--body); font-size: 0.95rem; color: var(--ink-dim); }
.field input, .field textarea {
  width: 100%; font: inherit; font-size: 1.08rem; color: var(--ink); background: #0f0b07;
  border: 1px solid var(--umber-3); border-radius: 2px; padding: 0.7rem 0.8rem;
}
.field textarea { resize: vertical; min-height: 9rem; line-height: 1.5; }
.field input:focus, .field textarea:focus { border-color: var(--gold-soft); outline: none; box-shadow: 0 0 0 2px rgba(111, 208, 212, 0.35); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.form-foot .btn { border: 0; cursor: pointer; }
.form-foot .btn:disabled { opacity: 0.6; cursor: progress; }
.form-status { color: var(--ink-dim); font-size: 1rem; }
.form-status.ok { color: var(--teal); }
.form-status.err { color: #e8a07a; }