/* Proof of Progress — ALIVE weave · CRAZY MODES · Direction G
   Family archive (432) · photo / house / bold-color / tinted-photo
   Per-tile style_mode posters · Bold Emblemo · hover-reveal · era chips
   Tagline: good things *are* happening. No audience lecture copy. No COLOR FIELD labels. */

:root {
  --sans: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-display: var(--serif);
  --font-sans: var(--sans);

  --breath: #F7F4EE;
  --cream: #F4EFE6;
  --cream-deep: #ebe4d6;
  --paper: #FCFCFB;
  --ink: #2A1F1C;
  --espresso: #473733;
  --ink-soft: rgba(71, 55, 51, 0.72);
  --ink-mute: rgba(71, 55, 51, 0.48);
  --night: #1A1816;
  --void: #12110F;

  /* Punched Emblemo — match app.js SOLID_HEX */
  --coral: #FF6A3D;
  --pink: #FF3D8A;
  --rose: #F23D6E;
  --amber: #FF9F0A;
  --lavender: #7A52FF;
  --indigo: #3D42C4;
  --sky: #0E9AD8;
  --mint: #00C49A;
  --teal: #0FAE96;
  --umber: #8B5E3C;
  --saffron: #FFB000;
  --seafoam: #00C9A5;
  --berry: #D4287A;
  --gold: #F5B400;
  --slate: #3D4A55;
  --citrus: #E6C200;
  --orchid: #A03CD4;
  --marine: #1A5288;
  --terracotta: #E04A28;
  --lilac: #7A4FE8;
  --jade: #12A85A;
  --sunset: #FF5A32;
  --cobalt: #2450D4;
  --apricot: #FF6F28;
  --plum: #6A1A8A;
  --aqua: #00A8B8;
  --honey: #E89A18;
  --frost: #2F8FE0;
  --magenta: #D4208A;
  --olive: #6A8A18;
  --cherry: #E0183A;
  --dusk: #4A3A9A;
  --lime: #6EC200;
  --navy: #1A2A5A;
  --persimmon: #F04A18;
  --iris: #5A48E0;
  --ocean: #0A7A8A;
  --cinnamon: #B84A18;
  --peach: #FF7A40;
  --violet: #5A28C4;
  --moss: #4A6B3D;
  --cream-ink: #12110F;

  --radius: 24px;
  --gap: 16px;
  --mast-h: 72px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.22, 1.12, 0.36, 1);
  --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(--sans);
  background: var(--breath);
  color: var(--ink);
  min-height: 100dvh;
  line-height: 1.45;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.014em;
}

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

/* ——— Mast (Direction G) ——— */
.mast {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  padding: 1.15rem clamp(1rem, 3vw, 2rem);
  background: color-mix(in srgb, var(--breath) 88%, transparent);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  border-bottom: 1px solid rgba(71, 55, 51, 0.06);
}
.brand-row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  min-width: 0;
  flex-wrap: wrap;
}
.brand {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--espresso);
  text-decoration: none;
}
.brand:hover { color: var(--ink); }
.tag {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: rgba(71, 55, 51, 0.48);
  white-space: nowrap;
}
.tag em {
  font-style: italic;
  font-weight: 300;
  color: rgba(71, 55, 51, 0.58);
}
.nav {
  display: flex;
  gap: 1.35rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(71, 55, 51, 0.46);
}
.nav a { color: inherit; text-decoration: none; }
.nav a:hover { color: var(--espresso); }
.nav a[aria-current="page"] { color: var(--espresso); }

/* ——— 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 plates — photo · house · bold-color · tinted-photo */
.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(1.02) contrast(1.04) brightness(0.92);
  transform: scale(1.02);
  transition: transform 1.1s var(--ease-out), filter 0.6s, opacity 0.55s var(--ease-out);
}

.tile:hover .tile-media img,
.tile:focus-visible .tile-media img {
  transform: scale(1.08);
  filter: saturate(1.08) contrast(1.06) brightness(0.96);
}

/* Bold Emblemo solid — color plate fades on hover/focus to reveal image */
.tile.is-bold-color .tile-media.is-bold {
  background: var(--solid, var(--coral));
}

.tile.is-bold-color .tile-media img.reveal {
  position: absolute;
  inset: 0;
  z-index: 0;
  filter: saturate(1.05) contrast(1.05) brightness(0.9);
}

.tile.is-bold-color .color-plate {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--solid, var(--coral));
  transition: opacity 0.55s var(--ease-out);
  pointer-events: none;
}

.tile.is-bold-color:hover .color-plate,
.tile.is-bold-color:focus-visible .color-plate {
  opacity: 0;
}

.tile.is-bold-color:hover .tile-media img.reveal,
.tile.is-bold-color:focus-visible .tile-media img.reveal {
  transform: scale(1.06);
  filter: saturate(1.1) contrast(1.06) brightness(0.95);
}

/* Tinted photo — strong color multiply / duotone */
.tile.is-tinted-photo .tile-media.is-tinted {
  background: var(--tint, var(--coral));
}

.tile.is-tinted-photo .tile-media img {
  mix-blend-mode: multiply;
  filter: grayscale(0.15) contrast(1.15) brightness(1.05);
  opacity: 0.92;
}

