/* Stratum — masthead.
   The strip, the seven stages and the navigation styles. Transforms live in
   depth.css; this sheet only lays the pieces out, so Flat mode gets a complete
   masthead with no transform code loaded at all. */

.stx-mast {
  position: relative;
  z-index: 50;
  background: var(--stx-substrate);
  border-bottom: 1px solid var(--stx-hairline);
}

.stx-mast--h-compact { --stx-stage-h: 3.9rem; }
.stx-mast--h-stage   { --stx-stage-h: clamp(4.6rem, 7vw, 6.4rem); }
.stx-mast--h-full    { --stx-stage-h: clamp(11rem, 46vh, 22rem); }

/* Condensed state, written by theme.js once the stage scrolls out of view. */
.stx-mast.is-stuck {
  position: fixed;
  inset: 0 0 auto 0;
  --stx-stage-h: 3.8rem;
  background: color-mix(in srgb, var(--stx-substrate) 88%, transparent);
  backdrop-filter: blur(16px);
  box-shadow: var(--stx-elev-2);
}

.stx-mast.is-stuck .stx-strip,
.stx-mast.is-stuck .stx-brand__tag,
.stx-mast.is-stuck .stx-stage__now,
.stx-mast.is-stuck .stx-bands,
.stx-mast.is-stuck .stx-plane-bg,
.stx-mast.is-stuck .stx-deck__card,
.stx-mast.is-stuck .stx-orbit__list,
.stx-mast.is-stuck .stx-orbit__ring,
.stx-mast.is-stuck .stx-prism { display: none; }

.stx-mast.is-stuck .stx-stage__inner { padding-block: 0; min-height: var(--stx-stage-h); }
.stx-mast.is-stuck .stx-brand__word { font-size: var(--stx-fs-lg); }
.stx-mast.is-stuck .stx-stage,
.stx-mast.is-stuck .stx-deck,
.stx-mast.is-stuck .stx-orbit { display: block; }

.stx-mast.is-stuck .stx-stage__inner,
.stx-mast.is-stuck .stx-deck__front,
.stx-mast.is-stuck .stx-holo__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* -------------------------------------------------------------------- strip */

.stx-strip {
  border-bottom: 1px solid var(--stx-hairline);
  color: var(--stx-fg-dim);
  background: color-mix(in srgb, var(--stx-plane1) 55%, transparent);
}

.stx-strip__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 2.3rem;
}

.stx-strip__left,
.stx-strip__right { display: flex; align-items: center; gap: 1rem; }
.stx-strip__right { margin-inline-start: auto; }

.stx-strip__slot:empty { display: none; }

.stx-strip__menu,
.stx-strip__social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1rem;
}

.stx-strip a { text-decoration: none; color: inherit; }
.stx-strip a:hover { color: var(--stx-z1); }

.stx-strip__scheme {
  width: 1.7rem;
  height: 1.7rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--stx-hairline);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

.stx-strip__schemeglyph {
  width: .7rem;
  height: .7rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--stx-fg) 50%, transparent 50%);
  border: 1px solid var(--stx-fg-mid);
}

@media (max-width: 46rem) {
  .stx-strip__menu,
  .stx-strip__text { display: none; }
}

/* -------------------------------------------------------------------- stage */

.stx-stage { position: relative; }

/* Stacking order inside the masthead.
   The stage sets `perspective`, which makes it a stacking context — so a
   dropdown inside it could never rise above the ticker, no matter what z-index
   it was given. It painted underneath instead. Ordering the masthead's own
   children fixes it at the level where the contexts actually are. */
.stx-strip { position: relative; z-index: 6; }
.stx-stage { z-index: 5; }
.stx-searchdrawer { position: relative; z-index: 4; }
.stx-ticker { position: relative; z-index: 1; }

.stx-stage__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 2.5rem);
  min-height: var(--stx-stage-h);
  padding-block: var(--stx-head-pad, 14px);
}

.stx-stage__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}

