/* ============================
   CUSTOM PROPERTIES
   ============================ */
:root {
  --color-bg: #FFFFFF;
  --color-text: #1A1A1A;
  --color-accent: #B5743A;
  --color-red: #E63946;
  --color-rule: #D9D1C2;
  --color-text-muted: #6B6359;
  --color-bg-card: #EDE8DF;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: 'DM Sans', sans-serif;

  --text-tiny: 0.75rem;
  --text-small: 0.875rem;
  --text-base: 1.0625rem;
  --text-lead: 1.25rem;
  --text-h3: 1.5rem;
  --text-h2: 2rem;
  --text-h1: 2.75rem;
  --text-display: 3.5rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --container-wide: 1280px;
  --container-narrow: 720px;
  --container-padding: 1.5rem;
}

@media (min-width: 768px) {
  :root {
    --text-base: 1.125rem;
    --text-lead: 1.5rem;
    --text-h3: 1.75rem;
    --text-h2: 2.5rem;
    --text-h1: 3.5rem;
    --text-display: 5rem;
    --container-padding: 2rem;
  }
}

/* ============================
   RESET
   ============================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* ============================
   BASE
   ============================ */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }

p {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.7;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: var(--color-accent);
}

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

ul, ol {
  list-style: none;
}

/* ============================
   LAYOUT
   ============================ */
.container {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.container--narrow {
  max-width: var(--container-narrow);
}

/* ============================
   COVER (background-image blocks)
   ============================ */
.cover {
  background-size: cover;
  background-position: center;
  background-color: var(--color-bg-card);
  display: block;
}

.cover--4x5 {
  aspect-ratio: 4 / 5;
  width: 100%;
}

.cover--16x9 {
  aspect-ratio: 16 / 9;
  width: 100%;
}

/* ============================
   KICKER
   ============================ */
.kicker {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-tiny);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* ============================
   BYLINE
   ============================ */
.byline {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
}

.byline__sep {
  color: var(--color-rule);
}

/* ============================
   SECTION HEADING
   ============================ */
.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-rule);
  margin-bottom: var(--space-8);
}

.section-heading h2 {
  font-size: var(--text-h3);
}

.section-heading__link {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--color-accent);
  white-space: nowrap;
  margin-left: var(--space-4);
}

.section-heading__link:hover {
  text-decoration: underline;
  color: var(--color-accent);
}

/* ============================
   PULL QUOTE
   ============================ */
.pull-quote {
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  padding-block: var(--space-8);
  margin-block: var(--space-12);
  text-align: center;
}

.pull-quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-h2);
  line-height: 1.3;
  color: var(--color-text);
  max-width: 28ch;
  margin-inline: auto;
}

/* ============================
   Q&A
   ============================ */
.qa {
  margin-bottom: var(--space-8);
}

.qa__q {
  font-family: var(--font-display);
  font-size: var(--text-lead);
  font-weight: 700;
  font-style: italic;
  line-height: 1.4;
  margin-bottom: var(--space-3);
  color: var(--color-text);
}

.qa__a {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.8;
}

.qa__a p + p {
  margin-top: var(--space-4);
}

/* ============================
   SITE HEADER
   ============================ */
.site-header {
 /* position: sticky; */
  top: 0;
  z-index: 100;
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-rule);
}

.site-header .container {
  position: relative;
}

.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) 0;
}

.site-logo,
.custom-logo-link {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
}


.site-logo img,
.custom-logo-link .custom-logo {
  height: 64px;
  width: auto;
  display: block;
  transition: opacity 0.15s ease;
}



@media (min-width: 768px) {
	
	  .site-header__inner {
    padding: var(--space-7) 0;
  }
	
  .site-logo img,
  .custom-logo-link .custom-logo {
    height: 158px;         /* was 128px */
  }
}

.site-nav__toggle {
  grid-column: 3;
  justify-self: end;
  background: none;
  border: none;
  padding: var(--space-2);
  color: var(--color-text);
  cursor: pointer;
  line-height: 1;
  display: none;           /* hidden on desktop, shown via media query below */
}

@media (max-width: 768px) {
  .site-nav__toggle {
    display: inline-flex;
    align-items: center;
  }
}

/* ============================
   CATEGORIES NAV
   ============================ */
.site-categories-nav {
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  padding: var(--space-3) 0;
}

.site-categories-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 1000px) {
  .site-categories-nav ul {
    gap: var(--space-8);
  }
}

.site-categories-nav a {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text);
  transition: color 0.15s ease;
  white-space: nowrap;
}

.site-categories-nav a:hover,
.site-categories-nav a[aria-current="page"] {
  color: var(--color-red);
}

@media (max-width: 768px) {
  .site-categories-nav {
    display: none;
  }

  .site-categories-nav--open {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--color-bg);
    z-index: 1000;
    overflow-y: auto;
    padding: var(--space-16) var(--space-6) var(--space-8);
  }

  .site-categories-nav--open ul {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .site-categories-nav--open a {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--color-text);
  }

}

.site-categories-nav__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-6);
  background: none;
  border: none;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--color-text);
  cursor: pointer;
  padding: var(--space-2);
  z-index: 1001;
}

.site-categories-nav__close:hover {
  color: var(--color-red);
}

.site-categories-nav__social {
  display: flex;
  gap: var(--space-6);
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-rule);
}

.site-categories-nav__social a {
  color: var(--color-text);
  display: inline-flex;
  transition: color 0.15s ease;
}

.site-categories-nav__social a:hover {
  color: var(--color-red);
}

@media (min-width: 768px) {
  .site-categories-nav {
    padding: 20px 0;
  }
}

/* ============================
   SITE FOOTER
   ============================ */
.site-footer {
  margin-top: var(--space-24);
  border-top: 1px solid var(--color-rule);
}

.site-footer__main {
  padding-block: var(--space-16);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
}

@media (min-width: 768px) {
  .site-footer__main {
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--space-12);
  }
}

.footer-col__heading {
  font-family: var(--font-sans);
  font-size: var(--text-tiny);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}

.footer-col__mission {
  font-family: var(--font-display);
  font-size: var(--text-lead);
  line-height: 1.5;
  color: var(--color-text);
  max-width: 34ch;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-col a {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--color-text-muted);
  transition: color 0.15s ease;
}

.footer-col a:hover {
  color: var(--color-accent);
}

.site-footer__bottom {
  border-top: 1px solid var(--color-rule);
  padding-block: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.site-footer__copyright,
.site-footer__city {
  font-family: var(--font-sans);
  font-size: var(--text-tiny);
  color: var(--color-text-muted);
}

/* ============================
   HOMEPAGE: HERO FEATURE
   ============================ */
.hero-feature {
  padding: var(--space-12) 0;
  border-bottom: 1px solid var(--color-rule);
}

.hero-feature__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
}

