/* ==========================================================================
   grantdenney.com
   Plain CSS, no build step. Tokens first, then layout, then components.
   ========================================================================== */

:root {
  /* ink + ground */
  --bg:        #0a0b0d;
  --bg-raise:  #111318;
  --bg-sunk:   #060709;
  --line:      #1e222a;
  --line-soft: #171a21;

  --text:      #f1f3f6;
  --text-mid:  #a8b0ba;
  --text-dim:  #6b7480;

  /* one accent, one signal */
  --accent:    #ff4a1c;
  --accent-lo: #ff4a1c1a;
  --signal:    #ffc531;

  --font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --wrap: 1180px;
  --gutter: clamp(20px, 5vw, 56px);

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;

  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* sticky nav shouldn't cover section headings */
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* height:auto is required, without it the width/height attributes on <img>
   win over aspect-ratio and the images render at their attribute height. */
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  font-weight: 600;
}

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

::selection { background: var(--accent); color: #fff; }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #fff;
  padding: 12px 18px;
  z-index: 200;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

/* ---------- eyebrow / section heads ------------------------------------- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--accent);
  flex: none;
}

.section {
  padding: clamp(72px, 11vw, 132px) 0;
  border-top: 1px solid var(--line-soft);
  position: relative;
}

.section__head { max-width: 720px; margin-bottom: clamp(36px, 6vw, 60px); }
.section__head h2 { font-size: clamp(30px, 4.6vw, 48px); }
.section__head p {
  color: var(--text-mid);
  font-size: clamp(16px, 1.6vw, 19px);
  margin: 18px 0 0;
}

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

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.nav[data-stuck="true"] {
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
}
.nav__in {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav__mark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
}
.nav__mark i {
  width: 9px;
  height: 9px;
  background: var(--accent);
  border-radius: 50%;
  flex: none;
  box-shadow: 0 0 0 4px var(--accent-lo);
}
.nav__links { display: flex; gap: 26px; align-items: center; }
.nav__links a {
  text-decoration: none;
  font-size: 14.5px;
  color: var(--text-mid);
  transition: color .2s;
  white-space: nowrap;
}
.nav__links a:hover { color: var(--text); }

.nav__cta {
  font-size: 14px;
  padding: 9px 17px;
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
  transition: border-color .2s, background .2s;
  white-space: nowrap;
}
.nav__cta:hover { border-color: var(--accent); background: var(--accent-lo); }

@media (max-width: 820px) {
  .nav__links { display: none; }
}

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

.hero {
  position: relative;
  padding: clamp(76px, 13vw, 148px) 0 clamp(60px, 9vw, 104px);
  overflow: hidden;
}
.hero::before {
  /* soft ember bloom behind the type */
  content: "";
  position: absolute;
  top: -22%;
  left: 50%;
  width: min(1100px, 130vw);
  aspect-ratio: 1;
  transform: translateX(-58%);
  background: radial-gradient(circle, #ff4a1c26 0%, #ff4a1c0d 38%, transparent 68%);
  pointer-events: none;
}
.hero::after {
  /* fine grid, keeps the dark from going flat */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 78px 78px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 32%, #000 0%, transparent 76%);
  opacity: .5;
  pointer-events: none;
}
.hero__in { position: relative; z-index: 1; }

.hero h1 {
  font-size: clamp(42px, 8.4vw, 92px);
  letter-spacing: -0.035em;
  margin: 0 0 10px;
}
.hero__role {
  font-family: var(--font-mono);
  font-size: clamp(12.5px, 1.5vw, 15px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mid);
  margin: 0 0 30px;
}
.hero__role b { color: var(--accent); font-weight: 500; }

.hero__lede {
  font-size: clamp(18px, 2.1vw, 23px);
  line-height: 1.5;
  color: var(--text);
  max-width: 700px;
  margin: 0 0 18px;
  letter-spacing: -0.011em;
}
.hero__sub {
  font-size: clamp(15.5px, 1.7vw, 17.5px);
  color: var(--text-mid);
  max-width: 640px;
  margin: 0 0 38px;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  border: 1px solid var(--line);
  transition: transform .2s var(--ease), border-color .2s, background .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn--primary:hover { background: #ff5c33; border-color: #ff5c33; }
.btn--ghost:hover { border-color: var(--text-dim); background: #ffffff08; }
.btn svg { width: 16px; height: 16px; }

/* location strip under the hero */
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 46px;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.hero__meta span { display: flex; align-items: center; gap: 8px; }
.hero__meta i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--signal); flex: none;
}

/* ---------- pillars ------------------------------------------------------ */

.pillars {
  display: grid;
  /* 4 pillars: 4-up, then 2x2, then stacked. auto-fit would give 3+1. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}
@media (max-width: 1040px) {
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .pillars { grid-template-columns: 1fr; }
}

.pillar {
  background: var(--bg);
  padding: 32px 28px;
  transition: background .3s var(--ease);
}
.pillar:hover { background: var(--bg-raise); }
.pillar h3 { font-size: 18px; margin-bottom: 12px; }
.pillar p { color: var(--text-mid); font-size: 15.5px; margin: 0; }
.pillar__n {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  letter-spacing: .1em;
  display: block;
  margin-bottom: 16px;
}

/* ---------- work cards --------------------------------------------------- */

.work { display: grid; gap: 26px; }

.card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--bg-raise), var(--bg-sunk));
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.card:hover { border-color: #2b313c; }

/* One column below 1040px, not 900px. Between ~900 and ~1040 the two columns
   DIVERGE rather than converge: the body gets taller as its column narrows
   while the images get shorter, so the gap reopens even with a full stack.
   Measured on the RealmForge card: 272px at 910px, 178px at 960px, 27px at
   1020px, 2px at 1100px. Collapsing to one column removes that band. */
@media (max-width: 1040px) {
  .card { grid-template-columns: 1fr; }
}

.card__body {
  padding: clamp(28px, 3.6vw, 44px);
  display: flex;
  flex-direction: column;
  /* without this the scrolling photo strip inside sets the card's width */
  min-width: 0;
}

.card__tag {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.card__live {
  color: #43d17c;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.card__live::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: #43d17c;
  box-shadow: 0 0 0 3px #43d17c22;
}

.card h3 { font-size: clamp(23px, 2.7vw, 30px); margin-bottom: 14px; }
.card__body > p { color: var(--text-mid); margin: 0 0 20px; font-size: 16px; }

.card__points {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  display: grid;
  gap: 10px;
}
.card__points li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  color: var(--text-mid);
  line-height: 1.5;
}
.card__points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 6px;
  height: 6px;
  border: 1px solid var(--accent);
  transform: rotate(45deg);
}
.card__points strong { color: var(--text); font-weight: 500; }

.stack {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: auto;
  padding-top: 4px;
}
.stack span {
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-dim);
}

