/* ===========================================================
   THORN & TALLY HOUSE — stylesheet
   A quiet, literary gothic system: near-black grounds, restrained
   antique gold, one recurring "seal & thread" ornament as signature.
   =========================================================== */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,500&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap');

/* ---------- Design tokens ---------- */
:root {
  --ink-black: #0b0a08;
  --charcoal: #16130f;
  --charcoal-2: #1e1a14;
  --charcoal-3: #262019;
  --gold: #b6903f;
  --gold-soft: #8f7038;
  --gold-bright: #d8b46c;
  --parchment: #eadfc4;
  --parchment-dim: #c9bd9c;
  --parchment-faint: #8f8570;
  --wax: #6d1220;
  --wax-bright: #8c1c2c;
  --line: rgba(182, 144, 63, 0.22);
  --line-strong: rgba(182, 144, 63, 0.42);
  --shadow-deep: 0 30px 60px -20px rgba(0, 0, 0, 0.7);

  --font-display: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --font-body: 'EB Garamond', Georgia, 'Times New Roman', serif;

  --max-width: 1180px;
  --section-pad: clamp(4.5rem, 9vw, 8rem);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--ink-black);
  color: var(--parchment);
  font-family: var(--font-body);
  font-size: 1.06rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; color: var(--parchment); }
p { margin: 0; }
button { font-family: inherit; }

/* Visible keyboard focus states, everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
  border-radius: 2px;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.75rem;
}

.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;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -60px;
  background: var(--gold);
  color: var(--ink-black);
  padding: 0.7rem 1.2rem;
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: 2px;
  z-index: 200;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; }

/* ---------- Eyebrow / small caps utility ---------- */
.eyebrow {
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}

/* ---------- Section ornament (signature element) ----------
   A single recurring mark: a hairline thread broken by a small
   wax-toned seal dot — "every vow leaves its mark." Used once
   between every major section instead of a hard rule. */
.seal-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  width: 100%;
  padding: 0;
  margin: 0;
}
.seal-divider .thread {
  height: 1px;
  flex: 1 1 auto;
  max-width: 220px;
  background: linear-gradient(to right, transparent, var(--line-strong));
}
.seal-divider .thread.right { background: linear-gradient(to left, transparent, var(--line-strong)); }
.seal-divider .seal {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--wax);
  box-shadow: 0 0 0 3px rgba(109,18,32,0.18), 0 0 0 1px var(--line-strong);
  flex: none;
}

/* ---------- Section headings ---------- */
.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3.2rem;
}
.section-head .eyebrow { display: block; margin-bottom: 0.9rem; }
.section-head h2 {
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 600;
  line-height: 1.2;
}
.section-head .lede {
  margin-top: 1.1rem;
  color: var(--parchment-dim);
  font-size: 1.08rem;
  line-height: 1.75;
}

section { position: relative; }
.section-inner { padding: var(--section-pad) 0; }
.bg-black { background: var(--ink-black); }
.bg-charcoal { background: var(--charcoal); }
.bg-charcoal-2 {
  background: linear-gradient(180deg, var(--charcoal) 0%, var(--charcoal-2) 100%);
}

