/* =========================================================
   Spider Template — Patriotic Heritage
   Formal Americana • Centered • Renderer-Correct
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700;900&family=Inter:wght@400;500;600&display=swap');

/* ==============================
   ROOT TOKENS
============================== */
:root{
  /* Core palette */
  --sp-bg:#ffffff;
  --sp-text:#1f2937;
  --sp-headline:#0f172a;
  --sp-muted:#6b7280;

  --sp-red:#b91c1c;
  --sp-blue:#1e3a8a;
  --sp-blue-soft:#e6eefc;

  /* Layout */
  --sp-max-width:1040px;
  --sp-page-pad-x:2rem;
  --sp-header-pad-y:2.25rem;
  --sp-section-gap:5rem;

  /* Typography */
  --sp-font:'Inter', system-ui, sans-serif;
  --sp-display-font:'Merriweather', Georgia, serif;
  --sp-line:1.7;
  --sp-h1-size:clamp(3rem,6.5vw,5.25rem);
  --sp-reading-width:70ch;

  /* Motion */
  --sp-transition:all .3s ease;
}

/* ==============================
   RESET / BASE
============================== */
*,
*::before,
*::after{box-sizing:border-box}

body{
  margin:0;
  background:var(--sp-bg);
  color:var(--sp-text);
  font-family:var(--sp-font);
  line-height:var(--sp-line);
}

/* ==============================
   HEADER (FULL CONTROL)
============================== */
.spider-logo{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;

  padding:var(--sp-header-pad-y) var(--sp-page-pad-x);

  background:
    linear-gradient(
      to bottom,
      #ffffff 0%,
      #f8fafc 100%
    );

  border-bottom:5px solid var(--sp-red);
  box-shadow:0 4px 12px rgba(0,0,0,.06);

  text-decoration:none;
  color:var(--sp-headline);
  font-weight:700;
}

.spider-logo img{
  max-height:56px;
  max-width:280px;
  object-fit:contain;
}

.logo-text{
  font-family:var(--sp-display-font);
  font-size:2.2rem;
  font-weight:900;
  letter-spacing:0.04em;
  text-transform:uppercase;
}

/* ==============================
   MAIN PAGE SPINE
============================== */
.spider-page{
  max-width:var(--sp-max-width);
  margin:0 auto;
  padding:0 var(--sp-page-pad-x) 7rem;
}

/* ==============================
   HERO (INTENTIONAL)
============================== */
.spider-hero{
  margin:0 auto var(--sp-section-gap);
  padding-top:4.5rem;

  display:grid;
  gap:3rem;
  justify-items:center;
  text-align:center;
  position:relative;
}

/* Decorative star rule */
.spider-hero::before{
  content:'★ ★ ★';
  font-size:1.1rem;
  letter-spacing:0.5rem;
  color:var(--sp-red);
  opacity:0.8;
}

/* Image */
.spider-hero-image{
  width:100%;
  max-height:520px;
  object-fit:cover;

  border-radius:6px;

  box-shadow:
    0 10px 30px rgba(0,0,0,.18),
    inset 0 0 0 4px #ffffff;
}

/* Headline */
.spider-headline{
  margin:0;
  font-family:var(--sp-display-font);
  font-size:var(--sp-h1-size);
  font-weight:900;
  line-height:1.1;
  color:var(--sp-headline);
  position:relative;
  padding-bottom:2rem;
}

/* Red-white-blue rule */
.spider-headline::after{
  content:'';
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:160px;
  height:6px;
  background:
    linear-gradient(
      90deg,
      var(--sp-red) 0%,
      #ffffff 50%,
      var(--sp-blue) 100%
    );
}

/* ==============================
   CONTENT (READING COLUMN)
============================== */
.spider-content{
  max-width:var(--sp-reading-width);
  margin:0 auto;
  text-align:center;
}

.spider-content p{
  margin:1.75rem 0;
  font-size:1.125rem;
}

.spider-content p:first-of-type{
  font-size:1.25rem;
  color:var(--sp-muted);
  font-style:italic;
}

/* Lists */
.spider-content ul,
.spider-content ol{
  margin:2rem auto;
  padding-left:1.5rem;
  display:inline-block;
  text-align:left;
}

/* ==============================
   CTA (CONTROLLED)
============================== */
.spider-cta{
  margin-top:5rem;
  text-align:center;
}

.spider-cta-btn{
  display:inline-block;
  padding:1.1rem 3rem;

  background:var(--sp-blue);
  color:#ffffff;

  font-family:var(--sp-font);
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  text-decoration:none;

  border-radius:4px;

  box-shadow:
    0 6px 20px rgba(30,58,138,.35);

  transition:var(--sp-transition);
}

.spider-cta-btn:hover{
  background:var(--sp-red);
  transform:translateY(-2px);
}

/* ==============================
   FOOTER (FULL CONTROL)
============================== */
.spider-footer{
  width:100%;
  margin-top:8rem;
  padding:4.5rem 0 3.5rem;

  background:
    linear-gradient(
      to bottom,
      #ffffff 0%,
      var(--sp-blue-soft) 100%
    );

  border-top:5px solid var(--sp-blue);
  text-align:center;
  color:var(--sp-muted);
}

.spider-footer-inner{
  max-width:var(--sp-max-width);
  margin:0 auto;
  padding:0 var(--sp-page-pad-x);
}

.spider-footer p{
  font-family:var(--sp-display-font);
  font-size:1.1rem;
  font-weight:700;
  margin:0 0 1rem;
}

.spider-footer small{
  opacity:0.75;
}

/* ==============================
   RESPONSIVE
============================== */
@media (max-width:600px){
  :root{
    --sp-page-pad-x:1.25rem;
    --sp-header-pad-y:1.75rem;
  }

  .logo-text{
    font-size:1.6rem;
    letter-spacing:0.03em;
  }

  .spider-content{
    text-align:left;
  }
}