/* ==========================================================================
   CONVEO — Our Story page
   Page-specific styles only. Inherits colors, type scale, layout utilities,
   nav, buttons, and footer from styles.css — load that first.

   Structural model: a fixed left chapter-navigation sidebar (desktop) that
   never scrolls, and a single scrolling narrative column offset to clear it.
   Below 768px the sidebar is replaced by a fixed top bar + full-screen
   overlay — see .chapter-topbar / .chapter-overlay.
   ========================================================================== */

:root {
  --story-sidebar-w: 260px;
  --story-sidebar-gap: 60px;
  --story-content-max: 860px;

  /* Distance from the true viewport edge to the same content edge
     .container uses (max-width: var(--max-width), centered, padded) — so
     the sidebar and main column line up with the nav/footer instead of
     stopping short of the page's actual usable width on wide screens. */
  --container-inset: max(var(--pad-desktop), calc((100vw - var(--max-width)) / 2 + var(--pad-desktop)));

  --fs-vocab: 32px;

  /* The blue-black of slate under compression — illustrative content for
     Chapter 03's vocabulary moment, not a UI color. Deliberately distinct
     from --color-dark (which reads warm/brown-black): this needs to read
     cool and mineral, the way the description does. */
  --slate-color: #141B24;
}

/* ---------- Active top-nav state (this page only) ---------- */
.nav__center a.active {
  opacity: 1;
  border-bottom: 1px solid var(--color-blue);
  padding-bottom: 4px;
}

/* ---------- Fixed chapter navigation (desktop) ---------- */
.chapter-nav {
  position: fixed;
  left: var(--container-inset);
  top: 50%;
  transform: translateY(-50%);
  width: var(--story-sidebar-w);
  z-index: 90;
}

.chapter-nav__list {
  display: flex;
  flex-direction: column;
}

.chapter-nav__item {
  border-bottom: 1px solid var(--white-faint-16);
  padding-bottom: 20px;
  margin-bottom: 20px;
  position: relative;
}

.chapter-nav__item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Active-chapter indicator — small left rule, sits in the sidebar's own
   left padding so it doesn't shift the text when it appears. */
.chapter-nav__item::before {
  content: '';
  position: absolute;
  left: -16px;
  top: 2px;
  bottom: 20px;
  width: 2px;
  background: var(--color-blue);
  opacity: 0;
  transition: opacity 200ms ease;
}

.chapter-nav__item:last-child::before {
  bottom: 2px;
}

.chapter-nav__item.is-active::before {
  opacity: 1;
}

.chapter-nav__link {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.chapter-nav__num {
  flex-shrink: 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--color-blue);
}

.chapter-nav__title {
  font-size: 15px;
  font-weight: var(--fw-regular);
  color: var(--color-white);
  line-height: 1.35;
  opacity: 0.5;
  transition: opacity 200ms ease;
}

/* Brighter treatment + the left rule above are the only active-state
   signals — no weight/shadow change, which read as an unintended glow
   against Studio Dark. */
.chapter-nav__item.is-active .chapter-nav__title {
  opacity: 1;
}

.chapter-nav__item:not(.is-active) .chapter-nav__link:hover .chapter-nav__title {
  opacity: 0.8;
}

/* ---------- Mobile chapter top bar + overlay (hidden on desktop) ---------- */
.chapter-topbar,
.chapter-overlay {
  display: none;
}

/* ---------- Main scrolling column ---------- */
.story-main {
  margin-left: calc(var(--container-inset) + var(--story-sidebar-w) + var(--story-sidebar-gap));
  margin-right: var(--container-inset);
}

/* ---------- Opener ---------- */
.story-opener {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.story-opener__inner {
  max-width: 720px;
}

.story-opener__title {
  font-size: var(--fs-display);
  font-weight: var(--fw-semibold);
  line-height: 1.15;
  color: var(--color-white);
  margin-bottom: 24px;
}

.story-opener__sub {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--white-70);
}

.story-opener__scroll {
  position: absolute;
  left: 50%;
  bottom: 48px;
  width: 12px;
  height: 12px;
  border-right: 1px solid var(--white-muted-50);
  border-bottom: 1px solid var(--white-muted-50);
  transform: translateX(-50%) rotate(45deg);
  animation: storyScrollPulse 2200ms ease-in-out infinite;
}

@keyframes storyScrollPulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.85; }
}

/* ---------- Chapter shell ---------- */
.chapter {
  padding-top: 96px;
  padding-bottom: 96px;
  border-bottom: 1px solid var(--white-faint-16);
  /* Clears the fixed top nav plus breathing room when a sidebar link jumps
     straight to this section. */
  scroll-margin-top: calc(var(--nav-height) + 40px);
}

.chapter:last-of-type {
  border-bottom: none;
}

.chapter-marker {
  margin-bottom: 40px;
}

.chapter-marker__num {
  display: block;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--color-blue);
  margin-bottom: 4px;
}

