/* ── Fonts ─────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'OverCross';
  src: url('Fonts/YWFTOverCross - MyFonts Order M3604239/YouWorkForThem - YWFTOverCross-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'CourierNew';
  src: url('Fonts/Courier New/Courier New Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'CourierNew';
  src: url('Fonts/Courier New/Courier New Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'CourierNew';
  src: url('Fonts/Courier New/Courier New Bold Italic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: block;
}

@font-face {
  font-family: 'CourierNew';
  src: url('Fonts/Courier New/Courier New Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: block;
}

/* ── Reset ─────────────────────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  cursor: none;
  width: 100%;
  min-height: 100vh;
}

/* ── Background grid ───────────────────────────────────────────────────────── */

body {
  background-color: #ffffff;
  background-image:
    linear-gradient(to right,  #aaaaaa 1.2px, transparent 1.2px),
    linear-gradient(to bottom, #aaaaaa 1.2px, transparent 1.2px);
  background-size: 6px 6px;
  background-position: 2.4px 2.4px;
}

/* ── Page container ────────────────────────────────────────────────────────── */

#page {
  position: relative;
  width: 100%;
}

#connector-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  overflow: visible;
}

#elements-layer {
  position: relative;
  width: 100%;
}

/* ── OverCross text elements ───────────────────────────────────────────────── */

.cross-element {
  position: absolute;
  font-family: 'OverCross', monospace;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1;
  white-space: pre;
  margin: 0;
  padding: 0;
  user-select: none;
}

/* ── White content boxes ───────────────────────────────────────────────────── */

.box {
  position: absolute;
  border: 1.2px solid #000000;
  background: #ffffff;
  box-sizing: border-box;
}

.box-content {
  font-family: 'CourierNew', 'Courier New', monospace;
  line-height: 18px;
  color: #111111;
}

.box-content a {
  color: inherit;
  text-decoration: none;
}

.box-content a:hover {
  text-decoration: underline;
}

.contact-list {
  list-style: none;
}

.contact-list li {
  font-family: 'CourierNew', 'Courier New', monospace;
  line-height: 18px;
  color: #111111;
}

/* ── Info blocks ───────────────────────────────────────────────────────────── */

.info-block {
  position: absolute;
  border-left:   1.2px solid #000000;
  border-top:    1.2px solid #000000;
  border-right:  none;
  border-bottom: none;
  background: #ffffff;
  box-sizing: border-box;
}

.info-block .ib-heading {
  font-family: 'CourierNew', 'Courier New', monospace;
  font-weight: 700;
  font-size: 11px;
  line-height: 18px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
  color: #111111;
}

.info-block .ib-body {
  font-family: 'CourierNew', 'Courier New', monospace;
  font-weight: 400;
  font-size: 11px;
  line-height: 18px;
  margin-bottom: 12px;
  color: #111111;
}

.info-block .ib-link {
  display: block;
  font-family: 'CourierNew', 'Courier New', monospace;
  font-weight: 400;
  font-size: 10px;
  line-height: 18px;
  color: #111111;
  text-decoration: none;
  border-top: 1px solid #dddddd;
  padding-top: 6px;
  margin-top: 6px;
}

.info-block .ib-link:hover {
  text-decoration: underline;
}

/* ── Custom cursor ─────────────────────────────────────────────────────────── */

#cursor-container {
  position: fixed;
  width: 120px;
  height: 120px;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  pointer-events: none;
  z-index: 9999;
  transition: width 120ms ease, height 120ms ease;
  opacity: 0;
}

#cursor-circle {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #ffffff;
}

.cursor-arm-h {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 1px;
  background: #000000;
  transform: translate(-50%, -50%);
}

.cursor-arm-v {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 16px;
  background: #000000;
  transform: translate(-50%, -50%);
}

#grid-coord {
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  font-family: 'CourierNew', 'Courier New', monospace;
  font-weight: 400;
  font-size: 9px;
  color: #000000;
  letter-spacing: 0.06em;
  white-space: nowrap;
  opacity: 0;
}