/* ==========================================================================
   TUOIL — article
   Long-form typography. No new visual devices: the same measure, hairlines
   and mono labels as the rest of the site, set for reading.
   ========================================================================== */

.s-article { padding-bottom: var(--section-pad); }

.s-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  margin-bottom: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--c-muted);
}

.s-article__body {
  max-width: 68ch;
  font-size: var(--fs-body);
}

.s-article__lead {
  font-size: var(--fs-lead);
  color: var(--c-ink);
}

.s-article__body h2 {
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-2);
  font-size: var(--fs-h3);
}

.s-article__body h3 {
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-1);
  font-size: var(--fs-h4);
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
}

.s-article__body p { margin-bottom: var(--sp-3); }

.s-article__body a {
  color: var(--c-ink);
  text-decoration-color: var(--c-border-strong);
}

.s-article__body a:hover { text-decoration-color: currentColor; }

/* --- Lists ------------------------------------------------------------------
   The marker is the same angled tick that opens sections elsewhere. */
.s-article__list { margin-bottom: var(--sp-3); }

.s-article__list li {
  position: relative;
  padding-left: var(--sp-3);
  margin-bottom: var(--sp-2);
}

.s-article__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 12px;
  height: 1px;
  background: var(--c-base);
  transform: skewX(var(--angle-neg));
}

/* --- Figure -------------------------------------------------------------------
   Wider than the text column, because a picture read at text width is a
   thumbnail. */
.s-article__figure {
  margin: var(--sp-5) 0;
  max-width: 100%;
}

.s-article__figure img {
  width: 100%;
  height: auto;
}

.s-article__caption {
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--c-muted);
}

/* --- Comparison table ---------------------------------------------------------- */
/* The comparison table steps outside the reading measure: three columns at
   text width would wrap every cell. */
.s-article__table-wrap {
  width: 780px;
  max-width: calc(100vw - var(--container-pad) * 2);
  margin: var(--sp-4) 0 var(--sp-5);
  overflow-x: auto;

  /* A shadow appears on whichever side still has content, so a table that is
     wider than a phone screen says so instead of just being cut. */
  background:
    linear-gradient(to right, var(--c-cream) 30%, rgba(252, 248, 238, 0)) left center,
    linear-gradient(to left, var(--c-cream) 30%, rgba(252, 248, 238, 0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(27, 42, 34, 0.16), rgba(27, 42, 34, 0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(27, 42, 34, 0.16), rgba(27, 42, 34, 0)) right center;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

.s-article__table { min-width: 480px; }

.s-article__table th,
.s-article__table td {
  padding: 12px var(--sp-2) 12px 0;
  border-top: 1px solid var(--c-border-strong);
  text-align: left;
  vertical-align: top;
  font-size: var(--fs-small);
}

.s-article__table thead th {
  border-top: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  color: var(--c-muted);
}

.s-article__table tbody th {
  width: 34%;
  font-weight: var(--fw-regular);
  color: var(--c-muted);
}

.s-article__table tbody td { font-weight: var(--fw-medium); }

.s-article__table tr:last-child th,
.s-article__table tr:last-child td { border-bottom: 1px solid var(--c-border-strong); }

/* --- Foot ---------------------------------------------------------------------- */
.s-article__foot {
  max-width: 68ch;
  margin-top: var(--sp-6);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-border-strong);
}

@media (max-width: 768px) {
  .s-article__body h2 { margin-top: var(--sp-5); }
}

/* --- Full-width articles --------------------------------------------------
   A policy is looked things up in rather than read straight through, and a
   reading column half the screen wide made these pages look unfinished. This
   variant drops the measure and lets the text fill the container.

   Long lines lose the reader between the end of one and the start of the
   next, so the leading opens up and the paragraphs are set a touch narrower
   in spacing terms to give the eye a return path. */
.s-article--wide .s-article__body,
.s-article--wide .s-article__foot,
.s-article--wide .page-note { max-width: none; }

.s-article--wide .s-article__body { line-height: 1.75; }

/* Two headings in a row of full-width text need more air between blocks than
   they did inside a column, or the sections run together. */
.s-article--wide .s-article__body h2 { margin-top: var(--sp-7); }

/* At full width a table can use the whole container instead of its own
   780px window. */
.s-article--wide .s-article__table-wrap { width: 100%; }