/* Proof of Progress — Family Showcase · Direction G FUN gradient bento
   Bold color fields · spring stagger · hover lift+tilt · short-title type
   Tuned for 200–400 cards (content-visibility + lazy) */

:root {
  --cream: #f4efe6;
  --cream-deep: #ebe4d6;
  --ink: #1a1714;
  --ink-soft: rgba(26, 23, 20, 0.72);
  --ink-mute: rgba(26, 23, 20, 0.48);
  --paper: #faf7f1;
  --night: #0e0c0a;

  /* Direction G / Emblemo-adjacent bold fields */
  --coral: #e87a4f;
  --pink: #f08ab0;
  --rose: #d45d7a;
  --amber: #e8a03a;
  --lavender: #8b7fd4;
  --indigo: #4a4eb8;
  --sky: #4a8fb8;
  --mint: #5a9e86;
  --teal: #2f7a72;
  --umber: #8b5e3c;
  --saffron: #e8b84a;
  --seafoam: #3d9e8f;
  --berry: #b84a7a;
  --gold: #d4a04a;
  --slate: #5a6570;
  --citrus: #d4c04a;
  --orchid: #9a6fb8;
  --marine: #2f5f8a;
  --terracotta: #c46a4a;
  --lilac: #a890d4;
  --jade: #3d8a6a;
  --sunset: #e87a5a;
  --cobalt: #3a5fc4;
  --apricot: #e8a070;
  --plum: #7a4a8a;
  --aqua: #4a9eaa;
  --honey: #d4a060;
  --frost: #6a8aaa;
  --magenta: #c45a9a;
  --olive: #6a8a4a;
  --cherry: #d44a5a;
  --dusk: #6a5a9a;
  --lime: #8aba4a;
  --navy: #2a3a6a;
  --persimmon: #e86a3a;
  --iris: #7a6ad4;
  --ocean: #2a7a8a;
  --cinnamon: #a86a4a;
  --peach: #e8a888;
  --violet: #7a5ab8;

  --radius: clamp(18px, 2.4vw, 28px);
  --gap: clamp(10px, 1.4vw, 16px);
  --mast-h: 72px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.45, 0.64, 1);
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-sans: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  background:
    radial-gradient(1200px 600px at 10% -10%, color-mix(in srgb, var(--lavender) 18%, transparent), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, color-mix(in srgb, var(--coral) 14%, transparent), transparent 55%),
    radial-gradient(800px 400px at 50% 100%, color-mix(in srgb, var(--teal) 10%, transparent), transparent 50%),
    var(--cream);
  color: var(--ink);
  min-height: 100dvh;
  line-height: 1.45;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.03;
  background-image: var(--grain);
  background-size: 180px;
  mix-blend-mode: multiply;
}

/* ——— Mast ——— */
.mast {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
  padding: 1.05rem clamp(1rem, 3vw, 2rem);
  background: color-mix(in srgb, var(--cream) 82%, transparent);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
}

.mast-brand {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}

.mast-tag {
  font-family: var(--font-display);
  font-size: clamp(0.78rem, 1.6vw, 0.95rem);
  font-weight: 300;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}

.mast-tag em {
  font-style: italic;
  font-weight: 500;
  color: var(--coral);
}

.mast-lens {
  margin-left: auto;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  align-self: center;
}

