/* ==========================================================================
   Aurelia Textile — Interaction Effects
   (border-trace, button glow, nav mega-menu, mobile glass sidebar,
   cursor spotlight, hero pinned reveal)
   ========================================================================== */

@property --trace-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@property --glow-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* ---- Border trace ("marching ants" animated gradient border) --------------- */
.border-trace {
  position: relative;
  isolation: isolate;
}

.border-trace::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--trace-angle),
    transparent 0deg,
    var(--trace-c1, var(--color-lime-500)) 8deg,
    var(--trace-c2, var(--color-purple-400)) 22deg,
    transparent 46deg,
    transparent 314deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-med) ease;
  animation: trace-spin 2.4s linear infinite;
  animation-play-state: paused;
}

.border-trace:hover::before,
.border-trace.is-traced::before {
  opacity: 1;
  animation-play-state: running;
}

.border-trace--inverse::before {
  --trace-c1: var(--color-lime-500);
  --trace-c2: var(--color-cream);
}

@keyframes trace-spin {
  to { --trace-angle: 360deg; }
}

/* ---- Cursor spotlight (radial glow following the pointer) ------------------ */
.spotlight {
  position: relative;
  isolation: isolate;
}

.spotlight::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background: radial-gradient(circle 220px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.22), transparent 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) ease;
  mix-blend-mode: overlay;
}

.spotlight:hover::after {
  opacity: 1;
}

.spotlight--inverse::after {
  background: radial-gradient(circle 220px at var(--mx, 50%) var(--my, 50%), rgba(214, 237, 74, 0.28), transparent 70%);
}

/* ---- Custom drag cursor (specimens / vault) --------------------------------- */
.drag-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-aubergine-900);
  color: var(--color-cream-text);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Space Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
  transition: opacity var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
  pointer-events: none;
  will-change: transform, opacity;
}

.drag-cursor.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.drag-cursor.is-grabbing {
  transform: translate(-50%, -50%) scale(0.85);
}

@media (hover: none), (pointer: coarse) {
  .drag-cursor { display: none; }
}

/* ---- Premium rotating gradient border + glow -------------------------------
   Every button on the site wears the same ring: a conic gradient in the house
   palette whose start angle runs continuously 0deg -> 360deg.

   Two layers, both driven by the one animated angle so they stay in phase:
   - ::before is the crisp 2px border. Two masks composited with `exclude`
     punch out the middle, leaving only the padding ring painted.
   - ::after is the halo. Same gradient, blurred, and masked with a hole the
     full size of the button so the blur can only bleed outwards — that keeps
     it clear of the face and the label no matter which variant it is on.

   The gradient has to be written out in each pseudo-element rule rather than
   held in a shared custom property: a custom property declared on the button
   would have `var(--glow-angle)` substituted once, against the button's own
   static angle, and the pseudo would inherit that frozen value. */
.btn,
.btn--icon-circle,
.floaties__btn {
  --glow-width: 3px;
  --glow-spread: 16px;
  --glow-opacity: 0.9;
  position: relative;
  isolation: isolate;
}

.btn::before,
.btn::after,
.btn--icon-circle::before,
.btn--icon-circle::after,
.floaties__btn::before,
.floaties__btn::after {
  content: '';
  position: absolute;
  border-radius: inherit;
  background: conic-gradient(
    from var(--glow-angle),
    var(--color-purple-600),
    var(--color-purple-300),
    var(--color-lime-500),
    var(--color-terracotta-500),
    var(--color-purple-600)
  );
  pointer-events: none;
  animation: glow-spin 4s linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

/* The border itself, sitting just proud of the button edge. */
.btn::before,
.btn--icon-circle::before,
.floaties__btn::before {
  inset: calc(var(--glow-width) * -1);
  padding: var(--glow-width);
  z-index: 2;
}

/* The halo. `filter` runs before `mask`, so the blur is clipped back to the
   ring and never washes over the button face. */
.btn::after,
.btn--icon-circle::after,
.floaties__btn::after {
  inset: calc(var(--glow-spread) * -1);
  padding: var(--glow-spread);
  z-index: -1;
  filter: blur(9px) saturate(1.5);
  opacity: var(--glow-opacity);
  transition: opacity var(--dur-med) ease;
}

.btn:hover::after,
.btn--icon-circle:hover::after,
.floaties__btn:hover::after {
  opacity: 1;
}

/* Variant tuning ----------------------------------------------------------- */

/* Round buttons carry a wider ring so the curve reads. */
.btn--icon-circle,
.floaties__btn {
  --glow-width: 3px;
  --glow-spread: 18px;
}

@keyframes glow-spin {
  to { --glow-angle: 360deg; }
}

/* ============================================================================
   Nav mega-menu (desktop)
   ============================================================================ */
.nav__item {
  position: relative;
}

.nav__dropdown {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px) scale(0.98);
  min-width: 300px;
  background: var(--color-aubergine-900);
  border-radius: var(--radius-card-sm);
  padding: var(--space-5);
  box-shadow: 0 30px 60px rgba(43, 27, 58, 0.4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out), visibility 0.22s;
  z-index: 50;
}

