/* /create/comic — page-owned layout. Loaded LAST, after home-2026.css, home-v3.css and
   landing2026-nav.css, and every content class is `cm-` prefixed so nothing here can reach the
   home page or its siblings, and nothing written for them can reach this page.

   What this file deliberately does NOT restate: the header/footer shell, the composer/chips/trust
   styling, the FAQ accordion, the closing CTA card, and the tutorial teaser cards. Those arrive
   with their components. What it DOES own for those components is their PLACEMENT here — a shared
   component brings its internals, never its position in a host page (learned the hard way when an
   embedded tutorial band landed with 0px above it while every other block on the page had 42px). */

.lp-cm {
  /* Short aliases the shared component markup expects (components/composer.js references these
     names, not the --rk-* ones). Same four the sibling pages alias. */
  --font-body: var(--rk-font-body);
  --font-display: var(--rk-font-display);
  --shadow-card: var(--rk-shadow-card);
  --shadow-object: var(--rk-shadow-object);

  --cm-pad: clamp(36px, 3.6vw, 60px);
  /* Gutter and column MATCH THE SHARED HEADER (.landing2026HeaderInner). A content column narrower
     than the header leaves the wordmark and the Start Creating button hanging outside the text on
     wide screens, which reads as two pages stitched together. */
  --cm-gutter: clamp(24px, 4vw, 72px);
  --cm-max: 1560px;
  --cm-gap: 40px;
  color: var(--rk-ink);
  font-family: var(--rk-font-body);
}

/* ── bands ───────────────────────────────────────────────────────────────── */
.cm-band {
  width: min(calc(100% - 2 * var(--cm-gutter)), var(--cm-max));
  margin-inline: auto;
  padding: var(--cm-pad) 0;
}

/* Tint is SCARCE EMPHASIS: it marks the two blocks carrying the page's argument (the styles grid
   and what you walk away with). It is not the default appearance of a section, and two tinted
   blocks must never sit next to each other — adjacent tints read as one container repeated. The
   contract test enforces both the count and the adjacency rule, so inserting a new block between
   them is safe and inserting one that copies the neighbouring class list is not. */
.cm-band-tint {
  --cm-inset: clamp(18px, 2.4vw, 44px);
  background: var(--rk-paper-2);
  border-radius: clamp(18px, 1.8vw, 26px);
  padding: var(--cm-pad) var(--cm-inset);
  width: min(calc(100% - 2 * var(--cm-gutter)), var(--cm-max));
  margin-inline: auto;
}

.cm-head { max-width: 760px; margin-bottom: clamp(28px, 3vw, 42px); }
#faq .cm-head { max-width: 720px; margin-inline: auto; text-align: center; }
#faq .cm-head .cm-kicker { justify-content: center; }
.cm-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 12.5px var(--rk-font-body);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--rk-emerald);
}
/* The short rule before the label. It is the sibling pages' signature and costs no markup. */
.cm-kicker::before { content: ""; width: 24px; height: 2px; background: currentColor; border-radius: 2px; }
.lp-cm h1 {
  margin-top: 14px;
  font-family: var(--rk-font-display);
  font-size: clamp(36px, 3.3vw, 54px);
  line-height: 1.07;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.lp-cm h2 {
  margin-top: 12px;
  font-family: var(--rk-font-display);
  font-size: clamp(28px, 2.5vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.lp-cm h3 { font: 700 clamp(17px, 1.2vw, 20px)/1.3 var(--rk-font-body); color: var(--rk-ink); }


.cm-lede { margin-top: 12px; color: var(--rk-ink-soft); font-size: clamp(15.5px, 1.1vw, 17.5px); line-height: 1.6; max-width: 62ch; }

/* ── 1 · hero ────────────────────────────────────────────────────────────── */
.cm-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding-top: clamp(20px, 3svh, 52px);
}
/* min-width:0 is not optional on a grid child: the default `auto` minimum refuses to shrink below
   the content's intrinsic width, and the composer's button pushes this column straight out of the
   viewport without it. */
.cm-hero-copy { min-width: 0; }
.cm-hero-copy h1 {
  /* Sized off BOTH axes: width alone gives a 54px headline on a 1280x720 laptop, where the whole
     hero then eats the screen and the evidence block below it never exists for the visitor. */
  font-size: clamp(30px, min(4.2vw, 6.4svh), 50px);
  line-height: 1.08;
  margin: 0 0 clamp(10px, 1.8svh, 16px);
}
.cm-hero-copy .cm-lede { margin-bottom: clamp(16px, 2.4svh, 26px); }
/* The composer/chips/trust stack is what makes this column tall, and its own sheet cannot know how
   much room this page has. Tie the gaps to viewport HEIGHT: on a 1280x720 laptop the hero was
   filling 101% of the screen, so nothing below it existed as far as the visitor was concerned. */
:where(.lp-cm) .composer { margin-top: clamp(16px, 2.4svh, 24px); }
:where(.lp-cm) .trust { margin-top: clamp(10px, 1.6svh, 16px); }
.cm-try { margin-top: clamp(10px, 1.6svh, 18px); }
.cm-try-label {
  display: block;
  font-size: 13px;
  color: var(--rk-ink-soft);
  margin-bottom: 8px;
}

.cm-hero-right { min-width: 0; }
/* Capped by VIEWPORT HEIGHT, not by column width. Sized off the column, this image runs to 92% of a
   1280x720 screen and the visitor never sees that anything follows the hero. */
.cm-hero-scene {
  margin: 0;
  width: min(100%, 128svh);
}
.cm-hero-scene img {
  display: block;
  width: 100%;
  height: auto;           /* mandatory next to aspect-ratio/width caps: the width/height ATTRIBUTES
                             map to CSS pixels and would otherwise render the file at full size */
  max-height: 52svh;
  object-fit: contain;
}

/* ── 2 · one finished page ───────────────────────────────────────────────── */
.cm-page-exhibit {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.cm-page-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--rk-line);
  border-radius: var(--rk-radius-lg);
  background: var(--rk-surface);
  cursor: zoom-in;
  position: relative;
  overflow: hidden;
}
.cm-page-open img {
  display: block;
  width: 100%;
  /* height:auto beside a cap, always: the width/height ATTRIBUTES map to CSS pixels and would
     otherwise render the file at its natural size and ignore the cap. */
  height: auto;
  max-height: 76svh;
  object-fit: contain;
}
.cm-page-zoom {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--rk-surface);
  box-shadow: var(--rk-shadow-card);
  color: var(--rk-ink);
}
.cm-page-zoom svg { width: 19px; height: 19px; }

