/* The corridor: a CSS 3D hall whose wall, floor, ceiling and frames are generated dithered textures; the works in
   the frames are the real 64x64 pictures. Three columns on the container lines: the name and the links on the left
   line, the hall of earlier generations in the middle, the latest work with its plaque under it on the right line. */
body.home { background: var(--wall); overflow-x: hidden; }
body.home nav { position: absolute; top: 0; left: 0; z-index: 30; }
body.home .nav a { -webkit-text-stroke: 7px var(--wall); paint-order: stroke fill; }
.scene { position: relative; height: max(640px, 100svh); overflow: hidden;
  background: var(--wall) url("/img/wall-pair.webp") repeat-x left top / auto 100%; }

/* the hall */
.corridor { position: absolute; left: 0; top: 0; bottom: 0; overflow: hidden; }
.world { position: absolute; inset: 0; transform-style: preserve-3d; }
.plane { position: absolute; backface-visibility: hidden; transform-style: preserve-3d; }
.plane.wall { background: url("/img/wall-pair.webp") repeat-x / auto 100%; }
.plane.floor { background: #cdc8bd url("/img/floor.webp") repeat left top; }
.plane.ceil { background: #cfcac0 url("/img/ceiling.webp") repeat left top; }
.plane.end { background: url("/img/wall-pair.webp") repeat-x center top / auto 100%; }
.plane .work { position: absolute; display: block; }
.plane a.work:hover::after, .plane a.work:focus-visible::after { filter: brightness(1.9) sepia(.6); }
.plane .work.empty::before { content: ""; position: absolute; inset: 14.33%; background: rgba(143, 138, 128, .18); }
.plane .wlamp { position: absolute; pointer-events: none; }
.plane .wglow { position: absolute; pointer-events: none; background: radial-gradient(ellipse 50% 60% at 50% 0%, rgba(255, 226, 160, .55), rgba(255, 226, 160, 0) 70%); }
.plane .wtag { position: absolute; display: flex; align-items: center; justify-content: center; white-space: nowrap; box-sizing: border-box;
  border: solid transparent; border-image: url("/img/plaque-square.webp") 62 / 1 stretch; background: var(--plate) padding-box;
  color: var(--ink); font-weight: 700; line-height: 1; }
.world .step { transition: transform .66s steps(6, end); }
/* one light for the whole scene: the lamp over the latest work, falling off toward the far end of the hall */
.light { position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: radial-gradient(ellipse 60% 85% at var(--lx, 80%) 20%, rgba(255, 236, 196, .16), rgba(25, 25, 25, 0) 55%, rgba(25, 25, 25, .14) 100%); }

/* the name and the links: the left line of the container */
.intro { position: absolute; z-index: 20; left: var(--side); top: 76px; bottom: var(--s6); width: var(--intro, 480px);
  display: flex; flex-direction: column; align-items: flex-start; }
.name { margin: 0; font-family: var(--display); font-weight: 700; font-size: 80px; line-height: 1; letter-spacing: .02em; color: var(--ink); }
.name span { display: inline-block; padding: 28px var(--s6) 30px; background: rgba(216, 212, 204, .94); box-shadow: 0 3px 0 rgba(25, 25, 25, .18); }
@media (min-width: 1600px) { .name { font-size: 96px; } .name span { padding: 32px var(--s6) 34px; } }
@media (max-width: 1199px) { .name { font-size: 64px; } }
.intro .linkrow { margin-top: auto; width: 100%; display: grid; gap: var(--s3); }
.intro .links .brass { padding: 0 var(--s2); }
.intro .err { margin: var(--s2) 0 0; }

/* the latest work: the right line of the container */
.front { position: absolute; z-index: 20; top: var(--s4); right: var(--side); width: var(--frame); display: flex; flex-direction: column; align-items: center; }
.front::before { content: ""; position: absolute; left: -20%; right: -20%; top: 0; height: 70%; pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 0%, rgba(255, 226, 160, .5), rgba(255, 226, 160, 0) 70%); }
.front .lamp { width: calc(var(--frame) * .5); height: auto; margin-bottom: -4px; position: relative; z-index: 2; }
.front .dust { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 1; image-rendering: pixelated; }
.front .big { width: var(--frame); height: var(--frame); flex: none; z-index: 2; filter: drop-shadow(8px 10px 0 rgba(25, 25, 25, .22)); }
.front .big > img.pic { inset: 14.33%; }
.front .big:hover::after, .front .big:focus-visible::after { filter: brightness(1.25); }
.front .reveal { position: absolute; inset: 14.33%; width: 71.34%; height: 71.34%; image-rendering: pixelated; pointer-events: none; }
.front .big.enter > img.pic { animation: enter .66s steps(6, end) both; }
@keyframes enter { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
.front .label { margin-top: var(--s4); width: max(100%, 400px); z-index: 2; }
.front .label .caption { display: block; margin-top: var(--s1); font-size: 16px; line-height: 1.4; }

.strip { display: none; }

/* phones: name, the frame full width, its plaque, the links, then the hall as a strip of thumbnails */
@media (max-width: 899px) {
  .scene { height: auto; overflow: visible; padding-bottom: var(--s6); background: none; display: flex; flex-direction: column; }
  body.home { background: var(--wall) url("/img/plaster.webp") repeat left top / 600px auto; }
  .corridor, .light { display: none; }
  body.home nav { position: relative; }
  .intro { display: contents; }
  .name { order: 1; padding: var(--s5) var(--side) 0; font-size: 44px; }
  .name span { padding: 0; background: none; box-shadow: none; }
  .front { order: 2; position: relative; top: auto; right: auto; width: auto; padding: var(--s4) var(--side) 0; }
  .front::before { display: none; }
  .front .label { width: 100%; }
  .intro .linkrow { order: 3; margin: var(--s5) var(--side) 0; width: auto; }
  .intro .err { order: 3; margin: var(--s2) var(--side) 0; }
  .strip { order: 4; display: flex; gap: var(--s4); overflow-x: auto; padding: var(--s5) var(--side) var(--s3); scroll-snap-type: x proximity; }
  .strip a { position: relative; flex: none; width: 96px; scroll-snap-align: start; text-decoration: none; text-align: center; font-size: 16px; }
  .strip a .work { width: 89.71px; }
  .strip a span.n { display: block; font-size: 16px; font-weight: 700; margin-top: var(--s2); }
}