/* ============================================================
   site.css — SWC blog. Self-contained, no WP theme inheritance.
   Palette: navy #17335b, blue #1c57a7, green #116201,
            body text #484b50.
   Fonts: Lora (body + most headings), TrajanProBold reserved for
          masthead only.
   ============================================================ */

/* Self-hosted Inter + Lora (latin + latin-ext woff2). No external font CDN. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-400-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-400-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-500-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-500-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-600-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-600-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/inter-700-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/inter-700-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Lora';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/lora-400-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Lora';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/lora-400-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Lora';font-style:italic;font-weight:700;font-display:swap;src:url('../fonts/lora-700-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Lora';font-style:italic;font-weight:700;font-display:swap;src:url('../fonts/lora-700-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Lora';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/lora-400-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Lora';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/lora-400-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Lora';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/lora-500-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Lora';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/lora-500-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Lora';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/lora-700-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Lora';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/lora-700-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

@font-face {
  font-family: 'TrajanProBold';
  src: url('../fonts/trajanpro-bold-webfont.woff') format('woff'),
       url('../fonts/trajanpro-bold-webfont.ttf')  format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

html {
  height: 100%;
  background: #4f4f4f;
}
body {
  margin: 0;
  padding: 0;
  font-family: 'Lora', Georgia, serif;
  font-size: 16px;
  line-height: 1.6;
  color: #484b50;
  /* White fallback if the granite tile fails to load */
  background:
    url('../site-images/leafbg.png') no-repeat center 130px,
    url('../site-images/bodybg.jpg') repeat center top,
    #fff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.page-wrap { flex: 1; }    /* push footer to bottom on short pages */

a { color: #1c57a7; text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;   /* headings = Inter */
  font-weight: 600;
  color: #1c57a7;
  margin: 0 0 .6em;
  letter-spacing: -0.2px;
}
h1 { font-size: 28px; }
h2 { font-size: 21px; }
h3 { font-size: 18px; }
h5 { color: #116201; }


/* =========================  EYEBROW  ========================
   Single banner "hanging off the top" — slightly rounded bottom
   corners, centered, sitting flush at viewport top.
   Muted color so it doesn't shout against the granite bg.
   ============================================================ */
/* WCU-style eyebrow: individual flush buttons, each with translucent
   wash (gray here, brown on WCU). Hover = same color, more opaque.
   Outer corners rounded on first/last only. No gap between buttons. */
.eyebrow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 0;                        /* flush against each other */
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
}
.eyebrow a {
  display: block;
  width: 150px;
  padding: 8px 6px;
  text-align: center;
  background: rgba(60, 60, 60, 0.30);
  color: #fff;
  font-size: 11px;
  text-transform: none;
  letter-spacing: .3px;
  line-height: 1;
  text-decoration: none;
  transition: background .12s ease;
}
.eyebrow a:hover,
.eyebrow a:focus {
  background: rgba(60, 60, 60, 0.50);
  color: #fff;
  text-decoration: none;
}
/* round outer corners only — keep inner edges flush */
.eyebrow a:first-of-type { border-bottom-left-radius: 8px; }
.eyebrow a:last-of-type  { border-bottom-right-radius: 8px; }
.eyebrow .dot { display: none; }   /* no dots between flush buttons */

/* Mobile eyebrow list — hidden by default, only shows when the
   hamburger menu is open on mobile. */
.main-nav .mobile-eyebrow { display: none; }
.mobile-eyebrow-heading {
  padding: 12px 18px 4px;
  font-size: 11px;
  color: #c8d4e6;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-top: 1px solid #0a2345;
  margin-top: 8px;
}


/* =========================  HEADER  =========================
   Header granite (headertopbg.jpg) tiles in both directions so it
   fills the whole header area. The eyebrow zone above uses the
   SAME background, so the granite flows seamlessly from the top
   of the viewport through the bottom of the masthead. White is
   the fallback if the image fails to load.
   ============================================================ */
