/* ==========================================================================
   chrome — the bar, the process rail, the boot, the footer
   ========================================================================== */

/* ── boot ───────────────────────────────────────────────────────────────
   Short, and it does one honest job: the fonts and the first solver build
   land before anything is shown, so the hero's flask is already glowing on
   the first frame the visitor sees rather than popping in cold. */

.boot {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--shell);
  display: grid;
  place-items: center;
  transition: opacity 0.7s var(--settle);
}
.boot[data-gone] {
  opacity: 0;
  pointer-events: none;
}
.boot__mark {
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--sand);
}
.boot__bar {
  margin-top: 0.9rem;
  width: min(38vw, 13rem);
  height: 1px;
  background: var(--line);
  overflow: hidden;
}
.boot__bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--patina);
  transition: width 0.4s var(--settle);
}

/* ── the bar ────────────────────────────────────────────────────────────── */

.bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--shell) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.bar__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 3.65rem;
}

.bar__mark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--f-display);
  font-size: 1.32rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}
.bar__mark span {
  color: var(--patina);
}

/* The rail: the sections, numbered, because a casting is a sequence and the
   numbers are the only navigation this page needs. */
.rail {
  display: none;
  gap: 1.15rem;
  align-items: center;
}
@media (min-width: 62rem) {
  .rail {
    display: flex;
  }
}

.rail a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
  transition:
    color 0.35s var(--settle),
    border-color 0.35s var(--settle);
}
.rail a b {
  font-weight: 400;
  color: var(--ink-4);
  margin-right: 0.4em;
  transition: color 0.35s var(--settle);
}
.rail a:hover,
.rail a[data-on] {
  color: var(--ink);
  border-bottom-color: var(--patina);
}
.rail a[data-on] b {
  color: var(--patina);
}

.bar__end {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.bar__est {
  display: none;
}
@media (min-width: 48rem) {
  .bar__est {
    display: block;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 1.05rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.35s var(--settle),
    border-color 0.35s var(--settle),
    color 0.35s var(--settle);
}
.btn:hover {
  border-color: var(--patina);
  color: var(--patina);
}
.btn--fill {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--shell);
}
.btn--fill:hover {
  background: var(--patina);
  border-color: var(--patina);
  color: var(--shell);
}
.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* progress hairline, in patina because it is measured */
.prog {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: var(--patina);
  z-index: 61;
}

/* ── footer ─────────────────────────────────────────────────────────────── */

.foot {
  border-top: 1px solid var(--line);
  padding-block: clamp(2.5rem, 6vh, 4rem);
}
.foot__grid {
  display: grid;
  gap: 2rem;
}
@media (min-width: 52rem) {
  .foot__grid {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}
.foot__note {
  max-width: 64ch;
  font-size: var(--t-small);
  color: var(--ink-3);
  line-height: 1.6;
}
.foot__note a {
  color: var(--patina);
}