:root{
      --page-max: 960px;
      --card-min: 290px;
      --card-gap: 20px;
      --ink:#111;
      --bg:#f8f0de;
    }
    html, body{ overflow-x:hidden; background:var(--bg); color:var(--ink); }

    .section{ max-width: var(--page-max); margin: 0 auto; padding: 20px 12px 0; }
    .section-head{ display:flex; align-items:left; justify-content:space-between; gap:12px; }
    .section-head h2{ display:block !important; font-size:26px !important; font-weight:800 !important; margin:8px 0 12px !important; color:#111 !important; }

    .filter-chips{ display:flex; flex-wrap:wrap; gap:10px; margin: 6px 12px 18px; }
    .filter-chips .chip{ background:#ffdb4d;border-radius:999px;padding:8px 14px;font-weight:800;border:2px solid #111;box-shadow:0 2px 0 #b98700; cursor:pointer; }
    .filter-chips .chip.active{ transform:translateY(1px); }

    .works-section{ max-width: var(--page-max) !important; margin: 0 auto !important; padding: 0 12px 24px !important; box-sizing: border-box; }
    .work-grid{ display:grid !important; grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr)) !important; gap: var(--card-gap) !important; align-items:start !important; width:100% !important; }

    .work-card{ background:#fff;border:3px solid #111;border-radius:18px; box-shadow:0 6px 0 #111; overflow:hidden; }
    .work-card .video-box{ position:relative;width:100%;padding-top:56.25%;background:#000 }
    .work-card .video-box iframe,
    .work-card .video-box video{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block }
    .video-overlay{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.35); transition:opacity .18s ease; z-index:2 }
    .video-overlay.hidden{ opacity:0; pointer-events:none }
    .video-overlay .play-btn{ background:#eebc00; color:#111; border:3px solid #111; border-radius:9999px; padding:14px 22px; font-weight:800; font-size:18px; box-shadow:0 4px 0 #111; }
    .video-overlay.replay .play-btn{ background:#1c46b5; color:#fff; }

    .work-card .body{ padding:12px 14px 0 }
    .work-card h3{ margin:6px 0 8px; font-size:18px }
    .work-card .meta{ font-size:12px; line-height:1.6; color:#333; margin:8px 0 }
    .work-card .caption-line{ font-size:14px; margin:8px 0 0; color:#111; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
    .work-card .actions{ display:flex; justify-content:center; padding:12px 14px 16px }
    .btn-post{ color:#fff; border:3px solid #111; border-radius:12px; padding:12px 16px; font-weight:800; text-decoration:none; box-shadow:0 4px 0 #111; display:inline-flex; gap:8px; align-items:center }
    .btn-post + .btn-post{ margin-left:8px }
    .btn-post.btn-view{ background:#007BFF }
    .btn-post.btn-like{ background:#ff4081 }
    .btn-post:hover{ filter:brightness(.95) }
    .btn-post:disabled{ opacity:.5; pointer-events:none }

    @media (max-width: 900px){ :root{ --card-min: 260px; --card-gap: 16px; } }
    @media (max-width: 560px){ :root{ --card-min: 100%;  --card-gap: 14px; } }