/* indu 101.
   Lifted from the concept they approved. The one change is width: a room page
   is as wide as the window, so --maxw is none and the reading-column caps are
   gone. Their gutter (--pad) is theirs and stays.
   Enforced by scripts/room-width-test.mjs. */
/* ============================================================
   indu 101 concept — design tokens
   Layering:
   1. primitives — the ONLY place raw brand literals live
      (values lifted from weareindu.com's own CSS variables)
   2. semantic roles — what components are allowed to reference
   3. components — never touch a literal below this line
   ============================================================ */

@font-face { font-family: "Contempora Sans"; src: url("fonts/ContemporaSans-BoldCondensed.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geograph"; src: url("fonts/geograph-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geograph"; src: url("fonts/geograph-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  /* ---- 1. primitives (raw literals live here and nowhere else) ---- */
  --indu-purple-500: #bb29bb;   /* brand fill */
  --indu-purple-700: #8f1a8f;   /* on-surface sibling: text/strokes on cream */
  --indu-lilac-100: #f8e9fa;
  --indu-lilac-200: #f0d3f4;    /* brand tint surface */
  --indu-aqua-200: #cce8ec;     /* secondary tint surface */
  --indu-cream-0: #fffaf7;      /* canvas */
  --indu-ink-900: #212d2e;      /* ink */
  --indu-orange-500: #da760a;   /* hover accent (theirs) */
  --indu-white-0: #ffffff;
  --indu-overlay-ink-8: rgba(33, 45, 46, .08);
  --indu-overlay-ink-14: rgba(33, 45, 46, .14);
  --indu-overlay-ink-25: rgba(33, 45, 46, .25);
  --indu-overlay-ink-50: rgba(33, 45, 46, .50);
  --indu-overlay-ink-62: rgba(33, 45, 46, .62);
  --indu-overlay-ink-80: rgba(33, 45, 46, .80);
  --indu-overlay-white-20: rgba(255, 255, 255, .20);
  --indu-overlay-white-55: rgba(255, 255, 255, .55);
  --indu-overlay-white-80: rgba(255, 255, 255, .82);

  /* ---- 2. semantic roles ---- */
  --surface-base: var(--indu-white-0);   /* pure white canvas: the brightness of the real indu page */
  --surface-raised: var(--indu-white-0);
  --surface-cream: var(--indu-cream-0);
  --surface-tint: var(--indu-lilac-200);
  --surface-tint-soft: var(--indu-lilac-100);
  --surface-tint-2: var(--indu-aqua-200);
  --surface-invert: var(--indu-ink-900);

  /* The four names every room defines, because the Worker injects one
     more-contrast rule into all of them and it moves exactly these. Defining
     them is not enough on its own: this page's own tokens have to READ them,
     or the override would move a variable nothing renders from and the rule
     would pass a test while doing nothing. See src/prefers.js. */
  --ink: var(--indu-ink-900);
  --muted: var(--indu-overlay-ink-62);
  --faint: var(--indu-overlay-ink-50);
  --line: var(--indu-overlay-ink-8);

  --text-primary: var(--ink);
  --text-muted: var(--muted);
  --text-faint: var(--faint);
  --text-on-invert: var(--indu-cream-0);
  --text-on-invert-muted: var(--indu-overlay-white-55);
  --text-on-brand: var(--indu-white-0);

  --brand-fill: var(--indu-purple-500);
  --brand-on-surface: var(--indu-purple-700); /* brand-coloured TEXT uses this */
  --brand-hover: var(--indu-orange-500);

  --border-subtle: var(--line);   /* hairlines do the separating */
  --border-strong: var(--indu-overlay-ink-25);  /* interactive edges */

  --radius-card: 4px;        /* containers: almost fully pointy */
  --radius-pill: 999px;      /* actions + chips: indu's control language IS the pill */

  --motion-fast: 140ms;      /* hover/press */
  --motion-slow: 420ms;      /* reveals/media */
  --ease: cubic-bezier(.22, .8, .32, 1);

  --shadow-pop: 0 14px 30px -16px var(--indu-overlay-ink-25);
  --shadow-offset: var(--surface-tint);
  --indu-gray-100: #f4f4f5;
  --surface-end: var(--indu-gray-100);   /* light gray page end, blends past the footer */

  --display: "Contempora Sans", "Arial Narrow", sans-serif;
  --body: "Geograph", "Helvetica Neue", sans-serif;
  --pad: clamp(20px, 4vw, 56px);
  --maxw: none;
}

/* ============================================================
   3. components — semantic tokens only from here down
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--surface-end); }
html, body { overflow-x: clip; }
body { font-family: var(--body); background: var(--surface-base); color: var(--text-primary); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-weight: 400; }
button { font-family: var(--body); color: var(--text-primary); touch-action: manipulation; }
a, button { -webkit-tap-highlight-color: transparent; }


/* ---------- masthead ---------- */
.masthead { position: sticky; top: 0; z-index: 50; padding: 16px 0; background: color-mix(in srgb, var(--surface-base) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-subtle); }
.masthead__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
/* Baseline alignment: the img's bottom edge IS its flex baseline, and the u sits on the
   wordmark's bottom edge, so locking baselines seats the digits on the u in every browser
   (the old line-height crop + px nudge rendered differently in Safari vs Chrome). */
.masthead__logo { display: flex; align-items: baseline; gap: 8px; }
.masthead__logo img { height: 26px; width: auto; }
/* digit cap height = u height at this size; brand purple, same as the wordmark */
.masthead__lockup { font-family: var(--display); font-size: 27px; line-height: 1; color: var(--brand-fill); letter-spacing: .02em; }
/* 101 is its own page: the only masthead link is the one door back to the shop,
   and it sits left of the heart. It used to inherit its type from .masthead__nav,
   so it carries its own now. */
.masthead__shop { color: var(--brand-on-surface); display: inline-flex; align-items: center; gap: 5px; font-weight: 500; font-size: 14px; letter-spacing: .04em; padding: 4px 0; transition: opacity var(--motion-fast); }
.masthead__shop:hover { opacity: .7; }
.masthead__tools { display: flex; align-items: center; gap: 16px; }
.myreads-btn { position: relative; display: flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: 8px 14px; cursor: pointer; transition: border-color var(--motion-fast), background var(--motion-fast), color var(--motion-fast); }
.myreads-btn:hover { border-color: var(--brand-fill); color: var(--brand-on-surface); }
.myreads-btn.is-pop { animation: pop .35s var(--ease); }
.myreads-count { font-size: 12.5px; font-weight: 500; }
@keyframes pop { 40% { transform: scale(1.18); } }

/* ---------- my reads drawer ---------- */
.myreads { position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 92vw); z-index: 80; background: var(--surface-raised); border-left: 1px solid var(--border-subtle); box-shadow: var(--shadow-pop); padding: 26px 26px 30px; transform: translateX(102%); transition: transform .3s var(--ease); overflow-y: auto; }
.myreads.is-open { transform: none; }
.myreads__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.myreads__head h3 { font-family: var(--display); text-transform: uppercase; font-size: 26px; }
.myreads__head button { background: none; border: 0; font-size: 26px; cursor: pointer; line-height: 1; color: var(--text-muted); }
.myreads__empty { font-size: 14px; color: var(--text-muted); }
.myreads__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-subtle); font-size: 14.5px; font-weight: 500; }
.myreads__item a:hover { color: var(--brand-on-surface); }
.myreads__item button { background: none; border: 0; cursor: pointer; color: var(--text-faint); font-size: 18px; line-height: 1; }
.myreads__item button:hover { color: var(--brand-on-surface); }

