/* ============================================================================
   LAB REDESIGN — experiment layer, loaded LAST so it wins on equal specificity.
   Panel findings 1-7, 2026-08-04. LAB ONLY (theme-lab/). Not in the deploy theme.

   Deliberately NOT changed here: the typeface. Three panels recommended dropping
   Montserrat, but that contradicts brand-guidelines.md and is Patrick's call.
   Everything below is independent of that decision.

   To discard this experiment: delete this file and its <link> in default.hbs.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   [4] Undo greyscale antialiasing.
   Declared twice upstream (tokens.css, f-organic.css). On macOS it switches off
   subpixel AA and THINS every glyph, which is the opposite of what light-on-dark
   type needs. No-op on Linux/Windows, so verify on a Mac before porting.
   --------------------------------------------------------------------------- */
html, body { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; }

/* ---------------------------------------------------------------------------
   [6] Colour: solid tokens instead of alpha.
   Alpha text composites over whatever is beneath it, and this theme stacks a
   mesh gradient, veils and translucent pods. Measured --f-faint fell to 3.98:1
   (an AA failure) on a pod sitting under the mesh, while the token table still
   claimed 5.21:1. Solid values cannot drift.
   Contrast vs page #08202D: text 14.5:1, muted 10.4:1, faint 7.5:1.
   --------------------------------------------------------------------------- */
:root {
  --f-text:  #E4F1F6;
  --f-muted: #B7D0DB;
  --f-faint: #95B2C0;

  /* Borders were a single 1.40:1 token doing three different jobs. */
  --f-border:      #254C5D;   /* hairline: decorative dividers        1.8:1 */
  --f-line:        #356A80;   /* structural: card and pod edges       2.8:1 */
  --f-line-strong: #4D8BA3;   /* load-bearing: table rules, inputs    4.4:1 */

  /* Accent tuned for SMALL text; the base accents stay for graphics/fills. */
  --teal-text: #6FD6C3;       /* 9.6:1 */

  /* Layout scale (see [1],[3],[5]) */
  --w-prose:  820px;          /* ~72ch at 19px */
  --w-figure: 1180px;         /* tables, figures, feature images */
  --gutter:   clamp(24px, 4.2vw, 80px);
}

/* ---------------------------------------------------------------------------
   [2] Weight floor. Montserrat Light at 20px has a ~1px stem, so only ~9% of
   its pixels reach the nominal colour: measured 8.24:1 nominal delivering
   4.31:1 effective. Light stays only where stems are thick enough to survive
   it (the hero h1). This is the single biggest cause of "contrast looks weak".
   --------------------------------------------------------------------------- */
.hero-sub,
.lede,
.article-sub,
.hero-def p,
.kicker,
.thread-copy p,
.post-content blockquote,
.post-content .kg-header-card .kg-header-card-subheading { font-weight: 400; }

/* Small text in the faintest colour buys back stem width with weight. */
.article-meta, .news-date, .foot-bottom, .foot-col h4, .ins-card .author,
.post-content figcaption, .founder-role, .proof-label, .page-number { font-weight: 500; }

/* Bold inside a sentence was 700 + pure white against 400 muted: a 2.8x jump
   that makes the running copy read dim by comparison. 600 closes the gap. */
.post-content strong, .lede strong, .hero-sub strong { font-weight: 600; color: var(--f-text); }

/* ---------------------------------------------------------------------------
   [1] Break tables, figures and feature images OUT of the prose measure.
   The TRI-01 comparison table and the fold-change evidence table are the two
   most persuasive assets on the site and both were crushed into ~652px with
   ~860px of empty screen beside them.
   --------------------------------------------------------------------------- */
@media (min-width: 1180px) {
  .post-content > figure,
  .post-content > .kg-width-wide,
  .article .wrap > .feature-image {
    width: var(--w-figure);
    max-width: calc(100vw - (2 * var(--gutter)));
    margin-inline: calc((var(--w-figure) - 100%) / -2);
  }
}

/* Breakout must be bounded by HEIGHT, not just width. Widening to 1180px is right
   for a landscape figure and catastrophic for a portrait one: the feature image on
   /insights/the-brain-is-not-sealed/ is 1200x1490, so 1180px wide rendered it
   1465px tall, taller than the viewport. Capping height and letting width follow
   keeps the aspect ratio, lets landscape images use the full breakout, and shrinks
   portrait ones back to something readable. fit-content keeps the figure's border
   wrapped to the image instead of leaving an empty box around it. */
