/* ============================================================
   THE ZERO PAGE. Shared shell for the five doors.

   Local only. `zero/` is not in bin/publish.py's allow list, so none of
   this can reach dist/ by accident.

   Every door obeys the same three rules:
     1. The whole surface is the control. Click anywhere, or press Enter.
     2. The site is reachable with JavaScript off and with motion off.
     3. One bold move per door. Everything around it stays quiet.
   ============================================================ */
:root {
  --bone:   #f4efe6;
  --bone-2: #ede7da;
  --rule:   #d9d1c3;
  --camel:  #9c7b4a;
  --gold:   #c9a268;
  --char:   #26251f;
  --navy:   #13233f;
  --ink:    #0b1626;   /* below navy. Only the zero page goes this deep. */
  --stone:  #8a8377;
  --set:    #4a473f;
}

* { box-sizing: border-box; }

/* The monogram files carry width and height attributes so they reserve space
   and do not shift the layout as they load. Sizing one axis in CSS without
   this makes the other axis keep the attribute value, which stretched the
   mark into a smear on three of the five doors. */
img { max-width: 100%; height: auto; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--navy);
}

body {
  font-family: Lora, Georgia, serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  cursor: pointer;
}

/* the whole page is the door */
.door {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  width: 100%;
  background: none;
  font: inherit;
  color: inherit;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.door:focus-visible { outline: 2px solid var(--gold); outline-offset: -6px; }

/* the small letterspaced label used on every door */
.lab {
  font-family: Poppins, system-ui, sans-serif;
  font-weight: 400;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0;
}

.display {
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0;
  font-size: clamp(2rem, 1.1rem + 4.2vw, 4.25rem);
}

.display em { font-style: italic; }

/* ENTER, bottom centre, on every door */
.enter {
  position: fixed;
  left: 50%;
  bottom: clamp(1.75rem, 4vh, 3rem);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: inherit;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.9s ease 0.1s;
}

.enter.on { opacity: 0.9; }
.enter:hover { opacity: 1; }
.enter:hover .enter__r { width: 4.5rem; }

.enter__r {
  display: block;
  width: 2.25rem;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
  transition: width 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* No JavaScript, no motion, no problem: the link is in the markup and the
   noscript rule below makes every door legible as a still. */
.noscript-safe { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .enter { opacity: 0.9; }
}