:root {
  --display-font: system-ui, sans-serif;
  --display-secondary: #505050;
  --display-dark: #252525;
  --display-inverse: #ffffff;
  --display-inverse-muted: #bdbdbd;
  --display-border: #d2d2d2;
  --display-touch: #386a98;
  --display-touch-overlay: #8ec8ff;
}
.displays-page main { font-family: var(--display-font); }
.displays-page .site-header { font-size: var(--text-label); }
.display-hero { padding: 44px 0 48px; }
.display-title { margin-top: 32px; }
.display-title .rail { padding-top: 10px; }
.display-title h1 { font-size: var(--text-display); line-height: 70px; letter-spacing: -.045em; }
.display-summary { padding-bottom: 48px; }
.display-summary p { max-width: 720px; font-size: var(--text-body); line-height: 29px; color: var(--display-secondary); }
.display-meta { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; margin-top: 32px; font-size: var(--text-label); line-height: 23px; }
.display-meta dt { color: var(--muted); margin-bottom: 6px; }
.display-collage { display: grid; grid-template-columns: 714fr 370fr; align-items: start; gap: 12px; padding: 12px; background: var(--display-dark); }
.display-collage img { width: 100%; aspect-ratio: 16 / 9; border-radius: 0; object-fit: contain; }
.display-collage-side { display: grid; gap: 12px; }
.display-caption { display: flex; justify-content: space-between; gap: 12px 24px; font-size: var(--text-label); line-height: 22px; margin-top: 14px; color: var(--muted); }
.display-index { display: flex; flex-wrap: wrap; gap: 12px 36px; padding: 21px 0; border-bottom: 1px solid var(--line); font-size: var(--text-label); line-height: 22px; }
.display-index a { padding: 5px 0; text-decoration: none; color: var(--muted); }
.display-index a:hover { text-decoration: underline; }
.display-prose { max-width: 720px; min-width: 0; }
.displays-page h2, .displays-page h3 { font-size: var(--text-heading); line-height: 40px; letter-spacing: -.035em; }
.display-prose h2, .display-prose h3 { margin-bottom: 22px; }
.display-prose p { font-size: var(--text-body); line-height: 30px; color: var(--display-secondary); }
.display-chapter { padding: 48px 0 64px; border-top: 1px solid var(--line); }
.display-chapter--tour { padding-top: 32px; border-top: 0; }
.display-media { margin-top: 32px; }
.display-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; }
.display-loop { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: var(--display-dark); border-radius: var(--image-radius); }
.display-loop-toggle { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 0; margin-top: 4px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: var(--text-label); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.display-loop-toggle[hidden] { display: none; }
.display-loop-toggle:hover { color: var(--display-secondary); }
.display-loop-toggle:focus-visible { outline: 2px solid var(--display-touch); outline-offset: 4px; }
.display-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 32px 24px; }
.displays-page .display-media-title { display: block; margin-bottom: 10px; font-size: var(--text-body); line-height: 26px; font-weight: 400; color: var(--ink); }
.display-grid .display-caption { display: block; }
.display-caption span { display: block; }
.display-scale { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 64px; padding: 36px 40px; margin-top: 32px; background: var(--display-dark); color: var(--display-inverse); }
.display-scale h3 { font-size: var(--text-body); line-height: 28px; letter-spacing: 0; }
.display-scale .display-count { font-size: var(--text-heading); line-height: 1.17; letter-spacing: -.04em; margin: 16px 0; }
.display-scale .display-config { font-size: var(--text-label); line-height: 22px; color: var(--display-inverse-muted); }
.display-map { margin-top: 32px; min-width: 0; }
.display-map-header { display: flex; justify-content: space-between; gap: 12px 24px; align-items: baseline; margin-bottom: 12px; font-size: var(--text-label); line-height: 22px; }
.display-map-header h3 { font-size: var(--text-label); line-height: 22px; letter-spacing: 0; }
.display-map-header a { color: var(--muted); }
.connection-scroll { overflow-x: auto; overscroll-behavior-x: contain; border-radius: var(--image-radius); background: var(--surface); }
.connection-scroll img { width: 100%; min-width: 1120px; max-width: none; border-radius: 0; }
.display-scroll-hint { display: none; }
.display-map figcaption { font-size: var(--text-label); line-height: 22px; }
.display-closeup { margin-top: 64px; }
.display-sequence { margin-top: 24px; background: var(--surface); padding: 32px; }
.display-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr) 49px) minmax(0,1fr); gap: 0; list-style: none; padding: 0; margin: 0; align-items: center; }
.display-step { border: 1px solid var(--display-border); background: var(--paper); padding: 14px; min-height: 108px; display: flex; flex-direction: column; justify-content: center; gap: 8px; font-size: var(--text-body); line-height: 24px; }
.display-step small { font-size: var(--text-label); line-height: 20px; color: var(--muted); }
.display-event { text-align: center; font-size: var(--text-label); line-height: 18px; color: var(--display-secondary); }
.display-event::after { content: '→'; display: block; margin-top: 8px; font-size: var(--text-body); line-height: 24px; color: var(--ink); }
.display-return { position: relative; width: 42%; margin: 24px 8.1% 0 auto; padding-top: 40px; text-align: center; font-size: var(--text-label); line-height: 22px; color: var(--display-secondary); }
.display-return::before { content: ''; position: absolute; inset: 0 0 auto; height: 32px; border: 2px solid var(--display-touch); border-top: 0; }
.display-return::after { content: ''; position: absolute; top: 0; left: -3px; width: 7px; height: 7px; border-top: 2px solid var(--display-touch); border-left: 2px solid var(--display-touch); transform: rotate(45deg); }
.display-sequence > .note { margin-top: 20px; line-height: 22px; }
.display-touch { display: grid; grid-template-columns: minmax(0,400fr) minmax(0,680fr); gap: 40px; margin-top: 56px; }
.display-touch .display-prose h3 { margin-bottom: 20px; }
.display-touch .note { margin-top: 20px; font-size: var(--text-label); line-height: 23px; overflow-wrap: anywhere; }
.display-touch figure img { width: 100%; }
.display-closing { padding: 56px 0 72px; border-top: 1px solid var(--line); }
.display-closing .display-video-link { display: inline-block; margin-top: 32px; font-size: var(--text-body); line-height: 28px; }
.display-closing .note { font-size: var(--text-label); line-height: 23px; margin-top: 24px; color: var(--muted); }
.displays-page .next-project { margin-top: 0; padding: 36px 0; }
.displays-page .next-project span { font-size: var(--text-heading); line-height: 40px; }
.displays-page .site-footer { margin-top: 0; padding: 40px 0 30px; font-size: var(--text-label); line-height: 22px; }
.development-content { display: grid; grid-template-columns: minmax(0,360fr) minmax(0,680fr); gap: 64px; align-items: start; }
.development-content .display-prose h3 { font-size: var(--text-heading); line-height: 40px; }
.content-outline { padding: 28px 32px; background: var(--surface); }
.source-label { font-size: var(--text-label) !important; line-height: 21px !important; color: var(--muted); margin-bottom: 18px; }
.outline-root { font-size: var(--text-body); line-height: 29px; }
.outline-root span { display: block; color: var(--muted); font-size: var(--text-label); }
.outline-topics { list-style: none; padding: 0 0 0 18px; margin: 20px 0 24px 4px; border-left: 1px solid var(--display-border); }
.outline-topics li { position: relative; font-size: var(--text-body); line-height: 24px; padding: 8px 0 8px 10px; }
.outline-topics li::before { content: ''; position: absolute; width: 18px; height: 1px; background: var(--display-border); top: 20px; left: -18px; }
.outline-detail { border-top: 1px solid var(--display-border); padding-top: 18px; font-size: var(--text-label); line-height: 23px; }
.outline-detail > span { color: var(--muted); }
.outline-detail > p { font-size: var(--text-body); margin: 8px 0 14px; }
.outline-detail b { padding-inline: 8px; font-weight: 400; }
.outline-detail dl > div { display: grid; grid-template-columns: 84px minmax(0,1fr); gap: 12px; margin-top: 6px; }
.outline-detail dt { color: var(--muted); }
.content-outline figcaption { margin-top: 22px; font-size: var(--text-label); }
.ui-source-board { display: grid; grid-template-columns: minmax(0,790fr) minmax(0,290fr); gap: 32px; align-items: start; margin-top: 28px; }
.ui-source-board img { width: 100%; }
.source-layers { padding-left: 24px; border-left: 1px solid var(--line); }
.source-layers dl { font-size: var(--text-label); line-height: 23px; }
.source-layers dl > div + div { margin-top: 16px; }
.source-layers dt { color: var(--ink); }
.source-layers dd { color: var(--muted); padding-left: 14px; border-left: 1px solid var(--display-border); margin: 5px 0 0 3px; }
.source-layers .note { margin-top: 20px; font-size: var(--text-label) !important; line-height: 20px; }
.development-footnote { color: var(--muted); font-size: var(--text-label); line-height: 22px; max-width: 750px; margin-top: 28px; }
.development-test { display: grid; grid-template-columns: minmax(0,360fr) minmax(0,680fr); gap: 40px; margin: 48px 0; align-items: center; }
.development-test h3 { font-size: var(--text-heading); line-height: 40px; margin-bottom: 16px; }
.development-test .display-prose > p:not(.source-label) { font-size: var(--text-body); line-height: 27px; }
.development-test img { width: 100%; }
.display-touch--source { display: block; }
.display-touch--source > figure { margin-top: 28px; }
.touch-source-image { position: relative; background: var(--display-dark); border-radius: var(--image-radius); overflow: hidden; }
.touch-source-image img { width: 100%; }
.touch-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.touch-overlay[hidden], .touch-overlay-toggle[hidden] { display: none; }
.touch-region { fill: none; stroke: var(--display-touch-overlay); stroke-width: 3; }
.touch-region--scott { fill: var(--display-touch-overlay); fill-opacity: .2; stroke: var(--display-inverse); stroke-width: 6; }
.touch-source-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 24px; margin-top: 12px; font-size: var(--text-label); }
.touch-source-controls a { display: inline-flex; align-items: center; min-height: 44px; }
.touch-overlay-toggle { min-height: 44px; padding: 10px 16px; background: var(--paper); border: 1px solid var(--display-border); border-radius: var(--image-radius); color: var(--ink); font: inherit; cursor: pointer; }
.touch-overlay-toggle[aria-pressed="true"] { background: var(--display-dark); border-color: var(--display-dark); color: var(--display-inverse); }
.touch-overlay-toggle:focus-visible { outline: 2px solid var(--display-touch); outline-offset: 4px; }
.touch-coordinate-note { color: var(--muted); font-size: var(--text-label); line-height: 22px; margin-top: 8px; }
.story-index { justify-content: space-between; gap: 8px 24px; }
.story-index a { min-height: 44px; display: flex; align-items: center; }
.story-chapter { padding-block: 64px; }
#development { border-top: 0; }
.story-example { margin-top: 40px; }
.story-bridge { max-width: 720px; margin: 28px 0 0 calc(var(--rail) + var(--gap)); font-size: var(--text-body); line-height: 30px; color: var(--display-secondary); }
.story-touch { margin-top: 32px; }
.story-touch > figure { margin-top: 0; }
.story-flow { margin-top: 40px; }
.story-flow > h3, .story-scale-intro h3 { font-size: var(--text-heading); line-height: 40px; margin-bottom: 16px; }
.story-flow > p, .story-scale-intro p { max-width: 720px; font-size: var(--text-body); line-height: 30px; color: var(--display-secondary); }
.display-steps--short { grid-template-columns: minmax(0,1fr) 76px minmax(0,1fr) 76px minmax(0,1fr); }
.display-steps--short + .display-return { width: 66.666%; margin-right: 16.666%; }
.story-scale-intro { margin-top: 44px; }
.program-details { margin-top: 32px; border-block: 1px solid var(--line); }
.program-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; cursor: pointer; list-style: none; font-size: var(--text-body); line-height: 28px; }
.program-details > summary::-webkit-details-marker { display: none; }
.program-details > summary::after { content: '+'; font-size: var(--text-heading); line-height: 40px; font-weight: 300; }
.program-details[open] > summary::after { content: '−'; }
.program-details > summary small { display: block; color: var(--muted); font-size: var(--text-label); line-height: 23px; margin-top: 4px; }
.program-details-body { padding-bottom: 32px; }
.program-details .development-test { margin-top: 16px; }
.installation { padding-top: 44px; margin-top: 44px; border-top: 1px solid var(--line); }
.installation:first-of-type { border-top: 0; margin-top: 0; }
.installation .display-prose h3 { font-size: var(--text-heading); line-height: 40px; margin-bottom: 18px; }
.story-installations { padding-bottom: 48px; }
@media (max-width: 1100px) {
  .display-steps--short + .display-return { width: auto; margin: 20px 0 0; }
  .development-content { gap: 32px; }
  .ui-source-board { grid-template-columns: 1fr; }
  .source-layers { padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .source-layers dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
  .source-layers dl > div + div { margin-top: 0; }
  .development-test { grid-template-columns: 1fr; gap: 24px; }
  .display-title h1 { font-size: var(--text-display); line-height: 1.1; }
  .display-title h1 br { display: none; }
  .display-meta { gap: 20px; grid-template-columns: 1fr 1fr; }
  .display-meta > div:last-child { grid-column: 1 / -1; }
  .display-scale { gap: 32px; padding: 32px; }
  .display-steps { grid-template-columns: 1fr; }
  .display-step { min-height: 0; padding: 18px 22px; }
  .display-event { padding: 14px 0; display: flex; align-items: center; justify-content: center; gap: 12px; }
  .display-event::after { content: '↓'; margin: 0; }
  .display-return { width: auto; margin: 20px 0 0; padding: 14px 18px; text-align: left; border-left: 2px solid var(--display-touch); }
  .display-return::before, .display-return::after { display: none; }
  .display-return span { display: block; }
  .display-touch { grid-template-columns: 1fr; gap: 24px; }
  .display-scroll-hint { display: block; margin-top: 8px; color: var(--muted); font-size: var(--text-label); }
}
@media (max-width: 700px) {
  .story-index { display: grid; grid-template-columns: 1fr; gap: 0; }
  .story-index a { padding-block: 10px; }
  .story-chapter { padding-block: 40px; }
  .story-example { margin-top: 28px; }
  .story-bridge { margin-left: 0; font-size: var(--text-body); line-height: 28px; }
  .story-flow, .story-scale-intro { margin-top: 32px; }
  .story-flow > h3, .story-scale-intro h3 { font-size: var(--text-body); line-height: 31px; }
  .story-flow > p, .story-scale-intro p { font-size: var(--text-body); line-height: 28px; }
  .installation { margin-top: 32px; padding-top: 32px; }
  .installation .offset > .rail { margin-bottom: 16px; }
  .installation .display-prose h3 { font-size: var(--text-heading); line-height: 40px; }
  .program-details > summary { font-size: var(--text-body); line-height: 26px; }
  .program-details > summary small { font-size: var(--text-label); }
  .development-content { grid-template-columns: 1fr; gap: 24px; }
  .content-outline { padding: 24px; }
  .ui-source-board { margin-top: 24px; gap: 24px; }
  .source-layers dl { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px 16px; }
  .development-test { margin-block: 36px; }
  .touch-source-controls { gap: 8px 20px; }
  .display-hero { padding: 28px 0 28px; }
  .display-title { margin-top: 28px; }
  .display-title .rail { padding: 0; margin-bottom: 18px; }
  .display-title h1 { font-size: var(--text-heading); line-height: 1.25; }
  .display-summary { padding-bottom: 32px; }
  .display-summary > .rail { margin-bottom: 16px; }
  .display-summary p, .display-prose p { font-size: var(--text-body); line-height: 28px; }
  .display-meta { margin-top: 26px; grid-template-columns: 1fr; gap: 22px; }
  .display-collage { grid-template-columns: 1fr; gap: 8px; padding: 8px; }
  .display-collage-side { grid-template-columns: 1fr 1fr; gap: 8px; }
  .display-caption, .display-map-header { flex-direction: column; gap: 5px; }
  .display-index { gap: 0 20px; padding: 18px 0; }
  .display-index a { padding-block: 11px; }
  .displays-page h2, .displays-page h3 { font-size: var(--text-heading); line-height: 40px; }
  .display-chapter .offset > .rail, .display-closing > .rail { margin-bottom: 18px; }
  .display-prose h2 br, .display-prose h3 br { display: none; }
  .display-chapter { padding: 40px 0 44px; }
  .display-chapter--tour { padding-top: 24px; }
  .display-grid { grid-template-columns: 1fr; gap: 28px; }
  .display-media { margin-top: 26px; }
  .display-scale { grid-template-columns: 1fr; gap: 28px; padding: 28px 24px; }
  .display-scale > div + div { border-top: 1px solid var(--muted); padding-top: 28px; }
  .display-scale h3 { font-size: var(--text-body); line-height: 28px; }
  .display-scale .display-count { font-size: var(--text-heading); line-height: 40px; }
  .display-map-header h3 { font-size: var(--text-label); line-height: 22px; }
  .display-map-header a { padding-block: 8px; }
  .display-closeup { margin-top: 44px; }
  .display-sequence { padding: 24px; }
  .display-touch { margin-top: 40px; }
  .display-closing { padding: 40px 0 48px; }
  .displays-page .next-project span { font-size: var(--text-heading); }
  .displays-page .site-footer { gap: 16px; font-size: var(--text-label); }
}
@media print {
  .touch-overlay-toggle, .touch-source-controls { display: none; }
  .display-loop-toggle { display: none; }
  .connection-scroll { overflow: visible; }
  .connection-scroll img { min-width: 0; }
  .display-scroll-hint, .display-map-header a { display: none; }
  .display-chapter { break-before: auto; }
}

/* One compact, source-grounded walkthrough bridges UI design and authoring. */
.display-demos { margin-top: 56px; scroll-margin-top: 28px; }
.demo-intro { max-width: 650px; margin-bottom: 28px; }
.demo-intro .source-label { margin-bottom: 10px; }
.demo-intro > p:last-child { margin-top: 14px; font-size: var(--text-body); line-height: 27px; color: var(--display-secondary); }
.demo-widget { border-top: 1px solid var(--line); }
.demo-widget[hidden], .demo-hotspot[hidden], .demo-load-error[hidden] { display: none; }
.demo-tabs { display: flex; gap: 32px; border-bottom: 1px solid var(--line); }
.demo-tabs button { position: relative; border: 0; padding: 19px 0; background: none; color: var(--muted); font: inherit; font-size: var(--text-body); cursor: pointer; }
.demo-tabs button[aria-selected="true"] { color: var(--ink); }
.demo-tabs button[aria-selected="true"]::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--ink); }
.demo-path { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0 12px; font-size: var(--text-label); line-height: 20px; color: var(--muted); }
.demo-screen { position: relative; aspect-ratio: 16 / 9; background: var(--display-dark); border-radius: var(--image-radius); overflow: hidden; }
.demo-image { display: block; width: 100%; height: 100%; object-fit: contain; }
.demo-screen[aria-busy="true"] .demo-image { opacity: .5; }
.demo-hotspot { position: absolute; border: 2px solid var(--display-touch-overlay); background: transparent; border-radius: 4px; cursor: pointer; box-shadow: 0 0 0 1px var(--display-dark); }
.demo-hotspot span { position: absolute; right: -10px; top: -17px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--display-touch); color: var(--display-inverse); font-size: var(--text-body); }
.demo-hotspot:hover { background: color-mix(in srgb, var(--display-touch-overlay) 20%, transparent); }
.demo-hotspot--farm-home { left: 3.85%; top: 89.17%; width: 8.7%; height: 10.83%; }
.demo-hotspot--farm-years { left: 19.53%; top: 88.7%; width: 8.7%; height: 11.11%; }
.demo-hotspot--farm-composite { inset: 3%; }
.demo-hotspot--farm-composite span { right: 12px; top: 12px; }
.demo-hotspot--museum-home { left: 36.5%; top: 93%; width: 12%; height: 6.2%; }
.demo-hotspot--museum-next { left: 85%; top: 41%; width: 7%; height: 13%; }
.demo-hotspot--museum-return { left: 27%; top: 93%; width: 8%; height: 6.2%; }
.demo-load-error { position: absolute; inset: 25% 10%; text-align: center; color: var(--display-inverse); }
.demo-bottom { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 24px 40px; align-items: center; padding: 24px 0; }
.demo-explanation h4 { font-size: var(--text-body); line-height: 27px; font-weight: 500; margin: 0 0 7px; }
.demo-explanation p { max-width: 610px; font-size: var(--text-label); line-height: 24px; color: var(--display-secondary); margin: 0; }
.demo-actions { display: flex; gap: 12px; align-items: center; }
.demo-actions button, .demo-reset { min-height: 44px; padding: 10px 14px; font: inherit; font-size: var(--text-label); cursor: pointer; border: 1px solid var(--display-border); border-radius: 4px; background: var(--paper); color: var(--ink); }
.demo-actions .demo-next { background: var(--display-dark); color: var(--display-inverse); border-color: var(--display-dark); }
.demo-actions .demo-back:disabled { opacity: .4; cursor: default; }
.demo-source-row { display: flex; gap: 24px; justify-content: space-between; align-items: flex-start; border-top: 1px solid var(--line); padding-top: 16px; }
.demo-source { max-width: 790px; font-size: var(--text-label); line-height: 20px; color: var(--muted); margin: 0; }
.demo-reset { border: 0; padding: 0 0 0 12px; white-space: nowrap; min-height: 44px; text-decoration: underline; text-underline-offset: 4px; }
.display-demos button:focus-visible, #demo-panel:focus-visible { outline: 2px solid var(--display-touch); outline-offset: 4px; }
.demo-hotspot:focus-visible { outline-color: var(--display-inverse); outline-offset: 2px; }
@media (max-width: 900px) {
  .demo-bottom { grid-template-columns: 1fr; gap: 16px; }
  .demo-actions { justify-content: space-between; }
  .demo-explanation { min-height: 82px; }
}
@media (max-width: 600px) {
  .display-demos { margin-top: 40px; }
  .demo-tabs { gap: 0; justify-content: space-between; }
  .demo-tabs button { font-size: var(--text-label); min-height: 52px; }
  .demo-source-row { gap: 12px; }
  .demo-intro > p:last-child { font-size: var(--text-body); line-height: 25px; }
  .demo-hotspot span { width: 20px; height: 20px; font-size: var(--text-label); top: -19px; right: 0; }
  .demo-hotspot--farm-composite span { top: 5px; right: 5px; }
}