:root{
       --bg:#E8E8E8; /* - soft gray */
      --text:#E5E7EB; /* - gray */
      --panel:#0f172a; /* - near black */
      --cardh:#D3D3D3; /* - slightly dark gray */
      --titleh:#800000; /* - maroon */
      --titlesb:#000080;/* - my blue */
      --titleeb:#EFBF04; /* - button gold */
      --titlevl:#8F00FF; /* - purple */
      --muted:#94A3B8; /* - dark gray */
      --line:#000000; /* - black */
      --brand:#111827; /* - off black */
      --brand-2:#0b1220; /* - almost black */
      --branda:#f59e0b; /* - dark gold */
      --errorln:#FF0000; /* - red */
      --card:#ffffff; /* - white */
      --btnbase:#2E6F40; /* - button green */
      --btnborder:#d1d5db; /* - border gray */
      --radius:14px;
      --container:900px; /* main content max width */
      --sidebar:300px;    /* single sidebar width on desktop */
      --gap:20px;         /* column gap */
    }

    html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.5 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;}

    /* Header/Hero */
    .site-header{
      position:sticky;top:0;z-index:40;
      background:linear-gradient(180deg, rgba(00,00,80,.95), rgba(00,00,80,.95));
      backdrop-filter:blur(8px);
      border-bottom:1px solid var(--line);
    }
    .site-row{
      max-width: calc(var(--container) + var(--sidebar) + var(--gap)*2);
      margin:0 auto;
      padding:18px 18px;
      height:64px;
      display:flex;
      align-items:center;
      justify-content:space-between
    }

    .brand{
      display:flex;
      gap:10px;
      align-items:center
    }
    .brand h1{
      font-size:18px;
      margin:0;
      font-weight:800;
      letter-spacing:.3px;
    }
    .topnav a{color:var(--text);text-decoration:none;margin-left:18px;opacity:.9}
    .topnav a:hover{text-decoration:underline;}
    .topnav a.active{color:var(--branda);font-weight:700}
    .topnav .icon { display: none; }

  @media screen and (max-width: 600px) {
    .topnav a {display: none;}
    .topnav a.icon { float:right; display: block; }
    .topnav.responsive{ position:absolute; left:0; top:64px; width:100%; background:var(--card); z-index:999; box-shadow:0 6px 16px rgba(0,0,0,.15); }
    .topnav.responsive .icon { position: absolute; left: 0; top: 0; }
    .topnav.responsive a{ display:block; text-align:right; padding:12px 16px; border-top:1px solid rgba(0,0,0,.06); color:var(--panel); }
  }

    #legends, #grace, #foundation, #legends-money, #legends-faith, #legends-justice, #grace-money, #grace-redemption, #grace-faith, #grace-justice {
      position: relative;
      top: -90px; /* this is your offset */
    }
   #background, #story, #layout, #categories {
      position: relative;
      top: -72px; /* this is your offset */
    }

    .hero {
      border-bottom:1px solid var(--line);
      background:var(--cardh);
    }
    .hero-inner{
      max-width: calc(var(--container) + var(--sidebar) + var(--gap)*2);
      margin:0 auto; padding:18px 16px;
    }
    .hero-headline{font-size:28px; line-height:1.15; margin:0;}
    .hero-sub{color:var(--muted); margin:6px 0 0 0; font-size:15px;}

   .logo{
      width:36px;
      height:36px;
      border-radius:8px;
      background:conic-gradient(from 220deg,#f59e0b,#38bdf8,#10b981,#f59e0b);
      box-shadow:0 0 20px rgba(245,158,11,.25), inset 0 0 20px rgba(0,0,0,.35)
    }

    .headline{
      font-size:28px;
      line-height:1.1;
      margin:.15em 0 .35em;
      font-weight:700;
      color:var(--titlesb);
      text-align: center;
    }

    .headlinesb{
      font-size:24px;
      line-height:1.1;
      margin:.15em 0 .35em;
      font-weight:700;
      color:var(--titlesb);
      text-align: center;
    }
    .headlinestr{
      font-size:18px;
      line-height:1.1;
      margin:.15em 0 .35em;
      font-weight:700;
      color:var(--titlesb);
      text-align: center;
      margin-top: 24px;
    }

    .kickerst{
      color:var(--titleh);
      font-weight:800;
      letter-spacing:.15em;
      text-transform:capitalize;
      font-size: 42px;
      text-align: center;
      margin-bottom: 72px;
   }
    .kicker{
      color:var(--titleh);
      font-weight:800;
      letter-spacing:.15em;
      text-transform:uppercase;
      font-size:36px;
      text-align: center;
   }
    .kickerql{
      color:var(--titleh);
      font-weight:800;
      letter-spacing:.15em;
      text-transform:uppercase;
      font-size: 36px;
      text-align: left;
      margin-bottom: 24px;
   } 
    .quick{color:var(--titlesb); margin-left:24px;}
    .content{padding:16px}

     a.lntx{
      color:var(--panel);
      text-decoration:none;
      }
    .lntx { font-size:16px; line-height:1.1; font-weight: 500;}
    .lntx a { color:var(--line); text-decoration:none; }
    .lntx a:hover { text-decoration:underline; }


    .sub{
      color:var(--panel);
      line-height: 0.8;
      text-align: center;
    }

    .substr{
      margin: 24px 0px 24px 0px;
      font-size: 19px;
      color:var(--panel);
      line-height: 1.5;
      text-align: left;
    }
    .substrft{
      margin: 12px 0px 0px 0px;
      padding-left: 24px;
      font-size: 19px;
      color:var(--panel);
      line-height: 1.5;
      text-align: left;
    }
    .substrfn{
      margin: 12px 0px 0px 0px;
      font-size: 19px;
      color:var(--panel);
      line-height: 1.5;
      text-align: left;
    }
     .substrst{
      margin: 0px 0px 24px 24px;
      font-size: 19px;
      color:var(--panel);
      line-height: 1.5;
      text-align: left;
    }
   .footstr{
      margin-top: 0px;
      font-size: 14pt;
      color:var(--panel);
      line-height: 1.5;
      text-align: left;
    }
    .imgfoot {
      font-size: 12px;
      color:#000000;
      margin:0px;
    }

   /* Top jump-nav */
    .jump{
      display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 16px;padding:10px;border:1px solid var(--line);
      border-radius:12px; background:#fff;
    }
    .jump a{
      text-decoration:none;padding:8px 10px;border:1px solid var(--line);border-radius:10px;
      font-size:14px;background:var(--btnbase);  color:var(--titleeb);
    }
    .jump a:hover{background:var(--titleh);}
    /* Back to top */
    .back-top{display:flex;justify-content:center;margin:16px 0 8px}

   /* 2-column layout */
    .page {
      max-width: calc(var(--container) + var(--sidebar) + var(--gap)*2);
      margin:0 auto; padding:16px;
      display:grid;
      grid-template-columns: 1fr var(--sidebar);
      gap: var(--gap);
    }
    .sidebar{
      align-self:start;
      margin-top:14px;
      display:flex; flex-direction:column; gap:16px;
    }

    .ad, .widget, .donate, .signup, .image-slot {
      background:var(--card);
      border:1px solid var(--line);
      border-radius: var(--radius);
      padding:14px;
    }
    .image-slot {padding:0px; border:0px;background:var(--bg);}

    .ad__slot{
      background:#f3f4f6; height:180px; border:1px dashed #d1d5db; border-radius:10px;
      display:flex; align-items:center; justify-content:center; color:#9ca3af; font-size:14px;
    }
    .ad--tall .ad__slot{ height:320px; }
    .ad--image .ad__slot{
      height:400px;
    } /* top custom image spot */

    .donate h3, .signup h3, .widget h3 { margin:0 0 8px 0; font-size:22px; color:var(--titleh); text-align: center; }
    .donate p, .signup p { margin:0px; color:var(--line); font-size:19px; text-align: center; }

    .btn {
      display:inline-block; padding:10px 14px; border-radius:10px;
      border:1px solid var(--btnborder); text-decoration:none; font-size:14px; color:var(--titleeb);
      background:var(--btnbase);
      font-weight: 700
    }

    .btntop {
      display:inline-block; padding:10px 14px; border-radius:10px;
      border:1px solid #d1d5db; text-decoration:none; font-size:14px; color:var(--line);
      background:var(--card);
    }

    .btn--primary { background:var(--btnbase);  color:var(--titleeb); border-color:var(--brand); }
    .btn--primary:hover { background:var(--titleh); }
    .btn--full { width:90%; text-align:center; }
    .btn--part { width:40%; text-align:center; }

    .btn--subprimary { background:var(--btnbase);  color:var(--titleeb); border-color:var(--brand);position:absolute; bottom:16px; left:16px; }
    .btn--subprimary:hover { background:var(--titleh); }

    /* Center content sections */
    .section { background:transparent; }
    .section--tight { padding-top:12px; padding-bottom:12px; margin-top:-6px; }
    .sectioncd{
      margin:8px 0 22px;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--card)
    }

    .container { max-width: var(--container); margin: 0 auto; }
    .featured { }

    /* Cards */
    .card {
      display:grid; grid-template-columns:1fr; gap:12px;
      margin-top:14px;
      border:1px solid var(--line); border-radius:var(--radius);
      background:var(--card); overflow:hidden;
    }
    .card--hero { margin-top:8px; }
    .card__media { display:block; aspect-ratio:21 / 9; background:#f4f5f8; overflow:hidden; }
    .card__media img { width:100%; height:100%; object-fit:cover; }
    .card__feat { padding:14px 16px 16px; }
    .card__blog { padding:72px 144px 24px; }
    .card__body { padding:14px 16px 16px; position:relative;height:350px;}
    .card__eyebrow { font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--titleeb); margin:0 0 6px 0; }
    .card__title { font-size:22px; line-height:1.2; margin:0 0 6px 0;}
    .card__titleql { font-size:28px; line-height:1.2; margin:0 0 24px 12px; color:var(--titleeb);}
    .card__title a { color:var(--titleh); text-decoration:none; }
    .card__title a:hover { text-decoration:underline; }
    .card__base {font-size:22px; line-height:1.2; margin:0 0 6px 0; color: var(--titleh)}
    .card__basesb { font-size:16px; color:var(--titlesb); margin:0 0 8px 0; font-weight:500}
    .card__meta { font-size:13px; color:var(--titlesb); margin:0 0 8px 0; font-weight:500}
    .card__excerpt { font-size:15px; color:var(--line); margin:0 0 10px 0; }
    .cat-title{font-size:20px;margin:0 0 4px 24px;color:var(--titlevl)}

    .cards-grid {
      display:grid; grid-template-columns:1fr; gap:14px; margin-top:12px;
    }
 .responsiveimg {
    width: 100%;
    height: auto;
  }

