/* =========================================================
   preachinggreen.com / site-wide styles.css (optimized)
   Notes:
   - Organized into sections for maintainability
   - Consolidated duplicate body rules
   - Kept legacy classes intact (bigbutton, floatBox, etc.)
   - Added a small token system (:root) for easy theming
   ========================================================= */

/* =======================
   1) Design Tokens
   ======================= */
:root{
  --wrap: 1100px;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 6px rgba(0,0,0,0.10);
  --shadow-md: 1px 1px 2px rgba(0,0,0,0.25);
  --shadow-card: 0 10px 22px rgba(0,0,0,0.06);

  --border-soft: 1px solid rgba(0,0,0,0.08);

  --text: #333;
  --link: #000;
  --link-hover: #cdcdcd;

  --btn-bg: #2b6cb0;
  --btn-bg-hover: #1e4f80;
  --btn-text: #fff;

  --header-bg: #fff;
  --footer-bg: #333;
  --footer-text: #eee;
}

/* =======================
   2) Base / Reset-ish
   ======================= */
*{ box-sizing: border-box; }

html, body{
  width: 100%;
  height: 100%;
}

body{
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
  color: var(--text);

  /* Keep your original site background image behavior */
  background: #ffffff url(background.jpg) no-repeat center center fixed;
  background-size: cover;

  /* Your sticky nav spacing requirement */
  padding-top: 70px;
}

/* Links (global) */
a:link,
a:visited{
  color: var(--link);
  text-decoration: underline;
}
a:hover,
a:active{
  color: var(--link-hover);
  text-decoration: underline;
}

/* Nav links (legacy) */
a.nav:link,
a.nav:visited{
  color: #a6acb4;
  text-decoration: none;
}
a.nav:hover{
  color: #ffffff;
  text-decoration: underline;
}
a.nav:active{
  color: #ffffff;
  text-decoration: none;
}

/* Headings (preserve your legacy look) */
h1{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 28px;
  line-height: 34px;
  font-weight: bold;
  color: #8586CA;
  font-variant: small-caps;
  letter-spacing: 1px;
  margin: 0 0 10px;
}
h2{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 28px;
  line-height: 34px;
  font-weight: bold;
  color: #ffffff;
  font-variant: small-caps;
  letter-spacing: 1px;
  margin: 0 0 10px;
}
h3{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 28px;
  line-height: 34px;
  font-weight: bold;
  color: #4C2356;
  font-variant: small-caps;
  letter-spacing: 1px;
  margin: 0 0 10px;
}

h4{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 28px;
  line-height: 34px;
  font-weight: bold;
  color: #8586CA;
  font-variant: small-caps;
  letter-spacing: 1px;
  margin: 0 0 10px;
}

h5{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 28px;
  line-height: 34px;
  font-weight: bold;
  color: #D85D02;
  font-variant: small-caps;
  letter-spacing: 1px;
  margin: 0 0 10px;
}

/* =======================
   3) Layout Utilities
   ======================= */
.container,
.wrap{
  width: 90%;
  max-width: var(--wrap);
  margin: 0 auto;
}

/* Flex patterns */
.flex-row{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: stretch;
}
.centered{ text-align: center; }

/* Legacy “float box” styles (kept) */
.floatBox1{
  display: inline-block;
  width: 320px;
  height: 150px;
  margin: 1px;
}
.floatBox{
  display: inline-block;
  vertical-align: top;
  margin: 12px;
  max-width: 340px;
  width: 100%;
}

/* =======================
   4) Components
   ======================= */

/* Card (you already had this—kept + tokenized) */
.card{
  background: #fff;
  padding: 25px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  flex: 1 1 calc(50% - 20px);
}
.card h3{ margin-top: 0; }

@media (max-width: 768px){
  .card{ flex: 1 1 100%; }
}

/* Buttons (your newer system) */
.btn{
  display: inline-block;
  padding: 12px 25px;
  background: var(--btn-bg);
  color: var(--btn-text);
  text-decoration: none;
  border-radius: 5px;
  margin: 5px;
}
.btn:hover{ background: var(--btn-bg-hover); }

