/* comics.css — /comics hub + /comics/:slug detail.
 *
 * Loaded only by the comic family. Every selector is rooted at .rk-cm-hub or .rk-cm-detail so
 * nothing here can leak into the storybook, video or Make families that share the same chrome.
 * Shared primitives (.lp-kicker, .lp-faq-item, .lp-crosslinks, .lp-btn-primary, the h1/h2 scale)
 * come from tokens.css / lp.css / home-2026.css / home-v3.css and are REFERENCED, not restated —
 * the house rule is "引用原语，不抄数值": change the home page and this family follows.
 *
 * Two rules this file must never break, both learned the hard way in this repo:
 *   1. Never use the `margin` shorthand on a section — it zeroes the inline auto-centring that
 *      `main > section` provides and the section renders flush left. Three separate pages have
 *      shipped that bug; section-centring.test.js exists because of it. Use margin-block only.
 *   2. Cards take a paper tone (--rk-paper) with a 1px edge, never plain white. In a warm-paper
 *      system a white card reads as a hole punched in the page (the affiliate page went
 *      texture → white → paper before landing on this).
 */

/* ---- content column: the home page's formula; secondary pages emit bottom padding only, so
       adjacent sections sit exactly one unit apart (the pricing-page rule).
       `main > header` is in the selector deliberately. Both templates open with a <header> (the hub
       title block, the detail hero), and a section-only rule left those blocks with no column at
       all — they rendered flush against the left edge of the viewport while everything below them
       sat centred. The site-wide centring guard did not catch it either: it walks `main > section`,
       which is exactly the shape this bug hides behind. ---- */
main > section,
main > header,
main > nav {
  width: min(calc(100% - 2 * clamp(24px, 4vw, 72px)), 1560px);
  margin-inline: auto;
  padding-block: 0 var(--sec-pad, clamp(64px, 6.2vw, 104px));
  padding-inline: 0;
  max-width: none;
}

.rk-cm-detail .lp-kicker,
.rk-cm-hub .lp-kicker { display: inline-block; }

/* ---------- breadcrumb ---------- */
/* Column comes from the shared rule above; this only overrides the rhythm, because a breadcrumb
   does not want a full section gap under it — the hero follows immediately. */