/* ---------- stickers + squiggle ---------- */
.sticker { position: absolute; top: 12px; left: 12px; z-index: 2; font-family: var(--display); text-transform: uppercase; font-size: 13.5px; letter-spacing: .08em; background: var(--brand-fill); color: var(--text-on-brand); padding: 7px 14px; border-radius: var(--radius-pill); transform: rotate(-4deg); box-shadow: 0 4px 12px -4px var(--indu-overlay-ink-25); }
.sticker--hero { top: 18px; left: -14px; font-size: 16px; transform: rotate(-7deg); }
.sticker--flat { position: static; display: inline-block; transform: rotate(-3deg); margin-bottom: 18px; }
.card:hover .sticker { animation: wiggle .45s var(--ease); }
@keyframes wiggle { 30% { transform: rotate(2deg); } 60% { transform: rotate(-6deg); } 100% { transform: rotate(-4deg); } }
.squiggle { display: block; width: min(220px, 60%); height: 12px; color: var(--brand-fill); margin-top: 8px; }
.squiggle path { stroke-dasharray: 240; stroke-dashoffset: 240; }
.reveal.is-in .squiggle path { animation: draw .9s var(--ease) .15s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- shared ---------- */
main { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.chip { display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; background: var(--surface-tint); color: var(--brand-on-surface); padding: 5px 12px; border-radius: var(--radius-pill); }
:focus-visible { outline: 2px solid var(--brand-fill); outline-offset: 2px; }
.chip--purple { background: var(--brand-fill); color: var(--text-on-brand); }
.chip--light { background: var(--indu-overlay-white-20); color: var(--text-on-brand); }
.btn { display: inline-block; font-family: var(--body); font-weight: 500; font-size: 15px; letter-spacing: .03em; background: var(--brand-fill); color: var(--text-on-brand); padding: 14px 34px; border-radius: var(--radius-pill); border: 0; cursor: pointer; transition: background var(--motion-fast), transform var(--motion-fast); }
.btn:hover { background: var(--brand-hover); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }

.section { padding: clamp(40px, 6vw, 84px) 0 0; }
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; scroll-margin-top: 90px; }
.section__title { font-family: var(--display); font-size: clamp(30px, 4.2vw, 54px); text-transform: uppercase; letter-spacing: .01em; line-height: .95; }
.section__sub { margin-top: 10px; color: var(--text-muted); font-size: 15px; }

/* ---------- hero ---------- */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(36px, 6vw, 90px) 0 clamp(28px, 4vw, 56px); }
.hero__meta { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--text-faint); margin-bottom: 22px; }
.hero__title { font-family: var(--display); font-size: clamp(42px, 6.2vw, 92px); line-height: .92; text-transform: uppercase; margin-bottom: 22px; }
.hero__title .w { display: inline-block; opacity: 0; transform: translateY(.35em) rotate(1.5deg); animation: wordin .55s var(--ease) forwards; animation-delay: calc(var(--i) * 70ms); }
@keyframes wordin { to { opacity: 1; transform: none; } }
.hero__dek { font-size: clamp(16px, 1.4vw, 19px); color: var(--text-muted); margin-bottom: 30px; }
.hero__media { position: relative; z-index: 1; }
.hero__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-card); box-shadow: 20px 20px 0 var(--shadow-offset); transition: transform var(--motion-slow) var(--ease); }
.hero__media a:hover img { transform: scale(1.015) rotate(-.4deg); }
.hero__watermark { position: absolute; right: -0.05em; bottom: -0.18em; z-index: 0; font-family: var(--display); font-size: clamp(140px, 22vw, 340px); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--brand-fill) 18%, transparent); pointer-events: none; user-select: none; }

/* ---------- ticker ---------- */
.ticker { overflow: hidden; background: var(--brand-fill); color: var(--text-on-brand); margin: clamp(24px, 4vw, 48px) 0 0; padding: 10px 0; border-radius: var(--radius-card); }
.ticker__track { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; animation: ticker 46s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__track button { font-family: var(--display); text-transform: uppercase; font-size: 17px; letter-spacing: .08em; background: none; border: 0; color: inherit; cursor: pointer; padding: 4px 10px; border-radius: var(--radius-pill); transition: background var(--motion-fast); }
.ticker__track button:hover { background: var(--indu-overlay-white-20); }
.ticker__track i { font-style: normal; opacity: .55; font-size: 13px; margin-right: 10px; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- cards ---------- */
.grid { display: grid; gap: clamp(20px, 2.4vw, 36px); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { position: relative; display: flex; flex-direction: column; border-radius: var(--radius-card); overflow: hidden; background: var(--surface-raised); border: 1px solid var(--border-subtle); box-shadow: 0 1px 2px var(--indu-overlay-ink-8); transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease); }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); border-color: var(--border-strong); }
.card__link { position: absolute; inset: 0; z-index: 1; }
.card__media { position: relative; overflow: hidden; aspect-ratio: 3 / 2; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--motion-slow) var(--ease); }
.card:hover .card__media img { transform: scale(1.05); }
.card__body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 24px; }
.card__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card__date { font-size: 12px; color: var(--text-faint); }
.card__title { font-family: var(--display); font-size: 23px; line-height: 1.04; letter-spacing: .012em; text-transform: uppercase; }
.card__excerpt { font-size: 13.5px; line-height: 1.55; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card--edit .card__title { font-size: 26px; }
.card--quiz .card__excerpt { display: none; }

/* save heart */
.save { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--indu-overlay-white-80); color: var(--text-primary); cursor: pointer; transition: transform var(--motion-fast), background var(--motion-fast), color var(--motion-fast); }
.save:hover { transform: scale(1.12); }
.save.is-saved { background: var(--brand-fill); color: var(--text-on-brand); animation: pop .35s var(--ease); }
.save.is-saved svg { fill: currentColor; }

