:root {
  --red: #dd2828;
  --fg: var(--red);
  --fg-strong: var(--red);
  --bg: #ffffff;
  --dim: rgba(221, 40, 40, 0.22);
  --ink: #000;                          /* pure black text */
  --stroke: 1px;
  --cell: 1.2vmin;
  --gap: 4.8vmin;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

button {
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  font-weight: 300;
  cursor: pointer;
  padding: 0;
}

/* === Stage === */
.stage {
  position: relative;
  height: 100vh;
  width: 100vw;
  display: grid;
  place-items: center;
}

/* === Viewfinder === */
.viewfinder {
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: none;
  pointer-events: none;
  background: var(--bg);
}
.viewfinder.is-visible { opacity: 1; }
.viewfinder-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  background: var(--bg);
}

/* === Typographic labels === */
.wordmark,
.hover-title {
  position: fixed;
  margin: 0;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  z-index: 5;
  pointer-events: none;
  user-select: none;
}
.wordmark { top: 3vh; left: 3.5vw; }
.hover-title {
  top: 3vh;
  right: 3.5vw;
  text-align: right;
  opacity: 0;
  transition: none;
}
.hover-title.is-visible { opacity: 1; }

/* === Histogram (black panel, white waves) === */
.histogram {
  position: fixed;
  bottom: 3vh;
  right: 3.5vw;
  width: 160px;
  height: 44px;
  z-index: 5;
  opacity: 0;
  transition: none;
  pointer-events: none;
  image-rendering: crisp-edges;
}
.histogram.is-visible { opacity: 1; }

/* === Grid === */
.grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, var(--cell));
  grid-template-rows: repeat(5, var(--cell));
  gap: var(--gap);
  color: var(--fg);
  z-index: 1;
}

/* === Squares === */
.sq {
  width: 100%;
  height: 100%;
  border: var(--stroke) solid var(--fg);
  background: transparent;
  position: relative;
}
.sq:hover,
.sq:focus-visible {
  outline: none;
  cursor: pointer;
}
.sq.is-active {
  opacity: 0;          /* hide small square at the selected position */
}
.sq.is-inactive {
  border-color: var(--dim);
  cursor: pointer;          /* still selectable so the ring can land on it */
}

/* === AF selection cursor — bigger square that tracks the selected AF point === */
.af-cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 2.6vmin;
  height: 2.6vmin;
  margin-left: -1.3vmin;
  margin-top: -1.3vmin;
  border: 1.5px solid var(--red);
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transform: translate(0, 0);
  /* Mouse-driven (default): near-instant — cursor tracks the pointer with no lag. */
  transition: transform 35ms linear, opacity 35ms linear;
  will-change: transform;
}
.af-cursor.is-visible { opacity: 1; }
/* Keyboard-driven: a brief glide between AF points so single arrow presses feel
   like a real DSLR joystick rather than a teleport. */
.af-cursor.glide {
  transition: transform 110ms cubic-bezier(.2, .8, .25, 1), opacity 60ms linear;
}

/* === Slot positions === */
.slot-N { grid-column: 4; grid-row: 1; }
.slot-S { grid-column: 4; grid-row: 5; }
.slot-L { grid-column: 1; grid-row: 3; }
.slot-R { grid-column: 7; grid-row: 3; }

.slot-A { grid-column: 2; grid-row: 2; }
.slot-B { grid-column: 3; grid-row: 2; }
.slot-C { grid-column: 4; grid-row: 2; }
.slot-D { grid-column: 5; grid-row: 2; }
.slot-E { grid-column: 6; grid-row: 2; }

.slot-F { grid-column: 2; grid-row: 3; }
.slot-G { grid-column: 3; grid-row: 3; }
.slot-center { grid-column: 4; grid-row: 3; }
.slot-H { grid-column: 5; grid-row: 3; }
.slot-I { grid-column: 6; grid-row: 3; }

.slot-J { grid-column: 2; grid-row: 4; }
.slot-K { grid-column: 3; grid-row: 4; }
.slot-M { grid-column: 4; grid-row: 4; }
.slot-O { grid-column: 5; grid-row: 4; }
.slot-P { grid-column: 6; grid-row: 4; }

/* === Gallery overlay === */
.gallery {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 100;
  overflow-y: auto;
  overflow-x: hidden;
  display: none;
  -webkit-overflow-scrolling: touch;
}
.gallery.is-open { display: block; }

.gallery-header {
  position: sticky;
  top: 0;
  background: var(--bg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3vh 3.5vw;
  z-index: 2;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.gallery-title {
  margin: 0;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
}
.gallery-close {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.gallery-close:hover { color: var(--red); }

.gallery-images {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4vh 0 8vh;
  gap: 4vh;
}
.gallery-images img {
  display: block;
  max-width: min(85vw, 720px);
  width: auto;
  height: auto;
  max-height: 90vh;
  object-fit: contain;
}

@media (max-width: 600px) {
  :root { --cell: 2vmin; --gap: 7vmin; }
  .gallery-images img { max-width: 92vw; }
  .wordmark, .hover-title, .gallery-title, .gallery-close { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}