/* ---------- Buttons ---------- */
.btn {
  --seal-x: 50%;
  --seal-y: 50%;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 2.1rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  overflow: hidden;
  isolation: isolate;
  white-space: nowrap;
}
.btn::before {
  content: "";
  position: absolute;
  left: var(--seal-x);
  top: var(--seal-y);
  width: 8px; height: 8px;
  background: radial-gradient(circle, rgba(234,223,196,0.55) 0%, rgba(234,223,196,0) 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}
.btn:active::before {
  transform: translate(-50%, -50%) scale(14);
  opacity: 1;
  transition: transform 0.5s ease, opacity 0.6s ease 0.05s;
}

.btn-primary {
  background: var(--gold);
  color: var(--ink-black);
  border-color: var(--gold);
}
.btn-primary:hover { background: var(--gold-bright); border-color: var(--gold-bright); transform: translateY(-1px); box-shadow: 0 12px 24px -10px rgba(182,144,63,0.45); }

.btn-outline {
  background: transparent;
  color: var(--parchment);
  border-color: var(--line-strong);
}
.btn-outline:hover { border-color: var(--gold); color: var(--gold-bright); transform: translateY(-1px); }

.btn-wax {
  background: var(--wax);
  color: var(--parchment);
  border-color: var(--wax);
}
.btn-wax:hover { background: var(--wax-bright); border-color: var(--wax-bright); transform: translateY(-1px); box-shadow: 0 12px 24px -10px rgba(109,18,32,0.5); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ---------- Header / Nav ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(11, 10, 8, 0.72);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.site-header.is-scrolled {
  border-bottom-color: var(--line);
  background: rgba(11, 10, 8, 0.92);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.75rem;
  max-width: var(--max-width);
  margin: 0 auto;
}
.wordmark {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--parchment);
  text-transform: uppercase;
}
.wordmark span { color: var(--gold); }

.main-nav { display: none; }
.main-nav ul {
  display: flex;
  align-items: center;
  gap: 2.1rem;
}
.main-nav a {
  font-family: var(--font-display);
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  color: var(--parchment-dim);
  position: relative;
  padding-bottom: 4px;
  transition: color 0.25s ease;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--gold);
  transition: right 0.3s ease;
}
.main-nav a:hover,
.main-nav a:focus-visible { color: var(--parchment); }
.main-nav a:hover::after,
.main-nav a:focus-visible::after { right: 0; }

