/* Self-hosted fonts (SIL Open Font License; see app/fonts/OFL-*.txt). Latin subset only. */
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/anton-400.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/manrope-400.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/manrope-500.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/manrope-700.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/manrope-800.woff2') format('woff2'); }

/* Marriage Math: navy and gold (MM3-A). One theme, no switcher.
   Balance rule, applied globally: headings use text-wrap: balance and body copy
   uses text-wrap: pretty. The questionnaire is one continuous page. Display type
   is Anton, body type is Manrope, both self-hosted. The logo is the
   interlocking-bands mark served from ./img/logo-mark.svg and is never recolored. */
:root {
  --radius: 14px;
  --pad: clamp(18px, 3.44vw, 44px);
  --measure: 34rem;
  --ink: #F0EAD6;
  --ink-soft: #cdc7b3;
  --paper: #131b45;
  --card: rgba(0, 0, 0, .3);
  --field: #0c1030;
  --rule: rgba(240, 234, 214, .22);
  --accent: #C9A84C;
  --accent-soft: rgba(240, 234, 214, .12);
  --on-accent: #0A0B14;
  --warn: #ffc89a;
  --warn-soft: rgba(255, 200, 154, .12);
  --focus: #9ecbff;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 500 clamp(1rem, 0.96rem + 0.2vw, 1.0625rem)/1.6 'Manrope', system-ui, sans-serif;
  text-wrap: pretty;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, legend, .lede, .wordmark {
  text-wrap: balance;
  font-family: 'Manrope', system-ui, sans-serif;
  line-height: 1.22;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem); margin: 0 0 .4rem; }
h2 { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem); margin: 0 0 .4rem; }
h3 { font-size: clamp(1.15rem, 1rem + .7vw, 1.4rem); margin: 2rem 0 .5rem; }

p { margin: 0 0 1rem; max-width: var(--measure); }

.lede { font-size: 1.12em; color: var(--ink-soft); max-width: var(--measure); }
.note { font-size: .92em; color: var(--ink-soft); max-width: var(--measure); }
.small { font-size: .85em; color: var(--ink-soft); }
.attrib { font-size: .9em; color: var(--ink-soft); font-style: italic; }

.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 20;
  background: var(--card); color: var(--ink); padding: .7rem 1rem;
  border: 2px solid var(--focus); border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; }

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

/* --- header, nav, footer -------------------------------------------------- */

header.site {
  padding: var(--pad) var(--pad) .5rem;
  border-bottom: 1px solid var(--rule);
}
.brand { display: flex; align-items: center; gap: .7rem; }
.brand-text { min-width: 0; }

/* Width and height are set on the tag as well, so the row reserves its space
   before the image arrives and the header never shifts. */
.brandmark {
  flex: none;
  width: clamp(38px, 3vw + 30px, 48px);
  height: auto;
}

/* On a dark ground the mark's charcoal outlines would disappear, so it sits on
   a small light plate. Only the schemes that need one set --mark-plate, and the
   artwork itself is never recolored, filtered or swapped. */
.brandmark {
  background: var(--mark-plate);
  border-radius: 8px;
  padding: var(--mark-pad);
  box-sizing: content-box;
}
.wordmark {
  font-size: clamp(1.1rem, 1rem + .6vw, 1.35rem);
  font-weight: 700; letter-spacing: .02em; margin: 0;
  text-transform: uppercase;
}
.site-sub { font-size: .9em; color: var(--ink-soft); margin: .15rem 0 0; }
/* The mark takes width off this line, so on a narrow phone the sentence wraps.
   Keep the book's title whole when it does: break before "Stop", never inside
   it. The title is short enough that this cannot overflow at 320px. */
.site-sub cite { white-space: nowrap; }

/* --- the running count ---------------------------------------------------- */

/* Sticks to the top for the whole of the questions, so the number is always in
   view while requirements are being added. */
.countbar {
  position: sticky; top: 0; z-index: 10;
  background: var(--card);
  border-bottom: 1px solid var(--rule);
  padding: .55rem var(--pad) .7rem;
}
.countbar[hidden] { display: none; }
.countbar-inner { max-width: 52rem; margin: 0 auto; }

.countbar-num {
  margin: 0;
  font: 700 clamp(1.7rem, 1.1rem + 2.6vw, 2.7rem)/1.05 'Manrope', system-ui, sans-serif;
  letter-spacing: -0.02em;
  color: var(--accent);
  /* Digits keep the same width as the figure changes, so the number does not
     jitter sideways while a selection is being made. */
  font-variant-numeric: tabular-nums;
}
.countbar-sub {
  margin: .1rem 0 0; font-size: .9rem; line-height: 1.3;
  color: var(--ink-soft); max-width: var(--measure);
}
.countbar-of {
  margin: .3rem 0 0; font-size: .82rem; color: var(--ink-soft);
  max-width: var(--measure);
}
.countbar-of:empty { display: none; }

/* The bar is sticky, so on a short phone screen every line it uses is a line
   the question below it loses. Tightened, not truncated: the caveat text is
   load-bearing and is never dropped. */
@media (max-width: 30rem) {
  .countbar { padding: .45rem var(--pad) .55rem; }
  .countbar-num { font-size: 1.55rem; }
  .countbar-sub { font-size: .84rem; }
  .countbar-of { font-size: .77rem; margin-top: .25rem; }
  .meter { margin-top: .4rem; height: 6px; }
}

.meter {
  height: 7px; margin: .5rem 0 0; max-width: var(--measure);
  background: var(--accent-soft); border-radius: 999px; overflow: hidden;
}
.meter[hidden] { display: none; }
.meter-fill {
  height: 100%; width: 100%; min-width: 4px;
  margin-inline-start: 0;
  background: var(--accent); border-radius: 999px;
  transition: width .35s ease, margin-inline-start .35s ease;
}
/* A range is drawn as a floating band rather than a fill from zero, so it
   cannot be read as a single precise value. */
.meter-fill.is-band { opacity: .8; }
@media (prefers-reduced-motion: reduce) { .meter-fill { transition: none; } }

footer.site {
  margin-top: 3rem; padding: var(--pad);
  border-top: 1px solid var(--rule); color: var(--ink-soft); font-size: .9em;
}

/* --- screens -------------------------------------------------------------- */

