/* ── Reset & Base ─────────────────────────────────────────── */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip; /* prevent off-screen fixed/absolute elements (e.g. nav drawer) from causing horizontal scroll */
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--theme-text);
  background-color: var(--theme-background);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
}

a {
  color: var(--theme-accent);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-expo-out);
}

a:hover,
a:focus {
  color: var(--theme-accent-strong);
  text-decoration: underline;
}

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

input,
select,
button,
textarea {
  font: inherit;
}


/* ── Site Header (Airbnb-style marketplace chrome) ───────── */

body {
  --theme-site-header-height: calc(clamp(4rem, 5vw, 5rem) + (var(--space-3) * 2));
}

.site-header,
.site-footer,
.site-main {
  padding-inline: var(--space-page-inline);
}

.site-header {
  --header-control-height: 2.5rem;
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--theme-border-soft);
  background: color-mix(in srgb, var(--theme-surface) 92%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition:
    border-color var(--dur-base) var(--ease-expo-out),
    box-shadow var(--dur-base) var(--ease-expo-out);
}

.js .site-header.is-scrolled {
  border-bottom-color: var(--theme-border);
  box-shadow: var(--theme-shadow);
}

.site-header__inner,
.site-footer__inner,
.site-main__inner {
  width: min(100%, var(--theme-site-width));
  margin-inline: auto;
}

.site-header__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  min-height: clamp(4rem, 5vw, 5rem);
  padding-block: var(--space-3);
}

.site-header__start {
  grid-column: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}

.site-header__search {
  grid-column: 2;
}

body.admin-bar {
  --theme-sticky-top: calc(clamp(4rem, 5vw, 5rem) + 32px + var(--space-4));
}

@media screen and (max-width: 782px) {
  body.admin-bar {
    --theme-sticky-top: calc(clamp(4rem, 5vw, 5rem) + 46px + var(--space-4));
  }
}

.site-branding {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.site-logo {
  flex-shrink: 0;
  line-height: 0;
}

.site-logo img,
.site-logo .custom-logo {
  width: auto;
  max-height: 2rem;
}

.site-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.site-title a {
  color: var(--theme-accent);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-expo-out);
}

.site-title a:hover,
.site-title a:focus-visible {
  color: var(--theme-accent-strong);
  text-decoration: none;
}

.site-description {
  display: none;
}

.site-header__search {
  display: flex;
  justify-content: center;
  min-width: 0;
}

.site-header__search-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  width: min(100%, 26rem);
  min-height: 3rem;
  padding: var(--space-2) var(--space-5);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-pill);
  background: var(--theme-surface);
  box-shadow: var(--theme-shadow);
  color: var(--theme-muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  transition:
    box-shadow var(--dur-fast) var(--ease-expo-out),
    transform var(--dur-fast) var(--ease-expo-out);
}

.site-header__search-pill:hover,
.site-header__search-pill:focus-visible {
  color: var(--theme-text);
  box-shadow: var(--theme-shadow);
  transform: translateY(-1px);
  outline: none;
}

.site-header__search-pill:focus-visible {
  outline: 2.5px solid var(--theme-text);
  outline-offset: 2px;
}

.site-header__search-icon {
  flex-shrink: 0;
  color: var(--theme-text);
}

.site-header__search-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-header__end {
  grid-column: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  min-width: 0;
}

.site-header__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: visible;
}

.site-header__utilities {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Weather, language, avatar — one row, one control height */
.site-header__utilities > .hub360-weather-nav,
.site-header__utilities > .dropdown--account,
.site-header__utilities > .site-header__auth {
  flex-shrink: 0;
}

/* Match lang cluster pill when weather.css is late — canonical header chrome */
.site-header__utilities > .hub360-weather-nav {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--header-control-height);
  height: var(--header-control-height);
  padding-inline: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--theme-border) 65%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--theme-surface) 72%, transparent);
  transition:
    border-color var(--dur-fast) var(--ease-expo-out),
    background var(--dur-fast) var(--ease-expo-out);
}

.site-header__utilities > .hub360-weather-nav:hover,
.site-header__utilities > .hub360-weather-nav:focus-within {
  border-color: var(--theme-border);
  background: var(--theme-surface);
}

.site-header__cluster {
  display: inline-flex;
  align-items: center;
  gap: 0;
  min-height: var(--header-control-height);
  padding-block: 0;
  padding-inline: var(--space-1);
  border: 1px solid color-mix(in srgb, var(--theme-border) 65%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--theme-surface) 72%, transparent);
  transition:
    border-color var(--dur-fast) var(--ease-expo-out),
    background var(--dur-fast) var(--ease-expo-out);
}

.site-header__cluster:has(.dropdown--lang .dropdown__trigger:hover),
.site-header__cluster:has(.dropdown--lang .dropdown__trigger:focus-visible),
.site-header__cluster:has(.dropdown--lang.is-open),
.site-header__cluster:has(.site-header__menu-btn:hover),
.site-header__cluster:has(.site-header__menu-btn:focus-visible) {
  border-color: var(--theme-border);
  background: var(--theme-surface);
}

.site-header__menu-btn {
  display: none;
}

.site-header__overlay {
  position: fixed;
  inset: 0;
  z-index: 35;
  border: 0;
  background: color-mix(in srgb, var(--color-scrim) 35%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-expo-out);
}

.site-header__overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.site-header__overlay[hidden] {
  display: block;
  visibility: hidden;
}

.site-header__overlay.is-visible[hidden] {
  visibility: visible;
}

body.nav-open {
  overflow: hidden;
}

body.nav-open .site-header__overlay {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  cursor: pointer;
}

/* ── App sheet (nav-drawer pattern for lead forms, etc.) ─ */
.app-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  border: 0;
  background: color-mix(in srgb, var(--color-scrim) 35%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-expo-out);
}

.app-sheet-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.app-sheet-overlay[hidden] {
  display: block;
  visibility: hidden;
}

.app-sheet-overlay.is-visible[hidden] {
  visibility: visible;
}

body.app-sheet-open {
  overflow: hidden;
}

.app-sheet {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  width: min(96vw, 31.68rem);
  height: 100dvh;
  max-height: 100dvh;
  background: var(--theme-surface);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.1);
  translate: 100% 0;
  visibility: hidden;
  transition:
    translate    var(--dur-base) var(--ease-expo-out),
    visibility   0s var(--dur-base);
  pointer-events: none;
}

.app-sheet.is-open {
  translate: 0 0;
  visibility: visible;
  pointer-events: auto;
  transition:
    translate  var(--dur-base) var(--ease-expo-out),
    visibility 0s;
}

.app-sheet__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.app-sheet__bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  flex-shrink: 0;
  padding: calc(var(--space-4) + env(safe-area-inset-top, 0px)) var(--space-5) var(--space-3);
  border-bottom: 1px solid var(--theme-border);
  background: var(--theme-surface);
}

.app-sheet__heading {
  flex: 1;
  min-width: 0;
}

.app-sheet__label {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding-top: 0.125rem;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.35;
  color: var(--theme-text);
}

.app-sheet__context {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.4;
  color: var(--theme-muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.app-sheet__close {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--theme-subtle);
  color: var(--theme-text);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-expo-out);
}

.app-sheet__close:hover,
.app-sheet__close:focus-visible {
  background: var(--theme-surface-strong);
  outline: none;
}

.app-sheet__body {
  flex: 1;
  min-height: 0;
  padding: var(--space-5) var(--space-6) calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.app-sheet__body--lead {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.app-sheet__scroll {
  padding: var(--space-4) var(--space-5) var(--space-3);
}

.app-sheet__footer {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: auto;
  padding: var(--space-3) var(--space-5) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--theme-border);
  background: var(--theme-surface);
}

.app-sheet__body--lead .hub360-lead-form__shell,
.app-sheet__body--lead .hub360-lead-form--in-sheet {
  display: block;
  height: auto;
}

.app-sheet .hub360-lead-form--in-sheet.form-stack {
  gap: 0;
}

/* Lead forms inside sheets — single column, drawer-friendly rhythm */
.app-sheet .hub360-lead-form__grid {
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.app-sheet .hub360-lead-form.form-stack {
  gap: var(--space-4);
}

.app-sheet .field {
  gap: var(--space-2);
}

.app-sheet .input,
.app-sheet .select-wrap select {
  height: 3rem;
}

.app-sheet .hub360-lead-form__actions {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.app-sheet .hub360-lead-form .checkbox-wrap {
  margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .app-sheet,
  .app-sheet-overlay {
    transition: none;
  }
}

/* Pin explorer: compact header — logo + utilities only */
body.post-type-archive-pin .site-header__inner,
body.tax-pin_region .site-header__inner,
body.tax-pin_category .site-header__inner,
body.tax-pin_type .site-header__inner {
  min-height: 3.75rem;
  padding-block: var(--space-2);
}

body.post-type-archive-pin .site-header__search,
body.tax-pin_region .site-header__search,
body.tax-pin_category .site-header__search,
body.tax-pin_type .site-header__search {
  display: none;
}

@media (max-width: 744px) {
  body.post-type-archive-pin .site-header__inner,
  body.tax-pin_region .site-header__inner,
  body.tax-pin_category .site-header__inner,
  body.tax-pin_type .site-header__inner {
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand utilities";
  }

  body.post-type-archive-pin .site-header__search,
  body.tax-pin_region .site-header__search,
  body.tax-pin_category .site-header__search,
  body.tax-pin_type .site-header__search {
    display: none;
  }
}


/* ── Navigation ───────────────────────────────────────────── */

.site-navigation__list,
.site-footer__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-navigation__list--mega {
  gap: 2px;
}

.site-navigation__list--mega > .menu-item {
  list-style: none;
}

.site-navigation a:not(.nav-mega-link):not(.nav-mega-featured__cta) {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  color: var(--theme-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition:
    background var(--dur-fast) var(--ease-expo-out),
    color var(--dur-fast) var(--ease-expo-out);
}

.site-navigation a:not(.nav-mega-link):not(.nav-mega-featured__cta)::after {
  content: none;
}

.site-navigation a:not(.nav-mega-link):not(.nav-mega-featured__cta):hover,
.site-navigation a:not(.nav-mega-link):not(.nav-mega-featured__cta):focus-visible {
  background: var(--theme-subtle);
  color: var(--theme-text);
  text-decoration: none;
  outline: none;
}

.site-navigation .current-menu-item > a {
  background: var(--theme-subtle);
  color: var(--theme-text);
}

/* Footer links */
.site-footer a {
  color: var(--theme-muted);
  font-size: var(--text-sm);
  font-weight: 400;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-expo-out);
}

.site-footer a:hover {
  color: var(--theme-text);
  text-decoration: none;
}

/* Language switcher (Polylang + dropdown primitive) */
.dropdown--lang {
  flex-shrink: 0;
}

.dropdown--header .dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--header-control-height);
  height: var(--header-control-height);
  padding-inline: var(--space-3);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--theme-muted);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1;
  box-shadow: none;
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-expo-out),
    color var(--dur-fast) var(--ease-expo-out);
}

.dropdown--lang.dropdown--header .dropdown__trigger:hover,
.dropdown--lang.dropdown--header .dropdown__trigger:focus-visible {
  background: color-mix(in srgb, var(--theme-subtle) 85%, transparent);
  color: var(--theme-text);
  outline: none;
}

.dropdown--lang.dropdown--header.is-open .dropdown__trigger {
  background: var(--theme-subtle);
  color: var(--theme-text);
}

.dropdown--lang:not(.dropdown--header) .dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--header-control-height);
  height: var(--header-control-height);
  padding-inline: var(--space-3);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-pill);
  color: var(--theme-text);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
}

.dropdown--lang:not(.dropdown--header) .dropdown__trigger:hover,
.dropdown--lang:not(.dropdown--header) .dropdown__trigger:focus-visible {
  border-color: var(--theme-border-strong);
  background: var(--theme-subtle);
}

.dropdown--lang .dropdown__icon-globe {
  flex-shrink: 0;
  color: color-mix(in srgb, var(--theme-muted) 88%, var(--theme-text));
  transition: color var(--dur-fast) var(--ease-expo-out);
}

