/* ============================================================
   LexPrime — Editorial portal
   BEM-organized stylesheet
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand */
  --color-red: #CD0000;
  --color-red-deep: #A30000;
  --color-red-soft: #FBE5E5;

  /* Ink + paper */
  --color-paper: #FCFBF8;
  --color-paper-warm: #F5EFE5;
  --color-ink: #0B0A09;
  --color-ink-soft: #1B1916;
  --color-meta: #7A726A;
  --color-rule: rgba(11, 10, 9, 0.12);
  --color-rule-strong: rgba(11, 10, 9, 0.28);

  /* Typography */
  --font-display: "Fraunces", "Times New Roman", serif;
  --font-body: "Newsreader", Georgia, serif;
  --font-ui: "IBM Plex Sans Condensed", "Helvetica Neue", sans-serif;

  /* Scale */
  --container: 1340px;
  --gutter: 28px;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, picture, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; padding: 0; }
input, textarea { font: inherit; color: inherit; }

/* ---------- 3. Base ---------- */
body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--color-ink);
  background: var(--color-paper);
  font-feature-settings: "kern", "liga", "calt", "onum";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--color-red); color: #fff; }

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

.rule        { height: 1px; background: var(--color-rule); border: 0; margin: 0; }
.rule--strong{ height: 2px; background: var(--color-ink); }
.rule--red   { height: 3px; background: var(--color-red); }

/* ============================================================
   UTILITY BAR
   ============================================================ */
.utility-bar {
  background: var(--color-ink);
  color: var(--color-paper);
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.utility-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
}
.utility-bar__dateline {
  display: flex;
  gap: 18px;
  align-items: center;
}
.utility-bar__edition {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-red);
  font-weight: 600;
}
.utility-bar__edition::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--color-red);
  display: inline-block;
  animation: pulse 1.8s ease-in-out infinite;
}
.utility-bar__date { opacity: 0.85; }
.utility-bar__time { opacity: 0.55; }
.utility-bar__actions {
  display: flex;
  gap: 22px;
  align-items: center;
}
.utility-bar__link {
  opacity: 0.7;
  transition: opacity 0.2s var(--ease-out);
}
.utility-bar__link:hover { opacity: 1; color: var(--color-red); }
.utility-bar__social {
  display: flex;
  gap: 12px;
  padding-left: 22px;
  border-left: 1px solid rgba(255,255,255,0.15);
}
.utility-bar__social-link {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  opacity: 0.7;
  transition: opacity 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.utility-bar__social-link:hover { opacity: 1; color: var(--color-red); }

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
}

/* ============================================================
   BREAKING TICKER
   ============================================================ */
.ticker {
  background: var(--color-red);
  color: #fff;
  overflow: hidden;
  border-bottom: 1px solid var(--color-red-deep);
}
.ticker__inner {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
}
.ticker__label {
  background: var(--color-ink);
  color: #fff;
  padding: 12px 22px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.ticker__label::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 0;
  bottom: 0;
  width: 18px;
  background: var(--color-ink);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.ticker__track {
  display: flex;
  gap: 60px;
  padding: 12px 30px 12px 30px;
  white-space: nowrap;
  animation: marquee 60s linear infinite;
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.04em;
}
.ticker__item { display: inline-flex; align-items: center; gap: 8px; }
.ticker__item::before {
  content: "■";
  font-size: 8px;
  opacity: 0.5;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   SITE HEADER
   ============================================================ */
.site-header {
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-rule);
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header__top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 22px 0 18px;
  gap: 24px;
}
.site-header__weather {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-meta);
  display: flex;
  align-items: center;
  gap: 10px;
}
.site-header__weather-icon {
  font-size: 18px;
  color: var(--color-red);
}
.site-header__weather strong { color: var(--color-ink); font-weight: 600; }

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.brand__logo {
  height: clamp(40px, 4.2vw, 56px);
  width: auto;
  object-fit: contain;
  display: block;
}
.brand__tagline {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-meta);
  padding-top: 8px;
  border-top: 1px solid var(--color-rule);
}

.site-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}
.site-header__search {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border: 1px solid var(--color-rule-strong);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-meta);
  transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.site-header__search:hover {
  border-color: var(--color-ink);
  color: var(--color-ink);
}

.site-header__subscribe {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-ink);
  color: var(--color-paper);
  padding: 12px 22px;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  transition: background 0.2s var(--ease-out);
}
.site-header__subscribe:hover { background: var(--color-red); }
.site-header__subscribe::after {
  content: "→";
  transition: transform 0.2s var(--ease-out);
}
.site-header__subscribe:hover::after { transform: translateX(4px); }

/* Hamburger toggle (desktop hidden) */
.site-header__menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  justify-self: end;
}
.site-header__menu-bars {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-ink);
  transition: transform 0.25s var(--ease-out), opacity 0.2s var(--ease-out);
}

/* ============================================================
   MOBILE MENU DRAWER
   ============================================================ */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  visibility: hidden;
}
.mobile-menu[data-open="true"] {
  pointer-events: auto;
  visibility: visible;
}
.mobile-menu__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 10, 9, 0.4);
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}
.mobile-menu[data-open="true"] .mobile-menu__backdrop { opacity: 1; }

.mobile-menu__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100vw);
  background: var(--color-paper);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.32s var(--ease-out);
  overflow-y: auto;
  box-shadow: -20px 0 40px rgba(11,10,9,0.18);
}
.mobile-menu[data-open="true"] .mobile-menu__panel { transform: translateX(0); }

.mobile-menu__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 24px;
  border-bottom: 1px solid var(--color-rule);
}
.mobile-menu__logo { height: 36px; width: auto; }
.mobile-menu__close {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-rule-strong);
  color: var(--color-ink);
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.mobile-menu__close:hover {
  background: var(--color-ink);
  color: var(--color-paper);
  border-color: var(--color-ink);
}

.mobile-menu__search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--color-rule);
  color: var(--color-meta);
}
.mobile-menu__search input {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 6px 0;
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--color-ink);
}
.mobile-menu__search input:focus { outline: none; }
.mobile-menu__search input::placeholder { color: var(--color-meta); }

.mobile-menu__nav { flex: 1; padding: 8px 0; }
.mobile-menu__list { display: flex; flex-direction: column; }
.mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-rule);
  font-variation-settings: "opsz" 36;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out), padding-left 0.2s var(--ease-out);
}
.mobile-menu__link::after {
  content: "→";
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--color-meta);
  opacity: 0;
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.mobile-menu__link:hover { background: var(--color-paper-warm); padding-left: 32px; }
.mobile-menu__link:hover::after { opacity: 1; color: var(--color-red); }
.mobile-menu__link--active { color: var(--color-red); }
.mobile-menu__link--active::after { content: "•"; opacity: 1; color: var(--color-red); font-size: 18px; }

.mobile-menu__footer {
  padding: 22px 24px 32px;
  border-top: 1px solid var(--color-rule);
  background: var(--color-paper-warm);
}
.mobile-menu__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px;
  background: var(--color-ink);
  color: var(--color-paper);
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  transition: background 0.2s var(--ease-out);
  margin-bottom: 22px;
}
.mobile-menu__cta:hover { background: var(--color-red); }

.mobile-menu__socials {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.mobile-menu__socials a {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-rule-strong);
  color: var(--color-ink);
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.mobile-menu__socials a:hover {
  background: var(--color-red);
  border-color: var(--color-red);
  color: #fff;
}

/* Body lock when open */
body.menu-open { overflow: hidden; }

/* ============================================================
   MAIN NAV
   ============================================================ */
.main-nav {
  border-top: 1px solid var(--color-rule);
}
.main-nav__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}
.main-nav__item {
  position: relative;
}
.main-nav__item + .main-nav__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: var(--color-rule);
}
.main-nav__link {
  display: block;
  padding: 14px 22px;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-ink);
  position: relative;
  transition: color 0.2s var(--ease-out);
}
.main-nav__link::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 8px;
  height: 2px;
  background: var(--color-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease-out);
}
.main-nav__link:hover::after,
.main-nav__link--active::after { transform: scaleX(1); }
.main-nav__link--active { color: var(--color-red); }

/* ============================================================
   PAGE WRAPPER + SECTIONS
   ============================================================ */
.section { padding: 64px 0; position: relative; }
.section--tight { padding: 36px 0; }
.section--paper { background: var(--color-paper-warm); }
.section--ink { background: var(--color-ink); color: var(--color-paper); }

.section-title {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 36px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--color-ink);
}
.section-title__label {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variation-settings: "opsz" 144;
}
.section-title__caption {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-meta);
}
.section-title__caption strong { color: var(--color-red); }
.section-title__link {
  margin-left: auto;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-red);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s var(--ease-out);
}
.section-title__link:hover { gap: 12px; }

/* ============================================================
   KICKER (red category label)
   ============================================================ */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-red);
}
.kicker::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--color-red);
}
.kicker--ink { color: var(--color-ink); }
.kicker--ink::before { background: var(--color-ink); }
.kicker--paper { color: var(--color-paper); }
.kicker--paper::before { background: var(--color-paper); }

/* ============================================================
   LEAD STORY (hero)
   ============================================================ */
.lead {
  padding: 48px 0 64px;
  border-bottom: 1px solid var(--color-rule);
}
.lead__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) 1px minmax(0, 1fr);
  gap: 40px;
}
.lead__rule { background: var(--color-rule); width: 1px; }