@media (min-width: 900px) {
  .hero-feature__grid {
    grid-template-columns: 38fr 32fr 30fr;
    gap: var(--space-8);
  }
}

@media (min-width: 1200px) {
  .hero-feature__grid {
    gap: var(--space-12);
  }
}

.hero-feature__meta {
  font-family: var(--font-sans);
  font-size: var(--text-tiny);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}

.hero-feature__text {
  display: flex;
  flex-direction: column;
}

.hero-feature__image {
  aspect-ratio: 4/5;
  background-size: cover;
  background-position: center top;
  background-color: var(--color-rule);
  order: -1;
}

@media (min-width: 900px) {
  .hero-feature__image {
    order: 0;
  }
}

.hero-feature__title {
  font-size: 2.5rem;
  margin-bottom: var(--space-6);
  line-height: 1.1;
}

@media (min-width: 900px) {
  .hero-feature__title {
    font-size: 3rem;
  }
}

@media (min-width: 1200px) {
  .hero-feature__title {
    font-size: 3.5rem;
  }
}

.hero-feature__lead {
  font-size: var(--text-base);
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  line-height: 1.4;
}

@media (min-width: 900px) {
  .hero-feature__lead {
    font-size: var(--text-lead);
  }
}

.hero-feature__byline {
  font-size: var(--text-small);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.hero-feature__cta {
  font-size: var(--text-tiny);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--color-red);
  align-self: flex-start;
}

.hero-feature__cta:hover {
  color: var(--color-accent);
}

.hero-feature__aside {
  border-top: 1px solid var(--color-rule);
  padding-top: var(--space-4);
}

@media (min-width: 900px) {
  .hero-feature__aside {
    border-top: none;
    padding-top: 0;
    border-left: 1px solid var(--color-rule);
    padding-left: var(--space-6);
  }
}

.hero-feature__aside-heading {
  font-family: var(--font-sans);
  font-size: var(--text-tiny);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-4) 0;
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-text);
}

.hero-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hero-list li {
  border-bottom: 1px solid var(--color-rule);
  padding: var(--space-3) 0;
}

.hero-list li:last-child {
  border-bottom: none;
}

.hero-list__item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.hero-list__thumb {
  width: 64px;
  height: 64px;
  background-size: cover;
  background-position: center top;
  flex-shrink: 0;
  background-color: var(--color-rule);
}

.hero-list__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hero-list__category {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-red);
  font-weight: 600;
}

.hero-list__title {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.25;
  margin: 0;
  color: var(--color-text);
}

.hero-list__date {
  font-size: var(--text-tiny);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 2px;
}

/* ============================
   HOMEPAGE: ARTICLE GRID
   ============================ */
.article-grid-section {
  padding-bottom: var(--space-16);
}

.article-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10) var(--space-8);
}

@media (min-width: 600px) {
  .article-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .article-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================
   CARD
   ============================ */
.card {
  display: flex;
  flex-direction: column;
}

.card__image {
  overflow: hidden;
  margin-bottom: var(--space-4);
}

.card__image a {
  display: block;
}

.card__image .cover--4x5 {
  transition: transform 0.4s ease;
}

.card__image a:hover .cover--4x5 {
  transform: scale(1.03);
}

.card__kicker {
  margin-bottom: var(--space-2);
}

.card__title {
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--space-3);
}

.card__title a {
  transition: color 0.15s ease;
}

.card__title a:hover {
  color: var(--color-accent);
}

.card__excerpt {
  font-size: var(--text-small);
  color: var(--color-text-muted);
  line-height: 1.65;
  margin-bottom: var(--space-4);
  flex-grow: 1;
}

.card__byline {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-rule);
}

/* ============================
   SINGLE: ARTICLE HERO
   ============================ */
.article-hero {
  padding-top: var(--space-12);
  padding-bottom: var(--space-8);
}

.article-hero__kicker {
  margin-bottom: var(--space-5);
}

.article-hero__title {
  font-style: italic;
  line-height: 1.1;
  margin-bottom: var(--space-6);
}

.article-hero__lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lead);
  line-height: 1.65;
  margin-bottom: var(--space-8);
  color: var(--color-text);
}

.article-hero__byline-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-rule);
}

@media (min-width: 600px) {
  .article-hero__byline-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.byline-cell__label {
  font-family: var(--font-sans);
  font-size: var(--text-tiny);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.byline-cell__value {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--color-text);
}

/* ============================
   SINGLE: WIDE IMAGE
   ============================ */
.article-wide-image {
  margin-block: var(--space-10);
}

.article-wide-image .cover {
  background-position: center top;
}

.article-wide-image figcaption {
  font-family: var(--font-sans);
  font-size: var(--text-tiny);
  font-style: italic;
  color: var(--color-text-muted);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-rule);
}

/* ============================
   SINGLE: ARTICLE BODY
   ============================ */
.article-body {
  padding-bottom: var(--space-16);
}

.article-body > p {
  font-size: var(--text-base);
  line-height: 1.8;
  margin-bottom: var(--space-6);
}

.article-body > h2 {
  margin-top: var(--space-12);
  margin-bottom: var(--space-6);
  font-size: var(--text-h2);
}

.article-body > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-size: 4em;
  font-weight: 700;
  line-height: 0.82;
  float: left;
  margin-right: 0.07em;
  margin-top: 0.05em;
  color: var(--color-text);
}

/* ============================
   ARCHIVE
   ============================ */
.archive-header {
  padding-top: var(--space-12);
  padding-bottom: var(--space-10);
}

.archive-header__kicker {
  margin-bottom: var(--space-4);
}

.archive-header__title {
  margin-bottom: var(--space-4);
}

.archive-header__desc {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lead);
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 54ch;
}


/* ============================
   ARCHIVE: FILTERS
   ============================ */
.archive-filters {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-rule);
}

@media (min-width: 700px) {
  .archive-filters {
    display: none;
  }
}

.archive-filters__categories {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .archive-filters__categories {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: var(--space-2);
    margin: 0 calc(var(--space-4) * -1);
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .archive-filters__categories::-webkit-scrollbar {
    display: none;
  }

  .filter-pill {
    scroll-snap-align: start;
    flex-shrink: 0;
  }
}

.filter-pill {
  font-family: var(--font-sans);
  font-size: var(--text-tiny);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  background: transparent;
  border: 1px solid var(--color-rule);
  color: var(--color-text);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.filter-pill:hover {
  border-color: var(--color-text);
}

.filter-pill--active {
  background: var(--color-text);
  color: #fff;
  border-color: var(--color-text);
}

.filter-pill--active:hover {
  background: var(--color-red);
  border-color: var(--color-red);
}



/* ============================
   ARCHIVE: PAGINATION
   ============================ */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-8) 0 var(--space-16);
  border-top: 1px solid var(--color-rule);
}