.card__links { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 22px; }
.card__links a {
  font-size: 14.5px;
  text-decoration: none;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.card__links a:hover { border-bottom-color: var(--accent); }
.card__links svg { width: 13px; height: 13px; }

/* screenshot panel, works filled or empty */
.card__shot {
  position: relative;
  /* the scrolling stack inside would otherwise set this column's width */
  min-width: 0;
  background: var(--bg-sunk);
  border-left: 1px solid var(--line);
  min-height: 280px;
  display: grid;
  align-items: start;
  /* NOT overflow:hidden, that kills the sticky below. .card already clips. */
}
@media (max-width: 1040px) {
  .card__shot { border-left: 0; border-top: 1px solid var(--line); order: -1; min-height: 220px; }
}
/* <picture> is inline, so height:100% on the img never resolves and object-fit
   can't fill. Size the picture instead, keep the image at its true aspect, and
   let it ride down beside a long card body rather than floating mid-panel. */
.card__shot picture {
  display: block;
  width: 100%;
}
.card__shot img {
  width: 100%;
  height: auto;
  display: block;
}
.card__shot--pending {
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 32px 32px;
}
.shot-pending {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 24px;
}
.shot-pending b {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-mid);
  margin-top: 8px;
  font-weight: 500;
}

/* ---------- slider ------------------------------------------------------- */

.slider { position: relative; }

.slider__track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 20px;
  /* let slides bleed to the viewport edge on mobile */
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.slider__track::-webkit-scrollbar { height: 5px; }
.slider__track::-webkit-scrollbar-track { background: var(--line-soft); border-radius: 99px; }
.slider__track::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }
.slider__track::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }

.slide {
  flex: 0 0 min(620px, 82vw);
  scroll-snap-align: start;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  position: relative;
  cursor: zoom-in;
  transition: border-color .3s var(--ease);
}
.slide:hover { border-color: #2b313c; }

.slide figure { margin: 0; }
.slide img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--bg-sunk);
  transition: transform .6s var(--ease);
}
.slide:hover img { transform: scale(1.02); }

.slide figcaption {
  padding: 15px 18px 17px;
  font-size: 14.5px;
  color: var(--text-mid);
  border-top: 1px solid var(--line-soft);
  background: var(--bg-raise);
  display: flex;
  gap: 12px;
  align-items: baseline;
}
.slide figcaption b {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: .1em;
  flex: none;
}

