/* ============================================================
   UNSTUCK FAITH — MARKETING SITE STYLESHEET
   Cathedral-light visual system (promoted from the /v5 prototype,
   2026-07-12). Loaded only on the homepage route group — see
   src/app/(marketing)/layout.tsx. Do not load from the root layout;
   it resets body/html globally and will corrupt the legal pages,
   which rely on globals.css + Tailwind instead.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;1,6..72,300;1,6..72,400;1,6..72,500&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  /* ---- Warm paper (light rooms) ---- */
  --paper:        oklch(0.967 0.013 83);
  --paper-2:      oklch(0.945 0.016 80);
  --paper-3:      oklch(0.912 0.018 77);

  /* ---- Stone / dark sacred rooms ---- */
  --stone-deep:   oklch(0.165 0.012 56);   /* near-black warm stone */
  --stone:        oklch(0.235 0.014 58);
  --stone-2:      oklch(0.305 0.014 56);

  /* ---- Ink (on paper) ---- */
  --ink:          oklch(0.275 0.014 64);
  --ink-soft:     oklch(0.445 0.013 64);
  --ink-faint:    oklch(0.605 0.011 64);
  --ink-ghost:    oklch(0.72 0.010 64);

  /* ---- Cream (on stone) ---- */
  --cream:        oklch(0.93 0.016 82);
  --cream-soft:   oklch(0.80 0.018 80);
  --cream-faint:  oklch(0.64 0.018 76);

  /* ---- Deep navy (verse card) ---- */
  --navy-deep:    oklch(0.24 0.045 250);

  /* ---- Antique gold / candle / light ---- */
  --gold:         oklch(0.635 0.070 73);
  --gold-deep:    oklch(0.525 0.074 67);
  --gold-light:   oklch(0.745 0.090 78);    /* lit gold, on dark */
  --candle:       oklch(0.80 0.110 72);     /* candle flame warm */
  --gold-soft:    oklch(0.635 0.070 73 / 0.16);

  /* ---- Stained-glass jewel tones (muted, premium) ---- */
  --glass-amber:  oklch(0.58 0.10 68);
  --glass-oxblood:oklch(0.42 0.09 30);
  --glass-sage:   oklch(0.52 0.05 150);
  --glass-slate:  oklch(0.46 0.06 250);
  --glass-gold:   oklch(0.66 0.10 85);

  /* ---- Hairlines ---- */
  --line:         oklch(0.275 0.014 64 / 0.14);
  --line-soft:    oklch(0.275 0.014 64 / 0.08);
  --line-gold:    oklch(0.635 0.070 73 / 0.40);
  --line-cream:   oklch(0.93 0.016 82 / 0.16);
  --line-cream-gold: oklch(0.745 0.090 78 / 0.34);

  --serif: 'Newsreader', Georgia, serif;
  --sans:  'Hanken Grotesk', system-ui, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, monospace;

  --measure: 1240px;
  --pad: clamp(22px, 5vw, 84px);

  --lift-2: 0 2px 4px oklch(0.18 0.02 60 / 0.10), 0 18px 50px oklch(0.18 0.02 60 / 0.16);
  --lift-phone: 0 2px 6px oklch(0.12 0.02 60 / 0.30), 0 50px 110px oklch(0.10 0.02 60 / 0.55);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-weight:400; line-height:1.62; letter-spacing:0.002em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection{ background:var(--gold-soft); color:var(--ink); }

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap{ position:relative; z-index:1; overflow:clip; }
.spread{ max-width:var(--measure); margin:0 auto; padding:clamp(72px,11vw,150px) var(--pad); }
.spread--tight{ padding-block:clamp(46px,7vw,88px); }
.band--paper2{ background:var(--paper-2); }
.band--paper3{ background:var(--paper-3); }
.band--stone{ background:var(--stone-deep); color:var(--cream); }

.rule{ height:1px; background:var(--line); border:0; margin:0; }
.rule--gold{ background:var(--line-gold); }
.rule--cream{ background:var(--line-cream); }

/* ============================================================
   TYPE
   ============================================================ */
.eyebrow{ font-family:var(--sans); font-weight:600; font-size:0.685rem; letter-spacing:0.32em;
  text-transform:uppercase; color:var(--gold-deep); display:flex; align-items:center; gap:0.85em; }
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--line-gold); }
.eyebrow--center{ justify-content:center; }
.eyebrow--center::after{ content:""; width:26px; height:1px; background:var(--line-gold); }
.eyebrow--light{ color:var(--gold-light); }
.eyebrow--light::before, .eyebrow--light::after{ background:var(--line-cream-gold); }

.kicker{ font-family:var(--mono); font-size:0.66rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-faint); }
.kicker--light{ color:var(--cream-faint); }
.kicker--link{ color:var(--ink-soft); text-decoration:none; transition:color .2s ease; }
.kicker--link:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.kicker--link:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

h1,h2,h3,h4{ font-family:var(--serif); font-weight:400; color:inherit; margin:0; }
.display{ font-size:clamp(2.7rem,7.4vw,6rem); line-height:0.98; letter-spacing:-0.02em; font-weight:300; text-wrap:balance; }
.title{ font-size:clamp(2rem,4.8vw,3.7rem); line-height:1.03; letter-spacing:-0.015em; font-weight:300; text-wrap:balance; }
.subtitle{ font-size:clamp(1.5rem,3vw,2.3rem); line-height:1.1; letter-spacing:-0.01em; font-weight:400; }
.serif-note{ font-family:var(--serif); font-style:italic; font-weight:300; }
.lede{ font-size:clamp(1.06rem,1.5vw,1.3rem); line-height:1.6; color:var(--ink-soft); max-width:48ch; text-wrap:pretty; }
.lede--light{ color:var(--cream-soft); }
.gold{ color:var(--gold-deep); }
.gold-l{ color:var(--gold-light); }
em.in{ font-family:var(--serif); font-style:italic; }
p{ margin:0 0 1em; text-wrap:pretty; }
.muted{ color:var(--ink-soft); } .muted-l{ color:var(--cream-soft); }
.small{ font-size:0.86rem; }

