/* ── chrome is not text ──
   Buttons, glyphs and navigation links are pressed or glanced at, never
   copied — a selection smear over them is always a mis-drag. Prose stays
   selectable: the notes under the pictures are the content of this page.
   Any new chrome element belongs in this list. */
button,
[role="button"],
.ea-link,
.ld-tag,
.ld-tile,
.ld-foot,
.lb-counter,
.lb-hint {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* llm-draw.css — gallery of work the models made.
   Rides on cyber-goth.css for the page chrome (cursor, canvas, vignette,
   status bar, ticker, corners, eyebrow, title) and borrows the drawing
   gallery's tile language on purpose: these two pages are siblings, so a
   picture should sit in the same frame on both. Only the bits specific to
   this gallery live here.

   Each work sets its own --bk, which fills the tag and lights the hover
   glow. Nothing else on the page carries colour. */

.ld-grid {
  width: 100%; max-width: 980px;
  margin: 8px auto 0;
  display: flex; flex-direction: column; gap: 56px;
  animation: fade-in 1.4s ease both;
}

/* Picture left, note right. The notes run long, so they get a column of their
   own rather than a line under the picture. */
.ld-work {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 540px) minmax(250px, 360px);
  justify-content: center;
  align-items: start;
  gap: 32px;
}

/* ─── tile ─── */
.ld-tile {
  width: 100%;
  background: #0a0716;
  border: 1px solid rgba(138,111,232,0.22);   /* uniform hairline — no half-painted edges */
  overflow: hidden;
  transition: transform .28s cubic-bezier(0.16,1,0.3,1),
              border-color .2s ease, box-shadow .28s ease;
  animation: rise .7s cubic-bezier(0.16,1,0.3,1) both;
}
.ld-tile:hover {
  transform: translateY(-5px);
  border-color: var(--bk, var(--violet));
  box-shadow: 0 10px 30px rgba(0,0,8,0.6),
              0 0 22px color-mix(in srgb, var(--bk, var(--violet)) 26%, transparent);
}

.ld-tile-img { display: block; line-height: 0; }
.ld-tile-img img { display: block; width: 100%; height: auto; }

.ld-tile-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-top: 1px solid rgba(138,111,232,0.16);
  background: rgba(8,4,20,0.5);
}
.ld-tag {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 600;
  color: #0a0716; background: var(--bk, var(--violet));
  padding: 3px 8px; white-space: nowrap; border-radius: 1px;
}
.ld-tile-title {
  font-family: 'Handwriting', cursive;
  font-size: 24px; letter-spacing: 0.01em;
  color: rgba(216,207,255,0.85);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ─── the note under a picture ─── */
/* The notes carry real paragraphs, so they are set in a plain sans at reading
   size. 'Handwriting' stays for the short things — the tile title, the footer
   note — where its quarter-em x-height is not fighting a block of text. */
.ld-note {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif;
  font-size: 16px; line-height: 1.65; letter-spacing: 0;
  color: rgba(236,229,255,0.92); text-align: left;
  animation: fade-in 2s ease both;
}

@media (max-width: 860px) {
  .ld-work { grid-template-columns: minmax(0, 540px); }
  .ld-grid { gap: 44px; }
}

/* ─── the tile is pressable ─── */
.ld-tile {
  display: block; width: 100%;
  margin: 0; padding: 0;
  color: inherit; font: inherit; text-align: left;
  cursor: none;                                /* cyber-goth draws its own */
  -webkit-tap-highlight-color: transparent;
}
.ld-tile:focus-visible {
  border-color: var(--bk, var(--violet));
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bk, var(--violet)) 60%, transparent);
}
.ld-tile:hover .ld-tile-img img { transform: scale(1.035); }
.ld-tile-img img { transition: transform .35s cubic-bezier(0.16,1,0.3,1); }