/* ---------- rails ---------- */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(240px, 27vw, 350px); gap: clamp(16px, 2vw, 28px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 14px; scrollbar-width: none; counter-reset: railnum; }
.rail::-webkit-scrollbar { display: none; }
.rail .card { scroll-snap-align: start; }
.rail[data-numbered] .card { counter-increment: railnum; }
.rail[data-numbered] .card__media::after { content: counter(railnum, decimal-leading-zero); position: absolute; top: 12px; left: 12px; font-family: var(--display); font-size: 15px; letter-spacing: .06em; background: var(--surface-base); color: var(--brand-on-surface); padding: 4px 10px; border-radius: var(--radius-pill); }
.rail__ctl { display: flex; gap: 10px; }
.rail__btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border-strong); background: transparent; font-size: 16px; cursor: pointer; transition: background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast); }
.rail__btn:hover { background: var(--brand-fill); border-color: var(--brand-fill); color: var(--text-on-brand); }

/* ---------- quiz ---------- */
.quiz { background: var(--surface-tint-soft); border-radius: var(--radius-card); padding: clamp(30px, 4.5vw, 60px); margin-top: clamp(48px, 6vw, 84px); }
.quiz__intro h2 { font-family: var(--display); text-transform: uppercase; font-size: clamp(34px, 4.6vw, 60px); line-height: .93; }
.quiz__intro p { margin: 14px 0 26px; color: var(--text-muted); }
.quiz__opts { display: flex; flex-wrap: wrap; gap: 12px; }
.quiz__opt { font-family: var(--display); text-transform: uppercase; font-size: clamp(17px, 1.6vw, 22px); letter-spacing: .04em; background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: 14px 26px; cursor: pointer; transition: background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast), transform var(--motion-fast); }
.quiz__opt:hover { border-color: var(--brand-fill); color: var(--brand-on-surface); transform: rotate(-1deg); }
.quiz__opt.is-active { background: var(--surface-invert); border-color: var(--surface-invert); color: var(--text-on-invert); }
.quiz__results { margin-top: 26px; }
.quiz__set .grid { animation: rise .5s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
.quiz__retake { margin-top: 22px; background: none; border: 0; cursor: pointer; font-weight: 500; font-size: 14px; color: var(--brand-on-surface); border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* ---------- expert band ---------- */
.expert { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: clamp(24px, 3vw, 48px); align-items: center; background: var(--brand-fill); color: var(--text-on-brand); border-radius: var(--radius-card); padding: clamp(28px, 4vw, 56px); margin-top: clamp(48px, 6vw, 84px); scroll-margin-top: 90px; }
.expert__feature h2 { font-family: var(--display); font-size: clamp(32px, 3.6vw, 52px); text-transform: uppercase; line-height: .95; margin: 16px 0 14px; }
.expert__feature p { color: var(--indu-overlay-white-80); font-size: 15px; }
.expert__cta { display: inline-block; margin-top: 22px; font-weight: 500; border-bottom: 2px solid var(--surface-tint); padding-bottom: 3px; transition: color var(--motion-fast); }
.expert__cta:hover { color: var(--surface-tint); }
.expert__media { position: relative; }
.expert__media .sticker { background: var(--surface-base); color: var(--brand-on-surface); }
.expert__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-card); }
.expert__list { display: flex; flex-direction: column; }
.expert__item { display: flex; flex-direction: column; gap: 3px; padding: 16px 0; border-bottom: 1px solid var(--indu-overlay-white-20); }
.expert__item:first-child { padding-top: 0; }
.expert__item:hover .expert__q { color: var(--surface-tint); }
.expert__q { font-weight: 500; font-size: 15.5px; line-height: 1.35; transition: color var(--motion-fast); }
.expert__d { font-size: 12px; color: var(--text-on-invert-muted); }

/* ---------- ranges ---------- */
.ranges { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 36px); }
.range { position: relative; border-radius: var(--radius-card); overflow: hidden; background: var(--surface-tint-2); transition: transform .28s var(--ease), box-shadow .28s var(--ease); }
.range:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); }
.range img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform var(--motion-slow) var(--ease); }
.range:hover img { transform: scale(1.04); }
.range__body { padding: 22px 24px 26px; }
.range__body h3 { font-family: var(--display); text-transform: uppercase; font-size: 24px; line-height: 1; margin-bottom: 8px; }
.range__body p { font-size: 14px; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.range__go { display: inline-block; margin-top: 14px; font-weight: 500; font-size: 14px; color: var(--brand-on-surface); }

/* ---------- newsletter ---------- */
.newsletter { text-align: center; background: var(--surface-tint); border-radius: var(--radius-card); padding: clamp(40px, 5vw, 72px) var(--pad); margin-top: clamp(48px, 6vw, 84px); }
.newsletter h2 { font-family: var(--display); text-transform: uppercase; font-size: clamp(30px, 4vw, 52px); line-height: .95; }
.newsletter p { margin: 12px 0 26px; color: var(--text-muted); }
.newsletter__form { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.newsletter__form input { font-family: var(--body); font-size: 15px; padding: 13px 22px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: var(--surface-raised); min-width: min(320px, 80vw); outline-color: var(--brand-fill); }

/* ---------- archive: filters + search + shuffle ---------- */
.archive__tools { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-bottom: 30px; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; }
/* asymmetric padding: Geograph's tall ascent seats mixed-case text low in the
   line box, so equal padding reads bottom-heavy — 2px shifted top-to-bottom */
.filter { font-weight: 500; font-size: 13px; letter-spacing: .04em; padding: 7px 20px 11px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: transparent; cursor: pointer; transition: background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast); }
.filter:hover { border-color: var(--brand-fill); color: var(--brand-on-surface); }
.filter.is-active { background: var(--surface-invert); border-color: var(--surface-invert); color: var(--text-on-invert); }
.archive__search { display: flex; gap: 10px; align-items: center; }
.archive__search input { font-family: var(--body); font-size: 14px; padding: 10px 18px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: var(--surface-raised); width: min(260px, 60vw); outline-color: var(--brand-fill); }
.shuffle { font-weight: 500; font-size: 13.5px; padding: 10px 18px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: transparent; cursor: pointer; transition: background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast), transform var(--motion-fast); }
.shuffle:hover { background: var(--brand-fill); border-color: var(--brand-fill); color: var(--text-on-brand); transform: rotate(-1.5deg); }
#archive .card.is-hidden { display: none; }
#archive .card.is-spotlit { outline: 3px solid var(--brand-fill); outline-offset: 3px; }
.archive__none { color: var(--text-muted); padding: 30px 0; }

