/* TheBedroomQuiz. Loaded after styles.css on every page of this brand.
 *
 * Two looks:
 *   - "Night" for the marketing pages (home, start, terms, questions):
 *     deep midnight background, warm lamplight accents, Fraunces serif
 *     headings. The homepage gets its own layout below.
 *   - "Linen" for the quiz itself (share, session, quiz, results): the
 *     shared layout with a warm cream/rose palette, via the tokens only.
 */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/fraunces-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/fraunces-latin-wght-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Palette ---------- */
:root {
  --serif: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;

  /* Night (marketing pages) */
  --night:      #15102a;
  --night-2:    #1e1535;
  --cream:      #f6ede3;
  --cream-soft: #ddd0d6;
  --cream-mute: #a898b0;
  --glow:       #ffb27a;   /* lamplight amber */
  --glow-2:     #ff8a8a;   /* warm rose */
  --hairline:   rgba(246, 237, 227, 0.14);

  /* Linen (cards everywhere, and the quiz pages' background) */
  --ink:        #261a33;
  --ink-soft:   #4b3b55;
  --ink-mute:   #85738d;
  --line:       #ecdfd6;
  --card:       #fffdf9;
  --card-soft:  #faf1e9;
  --accent:     #c43f5c;
  --accent-2:   #d0663a;
  --accent-soft: #ffc9a8;
  --tint:       #fdf0ea;
  --field-bg:   #fdf8f3;
  --icon-1:     #fde7dc;
  --icon-2:     #f6e3ec;
  --shadow-ink: #2b1420;
  --scrim-ink:  #0b0716;
  --backdrop:   rgba(11, 7, 22, 0.6);
}

