/* ==========================================================================
   Everyday Oral Surgery — Design System
   Clinical & precise. Crisp whites, sharp type, surgical accents.
   --------------------------------------------------------------------------
   Adapted from the design prototype (EDOS REDESIGN/styles.css).
   ========================================================================== */

:root {
  /* Type */
  --font-display: "Fraunces", "Source Serif Pro", Georgia, serif;
  --font-sans:    "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Neutrals — cool, surgical, slightly blue */
  --ink-900: #0b1320;
  --ink-800: #11192a;
  --ink-700: #1e2a40;
  --ink-600: #3a4863;
  --ink-500: #5a6a85;
  --ink-400: #8593ab;
  --ink-300: #b6bfd0;
  --ink-200: #dde2ec;
  --ink-150: #e8ecf3;
  --ink-100: #f1f4f9;
  --ink-50:  #f8fafd;
  --paper:   #ffffff;

  /* Accent — default: clinical blue */
  --accent:      #1e63d8;
  --accent-soft: #e7efff;
  --accent-ink:  #0a3a8c;
  --accent-on:   #ffffff;

  /* Semantic */
  --positive: #1e8a5a;
  --warning:  #b8722a;
  --danger:   #b8413a;

  /* Layout */
  --maxw: 1200px;
  --gutter: 32px;
  --radius: 6px;
  --radius-lg: 10px;

  /* Density */
  --density: 1;
  --pad-y: calc(20px * var(--density));
  --pad-x: calc(24px * var(--density));
  --gap: calc(20px * var(--density));
  --section-y: calc(96px * var(--density));
  --row-y: calc(18px * var(--density));
}

[data-density="compact"] { --density: 0.78; }

[data-accent="navy"] {
  --accent: #0d3b8c; --accent-soft: #e6ecf7; --accent-ink: #07235a;
}
[data-accent="teal"] {
  --accent: #0f7a82; --accent-soft: #e2f4f3; --accent-ink: #06484c;
}
[data-accent="ink"] {
  --accent: #1e2a40; --accent-soft: #eaedf3; --accent-ink: #0b1320;
}
[data-accent="ember"] {
  --accent: #b34a2a; --accent-soft: #fbece4; --accent-ink: #6e2a16;
}

/* Reset / base
   ----------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body, html {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  color: var(--ink-900);
  background: var(--paper);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
img { max-width: 100%; height: auto; }
button { font: inherit; }

/* Typography
   ----------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-500);
  font-weight: 500;
}
.eyebrow-accent { color: var(--accent); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink-900);
}
h1 { font-size: clamp(44px, 5.6vw, 76px); line-height: 1.02; }
h2 { font-size: clamp(28px, 3vw, 44px); line-height: 1.08; }
h3 { font-size: 22px; line-height: 1.2; }

p { margin: 0; line-height: 1.55; color: var(--ink-700); }

.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}

/* Layout primitives
   ----------------------------------------------------------------------- */
.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.divider { height: 1px; background: var(--ink-200); border: 0; margin: 0; }

/* Buttons
   ----------------------------------------------------------------------- */
/* `!important` on display/align here defends against BoldGrid's
   block-level button rules + 40px line-height that broke vertical
   centering and made text overflow the button. The `body button.btn`
   selector ensures we beat BoldGrid's `.btn` rule on native <button>
   elements that get extra UA padding. */
.btn,
body .btn,
body a.btn,
body button.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1 !important;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s, color .15s, transform .05s;
  white-space: nowrap;
  text-decoration: none !important;
  text-align: center !important;
  text-transform: none !important;
  vertical-align: middle;
  text-indent: 0 !important;
  box-sizing: border-box !important;
}
/* BoldGrid's Bootstrap rules add a baseline-shifted vertical-align on
   inline SVGs inside buttons that visibly bumps the icon up against the
   text top. Force a true center alignment. */
body .btn svg,
body a.btn svg,
body button.btn svg {
  vertical-align: middle !important;
  flex-shrink: 0;
}
.btn:active { transform: translateY(0.5px); }

/* `body` prefix bumps specificity above BoldGrid's plain `.btn-primary` rule.
   `font-weight` needs !important because BoldGrid forces 300 (thin) on buttons,
   which makes white-on-blue text look semi-invisible. */
body .btn, body a.btn { font-weight: 600 !important; }
body .btn-primary, body a.btn-primary { background: var(--accent); color: var(--accent-on) !important; border-color: var(--accent); }
body .btn-primary:hover, body a.btn-primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--accent-on) !important; }

body .btn-ghost, body a.btn-ghost { background: transparent; color: var(--ink-900) !important; border-color: var(--ink-200); }
body .btn-ghost:hover, body a.btn-ghost:hover { border-color: var(--ink-400); background: var(--ink-50); color: var(--ink-900) !important; }

body .btn-dark, body a.btn-dark { background: var(--ink-900); color: white !important; border-color: var(--ink-900); }
body .btn-dark:hover, body a.btn-dark:hover { background: var(--ink-800); color: white !important; }

/* On the dark forum hero, ghost button is a translucent white outline */
.eos-forum-hero .btn-ghost {
  color: white !important;
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.04);
}
.eos-forum-hero .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.35);
  color: white !important;
}

/* On the dark front-page hero, "Listen now" reads better as a solid white
   button with dark text — high contrast against the navy background.
   The extra `body` and `.fp-hero-buttons` selectors are needed to beat
   the rgba background rule in front-page.css. */
