/* Article cover sits below the breadcrumb bar — trim its height accordingly */
.single-article .cover {
  min-height:calc(100vh - 159px)
}

@media(max-width:780px) {
  .single-article .cover {
    min-height:calc(100vh - 130px)
  }
}

/* Breadcrumb strip */
.crumbs {
  background:var(--text);
  color:var(--border);
  font-family:var(--sans);
  font-size:.65rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  padding:.85rem 3rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:600;
  gap:1rem;
  border-bottom:1px solid rgba(255,255,255,.08)
}

.crumbs a {
  color:var(--border-strong)
}

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

.crumbs .sep {
  color:var(--accent);
  opacity:.6;
  margin:0 .8rem
}

.crumbs .yellow {
  color:var(--accent);
  font-weight:700
}

/* Cover meta strip */
.cover__meta-strip {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  background:rgba(44,64,67,.55);
  backdrop-filter:blur(8px);
  border-top:1px solid rgba(255,255,255,.1);
  padding:1.1rem 3rem;
  font-family:var(--sans);
  font-size:.65rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:#CABFA3;
  font-weight:600;
  display:flex;
  gap:2.4rem;
  align-items:center;
  flex-wrap:wrap;
  z-index:3
}

.cover__meta-strip strong {
  color:#fff;
  font-weight:700
}

.cover__meta-strip .sep {
  opacity:.4;
  color:var(--accent)
}

/* Article body — single centered column */
.article {
  max-width:1280px;
  margin:0 auto;
  padding:0 3rem
}

.article-body {
  max-width:720px;
  margin:0 auto;
  padding:5rem 0 4rem
}

.article-body > p {
  font-size:1.1rem;
  line-height:1.75;
  color:var(--text-soft);
  margin-bottom:1.4rem;
  text-wrap:pretty
}

.article-body > p:first-of-type {
  font-family:var(--serif);
  font-size:1.45rem;
  line-height:1.55;
  color:var(--text);
  font-weight:500;
  letter-spacing:-.01em;
  margin-bottom:2.4rem
}

.article-body > p:first-of-type::first-letter {
  font-family:var(--display);
  font-weight:400;
  font-size:6.5rem;
  line-height:.85;
  float:left;
  padding:.45rem .65rem 0 0;
  color:var(--accent-strong)
}

.article-body p strong {
  color:var(--text);
  font-weight:700
}

.article-body h2,.article-body h3 {
  font-family:var(--sans);
  font-weight:700;
  line-height:1.3;
  color:var(--text);
  margin:2.4rem 0 .8rem;
  letter-spacing:-.01em
}

.article-body h2 {
  font-size:1.6rem
}

.article-body h3 {
  font-size:1.3rem
}

.article-body ul,.article-body ol {
  margin:0 0 1.4rem 1.4rem;
  color:var(--text-soft);
  font-size:1.1rem;
  line-height:1.7
}

.article-body ul {
  list-style:disc
}

.article-body ol {
  list-style:decimal
}

.article-body li {
  margin-bottom:.5rem
}

.article-body a {
  color:var(--text);
  border-bottom:1px solid var(--accent);
  transition:color .2s
}

.article-body a:hover {
  color:var(--accent-strong)
}

/* Editor images / figures */
.article-body img {
  width:100%;
  display:block;
  aspect-ratio:16/9;
  object-fit:cover;
  background:var(--text);
  margin:3rem 0 .9rem
}

.article-body figure {
  margin:3rem 0
}

.article-body figure img {
  margin:0
}

.article-body figcaption {
  margin-top:.9rem;
  font-family:var(--sans);
  font-size:.78rem;
  line-height:1.5;
  color:var(--text-muted)
}

/* Blockquotes styled as pull quotes */
.article-body blockquote {
  margin:2.6rem 0;
  padding:2.2rem 0 2.2rem 2rem;
  border-left:4px solid var(--accent);
  font-family:var(--display);
  font-weight:400;
  font-size:2rem;
  line-height:1.15;
  letter-spacing:.005em;
  color:var(--text);
  text-wrap:balance
}

.article-body blockquote p {
  font:inherit;
  color:inherit;
  margin:0
}

