/* Shared pieces for pages 01-11: royal hero sections, kit-art marks, readable body text.
   Link after ink.css and royal-hero.css. No borders or fills: art is drawn, rules are ink. */

html, body { background: url(parchment-tile.png) 0 0 / 512px 512px repeat; }

/* A snap-and-focus section sized to its content; the stepper centres short sections on screen. */
.ri-sec { box-sizing: border-box; min-height: auto; padding: clamp(48px, 10svh, 120px) 20px; display: flex; flex-direction: column; justify-content: center; }
.ri-sec > * { width: 100%; box-sizing: border-box; }

/* Status seals before exact / caveat / unsupported; the ink-coloured word stays. */
img.seal-mark { display: inline-block !important; width: auto !important; height: 1.3em !important; vertical-align: -.32em; margin: 0 .16em 0 0 !important; object-fit: contain; }

/* The PROVEN shield beside or above the proof numbers. */
.ri-proven { display: block; width: clamp(110px, 11vw, 150px); height: auto; margin: 0 auto 10px; }
.ri-proven-row { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 2.4vw, 32px); }
.ri-proven-row .ri-proven { margin: 0; flex: none; }

/* The npm scroll after the seal is broken; the live command sits under it for copying and screen readers. */
.ri-npm { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0 auto 22px; }
.ri-npm img { width: clamp(150px, 14vw, 200px); height: auto; }
.ri-npm code { font: clamp(18px, 1.4vw, 22px) var(--mono); color: var(--ink); }
.ri-npm small { font: 15px var(--mono); color: var(--ink-soft); }

/* The crest as a small section emblem. */
.ri-crest { display: block; width: clamp(84px, 7vw, 108px); height: auto; margin: 0 auto 12px; }

/* Map legend drawn as the three banners. */
.ri-legend { display: flex; justify-content: center; gap: clamp(14px, 2.5vw, 34px); margin: 14px 0 0; padding: 0; list-style: none; }
.ri-legend li { display: flex; flex-direction: column; align-items: center; }
.ri-legend img { width: clamp(52px, 5vw, 70px); height: auto; }

/* Map place vignettes: the name is on the ribbon, so the image carries it. */
.ri-place { display: block; width: 100%; height: auto; pointer-events: none; filter: drop-shadow(0 3px 3px rgba(90,60,25,.18)); }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Drawn art put to work (kit/*.png, icons/*.png). Images sit beside or above text, never over it. ---- */

/* The hero cue drawn as the "Read the letter" ribbon; the label stays for screen readers. */
.royal-hero[data-cue-label="Read the letter"] .rh-cue::before { content: ""; display: block; width: clamp(170px, 15vw, 220px); aspect-ratio: 270 / 90;
  background: url(kit/read-letter.png) center / contain no-repeat; filter: drop-shadow(0 3px 3px rgba(90,60,25,.2)); transition: transform .25s ease; }
.royal-hero[data-cue-label="Read the letter"] .rh-cue:hover::before { transform: translateY(-2px) scale(1.03); }
.royal-hero[data-cue-label="Read the letter"] .rh-cue-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The sealed letter beside a salutation: floats right, text wraps around it. */
img.ri-sealed { float: right; width: clamp(110px, 10vw, 150px); height: auto; margin: -6px 0 10px 22px; shape-outside: margin-box;
  filter: drop-shadow(0 4px 4px rgba(90,60,25,.2)); }

/* A drawn image beside a block of text (e.g. the map beside "The Road Ahead"). */
.ri-beside { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); }
.ri-beside > img { flex: none; width: clamp(120px, 12vw, 180px); height: auto; filter: drop-shadow(0 4px 4px rgba(90,60,25,.2)); }
.ri-beside > :not(img) { flex: 1; min-width: 0; }

/* A themed icon heading: the drawn icon stands beside (or above, with .ri-h--stack) the heading. */
.ri-h { display: flex; align-items: center; gap: 16px; }
.ri-h > img { flex: none; width: clamp(80px, 7vw, 100px); height: auto; filter: drop-shadow(0 3px 3px rgba(90,60,25,.18)); }
.ri-h > h2, .ri-h > h3 { margin: 0 !important; }
.ri-h--sm > img { width: 72px; }
.ri-h--stack { flex-direction: column; gap: 8px; text-align: center; }
.ri-icon { display: block; width: clamp(84px, 7vw, 100px); height: auto; margin: 0 auto 8px; filter: drop-shadow(0 3px 3px rgba(90,60,25,.18)); }

/* The EXACT / CAVEAT / UNSUPPORTED signpost where the three marks are introduced. */
p:has(> img.ri-signpost) { display: flow-root; }
img.ri-signpost { float: left; width: clamp(96px, 8vw, 120px); height: auto; margin: 2px 22px 8px 0; filter: drop-shadow(0 3px 3px rgba(90,60,25,.2)); }
/* A small platform mark (kit2 devices, Chrome) inline beside a name. */
img.ri-plat { display: inline-block; width: 1.9em; height: auto; vertical-align: -.55em; margin-right: .25em; }

/* The treasure chest beside the install command. */
.ri-install { display: flex; align-items: center; gap: 16px; margin-top: 22px; }
.ri-install > img { flex: none; width: clamp(84px, 7vw, 100px); height: auto; filter: drop-shadow(0 3px 3px rgba(90,60,25,.2)); }
.ri-install > :not(img) { margin: 0 !important; }

/* Summary footer: banners and the install chest side by side. */
.ri-foot { display: flex; align-items: center; justify-content: center; gap: 24px 48px; flex-wrap: wrap; margin-top: 18px; }
.ri-foot .ri-install { margin-top: 0; }

/* PROVEN, big and central in proof sections. */
.ri-proven--big { width: clamp(170px, 15vw, 220px); }

/* Where each realm stands: the three status banners, each with an honest caption. */
.ri-banners { display: flex; justify-content: center; gap: clamp(18px, 3vw, 44px); margin: 22px 0 0; padding: 0; list-style: none !important; }
.ri-banners li { display: flex; flex-direction: column; align-items: center; width: 150px; margin: 0 !important; text-align: center;
  font: italic 17px/1.3 var(--text); color: var(--ink-soft); }
.ri-banners img { width: 92px; height: auto; margin-bottom: 6px; filter: drop-shadow(0 3px 3px rgba(90,60,25,.2)); }
.ri-banners b { display: block; font: 600 18px/1.2 var(--display); font-style: normal; color: var(--ink); }

/* The quest map in its own section, sized by a script to fit the viewport (zoom). */
.ri-map-sec { padding-block: 20px; }
@media (min-width: 761px) {
  .ri-map-sec .map { width: 1100px !important; max-width: none !important; flex: none; margin: 0 auto; }
  .ri-map-sec .map-scroll { display: flex; justify-content: center; }
}

@media (max-width: 760px) {
  img.ri-sealed { width: 92px; margin-left: 12px; }
  .ri-beside { flex-direction: column; }
  .ri-beside > img { width: 120px; }
  .ri-banners { gap: 10px; }
  .ri-banners li { width: 100px; font-size: 14px; }
  .ri-banners img { width: 70px; }
}

/* Leave room for the cue arrow at 1440x900: the emblem gives up a little height. */
.royal-hero { --rh-emblem-w: min(1100px, 92vw, calc((100svh - 440px) * 1.895)); }
@media (max-width: 760px) { .royal-hero { --rh-emblem-w: 94vw; } }