/* Interlinked foundation. Every artboard links this first; section files build on it.
   Re-theme from the tokens below: the stone and copper ramps feed everything else. */

/* Tokens */
:root {
  --stone-100: #f6f5f1;
  --stone-200: #e6e5e0;
  --stone-300: #cecdc9;
  --stone-400: #9f9b92;
  --stone-500: #645e54;
  --stone-600: #3d3934;
  --stone-700: #292623;
  --stone-800: #201c19;
  --stone-900: #16120f;
  --copper-300: #f7ba8e;
  --copper-400: #f69a5b;
  --copper-500: #ed670f;

  --page: var(--stone-900);
  --surface: var(--stone-800);
  --surface-2: var(--stone-700);
  --surface-hover: var(--stone-600);
  --surface-2-hover: var(--stone-500);
  --text: #fff;
  --text-2: var(--stone-300);
  --text-3: var(--stone-400);
  --accent: var(--copper-500); /* Main's accent tweak overrides this on its root */

  --font-heading: 'IL Serif', Georgia, serif;
  --font-body: 'IL Bit', 'Pixelify Sans', ui-monospace, monospace;
  --font-caption: 'Pixelify Sans', ui-monospace, monospace;
  --font-body-alt: 'IL Pixel', 'Geist Mono', ui-monospace, monospace;
  --font-mono: 'Geist Mono', ui-monospace, monospace;

  /* Type sizes; the type classes read these, the two steps below change them */
  --fs-display: 96px;
  --fs-h-xl: 64px;
  --fs-h-lg: 48px;
  --fs-h-md: 40px;
  --fs-h-sm: 32px;
  --fs-h-xs: 28px;
  --fs-h-2xs: 24px;
  --fs-body-xl: 32px;
  --fs-body-lg: 28px;
  --fs-body-md: 28px;
  --fs-body-sm: 24px;
  --fs-body-xs: 20px;
  --fs-alt-xl: 24px;
  --fs-alt-lg: 20px;
  --fs-alt-md: 18px;
  --fs-alt-sm: 16px;
  --fs-alt-xs: 14px;
  --fs-alt-2xs: 12px;
  --fs-cap-lg: 16px;
  --fs-cap-md: 14px;
  --fs-cap-sm: 12px;

  /* The 4px stepped corner shared by .px-notch and .px-border */
  --px-notch: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px));
}

/* Type steps at 767 and 639 (captions grow again on phones, as in the reference) */
@media (max-width: 767px) {
  :root {
    --fs-display: 84px;
    --fs-h-xl: 56px;
    --fs-h-lg: 42px;
    --fs-h-md: 35px;
    --fs-h-sm: 28px;
    --fs-h-xs: 24.5px;
    --fs-h-2xs: 21px;
    --fs-body-xl: 28px;
    --fs-body-lg: 24.5px;
    --fs-body-md: 24.5px;
    --fs-body-sm: 21px;
    --fs-body-xs: 17.5px;
    --fs-alt-xl: 21px;
    --fs-alt-lg: 17.5px;
    --fs-alt-md: 15.75px;
    --fs-alt-sm: 14px;
    --fs-cap-lg: 14px;
    --fs-cap-md: 12.25px;
    --fs-cap-sm: 10.5px;
  }
}
@media (max-width: 639px) {
  :root {
    --fs-display: 60px;
    --fs-h-xl: 42px;
    --fs-h-lg: 36px;
    --fs-h-md: 30px;
    --fs-h-sm: 27px;
    --fs-h-xs: 24px;
    --fs-body-xl: 36px;
    --fs-body-lg: 30px;
    --fs-body-md: 27px;
    --fs-body-sm: 24px;
    --fs-body-xs: 21px;
    --fs-alt-xl: 21px;
    --fs-alt-md: 13.5px;
    --fs-alt-sm: 12px;
    --fs-cap-lg: 18px;
    --fs-cap-md: 15px;
    --fs-cap-sm: 15px;
  }
}

