@font-face {
  font-family: 'Instrument Serif';
  src: url('assets/fonts/instrument-serif-regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('assets/fonts/instrument-serif-italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: block;
}
:root {
  --paper: #f5f5f3;
  --ink: #292a27;
  --focus: #65685e;
  --mechanical: #080808;
  --game-underline: #A2CFFE;
  --gallery-paper: #fff;
  --gallery-ink: #111;
  --scroll-thumb: #b8b9b2;
  --scroll-hover: #888a81;
  --scroll-active: #5b5e54;
  color-scheme: light;
  scrollbar-color: var(--scroll-thumb) var(--paper);
  scrollbar-width: thin;
}
* { box-sizing: border-box; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: var(--paper); }
*::-webkit-scrollbar-thumb { background: var(--scroll-thumb); }
*::-webkit-scrollbar-thumb:hover { background: var(--scroll-hover); }
*::-webkit-scrollbar-thumb:active { background: var(--scroll-active); }
body { margin: 0; background: var(--paper); color: var(--ink); }
::selection { background: var(--ink); color: var(--paper); }
.homepage { min-height: 100svh; display: grid; place-items: center; padding: 9vh 5vw; }
.composition { position: relative; width: max-content; max-width: 100%; }
.sentence {
  position: relative;
  z-index: 3;
  margin: 0;
  white-space: nowrap;
  font: 400 clamp(12px, 3.48vw, 64px)/1.35 'Instrument Serif', 'Times New Roman', serif;
  letter-spacing: -.012em;
}
.identity {
  position: relative;
  display: inline-block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-decoration: none;
  vertical-align: baseline;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.identity > span { display: inline-block; }
.identity-games > span { position: relative; isolation: isolate; }
/* Paint the continuous underline behind the glyphs, including their descenders. */
.identity-games > span::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset-inline: 0;
  bottom: .2em;
  height: max(2px, .055em);
  background: var(--game-underline);
}
.identity-name { font-style: italic; }
.identity:focus-visible { outline: 1px solid currentColor; outline-offset: 6px; }
.identity:active { opacity: .65; }
.identity-cars > span { transform-origin: 50% 75%; transition: transform 250ms ease; }
body[data-world='cars'] .identity-cars > span { transform: skewX(-9deg); }

/* All scenery is temporary, inert, and behind the single sentence. */
.world-stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.kinetic-scene { position: absolute; inset: 0; width: 100%; height: 100%; visibility: hidden; }
body[data-world='games'] .kinetic-scene { visibility: visible; }
.motor-scene {
  position: absolute; inset: 0; width: 100%; height: 100%; visibility: hidden; opacity: 0;
  background-color: var(--mechanical);
}
.motor-scene.is-active { visibility: visible; opacity: 1; }
.motor-scene.is-exiting { visibility: visible; opacity: 0; transition: opacity 380ms ease-out; }
.photo-scene { position: absolute; inset: 0; visibility: hidden; }
body[data-world='photo'] .photo-scene { visibility: visible; }
.identity-photo::before {
  content: 'THE GALLERY' / ''; position: absolute; left: 0; top: -15px;
  font: 10px/1 'Helvetica Neue', Helvetica, Arial, sans-serif;
  letter-spacing: .025em; opacity: 0; transition: opacity 160ms ease;
}
.identity-photo::after {
  content: ''; position: absolute; inset: -6px -9px; opacity: 0;
  background: linear-gradient(currentColor,currentColor) left top/8px 1px no-repeat,
    linear-gradient(currentColor,currentColor) left top/1px 8px no-repeat,
    linear-gradient(currentColor,currentColor) right bottom/8px 1px no-repeat,
    linear-gradient(currentColor,currentColor) right bottom/1px 8px no-repeat;
  transition: opacity 160ms ease; pointer-events: none;
}
body[data-world='photo'] .identity-photo::before,
body[data-world='photo'] .identity-photo::after { opacity: 1; }
.gallery-print { position: absolute; margin: 0; }
.gallery-print::after {
  content: ''; position: absolute; inset: -7px;
  background: linear-gradient(var(--gallery-ink),var(--gallery-ink)) left top/12px 1px no-repeat,
    linear-gradient(var(--gallery-ink),var(--gallery-ink)) left top/1px 12px no-repeat,
    linear-gradient(var(--gallery-ink),var(--gallery-ink)) right bottom/12px 1px no-repeat,
    linear-gradient(var(--gallery-ink),var(--gallery-ink)) right bottom/1px 12px no-repeat;
}
.gallery-print img { display: block; width: 100%; height: auto; visibility: hidden; }
body[data-world='photo'] .gallery-print.is-ready img {
  visibility: visible;
  animation: develop-print 2600ms cubic-bezier(.22,.45,.32,1) backwards;
  animation-delay: var(--develop-delay, 0ms);
}
.gallery-print:nth-child(2) { --develop-delay: 180ms; }
.gallery-print:nth-child(3) { --develop-delay: 390ms; }
.gallery-print:nth-child(4) { --develop-delay: 580ms; }
/* Restore the original darkroom development, settling to the untouched photograph. */
@keyframes develop-print {
  0% { filter: contrast(0) brightness(2); }
  14% { filter: contrast(.08) brightness(1.86); }
  38% { filter: contrast(.35) brightness(1.48); }
  68% { filter: contrast(.73) brightness(1.14); }
  88% { filter: contrast(.96) brightness(1.02); }
  100% { filter: none; }
}
.sentence-mat {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--sentence-top, 45%);
  height: var(--sentence-height, 10%);
  background: var(--paper);
  visibility: hidden;
}
body[data-car-exit] .sentence-mat { visibility: visible; }
body[data-world='cars'] .sentence { color: var(--paper); }
.portrait {
  position: absolute;
  z-index: 1;
  margin: 0;
  pointer-events: none;
  visibility: hidden;
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: height 350ms cubic-bezier(.2,.75,.2,1), visibility 0s 350ms, opacity 0s 350ms;
}
.portrait img { position: absolute; bottom: 0; display: block; width: 100%; height: auto; }
.portrait-full {
  width: clamp(180px, 22vw, 320px);
  left: var(--name-center, 8%);
  bottom: calc(100% + 38px);
  transform: translateX(-42%);
}
.composition[data-active='name'] .portrait-full {
  visibility: visible;
  height: var(--portrait-height);
  opacity: 1;
  transition-delay: 0s;
}
.portrait[hidden] { display: none; }
/* Created only for the game link. No resting or hover layout changes. */
.game-destination, .game-collapse { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.game-destination { z-index: 4; visibility: hidden; }
.game-destination.is-revealed { visibility: visible; }
.game-collapse { z-index: 5; }
body[data-game-transition] { overflow: hidden; }
body[data-game-transition] .world-stage, body[data-game-transition] .portrait { display: none; }
body[data-game-transition] .homepage { clip-path: inset(var(--game-inset-y, 0px) var(--game-inset-x, 0px)); pointer-events: none; }
body[data-game-transition] .identity:focus-visible { outline: none; }
body[data-game-transition='point'] .homepage { visibility: hidden; }
/* Photographer's temporary, same-origin exhibition preview and architectural drawing. */
.photo-destination { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; z-index: 5; visibility: hidden; pointer-events: none; }
.photo-destination.is-revealed { visibility: visible; opacity: 0; }
.photo-entry { position: fixed; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; color: var(--gallery-ink); }
.photo-entry-white, .photo-entry-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.photo-entry-white { background: var(--gallery-paper); }
.photo-entry-brand { position: absolute; display: flex; align-items: center; justify-content: center; }
.photo-entry-mark { position: absolute; top: -8px; left: 0; width: 100%; height: calc(100% + 16px); }
.photo-entry-brand > span { position: relative; font: 400 28px/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif; letter-spacing: -.04em; text-transform: uppercase; white-space: nowrap; -webkit-font-smoothing: antialiased; }
body[data-photo-transition] { overflow: hidden; }
body[data-photo-transition] .homepage, body[data-photo-transition] .world-stage { opacity: var(--photo-home-opacity, 1); pointer-events: none; }
body[data-photo-transition] .business-card-dock { visibility: hidden; }
body[data-photo-transition] .identity-photo::before, body[data-photo-transition] .identity-photo::after { visibility: hidden; }
@media (max-width: 700px) and (pointer: coarse) {
  .homepage { padding: 190px 9vw; }
  .composition { width: 100%; }
  .sentence { white-space: normal; text-wrap: pretty; font-size: clamp(31px, 6.2vw, 43px); line-height: 1.55; letter-spacing: -.005em; }
  .identity { min-height: 44px; }
  .portrait-full { left: 0; width: 205px; bottom: calc(100% + 28px); transform: none; }
}
@media (max-height: 500px) and (min-width: 701px) {
  .portrait-full { width: 170px; bottom: calc(100% + 18px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  body[data-world='cars'] .identity-cars > span { transform: none; }
  body[data-world='photo'] .gallery-print.is-ready img { filter: none; }
}
@media (forced-colors: active) {
  :root { scrollbar-color: auto; }
  .world-stage { display: none; }
  body[data-world='cars'] .sentence { color: CanvasText; }
  .identity:focus-visible { outline-color: Highlight; }
}