/*
Theme Name: HIPHOPCs Single Template Prototype
Theme URI: https://hiphopnewscs.jp/
Author: HIPHOPCs
Description: Prototype theme for gradually replacing the Newspaper single article template.
Version: 0.9.12
Text Domain: hiphopcs-single-prototype
*/

:root {
  --hhc-text: #161616;
  --hhc-soft-text: #3f3f3f;
  --hhc-muted: #737373;
  --hhc-border: #e4e1dc;
  --hhc-strong-border: #1f1f1f;
  --hhc-accent: #007f73;
  --hhc-warm: #b9472d;
  --hhc-surface: #ffffff;
  --hhc-page: #f5f4f1;
  --hhc-tint: #ece8df;
  --hhc-max: 1180px;
}

* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--hhc-page);
  color: var(--hhc-text);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.72;
}

a {
  color: var(--hhc-text);
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--hhc-accent);
}

img,
video {
  max-width: 100%;
  height: auto;
}

.hhc-site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--hhc-border);
  backdrop-filter: blur(10px);
}

.hhc-site-header__inner,
.hhc-site-footer__inner,
.hhc-single,
.hhc-home,
.hhc-archive,
.hhc-page-wrap {
  width: min(var(--hhc-max), calc(100% - 40px));
  margin: 0 auto;
}

.hhc-site-header__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(180px, 260px);
  gap: 24px;
  align-items: center;
  min-height: 68px;
}

.hhc-site-title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
}

.hhc-site-title a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.hhc-site-title img {
  display: block;
  width: auto;
  max-height: 42px;
}

.hhc-nav {
  min-width: 0;
  max-width: 100%;
}

.hhc-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hhc-nav__list li {
  min-width: 0;
}

.hhc-nav__list a {
  display: block;
  color: var(--hhc-soft-text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}

.hhc-nav__list a:hover {
  color: var(--hhc-accent);
}

.hhc-header-search .hhc-search-form {
  margin: 0;
}

.hhc-search-form {
  display: flex;
  gap: 8px;
  max-width: 520px;
  margin: 0 0 24px;
}

.hhc-search-form input {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--hhc-border);
  background: var(--hhc-surface);
  color: var(--hhc-text);
  font: inherit;
  font-size: 14px;
}

.hhc-search-form button {
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--hhc-text);
  background: var(--hhc-text);
  color: #ffffff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
}

.hhc-home,
.hhc-archive,
.hhc-page-wrap {
  padding: 32px 0 64px;
}

.hhc-home-lead {
  padding: 8px 0 34px;
  border-bottom: 1px solid var(--hhc-border);
}

.hhc-home-lead__heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 420px);
  gap: 24px;
  align-items: end;
  margin-bottom: 22px;
}

.hhc-home-title {
  margin: 0;
  font-size: 42px;
  line-height: 1.08;
  letter-spacing: 0;
}

.hhc-home-lead__heading p,
.hhc-archive-description,
.hhc-card__excerpt {
  color: var(--hhc-muted);
  font-size: 14px;
  line-height: 1.75;
}

.hhc-home-lead__heading p {
  margin: 0;
}

.hhc-home-lead__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.85fr);
  gap: 28px;
  align-items: start;
}

.hhc-home-lead__grid--solo {
  grid-template-columns: minmax(0, 820px);
}

.hhc-home-lead__rail,
.hhc-related-list,
.hhc-sidebar-list,
.hhc-popular-list {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hhc-home-section {
  padding: 34px 0 0;
}

.hhc-page {
  max-width: 920px;
}

.hhc-page--replacement,
.hhc-page--legacy-fallback {
  max-width: none;
}

.hhc-page-section {
  padding: 34px 0 0;
}

.hhc-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.hhc-contact-grid section {
  min-width: 0;
  padding-top: 18px;
  border-top: 1px solid var(--hhc-border);
}

.hhc-contact-grid p {
  margin: 0 0 12px;
  color: var(--hhc-muted);
  font-size: 14px;
  line-height: 1.75;
}

.hhc-contact-grid a {
  color: var(--hhc-text);
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.hhc-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.hhc-section-title {
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hhc-strong-border);
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hhc-section-heading .hhc-section-title {
  margin: 0;
}

.hhc-home-grid,
.hhc-archive-grid,
.hhc-topic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.hhc-card {
  min-width: 0;
}

.hhc-card__thumb,
.hhc-card__thumb-placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--hhc-tint);
  text-decoration: none;
}

.hhc-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 180ms ease;
}

.hhc-card:hover .hhc-card__thumb img {
  transform: scale(1.025);
}

.hhc-card__body {
  min-width: 0;
  padding-top: 11px;
}

.hhc-card__kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 7px;
}

.hhc-card__kicker a,
.hhc-categories a {
  color: var(--hhc-accent);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}

.hhc-card__title {
  margin: 0;
  font-size: 17px;
  line-height: 1.34;
  letter-spacing: 0;
}

.hhc-card__title a {
  text-decoration: none;
}

.hhc-card__excerpt {
  margin-top: 10px;
}

.hhc-card__excerpt p {
  margin: 0;
}

.hhc-card__date,
.hhc-card-date {
  display: block;
  margin-top: 7px;
  color: var(--hhc-muted);
  font-size: 12px;
  line-height: 1.3;
}

.hhc-card--lead .hhc-card__thumb,
.hhc-card--feature .hhc-card__thumb {
  aspect-ratio: 16 / 9;
}

.hhc-card--lead .hhc-card__title,
.hhc-card--feature .hhc-card__title {
  font-size: 28px;
  line-height: 1.18;
}

.hhc-card--compact {
  display: grid;
  grid-template-columns: minmax(116px, 42%) minmax(0, 1fr);
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hhc-border);
}