.rk-cm-breadcrumb {
  padding-block: clamp(18px, 2.2vw, 30px) 0;
  font-size: 14px;
  color: var(--rk-ink-3, #6f6a60);
}
.rk-cm-breadcrumb a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.rk-cm-breadcrumb span[aria-hidden] { padding-inline: 6px; }

/* ---------- detail hero: copy leading, the comic's first page as proof ---------- */
.rk-cm-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  /* Not --sec-pad on top: the home hero uses ~23–30px there, and a full unit above an h1 reads
     as a hole in the page (the /tutorials family's first-band lesson). */
  padding-block: clamp(24px, 3vw, 34px) var(--sec-pad, 84px);
}
.rk-cm-hero-copy { max-width: 620px; }
.rk-cm-subtitle {
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.5;
  color: var(--rk-ink-2, #4a463f);
  margin-block: 10px 0;
}
/* The answer block is the passage an answer engine quotes. It gets the body-serif treatment the
   storybook pages use for the same role, so it reads as a statement about the work rather than
   another line of marketing. */
.rk-cm-answer {
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--rk-ink-2, #4a463f);
  margin-block: 18px 0;
  max-width: 58ch;
}
.rk-cm-incomplete {
  margin-block: 16px 0;
  padding: 12px 14px;
  border: 1px solid var(--rk-line, #ded8cc);
  border-inline-start: 3px solid var(--rk-emerald, #0f9d74);
  border-radius: var(--rk-radius, 14px);
  background: var(--rk-paper-2, #f3efe7);
  font-size: 15px;
  line-height: 1.5;
  color: var(--rk-ink-2, #4a463f);
  max-width: 58ch;
}

.rk-cm-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-block: 22px 24px;
}
.rk-cm-facts > div { display: flex; flex-direction: column; gap: 2px; }
.rk-cm-facts dt {
  font-size: 12.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--rk-ink-3, #6f6a60);
}
.rk-cm-facts dd { margin: 0; font-size: 16px; font-weight: 700; color: var(--rk-ink, #211f1a); }

.rk-cm-hero-art { display: flex; justify-content: center; }
.rk-cm-cover,
.rk-cm-page-art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--rk-radius, 14px);
  border: 1px solid var(--rk-line, #ded8cc);
  box-shadow: var(--rk-shadow-panel, 0 18px 40px rgba(31, 27, 20, .12));
  background: var(--rk-paper-2, #f3efe7);
}
.rk-cm-cover { max-width: 420px; }

/* ---------- the read: one drawn page beside the prose it was drawn from ---------- */
.rk-cm-read-title {
  /* Inherits the site h2 scale from home-v3.css — deliberately no font-size here. */
  margin-block: 0 clamp(20px, 2.4vw, 34px);
}
/* A comic page is 3:4 and renders ~690px tall here; its prose is usually three or four short
   paragraphs. Aligned to the top, the text ended a third of the way down and left a tall empty
   column beside it, which reads as an unfinished paragraph rather than a caption. Centred, the two
   halves read as one spread. Long passages simply grow past the middle and still look right. */
.rk-cm-page {
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  gap: clamp(22px, 3vw, 46px);
  align-items: center;
  padding-block: 0 clamp(34px, 4vw, 60px);
}
.rk-cm-page-art { margin: 0; }
.rk-cm-page-text { padding-block: 6px 0; max-width: 58ch; }
.rk-cm-page-num {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rk-emerald, #0f9d74);
  margin-block: 0 10px;
}
.rk-cm-page-text p {
  font-size: 17px;
  line-height: 1.68;
  color: var(--rk-ink-2, #4a463f);
  margin-block: 0 14px;
}
.rk-cm-page-text p:last-child { margin-block-end: 0; }

/* ---------- grown-ups + discussion ---------- */
.rk-cm-guide { max-width: 72ch; }
.rk-cm-guide p { font-size: 17px; line-height: 1.66; color: var(--rk-ink-2, #4a463f); }
.rk-cm-guide h3 { margin-block: clamp(24px, 2.6vw, 34px) 12px; }
.rk-cm-discussion { margin: 0; padding-inline-start: 20px; }
.rk-cm-discussion li {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--rk-ink-2, #4a463f);
  margin-block: 0 10px;
}

/* ---------- cards (hub grid + related rows) ---------- */
.rk-cm-hub-grid,
.rk-cm-card-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: clamp(18px, 2.2vw, 30px);
}
.rk-cm-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}
.rk-cm-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--rk-radius, 14px);
  border: 1px solid var(--rk-line, #ded8cc);
  background: var(--rk-paper, #faf6ee);
  box-shadow: var(--rk-shadow-card, 0 10px 26px rgba(31, 27, 20, .10));
  transition: transform .18s ease, box-shadow .18s ease;
}
.rk-cm-card:hover img { transform: translateY(-3px); box-shadow: var(--rk-shadow-panel, 0 18px 40px rgba(31, 27, 20, .14)); }
.rk-cm-card-body { display: flex; flex-direction: column; gap: 3px; }
.rk-cm-card-title { font-weight: 700; font-size: 16.5px; line-height: 1.35; color: var(--rk-ink, #211f1a); }
.rk-cm-card-meta { font-size: 13.5px; color: var(--rk-ink-3, #6f6a60); }

.rk-cm-related h2 { margin-block: 0 clamp(16px, 2vw, 26px); }
.rk-cm-related .rk-cm-card-row + h2 { margin-block-start: clamp(30px, 3.4vw, 48px); }

/* ---------- hub head ---------- */
.rk-cm-hub-head {
  max-width: 780px;
  padding-block: clamp(24px, 3vw, 34px) clamp(28px, 3.4vw, 44px);
}
.rk-cm-hub-sub {
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.5;
  color: var(--rk-ink-2, #4a463f);
  margin-block: 12px 0;
}
.rk-cm-hub-answer {
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--rk-ink-2, #4a463f);
  margin-block: 16px 0;
  max-width: 62ch;
}

/* ---------- narrow ---------- */
@media (max-width: 900px) {
  .rk-cm-hero { grid-template-columns: 1fr; gap: clamp(22px, 4vw, 34px); }
  .rk-cm-hero-art { order: -1; }
  .rk-cm-cover { max-width: 340px; }
  /* Stacked, because a 3:4 page squeezed into half of a 700px viewport is unreadable — the same
     call the silo proof strip makes at this breakpoint. */
  .rk-cm-page { grid-template-columns: 1fr; gap: clamp(16px, 3vw, 24px); }
  .rk-cm-page-art img { max-width: 520px; margin-inline: auto; }
}

@media (max-width: 560px) {
  .rk-cm-hub-grid,
  .rk-cm-card-row { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .rk-cm-facts { gap: 10px 20px; }
}