/* ===========================================================
   The Radiance Report · editorial design system
   Palette: ivory #FBF7F1 / espresso #241C13 / apricot-gold #C08040
   =========================================================== */

:root {
  --ivory: #FBF7F1;
  --ivory-deep: #F6EFE5;
  --blush: #F3E5DA;
  --tan: #EADDCE;
  --ink: #241C13;
  --ink-70: rgba(36, 28, 19, .72);
  --ink-50: rgba(36, 28, 19, .54);
  --ink-30: rgba(36, 28, 19, .30);
  --rule: rgba(36, 28, 19, .14);
  --rule-soft: rgba(36, 28, 19, .08);
  --gold: #C08040;
  --gold-deep: #A2682F;
  --gold-wash: rgba(192, 128, 64, .10);

  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --page: 1200px;
  --narrow: 720px;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);

  --s1: .5rem;  --s2: .875rem; --s3: 1.25rem; --s4: 2rem;
  --s5: 3rem;   --s6: 3.9rem;  --s7: 5.5rem;  --s8: 8rem;
}

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

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

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.72;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

/* ---------- Type ---------- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
  letter-spacing: -0.012em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 5.4vw, 4.1rem); }
h2 { font-size: clamp(1.85rem, 3.4vw, 2.85rem); }
h3 { font-size: clamp(1.28rem, 1.9vw, 1.6rem); line-height: 1.18; }
h4 { font-size: 1.08rem; line-height: 1.3; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.kicker {
  font-family: var(--sans);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 var(--s3);
  display: block;
}
.kicker--ink { color: var(--ink-50); }

.lede {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.5;
  font-weight: 300;
  color: var(--ink-70);
  font-style: italic;
}

.dropcap::first-letter {
  font-family: var(--serif);
  font-size: 3.55em;
  font-weight: 500;
  line-height: .82;
  float: left;
  padding: .06em .12em 0 0;
  color: var(--gold-deep);
}

.byline {
  font-size: .75rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-50);
  font-weight: 500;
}

.serif-note { font-family: var(--serif); font-style: italic; color: var(--ink-70); }

/* ---------- Layout ---------- */
.wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: var(--narrow); }
section { position: relative; }
.section { padding: var(--s7) 0; }
.section--tight { padding: var(--s6) 0; }
.section--after-hero { padding-top: var(--s4); }
.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.rule--gold { border-top: 1px solid var(--gold); opacity: .5; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s5);
  flex-wrap: wrap;
}
.section-head p { margin: 0; }
.section-head .kicker { margin: 0; }

/* ---------- Logo ---------- */
.sunburst { display: block; color: var(--gold); }
.mark-link { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.wordmark {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: .19em;
  text-transform: uppercase;
  font-size: .92rem;
  white-space: nowrap;
  line-height: 1;
}
.wordmark small {
  display: block;
  font-size: .5em;
  letter-spacing: .3em;
  color: var(--gold-deep);
  margin-bottom: .28em;
}

/* ---------- Header ---------- */
.topbar {
  background: var(--ink);
  color: var(--ivory);
  font-size: .625rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: .58rem 0;
}
.topbar .wrap { display: flex; justify-content: space-between; gap: 1rem; }
.topbar span:last-child { color: rgba(251, 247, 241, .6); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--ivory);
  border-bottom: 1px solid var(--rule);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: 68px;
}
.nav { display: flex; align-items: center; gap: clamp(.9rem, 1.9vw, 1.9rem); }
.nav a {
  text-decoration: none;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-70);
  padding: .35rem 0;
  border-bottom: 1px solid transparent;
  transition: color .25s ease, border-color .25s ease;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--gold); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--gold); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--rule);
  color: var(--ink);
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .55rem .9rem;
  cursor: pointer;
}

/* ---------- Masthead hero (home) ---------- */
.masthead { text-align: center; padding: clamp(1.1rem, 2.1vw, 1.65rem) 0 clamp(.65rem, 1.2vw, 1rem); }
.masthead .sunburst { margin: 0 auto clamp(.5rem, 1vw, .8rem); width: clamp(68px, 6.8vw, 88px); height: auto; }
.masthead-title {
  font-family: var(--serif);
  font-weight: 400;
  text-transform: uppercase;
  line-height: .95;
  margin: 0;
  letter-spacing: .04em;
}
.masthead-title .the {
  display: block;
  font-size: clamp(.8rem, 1.6vw, 1.05rem);
  letter-spacing: .5em;
  margin-bottom: .55em;
  padding-left: .5em;
}
.masthead-title .big {
  display: block;
  font-size: clamp(2.05rem, 8.2vw, 6rem);
  letter-spacing: .045em;
}
.masthead-tagline {
  max-width: 34ch;
  margin: clamp(.7rem, 1.35vw, 1rem) auto 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.02rem, 1.55vw, 1.32rem);
  line-height: 1.5;
  color: var(--ink-70);
}
.masthead-meta {
  margin-top: clamp(.65rem, 1.2vw, .95rem);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .9rem;
  font-size: .64rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-70);
  flex-wrap: wrap;
}
.masthead-meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--gold); display: inline-block; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { padding: clamp(2.75rem, 6vw, 4.75rem) 0 0; }
.page-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
.page-hero__figure { margin: 0; overflow: hidden; background: var(--tan); }
.page-hero__figure img { width: 100%; height: clamp(240px, 38vw, 420px); object-fit: cover; }
.page-hero h1 { margin-bottom: var(--s3); }
.page-hero__num {
  font-family: var(--serif);
  font-size: .8rem;
  letter-spacing: .2em;
  color: var(--gold-deep);
  display: block;
  margin-bottom: var(--s2);
}

/* ---------- Feature grid ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
}
.feature {
  padding: var(--s4) clamp(1.1rem, 2.2vw, 2rem) var(--s4) 0;
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.feature:last-child { border-right: 0; padding-right: 0; }
.feature + .feature { padding-left: clamp(1.1rem, 2.2vw, 2rem); }
.feature__num {
  font-family: var(--serif);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--gold);
  opacity: .55;
}
.feature h3 a { text-decoration: none; }
.feature h3 a:hover { color: var(--gold-deep); }
.feature p { font-size: .955rem; color: var(--ink-70); }

/* ---------- Lead story ---------- */
.lead-story {
  display: grid;
  grid-template-columns: .86fr 1.14fr;
  gap: clamp(1.75rem, 4vw, 3.75rem);
  align-items: center;
}
.lead-story__figure { margin: 0; position: relative; background: var(--tan); }
.lead-story__figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.lead-story__body h2 { margin-bottom: var(--s3); }

figcaption {
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-50);
  padding-top: .7rem;
}

/* ---------- Cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
}
@media (max-width: 900px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .card-grid { grid-template-columns: 1fr; } }
.card {
  background: #fff;
  border: 1px solid var(--rule);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  transition: border-color .3s ease, transform .3s ease;
}
.card:hover { border-color: var(--gold); transform: translateY(-3px); }
.card--tint { background: var(--ivory-deep); }
.card--blush { background: var(--blush); }
.card h3 { font-size: 1.22rem; }
.card p { font-size: .93rem; color: var(--ink-70); }

.card__initial {
  font-family: var(--serif);
  font-size: 1.02rem;
  letter-spacing: .04em;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold-deep);
  flex: none;
}
.card__spec {
  font-size: .63rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 500;
}
.card__why {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  border-left: 1px solid var(--gold);
  padding-left: .95rem;
}
.card__foot {
  margin-top: auto;
  padding-top: var(--s2);
  border-top: 1px solid var(--rule-soft);
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1rem;
  font-size: .72rem;
  letter-spacing: .08em;
}
.card__foot a { color: var(--gold-deep); text-decoration: none; border-bottom: 1px solid var(--gold-wash); }
.card__foot a:hover { border-bottom-color: var(--gold); }
.card__foot span { color: var(--ink-50); }

/* ---------- Treatment entries ---------- */
.entry {
  display: grid;
  grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr) minmax(0, 19rem);
  gap: clamp(1.25rem, 2.6vw, 2.4rem);
  padding: var(--s5) 0;
  border-top: 1px solid var(--rule);
  align-items: start;
}
.entry:first-of-type { border-top: 1px solid var(--ink); }
.entry__index { font-family: var(--serif); font-size: .78rem; letter-spacing: .2em; color: var(--gold-deep); text-transform: uppercase; }
.entry h3 { margin-bottom: var(--s2); }
.entry__body p { font-size: 1rem; }
.entry__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: var(--s3); }
.tag {
  font-size: .64rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  border: 1px solid var(--rule);
  padding: .3rem .6rem;
  color: var(--ink-70);
  background: var(--ivory-deep);
}
.aside-box {
  background: var(--blush);
  padding: clamp(1.1rem, 2vw, 1.5rem);
  border-top: 2px solid var(--gold);
}
.aside-box .kicker { margin-bottom: .6rem; }
.aside-box p { font-family: var(--serif); font-size: .98rem; line-height: 1.55; color: var(--ink); margin: 0; }
.aside-box p + p { margin-top: .7em; }

/* ---------- Definition / glossary ---------- */
.glossary { border-top: 1px solid var(--rule); margin: 0; }
.glossary div {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: clamp(.75rem, 2vw, 2rem);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--rule-soft);
}
.glossary dt { font-family: var(--serif); font-size: 1.06rem; }
.glossary dd { margin: 0; font-size: .95rem; color: var(--ink-70); }

/* ---------- Checklist ---------- */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.checklist li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: .85rem;
  align-items: start;
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--rule-soft);
  font-size: .97rem;
}
.checklist li strong { font-family: var(--serif); font-weight: 500; display: block; font-size: 1.05rem; }
.checklist svg { color: var(--gold); margin-top: .3rem; }

/* ---------- Pull quote ---------- */
.pullquote {
  margin: 0;
  padding: var(--s5) 0;
  text-align: center;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.pullquote p {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 3vw, 2.15rem);
  font-weight: 300;
  line-height: 1.28;
  font-style: italic;
  max-width: 26ch;
  margin: 0 auto .9rem;
}
.pullquote cite { font-style: normal; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-50); }

/* ---------- Band ---------- */
.band { background: var(--ink); color: var(--ivory); padding: var(--s6) 0; }
.band .kicker { color: #E2B487; }
.band h2 { color: var(--ivory); }
.band p { color: rgba(251, 247, 241, .74); }
.band__grid { display: grid; grid-template-columns: 1fr minmax(0, 22rem); gap: clamp(1.75rem, 4vw, 4rem); align-items: end; }

.signup { display: flex; gap: .5rem; flex-wrap: wrap; }
.signup input {
  flex: 1 1 12rem;
  min-width: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(251, 247, 241, .38);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: .95rem;
  padding: .65rem .1rem;
}
.signup input::placeholder { color: rgba(251, 247, 241, .45); }
.signup input:focus { outline: none; border-bottom-color: var(--gold); }
.signup button {
  background: var(--gold);
  color: #1B140C;
  border: 0;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .8rem 1.4rem;
  cursor: pointer;
  transition: background .25s ease;
}
.signup button:hover { background: #D89A5E; }
.signup__note { font-size: .68rem; letter-spacing: .1em; color: rgba(251, 247, 241, .5); margin-top: .8rem; text-transform: uppercase; }
.signup__ok { font-family: var(--serif); font-style: italic; color: #E2B487; margin-top: .8rem; font-size: .95rem; }

/* ---------- Edit list (This Week's Edit) ---------- */
.edit-list { list-style: none; margin: 0; padding: 0; }
.edit-list li {
  display: grid;
  grid-template-columns: minmax(0, 5.5rem) minmax(0, 1fr) auto;
  gap: clamp(.85rem, 2vw, 2rem);
  align-items: baseline;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--rule);
}
.edit-list li:first-child { border-top: 1px solid var(--ink); }
.edit-list .edit-cat { font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); }
.edit-list h3 { font-size: 1.15rem; margin-bottom: .35rem; }
.edit-list p { font-size: .92rem; color: var(--ink-70); margin: 0; }
.edit-list .edit-tag { font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-50); white-space: nowrap; }

