:root {
  --green: #1f6a4f;
  --green-dark: #124b38;
  --red: #ad2f3b;
  --red-dark: #84232c;
  --gold: #d5aa3d;
  --gold-pale: #f4ebcf;
  --blue: var(--green);
  --blue-dark: var(--green-dark);
  --link: var(--red);
  --sky: var(--gold-pale);
  --ink: #191919;
  --muted: #5d6570;
  --line: #c9d1d8;
  --pale: #f8f4ea;
  --white: #fff;
}

* { box-sizing: border-box; }

html {
  min-width: 320px;
  background: var(--white);
  color: var(--ink);
  font-family: "Times New Roman", "Nimbus Roman", Times, serif;
  -webkit-font-smoothing: antialiased;
}

body { margin: 0; }
button, summary { font: inherit; }
button { border-radius: 0; }
a.button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

.wrap {
  width: min(1040px, calc(100% - 48px));
  margin: 0 auto;
}

.site-head {
  height: 112px;
  position: relative;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid #edf0f2;
  background: var(--white);
}

.mark {
  width: 50px;
  height: 88px;
  padding: 0 6px;
  background: var(--blue);
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
}

.mark i { width: 17px; height: 2px; background: var(--gold); }
.site-name { position: absolute; top: 46px; left: calc(50% + 61px); color: var(--blue); font-size: 14px; font-weight: 700; white-space: nowrap; }

.intro-page,
.quiz-page {
  min-height: calc(100vh - 112px);
  border-top: 10px solid transparent;
  border-image: linear-gradient(90deg, var(--green) 0 42%, var(--gold) 42% 58%, var(--red) 58% 100%) 1;
}

.intro {
  padding: clamp(58px, 8vh, 92px) 0 90px;
  display: grid;
  grid-template-columns: minmax(0, 1.07fr) minmax(330px, .76fr);
  align-items: center;
  gap: clamp(46px, 7vw, 96px);
}

.intro-copy { text-align: left; }

