/* ============================================================
   VOOM Design System · Public CSS
   Magazine editorial · Refined direction · RTL Hebrew
   ============================================================ */

/* ===== Tokens ===== */
:root {
  --voom-red: #C91D36;
  --voom-red-deep: #9E0F26;
  --voom-red-soft: #E64158;
  --voom-red-wash: #FBEEF0;

  --ink: #1A1410;
  --ink-2: #3D3530;
  --ink-3: #5A4F47;
  --ink-4: #6E635C;
  --mute: #9A8F86;
  --hair: #D6CEC2;
  --hair-soft: #E5DDD0;

  --paper: #FAF8F4;
  --paper-soft: #FCFBF7;
  --cream: #F2ECE0;
  --cream-2: #E8DFCE;

  --display: 'Heebo', 'Assistant', system-ui, sans-serif;
  --sans: 'Heebo', 'Assistant', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap: 1280px;
  --wrap-narrow: 960px;
  --wrap-wide: 1400px;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 64px;
  --s-11: 80px;
  --s-12: 120px;
}

/* ===== Reset / base ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  width: 100%;
}
body {
  font-family: var(--sans);
  font-size: 20px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
  max-width: 100vw;
  overflow-x: clip;
}
 h6{
  font-family: var(--display);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  color: var(--mute);  
}
@supports not (overflow-x: clip) {
  body { overflow-x: hidden; }
}

img, svg, video { display: block; max-width: 100%; height: auto; }
img, video, iframe, table, pre { max-width: 100%; }
/* Imported media keeps its own proportions: height:100% + min-width:100% used to
   squash every image to the column box and collapse iframes that carry no
   height attribute of their own. */
.article-content img, .article-content video { width: 100%; max-width: 100%; height: auto; margin: 15px 0; }
.article-content iframe { width: 100%; max-width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; margin: 15px 0; }
@media (max-width: 768px) { .article-content img[style*="--h-m"] { height: var(--h-m) !important; } }
.article-content table { display: block; overflow-x: auto; }
.article-content pre { overflow-x: auto; white-space: pre-wrap; word-wrap: break-word; }
.article-content { word-wrap: break-word; overflow-wrap: break-word; }
.wrap, .wrap-narrow, .wrap-wide, main, section, .home-page, article { max-width: 100%; }
a { color: inherit; text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--voom-red); }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
hr { border: 0; border-top: 1px solid var(--hair); margin: var(--s-9) 0; }

/* zoom hacks removed */

/* ===== Layout ===== */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s-7); }
.wrap-narrow { max-width: var(--wrap-narrow); margin: 0 auto; padding: 0 var(--s-7); }
.wrap-wide { max-width: var(--wrap-wide); margin: 0 auto; padding: 0 var(--s-7); }

.row { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: var(--s-4); }

/* ===== Typography ===== */
.display-1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(48px, 8vw, 96px);
  line-height: .92;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0;
}
.display-2 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0;
}
.h1-serif {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(32px, 4.2vw, 48px);
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
}
.h2-serif {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.12;
  letter-spacing: -.005em;
  color: var(--ink);
  margin: 0;
}
.h3-serif {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}
.deck-italic, .deck {
  font-family: var(--display);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(20px, 1.6vw, 22px);
  line-height: 1.45;
  color: var(--ink-2);
  margin: 0;
}
.body-lg {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.7;
  color: var(--ink-2);
}
.body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.65;
  color: var(--ink-2);
}
.small {
  font-family: var(--sans);
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink-3);
}
.eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--voom-red);
  margin: 0;
}
.meta-cap {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}
em { font-style: normal; }
strong, b { font-weight: 700; color: var(--ink); }
/* Imported copy sets its colour on the heading or paragraph and leaves the bold
   inside it uncoloured, so the ink above turned white-on-blue headings black.
   In an article body, bold weight is the only thing bold changes. */
.article-content :is(strong, b) { color: inherit; }

/* ===== Masthead / Header ===== */
.mast {
  background: #fff;
  border-bottom: 1px solid var(--hair);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100vw;
  z-index: 50;
  box-shadow: 0 1px 6px rgba(26, 20, 16, .06);
}
body { padding-top: 56px; }
@media (min-width: 761px) { body { padding-top: 56px; } }
.mast-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-6);
  min-height: 56px;
  max-width: var(--wrap-wide);
  margin: 0 auto;
}
.mast-issue {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.mast-logo { display: flex; order:0;  
  @media(max-width: 600px){ order:1; } }
.mast-logo a { display: flex; align-items: center; }
.mast-logo.menu{ position:absolute; top: 20px; right: 10px;  }
.mast-logo svg { display: block; height: 22px; width: auto; }
.mast-logo img { display: block; height: 50px; width: auto; }
.mast-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  order:0;
}
.mast-actions .icon-btn {
  background: var(--voom-red);
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
}
.mast-actions .icon-btn:hover { background: var(--voom-red-deep); color: #fff; }
.mast-search-wrap { display: flex; align-items: center; gap:10px; order:2;}
.mast-search-btn { background: var(--voom-red); border: 0; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.mast-search-btn:hover { background: var(--voom-red-deep); }
.mast-search-form {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--hair-soft, #e5ddd0);
  border-radius: 999px;
  padding: 6px 14px;
  width: 500px;
  z-index: 10000;
  color: var(--ink-3);
  animation: searchExpand .18s ease;
}
@keyframes searchExpand {
  from { width: 0; opacity: 0; }
  to   { width: 300px; opacity: 1; }
}
.mast-search-form input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  outline: none;
  direction: rtl;
  text-align: right;
  min-width: 0;
}
.mast-search-form[hidden] { display: none; }
.mast-search-form input::placeholder { color: var(--mute); }
.mast-search-submit { background: var(--voom-red); border: none; border-radius: 50%; width: 28px; height: 28px; display: grid; place-items: center; color: #fff; flex-shrink: 0; cursor: pointer; padding: 0; }
.mast-search-submit:hover { background: var(--voom-red-deep); }
.mast-search-btn.active { background: var(--voom-red-deep); box-shadow: 0 0 0 3px rgba(201,29,54,.25); }
.mast-search-btn.active .icon-search { display: none; }
.mast-search-btn.active .icon-close  { display: block !important; }
@media (max-width: 760px) {
  .mast-search-form { width: 180px; padding: 5px 10px; }
  @keyframes searchExpand { from { width: 0; opacity: 0; } to { width: 180px; opacity: 1; } }
}
.mast-search-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  width: max(100%, min(480px, 90vw));
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
  z-index: 9999;
  overflow: hidden;
}
.mast-search-suggestions[hidden] { display: none; }

/* primary nav — now lives inside mast-row */
.mast-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: var(--s-6);
  flex: 1;
  padding: 0;
}
.mast-nav-inner a {
  position: relative;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 20px;
  color: var(--voom-red);
  padding: var(--s-2) 0;
  letter-spacing: .01em;
  white-space: nowrap;
}
.mast-nav-inner a::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background: var(--voom-red);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s ease;
}
.mast-nav-inner a:hover { color: var(--voom-red-deep); }
.mast-nav-inner a:hover::after,
.mast-nav-inner a.active::after { transform: scaleX(1); }
.mast-nav-inner a.active { color: var(--voom-red); font-weight: 600; }
.swiper{
  padding: var(--s-5) 5px !important;
}
/* mobile menu toggle */
.nav-toggle {
  display: none;
  background: var(--voom-red);
  border: 0;
  border-radius: 8px;
  width: 40px;
  height: 36px;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
  cursor: pointer;
  padding: 0;
}
.nav-toggle:hover { background: var(--voom-red-deep); }
.nav-toggle:hover span { background: #fff; }
.nav-toggle span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: #fff;
  transition: transform .3s, opacity .3s;
}
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* mobile slide-in panel */
.nav-panel {
  position: fixed;
  inset: 0;
  background: var(--paper);
  z-index: 60;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.6,.05,.3,1);
  display: flex;
  flex-direction: column;
  padding: var(--s-10) var(--s-7) var(--s-7);
  overflow-y: auto;
  visibility: hidden;
  pointer-events: none;
}
[dir="rtl"] .nav-panel { transform: translateX(100%); }
.nav-panel.active {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}
.nav-panel-close {
  position: absolute;
  top: var(--s-5);
  inset-inline-end: var(--s-5);
  width: 36px;
  height: 36px;
  background: transparent;
  border: 0;
  display: grid;
  place-items: center;
  color: var(--ink);
  font-size: 22px;
}
.nav-panel-list { display: flex; flex-direction: column; }
.nav-panel-list a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--hair);
  font-family: var(--display);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.2;
  color: var(--ink);
}
.nav-panel-list a:hover,
.nav-panel-list a.active { color: var(--voom-red); }
.nav-panel-list .n {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: .14em;
  color: var(--mute);
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  background: var(--voom-red);
  color: #fff;
  border: 0;
  padding: 14px 28px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
  text-decoration: none;
}
.btn:hover { background: var(--voom-red-deep); color: #fff; }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-text {
  background: transparent;
  color: var(--ink);
  padding: 10px 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
}
.btn-text:hover { background: transparent; color: var(--voom-red); border-bottom-color: var(--voom-red); }
.btn-sm { padding: 10px 18px; font-size: 20px; }
.btn-lg { padding: 18px 36px; font-size: 20px; }
.btn[disabled] { opacity: .4; cursor: not-allowed; }

/* ===== Badges / Tags ===== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--voom-red);
  color: #fff;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 5px 10px;
  line-height: 1;
}
.badge-outline { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.badge-ink { background: var(--ink); color: var(--paper); }
.badge-cream { background: var(--cream); color: var(--ink); }
.badge-dot::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 20px;
  color: var(--ink-3);
  padding: 6px 0;
}
.tag::before { content: '#'; color: var(--voom-red); margin-inline-end: 3px; font-weight: 700; }
.tag:hover, .tag.active { color: var(--voom-red); }

/* ===== Forms ===== */
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.input, .select, .textarea {
  background: var(--paper);
  border: 1px solid var(--hair);
  padding: 12px 14px;
  font-family: var(--sans);
  font-size: 20px;
  color: var(--ink);
  width: 100%;
  outline: none;
  transition: border-color .2s ease;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--ink); }
