@font-face {
  font-family: "DM Sans";
  src: url("/static/dm-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("/static/fraunces-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --ink: #142c30;
  --ink-soft: #365257;
  --deep: #122b2f;
  --deep-light: #214247;
  --paper: #f3f0e9;
  --paper-light: #fdfbf6;
  --gold: #c79b67;
  --gold-light: #e1c39c;
  --line: #dcd6ca;
  --body-font: "DM Sans", Arial, sans-serif;
  --display-font: "Fraunces", Georgia, serif;
}

* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); font-family: var(--body-font); }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 5% 0%, #faf8f2 0, transparent 36%), var(--paper); }
button, input { font: inherit; }
a { color: inherit; }
button, .primary-link { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.page-frame { min-height: 100vh; display: flex; flex-direction: column; }
.site-header, .page-footer { width: min(1320px, calc(100% - 64px)); margin: 0 auto; }
.site-header { min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.brand-symbol { width: 43px; height: 43px; display: grid; place-items: center; color: #916c42; }
.brand-symbol svg { width: 43px; height: 43px; }
.brand-type { display: grid; line-height: 1; gap: 4px; letter-spacing: .12em; }
.brand-type strong { font-family: var(--display-font); font-weight: 600; font-size: 1.2rem; letter-spacing: .07em; }
.brand-type small { font-size: .58rem; font-weight: 700; letter-spacing: .18em; }
.header-note, .page-footer { font-size: .68rem; font-weight: 700; letter-spacing: .17em; color: #6c7772; }
.page-footer { display: flex; justify-content: space-between; gap: 20px; padding: 24px 0 28px; }

.home-main { width: min(1320px, calc(100% - 64px)); margin: auto; padding: 8px 0 20px; }
.hero-panel, .story-panel { position: relative; isolation: isolate; overflow: hidden; color: #f6f1e8; background: var(--deep); border: 1px solid #375258; border-radius: 22px; box-shadow: 0 28px 70px rgba(24, 38, 35, .15); }
.hero-panel { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr); }
.hero-panel::before, .story-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(circle at 79% 45%, rgba(187, 141, 83, .13), transparent 38%), linear-gradient(126deg, transparent 45%, rgba(255,255,255,.035)); }
.hero-copy { padding: clamp(38px, 5vw, 70px); position: relative; z-index: 1; }
.overline { display: flex; align-items: center; gap: 13px; margin: 0 0 24px; color: var(--gold-light); font-size: .68rem; font-weight: 700; letter-spacing: .19em; }
.overline-rule { display: block; width: 28px; height: 1px; background: currentColor; flex: none; }
.hero-copy h1, .story-copy h1 { max-width: 720px; font: 500 clamp(3.5rem, 5.5vw, 6rem)/.99 var(--display-font); letter-spacing: -.045em; margin: 0; }
.hero-copy h1 em, .story-copy h1 em { display: block; font-weight: 400; color: var(--gold-light); }
.hero-lead, .story-lead { max-width: 600px; margin: 26px 0 0; color: #d4dfd9; font-size: 1.04rem; line-height: 1.7; }
.hero-facts { display: flex; gap: 28px; padding: 25px 0 22px; margin-top: 25px; border-top: 1px solid rgba(223, 216, 194, .23); border-bottom: 1px solid rgba(223, 216, 194, .23); }
.hero-facts div { min-width: 0; display: grid; gap: 3px; }
.hero-facts div + div { border-left: 1px solid rgba(223, 216, 194, .24); padding-left: 28px; }
.hero-facts strong { font: 500 2rem/1 var(--display-font); color: var(--gold-light); }
.hero-facts span { font-size: .72rem; line-height: 1.35; color: #d1dad5; }
.start-form { margin-top: 26px; padding: 24px; border: 1px solid #eadfcf; border-radius: 12px; background: #f9f6f0; color: var(--ink); box-shadow: 0 14px 45px rgba(2, 17, 17, .19); }
.form-heading { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.form-symbol { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid #d6c5ab; border-radius: 50%; color: #987348; font-size: 1.35rem; }
.form-eyebrow { display: block; font-size: .58rem; font-weight: 700; letter-spacing: .2em; color: #96754f; }
.form-heading h2 { margin: 3px 0 0; font: 500 1.35rem/1.2 var(--display-font); }
.start-form label { display: block; margin-bottom: 9px; font-size: .81rem; font-weight: 700; color: #455657; }
.form-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.form-row input { width: 100%; min-width: 0; padding: 13px 14px; background: #fff; border: 1px solid #d3d0c9; border-radius: 5px; color: var(--ink); }
.form-row input::placeholder { color: #8c9592; }
.form-row button, .actions button, .restart-actions button, .primary-link { display: inline-flex; justify-content: center; align-items: center; gap: 18px; padding: 13px 17px; border: 1px solid var(--deep); border-radius: 5px; background: var(--deep); color: #fff; font-size: .83rem; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .18s, transform .18s; }
.form-row button:hover, .actions button:hover, .restart-actions button:hover, .primary-link:hover { background: var(--deep-light); transform: translateY(-1px); }
.form-row button span, .actions button span, .restart-actions button span, .primary-link span { color: var(--gold-light); font-size: 1.1rem; font-weight: 400; }
.hero-fine { max-width: 570px; margin: 17px 0 0; color: #b9c8c1; font-size: .77rem; line-height: 1.5; }
.hero-art { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; padding: 54px 30px; border-left: 1px solid rgba(223, 216, 194, .13); background: radial-gradient(circle at 50% 50%, rgba(216, 172, 110, .08), transparent 52%); }
.hero-art::before { content: ""; position: absolute; inset: 24px; border: 1px solid rgba(224, 197, 154, .18); pointer-events: none; }
.archetype-wheel { display: block; width: min(100%, 610px); height: auto; filter: drop-shadow(0 14px 28px rgba(0,0,0,.12)); }
.art-top, .art-bottom { position: absolute; left: 52px; right: 52px; display: flex; justify-content: space-between; gap: 15px; color: #bca98b; font-size: .57rem; font-weight: 700; letter-spacing: .19em; }
.art-top { top: 48px; }
.art-bottom { bottom: 48px; }

.quiz-shell { width: min(1130px, calc(100% - 64px)); margin: 0 auto; flex: 1; padding: 43px 0 62px; }
.quiz-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.section-index { margin: 0 0 7px; color: #9d744a; font-size: .7rem; font-weight: 700; letter-spacing: .18em; }
.section-index span { color: #9fa6a0; }
.quiz-heading h1 { margin: 0; font: 500 clamp(2.15rem, 3.3vw, 3.25rem)/1.12 var(--display-font); letter-spacing: -.035em; }
.question-count { display: grid; justify-items: end; gap: 2px; flex: none; }
.question-count > span { font-size: .64rem; font-weight: 700; letter-spacing: .17em; color: #94734c; }
.question-count strong { font: 500 2.1rem/1 var(--display-font); }
.question-count small { font-size: .95rem; color: #8e9b95; }
.progress { overflow: hidden; height: 5px; margin-top: 27px; background: #dbd8d0; border-radius: 99px; }
.progress div { height: 100%; min-width: 5px; border-radius: inherit; background: linear-gradient(90deg, #9d744a, #d7b887); }
.question-layout { display: grid; grid-template-columns: 188px minmax(0, 1fr); gap: 36px; margin-top: 39px; }
.question-aside { border-top: 1px solid #bfae92; padding-top: 8px; color: var(--ink-soft); }
.aside-wheel { width: 145px; margin: 0 auto 9px; border-radius: 50%; background: var(--deep); }
.aside-wheel .archetype-wheel { width: 145px; }
.aside-label { display: block; margin-bottom: 14px; color: #9a754c; font-size: .61rem; font-weight: 700; letter-spacing: .19em; }
.question-aside p { margin: 0 0 12px; font-size: .82rem; line-height: 1.55; }
.quiz-form { min-width: 0; }
.question-card { padding: clamp(24px, 3vw, 44px); background: var(--paper-light); border: 1px solid #d9d1c2; border-radius: 13px; box-shadow: 0 14px 36px rgba(33, 45, 38, .065); }
.question-fields { margin: 0; padding: 0; min-width: 0; border: 0; }
.question-fields legend { display: block; width: 100%; max-width: 100%; padding: 0; }
.question-kicker { display: block; margin-bottom: 12px; color: #a57c51; font-size: .65rem; font-weight: 700; letter-spacing: .19em; }
.question-prompt { display: block; max-width: 760px; color: var(--ink); font: 500 clamp(1.55rem, 2.45vw, 2.2rem)/1.25 var(--display-font); letter-spacing: -.025em; }
.options { display: grid; gap: 11px; margin-top: 33px; counter-reset: choice; }
.option { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr) 24px; align-items: center; gap: 16px; min-height: 72px; padding: 13px 18px; background: #fff; border: 1px solid #dedbd3; border-radius: 7px; color: #2c4346; font-size: .91rem; line-height: 1.5; cursor: pointer; transition: border-color .18s, background .18s, transform .18s; }
.option::before { counter-increment: choice; content: counter(choice, upper-alpha); width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #d6c5ae; border-radius: 50%; color: #a07c50; font: 700 .74rem/1 var(--body-font); }
.option:hover { border-color: #a58b68; background: #faf8f2; transform: translateX(2px); }
.option input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.option:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }
.option:has(input:checked) { border-color: #2e5a56; background: #edf4ec; }
.option:has(input:checked)::before { border-color: var(--deep); background: var(--deep); color: #fff; }
.option-copy { min-width: 0; }
.option-arrow { justify-self: end; color: #997048; font-size: 1.12rem; opacity: 0; }
.option:has(input:checked) .option-arrow { opacity: 1; }
.actions { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 22px; }
.actions > span { color: #657570; font-size: .77rem; }
.actions button { min-width: 215px; padding: 15px 19px; }
.restart-link { margin: 24px 0 0; text-align: right; font-size: .78rem; }
.restart-link a, .story-secondary a, .restart-actions a { color: #66543e; text-decoration-color: #bda177; text-underline-offset: 4px; }
.restart-link a:hover, .story-secondary a:hover, .restart-actions a:hover { color: var(--ink); }

.story-shell { width: min(1230px, calc(100% - 64px)); margin: auto; flex: 1; display: grid; align-items: center; padding: 20px 0 32px; }
.story-panel { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr); min-height: 650px; }
.story-copy { padding: clamp(42px, 6vw, 86px); position: relative; z-index: 1; align-self: center; }
.story-copy h1 { font-size: clamp(3.4rem, 5.5vw, 5.6rem); }
.story-lead { max-width: 530px; margin-bottom: 30px; }
.primary-link, .restart-actions button { padding: 16px 22px; background: var(--gold-light); border-color: var(--gold-light); color: var(--ink); }
.primary-link:hover, .restart-actions button:hover { background: #ecd4b5; }
.primary-link span, .restart-actions button span { color: var(--ink); }
.story-fine { max-width: 500px; color: #bfcbc5; font-size: .77rem; line-height: 1.6; margin-top: 20px; }
.story-secondary { margin-top: 22px; font-size: .84rem; }
.story-secondary a, .restart-actions a { color: #e4d5bf; }
.story-art { position: relative; min-width: 0; display: grid; align-content: center; justify-items: center; padding: 35px; border-left: 1px solid rgba(223, 216, 194, .13); }
.story-art .archetype-wheel { width: min(100%, 500px); }
.story-art > span { position: absolute; bottom: 43px; color: #bca98b; font-size: .62rem; font-weight: 700; letter-spacing: .2em; }
.restart-actions { display: flex; align-items: center; gap: 23px; flex-wrap: wrap; }
.restart-actions a { font-size: .81rem; }

@media (max-width: 980px) {
  .hero-panel, .story-panel { grid-template-columns: 1fr; }
  .hero-art, .story-art { border-left: 0; border-top: 1px solid rgba(223, 216, 194, .13); }
  .hero-art { height: 420px; padding: 25px; }
  .hero-art .archetype-wheel { width: 410px; }
  .story-art { min-height: 370px; }
  .story-art .archetype-wheel { width: 340px; }
  .question-layout { grid-template-columns: 150px minmax(0, 1fr); gap: 24px; }
  .aside-wheel, .aside-wheel .archetype-wheel { width: 118px; }
}

@media (max-width: 700px) {
  .site-header, .page-footer, .home-main, .quiz-shell, .story-shell { width: min(100% - 32px, 620px); }
  .site-header { min-height: 76px; }
  .header-note { display: none; }
  .page-footer { font-size: .57rem; line-height: 1.5; }
  .page-footer span:last-child { text-align: right; }
  .hero-panel, .story-panel { border-radius: 14px; }
  .hero-copy, .story-copy { padding: 34px 25px; }
  .hero-copy h1, .story-copy h1 { font-size: clamp(2.85rem, 10vw, 4.3rem); }
  .hero-lead, .story-lead { font-size: .96rem; line-height: 1.6; }
  .hero-facts { gap: 12px; }
  .hero-facts div + div { padding-left: 12px; }
  .hero-facts strong { font-size: 1.6rem; }
  .hero-facts span { font-size: .64rem; }
  .start-form { padding: 18px; }
  .form-row { grid-template-columns: 1fr; }
  .form-row button { width: 100%; }
  .hero-art { height: 330px; }
  .hero-art .archetype-wheel { width: 320px; }
  .art-top, .art-bottom { left: 34px; right: 34px; font-size: .48rem; }
  .art-top { top: 35px; }
  .art-bottom { bottom: 35px; }
  .quiz-shell { padding-top: 24px; }
  .quiz-heading h1 { font-size: 2.15rem; }
  .question-count strong { font-size: 1.55rem; }
  .question-layout { display: block; margin-top: 22px; }
  .question-aside { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-bottom: 19px; padding: 0; border: 0; }
  .question-aside .aside-wheel { display: none; }
  .aside-label { width: 100%; margin: 0 0 2px; }
  .question-aside p { display: inline; margin: 0; font-size: .79rem; }
  .question-card { padding: 23px 19px; }
  .question-prompt { font-size: 1.55rem; }
  .options { margin-top: 25px; }
  .option { grid-template-columns: 34px minmax(0, 1fr) 16px; gap: 10px; padding: 13px 12px; font-size: .86rem; }
  .option::before { width: 31px; height: 31px; }
  .actions { display: grid; }
  .actions button { order: -1; width: 100%; }
  .restart-link { text-align: left; }
  .story-panel { min-height: 0; }
  .story-art { min-height: 300px; }
  .story-art .archetype-wheel { width: 280px; }
  .story-art > span { bottom: 25px; font-size: .5rem; }
}

@media (max-width: 390px) {
  .hero-facts strong { font-size: 1.4rem; }
  .hero-facts span { font-size: .59rem; }
  .option-arrow { display: none; }
  .option { grid-template-columns: 32px minmax(0,1fr); }
}