.dropdown--lang.dropdown--header .dropdown__trigger:hover .dropdown__icon-globe,
.dropdown--lang.dropdown--header .dropdown__trigger:focus-visible .dropdown__icon-globe,
.dropdown--lang.dropdown--header.is-open .dropdown__icon-globe {
  color: var(--theme-text);
}

.dropdown--lang.dropdown--header .dropdown__trigger {
  gap: var(--space-1);
  padding-inline: var(--space-2);
}

.dropdown--lang .dropdown__trigger-code {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
}

.dropdown--lang .dropdown__icon-chevron {
  flex-shrink: 0;
  color: color-mix(in srgb, var(--theme-muted) 75%, var(--theme-text));
  opacity: 0.85;
  transition:
    rotate var(--dur-fast) var(--ease-expo-out),
    color var(--dur-fast) var(--ease-expo-out),
    opacity var(--dur-fast) var(--ease-expo-out);
}

.dropdown--lang.dropdown--header .dropdown__trigger:hover .dropdown__icon-chevron,
.dropdown--lang.dropdown--header .dropdown__trigger:focus-visible .dropdown__icon-chevron,
.dropdown--lang.dropdown--header.is-open .dropdown__icon-chevron {
  color: var(--theme-text);
  opacity: 1;
}

.dropdown--lang.is-open .dropdown__icon-chevron {
  rotate: 180deg;
}

.dropdown--lang .dropdown__menu {
  min-width: 11.5rem;
}

/* Header login — nav-like, slightly muted */
.site-header__auth {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-height: var(--header-control-height);
  height: var(--header-control-height);
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--theme-muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background var(--dur-fast) var(--ease-expo-out),
    color var(--dur-fast) var(--ease-expo-out);
}

.site-header__auth:hover,
.site-header__auth:focus-visible {
  background: var(--theme-subtle);
  color: var(--theme-text);
  text-decoration: none;
  outline: none;
}

/* Account avatar — outside language cluster */
.dropdown--account {
  flex-shrink: 0;
}

.dropdown--account .dropdown__trigger--account {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: var(--header-control-height);
  min-width: var(--header-control-height);
  height: var(--header-control-height);
  min-height: var(--header-control-height);
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-expo-out);
}

.dropdown--account .dropdown__trigger--account:hover,
.dropdown--account .dropdown__trigger--account:focus-visible {
  background: var(--theme-subtle);
  outline: none;
}

.dropdown--account .dropdown__menu {
  min-width: 12rem;
  right: 0;
  left: auto;
}

.dropdown--lang .dropdown__item-code {
  min-width: 2rem;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--theme-muted);
}

.dropdown--lang .dropdown__item--active .dropdown__item-code {
  color: var(--theme-accent);
}

.dropdown--lang .dropdown__item-name {
  flex: 1;
}

.dropdown--lang .dropdown__item--muted .dropdown__item-name {
  color: var(--theme-muted);
}


/* ── Site Main ────────────────────────────────────────────── */

.site-main {
  padding-top: var(--space-8);
  padding-bottom: var(--space-section);
}

.site-main__inner {
  display: grid;
  gap: var(--space-10);
}

body.post-type-archive-pin .site-header,
body.tax-pin_region .site-header,
body.tax-pin_category .site-header,
body.tax-pin_type .site-header,
body.post-type-archive-pin .site-main,
body.tax-pin_region .site-main,
body.tax-pin_category .site-main,
body.tax-pin_type .site-main {
  padding-inline: var(--space-page-inline);
}

body.post-type-archive-pin .site-header__inner,
body.tax-pin_region .site-header__inner,
body.tax-pin_category .site-header__inner,
body.tax-pin_type .site-header__inner,
body.post-type-archive-pin .site-main__inner,
body.tax-pin_region .site-main__inner,
body.tax-pin_category .site-main__inner,
body.tax-pin_type .site-main__inner {
  width: 100%;
  max-width: none;
}

body.post-type-archive-pin .site-main,
body.tax-pin_region .site-main,
body.tax-pin_category .site-main,
body.tax-pin_type .site-main {
  padding-top: 0;
  padding-bottom: var(--space-6);
}

body.post-type-archive-pin .site-main__inner,
body.tax-pin_region .site-main__inner,
body.tax-pin_category .site-main__inner,
body.tax-pin_type .site-main__inner {
  gap: 0;
}

body.single-pin .site-header,
body.single-pin .site-main {
  padding-inline: var(--space-page-inline);
}

body.single-pin .site-header__inner,
body.single-pin .site-main__inner {
  width: 100%;
  max-width: var(--theme-listing-width);
  margin-inline: auto;
}

body.single-pin .site-main {
  padding-top: var(--space-5);
  padding-bottom: var(--space-section);
}

body.single-pin .site-main__inner {
  gap: var(--space-6);
}

body.single-pin .pin-single {
  width: 100%;
}


/* ── Prose & Entries ──────────────────────────────────────── */

.entry {
  width: min(100%, var(--theme-content-width));
}

.entry:has(> .internal-hero) {
  width: min(100%, var(--theme-site-width));
}

.entry:has(> .internal-hero) > .entry-content,
.entry:has(> .internal-hero) > .entry-footer {
  width: min(100%, var(--theme-content-width));
  margin-inline: auto;
}

.hub360-thing:has(> .internal-hero) {
  width: min(100%, var(--theme-site-width));
  margin-inline: auto;
}

.hub360-thing:has(> .internal-hero) .hub360-thing__body {
  width: min(100%, var(--theme-content-width));
  margin-inline: auto;
}

.entry-header,
.archive-hero,
.section-heading {
  display: grid;
  gap: var(--space-3);
}

.archive-hero {
  width: min(100%, var(--theme-listing-width));
}

.breadcrumbs {
  width: min(100%, var(--theme-content-width));
  margin-block-end: var(--space-3);
}

.breadcrumbs--entry {
  margin-block-end: var(--space-4);
}

.breadcrumbs--pin {
  width: 100%;
  margin-block-end: var(--space-3);
}

.breadcrumbs--internal {
  margin-block-end: 0;
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-xs, 0.75rem);
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--theme-text-subtle, var(--color-neutral-500));
}

.breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}

.breadcrumbs__item--current {
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(18rem, 42vw);
}

.breadcrumbs__item:not(:first-child)::before {
  content: "›";
  margin-inline: var(--space-2);
  color: var(--theme-text-subtle, var(--color-neutral-400));
  font-size: 0.9em;
  pointer-events: none;
}

.breadcrumbs__link {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.breadcrumbs__link:hover,
.breadcrumbs__link:focus-visible {
  color: var(--theme-text-muted, var(--color-neutral-700));
  text-decoration: none;
}

.breadcrumbs__current {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: inherit;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-title,
.entry-title,
.home-hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl));
  font-weight: 700;
  line-height: 1.43;
  letter-spacing: 0;
}

.archive-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  color: var(--theme-muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.archive-hero__eyebrow::before {
  content: none;
}

.archive-description {
  color: var(--theme-muted);
  font-size: var(--text-base);
  max-width: 36rem;
  line-height: 1.5;
  margin: 0;
}

.entry-meta,
.not-found-message {
  color: var(--theme-muted);
  font-size: var(--text-sm);
}

/* ── Empty / unavailable states ───────────────────────────── */

.hub360-empty {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  padding: var(--space-16) var(--space-8);
  text-align: center;
  color: var(--theme-muted);
}

.hub360-empty--compact {
  padding: var(--space-8) var(--space-6);
  gap: var(--space-3);
}

.hub360-empty__icon {
  color: var(--theme-muted-soft);
}

.hub360-empty__headline {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--theme-text);
}

.hub360-empty--compact .hub360-empty__headline {
  font-size: var(--text-lg);
}

.hub360-empty__sub {
  margin: 0;
  max-width: 28rem;
  font-size: var(--text-base);
  line-height: 1.5;
}

/* ── Live data metric panels ──────────────────────────────── */

.live-data-panel {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--theme-border-soft);
  border-radius: var(--theme-radius);
  background: var(--theme-surface);
}

.live-data-panel--empty {
  border-style: dashed;
  background: var(--theme-subtle);
}

.live-data-panel__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--theme-text);
}

.live-data-panel__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.live-data-panel__item {
  display: grid;
  gap: var(--space-1);
}

.live-data-panel__value {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--theme-text);
  font-variant-numeric: tabular-nums;
}

.live-data-panel__label {
  font-size: var(--text-sm);
  color: var(--theme-muted);
  line-height: 1.4;
}

.live-data-panel__empty {
  margin: 0;
  color: var(--theme-muted);
  font-size: var(--text-sm);
}

.entry-content > :first-child,
.entry-summary > :first-child { margin-top: 0; }

.entry-content > :last-child,
.entry-summary > :last-child  { margin-bottom: 0; }


/* ── Internal editorial header ────────────────────────────── */

.internal-hero {
  --internal-hero-bg: var(--theme-header-bg);
  --internal-hero-accent: var(--theme-accent);
  width: min(100%, var(--theme-site-width));
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 85% 12%, var(--theme-header-chip-hover), transparent 32%),
    linear-gradient(135deg, var(--internal-hero-bg), var(--theme-header-bg));
  color: var(--theme-header-fg);
}

.internal-hero--services {
  --internal-hero-bg: var(--theme-header-bg-services);
  --internal-hero-accent: var(--theme-accent);
}

.internal-hero--benchmarks {
  --internal-hero-bg: var(--theme-header-bg-benchmarks);
  --internal-hero-accent: var(--color-success);
}

.internal-hero--playbooks {
  --internal-hero-bg: var(--theme-header-bg-playbooks);
  --internal-hero-accent: var(--color-warning);
}

.internal-hero--tools {
  --internal-hero-bg: var(--theme-header-bg-tools);
  --internal-hero-accent: var(--color-legal-link);
}

.internal-hero--editorial {
  --internal-hero-bg: var(--theme-header-bg);
  --internal-hero-accent: var(--theme-accent);
}

.internal-hero--system {
  --internal-hero-bg: var(--theme-header-bg-system);
  --internal-hero-accent: var(--theme-muted-soft);
}

.internal-hero--neutral {
  --theme-header-fg: var(--theme-text);
  --theme-header-muted: var(--theme-muted);
  --theme-header-border: var(--theme-border);
  --theme-header-chip: var(--theme-subtle);
  --theme-header-chip-hover: var(--theme-surface-strong);
  --theme-header-scrim: rgba(0, 0, 0, 0.08);
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  border-bottom: 1px solid var(--theme-border);
  width: 100%;
  margin-inline: 0;
}

/* Posts listing: constrain the template's <main> as a grid item */
.posts-listing-page.site-main {
  min-width: 0;
  width: 100%;
  /* each inner block (hero, filters, body) handles its own width/padding */
  padding-inline: 0;
  padding-top: 0;
}


.internal-hero--neutral .internal-hero__inner {
  min-height: 0;
  padding-block-start: 0;
  padding-inline: 0;
}

.internal-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-items: stretch;
  min-height: var(--size-internal-hero-min);
  padding: var(--space-internal-hero);
}

.internal-hero--with-media .internal-hero__inner {
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.82fr);
}

.internal-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  max-width: 44rem;
}

.internal-hero .breadcrumbs {
  width: 100%;
  margin-block: 0 var(--space-5);
  color: var(--theme-header-muted);
}

.internal-hero .breadcrumbs__item:not(:first-child)::before {
  color: var(--theme-header-border);
}

.internal-hero .breadcrumbs__link:hover,
.internal-hero .breadcrumbs__link:focus-visible {
  color: var(--theme-header-fg);
}

.internal-hero .breadcrumbs__current {
  color: var(--theme-header-muted);
}

.internal-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  width: fit-content;
  margin: 0 0 var(--space-4);
  color: var(--theme-header-muted);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.internal-hero__eyebrow::before {
  content: "";
  width: 2.25rem;
  height: 0.125rem;
  border-radius: var(--radius-pill);
  background: var(--internal-hero-accent);
}

.internal-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-start: var(--space-5);
  margin-block-end: var(--space-4);
}

.internal-hero__badge {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--theme-header-border);
  border-radius: var(--radius-pill);
  background: var(--theme-header-chip);
  color: var(--theme-header-fg);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition:
    background var(--dur-fast) var(--ease-expo-out),
    border-color var(--dur-fast) var(--ease-expo-out);
}

