/* Approved Darkside proportions, spacing, states and motion. */
:root {
  --ds-space-1:4px; --ds-space-2:8px; --ds-space-3:12px; --ds-space-4:16px;
  --ds-space-5:24px; --ds-space-6:32px; --ds-space-7:40px; --ds-space-8:48px;
  --ds-space-9:64px; --ds-space-10:96px;
  --ds-motion-fast:110ms; --ds-motion-base:150ms; --ds-motion-panel:240ms;
  --ds-ease:cubic-bezier(.2,0,.38,.9);
  --control-height:40px; --control-icon:20px; --control-padding:12px;
  --ds-control-gap:8px; --ds-content-width:1000px; --ds-gutter:32px;
}

/* One size and state contract for shared page controls. */
html[data-ui-system=on] body :is(.ds-control,.masthead .ui-button,.recap-download,.case-contents>summary,.back-top,.lb-controls button,.video-start) {
  height:var(--control-height);min-height:var(--control-height);width:auto;min-width:0;
  padding:0 var(--control-padding);gap:var(--ds-control-gap);border-radius:0;
  align-items:center;justify-content:center;font:13px/1.2 var(--mono);text-decoration:none;
  transition:background-color var(--ds-motion-base) var(--ds-ease),color var(--ds-motion-fast) linear,
    border-color var(--ds-motion-fast) linear,box-shadow var(--ds-motion-fast) linear;
}
html[data-ui-system=on] .ds-control {
  display:inline-flex;flex-shrink:0;border:1px solid transparent;background:var(--surface);color:var(--text);
}
html[data-ui-system=on] :is(.ds-control,.ui-button,.case-contents>summary,.lb-controls button,.video-start) .pixel-icon {
  width:var(--control-icon);height:var(--control-icon);flex:0 0 var(--control-icon);
}
html[data-ui-system=on] body :is(.ds-control--icon,.lb-controls button) {width:var(--control-height);padding:0}
html[data-ui-system=on] body :is(.ds-control--text,.masthead .theme.ui-button) {background:transparent;border-color:transparent}
html[data-ui-system=on] body :is(.ds-control--primary,.case-overview .ui-cut) {
  background:var(--text);color:var(--canvas);border-color:transparent;
  clip-path:polygon(4px 0,calc(100% - 4px) 0,calc(100% - 4px) 2px,100% 2px,100% calc(100% - 4px),calc(100% - 2px) calc(100% - 4px),calc(100% - 2px) 100%,4px 100%,4px calc(100% - 2px),0 calc(100% - 2px),0 4px,2px 4px,2px 0);
}
html[data-ui-system=on] .ds-control .pixel-icon {color:inherit}
@media (hover:hover) {
  html[data-ui-system=on] body :is(.ds-control,.masthead .ui-button,.recap-download,.lb-controls button,.video-start):not(:disabled,[aria-disabled=true],[aria-busy=true]):hover {background:var(--text);color:var(--canvas)}
  html[data-ui-system=on] body :is(.ds-control--primary,.case-overview .ui-cut):hover {background:var(--accent);color:var(--canvas)}
  html[data-theme=dark][data-ui-system=on] body :is(.ds-control--primary,.case-overview .ui-cut):hover {color:var(--ink)}
  html[data-ui-system=on] body :is(.ds-control--text,.masthead .theme.ui-button):hover {background:transparent;color:var(--accent)}
}
html[data-ui-system=on] body :is(.ds-control,.masthead .ui-button,.recap-download,.lb-controls button,.video-start):not(:disabled,[aria-disabled=true],[aria-busy=true]):active,
html[data-ui-system=on] .ds-control:is([data-state=hover],[data-state=pressed],[aria-pressed=true]) {background:var(--text);color:var(--canvas)}
html[data-ui-system=on] .ds-control:is([data-state=pressed],:active) {box-shadow:inset 0 -3px var(--accent)}
html[data-ui-system=on] body :is(.ds-control,.ds-chapter,.ds-disclosure>summary):is(:focus-visible,[data-state=focus]) {
  outline:none;background:var(--canvas);color:var(--text);box-shadow:inset 0 -3px var(--accent);
}
html[data-ui-system=on] .ds-control:is(:disabled,[aria-disabled=true],[data-state=disabled]) {opacity:.45;cursor:not-allowed}
html[data-ui-system=on] .ds-control:is([aria-busy=true],[data-state=loading]) {cursor:progress;opacity:.8}
html[data-ui-system=on] .ds-control:is([data-state=success],[data-state=error]) {border-color:var(--accent)}

