/* PhotoAIBench: an editorial, always-light look, loaded after the shared engine/sitegen/static/site.css
   (site.yaml extra_css; `color_scheme: light` puts .light-only on <html> so no dark tokens apply).
   Warm paper, ink headings in Instrument Serif, photos as matted prints, one vermilion accent. */

@font-face {
  font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/instrument-serif-latin-400-normal-5.3.0.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(/fonts/instrument-serif-latin-400-italic-5.3.0.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #f7f4ee;
  --surface: #fffdf9;
  --surface-2: #efeae0;
  --surface-3: #e6dfd2;
  --zebra: transparent;
  --text: #2a2621;
  --heading: #15130f;
  --muted: #655d52;
  --border: #d8d1c4;
  --border-strong: #b5ab9a;
  --accent: #b3361f;
  --accent-hover: #8f2a17;
  --accent-soft: #f5e4dc;
  --accent-ring: #b3361f33;
  --accent-text: #ffffff;
  --link: #15130f;
  --link-underline: #b3361f8c;
  --glow: transparent;
  --grid-line: transparent;
  --mat: #ffffff;
  --display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --radius: 3px;
  --radius-lg: 4px;
  --measure: 100%;
  --header-bg: #f7f4ee;
  --shadow-sm: 0 1px 2px rgb(40 30 15 / 0.06);
  --shadow-md: 0 1px 2px rgb(40 30 15 / 0.05), 0 18px 40px -24px rgb(40 30 15 / 0.28);
  --shadow-lg: 0 2px 4px rgb(40 30 15 / 0.05), 0 30px 60px -28px rgb(40 30 15 / 0.38);
  --print-shadow: 0 1px 2px rgb(40 30 15 / 0.07), 0 22px 44px -22px rgb(40 30 15 / 0.32);
}

body { background: var(--bg); }
a:hover { color: var(--accent); }
::selection { background: #b3361f2e; }

/* ---------------------------------------------------------------- masthead */
.site-header { position: static; background: var(--bg); border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
html { scroll-padding-top: 1rem; }
.header-inner { flex-direction: column; justify-content: center; gap: 0; min-height: 0; padding-top: 1.6rem; }
.site-header .brand { font-family: var(--display); font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem); font-weight: 400; letter-spacing: -0.01em; line-height: 1; }
.site-header .brand-mark { display: none; }
.site-nav { width: 100%; margin-top: 1.1rem; border-top: 2px solid var(--heading); border-bottom: 1px solid var(--border); }
.nav-list { justify-content: center; flex-wrap: wrap; gap: 0.15rem 1.75rem; padding: 0.7rem 0; }
.nav-list a, .nav-list a:hover, .nav-list a[aria-current="page"] { padding: 0.15rem 0; border-radius: 0; background: none; }
.nav-list a { color: var(--text); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; }
.nav-list a:hover { color: var(--accent); }
.nav-list a[aria-current="page"] { color: var(--accent); box-shadow: inset 0 -1px 0 currentColor; }
@media (max-width: 47.99rem) {
  .header-inner { padding-top: 1.25rem; }
  .site-nav { width: calc(100% + 32px); margin: 0.9rem -16px 0; padding: 0 16px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 90%, transparent); }
  .nav-list { flex-wrap: nowrap; justify-content: flex-start; margin: 0 auto; padding: 0.65rem 1rem; gap: 1.4rem; }
}

/* ---------------------------------------------------------------- type */
h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: -0.005em; color: var(--heading); }
h1 { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4rem); line-height: 1.02; margin: 0.6rem 0 1rem; }
h2 { font-size: clamp(1.85rem, 1.45rem + 1.4vw, 2.5rem); line-height: 1.08; margin: 3.5rem 0 1rem; }
h3 { font-size: clamp(1.4rem, 1.25rem + 0.5vw, 1.65rem); line-height: 1.15; margin: 2.25rem 0 0.6rem; }
h4 { font-size: 0.75rem; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: var(--heading); }
h1 em, h2 em { font-style: italic; color: var(--accent); }
strong { color: var(--heading); }
.kicker { color: var(--accent); font-size: 0.7rem; letter-spacing: 0.16em; }
.kicker::before { width: 1.75rem; height: 1px; }
.lede { color: var(--muted); }
.prose > :where(p, ul, ol, dl, blockquote) { line-height: 1.75; }
hr { border-top-color: var(--border); }
blockquote { border-left: 2px solid var(--accent); font-family: var(--display); font-size: 1.35rem; line-height: 1.4; color: var(--heading); }
code { background: var(--surface-2); border-color: var(--border); }
pre { background: var(--surface); border-color: var(--border); }
.footnote { border-top: 0; }