/* ---------- Every page ---------- */
html, body {
  background:
    radial-gradient(900px 600px at 92% -10%, rgba(255, 178, 122, 0.32), transparent 60%),
    radial-gradient(800px 640px at -12% 18%, rgba(196, 63, 92, 0.12), transparent 60%),
    radial-gradient(1100px 800px at 50% 115%, rgba(208, 102, 58, 0.14), transparent 60%),
    linear-gradient(180deg, #fbf3ea 0%, #f6e8e3 100%);
  background-attachment: fixed;
}

/* Wordmark: serif, the middle word in italic amber-rose, with the moon. */
header.site .brand {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
header.site .brand::before {
  content: '';
  width: 26px;
  height: 26px;
  margin-right: 8px;
  background: url(/img/tbq/icon.svg) center / contain no-repeat;
  flex-shrink: 0;
}
header.site .brand .dot {
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}

/* Primary buttons: warm lamplight gradient with dark text (white on amber
   doesn't have the contrast). */
.btn {
  background-image: linear-gradient(135deg, #ffc890 0%, #ff8f8a 50%, #ffc890 100%);
  color: #2a1426;
  box-shadow: 0 8px 22px rgba(255, 143, 138, 0.32);
}
.btn:hover,
.btn:focus-visible {
  box-shadow: 0 12px 30px rgba(255, 143, 138, 0.45);
}
.btn.secondary { background: var(--card); color: var(--ink); }
.btn.ghost { background: transparent; color: var(--ink); }

header.site .chip-btn:hover,
header.site .chip-btn:focus-visible {
  color: #2a1426;
  background: linear-gradient(135deg, #ffc890 0%, #ff8f8a 100%);
}

/* ---------- Night pages ---------- */
html:has(> body.page-home),
html:has(> body.page-start),
html:has(> body.page-terms),
html:has(> body.page-questions),
body.page-home,
body.page-start,
body.page-terms,
body.page-questions {
  background:
    radial-gradient(900px 620px at 88% -8%, rgba(255, 178, 122, 0.22), transparent 62%),
    radial-gradient(760px 640px at -10% 32%, rgba(150, 62, 120, 0.28), transparent 62%),
    radial-gradient(1000px 760px at 50% 118%, rgba(255, 138, 138, 0.14), transparent 60%),
    linear-gradient(180deg, var(--night) 0%, var(--night-2) 55%, #170f28 100%);
  background-attachment: fixed;
  color: var(--cream);
}

:is(.page-home, .page-start, .page-terms, .page-questions) header.site,
:is(.page-home, .page-start, .page-terms, .page-questions) header.site .brand { color: var(--cream); }
:is(.page-home, .page-start, .page-terms, .page-questions) header.site .brand .dot { color: var(--glow); }
:is(.page-home, .page-start, .page-terms, .page-questions) header.site .chip-btn {
  color: var(--cream-soft);
  background: rgba(246, 237, 227, 0.06);
  border-color: var(--hairline);
}
:is(.page-home, .page-start, .page-terms, .page-questions) header.site .chip-btn:hover,
:is(.page-home, .page-start, .page-terms, .page-questions) header.site .chip-btn:focus-visible {
  color: #2a1426;
  border-color: transparent;
}

:is(.page-start, .page-terms, .page-questions) .topline .back { color: var(--cream-mute); }
:is(.page-start, .page-terms, .page-questions) .topline .back:hover { color: var(--glow); }

/* Long-form content stays on ivory "paper" cards, with serif headings. */
:is(.page-start, .page-terms, .page-questions) .card {
  color: var(--ink);
  box-shadow: 0 24px 70px rgba(5, 2, 14, 0.45);
}
:is(.page-start, .page-terms, .page-questions) .card :is(h1, h2) {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.01em;
}
:is(.page-start, .page-terms, .page-questions) .card h1 { font-size: 36px; line-height: 1.1; }

/* Footer, on the night background. */
:is(.page-home, .page-start, .page-terms, .page-questions) footer.site { color: var(--cream-mute); }
:is(.page-home, .page-start, .page-terms, .page-questions) footer.site .footer-card {
  background: rgba(246, 237, 227, 0.05);
  border-color: var(--hairline);
  box-shadow: none;
}
:is(.page-home, .page-start, .page-terms, .page-questions) footer.site a { color: var(--glow); }
:is(.page-home, .page-start, .page-terms, .page-questions) footer.site .crafted { color: var(--cream-mute); }
:is(.page-home, .page-start, .page-terms, .page-questions) footer.site .crafted .city {
  background-image: linear-gradient(90deg, var(--glow) 0%, var(--glow-2) 100%);
}
:is(.page-home, .page-start, .page-terms, .page-questions) footer.site .footer-copyright { color: var(--cream-mute); }

/* ---------- Homepage ---------- */
.page-home main.container {
  max-width: 1100px;
  padding-top: 8px;
}

.page-home .hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: 56px;
  text-align: left;
  padding: 56px 8px 72px;
}
.page-home .hero .emojis { display: none; }
.page-home .hero-eyebrow {
  display: block;
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--glow);
}
.page-home .hero h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(42px, 6vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 22px;
  color: var(--cream);
}
.page-home .hero h1 em {
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(90deg, var(--glow) 0%, var(--glow-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.06em; /* italic overhang would be clipped by background-clip */
}
.page-home .hero p.lead {
  margin: 0 0 34px;
  max-width: 470px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--cream-soft);
}
.page-home .hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
}
.page-home .btn-icon { display: none; }
.page-home .hero-alt {
  display: inline-block;
  color: var(--cream-soft);
  font-size: 15px;
  font-weight: 500;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 2px;
}
.page-home .hero-alt:hover { color: var(--glow); border-color: var(--glow); text-decoration: none; }

/* Two example answers: one mutual (revealed), one not (hidden). */
.page-home .hero-art {
  display: block;
  position: relative;
  min-height: 430px;
}
.page-home .match-card {
  position: absolute;
  width: min(300px, 92%);
  padding: 22px 22px 18px;
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(246, 237, 227, 0.12), rgba(246, 237, 227, 0.04));
  border: 1px solid var(--hairline);
  box-shadow: 0 30px 70px rgba(5, 2, 14, 0.5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--cream);
}
.page-home .match-card:first-child {
  top: 0;
  left: 0;
  transform: rotate(-4deg);
  z-index: 2;
}
.page-home .match-card.hidden-card {
  top: 215px;
  right: 0;
  transform: rotate(4deg);
  opacity: 0.8;
}
.page-home .mc-q {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.25;
}
.page-home .mc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--hairline);
  font-size: 14px;
  color: var(--cream-soft);
}
.page-home .mc-a { font-size: 22px; line-height: 1; }
.page-home .mc-verdict {
  display: inline-block;
  margin: 12px 0 0;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.page-home .mc-verdict.yes {
  color: #2a1426;
  background: linear-gradient(135deg, #ffc890, #ff8f8a);
  box-shadow: 0 0 24px rgba(255, 178, 122, 0.45);
}
.page-home .mc-verdict.no {
  color: var(--cream-mute);
  border: 1px solid var(--hairline);
}

/* Features: an open three-column row instead of cards. */
.page-home .feature-grid {
  gap: 0;
  margin-top: 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.page-home .feature,
.page-home .feature:hover {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  text-align: left;
  padding: 34px 30px 36px;
}
.page-home .feature + .feature { border-left: 1px solid var(--hairline); }
.page-home .feature .icon { display: none; }
.page-home .feature h2 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  margin: 0 0 10px;
  color: var(--cream);
}
.page-home .feature h2::before {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  margin-bottom: 18px;
  background: linear-gradient(90deg, var(--glow), var(--glow-2));
}
.page-home .feature p { font-size: 15px; color: var(--cream-soft); }

/* "How it works" and the FAQ sit directly on the night background. */
.page-home .card {
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 72px 8px 0;
  margin-top: 0 !important; /* overrides the inline margin-top in index.html */
}
.page-home .card h2 {
  font-family: var(--serif);
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--cream);
  margin-bottom: 8px;
}
.page-home .card p,
.page-home .card .muted { color: var(--cream-soft); }
.page-home .card a { color: var(--glow); }

.page-home ol.steps {
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
  margin-top: 30px;
  counter-reset: none;
}
.page-home ol.steps li { flex-direction: column; gap: 10px; }
.page-home ol.steps .n {
  width: auto;
  height: auto;
  background: none;
  box-shadow: none;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 56px;
  line-height: 1;
  color: var(--glow);
}
.page-home ol.steps p { margin: 0; font-size: 17px; color: var(--cream-soft); }

/* FAQ: heading on the left, questions on the right. */
.page-home .faq {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.5fr);
  column-gap: 64px;
  align-items: start;
}
.page-home .faq h2 {
  grid-column: 1;
  grid-row: 1 / span 20;
  position: sticky;
  top: 32px;
  margin-bottom: 22px;
}
.page-home .faq details { grid-column: 2; }
.page-home .faq details { border-color: var(--hairline); padding: 6px 0; }
.page-home .faq summary {
  color: var(--cream);
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  padding-block: 16px;
}
.page-home .faq summary::after { color: var(--glow); }
.page-home .faq details[open] > summary::after { color: var(--glow); }
.page-home .faq summary:hover { color: var(--glow); }
.page-home .faq details p,
.page-home .faq details ul { color: var(--cream-soft); font-size: 16px; }
.page-home .faq strong { color: var(--cream); }

