:root {
  --ink: #edf1ec;
  --muted: #c8cec8;
  --night: #101718;
  --night-2: #172123;
  --gold: #d9b978;
  --gold-soft: #edd8a6;
  --line: rgba(233, 217, 175, .28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.75;
  text-rendering: optimizeLegibility;
}

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #162022 url('/assets/quiet-haven-lighthouse.webp') center center / cover no-repeat;
}

.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 13, 14, .80) 0%, rgba(8, 13, 14, .54) 38%, rgba(8, 13, 14, .15) 70%, rgba(8, 13, 14, .10) 100%),
    linear-gradient(0deg, rgba(9, 14, 15, .56) 0%, transparent 42%, rgba(9, 14, 15, .12) 100%);
}

.hero-content {
  position: relative;
  z-index: 1;
  width: min(780px, 84vw);
  margin-left: clamp(7vw, 10vw, 12vw);
  padding: 5rem 0;
  text-shadow: 0 2px 30px rgba(0,0,0,.34);
}

.eyebrow {
  margin: 0 0 1.2rem;
  color: rgba(255,255,255,.72);
  letter-spacing: .28em;
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 600;
}

h1, h2, blockquote { font-family: Georgia, "Times New Roman", serif; }

h1 {
  margin: 0;
  font-size: clamp(4rem, 9vw, 8.5rem);
  font-weight: 400;
  line-height: .96;
  letter-spacing: -.035em;
}

.hero-line {
  margin: 1.6rem 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  font-style: italic;
  color: rgba(255,255,255,.92);
}

.rule {
  display: block;
  width: 86px;
  height: 1px;
  margin-top: 2.25rem;
  background: var(--gold-soft);
  opacity: .75;
}

.horizon-note {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  z-index: 1;
  color: rgba(255,255,255,.55);
  font-size: .8rem;
}

section:not(.hero) { position: relative; }

.content {
  width: min(760px, calc(100% - 3rem));
  margin: 0 auto;
}

.narrow { width: min(700px, calc(100% - 3rem)); }

.reflection {
  padding: clamp(6rem, 12vw, 11rem) 0;
  background:
    radial-gradient(circle at 50% -10%, rgba(198,160,95,.10), transparent 42%),
    var(--night);
  text-align: center;
}

.reflection p {
  margin: 1.1rem auto;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.8vw, 1.26rem);
}

.reflection .lead {
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.45rem, 2.6vw, 2.1rem);
  line-height: 1.55;
}

.way {
  padding: clamp(6rem, 11vw, 10rem) 0;
  background: linear-gradient(160deg, #172123 0%, #11191a 75%);
  border-top: 1px solid rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.04);
}

.section-kicker {
  margin: 0 0 .8rem;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .26em;
  font-size: .72rem;
  font-weight: 700;
}

h2 {
  margin: 0 0 2.2rem;
  font-size: clamp(2.6rem, 5vw, 4.5rem);
  line-height: 1.05;
  font-weight: 400;
  color: #f4f1e9;
}

.way p:not(.section-kicker) {
  max-width: 650px;
  color: var(--muted);
  font-size: clamp(1.04rem, 1.6vw, 1.18rem);
}

.interlude {
  padding: clamp(6rem, 13vw, 12rem) 0;
  background: #0d1415;
  text-align: center;
}

.whisper {
  margin: .5rem 0;
  font-family: Georgia, "Times New Roman", serif;
  color: #e7e4dc;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.6;
}

.scripture {
  min-height: 64svh;
  display: grid;
  place-items: center;
  padding: 6rem 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(219,185,120,.12), transparent 42%),
    linear-gradient(#11191a, #0c1213);
  border-top: 1px solid var(--line);
}

.quote-wrap { position: relative; text-align: center; }

.quote-mark {
  display: block;
  height: 4.2rem;
  font-family: Georgia, "Times New Roman", serif;
  color: rgba(217,185,120,.32);
  font-size: 7rem;
  line-height: 1;
}

blockquote { margin: 0; }

blockquote p {
  margin: 0 auto;
  max-width: 760px;
  font-size: clamp(1.8rem, 4vw, 3.4rem);
  line-height: 1.35;
  color: #f4efe3;
}

blockquote footer {
  margin-top: 1.7rem;
  color: var(--gold-soft);
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: .96rem;
  letter-spacing: .12em;
}

@media (max-width: 700px) {
  .hero { background-position: 92% center; }

  .hero-shade {
    background:
      linear-gradient(0deg, rgba(8,13,14,.78) 0%, rgba(8,13,14,.44) 55%, rgba(8,13,14,.20) 100%),
      linear-gradient(90deg, rgba(8,13,14,.55), rgba(8,13,14,.08));
  }

  .hero-content {
    width: calc(100% - 2.5rem);
    margin: 0 auto;
    padding-top: 38svh;
    align-self: flex-end;
    padding-bottom: 8rem;
  }

  h1 { font-size: clamp(3rem, 14.5vw, 4.5rem); }
  .hero-line { max-width: 90%; }

  .reflection, .way, .interlude, .scripture {
    padding-left: .15rem;
    padding-right: .15rem;
  }
}

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