/*
 * The per-trade pages, on top of `landing.css`.
 *
 * They share the home page's palette, masthead, cards and footer, so this file
 * is only the parts that do not exist there: the shorter hero, the table of
 * price-book lines, the grouped-invoice illustration, the questions, and the
 * grid on `/for/`.
 *
 * Generated by `scripts/site-pages.ts` from `scripts/site-trades.ts`.
 */

/* ── a shorter hero ───────────────────────────────────────────────── */

.trade-hero { padding-bottom: 76px; }
.trade-masthead { padding-left: 0; padding-right: 0; }

.trade-intro { position: relative; padding: 64px var(--pad) 0; max-width: 860px; }
.trade-hero .wrap { padding: 0 var(--pad); }
.trade-hero .trade-intro { padding-left: 0; padding-right: 0; }

.crumbs {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(200, 220, 228, .5);
}
.crumbs a { color: rgba(200, 220, 228, .72); }
.crumbs a:hover { color: var(--paper); }

.trade-hero h1 {
  margin: 20px 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(44px, 6.4vw, 86px);
  line-height: .95;
  letter-spacing: -.025em;
}
.trade-hero .hero-lede { margin-top: 22px; max-width: 640px; }

/* ── 01 · what goes on the document ───────────────────────────────── */

.trade-body {
  background: var(--paper);
  padding: 100px var(--pad) 110px;
}
.trade-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: 72px;
  align-items: start;
}
.trade-body .lede { margin: 20px 0 0; max-width: 480px; }

.lines-table {
  width: 100%;
  margin-top: 34px;
  border-collapse: collapse;
  font-size: 15px;
}
.lines-table th {
  text-align: left;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(16, 20, 24, .4);
  padding: 0 0 10px;
  border-bottom: 1px solid rgba(16, 20, 24, .14);
}
.lines-table th:last-child, .lines-table td:last-child { text-align: right; }
.lines-table td {
  padding: 13px 0;
  border-bottom: 1px solid rgba(16, 20, 24, .08);
}
.lines-table td:last-child { color: rgba(16, 20, 24, .5); font-size: 13.5px; }

.trade-note {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 22px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(16, 20, 24, .55);
  text-wrap: pretty;
}
.trade-note .mark { --mark: 18px; color: var(--gold); margin-top: 2px; }

/* the grouped invoice */

.grouped {
  width: 460px;
  background: #fff;
  border: 1px solid rgba(16, 20, 24, .1);
  border-radius: 20px;
  box-shadow: 0 40px 80px -44px rgba(16, 20, 24, .4);
  padding: 26px 28px 28px;
  justify-self: center;
}
.grouped-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(16, 20, 24, .12);
}
.grouped-section { padding: 18px 0 14px; border-bottom: 1px solid rgba(16, 20, 24, .08); }
.grouped-title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--red);
  margin-bottom: 10px;
}
.grouped-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  color: rgba(16, 20, 24, .78);
  padding: 4px 0;
}
.grouped-line .dots {
  flex: 1;
  border-bottom: 1px dotted rgba(16, 20, 24, .25);
  transform: translateY(-3px);
}
/* The figures carry money now rather than a dash, so they are set to be read.
   At .35 they were a placeholder drawn faintly on purpose; at that weight a
   real total looks like a disabled field. */
.grouped-line .mono { color: rgba(16, 20, 24, .66); font-variant-numeric: tabular-nums; }
.grouped-sub {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(16, 20, 24, .1);
  font-size: 13px;
  font-weight: 600;
  color: rgba(16, 20, 24, .6);
}
.grouped-sub .mono { color: rgba(16, 20, 24, .78); font-variant-numeric: tabular-nums; }
/* What the whole job came to. The one number on the panel worth finding from
   across the page, so it is the only line here set at reading weight. */
.grouped-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid rgba(16, 20, 24, .18);
  font-size: 17px;
  font-weight: 650;
  color: var(--ink);
}
.grouped-total .mono { font-variant-numeric: tabular-nums; }
.grouped-foot {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  color: rgba(16, 20, 24, .42);
  padding-top: 16px;
}

/* ── 02 · three reasons ───────────────────────────────────────────── */

/*
 * The photograph, and the two components standing on it.
 *
 * The picture is somebody in the trade at work; the cards over it are the same
 * markup as the grouped panel in section 01, at three-quarter size. They sit
 * on the two thirds of the frame the subject is not in, which is what the
 * photographs are framed for: room at the left and the right, the person
 * across the middle.
 *
 * A card of white on a photograph needs a shadow to sit on it rather than in
 * it, and the shadow is doing the work a border cannot at this contrast, so it
 * is the deep one rather than the 1px hairline the flat cards use.
 */
.people-shot {
  position: relative;
  margin: 0 auto 72px;
  /*
   * Capped below the column it sits in, because of what the file is.
   *
   * The photographs are 1440px wide, which `site-art.sh` picked as "the widest
   * the band ever renders". That is true in CSS pixels and it is the wrong
   * unit: inside a 1440px wrap at 72px of padding the band is 1296 CSS px, and
   * on a 2x screen the browser is drawing 2592 device pixels out of 1440. The
   * result is the softness anybody on a retina display can see, and no amount
   * of encoder quality touches it, because the detail was never in the file.
   *
   * The source is 1536px out of the image generator, so there is no 2x
   * original to encode from and the only lever left is how large the band is
   * asked to be. At 1080 it draws 2160 from 1440 instead of 2592, which is the
   * difference between a picture that reads as soft and one that does not, and
   * it costs an inset of about a hundred pixels either side of a section whose
   * cards run the full column.
   */
  max-width: 1080px;
}
.people-shot img {
  display: block;
  width: 100%;
  /* The `height` attribute is a presentational hint, so without this the
     picture is 960px tall whatever the aspect ratio says. `.trade-art img`
     above carries the same line for the same reason. */
  height: auto;
  /* 16:9 out of a 3:2 photograph takes a sixth of the height, off the top and
     the bottom equally. Two to one is the shape the band wants and it was
     tried first, but a quarter of the height is enough to crop a head at the
     top edge, and the framing has to survive fourteen photographs rather than
     the one that was checked. */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 40%;
  border-radius: 26px;
  background: var(--sand);
}

