/* ============================================================
   Rocket Show — global site pages
   Page templates for the parts of the site that have moved off
   WordPress, starting with /products. The global menu itself lives in
   base.css — /spark uses it too. Loaded after base.css.
   ============================================================ */

/* ============================================================
   PAGE HEAD
   ============================================================ */
.page-hero {
  /* Tuned per hero: the front page turns these up, see .page-hero--feature. */
  --hero-tex-opacity: .5;
  --hero-glow-alpha: .42;

  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Deeper than the old flat wash, and close to the /lp hero so the two feel
     like one site. Kept a touch more purple than /lp, which stays the
     moodiest thing on the site. */
  background:
    radial-gradient(1100px 520px at 72% -20%, rgba(124, 58, 237, .42), transparent 62%),
    linear-gradient(160deg, var(--indigo-950) 0%, var(--indigo-900) 48%, #241059 100%);
  color: #fff;
  padding: 70px 0 76px;
  text-align: center;
}
/* Doodle texture, same one the landing-page hero uses. Sized as a fixed
   repeating tile rather than `cover`: these heroes vary a lot in height, and
   cover would show a different slice of the pattern on every page — on the
   short ones a handful of icons blown up large instead of a texture. */
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("images/starfield.webp") 0 0 / 760px repeat;
  opacity: var(--hero-tex-opacity);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: drift 60s linear infinite alternate;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto;
  height: 150%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(157, 107, 255, var(--hero-glow-alpha)), transparent 70%);
  /* glowPulse drives opacity, so intensity is dialled via the gradient alpha
     above. This value is what reduced-motion users get, once base.css has
     switched the animation off. */
  opacity: .85;
  pointer-events: none;
  animation: glowPulse 7s ease-in-out infinite alternate;
}
.page-hero .container { position: relative; z-index: 1; }

/* The front page: same treatment, turned up, with room to breathe. The
   sweeping beams stay exclusive to the /lp heroes. */
.page-hero--feature {
  --hero-tex-opacity: .6;
  --hero-glow-alpha: .58;
  padding: 92px 0 84px;
}
.page-hero h1 { color: #fff; margin-bottom: 14px; }
.page-hero .lede {
  max-width: 60ch;
  margin: 0 auto;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, .78);
}
.page-hero .kicker { margin-bottom: 12px; display: block; }

.section { padding: 84px 0; }
.section-alt { background: var(--paper-2); }
.section-head { max-width: 62ch; margin: 0 auto 44px; text-align: center; }
.section-head .section-sub { margin-top: 12px; color: var(--slate); font-size: 1.05rem; }

/* ============================================================
   PRODUCT CARDS
   ============================================================ */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  align-items: start;
}

.product-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

.product-media {
  position: relative;
  display: grid;
  place-items: center;
  padding: 34px 28px 26px;
  background: linear-gradient(150deg, var(--paper-3), var(--paper-2));
  min-height: 250px;
}
.product-media img { width: min(360px, 100%); height: auto; }
/* the software shot is a screenshot, not a product photo — give it an edge so
   it does not bleed into the panel behind it */
.product-media img.shot {
  border-radius: 12px;
  box-shadow: var(--shadow);
  width: min(320px, 100%);
}

.product-body { display: flex; flex-direction: column; gap: 16px; padding: 30px 30px 34px; flex: 1; }
.product-body h2 { font-size: 1.7rem; text-transform: uppercase; }
.product-tagline { color: var(--slate); }

.product-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: .45em .85em;
  border-radius: 999px;
}
.product-badge.paid { background: rgba(124, 58, 237, .1); color: var(--purple-600); }
.product-badge.free { background: rgba(21, 128, 61, .1); color: #15803d; }

.product-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.product-price strong { font-family: var(--font-display); font-size: 2rem; color: var(--navy-900); }
.product-price span { font-size: .9rem; color: var(--slate-light); }

.product-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.product-list li {
  position: relative;
  padding-left: 28px;
  font-size: .96rem;
  color: var(--slate);
}
.product-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .42em;
  width: 16px; height: 9px;
  border-left: 2.5px solid var(--purple-500);
  border-bottom: 2.5px solid var(--purple-500);
  transform: rotate(-45deg);
}
.product-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 6px; }
.product-fine { font-size: .84rem; color: var(--slate-light); }

/* ============================================================
   COMPARISON
   ============================================================ */
/* The table is the one block that cannot reflow below ~520px, so it scrolls
   inside its own box rather than pushing the whole page sideways. */