.nav__dropdown::before {
  content: '';
  position: absolute;
  inset: -30%;
  z-index: -1;
  background: radial-gradient(circle at 50% 0%, rgba(214, 237, 74, 0.28), transparent 65%);
  filter: blur(20px);
}

.nav__item.is-open .nav__dropdown,
.nav__item:hover .nav__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}

.nav__dropdown-col + .nav__dropdown-col {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--divider-inverse);
}

.nav__dropdown-heading {
  display: block;
  font-family: 'Space Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-lime-600);
  margin-bottom: var(--space-3);
}

.nav__dropdown-link {
  display: block;
  padding: var(--space-2) 0;
  border-radius: 8px;
  transition: transform var(--dur-fast) var(--ease-out);
}

.nav__dropdown-link:hover {
  transform: translateX(3px);
}

.nav__dropdown-link strong {
  display: block;
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-cream-text);
}

.nav__dropdown-link small {
  display: block;
  font-size: 0.75rem;
  color: var(--text-body-muted-inverse);
  margin-top: 2px;
}

@media (max-width: 768px) {
  .nav__dropdown { display: none; }
}

/* ============================================================================
   Side rail — transparent glass navigation (persistent on desktop,
   drawer on mobile)
   ============================================================================ */
body.siderail-locked {
  overflow: hidden;
}

.siderail {
  position: fixed;
  left: var(--rail-gap);
  /* Sits below the floating pill nav so the two never overlap when the
     rail peeks open. */
  top: calc(var(--rail-gap) + 68px);
  bottom: var(--rail-gap);
  width: var(--rail-w);
  z-index: 120;
}

.siderail__backdrop {
  display: none;
}

.siderail__panel {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--rail-w);
  display: flex;
  flex-direction: column;
  background: rgba(70, 48, 90, 0.62);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border: 1px solid rgba(232, 180, 155, 0.22);
  border-radius: var(--radius-card);
  box-shadow: 0 24px 60px rgba(43, 27, 58, 0.34);
  overflow: hidden;
  transition: width 0.42s var(--ease-out), background 0.42s ease;
}

/* Peek open on hover, pin open with the burger. */
.siderail:hover .siderail__panel,
.siderail[data-state="open"] .siderail__panel {
  width: var(--rail-w-open);
  background: rgba(62, 42, 82, 0.9);
}

/* ---- Head ---------------------------------------------------------------- */
.siderail__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-3);
  border-bottom: 1px solid rgba(232, 180, 155, 0.2);
  min-height: 64px;
}

.siderail__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--color-cream-text);
}

.siderail__brand .nav__logo-mark {
  width: 22px;
  height: 22px;
}

.siderail__burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 26px;
  height: 26px;
  flex: none;
  padding: 0;
  border: none;
  background: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.siderail__burger span {
  display: block;
  height: 1.5px;
  width: 16px;
  border-radius: 2px;
  background: var(--color-cream-text);
  transition: transform 0.3s var(--ease-out), width 0.3s var(--ease-out);
}

.siderail:hover .siderail__burger,
.siderail[data-state="open"] .siderail__burger {
  opacity: 1;
}

.siderail[data-state="open"] .siderail__burger span:nth-child(2) {
  width: 10px;
}

/* ---- Rows ---------------------------------------------------------------- */
.siderail__nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-3) 0;
  scrollbar-width: none;
}