.hhc-card--compact .hhc-card__body {
  padding-top: 0;
}

.hhc-card--compact .hhc-card__title {
  font-size: 15px;
}

.hhc-topic-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.hhc-topic,
.hhc-topic-grid a,
.hhc-topic-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--hhc-border);
  color: var(--hhc-text);
  text-decoration: none;
}

.hhc-topic {
  min-height: 68px;
  padding: 12px 0;
}

.hhc-topic-grid a {
  min-height: 68px;
  padding: 12px 0;
}

.hhc-topic span,
.hhc-topic-grid span,
.hhc-topic-list span {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
}

.hhc-topic small,
.hhc-topic-grid small,
.hhc-topic-list small {
  color: var(--hhc-muted);
  font-size: 12px;
}

.hhc-slot {
  display: grid;
  gap: 14px;
  margin: 28px 0;
  padding: 18px 0;
  border-top: 1px solid var(--hhc-border);
  border-bottom: 1px solid var(--hhc-border);
}

.hhc-slot--wide {
  margin: 32px 0 0;
}

.hhc-sidebar .hhc-slot {
  margin-top: 0;
}

.hhc-widget {
  min-width: 0;
}

.hhc-widget > :first-child {
  margin-top: 0;
}

.hhc-widget > :last-child {
  margin-bottom: 0;
}

.hhc-archive-header {
  max-width: 820px;
  margin: 0 0 28px;
}

.hhc-archive-title {
  margin: 0;
  font-size: 38px;
  line-height: 1.16;
  letter-spacing: 0;
}

.hhc-archive-description {
  margin-top: 12px;
}

.hhc-archive-feature {
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--hhc-border);
}

.hhc-pagination {
  margin-top: 34px;
}

.hhc-single {
  display: grid;
  grid-template-columns: minmax(0, 740px) minmax(260px, 320px);
  gap: 58px;
  padding: 30px 0 68px;
}

.hhc-article,
.hhc-sidebar {
  min-width: 0;
}

.hhc-breadcrumbs {
  margin: 0 0 20px;
  color: var(--hhc-muted);
  font-size: 11px;
  line-height: 1.6;
}

.hhc-breadcrumbs a {
  color: var(--hhc-muted);
  text-decoration: none;
}

.hhc-categories,
.hhc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.hhc-title {
  margin: 0 0 15px;
  font-size: 42px;
  line-height: 1.14;
  letter-spacing: 0;
}

.hhc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0 0 22px;
  color: var(--hhc-muted);
  font-size: 13px;
  line-height: 1.4;
}

.hhc-meta a,
.hhc-card__date a,
.hhc-media-row__time a {
  color: inherit;
  text-decoration: none;
}

.hhc-meta a:hover,
.hhc-card__date a:hover,
.hhc-media-row__time a:hover {
  text-decoration: underline;
}

.hhc-share {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 24px;
}

.hhc-share a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--hhc-border);
  background: var(--hhc-surface);
  color: var(--hhc-text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.hhc-share a:hover {
  border-color: var(--hhc-accent);
  color: var(--hhc-accent);
}

.hhc-featured-image {
  margin: 0 0 30px;
}

.hhc-featured-image img {
  display: block;
  width: 100%;
  height: auto;
}

.hhc-content {
  color: var(--hhc-text);
  font-size: 17px;
  line-height: 1.9;
}

.hhc-content > .yoast-breadcrumbs:first-child {
  display: none;
}

.hhc-content p,
.hhc-content ul,
.hhc-content ol,
.hhc-content blockquote,
.hhc-content figure {
  margin-top: 0;
  margin-bottom: 1.45em;
}

.hhc-content h2,
.hhc-content h3 {
  line-height: 1.34;
  letter-spacing: 0;
}

.hhc-content h2 {
  margin: 2.15em 0 0.75em;
  font-size: 26px;
}

.hhc-content h3 {
  margin: 1.85em 0 0.7em;
  font-size: 21px;
}

.hhc-content figcaption {
  margin-top: 8px;
  color: var(--hhc-muted);
  font-size: 12px;
  line-height: 1.55;
}

.hhc-content table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.55;
}

.hhc-content th,
.hhc-content td {
  padding: 10px 12px;
  border: 1px solid var(--hhc-border);
  vertical-align: top;
}

.hhc-content blockquote {
  padding-left: 18px;
  border-left: 3px solid var(--hhc-warm);
  color: var(--hhc-soft-text);
}

.hhc-content iframe,
.hhc-content embed,
.hhc-content object {
  display: block;
  max-width: 100%;
}

.hhc-content iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

.hiphopcs-ad-slot {
  clear: both;
  max-width: 100%;
  overflow: hidden;
}

.hiphopcs-ad-slot ins {
  max-width: 100%;
}

.hiphopcs-ad-label {
  font-size: 11px;
  line-height: 1.4;
  color: var(--hhc-muted);
  letter-spacing: 0;
}