.lead__main {
  position: relative;
  animation: rise 1s var(--ease-out) both;
}
.lead__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-ink);
  margin-bottom: 28px;
}
.lead__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(20%) contrast(1.02);
  transition: transform 1.2s var(--ease-out), filter 0.4s var(--ease-out);
}
.lead__media:hover img { transform: scale(1.03); filter: grayscale(0%) contrast(1.05); }
.lead__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(11,10,9,0.5) 100%);
  pointer-events: none;
}
.lead__media-credit {
  position: absolute;
  bottom: 12px;
  right: 14px;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
  z-index: 2;
}

.lead__kicker { margin-bottom: 18px; }
.lead__headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(38px, 4.8vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--color-ink);
  font-variation-settings: "opsz" 144, "SOFT" 0;
  margin-bottom: 20px;
}
.lead__headline a { transition: color 0.2s var(--ease-out); }
.lead__headline a:hover { color: var(--color-red); }
.lead__deck {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.5;
  color: var(--color-ink-soft);
  max-width: 60ch;
  margin-bottom: 24px;
}
.lead__deck::first-letter {
  font-family: var(--font-display);
  font-size: 78px;
  font-weight: 600;
  float: left;
  line-height: 0.85;
  padding: 8px 14px 0 0;
  color: var(--color-red);
  font-variation-settings: "opsz" 144;
}
.lead__byline {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-meta);
  padding-top: 20px;
  border-top: 1px solid var(--color-rule);
}
.lead__byline strong { color: var(--color-ink); font-weight: 600; }
.lead__byline-sep { width: 4px; height: 4px; background: var(--color-meta); border-radius: 50%; }

/* ---------- secondary cluster ---------- */
.lead__secondary {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.lead__secondary > .secondary-story:not(:last-child) {
  padding-bottom: 28px;
  border-bottom: 1px solid var(--color-rule);
}

.secondary-story {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  animation: rise 1s 0.2s var(--ease-out) both;
}
.secondary-story--with-image {
  grid-template-columns: 1.2fr 1fr;
  gap: 18px;
  align-items: start;
}
.secondary-story__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-ink);
}
.secondary-story__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(15%);
  transition: transform 0.8s var(--ease-out);
}
.secondary-story:hover .secondary-story__media img { transform: scale(1.05); }

.secondary-story__kicker { margin-bottom: 6px; }
.secondary-story__headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  font-variation-settings: "opsz" 36;
}
.secondary-story__headline a { transition: color 0.2s var(--ease-out); }
.secondary-story__headline a:hover { color: var(--color-red); }
.secondary-story__meta {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-meta);
  margin-top: 6px;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   CATEGORY RIBBON
   ============================================================ */
.category-ribbon {
  background: var(--color-paper-warm);
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  padding: 20px 0;
}
.category-ribbon__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  overflow-x: auto;
  scrollbar-width: none;
}
.category-ribbon__inner::-webkit-scrollbar { display: none; }
.category-ribbon__label {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-meta);
  flex-shrink: 0;
  padding-right: 20px;
  border-right: 1px solid var(--color-rule-strong);
}
.category-ribbon__list {
  display: flex;
  gap: 26px;
  flex-shrink: 0;
}
.category-ribbon__link {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--color-ink);
  white-space: nowrap;
  position: relative;
  transition: color 0.2s var(--ease-out);
}
.category-ribbon__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--color-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease-out);
}
.category-ribbon__link:hover { color: var(--color-red); }
.category-ribbon__link:hover::after { transform: scaleX(1); }

/* ============================================================
   NEWS GRID
   ============================================================ */
.news-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 32px 28px;
}

.news-card {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  position: relative;
  animation: rise 0.8s var(--ease-out) both;
}
.news-card--wide  { grid-column: span 6; }
.news-card--lead  { grid-column: span 8; }
.news-card--inset { grid-column: span 4; padding-left: 28px; border-left: 1px solid var(--color-rule); }
.news-card--text  { grid-column: span 4; }

.news-card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  margin-bottom: 16px;
  background: var(--color-ink);
}
.news-card--lead .news-card__media { aspect-ratio: 16 / 9; }
.news-card--wide .news-card__media { aspect-ratio: 3 / 2; }
.news-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(15%);
  transition: transform 0.8s var(--ease-out), filter 0.4s var(--ease-out);
}
.news-card:hover .news-card__media img { transform: scale(1.04); filter: grayscale(0); }

.news-card__kicker { margin-bottom: 10px; }
.news-card__headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  font-variation-settings: "opsz" 36;
  margin-bottom: 10px;
}
.news-card--lead .news-card__headline {
  font-size: 36px;
  letter-spacing: -0.022em;
  line-height: 1.05;
  font-variation-settings: "opsz" 96;
}
.news-card--wide .news-card__headline { font-size: 26px; }
.news-card__headline a { transition: color 0.2s var(--ease-out); }
.news-card__headline a:hover { color: var(--color-red); }

.news-card__deck {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--color-meta);
  margin-bottom: 14px;
}
.news-card--lead .news-card__deck { font-size: 17px; color: var(--color-ink-soft); }

.news-card__meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-meta);
  padding-top: 12px;
  border-top: 1px solid var(--color-rule);
}
.news-card__meta strong { color: var(--color-ink); font-weight: 600; }

/* ============================================================
   HIGHLIGHT STRIP
   ============================================================ */
.highlight {
  background: var(--color-ink);
  color: var(--color-paper);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.highlight::before {
  content: "DESTAQUE";
  position: absolute;
  top: 50%;
  right: -20px;
  font-family: var(--font-display);
  font-size: clamp(160px, 22vw, 360px);
  font-weight: 600;
  color: rgba(255,255,255,0.04);
  letter-spacing: -0.04em;
  line-height: 0.85;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: right center;
  pointer-events: none;
}
.highlight__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.highlight__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 4px solid var(--color-red);
}
.highlight__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(50%) contrast(1.05);
  transition: transform 1s var(--ease-out), filter 0.4s var(--ease-out);
}
.highlight__media:hover img { transform: scale(1.04); filter: grayscale(0); }

.highlight__kicker { margin-bottom: 18px; }
.highlight__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 4.2vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: var(--color-paper);
  font-variation-settings: "opsz" 144;
  margin-bottom: 22px;
}
.highlight__title em { color: var(--color-red); font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 30; }
.highlight__deck {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  color: rgba(252,251,248,0.78);
  margin-bottom: 26px;
  max-width: 56ch;
}
.highlight__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 26px;
  background: var(--color-red);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  transition: background 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.highlight__cta::after {
  content: "→";
  font-size: 14px;
  transition: transform 0.2s var(--ease-out);
}
.highlight__cta:hover { background: var(--color-red-deep); }
.highlight__cta:hover::after { transform: translateX(6px); }

/* ============================================================
   MAIN + SIDEBAR LAYOUT
   ============================================================ */
.feed {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 60px;
}
.feed__main { min-width: 0; }
.feed__side {
  position: sticky;
  top: 140px;
  align-self: start;
  min-width: 0;
}

/* ============================================================
   ARTICLE LIST (Latest news in feed)
   ============================================================ */
.article-list { display: flex; flex-direction: column; }
.article-list__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 28px;
  padding: 28px 0;
  border-bottom: 1px solid var(--color-rule);
  align-items: start;
}
.article-list__item:first-child { padding-top: 0; }
.article-list__item:last-child  { border-bottom: 0; }

.article-list__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-ink);
}
.article-list__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out);
}
.article-list__item:hover .article-list__media img { transform: scale(1.04); }

.article-list__kicker { margin-bottom: 10px; }
.article-list__headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.18;
  letter-spacing: -0.018em;
  color: var(--color-ink);
  font-variation-settings: "opsz" 36;
  margin-bottom: 8px;
}
.article-list__headline a { transition: color 0.2s var(--ease-out); }
.article-list__headline a:hover { color: var(--color-red); }
.article-list__deck {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--color-meta);
  margin-bottom: 12px;
  max-width: 60ch;
}
.article-list__meta {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-meta);
  display: flex;
  gap: 14px;
  align-items: center;
}
.article-list__meta strong { color: var(--color-ink); font-weight: 600; }

/* ============================================================
   MOST READ (sidebar)
   ============================================================ */
.module {
  padding: 24px;
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  margin-bottom: 28px;
}
.module--ink {
  background: var(--color-ink);
  color: var(--color-paper);
  border-color: var(--color-ink);
}
.module--red {
  background: var(--color-red);
  color: #fff;
  border-color: var(--color-red);
}
.module__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.015em;
  line-height: 1;
  margin-bottom: 6px;
  font-variation-settings: "opsz" 96;
}
.module__caption {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-meta);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--color-rule);
  margin-bottom: 18px;
}
.module--ink .module__caption { color: rgba(252,251,248,0.5); border-bottom-color: rgba(252,251,248,0.15); }
.module--red .module__caption { color: rgba(255,255,255,0.7); border-bottom-color: rgba(255,255,255,0.18); }

