@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600&display=swap");

:root {
  color-scheme: light;
  --lime: #c8ff2d;
  --pink: #edb9c3;
  --charcoal: #1c1d1d;
  --white: #f6f4eb;
  --gray: #767873;
  --decisive: cubic-bezier(0.2, 0, 0, 1);
  --quick: 220ms;
  --standard: 480ms;
  --slow: 800ms;
}

* { box-sizing: border-box; }

html {
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--white);
  color: var(--charcoal);
  font-family: "Inter", sans-serif;
}

a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.skip-link {
  position: fixed;
  top: -5rem;
  left: 1rem;
  z-index: 100;
  padding: .8rem 1rem;
  background: var(--lime);
  color: var(--charcoal);
}

.skip-link:focus { top: 1rem; }

.concept-label {
  position: fixed;
  right: .8rem;
  bottom: .8rem;
  z-index: 70;
  display: grid;
  gap: .1rem;
  min-width: 16rem;
  padding: .75rem .9rem;
  border: 1px solid var(--charcoal);
  background: rgba(246,244,235,.92);
  font: 500 .57rem/1.35 "IBM Plex Mono", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  transform: rotate(1deg);
  backdrop-filter: blur(10px);
}

.concept-label strong { color: #536b00; }
.concept-label a { margin-top: .25rem; text-underline-offset: .18rem; }

.atlas-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 5.4rem;
  padding: 1rem clamp(1rem, 3vw, 3rem);
  border-bottom: 1px solid rgba(28,29,29,.28);
}

.brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: fit-content;
  font: 600 .76rem "IBM Plex Mono", monospace;
  letter-spacing: .06em;
  text-decoration: none;
}

.brand > span {
  display: grid;
  width: 2.5rem;
  aspect-ratio: 1;
  place-items: center;
  background: var(--charcoal);
  color: var(--lime);
}

.sheet-code {
  color: #525551;
  font: 500 .56rem "IBM Plex Mono", monospace;
  letter-spacing: .12em;
}

.header-call {
  justify-self: end;
  display: grid;
  gap: .15rem;
  font: 600 .76rem "IBM Plex Mono", monospace;
  text-align: right;
  text-decoration: none;
}

.header-call span {
  font-size: .53rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hero {
  position: relative;
  min-height: 118svh;
  padding: 8rem clamp(1rem, 3vw, 3rem) 4rem;
  overflow: hidden;
  background:
    linear-gradient(rgba(28,29,29,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28,29,29,.07) 1px, transparent 1px),
    var(--pink);
  background-size: 40px 40px;
}

.blueprint-field {
  position: absolute;
  z-index: 2;
  inset: 5.5rem 0 0;
  overflow: hidden;
  background: var(--lime);
  touch-action: none;
  cursor: crosshair;
}

.revealed-field {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  overflow: hidden;
  color: rgba(28,29,29,.9);
  font: 600 clamp(5rem, 15vw, 15rem)/.7 "Archivo Black", sans-serif;
  letter-spacing: -.08em;
  writing-mode: vertical-rl;
}

.revealed-field span:nth-child(2) {
  color: transparent;
  -webkit-text-stroke: 2px var(--charcoal);
}

#eraseCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.eraser-cursor {
  position: absolute;
  z-index: 5;
  width: 7rem;
  aspect-ratio: 1;
  border: 1px solid var(--charcoal);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity var(--quick) var(--decisive), width var(--quick) var(--decisive);
}

.blueprint-field.is-dragging .eraser-cursor {
  width: 9rem;
}

.erase-instruction {
  position: absolute;
  z-index: 6;
  right: 1rem;
  bottom: 1rem;
  margin: 0;
  padding: .5rem .65rem;
  background: var(--charcoal);
  color: var(--white);
  font: 500 .52rem "IBM Plex Mono", monospace;
  letter-spacing: .1em;
}

.hero-copy {
  position: relative;
  z-index: 12;
  max-width: 76rem;
  pointer-events: none;
}

