/* ═══════════════════════════════════════════════════════════════════════════
   "Postcards from us." and the prototype "The lineup."

   Kept out of styles.css so the whole prototype can be merged or removed in one
   move. Uses only the existing palette and type scale; nothing here overrides an
   existing rule, so the hero, navigation and RSVP are untouched.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── "Postcards from us." ───────────────────────────────────────────────── */

.story {
  background: var(--cream);
  border-top: 1px solid rgba(181, 150, 90, 0.34);
}

/* Stacked by default; the two-column split only makes sense once there's room
   for the display type to sit beside the copy. */
.story-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 4vw, 6rem);
  align-items: end;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

@media (min-width: 720px) {
  .story-heading {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
}

.story-heading .lead {
  margin: 0;
  color: rgba(23, 42, 44, 0.76);
}

.polaroid-wall {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(2rem, 4vw, 3.25rem);
}

.polaroid-cell {
  margin: 0;
}

/* The source photograph stays untouched. The frame and aged instant-film
 * treatment are built entirely in CSS so the look remains reversible. */
.polaroid {
  margin: 0;
  padding: 0.85rem 0.85rem 0;
  background:
    radial-gradient(circle at 82% 12%, rgba(188, 133, 72, 0.1), transparent 34%),
    linear-gradient(rgba(244, 236, 219, 0.94), rgba(235, 222, 198, 0.98)),
    #efe4d1;
  border: 1px solid rgba(158, 122, 72, 0.5);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 18px 40px rgba(7, 22, 24, 0.16),
    0 3px 10px rgba(7, 22, 24, 0.1);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.polaroid-photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #d9cdbd;
  box-shadow:
    inset 0 0 0 1px rgba(14, 28, 30, 0.14),
    inset 0 0 18px rgba(61, 42, 28, 0.07);
  aspect-ratio: 1 / 1;
}

.polaroid-photo picture {
  display: contents;
}

.polaroid-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(0.62) contrast(0.83) brightness(1.08) sepia(0.18);
  transform: scale(1.012);
}

/* Slight variations keep eight photos from looking like one filter pasted
 * over the whole wall. Values stay close enough to remain a coherent set. */
.polaroid-cell:nth-child(3n + 2) .polaroid-photo img {
  filter: saturate(0.67) contrast(0.86) brightness(1.055) sepia(0.14)
          hue-rotate(-3deg);
}

.polaroid-cell:nth-child(3n + 3) .polaroid-photo img {
  filter: saturate(0.57) contrast(0.81) brightness(1.1) sepia(0.21)
          hue-rotate(2deg);
}

/* Warm cast, faint edge fade and lifted highlights—the cues of aged instant
 * film without the heavy orange wash or fake scratches of a novelty filter. */
.polaroid-photo::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 46%, transparent 52%, rgba(42, 30, 18, 0.25) 100%),
    linear-gradient(145deg, rgba(255, 218, 154, 0.29), transparent 42%, rgba(71, 88, 78, 0.11));
  mix-blend-mode: soft-light;
}

/* Fine monochrome grain. Inline SVG avoids another request and is deliberately
 * low-opacity so faces remain clear on small screens. */
.polaroid-photo::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.56'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: soft-light;
}

@media (prefers-contrast: more) {
  .polaroid-photo img {
    filter: none;
  }

  .polaroid-photo::before,
  .polaroid-photo::after {
    display: none;
  }
}

.polaroid-caption {
  padding: 0.85rem 0.25rem 1.05rem;
  text-align: center;
}

