/* ============================================================
   home-v2.css — styles for the home page redesign preview only.
   Loaded solely by resources/views/home-v2.blade.php via
   @push('styles'); devout.css is untouched, so the live home page
   is unaffected. Delete this file (and home-v2.blade.php + its
   route) if the redesign is rejected.

   Design: "the liturgical book" — a rubric column in the margin,
   hairline rules, numbered sections, ruled indices set in columns.
   Everything is scoped under .hv2 so nothing leaks into the rest
   of the marketing site.

   Palette tokens come from devout.css :root — this file defines
   only its own type scale + grid metrics, scoped locally.
   ============================================================ */

.hv2 {
  /* Local type scale — a notch tighter than the global --text-* ladder
     so the page reads denser, but no smaller than 13px anywhere.
     Cormorant Garamond is a light, small-x-height face, so the display
     sizes sit slightly above where a sturdier serif would. Scoped here
     so the global scale is unaffected. */
  --hv-xs:   13px;
  --hv-sm:   15px;
  --hv-base: 16px;
  --hv-md:   18px;
  --hv-lg:   22px;
  --hv-xl:   28px;
  --hv-2xl:  33px;
  --hv-3xl:  44px;
  --hv-4xl:  56px;

  /* The rubric grid */
  --hv-rubric: 132px;
  --hv-gutter: 40px;

  /* A hairline lighter than --border-soft, for the many rules */
  --hv-hairline: #E4E9D6;

  font-size: var(--hv-base);
  line-height: 1.6;
  color: var(--umber-mid);
}

.hv2 *, .hv2 *::before, .hv2 *::after { box-sizing: border-box; }
.hv2 p { margin: 0; }
.hv2 ul { list-style: none; margin: 0; padding: 0; }
.hv2 em { font-style: italic; color: var(--pine); }

/* Cormorant Garamond at 400 reads very light — the rest of the site sets
   serif at 500, so every serif element here matches that weight. */
.hv2-numeral,
.hv2-title,
.hv2-hero-title,
.hv2-epigraph-text,
.hv2-contents-list a,
.hv2-tab,
.hv2-spec-verse,
.hv2-panel-title,
.hv2-spec-prompt-text,
.hv2-idx-term,
.hv2-practice h3,
.hv2-stat-num,
.hv2-voices-quote,
.hv2-voices-list,
.hv2-church-name,
.hv2-price-amount { font-weight: 500; }

.hv2-wrap { max-width: 1180px; margin: 0 auto; padding: 0 44px; }

/* ---------- the rubric grid ---------- */
.hv2-row { display: grid; grid-template-columns: var(--hv-rubric) 1fr; gap: var(--hv-gutter); }
.hv2-rubric { display: flex; flex-direction: column; gap: 4px; padding-top: 3px; }
.hv2-numeral {
  font-family: var(--serif); font-style: italic; font-size: var(--hv-lg);
  color: var(--sage-pale); line-height: 1;
}
.hv2-label {
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--umber-low); line-height: 1.4;
}
.hv2-measure { max-width: 60ch; }

/* ---------- section shell ---------- */
.hv2-sect { border-top: 1px solid var(--hv-hairline); padding: 54px 0; }
.hv2-sect--tint { background: var(--linen-faint); }
.hv2-title {
  font-family: var(--serif); font-size: var(--hv-2xl); font-weight: 500;
  color: var(--umber); line-height: 1.14; letter-spacing: -.4px; margin: 0 0 10px;
  text-wrap: balance;
}
.hv2-lede { font-size: var(--hv-md); color: var(--umber-low); line-height: 1.58; }
.hv2-body { font-size: var(--hv-base); color: var(--umber-low); line-height: 1.6; }

/* ============================================================
   HERO — thesis and epigraph share the line
   ============================================================ */
.hv2-hero { padding: 56px 0 44px; }
.hv2-hero-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 56px; align-items: start; }
.hv2-hero-title {
  font-family: var(--serif); font-size: var(--hv-4xl); font-weight: 500;
  color: var(--umber); line-height: 1.04; letter-spacing: -1px; margin: 0 0 18px;
  text-wrap: balance;
}
.hv2-hero-sub { font-size: var(--hv-md); color: var(--umber-strong); line-height: 1.55; max-width: 46ch; margin-bottom: 22px; }
.hv2-hero-actions { display: flex; gap: 11px; flex-wrap: wrap; margin-bottom: 12px; }
.hv2-meta { font-size: var(--hv-sm); color: var(--umber-low); }

