/**
 * About page — "The Faceplate"
 *
 * Chosen from three candidate layouts on 2026-07-21. See
 * docs/briefs/2026-07-21-about-page.md for the decision and for the
 * placeholder copy still to be verified.
 *
 * Layout only. Colour, type, space, radius, and depth come from
 * tokens.css; components come from base.css. Three of this page's
 * objects are base-layer components rather than local ones:
 *   .spec-panel     — the identification plate
 *   .band-graphite  — the seated band
 *   .readout-panel  — the fleet readout
 * Only the differences live here.
 *
 * The premise: graphite carries the page. Where the landing page places
 * a single graphite object on paper, this page places several, and the
 * largest of them spans the full content width.
 *
 * The structural rule this layout has to respect is DESIGN.md §2:
 * "Graphite is never used as a page background; it arrives as an object
 * placed on the page." Every graphite region here is therefore BOUNDED —
 * it has a top edge with a bevel, a bottom edge with a contact shadow,
 * radius on all four corners, and paper visible above and below it. A
 * graphite region that bled to the viewport edges with no top or bottom
 * would be a dark section, and the system does not have those.
 */

/* =====================================================================
   1. SECTION RHYTHM
   The band and the panel are heavy objects, so the paper around them is
   given more room than it would otherwise need. Crowding a graphite
   object is what makes a two-material layout read as a dark theme.
   ===================================================================== */

.about-section {
  padding-block: var(--space-5xl);
}

.about-open {
  padding-block: var(--space-5xl) var(--space-4xl);
}

.about-shop {
  background: var(--paper-100);
  border-block: 1px solid var(--paper-200);
}

.about-close {
  padding-block: var(--space-4xl) var(--space-6xl);
}

@media (max-width: 767px) {
  .about-section {
    padding-block: var(--space-4xl);
  }
}

.about-eyebrow {
  margin: 0 0 var(--space-lg);
  color: var(--ink-muted);
}

.about-head {
  margin-bottom: var(--space-3xl);
}

.about-lede {
  margin-top: var(--space-xl);
  color: var(--ink-muted);
}

.about-prose {
  margin-top: var(--space-xl);
}

/* =====================================================================
   2. OPENING — statement and identification plate
   ===================================================================== */

.about-open-grid {
  display: grid;
  gap: var(--space-3xl);
  align-items: start;
}

.about-display {
  max-width: 18ch;
}

@media (min-width: 1024px) {
  .about-open-grid {
    /* The plate is a fixed object, not a fluid column: it should stay the
       size of a real plate as the page widens rather than stretching. */
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--space-4xl);
  }

  .about-idplate {
    /* Optically seats the plate against the lede rather than the eyebrow,
       so it reads as attached to the statement it annotates. */
    margin-top: var(--space-4xl);
  }
}

/* The identification plate IS the spec panel from base.css — the same
   graphite faceplate holding a two-column <dl> of fixed facts, applied
   to the company instead of to an item. It uses that component rather
   than reimplementing it; only the two differences below live here.

   base.css switches the spec panel to two columns at a 640px VIEWPORT,
   but this plate sits in a 340px column, so the media query fires while
   the container is still narrow and the pairs would be cramped. Forcing
   a single column keeps key over value at every size. */
.about-idplate dl {
  grid-template-columns: minmax(0, 1fr);
}

.about-idplate dd {
  border-top: 0;
  padding-top: 0;
  padding-bottom: var(--space-md);
}

.about-idplate-head {
  margin: 0 0 var(--space-sm);
  color: var(--graphite-300);
}

/* =====================================================================
   3. THE SEATED BAND
   The layout's centrepiece. Bounded on all four sides, bevel on the top
   edge, contact shadow underneath. Paper is visible above and below it,
   which is what keeps it an object rather than a background.
   ===================================================================== */

/* The band itself is .band-graphite in base.css — this page was where it
   was designed, but nothing about it is About-specific, so it lives in
   the base layer for the pages still to be rebuilt. Only the contents
   are styled here. */

/* The head and the photograph share the top of the band. Stacked below
   900px, side by side above it, with the trailing space carried by the
   wrapper so the two never disagree about it. */
.about-band-top {
  display: grid;
  gap: var(--space-2xl);
  margin-bottom: var(--space-3xl);
}

@media (min-width: 900px) {
  .about-band-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: var(--space-4xl);
    align-items: start;
  }
}

/* A rem cap, not a ch cap. `ch` resolves against THIS element's font —
   1rem Public Sans — not against the serif headline inside it, so a ch
   value here silently constrains the headline to roughly half its
   intended measure. */
.about-band-head {
  max-width: 44rem;
}

/* A photograph seated on the faceplate: a .plate-half from base.css §8.1
   inside an .on-graphite region, so the component swaps its paper
   hairline for a graphite one and drops the contact shadow. That
   substitution is the whole reason the figure does not read as a card
   nested in a card — a paper rule on a dark ground draws a bright
   outline around the image, which is exactly what this band may not
   contain. The crop is baked into the source, so the image runs at its
   own 3:2 and nothing re-crops it. Nothing page-specific is left to set
   here. */

.about-band-headline {
  color: var(--paper-000);
}

.about-band-lede {
  margin: var(--space-xl) 0 0;
  max-width: var(--measure-prose);
  color: var(--graphite-300);
  font-family: var(--font-serif);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  text-wrap: pretty;
}

/* The three modes, divided by rules rather than boxed. Boxing them would
   nest a card inside a card, which the system prohibits outright. */
.about-modes {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--graphite-700);
}

