/* =====================================================================
   ARCHIVE PAGE  (load this AFTER style.css)
   All coordinates are on the 1920x1080 stage, read from your sketch.
   ===================================================================== */

/* ---- the grid window: top-left (165,165), bottom edge at y=830 ----
   --cols / --col-gap / --row-gap / --cell-ratio : the grid layout
        (my estimates from the sketch: tweak until it matches your art)
   --cell-ratio  : cell width / cell height (1.15 = a bit wider than tall)
   --cell-fit    : cover = crop to fill the cell, contain = show whole image
   --fade-t / --fade-b : how tall the fade is at the top / bottom edge     */
.a-window {
  --cols: 5;
  --col-gap: 44px;
  --row-gap: 30px;
  --cell-ratio: 1.15;
  --cell-fit: cover;
  --fade-t: 0px;
  --fade-b: 90px;

  position: absolute;
  left: 165px;
  top: 165px;
  width: 895px;                  /* 165 + 895 = 1060, where the scroll strip starts */
  height: 665px;                 /* 165 + 665 = 830, the FADE line */

  /* mask (not a white overlay) so the paper texture shows through the fade */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-t), #000 calc(100% - var(--fade-b)), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-t), #000 calc(100% - var(--fade-b)), transparent 100%);
}

/* The scroller. Wheel, touch and keyboard scrolling all work natively;
   only the browser's own scrollbar is hidden (the dotchan ball replaces it). */
.a-grid {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: contain;  /* don't scroll the page behind when you hit the end */

  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: var(--row-gap);
  align-items: start;
  align-content: start;
}
/* An invisible full-width row at the very end, so the last images can scroll
   up out of the bottom fade instead of ending underneath it. (A real element
   rather than padding: padding at the end of a scrolling grid is not honoured
   consistently across browsers.) */
.a-grid::after {
  content: '';
  grid-column: 1 / -1;
  height: max(0px, calc(var(--fade-b) - var(--row-gap)));  /* the row-gap above it adds the rest */
}
.a-grid::-webkit-scrollbar { display: none; }
.a-grid:focus { outline: none; }
.a-grid:focus-visible { outline: 2px dashed #1c3f7a; outline-offset: -2px; }

.a-item {
  display: block;
  width: 100%;
  aspect-ratio: var(--cell-ratio);
  object-fit: var(--cell-fit);
  user-select: none;
  -webkit-user-drag: none;
}

/* ---- scroll track + dotchan ball ----
   The track is an invisible strip centred on x=1090, running from y=135
   to y=832. The ball's CENTRE sits on the strip's top at scroll position 0
   and on its bottom at the end. Click or drag anywhere on the strip.      */
.a-track {
  position: absolute;
  left: 1060px;                  /* 1090 - half of the width below */
  top: 135px;
  width: 60px;
  height: 697px;                 /* 832 - 135 */
  touch-action: none;
  cursor: pointer;
}

.a-ball {
  --ball-w: auto;                /* set e.g. 48px to resize dotchan.png */
  position: absolute;
  left: 50%;
  top: 0;                        /* archive.js moves this as you scroll */
  width: var(--ball-w);
  height: auto;
  transform: translate(-50%, -50%);
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
}

.a-track.dragging,
.a-track.dragging .a-ball { cursor: grabbing; }

/* =====================================================================
   CLICK TO ENLARGE
   archive.js creates .a-lightbox inside the archive page when you click
   an image. --lb-dim is how dark the page behind the big image gets.
   ===================================================================== */
.a-item { cursor: zoom-in; }
.a-item:focus { outline: none; }
.a-item:focus-visible { outline: 2px dashed #1c3f7a; outline-offset: -2px; }
.a-item.a-lifted { visibility: hidden; }           /* the thumbnail hides while its big copy is out */

.a-lightbox {
  --lb-dim: rgba(0, 0, 0, 0.55);
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
  z-index: 3;                                      /* above the grid, scroll ball and X */
  visibility: hidden;
  pointer-events: none;
  cursor: zoom-out;
  outline: none;
}
.a-lightbox.shown { visibility: visible; pointer-events: auto; }

.a-lightbox-dim {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--lb-dim);
  opacity: 0;
  transition: opacity var(--lb-time, 350ms) ease;
}
.a-lightbox.open .a-lightbox-dim { opacity: 1; }

/* archive.js sets left / top / width / height; these transitions make it grow and shrink */
.a-lightbox-img {
  position: absolute;
  display: block;
  object-fit: cover;                               /* reveals the full picture smoothly as the box changes shape */
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  user-select: none;
  -webkit-user-drag: none;
  transition: left var(--lb-time, 350ms) ease,
              top var(--lb-time, 350ms) ease,
              width var(--lb-time, 350ms) ease,
              height var(--lb-time, 350ms) ease;
}

@media (prefers-reduced-motion: reduce) {
  .a-lightbox-dim, .a-lightbox-img { transition: none; }
}

/* =====================================================================
   GIF ANIMATIONS ON / OFF
   archive.js creates this button. It sits invisibly over the empty box
   you drew next to "gif animations:", and shows a tick when switched on.
   (500, 100) is its top-left corner. The size is my estimate from your
   sketch: change width / height until it covers your box exactly.
   ===================================================================== */
.a-gifs {
  left: 500px;
  top: 90px;
  width: 50px;
  height: 50px;
}
.a-gifs:focus { outline: none; }
.a-gifs:focus-visible { outline: 2px dashed #1c3f7a; outline-offset: 2px; }

.a-gifs-mark {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}
.a-gifs-mark path {
  fill: none;
  stroke: var(--tick-color, #1c3f7a);   /* the same blue as your price number */
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* check when on, X when off */
.a-gifs[aria-checked="true"]  .a-gifs-check { opacity: 1; }
.a-gifs[aria-checked="false"] .a-gifs-x     { opacity: 1; }