/* About page. Load site.css first.

   Two columns — prose left, photograph right. This is the only two-column
   layout on the site. Column order was flipped from the original spec during
   the Design build and kept: text first is the better reading order on a page
   that is mostly words.

   No page title. Gallery pages carry a collection name because "Arid" does
   real work above a grid; content pages do not, because the nav already says
   where you are. Home, About and Connect all skip it.                       */

:root{
  --prose-w:560px;    /* ~65 characters at 16px Montserrat */
  --photo-w:620px;    /* portrait is 1100px native — never displayed larger */
  --about-gap:160px;
}

.about-cols{display:grid;
            grid-template-columns:minmax(0,var(--prose-w)) minmax(0,var(--photo-w));
            gap:clamp(var(--s-5),10vw,var(--about-gap));
            align-items:start;width:fit-content;max-width:100%;margin:0 auto}

.about-prose{max-width:var(--prose-w)}
.about-body{display:grid;gap:var(--s-3);font:var(--type-body);color:var(--text-body);
            text-align:left;text-wrap:pretty}
.about-body p{margin:0}

/* Signature, not a sixth paragraph. */
.about-signoff{margin:var(--s-5) 0 0;font:var(--type-caption-location);color:var(--fg-dim)}

/* 7px lifts the photograph so its top edge lines up with the cap height of
   the first line of text, not with the top of that line's box. */
.about-photo{margin-top:7px;width:var(--photo-w);max-width:100%}
.about-photo img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain}

/* Breakpoints ---------------------------------------------------------------
   Two columns need 560 + gap + 620 of room. The gap is 10vw, so the real
   threshold is around 1365px — below that the grid compresses the prose and
   the measure collapses (48 characters at 1024px, which is unreadable).
   So there is a middle tier with a smaller photograph, and the stack happens
   at 1200px rather than 900px.                                             */
@media (max-width:1440px){
  /* Prose width never changes on desktop — only the photograph gives ground,
     so the measure stays at 61 characters from 1200px up. */
  :root{--photo-w:460px;--about-gap:80px}
}
@media (max-width:1199px){
  .about-cols{grid-template-columns:minmax(0,1fr);gap:var(--s-5);width:auto;
              max-width:38rem}
  .about-prose{max-width:none}
  .about-photo{width:100%;margin-top:0;order:-1}   /* photograph first when stacked */
}