/* =========================================
   Sketchbook page
   ========================================= */

body {
  --paper: #FAF8F0;
  /* used by the background stack and the lightbox */
  --background-color: var(--paper);

  background-color: var(--paper);

  background-image:
    /* sketchbook noise (top) */
    radial-gradient(
      circle at 20% 30%,
      rgba(90, 70, 40, 0.3) 0 0.9px,
      transparent 0.8px
    ),
    /* base layers from styles.css (bottom) */
    var(--background-image),
    linear-gradient(var(--background-color), var(--background-color));

  background-blend-mode:
    multiply,    /* sketchbook noise */
    luminosity,  /* paper texture — same as styles.css */
    normal;      /* solid color base */

  background-size:
    35px 35px,
    700px,
    100% 100%;
}

/*-----------------------------------infinite hacks------------------*/

body.tag-infinite {
  --infinite-overlay: rgb(250 248 240 / 0.85);

  position: relative;
  isolation: isolate;

  background-image:
    linear-gradient(
      var(--infinite-overlay),
      var(--infinite-overlay)
    ),
    var(--fullpiece-image);
  background-blend-mode: normal;
  background-repeat: repeat;
  background-position: 70% 50%;
  background-size: 20em auto;
}

body.tag-infinite > header,
body.tag-infinite > main,
body.tag-infinite > footer {
  position: relative;
  z-index: 0;
}

body.tag-infinite .fullpiece {
  position: relative;
  z-index: 1;
  cursor: zoom-in;
}

@media (prefers-color-scheme: dark) {
  body.tag-infinite {
    --infinite-overlay: oklch(from var(--artwork-text-color)
      calc(l * 0.67)
      calc(c * 0.8)
      h
      / 0.88
    );
    --page-text: #f1eee7;

    color: var(--page-text);
    background-color: oklch(from var(--artwork-text-color)
      calc(l * 0.56)
      calc(c * 0.5)
      h
    );
  }
}

body.tag-infinite footer {
  border: 0;
  --footer-text-color: oklch(from var(--text-color)
    calc(l * 0.78)
    calc(c * 1.10)
    h
  );
}

body.tag-infinite footer a {
  color: oklch(from var(--artwork-text-color)
    calc(l * 0.9)
    calc(c * 1.10)
    h
  );
}

/* =========================================
   Gallery
   Base rule: fallback for any .gallery outside .timeline.
   On this page every .gallery is inside .timeline, so the
   timeline rules below are what actually render.
   ========================================= */

.gallery {
  position: relative;
  isolation: isolate;
  display: grid;
}

/* Timeline layout: year-grouped galleries */

.gallerywrapper.timeline {
  text-align: center;
}


/* =========================================
   Gallery items
   ========================================= */

.gallery-item {
  position: relative;
  z-index: 1;

  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;

  transition:
    transform 160ms ease,
    filter 160ms ease;

  /* default mask variables — overridden per nth-child below */
  --thumbnail-mask: none;
  --mask-size: 100% 100%;
}


html:not(.view-feed) .gallery-item {
  filter: drop-shadow(0px 2px 2px rgba(40, 37, 45, 0.15));
}

html:not(.view-feed) .gallery-item img {
  display: block;

  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;

  border: 0;
  outline: 0;
  background: transparent;

  /* raster mask, driven by the nth-child variables */
  -webkit-mask-image: var(--thumbnail-mask);
  mask-image: var(--thumbnail-mask);

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-position: center;
  mask-position: center;

  -webkit-mask-mode: luminance;
  mask-mode: luminance;

  -webkit-mask-size: var(--mask-size, 100% 100%);
  mask-size: var(--mask-size, 100% 100%);
}

/* =========================================
   15-item mask pattern
   ========================================= */

/* 1 — box1 */
.gallery-item:nth-child(15n + 1) {
  --mask-size: 100% 100%;
  --thumbnail-mask: url("/assets/box1.png");
  transform: rotate(-1.8deg) translate(-1px, 1px);
}

/* 2 — box2 */
.gallery-item:nth-child(15n + 2) {
  --mask-size: 101% 104%;
  --thumbnail-mask: url("/assets/box2.png");
  transform: rotate(-3.4deg) translate(1px, -1px);
}

/* 3 — box3 */
.gallery-item:nth-child(15n + 3) {
  --mask-size: 103% 100%;
  --thumbnail-mask: url("/assets/box3.png");
  transform: rotate(-1deg) translate(1px, 1px);
}

/* 4 — box4 */
.gallery-item:nth-child(15n + 4) {
  --mask-size: 102% 101%;
  --thumbnail-mask: url("/assets/box4.png");
  transform: rotate(5deg) translate(-1px, 0);
}

