/* Atlas "stamp" card — ADAPTED, much-reduced port of the original
 * AvianVisitors project's stamp system (avian/frontend/stamps.css +
 * stamp-batch-{root,a,b,c}.css + stamps.js + stamp-batch-{a,b,c}.js,
 * ~5,180 lines total across CSS+JS). That system generates a distinct,
 * bespoke card *design* per species — half a dozen+ hand-built templates
 * (a field-guide plate, a "flock" duotone poster, a halftone/dither
 * treatment, a geometric field-book layout, and more), each with its own
 * typography, SVG overlays, and sometimes a canvas-rendered effect,
 * assigned across species via a batching system. Reproducing that whole
 * multi-template design system was judged genuinely impractical at this
 * project's scale (it's ~4x this project's entire previous stats.js) —
 * this ports the one piece that actually matters for "does this read as
 * a stamp": the shared perforated-edge card frame, texture, and a single
 * faithful card layout applied to every species (with a small rotating
 * background-color set standing in for the original's per-species/
 * per-family palette variety).
 *
 * VERBATIM: the perforation mask recipe below (radial-gradient masks
 * repeated along each edge, mask-composite: intersect) is copied
 * unchanged from the original's `.stamp` base rule — a real postage-stamp
 * perforation, not an approximation of one; it's a pure-CSS technique,
 * not an image asset, so there's nothing to license here.
 *
 * ADAPTED: the paper-texture background image is the original's own
 * `paper-texture-grey.png` (CC0 — see assets/stamp/NOTICE.md), used the
 * same way (multiply-blended overlay). Fraunces + Space Mono (SIL OFL —
 * see fonts/stamp/NOTICE.md) are the same two families the original uses
 * for a card's display numeral and small-caps labels.
 *
 * SIMPLIFIED: one card template (not a batch system), a small fixed
 * color rotation instead of per-species/per-family bespoke palettes, no
 * canvas dither/halftone effects, no masonry packing (plain CSS grid).
 */

