/* JavaScript Cebu brand tokens v0.1.0. Generated from packages/brand; do not edit. Rules: https://www.jscebu.org/brand.md */

:root {
  --jc-yellow: #FFDF00;
  --jc-ink: #0E0F11;
  --jc-paper: #F4F1EA;
  --jc-font-poster: 'Archivo Variable', 'Archivo', 'Arial Black', sans-serif;
  --jc-font-terminal: 'Space Grotesk Variable', 'Space Grotesk', system-ui, sans-serif;
  --jc-font-journal: 'Inter Tight Variable', 'Inter Tight', system-ui, sans-serif;
  --jc-font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, monospace;
  --jc-font-wordmark: 'Roboto', sans-serif;
  --jc-grid: rgba(255,255,255,0.045);
}

.jc-poster {
  --jc-bg: #FFDF00;
  --jc-text: #0E0F11;
  --jc-muted: #4A4316;
  --jc-accent: #0E0F11;
  --jc-accent-text: #FFDF00;
  --jc-cursor: #0E0F11;
  --jc-line: var(--jc-ink);
  --jc-font-headline: var(--jc-font-poster);
  --jc-font-body: var(--jc-font-poster);
  --jc-weight-headline: 900;
  --jc-weight-body: 600;
  --jc-weight-mono: 600;
  --jc-headline-case: uppercase;
  background-color: var(--jc-bg);
  color: var(--jc-text);
  font-family: var(--jc-font-body);
  font-weight: var(--jc-weight-body);
}

.jc-terminal {
  --jc-bg: #0E0F11;
  --jc-text: #E9E9EC;
  --jc-muted: #9C9CA3;
  --jc-accent: #FFDF00;
  --jc-accent-text: #0E0F11;
  --jc-cursor: #FFDF00;
  --jc-line: rgba(255,255,255,0.08);
  --jc-font-headline: var(--jc-font-terminal);
  --jc-font-body: var(--jc-font-terminal);
  --jc-weight-headline: 700;
  --jc-weight-body: 400;
  --jc-weight-mono: 400;
  --jc-headline-case: none;
  background-color: var(--jc-bg);
  color: var(--jc-text);
  font-family: var(--jc-font-body);
  font-weight: var(--jc-weight-body);
  background-image: linear-gradient(var(--jc-grid) 1px, transparent 1px), linear-gradient(90deg, var(--jc-grid) 1px, transparent 1px);
  background-size: 24px 24px;
}

.jc-journal {
  --jc-bg: #F4F1EA;
  --jc-text: #0E0F11;
  --jc-muted: #6B675F;
  --jc-accent: #FFDF00;
  --jc-accent-text: #0E0F11;
  --jc-cursor: #FFDF00;
  --jc-line: var(--jc-ink);
  --jc-font-headline: var(--jc-font-journal);
  --jc-font-body: var(--jc-font-journal);
  --jc-weight-headline: 800;
  --jc-weight-body: 400;
  --jc-weight-mono: 400;
  --jc-headline-case: none;
  background-color: var(--jc-bg);
  color: var(--jc-text);
  font-family: var(--jc-font-body);
  font-weight: var(--jc-weight-body);
}

.jc-headline {
  font-family: var(--jc-font-headline);
  font-weight: var(--jc-weight-headline);
  text-transform: var(--jc-headline-case);
}

.jc-mono {
  font-family: var(--jc-font-mono);
  font-weight: var(--jc-weight-mono, 400);
}

.jc-label {
  font-family: var(--jc-font-mono);
  font-weight: var(--jc-weight-mono, 400);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--jc-muted);
}

/* The event line: WHEN · WHERE · JSCEBU.ORG, on every event graphic. */

.jc-event-line {
  font-family: var(--jc-font-mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* Real photos: mark them .jc-photo and never filter them. */

.jc-photo {
  display: block;
  object-fit: cover;
}

/* The cursor: wrap the last word and the cursor in .jc-nw so the cursor never wraps alone. */

.jc-nw {
  white-space: nowrap;
}

.jc-cursor {
  display: inline-block;
  width: .5em;
  height: .8em;
  margin-left: .08em;
  vertical-align: -.05em;
  background: var(--jc-cursor, currentColor);
}

.jc-cursor--blink {
  animation: jc-blink 1.05s steps(1) infinite;
}

@keyframes jc-blink {
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .jc-cursor--blink { animation: none; }
}

/* The sticker: use the sticker files, which already carry the white die-cut edge. */

.jc-sticker {
  display: inline-block;
  transform: rotate(-8deg);
}

.jc-sticker--shadow {
  filter: drop-shadow(0 .35em .5em rgba(0, 0, 0, .35));
}

/* The Journal highlighter: a yellow band behind the key phrase. */

.jc-highlight {
  color: var(--jc-ink);
  background: linear-gradient(transparent 40%, var(--jc-yellow) 40%);
  padding: 0 .08em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}