/* Shots for Bots -- catalog, image and license pages. Standalone: the
   catalog is its own host, so every token lives here; no other stylesheet,
   no script. Photographs first: near-black ground, no boxes, no colour
   anywhere except the price. Light palette on bare :root, dark under
   prefers-color-scheme (guarded so data-theme="light" wins) and again under
   data-theme="dark" so an explicit choice wins in both directions. */

:root {
  color-scheme: light dark;
  --font-display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  /* type scale: 12 / 13 / 14 / 16 / 20 / 28 / 40 / display */
  --text-2xs: 0.75rem; --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-base: 1rem;
  --text-lg: 1.25rem; --text-xl: 1.75rem; --text-2xl: 2.5rem;
  --text-display: clamp(2rem, 1.2rem + 2.6vw, 3.5rem);
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem; --space-9: 6rem;
  --gutter: max(16px, 3vw);
  --wrap: 94rem;      /* the catalog: wide, so 320 px thumbnails sit under 1:1 at any laptop */
  --measure: 62rem;   /* prose and the agents band */
  --gap: 4px;         /* between photographs */
  --row: 110px;       /* flex basis per unit of aspect ratio: 2 landscapes per line on a phone */
  --row-cap: 230px;   /* an orphan tile never grows past this row height */

  /* light: warm paper and ink. The only colour is the price. */
  --bg: #f4f2ee;
  --surface: #ebe8e2;
  --ink: #161513;
  --ink-muted: #5b5954;
  --ink-faint: #7d7b75;
  --border: #d9d6cf;
  --price: #8a5a0a;
  --overlay: rgba(244, 242, 238, 0.86);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0a0a0a;
    --surface: #141414;
    --ink: #ecebe7;
    --ink-muted: #a4a29c;
    --ink-faint: #74736e;
    --border: #242422;
    --price: #e3a94a;
    --overlay: rgba(10, 10, 10, 0.78);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0a0a;
  --surface: #141414;
  --ink: #ecebe7;
  --ink-muted: #a4a29c;
  --ink-faint: #74736e;
  --border: #242422;
  --price: #e3a94a;
  --overlay: rgba(10, 10, 10, 0.78);
}

/* ---- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  font-variant-numeric: tabular-nums;
}
h1, h2, h3 { line-height: 1.1; text-wrap: balance; margin-block: 0 var(--space-3); font-weight: 400; }
h1 { font-family: var(--font-display); font-size: var(--text-2xl); letter-spacing: -0.01em; }
h2 { font-family: var(--font-display); font-size: var(--text-xl); }
h3 { font-size: var(--text-base); font-weight: 500; }
p { margin-block: 0 var(--space-3); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: var(--ink-faint); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
code, pre, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
code { font-size: 0.92em; }
pre {
  margin: 0; padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm); line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--surface);
}
pre code { font-size: inherit; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }
.eyebrow { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-faint); font-weight: 500; margin: 0 0 var(--space-2); }
.price, .pr { font-family: var(--font-mono); color: var(--price); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---- masthead: a hairline of chrome. Wordmark left, three links right. */
.masthead {
  max-width: var(--wrap); margin: 0 auto; padding: var(--space-4) var(--gutter);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-5);
}
.masthead h1, .masthead .wordmark {
  margin: 0; font-family: var(--font-display); font-weight: 400; font-size: var(--text-lg);
  letter-spacing: 0.01em; color: var(--ink); text-decoration: none;
}
.masthead nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: var(--text-sm); }
.masthead nav a { color: var(--ink-muted); text-decoration: none; }
.masthead nav a:hover { color: var(--ink); }

/* ---- justified rows: a tile's flex-grow and flex-basis are both its aspect
   ratio (--ar), so on any flex line widths are proportional to aspect ratio,
   every tile shares one height and the line fills its container with no
   cropping. PHP partitions the catalog into rows for a 1440 px viewport and
   marks each break with an empty full-width item; below 84rem the breaks are
   hidden and the tiles flow continuously, packing by --row (the basis per
   unit of aspect ratio, which is roughly the resulting row height). */