main { padding: var(--pad) 0; }
main:focus { outline: none; }
.screen { max-width: 52rem; margin: 0 auto; padding-inline: var(--pad); }
.screen[hidden] { display: none; }
#flow[hidden] { display: none; }

/* One page now, so the sections need real air between them and a jump link
   must not land a heading underneath the sticky count. */
#flow > .screen + .screen {
  margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--rule);
}
#flow > .screen { scroll-margin-top: 7.5rem; }
#flow > .screen :is(h2, h3):focus { outline: none; }

fieldset {
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--card); padding: 1rem 1.1rem 1.1rem; margin: 0 0 1.25rem;
}
legend {
  font-weight: 700; font-size: 1.02rem; padding: 0 .4rem;
}

label { display: inline-block; }

input[type="number"], select {
  font: inherit; color: var(--ink); background: var(--card);
  border: 1px solid var(--rule); border-radius: 6px;
  padding: .5rem .6rem; max-width: 100%;
}
input[type="number"] { width: 7rem; }
select { width: 100%; max-width: 30rem; }

.field-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.field-row > span { display: flex; flex-direction: column; gap: .25rem; flex: 1 1 12rem; }

/* Every choice group is a single column at every width. These used to wrap
   greedily, and because the options are different lengths that packed them into
   ragged rows: the seven race options landed as 2, 2, 1, 1, 1 at tablet widths,
   and the three political options as 2, 1 on a phone, which strands a lone
   option on the last row. Balancing that by breakpoint would need a different
   column count per group, since 3, 4 and 7 options do not divide alike. A
   single column cannot orphan anything at any width or orientation, and it
   reads down the page in the direction the reader is already moving.
   The .stack class in the markup is now the default and is kept only so the
   markup does not have to change. */
.radios, .checks { display: flex; flex-direction: column; gap: .55rem; }
.radios label, .checks label, .switchrow label {
  display: flex; gap: .5rem; align-items: flex-start;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: .95rem; line-height: 1.35; cursor: pointer;
  flex: 0 1 auto; max-width: var(--measure);
}
.radios input, .checks input, .switchrow input {
  margin: .2rem 0 0; flex: none; width: 1.05rem; height: 1.05rem; accent-color: var(--accent);
}
.switchrow { display: flex; gap: .5rem; align-items: flex-start; margin: 0 0 .5rem; }

.actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.5rem 0 0; }

button {
  font: 600 .98rem/1.2 'Manrope', system-ui, sans-serif;
  padding: .65rem 1.1rem; border-radius: 8px;
  border: 1px solid var(--rule); background: var(--card); color: var(--ink);
  cursor: pointer;
}
button:hover { border-color: var(--accent); }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
button.link {
  background: none; border: none; padding: .25rem 0;
  text-decoration: underline; color: var(--accent);
}

/* --- notes and callouts --------------------------------------------------- */

.callout {
  border: 1px solid var(--rule); border-left: 4px solid var(--accent);
  background: var(--card); border-radius: var(--radius);
  padding: 1rem 1.1rem; margin: 1.25rem 0;
}
.callout h2, .callout h3 { margin-top: 0; }
.callout ul { margin: 0; padding-left: 1.1rem; }
.callout li { margin-bottom: .5rem; max-width: var(--measure); }
.callout.permanent { border-left-color: var(--warn); }

.framing {
  background: var(--accent-soft); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: .9rem 1.1rem; margin: 0 0 1.5rem;
}
.framing p:last-child { margin-bottom: 0; }

.warn { color: var(--warn); }
p.warn, .note.warn {
  background: var(--warn-soft); border-radius: 6px;
  padding: .6rem .75rem; border: 1px solid var(--rule);
}
.err {
  color: var(--warn); background: var(--warn-soft);
  border: 1px solid var(--warn); border-radius: 6px;
  padding: .5rem .7rem; font-size: .92em; margin: .6rem 0 0;
}

.running {
  font-family: 'Manrope', system-ui, sans-serif;
  background: var(--accent-soft); border-radius: var(--radius);
  padding: .75rem 1rem; font-size: .95rem;
}

/* --- results -------------------------------------------------------------- */

.headline-num {
  font: 700 clamp(2.2rem, 1.4rem + 3.6vw, 3.6rem)/1.05 'Manrope', system-ui, sans-serif;
  letter-spacing: -0.02em; margin: 0 0 .25rem; color: var(--accent);
}
.headline-sub { font-size: 1.02rem; color: var(--ink-soft); max-width: var(--measure); }

.pool-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.pool {
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--card); padding: 1rem;
}
.pool h4 { margin: 0 0 .35rem; font-size: 1rem; }
.pool .big {
  font: 700 1.9rem/1.1 'Manrope', system-ui, sans-serif;
  color: var(--accent); display: block; margin-bottom: .3rem;
}

table.wf { width: 100%; border-collapse: collapse; font-size: .93rem; }
.scroller { overflow-x: auto; }
table.wf th, table.wf td {
  text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
table.wf th { font-family: 'Manrope', system-ui, sans-serif; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-soft); }
table.wf td.num, table.wf th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.wf tr.marker td { background: var(--accent-soft); font-weight: 700; }

.chip {
  display: inline-block; font: 600 .72rem/1 'Manrope', system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: .04em;
  padding: .25rem .45rem; border-radius: 999px; border: 1px solid var(--rule);
  background: var(--accent-soft); color: var(--ink-soft); white-space: nowrap;
}
.chip.low { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }

.release-row {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
  justify-content: space-between;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--card); padding: .8rem 1rem; margin-bottom: .6rem;
}
.release-row .what { flex: 1 1 14rem; }
.release-row .effect { font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: .92rem; }

.story {
  border: 1px solid var(--rule); border-left: 4px solid var(--accent);
  background: var(--card); border-radius: var(--radius);
  padding: 1.1rem 1.2rem; margin: 1.5rem 0;
}
.story h3 { margin-top: 0; }
.story .marker {
  display: inline-block; margin-bottom: .5rem;
}

ul#reflection { padding-left: 1.15rem; }
ul#reflection li { margin-bottom: .7rem; max-width: var(--measure); }

ul#sourceList { padding-left: 1.15rem; }
ul#sourceList li { margin-bottom: .8rem; max-width: var(--measure); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --- navy and gold (MM3-A, phase 6a) --------------------------------------- */