.cm-page-notes { list-style: none; margin: 0; padding: 0; }
.cm-page-notes li { padding: 20px 0; border-top: 1px solid var(--rk-line); }
.cm-page-notes li:first-child { border-top: 0; padding-top: 0; }
.cm-page-notes h3 { font-size: 17px; margin: 0 0 6px; }
.cm-page-notes p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--rk-ink-soft); }

.cm-page-dialog {
  border: 0;
  border-radius: var(--rk-radius-lg);
  padding: 0;
  background: var(--rk-surface);
  max-width: min(92vw, 760px);
  max-height: 92vh;
}
.cm-page-dialog::backdrop { background: rgba(29, 27, 23, .72); }
.cm-page-dialog img { display: block; width: 100%; height: auto; }
.cm-page-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--rk-surface);
  box-shadow: var(--rk-shadow-card);
  cursor: pointer;
  color: var(--rk-ink);
}
.cm-page-close svg { width: 18px; height: 18px; }

/* ── 3 · character consistency ───────────────────────────────────────────── */
.cm-cast { display: grid; gap: 20px; }
.cm-cast figure { margin: 0; }
.cm-cast img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 46svh;
  object-fit: contain;
  border: 1px solid var(--rk-line);
  border-radius: var(--rk-radius-lg);
  background: var(--rk-surface);
}
.cm-cast-notes {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cm-gap);
}
.cm-cast-notes h3 { font-size: 17px; margin: 0 0 6px; }
.cm-cast-notes p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--rk-ink-soft); }

/* ── 4 · art styles ──────────────────────────────────────────────────────── */
.cm-looks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.cm-look { margin: 0; }
.cm-look img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 14px;
  background: var(--rk-surface);
}
.cm-look figcaption {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
.cm-looks-hint {
  margin: 22px 0 0;
  font-size: 14px;
  color: var(--rk-ink-soft);
  text-align: center;
}

/* ── 5 · what you can change ─────────────────────────────────────────────── */
.cm-edits { display: grid; gap: clamp(32px, 4vw, 56px); }
.cm-edit {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
}
.cm-edit-copy h3 { font-size: 20px; margin: 0 0 8px; }
.cm-edit-copy p { margin: 0; font-size: 15px; line-height: 1.62; color: var(--rk-ink-soft); }
.cm-edit-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cm-edit-pair figure { margin: 0; }
.cm-edit-pair img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--rk-line);
  background: var(--rk-surface);
}
.cm-edit-pair figcaption { margin-top: 8px; }
.cm-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 3px 9px;
  border-radius: 999px;
}
.cm-tag-before { background: rgba(70, 61, 48, .09); color: var(--rk-ink-soft); }
.cm-tag-after { background: rgba(15, 164, 126, .13); color: var(--rk-emerald); }

