@font-face {
  font-family: "Diatype Mono";
  src: local("Courier New");
  font-weight: 500;
}

:root {
  --bar: max(31px, 1.62vw);
  --pad: max(16px, .83vw);
  --ink: #000;
  --paper: #f8f8f5;
  --glass: rgba(255, 255, 255, .86);
  --ease: cubic-bezier(.175, .885, .32, 1);
  font-family: "Diatype Mono", "Courier New", monospace;
  color: var(--ink);
  background: var(--paper);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  cursor: none !important;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--paper);
}

body {
  text-transform: uppercase;
}

button,
a {
  color: inherit;
  font: inherit;
}

button {
  padding: 0;
  border: 0;
  background: transparent;
}

a {
  text-decoration: none;
}

.loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: end;
  padding: max(20px, 1.25vw) var(--pad);
  background:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,.025), transparent 40%),
    var(--paper);
  transition: opacity .65s var(--ease), transform .65s var(--ease), visibility .65s;
}

.loader::after,
.world::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .1;
  background-image:
    radial-gradient(rgba(0,0,0,.28) .45px, transparent .45px);
  background-size: 3px 3px;
  content: "";
}

.loader.is-done {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-100%);
}

.loader h1 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: max(52px, 5.2vw);
  line-height: .85;
  font-weight: 900;
}

.site-header,
.site-footer {
  position: fixed;
  left: 0;
  z-index: 60;
  width: 100%;
  height: var(--bar);
  pointer-events: none;
  background: transparent;
  font-size: max(12px, .625vw);
  line-height: 1;
  backdrop-filter: none;
}

.site-header {
  top: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  gap: 0 max(12px, .83vw);
  padding: 0 var(--pad);
  border-bottom: 0;
}

.header-time {
  grid-column: 1 / 5;
  display: flex;
  gap: max(12px, .625vw);
  white-space: nowrap;
}

.header-nav {
  grid-column: 9 / 13;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: max(10px, .52vw);
  white-space: nowrap;
}

.nav-link,
.site-footer a {
  position: relative;
  display: inline-flex;
  width: fit-content;
  line-height: 1.1;
}

.nav-link::after,
.site-footer a::after {
  position: absolute;
  left: 0;
  bottom: -1px;
  z-index: -1;
  width: 100%;
  height: 1px;
  background: var(--ink);
  content: "";
  transition: height .22s var(--ease);
}

.nav-link:hover,
.site-footer a:hover {
  color: #fff;
}

.nav-link:hover::after,
.site-footer a:hover::after {
  height: 105%;
}

.dot-rule {
  letter-spacing: 2px;
}

.cart-toggle {
  display: block;
  overflow: hidden;
  height: 1.15em;
}

.cart-toggle span {
  display: block;
  transition: transform .35s var(--ease);
}

body.cart-open .cart-toggle span {
  transform: translateY(-100%);
}

.world {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background:
    linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.22)),
    var(--paper);
}

.world::after {
  z-index: 2;
  opacity: .055;
  mix-blend-mode: multiply;
}

.world-canvas,
.paint-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.world-canvas {
  z-index: 1;
}

.paint-canvas {
  z-index: 4;
  touch-action: none;
  transition: opacity .32s var(--ease);
}

.paint-canvas.is-passive {
  pointer-events: none;
}

.enter-zone {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  border: 0;
  opacity: 0;
  transition: opacity .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease);
}

.enter-zone.is-enabled {
  pointer-events: auto;
}

.enter-zone.is-enabled:hover,
.enter-zone.is-hovering {
  opacity: 0;
  background: transparent;
  box-shadow: none;
}

body.entering-room .paint-canvas,
body.entering-room .enter-zone {
  opacity: 0;
  pointer-events: none;
}

.studio-room {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  background: #e8ded5;
  perspective: 1100px;
  transition: opacity .45s var(--ease);
}

body.in-room .studio-room {
  opacity: 1;
  pointer-events: auto;
}

body.in-room .world-canvas,
body.in-room .paint-canvas,
body.in-room .enter-zone {
  pointer-events: none;
}

body.in-room .paint-canvas,
body.in-room .enter-zone {
  opacity: 0;
}

.room-pan {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--room-w, 2600px);
  height: var(--room-h, 1114px);
  transform:
    translate3d(calc(-50% + var(--room-x, 0px)), calc(-50% + var(--room-y, 0px)), 0)
    rotateX(var(--room-tilt-y, 0deg))
    rotateY(var(--room-tilt-x, 0deg));
  transform-origin: 50% 55%;
  transition: transform .08s linear;
  will-change: transform;
}