.hv2-epigraph { border-left: 2px solid var(--sage-pale); padding-left: 22px; margin-top: 8px; }
.hv2-epigraph-text { font-family: var(--serif); font-size: var(--hv-xl); font-style: italic; color: var(--umber); line-height: 1.32; }
.hv2-epigraph-ref { font-size: var(--hv-sm); color: var(--umber-low); margin-top: 9px; letter-spacing: .3px; }
.hv2-refmark { color: var(--sage-pale); margin-right: 5px; }

/* ---------- contents index ---------- */
.hv2-contents { border-top: 1px solid var(--hv-hairline); border-bottom: 1px solid var(--hv-hairline); padding: 13px 0; }
.hv2-contents-inner { display: flex; align-items: baseline; gap: var(--hv-gutter); }
.hv2-contents-label { flex: 0 0 var(--hv-rubric); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--umber-low); }
.hv2-contents-list { display: flex; flex-wrap: wrap; gap: 3px 28px; }
.hv2-contents-list a { font-family: var(--sans); font-size: var(--hv-sm); font-weight: 500; color: var(--umber-strong); border-bottom: 1px solid transparent; }
.hv2-contents-list a:hover { color: var(--pine); border-bottom-color: var(--sage-pale); }
/* Two-character roman numeral used as a marker, not reading text — kept
   serif italic for character, but at full olive/700 so it never reads
   thin beside the sans label. */
.hv2-contents-list i { font-family: var(--serif); font-style: italic; font-size: var(--hv-base); font-weight: 700; color: var(--olive); margin-right: 6px; }

/* ============================================================
   I. THE PAGE — plate list + specimen
   ============================================================ */
.hv2-spec-grid { display: grid; grid-template-columns: 138px 1fr; gap: 32px; margin-top: 26px; align-items: start; }
.hv2-tabs { display: flex; flex-direction: column; border-top: 1px solid var(--hv-hairline); }
.hv2-tab {
  font-family: var(--sans); font-size: var(--hv-sm); font-weight: 500; text-align: left;
  background: none; border: none; border-bottom: 1px solid var(--hv-hairline);
  cursor: pointer; padding: 9px 10px 9px 0; color: var(--umber-low);
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  transition: color .15s ease, padding .15s ease;
}
.hv2-tab::after { content: '\203A'; color: transparent; font-size: var(--hv-sm); }
.hv2-tab:hover { color: var(--umber); }
.hv2-tab.is-on { color: var(--olive); padding-left: 9px; }
.hv2-tab.is-on::after { color: var(--olive); }

.hv2-specimen { border: 1px solid var(--hv-hairline); background: var(--white); padding: 26px 30px; }
.hv2-spec-date { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--umber-low); }
.hv2-spec-verse { font-family: var(--serif); font-size: var(--hv-lg); font-style: italic; color: var(--umber); line-height: 1.45; margin: 11px 0 7px; }
.hv2-spec-ref { font-size: var(--hv-sm); color: var(--umber-low); }
.hv2-spec-rule { height: 1px; background: var(--hv-hairline); margin: 18px 0; }

.hv2-panel-label { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--olive); margin-bottom: 5px; }
.hv2-panel-title { font-family: var(--serif); font-size: var(--hv-lg); color: var(--umber); margin-bottom: 9px; }
.hv2-panel dl { display: grid; grid-template-columns: 84px 1fr; gap: 4px 12px; font-size: var(--hv-sm); margin: 0; }
.hv2-panel dt { font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--umber-low); padding-top: 3px; }
.hv2-panel dd { color: var(--umber-strong); margin: 0; }
.hv2-panel-note { font-size: var(--hv-sm); color: var(--umber-low); font-style: italic; margin-top: 11px; }

.hv2-spec-prompt { margin-top: 18px; padding-left: 15px; border-left: 2px solid var(--sage-pale); }
.hv2-spec-prompt-label { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--umber-low); margin-bottom: 4px; }
.hv2-spec-prompt-text { font-family: var(--serif); font-size: var(--hv-lg); color: var(--umber); line-height: 1.38; }

