/* ==========================================================================
   C. FEATURES — Precision Micro-UI Dashboard (Interactive Functional Artifacts)
   D. PHILOSOPHY — The Manifesto
   E. PROTOCOL — Sticky Stacking Archive
   ========================================================================== */

/* --------------------------------------------------------------------------
   C. FEATURES
   -------------------------------------------------------------------------- */
.features {
  background: var(--cream);
}

.artifact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.5rem);
}

/* Shared artifact shell — reads as software, not as a card */
.artifact {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 30rem;
  padding: 1.35rem;
  border-radius: var(--r-2xl);
  border: 1px solid var(--rule);
  background: var(--surface);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out), border-color 0.6s var(--ease-out);
}

.artifact:hover {
  transform: translateY(-4px);
  border-color: rgba(20, 55, 94, 0.2);
  box-shadow: var(--sh-md);
}

/* Top instrument bar */
.artifact__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-bottom: 0.9rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--rule);
}

.artifact__id {
  font-family: var(--ff-mono);
  font-size: var(--t-nano);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.artifact__lights {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
}

.artifact__lights i {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  border: 1px solid var(--rule-strong);
  background: transparent;
}

/* First lamp always lit — the rest read as unlit instrument lamps. */
.artifact__lights i:first-child {
  background: var(--clay);
  border-color: var(--clay);
}

.artifact__stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}

.artifact__foot {
  margin-top: 1.2rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
}

.artifact__title {
  font-size: var(--t-h4);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.4rem;
}

.artifact__desc {
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--ink-muted);
  text-wrap: pretty;
}

.artifact__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.9rem;
  font-family: var(--ff-mono);
  font-size: var(--t-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay-ink);
}

/* ---------------------------------------------------------------- ARTIFACT 1
   Diagnostic Shuffler — 3 overlapping cards cycling vertically
   -------------------------------------------------------------------------- */
.shuffler {
  --card-h: 5.5rem;
  position: relative;
  height: 13.5rem;
  margin-bottom: 0.5rem;
}

.shuffler__card {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 5.5rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1.05rem;
  border-radius: var(--r-md);
  background: #fff;
  border: 1px solid var(--rule);
  box-shadow: 0 2px 5px rgba(26, 26, 26, 0.05), 0 12px 28px rgba(26, 26, 26, 0.08);
  will-change: transform, opacity;
}

.shuffler__icon {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  flex: none;
  border-radius: var(--r-sm);
  background: rgba(20, 55, 94, 0.08);
  color: var(--ocean);
}

.shuffler__icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.shuffler__body {
  min-width: 0;
  flex: 1;
}

.shuffler__label {
  font-family: var(--ff-mono);
  font-size: var(--t-nano);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.2rem;
}

.shuffler__value {
  font-family: var(--ff-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--charcoal);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.shuffler__grade {
  font-family: var(--ff-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  color: var(--clay-ink);
  white-space: nowrap;
}

.shuffler__meter {
  height: 3px;
  margin-top: 0.5rem;
  border-radius: 2px;
  background: rgba(26, 26, 26, 0.08);
  overflow: hidden;
}

.shuffler__meter span {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ocean-300), var(--ocean));
  width: 0;
  transition: width 0.9s var(--ease-out);
}

/* ---------------------------------------------------------------- ARTIFACT 2
   Telemetry Typewriter — live text feed
   -------------------------------------------------------------------------- */
.telemetry {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 13.5rem;
  margin-bottom: 0.5rem;
  border-radius: var(--r-md);
  background: var(--charcoal);
  border: 1px solid rgba(242, 240, 233, 0.08);
  overflow: hidden;
}

.telemetry__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid rgba(242, 240, 233, 0.09);
  background: rgba(255, 255, 255, 0.03);
}

.telemetry__live {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--ff-mono);
  font-size: var(--t-nano);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #e4703a;
}

.telemetry__dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: #e4703a;
  flex: none;
  animation: pulse-ring 2.2s var(--ease-out) infinite;
}

.telemetry__port {
  font-family: var(--ff-mono);
  font-size: var(--t-nano);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
}

