/*
  TEXT PAGES — About, Contact
  ---------------------------
  Same centred column and frame navigation as the project pages, but carrying
  running text instead of video.

  5by7 is a dot-matrix display face. It is fine for a few tracked words but hard
  going for a paragraph, so body copy here does three things differently from the
  rest of the site: a short measure, a much looser line-height, and almost no
  letter-spacing. Tracking that reads well on a five-letter nav label is what makes
  a fifty-word paragraph unreadable.
*/

.page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(72px, 11vh, 130px) clamp(66px, 8vw, 150px);
  box-sizing: border-box;
  gap: clamp(26px, 4.5vh, 54px);
}

.page__title {
  margin: 0;
  font-family: "5by7", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--type-nav);
  font-weight: 400;
  line-height: 1;
  /* Looser than a nav label would be, but nowhere near 0.34em — this line is long
     enough that heavy tracking would push it into a second line on most screens. */
  letter-spacing: 0.2em;
  text-indent: 0.2em;           /* balances the trailing space; single line only */
  text-transform: uppercase;
  text-align: center;
  color: var(--fg);
  max-width: 100%;
}

.page__body {
  margin: 0;
  font-family: "5by7", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--type-nav);
  /* Pixel faces need far more leading than a normal typeface — the glyphs are
     open and the dots read as texture, so tight lines blur together. */
  line-height: 2;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--fg);
  /* Deliberately short. Long lines of dot-matrix type are genuinely hard to track
     back to the start of. 60, not 54: measured, 60ch is the narrowest measure at
     which "(except maybe surfing!)" stays on one line in the About copy — at 58
     the "surfing!)" was stranded alone on a fourth line. Matt asked for it. */
  max-width: 60ch;
  /* NOTE: no text-indent here. text-indent only affects the FIRST line, so on a
     wrapping paragraph it would shove line one out of alignment with the rest.
     The tracking is low enough that the trailing-space offset is invisible. */
}

.page__body + .page__body {
  margin-top: -0.6em;           /* pulls stacked paragraphs closer than the flex gap */
}

/* ---------- The mark, in motion, behind the copy ---------- */
/* An <svg class="dots-bg"> that js/dots.js fills with a chain of pink dots and
   morphs between shapes. It is a WASH, not the subject: low opacity, behind the
   text, and it can never take a click.
   Fixed and full-viewport so it does not move when the page scrolls, and clipped
   by the viewport so the wide chain can overhang a phone's edges without causing
   horizontal scroll. */
.dots-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;        /* the box already covers the viewport; nothing may spill */
  /* Full strength — Matt's call after seeing it at 0.28 ("about half"). The copy is
     #d6d8d7 and the dots are #fb649d; where a letter crosses a dot the contrast is
     about 2:1, which is low, but the dots are sparse and moving and the words are
     short. If it ever reads as a fight, come down to 0.6 before touching anything
     else. */
  opacity: 1;
}
.dots-bg circle { fill: var(--link-hover); }

/* The copy sits above the backdrop. */
.page { position: relative; z-index: 1; }

/* Contact: label and value on one line, the value being the link. */
.page__contact {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1em;
  font-family: "5by7", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--type-nav);
  line-height: 1;
  letter-spacing: 0.12em;
  color: var(--fg);
}

.page__contact a {
  /* Deliberately does NOT set `color`. site.css handles both the resting colour
     and the hover; setting it here would override a:hover and kill the pink. */
  transition: color 0.2s ease;
}

/* ---------- Click-to-copy confirmation ---------- */
/* The word "copied" appears beside the address on click — see js/copy.js.
   ABSOLUTELY POSITIONED ON PURPOSE. In normal flow it would widen the line, and
   the list is centred, so every line would shift sideways as it appeared and shift
   back as it went. Out of flow it costs the layout nothing. */
.page__copy {
  position: relative;
}

.page__copy-flag {
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: 1.1em;
  color: var(--link-hover);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
  /* SITS ON THE SAME LINE AS THE ADDRESS, AND THIS IS WHAT MAKES IT EXACT.
     Absolute positioning turns this span into a block, so its text is placed by its
     OWN line box rather than by the line the address sits on. With the inherited
     line-height (15px against a 15.333px font box) that put it 0.667px high —
     invisible on its own, but the two words are side by side, so it read as off.
     `normal` derives the half-leading from the font's own metrics, which is exactly
     what positions the inline text next to it. Measured after: 0.000px apart. */
  line-height: normal;
}

.page__copy-flag.is-on {
  opacity: 1;
}

/* On a narrow screen there is no room to the right of the address, so it goes
   ABOVE the line — still out of flow, still shifting nothing.
   Above, not below: the lines are only 1.1em apart, so anything sitting under the
   email address lands squarely on top of the Instagram line. There is nothing but
   padding above it. */
@media (max-width: 620px) {
  .page__copy-flag {
    left: 50%;
    top: auto;
    bottom: 100%;
    margin: 0 0 0.55em;
    transform: translateX(-50%);
  }
}

/* ---------- About ---------- */
/* Left-aligned, sentence case. The block stays centred in the frame; only the
   text inside it is ranged left. Both elements share one width so their left
   edges line up — sized to content they would not. */
.page--about .page__title,
.page--about .page__body {
  width: min(60ch, 100%);
  text-align: left;
  /* text-indent exists to centre the ink against the trailing letter-space. Ranged
     left there is nothing to centre, and an indent would push the first line off
     the left edge — out of alignment with the paragraph under it. */
  text-indent: 0;
}

.page--about .page__title {
  text-transform: none;
  /* Sentence case does not need caps-level tracking; 0.2em was set for uppercase. */
  letter-spacing: 0.1em;
}

@media (max-width: 860px) {
  .page {
    padding: clamp(64px, 10vh, 110px) clamp(28px, 7vw, 70px);
  }
  .page__body {
    max-width: 44ch;
  }
  .page--about .page__title,
  .page--about .page__body {
    width: min(44ch, 100%);
  }
}

/* PHONES: ABOUT GOES BACK TO CENTRED.
   The block is already centred to the pixel — measured at 375px, 28px of gap on
   both sides — but the COPY is ranged left, and ranging left needs a line long
   enough for that left edge to read as an axis. At phone width the lines are short
   and the right edge very ragged, so the whole block reads as sitting left of
   centre. Centred is what every other page does anyway; the left-ranged treatment
   stays on the wider screens it was designed for. */
@media (max-width: 560px) {
  .page--about .page__title,
  .page--about .page__body {
    text-align: center;
  }
}