/* CAMB homepage — the only button and link styles allowed on the page */
:root, [data-theme="dark"], [data-mode="dark"] {
  --ck-t1:#FFFFFF; --ck-t2:#A8A8AA; --ck-t3:#8C8C8E; --ck-raised:#1F1F1F; --ck-raised2:#2A2A2A;
  --ck-line:#2E2E2E; --ck-line2:#404042; --ck-fill:rgba(255,255,255,.11); --ck-shade:#D6D6D8;
  --ck-pbg:#FFFFFF; --ck-pfg:#181818; --ck-bg:#08090a;
}
[data-theme="light"], [data-mode="light"] {
  --ck-t1:#202020; --ck-t2:#5C5C5E; --ck-t3:#6E6E71; --ck-raised:#FFFFFF; --ck-raised2:#FFFFFF;
  --ck-line:#E4E4E6; --ck-line2:#CFCFD2; --ck-fill:rgba(0,0,0,.08); --ck-shade:#3D3D40;
  --ck-pbg:#202020; --ck-pfg:#FFFFFF; --ck-bg:#ffffff;
}
button, input, select, textarea { font: inherit; }

.ck-btn, .ck-nav, .ck-dd, .ck-src, .ck-src .ck-name, .ck-press, .ck-inl, .ck-ib, .ck-foot, .ck-chip {
  transition: color 150ms ease-out, background-color 150ms ease-out, border-color 150ms ease-out, box-shadow 150ms ease-out,
    transform 150ms ease-out, opacity 150ms ease-out, text-decoration-color 150ms ease-out,
    text-decoration-thickness 150ms ease-out, text-underline-offset 150ms ease-out !important;
}
.ck-arr { display: inline-block !important; text-decoration: none !important; transition: transform 150ms ease-out !important; }

/* every element that may show an underline carries a transparent one, so hovers fade instead of snapping */
.ck-src .ck-name, .ck-press, .ck-inl {
  text-decoration-line: underline !important; text-decoration-color: transparent !important;
  text-decoration-thickness: 1px !important; text-underline-offset: 4px !important;
}

/* focus: one style for everything */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible, .ck-btn:focus-visible {
  outline: 2px solid #EC5512 !important; outline-offset: 2px !important; box-shadow: none !important;
}