body .fp-hero .btn-ghost,
body .fp-hero a.btn-ghost,
body .fp-hero-buttons .btn-ghost,
body .fp-hero-buttons a.btn-ghost {
  background: #ffffff !important;
  color: var(--ink-900) !important;
  border-color: #ffffff !important;
}
body .fp-hero .btn-ghost:hover,
body .fp-hero a.btn-ghost:hover,
body .fp-hero-buttons .btn-ghost:hover,
body .fp-hero-buttons a.btn-ghost:hover {
  background: var(--ink-100) !important;
  color: var(--ink-900) !important;
  border-color: var(--ink-100) !important;
}
body .fp-hero .btn-ghost svg,
body .fp-hero-buttons .btn-ghost svg { fill: var(--ink-900) !important; }

.btn-link { background: transparent; color: var(--accent); padding: 8px 0; font-weight: 500; }
.btn-link:hover { color: var(--accent-ink); }

/* Tags / chips
   ----------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--ink-100);
  color: var(--ink-700);
  border: 1px solid var(--ink-200);
}
.chip-accent { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }
.chip-dot::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Verified badge
   ----------------------------------------------------------------------- */
.verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-sans);
  letter-spacing: 0;
}
.verified svg { width: 14px; height: 14px; }

/* Cards
   ----------------------------------------------------------------------- */
.card {
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  transition: border-color .15s, transform .15s;
}
.card-hover:hover { border-color: var(--ink-400); }

/* Avatar
   ----------------------------------------------------------------------- */
.avatar {
  border-radius: 50%;
  background: var(--ink-150);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--ink-700);
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}
.avatar.size-24 { width: 24px; height: 24px; font-size: 10px; }
.avatar.size-32 { width: 32px; height: 32px; font-size: 12px; }
.avatar.size-40 { width: 40px; height: 40px; font-size: 14px; }
.avatar.size-56 { width: 56px; height: 56px; font-size: 18px; }
.avatar.size-72 { width: 72px; height: 72px; font-size: 22px; }
.avatar img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 50%;
}
a.avatar { text-decoration: none; cursor: pointer; }
a.avatar:hover { opacity: 0.85; }

/* Image placeholder
   ----------------------------------------------------------------------- */
.img-placeholder {
  background:
    repeating-linear-gradient(
      135deg,
      var(--ink-100) 0 14px,
      var(--ink-150) 14px 28px
    );
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-500);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Top nav
   ----------------------------------------------------------------------- */
.topnav {
  border-bottom: 1px solid var(--ink-200);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
          backdrop-filter: saturate(140%) blur(8px);
  position: sticky;
  top: 0;
  z-index: 50;
}
.topnav-inner {
  display: flex;
  align-items: center;
  height: 68px;
  gap: 32px;
}
/* BoldGrid's bootstrap injects `.container::before` / `::after` clearfix
   pseudo-elements. Inside a flex layout they act as zero-width flex items
   and hijack `justify-content`, pushing real children inward by an extra
   gap-width on each side. Kill them on our flex containers. */
.topnav-inner::before,
.topnav-inner::after {
  display: none !important;
  content: none !important;
}
.brand-mark { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-mark img,
.brand-mark .custom-logo {
	height: 44px !important;
	width: 44px !important;
	max-height: 44px !important;
	max-width: 44px !important;
	object-fit: cover;
	border-radius: 6px;
	display: block;
	flex-shrink: 0;
}
.brand-mono {
  width: 38px; height: 38px;
  border-radius: 4px;
  background: var(--ink-900);
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 4px;
  gap: 1px;
}
.brand-mono span { letter-spacing: 0.06em; }
.brand-mono .accent { color: var(--accent); }
.brand-name { font-family: var(--font-display); font-size: 18px; letter-spacing: -0.01em; color: var(--ink-900); }
.brand-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-top: 1px;
}
.nav-list { display: flex; align-items: center; gap: 4px; margin-left: auto; font-size: 14px; }
.nav-link {
  padding: 8px 14px;
  color: var(--ink-700);
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}
.nav-link:hover { color: var(--ink-900); background: var(--ink-50); }
.nav-link.active, .nav-link.current-menu-item { color: var(--ink-900); font-weight: 500; }

.nav-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--ink-200);
  border-radius: 6px;
  font-size: 13px;
  color: var(--ink-500);
  background: var(--paper);
  margin-left: 12px;
  min-width: 240px;
  transition: border-color .15s, box-shadow .15s;
}
.nav-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.nav-search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-900);
  padding: 0;
  height: 100%;
}
.nav-search-input::placeholder { color: var(--ink-500); }

/* Notifications bell + dropdown
   ----------------------------------------------------------------------- */
.eos-notif-bell-wrap { position: relative; margin-left: 6px; }
.eos-notif-bell {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  border: 1px solid var(--ink-200);
  background: var(--paper);
  color: var(--ink-700);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background .15s, border-color .15s;
}
.eos-notif-bell:hover { border-color: var(--ink-400); background: var(--ink-50); color: var(--ink-900); }
.eos-notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-on);
  font-size: 9px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  border: 2px solid var(--paper);
}
.eos-notif-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  width: 360px;
  max-height: 480px;
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(11, 19, 32, 0.12);
  display: flex;
  flex-direction: column;
  z-index: 100;
  overflow: hidden;
  margin-top: 8px;
}
/* Hoverable bridge that fills the 8px gap between bell and dropdown so
   moving the cursor between them doesn't fire mouseleave. */