/* The handwritten treatment is confined to this one element on purpose. */
.polaroid-hand {
  display: block;
  color: var(--ink-deep);
  font-family: "Caveat", "Segoe Script", cursive;
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

.polaroid-meta {
  display: block;
  margin-top: 0.4rem;
  color: rgba(23, 42, 44, 0.55);
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

/* Mobile first: one orderly column, square on, nothing tilted.
 *
 * The tilt lives on .polaroid (the <figure>), never on .polaroid-cell (the
 * <li>). The <li> carries the site's own .reveal class, and styles.css already
 * animates that with `html.reveal-ready .reveal.is-visible { transform: ... }`
 * — a far more specific selector that would silently win. Rotating the inner
 * element keeps the entrance animation and the tilt on separate elements
 * instead of fighting over one `transform`. */
.polaroid {
  transform: none;
}

@media (min-width: 720px) {
  .polaroid-wall {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }

  /* Casually scattered — staggered vertical offsets plus a per-photo tilt. */
  .polaroid {
    transform: rotate(var(--polaroid-tilt, 0deg));
  }
  .polaroid-cell:nth-child(3n + 2) { margin-top: clamp(2rem, 5vw, 4.5rem); }
  .polaroid-cell:nth-child(3n + 3) { margin-top: clamp(0.75rem, 2vw, 1.75rem); }
  .polaroid-cell:nth-child(6n + 4) { margin-left: clamp(0rem, 2vw, 1.5rem); }

  .polaroid:hover {
    transform: rotate(calc(var(--polaroid-tilt, 0deg) * -0.35)) translateY(-6px) scale(1.015);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.7) inset,
      0 28px 60px rgba(7, 22, 24, 0.22),
      0 4px 12px rgba(7, 22, 24, 0.12);
  }
}

@media (min-width: 1080px) {
  .polaroid-wall {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .polaroid-cell:nth-child(4n + 2) { margin-top: clamp(2.5rem, 5vw, 5rem); }
  .polaroid-cell:nth-child(4n + 3) { margin-top: clamp(1rem, 2vw, 2rem); }
  .polaroid-cell:nth-child(4n + 4) { margin-top: clamp(3rem, 6vw, 6rem); }
}

/* ─── "The lineup." ──────────────────────────────────────────────────────── */

.lineup {
  background: var(--lux-ivory);
  border-top: 1px solid rgba(181, 150, 90, 0.34);
}

.lineup-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 4vw, 6rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 720px) {
  .lineup-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.lineup-intro .lead {
  margin-bottom: 0.75rem;
}

.lineup-intro p:not(.lead) {
  margin: 0;
  color: rgba(23, 42, 44, 0.7);
  font-size: 0.95rem;
}

/* ── search / add ── */

.song-search {
  max-width: 34rem;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}

.song-search-field > span {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--lux-oxblood);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.13em;
}

.song-search-field input {
  width: 100%;
  padding: 0.8rem 0.9rem;
  color: var(--ink-deep);
  background: var(--paper);
  border: 1px solid rgba(181, 150, 90, 0.55);
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 1rem; /* 16px — stops iOS zooming on focus */
  line-height: 1.5;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.song-search-field input:focus {
  outline: 0;
  border-color: var(--lux-gold-ink);
  box-shadow: 0 0 0 3px rgba(181, 150, 90, 0.22);
}

.song-search-hint {
  margin: 0.5rem 0 0;
  color: rgba(23, 42, 44, 0.6);
  font-size: 0.78rem;
}

.song-results {
  margin-top: 1rem;
}

.song-results:empty {
  display: none;
}

.song-empty,
.song-fineprint {
  margin: 0;
  color: rgba(23, 42, 44, 0.7);
  font-size: 0.88rem;
  line-height: 1.6;
}

.song-fineprint {
  margin-top: 0.7rem;
  font-size: 0.78rem;
  color: rgba(23, 42, 44, 0.58);
}

.song-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.4rem;
}

.song-option {
  width: 100%;
  padding: 0.7rem 0.85rem;
  display: grid;
  gap: 0.15rem;
  text-align: left;
  color: var(--ink-deep);
  background: var(--paper);
  border: 1px solid rgba(181, 150, 90, 0.45);
  border-radius: 2px;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}

.song-option:hover,
.song-option[aria-pressed="true"] {
  background: rgba(215, 195, 154, 0.24);
  border-color: var(--lux-gold);
}

.song-option-title {
  font-family: var(--editorial);
  font-size: 1.08rem;
  line-height: 1.25;
}

.song-option-artist {
  color: rgba(23, 42, 44, 0.62);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.song-flag {
  margin-top: 0.25rem;
  color: var(--lux-gold-ink);
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.13em;
}

.song-panel {
  padding: 1.1rem;
  background: var(--paper);
  border: 1px solid rgba(181, 150, 90, 0.5);
  border-radius: 2px;
}

.song-panel-title {
  margin: 0;
  font-family: var(--editorial);
  font-size: 1.5rem;
  line-height: 1.2;
}

.song-panel-artist {
  margin: 0.2rem 0 0.9rem;
  color: rgba(23, 42, 44, 0.62);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.song-state {
  margin: 0 0 0.75rem;
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.song-state-good { color: var(--lux-gold-ink); }
.song-state-neutral { color: rgba(23, 42, 44, 0.6); }

.song-suggest {
  margin-top: 0.9rem;
}

/* Its own treatment rather than .button-ghost, which is built for the dark
   sections and reads as disabled grey-on-cream inside this ivory panel. */
.song-undo {
  color: var(--lux-oxblood);
  background: transparent;
  border-color: rgba(84, 45, 50, 0.45);
}

.song-undo:hover {
  color: var(--paper);
  background: var(--lux-oxblood);
  border-color: var(--lux-oxblood);
}

/* ── the poster ── */

.poster {
  padding: clamp(0.5rem, 2vw, 1.25rem);
  background:
    linear-gradient(150deg, #14282b, var(--ink-deep) 70%);
  border: 1px solid rgba(181, 150, 90, 0.5);
  box-shadow: 0 34px 90px rgba(4, 14, 16, 0.32);
}

/* Inner keyline — a printed-poster convention rather than any festival's mark. */
.poster-frame {
  padding: clamp(1.75rem, 5vw, 4rem) clamp(1rem, 4vw, 3.5rem);
  border: 1px solid rgba(181, 150, 90, 0.42);
  text-align: center;
}

.poster-header {
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid rgba(181, 150, 90, 0.3);
}

.poster-kicker,
.poster-date {
  margin: 0;
  color: var(--lux-gold-soft);
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.24em;
}

.poster-title {
  margin: 0.7rem 0;
  color: var(--lux-ivory);
  font-family: var(--display);
  font-size: clamp(1.9rem, 5.5vw, 3.4rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 0.95;
}

.poster-date {
  margin-top: 0.75rem;
  color: rgba(247, 242, 233, 0.72);
  letter-spacing: 0.2em;
}

.poster-tier {
  margin: 0;
  padding: 0;
  list-style: none;
}

.poster-tier li {
  position: relative;
}

/* Tier 1 — headliners. */
.poster-tier-headline {
  padding: clamp(1.75rem, 4vw, 2.75rem) 0 0;
}

.poster-tier-headline li {
  margin-bottom: clamp(1rem, 2.5vw, 1.6rem);
}

.poster-tier-headline .poster-song {
  display: block;
  color: var(--lux-ivory);
  font-family: var(--editorial);
  font-size: clamp(1.85rem, 7vw, 4rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.015em;
}

.poster-tier-headline .poster-artist {
  display: block;
  margin-top: 0.3rem;
  color: rgba(247, 242, 233, 0.6);
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

/* Tier 2 — supporting. */
.poster-tier-support {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem clamp(1rem, 3vw, 2.25rem);
}

.poster-tier-support li {
  padding: 0.35rem 0;
}

.poster-tier-support .poster-song {
  color: rgba(247, 242, 233, 0.94);
  font-family: var(--editorial);
  font-size: clamp(1.05rem, 2.6vw, 1.7rem);
  font-weight: 500;
  line-height: 1.25;
}

.poster-tier-support .poster-artist {
  display: block;
  color: rgba(247, 242, 233, 0.45);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

/* Tier 3 — everything else. Deliberately floored at a readable size: low votes
   should read as "further down the bill", never as decoration. */
.poster-tier-rest {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 0.9rem;
}

.poster-tier-rest .poster-song {
  color: rgba(247, 242, 233, 0.78);
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.poster-tier-rest li + li::before {
  content: "·";
  position: absolute;
  left: -0.55rem;
  color: rgba(181, 150, 90, 0.6);
}

/* Kendell & Andy picks — a separate axis from popularity, so it reads at every
   tier without competing with size. */
.poster-pick-mark {
  margin-right: 0.35rem;
  color: var(--lux-gold);
  font-style: normal;
}

.poster-tier li[data-pick="true"] .poster-song {
  color: var(--lux-gold-soft);
}

.poster-tier-headline li[data-pick="true"] .poster-song {
  text-shadow: 0 0 34px rgba(181, 150, 90, 0.32);
}

.poster-rule {
  margin: clamp(1.5rem, 3.5vw, 2.5rem) 0;
  color: rgba(181, 150, 90, 0.7);
  font-size: 0.7rem;
  letter-spacing: 0.6em;
}

.poster-footer {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.25rem, 3vw, 2rem);
  border-top: 1px solid rgba(181, 150, 90, 0.3);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1rem;
  color: rgba(247, 242, 233, 0.6);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.poster-footer span:first-child {
  color: var(--lux-gold-soft);
}

@media (prefers-reduced-motion: reduce) {
  .polaroid,
  .polaroid:hover {
    transition: none;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 720px) {
  .polaroid,
  .polaroid:hover {
    transform: rotate(var(--polaroid-tilt, 0deg));
  }
}