/* Snackdriven v2.3 site integration by OpenAI Codex.
   Approved source: design-system-v2.3.0-local.1. Loaded after page styles.
   Felt Presence deliberately retains its existing styles and does not load this file. */
@font-face {
  font-family: Manrope;
  src: url('/assets/brand/fonts/Manrope.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Mono';
  src: url('/assets/brand/fonts/DMMono.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@media screen {
  :root {
    color-scheme: dark;
    --site-bg: var(--ca-surface);
    --bg: var(--ca-surface);
    --bg-sidebar: var(--ca-surfaceRaised);
    --bg-inset: var(--ca-surfaceRaised);
    --site-fg: var(--ca-text);
    --fg: var(--ca-text);
    --site-green: var(--ca-brand);
    --green: var(--ca-brand);
    --cyan: var(--ca-brand);
    --teal: var(--ca-interactive);
    --site-magenta: var(--ca-interactive);
    --magenta: var(--ca-interactive);
    --muted: var(--ca-textMuted);
    --border: var(--ca-rule);
    --border-strong: var(--ca-rule);
    --font-body: Manrope, Arial, sans-serif;
    --font-display: Manrope, Arial, sans-serif;
    --font-mono: 'DM Mono', ui-monospace, monospace;
    --glow-green: none;
    --glow-heading: none;
  }
  body { font: 400 16px/1.65 var(--font-body); }
  a { transition: color 120ms ease; }
  a:hover { color: var(--ca-interactive); }
  a:focus-visible, button:focus-visible, summary:focus-visible,
  #portfolio-overview :is(a, summary):focus-visible {
    outline: 2px solid var(--ca-focus);
    outline-offset: 5px;
  }
  ::selection { background: var(--ca-highlight); color: var(--ca-text); }
  .neon, .neon span, .topbar .brand .host, .flickering { text-shadow: none; animation: none; }
  .cursor, #portfolio-overview .pr-cursor { display: none; }
  .sd-brand, .topbar .brand.sd-brand, #portfolio-overview .pr-host.sd-brand,
  .portfolio-case .site-name.sd-brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 12px;
    padding: 10px 0;
    min-height: 52px;
    max-width: none;
    text-decoration: none;
    line-height: 1;
  }
  .sd-brand img { display: block; flex-shrink: 0; height: auto; }
  .sd-brand img:first-child { width: 32px; }
  .sd-brand img:last-child { width: 200px; }
  .shell { max-width: 1216px; padding: 28px 48px 64px; }
  .topbar { align-items: center; padding-bottom: 22px; margin-bottom: 56px; letter-spacing: 0; }
  .topbar nav { font: 400 14px/1.6 var(--font-body); gap: 8px 26px; }
  .topbar nav a[aria-current='page'] { color: var(--ca-text); text-decoration: none; border-bottom: 2px solid var(--ca-brand); }
  .layout { grid-template-columns: 300px minmax(0, 1fr); gap: 64px; }
  .rail { padding-right: 32px; }
  .rail-home .prompt-title { font: 600 var(--sd-home-title-desktop)/1.15 var(--font-display); letter-spacing: -.035em; }
  .prompt-title .cmd { color: var(--ca-text); }
  .page-intro { font-size: 16px; line-height: 1.65; }
  .work-route { margin-top: 24px; color: var(--ca-interactive); text-decoration: none; font-size: 14px; }
  .reading { font-size: 16px; line-height: 1.65; }
  .post-layout { max-width: 66ch; }
  .post-header .post-meta, .post-row .post-meta, .post-meta {
    font: 400 var(--sd-metadata)/1.6 var(--font-mono);
    text-transform: none;
    letter-spacing: 0;
    gap: 8px 16px;
  }
  .post-row { padding: 32px 0; }
  .post-row h2 { font: 600 24px/1.3 var(--font-display); letter-spacing: -.025em; }
  .post-row p { font-size: 16px; line-height: 1.65; }
  .post-featured {
    position: relative;
    background: var(--ca-surfaceRaised);
    border: 1px solid var(--ca-rule);
    padding: 32px;
    margin-bottom: 8px;
  }
  .post-featured::before, .post-featured::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    pointer-events: none;
    border-color: var(--ca-brand);
    border-style: solid;
  }
  .post-featured::before { left: -1px; top: -1px; border-width: 2px 0 0 2px; }
  .post-featured::after { right: -1px; bottom: -1px; border-width: 0 2px 2px 0; }
  .post-featured h2 { color: var(--ca-text); font-size: 30px; line-height: 1.18; }
  .entry-label { color: var(--ca-brand); font: 400 13px/1.6 var(--font-mono); margin-bottom: 24px; }
  .blog-index .post-title, .blog-post .post-title, .post-title {
    font: 600 var(--sd-reading-title-desktop)/1.18 var(--font-display);
    color: var(--ca-text);
    letter-spacing: -.035em;
    text-shadow: none;
    text-transform: none;
  }
  article p.lead { font-size: 18px; line-height: 1.65; }
  article h2 { font: 600 24px/1.3 var(--font-display); letter-spacing: -.02em; color: var(--ca-text); }
  article h2::before { content: none; }
  article p a, article li a, .backlink, .post-back { color: var(--ca-interactive); }
  pre { border-radius: 0; border-left: 2px solid var(--ca-brand); }
  code { border-radius: 2px; }
  .site-footer, .site-footer .links, .site-footer .domain { font-size: 12px; letter-spacing: 0; text-transform: none; }
  .site-footer .author-note { font-size: 12px; }
  .badge { font: 400 12px/1.6 var(--font-mono); color: var(--ca-brand); background: var(--ca-surfaceSubtle); text-transform: none; letter-spacing: 0; border: 1px solid var(--ca-rule); }

  /* Portfolio: the existing evidence stays in place, with a quieter hierarchy. */
  #portfolio-overview { max-width: 1216px; padding-inline: 48px; font-size: 16px; }
  #portfolio-overview .pr-top { padding-block: 24px; }
  #portfolio-overview .pr-top nav { font-size: 14px; }
  #portfolio-overview .pr-hero { padding-block: 56px 48px; }
  #portfolio-overview .pr-name, #portfolio-overview .pr-name .pr-glyph {
    font-family: var(--font-display);
    color: var(--ca-text);
    text-shadow: none;
    animation: none;
  }
  #portfolio-overview .pr-name { font-size: 44px; font-weight: 600; line-height: 1.14; letter-spacing: -.035em; }
  #portfolio-overview .pr-role { font: 400 13px/1.6 var(--font-mono); color: var(--ca-brand); margin-top: 16px; }
  #portfolio-overview .pr-promise { font: 600 30px/1.25 var(--font-body); letter-spacing: -.025em; }
  #portfolio-overview .pr-introduction { margin-top: 32px; gap: 64px; }
  #portfolio-overview .pr-copy, #portfolio-overview .pr-evidence dd,
  #portfolio-overview .pr-workflow .pr-evidence dd, #portfolio-overview .pr-products .pr-evidence dd,
  #portfolio-overview .pr-background p, #portfolio-overview .pr-review { font-size: 16px; line-height: 1.65; }
  #portfolio-overview .pr-attribution, #portfolio-overview .pr-intro-side,
  #portfolio-overview .pr-link, #portfolio-overview .pr-secondary,
  #portfolio-overview .pr-writing a, #portfolio-overview summary,
  #portfolio-overview details > p { font-size: 14px; }
  #portfolio-overview .pr-context, #portfolio-overview .pr-evidence dt {
    font: 400 13px/1.6 var(--font-mono);
    color: var(--ca-brand);
  }
  #portfolio-overview .pr-intro-side strong { font-size: 16px; font-weight: 600; }
  #portfolio-overview .pr-section-head h2 { font: 600 26px/1.25 var(--font-body); letter-spacing: -.025em; }
  #portfolio-overview h3, #portfolio-overview .pr-workflow h3,
  #portfolio-overview .pr-products h3 { font-size: 24px; font-weight: 600; letter-spacing: -.025em; }
  #portfolio-overview .pr-selected, #portfolio-overview .pr-personal { padding-top: 40px; }
  #portfolio-overview .pr-case { padding-block: 36px; gap: 64px; }
  #portfolio-overview .pr-workflow { padding: 32px; border: 1px solid var(--ca-rule); margin-top: 28px; }
  #portfolio-overview .pr-products { gap: 40px; }
  #portfolio-overview .pr-products .pr-copy { min-height: 0; }
  #portfolio-overview figcaption { font: 400 12px/1.65 var(--font-mono); }
  #portfolio-overview .pr-button {
    background: var(--ca-surfaceSubtle);
    color: var(--ca-text);
    border: 1px solid var(--ca-interactive);
    border-radius: 0;
    box-shadow: -3px 3px 0 #8B70D7;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
  }
  #portfolio-overview .pr-button:hover { background: var(--ca-surfaceSubtle); color: var(--ca-text); }
  #portfolio-overview .pr-link, #portfolio-overview .pr-evidence dd a,
  #portfolio-overview .pr-writing a { color: var(--ca-interactive); text-decoration: none; }
  #portfolio-overview .pr-evidence dd a { text-decoration: underline; }
  #portfolio-overview .pr-small-heading { color: var(--ca-brand); font-size: 16px; }
  #portfolio-overview .pr-background { margin-top: 48px; padding-block: 32px; }
  #portfolio-overview .pr-close { padding-block: 32px; }
  #portfolio-overview .pr-footer { font-size: 12px; }

  /* Standard case studies retain their evidence and product screenshots. */
  .portfolio-case { --portfolio-rail: 192px; }
  .portfolio-case .case-header::before { display: none; }
  .portfolio-case .case-header { padding-top: 24px; padding-bottom: 20px; border-bottom-width: 1px; }
  .portfolio-case .case-header-inner { display: flex; justify-content: space-between; align-items: center; gap: 12px 32px; }
  .portfolio-case .case-nav { margin-top: 0; font-size: 14px; }
  .portfolio-case .case-intro { padding-block: 40px 0; border-bottom-width: 1px; }
  .portfolio-case h1 { font: 600 var(--sd-page-title-desktop)/1.14 var(--font-display); letter-spacing: -.035em; text-transform: none; text-shadow: none; color: var(--ca-text); }
  .portfolio-case .case-lead { font-size: 18px; line-height: 1.65; }
  .portfolio-case .case-kicker, .portfolio-case .figure-label, .portfolio-case .case-facts dt {
    font: 400 13px/1.6 var(--font-mono); text-transform: none; letter-spacing: 0; color: var(--ca-brand);
  }
  .portfolio-case .case-facts dd { font-size: 14px; }
  .portfolio-case .case-body { font-size: 16px; line-height: 1.65; }
  .portfolio-case .case-body section, .portfolio-case .contents { border-bottom-width: 1px; }
  .portfolio-case .case-body .case-section-label { background: transparent; border-right-width: 1px; font: 500 16px/1.6 var(--font-body); letter-spacing: 0; color: var(--ca-brand); }
  .portfolio-case .case-section-number { font: 400 13px/1.6 var(--font-mono); letter-spacing: 0; color: var(--ca-textMuted); }
  .portfolio-case .case-body h2 { font-family: var(--font-body); font-weight: 600; text-transform: none; letter-spacing: -.02em; color: var(--ca-brand); }
  .portfolio-case figure { border-left-width: 2px; }
  .portfolio-case .case-section-content p { max-width: 66ch; }
  .portfolio-case .case-footer { font-size: 14px; }
  .qa-workflow .qa-stage p, .qa-workflow .case-result { font-size: 16px; }
  .qa-workflow .qa-stage .qa-stage-label, .qa-stages button span,
  .qa-workflow .qa-workbench-note, .qa-corrections dt {
    font: 400 13px/1.6 var(--font-mono);
    text-transform: none;
    letter-spacing: 0;
  }
  .qa-stages button { font-size: 14px; }
  .qa-stages button:focus-visible, .qa-stage:focus-visible,
  .qa-evidence-detail summary:focus-visible { outline: 2px solid var(--ca-focus); outline-offset: -4px; }
  .missing-page h1 { font: 600 36px/1.18 var(--font-display); color: var(--ca-text); letter-spacing: -.035em; }
  .missing-page nav a { color: var(--ca-interactive); min-height: 44px; display: inline-flex; align-items: center; }

  a:is(.work-route, .pr-link, .backlink, .post-back):is(:hover, :focus-visible),
  #portfolio-overview .pr-link:is(:hover, :focus-visible) {
    text-shadow: 0 0 2px rgb(140 219 204 / 48%), 0 0 7px rgb(84 222 193 / 34%);
  }
}