.eos-notif-dropdown::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
  background: transparent;
  pointer-events: auto;
}
/* Belt-and-suspenders: enforce hidden on the dropdown even if a parent
   theme/plugin sets `display: flex` on .eos-notif-dropdown. */
.eos-notif-dropdown[hidden] {
  display: none !important;
}
.eos-notif-dropdown-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--ink-200);
}
.eos-notif-list {
  flex: 1;
  overflow-y: auto;
  max-height: 360px;
}
.eos-notif-list-empty {
  padding: 32px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-500);
}
.eos-notif-item {
  display: block;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ink-150);
  text-decoration: none;
  color: inherit;
  transition: background .15s;
}
.eos-notif-item:last-child { border-bottom: 0; }
.eos-notif-item:hover { background: var(--ink-50); }
.eos-notif-item.is-unread { background: var(--accent-soft); }
.eos-notif-item.is-unread:hover { background: var(--accent-soft); }
.eos-notif-item-line {
  font-size: 13px;
  color: var(--ink-900);
  line-height: 1.4;
  margin-bottom: 3px;
}
.eos-notif-item-line strong { color: var(--ink-900); font-weight: 600; }
.eos-notif-item-time {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-500);
  text-transform: uppercase;
}
.eos-notif-footer {
  display: block;
  padding: 10px 16px;
  border-top: 1px solid var(--ink-200);
  text-align: center;
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
  background: var(--ink-50);
}
.eos-notif-footer:hover { background: var(--ink-100); color: var(--accent-ink); }

/* Footer
   ----------------------------------------------------------------------- */
.site-footer {
  background: var(--ink-900);
  color: var(--ink-300);
  padding: 64px 0 32px;
  margin-top: 80px;
}
.site-footer h4 {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-400);
  margin-bottom: 18px;
}
.site-footer a:hover { color: white; }
.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
}
.site-footer .col-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
}
.site-footer .col-list a { color: var(--ink-300); }
.site-footer .col-list li { list-style: none; }
.site-footer .footer-bottom {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-500);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

/* Section heading
   ----------------------------------------------------------------------- */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 36px;
}
.section-head .lead { max-width: 540px; color: var(--ink-600); font-size: 15px; margin-top: 8px; }

/* Subtle grid background for hero
   ----------------------------------------------------------------------- */
.hero-grid-bg {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* Reset list
   ----------------------------------------------------------------------- */
ul.clean, ol.clean { list-style: none; padding: 0; margin: 0; }

/* Inputs
   ----------------------------------------------------------------------- */
.input {
  width: 100%;
  height: 42px;
  border: 1px solid var(--ink-200);
  border-radius: 6px;
  padding: 0 14px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink-900);
  background: var(--paper);
  outline: none;
}
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea.input { height: auto; padding: 12px 14px; resize: vertical; min-height: 120px; line-height: 1.5; }

/* Search filters bar (search.php)
   ----------------------------------------------------------------------- */
.eos-search-filters {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.eos-search-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}
.eos-search-filter-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.eos-search-filter-select {
  width: auto;
  height: 36px;
  padding: 0 28px 0 12px;
  font-size: 13px;
  min-width: 160px;
}
.eos-search-filter-clear {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-500);
  text-decoration: none;
  margin-top: 16px;
  padding: 6px 0;
}
.eos-search-filter-clear:hover { color: var(--accent); }

/* Specialty cards
   ----------------------------------------------------------------------- */
.specialty-card {
  border: 1px solid var(--ink-200);
  background: var(--paper);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  position: relative;
}
.specialty-card:hover { border-color: var(--ink-900); background: var(--ink-50); }
.specialty-card .num { font-family: var(--font-mono); font-size: 11px; color: var(--ink-400); letter-spacing: 0.06em; }
.specialty-card .title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.specialty-card .name { font-family: var(--font-display); font-weight: 500; font-size: 22px; letter-spacing: -0.01em; color: var(--ink-900); }
.specialty-card .count { font-family: var(--font-mono); font-size: 11px; color: var(--ink-500); }
.specialty-card .desc { font-size: 13px; color: var(--ink-600); line-height: 1.5; }
.specialty-card .meta {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-500);
}

/* Default content area styling for fallback templates
   (until per-template stylesheets are built in later sessions)
   ----------------------------------------------------------------------- */
.eos-content {
  max-width: 760px;
  margin: 64px auto 96px;
  padding: 0 var(--gutter);
}
.eos-content h1 { margin-bottom: 24px; }
.eos-content h2 { margin: 48px 0 16px; font-size: 30px; }
.eos-content h3 { margin: 32px 0 12px; }
.eos-content p { font-size: 16px; color: var(--ink-700); margin-bottom: 16px; }
.eos-content ul, .eos-content ol { font-size: 16px; color: var(--ink-700); padding-left: 24px; margin-bottom: 16px; }
.eos-content li { margin-bottom: 6px; }
.eos-content img { border-radius: var(--radius); margin: 24px 0; }
.eos-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.eos-content a:hover { color: var(--accent-ink); }
.eos-content blockquote {
  border-left: 3px solid var(--accent);
  padding: 8px 16px;
  margin: 24px 0;
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-radius: 0 4px 4px 0;
}

/* About page
   ----------------------------------------------------------------------- */
