/* ==========================================================================
   Gleipnir — site
   Same law as the app: --tally is the only bold colour, and it is reserved
   for what is live or straining. The download button is bone, not orange,
   on purpose. Nothing on this page should compete with a lit tally.
   ========================================================================== */

:root {
  --chassis:   #16171a;
  --bay:       #1d1f23;
  --rack:      #24272c;
  --etch:      #33373e;
  --etch-soft: #262a30;

  --bone:   #e4e0d8;
  --bone-2: #a0a1a6;
  --faint:  #6b6d74;

  --tally: #ff5c38;
  --steel: #7f9cc4;
  --sage:  #7fa98c;

  --face: 'Saira Condensed', 'Avenir Next Condensed', 'Roboto Condensed', system-ui, sans-serif;
  --ui:   'Spline Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --data: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --gut: clamp(20px, 5vw, 56px);
  --r: 4px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--chassis);
  color: var(--bone-2);
  font: 400 16.5px/1.65 var(--ui);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

::selection { background: var(--tally); color: #12100f; }

:focus-visible { outline: 2px solid var(--steel); outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--bone); color: #12100f; padding: 10px 16px; z-index: 50;
}
.skip:focus { left: 8px; top: 8px; }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding-inline: var(--gut); }

.mono { font-family: var(--data); font-size: 0.86em; letter-spacing: -0.01em; }
.break { overflow-wrap: anywhere; }

/* --- silkscreen: the way equipment is marked --- */
.silk {
  font-family: var(--face);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0;
}

/* ---------- rail ---------- */

.rail {
  position: sticky; top: 0; z-index: 30;
  background: rgba(22, 23, 26, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--etch-soft);
}
.rail-in { display: flex; align-items: center; gap: 28px; height: 62px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand img { border-radius: var(--r); }
.brand-name {
  font-family: var(--face); font-weight: 700; font-size: 21px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--bone);
}
.rail-nav { display: flex; gap: 26px; margin-left: auto; }
.rail-nav a {
  font-family: var(--face); font-weight: 600; font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bone-2); text-decoration: none;
}
.rail-nav a:hover { color: var(--bone); }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--face); font-weight: 700; font-size: 17px;
  letter-spacing: 0.09em; text-transform: uppercase;
  background: var(--bone); color: #131316;
  padding: 13px 26px; border-radius: var(--r);
  text-decoration: none;
  transition: transform 120ms ease, background 120ms ease;
}
.btn:hover { background: #fff; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-sm { font-size: 13px; padding: 9px 16px; letter-spacing: 0.1em; }
.btn-lg { font-size: 19px; padding: 16px 30px; }

@media (prefers-reduced-motion: reduce) {
  .btn:hover { transform: none; }
}

/* ---------- hero ---------- */

.hero { padding: clamp(48px, 8vw, 104px) 0 clamp(56px, 8vw, 108px); }
.hero-in {
  display: grid; gap: clamp(40px, 5vw, 68px);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 940px) {
  /* Tops align: the headline and the shot start on the same line. */
  .hero-in { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
}

/* The hero runs wider than the rest of the page so the screenshot has room to
   be legible. Every other band stays at 1180. */
.hero .wrap { max-width: 1400px; }

.hero-copy h1 {
  font-family: var(--face); font-weight: 700;
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  line-height: 0.92; letter-spacing: 0.005em; text-transform: uppercase;
  color: var(--bone);
  margin: 0;
}
.lede {
  max-width: 42ch;
  margin: 22px 0 0;
  font-size: clamp(1.02rem, 1.4vw, 1.14rem);
  color: var(--bone-2);
}
.hero-cta { margin-top: 32px; }
.cta-note { margin: 12px 0 0; font-size: 13px; color: var(--faint); }

/* ---------- the tally wall (signature) ---------- */

.wall-frame {
  background: var(--bay);
  border: 1px solid var(--etch-soft);
  border-radius: 7px;
  padding: 10px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.45);
}
/* The hero shot sits in the frame the tile wall used to. */
.hero-shot {
  border-radius: var(--r);
  border: 1px solid var(--etch-soft);
}
.shot-note {
  margin: 12px 4px 2px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--faint);
}
.shot-note b { color: var(--bone-2); font-weight: 500; }

.wall-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 2px 4px 12px;
}
.wall-clock b { color: var(--tally); font-weight: 600; }

.wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 560px) { .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tile {
  position: relative; overflow: hidden;
  background: var(--rack);
  border: 1px solid #2c3037;
  border-radius: var(--r);
  padding: 11px 11px 13px;
  min-height: 92px;
  display: flex; flex-direction: column; gap: 6px;
  transition: background 260ms ease, border-color 260ms ease;
}
.tile-name {
  font-family: var(--data); font-size: 12px; color: var(--bone);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tile-proj {
  font-family: var(--face); font-weight: 600; font-size: 10px;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--faint);
}
.tile-state {
  margin-top: auto;
  display: flex; align-items: center; gap: 6px;
  font-family: var(--face); font-weight: 600; font-size: 10.5px;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--bone-2);
}
/* the tally strip: only a live tile lights it */
.tile::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--tally);
  transform: scaleX(0); transform-origin: left;
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tile[data-state="live"] { background: #2a2b2c; border-color: #4a3128; }
.tile[data-state="live"]::after { transform: scaleX(1); }
.tile[data-state="live"] .tile-state { color: var(--tally); }
.tile[data-state="strain"] { border-color: #4a3128; }
.tile[data-state="strain"] .tile-state { color: var(--tally); }
.tile[data-state="wait"] .tile-state { color: var(--steel); }
.tile[data-state="busy"] .tile-state { color: var(--sage); }
.tile[data-state="idle"] .tile-state { color: var(--faint); }
.tile[data-state="idle"] .tile-name { color: var(--bone-2); }

.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.tile[data-state="busy"] .dot { animation: pulse 1.6s ease-in-out infinite; }
.tile[data-state="wait"] .dot { animation: blink 1.15s steps(1, end) infinite; }
.tile[data-state="strain"] .dot { animation: blink 0.5s steps(1, end) infinite; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.28; } }
@keyframes blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0.15; } }

@media (prefers-reduced-motion: reduce) {
  .tile::after { transition: none; }
  .dot { animation: none !important; }
}


/* ---------- bands ---------- */

.band { padding: clamp(56px, 8vw, 104px) 0; border-top: 1px solid var(--etch-soft); }

.rule-label { margin-bottom: 34px; }

.sec-h {
  font-family: var(--face); font-weight: 700;
  font-size: clamp(2.1rem, 4.2vw, 3.3rem);
  line-height: 0.98; letter-spacing: 0.01em; text-transform: uppercase;
  color: var(--bone); margin: 0;
}
.sec-sub { max-width: 54ch; margin: 18px 0 0; color: var(--bone-2); }

.two { display: grid; gap: clamp(28px, 4vw, 60px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .two { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); } }

.big {
  font-family: var(--face); font-weight: 600;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  line-height: 1.06; letter-spacing: 0.01em;
  color: var(--bone); margin: 0;
  text-wrap: balance;
}
.prose p { margin: 0 0 18px; max-width: 62ch; }
.prose p:last-child { margin-bottom: 0; }
.prose .big { margin: 8px 0 20px; }
.prose .silk { margin-bottom: 12px; }

.note {
  border-left: 2px solid var(--steel);
  padding-left: 18px;
  color: var(--bone);
  font-size: 15.5px;
}

/* ---------- rack of modules ---------- */

.rack { margin-top: 48px; border-top: 1px solid var(--etch-soft); }

.unit {
  display: grid; gap: 6px 34px;
  grid-template-columns: minmax(0, 1fr);
  padding: 24px 8px;
  border-bottom: 1px solid var(--etch-soft);
  transition: background 140ms ease;
}
@media (min-width: 860px) {
  .unit { grid-template-columns: 190px minmax(0, 1fr) 230px; align-items: start; gap: 34px; }
}
.unit:hover { background: var(--bay); }
.unit h3 {
  font-family: var(--face); font-weight: 700; font-size: 1.5rem;
  letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--bone); margin: 0;
}
.unit p { margin: 0; max-width: 60ch; }
.unit .src {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--data); font-size: 11.5px; line-height: 1.5;
  color: var(--steel); overflow-wrap: anywhere;
}
.unit .src span { color: var(--faint); }

/* ---------- the name ---------- */

.band-name { background: var(--bay); }
.name-in {
  display: grid; gap: clamp(30px, 4vw, 56px);
  grid-template-columns: minmax(0, 1fr); align-items: center;
}
@media (min-width: 860px) { .name-in { grid-template-columns: 300px minmax(0, 1fr); } }
.wolf { border-radius: 8px; width: 100%; max-width: 300px; }

/* ---------- download ---------- */

.dl {
  margin-top: 40px;
  display: grid; gap: clamp(28px, 4vw, 52px);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 900px) { .dl { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }

.dl-main {
  background: var(--bay);
  border: 1px solid var(--etch-soft);
  border-radius: 7px;
  padding: clamp(24px, 3vw, 34px);
}
.dl-main .btn { margin: 16px 0 26px; }

.spec { margin: 0; display: grid; gap: 12px; }
.spec > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; align-items: baseline; }
.spec dt {
  font-family: var(--face); font-weight: 600; font-size: 10.5px;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--faint);
}
.spec dd { margin: 0; color: var(--bone-2); font-size: 13px; }

.side-block { margin-bottom: 34px; }
.side-block:last-child { margin-bottom: 0; }
.side-block p { margin: 12px 0 0; max-width: 52ch; font-size: 15.5px; }
.side-block pre {
  margin: 16px 0 0;
  background: var(--bay);
  border: 1px solid var(--etch-soft);
  border-left: 2px solid var(--etch);
  border-radius: var(--r);
  padding: 14px 16px;
  overflow-x: auto;
  color: var(--bone);
  font-size: 13px; line-height: 1.7;
}
.side-block code { font-family: var(--data); }

/* ---------- foot ---------- */

.foot { border-top: 1px solid var(--etch-soft); padding: 30px 0 44px; }
.foot-in {
  display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between;
  color: var(--faint); font-size: 12px;
}