/* Most-read ranked list */
.ranked { display: flex; flex-direction: column; }
.ranked__item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-rule);
  align-items: start;
}
.ranked__item:last-child { border-bottom: 0; }
.ranked__number {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 38px;
  line-height: 0.9;
  color: var(--color-red);
  letter-spacing: -0.04em;
  font-variation-settings: "opsz" 144;
}
.ranked__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ranked__kicker {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-meta);
  font-weight: 600;
}
.ranked__headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15.5px;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--color-ink);
  font-variation-settings: "opsz" 18;
}
.ranked__headline a { transition: color 0.2s var(--ease-out); }
.ranked__headline a:hover { color: var(--color-red); }

/* ============================================================
   TAGS CLOUD
   ============================================================ */
.tags-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-ink);
  border: 1px solid var(--color-rule-strong);
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.tag::before { content: "#"; color: var(--color-red); font-weight: 700; }
.tag:hover {
  background: var(--color-ink);
  color: var(--color-paper);
  border-color: var(--color-ink);
}
.tag:hover::before { color: var(--color-red); }
.tag--solid {
  background: var(--color-ink);
  color: var(--color-paper);
  border-color: var(--color-ink);
}
.tag--solid:hover {
  background: var(--color-red);
  border-color: var(--color-red);
}

/* ============================================================
   NEWSLETTER MODULE
   ============================================================ */
.newsletter {
  padding: 28px;
  background: var(--color-red);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.newsletter::before {
  content: "LEX";
  position: absolute;
  top: -30px;
  right: -10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 200px;
  color: rgba(255,255,255,0.08);
  letter-spacing: -0.05em;
  line-height: 1;
  pointer-events: none;
}
.newsletter__kicker {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.9;
  margin-bottom: 14px;
  position: relative;
}
.newsletter__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  position: relative;
  font-variation-settings: "opsz" 96, "SOFT" 0;
}
.newsletter__title em {
  font-style: italic;
  font-variation-settings: "opsz" 96, "SOFT" 50;
}
.newsletter__deck {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.5;
  opacity: 0.92;
  margin-bottom: 20px;
  position: relative;
}
.newsletter__form {
  display: flex;
  gap: 0;
  position: relative;
}
.newsletter__input {
  flex: 1;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.3);
  padding: 12px 14px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: #fff;
  letter-spacing: 0.02em;
}
.newsletter__input::placeholder { color: rgba(255,255,255,0.65); }
.newsletter__input:focus { outline: none; border-color: #fff; background: rgba(255,255,255,0.18); }
.newsletter__submit {
  background: var(--color-ink);
  color: #fff;
  padding: 12px 18px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  transition: background 0.2s var(--ease-out);
}
.newsletter__submit:hover { background: #fff; color: var(--color-red); }

/* ============================================================
   OPINION SECTION
   ============================================================ */
.opinion {
  background: var(--color-paper-warm);
  padding: 80px 0;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}
.opinion__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.opinion__column {
  padding: 32px;
  border-right: 1px solid var(--color-rule);
  position: relative;
}
.opinion__column:last-child { border-right: 0; }
.opinion__column:first-child { padding-left: 0; }
.opinion__column:last-child { padding-right: 0; }

.opinion__author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--color-rule);
}
.opinion__avatar {
  width: 64px;
  height: 64px;
  background: var(--color-ink);
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 50%;
}
.opinion__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(35%) contrast(1.05);
}
.opinion__author-info { display: flex; flex-direction: column; gap: 2px; }
.opinion__author-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 36;
}
.opinion__author-role {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-meta);
}
.opinion__quote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--color-ink);
  margin-bottom: 16px;
  font-variation-settings: "opsz" 48;
  position: relative;
}
.opinion__quote::before {
  content: "“";
  font-size: 60px;
  line-height: 0;
  vertical-align: -20px;
  color: var(--color-red);
  font-family: var(--font-display);
  margin-right: 4px;
}
.opinion__cta {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-red);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap 0.2s var(--ease-out);
}
.opinion__cta::after { content: "→"; }
.opinion__cta:hover { gap: 14px; }

/* ============================================================
   CATEGORY GRID
   ============================================================ */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--color-rule);
  border: 1px solid var(--color-rule);
}
.cat-grid__item {
  background: var(--color-paper);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background 0.2s var(--ease-out);
  position: relative;
  overflow: hidden;
}
.cat-grid__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}
.cat-grid__item:hover::before { transform: scaleX(1); }
.cat-grid__item:hover { background: var(--color-paper-warm); }

.cat-grid__count {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 42px;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--color-red);
  font-variation-settings: "opsz" 144;
}
.cat-grid__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  font-variation-settings: "opsz" 36;
}
.cat-grid__desc {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-meta);
}
.cat-grid__more {
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cat-grid__more::after { content: "→"; transition: transform 0.2s var(--ease-out); }
.cat-grid__item:hover .cat-grid__more::after { transform: translateX(4px); color: var(--color-red); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--color-ink);
  color: var(--color-paper);
  padding: 72px 0 0;
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-red);
}

.footer-cta {
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(252,251,248,0.12);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 80px;
  align-items: end;
}
.footer-cta__lead {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-variation-settings: "opsz" 144;
}
.footer-cta__lead em {
  color: var(--color-red);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 40;
}
.footer-cta__form { display: flex; gap: 0; }
.footer-cta__input {
  flex: 1;
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--color-paper);
  padding: 12px 0;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--color-paper);
  letter-spacing: 0.04em;
}
.footer-cta__input::placeholder { color: rgba(252,251,248,0.5); }
.footer-cta__input:focus { outline: none; border-bottom-color: var(--color-red); }
.footer-cta__submit {
  background: var(--color-red);
  color: #fff;
  padding: 14px 22px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  transition: background 0.2s var(--ease-out);
  margin-left: 12px;
}
.footer-cta__submit:hover { background: var(--color-paper); color: var(--color-red); }

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 3fr);
  gap: 80px;
  padding: 60px 0;
}
.footer-col__list.footer-col__list--multi {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  flex-direction: row;
  gap: 10px 48px;
}
.footer-col__brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.footer-col__logo {
  width: 140px;
  height: auto;
}
.footer-col__desc {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: rgba(252,251,248,0.7);
  max-width: 36ch;
}
.footer-col__members {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
  padding: 18px 0;
  border-top: 1px solid rgba(252,251,248,0.12);
  border-bottom: 1px solid rgba(252,251,248,0.12);
}
.footer-col__members-link {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(252,251,248,0.85);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s var(--ease-out), gap 0.2s var(--ease-out);
}
.footer-col__members-link:hover { color: var(--color-red); gap: 12px; }
.footer-col__members-link--cta { color: var(--color-red); font-weight: 700; letter-spacing: 0.14em; }
.footer-col__members-link--cta:hover { color: var(--color-paper); }

.footer-col__socials {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.footer-col__social {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(252,251,248,0.2);
  transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.footer-col__social:hover {
  background: var(--color-red);
  border-color: var(--color-red);
  color: #fff;
}

.footer-col__title {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-red);
  font-weight: 700;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(252,251,248,0.18);
}
.footer-col__list { display: flex; flex-direction: column; gap: 10px; }
.footer-col__link {
  font-family: var(--font-body);
  font-size: 15px;
  color: rgba(252,251,248,0.78);
  transition: color 0.2s var(--ease-out), padding-left 0.2s var(--ease-out);
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.footer-col__link:hover {
  color: var(--color-paper);
  padding-left: 8px;
}

.footer-bottom {
  border-top: 1px solid rgba(252,251,248,0.12);
  padding: 24px 0 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(252,251,248,0.55);
}
.footer-bottom__credit strong { color: var(--color-paper); }
.footer-bottom__credit em { color: var(--color-red); font-style: normal; }
.footer-bottom__links { display: flex; gap: 24px; align-items: center; }
.footer-bottom__links a:hover { color: var(--color-red); }
.footer-bottom__elleven {
  display: inline-flex;
  align-items: center;
  opacity: 0.65;
  transition: opacity 0.2s var(--ease-out);
}
.footer-bottom__elleven img {
  height: 12px;
  width: auto;
  display: block;
}
.footer-bottom__elleven:hover { opacity: 1; }

/* ============================================================
   ARTICLE (single news page)
   ============================================================ */
.article {
  padding: 0 0 80px;
  background: var(--color-paper);
}

/* Breadcrumb */
.article__breadcrumb {
  padding: 22px 0 18px;
  border-bottom: 1px solid var(--color-rule);
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-meta);
}
.article__breadcrumb a {
  color: var(--color-meta);
  transition: color 0.2s var(--ease-out);
}
.article__breadcrumb a:hover { color: var(--color-red); }
.article__breadcrumb-sep { padding: 0 10px; color: var(--color-rule-strong); }
.article__breadcrumb-current { color: var(--color-ink); font-weight: 600; }

/* Header */
.article__head {
  padding: 56px 0 40px;
  border-bottom: 1px solid var(--color-rule);
}
.article__head-inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: left;
}
.article__kicker { margin-bottom: 22px; }
.article__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--color-ink);
  font-variation-settings: "opsz" 144, "SOFT" 0;
  margin-bottom: 24px;
}
.article__title em {
  color: var(--color-red);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 40;
}
.article__deck {
  font-family: var(--font-body);
  font-size: 22px;
  line-height: 1.45;
  color: var(--color-ink-soft);
  max-width: 60ch;
  margin-bottom: 36px;
  font-weight: 400;
}

