/* Drawing-board chapter only: paper exhibits on a quiet, dark editorial spread. */
#workflow { background:#20201d; color:#f1ece2; --board-line:rgba(220,205,185,.20); }
#workflow .section-head { align-items:end;gap:24px;margin-bottom:14px; }
#workflow .section-head h2 { font-size:26px;line-height:1.25;margin:0; }
#workflow .section-kicker { color:#d07a2b; letter-spacing:.14em; }
#workflow .proof-intro { max-width:360px; color:#aaa398; font-size:var(--text-secondary); line-height:1.9; padding-bottom:6px; }
#workflow .cmp-carousel { padding:0; border:0; max-width:960px;width:100%;margin-inline:auto;display:grid;grid-row:1 / span 4;grid-template-rows:subgrid; }
#workflow .cmp-head { align-items:center; gap:16px; padding:16px 0; margin:0; border-top:1px solid var(--board-line); font-size:var(--text-small); letter-spacing:.08em; }
#workflow .cmp-label { color:#d07a2b; }
#workflow .cmp-label span { color:#aaa398; margin-left:10px; }
#workflow .cmp-zoom { color:#aaa398; letter-spacing:0; }
#workflow .cmp-viewport { background:#f1ece2; border:1px solid rgba(220,205,185,.4); border-radius:0; touch-action:pan-y; }
#workflow .cmp-slide img { width:100%; height:auto; aspect-ratio:1672/941; object-fit:contain; border-radius:0; }
#workflow .cmp-caption { display:flex; justify-content:space-between; align-items:start; gap:24px; padding:22px 0; border-bottom:1px solid var(--board-line); }
#workflow .cmp-caption>div { display:flex; align-items:baseline; gap:24px; }
#workflow .cmp-number { color:#d07a2b; font:var(--text-decorative) var(--mono); white-space:nowrap; }
#workflow .cmp-description { margin:0; font-size:var(--text-secondary); color:#f1ece2; }
#workflow .cmp-note { color:#aaa398; font-size:var(--text-small); white-space:nowrap; }
#workflow .cmp-controls { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; padding-top:20px; }
#workflow .cmp-controls .cmp-autoplay { min-height:44px; }
#workflow .cmp-autoplay { justify-self:start; }
#workflow .cmp-nav { position:absolute; z-index:2; top:50%; transform:translateY(-50%); width:48px; height:48px; border:0; border-radius:0; background:transparent; color:#8c421a; box-shadow:none; font-size:22px; cursor:pointer; }
#workflow .cmp-prev { left:12px; }
#workflow .cmp-next { right:12px; }
#workflow .cmp-nav:hover { background:transparent;color:#5b2c12;outline:1px solid currentColor;outline-offset:-6px; }
#workflow .cmp-dots { padding:0; gap:28px; }
#workflow .cmp-dot { width:auto; height:48px; padding:0 4px; border:0; border-bottom:2px solid transparent; background:transparent; color:#aaa398; font:var(--text-secondary) var(--mono); cursor:pointer; }
#workflow .cmp-dot span { margin-left:10px; font-family:var(--body); }
#workflow .cmp-dot.active { color:#f1ece2; border-bottom-color:#d07a2b; }
#workflow :focus-visible { outline:2px solid #d07a2b; outline-offset:4px; }
#workflow .cmp-slide img:focus-visible { outline-offset:-4px; }
#workflow .proof-merged { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(320px,1fr); grid-template-rows:auto auto auto auto;gap:0 32px;align-items:start; }
#workflow .b-tech { min-width:0;grid-column:1;grid-row:1 / span 4;display:grid;grid-template-rows:subgrid; }
#workflow .workflow-summary { margin:0 0 16px; font-size:var(--text-secondary); line-height:1.7; color:rgba(245,240,232,.82); }
#workflow .b-work { margin:0;padding:0;height:auto;border:0;grid-column:2;grid-row:1 / span 2;display:grid;grid-template-rows:subgrid; }
#workflow .b-head { display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;padding:16px 0;min-height:56px;border-top:1px solid var(--board-line); }
#workflow .b-head h3 { margin-top:8px; }
#workflow .b-head h3 { margin:0; font-size:20px; }
#workflow .steps { display:grid; grid-template-columns:minmax(0,1fr);gap:0;margin-top:0;align-self:center; }
#workflow .steps li { border-color:var(--board-line); padding:12px 0;gap:12px;grid-template-columns:40px minmax(0,1fr);align-items:start; }
#workflow .steps b { font:30px var(--serif); color:#d07a2b; }
#workflow .steps span { font-size:var(--text-body); }
#workflow .steps small { font-size:var(--text-secondary); color:#aaa398; margin-top:6px; }
@media(max-width:1100px) {
 #workflow .proof-merged { display:block; }
 #workflow .b-tech,#workflow .cmp-carousel,#workflow .b-work { display:block;grid-row:auto;grid-column:auto; }
 #workflow .b-work { margin-top:20px; }
 #workflow .steps { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media(max-width:767px) {
 #workflow .section-head { display:block; margin-bottom:16px; }
 #workflow .proof-intro { margin-top:24px; font-size:var(--text-secondary); }
 #workflow .cmp-head { align-items:start; font-size:var(--text-small); }
 #workflow .cmp-label span { display:block; margin:6px 0 0; }
 #workflow .cmp-zoom { font-size:var(--text-small); }
 #workflow .cmp-caption { flex-direction:column; gap:10px; padding:18px 0; }
 #workflow .cmp-caption>div { align-items:start; gap:14px; }
 #workflow .cmp-description { font-size:var(--text-secondary); }
 #workflow .cmp-note { padding-left:0; }
 #workflow .cmp-controls { display:flex; justify-content:center; gap:12px; }
 #workflow .cmp-nav { width:44px; height:44px; }
 #workflow .cmp-prev { left:6px; }
 #workflow .cmp-next { right:6px; }
 #workflow .cmp-dots { gap:14px; }
 #workflow .cmp-dot span { display:none; }
 #workflow .cmp-dot { min-width:36px; }
 #workflow .b-work { margin-top:0;padding:0; }
 #workflow .b-head { display:block; }
 #workflow .b-head h3 { margin-top:8px; font-size:20px; }
 #workflow .steps { grid-template-columns:1fr 1fr; gap:12px 16px; }
 #workflow .steps li { gap:12px; }
 #workflow .steps b { font-size:25px; }
 #workflow .steps span { font-size:var(--text-secondary); }
}
@media(prefers-reduced-motion:reduce) { #workflow .cmp-track { transition:none; } }

/* Product explanations are reading copy, not decorative captions. */
#workflow .proof-intro { font-size:var(--text-subtitle); line-height:1.65; color:rgba(245,240,232,.82); }
#workflow .steps span { font-size:var(--text-workflow); line-height:1.4; }
#workflow .cmp-dot { font-size:var(--text-secondary); }
#workflow .cmp-head { flex-wrap:wrap; }

/* Zoomed desktop layouts stack by their actual available width, not device width. */
#workflow > .container { container-type:inline-size; }
@media(min-width:768px){
 @container(max-width:1000px){
  #workflow .proof-merged { display:block; }
  #workflow .b-tech,#workflow .cmp-carousel,#workflow .b-work { display:block;grid-row:auto;grid-column:auto; }
  #workflow .b-work { margin-top:20px; }
  #workflow .steps { grid-template-columns:repeat(4,minmax(0,1fr)); }
 }
}