:root {
  --black: #080808;
  --plum: #3d0c2e;
  --plum-light: #6b1a52;
  --gold: #c9a84c;
  --gold-light: #e8c97a;
  --cream: #f5f0ea;
  --white: #ffffff;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Lato', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--black);
  color: var(--cream);
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
}

/* Subtle noise texture overlay */
.noise {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* Header */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.5rem 3rem;
  background: linear-gradient(to bottom, rgba(8,8,8,0.95), transparent);
}
.logo {
  font-family: var(--font-serif); font-size: 1.1rem; letter-spacing: 0.15em;
  color: var(--gold); text-transform: uppercase; text-decoration: none;
}
nav { display: flex; gap: 2.5rem; }
nav a {
  color: var(--cream); text-decoration: none; font-size: 0.8rem;
  letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; transition: opacity 0.2s, color 0.2s;
}
nav a:hover, nav a.active { opacity: 1; color: var(--gold); }

/* Hero */
.hero {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 6rem 2rem 4rem;
  background: radial-gradient(ellipse at center, var(--plum) 0%, var(--black) 70%);
  position: relative; z-index: 1;
}
.hero-content { max-width: 800px; }
.hero-emblem {
  display: block; width: clamp(240px, 44vw, 420px); height: auto;
  margin: -1rem auto 1.5rem; mix-blend-mode: screen;
}
.eyebrow {
  font-size: 0.75rem; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.5rem; opacity: 0.85;
}
h1 {
  font-family: var(--font-serif); font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 300; line-height: 1.1; margin-bottom: 1.5rem;
}
h1 em { font-style: italic; color: var(--gold-light); }
.hero-sub { font-size: 1.15rem; opacity: 0.78; max-width: 560px; margin: 0 auto 2.5rem; }
.cta-group { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* Page hero (interior pages, shorter than full viewport) */
.page-hero {
  min-height: 60vh; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 9rem 2rem 4rem;
  background: radial-gradient(ellipse at 50% 0%, var(--plum) 0%, var(--black) 65%);
  position: relative; z-index: 1;
}

/* Buttons */
.btn {
  display: inline-block; padding: 0.85rem 2.2rem; font-size: 0.8rem;
  font-family: var(--font-sans); font-weight: 300;
  letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  border-radius: 2px; border: none; background: none; transition: all 0.25s; cursor: pointer;
}
.btn-primary { background: var(--gold); color: var(--black); font-weight: 400; }
.btn-primary:hover { background: var(--gold-light); transform: translateY(-1px); }
.btn-ghost { border: 1px solid rgba(201,168,76,0.4); color: var(--gold); }
.btn-ghost:hover { border-color: var(--gold); background: rgba(201,168,76,0.07); }

/* Generic section */
.section { padding: 7rem 2rem; position: relative; z-index: 1; }
.section-inner { max-width: 720px; margin: 0 auto; }
.section.centered { text-align: center; }
.section.plum-wash { background: linear-gradient(to bottom, var(--black), var(--plum) 50%, var(--black)); }

h2 {
  font-family: var(--font-serif); font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 300; line-height: 1.15; margin-bottom: 1.25rem;
}
h2 em { font-style: italic; color: var(--gold-light); }
h3 {
  font-family: var(--font-serif); font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 400; line-height: 1.2; margin-bottom: 0.75rem; color: var(--gold-light);
}
.section-sub { font-size: 1.05rem; opacity: 0.72; margin-bottom: 2.5rem; }
.lead { font-size: 1.2rem; opacity: 0.85; }
.prose p { margin-bottom: 1.5rem; opacity: 0.82; font-size: 1.05rem; }
.prose p:last-child { margin-bottom: 0; }
.prose .drop { font-family: var(--font-serif); font-style: italic; font-size: 1.5rem; color: var(--gold-light); opacity: 1; }

/* Two-card offer grid */
.offer-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem; max-width: 900px; margin: 0 auto;
}
.card {
  border: 1px solid rgba(201,168,76,0.18); border-radius: 4px;
  padding: 2.5rem 2rem; text-align: left;
  background: linear-gradient(160deg, rgba(61,12,46,0.35), rgba(8,8,8,0.2));
  display: flex; flex-direction: column;
}
.card .eyebrow { margin-bottom: 1rem; }
.card p { opacity: 0.78; margin-bottom: 2rem; flex-grow: 1; }
.card .btn { align-self: flex-start; }