/* wordmark */
.mark{ display:flex; align-items:center; gap:0.6em; }
.mark__glyph{ width:30px; height:30px; border-radius:50%; border:1px solid var(--line-gold);
  display:grid; place-items:center; color:var(--gold-deep); font-family:var(--serif); font-size:1rem; font-style:italic; }
.mark__glyph--light{ border-color:var(--line-cream-gold); color:var(--gold-light); }
.mark__name{ font-family:var(--sans); font-weight:600; letter-spacing:0.04em; font-size:0.92rem; }

/* ============================================================
   ░░ SACRED ATMOSPHERIC SYSTEM ░░
   Light, not symbols. Mood rendered in CSS.
   ============================================================ */

/* full-bleed cinematic scene */
.scene{ position:relative; width:100%; overflow:hidden; isolation:isolate; }
.scene__inner{ position:relative; z-index:3; max-width:var(--measure); margin:0 auto; padding:clamp(64px,10vw,150px) var(--pad); }

/* — CATHEDRAL LIGHT — golden shaft raking across warm stone, dust in the air */
.atm-cathedral{ background:
   radial-gradient(120% 90% at 50% 120%, oklch(0.10 0.01 58), transparent 60%),
   linear-gradient(165deg, var(--stone) 0%, var(--stone-deep) 58%, oklch(0.12 0.012 56) 100%); }
.atm-cathedral::before{ /* the shaft of light */
  content:""; position:absolute; z-index:1; top:-30%; right:6%; width:42%; height:165%;
  background:linear-gradient(180deg, oklch(0.85 0.09 80 / 0.36), oklch(0.78 0.10 78 / 0.10) 45%, transparent 78%);
  transform:rotate(19deg); transform-origin:top center; filter:blur(26px);
  mix-blend-mode:screen; pointer-events:none;
}
.atm-cathedral::after{ /* warm pool where light lands + vignette */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(50% 40% at 64% 64%, oklch(0.72 0.08 76 / 0.12), transparent 70%),
    radial-gradient(140% 120% at 50% 50%, transparent 52%, oklch(0.08 0.01 56 / 0.65) 100%);
}

/* — CANDLELIGHT — warm pool of glow on near-black */
.atm-candle{ background:
   radial-gradient(60% 55% at 50% 62%, oklch(0.40 0.07 66 / 0.55), transparent 68%),
   radial-gradient(120% 120% at 50% 50%, oklch(0.16 0.012 58), oklch(0.10 0.01 56)); }
.atm-candle::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(28% 26% at 50% 58%, oklch(0.82 0.11 72 / 0.30), transparent 70%);
  animation:flicker 5.5s ease-in-out infinite; }
@keyframes flicker{ 0%,100%{ opacity:.85; transform:scale(1); } 40%{ opacity:1; transform:scale(1.03); } 65%{ opacity:.78; transform:scale(.99); } }

/* — DAWN — soft morning gold through a window */
.atm-dawn{ background:
   linear-gradient(155deg, oklch(0.97 0.02 86) 0%, oklch(0.93 0.035 80) 46%, oklch(0.88 0.05 72) 100%); }
.atm-dawn::before{ content:""; position:absolute; z-index:1; inset:0; pointer-events:none;
  background:radial-gradient(46% 60% at 78% 8%, oklch(0.96 0.07 84 / 0.85), transparent 60%); }

/* — GOLD LEAF — brushed brass / gilt sheen */
.atm-goldleaf{ background:
   linear-gradient(115deg, oklch(0.62 0.09 78) 0%, oklch(0.74 0.10 82) 26%, oklch(0.55 0.08 70) 52%, oklch(0.72 0.10 84) 78%, oklch(0.58 0.08 74) 100%); }
.atm-goldleaf::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  background:repeating-linear-gradient(115deg, oklch(1 0 0 / 0.10) 0 2px, transparent 2px 9px); }

/* — INCENSE / dusk stone — */
.atm-incense{ background:
   radial-gradient(80% 70% at 30% 110%, oklch(0.34 0.04 60 / 0.6), transparent 60%),
   linear-gradient(170deg, var(--stone-2), var(--stone-deep)); }

/* dust motes — drifting points of light */
.motes{ position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
.mote{ position:absolute; width:3px; height:3px; border-radius:50%;
  background:oklch(0.92 0.06 82 / 0.8); filter:blur(.4px); opacity:0; animation:drift linear infinite; }
@keyframes drift{ 0%{ transform:translateY(20px); opacity:0; } 12%{ opacity:.7; } 88%{ opacity:.5; } 100%{ transform:translateY(-120px); opacity:0; } }

/* leaded-glass — abstract premium, NOT figurative */
.glasspanel{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:1fr; gap:3px;
  background:oklch(0.10 0.01 56); padding:3px; border-radius:3px; aspect-ratio:4/3; overflow:hidden; }
.glasspanel span{ filter:saturate(0.85) brightness(0.9); border-radius:1px; }

/* ============================================================
   PLATE — art-directed photography placeholder
   Atmospheric backdrop + precise shot/treatment brief
   ============================================================ */
.plate{ position:relative; border-radius:5px; overflow:hidden; min-height:280px;
  display:flex; flex-direction:column; justify-content:flex-end; isolation:isolate;
  box-shadow:var(--lift-2); }
.plate__atm{ position:absolute; inset:0; z-index:0; }
.plate__grain{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  background-image:radial-gradient(oklch(1 0 0 / 0.05) 0.5px, transparent 1px); background-size:3px 3px; }
.plate__tag{ position:absolute; top:14px; left:14px; z-index:3;
  font-family:var(--mono); font-size:0.58rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--cream); background:oklch(0.12 0.01 56 / 0.45); backdrop-filter:blur(6px);
  border:1px solid var(--line-cream); border-radius:100px; padding:5px 12px; }
