@font-face { font-family: 'Cormorant Local'; src: url('assets/fonts/cormorant-regular.ttf') format('truetype'); font-weight: 500 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Local'; src: url('assets/fonts/cormorant-italic.ttf') format('truetype'); font-weight: 500 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Manrope Local'; src: url('assets/fonts/manrope.ttf') format('truetype'); font-weight: 400 800; font-style: normal; font-display: swap; }

:root {
  --ink: #121322;
  --ink-deep: #090a13;
  --paper: #eee4cf;
  --paper-muted: #b9b0a0;
  --gold: #e8bd78;
  --gold-soft: #af8858;
  --line: rgba(232, 189, 120, .35);
  --white: #f8f4ea;
  --display: 'Cormorant Local', Georgia, serif;
  --mono: 'Manrope Local', ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink-deep); color: var(--paper); font-family: var(--mono); min-height: 100vh; overflow-x: hidden; }
button, a { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
[hidden] { display: none !important; }

body::before { content: ''; position: fixed; inset: 0; z-index: -3; pointer-events: none; background: radial-gradient(circle at 66% 38%, rgba(71, 72, 113, .24), transparent 34%), radial-gradient(circle at 11% 92%, rgba(111, 62, 53, .13), transparent 34%), linear-gradient(130deg, #10111f 0%, #17172a 56%, #11111d 100%); }
body::after { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: .14; background-image: linear-gradient(rgba(232,189,120,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(232,189,120,.04) 1px, transparent 1px); background-size: 70px 70px; mask-image: linear-gradient(to bottom, black, transparent 85%); }
.grain { position: fixed; inset: -50%; z-index: 8; pointer-events: none; opacity: .04; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.48'/%3E%3C/svg%3E"); transform: rotate(8deg); }
.stars { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.stars span { position: absolute; left: var(--x); top: var(--y); width: 3px; height: 3px; border-radius: 50%; background: var(--gold); opacity: .45; animation: blink var(--d) ease-in-out var(--delay) infinite; }
.stars span:nth-child(3n) { width: 2px; height: 2px; background: #bfc5e7; }

.topbar { height: 84px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(24px, 5vw, 76px); position: fixed; top: 0; left: 0; right: 0; z-index: 10; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--paper); text-decoration: none; font-size: 10px; letter-spacing: .2em; line-height: 1.15; }
.brand i { font-family: var(--display); font-style: italic; font-size: 15px; letter-spacing: .05em; }
.brand-mark { display: grid; place-items: center; width: 33px; height: 33px; color: var(--gold); border: 1px solid var(--line); border-radius: 50%; font-size: 17px; }
.topbar-note { color: var(--paper-muted); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; display: flex; align-items: center; gap: 9px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 14px var(--gold); }

main { min-height: 100vh; }
.screen { min-height: 100vh; position: relative; padding: 150px clamp(24px, 8vw, 140px) 70px; animation: appear .7s ease both; }
.intro-screen { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr); align-items: center; gap: 5vw; }
.intro-copy { max-width: 610px; padding-top: 1vh; }
.eyebrow, .question-tag, .result-overline, .aside-label { color: var(--gold); font-size: 11px; letter-spacing: .17em; text-transform: uppercase; margin: 0; }
.line { display: inline-block; width: 42px; height: 1px; margin: 0 12px 3px 0; background: var(--gold); opacity: .75; }
h1, h2 { font-family: var(--display); font-weight: 600; letter-spacing: -.04em; }
h1 { margin: 30px 0 24px; font-size: clamp(68px, 9.7vw, 150px); line-height: .78; color: var(--paper); }
h1 em { color: var(--gold); font-weight: 500; }
.intro-text { margin: 0; max-width: 430px; color: var(--paper-muted); font-size: 14px; line-height: 1.8; }
.intro-actions { display: flex; align-items: center; gap: 24px; margin-top: 40px; }
.primary-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; color: var(--ink); background: var(--gold); border: 0; padding: 17px 18px 17px 22px; min-width: 245px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.primary-btn:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(232,189,120,.18); background: #f1c98b; }
.btn-arrow { font-size: 19px; line-height: 0; }
.time-note { color: var(--paper-muted); font-size: 11px; }

.intro-art { height: min(67vw, 670px); min-height: 440px; position: relative; display: grid; place-items: center; isolation: isolate; }
.hat-art { width: min(40vw, 445px); max-height: 78vh; object-fit: cover; object-position: center 41%; position: relative; z-index: 1; border-radius: 48% 48% 14% 14%; mix-blend-mode: screen; opacity: .88; filter: saturate(.78) sepia(.12) contrast(1.05); animation: hat-float 8s ease-in-out infinite; }
.hat-art::after { content: ''; position: absolute; }
.orbit { position: absolute; border: 1px solid rgba(232,189,120,.25); border-radius: 50%; transform: rotate(-24deg); }
.orbit-one { width: 118%; height: 50%; }.orbit-two { width: 86%; height: 75%; transform: rotate(52deg); border-color: rgba(191,197,231,.18); }
.orbit-label { position: absolute; color: var(--paper-muted); font-size: 10px; line-height: 1.5; letter-spacing: .11em; text-transform: uppercase; }
.label-top { right: 4%; top: 19%; text-align: left; }.label-bottom { left: 4%; bottom: 19%; text-align: right; }
.wand-line { width: 48%; height: 1px; position: absolute; bottom: 26%; right: 2%; background: linear-gradient(90deg, transparent, var(--gold)); transform: rotate(-42deg); transform-origin: right; opacity: .7; }
.sigil { position: absolute; left: 17%; top: 31%; color: var(--gold); font-size: 22px; animation: blink 5s ease-in-out infinite; }
.intro-foot { position: absolute; bottom: 25px; left: clamp(24px, 8vw, 140px); right: clamp(24px, 8vw, 140px); display: flex; align-items: center; justify-content: space-between; color: var(--paper-muted); text-transform: uppercase; letter-spacing: .15em; font-size: 9px; }
.scroll-mark { font-size: 20px; color: var(--gold); animation: bob 2s ease-in-out infinite; }

.quiz-screen { padding-top: 135px; }
.quiz-head { display: flex; justify-content: space-between; align-items: center; gap: 30px; max-width: 1300px; margin: 0 auto; padding-bottom: 55px; border-bottom: 1px solid rgba(232,189,120,.18); }
.quiz-kicker { color: var(--gold); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }.quiz-kicker .line { width: 28px; }
.progress-wrap { display: flex; gap: 14px; align-items: center; color: var(--paper-muted); font-size: 10px; min-width: 245px; }.progress { height: 2px; background: rgba(239,228,207,.18); flex: 1; }.progress span { display: block; height: 100%; background: var(--gold); transition: width .45s ease; }
.quiz-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 11vw; max-width: 1130px; margin: 85px auto 0; }.question-column { max-width: 680px; }.question-tag { color: var(--paper-muted); font-size: 10px; margin-bottom: 21px; }.question-column h2 { font-size: clamp(42px, 5.2vw, 75px); line-height: .94; margin: 0 0 24px; color: var(--paper); }.question-hint { color: var(--paper-muted); font-size: 12px; margin: 0 0 34px; }
.answers { display: grid; gap: 11px; }.answer { position: relative; display: grid; grid-template-columns: 35px 1fr 20px; gap: 12px; align-items: center; width: 100%; padding: 16px 17px; color: var(--paper); background: rgba(238,228,207,.045); border: 1px solid rgba(238,228,207,.18); text-align: left; font-size: 12px; line-height: 1.5; transition: background .22s ease, border-color .22s ease, transform .22s ease; }.answer:hover { background: rgba(232,189,120,.11); border-color: var(--line); transform: translateX(5px); }.answer:disabled { cursor: default; }.answer-key { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid rgba(232,189,120,.5); color: var(--gold); font-size: 10px; }.answer-check { color: var(--gold); opacity: 0; transition: opacity .2s ease; }.answer.selected { background: rgba(232,189,120,.16); border-color: var(--gold); }.answer.selected .answer-check { opacity: 1; }.answer.correct-choice { animation: choice-pulse .55s ease both; }
.quiz-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 25px; }.text-btn { border: 0; padding: 8px 0; background: transparent; color: var(--paper-muted); font-size: 11px; }.text-btn:not(:disabled):hover { color: var(--gold); }.text-btn:disabled { opacity: .25; cursor: default; }.keyboard-note { color: rgba(185,176,160,.65); font-size: 10px; }.quiz-aside { align-self: start; padding: 23px 23px 27px; border: 1px solid rgba(232,189,120,.24); position: relative; background: rgba(16,16,29,.4); }.card-symbol { color: var(--gold); font-size: 22px; margin-bottom: 46px; }.aside-label { font-size: 9px; color: var(--paper-muted); }.aside-quote { color: var(--paper); font-family: var(--display); font-size: 24px; line-height: 1.05; margin: 14px 0 25px; }.aside-rule { height: 1px; background: rgba(232,189,120,.26); margin: 0 0 17px; }.aside-small { margin: 0; color: var(--paper-muted); font-size: 10px; line-height: 1.65; }

.result-screen { padding-top: 135px; }.result-top, .result-footer { display: flex; justify-content: space-between; align-items: center; max-width: 1150px; margin: 0 auto; }.result-number, .result-footer { color: var(--paper-muted); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }.result-layout { max-width: 1050px; margin: 86px auto 74px; display: grid; grid-template-columns: .75fr 1fr; gap: 9vw; align-items: center; }.result-crest-wrap { min-height: 350px; display: grid; place-items: center; position: relative; }.crest-halo { position: absolute; width: 260px; height: 260px; border: 1px solid rgba(232,189,120,.24); border-radius: 50%; box-shadow: 0 0 80px rgba(232,189,120,.1); }.crest-halo::before, .crest-halo::after { content: ''; position: absolute; inset: 20px; border: 1px solid rgba(232,189,120,.13); border-radius: 50%; transform: rotate(30deg); }.crest-halo::after { inset: -18px; transform: rotate(-42deg); border-style: dashed; }.crest { width: 148px; height: 180px; clip-path: polygon(50% 0, 91% 15%, 84% 68%, 50% 100%, 16% 68%, 9% 15%); display: grid; place-items: center; color: var(--house, var(--gold)); font-size: 54px; background: linear-gradient(150deg, rgba(232,189,120,.34), rgba(81,62,64,.55)); border: 1px solid var(--house, var(--gold)); filter: drop-shadow(0 0 25px color-mix(in srgb, var(--house, var(--gold)) 30%, transparent)); animation: crest-in 1s cubic-bezier(.16,.85,.28,1) both; }.crest-caption { margin: 16px 0 0; align-self: end; color: var(--paper-muted); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; }.result-copy { max-width: 550px; }.result-overline { color: var(--paper-muted); font-size: 10px; }.result-copy h2 { font-size: clamp(70px, 9vw, 135px); line-height: .78; margin: 22px 0 26px; color: var(--house, var(--gold)); }.result-intro { font-family: var(--display); color: var(--paper); font-size: 26px; line-height: 1.08; max-width: 470px; margin: 0 0 27px; }.traits { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 25px; }.trait { color: var(--house, var(--gold)); border: 1px solid color-mix(in srgb, var(--house, var(--gold)) 50%, transparent); padding: 7px 10px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }.result-footnote { color: var(--paper-muted); font-size: 11px; line-height: 1.7; max-width: 440px; margin: 0 0 26px; }.result-footer { padding-top: 20px; border-top: 1px solid rgba(232,189,120,.16); }.result-footer span:last-child { color: var(--gold); font-size: 16px; }

.fade-out { animation: disappear .3s ease both; }.shake { animation: shake .34s ease both; }
@keyframes appear { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes disappear { to { opacity: 0; transform: translateY(-10px); } }
@keyframes hat-float { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-10px) rotate(1deg); } }
@keyframes blink { 0%,100% { opacity: .22; transform: scale(.8); } 50% { opacity: .85; transform: scale(1.2); } }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes choice-pulse { 0% { transform: translateX(0); } 50% { transform: translateX(7px); } 100% { transform: translateX(0); } }
@keyframes crest-in { from { opacity: 0; transform: scale(.7) rotate(-10deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

@media (max-width: 850px) {
  .topbar { height: 70px; }.intro-screen { grid-template-columns: 1fr; gap: 0; padding-top: 120px; }.intro-copy { align-self: start; }.intro-art { min-height: 350px; height: 48vh; margin-top: -18px; }.hat-art { width: min(70vw, 360px); max-height: 46vh; }.intro-foot { display: none; }.quiz-layout, .result-layout { grid-template-columns: 1fr; gap: 46px; }.quiz-layout { margin-top: 55px; }.quiz-aside { max-width: 450px; }.result-layout { margin-top: 65px; }.result-crest-wrap { min-height: 280px; }.result-copy h2 { font-size: clamp(70px, 17vw, 110px); }.result-footer { margin-top: 10px; }
}
@media (max-width: 540px) {
  .screen { padding-left: 22px; padding-right: 22px; }.topbar { padding: 0 22px; }.topbar-note { font-size: 9px; }.intro-screen { padding-top: 110px; }.eyebrow { font-size: 9px; }.line { width: 25px; margin-right: 8px; }.intro-text { font-size: 13px; max-width: 330px; }.intro-actions { flex-wrap: wrap; gap: 15px; margin-top: 28px; }.primary-btn { width: 100%; }.intro-art { min-height: 290px; height: 42vh; }.orbit-label { font-size: 8px; }.label-top { right: -2%; }.label-bottom { left: -2%; }.quiz-head { align-items: flex-start; flex-direction: column; padding-bottom: 30px; gap: 20px; }.progress-wrap { width: 100%; }.quiz-layout { margin-top: 43px; }.question-column h2 { font-size: clamp(40px, 12vw, 58px); }.answer { padding: 14px 12px; grid-template-columns: 29px 1fr 14px; font-size: 11px; }.answer-key { width: 23px; height: 23px; }.quiz-actions { margin-top: 20px; }.keyboard-note { display: none; }.quiz-aside { padding: 18px; }.card-symbol { margin-bottom: 24px; }.aside-quote { font-size: 22px; }.result-screen { padding-top: 115px; }.result-layout { margin-top: 45px; gap: 35px; }.result-crest-wrap { min-height: 245px; }.crest-halo { width: 190px; height: 190px; }.crest { width: 118px; height: 145px; font-size: 42px; }.result-copy h2 { font-size: clamp(66px, 19vw, 98px); }.result-intro { font-size: 23px; }.result-footer { font-size: 8px; }.result-footer span:first-child { max-width: 190px; line-height: 1.45; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}