.chapter-marker__title {
  font-size: 20px;
  font-weight: var(--fw-regular);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-white);
}

.chapter-marker__bar {
  display: inline-block;
  color: var(--color-blue);
  margin-right: 6px;
  font-weight: var(--fw-regular);
}

.chapter__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.chapter__body--narrow {
  max-width: var(--story-content-max);
}

.chapter__body p {
  color: var(--color-white);
}

.chapter__body strong {
  font-weight: var(--fw-semibold);
  color: var(--color-white);
}

.chapter__transition {
  font-weight: var(--fw-semibold);
  color: var(--color-white);
  margin-top: 8px;
}

/* Key lines pulled out of the paragraph flow — not inline emphasis, but
   sized and spaced close to body scale so consecutive beats read as a
   tight run of statements rather than isolated headline-sized moments. */
.chapter__beat {
  font-size: 20px;
  font-weight: var(--fw-medium);
  line-height: 1.4;
  color: var(--color-white);
  margin: 4px 0;
}

.chapter__rule {
  border: none;
  border-top: 1px solid var(--white-faint);
  margin: 0;
}

.chapter__emphasis {
  font-weight: var(--fw-semibold);
  color: var(--color-white);
}

/* ---------- Chapter 01 — The Designer ---------- */
.ch01__grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 64px;
  align-items: start;
}

.ch01__text p {
  color: var(--color-white);
  margin-bottom: 24px;
}

.ch01__credential {
  font-size: var(--fs-feature);
  font-weight: var(--fw-medium);
  line-height: 1.35;
}

.ch01__caption {
  font-size: 15px;
  color: var(--white-muted);
}

.ch01__close {
  font-weight: var(--fw-semibold);
  margin-bottom: 0 !important;
}

.ch01__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--white-faint);
}

/* ---------- Chapter 03 — Four Sentences / vocabulary moment ---------- */
.chapter--vocab .chapter__body {
  margin-bottom: 56px;
}

.chapter--vocab .chapter__body:last-of-type {
  margin-top: 56px;
  margin-bottom: 0;
}

/* The body immediately after the vocab moment sat right against it with no
   breathing room — matches the 56px rhythm already used around this block. */
.chapter--vocab .vocab-moment + .chapter__body {
  margin-top: 56px;
}

.vocab-moment {
  display: flex;
  align-items: center;
  gap: 56px;
  max-width: calc(var(--story-content-max) + 260px);
  background: var(--color-surface);
  padding: 56px;
  opacity: 0.92;
  transform: translateY(6px);
  transition: opacity 500ms ease, transform 500ms ease;
}

.vocab-moment.is-active {
  opacity: 1;
  transform: translateY(0);
}

.vocab-moment__text {
  flex: 1;
}

.vocab-moment__text p {
  font-size: var(--fs-vocab);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  color: var(--color-white);
}

.vocab-moment__color {
  flex-shrink: 0;
  width: 180px;
  border: 1px solid var(--white-faint-16);
}

.vocab-moment__swatch {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--slate-color);
}

.vocab-moment__hex {
  padding: 10px 0;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--white-muted);
  border-top: 1px solid var(--white-faint-16);
}

/* ---------- Chapter 04 — The Questions ---------- */
/* The line grows in as the section enters view — an IntersectionObserver
   toggles .is-active (see our-story.js), CSS does the actual animation
   via transform: scaleY, no animation library involved. A pseudo-element
   rather than border-left because border-width can't be transitioned the
   same way without affecting layout. */
.accumulation {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-left: 24px;
}

.accumulation::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-blue);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1400ms ease;
}

.accumulation.is-active::before {
  transform: scaleY(1);
}

/* ---------- Chapter 05 — comparison trigger ---------- */
.story-modal-trigger {
  color: var(--color-blue);
  text-decoration: underline;
  font-size: inherit;
  font-family: inherit;
}

.story-modal-trigger:hover {
  opacity: 0.8;
}

/* ---------- Chapter 06 — Why Conveo Exists ---------- */
.ch06__lead {
  font-size: var(--fs-feature);
  font-weight: var(--fw-medium);
  line-height: 1.35;
}

.ch06__lead--close {
  margin-top: 16px;
}

.ch06__answer {
  margin-top: 8px;
}

.story-close {
  max-width: var(--story-content-max);
  text-align: center;
  padding-top: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.story-close__line {
  font-size: var(--fs-body);
  color: var(--color-white);
}

/* ---------- Comparison modal ---------- */
.story-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.story-modal[hidden] {
  display: none;
}

.story-modal__overlay {
  position: absolute;
  inset: 0;
  background: var(--dark-scrim);
}

.story-modal__panel {
  position: relative;
  background: var(--color-dark);
  border: 1px solid var(--white-faint-16);
  max-width: 1100px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: 56px;
}

.story-modal__close {
  position: absolute;
  top: 24px;
  right: 24px;
  font-size: 22px;
  color: var(--color-white);
  line-height: 1;
}

.story-modal__close:hover {
  opacity: 0.7;
}

.story-modal__intro {
  font-size: var(--fs-feature);
  font-weight: var(--fw-medium);
  color: var(--color-white);
  max-width: 640px;
  margin-bottom: 40px;
}

.story-modal__compare {
  display: flex;
  align-items: stretch;
  gap: 40px;
}

.story-modal__col {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.story-modal__col-label {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--white-muted);
  margin-bottom: 20px;
}

.story-modal__col--conveo .story-modal__col-label {
  color: var(--color-blue);
}

.story-modal__excerpt {
  flex: 1;
  background: var(--color-surface);
  padding: 28px;
}

.story-modal__excerpt-heading {
  font-size: 15px;
  font-weight: var(--fw-semibold);
  color: var(--color-white);
  margin-bottom: 12px;
}

.story-modal__excerpt p:not(.story-modal__excerpt-heading) {
  color: var(--white-85);
  font-size: 15px;
  line-height: 1.6;
}

.story-modal__divider {
  flex-shrink: 0;
  width: 1px;
  background: var(--white-faint);
}

.story-modal__actions {
  margin-top: 40px;
  text-align: center;
}

.story-modal__secondary {
  color: var(--color-blue);
  font-weight: var(--fw-medium);
}

.story-modal__secondary:hover {
  opacity: 0.8;
}

/* ==========================================================================
   Responsive — Tablet: 768px – 1279px
   ========================================================================== */
@media (max-width: 1279px) {
  :root {
    --story-sidebar-w: 220px;
    --story-sidebar-gap: 40px;
    --story-content-max: 620px;
    --fs-vocab: 26px;
    --container-inset: max(var(--pad-tablet), calc((100vw - var(--max-width)) / 2 + var(--pad-tablet)));
  }

  .ch01__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .ch01__media {
    max-width: 480px;
  }

  .vocab-moment {
    max-width: var(--story-content-max);
    flex-direction: column;
    align-items: flex-start;
    padding: 40px;
  }

  .vocab-moment__color {
    width: 140px;
  }

  .story-modal__compare {
    flex-direction: column;
  }

  .story-modal__divider {
    display: none;
  }
}

/* ==========================================================================
   Responsive — Mobile: below 768px
   ========================================================================== */
@media (max-width: 767px) {
  :root {
    --fs-vocab: 22px;
  }

  /* Desktop sidebar gives way to nothing on mobile — no chapter jump-to
     nav at all here (reverses the original spec's fixed-top-bar mobile
     pattern). The page just scrolls top to bottom like How It Works;
     the site-wide hamburger menu is the only mobile nav on this page. */
  .chapter-nav {
    display: none;
  }

  .chapter-topbar {
    display: none;
  }

  .chapter-topbar__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px var(--pad-mobile);
  }

  .chapter-topbar__num {
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    color: var(--color-blue);
  }

  .chapter-topbar__title {
    font-size: 15px;
    font-weight: var(--fw-medium);
    color: var(--color-white);
  }

  .chapter-topbar__icon {
    margin-left: auto;
    font-size: 20px;
    color: var(--color-white);
  }

  /* Inert now that .chapter-topbar (its only trigger) is gone, but
     display:none explicitly rather than leaving it reachable only by
     the [hidden] attribute never being cleared. */
  .chapter-overlay {
    display: none;
  }

  .chapter-overlay__inner {
    position: relative;
    height: 100%;
    padding: 96px var(--pad-mobile) var(--pad-mobile);
  }

  .chapter-overlay__close {
    position: absolute;
    top: 28px;
    right: var(--pad-mobile);
    font-size: 24px;
    color: var(--color-white);
  }

  .chapter-overlay__list {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  .chapter-overlay__list a {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-size: 22px;
    font-weight: var(--fw-medium);
    color: var(--color-white);
  }

  .chapter-overlay__num {
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    color: var(--color-blue);
  }

  .story-main {
    margin-left: 0;
    margin-right: 0;
    /* No longer reserving space for .chapter-topbar (removed on mobile) —
       just clears the fixed site nav, like every other page. */
    padding-top: var(--nav-height);
    max-width: 100%;
  }

  .story-opener {
    min-height: 520px;
    padding: 0 var(--pad-mobile);
  }

  .chapter {
    padding: 56px var(--pad-mobile);
  }

  .ch01__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .vocab-moment {
    margin-left: var(--pad-mobile);
    margin-right: var(--pad-mobile);
    max-width: none;
    flex-direction: column;
    padding: 28px;
  }

  .vocab-moment__color {
    width: 100%;
    max-width: 160px;
  }

  .story-close {
    padding-left: var(--pad-mobile);
    padding-right: var(--pad-mobile);
  }

  .story-modal {
    padding: 0;
  }

  .story-modal__panel {
    max-height: 100vh;
    height: 100%;
    padding: 80px 24px 40px;
  }
}