@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

:root { --ink:#f4f4f4; --muted:#b9b9b9; --line:#333; --accent:#e3a78f; --paper:#000; --ground:#000; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; background:var(--ground); color:var(--ink); font:14px/1.6 'DM Sans',Arial,sans-serif; }
h1,h2,h3,h4,p,figure { margin:0; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
header,main,footer { max-width:1680px; margin:auto; background:var(--paper); }
header { display:flex; justify-content:space-between; gap:20px; padding:24px 4%; border-bottom:1px solid var(--line); font-size:10px; letter-spacing:.08em; }
header a { font-weight:700; }
header>span { color:var(--muted); }
.cover { display:grid; grid-template-columns:.65fr 1.35fr; gap:40px; padding:44px 4% 35px; align-items:center; }
.kicker,.heading>span { font-size:10px; letter-spacing:.09em; color:var(--accent); font-weight:600; }
h1 { font-size:clamp(38px,4.2vw,68px); line-height:1.05; font-weight:500; letter-spacing:-.055em; margin:22px 0; }
.cover figure img { aspect-ratio:16/9; object-fit:contain; }
.cover-points { margin:0; padding-left:17px; color:var(--muted); font-size:12px; }
.cover-points li+li { margin-top:5px; }
nav { display:flex; flex-wrap:wrap; gap:12px 28px; border-block:1px solid var(--line); padding:18px 4%; font-size:11px; }
nav a:hover { color:var(--accent); }
section { padding:48px 4% 52px; border-bottom:14px solid var(--ground); }
.heading { display:flex; gap:28px; align-items:baseline; padding-bottom:22px; margin-bottom:28px; border-bottom:1px solid var(--ink); }
.heading>span { min-width:150px; }
h2 { font-size:clamp(27px,3vw,43px); font-weight:500; line-height:1.1; letter-spacing:-.04em; }
h3 { font-size:24px; font-weight:500; line-height:1.25; letter-spacing:-.025em; }
h4 { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; margin-bottom:10px; }
figure { min-width:0; }
figure button { display:block; width:100%; padding:0; border:0; background:none; text-align:left; }
figure img { display:block; width:100%; object-fit:cover; }
figure button:hover { opacity:.94; }
figcaption { padding-top:10px; font-size:10px; color:var(--muted); line-height:1.5; }
figcaption b { font-weight:600; color:var(--ink); display:block; }
strong { font-weight:700; color:var(--ink); }
figcaption a { display:inline-block; margin-top:6px; text-decoration:underline; text-underline-offset:3px; }
.source-row { display:grid; grid-template-columns:100px repeat(3,minmax(0,1fr)); gap:20px; margin-bottom:28px; }
.source-row>div { padding-top:12px; }
.source-row h3 { font-size:20px; }
.source-row>div>p { font-size:10px; color:var(--muted); margin-top:8px; }
.source-row img { aspect-ratio:1.15; object-position:center 72%; background:#f5f5f2; }
.pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.pair>figure>button>img { aspect-ratio:16/9; }
.pair .studio { object-position:center 76%; }
.process-points { display:flex; flex-wrap:wrap; gap:10px 38px; margin:22px 0 0; padding:18px 0 0 17px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); }
.process-points li { flex:1 1 220px; padding-left:3px; }
li::marker { color:var(--accent); }
.compact-points { padding-left:16px; margin:0; color:var(--muted); font-size:12px; }
.compact-points li+li { margin-top:6px; }
.detail-row { display:grid; grid-template-columns:1fr 1fr .6fr; gap:24px; align-items:center; margin-top:35px; }
.detail-row img { aspect-ratio:1.6; object-position:center 75%; }
.detail-row h3 { font-size:21px; margin-bottom:14px; }
.iteration { padding-top:30px; margin-top:42px; border-top:1px solid var(--line); }
.subheading { display:flex; flex-wrap:wrap; align-items:baseline; gap:14px 22px; margin-bottom:22px; }
.subheading>span { color:var(--accent); font-size:11px; }
.subheading small { margin-left:auto; font-size:9px; color:var(--muted); letter-spacing:.05em; }
.trio { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.trio img { aspect-ratio:1.6; }
.integration { display:grid; grid-template-columns:.45fr 1.55fr; gap:28px; align-items:center; }
.inputs { display:grid; gap:12px; text-align:center; }
.inputs img { height:170px; object-fit:cover; object-position:center 73%; }
.inputs>span { color:var(--accent); }
.integration>figure img { aspect-ratio:16/9; object-fit:contain; }
.mini { display:flex; align-items:center; gap:18px; margin-top:20px; color:var(--muted); font-size:10px; }
.mini img { width:75px; height:90px; object-fit:cover; }
.fidelity-row { display:grid; grid-template-columns:170px minmax(0,1fr); gap:25px; padding:24px 0; border-top:1px solid var(--line); }
.fidelity-row .pair { align-items:start; }
.evidence-crop { position:relative; overflow:hidden; background:#f1f1ed; }
.evidence-crop img { position:absolute; max-width:none; height:auto; aspect-ratio:auto; object-fit:initial; }
.environment-issues { margin-bottom:34px; }
.issue-grid { display:grid; grid-template-columns:1fr 1fr; gap:30px; padding:22px; background:#181818; }
.issue-grid>article>span { font-size:9px; color:var(--accent); letter-spacing:.06em; }
.issue-grid h3 { font-size:21px; margin:8px 0 12px; }
.environment-feature { padding-top:30px; margin-top:42px; border-top:1px solid var(--ink); }
.environment-feature-title { display:flex; flex-wrap:wrap; gap:14px 22px; align-items:baseline; margin-bottom:24px; }
.environment-feature-title>span { color:var(--accent); font-size:9px; letter-spacing:.06em; }
.environment-feature-title h3 { font-size:30px; }
.environment-feature-title small { margin-left:auto; color:var(--muted); font-size:9px; }
.revision-pair { display:grid; grid-template-columns:180px minmax(0,1fr); gap:24px; align-items:start; }
.earlier-reference { padding-top:12px; border-top:1px solid var(--line); }
.earlier-reference img,.environment-large img { aspect-ratio:16/9; object-fit:contain; background:#f4f4f0; }
.environment-large figcaption { font-size:10px; }
details { border-block:1px solid var(--line); margin-top:20px; }
summary { cursor:pointer; padding:13px 0; list-style:none; font-size:11px; font-weight:700; color:var(--ink); }
summary:hover { color:var(--accent); }
details[open]>summary { color:var(--ink); }
.all-sources { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:10px; padding-bottom:20px; }
.all-sources img { aspect-ratio:1; object-fit:cover; }
.all-sources span { font-size:9px; color:var(--muted); }
.research-board { display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:center; padding:20px 0 25px; }
.research-board img { height:200px; object-fit:contain; }
.research-board .research-link { display:inline-block; font-size:11px; margin-top:12px; }
.research-link { text-decoration:underline; text-underline-offset:3px; }
.material-palette { display:flex; gap:5px; margin:16px 0; }
.material-palette span { width:48px; height:20px; }
.written-reference { padding:24px; background:#181818; }
.written-reference>span { font-size:9px; color:var(--accent); }
.written-reference h4 { text-transform:none; font-size:23px; margin-top:10px; }
.written-reference p { font-size:11px; color:var(--muted); }
.table-scroll { overflow:auto; }
table { border-collapse:collapse; width:100%; font-size:11px; margin:10px 0 20px; }
th,td { text-align:left; vertical-align:top; padding:12px; border-bottom:1px solid var(--line); }
th { font-size:9px; text-transform:uppercase; }
td:first-child { width:20%; font-weight:500; }
td a { text-decoration:underline; }
.footnote,.prompt-transcript { color:var(--muted); font-size:11px; padding-bottom:18px; max-width:900px; }
.delivery-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.delivery-grid img { aspect-ratio:16/9; object-fit:contain; }
.delivery-note { display:flex; justify-content:space-between; flex-wrap:wrap; gap:15px; margin-top:25px; padding-top:20px; border-top:1px solid var(--line); font-size:11px; color:var(--muted); }
.delivery-note a { text-decoration:underline; text-underline-offset:3px; color:var(--ink); }
footer { display:flex; justify-content:space-between; gap:20px; padding:30px 4%; font-size:10px; color:var(--muted); }
footer>span { color:var(--ink); font-weight:500; }
dialog { width:95vw; max-width:1600px; border:0; background:white; padding:48px 15px 15px; }
dialog::backdrop { background:#1b201de8; }
dialog img { display:block; width:100%; max-height:82vh; object-fit:contain; }
dialog button { position:absolute; right:20px; top:14px; border:0; background:none; font-size:12px; }
@media(max-width:900px) {
  .cover { gap:25px; grid-template-columns:.7fr 1.3fr; }
  h1 { font-size:42px; }
  .source-row { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
  .source-row>div { grid-column:1/-1; display:flex; justify-content:space-between; align-items:baseline; padding:0; }
  .revision-pair { grid-template-columns:140px minmax(0,1fr); gap:18px; }
  .fidelity-row { grid-template-columns:140px minmax(0,1fr); gap:18px; }
  .inputs img { height:130px; }
}
@media(max-width:650px) {
  header { padding-block:18px; }
  header>span:nth-child(2) { display:none; }
  .cover { grid-template-columns:1fr; padding-top:28px; }
  h1 { font-size:48px; margin-block:16px; }
  .cover-points { font-size:11px; }
  nav { font-size:10px; gap:8px 20px; }
  section { padding-top:30px; padding-bottom:35px; }
  .heading { display:block; margin-bottom:22px; padding-bottom:18px; }
  .heading h2 { margin-top:12px; }
  h2 { font-size:32px; }
  .pair,.trio,.integration,.research-board,.issue-grid,.delivery-grid { grid-template-columns:1fr; }
  .pair,.trio { gap:22px; }
  .process-points { display:block; margin-top:18px; padding-top:14px; }
  .process-points li+li { margin-top:6px; }
  .detail-row { grid-template-columns:1fr 1fr; gap:14px; }
  .detail-row>div { grid-column:1/-1; }
  .inputs { grid-template-columns:1fr auto 1fr; align-items:center; gap:14px; }
  .inputs img { height:145px; }
  .subheading { gap:8px 15px; }
  .subheading h3 { font-size:22px; }
  .subheading small { display:none; }
  .fidelity-row { grid-template-columns:1fr; }
  .fidelity-row .pair { grid-template-columns:1fr 1fr; gap:12px; }
  .environment-feature-title h3 { flex-basis:100%; font-size:28px; }
  .environment-feature-title small { margin-left:0; }
  .revision-pair { grid-template-columns:1fr; gap:18px; }
  .earlier-reference { max-width:230px; }
  .environment-feature { margin-top:32px; }
  .issue-grid { gap:25px; padding:18px; }
  .all-sources { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .research-board { gap:20px; }
  .research-board img { height:170px; }
  footer { flex-direction:column; gap:10px; }
}
@media print {
  :root { --paper:#fff; --ground:#fff; --ink:#252722; --muted:#555; --accent:#a34d32; }
  .issue-grid,.written-reference,.workflow-prompt { background:#f5f4ef; }
  nav,dialog { display:none; }
  section { break-before:page; border:0; }
  figure { break-inside:avoid; }
  .cover { padding-top:20px; }
  .delivery-grid a,.delivery-note a { display:none; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* Interactive image comparisons use full-size layers; the divider never stretches an image. */
.comparison { margin:0; min-width:0; }
.compare-stage { position:relative; overflow:hidden; background:#eeeee8; isolation:isolate; }
.compare-base,.compare-overlay { position:absolute; inset:0; }
.compare-base>img,.compare-overlay>img { width:100%; height:100%; object-fit:cover; }
.compare-base>.evidence-crop,.compare-overlay>.evidence-crop { width:100%; height:100%; }
.compare-overlay { clip-path:inset(0 calc(100% - var(--position)) 0 0); z-index:2; }
.compare-label { position:absolute; top:16px; padding:5px 10px; background:#fffffff0; color:#252722; font-size:10px; font-weight:700; }
.compare-label-before { left:16px; }
.compare-label-after { right:16px; }
.compare-divider { position:absolute; top:0; bottom:0; left:var(--position); width:2px; transform:translateX(-50%); background:white; box-shadow:0 0 5px #0003; pointer-events:none; z-index:3; }
.compare-divider>span { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:white; color:#252722; font-size:22px; box-shadow:0 1px 8px #0003; }
.compare-range { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; z-index:4; touch-action:pan-y; }
.compare-stage:focus-within { outline:3px solid var(--accent); outline-offset:3px; }
.comparison figcaption { display:flex; justify-content:space-between; gap:12px; padding-top:12px; }
.compare-actions { display:flex; flex-wrap:wrap; gap:6px 14px; justify-content:flex-end; align-items:baseline; }
.compare-actions button { display:inline-block; width:auto; background:none; border:0; border-bottom:1px solid var(--line); color:var(--ink); padding:0; font-size:10px; }
.comparison-source .compare-overlay>img { object-position:center 76%; }
.compare-actions>span { color:var(--muted); font-size:9px; }
.comparison-detail { max-width:950px; margin-top:26px; }
.asset-download { display:inline-block; margin-top:18px; font-size:11px; font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.format-adaptation { margin-top:42px; padding-top:30px; border-top:1px solid var(--ink); }
.format-grid { display:grid; grid-template-columns:1.5fr .65fr; gap:30px; align-items:center; }
.format-grid img { object-fit:contain; }
.format-grid>figure:first-child img { aspect-ratio:16/9; }
.portrait-format img { aspect-ratio:4/5; }
.contact-links { padding:0; border:0; gap:10px 20px; font-size:11px; font-weight:600; }
.contact-links a { text-decoration:underline; text-underline-offset:3px; }
@media(max-width:650px) {
  .compare-label { top:10px; }
  .compare-label-before { left:10px; }
  .compare-label-after { right:10px; }
  .compare-divider>span { width:32px; height:32px; font-size:18px; }
  .comparison figcaption { flex-direction:column; gap:7px; }
  .compare-actions { justify-content:flex-start; }
  .format-grid { grid-template-columns:1fr; }
  .portrait-format { max-width:380px; }
}

/* Compact reproducible workflow documentation. */
.workflow-table { overflow-x:auto; margin:20px 0; }
.workflow-table table { width:100%; border-collapse:collapse; font-size:12px; line-height:1.6; }
.workflow-table th,.workflow-table td { text-align:left; vertical-align:top; border-bottom:1px solid var(--line); padding:12px; }
.workflow-table th { font-weight:700; }
.workflow-list { padding-left:22px; font-size:13px; line-height:1.8; }
.workflow-list li+li { margin-top:10px; }
.workflow-prompt { white-space:pre-wrap; overflow-wrap:anywhere; padding:20px; background:#181818; font-size:12px; line-height:1.7; }
#workflow details p { font-size:12px; line-height:1.8; }
#workflow code { overflow-wrap:anywhere; }