.btn-outline{
  background: transparent;
  border: 2px solid #ffffff;
}
.btn-outline:hover{
  background: rgba(255,255,255,0.2);
}

/* Legacy “bigbutton” (preserved verbatim, but cleaned 0px 0px px typo) */
a.bigbutton{
  margin: 0.25em;
  margin-bottom: 3px;
  margin-top: 3px;
  display: inline-block;
  background: #000000;
  border: 0px solid #cdcdcd;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  padding: 5px;
  font: bold 20px/100% "Lucida Grande", Arial, Helvetica, sans-serif;
  border-radius: 6px;
  box-shadow:
    3px 3px 3px #000000,
    0px 0px 0px #000000,
    inset 0px 5px 12px #291C0F,
    inset 0px 15px 2px #291C0F,
    inset 0px 25px 25px #291C0F;
}

/* Section blocks (from your newer system) */
.section{ padding: 60px 20px; }
.section.alt{ background: #eef4ff; }
.section-title{
  text-align: center;
  margin-bottom: 40px;
  font-size: 32px;
}

/* Feature list */
.feature-list{
  list-style: none;
  padding: 0;
  max-width: 500px;
  margin: 0 auto;
}
.feature-list li{
  padding: 8px;
  border-bottom: 1px solid #ddd;
  text-align: center;
}

/* Header / Nav / Footer (kept) */
.header{
  background: var(--header-bg);
  border-bottom: 1px solid #eee;
}
.header-inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
}
.logo{
  font-size: 24px;
  font-weight: bold;
}

/* Your sticky-ish overlay nav */
nav{
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: center;
  background: rgba(0,0,0,0.5);
}
nav a{
  color: white;
  padding: 15px 25px;
  text-decoration: none;
}
nav a:hover{ background: rgba(255,255,255,0.2); }

/* Footer */
.footer,
footer{
  background: var(--footer-bg);
  color: var(--footer-text);
  text-align: center;
  padding: 25px 0;
}
.footer a{
  color: #ddd;
  text-decoration: none;
}
.footer a:hover{ text-decoration: underline; }

/* =======================
   5) Media / Frames / Images
   ======================= */
.frame{
  padding: 0px;
  border: 0px solid #CCC;
  box-shadow: var(--shadow-md);
  border-radius: 2px;
  max-width: 100%;
  height: auto;
}
.iframe{
  padding: 0px;
  border: 1px solid #CCC;
  box-shadow: var(--shadow-md);
  border-radius: 4px;
  max-width: 100%;
  height: 240px;
}
.smallframe1{
  padding: 0px;
  border: 1px solid #CCC;
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-lg);
}
.smallframe{
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
.resize{
  max-width: 100%;
  height: auto;
}

/* Video background system (kept) */
.video-container{
  width: 100%;
  height: 100vh;
}
.videoBG{
  position: absolute;
  z-index: -99;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100vh;
  transform: translate(-50%, -50%);
}
@media (min-aspect-ratio: 16/9){
  .video-container .videoBG{ height: 56.25vw; }
}
@media (max-aspect-ratio: 16/9){
  .video-container .videoBG{ width: 100%; }
}
#text{
  position: absolute;
  color: #FFFFFF;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* =======================
   6) Forms (fix invalid width: ; lines)
   ======================= */
input[type="text"],
input[type="submit"],
input[type="file"],
select{
  width: 100%;
  max-width: 520px; /* feel free to adjust or remove */
  padding: 6px;
  margin: 8px 0;
  font-size: 18px;
}

/* =======================
   Typography Utilities (opt-in)
   ======================= */
.kicker{
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .7;
  margin: 0 0 6px;
}
.lead{
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.5;
  opacity: .9;
  margin: 0 0 12px;
}
.muted{ opacity: .65; }

.divider{
  border: 0;
  height: 1px;
  background: rgba(0,0,0,0.15);
  margin: 40px auto;
  width: 100%;
  max-width: 600px;
}

