/* Spurgeon HQ: the marketing site at spurgeonapp.com. Rebuilt from the Framer page (2026-10-20).
   Desktop is drawn at 1440 wide; between 810 and 1440 sizes scale with the window (clamp), under 810 is the phone layout. */

:root {
  --ink: #0c0a09;
  --stone-600: #57534d;
  --stone-500: #79716b;
  --stone-400: #a6a09b;
  --stone-200: #e7e5e4;
  --stone-100: #f5f5f4;
  --stone-50: #fafaf9;
  --pill: #171717;
  --green: #16594e;
  --green-bright: #00d492;
  --slate: #314158;
  --navy: #162456;
  --blue: #2b7fff;
  --blue-100: #dbeafe;
  --blue-50: #eff6ff;
  --divider: #e7e5e4;

  --display: 'Inter', sans-serif;
  --text: 'Manrope', sans-serif;
  --serif: 'Karma', serif;

  /* Desktop sizes, scaled down towards 810 wide */
  --h2: clamp(32px, 3.889vw, 56px);
  --karma-lg: clamp(32px, 3.889vw, 56px);
  --karma-md: clamp(28px, 3.333vw, 48px);
  --karma-sm: clamp(24px, 2.222vw, 32px);
  --pad: clamp(40px, 5.556vw, 80px);
  --edge: clamp(20px, 2.778vw, 40px);

  /* Text styles (owner, 2026-10-20: the same sizes, weights and colours everywhere). The big display type is drawn
     per section; every other line of text is one of these, in Manrope (Spurgeon's own words use --fs-reading). */
  --fs-title: 28px; /* section and page headings, Inter Display bold */
  --fs-body: 18px; /* paragraphs */
  --fs-label: 16px; /* titles of rows and cards, links, menus, buttons, the footer */
  --fs-meta: 14px; /* dates, counts, captions, breadcrumbs */
  --fs-reading: 18px; /* the sermons and Bible verses, Libre Caslon (the body size, so a sermon page also has three) */
  --lh-body: 1.55;
  --lh-label: 1.4;
  --lh-meta: 1.45;
  --regular: 400;
  --bold: 700;
  --text-body: #44403b; /* paragraphs: 9.4:1 on stone-100 */
  --text-muted: #736b65; /* meta, the light brown: 4.8:1 on stone-100, 5.2:1 on white */
  --on-dark: #fafaf9;
  --on-dark-muted: rgba(250, 250, 249, 0.78);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-optical-sizing: none;
  background: #fff;
  color: var(--ink);
  font-family: var(--text);
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
p,
figure,
blockquote,
ul {
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Film grain over photos and coloured panels */
.grain {
  position: relative;
  isolation: isolate;
}
.grain::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/images/noise.png') repeat;
  background-size: 100px;
  opacity: 0.1;
  pointer-events: none;
  z-index: 2;
}
.grain-150::after {
  background-size: 150px;
}
.grain-64::after {
  background-size: 64px;
}

/* ---------- Header ---------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 85px;
  padding: 0 20px;
  position: relative;
  z-index: 10;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-variation-settings: 'opsz' 32;
  font-weight: 700;
  font-size: 24px;
  line-height: 0.9;
  letter-spacing: -0.05em;
}
.brand img {
  width: 41px;
  height: 41px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
}
.nav-link {
  padding: 8px 12px;
  font-weight: var(--bold);
}
/* Download: the header's one button, black as the Framer page's pill */
.nav-pill {
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--pill);
  color: var(--on-dark);
  font-weight: var(--bold);
}
.nav-pill:hover {
  background: var(--ink);
}

.nav-menu {
  display: none;
}

/* ---------- Hero ---------- */

.hero {
  padding: 0 20px 20px;
  container-type: inline-size;
}

.hero-title {
  font-family: var(--display);
  font-variation-settings: 'opsz' 32;
  font-weight: 700;
  font-size: 23.3cqi;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--stone-600);
  white-space: nowrap;
  margin-bottom: 0.086em;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.hero-portrait {
  position: relative;
  overflow: hidden;
}
.hero-portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}

