/* Home: hero (copy + scope row + three-finding stage + note rail), popular advice next to its source,
   how each note is checked, topic tiles. Mobile first (390 px decides). Every colour pair is computed in contrast.txt. */

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 14px 0 22px;
  background:
    radial-gradient(70% 45% at 92% 30%, rgba(194, 155, 103, .13), transparent 70%),
    radial-gradient(50% 40% at 0% 100%, rgba(226, 181, 108, .05), transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
.hero__title { font: 400 30px/1.08 var(--serif); letter-spacing: -.022em; text-wrap: balance; }
.hero__accent { font-style: italic; color: var(--gold-hi); }
.hero__lede { margin-top: 8px; color: var(--ink-2); font-size: 16px; line-height: 1.45; max-width: 31em; }
.hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 14px; }
.hero__primary { flex: 1 1 100%; padding: 0 20px; font-size: 16px; gap: 10px; }
/* Mobile: the secondary sits under the gold primary, full width, so both next steps are on the first screen */
.btn--ghost.hero__secondary { display: inline-flex; flex: 1 1 100%; min-height: 48px; padding: 0 18px; font-size: 16px; gap: 8px; }

/* Scope row: the four parts of the site in one glance, each a link */
.scope { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; margin-top: 6px; }
.scope__link, .scope__link:visited {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  color: var(--ink); font: 700 15px/1 var(--sans); text-decoration: none; white-space: nowrap;
}
.scope__icon { display: grid; place-items: center; color: var(--gold-hi); transition: transform .35s var(--ease), background-color .3s, box-shadow .3s; }
.scope__icon .icon { width: 18px; height: 18px; }
.scope__long { display: none; }
.scope__link:hover, .scope__link:focus-visible { color: var(--gold-hi); }
.scope__link:hover .scope__icon, .scope__link:focus-visible .scope__icon { transform: translateY(-2px); }

/* One quiet proof line (640 px and up): who the sources are, and where the method lives */
.hproof { display: none; }
.hproof__icon { width: 18px; height: 18px; color: var(--gold-hi); }
.hproof__text { color: var(--ink-2); }
.hproof__how, .hproof__how:visited { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--gold-hi); font-weight: 700; text-decoration: none; white-space: nowrap; }
.hproof__how .icon { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.hproof__how:hover, .hproof__how:focus-visible { color: var(--ink); }
.hproof__how:hover .icon, .hproof__how:focus-visible .icon { transform: translateY(3px); }

/* ---------- Stage: one finding at a time, three findings, one pass ---------- */
.stage {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr); padding: 0 14px; border-radius: 20px;
  background:
    radial-gradient(80% 70% at 62% 18%, rgba(220, 187, 138, .14), transparent 70%),
    linear-gradient(165deg, #261c15 0%, #140f0b 100%);
  box-shadow: 0 34px 60px -34px rgba(0, 0, 0, 1), 0 0 0 1px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 240, 210, .12);
}
.stage::after {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, rgba(246, 220, 170, .8) 0%, rgba(194, 155, 103, .28) 30%, rgba(134, 112, 79, .12) 62%, rgba(246, 220, 170, .5) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.stage::before {
  content: ""; position: absolute; inset: -10% -40%; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 38%, rgba(255, 236, 200, .07) 50%, transparent 62%);
  transform: translateX(-70%);
}
.stage.is-sweep::before { animation: sheen 1.8s var(--ease) both; }

/* Progress strip: three findings, each a button; the active one fills as it plays */
.stage__bar { position: relative; z-index: 3; display: flex; align-items: center; gap: 4px; margin: 2px -4px 0; }
.stage__tabs { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; min-width: 0; }
.stage__tab {
  display: grid; align-content: center; gap: 6px; min-height: 44px; padding: 6px 4px; min-width: 0;
  color: var(--ink-2); background: none; border: 0; border-radius: 10px; text-align: left; cursor: pointer;
  font: 700 14px/1.1 var(--sans);
}
.stage__track { position: relative; display: block; height: 3px; border-radius: 2px; overflow: hidden; background: rgba(211, 198, 177, .22); }
.stage__fill { position: absolute; inset: 0; background: var(--gold-hi); transform: scaleX(var(--p, 0)); transform-origin: left; }
.stage__tab.is-done .stage__fill { --p: 1; }
.stage__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .3s; }
.stage__tab.is-active .stage__label { color: var(--gold-hi); }
.stage__tab:hover .stage__label, .stage__tab:focus-visible .stage__label { color: var(--ink); }
.stage__tab:focus-visible { outline-offset: -2px; }

