/* =====================================================================
   GALLERY — knots and chalk
   Colours live in the two blocks below. Cream is the default theme;
   gallery.js sets data-theme="dark" on <body> for the dark backgrounds.
   ===================================================================== */

body {
  --ink: #1c3a2c;
  --dim: #4e6d5c;
  --hi: #157034;
  --pop: #9a6b00;
  --link: #9a6b00;
  --chipfg: #f4efe2;
  --h1: #ffcf1a;
  --h1s1: #157034;
  --h1s2: #14201c;
}

body[data-theme="dark"] {
  --ink: #e8f4ee;
  --dim: #7fb79f;
  --hi: #3ddc5b;
  --pop: #ff2f5e;
  --link: #ffe01e;
  --chipfg: #0d1512;
  --h1: #ffe01e;
  --h1s1: #ff2f5e;
  --h1s2: #000;
}

html, body { margin: 0; padding: 0; }

/* The browser hides [hidden] elements with a plain `display: none`, which
   ANY display rule in this file outranks. The lightbox toggles .hidden on
   four elements that all have their own display rule, so without this they
   just stay on screen. Keep it above everything else. */
[hidden] { display: none !important; }

body {
  background-color: #f4efe2;
  background-image: url("/Images/blog/gallery/bg-asciilight.png");
  background-repeat: repeat;
  overflow-x: hidden;
  color: var(--ink);
  font-family: "Pixelify Sans", monospace;
  cursor: crosshair;
  min-height: 100vh;
  padding-bottom: 80px;
}

a { color: var(--link); text-decoration: underline; }
a:hover { color: var(--pop); }

@keyframes blink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
@keyframes bar { from { background-position: 0 0 } to { background-position: 24px 0 } }
@keyframes fadeout { from { opacity: .9; transform: scale(1) } to { opacity: 0; transform: scale(.3) } }

.blink { animation: blink 1.4s steps(1) infinite; }
.pop { color: var(--pop); }

/* ---------- nav ------------------------------------------------------ */

.top-nav { display: flex; align-items: center; gap: 14px; padding: 10px 14px 6px 14px; }

.nav-aside { font-size: 21px; color: var(--dim); transform: rotate(1.5deg); }

/* zine variant of the shared /nav.css back button: same Win95 raised
   border, plus a loud double outline and a tilt */
.back-button--zine {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  background: #c0c0c0;
  color: #000;
  text-decoration: none;
  font-family: "Pixelify Sans", monospace;
  font-size: 15px;
  transform: rotate(-2.5deg);
  box-shadow: inset 1px 1px #ffffff, inset -1px -1px #808080, 1px 1px 0 0 #000,
              0 0 0 2px #ff2f5e, 0 0 0 4px #ffe01e;
}
.back-button--zine img { width: 16px; height: 16px; }
.back-button--zine:hover { outline: 1px dotted #000; transform: rotate(2deg); }
.back-button--zine:active {
  box-shadow: inset 1px 1px #000, inset -1px -1px #ffffff, 0 0 0 2px #ff2f5e, 0 0 0 4px #ffe01e;
  padding: 5px 7px 3px 9px;
}

/* ---------- header --------------------------------------------------- */

.marquee-band {
  background: #000;
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
  color: #3ddc5b;
  font-size: 19px;
  padding: 3px 0;
}

.gallery-head { text-align: center; padding: 26px 12px 10px 12px; position: relative; z-index: 3; }

.gallery-head h1 {
  margin: 0;
  font-size: 78px;
  line-height: .9;
  letter-spacing: 2px;
  color: var(--h1);
  text-shadow: 4px 4px 0 var(--h1s1), 8px 8px 0 var(--h1s2);
  transform: rotate(-1.4deg);
}

.gallery-head p { margin: 14px 0 0 0; font-size: 26px; transform: rotate(.8deg); }
.gallery-head p .pop { font-size: 20px; animation-duration: 1s; }

/* marching green dashes, in place of the old rainbow gif bars */
.dashes {
  height: 5px;
  margin-top: 14px;
  background-image: repeating-linear-gradient(90deg, var(--hi) 0 14px, transparent 14px 24px);
  background-repeat: repeat-x;
  animation: bar .9s steps(4) infinite;
}
.dashes--rev { margin-top: 26px; animation-direction: reverse; }

.statusbar,
.bgbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  color: var(--dim);
}
.statusbar { gap: 10px 22px; padding: 12px 16px; font-size: 15px; }
.bgbar { gap: 8px; padding: 0 16px 8px 16px; font-size: 14px; }
.bgbar-label { color: var(--hi); }