.page-home footer.site { padding-top: 80px; }

@media (max-width: 860px) {
  .page-home .hero {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 32px 4px 48px;
  }
  .page-home .hero-art { min-height: 400px; max-width: 420px; width: 100%; margin-inline: auto; }
  .page-home .faq { display: block; }
  .page-home .faq h2 { position: static; }
  .page-home .feature-grid { grid-template-columns: 1fr; }
  .page-home .feature,
  .page-home .feature:hover { padding: 26px 4px; }
  .page-home .feature + .feature { border-left: 0; border-top: 1px solid var(--hairline); }
  .page-home ol.steps { grid-template-columns: 1fr; gap: 22px; }
  .page-home ol.steps li { flex-direction: row; gap: 18px; align-items: baseline; }
  .page-home ol.steps .n { font-size: 40px; min-width: 30px; }
  .page-home .card { padding-top: 56px; }
}

@media (max-width: 480px) {
  .page-home .hero h1 { font-size: 40px; }
  .page-home .hero p.lead { font-size: 17px; }
  .page-home .match-card { padding: 18px 18px 14px; }
  .page-home .match-card:first-child { left: 0; }
  .page-home .match-card.hidden-card { top: 200px; }
}

@media (max-width: 420px) {
  header.site .brand { font-size: 21px; }
  header.site .brand::before { width: 22px; height: 22px; margin-right: 6px; }
}
/* The quiz header also carries the name chip; give it the room. */
@media (max-width: 420px) {
  .page-quiz header.site .brand { font-size: 19px; }
  .page-quiz header.site .brand::before { display: none; }
}