/* ============================================================
   OPTIMIZATION DOC — iA Presenter theme
   ------------------------------------------------------------
   Ported from the Optimization Doc design system.
   Warm cream paper, lab-coat navy ink, mascot yellow for
   highlight only, one bolt of electric blue for action.
   Stamped shadows. Flat fills. No gradients.
   ============================================================ */

/* ------------------------------------------------------------
   1. FONTS — self-hosted variable faces, no CDN
   ------------------------------------------------------------ */

@font-face {
  font-family: "Archivo";
  src: url("fonts/Archivo-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-stretch: 62.5% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("fonts/Archivo-Variable-Italic.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-stretch: 62.5% 125%;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Archivo Black";
  src: url("fonts/ArchivoBlack-Regular.ttf") format("truetype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Variable.ttf") format("truetype-variations");
  font-weight: 100 700;
  font-stretch: 85% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Variable-Italic.ttf") format("truetype-variations");
  font-weight: 100 700;
  font-stretch: 85% 100%;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Variable.ttf") format("truetype-variations");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Variable-Italic.ttf") format("truetype-variations");
  font-weight: 100 800;
  font-style: italic;
  font-display: swap;
}

/* ------------------------------------------------------------
   2. TOKENS
   Brand palette from colors_and_type.css, plus the engine's
   own code-highlighting variables tuned to the palette.
   ------------------------------------------------------------ */

:root {
  /* Brand palette */
  --od-ink: #15243d;
  --od-ink-2: #2b3d5c;
  --od-ink-3: #4f5e78;

  --od-volt: #f2dd55;
  --od-volt-2: #e8c72a;
  --od-volt-soft: #fbf3b8;

  --od-bolt: #2a6fdb;
  --od-bolt-2: #1f58b5;
  --od-bolt-soft: #ddeaf8;
  --od-bolt-light: #5a9bf0;

  --od-sky: #c5e0f2;
  --od-sky-2: #8fbed9;
  --od-sky-soft: #eaf3fa;

  --od-paper: #faf6e9;
  --od-paper-2: #f2ebcf;
  --od-paper-3: #ffffff;

  --od-steel: #6b7585;
  --od-steel-2: #a9b1bd;
  --od-steel-3: #d6dae0;

  --od-border-warm: #e2dab9;
  --od-border-warm-2: #cfc59e;

  /* Type families */
  --od-font-display: "Archivo Black", "Archivo", system-ui, sans-serif;
  --od-font-heading: "Archivo", system-ui, sans-serif;
  --od-font-body: "IBM Plex Sans", system-ui, sans-serif;
  --od-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* Per-appearance aliases. Overridden in the .dark block below,
     so every rule downstream can stay appearance-agnostic. */
  --od-fg: var(--od-ink);
  --od-fg-2: var(--od-ink-2);
  --od-fg-muted: var(--od-steel);
  --od-rule: var(--od-border-warm);
  --od-rule-strong: var(--od-ink);
  --od-action: var(--od-bolt);
  --od-frame: var(--od-ink);
  --od-surface: rgba(255, 255, 255, 0.55);

  /* Mono is not exposed as a preset font, so pin it here. */
  --font-family-mono: var(--od-font-mono);

  /* Code — warm paper card, navy syntax */
  --code-background: #f2ebcf;
  --code-border: #cfc59e;
  --code-text: #15243d;
  --code-comment: #6b7585;
  --code-type: #c4452c;
  --code-include: #1f58b5;
  --code-string: #2f8f5e;
  --code-class-name: #2a6fdb;
  --code-numbers: #d17a2b;
  --code-variables: #2b3d5c;
  --code-functions: #1f58b5;
  --code-literal: #c4452c;

  --dark-code-background: #1d3055;
  --dark-code-border: rgba(250, 246, 233, 0.14);
  --dark-code-text: #faf6e9;
  --dark-code-comment: #8593ab;
  --dark-code-type: #f2dd55;
  --dark-code-include: #5a9bf0;
  --dark-code-string: #7fd3a6;
  --dark-code-class-name: #8fbed9;
  --dark-code-numbers: #e8a15c;
  --dark-code-variables: #c5e0f2;
  --dark-code-functions: #5a9bf0;
  --dark-code-literal: #f2dd55;

  /* Tables — hairline rules, brand-warm */
  --border-table-width: 1px;
  --border-row-width: 1px;
  --border-table-color: #cfc59e;
  --border-row-color: #e2dab9;
  --dark-border-table-color: rgba(250, 246, 233, 0.28);
  --dark-border-row-color: rgba(250, 246, 233, 0.14);
}

/* Dark appearance and inverted layouts (Cover, Section) share
   one set of overrides. */