.tile.is-tinted-photo .tint-plate {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--tint, var(--coral));
  mix-blend-mode: color;
  opacity: 0.72;
  pointer-events: none;
  transition: opacity 0.45s var(--ease-out);
}

.tile.is-tinted-photo:hover .tint-plate,
.tile.is-tinted-photo:focus-visible .tint-plate {
  opacity: 0.45;
}

.tile.is-tinted-photo:hover .tile-media img,
.tile.is-tinted-photo:focus-visible .tile-media img {
  opacity: 1;
  filter: grayscale(0.05) contrast(1.12) brightness(1.02);
}

/* Scrim — readable type over photo / color */
.tile-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(10, 8, 6, 0.05) 0%,
      rgba(10, 8, 6, 0.08) 28%,
      rgba(10, 8, 6, 0.48) 62%,
      rgba(10, 8, 6, 0.9) 100%);
}

.tile.is-bold-color .tile-scrim {
  /* Color reads first — soft type cradle at edge only, no full-tile mud */
  background:
    linear-gradient(180deg,
      transparent 0%,
      transparent 58%,
      rgba(18, 17, 15, 0.14) 82%,
      rgba(18, 17, 15, 0.42) 100%);
  z-index: 2;
}

.tile.is-photo .tile-scrim,
.tile.is-tinted-photo .tile-scrim {
  z-index: 2;
  background:
    linear-gradient(180deg,
      rgba(10, 8, 6, 0.12) 0%,
      rgba(10, 8, 6, 0.08) 30%,
      rgba(10, 8, 6, 0.5) 62%,
      rgba(10, 8, 6, 0.9) 100%);
}

/* Soft accent wash on photo tiles only — not a COLOR FIELD label */
.tile.is-photo.accent-coral .tile-scrim { background: linear-gradient(185deg, rgba(246,141,93,0.35) 0%, rgba(246,141,93,0.06) 36%, rgba(10,8,6,0.88) 100%); }
.tile.is-photo.accent-pink .tile-scrim { background: linear-gradient(185deg, rgba(249,164,198,0.35) 0%, rgba(249,164,198,0.06) 36%, rgba(10,8,6,0.88) 100%); }
.tile.is-photo.accent-amber .tile-scrim { background: linear-gradient(185deg, rgba(251,176,59,0.35) 0%, rgba(251,176,59,0.06) 36%, rgba(10,8,6,0.88) 100%); }
.tile.is-photo.accent-lavender .tile-scrim { background: linear-gradient(185deg, rgba(163,150,250,0.38) 0%, rgba(163,150,250,0.08) 36%, rgba(10,8,6,0.88) 100%); }
.tile.is-photo.accent-mint .tile-scrim { background: linear-gradient(185deg, rgba(143,212,193,0.35) 0%, rgba(143,212,193,0.06) 36%, rgba(10,8,6,0.88) 100%); }


/* ——— CRAZY MODES — kill uniform title/caption sameness ——— */
.tile-body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  padding: clamp(1rem, 2.2vw, 1.55rem);
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  pointer-events: none;
  text-align: left;
}

.tile.align-center .tile-body { text-align: center; align-items: center; }
.tile.align-right .tile-body { text-align: right; align-items: flex-end; }
.tile.align-left .tile-body { text-align: left; align-items: flex-start; }

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

.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.font-sans .tile-title {
  font-family: var(--font-sans);
  letter-spacing: -0.04em;
  font-weight: 700;
}
.tile.font-serif .tile-title {
  font-family: var(--font-display);
}

.tile.case-upper .tile-title { letter-spacing: -0.02em; }
.tile.case-lower .tile-title { letter-spacing: -0.035em; font-weight: 500; }

.tile-caption {
  font-family: var(--font-sans);
  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-meta {
  margin-top: 0.3rem;
  font-family: var(--font-sans);
  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: 5;
  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 {
  display: none !important; /* kill faint COLOR FIELD labels */
}

/* —— 1. impact-bottom — giant serif title bottom-left —— */
.tile.mode-impact-bottom .tile-body {
  inset: auto 0 0 0;
  padding: clamp(1.1rem, 2.6vw, 1.85rem);
  gap: 0.4rem;
  justify-content: flex-end;
}
.tile.mode-impact-bottom .tile-title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 4.2vw, 3.1rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.98;
  max-width: 11ch;
}
.tile.mode-impact-bottom.font-sans .tile-title {
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: -0.055em;
}
.tile.mode-impact-bottom .tile-caption {
  font-size: clamp(0.72rem, 1.1vw, 0.82rem);
  max-width: 28ch;
  -webkit-line-clamp: 2;
  opacity: 0.88;
}
.tile.mode-impact-bottom .tile-meta { display: none; }
.tile.mode-impact-bottom .tile-scrim {
  background: linear-gradient(180deg,
    rgba(10,8,6,0.02) 0%,
    rgba(10,8,6,0.08) 38%,
    rgba(10,8,6,0.62) 70%,
    rgba(10,8,6,0.94) 100%);
}

/* —— 2. impact-top — giant title top; caption tucked bottom —— */
.tile.mode-impact-top .tile-body {
  inset: 0;
  padding: clamp(1.15rem, 2.5vw, 1.75rem);
  justify-content: space-between;
  gap: 0;
}
.tile.mode-impact-top .tile-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.85rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.0;
  max-width: 12ch;
  margin-top: 0.35rem;
}
.tile.mode-impact-top.font-sans .tile-title {
  font-family: var(--font-sans);
  font-weight: 800;
}
.tile.mode-impact-top .tile-caption {
  align-self: stretch;
  margin-top: auto;
  font-size: clamp(0.7rem, 1.05vw, 0.8rem);
  max-width: 32ch;
  -webkit-line-clamp: 2;
  opacity: 0.85;
}
.tile.mode-impact-top .tile-meta { display: none; }
.tile.mode-impact-top .tile-scrim {
  background:
    linear-gradient(180deg, rgba(10,8,6,0.72) 0%, rgba(10,8,6,0.18) 38%, rgba(10,8,6,0.12) 55%, rgba(10,8,6,0.88) 100%);
}
.tile.mode-impact-top .tile-badge { top: auto; bottom: 0.9rem; left: 0.9rem; }

