/* ---------- Mega navigation (inc/mega-nav.php, js/nav.js) ---------- */
.lb-has-mega #masthead.lb-header { --bar-h: 72px; position: sticky; top: 0; z-index: 200; transition: transform 400ms var(--ease-out); }
.admin-bar #masthead.lb-header { top: 32px; }
@media (max-width: 782px) { .admin-bar #masthead.lb-header { top: 46px; } }
#masthead.lb-header.lb-header-hidden:not(.is-open):not(.is-sheet) { transform: translateY(-110%); }
.lb-i { flex: none; }

/* Bar */
.lb-bar {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  height: var(--bar-h);
  padding-inline: max(var(--lb-gutter), (100% - var(--lb-max)) / 2);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(var(--glass-blur));
          backdrop-filter: saturate(1.4) blur(var(--glass-blur));
  border-bottom: 1px solid var(--line);
  transition: margin 500ms var(--ease-out), border-radius 500ms var(--ease-out), box-shadow 500ms var(--ease-out), max-width 500ms var(--ease-out), background-color 300ms ease-out, border-color 300ms ease-out, padding 500ms var(--ease-out);
}
#masthead.lb-header-scrolled .lb-bar {
  max-width: calc(var(--lb-max) + 2 * var(--lb-gutter));
  margin: 10px auto 0;
  padding-inline: 12px 10px;
  padding-left: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  box-shadow: 0 18px 40px -24px color-mix(in srgb, var(--ink) 55%, transparent);
}
@media (max-width: 1099px) { #masthead.lb-header-scrolled .lb-bar { margin: 8px 10px 0; } }

.lb-logo {
  justify-self: start;
  display: block;
  width: 168px;
  aspect-ratio: 725 / 131;
  font-size: 0;
  color: transparent;
  background-color: var(--ink);
  -webkit-mask: url("../img/logo-wordmark.png") left center / contain no-repeat;
          mask: url("../img/logo-wordmark.png") left center / contain no-repeat;
  transition: opacity 200ms ease-out, background-color 300ms ease-out;
}
.lb-logo:hover { opacity: .75; }

.lb-nav { position: relative; }
.lb-nav-list { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.lb-nav-trigger {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  font: 500 15px/1 var(--font-ui);
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: color 200ms ease-out;
}
.lb-nav-trigger .lb-i { opacity: .6; transition: transform 400ms var(--ease-out), opacity 200ms; }
.lb-nav-trigger[aria-expanded="true"] .lb-i { transform: rotate(180deg); opacity: 1; }
.lb-nav-trigger.is-current::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 5px;
  width: 4px; height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--caramel);
}
/* One pill that glides between triggers. */
.lb-nav-glow {
  position: absolute;
  top: 0; left: 0;
  height: 42px;
  width: var(--glow-w, 0);
  transform: translateX(var(--glow-x, 0));
  border-radius: var(--radius-pill);
  background: var(--surface-sand);
  opacity: 0;
  transition: transform 450ms var(--ease-out), width 450ms var(--ease-out), opacity 200ms ease-out;
  pointer-events: none;
}
.lb-nav.is-glowing .lb-nav-glow { opacity: 1; }

.lb-bar-actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
.lb-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 200ms ease-out, border-color 200ms ease-out;
}
.lb-icon-btn:hover { background: var(--surface-sand); }

