/* ------------------------------------------------------------------ *
 * Seven Questions -- design system
 *
 * System fonts only, on purpose. The front page promises that nothing
 * leaves the browser; a webfont request to a third party would make that
 * a lie in the first 200 milliseconds of the visit.
 * ------------------------------------------------------------------ */

:root {
  --ground:      #120A10;
  --ground-2:    #1C0F19;
  --surface:     rgba(255, 244, 240, 0.038);
  --surface-2:   rgba(255, 244, 240, 0.065);
  --line:        rgba(255, 214, 196, 0.13);
  --line-strong: rgba(255, 214, 196, 0.28);

  --ink:         #F7EEE9;
  --ink-soft:    #D6C2BC;
  --ink-dim:     #A08D8A;

  --accent:      #E89A80;
  --accent-warm: #F0B57E;
  --accent-deep: #B4614C;
  --good:        #8FBF9F;
  --warn:        #E7C06A;

  --radius:      18px;
  --radius-sm:   12px;

  --shadow:      0 24px 60px -24px rgba(0, 0, 0, 0.85);
  --shadow-lift: 0 30px 70px -22px rgba(0, 0, 0, 0.9);

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, "Times New Roman", serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
           Arial, sans-serif;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --step: 68rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The bloom. Two soft washes, very slowly breathing, so the page is never
   quite flat but never draws attention to itself either. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: auto;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(90px);
}
body::before {
  width: 68vw; height: 68vw;
  top: -26vw; right: -18vw;
  background: radial-gradient(circle, rgba(200, 92, 74, 0.30), transparent 66%);
  animation: drift 28s var(--ease) infinite alternate;
}
body::after {
  width: 60vw; height: 60vw;
  bottom: -24vw; left: -16vw;
  background: radial-gradient(circle, rgba(120, 60, 130, 0.28), transparent 68%);
  animation: drift 34s var(--ease) infinite alternate-reverse;
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-4vw, 5vh, 0) scale(1.14); }
}

img, svg { max-width: 100%; }

/* fill and stroke are inherited properties, so setting them on <use> reaches
   the referenced shapes. Anything a symbol sets on its own paths still wins. */
svg use {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

a { color: var(--accent); text-decoration-color: rgba(232, 154, 128, 0.4);
    text-underline-offset: 3px; }
a:hover { color: var(--accent-warm); }

::selection { background: rgba(232, 154, 128, 0.3); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent-warm);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap { width: min(100% - 2.5rem, var(--step)); margin-inline: auto; }
.narrow { width: min(100% - 2.5rem, 46rem); margin-inline: auto; }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.015em;
             line-height: 1.14; margin: 0; }
h1 { font-size: clamp(2.3rem, 6.4vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: 1.3rem; line-height: 1.3; }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.kicker {
  font-family: var(--sans);
  font-size: 0.775rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1rem;
  font-weight: 600;
}

.lede { font-size: clamp(1.05rem, 2.1vw, 1.24rem); color: var(--ink-soft);
        max-width: 40em; }
.dim  { color: var(--ink-dim); }
.small { font-size: 0.875rem; line-height: 1.55; }

/* ---------------------------------------------------------------- buttons */

.btn {
  --btn-bg: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.05rem 2rem;
  border: 0;
  border-radius: 100px;
  background: var(--btn-bg);
  color: #22110D;
  font: 600 1.02rem/1 var(--sans);
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease),
              filter 0.22s var(--ease);
  box-shadow: 0 12px 34px -12px rgba(232, 154, 128, 0.65);
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.06);
             box-shadow: 0 18px 44px -12px rgba(232, 154, 128, 0.8); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: 0.32; pointer-events: none; box-shadow: none; }

/* A slow sheen that crosses the primary call to action every few seconds --
   just enough motion to catch the eye on a page that is otherwise still. */
.btn--hero::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 38%,
              rgba(255, 255, 255, 0.42) 50%, transparent 62%);
  transform: translateX(-120%);
  animation: sheen 5.5s ease-in-out 1.4s infinite;
  mix-blend-mode: overlay;
  pointer-events: none;
}
@keyframes sheen { 0% { transform: translateX(-120%); }
                   38%, 100% { transform: translateX(120%); } }

