/* ==========================================================================
   Nura, About

   An editorial story rather than a company page. Large type carries the
   argument; body copy stays to a few lines at a time. Scroll drives a handful
   of scenes, all of which resolve to a readable static state if the script
   never runs or if motion is turned down.
   ========================================================================== */

.ab { --scene-pad: clamp(4rem, 3rem + 5vw, 8rem); }

/* --------------------------------------------------------------------------
   Fade primitive. about.js adds .is-in.
   -------------------------------------------------------------------------- */

.ab-fade {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
  transition-delay: var(--d, 0ms);
}
.ab-fade.is-in { opacity: 1; transform: none; }

.no-js .ab-fade { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ab-fade { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   Scenes. A tall section with a sticky stage, so there is room to scroll
   through a moment without hijacking the scroll itself.
   -------------------------------------------------------------------------- */

.ab-scene { position: relative; }
.ab-stage {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* ==========================================================================
   1. Opening
   ========================================================================== */

.ab-open { height: 240svh; }
.ab-open__inner { position: relative; z-index: 2; max-width: 46rem; }
/* A soft cream halo so thoughts drifting behind the copy never fight it.
   They still read as crowding the page, just not the sentence. */
.ab-open__inner::before {
  content: "";
  position: absolute;
  inset: -18% -24%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(40% 50% at 40% 50%,
    var(--cream) 46%,
    color-mix(in srgb, var(--cream) 82%, transparent) 68%,
    transparent 100%);
}
.ab-open__title {
  margin-block: 1.5rem 2rem;
  max-width: 16ch;
}
.ab-open__copy {
  color: var(--ink-2);
  font-size: var(--fs-lede);
  line-height: 1.7;
  max-width: 40ch;
}

/* The accumulating thoughts. Editorial, set in the display face, never
   bubbles and never boxed. */
.ab-thoughts {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.ab-thought {
  position: absolute;
  left: var(--x);
  top: var(--y);
  font-family: var(--display);
  font-size: clamp(0.95rem, 0.8rem + 0.6vw, 1.35rem);
  line-height: 1.3;
  white-space: nowrap;
  color: var(--terracotta);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.ab-thought.is-on { opacity: 0.55; transform: none; }

/* Behind the copy column they drop back further, so the headline always wins. */
@media (min-width: 901px) {
  .ab-thought { max-width: 22ch; white-space: normal; }
}
@media (max-width: 900px) {
  .ab-thought { font-size: 0.9rem; max-width: 40vw; white-space: normal; }
  .ab-thought:nth-child(n + 9) { display: none; }
}

.no-js .ab-thought,
.ab-thought.is-on { opacity: 0.55; }

/* ==========================================================================
   2. The release
   ========================================================================== */

.ab-release { height: 260svh; }
.ab-release__inner { position: relative; z-index: 2; max-width: 52rem; }

/* Both questions occupy one grid cell and cross-fade. Absolute positioning
   escaped the gutter and let the copy below collide with them. */
.ab-asks { display: grid; }
.ab-ask {
  grid-area: 1 / 1;
  margin: 0;
  max-width: 18ch;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.ab-ask.is-on { opacity: 1; transform: none; }

.ab-release__after {
  margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  display: grid;
  gap: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.ab-release__after.is-on { opacity: 1; transform: none; }

.ab-release__copy {
  color: var(--ink-2);
  font-size: var(--fs-lede);
  line-height: 1.7;
  max-width: 44ch;
}

/* Light, not an object. A cropped device in the corner read as a mistake;
   a soft bloom keeps the warmth without giving the eye something to snag on. */
.ab-release__media {
  position: absolute;
  right: -12%;
  /* Flush to the stage floor, never below it. The stage has to clip (the glow
     runs off to the right and would otherwise widen the page), so anything
     hanging past the bottom gets sliced the moment the sticky releases. The
     gradient is transparent by 80% of the inscribed circle, so sitting flush
     leaves the visible glow comfortably inside the cut. */
  bottom: 0;
  width: min(76vw, 54rem);
  aspect-ratio: 1;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 1.8s var(--ease), transform 1.8s var(--ease);
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--amber) 22%, transparent) 0%,
    color-mix(in srgb, var(--amber) 11%, transparent) 42%,
    color-mix(in srgb, var(--blush) 7%, transparent) 66%,
    transparent 80%);
}
.ab-release__media.is-on { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .ab-release__media { right: -26%; bottom: 0; width: 108vw; }
}

/* Static fallbacks: without the script, everything is simply visible. */
.no-js .ab-ask,
.no-js .ab-release__after { opacity: 1; transform: none; }
.no-js .ab-asks { gap: 0.4rem; }
.no-js .ab-ask { grid-area: auto; }

/* ==========================================================================
   4. Founder
   ========================================================================== */

.ab-founder {
  display: grid;
  grid-template-columns: minmax(0, 30fr) minmax(0, 70fr);
  align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  padding-block: var(--scene-pad);
  /* Gutter and measure on the container, exactly like .wrap, so column one
     starts on the same line as every other section on the page. */
  padding-inline: var(--gutter);
  max-width: var(--page);
  margin-inline: auto;
}
/* At this size a bleed off the viewport edge would read as a crop rather than
   a choice, so the portrait sits on the grid instead. */
.ab-founder__portrait {
  margin: 0;
  overflow: hidden;
  /* The story is long enough that a centred portrait would sit marooned in the
     middle of an empty column. It starts level with the copy and rides along
     as you read instead. */
  align-self: start;
  position: sticky;
  top: clamp(5.5rem, 14vh, 9rem);
  /* Present but not a portrait spread: large enough to read as a person,
     small enough that the copy still leads the section. */
  max-width: 21rem;
}
/* Starts a touch tighter, opens up as the section arrives. Note the placeholder
   keeps its own flex layout, so only the image gets display:block. */
.ab-founder__portrait > img {
  width: 100%;
  height: auto;
  display: block;
  transform: scale(1.06);
  transition: transform 1.6s var(--ease);
}
.ab-founder__portrait.is-in > img { transform: none; }

.ab-founder__copy {
  /* The story runs long now, so the measure opens a little and the column
     takes more of the grid. Still a reading measure, not a page width. */
  max-width: 48ch;
  display: grid;
  gap: 1.25rem;
}
.ab-founder__copy h2 { margin-block: 0.75rem 0.25rem; max-width: 12ch; }
/* A second, quieter headline under the name. A sentence rather than a slogan,
   so it takes title size and the full measure instead of a 12ch slogan width. */
.ab-founder__lead {
  margin-block: 0 0.25rem;
  max-width: none;
  line-height: 1.35;
  color: var(--ink);
}
.ab-founder__copy p { color: var(--ink-2); line-height: 1.75; }

/* Skim anchors in the founder story. The body sits at 76% ink, so a phrase
   lifts to full ink and carries a soft amber wash across the lower half of the
   line, the way someone would run a highlighter over a page. The family only
   ships 400 and 500, so weight is deliberately left alone: asking for 600 here
   would synthesise a bold. Full ink on the wash measures 11.8:1. */
.ab-key {
  color: var(--ink);
  /* Sits from just under the baseline to just over the x-height, so it reads
     as a highlighter stroke rather than a thick underline. */
  background-image: linear-gradient(
    to top,
    transparent 0.06em,
    color-mix(in srgb, var(--amber) 30%, transparent) 0.06em,
    color-mix(in srgb, var(--amber) 30%, transparent) 0.82em,
    transparent 0.82em
  );
  padding-inline: 0.08em;
  /* Each wrapped line gets its own wash rather than one box behind them all. */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
@media (prefers-contrast: more) {
  .ab-key { background-image: none; text-decoration: underline; text-underline-offset: 0.22em; }
}
}

/* A quiet credentials line under the founder copy. Small, set off by a hairline
   so it reads as a footnote rather than more prose. */
.ab-founder__cred {
  margin-top: 0.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-small);
  line-height: 1.75;
  color: var(--ink-3);
  max-width: 42ch;
}
.ab-founder__copy .ab-founder__cred { color: var(--ink-3); }
.ab-founder__credSep { color: var(--terracotta); padding-inline: 0.2rem; }

/* Smaller than a call to action: this is a way to check a person is real, not
   the thing the page is asking anyone to do. */
.ab-founder__link {
  justify-self: start;
  margin-top: 1.5rem;
  padding: 0.85em 1.4em;
  gap: 0.5em;
}
.ab-founder__linkArrow { font-size: 1.05em; line-height: 1; }

/* On a phone the two halves read better stacked than wrapped mid-phrase. */
@media (max-width: 560px) {
  .ab-founder__credSep { display: none; }
  .ab-founder__credLine { display: block; }
}

@media (max-width: 860px) {
  .ab-founder {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.75rem, 5vw, 2.5rem);
  }
  /* Stacked here, so there is no column for it to ride down. */
  .ab-founder__portrait { max-width: 15rem; position: static; }
}

/* ==========================================================================
   5. The first people
   ========================================================================== */

.ab-first {
  position: relative;
  /* Opens and closes on the page colour so the band arrives and leaves instead
     of starting and stopping. Both neighbours are plain cream. */
  background: linear-gradient(to bottom,
    var(--cream) 0%,
    var(--linen) 15%,
    color-mix(in srgb, var(--blush) 24%, var(--linen)) 72%,
    color-mix(in srgb, var(--blush) 10%, var(--linen)) 88%,
    var(--cream) 100%);
  overflow: hidden;
}
.ab-first__inner { max-width: 48rem; }
.ab-first__copy {
  margin-top: clamp(1.75rem, 1rem + 2vw, 2.5rem);
  color: var(--ink-2);
  font-size: var(--fs-lede);
  line-height: 1.7;
  max-width: 44ch;
}
.ab-first__big {
  margin-top: clamp(2.5rem, 2rem + 3vw, 4rem);
  font-family: var(--display);
  font-size: var(--fs-headline);
  line-height: 1.3;
  max-width: 22ch;
}

/* Themes, deliberately not styled as testimonials: no quote marks, no
   attribution, no cards, and a caption saying what they are. */

}

/* ==========================================================================
   6. What early means
   ========================================================================== */

.ab-early__title { max-width: 14ch; }
.ab-early__copy {
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  color: var(--ink-2);
  font-size: var(--fs-lede);
  line-height: 1.7;
  max-width: 46ch;
}
.ab-perks {
  list-style: none;
  margin: clamp(3rem, 2rem + 4vw, 5rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
}
.ab-perks li { display: grid; gap: 0.9rem; align-content: start; }
.ab-perks__t {
  font-family: var(--display);
  font-size: var(--fs-title);
  line-height: 1.45;
  max-width: 22ch;
}
@media (max-width: 760px) {
  .ab-perks { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}

/* ==========================================================================
   7. Closing letter
   ========================================================================== */

.ab-letter { background: var(--cream); }
.ab-letter__inner {
  max-width: 40rem;
  padding-block: clamp(2rem, 1rem + 4vw, 5rem);
}
.ab-letter__open {
  font-family: var(--display);
  font-size: var(--fs-headline);
  line-height: 1.3;
  max-width: 20ch;
}
.ab-letter__body {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  color: var(--ink-2);
  font-size: var(--fs-lede);
  line-height: 1.8;
}
.ab-letter__sign {
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  font-family: var(--display);
  font-size: var(--fs-title);
  line-height: 1.7;
}
.ab-letter__role {
  font-family: var(--text);
  font-size: var(--fs-small);
  color: var(--ink-3);
}

/* ==========================================================================
   8. Final brand moment. Echoes the landing hero.
   ========================================================================== */

.ab-final {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--carbon);
  color: var(--cream);
  min-height: 88svh;
  display: flex;
  align-items: flex-end;
}
.ab-final__media { position: absolute; inset: 0; z-index: 0; }
.ab-final__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 32% 45%;
}
.ab-final__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(150% 115% at 0% 100%,
      color-mix(in srgb, var(--carbon) 50%, transparent) 0%,
      color-mix(in srgb, var(--carbon) 34%, transparent) 42%,
      color-mix(in srgb, var(--carbon) 14%, transparent) 66%,
      transparent 84%),
    linear-gradient(to top,
      color-mix(in srgb, var(--carbon) 72%, transparent) 0%,
      color-mix(in srgb, var(--carbon) 44%, transparent) 30%,
      color-mix(in srgb, var(--carbon) 16%, transparent) 70%,
      color-mix(in srgb, var(--carbon) 38%, transparent) 100%);
}
.ab-final__inner {
  position: relative;
  z-index: 2;
  padding-block: clamp(4rem, 3rem + 6vw, 7rem);
  width: 100%;
}
.ab-final h2 { color: var(--cream); }
.ab-final__line {
  margin-top: 1.5rem;
  color: var(--cream-2);
  font-size: var(--fs-lede);
  max-width: 34ch;
}
.ab-final__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1.1rem;
  margin-top: clamp(2rem, 1.5rem + 2vw, 2.75rem);
}