.slider__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}
.slider__btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-mid);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s, opacity .2s;
  flex: none;
}
.slider__btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: var(--accent-lo); }
.slider__btn:disabled { opacity: .3; cursor: default; }
.slider__btn svg { width: 17px; height: 17px; }

.slider__progress {
  flex: 1;
  height: 2px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.slider__progress i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transform-origin: left;
  transition: transform .25s var(--ease), width .25s var(--ease);
}
.slider__count {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-dim);
  letter-spacing: .08em;
  flex: none;
  font-variant-numeric: tabular-nums;
}

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

.credits {
  display: grid;
  /* 6 credits. Column counts must divide 6, or a cell is left empty. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-top: clamp(40px, 6vw, 64px);
}
.credit { background: var(--bg); padding: 30px 26px; transition: background .3s var(--ease); }
.credit:hover { background: var(--bg-raise); }
.credit h4 {
  font-size: 16.5px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.credit h4 i { width: 6px; height: 6px; background: var(--signal); border-radius: 50%; flex: none; }
.credit p { margin: 0; font-size: 15px; color: var(--text-mid); }

/* ---------- metrics ------------------------------------------------------ */

.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}
.metric { background: var(--bg); padding: 28px 24px; }
.metric dt {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 12px;
}
.metric dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 38px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text);
}
.metric dd small {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0;
  color: var(--text-mid);
  margin-top: 10px;
  line-height: 1.45;
}

.serp {
  margin-top: clamp(38px, 5vw, 56px);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-sunk);
}
.serp__head {
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-raise);
}
.serp__head i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.serp ul { list-style: none; margin: 0; padding: 8px; display: grid; gap: 2px; }
.serp li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  font-size: 15px;
  transition: background .2s;
}
.serp li:hover { background: #ffffff06; }
.serp li code {
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--text);
  flex: 1;
  min-width: 0;
}
.serp li span {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: .06em;
  flex: none;
}

/* ---------- experience --------------------------------------------------- */

/* min-width:0 all the way down: the PURE Sets photo strip is a horizontally
   scrolling grid, and without this every ancestor sizes to its full content
   instead of letting it scroll, which widened the whole Experience section
   (and therefore every role, since .roles is one shared grid column) to
   552px at a 360px viewport. */
.roles { display: grid; gap: 0; min-width: 0; }

.role {
  display: grid;
  min-width: 0;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 32px;
  padding: 34px 0;
  border-top: 1px solid var(--line-soft);
  position: relative;
}
.role:first-child { border-top: 0; }

@media (max-width: 760px) {
  .role { grid-template-columns: 1fr; gap: 12px; }
}

.role > div { min-width: 0; }

.role__when {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .07em;
  color: var(--text-dim);
  text-transform: uppercase;
  padding-top: 5px;
}
.role h3 { font-size: 20px; margin-bottom: 5px; }
.role h3 em {
  font-style: normal;
  color: var(--accent);
}
.role__where {
  font-size: 14.5px;
  color: var(--text-dim);
  margin: 0 0 15px;
}
.role ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.role ul li {
  position: relative;
  padding-left: 19px;
  color: var(--text-mid);
  font-size: 15.5px;
}
.role ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 1px;
  background: var(--text-dim);
}

.quote {
  margin: 22px 0 0;
  padding: 22px 26px;
  border-left: 2px solid var(--accent);
  background: var(--bg-raise);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.quote p {
  margin: 0 0 12px;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--text);
  font-style: italic;
}
.quote footer {
  font-size: 13.5px;
  color: var(--text-dim);
  font-style: normal;
}
.quote footer b { color: var(--text-mid); font-weight: 500; }

/* ---------- toolbelt ----------------------------------------------------- */

.belt { display: grid; gap: 22px; }
.belt__row {
  display: grid;
  grid-template-columns: 175px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}
@media (max-width: 700px) {
  .belt__row { grid-template-columns: 1fr; gap: 10px; }
}
.belt__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 7px;
}
.belt__items { display: flex; flex-wrap: wrap; gap: 7px; }
.belt__items span {
  font-size: 14px;
  padding: 6px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-mid);
  transition: border-color .2s, color .2s;
}
.belt__items span:hover { border-color: var(--text-dim); color: var(--text); }

/* ---------- what I'm after ----------------------------------------------- */

