/* The project workbench keeps its cartridge controls and one live preview. */
#work .section-head { gap: clamp(28px, 5vw, 76px); margin-bottom: 40px; }
#work .section-intro { max-width: 38ch; color: #4c6157; }
#work .work-console {
  padding: 18px;
  border: 2px solid #243e34;
  background: #25463c;
  box-shadow: 7px 7px 0 #c2cbb6;
}
#work .work-console-bar {
  min-height: 44px;
  gap: 16px;
  padding: 0 5px 16px;
  color: #f3f0dd;
  font-size: 12px;
  letter-spacing: .035em;
}
#work .work-console-bar i { background: #deeda6; box-shadow: 2px 2px 0 #8b9e6b; }
#work #work-preview-counter {
  padding: 5px 9px;
  border: 1px solid #71836a;
  color: #e5efbc;
  font-size: 12px;
  letter-spacing: .05em;
}
#work .work-cartridges {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
#work .work-cartridge {
  min-height: 100px;
  grid-template-columns: 24px minmax(0, 1fr) 12px;
  gap: 12px;
  padding: 17px 16px;
  border: 1px solid #7c9480;
  background: #315448;
  color: #fff9e9;
  box-shadow: inset 0 -4px 0 #1d382e;
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease;
}
#work .cartridge-number { display: block; color: #cbd6bd; font-size: 12px; opacity: 1; }
#work .cartridge-name { font-size: 20px; line-height: 1.25; letter-spacing: -.35px; overflow-wrap: normal; }
#work .cartridge-name small { margin-top: 6px; color: #d5dfcb; font-size: 13px; line-height: 1.45; opacity: 1; }
#work .work-cartridge:hover { transform: translateY(-2px); background: #3c6353; border-color: #e3eeb4; }
#work .work-cartridge[aria-pressed="true"] {
  border-color: #f0e6bc;
  background: #e3ecc2;
  color: #233e30;
  box-shadow: inset 0 -4px 0 #b5c288, inset 4px 0 0 #a46e42;
}
#work .work-cartridge[aria-pressed="true"] .cartridge-number { color: #6e603a; }
#work .work-cartridge[aria-pressed="true"] .cartridge-name small { color: #455b39; }
#work .work-cartridge:active { transform: translateY(1px); }
#work .work-cartridge:focus-visible { outline: 3px solid #fff3cb; outline-offset: 3px; }
#work .work-browse {
  min-height: 48px;
  margin: 0 0 16px;
  padding: 0 4px;
  gap: 16px;
  color: #e2ead7;
  font-size: 11px;
  line-height: 1.7;
}
#work .work-browse > span { max-width: 42ch; }
#work .work-browse > div { gap: 8px; flex: none; }
#work .work-browse button {
  width: 48px;
  height: 48px;
  border: 1px solid #aab695;
  background: #f0eddc;
  color: #2b493a;
  box-shadow: 0 3px 0 #152f25;
  font-size: 24px;
}
#work .work-browse button:hover { background: #e2ecb9; }
#work .work-browse button:active { transform: translateY(2px); box-shadow: 0 1px 0 #152f25; }
#work .work-screen {
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  border: 1px solid #acb8a0;
  background: #f7f3e7;
}
#work .work-preview-art { min-height: 420px; background: #dfe7d8; border-right: 1px solid #c3ccb7; }
#work .work-preview-copy { padding: clamp(26px, 3vw, 42px); justify-content: center; }
#work .work-preview-kicker { color: #8d5736; font-size: 12px; line-height: 1.6; margin-bottom: 15px; }
#work #work-preview-title { font-size: clamp(34px, 3.8vw, 48px); line-height: 1.08; letter-spacing: -1.3px; margin-bottom: 20px; }
#work .work-preview-copy #work-preview-description { color: #455c51; font-size: 17px; line-height: 1.75; max-width: 45ch; }
#work #work-preview-tags { gap: 7px; margin: 22px 0 0; }
#work #work-preview-tags span { padding: 6px 9px; border-color: #c4cdb7; background: #eaf0df; color: #39513f; font-size: 12px; line-height: 1.6; }
#work .work-preview-copy .work-preview-actions { gap: 10px; margin-top: 26px; padding-top: 0; }
#work .work-preview-actions .button {
  min-height: 52px;
  padding: 13px 16px;
  gap: 16px;
  border-color: #2b4b39;
  background: #2b4b39;
  color: #fff7e7;
  box-shadow: 3px 3px 0 #c1c9b1;
  font-size: 15px;
  line-height: 1.5;
}
#work .work-preview-actions .button:hover { background: #3e6045; transform: translateY(-1px); }
#work .work-preview-actions .text-link { min-height: 46px; padding: 10px 0; color: #405b42; font-size: 14px; line-height: 1.6; }
#work #work-request-concept { min-height: 46px; }
#work #work-preview-note {
  left: 14px;
  bottom: 14px;
  max-width: calc(100% - 28px);
  padding: 7px 10px;
  border-color: #b1bba3;
  background: #fbf7ebf2;
  color: #41543e;
  font-size: 11px;
  line-height: 1.5;
}
#work .work-screen.is-apex #work-preview-note { top: 12px; bottom: auto; font-size: 10px; }
#work .work-apex-player { background: #e9ece2; }
#work .work-play { inset: 0 0 45px; gap: 0; padding: 18px; background: linear-gradient(transparent 25%, #173a2820); text-shadow: none; }
#work .work-play > span { width: 52px; height: 64px; border: 1px solid #dce5bc; border-right: 0; background: #284b3bf5; color: #f5eccd; }
#work .work-play b { padding: 11px 14px 11px 5px; background: #284b3bf5; border: 1px solid #dce5bc; border-left: 0; color: #fff8e7; font-size: 16px; line-height: 1.45; }
#work .work-play small { color: #e0e9d0; font-size: 11px; line-height: 1.5; }
#work .work-control-hint { margin: 18px 4px 0; gap: 12px; color: #e3ead8; font-size: 12px; line-height: 1.7; }
#work .work-control-hint > span { padding: 1px 5px; border: 1px solid #7d9276; color: #e0ebb0; font-size: 14px; }
#work .work-note { max-width: 100ch; gap: 12px; margin-top: 27px; color: #586a5b; font: 13px/1.8 var(--sans); }
#work .work-note img { flex: none; margin-top: 4px; }

