/* Theme values are set from the active palette in main.js. */
:root {
  --bg: #202020;
  --fg: #f2ead8;
  --muted: rgba(242, 234, 216, 0.6);
  --c0: #6da87f;
  --c1: #c79b37;
  --c2: #3f6969;
  --c3: #d97567;
  --accent: #ca4e1a;
  --cell: 20px;
  --content-top: 260px;
  --pixel: "Jersey 10", ui-monospace, monospace;
  --mono: "IBM Plex Sans Condensed", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  transition: background-color 300ms ease;
}

body { overflow: hidden; }

#grid {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  image-rendering: pixelated;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Until the font and palette are ready, show only the background */
.booting .nav,
.booting .press { visibility: hidden; }

/* Build-in: icons and the palette button step in after the grid */
.intro .icon,
.intro .press { animation: step-in 320ms steps(4) both; }
.intro .icon:nth-child(1) { animation-delay: 900ms; }
.intro .icon:nth-child(2) { animation-delay: 980ms; }
.intro .icon:nth-child(3) { animation-delay: 1060ms; }
.intro .icon:nth-child(4) { animation-delay: 1140ms; }
.intro .icon:nth-child(5) { animation-delay: 1220ms; }
.intro .press { animation-delay: 1350ms; }

@keyframes step-in {
  from { clip-path: inset(100% 0 0 0); transform: translateY(calc(var(--cell) / 2)); }
  to { clip-path: inset(0 0 0 0); transform: none; }
}

/* Desktop icons: a pixel glyph over a pixel label, one palette color each */
.nav {
  position: fixed;
  z-index: 2;
  top: calc(var(--cell) * 2);
  left: calc(var(--cell) * 1);
  display: flex;
  flex-direction: column;
  gap: calc(var(--cell) * 0.8);
}

.icon {
  --c: var(--c0);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: calc(var(--cell) * 6);
  text-decoration: none;
  color: var(--c);
}
.icon:nth-child(2) { --c: var(--c1); }
.icon:nth-child(3) { --c: var(--c2); }
.icon:nth-child(4) { --c: var(--c3); }
.icon:nth-child(5) { --c: var(--c0); }

.glyph svg {
  display: block;
  width: calc(var(--cell) * 3);
  height: calc(var(--cell) * 3);
}

.lbl {
  font-family: var(--pixel);
  font-size: calc(var(--cell) * 1.35);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 1px 6px 2px;
  background: var(--bg);
}

/* Open or hovered: the label inverts, like a selected icon */
.icon:hover .lbl,
.icon:focus-visible .lbl,
.icon.open .lbl {
  color: var(--bg);
  background: var(--c);
}
.icon:focus-visible { outline: none; }
.icon:active .glyph { transform: translate(2px, 2px); }

