/* ============================================================================
   hub · the Longevity Hub

   Sections, at 1440:
     1  an inset dark hero card (20px inset, r16), eyebrow, headline, lede and
        a frosted search field in one centred column
     3  the cornerstone guide: words left, a 16:10 photograph right that runs
        to the window's edge
     4  heading left and line right, then six photo cards with a glass panel
        at the foot (category tag first), three over three
     5  latest: a 3 by 2 grid of reading cards, photograph, tag, title, line
     6  a dark block: the podcast photo card with its copy, three link cards
     7  the newsletter: one pale panel, heading, line and an email pill
   Each category has one colour (--hb-cat).
   Grounds are Phenome's white and #f4f6fb, dark blocks the site's night
   navy. Type is the site kit's one family: statements long
   enough to break are the two tone .ph-display, short ones .ph-solid. No text
   under 15px. Copy rule: no dashes, no all caps.
   Scoped to `.hb` on <body>; motion that hides is keyed to `.hb-js`.
   ========================================================================== */

.hb {
  --hb-paper: #fff;
  --hb-card: var(--gl-tint-sunk, #f4f6fb);
  --hb-card-hi: #e9eef8;
  --hb-ink: #0a1233;
  --hb-night: #0b1024;
  --hb-night-2: #141b36;
  --hb-grey: #5f6680;
  --hb-line: rgba(10, 18, 51, .12);
  --hb-ease: cubic-bezier(.16, 1, .3, 1);
  --hb-gut: clamp(20px, 4.4vw, 64px);
  --hb-max: 1440px;
  background: var(--hb-paper);
  color: var(--hb-ink);
}
.hb main { overflow-x: clip; }
.hb .hb-wrap { max-width: var(--hb-max); margin: 0 auto; padding: 0 var(--hb-gut); box-sizing: border-box; }
.hb .hb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hb .hb-center { text-align: center; }

/* shared.js fades every section's children in on its own; this page stages
   its own reveals, so the site wide one is switched off here (0,3,3 beats the
   kit's 0,2,3). */
html.ph-reveal body.hb main > section.ph-r > * { opacity: 1; transform: none; transition: none; }

.hb .ph-solid { margin: 0; font-size: clamp(34px, 4.7vw, 68px); line-height: 1.04; }
.hb .hb-eyebrow { margin: 0 0 14px; font-size: 16px; line-height: 24px; font-weight: 700; letter-spacing: .01em; }
.hb .hb-lede { margin: 0; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--hb-grey); }