.internal-hero__badge:hover,
.internal-hero__badge:focus-visible {
  border-color: var(--theme-header-fg);
  background: var(--theme-header-chip-hover);
  color: var(--theme-header-fg);
  text-decoration: none;
}

.internal-hero__title {
  max-width: 13ch;
  margin: 0;
  color: var(--theme-header-fg);
  font-family: var(--font-display);
  font-size: var(--text-fluid-hero);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.02;
}

.internal-hero__dek {
  max-width: 42rem;
  margin: var(--space-5) 0 0;
  color: var(--theme-header-muted);
  font-size: var(--text-fluid-md);
  line-height: 1.6;
}

.internal-hero__dek > :first-child {
  margin-top: 0;
}

.internal-hero__dek > :last-child {
  margin-bottom: 0;
}

.internal-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-block-start: var(--space-5);
  color: var(--theme-header-muted);
  font-size: var(--text-sm);
}

.internal-hero__meta-item:not(:first-child)::before {
  content: "";
  display: inline-block;
  width: 0.25rem;
  height: 0.25rem;
  margin-inline-end: var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--theme-header-border);
  vertical-align: middle;
}

.internal-hero .entry-byline__text,
.internal-hero .entry-byline__author,
.internal-hero .entry-byline__sep {
  color: inherit;
}

.internal-hero__media {
  position: relative;
  min-height: 18rem;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--theme-header-border);
  border-radius: var(--radius-md);
  background: var(--theme-header-chip);
}

.internal-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, var(--theme-header-scrim));
  pointer-events: none;
}

.internal-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 18rem;
  object-fit: cover;
}

@media (max-width: 900px) {
  .internal-hero {
    border-radius: var(--radius-md);
  }

  .internal-hero--with-media .internal-hero__inner {
    grid-template-columns: 1fr;
  }

  .internal-hero__inner {
    min-height: 0;
  }

  .internal-hero__title {
    max-width: 15ch;
  }
}

/* ── Banner layout: full-width image below content ──────────── */

.internal-hero--banner .internal-hero__inner {
  grid-template-columns: 1fr;
  min-height: 0;
  padding-bottom: var(--space-6);
}

.internal-hero--banner .internal-hero__content {
  max-width: var(--theme-content-width);
}

.internal-hero--banner .internal-hero__media {
  border-radius: 0;
  border: 0;
  min-height: 0;
  margin: 0;
  aspect-ratio: 16 / 7;
}

.internal-hero--banner .internal-hero__image {
  min-height: 0;
}

.internal-hero--banner .internal-hero__media::after {
  display: none;
}

/* ── Posts card grid (archive + blog listing) ───────────────── */

.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-5);
  width: min(100%, var(--theme-site-width));
  margin-inline: auto;
  margin-block-start: var(--space-8);
}


/* ── Buttons ──────────────────────────────────────────────── */
/*
 * Token inventory (override per context):
 *   --btn-height:   min-height of every button (default 3rem)
 *   --btn-px:       horizontal padding          (default var(--space-6))
 *   --btn-py:       vertical padding            (default 0.875rem)
 *   --btn-radius:   border-radius              (default var(--radius-sm))
 *   --btn-font-size                             (default var(--text-base))
 *
 * Variants (modifier classes):
 *   .button--secondary  — outlined, dark border, neutral fill
 *   .button--ghost      — no border, no background; accent text
 *   .button--sm         — compact: 2.25rem min-height, smaller padding/font
 *   .button--lg         — roomy:   3.5rem min-height, larger padding
 *
 * Aliases:
 *   .btn                — identical to .button (shorthand for content/shortcodes)
 */

:root {
  --btn-height:    3rem;
  --btn-px:        var(--space-6);
  --btn-py:        0.875rem;
  --btn-radius:    var(--radius-sm);
  --btn-font-size: var(--text-base);
}

.button,
.btn,
button.button,
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--btn-height);
  max-width: 20rem;
  padding: var(--btn-py) var(--btn-px);
  border: 1px solid var(--theme-accent);
  border-radius: var(--btn-radius);
  background: var(--theme-accent);
  color: var(--color-on-primary);
  font-family: var(--font-body);
  font-size: var(--btn-font-size);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition:
    background    var(--dur-fast) var(--ease-expo-out),
    border-color  var(--dur-fast) var(--ease-expo-out),
    box-shadow    var(--dur-fast) var(--ease-expo-out),
    transform     var(--dur-fast) var(--ease-expo-out);
}

.button:hover,
.button:focus,
.btn:hover,
.btn:focus,
.wp-block-button__link:hover,
.wp-block-button__link:focus {
  background: var(--theme-accent-strong);
  border-color: var(--theme-accent-strong);
  color: var(--color-on-primary);
  text-decoration: none;
  box-shadow: none;
  transform: none;
}

.button:active,
.btn:active {
  transform: translateY(0);
  box-shadow: none;
}

/* ── Secondary (outline) ─────── */
.button--secondary {
  background: var(--theme-surface);
  border-color: var(--theme-text);
  color: var(--theme-text);
}

.button--secondary:hover,
.button--secondary:focus {
  background: var(--theme-subtle);
  border-color: var(--theme-text);
  color: var(--theme-text);
  box-shadow: none;
}

/* ── Ghost ───────────────────── */
.button--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--theme-accent);
}

.button--ghost:hover,
.button--ghost:focus {
  background: var(--theme-subtle);
  border-color: transparent;
  color: var(--theme-accent-strong);
  box-shadow: none;
}

/* ── Size: small ─────────────── */
.button--sm {
  --btn-height:    2.25rem;
  --btn-px:        var(--space-4);
  --btn-py:        0.5rem;
  --btn-font-size: var(--text-sm);
}

/* ── Size: large ─────────────── */
.button--lg {
  --btn-height:    3.5rem;
  --btn-px:        var(--space-8);
  --btn-py:        1rem;
  --btn-font-size: var(--text-lg);
}


/* ── Form Primitives ──────────────────────────────────────── */

/*
 * Field wrapper — use around every label+input+hint+error group.
 *
 *   <div class="field">
 *     <label class="field__label" for="id">Label</label>
 *     <input class="input" id="id" type="text" placeholder="…">
 *     <span class="field__hint">Helpful context</span>
 *     <span class="field__error" role="alert">Error message</span>
 *   </div>
 *
 * Add class `is-error` to .field to surface the error state.
 */

.field {
  display: grid;
  gap: var(--space-1);
}

.field__label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--theme-text);
  letter-spacing: 0;
}

.field__hint {
  font-size: var(--text-sm);
  color: var(--theme-muted);
  line-height: 1.43;
}

.field__error {
  display: none;
  font-size: var(--text-sm);
  color: var(--theme-error);
  line-height: 1.43;
}

.field.is-error .field__error { display: block; }

.field.is-error .input,
.field.is-error .textarea,
.field.is-error .select-wrap select {
  border-color: var(--theme-error);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-error) 20%, transparent);
}


/* Text input */
.input {
  width: 100%;
  height: 3.5rem;
  padding: 0 var(--space-4);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-sm);
  background: var(--theme-surface);
  color: var(--theme-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.5;
  transition:
    border-color var(--dur-fast) var(--ease-expo-out),
    box-shadow   var(--dur-fast) var(--ease-expo-out);
  appearance: none;
  -webkit-appearance: none;
}

.input::placeholder { color: var(--theme-muted); }
.input:hover  { border-color: var(--theme-border-strong); }

.input:focus {
  outline: none;
  border-color: var(--theme-text);
  box-shadow: 0 0 0 2px var(--theme-text);
}

.input:disabled {
  background: var(--theme-subtle);
  color: var(--theme-muted);
  border-color: var(--theme-border);
  cursor: not-allowed;
}

.input[readonly] {
  background: var(--theme-subtle);
  cursor: default;
}

/* Input with leading icon — wrap in .input-wrap */
.input-wrap {
  position: relative;
  display: grid;
}

.input-wrap .input {
  padding-left: var(--space-10);
}

.input-wrap__icon {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  translate: 0 -50%;
  width: 1rem;
  height: 1rem;
  color: var(--theme-muted);
  pointer-events: none;
}


/* Textarea */
.textarea {
  width: 100%;
  min-height: 8rem;
  padding: var(--space-4);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-sm);
  background: var(--theme-surface);
  color: var(--theme-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  resize: vertical;
  transition:
    border-color var(--dur-fast) var(--ease-expo-out),
    box-shadow   var(--dur-fast) var(--ease-expo-out);
}

.textarea::placeholder { color: var(--theme-muted); }
.textarea:hover  { border-color: var(--theme-border-strong); }

.textarea:focus {
  outline: none;
  border-color: var(--theme-text);
  box-shadow: 0 0 0 2px var(--theme-text);
}

.textarea:disabled {
  background: var(--theme-subtle);
  color: var(--theme-muted);
  cursor: not-allowed;
}


/* Select — wrap native <select> in .select-wrap for custom chevron */
.select-wrap {
  position: relative;
  display: grid;
}

.select-wrap::after {
  content: "";
  position: absolute;
  right: var(--space-4);
  top: 50%;
  translate: 0 -60%;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid var(--theme-muted);
  border-bottom: 1.5px solid var(--theme-muted);
  rotate: 45deg;
  pointer-events: none;
  transition: rotate var(--dur-fast) var(--ease-expo-out);
}

.select-wrap select {
  width: 100%;
  height: 3.5rem;
  padding: 0 var(--space-10) 0 var(--space-4);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-sm);
  background: var(--theme-surface);
  color: var(--theme-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--dur-fast) var(--ease-expo-out),
              box-shadow   var(--dur-fast) var(--ease-expo-out);
}

.select-wrap select:hover { border-color: var(--theme-border-strong); }

.select-wrap select:focus {
  outline: none;
  border-color: var(--theme-text);
  box-shadow: 0 0 0 2px var(--theme-text);
}

.select-wrap select:disabled {
  background: var(--theme-subtle);
  color: var(--theme-muted);
  cursor: not-allowed;
}


/* Checkbox */
.checkbox-wrap {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
}

.checkbox-wrap input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  border: 1.5px solid var(--theme-border-strong);
  border-radius: var(--radius-sm);
  background: var(--theme-surface);
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease-expo-out),
    background   var(--dur-fast) var(--ease-expo-out);
}

.checkbox-wrap input[type="checkbox"]:hover { border-color: var(--theme-text); }

.checkbox-wrap input[type="checkbox"]:checked {
  background: var(--theme-text);
  border-color: var(--theme-text);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.72rem;
}

.checkbox-wrap input[type="checkbox"]:focus-visible {
  outline: 2.5px solid var(--theme-accent);
  outline-offset: 2px;
}

.checkbox-wrap input[type="checkbox"]:disabled {
  background: var(--theme-subtle);
  border-color: var(--theme-border);
  cursor: not-allowed;
}

.checkbox-wrap__label {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--theme-text);
  line-height: 1.5;
  cursor: pointer;
}


/* Radio */
.radio-wrap {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
}

.radio-wrap input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  border: 1.5px solid var(--theme-border-strong);
  border-radius: var(--radius-pill);
  background: var(--theme-surface);
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease-expo-out),
    border-width var(--dur-fast) var(--ease-expo-out);
}

.radio-wrap input[type="radio"]:hover { border-color: var(--theme-text); }
.radio-wrap input[type="radio"]:checked { border: 0.375rem solid var(--theme-text); }

.radio-wrap input[type="radio"]:focus-visible {
  outline: 2.5px solid var(--theme-accent);
  outline-offset: 2px;
}

.radio-wrap input[type="radio"]:disabled {
  background: var(--theme-subtle);
  border-color: var(--theme-border);
  cursor: not-allowed;
}

.radio-wrap__label {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--theme-text);
  line-height: 1.5;
  cursor: pointer;
}


/* Toggle / Switch */
.toggle-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
}

.toggle-wrap input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 2.75rem;
  height: 1.5rem;
  flex-shrink: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--theme-border-strong);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-expo-out);
}

.toggle-wrap input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--color-on-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: translate var(--dur-base) var(--ease-expo-out);
}

.toggle-wrap input[type="checkbox"]:checked {
  background: var(--theme-text);
}

.toggle-wrap input[type="checkbox"]:checked::after {
  translate: 1.25rem 0;
}

