/* Technesium brand layer — matches technesium.com
   Measured from the live site (computed styles, not guessed):
     type    Plus Jakarta Sans, weights 300/400/500/600/700/800
     headings extrabold 800, pure black, sentence case, no letter-spacing
     colours navy #111C4E, teal #00AF9A, blue #416BA9, grey #F1F1F1
     layout  coloured full-bleed field with white rounded cards floating on it
   Plus Jakarta Sans is SIL OFL, so this is the real font, self-hosted — no external
   requests. Loaded AFTER technesium.css so it wins. */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/jakarta-300.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/jakarta-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/jakarta-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/jakarta-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/jakarta-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/jakarta-800.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  --tech-navy:  #111C4E;
  --tech-teal:  #00AF9A;
  --tech-blue:  #416BA9;
  --tech-grey:  #F1F1F1;
  --tech-ink:   #1a1a1a;
  --tech-head:  #000000;
  --tech-card:  18px;
  /* Teal #00AF9A is only 2.76:1 on white — fine as a FILL, fails as TEXT on the light
     card. This darker teal keeps the hue and clears 4.5:1 for text on light surfaces. */
  --tech-teal-ink: #00806F;
}

body, button, input, select, textarea,
.entry-content, .entry-title, .main-title, .site-description {
  font-family: "Plus Jakarta Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

body { color: var(--tech-ink); }

/* --- the site's signature: white cards floating on a navy field ----------- */
body { background-color: var(--tech-navy); }

.site-content {
  /* GeneratePress never sets a global border-box, so without this max-width caps the
     CONTENT box and the card's real width is 1180 + 2x padding — which made the card
     full-bleed (no navy visible) from ~1265px all the way down to 901px. */
  box-sizing: border-box;
  background: #fff;
  border-radius: var(--tech-card);
  margin: 1.6rem auto 2.4rem;
  padding: 2.2rem 2.4rem 2.6rem;
  max-width: 1180px;
  box-shadow: 0 18px 44px rgba(0,0,0,0.20);
}

/* #page carries .grid-parent (padding 0), so `margin:auto` alone gives no gutter.
   This guarantees a navy margin at every viewport width. */
#page { padding-inline: clamp(0.7rem, 2.5vw, 2rem); }

/* ==========================================================================
   SECTION CARDS — measured from technesium.com: radius 30px, NO shadow,
   NO border, filled white / #F1F1F1 / teal, separated by the navy field.
   Article pages keep one big card (a detail page is one block on the site);
   index / archive / topic pages break into a card per section.
   ========================================================================== */
.page-home .site-content,
.page-list .site-content,
.page-articles .site-content {
  background: transparent;
  padding: 0;
  box-shadow: none;
  border-radius: 0;
}
.page-articles .inside-article { background: transparent; padding: 0; }

/* the card recipe — the hero is excluded here rather than overridden later,
   because `.home > section` (0,2,1) would outrank a plain `.home-hero` (0,2,0) */
.page-home .home > section:not(.home-hero),
.page-home .home-cols > section,
.page-list .inside-article,
.page-articles .art-head,
.page-articles .guide-intro,
.page-articles .art-topic {
  background: #fff;
  border-radius: 30px;
  padding: 2rem 2.2rem;
  margin: 0 0 1.5rem;
  box-shadow: none;
  border: 0;
}
/* .home-cols is a DIV, so the `section` recipe never gives it a bottom margin and the
   white column pair butted flush against the teal subscribe card. Put the gap on the
   wrapper and keep the grid children flush with each other. */
.page-home .home-cols { margin: 0 0 1.5rem; }
.page-home .home-cols > section { margin-bottom: 0; }

/* One column width across every card page, so the stack lines up. The inner text
   blocks keep the 760px reading measure but centre inside the card instead of
   hugging the left edge and leaving dead space on the right. */
.page-list .inside-article,
.page-list .page-header,
.page-list .paging-navigation,
.page-articles .inside-article {
  /* border-box, or max-width caps the CONTENT box and the cards render 1070px */
  box-sizing: border-box;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
/* technesium.css caps .entry-content at the 760px reading measure, which would leave the
   /articles/ cards 240px narrower than every other card page. Release it here only —
   the topic cards hold link lists, not running prose. */
.page-articles .inside-article > .entry-content { max-width: none; }
.page-articles .entry-content > * { max-width: none; }
.page-list .inside-article > .entry-header,
.page-list .inside-article > .entry-content,
.page-list .inside-article > .entry-summary,
.page-list .inside-article > .entry-meta,
.page-list .inside-article > .post-image,
.page-articles .art-head > *,
.page-articles .art-topic > * { margin-left: auto; margin-right: auto; }

/* The tinted variants the site alternates with. These must repeat the recipe's
   selector shape — `:not(.home-hero)` pushes it to (0,3,1), so a plain
   `.page-home .subscribe` (0,2,0) would lose. */
.page-home .home > section.home-block--tint { background: var(--tech-grey); }
/* the tiles' own #f7f8fa is only 1.06:1 against the grey card — white gives the
   strongest separation available, and matches the site's white-on-grey bands */
.page-home .home > section.home-block--tint .topic-tile {
  background: #fff;
  border-color: #dce1e7;
  border-left-color: var(--tech-teal);
}
/* This rule is (0,4,1) and so outranks the plain `.topic-tile:hover` (0,2,0) that turns
   the tile navy. Without a matching-specificity hover the fill stayed white while
   technesium.css still flipped the LABEL to white — the tile appeared to empty itself.
   Restate the hover here so the navy fill comes back under the white text. */
.page-home .home > section.home-block--tint .topic-tile:hover,
.page-home .home > section.home-block--tint .topic-tile:focus-visible {
  background: var(--tech-navy);
  border-color: var(--tech-navy);
  border-left-color: var(--tech-teal);
}
.page-home .home > section.subscribe {
  background: var(--tech-teal);
  color: #08231f;
}
.page-home .home > section.subscribe h2,
.page-home .home > section.subscribe > p { color: #08231f; }
.page-home .home > section.subscribe .sub-card {
  background: #fff;
  border-color: #fff;
}
/* same trap as the topic tiles: the base rule above sets border-color:#fff at (0,4,1),
   which masks the teal hover border, so restate it here */
.page-home .home > section.subscribe .sub-card:hover,
.page-home .home > section.subscribe .sub-card:focus-visible {
  background: #f2fbf9;
  border-color: var(--tech-navy);
}

/* technesium.css caps .home at the 760px reading measure, which suits one column of
   prose but looks thin once the page is a stack of cards. Widen the card column and
   cap only the running text. */
.page-home .home { max-width: 1000px; }
.page-home .home-hero > p { max-width: 760px; }

/* The hero is not a card — on technesium.com the headline sits straight on the
   navy field in white ExtraBold, with the cards starting below it. */
.page-home .home-hero { background: transparent; padding: 0; margin-bottom: 1.5rem; }
.page-home .home-hero h1 { color: #fff; }
.page-home .home-hero > p { color: #c9d4ee; }

/* page titles on the archive/topic pages sit on the field too */
.page-list .page-header,
.page-articles .entry-header {
  background: transparent;
  padding: 0 0.4rem;
  margin-bottom: 1.2rem;
}
.page-list .page-title,
.page-articles .entry-header .entry-title { color: #fff; }
.page-list .browse-all {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.22);
  border-left-color: var(--tech-teal);
}
.page-list .browse-all a { color: #cfe9e4; }
.page-list .browse-all a:hover { color: #fff; }

/* Pagination sits on the field as well. The `background: transparent` is essential —
   GeneratePress paints `.separate-containers .paging-navigation` white, so without it
   the light link colour below lands on a white slab at 1.28:1. */
.page-list .paging-navigation { padding: 0.4rem; background: transparent; }
.page-list .paging-navigation a { color: #cfe9e4; }
.page-list .paging-navigation a:hover { color: #fff; }

/* Footer links now sit on the navy field, where the body link blue is only 3.00:1.
   Light teal reads as a link and clears 8.8:1. */
.page-home .home-more { color: #c9d4ee; border-top-color: rgba(0,175,154,0.55); }
.page-home .home-more a { color: #6fd0c2; }
.page-home .home-more a:hover, .page-home .home-more a:focus { color: #fff; }

/* the keyboard skip-link lands on navy too (it is the first focusable element) */
.skip-link, .screen-reader-text.skip-link:focus {
  color: #08231f !important;
  background-color: var(--tech-teal) !important;
}

@media (max-width: 900px) {
  .page-home .home > section:not(.home-hero),
  .page-list .inside-article,
  .page-articles .art-head,
  .page-articles .guide-intro,
  .page-articles .art-topic {
    border-radius: 20px;
    padding: 1.3rem 1.1rem;
    margin-bottom: 1rem;
  }
  /* the grid collapses to one column here, so each child needs its own gap again,
     and the wrapper keeps the gap to the next section */
  .page-home .home-cols { margin-bottom: 1rem; }
  .page-home .home-cols > section {
    border-radius: 20px;
    padding: 1.3rem 1.1rem;
    margin-bottom: 1rem;
  }
  .page-home .home-cols > section:last-child { margin-bottom: 0; }
}

/* the field should not show through the theme's own wrappers */
#page, .site-main, .content-area { background: transparent; }

@media (max-width: 900px) {
  .site-content {
    margin: 0.9rem 0 1.4rem;
    padding: 1.4rem 1rem 1.8rem;
    border-radius: 14px;
  }
  /* The card already supplies the horizontal inset. The theme pads .inside-article a
     further 30px each side, which stacked to leave only a 239px reading column at 375px.
     Scoped to the SINGLE-card pages only: on .page-list / .page-articles the
     .inside-article IS the card, so zeroing its padding puts text on the rounded corner. */
  body:not(.page-list):not(.page-articles) .inside-article {
    padding-left: 0;
    padding-right: 0;
  }
}

/* --- masthead: the site's navy band ------------------------------------- */
.site-header { background-color: var(--tech-navy) !important; }
.site-header .main-title a,
.site-header .main-title a:hover { color: #fff !important; }
.site-header .site-description { color: #9fb0d8 !important; }
.main-title { font-weight: 600; letter-spacing: 0.02em; }

/* --- nav: navy with a teal active/hover rail ---------------------------- */
.main-navigation,
.main-navigation ul ul { background-color: #0c1540 !important; }
.main-navigation .main-nav ul li a { font-weight: 500; letter-spacing: 0.02em; }
.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
  background-color: var(--tech-teal) !important;
  color: #08231f !important;
}

/* --- links ---------------------------------------------------------------
   Text hovers on the light card use the darker teal (4.5:1+); the bright teal is kept
   for hovers that sit on the navy field, where it reads at 5.85:1. */
a { color: var(--tech-blue); }
a:visited { color: var(--tech-blue); }
a:hover, a:focus, a:active { color: var(--tech-teal-ink); }
.site-info a:hover, .site-info a:focus,
.site-header a:hover, .site-header a:focus { color: var(--tech-teal); }

/* the theme sets `outline:none` on several focus states — restore a visible,
   high-contrast focus ring (navy on white is 16:1) for keyboard users */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--tech-navy);
  outline-offset: 2px;
}
/* A navy ring is invisible on the navy field — every link that now sits there needs white */
.site-header a:focus-visible,
.site-info a:focus-visible,
.page-home .home-more a:focus-visible,
.page-home .home-hero a:focus-visible,
.page-list .page-header a:focus-visible,
.page-list .browse-all a:focus-visible,
.page-list .paging-navigation a:focus-visible { outline-color: #fff; }

/* byline / category / tag links: the theme's INLINE style block outranks a bare `a`,
   so these have to be named explicitly or they keep the old grey-and-blue */
.entry-meta a { color: #55606e; }
.entry-meta a:hover, .entry-meta a:focus { color: var(--tech-teal-ink); }

/* homepage pick-lists: technesium.css's (0,2,2) rule outranks a bare a:hover */
.pick-list li a:hover, .pick-list li a:focus { color: var(--tech-teal-ink); }

/* --- headings ------------------------------------------------------------
   technesium.com sets every heading in Plus Jakarta Sans ExtraBold, pure black,
   sentence case, no letter-spacing, with tight leading on the large sizes. */
h1, h2, h3, h4, h5, h6,
.entry-title, .home-hero h1, .art-topic h2, .topic-name, .latest-title {
  font-family: "Plus Jakarta Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight: 800;
  color: var(--tech-head);
  letter-spacing: normal;
  text-transform: none;
}
h1, .home-hero h1 { line-height: 1.05; }
h2 { line-height: 1.15; }
h3, h4, h5, h6 { line-height: 1.25; }

.entry-content h2, .entry-content h3 { font-weight: 800; color: var(--tech-head); }

/* headings that sit on a dark field stay white */
.site-header h1, .site-header .main-title,
.site-info h1, .site-info h2, .site-info h3 { color: #fff; }

/* article titles are links — keep them black, teal on hover, like the site's black type */
.entry-title a { color: var(--tech-head); }
.entry-title a:hover, .entry-title a:focus { color: var(--tech-teal-ink); }

/* Section headings carry their own classes, which outrank a bare h2. The site sets
   these in ExtraBold; small UI labels (counts, badges, card titles) stay at 700,
   which mirrors technesium.com's own hierarchy. */
.home-h, .art-topic h2, .subscribe h2, .home-hero h1 {
  font-weight: 800;
  color: var(--tech-head);
  letter-spacing: normal;
}

/* the site sets body copy in black, not grey — bring the leads in line */
.home-hero p, .subscribe > p { color: #33383f; }

/* --- landing page accents ------------------------------------------------*/
.start-n            { background: var(--tech-navy); }
.start-list a:hover { border-color: var(--tech-teal); background: #f2fbf9; }
.topic-tile         { border-left-color: var(--tech-teal); }
.topic-tile:hover   { background: var(--tech-navy); border-color: var(--tech-navy); }
.topic-name         { color: var(--tech-navy); }
/* shorthand FIRST — the other order silently reset the teal rail to pale mint */
.browse-all         { background: #f2fbf9; border-color: #bfe9e2; border-left-color: var(--tech-teal); }
.home-more          { border-top-color: var(--tech-teal); }

.art-topic h2       { border-bottom-color: var(--tech-teal); }
.art-jump a         { color: var(--tech-navy); }
.art-jump a:hover   { background: var(--tech-teal); border-color: var(--tech-teal); color: #08231f; }
/* the count badge was a translucent WHITE wash tuned for the old blue hover; on teal it
   dropped to 2.17:1, so flip it to the dark-on-teal scheme the pill now uses */
.art-jump a:hover span { background: rgba(8,35,31,0.16); color: #08231f; }
/* `.art-filter` is (0,1,0) and loses to the theme's `input[type="search"]` (0,1,1) */
input.art-filter {
  background: #fff; color: var(--tech-ink);
  border: 2px solid #cfd6de; border-radius: 6px;
}
input.art-filter:focus { border-color: var(--tech-teal); box-shadow: 0 0 0 3px rgba(0,175,154,0.18); }

.badge-new          { background: var(--tech-teal); color: #08231f; }
/* inherited #6b7280 on the #eef1f5 count pills was 4.27:1 — just under AA.
   .art-topic-count is the same pill on the topic headings and was missed first time. */
.art-jump a span, .topic-n, .art-count, .art-topic-count { color: #5a6472; }
/* leftover theme-blue row hover inside the /articles/ topic cards */
.art-list li a:hover, .art-list li a:focus { background: #f2fbf9; }
.home-cadence       { color: #08231f; background: #e2f7f3; border-color: #a8e5db; }
.home-cadence .dot  { background: var(--tech-teal); box-shadow: 0 0 0 3px rgba(0,175,154,0.22); }

.sub-card           { border-left-color: var(--tech-teal); }
.sub-card:hover     { border-color: var(--tech-teal); background: #f2fbf9; }
.sub-card strong    { color: var(--tech-navy); }

/* --- Guide overview on a /series/ page -------------------------------------
   The standing-guide text: what a reader gets if they only read this page. */
.guide-intro {
  max-width: 100%;
}
.guide-intro > * { max-width: var(--tech-measure); margin-left: auto; margin-right: auto; }
.guide-intro > p:first-child {
  margin-top: 0;
  font-size: 1.1em;
  line-height: 1.65;
  color: #24282e;
}
.guide-intro h2 {
  margin: 1.8em 0 0.5em;
  font-size: 1.18em;
}
.guide-intro ul { margin: 0.4em 0 0; padding-left: 1.3em; }
.guide-intro li { margin: 0.35em 0; line-height: 1.5; }
.guide-intro h2:last-of-type + ul {
  padding: 1em 1.2em 1em 2.4em;
  background: var(--tech-grey);
  border-radius: 14px;
  list-style-position: outside;
}

/* --- End of article: share + read next -------------------------------------
   Before this the last link on every article was the theme vendor's website. */
.post-next {
  margin: 2.4em 0 0;
  padding-top: 1.6em;
  border-top: 2px solid var(--tech-grey);
}
.share-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6em;
  margin-bottom: 1.8em;
}
.share-label {
  margin: 0 0.4em 0 0;
  font-weight: 700;
  color: var(--tech-head);
}
.share-btn {
  display: inline-block;
  padding: 0.5em 1em;
  font-size: 0.94em;
  font-weight: 600;
  line-height: 1.3;
  border-radius: 999px;
  border: 2px solid var(--tech-navy);
  background: #fff;
  color: var(--tech-navy);
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}
.share-btn:hover, .share-btn:focus {
  background: var(--tech-navy);
  color: #fff;
}
.share-wa {
  background: var(--tech-teal);
  border-color: var(--tech-teal);
  color: #08231f;
}
.share-wa:hover, .share-wa:focus {
  background: #00998a;
  border-color: #00998a;
  color: #08231f;
}

.next-label {
  margin: 0 0 0.6em;
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #06695d;
}
.next-list { margin: 0; padding: 0; list-style: none; }
.next-list li { margin: 0 0 0.85em; line-height: 1.4; }
.next-list a { font-weight: 600; text-decoration: none; }
.next-list a:hover { text-decoration: underline; }
.next-list span {
  display: block;
  margin-top: 0.15em;
  font-size: 0.9em;
  line-height: 1.45;
  color: #5a6472;
}
.next-more { margin: 1.1em 0 0; font-size: 0.94em; }
.next-follow {
  margin: 1.4em 0 0;
  padding-top: 1.1em;
  border-top: 1px solid #e6e9ee;
  font-size: 0.94em;
  color: #55606e;
}
.next-follow a { font-weight: 600; }

/* the footer is one line of small links; let it wrap kindly on a phone */
.site-info .copyright-bar { line-height: 2; }

@media (max-width: 560px) {
  .share-row { gap: 0.5em; }
  .share-label { flex: 1 0 100%; margin-bottom: 0.2em; }
  .share-btn { flex: 1 1 auto; text-align: center; }
}

/* --- Series ---------------------------------------------------------------
   Five 12-part courses drip out one article a day; without this a reader landing
   on part 7 from a forwarded link has no way back to parts 1-6. */
.series-box {
  margin: 2.4em 0 0;
  padding: 1.3em 1.5em 1.4em;
  background: var(--tech-grey);
  border-radius: 18px;
  border-left: 5px solid var(--tech-teal);
}
.series-kicker {
  margin: 0;
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #06695d;
}
.series-name {
  margin: 0.15em 0 0.7em;
  font-size: 1.15em;
  font-weight: 800;
  color: var(--tech-head);
  line-height: 1.25;
}
.series-parts { margin: 0; padding: 0 0 0 1.35em; }
.series-parts li { margin: 0.3em 0; line-height: 1.45; }
.series-parts li.is-current { font-weight: 700; color: var(--tech-head); }
.series-parts li.is-current span { border-bottom: 2px solid var(--tech-teal); }
.series-more { margin: 0.9em 0 0; font-size: 0.94em; }
.series-more a { font-weight: 600; }

/* the standalone /series/<name>/ index */
.series-parts--index { padding-left: 1.4em; }
.series-parts--index li { margin: 0.75em 0; }
.series-parts--index a { font-weight: 600; }
.series-hook {
  display: block;
  margin-top: 0.15em;
  font-size: 0.9em;
  line-height: 1.45;
  color: #5a6472;
}

@media (max-width: 700px) {
  .series-box { padding: 1.1em 1.1em 1.2em; border-radius: 14px; }
}

/* --- About page ----------------------------------------------------------
   Was a WordPress `alignleft` float with no side margin, so the copy ran hard into
   the photo and the float left a tall gap under the card. A flex row fixes both. */
.about-intro {
  display: flex;
  gap: 2.2rem;
  align-items: flex-start;
}
/* technesium.css caps portrait screenshots via `.entry-content img[src*="x1024"]`
   at (0,2,1); match that shape so this wins on load order, or the photo renders
   320px wide and squeezes the text column. */
.entry-content img.about-portrait,
.about-portrait {
  flex: 0 0 250px;
  width: 250px;
  height: auto;
  max-width: 250px;
  max-height: none;
  margin: 0.35rem 0 0;
  border-radius: 18px;
  display: block;
}
.about-body > p:first-child { margin-top: 0; }
.about-body > p:last-child  { margin-bottom: 0; }

@media (max-width: 700px) {
  .about-intro { flex-direction: column; gap: 1.3rem; }
  /* must repeat the (0,2,1) shape used above, or the desktop width wins here too */
  .entry-content img.about-portrait,
  .about-portrait { flex: 0 0 auto; width: 200px; max-width: 200px; }
}

/* --- contact form --------------------------------------------------------*/
.tech-contact button { background: var(--tech-teal); color: #08231f; font-weight: 600; }
.tech-contact button:hover, .tech-contact button:focus { background: #00998a; }
.tech-contact input:focus, .tech-contact textarea:focus {
  border-color: var(--tech-teal); box-shadow: 0 0 0 3px rgba(0,175,154,0.16);
}

/* --- buttons + footer ----------------------------------------------------*/
.read-more.button, a.button, button, input[type="submit"] {
  background-color: var(--tech-teal); color: #08231f; font-weight: 600;
}
.read-more.button:hover, a.button:hover, button:hover, input[type="submit"]:hover {
  background-color: #00998a; color: #08231f;
}
.site-info { background-color: var(--tech-navy); }
.site-info a:hover { color: var(--tech-teal); }

/* --- hero: what's new, right at the top ---------------------------------- */
.latest-strip {
  margin: 1.4em 0 0;
  padding: 1em 1.2em;
  background: #f4fbfa;
  border: 1px solid #bfe9e2;
  border-left: 5px solid var(--tech-teal);
  border-radius: 10px;
}
.latest-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.82em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #06695d;
}
.latest-flag .dot {
  width: 0.5em; height: 0.5em;
  background: var(--tech-teal);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(0,175,154,0.22);
}
.latest-link {
  display: flex;
  align-items: baseline;
  gap: 0.65em;
  margin-top: 0.5em;
  text-decoration: none;
}
.latest-label {
  flex: 0 0 auto;
  padding: 0.12em 0.55em;
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #08231f;
  background: var(--tech-teal);
  border-radius: 999px;
}
.latest-title {
  font-size: 1.22em;
  font-weight: 800;
  line-height: 1.25;
  color: var(--tech-head);
}
.latest-link:hover .latest-title { color: var(--tech-teal-ink); text-decoration: underline; }
.latest-next {
  margin: 0.6em 0 0;
  padding-top: 0.6em;
  border-top: 1px dashed #bfe9e2;
  font-size: 0.92em;
  color: #55606e;
}
.latest-next span {
  font-weight: 700;
  color: #06695d;
  margin-right: 0.35em;
}
@media (max-width: 560px) {
  .latest-link { flex-direction: column; gap: 0.3em; }
  .latest-title { font-size: 1.08em; }
}

/* --- header: one navy bar, logo left, nav right (matches technesium.com) --- */
/* Same gutter as #page, so the header column nests identically to the content column:
   gutter -> centred. The cards are 1000px centred inside a 1180px box that is itself
   centred, which nets out to 1000px centred — so a 1000px header column lines the logo
   up with the cards at every width. */
.site-header { padding: 0 clamp(0.7rem, 2.5vw, 2rem) !important; }
/* Title bar matched to technesium.com, measured on the live site: the navy band is
   exactly 126px tall with a 205x83 logo, at every width its desktop layout covers.
   It is NOT sticky there — it scrolls away with the page — and neither is this one. */
.site-header .inside-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2em;
  flex-wrap: wrap;
  box-sizing: border-box;
  min-height: 126px;
  padding: 0 !important;
  max-width: 1000px;
  margin: 0 auto;
}
/* .inside-header carries the theme's .grid-container, whose clearfix ::before/::after
   become FLEX ITEMS once this is display:flex — space-between then split the free space
   three ways and the logo never sat flush left (on mobile it was pushed hard right). */
.site-header .inside-header::before,
.site-header .inside-header::after { content: none; }
.site-branding { display: flex; flex-direction: column; gap: 0.15em; }
.main-title { margin: 0 !important; line-height: 1; }
.site-logo {
  display: block;
  height: 83px;   /* technesium.com renders its mark at 205x83 */
  width: auto;
  max-width: 100%;
}
.site-header .site-description {
  margin: 0 !important;
  font-size: 0.82em;
  letter-spacing: 0.02em;
  color: #8fa4d2 !important;
}

/* the nav now lives inside the header bar */
.site-header .main-navigation,
.site-header .main-navigation ul,
.site-header .main-navigation ul ul { background: transparent !important; }
.site-header .main-navigation { flex: 0 1 auto; }
.site-header .inside-navigation { padding: 0 !important; }
.site-header .main-navigation .main-nav ul { display: flex; gap: 0.2em; }
.site-header .main-navigation .main-nav ul li a {
  padding: 0.55em 1em;
  font-size: 0.94em;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #dbe4f7 !important;
  border-radius: 999px;
}
.site-header .main-navigation .main-nav ul li:hover > a,
.site-header .main-navigation .main-nav ul li[class*="current-menu-"] > a {
  background: var(--tech-teal) !important;
  color: #08231f !important;
}

@media (max-width: 900px) {
  /* stack: logo flush left on its own row, links wrapped underneath — matches how
     technesium.com puts the mark top-left on the navy field */
  /* Wix serves a separate mobile site rather than reflowing its 126px bar, so there is
     nothing to match exactly below this — scale the bar down proportionally instead. */
  .site-header .inside-header {
    min-height: 0;
    padding: 0.9em 0 !important;
    gap: 0.55em;
    justify-content: flex-start;
  }
  .site-branding, .site-header .main-navigation { flex: 1 0 100%; }
  .site-logo { height: 48px; }
  .site-header .main-navigation .main-nav ul { flex-wrap: wrap; justify-content: flex-start; gap: 0.15em; }
  /* the theme hard-sets line-height:60px on nav links, which left a huge gap between
     wrapped rows and pushed the header to 239px before any content */
  .site-header .main-navigation .main-nav ul li a {
    padding: 0.4em 0.6em; font-size: 0.82em; line-height: 1.6;
  }
  .site-header .site-description { display: none; }
  /* brand.css deliberately keeps the nav visible and wrapped, so the theme's
     hamburger is redundant — and it is a no-op here anyway (no theme JS ships). */
  .site-header .main-navigation .menu-toggle { display: none !important; }
}