/* Cisco the Chris site CSS: only rules Webflow cannot express natively (build standard section 1).
   Source: github.com/essentialdowntime/site-ciscothechris-integrations. Loaded once in the site head:
   <link rel="stylesheet" href="https://site-ciscothechris-integrations.cisco-492.workers.dev/cisco.css"> */

/* 0. Type comes from the tag (build standard). The API cannot create h1-h6 tag styles on a new site, so the
   tags take the same Typography tokens here; the sizes still change per breakpoint through the token modes. */
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0; font-family: var(--_typography---font--heading), Georgia, serif; font-weight: var(--_typography---weight--heading); }
h1 { font-size: var(--_typography---heading--h1); line-height: var(--_typography---line-height--tight); }
h2 { font-size: var(--_typography---heading--h2); line-height: var(--_typography---line-height--tight); }
h3 { font-size: var(--_typography---heading--h3); line-height: var(--_typography---line-height--snug); }
h4 { font-size: var(--_typography---heading--h4); line-height: var(--_typography---line-height--snug); }
h5 { font-size: var(--_typography---heading--h5); line-height: var(--_typography---line-height--normal); }
h6 { font-size: var(--_typography---heading--h6); line-height: var(--_typography---line-height--normal); }

/* Paragraphs carry no default margin (gap does the spacing); rich text keeps its rhythm. */
p { margin-top: 0; margin-bottom: 0; }
.w-richtext p + p { margin-top: 1em; }

/* 1. Fraunces with its soft and wonky axes on. Webflow has no font-variation-settings control. */
h1, h2, h3, h4, h5, h6, [class*="heading-style-"] {
  font-variation-settings: "SOFT" 100, "WONK" 1;
}

/* 2. World crossfade. The colors themselves are native: Color Roles modes on .body.is-lava / .body.is-night. */
body, [class*="section_"], .nav_pill, .hero_next, .vibe_card, .show_card, .show_row {
  transition: background-color 1.2s ease, color 1.2s ease, border-color 1.2s ease;
}

/* 3. The liquid field. Shape colors are native (Field tokens); blend, opacity and motion are not. */
.hero_shape {
  mix-blend-mode: multiply;
  opacity: 0.75;
  transition: background-color 1.4s ease, opacity 1.4s ease;
  animation: ctc-morph 22s ease-in-out infinite alternate;
}
.body.is-lava .hero_shape, .body.is-night .hero_shape { mix-blend-mode: screen; opacity: 0.9; }
/* Story and 404 put text over the field. Field/Second (Lava yellow, Night teal) under cream text measured
   1.71:1; Field/Fourth (plum, cobalt) keeps every sample above AA (worst 6.07:1). scripts/field-contrast.mjs */
.body.is-lava .section_story-intro .hero_shape.is-second, .body.is-lava .section_not-found .hero_shape.is-second,
.body.is-night .section_story-intro .hero_shape.is-second, .body.is-night .section_not-found .hero_shape.is-second { background-color: var(--_color-roles---field--fourth); }
.hero_shape.is-first { animation-duration: 24s; }
.hero_shape.is-second { animation-duration: 28s; animation-delay: -6s; }
.hero_shape.is-third { animation-duration: 19s; animation-delay: -11s; }
.hero_shape.is-fourth { animation-duration: 31s; animation-delay: -3s; }
@keyframes ctc-morph {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1);       border-radius: 42% 58% 63% 37% / 41% 47% 53% 59%; }
  33%  { transform: translate(8%, 6%) rotate(40deg) scale(1.08); border-radius: 63% 37% 45% 55% / 55% 62% 38% 45%; }
  66%  { transform: translate(-6%, 10%) rotate(-25deg) scale(0.95); border-radius: 37% 63% 58% 42% / 62% 38% 62% 38%; }
  100% { transform: translate(5%, -6%) rotate(70deg) scale(1.05); border-radius: 55% 45% 38% 62% / 45% 55% 45% 55%; }
}
.hero_grain {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.18;
  pointer-events: none;
}

/* 4. The iridescent ring on Book me. The fill is the Daylight ink in every world, so white text always reads. */
@property --ctc-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.button.is-iridescent {
  border: 2px solid transparent;
  background:
    linear-gradient(#1d1a14, #1d1a14) padding-box,
    conic-gradient(from var(--ctc-angle), #ff7ad9, #7af5ff, #b6ff7a, #ffe27a, #ff7ad9) border-box;
  animation: ctc-spin 6s linear infinite;
}
@keyframes ctc-spin { to { --ctc-angle: 360deg; } }

/* 5. States set by cisco.js. Without the script: every genre shows, every show is listed, no Next show pill. */
.vibe_tag.is-extra { display: none; }
.is-open > .vibe_tag.is-extra { display: inline-flex; }
[data-next-show] [data-show]:not(.is-next) { display: none; }
[data-next-show].is-empty { display: none; }
[data-next-show]:not(:has(.is-next)) { display: none; }
[data-shows="upcoming"] [data-show].is-past { display: none; }
[data-shows="past"] [data-show].is-upcoming { display: none; }
[data-past-shows].is-empty { display: none; }
.vibe_card { cursor: pointer; }
/* The pressed dot gets a ring that hugs it; keyboard focus keeps the outline, set further out, so focusing the
   pressed dot visibly changes it and a focused dot never looks like the pressed one. */
.nav_dot[aria-pressed="true"] { box-shadow: 0 0 0 0.125rem currentColor; }
.nav_dot:focus-visible { outline-offset: 0.25rem; }
/* Vibe radios as chips. The native circle is hidden but stays in the tab order and the accessibility tree; the
   checked chip takes the world's own text/background pair (the body text pair, AA in every world). */
.form_radio { position: relative; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.form_radio .w-radio-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.form_radio:hover { border-color: currentColor; }
.form_radio:has(input:checked) { background-color: var(--_color-roles---base--text); color: var(--_color-roles---base--background); border-color: var(--_color-roles---base--text); }
.form_radio:has(input:focus-visible) { outline: 0.125rem solid currentColor; outline-offset: 0.125rem; }
/* Webflow paints the open menu button #c8c8c8 with white text; keep the pill's own colors. */
.navbar_menu-button.w--open { background-color: transparent; color: inherit; }
/* Webflow's .w-nav adds ::before/::after (content " ", display table). In the flex navbar row they become items,
   so space-between split the free space four ways and left the pills inset from the edges. */
.navbar_layout.w-nav::before, .navbar_layout.w-nav::after { content: none; display: none; }

/* 6. Global styles (build standard section 2; section 1 puts them in this file, not an embed).
   One keyboard focus ring: currentColor contrasts with every surface's own text. The iridescent
   button's own text is white, so its ring takes the page's text color instead. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 0.125rem solid currentColor; outline-offset: 0.125rem; }
.button.is-iridescent:focus-visible { outline-color: var(--_color-roles---base--text); }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

/* 7. Reduced motion: no morph, no spinning ring, no crossfade, and every other animation cut short. */
@media (prefers-reduced-motion: reduce) {
  .hero_shape, .button.is-iridescent { animation: none; }
  body, [class*="section_"], .nav_pill, .hero_next, .vibe_card, .show_card, .show_row, .hero_shape { transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}