:root{
  --bg:#FFFFFF;
  --card:#FBF8F2;
  --cream:#1C1812;
  --cream-soft:rgba(28,24,18,.74);
  --cream-faint:rgba(28,24,18,.5);
  --gold:#AE994F;
  --gold-light:#8A7238;
  --sand:#F3ECDA;
  --rule:#E8E0CD;
  --error:#B3261E;
  --font-display:"Fraunces",Georgia,serif;
  --font-body:"Manrope",system-ui,sans-serif;
  --maxw:620px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--cream-soft);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font-display);color:var(--cream);margin:0;text-wrap:balance;font-weight:600;}
p{margin:0;}
a{color:var(--gold-light);}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
[hidden]{display:none !important;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
}

/* ---- shell ---- */
.quiz-shell{min-height:100vh;display:flex;flex-direction:column;padding-inline:20px;}
.quiz-progress{position:sticky;top:0;height:3px;background:var(--rule);z-index:10;margin-inline:-20px;}
.quiz-progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--gold),#D9C487);transition:width .4s ease;}
.quiz-main{flex:1;max-width:var(--maxw);margin:0 auto;width:100%;padding-block:56px 64px;}
.quiz-footer{max-width:var(--maxw);margin:0 auto;width:100%;padding-block:0 32px;text-align:center;font-size:.8rem;color:var(--cream-faint);}

.screen{display:flex;flex-direction:column;gap:18px;align-items:flex-start;}

/* ---- type ---- */
.eyebrow{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:1rem;color:var(--gold-light);}
h1{font-size:clamp(1.9rem,6vw,2.6rem);line-height:1.08;}
h2{font-size:clamp(1.5rem,4.6vw,1.9rem);line-height:1.12;}
.lead{font-size:1.02rem;color:var(--cream-soft);max-width:60ch;}
.fine-print{font-size:.86rem;color:var(--cream-faint);}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 28px;border-radius:100px;font-family:var(--font-body);font-weight:700;font-size:.98rem;border:none;cursor:pointer;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease;}
.btn:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px;}
.btn-primary{background:linear-gradient(120deg,var(--gold),#D9C487);color:#1A1405;box-shadow:0 10px 24px rgba(174,153,79,.22);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(174,153,79,.32);}
.btn-primary:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none;}
.btn-ghost{background:transparent;color:var(--cream-soft);border:1.4px solid var(--rule);}
.btn-ghost:hover{border-color:var(--gold-light);color:var(--cream);}
.btn-lg{padding:17px 32px;font-size:1.02rem;margin-top:6px;}

.link-btn{background:none;border:none;color:var(--cream-faint);font-family:var(--font-body);font-weight:600;font-size:.88rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:4px 0;}
.link-btn:hover{color:var(--cream);}
.link-btn:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px;}

/* ---- question screen ---- */
.q-count{font-family:var(--font-body);font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-light);}
.q-instruction{font-size:.9rem;color:var(--cream-faint);}
.answer-fieldset{border:none;margin:0;padding:0;width:100%;}
.answer-list{display:flex;flex-direction:column;gap:12px;width:100%;}
.answer-option{display:block;width:100%;}
.answer-option input{position:absolute;opacity:0;width:1px;height:1px;}
.answer-option label{display:flex;align-items:center;gap:12px;width:100%;padding:16px 18px;border-radius:14px;border:1.6px solid var(--rule);background:var(--card);cursor:pointer;font-size:.98rem;color:var(--cream-soft);transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;box-shadow:0 1px 2px rgba(28,24,18,.03);}
.answer-option label:hover{border-color:var(--gold-light);box-shadow:0 4px 14px rgba(28,24,18,.06);}
.answer-option .dot{flex-shrink:0;width:18px;height:18px;border-radius:50%;border:1.6px solid var(--cream-faint);position:relative;}
.answer-option input:checked + label{border-color:var(--gold);background:var(--sand);color:var(--cream);box-shadow:0 4px 14px rgba(174,153,79,.14);}
.answer-option input:checked + label .dot{border-color:var(--gold);}
.answer-option input:checked + label .dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--gold);}
.answer-option input:focus-visible + label{outline:2px solid var(--gold-light);outline-offset:2px;}
.q-nav{display:flex;justify-content:space-between;width:100%;margin-top:8px;}

/* ---- tie screen ---- */
.tie-options{display:flex;flex-direction:column;gap:12px;width:100%;}
.tie-option{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;padding:18px 20px;border-radius:14px;border:1.6px solid var(--rule);background:var(--card);cursor:pointer;text-align:left;color:var(--cream-soft);transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;box-shadow:0 1px 2px rgba(28,24,18,.03);}
.tie-option:hover{border-color:var(--gold);background:var(--sand);box-shadow:0 6px 18px rgba(174,153,79,.14);}
.tie-option .tie-title{font-family:var(--font-display);font-weight:600;font-size:1.08rem;color:var(--cream);}
.tie-option .tie-sub{font-size:.88rem;color:var(--cream-faint);}

/* ---- email gate ---- */
.gate-form{display:flex;flex-direction:column;gap:12px;width:100%;margin-top:6px;}
.gate-field{width:100%;padding:16px 18px;border-radius:14px;border:1.6px solid var(--rule);background:var(--card);color:var(--cream);font-family:var(--font-body);font-size:1rem;}
.gate-field:focus-visible{outline:2px solid var(--gold-light);outline-offset:2px;border-color:var(--gold);}
.gate-error{display:none;font-size:.86rem;color:var(--error);}
.gate-error.is-visible{display:block;}

/* ---- result screen ---- */
.result-pill{font-family:var(--font-body);font-weight:700;font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;color:#1A1405;background:linear-gradient(120deg,var(--gold),#D9C487);padding:5px 13px;border-radius:999px;}
.result-block{width:100%;}
.result-block h3{font-size:1.02rem;margin-bottom:6px;}
.result-block p{font-size:.97rem;color:var(--cream-soft);}
.result-note{font-size:.86rem;color:var(--cream-faint);font-style:italic;max-width:60ch;}
.invite-block{width:100%;padding-top:22px;border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:12px;align-items:flex-start;}
.invite-block h3{font-size:1.2rem;}
.result-footer{display:flex;gap:20px;margin-top:8px;flex-wrap:wrap;}
.review-panel{width:100%;display:flex;flex-direction:column;gap:10px;padding:18px 20px;border-radius:14px;background:var(--card);border:1px solid var(--rule);}
.review-row{font-size:.9rem;color:var(--cream-soft);padding-bottom:10px;border-bottom:1px dashed var(--rule);}
.review-row:last-child{border-bottom:none;padding-bottom:0;}
.review-row b{color:var(--cream);display:block;margin-bottom:3px;font-weight:700;}

@media (max-width:480px){
  .quiz-main{padding-block:40px 48px;}
  .q-nav{flex-direction:column-reverse;gap:10px;}
  .q-nav .btn{width:100%;}
}