/* ==========================================================================
   Evince — landing page
   --------------------------------------------------------------------------
   Page chrome for the landing page only: the masthead, the section rhythm,
   the claim grid, the loop header, the audience grid and the footer.

   Every brand component this file arranges — wordmark, mark, buttons, links,
   cards, numbered list rows, type scale, motion — comes from `evince.css`.
   Nothing here is a brand component, and nothing here invents a colour.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page frame
   --------------------------------------------------------------------------
   The source is a fixed 1120px sheet with 64px gutters, i.e. a 992px content
   column. Here the surfaces run full-bleed — a landing page, not a specimen
   sheet — and `--ln-measure` holds that same column at the centre, so the
   composition is exact at >= 1240px and reflows below it. */

.ln {
  --ln-gutter: var(--ev-space-8);  /* 64 */
  --ln-section-y: 92px;
  --ln-measure: 992px;
}

.ln-inner {
  width: 100%;
  max-width: var(--ln-measure);
  margin-inline: auto;
}

.ln-section {
  padding: var(--ln-section-y) var(--ln-gutter);
}

.ln__skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 10;
  background: var(--ev-cream);
  border: 1px solid var(--ev-rule);
  color: var(--ev-rust);
  padding: 10px 18px;
  font-size: var(--ev-size-fine);
  transition: top var(--ev-dur-micro) var(--ev-ease);
}

.ln__skip:focus {
  top: 16px;
}

/* --------------------------------------------------------------------------
   2. Reversed type
   --------------------------------------------------------------------------
   Promoted into `evince.css`: on a rust ground display/heading/quote go cream,
   their `<em>` goes mustard, and lead goes muted sand. The design system owns
   the reversed pairings now, so there is nothing to override here. */

/* --------------------------------------------------------------------------
   3. Masthead — nav + hero, one rust field
   -------------------------------------------------------------------------- */

.ln-masthead {
  padding: var(--ev-space-5) var(--ln-gutter) 96px;
}

.ln-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ev-space-4) var(--ev-space-5);
  flex-wrap: wrap;
}

/* The nav lockup is the entrance wordmark: typed letters, then the drawn C.
   Held above the documented 18px cap minimum with room to spare. */
.ln-nav .ev-wordmark {
  --ev-wordmark-size: 28px;
  flex: none;
}

.ln-nav__list {
  display: flex;
  gap: 34px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Nav links take the house wipe, same as TextLink — a mustard rule redrawn
   left to right. The colour is constant: the system animates transform and
   line-draw only, never colour. */
.ln-nav__link {
  --u: 0;
  position: relative;
  font-size: 14px;
  color: var(--ev-text-on-rust-muted);
  padding-bottom: 5px;
}

.ln-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--ev-mustard);
  transform: scaleX(var(--u));
  transform-origin: left;
  transition: transform var(--ev-dur-micro) var(--ev-ease);
}

.ln-nav__link:hover,
.ln-nav__link:focus-visible {
  --u: 1;
  color: var(--ev-text-on-rust-muted);
}

.ln-nav__link:focus-visible {
  outline-color: var(--ev-mustard);
}

.ln-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ev-space-5);
  padding-top: 78px;
  text-align: center;
}

.ln-hero__title {
  max-width: 15ch;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.ln-hero__lead {
  max-width: 60ch;
  text-wrap: pretty;
}

.ln-hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ev-space-3);
  flex-wrap: wrap;
  padding-top: var(--ev-space-2);
}

/* --------------------------------------------------------------------------
   4. The thesis — three claims on sand
   -------------------------------------------------------------------------- */

.ln-thesis__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 54px;
}

.ln-thesis__title {
  max-width: 22ch;
  text-align: center;
  text-wrap: balance;
}

.ln-claims {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ev-space-5);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Siblings stagger 90ms, left to right. */
.ln-claims > :nth-child(1) { --i: 0; }
.ln-claims > :nth-child(2) { --i: 1; }
.ln-claims > :nth-child(3) { --i: 2; }