/* ---------- Journal entries ---------- */
.note {
  border-top: 1px solid var(--rule);
  padding: var(--s5) 0;
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 3rem);
}
.note:first-of-type { border-top: 1px solid var(--ink); }
.note__meta { font-size: .68rem; letter-spacing: .17em; text-transform: uppercase; color: var(--ink-50); line-height: 1.8; }
.note__meta strong { color: var(--gold-deep); display: block; font-weight: 500; }
.note h3 { margin-bottom: var(--s3); font-size: clamp(1.35rem, 2.4vw, 1.9rem); }
.note__body p { font-size: 1.03rem; }
.note__sig { font-family: var(--serif); font-style: italic; color: var(--gold-deep); margin-top: 1.2rem; display: block; }

/* ---------- Callout / prose ---------- */
.prose h3 { margin: var(--s5) 0 var(--s2); }
.prose p { color: var(--ink-70); }
.prose strong { color: var(--ink); font-weight: 500; }
.prose a { color: var(--gold-deep); text-decoration: none; border-bottom: 1px solid var(--gold-wash); }
.prose a:hover { border-bottom-color: var(--gold); }

.inline-link { color: var(--gold-deep); text-decoration: none; border-bottom: 1px solid rgba(192,128,64,.35); }
.inline-link:hover { border-bottom-color: var(--gold-deep); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--ink);
  padding: .85rem 1.5rem;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover { background: var(--ink); color: var(--ivory); }
.btn--gold { border-color: var(--gold); color: var(--gold-deep); }
.btn--gold:hover { background: var(--gold); color: #1B140C; border-color: var(--gold); }

.figure-strip { margin: var(--s5) 0 0; }
.figure-strip img { width: 100%; height: clamp(200px, 30vw, 340px); object-fit: cover; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--ink); padding: var(--s6) 0 var(--s4); margin-top: var(--s7); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr)); gap: clamp(1.75rem, 4vw, 3.5rem); }
.footer-grid h4 { font-size: .68rem; font-family: var(--sans); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-50); margin-bottom: var(--s2); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.footer-grid a { text-decoration: none; font-size: .92rem; color: var(--ink-70); }
.footer-grid a:hover { color: var(--gold-deep); }
.footer-brand p { font-size: .92rem; color: var(--ink-70); max-width: 34ch; margin-top: var(--s3); }
.footer-base {
  margin-top: var(--s5);
  padding-top: var(--s3);
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.footer-base em { font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: .02em; font-size: 1.15em; color: var(--gold-deep); }

/* ---------- Motion ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); }
.reveal.in { opacity: 1; transform: none; }

:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .lead-story, .page-hero__grid, .band__grid { grid-template-columns: 1fr; }
  .band__grid { align-items: start; }
  .page-hero__figure { order: -1; }
  .lead-story__figure img { aspect-ratio: 16 / 10; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature { border-right: 0; border-bottom: 1px solid var(--rule); padding: var(--s4) 0; }
  .feature + .feature { padding-left: 0; }
  .feature:last-child { border-bottom: 0; }
  .entry { grid-template-columns: 1fr; gap: var(--s3); }
  .note { grid-template-columns: 1fr; gap: var(--s3); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 780px) {
  body { font-size: 1rem; }
  .section { padding: var(--s6) 0; }
  .glossary div { grid-template-columns: 1fr; gap: .3rem; }
  .edit-list li { grid-template-columns: 1fr; gap: .45rem; }
  .edit-list .edit-tag { color: var(--ink-30); }
  .checklist li { grid-template-columns: 1.2rem 1fr; gap: .6rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .pullquote p { max-width: none; }
  .site-header .wrap { min-height: 60px; }
}

@media (max-width: 560px) {
  .topbar { letter-spacing: .16em; }
  .topbar span:last-child { display: none; }
  .topbar .wrap { justify-content: center; }
}

@media (max-width: 400px) {
  .wordmark { font-size: .78rem; letter-spacing: .14em; }
}

/* ===========================================================
   Radiance Radar · the instrument
   =========================================================== */

:root {
  --pink: #E7B8A5;
  --pink-soft: #F0D2C4;
  --pink-wash: rgba(231, 184, 165, .22);
  --dial: #FDFAF5;
}

/* ---------- Nav tag ---------- */
.nav a .nav-new {
  display: inline-block;
  font-size: .5rem;
  letter-spacing: .16em;
  color: var(--gold-deep);
  vertical-align: .35em;
  margin-left: .3em;
}
.nav a .nav-dot {
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold);
  vertical-align: .35em;
  margin-left: .38em;
}

/* ---------- Radar hero ---------- */
.radar-hero { padding: clamp(2.75rem, 6vw, 4.5rem) 0 0; text-align: center; }
.radar-hero h1 { margin-bottom: var(--s3); }
.radar-hero .lede { max-width: 46ch; margin: 0 auto; }
.radar-hero__scope {
  margin-top: var(--s4);
  font-size: .64rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-50);
  display: flex; justify-content: center; align-items: center; gap: .9rem; flex-wrap: wrap;
}
.radar-hero__scope i { width: 3px; height: 3px; border-radius: 50%; background: var(--gold); display: inline-block; }

/* ---------- Controls ---------- */
.console {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  padding: var(--s4) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  align-items: end;
}
.field { display: block; min-width: 0; }
.field > .kicker { margin-bottom: .55rem; }
.field input, .field select {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink-30);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.9vw, 1.45rem);
  line-height: 1.3;
  padding: .45rem 0;
  border-radius: 0;
  -webkit-appearance: none; appearance: none;
  background-image: none;
  transition: border-color .25s ease;
}
.field select {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7' fill='none' stroke='%23C08040' stroke-width='1.2'%3E%3Cpath d='M1 1l4.5 4.5L10 1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .2rem center;
  padding-right: 1.6rem;
}
.field input::placeholder { color: var(--ink-30); font-style: italic; }
.field input:focus, .field select:focus { outline: none; border-bottom-color: var(--gold); }
.scan-btn {
  background: var(--ink);
  color: var(--ivory);
  border: 1px solid var(--ink);
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  padding: 1rem 2.1rem;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
  white-space: nowrap;
}
.scan-btn:hover { background: var(--gold); border-color: var(--gold); color: #1B140C; }
.scan-btn[disabled] { opacity: .5; cursor: progress; }
.console__hint { font-size: .7rem; letter-spacing: .1em; color: var(--ink-50); margin-top: .6rem; }

/* ---------- The dial ---------- */
.instrument {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: center;
  padding: var(--s6) 0 var(--s5);
}
.dial-frame { position: relative; margin: 0 auto; width: 100%; max-width: 420px; padding-bottom: 2.4rem; }
.dial-frame svg { width: 100%; height: auto; display: block; }
.dial-ring { fill: none; stroke: rgba(36,28,19,.13); stroke-width: .6; }
.dial-cross { stroke: rgba(36,28,19,.12); stroke-width: .6; }
.dial-tick { stroke: var(--gold); stroke-width: .7; opacity: .75; }
.dial-tick--minor { stroke: rgba(192,128,64,.45); stroke-width: .5; }
.dial-label {
  font-family: var(--sans);
  font-size: 3.4px;
  letter-spacing: .22em;
  fill: var(--ink-50);
  text-transform: uppercase;
}
/* The sweep beam: apex pinned to the dial centre (view-box units), never the wedge's own box. */
.dial-beam { opacity: 0; transform-box: view-box; transform-origin: 50px 50px; will-change: transform; }
.dial-beam.sweeping { opacity: 1; animation: dial-sweep 2.8s linear 1 both; }
@keyframes dial-sweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.blip { opacity: 0; }
.blip.on { animation: blip-in .9s ease forwards; }
@keyframes blip-in { 0% { opacity: 0; } 22% { opacity: 1; } 100% { opacity: .92; } }
.blip__pulse { transform-box: fill-box; transform-origin: 50% 50%; }
.blip.on .blip__pulse { animation: blip-pulse 2.1s ease-out .05s infinite; }
@keyframes blip-pulse {
  0% { transform: scale(.4); opacity: .6; }
  70% { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

.dial-readout {
  position: absolute;
  left: 50%; bottom: .2rem;
  transform: translate(-50%, 0);
  font-size: .64rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-50);
  white-space: nowrap;
}
.instrument__notes .kicker { margin-bottom: var(--s2); }
.instrument__notes h2 { margin-bottom: var(--s3); font-size: clamp(1.5rem, 2.6vw, 2.05rem); }
.instrument__notes p { font-size: .97rem; color: var(--ink-70); }
.readout-list { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: .35rem; }
.readout-list li {
  display: flex; justify-content: space-between; gap: 1rem;
  border-bottom: 1px solid var(--rule-soft);
  padding: .5rem 0;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.readout-list b { font-weight: 500; color: var(--ink); font-family: var(--serif); letter-spacing: .04em; text-transform: none; font-size: .92rem; }

/* ---------- Status / empty ---------- */
.radar-status { padding: var(--s5) 0; text-align: center; border-top: 1px solid var(--rule); }
.radar-status h3 { margin-bottom: var(--s2); }
.radar-status p { font-size: .97rem; color: var(--ink-70); max-width: 44ch; margin: 0 auto; }
.radar-status--empty { background: var(--blush); padding: var(--s5) var(--s3); border-top: 2px solid var(--gold); }

/* ---------- Result cards ---------- */
.results-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; padding-bottom: var(--s3); border-bottom: 1px solid var(--ink); margin-bottom: var(--s4); }
.results-head .kicker { margin: 0; }
.chip {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  border: 1px solid var(--gold);
  color: var(--gold-deep);
  padding: .32rem .7rem;
  background: var(--gold-wash);
}
.result-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1rem, 2vw, 1.4rem); }
.result {
  background: #fff;
  border: 1px solid var(--rule);
  padding: clamp(1.3rem, 2.4vw, 2.1rem);
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr) minmax(0, 15rem);
  gap: clamp(1rem, 2.4vw, 2.2rem);
  align-items: start;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s ease, transform .6s ease, border-color .3s ease;
}
.result.in { opacity: 1; transform: none; }
.result:hover { border-color: var(--gold); }
.result--top { background: var(--ivory-deep); border-color: var(--ink-30); }
.result__rank { font-family: var(--serif); font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1; color: var(--gold); opacity: .6; }
.result__name { font-size: clamp(1.2rem, 2vw, 1.5rem); margin-bottom: .35rem; }
.result__where { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-50); margin-bottom: var(--s2); }
.result__who { font-size: .9rem; color: var(--ink-70); margin-bottom: var(--s2); }
.result__distinction {
  font-family: var(--serif); font-style: italic; font-size: .98rem; line-height: 1.55;
  border-left: 1px solid var(--gold); padding-left: .95rem; color: var(--ink); margin: var(--s2) 0;
}
.result__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: var(--s2); }
.result__tags .tag { background: #fff; }
.result--top .result__tags .tag { background: var(--ivory); }
.badges { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: var(--s2); }
.badge {
  font-size: .6rem; letter-spacing: .13em; text-transform: uppercase;
  padding: .3rem .55rem; border: 1px solid var(--rule); color: var(--ink-50); background: transparent;
}
.badge--strong { border-color: var(--gold); color: var(--gold-deep); }
.badge--matched { background: var(--ink); border-color: var(--ink); color: var(--ivory); }
.result__foot {
  margin-top: var(--s3); padding-top: var(--s2);
  border-top: 1px solid var(--rule-soft);
  display: flex; flex-wrap: wrap; gap: .4rem 1.2rem;
  font-size: .72rem; letter-spacing: .08em; align-items: baseline;
}
.result__foot a { color: var(--gold-deep); text-decoration: none; border-bottom: 1px solid var(--gold-wash); }
.result__foot a:hover { border-bottom-color: var(--gold); }
.result__foot span { color: var(--ink-50); }

/* Score panel */
.score { text-align: center; }
.score__dial { position: relative; width: 128px; margin: 0 auto; }
.score__dial svg { width: 100%; height: auto; display: block; }
.score__track { fill: none; stroke: rgba(36,28,19,.10); stroke-width: 2.4; }
.score__arc { fill: none; stroke: var(--pink); stroke-width: 2.4; stroke-linecap: round; transition: stroke-dashoffset 1.1s cubic-bezier(.22,.61,.36,1); }
.score__num {
  position: absolute; inset: 0;
  display: grid; place-content: center; gap: .1rem;
  font-family: var(--serif); font-size: 1.85rem; line-height: 1;
}
.score__num small { font-family: var(--sans); font-size: .55rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-50); }
.bars { margin-top: var(--s3); display: grid; gap: .55rem; text-align: left; }
.bar__row { display: grid; grid-template-columns: 1fr auto; font-size: .6rem; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-50); margin-bottom: .22rem; }
.bar__track { height: 3px; background: rgba(36,28,19,.10); }
.bar__fill { height: 3px; background: var(--gold); width: 0; transition: width 1s cubic-bezier(.22,.61,.36,1); }
.bar__fill--pink { background: var(--pink); }