.toggle-wrap input[type="checkbox"]:focus-visible {
  outline: 2.5px solid var(--theme-accent);
  outline-offset: 2px;
}

.toggle-wrap input[type="checkbox"]:disabled {
  background: var(--theme-subtle);
  cursor: not-allowed;
}

.toggle-wrap__label {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--theme-text);
  line-height: 1.5;
  cursor: pointer;
}


/* Quantity / Guest stepper */
.stepper {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}

.stepper__btn {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  padding: 0;
  border: 1.5px solid var(--theme-border-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--theme-text);
  font-size: var(--text-base);
  line-height: 1;
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease-expo-out),
    background   var(--dur-fast) var(--ease-expo-out);
}

.stepper__btn:hover:not(:disabled) {
  border-color: var(--theme-text);
  background: var(--theme-subtle);
}

.stepper__btn:disabled {
  border-color: var(--theme-border);
  color: var(--theme-muted);
  cursor: not-allowed;
}

.stepper__value {
  min-width: 2.5rem;
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--theme-text);
}


/* ── Badge, Tag, Chip ─────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  background: var(--theme-subtle);
  color: var(--theme-text);
  font-family: var(--font-body);
  font-size: var(--text-badge);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: 0;
  white-space: nowrap;
}

.badge--accent {
  background: var(--theme-accent);
  color: var(--color-on-primary);
}

.badge--outline {
  background: transparent;
  border: 1px solid var(--theme-border);
  color: var(--theme-text);
}

/* Filter chip — interactive pill, active state flips to ink fill */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 2.25rem;
  padding: 0 var(--space-4);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-pill);
  background: var(--theme-surface);
  color: var(--theme-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition:
    border-color var(--dur-fast) var(--ease-expo-out),
    background   var(--dur-fast) var(--ease-expo-out),
    box-shadow   var(--dur-fast) var(--ease-expo-out);
}

.chip:hover {
  border-color: var(--theme-text);
  box-shadow: var(--theme-shadow);
}

.chip.is-active,
.chip[aria-pressed="true"] {
  background: var(--theme-text);
  border-color: var(--theme-text);
  color: var(--color-on-primary);
}

/* Horizontal scroll row of chips */
.chip-strip {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: var(--space-1);
}

.chip-strip::-webkit-scrollbar { display: none; }


/* ── Avatar ───────────────────────────────────────────────── */

.avatar {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--theme-subtle);
  color: var(--theme-muted);
  font-family: var(--font-body);
  font-weight: 600;
  flex-shrink: 0;
}

.avatar--header {
  width: var(--header-control-height);
  height: var(--header-control-height);
  aspect-ratio: 1;
  font-size: var(--text-xs);
}
.avatar--sm     { width: 2rem;   height: 2rem;   font-size: var(--text-xs); }
.avatar--md     { width: 2.5rem; height: 2.5rem; font-size: var(--text-sm); }
.avatar--lg     { width: 3rem;   height: 3rem;   font-size: var(--text-base); }
.avatar--xl     { width: 4rem;   height: 4rem;   font-size: var(--text-lg); }

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar--initials {
  --avatar-hue: 220;
  background: hsl(var(--avatar-hue) 42% 93%);
  color: hsl(var(--avatar-hue) 34% 36%);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.avatar__initials {
  line-height: 1;
  user-select: none;
}


/* ── Divider ──────────────────────────────────────────────── */

.divider {
  border: 0;
  border-top: 1px solid var(--theme-border);
  margin: var(--space-6) 0;
}

.divider--soft { border-top-color: var(--theme-border-soft); }

/* Labelled divider — "or" row */
.divider--label {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-6) 0;
}

.divider--label::before,
.divider--label::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--theme-border);
}

.divider--label span {
  flex-shrink: 0;
  font-size: var(--text-sm);
  color: var(--theme-muted);
  font-weight: 500;
}


/* ── Spinner ──────────────────────────────────────────────── */

.spinner {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid var(--theme-border);
  border-top-color: var(--theme-text);
  border-radius: var(--radius-pill);
  animation: hub360-spin var(--dur-slow) linear infinite;
  flex-shrink: 0;
}

.spinner--sm    { width: 1rem;   height: 1rem;   border-width: 1.5px; }
.spinner--lg    { width: 2.5rem; height: 2.5rem; border-width: 3px; }
.spinner--accent {
  border-color: var(--theme-border);
  border-top-color: var(--theme-accent);
}

@keyframes hub360-spin { to { rotate: 360deg; } }


/* ── Alert / Banner ───────────────────────────────────────── */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.alert--info    { background: color-mix(in srgb, var(--color-legal-link) 10%, transparent); color: var(--theme-text); }
.alert--success { background: color-mix(in srgb, var(--color-success) 12%, transparent);    color: var(--theme-text); }
.alert--warning { background: color-mix(in srgb, var(--color-warning) 12%, transparent);    color: var(--theme-text); }
.alert--error   { background: color-mix(in srgb, var(--theme-error) 10%, transparent);      color: var(--theme-error); }

.alert__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1rem;
}

.alert__title {
  font-weight: 700;
  margin: 0 0 var(--space-1);
}

.alert__body { flex: 1; }


/* ── Toast (anchored bottom-center) ─────────────────────────  */

.toast-region {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  translate: -50% 0;
  z-index: 9000;
  display: grid;
  gap: var(--space-3);
  pointer-events: none;
}

.toast {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 20rem;
  max-width: 90vw;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--theme-text);
  color: var(--color-on-primary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  pointer-events: all;
  animation: hub360-toast-in var(--dur-base) var(--ease-expo-out) both;
}

@keyframes hub360-toast-in {
  from { opacity: 0; translate: 0 0.75rem; }
  to   { opacity: 1; translate: 0 0; }
}


/* ── Modal / Dialog ───────────────────────────────────────── */

.modal-backdrop {
  display: none; /* hidden by default — JS removes [hidden] to show */
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.5);
  place-items: center;
  padding: var(--space-5);
}

.modal-backdrop:not([hidden]) {
  display: grid;
  animation: hub360-fade-in var(--dur-fast) var(--ease-expo-out) both;
}

.modal {
  position: relative;
  width: min(100%, 36rem);
  max-height: calc(100dvh - var(--space-10));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--radius-lg);
  background: var(--theme-surface);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.24);
  animation: hub360-modal-up var(--dur-base) var(--ease-expo-out) both;
}

.modal--wide  { width: min(100%, 54rem); }

/* Bottom sheet on mobile */
.modal--sheet {
  width: 100%;
  max-width: none;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  align-self: end;
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--theme-border);
  position: sticky;
  top: 0;
  background: var(--theme-surface);
  z-index: 1;
}

.modal__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
}

.modal__close {
  display: grid;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--theme-subtle);
  color: var(--theme-text);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-expo-out);
}

.modal__close:hover { background: var(--theme-surface-strong); }

.modal__body { padding: var(--space-6); }

.modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border-top: 1px solid var(--theme-border);
  position: sticky;
  bottom: 0;
  background: var(--theme-surface);
}

@keyframes hub360-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes hub360-modal-up {
  from { opacity: 0; translate: 0 1rem; }
  to   { opacity: 1; translate: 0 0; }
}


/* ── Dropdown Menu ────────────────────────────────────────── */

.dropdown { position: relative; display: inline-block; }

.dropdown__menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: 50;
  min-width: 13rem;
  padding: var(--space-2) 0;
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-md);
  background: var(--theme-surface);
  box-shadow: var(--theme-shadow);
  opacity: 0;
  translate: 0 -0.5rem;
  pointer-events: none;
  transition:
    opacity   var(--dur-fast) var(--ease-expo-out),
    translate var(--dur-fast) var(--ease-expo-out);
}

.dropdown.is-open .dropdown__menu {
  opacity: 1;
  translate: 0 0;
  pointer-events: all;
}

.dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 0;
  background: transparent;
  color: var(--theme-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-expo-out);
}

.dropdown__item:hover   { background: var(--theme-subtle); text-decoration: none; }
.dropdown__item--active { font-weight: 600; }
.dropdown__item--danger { color: var(--theme-error); }

.dropdown__divider {
  border: 0;
  border-top: 1px solid var(--theme-border);
  margin: var(--space-2) 0;
}

.dropdown__trigger {
  cursor: pointer;
}


/* ── Multi-select Dropdown ────────────────────────────────── */

.ms-dropdown {
  position: relative;
  display: block;
  min-width: 0;
}

.ms-dropdown__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: 3.5rem;
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--theme-text);
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-expo-out);
}

.ms-dropdown__trigger-copy {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.ms-dropdown__trigger-label {
  color: var(--theme-text);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.ms-dropdown__summary {
  min-width: 0;
  overflow: hidden;
  color: var(--theme-muted);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-dropdown__summary.has-selection {
  color: var(--theme-text);
  font-weight: 500;
}

.ms-dropdown__trigger:focus-visible {
  background: var(--theme-subtle);
  outline: 2.5px solid var(--theme-accent);
  outline-offset: -2px;
}

.ms-dropdown.is-open .ms-dropdown__trigger {
  background: var(--theme-subtle);
}

.ms-dropdown__trigger:hover {
  background: var(--theme-subtle);
}

.ms-dropdown__chevron {
  flex: 0 0 auto;
  width: 0.75rem;
  height: 0.75rem;
  color: var(--theme-muted);
  transition:
    rotate var(--dur-fast) var(--ease-expo-out),
    color var(--dur-fast) var(--ease-expo-out);
}

.ms-dropdown.is-open .ms-dropdown__chevron {
  rotate: 180deg;
  color: var(--theme-text);
}

.ms-dropdown__menu {
  position: absolute;
  top: calc(100% + var(--space-3));
  left: 50%;
  z-index: 100;
  width: min(20rem, calc(100vw - var(--space-8)));
  min-width: 16rem;
  max-height: min(22rem, 58dvh);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-lg);
  background: var(--theme-surface);
  box-shadow: var(--theme-shadow);
  opacity: 0;
  translate: -50% -0.375rem;
  pointer-events: none;
  transition:
    opacity var(--dur-fast) var(--ease-expo-out),
    translate var(--dur-fast) var(--ease-expo-out);
}

.ms-dropdown.is-open .ms-dropdown__menu {
  opacity: 1;
  translate: -50% 0;
  pointer-events: all;
}

.ms-dropdown__menu[hidden] {
  display: none;
}

.ms-dropdown.is-open .ms-dropdown__menu[hidden] {
  display: grid;
}

.ms-dropdown__sheet-handle {
  display: none;
}

.ms-dropdown__menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5) var(--space-3);
  border-bottom: 1px solid var(--theme-border);
}

