/* ================================================================
   WORLDLY EXPRESS — UNIFIED STYLESHEET
   desktop.css + mobile.css combined into one file.
   Original colors preserved throughout.
   ================================================================ */
 
/* ── GOOGLE FONTS ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,400;1,700&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');
 
/* ── CSS VARIABLES ────────────────────────────────────────────── */
:root {
  /* ── Original site colors — never changed ── */
  --gray-header: #919191;
  --gray-aside:  #c9c9c9;
  --gray-toc:    #bebebe;
  --cream:       #e4d7ba;
 
  /* ── Derived palette ── */
  --cream-light:  #f0ead8;
  --cream-dark:   #cfc0a0;
  --white:        #ffffff;
  --black:        #111111;
  --text-body:    #1d1d1d;
  --text-muted:   #636363;
  --text-faint:   #a0a0a0;
  --border-light: rgba(0,0,0,.08);
  --border-card:  rgba(0,0,0,.06);
  --accent-gold:  #c8a04a;
  --accent-hover: rgb(230, 230, 1);
  --green-badge:  #eef7f0;
  --green-text:   #196930;
 
  /* ── Shadows ── */
  --sh-xs: 0 1px 4px rgba(0,0,0,.06);
  --sh-sm: 0 2px 10px rgba(0,0,0,.08);
  --sh-md: 0 6px 24px rgba(0,0,0,.12);
  --sh-lg: 0 16px 44px rgba(0,0,0,.14);
 
  /* ── Typography ── */
  --font-display: 'Playfair Display', 'Times New Roman', Georgia, serif;
  --font-body:    'Lora', Georgia, serif;
  --font-ui:      'DM Sans', Arial, sans-serif;
 
  /* ── Geometry ── */
  --r-sm:       10px;
  --r-md:       18px;
  --r-lg:       26px;
  --nav-h:      72px;
 
  /* Article card image dimensions — taller for a richer front page */
  --card-img-w: 220px;
  --card-img-h: 200px;
 
  /* Sidebar fixed width */
  --sidebar-w:  260px;
}
 
/* ================================================================
   BASE / RESET
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; }
 
html:focus-within { scroll-behavior: smooth; }
 
body {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.78;
  margin: 0;
  padding: 0;
  color: var(--text-body);
  background: var(--cream-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
 
footer { background: var(--white); }
 
img {
  max-width: 100%;
  height: auto;
  flex-shrink: 0;
}
 
a         { color: var(--black); transition: color .18s ease; }
a:visited { color: var(--black); }
a:hover   { color: #404040; }
 
/* ================================================================
   TYPOGRAPHY
   ================================================================ */
 
h6 {
  font-family: var(--font-display);
  font-size: clamp(38px, 5.5vw, 64px);
  font-style: italic;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-top: 10px;
  margin-bottom: 0;
}
 
h1 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.5vw, 40px);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin-top: 0;
  margin-bottom: 10px;
}
 
h2 {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.8vw, 30px);
  font-weight: 700;
  line-height: 1.22;
  margin-top: 0;
  margin-bottom: 0;
}
 
h3 {
  font-family: var(--font-ui);
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 600;
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: 0;
}
 
h4 {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 4px;
  margin-bottom: 2px;
  letter-spacing: .01em;
}
 
h5 {
  font-family: var(--font-ui);
  font-size: 12px;
  font-style: italic;
  color: var(--text-faint);
  margin-top: 4px;
  margin-bottom: 4px;
}
 
p {
  font-size: 18px;
  line-height: 1.78;
  margin-bottom: 20px;
}
 
ul li,
ol li {
  margin-top: .7em;
  font-size: 18px;
  line-height: 1.65;
  text-indent: -1em;
  padding-left: 1em;
}
 
/* Sidebar card overrides — kept from original */
.cardEntry h2 { margin-top: 0; margin-bottom: 0; }
.cardEntry img { margin-bottom: 20px; margin-top: 10px; max-width: 200px; }
 
/* ── Animation ── */
.animate { animation: animatezoom .6s; }
@keyframes animatezoom {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}
 