.hero-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.quote-card,
.collection-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--pad);
  overflow: hidden;
}

.quote-card {
  aspect-ratio: 683 / 537;
  background: var(--green);
  color: var(--stone-50);
}
.quote-card blockquote {
  font-family: var(--serif);
  font-size: var(--karma-lg);
  line-height: 1;
  letter-spacing: -0.02em;
}
.quote-card .green {
  color: var(--green-bright);
}
.quote-card figcaption {
  margin-top: clamp(20px, 2.222vw, 32px);
  font-family: var(--display);
  font-variation-settings: 'opsz' 32;
  font-weight: 700;
  font-size: var(--karma-sm);
  line-height: 1;
  letter-spacing: -0.02em;
}

.collection-card {
  position: relative;
  aspect-ratio: 683 / 457;
  background: var(--slate);
  color: var(--blue-50);
}
.collection-card .strip {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8.7%;
  object-fit: cover;
}
.collection-card p {
  font-family: var(--display);
  font-variation-settings: 'opsz' 32;
  font-weight: 700;
  font-size: var(--h2);
  line-height: 1;
  letter-spacing: -0.04em;
}

/* ---------- Timeless truth ---------- */

.timeless {
  background: var(--stone-200);
  padding: 132px 40px 160px;
  container-type: inline-size;
}

.timeless-title {
  font-family: var(--display);
  font-variation-settings: 'opsz' 32;
  font-weight: 700;
  font-size: 13.45cqi;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--stone-500);
  white-space: nowrap;
}
.timeless-title .light {
  color: var(--stone-400);
}

.practical {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: clamp(64px, 7.2vw, 104px);
}
.bust {
  justify-self: start;
  margin-left: 28.7%;
  width: 200px;
  height: 200px;
  object-fit: cover;
}
.practical-text {
  max-width: 480px;
}
.practical-text h3 {
  font-family: var(--display);
  font-variation-settings: 'opsz' 32;
  font-weight: var(--bold);
  font-size: var(--fs-title);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.practical-text p {
  margin-top: 12px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
}
.practical-text p + p {
  margin-top: 18px;
}

/* ---------- Grow spiritually ---------- */

.grow {
  background: var(--navy);
  overflow: hidden;
}
.grow .strip {
  width: 100%;
  height: 150px;
  object-fit: cover;
}
.grow-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pad);
  padding: 128px var(--pad) 196px;
}
.grow h2 {
  font-family: var(--display);
  font-variation-settings: 'opsz' 32;
  font-weight: 700;
  font-size: var(--h2);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--blue-50);
}
.grow .karma {
  font-family: var(--serif);
  font-size: var(--karma-md);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--blue);
}
.grow .karma .light {
  color: var(--blue-100);
}

/* ---------- Features ---------- */

.features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pad);
  padding: 160px var(--pad) 134px;
}
.features-intro h2 {
  font-family: var(--display);
  font-variation-settings: 'opsz' 32;
  font-weight: 700;
  font-size: var(--h2);
  line-height: 1;
  letter-spacing: -0.04em;
}
.features-intro p {
  margin-top: 40px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
}

.accordion {
  max-width: 569px;
}
.accordion details {
  border-bottom: 1px solid var(--divider);
}
.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 27px 0;
  font-weight: var(--bold);
  font-size: var(--fs-body);
  line-height: var(--lh-label);
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.accordion summary::-webkit-details-marker {
  display: none;
}
.accordion details p {
  max-width: 533px;
  padding-bottom: 27px;
  margin-top: -8px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
}

.plus {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
}
.plus::before,
.plus::after {
  content: '';
  position: absolute;
  background: var(--ink);
  transition: transform 0.2s ease;
}
.plus::before {
  left: 0;
  right: 0;
  top: 50%;
  height: 1.5px;
  transform: translateY(-50%);
}
.plus::after {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1.5px;
  transform: translateX(-50%);
}
details[open] .plus::after {
  transform: translateX(-50%) rotate(90deg);
}