/* Connected chapter links retain one current state, including when hovered. */
html[data-ui-system=on] body :is(.ds-chapter,.case-overview .case-jumps a) {
  display:flex;align-items:center;justify-content:center;gap:var(--ds-control-gap);
  min-height:var(--control-height);height:auto;padding:var(--ds-space-2) var(--control-padding);
  background:var(--canvas);color:var(--text);font:13px/1.2 var(--mono);text-decoration:none;border-radius:0;
  transition:background-color var(--ds-motion-base) var(--ds-ease),color var(--ds-motion-fast) linear;
}
html[data-ui-system=on] body :is(.ds-chapter,.case-overview .case-jumps a):hover {background:var(--surface);color:var(--text)}
html[data-ui-system=on] body :is(.ds-chapter,.case-overview .case-jumps a):is([aria-current=location],[aria-pressed=true]) {background:var(--text);color:var(--canvas)}
html[data-ui-system=on] body :is(.ds-chapter,.case-overview .case-jumps a):focus-visible {background:var(--canvas);color:var(--text);box-shadow:inset 0 -3px var(--accent)}
html[data-ui-system=on] .case-overview .case-jumps {margin-top:0}

/* Shared keylines and spacing. Artwork keeps its existing dimensions and crop. */
html[data-ui-system=on] .shell {padding-inline:var(--ds-gutter)}
html[data-ui-system=on] .masthead {gap:var(--ds-space-5);padding-block:var(--ds-space-5)}
html[data-ui-system=on] .masthead #main-nav {gap:var(--ds-space-5)}
html[data-ui-system=on] main>:is(.case-overview,.hero-media,.chapter,.source-links,.image-index) {max-width:var(--ds-content-width);margin-inline:auto}
html[data-ui-system=on] .case-overview {padding-top:var(--ds-space-6);margin-bottom:var(--ds-space-6)}
html[data-ui-system=on] .case-overview .eyebrow {margin-bottom:var(--ds-space-5)}
html[data-ui-system=on] .recap-layout {grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--ds-space-8);padding-bottom:var(--ds-space-6)}
html[data-ui-system=on] .case-overview h1 {margin-bottom:var(--ds-space-4)}
html[data-ui-system=on] .case-overview .recap-approach {margin-top:var(--ds-space-5)}
html[data-ui-system=on] .case-overview .recap-idea-label {margin-bottom:var(--ds-space-2)}
html[data-ui-system=on] .recap-details {padding:0 0 0 var(--ds-space-5)}
html[data-ui-system=on] .case-overview .case-facts {gap:var(--ds-space-4)}
html[data-ui-system=on] .case-overview .case-facts>div {grid-template-columns:80px minmax(0,1fr);gap:var(--ds-space-4)}
html[data-ui-system=on] .case-overview .recap-download {margin-top:var(--ds-space-5)}
html[data-ui-system=on] .hero-media {margin-bottom:var(--ds-space-8)}
html[data-ui-system=on] .chapter {padding-block:var(--ds-space-8) var(--ds-space-6)}
html[data-ui-system=on] .chapter-header {grid-template-columns:40px minmax(0,1fr) minmax(0,1fr);gap:var(--ds-space-5);margin-bottom:var(--ds-space-6)}
html[data-ui-system=on] .chapter-index {padding-top:var(--ds-space-2)}
html[data-ui-system=on] .sequence {gap:var(--ds-space-6)}
html[data-ui-system=on] .image-row {gap:var(--ds-space-4);margin-bottom:var(--ds-space-5)}
html[data-ui-system=on] .preserved-gallery-row {gap:var(--ds-space-4);margin-bottom:var(--ds-space-4)}
html[data-ui-system=on] .caption {gap:var(--ds-space-4);padding-top:var(--ds-space-3)}
html[data-ui-system=on] .section-tail {gap:var(--ds-space-5);padding-top:var(--ds-space-6)}
html[data-ui-system=on] .metrics {margin-block:var(--ds-space-8) var(--ds-space-4)}
html[data-ui-system=on] .metric {padding:var(--ds-space-5)}
html[data-ui-system=on] .metric-note {margin-block:var(--ds-space-4) var(--ds-space-6)}
html[data-ui-system=on] .source-links {gap:var(--ds-space-8);padding-block:var(--ds-space-8)}
html[data-ui-system=on] .source-links a {gap:var(--ds-space-5);padding-block:var(--ds-space-4);min-height:48px}
html[data-ui-system=on] .image-index {margin-block:var(--ds-space-6) var(--ds-space-8);padding-top:var(--ds-space-3)}
html[data-ui-system=on] .index-grid {gap:var(--ds-space-4);padding-block:var(--ds-space-4) var(--ds-space-5)}
html[data-ui-system=on] .site-footer {gap:var(--ds-space-6);padding-block:var(--ds-space-5) var(--ds-space-10)}

