/* Tori Harrison — site styles.
   Tailwind (CDN) handles layout utilities; this file holds brand tokens,
   the watercolor wash, buttons, forms and blog typography. */

:root {
  --mist: #F4F7F7;
  --paper: #FFFFFF;
  --ink: #3D4A4E;
  --ink-soft: #5C6A6E;
  --tide: #4E6E74;
  --tide-deep: #3E5A5F;
  --sea: #AABCBF;
  --lilac: #CDBFE0;
  --blush: #F0CDD2;
  --sky: #BFD8EA;
  --sage: #CFE0CB;
  --line: #DCE4E5;
}

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

body {
  margin: 0;
  background: var(--mist);
  color: var(--ink);
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1.125rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .font-display { font-family: 'Jost', system-ui, sans-serif; letter-spacing: -0.01em; }

a { color: var(--tide); text-underline-offset: 3px; }
a:hover { color: var(--tide-deep); }

:focus-visible { outline: 2px solid var(--tide); outline-offset: 3px; border-radius: 2px; }

.skip-link { position: absolute; left: -999px; top: 0.5rem; background: var(--paper); padding: 0.5rem 1rem; z-index: 50; }
.skip-link:focus { left: 0.5rem; }

/* ---------- Header ---------- */
.site-header { background: rgba(244, 247, 247, 0.92); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--line); }
.brand img { height: 56px; width: auto; display: block; }
.site-nav { display: flex; gap: 1.75rem; align-items: center; font-family: 'Jost', sans-serif; font-size: 1rem; }
.site-nav a { color: var(--ink); text-decoration: none; padding: 0.25rem 0; border-bottom: 1px solid transparent; }
.site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: var(--tide); color: var(--ink); }
.nav-toggle { font-family: 'Jost', sans-serif; border: 1px solid var(--line); background: var(--paper); padding: 0.4rem 0.9rem; border-radius: 999px; color: var(--ink); }

