/* ============================================================
   Chrome arrangements and accent skins.

   Six places the brand furniture can sit, eight ways the accent can be
   expressed. A carousel picks one of each in its own <style> block, so two
   decks built from the same layout family still read as different objects.
   ============================================================ */

.ch { position: relative; z-index: 4; flex: 0 0 auto; }

/* Default: logo top left, counter top right. */
.ch-top { margin-bottom: 8px; }

/* A full-bleed accent band holding the lockup. */
.ch-band {
  margin: -88px -88px 44px; padding: 34px 88px;
  background: var(--accent); color: var(--on-accent);
}
.ch-band .corner { color: var(--on-accent); opacity: 0.85; }
.ch-band .brand-logo-dark { display: none; }
.ch-band .brand-logo-light { display: block; }

/* Logo only up top; the counter becomes an oversized numeral at the foot. */
.ch-split { margin-bottom: 8px; }
.big-count {
  font-size: 92px; font-weight: 500; line-height: 0.8;
  letter-spacing: -0.05em; color: var(--accent);
}

/* Counter alone, top left; the logo moves to the footer. */
.ch-corner { margin-bottom: 20px; }

/* A vertical rail down the leading edge, counter rotated into it. */
.ch-rail {
  position: absolute; inset-block: 0; inset-inline-start: 0; width: 78px;
  border-inline-end: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.rail-count {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 20px; font-weight: 500; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-3);
}
/* Everything else clears the rail. */
.s.has-rail { padding-inline-start: 150px; }

.ch-foot-full { justify-content: space-between; }

/* ── Accent skins ── */
.kicker.k-plain   { }
.kicker.k-block   { background: var(--accent); color: var(--on-accent); padding: 12px 20px; align-self: flex-start; }
.kicker.k-outline { border: 1px solid var(--accent); color: var(--accent-text); padding: 11px 20px; align-self: flex-start; border-radius: var(--wx8-r-pill); }
.kicker.k-tint    { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-text); padding: 12px 20px; align-self: flex-start; }
.kicker.k-under   { padding-bottom: 12px; border-bottom: 3px solid var(--accent); align-self: flex-start; }
.kicker.k-slash   { display: flex; align-items: center; gap: 12px; }
.kicker.k-slash .mk { color: var(--accent); font-weight: 500; }
.kicker.k-dot     { display: flex; align-items: center; gap: 14px; }
.kicker.k-dot .mk { width: 12px; height: 12px; border-radius: var(--radius-circle); background: var(--accent); flex: 0 0 auto; }
.kicker.k-bar     { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.kicker.k-bar .mk { width: 72px; height: 5px; background: var(--accent); }

/* A block kicker on the orange ground needs to invert or it disappears. */
.s--orange .kicker.k-block { background: #fff; color: var(--wx8-orange-hot); }
.s--orange .kicker.k-tint  { background: rgba(255,255,255,0.18); color: #fff; }