/* Methodology */
.method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--rule); }
.method { padding: var(--s4) clamp(1.1rem, 2.2vw, 2rem) var(--s4) 0; border-right: 1px solid var(--rule); }
.method:last-child { border-right: 0; padding-right: 0; }
.method + .method { padding-left: clamp(1.1rem, 2.2vw, 2rem); }
.method__weight { font-family: var(--serif); font-size: 2.1rem; line-height: 1; color: var(--gold); opacity: .6; display: block; margin-bottom: var(--s2); }
.method h3 { font-size: 1.16rem; margin-bottom: .5rem; }
.method p { font-size: .93rem; color: var(--ink-70); margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .dial-beam.sweeping { animation: none; opacity: 1; }
  .blip.on .blip__pulse { animation: none; }
  .blip.on { animation: none; opacity: .92; }
  .result { opacity: 1; transform: none; }
}

@media (max-width: 1000px) {
  .console { grid-template-columns: 1fr 1fr; }
  .console > .scan-wrap { grid-column: 1 / -1; }
  .instrument { grid-template-columns: 1fr; padding-top: var(--s5); }
  .result { grid-template-columns: 2.6rem minmax(0, 1fr); }
  .result__score { grid-column: 2; }
  .method-grid { grid-template-columns: 1fr; }
  .method { border-right: 0; border-bottom: 1px solid var(--rule); padding: var(--s4) 0; }
  .method + .method { padding-left: 0; }
  .method:last-child { border-bottom: 0; }
}

@media (max-width: 780px) {
  .console { grid-template-columns: 1fr; gap: var(--s3); padding: var(--s3) 0 var(--s4); }
  .scan-btn { width: 100%; }
  .score { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: var(--s3); align-items: center; text-align: left; }
  .score .bars { margin-top: 0; }
  .dial-frame { max-width: 320px; }
}

@media (max-width: 480px) {
  .result { grid-template-columns: 1fr; gap: var(--s2); }
  .result__rank { font-size: 1.5rem; }
  .result__score { grid-column: 1; margin-top: var(--s2); }
  .score { grid-template-columns: 104px minmax(0, 1fr); }
  .score__dial { width: 104px; }
}

/* ---------- Home: radar feature band ---------- */
.radar-band { background: var(--blush); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); padding: var(--s6) 0; }
.radar-band__grid { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr) auto; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.radar-band__dial { width: 100%; max-width: 200px; margin: 0 auto; }
.radar-band__dial svg { width: 100%; height: auto; display: block; }
.radar-band h2 { font-size: clamp(1.65rem, 2.9vw, 2.35rem); margin-bottom: var(--s3); }
.radar-band p { font-size: 1rem; color: var(--ink-70); max-width: 52ch; }
.mini-beam { transform-box: view-box; transform-origin: 50px 50px; animation: mini-sweep 9s linear infinite; }
@keyframes mini-sweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mini-beam { animation: none; } }
@media (max-width: 1000px) {
  .radar-band__grid { grid-template-columns: minmax(0, 150px) minmax(0, 1fr); }
  .radar-band__cta { grid-column: 2; }
}
@media (max-width: 620px) {
  .radar-band__grid { grid-template-columns: 1fr; text-align: left; }
  .radar-band__cta { grid-column: 1; }
  .radar-band__dial { max-width: 132px; margin: 0; }
}

.chip[hidden] { display: none; }

/* ===========================================================
   The Radiance Guide + The Laser Matchmaker
   =========================================================== */

/* ---------- The star (house sunburst, awarded) ---------- */
.stars { display: inline-flex; align-items: center; gap: .18rem; color: var(--gold); vertical-align: middle; }
.stars .star { display: block; overflow: visible; }
.stars--ink { color: var(--gold-deep); }

/* ---------- Centred editorial hero (guide + matchmaker) ---------- */
.plate-hero { padding: clamp(2.75rem, 6vw, 4.5rem) 0 0; text-align: center; }
.plate-hero h1 { margin-bottom: var(--s3); }
.plate-hero .lede { max-width: 48ch; margin: 0 auto; }
.plate-hero__scope {
  margin-top: var(--s4);
  font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-50);
  display: flex; justify-content: center; align-items: center; gap: .9rem; flex-wrap: wrap;
}
.plate-hero__scope i { width: 3px; height: 3px; border-radius: 50%; background: var(--gold); display: inline-block; }

/* ---------- The plaque: what the stars mean ---------- */
.plaque {
  border: 1px solid var(--ink);
  background: var(--ivory-deep);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  position: relative;
}
.plaque::after {
  content: ""; position: absolute; inset: 5px; border: 1px solid var(--gold); opacity: .35; pointer-events: none;
}
.plaque__head { text-align: center; padding-bottom: var(--s3); border-bottom: 1px solid var(--rule); margin-bottom: var(--s3); }
.plaque__head .kicker { margin-bottom: .5rem; }
.plaque__head p { font-family: var(--serif); font-style: italic; color: var(--ink-70); margin: 0; font-size: 1rem; }
.plaque__rows { display: grid; gap: 0; }
.plaque__row {
  display: grid; grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr);
  gap: clamp(.9rem, 2.4vw, 2rem);
  align-items: start; padding: var(--s3) 0;
  border-bottom: 1px solid var(--rule-soft);
}
.plaque__row:last-child { border-bottom: 0; padding-bottom: 0; }
.plaque__row .stars { justify-content: flex-start; }
.plaque__row h3 { font-size: 1.14rem; margin-bottom: .3rem; }
.plaque__row p { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--ink-70); margin: 0; }
.plaque__row b { display: block; font-family: var(--sans); font-style: normal; font-weight: 500;
  font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); margin-top: .5rem; }

/* ---------- Guide listings ---------- */
.guide-sweep {
  font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  color: var(--ink-70); text-align: center; max-width: 40ch; margin: 0 auto;
}
.guide-tier { margin-top: var(--s6); }
.guide-tier:first-child { margin-top: 0; }
.guide-tier__head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(1rem, 2.4vw, 2rem); align-items: center;
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule);
  padding: var(--s3) 0;
}
.guide-tier__head h3 { font-size: clamp(1.3rem, 2.2vw, 1.75rem); }
.guide-tier__note { font-family: var(--serif); font-style: italic; color: var(--ink-70); margin: .25rem 0 0; font-size: .98rem; }
.guide-tier__count {
  margin: 0; text-align: right; font-family: var(--serif); font-size: 1rem; white-space: nowrap;
}
.guide-tier__count small {
  display: block; font-family: var(--sans); font-size: .6rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-50); margin-top: .3rem;
}
.guide-city { margin-top: var(--s4); }
.guide-city__name {
  display: flex; align-items: center; gap: .7rem;
  font-family: var(--sans); font-size: .66rem; font-weight: 500; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-50); margin: 0 0 var(--s2);
}
.guide-city__name i { flex: 1; height: 1px; background: var(--rule); }
.guide-city__name span { color: var(--gold-deep); }
.guide-list { list-style: none; margin: 0; padding: 0; }
.guide-entry {
  display: grid; grid-template-columns: minmax(0, 5.2rem) minmax(0, 1fr) minmax(0, 11rem);
  gap: clamp(.9rem, 2.4vw, 2rem);
  padding: var(--s3) 0; border-bottom: 1px solid var(--rule-soft);
  align-items: start;
}
.guide-entry:hover .guide-entry__name { color: var(--gold-deep); }
.guide-entry__stars .stars { color: var(--gold); }
.guide-entry__name { font-size: clamp(1.1rem, 1.8vw, 1.3rem); margin: 0 0 .3rem; transition: color .25s ease; }
.guide-entry__where { font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-50); margin: 0 0 .6rem; }
.guide-entry__note {
  font-family: var(--serif); font-style: italic; font-size: .96rem; line-height: 1.55;
  color: var(--ink); border-left: 1px solid var(--gold); padding-left: .9rem; margin: 0;
}
.guide-entry__meta { text-align: right; display: grid; gap: .55rem; justify-items: end; }
.guide-entry__score b { font-family: var(--serif); font-size: 1.35rem; display: block; line-height: 1; }
.guide-entry__score small { font-size: .56rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-50); }
.guide-entry__link {
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep);
  text-decoration: none; border-bottom: 1px solid var(--gold-wash); white-space: nowrap;
}
.guide-entry__link:hover { border-bottom-color: var(--gold); }
.guide-empty { font-family: var(--serif); font-style: italic; color: var(--ink-70); }

@media (max-width: 900px) {
  .guide-tier__head { grid-template-columns: auto minmax(0, 1fr); }
  .guide-tier__count { grid-column: 1 / -1; text-align: left; }
  .guide-entry { grid-template-columns: minmax(0, 4.2rem) minmax(0, 1fr); }
  .guide-entry__meta { grid-column: 2; justify-items: start; text-align: left;
    display: flex; align-items: baseline; gap: 1.2rem; flex-wrap: wrap; }
  .guide-entry__score b { display: inline; font-size: 1.1rem; }
  .guide-entry__score small { margin-left: .35rem; }
}
@media (max-width: 520px) {
  .plaque__row { grid-template-columns: 1fr; gap: .6rem; }
  .guide-entry { grid-template-columns: 1fr; gap: .5rem; }
  .guide-entry__meta { grid-column: 1; }
  .guide-tier__head { grid-template-columns: 1fr; gap: .55rem; }
  .guide-tier__glyphs { grid-column: 1; }
}

/* ===========================================================
   Matchmaker · quiz
   =========================================================== */
.quiz-progress { max-width: 46rem; margin: 0 auto var(--s4); }
.quiz-progress__bar { height: 1px; background: var(--rule); position: relative; }
.quiz-progress__bar i {
  position: absolute; left: 0; top: -1px; height: 3px; background: var(--gold);
  transition: width .55s cubic-bezier(.22,.61,.36,1);
}
.quiz-progress__label {
  margin: .7rem 0 0; font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-50); text-align: center;
}
.quiz-card {
  max-width: 46rem; margin: 0 auto;
  background: #fff; border: 1px solid var(--rule); border-top: 2px solid var(--gold);
  padding: clamp(1.5rem, 3.4vw, 2.75rem);
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
}
.quiz-card.in { opacity: 1; transform: none; }
.quiz-card h3 { font-size: clamp(1.45rem, 2.7vw, 2rem); margin-bottom: var(--s2); }
.quiz-card__help { font-family: var(--serif); font-style: italic; color: var(--ink-70); font-size: 1rem; margin-bottom: var(--s4); }
.quiz-options { display: grid; gap: .7rem; }
.quiz-option {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: .9rem;
  align-items: start; text-align: left; width: 100%;
  background: var(--ivory); border: 1px solid var(--rule); color: var(--ink);
  font-family: var(--sans); padding: 1rem 1.1rem; cursor: pointer;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.quiz-option:hover { border-color: var(--gold); background: #fff; transform: translateX(3px); }
.quiz-option__letter {
  font-family: var(--serif); font-size: .95rem; letter-spacing: .04em;
  width: 2.1rem; height: 2.1rem; display: grid; place-items: center;
  border: 1px solid var(--gold); border-radius: 50%; color: var(--gold-deep);
}
.quiz-option__text b { font-family: var(--serif); font-weight: 400; font-size: 1.14rem; display: block; line-height: 1.25; }
.quiz-option__text small { display: block; font-size: .86rem; color: var(--ink-70); line-height: 1.55; margin-top: .3rem; }
.quiz-back {
  margin-top: var(--s4); background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--sans); font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-50);
}
.quiz-back:hover { color: var(--gold-deep); }