/* Windows */
.desktop {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.win {
  position: absolute;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 2px solid var(--fg);
  box-shadow: calc(var(--cell) / 2) calc(var(--cell) / 2) 0 var(--accent);
}

.win-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  height: calc(var(--cell) * 2);
  padding: 0 8px;
  border-bottom: 2px solid var(--fg);
  font-family: var(--pixel);
  font-size: calc(var(--cell) * 1.5);
  color: var(--muted);
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.win.dragging .win-bar { cursor: grabbing; }

/* The front window's bar fills with its color */
.win.active .win-bar { background: var(--wc); color: var(--bg); }

.win-title {
  flex: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.win-close,
.win-max {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(var(--cell) * 1.2);
  height: calc(var(--cell) * 1.2);
  padding: 0;
  border: 0;
  background: var(--fg);
  color: var(--bg);
  cursor: pointer;
}
.win-close svg,
.win-max svg { width: 58%; height: 58%; display: block; }
/* On a colored bar the box flips so it never blends into the bar */
.win.active .win-close,
.win.active .win-max { background: var(--bg); color: var(--wc); }
.win-close:hover,
.win-max:hover,
.win.active .win-close:hover,
.win.active .win-max:hover { background: var(--accent); color: var(--bg); }
.win-max:focus-visible,
.win-close:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }

.win-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Expanded: fill the screen, a cell in from each edge */
.win.max {
  left: var(--cell) !important;
  top: var(--cell) !important;
  right: var(--cell);
  bottom: var(--cell);
  width: auto !important;
  height: auto !important;
  max-height: none !important;
}
.win.max .win-bar { cursor: default; }
.win.max .doc {
  max-width: 760px;
  margin: 0 auto;
  padding-top: calc(var(--cell) * 2);
  padding-bottom: calc(var(--cell) * 2);
  font-size: 21px;
}
.win.max .tiles { columns: calc(var(--cell) * 8); }
.viewer.max .win-body { display: flex; flex-direction: column; }
.viewer.max .view-media {
  flex: 1;
  min-height: 0;
  width: auto !important;
  height: auto !important;
  padding: var(--cell);
}

.zoom {
  position: fixed;
  z-index: 50;
  border: 2px solid var(--fg);
  pointer-events: none;
}

/* about.txt / contact.txt */
.doc {
  padding: calc(var(--cell) * 1) calc(var(--cell) * 1.2);
  line-height: 1.5;
  font-size: 19px;
}
.doc h3 {
  font-family: var(--pixel);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.1;
  font-size: 28px;
  letter-spacing: 0.04em;
  margin: 22px 0 8px;
  color: var(--c0);
}
.doc p { margin: 0 0 12px; }
.doc a {
  color: var(--fg);
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.doc a:hover { color: var(--accent); }

.list { list-style: none; margin: 0; padding: 0; }
.list li { margin: 0 0 10px; }
.list li p { margin: 2px 0 0; color: var(--muted); }
.list.inline { display: flex; gap: 20px; flex-wrap: wrap; }
.meta { color: var(--muted); font-size: 16px; margin-left: 6px; }

/* exhibitions.txt: each show gets a big pixel name */
[data-win="exhibitions"] .list li { margin-bottom: 20px; }
[data-win="exhibitions"] strong {
  display: block;
  font-family: var(--pixel);
  font-weight: 400;
  font-size: 34px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--c2);
}
[data-win="exhibitions"] .meta {
  display: inline-block;
  margin: 6px 0 0;
  padding: 0 6px;
  font-family: var(--pixel);
  font-size: 20px;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--fg);
}
.list .meta:first-child { margin: 0 8px 0 0; display: inline-block; min-width: 84px; }

/* contact.txt: links with pixel logos, then an email draft */
.links li { display: flex; align-items: center; gap: 12px; }
.link-ico { flex: none; color: var(--c3); }
.link-ico svg { display: block; width: 24px; height: 24px; }
.draft {
  margin: 20px 0 8px;
  border: 2px solid var(--fg);
}
.draft-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 10px;
  border-bottom: 2px solid var(--fg);
}
.draft-k {
  flex: none;
  min-width: 72px;
  font-family: var(--pixel);
  font-size: 20px;
  text-transform: uppercase;
  color: var(--c3);
}
.draft input,
.draft textarea {
  flex: 1;
  min-width: 0;
  font: inherit;
  color: var(--fg);
  background: transparent;
  border: 0;
  outline: none;
}
.draft textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  resize: vertical;
  line-height: 1.5;
}
.draft ::placeholder { color: var(--muted); opacity: 1; }
.draft-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 14px;
  padding: 0 10px 10px;
}
.draft-fallback {
  margin: 0 auto 0 0 !important;
  font-size: 16px;
  color: var(--muted);
}
.draft-alt {
  font: inherit;
  color: var(--fg);
  background: none;
  border: 0;
  padding: 0;
  margin-left: 8px;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.draft-alt:hover { color: var(--accent); }
.draft-send {
  display: block;
  margin-left: auto;
  font-family: var(--pixel);
  font-size: 22px;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--fg);
  border: 0;
  padding: 6px 16px 7px;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--accent);
}
.draft-send:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--accent); }

/* work/ folder: small thumbnails, so the pieces stay crisp */
.folder-status {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 4px 10px;
  background: var(--bg);
  border-bottom: 2px solid var(--fg);
  font-family: var(--pixel);
  font-size: 20px;
  text-transform: uppercase;
  color: var(--muted);
}

