/* Base styles */
:root {
  --bg: #f5f1e8;
  --ink: #1b1b1b;
  --muted: #6a6a6a;
  --card: #fffdf8;
  --accent: #2c7be5;
  --shadow: 0 6px 22px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.12);
  --card-inset-x: 8px; /* left/right border thickness around image */
  --card-inset-top: 40px; /* top border thickness */
  --card-inset-bottom: 84px; /* bottom border thickness (polaroid area) */
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--ink);
  background: radial-gradient(1200px 600px at 80% -10%, #ffffff 10%, var(--bg) 50%, #eee6d8 100%);
}

.container { max-width: 1100px; margin: 0 auto; padding: 24px; }
.site-header { border-bottom: 1px solid #e8e1d4; background: #fff; }
.site-title { margin: 0; font-size: 34px; letter-spacing: 0.5px; }
.site-subtitle { margin: 6px 0 0; color: var(--muted); font-size: 14px; }

.site-footer { border-top: 1px solid #e8e1d4; background: #fff; }
.site-footer p { margin: 0; color: var(--muted); font-size: 14px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Desk of cards layout */
.card-desk {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px 24px;
  padding: 36px 6px 54px;
}

.card {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  aspect-ratio: 3/4;
  background: var(--card);
  border-radius: 12px;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transform-origin: center 80%;
  transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
  outline: none;
}

.card img {
  position: absolute;
  inset: var(--card-inset-top) var(--card-inset-x) var(--card-inset-bottom) var(--card-inset-x);
  width: calc(100% - (var(--card-inset-x) + var(--card-inset-x)));
  height: calc(100% - (var(--card-inset-top) + var(--card-inset-bottom)));
  object-fit: contain;
  filter: saturate(0) contrast(1.05);
}

.card-label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--card-inset-bottom);
  display: flex;
  align-items: center;
  padding: 0 60px;
  font-weight: 700;
  background: var(--card);
  text-align: left;
}

/* Staggered rotation to feel like a spread */
.card:nth-child(1) { transform: rotate(-6deg) translateY(0); }
.card:nth-child(2) { transform: rotate(3deg) translateY(6px); }
.card:nth-child(3) { transform: rotate(-2deg) translateY(4px); }
.card:nth-child(4) { transform: rotate(6deg) translateY(2px); }
.card:nth-child(5) { transform: rotate(-4deg) translateY(8px); }
.card:nth-child(6) { transform: rotate(2deg) translateY(6px); }
.card:nth-child(7) { transform: rotate(-1deg) translateY(3px); }

.card:focus-visible { box-shadow: 0 0 0 3px var(--accent), var(--shadow); }
.card:hover, .card:focus { transform: rotate(0deg) translateY(-8px) scale(1.03); filter: drop-shadow(0 8px 24px rgba(0,0,0,0.25)); z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .card, .card * { transition: none !important; }
}

@media (max-width: 560px) {
  .card-label { font-size: 14px; }
}

/* Pager */
.pager {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}
.pager .button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #e0d8c8;
  background: #ffffff;
  color: var(--ink);
  text-decoration: none;
}
.pager .button:hover { background: #fff8ed; }
.pager .next::after { content: "→"; display: inline-block; margin-left: 6px; }