.stx-stage__controls {
  display: flex;
  align-items: center;
  gap: clamp(.8rem, 2vw, 1.6rem);
  /* Topmost inside the stage. Everything else in the masthead is decoration;
     this is the part people need to hit. */
  position: relative;
  z-index: 3;
}

.stx-nav,
.stx-actions { position: relative; z-index: 3; }

/* Decoration must never take a click, whatever else changes around it. */
.stx-plane-bg,
.stx-plane-bg *,
.stx-bands,
.stx-bands *,
.stx-holo__field,
.stx-holo__edge,
.stx-holo__sweep { pointer-events: none; }

.stx-nav__list a,
.stx-actions button,
.stx-actions a { pointer-events: auto; }

/* -------------------------------------------------------------------- brand */

.stx-brand { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }

.stx-brand__link { text-decoration: none; display: inline-block; }

.stx-brand__logo img,
.stx-brand__logo .custom-logo { height: var(--stx-logo-h); width: auto; }

.stx-brand__word {
  display: inline-block;
  font-family: var(--stx-font-display);
  font-weight: var(--stx-weight-display);
  font-size: clamp(var(--stx-fs-lg), 3.4vw, var(--stx-fs-2xl));
  letter-spacing: var(--stx-track-display);
  line-height: .92;
  color: var(--stx-fg);
}

.stx-brand__tag {
  margin: 0;
  font-family: var(--stx-font-utility);
  font-size: var(--stx-fs-xs);
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--stx-fg-dim);
}

/* The extruded wordmark. Six stacked shadows read as one solid side face, and
   each step darkens toward the substrate so the block has a light direction
   instead of looking like a drop shadow. */
.stx-brand--extrude .stx-brand__word {
  text-shadow:
    calc(var(--stx-extrude) * .16) calc(var(--stx-extrude) * .16) 0 color-mix(in srgb, var(--stx-plane3) 92%, var(--stx-fg)),
    calc(var(--stx-extrude) * .33) calc(var(--stx-extrude) * .33) 0 var(--stx-plane3),
    calc(var(--stx-extrude) * .50) calc(var(--stx-extrude) * .50) 0 color-mix(in srgb, var(--stx-plane3) 70%, var(--stx-substrate)),
    calc(var(--stx-extrude) * .66) calc(var(--stx-extrude) * .66) 0 color-mix(in srgb, var(--stx-plane2) 60%, var(--stx-substrate)),
    calc(var(--stx-extrude) * .83) calc(var(--stx-extrude) * .83) 0 color-mix(in srgb, var(--stx-plane1) 40%, var(--stx-substrate)),
    var(--stx-extrude) var(--stx-extrude) 0 var(--stx-substrate),
    calc(var(--stx-extrude) * 1.2) calc(var(--stx-extrude) * 1.2) calc(var(--stx-extrude) * 1.6) color-mix(in srgb, var(--stx-z5) 30%, transparent);
}

/* ---------------------------------------------------------------- backplate */

.stx-plane-bg { position: absolute; inset: 0; overflow: clip; pointer-events: none; }

.stx-plane-bg__grid {
  position: absolute;
  inset: -20%;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--stx-rim) 40%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--stx-rim) 40%, transparent) 1px, transparent 1px);
  background-size: 68px 68px;
  opacity: .5;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
}

.stx-plane-bg__sweep {
  position: absolute;
  inset: -40% -10%;
  background: radial-gradient(38rem 22rem at var(--stx-px) var(--stx-py),
    color-mix(in srgb, var(--stx-z3) 26%, transparent), transparent 62%);
  opacity: .85;
}

/* ------------------------------------------------------------ stage: strata */

.stx-stage--strata .stx-stage__inner { flex-direction: column; align-items: stretch; gap: .6rem; }

.stx-bands { position: absolute; inset: 0; overflow: clip; pointer-events: none; }

.stx-bands__band {
  position: absolute;
  left: -5%;
  right: -5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--stx-rim), transparent);
}

.stx-bands__band[data-plane="5"] { top: 22%; }
.stx-bands__band[data-plane="4"] { top: 52%; }
.stx-bands__band[data-plane="3"] { top: 79%; }