.article-body blockquote cite {
  display:block;
  margin-top:1.1rem;
  font-family:var(--sans);
  font-style:normal;
  font-size:.62rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--text-muted)
}

/* Tags */
.tags {
  margin-top:3rem;
  padding-top:1.8rem;
  border-top:1px solid rgba(44,64,67,.14);
  display:flex;
  flex-wrap:wrap;
  gap:.5rem
}

.tag {
  font-family:var(--sans);
  font-size:.6rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--text);
  background:transparent;
  padding:.5rem .85rem;
  border:1px solid var(--text);
  transition:all .2s
}

.tag:hover {
  background:var(--text);
  color:var(--accent)
}

/* Related */
.related {
  background:var(--text);
  color:#fff;
  padding:5rem 3rem;
  border-top:3px solid var(--accent)
}

.related__in {
  max-width:1280px;
  margin:0 auto
}

.related__h {
  display:flex;
  justify-content:space-between;
  align-items:end;
  border-bottom:1px solid rgba(255,255,255,.18);
  padding-bottom:1rem;
  margin-bottom:2.4rem;
  gap:1rem;
  flex-wrap:wrap
}

.related__h h3 {
  font-family:var(--display);
  font-weight:400;
  font-size:2.4rem;
  line-height:1;
  color:#fff;
  letter-spacing:.005em
}

.related__h h3 small {
  display:block;
  font-family:var(--sans);
  font-size:.6rem;
  letter-spacing:.3em;
  color:var(--accent);
  font-weight:700;
  margin-bottom:.5rem;
  text-transform:uppercase
}

.related__h a {
  font-family:var(--sans);
  font-size:.66rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:700;
  border-bottom:1px solid var(--accent);
  padding-bottom:2px
}

.related__grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem
}

.rcard {
  cursor:pointer;
  display:flex;
  flex-direction:column
}

.rcard-img {
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--text);
  margin-bottom:1.2rem;
  position:relative
}

.rcard-img img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .55s
}

.rcard:hover .rcard-img img {
  transform:scale(1.04)
}

.rcard-region {
  font-family:var(--sans);
  font-size:.6rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:700;
  margin-bottom:.5rem
}

.rcard h4 {
  font-family:var(--sans);
  font-weight:600;
  font-size:1.2rem;
  line-height:1.25;
  letter-spacing:-.01em;
  color:#fff;
  margin-bottom:.6rem;
  text-wrap:pretty
}

.rcard-meta {
  margin-top:auto;
  padding-top:.9rem;
  border-top:1px solid rgba(255,255,255,.14);
  font-family:var(--sans);
  font-size:.6rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--border-strong);
  font-weight:600;
  display:flex;
  justify-content:space-between;
  gap:1rem
}

.rcard-meta strong {
  color:#fff;
  font-weight:700
}

@media(max-width:980px) {
  .related__grid {
    grid-template-columns:repeat(2,1fr);
    gap:1.5rem
  }
}

@media(max-width:780px) {
  .crumbs {
    padding:.7rem 1.2rem;
    font-size:.55rem;
    letter-spacing:.2em
  }
  .crumbs .sep {
    margin:0 .4rem
  }
  .cover__meta-strip {
    padding:.9rem 1.2rem;
    gap:1.2rem;
    font-size:.55rem
  }
  .article {
    padding:0 1.2rem
  }
  .article-body {
    padding:3rem 0
  }
  .article-body > p:first-of-type {
    font-size:1.2rem
  }
  .article-body > p:first-of-type::first-letter {
    font-size:4.5rem
  }
  .related {
    padding:3rem 1.2rem
  }
  .related__grid {
    grid-template-columns:1fr
  }
  .related__h h3 {
    font-size:1.7rem
  }
}

/* Compact mobile cover. Placed last so it wins at mobile widths.
   Plaque flows below the caption (static) so it never overlaps the title. */
@media(max-width:880px) {
  .single-article .cover {
    min-height:52vh
  }
  .cover__in {
    padding:2.4rem 1.2rem 1.5rem
  }
  .cover__meta-strip {
    position:static;
    padding:.9rem 1.2rem;
    gap:.35rem;
    font-size:.55rem;
    flex-direction:column;
    align-items:flex-start
  }
  .cover__meta-strip .sep {
    display:none
  }
}