/* Fixed chrome stack — journey experiment (?start=1 / layout-lock)
   Slider bottom anchored to HR (--cx-layout-hero-pad-bottom); headline–slider gap halved */

body.complexity-start.journey-layout-lock {
  --cx-layout-header-h: var(--cx-layout-header-h-complex);
  --cx-layout-header-h-complex: 82px;
  --cx-layout-header-h-compact: 56px;
  --cx-header-pad-top-complex: 1.333rem;
  --cx-header-pad-bottom-complex: 1.333rem;
  --cx-header-pad-top-compact: 1rem;
  --cx-header-pad-bottom-compact: 1rem;
  --cx-layout-hero-h: calc(514px - 0.625rem);
  --cx-layout-stack-h: calc(var(--cx-urgency-height) + var(--cx-layout-header-h) + var(--cx-layout-hero-h));
  --cx-layout-control-y: calc(var(--cx-urgency-height) + 484px);
  --cx-layout-control-in-hero: calc(var(--cx-layout-control-y) - var(--cx-urgency-height) - var(--cx-layout-header-h));
  --cx-layout-hero-content-top: 2rem;
  --cx-layout-hero-pad-bottom: 1.5rem;
  --cx-layout-content-gap: 0.625rem;
  --cx-layout-headline-zone-bonus: 28px;
  --cx-layout-eyebrow-slot: calc(0.667rem * 1.4 + max(0.5rem, calc(1rem - var(--cx-hero-lift) * 0.15)));
  --cx-layout-headline-drift: 1.75rem;
  --cx-header-height: var(--cx-layout-header-h);
  --cx-top-chrome: calc(var(--cx-urgency-height) + var(--cx-layout-header-h));
  --cx-headline-zone-height: 320px;
}

/* Urgency strip slides off; header always owns that slot (paper) — no top/fill handoff bounce */
body.journey-layout-lock.clarity-journey {
  padding-top: 0;
  --cx-top-chrome: calc(var(--cx-layout-header-h-live) + var(--cx-urgency-height));
  --cx-layout-control-y: calc(
    var(--cx-urgency-height) +
    var(--cx-layout-header-h-live) +
    var(--cx-layout-hero-h) -
    var(--cx-layout-hero-pad-bottom) -
    var(--cx-layout-control-h-compact, 4.5rem)
  );
}