.siderail__nav::-webkit-scrollbar { display: none; }

.siderail__foot {
  padding: var(--space-3) 0 var(--space-4);
  border-top: 1px solid rgba(232, 180, 155, 0.2);
}

.siderail__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: calc(100% - 16px);
  margin-inline: 8px;
  padding: 0.62rem 0.55rem;
  border: none;
  background: none;
  border-radius: 10px;
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(240, 235, 216, 0.72);
  text-align: left;
  transition: background 0.25s ease, color 0.25s ease;
}

.siderail__row:hover {
  background: rgba(232, 180, 155, 0.24);
  color: var(--color-cream-text);
}

.siderail__row.is-current {
  background: rgba(232, 180, 155, 0.32);
  color: var(--color-cream-text);
}

.siderail__row.is-current::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: 0 3px 3px 0;
  background: var(--color-terracotta-500);
}

.siderail__icon {
  flex: none;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.siderail__icon svg {
  width: 19px;
  height: 19px;
}

.siderail__text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.28s ease, transform 0.28s var(--ease-out);
}

.siderail:hover .siderail__text,
.siderail[data-state="open"] .siderail__text {
  opacity: 1;
  transform: none;
}

.siderail__chev {
  flex: none;
  display: flex;
  width: 16px;
  height: 16px;
  opacity: 0;
  transition: opacity 0.28s ease, transform 0.3s var(--ease-out);
}

.siderail__chev svg { width: 16px; height: 16px; }

.siderail:hover .siderail__chev,
.siderail[data-state="open"] .siderail__chev {
  opacity: 0.75;
}

.siderail__row--branch[aria-expanded="true"] .siderail__chev {
  transform: rotate(180deg);
}

/* ---- Sub-items ----------------------------------------------------------- */
.siderail__sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease-out);
}

.siderail:not(:hover):not([data-state="open"]) .siderail__sub {
  max-height: 0 !important;
}

.siderail__subrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.44rem 0.55rem 0.44rem 1.65rem;
  margin-inline: 8px;
  border-radius: 8px;
  font-size: 0.78rem;
  color: rgba(240, 235, 216, 0.6);
  transition: background 0.25s ease, color 0.25s ease;
}

.siderail__subrow:hover {
  background: rgba(232, 180, 155, 0.2);
  color: var(--color-cream-text);
}

.siderail__subrow.is-current {
  color: var(--color-terracotta-300);
}

.siderail__dot {
  flex: none;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}

.siderail__subrow.is-current .siderail__dot {
  background: var(--color-terracotta-500);
  opacity: 1;
}

.siderail__subrow .siderail__text {
  text-transform: none;
  letter-spacing: 0;
}

/* ---- Mobile: the rail becomes a drawer ----------------------------------- */
@media (max-width: 1023px) {
  .siderail {
    inset: 0;
    width: auto;
    z-index: 300;
    visibility: hidden;
    pointer-events: none;
  }

  .siderail.is-open {
    visibility: visible;
    pointer-events: auto;
  }

  .siderail__backdrop {
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(28, 18, 32, 0.4);
    opacity: 0;
    transition: opacity var(--dur-med) ease;
  }

  .siderail.is-open .siderail__backdrop {
    opacity: 1;
  }

  .siderail__panel,
  .siderail:hover .siderail__panel,
  .siderail[data-state="open"] .siderail__panel {
    width: min(84%, 330px);
    border-radius: 0 var(--radius-card) var(--radius-card) 0;
    border-left: none;
    transform: translateX(-102%);
    transition: transform 0.45s var(--ease-out);
    background: rgba(62, 42, 82, 0.94);
  }

  .siderail.is-open .siderail__panel {
    transform: none;
  }

  .siderail__text,
  .siderail__chev {
    opacity: 1 !important;
    transform: none !important;
  }

  .siderail__burger {
    opacity: 1;
  }
}

/* ============================================================================
   Hero — full-bleed background stage for the six pinned reveals
   ============================================================================ */
