@font-face {
  font-family: 'Host Grotesk';
  src: url('fonts/host-grotesk.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'VT323';
  src: url('fonts/vt323.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/jetbrains-mono.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

body[data-publication-theme] {
  --publication-accent: #7856ff;
  --publication-sans: 'Host Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --publication-mono: 'JetBrains Mono', ui-monospace, monospace;
  font-family: var(--publication-sans);
}

body[data-publication-theme="workflow-fieldnotes"] { --publication-accent: #a3e635; }
body[data-publication-theme="desk-signal"] { --publication-accent: #ff9d38; }
body[data-publication-theme="launch-ledger"] { --publication-accent: #ff637d; }
body[data-publication-theme="cutroom"] { --publication-accent: #ffcd29; }
body[data-publication-theme="migration-desk"] { --publication-accent: #a879ff; }
body[data-publication-theme="skill-path"] { --publication-accent: #fb7185; }
body[data-publication-theme="trail-notes"] { --publication-accent: #86d44b; }
body[data-publication-theme="cast-notes"] { --publication-accent: #20c9e8; }
body[data-publication-theme="layer-notes"] { --publication-accent: #ff7b36; }
body[data-publication-theme="vault-notes"] { --publication-accent: #818cff; }
body[data-publication-theme="money-fieldnotes"] { --publication-accent: #34d399; }
body[data-publication-theme="peptide-fieldnotes"] { --publication-accent: #38bdf8; }

body[data-publication-theme] :is(h1, h2, h3, h4, h5, h6, .brand, .footer-brand, .brand-serif, .brand-mark, .brand-icon),
body[data-publication-theme] :is(h1, h2, h3, h4, h5, h6, .brand, .footer-brand) *,
body[data-publication-theme] .calculator-results strong,
body[data-publication-theme] .calculator-result output,
body[data-publication-theme] :is(p, em, button, input, select, textarea, .result-big) {
  font-family: var(--publication-sans) !important;
}

body[data-publication-theme] :is(.meta, .article-meta, .supplier-meta, .small, .fine, .byline, .card-bottom, .media-caption, .hero-media figcaption, .hero-art figcaption, .marketing-hero-media figcaption, .rank-price span, .workspace-bar, .monitor-label, .file-tag, .result-kicker, .buying-source, time, code, pre, kbd, samp) {
  font-family: var(--publication-mono) !important;
}

body[data-publication-theme] :is(.eyebrow, .marketing-kicker, .signal-kicker) {
  font-family: 'VT323', var(--publication-mono) !important;
  font-weight: 400;
  font-size: 1.125rem;
  letter-spacing: .04em;
}

body[data-publication-theme] p.eyebrow {
  font-family: 'VT323', var(--publication-mono) !important;
}

body[data-publication-theme] :is(.hero-media, .hero-art, .marketing-hero-media) {
  background-image: radial-gradient(circle, color-mix(in srgb, var(--publication-accent) 28%, transparent) .75px, transparent 1px);
  background-size: 18px 18px;
  outline: 1px solid color-mix(in srgb, var(--publication-accent) 40%, transparent);
  outline-offset: 3px;
}

body[data-publication-theme] .site-header .brand {
  position: relative;
  padding-inline-end: 14px;
}

body[data-publication-theme] .site-header .brand::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 24%;
  width: 9px;
  height: 3px;
  background: currentColor;
}

body[data-publication-theme] :is(.marketing-kicker, .hero .eyebrow)::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-inline: 2px 10px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

body[data-publication-theme] .publication-art {
  position: relative;
  isolation: isolate;
}

body[data-publication-theme] .publication-graphic {
  position: absolute;
  top: 14px;
  right: 14px;
  width: clamp(120px, 38%, 220px);
  height: auto;
  aspect-ratio: 2;
  padding: 10px;
  color: var(--publication-accent);
  background-color: #1e1e1e;
  background-image: radial-gradient(#ffffff26 .7px, transparent .8px);
  background-size: 12px 12px;
  border: 1px solid currentColor;
  box-shadow: 4px 4px 0 #1e1e1e40;
  pointer-events: none;
  z-index: 1;
}

body[data-publication-theme] .publication-ink {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

@keyframes publication-line {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes publication-caret {
  0%, 49%, 100% { opacity: 1; }
  50%, 99% { opacity: 0; }
}

@keyframes publication-grid {
  from { background-position: 0 0; }
  to { background-position: 12px 12px; }
}

@media (prefers-reduced-motion: no-preference) {
  body[data-publication-theme] .publication-effect-started.publication-art .publication-ink {
    animation: publication-line 1800ms cubic-bezier(.2,.7,.2,1) 1;
  }
  body[data-publication-theme] .publication-effect-started.publication-art .publication-graphic {
    animation: publication-grid 2400ms linear 1;
  }
  body[data-publication-theme] .site-header .brand.publication-effect-started::after {
    animation: publication-caret 900ms steps(1, end) 4;
  }
  body[data-publication-theme] .publication-art.publication-effect-paused .publication-ink,
  body[data-publication-theme] .publication-art.publication-effect-paused .publication-graphic,
  body[data-publication-theme] .site-header .brand.publication-effect-paused::after {
    animation-play-state: paused;
  }
}

@media (prefers-reduced-motion: reduce), print {
  body[data-publication-theme] .publication-ink,
  body[data-publication-theme] .publication-graphic,
  body[data-publication-theme] .site-header .brand::after {
    animation: none !important;
  }
}

@keyframes publication-reveal {
  from { transform: translateY(8px); }
  to { transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
  body[data-publication-theme] .publication-revealed {
    animation: publication-reveal 480ms ease-out 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  body[data-publication-theme] .publication-revealed {
    animation: none !important;
    transition: none !important;
  }
}

@media print {
  body[data-publication-theme] .publication-revealed {
    animation: none !important;
    transition: none !important;
  }
  body[data-publication-theme] :is(.hero-media, .hero-art, .marketing-hero-media) {
    background-image: none;
    outline: none;
  }
}