:root { --display: 'Anton', Impact, 'Arial Narrow', sans-serif; }
body {
  background-color: var(--paper);
  background-image: linear-gradient(180deg, #1c2a63 0, #131b45 520px, #131b45 1200px, #0A0B14 100%);
}
.nw { white-space: nowrap; }
h1, h2, h3, h4, legend, .lede, .wordmark, .head, .cap, .tile b, .stat span, .sl { text-wrap: balance; }
p, li, .fine { text-wrap: pretty; }

header.site {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: clamp(14px, 2vw, 26px) var(--pad); border-bottom: 0;
}
.brandmark { width: 56px; height: 56px; padding: 0; border-radius: 12px; }
.wordmark { font: 400 clamp(1.5rem, 2.4vw, 1.9rem)/1 var(--display); letter-spacing: .04em; }
.site-sub { font-size: .82rem; margin: .25rem 0 0; }
.topnav { display: flex; gap: 8px; }
button.pill {
  font: 800 12px/1.25 'Manrope', sans-serif; letter-spacing: .16em; text-transform: uppercase;
  background: rgba(0, 0, 0, .28); color: var(--ink); border: 1px solid transparent;
  border-radius: 99px; padding: 11px 16px; text-wrap: balance;
}
button.pill:hover { border-color: var(--accent); }
@media (max-width: 900px) {
  header.site { flex-direction: column; align-items: stretch; gap: 12px; }
  .topnav { display: grid; grid-template-columns: repeat(3, 1fr); }
  button.pill { letter-spacing: .08em; font-size: 11px; padding: 10px 6px; text-align: center; }
}

footer.site { background: #06070d; border-top: 0; padding: clamp(26px, 3vw, 34px) var(--pad); margin-top: 0; }
.ft-in { max-width: 1280px; margin: 0 auto; }
button.meth {
  background: none; border: 0; border-bottom: 3px solid var(--accent); border-radius: 0; padding: 0;
  font: 400 clamp(22px, 1.9vw, 24px)/1.2 var(--display); letter-spacing: .03em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 14px; text-wrap: balance; text-align: left; max-width: 15em;
}
button.meth { font-family: var(--display); }
.fn, footer.site p { font-size: 12.5px; line-height: 1.65; opacity: .8; max-width: 980px; margin-bottom: .6rem; }

/* results ------------------------------------------------------------------ */

#flow > #s-results { max-width: none; padding: 0; margin: 0; border-top: 0; }
.res-in { max-width: 1280px; margin: 0 auto; padding-inline: var(--pad); }
.res-sec { padding-block: clamp(32px, 4.4vw, 56px); }
.res-hero { padding-block: clamp(20px, 3.9vw, 50px) clamp(36px, 5.5vw, 70px); }
#s-results { --big: clamp(3.2rem, 19vw, 16.25rem); }
#s-results h2 {
  font: 400 clamp(2.4rem, 5.47vw, 4.4rem)/.98 var(--display); text-transform: uppercase;
  margin: 0 0 clamp(14px, 1.9vw, 24px); color: var(--ink); letter-spacing: 0;
}
#s-results h2.kick {
  font: 800 13px/1.4 'Manrope', sans-serif; letter-spacing: .3em; color: #ffe08a; margin: 0 0 6px;
}
#s-results .fine, .fine { font-size: 14px; line-height: 1.5; opacity: .85; margin-top: 12px; max-width: 60rem; }
#s-results .lede { font-size: 1.05rem; max-width: 46rem; }

#headline .big {
  margin: 0; max-width: none; white-space: nowrap; text-transform: uppercase; color: #F0EAD6;
  font: 400 calc(var(--big) * 11 / var(--len, 11))/.86 var(--display); letter-spacing: -.01em;
  text-shadow: .04em .04em 0 #070918;
}
#headline .big.is-range { font-size: calc(var(--big) * 11 / var(--len, 11) * .7); }
#headline .lbl {
  display: inline-block; max-width: 100%; margin: 14px 0 0; padding: 4px 18px; position: relative; z-index: 0;
  color: #0A0B14; text-transform: uppercase; text-wrap: balance;
  font: 400 clamp(1.75rem, 4.85vw, 3.875rem)/1 var(--display); letter-spacing: .01em;
}
#headline .lbl::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #C9A84C; transform: rotate(-1.5deg); }
#headline .sub { max-width: 41rem; margin: 26px 0 8px; font-size: clamp(1rem, 1.5vw, 1.19rem); line-height: 1.5; font-weight: 500; }
#headline .moe { max-width: 41rem; margin: 0 0 18px; font-weight: 500; opacity: .9; font-size: clamp(.95rem, 1.3vw, 1.05rem); }
#headline .note { max-width: 41rem; font-size: .95rem; }
#headline .note.warn, #headline p.warn { color: var(--warn); }
.chips { display: flex; gap: 10px; flex-wrap: wrap; max-width: 800px; margin: 18px 0 0; }
.chips .chip {
  font: 800 13px/1.3 'Manrope', sans-serif; text-transform: none; letter-spacing: 0;
  background: #F0EAD6; color: #070918; padding: 7px 16px; border: 0; white-space: normal; text-align: center; border-radius: 18px; text-wrap: balance;
}