.input-underline {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
  padding: 10px 0;
}
.input-underline:focus { border-bottom-color: var(--voom-red); }
.field .help { font-size: 20px; color: var(--ink-3); }
.field .error { font-size: 20px; color: var(--voom-red); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-6); }
.checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 20px;
  color: var(--ink-2);
  cursor: pointer;
}
.checkbox input { accent-color: var(--voom-red); }
.toggle {
  width: 42px;
  height: 22px;
  background: var(--hair);
  border: 0;
  position: relative;
  cursor: pointer;
  transition: background .2s;
}
.wrap.home-section{
    margin-bottom: var(--s-4) !important;
  }

/* ===== Section Strip / hp-slider ===== */
.wow-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-4);
}
.wow-head-left { display: flex; align-items: center; gap: var(--s-3); }
.wow-head-logo { height: 32px; width: auto; }
.wow-head-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  color: var(--ink);
}
.wow-head-more {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-3);
  text-decoration: none;
}
.wow-head-more:hover { color: var(--voom-red); }

.hp-slider-card {
  display: block;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
}
.hp-slider-card:hover { color: #fff; }
.hp-slider-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.hp-slider-card-content {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.28) 55%, rgba(0,0,0,0) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 14px 16px;
  gap: 6px;
}
.hp-slider-cat {
  display: inline-block;
  background: var(--voom-red);
  color: #fff;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 8px;
  padding: 2px 10px;
  align-self: flex-start;
}
.hp-slider-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.3;
  color: #fff;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.toggle::before {
  content: '';
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  width: 18px;
  height: 18px;
  background: #fff;
  transition: transform .25s;
}
.toggle.on { background: var(--voom-red); }
.toggle.on::before { transform: translateX(20px); }
[dir="rtl"] .toggle.on::before { transform: translateX(-20px); }

/* ===== Card · A: Standard (cream) ===== */
.a-card {
  display: flex;
  flex-direction: column;
  background: var(--cream);
  color: var(--ink);
  border-radius: 16px;
}
.a-card:hover { color: var(--ink); }
.a-card:hover h3 { color: var(--voom-red); transition: color .2s; }
.a-card .img-wrap { aspect-ratio: 4/3; overflow: hidden; background: var(--hair); border-radius: 4px ; }
.a-card .img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.a-card .body { padding: var(--s-4) var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.a-card .cat {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--voom-red);
}
.a-card h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}
.a-card .deck {
  font-family: var(--display);
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.45;
  color: var(--ink-3);
  margin: 0;
}
.a-card .meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: 20px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding-top: var(--s-2);
  margin-top: auto;
  border-top: 1px solid var(--hair);
}
.a-card .meta .author { color: var(--ink); font-weight: 600; }

.card-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}

/* Homepage-like visual for 3-up article cards */
.card-grid-3 .a-card {
  position: relative;
  min-height: 360px;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  color: #fff;
}
.card-grid-3 .a-card:hover { color: #fff; }
.card-grid-3 .a-card .img-wrap {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
}
.card-grid-3 .a-card .img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.card-grid-3 .a-card .img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.36) 52%, rgba(0,0,0,.08) 100%);
}
.card-grid-3 .a-card .img-wrap + .body {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 14px 20px 20px;
  background: transparent;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
}
.card-grid-3 .a-card .img-wrap + .body .cat {
  display: inline-flex;
  width: fit-content;
  background: var(--voom-red);
  border-radius: 10px;
  padding: 3px 10px;
  color: #fff;
  align-self: flex-start;
}
.card-grid-3 .a-card .img-wrap + .body h3 {
  color: #fff;
  font-size: 20px;
  line-height: 1.3;
}
.card-grid-3 .a-card:hover .img-wrap + .body h3 { color: #fff; }
.card-grid-3 .a-card .img-wrap + .body .deck {
  color: rgba(255,255,255,.86);
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-grid-3 .a-card .img-wrap + .body .meta {
  color: rgba(255,255,255,.88);
  border-top: 1px solid rgba(255,255,255,.3);
  padding-top: var(--s-3);
}
.card-grid-3 .a-card .img-wrap + .body .meta .author { color: #fff; }

/* Compact card variant — same fonts, tighter padding */
.a-card.a-card-compact h3 { font-size: 20px; line-height: 1.22; }
.a-card.a-card-compact .body { padding: var(--s-3) var(--s-4) var(--s-4); gap: var(--s-2); }
.a-card.a-card-compact .img-wrap { aspect-ratio: 16/10; }
.a-card.a-card-compact .cat { font-size: 20px; }
.a-card.a-card-compact .meta { font-size: 20px; }

/* Hero compact spacing */
.home-secondary { padding-top: var(--s-7); padding-bottom: var(--s-8); }
.home-hero-wrap { padding-top: var(--s-7); }
.hero-compact .hero-img { aspect-ratio: 16/11; }
.hero-img{ border-radius: 16px; }
.hero-link { display: block; color: inherit; }
.hero-link:hover { color: inherit; }
.hero-link:hover h1 { color: var(--voom-red); transition: color .25s; }

/* ===== Homepage head — 1 hero + 3 stacked overlay cards ===== */
.home-head { padding-top: 100px; padding-bottom: var(--s-8); }
.head-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  height: 85vh;
  gap: var(--s-5);
}
.head-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 16px;
  background: #000;
  color: #fff;
}
.head-card:hover { color: #fff; }
.head-card .img-wrap { position: absolute; inset: 0; }
.head-card .img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.head-card:hover .img-wrap img { transform: scale(1.04); }
.head-card .img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.86) 0%, rgba(0,0,0,.42) 45%, rgba(0,0,0,.06) 100%);
}
.head-card .head-body {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-5) var(--s-5);
}
.head-card .head-badge {
  align-self: flex-start;
  width: fit-content;
  background: var(--voom-red);
  color: #fff;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .04em;
  line-height: 1.35;
  padding: 4px 11px;
  border-radius: 4px;
}
.head-card .head-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
}
.head-card:hover .head-title { color: #fff; }

.head-card-hero {
  grid-column: 1;
  grid-row: 1 / span 3;
}
.head-card-hero .head-title { font-size: clamp(26px, 2.4vw, 38px); }

.head-card-sm { min-height: 0; }
.head-card-sm .head-title { font-size: clamp(18px, 1.5vw, 24px); }
.card-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7); }
.card-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); }

/* ===== Card · B: Feature horizontal ===== */
.a-card-feature {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--s-7);
  background: transparent;
  align-items: center;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: var(--s-6) 0 var(--s-7);
}
.a-card-feature:hover { color: var(--ink); }
.a-card-feature .img-wrap {
  order: 2;
  aspect-ratio: 16/11;
  overflow: hidden;
  background: var(--hair);
  border-radius: 16px;
}
.a-card-feature .img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.a-card-feature .body {
  order: 1;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
[dir="rtl"] .a-card-feature .body { padding: 0; }
.a-card-feature .cat {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--voom-red);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.a-card-feature .cat::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--voom-red);
}
.a-card-feature h3 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0;
}
.a-card-feature:hover h3 { color: var(--voom-red); transition: color .25s; }
.a-card-feature .deck {
  font-family: var(--display);
  font-style: normal;
  font-size: clamp(20px, 1.2vw, 22px);
  line-height: 1.5;
  color: var(--ink-2);
}
.a-card-feature .meta-cap {
  margin-top: var(--s-2);
  padding-top: var(--s-3) !important;
  border-top: 1px solid var(--hair);
}

/* ===== Card · C: Cover overlay ===== */
.a-card-overlay {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  color: #fff;
  display: block;
}
.a-card-overlay:hover { color: #fff; }
.a-card-overlay .img-wrap { position: absolute; inset: 0; }
.a-card-overlay .img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.a-card-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26,20,16,.85) 0%, rgba(26,20,16,.35) 45%, transparent 70%);
}
.a-card-overlay .overlay-content {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--s-7);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.a-card-overlay .cat {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  opacity: .9;
}
.a-card-overlay h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.15;
  color: #fff;
  margin: 0;
}

/* ===== Card · D: Numbered text only ===== */
.a-card-text {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-7) 0;
  border-top: 1px solid var(--ink);
  color: var(--ink);
}
.a-card-text:hover { color: var(--ink); }
.a-card-text .num {
  font-family: var(--display);
  font-weight: 900;
  font-size: 56px;
  line-height: .9;
  color: var(--voom-red);
}
.a-card-text .cat-line {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.a-card-text h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}
.a-card-text:hover h3 { color: var(--voom-red); }
.a-card-text .deck {
  font-family: var(--display);
  font-style: normal;
  font-size: 20px;
  color: var(--ink-3);
}
.a-card-text .meta {
  font-family: var(--sans);
  font-size: 20px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* ===== Mini card (row) ===== */
.a-card-mini {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  color: var(--ink);
}
.a-card-mini .img {
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  background-color: var(--hair);
}
.a-card-mini .body { display: flex; flex-direction: column; gap: var(--s-2); }
.a-card-mini .cat {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--voom-red);
}
.a-card-mini h4 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.18;
  color: var(--ink);
  margin: 0;
}
.a-card-mini:hover h4 { color: var(--voom-red); }
.a-card-mini .deck {
  font-family: var(--display);
  font-style: normal;
  font-size: 20px;
  color: var(--ink-3);
}
.a-card-mini .meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: 20px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--hair);
}

/* ===== Section head ===== */
.section-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-5);
  align-items: baseline;
  padding: var(--s-8) 0 var(--s-4);
  border-bottom: 1px solid var(--ink);
  margin-bottom: var(--s-6);
}
.section-head .num {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .16em;
  color: var(--voom-red);
}
.section-head h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
}
.section-head .more {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}
.section-head .more:hover { color: var(--voom-red); }