/* ================================================================
   HEADER / NAV
   The nav skeleton (skeletonManager.js) renders:
     <header>
       <div id="mySidenav" class="sidenav">...</div>   ← mobile drawer
       <div class="sidenavbtn">☰</div>                 ← hamburger (mobile)
       <a href="/"><img src="LogoNav.webp"></a>         ← logo
       <nav>                                            ← desktop dropdowns
         <div class="dropdown"><button class="dropbtn">Airlines</button>...</div>
         <div class="dropdown"><button class="dropbtn">Hotels</button>...</div>
         <div class="dropdown"><button class="dropbtn">Sweet Spots</button>...</div>
       </nav>
     </header>
   ================================================================ */
header {
  background-color: var(--gray-header);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 32px;
  height: var(--nav-h);
  position: sticky;
  top: 0;
  z-index: 200;
  overflow: hidden; /* prevents oversized children from breaking outside the bar */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    var(--sh-sm);
}
 
/* Logo image — sits to the left of <nav> */
header > a {
  display: flex;
  align-items: center;
  margin-right: 3.5rem;
  flex-shrink: 0;
}
 
header > a > img,
header img {
  width: auto;
  height: calc(var(--nav-h) - 12px);
  max-height: 60px;
  max-width: 220px;
  object-fit: contain;
  transition: opacity .2s;
}
 
header > a:hover > img,
header img:hover { opacity: .88; }
 
/* Desktop <nav> */
nav {
  display: flex;
  align-items: center;
  text-align: center;
  gap: 4px;
}
 
/* Plain <a> links inside nav (not used currently but kept for future) */
nav > a {
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 10px 14px;
  color: var(--black);
  border-bottom: 2px solid transparent;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  transition: background .18s, border-color .2s;
}
 
nav > a:hover {
  background: rgba(255,255,255,.16);
  border-bottom-color: var(--accent-hover);
}
 
/* ── Dropdown wrapper ── */
.dropdown {
  position: relative;
  display: inline-block;
  text-align: center;
  color: var(--black);
}
 
/* The dropdown trigger button */
.dropbtn {
  background-color: transparent;
  color: var(--black);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 10px 16px;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  transition: background .18s, border-color .2s;
  /* Ensure full nav-bar height is the click target */
  height: var(--nav-h);
  display: flex;
  align-items: center;
}
 
.dropbtn:hover,
.dropdown:hover .dropbtn {
  background: rgba(255,255,255,.16);
  border-bottom-color: var(--accent-hover);
}
 
/* Dropdown panel */
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--white);
  min-width: 180px;
  z-index: 300;
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  overflow: hidden;
  border: 1px solid var(--border-light);
  margin-top: 0;
}
 
.dropdown-content a {
  color: var(--text-body);
  padding: 11px 18px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  display: block;
  border: none;
  border-left: 3px solid transparent;
  transition: background .14s, border-color .14s;
  text-decoration: none;
  border-radius: 0;
}
 
.dropdown-content a:hover {
  background: #f4f4ee;
  border-left-color: var(--accent-gold);
}
 
/* Show on hover (desktop) */
.dropdown:hover .dropdown-content { display: block; }
 
/* Show class used by JS onclick fallback */
.show { display: block; }
.hidelinks { display: none; }
 
/* ── Hamburger button (hidden on desktop) ── */
.sidenavbtn {
  display: none;
  align-items: center;
  justify-content: center;
  height: var(--nav-h);
  overflow: hidden;         /* clip the inline font-size:15vw span */
  flex-shrink: 0;
}
 
/* Force the inline-styled ☰ span to fit inside the bar no matter what */
.sidenavbtn span {
  font-size: clamp(20px, 4vw, 36px) !important;
  line-height: 1;
}
 
/* ── Mobile slide-out drawer (hidden on desktop) ── */
.sidenav {
  display: none;
}
 
/* ================================================================
   PAGE LAYOUT
   ================================================================ */
.container {
  display: flex;
  gap: 22px;
  padding: 26px 26px 40px;
  background-color: var(--gray-header);
  background-image: url("/assets/Clouds.webp");
  background-repeat: no-repeat;
  background-size: cover;
  justify-content: center;
  align-items: flex-start;
  min-height: calc(100vh - var(--nav-h));
}
 