.telemetry__log {
  flex: 1;
  padding: 0.9rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.4rem;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%);
  mask-image: linear-gradient(180deg, transparent, #000 22%);
}

.telemetry__line {
  font-family: var(--ff-mono);
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--on-dark-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: none;
}

.telemetry__line b {
  color: var(--clay-400);
  font-weight: 500;
}

.telemetry__line--active {
  color: var(--cream-50);
}

.telemetry__caret {
  display: inline-block;
  width: 0.5em;
  height: 1em;
  margin-left: 0.15em;
  vertical-align: -0.14em;
  background: var(--clay);
  animation: caret-blink 1.05s steps(1, end) infinite;
}

@keyframes caret-blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

/* ---------------------------------------------------------------- ARTIFACT 3
   Mock Cursor Protocol Scheduler
   -------------------------------------------------------------------------- */
.scheduler {
  position: relative;
  height: 15.5rem;
  margin-bottom: 0.5rem;
  padding: 0.85rem;
  border-radius: var(--r-md);
  background: #fff;
  border: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  overflow: hidden;
}

.scheduler__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.scheduler__title {
  font-family: var(--ff-mono);
  font-size: var(--t-nano);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.scheduler__route {
  font-family: var(--ff-mono);
  font-size: var(--t-nano);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--ocean);
}

.scheduler__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.3rem;
}

.day {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  background: rgba(26, 26, 26, 0.04);
  font-family: var(--ff-mono);
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--ink-faint);
  transition:
    background-color 0.35s var(--ease-out),
    color 0.35s var(--ease-out),
    transform 0.35s var(--ease-spring),
    box-shadow 0.35s var(--ease-out);
}

.day.is-on {
  background: var(--ocean);
  color: var(--cream-50);
  box-shadow: 0 4px 12px rgba(20, 55, 94, 0.28);
}

.day.is-target {
  transform: scale(0.88);
}

.scheduler__slots {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
}

.slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: 0.34rem 0.55rem;
  border-radius: var(--r-xs);
  background: rgba(26, 26, 26, 0.03);
  font-family: var(--ff-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out);
}

.slot.is-on {
  background: rgba(20, 55, 94, 0.09);
  color: var(--ocean);
}

.slot__bar {
  position: relative;
  width: 2.75rem;
  height: 3px;
  border-radius: 2px;
  background: rgba(26, 26, 26, 0.09);
  overflow: hidden;
}

/* An idle track still reads as a queued plan, not an empty widget. */
.slot__bar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 34%;
  border-radius: 2px;
  background: repeating-linear-gradient(
    90deg,
    rgba(26, 26, 26, 0.16) 0 3px,
    transparent 3px 6px
  );
}

.slot.is-on .slot__bar::after {
  display: none;
}

.slot.is-on .slot__bar {
  background: rgba(20, 55, 94, 0.18);
}

.slot__bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--clay);
  transition: width 0.6s var(--ease-out);
}

.slot.is-on .slot__bar span {
  width: var(--fill, 70%);
}

.scheduler__save {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem;
  border-radius: var(--r-sm);
  background: var(--charcoal);
  color: var(--cream-50);
  font-family: var(--ff-display);
  font-size: 0.6875rem;
  font-weight: 600;
  transition: background-color 0.35s var(--ease-out), transform 0.3s var(--ease-spring);
}

.scheduler__save.is-press {
  transform: scale(0.94);
  background: var(--clay);
}

.scheduler__save.is-done {
  background: var(--ocean);
}

/* The automated cursor */
.mock-cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 1.15rem;
  height: 1.15rem;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
  filter: drop-shadow(0 2px 5px rgba(26, 26, 26, 0.35));
  transition: transform 0.7s var(--ease-in-out);
}

.mock-cursor svg {
  width: 100%;
  height: 100%;
}

.mock-cursor__ring {
  position: absolute;
  inset: -0.35rem;
  border-radius: 50%;
  border: 1.5px solid var(--clay);
  opacity: 0;
  transform: scale(0.5);
}

