/* ============================================================
   MIMICRY — "Mimicry by Design"  (doodle 08)
   ------------------------------------------------------------
   doodles-base.css styles by class-name SUFFIX: [class$="-hero"],
   [class$="-title"], [class$="-takeaways"], and by SUBSTRING for
   [class*="-visual"] / [class*="-content"] / [class*="-nav-link"].
   Two consequences, both load-bearing:

   1. Page chrome gets styled for free ONLY if the class ends in the
      expected suffix. `.mimicry-hero` works; `.mimicry-header` would
      render unstyled and look like a build failure.
   2. Any NEW class ending in one of those suffixes inherits heavy
      styling by accident -- a label called `.mim-title` inside an SVG
      would pick up the 12rem display hero type. So every in-SVG label
      class here is `.mim-*` with a suffix base.css does not claim
      (-cap, -lbl, -num, -head, -tiny). Do not rename one of them to
      `*-title` "for consistency" -- that is the bug.
   ============================================================ */
@import url('doodles-base.css?v=20260730b');

.mimicry-page {
  /* Map this doodle's palette onto the generic vars base.css reads. */
  --doodle-surface: var(--mimicry-surface);
  --doodle-surface-text: var(--mimicry-surface-text);
  --doodle-border: var(--mimicry-border);

  --mimicry-surface: #fff;
  --mimicry-surface-text: #000;
  --mimicry-border: #000;

  /* Same four hexes as ocr.css / tokens.css -- already contrast-checked
     on this site in light mode. Semantics for this page:
       1 red   - contaminated / your own claim coming back
       2 blue  - the model, the mechanism
       3 green - the clean move / what actually works
       4 amber - the preference signal */
  --mimicry-accent-1: #DC2626;
  --mimicry-accent-2: #1D4ED8;
  --mimicry-accent-3: #16A34A;
  --mimicry-accent-4: #D97706;

  /* NOT #1D4ED8. At full strength that blue is 6.2:1 on this cream and
     passes, but doodles-base.css renders the sources box at 80% opacity,
     which drags the EFFECTIVE colour to #4970dd = 4.19:1 and fails WCAG
     AA. Measured with axe on the ocr page, not estimated. #1E3A8A
     survives the same blend at 5.6:1. If you lighten this, re-run axe. */
  --mimicry-link: #1E3A8A;
  --mimicry-link-hover: #15803D;

  --svg-text-label: 16px;
  --svg-text-body: 14px;
  --svg-text-small: 12px;
  --svg-text-tiny: 11px;
}

/* Dark mode also re-points the four SVG accents. ocr.css leaves them at
   their light-mode values, which puts #1D4ED8 at roughly 2.2:1 on the
   #1a1a1a figure surface -- legal as far as axe is concerned (the
   colour-contrast rule does not evaluate SVG <text>) but hard to read.
   These are the 400-weight siblings of the same four hues and clear 6:1
   on #1a1a1a. Keep them in step with --mimicry-link if either changes. */
[data-theme="dark"] .mimicry-page {
  --mimicry-surface: #1a1a1a;
  --mimicry-surface-text: #f5f5f5;
  --mimicry-border: #444;
  --mimicry-link: #60A5FA;
  --mimicry-link-hover: #4ADE80;

  --mimicry-accent-1: #F87171;
  --mimicry-accent-2: #60A5FA;
  --mimicry-accent-3: #4ADE80;
  --mimicry-accent-4: #FBBF24;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mimicry-page {
    --mimicry-surface: #1a1a1a;
    --mimicry-surface-text: #f5f5f5;
    --mimicry-border: #444;
    --mimicry-link: #60A5FA;
    --mimicry-link-hover: #4ADE80;

    --mimicry-accent-1: #F87171;
    --mimicry-accent-2: #60A5FA;
    --mimicry-accent-3: #4ADE80;
    --mimicry-accent-4: #FBBF24;
  }
}

.mimicry-visual svg {
  width: 100%;
  height: auto;
  display: block;
  /* Anything drawn with stroke="currentColor" resolves against `color`,
     not against the `fill` set on .mimicry-visual text. Set it explicitly
     or those strokes fall back to the inherited body colour and stop
     tracking the theme. */
  color: var(--mimicry-surface-text);
}