.date-line {
  margin: 0 0 17px;
  color: var(--link);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.intro h1 {
  max-width: 680px;
  margin: 0;
  color: var(--blue-dark);
  font-size: clamp(52px, 6.2vw, 80px);
  line-height: .98;
  letter-spacing: -.045em;
}

.intro-history { max-width: 650px; margin: 30px 0 0; color: #3d454c; font-size: 17px; line-height: 1.62; }
.alpha-notice { max-width: 650px; margin-top: 26px; padding: 17px 19px; border-left: 5px solid var(--gold); background: var(--pale); }
.alpha-notice strong { color: var(--link); font-size: 13px; letter-spacing: .09em; text-transform: uppercase; }
.alpha-notice p { margin: 7px 0 0; color: #3d454c; font-size: 15px; line-height: 1.5; }
.dek { margin: 24px 0 25px; color: var(--muted); font-size: 16px; }
.recording-note { max-width: 440px; margin: 16px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.intro-image { margin: 0; position: relative; }
.intro-image::before { content: ""; position: absolute; inset: -13px 13px 13px -13px; z-index: -1; background: var(--sky); }
.intro-image img { width: 100%; max-height: 660px; display: block; object-fit: cover; object-position: center; border-top: 8px solid var(--green); border-bottom: 5px solid var(--red); }

.button {
  min-height: 51px;
  padding: 12px 25px;
  border: 2px solid var(--link);
  cursor: pointer;
  font-weight: 700;
}

.button-primary { background: var(--link); color: var(--white); }
.button-primary:hover, .button-primary:focus-visible { background: var(--blue-dark); border-color: var(--blue-dark); }
.button-secondary { background: var(--white); color: var(--link); }
.button-secondary:hover, .button-secondary:focus-visible { background: var(--sky); }

.roster { width: 100%; margin: 34px 0 0; grid-column: 1 / -1; border-top: 1px solid var(--line); text-align: left; }
.roster summary { padding: 17px 2px; color: var(--link); cursor: pointer; font-weight: 700; list-style-position: inside; }
.roster ol { margin: 8px 0 0; padding: 0 0 0 42px; columns: 3; column-gap: 48px; }
.roster li { padding: 5px 5px 5px 2px; break-inside: avoid; color: #3f464d; font-size: 14px; line-height: 1.35; }

.quiz { padding: 52px 0 90px; }
.progress-row { display: grid; grid-template-columns: 34px 1fr 45px; align-items: center; gap: 13px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.progress { height: 5px; overflow: hidden; background: #e1e6ea; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--green) 0 42%, var(--gold) 42% 58%, var(--red) 58% 100%); transition: width 180ms ease; }
.question {
  max-width: 920px;
  min-height: 142px;
  margin: clamp(70px, 11vh, 118px) 0 0;
  color: var(--blue-dark);
  font-size: clamp(37px, 5.3vw, 62px);
  line-height: 1.08;
  letter-spacing: -.035em;
}

.question-context {
  max-width: 820px;
  margin-top: 28px;
  padding: 14px 17px;
  border-left: 4px solid var(--blue);
  background: var(--pale);
  color: #454c53;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
}
.question-context p { margin: 0; font-size: 14px; line-height: 1.45; }
.question-context a { flex: 0 0 auto; color: var(--link); font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.question-context a:hover, .question-context a:focus-visible { text-decoration: underline; }

.answers { max-width: 720px; margin-top: 31px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.answer {
  min-height: 73px;
  padding: 0 21px;
  border: 2px solid var(--link);
  background: var(--white);
  color: var(--link);
  display: flex;
  align-items: center;
  gap: 18px;
  cursor: pointer;
  font-size: 21px;
  font-weight: 700;
  text-align: left;
}
.answer:hover, .answer:focus-visible { background: var(--sky); outline: none; }
.answer kbd { min-width: 28px; padding: 5px 6px; border: 1px solid currentColor; color: var(--link); font: 700 12px/1 "Times New Roman", "Nimbus Roman", Times, serif; text-align: center; }
.back { margin-top: 24px; padding: 4px 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--link); cursor: pointer; font-weight: 700; }

.result-page { border-top: 10px solid transparent; border-image: linear-gradient(90deg, var(--green) 0 42%, var(--gold) 42% 58%, var(--red) 58% 100%) 1; }
.result-head { min-height: 390px; padding: 84px 330px 76px 0; position: relative; }
.result-art { width: 280px; height: 245px; position: absolute; top: 60px; right: 0; object-fit: contain; }
.result-head h1 { margin: 0; color: var(--blue-dark); font-size: clamp(51px, 7vw, 84px); line-height: .99; letter-spacing: -.045em; }
.result-label { margin: 17px 0 0; color: var(--link); font-size: clamp(21px, 3vw, 28px); font-weight: 700; }
.result-summary { max-width: 750px; margin: 27px 0 0; color: #343a40; font-size: 18px; line-height: 1.58; }
.nearby { margin-top: 38px; padding-top: 17px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 9px 24px; font-size: 14px; }
.nearby span { color: var(--muted); }
.nearby strong { color: var(--blue); }
.result-actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }
.result-actions button:disabled { cursor: wait; opacity: .72; }

.route-section { padding: 72px 0 88px; background: var(--blue); color: var(--white); overflow: hidden; }
.section-head { text-align: center; }
.section-head .date-line { color: var(--gold); }
.section-head h2 { margin: 0; font-size: clamp(39px, 5vw, 57px); line-height: 1; letter-spacing: -.035em; }

.route-map { max-width: 930px; margin: 70px auto 0; position: relative; }
.route-map svg { width: 100%; height: 100%; position: absolute; inset: 0; overflow: visible; }
.route-path { fill: none; stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.chosen-path { stroke: var(--gold); }
.rejected-path { stroke: rgba(255,255,255,.22); stroke-dasharray: 5 5; }
.route-stage { width: 240px; height: 28px; position: absolute; left: 50%; transform: translateX(-50%); z-index: 2; background: var(--green); color: #f2d988; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-align: center; text-transform: uppercase; }
.route-choice {
  width: 38%;
  min-height: 66px;
  padding: 12px 17px;
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 13px;
}
.route-choice.left { left: 5.5%; }
.route-choice.right { right: 5.5%; }
.route-choice span { width: 24px; height: 24px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid currentColor; font-family: "Open Sans", Arial, sans-serif; font-size: 12px; }
.route-choice strong { font-size: clamp(15px, 2vw, 20px); line-height: 1.16; }
.route-choice.selected { border: 2px solid var(--gold); background: var(--white); color: var(--green-dark); box-shadow: 0 8px 26px rgba(0,0,0,.18); }
.route-choice.rejected { border: 1px solid rgba(255,255,255,.25); background: rgba(10,55,40,.58); color: rgba(255,255,255,.49); }
.route-final { width: min(500px, 78%); min-height: 90px; padding: 18px 22px; position: absolute; left: 50%; transform: translateX(-50%); z-index: 2; border: 3px solid var(--gold); background: var(--white); color: var(--green-dark); display: flex; flex-direction: column; justify-content: center; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.route-final strong { font-size: clamp(22px, 3.2vw, 34px); line-height: 1.05; }
.route-final span { margin-top: 6px; color: var(--link); font-size: 13px; font-weight: 700; }
.final-stage { color: #fff; }

.ledger { padding: 65px 0 90px; }
.ledger details { margin-bottom: 42px; border-top: 3px solid var(--blue); border-bottom: 1px solid var(--line); }
.ledger summary { padding: 19px 1px; color: var(--link); cursor: pointer; font-weight: 700; }
.ledger ol { margin: 0; padding: 0 0 14px; list-style: none; }
.ledger li { min-height: 55px; padding: 13px 2px; border-top: 1px solid #e2e6e9; display: grid; grid-template-columns: 34px 1fr 44px; align-items: start; gap: 12px; }
.ledger li span { color: #88919a; font-size: 12px; }
.ledger li p { margin: 0; line-height: 1.35; }
.ledger li strong { color: var(--blue); font-size: 14px; text-align: right; }
.save-status { margin: -24px 0 28px; color: var(--muted); font-size: 12px; }

.feedback-section { padding: 68px 0 80px; border-top: 1px solid var(--line); background: var(--pale); }
.feedback-inner { max-width: 820px; }
.feedback-inner h2 { margin: 0; color: var(--blue-dark); font-size: clamp(38px, 5vw, 54px); line-height: 1; letter-spacing: -.035em; }
.feedback-inner > p:not(.date-line, .contact-line) { max-width: 680px; color: #454c53; font-size: 16px; line-height: 1.5; }
.feedback-inner form { margin-top: 28px; }
.feedback-inner label { display: block; margin-bottom: 9px; color: var(--blue-dark); font-weight: 700; }
.feedback-inner textarea { width: 100%; min-height: 150px; padding: 15px; border: 2px solid var(--blue); border-radius: 0; background: var(--white); color: var(--ink); resize: vertical; font: 16px/1.5 "Times New Roman", "Nimbus Roman", Times, serif; }
.feedback-inner textarea:focus { outline: 3px solid var(--gold-pale); border-color: var(--link); }
.feedback-actions { margin-top: 14px; display: flex; align-items: center; gap: 18px; }
.feedback-actions button:disabled { cursor: wait; opacity: .7; }
.form-status { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
.contact-line { margin: 42px 0 0; padding-top: 21px; border-top: 1px solid var(--line); color: var(--muted); }
.contact-line a { color: var(--link); font-weight: 700; }

.owner-body { min-height: 100vh; border-top: 10px solid transparent; border-image: linear-gradient(90deg, var(--green) 0 42%, var(--gold) 42% 58%, var(--red) 58% 100%) 1; background: var(--pale); }
.owner { padding: 72px 0 100px; }
.owner h1 { margin: 0; color: var(--blue-dark); font-size: clamp(48px, 7vw, 76px); line-height: 1; letter-spacing: -.04em; }
.owner-access { max-width: 720px; margin-top: 38px; padding: 24px; border-top: 4px solid var(--blue); background: var(--white); }
.owner-access label { display: block; margin-bottom: 9px; color: var(--blue-dark); font-weight: 700; }
.owner-access div { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.owner-access input { min-width: 0; padding: 0 13px; border: 2px solid var(--blue); border-radius: 0; font: 16px "Times New Roman", "Nimbus Roman", Times, serif; }
.owner > .form-status { margin-top: 18px; }
.response-tools { margin-top: 28px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.response-list { margin-top: 24px; display: grid; gap: 18px; }
.response-card { padding: 23px; border-left: 6px solid var(--blue); background: var(--white); }
.response-card.feedback-card { border-left-color: var(--gold); }
.response-card h2 { margin: 7px 0 17px; color: var(--blue-dark); font-size: 28px; }
.response-meta { margin: 0; color: var(--muted); font-size: 12px; }
.response-card details { border-top: 1px solid var(--line); }
.response-card summary { padding: 14px 0; color: var(--link); cursor: pointer; font-weight: 700; }
.response-card ol { margin: 0; padding: 0; list-style: none; }
.response-card li { padding: 8px 0; border-top: 1px solid #edf0f2; display: grid; grid-template-columns: 32px 1fr 42px; gap: 9px; }
.response-card li span { color: var(--muted); font-size: 12px; }
.response-card li code { color: var(--ink); overflow-wrap: anywhere; }
.response-card li strong { color: var(--blue); text-align: right; }

@media (max-width: 700px) {
  .wrap { width: min(100% - 30px, 1040px); }
  .site-head { height: 94px; justify-content: flex-start; padding-left: 16px; }
  .mark { height: 76px; }
  .site-name { top: 38px; left: 80px; }
  .intro-page, .quiz-page { min-height: calc(100vh - 94px); border-top-width: 7px; }
  .intro { padding-top: 58px; grid-template-columns: 1fr; gap: 42px; }
  .intro h1 { font-size: clamp(44px, 14vw, 68px); }
  .intro-image { grid-row: 1; width: min(82%, 390px); justify-self: center; }
  .intro-image img { max-height: 510px; }
  .intro-copy { grid-row: 2; }
  .roster { grid-row: 3; margin-top: 10px; }
  .roster ol { columns: 1; }
  .quiz { padding-top: 34px; }
  .question { min-height: 0; margin-top: 64px; font-size: clamp(35px, 10vw, 51px); }
  .question-context { margin-top: 26px; flex-direction: column; gap: 8px; }
  .answers { margin-top: 26px; gap: 10px; }
  .answer { min-height: 66px; padding: 0 15px; }
  .result-page { border-top-width: 7px; }
  .result-head { min-height: 0; padding: 50px 0 55px; }
  .result-art { width: 190px; height: 160px; margin: 0 auto 32px; position: static; display: block; }
  .nearby { flex-direction: column; }
  .result-actions { align-items: stretch; flex-direction: column; }
  .route-section { padding: 59px 0 75px; }
  .route-map { margin-top: 55px; }
  .route-choice { width: 43%; padding: 9px 10px; gap: 8px; }
  .route-choice.left { left: 1%; }
  .route-choice.right { right: 1%; }
  .route-choice strong { font-size: 14px; }
  .route-choice span { width: 20px; height: 20px; }
  .route-final { width: 92%; }
  .ledger li { grid-template-columns: 26px 1fr 36px; gap: 7px; font-size: 14px; }
  .feedback-actions { align-items: stretch; flex-direction: column; }
  .feedback-actions .form-status { min-height: 18px; }
  .owner-access div { grid-template-columns: 1fr; }
  .owner-access input { min-height: 51px; }
  .response-tools { align-items: stretch; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}