/* ==========================================================================
   matters.css — /matters index and /matters/:slug article.

   Every selector in this file is .mat-* or .star-soon. The shared primitives it
   composes with — .wrap, .prose, .prose-lede, .btn, .dot, .star, the modals —
   live in site.css and are never redefined here. No colour literals: tokens only.
   ========================================================================== */


/* -------------------------------------------------------------------- shell
   layout() gives us <main>; these supply the prototype's vertical rhythm while
   .wrap keeps the 1220px column and the gutter. */

.mat-page {
  padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 9vw, 112px);
}

/* the article starts higher — the back link sits above the headline */
.mat-page--article {
  padding-top: clamp(28px, 4vw, 48px);
}


/* ---------------------------------------------------------------- headlines */

.mat-h1 {
  margin: 0 0 16px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(34px, 6.4vw, 84px);
  line-height: 0.9;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.mat-lede {
  margin: 0 0 40px;
  max-width: 58ch;
  font-size: 18px;
  color: var(--body-ink-2);
}


/* --------------------------------------------------------------- index list */

.mat-list {
  border-top: 2px solid var(--ink);
}

.mat-item {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  padding: 26px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  transition: background 0.15s ease;
}
.mat-item:hover { background: var(--wash); }

.mat-date {
  flex: 0 0 118px;
  padding-top: 6px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
}

.mat-item-body {
  flex: 1 1 380px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mat-title {
  max-width: 28ch;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(22px, 3.2vw, 38px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--ink);
}
.mat-item:hover .mat-title { color: var(--rust); }

.mat-standfirst {
  max-width: 60ch;
  font-size: 17px;
  line-height: 1.55;
  color: var(--body-ink-2);
}

.mat-author {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--muted);
}


/* -------------------------------------------------------------- empty state
   The ink "Coming Soon." panel beside the paper mailing-list card. Two equal
   columns that collapse to one below ~640px of available width. */

.mat-empty {
  border-top: 2px solid var(--ink);
  padding-top: 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px;
  align-items: stretch;
}

.mat-soon {
  position: relative;   /* the star's positioned parent */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  padding: clamp(26px, 4vw, 44px);
  border-radius: 4px;
  background: var(--ink);
  color: var(--paper);
}

.mat-soon-h {
  position: relative;
  z-index: 2;
  margin: 0;
  max-width: 18ch;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 54px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.mat-soon-p {
  position: relative;
  z-index: 2;
  margin: 0;
  max-width: 40ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted-dark);
}

/* star-02, bled off the bottom-right corner. Hidden below 641px by site.css —
   it carries no .star-sm-keep, so small screens get the footer star only. */
.star-soon {
  right: -42px;
  bottom: -46px;
  width: 132px;
  transform: rotate(9deg);
}

.mat-alert {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  padding: clamp(26px, 4vw, 44px);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--rust);
  border-radius: 4px;
}

.mat-alert-h {
  margin: 0;
  max-width: 20ch;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(24px, 3.2vw, 38px);
  line-height: 0.94;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}

.mat-alert-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}


/* ------------------------------------------------------------------ article */

/* 22px line-height + 11px of padding either side = a 44px target */
.mat-back {
  display: inline-block;
  padding: 11px 0;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 22px;
  color: var(--muted);
}
.mat-back:hover { color: var(--rust); }

.mat-article { margin-top: 30px; }

.mat-article .mat-h1 {
  margin: 0 0 22px;
  max-width: 24ch;
  font-size: clamp(32px, 6vw, 76px);
}

.mat-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
}

/* sits on the same element as .prose, which owns the 68ch measure */
.mat-body { margin-top: 34px; }


/* --------------------------------------------------------------- pull quote
   Outside .prose, so .prose blockquote's rust left rule does not apply. Rust
   ground takes --chalk, never --paper. */

.mat-pull {
  margin: 36px 0;
  max-width: 68ch;
  padding: clamp(22px, 4vw, 40px);
  border-radius: 4px;
  background: var(--rust);
  color: var(--chalk);
}

.mat-pull p {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(24px, 3.6vw, 42px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}


/* -------------------------------------------------------------- video slot
   A 9:16 link, not an iframe. Nothing loads from a video host unless the reader
   chooses to leave, which is what the privacy notice promises. */

.mat-video {
  margin: 40px 0;
  max-width: 68ch;
}

.mat-video-box {
  width: min(320px, 100%);
  aspect-ratio: 9 / 16;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  border: 1px dashed var(--dash);
  border-radius: 4px;
  background: var(--wash);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--body-ink-2);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.mat-video-box:hover {
  border-style: solid;
  border-color: var(--rust);
  background: var(--paper);
  color: var(--rust);
}

.mat-video-box-t { font-weight: 700; }
.mat-video-box-s { color: var(--muted); }
.mat-video-box:hover .mat-video-box-s { color: var(--rust); }

.mat-video-cap {
  margin: 10px 0 0;
  max-width: 44ch;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}


/* ----------------------------------------------------------------- sources */

.mat-sources {
  margin-top: 48px;
  max-width: 68ch;
  padding-top: 26px;
  border-top: 2px solid var(--ink);
}

.mat-sources-h {
  margin: 0 0 18px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.mat-sources-list {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.6;
  color: var(--body-ink-2);
}
.mat-sources-list li::marker { color: var(--rust); }

/* padded to a comfortable target without pretending a numbered reference is a
   button: ~34px tall with 16px of clear space between neighbours */
.mat-sources-list a {
  display: inline-block;
  padding: 6px 0;
  color: var(--body-ink-2);
}
.mat-sources-list a:hover { color: var(--rust); }

.mat-sources-note {
  margin: 22px 0 0;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--rust);
}


/* ------------------------------------------------------------- small screens */

@media (max-width: 640px) {
  .mat-item {
    gap: 6px;
    padding: 22px 0;
  }
  .mat-date {
    flex: 0 0 100%;
    padding-top: 0;
  }
}