/* Pause: a 30 px disc inside a 44 px target */
.stage__pause {
  position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  color: var(--ink); background: transparent; border: 0; border-radius: 50%; cursor: pointer;
}
.stage__pause::before { content: ""; position: absolute; left: 7px; top: 7px; width: 30px; height: 30px; border-radius: 50%; background: rgba(14, 11, 8, .62); box-shadow: inset 0 0 0 1px rgba(246, 220, 170, .22); transition: background-color .2s, box-shadow .2s; }
.stage__pause .icon { position: relative; grid-area: 1 / 1; width: 14px; height: 14px; }
.stage__play-icon { display: none; }
.stage.is-paused .stage__pause-icon { display: none; }
.stage.is-paused .stage__play-icon { display: block; margin-left: 2px; }
.stage__pause:hover::before, .stage__pause:focus-visible::before { background: rgba(194, 155, 103, .3); box-shadow: inset 0 0 0 1px var(--gold-hi); }
.stage__pause:focus-visible { outline-offset: -2px; }

.stage__panels { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.panel {
  grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto auto; min-width: 0; row-gap: 6px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .45s var(--ease), transform .6s var(--ease), visibility 0s linear .45s;
}
.panel.is-active { opacity: 1; visibility: visible; transform: none; z-index: 1; transition: opacity .6s var(--ease) .1s, transform .8s var(--ease) .1s, visibility 0s; }
.panel__visual { display: grid; align-items: end; min-height: 96px; }
.panel__cap { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; }
.panel__num { font: 300 48px/.9 var(--serif); letter-spacing: -.03em; color: var(--gold-hi); white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.panel__num i { font-style: italic; font-size: .42em; color: var(--ink-2); margin: 0 .14em; letter-spacing: 0; }
.panel__text { font: 400 16px/1.3 var(--serif); color: var(--ink); text-wrap: pretty; }
.panel__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--rule-soft); }
.panel__foot .go { font-size: 15px; }
.js .panel__num { transition: opacity .7s var(--ease) .2s, transform .9s var(--ease) .2s; }
.js .panel:not(.is-played) .panel__num { opacity: 0; transform: translateY(10px); }
.panel .ideas { gap: 8px; }

/* Phones: a shorter stage. One A/B test (the winner) beside "1 in 3"; the other two findings are number and words. */
@media (max-width: 639px) {
  .panel { grid-template-columns: 92px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 4px; align-items: center; }
  .panel__visual { grid-column: 1; grid-row: 1; min-height: 0; padding-top: 14px; }
  .panel__cap { grid-column: 2; grid-row: 1; grid-template-columns: minmax(0, 1fr); row-gap: 6px; padding-top: 6px; }
  .panel__foot { grid-column: 1 / -1; grid-row: 2; }
  .panel--ab .ideas__row { grid-template-columns: minmax(0, 1fr); }
  .panel--ab .idea--flat, .panel--ab .idea--worse, .panel--ab .ideas__legend { display: none; }
  .panel--ab .idea { height: 116px; }
  .panel:not(.panel--ab) .panel__visual { display: none; }
  .panel:not(.panel--ab) .panel__cap { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; padding-block: 18px 10px; }
  .panel__num { font-size: 46px; }
}

