/* ============================================================
   ISAAC — isaac.html page-specific styles
   ============================================================ */

/* Colours, type, spacing and the shared content patterns come from
   the Prospect Context Protocol via `brand/` (see the header of
   css/global.css). The isaac-* aliases below are this page's own
   names for patterns the brand library also ships generically
   (.tag / .tags / .tag-group__label / .chain); they are kept
   because the markup and js/isaac.js reference them, and they are
   set entirely in brand tokens so palette and type changes
   upstream still reach them.

   Responsive rules for this page live in the single RESPONSIVE
   section at the end of css/global.css — three steps, two knobs.
   Everything here is base (full-size) styling and is placed in the
   `base` cascade layer so those breakpoint rules can override it
   even though this file loads later. */
@layer base {

.page-shell { position: relative; }

/* ── Hero ──
   Top-left aligned; the hero image sits behind the text at reduced
   scale ("contain", not "cover") so the artwork is never cropped top
   or bottom. The PNG has a transparent ground, so it sits directly on
   the page colour. */
.isaac-hero {
  position: relative;
  min-height: 88vh;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  background: var(--bg);
}

.isaac-hero__image {
  position: absolute;
  inset: 0;
  /* Sits above the scrim so the graphic itself is never faded — the
     gradient only washes the empty ground behind it, not the artwork. */
  z-index: 1;
  background-image: url('../assets/isaac/isaac-hero.png');
  background-repeat: no-repeat;
  /* The element is mirrored (scaleX(-1) below), so a rightward shift on
     screen means shifting the background LEFT in local coordinates —
     5cm ≈ 189px at 96dpi. */
  background-position: calc(50% - 189px) 92%;
  background-size: 62% auto;
  /* Mirrored so the figure faces right-to-left instead of left-to-right —
     the flip is permanent, independent of the reveal transition below. */
  transform: scaleX(-1) scale(1.03);
  opacity: 0;
  transition: opacity 1400ms var(--ease-out), transform 1800ms var(--ease-out);
}

.isaac-hero__image.is-revealed {
  opacity: 1;
  transform: scaleX(-1) scale(1);
}

.isaac-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    var(--bg) 0%,
    color-mix(in srgb, var(--bg) 90%, transparent) 22%,
    color-mix(in srgb, var(--bg) 50%, transparent) 40%,
    color-mix(in srgb, var(--bg) 15%, transparent) 58%,
    color-mix(in srgb, var(--bg) 0%, transparent) 72%);
}

.isaac-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 48px var(--gutter) 0;
}

.isaac-hero__mark {
  width: 72px;
  height: auto;
  margin-bottom: 18px;
}

/* The Isaac logotype — the mark, not typography. Cormorant Garamond
   300 with wide tracking via --font-wordmark, exactly as drawn. */
.isaac-hero__wordmark {
  font-family: var(--font-wordmark);
  font-weight: var(--weight-light);
  font-size: clamp(38px, 4.6vw, 58px);
  letter-spacing: var(--track-wordmark);
  color: var(--text);
  line-height: var(--leading-tight);
}

.isaac-hero__tagline {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: var(--mono-md);
  letter-spacing: var(--track-mono-wide);
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 16px;
}

/* Type comes from the shared body-text rule in global.css. */
.isaac-hero__lede {
  max-width: 62ch;
  margin-top: 24px;
}

/* ── Quote ── */
.isaac-quote {
  max-width: 760px;
  margin: 0 auto;
  padding: 64px var(--gutter) 72px;
  text-align: center;
}

.isaac-quote__rule {
  width: 48px;
  height: var(--hairline);
  background: var(--accent);
  margin: 0 auto 32px;
}

/* The same short gold rule as .isaac-quote__rule, used inline as a
   divider between two blocks of copy rather than under a page quote. */
.isaac-rule-divider {
  width: 48px;
  height: var(--hairline);
  background: var(--accent);
  margin: 36px auto;   /* centred in its column, as the quote rule is */
}

.isaac-quote__text {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: clamp(23px, 2.6vw, 28px);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-heading);
  color: var(--text);
}

/* ── What Isaac stands for ── */
.isaac-name__acronym {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 40px;
  margin: 28px 0 36px;
}

.isaac-name__letter {
  min-width: 120px;
}