.plate__cap{ position:relative; z-index:3; padding:clamp(18px,2.4vw,28px);
  background:linear-gradient(0deg, oklch(0.10 0.01 56 / 0.78), transparent); }
.plate__shot{ font-family:var(--serif); font-style:italic; font-weight:300; color:var(--cream);
  font-size:clamp(1.05rem,1.8vw,1.35rem); line-height:1.3; }
.plate__treat{ display:flex; gap:7px; flex-wrap:wrap; margin-top:12px; }
.chip{ font-family:var(--mono); font-size:0.56rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--cream-soft); border:1px solid var(--line-cream); border-radius:100px; padding:3px 9px; }
.plate--tall{ min-height:440px; }
.plate--short{ min-height:200px; }

/* ============================================================
   CHAPTER SCENE — alternating cinematic spreads
   ============================================================ */
.chapter{ position:relative; }
.chapter__grid{ display:grid; gap:clamp(28px,4vw,64px); align-items:center;
  grid-template-columns:1.05fr 1fr; max-width:var(--measure); margin:0 auto; padding:clamp(70px,9vw,130px) var(--pad); position:relative; z-index:3; }
.chapter--flip .chapter__grid{ grid-template-columns:1fr 1.05fr; }
.chapter--flip .chapter__text{ order:2; }
.chapter__num{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.2em; color:var(--gold-deep); }
.chapter__num--light{ color:var(--gold-light); }
.chapter__art{ display:flex; flex-direction:column; gap:14px; }

/* ============================================================
   PHONE (reused, refined for dark scenes)
   ============================================================ */
.phone{ --w:300px; width:var(--w); aspect-ratio:300/650; border-radius:42px;
  background:linear-gradient(160deg, oklch(0.30 0.012 64), oklch(0.14 0.012 60)); padding:11px;
  box-shadow:var(--lift-phone); position:relative; flex:none; }
.phone__screen{ width:100%; height:100%; border-radius:32px; overflow:hidden; background:var(--paper);
  position:relative; display:flex; flex-direction:column; color:var(--ink); }
.phone__notch{ position:absolute; top:9px; left:50%; transform:translateX(-50%); width:84px; height:22px;
  background:oklch(0.12 0.012 60); border-radius:20px; z-index:5; }
.scr{ display:flex; flex-direction:column; height:100%; }
.scr__status{ display:flex; justify-content:space-between; align-items:center; padding:14px 22px 4px;
  font-size:0.62rem; font-weight:600; color:var(--ink-soft); }
.scr__body{ flex:1; padding:8px 22px 18px; display:flex; flex-direction:column; overflow:hidden; }
.scr__eyebrow{ font-family:var(--mono); font-size:0.54rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold-deep); }
.scr__day{ font-family:var(--mono); font-size:0.5rem; letter-spacing:0.16em; color:var(--ink-faint); text-transform:uppercase; }
.scr__verse{ font-family:var(--serif); font-weight:300; font-size:1.34rem; line-height:1.22; letter-spacing:-0.01em; margin:0.5em 0; }
.scr__ref{ font-family:var(--mono); font-size:0.52rem; letter-spacing:0.12em; color:var(--ink-faint); text-transform:uppercase; }
.scr__label{ font-family:var(--serif); font-style:italic; font-size:0.95rem; color:var(--ink-soft); }
.scr__sm{ font-size:0.72rem; color:var(--ink-soft); line-height:1.5; }
.scr__pill{ display:inline-flex; align-items:center; gap:6px; align-self:flex-start; border:1px solid var(--line);
  border-radius:100px; padding:7px 15px; font-size:0.68rem; font-weight:600; color:var(--ink); margin-top:auto; }
.scr__pill--gold{ background:var(--gold-deep); border-color:var(--gold-deep); color:oklch(0.97 0.01 82); }
.scr__row{ display:flex; gap:8px; margin-top:auto; }
.scr__intent{ border-top:1px solid var(--line-soft); padding:11px 0; }
.scr__intent:first-of-type{ border-top:0; }
.scr__intent .t{ font-family:var(--serif); font-size:0.92rem; }
.scr__meta{ font-family:var(--mono); font-size:0.5rem; letter-spacing:0.1em; color:var(--ink-ghost); text-transform:uppercase; }
.scr__write{ font-family:var(--serif); font-style:italic; font-weight:300; color:var(--ink-soft); font-size:0.92rem; line-height:1.5; }
.caret{ color:var(--gold-deep); font-style:normal; }

/* ============================================================
   REAL APP SCREENSHOTS — device frame + crossfade
   Proportions match the cropped captures (709×1334): the app's
   own tab bar is kept, Android system chrome is cropped away.
   ============================================================ */
.phone--shot{ aspect-ratio: 300/545; }
.phone--shot .phone__screen{ background:oklch(0.13 0.012 58); }
.phone__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .7s ease; }
.phone__img.is-on{ opacity:1; }

/* the screen list beside the phone — quiet, serif, lit when active */
.prac{ display:flex; align-items:baseline; gap:14px; padding:13px 0; cursor:pointer;
  border-top:1px solid var(--line-cream); }
.prac:first-child{ border-top:0; }
.prac__name{ font-family:var(--serif); font-weight:300; font-size:1.35rem; color:var(--cream-faint);
  transition:color .4s ease; flex:0 0 auto; display:inline-flex; align-items:baseline; gap:0; }
.prac__name::before{ content:""; align-self:center; width:22px; height:1px; background:var(--gold-light);
  margin-right:12px; transform:scaleX(0); transform-origin:left center; transition:transform .4s ease; }
.prac__line{ font-family:var(--serif); font-style:italic; font-size:0.95rem; color:var(--cream-faint);
  opacity:0; transition:opacity .4s ease; }