/* —— 3. stack-center — centered title, medium; airy —— */
.tile.mode-stack-center .tile-body {
  inset: 0;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 0.55rem;
}
.tile.mode-stack-center .tile-title {
  font-size: clamp(1.25rem, 2.6vw, 1.85rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.15;
  max-width: 16ch;
  text-wrap: balance;
}
.tile.mode-stack-center .tile-caption {
  font-size: clamp(0.74rem, 1.15vw, 0.86rem);
  max-width: 28ch;
  -webkit-line-clamp: 3;
  opacity: 0.82;
  margin-inline: auto;
}
.tile.mode-stack-center .tile-meta { display: none; }
.tile.mode-stack-center .tile-scrim {
  background: linear-gradient(180deg,
    rgba(10,8,6,0.42) 0%,
    rgba(10,8,6,0.38) 42%,
    rgba(10,8,6,0.55) 72%,
    rgba(10,8,6,0.82) 100%);
}

/* —— 4. mono-meta — uppercase tracking-wide sans IMPACT; tiny serif caption —— */
.tile.mode-mono-meta .tile-body {
  inset: auto 0 0 0;
  padding: clamp(1rem, 2.2vw, 1.5rem);
  gap: 0.55rem;
}
.tile.mode-mono-meta .tile-title {
  font-family: var(--font-sans) !important;
  font-size: clamp(1.15rem, 2.4vw, 1.65rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.05;
  max-width: 18ch;
}
.tile.mode-mono-meta .tile-caption {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(0.68rem, 1vw, 0.78rem);
  letter-spacing: -0.01em;
  max-width: 30ch;
  -webkit-line-clamp: 2;
  opacity: 0.9;
}
.tile.mode-mono-meta .tile-eyebrow {
  letter-spacing: 0.2em;
  opacity: 0.7;
}
.tile.mode-mono-meta .tile-meta {
  font-family: var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.55rem;
}
.tile.mode-mono-meta .tile-scrim {
  background: linear-gradient(180deg,
    rgba(10,8,6,0.05) 0%,
    rgba(10,8,6,0.12) 40%,
    rgba(10,8,6,0.58) 72%,
    rgba(10,8,6,0.92) 100%);
}

/* —— 5. whisper — small quiet type, lots of empty air —— */
.tile.mode-whisper .tile-body {
  inset: auto 0 0 0;
  padding: clamp(1.4rem, 3vw, 2.1rem);
  gap: 0.35rem;
  max-width: 70%;
}
.tile.mode-whisper.align-center .tile-body {
  inset: 0;
  margin: auto;
  justify-content: flex-end;
  padding-bottom: 18%;
  max-width: 100%;
}
.tile.mode-whisper .tile-title {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.6vw, 1.2rem);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.01em;
  line-height: 1.2;
  max-width: 18ch;
  opacity: 0.92;
}
.tile.mode-whisper .tile-caption {
  font-size: clamp(0.65rem, 0.95vw, 0.74rem);
  max-width: 24ch;
  -webkit-line-clamp: 2;
  opacity: 0.7;
}
.tile.mode-whisper .tile-scrim {
  background: linear-gradient(180deg,
    transparent 0%,
    transparent 55%,
    rgba(10,8,6,0.35) 78%,
    rgba(10,8,6,0.7) 100%);
}
.tile.mode-whisper.is-bold-color .tile-scrim {
  background: linear-gradient(180deg,
    transparent 0%,
    transparent 60%,
    rgba(10,8,6,0.25) 100%);
}

/* —— 6. billboard — ONE word / short punch max-size —— */
.tile.mode-billboard .tile-body {
  inset: 0;
  padding: clamp(1rem, 2.5vw, 1.75rem);
  justify-content: center;
  align-items: center;
  text-align: center;
}
.tile.mode-billboard.align-left .tile-body {
  align-items: flex-start;
  text-align: left;
  justify-content: flex-end;
  padding-bottom: clamp(1.2rem, 3vw, 2rem);
}
.tile.mode-billboard .tile-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7.5vw, 5.2rem);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 0.9;
  max-width: 8ch;
  text-wrap: balance;
}
.tile.mode-billboard.font-sans .tile-title {
  font-family: var(--font-sans);
  font-weight: 900;
  letter-spacing: -0.06em;
}
.tile.mode-billboard .tile-caption,
.tile.mode-billboard .tile-meta,
.tile.mode-billboard .tile-eyebrow { display: none; }
.tile.mode-billboard .tile-scrim {
  background: linear-gradient(180deg,
    rgba(10,8,6,0.25) 0%,
    rgba(10,8,6,0.15) 40%,
    rgba(10,8,6,0.45) 100%);
}
.tile.mode-billboard.is-lead .tile-title {
  font-size: clamp(3rem, 8.5vw, 5.8rem);
  max-width: 6ch;
}
.tile.mode-billboard.is-lead .tile-scrim {
  background: linear-gradient(160deg,
    rgba(26,18,40,0.55) 0%,
    rgba(10,8,6,0.2) 50%,
    rgba(10,8,6,0.65) 100%);
}