/* Exhibition photos: a small masonry under the show */
.photos {
  columns: 3 120px;
  column-gap: 8px;
  margin-top: 10px;
}
.photo {
  display: block;
  width: 100%;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  break-inside: avoid;
}
.photo img { display: block; width: 100%; height: auto; }
.photo:hover img,
.photo:focus-visible img { outline: 3px solid var(--c2); outline-offset: -3px; }
.photo:focus-visible { outline: none; }

/* Masonry: columns of pieces at their real proportions */
.tiles {
  columns: calc(var(--cell) * 7);
  column-gap: calc(var(--cell) * 0.6);
  padding: calc(var(--cell) * 0.8);
}

.tile {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 calc(var(--cell) * 0.6);
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg);
  cursor: pointer;
  break-inside: avoid;
}

.tile-frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--ar, 9 / 16);
  background: var(--tc);
}
.tile-frame[data-video]::before {
  content: "\25B6";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--bg);
  font-size: 22px;
}
.thumb {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* File name shows as a label on hover */
.tile-name {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 100%;
  padding: 1px 6px;
  font-family: var(--pixel);
  font-size: 18px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--bg);
  background: var(--tc);
  opacity: 0;
}

.tile:hover .tile-frame,
.tile:focus-visible .tile-frame { outline: 3px solid var(--tc); outline-offset: -3px; }
.tile:hover .tile-name,
.tile:focus-visible .tile-name { opacity: 1; }
.tile:focus-visible { outline: none; }

/* Piece viewer: fixed-size box, so the arrows never move */
.viewer .win-body { overflow: hidden; }

.view-media {
  display: flex;
  align-items: center;
  justify-content: center;
}
.view-media img,
.view-media video {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.view-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-top: 2px solid var(--fg);
  font-family: var(--pixel);
  font-size: 26px;
  text-transform: uppercase;
}

.view-cap {
  text-align: center;
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
}

.view-bar button {
  font: inherit;
  color: var(--bg);
  background: var(--fg);
  border: 0;
  width: calc(var(--cell) * 2);
  height: calc(var(--cell) * 1.6);
  cursor: pointer;
}
.view-bar button:hover { background: var(--wc); }
.view-bar button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Palette button, bottom-left like the original */
.press {
  position: fixed;
  z-index: 2;
  left: calc(var(--cell) * 1);
  bottom: calc(var(--cell) * 1);
  display: flex;
  align-items: center;
  gap: 12px;
}

#press {
  font-family: var(--pixel);
  font-size: max(24px, calc(var(--cell) * 1.3));
  text-transform: uppercase;
  color: var(--bg);
  background: var(--fg);
  border: 0;
  padding: 8px 12px 9px;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--accent);
  transition: transform 80ms steps(2), box-shadow 80ms steps(2);
}
#press:hover { background: var(--accent); }
#press:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--accent); }
#press:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

#palette-name {
  font-family: var(--pixel);
  font-size: 20px;
  text-transform: uppercase;
  color: var(--fg);
  background: var(--bg);
  padding: 2px 6px;
  opacity: 0;
  transition: opacity 400ms ease;
}
#palette-name.show { opacity: 1; }

/* Narrow screens: title across the top, the five icons in one row under
   it, windows full width below that */
@media (max-width: 899px) {
  .nav {
    position: absolute;
    top: var(--nav-top, 120px);
    left: calc(var(--cell) / 2);
    right: calc(var(--cell) / 2);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    justify-items: center;
    gap: 0;
  }
  .icon { width: auto; min-width: 0; gap: 3px; }
  .glyph svg { width: calc(var(--cell) * 2.2); height: calc(var(--cell) * 2.2); }
  .lbl { font-size: 14px; padding: 1px 3px 2px; }
  .win-bar { cursor: default; height: 36px; font-size: 24px; }
  .win-close, .win-max { width: 24px; height: 24px; }
  .doc { font-size: 17px; }
  [data-win="exhibitions"] strong { font-size: 28px; }
  .tiles { columns: 2; }
  .win.max .tiles { columns: 2; }
  /* Viewers are full width; keep the piece centered in them */
  .view-media { align-self: center; margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .intro .icon, .intro .press { animation: none; }
  .icon:active .glyph { transform: none; }
}