/* =========================================================
   ABOUT & CONTACT — no hand; the swirl carries the page.
   ========================================================= */
body[data-page="about"] {
  /* ART — nothing to place. The hand dials in :root go unused because this
     page has no .layer-hand, and the stripe dials go unused because it has no
     .swirl-front. The swirl itself is global, so it needs no help. */

  /* COPY — with no hand competing for the right side, the column sits at the
     same left inset as the landing but runs wider: this page is copy, not a
     poster. --ctop is not used here (see the centring below). */
  --cw: 44%;
  --cleft: 5.9%;
}

/* Without a hand in front of it, the ribbon at full strength shouts over the
   copy. Softening it is what makes "the swirl carries the page" work rather
   than "the swirl fights the page". */
body[data-page="about"] .swirl-back {
  opacity: .45;
}

/* the contact details read as type, not as another panel inside the panel */
body[data-page="about"] .contact {
  margin: 0;
  font-size: clamp(.8rem, 1.25vw, 1rem);
  line-height: 1.7;
  opacity: 1;
}

/* A quiet underline, not the shared .inkline: an address and a phone number are
   details you read off, not gestures — the hand-drawn stroke would make two
   lines of contact info compete with the headline. */
body[data-page="about"] .contact a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: .25em;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--pink-soft);
  transition: text-decoration-color .2s ease;
}

body[data-page="about"] .contact a:hover,
body[data-page="about"] .contact a:focus-visible {
  text-decoration-color: #fff;
}

/* ---- the real about copy ----------------------------------------------
   The document's opening paragraph rides the .subhead slot, so it needs the
   room of a paragraph, not a strapline (the shared cap is 28ch). */
body[data-page="about"] .subhead {
  max-width: 58ch;
}

/* the story paragraphs — quieter than the subhead, same blue voice */
body[data-page="about"] .about-copy {
  display: grid;
  gap: .75em;
  max-width: 62ch;
}

body[data-page="about"] .about-copy p {
  margin: 0;
  font-size: clamp(.82rem, 1.25vw, 1.05rem);
  line-height: 1.6;
  font-weight: 500;
}

/* ---- the column must FIT the screen (same idea as step-2) --------------
   Three real paragraphs + the contact panel can outgrow a short viewport.
   The centred fixed column gets a scroll fallback; `safe center` keeps the
   top reachable where supported, and where it isn't the plain center it
   falls back to only clips when the copy truly doesn't fit. */
body[data-page="about"] .content--fill {
  justify-content: center;
  justify-content: safe center;
  overflow-y: auto;
  /* no visible track: the column's overflow is small and a scrollbar floating
     mid-page reads as a stray line against the art — the panel cresting the
     fold is the scroll cue */
  scrollbar-width: none;
}


/* touch: the self-scrolling column contains its gestures too */
body[data-page="about"] .content--fill {
  overscroll-behavior: contain;
}