.btn--ghost {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  box-shadow: none;
  font-weight: 500;
}
.btn--ghost:hover { background: var(--surface); color: var(--ink);
                    border-color: var(--line-strong); filter: none; }

.btn--small { padding: 0.7rem 1.3rem; font-size: 0.92rem; }

/* ----------------------------------------------------------------- chrome */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 0 0;
}
.brand {
  font-family: var(--serif);
  font-size: 1.06rem;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.brand svg { width: 22px; height: 22px; color: var(--accent); }

.langs { display: flex; flex-wrap: wrap; gap: 0.15rem; }
.langs a {
  font-size: 0.8rem;
  color: var(--ink-dim);
  text-decoration: none;
  padding: 0.32rem 0.55rem;
  border-radius: 8px;
  transition: color 0.18s, background 0.18s;
}
.langs a:hover { color: var(--ink); background: var(--surface); }
.langs a[aria-current] { color: var(--accent); background: var(--surface); }

/* Seven languages, on a phone, above the headline.
 *
 * They wrapped to two rows and pushed the brand into two lines of its own,
 * so the first 120 pixels of a 390px screen were spent on a choice almost
 * nobody makes: the language is already right, because it was chosen from
 * the browser and is in the address.
 *
 * The row now scrolls sideways instead of wrapping, and the current language
 * sits first. Every language is still one tap away and still a real <a> for
 * a crawler -- this is layout, not a hidden menu. */
@media (max-width: 46rem) {
  .top { align-items: center; gap: 0.5rem 1rem; }
  .brand { font-size: 1rem; white-space: nowrap; }
  .langs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    max-width: 58vw;
    /* Scrolled from the start, so the language you are reading in is the one
       you can see. Ending the row at the right edge looks tidier and hides
       exactly the item that matters. */
    justify-content: flex-start;
    mask-image: linear-gradient(to left, transparent 0, #000 1.2rem);
  }
  .langs::-webkit-scrollbar { display: none; }
  .langs a { white-space: nowrap; padding: 0.3rem 0.45rem; }
  .langs a[aria-current] { order: -1; }
}

/* The language list in the footer.
 *
 * The row at the top scrolls sideways on a phone and three of the seven are
 * off the edge until you swipe. That works and it is easy to miss, so the
 * same seven are written out down here, where nothing has to be discovered.
 * Large enough to hit: 44px is Apple's number, and these are navigation
 * links rather than words in a sentence. */
/* The links in the footer are navigation, not words in a sentence, so
   they get a box a thumb can hit. WCAG 2.2 asks for 24px on anything that
   is not inline text; Apple asks for 44. */
footer p a, .consent-open { display: inline-block; padding: 0.5rem 0.35rem; }
footer p:first-of-type a { padding: 0; }

.foot-langs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.1rem 0.35rem;
              margin-bottom: 0.6em; }
.foot-langs a { display: inline-block; padding: 0.55rem 0.5rem; color: var(--ink-dim);
                text-decoration: none; border-radius: 8px; }
.foot-langs a:hover { color: var(--ink); background: var(--surface); }
.foot-langs a[aria-current] { color: var(--accent); }
.foot-langs span { color: var(--line); }

footer {
  margin-top: 6rem;
  padding: 2.5rem 0 3.5rem;
  border-top: 1px solid var(--line);
  color: var(--ink-dim);
  font-size: 0.855rem;
  line-height: 1.6;
}
footer p { margin-bottom: 0.6em; max-width: 46em; }

/* ------------------------------------------------------------------ cards */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem;
  backdrop-filter: blur(8px);
}

.grid { display: grid; gap: 1rem; }
@media (min-width: 720px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
}

.section { margin-top: clamp(4rem, 9vw, 7rem); }
.section > h2 { margin-bottom: 1.5rem; }

/* ------------------------------------------------------------------- quiz */

.quiz { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

.progress { padding: 1.4rem 0 0; }
.progress__track { display: flex; gap: 5px; }
.progress__seg {
  height: 3px; flex: 1; border-radius: 2px;
  background: rgba(255, 244, 240, 0.11);
  overflow: hidden;
}
.progress__seg i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-warm));
  transition: width 0.5s var(--ease);
}
.progress__seg--done i { width: 100%; }
.progress__seg--now  i { width: 100%; animation: fillnow 0.45s var(--ease); }
@keyframes fillnow { from { width: 0; } to { width: 100%; } }