.ppl-card {
  position: absolute;
  width: 300px;
  background: var(--card);
  border: 1px solid rgba(16, 20, 24, .08);
  border-radius: 16px;
  padding: 15px 17px 16px;
  box-shadow: 0 30px 60px -28px rgba(8, 18, 22, .7);
}
/*
 * Where the cards stand depends on where the person does, which `Trade.shot`
 * records. The rule is only that they keep off the subject: with somebody in
 * the middle the two cards take a side each, and with somebody to one side
 * both cards take the open half and stagger so they do not read as a column.
 */
.people-centre .ppl-book { left: 4%; bottom: 8%; }
.people-centre .ppl-grouped { right: 4%; top: 11%; }
.people-centre .ppl-pill { left: 5%; top: 12%; }

.people-left .ppl-grouped { right: 4%; top: 10%; }
.people-left .ppl-book { right: 9%; bottom: 9%; }
.people-left .ppl-pill { left: 4%; bottom: 11%; }

.people-right .ppl-grouped { left: 4%; top: 10%; }
.people-right .ppl-book { left: 9%; bottom: 9%; }
.people-right .ppl-pill { right: 4%; bottom: 11%; }

.ppl-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(16, 20, 24, .5);
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(16, 20, 24, .09);
}
.ppl-head .mark { --mark: 15px; color: var(--red); }

.ppl-row {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding-top: 10px;
  font-size: 13px;
  color: rgba(16, 20, 24, .82);
}
.ppl-row .dots {
  flex: 1;
  border-bottom: 1px dotted rgba(16, 20, 24, .25);
  transform: translateY(-3px);
}
.ppl-row .mono { font-size: 11.5px; color: rgba(16, 20, 24, .38); }
/* On the price-book card the mono column is a unit and stays quiet. On the
   grouped card it is a section subtotal, and a subtotal has to be legible at
   this size over a photograph. */
.ppl-grouped .ppl-row .mono { font-size: 12px; color: rgba(16, 20, 24, .66); font-variant-numeric: tabular-nums; }
.ppl-grouped .ppl-row span:first-child {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--red);
}
.ppl-total {
  display: flex;
  justify-content: space-between;
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid rgba(16, 20, 24, .09);
  font-size: 13px;
  font-weight: 600;
}
.ppl-total .mono { color: rgba(16, 20, 24, .88); font-variant-numeric: tabular-nums; }
.ppl-foot {
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid rgba(16, 20, 24, .09);
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.5;
  color: rgba(16, 20, 24, .42);
}

.ppl-pill {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 15px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 12.5px;
  box-shadow: 0 22px 44px -24px rgba(8, 18, 22, .8);
}
.ppl-pill .mark { --mark: 15px; color: var(--sky); }


.trade-features { padding-top: 96px; padding-bottom: 104px; }
.trade-features .display { margin-bottom: 0; }

/*
 * Three of them, in three columns, on the same 22px gutter the landing page's
 * bento uses. `.feature` carries `grid-column: span 4` for that twelve-column
 * grid, which in a three-column one is a whole row each: the three cards
 * stacked full width and touched edges, which is what this row is undoing.
 */
.trade-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 44px;
}
.trade-cards .feature { grid-column: auto; padding: 26px 26px 30px; }
.trade-cards .feature h3 { margin-top: 18px; }
.trade-cards .feature p { margin-top: 11px; }

/* ── 03 · questions ───────────────────────────────────────────────── */

.trade-faq .wrap { position: relative; }
.trade-faq h2 {
  margin: 16px 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1;
  letter-spacing: -.02em;
}
.faq {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 44px;
}
.faq-row h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--paper);
}
.faq-row p {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.62;
  color: rgba(200, 220, 228, .74);
  text-wrap: pretty;
}

/*
 * The templates page asks its questions on paper rather than on the dark band,
 * and the colours above are for the dark ground: a paper heading and pale blue
 * body text. On paper that is a question nobody can see at all and an answer
 * barely darker than the page, so the ground picks the ink here.
 */
.trade-body .faq-row h3 { color: var(--ink); }
.trade-body .faq-row p { color: rgba(16, 20, 24, .66); }
.trade-body .faq-row a { color: var(--red); }
.trade-body .faq-row a:hover { color: var(--red-dark); }

.trade-cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 52px;
  padding-top: 40px;
  border-top: 1px solid rgba(200, 220, 228, .16);
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  height: 60px;
  padding: 0 26px;
  border-radius: 30px;
  border: 1px solid rgba(200, 220, 228, .24);
  color: var(--mist) !important;
  font-size: 15.5px;
  font-weight: 600;
}
.btn-ghost:hover { background: rgba(200, 220, 228, .1); color: var(--paper) !important; }