@media screen and (max-width: 980px) {
  .layout { grid-template-columns: 260px minmax(0, 1fr); gap: 40px; }
  .portfolio-case .case-header-inner { display: block; }
  .portfolio-case .case-nav { margin-top: 12px; }
}
@media screen and (max-width: 820px) {
  .shell { padding: 24px 24px 48px; }
  .layout { display: block; }
  .rail { border-right: 0; padding-right: 0; }
  .rail-home .prompt-title { max-width: 20ch; }
  .reading { max-width: none; }
  .post-layout { max-width: 66ch; }
}
@media screen and (max-width: 650px) {
  .sd-brand img:last-child { width: 160px; }
  .sd-brand img:first-child { width: 28px; }
  .sd-brand { gap: 12px; }
  .topbar { gap: 12px; margin-bottom: 36px; }
  .topbar nav { gap: 4px 24px; }
  .rail-home .prompt-title { font-size: var(--sd-home-title-mobile); }
  .post-featured { padding: 24px; }
  .post-featured h2 { font-size: 26px; }
  .blog-index .post-title, .blog-post .post-title, .post-title { font-size: var(--sd-reading-title-mobile); }
  #portfolio-overview { padding-inline: 24px; }
  #portfolio-overview .pr-top { display: block; padding-block: 20px; }
  #portfolio-overview .pr-top nav { justify-content: flex-start; margin-top: 12px; gap: 8px 24px; }
  #portfolio-overview .pr-hero { padding-block: 36px; }
  #portfolio-overview .pr-name { font-size: 32px; }
  #portfolio-overview .pr-promise { font-size: 26px; }
  #portfolio-overview .pr-introduction, #portfolio-overview .pr-case { gap: 28px; }
  #portfolio-overview .pr-intro-side { font-size: 14px; }
  #portfolio-overview .pr-workflow { padding: 24px; }
  #portfolio-overview .pr-case { padding-block: 28px; }
  .portfolio-case h1 { font-size: var(--sd-page-title-mobile); }
  .portfolio-case .case-lead { font-size: 17px; }
  .portfolio-case .case-body .case-section-label { border-bottom-width: 1px; }
  .portfolio-case .case-header-inner { display: block; }
  .portfolio-case .case-nav { margin-top: 12px; }
  .site-footer { gap: 12px; }
}
@media print {
  body { font-family: Manrope, Arial, sans-serif; }
  .sd-brand, .sd-footer-aside { display: none !important; }
  .neon, .neon span, .flickering, #portfolio-overview .pr-name .pr-glyph { text-shadow: none; animation: none; }
}