/* Steps / numbered list (program page) */
.steps { list-style: none; counter-reset: step; max-width: 640px; margin: 0 auto; text-align: left; }
.steps li { counter-increment: step; position: relative; padding: 0 0 2rem 3.5rem; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: -0.2rem;
  font-family: var(--font-serif); font-size: 1.6rem; color: var(--gold);
  width: 2.4rem; height: 2.4rem; border: 1px solid rgba(201,168,76,0.4);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.steps li:last-child { padding-bottom: 0; }
.steps strong { display: block; color: var(--cream); font-weight: 400; margin-bottom: 0.25rem; }
.steps span { opacity: 0.72; }

/* Status note */
.note {
  border-left: 2px solid rgba(201,168,76,0.5); padding: 0.5rem 0 0.5rem 1.5rem;
  margin: 0 auto; max-width: 560px; text-align: left; opacity: 0.7; font-style: italic;
  font-family: var(--font-serif); font-size: 1.15rem;
}

/* Shop embed placeholder */
.shop-embed { min-height: 120px; margin: 2rem auto 0; max-width: 900px; }
.embed-placeholder {
  border: 1px dashed rgba(201,168,76,0.3); border-radius: 4px;
  padding: 3rem 2rem; text-align: center; opacity: 0.55; font-style: italic;
  font-family: var(--font-serif); font-size: 1.1rem;
}

/* Contact */
.contact-line { font-size: 1.1rem; margin-bottom: 0.5rem; }
.contact-line a { color: var(--gold-light); text-decoration: none; border-bottom: 1px solid rgba(201,168,76,0.4); }
.contact-line a:hover { color: var(--gold); }

/* Footer */
footer { padding: 3.5rem 2rem; text-align: center; border-top: 1px solid rgba(201,168,76,0.15); position: relative; z-index: 1; }
footer .logo { display: inline-block; margin-bottom: 1rem; }
.footer-nav { display: flex; gap: 1.75rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.5rem; }
.footer-nav a { color: var(--cream); text-decoration: none; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; transition: opacity 0.2s, color 0.2s; }
.footer-nav a:hover { opacity: 1; color: var(--gold); }
.footer-sub { font-size: 0.75rem; opacity: 0.4; letter-spacing: 0.08em; }

/* Meet your design — Human Design form */
.hd-form { max-width: 520px; margin: 2.5rem auto 0; text-align: left; }
.hd-field { margin-bottom: 1.5rem; }
.hd-field > label {
  display: block; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.55rem; opacity: 0.85;
}
.hd-field input, .hd-field select {
  width: 100%; padding: 0.75rem 0.9rem; background: rgba(8,8,8,0.55);
  border: 1px solid rgba(201,168,76,0.3); border-radius: 2px; color: var(--cream);
  font-family: var(--font-sans); font-size: 1rem; font-weight: 300; color-scheme: dark;
  transition: border-color 0.2s;
}
.hd-field input:focus, .hd-field select:focus { outline: none; border-color: var(--gold); }
.hd-field select option { background: #140812; color: var(--cream); }
.hd-time-row { display: flex; gap: 0.6rem; }
.hd-time-row select, .hd-time-row input { flex: 1; }
.hd-warning {
  font-family: var(--font-serif); font-style: italic; font-size: 1.02rem;
  color: var(--gold-light); opacity: 0.75; margin-top: 0.6rem;
}
.hd-submit-row { text-align: center; margin-top: 2rem; }
.hd-error { color: var(--gold-light); opacity: 0.85; margin-top: 1rem; font-style: italic; font-family: var(--font-serif); }

/* Result */
.hd-result { display: none; margin-top: 3.5rem; text-align: center; }
.hd-result.visible { display: block; }
.hd-result .eyebrow { margin-bottom: 0.75rem; }
.hd-type {
  font-family: var(--font-serif); font-style: italic; font-weight: 300;
  font-size: clamp(2.6rem, 7vw, 4.2rem); line-height: 1.05; color: var(--gold-light);
  margin-bottom: 0.35rem;
}
.hd-strategy { font-size: 0.95rem; opacity: 0.65; margin-bottom: 2rem; }
.hd-meta {
  display: flex; gap: 2.5rem; justify-content: center; flex-wrap: wrap;
  margin: 0 auto 2rem; max-width: 620px;
}
.hd-meta .hd-meta-item { min-width: 120px; }
.hd-meta .hd-meta-label {
  display: block; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); opacity: 0.8; margin-bottom: 0.35rem;
}
.hd-meta .hd-meta-value { font-family: var(--font-serif); font-size: 1.4rem; color: var(--cream); }
.hd-cross {
  font-family: var(--font-serif); font-style: italic; font-size: 1.3rem;
  color: var(--cream); opacity: 0.85; margin: 0 auto 2.5rem; max-width: 620px;
}
.centers-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem;
  max-width: 440px; margin: 0 auto;
}
.center {
  padding: 0.85rem 0.5rem; border-radius: 3px; font-size: 0.78rem;
  letter-spacing: 0.05em; text-align: center; line-height: 1.3;
}
.center.defined { background: var(--gold); color: var(--black); border: 1px solid var(--gold); font-weight: 400; }
.center.undefined { background: transparent; color: var(--gold); border: 1px solid rgba(201,168,76,0.32); opacity: 0.65; }
.hd-privacy {
  font-size: 0.9rem; opacity: 0.6; margin: 2.75rem auto 0; max-width: 520px;
  font-style: italic; font-family: var(--font-serif);
}
.hd-result-cta { margin-top: 1.75rem; }
.hd-print-row { margin: 3rem auto 0; text-align: center; }

