/* About page. Shares the nav, grid and type family with styles.css; this file
   adds the black background and the page's single stacked column. */

html,
body {
  background: #000000;
}

@media (max-width: 860px) {
  .nav-links.is-open {
    background: #000000;
  }
}

/* Same 1600px grid as every other page. The design starts the content well
   below the nav — 240px at its 1728 frame — which scales down with the
   viewport rather than eating the screen on a laptop. */
.about {
  max-width: calc(100rem + var(--page-gutter) * 2);
  margin: 0 auto;
  padding: clamp(3.75rem, 14vw, 15rem) var(--page-gutter) 7.5rem;
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 3.94vw, 4.25rem);
}

/* The design's column gap is only 68px — the air between blocks comes from
   trailing blank lines inside its text frames (two 60px lines after the body,
   two after the columns, one 120px line after Elsewhere). Those read as
   deliberate section breaks, so they're margins here rather than empty markup. */
.about-cols {
  margin-top: clamp(1.25rem, 6.94vw, 7.5rem);
}

.about-elsewhere {
  margin-top: clamp(2rem, 6.94vw, 7.5rem);
}

.about-contact {
  margin-top: clamp(1.25rem, 6.94vw, 7.5rem);
}

/* The design's row stops 320px short of the grid, and inside that the prose sits
   in a 1000px frame — 1000 of the 1564 the grid gives it, so a little under two
   thirds. The black to its right is part of the layout rather than whatever is
   left over, so this is a share of the column and not a max-width: capping it
   in pixels held the proportion only above ~1560px and let the copy run the full
   grid on every screen below that. The share holds until the phone layout takes
   over at 600px. */
.about-body,
.about-cols {
  width: 64%;
}

.about-title {
  width: 100%;
  max-width: 78rem;
  font-weight: 300;
  font-size: clamp(2.5rem, 5.5vw, 6rem);
  line-height: 1.15;
}

.about-body {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  color: var(--text-secondary);
}

/* The design opens the body block with this line in solid white, above the
   muted paragraphs it introduces. The three phrases are separated by a drawn
   dot rather than by a typographic middot — the design sets it as a 4px circle,
   which is 0.1em against its 40px type and rather smaller than the glyph. Flex
   so the dot can be a real element, and so a phrase wraps whole on a phone. */
.about-strapline {
  color: var(--text-primary);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.3em;
}

/* The design centres it on the x-height, not on the caps — a dot on the cap
   middle reads as a diacritic floating above a line that is mostly lowercase.
   Centring the 4px box in the 60px line lands on the x-height middle, so the
   flex centring above is doing the work and the dot needs no nudge of its own. */
.about-strapline-dot {
  width: 0.1em;
  height: 0.1em;
  border-radius: 50%;
  background: currentColor;
}

/* 40px on 60px in the design — the body and the two lists are all one size. */
.about-body,
.about-col {
  font-weight: 300;
  font-size: clamp(1.375rem, 2.32vw, 2.5rem);
  line-height: 1.5;
}

.about-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Scroll reveal, driven by reveal.js — the block rises into place as one piece,
   not line by line. The hidden state is gated on .is-armed, which the script
   only adds when it is going to run, so without JS or under reduced motion the
   block is simply visible. Generic enough to move to styles.css if a second
   page ever wants it. */
[data-reveal].is-armed {
  opacity: 0;
  transform: translateY(2.5rem);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

[data-reveal].is-armed.is-in {
  opacity: 1;
  transform: none;
  /* Nothing left to promote once it has arrived. */
  will-change: auto;
}

/* Display type — the two closing blocks run at heading size, with the links
   themselves in the muted tint. */
.about-display {
  display: block;
  font-weight: 300;
  font-size: clamp(2.25rem, 5.5vw, 6rem);
  line-height: 1.25;
}

.about-contact .about-display {
  line-height: 1.04;
}

/* Links rest in the same muted tint as the rest of the page's secondary text,
   then come up to solid white and underline on hover. opacity: 1 overrides the
   global a:hover dip, which would otherwise stop them short of full white. */
.about-elsewhere a:hover,
.about-contact a:hover {
  color: var(--text-primary);
  opacity: 1;
  text-decoration: underline;
  text-decoration-color: currentColor;
}

/* Phone: the copy takes the whole column, since holding a two-thirds share of a
   600px screen would leave a measure too narrow to read. */
@media (max-width: 600px) {
  .about-body,
  .about-cols {
    width: 100%;
  }
}

/* The two lists sit side by side only while half the block still holds the
   longest item — "Creative & Design Direction" — on one line. Below about 950px
   the copy has hit the floor of its clamp and stopped shrinking while the block
   carries on narrowing, so the item would break; they stack from there instead.
   That is earlier than the phone breakpoint below, which is why it is its own
   query rather than part of it. */
@media (max-width: 960px) {
  .about-cols {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 860px) {
  .about {
    padding: 40px 20px 60px;
    gap: 60px;
  }

  .about-title {
    font-size: 36px;
  }

  .about-body,
  .about-col {
    font-size: 18px;
  }

  /* The desktop section breaks are proportional to a 1728px frame; at phone
     width they'd leave screens of empty black, so they scale right back. */
  .about-cols,
  .about-contact {
    margin-top: 20px;
  }

  .about-elsewhere {
    margin-top: 40px;
  }

  .about-display {
    font-size: 36px;
  }
}