.eyebrow,
.exploded-copy > span,
.record > header > span {
  font: 600 .58rem "IBM Plex Mono", monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.eyebrow { margin: 0 0 2rem; }

h1, h2 {
  font-family: "Archivo Black", sans-serif;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(7rem, 19vw, 20rem);
  line-height: .55;
  letter-spacing: -.105em;
}

h1 span { display: block; }

h1 .cut {
  margin-left: 8%;
  color: var(--white);
  -webkit-text-stroke: 2px var(--charcoal);
  clip-path: polygon(0 0, 100% 0, 100% 29%, 76% 29%, 76% 49%, 100% 49%, 100% 100%, 0 100%, 0 72%, 22% 72%, 22% 50%, 0 50%);
}

.hero-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 62rem;
  margin-top: 2.7rem;
  border: 1px solid var(--charcoal);
  background: rgba(246,244,235,.88);
  pointer-events: auto;
}

.hero-meta > div {
  display: grid;
  gap: .45rem;
  min-height: 5rem;
  padding: .9rem 1rem;
  border-right: 1px solid var(--charcoal);
}

.hero-meta > div:last-child { border-right: 0; }

.hero-meta span {
  color: var(--gray);
  font: 500 .52rem "IBM Plex Mono", monospace;
  letter-spacing: .12em;
}

.hero-meta strong {
  font: 600 .72rem "IBM Plex Mono", monospace;
}

.film-window {
  position: absolute;
  z-index: 16;
  right: 4%;
  bottom: 6%;
  width: min(34rem, 40vw);
  aspect-ratio: 1.3;
  overflow: hidden;
  border: .45rem solid var(--charcoal);
  background: var(--pink);
  box-shadow: -1rem 1rem 0 var(--lime);
  transform: rotate(-2deg);
}

.film-window video,
.film-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.film-window video {
  z-index: 2;
  object-fit: cover;
  opacity: 0;
  filter: saturate(.8) contrast(1.08);
  transition: opacity var(--slow) var(--decisive);
}

.film-window video.is-ready { opacity: .9; }

.film-fallback {
  z-index: 1;
  overflow: hidden;
  background: var(--pink);
  perspective: 700px;
}

.plan-layer {
  position: absolute;
  inset: 13%;
  border: 2px solid var(--charcoal);
  background:
    linear-gradient(90deg, transparent 28%, var(--charcoal) 28% 29%, transparent 29% 64%, var(--charcoal) 64% 65%, transparent 65%),
    linear-gradient(transparent 34%, var(--charcoal) 34% 35%, transparent 35% 68%, var(--charcoal) 68% 69%, transparent 69%);
}

.layer-one { transform: translate3d(-2rem, -2rem, -4rem) rotate(-5deg); opacity: .35; }
.layer-two { transform: translate3d(0, 0, 0) rotate(2deg); opacity: .7; }
.layer-three { transform: translate3d(2rem, 2rem, 4rem) rotate(-1deg); }

.survey-cross {
  position: absolute;
  z-index: 4;
  width: 4rem;
  aspect-ratio: 1;
  border: 1px solid var(--charcoal);
  border-radius: 50%;
  animation: cross-pulse 2.7s var(--decisive) infinite;
}

.survey-cross::before,
.survey-cross::after {
  content: "";
  position: absolute;
  background: var(--charcoal);
}

.survey-cross::before { top: 50%; left: -30%; width: 160%; height: 1px; }
.survey-cross::after { top: -30%; left: 50%; width: 1px; height: 160%; }
.cross-one { top: 20%; right: 19%; }
.cross-two { left: 17%; bottom: 15%; animation-delay: .6s; }

.film-caption {
  position: absolute;
  z-index: 7;
  inset: auto 0 0;
  display: flex;
  justify-content: space-between;
  padding: .72rem;
  background: rgba(28,29,29,.86);
  color: var(--white);
  font: 500 .52rem "IBM Plex Mono", monospace;
  letter-spacing: .1em;
}

.film-caption span { color: var(--lime); }

