/* HentaiVN promo site. Layout: chapter-flow. Palette: near black + coral. */

:root{
  --bg:#0b0d10;
  --card:#16191f;
  --card2:#12161b;
  --line:#232a33;
  --line2:#1b2129;
  --tx:#e7e9ec;
  --mu:#9aa3ad;
  --mu2:#7f8994;
  --ac:#f43f5e;
  --head:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --body:"Noto Sans","Segoe UI",Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--tx);
  font-family:var(--body);font-size:15px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3{margin:0;font-family:var(--head);font-weight:700;letter-spacing:.01em}
p{margin:0 0 12px}
p:last-child{margin-bottom:0}

.hv-wrap{max-width:1200px;margin:0 auto;padding:0 22px}
.hv-skip{position:absolute;left:-9999px}
.hv-skip:focus{left:12px;top:12px;z-index:99;background:var(--ac);color:#0b0d10;padding:8px 12px;border-radius:3px}

/* header: brand block spans two rows, nav above chips */
.hv-head{
  position:sticky;top:0;z-index:50;
  background:rgba(11,13,16,.96);
  border-bottom:1px solid var(--line2);
  backdrop-filter:blur(10px);
}
.hv-headin{
  display:grid;
  grid-template-columns:212px minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:28px;
  padding-top:11px;
}
.hv-brand{
  grid-row:1 / span 2;grid-column:1;
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  padding-bottom:11px;
}
.hv-brand img{height:34px;width:auto}
.hv-brand span{
  font-family:var(--head);font-size:11.5px;letter-spacing:.19em;
  text-transform:uppercase;color:var(--mu2);
}
.hv-nav{
  grid-column:2;grid-row:1;
  display:flex;align-items:center;justify-content:flex-end;gap:24px;
  min-height:38px;
}
.hv-nav a.hv-link{
  font-family:var(--head);font-size:16px;letter-spacing:.07em;
  text-transform:uppercase;color:#c3cad3;padding:4px 0;
  border-bottom:2px solid transparent;white-space:nowrap;
}
.hv-nav a.hv-link:hover{color:#fff}
.hv-nav a.hv-link.on{color:#fff;border-bottom-color:var(--ac)}
.hv-nav a.hv-cta{
  background:var(--ac);color:#0b0d10;font-weight:700;
  font-size:13px;letter-spacing:.04em;padding:8px 14px;border-radius:3px;
  white-space:nowrap;
}
.hv-nav a.hv-cta:hover{background:#ff5573}
.hv-chips{
  grid-column:2;grid-row:2;
  display:flex;gap:8px;align-items:center;
  padding:7px 0 10px;overflow-x:auto;scrollbar-width:none;
}
.hv-chips::-webkit-scrollbar{display:none}
.hv-chips a{
  flex:0 0 auto;font-size:12.5px;color:var(--mu);
  background:var(--card2);border:1px solid #2a313b;border-radius:999px;
  padding:4px 11px;line-height:1.5;white-space:nowrap;
}
.hv-chips a:first-child{color:#ffd6dd;border-color:#5b2632;background:#1b1216}
.hv-chips a:hover{color:#fff;border-color:#3a424e}

/* hero */
.hv-hero{padding:38px 0 30px;border-bottom:1px solid var(--line2)}
.hv-hero-grid{display:grid;grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);gap:36px;align-items:center}
.hv-eyebrow{
  font-family:var(--head);font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ac);margin-bottom:12px;
}
.hv-hero h1{
  font-size:clamp(38px,4.7vw,61px);line-height:.98;letter-spacing:-.005em;
  margin-bottom:16px;
}
.hv-hero h1 em{font-style:normal;color:var(--ac)}
.hv-lead{font-size:16px;line-height:1.72;color:#b7bfc9;max-width:52ch}
.hv-lead + .hv-lead{font-size:14.5px;color:var(--mu);margin-top:8px}
.hv-stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;margin:20px 0 22px;border-top:1px solid var(--line2);
}
.hv-stat{padding:12px 12px 0 0}
.hv-stat + .hv-stat{border-left:1px solid var(--line2);padding-left:14px}
.hv-stat b{display:block;font-family:var(--head);font-size:27px;line-height:1;color:#fff}
.hv-stat span{display:block;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--mu2);margin-top:5px}
.hv-herocta{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--ac);color:#0b0d10;font-weight:700;font-size:14.5px;
  padding:11px 20px;border-radius:3px;
}
.hv-herocta:hover{background:#ff5573}
.hv-herocta small{font-weight:600;font-size:11px;opacity:.72;letter-spacing:.04em}

.hv-fig{margin:0}
.hv-shot{
  position:relative;border:1px solid #2b333d;border-radius:10px;overflow:hidden;
  background:#0e1116;box-shadow:0 18px 46px rgba(0,0,0,.5);
}
.hv-shot > img{width:100%;height:auto;aspect-ratio:1440/1000;object-fit:cover;object-position:top left}
.hv-shot-tag{
  position:absolute;top:10px;left:10px;display:flex;gap:6px;
}
.hv-shot-tag span{
  font-family:var(--head);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 7px;border-radius:2px;background:rgba(11,13,16,.82);color:#dfe4ea;
  border:1px solid rgba(255,255,255,.14);
}
.hv-shot-tag span.hot{background:var(--ac);border-color:var(--ac);color:#0b0d10}
.hv-shot-bar{
  position:absolute;left:0;right:0;bottom:0;
  display:grid;grid-template-columns:repeat(3,1fr);
  background:linear-gradient(180deg,rgba(11,13,16,0) 0%,rgba(11,13,16,.9) 45%,rgba(11,13,16,.97) 100%);
  padding:30px 12px 9px;
}
.hv-shot-bar div{font-size:11px;color:#c8cfd8;text-align:center;border-left:1px solid rgba(255,255,255,.13)}
.hv-shot-bar div:first-child{border-left:0}
.hv-shot-bar b{display:block;font-family:var(--head);font-size:18px;color:#fff;line-height:1.1}
.hv-shot-bar i{font-style:normal;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#98a2ad}
.hv-figcap{font-size:11.5px;color:var(--mu2);margin-top:8px;line-height:1.55}

/* partners */
.hv-partners{padding:24px 0 8px}
.hv-partners-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.hv-partners-h h2{font-size:15px;letter-spacing:.18em;text-transform:uppercase;color:#aeb6c0}
.hv-partners-h span{font-size:11.5px;color:var(--mu2)}
.hv-pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.hv-pgrid a{
  height:84px;display:flex;align-items:center;justify-content:center;
  background:var(--card2);border:1px solid var(--line);border-radius:7px;
  padding:10px 14px;
}
.hv-pgrid a:hover{border-color:#3b434f}
.hv-pgrid img{height:60px;width:auto;max-width:100%;object-fit:contain}

/* section shell */
.hv-sec{padding:38px 0 6px}
.hv-sechead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:6px}
.hv-sechead h2{
  font-size:31px;line-height:1.05;text-transform:uppercase;letter-spacing:.015em;
  padding-left:12px;border-left:3px solid var(--ac);
}
.hv-sechead p{font-size:12px;color:var(--mu2);margin:0;letter-spacing:.03em}
.hv-intro{color:var(--mu);font-size:14.5px;max-width:78ch;margin:10px 0 16px}

/* chapter rows */
.hv-rows{border-bottom:1px solid var(--line2)}
.hv-row{
  display:grid;grid-template-columns:46px minmax(0,1fr) 96px 84px 74px;
  gap:14px;align-items:center;padding:9px 0;border-top:1px solid var(--line2);
}
.hv-row:hover{background:#0f1217}
.hv-row img{width:44px;height:58px;object-fit:cover;border-radius:3px;border:1px solid #2a313a}
.hv-row h3{font-family:var(--body);font-size:15px;font-weight:600;line-height:1.35;margin:0 0 2px}
.hv-row h3 a:hover{color:#fff}
.hv-row .hv-tags{font-size:11.5px;color:var(--mu2)}
.hv-ch{
  justify-self:start;font-family:var(--head);font-size:12.5px;letter-spacing:.09em;
  text-transform:uppercase;color:#ffc2cd;border:1px solid #6a2b38;background:#1c1216;
  border-radius:2px;padding:3px 8px;white-space:nowrap;
}
.hv-time,.hv-view{font-size:12px;color:var(--mu);white-space:nowrap}
.hv-view b{font-family:var(--head);font-size:16px;color:#dfe4ea;font-weight:600}
.hv-view i{font-style:normal;display:block;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mu2)}

/* cover grid */
.hv-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:8px}
.hv-card{background:var(--card);border:1px solid var(--line);border-radius:7px;overflow:hidden}
.hv-poster{position:relative;aspect-ratio:3/4;background:#0e1116}
.hv-poster img{width:100%;height:100%;object-fit:cover}
.hv-poster .hv-chbadge{
  position:absolute;top:7px;left:7px;background:var(--ac);color:#0b0d10;
  font-family:var(--head);font-size:11.5px;letter-spacing:.06em;font-weight:700;
  padding:2px 6px;border-radius:2px;text-transform:uppercase;
}
.hv-poster .hv-score{
  position:absolute;right:7px;bottom:7px;background:rgba(11,13,16,.86);
  border:1px solid rgba(255,255,255,.14);color:#fff;font-size:11px;
  padding:1px 6px;border-radius:2px;
}
.hv-card-body{padding:9px 10px 12px}
.hv-card-body h3{
  font-family:var(--body);font-size:13.5px;font-weight:600;line-height:1.4;
  margin:0 0 4px;min-height:38px;
}
.hv-card-body p{font-size:11.5px;color:var(--mu2);margin:0}

/* rank */
.hv-rank{display:grid;grid-template-columns:1fr 1fr;gap:0 36px;margin-top:8px}
.hv-rank li{
  display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:12px;
  padding:9px 0;border-top:1px solid var(--line2);
}
.hv-rank .n{font-family:var(--head);font-size:29px;line-height:1;color:#323a45;font-weight:700}
.hv-rank li:nth-child(-n+3) .n{color:var(--ac)}
.hv-rank h3{font-family:var(--body);font-size:14px;font-weight:600;margin:0;line-height:1.35}
.hv-rank small{font-size:11px;color:var(--mu2);display:block}
.hv-rank .sc{font-family:var(--head);font-size:19px;color:#e7e9ec}
.hv-rank .sc i{font-style:normal;font-size:10px;color:var(--mu2);letter-spacing:.05em}

/* genres */
.hv-gen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:8px}
.hv-gen div{background:var(--card2);border:1px solid var(--line);border-radius:6px;padding:15px 16px 16px}
.hv-gen h3{font-size:19px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px}
.hv-gen p{font-size:13.5px;color:var(--mu);margin:0}
.hv-gen span{display:block;margin-top:8px;font-size:11.5px;color:var(--mu2)}

.hv-note{
  margin:30px 0 0;padding:16px 18px;background:var(--card2);
  border-left:3px solid var(--ac);font-size:13.5px;color:#b3bbc5;
}
.hv-note b{color:#e7e9ec}

/* generic content pages */
.hv-pagehead{padding:34px 0 6px;border-bottom:1px solid var(--line2)}
.hv-crumb{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mu2);margin-bottom:10px}
.hv-crumb a:hover{color:#fff}
.hv-pagehead h1{font-size:clamp(32px,4vw,48px);line-height:1.02;margin-bottom:10px}
.hv-pagehead p{color:var(--mu);max-width:76ch;font-size:14.5px}

.hv-body{padding:28px 0 12px}
.hv-body h2{font-size:26px;text-transform:uppercase;letter-spacing:.03em;margin:30px 0 10px;padding-left:11px;border-left:3px solid var(--ac)}
.hv-body h2:first-child{margin-top:0}
.hv-body h3{font-family:var(--body);font-size:15.5px;font-weight:700;margin:18px 0 6px;color:#fff}
.hv-body p{color:#b7bfc9;max-width:82ch}
.hv-body a{color:#ffc2cd;border-bottom:1px solid #6a2b38}
.hv-body a:hover{color:#fff}

/* works list */
.hv-work{
  display:grid;grid-template-columns:132px minmax(0,1fr);gap:18px;
  padding:18px 0;border-top:1px solid var(--line2);
}
.hv-work:first-of-type{border-top:0}
.hv-work > img{width:132px;height:176px;object-fit:cover;border-radius:5px;border:1px solid var(--line)}
.hv-work h2{
  border:0;padding:0;margin:0 0 4px;font-family:var(--head);font-size:26px;
  text-transform:none;letter-spacing:.01em;line-height:1.12;
}
.hv-work .hv-meta{display:flex;flex-wrap:wrap;gap:6px 0;margin:6px 0 8px}
.hv-work .hv-meta span{font-size:11.5px;color:var(--mu);padding:0 10px;border-left:1px solid #2b333d;line-height:1.5}
.hv-work .hv-meta span:first-child{padding-left:0;border-left:0}
.hv-work .hv-meta b{color:#dfe4ea;font-weight:600}
.hv-work p{font-size:13.5px;color:#aeb7c1;max-width:70ch;margin:0}
.hv-work .hv-kind{margin-top:7px;font-size:11.5px;color:var(--mu2)}

/* faq */
.hv-qa{border-top:1px solid var(--line2);padding:14px 0 4px;max-width:86ch}
.hv-qa h2{border:0;padding:0;margin:0 0 6px;font-family:var(--body);font-size:15.5px;font-weight:700;text-transform:none;letter-spacing:0;color:#fff}
.hv-qa p{font-size:13.5px;color:#aeb7c1}

/* prose list */
.hv-bul{margin:8px 0 14px;padding:0}
.hv-bul li{position:relative;padding-left:16px;font-size:13.5px;color:#aeb7c1;margin-bottom:5px}
.hv-bul li:before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;background:var(--ac)}

/* footer */
.hv-foot{margin-top:44px;background:#0d1013;border-top:1px solid var(--line2);padding:30px 0 0}
.hv-footgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.1fr;gap:26px;padding-bottom:24px}
.hv-footbrand{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.hv-footbrand img{height:26px;width:auto}
.hv-footbrand b{font-family:var(--head);font-size:20px;letter-spacing:.04em}
.hv-foot p{font-size:12px;color:var(--mu2);line-height:1.7;max-width:34ch}
.hv-foot h3{font-family:var(--head);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#8d97a2;margin-bottom:8px}
.hv-foot li{margin-bottom:5px}
.hv-foot li a{font-size:12.5px;color:#b7bfc9}
.hv-foot li a:hover{color:#fff}
.hv-legal{border-top:1px solid #1e242c;padding:12px 0 16px;display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.hv-legal p{font-size:11px;color:#6f7984;margin:0;max-width:78ch}
.hv-18{
  flex:0 0 auto;font-family:var(--head);font-size:12px;letter-spacing:.08em;
  color:#ffc2cd;border:1px solid #6a2b38;border-radius:2px;padding:2px 7px;
}

/* 404 */
.hv-404{padding:70px 0 40px;text-align:center}
.hv-404 .big{font-family:var(--head);font-size:clamp(90px,16vw,170px);line-height:.85;color:#1d242d;letter-spacing:.02em}
.hv-404 h1{font-size:clamp(30px,4vw,44px);margin:6px 0 10px}
.hv-404 p{color:var(--mu);max-width:56ch;margin:0 auto 18px;font-size:14px}
.hv-404 .hv-404links{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.hv-404 .hv-404links a{border:1px solid var(--line);background:var(--card2);padding:8px 14px;border-radius:3px;font-size:13px;color:#dfe4ea}
.hv-404 .hv-404links a:hover{border-color:var(--ac);color:#fff}

@media (max-width:1040px){
  .hv-hero-grid{grid-template-columns:1fr;gap:24px}
  .hv-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hv-gen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hv-rank{grid-template-columns:1fr}
  .hv-footgrid{grid-template-columns:1fr 1fr}
}

@media (max-width:760px){
  .hv-headin{grid-template-columns:1fr;grid-template-rows:auto auto auto;column-gap:0}
  .hv-brand{grid-row:1;grid-column:1;flex-direction:row;align-items:center;gap:10px;padding:2px 0 6px}
  .hv-brand img{height:27px}
  .hv-brand span{font-size:10px;letter-spacing:.14em}
  .hv-nav{grid-row:2;grid-column:1;justify-content:flex-start;gap:8px 15px;flex-wrap:wrap;overflow:visible;padding-bottom:2px}
  .hv-nav::-webkit-scrollbar{display:none}
  .hv-nav a.hv-link{font-size:14.5px}
  .hv-nav a.hv-cta{order:9;margin-left:0}
  .hv-chips{grid-row:3;grid-column:1;padding:7px 0 9px;flex-wrap:wrap;overflow:visible}
  .hv-sechead{flex-direction:column;align-items:flex-start;gap:2px}
  .hv-sechead h2{font-size:26px}
  .hv-row{grid-template-columns:42px minmax(0,1fr) auto;gap:10px}
  .hv-row img{width:40px;height:53px}
  .hv-time{grid-column:2;font-size:11px}
  .hv-view{grid-column:3;grid-row:1 / span 2;text-align:right}
  .hv-ch{grid-column:3;grid-row:2;justify-self:end}
  .hv-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .hv-gen{grid-template-columns:1fr}
  .hv-pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hv-pgrid a{height:78px;padding:8px 10px}
  .hv-pgrid img{height:46px}
  .hv-work{grid-template-columns:96px minmax(0,1fr);gap:12px}
  .hv-work > img{width:96px;height:128px}
  .hv-work h2{font-size:22px}
  .hv-footgrid{grid-template-columns:1fr 1fr;gap:20px}
  .hv-legal{flex-direction:column}
}

@media (max-width:430px){
  .hv-wrap{padding:0 16px}
  .hv-hero{padding-top:26px}
  .hv-stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:10px}
  .hv-stat:nth-child(3){border-left:0;padding-left:0}
  .hv-pgrid{grid-template-columns:1fr 1fr}
  .hv-pgrid img{height:40px}
  .hv-pgrid a{height:70px}
  .hv-work{grid-template-columns:84px minmax(0,1fr)}
  .hv-work > img{width:84px;height:112px}
  .hv-footgrid{grid-template-columns:1fr}
}