/* ── other trades ─────────────────────────────────────────────────── */

.others { background: var(--sand); padding: 56px var(--pad) 64px; }
.other-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.other-links a {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 16px;
  border-radius: 19px;
  border: 1px solid rgba(16, 20, 24, .14);
  background: var(--card);
  color: rgba(16, 20, 24, .72) !important;
  font-size: 13.5px;
  font-weight: 500;
}
.other-links a:hover { border-color: var(--red); color: var(--red) !important; }

/*
 * The same links on a trade page, as pictures.
 *
 * A row of pills is a list of words a reader in a hurry does not read: the
 * fourteen entries are all "For <trade>", so the only thing separating them is
 * the one word that matters, set at 13.5px in the middle of a sentence-shaped
 * blob. The photographs already exist, one per trade, so the row shows those
 * instead and the word sits on the picture rather than instead of it.
 *
 * It is `.rail` from `/templates/`, unchanged: the snap, the bleed and the
 * focusable scroller are all already solved there and a second scroller with
 * its own rules is a second scroller to keep working. Only the cards are new.
 */

.others-shots { padding-bottom: 44px; }
.others-rail .rail-track { gap: 16px; }

/*
 * The one thing `.rail` does not solve here, because on `/templates/` it never
 * comes up: it lives inside `.wrap`, so its bleed of one `--pad` reaches the
 * viewport edge only while the column is still the full width of the screen.
 * Past 1584px the column centres and the rail centres with it, and the last
 * card stops in the middle of the sand with a couple of hundred pixels of
 * nothing beside it. So the margin pulls the scroller back out to the real
 * edges and the padding puts the first card back under the eyebrow, both from
 * the same figure, which is why they are written as one pair.
 *
 * Every one of these has to beat `.rail`, which is further down the file and
 * sets `margin` and `padding` as shorthands, so at one class it wins on order
 * however this block is written. The room above the row and the shorter tail
 * below it were declared at one class and were dead the whole time; two
 * classes is what makes them real.
 */
.others .others-rail {
  --others-gutter: max(var(--pad), calc(50vw - 720px));
  margin-top: 22px;
  margin-inline: calc(50% - 50vw);
  padding-bottom: 22px;
  padding-inline: var(--others-gutter);
  scroll-padding-inline: var(--others-gutter);
}

.other-card {
  position: relative;
  display: block;
  scroll-snap-align: start;
  width: 228px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 14px;
  background: var(--ink);
  color: var(--paper) !important;
  box-shadow: 0 22px 42px -34px rgba(16, 20, 24, .75);
}

.other-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

/*
 * Where a trade photograph is cropped, wherever one is cropped.
 *
 * The pictures are 3:2. A rail card is 4:5, so the crop takes a wide strip off
 * one side, and `Trade.shot` already says which side the person is on: move
 * towards them, never away. A grid card on `/for/` is 16:9, which takes off
 * the top and the bottom instead and leaves the horizontal figure doing
 * nothing, so both shapes are served by the same three classes. 34% down
 * favours the head over the boots in either.
 */
.shot-left { object-position: 30% 34%; }
.shot-centre { object-position: 50% 34%; }
.shot-right { object-position: 70% 34%; }

/* The name has to read on whatever the photograph happens to be doing at the
   bottom of the frame, and half of them are bright. */
.other-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(8, 18, 22, .9) 0%,
    rgba(8, 18, 22, .62) 30%,
    rgba(8, 18, 22, 0) 66%
  );
}

.other-name {
  position: absolute;
  z-index: 1;
  left: 16px;
  right: 14px;
  bottom: 14px;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.other-name::after {
  content: '\2192';
  display: inline-block;
  margin-left: .4em;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--salmon);
  transform: translateX(-3px);
  opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
}

.other-card:hover img { transform: scale(1.045); }
.other-card:hover .other-name::after,
.other-card:focus-visible .other-name::after {
  transform: translateX(0);
  opacity: 1;
}
.other-card:focus-visible { outline: 2px solid var(--asagi); outline-offset: 3px; }

/* A trade whose photograph has not been made yet still has to be a link, so
   the card falls back to the name on the deep teal the hero uses. */
.other-card-bare { background: var(--deep); }
.other-card-bare::after { content: none; }

/* ── /for/ ────────────────────────────────────────────────────────── */

/* The finder is directly above, and it is doing the work the old air at the
   top of this band was doing, so the band starts closer to it. */
.trade-grid-band { background: var(--paper); padding: 54px var(--pad) 110px; }
.trade-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
/* A fourth column where there is room for one. Three across on a 16in laptop
   left a hand's width of margin either side and cost the reader four more
   rows of scrolling for it. */
@media (min-width: 1360px) {
  .trade-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.trade-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid rgba(16, 20, 24, .1);
  border-radius: 18px;
  /* The picture goes to the card's own edge, so the padding moves inside, on
     the body. `overflow` is what rounds the top of the photograph and what
     holds the hover zoom inside the card. */
  overflow: hidden;
  color: var(--ink) !important;
  transition: border-color .2s ease;
}
.trade-card:hover { border-color: rgba(228, 64, 31, .45); }

/*
 * The photograph, at the head of the card.
 *
 * `/for/` is the page where somebody arrives not knowing which of the nineteen
 * entries is theirs, and it was answering that with nineteen paragraphs set in
 * the same face at the same size. The picture is the fastest thing on the card
 * to read and the only one that says the trade without being read at all.
 * 16:9 rather than the rail's 4:5, because a card here also carries a heading,
 * a sentence and a link, and a portrait picture on top of that is a card too
 * tall to see three of at once.
 */