.lb-nav-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 18px 0 16px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--surface) !important;
  font: 500 14px/1 var(--font-ui);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: transform 200ms ease-out, box-shadow 300ms var(--ease-out);
}
.lb-nav-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, color-mix(in srgb, var(--caramel) 55%, transparent) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 800ms var(--ease-out);
}
.lb-nav-cta:hover { box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--ink) 60%, transparent); }
.lb-nav-cta:hover::before { transform: translateX(100%); }
.lb-nav-cta:active { transform: scale(.97); }
.lb-nav-cta .lb-i { transition: transform 300ms var(--ease-out); }
.lb-nav-cta:hover .lb-i { transform: translateX(3px); }
.lb-nav-cta-pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--caramel); }
.lb-nav-cta-pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--caramel);
  animation: lb-pulse 2.2s var(--ease-out) infinite;
}
@keyframes lb-pulse { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
.lb-nav-cta-short { display: none; }

.lb-menu-btn {
  display: none;
  place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.lb-burger { position: relative; width: 18px; height: 10px; }
.lb-burger i { position: absolute; left: 0; width: 100%; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform 400ms var(--ease-out), top 400ms var(--ease-out); }
.lb-burger i:first-child { top: 0; }
.lb-burger i:last-child { top: 8.5px; }
.lb-menu-btn[aria-expanded="true"] .lb-burger i:first-child { top: 4.25px; transform: rotate(45deg); }
.lb-menu-btn[aria-expanded="true"] .lb-burger i:last-child { top: 4.25px; transform: rotate(-45deg); }

/* Transparent over the full-screen home hero until scrolled or opened. */
body:has(.lb-hero-full) #masthead.lb-header:not(.lb-header-scrolled):not(.is-open):not(.is-sheet) .lb-bar {
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
body:has(.lb-hero-full) #masthead.lb-header:not(.lb-header-scrolled):not(.is-open):not(.is-sheet) :is(.lb-logo) { background-color: var(--on-espresso); }
body:has(.lb-hero-full) #masthead.lb-header:not(.lb-header-scrolled):not(.is-open):not(.is-sheet) :is(.lb-nav-trigger, .lb-icon-btn, .lb-menu-btn) { color: var(--on-espresso); }
body:has(.lb-hero-full) #masthead.lb-header:not(.lb-header-scrolled):not(.is-open):not(.is-sheet) .lb-menu-btn { border-color: color-mix(in srgb, var(--on-espresso) 55%, transparent); }
body:has(.lb-hero-full) #masthead.lb-header:not(.lb-header-scrolled):not(.is-open):not(.is-sheet) .lb-nav-glow { background: color-mix(in srgb, var(--on-espresso) 14%, transparent); }
body:has(.lb-hero-full) #masthead.lb-header:not(.lb-header-scrolled):not(.is-open):not(.is-sheet) .lb-icon-btn:hover { background: color-mix(in srgb, var(--on-espresso) 14%, transparent); }
body:has(.lb-hero-full) #masthead.lb-header:not(.lb-header-scrolled):not(.is-open):not(.is-sheet) .lb-nav-cta { background: var(--on-espresso); color: var(--surface-espresso) !important; }

/* ---------- Mega panel ---------- */
.lb-mega {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 8px);
  z-index: 1;
  padding-inline: max(var(--lb-gutter), (100% - var(--lb-max)) / 2);
  pointer-events: none;
}
#masthead.lb-header-scrolled .lb-mega { top: calc(100% + 10px); }
.lb-mega-shell {
  position: relative;
  height: var(--mega-h, 420px);
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--surface-raised) 96%, transparent);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
          backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-float);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px) scale(.985);
  transform-origin: 50% 0;
  visibility: hidden;
  transition: opacity 250ms ease-out, transform 450ms var(--ease-out), visibility 0s linear 450ms, height 450ms var(--ease-out);
}
#masthead.is-open .lb-mega { pointer-events: auto; }
#masthead.is-open .lb-mega-shell { opacity: 1; transform: none; visibility: visible; transition: opacity 200ms ease-out, transform 450ms var(--ease-out), visibility 0s, height 450ms var(--ease-out); }
.lb-mega-panel {
  position: absolute;
  inset: 0 0 auto 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(calc(var(--dir, 1) * 32px));
  transition: opacity 250ms ease-out, transform 450ms var(--ease-out), visibility 0s linear 450ms;
}
.lb-mega-panel.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity 300ms ease-out 60ms, transform 500ms var(--ease-out), visibility 0s; }
.lb-mega-panel.is-leaving { transform: translateX(calc(var(--dir, 1) * -32px)); }
.lb-mega-panel.is-active [style*="--i"] { animation: lb-mega-rise 600ms var(--ease-out) both; animation-delay: calc(var(--i) * 35ms + 60ms); }
@keyframes lb-mega-rise { from { opacity: 0; transform: translateY(10px); } }

