/* ══════════════════════════════════════════════════════════════
   THE ORVANNIS VIDEO BLOG — newsletters + video blog
   Built 2026-08-18. Mobile-first: every rule below is the 375px
   rule; wider screens only get overrides at the bottom.
   ══════════════════════════════════════════════════════════════ */

/* ── the video list ─────────────────────────────────────────── */
.blog-list{display:flex;flex-direction:column;gap:var(--sp-12)}

.blog-entry{
  border:1px solid var(--color-border);
  border-radius:var(--r-xl);
  background:var(--color-surface);
  overflow:hidden;
}

/* The click-to-play poster. Each player takes its VIDEO's own shape via --ar,
   so nothing is ever cropped — a square film in a 16:9 box was cutting the top
   of Brian's head off. --pw caps the square ones so they don't tower over the
   write-up at desktop width; on phones the cap never binds. */
.blog-player{
  position:relative;
  aspect-ratio:var(--ar,16/9);
  width:100%;
  max-width:var(--pw,100%);
  margin-inline:auto;
  align-self:center;       /* the card is a flex column; this centres a capped player */
  background:#0c0907;
  border:0;
  padding:0;
  margin-block:0;          /* NOT `margin:0` — that cancels the auto centring above */
  display:block;
  cursor:pointer;
  overflow:hidden;
}
.blog-player img{
  width:100%;height:100%;
  object-fit:contain;      /* show the whole frame, never crop the subject */
  display:block;
  transition:transform var(--dur-slow) var(--ease-out),opacity var(--dur-base) var(--ease-out);
}
.blog-player:hover img,.blog-player:focus-visible img{transform:scale(1.03);opacity:.85}

/* copper play button */
.blog-play{
  position:absolute;inset:0;
  display:grid;place-items:center;
  pointer-events:none;
}
.blog-play span{
  width:64px;height:64px;
  border-radius:var(--r-full);
  border:1.5px solid var(--copper);
  background:rgba(12,9,7,.55);
  backdrop-filter:blur(3px);
  display:grid;place-items:center;
  box-shadow:0 6px 8px rgba(0,0,0,.45);
  transition:transform var(--dur-base) var(--ease-out),background var(--dur-base) var(--ease-out);
}
.blog-player:hover .blog-play span,
.blog-player:focus-visible .blog-play span{transform:scale(1.09);background:rgba(12,9,7,.72)}
.blog-play svg{width:26px;height:26px;color:var(--copper);margin-left:3px}

/* runtime chip */
.blog-time{
  position:absolute;right:10px;bottom:10px;
  font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:.02em;
  color:#fff;background:rgba(12,9,7,.78);
  padding:3px 8px;border-radius:var(--r-sm);
  pointer-events:none;
}

.blog-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.blog-player video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:contain;background:#0c0907}

.blog-body{padding:var(--sp-5)}
.blog-kicker{
  font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:.02em;text-transform:uppercase;
  color:var(--copper);
  display:block;margin-bottom:var(--sp-2);
}
.blog-title{
  font-family:var(--font-heading);
  font-size:var(--text-xl);line-height:1.36;
  color:var(--color-heading);
  margin:0 0 var(--sp-3);
}
.blog-desc{
  font-size:var(--text-base);line-height:1.7;
  color:var(--color-text-muted);
  margin:0 0 var(--sp-4);
}
.blog-desc + .blog-desc{margin-top:calc(var(--sp-4) * -1 + var(--sp-3))}
.blog-meta{
  display:flex;flex-wrap:wrap;gap:var(--sp-3);
  align-items:center;
  font-family:var(--font-mono);font-size:var(--text-xs);
  color:var(--color-text-faint);
  letter-spacing:.02em;
}
.blog-meta a{color:var(--copper);text-decoration:none}
.blog-meta a:hover{text-decoration:underline}

/* the numbers pulled out of the walkthrough */
.blog-stats{
  list-style:none;margin:0 0 var(--sp-4);padding:0;
  display:grid;gap:var(--sp-3);
  border-top:1px solid var(--color-divider);
  padding-top:var(--sp-4);
}
.blog-stats li{display:flex;gap:var(--sp-3);align-items:baseline}
.blog-stats b{
  font-family:var(--font-mono);
  color:var(--copper);
  font-size:var(--text-base);
  flex:0 0 auto;min-width:4.5em;
}
.blog-stats span{color:var(--color-text-muted);font-size:var(--text-sm);line-height:1.6}

/* ── newsletter block ─────────────────────────────────────────
   PARKED 2026-08-18 — Brian has not created the newsletter yet, so the
   markup was removed from blog.html rather than shipped as a promise the
   business could not keep. These rules stay so putting the block back is
   restoring one <section>, not rebuilding the styling. Do not delete.
   ───────────────────────────────────────────────────────────── */
.blog-news{
  border:1px solid var(--color-border);
  border-radius:var(--r-xl);
  background:var(--color-surface-raised,var(--color-surface));
  padding:var(--sp-6);
}
.blog-news h2{
  font-family:var(--font-heading);
  font-size:var(--text-2xl);line-height:1.36;
  color:var(--color-heading);margin:0 0 var(--sp-4);
}
.blog-news p{
  font-size:var(--text-base);line-height:1.7;
  color:var(--color-text-muted);margin:0 0 var(--sp-4);
}
.blog-news .btn{width:100%;justify-content:center}
.blog-soon{
  display:inline-block;
  font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:.02em;text-transform:uppercase;
  color:var(--copper);
  border:1px solid var(--copper-muted,var(--copper));
  border-radius:var(--r-full);
  padding:4px 12px;margin-bottom:var(--sp-4);
}

/* ── wider screens ──────────────────────────────────────────── */
@media(min-width:760px){
  .blog-body{padding:var(--sp-8)}
  .blog-title{font-size:var(--text-2xl)}
  .blog-play span{width:82px;height:82px}
  .blog-play svg{width:32px;height:32px}
  .blog-stats{grid-template-columns:1fr 1fr;gap:var(--sp-4) var(--sp-6)}
  .blog-news{padding:var(--sp-10)}
  .blog-news .btn{width:auto}
}