.seek__say {
  font-size: clamp(21px, 2.9vw, 31px);
  line-height: 1.34;
  color: var(--text);
  max-width: 820px;
  margin: 0 0 clamp(34px, 5vw, 52px);
  padding-left: clamp(18px, 3vw, 28px);
  border-left: 2px solid var(--accent);
}
.seek {
  display: grid;
  /* 4 items: 4-up, then 2x2, then stacked, matching .pillars. auto-fit
     would leave one stranded on its own row at the middle widths. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-top: clamp(34px, 5vw, 52px);
}
/* These four carry real paragraphs rather than .pillars' single lines, so
   they need more width before four across stops being cramped. */
@media (max-width: 1200px) {
  .seek { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .seek { grid-template-columns: 1fr; }
}
.seek__item {
  background: var(--bg);
  padding: 30px 28px;
  min-width: 0;
  transition: background .3s var(--ease);
}
.seek__item:hover { background: var(--bg-raise); }
.seek__item p { color: var(--text-mid); font-size: 15.5px; margin: 0; }
.seek__k {
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent);
}

.seek__fine {
  margin: 18px 0 0;
  font-size: 14.5px;
  color: var(--text-dim);
  max-width: 640px;
}
.seek__proof { margin-top: clamp(30px, 4.5vw, 44px); max-width: 860px; }

/* Deep technical detail stays on the page but out of the first read: the
   same disclosure the search table already uses. */
.card__more { margin: 18px 0 0; }
.card__more summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--text-dim);
  list-style: none;
  transition: color .2s;
}
.card__more summary::-webkit-details-marker { display: none; }
.card__more summary::before { content: "B8  "; }
.card__more[open] summary::before { content: "BE  "; }
.card__more summary:hover { color: var(--text-mid); }
.card__more p {
  margin: 12px 0 0;
  color: var(--text-mid);
  font-size: 15px;
}

/* ---------- decision log -------------------------------------------------- */

.loop {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}
.loop__item {
  background: var(--bg);
  padding: 30px;
  display: grid;
  /* label beside the steps while there is room for both, stacked once there
     is not. A fixed first column keeps the three headings aligned. */
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}
@media (max-width: 880px) {
  .loop__item { grid-template-columns: 1fr; gap: 14px; padding: 26px 24px; }
}
.loop__k { margin: 0; font-size: 17px; line-height: 1.35; color: var(--text); font-weight: 500; }
.loop__v {
  margin: 9px 0 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  color: var(--accent);
}
/* "in review" is a status, not part of the version, so it reads quieter */
.loop__v em { font-style: normal; color: var(--text-dim); letter-spacing: .06em; }
.loop__steps { display: grid; gap: 11px; min-width: 0; }
.loop__steps p { margin: 0; color: var(--text-mid); font-size: 15.5px; }
.loop__steps b { color: var(--text); font-weight: 500; }

/* ---------- contact ------------------------------------------------------ */

.contact { text-align: center; }
.contact h2 { font-size: clamp(32px, 5.4vw, 56px); margin-bottom: 20px; }
.contact p {
  color: var(--text-mid);
  max-width: 560px;
  margin: 0 auto 36px;
  font-size: 17.5px;
}
.contact .hero__actions { justify-content: center; }

.foot {
  border-top: 1px solid var(--line-soft);
  padding: 30px 0 44px;
  font-size: 13.5px;
  color: var(--text-dim);
}
.foot__in {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  justify-content: space-between;
  align-items: center;
}
.foot a { color: var(--text-dim); text-decoration: none; transition: color .2s; }
.foot a:hover { color: var(--text); }
.foot nav { display: flex; gap: 20px; flex-wrap: wrap; }

/* ---------- lightbox ----------------------------------------------------- */

.lb {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: #05060899;
  backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 48px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s var(--ease);
}
.lb[data-open="true"] { opacity: 1; pointer-events: auto; }
/* Grid items default to min-width:auto, which stops the image shrinking
   below its intrinsic width and pushes it out of the overlay. */
.lb__stage {
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lb__img {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  transform: scale(.97);
  transition: transform .28s var(--ease);
  object-fit: contain;
}
.lb[data-open="true"] .lb__img { transform: scale(1); }
.lb__cap {
  margin-top: 18px;
  text-align: center;
  color: var(--text-mid);
  font-size: 15px;
  max-width: 640px;
}
.lb__close {
  position: absolute;
  top: clamp(14px, 3vw, 28px);
  right: clamp(14px, 3vw, 28px);
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg-raise);
  color: var(--text);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color .2s, color .2s;
}
.lb__close:hover { border-color: var(--accent); color: var(--accent); }
.lb__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-raise) 88%, transparent);
  color: var(--text);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color .2s, color .2s;
}
.lb__nav:hover { border-color: var(--accent); color: var(--accent); }
.lb__nav--prev { left: clamp(8px, 2vw, 26px); }
.lb__nav--next { right: clamp(8px, 2vw, 26px); }
.lb__nav svg, .lb__close svg { width: 19px; height: 19px; }

