/**
 * Crossroad theme for reveal.js
 * Art direction from Crossroad Studio landing page.
 *
 * Colors:
 *   brand-10 (warm white):  #E2DEDC
 *   brand-20 (neutral grey): #A0A0A0
 *   brand-30 (dark grey):    #4B4C4C
 *   brand-40 (darker grey):  #262626
 *   brand-50 (black):        #141413
 *   brand-special (accent):  #8897ED
 *
 * Fonts:
 *   Headlines:  JetBrains Mono (ExtraBold 800)
 *   Body:       Noto Sans Mono (Regular 400 / Bold 700)
 */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@200;400;500;800&family=Noto+Sans+Mono:wght@400;700;900&display=swap');

/*********************************************
 * CSS CUSTOM PROPERTIES
 *********************************************/
:root {
  --brand-10: #E2DEDC;
  --brand-20: #A0A0A0;
  --brand-30: #4B4C4C;
  --brand-40: #262626;
  --brand-50: #141413;
  --brand-accent: #8897ED;

  --r-background-color: var(--brand-50);
  --r-main-font: 'Noto Sans Mono', monospace;
  --r-main-font-size: 25px;
  --r-main-color: var(--brand-20);
  --r-block-margin: 16px;
  --r-heading-margin: 0 0 22px 0;
  --r-heading-font: 'JetBrains Mono', monospace;
  --r-heading-color: var(--brand-10);
  --r-heading-line-height: 1.1;
  --r-heading-letter-spacing: 0.04em;
  --r-heading-text-transform: uppercase;
  --r-heading-text-shadow: none;
  --r-heading-font-weight: 800;
  --r-heading1-text-shadow: none;
  --r-heading1-size: 65px;
  --r-heading2-size: 46px;
  --r-heading3-size: 25px;
  --r-heading4-size: 20px;
  --r-code-font: 'JetBrains Mono', monospace;
  --r-link-color: var(--brand-accent);
  --r-link-color-dark: #6b7bdb;
  --r-link-color-hover: #aab5f3;
  --r-selection-background-color: rgba(136, 151, 237, 0.45);
  --r-selection-color: var(--brand-10);
}

/*********************************************
 * GLOBAL
 *********************************************/
*, *::before, *::after {
  box-sizing: border-box;
}

.reveal-viewport {
  background: var(--brand-50);
  background-color: var(--r-background-color);
}

.reveal {
  font-family: var(--r-main-font);
  font-size: var(--r-main-font-size);
  font-weight: 400;
  color: var(--r-main-color);
}

.reveal ::selection {
  color: var(--r-selection-color);
  background: var(--r-selection-background-color);
}

.reveal .slides section,
.reveal .slides section > section {
  line-height: 1.6;
  font-weight: inherit;
  text-align: left;
  padding: 54px 96px;
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
}

/*********************************************
 * HEADERS
 *********************************************/
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
  margin: var(--r-heading-margin);
  color: var(--r-heading-color);
  font-family: var(--r-heading-font);
  font-weight: var(--r-heading-font-weight);
  line-height: var(--r-heading-line-height);
  letter-spacing: var(--r-heading-letter-spacing);
  text-transform: var(--r-heading-text-transform);
  text-shadow: var(--r-heading-text-shadow);
  word-wrap: break-word;
}

.reveal h1 {
  font-size: var(--r-heading1-size);
  margin-bottom: 22px;
}

.reveal h2 {
  font-size: var(--r-heading2-size);
  min-height: 1.2em;
}

.reveal h3 {
  font-size: var(--r-heading3-size);
  font-weight: 500;
  color: var(--brand-accent);
  text-transform: none;
  letter-spacing: 0.02em;
}

.reveal h4 {
  font-size: var(--r-heading4-size);
  font-weight: 400;
  color: var(--brand-20);
  text-transform: none;
}

/*********************************************
 * TEXT
 *********************************************/
.reveal p {
  margin: 16px 0;
  line-height: 1.6;
}

.reveal strong,
.reveal b {
  font-weight: 700;
  color: var(--brand-10);
}

