/* iconkind — brand layer over /qx/v5/blocks.css.
   Tokens come from the theme (icon.theme.json); this file only styles the
   ik-* brand classes the pages and objects reference. Values are carried over
   from sites/iconkind/static/css/site.css — this is a re-platforming, not a
   redesign, so the site should look like itself. */

:root { color-scheme: light; }

/* CLIP, NOT HIDDEN. Graham, 2026-09-13: the header should stay at the top while a page
   scrolls. It is position: sticky, but `overflow-x: hidden` on html and body made body a
   scroll container of its own (the other axis turns to auto) — one that never scrolls —
   so the header stuck inside body and left the screen with the page. `clip` cuts off
   sideways overflow the same way without making a scroll container. Measured in
   Chromium on /treekind and /cast at 390 and 360: header stays at top 0 after scrolling,
   and nothing scrolls sideways. `hidden` stays first for browsers without `clip`. */
html, body { max-width: 100%; overflow-x: hidden; overflow-x: clip; }
body {
  background: var(--ik-cream, #fef6e8);
  color: var(--ik-ink, #2a2418);
  font-family: "Inter", -apple-system, system-ui, sans-serif;
  margin: 0;
}

.ik-container { width:100%; max-width:var(--w-page); margin-inline:auto; padding-inline:var(--sp-gutter); }
.text-center { text-align: center; }

/* ── bands ─────────────────────────────────────────────────────────────── */
.ik-band       { width:100%; padding-block:var(--sp-band); }
.ik-band-soft  { background: var(--ik-cream-soft, #fff9ee); }
.ik-hero       { padding-block:calc(var(--sp-band) * 1.3) var(--sp-band); background:
                 linear-gradient(180deg, var(--ik-cream-deep, #fde8c8) 0%, var(--ik-cream, #fef6e8) 100%); }

/* ── type ──────────────────────────────────────────────────────────────── */
.ik-kicker {
  font-size: var(--t-micro); font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ik-sage, #6e8868); margin: 0 0 1rem;
}
.ik-display, .ik-h2, .ik-holding-title {
  font-family: "Fraunces", "Cormorant Garamond", Georgia, serif;
  font-weight: 600; line-height: 1.1; letter-spacing: -.015em;
  color: var(--ik-ink, #2a2418); margin: 0;
}
.ik-display       { font-size: calc(var(--t-display) * 1.15); text-align: center; }
.ik-holding-title { font-size: var(--t-display); text-align: center; margin: .25rem 0 1rem; }
.ik-h2            { font-size: var(--t-h2); margin-bottom: var(--sp-xs); }
.ik-accent        { color: var(--ik-coral, #e07856); }

.ik-lead { font-size: var(--t-lead); line-height: 1.65; color: var(--ik-ink-soft, #6b5c44);
           max-width: 44rem; margin: 1.25rem auto 0; }
.ik-body { font-size: var(--t-lead); line-height: 1.7; color: var(--ik-ink-soft, #6b5c44);
           max-width: 46rem; margin: 0 0 2rem; }
.ik-footnote { font-size: var(--t-small); color: var(--ik-ink-muted, #9a8c70); margin: 0; }

/* ── the brand dot / faces ─────────────────────────────────────────────── */
/* Stand-ins for the cast until real character art is exported from the V3
   character.iconkind rig. Deliberately abstract: shipping invented artwork for
   a character system that already exists would be worse than shipping none. */
.ik-dot  { width: 1.1rem; height: 1.1rem; border-radius: 50%;
           background: var(--ik-coral, #e07856); flex: none; }
.ik-face { width: 3.25rem; height: 3.25rem; border-radius: 50%; flex: none;
           border: 2px solid rgba(42,36,24,.12); }
.ik-faces { gap: .6rem; margin-bottom: var(--sp-m); }
.ik-face-sage     { background: var(--ik-sage-soft, #cdd9c4); }
.ik-face-sagedeep { background: var(--ik-sage, #6e8868); }
.ik-face-coral    { background: var(--ik-coral, #e07856); }
.ik-face-peach    { background: var(--ik-peach, #fbcfa8); }
.ik-face-plum     { background: #9b6f9b; }
.ik-face-brown    { background: #a98157; }
.ik-face-teal     { background: #6a9d9a; }
.ik-face-cream    { background: var(--ik-cream-deep, #fde8c8); }

/* ── header / footer ───────────────────────────────────────────────────── */
.ik-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; flex-direction: row; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  width: 100%; margin: 0;
  padding-inline: clamp(.85rem, 3vw, 2rem); padding-block: .85rem; gap: var(--sp-s);
  background: color-mix(in srgb, var(--ik-cream, #fef6e8) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ik-rule, rgba(42,36,24,.10));
}
.ik-mark { display: flex; align-items: center; gap: .55rem; text-decoration: none; }
.ik-wordmark { font-family: "Fraunces", Georgia, serif; font-size: 1.35rem; font-weight: 600;
               color: var(--ik-ink, #2a2418); }
.ik-nav { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap;
           gap: .6rem clamp(.9rem, 2.5vw, 1.75rem); }
.ik-mark { display: inline-flex; flex-direction: row; align-items: center; gap: .5rem; }
/* THE LOGO — Radiant and ICONKIND in Iconkind Light, drawn from our own letters
   and published by tools/build-logo-page.mjs as /assets/logo/iconkind-lockup.svg.
   An image, not text: it needs no web font and no library, and every page shows
   the same drawing. The height sets it; the width follows the drawing. */
.ik-logo, .ik-logo img { display: block; height: 1.9rem; width: auto; }
@media (max-width: 46rem) { .ik-logo, .ik-logo img { height: 1.55rem; } }
/* On a phone the wordmark keeps the top line and the menu drops to its own
   centred row — links WRAP rather than pushing the page sideways. */
@media (max-width: 46rem) {
  .ik-header { justify-content: center; row-gap: .55rem; }
  .ik-nav    { flex-basis: 100%; justify-content: center; }
  .ik-navlink { font-size: .88rem; }
}
.ik-navlink { font-size: var(--t-body); font-weight: 500; text-decoration: none;
              color: var(--ik-ink-soft, #6b5c44); }
.ik-navlink:hover { color: var(--ik-coral-deep, #b85432); }

.ik-footer { width: 100%; margin: 0;
             padding: var(--sp-band) clamp(.85rem, 3vw, 2rem) calc(var(--sp-band) * .6); background: var(--ik-cream-deep, #fde8c8);
             border-top: 1px solid var(--ik-rule, rgba(42,36,24,.10)); }
/* the footer spans the viewport — its inner block must not re-cap it */
.ik-footer .ik-container { max-width: none; padding-inline: 0; }

/* content uses the width too: brand left, links right, rule and copy across */
.ik-footer-inner {
  display: grid; gap: var(--sp-s) var(--sp-l); align-items: center;
  grid-template-columns: auto 1fr;
}
.ik-footer-mark  { grid-column: 1; justify-self: start; }
.ik-footer-links { grid-column: 2; justify-self: end;
                   display: flex; flex-wrap: wrap; justify-content: flex-end;
                   gap: .6rem clamp(.9rem, 3vw, 1.5rem); }
.ik-footer-rule  { grid-column: 1 / -1; width: 100%; margin: 0; }
.ik-footer .ik-footnote { grid-column: 1 / -1; justify-self: start; margin: 0; }

/* one centred column on a phone */
@media (max-width: 46rem) {
  .ik-footer-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .ik-footer-mark, .ik-footer-links, .ik-footer .ik-footnote { grid-column: 1; justify-self: center; }
  .ik-footer-links { justify-content: center; }
}
.ik-footer-mark   { font-family: "Fraunces", Georgia, serif; font-size: 1.2rem; margin: 0;
                    color: var(--ik-ink, #2a2418); }
.ik-footer-logo, .ik-footer-logo img { display: block; height: 1.6rem; width: auto; }
.ik-footer-links  { gap: var(--sp-m); }
.ik-footer-link   { font-size: var(--t-small); text-decoration: none; color: var(--ik-ink-soft, #6b5c44); }
.ik-footer-link:hover { color: var(--ik-coral-deep, #b85432); }
.ik-footer-rule   { width: 3rem; height: 2px; background: var(--ik-rule, rgba(42,36,24,.10)); margin: .5rem 0; }

/* ── buttons ───────────────────────────────────────────────────────────── */
.ik-ctas { gap: var(--sp-xs); margin-top: var(--sp-l); flex-wrap: wrap; }
.ik-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .7rem 1.4rem; border-radius: var(--r-pill); text-decoration: none;
  font-size: var(--t-body); font-weight: 600; border: 1.5px solid transparent;
}
.ik-btn-primary { background: var(--ik-coral, #e07856); color: #fff; }
.ik-btn-primary:hover { background: var(--ik-coral-deep, #b85432); }
.ik-btn-ghost   { border-color: var(--ik-sage, #6e8868); color: var(--ik-sage-deep, #4a5d44); }
.ik-btn-ghost:hover { background: var(--ik-sage-soft, #cdd9c4); }

/* ── cast grid ─────────────────────────────────────────────────────────── */
/* real grid: auto-FILL keeps a short last row from stretching (18 cast cards) */
.ik-grid { display:grid; gap:var(--sp-m);
           grid-template-columns:repeat(auto-fill, minmax(min(14rem, 100%), 1fr)); }

/* ── the cast, BY SET ──────────────────────────────────────────────────────
   Twenty-four in one grid read as two grades of finish: nine bare kinds beside
   fifteen dressed ones, looking unfinished rather than looking like the base
   the others are worn over. The sets come from the roster, which is generated,
   so a new character lands in the right section without touching the page. */
.ik-sets { display:flex; flex-direction:column; gap:var(--sp-xl, 3.5rem); }
.ik-set { display:flex; flex-direction:column; }
.ik-set-h { font-family:var(--f-display, inherit); font-size:var(--t-h2, 1.6rem);
            color:var(--ik-ink, #2a2418); margin:0; }
.ik-set-blurb { font-size:var(--t-small); line-height:1.6;
                color:var(--ik-ink-soft, #6b5c44); max-width:40rem;
                margin:.4rem 0 var(--sp-m); }
/* ── surface: ONE card, five users ─────────────────────────────────────
   Previously five near-identical blocks with three different borders
   (#ece7dc vs --ik-rule) and three radii (1rem / 1.5rem / 16px). */
.ik-card, .ik-cast-card, .ik-slot, .ik-play-cell, .ik-cust-stage {
  background: #fff;
  border: 1px solid var(--ik-rule, rgba(42,36,24,.10));
  border-radius: var(--r-card, 1rem);
  padding: var(--sp-m);
}
.ik-cast-card, .ik-play-cell, .ik-cust-stage {
  container-type: inline-size;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2xs);
}
.ik-cast-card { position: relative; }

/* a card holding PROSE, not a figure: text reads left, full measure */
.ik-card--text { align-items: flex-start; text-align: left; gap: var(--sp-3xs); }
.ik-card--text .ik-cast-bio { max-width: 46ch; }

/* three-up prose cards (about) — a real grid, so they cannot squeeze */
.ik-cards { display: grid; gap: var(--sp-m); align-items: start;
            grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); }
.ik-cast-kind { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
                color: var(--ik-sage, #6e8868); margin: .75rem 0 0; }
.ik-cast-name { font-family: "Fraunces", Georgia, serif; font-size: 1.5rem; font-weight: 600;
                margin: 0; color: var(--ik-ink, #2a2418); }
.ik-cast-bio  { font-size: .92rem; line-height: 1.6; color: var(--ik-ink-soft, #6b5c44); margin: .25rem 0 0; }

/* ── parts row ─────────────────────────────────────────────────────────── */
.ik-parts { gap: .6rem; }
.ik-part {
  padding: .45rem var(--sp-s); border-radius: var(--r-pill); font-size: var(--t-small); font-weight: 500;
  background: var(--ik-sage-soft, #cdd9c4); color: var(--ik-sage-deep, #4a5d44);
}

/* ── holding card ──────────────────────────────────────────────────────── */
.ik-holding { min-height: 100vh; padding: var(--sp-l); }
.ik-holding-card { max-width: 34rem; padding: 3.5rem var(--sp-xl); text-align: center; }
.ik-holding-rule { width: 3rem; height: 2px; background: var(--ik-coral, #e07856);
                   margin: 1.75rem 0 1.25rem; }

@media (max-width: 640px) {
  .ik-band  { padding: 3.5rem 0; }
  .ik-hero  { padding: 4.5rem 0 3.5rem; }
  .ik-nav   { gap: var(--sp-s); }
  .ik-navlink { font-size: var(--t-small); }
  .ik-holding-card { padding: var(--sp-xl) var(--sp-m); }
}

/* ── cast portraits ────────────────────────────────────────────────────── */
/* Each portrait <use>s the #ik-body symbol that objects/sprite.icon renders
   once per page — eight portraits, one copy of the shared body geometry. */
.ik-toon svg, svg.toon { width: 5.5rem; height: auto; display: block; }

/* ── /system — the six slots ───────────────────────────────────────────── */
.ik-slots { display: grid; gap: var(--sp-s); margin-top: var(--sp-s);
             grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); }
.ik-slot { gap: .2rem; align-items: flex-start; }
.ik-slot-num   { font-family: "Fraunces", Georgia, serif; font-size: 1.5rem; margin: 0;
                 color: var(--ik-peach, #fbcfa8); }
.ik-slot-title { font-weight: 600; font-size: var(--t-lead); margin: 0; color: var(--ik-ink, #2a2418); }
.ik-slot-body  { font-size: var(--t-small); line-height: 1.6; margin: .3rem 0 0;
                 color: var(--ik-ink-soft, #6b5c44); }
.ik-arch-glyph { font-size: 1.6rem; line-height: 1; margin: 0 0 .4rem;
                 color: var(--ik-sage, #6e8868); }

/* ── /about ────────────────────────────────────────────────────────────── */
.ik-quote {
  font-family: "Fraunces", Georgia, serif; font-size: 1.3rem; line-height: 1.5;
  color: var(--ik-sage-deep, #4a5d44); border-left: 3px solid var(--ik-peach, #fbcfa8);
  padding-left: 1.25rem; margin: 2rem 0; max-width: 40rem;
}
/* An unmistakably unfinished block. It SHOULD look wrong — it is a placeholder
   carried over from the static site, and a placeholder that blends in is one
   that ships. */
.ik-todo {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-small); line-height: 1.6; color: var(--ik-coral-deep, #b85432);
  background: #fff4ef; border: 1px dashed var(--ik-coral, #e07856);
  border-radius: .75rem; padding: var(--sp-s) 1.25rem; max-width: 46rem; margin: 0;
}

/* ── interactive character (tap to speak) ──────────────────────────────── */
/* The portrait is a hit target: onActivate on its container becomes a click at
   hydration. The affordance has to read as tappable without a button chrome. */
.ik-tap { cursor: pointer; border-radius: 999px; transition: transform .12s ease; -webkit-tap-highlight-color: transparent; }
.ik-tap:hover  { transform: translateY(-2px); }
.ik-tap:active { transform: translateY(0) scale(.97); }
/* The inline speech-bubble (visible only while this instance is speaking).
   It sits in the card flow under the portrait; keep it compact and on-brand.
   .qx-speech-bubble is the block's own base class. */
.ik-say.qx-speech-bubble, .ik-cast-card .qx-speech-bubble {
  margin: .25rem auto .5rem; max-width: 14rem;
  background: var(--ik-sage, #6e8868); color: #fff;
  font-size: var(--t-small); line-height: 1.4; font-weight: 500;
  padding: .55rem .85rem; border-radius: var(--r-card);
}


/* ── the customizer + scene pages ─────────────────────────────────────── */
.ik-cust { display:grid; gap:var(--sp-xl); align-items:start;
           grid-template-columns:repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
.ik-cust-stage { box-shadow: var(--sh-card); position: sticky; top: var(--sp-m); }
.ik-cust-controls { display:flex; flex-direction:column; gap:1.1rem; }
.ik-ctl-group { display:flex; flex-direction:column; gap:.4rem; }
.ik-ctl-label { font:600 .7rem system-ui; letter-spacing:.16em; text-transform:uppercase; color: var(--ik-sage-deep, #4a5d44); margin:0; }
.ik-chips { display:flex; flex-wrap:wrap; gap:.4rem; }
/* chips carried Plush Explorer's palette (#a07d3c, #ddd4c4) and system-ui —
   pasted in when the customizer was built. They are iconkind's now. */
.ik-chip {
  font-family: inherit; font-size: var(--t-micro); font-weight: 500;
  color: var(--ik-ink, #2a2418); background: #fff;
  border: 1.5px solid var(--ik-rule, rgba(42,36,24,.10));
  border-radius: var(--r-pill); padding: .3rem .8rem;
  cursor: pointer; user-select: none;
  transition: border-color .15s, background .15s, transform .1s;
}
.ik-chip:hover  { border-color: var(--ik-sage, #6e8868); background: var(--ik-cream-soft, #fff9ee); }
.ik-chip:active { transform: translateY(1px); }
.ik-readout { font-size: var(--t-micro); line-height: 1.5; color: var(--ik-ink-muted, #9a8c70);
              margin: 0; text-align: center; }
.ik-scene-wrap { max-width: 46rem; margin: var(--sp-m) auto 0;
  border: 1px solid var(--ik-rule, rgba(42,36,24,.10)); border-radius: var(--r-card, 1rem);
  overflow: hidden; box-shadow: var(--sh-card-raised); background: var(--ik-cream-deep, #fde8c8); }
.ik-scene { display:block; width:100%; }
.ik-band--studio { padding-top:var(--sp-2xs); }

/* ── the playground ───────────────────────────────────────────────────── */
.ik-play-row  { display:grid; gap:var(--sp-l); margin-top:var(--sp-m);
                grid-template-columns:repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); }
.ik-play-cell { box-shadow: var(--sh-card); }
.ik-play-cell .ik-chips { justify-content:center; }
.ik-walk-stage { max-width: 44rem; margin: var(--sp-m) auto 0;
  border: 1px solid var(--ik-rule, rgba(42,36,24,.10)); border-radius: var(--r-card, 1rem);
  overflow: hidden; box-shadow: var(--sh-card-raised); }
/* the world clips: a character on a path can never leave the frame */
.ik-walk-stage .qx-stage__layer { overflow:hidden; }
.ik-walker { pointer-events:auto; }

/* Cast cards now hold RIG FIGURES (200x240) rather than the 100x130 portraits.
   The figure sizes itself from the catalog frame (engine C9); the card just
   gives it a consistent width and keeps the tap target comfortable. */
.ik-cast-card .ik-toon { width: 9rem; margin: 0 auto; }
.ik-cast-card .ik-toon .qx-figure { width: 100%; }

/* ── the card range ────────────────────────────────────────────────────────
   A card is shown TRIMMED (its def's viewBox is the trim window), so all this
   has to do is give it an edge and a shadow — the aspect comes from the artwork
   itself, which is the point of the whole range. */
.ik-card-grid { display: grid; gap: var(--sp-xl) var(--sp-m); align-items: start;
                grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); }
.ik-card-cell { display: flex; flex-direction: column; align-items: center; text-align: center;
                gap: var(--sp-3xs); }
.ik-cardart   { width: 100%; border-radius: .25rem; overflow: hidden;
                box-shadow: 0 .5rem 1.4rem rgba(42, 36, 24, .16), 0 0 0 1px rgba(42, 36, 24, .06); }
.ik-cardart .qx-figure, .ik-cardart svg { display: block; width: 100%; height: auto; }
.ik-card-inside { font-size: var(--t-small); line-height: 1.5; color: var(--ik-ink, #2a2418);
                  font-style: italic; margin: .15rem 0 .25rem; max-width: 24ch; }
.ik-card-cell .ik-cast-bio { max-width: 30ch; }
.ik-cardlink { font-size: var(--t-micro); letter-spacing: .04em; text-transform: uppercase;
               color: var(--ik-sage-deep, #4a5d44); text-decoration: none;
               border-bottom: 1px solid var(--ik-rule, rgba(42,36,24,.10)); padding-bottom: .1rem; }
.ik-cardlink:hover { color: var(--ik-coral-deep, #b85432); }

/* ── the type specimen ─────────────────────────────────────────────────────
   Nothing but width: the sheets are drawn to their own aspect and the page just
   gives them room and a rule between. */
.ik-type-sheet { width: 100%; margin: 0 0 var(--sp-xl); }
.ik-type-sheet:last-child { margin-bottom: 0; }
.ik-type-sheet svg, .ik-type-mark svg { display: block; width: 100%; height: auto; }
.ik-type-mark  { width: 100%; max-width: 30rem; margin: var(--sp-m) 0 0; }

/* ── the catch (fish) ──────────────────────────────────────────────────────
   A fish is drawn in landscape (240x150) where every other form is portrait,
   so its art box is the full card width rather than the 9rem column a standing
   figure gets — otherwise a conger reads as a thread. */
.ik-cast-card .ik-fish { width: 100%; margin: 0 auto; display: flex; align-items: center; }
.ik-cast-card .ik-fish .qx-figure { width: 100%; }

/* ── the DNA pattern ───────────────────────────────────────────────────── */
.ik-dna-card    { gap: var(--sp-2xs); }
.ik-dna-head    { display: flex; flex-direction: column; gap: 0; }
.ik-dna-pattern { width: 100%; max-width: 11rem; margin: var(--sp-2xs) 0; }
.ik-dna-code    { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
                  font-size: var(--t-micro); letter-spacing: .04em;
                  color: var(--ik-ink-muted, #9a8c70); margin: 0; }
.ik-dna-sim     { display: flex; flex-direction: column; gap: 0; margin-top: var(--sp-2xs); }
.ik-dna-legend-row { display: flex; flex-direction: row; align-items: center; gap: .5rem; }
.ik-dna-swatch  { width: 1.4rem; height: .55rem; border-radius: 999px; flex: none; }

/* ── DESIGN LAB ────────────────────────────────────────────────────────────
   The dress bench used these class names with no rules behind them — caught by
   tools/check-classes.mjs. The bench worked but looked unconsidered, which is
   what an unstyled class always looks like. */
.ik-section   { padding: var(--sp-l, 2rem) 0; }
.ik-container { width: min(72rem, 100% - 2rem); margin-inline: auto; }
.ik-narrow    { width: min(44rem, 100% - 2rem); }
.ik-h1        { font-size: clamp(1.7rem, 5vw, 2.4rem); line-height: 1.15; margin: .2rem 0 .5rem; }
.ik-lede      { font-size: clamp(1rem, 2.5vw, 1.1rem); line-height: 1.6; opacity: .85; }
.ik-studio    { display: grid; gap: 1.4rem; }
.ik-play-cell { display: grid; place-items: center; background: #fff;
                border: 1px solid var(--ik-line, #e7e2d8); border-radius: 14px; padding: 1.2rem; }
.ik-controls  { display: grid; gap: 1.1rem; }
.ik-axis      { display: block; }
.ik-axis-h    { font-size: .95rem; font-weight: 700; margin: 0 0 .15rem; }
.ik-dresser   { display: block; width: 100%; max-width: 22rem; margin-inline: auto; }
.ik-dna-legend{ display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; justify-content: center;
                font-size: .85rem; opacity: .85; }
@media (min-width: 48rem) { .ik-studio { grid-template-columns: minmax(0, 20rem) 1fr; align-items: start; } }

/* ── the Society register ──────────────────────────────────────────────────
   A record per character: number and rarity, then the binomial and what the
   kind reads as, then the back-code the art actually draws. Deliberately
   closer to a specimen label than to a product card. */
.ik-reg { display:flex; flex-direction:column; }
.ik-reg-row { display:grid; gap:var(--sp-s, .75rem); align-items:start;
              grid-template-columns:7rem 1fr auto;
              padding:var(--sp-m) 0; border-top:1px solid var(--ik-rule, #e6dfd0); }
.ik-reg-row:last-child { border-bottom:1px solid var(--ik-rule, #e6dfd0); }
.ik-reg-id { display:flex; flex-direction:column; gap:.25rem; }
.ik-reg-no { font-family:ui-monospace, "SF Mono", Menlo, monospace;
             font-size:var(--t-small); color:var(--ik-ink, #2a2418); letter-spacing:.04em; }
.ik-reg-rarity { font-size:var(--t-tiny, .72rem); text-transform:uppercase; letter-spacing:.08em;
                 color:var(--ik-ink-muted, #9a8c70); }
.ik-reg-main { min-width:0; }
.ik-reg-name { font-family:var(--f-display, inherit); font-size:var(--t-h3, 1.15rem);
               color:var(--ik-ink, #2a2418); margin:0; }
.ik-reg-bin { font-style:italic; font-size:var(--t-small);
              color:var(--ik-ink-soft, #6b5c44); margin:.15rem 0 0; }
.ik-reg-reads { font-size:var(--t-small); color:var(--ik-ink-muted, #9a8c70); margin:.3rem 0 0; }
.ik-reg-code { min-width:0; }
.ik-reg-codeline { font-family:ui-monospace, "SF Mono", Menlo, monospace;
                   font-size:var(--t-tiny, .72rem); color:var(--ik-ink-soft, #6b5c44);
                   white-space:nowrap; }
@media (max-width:640px) {
  .ik-reg-row { grid-template-columns:1fr; }
  .ik-reg-id { flex-direction:row; gap:.6rem; align-items:baseline; }
  .ik-reg-codeline { white-space:normal; }
}

/* the readout: five measures, the back-code, the nearest kin. Monospace on
   purpose — it is a specimen label, not a product card. */
.ik-reg-fit { font-size:var(--t-small); color:var(--ik-ink, #2a2418); margin:.45rem 0 0; }
.ik-reg-meters { display:flex; flex-direction:column; gap:.1rem; margin-bottom:.4rem; }
.ik-reg-meter { font-family:ui-monospace, "SF Mono", Menlo, monospace;
                font-size:var(--t-tiny, .72rem); color:var(--ik-ink-soft, #6b5c44);
                white-space:pre; letter-spacing:-.02em; }
.ik-reg-kin { display:flex; gap:.6rem; margin-top:.35rem; flex-wrap:wrap; }
.ik-reg-kinline { font-size:var(--t-tiny, .72rem); color:var(--ik-ink-muted, #9a8c70); }

/* dinokind concept page */
.ik-dino-name { font-family:var(--f-display, inherit); font-size:var(--t-h3, 1.15rem);
                color:var(--ik-ink, #2a2418); margin:.4rem 0 0; }
.ik-dino-note { font-size:var(--t-small); color:var(--ik-ink-muted, #9a8c70);
                margin:.15rem 0 0; text-align:center; }

/* the dev index — a list of routes, not a gallery. Dead rows stay visible and
   greyed rather than being dropped: a page with no route is the thing you most
   need an index to tell you about. */
.ik-dev-list { display:flex; flex-direction:column; }
.ik-dev-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.2rem 1rem;
              padding:.7rem 0; border-top:1px solid var(--ik-rule, #e6dfd0);
              text-decoration:none; color:inherit; }
.ik-dev-list > *:last-child { border-bottom:1px solid var(--ik-rule, #e6dfd0); }
.ik-dev-row:hover { background:var(--ik-wash, #faf6ec); }
.ik-dev-name { font-family:var(--f-display, inherit); font-size:var(--t-h3, 1.05rem);
               color:var(--ik-ink, #2a2418); }
.ik-dev-path { font-family:ui-monospace, "SF Mono", Menlo, monospace;
               font-size:var(--t-tiny, .72rem); color:var(--ik-ink-muted, #9a8c70);
               justify-self:end; align-self:center; }
.ik-dev-desc { grid-column:1 / -1; font-size:var(--t-small);
               color:var(--ik-ink-soft, #6b5c44); margin:.1rem 0 0; }
.ik-dev-row--dead { opacity:.5; }
.ik-dev-row--dead .ik-dev-path { color:var(--ik-accent, #b56352); }

/* ── /tshirts — the line register beside the figures ──────────────────────────
   The two idioms are shown on the SAME card stock and at the same scale, which
   is the whole argument: what makes them one brand is the frame, not the
   drawing. Panels are portrait (300x456), figures square-ish, so the row is a
   grid with a fixed row height rather than a flex row that would scale one to
   match the other. */
.ik-tee-row { display: grid; gap: var(--sp-m);
              grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.ik-tee { background: #fdf8f0; border: 1px solid var(--ik-rule, #e6dfd0);
          border-radius: var(--r-card, 1rem); padding: var(--sp-m);
          display: flex; flex-direction: column; align-items: center; gap: var(--sp-2xs); }
.ik-tee-art { width: 100%; max-width: 15rem; margin: 0 auto; }
.ik-tee-art svg { width: 100%; height: auto; display: block; }
.ik-tee-art--fig { max-width: 10rem; padding: 1rem 0; }
.ik-tee-cap { font-size: var(--t-micro, .78rem); letter-spacing: .08em;
              text-transform: uppercase; color: var(--ik-ink-muted, #9a8c70); margin: 0; }
.ik-sig-row { display: grid; gap: var(--sp-s);
              grid-template-columns: repeat(auto-fit, minmax(min(7.5rem, 45%), 1fr)); }
.ik-sig { display: flex; flex-direction: column; align-items: center; gap: .3rem;
          padding: var(--sp-s) var(--sp-2xs); background: #fdf8f0;
          border: 1px solid var(--ik-rule, #e6dfd0); border-radius: var(--r-card, 1rem); }
.ik-sig-art { width: 100%; max-width: 7rem; }
.ik-sig-art svg { width: 100%; height: auto; display: block; }
.ik-sig-cap { font-size: var(--t-micro, .72rem); letter-spacing: .1em;
              text-transform: uppercase; color: var(--ik-ink-muted, #9a8c70); margin: 0; }
.ik-slot-body { font-size: var(--t-small); line-height: 1.6;
                color: var(--ik-ink-soft, #6b5c44); margin: .3rem 0 0; }

/* ── /tshirts — products ─────────────────────────────────────────────────────
   A product is a card of garment FACES: one for a signal shirt, two for a
   character shirt where the back carries the register. The faces sit side by
   side inside the card rather than as separate cards, because front and back
   are one thing you buy. */
.ik-prod-row { display: grid; gap: var(--sp-m); align-items: start;
               grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); }
.ik-prod { background: #fff; border: 1px solid var(--ik-rule, #e6dfd0);
           border-radius: var(--r-card, 1rem); padding: var(--sp-m);
           display: flex; flex-direction: column; gap: .2rem; }
.ik-tee-faces { display: flex; gap: .6rem; justify-content: center; align-items: flex-start; }
.ik-tee-face { display: flex; flex-direction: column; align-items: center; gap: .3rem; flex: 1 1 0; min-width: 0; }
.ik-tee-face .ik-tee-art { width: 100%; max-width: 14rem; }
.ik-prod-name { font-family: var(--f-display, inherit); font-size: var(--t-h3, 1.15rem);
                color: var(--ik-ink, #2a2418); margin: .7rem 0 0; }
.ik-prod-line { font-size: var(--t-small); font-style: italic;
                color: var(--ik-ink-soft, #6b5c44); margin: .1rem 0 0; }
.ik-prod-note { font-size: var(--t-micro, .78rem); letter-spacing: .04em;
                color: var(--ik-ink-muted, #9a8c70); margin: .35rem 0 0; }

/* ── /tshirts — the moodboard beside what it became ─────────────────────────
   A generated MOCKUP (a photograph of a shirt) and a VECTOR garment are
   different kinds of picture, so they are given equal width and left to be
   different rather than forced to match — the point of the row is the contrast,
   not a seamless join. */
.ik-board-list { display: flex; flex-direction: column; gap: var(--sp-xl, 3rem); }
.ik-board-row { display: flex; flex-direction: column; }
.ik-board-pair { display: grid; gap: var(--sp-m); align-items: center;
                 grid-template-columns: minmax(0, 1fr); }
@media (min-width: 52rem) { .ik-board-pair { grid-template-columns: 1.35fr 1fr; } }
.ik-board-pair--solo { grid-template-columns: minmax(0, 1fr) !important; max-width: 44rem; }
.ik-board-side { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.ik-board-img { width: 100%; height: auto; display: block;
                border: 1px solid var(--ik-rule, #e6dfd0); border-radius: var(--r-card, 1rem); }
.ik-board-side--tee .ik-tee-art { max-width: 15rem; }
.ik-board-row .ik-prod-name { margin-top: var(--sp-m); }
.ik-board-row .ik-slot-body { max-width: 46rem; }

/* the generated spec sheet: a tall document, given its own full-width frame */
.ik-spec-sheet { max-width: 46rem; margin: var(--sp-m) auto 0;
                 border: 1px solid var(--ik-rule, #e6dfd0); border-radius: var(--r-card, 1rem);
                 overflow: hidden; background: #fdf8f0; }
.ik-spec-sheet svg { width: 100%; height: auto; display: block; }

/* ── the forms (/kinds) ─────────────────────────────────────────────────────
   One card per body form. The card is a COLUMN with the button pinned to the
   bottom (margin-top:auto), because the five leads are different lengths and a
   row of buttons at five different heights reads as five different components
   rather than one set. The figure sits in a fixed-height box for the same
   reason: merkind is 272 units tall and treekind 300, so left to themselves the
   cards step down the row like a staircase. */
.ik-form-card { display:flex; flex-direction:column; align-items:center; text-align:center;
                gap:var(--sp-3xs); }
.ik-form-card .ik-toon { height:11rem; display:flex; align-items:flex-end; justify-content:center; }
.ik-form-card .ik-toon svg { max-height:100%; width:auto; }
.ik-form-name { font-family:"Fraunces", Georgia, serif; font-size:1.35rem; font-weight:600;
                margin:.5rem 0 0; color:var(--ik-ink, #2a2418); }
.ik-form-lead { font-size:.95rem; line-height:1.55; color:var(--ik-ink-soft, #6b5c44); margin:.2rem 0 0; }
.ik-form-note { font-size:.88rem; line-height:1.5; color:var(--ik-ink-muted, #9a8c70);
                font-style:italic; margin:.35rem 0 0; }
/* The measured line. Tabular figures so the numbers line up card to card —
   they are read as a comparison, not as prose. */
.ik-form-meta { font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
                font-variant-numeric:tabular-nums; color:var(--ik-sage-deep, #4a5d44);
                margin:.6rem 0 0; }
.ik-form-card .ik-btn { margin-top:auto; align-self:stretch; text-align:center; }
.ik-form-card + .ik-form-card { margin-top:0; }

/* ── stickers (/stickers) ───────────────────────────────────────────────────
   THE GROUND MATTERS HERE more than anywhere else on the site. These stickers
   have a cream border, the page has a cream background, and on cream they are
   invisible — the first proof of the whole technique was unreadable for exactly
   that reason. Every grid of stickers sits on a slate panel so the border can
   be seen doing its job. It is not styling, it is the subject. */
.ik-onslate { background: #5a6878; border-radius: var(--r-card, 1rem); padding: var(--sp-l, 2rem); }

.ik-sticker-grid { display: grid; gap: var(--sp-m);
                   grid-template-columns: repeat(auto-fill, minmax(min(9rem, 100%), 1fr)); }
.ik-sticker { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.ik-sticker-art { width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.ik-sticker-art svg { display: block; width: 100%; height: auto;
                      /* the shadow a real sticker casts on the surface it is
                         stuck to — a soft drop under the die line, not a box
                         shadow on a rectangle, so it follows the cut. */
                      filter: drop-shadow(0 2px 3px rgba(0,0,0,.28)); }
.ik-sticker-cap { font-size: .8rem; letter-spacing: .04em; color: #e8e2d6; margin: 0; text-align: center; }

/* the border study — four widths, side by side, each captioned */
.ik-study { display: grid; gap: var(--sp-m);
            grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); }
.ik-study-cell { display: flex; flex-direction: column; align-items: center; }
.ik-study-cell .ik-sticker-art { margin-bottom: .5rem; }
.ik-sticker-pc { font-family: "Fraunces", Georgia, serif; font-size: 1.5rem; font-weight: 600;
                 color: #fdf8f0; margin: 0; font-variant-numeric: tabular-nums; }
.ik-sticker-note { font-size: .82rem; line-height: 1.5; color: #cfc8ba; margin: .25rem 0 0;
                   text-align: center; max-width: 20ch; }

/* the sheet is one object and should read as a physical thing — give it the
   backing paper's own shadow and stop it growing past a sensible width */
.ik-sheet { display: flex; justify-content: center; }
.ik-sheet svg { display: block; width: 100%; max-width: 46rem; height: auto;
                filter: drop-shadow(0 6px 14px rgba(0,0,0,.22)); }

/* the two chips that are not one of thirty-five file links — the README and the
   colour table are what a printer opens first, so they lead rather than sort
   alphabetically into the middle of the list */
.ik-chip-lead { background: var(--ik-sage-deep, #4a5d44); color: #fdf8f0; font-weight: 600; }

/* ── /marks — THE BADGE AS AN OBJECT ────────────────────────────────────────
   A mark is drawn in a 56x56 box and means nothing at thumbnail size, so the
   cells are generous and the grid is wide-gutter: twenty small symbols in a
   tight grid read as a sprite sheet rather than as a vocabulary.
   The cell has a ground of its own because a mount's whole job is to separate
   a mark from what it sits on — on the page's cream that job is invisible, and
   the plaque would look like nothing at all. */
.ik-mark-grid { display:grid; gap:var(--sp-m);
                grid-template-columns:repeat(auto-fill, minmax(min(7rem, 100%), 1fr)); }
.ik-mark-row  { display:grid; gap:var(--sp-m);
                grid-template-columns:repeat(auto-fit, minmax(min(10rem, 100%), 1fr)); align-items:end; }
.ik-mark-item { display:flex; flex-direction:column; align-items:center; gap:.3rem; text-align:center; }
.ik-mark-cell { width:100%; max-width:6rem; background:var(--ik-cream-deep, #f2ece0);
                border-radius:var(--r-m, .8rem); padding:.5rem; }
.ik-mark-fig  { width:100%; max-width:9rem; }
.ik-mark-name { font-size:var(--t-small); font-weight:600; color:var(--ik-ink, #2a2418); }
.ik-mark-sub  { font-size:var(--t-tiny, .72rem); color:var(--ik-ink-soft, #6b6459); }

/* ── HEADER, MENU AND FOOTER — layout 2 ───────────────────────────────────────
   Graham, 2026-09-13, after Ring O: "not professional enough, not a sophisticated
   look — rethink please". He chose layout 2 of three: the logo small on the left
   (a thin ring beside ICONKIND in a fine, spaced stroke), a Menu button on the
   right. The Menu is a native <details> (objects/nav.icon.primary.json, written by
   tools/build-iconkind-nav.mjs from data/nav.json) — the browser opens and closes
   it, so there is no script. The footer lists the same four groups.
   Appended last so these win over the earlier header and footer rules. */
.ik-header { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: nowrap;
             align-items: center; justify-content: space-between; gap: 1rem;
             padding: .8rem clamp(1rem, 4vw, 2.5rem); background: var(--ik-cream, #fef6e8);
             border-bottom: 1px solid var(--ik-rule, rgba(42,36,24,.10)); backdrop-filter: none; }
/* The logo image's height covers its WHOLE drawing, so it scales with the drawing's
   height to keep the capitals one size (1.4rem / 1.25rem per 128 units). The site's
   logo is drawn in 160 units — Q, the navy sun and name — and
   tools/build-logo-page.mjs stops if the marker below disagrees with it.
   logo viewBox height: 160 */
.ik-logo, .ik-logo img { display: block; height: 1.75rem; width: auto; }
@media (max-width: 46rem) {
  .ik-header { justify-content: space-between; padding-block: .7rem; }
  .ik-logo, .ik-logo img { height: 1.56rem; }
}
/* THE WOVEN HEADER — option Q on /logo. Graham, 2026-09-13: "great, try Q, the woven
   version". The neck label's cloth brought to the site: a fine navy warp and weft over
   the cream, and a navy stitch just above the bottom edge — as /logo's phone sheet
   draws it (tools/build-logo-page.mjs, band "woven"). Mixed from --ik-navy (the
   palette's mark.navy), so it adds no loose colours. */
.ik-header {
  background-color: var(--ik-cream, #fef6e8);
  background-image:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--ik-navy, #2b3247) 3.5%, transparent) 0 .7px, transparent .7px 2px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--ik-navy, #2b3247) 3%, transparent) 0 .7px, transparent .7px 2px);
}
.ik-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; pointer-events: none;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--ik-navy, #2b3247) 50%, transparent) 0 5px, transparent 5px 8px);
}
/* THE MENU NEVER LEAVES THE SCREEN. Graham, 2026-09-13, on the woven header: "menu is
   off the screen partly". Measured in Chromium at 360 and 390 wide: the header fits as
   built, but not with the phone's text scaled up (130%) or a stylesheet cached from the
   taller tab logo — then the logo, fixed by height, pushed Menu up to 117px off the
   right edge. Now the Menu button never shrinks, and the logo gives way instead,
   scaling down whole (object-fit keeps the drawing's proportions). */
.ik-header > .ik-mark { flex: 0 1 auto; min-width: 0; }
.ik-header > .ik-mark > .ik-logo { min-width: 0; max-width: 100%; object-fit: contain; object-position: left center; }
.ik-header > .qx-html-content { flex: 0 0 auto; }

.ik-menu > summary { list-style: none; }
.ik-menu > summary::-webkit-details-marker { display: none; }
.ik-menu-button { display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; padding: 0 .15rem;
                  cursor: pointer; user-select: none; color: var(--ik-ink, #2a2418);
                  font-size: .95rem; font-weight: 500; letter-spacing: .01em; }
.ik-menu-button:focus-visible { outline: 2px solid var(--ik-coral-deep, #b85432); outline-offset: 3px; border-radius: 4px; }
.ik-menu-icon { position: relative; display: block; width: 1.15rem; height: .55rem;
                border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }
.ik-menu[open] .ik-menu-icon { border-color: transparent; }
.ik-menu[open] .ik-menu-icon::before, .ik-menu[open] .ik-menu-icon::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px solid currentColor; }
.ik-menu[open] .ik-menu-icon::before { transform: rotate(45deg); }
.ik-menu[open] .ik-menu-icon::after  { transform: rotate(-45deg); }
.ik-menu-panel { position: absolute; left: 0; right: 0; top: 100%;
                 display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem 2rem;
                 padding: 1.75rem clamp(1rem, 4vw, 2.5rem) 2.25rem;
                 background: var(--ik-cream, #fef6e8); border-bottom: 1px solid var(--ik-rule, rgba(42,36,24,.10));
                 box-shadow: 0 22px 40px -28px rgba(42, 36, 24, .45); }
@media (max-width: 46rem) {
  .ik-menu-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1.25rem;
                   max-height: calc(100vh - 4rem); overflow-y: auto; }
}
.ik-menu-h, .ik-foot-h { margin: 0 0 .5rem; font-size: .7rem; font-weight: 600; letter-spacing: .14em;
                         text-transform: uppercase; color: var(--ik-ink-muted, #9a8c70); }
.ik-menu-link { display: block; padding: .5rem 0; font-size: 1rem; line-height: 1.3;
                color: var(--ik-ink, #2a2418); text-decoration: none; }
.ik-menu-link:hover, .ik-foot-link:hover { color: var(--ik-coral-deep, #b85432); }

.ik-footer { background: var(--ik-cream-deep, #fde8c8); border-top: 1px solid var(--ik-rule, rgba(42,36,24,.10)); }
.ik-footer-inner { grid-template-columns: 1fr; justify-items: start; text-align: left; gap: 1.75rem; }
.ik-footer-mark, .ik-footer .ik-footnote, .ik-footer-rule { grid-column: 1; justify-self: stretch; }
.ik-footer-logo, .ik-footer-logo img { height: 1.3rem; width: auto; justify-self: start; }
.ik-foot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem 2rem; width: 100%; }
@media (max-width: 46rem) {
  .ik-footer-inner { justify-items: start; text-align: left; }
  .ik-foot { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1.25rem; }
}
.ik-foot-link { display: block; padding: .3rem 0; font-size: .9rem; color: var(--ik-ink-soft, #6b5c44); text-decoration: none; }
.ik-footer-rule { width: 100%; height: 1px; margin: 0; background: var(--ik-rule, rgba(42,36,24,.12)); }
.ik-footer .ik-footnote { color: var(--ik-ink-muted, #9a8c70); font-size: .75rem; letter-spacing: .02em; }

/* THE NAVY CANVAS FOOTER. Graham, 2026-09-13: "reimagine the footer like the natural fabric
   feel, which could be a brand marker". Of three concepts drawn on the live page at phone
   width he chose navy (the selvedge), asked for "material texture", and left the texture to
   us: canvas. The page ends in navy cloth — a fine basket weave with fibre grain
   (assets/textures/canvas-grain-*.svg) — edged top and bottom like selvedge: a paper-cream
   edge and an identity thread in the six brand dot colours for a dark ground
   (brand/logo.json colours.dotsOnDark: sage-soft, signal-blue, violet, amber, gold-deep,
   rose). The logo is the cream reverse lockup (data/nav.json logoReverse). */
.ik-footer {
  position: relative; border-top: 0; color: var(--ik-cream, #fef6e8);
  padding-block: calc(var(--sp-band) + 15px) calc(var(--sp-band) * .6 + 15px);
  background-color: var(--ik-navy, #2b3247);
  background-image:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--ik-cream, #fef6e8) 8.5%, transparent) 0 1.2px, transparent 1.2px 3.4px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--ik-ink, #2a2418) 30%, transparent) 0 1.2px, transparent 1.2px 3.4px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--ik-cream, #fef6e8) 4%, transparent) 0 1px, transparent 1px 6.8px),
    url("/assets/textures/canvas-grain-dark.svg"),
    url("/assets/textures/canvas-grain-light.svg");
}
.ik-footer::before, .ik-footer::after {
  content: ""; position: absolute; left: 0; right: 0; height: 15px; pointer-events: none;
  --ik-selvedge: repeating-linear-gradient(90deg,
    #cdd9c4 0 20px, transparent 20px 26px, #5b86bd 26px 46px, transparent 46px 52px,
    #7b62c4 52px 72px, transparent 72px 78px, #dda94e 78px 98px, transparent 98px 104px,
    #c8971f 104px 124px, transparent 124px 130px, #d98c86 130px 150px, transparent 150px 156px);
}
.ik-footer::before { top: 0;
  background: linear-gradient(#f7f0de, #f7f0de) 0 0 / 100% 3px no-repeat, var(--ik-selvedge) 0 7px / 100% 3px no-repeat; }
.ik-footer::after { bottom: 0;
  background: var(--ik-selvedge) 0 5px / 100% 3px no-repeat, linear-gradient(#f7f0de, #f7f0de) 0 12px / 100% 3px no-repeat; }
.ik-footer-logo, .ik-footer-logo img { height: 1.6rem; }
.ik-foot-h { color: #f7e6b0; }
.ik-foot-link { color: color-mix(in srgb, var(--ik-cream, #fef6e8) 92%, transparent); }
.ik-foot-link:hover { color: #f7e6b0; }
.ik-footer-rule { height: 0; background: none;
  border-top: 1px dashed color-mix(in srgb, var(--ik-cream, #fef6e8) 28%, transparent); }
.ik-footer .ik-footnote { color: color-mix(in srgb, var(--ik-cream, #fef6e8) 62%, transparent); }
/* the groups span the footer: the inner grid starts its items (justify-items: start), so the
   html-content wrapper shrank to its widest link and the two columns crowded into the left
   half — seen in a Chromium render of this footer at 390px */
.ik-footer-inner > .qx-html-content { justify-self: stretch; width: 100%; }