/*
 * AskScripture Web — page layer
 * ---------------------------------------------------------------------------
 * Spec: docs/design/WEB-DESIGN.md (v1) §5 layout, §6 components, §8 motion.
 *
 * This file styles the site's page furniture: masthead, hero, bands, feature
 * grids, screenshot strip, pricing, email capture, article column, FAQ,
 * CTA band, footer.
 *
 * It consumes web-tokens.css and adds no foundations of its own. A literal
 * color value in this file is a bug — WEB-DESIGN.md §10.
 */

/* ===========================================================================
   Utilities
   =========================================================================== */

.stack { display: flex; flex-direction: column; }
.stack--sm { gap: var(--space-xs); }
.stack--md { gap: var(--space-lg); }
.stack--lg { gap: var(--space-xl); }

.lede {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-xl);
  line-height: 1.5;
  max-width: 58ch;
  margin: 0;
}

.muted {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
  color: var(--ink-soft);
  max-width: 62ch;
  margin: 0;
}

.fine {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

/* Icons: thin stroke, rounded caps, currentColor — DESIGN.md §8. Never a
   standalone meaning-bearing element; always beside a text label. */
.icon {
  width: 16px;
  height: 16px;
  flex: none;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The masthead is sticky, so anchor targets must clear it or a TOC jump lands
   with the heading tucked underneath. */
:target,
[id] { scroll-margin-top: 88px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--paper-raised);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-card);
  z-index: 20;
}

.skip-link:focus {
  left: var(--gutter);
  top: var(--space-xs);
}

/* ===========================================================================
   Masthead (WEB-DESIGN.md §6.1)
   Wordmark in Literata 600, sans links, hairline gilt bottom rule.
   Active link is a gilt underline — never a gilt label.
   =========================================================================== */

.masthead {
  border-bottom: var(--hairline) solid var(--gilt);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 10;
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-block: var(--space-md);
}

.wordmark {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-lg);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.wordmark span { color: var(--ink-soft); font-weight: 400; }

.masthead__nav {
  display: flex;
  gap: var(--space-lg);
  align-items: center;
}

.masthead__nav a {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  text-decoration: none;
  padding-block: var(--space-xxs);
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur-hover) var(--ease);
}

.masthead__nav a:hover { border-bottom-color: var(--divider); }
.masthead__nav a.is-active { border-bottom-color: var(--gilt); }

@media (max-width: 600px) {
  .masthead__inner { gap: var(--space-md); }
  .masthead__nav { gap: var(--space-md); }
  .masthead__nav a.is-secondary { display: none; }
}

/* ===========================================================================
   Hero — a rendered answer, not a picture of one (WEB-DESIGN.md §7)
   =========================================================================== */

.hero { padding-block: var(--space-4xl) var(--space-3xl); }

.hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  max-width: var(--w-article);
}

.hero__q {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}

.hero__summary {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-xl);
  line-height: 1.5;
  max-width: 60ch;
  margin: 0;
}

.hero__card { max-width: 60ch; }

.hero__pitch {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-ui);
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0;
  padding-top: var(--space-xs);
  border-top: var(--hairline) solid var(--divider);
}

/* ===========================================================================
   Section headers
   =========================================================================== */

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  max-width: 62ch;
}

/* ===========================================================================
   Grids
   =========================================================================== */

.grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ===========================================================================
   Feature block — one messaging pillar
   =========================================================================== */

.feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-top: var(--space-md);
  border-top: var(--hairline) solid var(--gilt);
}

.feature__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: var(--lh-heading);
  margin: 0;
}

.feature__body {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

/* ===========================================================================
   Source row (inside an insight card) and video row
   =========================================================================== */

.source-row,
.video-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  border: var(--hairline) solid var(--divider);
  border-radius: var(--radius-card);
  background: var(--paper-raised);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: border-color var(--dur-hover) var(--ease);
}

.source-row:hover,
.video-row:hover { border-color: var(--gilt); }

.source-row__chev { color: var(--ink-soft); }

.video-card {
  background: var(--paper-raised);
  border: var(--hairline) solid var(--divider);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.video-card__channel {
  font-family: var(--font-serif);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}

.video-card__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-md);
  line-height: 1.4;
  margin: 0;
}

.video-card__stamp {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

/* ===========================================================================
   Screenshot strip
   =========================================================================== */

.screens { align-items: start; }

.screen {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.screen img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-sheet);
  border: var(--hairline) solid var(--divider);
  box-shadow: var(--shadow-card);
  background: var(--paper);
}

.screen figcaption {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ===========================================================================
   Pricing
   =========================================================================== */

.plan {
  background: var(--paper-raised);
  border: var(--hairline) solid var(--divider);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.plan--premium { border-color: var(--gilt); }

.plan__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.plan__name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-xl);
  margin: 0;
}