.read{ max-width: 700px; }
.center{ text-align: center; }

/* Removes awkward extra spacing inside a block */
.tight > *:first-child{ margin-top: 0; }
.tight > *:last-child{ margin-bottom: 0; }


/* =======================
   Spacing Utilities (8px scale)
   ======================= */
.m-0{ margin:0; }
.m-1{ margin:8px; }
.m-2{ margin:16px; }
.m-3{ margin:24px; }
.m-4{ margin:40px; }

.mt-0{ margin-top:0; }
.mt-1{ margin-top:8px; }
.mt-2{ margin-top:16px; }
.mt-3{ margin-top:24px; }
.mt-4{ margin-top:40px; }

.mb-0{ margin-bottom:0; }
.mb-1{ margin-bottom:8px; }
.mb-2{ margin-bottom:16px; }
.mb-3{ margin-bottom:24px; }
.mb-4{ margin-bottom:40px; }

.p-0{ padding:0; }
.p-1{ padding:8px; }
.p-2{ padding:16px; }
.p-3{ padding:24px; }
.p-4{ padding:40px; }

.pt-1{ padding-top:8px; }
.pt-2{ padding-top:16px; }
.pt-3{ padding-top:24px; }
.pt-4{ padding-top:40px; }

.pb-1{ padding-bottom:8px; }
.pb-2{ padding-bottom:16px; }
.pb-3{ padding-bottom:24px; }
.pb-4{ padding-bottom:40px; }


/* =======================
   Layout Utilities (opt-in)
   ======================= */

/* Width helpers */
.w-100{ width: 100%; }
.max-wrap{ max-width: var(--wrap); }
.mx-auto{ margin-left: auto; margin-right: auto; }