.ms-dropdown__menu-title {
  margin: 0;
  color: var(--theme-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.3;
}

.ms-dropdown__clear {
  border: 0;
  background: transparent;
  color: var(--theme-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.ms-dropdown__clear:hover,
.ms-dropdown__clear:focus-visible {
  color: var(--theme-accent-strong);
  outline: none;
}

.ms-dropdown__clear--header {
  text-decoration: none;
}

.ms-dropdown__clear--header:hover,
.ms-dropdown__clear--header:focus-visible {
  text-decoration: underline;
}

.ms-dropdown__options {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-2) 0;
}

.ms-dropdown--compact .ms-dropdown__trigger-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

.ms-dropdown--compact .ms-dropdown__trigger-copy {
  display: block;
  min-width: 0;
}

.ms-dropdown--compact .ms-dropdown__summary {
  color: var(--theme-text);
  font-weight: 500;
}

.ms-dropdown--compact .ms-dropdown__summary:not(.has-selection) {
  color: var(--theme-muted);
  font-weight: 400;
}

.ms-dropdown__option {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 2.5rem;
  margin: 0;
  padding: var(--space-2) var(--space-5);
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-expo-out);
}

.ms-dropdown__option:hover {
  background: var(--theme-subtle);
}

.ms-dropdown__option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ms-dropdown__check {
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  border: 1.5px solid var(--theme-border);
  border-radius: var(--radius-xs, 4px);
  background: var(--theme-surface);
  transition:
    border-color var(--dur-fast) var(--ease-expo-out),
    background var(--dur-fast) var(--ease-expo-out);
}

.ms-dropdown__option input:checked + .ms-dropdown__check {
  border-color: var(--theme-text);
  background: var(--theme-text);
  box-shadow: inset 0 0 0 2px var(--theme-surface);
}

.ms-dropdown__option-label {
  min-width: 0;
  color: var(--theme-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.35;
}

.ms-dropdown__option input:checked ~ .ms-dropdown__option-label {
  font-weight: 600;
}

.ms-dropdown__actions {
  display: none;
  padding: var(--space-4) var(--space-5) var(--space-5);
  border-top: 1px solid var(--theme-border);
  background: var(--theme-surface);
}

.ms-dropdown__apply {
  width: 100%;
  min-height: 3rem;
}

.ms-dropdown__backdrop {
  display: none;
}

@media (max-width: 900px) {
  .ms-dropdown__trigger {
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-4);
  }

  .ms-dropdown__summary {
    font-weight: 500;
  }

  .ms-dropdown.is-open .ms-dropdown__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 80;
    border: 0;
    background: rgba(0, 0, 0, 0.45);
    cursor: pointer;
  }

  .ms-dropdown.is-open .ms-dropdown__menu {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 90;
    width: auto;
    min-width: 0;
    max-height: min(78dvh, 34rem);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: var(--theme-shadow);
    translate: 0 100%;
    transition:
      opacity var(--dur-base) var(--ease-expo-out),
      translate var(--dur-base) var(--ease-expo-out);
  }

  .ms-dropdown.is-open .ms-dropdown__menu[hidden] {
    translate: 0 100%;
  }

  .ms-dropdown.is-open .ms-dropdown__menu:not([hidden]) {
    translate: 0 0;
  }

  .ms-dropdown__sheet-handle {
    display: block;
    width: 3rem;
    height: 0.25rem;
    margin: var(--space-3) auto var(--space-1);
    border-radius: var(--radius-pill);
    background: var(--theme-border);
  }

  .ms-dropdown__actions {
    display: block;
  }

  .ms-dropdown__option {
    min-height: 3rem;
    padding-inline: var(--space-5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ms-dropdown__menu,
  .ms-dropdown.is-open .ms-dropdown__menu {
    transition: none;
  }
}


/* ── Tooltip (data-attr, CSS-only) ────────────────────────── */

[data-tooltip] { position: relative; }

[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + var(--space-2));
  left: 50%;
  translate: -50% 0;
  z-index: 60;
  max-width: 14rem;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--theme-text);
  color: var(--color-on-primary);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-expo-out);
}

[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::before { opacity: 1; }

[data-tooltip-pos="bottom"]::before {
  bottom: auto;
  top: calc(100% + var(--space-2));
}


/* ── Home Hero ────────────────────────────────────────────── */

.home-hero {
  position: relative;
  display: grid;
  min-height: min(38rem, 72vh);
  align-items: end;
  padding: clamp(var(--space-6), 7vw, var(--space-16));
  border-radius: var(--radius-md);
  background:
    url("https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1800&q=80")
    center / cover;
  color: var(--color-on-primary);
  overflow: hidden;
}

.home-hero--compact {
  min-height: min(20rem, 44vh);
  align-items: center;
}

.home-hero--search {
  min-height: min(30rem, 62vh);
  align-items: center;
}

.home-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.58) 0%,
    rgba(0, 0, 0, 0.18) 58%,
    rgba(0, 0, 0, 0.02) 100%
  );
  z-index: 0;
}

.home-hero--search::before {
  background: linear-gradient(
    160deg,
    rgba(0, 0, 0, 0.42) 0%,
    rgba(0, 0, 0, 0.52) 50%,
    rgba(0, 0, 0, 0.62) 100%
  );
}

.home-hero::after {
  content: none;
}

.home-hero a,
.home-hero .archive-hero__eyebrow {
  color: var(--color-on-primary);
}

.home-hero__content {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-5);
  width: min(100%, 38rem);
}

.home-hero--search .home-hero__content {
  width: min(100%, 56rem);
  text-align: center;
  justify-items: center;
}

.home-hero__text {
  font-size: var(--text-base);
  line-height: 1.5;
  opacity: 0.92;
}

.home-hero__cta {
  align-self: start;
}

/* ── Hero Search Bar ──────────────────────────────────────── */

.hero-search {
  display: flex;
  align-items: center;
  width: 100%;
  background: #fff;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.28);
  overflow: visible;
  margin-top: var(--space-3);
}

.hero-search__field {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.75rem 1.25rem;
  flex: 1;
  min-width: 0;
  cursor: default;
}

.hero-search__field--text {
  flex: 2;
  flex-direction: row;
  align-items: center;
  gap: 0.625rem;
  cursor: text;
}

.hero-search__field-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--theme-text);
  white-space: nowrap;
}

.hero-search__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: #888;
}

.hero-search__input {
  flex: 1;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--theme-text);
  background: transparent;
  min-width: 0;
}

.hero-search__input::placeholder {
  color: #888;
  font-weight: 400;
}

.hero-search__select {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 400;
  color: #555;
  cursor: pointer;
  width: 100%;
  padding: 0;
}

.hero-search__select:focus {
  color: var(--theme-text);
}

.hero-search__divider {
  width: 1px;
  height: 2rem;
  background: #e5e5e5;
  flex-shrink: 0;
}

.hero-search__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin: 0.375rem;
  border-radius: var(--radius-pill);
  background: var(--theme-accent);
  color: var(--color-on-primary);
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.15s;
}

.hero-search__btn:hover {
  background: var(--theme-accent-strong);
}

@media (max-width: 640px) {
  .home-hero--search {
    min-height: min(26rem, 60vh);
    padding: clamp(var(--space-5), 5vw, var(--space-10));
  }

  .hero-search {
    flex-direction: column;
    border-radius: var(--radius-lg);
    align-items: stretch;
    overflow: hidden;
  }

  .hero-search__divider {
    width: auto;
    height: 1px;
    margin-inline: 1rem;
  }

  .hero-search__btn {
    margin: 0.5rem;
    border-radius: calc(var(--radius-lg) - 4px);
    height: 2.75rem;
    width: auto;
  }
}


/* ── Home Sections ────────────────────────────────────────── */

.home-sections {
  display: grid;
  gap: var(--space-section);
  padding-block-start: var(--space-section);
}

.home-cat-nav ~ .home-sections {
  padding-block-start: var(--space-6);
}

.home-section {
  display: grid;
  gap: var(--space-5);
}

.home-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

.home-section__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(var(--text-lg), 2.2vw, var(--text-2xl));
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--theme-text);
}

.home-section__see-all {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--theme-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--theme-border);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-expo-out);
}

.home-section__see-all:hover {
  color: var(--theme-accent);
  text-decoration: underline;
  text-decoration-color: var(--theme-accent);
}

.section-heading {
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-4);
}

.section-heading h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: 0;
}


/* ── Home Category Chip Nav ───────────────────────────────── */

.home-cat-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  overflow-x: auto;
  padding-block: var(--space-5);
  padding-inline: var(--space-page-inline);
  margin-inline: calc(var(--space-page-inline) * -1);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.home-cat-nav::-webkit-scrollbar {
  display: none;
}

.home-cat-chip {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0.5rem 1.125rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--theme-border);
  background: var(--theme-surface);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--theme-text);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background var(--dur-fast) var(--ease-expo-out),
    border-color var(--dur-fast) var(--ease-expo-out),
    color var(--dur-fast) var(--ease-expo-out);
}

.home-cat-chip:hover {
  background: var(--theme-subtle);
  border-color: var(--theme-text);
  color: var(--theme-text);
  text-decoration: none;
}

.home-cat-chip--active,
.home-cat-chip--active:hover {
  background: var(--theme-text);
  border-color: var(--theme-text);
  color: var(--theme-surface);
  text-decoration: none;
}


/* ── Home sections — card density overrides ───────────────── */

.home-sections .pin-grid {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px) {
  .home-sections .pin-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.home-sections .pin-card__photo {
  --pin-card-aspect-ratio: 4 / 3;
}

.home-sections .pin-card__description {
  display: none;
}

.post-as-card .pin-card__photo {
  --pin-card-aspect-ratio: 4 / 3;
}


/* ── Posts Listing Page ───────────────────────────────────── */

.posts-listing-page {
  padding-block-end: var(--space-16);
}

/* Sticky category filter strip */
.posts-listing-filters {
  position: sticky;
  top: var(--header-h, 4rem);
  z-index: 20;
  background: var(--theme-surface);
  border-bottom: 1px solid var(--theme-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.posts-listing-filters__inner {
  width: min(100%, var(--theme-site-width));
  margin-inline: auto;
  padding: var(--space-3) var(--space-4);
}

.chip__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3em;
  border-radius: var(--radius-pill);
  background: var(--theme-subtle);
  color: var(--theme-muted);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
  transition: background var(--dur-fast), color var(--dur-fast);
}

.chip.is-active .chip__count,
.chip[aria-pressed="true"] .chip__count {
  background: rgba(255, 255, 255, 0.2);
  color: var(--color-on-primary);
}

/* Body wrapper */
.posts-listing-body {
  width: min(100%, var(--theme-site-width));
  margin-inline: auto;
  padding-inline: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding-block-start: var(--space-8);
  /* Prevent flex items from overflowing the constrained width */
  overflow: hidden;
}

/* Featured article card */
.posts-listing-featured {
  container-type: inline-size;
  /* min-width:0 lets this flex item respect its parent's width */
  min-width: 0;
  width: 100%;
}

.article-slider,
.article-slider__track,
.article-slider__slide {
  width: 100%;
  min-width: 0;
}

/* ── Article slider ───────────────────────────────────────────── */
.article-slider {
  position: relative;
  overflow: hidden;
  border-radius: var(--theme-radius);
}

.article-slider__track {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.article-slider__slide {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-expo-out);
  will-change: opacity;
}

.article-slider__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.article-slider__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding-block-start: var(--space-4);
}

.article-slider__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--theme-border);
  background: var(--theme-surface);
  color: var(--theme-text);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-expo-out),
              border-color var(--dur-fast) var(--ease-expo-out);
}

.article-slider__btn:hover,
.article-slider__btn:focus-visible {
  background: var(--theme-subtle);
  border-color: var(--theme-text);
}

.article-slider__dots {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.article-slider__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--theme-border);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-expo-out),
              transform  var(--dur-fast) var(--ease-expo-out);
}

.article-slider__dot.is-active {
  background: var(--theme-text);
  transform: scale(1.4);
}

/* ── Featured article card ────────────────────────────────────── */
.article-featured {
  display: grid;
  grid-template-columns: 55fr 45fr;
  min-width: 0;
  width: 100%;
  border: 0;
  border-radius: var(--theme-radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--theme-surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  transition:
    transform  var(--dur-base) var(--ease-expo-out),
    box-shadow var(--dur-base) var(--ease-expo-out);
}

.article-featured:hover,
.article-featured:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  text-decoration: none;
  color: inherit;
}

.article-featured__media {
  overflow: hidden;
  background: var(--theme-subtle);
  display: flex;
  align-items: stretch;
}

.article-featured__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-expo-out);
}

.article-featured:hover .article-featured__media img {
  transform: scale(1.03);
}

.article-featured__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-7) var(--space-6);
  justify-content: center;
  min-width: 0;
  overflow: hidden;
}

.article-featured__cat {
  align-self: flex-start;
  font-size: var(--text-xs);
  margin-bottom: var(--space-1);
}

.article-featured__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(var(--text-lg), 2vw, var(--text-2xl));
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--theme-text);
}

.article-featured:hover .article-featured__title {
  color: var(--theme-accent);
}

.article-featured__excerpt {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--theme-muted);
  line-height: 1.6;
}

.article-featured__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-xs);
  color: var(--theme-muted);
}

.article-featured__meta-sep {
  opacity: 0.5;
}

.article-featured__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--theme-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--theme-border);
  margin-top: var(--space-3);
  transition: color var(--dur-fast);
}

.article-featured:hover .article-featured__cta {
  color: var(--theme-accent);
  text-decoration-color: var(--theme-accent);
}

