/* King's Court promo page: direction A, "the Incipit" (approved by scout, 2026-11-01).
   The opening leaf of a book: a painted vine border, the great K, the jokes as glosses in the margins, and a
   table of chapters as the navigation. Built from theme.css tokens, buttons.css and icons.js (via art.js).
   Art rules kept: no outlines, no blurred shadows, no smooth gradients (the only gradients here are hard-stop
   rules), matte pigment, focus shown by a gold wash. */

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body { padding: 20px 16px 48px; }
a { color: inherit; }
a:focus-visible { outline: none; background: color-mix(in srgb, var(--gold-leaf-hi) 55%, transparent); }
.kc-action { text-decoration: none; }
p { margin: 0 0 14px; }

/* ---------- the leaf and its border ---------- */
.leaf-page { position: relative; max-width: 1200px; margin: 0 auto; padding: 46px clamp(18px, 7vw, 104px) 112px;
  background: var(--vellum-texture), var(--vellum-light); overflow: clip; }
.corner { position: absolute; top: 6px; width: 104px; height: 104px; z-index: 1; }   /* drawn over the vines' tucked-in ends */
.corner.l { left: 6px; }
.corner.r { right: 6px; transform: scaleX(-1); }
.corner.b { top: auto; bottom: 6px; }   /* the foot of the border mirrors its head */
.corner.l.b { transform: scaleY(-1); }
.corner.r.b { transform: scale(-1, -1); }
.corner svg { display: block; width: 100%; height: 100%; }
/* Each vine grows out of a corner's stem: icons.js ends the stem 20% of the corner's size in from the edge
   (6 + 20.8 = 26.8 px) and the vine's stem runs down the middle of its strip (13 px), so the strip sits at
   26.8 - 13 ≈ 14 px. art.js draws each vine to its strip's height (data-fit, in short segments), starting and ending on the
   strip's midline, and each end tucks 2 px under its corner's stem end (6 + 103 = 109 px). */
.vine { position: absolute; top: 107px; bottom: 107px; width: 26px; }
.vine svg { display: block; }
.vine.l { left: 14px; }
.vine.r { right: 14px; transform: scaleX(-1); }

/* ---------- the incipit (hero) ---------- */
.over { text-align: center; color: var(--vermilion); font-family: var(--font-rubric); letter-spacing: 0.1em; font-size: 17px; margin: 0; }
h1 { display: flex; align-items: center; justify-content: center; font-size: clamp(64px, 10vw, 128px); margin: 10px 0 4px; }
h1 .init { margin-right: 2px; }
h1 .init[data-drawn] { font-size: 0; }   /* until the painted K arrives, the plain letter stands in */
h1 .init svg { width: clamp(96px, 13vw, 168px); height: auto; }
.rule-o { display: flex; justify-content: center; }
.rule-o svg { width: min(420px, 90%); height: auto; }