.article .wrap > .feature-image,
.post-content > figure { width: fit-content; margin-inline: auto; }
.article .wrap > .feature-image img,
.post-content > figure img,
.post-content p > img {
  max-height: 560px;   /* fixed px, NOT vh: a vh cap is relative to the viewport,
                          so it silently changes with window height and is unreliable
                          to verify. 560px keeps a portrait image ~450px wide. */
  width: auto;
  max-width: 100%;
  margin-inline: auto;
}
/* Tables need two different behaviours, and one rule cannot serve both.
   On a WIDE screen the table must fill the prose measure, so it stays display:table. The previous
   blanket `display:block` made the internal rows generate an anonymous table box that shrink-wraps
   to content: the box measured a correct 820px while the visible rules stopped 91px short of the
   prose right edge, which is what read as misaligned.
   On a NARROW screen a 4 or 5 column table cannot fit, and body{overflow-x:hidden} CLIPS the overflow
   rather than letting the page scroll to it. Measured 2026-08-08 at 390px: the 5-column TRI-01 table
   ran 289px past the viewport and the dose ladder 157px, both silently cut off.
   So: scroll only where it is needed. 820px matches --w-prose; every table fits above it. */
.post-content > table { max-width: 100%; }
@media (max-width: 820px) {
  .post-content > table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Tables are NOT broken out of the prose measure (changed 2026-08-08, Patrick: "the table is
   misaligned"). Two problems with the break-out. First, it was mathematically centred but 360px wider
   than every heading and paragraph, so its left edge started 180px outside the text column and nothing
   on the page lined up. Second, the margin was calc((var(--w-figure) - 100%) / -2), derived from the
   INTENDED 1180px, while max-width clamped the real width, so between ~1180px and ~1320px of viewport
   it was additionally pushed off centre (measured: 17px at a 1250px viewport).
   The original rationale, that tables were "crushed into ~652px", was already answered by rule [7] in
   this file, which widened .article .wrap to var(--w-prose) 820px. Measured 2026-08-08: the 2-column
   evidence table, the 4-column dose ladder and the 5-column TRI-01 comparison all fit 820px with no
   horizontal scroll, so no table on the site needs the extra 360px.
   overflow-x:auto below stays as the safety net for any future wide table. */

/* [1b] The evidence table was set SMALLER (15px) than the prose around it (18px)
   and had no tabular figures. Inverted hierarchy on the most scrutinised content. */
.post-content table { font-size: 17px; font-variant-numeric: tabular-nums; border-collapse: collapse; }
.post-content th { font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
                   font-weight: 700; color: var(--f-muted); padding: 14px 18px;
                   border-bottom: 1px solid var(--f-line-strong); }
.post-content td { padding: 16px 18px; border-bottom: 1px solid var(--f-border); }
/* Zero the OUTER cell padding so the table's text edges meet the prose text edges. The table box
   already aligns with the measure, but 18px of cell padding pushed the first column's text 18px
   right of the body copy, which still reads as misaligned. Measured 2026-08-08: box left 132 and
   prose left 132, but cell text left 150. Inner cell padding is untouched, so column separation
   is unchanged. */
.post-content th:first-child, .post-content td:first-child { padding-left: 0; }
.post-content th:last-child,  .post-content td:last-child  { padding-right: 0; }
.post-content tbody tr:last-child td { border-bottom: 1px solid var(--f-line-strong); }

/* [6b] Controls that had effectively no visible boundary (fill measured 1.17:1). */
.sub-form input { border: 1px solid var(--f-line-strong); }
.pod, .organism, .ins-card, .cta-ghost { border-color: var(--f-line); }

/* ---------------------------------------------------------------------------
   [3] Make the desktop actually scale. Every display size hit its clamp ceiling
   at ~1429px, so a 1920 monitor received 400px of pure margin and nothing else.
   --------------------------------------------------------------------------- */
.wrap          { max-width: 1440px; padding-inline: var(--gutter); }
.hero h1       { font-size: clamp(48px, 8vw, 132px); }
.hero-inner    { max-width: clamp(760px, 62vw, 1080px); }
.hero-sub      { font-size: clamp(20px, 1.5vw, 24px); max-width: 720px; }
.block h2      { font-size: clamp(38px, 5.4vw, 88px); }
.page-head h1  { font-size: clamp(38px, 5vw, 80px); }
.lede          { font-size: clamp(20px, 1.5vw, 24px); max-width: 780px; }

/* The payoff line was set SMALLER than the heading that sets it up. */
.kicker        { font-size: clamp(34px, 5vw, 88px); }

/* ---------------------------------------------------------------------------
   [5] Lift the proof bar above the fold. At 1512x982 the hero ended at y=981
   against a 982px viewport, so the LOIs, EPO opinion and awards began exactly
   1px below the fold and were never seen without scrolling.
   --------------------------------------------------------------------------- */
/* Hero tightened to pay for the larger hero-to-proof gap below, so the proof
   numerals still clear a 982px fold instead of the gap pushing them under. */
.hero  { min-height: 0; padding: 32px 0 8px; }
/* min-height was never the binding constraint once the h1 grew; the hero is sized
   by its content. Tuned so the proof numbers still clear a 982px fold at 1512 wide
   even after the larger hero-to-proof gap below. */
.hero h1    { font-size: clamp(48px, 7vw, 110px); }
.hero-sub   { margin-top: 26px; }
.hero-cta   { margin-top: 30px; }

/* ---------------------------------------------------------------------------
   PROOF BAR — ovals removed (Patrick 2026-08-04), and the hero-to-proof gap opened up.
   The blob border-radius plus the +/-16px vertical stagger were one device, not two;
   staggered rectangles would read as a mistake, so both go. Replaced with a plain
   stat strip bounded by two hairlines: quieter than the datawall below it, and
   deliberately a DIFFERENT device so the two adjacent 4-up rows don't twin.
   --------------------------------------------------------------------------- */
.proof { padding: 76px 0 8px; }
.proof .wrap {
  border-top: 1px solid var(--f-border);
  border-bottom: 1px solid var(--f-border);
  padding-top: 44px; padding-bottom: 44px;
  column-gap: 40px;
}
.proof-cell {
  padding: 0 8px;
  border: 0;
  border-radius: 0;
  background: none;
  transform: none;          /* kills the odd/even translateY stagger */
  text-align: left;
  align-items: flex-start;
}
.proof-cell:nth-child(odd),
.proof-cell:nth-child(even) { transform: none; }
.proof-num   { font-size: 46px; }
.proof-num.txt { font-size: 34px; }
.proof-label { margin-top: 12px; max-width: 260px; }

/* ---------------------------------------------------------------------------
   [7] Alignment. .article .wrap inherits 54px padding, so its real column was
   652px, not the 760px declared. .article-foot and .post-cta carried no padding
   and so rendered a true 760px, hanging 54px outboard of the prose on each side
   at the end of every post.
   --------------------------------------------------------------------------- */
.article .wrap  { max-width: calc(var(--w-prose) + (2 * var(--gutter))); }
.article-foot,
.post-cta       { max-width: var(--w-prose); }
.post-content   { font-size: 19px; }

/* .page-head .wrap (940px) and .article .wrap (760px) have identical specificity,
   so source order decided the width and the same component rendered 180px apart
   depending on which template wrapped it. */
.article .page-head .wrap { max-width: calc(var(--w-prose) + (2 * var(--gutter))); }

/* Sub-16px card prose: these are real reading sentences, previously set at four
   different values between 14 and 15.5px. */
.ins-excerpt, .founder-bio, .a-bio, .cluster p { font-size: 16px; line-height: 1.6; }
.pod p, .organism p                            { font-size: 17px; line-height: 1.6; }
.proof-label                                   { font-size: 14px; }
.post-content figcaption                       { font-size: 14px; }
.eyebrow                                       { font-size: 13px; }
.ann-tag                                       { font-size: 12px; }

/* Small accent text moves to the lighter accent for legibility at 13px. */
.eyebrow, .ins-meta, .news-tag, .founder-role { color: var(--teal-text); }

/* h4 was 18px/600, identical to body: indistinguishable from a bold sentence. */
.post-content h4 { font-size: 20px; font-weight: 700; }

/* ---------------------------------------------------------------------------
   DATAWALL — the +96x result as a designed object rather than a table cell.
   The number IS the graphic: no chart, no icon, no library. Set at H1 scale so
   it competes with the hero, which is the point. The caveat line is part of the
   component and must ship with it.
   --------------------------------------------------------------------------- */
.datawall { position: relative; z-index: 2; padding: 104px 0 112px; }
.datawall-frame {
  max-width: 760px; margin: 0 auto 56px; text-align: center;
  font-size: 13px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase;
  color: var(--teal-text); line-height: 1.7;
}
.datawall-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.dw-cell { padding: 0 26px; border-left: 1px solid var(--f-border); text-align: left; }
.dw-cell:first-child { border-left: 0; padding-left: 0; }
.dw-num {
  font-size: clamp(52px, 6.4vw, 104px); font-weight: 700; line-height: 0.92;
  letter-spacing: -0.035em; color: #fff; font-variant-numeric: tabular-nums;
}
/* The multiplier is a unit, not a digit: smaller, teal, and it must not shift
   the optical alignment of the numerals across the four cells. */
.dw-x { font-size: .42em; font-weight: 600; color: var(--teal); vertical-align: .42em;
        letter-spacing: 0; margin-right: .06em; }
.dw-species { margin-top: 20px; font-size: 16px; line-height: 1.4; color: var(--f-text); }
.dw-species em { font-style: italic; }
.dw-note { margin-top: 7px; font-size: 13px; font-weight: 500; color: var(--f-faint); }
.datawall-foot {
  max-width: 820px; margin: 56px auto 0; text-align: center;
  font-size: 15px; line-height: 1.65; color: var(--f-faint);
}
.datawall-foot a { color: var(--teal-text); text-decoration: none; white-space: nowrap; }
.datawall-foot a:hover { text-decoration: underline; }

@media (max-width: 1080px) {
  .datawall-grid { grid-template-columns: repeat(2, 1fr); row-gap: 56px; }
  .dw-cell:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 620px) {
  .datawall-grid { grid-template-columns: 1fr; row-gap: 44px; }
  .dw-cell { border-left: 0; padding-left: 0; }
}

/* ---------------------------------------------------------------------------
   ORGANIC SHAPES RETIRED (Patrick 2026-08-04: "gives an organic feel, but also
   feels messy").

   The leaf/blob border-radius tokens are applied to 9 elements: .pod in four
   variants, .founder-card (mirrored on even), .platform-note, .post-cta and
   .tally-placeholder. Because the radii are asymmetric AND alternate per element,
   no two adjacent cards share an edge treatment, which is what reads as messy.

   The panels reached the same verdict independently: the shapes read closer to
   consumer wellness than to scientific precision, and every benchmark site that
   projects authority (Octarine, Recursion, Chai, Arcadia) uses rectilinear
   geometry with hairlines and technical annotation. The one benchmark that DOES
   use organic/photoreal styling is Seed, a consumer wellness brand, which is
   precisely the register the 2026-06-03 positioning decision moved away from
   ("healthcare company, not DTC wellness"). So the shapes actively work against
   the positioning.

   Replaced with one consistent modest radius. The membrane divider wave is kept
   as the single organic gesture so the brand does not go clinical-cold.
   To revert: delete this block.
   --------------------------------------------------------------------------- */
.pod.leaf-l, .pod.leaf-r, .pod.blob-a, .pod.blob-b,
.platform-note, .post-cta, .tally-placeholder,
.founder-card, .founder-card:nth-child(even) { border-radius: 14px; }

/* ---------------------------------------------------------------------------
   HERO -> PROOF TRANSITION (Patrick 2026-08-04: "the orange hero button shading
   is cut off, and the gradient shading of the stats bar cut in starkly").
   Both are consequences of shortening the hero above, and both are upstream
   traits that only became visible once it got short.

   1. .hero carries overflow:hidden. .cta-solid carries
      box-shadow: 0 12px 34px -10px rgba(250,166,26,.6), which reaches ~36px below
      the button. With the hero's bottom padding cut to 8px the glow was sliced off.
      overflow:visible costs no vertical space, and nothing inside the hero can
      actually overflow horizontally: .hero-canvas, .hero-veil and .hero-fade are
      all position:absolute inset:0, and body already sets overflow-x:hidden.

   2. .hero-fade ends on SOLID var(--f-base), but the fixed .bg-mesh behind it
      continues ramping toward --f-base-2 plus its radial tints. So the hero's last
      pixel is forced to #08202D while the very next pixel is the lighter mesh: a
      real colour step, not an artefact. Ending the fade transparent lets the single
      fixed background run continuously through the boundary.
   --------------------------------------------------------------------------- */
.hero { overflow: visible; padding-bottom: 28px; }
.hero-fade {
  background: linear-gradient(180deg,
    rgba(8,32,45,0.5) 0%,
    rgba(8,32,45,0)  16%,
    rgba(8,32,45,0) 100%);
}