/* ---------- article ---------- */
.article__progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--brand-fill); z-index: 100; }
/* THE ONE EXCEPTION to a room page being as wide as the window, and it is
   his, 16 Aug: running article prose keeps a measure. Full width put a
   story body at about 190 characters a line on a laptop, which is the one
   place the reading column was doing real work rather than shrinking a
   page for no reason. It applies to the story itself, nothing else on the
   page, and it is in px because it is a measured column rather than a
   ch cap. Do not widen it back. */
.article__head { max-width: 820px; margin: 0 auto; padding: clamp(40px, 6vw, 80px) 0 30px; text-align: center; }
.article__head .hero__meta { justify-content: center; }
.article__head h1 { font-family: var(--display); font-size: clamp(38px, 5.4vw, 76px); line-height: .94; text-transform: uppercase; margin-bottom: 18px; }
.article__dek { font-size: 18px; color: var(--text-muted); margin: 0 auto; }
.article__hero { position: relative; margin: 24px calc(-1 * min(var(--pad), 40px)) 0; }
.article__hero .sticker--hero { left: 26px; }
.article__hero img { width: 100%; max-height: 620px; object-fit: cover; border-radius: var(--radius-card); }
.article__body { max-width: 720px; margin: 0 auto; padding-top: clamp(32px, 4vw, 56px); font-size: 17px; }
.article__body p { margin-bottom: 22px; color: var(--indu-overlay-ink-80); }
.article__body a { color: var(--brand-on-surface); border-bottom: 1px solid color-mix(in srgb, var(--brand-fill) 40%, transparent); transition: color var(--motion-fast), border-color var(--motion-fast); }
.article__body a:hover { color: var(--brand-fill); border-color: currentColor; }
.article__body h2 { font-family: var(--display); text-transform: uppercase; font-size: clamp(26px, 3vw, 38px); line-height: 1; margin: 44px 0 16px; display: flex; align-items: baseline; gap: 14px; }
.article__body h2 span { font-size: .55em; color: var(--brand-on-surface); letter-spacing: .06em; }
.article__body blockquote { font-family: var(--display); text-transform: uppercase; font-size: clamp(24px, 2.8vw, 34px); line-height: 1.05; color: var(--brand-on-surface); border-left: 4px solid var(--surface-tint); padding: 6px 0 6px 24px; margin: 36px 0; }
.product { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--surface-tint-2); border-radius: var(--radius-card); padding: 22px 26px; margin: 34px 0; transition: transform var(--motion-fast); }
.product:hover { transform: translateY(-3px); }
.product__label { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); }
.product h4 { font-family: var(--display); text-transform: uppercase; font-size: 24px; line-height: 1; margin: 6px 0 4px; }
.product p { font-size: 13.5px; color: var(--text-muted); margin: 0; }
.product__go { font-weight: 500; color: var(--brand-on-surface); white-space: nowrap; }

/* reactions */
.react { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--border-subtle); margin-top: 40px; padding-top: 26px; }
.react__label { font-family: var(--display); text-transform: uppercase; font-size: 17px; letter-spacing: .06em; margin-right: 6px; }
.react__btn { display: flex; align-items: center; gap: 8px; font-size: 19px; background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: 9px 18px; cursor: pointer; transition: border-color var(--motion-fast), transform var(--motion-fast), background var(--motion-fast); }
.react__btn i { font-style: normal; font-size: 13px; font-weight: 500; color: var(--text-muted); }
.react__btn:hover { border-color: var(--brand-fill); transform: translateY(-2px); }
.react__btn.is-done { background: var(--surface-tint); border-color: var(--brand-fill); animation: pop .35s var(--ease); }

/* ---------- concept page ---------- */
.concept__head { padding: clamp(48px, 7vw, 100px) 0 clamp(30px, 4vw, 50px); }
.concept__head h1 { font-family: var(--display); font-size: clamp(52px, 8vw, 120px); line-height: .9; text-transform: uppercase; margin: 20px 0 24px; }
.concept__head p { font-size: clamp(16px, 1.5vw, 20px); color: var(--text-muted); }
/* The page hands you to the thing before it argues for it, so the invitation
   sits with the opening line rather than only at the bottom. */
.concept__head .btn { margin-top: clamp(20px, 2.5vw, 30px); }
.concept__items { display: flex; flex-direction: column; }
.concept__item { display: grid; grid-template-columns: 76px 1fr; gap: clamp(16px, 3vw, 48px); align-items: start; padding: clamp(28px, 3.6vw, 48px) 0; border-top: 1px solid var(--border-subtle); }
/* number matches the heading's size and top-aligns with it */
.concept__item > span { font-family: var(--display); font-size: clamp(24px, 2.6vw, 36px); line-height: 1; color: var(--brand-on-surface); }
.concept__item h3 { font-family: var(--display); text-transform: uppercase; font-size: clamp(24px, 2.6vw, 36px); line-height: 1; margin-bottom: 10px; }
.concept__item p { color: var(--text-muted); }
.concept__note { text-align: center; background: var(--surface-tint); border-radius: var(--radius-card); padding: clamp(36px, 5vw, 64px) var(--pad); margin: clamp(30px, 4vw, 50px) 0 0; }
.concept__note p { margin: 0 auto 24px; color: var(--text-muted); }
.concept__note p a { border-bottom: 1px solid var(--border-strong); }

