/* ============================================================================
   COMPONENTS
   ========================================================================== */

/* ----------------------------------------------------------------------------
   CHIP — a status lamp. Reads as instrumentation, not decoration.
   -------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px var(--s-3) 6px var(--s-2);
  border: var(--hair) solid var(--rule);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  backdrop-filter: blur(10px);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-mid);
  white-space: nowrap;
}
.chip__lamp {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-faint);
  flex: none;
}
.chip--live .chip__lamp { background: var(--nominal); animation: pulse 2s var(--e-io) infinite; }
.chip--hot  .chip__lamp { background: var(--sodium); }
.chip--data .chip__lamp { background: var(--trace); }

/* ----------------------------------------------------------------------------
   BUTTON
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  border: var(--hair) solid var(--rule);
  border-radius: var(--r-pill);
  background: var(--panel);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  overflow: hidden;
  box-shadow: var(--lift);
  transition: color var(--d-std) var(--e-out),
              border-color var(--d-std) var(--e-out),
              transform var(--d-std) var(--e-out);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sodium);
  transform: translateY(101%);
  transition: transform var(--d-slow) var(--e-out);
  z-index: 0;
}
.btn > * { position: relative; z-index: 1; }
.btn:hover { color: var(--void); border-color: var(--sodium); }
.btn:hover::before { transform: translateY(0); }

.btn--primary {
  background: var(--sodium);
  border-color: var(--sodium);
  color: var(--void);
  font-weight: 600;
}
.btn--primary::before { background: var(--ink); }
.btn--primary:hover { color: var(--void); }

.btn__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.btn--icon {
  padding: 0;
  width: 34px;
  height: 34px;
  justify-content: center;
  border-radius: 50%;
}
.btn--icon::before { display: none; }
.btn--icon:hover { color: var(--sodium); border-color: var(--sodium); }

/* ----------------------------------------------------------------------------
   READOUT — the metric tiles. Big tabular number, tiny tracked label.
   -------------------------------------------------------------------------- */
/* Tiles wrap to whatever fits — the 1px gap over a --rule background draws
   the hairlines, so no border arithmetic breaks when the column count does. */
.readouts {
  display: grid;
  /* always an even grid: 4 tiles -> 2x2, never an orphan cell */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hair);
  border: var(--hair) solid var(--rule);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--rule);
}

.readout {
  padding: var(--s-4) var(--s-4) var(--s-3);
  min-width: 0;                      /* let the tile shrink below content   */
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter: blur(16px);
}

.readout__v {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 112%;
  font-size: clamp(1.15rem, 1.15rem + 0.9vw, 1.9rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}
.readout__v small { font-size: 0.5em; color: var(--ink-dim); margin-left: 2px; }
.readout__k { margin-top: var(--s-2); }

/* ----------------------------------------------------------------------------
   SYSTEM CARD — the work items. Expandable, so the page stays scannable
   but the depth is one click away.
   -------------------------------------------------------------------------- */
.systems { display: flex; flex-direction: column; }

.sys {
  border-top: var(--hair) solid var(--rule);
  position: relative;
}
.sys:last-child { border-bottom: var(--hair) solid var(--rule); }

.sys__head {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-6) 0;
  text-align: left;
  transition: transform var(--d-slow) var(--e-out);
}
@media (max-width: 859px) {
  .sys__head { grid-template-columns: minmax(0, 1fr) 30px; }
  .sys__head > span:nth-child(2) { grid-column: 1; }
  .sys__toggle { grid-column: 2; grid-row: 1; }
  .sys__tags { grid-column: 1 / -1; }
}
@media (min-width: 860px) {
  .sys__head { grid-template-columns: 76px minmax(0, 1fr) minmax(0, 15rem) auto; }
}
.sys:hover .sys__head { transform: translateX(var(--s-4)); }

.sys__glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--sodium-glow), transparent 55%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--d-slow) var(--e-out);
}
.sys:hover .sys__glow, .sys.is-open .sys__glow { opacity: 1; }