/* ===== Chapter header (used in landing/about pages) ===== */
.chapter {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-5);
  align-items: baseline;
  padding-top: var(--s-10);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--ink);
}
.chapter-no {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .18em;
  color: var(--voom-red);
}
.chapter h2 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(40px, 6vw, 64px);
  line-height: .98;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0;
}
.chapter-side {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.chapter-deck {
  font-family: var(--display);
  font-style: normal;
  font-size: clamp(20px, 1.8vw, 22px);
  line-height: 1.45;
  color: var(--ink-2);
  margin: var(--s-5) 0 var(--s-9);
  max-width: 70ch;
}

/* ===== Hero (Refined) ===== */
.hero-refined {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
  align-items: center;
  padding: var(--s-6) 0 var(--s-7);
  border-bottom: 1px solid var(--ink);
  margin-top:var(--s-8);
}
.hero-refined .hero-text { display: flex; flex-direction: column; gap: var(--s-3); }
.hero-refined .eyebrow-line {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--voom-red);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.hero-refined .eyebrow-line::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--voom-red);
}
.hero-refined h1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0;
}
.hero-refined h1 em { font-style: normal; color: var(--voom-red); font-weight: 700; }
.hero-refined .deck {
  font-family: var(--display);
  font-style: normal;
  font-size: clamp(20px, 1.2vw, 22px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 52ch;
}
.hero-refined .meta-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--sans);
  font-size: 20px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--hair);
}
.hero-refined .meta-row .author { color: var(--ink); font-weight: 600; }
.hero-refined .hero-img {
  aspect-ratio: 16/11;
  background-size: cover;
  background-position: center;
  background-color: var(--hair);
}
.hero-refined .hero-img img { width: 100%; height: 100%; object-fit: cover; }

/* ===== Article page ===== */
.article-page { background: var(--paper); }
.article-head {
  padding: var(--s-9) 0 var(--s-7);
  max-width: 920px;
  margin: var(--s-8) auto 0;
  text-align: center;
}
.breadcrumb {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  margin-bottom: var(--s-6);
  margin-top: var(--s-4);
}
.breadcrumb a { color: var(--ink-3); }
.breadcrumb a:hover { color: var(--voom-red); }
.breadcrumb .sep { font-size: 0; }
.breadcrumb .sep::before { content: ">"; font-size: 14px; color: var(--mute); }
.category-line {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--voom-red);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.category-line::before{
  content: '';
  width: 26px;
  height: 1px;
  background: color-mix(in srgb, var(--voom-red) 30%, transparent);
  margin-top: var(--s-2);
}
.article-head h1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(36px, 5.5vw, 64px);
  line-height: .98;
  letter-spacing: -.018em;
  color: var(--ink);
  margin: 0 0 var(--s-5);
}
.article-head .deck {
  font-family: var(--display);
  font-style: normal;
  font-size: clamp(20px, 1.8vw, 22px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 60ch;
  margin: 0 auto !important;
}
.article-byline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-4) 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  font-family: var(--sans);
  font-size: 20px;
  max-width: 920px;
  margin: var(--s-7) auto 0;
}
.article-byline .byline-l { display: flex; align-items: center; gap: var(--s-3); }
.article-byline .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--voom-red);
}
/* House byline: the mark sits on white and keeps its proportions rather than
   being cropped into the red circle the named writers get. */
.article-byline .avatar--house {
  background: #fff;
  border: 1px solid var(--hair);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.article-byline .avatar--house img {
  width: 22px;
  height: auto;
  border-radius: 0 !important;
}
.author-info{
  display: flex;
  gap:10px;

}
.article-byline .author-info b { display: block; font-family: var(--sans); font-weight: 600; font-size: 20px; color: var(--ink); }
.article-byline .author-info span { font-size: 18px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); }
.article-byline .actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.article-byline .actions a, .article-byline .actions span {
  width: 32px;
  height: 32px;
  border: 1px solid var(--hair);
  display: grid;
  place-items: center;
  font-size: 20px;
  color: var(--ink);
  transition: border-color .2s, color .2s;
}
.article-byline .actions a:hover { border-color: var(--voom-red); color: var(--voom-red); }

.article-hero-img {
  margin: var(--s-7) auto 0;
  max-width: 1100px;
  aspect-ratio: 16/9;
  background: var(--hair);
  border-radius: 12px;
  overflow: hidden;
}
.article-hero-img img { width: 100%; height: 100%; object-fit: cover; }

/* Imported articles: hero rendered inside the text column, so it follows the
   column width instead of the 1100px full-bleed band. */
.article-content .article-hero-img--inline {
  max-width: 100%;
  margin: 0 0 var(--s-5);
}
.article-content .article-hero-img--inline .article-hero-caption {
  max-width: 100%;
  margin: var(--s-2) 0 0;
}
.article-hero-caption {
  max-width: 1100px;
  margin: var(--s-3) auto 0;
  font-family: var(--display);
  font-style: normal;
  font-size: 20px;

  color: var(--ink-4);
}

.article-body-grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 60px;
  gap: var(--s-9);
  max-width: 1100px;
  margin: var(--s-10) auto;
  align-items: start;
}
.article-body-grid:has(.article-toc[hidden]) {
  grid-template-columns: minmax(0, 1fr) 60px;
}

/* ===== Article 2/3 + 1/3 layout (content + sidebar) ===== */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--s-10);
  max-width: 1280px;
  margin: var(--s-10) auto;
  padding: 0 var(--s-7);
  align-items: start;
}
.article-layout .article-content {
  max-width: none;
  margin: 0;

  @media (max-width: 900px) {
   max-width: 90vw;
    margin: 0 auto;
  }
}
.article-aside {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: var(--s-7);
}
.article-aside-block { display: flex; flex-direction: column; gap: var(--s-4); }
.article-aside h4.aside-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--voom-red);
  margin: 0 0 var(--s-2);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--ink);
}

/* Compact related card for sidebar */
.aside-card {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--hair);
  color: var(--ink);
  width:100%;
}
.aside-card:last-of-type { border-bottom: 0; }
.aside-card .img-wrap {
  aspect-ratio: 4/3;
  border-radius: 4px;
  min-height: 110px;
  max-height: 130px;
  overflow: hidden;
  background: var(--hair);
  border-radius: 16px;
} 
.aside-card .img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.aside-card .body { display: flex; flex-direction: column; gap: 4px; }
.aside-card .cat {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--voom-red);
}
.aside-card h4 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}
.aside-card:hover h4 { color: var(--voom-red); }
.aside-card .meta {
  font-family: var(--sans);
  font-size: 20px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-top: auto;
}

/* TOC standalone block */
.article-toc-block {
  background: var(--cream);
  padding: var(--s-6) var(--s-6);
}
.article-toc-block h4.aside-title { color: var(--voom-red); border-bottom-color: var(--ink-3); }
.article-toc-block ol {
  list-style: none;
  counter-reset: toc2;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.article-toc-block ol li {
  counter-increment: toc2;
  font-family: var(--display);
  font-size: 20px;
  line-height: 1.4;
  padding-inline-start: 32px;
  position: relative;
}
.article-toc-block ol li::before {
  content: counter(toc2, decimal-leading-zero);
  position: absolute;
  inset-inline-start: 0;
  top: 1px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 20px;
  color: var(--voom-red);
  letter-spacing: .08em;
}
.article-toc-block a { color: var(--ink-2); }
.article-toc-block a:hover { color: var(--voom-red); }

#article_page h2{
  font-size: 24px !important;
}
/* Tableau (more articles wide grid) */
.article-tableau { background: var(--cream); padding: var(--s-11) 0; margin-top: var(--s-11); }
.article-tableau .section-head { border-bottom-color: var(--ink); align-items:end; gap:5px;}

/* Newsletter mini block in sidebar */
.aside-newsletter {
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-6);
  border-radius: 12px;
  width: 100%;
}
@media (max-width: 900px) {
  .aside-newsletter { width:90%; margin: 0 auto;  }
}
.aside-newsletter h4 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  margin: 0 0 var(--s-3);
  color: var(--paper);
}
.aside-newsletter p {
  font-family: var(--display);
  font-style: normal;
  font-size: 20px;
  color: rgba(250,248,244,.75);
  margin: 0 0 var(--s-4);
}
.aside-newsletter form { display: flex; border-bottom: 1px solid rgba(250,248,244,.4); }
.aside-newsletter input {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 8px 0;
  color: var(--paper);
  font-size: 20px;
  outline: none;
}
.aside-newsletter input::placeholder { color: rgba(250,248,244,.55); }
.aside-newsletter button {
  background: transparent;
  border: 0;
  color: var(--voom-red-soft);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0 var(--s-2);
}
.aside-newsletter button:hover { color: #fff; }
/* The sidebar's own contents rail — scoped to the aside on purpose. Unscoped it
   also caught the table of contents inside an imported article body, which
   shares the class name, and pinned a mid-article box to the viewport. */
aside .article-toc {
  position: sticky;
  top: 96px;
  padding-top: var(--s-4);
  border-top: 1px solid var(--ink);
}
.article-toc h5 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--voom-red);
  margin: 0 0 var(--s-4);
}
.article-toc ol {
  list-style: none;
  counter-reset: toc;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.article-toc ol li {
  counter-increment: toc;
  font-family: var(--display);
  font-size: 20px;
  line-height: 1.4;
  color: var(--ink-2);
  padding-inline-start: 28px;
  position: relative;
}
.article-toc ol li::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute;
  inset-inline-start: 0;
  top: 2px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 20px;
  color: var(--voom-red);
  letter-spacing: .08em;
}
.article-toc a { color: var(--ink-2); }
.article-toc a:hover { color: var(--voom-red); }

.article-content { max-width: 68ch; margin: 0 auto; }
.article-content p {
  font-family: var(--sans);
  font-size: 22px;
  line-height: 1.85;
  color: var(--ink-2);
  margin: 0 0 var(--s-7);
}
/* A deliberate blank line. The editor writes it as <p><br></p>, but the content
   is round-tripped through DOMDocument on save (normalize_rich_content_media_urls)
   and a <p></p> that came back without its <br> would collapse to nothing but
   its margin — so both shapes are held open to a full line. */
.article-content p:empty,
.article-content p:has(> br:only-child) {
  min-height: .9em;
}
/* Every blank line, whatever shape it arrived in, is normalised to this on
   render. It is known to hold no text, so the line height can be cut without
   any risk of squashing a real paragraph. */
.article-content p.blank-line {
  min-height: 0;
  line-height: .9;
  margin: 0;
}
/* Legacy content saved before serializeForSave() normalised them: the editor
   treats DIV as a block format too, so older articles hold their lines in bare
   <div>s. Same rhythm as <p>, but only for class-less direct children — the
   image-block / benefits-box / lead-form / embed wrappers keep their own. */
