:root {
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: 14px;
  color: #1d292c;
  background: #d6d4cb;
  color-scheme: light;
  --paper: #d6d4cb;
  --edge: clamp(20px, 3.2vw, 48px);
}
* { box-sizing: border-box; }
body { margin: 0; }
button, a { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
button { border: 0; border-radius: 0; padding: 0; background: none; cursor: pointer; }
button:disabled, button[aria-disabled="true"] { cursor: default; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
button:focus-visible, a:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

.kinetic {
  min-height: 100svh;
  height: 100svh;
  display: grid;
  grid-template-rows: minmax(280px, 1fr) auto;
  padding-top: max(clamp(20px, 3.5svh, 40px), env(safe-area-inset-top));
}
.stage { position: relative; min-width: 0; min-height: 0; margin: 0 var(--edge); }
.photograph { position: absolute; top: 0; left: 0; display: block; visibility: hidden; transform-origin: 0 0; touch-action: manipulation; }
.photograph img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.kinetic[data-status="ready"] .photograph { visibility: visible; }
.photograph:focus-visible { outline-offset: 6px; }

/* The controls occupy the same space in every state, so selecting a photo
   changes the composition itself, never the height of its viewing area. */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 16px;
  padding: 14px var(--edge) max(14px, env(safe-area-inset-bottom));
}
.artist { flex: 1 1 0; min-width: min-content; font-size: .7857rem; line-height: 1.65; letter-spacing: .035em; }
.controls { flex: 0 0 auto; display: grid; grid-template-columns: repeat(4, 44px); column-gap: 6px; margin-left: auto; margin-right: -12px; }
#selection-actions { display: contents; }
#view { grid-column: 1; grid-row: 1; }
#flow { grid-column: 2; grid-row: 1; }
#next-scene { grid-column: 3; grid-row: 1; }
#motion { grid-column: 4; grid-row: 1; }
.icon-button { position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; touch-action: manipulation; }
.icon-button svg { grid-area: 1 / 1; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: square; stroke-linejoin: miter; }
.icon-button:disabled, .icon-button[aria-disabled="true"] { color: #737a77; }
.icon-play { display: none; }
[data-paused="true"] .icon-pause { display: none; }
[data-paused="true"] .icon-play { display: block; }
.control-label {
  position: absolute;
  bottom: calc(100% + 4px);
  right: 0;
  width: max-content;
  max-width: 12em;
  padding: 3px 6px;
  background: var(--paper);
  font-size: .7857rem;
  line-height: 1.6;
  visibility: hidden;
  pointer-events: none;
}
.icon-button:focus-visible .control-label { visibility: visible; }
@media (hover: hover) and (pointer: fine) {
  .icon-button:hover:not(:disabled) .control-label { visibility: visible; }
}

.loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 18px; padding: 24px; }
.loading p { margin: 0; line-height: 1.9; text-align: center; font-size: .857rem; }
#retry, #scene-retry, #viewer-retry { min-height: 44px; padding: 10px 0; font-size: .857rem; text-decoration: underline; text-underline-offset: .4em; }
#scene-loading { flex-basis: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 24px; }
#scene-message { margin: 0; font-size: .857rem; line-height: 1.8; }

#viewer { --paper: #0b0e0f; margin: 0; padding: 0; border: 0; width: 100%; height: 100%; max-width: none; max-height: none; background: var(--paper); color: #d7dbd9; color-scheme: dark; }
#viewer::backdrop { background: #0b0e0f; }
.viewer-layout { display: grid; height: 100dvh; grid-template-rows: auto minmax(0,1fr) auto; padding: max(8px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)); }
.viewer-header, .viewer-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
#viewer-label { font-size: .7857rem; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.viewer-header .control-label { top: calc(100% + 2px); bottom: auto; z-index: 1; }
.viewer-stage { position: relative; min-height: 0; }
#viewer-image { display: block; width: 100%; height: 100%; object-fit: contain; }
#viewer-message { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 18px; padding: 22px; }
#viewer-message p { margin: 0; line-height: 1.8; text-align: center; }
#viewer-image:not([hidden]) + #viewer-message { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
#previous .control-label { left: 0; right: auto; }
.no-script { padding: 24px; line-height: 2; }