#filmToggle {
  position: absolute;
  z-index: 8;
  top: .65rem;
  right: .65rem;
  padding: .58rem .7rem;
  border: 1px solid var(--charcoal);
  background: rgba(246,244,235,.85);
  color: var(--charcoal);
  font: 500 .52rem "IBM Plex Mono", monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}

.call-block {
  position: absolute;
  z-index: 18;
  left: 3%;
  bottom: 7%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .3rem 2rem;
  min-width: min(32rem, 44vw);
  padding: 1rem;
  border: 1px solid var(--charcoal);
  background: var(--lime);
  text-decoration: none;
  transform: rotate(1.4deg);
  transition: transform var(--standard) var(--decisive), box-shadow var(--standard) var(--decisive);
}

.call-block:hover,
.call-block:focus-visible {
  box-shadow: .8rem .8rem 0 var(--charcoal);
  transform: translateY(-5px) rotate(0);
}

.call-block span {
  grid-column: 1;
  font: 600 .54rem "IBM Plex Mono", monospace;
  letter-spacing: .12em;
}

.call-block strong {
  font: 600 clamp(1.15rem, 3vw, 2.7rem) "IBM Plex Mono", monospace;
  letter-spacing: -.05em;
}

.call-block i {
  grid-row: 1 / 3;
  grid-column: 2;
  align-self: center;
  font-size: 2rem;
  font-style: normal;
}

.exploded-section {
  position: relative;
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  min-height: 48rem;
  overflow: hidden;
  background: var(--charcoal);
  color: var(--white);
}

.section-index {
  position: absolute;
  z-index: 6;
  top: 1rem;
  left: 1rem;
  color: var(--lime);
  font: 500 .53rem "IBM Plex Mono", monospace;
  letter-spacing: .12em;
}

.exploded-copy {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 7vw, 7rem);
}

.exploded-copy > span { color: var(--lime); }

.exploded-copy h2,
.record > header h2 {
  margin: 1rem 0 1.5rem;
  font-size: clamp(3.5rem, 7vw, 8rem);
  line-height: .73;
  letter-spacing: -.075em;
}

.exploded-copy p {
  max-width: 25rem;
  color: #b5b4ad;
  font-size: .9rem;
  line-height: 1.7;
}

.exploded-model {
  position: relative;
  min-height: 42rem;
  perspective: 1000px;
  transform-style: preserve-3d;
  transition: transform var(--slow) var(--decisive);
}

.model-sheet {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(30rem, 65%);
  aspect-ratio: 1.25;
  border: 2px solid var(--white);
  background:
    linear-gradient(90deg, transparent 25%, currentColor 25% 25.5%, transparent 25.5% 69%, currentColor 69% 69.5%, transparent 69.5%),
    linear-gradient(transparent 36%, currentColor 36% 36.5%, transparent 36.5% 72%, currentColor 72% 72.5%, transparent 72.5%);
  transform-style: preserve-3d;
}

.sheet-back {
  color: rgba(237,185,195,.7);
  background-color: rgba(237,185,195,.12);
  transform: translate(-61%, -68%) rotateX(63deg) rotateZ(-10deg) translateZ(-8rem);
  animation: layer-float 5s ease-in-out infinite alternate;
}

.sheet-mid {
  color: rgba(200,255,45,.7);
  background-color: rgba(200,255,45,.1);
  transform: translate(-51%, -53%) rotateX(63deg) rotateZ(-4deg);
  animation: layer-float 5s ease-in-out .7s infinite alternate;
}

.sheet-front {
  color: var(--white);
  background-color: rgba(246,244,235,.06);
  transform: translate(-41%, -38%) rotateX(63deg) rotateZ(2deg) translateZ(8rem);
  animation: layer-float 5s ease-in-out 1.4s infinite alternate;
}

.sheet-front b {
  position: absolute;
  top: 1rem;
  left: 1rem;
  color: var(--lime);
  font: 600 2.8rem "Archivo Black", sans-serif;
}

.void {
  position: absolute;
  border: 1px solid var(--pink);
  background: var(--charcoal);
}