.article-content > div:not([class]) {
  font-family: var(--sans);
  font-size: 22px;
  line-height: 1.85;
  color: var(--ink-2);
  margin: 0 0 var(--s-7);
}
.article-content > div:not([class]):empty,
.article-content > div:not([class]):has(> br:only-child) {
  min-height: .9em;
}
.article-content h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.15;
  color: var(--ink);
  margin: var(--s-9) 0 var(--s-5);
}
.article-content h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.2;
  color: var(--ink);
  margin: var(--s-8) 0 var(--s-4);
}
/* Links carry no forced underline of their own — the editor's underline button
   wraps the text in <u> (Quill nests link outside every other inline format, so
   it is always <a><u><span style="color:…">), and a text-decoration hard-coded
   on the <a> cannot be undone from a descendant. Letting <u> drive it is what
   makes the underline button work on links. */
.article-content a { color: var(--voom-red); text-decoration: none; text-underline-offset: 3px; }
.article-content a u { text-decoration: underline; text-underline-offset: 3px; }
/* Quotes in the body share the sidebar highlight's look (.article-highlight-block
   below): rules above and below, no side rule, and an oversized quote mark
   watermarked into the corner. `isolation` keeps the z-index:-1 glyph behind the
   text but in front of the box's own background — the quote's text is usually a
   bare text node, so it cannot be lifted with z-index of its own. */
/* ===== Imported Elementor blocks =====
   Callout heading, tick list and CTA button, rebuilt to look like the source.
   Inline color / border-color / background-color come from the editor's own
   settings and override the fallbacks here. */
/* Transparent by default so a callout that came across with only a fill (the
   white-on-purple banner) doesn't also grow an outline — the imported
   border-color, when there is one, paints over this. */
.article-content .el-boxed {
  border: 2px solid transparent;
  padding: var(--s-4) var(--s-5);
  margin: var(--s-8) 0;
  text-align: center;
  font-size: clamp(22px, 2.2vw, 28px);
}
.article-content div.el-boxed > :first-child { margin-top: 0; }
.article-content div.el-boxed > :last-child  { margin-bottom: 0; }
.article-content div.el-boxed p { font-size: inherit; font-weight: 700; color: inherit; }
/* Imported promo blocks were set in the source's sans, not the site's display
   serif — in the serif they read as a different colour entirely. */
.article-content .el-boxed  :is(h1, h2, h3, h4, p),
.article-content .el-section :is(h1, h2, h3, h4) {
  font-family: var(--sans);
  /* The source set these with a plain <b>, so 700 — 800 read as a heavier,
     darker block than the original. */
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}
.article-content .el-boxed :is(h1, h2, h3, h4) { font-size: clamp(24px, 2.4vw, 32px); }

/* An Elementor section that carried its own fill — the promo blocks. */
.article-content .el-section {
  padding: var(--s-6) var(--s-5);
  margin: var(--s-8) 0;
  border-radius: 8px;
}
.article-content .el-section > :first-child { margin-top: 0; }
.article-content .el-section > :last-child  { margin-bottom: 0; }
/* A form imported under its own heading box carried three separate gaps at
   once — the box's bottom margin, the normalised blank line between them, and
   the wrap's own top margin — about 75px where the source has the two almost
   touching. The box and the form are one unit; they close up. */
.article-content .el-boxed:has(+ .lf-wrap),
.article-content .el-boxed:has(+ p.blank-line + .lf-wrap) { margin-bottom: 0; }
.article-content p.blank-line:has(+ .lf-wrap) { display: none; }
.article-content .lf-wrap--transparent { margin: 8px 0; }