body[data-lb-open="true"] { overflow: hidden; }

/* ---------- reveal on scroll --------------------------------------------- */

/* Scoped to .js so the page stays fully readable if the script never runs. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .slider__track { scroll-behavior: auto; }
}

/* ---------- print (so the page prints as a usable one-pager) ------------- */

@media print {
  .nav, .slider__bar, .hero::before, .hero::after, .lb { display: none !important; }
  body { background: #fff; color: #000; }
  .section { border-color: #ddd; page-break-inside: avoid; }
  a { text-decoration: underline; }
}

/* ---------- cut template ------------------------------------------------- */

.template {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 52px);
  align-items: center;
  margin-top: clamp(40px, 6vw, 64px);
  padding: clamp(26px, 3.6vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--bg-raise), var(--bg-sunk));
}
@media (max-width: 880px) {
  .template { grid-template-columns: 1fr; }
}

.template__art {
  background: var(--bg-sunk);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: clamp(16px, 2.6vw, 30px);
  /* the drawing is wide and thin, let it breathe */
  display: grid;
  place-items: center;
}
.template__svg {
  width: 100%;
  height: auto;
  color: var(--accent);
  opacity: .92;
  /* hairlines at any size, without the stroke scaling with the viewBox */
  stroke-width: 4;
}

.template__meta {
  display: flex;
  gap: 8px 22px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.template__meta b { color: var(--accent); font-weight: 500; }

.template h3 { font-size: clamp(21px, 2.4vw, 27px); margin-bottom: 14px; }
.template p { color: var(--text-mid); margin: 0 0 16px; font-size: 15.5px; }
.template p:last-child { margin-bottom: 0; }

/* ---------- production range --------------------------------------------- */

.range {
  margin-top: clamp(36px, 5vw, 56px);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-sunk);
}
.range__head {
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-raise);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.range__head i { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); flex: none; }
.range__head b { color: var(--text-mid); font-weight: 500; letter-spacing: .06em; }

.range__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
}
.range__cell { background: var(--bg-sunk); padding: 22px 20px; }
.range__cell dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.range__cell dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.range__cell dd span {
  font-size: 13.5px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-mid);
}

/* ---------- sales proof -------------------------------------------------- */

.proof { display: grid; gap: 22px; }

.proof__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(20px, 3.4vw, 44px);
  padding: 28px 0;
  border-top: 1px solid var(--line-soft);
  align-items: start;
}
.proof__row:first-child { border-top: 0; padding-top: 8px; }
@media (max-width: 820px) {
  .proof__row { grid-template-columns: 1fr; gap: 12px; }
}

.proof__claim h3 { font-size: clamp(19px, 2.1vw, 23px); margin-bottom: 10px; }
.proof__claim p { margin: 0; color: var(--text-mid); font-size: 15.5px; }

.proof__evidence { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.proof__evidence li {
  display: grid;
  /* Fixed first column so the labels line up down the whole list;
     with `auto` each row sizes independently and the text goes ragged. */
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  font-size: 15.5px;
  color: var(--text-mid);
  line-height: 1.5;
}
.proof__evidence b {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
  padding-top: 2px;
}
.proof__evidence strong { color: var(--text); font-weight: 500; }

@media (max-width: 520px) {
  .proof__evidence li { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- training block ----------------------------------------------- */

.training {
  /* single column, no photo, and a stranger's course photo isn't ours to use */
  display: block;
  margin-top: clamp(40px, 6vw, 62px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(180deg, var(--bg-raise), var(--bg-sunk));
}
@media (max-width: 880px) {
  .training { grid-template-columns: 1fr; }
}
.training__body { padding: clamp(26px, 3.4vw, 42px); }
.training h3 { font-size: clamp(21px, 2.4vw, 27px); margin-bottom: 14px; }
.training p { color: var(--text-mid); margin: 0 0 16px; font-size: 15.5px; }
.training p:last-of-type { margin-bottom: 0; }
.training__courses {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line-soft);
}
.training__courses span {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-dim);
}
.training__shot {
  position: relative;
  background: var(--bg-sunk);
  border-left: 1px solid var(--line);
  min-height: 260px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
@media (max-width: 880px) {
  .training__shot { border-left: 0; border-top: 1px solid var(--line); min-height: 200px; }
}
.training__shot img { width: 100%; height: 100%; object-fit: cover; }
.training__shot.card__shot--pending {
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ---------- analytics chart ---------------------------------------------
   Categorical hues validated against the dark surface with the dataviz
   validator (lightness band, chroma, CVD separation, contrast): all pass.
   Fixed slot order, never cycled, never reassigned by rank.
   ------------------------------------------------------------------------ */

:root {
  --cat-model:    #f4571f;  /* model-specific queries */
  --cat-category: #23a891;  /* category queries */
  --cat-brand:    #8a7fe6;  /* branded queries */
}

.chart {
  margin: clamp(34px, 5vw, 52px) 0 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-sunk);
  overflow: hidden;
}

.chart__head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-raise);
}
.chart__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.chart__src {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 14px 20px 6px;
}
.chart__legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-mid);
}
.chart__legend i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: none;
  background: var(--swatch);
}