.prac.is-active .prac__name{ color:var(--cream); }
.prac.is-active .prac__name::before{ transform:scaleX(1); }
.prac.is-active .prac__line{ opacity:1; color:var(--gold-light); }
@media (prefers-reduced-motion: reduce){
  .phone__img, .prac__name, .prac__name::before, .prac__line{ transition:none; }
}

/* ============================================================
   BUTTON
   ============================================================ */
.btn{ display:inline-flex; align-items:center; gap:0.6em; font-family:var(--sans); font-weight:600;
  font-size:0.86rem; padding:0.85em 1.7em; border-radius:100px; cursor:pointer;
  border:1px solid var(--ink); color:var(--ink); background:transparent; text-decoration:none;
  transition:transform .2s cubic-bezier(.2,.6,.2,1), background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.btn--gold{ background:var(--gold-deep); border-color:var(--gold-deep); color:oklch(0.97 0.01 82); }
.btn--gold:hover{ background:var(--gold); border-color:var(--gold); }
.btn--onlight{ border-color:var(--gold-light); color:var(--cream); }
.btn--onlight:hover{ background:oklch(1 0 0 / 0.08); }
.btn--ghost{ border-color:var(--line); color:var(--ink-soft); }
.btn--sm{ font-size:0.76rem; padding:0.6em 1.2em; }
@media (prefers-reduced-motion: reduce){ .btn{ transition:background-color .2s ease, border-color .2s ease; } .btn:hover{ transform:none; } }

/* ============================================================
   GRID / CARDS / SPEC
   ============================================================ */
.grid{ display:grid; gap:clamp(20px,2.4vw,34px); }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }
.card{ background:var(--paper); border:1px solid var(--line); border-radius:4px; padding:clamp(20px,2vw,30px); }
.card--flat{ background:transparent; border:0; padding:0; }
.card__no{ font-family:var(--mono); font-size:0.7rem; color:var(--gold-deep); letter-spacing:0.1em; }
.card h3{ font-size:1.4rem; margin:0.5em 0 0.3em; } .card h4{ font-size:1.12rem; }
.flow > * + *{ margin-top:1em; }
.stack{ display:flex; flex-direction:column; }

.sechead{ display:flex; flex-direction:column; gap:18px; margin-bottom:clamp(34px,4vw,58px); max-width:62ch; }
.sec-no{ font-family:var(--mono); font-size:0.78rem; color:var(--gold-deep); letter-spacing:0.18em; }
.sec-no--light{ color:var(--gold-light); }

.spec{ list-style:none; margin:0; padding:0; }
.spec li{ display:grid; grid-template-columns:minmax(120px,170px) 1fr; gap:18px; padding:13px 0;
  border-top:1px solid var(--line-soft); align-items:baseline; }
.spec li:first-child{ border-top:0; }
.spec .k{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-faint); }
.spec .v{ color:var(--ink); font-size:0.95rem; }
.spec--light .k{ color:var(--cream-faint); } .spec--light .v{ color:var(--cream); } .spec--light li{ border-color:var(--line-cream); }

/* material palette chips */
.mats{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.mat{ display:flex; flex-direction:column; gap:9px; }
.mat__chip{ aspect-ratio:1/1.15; border-radius:4px; border:1px solid var(--line-soft); }
.mat__name{ font-family:var(--mono); font-size:0.64rem; color:var(--ink); letter-spacing:0.04em; }
.mat__note{ font-size:0.74rem; color:var(--ink-soft); line-height:1.4; }
.m-linen{ background:linear-gradient(135deg, oklch(0.90 0.02 86), oklch(0.84 0.022 84));
  background-image:repeating-linear-gradient(90deg, oklch(0.27 0.01 64 / 0.04) 0 1px, transparent 1px 4px), repeating-linear-gradient(0deg, oklch(0.27 0.01 64 / 0.04) 0 1px, transparent 1px 4px); }
.m-parchment{ background:linear-gradient(160deg, oklch(0.90 0.03 82), oklch(0.83 0.04 76)); }
.m-oak{ background:linear-gradient(120deg, oklch(0.46 0.04 60), oklch(0.36 0.035 55));
  background-image:repeating-linear-gradient(95deg, oklch(0.2 0.02 55 / 0.18) 0 2px, transparent 2px 11px); }
.m-stone{ background:linear-gradient(150deg, oklch(0.62 0.008 70), oklch(0.50 0.008 68)); }
.m-brass{ background:linear-gradient(120deg, oklch(0.60 0.08 78), oklch(0.74 0.10 82) 50%, oklch(0.55 0.07 72)); }
.m-gold{ background:linear-gradient(120deg, oklch(0.66 0.10 84), oklch(0.80 0.11 86) 45%, oklch(0.58 0.09 76));
  background-image:repeating-linear-gradient(120deg, oklch(1 0 0 / 0.12) 0 1px, transparent 1px 7px); }

/* motion storyboard */
.frames{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.framecard{ display:flex; flex-direction:column; gap:10px; }
.framecard__art{ aspect-ratio:4/3; border-radius:4px; position:relative; overflow:hidden;
  display:grid; place-items:center; padding:14px; text-align:center; }
.framecard__t{ font-family:var(--serif); font-size:1.4rem; font-weight:300; color:var(--cream); line-height:1.05; position:relative; z-index:3; }
.framecard__cap{ font-size:0.8rem; color:var(--ink-soft); }
.fnum{ font-family:var(--mono); font-size:0.62rem; color:var(--gold-deep); letter-spacing:0.1em; }

.timeline{ display:flex; flex-direction:column; }
.tl{ display:grid; grid-template-columns:minmax(150px,210px) 120px 1fr; gap:20px; padding:15px 0;
  border-top:1px solid var(--line-soft); align-items:baseline; }
.tl:first-child{ border-top:0; }
.tl__name{ font-family:var(--serif); font-size:1.16rem; }
.tl__time{ font-family:var(--mono); font-size:0.8rem; color:var(--gold-deep); }
.tl__desc{ color:var(--ink-soft); font-size:0.92rem; }

.tag{ display:inline-block; font-family:var(--mono); font-size:0.62rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--gold-deep); border:1px solid var(--line-gold); border-radius:100px; padding:3px 10px; }
.note{ font-family:var(--mono); font-size:0.78rem; color:var(--ink-soft); line-height:1.7; }

/* sticky nav */
.dirnav{ position:fixed; top:0; left:0; right:0; z-index:60; display:flex; justify-content:space-between; align-items:center;
  padding:13px var(--pad); background:oklch(0.13 0.01 56 / 0.55); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line-cream); transition:background .5s ease, color .5s ease; color:var(--cream); }