.lb-mega-grid { display: grid; gap: 28px; padding: 28px; }
.lb-mega-label { margin: 0 0 10px; font: 600 11px/16px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.lb-mega a { color: var(--ink); text-decoration: none; }
.lb-mega img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Topics */
.lb-mega-grid-topics { grid-template-columns: minmax(0, 1fr) 300px; }
.lb-topic-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.lb-topic-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 8px 14px;
  border-radius: 20px;
  transition: background-color 250ms ease-out;
}
.lb-topic-tile:hover, .lb-topic-tile:focus-visible, .lb-topic-tile.is-hot { background: var(--surface-sand); }
.lb-topic-media { position: relative; display: block; aspect-ratio: 16 / 10; margin-bottom: 10px; border-radius: 14px; overflow: hidden; background: var(--surface-sand); }
.lb-topic-media img { transition: transform 800ms var(--ease-out), filter 400ms ease-out; }
.lb-topic-tile:hover .lb-topic-media img, .lb-topic-tile.is-hot .lb-topic-media img { transform: scale(1.08); }
.lb-topic-count {
  position: absolute;
  top: 16px; right: 16px;
  min-width: 26px; height: 26px;
  display: grid;
  place-items: center;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface-raised) 80%, transparent);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  font: 600 12px/1 var(--font-ui);
  color: var(--ink);
}
.lb-topic-name { padding-inline: 6px; font: 500 16px/22px var(--font-sans); letter-spacing: -0.01em; }
.lb-topic-desc { padding-inline: 6px; font: 400 13px/18px var(--font-ui); color: var(--ink-muted); }
.lb-topic-all {
  justify-content: flex-end;
  padding: 16px 14px;
  background: var(--surface-espresso);
  color: var(--on-espresso) !important;
  overflow: hidden;
}
.lb-topic-all:hover, .lb-topic-all:focus-visible { background: var(--surface-espresso); }
.lb-topic-all .lb-topic-desc { color: var(--on-espresso-muted); }
.lb-topic-all-num { margin-bottom: auto; padding-inline: 6px; font: 300 64px/1 var(--font-sans); letter-spacing: -0.04em; color: var(--caramel); }
.lb-topic-all-arrow {
  position: absolute;
  top: 16px; right: 16px;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--on-espresso) 40%, transparent);
  transition: transform 400ms var(--ease-out), background-color 200ms;
}
.lb-topic-all:hover .lb-topic-all-arrow { transform: rotate(-45deg); background: var(--caramel); color: var(--on-caramel); border-color: var(--caramel); }

.lb-topic-preview { position: relative; padding-left: 28px; border-left: 1px solid var(--line); }
.lb-topic-list { display: none; }
.lb-topic-list.is-active { display: block; animation: lb-mega-rise 450ms var(--ease-out) both; }
.lb-mrow {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 8px;
  margin-inline: -8px;
  border-radius: 14px;
  transition: background-color 200ms ease-out;
}
.lb-mrow:hover, .lb-mrow:focus-visible { background: var(--surface-sand); }
.lb-mrow-img, .lb-mrow .lb-nav-img-empty { width: 56px !important; height: 56px !important; border-radius: 12px; background: var(--surface-sand); }
.lb-mrow-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lb-mrow-title { font: 500 14px/19px var(--font-ui); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lb-mrow-meta { font: 400 12px/16px var(--font-ui); color: var(--ink-muted); }

.lb-mega-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 28px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-sand) 60%, transparent);
}
.lb-mega-foot p { display: flex; align-items: center; gap: 8px; margin: 0; font: 400 13px/18px var(--font-ui); color: var(--ink-muted); }
.lb-mega-foot p a { color: var(--tide-ink) !important; text-decoration: underline !important; text-underline-offset: 2px; }
.lb-mega-more { display: inline-flex; align-items: center; gap: 6px; font: 500 14px/1 var(--font-ui); }
.lb-mega-more .lb-i { transition: transform 300ms var(--ease-out); }
.lb-mega-more:hover .lb-i { transform: translateX(4px); }

/* Guides */
.lb-mega-grid-guides { grid-template-columns: 300px minmax(0, 1fr) 280px; }
.lb-feature, .lb-tool-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 340px;
  border-radius: 22px;
  overflow: hidden;
  background: var(--surface-espresso);
  color: var(--on-espresso) !important;
  isolation: isolate;
}
.lb-feature img { position: absolute; inset: 0; z-index: -2; transition: transform 1200ms var(--ease-out); }
.lb-feature::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, color-mix(in srgb, var(--surface-espresso) 92%, transparent) 20%, transparent 75%); }
.lb-feature:hover img { transform: scale(1.06); }
.lb-feature-body { display: flex; flex-direction: column; gap: 8px; padding: 22px; }
.lb-feature-kicker { font: 600 11px/16px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--caramel); }
.lb-feature-title { font: 300 40px/1 var(--font-sans); letter-spacing: -0.03em; }
.lb-feature-text { font: 400 14px/20px var(--font-ui); color: var(--on-espresso-muted); }
.lb-feature-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font: 500 14px/1 var(--font-ui); }
.lb-feature:hover .lb-feature-cta .lb-i { transform: translateX(4px); }
.lb-feature-cta .lb-i { transition: transform 300ms var(--ease-out); }