.chart__rows { padding: 10px 20px 20px; display: grid; gap: 2px; }

.chart__row {
  display: grid;
  grid-template-columns: minmax(96px, 168px) minmax(0, 1fr) 44px;
  align-items: center;
  gap: 14px;
  padding: 3px 0;
  position: relative;
}
@media (max-width: 620px) {
  .chart__row { grid-template-columns: minmax(84px, 40%) minmax(0, 1fr) 38px; gap: 10px; }
}

.chart__q {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-mid);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chart__track { display: block; height: 13px; }
.chart__track i {
  display: block;
  height: 100%;
  /* 4px rounded data-end, square against the baseline */
  border-radius: 0 4px 4px 0;
  background: var(--swatch);
  min-width: 3px;
}
.chart__v {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* hover / focus detail, impressions and position, without a permanent label */
.chart__row::after {
  content: attr(data-detail);
  position: absolute;
  left: 50%;
  bottom: calc(100% - 2px);
  transform: translate(-50%, 4px);
  background: var(--bg-raise);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11.5px;
  white-space: nowrap;
  padding: 7px 11px;
  border-radius: var(--r-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s var(--ease), transform .15s var(--ease);
  z-index: 5;
  box-shadow: 0 6px 20px #00000066;
}
.chart__row:hover::after,
.chart__row:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}
.chart__row:hover .chart__q { color: var(--text); }

.chart__note {
  margin: 0;
  padding: 0 20px 20px;
  font-size: 14.5px;
  color: var(--text-mid);
}
.chart__note b { color: var(--text); font-weight: 500; }

.chart details {
  border-top: 1px solid var(--line);
  padding: 14px 20px;
}
.chart summary {
  cursor: pointer;
  font-size: 13.5px;
  color: var(--text-dim);
  list-style: none;
}
.chart summary::-webkit-details-marker { display: none; }
.chart summary::before { content: "▸ "; }
.chart details[open] summary::before { content: "▾ "; }
.chart summary:hover { color: var(--text-mid); }
.chart table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 14px;
  font-size: 13.5px;
}
.chart th, .chart td {
  text-align: right;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line-soft);
  font-variant-numeric: tabular-nums;
}
.chart th:first-child, .chart td:first-child { text-align: left; font-family: var(--font-mono); font-size: 12.5px; }
.chart th {
  color: var(--text-dim);
  font-weight: 500;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.chart td { color: var(--text-mid); }

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

.ga { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
      background: var(--line-soft); border: 1px solid var(--line-soft);
      border-radius: var(--r-md); overflow: hidden; margin-top: clamp(30px, 4vw, 44px); }
.ga__cell { background: var(--bg); padding: 24px 22px; }
.ga__cell dt {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: 11px;
}
.ga__cell dd { margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ga__cell dd strong {
  font-family: var(--font-display); font-size: clamp(25px, 3vw, 32px);
  letter-spacing: -0.03em; line-height: 1; font-weight: 600; color: var(--text);
}
.ga__delta {
  font-family: var(--font-mono); font-size: 12.5px; color: #43d17c;
  display: inline-flex; align-items: center; gap: 3px;
}

/* ---------- about -------------------------------------------------------- */

.about {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.about__card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--bg-raise), var(--bg-sunk));
  padding: clamp(26px, 3.2vw, 38px);
  display: flex;
  flex-direction: column;
  transition: border-color .3s var(--ease);
}
.about__card:hover { border-color: #2b313c; }

.about__card h3 {
  font-size: clamp(20px, 2.2vw, 25px);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 11px;
}
.about__card h3 svg { width: 21px; height: 21px; color: var(--accent); flex: none; }
.about__card p { color: var(--text-mid); margin: 0 0 15px; font-size: 15.5px; }
.about__card p:last-of-type { margin-bottom: 0; }
.about__card strong { color: var(--text); font-weight: 500; }

.about__list {
  list-style: none;
  margin: 4px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line-soft);
  display: grid;
  gap: 11px;
}
.about__list li {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  font-size: 15px;
  color: var(--text-mid);
  line-height: 1.5;
}
.about__list b {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
@media (max-width: 520px) {
  .about__list li { grid-template-columns: 1fr; gap: 3px; }
}

.wrenched {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line-soft);
}
.wrenched span {
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-dim);
}