.sys__no {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
  display: none;
}
@media (min-width: 860px) { .sys__no { display: block; } }

.sys__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 112%;
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
  transition: color var(--d-std) var(--e-out);
}
.sys:hover .sys__name { color: var(--sodium); }

.sys__ctx {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  margin-top: var(--s-2);
}

.sys__tags { display: flex; flex-wrap: wrap; gap: 6px; }

.tag {
  font-family: var(--font-mono);
  font-size: var(--t-tick);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: var(--hair) solid var(--rule);
  border-radius: 3px;
  color: var(--ink-dim);
  white-space: nowrap;
}
.tag.is-hit { border-color: var(--sodium); color: var(--sodium); background: var(--sodium-glow); }

.sys__toggle {
  width: 30px;
  height: 30px;
  border: var(--hair) solid var(--rule);
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  transition: transform var(--d-slow) var(--e-out),
              border-color var(--d-std) var(--e-out),
              background var(--d-std) var(--e-out);
}
.sys__toggle::before,
.sys__toggle::after {
  content: "";
  position: absolute;
  background: currentColor;
}
.sys__toggle::before { width: 11px; height: var(--hair); }
.sys__toggle::after  { width: var(--hair); height: 11px; transition: transform var(--d-slow) var(--e-out); }
.sys.is-open .sys__toggle { transform: rotate(180deg); background: var(--sodium); color: var(--void); border-color: var(--sodium); }
.sys.is-open .sys__toggle::after { transform: scaleY(0); }

.sys__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--d-slow) var(--e-out);
}
.sys.is-open .sys__body { grid-template-rows: 1fr; }
.sys__body > div { overflow: hidden; }

.sys__inner {
  display: grid;
  gap: var(--s-5);
  padding: 0 0 var(--s-7);
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .sys__inner { grid-template-columns: 76px minmax(0, 1fr) minmax(0, 20rem); gap: var(--s-6); }
  .sys__inner > .sys__spacer { display: block; }
}
.sys__spacer { display: none; }

.sys__points { display: flex; flex-direction: column; gap: var(--s-3); }
.sys__point {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: var(--s-3);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink-mid);
  max-width: 78ch;
}
.sys__point::before {
  content: "";
  width: 8px;
  height: var(--hair);
  background: var(--sodium);
  margin-top: 0.75em;
}

.sys__stack {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  line-height: 1.7;
  color: var(--ink-dim);
  border-left: var(--hair) solid var(--rule);
  padding-left: var(--s-4);
}
.sys__links { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }

.link-out {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--trace);
  border-bottom: var(--hair) solid color-mix(in srgb, var(--trace) 40%, transparent);
  padding-bottom: 2px;
  transition: color var(--d-micro) var(--e-out), border-color var(--d-micro) var(--e-out);
}
.link-out:hover { color: var(--ink); border-color: var(--ink); }

/* ----------------------------------------------------------------------------
   PANEL — generic bordered surface used by the consoles
   -------------------------------------------------------------------------- */
.panel {
  border: var(--hair) solid var(--rule);
  border-radius: var(--r-card);
  background: var(--panel);
  box-shadow: var(--lift);
  overflow: hidden;
}
.panel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: var(--hair) solid var(--rule);
  background: var(--panel-2);
}
.panel__body { padding: var(--s-5); }
.panel__body--flush { padding: 0; }

/* ----------------------------------------------------------------------------
   SIGNAL — the live anomaly detector
   -------------------------------------------------------------------------- */
