/* Articles (vision §E15): the static list built by tooling/scripts/articles.mjs into blog/index.html.
   The newest article opens the page with its first painting hung large under the CSS lamp; the rest
   follow as rows, each led by its painting (or, without one, by its text alone). Every row is one
   link: the painting and title morph into the article page (data-vt-art → data-vt-art-target). */
@layer pages {
  .articles { display: block; }

  .articles-head,
  .articles-body,
  .articles-close {
    max-inline-size: calc(var(--content-max) + 2 * var(--margin));
    margin-inline: auto;
    padding-inline: var(--margin);
  }

  /* The feature's lamp pool reaches well past the painting; on narrow screens it is clipped at the
     viewport's edges here as well as by the body. */
  @media (max-width: 1023.98px) {
    .articles-body { overflow-x: clip; }
  }

  /* ------------------------------------------------------------------------------- the head */
  .articles-head {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    row-gap: var(--space-4);
    padding-block: clamp(var(--space-6), 5vw, var(--space-8)) clamp(var(--space-7), 6vw, var(--space-9));
  }
  .articles-head > * {
    grid-column: 1 / -1;
    margin: 0;
  }
  @media (min-width: 1024px) {
    .articles-head > * { grid-column: 1 / span 8; }
  }
  .articles-head__title {
    display: flex;
    align-items: flex-start;
    gap: 0.22em;
    font-size: var(--step-5);
    font-weight: 360;
    line-height: 0.98;
    letter-spacing: -0.015em;
  }
  /* The count, set like a catalogue number against the cap height (as on Paintings). */
  .articles-head__count {
    margin-block-start: 0.34em;
    font: 450 var(--step--1)/1 var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
    color: var(--ink-2);
  }
  .articles-head__lead {
    max-inline-size: 46ch;
    font-size: var(--step-1);
    line-height: 1.45;
    color: var(--ink-2);
    text-wrap: pretty;
  }
  .articles-head__notes { display: flex; flex-wrap: wrap; gap: var(--space-2); }

  /* ------------------------------------------------------------------------------- the list */
  .articles-list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .post-card { position: relative; }
  .post-card__link {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    color: inherit;
    text-decoration: none;
  }
  .post-card__link:focus-visible { outline-offset: 10px; }

  /* The painting: true aspect ratio, never cropped, its museum label below (left-aligned to it). */
  .post-card__art {
    display: grid;
    justify-items: start;
    align-content: start;
    gap: var(--space-3);
    min-inline-size: 0;
  }
  .post-card__img {
    display: block;
    block-size: auto;
    aspect-ratio: var(--ar, auto);
    background-color: var(--sunken);
    box-shadow: 0 1px 2px var(--hang-contact-color);
  }
  .post-card__label { justify-self: stretch; --label-size: var(--step--1); }

  .post-card__text {
    display: grid;
    align-content: start;
    justify-items: start;
    gap: var(--space-3);
    min-inline-size: 0;
  }
  .post-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    font: 450 var(--step--2)/1.4 var(--font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    color: var(--ink-2);
  }
  .post-card__meta > * + *::before {
    content: "·";
    margin-inline-end: var(--space-3);
  }
  .post-card__title {
    max-inline-size: 30ch;
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 420;
    line-height: 1.12;
    letter-spacing: -0.005em;
    text-wrap: balance;
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
    transition: text-decoration-color var(--dur-quick) var(--ease-set);
  }
  .post-card__desc {
    display: block;
    max-inline-size: 58ch;
    font-size: var(--step-0);
    line-height: 1.6;
    color: var(--ink-2);
    text-wrap: pretty;
  }
  .post-card__more {
    margin-block-start: var(--space-1);
    font: 600 var(--step--1)/1.4 var(--font-ui);
    letter-spacing: 0.01em;
    color: var(--ink);
  }
  .post-card__more > span {
    display: inline-block;
    margin-inline-start: 0.35em;
    font-weight: 400;
    transition: translate var(--dur-quick) var(--ease-set);
  }
  .post-card__notes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block-start: var(--space-4);
  }

  /* Hover and focus: the title takes the accent underline, the arrow steps on, and the wall's light
     comes up round the painting (the image itself never moves or changes). */
  .post-card__link:is(:hover, :focus-visible) .post-card__title { text-decoration-color: var(--accent); }
  .post-card__link:hover .post-card__more > span { translate: 0.22em 0; }
  .post-card__art { position: relative; --tile-glow: clamp(36px, 1.25rem + 3.6vw, 80px); }
  .post-card:not(.post-card--feature) .post-card__art::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    inline-size: var(--thumb-w, 100%);
    block-size: min(var(--thumb-h, 100%), 100cqi / var(--ar, 1));
    z-index: -1;
    border-radius: 18%;
    box-shadow: 0 calc(var(--tile-glow) * -0.18) calc(var(--tile-glow) * 0.8) calc(var(--tile-glow) * 0.38) var(--pool);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-settle) var(--ease-set);
  }
  .post-card__link:is(:hover, :focus-visible) .post-card__art::before { opacity: 1; }

  /* ------------------------------------------------------------------ rows (all but the first) */
  /* Text on the left, the painting to its right: a row without a painting simply ends after its text,
     and every title starts on the same line. On phones the painting comes first. */
  .post-card:not(.post-card--feature) {
    --thumb-h: 200px;
    padding-block: clamp(var(--space-6), 4vw, var(--space-8));
    border-block-start: 1px solid var(--rule);
  }
  .post-card:not(.post-card--feature) .post-card__img {
    inline-size: auto;
    block-size: min(var(--thumb-h), 100cqi / var(--ar, 1));
    max-inline-size: 100%;
  }
  .post-card:not(.post-card--feature) .post-card__art {
    container-type: inline-size;
    --thumb-w: min(100cqi, var(--thumb-h) * var(--ar, 1));
  }
  .post-card:not(.post-card--feature) .post-card__label { max-inline-size: max(var(--thumb-w), 12rem); }
  @media (min-width: 600px) {
    .post-card:not(.post-card--feature) { --thumb-h: 176px; }
    .post-card:not(.post-card--feature) .post-card__link {
      grid-template-columns: repeat(8, minmax(0, 1fr));
      column-gap: var(--gutter);
    }
    .post-card:not(.post-card--feature) .post-card__text { grid-column: 1 / span 5; grid-row: 1; }
    .post-card:not(.post-card--feature) .post-card__art { grid-column: 6 / -1; grid-row: 1; }
  }
  @media (min-width: 1024px) {
    .post-card:not(.post-card--feature) { --thumb-h: 216px; }
    .post-card:not(.post-card--feature) .post-card__link { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .post-card:not(.post-card--feature) .post-card__text { grid-column: 1 / span 7; }
    .post-card:not(.post-card--feature) .post-card__art { grid-column: 9 / -1; }
  }

  /* --------------------------------------------------------------- the feature (the newest) */
  .post-card--feature { padding-block-end: clamp(var(--space-7), 6vw, var(--space-9)); }
  .post-card--feature .post-card__art.hang {
    --hang-max: min(56svh, 460px);
    row-gap: var(--space-4);
  }
  .post-card--feature .post-card__art > img {
    grid-area: 1 / 1;
    inline-size: 100%;
  }
  .post-card--feature .post-card__label { grid-row: 2; --label-size: var(--step-0); }
  .post-card--feature .post-card__title {
    font-size: clamp(2rem, 1.4rem + 1.6vw, 3.125rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.01em;
    max-inline-size: 22ch;
  }
  @media (min-width: 1024px) {
    .post-card--feature .post-card__link {
      grid-template-columns: repeat(12, minmax(0, 1fr));
      column-gap: var(--gutter);
      align-items: end;
    }
    .post-card--feature .post-card__art { grid-column: 1 / span 7; }
    .post-card--feature .post-card__art.hang { --hang-max: min(58svh, 600px); }
    .post-card--feature .post-card__text { grid-column: 9 / -1; padding-block-end: var(--space-8); }
  }

  /* ---------------------------------------------------------------------------- the close */
  .articles-close {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    row-gap: var(--space-3);
    padding-block: clamp(var(--space-7), 6vw, var(--space-9)) clamp(var(--space-8), 7vw, var(--space-9));
    border-block-start: 1px solid var(--rule);
  }
  .articles-close > * { grid-column: 1 / -1; margin: 0; }
  @media (min-width: 1024px) {
    .articles-close > * { grid-column: 1 / span 7; }
  }
  .articles-close__title {
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 420;
    line-height: 1.12;
  }
  .articles-close__text { max-inline-size: 52ch; color: var(--ink-2); }
  .articles-close__link { margin-block-start: var(--space-2); }

  .articles-empty {
    padding-block: var(--space-8);
    font-size: var(--step-1);
    color: var(--ink-2);
  }

  @media (forced-colors: active) {
    .post-card__art::before { content: none; }
    .post-card__link:is(:hover, :focus-visible) .post-card__title { text-decoration-color: LinkText; }
  }
}