/* source line under a data block, says where the numbers came from */
.metrics__src {
  margin: 12px 0 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-dim);
}


/* an explicit, unglamorous limitation stated on a card */
.card__caveat {
  margin: 20px 0 0;
  padding: 14px 16px;
  border-left: 2px solid var(--text-dim);
  background: #ffffff06;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 14.5px;
  color: var(--text-dim);
  line-height: 1.5;
}

/* a product that ships under a second name */
.card__alias {
  margin: -8px 0 16px !important;
  font-size: 14px;
  color: var(--text-dim) !important;
}

/* ---------- photo strip inside an about card ---------------------------- */

.strip {
  min-width: 0;
  max-width: 100%;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(132px, 1fr);
  gap: 8px;
  margin: 20px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line-soft);
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.strip::-webkit-scrollbar { height: 4px; }
.strip::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }

.strip figure {
  margin: 0;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-sunk);
  cursor: zoom-in;
  transition: border-color .25s var(--ease);
}
.strip figure:hover { border-color: var(--accent); }
.strip img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--ease);
}
.strip figure:hover img { transform: scale(1.04); }
.strip figcaption {
  font-size: 11.5px;
  color: var(--text-dim);
  padding: 7px 9px 8px;
  line-height: 1.35;
  border-top: 1px solid var(--line-soft);
}

/* a quiet aside in an about card, said once, not dressed up */
.about__note {
  margin: 16px 0 0 !important;
  font-size: 15.5px;
  color: var(--text-mid);
}

/* ---------- live stats pulled from an API at page load ------------------- */

.live {
  display: grid;
  /* three stats + a full-width source row; auto-fit would leave a dead cell */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 22px 0 0;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}
.live > div { background: var(--bg-sunk); padding: 15px 16px; }
.live dt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.live dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.live dd small {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-dim);
  margin-top: 5px;
}

.live__src {
  grid-column: 1 / -1;
  background: var(--bg-raise) !important;
  padding: 10px 16px !important;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 9px;
}
.live__src i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-dim);
  flex: none;
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
/* only goes green once a fetch actually succeeded */
.live[data-live-ok="true"] .live__src i {
  background: #43d17c;
  box-shadow: 0 0 0 3px #43d17c22;
  animation: livePulse 2.4s ease-in-out infinite;
}
@media (max-width: 460px) {
  /* 3 stats: two columns would leave one cell empty, so stack them */
  .live { grid-template-columns: 1fr; }
}

@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 3px #43d17c22; }
  50%      { box-shadow: 0 0 0 6px #43d17c00; }
}
@media (prefers-reduced-motion: reduce) {
  .live[data-live-ok="true"] .live__src i { animation: none; }
}


/* ---------- grid column counts that always divide the item count ---------
   auto-fit picks whatever fits, which leaves a dead cell whenever the column
   count doesn't divide the number of items (4 items in 3 columns, 6 in 4).
   These grids have a fixed item count, so the breakpoints are explicit.
   ------------------------------------------------------------------------ */