.progress__meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 0.7rem; font-size: 0.78rem; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--ink-dim);
}

.stage { flex: 1; display: flex; align-items: center; padding: 2rem 0 3rem; }

.step { width: 100%; }
.js .step { display: none; }
.js .step[data-active] { display: block; }
.step + .step { margin-top: 4rem; }
.js .step + .step { margin-top: 0; }
.noscript-note { margin-bottom: 2.5rem; }
.js .noscript-note, .js .step__submit { display: none; }
.step[data-active] .step__head { animation: rise 0.45s var(--ease) both; }
.step[data-active] .opt { animation: rise 0.5s var(--ease) both; }
.step[data-active] .opt:nth-child(1) { animation-delay: 0.05s; }
.step[data-active] .opt:nth-child(2) { animation-delay: 0.10s; }
.step[data-active] .opt:nth-child(3) { animation-delay: 0.15s; }
.step[data-active] .opt:nth-child(4) { animation-delay: 0.20s; }
.step[data-active] .opt:nth-child(5) { animation-delay: 0.25s; }
.step[data-active] .opt:nth-child(6) { animation-delay: 0.30s; }
.step[data-active] .opt:nth-child(7) { animation-delay: 0.35s; }
.step[data-active] .opt:nth-child(8) { animation-delay: 0.40s; }
@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to   { opacity: 1; transform: none; }
}

.step__head { margin-bottom: 2rem; max-width: 30em; }
.step__head h2 { font-size: clamp(1.8rem, 4.6vw, 2.9rem); }
.step__hint { margin: 0.85rem 0 0; color: var(--ink-dim); font-size: 0.98rem; }

.opts { display: grid; gap: 0.7rem; }
@media (min-width: 640px) {
  .opts--2 { grid-template-columns: repeat(2, 1fr); }
  .opts--wide { grid-template-columns: repeat(2, 1fr); }
}

.opt {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  text-align: left;
  padding: 1.15rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease),
              transform 0.16s var(--ease), box-shadow 0.24s var(--ease);
}
@media (hover: hover) {
  .opt:hover { border-color: var(--line-strong); background: var(--surface-2);
               transform: translateY(-2px); box-shadow: var(--shadow); }
}
.opt:active { transform: translateY(0) scale(0.994); }

.opt__icon {
  flex: 0 0 auto; width: 34px; height: 34px; color: var(--accent);
  opacity: 0.85; transition: opacity 0.2s, transform 0.3s var(--ease);
}
.opt:hover .opt__icon { opacity: 1; transform: scale(1.08); }

.opt__text { flex: 1; min-width: 0; }
.opt__label { display: block; font-weight: 600; letter-spacing: -0.005em; }
.opt__sub { display: block; color: var(--ink-dim); font-size: 0.875rem;
            line-height: 1.45; margin-top: 0.15rem; }

.opt__tick {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  display: grid; place-items: center;
  transition: background 0.2s, border-color 0.2s, transform 0.2s var(--ease);
}
.opt__tick svg { width: 12px; height: 12px; opacity: 0; transform: scale(0.5);
                 transition: opacity 0.18s, transform 0.24s var(--ease); }

.opt input {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0;
  pointer-events: none;
}
.opt:has(input:focus-visible) {
  outline: 2px solid var(--accent-warm); outline-offset: 3px;
}