/* ---------------------------------------------------------------- article pages: one centred column */
main:not(.page-home) .prose { max-width: 48rem; margin: 0 auto; }
main:not(.page-home) .page-header { max-width: none; text-align: center; padding-bottom: 2rem; margin-bottom: 2.5rem; border-bottom: 1px solid var(--border); }
main:not(.page-home) .page-header .kicker { justify-content: center; }
main:not(.page-home) .page-header .kicker::after { content: ""; width: 1.75rem; height: 1px; background: currentColor; }
main:not(.page-home) .page-header .lede { max-width: 40rem; margin-left: auto; margin-right: auto; }
.page-header .disclosure { text-align: left; max-width: 40rem; margin-left: auto; margin-right: auto; }
.page-lead { margin: -0.5rem 0 3rem; }
/* A drop cap opens guides and benchmarks. */
:is(.page-guide, .page-benchmark) .prose > p:first-of-type::first-letter {
  float: left; font-family: var(--display); font-weight: 400; font-style: normal; font-size: 4.4em; line-height: 0.82; padding: 0.06em 0.09em 0 0; color: var(--accent);
}

/* ---------------------------------------------------------------- prints: photos in a white mat */
.print { margin: 0; }
.print-mat { background: var(--mat); padding: clamp(8px, 1.4vw, 16px); border: 1px solid var(--border); box-shadow: var(--print-shadow); }
.print-mat img { display: block; width: 100%; height: auto; }
.print figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.15rem 1rem; margin-top: 0.8rem; font-size: 0.75rem; color: var(--muted); }
.print-title { font-family: var(--display); font-style: italic; font-size: 1.15rem; color: var(--heading); }
.print-credit { color: var(--muted); text-decoration: none; letter-spacing: 0.02em; }
.print-credit:hover { color: var(--accent); }

/* The benchmark's crop figures, matted like prints. content-box sizing keeps a 520 px figure at its
   natural size (no resampling of the nearest-neighbour tiles) while still fitting a phone screen. */
.page-benchmark .prose p > img[src^="/img/"] {
  --mat-w: clamp(10px, 2.5vw, 24px);
  box-sizing: content-box; display: block; max-width: calc(100% - 2 * var(--mat-w) - 2px); height: auto; margin: 1.25rem auto 0;
  padding: var(--mat-w); background: var(--mat); border: 1px solid var(--border); box-shadow: var(--print-shadow);
}
.page-benchmark .prose { counter-reset: plate; }
.page-benchmark h2#side-by-side ~ h3 { counter-increment: plate; text-align: center; margin-top: 4rem; }
.page-benchmark h2#side-by-side ~ h3::before {
  content: "Plate " counter(plate); display: block; margin-bottom: 0.4rem;
  font-family: var(--sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
}

/* ---------------------------------------------------------------- tables: book style */
.table-wrap, .prose > table { border: 0; border-radius: 0; background: transparent; box-shadow: none; border-top: 2px solid var(--heading); border-bottom: 2px solid var(--heading); }
thead th { background: transparent; color: var(--heading); font-weight: 650; border-bottom: 1px solid var(--heading); }
th, td { border-bottom-color: var(--border); }
tbody tr:hover > * { background: var(--surface-2); }
.page-benchmark .table-wrap td:first-child { min-width: 9.5rem; }