@media (max-width: 640px) {
  .pagination {
    flex-direction: column;
    gap: var(--space-6);
  }
}

.pagination__link {
  font-family: var(--font-sans);
  font-size: var(--text-tiny);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-rule);
  transition: all 0.15s ease;
  flex-shrink: 0;
  text-decoration: none;
}

.pagination__link:hover {
  border-color: var(--color-text);
  color: var(--color-red);
}

.pagination__link--disabled {
  opacity: 0.4;
  pointer-events: none;
}

.pagination__list {
  list-style: none;
  display: flex;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  align-items: center;
}

.pagination__page {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-rule);
  transition: all 0.15s ease;
  text-decoration: none;
}

.pagination__page:hover {
  border-color: var(--color-text);
  color: var(--color-red);
}

.pagination__page--active {
  background: var(--color-text);
  color: #fff;
  border-color: var(--color-text);
  pointer-events: none;
}

.pagination__ellipsis {
  color: var(--color-text-muted);
  padding: 0 var(--space-2);
  font-family: var(--font-sans);
}

/* ============================
   UTILITY BAR
   ============================ */
.site-utility-bar {
  border-bottom: 1px solid var(--color-rule);
  background-color: var(--color-bg);
}

.site-utility-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
}

.site-utility-bar__lang {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-sans);
  font-size: var(--text-tiny);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.site-utility-bar__lang strong {
  color: var(--color-text);
  font-weight: 600;
}

.site-utility-bar__lang a {
  color: var(--color-text-muted);
  transition: color 0.15s ease;
}

.site-utility-bar__lang a:hover {
  color: var(--color-accent);
}

.site-utility-bar__lang span {
  color: var(--color-rule);
}

.site-utility-bar__right {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.site-utility-bar__date {
  font-family: var(--font-sans);
  font-size: var(--text-tiny);
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.site-utility-bar__social {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.site-utility-bar__social a {
  display: flex;
  align-items: center;
  color: var(--color-text-muted);
  transition: color 0.15s ease;
  line-height: 1;
}

.site-utility-bar__social a:hover {
  color: var(--color-accent);
}

@media (max-width: 639px) {
  .site-utility-bar__social {
    display: none;
  }
}

.utility-bar__search {
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  margin-left: var(--space-3);
}

.utility-bar__search:hover {
  color: var(--color-red);
}

/* ============================
   RED DIAMOND ACCENTS
   ============================ */
.kicker__diamond {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: var(--color-red);
  transform: rotate(45deg);
  margin-right: var(--space-2);
  vertical-align: middle;
  position: relative;
  top: -1px;
}

.byline__diamond {
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: var(--color-red);
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* ============================
   CONTENT WITH SIDEBAR
   ============================ */
.content-with-sidebar {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  padding-top: var(--space-12);
}

@media (min-width: 1000px) {
  .content-with-sidebar {
    grid-template-columns: 1fr 300px;
    gap: var(--space-12);
  }
}

.article-grid--two {
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .article-grid--two {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .article-grid--two {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================
   SIDEBAR WIDGETS
   ============================ */
.sidebar-widget {
  margin-bottom: var(--space-12);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-rule);
}

.sidebar-widget:last-child {
  border-bottom: none;
}

.sidebar-widget__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--color-text);
  margin: 0 0 var(--space-4) 0;
  padding: var(--space-6) 0 var(--space-4) var(--space-6);
  border-top: 3px solid var(--color-text);
  position: relative;
}

.sidebar-widget__quote::before {
  content: "\201C";
  font-size: 4rem;
  color: var(--color-red);
  opacity: 0.4;
  position: absolute;
  top: 1.5rem;
  left: 0;
  line-height: 1;
  font-style: normal;
}

.sidebar-widget__attribution {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-6);
}

.sidebar-widget__attribution strong {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-base);
}

.sidebar-widget__attribution span {
  font-size: var(--text-tiny);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text-muted);
}

.sidebar-widget__link {
  font-size: var(--text-tiny);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--color-red);
  display: inline-block;
}

.sidebar-widget__link:hover {
  color: var(--color-accent);
}

.sidebar-widget__heading {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 var(--space-6) 0;
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-text);
}

.sidebar-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-list li {
  border-bottom: 1px solid var(--color-rule);
  padding: var(--space-3) 0;
}

.sidebar-list li:last-child {
  border-bottom: none;
}

.sidebar-list a {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  color: inherit;
}

.sidebar-list a:hover .sidebar-list__title {
  color: var(--color-accent);
}

.sidebar-list__num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-red);
  flex-shrink: 0;
  line-height: 1;
}

.sidebar-list__title {
  font-size: var(--text-base);
  line-height: 1.3;
}

/* ============================
   INTERVIEW DIRECTORY
   ============================ */
.interview-directory {
  padding: var(--space-12) 0 var(--space-16);
  border-top: 1px solid var(--color-rule);
  margin-top: var(--space-12);
}

.directory-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

@media (min-width: 700px) {
  .directory-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }
}

.directory-tile {
  position: relative;
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-6);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
}

.directory-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.7) 100%);
  z-index: -1;
  transition: background 0.3s ease;
}

.directory-tile:hover::before {
  background: linear-gradient(180deg, rgba(230,57,70,0.2) 0%, rgba(0,0,0,0.85) 100%);
}

.directory-tile:hover {
  color: #fff;
}


.directory-tile__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
}

@media (min-width: 700px) {
  .directory-tile__name {
    font-size: 2.5rem;
  }
}

/* ============================
   BY CATEGORY SECTION
   ============================ */
.by-category {
  padding-top: var(--space-12);
  padding-bottom: var(--space-16);
}

@media (min-width: 1100px) {
  .article-grid--four {
    grid-template-columns: repeat(4, 1fr);
  }
}

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

.article-card__image {
  aspect-ratio: 3/2;
  background-size: cover;
  background-position: center;
  margin-bottom: var(--space-4);
}

.article-card__category {
  font-family: var(--font-sans);
  font-size: var(--text-tiny);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

.article-card__title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--space-3);
}

.article-card__title a {
  color: inherit;
  transition: color 0.15s ease;
}

.article-card__title a:hover {
  color: var(--color-accent);
}

.article-card__excerpt {
  font-size: var(--text-small);
  color: var(--color-text-muted);
  line-height: 1.65;
  margin-bottom: var(--space-3);
  flex-grow: 1;
}

.article-card__byline {
  font-size: var(--text-tiny);
  color: var(--color-text-muted);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-rule);
}

