/* ==========================================================================
   INDUSTRY UPDATES
   Set like a newspaper, on the index and inside the story.

   The devices are borrowed from print and each does a job: a heavy rule over
   an all caps nameplate, a dateline in italic, stories separated by rules
   rather than boxed in cards, bylines in small caps at the foot, and a drop
   cap opening the article. No card chrome anywhere in this section.

   Photography ships greyscale and colours on hover, so the page reads as ink
   on paper until the reader shows interest in one story.
   ========================================================================== */

/* ==========================================================================
   INDEX: the front page
   ========================================================================== */
.press-head {
  border-top: 3px solid var(--c-ink);
  border-bottom: 1px solid var(--c-ink);
  padding-block: var(--s-4) var(--s-4);
  margin-bottom: var(--s-6);
}
.press-head h1 {
  font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.2rem);
  line-height: 1.06;
}
.press-head__dateline {
  margin-top: var(--s-3);
  font-size: var(--fs-sm);
  font-style: italic;
  color: var(--c-ink-2);
}

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

/* Each story is a ruled row, not a card. The first gets the lead treatment. */
.update-row {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: var(--s-6);
  padding-block: var(--s-6);
  border-top: 1px solid var(--c-rule-strong);
  text-decoration: none;
  color: inherit;
}
.update-list > li:first-child .update-row { border-top: 0; padding-top: 0; }
.update-list > li:last-child .update-row { border-bottom: 1px solid var(--c-rule-strong); }

.update-row__meta {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  color: var(--c-ink-3);
}
.update-row__cat {
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-ink-3);
  transition: color var(--dur) var(--ease);
}
.update-row:hover .update-row__cat { color: var(--c-accent-2); }
.update-row__date { font-variant-numeric: tabular-nums; }

.update-row__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--tracking-display);
  max-width: 34ch;
  text-wrap: balance;
  transition: color var(--dur) var(--ease);
}
.update-row:hover .update-row__title { color: var(--c-accent-2); }

.update-row__why {
  margin-top: var(--s-3);
  color: var(--c-ink-2);
  line-height: 1.6;
  max-width: var(--w-read);
}
.update-row__source {
  margin-top: var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px solid var(--c-rule);
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}

/* ==========================================================================
   ARTICLE: the story
   ========================================================================== */
.update-head {
  padding-block: var(--s-7) var(--s-5);
}
.update-head h1 {
  max-width: 22ch;
  margin-top: var(--s-3);
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3rem);
  line-height: 1.08;
}

/* The kicker sits over a heavy rule, the way a section label does in print. */
.update-kicker {
  border-top: 3px solid var(--c-ink);
  padding-top: var(--s-3);
}
.update-meta__cat {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-accent-2);
  text-decoration: none;
}
a.update-meta__cat:hover { text-decoration: underline; text-underline-offset: 3px; }

/* The byline rule: thin above, thick below, which is the print convention for
   separating the furniture from the story. */
.update-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-5);
  padding-block: var(--s-3);
  border-top: 1px solid var(--c-rule-strong);
  border-bottom: 3px solid var(--c-ink);
  font-size: var(--fs-sm);
  color: var(--c-ink-3);
}
.update-meta time { font-variant-numeric: tabular-nums; }

/* A drop cap opens the story. Three lines deep, in the editorial terracotta
   rather than pine, because nothing here is clickable. */
.update-body > p:first-of-type::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 3.4em;
  line-height: 0.82;
  font-weight: 600;
  color: var(--c-accent-2);
  padding-right: 0.08em;
  margin-top: 0.04em;
}
.update-body > p:first-of-type {
  font-size: 1.06rem;
}

/* Section headings inside the story read as standfirsts, with a rule over
   them, which is how a broadsheet breaks a long piece. */
.update-body h2 {
  margin-top: var(--s-7);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-rule-strong);
  font-size: 1.3rem;
  letter-spacing: var(--tracking-display);
}

/* ---- Source, set as a print credit ------------------------------------- */
.update-source {
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  border-top: 3px solid var(--c-ink);
}
.update-source__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-ink-3);
}
.update-source__pub {
  margin-top: var(--s-2);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
}
.update-source__date { margin-top: var(--s-1); font-size: var(--fs-sm); color: var(--c-ink-3); font-style: italic; }
.update-source a {
  display: inline-block;
  margin-top: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--c-accent);
  overflow-wrap: anywhere;
}

.update-end {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-rule-strong);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 760px) {
  .update-row { grid-template-columns: 1fr; gap: var(--s-3); }
  .update-row__meta { flex-direction: row; align-items: baseline; gap: var(--s-4); }
  .update-row__title { font-size: 1.24rem; max-width: none; }
  .update-body > p:first-of-type::first-letter { font-size: 3em; }
}
@media (max-width: 600px) {
  .update-end .btn { width: 100%; }
}