.stx-stage__now {
  margin: 0;
  display: flex;
  gap: .7rem;
  align-items: baseline;
  font-family: var(--stx-font-utility);
  font-size: var(--stx-fs-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.stx-stage__nowlabel { color: var(--stx-z1); }
.stx-stage__now a { color: var(--stx-fg-mid); text-decoration: none; }
.stx-stage__now a:hover { color: var(--stx-fg); }

/* ------------------------------------------------------------- stage: prism */

.stx-prism {
  width: clamp(9rem, 22vw, 15rem);
  height: 3.2rem;
  perspective: 700px;
  flex: 0 0 auto;
}

.stx-prism__body {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: translateZ(-1.6rem) rotateX(var(--stx-prism-r, 0deg));
  transition: transform .8s cubic-bezier(.6, .05, .2, 1);
}

.stx-prism__face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-inline: .6rem;
  text-align: center;
  border: 1px solid var(--stx-hairline);
  border-radius: var(--stx-radius-sm);
  background: var(--stx-plane2);
  font-family: var(--stx-font-utility);
  font-size: var(--stx-fs-xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--stx-fg-mid);
  backface-visibility: hidden;
}

.stx-prism__face--a { transform: rotateX(0deg) translateZ(1.6rem); }
.stx-prism__face--b { transform: rotateX(-120deg) translateZ(1.6rem); color: var(--stx-z3); }
.stx-prism__face--c { transform: rotateX(-240deg) translateZ(1.6rem); color: var(--stx-z5); }

@media (max-width: 60rem) { .stx-prism { display: none; } }

/* -------------------------------------------------------------- stage: holo */

.stx-stage--holo .stx-stage__inner { padding-block: calc(var(--stx-head-pad, 14px) + 4px); }

.stx-holo__field {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 100% at 12% 0%, color-mix(in srgb, var(--stx-z1) 20%, transparent), transparent 70%),
    radial-gradient(60% 100% at 88% 100%, color-mix(in srgb, var(--stx-z5) 22%, transparent), transparent 70%);
  pointer-events: none;
}

.stx-holo {
  position: relative;
  width: 100%;
  border-radius: var(--stx-radius);
  padding: clamp(.8rem, 1.8vw, 1.3rem) clamp(1rem, 2.2vw, 1.6rem);
  background: color-mix(in srgb, var(--stx-plane1) 72%, transparent);
  border: 1px solid var(--stx-rim);
  backdrop-filter: blur(18px) saturate(1.2);
  overflow: clip;
}

.stx-holo__inner { display: flex; align-items: center; justify-content: space-between; gap: clamp(1rem, 3vw, 2.5rem); }

