/* Loadout: Glex's collection, styled as a game's select screen.
   Tokens first, then chrome (bar), the rail and its objects, the plates,
   then phone and reduced-motion overrides. Motion is transform, opacity and
   clip-path only. */

:root {
  color-scheme: dark;
  --sc-canvas: #000000;
  --sc-surface: #0D0D0D;
  --sc-ink: #F2F2F2;
  --sc-ink-soft: #8C8C8C;
  --sc-accent: #FE5105;
  --sc-accent-ink: #000000;
  --g1: #0D0D0D;
  --g2: #1C1C1C;
  --g3: #8C8C8C;
  --g-line: #262626;
  --sc-hairline: #1C1C1C;
  --sc-font-display: "Saira", "Arial Narrow", system-ui, sans-serif;
  --sc-font-text: "Barlow", system-ui, sans-serif;
  --sc-shadow-color: 0 0% 0%;

  --bar-h: 64px;
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --slab-w: 720px;
  --slab-h: 450px;
  --gap: 80px;
  --title-w: 360px;
  --cut-a: 70%;
  --cut-b: 38%;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
}

html { background: var(--sc-canvas); }
body {
  background: var(--sc-canvas);
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1.6;
}
::selection { background: var(--sc-accent); color: #000; }
a { color: var(--sc-ink); text-decoration-color: var(--sc-accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: #fff; text-decoration-thickness: 2.5px; }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
button { font: inherit; color: inherit; }

.skip {
  position: fixed; left: 12px; top: 12px; z-index: 100;
  padding: 10px 14px; background: var(--sc-accent); color: #000; font-weight: 600;
  transform: translateY(-160%);
}
.skip:focus-visible { transform: none; outline-color: #fff; }

/* ------------------------------------------------------------ the slash cut
   White above, orange below, one diagonal through the type, as on the banner. */
.cut { position: relative; display: inline-block; }
.cut__o {
  position: absolute; inset: 0;
  color: var(--sc-accent);
  clip-path: polygon(0 var(--cut-a), 100% var(--cut-b), 100% 100%, 0 100%);
  pointer-events: none;
}
.cut__line {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
}
.cut__line line { stroke: var(--sc-accent); stroke-width: 1.5px; vector-effect: non-scaling-stroke; stroke-linecap: square; }

/* ------------------------------------------------------- corner brackets
   L corners; top-right and bottom-left carry the short double dash. */
.brk { position: absolute; inset: -12px; pointer-events: none; z-index: 2; }
.brk i {
  position: absolute; width: 30px; height: 30px;
  border: 0 solid var(--brk, #3A3A3A);
  transition: border-color 180ms var(--ease);
}
.brk i::before, .brk i::after {
  content: ""; position: absolute; height: 2px; background: var(--brk, #3A3A3A);
  transition: background-color 180ms var(--ease);
}
.brk i:nth-child(1) { left: 0; top: 0; border-top-width: 2px; border-left-width: 2px; }
.brk i:nth-child(2) { right: 0; top: 0; border-top-width: 2px; border-right-width: 2px; }
.brk i:nth-child(3) { left: 0; bottom: 0; border-bottom-width: 2px; border-left-width: 2px; }
.brk i:nth-child(4) { right: 0; bottom: 0; border-bottom-width: 2px; border-right-width: 2px; }
.brk i:nth-child(1)::before, .brk i:nth-child(1)::after,
.brk i:nth-child(4)::before, .brk i:nth-child(4)::after { display: none; }
.brk i:nth-child(2)::before { right: 7px; top: 7px; width: 13px; }
.brk i:nth-child(2)::after  { right: 7px; top: 12px; width: 8px; }
.brk i:nth-child(3)::before { left: 7px; bottom: 7px; width: 13px; }
.brk i:nth-child(3)::after  { left: 7px; bottom: 12px; width: 8px; }
.brk.is-lit, .obj.is-match .brk { --brk: var(--sc-accent); }

/* ===================================================================== BAR */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  height: var(--bar-h);
  display: flex; align-items: stretch;
  background: #000;
  border-bottom: 1px solid var(--g2);
}
.bar__mark {
  display: flex; align-items: center;
  padding: 0 clamp(14px, 2vw, 28px) 0 var(--gutter);
  border-right: 1px solid var(--g2);
  flex: 0 0 auto;
}
.bar__mark img { height: 26px; width: auto; display: block; }
.bar__index { flex: 1 1 auto; min-width: 0; display: flex; }
.slots {
  position: relative;
  display: flex; align-items: stretch;
  list-style: none; margin: 0; padding: 0 clamp(6px, 1vw, 14px);
  min-width: 0;
}
.slots > li { display: flex; }
.slot {
  position: relative; isolation: isolate;
  display: flex; align-items: center; gap: 10px;
  padding: 0 clamp(10px, 1.2vw, 20px);
  color: var(--g3);
  text-decoration: none;
  font-weight: 600; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  white-space: nowrap;
  transition: color 160ms var(--ease);
}
.slot::before {
  content: ""; position: absolute; inset: 13px 3px; z-index: -1;
  transform: skewX(-14deg);
  background: var(--g1);
  border: 1px solid var(--g2);
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease);
}
.slot:hover { color: var(--sc-ink); }
.slot:hover::before { border-color: #3A3A3A; }
.slot:active::before { transform: skewX(-14deg) translateY(1px); }
.slot:focus-visible { outline-offset: -6px; }
.slot.is-active { color: var(--sc-ink); }
.slot.is-active::before { border-color: var(--sc-accent); background: #160800; }
.slot kbd {
  display: inline-grid; place-items: center;
  width: 20px; height: 20px;
  font: 600 0.68rem/1 var(--sc-font-text); letter-spacing: 0;
  color: var(--g3);
  border: 1px solid #333; border-bottom-width: 2px;
  background: #050505;
}
.slot.is-active kbd { color: var(--sc-accent); border-color: var(--sc-accent); }
.slot__pip {
  width: 7px; height: 7px; background: var(--sc-accent);
  transform: skewX(-14deg) scale(0);
  transition: transform 180ms var(--ease);
}
.slot.is-match { color: var(--sc-ink); }
.slot.is-match .slot__pip { transform: skewX(-14deg) scale(1); }
.slots__marker {
  position: absolute; left: 0; bottom: -1px;
  width: 100px; height: 3px;
  transform-origin: 0 50%;
  pointer-events: none;
  transition: opacity 200ms var(--ease);
}
.slots__marker i { display: block; width: 100%; height: 100%; background: var(--sc-accent); }
.slots__marker.is-off { opacity: 0; }

.slot--ask {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 0 calc(var(--gutter) * 0.6 + 18px) 0 26px;
  color: #000;
}
.slot--ask::before { background: var(--sc-accent); border-color: var(--sc-accent); inset: 12px calc(var(--gutter) * 0.6) 12px 8px; }
.slot--ask:hover { color: #000; }
.slot--ask:hover::before { background: #FF6A25; border-color: #FF6A25; }
.slot--ask.is-active::before { background: var(--sc-ink); border-color: var(--sc-ink); }
.slot--ask.is-active { color: #000; }
.slot--ask:focus-visible { outline-color: var(--sc-ink); }

/* ==================================================================== RAIL */
#rail { position: relative; }
.stage {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  padding-top: var(--bar-h);
  background: transparent;
}

/* filter row */
.filter {
  display: flex; align-items: center; gap: 14px;
  padding: 16px var(--gutter) 0;
  min-width: 0;
}
.filter__label, .spec dt, .caps li, .native-note, .plate__note-key {
  font-weight: 600; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.filter__label { color: var(--g3); flex: 0 0 auto; }
.chips { display: flex; gap: 6px; min-width: 0; }
.chip {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 14px 0 12px;
  border: 0; cursor: pointer;
  background: #141414;
  color: var(--sc-ink);
  font-weight: 600; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
  transition: background-color 150ms var(--ease), color 150ms var(--ease), transform 120ms var(--ease);
}
.chip:hover { background: #222; }
.chip:active { transform: translateY(1px); }
.chip:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--sc-accent); }
.chip[aria-pressed="true"] { background: var(--sc-accent); color: #000; }
.chip[aria-pressed="true"]:focus-visible { box-shadow: inset 0 0 0 2px #fff; }
.chip__n {
  font-variant-numeric: tabular-nums; font-size: 0.7rem;
  color: var(--g3);
  min-width: 1ch;
}
.chip[aria-pressed="true"] .chip__n { color: #000; }

.filter__nav { margin-left: auto; display: flex; align-items: center; gap: 6px; min-width: 0; }
.filter__status {
  margin: 0 8px 0 0; font-size: 0.85rem; line-height: 1.35; color: var(--g3);
  text-align: right; white-space: nowrap;
}
.filter__status strong { color: var(--sc-ink); font-weight: 600; }
.mbtn {
  width: 32px; height: 32px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: #141414; border: 0; cursor: pointer;
  transition: background-color 150ms var(--ease), transform 120ms var(--ease);
}
.mbtn svg { width: 14px; height: 14px; fill: none; stroke: var(--sc-ink); stroke-width: 2; }
.mbtn:hover:not(:disabled) { background: var(--sc-accent); }
.mbtn:hover:not(:disabled) svg { stroke: #000; }
.mbtn:active:not(:disabled) { transform: translateY(1px); }
.mbtn:disabled { cursor: default; opacity: 0.35; }

/* the rail itself */
.rail-wrap {
  position: relative;
  min-height: 0;
  display: flex; align-items: center;
}
.rail {
  position: relative;
  display: flex; align-items: flex-start;
  gap: var(--gap);
  padding: 22px 0 18px;
}
/* the track line the objects hang from */
.rail::before {
  content: ""; position: absolute; left: 0; right: 0; top: 34px; height: 1px;
  background: var(--g2);
}
.rail__space { flex: 0 0 auto; width: 0; height: 1px; }

.title-plate {
  position: absolute; left: var(--gutter); top: 120px;
  width: var(--title-w);
  z-index: 3;
  will-change: transform;
}
.title__who {
  margin: 0 0 12px;
  font-family: var(--sc-font-display); font-style: italic; font-weight: 800; font-stretch: 112%;
  font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sc-accent);
}
.title {
  margin: 0 0 18px;
  font-family: var(--sc-font-display); font-style: italic; font-weight: 700; font-stretch: 100%;
  font-size: clamp(1.5rem, 1.95vw, 2.15rem);
  line-height: 1.12;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.title__sub {
  margin: 0; max-width: 32ch;
  font-size: 1rem; line-height: 1.55; color: #A6A6A6;
  text-wrap: pretty;
}

.obj { flex: 0 0 auto; width: var(--obj-w, var(--slab-w)); position: relative; }
.rail .obj__fig { margin-inline: auto; }
.obj__top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 26px; margin-bottom: 16px;
}
.caps { display: flex; gap: 5px; list-style: none; margin: 0; padding: 0; flex-wrap: nowrap; min-width: 0; }
.caps li {
  padding: 4px 9px 3px;
  color: var(--g3);
  background: #000;
  border: 1px solid var(--g2);
  white-space: nowrap;
  transition: background-color 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease);
}
.caps li.is-hit { background: var(--sc-accent); border-color: var(--sc-accent); color: #000; }
.native-note { color: var(--g3); white-space: nowrap; }

.views { display: flex; gap: 2px; }
.view {
  height: 26px; padding: 0 11px;
  background: #0D0D0D; border: 1px solid var(--g2); cursor: pointer;
  color: var(--g3);
  font-weight: 600; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  transition: color 150ms var(--ease), border-color 150ms var(--ease), background-color 150ms var(--ease);
}
.view:hover { color: var(--sc-ink); border-color: #3A3A3A; }
.view[aria-pressed="true"] { color: var(--sc-ink); border-color: var(--sc-accent); background: #160800; }
.view:active { transform: translateY(1px); }

.obj__fig {
  position: relative; margin: 0;
  width: var(--slab-w); height: var(--slab-h);
  transform-origin: 50% 45%;
  will-change: transform;
}
.slab {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  background: #050505;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 18px 40px -18px rgba(0,0,0,0.9), 0 2px 6px rgba(0,0,0,0.6);
  outline: 1px solid var(--g2); outline-offset: -1px;
  transition: opacity 220ms var(--ease);
}
.slab__dither {
  position: absolute; inset: 0; width: 100%; height: 100%;
  image-rendering: pixelated;
  display: none;
}
.slab__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0;
  -webkit-mask-size: 24px 24px; mask-size: 24px 24px;
  -webkit-mask-repeat: repeat; mask-repeat: repeat;
  -webkit-mask-position: 0 0; mask-position: 0 0;
}
.dev-on .slab__dither { display: block; }

/* Beef Creative: her art is already dithered, so it is never resampled. */
.slab--native { background: #0A0A0A; }
.slab__img--native {
  inset: auto; left: 0; top: 0;
  width: 1440px; height: 900px; max-width: none;
  object-fit: none;
  image-rendering: pixelated;
  will-change: transform;
}

.slab--empty {
  background:
    repeating-linear-gradient(-56deg, transparent 0 14px, rgba(255,255,255,0.035) 14px 15px),
    #050505;
  outline: 1px dashed #3A3A3A;
  display: flex; align-items: flex-end;
}
.slab__empty {
  margin: 0; padding: 22px 26px;
  font-family: var(--sc-font-display); font-style: italic; font-weight: 800; font-stretch: 112%;
  font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--g3);
}

/* filter state on objects */
.obj.is-miss .slab { opacity: 0.32; }

/* labels: one schema, identical on every object */
.label { margin-top: 22px; }
.name {
  margin: 0 0 12px;
  font-family: var(--sc-font-display); font-style: italic; font-weight: 850; font-stretch: 112%;
  font-size: clamp(1.55rem, 2.1vw, 2.35rem);
  line-height: 0.98;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
.name .cut { padding-right: 0.06em; }
.name--soft { color: var(--g3); }
.spec { margin: 0; }
.spec__row {
  display: grid; grid-template-columns: 7.4rem minmax(0, 1fr); gap: 14px;
  padding: 6px 0 5px;
  border-top: 1px solid var(--g2);
}
.spec__row:last-child { border-bottom: 1px solid var(--g2); }
.spec dt { color: var(--g3); padding-top: 0.22em; }
.spec dd { margin: 0; font-size: 0.94rem; line-height: 1.42; color: var(--sc-ink); text-wrap: pretty; }
.spec dd.soft { color: #A6A6A6; }
.num {
  font-family: var(--sc-font-display); font-style: italic; font-weight: 800; font-stretch: 108%;
  font-variant-numeric: tabular-nums;
  color: var(--sc-accent); font-size: 1.12em; letter-spacing: 0.01em;
}
.st {
  display: inline-block; width: 8px; height: 8px; margin: 0 9px 0 1px;
  vertical-align: 0.06em;
  background: var(--sc-accent);
  transform: skewX(-14deg);
}
.st--private { background: transparent; box-shadow: inset 0 0 0 1.5px var(--g3); }
.st--role { width: 4px; height: 12px; vertical-align: -0.1em; }
.empty__note { margin: 0 0 12px; color: #A6A6A6; font-size: 0.94rem; max-width: 34ch; }

/* ================================================================== PLATES */
.act { position: relative; padding: clamp(4rem, 8vw, 7rem) var(--gutter); background: #000; }

.plate {
  position: relative;
  max-width: 82rem; margin: 0 auto;
  padding: clamp(1.75rem, 4vw, 3.5rem);
  background: #080808;
  outline: 1px solid var(--g2);
}
.brk--plate { inset: -1px; --brk: var(--sc-accent); }
.brk--plate i { width: 44px; height: 44px; }
.perks .brk--plate i {
  transform: scale(calc(0.35 + 0.65 * min(1, var(--sc-p, 1) * 3)));
}
.brk--plate i:nth-child(1) { transform-origin: 0 0; }
.brk--plate i:nth-child(2) { transform-origin: 100% 0; }
.brk--plate i:nth-child(3) { transform-origin: 0 100%; }
.brk--plate i:nth-child(4) { transform-origin: 100% 100%; }

.plate__head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.plate__title {
  margin: 0 0 10px;
  font-family: var(--sc-font-display); font-style: italic; font-weight: 850; font-stretch: 115%;
  font-size: clamp(2.3rem, 4.4vw, 3.8rem); line-height: 0.95; text-transform: uppercase;
}
.plate__note { margin: 0; color: #A6A6A6; max-width: 52ch; }

.perks__list { list-style: none; margin: 0; padding: 0; }
.perk {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(11rem, 0.9fr) minmax(0, 2.4fr) 11rem;
  gap: 8px 24px; align-items: start;
  padding: 20px 0;
}
/* the row rule wipes in from the left as the plate arrives: decoration only */
.perk::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--g2);
  clip-path: inset(0 calc((1 - min(1, var(--sc-p, 1) * 2.4)) * 100%) 0 0);
}
.perk__icon { width: 32px; height: 32px; fill: none; stroke: var(--sc-accent); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: square; margin-top: 2px; }
.perk__name {
  margin: 0; padding-top: 3px;
  font-family: var(--sc-font-display); font-style: italic; font-weight: 800; font-stretch: 108%;
  font-size: 1.3rem; line-height: 1.1; text-transform: uppercase;
  text-wrap: balance;
}
.perk__desc { margin: 0 0 8px; font-size: 0.96rem; line-height: 1.5; max-width: 60ch; text-wrap: pretty; }
.spec--perk .spec__row { grid-template-columns: 6rem minmax(0, 1fr); }
.spec--perk .spec__row:last-child { border-bottom: 0; }
.perk__mark {
  justify-self: end;
  height: 32px; padding: 0 14px;
  background: transparent; border: 0; cursor: pointer;
  box-shadow: inset 0 0 0 1px #3A3A3A;
  color: var(--sc-ink);
  font-weight: 600; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  white-space: nowrap;
  transition: box-shadow 150ms var(--ease), color 150ms var(--ease), transform 120ms var(--ease);
}
.perk__mark:hover { box-shadow: inset 0 0 0 1px var(--sc-accent); color: #fff; }
.perk__mark:active { transform: translateY(1px); }
.perk__mark--none { box-shadow: none; }

/* about */
.about__grid {
  max-width: 82rem; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 7vw, 7rem); align-items: center;
}
.about__fig { margin: 0; overflow: hidden; aspect-ratio: 1; max-width: 26rem; justify-self: end; width: 100%; }
.about__fig img { width: 100%; height: 112%; object-fit: cover; display: block; margin-top: -6%; }
.label--about { margin: 0; max-width: 40rem; }
.name--xl { font-size: clamp(2.8rem, 6vw, 5rem); margin-bottom: 18px; }
.about__say {
  margin: 26px 0 0; max-width: 36ch;
  font-size: clamp(1.1rem, 1.4vw, 1.3rem); line-height: 1.5; color: var(--sc-ink);
  text-wrap: pretty;
}

/* inquiry: the ask, typeset as the collection's last label */
.inquiry { padding-bottom: clamp(2rem, 4vw, 3rem); }
.obj--ask {
  width: auto; max-width: 82rem; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: clamp(2rem, 5vw, 5rem);
}
.obj--ask .obj__top { grid-column: 1 / -1; }
.obj--ask .obj__fig { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.obj--ask .label { margin-top: 0; align-self: center; }
.obj--ask .name { font-size: clamp(2.6rem, 5vw, 4.4rem); }
.caps--all { flex-wrap: wrap; }
.caps--all li { color: var(--sc-ink); border-color: #333; }
.slab--ask { align-items: flex-end; }
.ask__line {
  margin: 0; padding: clamp(18px, 3vw, 34px);
  max-width: 22ch;
  font-family: var(--sc-font-display); font-style: italic; font-weight: 800; font-stretch: 110%;
  font-size: clamp(1.35rem, 2.3vw, 2.2rem); line-height: 1.02; text-transform: uppercase;
  color: var(--sc-ink);
}
.spec__row--contact dd { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.email {
  font-family: var(--sc-font-display); font-style: italic; font-weight: 700; font-stretch: 104%;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem); letter-spacing: 0.01em;
  user-select: all;
}
.contact__btns { display: inline-flex; gap: 8px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; min-width: 5.5rem; padding: 0 16px;
  background: var(--sc-accent); color: #000; border: 0; cursor: pointer;
  font-weight: 600; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
  transition: background-color 150ms var(--ease), color 150ms var(--ease), transform 120ms var(--ease);
}
.btn:hover { background: #FF6A25; color: #000; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px #fff; }
.btn[data-state="ok"] { background: var(--sc-ink); }
.btn[data-state="fail"] { background: #3A3A3A; color: var(--sc-ink); }
.btn--ghost { background: transparent; color: var(--sc-ink); box-shadow: inset 0 0 0 1px #5A5A5A; }
.btn--ghost:hover { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px var(--sc-accent); }
.btn--ghost:focus-visible { box-shadow: inset 0 0 0 2px var(--sc-accent); }
.copy-status { flex-basis: 100%; min-height: 1.3em; font-size: 0.85rem; color: #A6A6A6; }

.foot {
  max-width: 82rem; margin: clamp(4rem, 8vw, 6rem) auto 0;
  padding-top: 22px; border-top: 1px solid var(--g2);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.foot__mark { height: 22px; width: auto; display: block; }
.foot__link { font-weight: 600; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--g3); }
.foot__link:hover { color: var(--sc-ink); }

/* hover-capable pointers only */
@media (hover: none) {
  .slot:hover::before { border-color: var(--g2); }
}

/* ============================================================ PHONE / NARROW */
@media (max-width: 820px) {
  :root { --gutter: 20px; }
  .bar { height: auto; flex-wrap: wrap; }
  .bar__mark { height: 50px; border-right: 0; padding-left: var(--gutter); }
  .bar__mark img { height: 22px; }
  .slot--ask { height: 50px; padding: 0 30px 0 22px; }
  .slot--ask::before { inset: 10px 14px 10px 6px; }
  .bar__index { order: 3; flex: 1 0 100%; height: 42px; border-top: 1px solid var(--g2); }
  .slots {
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -ms-overflow-style: none;
    padding: 0 8px;
    overscroll-behavior-x: contain;
  }
  .slots::-webkit-scrollbar { display: none; }
  .slot { padding: 0 14px; font-size: 0.72rem; }
  .slot::before { inset: 8px 2px; }
  .slot kbd { display: none; }

  .filter {
    display: grid; grid-template-columns: auto auto minmax(0, 1fr);
    padding-top: 12px; gap: 6px 6px;
  }
  .filter__label { display: none; }
  .filter__nav { display: contents; }
  .mbtn[data-step="-1"] { grid-column: 1; grid-row: 1; }
  .mbtn[data-step="1"] { grid-column: 2; grid-row: 1; }
  .chips {
    grid-column: 3; grid-row: 1;
    overflow-x: auto; scrollbar-width: none;
    margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter);
  }
  .chips::-webkit-scrollbar { display: none; }
  .filter__status {
    grid-column: 1 / -1; grid-row: 2;
    margin: 0; text-align: left; white-space: normal;
    font-size: 0.74rem; line-height: 1.35; min-height: 1.35em;
  }

  .title-plate { position: relative; left: auto; top: auto; width: auto; padding: 8px var(--gutter) 0; }
  .title__who { display: none; }
  .title { font-size: 1.12rem; margin: 0; line-height: 1.2; }
  .title__sub { display: none; }
  .rail .caps { display: none; }
  .obj__under { font-size: 0.7rem; }
  .stage .rail-wrap { display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); align-items: center; }
  .rail { padding: 14px 0 10px; }
  .rail::before { top: 26px; }
  .obj__top { margin-bottom: 12px; }
  .caps li { padding: 3px 7px 2px; font-size: 0.64rem; }
  .native-note { font-size: 0.62rem; }
  .label { margin-top: 16px; }
  .name { font-size: 1.5rem; margin-bottom: 8px; }
  .spec__row { grid-template-columns: 5.6rem minmax(0, 1fr); gap: 10px; padding: 5px 0 4px; }
  .spec dt { font-size: 0.64rem; }
  .spec dd { font-size: 0.86rem; line-height: 1.38; }

  .perk { grid-template-columns: 32px minmax(0, 1fr); gap: 10px 14px; }
  .perk__icon { width: 26px; height: 26px; }
  .perk .perk__body, .perk .perk__mark { grid-column: 2; }
  .perk__mark { justify-self: start; }
  .perk__mark--none { display: none; }
  .about__grid { grid-template-columns: minmax(0, 1fr); }
  .about__fig { max-width: 15rem; justify-self: start; }
  .obj--ask { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .obj--ask .obj__fig { aspect-ratio: 16 / 10; }
  .foot { flex-direction: row; }
}

/* ========================================================= REDUCED MOTION
   The rail becomes a strip you scroll sideways yourself; the act stops
   owning vertical scroll, so there is no dead span. Real images only. */
@media (prefers-reduced-motion: reduce) {
  #rail { height: auto !important; }
  #rail .stage { overflow: clip !important; }
  .rail-wrap {
    overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }
  .rail .obj { scroll-snap-align: center; }
  .title-plate { will-change: auto; }
  .obj__fig { transform: none !important; }
  .perks .brk--plate i { transform: none; }
  .perk::before { clip-path: none; }
  .chip, .btn, .mbtn, .slot::before, .view, .perk__mark { transition-duration: 1ms; }
}

/* short, wide screens: the label sits beside the slab */
html.is-side .rail .obj {
  width: auto;
  display: grid;
  grid-template-columns: var(--slab-w) var(--label-w);
  column-gap: 28px;
}
html.is-side .rail .obj__top { grid-column: 1; }
html.is-side .rail .obj__fig { grid-column: 1; grid-row: 2; }
html.is-side .rail .obj__under { grid-column: 1; grid-row: 3; }
html.is-side .rail .label { grid-column: 2; grid-row: 2 / span 2; margin-top: -6px; }
html.is-side .rail .spec__row { grid-template-columns: 6.6rem minmax(0, 1fr); gap: 10px; }
html.is-side .rail .spec dd { font-size: 0.88rem; line-height: 1.38; }



/* ============================================================ SITE PREVIEW
   A mini browser window holding the full-page capture. The page area only
   takes scroll input once it is armed: a real pointer move over it, a tap on
   the tap button, or keyboard focus. Unarmed, it is overflow: hidden, so the
   wheel and touch pass straight to the page and keep driving the rail. */
:root { --chrome-h: 30px; }
.pv { position: absolute; inset: 0; display: none; }
.obj[data-view="preview"] .pv { display: block; }
.obj[data-view="preview"].pv-ready .slab__img { display: none; }
.obj[data-view="preview"] .slab { transform: none !important; }
.pv__bar {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2;
  height: var(--chrome-h);
  display: flex; align-items: center; gap: 10px;
  padding: 0 10px;
  background: #0D0D0D;
  box-shadow: inset 0 -1px 0 var(--g2);
}
.pv__mark { width: 14px; height: 6px; background: var(--sc-accent); transform: skewX(-24deg); flex: 0 0 auto; }
.pv__url {
  flex: 1 1 auto; min-width: 0;
  height: calc(var(--chrome-h) - 10px);
  display: flex; align-items: center;
  padding: 0 10px;
  background: #000; box-shadow: inset 0 0 0 1px var(--g2);
  font-weight: 600; font-size: 0.74rem; letter-spacing: 0.02em; color: var(--sc-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pv__scroll {
  position: absolute; left: 0; right: 0; bottom: 0; top: var(--chrome-h);
  overflow: hidden;
  overscroll-behavior: auto;
  scrollbar-width: none;
  -webkit-mask-size: 24px 24px; mask-size: 24px 24px;
  -webkit-mask-repeat: repeat; mask-repeat: repeat;
  visibility: hidden;
  outline-offset: -3px;
}
.pv__scroll::-webkit-scrollbar { display: none; }
.pv-ready .pv__scroll { visibility: visible; }
.pv.is-armed .pv__scroll { overflow-y: auto; cursor: ns-resize; }
.pv--native.is-armed .pv__scroll { overflow: auto; cursor: move; }
.pv__img { display: block; width: 100%; height: auto; }
.pv--native .pv__img { width: 1280px; max-width: none; image-rendering: pixelated; }
.pv__thumb {
  position: absolute; right: 2px; top: var(--chrome-h); z-index: 2;
  width: 3px; height: 40px;
  background: var(--sc-accent);
  transform-origin: 0 0;
  opacity: 0;
  transition: opacity 200ms var(--ease);
  pointer-events: none;
}
.pv-ready .pv__thumb { opacity: 0.85; }
.pv__tap {
  position: absolute; left: 50%; bottom: 12px; z-index: 3;
  transform: translateX(-50%);
  display: none;
  height: 32px; padding: 0 14px;
  border: 0; cursor: pointer;
  background: var(--sc-accent); color: #000;
  font-weight: 600; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
}
.pv__tap:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px #fff; }
@media (hover: none), (pointer: coarse) {
  .obj.is-focus.pv-ready .pv:not(.is-armed) .pv__tap { display: block; }
}
.obj__under {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px;
  height: 20px; margin: 12px 0 0; overflow: hidden;
  font-size: 0.76rem; line-height: 20px; color: #A6A6A6;
}
.obj__under a { color: var(--sc-ink); font-weight: 600; }
@media (max-width: 820px) {
  :root { --chrome-h: 24px; }
  .pv__url { font-size: 0.66rem; }
  .obj__under { margin-top: 8px; gap: 0 8px; }
}

/* ================================================================ ROUND 3
   Copy v4 body text, the live preview player and hover-to-scroll. */

/* project body: two paragraphs between the Status row and the Link row */
.label__body { padding: 10px 0 2px; border-top: 1px solid var(--g2); }
.spec + .label__body { border-top: 0; }
.label__body p { margin: 0 0 8px; font-size: 0.9rem; line-height: 1.5; color: #CFCFCF; max-width: 66ch; text-wrap: pretty; }
.label__body p:last-child { margin-bottom: 8px; }
.spec--link .spec__row:first-child { border-top: 1px solid var(--g2); }
.spec .spec__row:last-child { border-bottom: 0; }
.spec--link .spec__row:last-child { border-bottom: 1px solid var(--g2); }
.label .spec:first-of-type .spec__row:last-child { border-bottom: 1px solid var(--g2); }

/* What I do */
.perk { grid-template-columns: 40px minmax(12rem, 0.8fr) minmax(0, 2.4fr); }
.perk__ex { margin: 0; font-size: 0.86rem; color: var(--g3); }
.perk__ex a { color: var(--sc-ink); font-weight: 600; }
.perk__ex.soft { color: #A6A6A6; }
.plate__foot { padding-top: 22px; border-top: 1px solid var(--g2); }

/* About */
.about__sub { margin: -6px 0 18px; color: var(--sc-accent); font-weight: 600; letter-spacing: 0.02em; }
.about__body p { margin: 0 0 14px; max-width: 58ch; font-size: clamp(1rem, 1.15vw, 1.1rem); line-height: 1.6; color: #D9D9D9; text-wrap: pretty; }
.about__body p:first-child { color: var(--sc-ink); font-weight: 600; }

/* Get in touch */
.slab--ask { display: grid; place-items: center; align-items: center; }
.ask__mark { width: min(62%, 420px); height: auto; opacity: 0.9; }
.obj--ask .ask__line {
  margin: 0 0 14px; padding: 0; max-width: none;
  font-size: clamp(1.15rem, 1.7vw, 1.55rem); text-transform: none; font-weight: 700; font-stretch: 100%;
}
.obj--ask .label__body { border-top: 0; padding-top: 0; }
.email { color: var(--sc-ink); text-decoration-color: var(--sc-accent); }
.btn#copy { min-width: 8rem; }
.copy-status { flex-basis: 100%; }
.foot__by { display: flex; align-items: center; gap: 12px; margin: 0; color: #A6A6A6; font-size: 0.86rem; }

/* live player: the URL bar says Live, the capture is the poster until load */
.pv__live { display: none; align-items: center; gap: 6px; flex: 0 0 auto; font-weight: 600; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink); }
.pv--live .pv__live { display: inline-flex; }
.pv__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sc-accent); }
.pv.is-loading .pv__dot { animation: pv-pulse 900ms var(--ease) infinite alternate; }
@keyframes pv-pulse { from { opacity: 1; } to { opacity: 0.25; } }
.pv--live .pv__scroll { overflow: hidden !important; }
.pv--live .pv__thumb { display: none; }
.pv__frame {
  position: absolute; left: 0; top: 0;
  width: 1280px; height: 900px;
  transform-origin: 0 0;
  background: #fff;
  opacity: 0;
  transition: opacity 260ms var(--ease);
  pointer-events: none;
}
.pv__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.pv.is-live-ready .pv__frame { opacity: 1; }
.pv.is-live-ready .pv__img { visibility: hidden; }
/* the 1280px native capture would keep the window scrollable sideways under the live frame */
.pv--native.is-live-ready .pv__img { display: none; }
/* only the focused preview takes input; neighbours at the edges never do */
@media (hover: hover) and (pointer: fine) {
  .obj.is-focus.pv-ready .pv__scroll { overflow-y: auto; }
  .obj.is-focus.pv-ready .pv--native .pv__scroll { overflow: auto; }
  .obj.is-focus .pv.is-live-ready .pv__frame { pointer-events: auto; }
}
.pv.is-armed.is-live-ready .pv__frame { pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .pv.is-loading .pv__dot { animation: none; } }

@media (max-width: 820px) {
  .label__body p { font-size: 0.84rem; line-height: 1.45; margin-bottom: 6px; }
  .perk { grid-template-columns: 32px minmax(0, 1fr); }
  .perk .perk__body { grid-column: 2; }
  .pv__live { font-size: 0.6rem; }
}

/* wide screens, label under the slab: facts on the left, the two paragraphs
   on the right, so long body text never pushes the slab smaller */
@media (min-width: 821px) {
  html:not(.is-side) .rail .label {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    grid-template-areas: "name name" "spec body" "spec link";
    grid-template-rows: auto auto 1fr;
    column-gap: 26px;
    align-items: start;
  }
  html:not(.is-side) .rail .label > .name { grid-area: name; }
  html:not(.is-side) .rail .label > .spec:not(.spec--link) { grid-area: spec; }
  html:not(.is-side) .rail .label > .label__body { grid-area: body; border-top: 1px solid var(--g2); padding-top: 9px; }
  html:not(.is-side) .rail .label > .spec--link { grid-area: link; }
  html:not(.is-side) .rail .label > .spec--link .spec__row:first-child { border-top: 0; }
  html:not(.is-side) .rail .spec__row { grid-template-columns: 5.6rem minmax(0, 1fr); gap: 10px; }
  html:not(.is-side) .rail .label > .spec--link .spec__row:first-child { border-top: 1px solid var(--g2); }
}
@media (min-width: 821px) {
  html:not(.is-side) .rail .label__body p { font-size: 0.86rem; line-height: 1.48; margin-bottom: 6px; }
}

/* Project names use each project's own logo, never the Glex display type */
.name--logo { line-height: 0; }
.name__logo { display: block; width: auto; max-width: min(100%, 300px); height: var(--logo-h, 40px); object-fit: contain; object-position: left center; }
.name--trim { --logo-h: 30px; }
.name--beef { --logo-h: 18px; }
.name--plain { font-family: var(--sc-font-text); font-style: normal; font-stretch: 100%; text-transform: none; font-weight: 600; font-size: clamp(1.5rem, 2vw, 1.9rem); letter-spacing: -0.01em; color: var(--sc-ink); }
@media (max-width: 820px) {
  .name__logo { height: calc(var(--logo-h, 40px) * 0.8); }
  .name--plain { font-size: 1.4rem; }
}