.article-content ul.el-checklist {
  list-style: none;
  padding: 0;
  margin: var(--s-6) 0;
}
.article-content ul.el-checklist > li {
  /* The generic `.article-content ul li { list-style: disc }` further down would
     otherwise draw a bullet next to the tick. */
  list-style: none;
  position: relative;
  padding-inline-start: 52px;
  margin-bottom: var(--s-5);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.55;
}
.article-content ul.el-checklist > li::before {
  content: '✓';
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  /* Black rather than currentColor: the imported list often carries a colour of
     its own, and the tick inherited it. The mark is chrome, not copy — it stays
     the same in every article while the text keeps whatever colour it had.
     Overridable per list with style="--tick-color: #hex" on the <ul>. */
  color: var(--tick-color, #000);
  border: 2.5px solid var(--tick-color, #000);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  line-height: 1;
}
.article-content a.el-cta {
  display: block;
  background: #000;
  color: #fff;
  text-align: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 28px);
  padding: var(--s-5) var(--s-4);
  margin: var(--s-8) 0;
  text-decoration: none;
  transition: opacity .2s ease;
}
/* The fill arrives inline from Elementor, so a hover that names its own colour
   would have to !important its way past it — and would then flatten every
   button to the same shade whatever the source chose. Darkening the element
   instead keeps each button its own colour and needs no per-article rule, and
   works whether the fill is a background-color or the highlight-scroll
   animation's background-image. */
.article-content a.el-cta {
  transition: filter .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.article-content a.el-cta:hover {
  filter: brightness(.85);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .28);
  transform: translateY(-1px);
}
.article-content a.el-cta:hover,
.article-content a.el-cta:hover * { text-decoration: none; }
/* A button the source gave its own hover pair — typically a white box with a
   black frame that inverts under the cursor. The generic hover only dimmed the
   fill, which on a white button read as a fault rather than a state.
   !important because the resting colours are inline, and inline beats any
   selector; the variables are inline too, so each button inverts to its own
   colours rather than to a shared pair. */
.article-content a.el-cta--invert:hover {
  background-color: var(--cta-hover-bg, #000) !important;
  color: var(--cta-hover-fg, #fff) !important;
  border-color: var(--cta-hover-bg, #000) !important;
  filter: none;
}
/* Nothing is cleared on hover any more: some CTAs are filled by the
   highlight-scroll animation rather than by a background-color, and blanking
   background-image wiped exactly those to transparent. */
/* The label inherits the button's own colour rather than the source's span. */
.article-content a.el-cta * { color: inherit; background: none; }

/* A promo block pulled in from a saved Elementor template: product picture,
   heading and CTA on a coloured card. The colour arrives inline from the
   template's own container; everything else is set here so the block reads as
   one unit rather than three stray pieces of body copy. */
.article-content .el-promo {
  margin: var(--s-8) 0;
  padding: var(--s-6);
  border-radius: 14px;
  text-align: center;
}
.article-content .el-promo img {
  max-width: 320px;
  width: 100%;
  height: auto;
  margin: 0 auto var(--s-4);
  display: block;
}
/* The headline is the creative here, not body copy — at body size the card
   read as a caption under a picture. */
.article-content .el-promo h2,
.article-content .el-promo h3 {
  margin: 0 0 var(--s-4);
  text-align: center;
  font-size: clamp(28px, 4.5vw, 46px);
  line-height: 1.15;
}
.article-content .el-promo h2 a,
.article-content .el-promo h3 a { color: inherit; text-decoration: none; }
.article-content .el-promo a.el-cta { margin: 0; }

/* Imported data tables. Still scrollable on a narrow screen (the display:block
   rule further up), but with the header bar, rules and banding the source had. */
.article-content table {
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #000;
  border-radius: 12px;
  overflow: hidden;
  margin: var(--s-6) 0;
  font-size: 19px;
}
.article-content table th,
.article-content table td {
  border: 0;
  border-bottom: 1px solid #000;
  border-inline-start: 1px solid #000;
  padding: 15px;
  text-align: start;
  vertical-align: top;
}
.article-content table th:first-child,
.article-content table td:first-child { border-inline-start: 0; }
.article-content table tr:last-child > th,
.article-content table tr:last-child > td { border-bottom: 0; }
.article-content table thead th,
.article-content table tr:first-child th {
  background: #e31e24;
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
}
.article-content table tbody tr:nth-child(even) { background: #faf8f6; }
/* Row highlight on hover. The header row carries its own inline background from
   the source, so it is left alone and only body rows react. */
.article-content table tbody tr { transition: background-color .15s ease; }
.article-content table tbody tr:hover { background: #fdeaea; }

/* FAQ accordion, imported from Elementor's toggle widget. Native <details>, so
   it opens without any JS and the answers stay in the page for search engines. */
.article-content details.el-faq {
  border: 1px solid var(--voom-red);
  background: #000;
  margin-bottom: var(--s-3);
}
.article-content details.el-faq > summary {
  cursor: pointer;
  list-style: none;
  padding: var(--s-4) var(--s-5);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 21px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.article-content details.el-faq > summary::-webkit-details-marker { display: none; }
.article-content details.el-faq > summary::after {
  content: '◀';
  margin-inline-start: auto;
  font-size: 15px;
  transition: transform .2s ease;
}
.article-content details.el-faq[open] > summary::after { transform: rotate(-90deg); }
.article-content details.el-faq > :not(summary) {
  background: #fff;
  color: var(--ink);
  margin: 0;
  padding: var(--s-4) var(--s-5);
}

/* A blank line the writer added is <p><br></p> — it has a child, so it is not
   :empty, and the <br> already gives it a line of height. What :empty does
   match is the structural leftovers the import leaves between blocks; those
   carry the body margin and opened a gap after tables and around credits.
   Collapse them, minus the slider controls, which are empty by design. */
.article-content p:empty,
.article-content div:empty:not([class*="swiper"]) { display: none; }

/* A credit written in the editor sits in a body block of its own, so it took
   the full paragraph line-height and rhythm even though its text is small —
   which opened a gap between the picture and its own caption. Tie the block
   that directly follows a picture back to it. */
.article-content .article-hero-img + div,
.article-content figure + div {
  margin-top: 0;
  line-height: 1.4;
}
/* A credit typed as "Small" in the editor is 0.75em of 22px body copy — the
   same too-small note as figcaption, so lift it to match. Scoped to the block
   that follows a picture, so ordinary small text elsewhere is untouched. */
.article-content .article-hero-img + div .ql-size-small,
.article-content figure + div .ql-size-small { line-height: 1.4; font-size: 18px; }
.article-content .article-hero-img--inline { margin-bottom: 8px; }

/* Photo credit / caption carried over from WP's [caption] shortcode. */
.article-content figure { margin: var(--s-6) 0; }
.article-content figure img { margin: 0; }
.article-content figcaption {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-3, #6b6b6b);
  text-align: start;
  padding-top: 6px;
}
/* Mid-body Taboola unit, imported in place of the old theme's [taboola-mid]. */
.article-content .taboola-inline { margin: var(--s-8) 0; clear: both; }
/* The source's own article CSS, re-stated here. Newer posts ship a <style>
   block naming these classes; the block is not imported, so without this the
   accent bars, the red table header and the FAQ chrome all vanish. */
.article-content .vooom-h2,
.article-content .vooom-h3 {
  border-right: 6px solid #e31e24;
  padding-right: 15px;
  font-weight: 700;
  color: #000;
}
.article-content .vooom-h2 { font-size: clamp(30px, 3vw, 40px); margin: var(--s-9) 0 var(--s-5); }
.article-content .vooom-h3 { font-size: clamp(26px, 2.6vw, 34px); margin: var(--s-8) 0 var(--s-4); }
/* Scroll box only — the frame the source drew around it read as a stray
   rectangle next to our own table borders. */
.article-content .vooom-table-container {
  margin: var(--s-8) 0;
  overflow-x: auto;
}
/* .vooom-table used to be stripped back to row rules only, to match the one
   source template that drew it that way. That made tables look different from
   one article to the next, so it now follows the shared table style above and
   only names the header colour. */
.article-content .vooom-table th { background-color: #e31e24; color: #fff; }
.article-content .vooom-faq { margin-top: var(--s-9); }
.article-content .vooom-article > :first-child { margin-top: 0; }
/* The source splits a body into many .vooom-article wrappers, one per run of
   paragraphs, with headings and tables between them. A vertical margin on the
   wrapper therefore lands between almost every block and stacks on top of the
   paragraph rhythm. The wrapper carries typography only; spacing belongs to
   the elements inside it. */
.article-content .vooom-article { margin: 0; }
.article-content .quote-source {
  display: block;
  margin-top: 10px;
  font-size: 20px;
  font-weight: 700;
  font-style: normal;
  color: var(--ink-4);
}

/* Imported headings carry the source's accent bar as a side border but not the
   padding that held it off the text, so the words sat on the bar. */
.article-content :is(h1, h2, h3, h4, h5, h6)[style*="border-right"] { padding-right: 16px; }
.article-content :is(h1, h2, h3, h4, h5, h6)[style*="border-left"]  { padding-left: 16px; }

/* A rule sits between two sections, so it needs air on both sides — a heading
   following one used to butt straight up against it. */
.article-content hr { border: 0; border-top: 1px solid var(--hair); margin: var(--s-8) 0; }
.article-content hr + h1,
.article-content hr + h2,
.article-content hr + h3,
.article-content hr + h4,
.article-content hr + p { margin-top: var(--s-7); }
.article-content blockquote, .article-content .pull, .article-content .highlight-box {
  position: relative;
  isolation: isolate;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow: hidden;
  background: transparent;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 700;
  font-size: 21px;
  line-height: 1.65;
  color: var(--ink);
  border: none;
  border-right: 3px solid var(--voom-red);
  border-left: 3px solid var(--voom-red);
  padding: var(--s-5) var(--s-4);
  margin: var(--s-8) 0;
  min-height: 150px;
  text-align: start;
}
.article-content blockquote::before,
.article-content .pull::before,
.article-content .highlight-box::before {
  content: '\201C';
  position: absolute;
  z-index: -1;
  /* Rotation lives in `transform` alongside the centring translate: as a
     standalone `rotate` property it would compose first and send translateY
     the wrong way. */
  top: 0%;
  right: 10px;
  transform: translateY(-50%) rotate(180deg);
  max-height: fit-content;
  font-family: Georgia, serif;
  font-size: 250px;
  font-weight: 900;
  line-height: 1;
  color: var(--voom-red);
  opacity: 0.12;
  pointer-events: none;
}
/* Quill emits one <blockquote> per line rather than merging a multi-line quote,
   so a run of them is closed up into a single box carrying a single glyph. */
.article-content blockquote:has(+ blockquote) {
  margin-bottom: 0;
  padding-bottom: 0;
  min-height: 0;
}
.article-content blockquote + blockquote {
  margin-top: 0;
  padding-top: 0;
  min-height: 0;
}
.article-content blockquote + blockquote::before { content: none; }
.article-content .highlight-box .author {
  display: block;
  font-style: normal;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-top: var(--s-4);
}
.article-content .benefits-box {
  --bb-title-bg: var(--voom-red);
  --bb-title-color: #fff;
  --bb-check: var(--voom-red);
  --bb-bg: #fff;
  margin: var(--s-8) 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bb-bg);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.article-content .benefits-box-title {
  background: var(--bb-title-bg);
  color: var(--bb-title-color);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 24px);
  text-align: center;
  padding: var(--s-4) var(--s-5);
}
.article-content .benefits-box-list {
  list-style: none;
  margin: 0;
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.article-content .benefits-box-item {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  font-family: var(--sans);
  font-size: 21px;
  line-height: 1.4;
  color: var(--ink-2);
}
.article-content .benefits-box-check {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bb-check);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 700;
  box-sizing: border-box;
}
.article-content .benefits-box--outline .benefits-box-check {
  background: transparent;
  border: 2px solid var(--bb-check);
  color: var(--bb-check);
}
.article-content .benefits-box--no-bg {
  background: transparent;
  box-shadow: none;
}
.article-content .image-block {
  margin: var(--s-8) 0;
  background: var(--hair);
  aspect-ratio: 16/9;
  position: relative;
}
.article-content .image-block img { width: 100%; height: 100%; object-fit: cover; }
.article-content .caption,
.article-content .image-block .caption {
  font-family: var(--display);
  font-style: normal;
  font-size: 22px;
  color: var(--ink-4);
  margin-top: var(--s-3);
}
.article-content ul, .article-content ol {
  margin: 0 0 var(--s-6);
  padding-inline-start: var(--s-7);
  font-size: 22px;
  line-height: 1.85;
  color: var(--ink-2);
}
.article-content ul li, .article-content ol li { margin-bottom: var(--s-3); }
.article-content ul li { list-style: disc; }
.article-content ol li { list-style: decimal; }
/* Body images keep the proportions they were uploaded with. A forced 16/9 box
   with object-fit:cover cropped every tall or square imported photo. */
.article-content img { width: 100%; max-width: 100%; height: auto; margin: 10px 0; object-fit: contain; border-radius: 8px; }
.article-content .project-name {
  font-family: var(--display);
  font-style: normal;
  font-size: 22px;
  color: var(--ink-4);
  text-align: center;
  margin-top: var(--s-3);
}
.article-content .section { margin: var(--s-9) 0; }

.share-rail {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--ink);
}
.share-rail .label {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .18em;
  color: var(--voom-red);
  writing-mode: vertical-rl;
  margin-bottom: var(--s-3);
}
.share-rail a, .share-rail .btn-c {
  width: 38px;
  height: 38px;
  border: 1px solid var(--hair);
  display: grid;
  place-items: center;
  color: var(--ink);
  font-size: 20px;
  transition: border-color .2s, color .2s;
}
.share-rail a:hover, .share-rail .btn-c:hover { border-color: var(--voom-red); color: var(--voom-red); }

.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-6) 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  margin: var(--s-7) 0;
}
.article-tags .tags-label {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-inline-end: var(--s-2);
}
.article-tags a {
  font-family: var(--sans);
  font-size: 20px;
  color: var(--ink-3);
  padding: 4px 0;
}
.article-tags a::before { content: '#'; color: var(--voom-red); font-weight: 700; margin-inline-end: 2px; }
.article-tags a:hover { color: var(--voom-red); }

.article-share-bottom {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-6) 0;
}
.article-share-bottom .actions{
  display:flex;
  gap: var(--s-3);
}
.article-share-bottom .social-text {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}
.article-share-bottom .icon {
  width: 36px;
  height: 36px;
  border: 1px solid var(--hair);
  display: grid;
  place-items: center;
  color: var(--ink);
  transition: border-color .2s, color .2s;
}
.article-share-bottom .icon:hover { border-color: var(--voom-red); color: var(--voom-red); }
.article-share-bottom .icon svg { width: 18px; height: 18px; }
.article-share-bottom .icon svg path { fill: currentColor; }

/* ===== Footer ===== */
.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-11) 0 var(--s-7);
  margin-top: var(--s-12);
}
.footer-top {
  display: grid;
  /* 3 columns while the newsletter block is commented out in public.tpl.
     Restore `1.4fr 1fr 1fr 1.2fr` when it comes back. */
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--s-9);
  padding-bottom: var(--s-9);
  border-bottom: 1px solid rgba(250,248,244,.15);
}
.footer-brand img, .footer-brand svg { height: 48px; width: auto; filter: brightness(0) invert(1); margin-bottom: var(--s-4); }
.footer-brand p {
  font-family: var(--display);
  font-style: normal;
  font-size: 20px;
  line-height: 1.55;
  color: rgba(250,248,244,.75);
  max-width: 36ch;
}
.site-footer h5 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--voom-red-soft);
  margin: 0 0 var(--s-5);
}
.site-footer ul { display: flex; flex-direction: column; gap: var(--s-3); }
.site-footer ul a {
  font-family: var(--sans);
  font-size: 20px;
  color: rgba(250,248,244,.85);
  transition: color .2s;
}
.site-footer ul a:hover { color: var(--voom-red-soft); }
.footer-newsletter {
  display: flex;
  margin-top: var(--s-4);
  border-bottom: 1px solid rgba(250,248,244,.4);
}
.footer-newsletter input {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 10px 0;
  color: var(--paper);
  font-size: 20px;
  outline: none;
}
.footer-newsletter input::placeholder { color: rgba(250,248,244,.55); }
.footer-newsletter button {
  background: transparent;
  border: 0;
  color: var(--voom-red-soft);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 0 var(--s-3);
  cursor: pointer;
}
.footer-newsletter button:hover { color: #fff; }
.footer-bot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--s-6);
  font-family: var(--sans);
  font-size: 20px;
  letter-spacing: .04em;
  color: rgba(250,248,244,.5);
  flex-wrap: wrap;
  gap: var(--s-4);
}
.footer-bot .socials { display: flex; gap: var(--s-3); }
.footer-bot .socials a {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(250,248,244,.25);
  display: grid;
  place-items: center;
  color: rgba(250,248,244,.85);
  transition: border-color .2s, color .2s;
}
.footer-bot .socials a:hover { border-color: var(--voom-red-soft); color: var(--voom-red-soft); }
.footer-bot .socials a svg { width: 16px; height: 16px; }