.dirnav .mark__name{ color:var(--cream); }
.dirnav__no{ font-family:var(--mono); font-size:0.7rem; color:var(--cream-faint); letter-spacing:0.12em; }
.dirnav.is-light{ background:oklch(0.967 0.013 83 / 0.82); border-color:var(--line-soft); color:var(--ink); }
.dirnav.is-light .mark__name{ color:var(--ink); }
.dirnav.is-light .mark__glyph{ border-color:var(--line-gold); color:var(--gold-deep); }
.dirnav.is-light .dirnav__no{ color:var(--ink-faint); }

/* reveal */
.rv{ opacity:0; transform:translateY(24px); transition:opacity 1.1s cubic-bezier(.2,.6,.2,1), transform 1.2s cubic-bezier(.2,.6,.2,1); }
.rv.in{ opacity:1; transform:none; }
.rv-2{ transition-delay:.12s; } .rv-3{ transition-delay:.24s; } .rv-4{ transition-delay:.36s; }

@media (prefers-reduced-motion: reduce){
  .rv{ opacity:1; transform:none; transition:none; }
  .mote, .atm-candle::after{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px){
  .g4{ grid-template-columns:repeat(2,1fr); }
  .g3{ grid-template-columns:1fr; }
  .frames{ grid-template-columns:repeat(2,1fr); }
  .mats{ grid-template-columns:repeat(3,1fr); }
  .chapter__grid, .chapter--flip .chapter__grid{ grid-template-columns:1fr; }
  .chapter--flip .chapter__text{ order:0; }
  .tl{ grid-template-columns:1fr; gap:3px; }
  .spec li{ grid-template-columns:1fr; gap:4px; }
}
@media (max-width: 600px){
  .g2{ grid-template-columns:1fr; } .g4{ grid-template-columns:1fr; }
  .frames{ grid-template-columns:1fr; } .mats{ grid-template-columns:repeat(2,1fr); }
  .dirnav__no{ display:none; }
}

/* ============================================================
   ░░ THE SIGNATURE — GILT RIBBON SPINE ░░
   A single thread of gold, lit from the candle, that traces
   the whole pilgrimage. The bookmark in a breviary.
   ============================================================ */
.ribbon{ position:fixed; top:0; bottom:0; left:clamp(16px,3.4vw,52px); width:120px; z-index:55; pointer-events:none; }
.ribbon__track{ position:absolute; top:0; bottom:0; left:0; width:1.5px;
  background:linear-gradient(180deg, transparent 0, var(--line-cream-gold) 6%, var(--line-cream-gold) 94%, transparent 100%); opacity:.55; }
.ribbon__fill{ position:absolute; top:0; left:0; width:1.5px; height:0;
  background:linear-gradient(180deg, var(--gold-light), var(--gold)); box-shadow:0 0 9px var(--gold-soft), 0 0 3px var(--candle); }
.ribbon__marker{ position:absolute; left:0.75px; top:0; width:9px; height:9px; border-radius:50%; transform:translate(-50%,-50%);
  background:var(--gold-light); box-shadow:0 0 14px var(--candle), 0 0 4px oklch(0.95 0.05 84); }
.ribbon__marker::after{ content:""; position:absolute; inset:-5px; border-radius:50%; border:1px solid var(--line-cream-gold); opacity:.6; }
.ribbon__tick{ position:absolute; left:0; transform:translate(-50%,-50%); width:4px; height:4px; border-radius:50%;
  background:var(--cream-faint); transition:background .4s ease, transform .4s ease; }
.ribbon__tick.done{ background:var(--gold); }
.ribbon__tick.active{ background:var(--gold-light); transform:translate(-50%,-50%) scale(1.7); box-shadow:0 0 10px var(--candle); }
.ribbon__lab{ position:absolute; left:16px; transform:translateY(-50%); white-space:nowrap;
  font-family:var(--mono); font-size:0.56rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--cream-faint); opacity:0; transition:opacity .45s ease; }
.ribbon__lab.active{ opacity:1; color:var(--gold-light); }
.ribbon.on-light .ribbon__lab{ color:var(--ink-faint); }
.ribbon.on-light .ribbon__lab.active{ color:var(--gold-deep); }
.ribbon.on-light .ribbon__tick{ background:var(--ink-ghost); }
.ribbon.on-light .ribbon__track{ background:linear-gradient(180deg, transparent, var(--line-gold) 6%, var(--line-gold) 94%, transparent); }
@media (max-width: 1240px){ .ribbon__lab{ display:none; } }
@media (max-width: 600px){ .ribbon{ left:9px; } }

/* ============================================================
   ░░ THRESHOLD — near-darkness, one candle ░░
   The opening. The flame the ribbon is lit from.
   ============================================================ */
.atm-threshold{ background:
   radial-gradient(46% 34% at 50% 86%, oklch(0.46 0.085 64 / 0.55), transparent 64%),
   linear-gradient(180deg, oklch(0.085 0.008 56) 0%, oklch(0.12 0.012 58) 60%, oklch(0.16 0.016 60) 100%); }
.atm-threshold::before{ content:""; position:absolute; z-index:1; inset:0; pointer-events:none;
  background:radial-gradient(11% 9% at 50% 85%, oklch(0.88 0.13 76 / 0.9), oklch(0.7 0.12 70 / 0.2) 55%, transparent 72%);
  animation:flicker 5.5s ease-in-out infinite; }