/* Byline row */
.article__byline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 24px;
  padding-top: 26px;
  border-top: 1px solid var(--color-rule);
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-meta);
}
.article__byline-author {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.article__byline-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-ink);
  flex-shrink: 0;
}
.article__byline-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(25%);
}
.article__byline-name { color: var(--color-ink); font-weight: 600; font-size: 13px; }
.article__byline-role { color: var(--color-meta); font-size: 11px; display: block; margin-top: 2px; }
.article__byline-sep { width: 4px; height: 4px; background: var(--color-meta); border-radius: 50%; opacity: 0.7; }
.article__byline-share {
  margin-left: auto;
  display: inline-flex;
  gap: 8px;
}
.article__share-btn {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-rule-strong);
  color: var(--color-ink);
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.article__share-btn:hover {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-paper);
}

/* Cover image */
.article__cover {
  margin: 48px 0 28px;
}
.article__cover-figure {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-ink);
}
.article__cover-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(15%) contrast(1.02);
}
.article__cover-caption {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-meta);
  padding-top: 12px;
  border-bottom: 1px solid var(--color-rule);
  padding-bottom: 12px;
  display: flex;
  gap: 14px;
  align-items: baseline;
}
.article__cover-caption-label {
  font-weight: 700;
  color: var(--color-ink);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 10px;
  flex-shrink: 0;
}

/* Body */
.article__body {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 0 8px;
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.65;
  color: var(--color-ink);
  font-variation-settings: "opsz" 18;
}
.article__body p {
  margin: 0 0 22px;
}
.article__body p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-size: 88px;
  font-weight: 600;
  float: left;
  line-height: 0.85;
  padding: 10px 16px 0 0;
  color: var(--color-red);
  font-variation-settings: "opsz" 144;
}
.article__body p strong { color: var(--color-ink); font-weight: 600; }
.article__body p em { font-style: italic; }
.article__body a {
  color: var(--color-red);
  border-bottom: 1px solid currentColor;
  transition: opacity 0.2s var(--ease-out);
}
.article__body a:hover { opacity: 0.7; }

.article__body h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.018em;
  margin: 44px 0 18px;
  color: var(--color-ink);
  font-variation-settings: "opsz" 48;
}
.article__body h2::before {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  background: var(--color-red);
  margin-bottom: 16px;
}
.article__body h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.012em;
  margin: 32px 0 14px;
  color: var(--color-ink);
}

.article__body ol,
.article__body ul {
  margin: 0 0 28px;
  padding-left: 0;
  list-style: none;
}
.article__body ol { counter-reset: list; }
.article__body ol li {
  position: relative;
  padding: 16px 0 16px 56px;
  border-bottom: 1px solid var(--color-rule);
  counter-increment: list;
}
.article__body ol li:first-child { border-top: 1px solid var(--color-rule); }
.article__body ol li::before {
  content: counter(list, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  color: var(--color-red);
  font-variation-settings: "opsz" 36;
  letter-spacing: -0.02em;
}
.article__body ul li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
}
.article__body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 14px;
  height: 2px;
  background: var(--color-red);
}

/* Pull quote — wider than body */
.article__pullquote {
  max-width: 920px;
  margin: 48px auto;
  padding: 0 8px;
  position: relative;
}
.article__pullquote blockquote {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.18;
  letter-spacing: -0.018em;
  color: var(--color-ink);
  margin: 0 0 18px;
  font-variation-settings: "opsz" 144, "SOFT" 40;
  position: relative;
  padding-left: 36px;
  border-left: 4px solid var(--color-red);
}
.article__pullquote blockquote::before {
  content: "“";
  position: absolute;
  left: 16px;
  top: -28px;
  font-size: 110px;
  line-height: 1;
  color: var(--color-red);
  font-style: normal;
  font-family: var(--font-display);
}
.article__pullquote-cite {
  display: block;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-meta);
  padding-left: 40px;
}
.article__pullquote-cite strong { color: var(--color-ink); font-weight: 600; }

/* Inline image */
.article__inline-image {
  max-width: 920px;
  margin: 44px auto;
}
.article__inline-image img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: grayscale(15%);
}
.article__inline-image figcaption {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-meta);
  padding-top: 10px;
  border-top: 1px solid var(--color-rule);
  margin-top: 10px;
}

/* Tags row */
.article__tags-row {
  max-width: 720px;
  margin: 48px auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--color-rule);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.article__tags-row-label {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-meta);
  font-weight: 600;
}

/* End-of-article share + meta */
.article__foot {
  max-width: 720px;
  margin: 36px auto 0;
  padding: 28px 0;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-meta);
}
.article__foot strong { color: var(--color-ink); font-weight: 600; }
.article__foot-share { display: inline-flex; gap: 8px; }

/* Author bio card */
.article__author-card {
  max-width: 720px;
  margin: 56px auto 0;
  padding: 36px;
  background: var(--color-paper-warm);
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 26px;
  align-items: start;
  border-left: 4px solid var(--color-red);
}
.article__author-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-ink);
}
.article__author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(20%);
}
.article__author-kicker {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-red);
  font-weight: 700;
  margin-bottom: 8px;
}
.article__author-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  letter-spacing: -0.018em;
  margin-bottom: 6px;
  color: var(--color-ink);
  font-variation-settings: "opsz" 48;
}
.article__author-role {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-meta);
  margin-bottom: 14px;
}
.article__author-bio {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--color-ink-soft);
  margin-bottom: 14px;
  max-width: 56ch;
}
.article__author-link {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-red);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap 0.2s var(--ease-out);
}
.article__author-link::after { content: "→"; }
.article__author-link:hover { gap: 14px; }

/* Related */
.related-section {
  padding: 80px 0 0;
  background: var(--color-paper);
  border-top: 1px solid var(--color-rule);
}

/* ============================================================
   LISTING (category / tag archive)
   ============================================================ */
.listing { padding: 0 0 80px; }

.listing__header {
  padding: 68px 0 56px;
  position: relative;
  overflow: hidden;
}
.listing__header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-paper-warm);
  z-index: -1;
}

.listing__header-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 80px;
  align-items: end;
}

.listing__kicker { margin-bottom: 24px; }

.listing__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(64px, 9vw, 144px);
  line-height: 0.88;
  letter-spacing: -0.04em;
  color: var(--color-ink);
  font-variation-settings: "opsz" 144;
  margin-bottom: 28px;
}
.listing__title em {
  color: var(--color-red);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 40;
}
.listing__title--tag::before {
  content: "#";
  color: var(--color-red);
  margin-right: 0.05em;
}

.listing__desc {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.55;
  color: var(--color-ink-soft);
  max-width: 88ch;
}

.listing__stats {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.listing__stat {
  padding: 18px 0;
  border-top: 1px solid var(--color-rule-strong);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 22px;
}
.listing__stat:last-child { border-bottom: 1px solid var(--color-rule-strong); }
.listing__stat-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 42px;
  line-height: 1;
  color: var(--color-red);
  letter-spacing: -0.03em;
  font-variation-settings: "opsz" 144;
}
.listing__stat-label {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-meta);
  font-weight: 600;
}
.listing__stat-label strong { display: block; color: var(--color-ink); font-size: 13px; letter-spacing: 0.06em; margin-bottom: 2px; }

.listing__subcats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--color-rule);
}
.listing__subcats-label {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-meta);
  font-weight: 600;
  margin-right: 8px;
  align-self: center;
}

/* Filter bar */
.filter-bar {
  background: var(--color-ink);
  color: var(--color-paper);
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  padding: 16px 0;
}
.filter-bar__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 32px;
}
.filter-bar__group {
  display: flex;
  align-items: center;
  gap: 14px;
}
.filter-bar__label {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(252,251,248,0.5);
  font-weight: 600;
}
.filter-bar__list { display: flex; gap: 2px; }
.filter-bar__item {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-paper);
  padding: 6px 12px;
  transition: color 0.2s var(--ease-out), background 0.2s var(--ease-out);
  border: 1px solid transparent;
}
.filter-bar__item--active {
  color: var(--color-red);
  border-color: var(--color-red);
  font-weight: 700;
}
.filter-bar__item:hover { color: var(--color-red); }
.filter-bar__count {
  margin-left: auto;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(252,251,248,0.6);
}
.filter-bar__count strong { color: var(--color-paper); font-weight: 600; }

/* Listing featured (big intro article) */
.listing__featured {
  padding: 56px 0 48px;
  border-bottom: 1px solid var(--color-rule);
}
.listing__featured-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
  align-items: center;
}
.listing__featured-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-ink);
  position: relative;
}
.listing__featured-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(20%) contrast(1.03);
  transition: transform 1s var(--ease-out);
}
.listing__featured-media:hover img { transform: scale(1.03); }
.listing__featured-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--color-red);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 6px 12px;
  z-index: 1;
}
.listing__featured-headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--color-ink);
  font-variation-settings: "opsz" 96;
  margin-bottom: 18px;
}
.listing__featured-headline a:hover { color: var(--color-red); }
.listing__featured-deck {
  font-family: var(--font-body);
  font-size: 17.5px;
  line-height: 1.55;
  color: var(--color-ink-soft);
  margin-bottom: 22px;
  max-width: 50ch;
}
.listing__featured-byline {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-meta);
  padding-top: 16px;
  border-top: 1px solid var(--color-rule);
  display: flex;
  gap: 12px;
  align-items: center;
}
.listing__featured-byline strong { color: var(--color-ink); font-weight: 600; }
.listing__featured-byline-sep { width: 3px; height: 3px; background: var(--color-meta); border-radius: 50%; }