.void-a { top: 21%; right: 14%; width: 22%; aspect-ratio: 1; border-radius: 50%; }
.void-b { left: 14%; bottom: 14%; width: 34%; height: 21%; }

.survey-pin {
  position: absolute;
  z-index: 8;
  width: .75rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 .5rem rgba(200,255,45,.12);
  animation: pin-pulse 2.2s ease-in-out infinite;
}

.pin-a { top: 27%; right: 29%; }
.pin-b { top: 58%; left: 28%; animation-delay: .4s; }
.pin-c { right: 19%; bottom: 17%; animation-delay: .8s; }

.model-shadow {
  position: absolute;
  left: 23%;
  right: 11%;
  bottom: 12%;
  height: 15%;
  border-radius: 50%;
  background: rgba(0,0,0,.7);
  filter: blur(25px);
}

.record {
  padding: clamp(4rem, 8vw, 8rem) clamp(1rem, 4vw, 4rem);
  background:
    linear-gradient(rgba(28,29,29,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28,29,29,.08) 1px, transparent 1px),
    var(--white);
  background-size: 46px 46px;
}

.record > header {
  display: grid;
  grid-template-columns: .4fr 1fr;
  align-items: start;
  margin-bottom: 3rem;
}

.record > header > span { color: var(--gray); }
.record > header h2 { margin-top: 0; }

.record-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

.record-grid article {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 20rem;
  padding: clamp(1.2rem, 3vw, 2.5rem);
  overflow: hidden;
  border: 1px solid var(--charcoal);
  background: var(--pink);
  transition: transform var(--standard) var(--decisive), box-shadow var(--standard) var(--decisive);
}

.record-grid article:hover {
  z-index: 5;
  box-shadow: .8rem .8rem 0 var(--charcoal);
  transform: translateY(-7px) rotate(0);
}

.record-grid article > span {
  font: 600 .54rem "IBM Plex Mono", monospace;
  letter-spacing: .12em;
}

.record-grid article strong,
.record-grid article > a {
  font: 600 clamp(2rem, 4.6vw, 5.2rem)/.78 "Archivo Black", sans-serif;
  letter-spacing: -.06em;
  text-decoration: none;
}

.record-grid article > i {
  position: absolute;
  right: 1rem;
  bottom: .2rem;
  color: rgba(28,29,29,.1);
  font: 600 8rem "Archivo Black", sans-serif;
}

.record-grid article p {
  margin: 0;
  font: 500 .65rem "IBM Plex Mono", monospace;
}

.owner-card { grid-column: span 7; transform: rotate(-1deg); }
.rating-card { grid-column: span 5; background: var(--lime) !important; transform: rotate(1.5deg); }
.place-card { grid-column: span 5; background: var(--charcoal) !important; color: var(--white); transform: rotate(1deg); }
.phone-card { grid-column: span 7; background: var(--white) !important; transform: rotate(-1.5deg); }

.rating-orbit {
  position: absolute;
  top: 18%;
  right: 10%;
  width: 9rem;
  aspect-ratio: 1;
  border: .8rem dotted var(--charcoal);
  border-radius: 50%;
  animation: orbit-turn 10s linear infinite;
}

.coordinates {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  color: var(--lime);
}

.contact {
  position: relative;
  min-height: 52rem;
  padding: clamp(5rem, 9vw, 9rem) clamp(1rem, 6vw, 6rem);
  overflow: hidden;
  background: var(--lime);
}