ol.narrowing { list-style: none; margin: 0; padding: 0; }
ol.narrowing li {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "l n" "b b"; gap: 6px 20px;
  padding: 16px 22px; margin-bottom: 10px; background: rgba(0, 0, 0, .32); border-radius: 14px; align-items: center;
}
ol.narrowing .sl { grid-area: l; font-weight: 700; font-size: clamp(15px, 1.4vw, 17px); line-height: 1.35; }
ol.narrowing .sn {
  grid-area: n; font: 400 clamp(28px, 3.4vw, 44px)/1 var(--display); color: #C9A84C; white-space: nowrap; text-align: right;
}
ol.narrowing .sn.long { font-size: clamp(20px, 2.4vw, 30px); }
ol.narrowing .sb { grid-area: b; height: 12px; background: rgba(255, 255, 255, .14); border-radius: 6px; }
ol.narrowing .sb i { display: block; height: 100%; min-width: 3px; background: linear-gradient(90deg, #C9A84C, #1c2a63); border-radius: 6px; }
ol.narrowing li.marker { background: var(--accent-soft); border: 1px solid var(--rule); }
ol.narrowing li.marker .sl { text-transform: uppercase; letter-spacing: .08em; font-size: 13px; }
ol.narrowing li.final { background: #C9A84C; color: #0A0B14; }
ol.narrowing li.final .sn { color: #131b45; font-size: clamp(34px, 4.4vw, 56px); }
ol.narrowing li.final .sb { background: rgba(0, 0, 0, .18); }
ol.narrowing li.final .sb i { background: #131b45; }
ol.narrowing .chip { font: 800 10.5px/1 'Manrope', sans-serif; letter-spacing: .08em; text-transform: uppercase; background: rgba(240, 234, 214, .14); color: inherit; border: 0; margin-left: 4px; vertical-align: 2px; }
ol.narrowing .rm { display: inline-block; font-size: .8em; font-weight: 500; opacity: .75; margin-left: 4px; white-space: nowrap; }
.switchrow { margin-top: 14px; }

.cwrap { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 26px; }
.stat { flex: 1; min-width: min(100%, 260px); background: #F0EAD6; color: #070918; padding: 20px 26px; border-radius: 18px; transform: rotate(-1deg); }
.stat + .stat { background: #C9A84C; transform: rotate(1deg); }
.stat b { display: block; text-transform: uppercase; font: 400 clamp(3.4rem, 7.8vw, 6.25rem)/1 var(--display); }
.stat span { display: block; font-weight: 700; font-size: 15px; line-height: 1.35; }
.crowd { display: grid; grid-template-columns: repeat(40, 1fr); gap: 6px; padding: 22px; background: rgba(0, 0, 0, .3); border-radius: 18px; }
.crowd i { aspect-ratio: 1; border-radius: 50%; background: rgba(240, 234, 214, .5); }
.crowd i.on {
  background: #C9A84C; box-shadow: 0 0 0 4px #F0EAD6, 0 0 26px 9px #C9A84C; transform: scale(1.9);
  position: relative; z-index: 2; animation: beat 1.6s ease-in-out infinite;
}
.crowd i.on.flat { animation: none; transform: scale(1.5); box-shadow: 0 0 0 2px #F0EAD6; }
@keyframes beat { 50% { transform: scale(2.4); } }
.cap { font: 800 clamp(16px, 1.6vw, 20px)/1.35 'Manrope', sans-serif; margin-top: 14px; max-width: 60rem; }

.head { font: 800 clamp(1.375rem, 2.66vw, 2.125rem)/1.25 'Manrope', sans-serif; max-width: 62rem; margin-bottom: 28px; }
.head b { display: block; font: 400 clamp(2.1rem, 3.9vw, 3.1rem)/1 var(--display); text-transform: uppercase; color: #C9A84C; margin-bottom: 6px; }
.slide { margin: 22px 0; background: rgba(0, 0, 0, .3); padding: 20px 24px; border-radius: 18px; }
.slide label { display: block; font: 800 14px/1.4 'Manrope', sans-serif; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; }
.slide label b { font: 400 clamp(2.4rem, 4vw, 3.4rem)/1 var(--display); color: #C9A84C; margin-left: 12px; letter-spacing: 0; vertical-align: middle; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 14px; background: #F0EAD6; border-radius: 7px; padding: 0; border: 0; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 38px; height: 38px; border-radius: 50%; background: #C9A84C; border: 5px solid #131b45; box-shadow: 0 4px 0 #070918; }
input[type=range]::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: #C9A84C; border: 5px solid #131b45; box-shadow: 0 4px 0 #070918; }

.tiles { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 14px; container-type: inline-size; }
.tile { background: rgba(0, 0, 0, .32); padding: 18px 20px; border-radius: 16px; min-width: 0; }
.tile small { display: block; font: 800 11px/1.3 'Manrope', sans-serif; letter-spacing: .2em; text-transform: uppercase; opacity: .85; }
.tile b { display: block; font: 400 clamp(17px, 2.4cqw, 30px)/1.15 var(--display); text-transform: uppercase; margin-top: 8px; }
.tile.big { background: #C9A84C; color: #0A0B14; }
.tile.big b { font-size: clamp(26px, 4.3cqw, 52px); line-height: 1.05; }
.calh { font: 700 15px/1.4 'Manrope', sans-serif; margin: 26px 0 10px; }
.cal { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; }
.cal i { display: block; aspect-ratio: 1; background: rgba(240, 234, 214, .25); border-radius: 4px; }
.cal i.on { background: #C9A84C; box-shadow: 0 0 0 3px #F0EAD6, 0 0 22px 6px #C9A84C; border-radius: 50%; animation: beat 1.6s ease-in-out infinite; position: relative; z-index: 2; }
.pass { margin: 26px 0 14px; border: 2px dashed rgba(240, 234, 214, .5); padding: 14px 18px; border-radius: 14px; }
.pass p { font-size: 14px; margin: 0; max-width: none; }
.tag { display: inline-block; font: 800 11px/1.4 'Manrope', sans-serif; letter-spacing: .2em; text-transform: uppercase; background: #F0EAD6; color: #070918; padding: 2px 12px; border-radius: 99px; margin-bottom: 6px; }
.disc { font-size: 14px; line-height: 1.55; opacity: .85; font-weight: 500; max-width: 60rem; }

.pool-grid .pool .big { text-transform: uppercase; font: 400 clamp(1.8rem, 3vw, 2.6rem)/1.1 var(--display); color: #C9A84C; }
#s-results table.wf { color: var(--ink); }
#s-results .callout { background: rgba(0, 0, 0, .3); }

@media (max-width: 640px) {
  .crowd { grid-template-columns: repeat(20, 1fr); gap: 3px; padding: 12px; }
  .cal { grid-template-columns: repeat(12, 1fr); }
  .tiles { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .tile { padding: 12px; }
  .tile.big { grid-column: 1 / -1; padding: 16px 18px; }
  .tile b { font-size: 19px; }
  .tile small { letter-spacing: .12em; font-size: 10px; }
  .stat b { font-size: 3.6rem; }
  ol.narrowing li { padding: 14px 16px; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .tiles { grid-template-columns: repeat(3, 1fr); }
  .tile.big { grid-column: 1 / -1; }
}

/* Phone on its side: short and wide, so the two halves sit side by side. */
@media (orientation: landscape) and (max-height: 520px) {
  header.site { flex-direction: row; align-items: center; gap: 12px; padding: 10px var(--pad); }
  .topnav { display: flex; }
  button.pill { letter-spacing: .12em; padding: 9px 14px; }
  #s-results { --big: 76px; }
  .res-top { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .res-top .res-in { padding-inline: var(--pad); }
  .res-hero, .res-sec { padding-block: 22px; }
  #s-results h2 { font-size: 2.3rem; }
  #headline .sub { margin-top: 14px; }
  .crowd { grid-template-columns: repeat(40, 1fr); gap: 3px; padding: 12px; }
  .cal { grid-template-columns: repeat(24, 1fr); }
  .tiles { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 8px; }
  .tile.big { grid-column: auto; }
  .stat b { font-size: 3.6rem; }
}
.countbar { transition: transform .25s ease; }
.countbar.away { transform: translateY(-100%); }
@media (max-width: 380px) {
  ol.narrowing li { padding: 14px 16px; gap: 6px 12px; }
  ol.narrowing .sl { min-width: 0; overflow-wrap: anywhere; }
  ol.narrowing .sn { font-size: 24px; }
  ol.narrowing .sn.long { font-size: 18px; }
}
@media (orientation: landscape) and (max-height: 520px) and (max-width: 800px) {
  ol.narrowing li { padding: 12px 16px; gap: 4px 12px; }
  ol.narrowing .sn { font-size: 24px; }
  ol.narrowing .sn.long { font-size: 18px; }
}
/* hero: chips come right after the headline, the long notes after the chips */
.res-hero > .res-in { display: flex; flex-direction: column; align-items: flex-start; }
#headline { display: contents; }
#headline .note { order: 3; }
.res-hero .chips { order: 2; }
#resultsFraming, #neutralNote { order: 4; }
.res-hero .res-in > * { max-width: 100%; }
.res-more h2 { margin-top: clamp(40px, 5vw, 64px); }
.res-more h2:first-child { margin-top: 0; }
.res-more .callout { margin-top: 24px; }
.res-hero .chips { margin-bottom: 22px; }
@media (max-width: 640px) {
  #headline .big { white-space: normal; text-wrap: balance; font-size: min(25vw, 7.2rem, calc(185vw / var(--nd, 7))); line-height: .9; }
  #headline .big.is-range { font-size: min(17vw, 5rem); }
}
.res-hero .chips { align-self: stretch; }
@media (max-width: 640px) { #headline .big { max-width: 100%; } }

/* --- results, lower half: stat tiles, ranked cards, chips, posters, trust panel --- */

.pool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 26px; }
.pool-grid .pool { background: #F0EAD6; color: #070918; padding: 20px 26px; border-radius: 18px; transform: rotate(-1deg); border: 0; }
.pool-grid .pool + .pool { background: #C9A84C; transform: rotate(1deg); }
.pool-grid .pool h4 { font: 800 12px/1.3 'Manrope', sans-serif; letter-spacing: .2em; text-transform: uppercase; margin: 0 0 8px; }
.pool-grid .pool .big { display: block; color: #070918; font: 400 clamp(2.2rem, 4.4vw, 3.8rem)/1 var(--display); }
.pool-grid .pool .note { color: #070918; font-weight: 700; margin: 8px 0 0; }
.res-more .cap { font-size: clamp(15px, 1.4vw, 18px); margin-top: 10px; }
.res-more .lede { margin-bottom: 22px; }

ol.reqs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: none; }
ol.reqs li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 15rem) auto; gap: 8px 24px; align-items: center;
  background: rgba(0, 0, 0, .32); border-radius: 16px; padding: 16px 24px;
}
ol.reqs li:first-child { background: #C9A84C; color: #0A0B14; }
ol.reqs .rk { font: 400 clamp(2.6rem, 4.6vw, 4rem)/1 var(--display); color: #C9A84C; min-width: 1ch; }
ol.reqs li:first-child .rk { color: #131b45; }
ol.reqs .rl { font-weight: 700; font-size: clamp(15px, 1.4vw, 17px); line-height: 1.4; text-wrap: balance; }
ol.reqs .chip { font: 800 10.5px/1 'Manrope', sans-serif; letter-spacing: .08em; text-transform: uppercase; background: rgba(240, 234, 214, .16); color: inherit; border: 0; margin-left: 4px; vertical-align: 2px; }
ol.reqs li:first-child .chip { background: rgba(0, 0, 0, .14); }
ol.reqs .rp small { display: block; font: 800 10.5px/1.3 'Manrope', sans-serif; letter-spacing: .18em; text-transform: uppercase; opacity: .8; }
ol.reqs .rp b { display: block; font: 400 clamp(1.4rem, 2.2vw, 1.9rem)/1.1 var(--display); text-transform: uppercase; margin-top: 4px; }
ol.reqs .re { justify-self: end; text-align: center; background: #F0EAD6; color: #070918; padding: 8px 16px; border-radius: 99px; font: 800 13px/1.2 'Manrope', sans-serif; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
ol.reqs .re b { font: 400 1.7rem/1 var(--display); letter-spacing: 0; margin-right: 4px; }
ol.reqs li:first-child .re { background: #131b45; color: #F0EAD6; }
@media (max-width: 760px) {
  ol.reqs li { grid-template-columns: auto minmax(0, 1fr); padding: 14px 16px; gap: 8px 14px; }
  ol.reqs .rp { grid-column: 1 / -1; }
  ol.reqs .re { grid-column: 1 / -1; justify-self: start; }
  ol.reqs .rp b { font-size: 1.5rem; }
}

#conversationPanel { padding: clamp(20px, 3vw, 34px); border: 0; border-radius: 20px; background: rgba(0, 0, 0, .3); }
#conversationPanel h3 { font: 400 clamp(1.9rem, 3.4vw, 2.8rem)/1 var(--display); text-transform: uppercase; color: #C9A84C; margin: 0 0 12px; }
#conversationPanel > p { max-width: 46rem; }
ul.traits { list-style: none; margin: 22px 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
ul.traits li {
  margin: 0; max-width: none; text-align: center; background: #F0EAD6; color: #070918; border-radius: 99px;
  padding: 9px 12px; font: 800 13px/1.25 'Manrope', sans-serif; text-wrap: balance; display: flex; align-items: center; justify-content: center;
}
@media (min-width: 560px) { ul.traits { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 980px) { ul.traits { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

ol.posters { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
ol.posters li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; background: #F0EAD6; color: #070918; border-radius: 18px; padding: 14px 26px 14px 18px; margin: 0; max-width: none; }
ol.posters li:nth-child(even) { background: #C9A84C; }
ol.posters .pn { font: 400 clamp(3.2rem, 6vw, 5rem)/1 var(--display); color: #131b45; min-width: 1.1ch; text-align: center; }
ol.posters p { margin: 0; font: 800 clamp(16px, 1.7vw, 21px)/1.35 'Manrope', sans-serif; max-width: 46rem; }
@media (max-width: 640px) { ol.posters li { gap: 12px; padding: 12px 16px 12px 10px; } }

.trust { margin-top: clamp(40px, 5vw, 64px); background: rgba(0, 0, 0, .3); border: 2px dashed rgba(201, 168, 76, .6); border-radius: 20px; padding: clamp(20px, 3vw, 34px); }
#s-results .trust h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); color: #C9A84C; margin-bottom: 14px; }
.trust .tn { font-size: 14.5px; line-height: 1.55; margin: 0 0 10px; padding-left: 14px; border-left: 3px solid #C9A84C; max-width: 60rem; opacity: .92; }
.trust .tn.warn { color: var(--ink); border-left-color: #F0EAD6; font-weight: 700; }
.trust .tn:empty { display: none; }

.calend {
  margin: 10px 0 0; padding: 12px 20px; background: #C9A84C; color: #0A0B14; border-radius: 12px; text-align: center;
  font: 400 clamp(1.3rem, 2.4vw, 1.9rem)/1.1 var(--display); text-transform: uppercase; letter-spacing: .04em;
}
.calend[hidden] { display: none; }
@media (orientation: landscape) and (max-height: 520px) { ol.reqs li { padding: 10px 16px; } ol.reqs .rk { font-size: 2.2rem; } }
#s-results .res-more h2 { margin-top: clamp(40px, 5vw, 64px); }
#s-results .res-more h2:first-child { margin-top: 0; }
#s-results .trust h2 { margin-top: 0; }
ol.reqs li { grid-template-columns: 3.2rem minmax(0, 1fr) 15rem 9.5rem; }
@media (max-width: 760px) { ol.reqs li { grid-template-columns: auto minmax(0, 1fr); } }

/* chips: flex so the last row centers (6/6/5 on desktop) */
ul.traits { display: flex; flex-wrap: wrap; justify-content: center; --c: 2; }
ul.traits li { flex: 0 0 calc((100% - (var(--c) - 1) * 8px) / var(--c)); min-width: 0; }
@media (min-width: 560px) { ul.traits { --c: 3; } }
@media (min-width: 980px) { ul.traits { --c: 6; } }
ul.traits li.w2 { flex-basis: 100%; }
@media (min-width: 560px) { ul.traits li.w2 { flex-basis: calc((100% - (var(--c) - 1) * 8px) / var(--c)); } ul.traits li.w3 { flex-basis: 100%; } }
@media (min-width: 980px) { ul.traits li.w3 { flex-basis: calc((100% - (var(--c) - 1) * 8px) / var(--c)); } ul.traits li.w6 { flex-basis: 100%; } }
@media (max-width: 640px) { .pool-grid { grid-template-columns: minmax(0, 1fr); } }
.pool-grid .pool .note { overflow-wrap: normal; word-break: normal; }

/* --- navy and gold (MM3-A, phase 6b): every screen except results ----------- */

:root { --gold: #C9A84C; --cream: #F0EAD6; --ink-deep: #070918; --navy: #131b45; }
main { padding: 0; }
.screen { max-width: 76rem; }
#flow > .screen:not(#s-results) { padding-block: clamp(34px, 5vw, 64px); }
#flow > .screen + .screen { margin-top: 0; border-top: 1px solid rgba(240, 234, 214, .12); }
#flow > #s-results + .screen { border-top: 0; }
#flow > .screen { scroll-margin-top: 6rem; }

/* headings: Anton, uppercase by CSS, Title Case in the source */
#flow > .screen:not(#s-results) > h2, #s-method > h2 {
  font: 400 clamp(2.4rem, 5.47vw, 4.4rem)/.98 var(--display); text-transform: uppercase;
  letter-spacing: 0; margin: 0 0 14px; color: var(--cream);
}
.lede { font-size: clamp(1rem, 1.5vw, 1.19rem); line-height: 1.5; font-weight: 500; color: var(--cream); max-width: 41rem; }
.screen > .lede { margin-bottom: 26px; }

/* fieldsets become scrim panels with a kicker legend */
fieldset { border: 0; border-radius: 18px; background: rgba(0, 0, 0, .3); padding: 22px 24px 24px; margin: 0; min-width: 0; }
legend {
  float: left; width: 100%; padding: 0; margin: 0 0 14px;
  font: 800 13px/1.4 'Manrope', sans-serif; letter-spacing: .3em; text-transform: uppercase; color: #ffe08a; text-wrap: balance;
}
legend + * { clear: both; }
.screen .note { font-size: 14px; line-height: 1.55; margin: 12px 0 0; max-width: 46rem; opacity: .9; }
.screen .err { margin-top: 12px; }

/* inputs */
input[type="number"], select {
  font: 700 16px/1.2 'Manrope', sans-serif; color: var(--cream); background: var(--field);
  border: 2px solid rgba(240, 234, 214, .3); border-radius: 14px; padding: 13px 16px; min-height: 52px;
}
input[type="number"]:focus, select:focus { border-color: var(--gold); }
select { width: 100%; max-width: none; }
fieldset label[for], fieldset > label { margin-top: 14px; }
.field-row label { font: 800 12px/1.3 'Manrope', sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.field-row input[type="number"] { width: 100%; max-width: 12rem; }

/* choice pills: cream, gold when chosen, native input kept for the keyboard */
.radios, .checks { display: grid; gap: 10px; grid-template-columns: repeat(var(--c, 1), minmax(0, 1fr)); }
.radios[data-n="2"], .radios[data-n="4"], .radios[data-n="5"], .radios[data-n="6"], .radios[data-n="7"], .radios[data-n="8"],
.checks[data-n="2"], .checks[data-n="4"], .checks[data-n="5"], .checks[data-n="6"], .checks[data-n="7"], .checks[data-n="8"] { --c: 2; }
.radios label, .checks label {
  position: relative; max-width: none; margin: 0; padding: 12px 16px; min-height: 52px; align-items: center; justify-content: center; text-align: center;
  background: var(--cream); color: var(--ink-deep); border-radius: 16px;
  font: 800 14px/1.3 'Manrope', sans-serif; text-wrap: balance; transition: background .15s;
}
.radios input, .checks input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.radios label:has(input:checked), .checks label:has(input:checked) { background: var(--gold); box-shadow: inset 0 0 0 3px var(--ink-deep); }
.radios label:has(input:focus-visible), .checks label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.radios label .note, .checks label .note { display: block; margin: 4px 0 0; font-size: 12.5px; font-weight: 500; opacity: .85; color: inherit; }
.radios.stack label { justify-content: flex-start; text-align: left; }
@media (min-width: 700px) {
  .radios[data-n="2"], .checks[data-n="2"] { --c: 2; }
  .radios[data-n="3"], .checks[data-n="3"] { --c: 3; }
  .radios[data-n="4"], .checks[data-n="4"], .radios[data-n="7"], .checks[data-n="7"], .radios[data-n="8"], .checks[data-n="8"] { --c: 4; }
  .radios[data-n="5"], .checks[data-n="5"], .radios[data-n="6"], .checks[data-n="6"] { --c: 3; }
  .radios.stack[data-n] { --c: 2; }
  .radios[data-n="2"].stack > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 699px) { .radios[data-n="3"], .checks[data-n="3"] { --c: 1; } .radios.stack[data-n] { --c: 1; } .radios.stack > :last-child { grid-column: auto; } }

/* 5 and 7 choices: rows of 2, then a last row of 3 (never a lone pill) */
@media (max-width: 699px) {
  .radios[data-n="5"]:not(.stack), .radios[data-n="7"]:not(.stack), .checks[data-n="5"], .checks[data-n="7"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .radios[data-n="5"]:not(.stack) > *, .radios[data-n="7"]:not(.stack) > *, .checks[data-n="5"] > *, .checks[data-n="7"] > * { grid-column: span 3; }
  .radios[data-n="5"]:not(.stack) > :nth-last-child(-n+3), .radios[data-n="7"]:not(.stack) > :nth-last-child(-n+3), .checks[data-n="5"] > :nth-last-child(-n+3), .checks[data-n="7"] > :nth-last-child(-n+3) { grid-column: span 2; }
}
@media (min-width: 700px) {
  .radios.stack[data-n="5"], .radios.stack[data-n="7"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .radios.stack[data-n="5"] > *, .radios.stack[data-n="7"] > * { grid-column: span 3; }
  .radios.stack[data-n="5"] > :nth-last-child(-n+3), .radios.stack[data-n="7"] > :nth-last-child(-n+3) { grid-column: span 2; }
}

/* buttons */
.actions { gap: 12px; margin-top: 28px; }
button { font: 800 13px/1.2 'Manrope', sans-serif; letter-spacing: .14em; text-transform: uppercase; border-radius: 99px; padding: 15px 26px; background: rgba(0, 0, 0, .3); border: 2px solid rgba(240, 234, 214, .3); color: var(--cream); text-wrap: balance; }
button:hover { border-color: var(--gold); }
button.primary { background: var(--gold); border-color: var(--gold); color: var(--ink-deep); font-size: 15px; padding: 17px 34px; }
button.pill { border: 1px solid transparent; }

/* callouts */
.callout { background: rgba(0, 0, 0, .3); border: 0; border-left: 5px solid var(--gold); border-radius: 18px; padding: 22px 26px; margin: 22px 0; }
.callout h2 { font: 400 clamp(1.6rem, 2.6vw, 2.2rem)/1 var(--display); text-transform: uppercase; color: var(--gold); margin: 0 0 12px; }
.callout li { margin-bottom: 10px; font-weight: 500; }
.callout li::marker { color: var(--gold); }
.running { background: var(--gold); color: var(--ink-deep); font-weight: 800; border-radius: 18px; padding: 16px 22px; margin-top: 18px; }

/* screens as grids on wide viewports: two panels across, an odd last panel spans */
@media (min-width: 700px) {
  #s-lane, #s-convictions, #s-compatibility, #s-preferences { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
  #s-lane > :not(fieldset), #s-convictions > :not(fieldset), #s-compatibility > :not(fieldset), #s-preferences > :not(fieldset) { grid-column: 1 / -1; margin-bottom: 0; }
  #s-lane > fieldset:last-of-type:nth-of-type(odd), #s-convictions > fieldset:last-of-type:nth-of-type(odd),
  #s-compatibility > fieldset:last-of-type:nth-of-type(odd), #s-preferences > fieldset:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; }
}
/* the faith ladder is long: it takes a whole row so its pills are not crushed */
@media (min-width: 700px) { #s-convictions > fieldset:first-of-type { grid-column: 1 / -1; } #s-convictions > fieldset:last-of-type:nth-of-type(3) { grid-column: auto; } }
@media (max-width: 699px) { fieldset + fieldset, .screen > fieldset { margin-bottom: 14px; } }

/* start */
.s-hero h1 {
  font: 400 clamp(4rem, 17vw, 9.5rem)/.86 var(--display); text-transform: uppercase; letter-spacing: -.01em;
  margin: 0; color: var(--cream); text-shadow: .04em .04em 0 var(--ink-deep); text-wrap: balance;
}
#startTagline {
  display: inline-block; max-width: 100%; margin: 18px 0 0; padding: 4px 18px; position: relative; z-index: 0;
  color: #0A0B14; text-transform: uppercase; text-wrap: balance;
  font: 400 clamp(1.5rem, 4.2vw, 3rem)/1.05 var(--display);
}
#startTagline::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--gold); transform: rotate(-1.5deg); }
.s-copy { margin-top: 30px; }
.s-copy p { font-size: clamp(1rem, 1.4vw, 1.12rem); line-height: 1.6; max-width: 41rem; }
.attrib { font-style: normal; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: 12px; color: #ffe08a; }
@media (min-width: 700px) {
  #s-start { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 60px); align-items: center; }
  #s-start .s-copy { margin-top: 0; }
  .s-hero h1 { font-size: clamp(4rem, 9vw, 9rem); }
  #s-start noscript { grid-column: 1 / -1; }
}

/* release */
#releaseList { display: grid; gap: 12px; }
.release-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "n w b" "n e b"; gap: 4px 18px; align-items: center;
  background: rgba(0, 0, 0, .32); border: 0; border-radius: 14px; padding: 16px 22px; margin: 0;
}
.release-row .sn { grid-area: n; font: 400 clamp(28px, 3.4vw, 44px)/1 var(--display); color: var(--gold); }
.release-row .what { grid-area: w; flex: none; font-size: clamp(15px, 1.4vw, 17px); line-height: 1.35; }
.release-row .effect { grid-area: e; font-size: 14px; opacity: .85; color: var(--cream); }
.release-row button { grid-area: b; padding: 12px 20px; font-size: 12px; background: var(--gold); border-color: var(--gold); color: var(--ink-deep); }
.release-row button[aria-pressed="true"] { background: var(--cream); border-color: var(--cream); }
.release-row.out .what strong { text-decoration: line-through; }
.release-row.out .what, .release-row.out .effect, .release-row.out .sn { opacity: .55; }
.release-row .chip { font: 800 10.5px/1 'Manrope', sans-serif; letter-spacing: .08em; text-transform: uppercase; background: rgba(240, 234, 214, .14); color: inherit; border: 0; margin-left: 4px; }
@media (min-width: 900px) {
  #releaseList { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #releaseList > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .release-row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "n w" "e e" "b b"; padding: 14px 16px; }
  .release-row button { justify-self: stretch; }
}

/* relocation */
#s-relocation .field-row { background: rgba(0, 0, 0, .3); padding: 20px 24px; border-radius: 18px; margin-bottom: 22px; }
#s-relocation .field-row > span { flex: 1 1 100%; }
.pool-grid .pool .big { overflow-wrap: normal; }
.story { background: rgba(0, 0, 0, .3); border: 0; border-left: 5px solid var(--gold); border-radius: 18px; padding: 22px 26px; margin: 26px 0; }
.story h3 { font: 400 clamp(1.6rem, 2.6vw, 2.2rem)/1 var(--display); text-transform: uppercase; color: var(--gold); margin: 0 0 12px; }
.story .marker { background: var(--cream); color: var(--ink-deep); font: 800 11px/1.4 'Manrope', sans-serif; letter-spacing: .2em; text-transform: uppercase; padding: 2px 12px; border: 0; }
#relocResult > p:not(.note) { font: 800 clamp(1.1rem, 2vw, 1.5rem)/1.3 'Manrope', sans-serif; max-width: 46rem; }

/* method */
#s-method h3 { font: 400 clamp(1.6rem, 2.6vw, 2.2rem)/1 var(--display); text-transform: uppercase; color: var(--gold); margin: 40px 0 14px; letter-spacing: 0; }
#methodBody { max-width: 62rem; }
#methodBody h4 { font: 800 13px/1.4 'Manrope', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #ffe08a; margin: 26px 0 8px; }
#methodBody p, #methodBody li { font-size: 16px; line-height: 1.65; }
#methodBody > * { break-inside: avoid; }
#s-method .scroller { background: rgba(0, 0, 0, .3); border-radius: 18px; padding: 8px 14px; }
#s-method table.wf { color: var(--cream); font-size: 14px; }
#s-method table.wf th, #s-method table.wf td { border-bottom-color: rgba(240, 234, 214, .14); }
#s-method table.wf th:first-child, #s-method table.wf td:first-child { position: sticky; left: 0; background: #0d1230; }
ul#sourceList { list-style: none; padding: 0; display: grid; gap: 12px; }
ul#sourceList li { background: rgba(0, 0, 0, .3); border-radius: 14px; padding: 14px 18px; margin: 0; max-width: none; }
@media (min-width: 1000px) { ul#sourceList { grid-template-columns: repeat(2, minmax(0, 1fr)); } ul#sourceList > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (orientation: landscape) and (max-height: 520px) { #methodBody { column-count: 2; column-gap: 40px; max-width: none; } }

/* count bar */
.countbar { background: rgba(10, 11, 20, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 2px solid rgba(201, 168, 76, .5); padding: 10px var(--pad); }
.countbar-inner { max-width: 76rem; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(160px, 26%); grid-template-areas: "num sub meter" "num of meter"; gap: 0 22px; align-items: center; }
.countbar-num { grid-area: num; font: 400 clamp(2rem, 3.6vw, 2.75rem)/1 var(--display); letter-spacing: 0; text-transform: uppercase; color: var(--gold); }
.countbar-sub { grid-area: sub; font: 700 14px/1.35 'Manrope', sans-serif; color: var(--cream); margin: 0; max-width: none; }
.countbar-of { grid-area: of; font-size: 12px; margin: 2px 0 0; opacity: .8; max-width: none; }
.meter { grid-area: meter; height: 12px; margin: 0; max-width: none; background: rgba(255, 255, 255, .14); border-radius: 6px; }
.meter-fill { background: linear-gradient(90deg, var(--gold), #1c2a63); border-radius: 6px; }
@media (max-width: 699px) {
  .countbar-inner { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "num sub" "meter meter" "of of"; gap: 4px 14px; }
  .countbar-num { font-size: 2rem; }
  .countbar-sub { font-size: 12.5px; }
  .meter { height: 8px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .countbar { padding: 6px var(--pad); }
  .countbar-inner { grid-template-columns: auto minmax(0, 1fr) minmax(120px, 22%); grid-template-areas: "num sub meter" "num of meter"; gap: 0 18px; }
  .countbar-num { font-size: 1.9rem; }
  .countbar-sub { font-size: 12px; }
  .countbar-of { font-size: 11px; }
  .meter { height: 8px; }
  #s-start { gap: 28px; }
  .s-hero h1 { font-size: clamp(3rem, 12vh, 5.5rem); }
  #startTagline { font-size: 1.5rem; }
  #flow > .screen:not(#s-results) { padding-block: 26px; }
  fieldset { padding: 14px 18px 16px; }
  .radios label, .checks label { min-height: 44px; padding: 9px 12px; }
  input[type="number"], select { min-height: 44px; padding: 9px 14px; }
}
.countbar-sub, .countbar-of { text-wrap: balance; }
/* narrow phones: long race labels get one column; long area names fit the select */
@media (max-width: 479px), (min-width: 700px) and (max-width: 1099px) {
  #raceChecks[data-n] { grid-template-columns: minmax(0, 1fr); }
  #raceChecks[data-n] > * { grid-column: auto; min-height: 46px; }
}
@media (max-width: 479px) { select { font-size: 13px; padding-left: 12px; padding-right: 28px; letter-spacing: 0; } }
select { text-overflow: ellipsis; }
#rangeNote.res-sec { padding-block: 12px; }