/* ================================================================
   styles.css — ScienceX on ClawDrive
   Styled to match the original sciencex.cc Webflow design
   ================================================================ */

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

:root {
  --bg:           #eeeeee;
  --bg-alt:       #f5f7fa; /* Original Webflow section bg */
  --surface:      #f5f7fa;
  --card-bg:      #ffffff;
  --border:       #e4ebf3; /* Original Webflow border color */
  --text:         #333333;
  --heading:      #28363e; /* Signature ScienceX dark teal */
  --nav-bg:      #28363e; /* Signature ScienceX dark teal */
  --accent:       #28363e;
  --accent-h:     #131313e6;
  --link:         #8c65e9;
  --font-heading: 'Inter', sans-serif;
  --font-body:    'Lato', Arial, sans-serif;
  --font-serif:   'PT Serif', Georgia, serif;
  --font-quote:   'Merriweather', serif;
  --white:        #ffffff;
  --r:            15px; /* Matches .shadow-two radius */
  --r-sm:         8px;
  --r-lg:         16px;
}

/* ── Reset ───────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip;}
body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--text);
}

img{vertical-align:middle;max-width:100%;display:inline-block}
::selection{background:rgba(140,101,233,.18);color:var(--heading)}

/* remove the dark‑theme ambient glow from the old design */
body::after{display:none}

/* ================================================================
   HEADER — dark teal bar, 80px, matches Webflow .waves-navbar-1
   ================================================================ */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 24px;
  height:80px;
  background:var(--nav-bg);
  border-bottom:1px solid rgba(19,19,19,.2);
  position:sticky;
  top:0;
  z-index:200;
}

/* ── Logo ── */
.logo{display:flex;align-items:center;gap:.45rem;text-decoration:none}
.logo-icon{font-size:1.5rem;display:flex;align-items:center;justify-content:center}
.logo-icon img{width:auto;height:65px;min-height:60px;object-fit:contain;display:block}
.logo-text{
  font-size:1.25rem;
  font-weight:800;
  color:var(--white);
  letter-spacing:-.01em;
  font-family: 'Orbitron', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em; /* To mimic the logo's spacing */
}

/* ── Nav links ── */
.site-nav{display:flex;align-items:center;gap:16px;margin-left:auto}
.nav-links{display:flex;align-items:center;gap:0;list-style:none}
.nav-links a{
  text-decoration:none;
  font-size:.88rem;
  font-weight:500;
  color:rgba(255,255,255,.85);
  padding:12px 16px;
  border-radius:var(--r-sm);
  transition:color .25s var(--ease),background .25s var(--ease);
}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.08)}

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn{
  padding:.55rem 1.3rem;
  border-radius:var(--r-sm);
  font-weight:600;font-size:.88rem;
  border:none;cursor:pointer;
  text-decoration:none;
  display:inline-flex;align-items:center;gap:.35rem;
  transition:all .25s var(--ease);
}
.btn-primary{
  background:var(--accent);color:#fff;
}
.btn-primary:hover{
  background:var(--accent-h);
  transform:translateY(-1px);
}
.btn-secondary{

}
.btn-secondary:hover{border-color:var(--border-hover);background:var(--surface2)}

.btn-launch{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 24px;
  height:52px;
  background:var(--accent);
  color:#fff;
  font-weight:700;font-size:.88rem;
  letter-spacing:0;
  border:none;border-radius:8px;
  text-decoration:none;cursor:pointer;
  transition:background .2s var(--ease),transform .2s;
  flex-shrink:0;
}
.btn-launch:hover{
  background:rgba(19,19,19,.9);
  transform:translateY(-1px);
}

