:root {
  --connect-navy: #17324d;
  --connect-ink: #405b70;
  --connect-muted: #587187;
  --connect-sky: #62b5d9;
  --connect-sky-dark: #23799f;
  --connect-green: #65ae91;
  --connect-line: #cbdde5;
  --connect-ice: #eef7fa;
}

.connect-body,
.connect-body * { box-sizing: border-box; }
.connect-body { overflow-x: clip; background: #fff; color: var(--connect-navy); }
.connect-body main { overflow: hidden; }
.connect-shell { width: min(1180px, calc(100% - 56px)); margin: 0 auto; }
.connect-skip-link { position: fixed; z-index: 2000; top: 8px; left: 8px; padding: 10px 14px; transform: translateY(-150%); border-radius: 8px; background: var(--connect-navy); color: #fff; }
.connect-skip-link:focus { transform: translateY(0); }

.connect-hero { padding: clamp(82px, 9vw, 132px) 0 clamp(74px, 8vw, 112px); background: radial-gradient(circle at 84% 16%, rgba(98,181,217,.2), transparent 32%), linear-gradient(180deg,#f8fbfd,#fff); }
.connect-hero__inner { display: grid; grid-template-columns:minmax(0,1fr) minmax(390px,.95fr); column-gap: clamp(56px,9vw,130px); }
.connect-hero__eyebrow { grid-column: 1; margin: 0 0 18px; color: var(--connect-sky-dark); font-size: 13px; font-weight: 700; letter-spacing: .15em; }
.connect-hero h1 { grid-column: 1; margin: 0; color: var(--connect-navy); font-family: "Shippori Mincho", serif; font-size: clamp(48px, 6vw, 76px); font-weight: 500; letter-spacing: .035em; line-height: 1.35; }
.connect-hero__lead { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin: 0 0 24px; color: var(--connect-navy); font-family: "Shippori Mincho", serif; font-size: clamp(22px,2.4vw,31px); line-height: 1.75; }
.connect-hero__text { grid-column: 2; margin: 0 0 48px; color: var(--connect-muted); font-size: 16px; line-height: 2; }
.connect-path { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,1fr); gap: 0; margin: 22px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--connect-line); }
.connect-path li { position: relative; display: grid; grid-template-columns: 44px 1fr; padding: 27px clamp(12px,3vw,34px) 0 0; }
.connect-path li::before { position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--connect-sky); content: ""; }
.connect-path li:nth-child(2)::before { background: #8bc7b0; }
.connect-path li:nth-child(3)::before { background: #e4b477; }
.connect-path span { grid-row: 1 / span 2; color: var(--connect-sky-dark); font-size: 12px; letter-spacing: .1em; }
.connect-path strong { font-family: "Shippori Mincho", serif; font-size: 24px; font-weight: 600; }
.connect-path small { color: var(--connect-muted); font-size: 12px; }

.connect-section { padding: clamp(82px,9vw,130px) 0; }
.connect-split { display: grid; grid-template-columns: minmax(280px,.8fr) minmax(0,1.2fr); gap: clamp(56px,9vw,120px); align-items: start; }
.connect-intro { max-width: 470px; }
.connect-label { margin: 0 0 18px; color: var(--connect-sky-dark); font-size: 12px; font-weight: 700; letter-spacing: .16em; }
.connect-intro h2,.connect-join h2,.connect-closing h2 { margin: 0 0 28px; color: var(--connect-navy); font-family: "Shippori Mincho", serif; font-size: clamp(36px,4.2vw,56px); font-weight: 500; line-height: 1.5; }
.connect-intro>p:not(.connect-label),.connect-join__body>p { color: var(--connect-muted); font-size: 16px; line-height: 2; }
.connect-link,.connect-text-link { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; padding-bottom: 5px; border-bottom: 1px solid var(--connect-sky); color: var(--connect-navy); font-size: 14px; font-weight: 700; }
.connect-external-note { color: var(--connect-muted); font-size: 10px; font-weight: 500; }
.connect-picks { border-top: 1px solid var(--connect-line); }
.connect-picks__label { margin: 0; padding: 0 0 16px; transform: translateY(-100%); color: var(--connect-muted); font-size: 12px; letter-spacing: .1em; }
.connect-pick { display: grid; grid-template-columns: 48px 1fr auto; gap: 20px; align-items: center; padding: 28px 4px; border-bottom: 1px solid var(--connect-line); color: var(--connect-navy); text-decoration: none; }
.connect-pick>span { color: var(--connect-sky-dark); font-size: 12px; }
.connect-pick strong { font-family: "Shippori Mincho", serif; font-size: clamp(18px,2vw,24px); line-height: 1.65; }
.connect-pick small { color: var(--connect-muted); font-size: 11px; white-space: nowrap; }

.connect-section--listen { background: linear-gradient(145deg,#142d44,#20516c); color: #fff; }
.connect-intro--light { max-width: 740px; }
.connect-intro--light .connect-label { color: #9ed9c0; }
.connect-intro--light h2 { color: #fff; }
.connect-intro--light>p:not(.connect-label) { color: #dce9f0; }
.connect-episodes { margin-top: 54px; border-top: 1px solid rgba(255,255,255,.24); }
.connect-episode { display: grid; grid-template-columns: 80px 1fr 210px; gap: 24px; align-items: center; padding: 25px 4px; border-bottom: 1px solid rgba(255,255,255,.2); color: #fff; text-decoration: none; }
.connect-episode>span { color: #9ed9c0; font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.connect-episode strong { font-family: "Shippori Mincho", serif; font-size: clamp(17px,1.7vw,22px); font-weight: 500; line-height: 1.6; }
.connect-episode small { color: #bcd0da; font-size: 11px; text-align: right; }
.connect-listen-actions { display: flex; align-items: center; gap: 28px; margin-top: 36px; }
.connect-button { display: inline-flex; min-height: 52px; align-items: center; gap: 14px; padding: 13px 22px; border-radius: 12px; background: var(--connect-sky-dark); color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 12px 25px rgba(23,50,77,.18); }
.connect-button span { font-size: 10px; font-weight: 500; opacity: .72; }
.connect-button--light { background: #fff; color: var(--connect-navy); }
.connect-section--listen .connect-text-link { margin-top: 0; border-color: rgba(255,255,255,.4); color: #dce9f0; }
.connect-section--listen a:focus-visible { outline-color: #fff; }

.connect-section--join { background: radial-gradient(circle at 15% 88%,rgba(98,181,217,.15),transparent 28%),#f7fafc; }
.connect-join { display: grid; grid-template-columns: minmax(280px,.8fr) minmax(0,1.2fr); gap: clamp(50px,9vw,120px); }
.connect-join h2 { font-size: clamp(36px,3.4vw,46px); }
.connect-join__body { padding-left: clamp(24px,5vw,64px); border-left: 1px solid var(--connect-line); }
.connect-join__body .connect-join__lead { color: var(--connect-navy); font-family: "Shippori Mincho", serif; font-size: clamp(20px,2.2vw,27px); line-height: 1.8; }
.connect-join__body ul { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 30px 0; padding: 0; list-style: none; color: var(--connect-navy); font-size: 14px; font-weight: 700; }
.connect-join__body li::before { display: inline-block; width: 7px; height: 7px; margin: 0 9px 1px 0; border-radius: 50%; background: var(--connect-green); content: ""; }
.connect-join__body small { display: block; margin-top: 13px; color: var(--connect-muted); font-size: 11px; }
.connect-closing { padding: clamp(68px,7vw,96px) 0; text-align: center; }
.connect-closing p { margin: 0 0 14px; color: var(--connect-sky-dark); font-size: 11px; font-weight: 700; letter-spacing: .16em; }
.connect-closing h2 { margin-bottom: 24px; font-size: clamp(30px,3.8vw,46px); }
.connect-closing a { color: var(--connect-sky-dark); font-size: 14px; font-weight: 700; }

.connect-body a:focus-visible { outline: 3px solid var(--connect-sky-dark); outline-offset: 4px; }
.connect-pick:hover,.connect-episode:hover { padding-right: 14px; padding-left: 14px; opacity: 1; }

@media (max-width: 800px) {
  .connect-shell { width: min(100% - 40px,1180px); }
  .connect-hero { padding-top: 64px; }
  .connect-hero__inner,.connect-split,.connect-join { grid-template-columns: 1fr; }
  .connect-hero__eyebrow,.connect-hero h1,.connect-hero__lead,.connect-hero__text { grid-column: 1; grid-row: auto; }
  .connect-hero__lead { margin-top: 32px; }
  .connect-path { grid-template-columns: 1fr; border-top: 0; border-left: 1px solid var(--connect-line); }
  .connect-path li { padding: 0 0 28px 28px; }
  .connect-path li::before { top: 9px; left: -5px; }
  .connect-intro { max-width: none; }
  .connect-picks { margin-top: 58px; }
  .connect-pick { grid-template-columns: 38px 1fr; gap: 12px; }
  .connect-pick small { grid-column: 2; white-space: normal; }
  .connect-episode { grid-template-columns: 64px 1fr; gap: 12px; }
  .connect-episode small { grid-column: 2; text-align: left; }
  .connect-listen-actions { align-items: stretch; flex-direction: column; }
  .connect-button { justify-content: center; text-align: center; }
  .connect-join__body { padding-top: 28px; padding-left: 0; border-top: 1px solid var(--connect-line); border-left: 0; }
  .connect-join__body ul { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .connect-body * { scroll-behavior: auto !important; transition: none !important; }
}