.stx-holo__edge {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  padding: 1px;
  background: linear-gradient(120deg, var(--stx-z1), transparent 35%, transparent 65%, var(--stx-z5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .8;
}

.stx-holo__sweep {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(22rem 14rem at var(--stx-px) var(--stx-py),
    color-mix(in srgb, var(--stx-fg) 12%, transparent), transparent 60%);
}

/* ------------------------------------------------------------- stage: orbit */

.stx-stage--orbit .stx-stage__inner { flex-direction: column; gap: 1rem; }

.stx-orbit {
  position: relative;
  width: 100%;
  min-height: clamp(8rem, 20vw, 13rem);
  display: grid;
  place-items: center;
}

.stx-orbit__ring {
  position: absolute;
  inset: 8% 12%;
  border: 1px solid var(--stx-rim);
  border-radius: 50%;
  transform: rotateX(68deg);
  opacity: .55;
}

.stx-orbit__core { position: relative; z-index: 2; text-align: center; }

.stx-orbit__list {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Each item is placed on the ellipse by index. The trigonometry is done in CSS
   so the ring works with any number of sections and needs no script. */
.stx-orbit__item {
  --stx-orbit-a: calc((var(--stx-orbit-i) / var(--stx-orbit-n)) * 360deg);
  position: absolute;
  left: 50%;
  top: 50%;
  transform:
    translate(-50%, -50%)
    translate(calc(cos(var(--stx-orbit-a)) * 38%), calc(sin(var(--stx-orbit-a)) * 15%));
}

.stx-orbit__link {
  display: inline-block;
  padding: .3rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--stx-hairline);
  background: var(--stx-plane2);
  font-family: var(--stx-font-utility);
  font-size: var(--stx-fs-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .3s ease, color .2s ease, border-color .2s ease;
}

.stx-orbit__link:hover,
.stx-orbit__link:focus-visible {
  color: var(--stx-z1);
  border-color: var(--stx-z1);
  transform: scale(1.08);
}

@media (max-width: 52rem) {
  .stx-orbit__list { position: static; display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin-top: 1rem; }
  .stx-orbit__item { position: static; transform: none; }
  .stx-orbit__ring { display: none; }
}

/* -------------------------------------------------------------- stage: deck */

.stx-deck { position: relative; width: 100%; padding-block: clamp(.6rem, 1.6vw, 1.2rem); }

.stx-deck__card {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  align-items: baseline;
  gap: .7rem;
  padding: .5rem .9rem;
  border-radius: var(--stx-radius-sm);
  border: 1px solid var(--stx-hairline);
  background: var(--stx-plane2);
  text-decoration: none;
  font-family: var(--stx-font-utility);
  font-size: var(--stx-fs-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--stx-fg-dim);
  opacity: 0;
  transform: translateY(calc(var(--stx-deck-i) * 4px));
  transition: opacity .3s ease, transform .35s cubic-bezier(.2,.7,.3,1);
  pointer-events: none;
}

.stx-deck:hover .stx-deck__card,
.stx-deck:focus-within .stx-deck__card {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(calc((var(--stx-deck-i) + 1) * 2.35rem));
}

.stx-deck__kicker { color: var(--stx-z5); }
.stx-deck__title { color: var(--stx-fg-mid); }
.stx-deck__card:hover .stx-deck__title { color: var(--stx-fg); }

.stx-deck__front {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(.6rem, 1.4vw, 1rem) 0;
  background: var(--stx-substrate);
}

@media (max-width: 52rem) { .stx-deck__card { display: none; } }

/* --------------------------------------------------------------- stage: flat */

.stx-stage--flat .stx-stage__inner { min-height: 3.6rem; }

/* ------------------------------------------------------------------ nav */

.stx-nav { min-width: 0; }

.stx-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: .2rem;
  flex-wrap: wrap;
}

.stx-nav__list a {
  position: relative;
  display: inline-block;
  padding: .45rem .7rem;
  font-family: var(--stx-font-utility);
  font-size: var(--stx-fs-xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  text-decoration: none;
  color: var(--stx-fg-mid);
  border-radius: var(--stx-radius-sm);
  transition: color .18s ease, background-color .18s ease, transform .18s ease;
}

.stx-nav__list a:hover,
.stx-nav__list .current-menu-item > a { color: var(--stx-fg); }

/* Navigation styles. Each is a single rule set on the body, so switching one
   off can never leave residue from another. */
.stx-nav-plate .stx-nav__list a { background: color-mix(in srgb, var(--stx-plane2) 60%, transparent); border: 1px solid transparent; }
.stx-nav-plate .stx-nav__list a:hover { border-color: var(--stx-rim); background: var(--stx-plane1); }

.stx-nav-rule .stx-nav__list a::after {
  content: "";
  position: absolute;
  left: .7rem;
  right: .7rem;
  bottom: .2rem;
  height: 1px;
  background: var(--stx-z1);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}

.stx-nav-rule .stx-nav__list a:hover::after,
.stx-nav-rule .stx-nav__list .current-menu-item > a::after { transform: scaleX(1); }

.stx-nav-carve .stx-nav__list a {
  background: var(--stx-substrate);
  box-shadow: inset 1px 1px 2px color-mix(in srgb, #000 45%, transparent),
              inset -1px -1px 1px color-mix(in srgb, var(--stx-rim) 35%, transparent);
}

.stx-nav-pillbox .stx-nav__list {
  padding: .2rem;
  border-radius: 999px;
  border: 1px solid var(--stx-hairline);
  background: color-mix(in srgb, var(--stx-plane2) 70%, transparent);
  gap: 0;
}

.stx-nav-pillbox .stx-nav__list a { border-radius: 999px; }
.stx-nav-pillbox .stx-nav__list a:hover { background: var(--stx-plane1); }

/* Sub-menus. */
.stx-nav__list li { position: relative; }

/* The open item rises above its siblings. Without this the panel can be
   overlapped by later menu items, which each sit in the same stacking context
   as it does. */
.stx-nav__list li.is-open,
.stx-nav__list li:hover { z-index: 70; }

/* Nothing between the masthead and the panel may clip. Any one of these
   picking up an overflow value would cut the panel off at the masthead edge,
   which looks exactly like a menu that refuses to open. */
.stx-mast,
.stx-stage,
.stx-stage__inner,
.stx-stage__row,
.stx-stage__controls,
.stx-nav,
.stx-nav__list { overflow: visible; }

.stx-nav__list .sub-menu {
  position: absolute;
  left: 0;
  top: calc(100% + .4rem);
  z-index: 60;
  min-width: 12rem;
  list-style: none;
  margin: 0;
  padding: .4rem;
  border-radius: var(--stx-radius-sm);
  border: 1px solid var(--stx-rim);
  background: var(--stx-plane1);
  box-shadow: var(--stx-elev-3);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  /* Keep the panel out of the parent's 3D space; inside preserve-3d it was
     being projected by the stage perspective and landing off-target. */
  transform-style: flat;
}

/* The gap between the link and the panel is not covered by either of them, so
   the pointer crossing it used to close the menu before reaching the items. */
.stx-nav__list .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -.6rem;
  height: .6rem;
}

.stx-nav__list .sub-menu a {
  padding: .45rem .6rem;
  white-space: nowrap;
  transform: none;
}

/* theme.js adds .is-open. The :hover rule further down is the fallback for
   when the script has not run. */
.stx-nav__list li.is-open > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.stx-nav__list .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: .3em;
  height: .3em;
  margin-left: .45em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-.15em) rotate(45deg);
  opacity: .6;
}

.stx-nav__list li:hover > .sub-menu,
.stx-nav__list li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }

@media (max-width: 59.99rem) {
  .stx-nav { display: none; }
}

/* -------------------------------------------------------------- actions */

.stx-actions { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }

@media (max-width: 46rem) { .stx-actions__cta { display: none; } }

/* ------------------------------------------------------------ search drawer */

.stx-searchdrawer {
  border-top: 1px solid var(--stx-hairline);
  background: var(--stx-plane1);
  padding-block: 1rem;
}

.stx-searchdrawer__hint {
  margin: .5rem 0 0;
  font-family: var(--stx-font-utility);
  font-size: var(--stx-fs-xs);
  color: var(--stx-fg-dim);
}

/* ------------------------------------------------------------------ drawer */

.stx-drawer { position: fixed; inset: 0; z-index: 90; }

.stx-drawer__scrim {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: color-mix(in srgb, var(--stx-substrate) 72%, transparent);
  backdrop-filter: blur(3px);
}

.stx-drawer__panel {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(22rem, 88vw);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.1rem;
  background: var(--stx-plane1);
  border-left: 1px solid var(--stx-rim);
  box-shadow: var(--stx-elev-3);
  overflow-y: auto;
  animation: stx-drawer-in .28s cubic-bezier(.2,.7,.3,1);
}

@keyframes stx-drawer-in {
  from { transform: translateX(12%); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.stx-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.stx-drawer__brand {
  font-family: var(--stx-font-display);
  font-weight: var(--stx-weight-display);
  font-size: var(--stx-fs-lg);
  letter-spacing: var(--stx-track-display);
}

.stx-drawer__list,
.stx-drawer__list .sub-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.stx-drawer__list a {
  display: block;
  padding: .65rem 0;
  border-bottom: 1px solid var(--stx-hairline);
  text-decoration: none;
  font-family: var(--stx-font-display);
  font-weight: 600;
  font-size: var(--stx-fs-lg);
}

.stx-drawer__list .sub-menu a { padding-left: 1rem; font-size: var(--stx-fs-sm); color: var(--stx-fg-mid); font-family: var(--stx-font-utility); text-transform: uppercase; letter-spacing: .08em; }

.stx-drawer__foot { margin-top: auto; }

/* ------------------------------------------------------- stage refinements */

.stx-slab { min-width: 0; }

.stx-stage__row--nav { justify-content: flex-start; }

.stx-stage--slab .stx-stage__inner { align-items: flex-end; }

.stx-stage--deck .stx-stage__inner { flex-direction: column; align-items: stretch; gap: .4rem; }

@media (max-width: 60rem) {
  .stx-stage--slab .stx-stage__inner,
  .stx-stage--strata .stx-stage__inner,
  .stx-stage--deck .stx-stage__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .stx-stage__row--nav { display: none; }
}

.stx-mast__spacer { display: block; }


/* ------------------------------------------------------------------ ticker */
/* One track, duplicated at runtime for a seamless loop. The duplicate is
   aria-hidden, so each headline is announced once. */

.stx-ticker {
  border-block: 1px solid var(--stx-hairline);
  background: color-mix(in srgb, var(--stx-plane2) 78%, transparent);
  overflow: hidden;
}

.stx-ticker__inner {
  display: flex;
  align-items: center;
  gap: .8rem;
  min-height: 2.4rem;
}

.stx-ticker__label {
  flex: 0 0 auto;
  padding: .18rem .55rem;
  border-radius: 3px;
  background: var(--stx-z1);
  color: var(--stx-substrate);
  font-family: var(--stx-font-utility);
  font-size: var(--stx-fs-xs);
  text-transform: uppercase;
  letter-spacing: .12em;
}

/* The viewport clips; the track moves. Masking the ends stops headlines from
   appearing to be cut off mid-word at the edges. */
.stx-ticker__viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
}

.stx-ticker__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 2rem;
  width: max-content;
  animation: stx-ticker-run var(--stx-ticker-speed, 45s) linear infinite;
}