/* ============================================================
   RULED INDICES — column-set
   ============================================================ */
.hv2-index { border-top: 1px solid var(--hv-hairline); margin-top: 24px; }
.hv2-index--2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 44px; }
.hv2-idx { padding: 13px 0; border-bottom: 1px solid var(--hv-hairline); }
.hv2-idx--inline { display: grid; grid-template-columns: 148px 1fr; gap: 20px; align-items: baseline; }
.hv2-idx-term { font-family: var(--serif); font-size: var(--hv-lg); color: var(--umber); }
.hv2-idx-desc { font-size: var(--hv-sm); color: var(--umber-mid); line-height: 1.5; }
.hv2-idx-desc a { color: var(--pine); border-bottom: 1px solid var(--sage-pale); }
.hv2-idx-desc a:hover { border-bottom-color: var(--pine); }
.hv2-idx-count { font-size: var(--hv-xs); color: var(--umber-mid); font-variant-numeric: tabular-nums; margin-top: 3px; letter-spacing: .04em; }

/* practice — three columns */
.hv2-practice { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 36px; border-top: 1px solid var(--hv-hairline); margin-top: 24px; }
.hv2-practice > div { padding: 15px 0; border-bottom: 1px solid var(--hv-hairline); }
.hv2-practice h3 { font-family: var(--serif); font-size: var(--hv-lg); font-weight: 500; color: var(--umber); margin: 0 0 5px; }
.hv2-practice p { font-size: var(--hv-sm); color: var(--umber-mid); line-height: 1.5; }

/* stats — one ruled band */
.hv2-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hv-hairline); border: 1px solid var(--hv-hairline); margin-top: 22px; }
.hv2-stat { background: var(--white); padding: 17px 18px; }
.hv2-sect--tint .hv2-stat { background: var(--linen-faint); }
.hv2-stat-num { font-family: var(--serif); font-size: var(--hv-xl); color: var(--pine); line-height: 1; font-variant-numeric: tabular-nums; margin-bottom: 5px; }
.hv2-stat-label { font-size: var(--hv-xs); color: var(--umber-mid); line-height: 1.42; }

/* ============================================================
   VOICES
   ============================================================ */
/* The quote is short and the roster is long, so the tracks aren't even. */
.hv2-voices-grid { display: grid; grid-template-columns: 0.86fr 1.14fr; gap: 44px; align-items: start; }
/* Grid tracks default to min-width:auto, so a child that can't shrink below
   its min-content width will steal space from its sibling. Opt out. */
.hv2-voices-grid > * { min-width: 0; }
.hv2-voices-quote { font-family: var(--serif); font-size: var(--hv-xl); font-style: italic; color: var(--umber); line-height: 1.34; }
.hv2-voices-attr { font-size: var(--hv-sm); color: var(--umber-strong); margin-top: 10px; }
.hv2-voices-aside { font-size: var(--hv-xs); color: var(--umber-low); font-style: italic; margin-top: 3px; }
/* Flex-wrap rather than inline flow: the names and their middot separators
   are adjacent elements with no whitespace between them, so as inline content
   the browser reads the whole run as one unbreakable word and it overflows.
   Flex items wrap individually and `gap` supplies the spacing the old
   separator margins did. Mirrors .voices-list in devout.css. */
.hv2-voices-list { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 9px;
  font-family: var(--serif); font-size: var(--hv-lg); color: var(--umber-strong); line-height: 1.5; }
/* Name + its trailing separator are one flex item, so a wrap can never drop a
   dot onto the start of the next line. */
.hv2-voice { white-space: nowrap; }
.hv2-voices-list a { border-bottom: 1px solid var(--hv-hairline); }
.hv2-voices-list a:hover { color: var(--pine); border-bottom-color: var(--pine); }
.hv2-voices-div { color: var(--sage-pale); margin-left: 9px; }
.hv2-voices-all { font-family: var(--sans); font-size: var(--hv-sm); font-weight: 600; color: var(--pine); border-bottom: none !important; margin-left: 8px; }

/* ============================================================
   PRIVACY — two-column prose
   ============================================================ */
.hv2-cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 4px; }

/* ============================================================
   CHURCHES
   ============================================================ */