.hhc-content .wp-embedded-content {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.hhc-content iframe.wp-embedded-content[style*="visibility: hidden"] {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.hhc-tags {
  margin: 34px 0;
}

.hhc-tags a {
  display: inline-flex;
  padding: 5px 9px;
  border: 1px solid var(--hhc-border);
  font-size: 12px;
  line-height: 1;
  text-decoration: none;
}

.hhc-post-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 36px 0;
  padding-top: 24px;
  border-top: 1px solid var(--hhc-border);
}

.hhc-post-nav a {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  text-decoration: none;
}

.hhc-related + .hhc-related {
  margin-top: 28px;
}

.hhc-tag-hub .hhc-related {
  margin: 28px 0;
}

.hhc-related-card,
.hhc-sidebar-card,
.hhc-popular-card {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 12px;
}

.hhc-related-card img,
.hhc-sidebar-card img,
.hhc-popular-card img {
  display: block;
  width: 84px;
  height: 84px;
  object-fit: cover;
  background: var(--hhc-tint);
}

.hhc-related-card a,
.hhc-sidebar-card a,
.hhc-popular-card a {
  font-size: 14px;
  line-height: 1.35;
  font-weight: 700;
  text-decoration: none;
}

.hhc-popular-list {
  counter-reset: hhc-popular;
}

.hhc-popular-card {
  position: relative;
}

.hhc-popular-card::before {
  counter-increment: hhc-popular;
  content: counter(hhc-popular);
  position: absolute;
  left: -6px;
  top: -6px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  background: var(--hhc-text);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.hhc-sidebar {
  position: sticky;
  top: 92px;
  align-self: start;
}

.hhc-sidebar-block {
  margin-top: 34px;
}

.hhc-topic-list {
  display: grid;
  gap: 0;
}

.hhc-topic-list a {
  min-height: 44px;
  padding: 10px 0;
}

.hhc-article input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.hhc-article textarea,
.hhc-article select {
  max-width: 100%;
}

.hhc-article textarea {
  width: 100%;
}

.hhc-article .form-submit input[type="submit"] {
  max-width: 100%;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--hhc-text);
  background: var(--hhc-text);
  color: #ffffff;
  font: inherit;
}

.hhc-site-footer {
  background: var(--hhc-text);
  color: #ffffff;
}

.hhc-site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 28px;
  align-items: start;
  padding: 34px 0;
}

.hhc-footer-widgets {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  min-width: 0;
  max-width: 100%;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.hhc-footer-widget-column {
  min-width: 0;
  max-width: 100%;
}

.hhc-site-footer__inner > *,
.hhc-footer-nav {
  min-width: 0;
  max-width: 100%;
}

.hhc-footer-nav .hhc-nav__list {
  max-width: 100%;
}

.hhc-site-footer__brand {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
}

.hhc-site-footer small {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
}

.hhc-site-footer a,
.hhc-site-footer .hhc-nav__list a {
  color: rgba(255, 255, 255, 0.82);
}

.hhc-site-footer .hhc-section-title {
  border-bottom-color: rgba(255, 255, 255, 0.32);
  color: #ffffff;
}

.hhc-footer-nav .hhc-nav__list {
  justify-content: flex-end;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 980px) {
  .hhc-site-header__inner {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px 0;
  }

  .hhc-header-search {
    display: none;
  }

  .hhc-nav {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .hhc-nav__list {
    flex-wrap: nowrap;
    width: max-content;
    min-width: 100%;
    gap: 16px;
    padding-bottom: 3px;
  }

  .hhc-nav__list li {
    flex: 0 0 auto;
  }

  .hhc-home-lead__heading,
  .hhc-home-lead__grid,
  .hhc-single {
    grid-template-columns: 1fr;
  }

  .hhc-home-grid,
  .hhc-archive-grid,
  .hhc-topic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hhc-sidebar {
    position: static;
  }
}

@media (max-width: 640px) {
  .hhc-site-header__inner,
  .hhc-site-footer__inner,
  .hhc-single,
  .hhc-home,
  .hhc-archive {
    width: min(100% - 32px, 720px);
  }

  .hhc-home,
  .hhc-archive,
  .hhc-page-wrap {
    padding-top: 24px;
  }

  .hhc-home-title,
  .hhc-title,
  .hhc-archive-title {
    font-size: 31px;
  }

  .hhc-card--lead .hhc-card__title,
  .hhc-card--feature .hhc-card__title {
    font-size: 23px;
  }

  .hhc-card--compact {
    grid-template-columns: 112px minmax(0, 1fr);
  }

  .hhc-home-grid,
  .hhc-archive-grid,
  .hhc-topic-grid {
    grid-template-columns: 1fr;
  }

  .hhc-contact-grid {
    grid-template-columns: 1fr;
  }

  .hhc-content {
    font-size: 16px;
  }

  .hhc-single .hhc-featured-image {
    margin-left: -16px;
    margin-right: -16px;
  }

  .hhc-post-nav,
  .hhc-site-footer__inner,
  .hhc-footer-widgets {
    grid-template-columns: 1fr;
  }

  .hhc-footer-nav .hhc-nav__list {
    justify-content: flex-start;
  }

  .hhc-search-form {
    flex-direction: column;
  }
}

/* =========================================================
   Home parity modules + mobile header (v0.6.0)
   ========================================================= */

.hhc-menu-toggle,
.hhc-search-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 0;
  color: #111;
  cursor: pointer;
}

.hhc-mobile-menu[hidden],
.hhc-mobile-search[hidden] {
  display: none;
}

/* Hero */
.hhc-home-hero__grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

.hhc-home-hero__rail {
  display: grid;
  gap: 20px;
  align-content: start;
}

.hhc-feature-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #111;
}

.hhc-feature-card__link {
  display: block;
  position: relative;
  color: #fff;
  text-decoration: none;
}

.hhc-feature-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 10;
}

.hhc-feature-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.82) 100%);
}

.hhc-feature-card__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px;
  display: grid;
  gap: 8px;
  justify-items: start;
}

.hhc-feature-card__chip {
  background: #fff;
  color: #111;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 3px;
  letter-spacing: 0.04em;
}

.hhc-feature-card__title {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.4;
}

.hhc-home-hero__rail .hhc-feature-card__title {
  font-size: 15px;
}

.hhc-section-lead {
  margin-bottom: 18px;
}

/* Media rows */
.hhc-media-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.hhc-media-row {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
}

.hhc-media-row__thumb img {
  display: block;
  width: 108px;
  height: 108px;
  object-fit: cover;
  border-radius: 10px;
}