.mock-cursor.is-click .mock-cursor__ring {
  animation: cursor-click 0.55s var(--ease-out);
}

@keyframes cursor-click {
  0% {
    opacity: 0.9;
    transform: scale(0.35);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

@media (max-width: 68rem) {
  .artifact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .artifact:nth-child(3) {
    grid-column: span 2;
  }
  .artifact:nth-child(3) .artifact__stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: center;
  }
}

/* Tighten the instrument panels below ~420px: the shuffler chip, the
   terminal and the scheduler all have fixed stage heights, so their internal
   padding and type must come down rather than the content clipping. */
@media (max-width: 26.5rem) {
  .artifact {
    padding: 1rem;
  }
  .shuffler__card {
    gap: 0.55rem;
    padding: 0.6rem 0.7rem;
  }
  .shuffler__icon {
    width: 2rem;
    height: 2rem;
  }
  .shuffler__icon svg {
    width: 1rem;
    height: 1rem;
  }
  .shuffler__label {
    letter-spacing: 0.08em;
  }
  .shuffler__value {
    font-size: 0.9375rem;
  }
  .telemetry__head {
    padding: 0.55rem 0.7rem;
  }
  .telemetry__log {
    padding: 0.7rem;
    gap: 0.28rem;
  }
  .telemetry__line {
    font-size: 0.5938rem;
  }
  .scheduler {
    padding: 0.7rem;
    gap: 0.6rem;
  }
  .slot {
    font-size: 0.5rem;
    padding: 0.26rem 0.45rem;
  }
  .slot__bar {
    width: 2rem;
  }
}

@media (max-width: 46rem) {
  .artifact-grid {
    grid-template-columns: 1fr;
  }
  .artifact:nth-child(3) {
    grid-column: auto;
  }
  .artifact:nth-child(3) .artifact__stage {
    display: flex;
  }
}

/* --------------------------------------------------------------------------
   D. PHILOSOPHY — The Manifesto
   -------------------------------------------------------------------------- */
.philosophy {
  position: relative;
  background: var(--charcoal);
  color: var(--on-dark);
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(6rem, 16vh, 11rem);
  border-radius: var(--r-3xl);
  margin-inline: clamp(0.5rem, 1.5vw, 1.5rem);
}

.philosophy__texture {
  position: absolute;
  inset: -14% 0;
  z-index: -2;
  will-change: transform;
}

.philosophy__texture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.15) brightness(0.62);
  opacity: 0.34;
}

/* Cool the industrial texture to the ocean palette. */
.philosophy__texture::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #14375e;
  mix-blend-mode: color;
  opacity: 0.55;
}

.philosophy__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(10, 28, 50, 0.55) 0%, rgba(26, 26, 26, 0.94) 68%),
    linear-gradient(180deg, rgba(8, 26, 48, 0.55), rgba(10, 28, 50, 0.9));
}

.philosophy__head {
  text-align: center;
  max-width: 40rem;
  margin-inline: auto;
  margin-bottom: clamp(3rem, 7vw, 5.5rem);
}

.philosophy__head .eyebrow {
  justify-content: center;
}

.philosophy__statement {
  font-size: clamp(1.9rem, 4.6vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.04em;
  font-weight: 700;
}

/* The split comparison */
.manifesto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(1.5rem, 4vw, 3rem);
}

.manifesto__col {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--r-2xl);
  border: 1px solid var(--rule-dark);
  background: rgba(242, 240, 233, 0.025);
  transition: background-color 0.6s var(--ease-out), border-color 0.6s var(--ease-out);
}

.manifesto__col--us {
  background: rgba(228, 112, 58, 0.07);
  border-color: rgba(228, 112, 58, 0.28);
}

.manifesto__col--us:hover {
  background: rgba(228, 112, 58, 0.11);
}

.manifesto__tag {
  font-family: var(--ff-mono);
  font-size: var(--t-nano);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
}

.manifesto__col--us .manifesto__tag {
  color: var(--clay-400);
}

.manifesto__quote {
  font-size: clamp(1.35rem, 2.5vw, 2.05rem);
  line-height: 1.14;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--on-dark-muted);
}