/* Shared disclosure, field and dialog mechanics. */
html[data-ui-system=on] :is(.ds-disclosure>summary,.image-index>summary) {
  display:flex;align-items:center;justify-content:space-between;gap:var(--ds-space-4);
  min-height:48px;padding-block:var(--ds-space-3);list-style:none;cursor:pointer;
  transition:background-color var(--ds-motion-base) var(--ds-ease),color var(--ds-motion-fast) linear;
}
.ds-disclosure>summary::-webkit-details-marker {display:none}
html[data-ui-system=on] :is(.ds-disclosure,.image-index)>summary:hover {background:var(--surface)}
html[data-ui-system=on] .masthead .case-contents>nav {top:calc(100% + 8px);padding:var(--ds-space-2) var(--ds-space-3);max-width:calc(100vw - 32px)}
html[data-ui-system=on] .masthead .case-contents>nav>a {min-height:48px;padding:var(--ds-space-2) var(--ds-space-1)}
html[data-ui-system=on] .ds-field {display:grid;gap:var(--ds-space-2);font:13px/1.5 var(--mono)}
html[data-ui-system=on] .ds-field :is(input,textarea,select) {width:100%;min-height:48px;padding:var(--ds-space-3);border:1px solid var(--line);border-radius:0;background:var(--surface);color:var(--text);font:16px/1.5 var(--mono)}
html[data-ui-system=on] .ds-field [aria-invalid=true] {border-color:var(--accent);border-bottom-width:3px}
html[data-ui-system=on] .ds-dialog {width:560px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);padding:var(--ds-space-6);overflow:auto}
html[data-ui-system=on] .lb-toolbar {padding:var(--ds-space-3) var(--ds-space-5);gap:var(--ds-space-4)}
html[data-ui-system=on] .lb-controls {gap:var(--ds-space-2)}
html[data-ui-system=on] .lb-image {padding-inline:var(--ds-space-5)}
html[data-ui-system=on] .lb-caption {padding:var(--ds-space-4) var(--ds-space-5)}
html[data-ui-system=on] .art::after {transition:opacity var(--ds-motion-fast) linear}