/* Contact Section only */
.contact-section {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin: 24px 0;
}
    .msg-title{font-size:14px;margin:0 0 4px 0px;color:var(--titlesb)}
    .msg3__titleql { font-size:42px; line-height:1.2; margin:0 0 24px 0px; color:var(--titleh);}

.contact-section h2 {
  font-size: 24px;
  margin-bottom: 8px;
}

.contact-intro {
  color: var(--muted);
  font-size: 15px;
  margin-bottom: 16px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-form input,
.contact-form textarea {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: inherit;
  font-size: 15px;
  width: 100%;
  box-sizing: border-box;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(17, 24, 39, 0.1);
}

    @media (min-width: 900px){
      .card__title { font-size:24px; }
      .card--hero .card__title { font-size:26px; }
      .card--hero .card__media { aspect-ratio:24 / 9; } /* shorter hero to keep above the fold */
      .cards-grid { grid-template-columns: repeat(3, 1fr); gap:16px; }
    }

    /* "All Stories" quick link left */
    .all-stories-st {
      margin:16px 0 0;
      display:flex;
    }

    /* “All Stories” quick link center */
    .all-stories {
      margin:16px 0 0;
      display:flex; justify-content:center;
    }

    /* "Start Here" quick link */
    .start-here {
      /*  margin:8px 0 0;*/
      display:flex; justify-content:center;
    }

    /* Footer */
    .site-footer {
      margin-top:18px; padding:18px 16px; border-top:1px solid var(--line); color:var(--muted); font-size:14px;
    }

    /* Responsive: collapse sidebar under main on mobile */
    @media (max-width: 1000px){
      .page { grid-template-columns: 1fr; }
      .sidebar { position:static; }
    }

img.responsive { width: 100%; height: auto; }

  @media screen and (max-width: 600px) {
    .headline{
      font-size:20px;
      line-height:1.1;
      margin:.15em 0 .35em;
    }
    .headlinesb{
      font-size:17px;
      line-height:1.1;
      margin:.15em 0 .35em;
   }
    .headlinestr{
      line-height:1.1;
      margin:.15em 0 .35em;
      margin-top: 18px;
    }
    .kicker{
      letter-spacing:.15em;
      font-size:26px;
   }
    .kickerst{
      letter-spacing:.15em;
      font-size:26px;
      margin-bottom: 12px;
   }

    .card__blog { padding:12px 24px 8px; }
    .donate h3, .signup h3, .widget h3 { margin:0 0 8px 0; font-size:18px; color:var(--titleh); text-align: center; }
    .donate p, .signup p { margin:0px; color:var(--line); font-size:14px; text-align: center; }
}

.st-btn > svg {
    height: 30px !important;
    width: 30px !important;
}
.share-inline {
  display: flex;        /* Activates flexbox */
  align-items: center;  /* Vertically aligns the buttons */
   /* gap: 20px;            /* Adds space between the button sets */
}

/* Styles for Rating Section */

  /* Layout */
  #rating-widget { margin: 20px 0; }
  .rate-btn {
    border:1px solid var(--btnborder); background:var( --btnbase); color:var( --titleeb); padding:10px 14px; border-radius:10px;
    font: 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; cursor:pointer;  font-weight: 700;
  }
  .rate-btn:hover { background:var(--titleh); }

  .rating-modal[hidden] { display:none; }
  .rating-modal {
    position: fixed; inset: 0; background: rgba(17,24,39,0.55);
    display: grid; place-items: center; z-index: 1000;
  }
  .rating-dialog {
    width: min(560px, 92vw);
    background: #fff; border:1px solid #e5e7eb; border-radius: 14px;
    box-shadow: 0 22px 60px rgba(0,0,0,0.25);
    padding: 14px 16px 16px;
  }
  .rating-header { display:flex; align-items:center; justify-content:space-between; }
  .rating-header h3 { margin:0; font-size:18px; }
  .rating-close {
    border:none; background:transparent; font-size:18px; cursor:pointer; line-height:1; padding:6px 8px; border-radius:8px;
  }
  .rating-close:hover { background:#f3f4f6; }

  .rating-sub { margin:8px 0 12px; color:#6b7280; }

  .stars {
    display:flex; gap:6px; justify-content:space-between; padding:8px; border:1px dashed #e5e7eb; border-radius:12px;
    background:#fafafc;
  }
  .star {
    appearance:none; border:none; background:transparent; font-size:26px; line-height:1; cursor:pointer; padding:6px 8px;
    color:#d1d5db; border-radius:8px;
  }
  .star:hover, .star:focus { outline:none; background:#f3f4f6; }
  .star.active, .star.hovered { color:#f59e0b; } /* amber-like */
  .star[aria-checked="true"] { color:#f59e0b; }

  .rating-footer { margin-top:8px; display:flex; justify-content:center; }
  .rating-hint { font-size:13px; color:#6b7280; }

  .rating-toast {
    position: fixed; left:50%; transform: translateX(-50%);
    bottom: 22px; background:#111827; color:#fff; padding:10px 14px; border-radius:10px;
    font-size:14px; box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  }

  @media (prefers-reduced-motion:no-preference){
    .rating-dialog { animation: pop 140ms ease-out; }
    @keyframes pop { from{ transform:scale(.98); opacity:0 } to{ transform:scale(1); opacity:1 } }
  }
  .rating-avg { margin-top:8px; font-size:14px; color:#6b7280; }
  .rating-avg strong { color:#111827; }

/* All Stories - new bookmark section */
.columnbk { float: left; width: 50%; padding: 10px; box-sizing: border-box; }
.rowbk:after { content: ""; display: table; clear: both; }
.astr { font-size:16px; letter-spacing:0.08em; color:var(--titleh); margin:24px 0 6px 24px; font-weight:  bold; }
.strgjmp { font-size:20px; text-align: left; color:var(--titleeb); font-weight: bold; margin:24px 0px 0px 24px; }
@media screen and (max-width: 600px) {
  .columnbk { width: 100%; }
}

/* For Contact Page */
.error { color: red; font-size: 0.9em; margin-top: 4px; }
.success { color: green; font-size: 1em; font-weight: bold; }
.alert { background:#fff3cd; border:1px solid #ffeeba; padding:.75rem; border-radius:6px; margin:.75rem 0; }

/* check for use  */
    .tagline{color:var(--muted);font-size:14px;margin-left:10px;}

/* Support Us Page */
.donate-btn { display: inline-block; background-color: #2E6F40; color: #EFBF04 !important; font-weight: 600; padding: 10px 20px; border-radius: 6px; text-decoration: none; font-size: 16px; transition: background 0.25s, transform 0.1s; }
.donate-btn:hover { background-color: #800000; transform: translateY(-1px); }

/* Subscribe sections */
.resonsivea { height: auto; width: 30%; }
.centera { margin:0px; text-align:center; }

/* Follow icons */
.social-follow { display:flex; gap:10px; }
.si {
  width:36px; height:36px; border-radius:9999px;
  display:grid; place-items:center;
  color:#fff; text-decoration:none;
  box-shadow:0 4px 10px rgba(0,0,0,.15);
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.si:hover { transform: translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.22); opacity:.95; }
.si svg { width:18px; height:18px; }

/* Brand backgrounds */
.si.fb  { background:#1877F2; }
.si.ig  { background:#E4405F; }   /* simple solid (gradient optional) */
.si.pin { background:#E60023; }
.si.x   { background:#000000; }

/* Share icons */
.share-row { display:flex; align-items:center; gap:10px; margin-top:10px; }
.share-label { margin-right:6px; }
.sh {
  width:36px; height:36px; border-radius:9999px;
  display:grid; place-items:center; color:#fff; text-decoration:none;
  box-shadow:0 4px 10px rgba(0,0,0,.15);
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.sh:hover { transform: translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.22); opacity:.95; }
.sh svg { width:18px; height:18px; }
.sh.fb  { background:#1877F2; }
.sh.pin { background:#E60023; }
.sh.x   { background:#000000; }