.atm-threshold::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(150% 130% at 50% 80%, transparent 38%, oklch(0.05 0.005 56 / 0.7) 100%); }

/* ============================================================
   ░░ HUMAN-PRESENCE ATMOSPHERES ░░
   Observed, not staged. Light + a soft sense of a person.
   ============================================================ */
/* person seated in morning window light */
.atm-window{ background:linear-gradient(102deg, oklch(0.95 0.03 86) 0%, oklch(0.90 0.045 80) 38%, oklch(0.74 0.045 66) 100%); }
.atm-window::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(50% 70% at 88% 6%, oklch(0.97 0.07 86 / 0.9), transparent 56%); }
.atm-window::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; /* soft seated presence */
  background:radial-gradient(34% 48% at 34% 86%, oklch(0.34 0.03 58 / 0.5), transparent 72%); }

/* someone alone in a chapel — warmth far ahead in the dark */
.atm-chapel{ background:linear-gradient(180deg, oklch(0.13 0.012 58), oklch(0.16 0.016 60)); }
.atm-chapel::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(30% 38% at 50% 30%, oklch(0.62 0.08 70 / 0.45), transparent 64%); }
.atm-chapel::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(20% 30% at 50% 78%, oklch(0.30 0.03 58 / 0.6), transparent 70%); }

/* a hard place softened by the phone's warm light (airport/hospital) */
.atm-cool{ background:linear-gradient(165deg, oklch(0.40 0.012 240) 0%, oklch(0.30 0.012 250) 100%); }
.atm-cool::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(24% 20% at 50% 60%, oklch(0.74 0.09 74 / 0.55), transparent 68%); }

/* ============================================================
   EMOTIONAL ARC LABEL — what this chapter makes you FEEL
   ============================================================ */
.feel{ display:inline-flex; align-items:center; gap:0.6em; font-family:var(--mono); font-size:0.6rem;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--gold-deep); }
.feel::before{ content:""; width:5px; height:5px; border-radius:50%; background:currentColor; }
.feel--light{ color:var(--candle); }

/* ============================================================
   DESIRE — richer app showcase pieces
   ============================================================ */
/* daily rhythm timeline — Liturgy of the Hours flavour */
.rhythm{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.rhythm__h{ position:relative; padding:22px 18px; border-left:1px solid var(--line-soft); }
.rhythm__h:first-child{ border-left:0; }
.rhythm__dot{ width:8px; height:8px; border-radius:50%; background:var(--gold); margin-bottom:14px; box-shadow:0 0 0 4px var(--gold-soft); }
.rhythm__time{ font-family:var(--mono); font-size:0.6rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-faint); }
.rhythm__name{ font-family:var(--serif); font-size:1.3rem; font-weight:300; margin:4px 0 8px; }
.rhythm__pr{ font-size:0.84rem; color:var(--ink-soft); line-height:1.45; }
.rhythm--light .rhythm__name{ color:var(--cream); } .rhythm--light .rhythm__pr{ color:var(--cream-soft); }
.rhythm--light .rhythm__time{ color:var(--cream-faint); } .rhythm--light{ border-color:var(--line-cream); }
.rhythm--light .rhythm__h{ border-color:var(--line-cream); }

/* liturgical season chips — real Catholic colours */
.liturg{ display:flex; flex-wrap:wrap; gap:10px; }
.lit{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:100px; padding:7px 14px;
  font-size:0.78rem; color:var(--ink); }
.lit__d{ width:10px; height:10px; border-radius:50%; }
.lit--light{ border-color:var(--line-cream); color:var(--cream); }
.d-advent{ background:oklch(0.42 0.10 300); }   /* violet */
.d-christmas{ background:oklch(0.86 0.09 90); }  /* white-gold */
.d-ordinary{ background:oklch(0.52 0.09 150); }  /* green */
.d-lent{ background:oklch(0.40 0.09 310); }      /* violet */
.d-rose{ background:oklch(0.72 0.08 20); }       /* rose (Gaudete/Laetare) */
.d-easter{ background:oklch(0.88 0.08 92); }     /* white-gold */
.d-feast{ background:oklch(0.52 0.16 28); }      /* red */

/* a "moment" tile — product moment with phone-screen tint */
.moment{ border:1px solid var(--line); border-radius:5px; overflow:hidden; background:var(--paper); display:flex; flex-direction:column; }
.moment__scr{ aspect-ratio:9/7; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center; padding:24px; }
.moment__lbl{ padding:14px 18px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:10px; }
.moment__lbl .n{ font-family:var(--mono); font-size:0.6rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-faint); }
.moment__lbl .t{ font-family:var(--serif); font-size:1.05rem; }

/* cinematic plate sizes */
.plate--cine{ min-height:clamp(360px,52vh,560px); }
.plate--wide{ min-height:clamp(300px,40vh,440px); }

/* priority build sequence */
.steps{ counter-reset:step; list-style:none; margin:0; padding:0; }
.steps li{ display:grid; grid-template-columns:auto 1fr; gap:18px; padding:16px 0; border-top:1px solid var(--line-soft); align-items:baseline; }
.steps li:first-child{ border-top:0; }
.steps li::before{ counter-increment:step; content:counter(step,decimal-leading-zero); font-family:var(--mono);
  font-size:0.72rem; color:var(--gold-deep); letter-spacing:0.1em; }
.steps .h{ font-family:var(--serif); font-size:1.16rem; }
.steps .d{ color:var(--ink-soft); font-size:0.9rem; display:block; margin-top:2px; }