/* ---------- Matchmaker · results ---------- */
.match-wrap { opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; }
.match-wrap.in { opacity: 1; transform: none; }
.match-recap {
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule);
  padding: var(--s3) 0 var(--s4); margin-bottom: var(--s5);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3); align-items: end;
}
.match-recap .kicker { grid-column: 1 / -1; margin: 0; }
.match-recap ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 2.2rem; }
.match-recap li { font-family: var(--serif); font-size: 1.05rem; }
.match-recap li small {
  display: block; font-family: var(--sans); font-size: .58rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-50); margin-bottom: .18rem;
}
.match-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 1.75rem); align-items: start; }
.match-card { background: #fff; border: 1px solid var(--rule); padding: clamp(1.4rem, 2.6vw, 2.1rem); }
.match-card--primary { background: var(--ivory-deep); border-top: 2px solid var(--gold); border-color: var(--ink-30); }
.match-card__head { padding-bottom: var(--s3); border-bottom: 1px solid var(--rule); margin-bottom: var(--s3); }
.match-card__head .kicker { margin-bottom: .55rem; }
.match-card__head h3 { font-size: clamp(1.35rem, 2.3vw, 1.75rem); }
.match-card__plain { font-family: var(--serif); font-style: italic; color: var(--gold-deep); margin: .45rem 0 0; font-size: 1.02rem; }
.match-card__why { display: grid; gap: .4rem; margin-bottom: var(--s4); }
.why-chip {
  font-size: .8rem; line-height: 1.45; color: var(--ink-70);
  border-left: 2px solid var(--rule); padding: .1rem 0 .1rem .7rem;
}
.why-chip small {
  display: block; font-size: .56rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-50); margin-bottom: .12rem;
}
.why-chip.is-good { border-left-color: var(--gold); color: var(--ink); }
.why-chip.is-bad { border-left-color: var(--pink); }
.match-card__section { margin-bottom: var(--s4); }
.match-label {
  display: block; font-size: .6rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-deep); margin-bottom: .6rem;
}
.match-card__section p { font-size: .93rem; color: var(--ink-70); margin: 0; }
.device-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.device-list li { padding-bottom: .7rem; border-bottom: 1px solid var(--rule-soft); }
.device-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.device-list b { font-family: var(--serif); font-weight: 500; font-size: 1.02rem; display: block; }
.device-list span { display: block; font-size: .85rem; color: var(--ink-70); line-height: 1.55; margin-top: .15rem; }
.device-list i {
  display: block; font-style: normal; font-size: .58rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-50); margin-top: .3rem;
}
.match-specs { margin: 0 0 var(--s4); display: grid; gap: 0; border-top: 1px solid var(--rule); }
.match-specs > div { padding: .8rem 0; border-bottom: 1px solid var(--rule-soft); }
.match-specs dt { font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-50); margin-bottom: .25rem; }
.match-specs dd { margin: 0; font-size: .88rem; color: var(--ink-70); }
.match-take { margin: 0 0 var(--s4); background: var(--blush); border-top: 2px solid var(--gold); padding: clamp(1rem, 2vw, 1.4rem); }
.match-take p { font-family: var(--serif); font-style: italic; font-size: 1.06rem; line-height: 1.5; margin: 0 0 .6rem; }
.match-take cite { font-style: normal; font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-50); }
.caution-list { margin: 0; padding-left: 1.1rem; display: grid; gap: .5rem; }
.caution-list li { font-size: .89rem; color: var(--ink-70); line-height: 1.6; }
.caution-list li::marker { color: var(--gold); }
.match-disclaimer { margin: var(--s5) 0 0; }
.match-disclaimer p { font-size: .96rem; }
.match-cta {
  margin-top: var(--s5); background: var(--ink); color: var(--ivory); padding: clamp(1.5rem, 3vw, 2.5rem);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s4); align-items: center;
}
.match-cta .kicker { color: #E2B487; }
.match-cta h3 { color: var(--ivory); font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin-bottom: .6rem; }
.match-cta p { color: rgba(251, 247, 241, .74); font-size: .95rem; margin: 0; max-width: 46ch; }
.match-cta .btn--gold { color: #E2B487; border-color: rgba(226, 180, 135, .6); }
.match-cta .btn--gold:hover { background: var(--gold); color: #1B140C; border-color: var(--gold); }
.match-logic { margin-top: var(--s5); border-top: 1px solid var(--rule); padding-top: var(--s3); }
.match-logic summary {
  cursor: pointer; font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep);
}
.match-logic p { font-size: .93rem; color: var(--ink-70); margin: var(--s3) 0 0; max-width: 72ch; }
.logic-scores { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: .3rem; max-width: 34rem; }
.logic-scores li {
  display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0;
  border-bottom: 1px solid var(--rule-soft); font-size: .78rem; letter-spacing: .04em; color: var(--ink-70);
}
.logic-scores b { font-family: var(--serif); color: var(--ink); }

@media (max-width: 900px) {
  .match-grid { grid-template-columns: 1fr; }
  .match-recap { grid-template-columns: 1fr; align-items: start; }
  .match-cta { grid-template-columns: 1fr; }
}

/* ---------- The Acronym Decoder ---------- */
.decoder-bar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3);
  align-items: end; border-top: 1px solid var(--ink); padding: var(--s3) 0; margin-bottom: var(--s3);
}
.decoder-bar .field input { font-size: clamp(1rem, 1.6vw, 1.25rem); }
.decoder-count { font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-50); white-space: nowrap; }
.decoder-scroll { overflow-x: auto; }
.decoder { width: 100%; border-collapse: collapse; font-size: .9rem; }
.decoder thead th {
  text-align: left; font-family: var(--sans); font-size: .58rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-50);
  padding: .6rem .9rem .6rem 0; border-bottom: 1px solid var(--rule);
}
.decoder tbody th {
  text-align: left; font-family: var(--serif); font-weight: 500; font-size: 1.02rem;
  padding: .95rem .9rem .95rem 0; vertical-align: top; white-space: nowrap;
}
.decoder tbody td { padding: .95rem .9rem .95rem 0; vertical-align: top; color: var(--ink-70); line-height: 1.6; }
.decoder tbody tr { border-bottom: 1px solid var(--rule-soft); }
.decoder tbody tr:hover { background: var(--ivory-deep); }
.decoder-maker { font-size: .78rem; letter-spacing: .04em; white-space: nowrap; }
.decoder-family { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-50); }
.decoder-empty { font-family: var(--serif); font-style: italic; color: var(--ink-70); padding: var(--s4) 0; }
@media (max-width: 780px) {
  .decoder-bar { grid-template-columns: 1fr; }
  .decoder tbody th { white-space: normal; }
  .decoder-maker, .decoder-family { white-space: normal; }
  .decoder { font-size: .85rem; }
}

/* ===========================================================
   Home · The Instruments trio band
   =========================================================== */
.instruments { background: var(--blush); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); padding: var(--s6) 0; }
.instruments__head { text-align: center; max-width: 54ch; margin: 0 auto var(--s5); }
.instruments__head h2 { font-size: clamp(1.65rem, 2.9vw, 2.35rem); margin-bottom: var(--s2); }
.instruments__head p { font-size: 1rem; color: var(--ink-70); margin: 0; }
.instruments__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule); }
.instrument-card {
  display: flex; flex-direction: column; gap: var(--s2);
  padding: var(--s4) clamp(1.1rem, 2.2vw, 2rem) var(--s4) 0;
  border-right: 1px solid var(--rule);
}
.instrument-card:last-child { border-right: 0; padding-right: 0; }
.instrument-card + .instrument-card { padding-left: clamp(1.1rem, 2.2vw, 2rem); }
.instrument-card__icon { color: var(--gold); height: 58px; }
.instrument-card__icon svg { width: 58px; height: 58px; display: block; }
.instrument-card h3 { font-size: 1.3rem; }
.instrument-card__plain { font-family: var(--serif); font-style: italic; color: var(--gold-deep); font-size: .95rem; margin: 0; }
.instrument-card p { font-size: .93rem; color: var(--ink-70); }
.instrument-card__foot { margin-top: auto; padding-top: var(--s2); }
.instrument-card__foot a {
  font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep);
  text-decoration: none; border-bottom: 1px solid var(--gold-wash);
}
.instrument-card__foot a:hover { border-bottom-color: var(--gold); }
.mini-dial-sweep { transform-box: view-box; transform-origin: 50px 50px; animation: mini-sweep 9s linear infinite; }
.rings-spin { transform-box: fill-box; transform-origin: 50% 50%; animation: rings-drift 24s linear infinite; }
@keyframes rings-drift { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mini-dial-sweep, .rings-spin { animation: none; } }
@media (max-width: 1080px) and (min-width: 861px) {
  .instruments__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .instrument-card:nth-child(2n) { border-right: 0; padding-right: 0; }
  .instrument-card:nth-child(2n+1) { padding-left: 0; }
  .instrument-card:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
}
.iris-blades { transform-box: view-box; transform-origin: 50px 50px; animation: iris-turn 22s linear infinite; }
@keyframes iris-turn { from { transform: rotate(0deg); } to { transform: rotate(90deg); } }
@media (prefers-reduced-motion: reduce) { .iris-blades { animation: none; } }
@media (max-width: 860px) {
  .instruments__grid { grid-template-columns: 1fr; }
  .instrument-card { border-right: 0; border-bottom: 1px solid var(--rule); padding: var(--s4) 0; }
  .instrument-card + .instrument-card { padding-left: 0; }
  .instrument-card:last-child { border-bottom: 0; }
}

/* ===========================================================
   Nav · nine sections: drawer earlier, tighter desktop line
   =========================================================== */
@media (max-width: 1180px) {
  .nav-toggle { display: inline-block; position: relative; z-index: 70; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--ivory);
    flex-direction: column; align-items: flex-start; gap: 0;
    padding: .5rem var(--gutter) 2rem;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .32s ease, transform .32s ease, visibility .32s;
    border-bottom: 1px solid var(--ink);
    box-shadow: 0 24px 40px -28px rgba(36, 28, 19, .35);
    z-index: 50; max-height: calc(100vh - 100px); overflow-y: auto;
  }
  .nav.open { opacity: 1; visibility: visible; transform: none; }
  .nav a {
    font-family: var(--serif); font-size: 1.22rem; text-transform: none; letter-spacing: .01em;
    width: 100%; padding: .78rem 0; border-bottom: 1px solid var(--rule);
  }
  .nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--gold); }
  .nav a .nav-dot { vertical-align: .55em; }
}
@media (min-width: 1181px) {
  .nav { gap: clamp(.5rem, .9vw, .95rem); }
  .nav a { white-space: nowrap; font-size: .595rem; letter-spacing: .075em; }
  .wordmark { font-size: .78rem; letter-spacing: .14em; }
  .site-header .wrap { gap: var(--s2); }
}

/* ===========================================================
   Radar 2.0 · geo-honest dial, procedure search, cross-reference
   =========================================================== */

/* ---------- Mode toggle ---------- */
.mode-toggle {
  display: flex; align-items: center; gap: .55rem;
  padding-bottom: .9rem;
}
.mode-toggle__btn {
  background: none; border: 0; padding: .15rem 0; cursor: pointer;
  font-family: var(--sans); font-size: .64rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ink-30);
  border-bottom: 1px solid transparent;
  transition: color .25s ease, border-color .25s ease;
}
.mode-toggle__btn:hover { color: var(--ink-70); }
.mode-toggle__btn.is-on { color: var(--gold-deep); border-bottom-color: var(--gold); }
.mode-toggle__sep { color: var(--ink-30); font-size: .7rem; }

