.lh-mag.inspiration-feature {
  --inspiration-accent: #85475b;
  --inspiration-wash: #efdee0;
  --inspiration-light: #f9f3ec;
  --inspiration-second: #eee2d2;
  --inspiration-third: #e9e2ee;
  --inspiration-dark: #2c1d27;
  --inspiration-glow: #925167;
  --inspiration-cover: 8 / 5;
  --inspiration-cover-mobile: 6 / 5;
  --inspiration-focus: 50% 42%;
  --inspiration-cover-width: 1150px;
  overflow: clip;
}

.inspiration-feature[data-inspiration="height"],
.inspiration-feature[data-inspiration="architecture"] {
  --inspiration-accent: #4f5d66;
  --inspiration-wash: #e0e6e6;
  --inspiration-third: #e7ded3;
  --inspiration-dark: #20272e;
  --inspiration-glow: #668198;
}

.inspiration-feature[data-inspiration="architecture"] {
  --inspiration-cover: 16 / 9;
  --inspiration-cover-width: 1360px;
  --inspiration-focus: 50% 50%;
}

.inspiration-feature[data-inspiration="ritual"] {
  --inspiration-accent: #575863;
  --inspiration-wash: #e6e0ea;
  --inspiration-third: #dee7e1;
  --inspiration-dark: #262431;
  --inspiration-glow: #776180;
  --inspiration-cover: 6 / 5;
  --inspiration-cover-mobile: 1;
  --inspiration-cover-width: 840px;
  --inspiration-focus: center;
}

.inspiration-feature[data-inspiration="dream"],
.inspiration-feature[data-inspiration="intimacy"] {
  --inspiration-accent: #78506e;
  --inspiration-wash: #e9deec;
  --inspiration-glow: #845886;
}

.inspiration-feature[data-inspiration="surprise"] {
  --inspiration-accent: #8b5145;
  --inspiration-wash: #f1dfd4;
  --inspiration-glow: #a2604b;
}

.inspiration-feature[data-inspiration="harmony"] {
  --inspiration-cover: 21 / 9;
  --inspiration-cover-mobile: 7 / 5;
  --inspiration-cover-width: 1360px;
}

.inspiration-feature .hero h1 {
  max-width: 21ch;
  font-size: clamp(2.55rem, 5.5vw, 5.3rem);
  overflow-wrap: break-word;
}

.inspiration-feature .hero-lede { color: var(--light-ink); }
.inspiration-feature .eyebrow {
  letter-spacing: .04em;
  text-transform: none;
  font-size: .84rem;
}

.inspiration-feature .section-num,
.article-cinema .inspiration-feature > .back:first-child { display: none; }

.article-cinema .inspiration-feature.lh-mag > .hero-media {
  width: min(94%, var(--inspiration-cover-width));
  max-width: none;
  aspect-ratio: var(--inspiration-cover);
  background: var(--light-paper);
}

.article-cinema .inspiration-feature .article-hero-camera > :is(img, video) {
  object-position: var(--inspiration-focus);
}

.article-cinema .inspiration-feature .hero-media figcaption {
  padding-inline: 1rem;
  text-align: center;
  background: var(--light-paper);
}

/* Keep the introductory themes as four small captions under the photograph. */
.inspiration-feature :is(.height-strip, .arch-strip, .imagine-strip, .dream-strip, .ritual-strip, .pulse, .desire-strip, .palette) {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(88%, 58rem);
  margin: 0 auto;
  padding: clamp(1rem, 2.5vw, 1.8rem) 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--light-rule);
  gap: .7rem 1.2rem;
  text-align: center;
}

.inspiration-feature :is(.height-item, .arch-item, .imagine-item, .dream-item, .ritual-item, .pulse-item, .desire-item, .tone):nth-child(n) {
  min-width: 0;
  padding: .35rem 0;
  background: none;
  border: 0;
}

.inspiration-feature :is(.height-k, .arch-k, .imagine-k, .dream-k, .ritual-k, .pulse-k, .desire-k, .tone-k) {
  color: var(--inspiration-accent);
  font-size: .78rem;
  text-transform: none;
  letter-spacing: .03em;
}

.inspiration-feature :is(.height-v, .arch-v, .imagine-v, .dream-v, .ritual-v, .pulse-v, .desire-v, .tone-v) {
  margin: .25rem 0 0;
  color: var(--light-ink);
  font: 400 clamp(1.05rem, 2vw, 1.4rem)/1.2 var(--light-display);
  text-wrap: balance;
}

.inspiration-feature .section--deep {
  background: var(--inspiration-dark);
}

.inspiration-feature .section--deep::before {
  inset: -15%;
  background: radial-gradient(ellipse at center, var(--inspiration-glow), transparent 64%);
  opacity: .47;
}

.inspiration-feature :is(.altitude, .manifesto, .story-grid, .cinema, .soft-panel, .science, .slow-grid, .signature) {
  margin: 0 auto;
  padding-top: 0;
  border: 0;
  gap: clamp(1.6rem, 5vw, 4rem);
  max-width: 55rem;
}

.inspiration-feature :is(.altitude-note, .manifesto-note, .story-quote, .cinema-note, .soft-note, .science-callout, .slow-note, .signature-card) {
  padding: clamp(1.1rem, 2.7vw, 2rem);
  background: color-mix(in srgb, var(--inspiration-glow) 15%, transparent);
  border: 0;
  border-top: 1px solid var(--inspiration-glow);
}

.inspiration-feature :is(.altitude-note, .manifesto-note, .story-quote, .cinema-note, .soft-note, .science-callout, .slow-note, .signature-card) :is(p, .display):last-child {
  margin-bottom: 0;
}