/* Base. Resets use :where() so any section rule wins over them. */
html,
body {
  background: #0a0a0a;
  color-scheme: dark;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.il {
  font-family: var(--font-body-alt);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
:where(.il),
:where(.il) *,
:where(.il) *::before,
:where(.il) *::after {
  box-sizing: border-box;
}
:where(.il) :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul, pre) {
  margin: 0;
}
:where(.il) :where(ol, ul) {
  padding: 0;
  list-style: none;
}
:where(.il) a {
  color: inherit;
  text-decoration: inherit;
}
:where(.il) :where(button, input, select, textarea) {
  margin: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}
:where(.il) :where(button, input:not([type=checkbox], [type=radio], [type=range]), textarea) {
  -webkit-appearance: none;
  appearance: none;
}
:where(.il) ::placeholder {
  color: var(--text-3);
  opacity: 1;
}
:where(.il) [hidden] {
  display: none !important;
}
:where(.il) img {
  image-rendering: pixelated; /* all art is pixel art */
}
[id] {
  scroll-margin-top: 100px;
}
::selection {
  background: var(--accent);
  color: #fff;
}

/* Focus: text links get the copper ring; PixelButtons show their bracket instead */
:where(.il a:not(.pbtn)):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.pbtn:focus-visible {
  outline: none;
}

/* Lenis smooth scroll */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}

/* Layout: 1440 cap, 16 / 32 (768+) / 64 (1024+) gutters. Breakpoints: 640, 768, 1024, 1280. */
.page-container {
  box-sizing: border-box;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 16px;
}
@media (min-width: 768px) {
  .page-container {
    padding-inline: 32px;
  }
}
@media (min-width: 1024px) {
  .page-container {
    padding-inline: 64px;
  }
}

/* Type. Headings and body trim to cap height and baseline; display and captions do not
   (the reference H1 box is the full 2 x 96px plus the reveal's 8px). */