/* compare V3/V4 */
.compare{ display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.compare__col{ padding:clamp(20px,2.4vw,32px); }
.compare__col + .compare__col{ border-left:1px solid var(--line); background:var(--paper); }
.compare__col:first-child{ background:var(--paper-2); }
.compare__h{ font-family:var(--mono); font-size:0.66rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:16px; }
.compare__h.v4{ color:var(--gold-deep); }
.compare ul{ list-style:none; margin:0; padding:0; }
.compare li{ padding:11px 0; border-top:1px solid var(--line-soft); font-size:0.92rem; line-height:1.5; }
.compare li:first-child{ border-top:0; }

/* interaction map */
.imap{ list-style:none; margin:0; padding:0; }
.imap li{ display:grid; grid-template-columns:1fr auto 1.4fr; gap:18px; align-items:center; padding:17px 0; border-top:1px solid var(--line-soft); }
.imap li:first-child{ border-top:0; }
.imap .trigger{ font-weight:600; color:var(--ink); } .imap .arrow{ color:var(--gold-deep); font-family:var(--mono); } .imap .result{ color:var(--ink-soft); }

@media (max-width: 960px){
  .rhythm{ grid-template-columns:1fr 1fr; }
  .rhythm__h:nth-child(3){ border-left:0; }
  .compare{ grid-template-columns:1fr; }
  .compare__col + .compare__col{ border-left:0; border-top:1px solid var(--line); }
  .imap li{ grid-template-columns:1fr; gap:5px; } .imap .arrow{ display:none; }
}

@media (max-width: 600px){ .rhythm{ grid-template-columns:1fr; } .rhythm__h{ border-left:0; border-top:1px solid var(--line-soft); } .rhythm__h:first-child{ border-top:0; } }

/* ============================================================
   ░░ PUBLIC HOMEPAGE — quiet, unexplained visuals ░░
   A plain atmospheric frame with no overlay caption — the
   image carries the feeling, the page doesn't narrate it.
   ============================================================ */
.frame{ position:relative; border-radius:6px; overflow:hidden; min-height:280px; isolation:isolate; box-shadow:var(--lift-2); }
.frame__atm{ position:absolute; inset:0; z-index:0; }
.frame__grain{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  background-image:radial-gradient(oklch(1 0 0 / 0.05) 0.5px, transparent 1px); background-size:3px 3px; }
.frame--tall{ min-height:440px; } .frame--wide{ min-height:clamp(300px,40vh,440px); } .frame--short{ min-height:220px; }

/* the path — practices presented as a quiet sequence, not a feature grid */
.path{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.path li{ display:flex; flex-wrap:wrap; align-items:baseline; gap:clamp(16px,5vw,72px);
  padding:clamp(28px,4vh,46px) 0; border-bottom:1px solid var(--line); }
.path__name{ font-family:var(--serif); font-weight:300; font-size:clamp(1.6rem,3vw,2.1rem); flex:1 1 220px; min-width:160px; }
.path__line{ font-family:var(--serif); font-style:italic; color:var(--ink-soft); font-size:clamp(1.05rem,1.8vw,1.25rem);
  flex:2 1 320px; min-width:260px; line-height:1.5; }
.path--light{ border-color:var(--line-cream); }
.path--light li{ border-color:var(--line-cream); }
.path--light .path__name{ color:var(--cream); }
.path--light .path__line{ color:var(--cream-soft); }

/* ============================================================
   ░░ LITURGICAL SEASON TOKENS — prepared, not yet automated ░░
   Default (Ordinary Time) is the site's current warm gold/cream
   palette. Setting data-season on the page root swaps the accent
   tokens used by .season-accent / .season-line. A future date-aware
   helper can set this attribute; nothing here reads the calendar yet.
   ============================================================ */
[data-season] { --season-accent: var(--gold-deep); --season-line: var(--line-gold); }
[data-season="advent"]    { --season-accent: oklch(0.42 0.10 300); --season-line: oklch(0.42 0.10 300 / 0.4); }
[data-season="christmas"] { --season-accent: oklch(0.66 0.10 84);  --season-line: oklch(0.66 0.10 84 / 0.4); }
[data-season="lent"]      { --season-accent: oklch(0.40 0.09 310); --season-line: oklch(0.40 0.09 310 / 0.4); }
[data-season="easter"]    { --season-accent: oklch(0.70 0.09 80);  --season-line: oklch(0.70 0.09 80 / 0.4); }
[data-season="ordinary"]  { --season-accent: var(--gold-deep); --season-line: var(--line-gold); }
.season-accent { color: var(--season-accent); }

/* ============================================================
   ░░ THE THRESHOLD — cathedral light hero ░░
   Darkness, a warm volumetric shaft sweeping in, the emblem
   discovered by light, then the headline uncovered the same way.
   One-shot on first visit; reduced-motion and repeat visits skip
   straight to the settled state.
   ============================================================ */
.cathedral{
  position: relative; width: 100%; min-height: 100svh; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: center;
  background:
    radial-gradient(60% 50% at 30% 38%, oklch(0.20 0.025 60 / 0.5), transparent 70%),
    linear-gradient(175deg, oklch(0.075 0.008 56) 0%, oklch(0.11 0.012 58) 55%, oklch(0.15 0.015 60) 100%);
}

/* the volumetric shaft itself: a soft blurred bar of warm light, rotated */
.shaft{
  position: absolute; z-index: 1; top: -20%; left: -10%; width: 70%; height: 160%;
  background: linear-gradient(100deg,
    transparent 30%,
    oklch(0.86 0.09 80 / 0.16) 46%,
    oklch(0.90 0.10 82 / 0.30) 50%,
    oklch(0.86 0.09 80 / 0.16) 54%,
    transparent 70%);
  transform: rotate(18deg) translateX(-60%);
  filter: blur(18px);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0;
}
.shaft.shaft--sweep{ animation: shaftSweep 3.2s cubic-bezier(.16,.6,.2,1) forwards; }
.shaft.shaft--settled{ opacity: 1; transform: rotate(18deg) translateX(18%); }
@keyframes shaftSweep{
  0%   { opacity: 0; transform: rotate(18deg) translateX(-60%); }
  18%  { opacity: 1; }
  100% { opacity: 1; transform: rotate(18deg) translateX(18%); }
}

/* faint haze that warms gradually as the shaft passes, grounding the light */
.cathedral__haze{
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(48% 42% at 34% 40%, oklch(0.55 0.08 68 / 0.22), transparent 68%);
  opacity: 0; transition: opacity 2.6s ease;
}
.cathedral__haze.is-on{ opacity: 1; }

/* the emblem, discovered by the light at scene centre */
.emblem-stage{
  position: relative; z-index: 3; display: flex; justify-content: center;
  opacity: 0; filter: blur(6px); transform: scale(0.96);
  transition: opacity 1.1s ease, filter 1.1s ease, transform 1.4s cubic-bezier(.16,.6,.2,1);
}
.emblem-stage.is-revealed{ opacity: 1; filter: blur(0); transform: scale(1); }
.emblem-stage.is-settling{ opacity: 0; transform: scale(0.4) translateY(-18px); transition: opacity .8s ease, transform .9s cubic-bezier(.4,0,.2,1); }
.emblem-stage img{ width: clamp(64px, 9vw, 108px); height: auto; position: relative; filter: drop-shadow(0 0 24px oklch(0.6 0.09 74 / 0.35)); }

/* the brief gold flash through the cross at the emblem's centre */
.emblem-stage::after{
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px;
  transform: translate(-50%, -54%); border-radius: 50%;
  background: radial-gradient(circle, oklch(0.95 0.06 84 / 0.95), oklch(0.86 0.10 80 / 0.4) 55%, transparent 75%);
  opacity: 0; pointer-events: none;
}
.emblem-stage.is-flashing::after{ opacity: 1; animation: crossFlash 0.9s ease forwards; }
@keyframes crossFlash{
  0%   { opacity: 0; transform: translate(-50%, -54%) scale(0.4); }
  35%  { opacity: 1; transform: translate(-50%, -54%) scale(1.6); }
  100% { opacity: 0; transform: translate(-50%, -54%) scale(2.1); }
}

/* nav emblem: hidden during the intro, settles in once the hero emblem fades */
.mark__glyph-img{ opacity: 1; transition: opacity .8s ease; }
.intro-playing .mark__glyph-img{ opacity: 0; }

/* headline uncovered by the same light, word group at a time */
.uncover{ display: inline-block; opacity: 0; filter: blur(5px); transform: translateY(10px);
  transition: opacity 1s ease, filter 1s ease, transform 1s cubic-bezier(.16,.6,.2,1); }
.uncover.is-revealed{ opacity: 1; filter: blur(0); transform: translateY(0); }

@media (prefers-reduced-motion: reduce){
  .shaft, .cathedral__haze, .emblem-stage, .uncover, .mark__glyph-img{ transition: none !important; animation: none !important; }
}

/* ============================================================
   ░░ HOMEPAGE V5 — real photography, editorial calm ░░
   ============================================================ */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.btn--ghost-onlight{ border-color:rgba(255,255,255,0.3); color:var(--cream); }
.dirnav.is-light .btn--ghost-onlight{ border-color:var(--line); color:var(--ink); }

/* hero — full photo with a grounded copy panel, not a full-bleed overlay */
.hero-photo{ position:relative; padding-top:88px; }
.hero-photo__art{ position:relative; width:100%; aspect-ratio:16/10; overflow:hidden; }
.hero-photo__art img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-photo__art::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 60%, oklch(0.10 0.01 56 / 0.35) 100%); }
.hero-photo__panel{ max-width:var(--measure); margin:0 auto; padding:clamp(36px,6vw,64px) var(--pad) 0; }