/* ---------- narrow ---------- */

@media (max-width: 780px) {
  /* the rail keeps only its two jobs: say where you are, and hand over the app */
  .rail-nav { display: none; }
  .rail-in { gap: 16px; }
  .rail-in .btn-sm { margin-left: auto; }
}

@media (max-width: 480px) {
  body { font-size: 16px; }
  .brand-name { font-size: 19px; }
  .wall-frame { padding: 10px; }
  .wall { gap: 6px; }
  .tile { min-height: 84px; padding: 10px 9px 12px; }
  .spec > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .btn-lg { font-size: 16px; padding: 14px 20px; }
  .dl-main .btn { width: 100%; text-align: center; }
}

/* anchors land below the sticky rail, not under it */
[id] { scroll-margin-top: 78px; }

/* Coming soon / beta chips — quiet, never competing with a lit tally. */
.soon {
  display: inline-block;
  margin-left: 8px;
  font-family: var(--panel, 'Saira Condensed', sans-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone-2, #9a9b9f);
  border: 1px solid var(--etch, #383c44);
  border-radius: 3px;
  padding: 2px 7px;
  vertical-align: middle;
}

/* ---------- the deck (screenshots) ----------
   One stage, one shot at a time. The stage holds a fixed aspect ratio so
   switching never moves the page, and shots that are not that shape are
   letterboxed on the chassis rather than stretched. */

.deck { margin-top: 34px; }

/* tabs */
.deck-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--etch-soft);
  margin-bottom: 18px;
  overflow-x: auto;
  scrollbar-width: none;
}
.deck-tabs::-webkit-scrollbar { display: none; }

.deck-tabs button {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 8px;
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 9px 16px 11px;
  color: var(--faint);
  font: 600 12.5px/1 var(--face);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.16s ease, border-color 0.16s ease;
}
.deck-tabs button i {
  font: 400 10.5px/1 var(--data);
  font-style: normal;
  letter-spacing: 0;
  color: var(--etch);
  transition: color 0.16s ease;
}
.deck-tabs button:hover { color: var(--bone-2); }
.deck-tabs button:hover i { color: var(--faint); }
.deck-tabs button[aria-selected='true'] {
  color: var(--bone);
  border-bottom-color: var(--tally);
}
.deck-tabs button[aria-selected='true'] i { color: var(--tally); }

/* stage */
.deck-stage {
  position: relative;
  /* One box, every shot, whatever its own proportions are. The script used to
     retune this height per picture, which meant the page jumped under you on
     every advance. Shots that are not 16:10 letterbox inside it instead. */
  width: 100%;
  aspect-ratio: 16 / 10;
  max-height: 68vh;
  border: 1px solid var(--etch);
  border-radius: 8px;
  background:
    radial-gradient(120% 100% at 50% 0%, #1b1d21 0%, var(--chassis) 70%);
  overflow: hidden;
}
.deck-stage::after {
  /* a hairline inside the frame so the shot never touches the border */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  /* visibility has to sit in the transition too, held back until the fade is
     done. Left out, it flips to hidden on the first frame and the outgoing
     shot disappears instead of fading — which reads as a snap. */
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
.slide.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0s;
}
/* Absolute, not a centred grid item: a percentage height inside an
   auto-sized track resolves to auto, and the one portrait shot then fills
   the width and is cut off at the bottom. */
.slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* the read-out under the stage */
.deck-read {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  margin-top: 16px;
  min-height: 76px;   /* holds one to three lines so switching does not shove the page */
}
.deck-cap {
  display: none;
  flex: 1;
  margin: 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.62;
  color: var(--bone-2);
}
.deck-cap.is-on { display: block; animation: cap-in 0.5s ease both; }
@keyframes cap-in { from { opacity: 0 } to { opacity: 1 } }
.deck-cap b { color: var(--bone); font-weight: 600; }

.deck-nav {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  padding-top: 1px;
}
.deck-arrow {
  appearance: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid var(--etch-soft);
  border-radius: var(--r);
  color: var(--bone-2);
  font: 400 17px/1 var(--ui);
  cursor: pointer;
  transition: border-color 0.16s ease, color 0.16s ease;
}
.deck-arrow:hover { border-color: var(--etch); color: var(--bone); }
.deck-count {
  min-width: 42px;
  text-align: center;
  font: 400 11.5px/1 var(--data);
  color: var(--faint);
}
.deck-count b { color: var(--bone-2); font-weight: 400; }

@media (prefers-reduced-motion: reduce) {
  .slide,
  .deck-stage { transition: none; }
  .deck-cap.is-on { animation: none; }
}

@media (max-width: 720px) {
  .deck-tabs button { padding: 9px 12px 11px; font-size: 11.5px; }
  .deck-read { flex-direction: column; gap: 14px; }
  .deck-nav { align-self: flex-end; }
}

.unit h3 .soon { margin-left: 7px; vertical-align: 2px; }

/* A second lede line: the audit is a different promise from the fleet, so it
   gets its own sentence rather than a longer first one. */
.lede-2 { margin-top: 14px; color: var(--bone-2); }