/* ===== Search popup ===== */
.search-popup {
  position: fixed;
  inset: 0;
  z-index: 800;
  display: none;
}
.search-popup.active { display: block; }
.search-popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26,20,16,.55);
  backdrop-filter: blur(2px);
}
.search-popup-content {
  position: relative;
  background: #fff;
  max-width: 600px;
  margin: 8vh auto 0;
  padding: var(--s-6) var(--s-7) var(--s-6);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
}
.search-popup-close {
  position: absolute;
  top: var(--s-4);
  inset-inline-end: var(--s-4);
  width: 32px;
  height: 32px;
  background: var(--hair);
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink-3);
  cursor: pointer;
}
.search-popup-close:hover { background: var(--hair-soft); color: var(--ink); }
.search-popup-input-wrap {
  border-bottom: 2px solid var(--hair);
  padding-bottom: var(--s-3);
  margin: var(--s-4) 0;
}
.search-popup-input-wrap form {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 100%;
}
.search-popup-input-wrap input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  direction: rtl;
  text-align: right;
}
.search-popup-input-wrap input::placeholder { color: var(--mute); font-style: normal; }
.search-popup-suggestions {
  display: flex;
  flex-direction: column;
  max-height: 55vh;
  overflow-y: auto;
}
.search-sug-item {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--hair);
  align-items: center;
  text-decoration: none;
}
.search-sug-item:last-of-type { border-bottom: 0; }
.search-sug-img { width: 60px; height: 44px; object-fit: cover; flex: 0 0 60px; border-radius: 6px; background: var(--hair); }
.search-sug-info { flex: 1; min-width: 0; }
.search-sug-title { font-family: var(--display); font-weight: 500; font-size: 15px; color: var(--ink); line-height: 1.3; }
.search-sug-cat { font-family: var(--sans); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--voom-red); margin-bottom: 2px; display: block; }
.search-sug-all {
  display: block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--voom-red);
  padding: var(--s-4) 0 var(--s-2);
  text-align: center;
}
.search-sug-empty { color: var(--ink-4); font-style: normal; font-family: var(--display); padding: var(--s-4) 0; font-size: 15px; }

/* ===== Pagination ===== */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  
  gap: var(--s-2);
  padding: var(--s-9) 0;
}
.pagination a, .pagination span {
  min-width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 20px;
  color: var(--ink);
  border: 1px solid var(--hair);
  padding: 0 var(--s-3);
  border-radius:16px;
  transition: border-color .2s, color .2s, background .2s;
}
.pagination a:hover { border-color: var(--ink); }
.pagination .current { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pagination .disabled { color: var(--mute); border-color: var(--hair-soft); }

/* ===== Newsletter / CTA block ===== */
.cta-block {
  background: var(--cream);
  padding: var(--s-10) var(--s-9);
  margin: var(--s-11) 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-7);
  align-items: center;
}
.cta-block h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
}
.cta-block p {
  font-family: var(--display);
  font-style: normal;
  font-size: 20px;
  color: var(--ink-3);
  margin: 8px 0 0;
}

/* ===== Lead Form (inline article) ===== */
.lead-form-inline {
  background: var(--cream);
  padding: var(--s-9);
  margin: var(--s-9) 0;
}
.lead-form-inline h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 26px;
  color: var(--ink);
  margin: 0 0 var(--s-3);
}
.lead-form-inline p { color: var(--ink-3); margin: 0 0 var(--s-5); }
.lead-form-inline .form-grid { gap: var(--s-4); }

/* ===== 404 / empty state ===== */
.empty-state {
  text-align: center;
  padding: var(--s-12) var(--s-7);
}
.empty-state .eyebrow { color: var(--voom-red); margin-bottom: var(--s-4); }
.empty-state h1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(72px, 12vw, 160px);
  line-height: .9;
  color: var(--ink);
  margin: 0;
}
.empty-state p {
  font-family: var(--display);
  font-style: normal;
  font-size: 20px;
  color: var(--ink-3);
  margin: var(--s-4) 0 var(--s-7);
}

/* ===== Auth pages ===== */
.auth-shell {
  min-height: 70vh;
  display: grid;
  place-items: center;
  padding: var(--s-10) var(--s-7);
}
.auth-card {
  width: 100%;
  max-width: 460px;
  background: var(--cream);
  padding: var(--s-10) var(--s-9);
}
.auth-card .eyebrow { color: var(--voom-red); margin-bottom: var(--s-3); }
.auth-card h1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1;
  color: var(--ink);
  margin: 0 0 var(--s-6);
  letter-spacing: -.01em;
}
.auth-card .form-grid { grid-template-columns: 1fr; gap: var(--s-5); }
.auth-card .actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--s-6);
}
.auth-card .small a { color: var(--voom-red); }

/* ===== Page (static / legal) ===== */
.static-page {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--s-10) var(--s-7);
}
.static-page h1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0 0 var(--s-7);
}
.static-page .deck {
  margin-bottom: var(--s-8);
  max-width: 60ch;
}
.static-page h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.15;
  color: var(--ink);
  margin: var(--s-9) 0 var(--s-4);
}
.static-page h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  color: var(--ink);
  margin: var(--s-7) 0 var(--s-3);
}
.static-page p, .static-page li {
  font-size: 22px;
  line-height: 1.85;
  color: var(--ink-2);
  margin: 0 0 var(--s-5);
}
.static-page ul, .static-page ol {
  margin: 0 0 var(--s-5);
  padding-inline-start: var(--s-7);
}
.static-page ul li { list-style: disc; }
.static-page ol li { list-style: decimal; }
.static-page a { color: var(--voom-red); text-decoration: underline; text-underline-offset: 3px; }

/* ===== Author / Tag header ===== */
.archive-head {
  text-align: center;
  padding: var(--s-10) 0 var(--s-9);
  border-bottom: 1px solid var(--ink);
  margin-bottom: var(--s-2);
  margin-top: var(--s-8);
}
.archive-head .eyebrow { margin-bottom: var(--s-4); }
.archive-head h1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(40px, 6vw, 80px);
  line-height: .95;
  letter-spacing: -.018em;
  color: var(--ink);
  margin: 0;
}
.archive-head .deck {
  margin: var(--s-5) auto 0;
  max-width: 60ch;
}
.archive-head .author-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--voom-red);
  margin: 0 auto var(--s-5);
  overflow: hidden;
}
.archive-head .author-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ===== Responsive ===== */
@media (max-width: 1100px) {
  .head-grid { height: 80vh; }
  .head-card .head-body { padding: var(--s-3) var(--s-4) var(--s-4); }
  .article-content img{ margin: var(--s-6) 0; width: 100%; max-width: 100%; height: auto; object-fit: contain; border-radius: 8px; }
  .section-head { display:flex;  align-items:center; gap:var(--s-4);
  }
  .section-head .more{ margin-right:auto; }
  .section-head .wow-head-logo{  height: 25px; }
  .card-grid-3 { grid-template-columns: 1fr 1fr; }
  .card-grid-4 { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: var(--s-7); }
  .article-body-grid { grid-template-columns: 1fr; }
  .article-toc, .share-rail { position: static; }
  .share-rail { flex-direction: row; justify-content: center; border-top: 1px solid var(--hair); padding-top: var(--s-5); }
  .share-rail .label { writing-mode: horizontal-tb; margin-bottom: 0; }
  .hero-refined { grid-template-columns: 1fr; gap: var(--s-7); padding: var(--s-7) 0 var(--s-9); }
  .hero-refined .hero-img { aspect-ratio: 16/10; order: -1; }
  .article-layout { grid-template-columns: 1fr; gap: var(--s-9); }
  .article-aside { position: static; }
}

@media (max-width: 760px) {
  /* Hard overflow guard */
  html, body { max-width: 100vw; overflow-x: hidden; }
  body > * { max-width: 100vw; }
  .wrap, .wrap-narrow, .wrap-wide, main, section, article, .home-page, .article-page, .article-layout, .article-content { max-width: 100%; }
  .wrap, .wrap-narrow, .wrap-wide { padding: 0 var(--s-4); }
  .card-grid-3, .card-grid-2, .card-grid-4 { grid-template-columns: 1fr; gap: var(--s-4); }
  .form-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: var(--s-6); padding-bottom: var(--s-6); }
  .footer-bot { flex-direction: column; align-items: flex-start; }
  .a-card-feature { grid-template-columns: 1fr; gap: 0; }
  .a-card-feature .img-wrap { order: 1; aspect-ratio: 16/10; border-radius: 12px; }
  .a-card-feature .body { order: 2; padding: var(--s-5) 0 0 !important; }
  .nav-toggle { display: flex; }
  .mast-row { padding: var(--s-3) var(--s-4); min-height: 48px; gap: var(--s-3); }
  .mast-issue { display: none; }
  .mast-logo svg, .mast-logo img { height: 38px; }
  .cta-block { grid-template-columns: 1fr; padding: var(--s-6); margin: var(--s-7) 0; }
  .article-content p { font-size: 20px; line-height: 1.75; }
  .article-byline { flex-direction: column; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) 0; }
  .article-head { padding: var(--s-5) 0 var(--s-4); }
  .article-head h1 { font-size: clamp(24px, 7vw, 32px); }
  .article-hero-img { aspect-ratio: 16/10; margin-top: var(--s-4); border-radius: 12px; }
  .article-layout { gap: var(--s-7); margin: var(--s-7) auto; padding: 0; }
  .article-tableau { padding: var(--s-8) 0; margin-top: var(--s-8); }
  .section-head { grid-template-columns: 1fr; gap: var(--s-2); padding: var(--s-6) 0 var(--s-3); margin-bottom: var(--s-4); }
  .section-head .more { justify-self: start; }
  .section-head h2 { font-size: clamp(20px, 5.5vw, 26px); }

  /* Hero — compact mobile */
  .hero-refined {
    grid-template-columns: 1fr;
    gap: var(--s-4);
    padding: var(--s-5) 0 var(--s-6);
  }
  .hero-refined .hero-img { aspect-ratio: 16/10; order: -1; }
  .hero-refined h1 { font-size: clamp(22px, 6.5vw, 30px); }
  .hero-refined .deck { font-size: 20px; }
  .hero-refined .meta-row { font-size: 20px; padding-top: var(--s-2); }
  .home-secondary { padding-top: var(--s-4); padding-bottom: var(--s-5); }
  .home-hero-wrap { padding-top: var(--s-4); }

  /* Homepage head — single column on mobile */
  .home-head { padding-top: 100px; padding-bottom: var(--s-5); }
  .head-grid { grid-template-columns: 1fr; grid-template-rows: none; height: auto; gap: var(--s-4); }
  .head-card-hero { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3.4; }
  .head-card-sm { aspect-ratio: 16 / 9; }
  .head-card .head-body { padding: var(--s-4); gap: var(--s-2); }
  .head-card-hero .head-title { font-size: clamp(20px, 5.4vw, 26px); }
  .head-card-sm .head-title { font-size: clamp(17px, 4.6vw, 21px); }

  /* Cards mobile — tighter */
  .a-card .body { padding: var(--s-3) var(--s-4) var(--s-4); }
  .a-card h3 { font-size: 20px; }
  .a-card .deck { font-size: 20px; }

  /* Archive + chapter heads */
  .archive-head { padding: var(--s-6) 0 var(--s-5); margin-bottom: var(--s-6); }
  .archive-head h1 { font-size: clamp(28px, 8vw, 42px); }
  .chapter { padding-top: var(--s-6); padding-bottom: var(--s-3); }
  .chapter h2 { font-size: clamp(28px, 9vw, 44px); }
  .chapter-deck { margin: var(--s-4) 0 var(--s-6); font-size: 20px; }

  /* Footer compact */
  .site-footer { padding: var(--s-7) 0 var(--s-5); margin-top: var(--s-7); }

  /* Section spacing tight on mobile */
  .home-section, .home-pick, .home-hero-wrap { padding-top: var(--s-3); padding-bottom: var(--s-3); }
  
  /* Aside (article sidebar) compact */
  .article-aside { gap: var(--s-5); }
  .aside-card { grid-template-columns: 150px 0.9fr; gap: var(--s-3); padding: var(--s-3) 0; width:95%; margin: 0 auto; }
  .aside-card h4 { font-size: 18px; }
  .aside-newsletter { padding: var(--s-5); }

  /* Static pages */
  .static-page { padding: var(--s-7) var(--s-4); }
  .static-page h1 { font-size: clamp(28px, 8vw, 40px); margin-bottom: var(--s-5); }
  .static-page h2 { margin: var(--s-6) 0 var(--s-3); }
  .static-page p, .static-page li { font-size: 20px; line-height: 1.7; }

  /* Auth */
  .auth-shell { padding: var(--s-6) var(--s-4); min-height: 50vh; }
  .auth-card { padding: var(--s-7) var(--s-5); }
}

