/* ══════════════════════════════════════════════
   TERZA STUDIO — article page
   Layout only; colour, face and step come from the
   tokens in css/colors|typography|spacing|radius.
   ══════════════════════════════════════════════ */

/* ══ ARTICLE HEAD ═════════════════════════════ */
.article-head {
  padding-block: clamp(130px, 15vh, 180px) var(--space-xl);
  text-align: center;
}

.article-head-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.article-category {
  margin-bottom: var(--space-md);
  color: var(--color-accent);
  font-weight: var(--fw-600);
}

.article-title {
  max-width: 20ch;
  font-size: var(--text-48px);
  line-height: var(--lh-1-1);
  margin-bottom: var(--space-lg);
  text-wrap: balance;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-size: var(--text-16px);
  color: var(--color-text-subtle);
}

.article-byline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* date + read time travel as one unit — nowrap keeps the separator that
   leads it from ever being stranded alone at the start of a wrapped line,
   which is what plain flex-wrap on .article-meta used to do once the
   byline no longer fit beside it */
.article-meta-details {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: nowrap;
}

.article-byline b {
  font-weight: var(--fw-500);
  color: var(--color-text);
}

.article-avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  corner-shape: round;
  object-fit: cover;
  border: 1px solid var(--color-border-subtle);
}

.article-meta-sep {
  width: 1px;
  height: 14px;
  background: var(--color-border);
}

/* ══ COVER ════════════════════════════════════ */
.article-cover {
  margin: 0;
}

.article-cover img {
  width: 100%;
  height: clamp(220px, 30vw, 420px);
  object-fit: cover;
  /* per-article focal point; 50% keeps the default centred crop */
  object-position: center var(--cover-focus, 50%);
}

/* ══ BODY GRID ════════════════════════════════ */
.article-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(var(--space-xl), 5vw, var(--space-3xl));
  align-items: start;
  padding-block: var(--space-2xl) var(--space-3xl);
}

.article-main>p {
  margin: 0 0 var(--space-md);
  max-width: 72ch;
  font-size: var(--text-18px);
  line-height: var(--lh-1-75);
  color: var(--color-text-muted);
}

.article-h2 {
  font-size: var(--text-40px);
  line-height: var(--lh-1-2);
  margin: var(--space-xl) 0 var(--space-md);
  scroll-margin-top: 120px;
}

/* ══ BANDS ════════════════════════════════════ */
/* contained in the article column — no bleed past its left edge */
.article-band {
  margin-block: var(--space-xl);
  /* <figure> carries a UA margin-inline of 40px — clear it so every band
     fills the column edge to edge */
  margin-inline: 0;
  padding-inline: var(--space-xl);
  background: var(--color-bg-subtle);
}

/* ── pull quote ─────────────────────────────── */
.article-quote {
  padding-block: var(--space-2xl);
  text-align: center;
}

.article-quote blockquote {
  margin: 0 auto var(--space-md);
  max-width: 26ch;
  font-family: var(--font-serif);
  font-size: var(--text-34px);
  line-height: var(--lh-1-24);
  letter-spacing: var(--ls-neg-0-015em);
  color: var(--color-accent);
  text-wrap: balance;
}

.article-quote figcaption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-ui);
  font-size: var(--text-12px);
  font-weight: var(--fw-600);
  letter-spacing: var(--ls-0-14em);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.article-quote-rule {
  width: 34px;
  height: 1px;
  background: var(--color-border);
}

/* ── three pillars ──────────────────────────── */
.article-pillars {
  padding-block: var(--space-2xl);
}

.article-band-eyebrow {
  margin-bottom: var(--space-sm);
  color: var(--color-accent);
  font-weight: var(--fw-600);
}

.article-pillars .article-h2 {
  margin: 0 0 var(--space-lg);
}

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}

.pillar {
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  transition: border-color .4s var(--ease-out-expo), background .4s var(--ease-out-expo);
}

.pillar:hover {
  border-color: var(--color-accent);
  background: var(--color-bg);
}

.pillar-title {
  font-size: var(--text-24px);
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.pillar-desc {
  margin: 0;
  font-size: var(--text-16px);
  line-height: var(--lh-1-6);
  color: var(--color-text-muted);
}

/* ── stats ──────────────────────────────────── */
.article-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  padding-block: var(--space-xl);
  text-align: center;
}

.article-stats li {
  display: grid;
  gap: 4px;
}

.article-stats b {
  font-size: var(--text-34px);
  letter-spacing: var(--ls-neg-0-02em);
}

.article-stats span {
  font-size: var(--text-12px);
  color: var(--color-text-subtle);
}