.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.compare th, .compare td {
  padding: 15px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: .95rem;
  vertical-align: top;
}
.compare thead th {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--navy-900);
  background: var(--paper-2);
}
.compare tbody th { font-weight: 600; color: var(--navy-800); width: 30%; }
.compare td { color: var(--slate); }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: none; }
.compare .yes { color: #15803d; font-weight: 600; }
.compare .no { color: var(--slate-light); }

/* Scan marks. The text in the cell still carries the fact — the badge only
   exists so the two columns can be read at a glance: a check where the feature
   is there, an amber bar where it takes extra hardware or work, a cross where
   it is not available at all. Drawn with ::before on purpose: i18n rewrites the
   cell's innerHTML on every language switch, and a pseudo-element survives that.
   .yes/.no above still colour the text; these classes only place the badge. */
.compare td.mark-yes,
.compare td.mark-part,
.compare td.mark-no { position: relative; padding-left: 48px; }
/* Price carries no badge but keeps the indent, so the column stays aligned. */
.compare td.mark-blank { padding-left: 48px; }

.compare td.mark-yes::before,
.compare td.mark-part::before,
.compare td.mark-no::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 16px;
  width: 19px;
  height: 19px;
  background-repeat: no-repeat;
  background-size: 19px 19px;
}
.compare td.mark-yes::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%2315803d'/%3E%3Cpath d='M5.9 10.4l2.8 2.8 5.5-5.9' fill='none' stroke='%23fff' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.compare td.mark-part::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%23c07a12'/%3E%3Cpath d='M6.3 10h7.4' fill='none' stroke='%23fff' stroke-width='2.1' stroke-linecap='round'/%3E%3C/svg%3E");
}
.compare td.mark-no::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%23c8302b'/%3E%3Cpath d='M6.9 6.9l6.2 6.2M13.1 6.9l-6.2 6.2' fill='none' stroke='%23fff' stroke-width='2.1' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* The badge column costs the table 60px it has to scroll for on a phone, so it
   gets tighter where the scrolling actually hurts. */
@media (max-width: 560px) {
  .compare { min-width: 600px; }
  .compare td.mark-yes,
  .compare td.mark-part,
  .compare td.mark-no,
  .compare td.mark-blank { padding-left: 42px; }
  .compare td.mark-yes::before,
  .compare td.mark-part::before,
  .compare td.mark-no::before { left: 16px; }
}

/* ============================================================
   COMMUNITY EDITION SETUP
   ============================================================ */
.setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }

.setup-steps { counter-reset: step; display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.setup-steps li { position: relative; padding-left: 54px; }
.setup-steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0; top: -2px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: #fff;
  background: linear-gradient(135deg, var(--purple-600), var(--purple-500));
}
.setup-steps h3 { margin-bottom: 5px; font-size: 1.1rem; }
.setup-steps p { color: var(--slate); font-size: .96rem; }
.setup-steps code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
  background: var(--paper-3);
  border-radius: 6px;
  padding: .1em .4em;
}
.setup-steps a:not(.btn) { color: var(--purple-600); text-decoration: underline; text-underline-offset: 2px; }

.panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 30px;
}
.panel + .panel { margin-top: 22px; }
.panel h3 { margin-bottom: 14px; }
.panel p { color: var(--slate); font-size: .96rem; }
/* Prose links only. Without the :not(), this beats .btn-primary on specificity
   and repaints the download button purple-on-purple — its own colour, its own
   background, nothing left to read. */
.panel a:not(.btn) { color: var(--purple-600); text-decoration: underline; text-underline-offset: 2px; }


.hw-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.hw-list li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; font-size: .96rem; color: var(--slate); }
.hw-list svg { color: var(--purple-500); margin-top: 3px; }

/* ============================================================
   CLOSING CTA
   ============================================================ */
.cta-band {
  background: linear-gradient(135deg, var(--indigo-900), var(--purple-700));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 52px 40px;
  text-align: center;
}
.cta-band h2 { color: #fff; margin-bottom: 14px; }
.cta-band p { color: rgba(255, 255, 255, .75); max-width: 56ch; margin: 0 auto 26px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .product-grid, .setup-grid { grid-template-columns: 1fr; }
  .section { padding: 64px 0; }
}

@media (max-width: 560px) {
  .page-hero { padding: 54px 0 58px; }
  .page-hero--feature { padding: 62px 0 64px; }
  /* the tile is 760px; shrink it so the pattern still reads as texture
     on a phone rather than two oversized icons */
  .page-hero::after { background-size: 460px; }
  .product-body { padding: 26px 22px 30px; }
  .cta-band { padding: 40px 24px; }
  .panel { padding: 24px 20px; }
}

/* ============================================================
   HERO EXTRAS
   ============================================================ */
.page-hero .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 30px;
}
/* The proof strip between the buttons and the screenshot. base.css owns the
   look of it — shared with the /lp heroes — and this only re-lays it out for a
   hero that is centred rather than a two-column split. */