/* ── Loading / Error ─────────────────────────────────────────────── */
.loading{text-align:center;padding:5rem 1rem;color:var(--text-dim);font-size:1.1rem}
.error{text-align:center;padding:3rem 1rem;color:#ea384c}

/* ================================================================
   CONTENT CONTAINER
   ================================================================ */
.md-content{
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 24px 0;
  position:relative;
  z-index:1;
}

/* ================================================================
   H1 WRAPPER — visually hidden (duplicates hero content)
   ================================================================ */
.h1_wrapper{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ================================================================
   HEADINGS
   ================================================================ */
.h2_wrapper{margin-bottom:16px}
.h2_wrapper h2{
  font-family: var(--font-heading);
  font-size: 30px; /* Matches .waves---heading-2-no-margins */
  line-height: 1.3;
  color: var(--heading);
  margin-bottom: 16px;
  font-weight: 700;
}

.h3_wrapper{margin-bottom:10px}
.h3_wrapper h3{
  font-family: var(--font-heading);
  font-size: 24px;
  color: var(--heading);
  font-weight: 700;
}

.h4_wrapper{margin-bottom:8px}
.h4_wrapper h4{font-size:18px;font-weight:700;color:var(--heading);line-height:24px;margin-top:10px;margin-bottom:10px}
.h5_wrapper h5{font-size:14px;font-weight:700;color:var(--text-dim);line-height:20px;margin-top:10px;margin-bottom:10px}
.h6_wrapper h6{font-size:12px;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em;line-height:18px;margin-top:10px;margin-bottom:10px}

/* ================================================================
   PARAGRAPHS
   ================================================================ */
.p_wrapper{margin-bottom:10px}
.p_wrapper p{
  font-size: 17px;
  line-height: 1.6;
  font-family: var(--font-body);
  margin-bottom: 24px;
}

/* ================================================================
   IMAGES
   ================================================================ */
.img_wrapper {
  float: left;
  width: 50%;
  padding-right: 2.5rem;
  margin-bottom: 1.75rem;
  box-sizing: border-box;
}



.img_wrapper img {
  border-radius: var(--r);
  width: 100%;
  height: auto;
  box-shadow: 0 4px 24px rgba(150,163,181,0.08);
}

/* Clearfix: Prevents the container from collapsing and forces text below 
   the images if the text wrappers start after the image group */
.section_lv2_wrapper::after {
  content: "";
  display: table;
  clear: both;
}
.img_wrapper img:hover{
  transform:scale(1.01);
  box-shadow:0 6px 32px rgba(150,163,181,.16);
}
.inline-image{max-width:100%;border-radius:var(--r-sm);vertical-align:middle}

/* ================================================================
   CODE
   ================================================================ */
.code_wrapper{margin:1.5rem 0}
.code_wrapper pre{
  background:var(--bg-alt);
  color:var(--text);
  padding:1.2rem 1.4rem;
  border-radius:var(--r);
  border:1px solid var(--border);
  overflow-x:auto;
  font-size:.87rem;
  line-height:1.65;
}
.code_wrapper pre code{font-family:var(--mono)}
.inline-code{
  background:rgba(40,54,62,.06);
  padding:.12em .4em;
  border-radius:4px;
  font-size:.87em;
  font-family:var(--mono);
  color:var(--accent);
}

/* ================================================================
   LISTS
   ================================================================ */
.list_wrapper{margin:1rem 0 1.2rem}
.list_wrapper ul,.list_wrapper ol{padding-left:40px;margin-top:0;margin-bottom:10px}
.list_wrapper li{margin-bottom:.4rem;font-size:1rem;line-height:1.75;color:var(--text)}
.list_wrapper ul li::marker{color:var(--accent)}
.list_wrapper ol li::marker{color:var(--accent);font-weight:600}

/* ================================================================
   BLOCKQUOTES — matches Webflow default (5px left border, #e2e2e2)
   ================================================================ */
.blockquote_wrapper{margin:1.5rem 0}
.blockquote_wrapper blockquote{
  border-left: none; /* Removing default border to match Webflow Walsh style */
  font-family: var(--font-quote);
  font-size: 1.1em;
  line-height: 1.5;
  color: var(--heading);
  padding: 0;
  margin-bottom: 2em;
  font-style: normal;
}

/* ================================================================
   TABLES
   ================================================================ */
.table_wrapper{margin:1.5rem 0;overflow-x:auto}
.table_wrapper table{width:100%;border-collapse:collapse;border-spacing:0;font-size:.92rem}
.table_wrapper th,.table_wrapper td{padding:.7rem 1rem;text-align:left;border-bottom:1px solid var(--border)}
.table_wrapper th{background:var(--surface);font-weight:700;color:var(--heading)}
.table_wrapper tbody tr:hover{background:rgba(0,0,0,.015)}

/* ================================================================
   HR
   ================================================================ */
.hr_wrapper{margin:0}
.hr_wrapper hr{border:none;height:0px;background:var(--border)}

/* ================================================================
   SECTIONS — light backgrounds, stacked with border separation
   ================================================================ */
.section_lv2_wrapper{
  background-color: var(--bg-alt);
  margin: 0 20px 40px; /* Matches original section spacing */
  padding: 40px 30px;
  border-radius: 0;
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.section_lv3_wrapper{margin:2rem 0;padding:0}
.section_lv4_wrapper{margin:1.5rem 0;padding:0}

/* ================================================================
   CARDS — white bg, subtle shadow, matches Webflow card feel
   ================================================================ */
.card-wrapper{
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: 0 4px 24px rgba(150, 163, 181, 0.08); /* Matches .shadow-two */
  transition: transform 0.3s ease;
}
.card-wrapper:hover{
  transform: translateY(-4px);
}
.card-wrapper .h3_wrapper,
.card-wrapper .h4_wrapper{margin-bottom:.4rem}
.card-wrapper .p_wrapper:last-child{margin-bottom:0}

/* ================================================================
   ARTICLES GRID — 2‑col when section has ≥ 3 cards
   ================================================================ */
.section_lv2_wrapper:has(> .card-wrapper + .card-wrapper + .card-wrapper){
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.1rem;
}
.section_lv2_wrapper:has(> .card-wrapper + .card-wrapper + .card-wrapper) > .h2_wrapper,
.section_lv2_wrapper:has(> .card-wrapper + .card-wrapper + .card-wrapper) > .h3_wrapper,
.section_lv2_wrapper:has(> .card-wrapper + .card-wrapper + .card-wrapper) > .p_wrapper,
.section_lv2_wrapper:has(> .card-wrapper + .card-wrapper + .card-wrapper) > .hr_wrapper{
  grid-column:1 / -1;
}
.section_lv2_wrapper:has(> .card-wrapper + .card-wrapper + .card-wrapper) > .card-wrapper{
  margin:0;
}



/* ================================================================
   PODCAST / EVENT — single featured cards, slightly larger padding
   ================================================================ */
.section_lv2_wrapper:not(:has(> .card-wrapper + .card-wrapper + .card-wrapper)) > .card-wrapper{
  background:var(--card-bg);
  border-radius:var(--r-lg);
  padding:2rem 2.25rem;
  box-shadow:0 4px 24px rgba(150,163,181,.08);
}

/* ================================================================
   FOUNDER / LAST CONTENT SECTION
   ================================================================ */
.section_lv2_wrapper:last-of-type .blockquote_wrapper blockquote{
  color:var(--text);
}
.section_lv2_wrapper:last-of-type .p_wrapper p{
  color:var(--text);
}

/* ================================================================
   LINKS & INLINE STYLES
   ================================================================ */
.md-content a{
  color:var(--link);
  text-decoration:none;
  transition:color .2s var(--ease);
}
.md-content a:hover{color:var(--link-h)}

.md-content strong{font-weight:700;color:var(--heading)}
.md-content em{font-style:italic;color:var(--text-dim)}
.md-content del{color:#999}

/* links inside cards use the dark accent instead of purple */
.card-wrapper .p_wrapper a,
.card-wrapper a{
  color:var(--accent);
  font-weight:600;
  font-size:.9rem;
  transition:color .2s var(--ease);
}
.card-wrapper .p_wrapper a:hover,
.card-wrapper a:hover{
  color:var(--accent-h);
}

/* ================================================================
   FOOTER AREA (content after last HR)
   ================================================================ */
.md-content > .hr_wrapper:last-of-type ~ .p_wrapper{
  text-align:center;
  font-size:14px;
}
.md-content > .hr_wrapper:last-of-type ~ .p_wrapper p{
  color:var(--text-dim);
  font-size:14px;
  line-height:20px;
}
.md-content > .hr_wrapper:last-of-type ~ .p_wrapper a{
  color:var(--text-dim);
  text-decoration:none;
}
.md-content > .hr_wrapper:last-of-type ~ .p_wrapper a:hover{
  color:var(--heading);
}

/* ================================================================
   THEME SWITCHER (lives inside the dark header)
   ================================================================ */
.theme-switcher{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.theme-label{font-size:.82rem;font-weight:600;color:rgba(255,255,255,.6);white-space:nowrap}
.theme-dropdown{
  appearance:none;
  -webkit-appearance:none;
  background-color:rgba(255,255,255,.08);
  color:rgba(255,255,255,.85);
  border:1px solid rgba(255,255,255,.15);
  border-radius:var(--r-sm);
  padding:.38rem 2rem .38rem .7rem;
  font-size:.82rem;
  font-family:inherit;font-weight:500;
  cursor:pointer;
  transition:border-color .2s,box-shadow .2s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .6rem center;
}
.theme-dropdown:hover{border-color:rgba(255,255,255,.3)}
.theme-dropdown:focus{outline:none;border-color:rgba(255,255,255,.5);box-shadow:0 0 0 3px rgba(255,255,255,.1)}
.theme-dropdown option{background:var(--nav-bg);color:#fff}

/* ================================================================
   LIGHTBOX / MODAL
   ================================================================ */
[style*="position: fixed"]{backdrop-filter:blur(8px)}

/* ================================================================
   SCROLLBAR (webkit)
   ================================================================ */
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#ccc;border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:#aaa}

/* ================================================================
   RESPONSIVE
   ================================================================ */

/* ── Tablet ── */
@media(max-width:991px){
  /*.img_wrapper {
    float: none;
    width: 100%;
    padding-right: 0;
    text-align: center;
    margin-bottom: 2rem;
  }*/
  .section_lv2_wrapper {
    margin: 0 10px 20px;
    padding: 30px 15px;
  }
  .md-content { max-width: 100%; 
    padding:0 10px 5rem;}

  .md-content > .h1_wrapper + .section_lv2_wrapper,
  .md-content > .section_lv2_wrapper:first-child{
    padding-top:180px;
    padding-bottom:60px;
  }
  .md-content > .h1_wrapper + .section_lv2_wrapper .h2_wrapper h2,
  .md-content > .section_lv2_wrapper:first-child .h2_wrapper h2{
    font-size:44px;
  }
}

/* ── Small tablet / large phone ── */
@media(max-width:768px){
  .site-header{padding:0 12px;height:65px}
  .site-nav{gap:8px}
  .nav-links{gap:0}
  .nav-links a{font-size:.78rem;padding:10px 8px}

  .md-content{padding:0 16px 3rem}

  .h2_wrapper h2{font-size:28px;line-height:32px}
  .h3_wrapper h3{font-size:20px;line-height:26px}

  .card-wrapper{padding:1.25rem 1.1rem;border-radius:var(--r)}

  /* stack articles to single column */
  .section_lv2_wrapper:has(> .card-wrapper + .card-wrapper + .card-wrapper){
    grid-template-columns:1fr;
  }

  .section_lv2_wrapper:not(:has(> .card-wrapper + .card-wrapper + .card-wrapper)) > .card-wrapper{
    padding:1.5rem 1.25rem;
  }

  .section_lv2_wrapper{padding:30px 15px}

  .md-content > .h1_wrapper + .section_lv2_wrapper,
  .md-content > .section_lv2_wrapper:first-child{
    padding-top:120px;
    padding-bottom:48px;
  }
  .md-content > .h1_wrapper + .section_lv2_wrapper .h2_wrapper h2,
  .md-content > .section_lv2_wrapper:first-child .h2_wrapper h2{
    font-size:36px;
  }
  .md-content > .h1_wrapper + .section_lv2_wrapper .p_wrapper p,
  .md-content > .section_lv2_wrapper:first-child .p_wrapper p{
    font-size:16px;
  }

  .theme-label{display:none}
  .theme-dropdown{font-size:.78rem;padding:.32rem 1.7rem .32rem .55rem}
}

/* ── Phone ── */
@media(max-width:479px){
  .site-header{height:65px}

  .h2_wrapper h2{font-size:24px;line-height:30px}
  .h3_wrapper h3{font-size:18px;line-height:24px}

  .p_wrapper p{font-size:14px;line-height:20px}

  .btn-launch{padding:8px 18px;font-size:.82rem;height:44px}
  .nav-links{display:none}

  .md-content{padding:0 12px 2.5rem}
  .card-wrapper{padding:1rem .9rem;border-radius:10px}

  .section_lv2_wrapper{padding:20px 15px}

  .md-content > .h1_wrapper + .section_lv2_wrapper,
  .md-content > .section_lv2_wrapper:first-child{
    padding-top:80px;
    padding-bottom:48px;
  }
  .md-content > .h1_wrapper + .section_lv2_wrapper .h2_wrapper h2,
  .md-content > .section_lv2_wrapper:first-child .h2_wrapper h2{
    font-size:30px;
    line-height:1.25;
  }
  .md-content > .h1_wrapper + .section_lv2_wrapper .p_wrapper p,
  .md-content > .section_lv2_wrapper:first-child .p_wrapper p{
    font-size:14px;
    line-height:20px;
  }

  .logo-icon img{height:55px;min-height:55px}

  .blockquote_wrapper blockquote{font-size:16px}
}

/* ================================================================
   LINKS AS BUTTONS
   ================================================================ */

/* Target <a> tags that do NOT wrap an image */
.md-content a:not(:has(img)) {
  background-color: var(--accent);
  color: #ffffff !important;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  transition: background-color 0.2s ease;
  font-family: var(--font-heading);
}

/* Hover state for these button-links */
.md-content a:not(:has(img)):hover {
  background-color: var(--accent-h);
  transform: translateY(-1px);
}

/* Ensure images that ARE links don't get button padding or backgrounds */
.md-content a:has(img) {
  display: inline-block;
  background: transparent;
  padding: 0;
}

.section_lv3_wrapper.card-wrapper{
  padding:15px;
}

/* ================================================================
   HACKS for this specific webpage
   ================================================================ */
/* 1. The Wrapper stays full-bleed */
#content > .md-content > .img_wrapper:nth-child(2) {
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  background-color: var(--nav-bg);
  padding: 40px 0;
  box-sizing: border-box;
  display: block !important;
  position: relative;
  clear: both !important;
}

/* 2. Target the Link: This is the missing piece for centering */
#content > .md-content > .img_wrapper:nth-child(2) a {
  display: block !important;
  width: 100%;
  text-align: center; /* Helps center the inline-block child */
}

/* 3. The Image: Centralized */
#content > .md-content > .img_wrapper:nth-child(2) img {
  display: block !important;
  margin: 0 auto !important; /* Now works because parent <a> is a block */
  width: 100% !important;
  max-width: 1000px !important;
  height: auto;
  border-radius: 12px; /* Optional: adds a nice curve like your other cards */
}

/* 4. Fix for elements below */
#content > .md-content > .img_wrapper:nth-child(2) ~ * {
  position: relative !important;
  top: 0 !important;
  margin-top: 20px !important;
}

/* When two images are next to each other, they will sit side-by-side */
.img_wrapper + .img_wrapper {
  float: left;
}

/* Target the parent wrappers when two images are adjacent */
.img_wrapper + .img_wrapper,
.img_wrapper:has(+ .img_wrapper) {
  width: auto;           /* Overrides the 50% width to fit content */
  max-width: 50%;        /* Prevents side-by-side images from exceeding half the screen */
  padding-right: 2rem;   /* Maintains the gutter between the two images */
}
/* When two img_wrappers are adjacent, limit the width of the images inside them */
.img_wrapper + .img_wrapper img,
.img_wrapper:has(+ .img_wrapper) img {
  max-width: 250px;
  width: 100%; /* Ensure it stays responsive within the 350px limit */
  height: auto;
}

@media (max-width: 991px) {
  /* Select .img_wrapper ONLY if:
     1. It is NOT preceded by another .img_wrapper
     2. It is NOT followed by another .img_wrapper
  */
  .img_wrapper:not(.img_wrapper + .img_wrapper):not(:has(+ .img_wrapper)) {
    float: none;
    width: 100%;
    padding-right: 0;
    text-align: center;
    margin-bottom: 2rem;
  }
}

/* ================================================================
   FOUNDER / LAST CONTENT SECTION — STYLE OVERRIDE
   ================================================================ */

/* 1. Target the main section container */
.section_lv2_wrapper:last-of-type {
  margin: 0 calc(-50vw + 50%) !important;
  padding: 100px calc(50vw - 50%) !important;
  background-color: var(--nav-bg) !important;
  text-align: center !important;
  border: none !important;
  border-radius: 0 !important;
}

/* 2. Style "WHY WE ARE DOING THIS" to match original badge design */
.section_lv2_wrapper:last-of-type > .h2_wrapper h2 {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.05); /* Subtle dark badge */
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6) !important; /* Muted gray-white */
  font-size: 12px !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 8px 20px;
  border-radius: 50px;
  margin-bottom: 40px !important;
}

