/* ==========================================================================
   Open Late
   Values marked (Figma) come from the Ready-for-dev frames:
   Desktop - 2 (collage), Desktop - 7 / Desktop - 8 (detail).
   ========================================================================== */

/* ---------- Fonts ---------- */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/IBMPlexSans-Thin-Latin1.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/IBMPlexSans-Light-Latin1.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/IBMPlexSans-Regular-Latin1.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */

@property --accent {
  syntax: "<color>";
  inherits: true;
  initial-value: #e6e4e0;
}

:root {
  --bg: #000;               /* (Figma) */
  --text: #e6e4e0;          /* (Figma) */
  --rule: #2a2a2a;

  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --size-label: 24px;       /* (Figma) Thin */
  --size-body: 16px;        /* (Figma) Regular */
  --size-wordmark: 24px;

  --nav-h: 64px;
  --pad: 60px;              /* (Figma) frame padding */
  --col-gap: 20px;          /* (Figma) text column ↔ image */
  --section-gap: 10px;      /* (Figma) between sections */
  --label-gap: 4px;         /* (Figma) label ↔ value */
  --info-width: 427px;      /* (Figma) text column; 68ch is the upper cap */
  --info-max: 68ch;
  --side-gap: 60px;         /* min space between info and sign list */
  --sign-max-h: 88vh;       /* spec — may change after review */

  --swatch: 21px;           /* (Figma) */
  --swatch-radius: 7px;     /* (Figma) */
  --swatch-gap: 6px;        /* (Figma) chip ↔ hex */
  --swatches-gap: 10px;     /* (Figma) between swatches */

  --cool: 0ms;              /* hover → default fade. Trying instant; was 450ms (tubes cool slowly) */
  --release: 150ms;         /* pressed → hover */
  --accent-fade: 200ms;
}

@media (max-width: 800px) {
  :root {
    --pad: 20px;
    --sign-max-h: 60vh;
  }
}

/* ---------- Base ---------- */

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

[hidden] { display: none !important; }

html {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--size-body);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
  border-radius: 2px;
}

main:focus, [tabindex="-1"]:focus { outline: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--pad);
  top: 8px;
  z-index: 10;
  padding: 8px 12px;
  background: var(--bg);
  color: var(--text);
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; }

.noscript { padding: var(--pad); }

/* ---------- Nav ---------- */

.nav {
  height: var(--nav-h);
  background: transparent;
}

.nav__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 100%;
  padding: 0 calc(var(--pad) - 10px); /* buttons carry 10px of their own padding */
}

.nav__left { justify-self: start; }

.nav__wordmark {
  font-weight: 100;
  font-size: var(--size-wordmark);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.nav__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--text);
}

/* ---------- Collage ---------- */

/* Fits the whole composition on screen: as wide as the viewport allows,
   but never taller than the space under the nav. Black fills the rest.
   --cols and --ratio (width ÷ height) come from collage.js. */
.collage {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  align-items: start;
  width: min(100vw, calc((100vh - var(--nav-h)) * var(--ratio, 1)));
  width: min(100vw, calc((100dvh - var(--nav-h)) * var(--ratio, 1)));
  margin: 0 auto;
}

.collage__col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sign {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  background: var(--bg);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}
.sign--landscape { aspect-ratio: 3 / 2; }
.sign--blank { pointer-events: none; }

.sign img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.sign:focus-visible {
  outline-offset: -6px;
  z-index: 1;
}

/* Lit layer: snaps on (0ms), cools off slowly. Only rendered on hover devices. */
.sign__lit {
  opacity: 0;
  transition: opacity var(--cool) ease-out;
}

@media (hover: hover) {
  .sign:hover .sign__lit { opacity: 1; transition-duration: 0ms; }
  .sign:hover.is-flickering .sign__lit { animation: none; }
}
.sign:focus-visible .sign__lit { opacity: 1; transition-duration: 0ms; }

/* Pressed layer */
.sign__pressed {
  opacity: 0;
  transition: opacity var(--release) ease-out;
}
.sign:active .sign__pressed { opacity: 1; transition-duration: 0ms; }

/* Flicker: two flashes in 600ms — never 3 in any one second */
.sign.is-flickering .sign__lit {
  animation: flicker 600ms linear 1;
}