.article-card__byline a,
.hero-feature__byline a {
  color: inherit;
  border-bottom: 1px solid var(--color-rule);
  transition: border-color 0.15s ease;
}

.article-card__byline a:hover,
.hero-feature__byline a:hover {
  border-bottom-color: var(--color-red);
  color: var(--color-red);
}

/* ============================
   MOBILE ATF TIGHTENING
   ============================ */
@media (max-width: 640px) {
  .hero-feature__image { aspect-ratio: 16/9; max-height: 220px; }
  .hero-feature__title { margin-bottom: 0; }
  .article-grid { gap: var(--space-6) var(--space-4); }
  .article-card__image { aspect-ratio: 3/2; }
}

/* ============================
   AUTHOR SECTION
   ============================ */
.author-section {
  padding: var(--space-16) 0;
  background: var(--color-bg);
}

.author-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  padding: var(--space-8);
  border: 1px solid var(--color-rule);
  background: #fff;
}

@media (min-width: 700px) {
  .author-card {
    grid-template-columns: 240px 1fr;
    gap: var(--space-12);
    padding: var(--space-12);
    align-items: start;
  }
}

.author-card__photo {
  width: 100%;
  aspect-ratio: 4/5;
  background-size: cover;
  background-position: center top;
  background-color: var(--color-rule);
}

@media (min-width: 700px) {
  .author-card__photo {
    max-width: 240px;
  }
}

.author-card__role {
  font-size: var(--text-tiny);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-red);
  font-weight: 600;
  display: block;
  margin-bottom: var(--space-3);
}

.author-card__name {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 600;
  margin: 0 0 var(--space-6) 0;
  line-height: 1.1;
}

.author-card__bio {
  font-size: var(--text-base);
  line-height: 1.6;
  margin-bottom: var(--space-4);
  color: var(--color-text);
}

.author-card__link {
  font-size: var(--text-tiny);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--color-red);
  display: inline-block;
  margin-top: var(--space-3);
}

.author-card__link:hover {
  color: var(--color-accent);
}

/* ============================
   SINGLE: HERO RESTRUCTURE
   ============================ */
.article-hero .container--narrow {
  display: flex;
  flex-direction: column;
}

.article-hero__sagovornik {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text);
  margin: 0 0 var(--space-3) 0;
  order: 1;
}

@media (min-width: 768px) {
  .article-hero__sagovornik {
    font-size: 1.875rem;
  }
}

.article-hero__title {
  order: 2;
}

.article-hero__lead {
  order: 3;
}

.article-hero__image {
  margin: var(--space-8) 0;
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center top;
  background-color: var(--color-rule);
  order: 4;
}

.article-hero__byline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--color-text-muted);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-rule);
  order: 5;
}

.article-hero__byline strong {
  color: var(--color-text);
}

.article-hero__byline a {
  color: var(--color-text);
  border-bottom: 1px solid var(--color-rule);
  transition: border-color 0.15s ease;
}

.article-hero__byline a:hover {
  border-bottom-color: var(--color-red);
  color: var(--color-red);
}

.article-hero__image-caption {
  font-family: var(--font-sans);
  font-size: var(--text-tiny);
  font-style: italic;
  color: var(--color-text-muted);
  padding-top: var(--space-3);
  padding-bottom: var(--space-8);
  border-top: 1px solid var(--color-rule);
}

@media (max-width: 768px) {
  .article-hero {
    padding: var(--space-6) 0 var(--space-4);
  }

  .article-hero__image {
    aspect-ratio: 4/3;
    margin: var(--space-4) 0 var(--space-6);
    order: 0;
  }

  .article-hero__category {
    order: 1;
    margin-bottom: var(--space-4);
  }

  .article-hero__title {
    order: 2;
    font-size: 2rem;
  }

  .article-hero__lead {
    order: 3;
  }

  .article-hero__byline {
    order: 4;
  }
}

/* ============================
   SINGLE: LAYOUT (MAIN + SIDEBAR)
   ============================ */
.single-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  padding: var(--space-8) 0;
}

@media (min-width: 1000px) {
  .single-layout {
    grid-template-columns: minmax(0, 720px) 300px;
    justify-content: center;
    gap: var(--space-16);
  }
}

.single-layout__main {
  min-width: 0;
}

@media (max-width: 999px) {
  .single-layout__main {
    max-width: var(--container-narrow);
    margin-inline: auto;
  }

  .single-layout__aside {
    display: none;
  }
}

@media (min-width: 1000px) {
  .single-layout__aside {
    position: sticky;
    top: calc(var(--space-12) + 80px);
    align-self: start;
  }
}

/* ============================
   SINGLE: RELATED LIST (SIDEBAR)
   ============================ */
.related-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.related-list li {
  border-bottom: 1px solid var(--color-rule);
  padding: var(--space-3) 0;
}

.related-list li:last-child {
  border-bottom: none;
}

.related-list__item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  color: inherit;
  text-decoration: none;
}

.related-list__item:hover .related-list__title {
  color: var(--color-accent);
}

.related-list__thumb {
  width: 70px;
  height: 70px;
  background-size: cover;
  background-position: center top;
  flex-shrink: 0;
  background-color: var(--color-rule);
}

.related-list__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.related-list__category {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-red);
  font-weight: 600;
}

.related-list__title {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.25;
  margin: 0;
  color: var(--color-text);
  transition: color 0.15s ease;
}

/* ============================
   SINGLE: PHOTO GALLERY
   ============================ */
.photo-gallery {
  margin: var(--space-12) 0;
  padding: var(--space-8) 0;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}

.photo-gallery__heading {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 var(--space-6) 0;
}

.photo-gallery__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 600px) {
  .photo-gallery__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.photo-gallery__item {
  margin: 0;
}

.photo-gallery__item img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  object-position: center;
  display: block;
}

.photo-gallery__item figcaption {
  font-size: var(--text-tiny);
  color: var(--color-text-muted);
  font-style: italic;
  margin-top: var(--space-2);
}

/* ============================
   SINGLE: COMMENTS
   ============================ */
.comments-section {
  margin: var(--space-12) 0;
}

.comments-section__heading {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  margin: 0 0 var(--space-8) 0;
  padding-bottom: var(--space-4);
  border-bottom: 2px solid var(--color-text);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.comments-section__count {
  font-family: var(--font-sans);
  font-size: var(--text-tiny);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text-muted);
  font-weight: 600;
}

.comments-list {
  list-style: none;
  margin: 0 0 var(--space-12) 0;
  padding: 0;
}

.comments-list--nested {
  margin-top: var(--space-6);
  margin-left: var(--space-8);
  padding-left: var(--space-6);
  border-left: 2px solid var(--color-rule);
  margin-bottom: 0;
}

.comment {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-rule);
}

.comments-list--nested .comment {
  padding: var(--space-4) 0;
}