.ln-claim {
  display: flex;
  flex-direction: column;
  gap: var(--ev-space-3);
  padding: 34px 30px;
}

.ln-claim__num {
  font-family: var(--ev-font-display);
  font-size: var(--ev-size-h2);
  line-height: 1;
  color: var(--ev-accent);
}

.ln-claim__title {
  margin: 0;
  font-family: var(--ev-font-ui);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ev-text-deep);
}

.ln-claim__desc {
  font-size: var(--ev-size-small);
}

/* --------------------------------------------------------------------------
   5. How it works — the handover, then the five stages
   -------------------------------------------------------------------------- */

.ln-loop__inner {
  display: flex;
  flex-direction: column;
  gap: 46px;
}

.ln-loop__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}

.ln-loop__headline {
  display: flex;
  flex-direction: column;
  gap: var(--ev-space-5);
}

/* Names the method, then states it — the eyebrow sits tight to the heading
   rather than taking the headline block's full rhythm. */
.ln-loop__titles {
  display: flex;
  flex-direction: column;
  gap: var(--ev-space-2);
}

.ln-loop__title {
  max-width: 16ch;
}

.ln-loop__note {
  max-width: 34ch;
  font-size: var(--ev-size-small);
}

/* The handover sits on cream here, so it takes rust rather than the
   stylesheet's default sand. */
.ln-loop__mark {
  max-width: 150px;
  color: var(--ev-rust);
}

/* The signature gesture, played once on entry instead of looping: on a
   landing section the mark has to settle into the real logo and stay there.
   Default is the settled state, so with JavaScript off — or before the
   observer fires — the mark still reads correctly. */
.ln-handover .ev-handover__circle {
  animation: none;
}

.ln-handover .ev-handover__circle--leave {
  opacity: 0.55;
}

.ln-handover.is-playing .ev-handover__circle--leave {
  animation: ln-hand-l 1.7s var(--ev-ease) both;
}

.ln-handover.is-playing .ev-handover__circle--enter {
  animation: ln-hand-r 1.3s var(--ev-ease) 1.5s both;
}

/* One-shot variants of the design system's looping handover: the circle you
   leave draws, then settles to 55% as the circle you enter draws itself. */
@keyframes ln-hand-l {
  0%   { stroke-dasharray: 0 100; opacity: 0; }
  8%   { opacity: 1; }
  62%  { stroke-dasharray: 75 25; opacity: 1; }
  100% { stroke-dasharray: 75 25; opacity: 0.55; }
}

@keyframes ln-hand-r {
  0%   { stroke-dasharray: 0 100; opacity: 0; }
  8%   { opacity: 1; }
  100% { stroke-dasharray: 75 25; opacity: 1; }
}

/* --------------------------------------------------------------------------
   6. Who it's for — two cards on rust
   -------------------------------------------------------------------------- */

/* The rust run continues into the CTA and the footer, so this section carries
   no bottom padding: the gap below it is owned by `.ln-cta`. */
.ln-audience {
  padding-bottom: 0;
}

.ln-audience__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.ln-audience__card {
  display: flex;
  flex-direction: column;
  gap: var(--ev-space-3);
  padding: 40px var(--ev-space-6);
}

/* --------------------------------------------------------------------------
   7. Call to action + footer
   -------------------------------------------------------------------------- */

.ln-cta {
  padding-top: 52px;
  padding-bottom: 0;
}

/* The rule is drawn on the content column, not the full bleed. */
.ln-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  border-top: 1px solid var(--ev-rule-on-rust);
  padding-top: 46px;
}

.ln-cta__copy {
  display: flex;
  flex-direction: column;
  gap: var(--ev-space-2);
}