/* —— 7. split — eyebrow top strip; title mid; source bottom mono —— */
.tile.mode-split .tile-body {
  inset: 0;
  padding: 0;
  gap: 0;
  justify-content: space-between;
}
.tile.mode-split .tile-eyebrow {
  width: 100%;
  padding: 0.75rem 1.1rem 0.35rem;
  background: transparent; /* no frost / opaque eyebrow band */
  border-bottom: none;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
}
.tile.mode-split .tile-title {
  padding: 0 1.1rem;
  margin: auto 0;
  font-size: clamp(1.45rem, 3.2vw, 2.15rem);
  max-width: 14ch;
  line-height: 1.05;
}
.tile.mode-split .tile-caption {
  padding: 0 1.1rem;
  margin-bottom: 0.35rem;
  font-size: 0.75rem;
  max-width: 32ch;
  -webkit-line-clamp: 2;
  opacity: 0.85;
}
.tile.mode-split .tile-meta {
  width: 100%;
  margin: 0;
  padding: 0.45rem 1.1rem 0.95rem;
  font-family: var(--font-sans);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  border-top: none;
  background: transparent; /* no frost meta band */
}
.tile.mode-split .tile-scrim {
  background: linear-gradient(180deg,
    rgba(10,8,6,0.28) 0%,
    rgba(10,8,6,0.22) 40%,
    rgba(10,8,6,0.62) 72%,
    rgba(10,8,6,0.9) 100%);
}