/* Section heading inside listing */
.listing__section-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 30px;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  font-variation-settings: "opsz" 96;
  margin-bottom: 32px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--color-ink);
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.listing__section-title small {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-meta);
  font-weight: 600;
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 60px 0 0;
  padding-top: 40px;
  border-top: 1px solid var(--color-rule);
  flex-wrap: wrap;
}
.pagination__item {
  min-width: 44px;
  height: 44px;
  padding: 0 8px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  color: var(--color-ink);
  border: 1px solid transparent;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
  font-variation-settings: "opsz" 18;
}
.pagination__item:hover { border-color: var(--color-ink); }
.pagination__item--current {
  background: var(--color-ink);
  color: var(--color-paper);
  border-color: var(--color-ink);
}
.pagination__item--ellipsis {
  color: var(--color-meta);
  pointer-events: none;
}
.pagination__arrow {
  height: 44px;
  padding: 0 20px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--color-rule-strong);
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.pagination__arrow--prev { margin-right: 18px; }
.pagination__arrow--next { margin-left: 18px; }
.pagination__arrow:hover {
  background: var(--color-ink);
  color: var(--color-paper);
  border-color: var(--color-ink);
}
.pagination__arrow--disabled { opacity: 0.35; pointer-events: none; }
.pagination__summary {
  text-align: center;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-meta);
  margin-top: 24px;
}
.pagination__summary strong { color: var(--color-ink); font-weight: 600; }

/* ============================================================
   MEMBROS LEXPRIME (list of VIP members)
   ============================================================ */
.members-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--color-rule);
  border: 1px solid var(--color-rule);
}
.member-card {
  background: var(--color-paper);
  padding: 28px;
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  position: relative;
  transition: background 0.2s var(--ease-out);
}
.member-card:hover { background: var(--color-paper-warm); }
.member-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 0;
  background: var(--color-red);
  transition: height 0.3s var(--ease-out);
}
.member-card:hover::before { height: 100%; }
.member-card__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-ink);
  flex-shrink: 0;
}
.member-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(35%) contrast(1.05);
  transition: filter 0.4s var(--ease-out);
}
.member-card:hover .member-card__avatar img { filter: grayscale(0%); }
.member-card__body { min-width: 0; }
.member-card__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  font-variation-settings: "opsz" 36;
  margin-bottom: 6px;
}
.member-card__name a:hover { color: var(--color-red); }
.member-card__role {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-red);
  font-weight: 600;
  margin-bottom: 10px;
}
.member-card__bio {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-meta);
  margin-bottom: 12px;
}
.member-card__meta {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-meta);
  display: flex;
  gap: 12px;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid var(--color-rule);
}
.member-card__meta strong { color: var(--color-ink); font-weight: 600; }

/* Members CTA strip */
.members-cta {
  margin-top: 56px;
  padding: 48px;
  background: var(--color-ink);
  color: var(--color-paper);
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) auto;
  gap: 40px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.members-cta::before {
  content: "+";
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: 360px;
  font-weight: 600;
  line-height: 0.7;
  color: rgba(205, 0, 0, 0.08);
  pointer-events: none;
}
.members-cta__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-paper);
  font-variation-settings: "opsz" 96;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}
.members-cta__title em {
  color: var(--color-red);
  font-style: italic;
  font-variation-settings: "opsz" 96, "SOFT" 40;
}
.members-cta__desc {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: rgba(252,251,248,0.78);
  max-width: 50ch;
  position: relative;
  z-index: 1;
}
.members-cta__btn {
  background: var(--color-red);
  color: #fff;
  padding: 18px 30px;
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: background 0.2s var(--ease-out);
  position: relative;
  z-index: 1;
  white-space: nowrap;
}
.members-cta__btn:hover { background: var(--color-red-deep); }
.members-cta__btn::after { content: "→"; transition: transform 0.2s var(--ease-out); }
.members-cta__btn:hover::after { transform: translateX(6px); }

/* ============================================================
   OFFER (seja-membro sales page)
   ============================================================ */
.offer-hero {
  background: var(--color-ink);
  color: var(--color-paper);
  padding: 96px 0 88px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(252,251,248,0.1);
}
.offer-hero::before {
  content: "M";
  position: absolute;
  top: -80px;
  right: -50px;
  font-family: var(--font-display);
  font-size: 720px;
  font-weight: 600;
  color: rgba(205, 0, 0, 0.06);
  line-height: 0.8;
  font-variation-settings: "opsz" 144;
  pointer-events: none;
}
.offer-hero__inner {
  max-width: 920px;
  position: relative;
  z-index: 1;
}
.offer-hero__kicker { margin-bottom: 28px; }
.offer-hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(48px, 6.2vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.034em;
  color: var(--color-paper);
  font-variation-settings: "opsz" 144;
  margin-bottom: 30px;
}
.offer-hero__title em {
  color: var(--color-red);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 40;
}
.offer-hero__deck {
  font-family: var(--font-body);
  font-size: 22px;
  line-height: 1.5;
  color: rgba(252,251,248,0.82);
  max-width: 62ch;
  margin-bottom: 40px;
}
.offer-hero__actions {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.offer-hero__cta {
  background: var(--color-red);
  color: #fff;
  padding: 20px 36px;
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  transition: background 0.2s var(--ease-out);
}
.offer-hero__cta::after { content: "→"; transition: transform 0.2s var(--ease-out); }
.offer-hero__cta:hover { background: var(--color-red-deep); }
.offer-hero__cta:hover::after { transform: translateX(6px); }
.offer-hero__price {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(252,251,248,0.6);
}
.offer-hero__price strong { color: var(--color-paper); font-weight: 600; }

/* Benefits */
.offer-benefits {
  padding: 88px 0;
  border-bottom: 1px solid var(--color-rule);
}
.offer-benefits__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--color-ink);
  font-variation-settings: "opsz" 144;
  margin-bottom: 16px;
  max-width: 18ch;
}
.offer-benefits__lead {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.55;
  color: var(--color-ink-soft);
  max-width: 60ch;
  margin-bottom: 60px;
}
.offer-benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 2px solid var(--color-ink);
}
.benefit-card {
  padding: 36px 32px 36px 0;
  border-right: 1px solid var(--color-rule);
  position: relative;
}
.benefit-card:nth-child(3n) { border-right: 0; padding-right: 0; }
.benefit-card:not(:first-child) { padding-left: 32px; }
.benefit-card__number {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 56px;
  line-height: 1;
  color: var(--color-red);
  letter-spacing: -0.03em;
  font-variation-settings: "opsz" 144;
  margin-bottom: 22px;
}
.benefit-card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  margin-bottom: 12px;
  font-variation-settings: "opsz" 48;
}
.benefit-card__desc {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--color-meta);
}

/* Stats strip */
.offer-stats {
  background: var(--color-paper-warm);
  padding: 64px 0;
  border-bottom: 1px solid var(--color-rule);
}
.offer-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.offer-stats__item {
  padding: 16px 32px;
  border-right: 1px solid var(--color-rule-strong);
}
.offer-stats__item:first-child { padding-left: 0; }
.offer-stats__item:last-child { border-right: 0; padding-right: 0; }
.offer-stats__value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 56px;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--color-ink);
  font-variation-settings: "opsz" 144;
  margin-bottom: 10px;
}
.offer-stats__label {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-meta);
  font-weight: 600;
}

/* Pricing */
.offer-pricing {
  padding: 96px 0;
  border-bottom: 1px solid var(--color-rule);
}
.offer-pricing__intro {
  text-align: center;
  margin-bottom: 56px;
}
.offer-pricing__kicker { margin-bottom: 18px; display: inline-flex; }
.offer-pricing__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 4vw, 52px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--color-ink);
  font-variation-settings: "opsz" 144;
  max-width: 22ch;
  margin: 0 auto 18px;
}
.offer-pricing__sub {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-meta);
  max-width: 56ch;
  margin: 0 auto;
}

.price-card {
  max-width: 680px;
  margin: 0 auto;
  background: var(--color-paper);
  border: 2px solid var(--color-ink);
  padding: 0;
  position: relative;
  overflow: hidden;
}
.price-card__head {
  background: var(--color-ink);
  color: var(--color-paper);
  padding: 30px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.price-card__plan {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(252,251,248,0.7);
  font-weight: 700;
}
.price-card__badge {
  background: var(--color-red);
  color: #fff;
  padding: 5px 12px;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
}
.price-card__body {
  padding: 40px;
}
.price-card__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.price-card__currency {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--color-meta);
  font-weight: 500;
}
.price-card__value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 96px;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--color-ink);
  font-variation-settings: "opsz" 144;
}
.price-card__period {
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-meta);
  font-weight: 600;
}
.price-card__alt {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-meta);
  margin-bottom: 30px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-rule);
}
.price-card__alt strong { color: var(--color-red); font-weight: 600; }
.price-card__features {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 32px;
}
.price-card__feature {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.45;
  color: var(--color-ink);
}
.price-card__feature::before {
  content: "✓";
  color: var(--color-red);
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.price-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  padding: 20px;
  background: var(--color-red);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  transition: background 0.2s var(--ease-out);
}
.price-card__cta::after { content: "→"; transition: transform 0.2s var(--ease-out); }
.price-card__cta:hover { background: var(--color-red-deep); }
.price-card__cta:hover::after { transform: translateX(6px); }
.price-card__guarantee {
  text-align: center;
  margin-top: 18px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-meta);
}