/* Collapse to stacked on narrow screens */
@container (max-width: 36rem) {
  .article-featured {
    grid-template-columns: 1fr;
  }
  .article-featured__media {
    /* Explicit height avoids the intrinsic-size circular dependency
       that defeats aspect-ratio when the child has height:100% */
    height: 13rem;
    min-height: 0;
  }
  .article-featured__media img {
    height: 100%;
    object-fit: cover;
  }
  .article-featured__body {
    padding: var(--space-5);
    justify-content: flex-start;
  }
}

/* ── Hero with media: cap image on mobile ──────────────── */
@media (max-width: 640px) {
  .internal-hero--with-media .internal-hero__media {
    height: 13rem;
    max-height: 13rem;
    min-height: 0;
    overflow: hidden;
  }
  .internal-hero--with-media .internal-hero__image {
    height: 13rem;
    min-height: 0;
  }
}

/* ── Posts listing: mobile responsive ───────────────────── */
@media (max-width: 640px) {

  /* Chip strip: prevent overflow-caused layout issues */
  .chip-strip {
    flex-wrap: nowrap;
  }

  /* Posts body: tighter vertical rhythm */
  .posts-listing-body {
    gap: var(--space-8);
    padding-block-start: var(--space-6);
  }

  /* Section header: stack "Ver todos" below heading on tiny screens */
  .posts-listing-section__header {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-2);
  }

  /* Grid: 2 columns on mobile */
  .posts-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    margin-block-start: var(--space-5);
  }

  /* Grid card: tighter body text */
  .related-card__title {
    font-size: var(--text-sm);
    line-height: 1.3;
  }
  .related-card__meta {
    font-size: 0.65rem;
  }

  /* Slider controls: tighter on mobile */
  .article-slider__controls {
    padding-block-start: var(--space-3);
  }
}

/* Category section */
.posts-listing-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  scroll-margin-top: 8rem;
}
.posts-listing-section[hidden],
.posts-listing-featured[hidden] {
  display: none;
}

.posts-listing-section__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block-end: var(--space-4);
  border-bottom: 1px solid var(--theme-border);
}

.posts-listing-section__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.posts-listing-section__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(var(--text-lg), 2vw, var(--text-2xl));
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--theme-text);
}

.posts-listing-section__desc {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--theme-muted);
  max-width: 44ch;
}

/* ── Post Card Grid ───────────────────────────────────────── */

.post-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--gap-grid);
}

.post-card {
  display: flex;
  flex-direction: column;
}

.post-card__media {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--theme-subtle);
  text-decoration: none;
  aspect-ratio: 16 / 9;
}

.post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-expo-out);
}

.post-card:hover .post-card__media img {
  transform: scale(1.04);
}

.post-card__body {
  padding-top: var(--space-3);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.post-card__cat {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--theme-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
}

.post-card__cat:hover {
  color: var(--theme-accent);
  text-decoration: none;
}

.post-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
}

.post-card__title a {
  color: var(--theme-text);
  text-decoration: none;
}

.post-card__title a:hover {
  color: var(--theme-accent);
  text-decoration: none;
}

.post-card__excerpt {
  font-size: var(--text-sm);
  color: var(--theme-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

.post-card__meta {
  margin-top: auto;
  padding-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--theme-muted);
}

.post-card__media.hub-media-frame {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
}


/* ── Things Grid ──────────────────────────────────────────── */

.things-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--gap-grid);
}

.thing-card {
  display: flex;
  flex-direction: column;
}

.thing-card__media {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--theme-subtle);
  text-decoration: none;
  aspect-ratio: 4 / 3;
  margin-bottom: var(--space-3);
}

.thing-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-expo-out);
}

.thing-card:hover .thing-card__media img {
  transform: scale(1.04);
}

.thing-card__media.hub-media-frame {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
}

.thing-card__title {
  margin: 0 0 var(--space-1);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
}

.thing-card__title a {
  color: var(--theme-text);
  text-decoration: none;
}

.thing-card__title a:hover {
  color: var(--theme-accent);
  text-decoration: none;
}

.thing-card__excerpt {
  font-size: var(--text-sm);
  color: var(--theme-muted);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ── Home sections — responsive wrapping grid ─────────────── */

@media (max-width: 480px) {
  .home-sections .pin-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
}


/* ── Post List ────────────────────────────────────────────── */

.post-list {
  display: grid;
  gap: 0;
}

.post-list__item {
  display: grid;
  grid-template-columns: minmax(7.5rem, 9.5rem) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--theme-border);
  transition: padding-left var(--dur-base) var(--ease-expo-out);
}

.post-list__media {
  display: block;
  text-decoration: none;
}

.post-list__body {
  min-width: 0;
}

.post-list__item:first-child {
  border-top: 1px solid var(--theme-border);
}

.post-list__item:hover {
  padding-left: var(--space-2);
}

.post-list__item h3 {
  margin: 0 0 var(--space-1);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.25;
}

.post-list__item h3 a {
  color: var(--theme-text);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-expo-out);
}

.post-list__item h3 a:hover {
  color: var(--theme-accent);
  text-decoration: none;
}


/* ── Term Grid ────────────────────────────────────────────── */

.term-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--term-tile-min, 18rem)), 1fr));
  gap: var(--space-3);
}

.term-tile {
  position: relative;
  display: grid;
  min-height: 11rem;
  overflow: hidden;
  align-items: end;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--theme-accent);
  color: var(--color-on-primary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  transition:
    transform    var(--dur-base) var(--ease-expo-out),
    box-shadow   var(--dur-base) var(--ease-expo-out);
}

.term-tile:hover {
  transform: none;
  box-shadow: var(--theme-shadow);
}

.term-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-expo-out);
}

.term-tile:hover img {
  transform: scale(1.06);
}

/* Richer directional gradient for depth */
.term-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.24) 55%,
    transparent 100%
  );
}

.term-tile span {
  position: relative;
  z-index: 1;
}


/* ── Site Footer ──────────────────────────────────────────── */

.site-footer {
  padding-top: var(--space-10);
  padding-bottom: var(--space-8);
  background: var(--theme-subtle);
}

.site-footer__inner {
  display: grid;
  gap: var(--space-8);
}

.site-footer__brand {
  max-width: 22rem;
}

.site-footer__name {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.2;
}

.site-footer__name a {
  color: var(--theme-text);
  text-decoration: none;
}

.site-footer__name a:hover {
  color: var(--theme-accent);
}

.site-footer__tagline {
  margin: 0;
  color: var(--theme-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.site-footer__columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6) var(--space-5);
}

.site-footer__column {
  min-width: 0;
}

.site-footer__heading {
  margin: 0 0 var(--space-3);
  color: var(--theme-text);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-footer__links,
.site-footer__legal-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__links a,
.site-footer__legal-list a {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  color: var(--theme-muted);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.4;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-expo-out);
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible,
.site-footer__legal-list a:hover,
.site-footer__legal-list a:focus-visible,
.site-footer a.is-current {
  color: var(--theme-text);
  text-decoration: none;
  outline: none;
}

.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--theme-border);
}

.site-footer__legal-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1rem;
}

.site-footer__copyright {
  margin: 0;
  color: var(--theme-muted);
  font-size: var(--text-xs);
}

/* Legacy flat footer list (child themes) */
.site-footer__nav .site-navigation__list {
  flex-wrap: wrap;
}


/* ── Scroll Reveal (JS-enhanced) ──────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity   var(--dur-reveal) var(--ease-expo-out),
    transform var(--dur-reveal) var(--ease-expo-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Cascade stagger for grids */
.pin-grid .pin-card:nth-child(2),
.term-grid .term-tile:nth-child(2) { transition-delay:  70ms; }

.pin-grid .pin-card:nth-child(3),
.term-grid .term-tile:nth-child(3) { transition-delay: 140ms; }

.pin-grid .pin-card:nth-child(4),
.term-grid .term-tile:nth-child(4) { transition-delay: 210ms; }

.pin-grid .pin-card:nth-child(5)   { transition-delay: 280ms; }
.pin-grid .pin-card:nth-child(6)   { transition-delay: 350ms; }
.pin-grid .pin-card:nth-child(n+7) { transition-delay: 420ms; }


/* ── Accessibility ────────────────────────────────────────── */

/* Skip link — visually hidden until focused; keyboard-first UX */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 9999;
  padding: var(--space-2) var(--space-5);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--theme-accent);
  color: var(--color-on-primary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--dur-fast) var(--ease-expo-out);
}

.skip-link:focus {
  top: 0;
}

/* Keyboard focus ring — themed, consistent across all interactive elements */
:focus-visible {
  outline: 2.5px solid var(--theme-accent);
  outline-offset: 3px;
}

/* Remove default browser ring when focus-visible is supported */
:focus:not(:focus-visible) {
  outline: none;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}


/* ── Header menu button (inside utility cluster) ─────────── */

.site-header__menu-btn {
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  width: var(--header-control-height);
  height: var(--header-control-height);
  min-height: var(--header-control-height);
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-expo-out);
}

.site-header__menu-btn:hover,
.site-header__menu-btn:focus-visible {
  background: var(--theme-subtle);
  outline: none;
}

.site-header__menu-btn:focus-visible {
  outline: 2.5px solid var(--theme-text);
  outline-offset: 1px;
}

.nav-toggle__bar {
  display: block;
  width: 1rem;
  height: 1.5px;
  background: var(--theme-text);
  border-radius: var(--radius-pill);
  transition:
    transform var(--dur-base) var(--ease-expo-out),
    opacity var(--dur-base) var(--ease-expo-out);
}

.site-header__menu-btn[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}

.site-header__menu-btn[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.site-header__menu-btn[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

/* Honour prefers-reduced-motion globally */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ── Responsive: tablet ───────────────────────────────────── */

@media (max-width: 900px) {
  .site-footer__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-footer__inner {
    gap: var(--space-6);
  }

  .site-header__inner {
    grid-template-columns: auto 1fr auto;
    gap: var(--space-3);
  }

  .site-header__search {
    display: none;
  }

  .site-header__menu-btn {
    display: inline-flex;
  }

  /* Desktop nav hidden on mobile — shown inside the sheet */
  .site-navigation {
    display: none;
  }

  /* Nav sheet (fixed right drawer on mobile) */
  .site-header__nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 45;
    display: flex;
    flex-direction: column;
    width: min(88vw, 22rem);
    height: 100dvh;
    background: var(--theme-surface);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.1);
    translate: 100% 0;
    visibility: hidden;
    transition:
      translate    var(--dur-base) var(--ease-expo-out),
      visibility   0s var(--dur-base);
    pointer-events: none;
  }

  .site-header__nav.is-open {
    translate: 0 0;
    visibility: visible;
    pointer-events: auto;
    transition:
      translate  var(--dur-base) var(--ease-expo-out),
      visibility 0s;
  }

  .site-header__nav-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: calc(var(--space-4) + env(safe-area-inset-top, 0px)) var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Sheet header: "Menu" title + close button */
  .site-header__nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--theme-border);
    flex-shrink: 0;
  }

  /* Inside sheet: show nav */
  .site-header__nav .site-navigation {
    display: block;
  }

  .site-header__nav .site-navigation__list {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
  }

  /* Mega trigger fills row in mobile sheet */
  .site-header__nav .nav-mega-wrap {
    width: 100%;
  }

  .site-header__nav .nav-mega__trigger {
    width: 100%;
    justify-content: space-between;
    min-height: 2.75rem;
    font-size: var(--text-base);
  }

  .dropdown--lang.dropdown--header .dropdown__icon-chevron {
    display: none;
  }

  .dropdown--lang.dropdown--header .dropdown__trigger {
    min-height: var(--header-control-height);
    height: var(--header-control-height);
    padding-inline: var(--space-2);
  }

  .dropdown--lang.dropdown--header .dropdown__menu,
  .dropdown--account .dropdown__menu {
    right: 0;
    left: auto;
  }
}

@media (max-width: 744px) {
  .site-header__inner {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand utilities"
      "search search";
  }

  .site-header__start {
    grid-area: brand;
  }

  .site-header__end {
    grid-area: utilities;
  }

  .site-header__search {
    display: flex;
    grid-area: search;
    justify-content: stretch;
  }

  .site-header__search-pill {
    width: 100%;
    max-width: none;
    min-height: 3.25rem;
    justify-content: flex-start;
  }
}


/* ── Responsive: mobile ───────────────────────────────────── */