/* 5 — box5 */
.gallery-item:nth-child(15n + 5) {
  --mask-size: 101% 103%;
  --thumbnail-mask: url("/assets/box5.png");
  transform: rotate(-1.5deg) translate(-1px, 1px);
}

/* 6 — box1 */
.gallery-item:nth-child(15n + 6) {
  --mask-size: 104% 98%;
  --thumbnail-mask: url("/assets/box1.png");
  transform: rotate(1.2deg) translate(1px, -1px);
}

/* 7 — box2 */
.gallery-item:nth-child(15n + 7) {
  --mask-size: 105% 99%;
  --thumbnail-mask: url("/assets/box2.png");
  transform: rotate(-1.6deg) translate(-1px, 1px);
}

/* 8 — box3 */
.gallery-item:nth-child(15n + 8) {
  --mask-size: 99% 104%;
  --thumbnail-mask: url("/assets/box3.png");
  transform: rotate(1.8deg) translate(-1px, -1px);
}

/* 9 — box4 */
.gallery-item:nth-child(15n + 9) {
  --mask-size: 100% 102%;
  --thumbnail-mask: url("/assets/box4.png");
  transform: rotate(-2.4deg) translate(0, 1px);
}

/* 10 — box5 */
.gallery-item:nth-child(15n + 10) {
  --mask-size: 103% 100%;
  --thumbnail-mask: url("/assets/box5.png");
  transform: rotate(2.2deg) translate(1px, 0);
}

/* 11 — box1 */
.gallery-item:nth-child(15n + 11) {
  --mask-size: 98% 103%;
  --thumbnail-mask: url("/assets/box1.png");
  transform: rotate(-2.3deg) translate(0, 1px);
}

/* 12 — box2 */
.gallery-item:nth-child(15n + 12) {
  --mask-size: 98% 102%;
  --thumbnail-mask: url("/assets/box2.png");
  transform: rotate(2.1deg) translate(1px, 0);
}

/* 13 — box3 */
.gallery-item:nth-child(15n + 13) {
  --mask-size: 105% 98%;
  --thumbnail-mask: url("/assets/box3.png");
  transform: rotate(-2.2deg) translate(0, 1px);
}

/* 14 — box4 */
.gallery-item:nth-child(15n + 14) {
  --mask-size: 104% 99%;
  --thumbnail-mask: url("/assets/box4.png");
  transform: rotate(1.5deg) translate(1px, -1px);
}

/* 15 — box5 */
.gallery-item:nth-child(15n + 15) {
  --mask-size: 99% 104%;
  --thumbnail-mask: url("/assets/box5.png");
  transform: rotate(-2deg) translate(0, -1px);
}

/* =========================================
   Small vertical variations
   ========================================= */

.gallery-item:nth-child(5n + 1) {
  margin-top: 0.45rem;
}

.gallery-item:nth-child(5n + 3) {
  margin-top: -0.3rem;
}

html.view-feed .timeline .gallery-item {
  transform: none;
}

/* =========================================
   Responsive layout
   ========================================= */
/*
@media (max-width: 560px) {
  .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    padding: 0.6rem;
  }
}*/

/* =========================================
   Reduced motion
   ========================================= */

@media (prefers-reduced-motion: reduce) {
  .gallery-item {
    transition: none;
  }

  .gallery-item:hover,
  .gallery-item:focus-visible {
    transform: none;
  }
}

/* =========================================
   Dark mode
   ========================================= */

@media (prefers-color-scheme: dark) {
  body {
    --paper: #806A57;
    --border-color: oklch(
      from var(--paper)
      calc(l * 0.88)
      c
      h
    );
    --footer-text-color: oklch(
      from var(--text-color)
      calc(l * 0.83)
      calc(c * 1)
      h
    );
        --sketchbook-link: oklch(
      from var(--artwork-text-color)
      max(0.65, min(0.8, calc(l * 1.8)))
      calc(c * 1.2)
      h
    );

    color: #ffffff;

    background-image:
      /* sketchbook noise (top) */
      radial-gradient(
        circle at 20% 30%,
        rgba(20, 5, 70, 0.55) 0 0.9px,
        transparent 0.8px
      ),
      /* base layers from styles.css (bottom) */
      var(--background-image),
      linear-gradient(var(--background-color), var(--background-color));

    background-blend-mode:
      multiply,    /* sketchbook noise */
      color-burn,  /* paper — matches styles.css dark mode */
      normal;
  }

  .gallery-item {
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
  }

  body a,
  body a:visited,
  body .view-toggle {
    color: var(--sketchbook-link) !important;
  }
}
  
  .gallery {
    gap: 0.35rem;
  }
}