.t-display,
.t-h-xl,
.t-h-lg,
.t-h-md,
.t-h-sm,
.t-h-xs,
.t-h-2xs {
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: -0.75px;
  color: var(--heading-color, #fff); /* light panels set --heading-color */
}
.t-h-xl,
.t-h-lg,
.t-h-md,
.t-h-sm,
.t-h-xs,
.t-h-2xs,
.t-body-xl,
.t-body-lg,
.t-body-md,
.t-body-sm,
.t-body-xs,
.t-alt-xl,
.t-alt-lg,
.t-alt-md,
.t-alt-sm,
.t-alt-xs,
.t-alt-2xs {
  text-box: trim-both cap alphabetic;
}
.t-display { font-size: var(--fs-display); line-height: 1; }
.t-h-xl { font-size: var(--fs-h-xl); line-height: 1.05; }
.t-h-lg { font-size: var(--fs-h-lg); line-height: 1.05; }
.t-h-md { font-size: var(--fs-h-md); line-height: 1.05; }
.t-h-sm { font-size: var(--fs-h-sm); line-height: 1.05; }
.t-h-xs { font-size: var(--fs-h-xs); line-height: 1.05; }
.t-h-2xs { font-size: var(--fs-h-2xs); line-height: 1.05; }

.t-body-xl,
.t-body-lg,
.t-body-md,
.t-body-sm,
.t-body-xs {
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: 0;
}
.t-body-xl { font-size: var(--fs-body-xl); line-height: 0.9; }
.t-body-lg { font-size: var(--fs-body-lg); line-height: 0.9; }
.t-body-md { font-size: var(--fs-body-md); line-height: 0.9; }
.t-body-sm { font-size: var(--fs-body-sm); line-height: 0.85; }
.t-body-xs { font-size: var(--fs-body-xs); line-height: 0.85; }

.t-alt-xl,
.t-alt-lg,
.t-alt-md,
.t-alt-sm,
.t-alt-xs,
.t-alt-2xs {
  font-family: var(--font-body-alt);
  font-weight: 400;
  letter-spacing: -0.25px;
  line-height: 1.2;
}
.t-alt-xl { font-size: var(--fs-alt-xl); }
.t-alt-lg { font-size: var(--fs-alt-lg); }
.t-alt-md { font-size: var(--fs-alt-md); }
.t-alt-sm { font-size: var(--fs-alt-sm); }
.t-alt-xs { font-size: var(--fs-alt-xs); }
.t-alt-2xs { font-size: var(--fs-alt-2xs); }

.t-cap-lg,
.t-cap-md,
.t-cap-sm {
  font-family: var(--font-caption);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}
.t-cap-lg { font-size: var(--fs-cap-lg); }
.t-cap-md { font-size: var(--fs-cap-md); }
.t-cap-sm { font-size: var(--fs-cap-sm); }

/* Pixel notch: 4px square steps cut from every corner */
.px-notch {
  clip-path: var(--px-notch);
}

/* Pixel border: notched ring (--pb-color, default currentColor) around a notched fill
   (--pb-fill) inset by --bw. The header bar uses --bw: 4px. */
.px-border {
  position: relative;
  isolation: isolate;
}
.px-border::before,
.px-border::after {
  content: "";
  position: absolute;
  z-index: -1;
  clip-path: var(--px-notch);
  pointer-events: none;
}
.px-border::before {
  inset: 0;
  background: var(--pb-color, currentColor);
}
.px-border::after {
  inset: var(--bw, 1px);
  background: var(--pb-fill, var(--surface));
}

/* PixelFrame: first child of a position:relative wrapper with padding:12px. Draws a 12px band
   in currentColor: 4px cells, the line on the band's middle row (4 to 8px in), then a 4px gap. */
.pframe {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Variant A, crosshair. Corner rows read left to right, top to bottom, in 4px cells:
   the 3x3 ring, then a diamond 12 to 24px along each edge. */
.pframe-a {
  background:
    /* lines, 24px to calc(100% - 24px); drawn from 20px so they also fill each diamond's inner cell */
    linear-gradient(currentColor 0 0) left 20px top 4px / calc(100% - 40px) 4px no-repeat,
    linear-gradient(currentColor 0 0) left 20px bottom 4px / calc(100% - 40px) 4px no-repeat,
    linear-gradient(currentColor 0 0) left 4px top 20px / 4px calc(100% - 40px) no-repeat,
    linear-gradient(currentColor 0 0) right 4px top 20px / 4px calc(100% - 40px) no-repeat,
    /* top-left: ###.#. / #.##.# / ###.#. / .#.... / #.#... / .#.... */
    linear-gradient(currentColor 0 0) left 0 top 0 / 12px 4px no-repeat,
    linear-gradient(currentColor 0 0) left 16px top 0 / 4px 4px no-repeat,
    linear-gradient(currentColor 0 0) left 0 top 4px / 4px 4px no-repeat,
    linear-gradient(currentColor 0 0) left 8px top 4px / 8px 4px no-repeat,
    linear-gradient(currentColor 0 0) left 0 top 8px / 12px 4px no-repeat,
    linear-gradient(currentColor 0 0) left 16px top 8px / 4px 4px no-repeat,
    linear-gradient(currentColor 0 0) left 4px top 12px / 4px 4px no-repeat,
    linear-gradient(currentColor 0 0) left 0 top 16px / 4px 4px no-repeat,
    linear-gradient(currentColor 0 0) left 8px top 16px / 4px 4px no-repeat,
    /* top-right: .#.### / #.##.# / .#.### / ....#. / ...#.# / ....#. */
    linear-gradient(currentColor 0 0) right 0 top 0 / 12px 4px no-repeat,
    linear-gradient(currentColor 0 0) right 16px top 0 / 4px 4px no-repeat,
    linear-gradient(currentColor 0 0) right 0 top 4px / 4px 4px no-repeat,
    linear-gradient(currentColor 0 0) right 8px top 4px / 8px 4px no-repeat,
    linear-gradient(currentColor 0 0) right 0 top 8px / 12px 4px no-repeat,
    linear-gradient(currentColor 0 0) right 16px top 8px / 4px 4px no-repeat,
    linear-gradient(currentColor 0 0) right 4px top 12px / 4px 4px no-repeat,
    linear-gradient(currentColor 0 0) right 0 top 16px / 4px 4px no-repeat,
    linear-gradient(currentColor 0 0) right 8px top 16px / 4px 4px no-repeat,
    /* bottom-left: .#.... / #.#... / .#.... / ###.#. / #.##.# / ###.#. */
    linear-gradient(currentColor 0 0) left 0 bottom 0 / 12px 4px no-repeat,
    linear-gradient(currentColor 0 0) left 16px bottom 0 / 4px 4px no-repeat,
    linear-gradient(currentColor 0 0) left 0 bottom 4px / 4px 4px no-repeat,
    linear-gradient(currentColor 0 0) left 8px bottom 4px / 8px 4px no-repeat,
    linear-gradient(currentColor 0 0) left 0 bottom 8px / 12px 4px no-repeat,
    linear-gradient(currentColor 0 0) left 16px bottom 8px / 4px 4px no-repeat,
    linear-gradient(currentColor 0 0) left 4px bottom 12px / 4px 4px no-repeat,
    linear-gradient(currentColor 0 0) left 0 bottom 16px / 4px 4px no-repeat,
    linear-gradient(currentColor 0 0) left 8px bottom 16px / 4px 4px no-repeat,
    /* bottom-right: ....#. / ...#.# / ....#. / .#.### / #.##.# / .#.### */
    linear-gradient(currentColor 0 0) right 0 bottom 0 / 12px 4px no-repeat,
    linear-gradient(currentColor 0 0) right 16px bottom 0 / 4px 4px no-repeat,
    linear-gradient(currentColor 0 0) right 0 bottom 4px / 4px 4px no-repeat,
    linear-gradient(currentColor 0 0) right 8px bottom 4px / 8px 4px no-repeat,
    linear-gradient(currentColor 0 0) right 0 bottom 8px / 12px 4px no-repeat,
    linear-gradient(currentColor 0 0) right 16px bottom 8px / 4px 4px no-repeat,
    linear-gradient(currentColor 0 0) right 4px bottom 12px / 4px 4px no-repeat,
    linear-gradient(currentColor 0 0) right 0 bottom 16px / 4px 4px no-repeat,
    linear-gradient(currentColor 0 0) right 8px bottom 16px / 4px 4px no-repeat;
}

/* Variant B, loop-knot (also every button bracket). The line runs straight out of each
   corner tile, so the lines fill the tile's line-side cells and the corner layers add the rest. */
.pframe-b,
.pbtn-bracket {
  background:
    /* lines from 8px to calc(100% - 8px) */
    linear-gradient(currentColor 0 0) left 8px top 4px / calc(100% - 16px) 4px no-repeat,
    linear-gradient(currentColor 0 0) left 8px bottom 4px / calc(100% - 16px) 4px no-repeat,
    linear-gradient(currentColor 0 0) left 4px top 8px / 4px calc(100% - 16px) no-repeat,
    linear-gradient(currentColor 0 0) right 4px top 8px / 4px calc(100% - 16px) no-repeat,
    /* top-left: .## / #.# / ##. */
    linear-gradient(currentColor 0 0) left 4px top 0 / 8px 4px no-repeat,
    linear-gradient(currentColor 0 0) left 0 top 4px / 4px 8px no-repeat,
    /* top-right: ##. / #.# / .## */
    linear-gradient(currentColor 0 0) right 4px top 0 / 8px 4px no-repeat,
    linear-gradient(currentColor 0 0) right 0 top 4px / 4px 8px no-repeat,
    /* bottom-left: ##. / #.# / .## */
    linear-gradient(currentColor 0 0) left 4px bottom 0 / 8px 4px no-repeat,
    linear-gradient(currentColor 0 0) left 0 bottom 4px / 4px 8px no-repeat,
    /* bottom-right: .## / #.# / ##. */
    linear-gradient(currentColor 0 0) right 4px bottom 0 / 8px 4px no-repeat,
    linear-gradient(currentColor 0 0) right 0 bottom 4px / 4px 8px no-repeat;
}

/* PixelButton: <a|button class="pbtn pbtn--SIZE pbtn--FILL"> with a .pbtn-face.px-notch and a
   .pbtn-bracket. Hover, press and focus only change the bracket's opacity: nothing moves,
   scales, recolours or animates. Fills set three variables, so one-off overrides stay simple. */
.pbtn {
  --pbtn-fill: var(--surface);
  --pbtn-ink: var(--text);
  --pbtn-bracket: #fff;
  position: relative;
  display: inline-flex;
  -webkit-tap-highlight-color: transparent;
}
.pbtn-face {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  background: var(--pbtn-fill);
  color: var(--pbtn-ink);
  font-family: var(--font-caption);
  font-size: var(--fs-cap-md);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
}
.pbtn--md .pbtn-face { padding: 8px; }
.pbtn--mdw .pbtn-face { padding: 8px 16px; }
.pbtn--lg .pbtn-face { padding: 12px 24px; font-size: var(--fs-cap-lg); } /* 12 + 16 + 12 = 40px tall */
.pbtn--block {
  display: flex;
  width: 100%;
}
.pbtn--dark { --pbtn-fill: var(--surface); --pbtn-ink: #fff; --pbtn-bracket: #fff; }
.pbtn--white { --pbtn-fill: #fff; --pbtn-ink: #000; --pbtn-bracket: rgba(32, 28, 25, .4); }
.pbtn--ink { --pbtn-fill: #fff; --pbtn-ink: var(--surface); --pbtn-bracket: rgba(32, 28, 25, .4); }
.pbtn--cream { --pbtn-fill: var(--stone-200); --pbtn-ink: var(--surface); --pbtn-bracket: #fff; } /* sits on #201c19: white, as measured */
.pbtn--copper { --pbtn-fill: var(--accent); --pbtn-ink: #fff; --pbtn-bracket: #fff; }
.pbtn--secondary { --pbtn-fill: var(--surface-2); --pbtn-ink: #fff; --pbtn-bracket: #fff; }
.pbtn--text { --pbtn-fill: transparent; --pbtn-ink: currentColor; --pbtn-bracket: currentColor; } /* white on dark, dark on light cards */
.pbtn-bracket {
  position: absolute;
  inset: -12px;
  pointer-events: none;
  opacity: 0;
  color: var(--pbtn-bracket);
}
@media (hover: hover) {
  .pbtn:hover .pbtn-bracket { opacity: .5; }
}
.pbtn[aria-expanded="true"] .pbtn-bracket { opacity: .5; } /* a trigger keeps its bracket while its menu is open */
.pbtn:active .pbtn-bracket,
.pbtn:focus-visible .pbtn-bracket { opacity: 1; }
/* The white buttons sit on the black hero, where their spec bracket colour vanishes:
   keyboard focus switches it to white so focus stays visible. Hover keeps the spec colour. */
.pbtn--white:focus-visible { --pbtn-bracket: #fff; }

/* Pixel icon: inline svg of rectangle runs; the user sets its size */
.px-ico {
  display: block;
  flex: none;
  shape-rendering: crispEdges;
}

/* Icon tile: lit top and right, shadowed bottom and left; 80px from 640, 64px below */
.icon-tile {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: var(--surface-2);
  color: #fff;
  box-shadow: inset -4px 4px 0 var(--stone-600), inset 4px -4px 0 var(--stone-900);
}
.icon-tile svg {
  width: 32px;
  height: 32px;
}
.icon-tile--pressed {
  box-shadow: inset 4px -4px 0 var(--stone-600), inset -4px 4px 0 var(--stone-900);
}
@media (min-width: 640px) {
  .icon-tile {
    width: 80px;
    height: 80px;
  }
}

/* Text links: the only transitions on the site */
.lnk-rail,
.lnk-foot,
.lnk-policy {
  transition: color 150ms cubic-bezier(.4, 0, .2, 1);
}
.lnk-rail {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  color: var(--text-2);
  font-family: var(--font-caption);
  font-size: var(--fs-cap-md);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}
.lnk-num {
  color: var(--accent);
}
.lnk-foot {
  color: var(--text);
}
.lnk-policy {
  color: var(--text-3);
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (hover: hover) {
  .lnk-rail:hover { color: var(--accent); }
  .lnk-foot:hover { color: var(--text-2); }
  .lnk-policy:hover { color: var(--text); }
}

/* Pixel reveal: JS adds html.js, then steps .pr-1 to .pr-4 and .pr-done on the span */
.pixel-reveal {
  display: block;
  padding-bottom: 8px;
}
html.js .pixel-reveal {
  visibility: hidden;
}
html.js .pixel-reveal:is(.pr-1, .pr-2, .pr-3, .pr-4, .pr-done),
html.boot-played .hero-h1 .pixel-reveal {
  visibility: visible;
}
.pixel-reveal.pr-1 {
  -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 1px, transparent 1px 8px);
  mask-image: repeating-linear-gradient(to bottom, #000 0 1px, transparent 1px 8px);
}
.pixel-reveal.pr-2 {
  -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 1px, transparent 1px 4px);
  mask-image: repeating-linear-gradient(to bottom, #000 0 1px, transparent 1px 4px);
}
.pixel-reveal.pr-3 {
  -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 2px, transparent 2px 4px);
  mask-image: repeating-linear-gradient(to bottom, #000 0 2px, transparent 2px 4px);
}
.pixel-reveal.pr-4 {
  -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 3px, transparent 3px 4px);
  mask-image: repeating-linear-gradient(to bottom, #000 0 3px, transparent 3px 4px);
}
.pixel-reveal.pr-done {
  -webkit-mask-image: none;
  mask-image: none;
}

/* Dialog: <dialog class="dlg dlg--talk"> > .dlg-frame (white .pframe.pframe-a first) > .dlg-panel,
   with the CLOSE button (.dlg-close) inside the panel. The panel scrolls if the screen is short. */
.dlg {
  max-width: none;
  max-height: calc(100% - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  overflow: visible;
}
.dlg[open] {
  display: flex;
  flex-direction: column;
}
.dlg::backdrop {
  background: rgba(22, 18, 15, .5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.dlg--talk {
  width: min(640px, calc(100vw - 32px)); /* 640 outside the frame, 616 panel: measured */
}
.dlg--watch {
  width: min(1100px, calc(100vw - 32px));
}
.dlg-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 12px;
}
.dlg-frame > .pframe {
  color: #fff;
}
.dlg-panel {
  --heading-color: var(--surface);
  position: relative;
  min-height: 0;
  padding: 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  color: var(--surface);
}
/* On the white panel a white bracket would vanish, so every button in it uses the
   light-surface bracket of the dropdown items. */
.dlg-panel .pbtn {
  --pbtn-bracket: rgba(32, 28, 25, .4);
}
.dlg .dlg-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
}

/* Fixed layers. Z order: CRT 40 < figures 45 < header 50 < toast 55 < phone menu 60
   < dropdown 99 < sound toggle and skip link 100 < page fade 9998. */
.crt {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: .5;
}
.crt::before,
.crt::after {
  content: "";
  position: absolute;
  inset: 0;
}
.crt::before {
  background: radial-gradient(transparent 60%, rgba(0, 0, 0, .35));
  mix-blend-mode: multiply;
}
.crt::after {
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .08) 0 1px, transparent 1px 7px);
  mix-blend-mode: screen;
}

/* Skip link: pair with .pbtn .pbtn--mdw .pbtn--copper; hidden until focused */
.skip-link:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link:focus {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 100;
}

/* Toast: put a .pframe.pframe-b first, then the text. The 36px padding is the 12px frame band
   plus the panel's 24px; the panel fill is painted inside the band. */
.toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 55;
  width: calc(100% - 32px);
  max-width: 440px;
  padding: 36px;
  background: linear-gradient(var(--surface) 0 0) 12px 12px / calc(100% - 24px) calc(100% - 24px) no-repeat;
  color: var(--text);
  font-size: var(--fs-alt-sm);
  letter-spacing: -0.25px;
  line-height: 1.2;
}
.toast .pframe {
  color: var(--surface);
}

/* Page shutter (the reference's CRT page change): black scanlines over the page, set by Main's
   script in 1, 2 and 3px of every 4px, then solid while the page swaps, then back out */
.shutter {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: none;
  background: #000;
  pointer-events: none;
}
.shutter.is-on {
  display: block;
  pointer-events: auto;
}

/* Overmind's cursors as 32px and 64px PNGs (Chrome redraws SVG cursors on every change, which flickered over moving content), original hotspots. Native CSS cursors keep
   pointer movement immediate; no following element or animation loop is needed.
   Main already manages is-pressing (including its 150ms release); Screen manages
   cur-grabbing. Dragging takes precedence over the global pressed cursor. */
@media (hover: hover) and (pointer: fine) {
  html,
  body {
    cursor: url(../assets/4805f9252a04872825f256deab50eca0.png) 2 2, default;
    cursor: -webkit-image-set(url(../assets/4805f9252a04872825f256deab50eca0.png) 1x, url(../assets/d9e3ffc348fe60dba294f152cadc7a3e.png) 2x) 2 2, default;
  }
  :where(.il) :where(p, h1, h2, h3, h4, h5, h6, li, dt, dd, blockquote, figcaption, caption, th, td, pre, code, label, input, textarea, [contenteditable=true]) {
    cursor: url(../assets/e8a84c88e08b8c156f01165b2b76762a.png) 4 10, text;
    cursor: -webkit-image-set(url(../assets/e8a84c88e08b8c156f01165b2b76762a.png) 1x, url(../assets/cc28c844b7d0d24bbb983fdaf375db8d.png) 2x) 4 10, text;
  }
  :where(.il) :where(a, button, [role=button], [role=link], summary, label[for], select, .cur-grab, .cur-grabbing, .cur-move, .cur-vol-off, .cur-vol-on) * {
    cursor: inherit; /* Text and SVG children retain their control's cursor. */
  }
  :where(.il) :where(a, button, [role=button], [role=link], summary, label[for], select, input:is([type=button], [type=submit], [type=reset], [type=checkbox], [type=radio])) {
    cursor: url(../assets/7b47e0fa8f0a3828cdecbd204e413832.png) 2 0, pointer;
    cursor: -webkit-image-set(url(../assets/7b47e0fa8f0a3828cdecbd204e413832.png) 1x, url(../assets/411ded27dd518733ee7e689aa10fc33c.png) 2x) 2 0, pointer;
  }
  /* The films and the screen's moving parts slide under a still pointer: they never change it,
     or the cursor flickers between shapes as each piece passes */
  .il .film-root,
  .il .film-root *,
  .il [aria-hidden="true"],
  .il [aria-hidden="true"] * {
    cursor: inherit;
  }
  .il .cur-grab {
    cursor: url(../assets/df1a1ee7ac06b4a47fbaa5a7cc8d9b99.png) 16 8, grab;
    cursor: -webkit-image-set(url(../assets/df1a1ee7ac06b4a47fbaa5a7cc8d9b99.png) 1x, url(../assets/ee63209d8d2dabcc34f0c9f2a868d9e5.png) 2x) 16 8, grab;
  }
  .il .cur-move {
    cursor: url(../assets/342b360ee301dffb9b35253d3654d6a3.png) 16 16, move;
    cursor: -webkit-image-set(url(../assets/342b360ee301dffb9b35253d3654d6a3.png) 1x, url(../assets/35dcfbac6fa2c1e8c2896a347d9f49f4.png) 2x) 16 16, move;
  }
  .il .cur-vol-off {
    cursor: url(../assets/1ce4491fe8ad425bf8ef6bbaca33b012.png) 16 16, pointer;
    cursor: -webkit-image-set(url(../assets/1ce4491fe8ad425bf8ef6bbaca33b012.png) 1x, url(../assets/0d795e844728bfb9b0eed241bf44868d.png) 2x) 16 16, pointer;
  }
  .il .cur-vol-on {
    cursor: url(../assets/ccb7d86f6d0d336c3119ccec9cc3a86f.png) 16 16, pointer;
    cursor: -webkit-image-set(url(../assets/ccb7d86f6d0d336c3119ccec9cc3a86f.png) 1x, url(../assets/ebb3070d4dae5a2f1977a96c645256f9.png) 2x) 16 16, pointer;
  }
  html.is-pressing,
  html.is-pressing * {
    cursor: url(../assets/39ea7d28f130f469c4f0e8bd9aee8c23.png) 2 2, default !important;
    cursor: -webkit-image-set(url(../assets/39ea7d28f130f469c4f0e8bd9aee8c23.png) 1x, url(../assets/e9292647f12346f9763ebeb00d85ee3a.png) 2x) 2 2, default !important;
  }
  html.cur-grabbing,
  html.cur-grabbing *,
  .il .cur-grabbing,
  .il .cur-grabbing * {
    cursor: url(../assets/df1a1ee7ac06b4a47fbaa5a7cc8d9b99.png) 16 8, grabbing !important;
    cursor: -webkit-image-set(url(../assets/df1a1ee7ac06b4a47fbaa5a7cc8d9b99.png) 1x, url(../assets/ee63209d8d2dabcc34f0c9f2a868d9e5.png) 2x) 16 8, grabbing !important;
  }
}

/* Reduced motion: reveals show their final text (Main skips the page shutter) */
@media (prefers-reduced-motion: reduce) {
  .pixel-reveal {
    visibility: visible !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}

/* Utilities (last, so they win at equal specificity) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.normal-case {
  text-transform: none; /* for caption classes and button faces */
}

/* Pixel icons: the 20px Higgsfield set (white with copper) in one sprite. <span class="ico ico--live">,
   shown at 20px or, with .ico--40, at 40px; always whole-pixel steps */
.ico {
  display: inline-block;
  flex: none;
  width: 20px;
  height: 20px;
  background: url(../assets/e3491ba56ae39ff717248cb6851a4943.png) 0 0 / 1600% 100% no-repeat;
  image-rendering: pixelated;
}
.ico--40 { width: 40px; height: 40px; }
.ico--launch { background-position: 0% 0; }
.ico--fuel { background-position: 6.6667% 0; }
.ico--planner { background-position: 13.3333% 0; }
.ico--squad { background-position: 20% 0; }
.ico--build { background-position: 26.6667% 0; }
.ico--live { background-position: 33.3333% 0; }
.ico--report { background-position: 40% 0; }
.ico--site { background-position: 46.6667% 0; }
.ico--ledger { background-position: 53.3333% 0; }
.ico--link { background-position: 60% 0; }
.ico--wave { background-position: 66.6667% 0; }
.ico--check { background-position: 73.3333% 0; }
.ico--explore { background-position: 80% 0; }
.ico--wallet { background-position: 86.6667% 0; }
.ico--growth { background-position: 93.3333% 0; }
.ico--time { background-position: 100% 0; }

/* Animated agents: the capsule bots from the build view as a CSS sprite (cells of 26 art px, frames
   stepped by background-position). --s is the cell size on screen (26px = 1x, 52px = 2x, 78px = 3x). */
.bot {
  --s: 52px;
  display: inline-block;
  flex: none;
  width: var(--s);
  height: var(--s);
  background: url(../assets/c94c0aaa029c01e09042d10423e9ea12.png) 0 0 / calc(var(--s) * 4) calc(var(--s) * 5) no-repeat;
  image-rendering: pixelated;
  animation: bot-4 0.6s steps(4) infinite;
}
.bot--x1 { --s: 26px; }
.bot--x3 { --s: 78px; }
.bot--carry { background-position-y: calc(var(--s) * -1); }
.bot--hammer { background-position-y: calc(var(--s) * -2); animation: bot-3 0.45s steps(3) infinite; }
.bot--flag { background-position-y: calc(var(--s) * -3); animation: bot-3 0.6s steps(3) infinite; }
.bot--lantern { background-position-y: calc(var(--s) * -4); animation: bot-2 0.8s steps(2) infinite; }
.bot--still { animation: none; }
@keyframes bot-4 { from { background-position-x: 0; } to { background-position-x: calc(var(--s) * -4); } }
@keyframes bot-3 { from { background-position-x: 0; } to { background-position-x: calc(var(--s) * -3); } }
@keyframes bot-2 { from { background-position-x: 0; } to { background-position-x: calc(var(--s) * -2); } }
@media (prefers-reduced-motion: reduce) {
  .bot { animation: none; }
}