/* verse card — dark, centered, quiet */
.verse-card{ max-width:640px; margin:0 auto; text-align:center; background:var(--navy-deep);
  border-radius:10px; padding:clamp(36px,5vw,56px) clamp(24px,4vw,40px); }
.verse-card__text{ font-family:var(--serif); font-weight:300; font-style:italic; color:var(--cream);
  font-size:clamp(1.4rem,3vw,1.9rem); line-height:1.4; margin:20px 0 0; text-wrap:balance; }

/* three rooms — real photography, quiet captions */
.rooms{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,32px); }
.room__art{ position:relative; border-radius:8px; overflow:hidden; aspect-ratio:4/5; box-shadow:var(--lift-2); }
.room__art img{ width:100%; height:100%; object-fit:cover; display:block; }
.room__name{ display:block; margin-top:16px; font-family:var(--serif); font-weight:500; font-size:1.05rem; color:var(--ink); }
.room__line{ margin-top:6px; font-size:0.9rem; color:var(--ink-soft); line-height:1.5; }
@media (max-width:960px){ .rooms{ grid-template-columns:1fr; } }

/* waitlist input */
.waitlist-input{ font-family:var(--sans); font-size:0.92rem; padding:0.85em 1.1em; border-radius:100px;
  border:1px solid var(--line); background:var(--paper); color:var(--ink); min-width:260px; }
.waitlist-input:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.waitlist-input::placeholder{ color:var(--ink-ghost); }

/* ============================================================
   FAQ CHAPTER
   ============================================================ */
.faq{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; }
.faq__item{ border-top:1px solid var(--line); padding:22px 0; }
.faq__item:last-child{ border-bottom:1px solid var(--line); }
.faq__q{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  cursor:pointer; list-style:none;
  font-family:var(--serif); font-size:clamp(1.05rem,2vw,1.25rem); color:var(--ink);
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__icon{
  flex-shrink:0; font-family:var(--sans); font-weight:300; font-size:22px;
  color:var(--gold); transition:transform 0.25s ease;
}
.faq__item[open] .faq__icon{ transform:rotate(45deg); }
.faq__a{
  margin:14px 0 0; max-width:62ch; font-family:var(--serif); color:var(--ink-soft);
  font-size:0.98rem; line-height:1.66;
}