/* zoom affordance, same glyph the drawing gallery uses */
.ld-tile-img { position: relative; }
.ld-tile-img::after {
  content: '⤢';
  position: absolute; top: 8px; right: 8px;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  font-family: monospace; font-size: 14px; line-height: 1;
  color: #fff; background: rgba(10,7,22,0.7);
  border: 1px solid var(--bk, var(--violet));
  opacity: 0; transform: scale(0.7);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.ld-tile:hover .ld-tile-img::after,
.ld-tile:focus-visible .ld-tile-img::after { opacity: 1; transform: scale(1); }

/* ─── footer note ─── */
.ld-foot {
  font-family: 'Handwriting', cursive;
  font-size: 24px; letter-spacing: 0.01em;
  color: rgba(140,225,255,0.5); text-align: center;
  max-width: 520px; line-height: 1.6;
  margin-top: 44px;
  animation: fade-in 3s ease both;
}

/* ═══ fullscreen viewer ═══
   Its own copy of the drawing gallery's viewer rather than a cross-page
   import: the two pages are deliberately independent files, and a shared
   stylesheet between them would drag that gallery's masonry rules in too. */
body.lb-locked { overflow: hidden; }

.lightbox {
  position: fixed; inset: 0; z-index: 9000;
  display: none;
  align-items: center; justify-content: center;
  padding: 64px 72px;
  background: rgba(2,1,8,0.94);
  backdrop-filter: blur(6px);
  cursor: none;
}
.lightbox.is-open { display: flex; animation: fade-in .22s ease both; }

/* faint blueprint wash so it matches the site */
.lightbox::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 44px 44px;
}

.lb-stage {
  position: relative; z-index: 1;
  max-width: 100%; max-height: 100%;
  display: flex; flex-direction: column; align-items: center;
  overflow-y: auto;
  padding-bottom: 34px;   /* clears .lb-hint, which is fixed to the bottom */
}
.lb-img {
  max-width: min(1100px, 86vw);
  max-height: 56vh;
  width: auto; height: auto;
  display: block;
  border: 1px solid color-mix(in srgb, var(--bk, var(--violet)) 60%, transparent);
  box-shadow: 0 24px 80px rgba(0,0,8,0.8),
              0 0 40px color-mix(in srgb, var(--bk, var(--violet)) 30%, transparent);
  opacity: 0; transform: scale(0.985);
  transition: opacity .28s ease, transform .28s cubic-bezier(0.16,1,0.3,1);
}
.lb-img.is-in { opacity: 1; transform: scale(1); }

.lb-caption {
  display: flex; align-items: center; gap: 14px;
  margin-top: 16px; flex-wrap: wrap; justify-content: center;
}
.lb-tag {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase;
  color: #0a0716; background: var(--bk, var(--violet));
  padding: 4px 10px; font-weight: 600; border-radius: 1px;
}
.lb-title {
  font-family: 'Handwriting', cursive;
  font-size: 24px; color: #ece5ff; letter-spacing: 0.01em;
}
.lb-note {
  max-width: 660px; margin-top: 14px;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif;
  font-size: 16px; line-height: 1.65;
  color: rgba(236,229,255,0.92); text-align: center;
}

.lb-btn {
  position: absolute; z-index: 2;
  background: rgba(10,7,22,0.66);
  border: 1px solid rgba(138,111,232,0.34);
  color: #ece5ff;
  font-family: monospace; line-height: 1;
  cursor: none;
  display: flex; align-items: center; justify-content: center;
  transition: background .16s ease, border-color .16s ease,
              color .16s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.lb-btn:hover, .lb-btn:focus-visible {
  background: color-mix(in srgb, var(--bk, var(--violet)) 26%, rgba(10,7,22,0.7));
  border-color: var(--bk, var(--violet));
  color: #fff; outline: none;
}
.lb-btn:active { transform: scale(0.92); }
/* `hidden` sets display:none in the UA sheet only, so .lb-btn's display:flex
   wins and a hidden arrow still paints. A single work has nothing to step to,
   so the attribute has to be honoured here explicitly. */
.lb-btn[hidden] { display: none; }

.lb-prev, .lb-next {
  top: 50%; transform: translateY(-50%);
  width: 56px; height: 56px; font-size: 26px;
}
.lb-prev { left: 14px; }
.lb-next { right: 14px; }
.lb-prev:active { transform: translateY(-50%) scale(0.92); }
.lb-next:active { transform: translateY(-50%) scale(0.92); }

.lb-close {
  top: 18px; right: 18px;
  width: 42px; height: 42px; font-size: 20px;
}
.lb-counter {
  position: absolute; top: 24px; left: 24px; z-index: 2;
  font-family: monospace; font-size: 12px; letter-spacing: 0.34em;
  color: rgba(216,207,255,0.6);
}
.lb-hint {
  position: absolute; bottom: 20px; left: 0; right: 0; z-index: 2;
  text-align: center;
  font-family: monospace; font-size: 12px; letter-spacing: 0.3em;
  text-transform: uppercase; color: rgba(138,111,232,0.55);
  pointer-events: none;
}

@media (max-width: 720px) {
  .lightbox { padding: 56px 12px; }
  .lb-img { max-width: 94vw; max-height: 56vh; }
  .lb-prev, .lb-next { width: 44px; height: 44px; font-size: 21px; }
  .lb-prev { left: 6px; } .lb-next { right: 6px; }
}