/* ═══════════════ Trivia Rumble — topic landing pages (SEO) ═══════════════ */
/* Tokens come from tokens.css. Page chrome matches quizzes.css exactly;
   panels reuse the shipped panel vocabulary (2px inset ring, 24px radius). */

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: "Outfit", system-ui, sans-serif;
  background: var(--bg);
  background-image:
    radial-gradient(1100px 700px at 85% -10%, oklch(0.30 0.06 25 / 0.55), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, oklch(0.28 0.05 255 / 0.45), transparent 60%);
  color: var(--ink);
  min-height: 100dvh;
  overflow-x: hidden;
}
a { color: var(--gold); text-decoration: none; }
main { max-width: 1440px; margin: 0 auto; }

/* ─────────── shared bits (landing conventions) ─────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-weight: 800; letter-spacing: 0.01em; border: 0; cursor: pointer;
  border-radius: var(--r-ctl); padding: 14px 24px; font-size: 1.05rem;
  color: var(--gold-ink); background: var(--gold); box-shadow: 0 4px 0 var(--gold-edge);
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), filter 0.2s;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(3px) scale(0.99); box-shadow: 0 1px 0 var(--gold-edge); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; filter: none; transform: none; }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--line); font-weight: 700; }
.btn-ghost:active { transform: scale(0.98); box-shadow: inset 0 0 0 2px var(--line); }

.card { background: var(--bg-raise); border-radius: var(--r-panel); box-shadow: inset 0 0 0 2px var(--line); }

/* ─────────── nav ─────────── */
.nav {
  max-width: 1440px; margin: 0 auto; padding: 24px 72px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; row-gap: 10px;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.brand-tiles { display: flex; gap: 5px; }
.brand-tiles i { width: 22px; height: 22px; border-radius: 7px; }
.brand-tiles .t-coral { background: var(--coral); box-shadow: 0 2px 0 var(--coral-edge); }
.brand-tiles .t-amber { background: var(--amber); box-shadow: 0 2px 0 var(--amber-edge); }
.brand-tiles .t-teal  { background: var(--teal);  box-shadow: 0 2px 0 var(--teal-edge); }
.brand-tiles .t-blue  { background: var(--blue);  box-shadow: 0 2px 0 var(--blue-edge); }
.brand-name { font-weight: 900; font-size: 1.35rem; text-transform: uppercase; letter-spacing: -0.02em; }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-link { font-weight: 700; font-size: 1rem; color: var(--ink-dim); transition: color 0.2s; }
.nav-link:hover, .nav-link.is-active { color: var(--ink); }
.btn-nav { padding: 10px 20px; font-size: 0.95rem; }
.nav-avatar {
  width: 44px; height: 44px; border-radius: 14px;
  background: oklch(0.33 0.05 85); /* board-mandated selected fill, matches auth.css */
  box-shadow: inset 0 0 0 2px var(--gold);
  display: grid; place-items: center; font-size: 21px;
}

.btn-primary { background: var(--gold); }
.btn-hero { padding: 18px 36px; font-size: 1.2rem; }

/* ─────────── topic page ─────────── */
/* ═══════════ the topic page ═══════════
   design/canvas/TopicPage.dc.html. 441 of these, and they are the top of the
   funnel: somebody arrives from a search for one subject and has to want to
   play within a screen. Hero, six teasers, how it goes, three siblings, one
   more ask. */
/* The phone column is the default and the wide layout is added at 900, which
   is the landing page's own breakpoint. The cap used to be 620px at every
   width, so a 1440 laptop got a phone column and 800px of background on the
   441 pages that receive the most desktop traffic on the site.
   Layouts are not capped any more. Text measures are, at 30em, because a line
   of prose 1300px wide is unreadable however much room there is. */
.topic-wrap {
  width: 100%; max-width: 1296px; min-width: 0; margin: 0 auto;
  padding: 20px 20px 48px; display: flex; flex-direction: column; gap: 44px;
}
/* Prose caps at 30em however wide the page gets, per the board. A line of 90
   characters is harder to read on a laptop than the same words in a column,
   so widening the layout must not widen the reading. Named lists rather than
   every li, because the sample questions are cards in a grid and take their
   width from the card. */
.topic-lede, .topic-tagline, .panel-sub,
.how-list li, .tip-list li, .topic-panel > p { max-width: 30em; }
.crumbs { font-weight: 700; font-size: 0.75rem; color: var(--ink-dim); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.crumbs a { color: var(--ink-dim); }
.crumbs a:hover { color: var(--ink); }

/* ─── hero ─── */
.topic-hero { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
/* Aligned to the first line rather than the last. The board bottom aligns the
   tile against a two line title, which strands it halfway down the page when a
   Greek title runs to four, and title length is not something CSS can test
   for. Beside the first line reads right at every length. */
.hero-head { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
/* The tile is tilted so the page opens with something handmade rather than a
   grid cell. Four degrees, which reads as deliberate and not as a mistake. */
.topic-emoji {
  width: 84px; height: 84px; border-radius: var(--r-panel); background: var(--bg-raise);
  box-shadow: inset 0 0 0 2px var(--line); display: grid; place-items: center;
  font-size: 2.875rem; transform: rotate(-4deg); flex: none;
}
/* The header gets its 72px of side padding back on a phone, where 144 of a 390
   pixel screen left the brand about forty pixels short of fitting and it wrapped
   onto two lines. Every other stylesheet that draws this header already had
   this rule; this one never got it, so the header was wrong on all 441 topic
   pages, the occasion pages, the packs and the guides. */
@media (max-width: 900px) {
  .nav { padding: 20px; }
  .nav-links { gap: 16px; }
}

@media (max-width: 359px) {
  .topic-wrap { padding: 16px 16px 40px; gap: 36px; }
  .topic-emoji { width: 72px; height: 72px; border-radius: 20px; font-size: 2.375rem; }
}
.hero-words { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 6px; }
/* The board draws the topic name alone here. The real h1 is a keyword phrase
   that 441 indexed pages depend on, so it keeps its words and takes the
   board's treatment: it clamps rather than being cut to fit a composition. */
.topic-hero h1 {
  font-weight: 900; font-size: clamp(1.75rem, 8vw, 2.75rem); line-height: 0.95;
  letter-spacing: -0.03em; text-transform: uppercase; text-wrap: balance;
}
.topic-stats { font-weight: 700; font-size: 0.8125rem; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.topic-tagline { font-weight: 600; font-size: 1.0625rem; line-height: 1.45; color: var(--ink-dim); text-wrap: pretty; }
.topic-lede { font-weight: 500; font-size: 1rem; line-height: 1.6; color: var(--ink-dim); }
.btn-hero { padding: 17px 24px; font-size: 1.125rem; text-align: center; display: block; }
.topic-join {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-sink); border: 2px solid var(--line); border-radius: var(--r-ctl);
  padding: 6px 6px 6px 16px;
}
.join-code {
  flex: 1; min-width: 0; background: transparent; border: 0; color: var(--ink);
  font: inherit; font-weight: 900; font-size: 0.9375rem; letter-spacing: 0.28em;
  text-transform: uppercase; padding: 0;
}
.join-code::placeholder { color: var(--ink-dim); opacity: 0.7; }
.join-code:focus { outline: none; }
.topic-join .btn { padding: 11px 20px; font-size: 0.875rem; white-space: nowrap; }
.topic-fine { font-weight: 600; font-size: 0.75rem; color: var(--ink-dim); text-align: center; line-height: 1.4; }

/* ─── panels ─── */
.topic-panel { display: flex; flex-direction: column; gap: 14px; }
.topic-panel h2 { font-weight: 900; font-size: 1.5rem; text-transform: uppercase; letter-spacing: -0.02em; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.panel-count { font-weight: 700; font-size: 0.75rem; color: var(--ink-dim); white-space: nowrap; }
/* Scoped to beat .topic-panel h2, which is a class plus an element and so
   outranked a bare class. The board makes this one a kicker rather than a
   heading: the panel is an aside, not a section of the argument. */
.topic-panel h2.panel-kicker {
  font-weight: 800; font-size: 0.75rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-dim);
}
.panel-sub { font-weight: 600; font-size: 0.8125rem; color: var(--ink-dim); line-height: 1.5; }
.sq-note { text-align: center; }
.guide-link { font-weight: 700; color: var(--gold); }

/* ─── the teasers ─── */
.sample-questions { list-style: none; display: flex; flex-direction: column; gap: 10px; padding: 0; margin: 0; }
.sq-item {
  background: var(--bg-raise); border-radius: var(--r-ctl); padding: 14px 16px;
  box-shadow: inset 0 0 0 2px var(--line);
  display: flex; gap: 12px; align-items: flex-start;
}
.sq-num { font-weight: 900; font-size: 0.8125rem; color: var(--ink-dim); font-variant-numeric: tabular-nums; padding-top: 2px; }
.sq-text { font-weight: 700; font-size: 0.9375rem; line-height: 1.35; flex: 1; min-width: 0; }
/* Decoration keyed to the topic and the row, never to the answer. This page's
   whole discipline is that it does not ship the key. */
.sq-shape { width: 14px; height: 14px; flex: none; margin-top: 3px; }
.sq-shape.is-sq { border-radius: 4px; background: var(--amber); }
.sq-shape.is-circle { border-radius: 999px; background: var(--teal); }
.sq-shape.is-rsq { border-radius: 3px; background: var(--blue); }
.sq-shape.is-tri {
  width: 0; height: 0; background: none;
  border-left: 8px solid transparent; border-right: 8px solid transparent;
  border-bottom: 14px solid var(--coral);
}

/* ─── how it goes ─── */
/* Shared by the topic page's steps and the occasion page's, one rule rather
   than a copy, so the two cannot drift apart. */
.how-panel, .occ-steps {
  background: var(--bg-raise); border-radius: var(--r-panel);
  box-shadow: inset 0 0 0 2px var(--line); padding: 20px;
}
.how-list { list-style: none; display: flex; flex-direction: column; gap: 10px; padding: 0; margin: 0; }
.how-list li { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; font-size: 0.875rem; line-height: 1.45; color: var(--ink-dim); }
.how-list b { color: var(--ink); font-weight: 700; }
.how-num {
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  font-weight: 900; font-size: 0.8125rem; flex: none;
}
.how-num.is-1 { background: var(--coral); color: oklch(0.98 0.01 85); }
.how-num.is-2 { background: var(--amber); color: oklch(0.22 0.05 75); }
.how-num.is-3 { background: var(--teal); color: oklch(0.16 0.04 200); }

/* ─── siblings ─── */
.related-rail { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.related-rail::-webkit-scrollbar { display: none; }
/* Only the rail sizes its own cards. It scrolls sideways, so its children need
   a width; a grid's children take the track's, and forcing 150px on those made
   two cards plus a gap wider than a 320px screen. */
.related-rail .related-card { width: 150px; }
.related-card {
  flex: none; background: var(--bg-raise); border-radius: var(--r-panel);
  padding: 16px; box-shadow: inset 0 0 0 2px var(--line); color: var(--ink);
  display: flex; flex-direction: column; gap: 6px;
}
.tilt-a { transform: rotate(-1deg); }
.tilt-b { transform: rotate(1deg); }
.rc-emoji { font-size: 1.875rem; }
.related-card b { font-weight: 800; font-size: 0.9375rem; line-height: 1.2; }
.rc-count { font-weight: 600; font-size: 0.75rem; color: var(--ink-dim); }
.rail-more { font-weight: 700; font-size: 0.8125rem; color: var(--gold); }
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }

/* ─── the last ask ─── */
.topic-closer {
  background: var(--bg-raise); border-radius: var(--r-panel);
  box-shadow: inset 0 0 0 2px var(--line); padding: 28px 20px;
  align-items: center; text-align: center; gap: 14px;
}
.closer-emoji { font-size: 2.25rem; }
.topic-closer h2 { font-size: 1.75rem; letter-spacing: -0.03em; line-height: 0.95; text-wrap: balance; }
.topic-closer .btn { width: 100%; box-sizing: border-box; }
.topic-foot {
  border-top: 2px solid var(--line); padding-top: 20px; margin-top: -12px;
  font-weight: 600; font-size: 0.75rem; color: var(--ink-dim); text-align: center;
}
.topic-foot a { color: var(--ink-dim); }


/* The footer had no styles at all, on every page seo.js builds: two bare spans
   at full ink, full width, hard against the left edge of the window. It is the
   last thing on 441 topic pages, every occasion page, every pack page and both
   guides, and it looked like markup that had escaped. */
.topic-footer {
  /* The footer is a sibling of the content column, not inside it, so it has to
     be given the column's width by hand or its rule runs the full window. The
     expression is the wrap's own: its max-width clamped to the viewport, less
     its two gutters. */
  width: calc(100% - 40px); margin: 32px auto 0; padding: 20px 0 32px;
  border-top: 2px solid var(--line);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-weight: 600; font-size: 0.75rem; color: var(--ink-dim); text-align: center;
}
.topic-footer .foot-brand { font-weight: 800; color: var(--ink); }
/* The credit is a link but should not shout like one: it takes the footer's
   own colour until you point at it. */
.topic-footer .foot-by { color: inherit; transition: color 0.2s; }
.topic-footer .foot-by:hover { color: var(--gold); }

/* ═══════════ wide, from the 1440 frame in TopicPage.dc.html ═══════════
   Grammar borrowed from the landing page rather than invented: 72px gutters,
   1.1fr 1fr splits, 88px between sections, cards tilted a degree. One
   breakpoint. Below it, everything is the phone column already drawn. */
.hero-mock { display: none; }
@media (min-width: 900px) {
  .topic-wrap { padding: 32px 72px 72px; gap: 88px; }

  /* Hero: copy beside a phone showing this topic's own question. */
  .topic-hero {
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center;
  }
  .hero-copy { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
  .hero-head { align-items: center; gap: 20px; }
  .topic-emoji { width: 110px; height: 110px; border-radius: 28px; font-size: 3.75rem; }
  .topic-hero h1 { font-size: clamp(3rem, 4.4vw, 4.75rem); line-height: 0.9; }
  .topic-tagline, .topic-lede { font-size: 1.25rem; line-height: 1.5; }
  /* The two asks sit on one line, which is the difference between a hero that
     fills a laptop and a stack of full width buttons pretending to. */
  .topic-hero .btn-hero { align-self: flex-start; padding: 18px 34px; font-size: 1.1875rem; }
  .topic-join { align-self: flex-start; }
  .hero-mock { display: flex; justify-content: center; min-width: 0; }
  .mock-phone {
    width: min(340px, 100%); background: var(--bg); border-radius: 36px;
    box-shadow: inset 0 0 0 3px var(--line), 0 24px 48px oklch(0.1 0.02 40 / 0.5);
    padding: 24px 20px; display: flex; flex-direction: column; gap: 14px;
    transform: rotate(3deg);
  }
  .mock-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .mock-q { font-weight: 800; font-size: 0.75rem; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
  .mock-chip {
    background: var(--bg-raise); border-radius: 999px; padding: 4px 11px;
    font-weight: 700; font-size: 0.625rem; box-shadow: inset 0 0 0 2px var(--line);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%;
  }
  .mock-clock { font-weight: 900; font-size: 1rem; color: var(--gold); font-variant-numeric: tabular-nums; }
  .mock-track { height: 7px; background: var(--bg-sink); border-radius: 999px; overflow: hidden; }
  .mock-bar { height: 100%; width: 60%; border-radius: 999px; background: var(--gold); }
  .mock-question { font-size: 1.125rem; font-weight: 800; line-height: 1.25; min-height: 66px; display: flex; align-items: center; }
  .mock-answers { display: flex; flex-direction: column; gap: 8px; }
  .mock-a {
    border-radius: 13px; padding: 13px 12px; display: flex; align-items: center; gap: 9px;
    font-weight: 700; font-size: 0.875rem; color: oklch(0.98 0.01 85);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .mock-a i { font-style: normal; width: 16px; text-align: center; font-size: 0.625rem; opacity: 0.9; flex: none; }
  /* The four identities, declared here rather than by loading answers.css.
     That stylesheet carries hover, picked, dimmed and correct states for a
     live game, and none of them belong on a picture of one. */
  .mock-a.a-coral { background: var(--coral); box-shadow: 0 3px 0 var(--coral-edge); }
  .mock-a.a-amber { background: var(--amber); box-shadow: 0 3px 0 var(--amber-edge); color: oklch(0.22 0.05 75); }
  .mock-a.a-teal  { background: var(--teal);  box-shadow: 0 3px 0 var(--teal-edge); color: oklch(0.16 0.04 200); }
  .mock-a.a-blue  { background: var(--blue);  box-shadow: 0 3px 0 var(--blue-edge); }

  /* Teasers in two columns, and the note that used to sit under them moves up
     into the header where there is now room for it. */
  .topic-samples .panel-head { align-items: baseline; }
  .topic-samples h2 { font-size: 2.5rem; }
  .sample-questions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .sq-item { padding: 18px 20px; }
  .sq-text { font-size: 1.0625rem; }

  /* How it goes beside the siblings, which become a 3 by 2 grid. */
  .topic-duo { display: grid; grid-template-columns: 1fr 1.1fr; gap: 24px; align-items: start; }
  .how-panel, .occ-steps { padding: 28px; }
  .how-list { gap: 14px; }
  /* The rail stops being a rail here and becomes a grid, so its cards go back
     to taking the track's width rather than the 150px a scroller needs. */
  .related-rail {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
    overflow: visible;
  }
  .related-rail .related-card { width: auto; }
  .related-card { padding: 20px; }

  .topic-footer {
    width: calc(min(1296px, 100%) - 144px); margin: 48px auto 0; padding: 24px 0 8px;
    flex-direction: row; justify-content: space-between; align-items: baseline;
    text-align: left; font-size: 0.875rem;
  }
  .topic-footer .foot-brand { font-size: 0.875rem; }

  /* The closing ask, wide: headline left, the emoji and the button right. */
  /* Three flat children, placed by column rather than wrapped: the headline
     takes the wide left, the emoji and the button sit together on the right.
     Placing them beats adding a div only the widest layout would ever use. */
  .topic-closer {
    display: grid; grid-template-columns: 1.1fr auto auto; gap: 32px;
    align-items: center; padding: 56px 72px; text-align: left;
  }
  /* Row pinned as well as column. The markup order is emoji, headline, button,
     and grid's sparse placement will not walk the cursor backwards, so naming
     only the columns drops the headline into a second row. */
  .topic-closer h2 { grid-area: 1 / 1; font-size: clamp(2.5rem, 3.6vw, 3.25rem); text-align: left; }
  .topic-closer .closer-emoji { grid-area: 1 / 2; font-size: 4rem; transform: rotate(6deg); }
  .topic-closer .btn { grid-area: 1 / 3; width: auto; padding: 18px 34px; font-size: 1.1875rem; }
}

/* ═══════════ the occasion page, from OccasionPage.dc.html ═══════════
   Shares this stylesheet with the topic page and most of its shell. What
   differs is that an occasion has no emoji and no art of its own, so the gold
   kicker does the hero's colour work and the six picks are the hero's
   picture. */
.occ-kicker {
  font-weight: 800; font-size: 0.75rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gold);
}
/* The six picks dealt like cards. Decoration, and marked as such in the
   markup: the same six are real links further down, and shipping both as
   links would give a keyboard two identical passes at the same six places. */
/* The dealt stack is the wide hero's picture and nothing else. On a phone the
   board shows the picks once, in their own section, so showing them twice in a
   column would be the same six cards twice with a screen between them. */
.occ-deal { display: none; }
.occ-card {
  background: var(--bg-raise); border-radius: 20px; padding: 16px;
  box-shadow: inset 0 0 0 2px var(--line);
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.occ-emoji { font-size: 1.75rem; }
.occ-card b { font-weight: 800; font-size: 0.9375rem; line-height: 1.2; }
/* "Why it works" had no styles at all, so its label ran straight into its
   sentence: "Nobody has to sign upColleagues join with a nickname". Three
   cards, label over text, with the board's small swatch drawn rather than
   shipped as an element. */
.why-grid { display: flex; flex-direction: column; gap: 10px; }
.occ-picks .related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.why-item {
  background: var(--bg-raise); border-radius: var(--r-ctl); padding: 16px;
  box-shadow: inset 0 0 0 2px var(--line);
  display: flex; flex-direction: column; gap: 4px;
}
.why-item::before {
  content: ""; width: 14px; height: 14px; border-radius: 4px;
  background: var(--ink); margin-bottom: 4px;
}
.why-item b { font-weight: 800; font-size: 1rem; }
.why-item span { font-weight: 600; font-size: 0.875rem; line-height: 1.45; color: var(--ink-dim); }

/* Numbered rules rather than bullets: three tips read as a short list of laws,
   which is what they are. */
.tip-list { list-style: none; display: flex; flex-direction: column; }
.tip-list li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0; border-top: 2px solid var(--line);
}
.tip-list li:last-child { border-bottom: 2px solid var(--line); }
.tip-num { font-weight: 900; font-size: 0.875rem; color: var(--gold); padding-top: 2px; flex: none; }

@media (min-width: 900px) {
  .occ-deal {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 12px 0;
  }
  .occ-card { border-radius: 24px; padding: 22px 18px; }
  .occ-emoji { font-size: 2.375rem; }
  .occ-card b { font-size: 1rem; }
  /* Dealt on a table: alternating tilt and offset, by position rather than by
     data, so all ten occasions scatter the same way and none of it depends on
     a field an occasion might not have. */
  .occ-card:nth-child(1) { transform: rotate(-3deg) translateY(10px); }
  .occ-card:nth-child(2) { transform: rotate(2deg) translateY(-8px); }
  .occ-card:nth-child(3) { transform: rotate(-2deg) translateY(4px); }
  .occ-card:nth-child(4) { transform: rotate(2deg) translateY(-4px); }
  .occ-card:nth-child(5) { transform: rotate(-3deg) translateY(8px); }
  .occ-card:nth-child(6) { transform: rotate(3deg) translateY(-10px); }

  .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .why-item { border-radius: var(--r-panel); padding: 24px; gap: 8px; }
  .why-item b { font-size: 1.1875rem; }
  .why-item span { font-size: 0.9375rem; line-height: 1.5; }
  .occ-duo { display: grid; grid-template-columns: 1fr 1.1fr; gap: 24px; align-items: start; }
  /* Six across, which is the row the hero was only a picture of. Taller cards
     with the board's larger emoji: at six across a card is 182px, and a
     16px emoji over a name reads as a list item rather than as a card. */
  .occ-picks .related-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
  .occ-picks .rc-emoji { font-size: 2.125rem; }
  .occ-picks .related-card { padding: 20px 16px; gap: 8px; }
  .occ-picks .related-card b { font-size: 1rem; }
  .tip-list li { padding: 16px 0; }
  .tip-list li span:last-child { font-size: 1.0625rem; line-height: 1.5; }
  .tip-num { font-size: 1rem; }
}

/* The occasion closer is a headline and a sentence against one ask, which is a
   different shape from the topic page's headline, emoji and button. Wrapped in
   the markup rather than placed by hand, because two wrappers read better than
   four grid-area declarations that break the moment a line is added. */
.occ-closer-copy { display: flex; flex-direction: column; gap: 10px; }
.occ-closer-ask { display: flex; flex-direction: column; gap: 10px; align-items: center; }
@media (min-width: 900px) {
  .occ-closer { grid-template-columns: 1.1fr 1fr; text-align: left; }
  .occ-closer .occ-closer-copy { grid-area: 1 / 1; }
  .occ-closer .occ-closer-ask { grid-area: 1 / 2; align-items: flex-end; }
  .occ-closer h2 { font-size: clamp(2.5rem, 3.6vw, 3.25rem); }
  .occ-closer .btn { width: auto; }
}