/* ==========================================================================
   BIG—UP© — GRID TRACKS · STUDIO
   ========================================================================== */

/* FONT — put PP Neue Montreal in /fonts with these names (or edit the urls) */
@font-face {
  font-family: "PP Neue Montreal";
  src: url("fonts/PPNeueMontreal-Book.woff2") format("woff2"),
       url("fonts/PPNeueMontreal-Book.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("fonts/PPNeueMontreal-Medium.woff2") format("woff2"),
       url("fonts/PPNeueMontreal-Medium.woff") format("woff");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  --font: "PP Neue Montreal", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --surface: #F2F1EC;              /* keep in step with BACKGROUND_COLOR in config.js */
  --ink: #0E0E0C;
  --wm-weight: 500;
  --wm-tracking: -0.045;           /* em */
  --c-scale: 0.36;                 /* © relative to the caps */
  --c-gap: 0.035;                  /* em */
  --small-weight: 400;
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--surface);
  color: var(--ink);
}
body {
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

#ink { position: fixed; left: 0; top: 0; display: block; }

.poster { position: fixed; inset: 0; margin: 0; }
.poster p, .poster h1 { margin: 0; font-weight: var(--small-weight); }
.poster a { color: inherit; text-decoration: none; }

/* --------------------------------------------------------------------------
   Without JavaScript: a plain version of the same poster
   -------------------------------------------------------------------------- */
.no-js .poster {
  display: grid;
  place-content: center;
  grid-template-columns: repeat(3, auto);
  column-gap: 2.4vw;
  padding: 0 8vw;
}
.no-js .wordmark {
  grid-column: 1 / -1;
  font-size: 13vw;
  font-weight: var(--wm-weight);
  letter-spacing: calc(var(--wm-tracking) * 1em);
  line-height: .9;
  margin-bottom: 1.2vw;
}
.no-js .wm-c { font-size: calc(var(--c-scale) * 1em); vertical-align: 1.5em; }
.no-js .role, .no-js .city, .no-js .mail { font-size: 14px; line-height: 1.18; }

/* --------------------------------------------------------------------------
   With JavaScript: every element is placed by ink.js on the same coordinates
   it is drawn at in the canvas.
   -------------------------------------------------------------------------- */
.is-set .poster > *,
.is-set .wordmark > span {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
}
.is-set .wordmark { position: static; font-weight: var(--wm-weight); letter-spacing: calc(var(--wm-tracking) * 1em); }

/* WebGL: the canvas draws the type; the DOM copy is invisible but selectable */
.is-gl .poster { color: transparent; }
.is-gl .poster ::selection { background: rgba(128, 128, 128, .35); }

/* Canvas 2D fallback: the DOM type is visible and blends with the colour */
.is-2d .poster { color: #fff; mix-blend-mode: difference; }

.mail a:hover, .mail a:focus-visible {
  outline: none;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
.is-gl .mail a:hover, .is-gl .mail a:focus-visible { text-decoration-color: currentColor; }

/* --------------------------------------------------------------------------
   Typography switched off (SHOW_TYPE: false) — still there for screen readers
   -------------------------------------------------------------------------- */
.no-type .poster { visibility: hidden; }

/* --------------------------------------------------------------------------
   Development only: the grid overlay and its control panel
   -------------------------------------------------------------------------- */
.debug-layer { position: fixed; left: 0; top: 0; pointer-events: none; }
.debug-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 16px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: #F2F1EC;
  border-top: 1px solid rgba(14, 14, 12, .2);
  box-shadow: 0 -2px 12px rgba(14, 14, 12, .1);
  z-index: 10;
}
/* everything spelled out explicitly, so no browser default can hide the labels */
.debug-panel button,
.debug-panel select,
.debug-unfold {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 8px 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0;
  text-indent: 0;
  white-space: nowrap;
  color: #0E0E0C !important;
  -webkit-text-fill-color: #0E0E0C !important;
  background: #FFFFFF;
  border: 1px solid rgba(14, 14, 12, .35);
  border-radius: 3px;
  cursor: pointer;
  opacity: 1;
}
.debug-panel select { padding-right: 24px; background-image: linear-gradient(45deg, transparent 50%, #0E0E0C 50%), linear-gradient(-45deg, transparent 50%, #0E0E0C 50%); background-size: 5px 5px; background-position: right 12px center, right 7px center; background-repeat: no-repeat; }
.debug-panel button[aria-pressed="true"] {
  color: #F2F1EC !important;
  -webkit-text-fill-color: #F2F1EC !important;
  background: #0E0E0C;
  border-color: #0E0E0C;
}
.debug-panel button:focus-visible,
.debug-panel select:focus-visible { outline: 2px solid #0E0E0C; outline-offset: 1px; }

.debug-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.debug-slider {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #FFFFFF;
  border: 1px solid rgba(14, 14, 12, .35);
  border-radius: 3px;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #0E0E0C;
  -webkit-text-fill-color: #0E0E0C;
}
.debug-slider input { width: 120px; accent-color: #0E0E0C; margin: 0; }
.debug-slider output { min-width: 3.2em; font-variant-numeric: tabular-nums; }

.debug-panel[hidden], .debug-unfold[hidden] { display: none; }
.debug-unfold {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 10;
  box-shadow: 0 2px 10px rgba(14, 14, 12, .12);
}