/* =============================================================
   Thadus CodeLabs: style layer for the older pages
   (team, partners, partnerships, forms, guides, policy, campaigns).
   Loaded after each page's own <style>. It brings those pages onto
   the group style used by home, platform and impact (site.css):
   Nunito headings on one type ramp, Inter text, light page heroes.
   Header and footer live in chrome.css.

   Tokens follow the CodeLabs theme used on thadusgroup.com:
   same palette, 8-point spacing, three radii, one easing curve.
   ============================================================= */

:root {
  --cl-ink:          #0f172a;
  --cl-body:         #334155;
  --cl-muted:        #64748b;
  --cl-line:         #e2e8f0;
  --cl-bg:           #ffffff;
  --cl-bg-alt:       #f8fafc;
  --cl-accent:       #2563eb;
  --cl-accent-hover: #1d4ed8;
  --cl-accent-soft:  #eff6ff;
  --cl-highlight:    #f97316;
  --cl-banner:       #070f1f;

  --cl-font-display: "Nunito", "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif;
  --cl-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --cl-r-sm:   6px;    /* controls, tags */
  --cl-r-md:   12px;   /* cards, media */
  --cl-r-pill: 999px;  /* buttons, pills */

  --cl-ease: cubic-bezier(.4, 0, .2, 1);
  --cl-nav-h: 64px;

  /* pages read this for their headings */
  --font-display: var(--cl-font-display);
  --font-body: var(--cl-font-body);
}

html { scroll-padding-top: calc(var(--cl-nav-h) + 16px); }

/* Content is visible on load. The fade-in-on-scroll effect is off
   site-wide; page scripts still add their classes harmlessly.     */
.reveal,
.reveal.is-visible {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

:focus-visible {
  outline: 2px solid var(--cl-accent);
  outline-offset: 3px;
}

/* ---------- Photo slots (see README: "Adding photos") ---------- */
.photo-slot {
  border: 1.5px dashed var(--cl-line);
  border-radius: var(--cl-r-md);
  background: var(--cl-bg-alt);
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 24px;
}
.photo-slot__label {
  font: 600 12px/1 var(--cl-font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #94a3b8;
}
.photo-slot__hint { font-size: 14px; color: var(--cl-muted); max-width: 34ch; line-height: 1.6; }
.photo-slot--dark { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.03); }
.photo-slot--dark .photo-slot__hint { color: #94a3b8; }
.photo-img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--cl-r-md);
}

/* ---------- Group-style type ---------- */
body { font-family: var(--cl-font-body) !important; }
h1, h2, .display {
  font-family: var(--cl-font-display) !important;
  font-style: normal !important;
  letter-spacing: -0.02em !important;
}
h1 { font-size: clamp(34px, 5vw, 52px) !important; font-weight: 900 !important; line-height: 1.08 !important; }
h2 { font-size: clamp(26px, 3.2vw, 34px) !important; font-weight: 800 !important; line-height: 1.2 !important; }
h3 { font-family: var(--cl-font-display); font-weight: 800; }

/* ---------- Light page heroes ---------- */
.page-hero {
  background: var(--cl-bg) !important;
  background-image: none !important;
  color: var(--cl-body) !important;
  padding: 96px 0 64px !important;
  border-bottom: 1px solid var(--cl-line);
}
.page-hero h1 { color: var(--cl-ink) !important; }
.page-hero p { color: var(--cl-body) !important; }
.page-hero .section-label { color: var(--cl-muted) !important; }