.ab-hero { border-bottom: 1px solid var(--ink-200); padding: 80px 0 56px; }
.ab-hero h1 { margin: 16px 0 28px; max-width: 980px; font-size: clamp(40px, 5vw, 64px); }
.ab-hero-lede { font-size: 19px; max-width: 720px; color: var(--ink-600); line-height: 1.55; }
.ab-section { padding: var(--section-y) 0; }
.ab-grid { display: grid; grid-template-columns: 200px 1fr; gap: 80px; }
.ab-grid-body { max-width: 880px; }
.ab-grid-body p { font-size: 17px; margin-bottom: 20px; color: var(--ink-700); }
.ab-hosts { padding-top: 0; }
.ab-host-card { padding: 32px; display: grid; grid-template-columns: 200px 1fr; gap: 32px; }
.ab-host-portrait { width: 200px; height: 240px; border-radius: 4px; object-fit: cover; display: block; }
.ab-host-since { color: var(--ink-500); font-size: 11px; margin-bottom: 8px; }
.ab-host-name { font-size: 28px; margin-bottom: 4px; letter-spacing: -0.02em; }
.ab-host-role { font-size: 14px; color: var(--ink-500); margin-bottom: 20px; }
.ab-host-bio-p { font-size: 14px; margin-bottom: 12px; color: var(--ink-700); }
.ab-host-stats { display: flex; gap: 24px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--ink-200); }
.ab-host-stat-label { color: var(--ink-500); font-size: 10px; }
.ab-host-stat-num { font-family: var(--font-display); font-size: 24px; color: var(--ink-900); }
.ab-timeline-section { background: var(--ink-50); }
.ab-timeline { display: flex; flex-direction: column; }
.ab-timeline-row { display: grid; grid-template-columns: 100px 32px 1fr; gap: 24px; padding-bottom: 32px; }
.ab-timeline-row-last { padding-bottom: 0; }
.ab-timeline-year { color: var(--accent); font-size: 13px; padding-top: 6px; }
.ab-timeline-marker { position: relative; display: flex; justify-content: center; }
.ab-timeline-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); margin-top: 8px; position: relative; z-index: 1; }
.ab-timeline-line { position: absolute; top: 18px; bottom: -32px; width: 1px; background: var(--ink-200); }
.ab-timeline-body { padding-bottom: 24px; border-bottom: 1px solid var(--ink-200); }
.ab-timeline-row-last .ab-timeline-body { border-bottom: 0; }
.ab-timeline-title { font-family: var(--font-display); font-size: 20px; color: var(--ink-900); margin-bottom: 6px; letter-spacing: -0.01em; }
.ab-timeline-desc { font-size: 14px; color: var(--ink-600); }
.ab-values-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.ab-value { padding-top: 20px; border-top: 1px solid var(--ink-300); }
.ab-value-num { color: var(--ink-400); font-size: 12px; }
.ab-value-title { font-size: 20px; margin-top: 8px; margin-bottom: 10px; }
.ab-value-desc { font-size: 14px; color: var(--ink-600); }
.ab-cta { background: var(--ink-900); color: white; padding: var(--section-y) 0; }
.ab-cta-inner { text-align: center; max-width: 800px; margin: 0 auto; padding: 0 var(--gutter); }
.ab-cta h2 { color: white; margin-top: 16px; margin-bottom: 24px; font-size: clamp(32px, 4vw, 48px); }
.ab-cta h2 em { font-style: italic; font-weight: 400; color: var(--ink-400); }
.ab-cta p { color: rgba(255,255,255,0.65); font-size: 16px; margin-bottom: 36px; }
.ab-cta-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.ab-cta-buttons .btn-primary { height: 48px; padding: 0 22px; }
.ab-cta-buttons .btn-ghost { height: 48px; padding: 0 22px; }

/* Page wrapper for non-front-page pages */
.eos-page { min-height: 50vh; }