.trade-card-shot {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--sand);
  transition: transform .5s ease;
}
/* A trade whose photograph has not been made yet keeps the shape, on the deep
   teal the hero uses, so the grid stays a grid. */
.trade-card-bare { background: var(--deep); }
.trade-card:hover .trade-card-shot { transform: scale(1.035); }

.trade-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 19px 21px 20px;
}

.trade-card-h {
  font-family: var(--serif);
  font-size: 25px;
  line-height: 1.1;
  letter-spacing: -.01em;
}
/*
 * Three lines, and the rest is on the page itself.
 *
 * These sentences were written as meta descriptions, which is to say written
 * to be read one at a time. Thirty-five of them at full length is most of why
 * this page was seven screens long, and a card is a label rather than a
 * summary: enough to tell the cleaners from the carpet cleaners, and no more.
 */
.trade-card p {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(16, 20, 24, .62);
  text-wrap: pretty;
  flex: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.trade-card-go {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red);
}

/* ── /for/, the finder ────────────────────────────────────────────── */

/*
 * Thirty-five trades, and the reader wants one of them.
 *
 * The grid below used to be the whole page: three photographed cards across,
 * twelve rows of them, seven screens on a laptop and thirty-seven on a phone.
 * A directory that long is not read, it is scrolled past, so the two controls
 * that skip it sit above it and stay there. The box finds a trade by name or
 * by whatever else that trade is called; the chips cut thirty-five down to the
 * four to ten that are the same kind of work as yours.
 *
 * Hidden until `trades.js` marks it live. A search box that does nothing is
 * worse than no search box: it is a promise the page cannot keep, and a reader
 * with no JavaScript gets the sectioned grid instead, which still answers the
 * question, just with a scroll.
 */
.finder { display: none; }
.finder.is-live {
  display: block;
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(247, 245, 241, .92);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid rgba(16, 20, 24, .09);
}
.finder-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.finder-search {
  position: relative;
  flex: 0 0 268px;
  display: flex;
  align-items: center;
}
.finder-glass {
  position: absolute;
  left: 13px;
  width: 16px;
  height: 16px;
  pointer-events: none;
  fill: none;
  stroke: rgba(16, 20, 24, .4);
  stroke-width: 1.6;
  stroke-linecap: round;
}
.finder-input {
  width: 100%;
  padding: 11px 14px 11px 37px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid rgba(16, 20, 24, .16);
  border-radius: 999px;
  appearance: none;
}
.finder-input::placeholder { color: rgba(16, 20, 24, .42); }
.finder-input:focus-visible {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(228, 64, 31, .16);
}
/* The browser's own clear cross sits where our button does, and one of the two
   has to go. Ours is the one that also resets the chips. */
.finder-input::-webkit-search-cancel-button { display: none; }
.finder-clear {
  position: absolute;
  right: 6px;
  padding: 6px 11px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(16, 20, 24, .55);
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.finder-clear:hover { color: var(--red); }

/*
 * The chips run off the right of a phone rather than wrapping to a second and
 * third line: a filter bar that is three lines tall on the screen it is
 * stickiest on has taken back the scroll it was put there to save.
 */
.finder-chips {
  display: flex;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 3px 0;
}
.finder-chips::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 8px 15px;
  font: inherit;
  font-size: 13.5px;
  white-space: nowrap;
  color: rgba(16, 20, 24, .72);
  background: var(--card);
  border: 1px solid rgba(16, 20, 24, .14);
  border-radius: 999px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.chip:hover { border-color: rgba(228, 64, 31, .45); color: var(--ink); }
.chip.is-on {
  color: #fff;
  background: var(--red);
  border-color: var(--red);
}
.chip-n {
  font-family: var(--mono);
  font-size: 10.5px;
  color: rgba(16, 20, 24, .42);
}
.chip.is-on .chip-n { color: rgba(255, 255, 255, .72); }

/* ── /for/, the sections ──────────────────────────────────────────── */

.family + .family { margin-top: 62px; }
.family.is-out { display: none; }
.family-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(16, 20, 24, .1);
}
.family-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.01em;
}
.family-head p {
  margin: 0;
  font-size: 14px;
  color: rgba(16, 20, 24, .5);
}
/*
 * While something is typed, the headings are answering a question nobody
 * asked: the reader is looking at a result, not at a shelf. The sections stay
 * in the document so the rule below can put them back the moment the box is
 * emptied.
 */
.is-searching .family-head { display: none; }
.is-searching .family + .family { margin-top: 22px; }

.trade-card.is-out { display: none; }

.finder-none {
  margin: 0;
  max-width: 46ch;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(16, 20, 24, .62);
}
.finder-all {
  padding: 0;
  font: inherit;
  color: var(--red);
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(228, 64, 31, .4);
  cursor: pointer;
}

.find-lede {
  margin: 18px 0 0;
  max-width: 44ch;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .74);
  text-wrap: pretty;
}

/* Screen readers only: the running count, which is the one thing a sighted
   reader gets from the grid redrawing and a blind one gets from nothing. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── narrower ─────────────────────────────────────────────────────── */

/* ── the hero illustration ────────────────────────────────────────── */