.hv2-church-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.hv2-church-list { border-top: 1px solid var(--hv-hairline); }
.hv2-church-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--hv-hairline); }
.hv2-church-row:hover .hv2-church-name { color: var(--pine); }
.hv2-church-name { font-family: var(--serif); font-size: var(--hv-lg); color: var(--umber); display: block; }
.hv2-church-denom { font-size: var(--hv-xs); color: var(--umber-mid); display: block; }
.hv2-church-loc { font-size: var(--hv-xs); color: var(--umber-mid); white-space: nowrap; }
/* the shared church search partial sits inside a narrower column here */
.hv2-church-grid .church-search { margin-top: 18px; }

/* ============================================================
   PRICING
   ============================================================ */
/* The figure column is sized to hold the CTA on one line — the button
   label plus .btn-primary's padding needs ~230px. */
.hv2-price { display: grid; grid-template-columns: 248px 1fr; gap: 40px; align-items: start; margin-top: 22px; }
.hv2-price-figure { border-right: 1px solid var(--hv-hairline); padding-right: 40px; }
.hv2-price-amount { font-family: var(--serif); font-size: var(--hv-3xl); color: var(--umber); line-height: 1; }
.hv2-price-amount small { font-family: var(--sans); font-size: var(--hv-base); color: var(--umber-low); }
.hv2-price-annual { font-size: var(--hv-sm); color: var(--umber-low); margin-top: 7px; }
.hv2-price-cta { margin-top: 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.hv2-price-cta .btn-primary { white-space: nowrap; }
.hv2-price-cta .hv2-meta { white-space: nowrap; }
.hv2-price-features { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 32px; }
.hv2-price-features li { font-size: var(--hv-sm); color: var(--umber-strong); display: flex; gap: 9px; line-height: 1.45; }
.hv2-price-features li::before { content: '\00A7'; color: var(--olive-bright); flex: 0 0 auto; }
.hv2-price-free { font-size: var(--hv-sm); color: var(--umber-low); margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hv-hairline); }

/* ============================================================
   RESPONSIVE — the rubric folds above its content
   ============================================================ */
@media (max-width: 980px) {
  .hv2-hero-grid, .hv2-voices-grid, .hv2-church-grid { grid-template-columns: 1fr; gap: 30px; }
  .hv2-epigraph { margin-top: 0; }
  .hv2-index--2, .hv2-cols2, .hv2-price-features { grid-template-columns: 1fr; }
  .hv2-practice { grid-template-columns: 1fr; }
  .hv2-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 800px) {
  .hv2 { --hv-rubric: 1fr; --hv-gutter: 12px; }
  .hv2-row { grid-template-columns: 1fr; }
  .hv2-rubric { flex-direction: row; align-items: baseline; gap: 9px; }
  .hv2-hero { padding: 40px 0 34px; }
  .hv2-hero-title { font-size: var(--hv-3xl); }
  .hv2-sect { padding: 40px 0; }
  .hv2-contents-inner { flex-direction: column; gap: 8px; }
  .hv2-contents-label { flex: none; }
  .hv2-spec-grid { grid-template-columns: 1fr; gap: 20px; }
  .hv2-tabs { flex-direction: row; flex-wrap: wrap; border-top: none; gap: 18px; border-bottom: 1px solid var(--hv-hairline); }
  .hv2-tab { border-bottom: 2px solid transparent; padding: 0 0 9px; margin-bottom: -1px; }
  .hv2-tab::after { display: none; }
  .hv2-tab.is-on { padding-left: 0; border-bottom-color: var(--olive); }
  .hv2-price { grid-template-columns: 1fr; gap: 22px; }
  .hv2-price-figure { border-right: none; border-bottom: 1px solid var(--hv-hairline); padding-right: 0; padding-bottom: 18px; }
}
@media (max-width: 560px) {
  .hv2-wrap { padding: 0 22px; }
  .hv2-hero-title { font-size: var(--hv-2xl); }
  .hv2-title { font-size: var(--hv-xl); }
  .hv2-idx--inline { grid-template-columns: 1fr; gap: 3px; }
  .hv2-stats { grid-template-columns: 1fr; }
  .hv2-specimen { padding: 22px 20px; }
  .hv2-panel dl { grid-template-columns: 1fr; gap: 1px; }
  .hv2-panel dt { padding-top: 7px; }
}