:root {
  --wall: #6e4b32;
  --wall-light: #7a553a;
  --wall-dark: #63432c;
  --paper: #f3f1ec;
  --ink: #2f2a26;
  --ink-soft: #6b625a;
  --mustard: #e2bf62;
  --hand: "Nothing You Could Do", "Segoe Print", "Bradley Hand", cursive;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --plank: clamp(5rem, 11vw, 9rem);
  color-scheme: dark;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  font-family: var(--ui);
  color: var(--paper);
  background-color: var(--wall);
  /* Painted vertical planks: a streaky grain, a seam every plank, and
     three alternating tones so the boards don't read as a pattern. */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='1600'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6 0.008' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0.9 0 0 0 -0.32'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(
      90deg,
      transparent 0 calc(var(--plank) - 3px),
      rgba(0, 0, 0, 0.5) calc(var(--plank) - 3px) calc(var(--plank) - 1px),
      rgba(255, 255, 255, 0.06) calc(var(--plank) - 1px) var(--plank)
    ),
    repeating-linear-gradient(
      90deg,
      var(--wall) 0 var(--plank),
      var(--wall-light) var(--plank) calc(var(--plank) * 2),
      var(--wall-dark) calc(var(--plank) * 2) calc(var(--plank) * 3)
    );
}

/* The board is the viewport. Photographs are clamped inside it, so
   nothing can be dragged out of view and nothing scrolls. */
.board {
  position: fixed;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  -webkit-user-select: none;
  user-select: none;
}

.board::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 50% 45%,
    transparent 40%,
    rgba(0, 0, 0, 0.45) 100%
  );
}

.board.dragging,
.board.dragging .card {
  cursor: grabbing;
}

.sprig {
  position: absolute;
  width: clamp(6rem, 17vmin, 12rem);
  height: auto;
  pointer-events: none;
  opacity: 0.9;
}

.sprig-a {
  left: -1%;
  bottom: -2%;
  transform: rotate(14deg);
}

.sprig-b {
  right: -1%;
  bottom: -2%;
  transform: scaleX(-1) rotate(10deg);
}

.card {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  cursor: grab;
  touch-action: none;
  transform-origin: 50% 50%;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.35),
    0 10px 22px -8px rgba(0, 0, 0, 0.6);
  transition: box-shadow 0.2s ease;
}

.card.lifted {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.3),
    0 26px 40px -12px rgba(0, 0, 0, 0.7);
}

.card:focus-visible {
  outline: 3px solid var(--mustard);
  outline-offset: 4px;
}

.settling .card {
  transition:
    transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.2s ease;
}

/* A strip of washi tape across the top edge. Colour, angle and offset
   are set per card so no two sit the same way. */
.tape {
  position: absolute;
  top: calc(var(--s) * -0.06);
  left: 50%;
  width: 40%;
  height: calc(var(--s) * 0.12);
  background: var(--tape, rgba(226, 191, 98, 0.78));
  transform: translateX(calc(-50% + var(--tape-shift, 0px)))
    rotate(var(--tape-angle, 0deg));
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
  pointer-events: none;
  -webkit-mask: linear-gradient(
      90deg,
      transparent 0 2px,
      #000 2px calc(100% - 2px),
      transparent calc(100% - 2px)
    )
    center / 100% 100%;
}

.photo {
  padding: var(--p) var(--p) calc(var(--p) * 3.4);
  opacity: 0;
}

.photo.ready {
  opacity: 1;
  transition:
    opacity 0.5s ease,
    box-shadow 0.2s ease;
}

.settling .photo.ready {
  transition:
    transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.5s ease,
    box-shadow 0.2s ease;
}

.photo img {
  display: block;
  object-fit: cover;
  background: #d9d5cc;
  -webkit-user-drag: none;
  pointer-events: none;
}

.photo figcaption {
  position: absolute;
  left: var(--p);
  right: var(--p);
  bottom: 0;
  height: calc(var(--p) * 3.4);
  line-height: calc(var(--p) * 3.4);
  font-family: var(--hand);
  font-size: calc(var(--p) * 1.7);
  color: var(--ink-soft);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}

.tiny .photo figcaption,
.tiny .note p {
  display: none;
}

.board:not(.laid-out) .note {
  visibility: hidden;
}

.note {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--s) * 0.08);
  text-align: center;
}

.note h1 {
  margin: 0;
  font-family: var(--hand);
  font-size: calc(var(--s) * 0.36);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.note .swash {
  display: block;
  width: 62%;
  height: auto;
  margin-top: calc(var(--s) * -0.02);
}

.note p {
  margin: calc(var(--s) * 0.05) 0 0;
  font-family: var(--hand);
  font-size: calc(var(--s) * 0.072);
  line-height: 1.4;
  color: var(--ink-soft);
}

.status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 2rem;
  text-align: center;
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--paper);
}

.status[hidden] {
  display: none;
}

.reset {
  position: fixed;
  top: max(0.75rem, env(safe-area-inset-top));
  right: max(0.75rem, env(safe-area-inset-right));
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 0.5rem 0.95rem;
  font: 500 0.875rem/1.2 var(--ui);
  color: var(--paper);
  background: rgba(38, 24, 15, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    opacity 0.2s ease;
}

.reset:hover:not(:disabled) {
  color: #1d2127;
  background: var(--mustard);
}

.reset:disabled {
  opacity: 0.4;
  cursor: default;
}

.reset:focus-visible {
  outline: 2px solid var(--mustard);
  outline-offset: 2px;
}

/* Lightbox */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  display: none;
  justify-content: center;
  align-items: center;
  height: 100dvh;
  width: 100dvw;
  background-color: rgba(24, 16, 10, 0.95);
}

.lightbox.active {
  display: flex;
}

.lightbox figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
}

.lightbox img {
  border-radius: 0.25rem;
  max-width: 90dvw;
  max-height: 84dvh;
  object-fit: contain;
}

.lightbox figcaption {
  min-height: 1.6rem;
  font-family: var(--hand);
  font-size: 1.35rem;
  color: var(--paper);
}

.lightbox-close {
  position: absolute;
  top: 0.75rem;
  right: 1.25rem;
  border: none;
  padding: 0;
  font-size: 2rem;
  cursor: pointer;
  color: var(--paper);
  background: none;
  transition: color 0.2s ease;
}

.lightbox-close:hover {
  color: var(--mustard);
}

.lightbox-nav {
  position: absolute;
  border: none;
  border-radius: 999px;
  padding: 0.25rem 0.85rem;
  cursor: pointer;
  color: var(--paper);
  background: rgba(0, 0, 0, 0.5);
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

@media (orientation: landscape) {
  .lightbox-nav {
    font-size: 2rem;
    top: 50%;
    transform: translateY(-50%);
  }
}

@media (orientation: portrait) {
  .lightbox-nav {
    font-size: 1.5rem;
    bottom: 1rem;
  }
}

.lightbox-nav:hover {
  color: #1d2127;
  background: var(--mustard);
}

.lightbox button:focus-visible {
  outline: 2px solid var(--mustard);
  outline-offset: 2px;
}

.lightbox-prev {
  left: 2rem;
}

.lightbox-next {
  right: 2rem;
}

@media (prefers-reduced-motion: reduce) {
  .settling .card,
  .settling .photo.ready,
  .photo.ready {
    transition: none;
  }
}