.reveal em {
  font-style: normal;
  color: var(--brand-accent);
}

.reveal small {
  display: inline-block;
  font-size: 0.6em;
  line-height: 1.4;
  color: var(--brand-20);
}

/*********************************************
 * LISTS
 *********************************************/
.reveal ol,
.reveal dl,
.reveal ul {
  display: block;
  text-align: left;
  margin: 11px 0 11px 0;
  padding: 0;
}

.reveal ul {
  list-style-type: none;
}

.reveal ul li {
  padding: 6px 0;
  padding-left: 1.8em;
  position: relative;
}

.reveal ul li::before {
  content: "×";
  color: var(--brand-accent);
  font-weight: 800;
  font-family: var(--r-heading-font);
  position: absolute;
  left: 0;
  font-size: 0.9em;
}

.reveal ul ul {
  margin-top: 5px;
}

.reveal ul ul li::before {
  content: "—";
  color: var(--brand-30);
}

.reveal ul.icon-list li {
  padding-left: 0;
  display: flex;
  align-items: center;
  gap: 0.6em;
}

.reveal ul.icon-list li::before {
  content: none;
}

.reveal ol {
  list-style-type: none;
  counter-reset: item;
}

.reveal ol li {
  padding: 6px 0;
  padding-left: 2em;
  position: relative;
  counter-increment: item;
}

.reveal ol li::before {
  content: counter(item, decimal-leading-zero);
  color: var(--brand-accent);
  font-weight: 800;
  font-family: var(--r-heading-font);
  font-size: 0.75em;
  position: absolute;
  left: 0;
  letter-spacing: 0.05em;
}

/*********************************************
 * BLOCKQUOTE
 *********************************************/
.reveal blockquote {
  display: block;
  position: relative;
  width: 80%;
  margin: 22px 0;
  padding: 16px 0 16px 38px;
  background: none;
  border-left: 2px solid var(--brand-accent);
  font-style: normal;
  font-size: 1.1em;
  color: var(--brand-10);
}

.reveal blockquote p:first-child,
.reveal blockquote p:last-child {
  display: inline-block;
}

/*********************************************
 * CODE
 *********************************************/
.reveal pre {
  display: block;
  position: relative;
  width: 100%;
  margin: 22px 0;
  text-align: left;
  font-size: 0.85em;
  font-family: var(--r-code-font);
  line-height: 1.6;
  word-wrap: break-word;
  box-shadow: none;
}

.reveal code {
  font-family: var(--r-code-font);
  text-transform: none;
  tab-size: 2;
  color: var(--brand-accent);
  font-size: 0.9em;
}

.reveal pre code {
  display: block;
  padding: 22px 38px;
  overflow: auto;
  max-height: 648px;
  word-wrap: normal;
  background: var(--brand-40);
  border: 1px solid var(--brand-30);
  border-radius: 2px;
  color: var(--brand-10);
  font-size: 0.85em;
  line-height: 1.7;
}

/*********************************************
 * TABLE
 *********************************************/
.reveal table {
  margin: 22px 0;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 0.85em;
  width: auto;
}

.reveal table th {
  font-family: var(--r-heading-font);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8em;
  color: var(--brand-accent);
  border-bottom: 1px solid var(--brand-30);
  padding: 11px 38px 11px 0;
  text-align: left;
}

.reveal table td {
  border-bottom: 1px solid rgba(75, 76, 76, 0.3);
  padding: 11px 38px 11px 0;
  vertical-align: top;
}

/*********************************************
 * LINKS
 *********************************************/