/* ---------------------------------------------------------------- buttons, tools, forms */
button, .button-link { border-radius: 2px; box-shadow: none; background: transparent; border-color: var(--heading); color: var(--heading); font-size: 0.75rem; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; }
button:hover, .button-link:hover { border-color: var(--accent); color: var(--accent); }
button.primary, .button-link.primary { background: var(--heading); border-color: var(--heading); color: var(--bg); box-shadow: none; }
button.primary:hover, .button-link.primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
button.link-button { font-size: inherit; letter-spacing: inherit; text-transform: none; color: var(--heading); font-weight: 500; }
button.link-button:hover { color: var(--accent); }
.tool { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-md); }
.tool::before { height: 3px; border-radius: 0; background: var(--heading); }
.tool h2, .tool-title { font-size: clamp(1.6rem, 1.4rem + 0.8vw, 2rem); }
.tool h3, .tool h4, .step-title { font-family: var(--sans); font-size: 0.75rem; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: var(--heading); }
.tool-privacy { background: transparent; border: 1px solid var(--border); color: var(--text); font-weight: 500; }
.tool-privacy::before { background: var(--accent); }
.drop { border-color: var(--border-strong); border-radius: var(--radius); background: var(--bg); }
.drop::before, .drop-main { color: var(--heading); }
.drop::before { background: var(--accent); }
.drop:hover, .drop.dragging, .drop:focus-within { border-color: var(--accent); background: var(--accent-soft); }
input[type="number"], input:not([type]), input[type="text"], input[type="password"], input[type="url"], input[type="email"], input[type="search"], select, textarea { background: var(--surface); border-radius: 2px; }
input[type="file"]::file-selector-button { border-radius: 2px; background: var(--surface); }
.stats div { background: var(--bg); border-radius: 2px; }
.stats dd { font-family: var(--display); font-weight: 400; font-size: 1.6rem; letter-spacing: 0; line-height: 1.15; }
.disclosure, .callout, .notice, .tool .notice, .status, .note.warn, details, .prose > details { border-radius: 2px; }
.disclosure { background: var(--surface); }
.iqc-map, .irc-figure img { border-radius: 2px; }

