/* Homepage: five blocks (docs/design/DESIGN-REVIEW-2026-10.md, concept 6): ask
   or search, browse, the money map, what's new, reports. Type, space, radii and
   colour come from the tokens; buttons, chips, labels and source lines from
   ui-controls.css and ui-source.css. */
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/public-sans-normal-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Merriweather";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/merriweather-normal-latin.woff2") format("woff2");
}
.hp-page :where(main) { font: var(--type-body); color: var(--ink); }
.hp-page [hidden] { display: none !important; }
.hp-wrap { margin-inline: auto; }
.hp-wrap :where(h1, h2, h3, p, ul, ol) { margin: 0; max-width: none; letter-spacing: 0; }
.hp-wrap :where(ul, ol) { list-style: none; padding: 0; }
.hp-page :where(main) a { color: var(--bronze-ink); text-decoration-color: var(--bronze-rule); text-underline-offset: 0.2em; }
.hp-page :where(main) a:hover { text-decoration-color: currentColor; }
.hp-page :where(main) :is(a, summary):focus-visible { outline: var(--border-focus) solid var(--bronze-ink); outline-offset: 3px; }
.hp-skip { position: absolute; top: -100px; left: 20px; padding: var(--sp-12); background: var(--paper-raised); z-index: 100; }
.hp-skip:focus { top: 8px; }

/* ---- Sections: a rule at the top of each; the money map's carries the view's
   one accent mark. */
.hp-section { position: relative; padding-block: var(--space-group) var(--space-section); border-top: var(--border-hairline) solid var(--divider-default); }
.hp-section[data-accent="money"]::before {
  content: ""; position: absolute; top: -1px; left: 0;
  width: var(--border-accent-mark-width); height: var(--border-accent-mark-height); background: var(--money-ink);
}
.hp-page :where(main) h2 { font: var(--type-heading); color: var(--ink); }
.hp-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-tight) var(--space-block); margin-bottom: var(--space-heading); }
.hp-head > a { font: var(--type-metadata); font-weight: var(--weight-strong); }
.hp-lede { font: var(--type-metadata); color: var(--ink-soft); margin-top: var(--space-line); }
.hp-label { font: var(--type-label); color: var(--ink); margin-bottom: var(--space-tight); }
.hp-source { margin-top: var(--space-block); }
.hp-source > .ui-source { margin-top: 0; }

/* ---- 1. Ask or search: purpose beside the one primary action. */
.hp-research { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr); gap: var(--space-section); align-items: start; padding-block: var(--space-section); }
.hp-purpose h1 { font: var(--type-title); color: var(--ink); }
.hp-purpose p { font: var(--type-body); font-size: var(--text-17); color: var(--ink-soft); max-width: 52ch; margin-top: var(--space-block); }
.hp-research-main { min-width: 0; }
/* Ask | Search is a ui-tabs row (ui-controls.css): the chosen mode is pressed. */
.hp-query { margin: 0; }
.hp-query-row { display: flex; align-items: stretch; gap: var(--space-tight); }
.hp-query-row > .ui-input { flex: 1; min-width: 0; }
.hp-query-row > .ui-button { flex-shrink: 0; white-space: nowrap; }
.hp-examples { display: grid; gap: var(--space-line); margin-top: var(--space-heading); }
.hp-examples a { display: inline-block; padding-block: var(--space-line); }
.hp-guided { margin-top: var(--space-tight); }
.hp-guided > summary { width: fit-content; min-height: var(--size-target); align-content: center; font: var(--type-metadata); color: var(--ink-soft); cursor: pointer; }
.hp-guided > summary:hover { color: var(--ink); }
.hp-guided-content { padding: var(--space-heading) 0 var(--space-line); }
.hp-page .ask-builder { margin: 0; }
.hp-guided .ask-builder-modes { flex-wrap: wrap; gap: var(--space-tight); }
.hp-page .ask-builder-form { justify-content: start; gap: var(--space-block); margin-top: var(--space-block); }
.hp-page .ask-builder-sentence { flex: 0 1 auto; margin: 0; font-size: var(--text-17); }
.hp-page .ask-builder-form .ui-button { flex-shrink: 0; }