.hhc-media-row__title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.5;
}

.hhc-media-row__title a {
  color: inherit;
  text-decoration: none;
}

.hhc-media-row__title a:hover {
  color: var(--hhc-accent);
}

.hhc-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 800;
  color: #d43f3f;
}

.hhc-chip::before,
.hhc-chip::after {
  content: "";
  width: 3px;
  height: 14px;
  background: #d43f3f;
}

.hhc-chip a {
  color: inherit;
  text-decoration: none;
}

.hhc-media-row__time {
  display: block;
  margin-top: 7px;
  color: var(--hhc-soft-text);
  font-size: 12px;
}

.hhc-media-row__excerpt {
  margin: 9px 0 0;
  color: var(--hhc-soft-text);
  font-size: 13px;
  line-height: 1.9;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hhc-media-row__rank {
  font-size: 34px;
  font-weight: 800;
  color: #d5d5d5;
  line-height: 1;
  align-self: center;
}

/* DAILY TOP5 */
.hhc-media-list--ranked {
  counter-reset: none;
}

/* Weekly dark modules */
.hhc-weekly {
  background: #0b0b0b;
  border-radius: 16px;
  padding: 24px 20px;
}

.hhc-weekly__heading {
  border-bottom: 3px solid #fff;
  margin-bottom: 20px;
  padding-bottom: 12px;
}

.hhc-weekly__title {
  margin: 0;
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.hhc-media-list--dark .hhc-media-row__title,
.hhc-media-list--dark .hhc-media-row__title a {
  color: #fff;
}

.hhc-media-list--dark .hhc-media-row__excerpt {
  color: #c8c8c8;
}

.hhc-media-list--dark .hhc-media-row__thumb img {
  border-radius: 6px;
}

/* Front ad slot */
.hcs-ad-slot {
  margin: 10px 0;
  text-align: center;
}

.hcs-ad-label {
  margin: 0 0 4px;
  color: var(--hhc-soft-text);
  font-size: 11px;
  letter-spacing: 0.08em;
}

/* Instagram follow band */
.hhc-follow__card {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: space-between;
  flex-wrap: wrap;
  border: 1px solid var(--hhc-border);
  border-radius: 14px;
  padding: 18px 20px;
  text-decoration: none;
  color: inherit;
  font-weight: 800;
}

.hhc-follow__badge {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  color: #fff;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
}

.hhc-follow__cta {
  color: var(--hhc-accent);
}

/* Load more */
.hhc-load-more {
  text-align: center;
  margin: 12px 0 34px;
}

.hhc-load-more__link {
  display: inline-block;
  border: 1px solid var(--hhc-border);
  padding: 12px 28px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  color: inherit;
}

.hhc-section-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 18px 0 2px;
}

.hhc-section-pager__btn,
.hhc-section-pager__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 1px solid var(--hhc-border);
  background: #fff;
  color: #111;
  text-decoration: none;
  font-weight: 800;
}

.hhc-section-pager__btn {
  width: 34px;
  font-size: 20px;
  line-height: 1;
}

.hhc-section-pager__more {
  padding: 0 18px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.hhc-section-pager__btn--disabled {
  color: #bbb;
  background: #f7f7f7;
}

/* Desktop: overlays never render */
@media (min-width: 981px) {
  .hhc-mobile-menu,
  .hhc-mobile-search {
    display: none !important;
  }
}

/* Mobile header: hamburger + centered logo + search toggle */
@media (max-width: 980px) {
  .hhc-site-header__inner {
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 6px 0;
    min-height: 56px;
  }

  .hhc-nav,
  .hhc-header-search {
    display: none;
  }

  .hhc-site-title {
    justify-self: center;
    text-align: center;
  }

  .hhc-menu-toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
  }

  .hhc-menu-toggle__bar {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    transition: transform 0.15s ease, opacity 0.15s ease;
  }

  .hhc-menu-toggle.is-open .hhc-menu-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .hhc-menu-toggle.is-open .hhc-menu-toggle__bar:nth-child(2) {
    opacity: 0;
  }

  .hhc-menu-toggle.is-open .hhc-menu-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .hhc-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
  }

  .hhc-mobile-menu,
  .hhc-mobile-search {
    border-top: 1px solid var(--hhc-border);
    background: #fff;
  }

  .hhc-mobile-menu .hhc-nav__list {
    display: block;
    width: auto;
    min-width: 0;
    padding: 6px 0 10px;
    margin: 0;
  }

  .hhc-mobile-menu .hhc-nav__list li {
    border-bottom: 1px solid var(--hhc-border);
  }

  .hhc-mobile-menu .hhc-nav__list li:last-child {
    border-bottom: 0;
  }

  .hhc-mobile-menu .hhc-nav__list a {
    display: block;
    padding: 14px 4px;
    font-size: 14px;
    white-space: normal;
  }

  .hhc-mobile-search {
    padding: 14px 0 18px;
  }

  .hhc-mobile-search .hhc-search-form,
  .hhc-mobile-search form {
    margin: 0;
  }

  /* Home modules on mobile */
  .hhc-home-hero__grid {
    grid-template-columns: 1fr;
  }

  .hhc-media-row {
    grid-template-columns: 96px minmax(0, 1fr) auto;
    gap: 12px;
  }

  .hhc-media-row__thumb img {
    width: 96px;
    height: 96px;
  }

  .hhc-weekly {
    padding: 20px 14px;
    border-radius: 12px;
  }

  .hhc-media-row__rank {
    font-size: 28px;
  }
}

/* Footer nav must wrap on mobile — the <=980px header-nav rules
   (nowrap / max-content / nowrap links) otherwise leak into the
   footer, which has no scroll container, and widen the document. */