/* 3. Make "Founder's Words" the prominent white heading */
.section_lv2_wrapper:last-of-type .section_lv3_wrapper .h3_wrapper h3 {
  color: var(--white) !important;
  font-size: 36px !important;
  font-weight: 800;
  margin-bottom: 30px;
}

/* 4. Fix visibility and size for all paragraphs and blockquotes */
.section_lv2_wrapper:last-of-type .p_wrapper p,
.section_lv2_wrapper:last-of-type .blockquote_wrapper blockquote {
  color: rgba(255, 255, 255, 0.8) !important; /* High contrast visibility */
  font-size: 15px !important; /* Smaller text as requested */
  line-height: 1.7;
  max-width: 700px;
  margin: 0 auto 20px !important;
}

/* 5. Ensure the inner container is invisible */
.section_lv2_wrapper:last-of-type .card-wrapper {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  transform: none !important;
}

.section_lv2_wrapper:last-of-type .p_wrapper a {
  background-color: var(--white) !important;
  color: var(--nav-bg) !important;
  border-radius: 50px !important; /* Makes them pill-shaped */
  padding: 12px 30px !important;
  margin: 10px;
}

/* Target the copyright wrapper within the final section */
.section_lv2_wrapper:last-of-type .section_lv3_wrapper.card-wrapper:last-of-type .h3_wrapper h3 {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.4) !important; /* Muted color so it doesn't distract */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 40px;
}

/* Also shrink the RSS/Contact links below it */
.section_lv2_wrapper:last-of-type .section_lv3_wrapper.card-wrapper:last-of-type .p_wrapper p {
  font-size: 11px !important;
}

/* Highlight the intro lead paragraph */
.md-content > .h1_wrapper + .p_wrapper p {
  text-align: center !important;
  text-transform: uppercase !important;
  font-weight: 900 !important;
  font-size: 20px !important;
  letter-spacing: 0.05em;
  color: var(--heading);
  max-width: 800px;
  margin: 20px auto 40px !important;
  line-height: 1.4;
}

@media(max-width:479px){
  .section_lv2_wrapper:last-of-type .section_lv3_wrapper .h3_wrapper h3 {
    font-size: 24px !important;
  }
  .md-content > .h1_wrapper + .p_wrapper p {
    font-size: 16px !important;
  }

  .section_lv2_wrapper:last-of-type .p_wrapper p,
  .section_lv2_wrapper:last-of-type .blockquote_wrapper blockquote {
  font-size: 13px !important;
  }

  .section_lv2_wrapper:last-of-type .p_wrapper a {
    font-size:13px !important;
    padding: 8px 20px !important;
    margin: 8px;
  }
}