.containerBottom {
  display: block;
  padding: 40px clamp(20px, 22%, 22%);
  background-image: url("/assets/Grass.webp");
  background-repeat: no-repeat;
  background-size: cover;
}
 
.containerBottom form input    { width: 100%; }
.containerBottom form textarea { width: 100%; }
 
.contactleft {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
 
/* ── Main content panel ── */
main {
  background-color: var(--cream);
  border: 1px solid var(--border-card);
  border-radius: var(--r-lg);
  padding: 24px 26px 32px;
  flex: 1 1 0;
  min-width: 0;
  max-width: 480px;          /* prevents main from stretching too wide */
  box-shadow: var(--sh-xs);
}
 
main > h1 {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--cream-dark);
}
 
/* ── .words is used as a text container in blog articles ── */
.words {
  text-align: left;
  margin: 0 30px;
}
 
/* The <column> custom element wrapping signup + aside */
column {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-shrink: 0;
  width: var(--sidebar-w);
  gap: 0;
}
 
/* ── Aside / credit card panel ── */
aside {
  background-color: var(--gray-aside);
  border: 1px solid var(--border-card);
  border-radius: var(--r-lg);
  text-align: center;
  margin: 0 10px;
  padding: 18px 14px 22px;
  box-shadow: var(--sh-xs);
}
 
aside > h2 {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid rgba(0,0,0,.12);
  padding-bottom: 10px;
  margin-top: 0;
  margin-bottom: 14px;
}
 
/* ── Sign-up widget ── */
.signup {
  background-color: var(--gray-aside);
  border: 1px solid var(--border-card);
  border-radius: var(--r-lg);
  text-align: center;
  margin: 0 10px 18px;
  padding: 18px 14px;
  box-shadow: var(--sh-xs);
}
 
.signup > h2 {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid rgba(0,0,0,.12);
  padding-bottom: 10px;
  margin-top: 0;
  margin-bottom: 14px;
}
 
/* ================================================================
   ARTICLE CARDS  (index / front page)
 
   HTML per card:
     <article>
       <div class="words">
         <a href="..."><img src="..." alt="..."></a>   ← thumbnail link
         <h2><a href="...">Title</a></h2>
         <p class="post-meta">Date by Author</p>
       </div>
     </article>
 
   .words becomes a horizontal flex row.
   The thumbnail <a> gets a fixed size slot so all images are uniform.
   ================================================================ */
 
article {
  border-radius: var(--r-md);
  background-color: var(--white);
  border: 1px solid var(--border-card);
  padding: 0;
  margin-bottom: 14px;
  overflow: hidden;
  transition: box-shadow .25s ease, transform .25s ease;
}
 
article:hover {
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
}
 
/* Override the general .words rule for article cards */
article .words {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin: 0;
  text-align: left;
}

/* ── Fixed-size thumbnail slot ── */
article .words > a:first-child {
  display: block;
  flex: none;
  width: 100%;
  height: var(--card-img-h);
  overflow: hidden;
  border-radius: var(--r-md) var(--r-md) 0 0;
  background: var(--white);
}
 
article .words > a:first-child > img {
  width: 100%;
  height: 100%;
  object-fit: contain;       /* contain keeps logos uncropped */
  object-position: center;
  display: block;
  transition: transform .38s ease;
}
 
article:hover .words > a:first-child > img {
  transform: scale(1.05);
}
 
/* ── Text column: title + meta ── */
article .words > h2 {
  flex: none;
  align-self: auto;
  padding: 16px 20px 4px;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(15px, 1.7vw, 20px);
  font-weight: 700;
  line-height: 1.32;
  text-align: center;
}
 
article .words > h2 > a {
  text-decoration: none;
  color: var(--text-body);
  display: block;
  margin-bottom: 8px;
  transition: color .18s;
}
 