.reveal a {
  color: var(--r-link-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

.reveal a:hover {
  color: var(--r-link-color-hover);
}

/*********************************************
 * NAVIGATION
 *********************************************/
.reveal .controls {
  color: var(--brand-accent);
}

.reveal .controls button {
  opacity: 0.4;
  transition: opacity 0.3s ease;
}

.reveal .controls button:hover {
  opacity: 1;
}

/*********************************************
 * PROGRESS BAR
 *********************************************/
.reveal .progress {
  background: var(--brand-40);
  color: var(--brand-accent);
  height: 2px;
}

/*********************************************
 * SLIDE NUMBER
 *********************************************/
.reveal .slide-number {
  font-family: var(--r-heading-font);
  font-size: 13px;
  font-weight: 400;
  color: var(--brand-30);
  letter-spacing: 0.05em;
  right: 96px;
  bottom: 32px;
}

/*********************************************
 * FRAGMENTS — subtle upward fade
 *********************************************/
.reveal .slides section .fragment {
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal .slides section .fragment:not(.visible) {
  opacity: 0;
  transform: translateY(6px);
}

.reveal .slides section .fragment.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stacked prompt versions — no vertical shift */
.reveal .slides section .prompt-stack .fragment {
  transform: none !important;
}

/* Two-col focus: grey out siblings when a new fragment appears */
.reveal .slides section .two-col > .fragment.visible {
  opacity: 1;
  transition: opacity 0.5s ease;
}
.reveal .slides section .two-col > .fragment.visible.dim {
  opacity: 0.25;
}

/*********************************************
 * CUSTOM LAYOUT CLASSES
 *********************************************/

/* Meta text — small label/date/credit style */
.meta {
  font-family: var(--r-main-font);
  font-size: 13px;
  color: var(--brand-30);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  margin-top: 32px;
}

/* Chapter title slides — more dramatic */
.reveal section[data-background-color="#0a0a0a"] h1 {
  font-size: 77px;
}

.reveal section[data-background-color="#0a0a0a"] h3 {
  font-size: 22px;
  margin-top: 22px;
}

/* Two-column grid */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 77px;
  align-items: start;
  margin: 32px 0;
}

.two-col > div {
  text-align: left;
}

/* Accent line — horizontal rule */
.reveal hr {
  border: none;
  height: 1px;
  background: var(--brand-30);
  margin: 32px 0;
  width: 154px;
}

/* Light slide variant — creativity, reflection, concepts */
.reveal section[data-background-color="#E2DEDC"],
.reveal section[data-background-color="#E2DEDC"] h1,
.reveal section[data-background-color="#E2DEDC"] h2,
.reveal section[data-background-color="#E2DEDC"] h4,
.reveal section[data-background-color="#E2DEDC"] p,
.reveal section[data-background-color="#E2DEDC"] li,
.reveal section[data-background-color="#E2DEDC"] td {
  color: var(--brand-50);
}

.reveal section[data-background-color="#E2DEDC"] h3 {
  color: var(--brand-accent);
}

.reveal section[data-background-color="#E2DEDC"] strong,
.reveal section[data-background-color="#E2DEDC"] b {
  color: var(--brand-50);
}

.reveal section[data-background-color="#E2DEDC"] em {
  color: var(--brand-accent);
}

.reveal section[data-background-color="#E2DEDC"] ul li::before,
.reveal section[data-background-color="#E2DEDC"] ol li::before {
  color: var(--brand-accent);
}

.reveal section[data-background-color="#E2DEDC"] th {
  color: var(--brand-accent);
  border-bottom-color: var(--brand-30);
}

.reveal section[data-background-color="#E2DEDC"] td {
  border-bottom-color: rgba(75, 76, 76, 0.2);
}

/* Hide table row borders until fragment is revealed */
.reveal table tr.fragment:not(.visible) td {
  border-bottom-color: transparent;
}

.reveal section[data-background-color="#E2DEDC"] blockquote {
  color: var(--brand-50);
  border-left-color: var(--brand-accent);
}

.reveal section[data-background-color="#E2DEDC"] code {
  color: var(--brand-accent);
}

.reveal section[data-background-color="#E2DEDC"] pre code {
  background: var(--brand-50);
  border-color: var(--brand-30);
  color: var(--brand-10);
}

.reveal section[data-background-color="#E2DEDC"] .meta {
  color: var(--brand-30);
}

.reveal section[data-chapter="toc"] ol li strong {
  color: var(--brand-30);
  letter-spacing: 0.05em;
}

/*********************************************
 * PRINT
 *********************************************/
@media print {
  .backgrounds {
    background-color: var(--r-background-color);
  }
}