/* Beginner summary — labelled quick reference at the top of the reading */
.hd-summary {
  max-width: 480px; margin: 0 auto 3rem; text-align: left;
  border: 1px solid rgba(201,168,76,0.18); border-radius: 4px;
  padding: 1.4rem 1.75rem;
  background: linear-gradient(160deg, rgba(61,12,46,0.28), rgba(8,8,8,0.15));
}
.hd-summary-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1.25rem; padding: 0.55rem 0; border-bottom: 1px solid rgba(201,168,76,0.1);
}
.hd-summary-row:last-child { border-bottom: none; }
.hd-summary-label {
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); opacity: 0.8; white-space: nowrap;
}
.hd-summary-value {
  font-family: var(--font-serif); font-size: 1.1rem; color: var(--cream);
  text-align: right; line-height: 1.3;
}

/* The reading — plain-language meaning, assembled from the chart */
.hd-reading {
  text-align: left; max-width: 640px; margin: 3.5rem auto 0;
  border-top: 1px solid rgba(201,168,76,0.15); padding-top: 2.5rem;
}
.reading-intro {
  font-family: var(--font-serif); font-style: italic; font-size: 1.15rem;
  color: var(--cream); opacity: 0.8; line-height: 1.7; margin-bottom: 2.75rem;
}
.reading-block { margin-bottom: 2.75rem; }
.reading-block:last-child { margin-bottom: 0; }
.reading-label {
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); opacity: 0.85; margin-bottom: 0.6rem;
}
.reading-title {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.7rem, 4vw, 2.2rem); color: var(--gold-light);
  line-height: 1.1; margin-bottom: 0.9rem;
}
.reading-block p { opacity: 0.82; margin-bottom: 1rem; line-height: 1.75; }
.reading-block p:last-child { margin-bottom: 0; }
.reading-centres-intro {
  font-family: var(--font-serif); font-style: italic; font-size: 1.1rem;
  color: var(--cream); opacity: 0.8; margin-bottom: 1.75rem;
}
.reading-centre {
  border-left: 1px solid rgba(201,168,76,0.22);
  padding-left: 1.35rem; margin-bottom: 1.75rem;
}
.reading-centre:last-child { margin-bottom: 0; }
.reading-centre h4 {
  font-family: var(--font-serif); font-weight: 400; font-size: 1.25rem;
  color: var(--cream); margin-bottom: 0.25rem; line-height: 1.2;
}
.rc-tag {
  font-family: var(--font-sans); font-size: 0.6rem; font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase; padding: 0.15rem 0.55rem;
  border-radius: 2px; margin-left: 0.5rem; vertical-align: middle;
}
.reading-centre.defined .rc-tag { background: var(--gold); color: var(--black); }
.reading-centre.undefined .rc-tag { border: 1px solid rgba(201,168,76,0.4); color: var(--gold); }
.rc-what {
  font-size: 0.82rem; opacity: 0.55; font-style: italic;
  font-family: var(--font-serif); margin-bottom: 0.5rem !important;
}