.hb .hb-pill {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 24px; border-radius: 99px; border: 0; cursor: pointer;
  font-size: 16px; font-weight: 500; text-decoration: none !important;
  background: var(--hb-ink); color: #fff !important;
  transition: background .25s ease, transform .35s var(--hb-ease);
}
.hb .hb-pill:hover { background: var(--ph-accent, #203a85); }
.hb .hb-pill:active { transform: scale(.97); }
.hb .hb-pill.is-light { background: #fff; color: var(--hb-ink) !important; }
.hb .hb-pill.is-light:hover { background: #e3e9f7; }

/* the round arrow in the corner of every card, drawn in CSS so one rule
   serves every card */
.hb .hb-arrow {
  position: relative; display: block; width: 45px; height: 45px; border-radius: 50%;
  background: var(--hb-ink); flex: none;
  transition: transform .45s var(--hb-ease), background .25s ease;
}
.hb .hb-arrow::before {
  content: ''; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 10.5l7-7M4.5 3.5h6v6' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 10.5l7-7M4.5 3.5h6v6' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.hb-js .hb .hb-up { opacity: 0; transform: translateY(32px); transition: opacity .9s ease, transform 1.1s var(--hb-ease); }
.hb-js .hb .hb-up.is-in { opacity: 1; transform: none; }
.hb-js .hb .hb-up.d1 { transition-delay: .08s; }
.hb-js .hb .hb-up.d2 { transition-delay: .16s; }
.hb-js .hb .hb-up.d3 { transition-delay: .24s; }

/* ---------------------------------------------------------------------------
   1 · HERO · an inset card: 20px from the viewport edge, r16, the full
   screen tall, headline in the upper half and lede plus pill at the foot
   ------------------------------------------------------------------------ */
.hb .hb-hero { padding: clamp(8px, 1.4vw, 20px) clamp(8px, 1.4vw, 20px) 0; }
.hb .hb-hero-card {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: clamp(600px, calc(100svh - 16px), 900px);
  border-radius: clamp(14px, 1.2vw, 18px); background: var(--hb-night); color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
}
.hb .hb-hero-img { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hb .hb-hero-img img {
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; display: block;
  transform: scale(calc(1.08 - var(--hero-p, 0) * .08)); transform-origin: 70% 50%;
}
.hb .hb-hero-shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at 18% 40%, rgba(11, 16, 36, .92) 0%, rgba(11, 16, 36, .7) 38%, rgba(11, 16, 36, .12) 72%),
    linear-gradient(180deg, rgba(11, 16, 36, .35) 0%, transparent 30%, transparent 62%, rgba(11, 16, 36, .7) 100%);
}
.hb .hb-hero-top { padding: clamp(150px, 29vh, 270px) clamp(22px, 4.4vw, 64px) 0; max-width: 820px; }
.hb .hb-hero .ph-display.is-hero { margin: 0; font-size: clamp(40px, 5.6vw, 80px); line-height: 1.02; }
.hb .hb-hero .ph-display-lead { color: rgba(255, 255, 255, .6); }
.hb .hb-hero-foot { padding: 40px clamp(22px, 4.4vw, 64px) clamp(28px, 4.4vw, 64px); }
.hb .hb-hero-foot p { margin: 0 0 28px; max-width: 30em; font-size: 18px; line-height: 1.5; color: rgba(255, 255, 255, .9); }

/* Centred: eyebrow, headline, lede and the field stand in
   one column in the middle of the card, and the shade darkens from the
   middle out so the words sit on the darkest part of the photograph. */
.hb .hb-hero-card { justify-content: center; align-items: center; text-align: center; }
.hb .hb-hero-top { padding: clamp(96px, 14vh, 140px) clamp(22px, 4.4vw, 64px) 0; max-width: 900px; margin: 0 auto; }
.hb .hb-hero .ph-display.is-hero { text-align: center; align-items: center; }
.hb .hb-hero-foot { display: flex; flex-direction: column; align-items: center; padding-top: 28px; }
.hb .hb-hero-foot p { margin-left: auto; margin-right: auto; }
/* The field sits further under the lede. */
.hb .hb-hero-foot p { margin-bottom: 76px; }
/* …and lower again on its own, the words above staying put. */
.hb .hb-hero-foot .hb-find { top: 44px; }
.hb .hb-hero-shade {
  background:
    radial-gradient(70% 62% at 50% 52%, rgba(11, 16, 36, .82) 0%, rgba(11, 16, 36, .58) 50%, rgba(11, 16, 36, .28) 100%),
    linear-gradient(180deg, rgba(11, 16, 36, .35) 0%, transparent 30%, transparent 70%, rgba(11, 16, 36, .5) 100%);
}

/* The search field: a frosted pill on the photograph with its own Search
   button inside the right end; the newsletter's field is the same pill in
   light (.is-light). */
.hb .hb-find {
  position: relative; display: flex; align-items: center; gap: 8px;
  width: min(100%, 600px); height: 60px; padding: 6px 6px 6px 54px; box-sizing: border-box;
  border-radius: 99px;
  background: rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26);
  transition: box-shadow .25s ease, background .25s ease;
}
.hb .hb-find:focus-within { background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 0 0 4px rgba(255, 255, 255, .12); }
.hb .hb-find-ic {
  position: absolute; left: 22px; top: 50%; width: 20px; height: 20px; margin-top: -10px;
  fill: none; stroke: rgba(255, 255, 255, .8); stroke-width: 1.7; stroke-linecap: round;
}
.hb .hb-find input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 16px; color: #fff; -webkit-appearance: none; appearance: none;
}
.hb .hb-find input::placeholder { color: rgba(255, 255, 255, .72); opacity: 1; }
.hb .hb-find input::-webkit-search-cancel-button { display: none; }
.hb .hb-find button {
  flex: none; height: 48px; padding: 0 26px; border: 0; border-radius: 99px; cursor: pointer;
  font: inherit; font-size: 16px; font-weight: 600;
  background: #fff; color: var(--hb-ink);
  transition: background .25s ease, color .25s ease, transform .3s var(--hb-ease);
}
.hb .hb-find button:hover { background: #e3e9f7; }
.hb .hb-find button:active { transform: scale(.97); }
.hb .hb-find.is-light { padding-left: 24px; background: #fff; box-shadow: inset 0 0 0 1px var(--hb-line); }
.hb .hb-find.is-light:focus-within { box-shadow: inset 0 0 0 1.5px var(--ph-accent, #203a85), 0 0 0 4px rgba(32, 58, 133, .1); }
.hb .hb-find.is-light input { color: var(--hb-ink); }
.hb .hb-find.is-light input::placeholder { color: var(--hb-grey); }
.hb .hb-find.is-light button { background: var(--hb-ink); color: #fff; }
.hb .hb-find.is-light button:hover { background: var(--ph-accent, #203a85); }
.hb .hb-find.is-done button { background: var(--hb-cat-done, #12876b); }
@media (max-width: 560px) {
  .hb .hb-find { height: 54px; padding-left: 46px; }
  .hb .hb-find-ic { left: 18px; }
  .hb .hb-find button { height: 42px; padding: 0 18px; }
  .hb .hb-find input { font-size: 15px; }
}
.hb-js .hb .hb-hero-card { animation: hb-card 1.2s var(--hb-ease) both; }
.hb-js .hb .hb-hero-top > *, .hb-js .hb .hb-hero-foot > * { animation: hb-rise 1s var(--hb-ease) both; }
.hb-js .hb .hb-hero-top > :nth-child(2) { animation-delay: .1s; }
.hb-js .hb .hb-hero-foot > :nth-child(1) { animation-delay: .22s; }
.hb-js .hb .hb-hero-foot > :nth-child(2) { animation-delay: .3s; }
@keyframes hb-card { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
/* The headline is one size, both lines white, and the words sit higher in
   the card (more room under them than above). */
.hb .hb-hero .ph-display.is-hero .ph-display-lead { font-size: 1em; line-height: inherit; color: #fff; }
.hb .hb-hero-top { padding-top: 0; }
.hb .hb-hero-card { padding-bottom: clamp(120px, 20vh, 220px); }

@keyframes hb-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  .hb .hb-hero-shade { background: linear-gradient(180deg, rgba(11, 16, 36, .7), rgba(11, 16, 36, .62) 50%, rgba(11, 16, 36, .8)); }
  .hb .hb-hero-top { padding-top: 110px; }
}

/* ---------------------------------------------------------------------------
   3 · CORNERSTONE · words left, a photograph right (the app page's privacy
   block): label, two tone headline, paragraph and pill in
   the narrower column; the photograph at 16:10 runs to the window's right
   edge, rounded on its left side only, and drifts against the scroll.
   ------------------------------------------------------------------------ */
.hb .hb-corner {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(30px, 4vw, 60px); align-items: center;
  padding: clamp(88px, 8vw, 128px) 0 clamp(40px, 4vw, 64px) max(var(--hb-gut), calc((100vw - var(--hb-max)) / 2 + var(--hb-gut)));
  scroll-margin-top: 60px;
}
.hb .hb-corner-k { margin: 0 0 16px; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--ph-accent, #203a85); }
.hb .hb-corner .ph-display { margin: 0; font-size: clamp(34px, 3.8vw, 56px); line-height: 1.04; scroll-margin-top: 120px; }
.hb .hb-corner-d { margin: 18px 0 28px; max-width: 42ch; font-size: 17px; line-height: 1.55; color: var(--hb-grey); }
.hb .hb-corner-img { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px 0 0 12px; background: var(--hb-card); }
.hb .hb-corner-img img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; display: block;
  transform: translateY(calc((var(--corner-p, .5) - .5) * -40px)) scale(1.08);
}
@media (max-width: 860px) {
  .hb .hb-corner { grid-template-columns: minmax(0, 1fr); padding-right: var(--hb-gut); }
  .hb .hb-corner-img { border-radius: 12px; }
}

/* ---------------------------------------------------------------------------
   4 · GUIDES · tall photograph cards with a glass panel inset at the foot, on
   a rail with a progress line that fills as the rail moves, and two round
   arrows under its right end.
   ------------------------------------------------------------------------ */
.hb .hb-guides { padding: clamp(96px, 9vw, 128px) 0 clamp(80px, 7vw, 112px); }
.hb .hb-split-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: 32px 64px; align-items: start;
  margin-bottom: clamp(40px, 4.4vw, 64px);
}
.hb .hb-split-head .hb-lede { padding-top: 10px; }
.hb .hb-car { position: relative; }
.hb .hb-car-track {
  --hb-cols: 3;
  display: flex; gap: 24px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 0 max(var(--hb-gut), calc((100% - var(--hb-max)) / 2 + var(--hb-gut)));
  scroll-padding-inline: max(var(--hb-gut), calc((100% - var(--hb-max)) / 2 + var(--hb-gut)));
  outline: none;
}
.hb .hb-car-track::-webkit-scrollbar { display: none; }
.hb .hb-car-track.is-drag { scroll-snap-type: none; cursor: grabbing; }
.hb .hb-car-track.is-drag * { pointer-events: none; }
.hb .hb-guide {
  position: relative; flex: none; overflow: hidden; isolation: isolate;
  width: calc((min(100vw, var(--hb-max)) - 2 * var(--hb-gut) - (var(--hb-cols) - 1) * 24px) / var(--hb-cols));
  aspect-ratio: 416 / 700; border-radius: 12px; background: var(--hb-night);
  scroll-snap-align: start; color: #fff; scroll-margin-top: 120px;
}
.hb .hb-guide > img {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.2s var(--hb-ease);
}
.hb .hb-guide::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgba(11, 16, 36, .45));
}
.hb .hb-guide:hover > img { transform: scale(1.04); }
.hb .hb-guide-glass {
  position: absolute; left: 10%; right: 10%; bottom: 0;
  padding: 18px 18px 22px; border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, rgba(20, 30, 70, .42), rgba(11, 16, 36, .62));
  -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}
.hb .hb-guide-t { margin: 12px 0 0; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .28); font-size: clamp(20px, 1.7vw, 24px); line-height: 1.25; font-weight: 500; letter-spacing: -0.01em; }

/* A category tag, the name alone (no dot). On glass it
   sits in a frosted capsule; in the light reading cards (.is-plain) the name
   is set in the category's colour (--hb-cat, set on the card). */
.hb .hb-tag {
  display: inline-flex; align-items: center; margin: 0;
  padding: 5px 12px; border-radius: 99px;
  background: rgba(255, 255, 255, .16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
  font-size: 15px; line-height: 20px; font-weight: 600; color: #fff;
}
.hb .hb-tag.is-plain { padding: 0; background: none; box-shadow: none; color: var(--hb-ink); }
.hb .hb-guide-d { margin: 14px 0 16px; font-size: 16px; line-height: 1.45; color: rgba(255, 255, 255, .92); }
.hb .hb-guide-go {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 600; color: #fff !important; text-decoration: none !important;
}
.hb .hb-guide-go i {
  width: 16px; height: 16px; background: currentColor; transition: transform .45s var(--hb-ease);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M8.5 3.5 13 8l-4.5 4.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M8.5 3.5 13 8l-4.5 4.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hb .hb-guide-go:hover i { transform: translateX(4px); }
.hb .hb-guide.is-flash { animation: hb-flash 1.4s var(--hb-ease); }
@keyframes hb-flash { 0%, 100% { box-shadow: 0 0 0 0 rgba(32, 58, 133, 0); } 30% { box-shadow: 0 0 0 4px rgba(32, 58, 133, .9); } }

.hb .hb-car-foot { margin-top: 32px; }
.hb .hb-car-line { position: relative; height: 1px; background: var(--hb-line); overflow: hidden; }
.hb .hb-car-line i {
  position: absolute; left: 0; top: 0; height: 100%; width: calc(var(--bar-w, .5) * 100%);
  background: var(--hb-ink); transform: translateX(calc(var(--bar-x, 0) * 100%));
  transition: transform .3s linear;
}
.hb .hb-car-nav { display: flex; justify-content: flex-end; gap: 16px; margin-top: 16px; }
.hb .hb-round {
  display: grid; place-items: center; width: 53px; height: 53px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--hb-ink); color: #fff; transition: background .25s ease, opacity .25s ease, transform .3s var(--hb-ease);
}
.hb .hb-round:hover { background: var(--ph-accent, #203a85); }
.hb .hb-round:active { transform: scale(.94); }
.hb .hb-round:disabled { opacity: .18; cursor: default; background: var(--hb-ink); }
.hb .hb-round svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1024px) { .hb .hb-car-track { --hb-cols: 2; } }
@media (max-width: 640px) {
  .hb .hb-car-track { --hb-cols: 1.15; gap: 12px; }
  .hb .hb-split-head { grid-template-columns: 1fr; }
  .hb .hb-guide { aspect-ratio: 4 / 5.6; }
  .hb .hb-guide-glass { left: 6%; right: 6%; }
}

/* ---------------------------------------------------------------------------
   4b · GUIDES AS A GRID: the six photo cards stand three
   over three, no rail, no arrows. The card keeps its photograph and glass
   panel; it is shorter than on the rail so two rows fit a screen and a half.
   ------------------------------------------------------------------------ */
.hb .hb-guides .hb-wrap + .hb-wrap { margin-top: 0; }
.hb .hb-guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.hb .hb-guide-grid .hb-guide { width: auto; aspect-ratio: 4 / 5; }
.hb .hb-guide-grid .hb-guide-glass { left: 7%; right: 7%; }
@media (max-width: 1024px) { .hb .hb-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .hb .hb-guide-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .hb .hb-guide-grid .hb-guide { aspect-ratio: 4 / 5; }
}

/* ---------------------------------------------------------------------------
   5 · LATEST · the heading over a 3 by 2 grid of reading cards: a rounded
   photograph, the category tag in its colour, the title and one line.
   ------------------------------------------------------------------------ */
/* Browse by category: the hub search page's
   filter pills (hub/search/sr.css .sr-filters .tag) in a row, each opening
   the search on its topic. */
.hb .hb-topics { padding: 0 0 clamp(56px, 5vw, 80px); }
.hb .hb-topics .ph-solid { font-size: clamp(30px, 3vw, 44px); }
.hb .hb-topic-list { display: flex; flex-wrap: wrap; gap: 10px; margin: clamp(22px, 2.4vw, 32px) 0 0; padding: 0; list-style: none; }
.hb .hb-topic-list .tag {
  height: 44px; margin: 0; padding: 0 20px; border-radius: 99px; border: 1px solid var(--hb-line);
  background: #fff; color: var(--hb-ink); font-size: 16px; font-weight: 600; text-decoration: none;
  transition: background .25s, color .25s, border-color .25s;
}
.hb .hb-topic-list .tag:hover { background: var(--hb-ink); border-color: var(--hb-ink); color: #fff; }
.hb .hb-topic-list .tag:focus-visible { outline: 2px solid var(--ph-accent, #203a85); outline-offset: 3px; }
.hb .hb-latest { padding: clamp(24px, 3vw, 40px) 0 clamp(96px, 9vw, 128px); }
.hb .hb-latest .ph-solid { font-size: clamp(30px, 3vw, 44px); }
.hb .hb-reads {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(36px, 3.4vw, 48px) 24px;
  margin-top: clamp(28px, 3vw, 40px);
}
.hb .hb-read {
  display: flex; flex-direction: column; align-items: flex-start;
  color: var(--hb-ink) !important; text-decoration: none !important;
}
.hb .hb-read-img {
  position: relative; display: block; width: 100%; aspect-ratio: 3 / 2; overflow: hidden;
  margin-bottom: 18px; border-radius: 16px; background: var(--hb-card);
}
.hb .hb-read-img::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(10, 18, 51, .06);
}
.hb .hb-read-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--hb-ease); }
.hb .hb-read h3 { margin: 10px 0 0; font-size: clamp(19px, 1.5vw, 21px); line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; transition: color .25s ease; }
.hb .hb-read-d { margin: 8px 0 0; font-size: 16px; line-height: 1.5; color: var(--hb-grey); }
.hb .hb-read:hover .hb-read-img img { transform: scale(1.05); }
.hb .hb-read:hover h3 { color: var(--ph-accent, #203a85); }
@media (max-width: 1024px) { .hb .hb-reads { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .hb .hb-reads { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
   6 · PODCAST · a dark block, the heading on its
   own line, one photo card with a chip and its title over the picture, and a
   column of pale link cards sharing its height
   ------------------------------------------------------------------------ */
.hb .hb-pod { padding: clamp(80px, 7vw, 96px) 0 clamp(80px, 7vw, 112px); background: var(--hb-night); color: #fff; }
.hb .hb-pod-grid {
  display: grid; grid-template-columns: minmax(0, 1.63fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 60px);
}
.hb a.hb-feat { color: #fff !important; text-decoration: none !important; }
/* A round play mark in the photograph's top right (clear of the lamp on the
   left), the play button the design draws on its cover. */
.hb .hb-feat-play {
  position: absolute; right: 32px; top: 32px; width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
  transition: transform .45s var(--hb-ease), background .25s ease;
}
.hb .hb-feat-play::before {
  content: ''; position: absolute; left: 26px; top: 21px;
  border-style: solid; border-width: 11px 0 11px 17px; border-color: transparent transparent transparent #fff;
}
.hb a.hb-feat:hover .hb-feat-play { transform: scale(1.08); background: rgba(255, 255, 255, .26); }
.hb .hb-feat-k { margin: 0 0 12px !important; font-size: 16px !important; line-height: 24px; font-weight: 600; color: #99b2ff !important; }
.hb .hb-feat-copy h2 { margin: 0; max-width: 16em; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.15; font-weight: 500; letter-spacing: -0.02em; color: #fff; }
.hb .hb-feat {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 8px;
  min-height: 560px; display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--hb-night-2);
}
.hb .hb-feat > img {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block;
  transition: transform 1.4s var(--hb-ease);
}
.hb .hb-feat:hover > img { transform: scale(1.03); }
.hb .hb-feat::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(11, 16, 36, .1) 30%, rgba(11, 16, 36, .72) 72%, rgba(11, 16, 36, .92));
}
.hb .hb-chip {
  position: absolute; left: 32px; top: 32px;
  padding: 6px 14px; border-radius: 6px; background: #fff; color: var(--hb-ink);
  font-size: 15px; line-height: 22px; font-weight: 600;
}
.hb .hb-feat-copy { padding: 32px; }
.hb .hb-feat-copy h3 { margin: 0; max-width: 18em; font-size: clamp(26px, 2.5vw, 36px); line-height: 1.2; font-weight: 500; letter-spacing: -0.015em; }
.hb .hb-feat-copy p { margin: 16px 0 0; max-width: 36em; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, .82); }
.hb .hb-pod-links { display: flex; flex-direction: column; gap: 24px; }
/* Each link card is a photograph of somewhere people listen (a run, a ride, a
   table), the platform name over a navy shade at the top, a white arrow at
   the foot. */
.hb .hb-plink {
  position: relative; overflow: hidden; isolation: isolate;
  flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  min-height: 150px; padding: 24px; box-sizing: border-box; border-radius: 8px;
  background: var(--hb-night-2); color: #fff !important; text-decoration: none !important;
}
.hb .hb-plink > img {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.2s var(--hb-ease);
}
.hb .hb-plink::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 16, 36, .66), rgba(11, 16, 36, .14) 58%, rgba(11, 16, 36, .3));
}
.hb .hb-plink b { font-size: clamp(22px, 1.8vw, 26px); line-height: 1.2; font-weight: 500; letter-spacing: -0.01em; }
.hb .hb-plink .hb-arrow { align-self: flex-end; background: #fff; }
.hb .hb-plink .hb-arrow::before { background: var(--hb-ink); }
.hb .hb-plink:hover > img { transform: scale(1.05); }
.hb .hb-plink:hover .hb-arrow { transform: rotate(45deg); background: var(--ph-accent, #203a85); }
.hb .hb-plink:hover .hb-arrow::before { background: #fff; }
@media (max-width: 900px) {
  .hb .hb-pod-grid { grid-template-columns: 1fr; gap: 16px; }
  .hb .hb-feat { min-height: 460px; }
  .hb .hb-pod-links { gap: 12px; }
  .hb .hb-plink { min-height: 132px; flex-direction: row; align-items: flex-end; }
  .hb .hb-plink::after { background: linear-gradient(90deg, rgba(11, 16, 36, .7), rgba(11, 16, 36, .15) 70%); }
  .hb .hb-plink .hb-arrow { align-self: flex-end; }
  .hb .hb-chip { left: 20px; top: 20px; }
  .hb .hb-feat-copy { padding: 22px; }
}

/* ---------------------------------------------------------------------------
   7 · NEWSLETTER · one pale panel, the heading, its line and the email pill
   centred in it.
   ------------------------------------------------------------------------ */
/* The newsletter is the account page's closing card (kit/rf.css .rf-end):
   the aurora film under a navy wash, white words in the
   middle, and the field as the hero's frosted pill without the search icon. */
.hb .hb-news { padding: clamp(72px, 7vw, 112px) 0 clamp(72px, 7vw, 112px); }
.hb .hb-news-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(56px, 7vw, 110px) clamp(28px, 8vw, 150px); border-radius: 32px;
  background: var(--hb-night); color: #fff;
}
.hb .hb-news-film { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.hb .hb-news-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 140% at 12% 50%, rgba(29, 61, 152, .55) 0%, rgba(10, 30, 87, .62) 60%, rgba(7, 22, 65, .78) 100%);
}
.hb .hb-news .ph-solid { color: #fff; font-size: clamp(36px, 4vw, 60px); text-wrap: balance; }
.hb .hb-news .hb-lede { margin: 18px 0 32px; max-width: 34em; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.45; color: rgba(255, 255, 255, .86); }
.hb .hb-news .hb-find { width: min(100%, 520px); padding-left: 24px; }
@media (prefers-reduced-motion: reduce) {
  .hb .hb-news-film { display: none; }
  .hb .hb-news-card { background: var(--hb-night) url("/site/assets/video/hero-aurora.webp") center / cover; }
}

@media (prefers-reduced-motion: reduce) {
  .hb .hb-hero-img img, .hb .hb-corner-img img { transform: none; }
  .hb-js .hb .hb-hero-card, .hb-js .hb .hb-hero-top > *, .hb-js .hb .hb-hero-foot > * { animation: none; }
}