/* ---------- footer (mirrors indu's own lilac footer) ---------- */
.footer { background: var(--surface-tint); color: var(--text-primary); margin-top: clamp(56px, 8vw, 110px); }
.footer__inner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr); gap: clamp(28px, 5vw, 90px); max-width: var(--maxw); margin: 0 auto; padding: clamp(44px, 6vw, 72px) var(--pad) clamp(36px, 5vw, 60px); }
.footer__brand { display: flex; align-items: baseline; gap: 9px; margin-bottom: 22px; }
.footer__logo { height: 28px; width: auto; filter: brightness(0); }
.footer__beauty { font-family: var(--display); font-size: 30px; line-height: 1; letter-spacing: .01em; }
.footer__addr { font-size: 14.5px; color: var(--indu-overlay-ink-80); margin-bottom: 8px; }
.footer__addr a:hover { color: var(--brand-on-surface); }
.footer__stay { font-family: var(--display); text-transform: uppercase; font-size: clamp(24px, 2.2vw, 30px); line-height: 1; color: var(--brand-on-surface); margin: 30px 0 10px; }
.footer__staycopy { font-size: 14.5px; color: var(--indu-overlay-ink-80); margin-bottom: 18px; }
.footer__form { display: flex; flex-direction: column; gap: 12px; max-width: 300px; }
.footer__form input { font-family: var(--body); font-size: 15px; padding: 13px 22px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: var(--surface-raised); outline-color: var(--brand-fill); }
.footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px; align-content: start; }
.footer__cols h4 { font-family: var(--display); text-transform: uppercase; font-size: 19px; letter-spacing: .04em; margin-bottom: 14px; }
.footer__cols a { display: block; font-size: 14px; color: var(--indu-overlay-ink-80); padding: 4px 0; transition: color var(--motion-fast); }
.footer__cols a:hover { color: var(--brand-on-surface); }
.footer__bar { border-top: 1px solid var(--border-strong); }
.footer__barinner { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: var(--maxw); margin: 0 auto; padding: 16px var(--pad); }
.footer__barbrand { font-weight: 500; font-size: 13.5px; }
.footer__terms { font-size: 13.5px; color: var(--indu-overlay-ink-80); }
.footer__terms:hover { color: var(--brand-on-surface); }
.footer__social { display: flex; align-items: center; gap: 16px; color: var(--text-primary); }
.footer__end { background: var(--surface-end); }
.footer__endinner { max-width: var(--maxw); margin: 0 auto; padding: 14px var(--pad); font-size: 12px; color: var(--text-faint); }
.footer__endinner a { border-bottom: 1px solid currentColor; }
.footer__endinner a:hover { color: var(--brand-on-surface); }
/* The way in for whoever runs this. A footer is where a real site puts a
   staff door, and it is still the first thing anyone looks for, so it gets
   a border and a target rather than being one more faint word in a line. */
.footer__team { float: right; border: 1px solid currentColor !important; border-radius: 3px;
  padding: 5px 11px; min-height: 30px; display: inline-flex; align-items: center; }
.footer__team:hover { color: var(--brand-on-surface); }