@media (max-width: 767px) {
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--mist); flex-direction: column; align-items: flex-start; gap: 0; padding: 0.5rem 1.25rem 1.25rem; border-bottom: 1px solid var(--line); }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 0.65rem 0; width: 100%; border-bottom: 1px solid var(--line); }
  .site-nav a:last-child { border-bottom: 0; }
}

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: 'Jost', sans-serif; font-size: 1rem; font-weight: 500; padding: 0.85rem 1.6rem; border-radius: 999px; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.btn-primary { background: var(--tide); color: #fff; }
.btn-primary:hover { background: var(--tide-deep); color: #fff; }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--ink-soft); }
.btn-quiet:hover { background: var(--paper); color: var(--ink); }

/* ---------- The watercolor wash (the one bold thing) ----------
   Soft blooms in the cover's own colors, painted behind the book. */
.wash { position: relative; isolation: isolate; }
.wash::before {
  content: ""; position: absolute; inset: -12% -18%; z-index: -1;
  background:
    radial-gradient(38% 34% at 30% 30%, var(--sky) 0%, transparent 70%),
    radial-gradient(34% 30% at 72% 26%, var(--lilac) 0%, transparent 72%),
    radial-gradient(36% 32% at 68% 74%, var(--blush) 0%, transparent 70%),
    radial-gradient(30% 28% at 26% 76%, var(--sage) 0%, transparent 70%);
  filter: blur(28px) saturate(1.1);
  opacity: 0.95;
}
.book-cover { width: 100%; max-width: 380px; height: auto; display: block; margin: 0 auto; border-radius: 3px; box-shadow: 0 1px 2px rgba(61,74,78,.18), 0 18px 40px -12px rgba(61,74,78,.35); transform: rotate(-1.5deg); }
@media (prefers-reduced-motion: no-preference) {
  .book-cover { animation: settle 900ms cubic-bezier(.2,.7,.2,1) both; }
  @keyframes settle { from { opacity: 0; transform: translateY(14px) rotate(-4deg); } to { opacity: 1; transform: translateY(0) rotate(-1.5deg); } }
}

/* ---------- Big type moments ---------- */
.title-xl { font-family: 'Jost', sans-serif; font-weight: 300; font-size: clamp(2.75rem, 7vw, 5.25rem); line-height: 0.98; letter-spacing: -0.025em; }
.pivot { font-family: 'Jost', sans-serif; font-weight: 300; font-size: clamp(2.25rem, 6vw, 4rem); line-height: 1.05; color: var(--tide); }

/* ---------- Reading column (pages + blog posts) ---------- */
.prose-tori { max-width: 38rem; }
.prose-tori p { margin: 0 0 1.25em; }
.prose-tori h2 { font-size: 1.75rem; font-weight: 400; margin: 2em 0 0.6em; line-height: 1.2; }
.prose-tori h3 { font-size: 1.35rem; font-weight: 500; margin: 1.75em 0 0.5em; }
.prose-tori blockquote { margin: 1.75em 0; padding-left: 1.25em; border-left: 3px solid var(--lilac); font-style: italic; color: var(--ink-soft); }
.prose-tori ul, .prose-tori ol { margin: 0 0 1.25em 1.25em; }
.prose-tori ul { list-style: disc; } .prose-tori ol { list-style: decimal; }
.prose-tori li { margin: 0.3em 0; }
.prose-tori figure { margin: 2em 0; }
.prose-tori img { max-width: 100%; height: auto; border-radius: 4px; }
.prose-tori hr { border: 0; height: 1px; background: var(--line); margin: 2.5em 0; }
.prose-tori .embed { position: relative; padding-top: 56.25%; margin: 2em 0; }
.prose-tori .embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 4px; }

/* ---------- Blog list ---------- */
.post-row { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1.25rem; align-items: start; padding: 1.5rem 0; border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
.post-row:hover h3 { color: var(--tide); }
.post-row img { width: 7.5rem; height: 5.6rem; object-fit: cover; border-radius: 3px; background: var(--sea); }
.post-row .thumb-empty { width: 7.5rem; height: 5.6rem; border-radius: 3px; background: linear-gradient(135deg, var(--sky), var(--lilac)); }
@media (min-width: 640px) { .post-row { grid-template-columns: 11rem 1fr; gap: 1.75rem; } .post-row img, .post-row .thumb-empty { width: 11rem; height: 8.25rem; } }

/* ---------- Subscribe ---------- */
.subscribe { background: linear-gradient(180deg, var(--mist) 0%, #EAF0F1 100%); border-top: 1px solid var(--line); }
.subscribe-form { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.subscribe-form input { flex: 1 1 12rem; max-width: 16rem; }
@media (max-width: 520px) { .subscribe-form input, .subscribe-form button { max-width: none; flex-basis: 100%; } }

input, textarea { font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper); border: 1px solid #C9D4D6; border-radius: 10px; padding: 0.8rem 1rem; width: 100%; }
input:focus, textarea:focus { outline: 2px solid var(--tide); outline-offset: 1px; border-color: var(--tide); }
label { font-family: 'Jost', sans-serif; font-size: 0.95rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #E7EEEF; }
.site-footer a { color: #E7EEEF; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: #fff; }
.site-footer .text-ink\/70 { color: #B9C6C8; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-family: 'Jost', sans-serif; font-size: 0.95rem; }

/* ---------- Countdown (only shown when a sale end date is set) ---------- */
.countdown { display: inline-flex; gap: 1rem; font-family: 'Jost', sans-serif; }
.countdown span { display: block; font-size: 1.75rem; font-weight: 300; line-height: 1; }
.countdown small { font-size: 0.8rem; color: var(--ink-soft); }

/* ---------- Welcome gift: the painted booklet ---------- */
.booklet { width: 9.5rem; aspect-ratio: 5.5 / 8.5; position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 1.1rem 0.9rem 0.9rem; border-radius: 3px; transform: rotate(-3deg); margin: 0 auto;
  background:
    radial-gradient(60% 40% at 30% 58%, var(--sky) 0%, transparent 72%),
    radial-gradient(55% 38% at 72% 48%, var(--lilac) 0%, transparent 70%),
    radial-gradient(58% 40% at 62% 82%, var(--blush) 0%, transparent 70%),
    radial-gradient(45% 32% at 24% 88%, var(--sage) 0%, transparent 70%),
    #F4F7F7;
  box-shadow: 0 1px 2px rgba(61,74,78,.15), 0 14px 30px -12px rgba(61,74,78,.35); }
.booklet span { font-family: 'Jost', sans-serif; font-weight: 300; font-size: 1.05rem; line-height: 1.05; color: var(--ink); }
.booklet small { font-family: 'Jost', sans-serif; font-size: 0.65rem; color: var(--ink); }
.booklet.lg { width: min(17rem, 70vw); padding: 2rem 1.6rem 1.5rem; }
.booklet.lg span { font-size: 1.9rem; }
.booklet.lg small { font-size: 0.85rem; }

/* Day 1 preview */
.day-verse { margin: 1.5rem 0; padding: 1rem 1.25rem; border-left: 3px solid var(--lilac); background: #F6F4FA; }
.day-verse p { font-style: italic; margin: 0; }
.day-verse cite { display: block; margin-top: 0.4rem; font-style: normal; font-family: 'Jost', sans-serif; font-size: 0.9rem; color: var(--ink-soft); }
.day-sit { margin-top: 1.75rem; padding: 1rem 1.25rem; background: #EEF3F4; border-radius: 8px; }
.day-label { display: block; font-family: 'Jost', sans-serif; font-weight: 500; font-size: 0.95rem; color: var(--tide); margin-bottom: 0.25rem; }
.inside-list { counter-reset: none; }
.inside-list li { display: grid; grid-template-columns: 4.5rem 1fr; gap: 0.75rem; padding: 0.7rem 0; border-top: 1px solid var(--line); font-family: 'Jost', sans-serif; }
.inside-list li span:first-child { color: var(--tide); }
.prose-tori .day-pray { margin-top: 1.75rem; }
.prose-tori .day-note { margin-top: 2rem; font-family: 'Jost', sans-serif; font-size: 0.85rem; color: var(--ink-soft); }

/* ---------- Book FAQ ---------- */
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 1rem 2rem 1rem 0; position: relative; font-family: 'Jost', sans-serif; font-size: 1.1rem; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0.25rem; top: 0.85rem; font-size: 1.4rem; font-weight: 300; color: var(--tide); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 1.1rem; color: var(--ink-soft); }

/* ---------- Author box on posts ---------- */
.author-box { display: grid; grid-template-columns: 96px 1fr; gap: 1.25rem; align-items: center; padding: 1.5rem; background: #EEF3F4; border-radius: 12px; }
.author-box img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
@media (max-width: 480px) { .author-box { grid-template-columns: 1fr; text-align: left; } }

/* Book details */
.book-facts { display: grid; gap: 0.35rem; font-family: 'Jost', sans-serif; font-size: 0.95rem; }
.book-facts div { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.75rem; }
.book-facts dt { color: var(--ink-soft); }
.book-facts dd { margin: 0; }