/* mast-nav-inner hidden on mobile (hamburger handles mobile nav) */
@media (max-width: 760px) {
  .mast-nav-inner { display: none; }
}

/* ===== A11y ===== */
:focus-visible { outline: 2px solid var(--voom-red); outline-offset: 3px; }
.skip-link:focus { left: var(--s-4); top: var(--s-4); z-index: 100; }

/* ===== Quill editor formats (align + size) ===== */
/* The article WYSIWYG saves alignment/size as ql-* classes; without these rules
   "center"/"small" set in the editor don't render on the public page. */
/* +2px pass over the body copy: blocks that carry their own size from
   lead-form.css (review cards, benefits boxes) and the editor's alignment
   wrappers, which are <div class="ql-align-…"> and so miss the
   `div:not([class])` rule above. Scoped to the article so the same widgets
   keep their own size on a lead-form page. */
.article-content div[class^="ql-align"],
.article-content div[class*=" ql-align"] {
  font-family: var(--sans);
  font-size: 22px;
  line-height: 1.85;
  color: var(--ink-2);
  margin: 0 0 var(--s-6);
}
.article-content .benefits-box-title { font-size: 24px; }
.article-content .benefits-box-item  { font-size: 21px; }
.article-content .benefits-box-check { font-size: 17px; }
.article-content .lf-reviews-title      { font-size: 24px; }
.article-content .lf-reviews-title--bar { font-size: 26px; }
.article-content .lf-review-name { font-size: 22px; }
.article-content .lf-review-date { font-size: 15px; }
.article-content .lf-review-text { font-size: 18px; }
.article-content .lf-reviews .lf-subtitle { font-size: 20px; }
.article-content .lf-rating-score { font-size: 22px; }
.article-content .lf-rating-count { font-size: 16px; }
/* The newer source template's own typography, copied from the <style> block it
   ships inline (which the importer drops): a cyan rule opening each section.
   Scoped to .kan-container so articles from the older templates are untouched. */
.article-content .kan-container h2,
.article-content .kan-container h3 {
  border-right: 6px solid #02aeef;
  padding-right: 15px;
  color: #000;
}
.article-content .kan-container h2 { font-size: 32px; font-weight: 700; margin: 40px 0 20px; }
.article-content .kan-container h3 { font-size: 30px; font-weight: 600; margin: 30px 0 15px; }
.article-content .kan-faq-item { margin: 0 0 var(--s-4); }
.article-content .kan-faq-content { padding: var(--s-4) 0 var(--s-2); }
/* Photo credits read as a note under the picture, not as body copy — but body
   copy is 22px, and at 15px the credit was small enough to be missed. */
.article-content figcaption { font-size: 18px; text-align: center; }
/* Imported image carousel. One picture at a time, the arrows sized so they do
   not cover the photo on a narrow screen. */
/* The container clips the slide track, so a carousel that has not started yet
   still shows one picture rather than the whole strip spilling sideways. */
.article-content .el-carousel { margin: var(--s-8) 0; overflow: hidden; position: relative; }
.article-content .el-carousel .swiper-slide { width: 100%; flex-shrink: 0; }
.article-content .el-carousel figure { margin: 0; min-width: 0; }
.article-content .el-carousel img { margin: 0; border-radius: 12px; width: 100%; }
.article-content .el-carousel figcaption { padding: 0 var(--s-3); }
.article-content .el-carousel .swiper-button-next,
.article-content .el-carousel .swiper-button-prev {
  color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .38);
}
.article-content .el-carousel :is(.swiper-button-next, .swiper-button-prev)::after { font-size: 16px; font-weight: 700; }
.article-content .el-carousel .swiper-pagination {
  position: static;
  margin-top: 8px;
}
.article-content .el-carousel .swiper-pagination-bullet { background: var(--ink-4); opacity: .35; }
.article-content .el-carousel .swiper-pagination-bullet-active { background: var(--voom-red); opacity: 1; }
.article-content .ql-align-center { text-align: center; }
.article-content .ql-align-right  { text-align: right; }
.article-content .ql-align-left   { text-align: left; }
.article-content .ql-align-justify { text-align: justify; }
/* Same scale the editor shows (quill.snow.css), so what is picked in the
   admin is what the page renders. A fixed 20px here read as *smaller* than
   the 22px body copy, which made "large" look like it did nothing. */
.article-content .ql-size-small { font-size: 0.75em; }
.article-content .ql-size-large { font-size: 1.5em; }
.article-content .ql-size-huge  { font-size: 1.8em; }
/* Content already saved with the previous marker yellow (#ffe066), so the new
   colour applies without rebuilding every article. Buttons are excluded: their
   fill is not a marker and must keep whatever colour the source gave it. */
.article-content [style*="ffe066"]:not(.el-cta):not(.highlight-scroll):not(:has(.highlight-scroll)),
.article-content [style*="255, 224, 102"]:not(.el-cta):not(.highlight-scroll):not(:has(.highlight-scroll)) {
  background-color: #ffff00 !important;
}
/* Only markers that carry the previous default yellow are repainted. Matching
   every .highlight-scroll instead forced the new yellow onto markers that were
   deliberately given another colour. A marker with no --hl-color of its own
   needs no rule at all — the gradient's fallback is already the new yellow. */
.article-content .highlight-scroll[style*="ffe066"],
.article-content .highlight-scroll[style*="255, 224, 102"] {
  --hl-color: #ffff00 !important;
}

/* ===== Utility ===== */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.hidden { display: none; }
.hide-mobile { display: inline-flex; }
.hide-desktop { display: none; }
@media (max-width: 760px) {
  .hide-mobile { display: none; }
  .hide-desktop { display: inline-flex; }
}
.no-results {
  font-family: var(--display);
  font-style: normal;
  font-size: 20px;
  color: var(--ink-3);
  text-align: center;
  padding: var(--s-10) 0;
}