/* ---- Blog landing (template-blog.php) -------------------------------- */
.eos-blog-head {
	padding: 80px 0 24px;
	border-bottom: 1px solid var(--ink-200);
}
.eos-blog-h1 {
	margin: 16px 0 20px;
	font-size: clamp(40px, 5vw, 64px);
}
.eos-blog-lede {
	max-width: 720px;
	font-size: 18px;
	color: var(--ink-600);
	line-height: 1.55;
}
.eos-blog-list-wrap { padding: 56px 0 96px; }
.eos-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
.eos-blog-card {
	display: flex;
	flex-direction: column;
	background: var(--paper);
	border: 1px solid var(--ink-200);
	border-radius: 8px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: border-color .15s, transform .12s, box-shadow .15s;
	min-height: 320px;
}
.eos-blog-card:hover {
	border-color: var(--ink-900);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(11, 19, 32, 0.06);
}
.eos-blog-card-thumb {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	background: var(--ink-100);
	overflow: hidden;
	flex-shrink: 0;
}
.eos-blog-card-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}
.eos-blog-card:hover .eos-blog-card-img {
	transform: scale(1.03);
}
.eos-blog-card-thumb-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		repeating-linear-gradient(
			135deg,
			var(--ink-100) 0 14px,
			var(--ink-150) 14px 28px
		);
	font-size: 14px;
	letter-spacing: 0.16em;
	color: var(--ink-400);
}
.eos-blog-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 24px 24px 24px;
}
.eos-blog-card-meta {
	font-size: 11px;
	color: var(--ink-500);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	display: flex;
	gap: 8px;
	align-items: center;
	margin-bottom: 14px;
}
.eos-blog-card-meta .dot { color: var(--ink-300); }
.eos-blog-card-title {
	font-family: var(--font-display);
	font-size: 22px;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--ink-900);
	margin: 0 0 12px;
}
.eos-blog-card-excerpt {
	font-size: 14px;
	color: var(--ink-600);
	line-height: 1.55;
	margin: 0 0 18px;
	flex: 1;
}
.eos-blog-card-cta {
	margin-top: auto;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
}
.eos-blog-empty {
	padding: 48px 0;
	color: var(--ink-500);
	text-align: center;
}
@media (max-width: 980px) {
	.eos-blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
	.eos-blog-head { padding: 56px 0 16px; }
	.eos-blog-list-wrap { padding: 32px 0 56px; }
	.eos-blog-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* ---- Single post (single.php) — wider than .eos-content default ------ */
.eos-single { padding: 0 0 96px; }
.eos-single-head {
	padding: 56px 0 36px;
	border-bottom: 1px solid var(--ink-200);
}
.eos-single-crumb {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-500);
	display: flex;
	gap: 8px;
	align-items: center;
	margin-bottom: 20px;
}
.eos-single-crumb a { color: var(--ink-500); transition: color .15s; }
.eos-single-crumb a:hover { color: var(--accent); }
.eos-single-crumb span { color: var(--ink-300); }
.eos-single-title {
	margin: 0 0 28px;
	font-size: clamp(36px, 4.4vw, 56px);
	line-height: 1.08;
	max-width: 920px;
}
.eos-single-byline {
	display: flex;
	align-items: center;
	gap: 14px;
}
.eos-single-byline-name {
	font-size: 14px;
	color: var(--ink-900);
	font-weight: 500;
}
.eos-single-byline-meta {
	font-size: 11px;
	color: var(--ink-500);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	display: flex;
	gap: 8px;
	margin-top: 4px;
}
.eos-single-hero-wrap {
	margin: 40px auto 0;
}
.eos-single-hero {
	display: block;
	width: 100%;
	height: auto;
	max-height: 540px;
	object-fit: cover;
	border-radius: 8px;
}
.eos-single-body {
	max-width: 880px;
	margin: 56px auto 0;
}
.eos-single-body p { font-size: 18px; line-height: 1.72; color: var(--ink-800); margin-bottom: 22px; }
.eos-single-body h2 { font-size: 32px; margin: 56px 0 18px; }
.eos-single-body h3 { font-size: 24px; margin: 40px 0 14px; }
.eos-single-body ul, .eos-single-body ol { font-size: 18px; line-height: 1.72; color: var(--ink-800); padding-left: 24px; margin-bottom: 22px; }
.eos-single-body li { margin-bottom: 8px; }
.eos-single-body blockquote {
	border-left: 3px solid var(--accent);
	padding: 12px 20px;
	margin: 32px 0;
	background: var(--accent-soft);
	color: var(--accent-ink);
	border-radius: 0 6px 6px 0;
	font-size: 17px;
}
.eos-single-body img { border-radius: 6px; margin: 32px 0; }
.eos-single-tags {
	max-width: 880px;
	margin: 56px auto 0;
	padding-top: 28px;
	border-top: 1px solid var(--ink-200);
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.eos-single-comments { max-width: 880px; margin: 48px auto 0; }
@media (max-width: 720px) {
	.eos-single-head { padding: 40px 0 28px; }
	.eos-single-body { margin-top: 36px; }
	.eos-single-body p, .eos-single-body ul, .eos-single-body ol { font-size: 17px; }
	.eos-single-hero { max-height: 320px; }
}

/* ---- Podcast page (wider than .eos-content default) ------------------ */
.eos-podcast-page { padding: 0 0 96px; }
.eos-podcast-page-head {
	padding: 64px 0 40px;
	border-bottom: 1px solid var(--ink-200);
	margin-bottom: 40px;
}
.eos-podcast-page-h1 {
	margin: 16px 0 0;
	font-size: clamp(40px, 5vw, 64px);
}
.eos-podcast-page-body { max-width: none; }
.eos-podcast-page-body h2 {
	font-size: 28px;
	margin: 48px 0 20px;
}
.eos-podcast-page-body ul {
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}
.eos-podcast-page-body ul li {
	background: var(--paper);
	border: 1px solid var(--ink-200);
	border-radius: 6px;
	padding: 16px 20px;
	font-size: 15px;
}
.eos-podcast-page-body ul li a { color: var(--accent); }
.eos-podcast-page-body ul li a:hover { color: var(--accent-ink); }
@media (max-width: 720px) {
	.eos-podcast-page-body ul { grid-template-columns: 1fr; }
}
.eos-content-body p { font-size: 17px; line-height: 1.7; color: var(--ink-800); margin-bottom: 18px; }
.eos-content-body h2 { margin: 48px 0 16px; font-size: 32px; }
.eos-content-body h3 { margin: 32px 0 12px; }
.eos-content-body ul, .eos-content-body ol { font-size: 17px; padding-left: 24px; margin-bottom: 18px; color: var(--ink-800); line-height: 1.7; }
.eos-content-body li { margin-bottom: 6px; }
.eos-content-body img { border-radius: var(--radius); margin: 24px 0; }
.eos-content-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.eos-content-body a:hover { color: var(--accent-ink); }
.eos-content-body blockquote {
	border-left: 3px solid var(--accent);
	padding: 8px 16px;
	margin: 24px 0;
	background: var(--accent-soft);
	color: var(--accent-ink);
	border-radius: 0 4px 4px 0;
}

/* ---- Page hero (shared with forum hero — same dark navy banner) -----
   These rules used to live only in forum.css, which is gated behind
   eos2026_is_forum_page(). Moving them here lets the same hero render
   on the Blog, Podcast, and Social Media landing pages. The rules are
   identical to what forum.css declares, so duplicating on /community/
   pages is a no-op cascade. */
.eos-forum-hero {
	background: var(--ink-900);
	color: white;
	padding: 56px 0 48px;
	border-bottom: 1px solid var(--ink-200);
}
.eos-forum-hero-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}
/* Kill BoldGrid's bootstrap `.container::before/::after` clearfix on the
   flex row so it doesn't hijack justify-content. */