/* ——— Era chips ——— */
.lanes {
  display: flex;
  gap: 0.4rem;
  padding: 0.95rem clamp(1rem, 3vw, 2rem) 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.lanes::-webkit-scrollbar { display: none; }

.lane-btn {
  flex: 0 0 auto;
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  background: color-mix(in srgb, #fff 55%, transparent);
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  padding: 0.55rem 1.05rem;
  border-radius: 999px;
  cursor: pointer;
  transition:
    background 0.35s var(--ease-out),
    color 0.35s,
    border-color 0.35s,
    transform 0.4s var(--spring),
    box-shadow 0.35s;
}

.lane-btn:hover {
  border-color: color-mix(in srgb, var(--coral) 45%, transparent);
  color: var(--ink);
  transform: translateY(-2px) rotate(-0.5deg);
  box-shadow: 0 8px 20px -12px rgba(232, 122, 79, 0.45);
}

.lane-btn[aria-selected="true"] {
  background: linear-gradient(135deg, var(--ink) 0%, #2a2430 100%);
  color: var(--cream);
  border-color: transparent;
  box-shadow: 0 10px 24px -14px rgba(26, 23, 20, 0.55);
}

.lane-btn .chip-count {
  display: inline-block;
  margin-left: 0.35rem;
  font-size: 0.65rem;
  font-weight: 600;
  opacity: 0.65;
}

/* ——— Stage ——— */
.stage {
  padding: 0.6rem clamp(1rem, 3vw, 2rem) 4rem;
  max-width: 1440px;
  margin: 0 auto;
}

.lane-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.5rem 0 0.95rem;
  animation: fadeUp 0.7s var(--ease-out) both;
}

.lane-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3.5vw, 2.35rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.lane-head .sub {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.lane-section { scroll-margin-top: calc(var(--mast-h) + 52px); }

/* ——— Bento ——— */
.bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  grid-auto-flow: dense;
  grid-auto-rows: minmax(160px, auto);
}

@media (min-width: 640px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
  .bento {
    grid-template-columns: repeat(4, 1fr);
  }
  .tile.size-hero { grid-column: span 2; grid-row: span 2; min-height: 420px; }
  .tile.size-wide { grid-column: span 2; grid-row: span 1; min-height: 240px; }
  .tile.size-tall { grid-column: span 1; grid-row: span 2; min-height: 420px; }
  .tile.size-square { grid-column: span 1; grid-row: span 1; min-height: 240px; }
}

@media (max-width: 959px) {
  .tile { min-height: 280px; }
  .tile.size-hero { min-height: 340px; }
}

/* ——— Tile ——— */
.tile {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  background: var(--night);
  color: #fff;
  opacity: 0;
  transform: translateY(40px) scale(0.86) rotate(-2.8deg);
  transform-origin: 50% 60%;
  will-change: transform, opacity;
  content-visibility: auto;
  contain-intrinsic-size: 280px 280px;
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 10%, transparent) inset,
    0 18px 40px -24px rgba(20, 14, 8, 0.45);
  transition:
    transform 0.55s var(--spring),
    box-shadow 0.45s var(--ease-out);
}

@media (min-width: 960px) {
  .tile.size-hero { contain-intrinsic-size: 420px 420px; }
  .tile.size-tall { contain-intrinsic-size: 240px 420px; }
  .tile.size-wide { contain-intrinsic-size: 480px 240px; }
}

.tile.is-in {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(0deg);
  transition:
    opacity 0.75s var(--ease-out),
    transform 0.95s var(--spring),
    box-shadow 0.45s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 55ms);
}

.tile:hover,
.tile:focus-visible {
  transform: translateY(-8px) scale(1.02) rotate(0.8deg);
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 14%, transparent) inset,
    0 32px 60px -18px rgba(20, 14, 8, 0.55);
  outline: none;
  z-index: 2;
}

.tile:nth-child(even):hover,
.tile:nth-child(even):focus-visible {
  transform: translateY(-8px) scale(1.02) rotate(-0.9deg);
}

.tile:focus-visible {
  box-shadow:
    0 0 0 3px var(--cream),
    0 0 0 5px var(--ink),
    0 32px 60px -18px rgba(20, 14, 8, 0.55);
}

/* Media / gradient plate */
.tile-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.tile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: saturate(0.95) contrast(1.04) brightness(0.9);
  transform: scale(1.03);
  transition: transform 1.1s var(--ease-out), filter 0.6s;
}

.tile:hover .tile-media img {
  transform: scale(1.09);
  filter: saturate(1.05) contrast(1.06) brightness(0.94);
}

.tile.is-gradient .tile-media {
  background: var(--plate, linear-gradient(145deg, #c45a7a, #4a4eb8));
}

.tile.is-gradient .tile-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 15%, rgba(255,255,255,0.28), transparent 55%),
    radial-gradient(ellipse 70% 50% at 90% 80%, rgba(0,0,0,0.18), transparent 50%);
  pointer-events: none;
}