.contact > p {
  position: relative;
  z-index: 5;
  margin: 0;
  font: 600 .58rem "IBM Plex Mono", monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.contact h2 {
  position: relative;
  z-index: 5;
  margin: 1.4rem 0 2rem;
  font-size: clamp(6rem, 17vw, 18rem);
  line-height: .56;
  letter-spacing: -.1em;
}

.contact > a {
  position: relative;
  z-index: 7;
  display: inline-grid;
  gap: .35rem;
  min-width: min(34rem, 100%);
  padding: 1rem 1.2rem;
  border: 1px solid var(--charcoal);
  background: var(--white);
  text-decoration: none;
  transition: transform var(--standard) var(--decisive), box-shadow var(--standard) var(--decisive);
}

.contact > a:hover,
.contact > a:focus-visible {
  box-shadow: .8rem .8rem 0 var(--charcoal);
  transform: translateY(-6px);
}

.contact > a span {
  font: 600 .56rem "IBM Plex Mono", monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.contact > a strong {
  font: 600 clamp(1.2rem, 4vw, 3.2rem) "IBM Plex Mono", monospace;
}

.contact-plan {
  position: absolute;
  inset: 8% 3%;
  transform: rotate(-5deg);
}

.wall {
  position: absolute;
  background: rgba(28,29,29,.17);
}

.wall-a { top: 15%; left: 4%; width: 76%; height: 3rem; }
.wall-b { top: 18%; left: 42%; width: 3rem; height: 62%; }
.wall-c { right: 3%; bottom: 18%; width: 51%; height: 3rem; }
.wall-d { top: 38%; left: 12%; width: 3rem; height: 45%; }

.contact-void {
  position: absolute;
  top: 31%;
  right: 16%;
  width: 22rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 3rem rgba(28,29,29,.08), 0 0 0 6rem rgba(28,29,29,.04);
  animation: void-shift 5s ease-in-out infinite alternate;
}

footer {
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  gap: 2rem;
  padding: 2.2rem clamp(1rem, 3vw, 3rem) 5rem;
  background: var(--charcoal);
  color: var(--white);
  font: 500 .61rem/1.6 "IBM Plex Mono", monospace;
}

footer div { display: grid; gap: .2rem; }
footer span, footer p { color: #aaa9a2; }
footer p { max-width: 42rem; margin: 0; }

@keyframes cross-pulse {
  50% { transform: scale(.75); opacity: .45; }
}

@keyframes layer-float {
  to { translate: 0 -1.2rem; }
}

@keyframes pin-pulse {
  50% { box-shadow: 0 0 0 1.1rem rgba(200,255,45,0); }
}

@keyframes orbit-turn {
  to { rotate: 360deg; }
}

@keyframes void-shift {
  to { transform: translate(-2rem, 1rem) scale(.88); }
}

@media (max-width: 960px) {
  .hero { min-height: 130svh; }
  .film-window { width: min(32rem, 52vw); }
  .exploded-section { grid-template-columns: 1fr; }
  .exploded-model { min-height: 39rem; }
  footer { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .concept-label {
    right: .5rem;
    bottom: .5rem;
    left: .5rem;
    min-width: 0;
    grid-template-columns: auto 1fr auto;
    align-items: center;
  }
  .concept-label > span { display: none; }
  .atlas-header { grid-template-columns: 1fr auto; }
  .sheet-code { display: none; }
  .header-call span { display: none; }
  .hero { min-height: 105rem; padding-inline: 1rem; }
  h1 { font-size: clamp(6rem, 28vw, 9rem); line-height: .62; }
  h1 .cut { margin-left: 0; }
  .hero-meta { grid-template-columns: 1fr; width: 70%; }
  .hero-meta > div { min-height: 4.2rem; border-right: 0; border-bottom: 1px solid var(--charcoal); }
  .hero-meta > div:last-child { border-bottom: 0; }
  .film-window { right: 1rem; bottom: 16rem; width: calc(100% - 2rem); }
  .call-block { left: 1rem; bottom: 2rem; min-width: 0; width: calc(100% - 2rem); }
  .exploded-copy { padding: 5rem 1rem 2rem; }
  .exploded-model { min-height: 31rem; }
  .model-sheet { width: 72%; }
  .record { padding: 5rem 1rem; }
  .record > header { grid-template-columns: 1fr; gap: 1rem; }
  .record-grid article { grid-column: 1 / -1; min-height: 17rem; }
  .contact { min-height: 44rem; padding: 5rem 1rem 8rem; }
  .contact h2 { font-size: clamp(5.5rem, 26vw, 8rem); }
  .contact-void { right: -30%; width: 16rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
  .film-window video { display: none; }
}