.page-hero .hero-proof {
  justify-content: center;
  text-align: center;
  max-width: 640px;
  margin: 36px auto 0;
  border-top-color: rgba(255, 255, 255, .16);
}

.hero-shot {
  width: min(760px, 100%);
  height: auto;
  margin: 44px auto 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: block;
  position: relative;
  z-index: 2;
}

/* The same treatment as the hero shot, for a screenshot that stands on its own
   further down a page, under the copy that describes it rather than above it. */
.section-shot {
  display: block;
  width: min(760px, 100%);
  height: auto;
  margin: 44px auto 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* ============================================================
   TILES
   A card grid that carries a short feature, audience or benefit.
   ============================================================ */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 22px;
}
.tile {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; }
.tile h3 { margin-bottom: 8px; }
.tile p { color: var(--slate); font-size: .96rem; }
.tile-icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  margin-bottom: 16px;
  color: var(--purple-600);
  background: var(--paper-3);
}
.tile:hover .tile-icon { background: var(--purple-600); color: #fff; }

/* ============================================================
   SHOWCASE ROWS
   One feature, one screenshot, alternating sides down the page.
   ============================================================ */
.showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 54px;
  align-items: center;
}
.showcase + .showcase { margin-top: 72px; }
/* The flipped row swaps the columns rather than reversing the DOM, so the
   heading still comes before its screenshot for a screen reader. */
.showcase--flip .showcase-media { order: -1; }
.showcase-copy .kicker { display: block; margin-bottom: 12px; }
.showcase-copy h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: 14px; }
.showcase-copy p { color: var(--slate); }
.showcase-copy p + p { margin-top: 12px; }
/* Prose links only. Without the :not(), this beats .btn-primary on specificity
   and repaints the designer button purple-on-purple. */
.showcase-copy a:not(.btn) { color: var(--purple-600); text-decoration: underline; text-underline-offset: 2px; }
.showcase-media img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.showcase-media.tall img { width: min(340px, 100%); margin: 0 auto; }

/* The call to action inside a row: the button and the small reassurance beside
   it sit on one line where there is room, and stack when there is not. */
.showcase-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 22px;
}
.showcase-cta .note { font-size: .9rem; color: var(--slate); }

/* A screenshot that links to the thing it shows — the lighting designer, which
   runs in the browser. The caption is what says so; without it a clickable
   screenshot is a link nobody knows is there. */
.showcase-shot { display: block; }
.showcase-shot figure { margin: 0; }
.showcase-shot img { transition: transform .25s ease, box-shadow .25s ease; }
.showcase-shot:hover img { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.showcase-shot figcaption {
  font-size: .84rem;
  font-weight: 600;
  color: var(--slate);
  text-align: center;
  padding-top: 12px;
  transition: color .2s ease;
}
.showcase-shot:hover figcaption { color: var(--purple-600); }

/* ============================================================
   TRACK RECORD
   The numbers band above the testimonials. The quote cards themselves and the
   GitHub note under them come from base.css, shared with /spark and /lp.
   ============================================================ */
/* Grid, not flex: the four columns have to stay equal even though
   "Switzerland" is several times the width of "15", and the hairline dividers
   only land on even spacing that way. The 1px gap IS the divider — the row
   paints --line behind and each cell paints --paper over it. */
.stat-row {
  list-style: none;
  margin: 0 0 44px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.stat-row li { background: var(--paper); padding: 30px 22px; text-align: center; }
.stat-row strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3vw, 2.25rem);
  line-height: 1.05;
  letter-spacing: -0.5px;
  color: var(--purple-600);
}
.stat-row span { display: block; margin-top: 6px; font-size: .9rem; color: var(--slate); }

@media (max-width: 900px) {
  /* two-up rather than a single column: four stacked cells turn a proof band
     into a scroll. */
  .stat-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
  .stat-row li { padding: 22px 12px; }
  .stat-row span { font-size: .84rem; }
}

/* ============================================================
   BLOG TEASER
   Filled in from the WordPress REST API at runtime — the blog is
   the one part of the site still living there.
   ============================================================ */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.blog-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.blog-card time { font-size: .82rem; color: var(--slate-light); }