/* gallery.js fills this with one .bg-btn per entry in BACKGROUNDS */
#bgpicker { display: flex; flex-wrap: wrap; gap: 8px; }

.win95-btn {
  font-family: "Pixelify Sans", monospace;
  font-size: 15px;
  padding: 4px 10px;
  background: #c0c0c0;
  color: #000;
  border: none;
  cursor: pointer;
  box-shadow: inset 1px 1px #fff, inset -1px -1px #808080, 2px 2px 0 0 #000;
}

.bg-btn {
  font-family: "Pixelify Sans", monospace;
  font-size: 13px;
  padding: 3px 9px;
  cursor: pointer;
  background: transparent;
  color: var(--dim);
  border: 2px solid var(--dim);
}
.bg-btn[aria-pressed="true"] {
  background: var(--hi);
  color: var(--chipfg);
  border-color: var(--hi);
}

/* ---------- the board ------------------------------------------------ */

.board { position: relative; width: 100%; margin: 6px auto 0 auto; }

/* the whole board lurches for a moment when you hit SHAKE THE BOX */
@keyframes boardshake {
  0%   { transform: translate(0, 0) rotate(0deg); }
  15%  { transform: translate(-11px, 6px) rotate(-.5deg); }
  30%  { transform: translate(9px, -8px) rotate(.45deg); }
  45%  { transform: translate(-7px, -4px) rotate(-.3deg); }
  60%  { transform: translate(6px, 7px) rotate(.28deg); }
  78%  { transform: translate(-3px, -2px) rotate(-.12deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
.board.shaking { animation: boardshake .45s ease-out; }

.item {
  position: absolute;
  padding: 9px;
  background: #fdfaf0;
  border: 2px solid #000;
  box-shadow: 6px 7px 0 rgba(0, 0, 0, .55);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.item.grabbing { cursor: grabbing; }

/* keyboard users tab through the pile; make the current one obvious */
.item:focus-visible { outline: 3px solid #ff2f5e; outline-offset: 3px; }

.item-media { position: relative; background: #000; border: 1px solid #000; overflow: hidden; }
.item-media img,
.item-media video { display: block; width: 100%; height: auto; pointer-events: none; }

/* Video tiles hold a fixed box from the start — 4:3 as a guess, swapped for
   the clip's real ratio by gallery.js the moment the metadata arrives. Before
   this they began life 90px tall and snapped to full height mid-scroll. */
.item-media.is-video { aspect-ratio: 4 / 3; }
.item-media.is-video video {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;   /* letterboxed against the tile's black backing */
}

.badge {
  position: absolute;
  font-size: 13px;
  border: 2px solid #000;
  padding: 1px 7px 2px 7px;
}
.badge-video { left: 8px; bottom: 8px; color: #000; background: #ffe01e; transform: rotate(-4deg); }
.badge-new {
  right: -4px; top: 6px; font-size: 14px; color: #fff; background: #ff2f5e;
  transform: rotate(7deg); animation: blink 1s steps(1) infinite;
}

/* caption appears on hover only */
.caption {
  font-size: 20px;
  line-height: 1.1;
  color: #14201c;
  padding: 5px 2px 0 2px;
  opacity: 0;
  transition: opacity .12s;
}
.item:hover .caption { opacity: 1; }
body.no-captions .caption { display: none; }

/* strip of masking tape */
.tape {
  position: absolute;
  top: -13px;
  width: 62px;
  height: 24px;
  background: rgba(255, 240, 170, .66);
  border-left: 1px dashed rgba(120, 105, 40, .45);
  border-right: 1px dashed rgba(120, 105, 40, .45);
  pointer-events: none;
}

/* fallback when a video can't be decoded (HEVC etc.) */
.broken {
  position: absolute;
  inset: 0;
  background: #fdfaf0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 14px;
}
.broken-big { font-size: 24px; line-height: 1.05; color: #14201c; transform: rotate(-3deg); }
.broken-tag {
  font-size: 11px;
  color: #a3221a;
  border: 2px dashed #a3221a;
  padding: 3px 6px;
  transform: rotate(2deg);
}

.board-note {
  position: absolute;
  left: 42%;
  bottom: 60px;
  font-size: 30px;
  color: var(--dim);
  transform: rotate(3deg);
  pointer-events: none;
}

.gallery-foot { text-align: center; padding: 18px 12px; font-size: 14px; color: var(--dim); }

/* ---------- lightbox ------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, .95);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: crosshair;
}
/* (the [hidden] rule at the top of this file covers this one too) */

.lightbox-frame {
  position: relative;
  transform: rotate(-1.2deg);
  padding: 12px;
  background: #fff;
  border: 3px solid #000;
  box-shadow: 0 0 0 5px #ff2f5e, 0 0 0 9px #ffe01e, 14px 16px 0 rgba(0, 0, 0, .6);
  max-width: 88vw;
  cursor: default;
}
.lightbox-frame img,
.lightbox-frame video {
  display: block;
  max-width: 80vw;
  max-height: 72vh;
  width: auto;
  height: auto;
  object-fit: contain;
  background: #000;
}
.lightbox-frame video { outline: none; }

/* The min-width below is desktop-only on purpose. On a 360px phone the frame
   is 88vw ≈ 317px, and 300px of video plus the padding, border and shadow
   rings burst straight out of it and off the side of the screen. */
@media (min-width: 701px) {
  .lightbox-frame video { min-width: 300px; min-height: 200px; }
}

.lightbox-broken {
  width: 340px;
  height: 220px;
  background: #fdfaf0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}
.lightbox-broken .broken-big { font-size: 30px; }
.lightbox-broken .broken-tag { font-size: 12px; padding: 4px 8px; }

.lightbox-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-top: 8px;
  color: #14201c;
  font-size: 24px;
}
.lightbox-meta span:last-child { font-size: 13px; color: #555; }

.lb-btn {
  position: absolute;
  background: none;
  border: none;
  color: #ffe01e;
  font-family: "Pixelify Sans", monospace;
  cursor: pointer;
}
.lb-btn:hover { color: #ff2f5e; }
.lb-prev { left: 2vw; top: 50%; font-size: 46px; transform: translateY(-50%) rotate(-6deg); }
.lb-next { right: 2vw; top: 50%; font-size: 46px; transform: translateY(-50%) rotate(6deg); }
.lb-close { right: 20px; top: 14px; font-size: 40px; line-height: 1; color: #fff; }

.lb-hint {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%) rotate(-1deg);
  font-size: 13px;
  color: #3ddc5b;
  animation-duration: 1.6s;
}

/* ---------- chalk cursor trail --------------------------------------- */

.trail { position: fixed; inset: 0; pointer-events: none; z-index: 2000; overflow: hidden; }
.trail span { position: absolute; font-family: "Pixelify Sans", monospace; text-shadow: 0 0 6px currentColor; animation: fadeout .7s ease-out forwards; }

/* ---------- small screens (afterthought, on purpose) ----------------- */

@media (max-width: 700px) {
  .gallery-head h1 { font-size: 44px; text-shadow: 2px 2px 0 var(--h1s1), 4px 4px 0 var(--h1s2); }
  .gallery-head p { font-size: 20px; }
  .board-note { left: 8%; }

  /* Give the lightbox more of the screen and less chrome, and keep tall
     portrait clips short enough that the caption and close button survive. */
  .lightbox-frame { padding: 8px; max-width: 94vw; }
  .lightbox-frame img,
  .lightbox-frame video { max-width: 86vw; max-height: 62vh; }
}

/* The blinking, the marching dashes, the trail fade. gallery.js reads the
   same media query and switches off the cursor trail, the throw-coasting
   and the <marquee>, which CSS can't reach. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}