/* ---------- A Daily Devotional Tool ---------- */

.devotional {
  position: relative;
  aspect-ratio: 1425 / 900;
  overflow: hidden;
  color: var(--stone-50);
}
.devotional img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}
.feature-tags {
  position: absolute;
  z-index: 3;
  top: 39.8%;
  right: var(--edge);
  list-style: none;
  text-align: right;
  font-family: var(--display);
  font-variation-settings: 'opsz' 32;
  font-weight: 700;
  font-size: clamp(16px, 1.667vw, 24px);
  line-height: 1.2;
}
.feature-tags li + li {
  margin-top: 10px;
}
.devotional h2 {
  position: absolute;
  z-index: 3;
  left: var(--edge);
  bottom: var(--edge);
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--karma-lg);
  line-height: 1;
  letter-spacing: -0.02em;
}

/* ---------- Library ---------- */

.library {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.library-tile {
  position: relative;
  aspect-ratio: 713 / 909;
  overflow: hidden;
  color: var(--stone-50);
}
.library-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.library-tile p {
  position: absolute;
  z-index: 3;
  left: var(--edge);
  right: var(--edge);
  bottom: var(--edge);
  font-family: var(--serif);
  font-size: var(--karma-sm);
  line-height: 1.2;
  letter-spacing: -0.3px;
}


/* ---------- Discover (call to action) ---------- */

.cta {
  display: grid;
  grid-template-columns: 761fr 665fr;
  background: var(--stone-100);
  min-height: 481px;
}
.cta-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 60px;
}
.cta-text h2 {
  max-width: 640px;
  font-family: var(--display);
  font-variation-settings: 'opsz' 32;
  font-weight: 700;
  font-size: var(--h2);
  line-height: 1;
  letter-spacing: -0.04em;
}
.cta-text p {
  max-width: 640px;
  margin-top: 24px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
}
.cta-button {
  margin-top: 24px;
  padding: 8px 20px;
  border-radius: 100px;
  background: var(--pill);
  color: var(--on-dark);
  font-weight: var(--bold);
  font-size: var(--fs-label);
  line-height: 28px;
}
.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.cta-buttons .cta-button {
  margin-top: 0;
}
.cta-button-light {
  background: #fff;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--stone-200);
}
.cta-image {
  width: 100%;
  height: 0;
  min-height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--ink);
  color: var(--on-dark);
  padding: 80px var(--pad) 80px;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
}
.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 41px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-logo {
  display: inline-block;
  background: var(--stone-50);
  color: var(--ink);
  padding: 6px 8px;
  font-family: var(--display);
  font-variation-settings: 'opsz' 32;
  font-weight: var(--bold);
  font-size: var(--fs-label);
  line-height: 1;
  letter-spacing: -0.04em;
}
.footer-brand p {
  max-width: 540px;
  margin-top: 26px;
  line-height: var(--lh-body);
}
.footer-columns {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 64px;
}
.footer-heading {
  margin-bottom: 4px;
  font-size: var(--fs-meta);
  color: var(--on-dark-muted);
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer-col a:hover {
  text-decoration: underline;
}
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 34px;
}
.footer-bottom p {
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--on-dark-muted);
}
.social {
  display: flex;
  gap: 8px;
}
.social a {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--on-dark);
}
.social svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}
.social svg[fill='none'] {
  fill: none;
}

/* ---------- Legal pages ---------- */