/* Testimonials */
.offer-testimonials {
  background: var(--color-paper-warm);
  padding: 88px 0;
  border-bottom: 1px solid var(--color-rule);
}
.offer-testimonials__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 4vw, 44px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--color-ink);
  font-variation-settings: "opsz" 144;
  margin-bottom: 48px;
  max-width: 20ch;
}
.offer-testimonials__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
}
.testimonial {
  border-top: 2px solid var(--color-ink);
  padding-top: 26px;
}
.testimonial__quote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--color-ink);
  margin-bottom: 24px;
  font-variation-settings: "opsz" 48;
  position: relative;
}
.testimonial__quote::before {
  content: "“";
  color: var(--color-red);
  font-size: 56px;
  line-height: 0;
  vertical-align: -18px;
  margin-right: 6px;
}
.testimonial__author {
  display: flex;
  align-items: center;
  gap: 14px;
}
.testimonial__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-ink);
}
.testimonial__avatar img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(25%); }
.testimonial__author-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  color: var(--color-ink);
  display: block;
  font-variation-settings: "opsz" 36;
}
.testimonial__author-role {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-meta);
  display: block;
  margin-top: 3px;
}

/* FAQ */
.offer-faq {
  padding: 88px 0;
  border-bottom: 1px solid var(--color-rule);
}
.offer-faq__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 80px;
  align-items: start;
}
.offer-faq__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 3.6vw, 44px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--color-ink);
  font-variation-settings: "opsz" 144;
  margin-bottom: 18px;
}
.offer-faq__sub {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-meta);
  margin-bottom: 24px;
}
.offer-faq__contact {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-red);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.offer-faq__contact::after { content: "→"; }

.faq-list { border-top: 1px solid var(--color-rule); }
.faq-item {
  border-bottom: 1px solid var(--color-rule);
}
.faq-item__q {
  width: 100%;
  text-align: left;
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  cursor: pointer;
  font-variation-settings: "opsz" 36;
}
.faq-item__q::after {
  content: "+";
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--color-red);
  line-height: 0.5;
  transition: transform 0.25s var(--ease-out);
}
.faq-item[open] .faq-item__q::after { content: "−"; }
.faq-item__a {
  padding: 0 60px 22px 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-meta);
}

/* Final CTA */
.offer-final {
  background: var(--color-red);
  color: #fff;
  padding: 88px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.offer-final::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.06) 0%, transparent 40%), radial-gradient(circle at 80% 80%, rgba(0,0,0,0.15) 0%, transparent 40%);
  pointer-events: none;
}
.offer-final__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #fff;
  font-variation-settings: "opsz" 144;
  margin-bottom: 24px;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.offer-final__title em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 50;
}
.offer-final__sub {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.5;
  color: rgba(255,255,255,0.85);
  max-width: 56ch;
  margin: 0 auto 36px;
  position: relative;
}
.offer-final__btn {
  background: var(--color-ink);
  color: #fff;
  padding: 20px 40px;
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  transition: background 0.2s var(--ease-out);
  position: relative;
}
.offer-final__btn::after { content: "→"; transition: transform 0.2s var(--ease-out); }
.offer-final__btn:hover { background: #fff; color: var(--color-red); }
.offer-final__btn:hover::after { transform: translateX(6px); }

/* ============================================================
   AUTHOR PAGE
   ============================================================ */
.author-profile {
  padding: 64px 0 56px;
  border-bottom: 1px solid var(--color-rule);
  position: relative;
}
.author-profile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-paper-warm);
  z-index: -1;
}
.author-profile__grid {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.author-profile__portrait {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-ink);
  border: 4px solid var(--color-red);
  position: relative;
}
.author-profile__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(30%) contrast(1.03);
}
.author-profile__kicker { margin-bottom: 18px; }
.author-profile__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.028em;
  color: var(--color-ink);
  font-variation-settings: "opsz" 144;
  margin-bottom: 14px;
}
.author-profile__credentials {
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-meta);
  font-weight: 600;
  margin-bottom: 28px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}
.author-profile__credentials strong { color: var(--color-ink); }
.author-profile__credentials-sep { width: 4px; height: 4px; background: var(--color-meta); border-radius: 50%; }
.author-profile__bio {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-ink-soft);
  max-width: 70ch;
  margin-bottom: 30px;
}
.author-profile__bio p { margin-bottom: 14px; }
.author-profile__stats {
  display: flex;
  gap: 38px;
  flex-wrap: wrap;
  padding: 22px 0;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  margin-bottom: 28px;
}
.author-profile__stat-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 32px;
  line-height: 1;
  color: var(--color-red);
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 96;
  display: block;
  margin-bottom: 4px;
}
.author-profile__stat-label {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-meta);
  font-weight: 600;
}
.author-profile__links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.author-profile__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--color-rule-strong);
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-ink);
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.author-profile__link:hover {
  background: var(--color-ink);
  color: var(--color-paper);
  border-color: var(--color-ink);
}

/* Other categories quick links */
.other-cats {
  padding: 64px 0;
  background: var(--color-paper-warm);
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}
.other-cats__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  margin-bottom: 24px;
  font-variation-settings: "opsz" 48;
}
.other-cats__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--color-rule);
  border: 1px solid var(--color-rule);
}
.other-cats__link {
  background: var(--color-paper);
  padding: 22px 24px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--color-ink);
  transition: background 0.2s var(--ease-out);
}
.other-cats__link:hover { background: var(--color-paper-warm); color: var(--color-red); }
.other-cats__link-count {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--color-meta);
  font-weight: 600;
}
@media (max-width: 1100px) {
  .lead__grid { grid-template-columns: 1fr; gap: 40px; }
  .lead__rule { display: none; }
  .feed { grid-template-columns: 1fr; gap: 40px; }
  .feed__side { position: static; }
  .highlight__inner { grid-template-columns: 1fr; gap: 30px; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .opinion__grid { grid-template-columns: 1fr; }
  .opinion__column { border-right: 0; border-bottom: 1px solid var(--color-rule); padding: 32px 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-cta { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 820px) {
  .news-card,
  .news-card--lead,
  .news-card--wide,
  .news-card--inset,
  .news-card--text { grid-column: span 12; }
  .news-card--inset { padding-left: 0; border-left: 0; padding-top: 24px; border-top: 1px solid var(--color-rule); }
  .article-list__item { grid-template-columns: 1fr; }
  .article-list__media { order: -1; }
  .site-header__weather { display: none; }
  .brand__tagline { display: none; }
  .site-header__top { grid-template-columns: 1fr auto; gap: 18px; align-items: center; }
  .site-header__actions { display: none; }
  .main-nav { display: none; }
  .site-header__menu-toggle { display: inline-flex; }
  .secondary-story--with-image { grid-template-columns: 1fr; }
  .utility-bar__inner { flex-direction: column; gap: 8px; padding: 12px 0; }
}
@media (max-width: 540px) {
  :root { --gutter: 18px; }
  .section { padding: 44px 0; }
  .cat-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-col__list--multi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-bottom { flex-direction: column; gap: 14px; }
  .lead__deck::first-letter { font-size: 56px; }
  .footer-cta__form { flex-direction: column; gap: 14px; }
  .footer-cta__submit { margin-left: 0; }
}

/* Listing responsive */
@media (max-width: 1100px) {
  .listing__header-grid { grid-template-columns: 1fr; gap: 48px; }
  .listing__featured-grid { grid-template-columns: 1fr; gap: 30px; }
  .other-cats__list { grid-template-columns: repeat(2, 1fr); }
  .members-grid { grid-template-columns: repeat(2, 1fr); }
  .offer-benefits__grid { grid-template-columns: 1fr; gap: 0; }
  .benefit-card { border-right: 0; border-bottom: 1px solid var(--color-rule); padding: 28px 0 !important; }
  .benefit-card:last-child { border-bottom: 0; }
  .offer-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 24px 0; }
  .offer-stats__item { border-right: 0; border-bottom: 1px solid var(--color-rule-strong); padding: 18px 0; }
  .offer-stats__item:nth-child(2n) { padding-right: 0; }
  .offer-faq__inner { grid-template-columns: 1fr; gap: 40px; }
  .author-profile__grid { grid-template-columns: 1fr; gap: 30px; }
  .author-profile__portrait { max-width: 220px; }
  .members-cta { grid-template-columns: 1fr; gap: 24px; }
  .offer-testimonials__grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 540px) {
  .members-grid { grid-template-columns: 1fr; }
  .price-card__value { font-size: 72px; }
  .offer-stats__grid { grid-template-columns: 1fr; }
  .offer-stats__item:last-child { border-bottom: 0; }
  .members-cta { padding: 32px; }
  .author-profile__stats { gap: 24px; }
}
@media (max-width: 820px) {
  .listing__header { padding: 48px 0 36px; }
  .listing__title { font-size: clamp(48px, 13vw, 88px); }
  .filter-bar__inner { gap: 18px; }
  .filter-bar__count { margin-left: 0; width: 100%; padding-top: 4px; }
  .pagination__arrow--prev,
  .pagination__arrow--next { margin: 0; padding: 0 12px; }
  .pagination__arrow span:not([class]) { display: none; }
}
@media (max-width: 540px) {
  .other-cats__list { grid-template-columns: 1fr; }
}

/* Article responsive */
@media (max-width: 820px) {
  .article__byline-share { margin-left: 0; width: 100%; }
  .article__pullquote { margin: 36px 0; }
  .article__pullquote blockquote { padding-left: 24px; }
  .article__pullquote blockquote::before { left: 8px; font-size: 80px; top: -22px; }
  .article__author-card { grid-template-columns: 1fr; padding: 28px; gap: 18px; }
  .article__author-avatar { width: 72px; height: 72px; }
  .article__body { font-size: 18px; padding-top: 24px; }
  .article__body p:first-of-type::first-letter { font-size: 64px; padding-right: 12px; }
}
@media (max-width: 540px) {
  .article__head { padding: 36px 0 28px; }
  .article__deck { font-size: 18px; }
  .article__body h2 { font-size: 24px; }
  .article__cover { margin: 32px 0 20px; }
  .article__foot { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ============================================================
   BUTTON RADII — global softening
   ============================================================ */
.site-header__subscribe,
.highlight__cta,
.newsletter__submit,
.footer-cta__submit,
.mobile-menu__cta,
.mobile-menu__close,
.members-cta__btn,
.offer-hero__cta,
.price-card__cta,
.offer-final__btn,
.article__share-btn,
.filter-bar__item,
.pagination__item,
.pagination__arrow,
.tag,
.author-profile__link,
.mobile-menu__socials a,
.footer-col__social,
.utility-bar__social-link,
.newsletter__input,
.mobile-menu__search,
.cat-grid__item,
.cat-grid,
.other-cats,
.other-cats__list,
.members-grid,
.member-card,
.price-card,
.lead__media,
.news-card__media,
.article-list__media,
.secondary-story__media,
.highlight__media,
.listing__featured-media,
.article__cover-figure,
.article__inline-image img,
.listing__featured-badge,
.price-card__badge,
.ticker__label,
.offer-stats {
  border-radius: 6px;
}

/* small inputs / small radii */
.newsletter__input,
.mobile-menu__search,
.author-profile__link,
.filter-bar__item,
.tag,
.utility-bar__social-link,
.article__share-btn,
.mobile-menu__close,
.mobile-menu__socials a,
.footer-col__social {
  border-radius: 5px;
}

/* Larger surfaces */
.price-card,
.members-cta,
.author-profile__portrait,
.brand__icon {
  border-radius: 8px;
}

/* Keep pills round */
.opinion__avatar,
.testimonial__avatar,
.article__byline-avatar,
.member-card__avatar,
.site-header__search { border-radius: 999px; }

/* ============================================================
   EVENTS — cards + listing + single
   ============================================================ */

/* Event card (used on home + listing + related) */
.events-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}
.events-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.event-card {
  position: relative;
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: 10px;
  padding: 36px 36px 32px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.25s var(--ease-out), transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.event-card::before {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(11,10,9,0.04);
  top: -90px;
  left: -90px;
  z-index: 0;
  transition: background 0.4s var(--ease-out), transform 0.5s var(--ease-out);
}
.event-card:nth-child(even)::before { left: auto; right: -90px; }
.event-card:hover {
  border-color: var(--color-red);
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(11,10,9,0.08);
}
.event-card:hover::before { background: rgba(205,0,0,0.08); transform: scale(1.05); }

.event-card__kicker {
  position: relative;
  z-index: 1;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-red);
  font-weight: 700;
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.event-card__kicker::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--color-red);
}

.event-card__title {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--color-ink);
  font-variation-settings: "opsz" 48;
  margin-bottom: 16px;
}
.event-card__title a { transition: color 0.2s var(--ease-out); }
.event-card__title a:hover { color: var(--color-red); }

.event-card__desc {
  position: relative;
  z-index: 1;
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--color-meta);
  margin-bottom: 24px;
  max-width: 50ch;
}

