

@font-face {
  font-family: "CONTRA Navigation";
  src: url("/assets/contra-nav-apfel-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "CONTRA Navigation";
  src: url("/assets/contra-nav-apfel-medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
:root { --site-header-height: 72px; }

.custom-scrollbar {
  --sb-track-color: var(--color-theme-bg);
  --sb-thumb-color: color-mix(in srgb, var(--color-theme-fg) 45%, var(--color-theme-bg));
  --sb-divider-color: var(--color-theme-bg);
}

html.custom-scrollbar { scrollbar-color: var(--sb-thumb-color) var(--sb-track-color); scrollbar-width: thin; }
#home { scroll-margin-top: var(--site-header-height); }
header {
  --contra-nav-surface: #e3e7eb;
  --contra-nav-ink: #1a1b1c;
  --contra-nav-accent: var(--color-mint, #ff9b54);
  --contra-nav-cell: calc(var(--site-header-height) - 8px);
  --contra-nav-logo: 36px;
  --contra-nav-label: 18px;
  --contra-nav-padding: 32px;
  grid-template-columns: minmax(0, 1fr) var(--contra-nav-cell);
  gap: 4px;
  height: var(--site-header-height);
  min-height: var(--site-header-height);
  padding: 4px;
  border: 0;
  background: var(--contra-nav-ink);
  color: var(--contra-nav-ink);
  font-family: "CONTRA Navigation", Arial, sans-serif;
}
header > :first-child,
header > :nth-child(2) { min-width: 0; border: 0; }
header > :first-child > :nth-child(2),
header > :first-child > .mx-auto { display: none; }
header a:has(img[src="/local/brand-mark.svg"]) {
  position: relative;
  justify-content: flex-start;
  width: 100%;
  height: var(--contra-nav-cell);
  padding: 0 24px;
  background: var(--contra-nav-surface);
  color: var(--contra-nav-ink);
}

header img[src="/local/brand-mark.svg"] {
  display: block;
  width: auto;
  height: var(--contra-nav-logo);
  max-width: 100%;
}
header a:focus-visible,
header button:focus-visible {
  outline: 2px solid var(--contra-nav-ink);
  outline-offset: -6px;
}
header > :nth-child(2) { gap: 4px; }
header > :nth-child(2) > :first-child {
  flex: 0 0 auto;
  gap: 4px;
  height: var(--contra-nav-cell);
  padding: 0;
}
header > :nth-child(2) > :first-child > :first-child { display: block; }
header > :first-child > :nth-child(2) ul,
header > :nth-child(2) > :first-child > :first-child ul {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  height: var(--contra-nav-cell);
  padding: 0;
}
header > :first-child > :nth-child(2) li,
header > :nth-child(2) > :first-child > :first-child li {
  display: block;
  height: var(--contra-nav-cell);
}
header > :first-child > :nth-child(2) li > span,
header > :first-child > :nth-child(2) li > span > span,
header > :nth-child(2) > :first-child > :first-child li > span,
header > :nth-child(2) > :first-child > :first-child li > span > span {
  display: flex;
  height: 100%;
}
header > :first-child > :nth-child(2) a,
header > :nth-child(2) > :first-child > :first-child a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--contra-nav-cell);
  padding: 0 var(--contra-nav-padding);
  background: var(--contra-nav-surface);
  color: var(--contra-nav-ink);
  font-size: var(--contra-nav-label);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}
header > :first-child > :nth-child(2) a > [aria-hidden],
header > :nth-child(2) > :first-child > :first-child a > [aria-hidden] {
  background-color: var(--contra-nav-accent);
}
header > :first-child > :nth-child(2) a:focus-visible,
header > :nth-child(2) > :first-child > :first-child a:focus-visible {
  background-color: var(--contra-nav-accent);
}
header > :nth-child(2) > :first-child > button {
  width: var(--contra-nav-cell);
  height: var(--contra-nav-cell);
  margin: 0;
  flex-shrink: 0;
  background: var(--contra-nav-surface);
  color: var(--contra-nav-ink);
}
header > :nth-child(2) > button {
  width: auto;
  min-width: 0;
  height: var(--contra-nav-cell);
  padding: 0 var(--contra-nav-padding);
  background: var(--contra-nav-accent);
  color: var(--contra-nav-ink);
  font-family: inherit;
  font-size: var(--contra-nav-label);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: uppercase;
}
header > :nth-child(2) > button::before { background: var(--contra-nav-ink); }
header > :nth-child(2) > button:hover { color: var(--contra-nav-surface); }
header > :last-child > button {
  justify-content: center;
  width: var(--contra-nav-cell);
  height: var(--contra-nav-cell);
  padding: 0;
  background: var(--contra-nav-surface);
  color: var(--contra-nav-ink);
}
header > :last-child > button > span:first-child {
  position: absolute;
  width: 1px;
  height: 1px !important;
  overflow: hidden;
  clip-path: inset(50%);
}
header [role="dialog"] {
  top: var(--site-header-height);
  color: rgb(var(--theme-fg));
}
header [role="dialog"] a:focus-visible,
header [role="dialog"] button:focus-visible {
  outline-color: rgb(var(--theme-fg));
}
@media (min-width: 64rem) {
  :root { --site-header-height: 80px; }
  header {
    --contra-nav-logo: 44px;
    --contra-nav-label: clamp(13px, 1.25vw, 18px);
    --contra-nav-padding: clamp(12px, 1.4vw, 27px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  header > :first-child { gap: 4px; }
  header a:has(img[src="/local/brand-mark.svg"]) {
    flex: 1 1 0%;
    width: auto;
    min-width: 0;
  }
  header > :first-child > :nth-child(2) {
    display: block;
    flex: 0 0 auto;
  }
  header > :first-child > :nth-child(2) li:not(:first-child),
  header > :nth-child(2) > :first-child > :first-child li:first-child {
    display: none;
  }
  header > :nth-child(2) > :first-child {
    flex: 1 1 0%;
    min-width: 0;
  }
  header > :nth-child(2) > :first-child > :first-child {
    flex: 1 1 0%;
    min-width: 0;
  }
  header > :nth-child(2) > :first-child > :first-child li {
    flex: 1 0 auto;
  }
  header > :nth-child(2) > :first-child > :first-child li > span,
  header > :nth-child(2) > :first-child > :first-child li > span > span,
  header > :nth-child(2) > :first-child > :first-child a {
    width: 100%;
  }
  header > :nth-child(2) > :first-child > button {
    width: clamp(44px, 4vw, 72px);
  }
}
@media (prefers-reduced-motion: reduce) {
  header > :nth-child(2) > button:hover { background: var(--contra-nav-ink); }
}

[data-contra-search-card] {
  position: relative;
  z-index: 1;
  transform: translate3d(0, var(--contra-search-y, 0px), 0);
}

[data-contra-search-card="desktop"]::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 2px;
  background-color: inherit;
  pointer-events: none;
}

[data-contra-search-moving] {
  will-change: transform;
}

@media (max-width: 63.999rem) {
  [data-page-builder-section="heroSection"] .lg\:hidden > .relative > .grid {
    position: relative;
    top: auto;
    container-type: inline-size;
  }

  [data-page-builder-section="heroSection"] .lg\:hidden > .relative > .grid > * {
    height: min(50vw, calc((100vh - var(--site-header-height)) / 2));
    height: min(50cqi, calc((100svh - var(--site-header-height)) / 2));
    padding-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-contra-search-card] {
    transform: none;
    will-change: auto;
  }
}

#about {
  border-bottom: 1px solid var(--color-theme-fg);
}
#about > :first-child > :first-child .font-mono {
  font-size: clamp(1.75rem, 3.5vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.04em;
}
#about > :first-child > :first-child .size-8 {
  width: clamp(0.75rem, 1.1vw, 1rem);
  height: clamp(0.75rem, 1.1vw, 1rem);
}
[data-page-builder-section="heroSection"] .bg-grey p.text-headline-50 {
  font-size: clamp(3rem, 9.5vw, 11rem);
  letter-spacing: -0.055em;
}
.contra-hero-philosophy { min-width: 0; container-type: inline-size; }

@property --contra-pie-sweep { syntax: '<number>'; inherits: true; initial-value: 1; }

.contra-hero-pie { position: relative; display: flex; flex: 1; flex-direction: column; min-height: 0; padding: 20px; color: #232323; transition: background-color .3s; }
@media (hover: hover) and (pointer: fine) { .contra-hero-pie:hover { background-color: rgba(255, 255, 255, .12); } }
.contra-hero-pie:focus-visible { outline: 2px solid currentColor; outline-offset: -5px; box-shadow: none; }
.contra-hero-pie-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.contra-hero-pie-head > span:last-child { font-size: 24px; line-height: 1; }
.contra-hero-pie-head svg { display: block; width: 18px; height: 18px; }
.contra-hero-pie-empty { margin-top: auto; font-size: 16px; }
.contra-hero-pie-figure { display: flex; flex: 1; align-items: center; justify-content: center; min-height: 0; margin: 14px 0 16px; }
.contra-hero-pie-chart { display: block; width: clamp(150px, min(100cqi - 40px, (100svh - var(--site-header-height, 80px)) / 2 - 190px), 440px); height: auto; aspect-ratio: 1; overflow: visible; -webkit-mask: conic-gradient(#000 calc(var(--contra-pie-sweep) * 360deg), transparent 0); mask: conic-gradient(#000 calc(var(--contra-pie-sweep) * 360deg), transparent 0); }
.contra-hero-pie[data-pie-state="ready"] .contra-hero-pie-chart { --contra-pie-sweep: 0; }
.contra-hero-pie[data-pie-state="drawn"] .contra-hero-pie-chart { --contra-pie-sweep: 1; transition: --contra-pie-sweep 1.6s cubic-bezier(.65, 0, .35, 1); }
.contra-hero-pie-chart line { stroke: var(--color-mint); stroke-width: .9; pointer-events: none; }

.contra-hero-pie-label { font-family: var(--font-mono); font-size: 12px; pointer-events: none; }
.contra-hero-pie-label-ticker { font-size: 8px; letter-spacing: .06em; }
.contra-hero-pie-slice, .contra-hero-pie-row, .contra-hero-pie-label { transition: opacity .3s ease; }
.contra-hero-pie[data-pie-focus] [data-pie-slice]:not([data-pie-current]),
.contra-hero-pie[data-pie-focus] [data-pie-row]:not([data-pie-current]),
.contra-hero-pie[data-pie-focus] .contra-hero-pie-label:not([data-pie-current]) { opacity: .3; }
.contra-hero-pie-legend { display: grid; gap: 6px; min-width: 0; }
.contra-hero-pie-row { display: grid; grid-template-columns: 10px 44px minmax(0, 1fr) auto 38px; gap: 8px; align-items: center; font-size: 13px; line-height: 1.2; }

.contra-hero-pie-row i { width: 10px; height: 10px; box-shadow: inset 0 0 0 1px #232323; font-style: normal; }
.contra-hero-pie-row strong, .contra-hero-pie-row > span:nth-child(4), .contra-hero-pie-row > span:last-child { font-family: var(--font-mono); font-weight: 400; font-size: 12px; }
.contra-hero-pie-row > span:last-child { text-align: right; }
.contra-hero-pie-total { padding-top: 6px; border-top: 1px solid rgba(35, 35, 35, .35); }
.contra-hero-pie-total i { box-shadow: none; }

@media (min-width: 64rem) and (max-width: 1100px) {
  .contra-hero-pie-row { gap: 6px; grid-template-columns: 10px 36px minmax(max-content, 1fr) auto 34px; }
}

@media (forced-colors: active) {
  
  .contra-hero-philosophy, .contra-hero-pie { forced-color-adjust: none; }
}

@media (min-width: 64rem) and (max-height: 760px) {
  .contra-hero-pie { padding: 14px 20px; }
  .contra-hero-pie-figure { margin: 8px 0 10px; }
  .contra-hero-pie-legend { gap: 3px; }
  .contra-hero-pie-row { font-size: 12px; }
  .contra-hero-pie-chart { width: clamp(84px, min(100cqi - 40px, (100svh - var(--site-header-height, 80px)) / 2 - 172px), 440px); }
}

[data-contra-headline] {
  transform: translate3d(0, var(--contra-headline-y, 0px), 0);
}

#performance .contra-fund-performance-metrics { grid-auto-rows: 1fr; }
@media (max-width: 63.999rem) {
  .contra-hero-pie-legend { width: min(100%, 380px); margin-inline: auto; }
  [data-page-builder-section="heroSection"] .bg-grey p.text-headline-50 { font-size: clamp(1.3rem, 8.5vw, 5rem); }
  .contra-hero-philosophy { min-height: 440px; }
  .contra-hero-pie { padding: 18px 12px 24px; }
  .contra-hero-pie-chart { width: min(100cqi - 24px, 330px); }
}
@media (prefers-reduced-motion: reduce) { .contra-hero-pie, .contra-hero-pie-slice, .contra-hero-pie-row, .contra-hero-pie-label { transition: none; } }

header a[aria-label] .transform-3d { transform: none !important; }

.contra-fund-section :focus-visible { box-shadow: none; }
html:not([data-keyboard-focus]) header :focus-visible { outline: none !important; box-shadow: none !important; }
header :focus-visible { box-shadow: none; }

#home:focus, #portfolio:focus, #performance:focus { outline: none; }

[data-page-builder-section="heroSection"] [data-text="true"] { text-wrap-style: pretty; max-width: none; }
@media (min-width: 64rem) and (max-width: 1180px) { [data-page-builder-section="heroSection"] [data-text="true"] { font-size: 18px; } }

html[data-contra-uncovered] div[aria-hidden="true"].fixed.inset-0.isolate.z-3:not(.cominvi-splash) { display: none !important; }
html[data-contra-uncovered] [style*="opacity:0.001"], html[data-contra-uncovered] [style*="opacity: 0.001"] { opacity: 1 !important; }
html[data-contra-uncovered] header [style*="translateY(100%)"] { transform: none !important; }

html[data-contra-uncovered] header button[aria-expanded] { visibility: hidden; }

div[aria-hidden="true"].fixed.inset-0.isolate.z-3.bg-black:not(.cominvi-splash)::after {
  content: ""; position: absolute; left: 50%; bottom: 18vh; width: 44px; height: 2px; margin-left: -22px;
  background: #ff9b54; opacity: 0; animation: contra-waiting 1.4s ease-in-out 1s infinite;
}
@keyframes contra-waiting { 0%, 100% { opacity: 0; transform: scaleX(.3); } 50% { opacity: .9; transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  div[aria-hidden="true"].fixed.inset-0.isolate.z-3.bg-black:not(.cominvi-splash)::after { animation: none; opacity: .6; transform: none; transition: opacity 0s 1s; }
}

footer :focus-visible { box-shadow: none; }

.contra-fund-section p, .contra-fund-trade-what, .contra-fund-company, .contra-fund-metric-note, .contra-fund-panel-caption > span { text-wrap-style: pretty; }

@media print {
  .cominvi-splash, div[aria-hidden="true"].fixed.inset-0.isolate.z-3 { display: none !important; }
  .contra-fund-reveal-ready { opacity: 1 !important; transform: none !important; }
  [style*="opacity:0.001"], [style*="opacity: 0.001"] { opacity: 1 !important; }
  [data-page-builder-section="heroSection"] [style*="transform"] { transform: none !important; }
  header, [data-page-builder-section="heroSection"] .sticky { position: static !important; }
  .contra-hero-pie, .contra-hero-philosophy { break-inside: avoid; min-height: 0 !important; }
  .contra-fund-position, .contra-fund-performance-item, .contra-fund-headline { break-inside: avoid; }
  .contra-fund-headline .contra-fund-aum-caption { color: #fff; }
  .contra-fund-section, .contra-hero-philosophy, .contra-fund-headline { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media (max-width: 63.999rem) and (max-height: 500px) {
  .contra-hero-philosophy { min-height: 0; }
  .contra-hero-pie { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 24px; align-items: center; }
  .contra-hero-pie-head { grid-column: 1 / -1; }
  .contra-hero-pie-figure { margin: 12px 0 0; }
  .contra-hero-pie .contra-hero-pie-chart { width: clamp(120px, min(50cqi - 36px, 100svh - var(--site-header-height) - 96px), 260px); }
  .contra-hero-pie-legend { margin: 12px 0 0; }
}

@media (min-width: 64rem) and (max-height: 760px) { .contra-hero-pie-label { display: none; } }
