:root { font-family: Helvetica, Arial, sans-serif; color: #a5a5a5; background: #000; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button { color: inherit; font: inherit; background: none; border: 0; cursor: pointer; }
button:focus-visible { outline: 1px solid #aaa; outline-offset: 6px; }
button:hover { color: #fff; }
/* Links to the Paris archive; looks exactly like the unlinked lettering (no hover change). */
.edition-link { display: block; color: inherit; text-decoration: none; }
.edition-link:focus-visible { outline: 1px solid #aaa; outline-offset: 6px; }
header { position: fixed; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding: 30px 36px; font-size: 13px; }
.muted { color: #626262; margin-left: 8px; }
#view { font-size: 13px; padding: 8px 0 8px 12px; }
#view span { margin-left: 14px; }
main { position: relative; width: 100%; height: 100svh; min-height: 520px; overflow: hidden; }
.edition { position: absolute; text-align: center; width: max-content; transform: translate(-50%, -50%); transition: left 1.6s ease, top 1.6s ease; font-weight: 400; }
.edition h1,.edition h2 { font-weight: 400; font-size: 17px; line-height: 1.3; margin: 0 0 18px; }
.edition p { font-size: 13px; line-height: 1.5; margin: 0; }
.edition-one { top: 37%; left: 29%; color: #4a4a4a; animation: heartbeat 3.6s ease-in-out infinite; }
.edition-one h2 { font-size: 14px; margin-bottom: 14px; }
.edition-one p { font-size: 12px; }
.edition-two { top: 55%; left: 62%; color: #535353; }
#water { position: absolute; left: 50%; top: 50%; width: 420px; height: 260px; transform: translate(-50%, -50%); pointer-events: none; visibility: hidden; }
.water-ready #water { visibility: visible; }
.water-ready .lettering { opacity: 0; }
footer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 3; padding: 28px 36px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 20px; font-size: 12px; }
.study-info { max-width: 275px; color: #737373; line-height: 1.5; }
.study-info>span { color: #a5a5a5; font-variant-numeric: tabular-nums; }
.study-info p { margin: 10px 0 0; }
#pause { display: flex; align-items: center; justify-self: end; gap: 9px; font-size: 12px; padding: 12px 0; }
.playback { justify-self: end; display: grid; grid-template-columns: 116px auto; align-items: center; gap: 0 22px; }
.playback label { display: flex; justify-content: space-between; color: #777; font-size: 12px; }
.playback output { font-variant-numeric: tabular-nums; }
.playback #pause { grid-column: 2; grid-row: 1 / 3; }
#phase { width: 116px; height: 22px; margin: 0; accent-color: #888; cursor: pointer; background: transparent; appearance: none; }
#phase::-webkit-slider-runnable-track { height: 1px; background: #333; }
#phase::-webkit-slider-thumb { appearance: none; width: 5px; height: 5px; margin-top: -2px; border-radius: 50%; background: #999; }
#phase::-moz-range-track { height: 1px; background: #333; }
#phase::-moz-range-thumb { width: 5px; height: 5px; border: 0; border-radius: 50%; background: #999; }
#phase:focus-visible { outline: 1px solid #888; outline-offset: 5px; }
.pause-icon { font-size: 16px; }
.review-ui { transition: opacity .4s; }
.artwork .review-ui { opacity: 0; visibility: hidden; pointer-events: none; }
#return { position: fixed; bottom: 24px; right: 30px; z-index: 4; padding: 12px; font-size: 12px; color: #777; opacity: .3; }
#return:hover,#return:focus-visible { opacity: 1; }
body.paused .edition-one { animation-play-state: paused; }
@keyframes heartbeat {
  0%, 8%, 92%, 100% { opacity: 0; }
  50% { opacity: .85; }
}
@media (max-width: 800px) {
  header { padding: 20px; } .muted { display: none; }
  footer { padding: 20px; grid-template-columns: 1fr auto; gap: 16px; }
  .study-info { max-width: 240px; } .study-info p { margin-top: 5px; }
  .playback { grid-row: 1; grid-column: 2; grid-template-columns: 72px; gap: 0; }
  .playback #pause { grid-column: 1; grid-row: 3; padding-bottom: 0; } #phase { width: 72px; }
  .edition-one { left: 27%; top: 32%; } .edition-two { left: 62%; top: 51%; }
  .edition h1 { font-size: 17px; } .edition p { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .edition-one { animation: none; opacity: .8; } .edition { transition: none; } }