/* Cypher Report. Colours and type are the WordPress theme's (Elementor kit 86). */

@font-face { font-family: "Genos"; font-weight: 400; font-display: swap; src: url("/assets/fonts/genos-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Genos"; font-weight: 500; font-display: swap; src: url("/assets/fonts/genos-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Exo"; font-weight: 300; font-display: swap; src: url("/assets/fonts/exo-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Exo"; font-weight: 300; font-style: italic; font-display: swap; src: url("/assets/fonts/exo-latin-300-italic.woff2") format("woff2"); }
@font-face { font-family: "Exo"; font-weight: 800; font-display: swap; src: url("/assets/fonts/exo-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url("/assets/fonts/poppins-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("/assets/fonts/poppins-latin-600-normal.woff2") format("woff2"); }

:root {
  --bg: #0A0A0A;
  --primary: #736ADE;   /* purple: buttons */
  --accent: #F553FF;    /* pink: links, nav, footer */
  --heading: #F3F5F8;
  --text: #D3DDEA;
  --muted: #C8D5DC;
  --icon: #D9E1E2;
  --hover: #ABDCEB;
  --card: #15151a;
  --font-heading: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --font-display: "Genos", "Exo", system-ui, sans-serif;
  --font-body: "Exo", system-ui, sans-serif;
  --wrap: 1140px;
  --header-h: 96px;  /* the pinned header; anchors and jumps clear it */
  --gutter: clamp(16px, 4vw, 48px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 300 clamp(17px, 1.6vw, 20px)/1.3 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); font-weight: 800; text-decoration: none; }
a:hover { color: var(--primary); }
:focus-visible { outline: 2px solid var(--hover); outline-offset: 3px; }
h1, h2 { font-family: var(--font-heading); font-weight: 600; color: var(--heading); line-height: 1.2; margin: 0 0 .6em; }
h1 { font-size: clamp(2.2rem, 5vw, 4rem); }
h2 { font-size: clamp(2rem, 4.5vw, 4rem); }
h3 { font-family: var(--font-display); font-weight: 500; color: var(--heading); font-size: clamp(1.8rem, 2.6vw, 2.6rem); line-height: 1.1; margin: 0 0 .6em; }
p { margin: 0 0 1em; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--bg); padding: .5em 1em; z-index: 10; }
.skip:focus { left: 1rem; }

/* Header: logo, page links, and the social icons in two rows of four. */
/* Pinned: stays at the top while the page scrolls under it. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid #1d1d24;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem 2rem;
  padding: 10px var(--gutter);
}
.brand img { width: clamp(180px, 22vw, 262px); }
.site-nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.75rem; list-style: none; margin: 0; padding: 0; }
.site-nav a { font: 400 clamp(1.25rem, 2vw, 1.6rem)/1 var(--font-display); letter-spacing: .5px; color: var(--accent); }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--hover); }
.site-nav a[aria-current="page"] { color: var(--heading); }

.social { display: grid; grid-template-columns: repeat(5, 30px); gap: 10px 14px; list-style: none; margin: 0; padding: 0; }
.social a { display: grid; place-items: center; width: 30px; height: 30px; color: var(--icon); }
.social a:hover, .social a:focus-visible { color: var(--accent); }
.icon { width: 22px; height: 22px; }

/* On a phone the pinned bar is the logo and one row of page links only, or it would cover a
   quarter of the screen; the social icons are in the footer and on the Support page. */
@media (max-width: 767px) {
  :root { --header-h: 116px; }
  .site-header { grid-template-columns: 1fr; justify-items: center; gap: 6px; padding: 8px var(--gutter) 6px; }
  .site-header .social { display: none; }
  .brand img { width: 150px; }
  .site-nav ul { gap: 6px 1.1rem; }
  .site-nav a { font-size: 1.15rem; white-space: nowrap; }
  .social { grid-template-columns: repeat(9, 30px); gap: 4px; }
}

main { overflow-x: clip; }
section { padding: clamp(40px, 7vw, 90px) var(--gutter); max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; }

/* The pill button from the old site: purple, pink rim; hover empties it. */
.button {
  display: inline-block;
  font: 400 1.25rem/1 var(--font-display);
  letter-spacing: .5px;
  color: #fff;
  background: var(--primary);
  border: 2px solid var(--accent);
  border-radius: 100px;
  padding: 16px 54px;
}
.button:hover, .button:focus-visible { background: transparent; color: var(--accent); }
.button--ghost { background: transparent; color: var(--accent); }
.button--ghost:hover { background: var(--primary); color: #fff; }

.hero { display: grid; justify-items: center; gap: 14px; padding-top: 36px; padding-bottom: 20px; text-align: center; }
/* The trailer's frame (option D, the operator's pick): a 2px purple-to-pink border and a soft
   glow, so a dark-edged thumbnail does not melt into the page. It is on the container, so it
   stays while the video plays. Used for the home page trailer and the Latest Videos player. */
.player {
  width: 100%;
  padding: 2px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: 0 0 36px rgba(115, 106, 222, .45), 0 0 90px rgba(245, 83, 255, .15);
}
.hero__kicker { font: 400 clamp(.8rem, 3vw, 1.1rem)/1.2 var(--font-display); color: var(--accent); text-transform: uppercase; letter-spacing: clamp(1px, .5vw, 3px); margin: 0; }
/* An epigraph under the trailer, not a headline: it should not compete with the video. */
.hero__caption { font: italic 300 clamp(1.05rem, 1.8vw, 1.3rem)/1.3 var(--font-body); color: var(--text); margin: 4px 0 0; }

/* A YouTube video before it is played: its picture and a play mark. */
.yt { display: block; color: inherit; font-weight: inherit; }
.yt__frame { position: relative; display: block; aspect-ratio: 16 / 9; background: #000; border-radius: 8px; overflow: hidden; }
.yt__frame img, .yt__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.yt__play {
  position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; transform: translate(-50%, -50%);
  background: var(--primary); border: 2px solid var(--accent); border-radius: 14px; transition: background .15s;
}
.yt__play::after { content: ""; position: absolute; left: 26px; top: 12px; border-style: solid; border-width: 10px 0 10px 18px; border-color: transparent transparent transparent #fff; }
.yt:hover .yt__play, .yt:focus-visible .yt__play { background: var(--accent); }
.yt.is-playing .yt__play { display: none; }

.about { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: center; }
.about__img { width: 100%; max-width: 460px; justify-self: end; }
@media (max-width: 767px) { .about { grid-template-columns: 1fr; } .about__img { justify-self: center; } }

.shows h2, .reviews h2 { text-align: center; margin-bottom: 1.2em; }
.shows__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; }
.shows p { color: var(--heading); font-size: .95em; }

/* Carousels */
.row__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.row__head h2 { margin-bottom: .5em; }
.row__head a { font: 400 1.4rem/1 var(--font-display); }
.carousel { position: relative; }
.carousel__controls { display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 12px; }
.carousel__btn {
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--accent); background: var(--primary);
  color: #fff; font-size: 28px; line-height: 1; cursor: pointer;
}
.carousel__btn:hover { background: transparent; color: var(--accent); }
.carousel__btn:disabled { opacity: .35; cursor: default; background: var(--primary); color: #fff; }
.carousel__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(240px, 30%, 340px); gap: 20px;
  list-style: none; margin: 0; padding: 0 0 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-color: var(--primary) transparent;
}
.card { scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; }
.card a { color: inherit; font-weight: inherit; }
.card__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font: 500 1.35rem/1.15 var(--font-display); color: var(--heading); margin-top: 8px;
}
.card a:hover .card__title { color: var(--hover); }
.card__text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: .9em; }
.card__date { font-size: .8em; color: var(--muted); }
.card__cover { display: block; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--card); }
.card__cover img { width: 100%; height: 100%; object-fit: cover; }
.card__cover .card__cover-logo { object-fit: contain; padding: 12%; }

.reviews__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 40px 56px; align-items: start; }
.review { margin: 0; display: grid; gap: 22px; }
.review blockquote { margin: 0; }
.review blockquote p { margin: 0; }
.review blockquote p::before { content: "“"; }
.review blockquote p::after { content: "”"; }
.review figcaption { display: flex; align-items: center; gap: 16px; }
.review figcaption img { flex: none; width: 125px; height: 125px; object-fit: cover; border-radius: 50%; }
.review__who { display: grid; gap: 4px; }
.review__name { font: 400 clamp(1.7rem, 2.4vw, 2.2rem)/1 var(--font-display); letter-spacing: .5px; color: var(--accent); text-shadow: 0 0 10px rgba(0,0,0,.3); }
.review__role { font: 500 clamp(1.4rem, 2vw, 1.875rem)/1.1 var(--font-display); color: var(--muted); }
.reviews--one { max-width: calc(560px + 2 * var(--gutter)); padding-top: 0; }
.reviews__more { margin: 18px 0 0; text-align: right; }
.reviews__more a { font: 400 1.3rem/1 var(--font-display); }
.cta { text-align: center; padding-top: 0; }
.shows__grid article { scroll-margin-top: calc(var(--header-h) + 16px); }