.event-card__meta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
  padding: 18px 0;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}
.event-card__meta-row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--color-ink);
}
.event-card__meta-row strong { color: var(--color-ink); font-weight: 600; }
.event-card__meta-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--color-red);
}
.event-card__meta-row--past { color: var(--color-meta); }

.event-card__areas {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}
.event-card__areas-label {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-meta);
  font-weight: 600;
}
.event-card__areas-list {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.event-card__area {
  display: inline-flex;
  padding: 6px 12px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--color-ink);
  background: var(--color-paper-warm);
  border-radius: 999px;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.event-card__area:hover { background: var(--color-ink); color: var(--color-paper); }

/* Event card -- variant with status badge */
.event-card__badge {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  padding: 5px 10px;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 4px;
}
.event-card__badge--upcoming { background: var(--color-red); color: #fff; }
.event-card__badge--past { background: var(--color-paper-warm); color: var(--color-meta); border: 1px solid var(--color-rule-strong); }

/* Home section: Próximos eventos */
.upcoming-events {
  padding: 80px 0;
  background: var(--color-paper);
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}

/* ============================================================
   EVENT — single event page
   ============================================================ */
.event {
  padding-bottom: 80px;
}
.event__hero {
  background: var(--color-paper-warm);
  padding: 56px 0 64px;
  border-bottom: 1px solid var(--color-rule);
  position: relative;
  overflow: hidden;
}
.event__hero::before {
  content: "";
  position: absolute;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: rgba(205, 0, 0, 0.06);
  top: -140px;
  right: -120px;
  z-index: 0;
}
.event__hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 70px;
  align-items: end;
  position: relative;
  z-index: 1;
}
.event__kicker { margin-bottom: 22px; }
.event__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.028em;
  color: var(--color-ink);
  font-variation-settings: "opsz" 144;
  margin-bottom: 22px;
}
.event__title em {
  color: var(--color-red);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 40;
}
.event__deck {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.55;
  color: var(--color-ink-soft);
  max-width: 60ch;
}

.event__meta-card {
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: 10px;
  padding: 28px;
  box-shadow: 0 10px 30px rgba(11,10,9,0.06);
}
.event__meta-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-rule);
}
.event__meta-row:first-child { padding-top: 0; }
.event__meta-row:last-of-type { border-bottom: 0; padding-bottom: 22px; }
.event__meta-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--color-red);
  margin-top: 2px;
}
.event__meta-label {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-meta);
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}
.event__meta-value {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--color-ink);
  font-variation-settings: "opsz" 18;
  line-height: 1.3;
}
.event__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 18px;
  background: var(--color-red);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 6px;
  transition: background 0.2s var(--ease-out);
  margin-top: 4px;
}
.event__cta::after { content: "↗"; transition: transform 0.2s var(--ease-out); }
.event__cta:hover { background: var(--color-red-deep); }
.event__cta:hover::after { transform: translate(3px, -3px); }
.event__cta-note {
  text-align: center;
  margin-top: 12px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-meta);
}

/* Event body sections */
.event__section {
  padding: 64px 0;
  border-bottom: 1px solid var(--color-rule);
}
.event__section-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 32px;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  font-variation-settings: "opsz" 96;
  margin-bottom: 36px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--color-ink);
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.event__section-title small {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-meta);
  font-weight: 600;
}

.event__body {
  max-width: 720px;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
  color: var(--color-ink);
  font-variation-settings: "opsz" 18;
}
.event__body p { margin-bottom: 22px; }
.event__body p strong { color: var(--color-ink); font-weight: 600; }
.event__body h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.012em;
  margin: 30px 0 14px;
  color: var(--color-ink);
}

/* Speakers */
.speakers-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
}
.speaker {
  display: flex;
  flex-direction: column;
}
.speaker__avatar {
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-ink);
  margin-bottom: 16px;
  position: relative;
}
.speaker__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(30%) contrast(1.04);
  transition: filter 0.4s var(--ease-out);
}
.speaker:hover .speaker__avatar img { filter: grayscale(0); }
.speaker__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-bottom: 4px;
  font-variation-settings: "opsz" 36;
}
.speaker__role {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-meta);
  line-height: 1.4;
}

/* Agenda */
.agenda { border-top: 1px solid var(--color-rule); }
.agenda__item {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 30px;
  padding: 22px 0;
  border-bottom: 1px solid var(--color-rule);
}
.agenda__time {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: var(--color-red);
  font-variation-settings: "opsz" 48;
}
.agenda__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-bottom: 4px;
  font-variation-settings: "opsz" 36;
}
.agenda__desc {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-meta);
}

