/* exe.dev About, the 2026 design: a Green dark head with its holes punched through, the Bay Area painted between it and
   the team, and the team on a tan sheet, each of them printed in ink on the paper. */
.a-head { --sheet-ink: var(--tan-light); flex: 1; display: grid; grid-template-columns: 62% minmax(0, 1fr); min-height: clamp(260px, 36svh, 380px); background: var(--green-sheet); color: var(--sheet-ink); }
.a-head .r2 { left: 62%; }
.a-head h1 { margin: 0; padding: 30px 40px 30px 74px; font: 300 clamp(52px, 7.6cqi, 120px)/.98 var(--font-serif); letter-spacing: -.025em; text-wrap: balance; }
.a-head-side { display: flex; flex-direction: column; justify-content: flex-end; padding: 30px 46px 34px 34px; font: 400 15px/1.45 var(--font-tw); }
.a-head-side p { margin: 0; max-width: 32ch; text-wrap: pretty; }

/* the Bay Area, between the head and the team; the team's sheet comes up over its foot */
.scene-row { position: relative; z-index: 0; display: grid; grid-template-columns: var(--reveal-x) repeat(12, minmax(0, 1fr)) clamp(24px, 4cqi, 64px); padding-top: clamp(12px, 3svh, 40px); margin-bottom: calc(-1 * var(--tuck, 12cqi)); pointer-events: none; }
.scene { grid-column: var(--col, 5 / -1); position: relative; margin: 0; aspect-ratio: 16 / 9; }
.scene picture, .scene img { display: block; width: 100%; height: 100%; }
.scene img { object-fit: cover; object-position: var(--focus, 50% 50%); }
.scene .paint-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene.is-gl picture { visibility: hidden; }

/* the team: two to a row, each printed in ink on the sheet */
.a-sheet { --sheet-ink: var(--black); flex: 1; min-width: 0; color: var(--sheet-ink); background: var(--medium-sheet); }
.a-sheet .in { padding-bottom: 46px; }
.a-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 4.4cqi, 64px); margin: 0; padding: 0; list-style: none; }
.a-person { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 0 24px; align-items: start; padding: 24px 0 30px; border-top: .5px solid color-mix(in srgb, var(--sheet-ink) 24%, transparent); }
.a-photo { display: block; width: 112px; height: 112px; mix-blend-mode: multiply; }
.a-name { margin: 0; font: 300 26px/1.1 var(--font-serif); letter-spacing: -.01em; }
.a-bio { margin: 10px 0 0; font: 300 16.5px/1.45 var(--font-serif); text-wrap: pretty; }
.a-more { margin: 12px 0 0; font: 400 13.5px/1.3 var(--font-tw); }
.a-more .pen-link { --pencil-drop: -5px; color: inherit; }

@container main (max-width: 900px) {
  .scene-row { grid-template-columns: 16px minmax(0, 1fr) 16px; --tuck: 14cqi; }
  .scene { grid-column: 2 / -1; aspect-ratio: 4 / 3; }
  .a-head { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .a-head .r2 { display: none; }
  .a-head h1 { padding: 28px 24px 8px 58px; font-size: clamp(48px, 14cqi, 88px); }
  .a-head-side { padding: 12px 24px 28px 58px; }
  .a-people { grid-template-columns: minmax(0, 1fr); }
  .a-person { grid-template-columns: 84px minmax(0, 1fr); gap: 0 18px; }
  .a-photo { width: 84px; height: 84px; }
  .a-name { font-size: 23px; }
  .a-bio { font-size: 16px; }
}

/* dark: the team's sheet goes to Primary's Tan dark with light type, the photos still printed into it */
html[data-theme="dark"] .a-sheet { --sheet-ink: var(--tan-light); background: var(--tan-sheet); }
/* and the scene dims a little toward the page (about.js says why only a little): painting.js does it on the graphics
   card; the still picture it falls back to, here */
html[data-theme="dark"] .scene:not(.is-gl) picture { filter: brightness(.85) saturate(.92); }