.manifesto__col--us .manifesto__quote {
  color: var(--cream-50);
}

.manifesto__quote .drama {
  font-size: 1.12em;
}

.manifesto__note {
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule-dark);
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--on-dark-muted);
  text-wrap: pretty;
}

.manifesto__divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  color: var(--clay-400);
}

.manifesto__divider span {
  font-family: var(--ff-mono);
  font-size: var(--t-nano);
  letter-spacing: 0.2em;
  writing-mode: vertical-rl;
  text-transform: uppercase;
}

.manifesto__divider::before,
.manifesto__divider::after {
  content: "";
  width: 1px;
  flex: 1;
  background: linear-gradient(180deg, transparent, var(--rule-dark), transparent);
}

/* Principle list beneath the manifesto */
.principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(3rem, 7vw, 5rem);
  border-radius: var(--r-2xl);
  overflow: hidden;
  background: var(--rule-dark);
  border: 1px solid var(--rule-dark);
}

.principle {
  padding: clamp(1.35rem, 2.5vw, 2rem);
  background: var(--charcoal);
  transition: background-color 0.5s var(--ease-out);
}

.principle:hover {
  background: var(--charcoal-800);
}

.principle__num {
  font-family: var(--ff-mono);
  font-size: var(--t-nano);
  letter-spacing: 0.2em;
  color: var(--clay);
  margin-bottom: 1rem;
}

.principle__title {
  font-size: var(--t-h4);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.55rem;
  color: var(--cream-50);
}

.principle__body {
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--on-dark-faint);
  text-wrap: pretty;
}

@media (max-width: 62rem) {
  .manifesto {
    grid-template-columns: 1fr;
    gap: var(--s-4);
  }
  .manifesto__divider {
    flex-direction: row;
  }
  .manifesto__divider span {
    writing-mode: horizontal-tb;
  }
  .manifesto__divider::before,
  .manifesto__divider::after {
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--rule-dark), transparent);
  }
  .principles {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   E. PROTOCOL — Sticky Stacking Archive
   -------------------------------------------------------------------------- */
.protocol {
  background: var(--cream);
  padding-bottom: clamp(4rem, 10vh, 8rem);
}

.protocol-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vh, 2.5rem);
}

.protocol-card {
  position: relative;
  border-radius: var(--r-3xl);
  overflow: hidden;
  transform-origin: center top;
  will-change: transform, filter, opacity;
  box-shadow: 0 10px 40px rgba(26, 26, 26, 0.09);
}

.protocol-card__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: stretch;
  min-height: min(74vh, 38rem);
}

.protocol-card__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-5);
  padding: clamp(2rem, 4.5vw, 4rem);
}

.protocol-card__index {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--ff-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.protocol-card__index b {
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-family: var(--ff-display);
}

.protocol-card__title {
  font-size: clamp(1.75rem, 3.4vw, 2.9rem);
  line-height: 1;
  letter-spacing: -0.04em;
}

.protocol-card__title .drama {
  font-size: 1.1em;
}

.protocol-card__body {
  font-size: var(--t-body);
  line-height: 1.62;
  max-width: 46ch;
  text-wrap: pretty;
}

.protocol-card__spec {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.spec-cell {
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.5);
}

.spec-cell__k {
  font-family: var(--ff-mono);
  font-size: var(--t-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.25rem;
}

.spec-cell__v {
  font-family: var(--ff-mono);
  font-size: 0.9375rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--charcoal);
}

.protocol-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
}

/* — Artifact stage (right column) — */
.protocol-card__stage {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1rem, 2vw, 1.5rem);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--charcoal);
}

/* ---------------------------------------------------------- product media */
/* The product photograph sits above the instrument so the card shows what
   the grade actually looks like alongside its live telemetry. */
.product-media {
  position: relative;
  z-index: 1;
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
}

.product-media img {
  display: block;
  width: 100%;
  /* Short, wide crop keeps all three cards the same height regardless of the
     source aspect ratio. */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out);
}

.protocol-card:hover .product-media img {
  transform: scale(1.03);
}