.signal__canvas {
  width: 100%;
  height: clamp(220px, 34vw, 340px);
  display: block;
  background: color-mix(in srgb, var(--void) 60%, var(--panel));
}
.signal__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4);
  border-top: var(--hair) solid var(--rule);
}
.signal__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: var(--hair) solid var(--rule);
}
@media (min-width: 640px) { .signal__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat {
  padding: var(--s-3) var(--s-4);
  border-right: var(--hair) solid var(--rule);
}
.stat:last-child { border-right: none; }
.stat__v {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--trace);
}
.stat__v[data-state="WARNING"] { color: var(--warning); }
.stat__v[data-state="ALARM"]   { color: var(--alarm); }
.stat__v[data-state="NOMINAL"] { color: var(--nominal); }

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 130px;
  height: 2px;
  background: var(--rule);
  border-radius: 2px;
  cursor: pointer;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--sodium);
  border: 2px solid var(--void);
}
.slider::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--sodium); border: 2px solid var(--void);
}

/* ----------------------------------------------------------------------------
   MARQUEE — infinite loop, speed modulated by scroll velocity
   -------------------------------------------------------------------------- */
.marquee {
  overflow: hidden;
  border-block: var(--hair) solid var(--rule);
  padding: var(--s-4) 0;
  display: flex;
  user-select: none;
  -webkit-user-select: none;
}
.marquee + .marquee { border-top: none; }
.marquee__track {
  display: flex;
  flex: none;
  gap: var(--s-6);
  padding-right: var(--s-6);
  will-change: transform;
}
.marquee__item {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 118%;
  text-transform: uppercase;
  font-size: clamp(1.1rem, 2.4vw, 2rem);
  letter-spacing: -0.01em;
  color: var(--ink-faint);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--s-6);
  transition: color var(--d-std) var(--e-out);
}
.marquee__item::after {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--sodium);
  flex: none;
  transform: rotate(45deg);
}
.marquee:hover .marquee__item { color: var(--ink); }

/* ----------------------------------------------------------------------------
   CAPABILITY MATRIX
   -------------------------------------------------------------------------- */
.caps { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 720px) { .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .caps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.cap {
  border: var(--hair) solid var(--rule);
  border-radius: var(--r-card);
  padding: var(--s-5);
  background: var(--panel);
  box-shadow: var(--lift);
  transition: border-color var(--d-std) var(--e-out);
}
.cap:hover { border-color: var(--sodium); }   /* lift comes from [data-tilt] */
.cap__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-4);
  border-bottom: var(--hair) solid var(--rule);
}
.cap__items { display: flex; flex-wrap: wrap; gap: 6px; }

.skill {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  padding: 4px 9px;
  border: var(--hair) solid var(--rule-soft);
  border-radius: 4px;
  color: var(--ink-mid);
  background: var(--panel-2);
  cursor: default;
  transition: color var(--d-micro) var(--e-out), border-color var(--d-micro) var(--e-out),
              background var(--d-micro) var(--e-out);
}
.skill:hover { border-color: var(--sodium); color: var(--sodium); }
.skill.is-hit {
  border-color: var(--sodium);
  color: var(--void);
  background: var(--sodium);
}

/* ----------------------------------------------------------------------------
   TIMELINE — scroll-scrubbed spine
   -------------------------------------------------------------------------- */
