/* about.css — the About essay.

   Loaded only by about.html, after site.css and entity.css. entity.css supplies the .ehead
   heading block that Composers, Artists and Reviews already use, so this file holds nothing but
   the essay itself.

   The reading values are .review's, copied deliberately from album-detail.css: 720px measure,
   1.12rem Newsreader, 1.72 leading, #241F1A on cream. BRIEF.md section 4 puts reviews and About
   on the same cream reading surface, and two long-form surfaces that differ slightly read as a
   mistake rather than as a choice. */

.aboutbody{background:var(--card);color:#17161A}
.aboutbody .inner{max-width:720px;margin:0 auto;padding:clamp(2.4rem,5.5vw,4rem) clamp(1rem,4vw,3rem)}

/* Smaller than .review h2, which is a review TITLE and the only heading on its page. These are
   section headings inside a running essay, so they sit between the page's h1 and the body. */
.aboutbody h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.45rem,3vw,2.05rem);line-height:1.16;letter-spacing:-.015em;color:#17161A;margin:0 0 1.1rem}
.aboutbody .aboutsec + .aboutsec{margin-top:2.7rem}

.aboutbody p{font-family:var(--serif);font-size:1.12rem;line-height:1.72;color:#241F1A;margin:0 0 1.15rem}
.aboutbody p:last-child{margin-bottom:0}
.aboutbody em{font-style:italic}

/* Brass is section 4's accent on cream, but the review eyebrow's #8A6A24 CANNOT be reused here.
   Measured on the built page: #8A6A24 on #EFE9DC is 4.17:1. That passes where it is already used,
   because .review .eyebrow and .revfeature .eye are 19.2px bold and count as large text needing
   3:1 — and it fails here, where a link is 17.92px regular body text needing 4.5:1. #7D5E22 is
   4.97:1, chosen with margin rather than the 4.59:1 value that only just clears the line. */
.aboutbody a{color:#7D5E22;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.aboutbody a:hover{color:#17161A}

/* The one quote, in its own band. Cobalt is section 4's text-carrying surface and matches the
   homepage band, so the page breaks without leaving the site's colour language. */
.aboutquote{background:var(--cobalt);color:var(--chalk)}
.aboutquote .inner{max-width:900px;margin:0 auto;padding:clamp(2.6rem,6.5vw,4.6rem) clamp(1.25rem,5vw,3rem);text-align:center}
.aboutquote blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(1.45rem,3.9vw,2.4rem);line-height:1.3;letter-spacing:-.01em;margin:0;text-wrap:balance}
.aboutquote .attrib{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(246,243,235,.8);margin:1.5rem 0 0}

/* A row of real sleeves inside the reading column, under "What will you find here?".

   The square crop is deliberate and follows the settled rule for CARDS: `.rec .art img` in
   site.css is object-fit:cover because an even crop is what holds a rack of covers level. The
   album HERO is the opposite, object-fit:contain, because there the whole sleeve matters. These
   are cards, so they crop.

   No hover zoom: scaling the image would need an overflow:hidden wrapper around it, and the
   title underline already says the whole card is a link. */
.aboutbody .records{list-style:none;margin:1.4rem auto 1.6rem;padding:0;width:clamp(140px,34%,200px)}
.aboutbody .records li + li{margin-top:1.15rem}
.aboutbody .records a{display:block;color:inherit;text-decoration:none}
.aboutbody .records img{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:var(--ink-2)}
.aboutbody .records .who{display:block;font-family:var(--sans);font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#7D5E22;margin:.65rem 0 .2rem}
.aboutbody .records .what{display:block;font-family:var(--serif);font-size:clamp(.82rem,1.5vw,.95rem);line-height:1.28;color:#241F1A}
.aboutbody .records a:hover .what{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* The portrait keeps its own aspect ratio: see render_portrait in build_about.py for why a
   photograph is not cropped square the way a sleeve is. */
.aboutbody .portrait{margin:1.4rem auto 1.6rem;padding:0;width:clamp(140px,34%,200px)}
.aboutbody .portrait img{display:block;width:100%;height:auto}

/* ---- where the picture sits, at three widths ---------------------------------------------

   One idea at every width: the picture belongs to its whole section, heading and paragraphs
   together. Only its position changes.

   NARROW (the rules above, no query): stacked. Heading, the whole text, then the picture
   closing the section at 150px. Bob asked for this order — putting the picture between the
   heading and the paragraphs "seems a bit fragmented". Source order already is this order, so
   nothing here has to reorder anything.

   MIDDLE (640px+): the picture moves alongside, INSIDE the reading column. 120px wide with a
   28px gap, leaving about 476px of text at the top of the range — roughly 59 characters a line,
   which is a good measure in its own right rather than a squeezed one.

   WIDE (1200px+): the picture steps OUT into the empty cream and the column widens to give the
   text back its full 624px. 926px is exactly 150 + 56 + 720, so the paragraphs return to
   .review's measure to the pixel.

   Both grid layouts place every item EXPLICITLY, so neither depends on source order: heading and
   paragraphs in column 2 rows 1 and 2, picture in column 1 spanning both. That span is what
   centres it against the heading and its paragraphs together, which is the rule Bob set. */

@media (min-width:640px){
  /* align-items:start with align-self:center on the picture ALONE. With align-items:center the
     taller item wins the row, and in the shortest section the picture outgrows its text and
     pushed the HEADING down to centre against it — "the Méndez one is actually HIGHER than the
     heading". The text must never move; only the picture centres. */
  .aboutbody .aboutsec{display:grid;grid-template-columns:120px minmax(0,1fr);column-gap:28px;align-items:start}
  .aboutbody .aboutsec>h2{grid-column:2;grid-row:1}
  .aboutbody .aboutsec>.abouttext{grid-column:2;grid-row:2}
  .aboutbody .records,
  .aboutbody .portrait{grid-column:1;grid-row:1/3;align-self:center;margin:0;width:auto;max-width:none}
}

@media (min-width:1200px){
  .aboutbody .inner{max-width:926px}
  .aboutbody .aboutsec{grid-template-columns:150px minmax(0,1fr);column-gap:56px}
}