@layer components {
  /* What's new

     A page of cards down the middle rather than a list of paragraphs. The
     earlier version was prose on the canvas with a rule between entries, which
     is right for the legal pages — read end to end, once — and wrong for this
     one, which is scanned for the thing you have not seen yet. An entry needs
     an edge so the eye can tell where one stops.

     What it does not do is invent a colour. HEY's changelog, which this takes
     its shape from, gives every card a pastel of its own; the palette here is
     by role and never by hue (see _tokens.css), and a rotating set of
     decorative tints would be a departure paid for by every screen that has to
     keep agreeing with it afterwards. So the card is the product's paper on
     the product's canvas, and the life on the page comes from the picture, the
     scale of the title and the room around both.

     One column, one left edge. The staggered layout is decoration: it doubles
     the distance an eye travels down a page whose whole argument is that each
     entry is short. */

  /* --article, and this is the one page in the product with a width of its own
     (see _tokens.css, where the exception is argued rather than assumed).

     The measure made the card the same width as the sentence in it, so the
     page was narrower than every other page here and the screenshots were too
     small to read. The column made it the width of a task list, which is right
     for the pictures and too wide for a paragraph. This sits between them: a
     card wide enough that a screenshot of a screen looks like one, and narrow
     enough that everything inside it can simply fill it.

     Nothing on the card carries a width of its own, and that is the point —
     the card *is* the measure here.

     Centred in the shell, and the header with it. The shell is --column wide,
     so a 54rem block left to itself sits against the left of a page with 14rem
     of empty paper down the right — which reads as a column that failed to
     fill the window rather than as a column that chose its width. The header
     takes the same width and the same centring, so the page has one left edge
     and one right one. */
  .changelog,
  .changelog__head {
    width: 100%;
    max-width: var(--article);
    margin-inline: auto;
  }

  .changelog {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: 0;
    list-style: none;
  }

  /* Paper, and no shadow. a shadow says *above the page*, and it is spent
     on the things that lift off it — a menu, the palette, a toast. A card in
     the flow of a page is not one of those, so the edge is a line and the lift
     is the change of surface against the canvas. */
  .changelog__entry {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    /* --space-5 rather than --space-4: at 32px the words started close enough
       to the edge that the card read as a box drawn round them rather than as
       paper they are set on. 40px is the step the scale already has. */
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
  }

  @media (max-width: 40rem) {
    .changelog__entry { padding: var(--space-3); }
  }

  /* The date, then the badge, both at the left.

     They were at opposite ends of the row. That reads as deliberate on the one
     entry that has a badge and as a mistake on every other: a date alone,
     pushed to the far right of a wide card, looks like it lost whatever it was
     paired with. Side by side they are one mark on the corner of the card, and
     an entry without a badge is just an entry with a date. */
  .changelog__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    /* base.css puts every paragraph on the measure, and this one is not prose —
       it is a rail with a mark at each end. Without this the date stops short
       of the right edge of the card and reads as though it had been left there
       by accident rather than put there. */
    max-width: none;
  }

  .changelog__date {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-faint);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }

  /* The accent, and it is the one thing on the page wearing it. "New" on every
     entry would say nothing; it means "this is the one that arrived most
     recently", and there is exactly one of those. */
  .changelog__badge {
    padding: 0.15rem var(--space);
    border-radius: var(--radius-pill);
    background: var(--accent-sunk);
    color: var(--accent);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }

  /* Set at the section step and tight, because a two-line headline set at
     default tracking looks loose — the same correction the view titles take. */
  .changelog__title {
    font-size: var(--text-lg);
    font-weight: var(--weight-heavy);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
  }

  /* Full ink, not muted. This is the prose somebody came to the page to read;
     the hierarchy against the title is size and weight, which is enough. The
     quiet thing on an entry is the date.

     Full width of the card, which is what --article is for: it is already a
     line length a paragraph can be set at, so the prose fills the card rather
     than stopping short inside it. base.css puts every paragraph on the
     measure, so the override has to reach the paragraphs Action Text renders
     as well as the block around them. */
  .changelog__body,
  .changelog__body p {
    max-width: none;
    color: var(--ink);
    line-height: var(--leading-body);
  }

  /* The picture, drawn against the inside of a padded card — so it takes
     --radius-inset rather than a corner of its own, which is the rule in
     _tokens.css about one rounded rectangle sitting in another.

     The sunk surface behind it is not decoration: a screenshot with a
     transparent corner, or one still loading, would otherwise be a hole in the
     card. The aspect-ratio holds that space before the file lands, so the
     prose below it does not jump when a lazy image arrives.

     Full width of the card and not of the measure. It is the one thing on the
     entry that is not read a line at a time, so the width that would hurt a
     paragraph is exactly the width that helps a screenshot. */
  .changelog__figure {
    margin: var(--space) 0;
    border-radius: var(--radius-inset);
    background: var(--surface-sunk);
    overflow: hidden;
  }

  /* One shape for every entry, and it is 2:1.

     This went round twice and the second answer was the wrong one. Letting
     each picture keep its own ratio crops nothing, which sounds like the
     careful choice and reads as an untidy page: every entry a different
     height, and one tall screenshot taking a whole screen. A page of cards
     wants one rhythm, and a changelog picture is a hero rather than a
     document — what it has to do is show the change at a glance, not survive
     being studied.

     So the frame is fixed and the picture fills it. `cover` is what crops, and
     `top center` is what makes the crop the right one: a screenshot's subject
     is its top edge — the toolbar, the heading, the first rows — and one
     trimmed from the middle loses exactly the part that says what changed.
     Somebody who wants all of a tall screenshot crops it themselves before
     uploading, which is a better place for that decision than here.

     It also holds the space before the file lands, which is the job the width
     and height on the tag were doing. Those are gone with it.

     2:1 rather than the 16:9 it was drawn at, and the difference is the card
     getting wider. 16:9 of --measure is about 360px of picture and reads well;
     16:9 of --article is 450px, which is most of a laptop screen and turns the
     paragraph under it into a caption. The ratio is not the thing being held
     constant here — the size on the page is, and 2:1 of the wider card is what
     the narrower card's 16:9 looked like. Inset and centred was the other way
     to get there, and it read worse: a picture narrower than the words around
     it looks like it failed to load at full size. */
  .changelog__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    object-position: top center;
  }
}