.hero-bg,
.hero-fluid {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* The opening background is painted here rather than by JS, so it is on
   screen the moment the page renders — before the module runs, and even
   with JS, GSAP or WebGL unavailable. The scroll-revealed panes stack on
   top of it. */
.hero-bg {
  z-index: 0;
  overflow: hidden;
  background-image: url('../assets/hero-bg/main-hero-first.jpg');
  background-size: cover;
  background-position: center;
}

/* Cursor-stirred light field. Transparent except where the pointer has
   been, and screen-blended, so the photographs underneath stay at full
   brightness and only pick up light where you stir. */
.hero-fluid {
  z-index: 1;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.hero-fluid.is-live {
  opacity: 1;
}

.hero-bg__pane {
  position: absolute;
  inset: 0;
  will-change: clip-path, opacity;
}

.hero-bg__pane > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-bg__pane--tiled {
  clip-path: none;
}

/* No will-change here on purpose — the dissolve pane alone has 112 tiles,
   and promoting each one to its own compositing layer costs far more than
   it saves. */
.hero-bg__tile {
  position: absolute;
  overflow: hidden;
}

.hero-bg__tile img {
  position: absolute;
  object-fit: cover;
  max-width: none;
}

.hero-reveal__progress {
  position: absolute;
  left: 50%;
  bottom: calc(-1 * var(--space-6));
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-2);
  z-index: 2;
}

.hero-reveal__progress span {
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: rgba(43, 27, 58, 0.22);
  overflow: hidden;
  position: relative;
}

.hero-reveal__progress span::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-aubergine-900);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease-out);
}

.hero-reveal__progress span.is-done::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .border-trace::before,
  .btn::before,
  .btn::after,
  .btn--icon-circle::before,
  .btn--icon-circle::after,
  .floaties__btn::before,
  .floaties__btn::after { animation: none !important; }
}

/* ============================================================================
   Transitions.dev — Matrix dot loader
   Recoloured to the site palette: dim cream dots on aubergine, pulsing lime.
   ============================================================================ */
:root {
  --matrix-cycle: 1200ms;
  --matrix-dot: 2px;
  --matrix-base: rgba(240, 235, 216, 0.22);
  --matrix-active: var(--color-lime-500);
  --matrix-ease: ease-in-out;
}

.t-matrix {
  display: grid;
  grid-template-columns: repeat(4, var(--matrix-dot));
  grid-auto-rows: var(--matrix-dot);
  gap: var(--matrix-dot);
}

.t-matrix i {
  display: block;
  background: var(--matrix-base);
  animation: t-matrix-pulse var(--matrix-cycle) var(--matrix-ease) infinite;
  animation-delay: calc(var(--d, 0) * 1ms);
}

/* Hole positions (rounded variants) render nothing. */
.t-matrix i.is-gap { visibility: hidden; animation: none; }
/* Orbit keeps its centre lit but still. */
.t-matrix i.is-static { animation: none; }

@keyframes t-matrix-pulse {
  0%, 45%, 100% { background-color: var(--matrix-base); }
  15%           { background-color: var(--matrix-active); }
}

/* On the cream surfaces the dots flip to aubergine-on-cream. */
.t-matrix--ink {
  --matrix-base: rgba(43, 27, 58, 0.2);
  --matrix-active: var(--color-purple-500);
}

@media (prefers-reduced-motion: reduce) {
  .t-matrix i { animation: none !important; }
}

/* ============================================================================
   Transitions.dev — Banner stacking
   ============================================================================ */