/* The animation only runs once the track has been duplicated, so a failed
   script leaves a static, horizontally scrollable strip rather than a jump. */
.stx-ticker__track:not(.is-looping) { animation: none; }
.stx-ticker__viewport:not(:has(.is-looping)) { overflow-x: auto; scrollbar-width: none; }

@keyframes stx-ticker-run {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

.stx-ticker:hover .stx-ticker__track,
.stx-ticker:focus-within .stx-ticker__track,
.stx-ticker.is-paused .stx-ticker__track { animation-play-state: paused; }

.stx-ticker__item {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  white-space: nowrap;
}

.stx-ticker__item + .stx-ticker__item::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: var(--stx-z5);
  margin-right: .5rem;
  align-self: center;
}

.stx-ticker__kicker {
  font-family: var(--stx-font-utility);
  font-size: calc(var(--stx-fs-xs) * .92);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--stx-z5);
}

.stx-ticker__link {
  font-family: var(--stx-font-utility);
  font-size: var(--stx-fs-xs);
  color: var(--stx-fg-mid);
  text-decoration: none;
}

.stx-ticker__link:hover { color: var(--stx-fg); }

.stx-ticker__pause {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--stx-hairline);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
}

.stx-ticker__pauseglyph {
  width: 7px;
  height: 8px;
  border-left: 2px solid var(--stx-fg-mid);
  border-right: 2px solid var(--stx-fg-mid);
}

.stx-ticker.is-paused .stx-ticker__pauseglyph {
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-left: 8px solid var(--stx-fg-mid);
  border-right: 0;
}

.stx-mast.is-stuck .stx-ticker { display: none; }

@media (max-width: 46rem) {
  .stx-ticker__pause { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .stx-ticker__track { animation: none !important; width: auto; }
  .stx-ticker__viewport { overflow-x: auto; }
}