/*
 * Quark 2 — user customizations
 *
 * This file is safe to edit. It is loaded last so anything here overrides
 * theme.css without having to mark rules !important.
 */

@font-face {
  font-family: 'SourceSans3';
  src: url('../fonts/source-sans-3/SourceSans3-VariableFont_wght.woff2') format('woff2');
}
 
:root,
:root[data-theme="light"] {
  --epa-bg: #fbfbfc; /* page canvas — whisper-soft gray */
  --epa-bg-elev: #ffffff; /* cards / content surface */
  --epa-bg-muted: #f2f2f4; /* recessed */
  --epa-bg-inverse: #111111;

  --epa-violet: #7f4997;
  --epa-violet-light: #baabf7;
  --epa-violet-lightest: #ebe6ff;
  --epa-green: #7eb927;
  --epa-green-light: #c7ff99;
  --epa-green-lightest: #e6ffd1;


  --epa-heading-color: var(--epa-violet);
  --epa-text: #242424;
  --epa-text-strong: #111111;
  --epa-text-muted: #898989;
  --epa-text-inverse: #ffffff;

  --epa-border-ring: rgba(34, 42, 53, 0.08);
  --epa-border-strong: rgba(34, 42, 53, 0.14);
  --epa-divider: rgba(34, 42, 53, 0.08);

  --epa-shadow-card:
    rgba(19, 19, 22, 0.7) 0 1px 5px -4px, rgba(34, 42, 53, 0.08) 0 0 0 1px,
    rgba(34, 42, 53, 0.05) 0 4px 8px 0;
  --epa-shadow-raised:
    rgba(19, 19, 22, 0.7) 0 1px 5px -4px, rgba(34, 42, 53, 0.1) 0 0 0 1px,
    rgba(34, 42, 53, 0.08) 0 12px 28px -8px;
  --epa-shadow-dropdown:
    rgba(19, 19, 22, 0.7) 0 1px 5px -4px, rgba(34, 42, 53, 0.1) 0 0 0 1px,
    rgba(34, 42, 53, 0.12) 0 16px 32px -12px;
  --epa-shadow-inset: inset 0 1px 1.9px rgba(0, 0, 0, 0.16);
  --epa-shadow-hl: inset 0 2px 0 rgba(255, 255, 255, 0.15);

  --epa-radius-xs: 4px;
  --epa-radius-sm: 6px;
  --epa-radius: 8px;
  --epa-radius-md: 12px;
  --epa-radius-lg: 16px;
  --epa-radius-pill: 9999px;

  --epa-nav-bg: rgba(255, 255, 255, 0.78);
  --epa-nav-border: rgba(34, 42, 53, 0.08);

  /* Pico overrides */
  --pico-font-family-sans-serif:
    "SourceSans3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pico-font-family-display:
    "SourceSans3", "Inter", sans-serif;
  --pico-font-family-monospace:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --pico-font-size: 16px;
  --pico-line-height: 1.6;
  --pico-font-weight: 400;
  --pico-border-radius: var(--epa-radius);
  --pico-spacing: 1rem;
  --pico-background-color: var(--epa-bg);
  --pico-color: var(--epa-text);
  --pico-h1-color: var(--epa-heading-color);
  --pico-h2-color: var(--epa-heading-color);
  --pico-h3-color: var(--epa-heading-color);
  --pico-h4-color: var(--epa-heading-color);
  --pico-h5-color: var(--epa-heading-color);
  --pico-h6-color: var(--epa-heading-color);
  --pico-muted-color: var(--epa-text-muted);
  --pico-muted-border-color: var(--epa-divider);
  --pico-primary: var(--epa-text);
  --pico-primary-hover: #000000;
  --pico-primary-focus: var(--epa-focus-ring);
  --pico-primary-inverse: var(--epa-text-inverse);
  --pico-secondary: var(--epa-text-muted);
  --pico-secondary-hover: var(--epa-text);
  --pico-contrast: var(--epa-text);
  --pico-contrast-hover: #000000;
  --pico-contrast-inverse: var(--epa-text-inverse);
  --pico-card-background-color: var(--epa-bg-elev);
  --pico-card-border-color: transparent;
  --pico-card-box-shadow: var(--epa-shadow-card);
  --pico-card-sectioning-background-color: var(--epa-bg-muted);
  --pico-form-element-background-color: var(--epa-bg);
  --pico-form-element-border-color: rgba(34, 42, 53, 0.16);
  --pico-form-element-color: var(--epa-text);
  --pico-form-element-focus-color: var(--epa-focus-ring);
  /* Pico draws checked checkbox/radio fill from these — point them at the accent */
  --pico-primary-background: var(--epa-accent);
  --pico-primary-border: var(--epa-accent);
}