.menu-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  cursor: pointer;
  padding: 0;
  align-items: center;
}
.menu-toggle span {
  display: block;
  width: 18px;
  height: 1px;
  background: var(--gold);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav {
  position: fixed;
  top: var(--header-height, 73px);
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background: var(--ink-black);
  z-index: 99;
  padding: 0 24px;
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s;
}
.mobile-nav.is-open {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}
.mobile-nav ul {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0 2rem;
}
.mobile-nav a {
  display: block;
  padding: 1.05rem 0;
  font-family: var(--font-display);
  font-size: 1.08rem;
  letter-spacing: 0.03em;
  color: var(--parchment);
  transition: color 0.25s ease;
}
.mobile-nav a:hover, .mobile-nav a:focus-visible { color: var(--gold-bright); }

@media (min-width: 900px) {
  .main-nav { display: block; }
  .menu-toggle { display: none; }
  .mobile-nav { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-top: calc(65px + clamp(3rem, 8vw, 6rem));
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
  background:
    radial-gradient(ellipse 70% 55% at 78% 18%, rgba(182,144,63,0.10), transparent 60%),
    radial-gradient(ellipse 60% 50% at 10% 90%, rgba(109,18,32,0.10), transparent 60%),
    var(--ink-black);
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid var(--line);
  pointer-events: none;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.2rem;
  align-items: center;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.75rem;
}
.hero-copy .eyebrow { margin-bottom: 1.3rem; display: block; }
.hero-copy h1 {
  font-size: clamp(2.5rem, 6vw, 3.6rem);
  line-height: 1.08;
  font-weight: 600;
  max-width: 20ch;
  text-wrap: balance;
}
.hero-copy .hero-sub {
  margin-top: 1.5rem;
  font-size: 1.2rem;
  color: var(--parchment-dim);
  max-width: 46ch;
  line-height: 1.65;
}
.hero-copy .btn-row { margin-top: 2.4rem; }
.hero-art {
  display: flex;
  justify-content: center;
}
.hero-art figure {
  margin: 0;
  position: relative;
  max-width: 320px;
  width: 100%;
}
.hero-art img {
  width: 100%;
  height: auto;
  border-radius: 3px;
  box-shadow: var(--shadow-deep);
  border: 1px solid var(--line-strong);
}
.hero-art .art-tag {
  position: absolute;
  bottom: -14px; left: 50%;
  transform: translateX(-50%);
  background: var(--ink-black);
  border: 1px solid var(--line-strong);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.45rem 1.1rem;
  white-space: nowrap;
  border-radius: 2px;
}

@media (min-width: 860px) {
  .hero-grid { grid-template-columns: 1.22fr 0.78fr; }
  .hero-art { justify-content: flex-end; }
}

/* ---------- Books catalog ---------- */
.book-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.4rem;
}
@media (min-width: 700px) {
  .book-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1020px) {
  .book-grid { grid-template-columns: repeat(3, 1fr); }
}

.book-card {
  display: flex;
  flex-direction: column;
  background: var(--charcoal-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.book-card:hover {
  transform: translateY(-6px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-deep);
}
.book-cover {
  background: var(--ink-black);
  padding: 1.6rem 1.6rem 0;
}
.book-cover img {
  width: 100%;
  height: auto;
  border-radius: 2px;
}
.book-info {
  padding: 1.5rem 1.7rem 1.9rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.status-pill {
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.32rem 0.75rem;
  border-radius: 2px;
  margin-bottom: 0.9rem;
  border: 1px solid;
}
.status-pill.live {
  color: var(--ink-black);
  background: var(--gold);
  border-color: var(--gold);
}
.status-pill.soon {
  color: var(--parchment-dim);
  background: transparent;
  border-color: var(--line-strong);
}
.book-info .series-line {
  font-family: var(--font-display);
  font-size: 0.86rem;
  letter-spacing: 0.05em;
  color: var(--gold);
  margin-bottom: 0.35rem;
}
.book-info h3 {
  font-size: 1.55rem;
  line-height: 1.25;
  margin-bottom: 0.85rem;
}
.book-info p.desc {
  color: var(--parchment-dim);
  font-size: 0.99rem;
  line-height: 1.65;
  margin-bottom: 1.5rem;
}
.book-info .btn { margin-top: auto; align-self: flex-start; }

/* ---------- Featured section ---------- */
.featured-banner {
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--line);
  margin-bottom: 2.6rem;
}
.featured-banner img { width: 100%; height: auto; }
.featured-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.2rem;
  align-items: start;
}
@media (min-width: 760px) {
  .featured-grid { grid-template-columns: 1.3fr 1fr; align-items: center; }
}
.featured-text .eyebrow { display: block; margin-bottom: 0.9rem; }
.featured-text h3 {
  font-size: clamp(1.9rem, 3.6vw, 2.5rem);
  margin-bottom: 1.1rem;
  font-weight: 600;
}
.featured-text p {
  color: var(--parchment-dim);
  font-size: 1.06rem;
  line-height: 1.75;
  margin-bottom: 1.7rem;
}
.featured-pull {
  border-left: 2px solid var(--gold);
  padding-left: 1.1rem;
  margin: 1.6rem 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--parchment);
}

/* ---------- Wide panel sections (romantic conflict / worldbuilding / tropes) ---------- */
.panel-frame {
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  background: var(--ink-black);
}
.panel-frame img { width: 100%; height: auto; }
.panel-support {
  max-width: 760px;
  margin: 2rem auto 0;
  text-align: center;
  color: var(--parchment-dim);
  font-size: 1.06rem;
  line-height: 1.75;
}
.trope-echo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.4rem;
  margin-top: 1.6rem;
  font-family: var(--font-display);
  letter-spacing: 0.05em;
  color: var(--gold);
  font-size: 0.98rem;
}
.trope-echo span::after {
  content: "·";
  margin-left: 1.4rem;
  color: var(--line-strong);
}
.trope-echo span:last-child::after { content: none; }