.eyebrow-zone,
.site-header {
  background: url('../site-images/headertopbg.jpg') repeat center top, #fff;
}
.eyebrow-zone {
  display: flex;
  justify-content: center;
}
.site-header {
  border-bottom: 1px solid #d8d3c5;
}
.site-header .wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: 14px 12px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
}
.site-header .logo img { display: block; }
.site-header .branding {
  text-align: center;
}
.site-header .branding .name {
  font-family: 'Lora', Georgia, serif;
  font-size: 33px;
  font-weight: 700;
  color: #17335b;
  letter-spacing: 0.5px;
}
.site-header .branding .tag {
  font-size: 12px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 4px;
}
.site-header .search input {
  padding: 7px 10px;
  border: 1px solid #c8c4b8;
  border-radius: 4px;
  font-size: 13px;
  width: 200px;
}


/* =========================  MAIN NAV  =======================
   Sticky to top on scroll. On mobile collapses to hamburger.
   ============================================================ */
.main-nav {
  background: #17335b;
  position: sticky;
  top: 0;
  z-index: 100;
}
.main-nav .wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
}

/* Hamburger toggle (mobile only) */
.nav-toggle { display: none; }       /* hidden checkbox */
.nav-burger {
  display: none;                     /* hidden on desktop */
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
}
.nav-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  margin: 5px 0;
  transition: transform .2s ease, opacity .2s ease;
}