.comments-list > li:last-child > .comment,
.comments-list--nested > li:last-child > .comment {
  border-bottom: none;
}

.comment__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-rule);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.comment__body {
  flex: 1;
  min-width: 0;
}

.comment__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.comment__author {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-base);
}

.comment__date {
  font-size: var(--text-tiny);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
}

.comment__badge {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--color-red);
  border: 1px solid var(--color-red);
  padding: 2px 6px;
}

.comment__text {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.6;
}

/* ============================
   SINGLE: COMMENT FORM
   ============================ */
.comment-form {
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-rule);
}

.comment-form__heading {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 var(--space-2) 0;
}

.comment-form__note {
  font-size: var(--text-small);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.comment-form__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.comment-form__label {
  font-family: var(--font-sans);
  font-size: var(--text-tiny);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--color-text);
}

.comment-form__label span {
  color: var(--color-red);
}

.comment-form__input,
.comment-form__textarea {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  padding: var(--space-3);
  border: 1px solid var(--color-rule);
  background: #fff;
  color: var(--color-text);
  width: 100%;
  transition: border-color 0.15s ease;
}

.comment-form__input:focus,
.comment-form__textarea:focus {
  outline: none;
  border-color: var(--color-text);
}

.comment-form__textarea {
  resize: vertical;
}

.comment-form__submit {
  font-family: var(--font-sans);
  font-size: var(--text-tiny);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
  background: var(--color-text);
  color: #fff;
  border: none;
  padding: var(--space-4) var(--space-8);
  cursor: pointer;
  transition: background 0.15s ease;
  margin-top: var(--space-3);
}

.comment-form__submit:hover {
  background: var(--color-red);
}

/* ============================
   SINGLE: RELATED ARTICLES BOTTOM
   ============================ */
.related-articles {
  padding: var(--space-16) 0;
  border-top: 1px solid var(--color-rule);
  background: var(--color-bg);
}

/* ============================
   MOBILE-ONLY: MOST READ GRID
   ============================ */
.mobile-most-read {
  display: none;
}

/* ============================
   MOBILE HOMEPAGE LAYOUT
   ============================ */
@media (max-width: 768px) {
  .hero-feature__lead,
  .hero-feature__byline,
  .hero-feature__cta {
    display: none;
  }

  .hero-feature__aside {
    display: none;
  }

  .hero-feature {
    padding: var(--space-4) 0 var(--space-6);
  }

  .hero-feature__image {
    aspect-ratio: 4/3;
    max-height: 300px;
    order: 1;
    margin-bottom: var(--space-4);
  }

  .hero-feature__text {
    order: 2;
  }

  .hero-feature__meta {
    margin-bottom: var(--space-3);
  }

  .hero-feature__title {
    font-size: 1.625rem;
    line-height: 1.15;
    margin-bottom: 0;
  }

  .hero-feature__title a {
    color: inherit;
    text-decoration: none;
  }

  .mobile-most-read {
    display: block;
    padding: var(--space-2) 0 var(--space-6);
  }

  .mobile-most-read__heading {
    font-family: var(--font-sans);
    font-size: var(--text-tiny);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin: 0 0 var(--space-4) 0;
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-text);
    color: var(--color-text);
  }

  .mobile-most-read__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .most-read-tile {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--color-text);
  }

  .most-read-tile__image {
    width: 100%;
    aspect-ratio: 1/1;
    background-size: cover;
    background-position: center top;
    background-color: var(--color-rule);
    margin-bottom: var(--space-2);
  }

  .most-read-tile__name {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
  }

  .content-with-sidebar {
    padding-top: var(--space-4);
    gap: var(--space-6);
  }

  .content-with-sidebar__aside {
    display: none;
  }

  .section-heading {
    padding: var(--space-4) 0 var(--space-3);
    margin-bottom: var(--space-4);
  }

  .section-heading__title {
    font-size: 1.5rem;
  }
}

/* ===========================================================
   Archive grid and cards -- single source of truth.
   Do not add other rules for these selectors elsewhere.
   =========================================================== */

.archive-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-4);
  row-gap: var(--space-8);
  margin-bottom: var(--space-12);
}

@media (min-width: 700px) {
  .archive-grid {
    column-gap: var(--space-6);
    row-gap: var(--space-12);
  }
}

@media (min-width: 1100px) {
  .archive-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-8);
  }
}

.archive-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
}

.archive-card__image-link {
  display: block;
  overflow: hidden;
  margin-bottom: var(--space-4);
}

.archive-card__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center top;
  background-color: var(--color-rule);
  transition: transform 300ms ease-out;
}

.archive-card__image-link:hover .archive-card__image {
  transform: scale(1.02);
}

.archive-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.archive-card__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  font-size: var(--fs-tiny, var(--text-tiny));
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

@media (min-width: 700px) {
  .archive-card__meta {
    flex-direction: row;
    align-items: baseline;
    gap: var(--space-3);
  }
}

.archive-card__category {
  color: var(--color-red);
  font-weight: 600;
}

.archive-card__date {
  color: var(--color-text-muted);
}

.archive-card__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
}

@media (min-width: 700px) {
  .archive-card__title {
    font-size: 1.625rem;
  }
}

.archive-card__excerpt {
  font-size: var(--fs-small, var(--text-small));
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}

.archive-card__byline {
  font-size: var(--fs-tiny, var(--text-tiny));
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-rule);
}

/* ============================
   AUTHOR PAGE
   ============================ */
.author-page__header {
  padding: var(--space-12) 0 var(--space-8);
  text-align: center;
  border-bottom: 1px solid var(--color-rule);
  margin-bottom: var(--space-12);
}

.author-page__kicker {
  font-size: var(--fs-tiny, var(--text-tiny));
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-red);
  font-weight: 600;
  margin-bottom: var(--space-4);
}

.author-page__name {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 600;
  margin: 0 0 var(--space-3) 0;
  line-height: 1.1;
}

@media (min-width: 768px) {
  .author-page__name { font-size: 4rem; }
}

.author-page__role {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lead, var(--text-lead));
  color: var(--color-text-muted);
  margin: 0;
}

.author-page__photo {
  margin: 0 0 var(--space-12) 0;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.author-page__photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.author-page__bio {
  max-width: 600px;
  margin: 0 auto var(--space-12);
}

.author-page__bio .is-style-lead-paragraph,
.author-page__lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lead, var(--text-lead));
  line-height: 1.4;
  color: var(--color-text);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-rule);
}

.author-page__bio p {
  font-size: var(--fs-base, var(--text-base));
  line-height: 1.7;
  margin-bottom: var(--space-6);
}

.author-page__contact {
  text-align: center;
  padding: var(--space-8) 0 var(--space-16);
}