.ln-cta__title {
  font-size: clamp(1.875rem, 3.5vw, 2.75rem); /* 44 — between the H1 and H2 steps */
  line-height: var(--ev-leading-h1);
}

.ln-cta__note {
  max-width: 46ch;
  line-height: var(--ev-leading-lead);
}

.ln-cta__btn {
  padding: 17px 40px;
}

.ln-footer {
  padding: 52px var(--ln-gutter) var(--ln-section-y);
}

.ln-footer__inner {
  display: flex;
  justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   8. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .ln {
    --ln-gutter: 40px;
    --ln-section-y: var(--ev-space-9); /* 72 */
  }

  .ln-hero { padding-top: 56px; }

  .ln-loop__head { gap: var(--ev-space-6); }

  .ln-loop__note { max-width: 30ch; }

  /* The three claims stay side by side — they are one argument, read across.
     The cards give up padding rather than the row. */
  .ln-claims { gap: var(--ev-space-4); }

  .ln-claim { padding: var(--ev-space-5) 24px; }
}

@media (max-width: 900px) {
  /* The headline and its note stop sharing a baseline once the note is
     narrower than its own measure. */
  .ln-loop__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ev-space-5);
  }

  .ln-loop__note { max-width: 56ch; }
}

@media (max-width: 860px) {
  .ln-audience__grid { grid-template-columns: 1fr; }

  .ln-thesis__inner { gap: var(--ev-space-6); }
}

@media (max-width: 760px) {
  .ln {
    --ln-gutter: var(--ev-space-4); /* 20 */
    --ln-section-y: 56px;
  }

  .ln-masthead {
    padding-bottom: 64px;
  }

  .ln-nav { gap: var(--ev-space-3) var(--ev-space-4); }

  .ln-nav__list { gap: var(--ev-space-4); }

  .ln-hero {
    padding-top: 44px;
    gap: var(--ev-space-4);
  }

  .ln-claims {
    grid-template-columns: 1fr;
    gap: var(--ev-space-5);
  }

  .ln-claim { padding: var(--ev-space-5) var(--ev-space-4); }

  .ln-audience__card { padding: var(--ev-space-5) var(--ev-space-4); }

  .ln-loop__inner { gap: var(--ev-space-6); }

  .ln-cta__inner,
  .ln-cta { padding-top: var(--ev-space-6); }

  .ln-cta__inner {
    align-items: flex-start;
    gap: var(--ev-space-5);
  }

  .ln-cta__btn { padding: 15px 34px; }

  .ln-footer { padding-top: var(--ev-space-6); }

  .ln-footer__inner { justify-content: flex-start; }
}

/* --------------------------------------------------------------------------
   9. Reduced motion
   --------------------------------------------------------------------------
   `evince.css` now zeroes animation-delay alongside duration in its global
   reduced-motion block, so staggered entrances land instantly rather than
   assembling over their delay window. Nothing to add here. */

/* --------------------------------------------------------------------------
   10. Motion — scroll-revealed entrances
   --------------------------------------------------------------------------
   Everything below obeys the design system's motion rules: one easing, 600-900ms
   entrances, siblings staggered 90ms, movement rightward or upward only, and
   opacity / transform / line-draw exclusively — never colour.

   The displaced state is scoped to `.js`, which an inline script in <head> adds
   before first paint. With JavaScript off, nothing is ever hidden: the page
   renders fully settled and the reveals simply do not happen.

   Two shapes:
     [data-reveal]  — the element itself settles
     [data-stagger] — its children settle in sequence, 90ms apart
   ------------------------------------------------------------------------- */

.js [data-reveal]:not([data-stagger]),
.js [data-stagger] > * {
  opacity: 0;
  transform: translateY(16px);
}

.js [data-reveal]:not([data-stagger]).is-in,
.js [data-stagger].is-in > * {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--ev-dur-entrance-fast) var(--ev-ease),
    transform var(--ev-dur-entrance) var(--ev-ease);
  transition-delay: calc(var(--i, 0) * var(--ev-stagger));
}