:root[data-theme="dark"] {
  --epa-bg: #08090b;
  --epa-bg-elev: #1d1f25; /* card surface — lifted for visibility */
  --epa-bg-muted: #2a2d34; /* recessed / hover state */
  --epa-bg-inverse: #f5f5f5;

  --epa-violet: #7f4997;
  --epa-violet-light: ##baabf7;
  --epa-violet-lightest: #ebe6ff;
  --epa-green: #7eb927;
  --epa-green-light: #c7ff99;
  --epa-green-lightest: #e6ffd1;

  --epa-text: #f2f2f3;
  --epa-text-strong: #ffffff;
  --epa-text-muted: #9a9aa0;
  --epa-text-inverse: #111111;

  --epa-border-ring: rgba(255, 255, 255, 0.14);
  --epa-border-strong: rgba(255, 255, 255, 0.2);
  --epa-divider: rgba(255, 255, 255, 0.1);

  --epa-shadow-card:
    rgba(0, 0, 0, 0.85) 0 1px 5px -4px, rgba(255, 255, 255, 0.14) 0 0 0 1px,
    rgba(0, 0, 0, 0.55) 0 4px 12px 0;
  --epa-shadow-raised:
    rgba(0, 0, 0, 0.85) 0 1px 5px -4px, rgba(255, 255, 255, 0.14) 0 0 0 1px,
    rgba(0, 0, 0, 0.65) 0 14px 32px -8px;
  --epa-shadow-dropdown:
    rgba(0, 0, 0, 0.85) 0 1px 5px -4px, rgba(255, 255, 255, 0.14) 0 0 0 1px,
    rgba(0, 0, 0, 0.75) 0 16px 32px -12px;
  --epa-shadow-inset: inset 0 1px 1.9px rgba(0, 0, 0, 0.5);
  --epa-shadow-hl: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  --epa-nav-bg: rgba(11, 11, 12, 0.78);
  --epa-nav-border: rgba(255, 255, 255, 0.06);

  --pico-background-color: var(--epa-bg);
  --pico-color: var(--epa-text);
  --pico-muted-color: var(--epa-text-muted);
  --pico-muted-border-color: var(--epa-divider);
  --pico-primary: var(--epa-text-strong);
  --pico-primary-hover: #ffffff;
  --pico-primary-inverse: var(--epa-text-inverse);
  --pico-contrast: var(--epa-text-strong);
  --pico-contrast-inverse: var(--epa-text-inverse);
  --pico-card-background-color: var(--epa-bg-elev);
  --pico-card-sectioning-background-color: var(--epa-bg-muted);
  --pico-form-element-background-color: var(--epa-bg-elev);
  --pico-form-element-border-color: rgba(255, 255, 255, 0.12);
  --pico-form-element-color: var(--epa-text);
  --pico-primary-background: var(--epa-accent);
  --pico-primary-border: var(--epa-accent);
}

/* ---------- Typography ---------- */

h1,
h2,
h3,
h4,
h5,
h6,
.display,
.h-display {
  font-family: var(--pico-font-family-display);
  color: var(--epa-heading-color);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin-top: 0;
  margin-bottom: 0.4em;
}

/* h1 — airy, display scale, lighter weight */
h1 {
  font-size: clamp(2.25rem, 5vw + 1rem, 3.75rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.025em;
}

/* h2 — confident, tighter, bolder, subtle accent bar */
h2 {
  font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2.125rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  position: relative;
}
h2::before {
  content: "";
  display: none;
/*  width: 28px;*/
/*  height: 3px;*/
/*  border-radius: 2px;*/
/*  background: var(--q2-text-strong);*/
/*  margin-bottom: 0.7rem;*/
/*  opacity: 0.9;*/
}

/* h3 — workhorse section heads, medium weight */
h3 {
  font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
}

h4 {
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
}
h5 {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.2px;
}
h6 {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--q2-text-muted);
}
strong {
  font-weight: 800;
  color: var(--epa-heading-color);
 
}
.exergue {
  max-width: 30%;
  font-weight: 600;
  background-color: var(--epa-green-lightest);
  color: var(--epa-violet);
  text-align: center;
  padding: 1em;
  margin: 1em;
  
}
div.right,
img.right {
  float: right;
}
div.left,
img.left {
  float: left;
}
img.roundedThumbGreen {
  max-width: 10em;
  border-radius: 10em;
  border: .2em solid var(--epa-green);
  background-color: var(--epa-green-lightest)
}
img.roundedThumbViolet {
  max-width: 10em;
  border-radius: 10em;
  border: .2em solid var(--epa-violet);
  background-color: var(--epa-violet-lightest)
}