/* ---------- Note rail: four teaser cards ---------- */
.rail { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title all" "list list" "dots dots"; align-items: center; column-gap: 12px; }
.rail__title { grid-area: title; font: 500 19px/1.2 var(--serif); letter-spacing: -.01em; }
.rail__all { grid-area: all; justify-self: end; }
.rail__scroller { grid-area: list; min-width: 0; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); scrollbar-width: none; overscroll-behavior-x: contain; }
.rail__scroller::-webkit-scrollbar { display: none; }
.rail__dots { grid-area: dots; justify-self: center; display: flex; }
.rail__list { display: flex; gap: 12px; width: max-content; padding: 4px var(--gutter) 4px; }
.rail__scroller:focus-visible { outline-offset: -2px; border-radius: 16px; }
.rail__dot { position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.rail__dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 8px; margin: -4px 0 0 -11px; border-radius: 4px; background: #8f7a5c; transform: scaleX(.364); transition: transform .3s var(--ease), background-color .3s; }
.rail__dot.is-active::before { transform: none; background: var(--gold-hi); }
.rail__dot:hover::before { background: var(--gold-hi); }
.rail__dot:focus-visible { outline-offset: -6px; border-radius: 10px; }

.teaser { position: relative; flex: 0 0 82vw; max-width: 380px; scroll-snap-align: start; }
.teaser__link, .teaser__link:visited {
  position: relative; display: flex; flex-direction: column; gap: 7px;
  height: 100%; padding: 12px 16px 10px; border-radius: 16px; overflow: hidden;
  color: var(--ink); text-decoration: none;
  background: linear-gradient(165deg, #231a13 0%, #16110c 100%);
  box-shadow: inset 0 0 0 1px rgba(134, 112, 79, .55), 0 20px 40px -30px rgba(0, 0, 0, 1);
  transition: box-shadow .3s, transform .45s var(--ease);
}
.teaser__link::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(246, 220, 170, .7) 30%, rgba(246, 220, 170, .7) 70%, transparent); opacity: .7; }
.teaser__link::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--gold-hi); transform: scaleX(0); transform-origin: left; }
.teaser.is-done .teaser__link::after { transform: scaleX(1); opacity: .4; }
.teaser.is-active .teaser__link::after { transform: scaleX(var(--p, 0)); }
.teaser.is-active .teaser__link { box-shadow: inset 0 0 0 1px var(--gold-hi), 0 20px 40px -30px rgba(0, 0, 0, 1); }
.teaser__link:hover, .teaser__link:focus-visible { box-shadow: inset 0 0 0 1px var(--gold-hi), 0 26px 40px -26px rgba(0, 0, 0, 1); transform: translateY(-4px); }
.teaser__link:hover::before, .teaser__link:focus-visible::before { opacity: 1; }
.teaser__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; line-height: 1.2; }
.teaser__topic { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--gold-hi); }
.teaser__topic .icon { width: 16px; height: 16px; }
.teaser__time { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); white-space: nowrap; }
.teaser__time .icon { width: 14px; height: 14px; }
.teaser__fig { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; }
.teaser__num { display: inline-block; font: 400 30px/1 var(--serif); letter-spacing: -.02em; color: var(--gold-hi); font-variant-numeric: lining-nums; transform-origin: left bottom; transition: color .3s, transform .45s var(--ease); }
.teaser__unit { color: var(--ink-2); font: italic 400 17px/1.2 var(--serif); }
.teaser__title { font: 500 18px/1.3 var(--serif); letter-spacing: -.005em; color: var(--ink); text-wrap: pretty; }
.teaser__go { display: inline-block; vertical-align: -3px; margin-left: 8px; width: 19px; height: 19px; color: var(--gold-hi); transition: transform .3s var(--ease), color .3s; }
/* Hover: the figure brightens to light gold and lifts a touch, the arrow nudges on */
.teaser__link:hover .teaser__go, .teaser__link:focus-visible .teaser__go { transform: translateX(6px); color: var(--focus); }
.teaser__link:hover .teaser__num, .teaser__link:focus-visible .teaser__num { color: var(--focus); transform: scale(1.06); }
.teaser__src { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 7px; border-top: 1px solid var(--rule-soft); color: var(--ink-2); font-size: 14px; line-height: 1.35; font-weight: 600; }
.teaser__src .icon { width: 15px; height: 15px; color: var(--gold-hi); }
.teaser__srcname { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.teaser__count { flex: none; color: var(--ink-2); font-weight: 500; white-space: nowrap; }

/* Teasers lift in one after another, 60 ms apart (js only; reduced motion: no animation) */
@keyframes liftIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .js .teaser { animation: liftIn .7s var(--ease) both; animation-delay: .35s; }
  .js .teaser:nth-child(2) { animation-delay: .41s; }
  .js .teaser:nth-child(3) { animation-delay: .47s; }
  .js .teaser:nth-child(4) { animation-delay: .53s; }
}