.opt:has(input:checked) {
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(232, 154, 128, 0.15),
                                       rgba(232, 154, 128, 0.05));
  box-shadow: 0 0 0 1px var(--accent), 0 18px 44px -20px rgba(232, 154, 128, 0.6);
}
.opt:has(input:checked) .opt__tick {
  background: var(--accent); border-color: var(--accent); transform: scale(1.06);
}
.opt:has(input:checked) .opt__tick svg { opacity: 1; transform: none;
                                          color: #22110D; }
.opt:has(input:checked) .opt__icon { opacity: 1; }

/* A single-select question shows a dot rather than a tick, because the two
   behave differently and the control should say so before it is used. */
.opts--one .opt__tick { border-radius: 50%; }
.opts--one .opt__tick svg { display: none; }
.opts--one .opt:has(input:checked) .opt__tick {
  box-shadow: inset 0 0 0 3.5px var(--ground);
}

.opt__key {
  position: absolute; top: 0.5rem; right: 0.7rem;
  font-size: 0.66rem; color: var(--ink-dim); opacity: 0;
  transition: opacity 0.2s; font-variant-numeric: tabular-nums;
}
body.keys .opt__key { opacity: 0.55; }

.step__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 1.7rem; flex-wrap: wrap;
}
.counter { font-size: 0.86rem; color: var(--ink-dim); }

/* -------------------------------------------------------------- computing */

.thinking {
  position: fixed; inset: 0; z-index: 50;
  display: none; place-items: center;
  background: rgba(18, 10, 16, 0.94);
  backdrop-filter: blur(14px);
  text-align: center;
  padding: 2rem;
}
.thinking[data-on] { display: grid; animation: fade 0.4s var(--ease); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.thinking__ring { width: 74px; height: 74px; margin: 0 auto 1.8rem; }
.thinking__ring circle { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.thinking__ring .bg { stroke: rgba(255, 244, 240, 0.1); }
.thinking__ring .fg {
  stroke: var(--accent); stroke-dasharray: 60 160;
  transform-origin: 50% 50%; animation: spin 1.15s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.thinking__line {
  font-family: var(--serif); font-size: 1.22rem; color: var(--ink-soft);
  min-height: 3em; max-width: 22em;
}
.thinking__line span { display: block; animation: rise 0.5s var(--ease) both; }

/* ----------------------------------------------------------------- result */

.hero-match {
  display: grid; gap: 2rem; align-items: center;
  padding: clamp(1.6rem, 4vw, 2.8rem);
  border: 1px solid var(--line-strong);
  border-radius: 26px;
  background: linear-gradient(150deg, rgba(232, 154, 128, 0.11),
                                       rgba(255, 244, 240, 0.03) 55%);
  box-shadow: var(--shadow-lift);
  position: relative;
  overflow: hidden;
}
.hero-match::before {
  content: ""; position: absolute; top: -40%; right: -12%;
  width: 46%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 154, 128, 0.24), transparent 70%);
  pointer-events: none;
}
@media (min-width: 780px) {
  .hero-match { grid-template-columns: auto 1fr; gap: 2.8rem; }
}

.dial { width: 152px; height: 152px; margin-inline: auto; position: relative;
        flex: 0 0 auto; }
.dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dial circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.dial .bg { stroke: rgba(255, 244, 240, 0.09); }
.dial .fg {
  stroke: url(#dialgrad);
  stroke-dasharray: var(--circ);
  stroke-dashoffset: var(--circ);
  animation: dial 1.5s var(--ease) 0.25s forwards;
}
@keyframes dial { to { stroke-dashoffset: var(--dash); } }
.dial__num {
  position: absolute; inset: 0; display: grid; place-content: center;
  text-align: center; font-family: var(--serif); line-height: 1;
}
.dial__num b { font-size: 2.7rem; font-weight: 400; display: block; }
.dial__num i { font-style: normal; font-size: 0.72rem; letter-spacing: 0.15em;
               text-transform: uppercase; color: var(--ink-dim);
               font-family: var(--sans); }

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.chip {
  font-size: 0.8rem; padding: 0.34rem 0.75rem; border-radius: 100px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-soft);
}
.chip--good { border-color: rgba(143, 191, 159, 0.4); color: var(--good); }
.chip--warn { border-color: rgba(231, 192, 106, 0.4); color: var(--warn); }

.panel { margin-top: 1rem; }
.panel h3 {
  font-family: var(--sans); font-size: 0.775rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 0.8rem;
}

.checks { list-style: none; margin: 0; padding: 0; counter-reset: c; }
.checks li {
  counter-increment: c; position: relative;
  padding: 0 0 0 2.6rem; margin-bottom: 1rem;
  color: var(--ink-soft);
}
.checks li::before {
  content: counter(c); position: absolute; left: 0; top: -1px;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line);
  font: 600 0.8rem/1 var(--sans); color: var(--accent);
}