.tl { position: relative; padding-left: var(--s-6); }
.tl__spine {
  position: absolute;
  left: 4px;
  top: 6px;
  bottom: 6px;
  width: var(--hair);
  background: var(--rule);
}
.tl__spine i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--hair);
  height: 100%;
  transform: scaleY(0);
  transform-origin: top;
  background: var(--sodium);
  display: block;
}
.tl__item { position: relative; padding-bottom: var(--s-7); }
.tl__item:last-child { padding-bottom: 0; }
.tl__dot {
  position: absolute;
  left: calc(var(--s-6) * -1);
  top: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: var(--hair) solid var(--ink-faint);
  background: var(--void);
  transition: border-color var(--d-std) var(--e-out), background var(--d-std) var(--e-out),
              box-shadow var(--d-std) var(--e-out);
}
.tl__item.is-lit .tl__dot { border-color: var(--sodium); background: var(--sodium); box-shadow: 0 0 0 4px var(--sodium-glow); }
.tl__when { margin-bottom: var(--s-2); }
.tl__what {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 110%;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.tl__note { color: var(--ink-dim); font-size: var(--t-small); margin-top: var(--s-1); max-width: 52ch; }

/* ----------------------------------------------------------------------------
   CONSOLE — shared shell for MATCH and QUERY
   -------------------------------------------------------------------------- */
.console__io {
  width: 100%;
  min-height: 140px;
  padding: var(--s-4);
  background: color-mix(in srgb, var(--void) 45%, var(--panel));
  border: none;
  font-family: var(--font-mono);
  font-size: var(--t-small);
  line-height: 1.7;
  color: var(--ink);
}
.console__io::placeholder { color: var(--ink-dim); }
.console__io:focus { outline: none; box-shadow: inset 0 0 0 1px var(--sodium); }

.console__out {
  border-top: var(--hair) solid var(--rule);
  padding: var(--s-5);
  min-height: 120px;
}

.gauge {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.gauge__v {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 118%;
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--sodium);
}
.gauge__bar {
  flex: 1;
  height: 4px;
  background: var(--panel-3);
  border-radius: 2px;
  overflow: hidden;
  align-self: center;
}
.gauge__bar i {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--sodium), var(--sodium-soft));
  transition: transform var(--d-cine) var(--e-out);
}

.kv { display: grid; gap: var(--s-3); }
.kv__row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
  padding-top: var(--s-3);
  border-top: var(--hair) solid var(--rule-soft);
}
.kv__row:first-child { border-top: none; padding-top: 0; }

.answer {
  font-size: var(--t-body);
  line-height: 1.7;
  color: var(--ink);
  max-width: 72ch;
  min-height: 3em;
}
.answer__src {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: var(--hair) solid var(--rule-soft);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.caret::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 1.05em;
  background: var(--sodium);
  vertical-align: -0.18em;
  margin-left: 3px;
  animation: blink 1s steps(2, start) infinite;
}

.chipbtn {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 11px;
  border: var(--hair) solid var(--rule);
  border-radius: var(--r-pill);
  color: var(--ink-dim);
  transition: color var(--d-micro) var(--e-out), border-color var(--d-micro) var(--e-out);
}
.chipbtn:hover { border-color: var(--sodium); color: var(--sodium); }

/* ----------------------------------------------------------------------------
   HONESTY NOTE — used wherever the page does something people will assume
   is a model call. It is not; say so.
   -------------------------------------------------------------------------- */
.note {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: var(--hair) dashed var(--rule);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  background: color-mix(in srgb, var(--panel-2) 60%, transparent);
}
.note::before { content: "!"; color: var(--sodium); font-weight: 600; flex: none; }

/* ----------------------------------------------------------------------------
   CONTACT
   -------------------------------------------------------------------------- */
.contact__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  border-top: var(--hair) solid var(--rule);
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 112%;
  font-size: clamp(1.1rem, 2.6vw, 1.9rem);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  transition: transform var(--d-slow) var(--e-out), color var(--d-std) var(--e-out);
}
.contact__link:last-of-type { border-bottom: var(--hair) solid var(--rule); }
.contact__link:hover { transform: translateX(var(--s-4)); color: var(--sodium); }
.contact__link span { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--track-label); color: var(--ink-dim); }

/* ----------------------------------------------------------------------------
   PORTRAIT
   Duotoned to the active accent by default; hovering releases the real
   photograph. The treatment is CSS, so it follows every palette.
   -------------------------------------------------------------------------- */