@media (max-width: 480px) {
  .controls { column-gap: 0; }
  .site-footer { padding-top: 10px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
}
@media (max-height: 480px) and (orientation: landscape) {
  .kinetic { grid-template-rows: minmax(180px,1fr) auto; padding-top: max(12px, env(safe-area-inset-top)); }
  .site-footer { padding-top: 4px; padding-bottom: max(4px, env(safe-area-inset-bottom)); }
}

.artist { min-height: 44px; text-align: left; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: #89908a; }
#about { margin: 0; padding: 0; border: 0; width: 100%; height: 100%; max-width: none; max-height: none; background: var(--paper); color: inherit; }
#about::backdrop { background: var(--paper); }
.about-layout { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr; padding: max(16px,env(safe-area-inset-top)) var(--edge) max(40px,env(safe-area-inset-bottom)); }
.about-header { display: flex; justify-content: flex-end; }
.about-header .control-label { top: calc(100% + 2px); bottom: auto; }
.about-copy { align-self: center; width: min(100%, 440px); margin: 6vh auto 16vh; }
.about-copy h2 { margin: 0 0 42px; font-size: clamp(23px, 3.3vw, 34px); font-weight: 400; letter-spacing: -.035em; line-height: 1.2; }
.about-copy p { font-size: .93rem; line-height: 2.15; margin: 0 0 28px; }
.about-copy .contact-note { margin-top: 42px; font-size: .8rem; }
.about-links { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.about-links a { min-height: 44px; display: inline-flex; align-items: center; font-size: .86rem; text-decoration-thickness: 1px; text-underline-offset: 5px; }
#about[open] .about-copy { animation: about-arrive 320ms ease-out both; }
@keyframes about-arrive { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #about[open] .about-copy { animation: none; } }
@media (max-height: 480px) { .about-copy { margin: 12px auto 24px; } .about-copy h2 { margin-bottom: 24px; } }

/* The profile reads like an exhibition note, in the same paper and type as the work. */
#about { overflow-y: auto; scrollbar-gutter: stable; }
.profile-page { max-width: 1200px; margin: 0 auto; padding: 12px var(--edge) 80px; }
.profile-toolbar { position: sticky; top: 0; z-index: 2; display: flex; justify-content: flex-end; padding: max(4px,env(safe-area-inset-top)) 0 4px; background: var(--paper); }
.profile-toolbar .control-label { top: 100%; bottom: auto; }
.profile-grid { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1fr); grid-template-areas: "work intro" "work details"; column-gap: clamp(48px,7vw,100px); align-items: start; margin-top: 40px; }
.profile-intro { grid-area: intro; }
.profile-identity { display: flex; align-items: center; gap: 24px; margin-bottom: 32px; }
.profile-identity h2 { margin: 0; font-size: clamp(30px,3.5vw,44px); font-weight: 400; letter-spacing: -.035em; line-height: 1.15; }
.profile-statement { font-size: .95rem; line-height: 2.15; max-width: 32em; margin: 0 0 44px; }
.profile-work { grid-area: work; position: sticky; top: 100px; margin: 0; }
.profile-work img { display: block; width: 100%; height: auto; max-height: calc(100svh - 148px); object-fit: contain; object-position: top left; }
.profile-details { grid-area: details; }
.profile-section { margin-bottom: 34px; }
.profile-section h3 { margin: 0 0 17px; font-size: .8rem; font-weight: 400; letter-spacing: .05em; }
.profile-records { margin: 0; }
.profile-records > div { display: grid; grid-template-columns: 92px minmax(0,1fr); gap: 12px; margin-bottom: 12px; }
.profile-records dt { color: #515b58; font-size: .83rem; line-height: 1.8; font-variant-numeric: tabular-nums; }
.profile-records dd { margin: 0; font-size: .93rem; line-height: 1.65; }
.profile-records dd span { display: block; color: #515b58; font-size: .83rem; }
.profile-exhibitions dd span { display: inline; margin-left: .8em; }
.profile-activity { padding: 0; margin: 0; list-style: none; font-size: .93rem; line-height: 1.8; }
.profile-activity li + li { margin-top: 7px; }
.profile-contact { padding-top: 26px; border-top: 1px solid #a8aca2; }
.profile-contact p { margin: 0 0 14px; font-size: .86rem; line-height: 2; }
.profile-contact .about-links { gap: 10px 28px; }
@media (max-width: 760px) {
  .profile-page { padding-bottom: max(48px,env(safe-area-inset-bottom)); }
  .profile-grid { grid-template-columns: minmax(0,1fr); grid-template-areas: "intro" "work" "details"; margin-top: 26px; }
  .profile-identity { gap: 22px; margin-bottom: 26px; }
  .profile-identity h2 { font-size: clamp(30px,7.5vw,40px); }
  .profile-statement { margin-bottom: 30px; }
  .profile-work { position: static; width: 100%; margin: 0 0 40px; }
  .profile-work img { max-height: 420px; }
  .profile-records > div { grid-template-columns: 85px minmax(0,1fr); gap: 12px; }
}
@media (max-width: 359px) {
  .profile-identity { align-items: flex-start; gap: 16px; }
  .profile-identity h2 { font-size: 27px; }
  .profile-records > div { grid-template-columns: 78px minmax(0,1fr); gap: 8px; }
}