/*
 * One square drawing per trade, from `site/art/`. It sits beside the heading
 * rather than behind it, so nothing is ever read through a picture.
 *
 * The frame is drawn in CSS (the ring, the corner radius and the shadow) so
 * the file itself stays a flat square with no rounded corners baked in, and a
 * redraw does not have to reproduce the chrome. The drawing carries the same
 * deep teal as the band it sits on, which is what lets the edge read as a card
 * rather than a photograph pasted down.
 *
 * `.trade-top` collapses to one column at 1080px and the picture goes away
 * entirely at 760px: on a phone it would push the sentence that matters below
 * the fold to make room for decoration.
 */

.trade-top {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 60px;
  align-items: center;
  padding-top: 60px;
}
.trade-hero .trade-top .trade-intro { padding-top: 0; max-width: none; }

.trade-art {
  margin: 0;
  justify-self: end;
  width: 380px;
  max-width: 100%;
}
.trade-art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 26px;
  border: 1px solid rgba(200, 220, 228, .18);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9);
}

@media (max-width: 1080px) {
  .trade-top { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .trade-art { justify-self: start; width: 320px; }
}

@media (max-width: 760px) {
  .trade-art { display: none; }
}

@media (max-width: 1200px) {
  .trade-cols { grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; }
  .grouped { width: 400px; }
}

@media (max-width: 1080px) {
  .trade-cols { grid-template-columns: minmax(0, 1fr); gap: 52px; }
  .grouped { width: 100%; max-width: 520px; }
  .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trade-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trade-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ppl-card { width: 252px; padding: 13px 15px 14px; }
  .people-centre .ppl-book { left: 3%; bottom: 6%; }
  .people-centre .ppl-grouped { right: 3%; top: 8%; }
  .people-left .ppl-grouped { right: 3%; top: 7%; }
  .people-left .ppl-book { right: 6%; bottom: 7%; }
  .people-right .ppl-grouped { left: 3%; top: 7%; }
  .people-right .ppl-book { left: 6%; bottom: 7%; }
}

@media (max-width: 760px) {
  .trade-hero { padding-bottom: 56px; }
  .trade-intro { padding-top: 44px; }
  /* The box first and the chips under it: side by side on a phone leaves the
     box too narrow to show what has been typed into it. */
  .finder-inner { flex-direction: column; align-items: stretch; gap: 10px; padding-top: 11px; padding-bottom: 11px; }
  .finder-search { flex: 1 1 auto; }
  /* The chips run to the edge of the screen rather than stopping at the page
     margin, so a half-cut chip says there are more of them to the right. */
  .finder-chips { margin: 0 calc(var(--pad) * -1); padding: 3px var(--pad); }
  .find-lede { font-size: 15.5px; margin-top: 14px; }
  .family + .family { margin-top: 40px; }
  .family-head { display: block; margin-bottom: 14px; padding-bottom: 9px; }
  .family-head h2 { font-size: 25px; }
  .family-head p { margin-top: 3px; font-size: 13px; }
  .other-card { width: 184px; }
  .other-name { font-size: 19px; left: 14px; right: 12px; bottom: 12px; }
  .trade-body { padding-top: 72px; padding-bottom: 80px; }
  /* The finder is right above it and the first section heading names itself,
     so the band needs a gap rather than a landing. */
  .trade-grid-band { padding-top: 30px; padding-bottom: 80px; }
  .trade-features { padding-top: 72px; padding-bottom: 80px; }
  .people-shot { margin-bottom: 48px; }
  .people-shot img { aspect-ratio: 4 / 3; }
  /* Static, in a column under the picture: three floating cards on a phone
     are three things covering the person they are meant to be beside. */
  .ppl-card, .ppl-pill {
    position: static;
    width: auto;
    margin-top: 14px;
  }
  .ppl-pill { justify-content: center; }
  .trade-cards { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .trade-cards .feature { padding: 20px 20px 24px; }
  .faq { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  /*
   * One column of photographed cards is thirty-five pictures stacked, and it
   * measured thirty thousand pixels: the trade at the bottom was thirty-seven
   * screens from the trade at the top. So the card turns on its side. The
   * photograph stays, because it is still the fastest thing on the row to
   * read and the reason somebody recognises their own trade without reading
   * anything, but it is a thumbnail beside the name rather than a picture
   * above it, and the row is a fifth of the height the card was.
   */
  .trade-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .trade-card { flex-direction: row; border-radius: 14px; }
  .trade-card-shot {
    flex: 0 0 104px;
    width: 104px;
    height: auto;
    align-self: stretch;
    aspect-ratio: auto;
  }
  .trade-card-body { padding: 12px 15px 13px; justify-content: center; }
  .trade-card-h { font-size: 19px; }
  .trade-card p {
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.45;
    flex: 0 1 auto;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
  /* The row is the link, end to end, and a phone has no hover to say so. */
  .trade-card-go { display: none; }
  .trade-cta { flex-direction: column; align-items: stretch; }
  .trade-cta .btn-download, .trade-cta .btn-ghost { justify-content: center; }
  .grouped { padding: 22px 20px 24px; }
}

/* ── the nine designs ─────────────────────────────────────────────── */

/*
 * Every picture on these cards is a real print of the document, made by
 * `scripts/site-templates.ts` through `invoiceHtml` in `src/pdf.ts`, the same
 * function that draws the PDF a client opens. They are shipped at twice the
 * width they render at, because the type on an A4 page at 560 px is 4 px tall
 * and a 1× JPEG of it is a grey smear.
 */

.tpl-band { background: var(--paper); padding: 90px var(--pad) 104px; }
.tpl-band-inset { padding-top: 20px; }
.tpl-band .display { margin-bottom: 0; }
.tpl-lede { margin: 18px 0 0; max-width: 620px; }

.tpl-note {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0 0 34px;
  max-width: 640px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(16, 20, 24, .58);
  text-wrap: pretty;
}
.tpl-note .mark { --mark: 19px; color: var(--asagi); margin-top: 1px; }

/* ── the nine, on a rail ──────────────────────────────────────────── */

/*
 * A grid of nine A4 pictures gave every design the same three lines of caption
 * and asked the reader to compare nine thumbnails at once, which is the one
 * thing a grid is bad at. The names are koi varieties and each one is a rule
 * about where you look, so the page now spends a whole card on each: the sheet
 * on the left, the fish and what the design takes from it on the right, one at
 * a time, scrolled through rather than scanned.
 *
 * Snap on the inline axis so a flick lands on a card rather than between two,
 * and the rail bleeds to the section's padding on both sides with
 * `scroll-padding` matching, so a snapped card sits exactly where the heading
 * above it starts. `tabindex` is on the scroller itself because a keyboard
 * user has to be able to reach a scrollable region that holds nothing else
 * focusable, and Firefox will not focus one without it.
 */

.tpl-band-rail { padding-bottom: 84px; }

.rail {
  margin: 0 calc(var(--pad) * -1);
  padding: 4px var(--pad) 26px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--pad);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(16, 20, 24, .22) transparent;
}
.rail:focus-visible { outline: 2px solid var(--asagi); outline-offset: 4px; }
.rail::-webkit-scrollbar { height: 8px; }
.rail::-webkit-scrollbar-thumb {
  background: rgba(16, 20, 24, .18);
  border-radius: 4px;
}
.rail::-webkit-scrollbar-thumb:hover { background: rgba(16, 20, 24, .3); }

.rail-track {
  display: flex;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  width: max-content;
}

.koi-card {
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  gap: 28px;
  width: 706px;
  padding: 26px 30px 28px;
  background: var(--card);
  border: 1px solid rgba(16, 20, 24, .1);
  border-radius: 14px;
  box-shadow: 0 26px 50px -40px rgba(16, 20, 24, .55);
}

.koi-sheet { margin: 0; }
.koi-sheet img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid rgba(16, 20, 24, .12);
  border-radius: 5px;
  box-shadow: 0 18px 34px -26px rgba(16, 20, 24, .6);
}

.koi-copy {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-self: center;
}

.koi-head { display: flex; align-items: center; gap: 16px; }

/* The fish itself. Drawn on the dark ground the rest of the illustrations use,
   so it keeps its own edge on the card's near-white rather than dissolving. */
.koi-plate {
  flex: none;
  width: 104px;
  height: 104px;
  border-radius: 12px;
  object-fit: cover;
}

.koi-title { min-width: 0; }
.koi-count {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: rgba(16, 20, 24, .38);
}
.koi-card h2 {
  margin: 3px 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -.015em;
}
.koi-gloss {
  margin: 5px 0 0;
  font-size: 13.5px;
  letter-spacing: .01em;
  color: var(--red);
}

.koi-fish {
  margin: 0;
  font-size: 15px;
  line-height: 1.58;
  color: rgba(16, 20, 24, .74);
  text-wrap: pretty;
}
.koi-sheet-note {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(16, 20, 24, .12);
  font-size: 14px;
  line-height: 1.55;
  color: rgba(16, 20, 24, .6);
  text-wrap: pretty;
}
.koi-sheet-note b {
  font-weight: 500;
  color: var(--ink);
}

/*
 * The trade pages' version. Same rail, same card, minus the paragraph about
 * the fish, so the card loses about half its copy and would otherwise sit in
 * a 706px box mostly empty. Narrower card, narrower sheet, and the copy
 * column keeps a sensible measure rather than growing to fill the space.
 */
.rail-brief .koi-card {
  width: 592px;
  grid-template-columns: 208px minmax(0, 1fr);
  gap: 24px;
  padding: 24px 26px 26px;
}
.rail-brief .koi-card h3 {
  margin: 3px 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -.015em;
}
.rail-brief .koi-plate { width: 80px; height: 80px; }
.rail-brief .koi-sheet-note { padding-top: 0; border-top: 0; }

/* The names again, as anchors. They jump the rail without a line of script,
   and they are the only place the nine names are linkable text. */
.rail-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.rail-jump a {
  padding: 7px 13px;
  border: 1px solid rgba(16, 20, 24, .16);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: rgba(16, 20, 24, .62);
  text-decoration: none;
}
.rail-jump a:hover { border-color: rgba(16, 20, 24, .38); color: var(--ink); }

@media (max-width: 860px) {
  .koi-card {
    width: min(84vw, 460px);
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 22px 22px 24px;
  }
  .rail-brief .koi-card {
    width: min(84vw, 460px);
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 22px 22px 24px;
  }
  .koi-sheet { max-width: 190px; margin: 0 auto; }
  .koi-copy { gap: 13px; }
  .koi-plate { width: 80px; height: 80px; }
  .koi-card h2 { font-size: 29px; }
}
@media (prefers-reduced-motion: reduce) {
  .rail { scroll-behavior: auto; }
  .other-card img,
  .trade-card-shot { transition: none; }
  .other-card:hover img,
  .trade-card:hover .trade-card-shot { transform: none; }
}

.tpl-more {
  margin: 36px 0 0;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* The generator's hero sits directly on its own band, so it loses the
   bottom padding the trade heroes need. */
.gen-hero { padding-bottom: 56px; }

@media (max-width: 760px) {
  .tpl-band { padding-top: 68px; padding-bottom: 76px; }
}

/* ── the article template ─────────────────────────────────────────── */

/*
 * Every post is this shape: the house header, then one reading column with a
 * rail beside it, then the other posts as cards.
 *
 * The rail is the only part that is new rather than borrowed. It holds two
 * things a long page owes its reader, a way to hand the page to something that
 * will summarise it and a way to see what is in it without scrolling through
 * it, and it holds them where the eye already is rather than at the top where
 * they scroll away. Sticky, because a table of contents that leaves the screen
 * is a table of contents you have to go back for.
 */

:root { --post-measure: 1180px; }

.post-head .post-meta { margin-top: 18px; }
.post-head .hero-cta { margin-top: 28px; }

.post-grid {
  padding-block: 80px 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 232px;
  gap: 0 84px;
  align-items: start;
}

.post-col { max-width: 720px; }

/* ── the rail ─────────────────────────────────────────────────────── */

.post-rail { position: sticky; top: 40px; }

.rail-head {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(16, 20, 24, .42);
}

/*
 * Each assistant's own mark, and the five of them in a single row.
 *
 * The five names set as words came to 260-odd pixels and wrapped into two
 * rows in a 232px rail. The marks are square, so five fixed 40px pills and
 * four 6px gaps come to 224 and the row fits with room to spare, at the rail's
 * width and inside the card the rail becomes on a narrow screen. Fixed rather
 * than fractional columns for that second case: `1fr` would blow the pills up
 * to a fifth of a phone's width apiece.
 */
.rail-ai {
  display: grid;
  grid-template-columns: repeat(5, 40px);
  gap: 6px;
  margin: 13px 0 36px;
}

.rail-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border: 1px solid rgba(16, 20, 24, .14);
  border-radius: 999px;
  background: #fff;
  line-height: 1;
  color: rgba(16, 20, 24, .7);
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease;
}

/*
 * The marks are one path each and carry no colour of their own, so the row
 * takes the red on hover the same way the words did.
 */
.rail-logo {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.rail-pill:hover,
.rail-pill:focus-visible { border-color: var(--red); color: var(--red); }

.rail-toc ol {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  border-left: 1px solid rgba(16, 20, 24, .12);
}

.rail-toc a {
  display: block;
  margin-left: -1px;
  padding: 9px 0 9px 16px;
  border-left: 2px solid transparent;
  font-size: 13.5px;
  line-height: 1.35;
  color: rgba(16, 20, 24, .55);
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease;
}

.rail-toc a:hover { color: var(--ink); }

/* Set by `post.js`. Without the script the list simply never highlights, which
   is still a table of contents. */
.rail-toc a.is-here { color: var(--red); border-left-color: var(--red); }

.rail-top {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 28px;
  font-size: 13px;
  color: rgba(16, 20, 24, .55);
  text-decoration: none;
}

.rail-top:hover { color: var(--red); }

/* ── the reading column ───────────────────────────────────────────── */

.post-chapter { scroll-margin-top: 28px; }
.post-chapter + .post-chapter { margin-top: 68px; }

.post-chapter h2 {
  margin: 15px 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, 42px);
  line-height: 1.06;
  letter-spacing: -.018em;
  text-wrap: balance;
}

.post-chapter h3 {
  margin: 40px 0 0;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -.005em;
  color: var(--ink);
}

.post-col p {
  margin: 16px 0 0;
  font-size: 17px;
  line-height: 1.68;
  color: rgba(16, 20, 24, .74);
  text-wrap: pretty;
}

/* The first paragraph of a chapter answers the heading, so it is set to be
   read on its own by somebody skimming the headings. */
.post-col .post-lead {
  margin-top: 20px;
  font-size: 19px;
  line-height: 1.58;
  color: rgba(16, 20, 24, .84);
}

.post-col a {
  color: var(--red);
  text-decoration: none;
  border-bottom: 1px solid rgba(228, 64, 31, .32);
}

.post-col a:hover { border-bottom-color: var(--red); }

.post-col .post-pull {
  margin: 36px 0 0;
  padding: 3px 0 3px 26px;
  border-left: 2px solid var(--red);
}

.post-col .post-pull p {
  margin: 0;
  font-family: var(--serif);
  font-size: 25px;
  line-height: 1.26;
  color: var(--ink);
}

.post-callout {
  display: flex;
  gap: 15px;
  margin: 34px 0 0;
  padding: 20px 24px;
  background: var(--sand);
  border-radius: 16px;
}

.post-callout .mark { --mark: 20px; color: var(--gold); flex: none; margin-top: 2px; }

.post-col .post-callout div {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(16, 20, 24, .72);
}

/*
 * The list of parts, in the column rather than floating beside it.
 *
 * These were invoice-shaped panels standing to one side of the prose, which
 * suited a landing page and fought an article: a reader mid-paragraph had to
 * leave the column, read a card and find their place again. Same rows and the
 * same dotted leaders, in reading order.
 */
.post-facts {
  margin: 34px 0 0;
  padding: 22px 26px 20px;
  background: #fff;
  border: 1px solid rgba(16, 20, 24, .1);
  border-radius: 18px;
  box-shadow: 0 30px 60px -46px rgba(16, 20, 24, .45);
}

.post-facts figcaption {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--red);
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(16, 20, 24, .1);
}

.post-facts dl { margin: 7px 0 0; }

.post-facts dl > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
}