/* ---------- routine lab ---------- */
.lab { background: var(--surface-tint-2); border-radius: var(--radius-card); padding: clamp(30px, 4.5vw, 60px); margin-top: clamp(48px, 6vw, 84px); scroll-margin-top: 90px; }
.lab__intro h2 { font-family: var(--display); text-transform: uppercase; font-size: clamp(34px, 4.6vw, 60px); line-height: .93; }
.lab__intro p { margin: 14px 0 26px; color: var(--text-muted); }
.lab__step { margin-bottom: 20px; }
.lab__step h3 { font-family: var(--display); text-transform: uppercase; font-size: clamp(19px, 1.8vw, 24px); margin-bottom: 12px; }
.lab__opts { display: flex; flex-wrap: wrap; gap: 10px; }
.lab__opt { font-weight: 500; font-size: 14px; background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: 11px 20px; cursor: pointer; transition: background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast); }
.lab__opt:hover { border-color: var(--brand-fill); color: var(--brand-on-surface); }
.lab__opt.is-active { background: var(--surface-invert); border-color: var(--surface-invert); color: var(--text-on-invert); }
.lab__result { margin-top: 26px; animation: rise .5s var(--ease); }
.lab__result h3 { font-family: var(--display); text-transform: uppercase; font-size: clamp(24px, 2.4vw, 32px); line-height: 1; margin-bottom: 4px; }
.lab__result > p { color: var(--text-muted); font-size: 14px; margin-bottom: 18px; }
.lab__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); }
.lab__col { background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); padding: 20px 22px; }
.lab__col h4 { font-family: var(--display); text-transform: uppercase; font-size: 19px; margin-bottom: 12px; color: var(--brand-on-surface); }
.lab__item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); }
.lab__item:last-child { border-bottom: 0; }
.lab__item b { font-family: var(--display); font-size: 15px; color: var(--brand-on-surface); flex: none; width: 22px; }
.lab__name { font-family: var(--body); font-size: 15px; font-weight: 500; color: var(--text-primary); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; border-bottom: 2px dotted var(--surface-tint); transition: color var(--motion-fast), border-color var(--motion-fast); }
.lab__name:hover { border-color: var(--brand-fill); }
.lab__name:hover { color: var(--brand-on-surface); }
.product-pop { position: absolute; z-index: 85; width: 250px; background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: 12px; box-shadow: 0 24px 50px -20px var(--indu-overlay-ink-50); overflow: hidden; animation: rise .25s var(--ease); }
.product-pop img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--surface-tint-soft); }
.product-pop__body { padding: 14px 16px 16px; }
.product-pop__body h5 { font-family: var(--display); text-transform: uppercase; font-size: 18px; line-height: 1; display: inline; margin-right: 6px; }
.product-pop__body > span { font-size: 13px; font-weight: 500; color: var(--text-muted); }
.product-pop__body p { font-size: 12.5px; line-height: 1.5; color: var(--text-muted); margin-top: 6px; }
.product-pop__go { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 500; background: var(--brand-fill); color: var(--text-on-brand); padding: 8px 16px; border-radius: var(--radius-pill); transition: background var(--motion-fast); }
.product-pop__go:hover { background: var(--brand-hover); }
.lab__item p { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.lab__retake { margin-top: 20px; background: none; border: 0; cursor: pointer; font-weight: 500; font-size: 14px; color: var(--brand-on-surface); border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* ---------- tap-to-explain ---------- */
.article__hint { font-size: 13px; color: var(--brand-on-surface); margin-top: 14px; }
.explain { font: inherit; color: var(--brand-on-surface); background: var(--surface-tint-soft); border: 0; padding: 0 3px; border-radius: 3px; cursor: pointer; border-bottom: 2px dotted var(--brand-fill); transition: color var(--motion-fast), background var(--motion-fast); }
.explain:hover, .explain.is-open { color: var(--text-on-brand); background: var(--brand-fill); }
.explain-pop { position: absolute; z-index: 85; width: min(340px, calc(100vw - 32px)); background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: 12px; box-shadow: 0 24px 50px -20px var(--indu-overlay-ink-50); padding: 16px 18px; animation: rise .25s var(--ease); }
.explain-pop h5 { font-family: var(--display); text-transform: uppercase; font-size: 18px; margin-bottom: 6px; color: var(--brand-on-surface); }
.explain-pop p { font-size: 13.5px; line-height: 1.55; color: var(--indu-overlay-ink-80); }
.explain-pop a { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 500; color: var(--brand-on-surface); border-bottom: 1px solid currentColor; }

/* ---------- indu guru ---------- */
@keyframes gdot { 30% { transform: translateY(-4px); opacity: .5; } }
@media (max-width: 700px) {
  /* iOS zooms the page when a focused input is under 16px — every input goes 16px on mobile */
  html.guru-open, html.guru-open body { overflow: hidden; height: 100%; }
}

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .ticker__track { animation: none; }
  .hero__title .w { opacity: 1; transform: none; animation: none; }
  .squiggle path { stroke-dashoffset: 0; animation: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .expert { grid-template-columns: 1fr 1fr; }
  .expert__list { grid-column: 1 / -1; }
  .ranges { grid-template-columns: 1fr; }
  .hero { grid-template-columns: 1fr; }
  .hero__media img { box-shadow: 14px 14px 0 var(--shadow-offset); }
}
@media (max-width: 700px) {
  /* The dropdown panel and its burger are gone with the nav: one shop link
     needs no menu to hide in, on any width. */
  .masthead { position: sticky; }
  .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .expert { grid-template-columns: 1fr; }
  .section__head { flex-direction: column; align-items: flex-start; }
  .rail__ctl { display: none; }
  .concept__item { grid-template-columns: 1fr; gap: 8px; }
  .product { flex-direction: column; align-items: flex-start; }
  .hero__watermark { display: none; }
  .sticker--hero { left: 10px; }
  .archive__tools { flex-direction: column; align-items: flex-start; }
  .lab__cols { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .footer__barinner { flex-wrap: wrap; justify-content: center; text-align: center; }
  /* quiz results: two-up compact cards instead of one long column */
  .quiz .grid--4 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .card--quiz .card__title { font-size: 15.5px; }
  .card--quiz .card__body { padding: 12px 14px 16px; gap: 6px; }
  .card--quiz .card__meta { display: none; }
}
/* touch devices: no sticky hover states */
@media (hover: none) {
  .quiz__opt:hover { transform: none; border-color: var(--border-strong); color: var(--text-primary); }
  .quiz__opt.is-active { background: var(--surface-invert); border-color: var(--surface-invert); color: var(--text-on-invert); }
  .card:hover { transform: none; box-shadow: 0 1px 2px var(--indu-overlay-ink-8); border-color: var(--border-subtle); }
  .card:hover .card__media img { transform: none; }
}

/* ================================================================ v12: the reframe
   Stance hero, truth ticker, hype check, for-parents band, trust strip,
   concept video modal. Everything rides the existing token layers. */

/* stance hero */
.hero__title .w--pop { color: var(--brand-on-surface); }
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
/* one pill, one size: both hero CTAs carry the same 1.5px border box so the
   ghost variant is pixel-identical to the solid one (standards: one CTA pill) */
.hero__ctas .btn { border: 1.5px solid transparent; }
.btn--ghost { background: transparent; color: var(--text-primary); }
.hero__ctas .btn.btn--ghost { border-color: var(--border-strong); }
.hero__ctas .btn.btn--ghost:hover { border-color: var(--brand-fill); color: var(--brand-on-surface); background: transparent; }
.hero__cap { display: flex; flex-direction: column; gap: 3px; padding: 12px 4px 0; }
.hero__cap a { font-weight: 500; font-size: 15px; }
.hero__cap a:hover { color: var(--brand-on-surface); }
.hero__cap span { font-size: 12.5px; color: var(--text-faint); }

/* masthead: the parents door */

/* the hype check */
.hype { background: var(--surface-tint-2); border-radius: var(--radius-card); padding: clamp(30px, 4.5vw, 60px); margin-top: clamp(24px, 4vw, 48px); }
.hype__intro h2 { font-family: var(--display); text-transform: uppercase; font-size: clamp(34px, 4.6vw, 60px); line-height: .93; }
.hype__intro p { margin: 14px 0 24px; color: var(--text-muted); }
.hype__chips { display: flex; flex-wrap: wrap; gap: 12px; }
.hype__chip { font-family: var(--display); text-transform: uppercase; font-size: clamp(16px, 1.5vw, 20px); letter-spacing: .04em; background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: 12px 22px; cursor: pointer; transition: background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast), transform var(--motion-fast); }
.hype__chip:hover { border-color: var(--brand-fill); color: var(--brand-on-surface); transform: rotate(-1deg); }
.hype__chip.is-active { background: var(--surface-invert); border-color: var(--surface-invert); color: var(--text-on-invert); }
.hype__hint { margin: 10px 0 22px; font-size: 12.5px; color: var(--text-muted); }
.hype__card { background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); padding: clamp(20px, 2.6vw, 30px); max-width: 680px; box-shadow: 0 1px 2px var(--indu-overlay-ink-8); }
.hype__vhead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.hype__vhead h3 { font-family: var(--display); text-transform: uppercase; font-size: clamp(24px, 2.6vw, 32px); line-height: 1; }
.hype__verdict { font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; padding: 7px 13px; border-radius: var(--radius-pill); }
.hype__verdict--no { background: var(--surface-invert); color: var(--text-on-invert); }
.hype__verdict--maybe { background: var(--brand-hover); color: var(--text-on-brand); }
.hype__verdict--yes { background: var(--brand-fill); color: var(--text-on-brand); }
.hype__card > p { font-size: 15px; margin-bottom: 14px; }
.hype__instead { background: var(--surface-cream); border-radius: var(--radius-card); padding: 12px 14px; font-size: 14px; margin-bottom: 14px; }
.hype__instead b { font-weight: 500; }
.hype__video { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 1.5px solid var(--border-strong); border-radius: var(--radius-pill); padding: 10px 18px; font-weight: 500; font-size: 13.5px; cursor: pointer; margin-bottom: 14px; transition: border-color var(--motion-fast), color var(--motion-fast); }
.hype__video:hover { border-color: var(--brand-fill); color: var(--brand-on-surface); }
.hype__links { display: flex; flex-wrap: wrap; gap: 8px 20px; font-weight: 500; font-size: 14px; align-items: baseline; }
.hype__links a { border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.hype__links a:hover { color: var(--brand-on-surface); }
.hype__ask { background: none; border: 0; cursor: pointer; font-weight: 500; font-size: 14px; color: var(--brand-on-surface); padding: 0 0 1px; border-bottom: 1px solid currentColor; }
.hype__stat { margin-top: 18px; font-size: 12.5px; color: var(--text-muted); }

/* for parents */
.parents { background: var(--surface-cream); border-radius: var(--radius-card); padding: clamp(30px, 4.5vw, 60px); margin-top: clamp(48px, 6vw, 84px); }
.parents__head h2 { font-family: var(--display); text-transform: uppercase; font-size: clamp(34px, 4.6vw, 60px); line-height: .93; margin-top: 14px; }
.parents__head p { margin: 14px 0 26px; color: var(--text-muted); }
.parents__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.parents__card { display: flex; flex-direction: column; gap: 8px; background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); padding: 22px 22px 20px; box-shadow: 0 1px 2px var(--indu-overlay-ink-8); transition: border-color .28s var(--ease), transform .28s var(--ease); }
.parents__card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.parents__card h3 { font-family: var(--display); text-transform: uppercase; font-size: 20px; line-height: 1.05; }
.parents__card p { font-size: 14px; color: var(--text-muted); }
.parents__card span { margin-top: auto; font-weight: 500; font-size: 13.5px; color: var(--brand-on-surface); }
.parents__promise { margin-top: 18px; font-weight: 500; font-size: 13.5px; }

/* trust strip */
.trust { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); margin-top: clamp(48px, 6vw, 84px); }
.trust > div { padding: 26px 26px 28px; border-left: 1px solid var(--border-subtle); }
.trust > div:first-child { border-left: 0; padding-left: 0; }
.trust h3 { font-family: var(--display); text-transform: uppercase; font-size: 18px; margin-bottom: 8px; }
.trust p { font-size: 13.5px; color: var(--text-muted); }