.row, .rows { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.row > li, .rows > .item { flex: var(--ar) 1 calc(var(--ar) * var(--row)); min-width: 0; max-width: calc(var(--ar) * var(--row-cap)); }
.rows > .br.end ~ .item { flex-grow: 0; flex-basis: calc(var(--ar) * 180px); } /* the last row sits at the others' height, unstretched */
.rows > .br { flex-basis: 100%; height: 0; margin-top: calc(-1 * var(--gap)); }
.row img, .rows img { width: 100%; }
@media (max-width: 84rem) {
  .rows { --row: clamp(105px, 8vw + 45px, 190px); }
  .rows > .br { display: none; }
  .rows > .br.end ~ .item { flex-basis: calc(var(--ar) * var(--row)); }
}

/* ---- hero: a full-bleed row of previews, each at or under its 800 px native width */
.hero { margin: 0 auto var(--space-6); --row: 160px; --row-cap: 560px; }
.hero li { position: relative; }
.hero a { display: block; }
.hero .cap {
  position: absolute; inset: auto 0 0 0; padding: var(--space-2) var(--space-3);
  font-size: var(--text-2xs); color: var(--ink); background: var(--overlay);
  opacity: 0; transition: opacity 120ms;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero li:hover .cap, .hero li:focus-within .cap { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero .cap, .item .cap { transition: none; } }

/* ---- lede: the one sentence, under the photographs */
.lede { max-width: var(--wrap); margin: 0 auto var(--space-8); padding-inline: var(--gutter); }
.headline {
  font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; line-height: 1.05;
  font-size: var(--text-display); margin: 0 0 var(--space-3); max-width: 22ch; text-wrap: balance;
}
.sub { font-size: var(--text-lg); color: var(--ink-muted); max-width: 36rem; margin: 0 0 var(--space-3); line-height: 1.4; }
.hero-links { font-size: var(--text-sm); color: var(--ink-faint); margin: 0; }
.hero-links a { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-muted); }

/* ---- catalog */
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-4); }
.section-head h2 { margin: 0; }
.count { font-size: var(--text-sm); color: var(--ink-faint); }
.catalog { margin-bottom: var(--space-9); }
.item { position: relative; background: var(--surface); }
.item a { display: block; color: var(--ink); text-decoration: none; }
.item a:focus-visible { outline-offset: -2px; }
.item .cap, .item .pr {
  position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-2) var(--space-3);
  font-size: var(--text-2xs); line-height: 1.3; background: var(--overlay);
  opacity: 0; transition: opacity 120ms; pointer-events: none;
}
.item .cap { padding-right: 6.5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .pr { left: auto; background: none; }
.item:hover .cap, .item:focus-within .cap, .item:hover .pr, .item:focus-within .pr { opacity: 1; }

/* ---- for agents: transcript, three steps, license line */
.agents { max-width: var(--measure); margin: 0 auto var(--space-8); padding-inline: var(--gutter); }
.agents h2 { margin-bottom: var(--space-4); }
.agents .intro { color: var(--ink-muted); max-width: 40rem; margin-bottom: var(--space-5); }
.transcript { margin: 0 0 var(--space-6); min-width: 0; }
.transcript .frame { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--surface); }
.transcript pre {
  padding: var(--space-4) var(--space-5); background: none;
  white-space: pre; overflow-wrap: normal; font-size: var(--text-xs); line-height: 1.6; min-width: max-content;
  color: var(--ink-muted);
}
.transcript .rq { color: var(--ink); font-weight: 500; }
.transcript .st { color: var(--ink); font-weight: 500; }
.transcript .cm { color: var(--ink-faint); }
.transcript figcaption { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--ink-faint); }
.howto { list-style: none; counter-reset: step; margin: 0 0 var(--space-5); padding: 0; display: grid; gap: var(--space-4); }
@media (min-width: 52rem) { .howto { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); } }
.howto li { counter-increment: step; padding-top: var(--space-3); border-top: 1px solid var(--border); font-size: var(--text-sm); color: var(--ink-muted); }
.howto li::before { content: counter(step, decimal-leading-zero); display: block; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-faint); margin-bottom: var(--space-2); }
.howto h3 { color: var(--ink); margin-bottom: var(--space-2); }
.howto p { margin: 0; }
.howto code, .flow code, .steps code { white-space: nowrap; }
.license-line { font-size: var(--text-sm); color: var(--ink-muted); max-width: 40rem; margin: 0; }
.people { max-width: var(--measure); margin: 0 auto var(--space-8); padding-inline: var(--gutter); font-size: var(--text-sm); }
.people p { margin: 0; }

