/*
Theme Name:   IEOS Base
Theme URI:    https://startupsuccessstories.in/
Description:  Standalone parent theme for the IEOS and Nextgen News Hub plugins. Original code, no third-party theme files. Provides the container and grid contract the IEOS child theme is written against, plus header, footer, sidebar, archive and single layouts.
Author:       Startup Success Stories
Author URI:   https://startupsuccessstories.in/
Version:      1.5.22
Requires at least: 6.0
Tested up to: 7.1.4
Requires PHP: 7.4
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  ieos-base
Tags:         blog, news, two-columns, right-sidebar, custom-menu, featured-images
*/

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
  --ieos-ink: #0b1628;
  --ieos-body: #33415c;
  --ieos-muted: #64748b;
  --ieos-line: #e2e8f0;
  --ieos-bg: #ffffff;
  --ieos-bg-soft: #f8fafc;
  --ieos-green: #309b65;
  --ieos-red: #d81f2a;
  --ieos-display: Georgia, 'Times New Roman', 'Iowan Old Style', serif;
  --ieos-red-dark: #b3161f;
  --ieos-blue: #4db2ec;
  --ieos-radius: 12px;
  --ieos-gap: 28px;
  --ieos-max: 1720px;
}

/* ==========================================================================
   2. Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ieos-bg);
  color: var(--ieos-body);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
}
img, svg, video { max-width: 100%; height: auto; }
a { color: var(--ieos-green); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { color: var(--ieos-ink); line-height: 1.25; margin: 1.6em 0 .6em; font-weight: 800; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }
p, ul, ol, blockquote { margin: 0 0 1.2em; }
ul, ol { padding-left: 1.4em; }
li { margin-bottom: .45em; }
blockquote { border-left: 3px solid var(--ieos-green); padding-left: 1em; color: var(--ieos-muted); }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }
pre { background: var(--ieos-bg-soft); border: 1px solid var(--ieos-line); border-radius: var(--ieos-radius); padding: 16px; overflow: auto; }
hr { border: 0; border-top: 1px solid var(--ieos-line); margin: 2em 0; }
table { width: 100%; border-collapse: collapse; margin: 0 0 1.5em; }
th, td { border: 1px solid var(--ieos-line); padding: 8px 12px; text-align: left; }
th { background: var(--ieos-bg-soft); }
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link:focus {
  position: fixed; top: 8px; left: 8px; z-index: 9999; width: auto; height: auto;
  clip: auto; padding: 10px 16px; background: #fff; border-radius: 8px;
}

/* ==========================================================================
   3. Layout contract — the class names the IEOS child is written against
   ========================================================================== */
.td-outer-wrap { display: flex; flex-direction: column; min-height: 100vh; }
.td-container-wrap, .td-main-content-wrap, .td-main-page-wrap { width: 100%; }
.td-container {
  max-width: var(--ieos-max);
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
}
.td-pb-row { display: flex; flex-wrap: wrap; gap: var(--ieos-gap); align-items: flex-start; }
.td-ss-row { display: flex; flex-wrap: wrap; gap: var(--ieos-gap); }
.td-pb-span12 { flex: 0 0 100%; max-width: 100%; }
.td-pb-span8, .td-main-content, .td-ss-main-content { flex: 1 1 0; min-width: 0; }
.td-pb-span4, .td-main-sidebar, .td-ss-main-sidebar, .td-sidebar { flex: 0 0 320px; max-width: 320px; min-width: 0; }
.td-main-content-wrap { padding: 28px 0 40px; }

/* The content region the header opens. Neutral by design: the IEOS child templates own
   their own wrappers, so this only carries vertical rhythm, and the portal routes zero it
   because the plugin's dashboard and auth templates set their own spacing. */
.ieos-content-region { display: block; padding: 28px 0 40px; }
body.ieos-is-dashboard .ieos-content-region,
body.ieos-is-auth .ieos-content-region,
body.ieos-portal .ieos-content-region { padding: 0; }
.td-default { }

/* ==========================================================================
   4. Header — ribbon, utility strip, masthead, navigation row
   ========================================================================== */