/* concept video modal */
.vmodal { position: fixed; inset: 0; z-index: 90; background: color-mix(in srgb, var(--indu-ink-900) 55%, transparent); display: grid; place-items: center; padding: 20px; }
.vmodal[hidden] { display: none; }
.vmodal__box { width: min(560px, 100%); background: var(--surface-raised); border-radius: var(--radius-card); padding: 18px 18px 20px; position: relative; box-shadow: var(--shadow-pop); }
.vmodal__close { position: absolute; top: 8px; right: 12px; background: none; border: 0; font-size: 26px; cursor: pointer; color: var(--text-muted); line-height: 1; z-index: 1; }
.vmodal__frame { aspect-ratio: 16 / 9; background: var(--surface-tint); border-radius: var(--radius-card); display: grid; place-items: center; }
.vmodal__play { width: 64px; height: 64px; border-radius: var(--radius-pill); background: var(--brand-fill); color: var(--text-on-brand); display: grid; place-items: center; font-size: 22px; padding-left: 4px; }
.vmodal__cap { margin-top: 14px; font-weight: 500; font-size: 15px; }
.vmodal__note { margin-top: 6px; font-size: 12.5px; color: var(--text-muted); }
html.vmodal-open { overflow: hidden; }

@media (max-width: 700px) {
  .parents__cards { grid-template-columns: 1fr; }
  .trust { grid-template-columns: 1fr; }
  .trust > div { border-left: 0; border-top: 1px solid var(--border-subtle); padding-left: 0; }
  .trust > div:first-child { border-top: 0; }
  .hero__ctas .btn { padding: 14px 24px; }
}
@media (hover: none) {
  .hype__chip:hover { transform: none; border-color: var(--border-strong); color: var(--text-primary); }
  .hype__chip.is-active { background: var(--surface-invert); border-color: var(--surface-invert); color: var(--text-on-invert); }
}

/* ── the front door asks ──────────────────────────────────────────────────
   His ruling, 16 Aug. The ask is the page, not a bubble in the corner. A box
   with a real question already in the placeholder needs no instructions, the
   chips make the first tap free, and the line underneath says who answers,
   because their own search data says discovery is people rather than topics.
   Full width like everything else on a room page: only a story body keeps a
   measure. */
.ask101 { border-bottom: 1px solid var(--border-subtle); }
.ask101__in { padding: clamp(30px, 4.4vw, 58px) 0 clamp(26px, 3.4vw, 42px); }
/* Their display face, uppercase, on their own section-title scale. A 54px
   lowercase heading in the body face would have been a type role their brand
   does not have, invented on their page. */
.ask101__h {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(30px, 4.2vw, 54px); line-height: .95; letter-spacing: .01em;
  color: var(--text-primary); margin: 0;
}
.ask101__form { display: flex; margin-top: clamp(16px, 2vw, 24px); border: 2px solid var(--indu-ink-900); }
/* 16px floor. Below it iOS Safari zooms the page on focus and never zooms back,
   and this is the first field anyone touches. */