/* Inner pages */
.page h1 { font-family: var(--font-display); font-weight: 400; }
.now-playing { font: 500 1.5rem/1.2 var(--font-display); color: var(--heading); margin: 16px 0 28px; }
.more { text-align: center; margin-top: 40px; }
.article-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 32px; list-style: none; padding: 0; }

.post { max-width: 760px; margin: 0 auto; padding: clamp(32px, 6vw, 72px) var(--gutter); }
.post__head h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
.post__subtitle { font-size: 1.2em; color: var(--muted); }
.post__meta { font-size: .9em; color: var(--muted); }
.post__cover { width: 100%; border-radius: 8px; margin: 8px 0 32px; }
.post__body { color: var(--heading); }
.post__body h2, .post__body h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.8rem; margin-top: 1.4em; }
.post__body img { border-radius: 6px; margin: 1em auto; }
.post__body iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 8px; margin: 1em 0; }
.post__body blockquote { margin: 1.5em 0; padding-left: 1em; border-left: 3px solid var(--accent); color: var(--text); }
.post__body figcaption { font-size: .85em; color: var(--muted); text-align: center; }
.post__body pre { overflow-x: auto; background: var(--card); padding: 1em; border-radius: 6px; }
.post__body table { border-collapse: collapse; display: block; overflow-x: auto; }
.post__body th, .post__body td { border: 1px solid #333; padding: .4em .7em; }
.post__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 48px; padding-top: 32px; border-top: 1px solid #2a2a33; }

/* Home: the three ways in. */
.explore h2 { text-align: center; margin-bottom: 1.2em; }
.explore__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.tile {
  display: grid; gap: 10px; align-content: start; padding: 28px; border-radius: 12px;
  background: var(--card); border: 2px solid #23232b; color: var(--text); font-weight: 300;
  transition: border-color .15s, transform .15s;
}
.tile:hover, .tile:focus-visible { border-color: var(--accent); color: var(--text); transform: translateY(-2px); }
.tile__icon { color: var(--accent); }
.tile__icon .icon { width: 36px; height: 36px; }
.tile__title { font: 500 2rem/1.1 var(--font-display); color: var(--heading); }

/* Articles page */
.lede { max-width: 46em; }
.feature { margin: 32px 0 56px; }
.feature__link { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: center; color: inherit; font-weight: inherit; }
.feature__body { display: grid; gap: 12px; }
.feature__kicker { font: 400 1.1rem/1 var(--font-display); color: var(--accent); text-transform: uppercase; letter-spacing: 2px; }
.feature__title { font: 500 clamp(1.8rem, 3.2vw, 2.6rem)/1.1 var(--font-display); color: var(--heading); }
.feature__link:hover .feature__title { color: var(--hover); }
@media (max-width: 767px) { .feature__link { grid-template-columns: 1fr; } }
.section-label { font-family: var(--font-display); font-weight: 400; font-size: 2rem; }

/* Support & Collaborate */
.panel { padding: clamp(24px, 3vw, 36px); border-radius: 12px; background: var(--card); border: 2px solid #23232b; }
.panel h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.8rem, 3vw, 2.4rem); }
.support-list { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 14px; }
.support-list a { display: inline-flex; align-items: center; gap: 12px; }
.support-list .icon { width: 24px; height: 24px; }
.support-paid { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.muted { color: var(--muted); font-size: .9em; }
.optional { color: var(--muted); font-size: .85em; }
.collab-form { display: grid; gap: 18px; }
.collab-form label { display: grid; gap: 6px; font: 400 1.2rem/1.2 var(--font-display); color: var(--heading); }
.collab-form input, .collab-form select, .collab-form textarea {
  font: 300 1rem/1.4 var(--font-body); color: var(--heading); background: #0d0d11;
  border: 1px solid #3a3a46; border-radius: 8px; padding: 12px 14px; width: 100%;
}
.collab-form input:focus, .collab-form select:focus, .collab-form textarea:focus { border-color: var(--accent); outline: none; }
.collab-form .button { justify-self: start; cursor: pointer; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Get Involved: a strip of free ways to help, then the two forms side by side. */
.panel--strip { display: grid; grid-template-columns: 1fr auto; gap: 8px 40px; align-items: start; margin-bottom: 32px; }
.panel--strip h2 { margin-bottom: .3em; }
.panel--strip .support-list { margin: 0; }
.strip__share { grid-column: 1 / -1; margin: 6px 0 0; font: 500 clamp(1.3rem, 2.2vw, 1.6rem)/1.2 var(--font-display); color: var(--accent); }
.panel--strip .support-paid { grid-column: 1 / -1; margin-top: 8px; }
@media (max-width: 767px) { .panel--strip { grid-template-columns: 1fr; } }
.involve-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 32px; align-items: start; }
.involve-grid .panel { scroll-margin-top: calc(var(--header-h) + 16px); }
.collab-form .check { display: flex; align-items: flex-start; gap: 10px; font: 300 1rem/1.3 var(--font-body); color: var(--text); }
.collab-form .check input { width: 20px; height: 20px; padding: 0; flex: none; margin-top: 1px; accent-color: var(--accent); }
.word-count { margin: -10px 0 0; font-size: .85em; color: var(--muted); text-align: right; }
.word-count.is-over { color: var(--accent); font-weight: 800; }
.involve-email { text-align: center; margin-top: 40px; }
.privacy { margin: 16px 0 0; font-size: .8em; color: var(--muted); }
.not-found__links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

/* Footer: the old site's pink bar. */
.site-footer { background: var(--accent); color: #1a1a1f; text-align: center; padding: 22px var(--gutter); display: grid; justify-items: center; gap: 10px; }
.site-footer p { margin: 0; font-weight: 300; }
.site-footer a { color: #1a1a1f; }
.site-footer a:hover { color: #fff; }
.site-footer .social { grid-template-columns: repeat(9, 30px); gap: 6px; }
.site-footer .social a { color: #1a1a1f; }
.site-footer .social a:hover { color: #fff; }