.eos-forum-hero-row::before,
.eos-forum-hero-row::after,
.eos-forum-hero-actions::before,
.eos-forum-hero-actions::after {
	display: none !important;
	content: none !important;
}
.eos-forum-hero h1 {
	color: white;
	margin: 10px 0 0;
	font-size: clamp(28px, 3.4vw, 44px);
	letter-spacing: -0.02em;
}
.eos-forum-hero p {
	color: rgba(255, 255, 255, 0.6);
	font-size: 15px;
	margin-top: 12px;
	max-width: 540px;
}
.eos-forum-hero .btn-primary { height: 44px; }
.eos-forum-hero-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}

/* ---- Register page (/register/) — Ultimate Member form 7 retheme.
   Function untouched (UM still validates and creates the user); we only
   restyle the rendered fields to match the eos-2026 design system.
   Scoped to body.um-page-register so it never affects other UM forms.
   ----------------------------------------------------------------------- */
body.um-page-register {
	background: var(--ink-50);
}
/* Tighten the default page-template title block — keep "PAGE / Register"
   but pull the spacing in close so it doesn't create a huge empty band
   above the form card. */
body.um-page-register .eos-page {
	min-height: 0 !important;
}
body.um-page-register .eos-content {
	margin: 24px auto 0 !important;
	padding-top: 0 !important;
	max-width: 640px !important;
}
body.um-page-register .eos-content > h1 {
	margin: 8px 0 0 !important;
	font-size: clamp(32px, 4vw, 48px) !important;
	line-height: 1.05 !important;
}
/* Pull the form card up close to the title block — the .boldgrid-section
   .container under .eos-content gets the form, and its top padding was 56px. */
body.um-page-register .boldgrid-section .container,
body.um-page-register .entry-content .container {
	max-width: 640px !important;
	padding: 24px var(--gutter) 96px !important;
}
/* Center the page content — main wrapper (BoldGrid section + container) */
body.um-page-register .boldgrid-section,
body.um-page-register .entry-content {
	background: transparent !important;
}
/* Constrain ONLY the form's container, not the topnav (which also uses
   .container). Scope via .boldgrid-section / .entry-content so the
   header's .container.topnav-inner isn't affected. */
body.um-page-register .boldgrid-section .container,
body.um-page-register .entry-content .container {
	max-width: 640px !important;
	padding: 56px var(--gutter) 96px !important;
}
/* Card: wrap UM form in a white card with a heading injected */
body.um-page-register .um {
	background: var(--paper) !important;
	border: 1px solid var(--ink-200) !important;
	border-radius: 12px !important;
	box-shadow: 0 12px 32px rgba(11, 19, 32, 0.06) !important;
	padding: 36px !important;
	max-width: none !important;
	margin: 0 !important;
	font-family: var(--font-sans) !important;
}
body.um-page-register .um::before {
	content: "Join the community";
	display: block;
	font-family: var(--font-display);
	font-size: clamp(28px, 3vw, 36px);
	letter-spacing: -0.02em;
	color: var(--ink-900);
	line-height: 1.1;
	margin-bottom: 8px;
}
/* Intro line shown directly under "Join the community" and above the
   first form field (Username). Sits inside the .um-form so it stacks
   above the field grid. */
body.um-page-register .um-form::before {
	content: "This information is required to maintain the integrity of the forum. All new users are manually reviewed and confirmed.";
	display: block;
	font-family: var(--font-sans);
	font-size: 14px;
	color: var(--ink-500);
	line-height: 1.5;
	margin-bottom: 24px;
	max-width: 540px;
}

/* UM form root */
body.um-page-register .um-form {
	background: transparent !important;
}
/* UM rows — UM uses inline styles for row margin; override */
body.um-page-register .um-row {
	margin: 0 0 18px 0 !important;
	padding: 0 !important;
	background: transparent !important;
}
body.um-page-register .um-col-1,
body.um-page-register .um-col-2,
body.um-page-register .um-col-3 {
	background: transparent !important;
	padding: 0 !important;
}
/* Field block */
body.um-page-register .um-field {
	margin-bottom: 16px !important;
	padding: 0 !important;
}
body.um-page-register .um-field:last-child {
	margin-bottom: 0 !important;
}
/* Labels */
body.um-page-register .um-field-label,
body.um-page-register .um-field-label label {
	font-family: var(--font-sans) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--ink-900) !important;
	margin-bottom: 6px !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}
