/* ── Demo preview page — layered on top of home.css ── */

  /* masthead tweaks */
  .logo-link{display:inline-block;color:var(--fg);border-bottom:none}
  .logo-link:hover{color:var(--red)}
  p.back{margin-top:22px;margin-bottom:0}
  p.back a{
    font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
    color:var(--grey-4);border-bottom:1px solid var(--grey-2);
  }
  p.back a:hover{color:var(--red);border-color:var(--red)}

  /* ── video grid ── */
  .video-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
    gap:1px;
    margin-top:8px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .video-card{background:var(--bg);padding:18px 18px 20px;display:flex;flex-direction:column;gap:16px}

  .video-frame{
    position:relative;
    aspect-ratio:16/9;
    background:#000;
    border:1px solid var(--grey-2);
    transition:border-color .4s;
  }
  .video-card:hover .video-frame{border-color:var(--grey-3)}
  .video-frame video{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:contain;
    display:block;
    background:#000;
  }

  /* ── caption ── */
  .video-card figcaption{display:flex;gap:14px;align-items:flex-start}
  .video-card figcaption .n{
    font-family:var(--mono);font-size:10px;color:var(--grey-3);
    padding-top:4px;min-width:22px;
  }
  .video-card .title{
    font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--fg);margin-bottom:8px;
  }
  .video-card .desc{font-size:13px;line-height:1.5;color:var(--grey-4);margin-bottom:0}

  /* ── closing note ── */
  p.note{
    margin-top:26px;padding-top:20px;border-top:1px solid var(--line);
    font-size:13px;color:var(--grey-4);
  }
  p.note code{
    font-family:var(--mono);font-size:12px;color:var(--fg);
    background:var(--grey-1);border:1px solid var(--line-soft);padding:1px 6px;
  }

  footer .mono a{border-bottom:1px solid var(--grey-3)}
  footer .mono a:hover{color:var(--red);border-color:var(--red)}

  @media (max-width:640px){
    .video-card{padding:16px 14px 18px}
    .video-card figcaption{gap:10px}
  }

  @media print{
    .video-frame{display:none}
    .video-card figcaption .n{display:none}
  }