/* ===== Highlight scroll effect ===== */
.highlight-scroll {
  display: inline;
  background: linear-gradient(var(--hl-color, #ffff00), var(--hl-color, #ffff00)) no-repeat right center !important;
  background-size: 0% 88% !important;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: inherit;
  border-radius: 2px;
  padding: 0 2px;
  transition: background-size 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.highlight-scroll.hl-active {
  background-size: 100% 88% !important;
}
/* A CTA that is also a scroll-highlight. The rules above are written for a run
   of text inside a paragraph — inline display, a fill 88% of the line height —
   and applied to a button they broke it out of its own box and left a band of
   unpainted colour top and bottom. Declared after the block above because both
   carry !important. */
.article-content a.el-cta.highlight-scroll {
  display: block;
  padding: var(--s-5) var(--s-4);
  border-radius: 5px;
  /* The marker sweep belongs to a highlighted run of text, not to a button —
     a button is filled from the moment it is on screen. The gradient is
     dropped and its colour becomes the fill, so the CTA looks the same as
     every other one. */
  background-image: none !important;
  background-color: var(--hl-color, #000) !important;
  background-size: auto !important;
  /* Only this kind of CTA gets the black frame and the black hover. The other
     kind arrives fully styled from the source — its own fill, padding, radius
     and shadow — and must keep the look it came with. */
  border: 2px solid #000 !important;
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.article-content a.el-cta.highlight-scroll:hover {
  filter: none;
  background-color: #000 !important;
  color: #fff !important;
}
.article-content a.el-cta.highlight-scroll:hover * { color: #fff !important; }

/* ===== Article ticket badge ===== */
.article-ticket {
  display: inline-block;
  background: var(--voom-red);
  color: #fff;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  line-height: 1.4;
  max-width: fit-content;
}
.article-ticket--cat {
  background: transparent;
  color: var(--voom-red);
  
  font-size:20px; 
  border: 0px solid transparent;
}

/* ===== Highlight sidebar block ===== */
.article-highlight-block {
  background: transparent;
  position: relative;
  border-top: 3px solid var(--voom-red);
  border-bottom: 3px solid var(--voom-red);
  padding: var(--s-5) var(--s-4);
  overflow: hidden;
  min-height: 150px;
}
.article-highlight-block::before {
  content: '\201C';
  position: absolute;
  rotate: 180deg;
  max-height: fit-content;
  bottom: 30px;
  right: 10px;
  font-size: 250px;
  font-weight: 900;
  color: var(--voom-red);
  opacity: 0.12;
  line-height: 1;
  pointer-events: none;
  font-family: Georgia, serif;
}
.article-highlight-text {
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
  position: relative;
  z-index: 1;
}

/* ===== Home search bar ===== */
.home-search-wrap { padding: var(--s-6) 0 var(--s-4); }
.home-search-form {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  background: var(--hair, #f5f5f5);
  border-radius: 999px;
  padding: 10px 18px;
  max-width: 560px;
  margin: 0 auto;
  color: var(--ink-3);
}
.home-search-form input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  outline: none;
  direction: rtl;
  text-align: right;
}
.home-search-form input::placeholder { color: var(--ink-4, #aaa); }

/* ===== Shorts carousel ===== */
.shorts-carousel-wrap { margin: var(--s-9) 0; }
.shorts-carousel .swiper-button-next,
.shorts-carousel .swiper-button-prev {
  --swiper-navigation-color: var(--voom-red);
}
.shorts-carousel-title {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: var(--s-5);
  color: var(--ink);
}
.short-embed-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 9/16;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}
.short-embed-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.short-thumb-wrap { cursor: pointer; }
.short-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.short-play-btn {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  padding-right: 2px;
}
.short-thumb-wrap:hover .short-play-btn {
  background: rgba(255,0,0,0.85);
  transform: scale(1.08);
}

/* ===== Affiliation — shared base ===== */
.affiliation-card,
.affiliation-inline {
  --aff-bg:        #fff;
  --aff-fg:        var(--ink, #1a1410);
  --aff-fg2:       var(--ink-3, #6b7280);
  --aff-border:    #e5e7eb;
  --aff-label-fg:  #9ca3af;
  --aff-btn-bg:    var(--voom-red, #c91d36);
  --aff-btn-fg:    #fff;
  --aff-overlay:   none;
  --aff-marker:    rgba(255, 209, 0, .5);
  /* Font size is a per-card setting (admin: "גודל פונט"). Every text size in
     the block is multiplied by this, so one class scales the whole card. */
  --aff-scale:     1;
  position: relative;
  overflow: hidden;
}

/* ── Sidebar card ─────────────────────────────────────────── */
.affiliation-card {
  padding: 0 0 18px !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--aff-border) !important;
  background: var(--aff-bg) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
  border-radius: 12px !important;
  max-width: 100%;
}
@media (max-width: 760px) {
  .affiliation-card {
    max-width: 90vw;
  }
  .affiliation-card:hover .affiliation-card-img { transform: none; }
  .affiliation-card:hover .affiliation-card-overlay { opacity: 0; } 
  .affiliation-card-subtitle, .affiliation-card-title, .affiliation-card-text{
    text-align:center;
  } 
  .affiliation-card-btn{
    justify-self:center;
    margin: 0 auto;
  }
}

.affiliation-card-img-wrap { order: 1; }
.affiliation-card-img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius:16px 16px 0 0;
  display: block;
  transition: transform .4s ease;
}
.affiliation-card:hover .affiliation-card-img { transform: scale(1.04); }
.affiliation-card-title {
  order: 2;
  font-family: var(--display);
  font-weight: 800;
font-size: calc(22px * var(--aff-scale));
  margin: 6px 0 0;
  padding: 0 16px;
  color: var(--aff-fg);
  line-height: 1.25;
}
.affiliation-card-subtitle {
  order: 3;
  font-family: var(--sans);
font-size: calc(18px * var(--aff-scale));
  color: var(--aff-fg2);
  margin: 0;
  padding: 0 16px;
  line-height: 1.5;
}
.affiliation-card-text {
  order: 3;
  font-family: var(--sans);
font-size: calc(16px * var(--aff-scale));
  line-height: 1.6;
  color: var(--aff-fg2);
  margin: 0;
  padding: 0 16px;
}
.affiliation-card-btn {
  order: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--aff-btn-bg);
  color: var(--aff-btn-fg);
  font-family: var(--sans);
font-size: calc(13px * var(--aff-scale));
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  transition: transform .2s ease;
  letter-spacing: .02em;
  width: fit-content;
  margin: 4px 16px 0;
  justify-content: center;
}
.affiliation-card-btn:hover {  transform: translateX(-2px); color:white !important; }

/* ── Title / subtitle highlight ("marker") ───────────────────── */
.affiliation-card-title--marker > span,
.affiliation-inline-title--marker > span,
.affiliation-card-subtitle--marker > span,
.affiliation-inline-subtitle--marker > span {
  background-image: linear-gradient(var(--aff-marker), var(--aff-marker));
  background-repeat: no-repeat;
  background-size: 100% 40%;
  background-position: 0 85%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 1px;
}

/* ── Inline block ─────────────────────────────────────────── */
.affiliation-inline {
  margin: 32px 0;
  border-radius: 14px;
  border: 1px solid var(--aff-border);
  background: var(--aff-bg);
}
.affiliation-inline-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--aff-label-fg);
  padding: 10px 20px 0;
  display: block;
}
.affiliation-inline-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 20px 20px;
}
.affiliation-inline-img-wrap { overflow: hidden; border-radius: 10px; }
.affiliation-inline-img {
  width: 100%;
  aspect-ratio: 21/9;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.affiliation-inline:hover .affiliation-inline-img { transform: scale(1.04); }
.affiliation-inline-title {
  font-family: var(--display);
  font-weight: 800;
font-size: calc(20px * var(--aff-scale));
  margin: 0;
  color: var(--aff-fg);
  line-height: 1.25;
}
.affiliation-inline-subtitle {
  font-family: var(--sans);
font-size: calc(14px * var(--aff-scale));
  color: var(--aff-fg2);
  margin: 0;
  line-height: 1.5;
}
.affiliation-inline-text {
  font-family: var(--sans);
font-size: calc(15px * var(--aff-scale));
  line-height: 1.6;
  color: var(--aff-fg2);
  margin: 0;
}
.affiliation-inline-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--aff-btn-bg);
  color: var(--aff-btn-fg);
  font-family: var(--sans);
font-size: calc(14px * var(--aff-scale));
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
  transition: opacity .15s, transform .15s;
  align-self: flex-start;
  margin-top: 4px;
}
.affiliation-inline-btn:hover { opacity: .88; transform: translateX(-2px); }

/* ── Style variants ─────────────────────────────────────────── */

/* dark — כהה עם גרדיאנט ותמונה בולטת */
.aff-style--dark {
  --aff-bg:       linear-gradient(160deg, #111827 0%, #1f2937 100%);
  --aff-fg:       #f9fafb;
  --aff-fg2:      rgba(249,250,251,.65);
  --aff-border:   transparent;
  --aff-label-fg: rgba(249,250,251,.45);
  --aff-overlay:  linear-gradient(180deg, transparent 35%, rgba(17,24,39,.9) 100%);
}
.aff-style--dark.affiliation-card  { background: linear-gradient(160deg, #111827 0%, #1f2937 100%) !important; border-color: transparent !important; box-shadow: 0 8px 32px rgba(0,0,0,.22) !important; }
.aff-style--dark.affiliation-inline { background: linear-gradient(135deg, #111827 0%, #1f2937 100%); border-color: transparent; }

/* brand — צבע מותג (אדום) */
.aff-style--brand {
  --aff-bg:       var(--voom-red, #c91d36);
  --aff-fg:       #fff;
  --aff-fg2:      rgba(255,255,255,.78);
  --aff-border:   transparent;
  --aff-label-fg: rgba(255,255,255,.5);
  --aff-btn-bg:   #fff;
  --aff-btn-fg:   var(--voom-red, #c91d36);
}
.aff-style--brand.affiliation-card  { background: var(--voom-red, #c91d36) !important; border-color: transparent !important; }
.aff-style--brand.affiliation-inline { background: var(--voom-red, #c91d36); border-color: transparent; }

/* minimal — מסגרת בלבד, ללא רקע */
.aff-style--minimal {
  --aff-bg:       transparent;
  --aff-border:   currentColor;
  --aff-label-fg: var(--ink-3, #6b7280);
}
.aff-style--minimal.affiliation-card  { background: transparent !important; border: 1.5px solid var(--border-color, #e5e7eb) !important; box-shadow: none !important; }
.aff-style--minimal.affiliation-inline { background: transparent; border: 1.5px solid var(--border-color, #e5e7eb); }

/* Font size, set per card in the admin ("גודל פונט") and overridable per
   article. Only the multiplier changes — every text size in the block, sidebar
   and inline alike, is written as calc(Npx * var(--aff-scale)). */
.affiliation-card.aff-size--sm, .affiliation-inline.aff-size--sm { --aff-scale: 0.85; }
.affiliation-card.aff-size--md, .affiliation-inline.aff-size--md { --aff-scale: 1; }
.affiliation-card.aff-size--lg, .affiliation-inline.aff-size--lg { --aff-scale: 1.2; }
.affiliation-card.aff-size--xl, .affiliation-inline.aff-size--xl { --aff-scale: 1.45; }

@media (max-width: 600px) {
  .affiliation-inline-inner { padding: 14px 16px 18px; }
}

/* ===== Don't-miss carousel ===== */
.dont-miss-wrap { margin: var(--s-9) 0; }
.dont-miss-title {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: var(--s-5);
  color: var(--ink);
}
.dont-miss-card {
  display: block;
  text-decoration: none;
  color: var(--ink);
}
.dont-miss-img {
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 10px;
  margin-bottom: var(--s-3);
}
.dont-miss-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.dont-miss-card h4 {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  margin: var(--s-2) 0 0;
  color: var(--ink);
}
.dont-miss-card:hover h4 { color: var(--voom-red); }

/* ===== Global rounded corners ===== */
img { border-radius: 8px; }
/* The hero fills its figure edge to edge. Without the margin reset it inherits
   `.article-content img { margin: 10px 0 }`, which exposes the figure's --hair
   background as a band above and below the photo on imported articles. */
.article-hero-img img { display: block; border-radius: 12px; object-fit: cover; width: 100%; height: 100%; margin: 0; aspect-ratio: auto; min-width: 0; }
.avatar img, .avatar { border-radius: 50% !important; }
.article-byline .avatar { border-radius: 50% !important; }

figure{
  min-width:100%;
  margin:10px 0;
}