/* Michi's exhibit: the album (_includes/album.html), on the blue of Michi's room, its shelves' names
   and notes in the room's inks. Loaded on the home page (index.html's styles:), with album.js. */

/* Two shelves of Michi's album side by side, Upcoming then Postmarked, each shelf's name over its stamps.
   They share one row of equal places, one more than there are stamps (--slots), each shelf as wide as its
   stamps (--count, from album.js), Postmarked kept to the row's end: the place between them is the one an
   empty shelf takes, to be dropped on, saying it's empty. So the stamps keep their size, and the album its
   height, whichever shelf they're on. Under 1080px the shelves stack, and an empty one is just its line.
   A stamp leans by its --lean, left in the first place on its shelf and right in the second, as the
   album's do, and swings to its new lean when it moves. Picked up (album.js), it's lifted off the page and
   straightened, and the others make way. */
.album {
  --album-gap: clamp(18px, 2.4vw, 36px);
  display: grid;
  grid-template-columns: repeat(var(--slots, 6), minmax(0, 1fr));
  column-gap: var(--album-gap);
}
.album__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.album__shelf {
  grid-column: span var(--count, 1);
  display: grid;
  grid-template-columns: subgrid;
  align-content: start;
}
.album__shelf + .album__shelf { grid-column-end: -1; }
.album__name { grid-column: 1 / -1; color: var(--ink-2); text-box: trim-both cap alphabetic; }
.album__name .bit { margin-right: 10px; }
.album__stamps {
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  row-gap: var(--album-gap);
  margin-top: calc(var(--beat) * 1.25);
}
.album__shelf.is-empty .album__stamps { min-height: var(--stamp-height, 0); }
.album__shelf.is-empty .album__stamps::before {
  content: attr(data-empty);
  grid-column: 1 / -1;
  align-self: center;
  font-family: var(--mono);
  font-size: var(--meta);
  line-height: 1.55;
  color: var(--ink-3);
}
.album__stamp {
  position: relative;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.album__print { rotate: calc(-1 * var(--lean, 2deg)); }
.album__stamp:nth-child(even) .album__print { rotate: var(--lean, 2deg); }
.js .album__stamp { cursor: grab; touch-action: pan-y; }   /* a drag up or down still scrolls the page */
.album__stamp:focus-visible { outline: none; }
.album__stamp:focus-visible .album__print { outline: 2px solid var(--ink); outline-offset: 8px; border-radius: 2px; }
.album__stamp.is-lifted { z-index: 2; cursor: grabbing; }
.album .album__stamp.is-lifted .album__print { rotate: 0deg; scale: 1.08; filter: drop-shadow(0 18px 16px rgb(0 0 0 / 0.14)); }
.album__stamp:not(.is-postmarked) .stamp__postmark { opacity: 0; }

/* A stamp: white paper that stays light in dark mode, as in Michi, printed in its trip's ink, set on each stamp's svg:
   a square plate of its deep shade (--ink) with the map's window in it, the sea in a bright shade of it (--sea), the
   land a pale tint (--land), an inland map's hills a step deeper (--hills), no coast drawn; the route in the deep
   shade, and in the paper where it runs out to sea. */
.stamp__svg { display: block; width: 100%; height: auto; overflow: visible; forced-color-adjust: none; }
.stamp__paper { fill: #FFFFFF; }
.stamp__ink { fill: var(--ink); }
.stamp__sea { fill: var(--sea); }
.stamp__land { fill: var(--land); }
.stamp__hills { fill: var(--hills); }
.stamp__line, .stamp__sea-line, .stamp__paper-line, .stamp__river { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; }
.stamp__sea-line { stroke: var(--sea); }
.stamp__paper-line { stroke: #FFFFFF; }
.stamp__river { stroke: var(--sea); }
.stamp__cancel { fill: none; stroke: #2B2620; opacity: 0.72; }   /* one translucent coat of Michi's cancellation ink, however its strokes cross */
.stamp__struck { mix-blend-mode: multiply; }
.stamp__mark { fill: #2B2620; stroke: none; font-family: var(--sans); font-weight: 700; }
/* On a light page a postmark is struck once, the whole of it in its dark ink. On a dark one it's struck twice, as
   Michi strikes it in dark mode: masked to the stamp, in its dark ink, and where it runs off onto the page, in the
   page's light ink, as translucent and laid on rather than multiplied, where the dark one would vanish. The page
   is dark in dark mode, and in either mode on the blue of Michi's room (a room whose text is light); on paper it's
   white, and with forced colors the room's ground is gone and the scheme decides. */
.stamp__struck--page { display: none; mix-blend-mode: normal; }
.stamp__struck--page .stamp__cancel { stroke: #EDE6DA; }
.stamp__struck--page .stamp__mark { fill: #EDE6DA; }
@media screen and (prefers-color-scheme: dark) {
  .stamp__light-page { display: none; }
  .stamp__struck--page { display: inline; }
}
@media screen and (forced-colors: none) {
  .room--text-light .stamp__light-page { display: none; }
  .room--text-light .stamp__struck--page { display: inline; }
}
/* New York where the browser offers it (Safari's ui-serif), else a serif whose numerals stand on the line:
   Georgia's 3, 4, 5 and 9 hang below it, out of line with the title's capitals. */
.stamp__serif { font-family: ui-serif, Charter, "Bitstream Charter", "Sitka Text", Cambria, "Noto Serif", serif; font-variant-numeric: lining-nums; }
.stamp__caps { font-family: var(--sans); }

@media (prefers-reduced-motion: no-preference) {
  /* A stamp comes up off the shelf, swings to the lean of its new place, and is pressed into it; a postmark
     comes down on it, and goes again. */
  .album__print { transition: rotate 320ms var(--ease), scale 220ms var(--ease), filter 220ms var(--ease); }
  .album__stamp.is-pressed .album__print { animation: stamp-press 260ms var(--ease); }
  @keyframes stamp-press { 45% { scale: 0.97; } }
  .stamp__postmark { transition: opacity 240ms var(--ease); }
  .album__stamp.is-striking .stamp__postmark { animation: postmark-strike 340ms cubic-bezier(0.55, 0, 0.3, 1) both; }
  @keyframes postmark-strike { from { opacity: 0; scale: 1.25; } 62% { opacity: 1; scale: 0.985; } }
}

@media (max-width: 1079px) {
  /* The shelves stack, three stamps to a row; three across, the leans simply take turns. */
  .album { display: block; }
  .album__shelf + .album__shelf { margin-top: calc(var(--beat) * 1.75); }
  .album__shelf, .album__stamps { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--album-gap); }
  /* An empty shelf is just its name, its note at the end of the name's line, in a gap less room than a
     stamp row takes: the shelf holding every stamp has a gap more between its rows, so the album keeps
     its height. */
  .album__shelf.is-empty .album__stamps { min-height: 0; height: 0; margin-top: calc(var(--beat) * 1.25 - var(--album-gap)); }
  .album__shelf.is-empty .album__stamps::before { content: none; }
  /* on the name, not in the grid: Safari sets a grid's absolutely placed note past its last column */
  .album__shelf.is-empty .album__name { position: relative; }
  .album__shelf.is-empty .album__name::after {
    content: attr(data-empty);
    position: absolute;
    right: 0;
    bottom: 0;
    color: var(--ink-3);
    text-box: trim-both cap alphabetic;
  }
}

@media (max-width: 719px) {
  /* Two to a row, as the album has them on a phone; its second row starts leaning the other way. */
  .album__shelf, .album__stamps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .album__stamp:nth-child(n) .album__print { rotate: calc(-1 * var(--lean, 2deg)); }
  .album__stamp:is(:nth-child(4n+2), :nth-child(4n+3)) .album__print { rotate: var(--lean, 2deg); }
}