:root {
  --black: #0A0A0A;
  --paper: #F5F0E8;
  --red: #D4001A;
  --ochre: #C8A400;
  --gray: #6B6B6B;
  --line: 3px;
  --thick: 6px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--black);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.display {
  font-family: 'Anton', 'Oswald', 'Impact', sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 0.9;
  font-weight: 400;
}

.label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
}

/* MASTHEAD */
.masthead {
  border-bottom: var(--thick) solid var(--black);
  padding: 14px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: var(--paper);
}
.masthead .left, .masthead .right {
  display: flex;
  gap: 18px;
  align-items: center;
}
.masthead .dot {
  width: 8px; height: 8px;
  background: var(--red);
  border-radius: 50%;
  display: inline-block;
}
.masthead .right .label { color: var(--gray); }
.masthead a { color: inherit; text-decoration: none; }

/* SCREENS */
.screen { display: none; }
.screen.active { display: block; }

/* === START SCREEN === */
#start-screen {
  padding: 20px 24px 48px;
}
.hero {
  border-top: var(--line) solid var(--black);
  padding-top: 18px;
  margin-top: 16px;
}
.hero .kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.hero .kicker .swatch {
  height: 12px; width: 48px;
  background: var(--red);
}
.hero h1 {
  font-size: clamp(46px, 8.5vw, 96px);
  margin-bottom: 20px;
}
.hero h1 .red { color: var(--red); }
.hero h1 .ochre { color: var(--ochre); display: block; }

.start-cta {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
button.btn-primary, a.btn-primary {
  background: var(--black);
  color: var(--paper);
  border: var(--thick) solid var(--black);
  font-family: 'Anton', sans-serif;
  font-size: clamp(30px, 5.5vw, 52px);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  padding: 16px 22px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  text-decoration: none;
  transition: background 0.08s linear, color 0.08s linear;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
button.btn-primary:hover, a.btn-primary:hover { background: var(--red); border-color: var(--red); color: var(--paper); }
.btn-primary .arrow { font-family: 'IBM Plex Mono', monospace; font-size: 0.5em; }

.disclaimer {
  margin-top: 12px;
  font-size: 11px;
  color: var(--gray);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: right;
}

.lede {
  max-width: 640px;
  margin-top: 32px;
  font-size: 16px;
  line-height: 1.55;
  border-left: var(--line) solid var(--black);
  padding-left: 18px;
}
.meta-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: var(--line) solid var(--black);
  border-bottom: var(--line) solid var(--black);
  margin-top: 28px;
}
.meta-row .cell {
  padding: 12px 16px;
  border-right: var(--line) solid var(--black);
}
.meta-row .cell:last-child { border-right: none; }
.meta-row .cell .num {
  font-family: 'Anton', sans-serif;
  font-size: 32px;
  line-height: 1;
  margin-bottom: 4px;
}
.meta-row .cell .desc { font-size: 11px; color: var(--gray); letter-spacing: 0.1em; text-transform: uppercase; }

/* === QUIZ SCREEN === */
#quiz-screen {
  min-height: 100vh;
  display: none;
  flex-direction: column;
}
#quiz-screen.active { display: flex; }

.progress-row {
  display: flex;
  align-items: stretch;
  border-bottom: var(--thick) solid var(--black);
  background: var(--paper);
}
.progress-counter {
  padding: 14px 18px;
  font-family: 'Anton', sans-serif;
  font-size: 28px;
  line-height: 1;
  border-right: var(--line) solid var(--black);
  min-width: 120px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.progress-counter .total { color: var(--gray); font-size: 18px; }
.progress-bar {
  flex: 1;
  display: flex;
  align-items: stretch;
}
.progress-bar .seg {
  flex: 1;
  border-right: var(--line) solid var(--black);
  background: var(--paper);
  transition: background 0.2s linear;
}
.progress-bar .seg:last-child { border-right: none; }
.progress-bar .seg.done { background: var(--black); }
.progress-bar .seg.current { background: var(--red); }

.stage-wrap {
  flex: 1;
  overflow: hidden;
  position: relative;
}
.stage {
  padding: 36px 24px 24px;
  transform: translateX(0);
  will-change: transform;
}

.question-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.question-kicker .bar {
  height: 14px; width: 38px;
  background: var(--ochre);
}

.question {
  font-size: clamp(30px, 5.6vw, 64px);
  margin-bottom: 36px;
  max-width: 1100px;
}

.options {
  display: flex;
  flex-direction: column;
  border-top: var(--thick) solid var(--black);
}
.option {
  display: grid;
  grid-template-columns: 64px 1fr 28px;
  align-items: stretch;
  border-bottom: var(--thick) solid var(--black);
  background: var(--paper);
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 16px;
  line-height: 1.4;
  color: var(--black);
  transition: background 0.07s linear, color 0.07s linear;
}
.option .letter {
  background: var(--black);
  color: var(--paper);
  font-family: 'Anton', sans-serif;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.07s linear, color 0.07s linear;
}
.option .text {
  padding: 18px 18px;
  display: flex;
  align-items: center;
}
.option .arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray);
  font-size: 18px;
  transition: color 0.07s linear, transform 0.12s ease;
}
.option:hover, .option:focus-visible {
  background: var(--black);
  color: var(--paper);
  outline: none;
}
.option:hover .letter, .option:focus-visible .letter {
  background: var(--red);
  color: var(--paper);
}
.option:hover .arrow, .option:focus-visible .arrow {
  color: var(--paper);
  transform: translateX(4px);
}