/* ---------- Procedure keyword chips ---------- */
.key-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .6rem; }
.key-chip {
  background: var(--ivory-deep); border: 1px solid var(--rule); cursor: pointer;
  font-family: var(--sans); font-size: .58rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-70); padding: .28rem .55rem;
  transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.key-chip:hover { border-color: var(--gold); color: var(--gold-deep); background: #fff; }
.field[hidden] { display: none; }

/* ---------- Dial: plotting layer ---------- */
.dial-canvas { position: relative; }
.blip { cursor: pointer; }
.blip:focus { outline: none; }
.blip:focus-visible .blip__dot { stroke: var(--gold-deep); stroke-width: .5; }
.blip--minor { opacity: 0; }
.blip--minor.on { animation: blip-in-minor .9s ease forwards; }
@keyframes blip-in-minor { 0% { opacity: 0; } 30% { opacity: .68; } 100% { opacity: .62; } }
.blip--minor .blip__pulse { display: none; }
.blip__glow { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.blip--top.on .blip__glow { animation: blip-glow 3.6s ease-in-out infinite; }
@keyframes blip-glow {
  0%, 100% { opacity: .10; transform: scale(.8); }
  45% { opacity: .34; transform: scale(1.18); }
}
.blip__num {
  font-family: var(--serif); font-size: 3.6px; letter-spacing: .04em;
  fill: rgba(36, 28, 19, .38);
}
.blip__num--top { font-size: 4.6px; fill: var(--ink); }
.blip.is-linked .blip__dot { fill: var(--gold); }
.blip.is-linked .blip__num { fill: var(--ink); }
.blip.is-linked .blip__glow { opacity: .42; animation-play-state: paused; }
.blip.is-linked { opacity: 1; }

.dial-city {
  font-family: var(--sans); font-size: 3.4px; font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase; fill: var(--ink-50);
}

/* ---------- Blip tooltip ---------- */
.blip-tip {
  position: absolute; z-index: 5;
  transform: translate(-50%, calc(-100% - 12px));
  min-width: 9.5rem; max-width: 15rem;
  background: #fff; border: 1px solid var(--ink-30); border-top: 2px solid var(--gold);
  box-shadow: 0 18px 30px -22px rgba(36, 28, 19, .45);
  padding: .6rem .7rem .55rem;
  pointer-events: none;
  text-align: left;
}
.blip-tip--below { transform: translate(-50%, 14px); }
.blip-tip[hidden] { display: none; }
.blip-tip__rank {
  display: block; font-family: var(--serif); font-size: .7rem;
  letter-spacing: .18em; color: var(--gold-deep); margin-bottom: .12rem;
}
.blip-tip strong {
  display: block; font-family: var(--serif); font-weight: 400; font-size: .96rem;
  line-height: 1.2; letter-spacing: -.01em;
}
.blip-tip__stars { display: block; margin-top: .3rem; }
.blip-tip__area {
  display: block; font-size: .56rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-50); margin-top: .35rem; line-height: 1.5;
}
.blip-tip__score {
  display: block; font-family: var(--serif); font-size: .78rem; color: var(--ink);
  margin-top: .3rem; padding-top: .3rem; border-top: 1px solid var(--rule-soft);
}

.dial-legend {
  position: absolute; left: 0; right: 0; bottom: .2rem;
  margin: 0; text-align: center;
  font-size: .58rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-30);
}
.dial-frame { padding-bottom: 4.3rem; }
.dial-frame .dial-readout { bottom: 2.1rem; }

/* ---------- Result cards: matched devices + dial cross-reference ---------- */
.tag--matched {
  border-color: var(--pink); box-shadow: inset 0 0 0 1px var(--pink);
  color: var(--ink); background: var(--pink-wash);
}
.carries { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 var(--s2); }
.carries__chip {
  font-size: .58rem; letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid var(--gold); background: var(--gold-wash); color: var(--gold-deep);
  padding: .26rem .5rem;
}
.result__rank { display: block; }
.on-radar { display: block; margin-top: .55rem; color: var(--gold-deep); width: 3.1rem; }
.on-radar svg { width: 2.6rem; height: 2.6rem; display: block; }
.on-radar i {
  display: block; font-style: normal; font-size: .5rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-50); margin-top: .32rem; line-height: 1.35;
}
.result--plotted.is-linked, .result.is-linked {
  border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold-wash);
}
.result.is-linked .on-radar { color: var(--gold); }
.result.is-flash { animation: card-flash 1.8s ease-out 1; }
@keyframes card-flash {
  0% { background: var(--blush); border-color: var(--gold); }
  100% { background: #fff; border-color: var(--rule); }
}
.result--top.is-flash { animation: card-flash-top 1.8s ease-out 1; }
@keyframes card-flash-top {
  0% { background: var(--blush); border-color: var(--gold); }
  100% { background: var(--ivory-deep); border-color: var(--ink-30); }
}

@media (prefers-reduced-motion: reduce) {
  .blip--top.on .blip__glow { animation: none; opacity: .26; }
  .blip--minor.on { animation: none; opacity: .62; }
  .result.is-flash, .result--top.is-flash { animation: none; border-color: var(--gold); }
}

@media (max-width: 780px) {
  .dial-legend { bottom: .1rem; font-size: .54rem; letter-spacing: .1em; line-height: 1.5; }
  .blip-tip { min-width: 7.5rem; max-width: 10.5rem; padding: .45rem .55rem .4rem; }
  .blip-tip strong { font-size: .82rem; }
  .blip-tip__area { font-size: .5rem; letter-spacing: .1em; }
  .blip-tip__score { font-size: .7rem; }
  .on-radar { width: auto; display: flex; align-items: center; gap: .45rem; }
  .on-radar svg { width: 1.8rem; height: 1.8rem; flex: none; }
  .on-radar i { margin-top: 0; white-space: nowrap; }
}

/* ===========================================================
   The Index · every laser, decoded
   =========================================================== */
.jump-nav {
  position: sticky; top: 68px; z-index: 40;
  background: var(--ivory);
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s5);
}
.jump-nav__scroll {
  display: flex; gap: 1.1rem; overflow-x: auto; padding: .7rem 0;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.jump-nav a {
  flex: none; text-decoration: none;
  font-size: .58rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-50); white-space: nowrap;
  border-bottom: 1px solid transparent; padding-bottom: .15rem;
  transition: color .25s ease, border-color .25s ease;
}
.jump-nav a:hover { color: var(--gold-deep); border-bottom-color: var(--gold); }

.idx-bar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3);
  align-items: end; border-top: 1px solid var(--ink); padding: var(--s3) 0 var(--s4);
}
.idx-count { font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-50); white-space: nowrap; }

.idx-cat { margin-top: var(--s6); scroll-margin-top: 8.5rem; }
.idx-cat:first-of-type { margin-top: 0; }
.idx-cat__head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3);
  align-items: baseline; border-bottom: 1px solid var(--ink); padding-bottom: var(--s2);
}
.idx-cat__head h2 { font-size: clamp(1.35rem, 2.3vw, 1.85rem); }
.idx-cat__count { font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-50); white-space: nowrap; }
.idx-list { list-style: none; margin: 0; padding: 0; }
.idx-row {
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(1rem, 2.6vw, 2.4rem);
  padding: var(--s3) 0; border-bottom: 1px solid var(--rule-soft);
  align-items: start;
}
.idx-row:hover { background: var(--ivory-deep); }
.idx-name { font-family: var(--serif); font-size: 1.12rem; line-height: 1.25; margin: 0; }
.idx-decoded {
  display: block; font-family: var(--sans); font-size: .58rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep);
  margin-top: .38rem; line-height: 1.6;
}
.idx-maker { display: block; font-size: .76rem; letter-spacing: .04em; color: var(--ink-50); margin-top: .35rem; }
.idx-what { font-size: .95rem; color: var(--ink-70); margin: 0; }
.idx-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .6rem; }
.idx-tags .tag { background: #fff; }
.idx-empty { font-family: var(--serif); font-style: italic; color: var(--ink-70); padding: var(--s5) 0; text-align: center; }
.idx-note { margin-top: var(--s6); }
.idx-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: var(--s5); }

@media (min-width: 900px) {
  .jump-nav__scroll { flex-wrap: wrap; row-gap: .45rem; overflow-x: visible; }
}

@media (max-width: 780px) {
  .jump-nav { top: 60px; }
  .idx-bar { grid-template-columns: 1fr; }
  .idx-row { grid-template-columns: 1fr; gap: .6rem; }
  .idx-cat { scroll-margin-top: 7.5rem; }
}

/* ===========================================================
   Radar 3.0 · the deck (controls + dial on one screen),
   the city picker, and the deeper result card
   =========================================================== */

/* ---------- One-viewport deck ---------- */
.radar-deck { padding: var(--s3) 0 var(--s4); }
.radar-deck .console { padding: var(--s3) 0 var(--s3); }
.radar-deck .instrument { padding: var(--s4) 0 0; align-items: start; }
.radar-deck .instrument .dial-frame { max-width: 380px; }
.radar-deck .instrument__notes h2 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); margin-bottom: var(--s2); }
.radar-deck .instrument__notes p { font-size: .93rem; }
.radar-deck .readout-list { margin-top: var(--s2); }
.radar-deck .readout-list li { padding: .38rem 0; }
.radar-deck .mode-toggle { margin-bottom: .3rem; }
.dial-legend { margin-top: .3rem; }

@media (min-width: 1001px) {
  /* controls in one compact row, dial + readout directly beneath */
  .radar-deck .console {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.1fr) auto;
    align-items: end;
    gap: clamp(1.25rem, 3vw, 2.5rem);
  }
  .radar-deck .console__hint { margin-top: .35rem; font-size: .64rem; }
  .radar-deck .field input, .radar-deck .field select { font-size: 1.12rem; padding: .3rem 0; }
  .radar-hero { padding-top: clamp(1.9rem, 3.4vw, 2.9rem); }
  .radar-hero .lede { font-size: 1.02rem; }
  .radar-hero__scope { margin-top: var(--s3); }
  .radar-deck .dial-frame { max-width: 340px; }
}

/* ---------- The city picker ---------- */
.field--city { position: relative; }
.citypick { position: relative; }
.citypick__btn {
  width: 100%;
  display: flex; align-items: baseline; justify-content: space-between; gap: .8rem;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--ink-30);
  border-radius: 0;
  padding: .3rem 0;
  cursor: pointer;
  text-align: left;
  color: var(--ink);
  transition: border-color .25s ease;
}
.citypick__btn:hover, .citypick.is-open .citypick__btn { border-bottom-color: var(--gold); }
.citypick__btn:focus-visible { outline: none; border-bottom-color: var(--gold); box-shadow: 0 1px 0 0 var(--gold); }
.citypick__value {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.9vw, 1.35rem);
  line-height: 1.3;
  font-weight: 400;
}
.citypick__caret { color: var(--gold); flex: none; transition: transform .25s ease; margin-bottom: .3rem; }
.citypick.is-open .citypick__caret { transform: rotate(180deg); }

.citypick__panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + .45rem);
  left: 0; right: 0;
  min-width: 15rem;
  background: #FDFAF5;
  border: 1px solid var(--rule);
  border-top: 2px solid var(--gold);
  box-shadow: 0 18px 40px -22px rgba(36, 28, 19, .38);
  padding: .5rem;
  animation: citypick-in .18s ease both;
}
.citypick__panel[hidden] { display: none; }
@keyframes citypick-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .citypick__panel { animation: none; } }
.citypick__filter {
  width: 100%;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--rule);
  padding: .3rem .35rem .45rem;
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--ink);
}
.citypick__filter::placeholder { color: var(--ink-30); font-style: italic; }
.citypick__filter:focus { outline: none; border-bottom-color: var(--gold); }
.citypick__list {
  list-style: none; margin: .35rem 0 0; padding: 0;
  max-height: 17rem; overflow-y: auto;
}
.citypick__group {
  font-family: var(--sans);
  font-size: .58rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-50);
  padding: .6rem .45rem .3rem;
  border-bottom: 1px solid var(--rule-soft);
  margin-bottom: .2rem;
}
.citypick__group[hidden], .citypick__opt[hidden] { display: none; }
.citypick__opt {
  display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
  padding: .4rem .45rem;
  cursor: pointer;
  font-family: var(--serif);
  font-size: .98rem;
  color: var(--ink-70);
  transition: background .16s ease, color .16s ease;
}
.citypick__opt.is-active { background: var(--blush); color: var(--ink); }
.citypick__opt:hover { background: var(--blush); color: var(--ink); }
.citypick__opt.is-chosen .citypick__city { color: var(--ink); }
.citypick__opt.is-chosen::after {
  content: ''; width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold); align-self: center; flex: none;
}
.citypick__count {
  font-size: .6rem; letter-spacing: .14em; color: var(--ink-30);
  font-variant-numeric: tabular-nums;
}
.citypick__none {
  font-family: var(--serif); font-style: italic; font-size: .85rem;
  color: var(--ink-50); padding: .6rem .45rem 0; margin: 0;
}
.citypick__none[hidden] { display: none; }