.inspiration-feature :is(.effects, .legacy-grid, .symbols, .scene-grid, .ritual-grid, .surprise-grid, .moment-grid, .practice-grid, .codes) {
  --frame-columns: 3;
  display: grid;
  grid-template-columns: repeat(var(--frame-columns), minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.7rem);
  max-width: 58rem;
  margin: clamp(1.45rem, 3vw, 2.6rem) auto 0;
}

.inspiration-feature :is(.symbols, .moment-grid, .codes) {
  --frame-columns: 2;
  max-width: 49rem;
}

.inspiration-feature :is(.effect, .legacy-card, .symbol, .scene, .ritual-card, .surprise-card, .moment-card, .practice-card, .code) {
  --frame-wash: var(--inspiration-wash);
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: clamp(1.2rem, 3vw, 2rem);
  border: 1px solid var(--light-rule);
  color: var(--light-ink);
  background:
    linear-gradient(var(--inspiration-accent), var(--inspiration-accent)) left .65rem top .65rem / 1.6rem 1px no-repeat,
    linear-gradient(133deg, var(--frame-wash), var(--inspiration-light) 88%);
}

.inspiration-feature :is(.effect, .legacy-card, .symbol, .scene, .ritual-card, .surprise-card, .moment-card, .practice-card, .code):nth-child(even) {
  --frame-wash: var(--inspiration-second);
}
.inspiration-feature :is(.effect, .legacy-card, .symbol, .scene, .ritual-card, .surprise-card, .moment-card, .practice-card, .code):nth-child(3) {
  --frame-wash: var(--inspiration-third);
}

.inspiration-feature :is(.effect, .legacy-card, .symbol, .scene, .ritual-card, .surprise-card, .moment-card, .practice-card, .code) h3 {
  color: var(--light-ink);
  font-size: clamp(1.45rem, 2.55vw, 2.16rem);
  overflow-wrap: break-word;
  text-wrap: pretty;
}
.inspiration-feature :is(.effect, .legacy-card, .symbol, .scene, .ritual-card, .surprise-card, .moment-card, .practice-card, .code) p {
  color: var(--light-ink);
  font-size: 1rem;
  line-height: 1.6;
}
.inspiration-feature .scene-n { color: var(--inspiration-accent); }

.inspiration-feature .timeline {
  max-width: 46rem;
  margin-inline: auto;
}
.inspiration-feature .time-year {
  color: var(--inspiration-accent);
  font: 400 clamp(1.22rem, 2.5vw, 2rem)/1.16 var(--light-display);
  letter-spacing: 0;
  text-transform: none;
}
.inspiration-feature .slow-row {
  padding-inline: .9rem;
  background: linear-gradient(90deg, color-mix(in srgb, var(--inspiration-glow) var(--stage-glow, 8%), transparent), transparent);
}
.inspiration-feature .slow-row.is-inspiration-current { --stage-glow: 34%; }

.inspiration-feature :is(.question, .ending) { padding: clamp(2.75rem, 6vw, 5.25rem) 1.5rem; }
.inspiration-feature :is(.question, .ending) .display { text-wrap: balance; }

.article-cinema .inspiration-feature .article-related-section h2 {
  max-width: none;
  overflow-wrap: break-word;
}
.article-cinema .inspiration-feature .article-related-grid[data-related-count] { margin-inline: auto; }
.article-cinema .inspiration-feature .article-related-card .article-related-media { aspect-ratio: 4 / 3; }
.article-cinema .inspiration-feature .article-related-card[data-artwork-kind="document"] img {
  transform: none;
}
.article-cinema .inspiration-feature .article-related-card :is(.related-title, h3),
.article-cinema .inspiration-feature .article-related-card:hover :is(.related-title, h3) {
  color: var(--light-ink);
}
.article-cinema .inspiration-feature .article-related-card :is(.related-k, .article-read) {
  color: var(--inspiration-accent);
}
.inspiration-feature .cta-actions { margin-inline: auto; }
.inspiration-feature a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: .3rem;
}

@media (max-width: 760px) {
  .article-cinema .inspiration-feature.lh-mag > .hero-media {
    width: 100%;
    aspect-ratio: var(--inspiration-cover-mobile);
  }
  .inspiration-feature :is(.height-strip, .arch-strip, .imagine-strip, .dream-strip, .ritual-strip, .pulse, .desire-strip, .palette) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .inspiration-feature :is(.effects, .legacy-grid, .symbols, .scene-grid, .ritual-grid, .surprise-grid, .moment-grid, .practice-grid, .codes) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 500px) {
  .inspiration-feature :is(.effects, .legacy-grid, .symbols, .scene-grid, .ritual-grid, .surprise-grid, .moment-grid, .practice-grid, .codes) {
    grid-template-columns: minmax(0, 1fr);
    width: 94%;
    margin-inline: auto;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .inspiration-feature .section--deep::before {
    transform: translate(var(--glow-x, 0px), var(--glow-y, 0px));
  }

  .inspiration-feature .inspiration-motion > * {
    transform: translate3d(var(--reading-x, 0px), var(--reading-y, 0px), 0);
  }

  .inspiration-feature .inspiration-frame {
    transform: translate3d(var(--frame-x, 0px), var(--frame-y, 0px), 0) rotate(var(--frame-angle, 0deg));
  }

  .inspiration-feature .slow-row { transition: background .35s ease; }

  .article-cinema .inspiration-feature .article-related-card:not([data-artwork-kind="document"]) .article-related-media img {
    transform: translateY(var(--related-drift, 0%)) scale(1.15);
    transition: filter .25s ease;
  }
}

.inspiration-feature :is(.inspiration-frame-grid, .slow-list) { position: relative; }