/* Bold color washes behind type */
.tile-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(10, 8, 6, 0.08) 0%,
      rgba(10, 8, 6, 0.05) 28%,
      rgba(10, 8, 6, 0.45) 62%,
      rgba(10, 8, 6, 0.88) 100%);
}

.tile.is-gradient .tile-scrim {
  background:
    linear-gradient(180deg,
      transparent 0%,
      transparent 35%,
      rgba(10, 8, 6, 0.25) 60%,
      rgba(10, 8, 6, 0.72) 100%);
}

/* Accent gradient washes (imagery OR plates) */
.tile.accent-coral .tile-scrim { background: linear-gradient(185deg, rgba(232,122,79,0.55) 0%, rgba(232,122,79,0.12) 38%, rgba(10,8,6,0.82) 100%); }
.tile.accent-pink .tile-scrim { background: linear-gradient(185deg, rgba(240,138,176,0.55) 0%, rgba(240,138,176,0.12) 38%, rgba(10,8,6,0.82) 100%); }
.tile.accent-rose .tile-scrim { background: linear-gradient(185deg, rgba(212,93,122,0.55) 0%, rgba(212,93,122,0.12) 38%, rgba(10,8,6,0.84) 100%); }
.tile.accent-amber .tile-scrim { background: linear-gradient(185deg, rgba(232,160,58,0.55) 0%, rgba(232,160,58,0.12) 38%, rgba(10,8,6,0.84) 100%); }
.tile.accent-lavender .tile-scrim { background: linear-gradient(185deg, rgba(139,127,212,0.58) 0%, rgba(139,127,212,0.14) 38%, rgba(10,8,6,0.84) 100%); }
.tile.accent-indigo .tile-scrim { background: linear-gradient(185deg, rgba(74,78,184,0.58) 0%, rgba(74,78,184,0.14) 38%, rgba(10,8,6,0.86) 100%); }
.tile.accent-sky .tile-scrim { background: linear-gradient(185deg, rgba(74,143,184,0.55) 0%, rgba(74,143,184,0.12) 38%, rgba(10,8,6,0.84) 100%); }
.tile.accent-mint .tile-scrim { background: linear-gradient(185deg, rgba(90,158,134,0.55) 0%, rgba(90,158,134,0.12) 38%, rgba(10,8,6,0.84) 100%); }
.tile.accent-teal .tile-scrim { background: linear-gradient(185deg, rgba(47,122,114,0.58) 0%, rgba(47,122,114,0.14) 38%, rgba(10,8,6,0.86) 100%); }
.tile.accent-umber .tile-scrim { background: linear-gradient(185deg, rgba(139,94,60,0.55) 0%, rgba(139,94,60,0.12) 38%, rgba(10,8,6,0.84) 100%); }
.tile.accent-saffron .tile-scrim { background: linear-gradient(185deg, rgba(232,184,74,0.55) 0%, rgba(232,184,74,0.12) 38%, rgba(10,8,6,0.84) 100%); }
.tile.accent-seafoam .tile-scrim { background: linear-gradient(185deg, rgba(61,158,143,0.55) 0%, rgba(61,158,143,0.12) 38%, rgba(10,8,6,0.84) 100%); }
.tile.accent-berry .tile-scrim { background: linear-gradient(185deg, rgba(184,74,122,0.55) 0%, rgba(184,74,122,0.12) 38%, rgba(10,8,6,0.84) 100%); }
.tile.accent-gold .tile-scrim { background: linear-gradient(185deg, rgba(212,160,74,0.55) 0%, rgba(212,160,74,0.12) 38%, rgba(10,8,6,0.84) 100%); }
.tile.accent-slate .tile-scrim { background: linear-gradient(185deg, rgba(90,101,112,0.55) 0%, rgba(90,101,112,0.12) 38%, rgba(10,8,6,0.86) 100%); }
.tile.accent-citrus .tile-scrim { background: linear-gradient(185deg, rgba(212,192,74,0.55) 0%, rgba(212,192,74,0.12) 38%, rgba(10,8,6,0.84) 100%); }
.tile.accent-orchid .tile-scrim { background: linear-gradient(185deg, rgba(154,111,184,0.55) 0%, rgba(154,111,184,0.12) 38%, rgba(10,8,6,0.84) 100%); }
.tile.accent-marine .tile-scrim { background: linear-gradient(185deg, rgba(47,95,138,0.58) 0%, rgba(47,95,138,0.14) 38%, rgba(10,8,6,0.86) 100%); }
.tile.accent-terracotta .tile-scrim { background: linear-gradient(185deg, rgba(196,106,74,0.55) 0%, rgba(196,106,74,0.12) 38%, rgba(10,8,6,0.84) 100%); }
.tile.accent-lilac .tile-scrim { background: linear-gradient(185deg, rgba(168,144,212,0.55) 0%, rgba(168,144,212,0.12) 38%, rgba(10,8,6,0.84) 100%); }
.tile.accent-jade .tile-scrim { background: linear-gradient(185deg, rgba(61,138,106,0.55) 0%, rgba(61,138,106,0.12) 38%, rgba(10,8,6,0.84) 100%); }
.tile.accent-sunset .tile-scrim { background: linear-gradient(185deg, rgba(232,122,90,0.55) 0%, rgba(232,122,90,0.12) 38%, rgba(10,8,6,0.84) 100%); }
.tile.accent-cobalt .tile-scrim { background: linear-gradient(185deg, rgba(58,95,196,0.58) 0%, rgba(58,95,196,0.14) 38%, rgba(10,8,6,0.86) 100%); }
.tile.accent-apricot .tile-scrim { background: linear-gradient(185deg, rgba(232,160,112,0.55) 0%, rgba(232,160,112,0.12) 38%, rgba(10,8,6,0.84) 100%); }
.tile.accent-plum .tile-scrim { background: linear-gradient(185deg, rgba(122,74,138,0.58) 0%, rgba(122,74,138,0.14) 38%, rgba(10,8,6,0.86) 100%); }
.tile.accent-aqua .tile-scrim { background: linear-gradient(185deg, rgba(74,158,170,0.55) 0%, rgba(74,158,170,0.12) 38%, rgba(10,8,6,0.84) 100%); }
.tile.accent-honey .tile-scrim { background: linear-gradient(185deg, rgba(212,160,96,0.55) 0%, rgba(212,160,96,0.12) 38%, rgba(10,8,6,0.84) 100%); }
.tile.accent-frost .tile-scrim { background: linear-gradient(185deg, rgba(106,138,170,0.55) 0%, rgba(106,138,170,0.12) 38%, rgba(10,8,6,0.84) 100%); }
.tile.accent-magenta .tile-scrim { background: linear-gradient(185deg, rgba(196,90,154,0.55) 0%, rgba(196,90,154,0.12) 38%, rgba(10,8,6,0.84) 100%); }
.tile.accent-olive .tile-scrim { background: linear-gradient(185deg, rgba(106,138,74,0.55) 0%, rgba(106,138,74,0.12) 38%, rgba(10,8,6,0.84) 100%); }
.tile.accent-cherry .tile-scrim { background: linear-gradient(185deg, rgba(212,74,90,0.55) 0%, rgba(212,74,90,0.12) 38%, rgba(10,8,6,0.84) 100%); }
.tile.accent-dusk .tile-scrim { background: linear-gradient(185deg, rgba(106,90,154,0.58) 0%, rgba(106,90,154,0.14) 38%, rgba(10,8,6,0.86) 100%); }
.tile.accent-lime .tile-scrim { background: linear-gradient(185deg, rgba(138,186,74,0.55) 0%, rgba(138,186,74,0.12) 38%, rgba(10,8,6,0.84) 100%); }
.tile.accent-navy .tile-scrim { background: linear-gradient(185deg, rgba(42,58,106,0.62) 0%, rgba(42,58,106,0.16) 38%, rgba(10,8,6,0.88) 100%); }
.tile.accent-persimmon .tile-scrim { background: linear-gradient(185deg, rgba(232,106,58,0.55) 0%, rgba(232,106,58,0.12) 38%, rgba(10,8,6,0.84) 100%); }
.tile.accent-iris .tile-scrim { background: linear-gradient(185deg, rgba(122,106,212,0.55) 0%, rgba(122,106,212,0.12) 38%, rgba(10,8,6,0.84) 100%); }
.tile.accent-ocean .tile-scrim { background: linear-gradient(185deg, rgba(42,122,138,0.55) 0%, rgba(42,122,138,0.12) 38%, rgba(10,8,6,0.84) 100%); }
.tile.accent-cinnamon .tile-scrim { background: linear-gradient(185deg, rgba(168,106,74,0.55) 0%, rgba(168,106,74,0.12) 38%, rgba(10,8,6,0.84) 100%); }
.tile.accent-peach .tile-scrim { background: linear-gradient(185deg, rgba(232,168,136,0.55) 0%, rgba(232,168,136,0.12) 38%, rgba(10,8,6,0.84) 100%); }
.tile.accent-violet .tile-scrim { background: linear-gradient(185deg, rgba(122,90,184,0.55) 0%, rgba(122,90,184,0.12) 38%, rgba(10,8,6,0.84) 100%); }
.tile.accent-ink .tile-scrim { background: linear-gradient(185deg, rgba(42,38,34,0.45) 0%, rgba(10,8,6,0.2) 40%, rgba(10,8,6,0.9) 100%); }