/* The Return waitlist — surrounding LAD copy around the MailerLite embed */
.hd-waitlist {
  max-width: 480px; margin: 3.5rem auto 0; text-align: center;
  border-top: 1px solid rgba(201,168,76,0.15); padding-top: 3rem;
}
.hd-waitlist-heading {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.4rem); color: var(--gold-light);
  line-height: 1.1; margin-bottom: 1rem;
}
.hd-waitlist-text {
  font-size: 1.05rem; opacity: 0.8; line-height: 1.7; margin-bottom: 2rem;
}
.lad-ml-form .ml-consent {
  font-size: 0.78rem; line-height: 1.5; margin: 0.9rem 0 0 0;
  font-family: var(--font-sans); color: var(--cream); opacity: 0.55; text-align: left;
}
/* MailerLite's own embedded stylesheet floats .ml-form-embedSubmit left,
   which pulls it out of normal flow. With nothing clearing that float, the
   .ml-consent paragraph right after it collapses upward and overlaps the
   submit button, so mouse clicks land on the consent text instead of the
   button (Enter still worked because it bypasses hit-testing entirely).
   Removing the float restores normal stacking without touching the raw
   embed markup or script. */
.lad-ml-form #mlb2-43454429.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit {
  float: none !important;
}

/* Re-skin the MailerLite embed to look native to LAD. The .lad-ml-form
   prefix raises specificity above MailerLite's own scoped !important rules,
   so its yellow card, black button and Open Sans type are overridden while
   all of its functional markup, scripts and states stay intact. */
.lad-ml-form #mlb2-43454429.ml-form-embedContainer .ml-form-embedWrapper {
  background-color: transparent !important;
  border-radius: 0 !important;
}
.lad-ml-form #mlb2-43454429.ml-form-embedContainer .ml-form-embedWrapper.embedForm {
  max-width: 100% !important;
}
.lad-ml-form #mlb2-43454429.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody,
.lad-ml-form #mlb2-43454429.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody {
  padding: 0 !important;
}
.lad-ml-form #mlb2-43454429.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input {
  background-color: rgba(8,8,8,0.55) !important;
  color: var(--cream) !important;
  border: 1px solid rgba(201,168,76,0.4) !important;
  border-radius: 2px !important;
  font-family: var(--font-sans) !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  padding: 0.85rem 0.9rem !important;
}
.lad-ml-form #mlb2-43454429.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input:focus {
  border-color: var(--gold) !important;
  outline: none !important;
}
.lad-ml-form #mlb2-43454429.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input::placeholder { color: rgba(245,240,234,0.45) !important; }
.lad-ml-form #mlb2-43454429.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input::-webkit-input-placeholder { color: rgba(245,240,234,0.45) !important; }
.lad-ml-form #mlb2-43454429.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button {
  background-color: var(--gold) !important;
  color: var(--black) !important;
  border: none !important;
  border-radius: 2px !important;
  font-family: var(--font-sans) !important;
  font-size: 0.8rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 0.9rem !important;
}
.lad-ml-form #mlb2-43454429.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:hover {
  background-color: var(--gold-light) !important;
}
.lad-ml-form #mlb2-43454429.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent { text-align: center !important; }
.lad-ml-form #mlb2-43454429.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent h4 {
  color: var(--gold-light) !important;
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-size: 2rem !important;
  text-align: center !important;
}
.lad-ml-form #mlb2-43454429.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p {
  color: var(--cream) !important;
  font-family: var(--font-sans) !important;
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
  text-align: center !important;
}
.lad-ml-form .ml-form-embedSubmitLoad:after {
  border-color: var(--black) var(--black) var(--black) transparent !important;
}