.author-page__contact-link {
  font-size: var(--fs-tiny, var(--text-tiny));
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--color-red);
  border-bottom: 1px solid var(--color-red);
  padding-bottom: 2px;
}

.author-page__featured {
  background: var(--color-bg);
  border-top: 1px solid var(--color-rule);
  padding: var(--space-16) 0;
}

.author-page__featured-note {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-8) 0;
  font-size: var(--fs-base, var(--text-base));
}

/* ============================
   CONTACT PAGE
   ============================ */
.contact-page__header {
  padding: var(--space-12) 0 var(--space-8);
  border-bottom: 1px solid var(--color-rule);
  margin-bottom: var(--space-12);
}

.contact-page__kicker {
  font-size: var(--fs-tiny, var(--text-tiny));
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-red);
  font-weight: 600;
  margin-bottom: var(--space-4);
}

.contact-page__title {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 600;
  margin: 0 0 var(--space-6) 0;
  line-height: 1.1;
}

@media (min-width: 768px) {
  .contact-page__title { font-size: 4rem; }
}

.contact-page .is-style-lead-paragraph,
.contact-page__lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lead, var(--text-lead));
  color: var(--color-text-muted);
  line-height: 1.4;
  margin: 0;
  max-width: 32em;
}

.contact-page__methods {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-12);
}

.contact-method {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-rule);
}

@media (min-width: 600px) {
  .contact-method {
    flex-direction: row;
    align-items: baseline;
    gap: var(--space-6);
  }
}

.contact-method__label {
  font-size: var(--fs-tiny, var(--text-tiny));
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-text-muted);
  font-weight: 600;
  flex-shrink: 0;
  min-width: 120px;
}

.contact-method__value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color-text);
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}

.contact-method__value:hover {
  border-bottom-color: var(--color-red);
  color: var(--color-red);
}

.contact-page__note {
  padding: var(--space-8) 0 var(--space-16);
  font-style: italic;
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: var(--fs-base, var(--text-base));
}


.archive-card--hidden {
	display: none !important;
}



/* ============================================================
   Modula gallery styling, scoped to the interview article body.
   Resets aggressive defaults and gives editorial-appropriate spacing.
   ============================================================ */

.article-body .modula-gallery {
	margin: 2.5rem 0;
}

/* Image hover: subtle dim only, no scale or skew effects. */
.article-body .modula-gallery .modula-item a {
	transition: opacity 0.2s ease;
}

.article-body .modula-gallery .modula-item a:hover {
	opacity: 0.85;
}

/* Disable Modula's default overlay text and social share icons on hover.
   They distract from the editorial reading experience. */
.article-body .modula-gallery .figc,
.article-body .modula-gallery .jtg-social {
	display: none !important;
}

/* If you enable captions later, this styles them like editorial photo captions. */
.article-body .modula-gallery .modula-item-caption {
	font-size: 0.85rem;
	line-height: 1.4;
	color: #555;
	margin-top: 0.5rem;
	font-style: italic;
}


/* ============================================================
   Modula gallery on mobile: horizontal scroll strip.
   Up to 768px wide, gallery becomes a single-row swipeable strip
   regardless of image count. Each image takes ~45% viewport width
   so the user always sees at least 2 images plus a hint of the next.
   ============================================================ */

@media (max-width: 768px) {
	.article-body .modula-gallery {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 0.5rem;
	}

	.article-body .modula-gallery::-webkit-scrollbar {
		height: 4px;
	}

	.article-body .modula-gallery::-webkit-scrollbar-thumb {
		background: rgba(0, 0, 0, 0.2);
		border-radius: 2px;
	}
}


/* ============================
   SEARCH: EMPTY STATE
   ============================ */
.search-empty {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding-top: var(--space-6);
  padding-bottom: var(--space-12);
  text-align: center;
}

.search-empty__message {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lead);
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 54ch;
  margin: 0 auto var(--space-8) auto;
}

.search-empty__form {
  margin-bottom: var(--space-8);
}

/* Style the default get_search_form() output so it matches the brand
   even before any custom searchform.php override. WP outputs roughly:
   <form><label><input type="search"></label><input type="submit"></form> */
.search-empty__form form,
.search-empty__form .wp-block-search,
.search-empty__form .wp-block-search__inside-wrapper {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: var(--space-3);
  max-width: 480px;
  margin: 0 auto;
}

.search-empty__form label {
  flex: 1;
  display: block;
  margin: 0;
}

.search-empty__form input[type="search"],
.search-empty__form input.search-field,
.search-empty__form .wp-block-search__input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: 0;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

.search-empty__form input[type="search"]:focus,
.search-empty__form input.search-field:focus,
.search-empty__form .wp-block-search__input:focus {
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
  border-color: var(--color-red);
}

.search-empty__form input[type="submit"],
.search-empty__form button[type="submit"],
.search-empty__form .wp-block-search__button {
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-tiny);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #fff;
  background: var(--color-red);
  border: 1px solid var(--color-red);
  border-radius: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.search-empty__form input[type="submit"]:hover,
.search-empty__form button[type="submit"]:hover,
.search-empty__form .wp-block-search__button:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.search-empty__actions {
  margin: 0;
}

.search-empty__link {
  font-size: var(--text-tiny);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--color-red);
  text-decoration: none;
  display: inline-block;
}

.search-empty__link:hover {
  color: var(--color-accent);
}

/* Mobile: stack the form vertically. */
@media (max-width: 600px) {
  .search-empty__form form,
  .search-empty__form .wp-block-search,
  .search-empty__form .wp-block-search__inside-wrapper {
    flex-direction: column;
    align-items: stretch;
  }
}


/* ============================
   404 (NOT FOUND)
   ============================ */
.error-404 {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
  text-align: center;
}

.error-404__numeral {
  font-family: var(--font-display);
  font-size: clamp(6rem, 18vw, 12rem);
  font-weight: 700;
  line-height: 1;
  color: var(--color-red);
  margin-bottom: var(--space-6);
  letter-spacing: -0.02em;
}

.error-404__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 var(--space-5) 0;
}

.error-404__lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lead);
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 54ch;
  margin: 0 auto var(--space-8) auto;
}

.error-404__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6);
}

.error-404__link {
  font-size: var(--text-tiny);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--color-red);
  text-decoration: none;
  display: inline-block;
}

.error-404__link:hover {
  color: var(--color-accent);
}


/* ============================
   UTILITY BAR: SCRIPT TOGGLE (Ћир / Lat)
   ============================ */
.site-utility-bar__lang-link {
  color: inherit;
  text-decoration: none;
  font-weight: 400;
  transition: color 0.15s ease;
}

.site-utility-bar__lang-link:hover {
  color: var(--color-red);
}

