/* "Before the interface." (P03): one continuous chapter, "controlled editorial impressionism".
   No boxes. The basketball painting is the dominant moment: it enters from the left edge and dissolves into the paper
   on its inner side through an irregular feather ("View the whole painting" opens it uncropped). The paint carries on
   as atmosphere: exact crops of both paintings, enlarged, feathered and faint, behind the words and around the
   landscape, which floats whole in the field with no card or shadow. Light / Motion has no frame at all: no border, no
   fill, the moving image feathered into the paper.
   Masks are alpha shapes only (_build/make_p03_atmos.py): they never change an art pixel.
   Rules are scoped under .art so they keep their precedence over the large-screen ramp in css/large.css, which still
   grows the chapter padding, the title gap, caption gaps and the Pause control above 1920 px.
   The earlier compositions (archival plates; vertical essay) are kept as notes in proof/p03/archive-layout-options/. */

.art { position: relative; padding: 120px 0 120px; }
.art .rule-h { top: 0; }
.art .art-grid { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g);
  padding: 0 var(--m); align-items: start; }
.art .art-grid > :not(.art-atmos) { position: relative; z-index: 1; }

/* words */
.art-title { font-size: var(--fs-section); margin: 0 0 20px; text-wrap: balance; }
.art-intro { max-width: var(--measure); }

/* the paintings: straight onto the paper; captions factual, in ink-2 because they sit over paint and atmosphere */
.art-plate { margin: 0; }
.art-plate img { display: block; width: 100%; height: auto; }
.art-plate figcaption { margin-top: 14px; }
.art .art-plate figcaption, .art .art-plate figcaption .dim { color: var(--ink-2); }
.art .art-crop { aspect-ratio: 1 / 1; overflow: hidden;
  -webkit-mask: url("/assets/art/mask-enter-right.png") 0 0 / 100% 100% no-repeat; mask: url("/assets/art/mask-enter-right.png") 0 0 / 100% 100% no-repeat; }
.art .art-crop img { height: 100%; object-fit: cover; object-position: 40% 42%; }

/* the whole painting, on request */
.art-whole { display: inline-flex; align-items: center; margin-left: 1.2em; min-height: 44px; color: var(--ink);
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 13px) / 100% 1px no-repeat; }
.art-whole:hover { background-size: 0 1px; }
.art-dialog { max-width: min(92vw, 1100px); max-height: 94vh; padding: 28px 28px 20px; border: 0; background: var(--paper); color: var(--ink);
  box-shadow: 0 40px 80px -30px rgba(40, 32, 20, 0.45); }
.art-dialog::backdrop { background: rgba(31, 30, 27, 0.55); }
.art-dialog figure { margin: 0; }
.art-dialog img { display: block; width: auto; max-width: 100%; height: auto; max-height: calc(94vh - 140px); margin: 0 auto; }
.art-dialog figcaption, .art-dialog figcaption .dim { margin-top: 0.875rem; color: var(--ink-2); }
.art-dialog__close { margin-top: 0.625rem; min-height: 44px; display: inline-flex; align-items: center; }

/* the paint as atmosphere */
.art .art-atmos { display: contents; }
.art .art-atmos__img { position: relative; z-index: 0; display: block; max-width: none; height: auto; pointer-events: none;
  -webkit-mask: url("/assets/art/mask-cloud.png") 0 0 / 100% 100% no-repeat; mask: url("/assets/art/mask-cloud.png") 0 0 / 100% 100% no-repeat; }
.art .art-atmos__img--bb { opacity: 0.12; }
.art .art-atmos__img--ls { opacity: 0.26; }

/* 2016 to 2026: a quiet date range between two hairlines, type only */
.art-break { display: flex; align-items: center; gap: 18px; color: var(--ink-2); }
.art-break::before, .art-break::after { content: ''; flex: 1; height: 1px; background: var(--hair); }

/* the line handing over to the new study */
.art-line { font-family: var(--serif); font-weight: 600; font-size: calc(1.875rem * var(--display-boost)); letter-spacing: -0.04em; line-height: 1.02; max-width: 12em; }
.art-line em { display: block; font-style: italic; font-weight: 400; letter-spacing: -0.05em; }   /* one sentence per line */

/* Light / Motion: no border, no fill; the paper shows through; only the moving image is feathered (the Pause control
   stays solid and legible). The aspect is a variable so the piece can set its own. */
