@font-face {
  font-family: "Works Shoulders";
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url("type/shoulders.woff2") format("woff2");
}
@font-face {
  font-family: "Civic Literata";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("type/literata.woff2") format("woff2");
}
@font-face {
  font-family: "Lease Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("type/redhatmono.woff2") format("woff2");
}

:root {
  --chalk: #f3eee4;
  --chalk-dim: #cfc6b4;
  --enamel: #0e1520;
  --enamel-lift: #162030;
  --brass: #8a6a32;
  --brass-bright: #c4a15a;
  --brass-ink: #5a4218;
  --vermilion: #c4312a;
  --type-display: "Works Shoulders", "Arial Narrow", sans-serif;
  --type-body: "Civic Literata", "Palatino Linotype", serif;
  --type-ledger: "Lease Mono", ui-monospace, monospace;
  --measure: 38rem;
  --pad: clamp(1rem, 3vw, 2.4rem);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.yard {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(120% 80% at 50% -10%, #1b2838 0%, var(--enamel) 55%),
    var(--enamel);
  color: var(--chalk);
  font-family: var(--type-body);
  font-size: 1.05rem;
  line-height: 1.55;
  letter-spacing: 0.01em;
}

body.yard::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(180deg, transparent 0 96%, rgba(196, 161, 90, 0.05) 96%),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(196, 161, 90, 0.04) 47px 48px);
  background-size: 100% 48px, 48px 100%;
  mix-blend-mode: overlay;
  opacity: 0.45;
  z-index: 0;
}

.enamel-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  opacity: 0.09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}

.skip-yard {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 20;
  padding: 0.6rem 0.9rem;
  background: var(--chalk);
  color: var(--enamel);
  font-family: var(--type-ledger);
  text-decoration: none;
}
.skip-yard:focus { top: 1rem; }

.pointer {
  position: fixed;
  width: 18px;
  height: 18px;
  margin: -4px 0 0 -4px;
  border: 1.5px solid var(--brass-bright);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-40deg);
  pointer-events: none;
  z-index: 30;
  mix-blend-mode: difference;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--brass-bright);
  outline-offset: 3px;
}

