/* ============================================================
   About — the panel over any page (menu.js loads this sheet with about-modal.js on
   first reach) and /about/ itself. Links after core.css.
   Split out of the former style.css on 2026-10-18; rules unchanged, in their
   original order. ============================================================ */

/* ============================================================
   About — the same view (about-view.js) as a panel over any page (about-modal.js,
   opened by ABOUT / CONTACT) and as /about/ itself. Artboards "About @1920px" /
   "About @390px" (2026-09-24), on the 12-col grid: the logo on columns 1–2,
   everything else from column 5's line to column 12's far edge; the four lists
   two columns each. Desktop is one viewport tall and does not scroll —
   statement at the top, the lists centred in what is left, the contact block
   at the bottom, ← Back in the bottom-left corner. Phones scroll.
   ============================================================ */
.about-modal {
  position: fixed;
  inset: 0;
  z-index: 590;                        /* over the header (50) and the pointer labels (500); under the mobile menu (1000) */
  background: var(--bg);
  color: var(--fg);
  /* Instant, both ways — no fade (the user's call, 2026-09-24): hidden ↔ shown
     is the whole transition, and the larger logo is simply there. */
  /* No scrolling by design: the view is sized to the viewport. auto rather than
     hidden so a viewport shorter than the content (an odd aspect) still reaches
     the bottom instead of cutting it off. */
  overflow: hidden auto;
  overscroll-behavior: contain;
}
.about-modal[hidden] { display: none; }
/* While the panel is up: the clock · socials bar goes (the design has Back and
   the phone number in the bottom corners and nothing else). The site header
   stays up over it, logo and nav as on every page (client, 2026-10-22: "you
   lose the header menu… it should stay up there") — above the panel (590),
   under the bar (600) and the mobile menu (1000), and back in view even if it
   had retracted on scroll or faded behind a card takeover. Pages whose header
   sits in flow (All Work, Post, the team pages) pin it for the while, else a
   scrolled page would have it out of sight. It takes the panel's colours
   (core.css) — over All Work the page's are inverted. The panel's own larger
   logo goes, so the view reads as /about/ does. */
html.about-open .furniture-bar { visibility: hidden; }
html.about-open .site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 595;
  transform: none;
  opacity: 1;
  color: var(--fg);
  background: transparent;
}
html.about-open .site-header > * { pointer-events: auto; }
.about-modal .about-logo { display: none; }
/* The first line starts where /work/ and /post/ start theirs: 4.17vw (80px @
   1920) under the header (user, 2026-10-22) — the panel under the fixed
   header, the page under the in-flow one. */
.about-modal .about-view--modal { padding-top: calc(var(--nav-h) + 4.17vw); }

/* /about/ — the page form: the site header in flow at the top (static, as on
   /work/), the view under it. No bar and no footer here either. */
body.about-page { background: var(--bg); color: var(--fg); }
.about-page .site-header { position: static; pointer-events: auto; }
.about-main {
  display: block;
  /* No furniture bar on /about/ (about.js), so none of main's bar reserve or
     its own viewport floor (core.css main): the view alone is the page —
     exactly one viewport on desktop (user, 2026-10-22). */
  min-height: 0;
  padding-bottom: 0;
}

/* Held invisible from markup until the content and the fonts are both in
   (about-view.js holdAbout / renderAbout) — the texts appear together. */
.about-view.is-loading { visibility: hidden; }
.about-view {
  box-sizing: border-box;
  height: 100svh;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto 1fr auto;   /* statement · lists (centred in the rest) · contact + Back */
  column-gap: 10px;
  padding: var(--pad-inline);
}
.about-main .about-view {
  padding-top: 4.17vw;                 /* under the in-flow header, as /work/ and /post/ */
  height: auto;
  min-height: calc(100svh - var(--nav-h));   /* the header is in flow above it */
}

/* The panel's own chrome. On desktop the bar is not a box: its two children sit
   in the grid on their own — the logo top-left, Back bottom-left (the artboard;
   a swap was tried and reverted the same day). */
.about-bar { display: contents; }
.about-logo {
  grid-column: 1 / span 2;
  grid-row: 1;
  align-self: start;
  justify-self: start;
  display: block;
  width: 7.61vw;                       /* 146px @ 1920 — three quarters of the board's 194.6 (Figma 2099:5322; the user's call, 2026-09-25) */
}
.about-logo img {
  display: block;
  width: 100%;
  height: auto;
}
/* ← Back: the same H1 as the statement (Figma 2099:5323 — 72px @ 1920, 1.0,
   -3%), the arrow drawn (see about-view.js): a shaft the width of the letters'
   height with a small open head, on a hairline that scales with the type. */
.about-back {
  grid-column: 1 / span 2;
  grid-row: 3;
  align-self: end;
  justify-self: start;
  appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  color: inherit;
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: 3.75vw;                   /* 72px @ 1920 — the statement's */
  line-height: 1;
  letter-spacing: -0.03em;
  text-align: left;
  cursor: pointer;
}
.about-back-arrow {
  display: inline-block;
  width: 0.9em;                        /* 36 × 20 units of 0.025em: the stroke is one unit */
  height: 0.5em;
  vertical-align: 0.08em;              /* centred a third of the way up the letters */
  margin-right: 0.04em;
  overflow: visible;
}

/* The statement: REFRAME THE WORLD® on its own line, then the sentence. 72px @
   1920 on the 1.0 line, as the old page's hero was. Statement, lists and
   contacts span from column 4 to 12 (user, 2026-10-22; was 5–12), their left
   edge pushed onto WORK's in the nav by --about-nav-shift (measured by
   about-view.js alignToNav; 0 where the nav is hidden). */
