:root {
      --ink: #241916;
      --soft-ink: #58443a;
      --wine: #6f1d1b;
      --deep-wine: #3a1010;
      --gold: #c89b4c;
      --soft-gold: #f3e4bf;
      --linen: #fbf8f1;
      --shadow: 0 24px 70px rgba(36, 25, 22, .12);
    }

    p {
      margin: 0 0 1.08rem;
      font-size: clamp(1.02rem, 1.65vw, 1.12rem);
      position: relative;
      z-index: 1;
    }

    .title {
      margin-bottom: 1.2rem;
      max-width: 780px;
      font-size: clamp(2.4rem, 6vw, 5.25rem);
      line-height: .98;
      letter-spacing: -.045em;
      color: #2d1a12;
    }

    .scripture-lead {
      margin: 1.6rem 0 1.8rem;
      padding: 1.3rem 1.5rem 1.3rem 1.75rem;
      background: linear-gradient(90deg, rgba(111,29,27,.08), rgba(243,228,191,.45));
      border-left: 6px solid var(--wine);
      border-radius: 18px;
      color: #321b16;
    }

    .emphasis {
      color: var(--wine);
      font-size: clamp(1.24rem, 2.5vw, 1.72rem);
      line-height: 1.28;
      font-weight: 700;
      letter-spacing: -.02em;
    }

    .section-break {
      margin-top: 2.4rem;
      padding: 1rem 1.25rem;
      background: linear-gradient(90deg, rgba(200,155,76,.18), rgba(111,29,27,.06));
      border-left: 6px solid var(--gold);
      border-radius: 16px;
      color: var(--deep-wine);
      font-size: clamp(1.35rem, 3vw, 2.2rem);
      font-weight: 700;
      letter-spacing: -.02em;
    }

    .teaching-heading {
      margin-top: 2.1rem;
      color: #4c2618;
      font-size: clamp(1.25rem, 2.5vw, 1.8rem);
      line-height: 1.25;
      font-weight: 700;
    }

    .blank {
      margin: 0 0 .8rem;
      line-height: .8;
    }

    .tab {
      display: inline-block;
      width: 2.5em;
    }

    strong { font-weight: 700; }
    em { font-style: italic; }
    u {
      text-decoration: underline;
      text-decoration-color: rgba(111,29,27,.72);
      text-underline-offset: .16em;
    }


    .hero-band {
      margin: 0 0 2rem;
      padding: clamp(1.2rem, 3vw, 2rem);
      border-radius: 24px;
      background:
        linear-gradient(135deg, rgba(58,16,16,.78), rgba(111,29,27,.58)),
        url('https://images.pexels.com/photos/267559/pexels-photo-267559.jpeg?auto=compress&cs=tinysrgb&w=1800') center/cover;
      color: #fff8e8;
      box-shadow: 0 24px 60px rgba(58,16,16,.22);
      overflow: hidden;
      position: relative;
      z-index: 1;
    }

    .hero-band .small-label {
      display: inline-block;
      margin-bottom: .55rem;
      color: #f6d894;
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
    }

    .hero-band .hero-title {
      margin: 0;
      max-width: 600px;
      font-size: clamp(2rem, 5vw, 4rem);
      line-height: .98;
      letter-spacing: -.045em;
      font-weight: 700;
    }

    .visual {
      display: flow-root;
      margin: 1.4rem 0 1.8rem;
      position: relative;
      z-index: 1;
    }

    .visual img {
      width: 100%;
      display: block;
      border-radius: 24px;
      border: 1px solid rgba(200,155,76,.36);
      box-shadow: 0 18px 46px rgba(36,25,22,.16);
      max-height: 390px;
      object-fit: cover;
    }

    .visual.float-right,
    .visual.float-left {
      width: min(360px, 42%);
      margin-top: .25rem;
      margin-bottom: 1.2rem;
    }

    .visual.float-right {
      float: right;
      margin-left: 2rem;
    }

    .visual.float-left {
      float: left;
      margin-right: 2rem;
    }

    .visual figcaption {
      margin-top: .55rem;
      color: var(--soft-ink);
      font-size: .85rem;
      line-height: 1.35;
      font-style: italic;
    }

    .divider-cross {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin: 2.2rem 0 1.6rem;
      color: var(--gold);
      position: relative;
      z-index: 1;
    }

    .divider-cross::before,
    .divider-cross::after {
      content: "";
      height: 1px;
      flex: 1;
      background: linear-gradient(90deg, transparent, rgba(200,155,76,.65), transparent);
    }

    .divider-cross span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.2rem;
      height: 2.2rem;
      border-radius: 999px;
      background: rgba(200,155,76,.16);
      border: 1px solid rgba(200,155,76,.35);
      color: var(--wine);
      font-weight: 700;
    }

    .section-break + .visual {
      margin-top: .35rem;
    }


    .section-divider {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin: 3rem 0 2rem;
      position: relative;
      z-index: 1;
      clear: both;
    }

    .section-divider::before,
    .section-divider::after {
      content: "";
      height: 1px;
      flex: 1;
      background: linear-gradient(90deg, transparent, rgba(200,155,76,.75), transparent);
    }

    .section-divider span {
      min-width: 2.8rem;
      height: 2.8rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: rgba(111,29,27,.08);
      border: 1px solid rgba(200,155,76,.45);
      color: var(--wine);
      font-weight: 700;
      font-size: 1.1rem;
    }

    .image-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
      margin: 1.5rem 0 2rem;
      position: relative;
      z-index: 1;
      clear: both;
    }

    .image-row img {
      width: 100%;
      height: 230px;
      object-fit: cover;
      display: block;
      border-radius: 22px;
      border: 1px solid rgba(200,155,76,.32);
      box-shadow: 0 16px 36px rgba(36,25,22,.13);
    }

    .visual.wide img {
      max-height: 460px;
    }

    .visual.tall {
      width: min(315px, 38%);
    }

    .visual.tall img {
      height: 430px;
      max-height: none;
    }

    @media (max-width: 760px) {
      .image-row {
        grid-template-columns: 1fr;
      }

      .image-row img {
        height: 240px;
      }

      .visual.tall {
        float: none;
        width: 100%;
      }

      .visual.tall img {
        height: 300px;
      }
    }

    @media (max-width: 760px) {
      .visual.float-right,
      .visual.float-left {
        float: none;
        width: 100%;
        margin: 1.2rem 0 1.6rem;
      }

      .visual img {
        max-height: 280px;
      }
    }

    @media (max-width: 760px) {
      main { width: min(100% - 20px, 980px); padding-top: 20px; }
      article { border-radius: 22px; padding: 24px; }
      article::after { inset: 8px; border-radius: 17px; }
      .title { font-size: clamp(2.2rem, 13vw, 3.8rem); }
    }