.site-utility-bar__lang-link.is-active {
  font-weight: 700;
  pointer-events: none;
  cursor: default;
}

.site-utility-bar__lang-link.is-active:hover {
  color: inherit;
}

.site-utility-bar__lang-sep {
  opacity: 0.5;
  margin: 0 0.25em;
}


/* ============================================================
   Breadcrumb (single-interview, may be reused on other CPT views later)
   ============================================================ */

.breadcrumb {
	margin-bottom: var(--space-6);
	font-family: var(--font-sans);
	font-size: var(--text-small);
	color: var(--color-text-muted);
	line-height: 1.5;
	text-align: left;
}

.breadcrumb__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

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

.breadcrumb__link {
	color: var(--color-text-muted);
	text-decoration: none;
	transition: color 0.15s ease;
}

.breadcrumb__link:hover,
.breadcrumb__link:focus {
	color: var(--color-red);
	text-decoration: underline;
}

.breadcrumb__separator {
	color: var(--color-text);
	font-size: 1.1em;
	font-weight: 600;
	opacity: 0.6;
}

.breadcrumb__current {
	color: var(--color-text);
	font-weight: 500;
	/* Allow long titles to wrap rather than blow out the row. */
	overflow-wrap: anywhere;
}



/* ============================================================
   Footer logo
   ============================================================ */

.footer-col__logo {
	display: inline-block;
	margin-bottom: var(--space-4);
}

.footer-col__logo-image {
	display: block;
	max-width: 220px;
	height: auto;
	width: 100%;
}

.footer-col__mission {
	font-family: var(--font-display);
	font-size: var(--text-base);
	font-style: italic;
	line-height: 1.5;
	color: var(--color-text-muted);
	max-width: 32ch;
}

/* ============================================================
   Comments section
   ============================================================ */

.comments-area {
	font-family: var(--font-sans);
	margin-top: var(--space-12);
	padding-top: var(--space-8);
	border-top: 1px solid var(--color-rule);
	color: var(--color-text);
}

.comments-area__title {
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-weight: 600;
	margin: 0 0 var(--space-6);
	color: var(--color-text);
}

.comment-list {
	list-style: none;
	margin: 0 0 var(--space-8);
	padding: 0;
}

.comment-list .comment,
.comment-list .pingback {
	padding: var(--space-5) 0;
	border-bottom: 1px solid var(--color-rule);
}

.comment-list .children {
	list-style: none;
	margin-top: var(--space-5);
	margin-left: var(--space-6);
	padding-left: var(--space-5);
	border-left: 2px solid var(--color-rule);
}

.comment-body {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-4);
	align-items: start;
}

.comment-author {
	grid-column: 2;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.comment-author .avatar {
	grid-column: 1;
	grid-row: 1 / span 3;
	border-radius: 50%;
	display: block;
}

.comment-author .fn {
	font-weight: 600;
	font-style: normal;
	color: var(--color-text);
}

.comment-author .fn a {
	color: inherit;
	text-decoration: none;
}

.comment-author .fn a:hover,
.comment-author .fn a:focus {
	color: var(--color-red);
	text-decoration: underline;
}

.comment-author .says {
	display: none; /* "kaže" / "says" — visually redundant, keep for screen readers via .says class if needed */
}

.comment-meta {
	grid-column: 2;
	font-size: var(--text-tiny);
	color: var(--color-text-muted);
	margin-bottom: var(--space-2);
}

.comment-meta a {
	color: var(--color-text-muted);
	text-decoration: none;
}

.comment-meta a:hover,
.comment-meta a:focus {
	color: var(--color-red);
	text-decoration: underline;
}

.comment-content {
	grid-column: 2;
	font-size: var(--text-base);
	line-height: 1.6;
}

.comment-content p {
	margin: 0 0 var(--space-3);
}

.comment-content p:last-child {
	margin-bottom: 0;
}

.reply {
	grid-column: 2;
	margin-top: var(--space-3);
}

.comment-reply-link,
.comment-edit-link {
	font-size: var(--text-tiny);
	color: var(--color-red);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 600;
	margin-right: var(--space-3);
}

.comment-reply-link:hover,
.comment-reply-link:focus,
.comment-edit-link:hover,
.comment-edit-link:focus {
	text-decoration: underline;
}

.comments-navigation {
	margin: var(--space-8) 0;
	display: flex;
	justify-content: space-between;
	font-size: var(--text-small);
}

.no-comments {
	color: var(--color-text-muted);
	font-style: italic;
}

/* ============================================================
   Comment form
   ============================================================ */

.comment-respond {
	margin-top: var(--space-10);
	padding-top: var(--space-8);
	border-top: 1px solid var(--color-rule);
}

.comment-reply-title {
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-weight: 600;
	margin: 0 0 var(--space-5);
	color: var(--color-text);
}

.comment-reply-title small {
	font-size: var(--text-small);
	font-weight: 400;
	margin-left: var(--space-3);
}

.comment-notes,
.logged-in-as {
	font-size: var(--text-small);
	color: var(--color-text-muted);
	margin: 0 0 var(--space-5);
}

.comment-notes a,
.logged-in-as a {
	color: var(--color-text);
	text-decoration: underline;
}

.comment-notes a:hover,
.logged-in-as a:hover {
	color: var(--color-red);
}

.comment-form-comment,
.comment-form-author,
.comment-form-email,
.comment-form-url,
.comment-form-cookies-consent {
	margin-bottom: var(--space-4);
}

.comment-form label {
	display: block;
	font-size: var(--text-small);
	font-weight: 600;
	color: var(--color-text);
	margin-bottom: var(--space-2);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	max-width: 100%;
	padding: var(--space-3);
	border: 1px solid var(--color-rule);
	border-radius: 0;
	font-family: var(--font-sans);
	font-size: var(--text-base);
	background-color: var(--color-bg);
	color: var(--color-text);
	box-sizing: border-box;
	transition: border-color 0.15s ease;
}

.comment-form textarea {
	min-height: 140px;
	resize: vertical;
	line-height: 1.5;
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
	outline: none;
	border-color: var(--color-text);
}

.comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
}

.comment-form-cookies-consent input {
	margin-top: 0.25em;
}

.comment-form-cookies-consent label {
	font-weight: 400;
	color: var(--color-text-muted);
	font-size: var(--text-small);
	margin-bottom: 0;
	cursor: pointer;
}

.form-submit {
	margin-top: var(--space-5);
	margin-bottom: 0;
}

