/* ---------------------------------------------------------------------------
   sections.css: one block per section in src/components/blocks/, in the same
   order as the files there.
   --------------------------------------------------------------------------- */

/* ---------- about ---------- */
.about { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center; padding: clamp(48px, 6vw, 88px) var(--gutter); background: var(--stone); --logo-ink: var(--ink); --logo-paper: #fff; --logo-dot: var(--red); }
.about > svg { width: 76px; height: auto; }
.about .kicker { color: var(--red); margin-bottom: 10px; }
.about > div { max-width: 980px; }
.about-text { font-family: var(--display); font-size: clamp(24px, 1rem + 1.2vw, 34px); font-weight: 500; line-height: 1.25; }
.about-name { margin-top: 12px; color: var(--mute); font-size: 15px; }
@media (max-width: 640px) { .about { grid-template-columns: minmax(0, 1fr); } }

/* ---------- four-squares ---------- */
.fs { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.fs-q { display: flex; flex-direction: column; justify-content: flex-end; gap: 22px; min-height: clamp(420px, 44vw, 620px); padding: clamp(36px, 5vw, 80px) var(--gutter); background: var(--ink); color: #fff; }
.fs-q h1 { font-size: clamp(50px, 1rem + 5.6vw, 120px); }
.fs-verse { max-width: 28em; color: #C9C3BD; font-size: 18px; }

.fs-bus { position: relative; display: flex; align-items: flex-end; min-height: clamp(420px, 44vw, 620px); color: #fff; overflow: hidden; }
/* The photo, with a warm dark wash underneath in case it cannot load. */
.fs-photo { position: absolute; inset: 0; background-color: #4A3F39; background-image: var(--photo, none), linear-gradient(160deg, #8C7A6E, #2B2420); background-size: cover; background-position: center; }
/* The wash rises far enough to sit behind the whole heading, which would
   otherwise land on the busiest part of a photo. */
.fs-bus::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26, 24, 22, 0) 25%, rgba(26, 24, 22, .55) 55%, rgba(26, 24, 22, .9) 100%); pointer-events: none; }
.fs-bus-in { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: clamp(28px, 4vw, 56px); }
.fs-bus-in .kicker { color: #fff; }
.fs-bus-in h2 { font-size: clamp(30px, 1rem + 2vw, 50px); text-shadow: 0 1px 18px rgba(0, 0, 0, .35); }
.fs-bus-in .btn { margin-top: 8px; }

.fs-sq { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: clamp(300px, 30vw, 420px); padding: clamp(32px, 4.5vw, 64px) var(--gutter); text-decoration: none; overflow: hidden; transition: background .25s; }
.fs-sq h2 { font-size: clamp(40px, 1rem + 3.6vw, 80px); }
.fs-sq p:not(.kicker) { max-width: 24em; margin-top: 12px; font-size: 18px; }
.fs-sq .more { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; }
.fs-sq:hover .go { transform: translateX(6px); }
/* The words sit above the faint l: in the corner, which is positioned and
   would otherwise be drawn over them. */
.fs-sq > :not(.lm), .intro > :not(.lm) { position: relative; }
.fs-sq .lm { position: absolute; right: -20px; bottom: -40px; height: 220px; width: auto; opacity: .12; }
.fs-red { background: var(--red); color: #fff; --logo-ink: #fff; --logo-dot: #fff; }
.fs-red:hover { background: var(--red-2); }
.fs-red .kicker { color: #FFE0D8; }
.fs-stone { background: var(--stone); color: var(--ink); --logo-ink: var(--ink); --logo-dot: var(--ink); }
.fs-stone:hover { background: #ECE7E3; }
.fs-stone .kicker, .fs-stone .more { color: var(--red); }
.fs-stone p:not(.kicker) { color: var(--mute); }

@media (max-width: 860px) {
  .fs { grid-template-columns: minmax(0, 1fr); }
  .fs-q { min-height: 0; }
  .fs-bus { min-height: 380px; }
}

/* ---------- page-intro ---------- */
.intro { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; min-height: clamp(380px, 40vw, 560px); justify-content: flex-end; padding: clamp(40px, 6vw, 96px) var(--gutter); overflow: hidden; }
.intro h1 { max-width: 14em; font-size: clamp(48px, 1rem + 5vw, 110px); }
.intro-text { max-width: 32em; font-size: 19px; }
.intro .btn { margin-top: 8px; }
.intro .lm { position: absolute; right: -30px; bottom: -60px; height: clamp(240px, 32vw, 420px); width: auto; opacity: .12; }
.intro-black { background: var(--ink); color: #fff; }
.intro-black .intro-text { color: #C9C3BD; }
.intro-red { background: var(--red); color: #fff; --logo-ink: #fff; --logo-dot: #fff; }
.intro-red .kicker { color: #FFE0D8; }
.intro-stone { background: var(--stone); color: var(--ink); --logo-ink: var(--ink); --logo-dot: var(--ink); }
.intro-stone .kicker { color: var(--red); }
.intro-stone .intro-text { color: var(--mute); }

/* ---------- steps ---------- */
.steps { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(32px, 4vw, 52px); padding: clamp(56px, 7vw, 104px) var(--gutter); }
.steps .kicker { color: var(--red); margin-bottom: 14px; }
.steps h2 { font-size: clamp(40px, 1rem + 3.2vw, 72px); color: var(--ink); }
.steps-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(28px, 4vw, 56px); width: 100%; margin: 0; padding: 0; list-style: none; }
.steps-n { display: block; font-family: var(--display); font-size: 64px; font-style: italic; font-weight: 500; line-height: .9; color: var(--red); }
.steps-list h3 { margin-top: 14px; font-family: var(--display); font-size: clamp(26px, 1rem + .9vw, 32px); font-weight: 600; line-height: 1.1; }
.steps-list p { max-width: 26em; margin-top: 10px; color: var(--mute); }