.room-image-wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.room-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.room-extension {
  display: none;
  position: absolute;
  top: 0;
  width: 560px;
  height: 100%;
  overflow: hidden;
  background:
    linear-gradient(#eadfd6 0 44%, transparent 44%),
    repeating-linear-gradient(90deg, rgba(75, 42, 20, .22) 0 2px, transparent 2px 64px),
    linear-gradient(#eadfd6 0 44%, #b97845 44% 100%);
}

.room-left { left: 0; }
.room-right { right: 0; }

.ext-poster {
  position: absolute;
  border: 8px solid #111;
  background: #fff5e9;
}

.poster-one {
  left: 70px;
  top: 90px;
  width: 185px;
  height: 265px;
  background:
    radial-gradient(circle at 72% 23%, #f7b928 0 15%, transparent 16%),
    radial-gradient(circle at 32% 72%, #123fa3 0 18%, transparent 19%),
    #fff5e9;
}

.poster-two {
  left: 320px;
  top: 140px;
  width: 170px;
  height: 220px;
  background:
    linear-gradient(130deg, transparent 0 43%, #f7a6ba 44% 70%, transparent 71%),
    #fff5e9;
}

.poster-three {
  right: 86px;
  top: 88px;
  width: 190px;
  height: 250px;
  background:
    radial-gradient(circle at 58% 34%, #1646a3 0 16%, transparent 17%),
    linear-gradient(90deg, #fff5e9 0 48%, #f7a6ba 49% 100%);
}

.ext-object {
  position: absolute;
  border: 2px solid rgba(0,0,0,.25);
}

.box-one {
  left: 190px;
  bottom: 112px;
  width: 155px;
  height: 125px;
  transform: skewY(-5deg);
  background: #ead099;
}

.figure-one {
  left: 365px;
  bottom: 170px;
  width: 90px;
  height: 150px;
  border-radius: 45% 45% 15px 15px;
  background:
    radial-gradient(circle at 50% 23%, #f7d7c2 0 23%, transparent 24%),
    linear-gradient(#79c5df 0 55%, #e64b30 56%);
}

.ext-window {
  position: absolute;
  left: 65px;
  top: 48px;
  width: 170px;
  height: 270px;
  border: 12px solid #4d443d;
  background:
    linear-gradient(90deg, transparent 47%, #4d443d 48% 52%, transparent 53%),
    linear-gradient(transparent 47%, #4d443d 48% 52%, transparent 53%),
    linear-gradient(135deg, #f7fbff, #c5dce3);
}

.ext-table {
  position: absolute;
  left: 70px;
  right: 42px;
  bottom: 112px;
  height: 160px;
  transform: skewX(-14deg);
  border: 2px solid rgba(0,0,0,.18);
  background: linear-gradient(145deg, #ead6b2, #c49a68);
}

.ext-toy {
  position: absolute;
  bottom: 225px;
  width: 58px;
  height: 92px;
  border: 2px solid rgba(0,0,0,.25);
  border-radius: 42% 42% 16px 16px;
}

.toy-a {
  left: 185px;
  background:
    radial-gradient(circle at 50% 24%, #f7d7c2 0 24%, transparent 25%),
    linear-gradient(#78c7df 0 55%, #e64b30 56%);
}

.toy-b {
  left: 270px;
  background:
    radial-gradient(circle at 50% 24%, #f7d7c2 0 24%, transparent 25%),
    linear-gradient(#f4c84a 0 55%, #0f6b3e 56%);
}

.toy-c {
  left: 350px;
  background:
    radial-gradient(circle at 50% 24%, #f7d7c2 0 24%, transparent 25%),
    linear-gradient(#f7a6ba 0 55%, #123fa3 56%);
}

.room-hotspot {
  position: absolute;
  z-index: 8;
  border: 0;
  background: transparent;
}

.room-hotspot:hover,
.room-hotspot:focus-visible {
  outline: max(2px, .12vw) solid rgba(0,0,0,.72);
  outline-offset: 0;
  background: rgba(255,255,255,.08);
}

.hs-exterior { left: .945%; top: 15.657%; width: 10.679%; height: 35.886%; }
.hs-visual { left: 15.851%; top: 15.086%; width: 3.671%; height: 18.171%; }
.hs-graphic { left: 44.549%; top: 27.314%; width: 13.014%; height: 30.057%; }
.hs-package { left: 39.266%; top: 66.629%; width: 18.854%; height: 18.971%; }
.hs-contact { left: 78.198%; top: 74.857%; width: 9.066%; height: 12.229%; }

.cart-panel,
.project-panel {
  position: fixed;
  top: var(--bar);
  right: 0;
  z-index: 45;
  width: max(350px, 33.85vw);
  height: calc(100vh - var(--bar));
  border-left: 1px solid var(--ink);
  background: rgba(255,255,255,.74);
  backdrop-filter: blur(16px);
  transform: translateX(101%);
  transition: transform .36s var(--ease);
}

.cart-panel {
  display: grid;
  place-items: center;
}

body.cart-open .cart-panel,
body.project-open .project-panel {
  transform: translateX(0);
}

.cart-content {
  display: grid;
  justify-items: center;
  gap: max(20px, 1vw);
  text-align: center;
}

.cart-content h2,
.cart-content p {
  margin: 0;
}

.cart-content h2 {
  font-size: max(18px, .94vw);
}

.cart-content p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: max(34px, 3.1vw);
  font-weight: 900;
  line-height: .9;
}

.cart-content button {
  min-width: max(150px, 9vw);
  height: max(42px, 2.18vw);
  padding: 0 max(24px, 1.25vw);
  border: 1px solid var(--ink);
  border-radius: 4px;
  color: #fff;
  background: var(--ink);
}

.project-panel {
  z-index: 46;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: max(20px, 1.04vw);
  overflow: auto;
  padding: max(48px, 3vw) var(--pad) max(20px, 1.04vw);
}

.panel-close {
  position: fixed;
  top: calc(var(--bar) + max(12px, .625vw));
  right: var(--pad);
  z-index: 90;
  width: max-content;
  padding: max(4px, .21vw) max(8px, .42vw);
  background: var(--glass);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.panel-copy p {
  margin: 0;
  text-transform: none;
  line-height: 1.28;
  font-size: max(13px, .68vw);
}

.panel-copy p:first-child {
  display: none;
}

.panel-copy h1 {
  margin: 0 0 max(14px, .72vw);
  font-family: Arial, Helvetica, sans-serif;
  font-size: max(50px, 4.9vw);
  font-weight: 900;
  line-height: .82;
  letter-spacing: 0;
}

.project-grid {
  --image-gap: max(10px, .52vw);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: var(--image-gap);
}

.project-grid.is-images {
  display: block;
  column-count: 2;
  column-gap: var(--image-gap);
  line-height: 0;
}

.project-card {
  min-height: 156px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: max(12px, .625vw);
  border: 1px solid var(--ink);
  border-radius: max(4px, .208vw);
  background: rgba(255,255,255,.55);
}

.project-card strong,
.project-card span {
  display: block;
}

.project-card span {
  margin-top: 7px;
  text-transform: none;
  line-height: 1.2;
}

.project-chip {
  width: 18px;
  height: 18px;
  border: 1px solid var(--ink);
  background: var(--chip);
}

.project-image-card {
  display: block;
  width: 100%;
  margin: 0 0 var(--image-gap);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  border: 1px solid var(--ink);
  border-radius: max(4px, .208vw);
  overflow: hidden;
  background: rgba(255,255,255,.55);
}

.project-image-card img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.site-footer {
  bottom: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  gap: 0 max(8px, .83vw);
  padding: 0 var(--pad);
  border-top: 0;
}

.site-footer p {
  grid-column: 1 / 7;
  margin: 0;
  white-space: nowrap;
}

.site-footer nav {
  grid-column: 9 / 13;
  justify-self: end;
  display: flex;
  gap: max(16px, .83vw);
  white-space: nowrap;
}

body.music-on .world-canvas {
  filter: saturate(1.12);
}

.custom-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  width: max(88px, 4.58vw);
  height: max(96px, 5vw);
  pointer-events: none;
  opacity: 0;
  background-image: url("./assets/cursor-folder-open.png?v=2");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 5px 4px rgba(0,0,0,.22));
  transform: translate(-24%, -20%);
}

.custom-cursor.is-visible {
  opacity: 1;
}

.custom-cursor.is-paint {
  width: max(98px, 5.1vw);
  height: max(106px, 5.52vw);
  transform: translate(-22%, -18%) rotate(-6deg);
}

.custom-cursor.is-enter {
  width: max(74px, 3.85vw);
  height: max(112px, 5.83vw);
  filter: drop-shadow(0 7px 7px rgba(201,54,24,.34));
  transform: translate(-42%, -6%) rotate(-3deg);
}

.custom-cursor.is-clickable {
  width: max(74px, 3.85vw);
  height: max(112px, 5.83vw);
  background-image: url("./assets/cursor-folder-point.png?v=2");
  transform: translate(-42%, -6%) rotate(-3deg);
}

.custom-cursor.is-down {
  width: max(72px, 3.75vw);
  height: max(108px, 5.62vw);
  background-image: url("./assets/cursor-folder-point.png?v=2");
  transform: translate(-41%, -4%) rotate(-2deg) scale(.96);
}

.custom-cursor.is-grab {
  transform: translate(0, -12%) rotate(-18deg) scale(.95);
}

@media (max-width: 820px) {
  .site-header,
  .site-footer {
    font-size: 10px;
  }

  .header-time {
    gap: 6px;
  }

  .dot-rule {
    display: none;
  }

  .site-footer p {
    grid-column: 1 / 9;
  }

  .site-footer nav {
    grid-column: 9 / 13;
    gap: 8px;
  }

  .cart-panel,
  .project-panel {
    width: 100%;
    border-left: 0;
  }

  .project-panel {
    top: auto;
    bottom: 0;
    height: min(62vh, 560px);
    border-top: 1px solid var(--ink);
  }

  .panel-close {
    top: calc(38vh + max(12px, .625vw));
  }
}