@media (max-width: 980px) {
  .hhc-footer-nav .hhc-nav__list {
    flex-wrap: wrap;
    width: auto;
    min-width: 0;
  }

  .hhc-site-footer .hhc-nav__list a {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* Real-device Safari zoom-out guard: any child that lays out wider
   than the viewport (typically an expanded ad) must not widen the
   canvas. overflow clip keeps layout width honest without breaking
   the hub band's internal scroller. */
.hhc-site-header,
.hhc-home,
.hcs-ad-slot {
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

/* Footer TRENDING band + EN page button (video parity) */
.hhc-footer-trending,
.hhc-footer-en {
  grid-column: 1 / -1;
  text-align: center;
}

.hhc-footer-trending {
  display: grid;
  gap: 10px;
  justify-items: center;
  padding: 4px 0 6px;
}

.hhc-footer-trending__label {
  color: #e8a33d;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.hhc-footer-trending a {
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.6;
}

.hhc-footer-en {
  padding-bottom: 10px;
}

.hhc-footer-en__button {
  display: inline-block;
  padding: 10px 30px;
  border-radius: 999px;
  background: #5b7fd0;
  color: #ffffff;
  font-weight: 800;
  font-size: 13px;
  text-decoration: none;
}

/* Mobile menu social row */
.hhc-mobile-menu__social {
  display: flex;
  gap: 20px;
  padding: 12px 4px 4px;
  border-bottom: 1px solid var(--hhc-border);
}

.hhc-mobile-menu__social a {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
}

/* Hero rail: 3 swipeable cards on mobile (1 big + 3 scroll spec) */
@media (max-width: 980px) {
  .hhc-home-hero__rail {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
  }

  .hhc-home-hero__rail .hhc-feature-card {
    flex: 0 0 78vw;
    max-width: 330px;
    scroll-snap-align: start;
  }
}

/* Logo wordmark (Bigshot One, matching the Newspaper header) */
.hhc-logo-text {
  display: inline-grid;
  justify-items: center;
  gap: 3px;
  text-align: center;
}

.hhc-logo-text__title {
  font-family: 'Bigshot One', serif;
  font-weight: 400;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -3px;
  color: #000;
}

.hhc-logo-text__tagline {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.32em;
  color: #444;
}

/* Full-bleed hero: header -> hero with zero gap on mobile */
.hhc-hero-bleed {
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

.hhc-hero-bleed .hhc-home-hero {
  width: min(var(--hhc-max), calc(100% - 40px));
  margin: 0 auto;
  padding-top: 24px;
}

.hhc-home {
  padding-top: 26px;
}

@media (max-width: 980px) {
  .hhc-logo-text__title {
    font-size: 30px;
    letter-spacing: -2.5px;
  }

  .hhc-hero-bleed .hhc-home-hero {
    width: 100%;
    padding-top: 0;
  }

  .hhc-home-hero__grid {
    gap: 10px;
  }

  .hhc-home-hero__main .hhc-feature-card,
  .hhc-home-hero__rail .hhc-feature-card {
    border-radius: 0;
  }

  .hhc-home {
    padding-top: 22px;
  }
}

/* =========================================================
   Deep video-parity pass (v0.7.0)
   ========================================================= */

/* Black divider under the hero block */
.hhc-divider {
  height: 4px;
  background: #111;
}

/* Home section headings: bold title + thin rule running right */
.hhc-home .hhc-section-heading {
  align-items: center;
}

.hhc-home .hhc-section-heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hhc-border);
}

.hhc-home .hhc-section-title {
  border-bottom: 0;
  padding-bottom: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.hhc-home .hhc-section-title--big {
  font-size: 27px;
  letter-spacing: 0;
}

/* Sharp corners across home modules (Newspaper look) */
.hhc-feature-card,
.hhc-weekly {
  border-radius: 0;
}

.hhc-media-row__thumb img,
.hhc-media-list--dark .hhc-media-row__thumb img {
  border-radius: 0;
}

/* Bigger, lighter rank numbers */
.hhc-media-row__rank {
  font-size: 58px;
  color: #e2e2e2;
}

/* Hairline separators between light-list rows */
.hhc-media-list:not(.hhc-media-list--dark) .hhc-media-row {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hhc-border);
}

.hhc-media-list:not(.hhc-media-list--dark) .hhc-media-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

/* Muted chip under feature-card titles (LATEST lead) */
.hhc-feature-card__chip--muted {
  background: rgba(45, 45, 45, 0.88);
  color: #fff;
  font-weight: 700;
}

/* In-article H2 red bar */
.hhc-content h2 {
  border-left: 4px solid #d43f3f;
  padding-left: 12px;
}

/* Instagram follow band: logo circle + handle + follow button */
.hhc-follow__card {
  justify-content: flex-start;
}

.hhc-follow__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 2px solid #111;
  border-radius: 50%;
  font-weight: 900;
  font-size: 15px;
  flex: 0 0 auto;
}

.hhc-follow__meta {
  display: grid;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.hhc-follow__handle {
  color: #4a90d9;
  font-weight: 800;
}

.hhc-follow__count {
  color: var(--hhc-muted);
  font-size: 13px;
  font-weight: 600;
}

.hhc-follow__btn {
  border: 1px solid var(--hhc-border);
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 700;
}

/* Dark mobile menu overlay (Newspaper look) */
@media (max-width: 980px) {
  body.hhc-overlay-open {
    overflow: hidden;
  }

  body.hhc-overlay-open .hhc-site-header {
    position: sticky;
    top: 0;
    z-index: 10000;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    overflow: visible;
  }

  .hhc-mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 9998;
    padding: calc(env(safe-area-inset-top, 0px) + 86px) 20px 32px;
    overflow-y: auto;
    background: rgba(9, 9, 9, 0.9);
    border-top: 0;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  .hhc-mobile-menu__social {
    border-bottom: 0;
    gap: 24px;
    padding: 6px 6px 18px;
  }

  .hhc-mobile-menu__social a {
    color: #fff;
    display: inline-flex;
  }

  .hhc-mobile-menu .hhc-nav__list {
    display: grid;
    gap: 4px;
    padding: 0 0 28px;
  }

  .hhc-mobile-menu .hhc-nav__list li {
    border-bottom: 0;
  }

  .hhc-mobile-menu .hhc-nav__list a {
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.14;
    text-transform: none;
    padding: 8px 6px;
    letter-spacing: 0;
  }

  .hhc-mobile-menu .hhc-nav__list li.lang-item a {
    display: inline-block;
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 999px;
    padding: 9px 20px;
    margin: 8px 6px 4px;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* Dark search overlay with centered field */
  .hhc-mobile-search {
    position: fixed;
    inset: 0;
    z-index: 9998;
    padding: calc(env(safe-area-inset-top, 0px) + 108px) 22px 32px;
    overflow-y: auto;
    background: rgba(9, 9, 9, 0.9);
    border-top: 0;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  .hhc-mobile-search__label {
    margin: 0 0 16px;
    color: #fff;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
  }

  .hhc-mobile-search .hhc-search-form,
  .hhc-mobile-search form {
    max-width: none;
    margin: 0;
  }

  .hhc-mobile-search input {
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 10px 0 0 10px;
    color: #fff;
    text-align: center;
    height: 56px;
    font-size: 16px;
  }

  .hhc-mobile-search button {
    background: #fff;
    border-color: #fff;
    border-radius: 0 10px 10px 0;
    color: #111;
    height: 56px;
    padding: 0 18px;
  }
}

/* Footer widget lists: label left, count right */
.hhc-footer-widget-column ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hhc-footer-widget-column li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
}

.hhc-footer-widget-column li a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

/* Logo container is h1 on the front page (Newspaper pattern) */
h1.hhc-site-title {
  font-size: 22px;
}

/* =========================================================
   Archive/search/article parity pass (v0.8.0)
   ========================================================= */

/* Category/tag: dark banner header, white centered title */
.hhc-archive-header--banner {
  background: #111;
  margin: 0 calc(50% - 50vw) 26px;
  padding: 44px 20px;
  text-align: center;
}

.hhc-archive-header--banner .hhc-archive-title {
  margin: 0;
  color: #fff;
  font-size: 26px;
  letter-spacing: 0.02em;
}

.hhc-archive {
  overflow-x: hidden;
  overflow-x: clip;
}

/* Card chip overlaid on the thumbnail (Newspaper archive card) */
.hhc-card__thumb {
  position: relative;
}

.hhc-card__chip {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background: #fff;
  color: #111;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  line-height: 1;
}

.hhc-card__date {
  display: block;
  margin-top: 7px;
  color: var(--hhc-muted);
  font-size: 12px;
}

/* Search results: compact rows like Newspaper */
.hhc-search .hhc-search-form {
  margin: 0 0 26px;
}

.hhc-search-list .hhc-media-row__thumb img {
  width: 84px;
  height: 84px;
}

.hhc-search-list .hhc-media-row {
  grid-template-columns: 84px minmax(0, 1fr);
}

/* Breadcrumbs: hide the current-page tail (Newspaper shows path only) */
.hhc-breadcrumbs .breadcrumb_last {
  display: none;
}

/* Article header category links: dark, not accent */
.hhc-categories a {
  color: #333;
}

/* Round share buttons */
.hhc-share {
  display: flex;
  gap: 10px;
  align-items: center;
}

.hhc-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
}

.hhc-share__btn--fb {
  background: #3b5998;
}

.hhc-share__btn--x {
  background: #111;
}

.hhc-share__btn--line {
  width: auto;
  border-radius: 999px;
  padding: 0 14px;
  background: #06c755;
  font-size: 12px;
  font-weight: 800;
}

/* Featured image caption */
.hhc-featured-image figcaption {
  margin-top: 8px;
  color: var(--hhc-muted);
  font-size: 12px;
  font-style: italic;
  line-height: 1.6;
}

@media (max-width: 640px) {
  .hhc-title {
    font-size: 25px;
  }

  .hhc-archive-header--banner {
    padding: 36px 16px;
  }

  .hhc-archive-header--banner .hhc-archive-title {
    font-size: 22px;
  }
}

/* =========================================================
   Readability + refinement pass (v0.8.1, user device feedback)
   ========================================================= */

/* Stronger scrim + text shadow: titles must stay readable on busy art */
.hhc-feature-card__scrim {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 16%, rgba(0, 0, 0, 0.46) 52%, rgba(0, 0, 0, 0.88) 100%);
}

.hhc-feature-card__title {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.5);
}

