/* Mote — scoped additions to site.css.
 *
 * **Everything here is under `body.mote`, for the reason tono.css states and
 * which has not changed:** `assets/site.css` is shared with Huxle's six live
 * pages, which serve a shipped listing. Fixing something globally to suit Mote
 * would silently restyle those. Scoping means this file cannot reach them.
 *
 * ONE RULE, because one thing is genuinely missing.
 *
 * site.css resets every margin to 0 and then gives back exactly three
 * paragraph gaps: `.legal p + p`, `.qa .ans p + p`, and `.block > h2 + p`. That
 * last one spaces the FIRST paragraph after a heading and nothing after it — so
 * a `.block` with two paragraphs renders them butted together with no gap at
 * all. Huxle and Tono never hit it because their marketing blocks happen to
 * carry one paragraph each; /mote/ carries two in four of its blocks, and at
 * 1280px they read as one run-on paragraph with a bold phrase in the middle.
 *
 * 12px, matching the two gaps site.css already defines, so the rhythm is the
 * one the rest of the site uses rather than a second opinion about it.
 *
 * If this ever moves into site.css unscoped — which would be the better home
 * for it — delete this file and the two <link> tags rather than leaving a
 * duplicate that says 12px until someone changes one of them.
 */

body.mote .block > p + p,
body.mote .block > p + ul,
body.mote .block > ul + p {
  margin-top: 12px;
}

/* --- The card hero -----------------------------------------------------------
 *
 * Added 2026-09-03 with the landing-page rewrite. /mote/ and /zh/mote/ both
 * lead with a real export card, because the arrival this page is built to
 * catch has already seen one and needs to recognise it.
 *
 * The card is 9:16, and on a phone it is CAPPED BY HEIGHT, not by width. The
 * temptation is to let it fill the column, and that is wrong: a full-width 9:16
 * image is 667px tall, which puts the headline — the sentence that tells the
 * reader where they have landed — entirely below the fold.
 *
 * A width cap does not fix it either, because the phone that needs the help is
 * the short one. 232px wide is 412px tall, which is fine on a 812pt iPhone and
 * pushes the headline off a 667pt SE. `max-height: 44svh` is the same rule
 * stated in the units that matter: the card takes a bit under half the screen
 * on every device, so the headline lands around 60% down on all of them. With
 * `width: auto` the aspect ratio comes from the intrinsic 720x1280.
 *
 * Two columns from 780px, card first in the source so it is also first in the
 * reading order at every width. `align-items: center` rather than `start`: the
 * words are shorter than the card and a top-aligned block leaves the right
 * column looking abandoned.
 */
body.mote .hero {
  display: grid;
  gap: 24px;
  align-items: center;
  margin-top: clamp(16px, 3vw, 28px);
}
body.mote .hero-card { margin: 0; }
body.mote .hero-card img {
  display: block;
  width: auto;
  max-width: 232px;
  max-height: 44svh;
  height: auto;
  margin-inline: auto;
  border-radius: 16px;
  border: 1px solid var(--hair);
}
body.mote .hero-words .mono { display: block; }
body.mote .hero h1 {
  /* Smaller than site.css's h1. That clamp tops out at 4.875rem, which is
     sized for a three-word headline; this one is two clauses and set beside a
     card rather than across the page. */
  font-size: clamp(2rem, 5.4vw, 3.25rem);
  margin-top: 14px;
}

@media (min-width: 780px) {
  body.mote .hero {
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 48px;
  }
  /* Beside the words rather than above them, so the height cap has nothing
     left to protect. */
  body.mote .hero-card img { width: 100%; max-width: 300px; max-height: none; margin-inline: 0; }
}

/* The Journal block ends with the same two buttons the hero block carries, so
   a reader who scrolled the whole page does not have to scroll back up. */
body.mote .block > .gallery + .row { margin-top: 22px; }

/* The Journal block's "Tell me when it's out" is an in-page link back to #get,
 * and .bar is `position: sticky; top: 0` — so without this the anchor scrolls
 * the heading underneath the header and the reader lands on a paragraph with no
 * title. 76px clears the bar at every width it is used at. site.css defines no
 * scroll-margin anywhere, so this is added here rather than assumed. */
body.mote #get { scroll-margin-top: 76px; }