.caution {
  border-left: 2px solid var(--warn);
  background: rgba(231, 192, 106, 0.07);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 1rem 1.2rem;
  color: var(--ink-soft);
}

.alt {
  display: flex; gap: 1rem; align-items: flex-start;
  text-decoration: none; color: inherit;
  transition: border-color 0.2s, background 0.2s, transform 0.2s var(--ease);
}
.alt:hover { border-color: var(--line-strong); background: var(--surface-2);
             transform: translateY(-3px); color: inherit; }
.alt__pct {
  flex: 0 0 auto; font-family: var(--serif); font-size: 1.35rem;
  color: var(--accent); line-height: 1.1; min-width: 2.6em;
}
.alt h3 { font-size: 1.08rem; margin-bottom: 0.2rem; }

.toolbar { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center;
           margin-top: 2.5rem; }

.toast {
  position: fixed; left: 50%; bottom: 2rem; transform: translate(-50%, 140%);
  background: var(--ink); color: var(--ground); padding: 0.7rem 1.3rem;
  border-radius: 100px; font-size: 0.9rem; font-weight: 600; z-index: 60;
  transition: transform 0.4s var(--ease);
}
.toast[data-on] { transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------- products */

.buy { display: grid; gap: 0.9rem; }
@media (min-width: 700px) { .buy { grid-template-columns: repeat(3, 1fr); } }

.buy__item {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); overflow: hidden; text-decoration: none;
  color: inherit;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease),
              box-shadow 0.24s var(--ease);
}
.buy__item:hover {
  border-color: var(--line-strong); transform: translateY(-3px);
  box-shadow: var(--shadow); color: inherit;
}

/* A neutral, near-white plate behind the photograph. Product shots are cut
   out on white, and dropping one straight onto a dark page leaves a bright
   rectangle with a ragged edge. */
.buy__shot {
  aspect-ratio: 4 / 3;
  background: #F3EDEA;
  display: grid; place-items: center;
  padding: 0.9rem;
}
.buy__shot img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  mix-blend-mode: multiply;
}

.buy__body { padding: 0.9rem 1rem 1.1rem; display: flex; flex-direction: column;
             gap: 0.35rem; flex: 1; }
.buy__brand { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
              color: var(--ink-dim); }
.buy__name { font-weight: 600; font-size: 0.95rem; line-height: 1.35; }
.buy__price { margin-top: auto; padding-top: 0.5rem; font-family: var(--serif);
              font-size: 1.2rem; color: var(--accent-warm); }
.buy__price span { font-family: var(--sans); font-size: 0.75rem;
                   color: var(--ink-dim); margin-left: 0.35rem; }

.disclosure {
  margin-top: 0.9rem; font-size: 0.79rem; line-height: 1.55;
  color: var(--ink-dim); max-width: 46em;
}

/* ------------------------------------------------------------------ embed */
/* Inside a shop's page the frame grows to fit its content, so nothing may be
   viewport-height or fixed -- both measure a viewport the reader never sees. */

.embed .quiz { min-height: 0; }
.embed .stage { padding: 1.5rem 0 2rem; }
.embed .progress { padding-top: 1rem; }
.embed body, .embed { background: var(--ground); }
/* The washes stay fixed. Made absolute they are laid out in the document and
   count toward scrollHeight, and scrollHeight is exactly what the frame
   reports as its height -- so a decorative gradient grew the frame to 19518px. */
.embed::before { top: -20vw; right: -14vw; }
.embed::after { bottom: -18vw; left: -12vw; }
.embed .wrap, .embed .narrow { width: min(100% - 1.6rem, var(--step)); }
.embed .section { margin-top: 3rem; }

/* The language switcher is eight links on every page. Without this, a
   keyboard reaches the first question on the ninth tab, every time. */
