:root {
  --ink: #161410;
  --ink-soft: #3a342c;
  --bottle: #0e2418;
  --bottle-mid: #163528;
  --accent: #8c6232;
  --accent-text: #8c6232;
  --accent-bright: #c4a36a;
  --parchment: #f4efe4;
  --cream: #f7f3ea;
  --paper: #e7e0d2;
  --muted: #5c564c;
  --line: color-mix(in srgb, var(--ink) 16%, transparent);
  --tint: #0e2418;
  --wax: #6e3a32;
}

.hero-media img {
  object-position: center 28%;
  filter: none;
}

@media (max-width: 839px) {
  .hero-media img {
    object-position: 14% top;
  }
}

.hero-media::after {
  background:
    linear-gradient(90deg, rgba(8, 18, 12, 0.42) 0%, rgba(8, 18, 12, 0.28) 58%, rgba(8, 18, 12, 0.12) 100%),
    linear-gradient(180deg, rgba(8, 18, 12, 0.58) 0%, rgba(8, 18, 12, 0.46) 22%, rgba(8, 18, 12, 0.5) 48%, rgba(8, 18, 12, 0.62) 68%, rgba(8, 18, 12, 0.82) 84%, rgba(8, 18, 12, 0.94) 100%);
}

.bar > span {
  background: var(--ink);
}

.section-tint {
  --still-label: transparent;
  background: var(--bottle);
}

.still-dial {
  --still-hand-from: var(--parchment);
}

.still-hub.is-on,
.still-hub.is-hot {
  background: transparent;
  border-color: var(--parchment);
  box-shadow: inset 0 0 0 1px var(--parchment);
}

.still-seal {
  color: var(--parchment);
}

.chip.is-on,
.chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--parchment);
}

.ledger-frame {
  overflow: visible;
  outline: none;
}

.ledger.is-ready .ledger-frame {
  overflow: hidden;
}

.ledger-frame:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 4px;
}

.ledger-track {
  display: grid;
  gap: 1.4rem;
}

@media (min-width: 700px) {
  .ledger-track {
    grid-template-columns: 1fr 1fr;
  }
}

.ledger.is-ready .ledger-track {
  display: flex;
  gap: 0;
  touch-action: pan-y;
  transition: transform 0.45s var(--ease);
}

.ledger-track.is-instant {
  transition: none;
}

.ledger.is-ready .award {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 7.5rem;
  margin: 0;
}

.ledger-nav {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.4rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line-light);
  color: var(--parchment);
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ledger.is-ready .ledger-nav {
  display: flex;
}

.ledger-nav button {
  padding: 0.35rem 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.ledger-nav button:hover {
  color: var(--accent-bright);
}

.ledger-count {
  margin: 0;
  color: color-mix(in srgb, var(--parchment) 68%, transparent);
}

#house .portrait {
  margin-inline: auto;
  width: min(22rem, 100%);
  padding: 1.15rem;
  background: var(--paper);
  box-shadow:
    inset 0 0 0 0.42rem var(--bottle),
    inset 0 0 0 calc(0.42rem + 1px) var(--accent-bright),
    0 0 0 1px color-mix(in srgb, var(--bottle) 35%, transparent),
    0 16px 32px color-mix(in srgb, var(--ink) 11%, transparent);
}

#house .portrait img {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 16%, transparent);
}