/* Lab (Oct 12, 2026): how the site is made, round by round. Load after tokens.css, chrome.css, mission.css.
   Tokens only; dark and light; no 3D, no canvas. Page frame rules copied from sources/sources.css (same names). */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--sp3); font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.crumbs a { text-decoration: none; color: var(--ink-2); }
.crumbs a:hover { color: var(--ink); }
.sec { position: relative; padding: var(--sec-y) var(--gut); }
.ph { position: relative; padding: 112px var(--gut) var(--sp6); overflow: hidden; }
.ph::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 80% at 76% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%); }
.ph .wrap { position: relative; }
.ph .m-eyebrow { margin-bottom: var(--sp2); }
.h1 { margin: 0; max-width: 18ch; font: 400 clamp(38px, 4.8vw, 70px)/1.03 var(--sans); letter-spacing: -.045em; text-wrap: balance; }
.lede { margin: var(--sp3) 0 0; max-width: 62ch; font-size: var(--t-lead); line-height: 1.62; color: var(--ink-2); }
.sec-h { max-width: 860px; margin-bottom: var(--sp4); }
.sec-p { margin: var(--sp2) 0 0; max-width: 64ch; font-size: 15px; line-height: 1.65; color: var(--ink-2); }

/* ---------- hero ---------- */
.lab-credit { margin: var(--sp2) 0 0; max-width: 62ch; font: 400 13px/1.55 var(--mono); color: var(--muted); }
.lab-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sp3); }
.lab-jump a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--line-2); font: 500 13px/1 var(--sans); color: var(--ink-2); text-decoration: none; transition: color var(--dur-1), border-color var(--dur-1); }
.lab-jump a:hover { color: var(--ink); border-color: var(--accent); }

/* ---------- 01 how it is made ---------- */
.lab-how-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--sp2); }
.lab-panel { padding: 22px 22px 20px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--card); box-shadow: var(--elev-1); }
.lab-panel-t { margin: 0 0 14px; font: 500 12px/1.3 var(--mono); letter-spacing: var(--track); text-transform: uppercase; color: var(--accent); }
.lab-roles { margin: 0; display: grid; gap: 14px; }
.lab-roles div { display: grid; gap: 3px; }
.lab-roles dt { font: 500 15px/1.3 var(--sans); color: var(--ink); }
.lab-roles dd { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.lab-loop { list-style: none; margin: 0; padding: 0; counter-reset: lp; display: grid; gap: 0; }
.lab-loop li { position: relative; counter-increment: lp; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; padding: 0 0 12px; }
.lab-loop li::before { content: counter(lp); grid-row: 1 / span 2; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; font: 500 12px/1 var(--mono); color: var(--ink-2); background: var(--bg-2); position: relative; z-index: 1; }
.lab-loop li:not(:last-child)::after { content: ""; position: absolute; left: 12px; top: 26px; bottom: 0; width: 1px; background: var(--line-2); }
.lab-loop li:nth-child(3)::before { border-color: var(--accent); color: var(--accent); }   /* the approval step: the owner's gate */
.lab-loop b { font: 500 14.5px/1.5 var(--sans); color: var(--ink); }
.lab-loop span { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.lab-budgets { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lab-budgets li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.lab-budgets li:last-child { border-bottom: 0; padding-bottom: 0; }
.lab-budgets b { font: 500 13px/1.3 var(--mono); letter-spacing: .04em; color: var(--ink); }
.lab-budgets span { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }

/* ---------- 02 the rounds ---------- */
.lab-log-h { max-width: none; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--sp3); }
.lab-log-h > div:first-child { max-width: 760px; }
.lab-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.lab-f { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: transparent; font: 500 13px/1 var(--sans); color: var(--ink-2); cursor: pointer; transition: color var(--dur-1), border-color var(--dur-1), background-color var(--dur-1); }
.lab-f span { font: 500 12px/1 var(--mono); color: var(--muted); }
.lab-f:hover { color: var(--ink); border-color: color-mix(in srgb, var(--accent) 60%, var(--line-2)); }
.lab-f[aria-pressed="true"] { color: var(--ink); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.lab-f[aria-pressed="true"] span { color: var(--accent); }

.lab-log { list-style: none; margin: 0; padding: 0 0 0 28px; position: relative; display: grid; gap: var(--sp3); }
.lab-log::before { content: ""; position: absolute; left: 5px; top: 10px; bottom: 10px; width: 1px; background: linear-gradient(var(--line-2), var(--line-2) 90%, transparent); }
.lab-e { position: relative; scroll-margin-top: 96px; }
.lab-e::before { content: ""; position: absolute; left: -28px; top: 26px; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 1px solid var(--accent); box-shadow: 0 0 0 4px var(--bg); }
.lab-e[hidden] { display: none; }
.lab-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: var(--sp4); align-items: start; padding: 24px; border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--card); box-shadow: var(--elev-1); }
.lab-card--wide { grid-template-columns: minmax(0, 1fr); }
.lab-card--wide .lab-tx { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); grid-template-rows: auto auto 1fr; gap: 0 var(--sp4); }
.lab-card--wide .lab-meta, .lab-card--wide .lab-t { grid-column: 1; }
.lab-card--wide .lab-dl { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
.lab-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; font: 500 12px/1 var(--mono); letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); }
.lab-meta time { color: var(--ink); }
.lab-kind, .lab-who { padding: 4px 8px; border-radius: var(--r-pill); border: 1px solid var(--line-2); }
.lab-who { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.lab-t { margin: 0; font: 400 var(--t-h3)/1.2 var(--sans); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.lab-dl { margin: 16px 0 0; display: grid; gap: 12px; }
.lab-dl div { display: grid; gap: 3px; }
.lab-dl dt { font: 500 12px/1.3 var(--mono); letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); }
.lab-dl dd { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.lab-rule { padding: 10px 12px; border-radius: var(--r-md); border-left: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.lab-rule dt { color: var(--accent); }
.lab-rule dd { color: var(--ink); }

/* figures: stills sit in a dark window in both themes (the shots are dark scenes, two are light theme on purpose) */
.lab-fig { margin: 0; min-width: 0; }
.lab-frames { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 10px; }
.lab-fr { position: relative; margin: 0; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line-2); background: #05070c; }
.lab-fr img { display: block; width: 100%; height: auto; }
.lab-fig--tall .lab-fr img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 0; }
.lab-fig--three .lab-fr img { aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 50%; }
.lab-fl { position: absolute; left: 8px; top: 8px; padding: 4px 8px; border-radius: var(--r-pill); background: rgba(5, 7, 12, .78); border: 1px solid rgba(255, 255, 255, .16); font: 500 12px/1 var(--mono); letter-spacing: var(--track); text-transform: uppercase; color: #eef1f6; }
.lab-fig figcaption { margin-top: 10px; font: 400 12.5px/1.45 var(--mono); color: var(--muted); }
.lab-sw { display: none; }

/* readouts: text diffs, a mini log and a score, where a still would not show the change */
.lab-fig--read > :first-child { padding: 18px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--bg-2); }
.lab-dk { margin: 0 0 12px; font: 500 12px/1.3 var(--mono); letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); }
.lab-del, .lab-ins { margin: 0; padding: 10px 12px; border-radius: var(--r-sm); font-size: 14.5px; line-height: 1.6; }
.lab-del { color: var(--muted); background: color-mix(in srgb, var(--ink) 3%, transparent); }
.lab-del del { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 70%, transparent); }
.lab-ins ins { text-decoration: none; }
.lab-ins { margin-top: 8px; color: var(--ink); background: color-mix(in srgb, var(--accent) 9%, transparent); border-left: 2px solid var(--accent); }
.lab-dl-k { display: block; margin-bottom: 4px; font: 500 12px/1.2 var(--mono); letter-spacing: var(--track); text-transform: uppercase; text-decoration: none; color: var(--muted); }
.lab-ins .lab-dl-k { color: var(--accent); }
.lab-mini { list-style: none; margin: 0; display: grid; gap: 14px; }
.lab-mini li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
.lab-mini time { font: 500 12px/1.6 var(--mono); letter-spacing: var(--track); text-transform: uppercase; color: var(--accent); }
.lab-mini p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.lab-score { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 4vw, 40px); padding: 30px 18px !important; }
.lab-sc { margin: 0; display: grid; justify-items: center; gap: 6px; }
.lab-sc-g { font: 300 clamp(56px, 7vw, 88px)/1 var(--sans); letter-spacing: -.04em; color: var(--muted); }
.lab-sc--on .lab-sc-g { color: var(--ink); }
.lab-sc-n { font: 500 13px/1 var(--mono); color: var(--ink-2); }
.lab-sc-k { font: 500 12px/1 var(--mono); letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); }
.lab-sc--on .lab-sc-k { color: var(--accent); }
.lab-sc-ar { font: 300 32px/1 var(--sans); color: var(--muted); }