.post-facts dt {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex: 1;
  min-width: 0;
  font-size: 14.5px;
  line-height: 1.45;
  color: rgba(16, 20, 24, .82);
}

.post-facts dt::after {
  content: '';
  flex: 1;
  min-width: 20px;
  border-bottom: 1px dotted rgba(16, 20, 24, .25);
  transform: translateY(-3px);
}

.post-facts dd {
  margin: 0;
  flex: none;
  font-size: 12.5px;
  color: rgba(16, 20, 24, .52);
}

.post-col .post-facts-foot {
  margin: 15px 0 0;
  padding-top: 15px;
  border-top: 1px solid rgba(16, 20, 24, .08);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  color: rgba(16, 20, 24, .42);
}

/* A drawing between two paragraphs. Capped well under the column: the point is
   to interrupt the reading, not to take it over. */
.post-art {
  margin: 36px 0 0;
  display: flex;
  justify-content: center;
}

.post-art img {
  width: 100%;
  max-width: 380px;
  height: auto;
  border-radius: 18px;
}

/* The questions, as the last chapter rather than a band of their own, so they
   appear in the rail like everything else does. */
.post-faq {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid rgba(16, 20, 24, .1);
}

.post-faq h3 { margin: 0; font-size: 18px; font-weight: 650; }
.post-col .post-faq p { margin-top: 11px; }

