/* =====================================================================
   MARROW, THE COACH SPOTLIGHT.  spotlight/spotlight.css
   The page's own rules on top of the public system (assets/public/public.css),
   2026-10-26, Marrow Tribe Lane E. The shape of /founding/ and /2026/: every
   rule hangs off #main, colours only through the --hy-* and css/styles.css
   tokens, no hex, no new token, no gradient, no filter, no keyframes.
   No em or en dashes.
   ===================================================================== */

#main .pub-hero p.sp-sub { margin: 0; font-size: 18px; line-height: 1.5; max-width: 46ch; color: var(--hy-ink); }
#main > .pub-light.sp-now,
#main > .pub-light.sp-past { padding-block: 80px; }
#main p.sp-note { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-secondary); }
#main .sp-card { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 28px; align-items: start; padding: 28px; border-radius: 16px; background: var(--paper-card); border: 1px solid var(--rule-soft); }
#main .sp-card:not(:has(.sp-photo:not([hidden]))) { grid-template-columns: minmax(0, 1fr); }
#main .sp-photo { width: 160px; height: 160px; border-radius: 12px; object-fit: cover; border: 1px solid var(--rule-soft); }
#main .sp-copy { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
#main p.sp-week { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--marrow-accent); }
#main h3.sp-headline { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; color: var(--ink-primary); overflow-wrap: anywhere; }
#main p.sp-body { margin: 0; max-width: 68ch; font-size: 17px; line-height: 1.65; color: var(--ink-secondary); white-space: pre-line; overflow-wrap: anywhere; }
#main p.sp-coach { margin: 6px 0 0; font-size: 15px; font-weight: 500; color: var(--ink-primary); display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
#main .sp-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--marrow-accent); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
#main .dialed-band .sp-link-dark { color: var(--hy-aqua-hi); }
#main .sp-link:focus-visible { outline: 2px solid var(--mz-ember); outline-offset: 2px; }
#main .sp-archive { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
#main .sp-archive li { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border-radius: 16px; background: var(--paper-card); border: 1px solid var(--rule-soft); min-width: 0; }
#main .sp-archive .sp-a-week { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--marrow-accent); }
#main .sp-archive .sp-a-head { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 20px; line-height: 1.3; color: var(--ink-primary); overflow-wrap: anywhere; }
#main .sp-archive .sp-a-coach { margin: 0; font-size: 14px; color: var(--ink-secondary); }

@media (max-width: 767px) {
  #main > .pub-light.sp-now,
  #main > .pub-light.sp-past { padding-block: 56px; }
  #main .sp-card { grid-template-columns: minmax(0, 1fr); padding: 20px; gap: 18px; }
  #main .sp-photo { width: 120px; height: 120px; }
  #main .sp-archive { grid-template-columns: minmax(0, 1fr); }
}
#main .sp-retry { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; padding: 0; border: 0; background: none; font: inherit; font-weight: 500; color: var(--marrow-accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }