/* ==========================================================================
   About

   One statement, given room. The composition deliberately reuses the
   homepage hero's language — eyebrow, oversized display title, a rule, then
   the copy — so the page reads as the same site rather than a subpage.

   The ambient field and grid are re-declared here rather than shared with
   home.css so this page carries no dependency on the homepage stylesheet.
   Both are driven by the same tokens (--field-*, --grid-*), so they stay in
   step with the rest of the site automatically.
   ========================================================================== */

.about {
  position: relative;
  /* Fills the viewport so the footer never rides up on this short page. */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(var(--nav-h) + var(--s-8));
  padding-bottom: var(--s-9);
  overflow: hidden;
}

/* Faint technical grid — static, painted once. */
.about::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: clamp(4rem, 12vw, 9rem) clamp(4rem, 12vw, 9rem);
  mask-image: radial-gradient(
    ellipse 85% 75% at 40% 45%,
    #000 20%,
    transparent 78%
  );
  opacity: var(--grid-opacity);
  z-index: 1;
}

/* --- Ambient field ------------------------------------------------------
   Soft-stopped radial gradients moved by transform only — no filter, so it
   costs nothing to animate. Do not add overflow:hidden to the container:
   clipping a gradient mid-falloff leaves a hard straight edge.
   ------------------------------------------------------------------------ */
.about__field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.about__field span {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform;
}

.about__field span:nth-child(1) {
  width: 50vmax;
  height: 50vmax;
  top: -22%;
  left: -14%;
  background: radial-gradient(
    circle closest-side,
    var(--field-a) 0%,
    var(--field-a-mid) 45%,
    transparent 72%
  );
  animation: ss-drift 24s var(--ease-in-out-quart) infinite;
}

.about__field span:nth-child(2) {
  width: 38vmax;
  height: 38vmax;
  right: -10%;
  bottom: -12%;
  background: radial-gradient(
    circle closest-side,
    var(--field-b) 0%,
    var(--field-b-mid) 48%,
    transparent 74%
  );
  animation: ss-drift 32s var(--ease-in-out-quart) infinite reverse;
}

@media (prefers-reduced-motion: reduce) {
  .about__field span {
    animation: none !important;
    will-change: auto;
  }
}

/* --- Content -------------------------------------------------------------
   Stacked on narrow screens; on wide ones the title and the statement sit
   side by side under a full-width rule. The single-column version left the
   right half of a 1440px screen empty, which read as an unfinished page
   rather than as negative space — this is the same label / rule / two-column
   rhythm the homepage sections already use.
   ------------------------------------------------------------------------ */
.about__inner {
  position: relative;
  /* Above both the field and the grid. */
  z-index: 2;
  width: 100%;
  display: grid;
}

/* Rule under the eyebrow, drawn in on reveal. */
.about__rule {
  display: block;
  height: var(--border-w);
  background: var(--rule);
  margin-block: clamp(var(--s-5), 4vw, var(--s-7));
  transform-origin: left;
}

.about__title {
  font-family: var(--font-display);
  font-size: var(--t-3xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  margin: 0;
}

/* --- Copy ----------------------------------------------------------------
   The supplied paragraph is set in two weights rather than one flat block:
   the opening sentence carries the page, the rest supports it. A blue hairline
   draws down beside the statement to mark where the reading starts. Both
   share a left inset so the column keeps a single spine.
   ------------------------------------------------------------------------ */
.about__copy {
  margin-top: clamp(var(--s-5), 4vw, var(--s-6));
}

.about__statement {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--track-snug);
  color: var(--fg);
  text-wrap: balance;
  padding-left: clamp(var(--s-4), 2vw, var(--s-5));
}

.about__statement::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.18em;
  bottom: 0.12em;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--d-slower) var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
}

.about__statement[data-revealed]::before {
  transform: scaleY(1);
}

.about__body {
  font-size: var(--t-md);
  line-height: var(--lh-relaxed);
  font-weight: 300;
  color: var(--fg-muted);
  /* Wider than --maxw-text: this is the page's only paragraph, so it can
     carry a slightly longer measure without becoming hard to track. */
  max-width: 58ch;
  text-wrap: pretty;
  margin-top: clamp(var(--s-5), 3vw, var(--s-6));
  padding-left: clamp(var(--s-4), 2vw, var(--s-5));
}

/* --- Brand mark ----------------------------------------------------------
   Anchored into the corner the title column leaves open, bleeding off the
   edge so it reads as a compositional device rather than a centred
   watermark. Hairline stroke, ~8% of the foreground — present, not loud.
   ------------------------------------------------------------------------ */
.about__mark {
  /* Hidden by default. It exists to occupy the open area beside the title,
     and that area only exists once the layout goes two-column. Stacked, it
     would sit behind the paragraph — a watermark over body text, which is
     both uglier and harder to read than no mark at all. */
  display: none;
  position: absolute;
  left: calc(var(--gutter) * -0.6);
  bottom: 8%;
  width: min(40vw, 30rem);
  height: auto;
  stroke: color-mix(in srgb, var(--fg) 10%, transparent);
  stroke-width: 0.35;
  pointer-events: none;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .about__statement::before {
    transform: scaleY(1) !important;
  }
}

@media (min-width: 60rem) {
  .about__inner {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    column-gap: clamp(var(--s-8), 7vw, var(--s-10));
    align-items: start;
  }

  .about__inner > .label,
  .about__rule {
    grid-column: 1 / -1;
  }

  .about__title {
    grid-column: 1;
  }

  .about__copy {
    grid-column: 2;
    margin-top: 0;
    /* Nudges the statement's cap height toward the title's, which sits lower
       in its box because of the 0.92 display line-height. */
    padding-top: 0.2em;
  }

  /* Sits in the open area under the title, clear of the copy column. */
  .about__mark {
    display: block;
  }
}