/* Chessystem identity — official logo colors, pencil and watercolor on paper. */
:root {
  --brand-cyan: #08e4ff;
  --brand-orange: #ffa905;
  --brand-navy: #0a3d54;
  --orange-ink: #8c5700;
  --ink: #25353b;
  --muted: #526068;
  --teal: var(--brand-navy);
  --teal-dark: var(--brand-navy);
  --gold: var(--orange-ink);
  --clay: var(--orange-ink);
  --line: #a4a49b;
}

::selection { background: #08e4ff40; color: var(--brand-navy); }
html { scroll-padding-top: 140px; }
.header-inner { min-height: 122px; padding-block: 9px; }
.brand.official-brand { display: block; flex: 0 0 auto; }
.official-brand img {
  display: block;
  width: 87px;
  height: auto;
  mix-blend-mode: multiply;
}
.site-footer .official-brand img { width: 126px; }
.main-nav a { color: var(--brand-navy); }
.main-nav a::after, .reading-progress > span { background: var(--brand-orange); }
.hero-title span:last-child { color: var(--brand-navy); }
.hero-title span:last-child::selection { background: var(--brand-cyan); }
.hero-layout { grid-template-columns: 1.16fr .9fr; gap: 38px; }
.hero-art { margin-inline: 0; }
.hero-art img { mix-blend-mode: multiply; }
.hero-art figcaption { margin-top: 3px; }
.hero-copy h2 { font-size: clamp(2rem, 3.4vw, 2.7rem); }
.hero-copy { min-width: 0; }
.hero-copy .pencil-underline::after,
.scene-two .pencil-underline::after { border-color: var(--brand-orange); }
.button-dark {
  background: var(--brand-navy);
  border-color: var(--brand-navy);
  color: #fffdf8;
}
.button-dark::after { border-color: #10b6c6; }
.button-dark:hover { background: #072d3e; box-shadow: 3px 5px 0 #08e4ff38; }
.button:focus-visible, a:focus-visible, button:focus-visible,
summary:focus-visible { outline: 3px solid var(--brand-navy); outline-offset: 5px; }
.values-line > span:nth-of-type(2), .values-line > span:nth-of-type(3) {
  color: var(--orange-ink);
}
.chapter > span:first-child { border-color: #08a6b766; color: var(--brand-navy); }
.chapter > span:first-child::before { border-color: var(--brand-orange); }
.journey-card:first-child .month-tag,
.journey-card:nth-child(2) .month-tag,
.journey-card:nth-child(3) .month-tag { color: var(--brand-navy); border-color: #148a9b; }
.journey-card:nth-child(2) .month-tag { border-color: #c1800c; color: var(--orange-ink); }
.journey-card:first-child .tape, .journey-card:nth-child(3) .tape { background: #08e4ff25; }
.journey-card:nth-child(2) .tape, .price-card .tape { background: #ffa90536; }
.dialogue-new, .price-card { border-color: var(--brand-navy); }
.dialogue-new .word-tags span { border-color: #1498aa88; color: var(--brand-navy); background: #08e4ff0b; }
.fit-list li > span, .refund > span { border-color: #137b90; color: var(--brand-navy); }
.daily-price b::after { border-color: var(--brand-orange); }
.final-section .pencil-circle::after { border-color: var(--brand-orange); }
.final-section .pencil-circle::before { border-color: #d68d1288; }
.hero-description, .large-body, .problem-explanation > p:first-child,
.center-heading > p:not(.eyebrow), .guidance-layout > div > p:not(.eyebrow):not(.handwritten) {
  color: #394950;
}

/* Each editorial section has its own drawing; copy remains editable HTML. */
.section-art { margin: 32px auto; width: 100%; max-width: 750px; }
.section-art img, .chapter-art, .journey-art, .scene-art {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.section-art img, .chapter-art {
  mask-image: linear-gradient(to right, transparent, #000 2%, #000 98%, transparent);
}
.problem-art { max-width: 940px; margin: 34px auto 0; }
.problem-art img { filter: none; }
.board-section .section-art { max-width: 620px; margin-block: 12px 35px; }
.research { grid-template-columns: .9fr 1.3fr; gap: 42px; }
.research-number { padding-inline-end: 28px; }
.research-number > span { font-size: 4.6rem; }
.research-number .chapter-art { margin-top: 24px; }
.change-art { max-width: 720px; margin-block: 15px 32px; }
.journey-art { margin-top: 27px; margin-bottom: 3px; border-radius: 3px; }
.journey-card h3 { margin-top: 20px; }
.journey-number { opacity: .2; }
.difference-intro .chapter-art { margin: 0 auto 28px; max-width: 500px; }
.guidance-art { margin: 0; }
.guidance-art img { width: 100%; height: auto; mix-blend-mode: multiply; }
.fit-section .chapter-art { margin-top: 30px; max-width: 450px; }
.pricing-details .chapter-art { margin: 0 auto 25px; max-width: 440px; }
.faq-heading .chapter-art { margin-top: 24px; max-width: 385px; }
.scene-art { margin: 22px auto 24px; }
.final-art { max-width: 530px; margin: 0 auto 15px; }

@media (max-width: 1000px) {
  .hero-layout { grid-template-columns: 1.1fr 1fr; gap: 24px; }
  .hero-copy h2 { font-size: 2.05rem; }
  .research { gap: 28px; padding-inline: 32px; }
}
@media (max-width: 800px) {
  .hero-layout { display: flex; flex-direction: column; gap: 20px; }
  .hero-art { width: 100%; max-width: 680px; }
  .hero-copy { width: 100%; max-width: 590px; text-align: center; }
  .hero-copy h2 { font-size: 2.3rem; }
  .hero-description { max-width: 520px; margin-inline: auto; }
  .hero-reassurance { justify-content: center; }
  .journey-art { max-width: 390px; margin-inline: auto; }
  .research { grid-template-columns: .9fr 1.2fr; }
}
@media (max-width: 600px) {
  html { scroll-padding-top: 121px; }
  .header-inner { min-height: 103px; padding-block: 7px; }
  .official-brand img { width: 74px; }
  .header-actions > .button { font-size: .96rem; padding: 12px 15px; }
  .site-footer .official-brand img { width: 122px; }
  .hero-title { margin-block: 18px 15px; }
  .hero-layout { gap: 19px; }
  .hero-art { margin: 0; width: 100%; }
  .hero-copy { padding-inline: 0; }
  .hero-copy h2 { font-size: clamp(1.9rem, 8.3vw, 2.5rem); }
  .hero-description { font-size: 1.08rem; }
  .hero-cta { white-space: normal; }
  .section-art { margin-block: 23px; }
  .problem-art { margin-top: 25px; }
  .research { grid-template-columns: 1fr; padding: 27px 22px; gap: 26px; }
  .research-number { padding: 0 0 21px; }
  .research-number > span { font-size: 4.2rem; }
  .research-number .chapter-art { max-width: 400px; margin: 18px auto 0; }
  .journey-art { margin-top: 23px; }
  .difference-intro .chapter-art { margin-bottom: 22px; }
  .faq-heading .chapter-art { max-width: 300px; margin: 20px auto 0; }
  .scene-art { margin-block: 18px; }
  .final-art { margin-bottom: 22px; }
}
@media (max-width: 360px) {
  .official-brand img { width: 67px; }
  .header-actions > .button { padding-inline: 11px; }
  .hero-copy h2 { font-size: 1.8rem; }
}
@media print {
  .official-brand img { width: 64px; }
  .section-art, .chapter-art, .journey-art, .scene-art { break-inside: avoid; }
  .button-dark { color: var(--brand-navy); background: none; }
}