/* Solea — hosted on the public post-media bucket (uploaded 2026-07-28) */
@font-face {
  font-family: 'Solea';
  src: url('https://aasnqtlnoqzmurudoqsq.supabase.co/storage/v1/object/public/post-media/fonts/Solea-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

#srq-root{
  --pearl:#f9f9f9; --bone:#e3e0da; --linen:#d4ccbf; --sage:#bfbaa7; --mauve:#b3a09a;
  --bronze:#705544; --oxblood:#441618; --oxblood-deep:#2e0f10; --walnut:#382517; --ink:#2c3025;
  --text:#5d473a; --text-muted:#8b7666;
  --border:rgba(112,85,68,.2); --border-light:rgba(112,85,68,.1);
  --headline:'Solea','EB Garamond',Georgia,serif;
  --display:'EB Garamond',Georgia,serif;
  --body:'Inter',system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  font-family:var(--body);font-weight:300;font-size:17px;line-height:1.75;color:var(--text);
  background:var(--pearl);margin:0;min-height:100vh;
}
:where(#srq-root *,#srq-root *::before,#srq-root *::after){box-sizing:border-box;margin:0;padding:0}
:where(#srq-root button){font:inherit;background:none;border:none;cursor:pointer;color:inherit}
:where(#srq-root input){font:inherit}
:where(#srq-root img){max-width:100%}

/* ---------- shared ---------- */
.srq-scene{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:64px 24px}
.srq-wrap{width:100%;max-width:660px;margin:0 auto}
.srq-eyebrow{font-family:var(--body);font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase}
.srq-btn{display:inline-block;background:var(--oxblood);color:var(--pearl);font-family:var(--body);
  font-size:.76rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;padding:18px 44px;
  transition:background .22s,transform .18s;text-decoration:none;text-align:center}
.srq-btn:hover{background:var(--oxblood-deep);transform:translateY(-1px)}
.srq-btn:focus-visible,#srq-root button:focus-visible,#srq-root input:focus-visible{outline:2px solid var(--oxblood);outline-offset:3px}
.srq-btn[disabled]{opacity:.55;cursor:wait;transform:none}
.srq-note{font-family:var(--body);font-size:.78rem;color:var(--text-muted);letter-spacing:.02em}
.srq-fade{animation:srqFadeUp .7s var(--ease) both}
@keyframes srqFadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .srq-fade{animation:none}
  #srq-root *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ---------- intro (dark) ---------- */
.srq-intro{background:var(--ink);color:var(--pearl);text-align:center}
.srq-intro .srq-eyebrow{color:var(--mauve);margin-bottom:26px;text-align:center}
.srq-intro h1{font-family:var(--headline);font-size:clamp(2.5rem,6vw,4rem);font-weight:400;line-height:1.1;color:var(--pearl);margin-bottom:24px}
.srq-intro h1 em{font-style:italic;font-family:var(--display);color:var(--linen);font-size:1.18em;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:0.16em;text-decoration-color:var(--mauve)}
.srq-intro-sub{font-family:var(--display);font-style:italic;font-size:1.06rem;color:var(--bone);opacity:.9;max-width:520px;margin:0 auto 36px;line-height:1.65;text-align:center}
.srq-intro .srq-note{color:var(--bone);opacity:.7;margin-top:18px;text-align:center}
.srq-cred{font-family:var(--display);font-style:italic;font-size:.92rem;color:var(--mauve);margin-top:44px;line-height:1.6;text-align:center}

/* ---------- questions ---------- */
.srq-quiz{background:var(--pearl)}
.srq-progress{margin-bottom:34px}
.srq-progress-track{height:2px;background:var(--bone);position:relative;overflow:hidden}
.srq-progress-fill{position:absolute;inset:0 auto 0 0;background:var(--oxblood);transition:width .45s var(--ease)}
.srq-progress-label{display:block;margin-top:12px;font-size:.68rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted)}
.srq-question{font-family:var(--display);font-size:clamp(1.5rem,3vw,1.9rem);font-weight:400;line-height:1.3;color:var(--bronze);margin-bottom:34px}
.srq-options{display:flex;flex-direction:column;gap:12px}
.srq-option{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;text-align:left;
  padding:18px 22px;min-height:60px;border:1px solid var(--border);background:#fff;
  font-size:.98rem;line-height:1.5;color:var(--text);transition:border-color .18s,background .18s,transform .18s}
.srq-option:hover{border-color:var(--bronze);background:var(--pearl);transform:translateX(2px)}
.srq-option .srq-arrow{color:var(--bronze);opacity:0;transition:opacity .18s;flex-shrink:0}
.srq-option:hover .srq-arrow{opacity:1}
.srq-back{margin-top:26px;font-size:.78rem;letter-spacing:.06em;color:var(--text-muted);transition:color .18s}
.srq-back:hover{color:var(--bronze)}

/* ---------- gate ---------- */
.srq-gate{background:var(--bone)}
.srq-gate .srq-eyebrow{color:var(--oxblood);margin-bottom:20px}
.srq-gate h2{font-family:var(--display);font-size:clamp(1.9rem,4vw,2.6rem);font-weight:400;line-height:1.2;color:var(--bronze);margin-bottom:14px}
.srq-gate-sub{max-width:600px;margin-bottom:32px}
.srq-field{margin-bottom:16px}
.srq-field label{display:block;font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze);margin-bottom:8px}
.srq-field input{width:100%;padding:15px 18px;border:1px solid var(--border);background:#fff;color:var(--walnut);font-size:1rem}
.srq-field input::placeholder{color:#9b8878}
.srq-field input:focus{border-color:var(--bronze);outline:none}
.srq-error{color:var(--oxblood);font-size:.85rem;margin:4px 0 12px;min-height:1.3em}
.srq-consent{font-family:var(--display);font-style:italic;font-size:.88rem;color:var(--text-muted);margin-top:18px;line-height:1.6}

/* ---------- result ---------- */
.srq-result{background:var(--pearl);text-align:center}
.srq-result .srq-eyebrow{color:var(--oxblood);margin-bottom:8px}
.srq-score{font-family:var(--display);font-size:clamp(4.5rem,14vw,7rem);font-weight:400;line-height:1;color:var(--oxblood);font-variant-numeric:tabular-nums}
.srq-score-sub{font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted);margin-bottom:34px}
.srq-band-title{font-family:var(--headline);font-size:clamp(1.9rem,4.6vw,2.8rem);font-weight:400;line-height:1.18;color:var(--walnut);margin-bottom:20px}
.srq-band-title em{font-style:italic;font-family:var(--display);color:var(--oxblood)}
.srq-band-body{max-width:560px;margin:0 auto 40px;text-align:left}
.srq-band-body p{margin-bottom:14px}

.srq-areas{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px;max-width:520px;margin:0 auto 16px;text-align:left}
.srq-area{padding-top:4px}
.srq-area-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.srq-area-name{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze)}
.srq-area-score{font-family:var(--display);font-size:.95rem;color:var(--text-muted)}
.srq-meter{height:2px;background:var(--bone);position:relative}
.srq-meter span{position:absolute;inset:0 auto 0 0;background:var(--bronze);transition:width .9s var(--ease) .3s}
.srq-quickwin{font-family:var(--display);font-style:italic;font-size:1.02rem;color:var(--oxblood);line-height:1.6;
  max-width:520px;margin:26px auto 46px;padding-left:20px;border-left:1px solid var(--oxblood);text-align:left}

.srq-cta-card{background:var(--ink);color:var(--bone);padding:44px 40px;max-width:560px;margin:0 auto;text-align:left}
.srq-cta-card .srq-eyebrow{color:var(--mauve);margin-bottom:16px}
.srq-cta-card h3{font-family:var(--display);font-size:1.6rem;font-weight:400;line-height:1.25;color:var(--pearl);margin-bottom:16px}
.srq-cta-card p{font-size:.95rem;line-height:1.7;margin-bottom:14px}
.srq-cta-card .srq-highlight{font-family:var(--display);font-style:italic;color:var(--linen)}
.srq-cta-card .srq-btn{width:100%;margin-top:12px}
.srq-cta-card .srq-note{color:var(--bone);opacity:.65;margin-top:14px;text-align:center}
.srq-ps{font-family:var(--display);font-style:italic;font-size:.92rem;color:var(--text-muted);margin-top:34px}

.srq-footer{padding:28px 24px 40px;text-align:center;background:var(--pearl)}
.srq-footer span{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);opacity:.7}

@media (max-width:560px){
  .srq-scene{padding:48px 20px}
  .srq-areas{grid-template-columns:1fr;gap:16px}
  .srq-cta-card{padding:36px 26px}
  .srq-btn{width:100%;padding:18px 24px}
}