.plan__price {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.plan ul {
  margin: 0;
  padding-left: 1.1em;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.plan li + li { margin-top: var(--space-xxs); }

/* ===========================================================================
   Email capture (WEB-DESIGN.md §6.10) — one field, sentence-case button,
   13px consent line. No modal, no exit-intent, no countdown.

   CURRENTLY UNUSED. The section was cut from the home page at launch: Hostinger
   Reach is not provisioned (no subscribe endpoint) and the "40 Hard Questions"
   lead magnet does not exist yet, so there was nothing to submit to and nothing
   to promise. Styles are kept ready for when both land — see README.
   =========================================================================== */

.signup {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 46ch;
}

.signup__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.signup label {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

.signup input[type="email"] {
  flex: 1 1 16ch;
  min-width: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  color: var(--ink);
  background: var(--paper-raised);
  border: var(--hairline) solid var(--divider);
  border-radius: var(--radius-card);
  padding: var(--space-md);
  transition: border-color var(--dur-hover) var(--ease);
}

.signup input[type="email"]:hover { border-color: var(--gilt); }

/* ===========================================================================
   Article column (WEB-DESIGN.md §9)
   =========================================================================== */

.article { position: relative; }

.article__col {
  position: relative;
  max-width: calc(var(--w-article) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Gilded page edge (§6.7) — echoes the gilt edge of a fine Bible. Decoration
   only: it carries no text, so the 2.75:1 gilt limit is not in play. */
@media (min-width: 900px) {
  .article__col::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: calc(var(--gutter) * -1);
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--gilt) 12%, var(--gilt) 88%, transparent);
    opacity: 0.55;
  }
}

.article__meta {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  margin: 0;
}

/* :where() so the list keeps the .prose sibling gap above it. */
.prose :where(ul, ol) { padding-left: 1.1em; }
.prose li + li { margin-top: var(--space-xs); }

.prose cite {
  font-style: italic;
  color: var(--ink-soft);
}

/* Pull-verse: gilt rail, Literata, redletter only when quoting Scripture. */
.pull-verse {
  border-left: var(--rail) solid var(--gilt);
  padding-left: var(--space-lg);
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  line-height: 1.45;
  color: var(--redletter);
  margin: 0;
}

.toc {
  border-top: var(--hairline) solid var(--divider);
  border-bottom: var(--hairline) solid var(--divider);
  padding-block: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.toc a {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  text-decoration: none;
  color: var(--ink-soft);
}

.toc a:hover { color: var(--ink); }

/* "For parents" aside — cedar rail, addressed to the parent, never the child. */
.aside-parent {
  border-left: var(--rail) solid var(--cedar);
  background: var(--cedar-tint);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.aside-parent__body {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.6;
  margin: 0;
}

.disclosure {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}

/* Related questions */
.related {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--hairline) solid var(--divider);
}

.related li { border-bottom: var(--hairline) solid var(--divider); }

.related a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-md);
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  text-decoration: none;
}

.related a[aria-disabled="true"] {
  color: var(--ink-soft);
  cursor: default;
}

.related__chev { color: var(--ink-soft); font-size: var(--fs-sm); }

/* ===========================================================================
   FAQ accordion (WEB-DESIGN.md §6.11) — open by default, chevron rotates.
   =========================================================================== */

.faq { display: flex; flex-direction: column; }

.faq__item { border-bottom: var(--hairline) solid var(--divider); }

.faq__item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-md);
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 500;
}

.faq__item > summary::-webkit-details-marker { display: none; }

.faq__chev {
  color: var(--ink-soft);
  transition: transform var(--dur-accordion) var(--ease);
  flex: none;
}

.faq__item[open] .faq__chev { transform: rotate(180deg); }

.faq__body {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  padding-bottom: var(--space-md);
  max-width: 66ch;
}

/* ===========================================================================
   CTA band + footer — ink ground, paper text (WEB-DESIGN.md §6.8, §6.12)
   =========================================================================== */

.band--ink { color: var(--on-ink); }
.band--ink h2 { color: var(--on-ink); }
.band--ink a { color: var(--on-ink); }
.band--ink .eyebrow { color: var(--on-ink-faint); }
.band--ink .btn--primary { background: var(--on-ink); color: var(--ink); }
.band--ink .btn--primary:hover { background: var(--paper-raised); }

.cta__body {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-ui);
  color: var(--on-ink-soft);
  max-width: 58ch;
  margin: 0;
}

/* Thin inset gilt keyline, mirroring the app's primary footer action. */
.band--cta {
  box-shadow: inset 0 1px 0 var(--gilt), inset 0 -1px 0 var(--gilt);
}

.footer {
  background: var(--ink);
  color: var(--on-ink);
  padding-block: var(--space-3xl);
}

.footer__inner { display: flex; flex-direction: column; gap: var(--space-lg); }

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
}

.footer__links a { color: var(--on-ink); }

.footer__fine {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--on-ink-faint);
  line-height: 1.6;
  max-width: 70ch;
  margin: 0;
}

.footer hr {
  border: 0;
  border-top: var(--hairline) solid var(--on-ink-divider);
  margin: 0;
}

/* ===========================================================================
   Motion (WEB-DESIGN.md §8) — fade-and-rise once on first scroll into view.
   =========================================================================== */

/* Scoped to .js so that a blocked or failed script leaves the page fully
   visible rather than blank — content is never hidden behind JavaScript. */
.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-reveal) var(--ease),
              transform var(--dur-reveal) var(--ease);
}

.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}