.lb-paths { display: flex; flex-direction: column; }
.lb-path {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 16px 12px;
  border-radius: 16px;
  border-top: 1px solid var(--line);
  transition: background-color 200ms ease-out, border-color 200ms;
}
.lb-path:first-of-type { border-top-color: transparent; }
.lb-path:hover, .lb-path:focus-visible { background: var(--surface-sand); border-top-color: transparent; }
.lb-path:hover + .lb-path { border-top-color: transparent; }
.lb-path-num { font: 300 28px/1 var(--font-sans); letter-spacing: -0.03em; color: var(--ink-muted); transition: color 200ms; }
.lb-path:hover .lb-path-num { color: var(--caramel-ink); }
.lb-path-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lb-path-title { font: 500 16px/22px var(--font-sans); }
.lb-path-desc { font: 400 13px/18px var(--font-ui); color: var(--ink-muted); }
.lb-path-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font: 500 12px/1 var(--font-ui); color: var(--ink-muted); white-space: nowrap; }
.lb-path-dots { display: flex; gap: 4px; }
.lb-path-dots i { width: 14px; height: 4px; border-radius: 2px; background: var(--line-strong); transition: background-color 300ms ease-out; }
.lb-path:hover .lb-path-dots i { background: var(--caramel); }
.lb-path:hover .lb-path-dots i:nth-child(2) { transition-delay: 60ms; }
.lb-path:hover .lb-path-dots i:nth-child(3) { transition-delay: 120ms; }
.lb-path:hover .lb-path-dots i:nth-child(4) { transition-delay: 180ms; }

.lb-guides-side { display: flex; flex-direction: column; }
.lb-pillar {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 14px;
  row-gap: 2px;
  align-items: center;
  padding: 12px;
  margin-bottom: 18px;
  border-radius: 18px;
  background: var(--tide-soft);
  transition: transform 300ms var(--ease-out);
}
.lb-pillar:hover { transform: translateY(-2px); }
.lb-pillar-img, .lb-pillar .lb-nav-img-empty { grid-row: 1 / 4; width: 72px !important; height: 72px !important; border-radius: 12px; }
.lb-pillar .lb-feature-kicker { color: var(--tide-ink); }
.lb-pillar-title { font: 500 15px/20px var(--font-sans); }

/* Tools */
.lb-mega-grid-tools { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.lb-tool-hero {
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px;
  background:
    radial-gradient(ellipse 70% 90% at 100% 50%, color-mix(in srgb, var(--caramel) 30%, transparent), transparent 70%),
    var(--surface-espresso);
}
.lb-tool-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 340px; }
.lb-tool-hero-title { font: 300 36px/1.02 var(--font-sans); letter-spacing: -0.03em; }
.lb-tool-hero-meta { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/16px var(--font-ui); color: var(--on-espresso-muted); }
.lb-btn-mega {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  margin-top: 6px;
  padding: 0 20px;
  border-radius: var(--radius-pill);
  background: var(--caramel);
  color: var(--on-caramel);
  font: 500 14px/1 var(--font-ui);
  transition: transform 300ms var(--ease-out);
}
.lb-tool-hero:hover .lb-btn-mega { transform: translateX(4px); }
.lb-ring { position: relative; flex: none; display: grid; place-items: center; width: 150px; height: 150px; }
.lb-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.lb-ring circle { fill: none; stroke-width: 7; }
.lb-ring-track { stroke: color-mix(in srgb, var(--on-espresso) 14%, transparent); }
.lb-ring-value { stroke: var(--caramel); stroke-linecap: round; }
.lb-ring-num { font: 300 48px/1 var(--font-sans); letter-spacing: -0.04em; color: var(--on-espresso); }
#masthead.is-open .lb-mega-panel.is-active .lb-ring-value { animation: lb-ring-fill 1400ms var(--ease-out) 200ms both; }
@keyframes lb-ring-fill { from { stroke-dashoffset: var(--lb-ring-c); } }

