:root {
  --ivpu-green: #E99531;
  --ivpu-green-light: #F0A548;
  --ivpu-orange: #E99531;
  --ivpu-orange-light: #F0A548;
}

/* IVPU orange brand system, sampled from the current merch print. */
.hero::before {
  background: linear-gradient(90deg, rgba(233,149,49,.08) 1px, transparent 1px) 0 0/96px 100%;
}

.camo-band {
  background: linear-gradient(90deg, rgba(233,149,49,.18), rgba(233,149,49,.02)), url("../images/camo.webp") center 45%/cover no-repeat;
}

.section-heading .eyebrow,
.shop-intro .eyebrow,
.product-cta,
.ivpu-entry a,
.entry-content a,
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce-message::before,
.woocommerce-info::before {
  color: #A95C09;
}

.sponsor-disclosure {
  border-left-color: #E99531;
  background: #FFF1DF;
}

.hero-actions .button,
.hero-actions .button.button-secondary,
.hero-actions .listen-choice > summary,
.hero-actions .is-planned {
  background: #E99531;
  color: var(--ivpu-ink);
  border-color: #E99531;
}

.hero-actions .button:hover,
.hero-actions .button.button-secondary:hover,
.hero-actions .listen-choice > summary:hover,
.hero-actions .button:focus-visible,
.hero-actions .button.button-secondary:focus-visible,
.hero-actions .listen-choice > summary:focus-visible {
  background: #F0A548;
  color: var(--ivpu-ink);
  border-color: #F0A548;
}

.listen-choice-menu a:hover,
.listen-choice-menu a:focus-visible {
  border-color: #E99531;
  background: rgba(233,149,49,.14);
}

.has-orange-color { color: #E99531 !important; }
.has-orange-background-color { background-color: #E99531 !important; }

/* Desktop: mer kompakt skala och bättre överblick. Mobilen lämnas orörd. */
@media (min-width: 821px) {
  :root { --ivpu-shell: min(1120px, calc(100% - 56px)); }

  .site-header { min-height: 68px; padding-block: 6px; }
  .brand .ivpu-brand-image { width: 48px; height: 48px; flex-basis: 48px; }

  .hero { min-height: 620px; max-height: 760px; }
  .hero-copy { padding: 64px clamp(30px, 5vw, 80px); }
  .hero h1 { font-size: clamp(52px, 6vw, 88px); }
  .lead { max-width: 600px; margin-top: 24px; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.55; }
  .hero-actions { margin-top: 24px; }
  .hero-signals { margin-top: 32px; }
  .hero-portrait { min-height: 620px; padding: 22px; }
  .hero-portrait > img { width: min(100%, 590px); max-height: 680px; }

  .episode-section { padding: 58px clamp(28px, 5vw, 76px); }
  .section-heading h2 { font-size: clamp(38px, 4.7vw, 68px); }
  .episode-number { font-size: clamp(78px, 10vw, 140px); }

  .manifesto { padding: 64px clamp(28px, 5vw, 76px); }
  .manifesto h2 { font-size: clamp(44px, 5.4vw, 76px); }
  .manifesto-grid { gap: clamp(36px, 6vw, 90px); }
  .topic-grid { margin-top: 54px; }
  .topic-grid article { min-height: 190px; padding: 26px; }
  .topic-grid h3 { margin-top: 42px; font-size: 24px; }

  .shop-section { padding: 64px clamp(28px, 5vw, 76px); }
  .shop-intro { margin-bottom: 38px; gap: 44px; }
  .shop-intro h2 { font-size: clamp(44px, 5.4vw, 76px); }
  .product-image { aspect-ratio: 1 / .9; }

  .host-section { min-height: 580px; }
  .host-image { min-height: 580px; max-height: 680px; }
  .host-copy { padding: 58px clamp(30px, 5vw, 76px); }
  .host-copy h2 { font-size: clamp(44px, 5vw, 72px); }
  .host-copy > p { margin: 24px 0; font-size: 17px; }

  .advertise-section { padding: 64px clamp(28px, 5vw, 76px); gap: clamp(48px, 7vw, 110px); }
  .advertise-copy h2 { font-size: clamp(46px, 5vw, 72px); }

  .ivpu-content-section { padding: 58px 0; }
  .ivpu-content-header h1,
  .archive-header h1,
  .entry-header h1,
  .error-page h1 { font-size: clamp(42px, 5vw, 70px); }
  .entry-hero img { max-height: 560px; }

  .site-footer { padding-block: 36px; }
}

/* Mobilhuvud: håll logotypen tydligt separerad från hero-bilden. */
@media (max-width: 820px) {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: 76px;
    padding: 10px 16px;
    align-items: center;
    background: #0d120d;
    backdrop-filter: none;
  }

  .brand {
    position: relative;
    z-index: 2;
    align-self: center;
    margin: 0;
  }

  .brand .ivpu-brand-image {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    margin: 0;
    object-fit: cover;
  }

  .hero {
    position: relative;
    z-index: 1;
    margin-top: 0;
  }

  .hero-portrait {
    margin-top: 0;
  }

  .desktop-nav {
    inset-block-start: 76px;
  }
}

@media (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
  .admin-bar .desktop-nav { top: 122px; }
}