/* Edit one thing, keep the rest. Page layout on top of house-style.css. */
:root {
  --gpt: #f4a261;
  --gemini: #6fa8ff;
  --flux: #8fe3cf;
  --yes: #6ed696;
  --warn: #ffcd6e;
  --no: #ff8a7a;
}

.m-gpt { color: var(--gpt); }
.m-gemini { color: var(--gemini); }
.m-flux { color: var(--flux); }
b.m-gpt, b.m-gemini, b.m-flux { font-weight: 500; }

/* Film */
.film { display: grid; gap: 12px; }
.film-frame { border: 1px solid var(--rule); background: #000; }
.film-frame video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.chapters { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chapters::-webkit-scrollbar { display: none; }
.chapters button {
  flex: 0 0 auto; display: grid; gap: 3px; min-height: 44px; padding: 8px 12px; text-align: left;
  border: 1px solid var(--rule); background: var(--panel); font: 400 14px / 1.2 'Instrument Sans', sans-serif;
}
.chapters button small { font: 500 11px / 1 var(--mono); letter-spacing: 0.08em; color: var(--muted); }
.chapters button[aria-current='true'] { border-color: var(--accent); color: var(--accent); }

/* Sections */
.block { display: grid; gap: 28px; padding: 72px 0 0; }
.block-head { display: grid; gap: 12px; max-width: 760px; }
.block-head .eyebrow { margin: 0; }
.block-head h2, .take-card h3, .tips h3 { margin: 0; font-weight: 400; font-family: 'Instrument Serif', serif; text-wrap: balance; }
.block-head h2 { font-size: clamp(34px, 4.2vw, 58px); line-height: 1; letter-spacing: -0.02em; }
.block-head h2 em, .pull em { color: var(--accent); }
.block-head p:not(.eyebrow) { margin: 0; font-size: 17px; line-height: 1.6; color: var(--muted); }

/* Edit cards */
.edits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.edit { display: grid; align-content: start; gap: 12px; padding: 22px; background: var(--panel); }
.edit-n { margin: 0; font: 500 11px / 1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.edit q { font: 400 23px / 1.2 'Instrument Serif', serif; }
.verdicts { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.45; color: var(--muted); }
.verdicts li { position: relative; padding-left: 24px; }
.verdicts li::before { position: absolute; left: 0; top: 0; font: 500 14px / 1.45 var(--mono); }
.verdicts .yes::before { content: '✓'; color: var(--yes); }
.verdicts .no::before { content: '✗'; color: var(--no); }
.verdicts .warn::before { content: '!'; color: var(--warn); }

/* Stills */
.stills { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
figure { display: grid; gap: 10px; margin: 0; min-width: 0; }
figure img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }
figcaption { font: 400 12.5px / 1.5 var(--mono); color: var(--muted); }
.pull {
  margin: 8px 0; max-width: 900px; padding-left: 22px; border-left: 2px solid var(--accent);
  font: 400 clamp(26px, 3vw, 40px) / 1.2 'Instrument Serif', serif; text-wrap: balance;
}

/* Score tables */
.score { overflow-x: auto; border: 1px solid var(--rule); }
.score table { width: 100%; min-width: 520px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.score th, .score td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--rule); font-size: 15px; }
.score thead th { font: 500 11px / 1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); background: var(--panel); }
.score tbody th { font: 500 13px / 1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.score tr:last-child > * { border-bottom: 0; }
.pill { display: inline-block; padding: 4px 9px; border: 1px solid currentColor; font: 500 11px / 1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.pill.yes { color: var(--yes); }
.pill.warn { color: var(--warn); }
.pill.no { color: var(--no); }

/* Portrait compare */
.compare { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 32px; align-items: start; }
.compare-stage { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--rule); background: var(--panel); --cut: 50%; }
.compare-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare-orig { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--cut)) 0 0); }
.compare-orig::after { content: ''; position: absolute; top: 0; bottom: 0; left: var(--cut); width: 2px; margin-left: -1px; background: var(--accent); }
.compare-tag {
  position: absolute; top: 12px; padding: 6px 10px; background: var(--glass); border: 1px solid var(--glass-line);
  font: 500 11px / 1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
}
.tag-left { left: 12px; }
.tag-right { right: 12px; color: var(--accent); }
.compare-ui { display: grid; gap: 22px; align-content: start; }
.compare-models { display: flex; flex-wrap: wrap; gap: 8px; }
.compare-models button { min-height: 44px; padding: 10px 16px; border: 1px solid var(--rule); background: var(--panel); font: 500 13px / 1 var(--mono); letter-spacing: 0.06em; }
.compare-models button[aria-pressed='true'] { border-color: var(--accent); color: var(--accent); }
.compare-range { display: grid; gap: 10px; font: 400 13px / 1.4 var(--mono); color: var(--muted); }
.compare-range input { width: 100%; min-height: 44px; accent-color: var(--accent); }
.compare-note { margin: 0; font: 400 clamp(22px, 2.2vw, 30px) / 1.25 'Instrument Serif', serif; }

/* Take-away */
.take { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.take-card { display: grid; align-content: start; gap: 12px; padding: 28px; background: var(--panel); border: 1px solid var(--rule); }
.take-card .eyebrow { margin: 0; }
.m-line-gpt { border-top: 3px solid var(--gpt); }
.m-line-flux { border-top: 3px solid var(--flux); }
.take-card h3 { font-size: 32px; line-height: 1.1; }
.take-card p:not(.eyebrow) { margin: 0; line-height: 1.6; color: var(--muted); }

/* Recipe */
.recipe { border: 1px solid var(--rule); background: var(--panel); }
.recipe-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--rule); }
.recipe-top .kicker { margin: 0; }
.recipe pre { margin: 0; padding: 20px 18px; overflow-x: auto; white-space: pre-wrap; font: 400 14.5px / 1.7 var(--mono); color: var(--ink); }
.copy { min-height: 40px; padding: 8px 14px; border: 1px solid var(--rule); font: 500 12px / 1 var(--mono); }
.copy[data-done] { border-color: var(--accent); color: var(--accent); }
.tips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.tips h3 { font-size: 24px; }
.tips p { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
.tips q { color: var(--ink); }

/* Dialog and footer */
.how-steps q, .how-lede q { color: var(--ink); }
.how-downloads { grid-template-columns: repeat(3, 1fr); }
.bar-logo { width: 22px; height: 22px; stroke: none; color: var(--ink); }
.site-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; max-width: 1600px; margin: 72px auto 0; padding: 14px 4.2%;
  border-top: 1px solid var(--rule); font: 500 12px / 1.4 var(--mono); color: var(--muted);
}
.site-foot .foot-id { letter-spacing: 0.1em; text-transform: uppercase; }
.site-foot .foot-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; }
.site-foot .foot-link:hover { color: var(--accent); }
.site-foot [data-exploration-controls] { margin-left: auto; border-top: 0; background: none; }

@media (max-width: 1080px) {
  .edits, .tips { grid-template-columns: 1fr 1fr; }
  .how-downloads { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .stills, .take, .compare { grid-template-columns: 1fr; }
  .how-downloads { grid-template-columns: 1fr; }
  .site-foot [data-exploration-controls] { margin-left: 0; width: 100%; }
  .block { padding-top: 52px; }
}
@media (max-width: 560px) {
  .edits, .tips { grid-template-columns: 1fr; }
}