/* A quiet, four-wall exhibition. The controls remain ordinary, accessible HTML. */
.portfolio > .site-header { position: relative; inset: auto; width: 100%; max-width: none; min-height: 88px; padding-inline: max(var(--gutter), calc((100vw - 1440px) / 2)); background: #f4f3ee; }
.portfolio > .site-header .brand-lockup { background: transparent; }
.exhibition { --paper: #f4f3ee; position: relative; display: flex; flex-direction: column; min-height: 700px; height: calc(100svh - 88px); max-height: 1080px; color: var(--ink); background: var(--paper); overflow: hidden; }
.exhibition-stage { position: relative; flex: 1; min-height: 410px; overflow: hidden; touch-action: pan-y; cursor: grab; outline-offset: -5px; }
.exhibition-stage:active { cursor: grabbing; }
.exhibition-scene, .exhibition-fallback { position: absolute; inset: 0; }
.exhibition-scene { opacity: 0; transition: opacity .18s ease; }
.exhibition-scene canvas { display: block; width: 100%; height: 100%; }
.exhibition-fallback { display: flex; align-items: center; justify-content: center; padding: 48px 12%; transition: opacity .18s ease; }
.exhibition-fallback img { width: 100%; height: 100%; object-fit: contain; }
.exhibition.is-ready .exhibition-scene { opacity: 1; }
.exhibition.is-ready .exhibition-fallback { opacity: 0; pointer-events: none; }
.exhibition-overline { position: absolute; z-index: 5; top: 20px; left: var(--gutter); right: var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #62665b; font-size: 11px; letter-spacing: .09em; pointer-events: none; }
.exhibition-explore { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 46px; padding: 10px 17px; border: 1px solid #9ba38e; border-radius: 3px; background: #fafaf6e6; color: #34422b; font-size: 14px; letter-spacing: 0; line-height: 1.4; pointer-events: auto; }
.exhibition-explore:hover { background: #fff; border-color: #5e6e4c; }
.exhibition-explore:disabled { visibility: hidden; }
.exhibition-explore[hidden], .exhibition-play[hidden], .exhibition-walk-panel[hidden] { display: none; }
.exhibition-arrow { position: absolute; top: 50%; display: grid; place-items: center; width: 46px; height: 46px; margin-top: -23px; border: 1px solid #74796936; border-radius: 50%; background: #fafaf6a8; transition: background .2s, border-color .2s; }
.exhibition-arrow:hover { background: #fff; border-color: #74796980; }
.exhibition-arrow img { width: 19px; height: 19px; opacity: .8; }
.exhibition-arrow.previous { left: var(--gutter); }
.exhibition-arrow.next { right: var(--gutter); }
.exhibition-hint { position: absolute; bottom: 17px; left: 50%; margin: 0; transform: translateX(-50%); color: #666b5e; font-size: 12px; letter-spacing: .015em; white-space: nowrap; pointer-events: none; }
.exhibition-loading { position: absolute; bottom: 48px; left: 50%; transform: translateX(-50%); margin: 0; padding: 6px 12px; font-size: 12px; color: var(--muted); background: #f4f3eedd; }
.exhibition-loading:empty { display: none; }
.exhibition-caption { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-inline: var(--gutter); padding: 21px 0 25px; border-top: 1px solid var(--line); }
.exhibition-caption h2 { margin: 0; font: 400 clamp(40px, 4.8vw, 70px)/1.14 var(--display); letter-spacing: -.035em; }
.exhibition-caption .exhibition-material { margin: 10px 0 0; color: #48503f; font-size: 18px; line-height: 1.6; }
.exhibition-caption .text-link { flex-shrink: 0; margin: 0; font-size: 16px; white-space: nowrap; }
.exhibition-caption .text-link span { margin-left: 36px; }
.exhibition-caption-heading { display: flex; align-items: center; gap: clamp(22px, 3vw, 52px); min-width: 0; }
.exhibition-caption-heading > div { min-width: 0; }
.exhibition-count { align-self: flex-start; padding-top: 11px; color: #59614f; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.exhibition-count strong { font-weight: 500; color: var(--ink); }
.exhibition-controls { display: flex; align-items: stretch; justify-content: space-between; gap: 24px; min-height: 62px; padding-inline: var(--gutter); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.exhibition-selectors { display: flex; gap: clamp(20px, 4vw, 58px); }
.exhibition-selectors button { position: relative; display: flex; align-items: center; gap: 10px; min-height: 64px; color: #555e49; font-size: 15px; white-space: nowrap; }
.exhibition-selectors button > span { font-size: 12px; color: #626b56; }
.exhibition-selectors button[aria-current="true"] { color: var(--ink); }
.exhibition-selectors button[aria-current="true"]::before, .exhibition-selectors button[aria-current="true"]::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #c9ccbf; }
.exhibition-selectors button[aria-current="true"]::after { transform: scaleX(var(--tour-progress, 0)); transform-origin: left; background: #525c43; }
.exhibition-play { display: inline-flex; justify-content: flex-end; align-items: center; gap: 16px; min-height: 48px; font-size: 14px; white-space: nowrap; }
.exhibition-play img { width: 18px; height: 18px; }
.exhibition .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.exhibition[data-mode="walk"] { height: auto; max-height: none; }
.exhibition[data-mode="walk"] .exhibition-stage { flex: none; height: clamp(460px, calc(100svh - 290px), 800px); touch-action: none; }
.exhibition[data-mode="walk"] .exhibition-arrow { display: none; }
.exhibition[data-mode="walk"] .exhibition-hint { font-size: 13px; color: #4f5b44; }
.exhibition-walk-panel { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.walk-movement { position: absolute; bottom: 48px; left: var(--gutter); display: grid; grid-template-columns: repeat(3, 46px); grid-template-areas: 'label label label' '. forward .' 'left back right'; gap: 6px; }
.walk-control-label { grid-area: label; margin-bottom: 2px; text-align: center; color: #58634d; font-size: 12px; }
.walk-button { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid #8e9a7d80; border-radius: 50%; background: #fafaf6e6; color: #37482b; font-size: 25px; line-height: 1; pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.walk-button:hover, .walk-button.is-pressed { border-color: #687955; background: #e4e8da; }
.walk-movement [data-walk="forward"] { grid-area: forward; }
.walk-movement [data-walk="back"] { grid-area: back; }
.walk-movement [data-walk="left"] { grid-area: left; }
.walk-movement [data-walk="right"] { grid-area: right; }
.walk-orientation { position: absolute; bottom: 48px; right: var(--gutter); display: grid; justify-items: center; gap: 6px; }
.walk-map { display: block; width: 92px; height: 92px; }
.walk-turn { display: flex; gap: 6px; }
.walk-centre { min-height: 36px; padding: 4px 12px; color: #526145; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; pointer-events: auto; }
.walk-help-compact { display: none; }
@media (min-width: 701px) and (max-width: 1000px) {
  .exhibition-controls { flex-wrap: wrap; gap: 0; }
  .exhibition-selectors { justify-content: space-between; gap: 18px; width: 100%; }
  .exhibition-play { width: 100%; padding-bottom: 8px; }
}
@media (max-width: 700px) {
  .portfolio > .site-header { min-height: 122px; padding-top: 12px; padding-bottom: 10px; }
  .exhibition { height: auto; min-height: 0; max-height: none; }
  .exhibition-stage { flex: none; height: clamp(350px, 53svh, 470px); min-height: 350px; }
  .exhibition-overline { top: 17px; font-size: 10px; }
  .exhibition-explore { gap: 9px; padding: 9px 11px; font-size: 13px; min-height: 44px; }
  .exhibition-arrow { top: auto; bottom: 46px; width: 42px; height: 42px; margin-top: 0; }
  .exhibition-arrow.previous { left: 10px; }
  .exhibition-arrow.next { right: 10px; }
  .exhibition-hint { bottom: 14px; font-size: 11px; }
  .exhibition-caption { align-items: flex-start; flex-wrap: wrap; gap: 15px; padding: 19px 0 21px; }
  .exhibition-caption-heading { display: grid; grid-template-columns: 1fr; gap: 10px; width: 100%; }
  .exhibition-caption h2 { font-size: clamp(34px, 9.2vw, 46px); letter-spacing: -.035em; }
  .exhibition-count { padding-top: 0; font-size: 13px; }
  .exhibition-caption .exhibition-material { margin-top: 10px; font-size: 16px; }
  .exhibition-caption .text-link { margin-left: 0; font-size: 16px; min-height: 44px; }
  .exhibition-controls { flex-wrap: wrap; gap: 0; padding-bottom: 9px; }
  .exhibition-selectors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; width: 100%; }
  .exhibition-selectors button { gap: 7px; min-height: 58px; padding-block: 9px; font-size: 14px; text-align: left; white-space: normal; line-height: 1.45; }
  .exhibition-selectors button > span { font-size: 11px; }
  .exhibition-play { width: 100%; min-height: 44px; font-size: 14px; }
  .exhibition[data-mode="walk"] .exhibition-stage { height: clamp(440px, 62svh, 620px); }
  .exhibition[data-mode="walk"] .exhibition-hint { width: calc(100% - 32px); white-space: normal; text-align: center; font-size: 12px; }
  .walk-map { display: none; }
  .walk-help-wide { display: none; }
  .walk-help-compact { display: inline; }
  .walk-movement, .walk-orientation { bottom: 48px; }
}
@media (max-width: 360px) {
  .exhibition-selectors { gap: 0 14px; }
  .exhibition-selectors button { gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .exhibition-scene, .exhibition-fallback { transition: none; }
}