.about-mode {
  display: grid;
  gap: var(--space-sm);
  padding-block: var(--space-2xl);
  border-bottom: 1px solid var(--graphite-700);
}

.about-mode:last-child {
  border-bottom: 0;
}

.about-mode-index {
  color: var(--graphite-300);
}

.about-mode-title {
  color: var(--paper-000);
}

.about-mode-body {
  margin: 0;
  color: var(--graphite-300);
  font-family: var(--font-serif);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  text-wrap: pretty;
}

/* Signal Bright, not Signal Ink: on a graphite ground the darker blue
   does not clear contrast. DESIGN.md §2. */
.about-mode-link {
  display: inline-flex;
  align-items: center;
  align-self: start;
  min-height: 44px;
  color: var(--signal-bright);
  font-family: var(--font-sans);
  font-size: var(--type-ui-size);
  text-underline-offset: 0.18em;
  transition: color var(--duration-hover) var(--ease-out-quart);
}

.about-mode-link:hover {
  color: var(--paper-000);
}

@media (min-width: 900px) {
  /* Three columns split by vertical rules — the divisions on a real
     faceplate, which are engraved lines, not raised boxes.

     The four content rows are declared on the list and each item takes
     them as a subgrid, so index, title, body, and link align across both
     columns regardless of how many lines the body runs to. Without it
     each item is its own grid and the rows drift apart. */
  .about-modes {
    /* Two ways to hire us, not three. "Rent it with an operator" was not a
       separate product but production services, and it was cut with the
       band's third column on 2026-07-27. See docs/rhetoric/ANSWERS.md Q10. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto 1fr auto;
    border-top: 1px solid var(--graphite-700);
    /* Pulls the outer padding back out to the band's edge so the first
       column still aligns flush with the headline above it while both
       columns keep identical internal padding. Unequal padding made a
       column measurably narrower than its neighbour. */
    margin-inline: calc(var(--space-xl) * -1);
  }

  .about-mode {
    grid-row: span 4;
    grid-template-rows: subgrid;
    gap: var(--space-sm);
    padding: var(--space-2xl) var(--space-xl);
    border-bottom: 0;
    border-left: 1px solid var(--graphite-700);
  }

  .about-mode:first-child {
    border-left: 0;
  }
}

/* =====================================================================
   4. THE ROSTER — portrait plates with graphite nameplates
   The nameplate is bolted to the bottom edge of the plate rather than
   floating beneath it as a caption, so the plate stays a single object.

   There is no biography under each portrait. The three that shipped were
   inferred from job titles and described a division of labour the client
   had not confirmed, so they were cut on 2026-07-27. A name, a title, and
   a face is the disclosure the page owes — and as of 2026-08-06 it is the
   whole of what this section says, the lede above the roster having gone
   with the "we all do every job" claim it carried.
   ===================================================================== */

.about-roster {
  display: grid;
  gap: var(--space-3xl);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .about-roster {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-xl);
  }
}

.about-person {
  display: grid;
  gap: var(--space-lg);
  align-content: start;
}

.about-person-plate {
  position: relative;
  margin: 0;
  border-radius: var(--radius-panel);
  overflow: hidden;
  box-shadow: var(--shadow-seated);
}

.about-person-plate img {
  display: block;
  width: 100%;
  /* A fixed portrait window rather than the image's own 2:3, so three
     portraits shot at different distances still line up as a row. */
  height: 320px;
  object-fit: cover;
  object-position: 50% 22%;
  background: var(--paper-200);
}

.about-nameplate {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-lg);
  background: var(--graphite-900);
  /* The machined top edge, catching light where the plate meets the
     photograph. This is the detail the whole layout is named for. */
  box-shadow: var(--bevel);
}

.about-nameplate-name {
  color: var(--paper-000);
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.008em;
}

.about-nameplate-role {
  color: var(--graphite-300);
}

/* =====================================================================
   5. THE SHOP
   ===================================================================== */

.about-shop-grid {
  display: grid;
  gap: var(--space-2xl);
  align-items: center;
}

@media (min-width: 900px) {
  .about-shop-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-4xl);
  }
}

/* A .plate-half from base.css §8.1, on paper. It gains the hairline rule
   the component carries and this rule used to omit — a paper surface in
   this system is bounded by a hairline, and a photograph on paper is not
   an exception to that. */

/* =====================================================================
   6. THE FLEET PANEL
   The readout panel from base.css, scaled from one item to the whole
   fleet: the figure is enlarged and the header carries a note alongside
   the title. Everything else — the panel, the rows, the hover bleed, the
   loading and error states — is the shared component.
   ===================================================================== */

.about-fleet-panel {
  /* The count is the point of this panel, so the figure runs larger here
     than the component's default. */
  --readout-number-size: 1.5rem;
  margin-top: var(--space-4xl);
  /* Reserves the loaded height so the close does not jump when four rows
     arrive: the header plus four rows at the component's row height.
     Re-measure if the category count changes. */
  min-height: 344px;
}

.about-fleet-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
  margin-bottom: 0;
  padding-bottom: var(--space-lg);
}

.about-fleet-panel-title {
  margin: 0;
  color: var(--paper-000);
}

.about-fleet-panel-note {
  margin: 0;
  color: var(--graphite-300);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.45;
}

/* =====================================================================
   7. CLOSE
   ===================================================================== */

.about-close-inner {
  display: grid;
  gap: var(--space-2xl);
  align-items: end;
}

@media (min-width: 900px) {
  .about-close-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-4xl);
  }
}

.about-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

@media (max-width: 479px) {
  .about-actions .btn {
    width: 100%;
  }
}