/* Changelog (/updates and /updates/<slug>), in the app's design system: warm ground, flat white cards with a warm line, sans titles, one tag component. Sits on home.css, system.css and pages.css. See design/updates/build.py. */

.site.upd-page {
  --upd-ground: #faf8f5; --upd-card: #ffffff; --upd-inset: #f5f3f0;
  --upd-line: #e6e2dd; --upd-line-strong: #d8d4cf;
  --upd-ink: #111a26; --upd-ink-2: #495464; --upd-ink-3: #5d6879; --upd-icon: #7d8795;
  --upd-link: #025eba;
}
.site.upd-page main { background: var(--upd-ground); color: var(--upd-ink); }

/* ---------- tags: one component, 20px, radius 6, sentence case ---------- */
.upd-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font: 400 12px/16px var(--sans); color: var(--upd-ink-2); }
.upd-meta time { margin-left: 2px; }
.upd-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 6px; font: 500 12px/16px var(--sans); white-space: nowrap; }
.upd-tag.is-new { background: #d7eefe; color: #024a92; }
.upd-tag.is-imp { background: #f1eeea; color: #3a4250; }
.upd-tag.is-fix { background: #ffffff; color: #495464; box-shadow: inset 0 0 0 1px #d8d4cf; }
.upd-tag.is-ver { height: 18px; background: transparent; color: var(--upd-ink-2); box-shadow: inset 0 0 0 1px var(--upd-line-strong); font-variant-numeric: tabular-nums; }

/* ---------- index ---------- */
.upd-index { max-width: calc(1040px + 2 * var(--gutter)); padding-block: calc(56px + 40px) var(--sec-y); }
.upd-ihead { margin-bottom: 40px; }
.upd-title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.1; letter-spacing: -0.015em; color: var(--upd-ink); }
.upd-lede { margin-top: 8px; font: 400 16px/24px var(--sans); color: var(--upd-ink-2); }
.upd-year + .upd-year { margin-top: 40px; }
.upd-yhead { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.upd-y { margin: 0; font: 600 18px/24px var(--sans); letter-spacing: -0.02em; color: var(--upd-ink); }
.upd-count { margin: 0; font: 400 12px/16px var(--sans); color: var(--upd-ink-3); }
.upd-cards, .upd-rowlist { margin: 0; padding: 0; list-style: none; }
.upd-sum { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin: 4px 0 0; font: 400 14px/20px var(--sans); color: var(--upd-ink-2); text-wrap: pretty; }

/* MediaCard: media flush on top at 16:9, meta, title, two lines; the whole card is the link */
.upd-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 12px; }
.upd-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 12px; background: var(--upd-card); box-shadow: inset 0 0 0 1px var(--upd-line); color: inherit; text-decoration: none; transition: box-shadow 150ms ease; }
.upd-card-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--upd-inset); border-bottom: 1px solid var(--upd-line); }
.upd-card-body { display: grid; align-content: start; gap: 8px; padding: 16px; }
.upd-card-t { margin: 0; font: 600 16px/20px var(--sans); letter-spacing: -0.015em; color: var(--upd-ink); text-wrap: balance; }
.upd-card .upd-sum { margin-top: -4px; }

/* RowList: one white card, rows divided; thumbnail > title and summary > trailing tags and date > chevron */
.upd-rows { overflow: hidden; border-radius: 12px; background: var(--upd-card); box-shadow: inset 0 0 0 1px var(--upd-line); }
.upd-rowlist > li + li { border-top: 1px solid var(--upd-line); }
.upd-row { display: grid; grid-template-columns: minmax(0, 1fr) 16px; grid-template-areas: "meta chev" "main chev"; align-items: center; gap: 8px 12px; padding: 16px; color: inherit; text-decoration: none; transition: background-color 150ms ease; }
.upd-row-img { display: none; }
.upd-row-main { grid-area: main; min-width: 0; }
.upd-row-meta { grid-area: meta; }
.upd-row-t { margin: 0; font: 600 16px/20px var(--sans); letter-spacing: -0.015em; color: var(--upd-ink); text-wrap: balance; }
.upd-chev { grid-area: chev; color: var(--upd-icon); transition: transform 150ms ease; }