article .words > h2 > a:hover { color: #555; }
 
/* post-meta is a sibling of h2 inside .words (same flex row).
   Pin it to the right edge, vertically centered. */
article .words > p.post-meta {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0;
  padding: 4px 20px 16px;
  white-space: nowrap;
  align-self: auto;
  flex-shrink: 0;
  text-align: center;
}
 
/* ================================================================
   BLOG ARTICLE PAGE  (Delta.html / article detail pages)
   .words here is a plain text-content block — override the flex.
   ================================================================ */
.blogArticle .words {
  display: block;
  margin: 0 30px;
}
 
.blogArticle .words img {
  width: 100%;
  height: auto;
  display: block;
}
 
.blogArticle .words h1 { margin-bottom: 0; }
 
.blogArticle {
  border: 1px solid var(--border-card);
  border-radius: var(--r-lg);
  background-color: var(--white);
  padding: 38px 48px 52px;
  width: 800px;
  max-width: 100%;
  box-shadow: var(--sh-xs);
}
 
/* Divider before each major section heading inside articles */
.blogArticle h2 {
  margin-top: 40px;
  padding-top: 14px;
  border-top: 1px solid #ece8df;
}
 
.dateHeading { font-size: 15px; }
 
.indent1 {
  padding-left: 4em;
  text-indent: -2em;
  font-size: 18px;
}
 
/* ================================================================
   CREDIT CARD SIDEBAR CARDS
   ================================================================ */
.cardEntry {
  position: relative;
  margin-bottom: 11px;
  border: 1px solid rgba(0,0,0,.07);
  border-radius: var(--r-md);
  background: var(--white);
  text-align: center;
  padding: 12px 10px 10px;
  transition: box-shadow .22s ease, transform .22s ease;
}
 
.cardEntry:hover {
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
}
 
.cardEntry a {
  text-decoration: none;
  color: var(--text-body);
  display: block;
}
 
/* Uniform card image heights */
.cardEntry img {
  display: block;
  width: 100%;
  height: 72px;
  object-fit: contain;
  object-position: center;
  margin: 0 auto 8px;
}
 
.cardEntry h3 {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-body);
  margin: 0 0 4px;
}
 
.cardEntry h4 {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  color: var(--green-text);
  background: var(--green-badge);
  border-radius: 6px;
  padding: 3px 9px;
  margin: 4px auto 0;
  display: inline-block;
  letter-spacing: .02em;
}
 
/* ================================================================
   TABLE OF CONTENTS  (sticky sidebar on article pages)
   ================================================================ */
.toc {
  position: sticky;
  top: calc(var(--nav-h) + 14px);
  align-self: start;
  display: block;
  border: 1px solid var(--border-card);
  border-radius: var(--r-lg);
  background-color: var(--gray-toc);
  padding: 16px 18px 20px;
  margin-bottom: 20px;
  min-width: 190px;
  max-width: 225px;
  max-height: calc(100vh - var(--nav-h) - 40px);
  overflow-y: auto;
  box-shadow: var(--sh-xs);
}
 
.toc > h3 {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,0,0,.12);
}
 
.toc ul { margin: 0; padding-left: 0; }
 
.toc ul li {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  list-style: none;
  text-indent: 0;
  padding-left: 0;
  margin: 0;
  line-height: 1.5;
}
 
.toc ol { padding-left: 14px; }
 
.toc ol li {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  margin: 0;
  text-indent: 0;
  padding-left: 0;
  line-height: 1.5;
}
 
.toc a {
  color: var(--text-body);
  text-decoration: none;
  display: block;
  padding: 3px 0;
  transition: color .14s, padding-left .14s;
}
 
.toc a:hover {
  color: #444;
  padding-left: 3px;
}
 
.toc li.active > a {
  color: rgb(126,126,126);
  font-weight: 600;
}
 
/* ================================================================
   CREDIT CARD COMPARISON TABLE
   ================================================================ */
table {
  border-collapse: collapse;
  margin-top: 20px;
  width: 100%;
  table-layout: fixed;
  font-family: var(--font-ui);
  font-size: 15px;
  border-radius: var(--r-sm);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}
 