/* ---------- Deeper result card ---------- */
.result__read {
  font-family: var(--serif);
  font-size: .95rem;
  line-height: 1.66;
  color: var(--ink-70);
  margin: .7rem 0 0;
  padding-left: .85rem;
  border-left: 1px solid var(--gold-wash);
}
.chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .7rem; }
.chip-badge {
  font-size: .56rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  border: 1px solid rgba(192, 128, 64, .38);
  background: var(--gold-wash);
  padding: .26rem .5rem;
  white-space: nowrap;
}
.ratings { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; margin-top: .8rem; }
.ratings__blend { display: inline-flex; align-items: baseline; gap: .4rem; }
.ratings__blend b {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1;
  color: var(--ink);
}
.ratings__blend i {
  font-style: normal;
  font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-50);
}
.ratings__platforms { font-size: .68rem; letter-spacing: .04em; color: var(--ink-50); }
.result__creds {
  font-size: .64rem;
  letter-spacing: .05em;
  color: var(--ink-50);
  margin: .5rem 0 0;
  line-height: 1.6;
}

/* ---------- Methodology sub-signals ---------- */
.signal-list { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: .2rem; }
.signal-list li {
  display: flex; justify-content: space-between; gap: .8rem;
  border-top: 1px solid var(--rule-soft);
  padding: .32rem 0;
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-50);
}
.signal-list b { font-family: var(--serif); font-size: .85rem; letter-spacing: .04em; color: var(--gold-deep); font-weight: 400; }

@media (max-width: 1000px) {
  .radar-deck { padding-top: var(--s3); }
  .radar-deck .instrument { padding-top: var(--s4); }
  .radar-deck .console { padding: var(--s3) 0; gap: var(--s3); }
}
@media (max-width: 780px) {
  .radar-deck .dial-frame, .radar-deck .instrument .dial-frame { max-width: 290px; }
  .citypick__panel { min-width: 0; }
  .ratings { gap: .5rem; }
}

/* ===========================================================
   The Radiance Scan · capture stage, consent, zone instruments
   =========================================================== */
.scan-deck {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
  border-top: 1px solid var(--ink);
  padding-top: var(--s4);
}

/* ---------- The stage ---------- */
.scan-frame {
  position: relative;
  aspect-ratio: 3 / 4;
  max-height: 66vh;
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  background: #FDFAF5;
  border: 1px solid var(--rule);
  overflow: hidden;
}
.scan-frame::after {
  content: '';
  position: absolute; inset: 0;
  border: 1px solid rgba(192, 128, 64, .28);
  pointer-events: none;
}
.scan-frame video, .scan-frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}
.scan-frame video[hidden], .scan-frame img[hidden] { display: none; }
.scan-guide { position: absolute; inset: 0; pointer-events: none; }
.scan-guide svg { width: 100%; height: 100%; display: block; }
.scan-guide__note {
  position: absolute; left: 50%; bottom: .9rem; transform: translateX(-50%);
  font-size: .58rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-deep);
  background: rgba(253, 250, 245, .82);
  padding: .3rem .6rem;
  white-space: nowrap;
}
.scan-frame[data-state="idle"] .scan-guide svg { opacity: .5; }
.scan-frame__idle {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s3);
  padding: var(--s4);
  text-align: center;
  color: var(--gold);
}
.scan-frame__idle[hidden] { display: none; }
.scan-frame__idle svg { width: 62px; height: 62px; }
.scan-frame__idle p {
  font-family: var(--serif); font-size: .92rem; font-style: italic;
  color: var(--ink-50); max-width: 26ch; margin: 0;
}
.scan-sweepline {
  position: absolute; left: 0; right: 0; top: 0; height: 34%;
  background: linear-gradient(to bottom, rgba(231, 184, 165, 0), rgba(231, 184, 165, .38), rgba(231, 184, 165, 0));
  animation: scan-sweep 2.1s cubic-bezier(.4, 0, .6, 1) infinite;
  pointer-events: none;
}
.scan-sweepline[hidden] { display: none; }
@keyframes scan-sweep { from { transform: translateY(-100%); } to { transform: translateY(300%); } }
.scan-frame.is-reading { border-color: var(--gold); }
.scan-stage__hint {
  font-size: .68rem; letter-spacing: .1em; color: var(--ink-50);
  margin: .7rem 0 0; min-height: 2.4em;
}

/* ---------- Consent + controls ---------- */
.consent {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem;
  align-items: start;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: var(--s3) 0;
  margin: var(--s2) 0 var(--s3);
  cursor: pointer;
  font-family: var(--serif);
  font-size: .95rem;
  line-height: 1.6;
  color: var(--ink-70);
}
.consent input {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; margin: .28rem 0 0;
  border: 1px solid var(--ink-30);
  background: #fff;
  display: grid; place-content: center;
  cursor: pointer;
  transition: border-color .2s ease;
}
.consent input:hover { border-color: var(--gold); }
.consent input:checked { border-color: var(--gold); background: var(--gold-wash); }
.consent input:checked::after {
  content: ''; width: 9px; height: 5px;
  border-left: 1.5px solid var(--gold-deep); border-bottom: 1.5px solid var(--gold-deep);
  transform: rotate(-45deg) translateY(-1px);
}
.consent input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.scan-btns { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.scan-btns .btn[hidden], .scan-btns .scan-run[hidden] { display: none; }
.scan-run {
  background: var(--ink); color: var(--ivory);
  border: 1px solid var(--ink);
  font-family: var(--sans); font-size: .68rem; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase;
  padding: .95rem 1.8rem; cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.scan-run:hover:not([disabled]) { background: var(--gold); border-color: var(--gold); color: #1B140C; }
.scan-run[disabled] { opacity: .38; cursor: not-allowed; }

.scan-upload { margin-top: var(--s4); }
.scan-upload.is-locked { opacity: .45; }
.scan-upload__label {
  display: block;
  border: 1px dashed var(--ink-30);
  padding: var(--s3);
  margin-top: .6rem;
  cursor: pointer;
  font-family: var(--serif); font-size: .92rem; color: var(--ink-70);
  transition: border-color .2s ease, background .2s ease;
}
.scan-upload__label:hover { border-color: var(--gold); background: rgba(192, 128, 64, .05); }
.scan-upload.is-locked .scan-upload__label { cursor: not-allowed; }
.scan-upload__label input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.scan-upload__note { font-size: .68rem; letter-spacing: .04em; color: var(--ink-50); margin: .6rem 0 0; }
.scan-facts { margin-top: var(--s4); }

/* ---------- States ---------- */
#scanState { scroll-margin-top: 130px; }
.scan-note { border-left: 2px solid var(--gold-wash); padding-left: var(--s3); margin-bottom: var(--s4); }
.scan-note p { font-size: .93rem; color: var(--ink-70); margin: .35rem 0 0; max-width: 62ch; }
.scan-flag {
  background: var(--blush); border-top: 2px solid var(--gold);
  padding: var(--s3) var(--s4); margin-bottom: var(--s4);
}
.scan-flag p { font-size: .95rem; color: var(--ink); margin: .35rem 0 0; max-width: 62ch; }

.scan-awaiting {
  display: grid; grid-template-columns: 120px minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  background: #FDFAF5;
  border: 1px solid var(--rule);
  border-top: 2px solid var(--gold);
  padding: clamp(1.5rem, 4vw, 2.75rem);
}
.scan-awaiting__glyph svg { width: 100%; height: auto; display: block; }
.warm-ring { transform-box: view-box; transform-origin: 50px 50px; animation: warm-turn 7s linear infinite; }
@keyframes warm-turn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .warm-ring, .scan-sweepline { animation: none; } }
.scan-awaiting h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: .3rem 0 var(--s2); }
.scan-awaiting p { font-size: .95rem; color: var(--ink-70); max-width: 62ch; margin: 0 0 .6rem; }
.scan-awaiting__detail { font-size: .7rem !important; letter-spacing: .06em; color: var(--ink-50) !important; }
.scan-awaiting__cta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: var(--s3); }

/* ---------- The six zone instruments ---------- */
.zone-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.zone-grid:empty { display: none; }
.zone {
  background: var(--ivory);
  padding: var(--s3) var(--s3) var(--s4);
  display: flex; flex-direction: column; gap: .5rem;
}
.zone__instrument { font-size: .56rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-50); }
.zone__head h3 { font-size: 1.08rem; margin: .3rem 0 0; }
.zone__score { display: flex; align-items: baseline; gap: .4rem; margin: .2rem 0 0; }
.zone__score b { font-family: var(--serif); font-size: 2rem; font-weight: 400; line-height: 1; }
.zone__score small { font-size: .56rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-50); }
.zone__meter { height: 3px; background: rgba(36, 28, 19, .10); }
.zone__meter i { display: block; height: 3px; background: var(--gold); transition: width 1s cubic-bezier(.22, .61, .36, 1); }
.zone__note { font-size: .9rem; color: var(--ink-70); margin: .3rem 0 0; }
.zone__family { font-size: .62rem; letter-spacing: .1em; color: var(--ink-50); margin: auto 0 0; padding-top: .6rem; }
.zone--waiting .zone__note { font-family: var(--serif); font-style: italic; color: var(--ink-30); }

/* ---------- Your laser families ---------- */
.fam-block { margin-top: var(--s5); border-top: 1px solid var(--ink); padding-top: var(--s4); }
.fam-block__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s4); }
.fam-block__head .byline { margin: 0; }
.fam-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0; background: var(--ivory); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.fam { padding: var(--s3); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.fam h4 { font-size: 1.05rem; margin: 0 0 .2rem; }
.fam__plain { font-family: var(--serif); font-style: italic; color: var(--gold-deep); font-size: .92rem; margin: 0 0 .5rem; }
.fam__for { font-size: .8rem; color: var(--ink-70); margin: 0; }
.fam__for span { font-size: .56rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-50); margin-right: .35rem; }
.fam__links { display: flex; gap: 1rem; margin-top: .8rem; }
.fam__links a { font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); text-decoration: none; border-bottom: 1px solid var(--gold-wash); }
.fam__links a:hover { border-bottom-color: var(--gold); }
.fam-block__note { font-size: .85rem; color: var(--ink-70); margin-top: var(--s4); max-width: 66ch; }

/* ---------- The Guide: the read, expandable ---------- */
.guide-entry__read { margin-top: .5rem; }
.guide-entry__read summary {
  font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-deep); cursor: pointer; list-style: none;
}
.guide-entry__read summary::-webkit-details-marker { display: none; }
.guide-entry__read summary::after { content: ' +'; }
.guide-entry__read[open] summary::after { content: ' \2212'; }
.guide-entry__read p {
  font-family: var(--serif); font-size: .92rem; line-height: 1.66;
  color: var(--ink-70); margin: .5rem 0 0; padding-left: .8rem;
  border-left: 1px solid var(--gold-wash);
}

@media (max-width: 1000px) {
  .scan-deck { grid-template-columns: 1fr; }
  .scan-frame { max-height: none; max-width: 420px; }
  .zone-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .zone-grid, .fam-list { grid-template-columns: 1fr; }
  .scan-awaiting { grid-template-columns: 1fr; }
  .scan-awaiting__glyph { width: 84px; }
  .scan-btns .btn, .scan-btns .scan-run { width: 100%; text-align: center; }
}

/* ---------- House pickers: no native select popups anywhere ---------- */
.pick-native {
  position: absolute !important;
  left: 0 !important; top: 0 !important;
  width: 1px !important; height: 1px !important;
  max-width: 1px !important; min-width: 0 !important;
  margin: -1px; padding: 0;
  border: 0; clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
  pointer-events: none;
}
.citypick--select .citypick__value { display: block; }
.citypick--suggest { position: relative; display: block; }
.citypick__panel--suggest { top: calc(100% + .3rem); }
.citypick__panel--suggest .citypick__list { margin-top: 0; max-height: 14rem; }
.result__on {
  display: block;
  font-family: var(--sans); font-style: normal;
  font-size: .5rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-30); margin-top: .3rem;
}