/* ── gallery ────────────────────────────────── */
.article-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
  padding-block: var(--space-xl);
}

/* the figure carries the ratio; a bare <img> in a grid item takes its
   row from its own intrinsic height and ignores aspect-ratio */
.article-gallery figure {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-xs);
  border: 1px solid var(--color-border-subtle);
}

.article-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── numbered rules ────────────────────────── */
.article-rules {
  padding-block: var(--space-2xl);
}

.rule-list {
  display: grid;
  gap: var(--space-lg);
  counter-reset: rule;
}

/* the number keeps its own column so every rule shares one left edge
   for its copy, no matter how wide the counter renders */
.rule {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-md);
  row-gap: var(--space-sm);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  counter-increment: rule;
}

.rule:first-child {
  padding-top: 0;
  border-top: 0;
}

.rule::before {
  content: counter(rule, decimal-leading-zero);
  grid-row: span 2;
  padding-top: 6px;
  font-family: var(--font-ui);
  font-size: var(--text-12px);
  font-weight: var(--fw-600);
  letter-spacing: var(--ls-0-14em);
  color: var(--color-accent);
}

.rule-title {
  font-size: var(--text-24px);
  color: var(--color-accent);
}

.rule-body p {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-16px);
  line-height: var(--lh-1-6);
  color: var(--color-text-muted);
}

.rule-body p:last-child {
  margin-bottom: 0;
}

/* the author's aside on rule five — a footnote, not body copy */
.rule-note {
  font-style: italic;
  color: var(--color-text-subtle);
}

/* ── sub-headings inside the flow ───────────── */
.article-h3 {
  font-size: var(--text-24px);
  line-height: var(--lh-1-3);
  margin: var(--space-lg) 0 var(--space-sm);
  scroll-margin-top: 120px;
}

/* ── lists in body copy ─────────────────────── */
/* the global reset strips the marker off every ul and ol, so a list in the
   prose has to draw its own — which is the chance to make it match the copy
   rather than inherit a browser bullet */
.article-list {
  display: grid;
  gap: var(--space-xs);
  margin: 0 0 var(--space-md);
  max-width: 72ch;
  font-size: var(--text-18px);
  line-height: var(--lh-1-75);
  color: var(--color-text-muted);
  counter-reset: article-item;
}

.article-list li {
  position: relative;
  padding-left: 1.6em;
  counter-increment: article-item;
}

.article-list li::before {
  content: '\2022';
  position: absolute;
  left: 0;
  color: var(--color-accent);
}

/* numbered when the order is the point — a sequence, not a set */
.article-list.is-numbered li::before {
  content: counter(article-item) '.';
  top: .1em;
  font-family: var(--font-ui);
  font-size: var(--text-14px);
  font-weight: var(--fw-600);
  font-variant-numeric: tabular-nums;
}

/* ── table ──────────────────────────────────── */
/* the widest thing that can land in the column, so it scrolls inside its own
   box and the page body never scrolls sideways behind it */
.article-table-wrap {
  margin: var(--space-lg) 0;
  max-width: 72ch;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
}

.article-table {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  background: var(--color-bg-subtle);
  text-align: left;
}

.article-table caption {
  caption-side: top;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-fill);
  font-family: var(--font-ui);
  font-size: var(--text-12px);
  font-weight: var(--fw-600);
  letter-spacing: var(--ls-0-14em);
  text-transform: uppercase;
  color: var(--color-text-subtle);
  text-align: left;
}

.article-table th,
.article-table td {
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--color-border-subtle);
  vertical-align: top;
  font-size: var(--text-16px);
  line-height: var(--lh-1-6);
}

/* the label column names the criterion, the cell carries the example */
.article-table th {
  width: 26%;
  font-family: var(--font-ui);
  font-size: var(--text-14px);
  font-weight: var(--fw-600);
  letter-spacing: var(--ls-0-06em);
  color: var(--color-text);
  white-space: nowrap;
}

.article-table td {
  color: var(--color-text-muted);
}

/* ── inline reference figures ───────────────── */
.article-figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  margin-block: var(--space-xl);
  max-width: 72ch;
}

/* a standalone figure needs its own air; inside the pair the grid gap
   already provides it. the UA margin-inline has to go either way */
.article-figure {
  margin-block: var(--space-lg);
  margin-inline: 0;
}

.article-figures .article-figure {
  margin-block: 0;
}

.article-figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-xs);
  border: 1px solid var(--color-border-subtle);
}