/* Bottom CTA card */
.event__cta-strip {
  background: var(--color-ink);
  color: var(--color-paper);
  border-radius: 10px;
  padding: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) auto;
  gap: 40px;
  align-items: center;
  margin-top: 56px;
  position: relative;
  overflow: hidden;
}
.event__cta-strip::before {
  content: "";
  position: absolute;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: rgba(205, 0, 0, 0.1);
  top: -120px;
  right: -120px;
}
.event__cta-strip__title {
  position: relative;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--color-paper);
  margin-bottom: 10px;
  font-variation-settings: "opsz" 96;
}
.event__cta-strip__title em { color: var(--color-red); font-style: italic; }
.event__cta-strip__desc {
  position: relative;
  font-family: var(--font-body);
  font-size: 16px;
  color: rgba(252,251,248,0.78);
  max-width: 50ch;
}
.event__cta-strip__btn {
  position: relative;
  background: var(--color-red);
  color: #fff;
  padding: 18px 30px;
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 6px;
  white-space: nowrap;
  transition: background 0.2s var(--ease-out);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.event__cta-strip__btn::after { content: "↗"; transition: transform 0.2s var(--ease-out); }
.event__cta-strip__btn:hover { background: var(--color-red-deep); }
.event__cta-strip__btn:hover::after { transform: translate(3px, -3px); }

/* Events responsive */
@media (max-width: 1100px) {
  .events-grid, .events-grid--three { grid-template-columns: 1fr; }
  .event__hero-grid { grid-template-columns: 1fr; gap: 40px; align-items: start; }
  .speakers-grid { grid-template-columns: repeat(2, 1fr); }
  .event__cta-strip { grid-template-columns: 1fr; gap: 24px; padding: 36px; }
}
@media (max-width: 540px) {
  .event-card { padding: 28px 24px; }
  .event__hero { padding: 40px 0 44px; }
  .speakers-grid { grid-template-columns: 1fr; }
  .agenda__item { grid-template-columns: 1fr; gap: 6px; }
}

/* ============================================================
   EXIT-INTENT NEWSLETTER POPUP
   ============================================================ */
.exit-popup {
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  visibility: hidden;
}
.exit-popup[data-open="true"] {
  pointer-events: auto;
  visibility: visible;
}
.exit-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 10, 9, 0.55);
  opacity: 0;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: opacity 0.3s var(--ease-out);
}
.exit-popup[data-open="true"] .exit-popup__backdrop { opacity: 1; }

.exit-popup__modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%) scale(0.96);
  opacity: 0;
  width: min(520px, calc(100vw - 32px));
  background: var(--color-paper);
  padding: 44px 40px 36px;
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(11,10,9,0.32), 0 8px 24px rgba(11,10,9,0.18);
  border-top: 4px solid var(--color-red);
  transition: transform 0.4s var(--ease-out), opacity 0.3s var(--ease-out);
}
.exit-popup[data-open="true"] .exit-popup__modal {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.exit-popup__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: var(--color-meta);
  border-radius: 5px;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.exit-popup__close:hover { background: var(--color-paper-warm); color: var(--color-ink); }

.exit-popup__kicker { margin-bottom: 18px; }

.exit-popup__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 36px;
  line-height: 1.06;
  letter-spacing: -0.024em;
  color: var(--color-ink);
  font-variation-settings: "opsz" 144;
  margin-bottom: 16px;
}
.exit-popup__title em {
  color: var(--color-red);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 40;
}

.exit-popup__deck {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-ink-soft);
  margin-bottom: 24px;
}

.exit-popup__form {
  display: flex;
  gap: 0;
  margin-bottom: 14px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--color-rule-strong);
}
.exit-popup__input {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 14px 16px;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--color-ink);
  letter-spacing: 0.02em;
  min-width: 0;
}
.exit-popup__input:focus { outline: none; background: var(--color-paper-warm); }
.exit-popup__input::placeholder { color: var(--color-meta); }
.exit-popup__submit {
  background: var(--color-red);
  color: #fff;
  padding: 0 22px;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  transition: background 0.2s var(--ease-out);
  white-space: nowrap;
}
.exit-popup__submit:hover { background: var(--color-red-deep); }

.exit-popup__trust {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-meta);
  text-align: center;
  margin-bottom: 22px;
}
.exit-popup__trust strong { color: var(--color-ink); font-weight: 600; }

.exit-popup__dismiss {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--color-meta);
  text-decoration: underline;
  text-decoration-color: var(--color-rule-strong);
  text-underline-offset: 4px;
  transition: color 0.2s var(--ease-out);
  background: transparent;
  border: 0;
  padding: 6px;
  cursor: pointer;
}
.exit-popup__dismiss:hover { color: var(--color-ink); }

body.popup-open { overflow: hidden; }

@media (max-width: 540px) {
  .exit-popup__modal { padding: 36px 24px 28px; }
  .exit-popup__title { font-size: 28px; }
  .exit-popup__form { flex-direction: column; border: 0; }
  .exit-popup__input { border: 1px solid var(--color-rule-strong); border-radius: 6px; margin-bottom: 10px; }
  .exit-popup__submit { padding: 14px; border-radius: 6px; }
}

/* ============================================================
   FLOATING INSTAGRAM BUTTON
   ============================================================ */
.float-ig {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 150;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0;
  height: 58px;
  background: var(--color-red);
  color: #fff;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(11, 10, 9, 0.18), 0 4px 12px rgba(205, 0, 0, 0.28);
  transition: background 0.25s var(--ease-out), transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), padding-right 0.3s var(--ease-out);
  animation: float-ig-in 0.5s 0.4s var(--ease-out) both;
}
.float-ig svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin: 0 18px;
  display: block;
}
.float-ig__label {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width 0.35s var(--ease-out), opacity 0.25s var(--ease-out), padding-right 0.3s var(--ease-out);
}
.float-ig:hover {
  background: var(--color-red-deep);
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(11, 10, 9, 0.24), 0 6px 16px rgba(205, 0, 0, 0.32);
}
.float-ig:hover .float-ig__label {
  max-width: 220px;
  opacity: 1;
  padding-right: 22px;
}
.float-ig:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

@keyframes float-ig-in {
  from { opacity: 0; transform: translateY(20px) scale(0.85); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 540px) {
  .float-ig { bottom: 16px; right: 16px; height: 52px; }
  .float-ig svg { margin: 0 15px; width: 20px; height: 20px; }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .utility-bar, .ticker, .main-nav, .newsletter, .footer-cta { display: none; }
  body { background: #fff; color: #000; }
}

/* ============================================================
   LexPrime — formulário de filiação (Seja Membro)
   ============================================================ */
.filiacao-form{margin-top:8px;}
.filiacao-form__row{margin-bottom:18px;}
.filiacao-form__label{display:block;margin-bottom:7px;font-family:var(--font-ui);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-meta);}
.filiacao-form__input{width:100%;padding:13px 16px;border:1px solid var(--color-rule-strong);border-radius:12px;background:var(--color-paper,#fff);color:var(--color-ink);font-family:var(--font-ui,inherit);font-size:15px;outline:none;transition:border-color .2s ease;}
.filiacao-form__input:focus{border-color:var(--color-ink);}
textarea.filiacao-form__input{resize:vertical;min-height:120px;}
.filiacao-form__error{display:block;margin-top:6px;color:var(--color-red);font-family:var(--font-ui);font-size:13px;}
.filiacao-form__submit{width:100%;margin-top:6px;border:none;cursor:pointer;}

/* ============================================================
   LexPrime — richtext do corpo (matéria/evento): pull-quote
   e imagens com o visual do template original.
   ============================================================ */
.article__body blockquote,
.event__body blockquote{
  position:relative;
  max-width:920px;
  margin:46px auto;
  padding:4px 0 4px 36px;
  border-left:4px solid var(--color-red);
  font-family:var(--font-display);
  font-weight:500;
  font-style:italic;
  font-size:clamp(24px,3vw,38px);
  line-height:1.2;
  letter-spacing:-0.018em;
  color:var(--color-ink);
  font-variation-settings:"opsz" 144,"SOFT" 40;
}
.article__body blockquote::before,
.event__body blockquote::before{
  content:"“";
  position:absolute;
  left:12px;
  top:-26px;
  font-size:104px;
  line-height:1;
  color:var(--color-red);
  font-style:normal;
  font-family:var(--font-display);
}
.article__body blockquote p,
.event__body blockquote p{ margin:0 0 8px; }
.article__body blockquote p:last-child,
.event__body blockquote p:last-child{ margin-bottom:0; }
/* citação/autor da frase (TipTap pode gerar <cite> ou <footer>) */
.article__body blockquote cite,
.article__body blockquote footer,
.event__body blockquote cite,
.event__body blockquote footer{
  display:block;
  margin-top:14px;
  font-family:var(--font-ui);
  font-style:normal;
  font-weight:600;
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--color-meta);
}
/* imagens inline do corpo */
.article__body figure,
.event__body figure{ margin:42px 0; }
.article__body img,
.event__body img{ display:block; width:100%; border-radius:10px; }
.article__body figcaption,
.event__body figcaption{
  margin-top:10px;
  font-family:var(--font-ui);
  font-size:13px;
  color:var(--color-meta);
}

/* ============================================================
   LexPrime — ribbon de categorias: carrossel horizontal usável.
   Não quebra linha; rola na horizontal (roda do mouse via JS) e
   mostra um fade nas bordas quando há mais categorias escondidas.
   ============================================================ */
.category-ribbon .container { position: relative; }
.category-ribbon .container::before,
.category-ribbon .container::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 56px;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity .2s var(--ease-out, ease);
}
.category-ribbon .container::before { left: 0;  background: linear-gradient(to right, var(--color-paper-warm), rgba(0,0,0,0)); }
.category-ribbon .container::after  { right: 0; background: linear-gradient(to left,  var(--color-paper-warm), rgba(0,0,0,0)); }
.category-ribbon.is-ovf-left  .container::before { opacity: 1; }
.category-ribbon.is-ovf-right .container::after  { opacity: 1; }
.category-ribbon__inner { scroll-behavior: smooth; }