/* ─── RESET ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }

:root {
  --bg:       #080808;
  --fg:       #f0ece4;
  --fg-dim:   rgba(240,236,228,0.55);
  --fg-faint: rgba(240,236,228,0.25);
  --accent:   #c9a961;
  --line:     rgba(240,236,228,0.1);
  --ff-serif: 'Fraunces', 'Georgia', serif;
  --ff-mono:  'JetBrains Mono', ui-monospace, monospace;
  --vh100: 100vh;  /* overridden by JS on mobile */
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--ff-mono);
  font-size: 11px;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: #000; }
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-thumb { background: #222; }

/* ─── NAV ────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  /* No mix-blend-mode — unreliable on Android WebViews */
  color: rgba(240,236,228,0.9);
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
  pointer-events: none;
  letter-spacing: 0.2em;
  font-size: 11px;
}

.nav__right {
  display: flex;
  gap: 16px;
  opacity: 0.7;
  letter-spacing: 0.14em;
}

.nav__coord { display: none; }
@media (min-width: 600px) { .nav__coord { display: inline; } }

/* ─── HERO ───────────────────────────────────────── */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 70%;
  filter: brightness(0.78) contrast(1.06) saturate(0.88);
  animation: zoomIn 12s ease-out both;
}

@keyframes zoomIn {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(8,8,8,0.2) 0%,
    rgba(8,8,8,0)   40%,
    rgba(8,8,8,0.72) 100%
  );
  pointer-events: none;
}

.hero__foot {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.hero__caption {
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  font-size: 10px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.7);
}

.hero__down {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-dim);
  transition: color 0.2s, transform 0.3s;
  pointer-events: all;
}
.hero__down:hover { color: var(--fg); transform: translateY(4px); }

/* ─── SYSTEMS — desktop: 3 columns × 2 rows ───────── */
.systems {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: 50vh;
  grid-auto-rows: 50svh;
  min-height: 500px;
}

/* ─── SINGLE SYSTEM TILE ────────────────────────── */
.sys {
  position: relative;
  /* Explicit height so absolutely-positioned children have a reference */
  min-height: 0;         /* grid item — let the track set the height */
  overflow: hidden;
  border-right: 1px solid var(--line);
  display: block;
}
.sys:last-child { border-right: none; }

/* Bottom row: strip right-border on the third child of row 2, add bottom borders */
.sys { border-bottom: 1px solid var(--line); }
.sys:nth-child(n+4) { border-bottom: none; }
.sys:nth-child(3n) { border-right: none; }

.sys__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.62) contrast(1.05) grayscale(0.15);
  transform: scale(1.03);
  transition: transform 1.2s cubic-bezier(0.2,0.8,0.2,1),
              filter    0.8s ease;
  will-change: transform;
}

.sys:hover .sys__img {
  transform: scale(1.09);
  filter: brightness(0.8) contrast(1.08) grayscale(0);
}


.sys__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    165deg,
    rgba(8,8,8,0.05) 0%,
    rgba(8,8,8,0.55) 55%,
    rgba(8,8,8,0.9)  100%
  );
}

.sys__label {
  position: absolute;
  bottom: 32px;
  left: 28px;
  right: 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}

.sys__num {
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--fg-faint);
}

.sys__name {
  font-family: var(--ff-serif);
  font-weight: 300;
  font-size: clamp(1.6rem, 2.4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--fg);
  transition: color 0.3s;
}

.sys:hover .sys__name { color: var(--accent); }

.sys__url {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--fg-dim);
  margin-top: 4px;
  transition: color 0.25s;
}

.sys:hover .sys__url { color: var(--fg); }
.sys:hover .sys__url svg { transform: translate(2px,-2px); }
.sys__url svg { transition: transform 0.3s; }

/* ─── FOOTER ─────────────────────────────────────── */
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-top: 1px solid var(--line);
  letter-spacing: 0.18em;
  color: var(--fg-faint);
  font-size: 10px;
}

/* ─── TABLET ─────────────────────────────────────── */
@media (max-width: 1024px) and (min-width: 601px) {
  .systems {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 50vh;
    grid-auto-rows: 50svh;
    height: auto;
  }
  .sys { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .sys:nth-child(2n) { border-right: none; }
  .sys:nth-child(n+5) { border-bottom: none; }
  .sys:nth-child(3n) { border-right: 1px solid var(--line); }
}

/* ─── MOBILE ─────────────────────────────────────── */
@media (max-width: 600px) {
  .systems {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    height: auto;
  }

  /* Each tile is explicitly tall — don't rely on grid track for abs positioning */
  .sys {
    height: 60vh;
    height: 60svh;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }

  .sys:last-child { border-bottom: none; }

  .sys__label {
    bottom: 24px;
    left: 20px;
    right: 20px;
  }

  .sys__name { font-size: clamp(1.8rem, 7vw, 2.6rem); }

  .hero__caption { font-size: 9px; letter-spacing: 0.12em; }

  .footer { padding: 16px 20px; flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ─── PER-IMAGE POSITIONING ─────────────────────── */
/* Map screenshot: skip phone status bar, centre on map content */
.sys__img--map    { object-position: center 28%; }

/* ─── REDUCED MOTION ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero__img { animation: none; transform: scale(1); }
  .sys__img  { transition: none; transform: scale(1); }
  .hero__down, .sys__url svg { transition: none; }
}

/* ─── ANDROID / LOW-END FALLBACKS ───────────────── */
/* Ensure tiles are never zero-height if svh unsupported */
.sys { min-height: 300px; }