/* slide animations */
.stage.slide-out-left {
  transform: translateX(-110%);
  transition: transform 0.28s cubic-bezier(0.7, 0, 0.3, 1);
}
.stage.prep-right {
  transform: translateX(110%);
  transition: none;
}
.stage.slide-in {
  transform: translateX(0);
  transition: transform 0.28s cubic-bezier(0.7, 0, 0.3, 1);
}

/* === RESULT SCREEN === */
#result-screen { padding: 0; }
.result-top {
  border-bottom: var(--thick) solid var(--black);
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: var(--black);
  color: var(--paper);
}
.result-top .label { color: var(--paper); }
.result-top .accent {
  height: 12px; width: 48px;
  background: var(--red);
}

.result-name-block {
  padding: 36px 24px 24px;
  border-bottom: var(--thick) solid var(--black);
}
.result-name-block .axis {
  font-family: 'Anton', sans-serif;
  font-size: clamp(80px, 22vw, 220px);
  line-height: 0.85;
  color: var(--red);
}
.result-name-block .full-name {
  font-family: 'Anton', sans-serif;
  font-size: clamp(54px, 12vw, 140px);
  line-height: 0.9;
  text-transform: uppercase;
  margin-top: 8px;
}
.result-name-block .tagline {
  margin-top: 22px;
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.4;
  font-style: italic;
  max-width: 800px;
  border-left: var(--line) solid var(--black);
  padding-left: 18px;
}

.result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: var(--thick) solid var(--black);
}
.result-grid .cell {
  padding: 22px 24px;
  border-right: var(--line) solid var(--black);
  border-bottom: var(--line) solid var(--black);
}
.result-grid .cell:nth-child(2n) { border-right: none; }
.result-grid .cell:nth-last-child(-n+2) { border-bottom: none; }
.result-grid .cell h3 {
  font-family: 'Anton', sans-serif;
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--gray);
  margin-bottom: 8px;
}
.result-grid .cell p {
  font-size: 17px;
  line-height: 1.45;
}
.result-grid .cell.full {
  grid-column: 1 / -1;
  border-right: none;
}
.result-grid .cell.motto p {
  font-family: 'Anton', sans-serif;
  font-size: clamp(22px, 3.5vw, 38px);
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--black);
}

/* result accent variants */
.result-accent-M .result-name-block .axis { color: var(--red); }
.result-accent-K .result-name-block .axis { color: var(--ochre); }
.result-accent-C .result-name-block .axis { color: var(--red); }
.result-accent-C .result-name-block .full-name { color: var(--ochre); }
.result-accent-W .result-name-block .axis { color: var(--gray); }

/* SHARE */
.share {
  padding: 28px 24px;
  border-bottom: var(--thick) solid var(--black);
}
.share h3 {
  font-family: 'Anton', sans-serif;
  font-size: clamp(28px, 4vw, 44px);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.share .share-text {
  background: var(--paper);
  border: var(--line) solid var(--black);
  padding: 14px 16px;
  font-size: 15px;
  margin-bottom: 14px;
  word-break: break-word;
}
.share-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.share-buttons button {
  background: var(--paper);
  color: var(--black);
  border: var(--thick) solid var(--black);
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 22px;
  padding: 16px 18px;
  cursor: pointer;
  text-align: left;
  transition: background 0.08s linear, color 0.08s linear;
}
.share-buttons button.primary {
  background: var(--black);
  color: var(--paper);
}
.share-buttons button:hover { background: var(--red); color: var(--paper); border-color: var(--red); }
.share-buttons button.primary:hover { background: var(--red); border-color: var(--red); }

.restart {
  padding: 22px 24px 60px;
  text-align: center;
  border-top: var(--line) solid var(--black);
}
.restart button, .restart a {
  background: transparent;
  border: none;
  color: var(--black);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.restart button:hover, .restart a:hover { color: var(--red); }

/* FOOTER */
footer.foot {
  border-top: var(--thick) solid var(--black);
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  color: var(--gray);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--paper);
}

/* === RESPONSIVE === */
@media (max-width: 700px) {
  .masthead { padding: 12px 16px; flex-wrap: wrap; gap: 8px; }
  .masthead .right { display: none; }
  #start-screen { padding: 16px 16px 32px; }
  .meta-row { grid-template-columns: repeat(3, 1fr); }
  .stage { padding: 24px 16px 16px; }
  .progress-counter { font-size: 22px; min-width: 88px; padding: 10px 12px; }
  .option { grid-template-columns: 48px 1fr 22px; }
  .option .letter { font-size: 22px; }
  .option .text { padding: 14px 12px; font-size: 15px; }
  .result-name-block { padding: 24px 16px 18px; }
  .result-grid { grid-template-columns: 1fr; }
  .result-grid .cell { border-right: none; }
  .result-grid .cell:nth-child(2n) { border-right: none; }
  .result-grid .cell:nth-last-child(-n+2) { border-bottom: var(--line) solid var(--black); }
  .result-grid .cell:last-child { border-bottom: none; }
  .share { padding: 22px 16px; }
  .share-buttons { grid-template-columns: 1fr; }
  footer.foot { padding: 12px 16px; flex-direction: column; align-items: flex-start; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .stage.slide-out-left,
  .stage.slide-in {
    transition: none;
  }
}