.spread { display: grid; grid-template-columns: 1fr minmax(0, 680px) 1fr; gap: 20px; align-items: start; margin-top: 18px; }
.spread .text { text-align: center; }
.tagline { font-size: clamp(24px, 3vw, 31px); font-style: italic; line-height: 1.2; margin: 0 0 14px; }
.lede { font-size: 21px; margin: 0 auto 22px; max-width: 34em; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 26px; padding: 0; list-style: none; }
.fact .p svg { width: 52px; height: 52px; }
.fact b { display: block; font-family: var(--font-rubric); font-weight: 400; letter-spacing: 0.05em; color: var(--vermilion); font-size: 18px; }
.fact .t { font-size: 16px; line-height: 1.25; color: var(--muted); display: block; }
.cta { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cta small { font-style: italic; color: var(--muted); font-size: 16px; }

/* ---------- margins: drolleries and glosses ---------- */
.margin { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 18px; }
.margin .droll svg { display: block; height: auto; }
.spread .margin .droll svg { width: 130px; }
.margin .pl svg, .margin .arm svg { display: block; width: 72px; height: 72px; }
.gloss { font-style: italic; color: var(--vermilion-deep); font-size: 16px; line-height: 1.3; text-align: center; max-width: 190px; margin: 0; }
.gloss b { font-style: normal; font-family: var(--font-rubric); font-weight: 400; letter-spacing: 0.06em; display: block; color: var(--vermilion); font-size: 13px; }

/* ---------- the table of chapters (navigation) ---------- */
.chapters { margin: 40px auto 0; max-width: 1000px; }
.chapters h2 { font-family: var(--font-rubric); font-size: 17px; letter-spacing: 0.1em; color: var(--vermilion); text-align: center; margin-bottom: 12px; }
.chapters ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.chapters a { display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; padding: 8px; min-height: 64px; text-decoration: none; }
.chapters a:hover { background: color-mix(in srgb, var(--gold-leaf-hi) 45%, transparent); }
.chapters .i svg { width: 46px; height: 46px; display: block; }
.chapters .n { font-family: var(--font-title); font-size: 20px; line-height: 1.1; display: block; }
.chapters .d { font-size: 15px; color: var(--muted); line-height: 1.2; display: block; }

/* ---------- chapters: a text column with a margin either side ---------- */
.chapter { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 600px) minmax(0, 170px); column-gap: 28px;
  justify-content: center; margin-top: 54px; scroll-margin-top: 16px; }