.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}
.main-nav > .wrap > ul > li {
  position: relative;
}
.main-nav > .wrap > ul > li > a {
  display: block;
  padding: 13px 22px;
  color: #fff;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-right: 1px solid #0a2345;
}
.main-nav > .wrap > ul > li > a:hover,
.main-nav > .wrap > ul > li:hover > a,
.main-nav > .wrap > ul > li.current > a { background: #1c57a7; }
/* Nav links use the blue-background hover — never the global underline
   (which otherwise reads as a stray line/"border" under the item). */
.main-nav a:hover { text-decoration: none; }

.main-nav .sub {
  position: absolute;
  top: 100%;
  left: 0;
  background: #17335b;
  min-width: 220px;
  flex-direction: column;
  display: none;
  z-index: 200;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.main-nav > .wrap > ul > li:hover > .sub,
.main-nav > .wrap > ul > li:focus-within > .sub { display: flex; }
.main-nav .sub li a {
  display: block;
  padding: 10px 16px;
  color: #fff;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 13px;
  border-top: 1px solid #0a2345;
  text-decoration: none;
}
.main-nav .sub li a:hover { background: #1c57a7; }


/* =========================  BREADCRUMBS  ==================== */
.crumbs {
  background: #eef3f9;
  border-bottom: 1px solid #d9e2ec;
}
.crumbs .wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: 7px 12px;
  font-size: 12px;
  color: #555;
}


/* =========================  LAYOUT  =========================
   Header / nav / footer go EDGE-TO-EDGE.
   Main content sits in a centered ~1024px white "card" on the
   granite body bg, so the leafbg behind it shows on the sides.
   ============================================================ */
.page-wrap {
  background: #fff;
  width: 100%;                /* fill (capped at max-width) — without this the
                                 column-flex + margin:auto makes it shrink-to-fit
                                 its content, narrowing short pages like /archive/ */
  max-width: 1000px;          /* match the nav/header/page content width so the
                                 white card edge aligns with the Home nav button */
  margin: 0 auto;
  box-shadow: 0 0 24px rgba(0,0,0,.12);
}

.page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 22px 32px 50px;
}
.content { min-width: 0; }       /* keep grid item from overflowing */
.sidebar { min-width: 0; }

/* Single-column layout for article / list pages — full page width */
.single-col { max-width: 100%; margin: 0; }

/* h3 gets the subtle subheading underline from the theme */
.content h3 {
  background: url('../site-images/subheadingbg.png') no-repeat left bottom;
  padding: 0 0 8px;
}


/* =========================  HOMEPAGE  =======================
   MOBILE-FIRST. Per user spec:
   - tight rows (no wasted vertical space)
   - title FIRST, full-width
   - then thumb (small, left) + excerpt (right of thumb)
   - sidebar hidden entirely on mobile (categories live in the nav)
   ============================================================ */

.page-h1 {
  font-size: 22px;
  color: #1c57a7;
  margin: 0 0 14px;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-weight: 800;
  letter-spacing: 0.2px;
}

.top-zone {
  display: block;     /* mobile: just stack everything */
}
.top-zone .sidebar { display: none; }   /* mobile drops the sidebar */

/* Shared mobile card style — applied to BOTH .card-row and .card.
   Title is full-width, then thumb + excerpt in a 2-col row beneath. */
.card-row,
.card {
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #e8e3d3;
}
.card-row:last-child,
.card:last-child { border-bottom: 0; }
/* belt + suspenders: kill any extra space above the meta line */
.card-row .meta,
.card .meta { margin-top: 0; padding-top: 0; }

.card-row h2 {
  font-size: 16px;
  margin: 0;
  padding: 0;
  line-height: 1.15;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-weight: 600;
}
.card h3 {
  font-size: 15px;          /* grid card titles */
  margin: 0 0 2px;
  line-height: 1.22;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-weight: 600;
}
.card-row h2 a,
.card h3 a {
  color: #1c57a7;
  text-decoration: none;
}
.card-row h2 a:hover,
.card h3 a:hover { text-decoration: underline; }

.card-row .meta,
.card .meta {
  color: #888;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 11px;
  margin: 0 0 6px;
}
.card-row .meta a,
.card .meta a { color: #1c57a7; }

/* Body row: thumb left, excerpt right */
.card-row .body,
.card .body {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  align-items: start;
}
.card-row .thumb img,
.card .thumb img {
  display: block;
  width: 110px;
  height: 80px;
  object-fit: contain;
  border-radius: 3px;
  border: 1px solid #f5f5f5;
  background: #fff;
}
.card-row .excerpt,
.card .excerpt {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.45;
  color: #555;
}

/* Placeholder thumbnail (posts with no image): a muted site logo on a light
   brand tint, so the card stays uniform without faking a photo. */
.thumb-ph { background: #efefef !important; }
.thumb-ph img {
  object-fit: contain !important;
  opacity: 0.67;
  padding: 14% 18%;
  mix-blend-mode: multiply;
}
.card-row .more {
  color: #116201;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-weight: 600;
  font-size: 14px;
}

.grid-zone {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #d8d2bf;
  /* Responsive: fills as many ~210px columns as fit, stepping 4→3→2→1 by
     width. At the ~936px page content width this yields 4 columns; 3 holds
     down to ~670px, so 2 only appears once 3 genuinely can't fit. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 20px;
}

.archive-link {
  margin-top: 20px;
  padding: 12px;
  background: #f6f3e8;
  border-radius: 4px;
  text-align: center;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 13px;
}
.archive-link a { font-weight: bold; }


/* ----- Tablet 820+ : sidebar comes back, top-3 get bigger feature treatment ----- */
@media (min-width: 820px) {
  .page-h1 { font-size: 22px; }

  .top-zone {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 30px;
  }
  .top-zone .sidebar { display: block; }

  /* Top-3 cards — total height ~800px to match sidebar (260×3 + gaps) */
  .card-row {
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid #e2dccb;
  }
  .card-row h2 { font-size: 20px; line-height: 1.27; margin: 0; }
  .card-row .meta { font-size: 12px; margin: 1px 0 8px; }
  .card-row .excerpt { font-size: 15px; }
  .card-row .body {
    grid-template-columns: 200px 1fr;
    gap: 18px;
    align-items: stretch;
  }
  .card-row .thumb {
    width: 200px;
    min-height: 200px;
    height: 100%;
    border: 1px solid #f5f5f5;
    border-radius: 3px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .card-row .thumb img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border: 0;
    background: transparent;
  }

  /* Bottom grid column-count is handled responsively in the base .grid-zone
     rule (auto-fit), so no fixed 2-col override here. */
  .card { border-bottom: 0; margin-bottom: 0; }
  .card .body {
    grid-template-columns: 1fr;
  }
  .card .thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 240px;                   /* tighter, narrower image area */
    margin: 0 auto 10px;
    aspect-ratio: 4 / 3;
    border: 1px solid #f5f5f5;
    border-radius: 3px;
    background: #fff;
    overflow: hidden;
  }
  .card .thumb img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border: 0;
    background: transparent;
  }
  .card .excerpt { font-size: 13px; }
}

/* ----- Desktop 1024+ ----- */
@media (min-width: 1024px) {
  /* grid-zone column count is responsive (auto-fit in the base rule) */
  .card .thumb { max-width: 180px; }
}


/* =========================  ARTICLE  ======================== */
.article .title {
  font-size: 26px;
  line-height: 1.2;
  margin: 0 0 6px;
  color: #1c57a7;
}
.article .meta {
  font-size: 12px;
  color: #888;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e2dccb;
}
.article .meta a { color: #1c57a7; }
/* WP behavior: featured image is NOT shown on single post pages.
   It only appears on list pages (homepage, archive, category).
   Body images in the post handle themselves below. */

/* ----- Article body typography ----- */
/* Use flow-root so floated images are contained within the body and
   subsequent paragraphs continue wrapping around them (until the float
   naturally clears). Replaces the old "clear floats after every paragraph"
   pattern that broke wrap behavior. */
.article .body { display: flow-root; }

.article .body p { margin: 0 0 1em; }
/* Inside an h-tag, inline tags inherit the heading color BUT keep their
   own bold (browser default strong = bold). That way <h5><strong>X</strong></h5>
   shows the inner strong as visibly bolder than the surrounding h5 text. */
.article .body h1 strong, .article .body h2 strong, .article .body h3 strong,
.article .body h4 strong, .article .body h5 strong, .article .body h6 strong,
.article .body h1 b, .article .body h2 b, .article .body h3 b,
.article .body h4 b, .article .body h5 b, .article .body h6 b {
  color: inherit;
}
/* hr separator */
.article .body hr {
  border: 0;
  border-top: 1px solid #d8d2bf;
  margin: 0.3em auto;
  max-width: 100%;
}
/* No special collapse rules for hr around tip — the hr's own 0.3em
   margin provides symmetric spacing on both sides of the tip box. */
/* Original-theme heading classes used in old swords-series posts */
.article .body h4.tip {
  display: flex;
  align-items: center;
  justify-content: flex-start;       /* left-aligned text */
  min-height: 28px;
  font-size: 14px;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-weight: normal;
  text-align: left;
  letter-spacing: 0.2px;
  line-height: 1.2;
  background: #f1eed8;
  padding: 2px 12px;
  border-left: 3px solid #c8a91f;
  border-radius: 3px;
  margin: 0;
}
/* Note: switched off Trajan here because TrajanProBold is a single-weight
   font file — font-weight has no visual effect with Trajan, so the inner
   <strong> wouldn't render bolder than the surrounding text. Inter has
   400/500/600/700/800 weights loaded, so the contrast shows. */
.article .body h5.sub {
  font-size: 18px;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-weight: 500;
  color: #1c57a7;
  letter-spacing: 0.2px;
  line-height: 1.4;
  margin: 0.6em 0 0.5em;
}
.article .body h5.sub strong { font-weight: 800; }
/* Tight: when an h5.sub follows another or h2, snug it up */
.article .body h2 + h5.sub,
.article .body h5.sub + h5.sub { margin-top: 0.2em; }
.article .body h2 {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #1c57a7;
  margin: 0.8em 0 0.3em;
  letter-spacing: -0.2px;
}
/* h3 styled like the original WP theme: subheadingbg.png graphic + Trajan */
.article .body h3 {
  font-family: 'TrajanProBold', 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 17px;
  font-weight: normal;
  color: #1c57a7;
  letter-spacing: 0.2px;        /* Trajan benefits from extra tracking */
  background: url('../site-images/subheadingbg.png') no-repeat left bottom;
  line-height: 35px;
  padding: 0 0 0 10px;
  margin: 1.4em 0 0.2em;
}
/* When a strong-label paragraph follows an h3, snug it up further */
.article .body h3 + p { margin-top: 0; }
.article .body h4 {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #116201;
  margin: 1.2em 0 0.3em;
}
/* Lists — tight, compact. Original WP authors padded with <br> tags
   that the build strips, leaving lists looking clean by default. */
.article .body ul,
.article .body ol {
  margin: 0.4em 0 0.8em;
  padding-left: 26px;
}
.article .body li {
  margin: 0;
  padding: 1px 0;
  line-height: 1.45;
}
.article .body li > p {
  margin: 0;                   /* p inside li has no extra gap */
}
.article .body li > ul,
.article .body li > ol {
  margin: 0.2em 0 0.2em;       /* nested lists tighten further */
}
/* Defeat a trailing <br> that frequently follows a </li> in old WP */
.article .body li br:last-child { display: none; }
.article .body blockquote {
  margin: 1.2em 0;
  padding: 6px 14px;
  border-left: 3px solid #c8c4b8;
  color: #666;
  font-style: italic;
}
.article .body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2em 0;
  font-size: 14px;
}
.article .body table th,
.article .body table td {
  border: 1px solid #ddd;
  padding: 6px 10px;
  text-align: left;
}
.article .body table th { background: #eef3f9; color: #1c57a7; }
.article .body strong { color: #2a2a2a; }
/* Strong INSIDE a link inherits link color AND drops bold weight
   (most cases are editing mistakes — bold on link text is rarely intentional). */
.article .body a strong,
.article .body a:hover strong { color: inherit; font-weight: normal; }
/* Force Lora for italic + bold combos so the browser can't fall back to
   a synthesized bold-italic glyph (which renders visibly different). */
.article .body i,
.article .body em,
.article .body strong i,
.article .body strong em,
.article .body i strong,
.article .body em strong {
  font-family: 'Lora', Georgia, serif;
}

/* ----- Images -----
   Cap body images at 660px (matches the original WP theme's content
   column width). alignleft / alignright / aligncenter classes still
   override positioning.
*/
.article .body img {
  display: block;
  max-width: 660px;
  width: auto;
  height: auto;
  margin: 14px auto;
  border-radius: 3px;
  border: 1px solid #ddd;
}
/* Legacy <center> element (still in old WP posts) */
.article .body center { display: block; text-align: center; margin: 14px 0; }
.article .body center img { display: inline-block; }
/* EWC download button images — inline, no border, smaller cap */
.article .body img.downloadbtnlarge,
.article .body img[src*="button-digital"],
.article .body img[src*="button-physical"] {
  display: inline-block;
  max-width: 280px;
  margin: 8px;
  border: 0;
  vertical-align: middle;
}
/* Figures (wp-block-image and similar): cap size — but NOT galleries */
.article .body figure.wp-block-image,
.article .body figure:not(.wp-block-gallery) {
  max-width: 660px;
  margin: 14px auto;
}
.article .body figure.wp-block-image img,
.article .body figure:not(.wp-block-gallery) img {
  max-width: 100%;
}
/* Galleries stay full-width to fit their grid */
.article .body figure.wp-block-gallery { max-width: none; margin: 1.4em 0; }
.article .body .blocks-gallery-item figure { max-width: none; margin: 0; }

/* Classic-editor [caption] shortcode (rendered as <figure class="wp-caption">) */
.article .body figure.wp-caption {
  max-width: 300px;
  margin: 6px 0;
  padding: 4px;
  background: #f4f3ef;
  border: 1px solid #e2dccb;
  border-radius: 3px;
  text-align: center;
}
.article .body figure.wp-caption.alignright { float: right; margin: 4px 0 8px 16px; }
.article .body figure.wp-caption.alignleft  { float: left;  margin: 4px 16px 8px 0; }
.article .body figure.wp-caption.aligncenter { margin: 14px auto; }
.article .body figure.wp-caption img { display: block; margin: 0 auto; width: 100%; height: auto; border: 0; }
.article .body figure.wp-caption figcaption {
  font-size: 12px;
  color: #555;
  padding: 6px 4px 2px;
  line-height: 1.35;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
}

/* Responsive 16:9 video embed (from [youtube] shortcode) */
.article .body .video-embed {
  max-width: 660px;
  margin: 1.4em auto;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 3px;
}
.article .body .video-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ----- WCI review (Product Reviews 3rd Party) specific tweaks -----
   The last image (the product cover) is centered at natural size,
   capped at the body width. Override any alignleft/alignright float
   the author might have applied. */
.wci-review .body a.cover-image {
  display: block;
  text-align: center;
  float: none;
  margin: 18px 0;
}
.wci-review .body a.cover-image img {
  max-width: 100%;
  width: auto;
  float: none;
  margin: 0 auto;
}
/* WP image alignment classes */
.article .body img.aligncenter,
.article .body .aligncenter,
.article .body figure.aligncenter { display: block; margin: 18px auto; }
.article .body img.alignleft,
.article .body .alignleft   { float: left;  margin: 4px 16px 8px 0; }
.article .body img.alignright,
.article .body .alignright  { float: right; margin: 4px 0 8px 16px; }
.article .body img.alignnone,
.article .body .alignnone   { display: inline-block; vertical-align: top; margin: 18px 10px 18px 0; }

.article .body figure {
  margin: 18px 0;
  text-align: center;
}
.article .body figure img { margin: 0 auto; }
.article .body figcaption {
  font-size: 12px;
  color: #777;
  text-align: center;
  margin-top: 6px;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
}

/* (formerly cleared floats per-paragraph — removed because it broke text
   wrapping around floated images across paragraph boundaries.
   `.article .body { display: flow-root }` above contains floats instead.) */

/* ----- WordPress gallery (Gutenberg .wp-block-gallery) ----- */
.article .body .wp-block-gallery {
  margin: 1.4em 0;
  padding: 0;
  list-style: none;
}
.article .body .blocks-gallery-grid,
.article .body .wp-block-gallery > ul {
  display: grid;
  /* Responsive: fits as many ~165px tiles as the width allows, so galleries
     step 5 → 3 → 2 → 1 by screen size. Replaces the old fixed columns-N
     grids (the columns="N" author setting is no longer authoritative —
     space utilization wins, per request). */
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.article .body .blocks-gallery-item {
  margin: 0;
  padding: 0;
  list-style: none;
}
.article .body .blocks-gallery-item figure {
  margin: 0;
  background: #f4f3ef;
  border: 1px solid #e2dccb;
  border-radius: 3px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.article .body .blocks-gallery-item a {
  display: block;
  background: #fff;
}
.article .body .blocks-gallery-item img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: contain;
  border: 0;
  border-radius: 0;
}
.article .body .blocks-gallery-item__caption {
  padding: 6px 8px;
  font-size: 11px;
  line-height: 1.35;
  color: #555;
  text-align: center;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  background: #f4f3ef;
}

/* Gallery responsive collapse */
@media (max-width: 819px) {
  .article .body .blocks-gallery-grid,
  .article .body .wp-block-gallery > ul {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
  }
  .article .body .blocks-gallery-item img { height: 130px; }
}

/* ----- Lightbox (JS-driven) ----- */
.article .body a.img-zoom {
  cursor: zoom-in;
  display: block;            /* full width so block-image margin:auto centers */
  text-align: center;
}
.article .body a.img-zoom:hover img { box-shadow: 0 2px 8px rgba(0,0,0,.2); }
/* But if the zoom-anchor lives inside a paragraph that has flowing inline
   content (e.g., the gallery item, or a download button row), let it be inline. */
.article .body .blocks-gallery-item a.img-zoom,
.article .body center a.img-zoom { display: inline-block; }

.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
  cursor: zoom-out;
}
.lightbox-overlay.open { display: flex; }
.lightbox-overlay img {
  max-width: 100%;
  max-height: 100%;
  border: 2px solid #fff;
  border-radius: 3px;
}
.lightbox-overlay .close {
  position: absolute;
  top: 14px;
  right: 18px;
  color: #fff;
  font-size: 28px;
  font-family: Arial, sans-serif;
  cursor: pointer;
  line-height: 1;
}

.article .tags {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid #e2dccb;
  font-size: 12px;
  color: #888;
}
.article .tags a {
  display: inline-block;
  margin: 0 4px 4px 0;
  padding: 2px 8px;
  background: #eef3f9;
  color: #1c57a7;
  border-radius: 3px;
}


/* =========================  SIDEBAR  ======================== */
.sidebar { font-family: 'Inter', 'Segoe UI', Arial, sans-serif; }
.widget {
  background: #fff;
  border: 1px solid #e2dccb;
  border-radius: 4px;
  margin-bottom: 18px;
}
.widget h3 {
  margin: 0;
  padding: 8px 12px;
  background: #17335b;
  color: #fff;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 4px 4px 0 0;
}
.widget .body { padding: 10px 12px; }
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li {
  padding: 5px 0;
  border-bottom: 1px dotted #e2dccb;
  font-size: 13px;
}
.widget li:last-child { border-bottom: 0; }
.widget li .count { color: #999; font-size: 11px; }
.widget p { margin: 0 0 8px; font-size: 13px; line-height: 1.5; }

.widget.search input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #c8c4b8;
  border-radius: 3px;
  font-size: 13px;
}


/* =========================  FOOTER  ========================= */
/* Footer: leaves on outer corners, footerbg.jpg tiles in BOTH directions
   so the entire footer area (including the bottom padding band) is
   covered — no gray strip showing. */
.site-footer {
  background:
    url('../site-images/leaf-btmleft.png')  no-repeat left bottom,
    url('../site-images/leaf-btmright.png') no-repeat right bottom,
    url('../site-images/footerbg.jpg')      repeat center top,
    #4f4f4f;
  color: #d8d8d8;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  padding: 50px 16px 60px;
  margin-top: 0;
  min-height: 280px;
}
.site-footer .wrap {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.site-footer ul {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}
.site-footer a {
  color: #fff;
  font-size: 13px;
  text-decoration: none;
}
.site-footer a:hover { text-decoration: underline; }
.site-footer .copyright { font-size: 12px; color: #9fb1cd; margin-top: 8px; }
.site-footer .tagline { font-size: 13px; color: #cdd6e4; }


/* =========================  RESPONSIVE  =====================
   Mobile (<820px): tight chrome, hamburger nav, no sidebar.
   ============================================================ */
@media (max-width: 819px) {
  body { font-size: 15px; }

  /* Uniform card excerpts on mobile — clamp top-3 to ~3 lines like the grid */
  .card-row .excerpt,
  .card .excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .site-header { padding: 0; }
  .site-header .wrap {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 8px 12px;
    gap: 6px;
  }
  .site-header .logo img { height: 44px; width: auto; }
  .site-header .logo { justify-self: center; }
  .site-header .branding .name { font-size: 18px; }
  .site-header .branding .tag { display: none; }
  .site-header .search input { width: 100%; max-width: 320px; }

  /* Hamburger replaces the menu */
  .nav-burger { display: block; }
  .main-nav > .wrap { display: none; }
  .nav-toggle:checked ~ .wrap { display: block; }
  .main-nav ul { flex-direction: column; }
  .main-nav > .wrap > ul > li { width: 100%; }
  .main-nav > .wrap > ul > li > a {
    border-right: 0;
    border-bottom: 1px solid #0a2345;
    padding: 12px 18px;
  }
  .main-nav .sub { position: static; width: 100%; box-shadow: none; }
  .main-nav .sub li a { padding-left: 32px; font-size: 12px; }

  /* On mobile, hide the eyebrow tab at top; the cross-site links
     appear at the bottom of the hamburger menu instead. */
  .eyebrow-zone { display: none; }
  .main-nav .mobile-eyebrow { display: block; list-style: none; margin: 0; padding: 0; }
  .main-nav .mobile-eyebrow li { width: 100%; }
  .main-nav .mobile-eyebrow li a {
    display: block;
    padding: 10px 18px;
    color: #cdd6e4;
    font-size: 13px;
    text-decoration: none;
    border-top: 1px solid #0a2345;
  }
  .main-nav .mobile-eyebrow li a:hover { background: #1c57a7; color: #fff; }

  /* Footer leaves smaller on mobile so they don't dominate */
  .site-footer::before,
  .site-footer::after { width: 100px; height: 100px; }
}


/* =========================  AUTHOR BOX  ======================= */
.author-box {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin: 30px 0 0;
  padding: 15px 20px 5px 20px;
  background: #f6f3e8;
  border: 1px solid #e2dccb;
  border-radius: 5px;
}
.author-box .author-avatar { flex: 0 0 auto; display: block; }
.author-box .author-avatar img {
  width: 75px;
  height: 75px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid #d8d2bf;
  background: #fff;
  display: block;
}
.author-info { min-width: 0; }
.author-name {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #17335b;
  margin: 0 0 6px;
}
.author-bio {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: #555;
}
.author-bio p { margin: 0 0 8px; }
/* Author archive masthead — same 75×75 avatar as the inline post box */
.author-box-header { margin: 0 0 18px; }
@media (max-width: 560px) {
  .author-box { flex-direction: column; }
  .author-box .author-avatar img { width: 70px; height: 70px; }
}


/* =========================  COMMENTS  ======================= */
.comments {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 2px solid #d8d2bf;
}
.comments-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #17335b;
  margin: 0 0 18px;
}
.comment-list,
.comment-replies {
  list-style: none;
  margin: 0;
  padding: 0;
}
.comment-replies {
  margin-left: 24px;
  margin-top: 14px;
  padding-left: 16px;
  border-left: 2px solid #e6e1d0;
}
.comment {
  margin: 0 0 16px;
}
.comment-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}
.comment-author {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #17335b;
}
.comment-author a { color: #1c57a7; }
.comment-date {
  font-size: 12px;
  color: #999;
}
.comment-body {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #656a73;
}
.comment-body p { margin: 0 0 8px; }
.comments-closed {
  margin-top: 18px;
  font-size: 13px;
  font-style: italic;
  color: #999;
}
.comment.pingback {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 13px;
}
.comment.pingback .pingback-label {
  font-weight: 600;
  color: #17335b;
}
.comment.pingback .pingback-excerpt {
  color: #888;
  font-style: italic;
}


/* =========================  SEARCH  ======================= */
.search-page-form {
  display: flex;
  gap: 8px;
  margin: 0 0 18px;
}
.search-page-form input[type="text"] {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #c8c4b8;
  border-radius: 4px;
  font-size: 15px;
}
.search-page-form button {
  padding: 10px 20px;
  background: #1c57a7;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.search-page-form button:hover { background: #17335b; }
.search-status {
  font-size: 13px;
  color: #777;
  margin: 0 0 14px;
}
.search-result {
  padding: 0 0 16px;
  margin: 0 0 16px;
  border-bottom: 1px solid #e6e1d0;
}
.search-result h3 {
  margin: 0 0 4px;
  font-family: 'Inter', sans-serif;
  font-size: 17px;
}
.search-result .meta {
  font-size: 12px;
  color: #999;
  margin: 0 0 6px;
}
.search-result .excerpt {
  font-size: 14px;
  line-height: 1.55;
  color: #484b50;
  margin: 0;
}
.no-results { color: #777; font-style: italic; }


/* =========================  404 PAGE  ======================= */
.error-page { max-width: 620px; }
.error-code {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 88px;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -3px;
  color: #1c57a7;
  opacity: 0.18;
  margin: 0;
}
.error-page .page-h1 {
  font-size: 38px;
  margin: 2px 0 10px;
}
.error-lead {
  font-size: 16px;
  color: #484b50;
  margin: 0 0 22px;
}
.error-links {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}
.error-links li { margin: 0 0 10px; }
.error-links a {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 15px;
}


/* =========================  ARCHIVE LIST  ======================= */
.archive-intro {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 13px;
  color: #777;
  margin: 0 0 18px;
}
.archive-year { margin: 0 0 18px; }
.archive-year h2 {
  font-size: 18px;
  color: #17335b;
  border-bottom: 1px solid #d8d2bf;
  padding-bottom: 4px;
  margin: 0 0 8px;
}
.archive-year ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.archive-year li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0 0 9px;
  line-height: 1.35;
}
.archive-thumb {
  flex: 0 0 auto;
  width: 40px;
  height: 52px;
  display: block;
  border: 1px solid #ddd;
  border-radius: 3px;
  overflow: hidden;
  background: #fff;
}
.archive-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.archive-thumb-ph { background: #eef1f6; }
.archive-thumb-ph img {
  object-fit: contain;
  opacity: 0.4;
  padding: 4px;
  mix-blend-mode: multiply;
}
.archive-entry { min-width: 0; padding-top: 1px; }
.archive-title { font-size: 15px; }
.archive-list .meta {
  display: block;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 13px;
  color: #8a8f98;
  margin-top: 1px;
}
.archive-list .meta a { color: #6f7681; }