.about-view :is(.about-statement, .about-lists, .about-contact) { margin-left: var(--about-nav-shift, 0px); }
.about-statement {
  grid-column: 4 / -1;
  grid-row: 1;
  margin: 0;
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: 3.75vw;                   /* 72px @ 1920 */
  line-height: 1;
  letter-spacing: -0.03em;
}
.about-lead {
  display: block;
  text-transform: uppercase;
}

/* The four lists: four equal tracks of the nine-column span, gapped by the
   gutter (on the old eight-column span that was exactly two columns each). */
.about-lists {
  grid-column: 4 / -1;
  grid-row: 2;
  align-self: center;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 10px;
  padding-block: 2.08vw;               /* 40px @ 1920 — never touches the statement or the contacts */
}
.about-label { margin: 0 0 20px; }     /* label → list, at every width (user: 20px, 2026-09-24; the artboard's 40 read as too much) */
.about-list {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: var(--lh-body);         /* 12px italic on ~17px — the artboard's pitch */
}
/* No hover on these lists (the user's call): a press item that links still does,
   it just doesn't say so. */
.about-list a { color: inherit; text-decoration: none; }

/* The contact block: a label per row, its email or phone on the right, against
   column 12's far edge. Both in the H2 size (48px @ 1920). */
.about-contact {
  grid-column: 4 / -1;
  grid-row: 3;
  align-self: end;
  list-style: none;
  margin: 0;
  padding: 0;
}
.about-contact-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.about-contact-value {
  color: inherit;
  text-align: right;
}
/* The links here — the emails, the phone, ← Back — carry their underline at 30%
   and bring it to full on hover; the text itself never dims (the user's call,
   2026-09-24, over the site's underline-and-dim hover). */
.about-contact-value,
.about-back {
  text-decoration: underline;
  text-underline-offset: var(--ul-offset);
  text-decoration-thickness: var(--ul-thickness);
  text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);   /* instant either way, like the panel */
}
/* Not gated on (hover: hover): on a phone the tap's own hover/active state
   brings the underline up the same way, and instantly (no transition on any
   of it, and no tap highlight either). */
.about-contact-value:hover,
.about-contact-value:active,
.about-back:hover,
.about-back:active { text-decoration-color: currentColor; }
.about-contact-value,
.about-back { transition: none; -webkit-tap-highlight-color: transparent; }

/* Tablets (between the phone and desktop breakpoints): the desktop grid, but
   the lists two by two — four lists on eight columns is ~140px each at 900px,
   which wraps every long item. */
@media (min-width: 48.0625em) and (max-width: 64em) {
  .about-lists {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 4.17vw;
  }
}

@media (max-width: 48em) {
  .about-modal {
    overflow-y: auto;                  /* the phone layout is taller than the screen */
    -webkit-overflow-scrolling: touch;
  }
  .about-view {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: auto;
    min-height: 100svh;
  }
  .about-main .about-view { min-height: 0; }
  /* The desktop rules centre the lists and pin the contacts to the grid's end;
     in the column they take the full width. */
  .about-lists,
  .about-contact { align-self: stretch; }
  /* ← Back top-left, the logo top-right (the artboard). The bar stays put at
     the top while the panel scrolls under it (sticky in the panel's own
     scroll), on the theme's ground so the content passing beneath is covered;
     it takes over the view's top pad so nothing peeks above it. */
  .about-bar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    margin: calc(-1 * var(--pad-inline)) calc(-1 * var(--pad-inline)) 0;
    padding: calc(var(--pad-inline) + var(--safe-top)) var(--pad-inline) var(--pad-inline);   /* under the status bar (viewport-fit=cover) */
    background: transparent;             /* QA 2026-10-08: see-through; the content scrolls beneath it */
  }
  /* The logo stands as tall as the type beside it (Back, the statement:
     7.18vw = 28px @ 390), its width following the artwork. */
  .about-logo { width: auto; height: 5.39vw; }   /* 21px @ 390 — three quarters of 28 */
  .about-logo img { width: auto; height: 100%; }
  .about-back { font-size: 7.18vw; }   /* the statement's phone size */
  .about-statement {
    font-size: 7.18vw;                 /* 28px @ 390 */
    margin-top: 17.95vw;               /* 70px @ 390 — under the bar's own 10px pad, the artboard's 80 */
  }
  .about-main .about-statement { margin-top: 15.38vw; }   /* 60px @ 390 under the in-flow header, like /work/ */
  /* The panel under the site header (2026-10-22): its view starts below the
     header, and ← Back sticks just under it rather than at the screen's top. */
  /* Phones: the global site nav only — no ← Back (user, 2026-10-22); the
     menu is the way out. The statement starts where /work/ and /post/ start:
     15.38vw (60px @ 390) under the 40px phone header (20px logo + its pads). */
  .about-modal .about-bar { display: none; }
  .about-modal .about-view--modal { padding-top: calc(40px + var(--safe-top)); }
  .about-modal .about-statement { margin-top: 15.38vw; }
  .about-main .about-view { padding-top: 0; }   /* the statement's 15.38vw is the whole gap, as /work/ */
  /* 2 × 2, on the two halves of the 4-col grid — and PRESS and CLIENTS swap. */
  .about-lists {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
    row-gap: 19.49vw;                  /* 76px @ 390 */
    margin-top: 17.95vw;               /* 70px @ 390 */
    padding: 0;
  }
  .about-group--post    { order: 1; }
  .about-group--social  { order: 2; }
  .about-group--clients { order: 3; }
  .about-group--press   { order: 4; }
  /* Stacked: label over value, a line of air between groups. */
  .about-contact {
    margin-top: 19.49vw;
    display: flex;
    flex-direction: column;
    gap: 1em;
  }
  .about-contact-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .about-contact-value { text-align: left; }
}