/* ============================================================
   CREATIVE WRITING: /writing is one painting, and each poem's page carries its own (only these pages load this file).
   Dylan, 24 Oct 2026: "like a van gogh", "whole page should be artwork", "svg". The sky and the field are paintings repainted
   as SVG brushstrokes (design-work/writing/paint_svg.py from the model's sources, gen_vangogh.py; paint_all.py runs the set);
   the ground between them is a seamless tile of the same strokes (paint_svg.py --tile); each poem hangs as a framed canvas
   with its own painting. The page looks the same in both themes: a painting has one set of colours.
   ============================================================ */
:root {
  --vg-night: #1b2f5e; --vg-night-2: #24478a; --vg-cream: #f6f1e7; --vg-pale: #e2e8f5; --vg-yellow: #f4c430; --vg-yellow-2: #fbe38a; --vg-yellow-text: #ffe066;   /* pale + yellow-text: 4.5:1 and better against the tile's lightest stroke, not just the flat ground (measured 24 Oct 2026) */
  --vg-frame: #d9b35c; --vg-frame-edge: #7a5a1e; --vg-shadow: 0 18px 40px rgba(8, 16, 38, 0.55), 0 2px 6px rgba(8, 16, 38, 0.4);
}

/* ---------- the gallery page ---------- */
.gallery {
  /* the text colours on the painted ground are fixed too: no theme tokens here */
  --text-primary: var(--vg-cream); --text-body: var(--vg-pale); --text-muted: var(--vg-pale); --accent-ink: var(--vg-yellow-text);
  background: var(--vg-night) url("/media/writing/tile.svg?v=bebf061c") repeat center top / 420px 420px;
  color: var(--vg-pale); overflow: hidden;
}
.gallery img { display: block; }
.gallery .container { max-width: 1320px; }   /* the canvases get more of the width than the site's usual column */
/* the sky and the field are bands of a fixed height that fade into the painted ground (no hard join) */
.vg-sky, .vg-field { width: 100%; height: clamp(220px, 34vw, 440px); object-fit: cover; }
.vg-sky { object-position: center 35%; -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); }
.vg-field { margin-top: 48px; object-position: center bottom; -webkit-mask-image: linear-gradient(to top, #000 70%, transparent); mask-image: linear-gradient(to top, #000 70%, transparent); }
.gallery-head { text-align: center; padding: 44px 24px 0; }
.gallery-head .eyebrow { color: var(--vg-yellow-text); }
.gallery-head .section-title { color: var(--vg-cream); font-size: clamp(48px, 7vw, 84px); line-height: 1; margin-top: 12px; }
html:not([data-theme="light"]) .gallery .section-title { background-image: none; -webkit-text-fill-color: currentColor; }   /* the dark pearl and the party gradient fills would hide the cream */
.gallery-head .section-sub { color: var(--vg-pale); margin: 14px auto 0; }
/* a brushstroke of chrome yellow under the title (inline SVG: a loaded stroke with a lighter ridge of paint on top) */
.vg-stroke { display: block; width: 190px; height: auto; margin: 18px auto 0; }

/* each painting's own ground colour shows behind it until the SVG arrives (GENERATED by build-writing.py from the SVGs) */
/* @art-colours */
.vg-sky { background-color: #4e7080; }
.vg-field { background-color: #64694e; }
.art-sunflower img { background-color: #596e5d; }
.art-world img { background-color: #6b615a; }
.art-ink img { background-color: #638f83; }
/* @end art-colours */

/* the poems: a framed canvas each, the same three parts every time (picture, title, one line) */
.vg-canvases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 36px; padding: 54px 0 0; }
.vg-canvas { position: relative; min-width: 0; text-align: center; transition: transform var(--t-med) var(--ease-ui); }
.vg-canvas:hover, .vg-canvas:focus-within { transform: translateY(-6px); }
.vg-frame { display: block; background: var(--vg-frame); padding: 10px; box-shadow: var(--vg-shadow), inset 0 0 0 2px var(--vg-frame-edge); }
.vg-frame img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; outline: 1px solid rgba(8, 16, 38, 0.5); }
.vg-title { font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; margin: 20px 4px 6px; }
.vg-link { color: var(--vg-cream); }
.vg-link:hover { text-decoration: none; }
.vg-link::after { content: ""; position: absolute; inset: 0; }   /* the whole canvas is the link */
.vg-canvas:hover .vg-title, .vg-canvas:focus-within .vg-title { text-decoration: underline; text-decoration-color: var(--vg-yellow); text-decoration-thickness: 3px; text-underline-offset: 0.22em; }
.vg-link:focus-visible { outline: none; }
.vg-canvas:focus-within .vg-frame { box-shadow: var(--vg-shadow), 0 0 0 4px var(--vg-yellow); }
/* one line on each, never more than a line (Dylan) */
.vg-line { margin: 0 4px; font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.5; color: var(--vg-pale); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- a poem's page: its painting above the poem ---------- */
.poem-art { margin: 4px 0 34px; }   /* spans the column, like a post's cover */
.poem-art .vg-frame { box-shadow: 0 10px 28px rgba(43, 45, 49, 0.25), inset 0 0 0 2px var(--vg-frame-edge); }

@media (prefers-reduced-motion: reduce) { .vg-canvas { transition: none; } }
@media (max-width: 980px) { .vg-canvases { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 28px; } }
@media (min-width: 621px) and (max-width: 980px) { .vg-canvas:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - 14px); justify-self: center; } }   /* no orphan in the two-column rows */
@media (max-width: 620px) {
  .gallery-head { padding: 30px 20px 0; }
  .vg-canvases { grid-template-columns: 1fr; gap: 40px; padding-top: 40px; }
  .vg-field { margin-top: 44px; }
  .vg-title { font-size: 23px; }
  .poem-art { max-width: none; }
}