@keyframes flicker {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  16%  { opacity: 1; }
  19%  { opacity: 0; }
  46%  { opacity: 0; }
  49%  { opacity: 0.85; }
  58%  { opacity: 0.85; }
  61%  { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes swell {
  0%, 100% { opacity: 0; }
  50%      { opacity: 0.6; }
}

/* ---------- Detail ---------- */

.detail {
  --accent: var(--text);
  display: flex;
  align-items: stretch; /* side column matches the image height */
  gap: var(--col-gap);
  padding: 0 var(--pad) var(--pad);
  transition: --accent var(--accent-fade) ease-out;
}
.detail.is-themed { --accent: var(--sign-accent); }

/* Figma: info top-left, sign list bottom-left (space-between), image right.
   DOM order is image first (mobile order). */
.detail__side {
  order: 1;
  flex: 0 0 var(--info-width);
  max-width: var(--info-max);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--side-gap);
}

.detail__figure {
  order: 2;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin: 0;
}

/* Three identical images stacked in one grid cell: Default, lit Hover, Pressed. */
.detail__stack {
  display: grid;
  min-width: 0;
  max-width: 100%;
  /* it's a <button> (click to flicker) — strip the default button look */
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.detail__stack:focus-visible { outline-offset: 4px; }

.detail__img {
  grid-area: 1 / 1;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: var(--sign-max-h);
  object-fit: contain;
}

.detail__pressed { opacity: 0; }

/* Detail page opens on Default; flicker.js flickers the lit layer on. */
.detail__lit.is-off { opacity: 0; }

/* Stand-in for signs whose WebPs aren't exported yet — same footprint. */
.detail__placeholder {
  display: grid;
  place-items: center;
  max-width: 100%;
  max-height: var(--sign-max-h);
  border: 1px dashed var(--rule);
  color: #555;
  font-size: 14px;
}
.detail__placeholder--portrait { height: var(--sign-max-h); aspect-ratio: 2 / 3; }
.detail__placeholder--landscape { width: 100%; aspect-ratio: 3 / 2; }

.info {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
  margin: 0;
}

.info__group {
  display: flex;
  flex-direction: column;
  gap: var(--label-gap);
}

.info__label {
  font-weight: 100;
  font-size: var(--size-label);
  line-height: normal;
}

.info__value {
  margin: 0;
  font-weight: 400;
  font-size: var(--size-body);
  line-height: normal;
  overflow-wrap: break-word;
}

.info__value p { margin: 0; }

.info a {
  text-decoration: underline;
  text-decoration-thickness: from-font;
}
.info a:hover { color: var(--accent); }

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--swatches-gap);
}

.swatch {
  display: inline-flex;
  align-items: center;
  gap: var(--swatch-gap);
  white-space: nowrap;
}

.swatch__chip {
  flex: none;
  width: var(--swatch);
  height: var(--swatch);
  border-radius: var(--swatch-radius);
  background: var(--chip);
}

/* Sign list (Figma: Frame 14) — Thin, "strikes" to Light on hover. */
.places ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: calc(var(--section-gap) / -2) 0;
  padding: 0;
  list-style: none;
}

/* The Figma 10px gap lives inside each link as padding, so the pointer
   never falls between names and the thumbnail doesn't blink. */
.places a {
  display: block;
  padding: calc(var(--section-gap) / 2) 0;
  font-weight: 100;
  font-size: var(--size-label);
  line-height: normal;
  text-decoration: none;
  white-space: nowrap;
}

/* Current sign stays lit */
.places a[aria-current="page"] { font-weight: 300; }

@media (hover: hover) {
  .places a:hover { font-weight: 300; }
}
.places a:focus-visible { font-weight: 300; }

/* One thumbnail box, pinned so its bottom-left corner sits 16px up and
   right of the cursor (set as --x / --y by detail.js). No transitions. */
.places__thumb {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 5;
  width: auto;
  height: auto;
  max-width: 160px;
  max-height: 160px;
  background: var(--bg);
  outline: 1px solid var(--rule);
  pointer-events: none;
  transform: translate(calc(var(--x, 0px) + 16px), calc(var(--y, 0px) - 16px - 100%));
}

@media (max-width: 800px) {
  .detail { flex-direction: column; }
  .detail__figure { order: 0; flex: none; }
  .detail__side { order: 1; flex: none; }
  .detail__placeholder--portrait { height: auto; width: min(100%, calc(var(--sign-max-h) * 2 / 3)); }
}

/* ---------- Not found ---------- */

.notfound {
  padding: var(--pad);
}
.notfound h1 { font-weight: 100; font-size: var(--size-label); margin: 0 0 8px; }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  :root {
    --cool: 0ms;
    --release: 0ms;
    --accent-fade: 0ms;
  }
  .sign.is-flickering .sign__lit {
    animation: swell 2400ms ease-in-out 1;
  }
}