.dark,
.invert {
  --od-fg: var(--od-paper);
  --od-fg-2: var(--od-paper-2);
  --od-fg-muted: var(--od-steel-2);
  --od-rule: rgba(250, 246, 233, 0.22);
  --od-rule-strong: var(--od-paper);
  --od-action: var(--od-bolt-light);
  /* Volt frame on navy. Deliberate exception to the
     "volt is highlight only" rule — it holds an image against a
     dark ground far better than cream does. */
  --od-frame: var(--od-volt);
  --od-surface: rgba(250, 246, 233, 0.06);
}

/* ------------------------------------------------------------
   3. TYPOGRAPHY
   Display = Archivo Black, uppercase, tight.
   Headings = Archivo 700-800.
   Body = IBM Plex Sans 400.
   h6 = the signature mono eyebrow: LABEL LIKE THIS.
   ------------------------------------------------------------ */

section > :not([class*="layout-"]) h1,
[class*="layout-"] > div h1 {
  font-family: var(--od-font-display);
  font-weight: 900;
  font-size: 3.1em;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

section > :not([class*="layout-"]) h2,
[class*="layout-"] > div h2 {
  font-family: var(--od-font-heading);
  font-weight: 800;
  font-size: 2.35em;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

section > :not([class*="layout-"]) h3,
[class*="layout-"] > div h3 {
  font-family: var(--od-font-heading);
  font-weight: 800;
  font-size: 1.65em;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

section > :not([class*="layout-"]) h4,
[class*="layout-"] > div h4 {
  font-family: var(--od-font-heading);
  font-weight: 700;
  font-size: 1.28em;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* h5 — the quiet sub-line. Body face, medium weight, muted. */
section > :not([class*="layout-"]) h5,
[class*="layout-"] > div h5 {
  font-family: var(--od-font-body);
  font-weight: 500;
  font-size: 1.05em;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--od-fg-muted);
}

/* h6 — EYEBROW. Mono, uppercase, wide tracking. The brand's
   section label (`THE PROBLEM`, `WHAT I DO`, `ENGAGEMENTS`). */
section > :not([class*="layout-"]) h6,
[class*="layout-"] > div h6 {
  font-family: var(--od-font-mono);
  font-weight: 500;
  font-size: 0.72em;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--od-fg-muted);
}

section > :not([class*="layout-"]) p,
[class*="layout-"] > div p,
section > :not([class*="layout-"]) li,
[class*="layout-"] > div li {
  font-family: var(--od-font-body);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}

/* Cover and Section carry the full display lockup. */
.layout-cover h1,
.layout-section h1 {
  font-size: 3.6em;
}

/* Tighten the eyebrow against the headline it labels. */
.layout-cover > div h6 + h1,
.layout-section > div h6 + h1,
.layout-title > div h6 + h1,
.layout-default > div h6 + h1,
.layout-cover > div h6 + h2,
.layout-section > div h6 + h2,
.layout-title > div h6 + h2,
.layout-default > div h6 + h2,
.layout-default > div h6 + h3 {
  margin-top: 0.35em;
}

/* Sub-lines sit close to their headline. */
[class*="layout-"] > div h1 + h4,
[class*="layout-"] > div h1 + h5,
[class*="layout-"] > div h2 + h4,
[class*="layout-"] > div h2 + h5,
[class*="layout-"] > div h1 + p,
[class*="layout-"] > div h2 + p {
  margin-top: 0.3em;
}

strong,
b {
  font-weight: 700;
  color: var(--od-fg);
}

em,
i {
  font-style: italic;
}

/* ------------------------------------------------------------
   4. HIGHLIGHT — the volt marker swipe
   ==highlight== in markdown. One phrase per slide, per brand.
   ------------------------------------------------------------ */

/* GEOMETRY
   The band is anchored to the BASELINE in em, not to a percentage
   of the line box. A percentage is measured against the inline
   content box, which is far taller than the glyphs and has
   different proportions per font — that made the swipe cover half
   of an uppercase Archivo Black h1 but only clip the underside of
   a lowercase Archivo h2. In em, the band scales with the type and
   lands in the same place at every size.

     --od-mark-band  height of the stroke
     --od-mark-drop  how far the stroke sits above the bottom of the
                     content box. Small values push it BELOW the
                     baseline, so the swipe also reads as an
                     underline — raise it to pull the stroke up.
     --od-mark-over  how far the stroke bleeds past each end of the
                     word. A stroke that stops flush with the last
                     letter reads as a drawn rectangle, not a
                     marker — a real one overruns.

   SHAPE
   The stroke is an SVG, not a flat fill: the top edge overshoots
   both ends and the bottom edge is inset, so the ends read as an
   angled chisel tip, and both edges carry a gentle wave. Stretched
   to fit, so on a long highlight the wave relaxes into a longer,
   softer curve.

   ONE path only. An earlier version laid a second, denser pass low
   in the band to suggest a double stroke; it read as mud instead —
   stacked alpha on navy, and a dull band below the letters on
   cream.

   The colour is baked into the SVG — a data URI cannot read a CSS
   variable. To recolour the marker, change the rgb() values in the
   data URIs below. iA Presenter breaks on hex colours inside
   inline SVG, so these must stay rgb().

   There are two strokes: a translucent one for cream slides and an
   opaque one for navy. See the .dark / .invert rule for why. */
mark {
  --od-mark-band: 0.50em;
  --od-mark-drop: 0.04em;
  --od-mark-over: 0.22em;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%2040%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2C6.5%20C40%2C3.5%2070%2C8.5%20108%2C5%20C140%2C2.5%20170%2C7%20200%2C3.5%20L192%2C33.5%20C160%2C37%20130%2C31.5%2096%2C35.5%20C64%2C38.5%2034%2C34%206%2C37.5%20Z%22%20fill%3D%22rgb%28242%2C%20221%2C%2085%29%22%20opacity%3D%220.88%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: calc(100% + var(--od-mark-over) * 2) var(--od-mark-band);
  background-position: calc(var(--od-mark-over) * -1) calc(100% - var(--od-mark-drop));
  color: var(--od-ink);
  padding: 0 0.1em;
  border-radius: 0;
}

/* h1 is uppercase, so its letters are cap-height rather than
   x-height — the stroke has to be taller to cover the same
   proportion of the letter. */
[class*="layout-"] > div h1 mark,
section > :not([class*="layout-"]) h1 mark {
  --od-mark-band: 0.56em;
  --od-mark-over: 0.26em;
}

/* On navy the stroke must be OPAQUE. Translucent yellow lets the
   navy through and reads as dirty olive. Cream slides keep the
   translucent stroke: over paper it reads as real marker ink,
   which is the point. */
.dark mark,
.invert mark {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%2040%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2C6.5%20C40%2C3.5%2070%2C8.5%20108%2C5%20C140%2C2.5%20170%2C7%20200%2C3.5%20L192%2C33.5%20C160%2C37%20130%2C31.5%2096%2C35.5%20C64%2C38.5%2034%2C34%206%2C37.5%20Z%22%20fill%3D%22rgb%28242%2C%20221%2C%2085%29%22%20opacity%3D%221%22%2F%3E%3C%2Fsvg%3E");
}

/* On navy the highlighted text must STAY cream.
   Ink hides the top half of every letter (the stroke no longer
   covers it) and volt makes the word merge into the marker, so
   the highlight stops reading as a highlight. If you ever want
   ink here, raise --od-mark-band to ~1em first so the stroke
   covers the whole word. */
.dark mark,
.invert mark {
  color: var(--od-fg);
}

/* ------------------------------------------------------------
   5. LINKS — bolt blue, thick underline
   ------------------------------------------------------------ */

a,
a:link,
a:visited {
  color: var(--od-action);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------
   6. LISTS — the negation rhythm reads best with tight,
   unfussy markers. Square bullets, ink-colored.
   ------------------------------------------------------------ */

[class*="layout-"] > div ul > li::marker {
  color: var(--od-volt-2);
  content: "\25AA\0020";
}

.dark [class*="layout-"] > div ul > li::marker,
.invert [class*="layout-"] > div ul > li::marker {
  color: var(--od-volt);
}

[class*="layout-"] > div ol > li::marker {
  font-family: var(--od-font-mono);
  font-weight: 600;
  color: var(--od-fg-muted);
}

/* ------------------------------------------------------------
   7. BLOCKQUOTE — stamped, not italic.
   A confident 3px ink rule on the left, flat tint behind.
   ------------------------------------------------------------ */

blockquote {
  font-family: var(--od-font-heading);
  font-weight: 700;
  font-style: normal;
  border-left: 3px solid var(--od-rule-strong);
  padding: 0.15em 0 0.15em 0.7em;
  quotes: none;
}

blockquote::before,
blockquote::after {
  content: none;
}

/* ------------------------------------------------------------
   8. CODE — warm card, stamped border
   ------------------------------------------------------------ */

code,
pre,
kbd {
  font-family: var(--od-font-mono);
  font-variant-ligatures: none;
}

pre {
  border: 2px solid var(--od-border-warm-2);
  border-radius: 8px;
  box-shadow: 4px 4px 0 var(--od-frame);
}

.dark pre,
.invert pre {
  border-color: rgba(250, 246, 233, 0.2);
}

/* Inline code — used for pricing (`$5,000`), so give it weight. */
:not(pre) > code {
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ------------------------------------------------------------
   9. TABLES — hairlines, mono headers.
   The engagements/pricing grid is a table in this brand.
   ------------------------------------------------------------ */

th {
  font-family: var(--od-font-mono);
  font-weight: 600;
  font-size: 0.78em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--od-fg-muted);
}

td {
  font-family: var(--od-font-body);
}

/* ------------------------------------------------------------
   10. RULES — the ⸻ section divider
   ------------------------------------------------------------ */

hr {
  border: none;
  border-top: 2px solid var(--od-rule);
  width: 12%;
  margin-left: 0;
  opacity: 1;
}

.layout-cover hr,
.layout-section hr,
.layout-title hr {
  border-top-color: var(--od-volt);
  border-top-width: 3px;
}

/* ------------------------------------------------------------
   11. IMAGES — stamped frames, never floating.
   Real screenshots read as artifacts, not stock.

   The engine sizes images with `object-fit: contain` inside a
   box stretched to the content column, so the element box is
   almost always WIDER than the picture inside it. A plain
   `border` + `box-shadow` therefore frames the empty box, not
   the image. Chained `drop-shadow()` filters are applied to the
   painted pixels instead, so the frame hugs the actual image at
   whatever size and aspect ratio it lands on.
   ------------------------------------------------------------ */

.layout-caption img,
.layout-grid img,
.layout-v-split img,
.layout-default img,
.layout-title img,
figure img {
  border: none;
  box-shadow: none;
  /* Four directional shadows build the 2px outline; the fifth is
     the offset stamp, cast from that outlined silhouette. */
  filter:
    drop-shadow(2px 0 0 var(--od-frame))
    drop-shadow(-2px 0 0 var(--od-frame))
    drop-shadow(0 2px 0 var(--od-frame))
    drop-shadow(0 -2px 0 var(--od-frame))
    drop-shadow(4px 4px 0 var(--od-frame));
}

/* Full-bleed and background images are exempt — no frame on
   images that are meant to fill the slide. */
.slide-background img,
.backgrounds img,
.layout-title-image img,
.layout-cover img,
.size-cover {
  border: none;
  border-radius: 0;
  box-shadow: none;
  filter: none;
}

figcaption {
  font-family: var(--od-font-mono);
  font-size: 0.7em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--od-fg-muted);
}

/* ------------------------------------------------------------
   12. HEADER / FOOTER / FOOTNOTES — mono, quiet, tracked
   ------------------------------------------------------------ */

.header,
.footer,
.footnotes {
  font-family: var(--od-font-mono);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--od-fg-muted);
}

.header,
.footer {
  text-transform: uppercase;
}

/* ------------------------------------------------------------
   13. LAYOUT FRAMING
   Cover and Section are inverted (navy) via template.json.
   Give Section a volt rule so dividers land hard.
   ------------------------------------------------------------ */

.layout-section > div {
  border-left: 6px solid var(--od-volt);
  padding-left: 0.5em;
}

/* Grid cards read as stamped paper cards on the light presets. */
.layout-grid > div > div {
  border-radius: 8px;
}

/* ------------------------------------------------------------
   14. CHARTS — accent-driven, flat, no gradients
   ------------------------------------------------------------ */

:root {
  --graph-font-family: var(--od-font-mono);
  --graph-stroke-width: 3px;
  --graph-grid-line: var(--od-border-warm);
  --positive-color: #2f8f5e;
  --negative-color: #c4452c;
}

.dark,
.invert {
  --graph-grid-line: rgba(250, 246, 233, 0.18);
  --positive-color: #7fd3a6;
  --negative-color: #e08972;
}

.legend-text,
.label-text {
  font-family: var(--od-font-mono);
  letter-spacing: 0.06em;
}

/* ------------------------------------------------------------
   15. MOBILE — scale the display lockup down, keep the tracking
   ------------------------------------------------------------ */

@media (max-width: 639px) {
  section > :not([class*="layout-"]) h1,
  [class*="layout-"] > div h1 {
    font-size: 2.1em;
  }
  .layout-cover h1,
  .layout-section h1 {
    font-size: 2.3em;
  }
  section > :not([class*="layout-"]) h2,
  [class*="layout-"] > div h2 {
    font-size: 1.75em;
  }
  section > :not([class*="layout-"]) h3,
  [class*="layout-"] > div h3 {
    font-size: 1.4em;
  }
  section > :not([class*="layout-"]) h6,
  [class*="layout-"] > div h6 {
    font-size: 0.68em;
    letter-spacing: 0.14em;
  }
}

/* Created by Claude Opus 4.8 on 2026-07-18 on Jethro-MBP */