.isaac-name__letter-char {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--display-lg);
  letter-spacing: var(--track-heading);
  color: var(--accent);
  line-height: var(--leading-tight);
}

.isaac-name__letter-word {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: var(--mono-sm);
  letter-spacing: var(--track-mono-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-top: 10px;
}

/* Type comes from the shared body-text rule in global.css. */
.isaac-name__body + .isaac-name__body { margin-top: 16px; }

/* A paragraph answering the quote bubble above it. */
.bubble + .isaac-name__body { margin-top: 20px; }

/* A short, standalone emphasis line — the "so what" after a paragraph. */
.isaac-emphasis {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--display-xs);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-heading);
  color: var(--text);
  margin: 22px 0;
}

/* Comma-list content rendered as chips instead of a run-on sentence.
   The page's alias for the brand's .tag-group / .tags / .tag. */
.isaac-taggroup { margin: 22px 0; }

.isaac-taggroup__label {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: var(--mono-xs);
  letter-spacing: var(--track-mono-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.isaac-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* A tag row introducing a two-column band sits clear of it. */
.isaac-tags + .two-col { margin-top: 28px; }

.isaac-tag {
  font-family: var(--font-mono);
  font-weight: var(--weight-regular);
  font-size: var(--mono-xs);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--text-secondary);
  border: var(--border-1) solid var(--ash);
  background: var(--surface);
  padding: 6px 12px;
}

/* Cascading "domino" logic chain — connected statements, each following
   from the last. The page's alias for the brand's .chain. */
.isaac-chain {
  display: flex;
  flex-direction: column;
  margin: 20px 0;
}

/* Type comes from the shared body-text rule in global.css. */
.isaac-chain__item {
  position: relative;
  padding: 0 0 22px 28px;
  border-left: var(--border-1) solid var(--border);
}

.isaac-chain__item:first-child::before,
.isaac-chain__item:last-child::before {
  content: '';
  position: absolute;
  left: -4.5px;
  top: 0;
  width: 7px;
  height: 7px;
  /* reset the triangle borders from the general ::before rule so the
     endpoint marker renders as a clean round dot, not a bordered box */
  border: 0;
  border-radius: 100%;
  background: var(--accent);
}

.isaac-chain__item::before {
  content: '';
  position: absolute;
  left: -4.5px;
  top: 0;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--accent);
}

.isaac-chain__item:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
  color: var(--accent);
  font-weight: var(--weight-semibold);
}

/* ── Problem section ── */
/* Type comes from the shared .body-text--intro rule in global.css. */
.isaac-problem__intro {
  margin-bottom: 28px;
}

/* ── Function sections (image + copy) ──
   The graphic floats top-left (or top-right on --reverse sections)
   instead of sitting in a fixed side-by-side column; body copy wraps
   beside it while there's room, then any content taller than the
   image continues at the section's full width automatically — no
   empty column left standing once the text runs longer than the
   graphic. */
.isaac-fn-section {
  position: relative;
  padding-top: 20px;
  margin-bottom: 72px;
}

.isaac-fn__label {
  padding: 0 var(--gutter);
  max-width: var(--content-max);
  margin: 0 auto 12px;
}

/* The label block supplies its own bottom margin — the section title
   inside it does not add another. */
.isaac-fn__label .section-label { margin-bottom: 0; }

.isaac-fn__eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: var(--mono-xs);
  letter-spacing: var(--track-mono-wide);
  text-transform: uppercase;
  color: var(--moss);
  margin-bottom: 6px;
}

.isaac-fn__body-wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.isaac-fn__body-wrap::after {
  content: '';
  display: block;
  clear: both;
}

.isaac-fn__image-wrap {
  position: relative;
  float: left;
  width: 34%;
  margin: 0 44px 26px 0;
  opacity: 0;
  transform: translateY(28px) scale(0.98);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}

.isaac-fn-section--reverse .isaac-fn__image-wrap {
  float: right;
  margin: 0 0 26px 44px;
}

.isaac-fn__image-wrap.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.isaac-fn__image-wrap--mirrored img {
  transform: scaleX(-1);
}

.isaac-fn__image-wrap img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: contain;
}

/* Type comes from the shared body-text rule in global.css. */
.isaac-fn__body {
  margin-top: 36px;
  margin-bottom: 20px;
}