/* ===========================================================
   v3 · THE HOME FOR PERFECT SKIN
   Grouped nav, guided-journey home, pillars, wellness, Analysis
   =========================================================== */

/* ---------- Grouped nav ---------- */
.nav__list {
  display: flex; align-items: center;
  gap: clamp(.85rem, 1.7vw, 1.75rem);
  list-style: none; margin: 0; padding: 0;
}
.nav__item { position: relative; }
.nav__trigger {
  display: inline-flex; align-items: center; gap: .35em;
  background: none; border: 0; cursor: pointer;
  font-family: var(--sans);
  font-size: .7rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-70);
  padding: .35rem 0;
  border-bottom: 1px solid transparent;
  transition: color .25s ease, border-color .25s ease;
}
.nav__trigger:hover,
.nav__item.is-open > .nav__trigger,
.nav__trigger[data-current="true"] { color: var(--ink); border-bottom-color: var(--gold); }
.nav__caret { width: 5px; height: 5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-1px); transition: transform .25s ease; }
.nav__item.is-open .nav__caret { transform: rotate(225deg) translateY(-2px); }

.nav__panel {
  position: absolute; top: calc(100% + .6rem); left: 50%;
  transform: translateX(-50%) translateY(-5px);
  min-width: 13.5rem;
  background: var(--ivory);
  border: 1px solid var(--rule);
  box-shadow: 0 28px 46px -32px rgba(36, 28, 19, .45);
  padding: .95rem 1.15rem 1.05rem;
  opacity: 0; visibility: hidden;
  transition: opacity .24s ease, transform .24s ease, visibility .24s;
  z-index: 80;
}
.nav__item.is-open > .nav__panel { opacity: 1; visibility: visible; transform: translateX(-50%); }
.nav__panel::before {
  content: ""; position: absolute; left: 1.15rem; right: 1.15rem; top: 2.35rem;
  border-top: 1px solid var(--rule-soft);
}
.nav__panel-title {
  display: block; font-size: .6rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold-deep); margin-bottom: 1.05rem;
}
.nav__panel a {
  display: block; white-space: nowrap;
  font-family: var(--serif); font-size: 1rem; letter-spacing: 0; text-transform: none;
  color: var(--ink-70); padding: .34rem 0; border-bottom: 0;
}
.nav__panel a:hover, .nav__panel a[aria-current="page"] { color: var(--gold-deep); border-bottom: 0; }
.nav__panel a .nav-soon {
  font-family: var(--sans); font-size: .53rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-30); margin-left: .5em; vertical-align: .18em;
}

/* Mobile drawer mirrors the groups */
@media (max-width: 1180px) {
  .nav { padding-bottom: 2.4rem; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .nav__item { width: 100%; }
  .nav__trigger { display: none; }
  .nav__panel {
    position: static; transform: none; opacity: 1; visibility: visible;
    min-width: 0; border: 0; box-shadow: none; background: none;
    padding: 1.15rem 0 .35rem;
  }
  .nav__panel::before { display: none; }
  .nav__panel-title { margin-bottom: .35rem; }
  .nav__panel a { font-size: 1.22rem; padding: .6rem 0; border-bottom: 1px solid var(--rule); }
}
@media (min-width: 1181px) {
  .nav__list { gap: clamp(.7rem, 1.35vw, 1.6rem); }
  .nav > .nav__list > .nav__item > a,
  .nav__trigger { white-space: nowrap; font-size: .625rem; letter-spacing: .1em; }
  .nav__panel a { font-size: .96rem; }
}

/* ---------- Masthead, repositioned ---------- */
.masthead { padding-top: clamp(1.6rem, 3vw, 2.6rem); }
.masthead-eyebrow {
  display: block; font-size: .625rem; letter-spacing: .32em; text-transform: uppercase;
  color: var(--gold-deep); margin-bottom: clamp(.7rem, 1.4vw, 1.05rem);
}
.masthead-dek {
  max-width: 40ch;
  margin: clamp(.85rem, 1.5vw, 1.15rem) auto 0;
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.02rem, 1.5vw, 1.3rem); line-height: 1.5; color: var(--ink-70);
}
.masthead-cta {
  margin-top: clamp(1.1rem, 2vw, 1.6rem);
  display: flex; justify-content: center; flex-wrap: wrap; gap: .7rem;
}
.masthead-cta .btn { margin: 0; }

/* ---------- Your path ---------- */
.path { padding: var(--s5) 0 var(--s6); }
.path__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: var(--s4); }
.path__head h2 { font-size: clamp(1.6rem, 2.5vw, 2.15rem); }
.path__head p { margin: 0; font-family: var(--serif); font-style: italic; color: var(--ink-70); }
.path-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
}
.step {
  padding: var(--s4) clamp(1rem, 1.8vw, 1.6rem) var(--s4) 0;
  border-right: 1px solid var(--rule);
  display: flex; flex-direction: column; min-width: 0;
}
.step:last-child { border-right: 0; padding-right: 0; }
.step + .step { padding-left: clamp(1rem, 1.8vw, 1.6rem); }
.step__num {
  font-family: var(--serif); font-size: .7rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold-deep); margin-bottom: .9rem; display: block;
}
.step__num b { font-weight: 400; color: var(--ink-30); margin-right: .55em; }
.step h3 { font-size: 1.24rem; margin-bottom: .55rem; }
.step h3 small { display: block; font-family: var(--sans); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-50); margin-bottom: .5rem; }
.step p { font-size: .92rem; color: var(--ink-70); margin-bottom: 1rem; }
.step__foot { margin-top: auto; }
.step__foot a { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); text-decoration: none; border-bottom: 1px solid var(--gold-wash); }
.step__foot a:hover { border-bottom-color: var(--gold); }

/* ---------- The three pillars ---------- */
.pillars { padding: var(--s6) 0; background: var(--ivory-deep); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.pillar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.4rem, 2.6vw, 2.4rem); margin-top: var(--s4); }
.pillar { display: flex; flex-direction: column; min-width: 0; }
.pillar__figure { margin: 0 0 var(--s3); background: var(--tan); overflow: hidden; }
.pillar__figure img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .7s cubic-bezier(.22,.61,.36,1); }
.pillar:hover .pillar__figure img { transform: scale(1.03); }
.pillar__spec { font-size: .6rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-deep); display: block; margin-bottom: .5rem; }
.pillar h3 { font-size: 1.42rem; margin-bottom: .6rem; }
.pillar p { font-size: .93rem; color: var(--ink-70); }
.pillar__links { margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: .35rem .95rem; }
.pillar__links a { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-70); text-decoration: none; border-bottom: 1px solid transparent; }
.pillar__links a:hover { color: var(--gold-deep); border-bottom-color: var(--gold); }
.pillar__links span { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-30); }

/* ---------- Slim editorial strip ---------- */
.edit-strip { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(1.75rem, 3.5vw, 3.25rem); align-items: start; }
.edit-strip .edit-list li { padding: var(--s3) 0; }
.taketease { background: var(--blush); padding: clamp(1.4rem, 2.4vw, 2rem); border: 1px solid var(--rule-soft); }
.taketease h3 { font-size: 1.3rem; margin: .6rem 0 .7rem; }
.taketease p { font-size: .94rem; color: var(--ink-70); }
.taketease figure { margin: 0 0 var(--s3); background: var(--tan); }
.taketease figure img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

/* ---------- Wellness hub sections ---------- */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.75rem, 3.6vw, 3.25rem); align-items: center; }
.duo--flip .duo__figure { order: 2; }
.duo__figure { margin: 0; background: var(--tan); overflow: hidden; }
.duo__figure img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.duo__figure figcaption { font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-50); padding-top: .7rem; }
.duo__body h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: var(--s2); }
.duo__body p { color: var(--ink-70); }
.duo__body .kicker { margin-bottom: .5rem; }
.evidence {
  margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--rule);
  font-size: .84rem; color: var(--ink-50); line-height: 1.6;
}
.evidence b { font-family: var(--sans); font-weight: 500; font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); display: block; margin-bottom: .3rem; }
.evidence a { color: var(--ink-70); text-decoration: none; border-bottom: 1px solid var(--gold-wash); }
.evidence a:hover { border-bottom-color: var(--gold); }

/* ---------- The Analysis ---------- */
.drop {
  border: 1px dashed var(--ink-30);
  background: var(--ivory-deep);
  aspect-ratio: 4 / 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: .9rem; padding: clamp(1.25rem, 3vw, 2.25rem);
  position: relative; overflow: hidden;
  transition: border-color .25s ease, background .25s ease;
}
.drop.is-armed { border-color: var(--gold); }
.drop.is-over { border-color: var(--gold); background: var(--gold-wash); }
.drop.is-locked { opacity: .55; }
.drop svg { width: clamp(48px, 6vw, 66px); height: auto; color: var(--gold); }
.drop p { font-size: .92rem; color: var(--ink-70); max-width: 34ch; margin: 0; }
.drop img[hidden] { display: none; }
.drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.drop__inner { display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.drop.has-shot .drop__inner { display: none; }
.drop__file { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop.is-locked .drop__file { pointer-events: none; }

.concern-picks { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .3rem; }
.concern-pick {
  font-family: var(--sans); font-size: .63rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .5rem .8rem; border: 1px solid var(--rule); background: transparent; color: var(--ink-70);
  cursor: pointer; transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.concern-pick:hover { border-color: var(--gold); color: var(--ink); }
.concern-pick[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--ivory); }

.reading-card {
  border: 1px solid var(--ink); background: var(--ivory-deep);
  padding: clamp(1.4rem, 2.8vw, 2.35rem);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
}
.reading-card h3 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); margin-bottom: var(--s2); }
.reading-card p { color: var(--ink-70); }
.reading-card__side { border-left: 1px solid var(--rule); padding-left: clamp(1.25rem, 2.4vw, 2rem); }
.reading-card__side .kicker { margin-bottom: .55rem; }
.reading-card__side p { font-family: var(--serif); font-size: 1rem; line-height: 1.55; color: var(--ink); }

/* ---------- Bug fixes: balance and rhythm ---------- */
.lead-story {
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.75rem, 3.4vw, 3.25rem);
}
.lead-story__figure img { aspect-ratio: 4 / 5; max-height: 30rem; }
.lead-story__body { max-width: 62ch; }
.figure-strip img { height: clamp(190px, 24vw, 300px); }
.section { padding: var(--s6) 0; }
.section--tight { padding: var(--s5) 0; }
.section--after-hero { padding-top: var(--s4); }
.site-footer { margin-top: var(--s6); padding: var(--s5) 0 var(--s4); }
.pullquote { padding: var(--s5) 0; }
.band { padding: var(--s5) 0; }

/* ---------- Compact footer with the nav groups ---------- */
.footer-grid { grid-template-columns: minmax(0, 1.25fr) repeat(4, minmax(0, .75fr)); gap: clamp(1.4rem, 2.6vw, 2.6rem); }
.footer-grid ul { gap: .38rem; }
.footer-grid a { font-size: .86rem; }
.footer-grid h4 { margin-bottom: .8rem; }
.footer-brand p { font-size: .88rem; margin-top: var(--s2); max-width: 32ch; }
.footer-note { font-size: .86rem; color: var(--ink-30); }

@media (max-width: 1080px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 1000px) {
  .path-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step { border-bottom: 1px solid var(--rule); }
  .step:nth-child(2n) { border-right: 0; padding-right: 0; }
  .step:nth-child(2n+1) { padding-left: 0; }
  .step:nth-last-child(-n+2) { border-bottom: 0; }
  .pillar-grid { grid-template-columns: 1fr; gap: var(--s5); }
  .edit-strip { grid-template-columns: 1fr; }
  .duo, .reading-card { grid-template-columns: 1fr; }
  .duo--flip .duo__figure { order: 0; }
  .reading-card__side { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; padding-top: var(--s3); }
}
@media (max-width: 620px) {
  .path-grid { grid-template-columns: 1fr; }
  .step, .step + .step { padding-left: 0; padding-right: 0; border-right: 0; }
  .step:last-child { border-bottom: 0; }
  .masthead-cta .btn { width: 100%; text-align: center; }
}