/* Actual app captures expand naturally; their captions never sit beneath a crop. */
#work .work-screen:has(#work-tend-preview:not([hidden])) > .work-preview-art { min-height: 0; aspect-ratio: auto; }
#work #work-tend-preview.tend-gallery { position: relative; inset: auto; gap: 14px; padding: 26px; background: #e6ebdd; }
#work .tend-gallery-header { gap: 14px; }
#work .tend-gallery-header > span { color: #53654a; font-size: 10px; line-height: 1.6; }
#work .tend-screen-choices { gap: 8px; }
#work .tend-screen-choices button { min-height: 46px; border-color: #a8b69a; background: #f7f3e7; color: #3a523b; box-shadow: 0 2px 0 #c1cdb2; font-size: 14px; }
#work .tend-screen-choices button[aria-pressed="true"] { border-color: #345440; background: #345440; color: #fff8df; box-shadow: 0 2px 0 #1e3928; }
#work .work-preview-art .tend-screen-open img { height: 336px; border-color: #2b4436; border-radius: 17px; box-shadow: 5px 6px 0 #2b443624; }
#work .tend-screen-open { max-width: 100%; padding: 0 4px; }
#work .tend-screen-open > span { min-height: 34px; padding-top: 10px; color: #3d583f; font-size: 12px; }
#work .tend-screen-copy h4 { font-size: 23px !important; line-height: 1.2; letter-spacing: -.5px; margin-bottom: 8px; }
#work .tend-screen-copy > p { color: #495f46; font-size: 15px; line-height: 1.65; }
#work .tend-gallery .tend-capture-note { padding-top: 12px; border-top: 1px solid #c0cbb2; color: #5a6c50; font: 11px/1.6 var(--sans); }
#tend-screen-dialog { border: 2px solid #38513e; background: #f2efe2; box-shadow: 7px 7px 0 #172e2860; }
#tend-screen-dialog .tend-viewer-bar { padding: 16px 20px; background: #e6ebd9; border-color: #b6c2a6; }
#tend-screen-dialog .tend-viewer-bar h2 { font-size: 21px; letter-spacing: -.5px; }
#tend-screen-dialog .tend-viewer-bar p { color: #536649; font-size: 12px; line-height: 1.6; }
#tend-screen-dialog .tend-viewer-bar button { width: 48px; height: 48px; border-color: #91a17c; background: #faf5e8; color: #34513b; }
#tend-screen-dialog .tend-enlarged-image { padding: 22px; }

/* The proposed demo stays clearly labelled; the real 3D build keeps all controls. */
#work #work-sightline-preview { position: relative; inset: auto; min-height: 420px; padding: 28px; gap: 18px; background: #e0e8d8; }
#work .sightline-head { gap: 12px; color: #38533e; font-size: 11px; }
#work .sightline-head strong { padding: 5px 8px; background: #f1e2ba; color: #6b4f28; font-size: 10px; }
#work .sightline-summary { gap: 18px; color: #38533e; font-size: 11px; }
#work .sightline-summary > span:last-child { color: #495f43; font-size: 12px; }
#work .sightline-feature > p { color: #53674b; font-size: 12px; line-height: 1.65; }
#work.work-enhanced .work-grid { margin-top: 30px; }
#work.work-enhanced .seefood-project { padding: 28px; gap: 0 32px; border: 1px solid #acb9a0; background: #f7f3e7; box-shadow: 5px 5px 0 #d2d8c4; }
#work.work-enhanced .seefood-demo-label { margin-bottom: 20px; color: #5e704f; font-size: 12px; }
#work #seefood-stage { border-color: #b2bfaa; background: #dde6da; }
#work .picnic-open { min-height: 50px; max-width: calc(100% - 32px); border-color: #3b573e; background: #faf5e5; color: #2e4d35; font-size: 14px; line-height: 1.5; }
#work .picnic-open:hover { background: #e3edba; }
#work .picnic-controls { padding: 8px; gap: 8px; border-color: #b2bfaa; background: #e4ebda; }
#work.work-enhanced .picnic-controls button { min-height: 46px; padding: 8px 11px; border: 1px solid #b2c09e; background: #f9f5e8; color: #36533a; font-size: 13px; }
#work.work-enhanced .picnic-turn button,
#work.work-enhanced .picnic-zoom button { min-width: 46px; font-size: 23px; }
#work .picnic-controls button:hover { background: #dfebbd; }
#work .picnic-controls button[aria-pressed="true"] { border-color: #36533a; background: #36533a; color: #fff6db; }
#work .picnic-controls button:disabled { opacity: .55; }
#work .picnic-turn, #work .picnic-zoom { gap: 6px; }
#work .picnic-zoom { border-left: 0; padding-left: 0; }
#work .picnic-tools { gap: 8px; padding-top: 0; border-top: 0; }
#work .seefood-details .project-info { margin-bottom: 16px; padding-bottom: 18px; border-color: #c1cbb5; }
#work.work-enhanced .seefood-details h3 { color: #2b4935; font-size: 36px; line-height: 1.15; }
#work .seefood-details .project-info p { color: #5b6c52; font-size: 14px; line-height: 1.6; }
#work .seefood-details > .text-link { color: #36523a; font-size: 15px; margin-bottom: 20px; }
#work .picnic-caption p { color: #34503a; font-size: 19px; line-height: 1.45; }
#work .picnic-caption > span { color: #85643d; font-size: 12px; }
#work.work-enhanced .picnic-status { color: #4e644b; font-size: 16px; line-height: 1.75; margin-bottom: 18px; }
#work .picnic-files { gap: 10px; }
#work.work-enhanced .picnic-files > a { min-height: 48px; padding: 10px 12px; gap: 12px; border: 1px solid #b0bea1; background: #edf1df; color: #3a543b; font-size: 13px; }
#work .picnic-files span { color: #65734f; font-size: 11px; }
#work .picnic-files > a:hover { background: #e0ebbf; }
#work .picnic-ar { background: #2b4b39; color: #fff6e2; border-color: #2b4b39; font-size: 13px; }
#work button:focus-visible, #work a:focus-visible, #tend-screen-dialog button:focus-visible { outline: 3px solid #a26a3f; outline-offset: 4px; }
#work .work-console .work-cartridge:focus-visible,
#work .work-console .work-browse button:focus-visible { outline-color: #fff1c1; }