.lb-tool-stack { display: flex; flex-direction: column; gap: 10px; }
.lb-tool {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 84px;
  align-items: center;
  gap: 16px;
  flex: 1;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  transition: background-color 200ms ease-out, border-color 200ms, transform 300ms var(--ease-out);
}
.lb-tool:hover, .lb-tool:focus-visible { background: var(--surface-sand); border-color: transparent; transform: translateX(4px); }
.lb-tool-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--tide-soft); color: var(--tide-ink); }
.lb-tool-text { display: flex; flex-direction: column; gap: 2px; }
.lb-tool-title { font: 500 16px/22px var(--font-sans); }
.lb-tool-desc { font: 400 13px/18px var(--font-ui); color: var(--ink-muted); }
.lb-tool-viz { justify-self: end; }
.lb-tool-viz-cycle { display: grid; grid-template-columns: repeat(5, 8px); gap: 5px; }
.lb-tool-viz-cycle i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.lb-tool:hover .lb-tool-viz-cycle i { background: var(--caramel); transition: background-color 200ms; }
.lb-tool-viz-cycle i:nth-child(n) { transition-delay: calc(var(--d, 0) * 1ms); }
.lb-tool-viz-cycle i:nth-child(2) { --d: 40; } .lb-tool-viz-cycle i:nth-child(3) { --d: 80; } .lb-tool-viz-cycle i:nth-child(4) { --d: 120; } .lb-tool-viz-cycle i:nth-child(5) { --d: 160; }
.lb-tool-viz-cycle i:nth-child(6) { --d: 200; } .lb-tool-viz-cycle i:nth-child(7) { --d: 240; } .lb-tool-viz-cycle i:nth-child(8) { --d: 280; } .lb-tool-viz-cycle i:nth-child(9) { --d: 320; } .lb-tool-viz-cycle i:nth-child(10) { --d: 360; }
.lb-tool-viz-az { font: 300 30px/1 var(--font-serif); font-style: italic; color: var(--ink-muted); transition: color 200ms; }
.lb-tool:hover .lb-tool-viz-az { color: var(--caramel-ink); }
.lb-tool-viz-bars { display: flex; align-items: flex-end; gap: 5px; height: 32px; }
.lb-tool-viz-bars i { width: 10px; height: calc(var(--h) * 100%); border-radius: 3px; background: var(--line-strong); transform-origin: bottom; transition: transform 500ms var(--ease-out), background-color 200ms; }
.lb-tool:hover .lb-tool-viz-bars i { background: var(--tide); transform: scaleY(1.1); }

/* About */
.lb-mega-grid-about { grid-template-columns: 280px minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.lb-author-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 22px;
  border-radius: 22px;
  background: var(--surface-espresso);
  color: var(--on-espresso) !important;
}
.lb-author-card-img { width: 88px !important; height: 88px !important; margin-bottom: 10px; border-radius: 50%; box-shadow: 0 0 0 3px var(--surface-espresso), 0 0 0 4px var(--caramel); transition: transform 500ms var(--ease-out); }
.lb-author-card:hover .lb-author-card-img { transform: scale(1.05) rotate(-3deg); }
.lb-author-card-name { font: 300 30px/1.05 var(--font-sans); letter-spacing: -0.02em; }
.lb-about-links { display: flex; flex-direction: column; gap: 6px; }
.lb-about-link { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 14px; padding: 14px; border-radius: 16px; transition: background-color 200ms; }
.lb-about-link > .lb-i { width: 44px; height: 44px; padding: 11px; border-radius: 12px; background: var(--caramel-soft); color: var(--caramel-ink); }
.lb-about-link:hover { background: var(--surface-sand); }
.lb-about-link > span { display: flex; flex-direction: column; gap: 2px; font: 400 13px/18px var(--font-ui); color: var(--ink-muted); }
.lb-about-link strong { font: 500 16px/22px var(--font-sans); color: var(--ink); }
.lb-about-quote { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; margin: 0; padding: 24px; border-radius: 22px; background: var(--surface-sand); }
.lb-about-quote p { margin: 0; font: 400 22px/30px var(--font-serif); font-style: italic; color: var(--ink); }
.lb-about-quote footer { font: 500 12px/16px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }

/* Page scrim behind an open panel */
.lb-mega-scrim {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: color-mix(in srgb, var(--surface-espresso) 30%, transparent);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 350ms ease-out, visibility 0s linear 350ms;
}
html.lb-mega-open .lb-mega-scrim { opacity: 1; visibility: visible; transition: opacity 350ms ease-out, visibility 0s; }

/* ---------- Search dialog ---------- */
.lb-search-dialog {
  width: min(720px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100svh - 96px);
  margin: 12vh auto auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface-raised);
  color: var(--ink);
  box-shadow: var(--shadow-float);
  overflow: auto;
}
.lb-search-dialog[open] { animation: lb-search-in 450ms var(--ease-out); }
@keyframes lb-search-in { from { opacity: 0; transform: translateY(-12px) scale(.98); } }
.lb-search-dialog::backdrop { background: color-mix(in srgb, var(--surface-espresso) 45%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lb-search-form { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 24px; border-bottom: 1px solid var(--line); color: var(--ink-muted); }
.lb-search-form input {
  flex: 1;
  min-width: 0;
  height: 52px;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none;
  font: 300 26px/1 var(--font-sans);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.lb-search-form input::placeholder { color: var(--ink-muted); }
.lb-search-suggest { padding: 20px 24px 24px; }
.lb-search-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.lb-search-pills:last-child { margin-bottom: 0; }
.lb-search-pills a { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--radius-pill); font: 500 14px/1 var(--font-ui); color: var(--ink); text-decoration: none; transition: background-color 200ms, border-color 200ms; }
.lb-search-pills a:hover { background: var(--surface-sand); border-color: transparent; }

/* ---------- Mobile sheet ---------- */
.lb-sheet {
  position: fixed;
  inset: calc(var(--bar-h) + var(--lb-admin, 0px)) 0 0;
  z-index: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
}
.admin-bar .lb-sheet { --lb-admin: 46px; }
.lb-sheet[hidden] { display: none; }
.lb-sheet-inner { display: flex; flex-direction: column; gap: 14px; padding: 12px var(--lb-gutter) calc(48px + env(safe-area-inset-bottom)); }
.lb-sheet-inner > * { animation: lb-menu-item 500ms var(--ease-out) both; }
.lb-sheet-inner > :nth-child(2) { animation-delay: 40ms; }
.lb-sheet-inner > :nth-child(3) { animation-delay: 80ms; }
.lb-sheet-inner > :nth-child(4) { animation-delay: 120ms; }
.lb-sheet-inner > :nth-child(n+5) { animation-delay: 160ms; }
.lb-sheet-search { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--ink-muted); }
.lb-sheet-search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none; font: 400 17px/1 var(--font-ui); color: var(--ink); }
.lb-sheet-cta {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 18px 14px 14px;
  border-radius: 22px;
  background: radial-gradient(ellipse 80% 120% at 0% 50%, color-mix(in srgb, var(--caramel) 30%, transparent), transparent 70%), var(--surface-espresso);
  color: var(--on-espresso) !important;
  text-decoration: none;
}
.lb-sheet-cta .lb-ring { width: 64px; height: 64px; }
.lb-sheet-cta .lb-ring circle { stroke-width: 9; }
.lb-sheet-cta .lb-ring-num { font-size: 22px; }
.lb-sheet-cta > span:not(.lb-ring) { display: flex; flex-direction: column; gap: 2px; font: 400 13px/18px var(--font-ui); color: var(--on-espresso-muted); }
.lb-sheet-cta strong { font: 500 17px/22px var(--font-sans); color: var(--on-espresso); }
.lb-sheet-sec { border-bottom: 1px solid var(--line); }
.lb-sheet-sec summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  list-style: none;
  cursor: pointer;
  font: 300 32px/38px var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.lb-sheet-sec summary::-webkit-details-marker { display: none; }