/* ── the ask, and the other posts ─────────────────────────────────── */

/*
 * The band, the cards and the reading column share one left edge.
 *
 * `--post-measure` is that agreement written down once: 1180 of page with the
 * standard gutter inside it, which puts the eyebrow of every band on this page
 * directly under the first word of the article above it. Set on three
 * containers rather than inherited, because two of them are full-bleed and
 * only their contents line up.
 */
.post-grid,
.post-ask .wrap,
.post-more .wrap {
  max-width: var(--post-measure);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.post-ask { margin-top: 96px; padding-inline: 0; }
.post-ask h2 {
  margin: 16px 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.02;
  letter-spacing: -.02em;
}
.post-ask-lede {
  margin: 20px 0 0;
  max-width: 560px;
  font-size: 16.5px;
  line-height: 1.6;
  color: rgba(200, 220, 228, .74);
}

.post-more { background: var(--sand); padding: 74px 0 86px; }

/*
 * Cards rather than the ruled list this used to be. A list of three titles is
 * a table of contents; a reader at the foot of a post has finished reading and
 * is deciding whether to start again, and that decision is made on the picture
 * and the length as much as on the title.
 */
.post-cards {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 34px;
}

.post-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

/*
 * The drawing, full bleed, on the ink the drawings are already made on.
 *
 * The art is square and this is 4:3, so a card takes an eighth off the top and
 * the bottom rather than standing the whole square inside a lighter panel: the
 * pictures have their own dark ground baked into them, and a pale card behind
 * one reads as a mistake rather than a frame.
 */
.post-card-art {
  display: block;
  aspect-ratio: 4 / 3;
  margin-bottom: 17px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--ink);
}