/* A paragraph that follows one of the structured blocks sits closer to
   it than the opening paragraph sits to the section head (which is what
   the inline margin-top overrides in the markup used to do). */
.numbered-steps + .isaac-fn__body,
.isaac-tags + .isaac-fn__body,
.definition-well + .isaac-fn__body,
.isaac-fn__pair + .isaac-fn__body {
  margin-top: 24px;
}

.isaac-fn__lead-in {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: var(--mono-xs);
  letter-spacing: var(--track-mono-wide);
  text-transform: uppercase;
  color: var(--accent);
  margin: 24px 0 4px;
}

/* Two boxes, exactly half-width each, sitting inline on the same row —
   used to pair a table/list with its companion output box instead of
   stacking them full-width one after another. `clear: both` keeps the
   pair below the floated artwork at every width, so neither box gets
   squeezed into the leftover column beside the image. */
.isaac-fn__pair {
  clear: both;
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin: 24px 0;
}

.isaac-fn__pair > * {
  flex: 1 1 0;
  margin: 0 !important;
}

/* Pairs items compactly on the left instead of stretching them across
   the full row — used where the boxes are short enough that filling
   100% width would leave them looking sparse. */
/* First thing inside a pair column — no leading gap. */
.isaac-fn__pair .isaac-fn__lead-in:first-child { margin-top: 0; }

.isaac-fn__pair--left {
  justify-content: flex-start;
}

.isaac-fn__pair--left > * {
  flex: 0 1 420px;
}

/* Left item sized just enough to hold its own content (e.g. a 2-row tag
   grid), right item expands to take up whatever width is left over —
   unlike --left, which keeps both items compact. Cleared below the
   floated image so it always starts at the section's true left edge
   instead of getting squeezed beside the float when preceding content
   hasn't yet run past the image's height. */
.isaac-fn__pair--fill-right {
  clear: both;
}

.isaac-fn__pair--fill-right > :first-child {
  flex: 0 0 460px;
}

.isaac-fn__pair--fill-right > :last-child {
  flex: 1 1 auto;
}

/* Two explicit rows of three tags — each tag sizes to its own content
   (no equal-width columns), while the row split still guarantees
   exactly two rows regardless of how the text happens to wrap. */
.isaac-tags--grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.isaac-tags--grid .isaac-tags {
  flex-wrap: nowrap;
}

/* ── Why not just a general AI chat — striped comparison table ── */
.isaac-compare-wrap {
  position: relative;
}

/* Type comes from the shared body-text rule (--muted) in global.css. */
.isaac-compare-close {
  position: relative;
  margin: 32px 0 0;
  max-width: 980px;
}

.isaac-compare-final {
  position: relative;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--display-md);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-heading);
  color: var(--accent);
  margin-top: 18px;
  max-width: 980px;
}

/* ── Coming soon / signup ── */
.isaac-signup {
  text-align: left;
}

.isaac-signup__meta {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: var(--mono-xs);
  letter-spacing: var(--track-mono-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.isaac-signup__heading {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: clamp(28px, 3.6vw, 38px);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-heading);
  color: var(--text);
  max-width: 32ch;
}

/* Type comes from the shared body-text rule (--muted) in global.css. */
.isaac-signup__body {
  max-width: 75ch;
  margin-top: 20px;
}

.isaac-signup__form {
  display: flex;
  gap: 12px;
  margin-top: 36px;
  max-width: 520px;
}

.isaac-signup__input {
  flex: 1 1 auto;
  font-family: var(--font-mono);
  font-weight: var(--weight-regular);
  font-size: 13.5px;
  letter-spacing: var(--track-mono);
  color: var(--text);
  background: var(--bg);
  border: var(--border-1) solid var(--border);
  border-radius: var(--radius-1);
  padding: 15px 18px;
}

.isaac-signup__input:focus {
  outline: none;
  border-color: var(--border-accent);
}

.isaac-signup__submit {
  flex-shrink: 0;
}

/* Inline links in the sign-up copy — global.css sets `a { color: inherit }`. */
.isaac-signup__body a { color: var(--accent); }

.isaac-signup__note {
  font-family: var(--font-mono);
  font-size: var(--mono-xs);
  letter-spacing: var(--track-mono);
  color: var(--moss);
  margin-top: 18px;
}

}