/* ——— Urgency parked (see URGENCY-PARKED.md) ——— */
body.journey-no-urgency .chaos-urgency {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.journey-no-urgency.clarity-journey:not(.is-resting) {
  padding-top: 0;
}

body.journey-no-urgency.clarity-journey:not(.is-resting) .cx-header.site-header,
body.journey-no-urgency.complexity-start .cx-header.site-header {
  top: 0;
}

body.journey-no-urgency .cx-page {
  padding-top: var(--cx-layout-header-h);
}

body.journey-no-urgency.complexity-start.journey-layout-lock {
  --cx-layout-stack-h: calc(var(--cx-layout-header-h) + var(--cx-layout-hero-h));
  --cx-layout-control-y: 484px;
  --cx-layout-control-in-hero: calc(var(--cx-layout-control-y) - var(--cx-layout-header-h));
  --cx-top-chrome: var(--cx-layout-header-h);
}

/* ——— Shared fixed header ——— */
body.journey-layout-lock .cx-header.site-header {
  top: 0;
  min-height: calc(var(--cx-layout-header-h) + var(--cx-urgency-height));
  box-sizing: border-box;
}

/* Urgency height is permanent padding — strip animates out; header geometry unchanged */
body.journey-layout-lock.clarity-journey .cx-header.site-header {
  padding-top: calc(
    var(--cx-urgency-height) +
    var(--cx-header-pad-top-complex, 1.333rem) +
    var(--u) * (var(--cx-header-pad-top-compact, 2.333rem) - var(--cx-header-pad-top-complex, 1.333rem))
  );
  height: calc(var(--cx-layout-header-h-live, var(--cx-layout-header-h)) + var(--cx-urgency-height));
  min-height: calc(var(--cx-layout-header-h-live, var(--cx-layout-header-h)) + var(--cx-urgency-height));
  transition:
    height 0.35s ease,
    min-height 0.35s ease,
    padding-bottom 0.35s ease;
}

/* Resting: header/page geometry stays on u=1 transition values — no swap */

/* ——— Fixed hero shell ——— */
body.journey-layout-lock.clarity-journey .cx-hero,
body.journey-layout-lock.complexity-start .cx-hero {
  overflow-x: visible;
  overflow-y: hidden;
}

body.journey-layout-lock .cx-hero {
  height: var(--cx-layout-hero-h);
  max-height: var(--cx-layout-hero-h);
  overflow-x: visible;
  overflow-y: hidden;
  box-sizing: border-box;
}

body.journey-layout-lock .cx-hero__inner {
  position: relative;
  height: 100%;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  box-sizing: border-box;
}

body.journey-layout-lock .cx-hero__content {
  position: relative;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  gap: 0;
  padding-top: var(--cx-layout-hero-content-top);
}

/* Headline row — no overflow clip; keyframe font curve controls size */
body.journey-layout-lock.clarity-journey .cx-hero__headline-row,
body.journey-layout-lock.complexity-start .cx-hero__headline-row {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

/* Site narrows 1280 → 980 with slider (content focus) — do not freeze at 1280 */
body.journey-layout-lock.clarity-journey {
  --width-site: calc(1280px - var(--u) * 300px);
  /* Portrait scales 900px → 1280px; extra taper 769–900 in media query below */
  --cx-hero-portrait-w: clamp(
    14rem,
    calc(14rem + (20.056rem - 14rem) * ((100vw - 900px) / (1280px - 900px))),
    20.056rem
  );
  --cx-hero-portrait-h: clamp(
    20.5rem,
    calc(20.5rem + (29.5rem - 20.5rem) * ((100vw - 900px) / (1280px - 900px))),
    29.5rem
  );
  --cx-hero-portrait-gap: clamp(
    2rem,
    calc(2rem + (4rem - 2rem) * ((100vw - 900px) / (1280px - 900px))),
    4rem
  );
  /* Venn scales 1000px → 1280px; hidden below 1000 (no room beside portrait + headline) */
  --cx-venn-slot-scale: clamp(
    0.55,
    calc(0.55 + 0.45 * ((100vw - 1000px) / (1280px - 1000px))),
    1
  );
  --cx-venn-copy-gap: clamp(
    0.65rem,
    calc(0.65rem + (1.5rem - 0.65rem) * ((100vw - 1000px) / (1280px - 1000px))),
    1.5rem
  );
  --cx-headline-start-size: clamp(
    1.125rem,
    calc(1.125rem + (1.333rem - 1.125rem) * ((100vw - 769px) / (1280px - 769px))),
    1.333rem
  );
}

/* Copy grows as venn slot collapses */
body.journey-layout-lock.clarity-journey .cx-hero__copy,
body.journey-layout-lock.complexity-start .cx-hero__copy {
  position: relative;
  z-index: 0;
  flex: 1 1 100%;
  flex-grow: 1;
  min-width: 0;
  max-width: var(--cx-headline-copy-max, 80%);
  margin-right: calc(
    (var(--venn-slot-px) * var(--cx-venn-slot-scale, 1) + var(--cx-venn-copy-gap, 1.5rem))
    * (1 - var(--venn-space, 0))
  );
  padding-top: calc(var(--headline-free-grow, 0) * var(--cx-layout-headline-drift));
}

body.journey-layout-lock.clarity-journey .cx-hero__title-complex {
  min-height: 0;
}

body.journey-layout-lock.clarity-journey .cx-hero__headline-row {
  position: relative;
  gap: 0;
  overflow-x: visible;
}

body.journey-layout-lock.clarity-journey .cx-hero__venn,
body.journey-layout-lock.complexity-start .cx-hero__venn {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  flex: none;
  width: calc(var(--venn-slot-px) * var(--cx-venn-slot-scale, 1));
  transform: translateX(var(--venn-slide, 0));
}

/* Skills: natural height at u=0; reserved slot only while skills fade (slider > 0) */
body.journey-layout-lock.clarity-journey .cx-hero__eyebrow {
  flex-shrink: 0;
  min-height: calc(var(--cx-eyebrow-reserved-height, 0px) * var(--cx-eyebrow-min-active, 0));
  max-height: none;
  margin-bottom: max(0.5rem, calc(1rem - var(--cx-hero-lift) * 0.15));
  overflow: visible;
  pointer-events: none;
  opacity: 1;
}

/* Block transition.css rest-morph from shifting vertical chrome */
body.journey-layout-lock.clarity-journey .cx-hero__inner {
  padding-top: 0;
  padding-bottom: 0;
  min-height: 100%;
}

/* Control rail: slider bottom locked to HR; top rises as u compacts the panel */
body.journey-layout-lock.clarity-journey .cx-hero__slider-block,
body.journey-layout-lock.complexity-start .cx-hero__slider-block {
  position: absolute;
  top: auto;
  bottom: var(--cx-layout-hero-pad-bottom);
  left: 0;
  right: 0;
  width: 100%;
  margin-top: 0;
  z-index: 2;
}

body.journey-layout-lock.clarity-journey .cx-hero__content {
  gap: 0;
  margin-left: calc((var(--cx-hero-portrait-w, 20.056rem) + var(--cx-hero-portrait-gap, 4rem)) * (1 - var(--portrait-shrink)));
}

/* ——— Fixed hero shell ——— */
body.journey-layout-lock.clarity-journey .cx-page {
  padding-top: calc(
    var(--cx-layout-header-h-live, var(--cx-layout-header-h)) + var(--cx-urgency-height)
  );
}

/* Desktop: hide mobile chrome (markup shared with site-shell pages) */
body.journey-layout-lock .cx-nav-toggle,
body.journey-layout-lock .cx-mobile-nav,
body.journey-layout-lock .cx-mobile-nav-backdrop {
  display: none;
}

@media (min-width: 769px) {
  body.journey-layout-lock.clarity-journey .cx-hero,
  body.journey-layout-lock.complexity-start .cx-hero,
  body.journey-layout-lock .cx-hero {
    overflow-x: clip;
  }
}

@media (max-width: 768px) {
  body.complexity-start.journey-layout-lock {
    --cx-layout-header-h: 72px;
    --cx-layout-hero-h: min(calc(514px - 0.625rem), 85vh);
    --cx-layout-stack-h: calc(var(--cx-layout-header-h) + var(--cx-layout-hero-h));
    --cx-layout-control-y: calc(var(--cx-layout-header-h) + var(--cx-layout-hero-h) - 2.75rem);
  }

  body.journey-layout-lock .cx-hero__slider-block {
    position: relative;
    top: auto;
    bottom: auto;
  }

  body.journey-layout-lock .cx-hero__headline-row,
  body.journey-layout-lock .cx-hero__copy {
    max-height: none;
  }
}

/* clarity-transition sets live header token; bind after base tokens (this file loads last) */
body.journey-layout-lock.clarity-journey {
  --cx-layout-header-h: var(--cx-layout-header-h-live);
}

/* Skip / cold resting — no chaos flash before clarity-journey.js */
html.journey-skip-entry .chaos-layer,
body.clarity-journey.is-resting .chaos-layer {
  display: none !important;
  visibility: hidden !important;
}

html.journey-skip-entry body.clarity-journey .cx-slider__heading,
html.journey-skip-entry body.clarity-journey .cx-slider {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html.journey-skip-entry body.clarity-journey .cx-rest-panel[hidden] {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

@media (max-width: 1190px) and (min-width: 769px) {
  body.clarity-journey {
    --cx-headline-copy-max: 100%;
  }
}

@media (max-width: 1000px) {
  body.journey-layout-lock .cx-hero__venn {
    display: none !important;
  }
}

/* Narrow tablet: shrink portrait so slider + headline keep room beside it */
@media (max-width: 900px) and (min-width: 769px) {
  body.journey-layout-lock.clarity-journey {
    --cx-hero-portrait-w: clamp(
      10rem,
      calc(10rem + (14rem - 10rem) * ((100vw - 769px) / (900px - 769px))),
      14rem
    );
    --cx-hero-portrait-h: clamp(
      14.75rem,
      calc(14.75rem + (20.5rem - 14.75rem) * ((100vw - 769px) / (900px - 769px))),
      20.5rem
    );
    --cx-hero-portrait-gap: clamp(
      1.25rem,
      calc(1.25rem + (2rem - 1.25rem) * ((100vw - 769px) / (900px - 769px))),
      2rem
    );
  }
}