/* ============================================================
   Home — v3.1 build + design pass 2026-08-18/19. Loads AFTER main.css.
   Ported from the Claude Design project (_shared/home.css) with the
   picked variants baked in: statement=Triptych, doors=Overlapping
   plates + fork, enemy=ghost-word centerpiece, naming=framed diptych,
   proof=staggered, cred=portrait strip. Inline styles from the design
   session are classes here (.display-1--recognition .display-italic,
   .hero__content > .hero__key).
   ============================================================ */

main a:not(.btn) { color: var(--gold); }
main a:not(.btn):hover { opacity: .75; }

/* hero legibility — bottom-third dusk, text anchored lower (picked 2026-08-18).
   Body sizes in the new bands restored to the site scale 2026-08-19 — the
   design session tuned them ~15% down against its narrow preview pane. */
@media (min-width: 1024px) {
  .hero__media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(20,8,5,.1) 30%, rgba(20,8,5,.72) 78%, rgba(20,8,5,.88) 100%); }
  .hero__content { margin-top: 120px; }
  .hero__sub { opacity: 1; font-size: 22px; }
  .hero__micro { opacity: .92; }
}

/* hero type + key rhythm (was inline in the design files) */
.display-1--recognition .display-italic { display: block; margin-top: 18px; color: var(--gold); }
.hero__content > .hero__key { margin: 20px 0; }

/* kicker legibility: --muted (112,85,75) fails AA on the page brown */
.card__kicker { color: var(--gold); opacity: .92; letter-spacing: .16em; }

/* calmer rhythm */
.intro { padding: 150px 24px 140px; }