/* The custom cursor supplies hover inversion, avoiding a second inversion underneath. */
@media (hover:hover) and (pointer:fine) {
  html[data-ui-system=on].has-art-cursor body :is(.ds-control,.masthead .ui-button,.recap-download,.case-contents>summary,.back-top):not(:disabled,[aria-disabled=true],[aria-busy=true]):hover {background:var(--surface);color:var(--text)}
  html[data-ui-system=on].has-art-cursor body :is(.ds-control--text,.masthead .theme.ui-button):hover {background:transparent;color:var(--text)}
  html[data-ui-system=on].has-art-cursor body .ui-button:hover .pixel-icon {color:inherit}
}
@media (min-width:1251px) {:root {--ds-gutter:48px}}
@media (max-width:900px) {
  :root {--ds-gutter:24px}
  html[data-ui-system=on] .recap-layout {grid-template-columns:1fr;gap:var(--ds-space-5)}
  html[data-ui-system=on] .recap-details {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--ds-space-5);padding:var(--ds-space-5) 0 0;border-left:0;border-top:1px solid var(--line)}
  html[data-ui-system=on] .case-overview .recap-download {margin-top:0}
  html[data-ui-system=on] .chapter-header {grid-template-columns:32px minmax(0,1fr);gap:var(--ds-space-4)}
  html[data-ui-system=on] .chapter-header>p {grid-column:2}
}
@media (max-width:600px) {
  :root {--ds-gutter:16px}
  html[data-ui-system=on] .masthead {gap:var(--ds-space-3);padding-block:var(--ds-space-4)}
  html[data-ui-system=on] .masthead #main-nav {gap:var(--ds-space-4)}
  html[data-ui-system=on] .case-overview {padding-top:var(--ds-space-5);margin-bottom:var(--ds-space-5)}
  html[data-ui-system=on] .case-overview .eyebrow {margin-bottom:var(--ds-space-4)}
  html[data-ui-system=on] .recap-layout {padding-bottom:var(--ds-space-5)}
  html[data-ui-system=on] .recap-details {display:block}
  html[data-ui-system=on] .case-overview .recap-download {margin-top:var(--ds-space-5)}
  html[data-ui-system=on] .hero-media {margin-bottom:var(--ds-space-6)}
  html[data-ui-system=on] .chapter {padding-block:var(--ds-space-6)}
  html[data-ui-system=on] .chapter-header {grid-template-columns:24px minmax(0,1fr);gap:var(--ds-space-3);margin-bottom:var(--ds-space-5)}
  html[data-ui-system=on] .sequence {gap:var(--ds-space-5)}
  html[data-ui-system=on] .preserved-gallery-row>.grid__item-container {margin-bottom:var(--ds-space-4)}
  html[data-ui-system=on] .source-links {gap:var(--ds-space-5);padding-block:var(--ds-space-6)}
  html[data-ui-system=on] .ds-dialog {padding:var(--ds-space-5)}
  html[data-ui-system=on] .lb-toolbar {padding:var(--ds-space-2);gap:var(--ds-space-2)}
  html[data-ui-system=on] .lb-image {padding:0}
  html[data-ui-system=on] .lb-caption {padding:var(--ds-space-3)}
}
@media (max-width:420px) {
  html[data-ui-system=on] .masthead {gap:var(--ds-space-2)}
  html[data-ui-system=on] body .masthead .nav-menu.ui-button {width:var(--control-height);min-width:var(--control-height);padding:0}
  html[data-ui-system=on] body .case-contents>summary {padding-inline:var(--ds-space-2);gap:var(--ds-space-2);font-size:11px}
}
@media (pointer:coarse) {
  html[data-ui-system=on] {--control-height:48px}
  html[data-ui-system=on] .masthead #main-nav>a {display:inline-flex;align-items:center;min-height:48px}
}
@media (prefers-reduced-motion:reduce) {
  :root {--ds-motion-fast:0ms;--ds-motion-base:0ms;--ds-motion-panel:0ms}
  html[data-ui-system=on] {scroll-behavior:auto}
}
@media (forced-colors:active) {
  html[data-ui-system=on] :is(.ds-control,.ds-chapter,.ds-disclosure>summary):is(:focus-visible,[data-state=focus]) {outline:2px solid Highlight!important;outline-offset:2px;box-shadow:none}
  html[data-ui-system=on] body :is(.ds-chapter,.case-overview .case-jumps a):is([aria-current=location],[aria-pressed=true]) {background:Highlight;color:HighlightText}
  html[data-ui-system=on] .ds-control {border-color:ButtonText}
}