/* Mobile */
@media (max-width: 720px) {
  .site-header { padding: 1.1rem 1.25rem; flex-direction: column; gap: 0.75rem; }
  .logo { font-size: 1rem; }
  nav { gap: 1.1rem; }
  nav a { font-size: 0.68rem; }
  .page-hero { padding: 8rem 1.5rem 3rem; }
  .section { padding: 5rem 1.5rem; }
}

/* Save or print my reading — a clean, light print-friendly version of the
   result and reading only. Nothing is sent or stored; this only opens the
   browser's own print dialog. Hides everything but the calculated chart and
   the prose reading: the birth-detail form, nav, footer, noise texture and
   the optional MailerLite waitlist all drop out of the printed page. */
@media print {
  .noise, .site-header, footer, .page-hero, .hd-form, .no-print { display: none !important; }
  body { background: #fff; color: #111; }
  .section { padding: 0; }
  .hd-result { margin-top: 0; }
  .hd-type, .reading-title { color: #3d0c2e; }
  .hd-meta-label, .reading-label, .hd-summary-label, .eyebrow { color: #6b1a52; opacity: 1; }
  .hd-cross, .reading-intro, .reading-centres-intro { color: #111; opacity: 1; }
  .center.defined { background: #eee1c2; color: #111; border-color: #c9a84c; }
  .center.undefined { background: #fff; color: #111; border-color: #999; opacity: 1; }
  .hd-summary, .reading-centre { border-color: #ccc; }
  .rc-tag { border-color: #999 !important; }
  .reading-centre.defined .rc-tag { background: #eee1c2; color: #111; }
  .reading-block p, .prose p, .hd-privacy { opacity: 1; color: #222; }
}

/* Journal list */
.journal-list { max-width: 720px; margin: 0 auto; }
.entry {
  padding: 2.5rem 0;
  border-bottom: 1px solid rgba(201,168,76,0.15);
}
.entry:first-child { padding-top: 0; }
.entry:last-child { border-bottom: none; }
.entry-date {
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); opacity: 0.75; margin-bottom: 0.6rem;
}
.entry h3 { margin-bottom: 0.4rem; }
.entry h3 a { color: var(--gold-light); text-decoration: none; transition: color 0.2s; }
.entry h3 a:hover { color: var(--gold); }
.entry-sub {
  font-family: var(--font-serif); font-style: italic;
  font-size: 1.05rem; opacity: 0.7; margin-bottom: 0.9rem;
}
.entry-excerpt { font-size: 1rem; opacity: 0.78; margin-bottom: 1rem; }
.entry-link {
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); text-decoration: none; opacity: 0.85;
  border-bottom: 1px solid rgba(201,168,76,0.35); padding-bottom: 2px;
}
.entry-link:hover { opacity: 1; border-color: var(--gold); }

@media (max-width: 640px) {
  .entry { padding: 2rem 0; }
}

/* Signup form */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.signup {
  display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap;
  max-width: 520px; margin: 0 auto;
}
.signup input[type="email"] {
  flex: 1 1 260px;
  padding: 0.85rem 1.1rem;
  background: rgba(8,8,8,0.5);
  border: 1px solid rgba(201,168,76,0.35);
  border-radius: 2px;
  color: var(--cream);
  font-family: var(--font-sans); font-weight: 300; font-size: 0.95rem;
}
.signup input[type="email"]::placeholder { color: var(--cream); opacity: 0.35; }
.signup input[type="email"]:focus {
  outline: none; border-color: var(--gold);
  background: rgba(8,8,8,0.75);
}
.signup button { flex: 0 0 auto; }
.signup button:disabled { opacity: 0.5; cursor: default; }
.signup-msg {
  margin-top: 1.1rem; font-size: 0.9rem; min-height: 1.2rem;
}
.signup-msg.ok {
  font-family: var(--font-serif); font-style: italic;
  font-size: 1.25rem; color: var(--gold-light);
}
.signup-msg.error { color: var(--gold); opacity: 0.85; }

@media (max-width: 520px) {
  .signup { flex-direction: column; }
  .signup button { width: 100%; }
}

/* Quiet signup bar */
.signup-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 1.25rem;
  padding: 1.15rem 3.5rem 1.15rem 2rem;
  background: linear-gradient(to bottom, rgba(61,12,46,0.97), rgba(8,8,8,0.99));
  border-top: 1px solid rgba(201,168,76,0.28);
  transform: translateY(110%);
  transition: transform 0.45s ease;
}
.signup-bar.visible { transform: translateY(0); }
.signup-bar-text {
  font-family: var(--font-serif); font-style: italic;
  font-size: 1.1rem; color: var(--cream); opacity: 0.85; margin: 0;
}
.signup-bar-text.done { color: var(--gold-light); opacity: 1; }
.signup-bar-form { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.signup-bar-form input {
  width: 230px; padding: 0.7rem 0.95rem;
  background: rgba(8,8,8,0.6);
  border: 1px solid rgba(201,168,76,0.35); border-radius: 2px;
  color: var(--cream); font-family: var(--font-sans); font-weight: 300; font-size: 0.9rem;
}
.signup-bar-form input::placeholder { color: var(--cream); opacity: 0.35; }
.signup-bar-form input:focus { outline: none; border-color: var(--gold); }
.signup-bar-form .btn { padding: 0.7rem 1.6rem; }
.signup-bar-close {
  position: absolute; top: 0.55rem; right: 1rem;
  background: none; border: none; cursor: pointer;
  color: var(--cream); opacity: 0.45; font-size: 1.5rem; line-height: 1;
  font-family: var(--font-sans); padding: 0.2rem 0.4rem;
}
.signup-bar-close:hover { opacity: 1; color: var(--gold); }

@media (max-width: 640px) {
  .signup-bar { flex-direction: column; gap: 0.8rem; padding: 1.25rem 1.25rem 1.4rem; text-align: center; }
  .signup-bar-text { font-size: 1rem; }
  .signup-bar-form { width: 100%; flex-direction: column; }
  .signup-bar-form input, .signup-bar-form .btn { width: 100%; }
}

/* About page */
.about-hero { min-height: 46vh; padding-top: 8rem; }
.about-emblem {
  display: block; width: clamp(180px, 26vw, 260px); height: auto;
  margin: 0 auto 1rem; mix-blend-mode: screen;
}
.about-layout {
  display: grid;
  grid-template-columns: minmax(200px, 300px) 1fr;
  gap: 3.5rem;
  align-items: start;
  max-width: 1000px;
  margin: 0 auto;
}
.about-portrait img {
  width: 100%; height: auto; display: block;
  border: 1px solid rgba(201,168,76,0.25);
  filter: grayscale(100%) brightness(0.92) contrast(1.05);
}
.about-portrait { position: sticky; top: 7rem; }
.about-bio p { font-size: 1.05rem; }

@media (max-width: 820px) {
  .about-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-portrait { position: static; max-width: 300px; margin: 0 auto; }
}

/* Footer social links */
.footer-social {
  display: flex; gap: 1.6rem; justify-content: center; flex-wrap: wrap;
  margin-top: 0.4rem;
}
.footer-social a {
  color: var(--gold); text-decoration: none;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  opacity: 0.6; transition: opacity 0.2s;
}
.footer-social a:hover { opacity: 1; }

@media (max-width: 520px) {
  .footer-social { gap: 1.1rem; }
}

/* About: where the writing lives */
.about-elsewhere {
  margin-top: 2.5rem; padding-top: 1.8rem;
  border-top: 1px solid rgba(201,168,76,0.18);
}
.about-elsewhere p {
  font-family: var(--font-serif); font-style: italic;
  font-size: 1.15rem; color: var(--cream); opacity: 0.8; margin-bottom: 1rem;
}

/* Book label on the shop page */
.book-label {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-style: italic;
  color: var(--gold-light);
  letter-spacing: 0.04em;
  margin: -0.4rem 0 1.6rem;
}

/* Emblem on interior page heroes */
.page-emblem {
  display: block; width: clamp(150px, 22vw, 220px); height: auto;
  margin: 0 auto 1.2rem; mix-blend-mode: screen;
}
.page-hero .hero-content { padding-top: 1rem; }

/* Book page blurb */
.book-blurb {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  line-height: 1.5;
  opacity: 0.88;
  max-width: 760px;
  margin: 1.6rem auto 0;
}