.product-media figcaption {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  padding: 0.3rem 0.65rem;
  border-radius: var(--r-pill);
  background: rgba(8, 26, 48, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--ff-mono);
  font-size: var(--t-nano);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-50);
}

/*
 * Instrument sizing.
 *
 * The inline SVGs must be `width/height: auto` so they honour their own
 * viewBox — the global reset sets `svg:not(:root) { width: 100% }`, which
 * stretched the gear and strand past their boxes.
 *
 * The containers are deliberately NOT set to auto: `.helix`, `.scanner` and
 * `.ekg` each declare their own `min(100%, <size>)` ceiling. Overriding that
 * made the radar dial fill the whole panel and push its stage 300px taller
 * than its neighbours.
 */
.protocol-card__stage > .helix,
.protocol-card__stage > .scanner,
.protocol-card__stage > .ekg {
  position: relative;
  z-index: 1;
  align-self: center;
}

.protocol-card__stage > .scanner,
.protocol-card__stage > .ekg {
    width: 100%;
}


.protocol-card__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.55;
  background-image:
    linear-gradient(rgba(242, 240, 233, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 240, 233, 0.05) 1px, transparent 1px);
  background-size: 2.5rem 2.5rem;
}

/* — Card themes — */
.protocol-card--cg {
  background: var(--cream-50);
  border: 1px solid var(--rule);
}

.protocol-card--cg .protocol-card__index {
  color: var(--clay-ink);
}

.protocol-card--ncg {
  background: var(--ocean);
  color: var(--on-dark);
  border: 1px solid var(--ocean-700);
}

.protocol-card--ncg .protocol-card__index {
  color: var(--clay-400);
}
.protocol-card--ncg .protocol-card__body {
  color: var(--on-dark-muted);
}
/* A chip on the dark card was inheriting the light-ground ink (1.3:1). */
.protocol-card--ncg .chip {
  border-color: var(--rule-dark);
  color: var(--on-dark-muted);
}
.protocol-card--ncg .spec-cell {
  /* 0.05 white over the mid-blue card left the key at 2.8:1; a darker cell
     puts the same muted text above 4.5. */
  background: rgba(8, 26, 48, 0.45);
}
.protocol-card--ncg .spec-cell__k {
  color: var(--on-dark-faint);
}
.protocol-card--ncg .spec-cell__v {
  color: var(--cream-50);
}
.protocol-card--ncg .protocol-card__spec {
  background: var(--rule-dark);
  border-color: var(--rule-dark);
}
.protocol-card--ncg .protocol-card__stage {
  background: var(--charcoal);
}

.protocol-card--pg {
  background: var(--charcoal);
  color: var(--on-dark);
  border: 1px solid var(--charcoal-700);
}

.protocol-card--pg .protocol-card__index {
  color: var(--clay-400);
}
.protocol-card--pg .protocol-card__body {
  color: var(--on-dark-muted);
}
.protocol-card--pg .spec-cell {
  background: rgba(255, 255, 255, 0.045);
}
.protocol-card--pg .spec-cell__k {
  color: var(--on-dark-faint);
}
.protocol-card--pg .spec-cell__v {
  color: var(--cream-50);
}
.protocol-card--pg .protocol-card__spec {
  background: var(--rule-dark);
  border-color: var(--rule-dark);
}
.protocol-card--pg .protocol-card__stage {
  background: var(--ocean-900);
}

@media (max-width: 62rem) {
  .protocol-card {
    position: relative;
    top: auto;
  }
  .protocol-card__inner {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .protocol-card__stage {
    min-height: 20rem;
    order: -1;
  }

  /* Instruments vary a lot in height; cap them so the photo stays visible. */
  .protocol-card__stage > .helix,
  .protocol-card__stage > .scanner,
  .protocol-card__stage > .ekg {
    max-width: 100%;
  }
}

/* --------------------------------------------------------------------------
   E2. ARTIFACT ANIMATIONS — one distinct instrument per protocol card
   -------------------------------------------------------------------------- */

/* 1 — Rotating double-helix gear */
.helix {
  --helix-scale: 0.5;
  --helix-base: 22rem;
  --helix-core: 8.25rem;

  position: relative;
  /* width: min(100%, 22rem); */
  width: min(100%, calc(var(--helix-base) * var(--helix-scale)));
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  /* hapus: transform-origin: top left; */
  /* hapus: transform: scale(0.6); */
}

.helix__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed rgba(242, 240, 233, 0.18);
}