/* ---------- Popular advice, next to its source: four cards, each with what the source found ---------- */
.claims { padding: 48px 0 44px; background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%); }
.claims__head { display: grid; gap: 8px; margin-bottom: 20px; }
.claims__title { font: 400 30px/1.1 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.claims__title em { color: var(--gold-hi); }
.claims__lede { color: var(--ink-2); font-size: 17px; line-height: 1.5; max-width: 36em; }
.myths { display: grid; gap: 14px; }
.myth {
  position: relative; display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 6px; border-radius: 18px; overflow: hidden;
  background: radial-gradient(90% 70% at 100% 0%, rgba(220, 187, 138, .1), transparent 70%), linear-gradient(165deg, #221912 0%, #150f0b 100%);
  box-shadow: inset 0 0 0 1px rgba(134, 112, 79, .55), 0 30px 50px -36px rgba(0, 0, 0, 1);
  transition: box-shadow .3s, transform .45s var(--ease);
}
.myth:hover { box-shadow: inset 0 0 0 1px var(--gold-hi), 0 34px 50px -30px rgba(0, 0, 0, 1); }
.myth__said { font: 400 22px/1.25 var(--serif); color: var(--ink-2); text-wrap: balance; }
.myth__stat { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; }
.myth__num { font: 300 46px/.95 var(--serif); letter-spacing: -.025em; color: var(--gold-hi); font-variant-numeric: lining-nums; white-space: nowrap; }
.myth__unit { flex: 1 1 12em; color: var(--ink); font-size: 16px; line-height: 1.35; font-weight: 600; }
.myth__found { color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.myth__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; margin-top: auto; border-top: 1px solid var(--rule-soft); }
/* The struck claim: the line draws across once the card is on screen */
.js .myth:not(.is-in) .claim__s { background-size: 0% 1.5px; }
.myth .claim__s { transition: background-size 1s var(--ease) .45s; }

/* Mini pictures inside the cards */
.mini { display: grid; gap: 8px; }
.mini__cap { color: var(--ink-2); font-size: 14px; line-height: 1.35; }
.mini__row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mini__pill { width: 38px; height: 12px; border-radius: 6px; background: #5a4a36; }
.mini__pill--odd { width: 54px; height: 16px; border-radius: 8px; background: linear-gradient(180deg, #fbe7bf, #dcbb8a); }
.mini__dot { width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #a08867; }
.mini__dot--rev { background: var(--warn); box-shadow: none; }
.mini__svg { width: 100%; height: 56px; overflow: visible; }
.mini__svg * { vector-effect: non-scaling-stroke; }
.mini__l95 { stroke: var(--gold-hi); stroke-width: 1.5; stroke-dasharray: 5 5; }
.mini__path { fill: none; stroke: var(--ink-2); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 600; stroke-dashoffset: 0; transition: stroke-dashoffset 2s var(--ease) .3s; }
.mini__stop { fill: var(--warn); stroke: #15100c; stroke-width: 2; transform-box: fill-box; transform-origin: center; transition: transform .5s var(--ease) 1.6s; }
.js .myth:not(.is-in) .mini__path { stroke-dashoffset: 600; }
.js .myth:not(.is-in) .mini__stop { transform: scale(0); }
.mini--bars { gap: 10px; }
.mini__bar { display: grid; grid-template-columns: 8.5em minmax(0, 1fr) 2.6em; align-items: center; gap: 10px; color: var(--ink-2); font-size: 14px; }
.mini__bar b { color: var(--ink); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.mini__track { position: relative; height: 10px; border-radius: 5px; background: rgba(134, 112, 79, .3); overflow: hidden; }
.mini__fill { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 5px; background: linear-gradient(90deg, #c9a26d, #f0d4a2); transform-origin: left; transition: transform 1.1s var(--ease) .35s; }
.mini__fill--low { background: var(--warn); }
.js .myth:not(.is-in) .mini__fill { transform: scaleX(0); }
.js .myth:not(.is-in) .mini__dot { opacity: 0; transform: scale(.4); }
.mini__dot { transition: opacity .4s var(--ease), transform .5s var(--ease); }
.mini__dot:nth-child(3n+1) { transition-delay: .3s; } .mini__dot:nth-child(3n+2) { transition-delay: .45s; } .mini__dot:nth-child(3n) { transition-delay: .6s; }
.mini__dot.mini__dot--rev { transition-delay: 1.1s; }
.js .myth:not(.is-in) .mini__pill--odd { transform: scale(.7); opacity: .4; }
.mini__pill--odd { transition: transform .7s var(--ease) .8s, opacity .7s var(--ease) .8s; }

/* Cards rise in turn as the section scrolls in */
.myth.reveal:nth-child(2) { transition-delay: .06s; }
.myth.reveal:nth-child(3) { transition-delay: .12s; }
.myth.reveal:nth-child(4) { transition-delay: .18s; }

/* ---------- How each note is checked: three plain statements, the four documents, and a real excerpt ---------- */
.method { padding: 48px 0 44px; background: radial-gradient(60% 60% at 85% 40%, rgba(194, 155, 103, .1), transparent 70%), var(--bg); border-top: 1px solid var(--rule-soft); }
.method__grid { display: grid; gap: 28px; }
.method__title { font: 400 30px/1.1 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.method__title em { color: var(--gold-hi); }
.method__list { display: grid; gap: 14px; margin-top: 20px; }
.method__item { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; }
.method__item p { color: var(--ink-2); font-size: 17px; line-height: 1.5; }
.method__item strong { color: var(--ink); font-weight: 700; }
.method__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--gold-hi); background: radial-gradient(circle at 30% 25%, rgba(246, 220, 170, .2), rgba(194, 155, 103, .07) 70%); }
.method__icon .icon { width: 19px; height: 19px; }
.method__label { margin-top: 26px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); color: var(--gold-hi); font: italic 500 19px/1.3 var(--serif); }
.method__docs { display: grid; }
.method__docs li { border-bottom: 1px solid var(--rule-soft); }
.method__doc, .method__doc:visited { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 8px 0; color: var(--ink-2); text-decoration: none; font-size: 15px; line-height: 1.35; }
.method__doc span { display: grid; gap: 2px; }
.method__doc b { color: var(--ink); font-size: 16px; font-weight: 700; }
.method__doc .icon { width: 18px; height: 18px; color: var(--gold-hi); transition: transform .3s var(--ease); }
.method__doc:hover, .method__doc:focus-visible { color: var(--ink); }
.method__doc:hover b, .method__doc:focus-visible b { color: var(--gold-hi); }
.method__doc:hover .icon, .method__doc:focus-visible .icon { transform: translate(3px, -3px); }
.method__sample { position: relative; padding: 20px 18px 8px; border-radius: 18px; background: linear-gradient(165deg, #241b13 0%, #15100b 100%); box-shadow: inset 0 0 0 1px rgba(134, 112, 79, .6), 0 30px 60px -30px rgba(0, 0, 0, 1); }
.method__cap { margin-bottom: 4px; color: var(--ink-2); font-size: 15px; line-height: 1.45; }
.method__cap a, .method__cap a:visited { display: inline-block; padding-block: 6px; color: var(--ink); font-family: var(--serif); font-size: 17px; text-decoration: underline; text-decoration-color: rgba(220, 187, 138, .6); text-underline-offset: 4px; }
.method__cap a:hover, .method__cap a:focus-visible { color: var(--gold-hi); }
.sources--sample { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.method__sample.reveal { transition-delay: .12s; }

/* ---------- Browse by topic: eight icon tiles ---------- */
.topics { padding: 44px 0 52px; background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); }
.topics__head { display: grid; gap: 8px; margin-bottom: 22px; }
.topics__title { font: 400 30px/1.1 var(--serif); letter-spacing: -.02em; }
.topics__lede { color: var(--ink-2); font-size: 17px; max-width: 34em; }
.topics__all, .topics__all:visited { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold-hi); text-underline-offset: 4px; }
.topics__all:hover, .topics__all:focus-visible { color: var(--gold-hi); }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tile__link, .tile__link:visited {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 16px 14px 6px; border-radius: 16px;
  color: var(--ink); text-decoration: none;
  background: radial-gradient(90% 70% at 0% 0%, rgba(220, 187, 138, .1), transparent 70%), linear-gradient(165deg, #211912 0%, #150f0b 100%);
  box-shadow: inset 0 0 0 1px rgba(134, 112, 79, .55);
  transition: transform .45s var(--ease), box-shadow .3s;
}
.tile__icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 6px; border-radius: 50%; color: var(--gold-hi); background: radial-gradient(circle at 30% 25%, rgba(246, 220, 170, .24), rgba(194, 155, 103, .08) 70%); box-shadow: inset 0 0 0 1px rgba(246, 220, 170, .16); transition: transform .45s var(--ease), color .3s, box-shadow .3s; }
.tile__icon .icon { width: 22px; height: 22px; }
.tile__name { font: 500 20px/1.15 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.tile__short { color: var(--ink-2); font-size: 14px; line-height: 1.35; }
.tile__go { display: flex; align-items: center; gap: 6px; min-height: 40px; margin-top: auto; color: var(--gold-hi); font-size: 14px; font-weight: 700; }
.tile__group { margin-right: auto; color: var(--ink-2); font-weight: 600; }
.tile__go .icon { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.tile__link:hover, .tile__link:focus-visible { transform: translateY(-4px); box-shadow: inset 0 0 0 1.5px var(--gold-hi), 0 26px 40px -26px rgba(0, 0, 0, 1); }
.tile__link:hover .tile__icon, .tile__link:focus-visible .tile__icon { transform: rotate(-8deg) scale(1.08); color: var(--focus); box-shadow: inset 0 0 0 1px rgba(246, 220, 170, .5); }
.tile__link:hover .tile__go .icon, .tile__link:focus-visible .tile__go .icon { transform: translateX(4px); }
.tile:nth-child(2).reveal { transition-delay: .06s; } .tile:nth-child(3).reveal { transition-delay: .12s; } .tile:nth-child(4).reveal { transition-delay: .18s; }
.tile:nth-child(5).reveal { transition-delay: .24s; } .tile:nth-child(6).reveal { transition-delay: .3s; } .tile:nth-child(7).reveal { transition-delay: .36s; } .tile:nth-child(8).reveal { transition-delay: .42s; }

/* ---------- >= 640 ---------- */
@media (min-width: 640px) {
  .hero { padding-top: 36px; }
  .hero__title { font-size: 44px; }
  .hero__lede { font-size: 18px; }
  .hero__primary { flex: 0 0 auto; }
  .btn--ghost.hero__secondary { flex: 0 0 auto; }
  .scope { gap: 4px 22px; margin-top: 14px; }
  .scope__link { gap: 9px; min-height: 44px; font-size: 16px; }
  .scope__icon { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, rgba(246, 220, 170, .22), rgba(194, 155, 103, .08) 70%); box-shadow: inset 0 0 0 1px rgba(246, 220, 170, .18); }
  .scope__long { display: inline; }
  .scope__short { display: none; }
  .scope__link:hover .scope__icon, .scope__link:focus-visible .scope__icon { box-shadow: inset 0 0 0 1px var(--gold-hi); }
  .hproof { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin-top: 10px; font-size: 15px; line-height: 1.4; }
  .teaser { flex-basis: 44vw; }
  .stage { padding: 0 22px; }
  .stage__bar { margin-top: 8px; }
  .stage__tab { font-size: 14px; }
  .panel__visual { min-height: 160px; }
  .panel__num { font-size: 72px; }
  .panel__text { font-size: 19px; }
  .panel .idea { height: 168px; }
  .claims__title, .topics__title { font-size: 38px; }
  .myths { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
}

/* ---------- >= 1024: split hero, stage right (about 15% wider than half), rail as four cards ---------- */
@media (min-width: 1024px) {
  .hero { padding: 22px 0 32px; }
  .hero__grid { grid-template-columns: minmax(0, 1.04fr) minmax(0, 1.06fr); column-gap: 48px; row-gap: 26px; align-items: center; }
  .hero__copy { container-type: inline-size; }
  .hero__title { font-size: clamp(28px, 7.2cqi, 42px); line-height: 1.06; }
  .hero__lede { margin-top: 14px; font-size: 18px; }
  .hero__actions { margin-top: 22px; gap: 12px 10px; }
  .hero__primary { min-height: 56px; padding: 0 22px; font-size: 17px; gap: 9px; }
  .btn--ghost.hero__secondary { min-height: 56px; padding: 0 18px; gap: 8px; }
  .hproof { margin-top: 14px; }

  .stage { padding: 0 28px 2px; border-radius: 24px; }
  .stage__bar { margin: 10px -4px 2px; }
  .stage__tab { font-size: 14px; }
  .panel { row-gap: 12px; }
  .panel__visual { min-height: 0; }
  .panel .ideas { gap: 12px; }
  .panel .ideas__row { gap: 18px; }
  .panel .idea { height: 224px; }
  .panel .idea__bar--a, .panel .idea--flat .idea__bar--b { height: 58px; }
  .panel .idea--worse .idea__bar--b { height: 30px; }
  .panel .idea--won .idea__bar--b { height: 128px; }
  .panel__num { font-size: 110px; }
  .panel__text { font-size: 21px; line-height: 1.3; max-width: 13em; }
  .panel__cap { column-gap: 24px; }
  .panel__foot .go { font-size: 16px; }

  .rail { grid-column: 1 / -1; grid-template-areas: "title all" "list list"; row-gap: 4px; }
  .rail__title { font-size: 22px; }
  .rail__dots { display: none; }
  .rail__scroller { overflow: visible; margin: 0; }
  .rail__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; width: auto; padding: 0; }
  .teaser { max-width: none; }
  .teaser__link, .teaser__link:visited { padding: 14px 20px 10px; gap: 8px; }
  .teaser.is-active .teaser__link { background: linear-gradient(165deg, #2b2016 0%, #17120d 100%); }
  .teaser__num { font-size: 32px; }
  .teaser__unit { font-size: 16px; }

  .claims { padding: 88px 0 80px; }
  .claims__head { grid-template-columns: minmax(0, 1fr) minmax(0, 430px); align-items: end; gap: 48px; margin-bottom: 32px; }
  .claims__title, .topics__title { font-size: 44px; }
  .claims__lede, .topics__lede { font-size: 18px; }
  .myths { gap: 22px; }
  .myth { padding: 26px 28px 8px; gap: 14px; border-radius: 22px; }
  .myth__said { font-size: 27px; }
  .myth__num { font-size: 60px; }
  .myth__unit { font-size: 17px; }
  .myth__found { font-size: 17px; }

  .topics { padding: 80px 0 88px; }
  .topics__head { grid-template-columns: minmax(0, 1fr) minmax(0, 430px); align-items: end; gap: 48px; margin-bottom: 34px; }
  .tiles { gap: 18px; }
  .tile__link, .tile__link:visited { padding: 22px 22px 8px; gap: 8px; border-radius: 20px; }
  .tile__icon { width: 56px; height: 56px; }
  .tile__icon .icon { width: 26px; height: 26px; }
  .tile__name { font-size: 24px; }
  .tile__short { font-size: 15px; }
}
@media (min-width: 1024px) {
  .method { padding: 80px 0 76px; }
  .method__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 540px); column-gap: 72px; align-items: start; }
  .method__title { font-size: 44px; }
  .method__sample { padding: 28px 30px 12px; border-radius: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .stage.is-sweep::before { animation: none; }
  .panel, .panel.is-active { transform: none; transition: none; }
  .teaser__link:hover, .teaser__link:focus-visible, .tile__link:hover, .tile__link:focus-visible { transform: none; }
  .teaser__link:hover .teaser__num, .teaser__link:focus-visible .teaser__num, .tile__link:hover .tile__icon, .tile__link:focus-visible .tile__icon { transform: none; }
  .js .panel:not(.is-played) .panel__num { opacity: 1; transform: none; }
  .js .myth:not(.is-in) .claim__s { background-size: 100% 1.5px; }
  .js .myth:not(.is-in) .mini__path { stroke-dashoffset: 0; }
  .js .myth:not(.is-in) .mini__stop, .js .myth:not(.is-in) .mini__fill, .js .myth:not(.is-in) .mini__dot, .js .myth:not(.is-in) .mini__pill--odd { transform: none; opacity: 1; }
}

/* ---------- Who it is for, said in the hero ---------- */
.hero__for { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--gold-hi); font: 700 14px/1.3 var(--sans); letter-spacing: .02em; }
.hero__for .icon { width: 17px; height: 17px; }
@media (min-width: 1024px) { .hero__for { font-size: 15px; margin-bottom: 10px; } }

/* Rail: a "1 / 4" position count next to the title (phones and tablets), and the date the sources were checked */
.rail { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "title count all" "list list list" "dots dots dots"; }
.rail__count { grid-area: count; color: var(--ink-2); font: 600 14px/1 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.teaser__src .cite__type { flex: none; }
.teaser__checked { display: flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 14px; line-height: 1.3; }
.teaser__checked .icon { width: 15px; height: 15px; color: var(--gold-hi); }

/* Phones: notes first. One gold button plus a text link, no scope row (the menu carries it); the rail sits right
   under the buttons with the next card peeking, and the finding stage follows. */
@media (max-width: 639px) {
  .scope { display: none; }
  .hero__actions { gap: 2px 12px; margin-top: 12px; }
  .btn--ghost.hero__secondary, .btn--ghost.hero__secondary:visited { flex: 0 0 auto; min-height: 44px; padding: 0 2px; border-color: transparent; background: none; color: var(--gold-hi); font-size: 16px; font-weight: 700; }
  .btn--ghost.hero__secondary:hover, .btn--ghost.hero__secondary:focus-visible { border-color: transparent; background: none; color: var(--ink); transform: none; }
  .teaser { flex-basis: 78vw; }
}
@media (max-width: 1023px) {
  .hero__copy { order: 0; }
  .rail { order: 1; }
  .stage { order: 2; margin-top: 6px; }
}
@media (min-width: 1024px) {
  .rail { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title all" "list list"; }
  .rail__count { display: none; }
}

/* Home method section: the button to the full method page */
.method__more { margin-top: 22px; }
/* Teaser source line: the type label first; the source name wraps under it rather than being cut */
.teaser { min-width: 0; }
.teaser__src { flex-wrap: wrap; row-gap: 2px; }
.teaser__srcname { white-space: normal; overflow: visible; }
@media (min-width: 1024px) {
  .panel__foot .cite--link { flex-direction: row; align-items: center; gap: 0 12px; padding-top: 0; }
  .hero__for { margin-bottom: 6px; }
}
@media (min-width: 1024px) { .hero__grid { row-gap: 18px; } }
.method__cap a, .method__cap a:visited { padding-block: 10px; }
.topics__all, .topics__all:visited { padding-block: 11px; }

/* ---------- iter7 ---------- */
/* Compact readout in the hero (below 1024 px): the three tests and "1 in 3", above the gold button.
   The full finding stage is a desktop piece; on phones and tablets this panel takes its place on the first screen. */
.hreadout { display: none; }
@media (max-width: 1023px) {
  .stage { display: none; }
  .hreadout {
    position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 12px;
    margin-top: 14px; padding: 12px 12px 12px 10px; border-radius: 16px;
    background:
      radial-gradient(80% 90% at 20% 10%, rgba(220, 187, 138, .14), transparent 70%),
      linear-gradient(165deg, #261c15 0%, #140f0b 100%);
    box-shadow: inset 0 0 0 1px rgba(194, 155, 103, .55), 0 24px 40px -30px rgba(0, 0, 0, 1);
  }
  .hreadout__visual { min-width: 0; }
  .hreadout__cap { display: grid; gap: 4px; min-width: 0; }
  .hreadout__num { font: 300 46px/.9 var(--serif); letter-spacing: -.03em; color: var(--gold-hi); white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
  .hreadout__num i { font-style: italic; font-size: .42em; color: var(--ink-2); margin: 0 .14em; letter-spacing: 0; }
  .hreadout__text { font: 400 15px/1.3 var(--serif); color: var(--ink); text-wrap: pretty; }
  .hreadout__src { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; color: var(--ink-2); font-size: 14px; line-height: 1.35; }
  .hreadout__src .cite__type { font-size: 14px; letter-spacing: .03em; }
  .hreadout__src .cite__type .icon { display: none; }
  .hero__actions { margin-top: 14px; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .hreadout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 16px 20px 16px 16px; gap: 24px; }
  .hreadout .ideas--compact .idea { height: 140px; }
  .hreadout__num { font-size: 64px; }
  .hreadout__text { font-size: 18px; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .hreadout { animation: liftIn .7s var(--ease) .15s both; }
}
/* Phones: the "Browse all notes" button gives way to the rail's own "All notes" link, right below */
@media (max-width: 639px) {
  .btn--ghost.hero__secondary { display: none; }
  .hero__actions { margin-top: 12px; }
}

/* Rail: one thin gold progress track instead of the four square dots (phones and tablets) */
.rail { grid-template-areas: "title count all" "list list list" "track track track"; }
.rail__progress { grid-area: track; justify-self: center; position: relative; width: 112px; height: 3px; margin: 12px 0 4px; border-radius: 2px; background: #4a3b2a; overflow: hidden; }
.rail__progress-fill { position: absolute; inset: 0; border-radius: inherit; background: var(--gold-hi); transform: scaleX(var(--rp, .25)); transform-origin: left; transition: transform .45s var(--ease); }
@media (min-width: 1024px) {
  .rail { grid-template-areas: "title all" "list list"; }
  .rail__progress { display: none; }
}

/* Teaser: two meta lines only. Line 1: topic and time. Line 2: source type and source, in one line. */
.teaser__src { flex-wrap: wrap; column-gap: 6px; row-gap: 0; }
.teaser__src .cite__type { letter-spacing: .03em; }
.cite__dot { color: var(--gold-hi); font-weight: 700; }
.teaser__srcname { white-space: nowrap; }
/* One line for type and source: the type keeps its label, drops its icon here, and the name sits beside it */
.teaser__src .cite__type .icon { display: none; }
.teaser__srcname { font-weight: 500; }
@media (max-width: 639px) { .teaser { flex-basis: 86vw; } }
.teaser__link { container-type: inline-size; }
@container (max-width: 300px) {
  .teaser__src .cite__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .teaser__src .cite__type .icon { display: block; }
  .teaser__src .cite__dot { display: none; }
}