/* ---------- widths ---------- */
@media (max-width: 1100px) {
  .lab-how-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lab-how-grid .lab-panel:last-child { grid-column: 1 / -1; }
  .lab-card, .lab-card--wide .lab-tx { grid-template-columns: minmax(0, 1fr); }
  .lab-card--wide .lab-dl { grid-column: 1; grid-row: auto; margin-top: 16px; }
  .lab-card { gap: var(--sp3); }
}
@media (max-width: 760px) {
  .ph { padding-top: 96px; }
  .lab-how-grid { grid-template-columns: minmax(0, 1fr); }
  .lab-log { padding-left: 0; }
  .lab-log::before, .lab-e::before { display: none; }
  .lab-card { padding: 18px; border-radius: var(--r-lg); }
  .lab-dl dd { font-size: 14.5px; }
  .lab-budgets li { grid-template-columns: 64px minmax(0, 1fr); }
}
/* phones: a multi-frame figure shows one frame at a time with a Before / After switch (built by lab.js; without JS all frames stack) */
@media (max-width: 640px) {
  .js .lab-fig[data-sw] .lab-frames { grid-template-columns: minmax(0, 1fr); }
  .js .lab-fig[data-sw] .lab-fr:not(.on) { display: none; }
  .js .lab-fig[data-sw] .lab-sw { display: inline-flex; gap: 4px; margin: 0 0 10px; padding: 3px; border-radius: var(--r-pill); border: 1px solid var(--line-2); }
  .lab-sw button { min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: transparent; font: 500 12.5px/1 var(--mono); letter-spacing: .04em; color: var(--ink-2); cursor: pointer; }
  .lab-sw button[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--ink); }
  .lab-fl { display: none; }
  .lab-mini li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .lab-filter { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .lab-f, .lab-jump a { transition: none; } }