.article-figure figcaption,
.article-cover figcaption {
  margin-top: var(--space-xs);
  font-family: var(--font-ui);
  font-size: var(--text-12px);
  letter-spacing: var(--ls-0-06em);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.article-cover figcaption {
  text-align: center;
}

/* ── links in body copy ─────────────────────── */
.article-main a.text-link {
  color: var(--color-accent);
  font-weight: var(--fw-500);
}

/* ══ SIDEBAR ══════════════════════════════════ */
/* sticky has to sit on the grid item itself: the inner wrapper is only
   as tall as its own content, so it had no room to travel. the item's
   containing block is the grid, which runs the length of the article */
.article-side {
  position: sticky;
  /* clears the fixed nav when the column pins */
  top: 110px;
  align-self: start;
  /* if the rail ever outgrows the viewport, let it scroll itself */
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.article-side-inner {
  display: grid;
  gap: var(--space-xl);
}

.article-side-title {
  font-size: var(--text-24px);
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.article-toc ul {
  display: grid;
  border-top: 1px solid var(--color-border-subtle);
}

.article-toc-link {
  display: block;
  padding: var(--space-sm) var(--space-sm);
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: var(--text-16px);
  line-height: var(--lh-1-4);
  color: var(--color-text-muted);
  transition: color .3s var(--ease-out-expo), background .3s var(--ease-out-expo);
}

.article-toc-link:hover {
  color: var(--color-text);
}

.article-toc-link.is-active {
  background: var(--color-bg-subtle);
  color: var(--color-text);
  font-weight: var(--fw-500);
}

/* ── related articles ───────────────────────── */
.article-related ul {
  display: grid;
  gap: var(--space-md);
}

.related-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: start;
}

.related-card img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius-xs);
  border: 1px solid var(--color-border-subtle);
  transition: border-color .4s var(--ease-out-expo);
}

.related-card:hover img {
  border-color: var(--color-accent);
}

/* a post can be published before its artwork is. the square still holds the
   grid column so the list stays aligned, with the category standing in for
   the image rather than an empty box */
.related-thumb-text {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-subtle);
  font-family: var(--font-serif);
  font-size: var(--text-14px);
  color: var(--color-text-subtle);
  transition: border-color .4s var(--ease-out-expo), color .3s var(--ease-out-expo);
}

.related-card:hover .related-thumb-text {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.related-meta {
  display: grid;
  gap: 3px;
}

.related-category {
  font-family: var(--font-ui);
  font-size: var(--text-12px);
  font-weight: var(--fw-600);
  letter-spacing: var(--ls-0-12em);
  text-transform: uppercase;
  color: var(--color-accent);
}

.related-title {
  font-family: var(--font-serif);
  font-size: var(--text-16px);
  line-height: var(--lh-1-3);
  transition: color .3s var(--ease-out-expo);
}

.related-card:hover .related-title {
  color: var(--color-accent);
}

.related-time {
  font-size: var(--text-12px);
  color: var(--color-text-subtle);
}

/* ══ RESPONSIVE ═══════════════════════════════ */
@media (max-width: 1200px) {
  .article-body {
    grid-template-columns: minmax(0, 1fr);
  }

  /* the sidebar reads as a footer to the piece once it drops below */
  .article-side {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .article-side-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--color-border-subtle);
  }

  .article-title {
    font-size: var(--text-40px);
  }
}

@media (max-width: 1200px) {

  .pillar-grid,
  .article-gallery,
  .article-figures,
  .article-side-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  /* the counter column costs width the copy needs more */
  .rule {
    grid-template-columns: minmax(0, 1fr);
  }

  .rule::before {
    grid-row: auto;
    padding-top: 0;
  }

  .article-stats {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
  }

  .newsletter-form {
    width: 100%;
  }

  .newsletter-input,
  .newsletter-form .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* layout goes single-column at the tablet boundary, but the title and pull
   quote only need to shrink once the column itself is genuinely narrow */
@media (max-width: 720px) {
  .article-title {
    font-size: var(--text-32px);
  }

  .article-quote blockquote {
    font-size: var(--text-24px);
  }

  /* byline and date/read-time as two deliberate centered rows rather than
     one row that happens to wrap once the byline's name and role no
     longer fit beside it — that wrap used to break mid-phrase and could
     strand the leading separator alone at the start of a line */
  .article-meta {
    flex-direction: column;
    gap: 10px;
  }

  /* the byline carries its own weight here; the avatar only crowds it */
  .article-avatar {
    display: none;
  }

  /* name above role: side by side they wrap mid-phrase at this width */
  .article-byline b {
    display: block;
  }

  /* the comma only joins the two when they share a line */
  .article-byline-comma {
    display: none;
  }

  /* nothing precedes the date on its own row, so its leading rule would
     hang off the left edge of the pair */
  .article-meta-details > .article-meta-sep:first-child {
    display: none;
  }
}