/* Stagger indices. Left to right, top to bottom. */
.ln-hero > :nth-child(1)             { --i: 0; }
.ln-hero > :nth-child(2)             { --i: 1; }
.ln-hero > :nth-child(3)             { --i: 2; }
.ln-hero > :nth-child(4)             { --i: 3; }

/* .ln-claims indices are declared with the claim grid, in section 4. */

.ln-loop .ev-list > :nth-child(1)    { --i: 0; }
.ln-loop .ev-list > :nth-child(2)    { --i: 1; }
.ln-loop .ev-list > :nth-child(3)    { --i: 2; }
.ln-loop .ev-list > :nth-child(4)    { --i: 3; }
.ln-loop .ev-list > :nth-child(5)    { --i: 4; }

.ln-audience__grid > :nth-child(1)   { --i: 0; }
.ln-audience__grid > :nth-child(2)   { --i: 1; }

/* --- The stage rows: rule draws, then the step lands ---------------------- */

/* The row's own hairline is handed to a pseudo-element so it can be drawn
   rather than just appearing. Border stays in the box model at transparent, so
   nothing shifts. Rules wipe from the left, as the rulebook specifies. */
.ln-loop .ev-list-row {
  position: relative;
  border-top-color: transparent;
}

.ln-loop .ev-list > .ev-list-row:last-child {
  border-bottom-color: transparent;
}

.ln-loop .ev-list-row::before,
.ln-loop .ev-list > .ev-list-row:last-child::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--ev-rule-strong);
}

.ln-loop .ev-list-row::before { top: -1px; }
.ln-loop .ev-list > .ev-list-row:last-child::after { bottom: -1px; }

.js .ln-loop .ev-list[data-stagger] .ev-list-row::before,
.js .ln-loop .ev-list[data-stagger] > .ev-list-row:last-child::after {
  transform: scaleX(0);
  transform-origin: left;
}

.js .ln-loop .ev-list[data-stagger].is-in .ev-list-row::before,
.js .ln-loop .ev-list[data-stagger].is-in > .ev-list-row:last-child::after {
  transform: scaleX(1);
  transition: transform var(--ev-dur-entrance) var(--ev-ease);
  transition-delay: calc(var(--i, 0) * var(--ev-stagger));
}

/* The numbered step pops in just behind its row — the one-two the rulebook
   describes as "steps pop in sequence". */
.js .ln-loop .ev-list[data-stagger] .ev-num {
  opacity: 0;
  transform: scale(0.55);
}

.js .ln-loop .ev-list[data-stagger].is-in .ev-num {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--ev-dur-micro) var(--ev-ease),
    transform var(--ev-dur-entrance-fast) var(--ev-ease);
  /* One stagger unit behind its own row, so the step lands just after the rule
     that carries it — the "steps pop in sequence" one-two. */
  transition-delay: calc((var(--i, 0) + 1) * var(--ev-stagger));
}

/* --- Anchor navigation ---------------------------------------------------- */

/* evince.css forces scroll-behavior back to auto under prefers-reduced-motion. */
html {
  scroll-behavior: smooth;
}

/* --- Reduced motion ------------------------------------------------------- */

/* evince.css collapses durations and delays globally, but the reveal system
   starts from opacity 0 — so it must be neutralised outright, not merely sped
   up, or a failed observer would leave the page blank. */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal]:not([data-stagger]),
  .js [data-stagger] > *,
  .js [data-stagger].is-in > * {
    opacity: 1 !important;
    transform: none !important;
  }

  .js .ln-loop .ev-list[data-stagger] .ev-list-row::before,
  .js .ln-loop .ev-list[data-stagger] > .ev-list-row:last-child::after,
  .js .ln-loop .ev-list[data-stagger] .ev-num {
    opacity: 1 !important;
    transform: none !important;
  }
}