body.um-page-register .um-field-label {
	padding: 0 !important;
}
/* Field input area */
body.um-page-register .um-field-area {
	padding: 0 !important;
	background: transparent !important;
}
/* Inputs (text, email, password) */
body.um-page-register .um-form input[type="text"],
body.um-page-register .um-form input[type="email"],
body.um-page-register .um-form input[type="password"],
body.um-page-register .um-form-field {
	width: 100% !important;
	height: 44px !important;
	padding: 0 14px !important;
	border: 1px solid var(--ink-200) !important;
	border-radius: 6px !important;
	background: var(--paper) !important;
	font-family: var(--font-sans) !important;
	font-size: 14px !important;
	color: var(--ink-900) !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	transition: border-color .15s, box-shadow .15s !important;
	line-height: 44px !important;
}
body.um-page-register .um-form input[type="text"]:focus,
body.um-page-register .um-form input[type="email"]:focus,
body.um-page-register .um-form input[type="password"]:focus,
body.um-page-register .um-form-field:focus {
	border-color: var(--accent) !important;
	box-shadow: 0 0 0 3px var(--accent-soft) !important;
	outline: none !important;
}
body.um-page-register .um-form input::placeholder {
	color: var(--ink-400) !important;
}
/* Select (Account Type dropdown — UM uses Select2) */
body.um-page-register .um-form select.um-form-field {
	height: 44px !important;
	line-height: 44px !important;
	padding: 0 14px !important;
}
body.um-page-register .select2-container {
	width: 100% !important;
}
body.um-page-register .select2-container--default .select2-selection--single {
	height: 44px !important;
	border: 1px solid var(--ink-200) !important;
	border-radius: 6px !important;
	background: var(--paper) !important;
}
body.um-page-register .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 42px !important;
	padding: 0 14px !important;
	color: var(--ink-900) !important;
	font-size: 14px !important;
	font-family: var(--font-sans) !important;
}
body.um-page-register .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 42px !important;
}
body.um-page-register .select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: var(--ink-400) !important;
}
body.um-page-register .select2-container--default.select2-container--focus .select2-selection--single,
body.um-page-register .select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--accent) !important;
	box-shadow: 0 0 0 3px var(--accent-soft) !important;
}
.select2-dropdown {
	border-color: var(--ink-300) !important;
	border-radius: 6px !important;
}
/* Note: the high-specificity Select2 highlight rules live in an inline
   <style> in wp_head (see eos2026_um_register_inline_styles in functions.php)
   because UM's um-styles.min.css uses (0,7,1) specificity with !important
   and loads AFTER this file — so any external rule here gets out-cascaded.
   Inline head styles always load last and win. */
/* reCAPTCHA wrapper — center the (302px-wide) widget within its row */
body.um-page-register .um-field:has(> .g-recaptcha) {
	text-align: center !important;
}
body.um-page-register .um-field .g-recaptcha {
	display: inline-block !important;
	margin: 8px auto 4px !important;
}
/* Submit button row */
body.um-page-register .um-col-alt {
	margin-top: 24px !important;
	padding: 0 !important;
	background: transparent !important;
}
body.um-page-register .um-col-alt {
	display: flex !important;
	gap: 10px !important;
	margin-top: 24px !important;
}
body.um-page-register .um-left.um-half,
body.um-page-register .um-right.um-half {
	float: none !important;
	width: auto !important;
	flex: 1 1 0;
	margin: 0 !important;
}
/* Buttons — inline-flex works on both <input> and <a>, and we force a
   matching line-height so the <input type=submit> doesn't render shorter
   than the <a class=um-button um-alt> Login link. */
body.um-page-register .um-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 48px !important;
	min-height: 48px !important;
	padding: 0 20px !important;
	margin: 0 !important;
	border-radius: 6px !important;
	background: var(--accent) !important;
	border: 1px solid var(--accent) !important;
	color: #ffffff !important;
	font-family: var(--font-sans) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: -0.005em !important;
	text-shadow: none !important;
	box-shadow: none !important;
	cursor: pointer;
	text-decoration: none !important;
	text-align: center !important;
	line-height: 46px !important; /* 48 - 2*1px border */
	text-transform: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	transition: background .15s, border-color .15s, color .15s !important;
	box-sizing: border-box !important;
	vertical-align: top !important;
}
/* Equalize the two button-row halves */
body.um-page-register .um-col-alt .um-half {
	display: flex !important;
}
body.um-page-register .um-button:hover,
body.um-page-register .um-button:focus {
	background: var(--accent-ink) !important;
	border-color: var(--accent-ink) !important;
	color: #ffffff !important;
}
/* Alt button (Login link) — secondary outline style */
body.um-page-register .um-button.um-alt {
	background: var(--paper) !important;
	color: var(--ink-900) !important;
	border-color: var(--ink-200) !important;
}
body.um-page-register .um-button.um-alt:hover,
body.um-page-register .um-button.um-alt:focus {
	background: var(--ink-50) !important;
	border-color: var(--ink-400) !important;
	color: var(--ink-900) !important;
}
/* UM error / success messages */
body.um-page-register .um-notice {
	border-radius: 6px !important;
	padding: 12px 16px !important;
	font-size: 13px !important;
	font-family: var(--font-sans) !important;
	margin-bottom: 18px !important;
}
body.um-page-register .um-notice.err {
	background: #fdecea !important;
	color: #7a2520 !important;
	border: 1px solid #f5b8b1 !important;
}
body.um-page-register .um-notice.success {
	background: #e6f5ec !important;
	color: #1f5b3a !important;
	border: 1px solid #b3dec3 !important;
}
/* Field-level error tooltips */
body.um-page-register .um-field-error {
	font-size: 12px !important;
	color: #b8413a !important;
	margin-top: 6px !important;
	background: transparent !important;
	padding: 0 !important;
}
/* Honeypot field — keep hidden (UM has visual hide via class) */
body.um-page-register .um_request_name {
	display: none !important;
}
/* The "eos-register-note" paragraph below the form (existing on page 13) */
/* Help line under the Username label — clarifies that the value here is
   only used for login. Display name (entered separately) is what shows up
   on posts and profiles. Pure CSS injection so we don't have to touch the
   UM form definition in admin. */