.helix__ring--inner {
  inset: 18%;
  border-style: solid;
  border-color: rgba(242, 240, 233, 0.1);
}

.helix__gear {
  position: absolute;
  width: 62%;
  height: auto;
  display: block;
  animation: helix-spin 26s linear infinite;
  transform-origin: 50% 50%;
}

.helix__gear--b {
  width: 44%;
  height: auto;
  animation-duration: 17s;
  animation-direction: reverse;
  opacity: 0.75;
}

@keyframes helix-spin {
  to {
    transform: rotate(360deg);
  }
}

.helix__strand {
  position: absolute;
  width: 58%;
  height: auto;
  display: block;
  animation: helix-spin 13s linear infinite;
}

.helix__strand--b {
  animation-duration: 13s;
  animation-delay: -6.5s;
}

.helix__core {
  width: calc(var(--helix-core) * var(--helix-scale));
  height: calc(var(--helix-core) * var(--helix-scale));

  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  /* width: 8.25rem; */
  /* height: 8.25rem; */
  gap: 0.1rem;       /* 0.2rem ÷ 2 */
  border-radius: 50%;
  background: rgba(26, 26, 26, 0.72);
  border: 1px solid rgba(242, 240, 233, 0.14);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  text-align: center;
}

.helix__core b {
  font-family: var(--ff-display);
  font-size: calc(1.75rem * var(--helix-scale))
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--cream-50);
  line-height: 1;
}

.helix__core span {
  font-family: var(--ff-mono);
  font-size: calc(0.5625rem * var(--helix-scale));
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clay-400);
}

/* 2 — Scanning laser grid over material cells */
.scanner {
  position: relative;
  width: min(100%, 24rem);
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  border: 1px solid rgba(242, 240, 233, 0.13);
  background: rgba(26, 26, 26, 0.55);
  overflow: hidden;
}

.scanner__cells {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(7, 1fr);
  gap: 2px;
  padding: 2px;
}

.scanner__cell {
  border-radius: 2px;
  background: rgba(242, 240, 233, 0.06);
  transition: background-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

.scanner__cell.is-lit {
  background: rgba(123, 163, 201, 0.55);
  box-shadow: 0 0 8px rgba(123, 163, 201, 0.45);
}

.scanner__cell.is-hit {
  background: var(--clay);
  box-shadow: 0 0 12px rgba(228, 112, 58, 0.7);
}

.scanner__beam {
  position: absolute;
  inset-inline: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--clay) 12%, #ffd9c9 50%, var(--clay) 88%, transparent);
  box-shadow: 0 0 18px 3px rgba(228, 112, 58, 0.55);
  animation: scanner-sweep 3.6s var(--ease-in-out) infinite;
}

.scanner__beam::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 4.5rem;
  background: linear-gradient(180deg, transparent, rgba(228, 112, 58, 0.14));
}

@keyframes scanner-sweep {
  0% {
    top: 4%;
  }
  50% {
    top: 94%;
  }
  100% {
    top: 4%;
  }
}

.scanner__hud {
  position: absolute;
  inset-inline: 0.75rem;
  bottom: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 0.5rem 0.7rem;
  border-radius: var(--r-sm);
  background: rgba(26, 26, 26, 0.82);
  border: 1px solid rgba(242, 240, 233, 0.1);
  font-family: var(--ff-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}

.scanner__hud b {
  color: var(--clay-400);
  font-weight: 500;
}

/* 3 — Pulsing EKG waveform */
.ekg {
  position: relative;
  width: min(100%, 26rem);
  border-radius: var(--r-lg);
  border: 1px solid rgba(242, 240, 233, 0.13);
  background: rgba(26, 26, 26, 0.6);
  padding: 1rem;
  overflow: hidden;
}

.ekg__grid {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(242, 240, 233, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 240, 233, 0.05) 1px, transparent 1px);
  background-size: 1.5rem 1.5rem;
}