:root {
  --stack-open: 350ms;
  --stack-close: 250ms;
  --stack-rise: 60px;
  --stack-blur: 2px;
  --stack-scale: 0.97;
  --stack-peek: 12px;
  --stack-spread-gap: 8px;
  --stack-depth-scale: 0.06;
  --stack-depth-fade: 0.4;
  --stack-depth1-blur: 1px;
  --stack-depth2-blur: 2px;
  --stack-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.t-stack { position: relative; }

.t-stack-banner {
  position: absolute;
  left: 0;
  bottom: 0;
  /* Centre origin so an arriving banner scales like a toast; the
     push-back depths switch to the bottom edge, which they can do
     freely because the swap happens at identity. */
  transform-origin: 50% 50%;
  /* Explicit blur(0) rather than an unset filter — blur → none is
     not reliably interpolated, and the cross-blur would snap. */
  filter: blur(0);
  will-change: transform, opacity, filter;
  transition:
    transform var(--stack-open) var(--stack-ease),
    opacity var(--stack-open) var(--stack-ease),
    filter var(--stack-open) var(--stack-ease);
}

.t-stack-banner[data-depth="0"] {
  z-index: 3;
  transform: translateY(0) scale(1);
  opacity: 1;
}

.t-stack-banner[data-depth="1"] {
  z-index: 2;
  transform-origin: 50% 100%;
  transform: translateY(calc(var(--stack-peek) * -1))
             scale(calc(1 - var(--stack-depth-scale)));
  opacity: calc(1 - var(--stack-depth-fade));
  filter: blur(var(--stack-depth1-blur));
}

.t-stack-banner[data-depth="2"] {
  z-index: 1;
  transform-origin: 50% 100%;
  transform: translateY(calc(var(--stack-peek) * -2))
             scale(calc(1 - var(--stack-depth-scale) * 2));
  opacity: calc(1 - var(--stack-depth-fade) * 1.6);
  filter: blur(var(--stack-depth2-blur));
}

/* Spread: newest stays put, older ones climb one banner height
   each (100% = the banner's own height). Driven by a class, not
   :hover — the gaps between spread banners belong to no element. */
.t-stack.is-spread .t-stack-banner[data-depth="1"],
.t-stack.is-spread .t-stack-banner[data-depth="2"] { opacity: 1; filter: blur(0); }

.t-stack.is-spread .t-stack-banner[data-depth="1"] {
  transform: translateY(calc((100% + var(--stack-spread-gap)) * -1)) scale(1);
}

.t-stack.is-spread .t-stack-banner[data-depth="2"] {
  transform: translateY(calc((100% + var(--stack-spread-gap)) * -2)) scale(1);
}

.t-stack-banner.is-enter {
  transition: none;
  transform: translateY(var(--stack-rise)) scale(var(--stack-scale));
  opacity: 0;
  filter: blur(var(--stack-blur));
}

.t-stack-banner.is-leaving {
  z-index: 0;
  transform-origin: 50% 100%;
  transform: translateY(calc(var(--stack-peek) * -3))
             scale(calc(1 - var(--stack-depth-scale) * 3));
  opacity: 0;
  filter: blur(var(--stack-blur));
  transition:
    transform var(--stack-close) var(--stack-ease),
    opacity var(--stack-close) var(--stack-ease),
    filter var(--stack-close) var(--stack-ease);
}

@media (prefers-reduced-motion: reduce) {
  .t-stack-banner { transition: none !important; transform: none !important; filter: none !important; }
}

/* ============================================================================
   Side rail — day / night switch
   From Uiverse.io by elijahgummer. The hardware look is kept; the body is
   tinted toward aubergine and the indicator glows purple for night and lime
   for day, instead of the original red and green. Scoped under .rail-switch
   so the generic class names can't leak into the rest of the site.
   ============================================================================ */
.rail-switch {
  margin: 0 12px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: max-height 0.35s var(--ease-out), opacity 0.28s ease, visibility 0.28s, margin 0.35s var(--ease-out);
}

/* Only shown when the rail is open — a 210px switch has no place in a 68px strip. */
.siderail:hover .rail-switch,
.siderail[data-state="open"] .rail-switch {
  max-height: 90px;
  margin-bottom: var(--space-3);
  opacity: 1;
  visibility: visible;
}

.rail-switch__labels {
  display: flex;
  width: 210px;
  margin: 0 auto 6px;
  font-family: 'Space Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(240, 235, 216, 0.4);
}

.rail-switch__labels span {
  flex: 1;
  text-align: center;
  transition: color 0.4s ease;
}

.rail-switch__labels span.is-active {
  color: var(--color-cream-text);
}

.rail-switch .switch {
  position: relative;
  width: 210px;
  height: 50px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 3px;
  background: #140c18;
  border-radius: 6px;
  box-shadow:
    inset 0 1px 1px 1px rgba(0, 0, 0, 0.5),
    0 1px 0 0 rgba(255, 255, 255, 0.1);
}

.rail-switch .switch input[type="checkbox"] {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.rail-switch .switch input[type="checkbox"] + label {
  position: relative;
  display: block;
  left: 0;
  width: 50%;
  height: 100%;
  background: #22172a;
  border-radius: 3px;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
  transition: all 0.5s ease-in-out;
}

.rail-switch .switch input[type="checkbox"] + label::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 10px;
  background: #fff;
  border-radius: 50%;
  vertical-align: middle;
  box-shadow:
    0 0 5px 2px rgba(139, 126, 200, 0.95),
    0 0 3px 1px rgba(139, 126, 200, 0.95);
  transition: all 0.5s ease-in-out;
}

.rail-switch .switch input[type="checkbox"] + label::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle;
}

