/* ==============================================================
   File:    /css/home.css
   Purpose: The home page's own sections (index.asp 4.0.0). The hero is
            site.css's .ox-hero with the adjustments below; the header
            is css/header.css. Colours and sizes are site.css names only.
   Version: 1.0.0
   Updated: 2026-10-28

   Changelog:
     1.0.0 (2026-10-28) Steve: "build this homepage" (preview 5). The
           hero's map larger, warmer and brighter and the globe smaller
           and further right, so the map reads and the words sit on clear
           dark (Steve: "you can adjust the hero background image a little
           more"); the counts under the intro; Three open questions; Join
           the readers; the featured investigation with the Latest rail;
           More investigations; the hubs with their sub-topics and How
           Official X works; the shop.
   ============================================================== */

/* The hero: the header is no longer laid over it, so less room on top. */
.hx-hero { min-height: 640px; }
.hx-hero .ox-hero__map {
  left: -4%;
  width: 72%;
  opacity: 0.88;
  filter: sepia(0.55) saturate(0.95) brightness(0.74) contrast(1.12);
  transform: perspective(1100px) rotateY(6deg) scale(1.03);
}
.hx-hero .ox-hero__earth { width: min(56vw, 700px); right: -16%; top: 14%; opacity: 0.75; }
.hx-hero__content { width: min(900px, calc(100% - 40px)); padding: 64px 0 56px; }
.hx-hero__content::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 8% -10%;
  background: radial-gradient(ellipse at center, var(--home-shade-74), transparent 70%);
}
.hx-hero h1 { text-wrap: balance; }
.hx-hero .ox-hero__eyebrow { font-size: var(--fs-2xl); letter-spacing: 0.16em; }
.hx-hero .ox-hero__intro { max-width: 38rem; margin: 0 auto; font-size: 19px; line-height: 1.6; }
.hx-hero__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 28px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  color: var(--home-dim);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
}
.hx-hero__facts b { color: var(--home-gold-bright); font-size: var(--fs-4xl); }
.hx-hero .ox-button { font-size: var(--fs-lg); }

/* The page column and shared pieces. */
.hx-wrap { width: min(var(--home-wrap), calc(100% - 32px)); margin: 0 auto; padding-bottom: 32px; }
.hx-title {
  margin: 0;
  color: var(--home-ink);
  font: 700 var(--fs-xl)/1.2 var(--home-display);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.hx-kicker {
  margin: 0 0 7px;
  color: var(--home-gold);
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
}
.hx-btn {
  display: inline-block;
  padding: 16px 22px;
  border: 0;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--home-gold-to), var(--home-gold-from));
  color: var(--home-on-gold);
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 0 24px var(--home-glow-gold);
  cursor: pointer;
}
.hx-btn:hover,
.hx-btn:focus-visible { background: var(--home-gold-hover); }
.hx-btn:disabled { opacity: 0.55; cursor: default; box-shadow: none; }
.hx-btn--ghost { background: none; border: 1px solid var(--home-gold); color: var(--home-gold-bright); box-shadow: none; }
.hx-btn--ghost:hover,
.hx-btn--ghost:focus-visible { background: var(--home-warm-bg); }
.hx-section { margin-top: 24px; padding: 40px 0 16px; border-top: 1px solid var(--home-line-faint); }
.hx-section__head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 24px; }
.hx-section__head::before { content: ""; align-self: center; width: 28px; height: 2px; margin-right: -6px; background: var(--home-gold); }
.hx-section__head .hx-title { margin-right: auto; }
.hx-section__link { color: var(--home-gold-bright); font-size: var(--fs-lg); font-weight: 600; letter-spacing: 0.04em; }
.hx-empty { color: var(--home-dim); }

/* Three open questions and Join the readers. */
.hx-found { padding: 40px 0 16px; }
.hx-found .hx-title { margin-bottom: 20px; }
.hx-finds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0 0 32px; padding: 0; list-style: none; }
.hx-finds a {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 18px 18px 16px;
  border: 1px solid var(--home-line-faint);
  border-top: 2px solid var(--home-gold);
  background: linear-gradient(180deg, var(--home-card-top), var(--home-card));
}
.hx-finds a:hover { border-color: var(--home-gold); }
.hx-find__hub { margin-bottom: 8px; color: var(--home-gold); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.14em; line-height: 1.3; text-transform: uppercase; }
.hx-find__q { flex: 1; color: var(--home-ink); font: 19px/1.4 Georgia, "Times New Roman", serif; }
.hx-find__go { margin-top: 16px; color: var(--home-gold-bright); font-size: var(--fs-lg); font-weight: 600; line-height: 1; }
.hx-join {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
  padding: 20px 22px;
  border: 1px solid var(--home-line-faint);
  background: var(--home-warm-bg);
}
.hx-join__text { flex: 1 1 18rem; margin: 0; color: var(--home-text-soft); font-size: var(--fs-3xl); }
.hx-join__text b { color: var(--home-ink); }
.hx-join__form { display: flex; flex: 1 1 22rem; gap: 10px; }
.hx-join__form input {
  flex: 1;
  min-width: 0;
  min-height: var(--tap-min);
  padding: 0 14px;
  border: 1px solid var(--home-line);
  border-radius: 3px;
  background: var(--home-bg);
  color: var(--home-ink);
  font-size: var(--fs-2xl);
}