.nameplate {
  position: relative;
  z-index: 2;
  width: calc(100% - 2 * var(--pad));
  margin: var(--pad) auto 0;
  border-collapse: collapse;
  background: linear-gradient(180deg, #b08a42 0%, var(--brass) 42%, #6d5324 100%);
  color: var(--enamel);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 190, 0.45),
    0 10px 30px rgba(0, 0, 0, 0.35);
}
.nameplate caption {
  caption-side: top;
  text-align: left;
  padding: 0.45rem 0.2rem 0.55rem;
  font-family: var(--type-ledger);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-bright);
}
.nameplate th,
.nameplate td {
  padding: 0.7rem 1rem;
  border-right: 1px solid rgba(14, 21, 32, 0.22);
  vertical-align: middle;
}
.nameplate th {
  font-family: var(--type-ledger);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-ink);
  width: 6.5rem;
}
.nameplate td {
  font-family: var(--type-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.nameplate td.word {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing: 0.08em;
}

.court {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(17rem, 0.65fr);
  grid-template-areas:
    "dial pend"
    "ruler pend";
  gap: 1.25rem 1.75rem;
  width: min(92rem, calc(100% - 2 * var(--pad)));
  margin: 1.6rem auto 0;
  align-items: start;
}

.dial-case {
  grid-area: dial;
  position: relative;
  margin: 0;
  aspect-ratio: 1;
  max-height: min(86vh, 52rem);
  background:
    radial-gradient(circle at 50% 46%, #182433 0%, #0b1018 72%);
  border: 10px solid #6e5426;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 2px #c4a15a,
    inset 0 0 0 14px #3d2e14,
    0 30px 80px rgba(0, 0, 0, 0.45);
  overflow: visible;
}
#escapement {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.rim {
  position: absolute;
  inset: 14%;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.rim li {
  position: absolute;
  inset: 0;
  display: grid;
  justify-items: center;
  align-items: start;
  transform: rotate(calc(var(--i) * 72deg));
}
.rim li span {
  font-family: var(--type-ledger);
  font-size: clamp(0.62rem, 1.1vw, 0.78rem);
  letter-spacing: 0.16em;
  color: var(--brass-bright);
  transform: rotate(calc(var(--i) * -72deg));
}

.ruler {
  grid-area: ruler;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.8rem;
  align-items: center;
  margin-top: -0.2rem;
}
.ruler-label,
.ruler-stop {
  margin: 0;
  font-family: var(--type-ledger);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-bright);
}
.ruler-stop {
  color: var(--vermilion);
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--vermilion);
}
.ruler-track {
  position: relative;
  height: 1.55rem;
  background: #1a140c;
  border: 1px solid var(--brass);
  box-shadow: inset 0 0 0 1px #3a2a12;
}
.ruler-fill {
  position: absolute;
  inset: 3px auto 3px 3px;
  width: 82%;
  background:
    repeating-linear-gradient(90deg, #c4a15a 0 10px, #8a6a32 10px 12px);
  transform-origin: left center;
  transition: width 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ruler-ticks {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0 4px;
  list-style: none;
  pointer-events: none;
}
.ruler-ticks li {
  width: 1px;
  height: 100%;
  background: rgba(243, 238, 228, 0.28);
}

.pendulum {
  grid-area: pend;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.2rem 1.15rem 1.3rem;
  background: var(--chalk);
  color: var(--enamel);
  box-shadow:
    inset 0 0 0 1px #d7cebc,
    0 16px 40px rgba(0, 0, 0, 0.28);
}
.pendulum-kicker {
  margin: 0;
  font-family: var(--type-ledger);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-ink);
}
.pendulum-state {
  margin: 0;
  font-family: var(--type-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 0.9;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pendulum-note {
  margin: 0;
  max-width: 28rem;
  color: #2b261c;
}
.pendulum-keys {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.key {
  min-height: 2.75rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--brass-ink);
  background: transparent;
  color: var(--enamel);
  font-family: var(--type-ledger);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.key:hover,
.key.is-live {
  background: var(--enamel);
  color: var(--chalk);
}
.key.miss { border-color: var(--vermilion); color: var(--vermilion); }
.key.miss:hover,
.key.miss.is-live {
  background: var(--vermilion);
  color: var(--chalk);
}
.hook {
  margin: auto 0 0;
  padding-top: 0.8rem;
  border-top: 1px dashed var(--brass);
  font-family: var(--type-body);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.35;
}

.docket {
  position: relative;
  z-index: 2;
  width: min(64rem, calc(100% - 2 * var(--pad)));
  margin: 4.5rem auto 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ticket {
  position: relative;
  padding: 1.4rem 1.5rem 1.5rem 6.2rem;
  background: #efe8d8;
  color: var(--enamel);
  border-bottom: 1px dashed #b7ad96;
  box-shadow: inset 18px 0 0 var(--brass);
}
.ticket::before {
  content: "";
  position: absolute;
  left: 0.55rem;
  top: 50%;
  width: 0.85rem;
  height: 0.85rem;
  margin-top: -0.42rem;
  border-radius: 50%;
  background: var(--enamel);
  box-shadow: 0 0 0 3px #efe8d8, 0 0 0 4px var(--brass);
}
.ticket-no {
  position: absolute;
  left: 1.8rem;
  top: 1.45rem;
  margin: 0;
  font-family: var(--type-ledger);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--brass-ink);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.ticket h2 {
  margin: 0 0 0.4rem;
  font-family: var(--type-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ticket p { margin: 0; max-width: 42rem; }
.ticket-stamp {
  position: absolute;
  right: 1.1rem;
  top: 1.2rem;
  margin: 0;
  padding: 0.25rem 0.45rem;
  border: 2px solid var(--brass);
  color: var(--brass-ink);
  font-family: var(--type-ledger);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  transform: rotate(8deg);
  opacity: 0.28;
}
.ticket.is-live .ticket-stamp { opacity: 1; }
.ticket-stamp.miss { border-color: var(--vermilion); color: var(--vermilion); }

.certificate {
  position: relative;
  z-index: 2;
  width: min(70rem, calc(100% - 2 * var(--pad)));
  margin: 4.8rem auto 0;
  padding: 1.6rem 1.5rem 1.8rem;
  background:
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(138, 106, 50, 0.12) 27px 28px),
    #f6f1e6;
  color: var(--enamel);
  box-shadow: inset 0 0 0 2px var(--brass);
}
.cert-head {
  margin: 0 0 1rem;
  font-family: var(--type-ledger);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-ink);
}
.cert-table {
  width: 100%;
  border-collapse: collapse;
}
.cert-table th,
.cert-table td {
  padding: 0.7rem 0.6rem;
  border-top: 1px solid #d2c8b2;
  text-align: left;
  vertical-align: top;
}
.cert-table th {
  width: 8.5rem;
  font-family: var(--type-display);
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.cert-mark {
  position: absolute;
  right: 1.4rem;
  bottom: 1.2rem;
  margin: 0;
  padding: 0.35rem 0.55rem;
  border: 2px solid var(--vermilion);
  color: var(--vermilion);
  font-family: var(--type-ledger);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  transform: rotate(-6deg);
}

.sector {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
  gap: 1.5rem 2rem;
  width: min(70rem, calc(100% - 2 * var(--pad)));
  margin: 4.5rem auto 0;
  padding: 1.4rem 0 0;
  border-top: 1px solid rgba(196, 161, 90, 0.35);
}
.sector figcaption { margin: 0; }
.sector-kicker {
  margin: 0 0 0.35rem;
  font-family: var(--type-ledger);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-bright);
}
.sector h2 {
  margin: 0 0 0.7rem;
  font-family: var(--type-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 0.95;
}
.sector p {
  margin: 0 0 0.8rem;
  max-width: var(--measure);
  color: var(--chalk-dim);
}
.sector svg {
  width: 100%;
  height: auto;
  background: #0b1018;
  border: 1px solid var(--brass);
}

.spec {
  position: relative;
  z-index: 2;
  columns: 2 18rem;
  column-gap: 2.2rem;
  width: min(70rem, calc(100% - 2 * var(--pad)));
  margin: 3.6rem auto 0;
  padding: 1.6rem 1.5rem;
  background: #101820;
  border: 1px solid var(--brass);
}
.spec > div {
  break-inside: avoid;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(196, 161, 90, 0.18);
}
.spec dt {
  font-family: var(--type-ledger);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-bright);
}
.spec dd {
  margin: 0.25rem 0 0;
  max-width: 34rem;
}

.plate-end {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.6rem;
  align-items: center;
  width: min(70rem, calc(100% - 2 * var(--pad)));
  margin: 3.4rem auto 2.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(196, 161, 90, 0.3);
  font-family: var(--type-ledger);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.plate-word {
  margin: 0;
  font-family: var(--type-display);
  font-size: 1.3rem;
  letter-spacing: 0.16em;
}
.plate-end address { font-style: normal; }
.plate-end a {
  color: var(--brass-bright);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.plate-end a[aria-disabled="true"] {
  opacity: 0.55;
  border-bottom-style: dashed;
}

body.stopped {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--enamel);
  color: var(--chalk);
  font-family: var(--type-body);
}
.stopped-face {
  width: min(34rem, calc(100% - 2rem));
  padding: 2rem 1.6rem;
  border: 1px solid var(--brass);
  text-align: left;
}
.stopped-stamp {
  margin: 0 0 0.8rem;
  font-family: var(--type-ledger);
  letter-spacing: 0.16em;
  color: var(--vermilion);
}
.stopped-face h1 {
  margin: 0 0 0.6rem;
  font-family: var(--type-display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.stopped-face a { color: var(--brass-bright); }

@media (max-width: 860px) {
  .nameplate caption {
    letter-spacing: 0.08em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .nameplate tbody {
    display: grid;
    grid-template-columns: 6.2rem 1fr;
  }
  .nameplate tr { display: contents; }
  .nameplate th,
  .nameplate td {
    display: block;
    width: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(14, 21, 32, 0.16);
    padding: 0.55rem 0.8rem;
  }
  .nameplate td.word { font-size: 1.7rem; }
  .court {
    grid-template-columns: 1fr;
    grid-template-areas:
      "dial"
      "ruler"
      "pend";
  }
  .dial-case { max-height: none; }
  .ruler {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
  .certificate { padding-bottom: 3.4rem; }
  .sector { grid-template-columns: 1fr; }
  .spec { columns: 1; }
}

@media (pointer: coarse) {
  .pointer { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ruler-fill,
  .ticket-stamp,
  .key { transition: none; }
}