.nav__soonitem { display: block; font-family: var(--serif); font-size: 1rem; color: var(--ink-30); padding: .34rem 0; white-space: nowrap; }
@media (max-width: 1180px) { .nav__soonitem { font-size: 1.22rem; padding: .6rem 0; border-bottom: 1px solid var(--rule); } }

/* Wellness hub: in-page jump links under the hero */
.page-hero__jump { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: var(--s3); }
.page-hero__jump a {
  font-family: var(--sans); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-50); text-decoration: none; border-bottom: 1px solid var(--rule);
  padding-bottom: .25rem;
}
.page-hero__jump a:hover { color: var(--gold-deep); border-bottom-color: var(--gold); }

/* Standing-by note: two columns so it fills the measure at wide viewports */
.scan-note {
  border-left: 0; padding-left: 0;
  border-top: 1px solid var(--rule);
  padding-top: var(--s3);
  display: grid; grid-template-columns: minmax(0, .32fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: start;
}
.scan-note p { max-width: 74ch; margin: 0; }
@media (max-width: 780px) { .scan-note { grid-template-columns: 1fr; gap: .5rem; } }

/* Compass: a touch more presence at wide viewports */
@media (min-width: 1200px) {
  .quiz-progress { max-width: 54rem; }
  .quiz-card { max-width: 54rem; padding: clamp(2rem, 3.2vw, 3rem); }
}

/* Editorial prose blocks: a centred measure rather than a stranded left column */
.prose { max-width: 70ch; margin-inline: auto; }
.prose > h2 { margin-top: var(--s4); }
.prose > h2:first-child { margin-top: 0; }
@media (min-width: 1200px) { .prose { max-width: 72ch; } }

.checklist--wide { max-width: 78ch; margin-inline: auto; }
.serif-note--centred { max-width: 64ch; margin-inline: auto; text-align: center; }

/* The Insights: three instruments, three columns, no stranded card */
.instruments__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.instrument-card:nth-child(3n) { border-right: 0; padding-right: 0; }
.instrument-card:nth-child(3n+1) { padding-left: 0; }
@media (max-width: 1080px) and (min-width: 861px) {
  .instruments__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .instrument-card:nth-child(2n) { border-right: 1px solid var(--rule); padding-right: clamp(1.1rem, 2.2vw, 2rem); }
  .instrument-card:nth-child(2n+1) { padding-left: clamp(1.1rem, 2.2vw, 2rem); }
  .instrument-card:nth-child(3n) { border-right: 0; padding-right: 0; }
  .instrument-card:nth-child(3n+1) { padding-left: 0; }
  .instrument-card:nth-child(-n+2) { border-bottom: 0; }
}

/* Keep the earlier stacking rules winning over the v3 balance rules */
@media (max-width: 1000px) {
  .lead-story { grid-template-columns: 1fr; }
  .lead-story__figure img { aspect-ratio: 16 / 10; max-height: 26rem; }
  .lead-story__body { max-width: none; }
}

/* Odd-count card bands stack rather than strand a lone card */
@media (max-width: 900px) {
  .card-grid:has(> :last-child:nth-child(3)),
  .card-grid:has(> :last-child:nth-child(5)) { grid-template-columns: 1fr; }
}

/* ---------- The Verdict ---------- */
.verdict-hero { padding: clamp(2.75rem, 6vw, 4.5rem) 0 0; text-align: center; }
.verdict-hero h1 { margin-bottom: var(--s3); }
.verdict-hero .lede { max-width: 52ch; margin: 0 auto; }
.verdict-hero__stats {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
  gap: .55rem 1rem; margin-top: var(--s4);
  font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-50);
}
.verdict-hero__stats b { font-family: var(--serif); font-size: 1.15em; letter-spacing: .04em; color: var(--ink); font-weight: 500; }
.verdict-hero__stats i { width: 3px; height: 3px; border-radius: 50%; background: var(--gold); display: inline-block; }

.vd-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3); align-items: end; }
.vd-count { font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-50); white-space: nowrap; }

.vd-group { margin-top: var(--s6); }
.vd-group:first-child { margin-top: 0; }
.vd-group[hidden] { display: none; }
.vd-group__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  flex-wrap: wrap; padding-bottom: var(--s2); border-bottom: 1px solid var(--ink);
}
.vd-group__head h2 { font-size: clamp(1.3rem, 2.2vw, 1.75rem); }
.vd-group__note { font-family: var(--serif); font-style: italic; color: var(--ink-70); margin: .25rem 0 0; font-size: .98rem; }
.vd-group__count { font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-50); white-space: nowrap; }

.vd-list { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: clamp(1rem, 2vw, 1.4rem); }
.vd-card {
  background: #fff; border: 1px solid var(--rule);
  padding: clamp(1.2rem, 2.4vw, 1.9rem);
  transition: border-color .3s ease;
}
.vd-card:hover { border-color: var(--gold); }
.vd-card[hidden] { display: none; }
.vd-card__head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3);
  align-items: start; padding-bottom: var(--s3); border-bottom: 1px solid var(--rule-soft);
}
.vd-card__name { font-size: clamp(1.18rem, 2vw, 1.5rem); margin: 0 0 .35rem; }
.vd-card__meta { font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-50); margin: 0; line-height: 1.7; }

.vd-chip {
  display: inline-block; white-space: nowrap;
  font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 500;
  padding: .4rem .7rem; border: 1px solid var(--rule); background: var(--ivory);
  color: var(--ink-70);
}
.vd-chip--consensus { border-color: var(--gold); background: var(--gold-wash); color: var(--gold-deep); }
.vd-chip--recommended { border-color: var(--ink); background: var(--ink); color: var(--ivory); }
.vd-chip--conditional { border-color: var(--ink-30); background: var(--ivory-deep); color: var(--ink-50); }
.vd-chip--contested { border-color: var(--ink-30); background: #fff; color: var(--ink-70); }
.vd-chip--skip { border-color: #B4715C; background: var(--blush); color: #8E4E38; }

.vd-meter { margin: var(--s3) 0 var(--s3); max-width: 30rem; }
.vd-meter__scale {
  display: flex; justify-content: space-between;
  font-size: .55rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-30);
  margin-bottom: .4rem;
}
.vd-meter__track { position: relative; height: 3px; background: rgba(36,28,19,.10); }
.vd-meter__zero { position: absolute; left: 50%; top: -3px; width: 1px; height: 9px; background: var(--ink-30); }
.vd-meter__fill { position: absolute; top: 0; height: 3px; background: var(--gold); }
.vd-meter__fill--against { background: #B4715C; }
.vd-meter__dot {
  position: absolute; top: -2.5px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold); margin-left: -4px;
}
.vd-meter__dot--against { background: #B4715C; }
.vd-meter__value {
  display: block; margin-top: .45rem;
  font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-50);
}
.vd-meter__value b { font-family: var(--serif); font-size: 1.2em; letter-spacing: .04em; color: var(--ink); font-weight: 500; }

.vd-stances { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--rule-soft); }
.vd-stance { padding: var(--s3) 0; border-bottom: 1px solid var(--rule-soft); }
.vd-stance:last-child { border-bottom: 0; padding-bottom: 0; }
.vd-stance__line { margin: 0; font-size: .97rem; color: var(--ink-70); line-height: 1.65; }
.vd-stance__who { font-family: var(--serif); font-weight: 500; color: var(--ink); font-size: 1.04rem; }
.vd-stance__sep { color: var(--ink-30); margin: 0 .4em; }
.vd-stance__verdict { font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); }
.vd-stance__verdict--against { color: #8E4E38; }
.vd-stance__verdict--neutral, .vd-stance__verdict--conditional { color: var(--ink-50); }
.vd-stance__foot { margin: .5rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .7rem; }
.vd-receipt {
  font-size: .8rem; color: var(--gold-deep); text-decoration: none;
  border-bottom: 1px solid var(--gold-wash); max-width: 62ch; line-height: 1.5;
}
.vd-receipt:hover { border-bottom-color: var(--gold); }
.vd-receipt::before { content: "\2197"; margin-right: .35em; color: var(--ink-30); }
.vd-flag {
  white-space: nowrap;
  font-size: .53rem; letter-spacing: .16em; text-transform: uppercase;
  padding: .22rem .45rem; border: 1px solid var(--rule); color: var(--ink-50); background: var(--ivory);
}
.vd-flag--sponsored { border-color: rgba(180,113,92,.55); color: #8E4E38; background: var(--blush); }
.vd-flag--own { border-color: var(--gold); color: var(--gold-deep); background: var(--gold-wash); }
.vd-stance__ctx { margin: .45rem 0 0; font-size: .78rem; color: var(--ink-50); font-style: italic; font-family: var(--serif); }

.vd-also { margin-top: var(--s6); border-top: 1px solid var(--ink); padding-top: var(--s3); }
.vd-also__list { list-style: none; margin: var(--s3) 0 0; padding: 0; }
.vd-also__list li {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .9fr) auto;
  gap: var(--s3); align-items: baseline;
  padding: .62rem 0; border-bottom: 1px solid var(--rule-soft);
}
.vd-also__list li[hidden] { display: none; }
.vd-also__name { font-family: var(--serif); font-size: 1rem; }
.vd-also__who { font-size: .8rem; color: var(--ink-70); }
.vd-also__verdict { font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-50); white-space: nowrap; }
.vd-empty { font-family: var(--serif); font-style: italic; color: var(--ink-70); padding: var(--s4) 0; }

.trust-band { background: var(--ink); color: var(--ivory); padding: var(--s6) 0; border-top: 1px solid var(--ink); }
.trust-band .kicker { color: #E2B487; }
.trust-band h2 { color: var(--ivory); }
.trust-band__head { max-width: 60ch; margin: 0 auto var(--s5); text-align: center; }
.trust-band__head p { color: rgba(251, 247, 241, .74); font-size: 1rem; margin: var(--s2) 0 0; }
.trust-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; }
.trust-card {
  background: var(--ink); padding: clamp(1.1rem, 2.2vw, 1.6rem);
  display: flex; flex-direction: column; gap: .5rem;
  box-shadow: 0 0 0 1px rgba(251, 247, 241, .14);
}
.trust-card h3 { font-size: 1.12rem; color: var(--ivory); display: flex; align-items: center; gap: .45rem; }
.trust-card h3 .sunburst { color: #E2B487; flex: none; }
.trust-card__title { font-size: .8rem; color: rgba(251, 247, 241, .68); margin: 0; line-height: 1.55; }
.trust-card__base { font-size: .58rem; letter-spacing: .17em; text-transform: uppercase; color: rgba(251, 247, 241, .5); }
.trust-card__desc { font-family: var(--serif); font-style: italic; font-size: .93rem; color: rgba(251, 247, 241, .82); margin: 0; line-height: 1.5; }
.trust-card__tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.trust-tag {
  font-size: .53rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .2rem .42rem; border: 1px solid rgba(251,247,241,.22); color: rgba(251,247,241,.66);
}
.trust-card__ci { font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: #E2B487; margin-top: auto; padding-top: .4rem; }
.trust-card__anchor { font-size: .55rem; letter-spacing: .18em; text-transform: uppercase; color: #E2B487; }
.trust-band__note { text-align: center; margin: var(--s4) auto 0; max-width: 62ch; font-size: .9rem; color: rgba(251, 247, 241, .6); }

.cross-band { background: var(--blush); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); padding: var(--s6) 0; }
.cross-band__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.cross-band h2 { font-size: clamp(1.5rem, 2.7vw, 2.2rem); margin-bottom: var(--s3); }
.cross-band p { font-size: 1rem; color: var(--ink-70); max-width: 54ch; margin: 0; }

@media (max-width: 1000px) {
  .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .vd-card__head { grid-template-columns: minmax(0, 1fr); }
  .vd-card__head .vd-chip { justify-self: start; }
  .vd-bar { grid-template-columns: minmax(0, 1fr); }
  .vd-also__list li { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
  .trust-grid { grid-template-columns: minmax(0, 1fr); }
  .cross-band__grid { grid-template-columns: minmax(0, 1fr); }
  .vd-receipt { max-width: 100%; }
}