@media (max-width: 560px) {
  .site-footer__columns {
    grid-template-columns: 1fr;
  }

  .home-hero {
    min-height: 28rem;
    padding: var(--space-5);
    border-radius: var(--radius-md);
  }

  .home-hero--compact {
    min-height: 16rem;
  }

  .section-heading {
    grid-template-columns: 1fr;
  }
}


/* ── Reading Progress Bar ─────────────────────────────────── */

.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 3px;
  pointer-events: none;
}

.reading-progress__fill {
  height: 100%;
  background: var(--theme-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 80ms linear;
  will-change: transform;
}


/* ── Post Layout (article + sticky TOC sidebar) ───────────── */

.post-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
  padding-block: var(--space-8) var(--space-12);
  max-width: var(--theme-site-width);
  margin-inline: auto;
}

@media (min-width: 68.75em) {
  .post-layout--has-toc {
    grid-template-columns: minmax(0, 1fr) 14.5rem;
    gap: 0 var(--space-10);
  }

  .post-layout--has-toc .post-layout__content {
    grid-column: 1;
    width: 100%;
  }

  .post-layout--has-toc .post-layout__sidebar {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: calc(5rem + var(--space-6));
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
  }
}


/* ── Entry header enhancements ────────────────────────────── */

.entry-cats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.entry-cats__link {
  color: var(--theme-accent);
  border-color: var(--theme-accent);
  text-decoration: none;
  transition:
    background  var(--dur-fast) var(--ease-expo-out),
    color       var(--dur-fast) var(--ease-expo-out);
}

.entry-cats__link:hover,
.entry-cats__link:focus {
  background: var(--theme-accent);
  color: var(--color-on-primary);
  text-decoration: none;
}

.entry-byline {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.entry-byline__avatar img {
  border-radius: var(--radius-pill);
}

.entry-byline__text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  color: var(--theme-muted);
  font-size: var(--text-sm);
}

.entry-byline__author {
  font-weight: 500;
  color: var(--theme-text);
}

.entry-byline__sep {
  color: var(--theme-border-strong);
}


/* ── Entry media ──────────────────────────────────────────── */

.entry-media {
  margin-block: var(--space-6);
}

.entry-media img {
  width: 100%;
  border-radius: var(--radius-md);
  object-fit: cover;
}


/* ── Entry content prose ──────────────────────────────────── */

.entry-content {
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--theme-body);
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
  color: var(--theme-text);
  scroll-margin-top: 5.5rem;
}

.entry-content h2 {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.entry-content h3 {
  font-size: var(--text-xl);
  font-weight: 600;
}

.entry-content h4 {
  font-size: var(--text-lg);
  font-weight: 600;
}

.entry-content p {
  margin-block: var(--space-5);
}

.entry-content ul,
.entry-content ol {
  margin-block: var(--space-5);
  padding-left: var(--space-6);
}

.entry-content li {
  margin-bottom: var(--space-2);
  line-height: 1.7;
}

.entry-content li::marker {
  color: var(--theme-muted);
}

.entry-content a:not(.button):not(.btn):not(.wp-block-button__link) {
  color: var(--theme-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.entry-content a:not(.button):not(.btn):not(.wp-block-button__link):hover {
  color: var(--theme-accent-strong);
  text-decoration-thickness: 2px;
}

.entry-content blockquote:not(.pull-quote) {
  margin-inline: 0;
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--theme-border-strong);
  color: var(--theme-muted);
  font-style: italic;
}

.entry-content code {
  padding: 0.15em 0.4em;
  border-radius: 4px;
  background: var(--theme-subtle);
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.875em;
  color: var(--theme-text);
}

.entry-content pre {
  overflow-x: auto;
  margin-block: var(--space-6);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--theme-text);
  color: var(--color-canvas);
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: var(--text-sm);
  line-height: 1.6;
}

.entry-content pre code {
  padding: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
}

.entry-content hr {
  margin-block: var(--space-10);
  border: none;
  border-top: 1px solid var(--theme-border);
}

.entry-content strong { font-weight: 600; }
.entry-content em     { font-style: italic; }

.entry-content img {
  max-width: 100%;
  border-radius: var(--radius-md);
  margin-block: var(--space-4);
}

.entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--space-6);
  font-size: var(--text-sm);
}

.entry-content th,
.entry-content td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--theme-border);
  text-align: left;
}

.entry-content th {
  font-weight: 600;
  color: var(--theme-text);
  border-bottom-color: var(--theme-border-strong);
}


/* ── Table of Contents ────────────────────────────────────── */

.post-toc__details {
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.post-toc__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  list-style: none;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--theme-text);
  background: var(--theme-subtle);
  user-select: none;
  transition: background var(--dur-fast) var(--ease-expo-out);
}

.post-toc__toggle::-webkit-details-marker { display: none; }
.post-toc__toggle::marker              { display: none; }

.post-toc__toggle:hover {
  background: var(--theme-surface-strong);
}

.post-toc__chevron {
  flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease-expo-out);
}

.post-toc__details[open] .post-toc__chevron {
  transform: rotate(180deg);
}

.post-toc__list {
  margin: 0;
  padding: var(--space-3) 0;
  list-style: none;
}

.post-toc__item {
  margin: 0;
}

.post-toc__item--h3 .post-toc__link {
  padding-left: var(--space-8);
  font-size: var(--text-sm);
}

.post-toc__link {
  display: block;
  padding: var(--space-2) var(--space-5);
  color: var(--theme-muted);
  font-size: var(--text-sm);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition:
    color        var(--dur-fast) var(--ease-expo-out),
    border-color var(--dur-fast) var(--ease-expo-out),
    background   var(--dur-fast) var(--ease-expo-out);
}

.post-toc__link:hover,
.post-toc__link:focus {
  color: var(--theme-text);
  background: var(--theme-subtle);
  text-decoration: none;
}

.post-toc__link.is-active {
  color: var(--theme-accent);
  border-left-color: var(--theme-accent);
  font-weight: 500;
}

@media (min-width: 68.75em) {
  .post-toc__toggle {
    pointer-events: none;
    background: transparent;
    padding-inline: var(--space-4);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--theme-muted);
  }

  .post-toc__chevron {
    display: none;
  }

  .post-toc__details {
    border: none;
    border-radius: 0;
    overflow: visible;
  }

  .post-toc__link {
    padding-inline: var(--space-4);
    font-size: var(--text-xs);
  }

  .post-toc__item--h3 .post-toc__link {
    padding-left: var(--space-7);
  }

  .post-toc__list {
    padding-block: var(--space-2);
  }
}


/* ── Callout boxes ────────────────────────────────────────── */

.callout {
  display: flex;
  gap: var(--space-4);
  margin-block: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--callout-hue, var(--theme-accent));
  background: color-mix(in srgb, var(--callout-hue, var(--theme-accent)) 6%, var(--theme-surface));
}

.callout--info    { --callout-hue: var(--color-legal-link); }
.callout--tip     { --callout-hue: var(--color-success); }
.callout--warning { --callout-hue: var(--color-warning); }
.callout--danger  { --callout-hue: var(--color-error); }

.callout__icon {
  flex-shrink: 0;
  margin-top: 0.1em;
  color: var(--callout-hue, var(--theme-accent));
}

.callout__body {
  min-width: 0;
}

.callout__title {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--callout-hue, var(--theme-accent));
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.callout__text {
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--theme-body);
}

.callout__text p:first-child { margin-top: 0; }
.callout__text p:last-child  { margin-bottom: 0; }


/* ── FAQ Accordion ────────────────────────────────────────── */

.faq-block {
  margin-block: var(--space-8);
}

.faq-block__heading {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
}

.faq-block__list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--theme-border);
}

.faq-item {
  border-bottom: 1px solid var(--theme-border);
}

.faq-item details {
  display: block;
}

.faq-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-5);
  cursor: pointer;
  list-style: none;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--theme-text);
  transition: color var(--dur-fast) var(--ease-expo-out);
}

.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::marker                 { display: none; }

.faq-item__q:hover { color: var(--theme-accent); }

.faq-item__chevron {
  flex-shrink: 0;
  color: var(--theme-muted);
  transition: transform var(--dur-base) var(--ease-expo-out), color var(--dur-fast) var(--ease-expo-out);
}

.faq-item details[open] .faq-item__chevron {
  transform: rotate(180deg);
  color: var(--theme-accent);
}

.faq-item__a {
  overflow: hidden;
  padding-bottom: var(--space-5);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--theme-body);
  transition: max-height var(--dur-base) var(--ease-expo-out);
}

.faq-item__a p:first-child { margin-top: 0; }
.faq-item__a p:last-child  { margin-bottom: 0; }


/* ── Pull Quote ───────────────────────────────────────────── */

.pull-quote {
  position: relative;
  margin-block: var(--space-10);
  margin-inline: 0;
  padding: var(--space-6) var(--space-6) var(--space-6) var(--space-8);
  border-left: none;
  font-style: normal;
}

.pull-quote::before {
  content: '\201C';
  position: absolute;
  top: -0.1em;
  left: -0.05em;
  font-family: var(--font-display);
  font-size: 5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--theme-accent);
  opacity: 0.3;
  pointer-events: none;
}

.pull-quote__text {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(var(--text-lg), 2.5vw, var(--text-2xl));
  font-weight: 500;
  line-height: 1.4;
  color: var(--theme-text);
  font-style: italic;
}

.pull-quote__cite {
  display: block;
  font-size: var(--text-sm);
  font-style: normal;
  font-weight: 500;
  color: var(--theme-muted);
  letter-spacing: 0.02em;
}


/* ── Key Takeaways ────────────────────────────────────────── */

.key-takeaways {
  margin-block: var(--space-8);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-md);
  border: 1px solid var(--theme-border);
  background: var(--theme-subtle);
}

.key-takeaways__title {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--theme-muted);
}

.key-takeaways__body {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--theme-body);
}

.key-takeaways__body p:first-child { margin-top: 0; }
.key-takeaways__body p:last-child  { margin-bottom: 0; }

.key-takeaways__body ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
}

.key-takeaways__body li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin: 0;
}

.key-takeaways__body li::before {
  content: '✓';
  flex-shrink: 0;
  margin-top: 0.1em;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-success);
}


/* ── Entry footer: share bar + author ─────────────────────── */

.entry-footer {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--theme-border);
}

.post-share {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.post-share__label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--theme-muted);
}

.post-share__actions {
  display: flex;
  gap: var(--space-2);
}

.post-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-pill);
  background: var(--theme-surface);
  color: var(--theme-muted);
  cursor: pointer;
  text-decoration: none;
  transition:
    border-color var(--dur-fast) var(--ease-expo-out),
    background   var(--dur-fast) var(--ease-expo-out),
    color        var(--dur-fast) var(--ease-expo-out),
    transform    var(--dur-fast) var(--ease-expo-out);
}

.post-share__btn:hover,
.post-share__btn:focus {
  border-color: var(--theme-border-strong);
  background: var(--theme-subtle);
  color: var(--theme-text);
  text-decoration: none;
  transform: scale(1.07);
}

.post-share__btn--wa:hover,
.post-share__btn--wa:focus {
  border-color: var(--color-whatsapp);
  color: var(--color-whatsapp);
  background: color-mix(in srgb, var(--color-whatsapp) 8%, var(--theme-surface));
}

.post-share__btn--copy.is-copied {
  border-color: var(--color-success);
  color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 8%, var(--theme-surface));
}

.author-box {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--theme-border);
  background: var(--theme-subtle);
}

.author-box .avatar img,
.author-box .avatar {
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

.author-box__body {
  min-width: 0;
}

.author-box__name {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--theme-text);
}

.author-box__bio {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--theme-muted);
}


/* ── Related Posts ────────────────────────────────────────── */

.related-posts {
  padding-block: var(--space-10) var(--space-12);
  border-top: 1px solid var(--theme-border);
}

.related-posts__inner {
  width: min(100%, var(--theme-site-width));
  margin-inline: auto;
}

.related-posts__heading {
  margin: 0 0 var(--space-6);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
}

.related-posts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-5);
}

.related-card {
  display: grid;
  border: 0;
  border-radius: 0;
  overflow: visible;
  text-decoration: none;
  color: inherit;
  background: transparent;
}

.related-card:hover,
.related-card:focus-visible {
  text-decoration: none;
  color: inherit;
}

