/* =========================================================================
   Screen index — the review hub.
   Same visual system as the product, laid out as a contents page.
   ========================================================================= */

.hub {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--shelf);
}

.hub__head {
  background: var(--ink);
  color: #fff;
  padding: var(--s10) var(--s5) var(--s10);
}
/* Shares the body's measure so the hero lines up with the screen grid. */
.hub__head-inner {
  max-width: 1180px;
  margin: 0 auto;
}
.hub__mark {
  font-variation-settings: "wdth" 112, "wght" 800;
  font-size: var(--text-md);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ticket);
}
.hub__title {
  margin-top: var(--s3);
  font-variation-settings: "wdth" 108, "wght" 800;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 20ch;
}
.hub__lead {
  margin-top: var(--s4);
  max-width: 60ch;
  font-size: var(--text-lg);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}
.hub__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s6);
}
.hub__note {
  margin-top: var(--s4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.5);
}

.hub__body {
  flex: 1;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--s10) var(--s5) var(--s12);
}

.hub__group + .hub__group {
  margin-top: var(--s12);
}
.hub__group-head {
  display: flex;
  align-items: baseline;
  gap: var(--s4);
  flex-wrap: wrap;
  padding-bottom: var(--s3);
  margin-bottom: var(--s5);
  border-bottom: 2px solid var(--ink);
}
.hub__group-title {
  font-variation-settings: "wdth" 108, "wght" 800;
  font-size: var(--text-2xl);
  letter-spacing: -0.02em;
}
.hub__group-sub {
  color: var(--ink-60);
  font-size: var(--text-md);
}

.hub__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--s3);
}

.hub-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rule-strong);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast), box-shadow var(--t-fast),
    transform var(--t-fast);
}
.hub-card:hover {
  border-color: var(--rule-strong);
  border-left-color: var(--ticket);
  box-shadow: var(--shadow-raise);
  transform: translateY(-1px);
}
.hub-card__top {
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.hub-card__n {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-40);
}
.hub-card__name {
  font-variation-settings: "wdth" 104, "wght" 700;
  font-size: var(--text-lg);
  line-height: 1.2;
}
.hub-card__desc {
  font-size: var(--text-sm);
  color: var(--ink-60);
  line-height: 1.45;
}
.hub-card__file {
  margin-top: var(--s2);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-40);
}
.hub-card__flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--s2);
}

.hub__notes {
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.hub__foot {
  padding: var(--s6) var(--s5) var(--s10);
  background: var(--ink);
  color: rgba(255, 255, 255, 0.6);
}
.hub__foot p {
  max-width: 1180px;
  margin: 0 auto;
  font-size: var(--text-sm);
  line-height: 1.6;
}

@media print {
  .hub__cta,
  .hub__foot {
    display: none;
  }
  .hub__head {
    background: none;
    color: var(--ink);
  }
}