/* Charcoal studio / cyan / magenta. Photography keeps its original colours. */
:root {
  color-scheme: dark;
  --canvas: #0b0d0f;
  --surface: #14181c;
  --white: #f4f7fa;
  --copy: #bec7cf;
  --muted: #9da9b3;
  --line: #ffffff26;
  --cyan: #61e3f2;
  --magenta: #ee79cf;
}

body, .paper, .color-section, .author-section {
  background: var(--canvas);
  color: var(--white);
}
p, .paper p, .color-copy > p:not(.eyebrow), .bundle p, .bundle ul,
.course-card ul, .hero-intro {
  color: var(--copy);
}
.hero-intro, .hero-copy .eyebrow { color: var(--white); }
p.eyebrow, .paper p.eyebrow { color: var(--white); }
.eyebrow > span, .brand-prefix, .nav.light .brand-prefix,
.brand-dot, .accent { color: var(--cyan); }
.color-copy .eyebrow > span { color: var(--magenta); }
.muted { color: #b5c0c9; }
.course-kicker, .flash-label, .color-details, .comparison-caption,
.comparison-caption > span, .author-photo figcaption,
.quotes figcaption span, .extra-course .eyebrow,
.footer-top > div > span, .footer-bottom, .motion-toggle {
  color: var(--muted);
}
::selection { background: var(--magenta); color: var(--canvas); }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible {
  outline-color: var(--cyan);
}
.text-link { text-decoration-color: #f4f7fa55; transition: color .22s; }
.text-link:hover, .footer-top > div > a:hover { color: var(--cyan); }
.text-link span { color: var(--cyan); }

.button, .button.dark, .nav.light .button, .nav.light nav .button {
  background: var(--white);
  color: var(--canvas);
  border-color: transparent;
}
.button:hover, .button.dark:hover, .nav.light .button:hover,
.nav.light nav .button:hover {
  background: var(--cyan);
  color: var(--canvas);
}
.button.outline {
  background: transparent;
  color: var(--white);
  border-color: #ffffff55;
}
.button.outline:hover {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--canvas);
}
.color-copy .button:hover, .course-card:nth-child(2) .button:hover {
  background: var(--magenta);
  border-color: var(--magenta);
  color: var(--canvas);
}
.nav.scrolled, .nav.light {
  background: #0b0d0ff5;
  color: var(--white);
  border-color: #ffffff14;
}
.nav nav, .nav.light nav { background: var(--surface); color: var(--white); }
@media (min-width:761px) { .nav nav, .nav.light nav { background: transparent; } }
.menu-toggle { border-color: #ffffff40; }

.ambient {
  background: radial-gradient(ellipse at 77% 30%, #ee79cf09, transparent 42%),
              radial-gradient(ellipse at 32% 77%, #61e3f20b, transparent 45%);
}
.flash-glow {
  background: radial-gradient(ellipse, #d8fbff47, #61e3f20a 50%, transparent 70%);
}
.story-progress i { background: linear-gradient(90deg, var(--cyan), var(--magenta)); }
.color-details, .courses, .extra-course, .quotes figure,
.faq details, .faq details:last-child, .footer-bottom { border-color: var(--line); }
.comparison { background: var(--surface); }
.comparison:focus-within { outline-color: var(--magenta); }

.course-card { background: var(--canvas); border-color: var(--line); }
.course-card .card-top { color: var(--muted); }
.course-card:first-child .card-top > span:first-child,
.course-card:first-child li::before { color: var(--cyan); }
.course-card:nth-child(2) .card-top > span:first-child,
.course-card:nth-child(2) li::before { color: var(--magenta); }
.course-card.bundle {
  background: radial-gradient(ellipse at 100% 0%, #ee79cf0b, transparent 65%), var(--surface);
  border-color: #ee79cf66;
}
.bundle::before { border-color: #ee79cf29; }
.bundle li::before { color: var(--magenta); }
.bundle-tag { background: var(--magenta); color: var(--canvas); }
.bundle .button:hover { background: var(--magenta); }
.quote-mark { color: var(--magenta); }
.faq summary span { color: var(--cyan); }
.final-section {
  background: radial-gradient(ellipse at 18% 110%, #61e3f210, transparent 55%),
              radial-gradient(ellipse at 82% 110%, #ee79cf12, transparent 55%);
}
.final-section .eyebrow { color: var(--magenta); }
.final-line { background: linear-gradient(90deg, #61e3f200, #61e3f255, #ee79cf55, #ee79cf00); }
.lb-thumbs button[aria-current=true] { box-shadow: 0 0 0 2px var(--cyan); }
.lb-prev:hover, .lb-next:hover { color: var(--cyan); }

@media (max-width:760px) {
  .course-card { border-color: var(--line) !important; }
  .course-card.bundle { border-color: #ee79cf66 !important; }
}

/* More visible photographic gel colours, with the second-series course boxes. */
.hero-copy h1 span:first-child { color: var(--cyan); }
.hero-copy h1 span:nth-child(2) { color: var(--magenta); }
.light-copy h2 .muted { color: var(--cyan); }
.color-copy h2 span:last-child, .edit-interlude h2 { color: var(--magenta); }
.courses .courses-heading > .eyebrow { color: var(--cyan); }

.hero-actions .button, .light-course .button, .nav nav .button {
  background: var(--cyan);
  color: var(--canvas);
}
.hero-actions .button:hover, .light-course .button:hover, .nav nav .button:hover {
  background: var(--white);
}
.color-copy .button { background: var(--magenta); color: var(--canvas); }
.color-copy .button:hover { background: var(--white); border-color: transparent; }

.course-card {
  --course-accent: var(--cyan);
  --course-glow: #61e3f22b;
  position: relative;
  isolation: isolate;
  border-color: #61e3f247;
}
.course-card:nth-child(2) {
  --course-accent: var(--magenta);
  --course-glow: #ee79cf2e;
  border-color: #ee79cf47;
}
.course-card::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 2px;
  background: var(--course-accent);
  pointer-events: none;
}
.course-card.bundle {
  --course-accent: var(--magenta);
  background: radial-gradient(ellipse at 100% 0%, #ee79cf17, transparent 60%), var(--surface);
  border-color: #ee79cf88;
}
.course-card.bundle::after {
  background: linear-gradient(90deg, var(--cyan), var(--magenta));
}
.course-card .card-top > span:first-child { color: var(--course-accent); }
.course-art {
  position: relative;
  display: grid;
  place-items: center;
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  height: clamp(240px, 26vw, 360px);
  margin: 15px -14px 0;
  isolation: isolate;
}
.course-art::before {
  content: '';
  position: absolute;
  inset: 0 -10% -12%;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 62%, var(--course-glow), transparent 66%);
  -webkit-mask-image: radial-gradient(ellipse, #000 25%, transparent 70%);
  mask-image: radial-gradient(ellipse, #000 25%, transparent 70%);
  pointer-events: none;
}
.bundle .course-art::before {
  background: radial-gradient(ellipse at 18% 60%, #61e3f233, transparent 65%),
              radial-gradient(ellipse at 85% 45%, #ee79cf38, transparent 65%);
}
.course-art img {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 14px 16px #0005);
}
.course-card h3 { margin-top: 12px; }
.course-card .button.outline {
  background: var(--course-accent);
  border-color: var(--course-accent);
  color: var(--canvas);
}
.course-card .button.outline:hover {
  background: var(--white);
  border-color: var(--white);
}
.course-card.bundle .button, .final-section .button {
  background: linear-gradient(110deg, var(--cyan), #b9c7e7 50%, var(--magenta));
  color: var(--canvas);
}
.course-card.bundle .button:hover, .final-section .button:hover {
  background: var(--white);
}
.final-section {
  background: radial-gradient(ellipse at 14% 115%, #61e3f225, transparent 58%),
              radial-gradient(ellipse at 86% 115%, #ee79cf29, transparent 58%);
}
@media (max-width:760px) {
  .course-card { border-color: #61e3f247 !important; }
  .course-card:nth-child(2) { border-color: #ee79cf47 !important; }
  .course-card.bundle { border-color: #ee79cf88 !important; }
  .course-art { height: auto; aspect-ratio: 1; margin-top: 12px; }
}

/* Forthcoming bundle: editing, light and AI, without a purchase destination. */
.course-card.upcoming {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-top: 24px;
  padding: 38px 40px;
  border: 1px solid #ffffff26;
  background: radial-gradient(ellipse at 95% 100%, #ee79cf10, transparent 60%), var(--surface);
}
.upcoming::after { background: linear-gradient(90deg, var(--cyan), var(--magenta)); }
.upcoming h3 { margin: 0 0 18px; font-size: clamp(32px, 3.6vw, 52px); line-height: 1.12; }
.upcoming-topics { font-size: 13px; line-height: 1.8; }
.upcoming-topics span:first-child { color: var(--cyan); }
.upcoming-topics span:last-child { color: var(--magenta); }
.upcoming .button { flex: 0 0 180px; width: auto; margin: 0; justify-content: center; }
.upcoming .button:disabled, .upcoming .button:disabled:hover {
  opacity: 1;
  background: #ffffff08;
  border-color: #ffffff40;
  color: var(--copy);
  cursor: default;
  transform: none;
}
@media (max-width:760px) {
  .course-card.upcoming {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
    margin-top: 4px;
    padding: 30px 28px;
    border-color: #ffffff26 !important;
  }
  .upcoming h3 { font-size: 34px; }
  .upcoming-topics { font-size: 12px; }
  .upcoming .button { flex-basis: auto; width: 100%; }
}

/* Minimal hero: the same photograph becomes a print, without the lamp chapter. */
@media (prefers-reduced-motion:no-preference) {
  .story { height: 170svh; }
}
@media (max-width:760px) and (prefers-reduced-motion:no-preference) {
  .story { height: 205svh; }
}
.hero-actions { margin-top: 30px; }
.edit-glint {
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
  background: radial-gradient(ellipse at 0% 45%, #00e5ff, transparent 72%),
              radial-gradient(ellipse at 100% 55%, #ff26cc, transparent 72%),
              linear-gradient(110deg, #00e5ff66, #9955ff33 50%, #ff26cc66);
  mix-blend-mode: screen;
  will-change: opacity;
}