/* Flex rows with configurable gaps */
.row{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.row.nowrap{ flex-wrap: nowrap; }
.items-center{ align-items: center; }
.items-start{ align-items: flex-start; }
.items-end{ align-items: flex-end; }
.justify-center{ justify-content: center; }
.justify-between{ justify-content: space-between; }
.justify-around{ justify-content: space-around; }

/* Gap utilities (works with flex + grid) */
.gap-1{ gap: 8px; }
.gap-2{ gap: 16px; }
.gap-3{ gap: 24px; }
.gap-4{ gap: 40px; }

/* Stack: vertical rhythm without manual margins */
.stack{ display: flex; flex-direction: column; }
.stack > * + *{ margin-top: 16px; }
.stack.sm > * + *{ margin-top: 8px; }
.stack.lg > * + *{ margin-top: 24px; }

/* Simple responsive columns */
.cols-2 > *{ flex: 1 1 calc(50% - 20px); }
.cols-3 > *{ flex: 1 1 calc(33.333% - 20px); }
.cols-4 > *{ flex: 1 1 calc(25% - 20px); }

/* One-liner: <div class="row gap-2 cols-2"> ...cards... </div> */
@media (max-width: 900px){
  .cols-2 > *, .cols-3 > *, .cols-4 > *{ flex: 1 1 100%; }
}

/* =======================
   Next-Level Utilities (opt-in)
   ======================= */

/* Hero Titles */
.hero-title{
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.hero-sub{
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.4;
  opacity: .9;
  margin: 0;
}
.hero-center{ text-align: center; }
.hero{
  padding: clamp(60px, 12vw, 140px) 20px;
}

/* Hero */
.hero {
    position: relative;
    background: url('hero.jpg') center/cover no-repeat;
    color: #fff;
    text-align: center;
    padding: 100px 20px;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.1);
}

.hero-content {
    position: relative;
    max-width: 800px;
    margin: auto;
}

.hero-buttons {
    margin-top: 25px;
}

.btn {
    display: inline-block;
    padding: 12px 25px;
    background: #2b6cb0;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    margin: 5px;
}

.btn:hover {
    background: #1e4f80;
}

.btn-outline {
    background: transparent;
    border: 2px solid white;
}

.btn-outline:hover {
    background: rgba(255,255,255,0.2);
}

/* Color helpers (uses tokens; override tokens per site) */
.text{ color: var(--text); }
.text-muted{ opacity: .65; }
.bg-white{ background: #fff; }
.bg-soft{ background: rgba(255,255,255,0.72); }
.bg-alt{ background: #eef4ff; } /* matches your .section.alt */

/* Shadow helpers */
.shadow-sm{ box-shadow: var(--shadow-sm); }
.shadow-md{ box-shadow: var(--shadow-md); }
.shadow-card{ box-shadow: var(--shadow-card); }

/* Radius helpers */
.r-sm{ border-radius: var(--radius-sm); }
.r-md{ border-radius: var(--radius-md); }
.r-lg{ border-radius: var(--radius-lg); }
.r-pill{ border-radius: var(--radius-pill); }

/* Border helpers */
.border{ border: var(--border-soft); }
.border-0{ border: 0; }

/* “Lift” hover (great for cards/buttons) */
.lift{
  transition: transform .18s ease, box-shadow .18s ease;
  will-change: transform;
}
.lift:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

/* Button variants (opt-in) */
.btn-pill{ border-radius: var(--radius-pill); }
.btn-wide{ padding-left: 34px; padding-right: 34px; }
.btn-block{ display: block; text-align: center; width: 100%; }

/* Card variants (opt-in) */
.card-soft{
  background: rgba(255,255,255,0.75);
  border: var(--border-soft);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-lg);
}
.card-outline{
  background: transparent;
  border: var(--border-soft);
  box-shadow: none;
}

/* Responsive visibility */
.hide-sm{ display: block; }
.show-sm{ display: none; }
@media (max-width: 900px){
  .hide-sm{ display: none !important; }
  .show-sm{ display: block !important; }
}

/* Accessibility helper */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}




/* =======================
   Image Utilities (opt-in)
   ======================= */

/* Background behavior */
.bg-cover{ background-size: cover; }
.bg-contain{ background-size: contain; }
.bg-center{ background-position: center; }
.bg-top{ background-position: top; }
.bg-bottom{ background-position: bottom; }
.bg-left{ background-position: left; }
.bg-right{ background-position: right; }

.bg-no-repeat{ background-repeat: no-repeat; }
.bg-repeat{ background-repeat: repeat; }
.bg-fixed{ background-attachment: fixed; }

/* Quick background combo */
.bg{
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Overlay helpers for background sections */
.bg-overlay{
  position: relative;
  overflow: hidden;
}
.bg-overlay::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  pointer-events: none;
}
.bg-overlay-light::before{ background: rgba(255,255,255,0.35); }
.bg-overlay-dark::before{ background: rgba(0,0,0,0.55); }

/* Media blocks (great for heroes/banners/cards) */
.media{ min-height: 220px; }
.media-sm{ min-height: 140px; }
.media-lg{ min-height: 340px; }
.media-xl{ min-height: 520px; }

/* Aspect ratio boxes */
.ratio-16x9{ aspect-ratio: 16 / 9; }
.ratio-4x3{ aspect-ratio: 4 / 3; }
.ratio-3x2{ aspect-ratio: 3 / 2; }
.ratio-1x1{ aspect-ratio: 1 / 1; }

/* <img> helpers */
.img-fluid{
  max-width: 100%;
  height: auto;
  display: block;
}
.img-cover{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.img-contain{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Image effects */
.img-rounded{ border-radius: var(--radius-md); }
.img-circle{ border-radius: 50%; }
.img-shadow{ box-shadow: var(--shadow-card); }

/* Hover zoom (wrap an <img> in .zoom) */
.zoom{ overflow: hidden; }
.zoom img{ transition: transform .35s ease; }
.zoom:hover img{ transform: scale(1.06); }


/* =======================
   Effects Pack (opt-in)
   ======================= */

/* Smooth transitions (apply to cards/buttons/links) */
.ease{
  transition: all .18s ease;
}

/* Glass / frosted card (works best on backgrounds) */
.glass{
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 12px 30px rgba(0,0,0,0.10);
  backdrop-filter: blur(10px);
}
.glass-dark{
  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(255,255,255,0.16);
}

/* Soft gradient backgrounds */
.gradient-soft{
  background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(238,244,255,0.85));
}
.gradient-sunrise{
  background: linear-gradient(135deg, rgba(255,223,186,0.85), rgba(255,255,255,0.85));
}
.gradient-forest{
  background: linear-gradient(135deg, rgba(220,255,240,0.75), rgba(255,255,255,0.85));
}

/* Subtle highlight ring (great for focused cards) */
.ring{
  outline: 3px solid rgba(0,0,0,0.12);
  outline-offset: 3px;
}
.ring-accent{
  outline: 3px solid rgba(43,108,176,0.35);
  outline-offset: 3px;
}

/* Divider variations */
.divider-wide{ max-width: 100%; }
.divider-tight{ max-width: 420px; }

/* Text glow for hero-on-image */
.text-glow{
  text-shadow: 0 2px 14px rgba(0,0,0,0.35);
}

/* Badges / pills (non-button) */
.pill{
  display: inline-block;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.8);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 12px;
}
.pill-dark{
  background: rgba(0,0,0,0.35);
  color: #fff;
  border-color: rgba(255,255,255,0.22);
}

/* Hover underline effect for links */
.link{
  text-decoration: none;
  border-bottom: 2px solid rgba(0,0,0,0.15);
  padding-bottom: 2px;
}
.link:hover{
  border-bottom-color: rgba(0,0,0,0.45);
}

/* Reveal animation helpers (CSS-only; add class via JS if desired) */
.reveal{
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Gentle pulse (use sparingly) */
.pulse{
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{
  0%, 100%{ transform: scale(1); }
  50%{ transform: scale(1.02); }
}

/* Subtle gradient border (wrap inside a card) */
.border-gradient{
  border: 1px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, rgba(43,108,176,0.35), rgba(76,35,86,0.25)) border-box;
}

/* Image filters */
.filter-dim{ filter: brightness(0.85) contrast(1.05); }
.filter-soft{ filter: saturate(1.05) contrast(1.03); }


/* CSS Grid helpers (when you want “true” grid) */
.grid{
  display: grid;
  gap: 20px;
}
.grid-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px){
  .grid-2, .grid-3{ grid-template-columns: 1fr; }
}


/* =======================
   7) Helpers / Legacy
   ======================= */
.rounded-corners{ border-radius: var(--radius-xl); }

.mainText{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  line-height: 28px;
  font-weight: normal;
  color: #0041AD;
  text-decoration: none;
  letter-spacing: 1px;
}
.footerText{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: normal;
  color: #1A5121;
  text-decoration: none;
  letter-spacing: 1px;
}
.block{
  border: 1px solid #cccccc;
  background: #FCB200;
  padding: 5px;
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-md);
}
.shadow{ text-shadow: 1px 1px #dbdbdb; }

/* Your “flex / flex2” demo blocks (kept) */
.flex{
  display: flex;
  flex-wrap: wrap;
  place-content: center;
  gap: 10px;
  justify-content: space-around;
  align-items: stretch;
  background-color: #f0f0f0;
  padding: 20px;
}
.flex div{
  background-color: #4C2356;
  color: white;
  padding: 20px;
  margin: 10px;
  border-radius: 5px;
  text-align: center;
  flex: 1;
}
.flex2{
  display: flex;
  flex-wrap: wrap;
  place-content: center;
  gap: 10px;
  justify-content: space-around;
  align-items: stretch;
  background-color: #f0f0f0;
  padding: 20px;
}
.flex2 div{
  background: linear-gradient(to right, #ffc6fb, #c89cc6);
  color: #000000;
  padding: 20px;
  margin: 10px;
  border-radius: 5px;
  text-align: center;
  flex: 1;
  font-variant: small-caps;
  font-family: serif;
  font-size: 30px;
}

/* Audio wrapper (kept) */
.audio-wrapper{
  border-radius: 10px;
  overflow: hidden;
  width: 200px;
}
.audio-wrapper audio{
  width: 100%;
  display: block;
}

/* =========================================================
   ARTICLE / LETTER STYLING
   Clean long-form reading layout for essays, letters, posts
   ========================================================= */

/* Optimal reading column */

.article {
    max-width: 72ch;
    margin: 0 auto;
    padding: 12px 18px 42px 18px;
    font-size: clamp(17px, 1.05vw, 20px);
    line-height: 1.7;
    color: #222;
    text-wrap: pretty;
}

/* Main title */
.article h1 {
    font-size: 34px;
    line-height: 1.2;
    margin: 0 0 10px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #e5e5e5;
}

/* Section headings */
.article h2 {
    font-size: 24px;
    line-height: 1.3;
    margin: 1.8em 0 0.6em 0;
}

.article h3 {
    font-size: 20px;
    line-height: 1.3;
    margin: 1.5em 0 0.5em 0;
}

/* Article date or subhead */
.article .article-date {
    color: #777;
    font-size: 14px;
    margin: 0 0 20px 0;
}

/* Paragraph rhythm */
.article p {
    margin: 0 0 1.2em 0;
    margin-bottom: 1.25em;
}

.article p + p {
    text-indent: 0;
}

/* Optional softer greeting line */
.article .article-greeting {
    font-style: italic;
    color: #555;
}

/* Drop cap on first real paragraph after greeting/date */
.article .article-dropcap::first-letter {
    float: left;
    font-size: 3.0em;
    line-height: 0.9;
    padding-right: 8px;
    padding-top: 4px;
    font-weight: 600;
    color: #6b8f71;
}

/* Links */
.article a {
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* Lists */
.article ul,
.article ol {
    margin: 0 0 1.4em 24px;
    padding: 0;
}

.article li {
    margin: 0 0 0.45em 0;
}

/* Blockquotes / poems / quoted passages */
.article blockquote {
    border-left: 4px solid #6b8f71;
    background: #f7f9f7;
    padding: 14px 18px;
    margin: 24px 0;
    font-style: italic;
    color: #444;
}

.article blockquote p {
    margin-bottom: 10px;
}

.article blockquote p:last-child {
    margin-bottom: 0;
}

.article blockquote cite {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    color: #777;
    font-style: normal;
}

/* Small text / notes / citations */
.article small {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}

/* Images if used inside article */
.article img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 22px auto;
}

/* Horizontal rule */
.article hr {
    border: 0;
    border-top: 1px solid #ddd;
    margin: 28px 0;
}

/* Optional signature block */
.article .article-signoff {
    margin-top: 24px;
}

/* Mobile adjustments */
@media (max-width: 700px) {
    .article {
        font-size: 17px;
        line-height: 1.68;
        padding: 10px 16px 34px 16px;
    }

    .article h1 {
        font-size: 28px;
    }

    .article h2 {
        font-size: 22px;
    }

    .article h3 {
        font-size: 19px;
    }

    .article .article-dropcap::first-letter {
        font-size: 2.5em;
        padding-right: 6px;
        padding-top: 3px;
    }
}

/* Quote list styling */

.article .quote-list {
    list-style: none;
    padding: 0;
    margin: 22px 0;
}

.article .quote-list li {
    margin-bottom: 18px;
    padding-left: 16px;
    border-left: 3px solid #6b8f71;
}

.article .quote-list strong {
    display: block;
    font-size: 16px;
    margin-bottom: 4px;
}

.article .quote-list em {
    display: block;
    color: #444;
}

/* poem styling */

.article .poem {
    margin: 24px 0;
    font-style: italic;
    line-height: 1.6;
    white-space: pre-line;
}

/* =========================
   Article Header Styling
   ========================= */

.article-header{
    margin-bottom: 28px;
}

.article-title{
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.2;
    margin-bottom: 6px;
    font-weight: 700;
    text-wrap: balance;
}

.article-meta{
    font-size: 14px;
    color: #777;
    letter-spacing: 0.02em;
}

.article-divider{
    margin-top: 14px;
    height: 2px;
    width: 60px;
    background: #6b8f71;
}