.portrait {
  position: relative;
  border: var(--hair) solid var(--rule);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--panel);
  box-shadow: var(--lift);
  isolation: isolate;
}
.portrait img {
  width: 100%;
  height: auto;              /* the height attribute must not pin the box */
  aspect-ratio: 27 / 40;      /* the source's own ratio: nothing is cropped */
  object-fit: contain;        /* and nothing is cropped if it ever drifts */
  object-position: 50% 50%;
  filter: grayscale(1) contrast(1.12) brightness(0.88);
  transform: scale(1.02);
  transition: filter var(--d-cine) var(--e-out),
              transform var(--d-cine) var(--e-out);
}
.portrait__tone {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--sodium);
  mix-blend-mode: color;
  opacity: 0.62;
  pointer-events: none;
  transition: opacity var(--d-cine) var(--e-out);
}
.portrait__lines {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 3px,
      color-mix(in srgb, var(--void) 34%, transparent) 3px 4px
    ),
    radial-gradient(120% 90% at 50% 8%, transparent 45%, var(--void) 118%);
  opacity: 0.7;
  transition: opacity var(--d-cine) var(--e-out);
}
.portrait:hover img { filter: none; transform: scale(1); }
.portrait:hover .portrait__tone { opacity: 0; }
.portrait:hover .portrait__lines { opacity: 0.28; }

.portrait__tag {
  position: absolute;
  left: var(--s-3);
  bottom: var(--s-3);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 5px var(--s-3);
  border-radius: var(--r-pill);
  border: var(--hair) solid var(--rule);
  background: color-mix(in srgb, var(--void) 72%, transparent);
  backdrop-filter: blur(10px);
  font-family: var(--font-mono);
  font-size: var(--t-tick);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mid);
}
.portrait__tag::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--sodium);
}

/* ----------------------------------------------------------------------------
   DOWNLOADS — the five tailored resume variants plus the master
   -------------------------------------------------------------------------- */
.dl { display: grid; gap: 2px; }
.dl__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-3);
  border: var(--hair) solid transparent;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-dim);
  transition: color var(--d-std) var(--e-out), border-color var(--d-std) var(--e-out),
              background var(--d-std) var(--e-out), transform var(--d-std) var(--e-out);
}
.dl__row:hover {
  color: var(--ink);
  border-color: var(--rule);
  background: var(--panel-2);
  transform: translateX(4px);
}
.dl__row b { color: var(--sodium); font-weight: 500; }
.dl__row span:last-child { color: var(--ink-dim); }
.dl__row.is-pick { border-color: var(--sodium); background: var(--sodium-glow); color: var(--ink); }

/* ----------------------------------------------------------------------------
   TILT — pointer-tracked lean plus a sheen that follows the cursor
   -------------------------------------------------------------------------- */
[data-tilt] { position: relative; will-change: transform; }
[data-tilt]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    240px circle at var(--sheen-x, 50%) var(--sheen-y, 50%),
    color-mix(in srgb, var(--ink) 13%, transparent),
    transparent 62%
  );
  transition: opacity var(--d-std) var(--e-out);
}
[data-tilt].is-tilting::after { opacity: 1; }

/* --- fit-to-width lines -----------------------------------------------------
   The element must shrink-wrap its own text, or offsetWidth reports the
   CONTAINER width and the solver has nothing to solve. Specificity here has
   to beat `.hero__name .ln`, hence the attribute on the descendant selector. */
.js .hero__name .ln[data-fit],
.js [data-fit] {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  max-width: none;
}
[data-fit] .msk { display: block; }

/* ----------------------------------------------------------------------------
   VARIABLE-WIDTH LETTERS
   Archivo carries a width axis, so the name can deflect toward the pointer
   without changing colour or position. Widths are normalised around their
   mean in nametype.js, so the line does not grow as letters widen.
   -------------------------------------------------------------------------- */
.ch {
  font-weight: inherit;
  font-stretch: 118%;
  will-change: font-stretch;
}
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .ch { will-change: auto; }
}

/* --------------------------------------------------------------------------
   Star button — .btn plus a mark and a live count.

   The count slot ships `hidden` and is only revealed once js/star.js has a real
   number, so a blocked script or a rate-limited API leaves a correct button
   rather than an empty bracket.
   -------------------------------------------------------------------------- */

.btn--star .btn__star { line-height: 1; font-size: 0.95em; }

.btn--star .btn__count {
  padding-left: var(--s-3);
  border-left: var(--hair) solid var(--rule);
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.btn--star:hover .btn__count { color: inherit; }