/* Generated by scripts/build-rtl.js (rtlcss). Do not edit; edit the LTR source and rebuild. */
/* RIVISTA template styles: home.php */
/* ============================================================
   MAGAZINE INDEX
   ============================================================ */
.mag-hero {
  padding: 56px 0 56px;
  position: relative;
  overflow: hidden;
}

.crumb { font-family: var(--display); font-size: 12.5px; color: var(--ink-3); display: flex; gap: 10px; margin-bottom: 32px; }
.crumb .now { color: var(--ink); font-weight: 500; }

.mag-eyebrow {
  font-family: var(--display);
  font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  background: var(--terra); color: var(--paper);
  padding: 6px 12px;
  display: inline-block;
  margin-bottom: 24px;
}

.mag-title-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: end;
}
.mag-title-row h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(64px, 9vw, 144px);
  line-height: .88;
  letter-spacing: -.05em;
  margin: 0;
}
.mag-title-row h1 i { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink-3); }
.mag-title-row h1 .dot { color: var(--accent); }
.mag-title-row .lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 36ch;
  margin: 0 0 12px;
}

.issue-meta {
  display: flex; gap: 32px; flex-wrap: wrap;
  padding: 22px 0;
  margin-top: 32px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.issue-meta b { color: var(--ink); font-weight: 700; }
.issue-meta .pill {
  background: var(--butter);
  color: var(--ink);
  padding: 5px 10px;
  letter-spacing: .12em;
  margin-right: auto;
}

/* CATEGORY FILTER */
.mag-filters {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin: 28px 0 0;
  align-items: center;
}
.mag-filters .label {
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-left: 4px;
}
.mag-chip {
  padding: 9px 16px;
  border-radius: 999px;
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .04em;
  background: var(--paper-2);
  color: var(--ink-2);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  display: inline-flex; align-items: center; gap: 8px;
}
.mag-chip:hover { background: var(--paper-3); color: var(--ink); }
.mag-chip .ct {
  font-family: var(--display);
  font-size: 10.5px;
  background: var(--paper);
  padding: 1px 7px;
  border-radius: 999px;
  color: var(--ink-3);
}
.mag-chip.is-active { background: var(--ink); color: var(--paper); }
.mag-chip.is-active .ct { background: var(--terra); color: var(--paper); }

/* FEATURED ARTICLE */
.featured {
  padding: 56px 0;
}
.feat-card {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.feat-img {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
}
.feat-img img {
  /* Absolute so the image's intrinsic ratio never widens the grid track
     (at 390px the 1fr column otherwise grows to the image's min-content). */
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.feat-card:hover .feat-img img { transform: scale(1.04); }
.feat-img .tag {
  position: absolute; top: 18px; right: 18px;
  font-family: var(--display);
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em;
  background: var(--terra); color: var(--paper);
  padding: 6px 12px;
}
.feat-img .circle {
  position: absolute; bottom: 22px; left: 22px;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: var(--paper); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  animation: spin 22s linear infinite;
}
.feat-img .circle svg { width: 90%; height: 90%; }
@keyframes spin { to { rotate: 360deg; } }

.feat-text { display: flex; flex-direction: column; gap: 24px; }
.feat-text .issue-num {
  font-family: var(--display);
  font-size: 11px; font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.feat-text h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(40px, 5.5vw, 80px);
  line-height: .92;
  letter-spacing: -.035em;
  margin: 0;
}
.feat-text h2 i { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink-3); }
.feat-text .deck {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 44ch;
  margin: 0;
}
.feat-text .meta {
  display: flex; gap: 24px; flex-wrap: wrap;
  font-family: var(--display);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.feat-text .meta b { color: var(--ink); font-weight: 700; }
.feat-text .meta .author { display: inline-flex; align-items: center; gap: 10px; }
.feat-text .meta .avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
	overflow: hidden;
}
.feat-text .meta .avatar img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* ARTICLES GRID — asymmetric */
.articles-section {
  padding: 56px 0 96px;
  border-top: 1px solid var(--line);
}
.articles-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 16px;
}
.articles-head h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1;
  letter-spacing: -.025em;
  margin: 0;
}
.articles-head h3 i { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink-3); }
.articles-head .results {
  font-family: var(--display);
  font-size: 13px; color: var(--ink-3);
}
.articles-head .results b { color: var(--ink); }

.articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 24px;
}
.article-card {
  display: flex; flex-direction: column;
  cursor: pointer;
  transition: opacity 320ms var(--ease);
}
.article-card.is-hidden { display: none; }
.article-img {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  margin-bottom: 18px;
}
.article-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.article-card:hover .article-img img { transform: scale(1.05); }
.article-img .num {
  position: absolute; top: 14px; right: 14px;
  font-family: var(--display);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em;
  background: var(--paper); color: var(--ink);
  padding: 5px 9px;
}
.article-img .read-time {
  position: absolute; bottom: 14px; left: 14px;
  font-family: var(--display);
  font-size: 11px; font-weight: 600;
  letter-spacing: .04em;
  background: var(--ink); color: var(--paper);
  padding: 5px 10px;
  border-radius: 999px;
}
.article-cat {
  font-family: var(--display);
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.article-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -.015em;
  margin: 0 0 8px;
  transition: color var(--dur) var(--ease);
}
.article-card:hover .article-title { color: var(--accent); }
.article-title i { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink-3); }
.article-deck {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0;
  max-width: 36ch;
}
.article-meta {
  font-family: var(--display);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--ink-3);
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.article-meta b { color: var(--ink); font-weight: 600; }

/* SECONDARY — big article */
.article-card.feature-big { grid-column: span 2; flex-direction: row; gap: 32px; }
.article-card.feature-big .article-img { aspect-ratio: 16/11; flex: 1.2; min-width: 0; }
.article-card.feature-big .article-body { flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.article-card.feature-big .article-title { font-size: 32px; max-width: 18ch; }
.article-card.feature-big .article-deck { font-size: 16px; max-width: 48ch; }

/* PROMO TILES inside grid */
.promo-tile {
  position: relative;
  aspect-ratio: 4/5;
  padding: 24px 26px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--butter);
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  transition: transform var(--dur) var(--ease);
}
.promo-tile:hover { transform: translateY(-6px); }
.promo-tile.sky { background: var(--sky); }
.promo-tile.rose { background: var(--rose); }
.promo-tile .num {
  font-family: var(--display);
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em;
  padding: 4px 9px;
  background: var(--ink); color: var(--paper);
  align-self: flex-start;
  position: relative; z-index: 1;
}
.promo-tile h3 {
  font-family: var(--display); font-weight: 700;
  font-size: 28px; line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0;
  position: relative; z-index: 1;
  max-width: 14ch;
}
.promo-tile h3 i { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink-3); }
.promo-tile p {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 4px 0 0;
  position: relative; z-index: 1;
}
.promo-tile .foot {
  display: flex; justify-content: space-between; align-items: center;
  position: relative; z-index: 1;
}
.promo-tile .arrow {
  width: 38px; height: 38px;
  background: var(--ink);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--paper);
  transition: transform var(--dur) var(--ease-spring);
}
.promo-tile:hover .arrow { transform: translate(-4px, -4px) rotate(8deg); }
.promo-tile .arrow svg { width: 13px; height: 13px; }

/* PAGINATION */
.pagination {
  display: flex; justify-content: center; align-items: center;
  gap: 18px;
  margin-top: 48px;
}
.page-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display);
  font-size: 13px; font-weight: 500;
  color: var(--ink);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.page-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.page-btn.is-current { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.page-btn.dim { opacity: .4; cursor: not-allowed; }
.page-btn svg { width: 12px; height: 12px; }

/* RESPONSIVE */
@media (max-width: 980px) {
  .feat-card { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .articles-grid { grid-template-columns: repeat(2, 1fr); }
  .article-card.feature-big { grid-column: span 2; flex-direction: column; gap: 18px; }
  .article-card.feature-big .article-img { aspect-ratio: 4/5; }
  .mag-title-row { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 600px) {
  .articles-grid { grid-template-columns: 1fr; gap: 32px; }
  .article-card.feature-big { grid-column: span 1; }
  .mag-title-row h1 { font-size: 64px; }
}