@media (max-width: 1100px) {
  #work .work-cartridge { grid-template-columns: minmax(0, 1fr) 10px; gap: 8px; padding: 16px 14px; }
  #work .cartridge-number { display: none; }
  #work .cartridge-name { font-size: 19px; }
  #work .work-preview-copy { padding: 28px; }
  #work.work-enhanced .seefood-project { gap: 0 24px; padding: 24px; }
  #work .picnic-tools { flex-basis: 100%; }
}
@media (max-width: 900px) {
  #work .work-screen { grid-template-columns: 1fr; }
  #work .work-preview-art { min-height: 0; aspect-ratio: 16 / 10; border-right: 0; border-bottom: 1px solid #c3ccb7; }
  #work .work-preview-copy { padding: 28px; }
  #work .work-preview-copy #work-preview-description { max-width: 65ch; }
  #work .work-preview-actions .button { width: auto; max-width: 100%; min-width: 260px; }
  #work #work-tend-preview.tend-gallery { padding: 26px; }
  #work .work-preview-art .tend-screen-open img { height: 360px; }
  #work .tend-screen-copy, #work .tend-capture-note { width: min(100%, 54ch); align-self: center; }
  #work .work-preview-art:has(#work-sightline-preview:not([hidden])) { min-height: 0; aspect-ratio: auto; }
  #work #work-sightline-preview { min-height: 390px; }
}
@media (max-width: 800px) {
  #work .work-cartridges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #work.work-enhanced .seefood-project { grid-template-columns: 1fr; }
  #work.work-enhanced .seefood-details { margin-top: 26px; }
}
@media (max-width: 600px) {
  #work .section-head { gap: 24px; margin-bottom: 30px; }
  #work .work-console { padding: 10px; box-shadow: 4px 4px 0 #c2cbb6; }
  #work .work-console-bar { padding: 3px 3px 14px; gap: 10px; font-size: 10px; letter-spacing: 0; }
  #work .work-console-bar > span:first-child { gap: 8px; }
  #work #work-preview-counter { padding: 4px 6px; font-size: 10px; }
  #work .work-cartridges { gap: 8px; margin-bottom: 14px; }
  #work .work-cartridge { min-height: 102px; padding: 14px 11px; gap: 7px; }
  #work .cartridge-name { font-size: 17px; line-height: 1.3; letter-spacing: -.2px; }
  #work .cartridge-name small { margin-top: 5px; font-size: 12px; line-height: 1.45; }
  #work .cartridge-cursor { font-size: 10px; }
  #work .work-browse { margin-bottom: 14px; padding: 0 2px; gap: 10px; font-size: 10px; line-height: 1.65; }
  #work .work-browse > div { gap: 6px; }
  #work .work-browse button { width: 44px; height: 46px; font-size: 23px; }
  #work .work-preview-art { aspect-ratio: 4 / 3; }
  #work .work-preview-copy { padding: 24px 20px; }
  #work #work-preview-title { font-size: 34px; letter-spacing: -1px; margin-bottom: 17px; }
  #work .work-preview-kicker { margin-bottom: 12px; font-size: 11px; }
  #work .work-preview-copy #work-preview-description { font-size: 16px; line-height: 1.75; }
  #work #work-preview-tags { margin-top: 19px; gap: 6px; }
  #work #work-preview-tags span { padding: 5px 7px; font-size: 11px; }
  #work .work-preview-copy .work-preview-actions { margin-top: 23px; gap: 9px; }
  #work .work-preview-actions .button { width: 100%; min-width: 0; padding: 13px 14px; font-size: 14px; }
  #work .work-preview-actions .text-link { font-size: 14px; }
  #work .work-play { padding: 10px; }
  #work .work-play > span { width: 38px; height: 64px; font-size: 16px; flex: none; }
  #work .work-play b { padding: 10px 10px 10px 4px; font-size: 14px; line-height: 1.45; }
  #work .work-play small { max-width: 160px; font-size: 10px; line-height: 1.6; }
  #work .work-screen.is-apex #work-preview-note { top: 10px; left: 10px; max-width: calc(100% - 20px); font-size: 9px; }
  #work .work-control-hint { align-items: flex-start; margin: 16px 2px 1px; gap: 10px; font-size: 11px; }
  #work .work-control-hint > span { margin-top: 2px; font-size: 12px; }
  #work #work-tend-preview.tend-gallery { gap: 13px; padding: 20px 16px; }
  #work .tend-gallery-header { gap: 8px; }
  #work .tend-gallery-header > span { font-size: 9px; line-height: 1.6; }
  #work .tend-gallery-header .tend-brand > span { font-size: 29px; }
  #work .tend-gallery-header .tend-brand img { width: 36px; height: 36px; }
  #work .tend-screen-choices { gap: 6px; }
  #work .tend-screen-choices button { font-size: 13px; }
  #work .work-preview-art .tend-screen-open img { height: 320px; }
  #work .tend-screen-copy h4 { font-size: 22px !important; }
  #work .tend-screen-copy > p { font-size: 14px; }
  #work .tend-gallery .tend-capture-note { font-size: 11px; }
  #work #work-sightline-preview { min-height: 360px; padding: 20px 15px; gap: 16px; }
  #work .sightline-head { font-size: 10px; gap: 8px; }
  #work .sightline-head strong { padding: 4px 6px; font-size: 9px; }
  #work .sightline-summary { gap: 12px; font-size: 10px; }
  #work .sightline-summary > span:last-child { font-size: 11px; }
  #work.work-enhanced .seefood-project { padding: 18px; box-shadow: 4px 4px 0 #d2d8c4; }
  #work.work-enhanced .seefood-demo-label { font-size: 11px; gap: 10px; margin-bottom: 17px; }
  #work.work-enhanced .seefood-details h3 { font-size: 32px; }
  #work .picnic-open { left: 10px; bottom: 10px; max-width: calc(100% - 20px); gap: 8px; padding: 11px; font-size: 12px; }
  #work .picnic-controls { padding: 7px; gap: 7px; }
  #work.work-enhanced .picnic-controls button { min-height: 46px; padding: 8px 10px; font-size: 12px; }
  #work.work-enhanced .picnic-turn button, #work.work-enhanced .picnic-zoom button { min-width: 44px; padding-inline: 8px; font-size: 22px; }
  #work .picnic-turn, #work .picnic-zoom { gap: 5px; }
  #work .picnic-tools { justify-content: space-between; gap: 7px; }
  #work .seefood-details > .text-link { margin-bottom: 18px; font-size: 14px; }
  #work.work-enhanced .picnic-status { font-size: 15px; }
  #work .picnic-files { flex-direction: column; gap: 8px; }
  #work.work-enhanced .picnic-files > a { justify-content: space-between; padding: 10px 12px; font-size: 13px; }
  #work .work-note { margin-top: 24px; font-size: 12px; gap: 10px; }
  #tend-screen-dialog .tend-viewer-bar { padding: 13px; gap: 12px; }
  #tend-screen-dialog .tend-viewer-bar h2 { font-size: 19px; }
  #tend-screen-dialog .tend-viewer-bar p { font-size: 11px; }
  #tend-screen-dialog .tend-enlarged-image { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  #work .work-cartridge, #work .work-browse button, #work .work-preview-actions .button { transition: none; transform: none; }
}