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

.page-shell { position: relative; }

/* ── Hero ──
   Top-left aligned (was middle/bottom); the hero image sits behind the
   text at reduced scale ("contain", not "cover") so the artwork is never
   cropped top or bottom. */
.isaac-hero {
  position: relative;
  min-height: 88vh;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  background: var(--cream);
}

.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; /* 20% smaller than the previous 78% */
  /* 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(--cream) 0%,
    rgba(240, 235, 224, 0.9) 22%,
    rgba(240, 235, 224, 0.5) 40%,
    rgba(240, 235, 224, 0.15) 58%,
    rgba(240, 235, 224, 0) 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;
}

.isaac-hero__wordmark {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(38px, 4.6vw, 58px);
  letter-spacing: 12px;
  color: var(--forest-deep);
  line-height: 1;
}

.isaac-hero__tagline {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 16px;
}

.isaac-hero__lede {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.85;
  color: var(--forest-mid);
  text-align: justify;
  max-width: 62ch;
  margin-top: 24px;
}

@media (max-width: 860px) {
  .isaac-hero { min-height: 74vh; }
  .isaac-hero__image { background-size: 74% auto; background-position: center 96%; }
  .isaac-hero__content { padding: 40px var(--gutter-sm) 0; }
}

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

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

.isaac-quote__text {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.55;
  color: var(--forest-deep);
}

@media (max-width: 860px) {
  .isaac-quote { padding: 48px var(--gutter-sm) 56px; }
}

/* ── 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: 300;
  font-size: 34px;
  color: var(--gold);
  line-height: 1;
}

.isaac-name__letter-word {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--forest-mid);
  margin-top: 10px;
}

.isaac-name__body {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.85;
  color: var(--forest-mid);
  text-align: justify;
}

.isaac-name__body + .isaac-name__body { margin-top: 16px; }

/* A short, standalone emphasis line — the "so what" after a paragraph. */
.isaac-emphasis {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 21px;
  color: var(--forest-deep);
  margin: 22px 0;
}

/* Comma-list content rendered as chips instead of a run-on sentence. */
.isaac-taggroup { margin: 22px 0; }

.isaac-taggroup__label {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 9.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 10px;
}

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

.isaac-tag {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--forest-mid);
  border: 0.5px solid var(--parchment);
  background: var(--linen);
  padding: 6px 12px;
}

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

.isaac-chain__item {
  position: relative;
  padding: 0 0 22px 28px;
  border-left: 1px solid var(--parchment);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.7;
  color: var(--forest-mid);
  text-align: justify;
}

.isaac-chain__item::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

.isaac-chain__item:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
  color: var(--forest-deep);
  font-style: italic;
}

/* ── Problem section ── */
.isaac-problem__intro {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 22px;
  line-height: 1.6;
  color: var(--forest-deep);
  text-align: justify;
  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;
}

.isaac-fn__eyebrow {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 2.5px;
  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;
}

.isaac-fn__body {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.85;
  color: var(--forest-mid);
  text-align: justify;
  margin-bottom: 20px;
}

.isaac-fn__lead-in {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  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. */
.isaac-fn__pair {
  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. */
.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;
}

@media (max-width: 860px) {
  .isaac-fn-section { padding-top: 16px; margin-bottom: 52px; }
  .isaac-fn__label { padding: 0 var(--gutter-sm); }
  .isaac-fn__body-wrap { padding: 0 var(--gutter-sm); }
  .isaac-fn__image-wrap,
  .isaac-fn-section--reverse .isaac-fn__image-wrap {
    float: none;
    width: 62%;
    max-width: 280px;
    margin: 0 auto 24px;
  }

  .isaac-fn__pair,
  .isaac-fn__pair--left,
  .isaac-fn__pair--fill-right {
    flex-direction: column;
    gap: 20px;
  }

  .isaac-fn__pair--left > *,
  .isaac-fn__pair--fill-right > * {
    flex: 1 1 auto;
  }

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

/* ── Why not just Claude — Day, Striped Rows table ── */
.isaac-compare-wrap {
  position: relative;
}

.isaac-compare-lede {
  position: relative;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 22px;
  color: var(--forest-deep);
  margin-bottom: 30px;
}

.isaac-compare-close {
  position: relative;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.8;
  color: var(--moss);
  text-align: justify;
  margin: 32px 0 0;
  max-width: 980px;
}

.isaac-compare-final {
  position: relative;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 24px;
  color: var(--gold);
  margin-top: 18px;
  max-width: 980px;
}

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

.isaac-signup__meta {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 16px;
}

.isaac-signup__heading {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(28px, 3.6vw, 38px);
  letter-spacing: 2px;
  color: var(--forest-deep);
  max-width: 20ch;
}

.isaac-signup__body {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.5px;
  color: var(--stone);
  max-width: 56ch;
  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: 400;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: var(--forest-deep);
  background: var(--linen);
  border: 1px solid var(--parchment);
  padding: 15px 18px;
}

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

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

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

@media (max-width: 860px) {
  .isaac-signup__form { flex-direction: column; max-width: 400px; }
}