.blog-card h3 { font-size: 1.15rem; }
.blog-card p { color: var(--slate); font-size: .94rem; }
.blog-card span { color: var(--purple-600); font-weight: 600; font-size: .9rem; margin-top: auto; }

/* ============================================================
   SUPPORT
   ============================================================ */
.info-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.info-list li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; }
.info-list svg { color: var(--purple-500); margin-top: 3px; }
.info-list h3 { font-size: 1rem; margin-bottom: 4px; }
.info-list p, .info-list address {
  color: var(--slate);
  font-size: .95rem;
  font-style: normal;
  line-height: 1.6;
}
.info-list a { color: var(--purple-600); text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .showcase { grid-template-columns: 1fr; gap: 28px; }
  .showcase + .showcase { margin-top: 52px; }
  .showcase--flip .showcase-media { order: 0; }
}

/* ============================================================
   BLOG LISTING
   ============================================================ */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
}
.post-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
/* height:auto or the HTML height attribute wins and aspect-ratio never
   applies — which stretched these covers to 700px tall. */
.post-card img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.post-card-body { display: flex; flex-direction: column; gap: 10px; padding: 26px 26px 30px; flex: 1; }
.post-card time { font-size: .82rem; color: var(--slate-light); }
.post-card h2 { font-size: 1.25rem; text-transform: none; letter-spacing: 0; line-height: 1.25; }
.post-card p { color: var(--slate); font-size: .95rem; }
.post-card span { margin-top: auto; padding-top: 6px; color: var(--purple-600); font-weight: 600; font-size: .9rem; }

/* ============================================================
   A POST
   ============================================================ */
.post .page-hero h1 { font-size: clamp(2rem, 4vw, 3.1rem); text-transform: none; letter-spacing: -0.5px; }
.post .page-hero time { font-variant-numeric: tabular-nums; }

.post-cover {
  width: min(900px, 100%);
  height: auto;              /* see .post-card img above */
  margin: -46px auto 0;      /* lifted into the hero above it */
  position: relative;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Prose measure: long enough to read, short enough not to lose the line. */
.post-body {
  width: min(68ch, calc(100% - 48px));
  margin: 52px auto 0;
  font-size: 1.06rem;
  line-height: 1.75;
  color: var(--ink);
}
.post-body > * + * { margin-top: 1.15em; }
.post-body h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  text-transform: none;
  letter-spacing: -0.3px;
  margin-top: 1.9em;
}
.post-body h3 { font-size: 1.25rem; margin-top: 1.6em; }
.post-body ul, .post-body ol { padding-left: 1.3em; }
.post-body li + li { margin-top: .4em; }
.post-body a {
  color: var(--purple-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.post-body blockquote {
  margin-left: 0;
  padding-left: 20px;
  border-left: 3px solid var(--violet-400);
  color: var(--slate);
  font-style: italic;
}
.post-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
  background: var(--paper-3);
  border-radius: 6px;
  padding: .1em .4em;
}

.post-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  max-width: 900px;
  margin: 64px auto 0;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.post-nav-link {
  max-width: 46%;
  font-weight: 600;
  font-size: .95rem;
  color: var(--navy-800);
  transition: color .2s ease;
}
.post-nav-link:hover { color: var(--purple-600); }
.post-nav-link.next { margin-left: auto; text-align: right; }
.post-back { max-width: 900px; margin: 26px auto 0; }
.post-back a { color: var(--purple-600); font-weight: 600; font-size: .95rem; }

/* ------------------------------------------------------------
   Embedded video, click to load
   The player is only fetched once someone asks for it, which is
   what lets the caption under the frame say what it says. The
   handler that swaps in the iframe lives in script.js.
   ------------------------------------------------------------ */
.post-video { margin-top: 2em; }
.video-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--navy-900);
}
.video-wrap iframe, .video-facade { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-facade {
  display: grid;
  place-items: center;
  padding: 0;
  background: none;
  cursor: pointer;
}
.video-poster { width: 100%; height: 100%; object-fit: cover; }
.video-play {
  position: absolute;
  width: 68px; height: 68px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--purple-600), var(--purple-500));
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .6);
  transition: transform .2s ease;
}
.video-facade:hover .video-play { transform: scale(1.08); }
.video-note { margin-top: 10px; font-size: .84rem; color: var(--slate-light); }

@media (max-width: 620px) {
  .post-cover { margin-top: -26px; border-radius: var(--radius); }
  .post-nav-link { max-width: 100%; }
  .post-nav-link.next { margin-left: 0; text-align: left; }
}