/* Blog pages (/ru/blog/ and every article). Loaded after styles.css and
   legal.css. The list keeps the legal pages' page padding and card grid. The
   article is built from the landing's own pieces: the centred headline with
   its eyebrow tag, then one of the landing's gradient panels in the frame the
   hero demo and the closing CTA use, carrying the deck and the key
   numbers; below it two-column rows under hairlines — the numeral over a
   large heading on the left, the text on the right — carry the contents,
   every section, the FAQ and the related articles, with the same soft
   rounded sheets inside the text as the legal pages and the sample letters
   set as pull quotes; the landing's CTA panel breaks the rows after the
   middle section. The articles carry no script but the landing's cursor
   trail. */

/* Blog-wide tokens. Every card in an article — a sample text, an FAQ
   row — sits on the app's card surface, the light
   theme's surfaceDefault (neutral50), and darkens one step down the neutral
   ramp under the pointer; entrances run on an expo-out curve, which settles
   later than the UI curve and suits a page arriving rather than a control
   answering. */
/* Blog pages sit on white rather than the landing's beige canvas; the grain
   stays, so the paper is the same paper, only whiter. */
.page-blog { --canvas: #fff; --glow: #fff; background: #fff; }
.post { --surface: #F5F4F1; --surface-hover: #ECEAE4; --ease-expo: cubic-bezier(.16, 1, .3, 1); }
.post ::selection { background: var(--sky-l); color: var(--navy); }
/* The small labels — the table headers and the pair's
   tag — are the list's old tab style. */
.post .prose th, .pair__tag { font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }

/* ── Head: the landing's hero rhythm — a small way back, the eyebrow tag, the
   headline and the facts, all centred. ── */
.post--article { padding-top: clamp(120px, 12vw, 168px); }
.post__head { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 880px; margin-inline: auto; }
.post__back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: clamp(24px, 3vw, 36px); font-size: 14px; font-weight: 500; letter-spacing: -.01em; color: var(--ink-2); transition: color 200ms ease; }
.post__back svg { width: 14px; height: 14px; transform: rotate(180deg); transition: transform 160ms var(--ease-out); }
/* On hover the arrow moves the way it points: back, along its own axis. */
@media (hover: hover) and (pointer: fine) {
  .post__back:hover { color: var(--ink); }
  .post__back:hover svg { transform: rotate(180deg) translateX(2px); }
}
.post__kicker { margin-bottom: 24px; transition: background-color .25s var(--ease); }
@media (hover: hover) and (pointer: fine) { .post__kicker:hover { background: #C7E0FF; } }
.post__title { max-width: 16em; }
.post__meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 24px; margin-top: clamp(20px, 3vw, 28px); font-size: 14px; color: var(--ink-2); }
.post__author { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--ink); }
.post__author img { width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 1px 3px -1px rgba(35,31,35,.4); }

/* ── The opening panel: the landing's stage in the landing's frame. White
   on the skill washes, navy on the mesh. Hairlines are the ink at a third,
   so they hold on any wash. ── */
.post__panel { --hair: color-mix(in srgb, currentColor 32%, transparent); margin-top: clamp(36px, 5vw, 64px); padding: clamp(24px, 4vw, 56px); border-radius: var(--r-panel); color: #fff; }
/* The panel is as tall as what it carries: the landing's stage keeps a
   minimum height for its demos, which a short intro would leave empty. */
.post__panel.stage { min-height: 0; }
.post__panel .prose > :last-child, .post__intro > :last-child { margin-bottom: 0; }
.post__panel.stage--mesh { color: var(--navy); }
.post__panel-inner { max-width: calc(var(--max) - 2 * var(--edge)); margin-inline: auto; }
/* The deck: the intro's first paragraph, a size up, the way the landing
   captions its panels. */
.post__deck { max-width: 30em; font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-weight: 500; line-height: 1.3; letter-spacing: -.025em; }
.post__deck p { margin: 0; text-wrap: pretty; }
/* The rest of the intro flows in two columns under the numbers. */
.post__intro { margin-top: clamp(32px, 4vw, 48px); columns: 2; column-gap: 48px; font-size: var(--fs-sm); line-height: 1.55; }
.post__intro p { margin: 0 0 1em; }
.post__panel .prose { color: inherit; letter-spacing: -.015em; }
.post__panel .prose a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.post__panel .prose a:hover { text-decoration-color: currentColor; }
.post__panel .prose em { font-style: normal; font-weight: 600; }

/* Key numbers: columns divided by hairlines under a rule, the figure set
   large with its unit raised beside it, the caption under it. */
.post .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); column-gap: 48px; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--hair); }
.post .stats > li { position: relative; margin: 0; padding: 24px 0 4px; display: flex; flex-direction: column; }
.post .stats > li + li::before { content: ""; position: absolute; left: -24px; top: 0; bottom: 0; width: 1px; background: var(--hair); }
.stats b { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-weight: 500; color: inherit; }
.stats__n { font-size: clamp(2.5rem, 4.6vw, 3.75rem); line-height: .92; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.stats__u { margin-top: .25em; max-width: 6em; font-size: 14px; line-height: 1.15; letter-spacing: -.01em; }
.stats__c { display: block; margin-top: 14px; max-width: 16em; font-size: 15px; font-weight: 500; line-height: 1.35; letter-spacing: -.01em; text-wrap: pretty; opacity: .88; }

/* ── Body: two-column rows. Each row is a hairline, the numeral in brackets
   over a large heading on the left, the cell on the right; the contents
   open the list, the FAQ and the related articles close it. ── */
.post__body { padding-block: clamp(48px, 6vw, 88px) 0; }
.post__row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  column-gap: clamp(32px, 6vw, 96px); align-items: start;
  padding-block: clamp(28px, 3.2vw, 44px); border-top: 1px solid var(--line);
}
.post__body > .post__row:first-child { border-top: 0; padding-top: 0; }
.post__lead { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.post__no { font-style: normal; font-size: 13px; line-height: 1.4; letter-spacing: .02em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.post__lead h2 { margin: 0; max-width: 11em; font-weight: 500; font-size: clamp(1.75rem, 3.2vw, 2.75rem); line-height: 1.06; letter-spacing: -.04em; color: var(--navy); text-wrap: balance; }
.post__cell { min-width: 0; padding-top: .35em; }
/* The contents: one line per section, its numeral beside it, no rules between. */
.post__toc { list-style: none; margin: 0; padding: 0; }
.post__toc a { display: grid; grid-template-columns: 3em minmax(0, 1fr); column-gap: 12px; padding: 9px 0; font-size: 15px; line-height: 1.4; letter-spacing: -.01em; color: var(--ink-2); transition: color .25s var(--ease); }
.post__toc li:first-child a { padding-top: 2px; }
.post__toc-no { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .post__toc a:hover { color: var(--ink); } }

/* The text in a cell: the legal pages' prose, sub-headings a step down. */
.post--article .prose { hanging-punctuation: first last; }
.post--article .prose > :first-child { margin-top: 0; }
.post--article .prose h3 { margin: 28px 0 10px; font-size: 1.0625rem; }
/* Manrope has no italic, so a German example is set upright and medium in
   the heading colour instead of a slanted fake. */
/* List markers: a small navy chevron drawn from two borders, in place of the
   legal pages' dot. */
.post .prose ul > li { padding-left: 1.4em; }
.post .prose ul > li::before { left: .1em; top: .62em; width: 7px; height: 7px; border-radius: 0; background: none; border-right: 1.5px solid var(--navy); border-bottom: 1.5px solid var(--navy); transform: rotate(-45deg); }
.post__panel .prose ul > li::before { border-color: currentColor; }
.post--article .prose em { font-style: normal; font-weight: 500; color: var(--navy); }
.post--article .prose li > strong:first-child { color: var(--navy); }
.post .prose hr { margin: 32px 0; border: 0; border-top: 1px solid var(--line); }

/* A wrong/right pair: two marked rows, the cross in the app's error colours
   and the tick in its success colours. */
.prose .pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 16px 0 24px; }
.pair__row { position: relative; margin: 0; padding: 14px 16px 16px 44px; border-radius: var(--r-md); font-size: var(--fs-sm); text-wrap: pretty; }
.pair__row::before { position: absolute; left: 16px; top: 12px; font-size: 15px; font-weight: 700; line-height: 1.6em; }
.pair__row--bad { background: #FEE4E2; }
.pair__row--bad::before { content: "✕"; color: var(--red-text); }
.pair__row--good { background: #C3EED0; }
.pair__row--good::before { content: "✓"; color: var(--green); }
.pair__tag { display: block; margin-bottom: 2px; }

/* Numbered steps: each item a row under a hairline, its numeral large in a
   column of its own, the bold lead on a line of its own over the text. */
.post--article .prose ol:not(.days) { list-style: none; padding: 0; counter-reset: item; margin: 20px 0 28px; }
.post--article .prose ol:not(.days) > li { counter-increment: item; position: relative; margin: 0; padding: 22px 0 22px 5.25rem; }
.post--article .prose ol:not(.days) > li + li { border-top: 1px solid var(--line); }
.post--article .prose ol:not(.days) > li:first-child { padding-top: 4px; }
.post--article .prose ol:not(.days) > li:last-child { padding-bottom: 4px; }
.post--article .prose ol:not(.days) > li::before { content: counter(item, decimal-leading-zero); position: absolute; left: 0; top: 22px; font-size: clamp(2.25rem, 4vw, 3rem); font-weight: 500; line-height: .9; letter-spacing: -.04em; color: var(--navy); font-variant-numeric: tabular-nums; }
.post--article .prose ol:not(.days) > li:first-child::before { top: 4px; }
.post--article .prose ol:not(.days) > li > strong:first-child { display: block; margin-bottom: 8px; }

/* A day-by-day plan: the same rows as the numbered steps, the day in place
   of the numeral, the task beside it, the time or the per-skill lines as
   small labelled text under it. */
.post--article .prose .days { list-style: none; padding: 0; margin: 20px 0 28px; }
.post--article .prose .days > li { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); align-items: start; margin: 0; padding: 22px 0; }
.post--article .prose .days > li + li { border-top: 1px solid var(--line); }
.post--article .prose .days > li:first-child { padding-top: 4px; }
.post--article .prose .days > li:last-child { padding-bottom: 4px; }
.days__n { font-size: clamp(2.25rem, 4vw, 3rem); font-weight: 500; line-height: .9; letter-spacing: -.04em; color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.days__n--range { font-size: clamp(1.375rem, 2.4vw, 1.75rem); letter-spacing: -.03em; padding-top: .35em; }
/* A score band list: the figure column is as wide as the widest band in the
   list (90–100), shared by every row through a subgrid, with a fixed gap
   before the text, so no font or language can run a figure into its grade. */
.post--article .prose .days--wide { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: clamp(28px, 4vw, 48px); }
.post--article .prose .days--wide > li { grid-column: 1 / -1; grid-template-columns: subgrid; }
@supports not (grid-template-columns: subgrid) {
  .post--article .prose .days--wide > li { grid-template-columns: 11rem minmax(0, 1fr); }
}
.days--wide .days__n { font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
.days--wide .days__body { padding-top: .1em; }
.days__body { min-width: 0; padding-top: .15em; }
.days__body p { margin: 0; }
.days__meta { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.days__part { display: block; line-height: 1.5; }
.days__part + .days__part { margin-top: 4px; }
.days__part b { display: inline-block; min-width: 6.5em; font-weight: 500; color: var(--ink-3); }

/* A sample text (a letter, a forum post): a card on the article surface,
   the quote mark in a column of its own, the text a size up in navy. Line
   breaks are kept, so a letter keeps its greeting, body and sign-off apart. */
.post .prose blockquote { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: 16px; margin: 28px 0 32px; padding: 26px 28px 28px; border: 0; border-radius: var(--r-md); background: var(--surface); color: var(--navy); }
.post .prose blockquote::before { content: "\201C"; grid-row: 1 / span 20; font-size: 3rem; line-height: .7; font-weight: 700; color: var(--navy); }
.post .prose blockquote p { grid-column: 2; margin: 0; font-size: clamp(1.125rem, 1.7vw, 1.375rem); font-weight: 500; line-height: 1.35; letter-spacing: -.02em; }
.post .prose blockquote p + p { margin-top: .8em; }

/* Tables: no box — an open grid on the page, the header as small labels
   over a hairline, one hairline between rows, no fill anywhere. The cells
   sit flush with the prose on the left; the first column carries the row's
   name in navy, and every column, numbers included, aligns left. A table takes
   the column's width and wraps to fit it; only under a phone's width does it
   keep a minimum and scroll inside its wrap. */
.post .prose .table-wrap { margin: 28px 0 32px; background: none; border-radius: 0; box-shadow: none; }
.post .prose table { min-width: 0; font-size: 15px; line-height: 1.45; }
.post .prose th { padding: 0 12px 10px; white-space: normal; line-height: 1.3; vertical-align: bottom; border-bottom: 1px solid var(--ink-3); }
.post .prose td { padding: 12px; }
.post .prose th:first-child, .post .prose td:first-child { padding-left: 0; }
.post .prose th:last-child, .post .prose td:last-child { padding-right: 0; }
.post .prose tbody tr { border-top: 1px solid var(--line); }
.post .prose tbody tr:first-child { border-top: 0; }
.post .prose td:first-child { font-weight: 500; color: var(--navy); white-space: nowrap; }
.post .prose .num { text-align: left; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .post .prose table { min-width: 460px; } }

/* FAQ: the landing's rounded rows on the article card surface. */
.post__cell.faq { --faq-wash: var(--surface); padding-block: 0; }
.post__cell .faq__list { width: 100%; margin: 0; }
.post__cell.faq details { background: var(--faq-wash); transition: background-color .25s var(--ease); }
.post__cell.faq summary { color: var(--navy); }
.post__cell.faq summary svg { color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { .post__cell.faq details:not([open]):hover { background: var(--surface-hover); } }
.post__cell.faq details p { padding-left: 0; padding-right: 0; }
.post__cell.faq details ul, .post__cell.faq details ol { margin: -4px 0 22px; padding-left: 1.2em; color: var(--ink-2); font-size: var(--fs-sm); }
.post__cell.faq details li { margin: .3em 0; }

/* Related: the heading on the left, a line about it on the right, and the
   index's own cards beneath, two across the whole row; on a phone, where half
   the row is too narrow for a card, one under the other. */
.related__deck { margin: 0; max-width: 26em; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.5; text-wrap: pretty; }
.post__row--related .cards { grid-column: 1 / -1; margin-top: clamp(28px, 4vw, 48px); grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* CTA: the landing's closing panel, in its frame, halfway down the article:
   the rows close above it and open again below it. */
/* The last row above keeps its own bottom padding, so the margin only adds
   what makes the space above the panel match the rows' padding below it. */
.post__cta { margin-top: clamp(20px, 3vw, 44px); }
.post__cta .h2 { max-width: 14em; }

/* The closing note after the CTA: sources, caveats, the disclaimer. */
/* It stands on the related cards' grid, under the second card: the same two
   columns and gap, the text in the right one. On a phone, where a card's
   column is too narrow to read in, it takes the whole width. */
.post__outro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; margin-block: clamp(28px, 4vw, 40px) 0; font-size: 14px; color: var(--ink-3); }
.post__outro > * { grid-column: 2; }
.post__outro p:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  .post__row--related .cards { grid-template-columns: minmax(0, 1fr); }
  .post__outro { grid-template-columns: minmax(0, 1fr); }
  .post__outro > * { grid-column: 1; }
}

@media (max-width: 860px) {
  .post__row { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .post__cell { padding-top: 0; }
  .post .prose blockquote { grid-template-columns: 2rem minmax(0, 1fr); column-gap: 12px; padding: 20px 18px 22px; }
}
@media (max-width: 720px) {
  .post__panel { padding: 14px; border-radius: var(--r-lg); }
  .post__deck, .post .stats, .post__intro { padding-inline: 8px; }
  .post__intro { columns: 1; }
  .post .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .post .stats > li { padding: 18px 0; border-bottom: 1px solid var(--hair); }
  .post .stats > li + li::before { left: -16px; }
  .post .stats > li:nth-child(odd)::before { content: none; }
  .post .prose th, .post .prose td { padding-inline: 14px; }
}

/* ── Legal pages: the article layout with the document switcher under the
   title, the intro on the articles' PRO blue panel, and the legal sheets opened up to match
   the article: long row names wrap, the steps take the article's numerals,
   the operator's card never splits across the intro's columns. ── */
.post__docs { justify-content: center; margin-top: clamp(24px, 3vw, 32px); animation: post-rise 700ms var(--ease-expo) 260ms backwards; }
.post--legal .prose td:first-child { white-space: normal; min-width: 9em; }
/* A bare URL in the text (a store's order history) breaks rather than widen the page. */
.post--legal .prose a { overflow-wrap: anywhere; }
.post--legal .prose .steps { margin: 20px 0 28px; padding: 0; background: none; border-radius: 0; box-shadow: none; }
.post--legal .prose .steps ol { margin: 0; }
.post--legal .prose .steps li::before { display: block; width: auto; height: auto; border-radius: 0; background: none; font-size: clamp(2.25rem, 4vw, 3rem); font-weight: 500; color: var(--navy); }
.post--legal .prose .steps ol > li > strong:first-child { display: inline; margin: 0; }
.post--legal .post__intro .operator { break-inside: avoid; }
.post--legal .prose .operator { background: var(--surface); box-shadow: none; }
.post--legal .post__panel .operator { background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px var(--hair); }
.post--legal .prose form { background: var(--surface); box-shadow: none; }
.post--legal { padding-bottom: 0; }
.post--legal .post__body > .post__row:last-child { padding-bottom: 0; }
.post--legal .post__row:last-child .prose > :last-child { margin-bottom: 0; }

/* ── Index: filter tabs and the card grid ── */
.post--list .legal__head { max-width: 720px; }
.post--list .legal__head .h1 { font-size: clamp(2.25rem, 4.6vw, 3.5rem); }
/* The 404 names the latest articles under its way home, a section apart. */
.post--list > h2.eyebrow { margin-top: clamp(48px, 7vw, 80px); }
/* The topic filter is a row of pills, the nav's shape: the soft fill for
   the rest, navy for the chosen one. No hairline under the row — the cards'
   own gap separates it from the grid. */
.cards__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(28px, 4vw, 44px); font-size: 14px; font-weight: 500; letter-spacing: -.01em; }
.cards__tabs a { padding: 9px 16px; border-radius: 999px; background: var(--soft); color: var(--ink-2); white-space: nowrap; transition: background-color .3s var(--ease), color .3s var(--ease); }
@media (hover: hover) and (pointer: fine) { .cards__tabs a:not(.is-active):hover { background: var(--line); color: var(--ink); } }
.cards__tabs a.is-active { background: var(--navy); color: #fff; }
.cards { margin: 24px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cards__empty { margin-top: 32px; color: var(--ink-2); }

/* One card: a coloured tile with the tag and icon on top, the title, and the
   date with an arrow at the bottom. A card with a picture gives it the lower
   half; the featured (newest) card spans two columns and puts the picture
   beside the text instead. Colours follow the cluster. */
.card { --card: var(--soft); --card-ink: var(--ink); --card-mute: color-mix(in srgb, var(--card-ink) 85%, transparent); min-height: 400px; border-radius: var(--r-lg); background: var(--card); color: var(--card-ink); overflow: hidden; transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out); }
.card > a { display: flex; flex-direction: column; height: 100%; }
@media (hover: hover) and (pointer: fine) { .card:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -28px rgba(34,34,34,.35); } }
.card:active { transform: scale(.985); transition-duration: 100ms; }
.card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 22px 24px 24px; }
.card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.card__tag { padding: 5px 9px; border: 1px solid var(--card-ink); border-radius: 6px; font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.card__icon { width: 24px; height: 24px; flex: none; }
.card__title { display: block; font-size: clamp(1.25rem, 1.9vw, 1.5rem); font-weight: 600; line-height: 1.15; letter-spacing: -.025em; text-wrap: balance; }
.card__desc { display: block; margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--card-mute); text-wrap: pretty; }
.card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 28px; font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--card-mute); }
.card__go { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--card-ink); color: var(--card); transition: transform 200ms var(--ease-out); }
.card__go svg { width: 20px; height: 20px; }
.card:hover .card__go { transform: translateX(3px); }
.card__pic { display: block; position: relative; flex: none; height: 240px; }
.card__pic img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.card--pic .card__desc { display: none; }
.card--pic .card__body { min-height: 0; }
.card--pic .card__foot { padding-top: 20px; }
.card--featured { grid-column: span 2; }
.card--featured > a { flex-direction: row; }
.card--featured .card__body { flex: 1 1 50%; padding: 28px 30px 30px; }
.card--featured .card__title { font-size: clamp(1.5rem, 2.6vw, 2.125rem); }
.card--featured .card__desc { display: block; margin-top: 16px; font-size: var(--fs-sm); max-width: 34em; }
.card--featured .card__title { max-width: 18em; }
.card--featured .card__pic { flex: 1 1 50%; height: auto; }

/* The list is a magazine rather than a row of equal tiles: the newest card
   runs two columns wide, and so do the text tiles the build picks
   (`card--wide`) to close every row; a filtered list drops that, since the
   tiles it was chosen for are gone. A card marked tall (`card--tall`) stands
   two rows high, its picture filling what the text leaves. */
.cards--list .card--tall { grid-row: span 2; }
.cards--list .card--tall .card__pic { flex: 1 1 auto; height: auto; min-height: 240px; }
.cards--list .card--wide { grid-column: span 2; }
.cards--list .card--wide .card__body { padding: 28px 30px 30px; }
.cards--list .card--wide .card__title { max-width: 18em; font-size: clamp(1.5rem, 2.6vw, 2.125rem); }
.cards--list .card--wide .card__desc { max-width: 34em; font-size: var(--fs-sm); }
.cards--list.is-filtered .card--wide { grid-column: auto; }
.cards--list.is-filtered .card--wide .card__body { padding: 22px 24px 24px; }
.cards--list.is-filtered .card--wide .card__title { font-size: clamp(1.25rem, 1.9vw, 1.5rem); }
.cards--list.is-filtered .card--wide .card__desc { font-size: 15px; }

.card--exam-format { --card: #BFD7FC; --card-ink: #632738; }
.card--writing { --card: #632738; --card-ink: #F5BBB9; }
/* Light text on the orange stays under 4.5:1 at any strength, so the orange
   cards take dark ink, undimmed; the cream card's orange ink is darkened. */
.card--reading { --card: #E95B31; --card-ink: #2A0F08; --card-mute: var(--card-ink); }
.card--listening { --card: #BFD7FC; --card-ink: #632738; }
.card--citizenship { --card: #BFD7FC; --card-ink: #632738; }
.card--comparison { --card: #2A0F08; --card-ink: #BFD7FC; }
.card--logistics { --card: #F5BBB9; --card-ink: #632738; }
/* Named pairs an article can pick over its topic's, `palette:` in its
   front matter. */
.card--p-cream { --card: #F8EFE8; --card-ink: #C33D15; --card-mute: var(--card-ink); }
.card--p-orange { --card: #E95B31; --card-ink: #2A0F08; --card-mute: var(--card-ink); }

@media (max-width: 960px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The wide tiles are chosen to close rows of three; on two columns they
     would open a hole instead, so they fall back to single tiles. */
  .cards--list .card--wide { grid-column: auto; }
  .cards--list .card--wide .card__body { padding: 22px 24px 24px; }
  .cards--list .card--wide .card__title { font-size: clamp(1.25rem, 1.9vw, 1.5rem); }
  .cards--list .card--wide .card__desc { font-size: 15px; }
}
@media (max-width: 640px) {
  .prose .pair { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .prose .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .prose .stats > li { min-height: 184px; padding: 18px 16px 16px; }
  .post .prose th, .post .prose td { padding-inline: 14px; }
}
@media (max-width: 640px) {
  .cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .card { min-height: 0; }
  .card--featured { grid-column: auto; }
  .card--featured > a { flex-direction: column; }
  .card--featured .card__pic { height: 240px; }
  .card__pic { height: 200px; }
  .cards--list .card--tall { grid-row: auto; }
  .cards--list .card--tall .card__pic { flex: none; height: 200px; min-height: 0; }
}
/* ── Motion ── On load the head arrives in order: the way back, the tag,
   the title, its facts, then the panel, 60–100 ms apart on the expo curve.
   Keyframes are fine here, nothing interrupts a page load, and the body
   below is left alone so the text is readable from the first frame. */
.post__back, .post__kicker, .post__title, .post__meta, .post__panel { animation: post-rise 700ms var(--ease-expo) backwards; }
.post__kicker { animation-delay: 60ms; }
.post__title { animation-delay: 120ms; }
.post__meta { animation-delay: 220ms; }
.post__panel { animation-delay: 320ms; }
@keyframes post-rise { from { opacity: 0; transform: translateY(14px); } }

/* Further down, the sheets reveal as they scroll into view, on the scroll
   timeline the browser keeps itself, so the page still needs no script for
   it. A browser without view timelines shows everything at once, which is
   fine. */
@supports (animation-timeline: view()) {
  .prose .table-wrap, .prose blockquote, .prose .pair, .post--article .prose ol {
    animation: post-reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 32%;
  }
  @keyframes post-reveal { from { opacity: 0; transform: translateY(16px); } }
}
@media (prefers-reduced-motion: reduce) {
  .post__back, .post__kicker, .post__title, .post__meta, .post__docs, .post__panel { animation-name: post-fade; animation-duration: 300ms; }
  @keyframes post-fade { from { opacity: 0; } }
  .prose .table-wrap, .prose blockquote, .prose .pair, .post--article .prose ol { animation: none; }
  .post__back:hover svg, .card:hover, .card:active, .card:hover .card__go { transform: none; }
}

@media print {
  .post__back, .post__cta, .post__row--related { display: none !important; }
  .post__panel { color: var(--ink); background: none; box-shadow: 0 0 0 1px var(--line); }
}