/* Subtle rounding across all imagery (brand refinement) */
.hhc-feature-card {
  border-radius: 12px;
}

.hhc-card__thumb,
.hhc-card__thumb img,
.hhc-card__thumb-placeholder {
  border-radius: 12px;
}

.hhc-media-row__thumb img,
.hhc-media-list--dark .hhc-media-row__thumb img,
.hhc-search-list .hhc-media-row__thumb img {
  border-radius: 9px;
}

.hhc-weekly {
  border-radius: 14px;
}

.hhc-featured-image img {
  border-radius: 12px;
}

.hhc-content img {
  border-radius: 10px;
}

@media (max-width: 980px) {
  /* Hero: small inset so the rounding reads cleanly */
  .hhc-hero-bleed .hhc-home-hero {
    padding: 0 10px;
  }

  .hhc-home-hero__main .hhc-feature-card,
  .hhc-home-hero__rail .hhc-feature-card {
    border-radius: 12px;
  }
}

@media (max-width: 640px) {
  /* Featured image stays inset + rounded (no edge bleed) */
  .hhc-single .hhc-featured-image {
    margin-left: 0;
    margin-right: 0;
  }
}

/* Tighter hero rhythm + certain-win refinements (v0.8.2) */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.hhc-section-title,
.hhc-weekly__title {
  text-wrap: balance;
}