body.um-page-register .um-field.um-field-user_login .um-field-label::after {
	content: "For login only. Your first and last name (entered below) are what other members see on your posts and profile.";
	display: block;
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 400;
	color: var(--ink-500);
	letter-spacing: 0;
	margin-top: 4px;
	line-height: 1.4;
}
body.um-page-register .eos-register-note {
	max-width: none !important;
	margin: 24px 4px 0 !important;
	padding: 14px 16px !important;
	background: var(--ink-100);
	border-radius: 6px;
	font-size: 12px !important;
	line-height: 1.5 !important;
	color: var(--ink-600) !important;
	font-style: normal !important;
	text-align: left !important;
}

/* Mobile breakpoints (basic — refined in Session 5)
   ----------------------------------------------------------------------- */
@media (max-width: 980px) {
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr; }
  .ab-grid { grid-template-columns: 1fr; gap: 24px; }
  .ab-host-card { grid-template-columns: 1fr; gap: 20px; }
  .ab-host-portrait { width: 100%; height: 280px; }
  .ab-values-grid { grid-template-columns: 1fr; gap: 24px; }
  .ab-timeline-row { grid-template-columns: 64px 24px 1fr; gap: 14px; }
}
/* Mobile hamburger menu — DESKTOP IS UNTOUCHED.
   The toggle and burger icon are hidden everywhere by default; they only
   become visible inside the @media (max-width: 720px) block below.
   Uses a checkbox-hack (no JS) so the drawer toggles purely in CSS. */
.eos-nav-toggle { display: none; }
.eos-nav-burger { display: none; }

@media (max-width: 720px) {
  :root { --gutter: 20px; --section-y: calc(64px * var(--density)); }
  .topnav-inner { gap: 12px; height: 60px; position: relative; }
  .brand-name { font-size: 16px; white-space: nowrap; }
  .brand-tag { display: none; }
  .brand-mark { flex-shrink: 0; min-width: 0; }

  /* Hamburger button — three stacked bars, replaces the nav row on mobile. */
  .eos-nav-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    margin-left: auto;
    border: 1px solid var(--ink-200);
    border-radius: 6px;
    background: var(--paper);
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color .15s, background .15s;
  }
  .eos-nav-burger:hover { border-color: var(--ink-400); background: var(--ink-50); }
  .eos-nav-burger span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--ink-900);
    border-radius: 2px;
    transition: transform .2s, opacity .2s;
  }
  /* Animate burger → X when menu open. */
  .eos-nav-toggle:checked + .eos-nav-burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .eos-nav-toggle:checked + .eos-nav-burger span:nth-child(2) {
    opacity: 0;
  }
  .eos-nav-toggle:checked + .eos-nav-burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Hide the desktop nav row by default on mobile. */
  .nav-list {
    display: none !important;
  }

  /* When checkbox is checked, drop the nav as a full-width drawer below
     the topnav. Uses absolute positioning relative to .topnav-inner. */
  .eos-nav-toggle:checked ~ .nav-list {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    position: absolute;
    top: 60px;
    left: -20px;
    right: -20px;
    background: var(--paper);
    border-bottom: 1px solid var(--ink-200);
    box-shadow: 0 12px 24px rgba(11, 19, 32, 0.06);
    padding: 12px 20px 20px;
    margin: 0;
    z-index: 49;
    font-size: 15px;
  }
  /* Drawer: stack each item vertically with full-width touch targets. */
  .eos-nav-toggle:checked ~ .nav-list .nav-link {
    display: block;
    width: 100%;
    padding: 12px 4px;
    border-bottom: 1px solid var(--ink-150);
    font-size: 15px;
    border-radius: 0;
  }
  .eos-nav-toggle:checked ~ .nav-list .nav-link:last-of-type {
    border-bottom: 0;
  }
  /* Search expands to full width inside the drawer. */
  .eos-nav-toggle:checked ~ .nav-list .nav-search {
    display: flex;
    width: 100%;
    margin: 12px 0 4px;
    min-width: 0;
  }
  /* Bell + buttons sit in a tidy row at the bottom of the drawer. */
  .eos-nav-toggle:checked ~ .nav-list .eos-notif-bell-wrap {
    margin: 8px 0 0;
  }
  .eos-nav-toggle:checked ~ .nav-list .btn-dark {
    width: 100%;
    margin: 8px 0 0 !important;
    height: 44px;
  }

  .site-footer .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .eos-forum-hero { padding: 36px 0 28px; }
  .eos-forum-hero-row { flex-direction: column; align-items: flex-start; }
}