.ieos-header { background: #fff; }

/* Campaign ribbon */
.ieos-ribbon { background: var(--ieos-red); color: #fff; }
.ieos-ribbon__in {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; min-height: 36px; position: relative; flex-wrap: wrap;
  font-size: 12.5px; padding-top: 4px; padding-bottom: 4px;
}
.ieos-ribbon__tag {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  background: rgba(255,255,255,.18); border-radius: 3px; padding: 2px 7px;
}
.ieos-ribbon__cta { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.ieos-ribbon__x {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; color: #fff; opacity: .75;
  font-size: 18px; line-height: 1; padding: 4px 8px; cursor: pointer;
}
.ieos-ribbon__x:hover { opacity: 1; }

/* Utility strip */
.ieos-util { background: #fbfaf8; border-bottom: 1px solid var(--ieos-line); }
.ieos-util__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 32px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px; color: var(--ieos-muted);
}
.ieos-util__right { display: flex; align-items: center; gap: 14px; }
.ieos-util a { color: inherit; }
.ieos-util a:hover { color: var(--ieos-red); text-decoration: none; }

/* Masthead */
.ieos-masthead__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; padding-top: 18px; padding-bottom: 18px; flex-wrap: wrap;
}
.ieos-branding .custom-logo { max-height: 62px; width: auto; }
.ieos-site-title { font-size: 1.5rem; font-weight: 800; color: var(--ieos-ink); margin: 0; letter-spacing: -.01em; }
.ieos-site-title a { color: inherit; }
.ieos-site-tagline { margin: 3px 0 0; font-size: .85rem; color: var(--ieos-muted); }
.ieos-masthead__actions { display: flex; align-items: center; gap: 12px; }

/* Buttons */
.ieos-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 8px; padding: 10px 15px; font-size: 13px; font-weight: 700;
  text-decoration: none; white-space: nowrap; border: 1px solid transparent;
}
.ieos-btn:hover { text-decoration: none; }
.ieos-btn--red { background: var(--ieos-red); color: #fff; }
.ieos-btn--red:hover { background: var(--ieos-red-dark); color: #fff; }
.ieos-btn--outline { border-color: var(--ieos-line); color: var(--ieos-ink); background: #fff; }
.ieos-btn--outline:hover { border-color: var(--ieos-ink); }

/* Navigation row */
/* Sticky against .td-outer-wrap, which is why the row lives outside <header>. */
.ieos-navrow {
  border-top: 1px solid var(--ieos-line);
  border-bottom: 1px solid var(--ieos-line);
  background: #fff;
  position: sticky;
  top: 0;
  /* The news plugin's local bar is position:sticky at top:0 with z-index 10050 and a fixed
     40px height. Three states, all deterministic and all CSS-only:
       1. bar present and :has() supported  -> the row pins at 40px, flush beneath it, both
          visible (see the rule below);
       2. no bar                            -> the row pins at 0, nothing to clear;
       3. :has() unsupported                -> the row pins at 0 with a z-index above the
          bar, so it covers the ticker instead of being clipped by it. A hidden ticker is
          the better failure: the menu is never half-visible.
     No script, and no dependency on another plugin's markup beyond a class that the
     stylesheet rule below can see. */
  z-index: 10060;
  transition: box-shadow .18s ease;
}
.ieos-navrow.is-stuck { box-shadow: 0 6px 18px rgba(15, 23, 42, .09); }

/* Sit beneath the ticker when it exists. :has() is supported everywhere current; older
   browsers fall back to the z-index above, which covers the ticker rather than clipping
   the menu. The 40px matches the plugin's own `height: 40px !important`. */
@supports selector(:has(*)) {
  body:has(.cd-local-bar) .ieos-navrow { top: 40px; }
  /* The plugin hides its bar below 769px on desktop-only installs; the row follows. */
  @media (max-width: 768px) {
    body:has(.cd-local-bar.cd-bar-desktop-only) .ieos-navrow { top: 0; }
  }
}
@media (prefers-reduced-motion: reduce) { .ieos-navrow { transition: none; } }
.ieos-navrow__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 46px; }

/* Compact brand in the sticky bar. Hidden while the masthead is on screen, because the
   logo is already there; shown once it scrolls away so the bar is not anonymous. */
.ieos-navrow__brand { display: none; align-items: center; flex: 0 0 auto; }
.ieos-navrow.is-stuck .ieos-navrow__brand { display: inline-flex; }
.ieos-navrow__brand img { display: block; max-height: 30px; width: auto; }
.ieos-navrow__brand span { font-weight: 800; font-size: .95rem; color: var(--ieos-ink); letter-spacing: -.01em; white-space: nowrap; }
.ieos-navrow.is-stuck .ieos-navrow__in { gap: 16px; }
.ieos-nav { flex: 1 1 auto; min-width: 0; }
.ieos-navrow.is-stuck .ieos-nav ul { gap: 6px 16px; }
.ieos-nav ul {
  display: flex; align-items: center; gap: 2px 18px;
  list-style: none; margin: 0; padding: 0; flex-wrap: wrap;
}
.ieos-nav li { margin: 0; position: relative; }
.ieos-nav a {
  color: var(--ieos-ink); font-size: 13px; font-weight: 600;
  display: inline-block; padding: 5px 0; white-space: nowrap;
}
.ieos-nav a:hover { color: var(--ieos-red); text-decoration: none; }

/* The item you are on. wp_nav_menu adds .current-menu-item; the category fallback adds it
   too, plus aria-current for screen readers. */
.ieos-nav .current-menu-item > a,
.ieos-nav .current-menu-parent > a,
.ieos-nav .current-menu-ancestor > a,
.ieos-nav a[aria-current="page"] { color: var(--ieos-red); }
.ieos-nav .current-menu-item > a { box-shadow: inset 0 -2px 0 var(--ieos-red); }

/* Caret on items with children */
.ieos-nav .menu-item-has-children > a::after {
  content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

/* Dropdown: hover for pointers, focus-within for keyboards */
.ieos-nav .sub-menu {
  position: absolute; top: 100%; left: -12px; z-index: 80;
  min-width: 210px; margin: 0; padding: 8px 0;
  background: #fff; border: 1px solid var(--ieos-line); border-radius: 10px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, .12);
  display: block; opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.ieos-nav li:hover > .sub-menu,
.ieos-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.ieos-nav .sub-menu li { margin: 0; }
.ieos-nav .sub-menu a {
  display: block; padding: 7px 16px; font-size: 12.5px; font-weight: 500; white-space: normal;
}
.ieos-nav .sub-menu a:hover { background: var(--ieos-bg-soft); color: var(--ieos-red); }
.ieos-nav .sub-menu .sub-menu { top: 0; left: 100%; }
@media (prefers-reduced-motion: reduce) { .ieos-nav .sub-menu { transition: none; } }
.ieos-navrow__cta { flex: 0 0 auto; padding: 7px 12px; font-size: 12.5px; }

/* ==========================================================================
   5. Content
   ========================================================================== */
.td-category-header { padding: 22px 0 8px; }
.td-category-header h1 { margin: 0; }
.td-crumb-container { font-size: .85rem; color: var(--ieos-muted); padding: 10px 0 0; }
.td-crumb-container a { color: var(--ieos-muted); }
.td-post-content, .td-page-content { font-size: 1.02rem; }
.td-post-content > *:first-child { margin-top: 0; }
/* The lead picture should be the same width as the pictures inside the article. Left to its
   own devices the image renders at its intrinsic size and sits centred, which reads as a
   thumbnail rather than a hero — so the width is forced and the auto margins removed. */
.td-post-featured-image {
  margin: 0 0 22px;
  width: 100%;
  text-align: left;
}
/* .wp-post-image is the class WordPress puts on a featured image wherever it is rendered.
   Matching it directly means the rule holds even if the image is not inside the wrapper this
   theme expects — which is what a 102px left offset and a 750px width in an 847px column
   looked like. */
.single .wp-post-image,
.single-post .wp-post-image,
.ieos-single .wp-post-image,
.td-post-featured-image .wp-post-image {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  float: none !important;
  border-radius: 10px;
}

.td-post-featured-image img,
.td-post-featured-image .wp-post-image,
.td-post-featured-image a img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto;
  margin: 0 !important;
  border-radius: 10px;
  object-fit: cover;
}
.td-module-thumb { max-height: 420px; overflow: hidden; border-radius: 10px; }
.td-module-thumb:empty { display: none; }
.td-module-thumb img { border-radius: 10px; width: 100%; display: block; object-fit: cover; }
.ieos-entry-meta { font-size: .85rem; color: var(--ieos-muted); margin: 0 0 18px; display: flex; gap: 8px 0; flex-wrap: wrap; }
.ieos-entry-meta > span { display: inline-flex; align-items: center; }
.ieos-entry-meta > span + span::before {
  content: "\00b7"; color: #cbd5e1; margin: 0 10px; speak: none;
}
.ieos-entry-title { margin: 0 0 10px; }
.ieos-entry-title a { color: var(--ieos-ink); }
/* A 1200px card runs to roughly 150 characters a line, which is hard to read. Cap the
   card at a comfortable measure and centre it; the divider lives on the card, so the rule
   stops where the text does instead of trailing off into white. */
.ieos-post-card {
  border-bottom: 1px solid var(--ieos-line);
  padding-bottom: 22px;
  margin: 0 auto 22px;
  max-width: 860px;
}
.ieos-post-card:last-child { border-bottom: 0; }
.ieos-pagination { display: flex; gap: 10px; flex-wrap: wrap; margin: 24px 0; }
.ieos-pagination .page-numbers {
  padding: 6px 12px; border: 1px solid var(--ieos-line); border-radius: 8px; color: var(--ieos-ink);
}
.ieos-pagination .page-numbers.current { background: var(--ieos-green); border-color: var(--ieos-green); color: #fff; }

/* Ad slots: the IEOS plugin and the news plugin both render into these */
.td-a-rec, .td-rec-inline-article, .td-rec-article-top, .td-rec-article-bottom {
  margin: 0 0 22px; text-align: center;
}
.td-ad-empty { display: none; }

/* ==========================================================================
   6. Sidebar and widgets
   ========================================================================== */
.td-sidebar .widget, .td-main-sidebar .widget {
  background: var(--ieos-bg-soft);
  border: 1px solid var(--ieos-line);
  border-radius: var(--ieos-radius);
  padding: 18px 20px;
  margin-bottom: 20px;
}
.widget-title, .wp-block-heading { font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ieos-muted); margin: 0 0 12px; }
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget li { margin-bottom: 8px; }

/* ==========================================================================
   7. Footer — newsletter band, four columns, legal row
   ========================================================================== */
.td-footer-wrapper {
  margin-top: auto;
  background: #22262a;
  color: #c9d1d8;
  padding: 0;
}
.td-footer-wrapper a { color: inherit; text-decoration: none; }
.td-footer-wrapper a:hover { color: #fff; }

.ieos-newsband { background: var(--ieos-red); color: #fff; }
.ieos-newsband__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 22px 20px; flex-wrap: wrap;
}
.ieos-newsband__head { font-size: 1.5rem; font-weight: 800; margin: 0; color: #fff; letter-spacing: -.01em; }
.ieos-newsband__sub { margin: 3px 0 0; font-size: .85rem; color: rgba(255,255,255,.9); }
.ieos-newsband__btn {
  background: #22262a; color: #fff; font-weight: 700; font-size: 13px;
  border-radius: 8px; padding: 11px 18px; white-space: nowrap;
}
.ieos-newsband__btn:hover { background: #111315; color: #fff; }

.ieos-fgrid {
  display: grid; grid-template-columns: 1.25fr .75fr .75fr .8fr 1.15fr;
  gap: 28px; padding: 34px 0 30px;
}
.ieos-fcol { min-width: 0; }
.ieos-fhead {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: #8d97a1; margin: 0 0 12px; font-weight: 600;
}
.ieos-flist { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.ieos-flist li { margin: 0 0 7px; }
.ieos-flogo { margin-bottom: 12px; }
.ieos-flogo__chip {
  display: inline-flex; background: #fff; border-radius: 8px; padding: 6px 8px;
}
.ieos-flogo__chip .custom-logo { max-height: 44px; width: auto; display: block; }
.ieos-flogo__text { margin: 0; font-size: 1.15rem; font-weight: 800; color: #fff; }
.ieos-fabout { margin: 0 0 14px; font-size: 13.5px; line-height: 1.65; color: #b6bfc7; max-width: 34ch; }
.ieos-fsocial { display: flex; gap: 8px; }
.ieos-fsocial a {
  width: 30px; height: 30px; border-radius: 8px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  border: 1px solid rgba(255,255,255,.16); text-transform: uppercase;
}
.ieos-fsocial a:hover { border-color: #fff; }

.ieos-legal {
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 14px 0 20px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px; color: #8d97a1;
}
.ieos-legal__nav { display: flex; gap: 16px; flex-wrap: wrap; }

/* Clearance for the news plugin's floating widgets, which sit bottom-right */
.ieos-footer .ieos-legal { padding-bottom: 64px; }

@media (max-width: 1024px) {
  .ieos-fgrid { grid-template-columns: 1fr 1fr; gap: 26px; }
  .ieos-fcol--news { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .ieos-util__in { justify-content: center; }
  .ieos-masthead__in { gap: 14px; padding-top: 14px; padding-bottom: 14px; }
  .ieos-branding .custom-logo { max-height: 48px; }
  .ieos-masthead__actions { width: 100%; }
  .ieos-masthead__actions .ieos-search-form { flex: 1 1 auto; }
  .ieos-navrow__in { flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
  .ieos-nav ul { gap: 6px 14px; }
  .ieos-navrow__cta { display: none; }
  .ieos-fgrid { grid-template-columns: 1fr; }
  .ieos-newsband__in { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .ieos-ribbon__in { justify-content: flex-start; padding-right: 44px; }
}

/* ==========================================================================
   8. Comments
   ========================================================================== */
.comment-list { list-style: none; padding: 0; margin: 0 0 28px; }
.comment-list .children { list-style: none; padding-left: 22px; }
.ieos-c-card { border: 1px solid var(--ieos-line); border-radius: var(--ieos-radius); padding: 16px 18px; margin-bottom: 14px; background: #fff; }
.ieos-c-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ieos-c-head img { border-radius: 50%; }
.comment-form p { margin-bottom: 14px; }
.comment-form label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .9rem; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--ieos-line); border-radius: 8px; font: inherit; background: #fff;
}
.comment-form input[type="submit"], .wp-block-button__link {
  background: var(--ieos-green); color: #fff; border: 0; border-radius: 8px; padding: 10px 18px;
  font-weight: 700; cursor: pointer;
}
.comment-form input[type="submit"]:hover { background: #267c51; }

/* ==========================================================================
   9. WordPress core blocks and utilities
   ========================================================================== */
.alignwide { max-width: 100%; }
.alignfull { width: 100vw; margin-left: calc(50% - 50vw); }
.wp-caption-text, .wp-element-caption { font-size: .82rem; color: var(--ieos-muted); }
.entry-utility { font-size: .85rem; color: var(--ieos-muted); margin-top: 28px; }
.ieos-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ==========================================================================
   10. Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .td-pb-span4, .td-main-sidebar, .td-ss-main-sidebar, .td-sidebar { flex: 0 0 280px; max-width: 280px; }
}
@media (max-width: 860px) {
  .td-pb-row, .td-ss-row { flex-direction: column; gap: 20px; }
  .td-pb-span8, .td-pb-span4, .td-main-content, .td-ss-main-content,
  .td-main-sidebar, .td-ss-main-sidebar, .td-sidebar { flex: 1 1 auto; max-width: 100%; width: 100%; }
  .td-header-wrap .td-container { min-height: 60px; }
  .td-header-main-menu ul { gap: 12px; }
}
@media (max-width: 560px) {
  h1 { font-size: 1.6rem; }
  .td-container { padding: 0 16px; }
  .td-main-content-wrap { padding: 18px 0 28px; }
}

/* ==========================================================================
   5b. Single post — measure, kicker, Q&A structure
   ========================================================================== */

/* A 1100px column at 16px is roughly 140 characters a line. Cap the article at a
   readable measure and let it sit centred in the column. */
.ieos-single { max-width: 760px; margin: 0 auto; width: 100%; }
/* Keep the article's own pictures at the same measure as the lead image. */
.ieos-single .td-post-content img { max-width: 100%; height: auto; }

/* Browsers give <figure> a 40px inline margin, which indents every imported picture and
   makes it narrower than the lead image above it. Reset it so all pictures share one
   measure, and keep captions quiet. */
.td-post-content figure,
.ieos-article-body figure { margin: 1.3em 0; }
.td-post-content figure img,
.ieos-article-body figure img { display: block; width: 100%; height: auto; border-radius: 10px; }
.td-post-content figcaption,
.ieos-article-body figcaption {
  font-size: .8rem; color: var(--ieos-muted); margin-top: 6px; line-height: 1.45;
}

.ieos-single-head { margin: 6px 0 26px; }
.ieos-kicker {
  display: inline-block;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--ieos-green);
  background: rgba(48, 155, 101, .10);
  border-radius: 999px;
  padding: 4px 12px;
  margin: 0 0 14px;
}
.ieos-single .ieos-entry-title { font-size: 2.25rem; line-height: 1.18; margin: 0 0 14px; letter-spacing: -0.01em; }
.ieos-single .ieos-entry-meta { margin: 0; }

.ieos-single .td-post-content { font-size: 1.06rem; line-height: 1.78; color: #1f2937; }
.ieos-single .td-post-content > p { margin: 0 0 1.25em; }

/* Interview and Q&A copy: the question line is a fully-bold paragraph. Give it a marker
   and a little air so a long transcript is scannable. :has() is progressive — browsers
   without it simply get the bold text. */
.ieos-single .td-post-content p:has(> strong:only-child) {
  border-left: 3px solid var(--ieos-green);
  padding: 2px 0 2px 14px;
  margin: 1.8em 0 .7em;
  color: var(--ieos-ink);
}
.ieos-single .td-post-content p > strong:first-child { color: var(--ieos-ink); }

.ieos-single .td-post-content img { border-radius: 10px; }
.ieos-single .td-post-content blockquote {
  border-left: 3px solid var(--ieos-line);
  padding: 4px 0 4px 18px;
  color: #475569;
  font-style: italic;
  margin: 1.8em 0;
}

.ieos-single-foot {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--ieos-line);
  margin-top: 36px; padding-top: 18px;
}
.ieos-comment-cta {
  background: var(--ieos-green); color: #fff; font-weight: 700;
  border-radius: 8px; padding: 9px 16px;
}
.ieos-comment-cta:hover { background: #267c51; text-decoration: none; }
.ieos-back-link { color: var(--ieos-muted); font-size: .9rem; }

@media (max-width: 560px) {
  .ieos-single .ieos-entry-title { font-size: 1.7rem; }
  .ieos-single-foot { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   5c. Article sidebar
   ========================================================================== */

.ieos-post-sidebar { position: sticky; top: 92px; align-self: flex-start; }
.ieos-post-sidebar .widget { padding: 16px 18px; }
.ieos-widget .widget-title { margin-bottom: 10px; }

/* Contents */
.ieos-toc-list { margin: 0; padding: 0 0 0 2px; list-style: none; counter-reset: toc; }
.ieos-toc-list li { counter-increment: toc; margin: 0 0 6px; font-size: .9rem; line-height: 1.4; }
.ieos-toc-list li::before { content: counter(toc) ". "; color: var(--ieos-muted); }
/* Sub-items keep the running number — a Q&A article is a list of questions, and a
   column of dashes loses the order that makes it useful. */
.ieos-toc-list .ieos-toc-l3 { margin-left: 12px; font-size: .85rem; }
.ieos-toc-list .ieos-toc-l3::before { content: counter(toc) ". "; }
.ieos-toc-list a { color: #334155; }
.ieos-toc-list a:hover { color: var(--ieos-green); }

/* Share */
.ieos-share-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ieos-share-btn {
  font-size: .8rem; font-weight: 700; line-height: 1;
  padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--ieos-line); background: #fff; color: var(--ieos-ink);
  cursor: pointer;
}
.ieos-share-btn:hover { border-color: var(--ieos-green); color: var(--ieos-green); text-decoration: none; }
.ieos-copy-link.is-done { border-color: var(--ieos-green); color: var(--ieos-green); }

/* Author */
.ieos-author-row { display: flex; gap: 12px; align-items: flex-start; }
.ieos-author-avatar { border-radius: 50%; flex: 0 0 56px; }
.ieos-author-name { font-weight: 800; color: var(--ieos-ink); display: block; margin-bottom: 4px; }
.ieos-author-bio { margin: 0; font-size: .85rem; line-height: 1.5; color: var(--ieos-muted); }

/* Related and recent */
.ieos-related-list, .ieos-recent-list { list-style: none; margin: 0; padding: 0; }
.ieos-related-list li, .ieos-recent-list li { margin: 0 0 10px; font-size: .9rem; line-height: 1.45; }
.ieos-related-list li:last-child, .ieos-recent-list li:last-child { margin-bottom: 0; }
.ieos-related-date { display: block; font-size: .75rem; color: var(--ieos-muted); margin-top: 2px; }

/* Tags and follow */
.ieos-tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.ieos-tag {
  font-size: .78rem; padding: 4px 10px; border-radius: 999px;
  background: #eef2f7; color: #334155;
}
.ieos-tag:hover { background: var(--ieos-green); color: #fff; text-decoration: none; }
.ieos-follow-note { margin: 0 0 8px; font-size: .85rem; color: var(--ieos-muted); }
.ieos-follow-link { font-weight: 700; font-size: .9rem; }

/* Anchor targets clear the sticky header */
/* Anchors clear the sticky row, including its wrapped second line. */
.td-post-content h2[id],
.td-post-content h3[id],
.ieos-story__title[id] { scroll-margin-top: 82px; }

@media (max-width: 860px) {
  .ieos-post-sidebar { position: static; }
}

/* Header search */
.ieos-search-form { display: flex; align-items: center; gap: 6px; }
.ieos-search-form input[type="search"] {
  border: 1px solid var(--ieos-line); border-radius: 999px;
  padding: 9px 14px; font: inherit; font-size: 13px; min-width: 200px; background: #fff; color: var(--ieos-ink);
}
.ieos-search-form input[type="search"]:focus { outline: 2px solid rgba(216,31,42,.35); outline-offset: 1px; }
.ieos-search-form button {
  border: 0; background: var(--ieos-bg-soft); border-radius: 999px;
  padding: 9px 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ieos-ink);
}
.ieos-search-form button:hover { background: var(--ieos-line); }

/* ==========================================================================
   5d. Front page — lead, second reads, four-across, river
   ========================================================================== */
.ieos-home { padding-top: 26px; padding-bottom: 34px; }

.ieos-story { min-width: 0; }
.ieos-story__body { min-width: 0; }
/* Cards stack their text and push the date to the bottom, so dates align across a row. */
.ieos-story--grid .ieos-story__body,
.ieos-story--arch-card .ieos-story__body { display: flex; flex-direction: column; flex: 1 1 auto; }
/* The river is a flex row: thumbnail left, text column right. */
.ieos-story--arch-river .ieos-story__body { flex: 1 1 auto; }
.ieos-story__kicker {
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 800; color: var(--ieos-red); margin: 0 0 6px;
}
.ieos-story__title { margin: 0 0 6px; letter-spacing: -.005em; }
.ieos-story__title a { color: var(--ieos-ink); }
.ieos-story__title a:hover { color: var(--ieos-red); text-decoration: none; }
.ieos-story__meta {
  font-size: .72rem; color: var(--ieos-muted); margin: 0;
  font-variant-numeric: tabular-nums;
}
.ieos-story__meta span { margin: 0 4px; }

/* Lead row */
.ieos-home__leadrow { display: grid; grid-template-columns: 1.6fr 1fr; gap: 26px; }
.ieos-story--lead .ieos-story__title {
  font-family: var(--ieos-display);
  font-weight: 400; font-size: 2.5rem; line-height: 1.06; margin-bottom: 10px;
}
.ieos-story--lead .ieos-story__stand {
  font-size: .98rem; line-height: 1.6; color: #4b4642; margin: 0 0 10px; max-width: 56ch;
}
.ieos-home__second {
  border-left: 1px solid var(--ieos-line);
  padding-left: 22px;
  display: flex; flex-direction: column; gap: 16px;
}
.ieos-story--second .ieos-story__title { font-size: 1.05rem; line-height: 1.28; font-weight: 800; }

/* Four across */
.ieos-home__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  border-top: 1px solid var(--ieos-line); border-bottom: 1px solid var(--ieos-line);
  padding: 18px 0; margin: 20px 0 0;
}
/* Dates line up across the row regardless of how many lines each headline takes. */
.ieos-story--grid { display: flex; flex-direction: column; }
.ieos-story--grid .ieos-story__title { font-size: .9rem; line-height: 1.32; font-weight: 700; }
.ieos-story--grid .ieos-story__meta { margin-top: auto; padding-top: 8px; }

/* River */
.ieos-home__riverhead {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ieos-muted); margin: 24px 0 4px; font-weight: 800;
}
.ieos-story--river { padding: 12px 0; border-bottom: 1px solid var(--ieos-line); }
.ieos-story--river:last-child { border-bottom: 0; }
.ieos-story--river .ieos-story__title { font-size: .95rem; line-height: 1.3; font-weight: 700; margin-bottom: 3px; }
.ieos-story--river .ieos-story__kicker { margin-bottom: 4px; }

@media (max-width: 980px) {
  .ieos-home__leadrow { grid-template-columns: 1fr; gap: 20px; }
  .ieos-home__second { border-left: 0; padding-left: 0; border-top: 1px solid var(--ieos-line); padding-top: 16px; }
  .ieos-home__grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .ieos-story--lead .ieos-story__title { font-size: 2rem; }
}
@media (max-width: 560px) {
  .ieos-home__grid { grid-template-columns: 1fr; }
  .ieos-story--lead .ieos-story__title { font-size: 1.7rem; }
}

/* ==========================================================================
   5e. Archives — mixed layout: lead row, grid, river, rail
   ========================================================================== */
.ieos-arch { padding-top: 24px; padding-bottom: 34px; }

.ieos-arch__crumbs {
  font-size: .78rem; color: var(--ieos-muted); margin-bottom: 10px;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.ieos-arch__crumbs a { color: var(--ieos-muted); }
.ieos-arch__crumbs a:hover { color: var(--ieos-red); }
.ieos-arch__crumb-now { color: var(--ieos-ink); font-weight: 600; }

.ieos-arch__title {
  font-family: var(--ieos-display);
  font-weight: 400; font-size: 2.4rem; line-height: 1.05; margin: 0 0 6px; letter-spacing: -.01em;
}
.ieos-arch__count {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .72rem; letter-spacing: .04em; color: var(--ieos-muted);
  margin: 0 0 4px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.ieos-arch__desc { font-size: .95rem; color: #4b4642; max-width: 68ch; margin: 8px 0 0; }
.ieos-arch__head { padding-bottom: 16px; border-bottom: 1px solid var(--ieos-line); margin-bottom: 20px; }

/* Chips */
.ieos-arch__chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 14px; }
.ieos-chip {
  font-size: .78rem; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--ieos-line); color: #3f3a36; background: #fff; white-space: nowrap;
}
.ieos-chip:hover { border-color: var(--ieos-ink); color: var(--ieos-ink); text-decoration: none; }
.ieos-chip.is-on { background: var(--ieos-ink); border-color: var(--ieos-ink); color: #fff; }

/* Story thumbnails — fixed ratio so every card lines up whatever the source image */
.ieos-story__thumb {
  display: block; overflow: hidden; border-radius: 10px; margin-bottom: 10px;
  background: var(--ieos-bg-soft);
}
.ieos-story__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ieos-story--arch-lead .ieos-story__thumb { aspect-ratio: 16 / 9; }
.ieos-story--arch-card .ieos-story__thumb { aspect-ratio: 16 / 9; }
.ieos-story--arch-river .ieos-story__thumb { width: 176px; height: 106px; flex: 0 0 176px; margin-bottom: 0; }

/* Lead row */
.ieos-arch__leadrow { display: grid; grid-template-columns: 1.55fr 1fr; gap: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--ieos-line); }
.ieos-story--arch-lead .ieos-story__title { font-family: var(--ieos-display); font-weight: 400; font-size: 2rem; line-height: 1.07; margin-bottom: 8px; }
.ieos-story--arch-lead .ieos-story__stand { font-size: .95rem; line-height: 1.6; color: #4b4642; margin: 0 0 8px; }
.ieos-arch__side { display: flex; flex-direction: column; border-left: 1px solid var(--ieos-line); padding-left: 20px; }
.ieos-arch__side > .ieos-story { padding: 12px 0; border-bottom: 1px solid var(--ieos-line); }
.ieos-arch__side > .ieos-story:first-child { padding-top: 0; }
.ieos-arch__side > .ieos-story:last-child { border-bottom: 0; }
.ieos-story--arch-side .ieos-story__title { font-size: 1rem; line-height: 1.28; font-weight: 800; }

/* Grid */
.ieos-arch__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  padding: 20px 0; border-bottom: 1px solid var(--ieos-line);
}
.ieos-story--arch-card { display: flex; flex-direction: column; }
.ieos-story--arch-card .ieos-story__title { font-size: .92rem; line-height: 1.32; font-weight: 700; }
.ieos-story--arch-card .ieos-story__meta { margin-top: auto; padding-top: 8px; }

/* Bottom: river + rail */
.ieos-arch__bottom { display: flex; gap: 24px; margin-top: 20px; }
.ieos-arch__river { flex: 1 1 0; min-width: 0; }
.ieos-arch__subhead {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ieos-muted); margin: 0 0 6px; font-weight: 800;
}
.ieos-story--arch-river {
  display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--ieos-line);
}
.ieos-story--arch-river:last-child { border-bottom: 0; }
.ieos-story--arch-river .ieos-story__title { font-size: .95rem; line-height: 1.3; font-weight: 700; margin-bottom: 4px; }
.ieos-story--arch-river .ieos-story__stand { font-size: .87rem; line-height: 1.5; color: #4b4642; margin: 0 0 4px; }
.ieos-arch__river--full .ieos-story--arch-river { padding: 14px 0; }

.ieos-arch__rail { width: 238px; flex: 0 0 238px; border-left: 1px solid var(--ieos-line); padding-left: 16px; }
.ieos-arch__railhead {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ieos-muted); margin: 0 0 8px; font-weight: 700;
}
.ieos-arch__mostread { margin: 0 0 18px; padding-left: 16px; font-size: .84rem; line-height: 1.45; }
.ieos-arch__mostread li { margin-bottom: 7px; }
.ieos-arch__railtags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.ieos-arch__railnote { font-size: .82rem; color: var(--ieos-muted); margin: 0 0 18px; }
.ieos-arch__railnl { background: #fdf3f3; border: 1px solid #f3d6d6; border-radius: 10px; padding: 12px; }
.ieos-arch__railnl p { margin: 0 0 6px; font-size: .84rem; font-weight: 700; }
.ieos-arch__railnl a { font-size: .82rem; font-weight: 700; }

.ieos-arch__empty { padding: 30px 0 40px; }
.ieos-arch__empty p { font-size: 1rem; color: var(--ieos-muted); }

@media (max-width: 980px) {
  .ieos-arch__leadrow { grid-template-columns: 1fr; gap: 18px; }
  .ieos-arch__side { border-left: 0; padding-left: 0; border-top: 1px solid var(--ieos-line); padding-top: 12px; }
  .ieos-arch__grid { grid-template-columns: repeat(2, 1fr); }
  .ieos-arch__bottom { flex-direction: column; }
  .ieos-arch__rail { width: 100%; flex: 1 1 auto; border-left: 0; padding-left: 0; border-top: 1px solid var(--ieos-line); padding-top: 16px; }
  .ieos-arch__title { font-size: 2rem; }
  .ieos-story--arch-lead .ieos-story__title { font-size: 1.6rem; }
}
@media (max-width: 640px) {
  .ieos-arch__grid { grid-template-columns: 1fr; }
  .ieos-story--arch-river .ieos-story__thumb { width: 120px; height: 72px; flex: 0 0 120px; }
  .ieos-arch__chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
}

/* ==========================================================================
   5f. Front-page thumbnails
   A post without a featured image has no .ieos-story__thumb at all, so the text closes
   up — the layout never reserves a box for a picture that does not exist.
   ========================================================================== */
.ieos-story--lead .ieos-story__thumb { aspect-ratio: 16 / 9; margin-bottom: 12px; }
.ieos-story--grid .ieos-story__thumb { aspect-ratio: 16 / 9; }
.ieos-story--grid .ieos-story__body { display: flex; flex-direction: column; flex: 1 1 auto; }

.ieos-story--river { display: flex; gap: 14px; }
.ieos-story--river .ieos-story__thumb { width: 176px; height: 106px; flex: 0 0 176px; margin-bottom: 0; }
.ieos-story--river .ieos-story__body { flex: 1 1 auto; min-width: 0; }

@media (max-width: 560px) {
  .ieos-story--river .ieos-story__thumb { width: 120px; height: 72px; flex: 0 0 120px; }
}

/* ==========================================================================
   8b. Pagination
   ========================================================================== */
.ieos-pager {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 34px 0 10px;
}

.ieos-pager__list {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  justify-content: center;
}

.ieos-pager__item { margin: 0; }

.ieos-pager .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--ieos-line);
  border-radius: 10px;
  background: #fff;
  color: var(--ieos-ink);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: border-color .14s ease, color .14s ease, background .14s ease;
}

.ieos-pager .page-numbers:hover {
  border-color: var(--ieos-green);
  color: var(--ieos-green);
}

.ieos-pager .page-numbers.current {
  background: var(--ieos-green);
  border-color: var(--ieos-green);
  color: #fff;
}

.ieos-pager .page-numbers.dots {
  border-color: transparent;
  background: transparent;
  min-width: 24px;
  padding: 0;
  color: var(--ieos-muted);
}

.ieos-pager .prev,
.ieos-pager .next { padding: 0 16px; }

.ieos-pager__count {
  margin: 0;
  font-size: .8rem;
  color: var(--ieos-muted);
  letter-spacing: .01em;
}

/* Paged listing header */
.ieos-paged-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--ieos-line);
  padding-bottom: 12px;
  margin: 0 0 6px;
}
.ieos-paged-head__title {
  font-family: var(--ieos-display);
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1.15;
  margin: 0;
  letter-spacing: -.01em;
}
.ieos-paged-head__meta {
  margin: 4px 0 0;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ieos-muted);
}
.ieos-paged-head__back {
  font-size: .8rem;
  font-weight: 600;
  color: var(--ieos-green);
  white-space: nowrap;
}
.ieos-paged-head__back:hover { text-decoration: none; color: var(--ieos-ink); }

/* Dense row: thumbnail left, text right */
.ieos-row {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid var(--ieos-line);
}
.ieos-row:hover .ieos-row__title a { color: var(--ieos-red); }
@media (min-width: 1200px) {
  .ieos-row__thumb { width: 232px; height: 131px; flex: 0 0 232px; }
  .ieos-row__title { font-size: 1.15rem; }
  .ieos-row__stand { font-size: .9rem; }
}
.ieos-row__thumb {
  width: 186px;
  height: 105px;
  flex: 0 0 186px;
  border-radius: 8px;
  overflow: hidden;
  display: block;
  background: var(--ieos-bg-soft);
}
.ieos-row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
.ieos-row__body { flex: 1 1 auto; min-width: 0; }
.ieos-row__kicker {
  margin: 0 0 4px;
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ieos-red);
  font-weight: 600;
}
.ieos-row__title {
  font-size: 1.02rem;
  line-height: 1.3;
  font-weight: 700;
  margin: 0 0 5px;
  letter-spacing: -.005em;
}
.ieos-row__title a { color: var(--ieos-ink); }
.ieos-row__title a:hover { color: var(--ieos-red); text-decoration: none; }
.ieos-row__stand {
  margin: 0 0 6px;
  font-size: .84rem;
  line-height: 1.5;
  color: #4b4642;
}
.ieos-row__side {
  flex: 0 0 132px;
  text-align: right;
  padding-top: 3px;
  font-size: .72rem;
  color: var(--ieos-muted);
  line-height: 1.7;
}
.ieos-row__side span { display: block; }
.ieos-row__title { max-width: 74ch; }
.ieos-row__stand { max-width: 78ch; }

@media (max-width: 560px) {
  .ieos-row { gap: 12px; }
  .ieos-row__thumb { width: 118px; height: 70px; flex: 0 0 118px; }
  .ieos-row__stand { display: none; }
  .ieos-row__title { font-size: .95rem; }
  .ieos-row__side { flex: 0 0 auto; font-size: .66rem; }
  .ieos-paged-head { flex-wrap: wrap; }
}

@media (max-width: 520px) {
  .ieos-pager .page-numbers { min-width: 36px; height: 36px; padding: 0 9px; font-size: .82rem; }
  .ieos-pager .prev,
  .ieos-pager .next { padding: 0 12px; }
}

/* ==========================================================================
   9. Front page — hero, feature cards, latest rows
   ========================================================================== */
.ieos-home { padding-top: 18px; }

/* Hero slider: one story at a time, arrows and dots, pausing on hover. The first slide is in
   the HTML, so with no JavaScript the page still shows a lead story. */
.ieos-hero-slider {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #0e1b31;
  height: clamp(340px, 40vw, 500px);
  margin: 0 0 22px;
  outline: none;
}

.ieos-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease, visibility .45s ease;
  pointer-events: none;
}
.ieos-slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; }

.ieos-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  z-index: 0;
}
.ieos-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(8, 15, 28, .10) 0%, rgba(8, 15, 28, .62) 55%, rgba(8, 15, 28, .93) 100%);
}

.ieos-slide__body {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: 30px 34px 34px;
  color: #fff;
  max-width: 780px;
}
.ieos-slide__title {
  font-family: var(--ieos-display);
  font-weight: 400;
  font-size: 2.3rem;
  line-height: 1.06;
  letter-spacing: -.015em;
  margin: 0;
  max-width: 26ch;
}
.ieos-slide__title a { color: #fff; }
.ieos-slide__title a:hover { color: #fff; text-decoration: none; opacity: .9; }
.ieos-slide__stand {
  margin: 0;
  font-size: .85rem;
  line-height: 1.55;
  color: #cfd8e4;
  max-width: 56ch;
}
.ieos-slide__foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }

.ieos-hero__more {
  background: var(--ieos-red);
  color: #fff;
  border-radius: 8px;
  padding: 9px 16px;
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.ieos-hero__more:hover { background: #b81822; color: #fff; text-decoration: none; }
.ieos-hero__meta { font-size: .72rem; color: #a9b7c9; }
.ieos-hero__meta span { margin: 0 5px; }

/* Controls */
.ieos-slide__arrows {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 3;
  display: flex;
  gap: 8px;
}
.ieos-slide__prev,
.ieos-slide__next {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .55);
  background: rgba(8, 15, 28, .35);
  color: #fff;
  font-size: .9rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, border-color .15s ease;
}
.ieos-slide__prev:hover,
.ieos-slide__next:hover { background: var(--ieos-red); border-color: var(--ieos-red); }

.ieos-slide__dots {
  position: absolute;
  right: 24px;
  bottom: 26px;
  z-index: 3;
  display: flex;
  gap: 7px;
}
.ieos-slide__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  cursor: pointer;
  transition: background .15s ease, width .15s ease, border-radius .15s ease;
}
.ieos-slide__dot.is-active { background: #fff; width: 22px; border-radius: 4px; }

@media (max-width: 700px) {
  .ieos-hero-slider { height: clamp(320px, 78vw, 430px); }
  .ieos-slide__body { padding: 20px 18px 22px; gap: 8px; }
  .ieos-slide__title { font-size: 1.5rem; max-width: none; }
  .ieos-slide__stand { display: none; }
  .ieos-slide__arrows { top: 12px; right: 12px; }
  .ieos-slide__dots { right: 16px; bottom: 16px; }
}

/* The static hero rules are gone; the cards keep their own styles. */
/* Category pill */
.ieos-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  background: var(--ieos-red);
  color: #fff;
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 5px;
  line-height: 1.2;
}

/* Three feature cards */
.ieos-feats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 0 0 26px;
}
.ieos-fcard {
  border: 1px solid var(--ieos-line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.ieos-fcard:hover,
.ieos-fcard:focus-visible {
  border-color: var(--ieos-red);
  box-shadow: 0 10px 26px rgba(28, 25, 23, .10);
  transform: translateY(-2px);
  outline: none;
  text-decoration: none;
}
.ieos-fcard:focus-visible { outline: 2px solid var(--ieos-red); outline-offset: 2px; }
.ieos-fcard:hover .ieos-fcard__arrow,
.ieos-fcard:focus-visible .ieos-fcard__arrow {
  background: var(--ieos-red);
  border-color: var(--ieos-red);
  color: #fff;
}
.ieos-fcard:hover .ieos-fcard__title { color: var(--ieos-red); }
.ieos-fcard__img { display: block; }
.ieos-fcard__body { display: flex; flex-direction: column; gap: 7px; flex: 1 1 auto; }
.ieos-fcard__title { display: block; }
.ieos-fcard__img {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--ieos-bg-soft);
  overflow: hidden;
}
.ieos-fcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
/* A card with no picture says so with a rule rather than an empty frame. */
.ieos-fcard.is-text {
  border-top: 3px solid var(--ieos-red);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.ieos-fcard.is-text .ieos-fcard__body { padding-top: 13px; }

.ieos-fcard__body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1 1 auto;
}
.ieos-fcard__title {
  font-size: .92rem;
  line-height: 1.32;
  font-weight: 700;
  margin: 0;
  letter-spacing: -.005em;
}
.ieos-fcard__title a { color: var(--ieos-ink); }
.ieos-fcard__title a:hover { color: var(--ieos-red); text-decoration: none; }
.ieos-fcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 4px;
  font-size: .68rem;
  color: var(--ieos-muted);
}
.ieos-fcard__foot span span { margin: 0 4px; }
.ieos-fcard__arrow {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--ieos-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  color: var(--ieos-muted);
  flex: 0 0 24px;
}

/* Latest */
.ieos-latest { margin: 0 0 4px; }
.ieos-sechead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 10px;
}
.ieos-sechead h2 {
  font-family: var(--ieos-ui, inherit);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0;
  padding-left: 11px;
  border-left: 4px solid var(--ieos-green);
  line-height: 1.3;
}
.ieos-sechead a {
  font-size: .74rem;
  font-weight: 600;
  color: var(--ieos-green);
  white-space: nowrap;
}
.ieos-sechead a:hover { text-decoration: none; color: var(--ieos-ink); }

@media (max-width: 900px) {
  .ieos-hero { grid-template-columns: 1fr; }
  .ieos-hero__art { min-height: 190px; order: -1; }
  .ieos-hero__title { font-size: 1.9rem; max-width: none; }
  .ieos-feats { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .ieos-hero__body { padding: 22px 20px; }
  .ieos-hero__title { font-size: 1.55rem; }
}


/* Footer: stay connected */
.ieos-fcol--news { min-width: 0; }
.ieos-news {
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 10px;
  padding: 12px 13px;
}
.ieos-news__copy {
  margin: 0 0 9px;
  font-size: .74rem;
  line-height: 1.5;
  color: inherit;
  opacity: .8;
}
.ieos-news__row { display: flex; gap: 6px; }
.ieos-news__field {
  flex: 1 1 auto;
  min-width: 0;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: .72rem;
  color: inherit;
}
.ieos-news__field::placeholder { color: rgba(255, 255, 255, .45); }
.ieos-news__btn {
  background: var(--ieos-red);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 7px 13px;
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.ieos-news__btn:hover { background: #b81822; color: #fff; text-decoration: none; }
.ieos-news__tagline {
  margin: 12px 0 0;
  font-family: var(--ieos-display);
  font-style: italic;
  font-size: .8rem;
  opacity: .65;
}

/* Hero headline: slightly smaller than the first cut so a long wire headline fits the panel.
   Deliberately not clamped — a headline cut off mid-phrase ("…and Sets Out a…") is worse than
   a fourth line. */
.ieos-hero__title { font-size: 2.15rem; }

/* Masthead: the search sits in the middle of the row rather than pinned to the right edge. */
.ieos-mast .ieos-search-form,
.ieos-mast__inner .ieos-search-form { margin-left: auto; }

/* The news plugin's local bar runs the site name into the weather with no gap. */
.cd-local-bar .cd-lb-brand,
.cd-local-bar .cd-lb-item:first-child { margin-right: 12px; }
.cd-local-bar .cd-lb-item + .cd-lb-item { margin-left: 10px; }

/* ==========================================================================
   9b. Front page — category sections (V1: tinted bands, dark lead card)
   ========================================================================== */
.ieos-cat {
  padding: 26px 20px 24px;
  margin: 0 -20px;
  border-top: 1px solid var(--ieos-line);
}
.ieos-cat.is-tint {
  background: #f3efe9;
  border-top-color: transparent;
}
.ieos-cat:first-of-type { border-top: 0; }

.ieos-cat__head {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  margin: 0 0 16px;
  flex-wrap: wrap;
}
.ieos-cat__bar { display: none; }
.ieos-cat__head h2 {
  font-family: var(--ieos-display);
  font-weight: 400;
  font-size: 1.85rem;
  line-height: 1;
  margin: 0;
  letter-spacing: -.01em;
}
.ieos-cat__desc {
  margin: 0;
  font-size: .72rem;
  line-height: 1.4;
  color: var(--ieos-muted);
  max-width: 52ch;
  padding-bottom: 2px;
}
.ieos-cat__count {
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #a8a09a;
  white-space: nowrap;
  padding-bottom: 3px;
}
.ieos-cat__acts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 2px;
}
.ieos-cat__all {
  font-size: .72rem;
  font-weight: 700;
  color: var(--ieos-ink);
  background: #fff;
  border: 1px solid var(--ieos-line);
  border-radius: 999px;
  padding: 6px 14px;
  white-space: nowrap;
}
.ieos-cat.is-tint .ieos-cat__all { background: #fff; }
.ieos-cat__all:hover { text-decoration: none; border-color: var(--ieos-green); color: var(--ieos-green); }

.ieos-cat__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 26px;
  align-items: start;
}

/* Lead: a solid card, not a column of type */
.ieos-clead {
  background: var(--ieos-ink, #1c1917);
  border-radius: 12px;
  padding: 16px 18px 18px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow .16s ease, transform .16s ease;
}
.ieos-clead:hover,
.ieos-clead:focus-visible {
  box-shadow: 0 10px 26px rgba(28, 25, 23, .18);
  transform: translateY(-2px);
  text-decoration: none;
}
.ieos-clead:focus-visible { outline: 2px solid var(--ieos-red); outline-offset: 2px; }
.ieos-clead__img { display: block; }
.ieos-clead__title { display: block; }
.ieos-clead__stand { display: block; }
.ieos-clead__img { display: block; margin: -16px -18px 4px; }
.ieos-clead__img img {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 220px;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
.ieos-clead__kick {
  margin: 0;
  font-size: .55rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #ff8b92;
  font-weight: 700;
}
.ieos-clead__title {
  font-family: var(--ieos-display);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.18;
  letter-spacing: -.01em;
  margin: 0;
}
.ieos-clead__title { color: #fff; }
.ieos-clead__stand {
  margin: 0;
  font-size: .76rem;
  line-height: 1.5;
  color: #c2c9d2;
  max-width: 52ch;
}
.ieos-clead .ieos-citem__meta { color: #93a0b0; margin-top: 2px; }

/* Numbered items */
.ieos-ccol { min-width: 0; }
.ieos-citem {
  display: flex;
  gap: 11px;
  padding: 10px 0;
  border-top: 1px solid rgba(28, 25, 23, .09);
}
.ieos-ccol .ieos-citem:first-child { border-top: 0; padding-top: 0; }
.ieos-citem__n {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .62rem;
  color: #b8b0a6;
  padding-top: 2px;
  flex: 0 0 16px;
}
.ieos-citem__body { min-width: 0; }
.ieos-citem__title {
  font-size: .82rem;
  line-height: 1.32;
  font-weight: 700;
  margin: 0 0 3px;
  letter-spacing: -.005em;
}
.ieos-citem__title a { color: var(--ieos-ink); }
.ieos-citem__title a:hover { color: var(--ieos-red); text-decoration: none; }
.ieos-citem__meta { margin: 0; font-size: .64rem; color: var(--ieos-muted); }
.ieos-citem__meta span { margin: 0 4px; }

/* Load more */
.ieos-cat__extra {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 26px;
}
.ieos-cat__extra:not(:empty) { margin-top: 16px; }
.ieos-cat__extra .ieos-citem { border-top: 1px solid rgba(28, 25, 23, .09); padding-top: 10px; }

.ieos-loadmore {
  font-size: .72rem;
  font-weight: 600;
  color: var(--ieos-muted);
  text-decoration: none;
  border-bottom: 1px dashed #cfc6bb;
  padding-bottom: 1px;
  white-space: nowrap;
}
.ieos-loadmore:hover { color: var(--ieos-green); border-bottom-color: var(--ieos-green); text-decoration: none; }
.ieos-loadmore.is-loading { opacity: .6; pointer-events: none; }

@media (max-width: 1000px) {
  .ieos-cat__grid { grid-template-columns: 1fr 1fr; }
  .ieos-clead { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .ieos-cat__grid { grid-template-columns: 1fr; gap: 18px; }
  .ieos-cat__extra { grid-template-columns: 1fr; }
  .ieos-cat__desc, .ieos-cat__count { display: none; }
  .ieos-cat { padding: 20px 16px; margin: 0 -16px; }
  .ieos-cat__head h2 { font-size: 1.5rem; }
}