/* HUNTER×HUNTER encyclopedia home — compact Japanese encyclopedia layout. */

.hh-page--home_hub {
  --px-bg: #f2f3f5;
  --px-panel: #fff;
  --px-panel-soft: #f7f8f9;
  --px-text: #333;
  --px-muted: #78818a;
  --px-line: #dfe3e6;
  --px-line-strong: #cbd1d6;
  --px-blue: #1976aa;
  --px-blue-dark: #355a7c;
  --px-blue-soft: #eaf4f9;
  --px-cyan: #13a6d8;
  --px-green: #78b84b;
  --px-orange: #f3a23a;
  --px-red: #d85b55;
  min-width: 20rem;
  background: var(--px-bg);
  color: var(--px-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-size: 14px;
  line-height: 1.65;
}

.hh-page--home_hub::after {
  display: none;
}

.hh-page--home_hub a {
  color: var(--px-blue);
  text-decoration: none;
}

.hh-page--home_hub .hh-site-header {
  position: sticky;
  z-index: 60;
  top: 0;
  min-height: 3.65rem;
  border: 0;
  background: var(--px-blue-dark);
  box-shadow: 0 1px 4px rgb(0 0 0 / 18%);
}

.hh-page--home_hub .hh-header-inner {
  width: min(1060px, calc(100% - 2rem));
  min-height: 3.65rem;
  gap: .8rem;
}

.hh-page--home_hub .hh-brand {
  min-width: 12rem;
  color: #fff;
}

.hh-page--home_hub .hh-brand span {
  color: #9ddff5;
  font-size: .55rem;
  letter-spacing: .14em;
}

.hh-page--home_hub .hh-brand strong {
  color: #fff;
  font-family: inherit;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .015em;
}

.hh-page--home_hub .hh-brand small {
  display: none;
}

.hh-page--home_hub .hh-primary-nav {
  margin-left: auto;
}

.hh-page--home_hub .hh-primary-nav summary {
  min-width: auto;
  padding-inline: .65rem;
  border: 0;
  color: #dce8f1;
  font-size: .7rem;
}

.hh-page--home_hub .hh-primary-nav details[data-current] > summary,
.hh-page--home_hub .hh-primary-nav summary:hover {
  background: rgb(255 255 255 / 10%);
  color: #fff;
}

.hh-page--home_hub .hh-mega-panel {
  border-color: #cad4db;
  background: #fff;
  box-shadow: 0 .75rem 2rem rgb(0 0 0 / 18%);
  color: var(--px-text);
}

.hh-page--home_hub .hh-mega-panel a {
  color: var(--px-blue);
}

.hh-page--home_hub .hh-theme-toggle {
  display: none;
}

.hh-page--home_hub .hh-search-open {
  min-height: 2.2rem;
  border: 1px solid rgb(255 255 255 / 38%);
  border-radius: 999px;
  background: rgb(255 255 255 / 9%);
  color: #fff;
}

.hh-page--home_hub .hh-search-open span {
  color: #fff;
}

.hh-page--home_hub .hh-layout-shell {
  width: min(1060px, calc(100% - 2rem));
}

.hh-page--home_hub .hh-breadcrumbs {
  padding: .65rem 0 .45rem;
  color: var(--px-muted);
  font-size: .65rem;
}

.hh-page--home_hub .hh-breadcrumbs a {
  color: var(--px-muted);
}

.hh-page--home_hub .hh-article {
  padding-bottom: 4rem;
}

.hh-page--home_hub .hh-article-hero {
  min-height: 0;
  align-items: center;
  padding: 1.15rem 1.3rem;
  border: 1px solid var(--px-line);
  border-radius: .2rem;
  background: var(--px-panel);
  box-shadow: none;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
}

.hh-page--home_hub .hh-article-hero::before,
.hh-page--home_hub .hh-article-hero::after {
  display: none;
}

.hh-page--home_hub .hh-eyebrow {
  margin: 0 0 .15rem;
  color: var(--px-blue);
  font-family: inherit;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .08em;
}

.hh-page--home_hub .hh-eyebrow span {
  color: var(--px-blue);
}

.hh-page--home_hub .hh-article-hero h1 {
  max-width: none;
  margin: 0;
  color: var(--px-text);
  font-family: inherit;
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.3;
}

.hh-page--home_hub .hh-title-nowrap {
  white-space: nowrap;
}

.hh-page--home_hub .hh-deck {
  max-width: 75ch;
  margin: .28rem 0 0;
  color: #59636b;
  font-size: .72rem;
  line-height: 1.65;
}

.hh-page--home_hub .hh-edition {
  min-width: 9rem;
  padding: .25rem 0 .25rem 1rem;
  border-color: var(--px-line);
}

.hh-page--home_hub .hh-edition strong {
  color: var(--px-blue-dark);
  font-family: inherit;
  font-size: .8rem;
  font-weight: 700;
}

.hh-page--home_hub .hh-edition small {
  color: var(--px-muted);
  font-size: .56rem;
}

.hh-page--home_hub .hh-taxonomy {
  min-height: 2.35rem;
  margin: .45rem 0 0;
  padding: .25rem .7rem;
  overflow-x: auto;
  border: 1px solid var(--px-line);
  background: #e9edef;
  white-space: nowrap;
}

.hh-page--home_hub .hh-taxonomy > span {
  color: var(--px-muted);
  font-size: .6rem;
}

.hh-page--home_hub .hh-taxonomy a {
  color: var(--px-blue);
  font-size: .64rem;
}

.hh-page--home_hub .hh-page-tools,
.hh-page--home_hub .hh-article-grid > .hh-toc,
.hh-page--home_hub .hh-article-grid > .hh-infobox {
  display: none;
}

.hh-page--home_hub .hh-article-grid {
  display: block;
  padding-top: 1rem;
}

.hh-page--home_hub .hh-article-content {
  min-width: 0;
}

.hh-page--home_hub .hh-px-home {
  min-width: 0;
}

.hh-page--home_hub .hh-px-search {
  display: grid;
  align-items: center;
  padding: 1rem;
  border: 1px solid var(--px-line);
  border-top: 3px solid var(--px-blue-dark);
  background: var(--px-panel);
  grid-template-columns: minmax(12rem, .58fr) minmax(22rem, 1.42fr);
  gap: 1rem 1.5rem;
}

.hh-page--home_hub .hh-px-search p {
  margin: 0;
  color: var(--px-muted);
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .08em;
}

.hh-page--home_hub .hh-px-search h2 {
  margin: .05rem 0 0;
  color: var(--px-text);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
}

.hh-page--home_hub .hh-px-search form {
  display: grid;
  min-height: 2.85rem;
  overflow: hidden;
  border: 1px solid #aeb8c0;
  border-radius: .18rem;
  background: #fff;
  grid-template-columns: minmax(0, 1fr) auto;
}

.hh-page--home_hub .hh-px-search form:focus-within {
  border-color: var(--px-blue);
  box-shadow: 0 0 0 2px rgb(25 118 170 / 14%);
}

.hh-page--home_hub .hh-px-search input {
  min-width: 0;
  padding: .7rem .8rem;
  border: 0;
  outline: 0;
  background: #fff;
  color: var(--px-text);
  font-size: .76rem;
}

.hh-page--home_hub .hh-px-search input::placeholder {
  color: #98a0a7;
}

.hh-page--home_hub .hh-px-search button {
  min-width: 5.25rem;
  border: 0;
  border-left: 1px solid #aeb8c0;
  background: var(--px-blue);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
}

.hh-page--home_hub .hh-px-trends {
  display: flex;
  min-height: 2.35rem;
  align-items: center;
  gap: .15rem;
  padding: .28rem .55rem;
  overflow-x: auto;
  border: 1px solid var(--px-line);
  border-top: 0;
  background: var(--px-panel-soft);
  white-space: nowrap;
}

.hh-page--home_hub .hh-px-trends strong {
  flex: none;
  padding: .14rem .38rem;
  border-radius: .12rem;
  background: var(--px-orange);
  color: #fff;
  font-size: .55rem;
}

.hh-page--home_hub .hh-px-trends a {
  flex: none;
  padding: .2rem .45rem;
  color: var(--px-blue);
  font-size: .61rem;
}

.hh-page--home_hub .hh-px-layout {
  display: grid;
  align-items: start;
  margin-top: 1.2rem;
  grid-template-columns: minmax(0, 1fr) 17rem;
  gap: 1rem;
}

.hh-page--home_hub .hh-px-main,
.hh-page--home_hub .hh-px-sidebar {
  min-width: 0;
}

.hh-page--home_hub .hh-px-tabs {
  display: grid;
  min-height: 2.7rem;
  border-bottom: 3px solid var(--px-orange);
  background: var(--px-panel);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hh-page--home_hub .hh-px-tabs a {
  display: grid;
  min-height: 2.65rem;
  place-items: center;
  border-right: 1px solid var(--px-line);
  background: #90cb5a;
  color: #fff;
  font-size: .67rem;
  font-weight: 700;
}

.hh-page--home_hub .hh-px-tabs a:nth-child(2) {
  background: #67b9dc;
}

.hh-page--home_hub .hh-px-tabs a:nth-child(3) {
  background: #62a4c3;
}

.hh-page--home_hub .hh-px-tabs a:nth-child(4) {
  border-right: 0;
  background: #758ba0;
}

.hh-page--home_hub .hh-px-tabs a[aria-current="page"] {
  background: var(--px-orange);
}

.hh-page--home_hub .hh-feed {
  border-inline: 1px solid var(--px-line);
  background: var(--px-panel);
}

.hh-page--home_hub .hh-feed-card {
  display: grid;
  min-height: 8.75rem;
  padding: .8rem;
  border-bottom: 1px solid var(--px-line);
  background: var(--px-panel);
  grid-template-columns: 7.25rem minmax(0, 1fr);
  gap: .85rem;
}

.hh-page--home_hub .hh-feed-card__media {
  display: block;
  height: 7.05rem;
  overflow: hidden;
  border: 1px solid var(--px-line);
  background: #f4f5f6;
}

.hh-page--home_hub .hh-feed-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.hh-page--home_hub .hh-feed-card:nth-child(3) .hh-feed-card__media img,
.hh-page--home_hub .hh-feed-card:nth-child(8) .hh-feed-card__media img {
  object-fit: contain;
}

.hh-page--home_hub .hh-feed-card__body {
  min-width: 0;
}

.hh-page--home_hub .hh-feed-card__category {
  display: inline-block;
  margin: 0 0 .1rem;
  padding: .03rem .28rem;
  background: #929ba2;
  color: #fff;
  font-size: .52rem;
  line-height: 1.45;
}

.hh-page--home_hub .hh-feed-card h2 {
  margin: .08rem 0 .25rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

.hh-page--home_hub .hh-feed-card h2 a {
  color: var(--px-blue);
}

.hh-page--home_hub .hh-feed-card__body > p:not(.hh-feed-card__category) {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #555e65;
  font-size: .66rem;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.hh-page--home_hub .hh-feed-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem .45rem;
  margin: .35rem 0 0;
  padding: 0;
  color: var(--px-blue);
  font-size: .56rem;
  list-style: none;
}

.hh-page--home_hub .hh-feed-card__tags li::before {
  margin-right: .18rem;
  color: #a7adb1;
  content: "#";
}

.hh-page--home_hub .hh-feed-more {
  display: grid;
  min-height: 2.75rem;
  place-items: center;
  border: 1px solid var(--px-line-strong);
  border-top: 0;
  background: linear-gradient(#fff, #edf0f2);
  color: #5c666e;
  font-size: .67rem;
  font-weight: 700;
}

.hh-page--home_hub .hh-px-sidebar {
  display: grid;
  gap: .8rem;
}

.hh-page--home_hub .hh-side-panel {
  overflow: hidden;
  border: 1px solid var(--px-line);
  background: var(--px-panel);
}

.hh-page--home_hub .hh-side-panel h2 {
  margin: 0;
  padding: .42rem .65rem;
  background: #5ea7c8;
  color: #fff;
  font-family: inherit;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.5;
}

.hh-page--home_hub .hh-side-categories h2 {
  background: #8ab64b;
}

.hh-page--home_hub .hh-side-media h2 {
  background: #697f94;
}

.hh-page--home_hub .hh-side-categories ul,
.hh-page--home_hub .hh-side-media ul,
.hh-page--home_hub .hh-side-updates ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hh-page--home_hub .hh-side-categories li,
.hh-page--home_hub .hh-side-media li,
.hh-page--home_hub .hh-side-updates li {
  border-bottom: 1px solid var(--px-line);
}

.hh-page--home_hub .hh-side-categories li:last-child,
.hh-page--home_hub .hh-side-media li:last-child,
.hh-page--home_hub .hh-side-updates li:last-child {
  border-bottom: 0;
}

.hh-page--home_hub .hh-side-categories a {
  display: flex;
  min-height: 2.25rem;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .38rem .65rem;
  color: var(--px-blue);
  font-size: .64rem;
}

.hh-page--home_hub .hh-side-categories a strong {
  color: var(--px-muted);
  font-family: var(--hh-font-mono);
  font-size: .55rem;
  font-weight: 500;
}

.hh-page--home_hub .hh-side-updates li {
  display: grid;
  min-height: 2.5rem;
  align-items: center;
  padding: .35rem .6rem;
  grid-template-columns: 2.8rem minmax(0, 1fr);
  gap: .35rem;
}

.hh-page--home_hub .hh-side-updates time {
  color: #939ba1;
  font-family: var(--hh-font-mono);
  font-size: .52rem;
}

.hh-page--home_hub .hh-side-updates li a {
  overflow: hidden;
  color: var(--px-blue);
  font-size: .61rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hh-page--home_hub .hh-side-more {
  display: block;
  padding: .4rem .65rem;
  border-top: 1px solid var(--px-line);
  background: var(--px-panel-soft);
  color: var(--px-blue);
  font-size: .56rem;
  text-align: right;
}

.hh-page--home_hub .hh-random {
  margin: 0;
  padding: 0;
}

.hh-page--home_hub .hh-random > p:not(.hh-visually-hidden) {
  margin: .65rem .7rem 0;
  color: var(--px-muted);
  font-size: .55rem;
}

.hh-page--home_hub .hh-random > a {
  display: grid;
  padding: .25rem .7rem .65rem;
  gap: .2rem;
}

.hh-page--home_hub .hh-random > a strong {
  color: var(--px-blue);
  font-size: .7rem;
}

.hh-page--home_hub .hh-random > a span {
  display: -webkit-box;
  overflow: hidden;
  color: #697178;
  font-size: .56rem;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.hh-page--home_hub .hh-random button {
  width: calc(100% - 1.4rem);
  min-height: 2rem;
  margin: 0 .7rem .7rem;
  border: 1px solid var(--px-line-strong);
  border-radius: .15rem;
  background: linear-gradient(#fff, #eef0f2);
  color: #5d666d;
  font-size: .58rem;
}

/* The former media card grid caused the reported overflow. This is a plain list. */
.hh-page--home_hub .hh-side-media ul {
  display: block;
}

.hh-page--home_hub .hh-side-media li {
  display: block;
  width: 100%;
}

.hh-page--home_hub .hh-side-media a {
  display: block;
  width: 100%;
  padding: .48rem .65rem;
  overflow-wrap: anywhere;
  color: var(--px-blue);
  font-size: .61rem;
  line-height: 1.45;
}

.hh-page--home_hub .hh-site-footer {
  border-top: 4px solid var(--px-cyan);
  background: var(--px-blue-dark);
  color: #d9e5ee;
}

.hh-page--home_hub .hh-site-footer a,
.hh-page--home_hub .hh-footer-brand strong {
  color: #fff;
}

.hh-page--home_hub .hh-site-footer p {
  color: #c8d7e2;
}

@media (hover: hover) and (pointer: fine) {
  .hh-page--home_hub .hh-feed-card:hover,
  .hh-page--home_hub .hh-side-panel li:hover,
  .hh-page--home_hub .hh-feed-more:hover {
    background: #f7fbfd;
  }

  .hh-page--home_hub .hh-feed-card h2 a:hover,
  .hh-page--home_hub .hh-side-panel a:hover {
    text-decoration: underline;
  }

  .hh-page--home_hub .hh-px-search button:hover {
    background: #0f6897;
  }
}

@media (max-width: 58rem) {
  .hh-page--home_hub .hh-site-header {
    position: static;
  }

  .hh-page--home_hub .hh-primary-nav {
    display: none;
  }

  .hh-page--home_hub .hh-px-search {
    grid-template-columns: 1fr;
  }

  .hh-page--home_hub .hh-px-layout {
    grid-template-columns: minmax(0, 1fr) 14.5rem;
  }
}

@media (max-width: 43rem) {
  .hh-page--home_hub .hh-header-inner,
  .hh-page--home_hub .hh-layout-shell {
    width: calc(100% - 1rem);
    max-width: 1060px;
  }

  .hh-page--home_hub .hh-brand {
    width: auto;
    min-width: 0;
  }

  .hh-page--home_hub .hh-article-hero {
    grid-template-columns: 1fr;
  }

  .hh-page--home_hub .hh-article-hero h1 {
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .hh-page--home_hub .hh-article,
  .hh-page--home_hub .hh-article-grid,
  .hh-page--home_hub .hh-article-content,
  .hh-page--home_hub .hh-px-home,
  .hh-page--home_hub .hh-px-layout,
  .hh-page--home_hub .hh-px-main,
  .hh-page--home_hub .hh-px-sidebar {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .hh-page--home_hub .hh-edition {
    display: none;
  }

  .hh-page--home_hub .hh-taxonomy {
    margin-bottom: 0;
  }

  .hh-page--home_hub .hh-px-layout {
    grid-template-columns: 1fr;
  }

  .hh-page--home_hub .hh-px-sidebar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hh-page--home_hub .hh-side-categories,
  .hh-page--home_hub .hh-side-media {
    grid-row: span 2;
  }
}

@media (max-width: 34rem) {
  .hh-page--home_hub .hh-brand span {
    display: none;
  }

  .hh-page--home_hub .hh-search-open__label {
    display: none;
  }

  .hh-page--home_hub .hh-article-hero {
    padding: .9rem;
  }

  .hh-page--home_hub .hh-deck {
    font-size: .66rem;
  }

  .hh-page--home_hub .hh-px-search {
    padding: .75rem;
  }

  .hh-page--home_hub .hh-px-search form {
    grid-template-columns: minmax(0, 1fr) 4rem;
  }

  .hh-page--home_hub .hh-px-search button {
    min-width: 0;
  }

  .hh-page--home_hub .hh-px-tabs a {
    padding-inline: .25rem;
    font-size: .58rem;
  }

  .hh-page--home_hub .hh-feed-card {
    min-height: 7.2rem;
    padding: .65rem;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: .65rem;
  }

  .hh-page--home_hub .hh-feed-card__media {
    height: 5.5rem;
  }

  .hh-page--home_hub .hh-feed-card h2 {
    font-size: .82rem;
  }

  .hh-page--home_hub .hh-feed-card__body > p:not(.hh-feed-card__category) {
    font-size: .59rem;
    -webkit-line-clamp: 2;
  }

  .hh-page--home_hub .hh-feed-card__tags {
    display: none;
  }

  .hh-page--home_hub .hh-px-sidebar {
    grid-template-columns: 1fr;
  }

  .hh-page--home_hub .hh-side-categories,
  .hh-page--home_hub .hh-side-media {
    grid-row: auto;
  }
}