/* Named gradient plates (image: null) */
.tile[data-gradient="coral-dusk"] { --plate: linear-gradient(145deg, #e87a4f 0%, #c45a7a 55%, #4a3a6a 100%); }
.tile[data-gradient="pink-blush"] { --plate: linear-gradient(145deg, #f08ab0 0%, #e87a9a 50%, #8b5a9a 100%); }
.tile[data-gradient="amber-glow"] { --plate: linear-gradient(145deg, #f0c060 0%, #e8a03a 50%, #c45a3a 100%); }
.tile[data-gradient="lavender-wash"] { --plate: linear-gradient(145deg, #a890e8 0%, #8b7fd4 50%, #4a4eb8 100%); }
.tile[data-gradient="teal-depth"] { --plate: linear-gradient(145deg, #4ab8a8 0%, #2f7a72 55%, #1a3a4a 100%); }
.tile[data-gradient="indigo-night"] { --plate: linear-gradient(145deg, #6a6ad4 0%, #4a4eb8 50%, #1a1a4a 100%); }
.tile[data-gradient="mint-breeze"] { --plate: linear-gradient(145deg, #7ec4a8 0%, #5a9e86 50%, #2a5a4a 100%); }
.tile[data-gradient="rose-flare"] { --plate: linear-gradient(145deg, #e87a9a 0%, #d45d7a 50%, #8a2a4a 100%); }
.tile[data-gradient="sky-clear"] { --plate: linear-gradient(145deg, #7ab8d4 0%, #4a8fb8 50%, #2a4a7a 100%); }
.tile[data-gradient="umber-warm"] { --plate: linear-gradient(145deg, #c49a6a 0%, #8b5e3c 55%, #4a2a1a 100%); }
.tile[data-gradient="peach-soft"] { --plate: linear-gradient(145deg, #f0b890 0%, #e8a070 50%, #c45a5a 100%); }
.tile[data-gradient="violet-mist"] { --plate: linear-gradient(145deg, #b89ae8 0%, #7a5ab8 50%, #3a2a6a 100%); }
.tile[data-gradient="saffron-rise"] { --plate: linear-gradient(145deg, #f0d070 0%, #e8b84a 50%, #c46a2a 100%); }
.tile[data-gradient="seafoam"] { --plate: linear-gradient(145deg, #6ad4c4 0%, #3d9e8f 50%, #1a5a5a 100%); }
.tile[data-gradient="berry-crush"] { --plate: linear-gradient(145deg, #d46a9a 0%, #b84a7a 50%, #6a1a4a 100%); }
.tile[data-gradient="gold-hour"] { --plate: linear-gradient(145deg, #e8c070 0%, #d4a04a 50%, #8a4a2a 100%); }
.tile[data-gradient="slate-dawn"] { --plate: linear-gradient(145deg, #8a9aaa 0%, #5a6570 50%, #2a3038 100%); }
.tile[data-gradient="citrus-pop"] { --plate: linear-gradient(145deg, #e8d860 0%, #d4c04a 50%, #8a8a2a 100%); }
.tile[data-gradient="orchid-haze"] { --plate: linear-gradient(145deg, #c4a0d4 0%, #9a6fb8 50%, #5a3a7a 100%); }
.tile[data-gradient="marine-deep"] { --plate: linear-gradient(145deg, #5a8ab8 0%, #2f5f8a 55%, #1a2a4a 100%); }
.tile[data-gradient="terracotta"] { --plate: linear-gradient(145deg, #e89a7a 0%, #c46a4a 50%, #7a3a2a 100%); }
.tile[data-gradient="lilac-fog"] { --plate: linear-gradient(145deg, #c8b8e8 0%, #a890d4 50%, #5a4a8a 100%); }
.tile[data-gradient="jade-leaf"] { --plate: linear-gradient(145deg, #6ac49a 0%, #3d8a6a 50%, #1a4a3a 100%); }
.tile[data-gradient="sunset-strip"] { --plate: linear-gradient(145deg, #f09a6a 0%, #e87a5a 50%, #8a3a4a 100%); }
.tile[data-gradient="cobalt-glow"] { --plate: linear-gradient(145deg, #6a8ae8 0%, #3a5fc4 50%, #1a2a6a 100%); }
.tile[data-gradient="apricot"] { --plate: linear-gradient(145deg, #f0b888 0%, #e8a070 50%, #c45a3a 100%); }
.tile[data-gradient="plum-wine"] { --plate: linear-gradient(145deg, #a86ab8 0%, #7a4a8a 55%, #3a1a4a 100%); }
.tile[data-gradient="aqua-spray"] { --plate: linear-gradient(145deg, #6ac4d4 0%, #4a9eaa 50%, #1a5a6a 100%); }
.tile[data-gradient="honey-warm"] { --plate: linear-gradient(145deg, #e8c080 0%, #d4a060 50%, #8a5a2a 100%); }
.tile[data-gradient="frost-blue"] { --plate: linear-gradient(145deg, #9ab8d4 0%, #6a8aaa 50%, #2a4a6a 100%); }
.tile[data-gradient="magenta-dusk"] { --plate: linear-gradient(145deg, #e88aba 0%, #c45a9a 50%, #6a2a5a 100%); }
.tile[data-gradient="olive-grove"] { --plate: linear-gradient(145deg, #a8c46a 0%, #6a8a4a 50%, #3a4a2a 100%); }
.tile[data-gradient="cherry-soda"] { --plate: linear-gradient(145deg, #e87a8a 0%, #d44a5a 50%, #7a1a2a 100%); }
.tile[data-gradient="dusk-purple"] { --plate: linear-gradient(145deg, #9a8ac4 0%, #6a5a9a 55%, #2a1a4a 100%); }
.tile[data-gradient="lime-zest"] { --plate: linear-gradient(145deg, #b8d46a 0%, #8aba4a 50%, #4a6a2a 100%); }
.tile[data-gradient="navy-ink"] { --plate: linear-gradient(145deg, #4a5a8a 0%, #2a3a6a 55%, #0a0a2a 100%); }
.tile[data-gradient="persimmon"] { --plate: linear-gradient(145deg, #f08a5a 0%, #e86a3a 50%, #8a2a1a 100%); }
.tile[data-gradient="iris-bloom"] { --plate: linear-gradient(145deg, #9a8ae8 0%, #7a6ad4 50%, #3a2a8a 100%); }
.tile[data-gradient="ocean-tide"] { --plate: linear-gradient(145deg, #4ab8c4 0%, #2a7a8a 50%, #0a3a4a 100%); }
.tile[data-gradient="cinnamon"] { --plate: linear-gradient(145deg, #c48a6a 0%, #a86a4a 50%, #5a2a1a 100%); }

.tile-body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: clamp(1rem, 2.2vw, 1.55rem);
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  pointer-events: none;
}

.tile-eyebrow {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

/* Short-title typography — tight, punchy, serif on rich gradients */
.tile-title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.8vw, 1.95rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: #fff;
  text-shadow: none;
  max-width: 14ch;
  text-wrap: balance;
}

.tile.size-hero .tile-title {
  font-size: clamp(1.7rem, 3.6vw, 2.55rem);
  max-width: 12ch;
  letter-spacing: -0.035em;
}

.tile.size-wide .tile-title {
  max-width: 18ch;
}

.tile-caption {
  font-size: clamp(0.76rem, 1.25vw, 0.88rem);
  font-weight: 400;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.84);
  max-width: 36ch;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tile.size-hero .tile-caption {
  -webkit-line-clamp: 3;
  max-width: 40ch;
}

.tile.size-square .tile-caption,
.tile.size-tall .tile-caption {
  -webkit-line-clamp: 2;
}

.tile-meta {
  margin-top: 0.3rem;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.5);
}

.tile-badge {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  z-index: 3;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.tile-stock {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 3;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

/* ——— Expand ——— */
.expand-root {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  visibility: hidden;
}

.expand-root.open {
  pointer-events: auto;
  visibility: visible;
}

.expand-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 12, 10, 0.55);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.expand-root.open .expand-backdrop { opacity: 1; }

.expand-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(720px, calc(100vw - 1.5rem));
  max-height: min(88dvh, 860px);
  transform: translate(-50%, -46%) scale(0.92);
  opacity: 0;
  background: var(--paper);
  color: var(--ink);
  border-radius: calc(var(--radius) + 4px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 40px 80px -30px rgba(10, 8, 6, 0.65);
  transition:
    opacity 0.45s var(--ease-out),
    transform 0.55s var(--spring);
}

.expand-root.open .expand-panel {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.expand-hero {
  position: relative;
  height: clamp(180px, 32vw, 280px);
  flex: 0 0 auto;
  overflow: hidden;
  background: var(--night);
}

.expand-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.95) contrast(1.04);
}

.expand-hero.is-gradient img { display: none; }

.expand-hero.is-gradient {
  background: var(--plate, linear-gradient(145deg, #e87a4f, #4a4eb8));
}

.expand-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10,8,6,0.55) 100%);
}

.expand-close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 5;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(14,12,10,0.45);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: transform 0.3s var(--spring), background 0.3s;
}

.expand-close:hover { transform: scale(1.08) rotate(8deg); background: rgba(14,12,10,0.7); }

.expand-content {
  padding: clamp(1.25rem, 3vw, 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.expand-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 0.5rem;
}

.expand-title {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3.4vw, 2.15rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 0.85rem;
  max-width: 18ch;
  text-wrap: balance;
}

.expand-body {
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-bottom: 1rem;
}

.expand-why {
  font-size: 0.95rem;
  line-height: 1.5;
  padding: 0.9rem 1rem;
  border-left: 3px solid var(--coral);
  background: color-mix(in srgb, var(--cream-deep) 70%, transparent);
  border-radius: 0 12px 12px 0;
  margin-bottom: 1.25rem;
  color: var(--ink);
}

.expand-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  font-size: 0.78rem;
  color: var(--ink-mute);
}

.expand-link {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
  transition: border-color 0.25s;
}

.expand-link:hover { border-bottom-color: var(--ink); }

.expand-credit {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}

/* ——— Why ——— */
.why {
  max-width: 720px;
  margin: 2.5rem auto 1rem;
  padding: 0 clamp(1rem, 3vw, 2rem);
  text-align: center;
}

.why h2 {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}

.why p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 0.55rem;
}

.site-foot {
  padding: 2rem clamp(1rem, 3vw, 2rem) 3rem;
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tile {
    opacity: 1;
    transform: none;
    transition: box-shadow 0.2s;
  }
  .tile.is-in { transform: none; transition: none; }
  .tile:hover, .tile:focus-visible { transform: none; }
  .tile-media img,
  .tile:hover .tile-media img { transform: none; transition: none; }
  .lane-head { opacity: 1; animation: none; }
  .expand-panel,
  .expand-backdrop { transition: none; }
  .expand-root.open .expand-panel { transform: translate(-50%, -50%) scale(1); }
  .lane-btn { transition: none; }
  .lane-btn:hover { transform: none; }
  .expand-close:hover { transform: none; }
}

.empty {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--ink-mute);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-style: italic;
}

.sentinel {
  height: 1px;
  width: 100%;
  grid-column: 1 / -1;
  pointer-events: none;
}