.hhc-home-hero__grid {
  gap: 14px;
}

@media (max-width: 980px) {
  .hhc-home-hero__grid {
    gap: 8px;
  }

  .hhc-home-hero__rail {
    gap: 8px;
  }
}

/* =========================================================
   Device feedback round 3 (v0.8.3)
   ========================================================= */

/* Root cause of "text too big / too loose" on real iPhones:
   Safari text autosizing inflated list text. Lock it. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Feature card titles: smaller, tighter, so art stays visible */
.hhc-feature-card__title {
  font-size: 18px;
  line-height: 1.42;
}

.hhc-home-hero__rail .hhc-feature-card__title {
  font-size: 14px;
}

@media (max-width: 980px) {
  .hhc-feature-card__title {
    font-size: 16px;
  }
}

/* List rows: tighter rhythm */
.hhc-media-row__title {
  font-size: 14px;
  line-height: 1.45;
}

.hhc-related-card a,
.hhc-sidebar-card a,
.hhc-popular-card a {
  line-height: 1.45;
}

.hhc-media-list {
  gap: 15px;
}

/* Share buttons: Newspaper style - white outline, brand color */
.hhc-share__btn,
.hhc-share__btn--fb,
.hhc-share__btn--x,
.hhc-share__btn--line {
  width: auto;
  height: auto;
  border-radius: 5px;
  border: 1px solid var(--hhc-border);
  background: #fff;
  padding: 10px 18px;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
}

.hhc-share__btn--fb {
  color: #3b5998;
}

.hhc-share__btn--x {
  color: #111;
}

.hhc-share__btn--line {
  color: #06c755;
}

/* TAGS row: black label + outlined pills */
.hhc-tagrow {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 26px 0 6px;
}

.hhc-tagrow__label {
  flex: 0 0 auto;
  background: #111;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 6px 10px;
}

.hhc-tagrow .hhc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hhc-tagrow .hhc-tags li {
  margin: 0;
}

.hhc-tagrow .hhc-tags a {
  display: inline-block;
  border: 1px solid var(--hhc-border);
  background: #fff;
  color: var(--hhc-soft-text);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  text-decoration: none;
}

/* Comments: cared-for form like the Newspaper reference */
#comments,
.comments-area {
  margin-top: 36px;
}

#reply-title,
.comment-reply-title {
  font-size: 17px;
  font-weight: 800;
  margin: 0 0 14px;
}

.comment-form {
  border: 1px solid var(--hhc-border);
  background: #fff;
  border-radius: 8px;
  padding: 16px;
}

.comment-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
  width: 100%;
  border: 1px solid var(--hhc-border);
  background: #fff;
  color: var(--hhc-text);
  font: inherit;
  font-size: 14px;
  padding: 12px;
  border-radius: 6px;
}

.comment-form textarea {
  min-height: 150px;
  resize: vertical;
}

.comment-form-comment {
  margin: 0 0 12px;
}

.comment-form .form-submit {
  margin: 0;
  text-align: right;
}

.comment-form .form-submit .submit {
  border: 1px solid var(--hhc-border);
  background: #fff;
  color: var(--hhc-soft-text);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 26px;
  border-radius: 6px;
  cursor: pointer;
}

.comment-form .form-submit .submit:hover {
  border-color: #111;
  color: #111;
}

.comment-notes,
.comment-form label {
  font-size: 12px;
  color: var(--hhc-muted);
}

/* Hide only auto ads that are injected above the site header. Bottom
   anchors must remain eligible for Google to render. */
.hhc-suppress-top-auto-ad {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Weekly modules: keep the Newspaper black-module visual language. */
.hhc-weekly {
  background: #151515;
  border: 1px solid #050505;
  border-radius: 0;
  padding: 12px 7px 18px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.hhc-weekly__heading {
  margin: 0 0 15px;
  padding: 0 0 9px;
  border-bottom: 2px solid #f4f4f4;
}

.hhc-weekly__title {
  font-size: 18px;
  line-height: 1.12;
  font-weight: 800;
  color: #fff;
}

.hhc-weekly .hhc-media-list {
  gap: 16px;
}

.hhc-weekly .hhc-media-row {
  grid-template-columns: minmax(96px, 31%) minmax(0, 1fr);
  gap: 15px;
  align-items: start;
}

.hhc-weekly .hhc-media-row__thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 0;
}

.hhc-weekly .hhc-media-row__title {
  margin-bottom: 7px;
  font-size: 13px;
  line-height: 1.34;
  font-weight: 900;
}

.hhc-weekly .hhc-chip {
  font-size: 10px;
  line-height: 1;
}

.hhc-weekly .hhc-chip::before,
.hhc-weekly .hhc-chip::after {
  height: 18px;
}

.hhc-weekly .hhc-media-row__excerpt {
  margin-top: 9px;
  color: #8e8e8e;
  font-size: 12px;
  line-height: 1.78;
  -webkit-line-clamp: 3;
}

.hhc-weekly .hhc-section-pager__btn,
.hhc-weekly .hhc-section-pager__more {
  border-color: rgba(255, 255, 255, 0.22);
  background: transparent;
  color: #fff;
}

.hhc-weekly .hhc-section-pager__btn--disabled {
  color: rgba(255, 255, 255, 0.35);
}

/* =========================================================
   XXL-style hero carousel (v0.9.0)
   ========================================================= */

.hhc-carousel {
  position: relative;
  background: #0b0b0b;
  overflow: hidden;
}

.hhc-carousel__track {
  display: block;
  width: 100%;
}

.hhc-carousel__slide {
  display: none;
  width: 100%;
  min-width: 0;
}

.hhc-carousel__slide.is-active {
  display: block;
}

.hhc-carousel__link {
  display: block;
  color: #fff;
  text-decoration: none;
}

.hhc-carousel__media {
  display: block;
  position: relative;
}

.hhc-carousel__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 0;
}