/* ---- footer: TDM notice (legal text) + colophon */
.notice { max-width: var(--measure); margin: var(--space-9) auto 0; padding: var(--space-5) var(--gutter) var(--space-7); border-top: 1px solid var(--border); font-size: var(--text-xs); color: var(--ink-muted); }
.notice strong { color: var(--ink); }
.notice .human { margin-top: var(--space-4); color: var(--ink); }
.notice .colophon { margin: var(--space-5) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--border); color: var(--ink-faint); display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }

/* ---- image page: the preview at its native width on the ground, text beneath */
.stage { margin: 0 auto var(--space-3); max-width: var(--wrap); padding-inline: var(--gutter); }
.stage img { margin-inline: auto; background: var(--surface); }
.pager { max-width: var(--measure); margin: 0 auto var(--space-6); padding-inline: var(--gutter); display: flex; gap: var(--space-4); font-size: var(--text-xs); color: var(--ink-faint); }
.pager a { color: var(--ink-muted); text-decoration: none; }
.pager a:hover { color: var(--ink); }
.pager .older { margin-left: auto; }
.photo { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); max-width: var(--measure); margin: 0 auto; padding-inline: var(--gutter); }
@media (min-width: 60rem) { .photo { grid-template-columns: minmax(0, 3fr) minmax(18rem, 2fr); align-items: start; gap: var(--space-8); } }
.photo h1 { margin-bottom: var(--space-3); }
.photo .meta { color: var(--ink-muted); font-size: var(--text-sm); margin-bottom: var(--space-4); }
.photo .desc { max-width: 40rem; }
.photo .keywords { font-size: var(--text-sm); color: var(--ink-muted); max-width: 40rem; }
dl.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-1) var(--space-4); margin: var(--space-5) 0 0; font-size: var(--text-xs); color: var(--ink-muted); }
dl.facts dt { color: var(--ink-faint); }
dl.facts dd { margin: 0; overflow-wrap: anywhere; }
.buy h2 { font-family: var(--font-body); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-faint); font-weight: 500; margin-bottom: var(--space-3); }
.buy .amount { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 500; color: var(--price); margin: 0 0 var(--space-1); line-height: 1.1; }
.buy .terms { font-size: var(--text-xs); color: var(--ink-muted); margin-bottom: var(--space-4); }
.buy pre { font-size: var(--text-xs); }
.flow { margin: var(--space-4) 0; padding-left: 1.25rem; font-size: var(--text-sm); color: var(--ink-muted); }
.flow li + li { margin-top: var(--space-2); }
.flow code { color: var(--ink); }
.buy .fine { font-size: var(--text-xs); color: var(--ink-faint); margin-top: var(--space-3); }

/* ---- license / prose pages */
.prose { padding-block: var(--space-5) var(--space-7); }
.prose h1 { font-size: var(--text-2xl); }
.prose h2 { margin-top: var(--space-6); }
.prose h3 { margin-top: var(--space-5); }
.prose p, .prose li { max-width: 46rem; }
.prose blockquote { margin: var(--space-4) 0; padding: var(--space-3) var(--space-4); border-left: 2px solid var(--border); background: var(--surface); }
.prose .indent { padding-left: 1.5rem; }
.prose .note { font-size: var(--text-sm); color: var(--ink-muted); }