.ask101__in-f {
  flex: 1 1 auto; min-width: 0; border: 0; background: var(--surface-page, #fff);
  padding: 15px 16px; font: inherit; font-size: max(16px, 1.0625rem);
  color: var(--text-primary);
}
.ask101__in-f::placeholder { color: var(--text-faint); }
.ask101__in-f:focus { outline: 2px solid var(--brand-fill); outline-offset: -2px; }
.ask101__go {
  border: 0; background: var(--brand-fill); color: var(--text-on-brand);
  font: inherit; font-weight: 600; font-size: 0.9375rem; padding: 15px 26px;
  cursor: pointer; min-height: 48px; white-space: nowrap;
}
.ask101__go:hover { background: var(--brand-hover); }
.ask101__go:focus-visible { outline: 3px solid var(--indu-ink-900); outline-offset: 2px; }
.ask101__chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.ask101__chip {
  border: 1px solid var(--border-strong); background: var(--surface-page, #fff);
  color: var(--text-primary); font: inherit; font-size: 0.875rem;
  padding: 9px 14px; cursor: pointer; min-height: 40px;
}
.ask101__chip:hover { background: var(--surface-tint-2); border-color: var(--surface-tint-2); }
.ask101__chip:focus-visible { outline: 2px solid var(--brand-fill); outline-offset: 2px; }
/* The answer thread. It accumulates rather than replacing, because the whole
   point is that you never leave to keep reading. Semantic tokens only. */
.ask101__out {
  margin-top: 18px; font-size: clamp(15px, 1.5vw, 17px); line-height: 1.55;
  display: flex; flex-direction: column; gap: 10px;
}
.ask101__out[hidden] { display: none; }

.thr { background: var(--surface-tint-2); padding: clamp(16px, 2vw, 24px); border-radius: var(--radius-card); }
/* the medical handoff is a different kind of answer and should not look chatty */
.thr--care { background: var(--surface-tint-soft); border-left: 3px solid var(--brand-fill); }
/* Waiting on the model. Three dots rather than a spinner: a spinner reads as
   loading a page, and this is someone thinking about your question. */
.thr--wait .thr__a { display: flex; gap: 5px; align-items: center; min-height: 26px; }
.thr--wait .thr__a i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--brand-fill);
  opacity: .35; animation: askdot 1.1s ease-in-out infinite;
}
.thr--wait .thr__a i:nth-child(2) { animation-delay: .16s; }
.thr--wait .thr__a i:nth-child(3) { animation-delay: .32s; }
.lab__wait { display: flex; gap: 5px; align-items: center; min-height: 26px; margin-top: 10px; }
.lab__wait i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--brand-fill);
  opacity: .35; animation: askdot 1.1s ease-in-out infinite;
}
.lab__wait i:nth-child(2) { animation-delay: .16s; }
.lab__wait i:nth-child(3) { animation-delay: .32s; }
@keyframes askdot { 0%, 60%, 100% { opacity: .28; transform: translateY(0); }
                    30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) {
  .thr--wait .thr__a i, .lab__wait i { animation: none; opacity: .5; }
}
.thr__q { font-weight: 600; color: var(--text-primary); margin: 0 0 8px; }
.thr__a { margin: 0; color: var(--text-primary); }
/* a verdict is the sharpest thing this page says, so it is not a sentence */
.thr__v {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .01em;
  font-size: clamp(30px, 4.4vw, 54px); line-height: .95;
  color: var(--brand-on-surface); margin: 2px 0 10px;
}
.thr__src { margin: 12px 0 0; font-size: 0.8125rem; color: var(--text-faint); }
.thr__src a { color: var(--brand-on-surface); border-bottom: 1px solid var(--border-strong); }

.thr__next { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.thr__k {
  font-size: 0.6875rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 500; width: 100%;
}
.thr__chip {
  font-family: inherit; font-size: 0.9375rem; line-height: 1.3; text-align: left;
  background: var(--surface-base); color: var(--text-primary);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-pill);
  padding: 9px 16px; cursor: pointer; min-height: 40px;
  transition: border-color var(--motion-fast), color var(--motion-fast);
}
.thr__chip:hover { border-color: var(--brand-fill); color: var(--brand-on-surface); }
.thr__chip:focus-visible { outline: 2px solid var(--brand-fill); outline-offset: 2px; }

/* The questions already asked. Quieter than the follow-ups on purpose: this is
   where you have been, not where you are going. */
.thr__trail { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding: 0 clamp(4px, 1vw, 8px); }
.thr__trail .thr__k { width: 100%; margin-bottom: -2px; }
.thr__back {
  font-family: inherit; font-size: 0.875rem; line-height: 1.3; text-align: left;
  background: none; color: var(--text-muted);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-pill);
  padding: 7px 14px; cursor: pointer; min-height: 36px;
  transition: color var(--motion-fast), border-color var(--motion-fast);
}
.thr__back::before { content: "\2190\00a0"; color: var(--text-faint); }
.thr__back:hover { color: var(--brand-on-surface); border-color: var(--brand-fill); }
.thr__back:focus-visible { outline: 2px solid var(--brand-fill); outline-offset: 2px; }
.thr__clear {
  font-family: inherit; font-size: 0.8125rem; background: none; border: 0;
  color: var(--text-faint); cursor: pointer; padding: 7px 4px; text-decoration: underline;
  min-height: 36px;
}
.thr__clear:hover { color: var(--brand-on-surface); }
.ask101__by {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: clamp(18px, 2.4vw, 26px); font-size: 0.875rem; color: var(--text-muted);
}
.ask101__faces { display: flex; }
.ask101__faces span {
  width: 34px; height: 34px; border-radius: 50%; margin-left: -6px;
  background: var(--surface-tint); border: 2px solid var(--surface-page, #fff);
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  color: var(--brand-on-surface);
}
.ask101__faces span:first-child { margin-left: 0; }
@media (max-width: 560px) {
  .ask101__form { flex-wrap: wrap; }
  .ask101__in-f { flex: 1 1 100%; }
  .ask101__go { flex: 1 1 100%; }
}

/* The article page points back at the one ask box rather than carrying a
   second one of its own. */
.askback { text-align: center; padding: clamp(36px, 5vw, 64px) var(--pad); background: var(--surface-tint-2); border-radius: var(--radius-card); margin: clamp(30px, 4vw, 50px) 0 0; }
.askback p { margin: 0 0 18px; color: var(--text-muted); }

/* ---------- the slim ask bar ----------
   Sticks under the masthead once the real box has gone by. --mast-h is measured
   at runtime rather than guessed: the masthead's height moves with the viewport
   and a hardcoded offset leaves a gap on one width and overlaps on another. */
.askbar {
  position: sticky; top: var(--mast-h, 58px); z-index: 40;
  display: flex; gap: 0; margin: 0 auto; max-width: var(--maxw);
  padding: 0 var(--pad);
  animation: askbarin .22s var(--ease) both;
}
.askbar[hidden] { display: none; }
.askbar__in {
  flex: 1; min-width: 0; border: 2px solid var(--brand-fill); border-right: 0;
  border-radius: var(--radius-card) 0 0 var(--radius-card);
  background: var(--surface-base); color: var(--text-primary);
  font-family: var(--body); font-size: 16px; padding: 12px 16px;
}
.askbar__in:focus { outline: none; }
.askbar__in::placeholder { color: var(--text-faint); }
.askbar__go {
  border: 0; background: var(--brand-fill); color: var(--text-on-brand);
  font-family: var(--body); font-weight: 500; font-size: 15px;
  padding: 0 24px; cursor: pointer;
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
}
.askbar__go:hover { background: var(--brand-hover); }
@keyframes askbarin { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .askbar { animation: none; } }