/* About page. Shares the homepage shell, tokens, and type scale; this file only
   adds the two things the homepage has no pattern for: the story column and
   the team portrait grid. */

/* The content column is site.css's .wrap, not a local copy of it. A copy
   here put the gutter outside the max-width box instead of inside, so every
   line on the page sat one gutter (28px) left of the logo and the footer. */
.about-page{padding:72px 0 112px}

/* Centred, like .legal-container on /terms and /privacy. Left-aligned, the
   story left ~470px of dead space down the right of a 1200px page, against a
   team grid below that uses the full width.
   680px rather than .legal-container's 760px: at 20px that lands near 70
   characters a line, which is where long-form prose stays readable, and it
   has to equal the story's own width or the centring is a lie. At 760 the
   680px story sat flush left inside it, so the visible block landed 40px
   left of centre -- neither centred nor aligned, which reads as neither
   choice made on purpose. /terms gets away with 760 because its prose fills
   the box. */
.about-header{max-width:680px;margin:0 auto}
.about-header .eyebrow{margin-bottom:20px}
.about-header h1{font-family:var(--serif);font-weight:400;font-size:clamp(42px,6vw,72px);line-height:1.05;letter-spacing:-.025em;text-wrap:balance}

/* The story. Width comes from .about-header above, which is the column. */
.about-story{margin-top:40px;display:flex;flex-direction:column;gap:24px}
.about-story p{font-size:20px;line-height:1.65;color:var(--ink-3);text-wrap:pretty}
/* The sign-off. The story is written in James's voice, so it closes with his
   name; set apart from the prose above it rather than reading as a fifth
   paragraph. The serif does that work, matching the h1 above and already
   loaded for it. Deliberately NOT italic: --sans is Figtree, which ships no
   italic cut (see the @font-face block in site.css), so font-style:italic
   got a browser-synthesised slant -- the only faked type on the site. The
   real italic is Newsreader's, and its latin file is 147KB, which is not a
   trade worth making for one line. Size stays at the body's, so the step
   down is serif plus colour rather than three things at once. */
.about-story .about-signoff{margin-top:16px;font-family:var(--serif);color:var(--muted)}

/* Our team */
.about-team{margin-top:112px;padding-top:56px;border-top:1px solid var(--rule)}
/* The heading uses site.css's .h2-sm. A local copy of that rule drifted
   once already: site.css drops .h2-sm to 30px at <=700px and the copy did
   not, so this heading alone stayed 34px on a phone. */
/* Fixed column counts rather than auto-fit: the roster is six, and auto-fit
   lands on four at tablet width, which leaves a two-card orphan row. 6 / 3 / 2
   all divide evenly. */
.team-grid{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:40px 24px}
.team-member{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
/* Circular because some source photos are circular: Fred's and Keith's come
   from a flattened deck slide, so everything outside the circle is slide
   background, and the rest are cropped to match. max-width caps them at
   tablet/mobile, where the column is wider than the 288px those crops have. */
.team-photo{width:100%;max-width:180px;height:auto;aspect-ratio:1;border-radius:50%;background:#eceee9}
/* 16px, not the 18px a standalone label would take: at six across the column
   is ~170px, and the longest surname here needs every pixel of that to stay on
   one line. balance splits the ones that still wrap evenly instead of leaving a
   single trailing word. */
.team-name{font-size:16px;font-weight:600;color:var(--ink);text-wrap:balance}

@media(max-width:1100px){
 .team-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 32px}
}

@media(max-width:700px){
 .about-page{padding-top:40px;padding-bottom:72px}
 .about-story{margin-top:28px;gap:20px}
 .about-story p{font-size:18px}
 .about-team{margin-top:72px;padding-top:40px}
 /* Two across on a phone rather than one: the cards carry a name and nothing
    else, so a single column would leave the section needlessly long to scroll. */
 .team-grid{margin-top:36px;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}
 .team-photo{max-width:150px}
}