th, td {
  border: 1px solid #d5d5d5;
  padding: 12px 14px;
  vertical-align: top;
  line-height: 1.55;
}
 
th {
  background: var(--gray-header);
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
 
th a { text-decoration: none; color: darkblue; }
 
td:first-child { width: 30%; }
 
td:first-child img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
}
 
/* ================================================================
   TABLET  (600px – 992px)
   Two-column layout collapses to single column.
   Article images stay as a horizontal row but shrink.
   Sidebar moves below main content.
   ================================================================ */
@media (max-width: 992px) and (min-width: 601px) {
 
  /* ── Nav ── */
  header {
    padding: 0 18px;
    justify-content: flex-start;
    position: relative;
    height: 62px;
  }

  header > a {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
  }
 
  header > a > img,
  header img {
    height: 50px;
    max-width: 180px;
  }

/* ── Mobile/tablet slide-out drawer (hidden on desktop) ── */
.sidenav {
  display: block;
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 500;
  top: 0;
  left: 0;
  background-color: #c5c5c5;
  overflow-x: hidden;
  transition: width .3s ease;
}

.sidenav .closebtn {
  font-size: 42px;
  margin-left: 0;
  z-index: 1;
  background-color: #c5c5c5;
  margin-bottom: 40px;
  border: none;
  cursor: pointer;
}

.sidenav .dropbtn {
  background-color: #c5c5c5;
  text-decoration: none;
  font-size: 28px;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 20px;
  border: none;
  cursor: pointer;
}

.sidenav .dropdown {
  display: block;
  text-align: center;
  align-items: center;
}

.sidenav .sub-menu a {
  text-decoration: none;
  font-size: 24px;
}

.sidenav .sub-menu {
  display: grid;
  grid-template-rows: 0fr;
  transition: 300ms ease-in-out;
}

.sidenav .sub-menu > div { overflow: hidden; }
.sidenav .sub-menu.show  { grid-template-rows: 1fr; }

.sidenav ul li { list-style: none; }

.sidenav > ul > li:first-child {
  display: flex;
  justify-content: flex-end;
  padding-right: 20px;
  margin-bottom: 16px;
}
    
  /* Hide desktop dropdowns, show hamburger */
  nav .dropdown { display: none; }
  .sidenavbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0;
    height: 62px;
    min-width: 44px;
    z-index: 1;
  }
  .sidenavbtn span {
    font-size: clamp(20px, 3.5vw, 32px) !important;
    line-height: 1;
  }
 
  /* ── Layout: single column, side-by-side panels ── */
  .container {
    display: flex;
    flex-direction: column;
    padding: 16px 18px 32px;
    gap: 18px;
    align-items: center;
  }

  main {
    padding: 20px 22px 28px;
    border-radius: var(--r-md);
    width: 100%;
    max-width: 500px;
  }
 
  /* Sidebar row: signup + aside sit side by side on tablet */
  column {
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 620px;
    gap: 16px;
    align-items: flex-start;
  }
 
  .signup { display: none; }
 
  aside {
    flex: 2;
    margin: 0;
    border-radius: var(--r-md);
    /* Cap how tall the aside gets; scroll internally */
    max-height: 480px;
    overflow-y: auto;
  }
 
 
  article .words > h2 {
    font-size: 17px;
    padding: 12px 16px 8px;
  }
 
  article .words > p.post-meta { display: none; } /* too cramped at this size */
 
  /* Blog article */
  .blogArticle {
    padding: 24px 28px 36px;
    width: 100%;
    border-radius: var(--r-md);
  }
 
  .blogArticle .words { margin: 0 10px; }
 
  /* TOC hidden at tablet */
  .toc { display: none; }
 
  .description { display: none; }
 
  ul li, ol li { text-indent: 0; padding-left: 0; }
}
 
/* ================================================================
   MOBILE  (≤ 600px)
   Full single-column stacked layout.
   Article images go full-width above the title.
   ================================================================ */