.comment-form .submit,
.comment-form input[type="submit"] {
	background-color: var(--color-red);
	color: #FFFFFF;
	border: none;
	padding: var(--space-3) var(--space-6);
	font-family: var(--font-sans);
	font-size: var(--text-small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	cursor: pointer;
	transition: background-color 0.15s ease;
	border-radius: 0;
}

.comment-form .submit:hover,
.comment-form input[type="submit"]:hover,
.comment-form .submit:focus,
.comment-form input[type="submit"]:focus {
	background-color: var(--color-text);
}

@media (min-width: 768px) {
	.comment-form-author,
	.comment-form-email,
	.comment-form-url {
		display: inline-block;
		width: calc(33.333% - var(--space-3));
		margin-right: var(--space-3);
		vertical-align: top;
	}

	.comment-form-url {
		margin-right: 0;
	}
}


/* =========================================================
   Page body — typography for content pages
   (Politika privatnosti, Uslovi, Kolačići, Impresum)
   ========================================================= */

.page__header {
  margin-top: var(--space-8, 2.5rem);
  margin-bottom: var(--space-6, 1.5rem);
}

.page__body {
  padding: 0 0 var(--space-10, 4rem);
  color: var(--color-text);
}

.page__body p,
.page__body li {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text);
}

.page__body p {
  margin: 0 0 var(--space-5, 1.25rem);
}

.page__body h2,
.page__body h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text);
  margin: var(--space-8, 2.5rem) 0 var(--space-4, 1rem);
}

.page__body h2 {
  font-size: var(--text-h2);
}

.page__body h3 {
  font-size: var(--text-h3);
}

.page__body strong {
  font-weight: 600;
  color: var(--color-text);
}

.page__body a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.page__body a:hover,
.page__body a:focus {
  text-decoration: none;
}

.page__body ul,
.page__body ol {
  margin: 0 0 var(--space-6, 1.5rem);
  padding-left: var(--space-6, 1.5rem);
}

.page__body li {
  margin-bottom: var(--space-3, 0.75rem);
}

.page__body > *:first-child {
  margin-top: 0;
}

.page__body > *:last-child {
  margin-bottom: 0;
}

/* Mobile */
@media (max-width: 640px) {
  .page__header {
    margin-top: var(--space-6, 1.5rem);
    margin-bottom: var(--space-5, 1.25rem);
  }

  .page__body {
    padding: 0 var(--space-5, 1.25rem) var(--space-8, 2.5rem);
  }

  .page__body p,
  .page__body li {
    font-size: 1rem;
  }
}



.page__body ul {
  list-style: disc;
  padding-left: var(--space-6, 1.5rem);
}

.page__body ol {
  list-style: decimal;
  padding-left: var(--space-6, 1.5rem);
}

.page__body li {
  margin-bottom: var(--space-3, 0.75rem);
  padding-left: var(--space-2, 0.5rem);
}

.page__body li::marker {
  color: var(--color-accent);
}


/* ============================
   SAGOVORNIK PREFIX ON CARDS / LISTS
   Rendered above each interview title across all card types.
   Helper: intervjulink_render_card_sagovornik()
   ============================ */

/* Standard cards in 2 / 3 / 4 column grids */
.article-card__sagovornik,
.card__sagovornik {
	font-family: var(--font-display);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--color-text);
	margin: 0 0 var(--space-2) 0;
}

@media (min-width: 768px) {
	.article-card__sagovornik,
	.card__sagovornik {
		font-size: 1.125rem;
	}
}

/* Archive / category / search cards (flex column with gap, so no margin) */
.archive-card__sagovornik {
	font-family: var(--font-display);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--color-text);
	margin: 0;
}

@media (min-width: 768px) {
	.archive-card__sagovornik {
		font-size: 1.125rem;
	}
}

/* Hero feature on homepage: slightly larger to match larger title */
.hero-feature__sagovornik {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--color-text);
	margin: 0 0 var(--space-3) 0;
}

@media (min-width: 900px) {
	.hero-feature__sagovornik {
		font-size: 1.5rem;
	}
}

/* Small sidebar lists: hero-list (homepage), related-list (single) */
.hero-list__sagovornik,
.related-list__sagovornik {
    font-family: var(--font-display);
    font-size: 0.9rem;       /* ~12px — was 14px */
    font-weight: 500;          /* match title weight */
    line-height: 1.3;
    color: var(--color-text);
    margin: 0;
}


/* ============================
   HOMEPAGE: INTERVIEW GRID (8 tiles)
   Replaces the former single hero-feature. No dominant interview.
   ============================ */

.hero-grid-section {
	padding: var(--space-8) 0 var(--space-12);
	border-bottom: 1px solid var(--color-rule);
}

.hero-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr); /* mobile: 2 columns, like the-talks.com */
	gap: var(--space-3);
}

@media (min-width: 700px) {
	.hero-grid {
		grid-template-columns: repeat(4, 1fr); /* desktop: 4 columns -> 4 x 2 */
		gap: var(--space-4);
	}
}

.hero-tile {
	position: relative;
	aspect-ratio: 1 / 1;
	background-size: cover;
	background-position: center top; /* bias toward faces */
	background-color: var(--color-rule);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: var(--space-4);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
	text-decoration: none;
}

@media (min-width: 700px) {
	.hero-tile {
		padding: var(--space-5);
	}
}

.hero-tile::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.8) 100%);
	z-index: -1;
	transition: background 0.3s ease;
}

.hero-tile:hover::before {
	background: linear-gradient(180deg, rgba(230,57,70,0.15) 0%, rgba(0,0,0,0.6) 55%, rgba(0,0,0,0.9) 100%);
}

.hero-tile:hover {
	color: #fff;
}

.hero-tile__content {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.hero-tile__sagovornik {
	font-family: var(--font-display);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
	margin: 0;
	opacity: 0.95;
}

@media (min-width: 700px) {
	.hero-tile__sagovornik {
		font-size: 0.9375rem;
	}
}

.hero-tile__title {
	font-family: var(--font-display);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.18;
	margin: 0;
	color: #fff;
}

@media (min-width: 700px) {
	.hero-tile__title {
		font-size: 1.25rem;
	}
}



/* Mobile menu social icons (in .site-categories-nav) */
.site-categories-nav__social {
  display: none;
}

.site-categories-nav--open .site-categories-nav__social {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  align-items: center;
  margin-top: var(--space-lg);
}

.site-categories-nav__social a {
  display: inline-flex;
  color: currentColor;
}

/* Keep it mobile-only: hide inside the open menu on desktop where the nav is always visible */
@media (min-width: 768px) {
  .site-categories-nav--open .site-categories-nav__social {
    display: none;
  }
}



@media (max-width: 768px) {
.site-categories-nav__social {
	display: none;
}
}


.site-footer__credit {
    display: block; /* or inline with a separator on desktop */
    color: var(--color-text-muted);
	font-family: var(--font-sans);
font-size: var(--text-tiny);
}
.site-footer__credit a {
    color: inherit;
}