h1 {
      margin: 0;
      font-size: clamp(2.3rem, 5vw, 4.4rem);
      line-height: 1.05;
      font-weight: 700;
      color: #231d17;
    }

    .sub {
      margin-top: 18px;
      max-width: 620px;
      color: var(--muted);
      font-size: 1.04rem;
    }

    .lead {
      font-size: 1.15rem;
      color: #2f2a24;
    }

    p {
      margin: 0 0 1.28em;
      font-size: 1.05rem;
    }

    .scripture-title {
      margin: 34px 0 10px;
      color: var(--accent);
      text-transform: uppercase;
      letter-spacing: 0.14em;
      font-size: 0.76rem;
      font-family: Arial, Helvetica, sans-serif;
      font-weight: 700;
    }

    .scripture-ref {
      font-size: 1.4rem;
      margin-bottom: 4px;
      color: #221d18;
    }

    .scripture-name {
      font-style: italic;
      color: var(--muted);
      margin-bottom: 24px;
    }

    .float-image {
      width: 210px;
      background: var(--surface);
      border: 1px solid rgba(184, 138, 68, 0.16);
      border-radius: 18px;
      padding: 8px;
      box-shadow: var(--shadow);
      margin-bottom: 14px;
    }

    .float-image img {
      width: 100%;
      display: block;
      border-radius: 12px;
      height: 150px;
      object-fit: cover;
    }

    .float-right {
      float: right;
      margin-left: 24px;
      margin-right: 0;
    }

    .float-left {
      float: left;
      margin-right: 24px;
      margin-left: 0;
    }

    .clear {
      clear: both;
    }

    .divider {
      margin: 20px auto;
      width: 220px;
      height: 1px;
      background: #000;
      clear: both;
    }

    .aside {
      margin: 34px 0;
      padding: 18px 22px;
      border-left: 3px solid var(--accent);
      background: #fcf8f1;
      color: #3a3129;
      font-size: 1.05rem;
      border-radius: 12px;
      clear: both;
    }

    .section-break {
      clear: both;
      height: 12px;
    }

    @media (max-width: 900px) {
      .hero-inner {
        grid-template-columns: 1fr;
      }

      .hero-card {
        justify-self: start;
      }
    }

    @media (max-width: 760px) {
      .float-image,
      .float-right,
      .float-left {
        float: none;
        width: min(100%, 240px);
        margin: 0 auto 18px;
      }
    }

    @media (max-width: 700px) {
      .topbar-inner,
      .hero,
      .page { padding-left: 18px; padding-right: 18px; }
      .content { max-width: 100%; }
      .hero { padding-top: 52px; }
      p { font-size: 1rem; }
      .lead::first-letter { font-size: 3.3rem; }
      .hero-card { max-width: 240px; }
    }