.ekg__svg {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.ekg__path {
  fill: none;
  stroke: var(--clay);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(228, 112, 58, 0.6));
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
  animation: ekg-trace 4s linear infinite;
}

.ekg__path--ghost {
  stroke: rgba(242, 240, 233, 0.14);
  stroke-width: 1;
  filter: none;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  animation: none;
}

.ekg__pulse {
  animation: ekg-pulse 4s var(--ease-in-out) infinite;
  transform-origin: 50% 50%;
}

@keyframes ekg-trace {
  to {
    stroke-dashoffset: -620;
  }
}

@keyframes ekg-pulse {
  0%,
  100% {
    opacity: 0.9;
  }
  50% {
    opacity: 1;
  }
}

.ekg__hud {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(242, 240, 233, 0.1);
  font-family: var(--ff-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}

.ekg__hud b {
  color: var(--clay-400);
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  .helix__gear,
  .helix__strand,
  .scanner__beam,
  .ekg__path,
  .ekg__pulse {
    animation: none;
  }
  .ekg__path {
    stroke-dashoffset: 0;
  }
}

/* ==========================================================================
   ARCHIVE CARD PROPORTIONS — desktop only

   The stage holds two things: the photograph of the grade and the instrument
   that reads it. Previously each sized itself (16:9 for the picture, 4:3 for
   the scanner), so the pair — and with them the card — grew past the pinned
   viewport: at 1366x768 the NCG card measured 830px and its lower half was
   cut off by the pin.

   The card now has a height budget taken from the viewport, the stage splits
   it 40/60 (photograph above, instrument below), and both children fill their
   band instead of declaring their own size. The copy column has the same
   budget, so the type tightens on short screens rather than pushing the card
   taller.
   ========================================================================== */
@media (min-width: 62.0625rem) {
  .protocol-card__inner {
    height: min(calc(100vh - 12rem), 54rem);
    min-height: 0;
  }

  .protocol-card__stage {
    display: grid;
    /* One full-width column: without it an auto column sizes to content and
       both bands collapse to the middle of the panel. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 2fr) minmax(0, 3fr);
    align-content: stretch;
    gap: clamp(0.85rem, 1.6vw, 1.25rem);
    min-height: 0;
  }

  .protocol-card__stage > .product-media {
    height: 100%;
    min-height: 0;
    align-self: stretch;
  }

  .protocol-card__stage > .product-media img {
    height: 100%;
    aspect-ratio: auto;
  }

  .protocol-card__stage > .scanner,
  .protocol-card__stage > .ekg {
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
    align-self: stretch;
  }

  .protocol-card__stage > .ekg {
    display: grid;
    align-content: center;
  }

  /* The dial stays square; its band sets the size. */
  .protocol-card__stage > .helix {
    height: 100%;
    width: auto;
    max-width: 100%;
    min-height: 0;
    aspect-ratio: 1;
    justify-self: center;
  }
}

@media (min-width: 62.0625rem) and (max-height: 950px) {
  .protocol-card__copy { padding: clamp(1.5rem, 3vw, 2.5rem); gap: var(--s-4); }
  .protocol-card__index b { font-size: 1.4rem; }
  .protocol-card__title { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
  .protocol-card__body { font-size: 0.9375rem; line-height: 1.55; }
  .spec-cell { padding: 0.65rem 0.85rem; }
}

@media (min-width: 62.0625rem) and (max-height: 800px) {
  .protocol-card__copy { padding: 1.35rem 1.75rem; gap: var(--s-3); }
  .protocol-card__index b { font-size: 1.15rem; }
  .protocol-card__title { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
  .protocol-card__body { font-size: var(--t-small); line-height: 1.5; }
  .protocol-card__actions { gap: var(--s-3); }
  .protocol-card__actions .btn { padding: 0.7rem 1.1rem; }
}