/* doors — "Overlapping plates" (picked 2026-08-18): photo with text plate, gold top rule */
.cards { background: var(--bg-deep); padding: 120px 24px 136px; }
.cards__grid { max-width: 880px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: stretch; border: 0; }
.card { width: auto; max-width: none; position: relative; min-height: 0; display: flex; flex-direction: column; align-items: stretch; text-align: center; gap: 0; padding: 0; }
.card__body { display: flex; flex-direction: column; align-items: center; gap: 14px; background: var(--bg); padding: 30px 28px 32px; margin: -72px 24px 0; position: relative; z-index: 2; border-top: 2px solid var(--gold); flex: 1; }
.card__body p { max-width: 40ch; }
.card__body .btn { margin-top: auto; }
.card--coherence { border-right: 0; }
.card .body-copy { opacity: .92; }
/* entry fork — one path in, two doors out (subtle guide) */
.cards__fork { max-width: 880px; margin: 0 auto 26px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cards__fork-key { width: 56px; height: 17px; background-size: 100% 100%; }
.cards__fork svg { display: block; width: 100%; height: auto; }
.cards__fork path { stroke: rgba(204,176,116,.38); stroke-width: 1; }

/* statement band — "Triptych" treatment (picked 2026-08-18, replaced Liturgy) */
.intro--lines { display: flex; flex-direction: column; align-items: center; }
.intro--lines p.i2__kicker { font-family: var(--font-ui); font-size: 13px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin: 0 0 64px; max-width: none; }
.i2__row { display: grid; grid-template-columns: 1fr 1fr 1fr; max-width: 1120px; width: 100%; }
.i2__cell { padding: 8px clamp(24px, 3vw, 48px); text-align: center; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.i2__cell + .i2__cell { border-left: 1px solid rgba(204,176,116,.28); }
.i2__cell .num { display: none; }
.i2__cell .n { font-family: "TT Ramillas Trl Variable Italic Variable Regular", serif; font-style: italic; font-size: 30px; line-height: 1; color: var(--gold); opacity: .85; }
.i2__cell p { font-size: 20px; line-height: 1.6; margin: 0; opacity: .94; }
.i2__see { font-family: "TT Ramillas Trl Variable Italic Variable Regular", serif; font-style: italic; font-size: clamp(38px, 3.4vw, 54px); letter-spacing: -0.03em; line-height: 1; color: var(--gold); margin-top: 72px; }

/* ---------- door media (photo plate) ---------- */
.card__media {
  position: relative; inset: auto;
  width: 100%; height: 365px;
  border-radius: 10px;
  overflow: hidden;
}
.card__media-photo { width: 100%; height: 100%; object-fit: cover; }
.card__media--coherence .card__media-photo { object-position: 50% 54%; filter: brightness(.92) saturate(.9); }
.card__media--oneness .card__media-photo { object-position: 50% 38%; filter: brightness(.78); }
.card__media::after {               /* brand grain, matches hero */
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: url(/assets/images/mKzlc8S1Kna4LIqSfgJsGwOwRY.8490c1e1.png) repeat left top / 30px auto;
  opacity: .12; pointer-events: none;
}

/* ---------- v3.1 hero hierarchy (sub, CTA, couples exit) ---------- */
.hero__sub { max-width: 50ch; text-align: center; font-size: 20px; line-height: 1.55; opacity: .86; }
.hero__cta { display: flex; flex-direction: column; align-items: center; gap: 26px; margin-top: 8px; }
.hero__micro { opacity: .78; }
.hero__rule { color: var(--gold); font-size: 13px; line-height: 1; opacity: .8; margin: 20px 0; }
.hero__couples { letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.hero__couples a { color: var(--gold); }
.hero__couples a:hover { opacity: .75; }

/* ---------- v3.1 new bands (enemy · naming · proof · cred · close) ----------
   Design pass 2026-08-07. Shared grammar: gold hairlines, ⟡ bridge marker,
   one asymmetric band (enemy), one deep band (naming), staggered proof. */
.h-band { padding: 130px 24px; }
.h-band__inner { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.h-band h2 { max-width: 18ch; }

/* ⟡ conversion bridge — hairline + marker sitting on the line */
.h-bridge { position: relative; margin-top: 44px; padding-top: 30px; border-top: 1px solid rgba(204,176,116,.22); display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.h-bridge::before { content: "\27e1"; position: absolute; top: -10px; left: 0; padding-right: 14px; color: var(--gold); font-size: 15px; line-height: 1.3; background: var(--bg); }
.h-bridge > .body-copy { font-style: italic; font-size: 20px; opacity: .92; max-width: 42ch; }
.h-bridge .tagline { opacity: .78; }

/* --- THE ENEMY: centerpiece — centered ceremony over ghost word (picked 2026-08-07) --- */
.h-enemy { position: relative; overflow: clip; text-align: center; padding: 170px 24px 160px; }
.h-enemy .h-band__inner { position: relative; z-index: 1; max-width: 760px; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.h-enemy h2 { max-width: 14ch; font-size: clamp(48px, 5.4vw, 84px); line-height: .92; margin-bottom: 26px; }
.h-enemy__fine { color: var(--gold); }
.h-enemy__good { font-style: italic; color: rgba(204,176,116,.6); }
.h-enemy__great { font-style: italic; color: var(--gold); }
.h-enemy__alive { font-style: italic; text-decoration: underline; text-decoration-color: var(--wine, #854248); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.h-enemy__copy { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.h-enemy__copy .fw { font-family: var(--font-ui); font-size: .78em; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.h-enemy__copy .body-copy { max-width: 52ch; }
.h-enemy__copy strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 2.8vw, 42px); line-height: 1.18; letter-spacing: -0.03em; margin: 14px auto 0; max-width: 22ch; }
.h-enemy__ghost { position: absolute; left: 50%; transform: translateX(-50%); top: .06em; z-index: 0; font-family: "TT Ramillas Trl Variable Italic Variable Regular", serif; font-style: italic; font-size: clamp(260px, 34vw, 520px); line-height: .8; letter-spacing: -0.04em; color: var(--gold); opacity: .04; white-space: nowrap; pointer-events: none; user-select: none; }
.h-enemy .h-bridge { align-items: center; margin-top: 40px; }
.h-enemy .h-bridge::before { left: 50%; transform: translateX(-50%); padding: 0 14px; }

/* --- THE NAMING: framed diptych — two facing pages inside a gold frame (picked 2026-08-07) --- */
.h-naming { background: var(--bg-deep); padding: 140px 24px; }
.h-naming .h-band__inner { max-width: 1060px; gap: 0; align-items: center; }
.n-frame { border: 1px solid rgba(204,176,116,.28); padding: clamp(48px, 6vw, 84px) clamp(28px, 5vw, 72px) clamp(44px, 5vw, 64px); position: relative; display: flex; flex-direction: column; align-items: center; gap: 0; }
.n-frame::before { content: "\27e1"; position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--bg-deep); padding: 0 16px; color: var(--gold); font-size: 15px; line-height: 1.4; }
.h-naming h2 { text-align: center; margin: 0 auto 64px; max-width: 16ch; }
.h-naming strong { font-family: "TT Ramillas Trl Variable Italic Variable Regular", serif; font-style: italic; font-weight: 400; color: var(--gold); font-size: 1.14em; letter-spacing: -0.02em; }
.h-spectrum { display: flex; align-items: center; gap: 14px; justify-content: center; margin: 0 0 88px; width: min(100%, 640px); font-family: var(--font-ui); font-size: 12px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--gold); }
.h-spectrum span { white-space: nowrap; opacity: .92; }
.h-spectrum i { flex: 1; min-width: 20px; height: 1px; background: rgba(204,176,116,.3); }
.n-pages { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(48px, 6vw, 96px); position: relative; align-items: start; }
.n-pages::before { content: ""; position: absolute; left: 50%; top: 6px; bottom: 6px; width: 1px; background: linear-gradient(to bottom, rgba(204,176,116,0), rgba(204,176,116,.3) 20%, rgba(204,176,116,.3) 80%, rgba(204,176,116,0)); }
.n-page { display: flex; flex-direction: column; gap: 16px; }
.n-page .n-kicker { font-family: "TT Ramillas Trl Variable Italic Variable Regular", serif; font-style: italic; font-size: clamp(24px, 2.2vw, 32px); line-height: 1; letter-spacing: -0.02em; color: var(--gold); opacity: .9; }
.n-page .body-copy { font-size: 20px; line-height: 1.65; }
.n-coda { margin: 84px auto 0; text-align: center; font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 2vw, 28px); line-height: 1.4; letter-spacing: -0.02em; max-width: 36ch; }
.h-naming .h-bridge { align-items: center; border-top: 0; padding-top: 0; margin-top: 36px; }
.h-naming .h-bridge::before { content: none; }

/* --- PROOF: staggered display quotes, framed kicker --- */
.h-proof { padding: 150px 24px; }
.h-proof .h-band__inner { max-width: 960px; gap: 64px; }
.h-proof__kicker { display: flex; align-items: center; justify-content: center; gap: 20px; color: var(--gold); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 8px; }
.h-proof__kicker::before, .h-proof__kicker::after { content: ""; width: 56px; height: 1px; background: rgba(204,176,116,.35); }
.h-quote { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.h-quote blockquote { margin: 0; font-family: var(--font-display); font-weight: 400; line-height: 1.18; letter-spacing: -0.03em; }
.h-quote figcaption { opacity: .68; }
.h-quote--lead { align-self: flex-start; text-align: left; }
.h-quote--lead blockquote { font-size: clamp(28px, 3.4vw, 46px); max-width: 22ch; }
.h-quote--echo { align-self: flex-end; text-align: right; }
.h-quote--echo blockquote { font-size: clamp(24px, 2.8vw, 38px); max-width: 20ch; }
.h-quote--echo figcaption { align-self: flex-end; }

/* --- CREDIBILITY: ledger line — picked 2026-08-19 (was portrait strip): one row
   between double gold hairlines, portrait medallion, name in gold italic. --- */
.h-cred { background: var(--bg-deep); border: 0; padding: 72px 24px; }
.h-cred__row { max-width: 980px; margin: 0 auto; display: flex; align-items: center; gap: 36px; }
.h-cred__pic { width: 148px; height: 148px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; border: 1px solid rgba(204,176,116,.45); padding: 6px; box-sizing: border-box; flex: none; }
.h-cred__col { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.h-cred__line { text-align: left; font-size: 20px; line-height: 1.65; opacity: .88; margin: 0; max-width: none; }
.h-cred__line strong { font-family: "TT Ramillas Trl Variable Italic Variable Regular", serif; font-style: italic; font-weight: 400; color: var(--gold); font-size: 1.12em; letter-spacing: -0.02em; }
.h-cred__more { margin: 0; font-size: 20px; }

/* --- CLOSE: key ornament, hero echo --- */
.h-close { text-align: center; padding: 170px 24px 190px; }
.h-close .h-band__inner { align-items: center; gap: 24px; }
.h-close__key { width: 56px; height: 17px; background-size: 100% 100%; margin-bottom: 4px; }
.h-close h2 { font-size: clamp(40px, 4.4vw, 66px); max-width: 15ch; }
.h-close .body-copy { max-width: 50ch; opacity: .9; }
.h-close .h-bridge { align-items: center; border-top: 0; padding-top: 6px; margin-top: 12px; gap: 24px; }
.h-close .h-bridge::before { position: static; padding: 0; background: none; margin-bottom: 26px; }

/* --- ⟡ PROPOSAL: sticky CTA bar (unruled — remove wholesale if declined) ---
   Redesigned 2026-08-19: centered ceremony instead of app-style space-between —
   ⟡ marker seated on the top hairline (h-bridge grammar), brand grain, gold
   middots in the tagline, hairline divider before the button. Behavior contract
   unchanged: JS adds/removes .is-in. */
.cta-bar { position: fixed; left: 50%; bottom: 20px; z-index: 800; transform: translate(-50%, calc(100% + 24px)); transition: transform .5s cubic-bezier(.21,.6,.35,1); background: rgba(18, 10, 8, .95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(204,176,116,.3); border-radius: 999px; overflow: hidden; box-shadow: 0 10px 34px rgba(0,0,0,.4); }
.cta-bar::after { content: ""; position: absolute; inset: 0; background: url(/assets/images/mKzlc8S1Kna4LIqSfgJsGwOwRY.8490c1e1.png) repeat left top / 30px auto; opacity: .08; pointer-events: none; }
.cta-bar.is-in { transform: translate(-50%, 0); }
.cta-bar__inner { position: relative; z-index: 1; padding: 9px 12px 9px 26px; display: flex; align-items: center; gap: 18px; }
.cta-bar__line { font-size: 16px; opacity: .92; margin: 0; white-space: nowrap; }
.cta-bar__dot { font-style: normal; color: var(--gold); padding: 0 5px; opacity: .85; }
.cta-bar__rule { width: 1px; height: 20px; background: rgba(204,176,116,.35); flex: none; }
.cta-bar .btn { padding: 9px 18px; white-space: nowrap; flex: none; border-radius: 999px; background: rgba(236, 231, 217, .08); color: var(--cream); border: 1px solid rgba(204,176,116,.4); }
.cta-bar .btn:hover { background: rgba(236, 231, 217, .14); }

@media (max-width: 809.98px) {
  .h-cred { padding: 48px 24px; }
  .h-cred__row { flex-direction: column; text-align: center; gap: 20px; }
  .h-cred__col { align-items: center; }
  .h-cred__line { text-align: center; }
  .intro { padding: 104px 24px 100px; }
  .i2__row { display: flex; flex-direction: column; gap: 0; width: 100%; }
  .i2__cell { padding: 0 8px; gap: 12px; }
  .i2__cell .num { display: block; font-family: var(--font-ui); font-size: 12px; font-weight: 500; letter-spacing: .3em; color: var(--gold); opacity: .7; }
  .i2__cell .n { font-size: 27px; }
  .i2__cell + .i2__cell { border-left: 0; margin-top: 38px; padding-top: 38px; position: relative; }
  .i2__cell + .i2__cell::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 56px; height: 1px; background: rgba(204,176,116,.4); }
  .i2__see { margin-top: 56px; }
  .intro--lines p.i2__kicker { margin-bottom: 48px; max-width: 26ch; line-height: 2; }
  .i2__see { margin-top: 52px; }
  .cards { padding: 88px 24px 104px; }
  .cards__fork { display: none; }
  .cards__grid { display: flex; flex-direction: column; gap: 56px; }
  .card__media { height: 320px; }
  .card__body { margin: -64px 16px 0; padding: 30px 22px 34px; }
  .h-band { padding: 96px 24px; }
  .h-enemy { padding: 110px 24px 120px; }
  .h-enemy__ghost { font-size: 240px; }
  .h-naming { padding: 104px 24px; }
  .n-frame { padding: 44px 22px 40px; }
  .h-spectrum { display: none; }
  .h-naming h2 { margin-bottom: 34px; }
  .n-pages { display: flex; flex-direction: column; gap: 52px; }
  .n-pages::before { content: none; }
  .n-page { position: relative; }
  .n-page .n-kicker { font-size: 34px; }
  .n-page:first-child { padding-right: 26px; border-right: 1px solid rgba(204,176,116,.22); }
  .n-page:first-child .n-kicker { opacity: .45; }
  .n-page:first-child .body-copy { opacity: .82; }
  .n-page:first-child::before { content: ""; position: absolute; right: -3.5px; top: 0; width: 6px; height: 6px; background: rgba(204,176,116,.4); transform: rotate(45deg); }
  .n-page:last-child { padding-left: 26px; border-left: 1px solid var(--gold); }
  .n-page:last-child::before { content: ""; position: absolute; left: -5px; top: 0; width: 10px; height: 10px; background: var(--gold); transform: rotate(45deg); box-shadow: 0 0 0 5px rgba(204,176,116,.22), 0 0 18px rgba(204,176,116,.45); }
  .n-page:last-child .n-kicker, .n-page:last-child .body-copy { text-align: right; }
  .n-coda { margin-top: 40px; }
  .h-proof { padding: 110px 24px; }
  .h-proof .h-band__inner { gap: 52px; }
  .h-quote--lead, .h-quote--echo { align-self: stretch; text-align: left; }
  .h-quote--echo figcaption { align-self: flex-start; }
  .h-close { padding: 120px 24px 140px; }
  .cta-bar { bottom: 14px; max-width: calc(100vw - 28px); }
  .cta-bar__inner { padding: 8px 10px 8px 18px; gap: 12px; }
  .cta-bar__rule { display: none; }
  .cta-bar__line { display: none; }
  .cta-bar .btn { padding: 9px 16px; }
}