.chapter > .body { grid-column: 2; }
.chapter > .margin.l { grid-column: 1; grid-row: 1 / span 2; }
.chapter > .margin.r { grid-column: 3; grid-row: 1 / span 2; }
.chapter > .wide { grid-column: 1 / -1; }
.chapter .margin .droll svg { width: 99px; }   /* under 100 px: grain only, no live filter (art rule 7) */
.chapter-head { text-align: center; margin: 0 0 18px; }
.chapter-head .no { font-family: var(--font-rubric); letter-spacing: 0.1em; color: var(--vermilion); font-size: 16px; display: block; }
.chapter-head h2 { font-size: clamp(40px, 5vw, 56px); }
.chapter-head .rule-o svg { width: min(300px, 80%); }
.body p { font-size: 19px; }
/* each chapter opens with an illuminated initial (icons.js); the letter is also in the text, hidden, for reading aloud */
.opening { display: flow-root; }   /* a short opening still clears its initial */
.opening .ini { float: left; margin: 5px 12px 0 0; }
.opening .ini svg { width: 64px; height: 64px; display: block; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.opening .ini:not([data-drawn]) { display: none; }   /* no painted initial yet: show the plain letter */
.opening .ini:not([data-drawn]) + .vh { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
.back { font-family: var(--font-rubric); font-size: 15px; letter-spacing: 0.06em; color: var(--vermilion); text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px; margin-left: -6px; }
.back .ico { width: 20px; height: 20px; transform: rotate(-90deg); }

/* the roll of arms */
.arms { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px 22px; }
.arms li { display: grid; grid-template-columns: 50px 1fr; gap: 12px; align-items: start; }
.arms svg { width: 50px; height: 50px; display: block; }
.arms .nm { font-family: var(--font-title); font-size: 19px; line-height: 1.05; display: block; }
.arms .mo { font-style: italic; font-size: 16px; line-height: 1.2; color: var(--muted); display: block; }
.arms-head { font-family: var(--font-rubric); font-size: 16px; letter-spacing: 0.08em; color: var(--vermilion); text-align: center; margin: 26px 0 0; }
.back-row { max-width: 600px; margin: 18px auto 0; }   /* lines up with the text column above */
.chapter > .back-row { grid-column: 2; max-width: none; margin: 0; }   /* ends the chapter, under the text */

/* a list of steps, each opened by a painted plaque */
.steps { list-style: none; margin: 6px 0 18px; padding: 0; display: grid; gap: 12px; }
.steps li { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: start; }
.steps svg { width: 48px; height: 48px; display: block; }
.steps b { font-family: var(--font-rubric); font-weight: 400; letter-spacing: 0.05em; color: var(--vermilion); font-size: 19px; display: block; line-height: 1.2; }
.steps .t { display: block; font-size: 18px; line-height: 1.35; }

/* the Wheel of Fortune */
.wheel-fig { margin: 8px 0 18px; text-align: center; }
.wheel-fig svg { width: min(560px, 100%); height: auto; }
.wheel-fig figcaption { font-style: italic; color: var(--muted); font-size: 16px; }

/* extracts from the dawn reports */
.extracts { margin: 6px 0 18px; padding: 0; list-style: none; display: grid; gap: 12px; }
.extracts li { padding: 12px 16px; background: var(--vellum-texture), var(--vellum); }
.extracts b { font-family: var(--font-rubric); font-weight: 400; letter-spacing: 0.06em; color: var(--vermilion); font-size: 14px; display: block; }
.extracts q { font-style: italic; font-size: 19px; quotes: none; }

/* ---------- the explicit: the book's last words ---------- */
.explicit { margin-top: 64px; text-align: center; }
.explicit .droll svg { width: 140px; height: auto; display: block; margin: 0 auto 4px; }
.explicit h2 { font-size: clamp(36px, 4.6vw, 52px); margin: 6px 0 10px; }
.explicit p { font-size: 19px; }
.explicit .cta { margin-top: 14px; }
.foot { text-align: center; font-size: 15px; color: var(--muted); margin: 40px 0 0; }

/* ---------- tablet and phone: the margins fold into the text ---------- */
@media (max-width: 920px) {
  .spread { grid-template-columns: 1fr 1fr; row-gap: 8px; }   /* both hero drolleries sit side by side under the text */
  .spread .text { grid-column: 1 / -1; }
  .spread .margin { order: 2; }
  .margin { flex-direction: row; justify-content: center; gap: 14px; padding: 0; }
  .spread .margin { flex-direction: column; justify-content: flex-start; gap: 6px; }
  .spread .margin .droll svg { width: 104px; }
  .gloss { text-align: left; max-width: 320px; }
  .spread .gloss { text-align: center; }
  .margin .pl svg, .margin .arm svg { width: 60px; height: 60px; }
  .chapters ol { grid-template-columns: 1fr 1fr; }
  .chapters a { flex-direction: row; text-align: left; gap: 10px; }
  .chapter { grid-template-columns: minmax(0, 640px); }
  .chapter > .body, .chapter > .margin.l, .chapter > .margin.r, .chapter > .wide, .chapter > .back-row { grid-column: 1; grid-row: auto; }
  .chapter > .margin { margin: 4px 0 14px; justify-content: flex-start; }
  .chapter > .margin.l { order: 2; }   /* the glosses follow the text they comment on */
  .chapter > .margin.r { order: 3; }
  .chapter > .wide { order: 4; }
  .chapter > .back-row { order: 5; }
  .chapter .margin .droll svg { width: 84px; }
}
@media (max-width: 520px) {
  body { padding: 8px 8px 32px; }
  .corner { width: 64px; height: 64px; }
  .vine { top: 67px; bottom: 67px; width: 16px; }   /* stem ends at 6 + 12.8, 6 + 63; 2 px tucked under */
  .vine.l { left: 11px; }
  .vine.r { right: 11px; }
  .leaf-page { padding: 34px 28px 76px; }
  .over { font-size: 14px; padding: 0 40px; }
  h1 { font-size: 46px; }
  h1 .init svg { width: 76px; }
  .facts { grid-template-columns: 1fr; gap: 10px; text-align: left; }
  .fact { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; }
  .lede { font-size: 19px; }
  .chapters ol { grid-template-columns: 1fr; }
  .chapter { margin-top: 40px; }
  .body p { font-size: 18px; }
  .opening .ini svg { width: 54px; height: 54px; }
  .steps .t { font-size: 17px; }
  .extracts li { padding: 10px 12px; }
  .extracts q { font-size: 18px; }
}