/* ── 6 · tutorial band ───────────────────────────────────────────────────── */
/* Placement only. The cards themselves are `.lp-tut-*` and live in lp.css with /tutorials; if this
   file ever starts restating their look, the two pages will drift. The top margin matches every
   other head→content gap on the page (42px) — an embedded band inherits none of that by default,
   which is exactly how one shipped flush against its own lede. */
#how-it-works .lp-tut-teasers { margin-top: 0; }
.cm-howto-more { margin: 26px 0 0; }
/* A link has to look like one. The teaser cards carry accent-coloured links inside them, so a
   plain-black 400-weight "see more" underneath reads as body text nobody clicks. */
.cm-howto-more a {
  font-size: 15px;
  font-weight: 600;
  color: var(--rk-emerald);
  text-decoration: none;
}
.cm-howto-more a:hover { text-decoration: underline; }
/* Punctuation, not a word: keeping the arrow out of the copy string stops 25 translators carrying
   it around (and stops it being mirrored the wrong way in RTL). */
.cm-howto-more a::after { content: " \2192"; }
[dir="rtl"] .cm-howto-more a::after { content: " \2190"; }

/* ── 7 · delivery ────────────────────────────────────────────────────────── */
.cm-delivery {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.cm-delivery-items { list-style: none; margin: 0; padding: 0; }
.cm-delivery-items li { padding: 18px 0; border-top: 1px solid var(--rk-line); }
.cm-delivery-items li:first-child { border-top: 0; padding-top: 0; }
.cm-delivery-items h3 { font-size: 18px; margin: 0 0 6px; }
.cm-delivery-items p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--rk-ink-soft); }
.cm-delivery-shot { margin: 0; }
.cm-delivery-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--rk-radius-lg);
}
.cm-delivery-note {
  margin: 28px 0 0;
  font-size: 14px;
  color: var(--rk-ink-soft);
}
.cm-delivery-note a { color: var(--rk-emerald); font-weight: 600; text-decoration: none; }
.cm-delivery-note a:hover { text-decoration: underline; }

/* ── 8 · decision table + crosslinks ─────────────────────────────────────── */
/* `.rk-mk-decision` is the shared table from lp.css (same one the /make pages use) — only its
   placement is written here. */
.cm-crosslink {
  display: inline-block;
  padding: 9px 15px;
  border: 1px solid var(--rk-line);
  border-radius: 999px;
  font-size: 14px;
  color: var(--rk-ink);
  text-decoration: none;
  background: var(--rk-surface);
}
.cm-crosslink:hover { border-color: var(--rk-emerald); color: var(--rk-emerald); }

/* ── 9 · faq ─────────────────────────────────────────────────────────────── */

/* ── crosslinks + decision table: centred, as on /create/animation ─────────
   Both blocks sit alone in a full-width band. Left-aligned there they read as leftovers pinned
   to the left edge of an empty page; the sibling centres its crosslink row for exactly this
   reason. The table keeps its own left-aligned rows inside a centred, measure-width column —
   centring the ROWS would make label and value drift apart as the values change length. */
#facts .rk-mk-decision { width: min(860px, 100%); margin-inline: auto; }
#facts .rk-mk-decision h2 { text-align: center; }
.cm-crosslinks { margin-top: clamp(34px, 3.6vw, 52px); text-align: center; }
.cm-crosslinks h3 { font: 600 15px var(--rk-font-body); color: var(--rk-ink-muted); margin: 0 0 14px; }
.cm-crosslink-row { display: flex; flex-wrap: wrap; gap: 10px 12px; justify-content: center; }

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .lp-cm { --cm-band-y: 64px; --cm-head-gap: 32px; }
  .cm-looks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cm-cast-notes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}

@media (max-width: 860px) {
  .cm-hero,
  .cm-page-exhibit,
  .cm-edit,
  .cm-delivery { grid-template-columns: minmax(0, 1fr); }
  .cm-hero { padding-top: 32px; }
  .cm-hero-scene { width: 100%; }
  .cm-hero-scene img { max-height: 38svh; }
  .cm-cast-notes { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  /* The delivery photo reads as the summary of the list above it, so it follows rather than leads
     once the columns stack. Done with grid ORDER on the container's children only — order-based
     side swaps are what put images above their own headings on phones elsewhere, so it is applied
     here only where the stacked reading order is the thing being fixed. */
  .cm-delivery-shot { order: 2; }
  .cm-delivery-items { order: 1; }
}

@media (max-width: 560px) {
  .lp-cm { --cm-band-y: 52px; }
  .cm-band { padding-inline: 18px; }
  .cm-band-tint { padding-inline: 18px; }
  .cm-edit-pair { gap: 10px; }
  .cm-looks { gap: 12px; }
}

/* Motion is limited to the dialog, and even that is skipped for visitors who ask for less. */
@media (prefers-reduced-motion: reduce) {
  .cm-page-dialog { animation: none; }
}