.skip {
  position: absolute; left: 0.75rem; top: -4rem; z-index: 100;
  background: var(--accent); color: #22110D; font-weight: 600;
  padding: 0.7rem 1.2rem; border-radius: 0 0 10px 10px; text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip:focus { top: 0; color: #22110D; }

/* An author rule beats the user-agent stylesheet on origin, so `.opt` having
   display:flex silently defeated `[hidden]`. Without this line the audience
   filtering runs, clears the ticks, and changes nothing anybody can see. */
[hidden] { display: none !important; }

/* --------------------------------------------------------- framed opening */

.intro { padding: clamp(2rem, 6vw, 3.4rem) 0 1rem; max-width: 44rem; }
.intro h1 { font-size: clamp(1.9rem, 5vw, 2.9rem); margin-bottom: 1.1rem; }
.intro .lede { margin-bottom: 2rem; }

.intro__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 720px) { .intro__points { grid-template-columns: repeat(3, 1fr); } }
.intro__points li {
  display: grid; grid-template-columns: auto 1fr; gap: 0 .6rem;
  align-items: start;
}
.intro__points svg { width: 15px; height: 15px; color: var(--accent);
                     margin-top: .32rem; grid-row: 1 / span 2; }
.intro__points b { font-weight: 600; font-size: .95rem; }
.intro__points span { color: var(--ink-dim); font-size: .85rem; line-height: 1.5; }

/* Question one asks two different questions at once -- are you two, and which
   of you. Without the split, the two "just for me" cards differ only by a
   sub-line, and a reader has to compare small grey text to tell them apart. */
.opts__group {
  grid-column: 1 / -1;
  margin: .4rem 0 -.1rem;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.opts__group:first-child { margin-top: 0; }

/* ---------------------------------------------------------------- consent
 *
 * A bar at the bottom, not a sheet over the page. The question is worth
 * asking once and is not worth blocking somebody's first eight seconds for,
 * so the content behind it stays readable and reachable the whole time.
 *
 * `[hidden]` is spelled out because the flex display below would otherwise
 * win against it, and a banner that ignores its own hidden attribute is a
 * banner that shows up for people who already answered.
 */
.consent {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  padding: 0 0 max(0.9rem, env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  animation: consent-in 0.32s var(--ease) both;
}
.consent[hidden] { display: none; }

@keyframes consent-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.consent__box {
  width: min(100% - 1.6rem, var(--step));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.8rem;
  padding: 1.15rem 1.4rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--ground-2) 92%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-lift);
}

.consent__say { flex: 1 1 24rem; }

.consent__title {
  margin: 0 0 0.25em;
  font: 600 1.02rem/1.3 var(--sans);
  color: var(--ink);
}

.consent__text {
  margin: 0;
  max-width: 52em;
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.55;
}
.consent__text a { color: var(--accent); }

.consent__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  flex: 0 0 auto;
}
.consent__acts .btn { padding: 0.78rem 1.5rem; font-size: 0.94rem; }

/* Refusing must be exactly as easy as accepting: same row, same size, same
   reachable place for a thumb. On a narrow screen that means both buttons
   share the width rather than one of them wrapping under the other. */
@media (max-width: 30rem) {
  .consent__acts { width: 100%; }
  .consent__acts .btn { flex: 1 1 0; justify-content: center; }
}

/* On a phone the box was a third of the screen. It is a question, not a
   document: the answer is two buttons, and the reasoning behind them can be
   read at the size reasoning is read at. Tightened rather than truncated --
   the sentence about the quiz answers never being sent is the one that makes
   somebody comfortable saying yes, and hiding it would be the wrong economy. */
@media (max-width: 40rem) {
  .consent { padding-bottom: max(0.55rem, env(safe-area-inset-bottom)); }
  .consent__box {
    width: calc(100% - 1rem);
    gap: 0.7rem 1rem;
    padding: 0.85rem 1rem 0.95rem;
    border-radius: var(--radius-sm);
  }
  .consent__title { font-size: 0.95rem; margin-bottom: 0.15em; }
  .consent__text { font-size: 0.8rem; line-height: 1.45; }
  .consent__acts .btn { padding: 0.7rem 1rem; font-size: 0.9rem; }
}

/* The way back in, in the footer. Looks like the other footer links. */
.consent-open {
  background: none;
  border: 0;
  /* Same box as the links beside it: it is a button in a row of links, and
     it was the one thing in the footer still under the 24px minimum. */
  padding: 0.5rem 0.35rem;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.consent-open:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .consent { animation: none; }
}