.post-card-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.post-card:hover .post-card-art img { transform: scale(1.045); }
.post-card:hover .post-title { color: var(--red); }
.post-card:focus-visible { outline: 2px solid var(--asagi); outline-offset: 6px; }

.post-date {
  font-size: 12.5px;
  letter-spacing: .02em;
  color: rgba(16, 20, 24, .48);
}

.post-title {
  margin-top: 6px;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 26px;
  line-height: 1.14;
  color: var(--ink);
  transition: color .18s ease;
}

.post-blurb {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(16, 20, 24, .66);
}

.post-card-by {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: auto;
  padding-top: 16px;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(16, 20, 24, .48);
}

.post-card-by b {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(16, 20, 24, .8);
}

/*
 * The line under a post's headline. Posts carry a date and a length; the
 * landing pages do not, because on those it would be noise rather than a fact
 * the reader can use.
 */
.post-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
  font-size: 13px;
  letter-spacing: .01em;
  color: rgba(255, 255, 255, .58);
}

.post-meta-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
}

/* ── the rail, once there is no room beside the column ────────────── */

/*
 * Above the article rather than below it, because on a phone the two things
 * the rail carries are both decisions made before reading: hand this to
 * something else, or jump to the part I came for. Below the article they would
 * only be found by somebody who had already read the whole thing.
 */
@media (max-width: 1080px) {
  .post-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-top: 56px;
  }
  .post-col { max-width: none; }
  .post-rail {
    position: static;
    order: -1;
    margin-bottom: 48px;
    padding: 22px 24px 24px;
    background: var(--card);
    border: 1px solid rgba(16, 20, 24, .12);
    border-radius: 18px;
  }
  .rail-ai { margin-bottom: 24px; }
  .rail-toc ol {
    border-left: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0 20px;
  }
  .rail-toc a { padding-left: 0; border-left: none; }
  .rail-toc a.is-here { border-left: none; }
  .rail-top { display: none; }
  .post-ask { margin-top: 72px; }
}

@media (max-width: 700px) {
  .post-chapter + .post-chapter { margin-top: 52px; }
  .post-col .post-pull p { font-size: 21px; }
  .post-facts { padding: 20px 20px 18px; }
  .post-facts dl > div { flex-wrap: wrap; gap: 2px 10px; }
  .post-facts dt::after { min-width: 12px; }
  .post-art img { max-width: 280px; }
  .post-cards { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .post-title { font-size: 23px; }
}