@media (max-width: 980px) {
  .metrics,
  .range__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .credits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .about { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ga { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .metrics,
  .range__grid,
  .credits { grid-template-columns: 1fr; }
}

/* two certificates read better side by side than in a scrolling row */
.training .strip {
  grid-auto-flow: unset;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: visible;
  max-width: 560px;
}
@media (max-width: 520px) {
  .training .strip { grid-template-columns: 1fr; max-width: none; }
}

/* ---------- stacked shot panel -------------------------------------------
   The card body runs long; one image left most of the right-hand column
   empty. The panel now holds the whole set, stacked, so its height tracks
   the body. Below 900px the panel sits above the body, where a tall stack
   would be wrong, there it becomes a horizontal scrolling strip instead.
   ------------------------------------------------------------------------ */

.card__shot { padding: 16px; }

/* The stack is positioned absolutely so it contributes NOTHING to the card's
   row height, the body alone decides how tall the card is, and the photo
   column is clipped to exactly that. Anything that doesn't fit becomes a
   slider rather than making the card taller than its text. */
.card__shot { position: relative; overflow: hidden; }

.shotstack {
  position: absolute;
  inset: 16px;
  display: grid;
  /* The stack has a definite height (inset above), and `auto` rows shrink to
     fit inside one, squashing every figure to a fraction of its image and
     cropping it. max-content makes each row take its full height so the
     stack genuinely overflows, which is what the slider is for. */
  grid-auto-rows: max-content;
  gap: 12px;
  align-content: start;
  min-width: 0;
  max-width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.shotstack::-webkit-scrollbar { width: 0; height: 0; }
.shotstack > figure { scroll-snap-align: start; }

/* controls, injected by site.js only when the stack actually overflows */
.shotnav {
  position: absolute;
  right: 22px;
  bottom: 22px;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  z-index: 2;
}
.card__shot[data-overflowing="true"] .shotnav { display: flex; }
.shotnav button {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-mid);
  display: grid; place-items: center;
  cursor: pointer;
  transition: border-color .2s, color .2s, opacity .2s;
}
.shotnav button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.shotnav button:disabled { opacity: .3; cursor: default; }
.shotnav svg { width: 14px; height: 14px; }
.shotnav span {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  min-width: 34px;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .shotstack { scroll-behavior: auto; }
}

.shotstack figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--bg-raise);
  cursor: zoom-in;
  transition: border-color .25s var(--ease);
  min-width: 0;
}
.shotstack figure:hover { border-color: var(--accent); }
/* A tall narrow screenshot would otherwise set the whole card's height, so
   cap it. Landscape shots (every before/after) sit well under this and are
   never cropped; a tall one shows its top and opens in full from the viewer. */
.shotstack img {
  width: 100%;
  height: auto;
  max-height: 440px;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.shotstack figcaption {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-dim);
  padding: 7px 10px 8px;
  border-top: 1px solid var(--line-soft);
}

@media (max-width: 1040px) {
  .card__shot { overflow: visible; }
  .shotstack {
    position: static;
    inset: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    grid-auto-flow: column;
    grid-auto-columns: minmax(170px, 1fr);
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
  }
  .card__shot[data-overflowing] .shotnav { display: none; }
  .shotstack::-webkit-scrollbar { height: 4px; width: 4px; }
  .shotstack::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }
}

/* ---------- live hero backdrop -------------------------------------------
   A real chart of the install numbers, drawn behind the name. It must never
   compete with the type: low opacity, masked away from the text, and it only
   appears once real data has actually loaded.
   ------------------------------------------------------------------------ */

.heroplot {
  position: absolute;
  /* Kept to the lower right so it never crosses the name or the lede. With only
     a couple of points a full-width plot is one hard diagonal through the text. */
  left: 56%;
  right: var(--gutter);
  top: 14%;
  bottom: 58%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
}
.heroplot[data-ready="true"] { opacity: 1; }
.heroplot svg { width: 100%; height: 100%; display: block; }

.heroplot .hp-line { fill: none; stroke: var(--accent); stroke-width: 2; opacity: .38; }
.heroplot .hp-area { fill: var(--accent); opacity: .05; }
.heroplot .hp-dot  { fill: var(--accent); opacity: .55; }
.heroplot .hp-grid { stroke: var(--line); stroke-width: 1; opacity: .5; }
.heroplot .hp-tick {
  fill: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  opacity: .5;
}

/* the caption that says what the line is, bottom right of the hero */
/* The chart's two captions stack as one block so neither can land on the
   other: the wrapper is placed, the lines inside it just flow. */
.heroplot__meta {
  position: absolute;
  right: var(--gutter);
  top: calc(42% + 6px);
  display: grid;
  gap: 9px;
  justify-items: end;
}
.heroplot__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: .75;
}
.heroplot__label i {
  width: 6px; height: 6px; border-radius: 50%;
  background: #43d17c;
  box-shadow: 0 0 0 3px #43d17c22;
  flex: none;
}

/* Below 1160px the hero paragraph (max 640px) and the chart captions (~330px)
   no longer both fit beside the gutters, and the captions land on the text. */
/* On a phone the hero is one column with no empty side, and an absolutely
   placed chart ends up below the fold. There it drops into the flow instead,
   as a small band between the text and the buttons, where it is actually seen. */
@media (max-width: 1160px) {
  .heroplot {
    position: static;
    width: 100%;
    height: 104px;
    margin: 4px 0 26px;
    mask-image: none;
    -webkit-mask-image: none;
  }
  .heroplot__meta {
    position: static;
    margin: -18px 0 24px;
    justify-items: start;
    gap: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .heroplot { transition: none; }
}

/* how fast the install line is moving, under the chart */
.heroplot__gains {
  margin: 0;
  display: flex;
  gap: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.heroplot__gains b {
  color: var(--accent);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 1160px) {
  .heroplot__gains {
    gap: 16px;
    flex-wrap: wrap;
  }
}