.rail-switch .switch input[type="checkbox"] + label i {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 24px;
  margin-top: -12px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: #140c18;
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.3);
}

.rail-switch .switch input[type="checkbox"] + label i::before,
.rail-switch .switch input[type="checkbox"] + label i::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  background: #140c18;
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.3);
}

.rail-switch .switch input[type="checkbox"] + label i::before {
  left: -7px;
}

.rail-switch .switch input[type="checkbox"] + label i::after {
  left: 7px;
}

.rail-switch .switch input[type="checkbox"]:checked + label {
  left: 50%;
}

.rail-switch .switch input[type="checkbox"]:checked + label::before {
  box-shadow:
    0 0 5px 2px rgba(214, 237, 74, 0.95),
    0 0 3px 1px rgba(214, 237, 74, 0.95);
}

.rail-switch .switch input[type="checkbox"]:focus-visible + label {
  outline: 2px solid var(--color-lime-500);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .rail-switch .switch input[type="checkbox"] + label,
  .rail-switch .switch input[type="checkbox"] + label::before {
    transition: none;
  }
}

/* ---- Day colours for the rail -------------------------------------------- */
.siderail__row,
.siderail__subrow,
.siderail__brand {
  transition: background 0.25s ease, color 0.4s ease;
}

.siderail__head,
.siderail__foot {
  transition: border-color 0.4s ease;
}

.siderail[data-theme="day"] .siderail__panel {
  background: rgba(237, 236, 200, 0.62);
  border-color: rgba(43, 27, 58, 0.14);
  box-shadow: 0 24px 60px rgba(43, 27, 58, 0.18);
}

.siderail[data-theme="day"]:hover .siderail__panel,
.siderail[data-theme="day"][data-state="open"] .siderail__panel {
  background: rgba(237, 236, 200, 0.9);
}

.siderail[data-theme="day"] .siderail__head,
.siderail[data-theme="day"] .siderail__foot {
  border-color: rgba(43, 27, 58, 0.12);
}

.siderail[data-theme="day"] .siderail__brand {
  color: var(--text-heading);
}

.siderail[data-theme="day"] .siderail__burger span {
  background: var(--text-heading);
}

.siderail[data-theme="day"] .siderail__row {
  color: var(--text-label);
}

.siderail[data-theme="day"] .siderail__row:hover {
  background: rgba(232, 180, 155, 0.32);
  color: var(--text-heading);
}

.siderail[data-theme="day"] .siderail__row.is-current {
  background: rgba(43, 27, 58, 0.08);
  color: var(--text-heading);
}

.siderail[data-theme="day"] .siderail__subrow {
  color: var(--text-body-muted);
}

.siderail[data-theme="day"] .siderail__subrow:hover {
  background: rgba(232, 180, 155, 0.28);
  color: var(--text-heading);
}

.siderail[data-theme="day"] .siderail__subrow.is-current {
  color: var(--color-terracotta-600);
}

.siderail[data-theme="day"] .rail-switch__labels {
  color: rgba(43, 27, 58, 0.4);
}

.siderail[data-theme="day"] .rail-switch__labels span.is-active {
  color: var(--text-heading);
}

@media (max-width: 1023px) {
  .siderail[data-theme="day"] .siderail__panel,
  .siderail[data-theme="day"]:hover .siderail__panel,
  .siderail[data-theme="day"][data-state="open"] .siderail__panel {
    background: rgba(237, 236, 200, 0.96);
  }

  /* The drawer is always open, so the switch is always available there. */
  .rail-switch {
    max-height: 90px;
    margin-bottom: var(--space-3);
    opacity: 1;
    visibility: visible;
  }
}