/* —— 8. ink-block — title in bold color slab / edge band (solid color tiles) —— */
.tile.mode-ink-block .tile-body {
  inset: auto 0 0 0;
  padding: 0;
  gap: 0.55rem;
  padding-bottom: 0.85rem;
}
.tile.mode-ink-block .ink-slab {
  display: block;
  width: 100%;
  background: var(--solid, var(--ink));
  color: #fff;
  padding: 0.95rem 1.1rem 1.05rem;
  border-top: 3px solid rgba(255,255,255,0.35);
  /* edge band feel — not frosted over photo */
  filter: brightness(0.92) saturate(1.1);
}
.tile.mode-ink-block .ink-slab .tile-title {
  font-family: var(--font-sans);
  font-size: clamp(1.2rem, 2.5vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  max-width: 16ch;
  color: #fff;
}
.tile.mode-ink-block.font-serif .ink-slab .tile-title {
  font-family: var(--font-display);
  font-weight: 600;
}
.tile.mode-ink-block .tile-caption {
  padding: 0 1.1rem;
  font-size: 0.78rem;
  max-width: 34ch;
  -webkit-line-clamp: 2;
}
.tile.mode-ink-block .tile-meta {
  padding: 0 1.1rem;
}
.tile.mode-ink-block .tile-scrim {
  background: linear-gradient(180deg,
    transparent 0%,
    transparent 50%,
    rgba(10,8,6,0.35) 100%);
}
.tile.mode-ink-block.is-bold-color .tile-scrim {
  background: transparent;
}
.tile.mode-ink-block.is-bold-color .ink-slab {
  background: rgba(18, 17, 15, 0.88);
  border-top-color: rgba(255,255,255,0.25);
}

/* —— 9. vertical-rail — type along left edge as a column —— */
.tile.mode-vertical-rail .tile-body {
  inset: 0 auto 0 0;
  width: min(42%, 9.5rem);
  padding: clamp(1rem, 2vw, 1.35rem) 0.65rem;
  justify-content: flex-end;
  gap: 0.65rem;
  background: linear-gradient(90deg,
    rgba(10,8,6,0.72) 0%,
    rgba(10,8,6,0.35) 70%,
    transparent 100%);
}
.tile.mode-vertical-rail .tile-title {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: clamp(1.15rem, 2.4vw, 1.65rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  max-width: none;
  max-height: 85%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tile.mode-vertical-rail.case-upper .tile-title {
  letter-spacing: 0.06em;
}
.tile.mode-vertical-rail .tile-caption {
  writing-mode: horizontal-tb;
  transform: none;
  font-size: 0.62rem;
  max-width: 100%;
  -webkit-line-clamp: 4;
  opacity: 0.8;
}
.tile.mode-vertical-rail .tile-meta { display: none; }
.tile.mode-vertical-rail .tile-scrim {
  background: linear-gradient(90deg,
    rgba(10,8,6,0.25) 0%,
    transparent 45%,
    transparent 100%);
}
.tile.mode-vertical-rail .tile-badge {
  left: auto;
  right: 0.9rem;
}

/* —— 10. giant-only — title only on tile (caption in expand) —— */
.tile.mode-giant-only .tile-body {
  inset: auto 0 0 0;
  padding: clamp(1.2rem, 2.8vw, 1.9rem);
  justify-content: flex-end;
}
.tile.mode-giant-only .tile-title {
  font-family: var(--font-display);
  font-size: clamp(1.95rem, 4.5vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.98;
  max-width: 12ch;
}
.tile.mode-giant-only.font-sans .tile-title {
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: -0.05em;
}
.tile.mode-giant-only .tile-caption,
.tile.mode-giant-only .tile-meta,
.tile.mode-giant-only .tile-eyebrow { display: none; }
.tile.mode-giant-only .tile-scrim {
  background: linear-gradient(180deg,
    transparent 0%,
    transparent 45%,
    rgba(10,8,6,0.5) 75%,
    rgba(10,8,6,0.9) 100%);
}

/* Size-aware bumps */
.tile.size-hero.mode-impact-bottom .tile-title,
.tile.size-hero.mode-giant-only .tile-title {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
}
.tile.size-wide.mode-billboard .tile-title {
  font-size: clamp(2.8rem, 6vw, 4.8rem);
  max-width: 12ch;
}






/* ——— TYPE GATE overrides (kill/replace 2026-09-22) ——— */
/* Captions always visible on closed tiles — override any leftover hide rules */
.tile:not(.is-house) .tile-caption { display: -webkit-box !important; }
.tile.mode-billboard .tile-caption,
.tile.mode-giant-only .tile-caption,
.tile.mode-whisper .tile-caption {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  opacity: 0.88;
}
/* Killed modes: if any residual class slips through, fall back to impact-bottom feel */
.tile.mode-billboard .tile-title,
.tile.mode-giant-only .tile-title {
  font-size: clamp(1.85rem, 4.2vw, 3.1rem);
  max-width: 14ch;
}

/* ——— Aspect weave · house always 4:5 · no black bars ——— */
.tile {
  aspect-ratio: 4 / 5;
  min-height: 0 !important;
  height: auto;
  background: #E8E0D4;
}
.tile.aspect-portrait { aspect-ratio: 4 / 5; }
.tile.aspect-square { aspect-ratio: 1 / 1; }
.tile.aspect-wide { aspect-ratio: 8 / 5; }
.tile.aspect-tall { aspect-ratio: 3 / 4; }
.tile.is-house,
.tile.is-house.aspect-square,
.tile.is-house.aspect-wide,
.tile.is-house.aspect-tall {
  aspect-ratio: 4 / 5 !important;
}
.tile.size-hero {
  aspect-ratio: 4 / 5;
}
@media (min-width: 960px) {
  .tile.size-hero {
    grid-column: span 2;
    grid-row: span 2;
    min-height: 0 !important;
  }
  .tile.size-hero.aspect-square { aspect-ratio: 1 / 1; }
  .tile.size-wide,
  .tile.aspect-wide:not(.is-house) {
    grid-column: span 2;
    min-height: 0 !important;
  }
  .tile.aspect-wide:not(.is-house) { aspect-ratio: 8 / 5; }
  .tile.aspect-tall:not(.is-house) {
    grid-row: span 2;
    aspect-ratio: 3 / 4;
    min-height: 0 !important;
  }
  .tile.size-square { min-height: 0 !important; }
}
@media (max-width: 959px) {
  .tile,
  .tile.size-hero {
    min-height: 0 !important;
  }
  /* Mobile: keep readable — limit extreme wide */
  .tile.aspect-wide:not(.is-house) { aspect-ratio: 5 / 4; }
}

/* House CLEAR: lockup intact — no HTML title stamp over baked type */
.tile.is-house .tile-body {
  display: none;
}
.tile.is-house .tile-stock {
  display: none;
}
.tile.is-house .tile-scrim {
  background: linear-gradient(to top, rgba(8, 6, 5, 0.45) 0%, rgba(8, 6, 5, 0) 55%);
}
.tile.is-house .tile-media img {
  object-fit: cover;
  object-position: center;
  filter: contrast(1.04) saturate(0.94) sepia(0.05) brightness(1.01);
  transform: none;
}
.tile.is-house:hover .tile-media img {
  transform: scale(1.02);
  filter: contrast(1.05) saturate(0.96) sepia(0.04) brightness(1.02);
}
.tile.is-house .quiet-meta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 4;
  padding: 1.35rem 1rem 0.85rem;
  color: var(--cream);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0.92;
}
.tile.is-house .quiet-meta .src {
  display: block;
  margin-top: 0.2rem;
  opacity: 0.65;
  letter-spacing: 0.04em;
  font-weight: 400;
  text-transform: none;
}

/* Bold color plates always fill the tile box — no letterbox */
.tile.is-bold-color .tile-media {
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--solid, var(--coral));
}

/* ——— 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-bold-color {
  background: var(--solid, var(--coral));
}

.expand-hero.is-bold-color img {
  opacity: 0.55;
  mix-blend-mode: multiply;
}

.expand-hero.is-tinted {
  background: var(--tint, var(--coral));
}

.expand-hero.is-tinted img {
  mix-blend-mode: multiply;
  filter: grayscale(0.1) contrast(1.1);
}

.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 { display: none; /* why aside unused on merged home */

  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 {
  font-family: var(--sans);

  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,
  .tile:focus-visible .tile-media img { transform: none; transition: none; }
  /* Bold-color: keep solid plate — no hover-reveal dependency */
  .tile.is-bold-color .color-plate { opacity: 1 !important; transition: none; }
  .tile.is-bold-color:hover .color-plate,
  .tile.is-bold-color:focus-visible .color-plate { opacity: 1 !important; }
  .tile.is-tinted-photo .tint-plate { 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;
}


/* Lead badge clear of impact-top / billboard lockups */
.tile.mode-impact-top .tile-badge,
.tile.mode-billboard .tile-badge {
  top: auto;
  bottom: 0.9rem;
  left: 0.9rem;
}
.tile.mode-billboard.is-lead .tile-badge {
  top: 0.9rem;
  bottom: auto;
  background: rgba(255,255,255,0.22);
}

/* Reduced motion: modes still distinct — only kill motion, not hierarchy */
@media (prefers-reduced-motion: reduce) {
  .tile.mode-billboard .tile-title,
  .tile.mode-giant-only .tile-title,
  .tile.mode-impact-bottom .tile-title,
  .tile.mode-impact-top .tile-title {
    transition: none;
  }
}


/* ——— BOLD COLOR: punch plates + edge cradles + luminance type ——— */
/* Mode scrims that grey the whole plate are rewritten for .is-bold-color.
   Type class from app.js: type-on-light (ink) | type-on-dark (white). */

.tile.mode-impact-bottom.is-bold-color .tile-scrim {
  background: linear-gradient(180deg,
    transparent 0%,
    transparent 52%,
    rgba(18, 17, 15, 0.16) 78%,
    rgba(18, 17, 15, 0.48) 100%);
}

.tile.mode-impact-top.is-bold-color .tile-scrim {
  background:
    linear-gradient(180deg,
      rgba(18, 17, 15, 0.38) 0%,
      rgba(18, 17, 15, 0.08) 22%,
      transparent 40%,
      transparent 68%,
      rgba(18, 17, 15, 0.14) 86%,
      rgba(18, 17, 15, 0.42) 100%);
}

.tile.mode-stack-center.is-bold-color .tile-scrim {
  /* Was full-tile grey mush — now a soft radial cradle behind centered type only */
  background:
    radial-gradient(ellipse 72% 48% at 50% 46%,
      rgba(18, 17, 15, 0.28) 0%,
      rgba(18, 17, 15, 0.1) 42%,
      transparent 70%);
}

.tile.mode-mono-meta.is-bold-color .tile-scrim {
  background: linear-gradient(180deg,
    transparent 0%,
    transparent 50%,
    rgba(18, 17, 15, 0.16) 76%,
    rgba(18, 17, 15, 0.5) 100%);
}

.tile.mode-split.is-bold-color .tile-scrim {
  background: linear-gradient(180deg,
    rgba(18, 17, 15, 0.12) 0%,
    transparent 18%,
    transparent 55%,
    rgba(18, 17, 15, 0.14) 80%,
    rgba(18, 17, 15, 0.45) 100%);
}

.tile.mode-ink-block.is-bold-color .tile-scrim {
  background: transparent;
}

.tile.mode-ink-block.is-bold-color .ink-slab {
  /* Dark slab for title; plate above stays vivid */
  background: rgba(18, 17, 15, 0.92);
  border-top-color: rgba(255, 255, 255, 0.22);
  filter: none;
}

.tile.mode-whisper.is-bold-color .tile-scrim,
.tile.mode-billboard.is-bold-color .tile-scrim,
.tile.mode-giant-only.is-bold-color .tile-scrim {
  background: linear-gradient(180deg,
    transparent 0%,
    transparent 58%,
    rgba(18, 17, 15, 0.12) 82%,
    rgba(18, 17, 15, 0.4) 100%);
}

.tile.mode-vertical-rail.is-bold-color .tile-body {
  background: linear-gradient(90deg,
    rgba(18, 17, 15, 0.55) 0%,
    rgba(18, 17, 15, 0.18) 75%,
    transparent 100%);
}

.tile.mode-vertical-rail.is-bold-color .tile-scrim {
  background: transparent;
}

/* type-on-light — near-black ink on light / mid punched plates */
.tile.type-on-light .tile-title {
  color: var(--cream-ink, #12110F);
  text-shadow: none;
}
.tile.type-on-light .tile-caption {
  color: rgba(18, 17, 15, 0.78);
}
.tile.type-on-light .tile-eyebrow {
  color: rgba(18, 17, 15, 0.62);
}
.tile.type-on-light .tile-meta {
  color: rgba(18, 17, 15, 0.5);
}
.tile.type-on-light .tile-badge {
  background: rgba(18, 17, 15, 0.12);
  color: #12110F;
  border-color: rgba(18, 17, 15, 0.2);
}
.tile.type-on-light.mode-split .tile-meta {
  color: rgba(18, 17, 15, 0.48);
}

/* Soft local cradle only — plate stays loud */
.tile.is-bold-color.type-on-light .tile-scrim {
  background: linear-gradient(180deg,
    transparent 0%,
    transparent 62%,
    rgba(18, 17, 15, 0.06) 88%,
    rgba(18, 17, 15, 0.12) 100%);
}
.tile.mode-stack-center.is-bold-color.type-on-light .tile-scrim {
  background:
    radial-gradient(ellipse 70% 46% at 50% 46%,
      rgba(18, 17, 15, 0.1) 0%,
      transparent 68%);
}
.tile.mode-impact-top.is-bold-color.type-on-light .tile-scrim {
  background:
    linear-gradient(180deg,
      rgba(18, 17, 15, 0.1) 0%,
      transparent 24%,
      transparent 72%,
      rgba(18, 17, 15, 0.08) 100%);
}

/* ink-block: slab stays dark + white title even on type-on-light plates */
.tile.mode-ink-block.type-on-light .ink-slab,
.tile.mode-ink-block.type-on-light .ink-slab .tile-title {
  color: #fff;
}
.tile.mode-ink-block.type-on-light .tile-caption {
  color: rgba(18, 17, 15, 0.8);
}
.tile.mode-ink-block.type-on-light .tile-meta {
  color: rgba(18, 17, 15, 0.5);
}

/* type-on-dark — white / off-white (default tile type) */
.tile.type-on-dark .tile-title {
  color: #fff;
}
.tile.type-on-dark .tile-caption {
  color: rgba(255, 255, 255, 0.88);
}
.tile.type-on-dark .tile-eyebrow {
  color: rgba(255, 255, 255, 0.78);
}
.tile.type-on-dark .tile-meta {
  color: rgba(255, 255, 255, 0.55);
}

/* Slightly stronger edge cradle when white type sits on mid-dark plates */
.tile.is-bold-color.type-on-dark .tile-scrim {
  background: linear-gradient(180deg,
    transparent 0%,
    transparent 55%,
    rgba(18, 17, 15, 0.2) 80%,
    rgba(18, 17, 15, 0.55) 100%);
}
.tile.mode-stack-center.is-bold-color.type-on-dark .tile-scrim {
  background:
    radial-gradient(ellipse 74% 50% at 50% 46%,
      rgba(18, 17, 15, 0.4) 0%,
      rgba(18, 17, 15, 0.14) 48%,
      transparent 72%);
}
.tile.mode-impact-top.is-bold-color.type-on-dark .tile-scrim {
  background:
    linear-gradient(180deg,
      rgba(18, 17, 15, 0.5) 0%,
      rgba(18, 17, 15, 0.12) 24%,
      transparent 42%,
      transparent 66%,
      rgba(18, 17, 15, 0.22) 84%,
      rgba(18, 17, 15, 0.55) 100%);
}

/* Expand hero: keep solid vivid; panel copy follows type class when set */
.expand-hero.is-bold-color .expand-hero-scrim {
  background: linear-gradient(180deg, transparent 50%, rgba(18, 17, 15, 0.28) 100%);
}
.expand-panel.type-on-light .expand-eyebrow {
  color: rgba(18, 17, 15, 0.55);
}


/* ——— PHOTO STILLS: readable type on real images ——— */
.tile.is-photo .tile-scrim,
.tile.is-house .tile-scrim {
  z-index: 2;
  background: linear-gradient(180deg,
    rgba(10,8,6,0.18) 0%,
    rgba(10,8,6,0.08) 28%,
    rgba(10,8,6,0.45) 58%,
    rgba(10,8,6,0.92) 100%);
}
.tile.mode-impact-top.is-photo .tile-scrim,
.tile.mode-impact-top.is-house .tile-scrim {
  background: linear-gradient(180deg,
    rgba(10,8,6,0.78) 0%,
    rgba(10,8,6,0.22) 38%,
    rgba(10,8,6,0.18) 58%,
    rgba(10,8,6,0.9) 100%);
}
.tile.is-photo .tile-title,
.tile.is-house .tile-title {
  color: #fff;
  text-shadow: none;
}
.tile.is-photo .tile-caption,
.tile.is-house .tile-caption {
  color: rgba(255,255,255,0.9);
}

/* ——— MOBILE TYPE SCALE (phone + tablet floors) ——— */
/* Phone-first: raise clamp mins so ~390px titles don’t converge; widen ch measure.
   Desktop (>=960) unchanged. Beats aspect-weave min-height:0 via !important floors. */

@media (max-width: 639px) {
  /* Room for big type — override aspect-weave min-height:0 */
  .tile {
    min-height: 340px !important;
  }
  .tile.size-hero {
    min-height: 440px !important;
  }

  /* Slightly more body padding — avoid cramped edges.
     Exclude split (padding:0 + child pads) and ink-block (slab owns pad). */
  .tile:not(.mode-split):not(.mode-ink-block):not(.is-house) .tile-body {
    padding: clamp(1.15rem, 4.5vw, 1.55rem);
  }
  .tile.mode-impact-bottom .tile-body,
  .tile.mode-impact-top .tile-body,
  .tile.mode-stack-center .tile-body,
  .tile.mode-mono-meta .tile-body,
  .tile.mode-giant-only .tile-body {
    padding: clamp(1.2rem, 4.8vw, 1.65rem);
  }

  /* Base title + caption floors */
  .tile-title {
    font-size: clamp(1.7rem, 7.2vw, 2.15rem);
    max-width: 18ch;
  }
  .tile-caption {
    font-size: clamp(0.9rem, 3.8vw, 1.02rem);
  }

  /* —— Mode spread: must feel DIFFERENT on the same scroll —— */

  /* impact-bottom — biggest punch */
  .tile.mode-impact-bottom .tile-title {
    font-size: clamp(2.4rem, 10.5vw, 3.15rem);
    max-width: 14.5ch;
    line-height: 0.98;
  }
  .tile.mode-impact-bottom .tile-caption {
    font-size: clamp(0.88rem, 3.6vw, 0.95rem);
  }

  /* impact-top — almost as big */
  .tile.mode-impact-top .tile-title {
    font-size: clamp(2.25rem, 9.8vw, 2.95rem);
    max-width: 14.5ch;
  }
  .tile.mode-impact-top .tile-caption {
    font-size: clamp(0.88rem, 3.6vw, 0.95rem);
  }

  /* stack-center — airy but NOT small */
  .tile.mode-stack-center .tile-title {
    font-size: clamp(1.95rem, 8.2vw, 2.4rem);
    max-width: 18ch;
  }

  /* mono-meta — uppercase tracking; bigger floor */
  .tile.mode-mono-meta .tile-title {
    font-size: clamp(1.6rem, 6.8vw, 2rem);
  }

  /* split — mid-large; bump eyebrow/meta */
  .tile.mode-split .tile-title {
    font-size: clamp(2rem, 8.8vw, 2.5rem);
    max-width: 16ch;
  }
  .tile.mode-split .tile-eyebrow {
    font-size: 0.68rem;
    padding: 0.85rem 1.2rem 0.4rem;
  }
  .tile.mode-split .tile-title {
    padding: 0 1.2rem;
  }
  .tile.mode-split .tile-caption {
    padding: 0 1.2rem;
    font-size: clamp(0.85rem, 3.4vw, 0.95rem);
  }
  .tile.mode-split .tile-meta {
    font-size: 0.68rem;
    padding: 0.5rem 1.2rem 1.05rem;
  }

  /* ink-block — readable slab */
  .tile.mode-ink-block .ink-slab {
    padding: 1.05rem 1.15rem 1.15rem;
  }
  .tile.mode-ink-block .ink-slab .tile-title {
    font-size: clamp(1.75rem, 7.5vw, 2.2rem);
    max-width: 18ch;
  }

  /* Lead bump */
  .tile.is-lead .tile-title,
  .tile.is-lead.mode-impact-bottom .tile-title,
  .tile.is-lead.mode-impact-top .tile-title {
    font-size: clamp(2.55rem, 11vw, 3.3rem);
  }

  /* Residual killed modes: same floors if classes slip through */
  .tile.mode-billboard .tile-title,
  .tile.mode-giant-only .tile-title {
    font-size: clamp(2.35rem, 10vw, 3.1rem);
    max-width: 14.5ch;
  }
  .tile.mode-whisper .tile-title {
    font-size: clamp(1.7rem, 7.2vw, 2.15rem);
    max-width: 18ch;
  }
  .tile.mode-vertical-rail .tile-title {
    font-size: clamp(1.85rem, 8vw, 2.35rem);
  }
}

@media (min-width: 640px) and (max-width: 959px) {
  /* Tablet 2-col: milder bump — avoid desktop-min on half-width cards */
  .tile {
    min-height: 300px !important;
  }
  .tile.size-hero {
    min-height: 380px !important;
  }

  .tile.mode-impact-bottom .tile-title {
    font-size: clamp(2.1rem, 4.6vw, 2.85rem);
    max-width: 14ch;
  }
  .tile.mode-impact-top .tile-title {
    font-size: clamp(2.05rem, 4.4vw, 2.7rem);
    max-width: 14ch;
  }
  .tile.mode-stack-center .tile-title {
    font-size: clamp(1.65rem, 3.2vw, 2.05rem);
    max-width: 17ch;
  }
  .tile.mode-mono-meta .tile-title {
    font-size: clamp(1.55rem, 2.9vw, 1.9rem);
  }
  .tile.mode-split .tile-title {
    font-size: clamp(1.75rem, 3.5vw, 2.2rem);
    max-width: 15ch;
  }
  .tile.mode-ink-block .ink-slab .tile-title {
    font-size: clamp(1.6rem, 3.1vw, 2rem);
    max-width: 17ch;
  }
  .tile.is-lead .tile-title,
  .tile.is-lead.mode-impact-bottom .tile-title,
  .tile.is-lead.mode-impact-top .tile-title {
    font-size: clamp(2.25rem, 5vw, 3rem);
  }

  /* Residual killed modes */
  .tile.mode-billboard .tile-title,
  .tile.mode-giant-only .tile-title {
    font-size: clamp(2.05rem, 4.5vw, 2.8rem);
    max-width: 14ch;
  }
  .tile.mode-whisper .tile-title,
  .tile.mode-vertical-rail .tile-title {
    font-size: clamp(1.55rem, 3vw, 1.95rem);
  }
}