/* ---------------------------------------------------------------- home */
main.page-home { padding-top: clamp(1.5rem, 3vw, 2.25rem); }
.masthead { display: grid; gap: 2.5rem; align-items: center; max-width: none; margin: 0 0 4.5rem; padding-top: 0; }
@media (min-width: 52rem) { .masthead { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(3rem, 6vw, 5.5rem); } }
.masthead h1 { font-size: clamp(3.1rem, 1.6rem + 5.6vw, 6rem); line-height: 0.95; letter-spacing: -0.02em; margin: 1rem 0 1.25rem; }
.masthead .lede { font-size: clamp(1.05rem, 1rem + 0.25vw, 1.15rem); max-width: 36rem; }
.masthead .print { width: 100%; max-width: 30rem; justify-self: center; }
.hero-actions { margin: 1.75rem 0 1.5rem; }
.hero-actions .button-link { min-height: 3rem; padding: 0.7rem 1.4rem; font-size: 0.75rem; }
.tool-cards > h2, .exhibit h2, .sheet-head h2 { margin-top: 0.6rem; }
.tool-cards { border-top: 2px solid var(--heading); padding-top: 1.5rem; }
.tool-cards > h2 { font-size: clamp(1.85rem, 1.45rem + 1.4vw, 2.5rem); }
.cards-photo { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 2.5rem 2rem; }
.cards-photo .card, .cards-photo .card:hover { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; transform: none; gap: 0; }
.card-photo { background: var(--mat); padding: 10px; border: 1px solid var(--border); box-shadow: var(--print-shadow); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.card-photo img { display: block; width: 100%; height: auto; }
.cards-photo .card:hover .card-photo { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.card-body { display: flex; flex-direction: column; gap: 0.45rem; padding-top: 1.1rem; flex: 1; }
.cards-photo h3 { font-size: clamp(1.6rem, 1.4rem + 0.6vw, 1.9rem); line-height: 1.1; letter-spacing: -0.005em; }
.cards-photo .card h3 a { color: var(--heading); }
.cards-photo .card:hover h3 a { color: var(--accent); }
.card .card-kicker, .card-cta { color: var(--accent); }
.card .card-kicker { letter-spacing: 0.16em; }
.card-cta { font-size: 0.7rem; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; }
.card p { font-size: 0.975rem; }

.exhibit { display: grid; gap: 2.5rem; align-items: center; margin: 5rem 0; border-top: 2px solid var(--heading); padding-top: 1.5rem; }
@media (min-width: 60rem) {
  .exhibit { grid-template-columns: minmax(0, 1fr) auto; gap: 4.5rem; align-items: start; }
  .exhibit-text { position: sticky; top: 2.5rem; padding-top: 1rem; }
}
.exhibit-text { max-width: 34rem; }
.exhibit-text p:not(.kicker) { font-size: 1.0625rem; line-height: 1.75; }
.plate { margin: 0; justify-self: center; }
.plate img { box-sizing: content-box; display: block; width: 520px; max-width: calc(100% - 2 * clamp(10px, 2.5vw, 22px) - 2px); height: auto; padding: clamp(10px, 2.5vw, 22px); background: var(--mat); border: 1px solid var(--border); box-shadow: var(--print-shadow); }
.plate figcaption { margin-top: 0.8rem; font-family: var(--display); font-style: italic; font-size: 1.05rem; color: var(--muted); text-align: center; }

/* The contact sheet sits on a full-width band; the shadow trick paints it without widening the page. */
.contact-sheet { position: relative; margin: 5rem 0; padding: 3.5rem 0 4rem; background: var(--surface-2); box-shadow: 0 0 0 100vmax var(--surface-2); clip-path: inset(0 -100vmax); }
.sheet-head { max-width: 40rem; }
.sheet-head p:not(.kicker) { color: var(--muted); }
.sheet { list-style: none; padding: 0; margin: 2.25rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.25rem; max-width: none !important; }
@media (min-width: 40rem) { .sheet { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.25rem 1.75rem; } }
@media (min-width: 64rem) { .sheet { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.frame { margin: 0; }
.frame a { display: block; color: var(--heading); text-decoration: none; }
.frame img { display: block; width: 100%; height: auto; aspect-ratio: 1; padding: clamp(5px, 0.8vw, 9px); background: var(--mat); border: 1px solid var(--border); box-shadow: var(--print-shadow); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.frame a:hover img { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.frame-caption { display: block; margin-top: 0.75rem; font-family: var(--display); font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem); line-height: 1.2; }
.frame a:hover .frame-caption { color: var(--accent); }
.frame-no { margin-right: 0.3rem; font-family: var(--sans); font-size: 0.68rem; font-weight: 650; letter-spacing: 0.08em; color: var(--accent); font-variant-numeric: tabular-nums; vertical-align: 0.15em; }
.frame-credit { display: block; margin-top: 0.2rem; font-size: 0.72rem; color: var(--muted); }
.home-body { max-width: 48rem; }
.home-body > h2 { border-top: 2px solid var(--heading); padding-top: 1.5rem; }

/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--surface-2); border-top: 2px solid var(--heading); }
.footer-brand .brand { font-family: var(--display); font-size: 2rem; font-weight: 400; letter-spacing: -0.01em; }
.footer-brand .brand-mark { display: none; }
.site-footer h2 { font-family: var(--sans); font-weight: 650; }
.colophon { font-family: var(--display); font-style: italic; font-size: 1.05rem; line-height: 1.4; color: var(--text); margin-top: 1rem !important; }
.footer-bottom { border-top-color: var(--border-strong); }

@media (prefers-reduced-motion: reduce) {
  .card-photo, .frame img { transition: none; }
  .cards-photo .card:hover .card-photo, .frame a:hover img { transform: none; }
}