.hhc-carousel__media::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  background: linear-gradient(180deg, rgba(11, 11, 11, 0) 0%, rgba(11, 11, 11, 0.95) 100%);
}

.hhc-carousel__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: -22px 18px 0;
  position: relative;
  text-align: center;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.5;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}

.hhc-carousel__nav {
  position: absolute;
  top: 34%;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 52px;
  border: 0;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  cursor: pointer;
  padding: 0;
}

.hhc-carousel__nav--prev {
  left: 0;
  border-radius: 0 8px 8px 0;
}

.hhc-carousel__nav--next {
  right: 0;
  border-radius: 8px 0 0 8px;
}

.hhc-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  padding: 12px 0 16px;
}

.hhc-carousel__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: #6f6f6f;
  cursor: pointer;
}

.hhc-carousel__dot.is-active {
  background: #d43f3f;
}

/* Desktop: contained width, taller media */
@media (min-width: 981px) {
  .hhc-carousel {
    max-width: var(--hhc-max);
    margin: 24px auto 0;
    border-radius: 14px;
  }

  .hhc-carousel__media img {
    aspect-ratio: 21 / 9;
  }

  .hhc-carousel__title {
    font-size: 22px;
    margin-top: -30px;
  }

  .hhc-carousel__nav {
    top: 40%;
  }
}

/* Compact Instagram band under DAILY TOP5 (v0.9.1) */
.hhc-follow--compact {
  padding-top: 22px;
}

.hhc-follow--compact .hhc-follow__card {
  padding: 12px 14px;
  gap: 10px;
  border-radius: 12px;
}

.hhc-follow--compact .hhc-follow__logo {
  width: 34px;
  height: 34px;
  font-size: 12px;
}

.hhc-follow--compact .hhc-follow__handle {
  font-size: 14px;
}

.hhc-follow--compact .hhc-follow__count {
  font-size: 11px;
}

.hhc-follow--compact .hhc-follow__btn {
  padding: 7px 14px;
  font-size: 12px;
}

/* =========================================================
   Author archive (v0.9.5)
   ========================================================= */
.hhc-author-header {
  margin: 8px 0 28px;
}

.hhc-author-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding: 22px;
  border: 1px solid #171717;
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgba(0, 127, 115, 0.08), rgba(255, 255, 255, 0) 46%),
    #fff;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.08);
}

.hhc-author-card__avatar img,
.hhc-author-card__img,
.hhc-author-avatar-fallback {
  display: block;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  object-fit: cover;
  background: #111;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px #111;
}

.hhc-author-card__body {
  min-width: 0;
  flex: 1;
}

.hhc-author-card__eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--hhc-accent);
}

.hhc-author-card__name {
  margin: 0 0 8px;
  font-size: clamp(28px, 7vw, 46px);
  font-weight: 900;
  line-height: 1.2;
}

.hhc-author-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--hhc-muted);
}

.hhc-author-card__stats a {
  color: var(--hhc-accent);
  text-decoration: none;
}

.hhc-author-card__bio {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: var(--hhc-soft-text);
}

.hhc-author-others {
  margin: 0 0 34px;
}

.hhc-author-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.hhc-author-chip a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px;
  min-height: 82px;
  border: 1px solid #242424;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  background: #fff;
  transition: transform 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.hhc-author-chip a:hover {
  transform: translateY(-2px);
  background: #111;
  color: #fff;
}

.hhc-author-chip__avatar img,
.hhc-author-chip__img,
.hhc-author-chip__avatar .hhc-author-avatar-fallback {
  display: block;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  background: #111;
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #111;
}

.hhc-author-avatar-fallback {
  display: grid;
  place-items: center;
  font-weight: 900;
  color: #fff;
}

.hhc-author-chip__meta {
  min-width: 0;
}

.hhc-author-chip__name {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hhc-author-chip__count {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--hhc-muted);
}

@media (max-width: 640px) {
  .hhc-author-card {
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
    align-items: center;
  }

  .hhc-author-card__avatar {
    display: flex;
    justify-content: flex-start;
  }

  .hhc-author-card__avatar img,
  .hhc-author-card__img,
  .hhc-author-card__avatar .hhc-author-avatar-fallback {
    width: 86px;
    height: 86px;
  }

  .hhc-author-card__body {
    display: contents;
  }

  .hhc-author-card__eyebrow,
  .hhc-author-card__name,
  .hhc-author-card__stats {
    grid-column: 2;
  }

  .hhc-author-card__eyebrow {
    margin-bottom: 4px;
  }

  .hhc-author-card__name {
    margin-bottom: 6px;
    font-size: 30px;
  }

  .hhc-author-card__stats {
    margin-bottom: 0;
  }

  .hhc-author-card__bio {
    grid-column: 1 / -1;
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid rgba(17, 17, 17, 0.1);
    font-size: 14px;
    line-height: 1.85;
  }

  .hhc-author-others {
    margin-bottom: 30px;
  }

  .hhc-author-grid {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 0 2px 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .hhc-author-chip {
    flex: 0 0 76%;
    scroll-snap-align: start;
  }

  .hhc-author-chip a {
    min-height: 86px;
  }
}