/* ---------- About ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.6rem;
  align-items: center;
  max-width: 940px;
  margin: 0 auto;
}
@media (min-width: 760px) {
  .about-grid { grid-template-columns: 240px 1fr; }
}
.about-portrait {
  display: flex;
  justify-content: center;
}
.about-portrait img {
  width: 210px;
  height: 210px;
}
.about-copy h2 { font-size: clamp(1.9rem, 3.4vw, 2.4rem); margin-bottom: 1.2rem; }
.about-copy p {
  color: var(--parchment-dim);
  font-size: 1.07rem;
  line-height: 1.8;
}
.about-copy p + p { margin-top: 1.1rem; }
.about-copy .signature-line {
  margin-top: 1.4rem;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gold-bright);
  font-size: 1.05rem;
}

/* ---------- Reader list ---------- */
.reader-list-card {
  max-width: 700px;
  margin: 0 auto;
  background: var(--charcoal-2);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: clamp(2.2rem, 5vw, 3.4rem);
  text-align: center;
}
.reader-list-card h2 { font-size: clamp(1.8rem, 3.2vw, 2.3rem); margin-bottom: 1rem; }
.reader-list-card p {
  color: var(--parchment-dim);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 46ch;
  margin: 0 auto 2rem;
}
.ml-embed-wrap { text-align: left; }

/* MailerLite embed inherits page font by default; keep it legible on dark */
.ml-embed-wrap .ml-embedded { color-scheme: light; }

/* ---------- Reviewers ---------- */
.reviewers-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.reviewers-inner p {
  color: var(--parchment-dim);
  font-size: 1.06rem;
  line-height: 1.8;
  margin: 1.4rem 0 1rem;
}
.reviewers-inner .note {
  font-size: 0.92rem;
  color: var(--parchment-faint);
  margin-top: 1.6rem;
  line-height: 1.7;
}
.reviewers-inner .btn-row { justify-content: center; margin-top: 1.6rem; }

/* ---------- Contact ---------- */
.contact-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.contact-email {
  display: inline-block;
  margin: 1.6rem 0 1.2rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  color: var(--gold-bright);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 0.3rem;
  word-break: break-word;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.contact-email:hover, .contact-email:focus-visible { color: var(--parchment); border-color: var(--gold); }
.contact-inner p.note {
  color: var(--parchment-dim);
  font-size: 1.02rem;
  line-height: 1.75;
}
.contact-links { margin-top: 1.8rem; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 3.2rem 0 2.4rem;
  background: var(--ink-black);
}
.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  align-items: center;
  text-align: center;
}
.footer-wordmark {
  font-family: var(--font-display);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.9rem;
  color: var(--parchment);
}
.footer-links {
  display: flex;
  gap: 1.8rem;
  flex-wrap: wrap;
  justify-content: center;
}
.footer-links a {
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--parchment-dim);
  transition: color 0.25s ease;
}
.footer-links a:hover, .footer-links a:focus-visible { color: var(--gold-bright); }
.footer-fine {
  color: var(--parchment-faint);
  font-size: 0.85rem;
  line-height: 1.8;
  max-width: 560px;
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Lazy image fade-in ---------- */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.5s ease;
}
img[loading="lazy"].is-loaded { opacity: 1; }

/* ===========================================================
   Mobile refinement (~400px viewports)
   Scoped to max-width: 480px only — tablet (700px+) and desktop
   breakpoints above are untouched. Tightens the shared edge
   padding on text-bearing sections to a consistent ~22px, and
   lets the wide promotional panels run almost full width with
   just a small, even ~10px margin instead.
   =========================================================== */
@media (max-width: 480px) {

  /* Consistent ~22px horizontal padding for text content:
     hero and header, plus the shared .container used by every
     text section (featured copy, worldbuilding, About, Reader
     List, Reviewers, Contact) so this one rule reaches all of
     them without touching tablet/desktop breakpoints above. */
  .container,
  .hero-grid,
  .header-inner {
    padding-left: 22px;
    padding-right: 22px;
  }

  /* Wide promotional panels: nearly full width, ~10px from the
     screen edge instead of the full container padding. */
  .featured-banner,
  .panel-frame {
    margin-left: -12px;
    margin-right: -12px;
  }

  /* Defensive guards: keep long unbroken strings (the contact
     email address, in particular) from ever pushing past the
     viewport, without changing how they look when they fit. */
  .contact-email {
    max-width: 100%;
    overflow-wrap: break-word;
  }
  .hero-copy h1,
  .section-head h2,
  .featured-text h3 {
    max-width: 100%;
  }
}