/* Visioner Labs. Black, white and the red record square of the logo. The colour comes from the machine-vision views of the city. */
:root {
  --bg: #050506; --ink: #f3f2ee; --dim: #a5a5ab; --line: rgba(243, 242, 238, .2); --red: #ff2d2d;
  --display: 'Michroma', 'Eurostile', 'Bank Gothic', 'Century Gothic', sans-serif;
  --body: 'Hanken Grotesk', 'Segoe UI', system-ui, sans-serif;
  --frame: clamp(10px, 1.6vw, 22px);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.6 var(--body); overflow-x: hidden; }
h1, h2, p, dl, dd, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2 { font-family: var(--display); font-weight: 400; line-height: 1.22; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: clamp(1.75rem, 3.5vw, 3.1rem); }
h2 { font-size: clamp(1.35rem, 2.3vw, 2.05rem); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 60; background: var(--ink); color: var(--bg); padding: 10px 14px; }
.skip:focus { top: 12px; }

#world { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
#marks { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
#marks rect { fill: none; stroke: #fff; stroke-width: 1.2; }
#marks line { stroke: #fff; stroke-width: 1; }
#marks text { font: 500 12.5px var(--body); fill: #fff; paint-order: stroke; stroke: rgba(0, 0, 0, .85); stroke-width: 3.5px; }
#marks .t2 { font-weight: 400; fill: #d8d8d2; }
body.no-gl #world { background: radial-gradient(ellipse at 70% 40%, #17181d, #050506 70%); }

/* viewfinder: the four corners and record square of the logo, around the screen */
.finder { position: fixed; inset: var(--frame); z-index: 12; pointer-events: none; }
.finder .c { position: absolute; width: clamp(18px, 2.4vw, 34px); height: clamp(18px, 2.4vw, 34px); border: 2px solid var(--ink); }
.finder .tl { left: 0; top: 0; border-right: 0; border-bottom: 0; border-color: transparent; }
.finder .tr { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.finder .bl { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.finder .br { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.finder .rec { position: absolute; left: 0; top: 0; width: clamp(9px, 1vw, 14px); height: clamp(9px, 1vw, 14px); background: var(--red); }
.hud { position: fixed; z-index: 3; left: calc(var(--frame) + clamp(30px, 3.4vw, 52px)); bottom: calc(var(--frame) + 2px); display: flex; gap: 22px; font-size: .82rem; color: #c9c9cf; font-variant-numeric: tabular-nums; pointer-events: none; text-shadow: 0 0 6px #000, 0 0 2px #000; }
.hud #hud-mode { color: var(--ink); font-weight: 500; }

.top { position: fixed; z-index: 10; inset: 0 0 auto 0; display: flex; align-items: center; justify-content: space-between; padding: calc(var(--frame) + 10px) calc(var(--frame) + clamp(22px, 2.6vw, 40px)) 16px;
  background: linear-gradient(rgba(5, 5, 6, .85), rgba(5, 5, 6, 0)); }
.brand img { height: 26px; width: auto; }
.top nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 30px); font-size: .95rem; }
.top nav a { text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; }
.top nav a:hover { border-bottom-color: currentColor; }
.top nav a.pill { border: 1px solid var(--ink); padding: 6px 16px; }
.top nav a.pill:hover { background: var(--ink); color: var(--bg); }

main { position: relative; z-index: 2; pointer-events: none; }
.act { min-height: 135vh; display: flex; flex-direction: column; justify-content: center; padding: 16vh calc(var(--frame) + clamp(22px, 4vw, 72px)); }
.act:first-child { min-height: 118vh; justify-content: flex-start; padding-top: 30vh; }
.card { pointer-events: auto; width: min(31rem, 100%); padding: 26px 28px 28px; background: rgba(5, 5, 6, .72); border-left: 2px solid var(--ink); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); }
.card.first { background: linear-gradient(90deg, rgba(5, 5, 6, .78), rgba(5, 5, 6, .35)); border-left-color: var(--red); width: min(40rem, 100%); }
.card.wide { width: min(46rem, 100%); }
.card p { margin-top: 16px; color: #d6d5d0; max-width: 34rem; }
.acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 9px 20px; font: 500 1rem/1.2 var(--body); text-decoration: none; cursor: pointer; color: var(--ink); background: transparent; border: 1px solid var(--ink); border-radius: 0; transition: background .18s, color .18s; }
.btn:hover { background: var(--ink); color: var(--bg); }
.btn.solid { background: var(--ink); color: var(--bg); }
.btn.solid:hover { background: var(--red); border-color: var(--red); color: #fff; }
.btn[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #fff; }
.state { display: inline-block; margin-top: 20px; padding: 3px 11px 4px; font-size: .8rem; border: 1px solid var(--line); color: var(--dim); }
.state.live { border-color: var(--red); color: #ff8d8d; }

.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.facts dt { font-size: .8rem; color: var(--dim); }
.facts dd { font: 400 1.15rem/1.3 var(--display); font-variant-numeric: tabular-nums; margin-top: 4px; }

.landuse { display: flex; height: 14px; margin-top: 22px; background: #1a1a1e; }
.landuse i { display: block; height: 100%; }
.legend { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; margin-top: 12px; font-size: .92rem; font-variant-numeric: tabular-nums; }
.legend li { display: flex; align-items: center; gap: 9px; }
.legend b { width: 11px; height: 11px; flex: none; }
.legend span { margin-left: auto; color: var(--dim); }

.tools { display: grid; gap: 16px; margin-top: 22px; }
.sun { display: grid; gap: 6px; font-size: .95rem; }
.sun span { display: flex; justify-content: space-between; }
.sun output { font-weight: 600; font-variant-numeric: tabular-nums; }
.sun input { width: 100%; accent-color: var(--red); height: 28px; margin: 0; }
.card p.result { margin-top: 14px; color: var(--ink); font-weight: 500; min-height: 3.2em; }

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.pair div { position: relative; }
.pair img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.pair span { position: absolute; left: 0; bottom: 0; padding: 4px 10px 5px; font-size: .82rem; background: rgba(5, 5, 6, .8); }

.act:last-child { min-height: 100vh; justify-content: flex-end; padding-bottom: 0; }
.act:last-child .card { margin-bottom: 12vh; }
.foot { pointer-events: auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px 32px; padding: 26px 0 calc(var(--frame) + 44px); border-top: 1px solid var(--line); font-size: .85rem; color: var(--dim); background: linear-gradient(rgba(5, 5, 6, 0), rgba(5, 5, 6, .9) 40%); }
.foot img { height: 20px; width: auto; }
.foot p { max-width: 44rem; }

@media (max-width: 820px) {
  .top nav a:not(.pill) { display: none; }
  .brand img { height: 20px; }
  .hud { display: none; }
  .act { min-height: 150vh; justify-content: flex-end; padding: 10vh calc(var(--frame) + 12px) 9vh; }
  .act:first-child { justify-content: flex-end; padding-top: 0; padding-bottom: 12vh; }
  .card, .card.first, .card.wide { width: 100%; padding: 20px 18px 22px; background: rgba(5, 5, 6, .8); }
  .facts { grid-template-columns: 1fr 1fr; }
  .legend { grid-template-columns: 1fr; }
  .foot { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }