/* vision-art.css — HOW A VISION BOARD DRAWS ITS ART. One file, two consumers.
 *
 * The five baked pages (/vision-*.html, emitted by
 * ~/Desktop/inspo-annotate/build_vision_boards.py) and every board Aidan
 * publishes from the console (/b/<slug>, drawn by board.html) both link this
 * stylesheet and neither carries its own copy of these rules. That is the
 * point: on 2026-08-27 the two had drifted far enough that the same photograph
 * was 430px wide on /vision-grace and 321px on /b/sandra at 1440, and 350px vs
 * 175px at 390 — with the credit line already showing on one and hidden behind
 * a tap on the other. A generated board and a published board are the same
 * object to a visitor, so they get one definition of what a board looks like.
 *
 * If you change sizing here, change it here ONLY. board.html asserts nothing;
 * build_vision_boards.py refuses to run if this file is missing from the site
 * root, which is the guard that keeps a future generated board consistent.
 *
 * Anything that is genuinely per-page — the top bar, the head, the .more foot,
 * the console's tools — stays in the page that owns it.
 */

/* Two columns, not three or four: the art is the reason for the page, and
   at 1440 this draws each frame ~650px instead of the old 430. Aidan,
   2026-08-27 — "lets make it bigger". The 420px column minimum does the
   narrowing on its own, so a tablet drops to one column without a query. */
.grid{columns:2 420px;column-gap:22px}
figure{break-inside:avoid;margin:0 0 22px;position:relative;display:block}
figure img{display:block;width:100%;height:auto;background:#141216;
  box-shadow:0 18px 50px -24px rgba(0,0,0,.9),0 0 0 1px rgba(234,228,218,.06);
  transition:box-shadow .4s ease}
figure:hover img{box-shadow:0 18px 50px -20px rgba(0,0,0,.95),0 0 0 1px rgba(217,154,69,.4)}

figcaption{position:absolute;inset:auto 0 0 0;padding:26px 14px 12px;font-size:12px;
  letter-spacing:.03em;line-height:1.45;color:var(--paper);
  background:linear-gradient(180deg,rgba(11,10,12,0),rgba(11,10,12,.9) 55%);
  opacity:0;transition:opacity .3s ease}
figure:hover figcaption,figure:focus-within figcaption,figure.open figcaption{opacity:1}
figcaption i{font-style:italic;color:var(--paper)}
figcaption a{color:var(--paper);text-decoration:none;
  border-bottom:1px solid rgba(217,154,69,.5);padding-bottom:1px}
figcaption a:hover,figcaption a:focus-visible{color:var(--amber);border-bottom-color:var(--amber)}
figcaption .unknown{color:var(--muted);font-style:italic}
figcaption .stamp{color:var(--muted);display:block;margin-top:3px;font-size:10px}

/* A phone has no hover, so the credit is simply on. The artist's name is the
   point of the board; making it cost a tap was board.html's own invention. */
@media (hover:none){figcaption{opacity:1}}

/* One frame per row on a phone — full bleed to the gutters. */
@media (max-width:640px){.grid{columns:1}figure{margin-bottom:18px}}

@media (prefers-reduced-motion:reduce){figure img,figcaption{transition:none}}