/* ABOUT, REBUILT — 2026-10-19 (Simon). Page styles for about.html only; styles.css keeps
   the red page itself (.page-red and the original about rules). The story comes from
   Simon's LinkedIn carousel "1999 → Now": the ramble, WHAT CHANGED on a black band,
   WHAT DIDN'T as the page's one centred statement, then the manifesto and its signatures.
   All colours are the page's own tokens; on .page-red --paper is the orange and --ink is
   black, so the band simply swaps them. */

/* The carousel's line, under the wordmark: the warm way in. */
.about-dialup{
  font-family:var(--font-display);font-weight:var(--fw-display);
  font-size:var(--fs-title);line-height:1.15;letter-spacing:-.02em;
  margin-top:clamp(10px,1.2vw,18px);padding-bottom:clamp(40px,6vw,88px);
}

/* Mono section labels, the carousel's WHAT CHANGED / WHAT DIDN'T. */
.about-label{
  font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);
  text-transform:uppercase;
}

/* THE RAMBLE AS A PERFORMANCE (ramble.js). While it plays, the paragraphs keep their room
   but are invisible, and one word at a time is set in the middle of that room, its pivot
   letter fixed in place so the eye never moves. Then the words fade and the full text
   settles in. */
.ramble{position:relative}
.ramble.is-playing .credit{opacity:0}
.ramble .credit{transition:opacity .6s ease}
.rsvp{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
  opacity:0;transition:opacity .3s ease;
}
.ramble.is-playing .rsvp{opacity:1}
.rsvp-word{
  display:block;width:100%;text-align:center;
  font-family:var(--font-display);font-weight:var(--fw-display);
  /* Set by ramble.js from the longest word (see fit()); the clamp is the fallback. */
  font-size:var(--rsvp-size,clamp(3rem,8vw,8.5rem));line-height:1;letter-spacing:-.03em;white-space:pre;
}
.rsvp-word[hidden]{display:none}
/* On a phone the column is the screen less its gutters; let the word use the screen. */
@media (max-width:600px){ .ramble .rsvp{inset:0 calc(var(--pad-x) * -1 + 8px)} }
/* A client's or an award's mark, flashed in place of its name. The files are ink on
   transparent, 350x250 with the mark optically centred, as on the home page's strips. */
/* Sized to a common optical box: a wordmark runs to the width, a roundel (Volvo,
   Converse) stops at the height. The files are 1400px on the long edge, so they stay
   sharp at this size on any screen. */
.rsvp-mark{display:block;width:auto;height:auto;max-width:min(70%,640px);max-height:min(42vh,420px)}
.rsvp-mark[hidden]{display:none}
/* The pivot letter: the ground's paper beige from the rest of the site, the one
   letter on the page that is not black. */
.rsvp-word .piv{color:#F2F0EA}
.rsvp-ctl{
  display:flex;justify-content:center;gap:10px 18px;flex-wrap:wrap;
  margin-top:clamp(18px,2vw,28px);
  font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);
  text-transform:lowercase;
}
.rsvp-ctl button{
  appearance:none;border:0;background:none;padding:0 0 2px;cursor:pointer;
  font:inherit;letter-spacing:inherit;color:var(--ink);opacity:.62;
  border-bottom:1px solid transparent;
}
.rsvp-ctl button:hover{opacity:1}
.rsvp-ctl button[aria-pressed="true"]{opacity:1;border-bottom-color:currentColor}
.rsvp-ctl[hidden]{display:none}

/* WHAT CHANGED / WHAT DIDN'T — one treatment for both, on the orange. A hairline over
   each, the mono label, a display headline at the same size, then the content on the
   same left edge. Before (black band, then a centred quote) the two halves of one idea
   spoke two design languages. */
.about-turn{padding-block:clamp(56px,8vw,112px) 0}
.about-turn + .about-turn{padding-top:clamp(48px,7vw,96px)}
.about-turn .about-label{padding-top:clamp(14px,1.4vw,20px);border-top:1px solid var(--hairline)}
.about-turn-head{
  font-family:var(--font-display);font-weight:var(--fw-display);
  font-size:var(--fs-large);line-height:1;letter-spacing:-.035em;color:var(--ink);
  margin:clamp(18px,2vw,28px) 0 clamp(32px,4vw,56px);
}
.about-shifts{list-style:none;margin:0;padding:0;max-width:44rem;
  font-family:var(--font-mono);font-size:var(--fs-small);letter-spacing:var(--track-mono);
  text-transform:uppercase;line-height:1;
}
.about-shifts li{
  display:grid;grid-template-columns:1fr 3rem 1fr;align-items:baseline;
  padding:clamp(12px,1.3vw,18px) 0;border-bottom:1px solid var(--hairline);
}
.about-shifts li span:first-child{color:var(--mono-dim)}
.about-shifts li span:nth-child(2){text-align:center}
.about-turn-body{
  font-size:var(--fs-head);line-height:1.18;letter-spacing:-.02em;max-width:20em;text-wrap:balance;
}
.byline{padding-top:clamp(72px,10vw,140px)}

/* THE MANIFESTO — label row with a hairline, like WHAT CHANGED / WHAT DIDN'T; the text in
   one column at a reading size, no first-line indents; the directors to its right as the
   byline. On a phone the directors follow the text. */
.manifesto{padding-block:clamp(56px,8vw,112px) clamp(64px,9vw,120px)}
.manifesto-row{
  display:flex;justify-content:space-between;gap:24px;
  padding-top:clamp(14px,1.4vw,20px);border-top:1px solid var(--hairline);
}
.manifesto-grid{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(32px,5vw,96px);margin-top:clamp(28px,3.5vw,52px);align-items:start;
}
.manifesto-body{font-size:var(--fs-body);line-height:1.38;letter-spacing:-.01em;max-width:30em}
.manifesto-body p + p{margin-top:.9em}
.directors-pair{display:flex;gap:clamp(14px,1.6vw,24px);margin-top:16px}
.director{margin:0;flex:0 0 172px;min-width:0}   /* equal frames; a long name runs into the gap */
@media (max-width:420px){ .director{flex:1 1 0} }
.director img{display:block;width:100%;height:auto;box-sizing:border-box;border:6px solid var(--ink)}   /* a black frame, the page's one other colour (Simon, 2026-10-19) */
/* Each director's LinkedIn, under the name. */
.director-in{display:inline-flex;margin-top:8px;color:var(--ink);opacity:.82;transition:opacity .15s}
.director-in:hover{opacity:1}
.director-in:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.director figcaption{display:flex;flex-direction:column;gap:4px;margin-top:10px}
.director-name{font-size:var(--fs-micro);line-height:1.3;white-space:nowrap}   /* one line each, so Magic and Mechanism sit level */
.directors-pair{column-gap:clamp(28px,2.6vw,40px)}
@media (max-width:900px){
  .manifesto-grid{grid-template-columns:1fr}
}

@media (max-width:600px){
  .about-shifts li{grid-template-columns:1fr 2rem 1fr}
  .about-shifts{font-size:var(--fs-mono)}
}