.legal {
  max-width: 720px;
  margin: 0 auto;
  padding: 80px 20px 120px;
}
.legal h1 {
  font-family: var(--display);
  font-variation-settings: 'opsz' 32;
  font-weight: 700;
  font-size: var(--h2);
  line-height: 1;
  letter-spacing: -0.04em;
}
.legal .updated {
  margin-top: 16px;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--text-muted);
}
.legal h2 {
  margin-top: 48px;
  font-family: var(--display);
  font-variation-settings: 'opsz' 32;
  font-weight: var(--bold);
  font-size: var(--fs-title);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.legal p,
.legal li {
  margin-top: 16px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
}
.legal ul,
.legal ol {
  margin: 0;
  padding-left: 22px;
}
.legal li {
  margin-top: 8px;
}
.legal strong {
  color: var(--ink);
}
.legal a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- Phone ---------- */

@media (max-width: 809px) {
  :root {
    --fs-title: 24px;
    --fs-body: 16px;
  }
  .site-header {
    height: 81px;
    padding: 0 20px 0 25px;
  }
  .nav-links {
    display: none;
  }
  .nav-menu {
    display: block;
  }
  .nav-menu summary {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    padding: 0 8px;
    cursor: pointer;
    list-style: none;
  }
  .nav-menu summary::-webkit-details-marker {
    display: none;
  }
  .nav-menu summary span {
    display: block;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
  }
  .nav-menu-panel {
    position: absolute;
    top: 81px;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    padding: 8px 20px 20px;
    background: #fff;
    border-bottom: 1px solid var(--divider);
    font-size: var(--fs-label);
  }
  .nav-menu-panel a {
    padding: 12px 0;
    font-weight: var(--bold);
  }

  .hero-grid,
  .practical,
  .grow-inner,
  .features,
  .library,
  .cta {
    grid-template-columns: 1fr;
  }
  .hero-grid {
    margin-top: 0;
  }
  .hero-title {
    margin-bottom: 15px;
  }
  .hero-portrait {
    height: 320px;
    border-radius: 16px 16px 0 0;
  }
  .hero-cards {
    display: contents;
  }
  .hero-grid {
    gap: 0;
  }
  .collection-card {
    margin-top: 20px;
  }
  .quote-card,
  .collection-card {
    aspect-ratio: auto;
    padding: 40px;
  }
  .quote-card {
    min-height: 220px;
  }
  .collection-card {
    min-height: 152px;
  }
  .collection-card .strip {
    height: 21px;
  }
  .quote-card blockquote,
  .quote-card figcaption,
  .collection-card p {
    font-size: 24px;
  }
  .quote-card figcaption {
    margin-top: 23px;
  }
  .collection-card p {
    letter-spacing: -0.8px;
  }

  .timeless {
    padding: 36px 20px 60px;
  }
  .practical {
    margin-top: 27px;
  }
  .bust {
    margin-left: 0;
    width: 40px;
    height: 40px;
  }
  .practical-text h3 {
    margin-top: 32px;
  }
  .practical-text p + p {
    margin-top: 15px;
  }

  .grow .strip {
    height: 80px;
  }
  .grow-inner {
    gap: 20px;
    padding: 80px 40px;
  }
  .grow h2 {
    font-size: 24px;
    letter-spacing: -0.8px;
  }
  .grow .karma {
    font-size: 31px;
  }

  .features {
    gap: 0;
    padding: 80px 40px 80px;
  }
  .features-intro h2 {
    font-size: 24px;
    letter-spacing: -0.8px;
  }
  .features-intro p {
    margin-top: 16px;
  }
  .accordion {
    margin-top: 40px;
  }
  .accordion summary {
    padding: 24px 0;
  }

  .devotional {
    aspect-ratio: 390 / 350;
  }
  .feature-tags {
    top: 40px;
    right: 20px;
    font-size: 16px;
  }
  .feature-tags li + li {
    margin-top: 0;
  }
  .devotional h2 {
    left: 20px;
    bottom: 20px;
    font-size: 24px;
  }

  .library-tile {
    aspect-ratio: 390 / 498;
  }
  .library-tile p {
    left: 20px;
    right: 20px;
    bottom: 20px;
    font-size: 24px;
  }


  .cta-image {
    order: -1;
    height: 282px;
    min-height: 0;
  }
  .cta-text {
    padding: 60px 20px;
  }
  .cta-text h2 {
    font-size: 24px;
    letter-spacing: -0.8px;
  }

  .site-footer {
    padding: 46px 40px 60px;
  }
  .footer-top {
    flex-direction: column;
    gap: 32px;
  }
  .footer-columns {
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
  }

  .legal {
    padding: 48px 20px 80px;
  }
}