.art-motion__frame { position: relative; aspect-ratio: var(--motion-aspect, 16 / 9); overflow: hidden; }
.art-motion__frame video, .art-motion__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  -webkit-mask: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent), linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-composite: source-in;
  mask: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent), linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  mask-composite: intersect; }
.art-motion__toggle { position: absolute; z-index: 2; min-height: 44px; padding: 0 18px; border-radius: 999px;
  color: var(--ink); box-shadow: inset 0 0 0 1px rgba(31, 30, 27, 0.18); }
.art .art-motion__toggle { left: 9%; bottom: 10%; background: rgba(236, 229, 215, 0.96); }

/* desktop and tablet: a spread. The painting bleeds left across seven columns; the words sit high at the right; the
   landscape floats low at the right; then the date, and the line handing over to Light / Motion, which runs off the
   right edge */
@media (min-width: 820px) {
  .art .art-plate--portrait { grid-column: 1 / span 7; grid-row: 1 / span 2; margin-left: calc(var(--m) * -1); }
  .art .art-plate--portrait figcaption { padding-left: var(--m); margin-top: 0.25rem; }
  .art .art-head { grid-column: 9 / span 4; grid-row: 1; margin-top: 4.5rem; }
  .art .art-plate--landscape { grid-column: 10 / span 3; grid-row: 2; align-self: end; margin-bottom: 1.5rem; }
  /* the basketball's own facets carry on behind the words, out to the right edge */
  .art .art-atmos__img--bb { grid-column: 7 / span 6; grid-row: 1; width: calc(100% + var(--m)); margin: -6rem 0 0 0; }
  /* the landscape's glow around it, travelling down towards Light / Motion: its faint tail reaches the piece's
     feathered top edge but never runs under the piece, whose paper-coloured frame would cut it */
  .art .art-atmos__img--ls { grid-column: 6 / span 7; grid-row: 2 / span 2; align-self: end; width: calc(100% + var(--m)); margin-bottom: -4rem; }
  .art .art-break { grid-column: 4 / span 6; grid-row: 3; margin: 2.5rem 0 2.5rem; }   /* a short quiet hinge, not a full-width rule */
  .art .art-now { grid-column: 2 / span 4; grid-row: 4; align-self: center; justify-self: end; }   /* close to the handoff */
  .art .art-motion { grid-column: 6 / span 7; grid-row: 4; margin-right: calc(var(--m) * -1); }
  .art .art-motion figcaption { padding: 0 var(--m) 0 9%; }
}
@media (max-width: 1099px) and (min-width: 820px) {
  .art .art-head { grid-column: 8 / span 5; margin: 1.5rem 0 44px; }
  .art .art-plate--landscape { grid-column: 9 / span 4; }
  .art .art-now { grid-column: 1 / span 5; margin-bottom: 28px; }
}
/* phone: the painting edge to edge, dissolving downward into the words; the paint drifts behind them; the landscape
   floats at the right; Light / Motion runs edge to edge */
@media (max-width: 819px) {
  .art { padding: 72px 0; }
  .art .art-grid { display: flex; flex-direction: column; align-items: flex-end; }   /* blocks sit to the right unless set */
  .art .art-plate--portrait { order: 1; margin: 0 calc(var(--m) * -1); }
  .art .art-crop { aspect-ratio: 4 / 5;
    -webkit-mask-image: url("/assets/art/mask-enter-bottom.png"); mask-image: url("/assets/art/mask-enter-bottom.png"); }
  .art .art-plate--portrait figcaption { padding: 0 var(--m); margin-top: 0.25rem; }
  .art .art-atmos__img--bb { order: 2; width: 130%; align-self: flex-end; margin: -5rem calc(var(--m) * -1) -96% 0; }
  .art .art-head { order: 3; margin: 2.5rem 0 0; align-self: flex-start; }
  .art .art-atmos__img--ls { order: 4; width: 170%; align-self: flex-end; margin: -1rem calc(var(--m) * -1) -64% 0; }
  .art .art-plate--landscape { order: 5; width: 66%; align-self: flex-end; margin-top: 0; }
  .art .art-break { order: 6; margin: 48px 0 32px; }
  .art .art-now { order: 7; margin: 0.5rem 0 1.5rem; }
  .art .art-line { font-size: 1.75rem; }
  .art .art-motion { order: 8; margin: 0 calc(var(--m) * -1); }
  .art .art-motion figcaption { padding: 0 var(--m); }
}