/* buttons */
.ck-btn {
  align-items: center !important; justify-content: center !important; gap: 8px !important;
  width: auto !important; flex: 0 0 auto !important; white-space: nowrap !important; box-sizing: border-box !important;
  border: 0 !important; border-radius: 6px !important; font-family: 'Geist', var(--font-text), sans-serif !important;
  font-weight: 500 !important; letter-spacing: -0.01em !important; text-decoration: none !important; cursor: pointer !important;
  box-shadow: none !important; text-transform: none !important;
}
.ck-m { height: 40px !important; min-height: 40px !important; padding: 0 14px !important; font-size: 14px !important; }
.ck-l { height: 48px !important; min-height: 48px !important; padding: 0 20px !important; font-size: 16px !important; }
.ck-p { background: #EC5512 !important; color: #FFFFFF !important; }
.ck-p:hover { background: #CF4B10 !important; }
.ck-s { background: transparent !important; color: var(--ck-t1) !important; }
.ck-s.ck-m { padding: 0 12px !important; }
.ck-s.ck-l { padding: 0 14px !important; }
.ck-s:hover { background: var(--ck-fill) !important; }
.ck-btn:hover .ck-arr { transform: translateX(3px); }
@media (max-width: 640px) {
  .ck-m { padding: 0 12px !important; }
  .ck-l { height: 44px !important; min-height: 44px !important; padding: 0 16px !important; font-size: 15px !important; }
  .ck-s.ck-l { padding: 0 14px !important; }
}

/* nav items */
.ck-nav { font-family: 'Geist', var(--font-text), sans-serif !important; font-size: 14px !important; color: var(--ck-t2) !important;
  padding: 6px 10px !important; background: none !important; border: 0 !important; cursor: pointer !important; text-transform: none !important; letter-spacing: 0 !important; }
.ck-nav:hover { color: var(--ck-t1) !important; }

/* dropdown */
.ck-panel { background: var(--ck-raised) !important; border: 1px solid var(--ck-line) !important; border-radius: 12px !important;
  padding: 8px !important; box-shadow: 0 22px 50px rgba(0,0,0,.4) !important; }
.ck-dd { padding: 12px !important; border-radius: 6px !important; color: var(--ck-t1) !important; background: transparent !important; box-shadow: none !important; min-height: 0 !important; }
.ck-dd:hover { background: var(--ck-fill) !important; }
.ck-dd .ck-dt { font-family: 'Geist', var(--font-text), sans-serif !important; font-size: 15px !important; font-weight: 500 !important; color: var(--ck-t1) !important; }
.ck-dd .ck-dds { font-family: 'Geist', var(--font-text), sans-serif !important; font-size: 13.5px !important; color: var(--ck-t2) !important; }

/* featured source link (Four stages) */
.ck-src { flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; padding: 10px 14px !important; margin-left: -14px !important;
  color: var(--ck-t1) !important; border: 0 !important; background: none !important; text-decoration: none !important; }
.ck-src .ck-lab { display: block !important; font-family: 'Geist Mono', monospace !important; font-size: 13px !important; text-transform: uppercase !important; letter-spacing: .07em !important; color: var(--ck-t3) !important; }
.ck-src .ck-name { display: block !important; font-family: 'Geist Mono', monospace !important; font-size: 16px !important; font-weight: 500 !important; text-transform: uppercase !important; letter-spacing: .07em !important; color: var(--ck-t1) !important; }
.ck-src:hover .ck-name { text-decoration-color: #EC5512 !important; text-decoration-thickness: 2px !important; text-underline-offset: 4px !important; }

/* press link on photos */
.ck-press { font-family: 'Geist Mono', monospace !important; font-size: 12px !important; text-transform: uppercase !important; letter-spacing: .07em !important;
  color: #FFFFFF !important; text-decoration-color: currentColor !important; text-decoration-thickness: 1px !important; text-underline-offset: 3px !important; }
.ck-press:hover { text-decoration-color: #EC5512 !important; text-decoration-thickness: 2px !important; color: #FFFFFF !important; }

/* link inside text */
.ck-inl { color: inherit !important; padding: 0 !important; margin: 0 !important; background-image: none !important;
  text-decoration-color: transparent !important; text-decoration-thickness: 1px !important; text-underline-offset: 5px !important; }
.ck-inl:hover { text-decoration-color: #EC5512 !important; text-decoration-thickness: 3px !important; color: inherit !important; }

/* clickable card */
.ck-card { background: var(--ck-raised) !important; border: 0 !important; border-radius: 10px !important; box-shadow: none !important; overflow: hidden !important; }

/* icon button */
.ck-ib { width: 40px !important; height: 40px !important; min-width: 40px !important; padding: 0 !important; border-radius: 9999px !important;
  background: var(--ck-raised2) !important; color: var(--ck-t1) !important; border: 1px solid transparent !important; box-shadow: none !important;
  align-items: center !important; justify-content: center !important; font-size: 18px !important; font-family: 'Geist', var(--font-text), sans-serif !important; line-height: 1 !important; backdrop-filter: none !important; }
.ck-ib:hover { background: var(--ck-fill) !important; border-color: var(--ck-t3) !important; }

/* footer link */
.ck-foot { font-family: 'Geist', var(--font-text), sans-serif !important; font-size: 15px !important; color: var(--ck-t3) !important;
  text-transform: none !important; letter-spacing: 0 !important; background: none !important; border: 0 !important; }
.ck-foot:hover { color: var(--ck-t1) !important; }

/* chips */
.ck-chip { align-items: center !important; justify-content: center !important; border-radius: 999px !important;
  border: 1px solid var(--ck-line2) !important; color: var(--ck-t2) !important; background: transparent !important;
  font-family: 'Geist', var(--font-text), sans-serif !important; font-size: 13px !important; padding: 5px 12px !important; min-height: 32px !important;
  height: auto !important; width: auto !important; box-shadow: none !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer !important; }
.ck-chip:hover { background: var(--ck-fill) !important; }
.ck-chip[aria-checked="true"], .ck-chip.ck-on { background: var(--ck-t1) !important; color: var(--ck-bg) !important; border-color: var(--ck-t1) !important; }

/* display stays with each element; these only set it when nothing hides them */
.ck-btn:not([style*="display:none"], [style*="display: none"]):not([style*="display: none"]) { display: inline-flex; }
.ck-src { display: inline-flex; }
.ck-src { gap: 6px !important; }
.ck-chip:not([style*="display:none"], [style*="display: none"]) { display: inline-flex; }
/* menu items are title + description only */
.ck-dd [data-ar] { display: none !important; }
.ck-dd > span:first-child { gap: 2px !important; }

.ck-nav, .ck-nav *, .ck-dd, .ck-dd *, .ck-foot, .ck-btn, .ck-btn * { text-decoration: none !important; }


/* the design system's global a:hover underline is off; only the three underlined link types may underline */
a:hover:not(.ck-press):not(.ck-inl), a:not(.ck-press):not(.ck-inl):not(.ck-src) { text-decoration-line: none; }

.ck-nav { height: 40px !important; display: inline-flex; align-items: center !important; gap: 6px !important; white-space: nowrap !important; }
nav .ck-btn + .ck-btn { margin-left: 4px !important; }


/* ===== TYPOGRAPHY + READABILITY ===== */
html:root, html [data-theme="dark"], html [data-mode="dark"] { --t1:#FFFFFF; --t2:#A8A8AA; --t3:#8C8C8E; --t4:#8C8C8E; --font-text:'Geist', system-ui, sans-serif; }
html [data-theme="light"], html [data-mode="light"] { --t1:#202020; --t2:#5C5C5E; --t3:#6E6E71; --t4:#6E6E71; }
body { font-family:'Geist', system-ui, sans-serif; }
h1, h2, h3 { text-wrap: balance; font-weight: 400 !important; }
section[id], #four-stages { scroll-margin-top: 60px; }
@media (max-width: 640px) { section[id], #four-stages { scroll-margin-top: 56px; } }

/* scale */
h1.ty-display { font-size: min(88px, 10.5vh) !important; line-height: 1 !important; letter-spacing: -0.03em !important; }
#s05 h2, #s06 h2, #four-stages .intro h2, #s07 [data-illume], .ty-h2 { font-size: 48px !important; line-height: 1.05 !important; }
#four-stages .txt h3, #s05 h3 { font-size: 40px !important; line-height: 1.1 !important; }
#s04 h2 { font-size: 36px !important; line-height: 1.25 !important; max-width: 26ch !important; }
#four-stages .txt .lead, #s05 h3 + p { font-size: 21px !important; line-height: 1.4 !important; max-width: 44ch !important; }
#s06 [data-blc] > p:last-child { font-size: 15px !important; line-height: 1.45 !important; color: var(--t2) !important; }
@media (max-width: 640px) {
  h1.ty-display { font-size: 40px !important; }
  #s05 h2, #s06 h2, #four-stages .intro h2, #s07 [data-illume], .ty-h2 { font-size: 32px !important; }
  #four-stages .txt h3, #s05 h3 { font-size: 28px !important; }
  #s04 h2 { font-size: 24px !important; }
  #four-stages .txt .lead, #s05 h3 + p { font-size: 17px !important; }
}
/* four stages type is in canvas units; undo the canvas scale so these read at true size */
#four-stages .txt h3 { font-size: calc(40px * var(--fsk,1)) !important; }
#four-stages .txt .lead { font-size: calc(21px * var(--fsk,1)) !important; }
#four-stages .intro h2 { font-size: calc(48px * var(--fsk,1)) !important; }
#four-stages .mono, #four-stages .num { font-size: calc(12px * var(--fsk,1)) !important; }
#four-stages .num { opacity: 1; color: var(--t3) !important; }
#four-stages .vid .chip { background:#FFFFFF !important; color:#202020 !important; padding:4px 8px !important; border-radius:4px !important; font-size: calc(12px * var(--fsk,1)) !important; letter-spacing:.06em !important; }

/* labels: Geist Mono 12px floor, nothing smaller anywhere */
[style*="font-size:8px"], [style*="font-size: 8px"], [style*="font-size:9px"], [style*="font-size: 9px"], [style*="font-size:10px"], [style*="font-size: 10px"], [style*="font-size:11px"], [style*="font-size: 11px"], [style*="font-size:11.5px"], [style*="font-size: 11.5px"],
[style*="font-size: 9px"], [style*="font-size: 10px"], [style*="font-size: 11px"] { font-size: 12px !important; }
[style*="font-family:var(--font-mono)"][style*="uppercase"], [style*="font-family: var(--font-mono)"][style*="uppercase"] { letter-spacing: .06em !important; line-height: 1.3; }

/* one heading weight */
:is(h1,h2,h3,p,span):is([style*="font-weight:510"],[style*="font-weight: 510"],[style*="font-weight:500"],[style*="font-weight: 500"]):not(.ck-btn):not(.ck-btn *):not(.ck-dt):not(.ck-name):not([data-nm]):not(nav *) { font-weight: 400 !important; }

/* no translucent text: map to the three tiers */
[style*="color:rgba(255,255,255,0.35)"], [style*="color: rgba(255,255,255,0.35)"], [style*="color:rgba(255,255,255,0.4)"], [style*="color: rgba(255,255,255,0.4)"], [style*="color:rgba(255,255,255,0.45)"], [style*="color: rgba(255,255,255,0.45)"], [style*="color:rgba(255,255,255,0.5)"], [style*="color: rgba(255,255,255,0.5)"],
[style*="color:rgba(255,255,255,0.55)"], [style*="color: rgba(255,255,255,0.55)"], [style*="color:rgba(255,255,255,0.6)"], [style*="color: rgba(255,255,255,0.6)"], [style*="color:rgba(255,255,255,.6)"], [style*="color: rgba(255,255,255,.6)"], [style*="color:rgba(255,255,255,.5)"], [style*="color: rgba(255,255,255,.5)"] { color: #8C8C8E !important; }
[style*="color:rgba(255,255,255,0.7)"], [style*="color: rgba(255,255,255,0.7)"], [style*="color:rgba(255,255,255,0.72)"], [style*="color: rgba(255,255,255,0.72)"], [style*="color:rgba(255,255,255,0.75)"], [style*="color: rgba(255,255,255,0.75)"],
[style*="color:rgba(255,255,255,0.78)"], [style*="color: rgba(255,255,255,0.78)"], [style*="color:rgba(255,255,255,0.8)"], [style*="color: rgba(255,255,255,0.8)"], [style*="color:rgba(255,255,255,0.82)"], [style*="color: rgba(255,255,255,0.82)"], [style*="color:rgba(255,255,255,0.85)"], [style*="color: rgba(255,255,255,0.85)"] { color: #A8A8AA !important; }
[style*="color:rgba(17,17,17,0.45)"], [style*="color: rgba(17,17,17,0.45)"], [style*="color:rgba(17,17,17,0.5)"], [style*="color: rgba(17,17,17,0.5)"], [style*="color:rgba(0,0,0,0.45)"], [style*="color: rgba(0,0,0,0.45)"], [style*="color:rgba(0,0,0,0.5)"], [style*="color: rgba(0,0,0,0.5)"] { color: #6E6E71 !important; }

/* text on photos and video stays solid white */
#s05 [data-rbph] ~ [data-flip], #s05 [data-flip] h3, #s05 [data-flip] p, #s05 [data-flip] span { color: #FFFFFF !important; }

/* Beyond live cards and demos: Geist, never a serif fallback */
#s06 [data-blc], #s06 [data-blc] *:not([style*="mono"]):not(.ck-arr) { font-family: 'Geist', system-ui, sans-serif !important; }
#s06 [data-blc] [style*="mono"] { font-family: 'Geist Mono', ui-monospace, monospace !important; }

/* light sections: white surfaces separated by a hairline */
html [data-theme="light"] .ck-card, html [data-mode="light"] .ck-card, html [data-theme="light"] .ck-ib, html [data-mode="light"] .ck-ib, html [data-theme="light"] .ck-panel, html [data-mode="light"] .ck-panel { border: 1px solid #E4E4E6 !important; }
/* Four stages source: in canvas units, so scale back up to true size */
#four-stages .ck-src .ck-lab { font-size: calc(14px * var(--fsk,1)) !important; }
#four-stages .ck-src .ck-name { font-size: calc(18px * var(--fsk,1)) !important; }
/* record cards: the FIRST tag sits above the title, left-aligned */
#s05 [data-flip] span[style*="margin-left:auto"], [style*="margin-left: auto"] { margin-left: 0 !important; align-self: flex-start !important; }

.mob-gs:active .ck-arr { transform: translateX(3px); }

@media (max-width: 759px) {
  #four-stages .intro h2 { font-size: calc(32px * var(--fsk,1)) !important; line-height: 1.05 !important; text-wrap: balance; }
  #four-stages .intro .mono { margin-bottom: 12px; }
  #four-stages .num { display: none !important; }
  #four-stages .txt .lead { text-wrap: pretty; }
  #four-stages .txt .mono + h3 { margin-top: 12px !important; }
  #four-stages .txt h3 + .lead { margin-top: 12px !important; }
  #four-stages .txt .ck-src { margin-top: 24px !important; gap: 8px !important; }
}

/* sound button: same box as the L buttons */
button[data-snd] { height: 48px !important; padding: 0 20px !important; font-size: 16px !important; font-weight: 500 !important; gap: 8px !important; }
@media (max-width: 640px) { button[data-snd] { height: 44px !important; padding: 0 16px !important; font-size: 15px !important; } }