/* ==========================================================================
   CODEX VISUAL  (styles_codex.css) — the "where we are now" slide, index.html
   Fills the empty top-right space with the founder's photo, toned so it sits
   naturally on the white section while the subject stays readable.
   ========================================================================== */

.founding-top {
  display: grid;
  grid-template-columns: minmax(0, 680px) minmax(0, 1fr);
  gap: var(--space-4) var(--space-5);
  align-items: start;
}

.codex-visual {
  margin: 0;
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--parchment-line);
  background: #0f1a24;              /* matches the photo's own dark ground */
  isolation: isolate;
}

.codex-visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  /* natural toning: soften contrast and warm it slightly so the photo belongs
     to a cream/white page instead of punching out of it */
  filter: saturate(0.88) contrast(0.95) brightness(1.03);
}

/* warm veil + fade into the page background at the bottom edge */
.codex-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 35%),
    linear-gradient(180deg, rgba(20, 32, 26, 0) 55%, rgba(255, 255, 255, 0.30) 100%),
    radial-gradient(120% 90% at 82% 18%, rgba(201, 123, 74, 0.16), transparent 60%);
  mix-blend-mode: soft-light;
}

/* a hairline inner highlight, matching the cards on this slide */
.codex-visual > img + * { position: relative; }

/* ---------- tablet / narrow desktop: image drops under the head ---------- */
@media (max-width: 1180px) {
  .founding-top { grid-template-columns: minmax(0, 1fr); }
  .codex-visual { max-width: 100%; }
}

/* ---------- phones: keep the slide compact ---------- */
@media (max-width: 640px) {
  .codex-visual img { aspect-ratio: 16 / 10; }
  .founding-top { gap: var(--space-3); }
}

@media (prefers-reduced-motion: reduce) {
  .codex-visual { transition: none; }
}