.related-card__img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--theme-radius);
  background: var(--theme-subtle);
}

.related-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-expo-out);
  border-radius: 0;
  margin: 0;
}

.related-card:hover .related-card__img img {
  transform: scale(1.04);
}

.related-card__img--placeholder {
  background: linear-gradient(
    135deg,
    var(--theme-surface-strong) 0%,
    var(--theme-subtle) 100%
  );
}

/* ── Shared media frame (cards, heroes, fallbacks) ─────────── */

.hub-media-frame {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--theme-subtle);
}

.hub-media-frame img,
.hub360-img--fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hub-media-frame:empty::before,
.hub-media-frame:not(:has(img))::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    var(--theme-surface-strong) 0%,
    var(--theme-subtle) 55%,
    var(--theme-surface-strong) 100%
  );
}

.hub360-img--fallback {
  filter: saturate(0.92);
}

.post-list__media.hub-media-frame {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
}

.hub360-thing-card__media.hub-media-frame {
  margin-bottom: var(--space-3);
  border-radius: var(--radius-md);
}

.thing-hero__media,
.internal-hero__media,
.pin-card__photo {
  background: var(--theme-subtle);
}

.thing-hero__media img,
.internal-hero__image,
.pin-card__media img {
  object-fit: cover;
}

.related-card__cat {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 2;
  display: inline-block;
  padding: 0.35rem var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--theme-surface);
  color: var(--theme-text);
  box-shadow: var(--theme-shadow);
  font-size: var(--text-badge, 0.6875rem);
  font-weight: 600;
  text-decoration: none;
}

.related-card__body {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) 0 0;
}

.related-card__title {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.25;
  color: var(--theme-text);
}

.related-card:hover .related-card__title {
  color: var(--theme-accent);
}

.related-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3em 0.5em;
  margin: 0;
  font-size: var(--text-xs);
  color: var(--theme-muted);
}


/* ── Toast notification ───────────────────────────────────── */

.toast-region {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  pointer-events: none;
}

.toast {
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--theme-text);
  color: var(--theme-surface);
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  animation: toast-in var(--dur-base) var(--ease-expo-out) both,
             toast-out var(--dur-base) var(--ease-expo-out) 2.6s both;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-4px) scale(0.97); }
}


/* ── Primary Nav — desktop layout ────────────────────────── */

/* Harpia-style: logo | centered nav band (flex:1) | utilities */
@media (min-width: 901px) {
  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(var(--space-4), 2.5vw, var(--space-10));
  }

  .site-header__start {
    flex: 0 0 auto;
  }

  .site-header__nav {
    position: static;
    flex: 1 1 auto;
    justify-content: center;
    width: auto;
    height: auto;
    translate: none;
    visibility: visible;
    pointer-events: auto;
    background: transparent;
    box-shadow: none;
  }

  .site-header__end {
    flex: 0 0 auto;
  }

  .site-header__nav-inner {
    justify-content: center;
  }

  .site-navigation {
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
    width: auto;
  }

  /* Harpia: cluster triggers in the true center — not stretched across the band */
  .site-navigation__list--mega {
    justify-content: center;
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
    flex-shrink: 0;
  }

  .site-header__menu-btn {
    display: none;
  }
}

.site-header__nav-inner {
  display: flex;
  align-items: center;
  width: 100%;
}

/* Hide sheet chrome on desktop */
.site-header__nav-bar,
.nav-cta,
.nav-sheet__lang {
  display: none;
}

/* Desktop nav: compact inline row */
.site-header__nav .site-navigation__list {
  flex-wrap: nowrap;
  overflow: visible;
}

.site-header__nav .site-navigation {
  overflow: visible;
}


/* ── Mega menu (harpia-web + marketplace polish) ──────────── */

.nav-mega-wrap {
  position: relative;
}

.nav-mega__trigger,
.nav-mega__direct {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 2.25rem;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--theme-body);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.nav-mega__trigger:hover,
.nav-mega__trigger:focus-visible,
.nav-mega-wrap.is-open > .nav-mega__trigger,
.nav-mega__direct:hover,
.nav-mega__direct:focus-visible {
  background: color-mix(in srgb, var(--theme-text) 4%, transparent);
  color: var(--theme-text);
  outline: none;
}

.nav-mega__trigger:focus-visible {
  outline: 2px solid var(--theme-accent);
  outline-offset: 2px;
}

.nav-mega__chevron {
  opacity: 0.5;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}

.nav-mega-wrap.is-open > .nav-mega__trigger .nav-mega__chevron {
  transform: rotate(180deg);
  opacity: 0.75;
}

/* Panel shell — gap bridge for hover */
.nav-mega-panel-pos {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 80;
  padding-top: 0.5rem;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.15s ease,
    translate 0.15s ease;
  translate: 0 -0.25rem;
}

.nav-mega-wrap.is-open > .nav-mega-panel-pos {
  opacity: 1;
  pointer-events: auto;
  translate: 0 0;
}

.nav-mega-panel {
  display: grid;
  grid-template-columns: 15.75rem 1fr;
  gap: 0.625rem;
  width: 45rem;
  max-width: calc(100vw - 2.5rem);
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--theme-text) 8%, transparent);
  border-radius: 1.25rem;
  background: color-mix(in srgb, var(--theme-surface) 98%, transparent);
  backdrop-filter: saturate(120%) blur(12px);
  -webkit-backdrop-filter: saturate(120%) blur(12px);
  box-shadow:
    0 24px 80px color-mix(in srgb, var(--color-scrim) 16%, transparent),
    0 4px 20px color-mix(in srgb, var(--color-scrim) 6%, transparent);
  text-align: left;
}

.nav-mega-panel--wide {
  width: 53.75rem;
}

.nav-mega-featured {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.125rem;
  border: 1px solid var(--theme-border-soft);
  border-radius: 0.875rem;
  background: var(--theme-subtle);
  text-align: left;
}

.nav-mega-featured__glyph {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-block: 0.125rem 0;
  color: var(--theme-accent);
  opacity: 0.82;
}

.nav-mega-featured__glyph svg {
  display: block;
}

.nav-mega-featured__body {
  flex: 1;
}

.nav-mega-featured__title {
  margin: 0 0 0.4375rem;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -0.0125em;
  color: var(--theme-text);
}

.nav-mega-featured__desc {
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--theme-body);
}

.nav-mega-featured__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
  font-size: var(--text-badge);
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--theme-accent);
}

.nav-mega-featured__cta:hover,
.nav-mega-featured__cta:focus-visible {
  text-decoration: underline;
  outline: none;
}

.nav-mega-featured__arrow {
  transition: transform 0.2s ease;
}

.nav-mega-featured__cta:hover .nav-mega-featured__arrow {
  transform: translateX(4px);
}

.nav-mega-links {
  display: flex;
  flex-direction: column;
  gap: 1px;
  align-items: stretch;
  align-content: start;
}

.nav-mega-links--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  align-items: stretch;
  align-content: start;
  justify-items: stretch;
}

.site-navigation a.nav-mega-link,
.nav-mega-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  width: 100%;
  gap: 2px;
  min-height: 0;
  padding: 0.5625rem 0.6875rem;
  border-radius: 0.5625rem;
  font-weight: 400;
  text-align: left;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
}

.nav-mega-link:hover,
.nav-mega-link:focus-visible {
  background: var(--theme-subtle);
  outline: none;
}

.nav-mega-link__title {
  display: block;
  align-self: stretch;
  width: 100%;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-align: left;
  color: var(--theme-text);
}

.nav-mega-link__desc {
  display: block;
  align-self: stretch;
  width: 100%;
  font-size: var(--text-micro);
  line-height: 1.4;
  text-align: left;
  color: var(--theme-body);
}

/* Reset header pill chrome inside mega panels (harpia card pattern) */
.site-header__nav .nav-mega-panel .nav-mega-link,
.site-header__nav .nav-mega-panel .nav-mega-featured__cta {
  justify-content: flex-start;
}

.site-header__nav .nav-mega-panel a.nav-mega-link,
.site-header__nav .nav-mega-panel a.nav-mega-featured__cta {
  min-height: 0;
  border-radius: inherit;
  font-weight: inherit;
}

.site-header__nav .nav-mega-panel a.nav-mega-featured__cta {
  border-radius: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
  font-weight: 700;
}

.site-header__nav .nav-mega-panel a.nav-mega-link:hover,
.site-header__nav .nav-mega-panel a.nav-mega-link:focus-visible,
.site-header__nav .nav-mega-panel a.nav-mega-featured__cta:hover,
.site-header__nav .nav-mega-panel a.nav-mega-featured__cta:focus-visible {
  background: var(--theme-subtle);
  color: inherit;
}

.site-header__nav .nav-mega-panel a.nav-mega-featured__cta:hover,
.site-header__nav .nav-mega-panel a.nav-mega-featured__cta:focus-visible {
  background: transparent;
  color: var(--theme-accent);
  text-decoration: underline;
}


/* ── Mobile sheet mega accordion ─────────────────────────── */

@media (max-width: 900px) {
  .site-header__nav-bar {
    display: flex;
  }

  .nav-cta,
  .nav-sheet__lang {
    display: flex;
  }

  .nav-mega-panel-pos {
    position: static;
    left: auto;
    padding-top: 0;
    transform: none;
    translate: none;
    opacity: 1;
    pointer-events: auto;
    display: none;
  }

  .nav-mega-wrap.is-open > .nav-mega-panel-pos {
    display: block;
  }

  .nav-mega-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: var(--space-2) 0 var(--space-3);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .nav-mega-featured {
    margin-bottom: var(--space-2);
    padding: var(--space-3);
  }

  .nav-mega-featured__glyph {
    display: none;
  }

  .nav-mega-links,
  .nav-mega-links--2col {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .nav-mega-link {
    min-height: 2.5rem;
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
  }

  .nav-mega-link__desc {
    display: none;
  }
}


/* ── Sheet header: title + close button ──────────────────── */

.site-header__nav-label {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--theme-text);
}

.site-header__nav-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--theme-subtle);
  color: var(--theme-text);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-expo-out);
}

.site-header__nav-close:hover,
.site-header__nav-close:focus-visible {
  background: var(--theme-surface-strong);
  outline: none;
}

/* ── Mobile CTA block ────────────────────────────────────── */

.nav-cta {
  margin-top: auto;
  padding-top: var(--space-5);
  border-top: 1px solid var(--theme-border);
  flex-direction: column;
  gap: var(--space-2);
}

.nav-cta__title {
  margin: 0 0 var(--space-1);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--theme-muted);
}

.nav-cta__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--theme-subtle);
  color: var(--theme-text);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition:
    background var(--dur-fast) var(--ease-expo-out),
    color      var(--dur-fast) var(--ease-expo-out);
}

.nav-cta__link:hover,
.nav-cta__link:focus-visible {
  background: var(--theme-surface-strong);
  color: var(--theme-text);
  text-decoration: none;
  outline: none;
}

.nav-cta__link--whatsapp {
  background: color-mix(in srgb, var(--color-whatsapp) 10%, transparent);
  color: color-mix(in srgb, var(--color-whatsapp) 80%, var(--theme-text));
}

.nav-cta__link--whatsapp:hover,
.nav-cta__link--whatsapp:focus-visible {
  background: color-mix(in srgb, var(--color-whatsapp) 18%, transparent);
  color: color-mix(in srgb, var(--color-whatsapp) 90%, var(--theme-text));
}


/* ── Mobile sheet: language switcher ─────────────────────── */

.nav-sheet__lang {
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--theme-border);
  margin-top: var(--space-3);
}

.nav-sheet__lang .dropdown--lang {
  width: 100%;
}

.nav-sheet__lang .dropdown--lang .dropdown__trigger {
  width: 100%;
  justify-content: flex-start;
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-sm);
  padding-inline: var(--space-4);
}

.nav-sheet__lang .dropdown--lang .dropdown__menu {
  left: 0;
  right: 0;
  width: 100%;
  min-width: 0;
}

/* Hide the sheet lang switcher on desktop (cluster one used instead) */
@media (min-width: 901px) {
  .nav-sheet__lang {
    display: none;
  }
}


/* ── prefers-reduced-motion: nav ─────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .site-header__nav,
  .nav-mega-panel-pos {
    transition: none;
  }
}