.upd-card:focus-visible, .upd-row:focus-visible, .upd-pn-a:focus-visible { outline: 2px solid #0373e2; outline-offset: 2px; }
.upd-row:focus-visible { outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) {
  .upd-card:hover { box-shadow: inset 0 0 0 1px var(--upd-line-strong); }
  .upd-row:hover { background: var(--upd-ground); }
  .upd-row:hover .upd-chev { transform: translateX(2px); }
}

@media (min-width: 640px) {
  .upd-index { padding-top: calc(56px + 56px); }
  .upd-title { font-size: 40px; }
  .upd-ihead { margin-bottom: 48px; }
  .upd-y { font-size: 20px; }
  .upd-year + .upd-year { margin-top: 48px; }
  .upd-cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-bottom: 16px; }
  .upd-card-body { padding: 20px 24px 24px; }
  .upd-row { grid-template-columns: 128px minmax(0, 1fr) 16px; grid-template-areas: "img meta chev" "img main chev"; gap: 6px 20px; padding: 16px 20px 16px 16px; }
  .upd-row-img { grid-area: img; display: block; width: 128px; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: var(--upd-inset); box-shadow: 0 0 0 1px var(--upd-line); }
  .upd-row-meta { align-self: end; }
  .upd-row-main { align-self: start; }
}
@media (min-width: 960px) {
  .upd-row { grid-template-columns: 128px minmax(0, 1fr) auto 16px; grid-template-areas: "img main meta chev"; gap: 24px; padding: 16px 24px 16px 16px; }
  .upd-row-meta, .upd-row-main { align-self: center; }
  .upd-row-meta { justify-content: flex-end; max-width: 240px; }
}

/* ---------- detail: header on the ground, cover and prose in one white card ---------- */
.upd-art { max-width: calc(720px + 2 * var(--gutter)); padding-block: calc(56px + 32px) var(--sec-y); }
@media (min-width: 640px) { .upd-art { padding-top: calc(56px + 48px); } }
.upd-head { display: grid; justify-items: start; gap: 12px; margin-bottom: 24px; }
.upd-crumb { margin: 0 0 4px; font: 500 14px/20px var(--sans); }
.upd-crumb a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; color: var(--upd-link); text-decoration: none; }
.upd-h1 { margin: 0; font: 600 22px/28px var(--sans); letter-spacing: -0.025em; color: var(--upd-ink); text-wrap: balance; }
@media (min-width: 640px) { .upd-h1 { font-size: 24px; } }
.upd-date { margin: 0; font: 400 12px/16px var(--sans); color: var(--upd-ink-2); }

.upd-doc { overflow: hidden; border-radius: 12px; background: var(--upd-card); box-shadow: inset 0 0 0 1px var(--upd-line); }
.upd-cover { margin: 0; border-bottom: 1px solid var(--upd-line); }
.upd-cover img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--upd-inset); }

.site .upd-prose { max-width: none; padding: 24px 16px 32px; font: 400 16px/24px var(--sans); color: #3a4250; }
@media (min-width: 640px) { .site .upd-prose { padding: 32px 40px 40px; } }
.upd-prose > * { max-width: 65ch; }
.upd-prose > * + * { margin-top: 24px; }
.upd-prose b { font-weight: 600; color: var(--upd-ink); }
.upd-prose em { font-style: italic; }
.upd-prose a { color: var(--upd-link); }
.upd-prose h2 { margin-top: 40px; font: 600 20px/24px var(--sans); letter-spacing: -0.02em; font-variation-settings: normal; color: var(--upd-ink); }
.upd-prose :is(h3, h4) { margin-top: 32px; font: 600 16px/20px var(--sans); letter-spacing: -0.015em; color: var(--upd-ink); }
.upd-prose > :is(h2, h3, h4) + * { margin-top: 8px; }
.upd-prose > h2 + :is(h3, h4), .upd-prose > h3 + h4 { margin-top: 16px; }
.upd-prose li + li { margin-top: 8px; }
.upd-prose li::marker { color: var(--upd-icon); }
.upd-prose > :first-child { margin-top: 0; }
.upd-prose > :is(.upd-video, .upd-fig) { max-width: none; margin-block: 32px; }
.upd-video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: #071846; }
.upd-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.upd-fig img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 0 0 1px var(--upd-line); }

.upd-pn { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 24px; }
.upd-pn-a { display: grid; gap: 4px; padding: 16px 20px; border-radius: 12px; background: var(--upd-card); box-shadow: inset 0 0 0 1px var(--upd-line); color: var(--upd-ink); text-decoration: none; transition: box-shadow 150ms ease; }
.upd-pn-k { font: 500 12px/16px var(--sans); color: var(--upd-ink-3); }
.upd-pn-t { font: 600 14px/20px var(--sans); text-wrap: pretty; }
.upd-pn-next { text-align: right; }
@media (min-width: 640px) {
  .upd-pn { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .upd-pn-next { grid-column: 2; }
}
@media (hover: hover) and (pointer: fine) {
  .upd-crumb a:hover .arr, .upd-pn-prev:hover .arr { transform: translateX(-3px); }
  .upd-pn-a:hover { box-shadow: inset 0 0 0 1px var(--upd-line-strong); }
  .upd-pn-next:hover .arr { transform: translateX(3px); }
}
.upd-all { margin-top: 24px; }
.upd-all .link { color: var(--upd-link); }

@media (prefers-reduced-motion: reduce) {
  .upd-card, .upd-row, .upd-chev, .upd-pn-a { transition: none; }
}