@media (max-width: 600px) {
 
  /* ── Nav ── */
  header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    padding: 0 12px;
    height: 56px;
  }
 
  header > a {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
  }
 
  header > a > img,
  header img {
    height: 44px;
    max-width: 160px;
    width: auto;
  }
 
  nav { flex: none; }
  nav > a { padding: 0; }
  nav .dropdown { display: none; }
 
  .sidenavbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0;
    height: 56px;
    min-width: 44px;
    z-index: 1;
  }
 
  .sidenavbtn span {
    font-size: clamp(18px, 6vw, 28px) !important;
    line-height: 1;
  }
 
  /* ── Layout ── */
  .container {
    display: block;
    padding: 10px 10px 24px;
  }
 
  main {
    margin-left: 0;
    border-radius: var(--r-md);
    padding: 14px 12px 18px;
  }
 
  main > h1 { font-size: 9px; letter-spacing: .18em; }
 
  column {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0;
  }
 
  aside {
    width: 100%;
    margin: 14px 0 0;
    padding: 12px 10px;
    border-radius: var(--r-md);
  }
 
  .signup { display: none; }
 
  .containerBottom { padding: 20px 14px; }
  .containerBottom .contactleft { width: 100%; }
 
  /* ── Article cards: stacked ── */
  article {
    display: block;
    width: 100%;
    margin: 0 0 12px;
    border-radius: var(--r-md);
  }
 
  article .words {
    display: block;
    margin: 0;
  }
 
  /* Full-width image at top */
  article .words > a:first-child {
    display: block;
    width: 100%;
    height: 190px;
    flex: none;
    border-radius: var(--r-md) var(--r-md) 0 0;
    background: var(--white);
  }
 
  article .words > h2 {
    padding: 14px 16px 4px;
    margin: 0;
    font-size: 18px;
    align-self: auto;
  }
 
  article .words > p.post-meta {
    display: block;
    padding: 2px 16px 14px;
    white-space: normal;
    align-self: auto;
  }
 
  .description { display: none; }
 
  /* ── Blog article ── */
  .blogArticle {
    padding: 16px 14px 24px;
    width: 100%;
    border-radius: var(--r-md);
  }
 
  .blogArticle .words { margin: 0; }
 
  /* ── TOC hidden on mobile ── */
  .toc { display: none; }
 
  /* ── Lists ── */
  ul li, ol li { text-indent: 0; padding-left: 0; }
 
  /* ── Sidenav drawer ── */
  .sidenav {
    display: block;
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 500;
    top: 0;
    left: 0;
    background-color: #c5c5c5;
    overflow-x: hidden;
    transition: width .3s ease;
  }
 
  .sidenav .closebtn {
    font-size: 42px;
    margin-left: 0;
    z-index: 1;
    background-color: #c5c5c5;
    margin-bottom: 40px;
    border: none;
    cursor: pointer;
  }
 
  .sidenav .dropbtn {
    background-color: #c5c5c5;
    text-decoration: none;
    font-size: 28px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 20px;
    border: none;
    cursor: pointer;
  }
 
  .sidenav .dropdown {
    display: block;
    text-align: center;
    align-items: center;
  }
 
  .sidenav .sub-menu a {
    text-decoration: none;
    font-size: 24px;
  }
 
  .sidenav .sub-menu {
    display: grid;
    grid-template-rows: 0fr;
    transition: 300ms ease-in-out;
  }
 
  .sidenav .sub-menu > div { overflow: hidden; }
  .sidenav .sub-menu.show  { grid-template-rows: 1fr; }
 
  .sidenav ul li { list-style: none; }
 
  .sidenav > ul > li:first-child {
    display: flex;
    justify-content: flex-end;
    padding-right: 20px;
    margin-bottom: 16px;
  }
 
  /* ── Misc mobile fixes ── */
  .cardEntry img { width: 80%; height: auto; }
 
  aside h2    { font-size: 30px; }
  .cardEntry h3 { font-size: 20px; }
  .dateHeading  { font-size: 10px; }
 
  h1 { font-size: 36px; }
  h2 { font-size: 28px; }
 
  .words { margin: 0 10px; }
 
  .hide { display: none; }
 
  .blogArticle {
    margin-bottom: 10px;
    width: 95%;
  }
}