/* Regionly site identity — Survey Grid structure × Live Canvas palette.
   D's instruments (topo contours, crop marks, tick ruler, REF numbering,
   condensed caps, coordinate readout) on C's neutral white/ink + class colors. */

@font-face {
  font-family: 'Archivo Narrow';
  src: url('/assets/fonts/archivo-narrow-700-latin.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  --font-display: 'Archivo Narrow', 'Arial Narrow', system-ui, sans-serif;
  --display-transform: uppercase;
  --display-tracking: .03em;
  --page-radius: 8px;
  --premium: #9256d9;
}

:root[data-theme="light"] {
  --page-bg: #fdfdfc;
  --page-text: #111418;
  --page-dim: #5c636e;
  --page-accent: #3b6ff0;
  --contour: rgba(92, 99, 110, .30);
  --dot: rgba(17, 20, 24, .1);
  --c1: #f0443c; --c2: #3b6ff0; --c3: #2fa84f;
  --code-bg: #f6f7f9;
  /* editor chrome */
  --bg: #ffffff;
  --bg2: #f6f7f9;
  --bg3: #eceef2;
  --border: #dcdfe5;
  --text: #111418;
  --text-dim: #5c636e;
  --canvas-bg: #f0f1f4;
  --accent: #3b6ff0;
  --accent-hover: #5583f4;
  --shadow: 0 10px 32px rgba(20, 30, 60, .16);
  --frame-shadow: 0 18px 56px rgba(20, 30, 60, .14);
}

:root[data-theme="dark"] {
  --page-bg: #0e0f12;
  --page-text: #eceef2;
  --page-dim: #9aa1ac;
  --page-accent: #5583f4;
  --contour: rgba(154, 161, 172, .22);
  --dot: rgba(236, 238, 242, .12);
  --c1: #ff5f57; --c2: #5583f4; --c3: #3dc26a;
  --code-bg: #17181c;
  --bg: #17181c;
  --bg2: #101114;
  --bg3: #232529;
  --border: #33363d;
  --text: #eceef2;
  --text-dim: #9aa1ac;
  --canvas-bg: #0b0c0e;
  --accent: #5583f4;
  --accent-hover: #6f96f6;
  --shadow: 0 10px 32px rgba(0, 0, 0, .55);
  --frame-shadow: 0 18px 56px rgba(0, 0, 0, .5);
}

/* topographic contour lines, neutralized to the ink scale */
body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='420' viewBox='0 0 520 420'%3E%3Cg fill='none' stroke='%237a828e' stroke-opacity='.16' stroke-width='1.2'%3E%3Cpath d='M-20 80 C 90 20 200 130 320 80 S 520 40 560 90'/%3E%3Cpath d='M-20 120 C 90 60 210 170 330 120 S 520 80 560 130'/%3E%3Cpath d='M-20 160 C 90 100 220 210 340 160 S 520 120 560 170'/%3E%3Cpath d='M-20 300 C 100 240 220 350 340 300 S 520 260 560 310'/%3E%3Cpath d='M-20 340 C 100 280 230 390 350 340 S 520 300 560 350'/%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
}

/* corner registration marks */
.crop-marks { display: block; }
.crop-marks i {
  position: fixed;
  width: 18px; height: 18px;
  border-color: var(--page-dim);
  border-style: solid;
  border-width: 0;
  z-index: 50;
  pointer-events: none;
}
.crop-marks i:nth-child(1) { top: 10px; left: 10px; border-top-width: 1.5px; border-left-width: 1.5px; }
.crop-marks i:nth-child(2) { top: 10px; right: 10px; border-top-width: 1.5px; border-right-width: 1.5px; }
.crop-marks i:nth-child(3) { bottom: 10px; left: 10px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.crop-marks i:nth-child(4) { bottom: 10px; right: 10px; border-bottom-width: 1.5px; border-right-width: 1.5px; }

/* tick ruler under the header */
.site-head {
  border-bottom: 1.5px solid var(--page-text);
  background-image: repeating-linear-gradient(
    90deg,
    var(--page-dim) 0, var(--page-dim) 1px,
    transparent 1px, transparent 20px
  );
  background-size: 100% 8px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 20px;
}
.head-note { text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; }

.hero-copy h1 { font-weight: 700; }

/* dot grid marks the drawable surface (Live Canvas) */
#editor-shell {
  background-image: radial-gradient(var(--dot) 1.2px, transparent 1.2px);
  background-size: 18px 18px;
  padding-top: 20px;
  padding-bottom: 20px;
}
#canvas { cursor: crosshair; }

/* grid-reference section numbering */
.story h2::before {
  content: attr(data-ref);
  display: block;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--page-accent);
  margin-bottom: 6px;
  text-transform: none;
}

/* live coordinate readout in the editor */
#coord-readout {
  display: block;
  color: var(--page-accent);
  border-color: color-mix(in srgb, var(--page-accent) 40%, transparent);
}

/* marching-ants hover on the trio cards (Live Canvas) */
.trio > div { padding: 18px; border-radius: 10px; }
.trio > div:hover {
  background-image:
    linear-gradient(90deg, var(--page-accent) 50%, transparent 50%),
    linear-gradient(90deg, var(--page-accent) 50%, transparent 50%),
    linear-gradient(0deg, var(--page-accent) 50%, transparent 50%),
    linear-gradient(0deg, var(--page-accent) 50%, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 12px 1.5px, 12px 1.5px, 1.5px 12px, 1.5px 12px;
  background-position: left top, left bottom, left top, right top;
  animation: ants 12s linear infinite;
}
@keyframes ants {
  to { background-position: 600px top, -600px bottom, left -600px, right 600px; }
}
@media (prefers-reduced-motion: reduce) {
  .trio > div:hover { animation: none; }
}

.tag { border-radius: 3px; }