/* lc-archive.css — the editorial archive.
 *
 * Drives the `archive-post` YOOtheme template (the magazine index) and any other archive
 * template that reuses the same element classes. Everything here is measure, rhythm and
 * state; every colour resolves through the platform's own variables with the published
 * fallback, so a global style change carries into this surface without an edit here.
 *
 * The two families restated at the top are the theme's own — the display face is what
 * every heading already resolves to, and the grotesque is the theme's third family. They
 * appear because a kicker and a date are not headings, so they inherit the body serif
 * unless told otherwise, and a letterspaced micro-label set in a serif at 10px turns into
 * noise. Nothing new is introduced.
 */

.lcarc {
  --lcarc-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --lcarc-sans: "Montserrat", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --lcarc-ink: var(--cc-text, #20232a);
  --lcarc-quiet: var(--cc-muted, #6c6d74);
  --lcarc-line: var(--cc-line, rgba(30, 32, 38, .14));
}

/* ============================================================ masthead */

/* Sized against the viewport rather than the container, because this line is the only
 * thing on the first screen and has to hold it alone. The lower bound is set where the
 * longest word still fits a 320px phone on one line. */
.lcarc-title {
  margin: 0;
  font-family: var(--lcarc-display);
  font-size: clamp(32px, 5vw, 66px);
  line-height: 1.04;
  letter-spacing: -.012em;
  color: var(--lcarc-ink);
  text-wrap: balance;
  max-width: 17ch;
}

/* A cap in characters, not pixels: `maxwidth` in the builder is a fixed width, so the
 * measure has to be set here or a deck runs to whatever the container happens to be. */
.lcarc-deck p {
  margin: 0;
  max-width: 56ch;
  font-size: clamp(16.5px, 1.4vw, 19.5px);
  line-height: 1.55;
  color: var(--lcarc-quiet);
}

/* The masthead closes on the same 2px ink rule that opens every section of this
 * publication, so the archive reads as another part of the magazine rather than as a
 * blog attached to one. Below the deck rather than above the headline: a full-width
 * rule directly under the navbar reads as the header's lower edge, not as this page's. */
.lcarc-deck::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  margin-top: clamp(30px, 3.2vw, 52px);
  background: var(--lcarc-ink);
}

/* The band mark. It is not a label above a heading — it IS the heading, set in the
 * mark the publication already uses to open a section, because a band of index rows
 * has nothing else naming it. */
.lcarc-mark {
  font-family: var(--lcarc-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--lcarc-quiet);
}

.lcarc-mark::before {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  margin-bottom: .95em;
  background: var(--lcarc-ink);
}

/* ============================================================ shared card behaviour */

/* Load-bearing. The whole item is one anchor, and a text-decoration set on an <a> is
 * painted across every descendant — without this the kicker, the deck and the date all
 * gain underlines the moment a pointer arrives. The headline's own underline is
 * declared below, where it belongs. */
.lcarc .el-item > a,
.lcarc .el-item > a:hover,
.lcarc .el-item > a:focus {
  text-decoration: none;
  color: inherit;
}

.lcarc .el-item > a:focus-visible {
  outline: 2px solid var(--lcarc-ink);
  outline-offset: 5px;
}

.lcarc .el-item > a:active { opacity: .88; }

.lcarc .el-meta {
  font-family: var(--lcarc-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--lcarc-quiet);
  transition: color var(--lc-t-fast, .18s) var(--lc-ease, ease);
}

/* The underline exists at all times and only its colour changes, so arriving at a card
 * never reflows the headline under the pointer. */
.lcarc .el-title {
  font-family: var(--lcarc-display);
  color: var(--lcarc-ink);
  font-weight: 600;
  text-wrap: balance;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: .16em;
  transition: text-decoration-color var(--lc-t-base, .32s) var(--lc-ease, ease);
}

.lcarc .el-item > a:hover .el-title,
.lcarc .el-item > a:focus-visible .el-title { text-decoration-color: currentColor; }

.lcarc .el-item > a:hover .el-meta,
.lcarc .el-item > a:focus-visible .el-meta { color: var(--lcarc-ink); }

/* A filter, not a transform: the photograph has no clipping parent here, so a scaled
 * one would paint over the kicker sitting directly beneath it. */
.lcarc .el-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  background: #f0f0ee;
  transition: filter var(--lc-t-base, .32s) var(--lc-ease, ease);
}

.lcarc .el-item > a:hover .el-image { filter: contrast(1.06) saturate(1.12) brightness(1.03); }

/* ============================================================ the lead */

/* Generated at 3:2 and narrowed here. A lead the full width of the container at 3:2
 * would be 900px tall and push its own headline off the first screen; 7:3 leaves the
 * headline and the deck above the fold on a laptop. The phone gets the source ratio
 * back, because 7:3 at 390px is a letterbox strip with nothing legible in it. */
.lcarc-lead .el-image {
  aspect-ratio: 3 / 2;
}

.lcarc-lead .el-title {
  font-size: clamp(27px, 3.3vw, 45px);
  line-height: 1.12;
  max-width: 26ch;
}

.lcarc-lead .el-content {
  max-width: 58ch;
  font-size: clamp(15.5px, 1.25vw, 18px);
  line-height: 1.6;
  color: var(--lcarc-quiet);
}

/* ============================================================ the card band */

.lcarc-cards .el-image { aspect-ratio: 3 / 2; }

/* No measure cap: the card's own column is the measure, and a second cap inside it only
 * produces early breaks with empty column beside them. */
.lcarc-cards .el-title {
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.26;
}

/* ============================================================ the archive index */

/* A contents page, not more cards. Twenty-odd remaining stories shown at card size would
 * make a short archive look like a long one padded out; shown as an index they read as a
 * body of work you can take in at once. */
/* A hairline under each row rather than above it: the band already opens on the mark's
 * 2px rule, and a top border on the first row would double it. */
.lcarc-index .el-item {
  padding: 15px 0;
  border-bottom: 1px solid var(--lcarc-line);
}

.lcarc-index .el-image {
  width: clamp(64px, 7vw, 88px);
  aspect-ratio: 1 / 1;
}

.lcarc-index .el-title {
  font-size: clamp(15.5px, 1.2vw, 18px);
  line-height: 1.3;
  max-width: 42ch;
}

/* The date is bound into the content slot because an item carries one meta line and the
 * category has it. Set as a date rather than as prose: tabular figures so a column of
 * them lines up, and quiet enough that the headline stays the thing being read. */
.lcarc-index .el-content {
  font-family: var(--lcarc-sans);
  font-size: 11px;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: var(--lcarc-quiet);
}

/* ============================================================ pagination */

.lcarc-pager { padding-top: clamp(30px, 3vw, 48px); border-top: 1px solid var(--lcarc-line); }

.lcarc-pager .uk-pagination > * > * {
  font-family: var(--lcarc-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--lcarc-quiet);
  text-decoration: none;
}

.lcarc-pager .uk-pagination > .uk-active > * { color: var(--lcarc-ink); }
.lcarc-pager .uk-pagination > * > a:hover { color: var(--lcarc-ink); }

/* ============================================================ the empty state */

.lcarc-empty p {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(16px, 1.3vw, 18.5px);
  line-height: 1.6;
  color: var(--lcarc-quiet);
}

.lcarc-empty a { color: var(--lcarc-ink); text-underline-offset: .16em; }

/* ============================================================ desktop */

@media (min-width: 960px) {
  .lcarc-lead .el-image { aspect-ratio: 7 / 3; }

  /* The standfirst moves alongside the headline rather than under it. Stacked, the two
   * leave most of the page empty to their right and the lead reads as two separate
   * things that happen to follow a photograph; set side by side on a shared baseline it
   * reads as one composed block, which is what a lead is. Rows are placed explicitly so
   * a story that ever arrives without a photograph loses only the empty first row. */
  .lcarc-lead .el-item > a {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    column-gap: clamp(32px, 3.4vw, 64px);
  }

  .lcarc-lead .el-item > a > picture,
  .lcarc-lead .el-item > a > .el-image { grid-column: 1 / -1; grid-row: 1; }
  .lcarc-lead .el-meta { grid-column: 1; grid-row: 2; }
  .lcarc-lead .el-title { grid-column: 1; grid-row: 3; }
  .lcarc-lead .el-content { grid-column: 2; grid-row: 2 / 4; align-self: end; }
}

/* ============================================================ phone */

@media (max-width: 639px) {
  .lcarc-title { max-width: none; }

  .lcarc-index .el-item { padding: 13px 0; }

  /* The index keeps its thumbnail on the phone. Dropping it would leave a column of
   * headlines indistinguishable from the card band above once both are one-up, and the
   * picture is the fastest thing to tell them apart by. */
  .lcarc-index .el-image { width: 64px; }
}

/* ============================================================ reduced motion */

/* State changes survive; only the interpolation goes. A reader who asks for less motion
 * is asking for less travel, not for less information about what is under the pointer. */
@media (prefers-reduced-motion: reduce) {
  .lcarc .el-image,
  .lcarc .el-title,
  .lcarc .el-meta { transition: none; }
}