.lb-sheet-sec summary .lb-i { transition: transform 400ms var(--ease-out); color: var(--ink-muted); }
.lb-sheet-sec[open] summary .lb-i { transform: rotate(180deg); }
.lb-sheet-topics { display: flex; gap: 10px; margin-inline: calc(var(--lb-gutter) * -1); padding: 0 var(--lb-gutter) 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.lb-sheet-topics::-webkit-scrollbar { display: none; }
.lb-sheet-topics a {
  position: relative;
  flex: 0 0 148px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 188px;
  padding: 12px;
  border-radius: 18px;
  overflow: hidden;
  scroll-snap-align: start;
  background: var(--surface-espresso);
  color: var(--on-espresso) !important;
  text-decoration: none;
  isolation: isolate;
}
.lb-sheet-topics a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, color-mix(in srgb, var(--surface-espresso) 85%, transparent), transparent 65%); }
.lb-sheet-topic-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.lb-sheet-topics span { font: 500 16px/20px var(--font-sans); }
.lb-sheet-topics em { position: absolute; top: 10px; right: 10px; min-width: 24px; height: 24px; display: grid; place-items: center; padding: 0 7px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--surface-raised) 80%, transparent); color: var(--ink); font: 600 11px/1 var(--font-ui); font-style: normal; }
.lb-sheet-topic-all { background: var(--caramel) !important; color: var(--on-caramel) !important; }
.lb-sheet-topic-all::before { display: none; }
.lb-sheet-links { display: flex; flex-direction: column; padding-bottom: 14px; }
.lb-sheet-links a { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; color: var(--ink) !important; text-decoration: none; }
.lb-sheet-links strong { font: 500 17px/22px var(--font-sans); white-space: pre; }
.lb-sheet-links span { font: 400 13px/18px var(--font-ui); color: var(--ink-muted); }
html.lb-sheet-open, html.lb-sheet-open body { overflow: hidden; }

/* ---------- Breakpoints ---------- */
@media (max-width: 1240px) {
  .lb-mega-grid-topics { grid-template-columns: minmax(0, 1fr) 260px; }
  .lb-mega-grid-guides { grid-template-columns: 260px minmax(0, 1fr) 250px; }
  .lb-topic-desc { display: none; }
}
@media (max-width: 1099px) {
  .lb-bar { grid-template-columns: 1fr auto; --bar-h: 64px; }
  .lb-has-mega #masthead.lb-header { --bar-h: 64px; }
  .lb-nav, .lb-mega, .lb-mega-scrim { display: none; }
  .lb-menu-btn { display: inline-grid; }
  .lb-logo { width: 150px; }
  .lb-nav-cta { height: 40px; padding: 0 14px 0 12px; }
  .lb-nav-cta-long { display: none; }
  .lb-nav-cta-short { display: inline; }
  .lb-nav-cta .lb-i { display: none; }
  #masthead.lb-header-scrolled .lb-bar { padding-left: 18px; padding-right: 8px; }
}
@media (max-width: 420px) {
  .lb-search-open { display: none; }
  .lb-logo { width: 132px; }
}
@media (min-width: 1100px) { .lb-sheet { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  .lb-mega-shell, .lb-mega-panel, .lb-nav-glow, .lb-bar, #masthead.lb-header { transition: none !important; }
  .lb-mega-panel.is-active [style*="--i"], .lb-sheet-inner > *, .lb-topic-list.is-active, .lb-search-dialog[open] { animation: none !important; }
  .lb-nav-cta-pulse::after { animation: none; }
  #masthead.is-open .lb-mega-panel.is-active .lb-ring-value { animation: none; }
}

/* Astra paints every button:hover/:focus with its accent colour; restore our own states. */
#masthead .lb-nav-trigger:is(:hover, :focus), #masthead .lb-menu-btn:is(:hover, :focus), #masthead .lb-icon-btn:focus,
.lb-search-dialog .lb-icon-btn:focus { background: transparent; color: inherit; border-color: inherit; }
#masthead .lb-menu-btn:is(:hover, :focus) { border-color: var(--line-strong); color: var(--ink); }
body:has(.lb-hero-full) #masthead.lb-header:not(.lb-header-scrolled):not(.is-open):not(.is-sheet) .lb-menu-btn:is(:hover, :focus) { color: var(--on-espresso); border-color: color-mix(in srgb, var(--on-espresso) 55%, transparent); }
#masthead .lb-nav-trigger:is(:hover, :focus) { color: var(--ink); border-color: transparent; }
body:has(.lb-hero-full) #masthead.lb-header:not(.lb-header-scrolled):not(.is-open):not(.is-sheet) .lb-nav-trigger:is(:hover, :focus) { color: var(--on-espresso); }
#masthead .lb-icon-btn:hover, .lb-search-dialog .lb-icon-btn:hover { background: var(--surface-sand); color: var(--ink); border-color: transparent; }