/* The featured investigation and the Latest rail. */
.hx-top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 44px; padding: 40px 0 24px; border-top: 1px solid var(--home-line-faint); }
.hx-lead__title { margin: 3px 0 14px; font: 700 clamp(2.2rem, 4.4vw, 3.4rem)/1.08 var(--home-display); letter-spacing: 0.01em; }
.hx-lead__title a:hover { color: var(--home-gold-bright); }
.hx-lead__deck { margin: 0 0 16px; color: var(--home-text-soft); font: 20px/1.5 Georgia, "Times New Roman", serif; }
.hx-lead__media { display: block; margin: 22px 0 0; aspect-ratio: 1.91 / 1; overflow: hidden; border: 1px solid var(--home-line-faint); background: var(--home-media-bg); }
.hx-lead__text { margin: 20px 0 22px; color: var(--home-dim); font-size: var(--fs-3xl); }
.hx-rail { padding-left: 28px; border-left: 1px solid var(--home-line-faint); }
.hx-rail__head { margin: 0 0 18px; padding-bottom: 13px; border-bottom: 2px solid var(--home-gold); color: var(--home-ink); font: 700 var(--fs-xl)/1 var(--home-display); letter-spacing: 0.22em; text-transform: uppercase; }
.hx-rail ol { margin: 0; padding: 0; list-style: none; }
.hx-rail li { margin: 0 0 16px; padding: 0 0 16px; border-bottom: 1px solid var(--home-line-faint); }
.hx-rail__title { display: block; font: var(--fs-4xl)/1.32 Georgia, "Times New Roman", serif; }
.hx-rail__title:hover { color: var(--home-gold-bright); }
.hx-rail__date { margin: 6px 0 0; color: var(--home-text-meta); font-size: var(--fs-md); line-height: 1.3; }
.hx-rail__all {
  min-height: var(--tap-min);
  padding: 0;
  border: 0;
  background: none;
  color: var(--home-gold-bright);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
}

/* More investigations. */
.hx-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 26px; }
.hx-card { padding: 0 0 20px; border: 1px solid var(--home-line-faint); background: linear-gradient(180deg, var(--home-card-top), var(--home-card)); }
.hx-card > :not(.hx-card__media) { padding: 0 18px; }
.hx-card--text { padding-top: 20px; }
.hx-card__media { display: block; margin-bottom: 16px; aspect-ratio: 1.91 / 1; overflow: hidden; background: var(--home-media-bg); }
.hx-card__title { margin: 0 0 8px; font: 400 22px/1.25 Georgia, "Times New Roman", serif; }
.hx-card__title a:hover { color: var(--home-gold-bright); }
.hx-card__text { margin: 0; color: var(--home-dim); font-size: var(--fs-2xl); line-height: 1.55; }

/* The hubs, their sub-topics, and How Official X works. */
.hx-hubsplit { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.hx-hubs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.hx-hubwrap { display: flex; flex-direction: column; gap: 10px; }
.hx-hub { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); min-height: 7.5rem; border: 1px solid var(--home-line-faint); background: var(--home-card); }
.hx-hub:hover { border-color: var(--home-gold); }
.hx-hub__media { display: block; overflow: hidden; background: var(--home-media-bg); }
.hx-hub__body { padding: 14px 16px; }
.hx-hub__name { display: block; margin-bottom: 6px; color: var(--home-gold-bright); font: 700 var(--fs-xl)/1.2 var(--home-display); letter-spacing: 0.12em; text-transform: uppercase; }
.hx-hub__text { display: block; color: var(--home-dim); font-size: var(--fs-xl); line-height: 1.5; }
.hx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hx-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--home-line);
  border-radius: 999px;
  color: var(--home-text-soft);
  font-size: var(--fs-md);
}
.hx-chip:hover { border-color: var(--home-gold); color: var(--home-gold-bright); }
.hx-howto { padding: 20px 20px 6px; border: 1px solid var(--home-line-faint); background: var(--home-warm-bg); }
.hx-howto h2 { margin: 0 0 12px; color: var(--home-gold-bright); font: 700 var(--fs-xl)/1.2 var(--home-display); letter-spacing: 0.16em; text-transform: uppercase; }
.hx-howto p { margin: 0 0 16px; color: var(--home-text-soft); font-size: var(--fs-2xl); }

/* The shop. */
.hx-shop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; padding: 26px; border: 1px solid var(--home-line-faint); background: var(--home-panel); }
.hx-shop__frame { padding: 18px; background: var(--home-text-hero); box-shadow: 0 10px 40px var(--home-shade-74); }
.hx-shop__frame img { height: auto; }
.hx-shop__title { margin: 0 0 8px; font: 400 26px/1.25 Georgia, "Times New Roman", serif; }
.hx-shop__price { margin: 6px 0 20px; color: var(--home-gold-bright); font-size: 24px; font-weight: 700; line-height: 1; }

@media (min-width: 761px) and (max-width: 1024px) {
  .hx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-hubsplit { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .hx-hero { min-height: 560px; }
  .hx-hero .ox-hero__map { left: -30%; width: 100%; opacity: 0.7; }
  .hx-hero .ox-hero__earth { width: 90vw; right: -50%; top: 30%; opacity: 0.6; }
  .hx-hero__content { padding-top: 40px; }
  .hx-hero h1 br { display: none; }
  .hx-hero .ox-hero__intro { font-size: var(--fs-3xl); }
  .hx-hero .ox-actions { flex-direction: column; align-items: center; gap: 14px; }
  .hx-finds,
  .hx-top,
  .hx-cards,
  .hx-hubsplit,
  .hx-hubs,
  .hx-shop { grid-template-columns: minmax(0, 1fr); }
  .hx-join__form { flex-direction: column; }
  .hx-top { gap: 32px; padding-top: 28px; }
  .hx-rail { padding-left: 0; border-left: 0; }
  .hx-lead__deck { font-size: var(--fs-4xl); }
}