/* reset & base */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
  background:#0f0f13;color:#e8e8e8;line-height:1.6;min-height:100vh}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* header */
.site-header{background:linear-gradient(135deg,#1a0a2e 0%,#16213e 100%);
  border-bottom:1px solid #2a2a3e;padding:.8rem 1.2rem;
  position:sticky;top:0;z-index:100;backdrop-filter:blur(8px)}
.site-header__inner{max-width:1280px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:1rem}
.site-logo{font-size:1.15rem;font-weight:800;letter-spacing:.04em;
  background:linear-gradient(90deg,#f472b6,#a78bfa);-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text}
.site-tagline{font-size:.72rem;color:#888;display:none}
@media(min-width:480px){.site-tagline{display:block}}

/* container */
.container{max-width:1280px;margin:0 auto;padding:1.5rem 1rem}

/* ─── index page ─── */
.page-heading{font-size:1rem;color:#aaa;margin-bottom:1.2rem;
  padding-bottom:.6rem;border-bottom:1px solid #2a2a3e}

.grid{display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:1rem}
@media(min-width:600px){.grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}
@media(min-width:900px){.grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}}

.card{background:#1a1a2a;border-radius:10px;overflow:hidden;
  border:1px solid #2a2a3e;
  transition:transform .2s,box-shadow .2s,border-color .2s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(167,139,250,.2);border-color:#6d28d9}
.card__img-wrap{position:relative;overflow:hidden;aspect-ratio:3/4;background:#111}
.card__img{width:100%;height:100%;object-fit:cover;
  transition:transform .3s;display:block}
.card:hover .card__img{transform:scale(1.04)}
.card__badge{position:absolute;top:.4rem;right:.4rem;
  background:rgba(239,68,68,.85);color:#fff;font-size:.65rem;
  font-weight:700;padding:.15em .5em;border-radius:4px;letter-spacing:.03em}
.card__body{padding:.65rem .75rem .8rem;flex:1;display:flex;flex-direction:column;gap:.3rem}
.card__title{font-size:.78rem;font-weight:600;line-height:1.45;color:#e8e8e8;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card__actress{font-size:.7rem;color:#a78bfa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card__cta{margin-top:auto;padding-top:.5rem;
  display:inline-block;background:linear-gradient(135deg,#dc2626,#b91c1c);
  color:#fff;text-align:center;border-radius:5px;font-size:.72rem;font-weight:700;
  padding:.38em .5em;letter-spacing:.02em;transition:opacity .15s}
.card:hover .card__cta{opacity:.9}

/* ─── article page ─── */
.breadcrumb{font-size:.75rem;color:#666;margin-bottom:1.2rem}
.breadcrumb a{color:#a78bfa}
.breadcrumb span{margin:0 .35em}

.article{background:#1a1a2a;border-radius:12px;
  border:1px solid #2a2a3e;overflow:hidden}

.article__hero{display:grid;gap:1.5rem;padding:1.5rem}
@media(min-width:700px){
  .article__hero{grid-template-columns:280px 1fr;align-items:start}}

.article__thumb{width:100%;border-radius:8px;aspect-ratio:3/4;object-fit:cover}

.article__info{}
.article__title{font-size:1.05rem;font-weight:800;line-height:1.5;
  margin-bottom:1rem;color:#f0f0f0}

.btn-watch{display:block;text-align:center;
  background:linear-gradient(135deg,#dc2626 0%,#991b1b 100%);
  color:#fff;padding:.9em 1.5em;border-radius:8px;font-weight:800;
  font-size:1rem;letter-spacing:.04em;margin-bottom:1.2rem;
  box-shadow:0 4px 20px rgba(220,38,38,.4);transition:transform .15s,box-shadow .15s}
.btn-watch:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(220,38,38,.55)}
.btn-watch::before{content:"▶ "}

.meta-table{width:100%;border-collapse:collapse;font-size:.82rem;margin-bottom:.8rem}
.meta-table th{color:#888;font-weight:500;padding:.3em .5em .3em 0;
  white-space:nowrap;vertical-align:top;width:5.5em}
.meta-table td{color:#ccc;padding:.3em 0}

.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:.8rem 0}
.tag{background:#1e1b3a;border:1px solid #3730a3;color:#a78bfa;
  padding:.2em .65em;border-radius:99px;font-size:.72rem}

.article__body{padding:0 1.5rem 1.5rem}

.samples-heading{font-size:.85rem;color:#aaa;
  margin:1.2rem 0 .6rem;border-left:3px solid #7c3aed;padding-left:.6rem}
.samples{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.5rem}
.samples img{border-radius:5px;width:100%;aspect-ratio:16/11;object-fit:cover}

.btn-watch-bottom{display:block;text-align:center;
  background:linear-gradient(135deg,#7c3aed 0%,#4c1d95 100%);
  color:#fff;padding:.85em 1.5em;border-radius:8px;font-weight:800;
  font-size:.95rem;letter-spacing:.04em;margin:1.5rem 0;
  box-shadow:0 4px 20px rgba(124,58,237,.35);transition:transform .15s}
.btn-watch-bottom:hover{transform:translateY(-2px)}
.btn-watch-bottom::before{content:"▶ "}

.back-link{display:inline-flex;align-items:center;gap:.4em;
  color:#888;font-size:.85rem;margin-top:.5rem}
.back-link::before{content:"←"}
.back-link:hover{color:#a78bfa}

/* ─── pagination ─── */
.pagination{display:flex;justify-content:center;align-items:center;
  gap:.4rem;margin:2.5rem 0 1rem;flex-wrap:wrap}
.pagination a,.pagination .current{display:inline-flex;align-items:center;
  justify-content:center;min-width:38px;height:38px;padding:0 .5rem;
  border-radius:6px;border:1px solid #2a2a3e;font-size:.88rem;transition:all .15s}
.pagination a{color:#ccc;background:#1a1a2a}
.pagination a:hover{border-color:#7c3aed;color:#a78bfa;background:#1e1b3a}
.pagination .current{background:#7c3aed;border-color:#7c3aed;color:#fff;font-weight:700}

/* ─── footer ─── */
.site-footer{text-align:center;padding:2rem 1rem;
  color:#555;font-size:.75rem;border-top:1px solid #1e1e2e;margin-top:3rem}
.site-footer a{color:#6d5acd}