@font-face {
  font-family: 'Stamp Fraunces';
  src: url('./fonts/stamp/fraunces-1.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Stamp Mono';
  src: url('./fonts/stamp/spacemono-1.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Stamp Mono';
  src: url('./fonts/stamp/spacemono-2.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============ Atlas controls (sort segmented control) ============ */
.atlas-controls { display: flex; justify-content: flex-end; margin: 0 0 18px; }
.atlas-sort {
  display: inline-flex; padding: 3px; position: relative;
  background: var(--paper-2); border-radius: 999px; box-shadow: var(--recess);
}
.atlas-sort button {
  background: transparent; border: 0; color: var(--ink-soft);
  width: 30px; height: 26px; padding: 0; border-radius: 999px;
  cursor: pointer; position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color 200ms ease;
}
.atlas-sort button svg { width: 13px; height: 13px; display: block; }
.atlas-sort button:hover, .atlas-sort button[aria-current="true"] { color: var(--ink); }
.atlas-sort button .tip {
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  white-space: nowrap; font: 9px ui-monospace, Menlo, monospace; letter-spacing: 0.14em;
  text-transform: lowercase; color: var(--ink-soft);
  background: var(--paper); padding: 3px 8px; border-radius: 4px; box-shadow: var(--raised);
  opacity: 0; pointer-events: none; transition: opacity 160ms ease;
}
.atlas-sort button:hover .tip { opacity: 1; }

/* ============ Family-grouped headers ============ */
.atlas-family-group + .atlas-family-group { margin-top: 44px; }
.atlas-family-head {
  display: flex; align-items: baseline; gap: 14px; margin: 0 0 18px;
}
.atlas-family-head h3 {
  margin: 0; font: italic 500 18px/1 ui-serif, "Iowan Old Style", Georgia, serif;
  color: var(--ink);
}
.atlas-family-head .rule { flex: 1 1 auto; height: 1px; background: var(--hairline); }
.atlas-family-head .count {
  font: 10px ui-monospace, Menlo, monospace; color: var(--ink-soft); letter-spacing: 0.06em;
}

/* ============ Grid ============
 * Plain CSS grid, not the original's masonry packing engine (packAtlasGrids)
 * — see this file's header. */
.atlas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 22px;
  max-width: 1280px; margin: 0 auto;
}

/* ============ The stamp itself ============ */
.stamp-card { background: transparent; border: 0; padding: 0; cursor: pointer; text-align: left; }
.stamp-card:focus-visible .stamp { outline: 2px solid var(--accent); outline-offset: 3px; }

.stamp {
  --stamp-paper: #eef1e9;
  --stamp-ink: #26241d;
  --stamp-muted: color-mix(in srgb, var(--stamp-ink) 55%, transparent);
  width: 100%; aspect-ratio: 0.8;
  background: var(--stamp-paper);
  padding: 7px;
  border-radius: 2px;
  filter: drop-shadow(0 8px 16px rgba(20, 17, 13, 0.28));
  transition: transform 160ms ease, filter 160ms ease;
  /* Perforated edge — verbatim technique from the original's .stamp rule. */
  --pr: 3.2px; --ps: 12px;
  -webkit-mask:
    radial-gradient(circle var(--pr) at 50% 0, #0000 calc(100% - .04px), #000 100%) 0 0/var(--ps) 100% repeat-x,
    radial-gradient(circle var(--pr) at 50% 100%, #0000 calc(100% - .04px), #000 100%) 0 0/var(--ps) 100% repeat-x,
    radial-gradient(circle var(--pr) at 0 50%, #0000 calc(100% - .04px), #000 100%) 0 0/100% var(--ps) repeat-y,
    radial-gradient(circle var(--pr) at 100% 50%, #0000 calc(100% - .04px), #000 100%) 0 0/100% var(--ps) repeat-y;
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle var(--pr) at 50% 0, #0000 calc(100% - .04px), #000 100%) 0 0/var(--ps) 100% repeat-x,
    radial-gradient(circle var(--pr) at 50% 100%, #0000 calc(100% - .04px), #000 100%) 0 0/var(--ps) 100% repeat-x,
    radial-gradient(circle var(--pr) at 0 50%, #0000 calc(100% - .04px), #000 100%) 0 0/100% var(--ps) repeat-y,
    radial-gradient(circle var(--pr) at 100% 50%, #0000 calc(100% - .04px), #000 100%) 0 0/100% var(--ps) repeat-y;
  mask-composite: intersect;
}
.stamp-card:hover .stamp { transform: translateY(-3px); filter: drop-shadow(0 14px 22px rgba(20, 17, 13, 0.34)); }

/* Rotating stand-in palette for the original's per-species bespoke
 * colorway — see this file's header for why this is a simplification. */
.stamp[data-pal="0"] { --stamp-paper: #dfe4d6; --stamp-ink: #262a1f; }
.stamp[data-pal="1"] { --stamp-paper: #201f1c; --stamp-ink: #f3efe6; }
.stamp[data-pal="2"] { --stamp-paper: #e8ddc6; --stamp-ink: #372a17; }
.stamp[data-pal="3"] { --stamp-paper: #c96a4f; --stamp-ink: #2a1510; }
.stamp[data-pal="4"] { --stamp-paper: #97a7ab; --stamp-ink: #1c2426; }
.stamp[data-pal="5"] { --stamp-paper: #f2ece0; --stamp-ink: #262220; }

.stamp-face {
  position: relative; height: 100%; overflow: hidden; border-radius: 1px;
  color: var(--stamp-ink);
  font-family: 'Stamp Mono', ui-monospace, Menlo, monospace;
}
.stamp-face::after {
  /* Paper texture — see this file's header. */
  content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background-image: url('./assets/stamp/paper-texture-grey.png');
  background-size: cover; background-position: center;
  mix-blend-mode: multiply; opacity: 0.16;
}
.stamp-family {
  position: absolute; top: 8%; left: 8%; right: 8%; z-index: 3;
  font: 700 8.5px/1.1 'Stamp Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--stamp-muted);
}
.stamp-count {
  position: absolute; top: 4%; right: 6%; z-index: 3;
  font: 900 30px/0.8 'Stamp Fraunces', Georgia, serif;
  color: var(--stamp-ink);
  font-variant-numeric: tabular-nums;
}
.stamp-art {
  position: absolute; left: 8%; right: 8%; top: 30%; bottom: 26%; z-index: 2;
  display: flex; align-items: flex-end; justify-content: center;
}
.stamp-art img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.stamp-caption {
  position: absolute; left: 8%; right: 8%; bottom: 7%; z-index: 3;
}
.stamp-com {
  display: block; font: 800 13px/1.08 'Stamp Fraunces', Georgia, serif;
  text-transform: uppercase; letter-spacing: -0.01em; color: var(--stamp-ink);
}
.stamp-sci {
  display: block; margin-top: 2px;
  font: italic 400 8px/1.2 ui-serif, Georgia, serif; color: var(--stamp-muted);
}
.stamp-brand {
  position: absolute; right: 6%; bottom: 7%; z-index: 3;
  writing-mode: vertical-rl;
  font: 700 6.5px/1 'Stamp Mono', monospace; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--stamp-muted); opacity: 0.75;
}