.sources-list a,
.mimicry-cta-subtext a {
  color: var(--mimicry-link);
}
.sources-list a:hover,
.sources-list a:focus,
.mimicry-cta-subtext a:hover,
.mimicry-cta-subtext a:focus {
  color: var(--mimicry-link-hover);
}

/* base.css sets a font on [class*="-visual"] text; this wins on source
   order (imported above) so the mono stack applies inside the SVGs. */
.mimicry-visual text {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  fill: var(--mimicry-surface-text);
}

/* ---------- in-SVG type scale ---------- */
.mim-head {
  font-size: var(--svg-text-label);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.mim-lbl {
  font-size: var(--svg-text-body);
  font-weight: 600;
}
.mim-cap {
  font-size: var(--svg-text-small);
  opacity: .82;
}
.mim-tiny {
  font-size: var(--svg-text-tiny);
  opacity: .74;
}
.mim-num {
  font-size: var(--svg-text-small);
  font-weight: 700;
  opacity: .6;
}

/* ---------- ink ----------
   SCOPED under .mimicry-visual on purpose. `.mimicry-visual text` sets a
   default fill at specificity (0,1,1); a bare `.mim-ink-1` is only (0,1,0)
   and would LOSE to it, silently rendering every accent-coloured label in
   the default foreground. Scoping lifts these to (0,2,0). If you ever move
   a rule out from under .mimicry-visual, the colour quietly stops applying. */
.mimicry-visual .mim-ink-1 { fill: var(--mimicry-accent-1); }
.mimicry-visual .mim-ink-2 { fill: var(--mimicry-accent-2); }
.mimicry-visual .mim-ink-3 { fill: var(--mimicry-accent-3); }
.mimicry-visual .mim-ink-4 { fill: var(--mimicry-accent-4); }

.mimicry-visual .mim-stroke-1 { stroke: var(--mimicry-accent-1); }
.mimicry-visual .mim-stroke-2 { stroke: var(--mimicry-accent-2); }
.mimicry-visual .mim-stroke-3 { stroke: var(--mimicry-accent-3); }
.mimicry-visual .mim-stroke-4 { stroke: var(--mimicry-accent-4); }

/* The accent classes above also land on <path> arrowheads, which are
   filled triangles with no stroke. Nothing to do -- fill is what they
   need. But do NOT add a fill="" attribute alongside one of these
   classes: author CSS always beats a presentation attribute, so the
   attribute would be dead code that reads like it works. */

.mim-frame {
  fill: none;
  stroke: var(--mimicry-surface-text);
  stroke-width: 2;
}
.mim-hair {
  fill: none;
  stroke: var(--mimicry-surface-text);
  stroke-width: 1;
  opacity: .45;
}
.mim-dash {
  fill: none;
  stroke-width: 2;
  stroke-dasharray: 5 4;
}

/* ---------- hero ---------- */
.mimicry-title {
  /* base.css [class$="-title"] carries the display sizing; only the
     line-height needs tightening for the two-line stack. */
  line-height: .88;
}

/* ---------- scroll-triggered reveal ----------
   base.css handles the [class*="-visual"] fade. These stagger the pieces
   INSIDE each figure. Every rule is gated on .animate-in so a
   reduced-motion visitor (mimicry.js adds the class immediately, skipping
   the observer) still sees the finished state. */
.mim-step {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .45s ease, transform .45s ease;
}
.mimicry-visual.animate-in .mim-step { opacity: 1; transform: translateY(0); }
.mimicry-visual.animate-in .mim-step:nth-of-type(2) { transition-delay: .10s; }
.mimicry-visual.animate-in .mim-step:nth-of-type(3) { transition-delay: .20s; }
.mimicry-visual.animate-in .mim-step:nth-of-type(4) { transition-delay: .30s; }
.mimicry-visual.animate-in .mim-step:nth-of-type(5) { transition-delay: .40s; }
.mimicry-visual.animate-in .mim-step:nth-of-type(6) { transition-delay: .50s; }

.mim-sweep {
  opacity: 0;
  transition: opacity .5s ease .35s;
}
.mimicry-visual.animate-in .mim-sweep { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .mim-step,
  .mim-sweep {
    opacity: 1;
    transform: none;
    transition: none;
  }
}