/* ---- 2. Browse: six destinations in one row. */
.hp-browse h2 { margin-bottom: var(--space-heading); }
.hp-browse-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-block) var(--space-group); }
.hp-browse-list a { display: block; min-height: var(--size-target); text-decoration: none; }
.hp-browse-name { display: block; font: var(--type-subheading); color: var(--bronze-ink); text-decoration: underline; text-decoration-color: var(--bronze-rule); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.hp-browse-list a:hover .hp-browse-name { text-decoration-color: currentColor; }
.hp-browse-detail { display: block; margin-top: var(--space-line); font: var(--type-metadata); color: var(--ink-soft); }

/* ---- 3. The money map, with its industries and its source beside it. */
.hp-map {
  display: grid; grid-template-columns: minmax(0, 1fr) 18.75rem; grid-template-areas: "main side" "foot side";
  gap: var(--space-block) var(--space-section);
}
.hp-map-main { grid-area: main; min-width: 0; }
.hp-map > .hp-source { grid-area: foot; margin-top: 0; }
.hp-money-map {
  position: relative; height: 420px; margin-top: var(--space-block); overflow: hidden;
  border: var(--border-hairline) solid var(--divider-subtle); border-radius: var(--radius-md); background: var(--paper-raised);
}
.hp-money-map > p { padding: var(--space-group); }
.hp-money-map > .ui-button { margin: 0 var(--space-group); }
.hp-money-map :is(h2, h3) { font: var(--type-subheading); }
.hp-map-side { grid-area: side; min-width: 0; padding-top: calc(var(--sp-64) + var(--sp-4)); }
.hp-chips { display: flex; flex-wrap: wrap; gap: var(--space-tight); }
.hp-chip-count { font-weight: var(--weight-regular); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ui-chip[aria-pressed="true"] .hp-chip-count { color: inherit; }
.hp-chips > .ui-chip:disabled { cursor: wait; }
.hp-map-open { margin-top: var(--space-group); }
.hp-map-open a { display: inline-flex; align-items: center; min-height: var(--size-target); font: var(--type-control); }

/* ---- 4. What's new: two lists in the row anatomy the app uses. */
.hp-latest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-group) var(--space-section); }
.hp-feed { min-width: 0; }
.hp-rows { border-bottom: var(--border-hairline) solid var(--divider-subtle); }
.hp-row { padding-block: var(--space-heading); border-top: var(--border-hairline) solid var(--divider-subtle); }
.hp-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-line) var(--space-tight); font: var(--type-metadata); color: var(--ink-soft); }
.hp-page :where(main) .hp-row-title { font: var(--type-subheading); margin-top: var(--space-line); }
.hp-row-title a, .hp-row-name a { color: var(--ink); text-decoration: none; }
.hp-row-title a:hover, .hp-row-name a:hover { color: var(--bronze-ink); text-decoration: underline; }
.hp-row-detail { margin-top: var(--space-line); font: var(--type-metadata); color: var(--ink-soft); }
.hp-row-detail :is(a, span) { white-space: nowrap; }
.hp-person-row { display: grid; grid-template-columns: var(--size-portrait-row) minmax(0, 1fr); gap: var(--space-heading); align-items: start; }
.hp-portrait {
  display: block; width: var(--size-portrait-row); height: var(--size-portrait-row); border-radius: var(--radius-round);
  object-fit: cover; background: var(--paper-sunken); box-shadow: var(--ring-inset-hairline) var(--divider-subtle);
}
.hp-row-body { min-width: 0; }
.hp-row-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-line) var(--space-tight); }
.hp-page :where(main) .hp-row-name { font: var(--type-strong); }
.hp-row-text {
  margin-top: var(--space-line); font: var(--type-body); font-size: var(--text-15);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}

/* ---- 5. Reports: one card each, the whole card a link. */
.hp-report-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-block); }
.hp-report {
  position: relative; padding: var(--space-block);
  border: var(--border-hairline) solid var(--divider-subtle); border-radius: var(--radius-md); background: var(--paper-raised);
  transition: border-color var(--duration-quick) var(--ease-standard);
}
.hp-report:hover { border-color: var(--line-control); }
.hp-page :where(main) .hp-report h3 { font: var(--type-subheading); }
.hp-report h3 a { color: var(--ink); text-decoration: none; }
.hp-report h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.hp-report:hover h3 a { color: var(--bronze-ink); text-decoration: underline; }
.hp-report p { margin-top: var(--space-line); font: var(--type-metadata); color: var(--ink-soft); }
.hp-report:has(a:focus-visible) { outline: var(--border-focus) solid var(--bronze-ink); outline-offset: 3px; }
.hp-report h3 a:focus-visible { outline: none; }

/* ---- Widths. */
@media (min-width: 801px) {
  .hp-research { padding-block: var(--sp-64) var(--space-section); }
  .hp-research-main { padding-top: var(--space-heading); }
}
@media (max-width: 1100px) {
  .hp-browse-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hp-map { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "side" "foot"; }
  .hp-map-side { padding-top: 0; }
  .hp-report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .hp-research { grid-template-columns: minmax(0, 1fr); gap: var(--space-group); padding-block: var(--space-group) var(--space-section); }
  .hp-latest { grid-template-columns: minmax(0, 1fr); gap: var(--space-section); }
}
@media (max-width: 600px) {
  .hp-query-row { flex-direction: column; }
  .hp-query-row > .ui-button { width: 100%; }
  .hp-browse-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hp-browse-list li + li { border-top: var(--border-hairline) solid var(--divider-subtle); }
  .hp-browse-list a { padding-block: var(--space-row); }
  .hp-money-map { height: 350px; }
  .hp-report-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1000px), (pointer: coarse) {
  .hp-examples a, .hp-head > a, .hp-row-detail a { display: inline-flex; align-items: center; min-height: var(--size-target); }
  .hp-examples { gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-report { transition: none; }
}
/* Forced colours: the cards and the blank portrait keep an edge of their own. */
@media (forced-colors: active) {
  .hp-report, .hp-money-map { border-color: CanvasText; }
  .hp-section[data-accent]::before { background: CanvasText; }
  .hp-portrait { border: var(--border-hairline) solid CanvasText; }
}