/* Game workshop: shared visual language; page files provide their own layouts. */
:root {
  --studio-ink: #262333;
  --studio-muted: #655f72;
  --studio-purple: #6550dd;
  --studio-lilac: #eee9ff;
  --studio-mint: #caf2e4;
  --studio-line: #dedbe6;
  --studio-paper: #fff;
  --text-primary: var(--studio-ink);
  --text-secondary: var(--studio-muted);
  --text-muted: var(--studio-muted);
  --text-accent: var(--studio-purple);
  --brand-purple: var(--studio-purple);
  --brand-purple-soft: var(--studio-lilac);
  --surface-card: #fff;
  --border-soft: 1px solid var(--studio-line);
  --shadow-soft: none;
  --shadow-card: none;
  --shadow-control: none;
}
body { font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--studio-ink); }
h1, h2, h3 { font-weight: 800; }
a, button, summary { -webkit-tap-highlight-color: #6550dd18; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--studio-purple); outline-offset: 4px; }
.site-header { background: #fff; border-bottom: 1px solid var(--studio-line); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding-block: 16px; }
.site-header::after { content: none; }
.header-shell { gap: 30px; }
.header-nav { gap: 28px; }
.header-link, .header-link.active, .header-link:hover { color: var(--studio-ink); font-size: .875rem; font-weight: 650; }
.header-link.active { color: var(--studio-purple); }
.site-title, .app-footer .site-title { font-size: 1.55rem; font-weight: 800; letter-spacing: -.06em; line-height: 1.1; color: var(--studio-ink); }
.brand-slash { color: var(--studio-purple); margin-inline: 1px; }
.site-subtitle, .app-footer .site-subtitle { color: var(--studio-muted); font-size: .64rem; margin-top: 4px; }
.header-brand .logo, .footer-brand .logo { width: 38px; height: 38px; }
.header-cta { background: var(--studio-purple); border: 1px solid var(--studio-purple); box-shadow: none; color: #fff; min-height: 44px; padding: 11px 17px; border-radius: 7px; }
.header-cta:hover { background: #503bc5; border-color: #503bc5; box-shadow: 3px 3px 0 var(--studio-ink); }
.school-home { gap: clamp(60px, 8vw, 100px); }
.school-home .hero-screen { padding: 76px 0 64px; gap: 60px; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); overflow: visible; }
.hero-screen::before, .hero-screen::after { content: none; }
.school-home .hero-kicker, .school-home .section-label { color: var(--studio-purple); font: 600 .73rem/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .06em; }
.school-home .hero-title { font-size: clamp(3.3rem, 6vw, 4.7rem); line-height: 1.07; letter-spacing: -.06em; margin: 20px 0 27px; font-weight: 800; }
.school-home .hero-title-accent { color: var(--studio-ink); background: var(--studio-lilac); box-shadow: 5px 0 0 var(--studio-lilac), -4px 0 0 var(--studio-lilac); }
.school-home .hero-lead { font-size: 1.06rem; color: var(--studio-muted); max-width: 44ch; line-height: 1.8; }
.school-home .hero-cta { border-radius: 7px; min-height: 52px; padding: 14px 20px; }
.hero-cta-primary, .offer-cta, .book-offer-cta { background: var(--studio-purple); border: 1px solid var(--studio-purple); box-shadow: none; }
.hero-cta-primary:hover, .offer-cta:hover, .book-offer-cta:hover { background: #503bc5; box-shadow: 3px 3px 0 var(--studio-ink); filter: none; transform: translate(-1px, -1px); }
.hero-cta-secondary { background: #fff; border: 1px solid var(--studio-line); box-shadow: none; }
.hero-cta-secondary:hover { color: var(--studio-purple); border-color: var(--studio-purple); background: #fff; box-shadow: none; }
.school-home .hero-proof { color: var(--studio-muted); font-size: .78rem; }
.hero-subjects { gap: 9px; margin-top: 25px; }
.hero-subjects li { background: #fff; border: 1px solid var(--studio-line); padding: 5px 10px; border-radius: 4px; font: 500 .72rem/1.5 ui-monospace, monospace; }
.school-home .hero-window { border: 1.5px solid var(--studio-ink); border-radius: 10px; box-shadow: 7px 7px 0 var(--studio-ink); transform: none; }
.school-home .hero-window-bar { padding: 13px 17px; border-bottom: 1.5px solid var(--studio-ink); background: #fff; }
.hero-window-file { color: var(--studio-ink); font-size: .76rem; }
.hero-window-status { color: #346755; font: 600 .68rem ui-monospace, monospace; }
.hero-window-dot { background: #68c9aa; box-shadow: none; }
.school-home .hero-visual { background: var(--studio-lilac); }
.school-home .hero-game-canvas { height: 340px; min-height: 280px; }
.hero-game-hint { color: var(--studio-ink); font-size: .78rem; bottom: 20px; }
.hero-demo-caption { color: var(--studio-muted); margin-top: 24px; font-size: .78rem; }
.home-jump-nav { margin-top: -82px; justify-content: start; gap: 10px 32px; border-block: 1px solid var(--studio-line); padding: 12px 0; }
.home-jump-nav a { color: var(--studio-ink); font-size: .82rem; font-weight: 600; }
.school-home .section-title { font-size: clamp(1.8rem, 3.5vw, 2.7rem); letter-spacing: -.045em; line-height: 1.17; }
.school-section-head { margin-bottom: 26px; }
.school-section-lead, .school-path p, .school-project-copy p, .school-format-steps p, .school-tools, .school-faq-list details p { color: var(--studio-muted); }
.school-text-link { color: var(--studio-purple); font-weight: 750; font-size: .85rem; }
.school-path { gap: 0; border: 1px solid var(--studio-ink); border-radius: 10px; overflow: hidden; }
.school-path a { border: 0; border-radius: 0; background: #fff; padding: 28px 23px 22px; }
.school-path li + li { border-left: 1px solid var(--studio-ink); }
.school-path li:nth-child(2) a { background: var(--studio-lilac); }
.school-path li:nth-child(3) a { background: var(--studio-mint); }
.school-path a:hover { background: #f5f2ff; box-shadow: none; }
.school-step-number { font: 500 1.5rem/1 ui-monospace, monospace; width: auto; height: auto; background: none; color: var(--studio-purple); margin-bottom: 38px; border-radius: 0; }
.school-path h3, .school-project-copy h3, .school-format h3, .school-library h3 { font-weight: 800; letter-spacing: -.035em; }
.school-card-foot { color: var(--studio-ink); border-color: #26233326; }
.school-project-card { border: 1px solid var(--studio-ink); border-radius: 10px; }
.school-project-card:hover { border-color: var(--studio-ink); box-shadow: 4px 4px 0 var(--studio-lilac); }
.school-project-image { padding: 0; background: var(--studio-lilac); border-bottom: 1px solid var(--studio-ink); }
.school-project-image > span:not(.project-cover) { top: auto; bottom: 12px; left: 12px; border: 1px solid var(--studio-ink); border-radius: 4px; box-shadow: none; font-size: .68rem; }
.school-project-copy { padding: 24px; }
.school-format { border: 1px solid var(--studio-ink); border-radius: 10px; background: #f8f7fb; padding: 42px; gap: 64px; }
.school-format-steps li { border-bottom: 1px solid var(--studio-line); padding-bottom: 22px; }
.school-format-steps li:last-child { border: 0; padding-bottom: 0; }
.school-format-steps li > span { color: var(--studio-purple); font-family: ui-monospace, monospace; }
.school-tools { border-left: 3px solid #a793ed; }
.school-book-banner { border: 1px solid var(--studio-ink); border-radius: 10px; background: var(--studio-lilac); padding: 44px 54px; }
.school-book-banner h2 { font-weight: 800; letter-spacing: -.045em; }
.school-book-banner p:not(.section-label) { color: var(--studio-muted); }
.school-book-cover { box-shadow: 7px 9px 0 #26233323; }
.school-library section { border-top: 2px solid var(--studio-ink); padding-top: 24px; }
.school-library section:nth-child(2) { border-top-color: var(--studio-purple); }
.school-library section:nth-child(3) { border-top-color: #62b79a; }
.school-library li a { color: var(--studio-ink); }
.school-faq-list details, .school-faq-list details:first-child { border-color: var(--studio-line); }
.school-home .home-final-cta { border: 1px solid var(--studio-ink); border-radius: 10px; background: var(--studio-mint); padding: 52px 32px; }
.school-home .home-final-cta > p:not(.section-label) { color: var(--studio-muted); }
/* Lessons are quiet: the same typography and colour, with space for long reading. */
.single-article { padding-top: 0; max-width: 780px; }
.article-toc { background: #f7f5fc; border-bottom: 1px solid var(--studio-line); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.article-toc-toggle, .article-toc-toggle:hover { color: var(--studio-ink); background: none; font-size: .8rem; }
.article-toc-list { background: #fff; border-bottom: 1px solid var(--studio-ink); box-shadow: 0 8px 0 #2623330a; }
.article-toc-list a:hover { color: var(--studio-purple); background: var(--studio-lilac); }
.article-breadcrumbs { padding-top: 10px; font-size: .75rem; }
.article-detail-title { font-size: clamp(2rem, 4vw, 3.1rem); letter-spacing: -.045em; line-height: 1.16; margin-bottom: 22px; }
.article-meta { color: var(--studio-muted); font-size: .78rem; }
.article-cover-art { height: clamp(150px, 24vw, 230px); border: 1px solid var(--studio-ink); border-radius: 9px; overflow: hidden; margin-top: 24px; }
.article-track-nav { padding: 22px; margin: 26px 0 36px; background: #f8f6ff; border: 1px solid var(--studio-line); border-radius: 9px; box-shadow: none; }
.article-track-nav::before { content: none; }
.article-track-map { background: #fff; border: 1px solid #c3b7e7; border-radius: 5px; box-shadow: none; }
.article-track-progress { background: #fff; border-radius: 4px; }
.article-track-step { background: #fff; border-radius: 6px; border-color: var(--studio-line); }
.article-track-step--current { background: var(--studio-lilac); border-color: #ae9cd9; box-shadow: none; }
.article-track-step--current .article-track-dot { box-shadow: none; }
.article-track-step-link, .article-track-step-label { color: var(--studio-ink); font-size: .8rem; }
.article-track-kicker { font-size: .7rem; letter-spacing: .035em; }
.article-body { color: var(--studio-ink); }
.article-body > p:first-child, .article-body .article-lead { color: var(--studio-muted); }
.article-body h2 { letter-spacing: -.035em; padding-top: .1em; }
.article-body a { color: var(--studio-purple); text-underline-offset: 3px; }
.article-body a.article-read-btn, .article-body a.book-offer-cta { color: #fff; }
.article-body pre { border: 1px solid #383044; border-radius: 8px; box-shadow: none; }
.article-body :not(pre) > code { background: #f0ecf9; color: #5d459d; border: 0; }
.article-callout { border-radius: 8px; border: 1px solid #cabce5; background: #f6f2ff; box-shadow: none; }
.article-callout--result { background: #ebf8f2; border-color: #a7d3c3; }
.article-callout--source { background: #f5f3fa; border: 1px solid var(--studio-line); box-shadow: none; }
.article-callout--source::before { content: none; }
.article-track-bottom { background: var(--studio-lilac); border: 1px solid #c9bde5; border-radius: 8px; }
.book-offer-card { background: var(--studio-lilac); border: 1px solid #c4b5e7; border-radius: 9px; box-shadow: none; }
.book-offer-card::before { content: none; }
.book-offer-cta { border-radius: 6px; }
/* Reusable book offer inserted into article content. */
.article-book-cta {
  grid-template-columns: 140px minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  margin: 36px 0;
  padding: 28px;
  border: 1px solid var(--studio-ink);
  border-radius: 9px;
  background: var(--studio-lilac);
  box-shadow: none;
  color: var(--studio-ink);
}
.article-book-cta .article-book-cta-cover {
  max-width: 140px;
  margin: 0;
  border: 1px solid var(--studio-ink);
  border-radius: 3px 6px 6px 3px;
  box-shadow: 5px 5px 0 #26233320;
}
.article-book-cta-content { min-width: 0; gap: 12px; }
.article-book-cta .article-book-cta-kicker {
  margin: 0;
  color: var(--studio-purple);
  font: 600 .68rem/1.65 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .055em;
}
.article-book-cta strong {
  color: var(--studio-ink);
  font-size: 1.28rem;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -.025em;
}
.article-book-cta p:not(.article-book-cta-kicker) {
  margin: 0;
  color: var(--studio-muted);
  font-size: .94rem;
  line-height: 1.75;
}
.article-book-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  min-height: 48px;
  margin-top: 5px;
  padding: 12px 18px;
  border: 1px solid var(--studio-purple);
  border-radius: 6px;
  background: var(--studio-purple);
  box-shadow: none;
  color: #fff;
  font-size: .88rem;
  font-weight: 750;
  line-height: 1.5;
  text-decoration: none;
}
.article-book-cta a:hover {
  color: #fff;
  background: #503bc5;
  border-color: #503bc5;
  box-shadow: 3px 3px 0 var(--studio-ink);
  transform: translate(-1px, -1px);
}
.article-book-cta a:focus-visible {
  outline: 3px solid var(--studio-ink);
  outline-offset: 4px;
}
@media (max-width: 600px) {
  .article-book-cta {
    grid-template-columns: 82px minmax(0, 1fr);
    align-items: start;
    gap: 12px 18px;
    margin-block: 28px;
    padding: 22px;
  }
  .article-book-cta-content { display: contents; }
  .article-book-cta .article-book-cta-cover { grid-column: 1; grid-row: 1 / 3; width: 82px; align-self: center; }
  .article-book-cta .article-book-cta-kicker { grid-column: 2; grid-row: 1; font-size: .62rem; }
  .article-book-cta strong { grid-column: 2; grid-row: 2; font-size: 1rem; line-height: 1.45; }
  .article-book-cta p:not(.article-book-cta-kicker) { grid-column: 1 / -1; font-size: .91rem; padding-top: 7px; }
  .article-book-cta a { grid-column: 1 / -1; justify-self: stretch; width: 100%; margin-top: 4px; font-size: .88rem; }
}
.article-neighbor-link { background: #fff; border: 1px solid var(--studio-line); border-radius: 7px; box-shadow: none; }
.neighbor-cover { display: block; width: 66px; height: 54px; flex-shrink: 0; overflow: hidden; border-radius: 4px; }
/* The library uses the same covers and navigation as the learning route. */
.blog-hero.play-hero { background: none; border: 0; padding: 46px 0 24px; border-radius: 0; box-shadow: none; }
.blog-hero::before, .blog-hero::after { content: none; }
.play-hero.blog-hero .blog-title, .play-page-title { color: var(--studio-ink); font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -.05em; line-height: 1.16; }
.blog-hero .section-label { color: var(--studio-purple); font: 500 .74rem ui-monospace, monospace; }
.play-hero.blog-hero .blog-lead { color: var(--studio-muted); max-width: 64ch; font-size: 1rem; line-height: 1.75; margin-top: 16px; }
.library-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 32px; }
.library-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 15px; color: var(--studio-muted); border: 1px solid var(--studio-line); border-radius: 5px; text-decoration: none; font-size: .82rem; }
.library-nav a[aria-current], .library-nav a:hover { color: var(--studio-ink); background: var(--studio-lilac); border-color: #b9a8df; }
.blog-page .post-card, .post-card { border: 1px solid var(--studio-ink); border-radius: 9px; box-shadow: none; background: #fff; padding: 22px; }
.blog-page .post-card:hover, .post-card:hover { border-color: var(--studio-ink); box-shadow: 4px 4px 0 var(--studio-lilac); }
.blog-page .post-card-media, .post-card-media, .post-card-compact .post-card-media { margin: -22px -22px 20px; aspect-ratio: 1.9; border-radius: 0; background: var(--studio-lilac); border-bottom: 1px solid var(--studio-ink); }
.post-card-title, .post-card-compact .post-card-title { font-weight: 800; font-size: 1.13rem; letter-spacing: -.025em; line-height: 1.4; }
.post-card-excerpt { color: var(--studio-muted); }
.post-card-foot { border-color: var(--studio-line); }
.play-card-cover { border: 1px solid var(--studio-ink); border-radius: 8px; }
.pagination-link { background: #fff; border: 1px solid var(--studio-line); border-radius: 5px; box-shadow: none; }
.app-footer { background: #f5f2fa; border-top: 1px solid var(--studio-line); color: var(--studio-muted); padding-block: 56px 25px; }
.footer-main { gap: 36px; grid-template-columns: 1.5fr 1fr .8fr 1.2fr; margin-bottom: 40px; }
.footer-title { color: var(--studio-ink); font-size: .86rem; }
.footer-text, .footer-meta, .footer-links a, .footer-meta a, .footer-bottom a { color: var(--studio-muted); font-size: .8rem; }
.footer-text { line-height: 1.85; }
.footer-links a:hover, .footer-meta a:hover, .footer-bottom a:hover { color: var(--studio-purple); }
.footer-bottom { border-color: var(--studio-line); font-size: .76rem; }
.footer-social a { background: #fff; color: var(--studio-purple); border: 1px solid #d8cfe9; border-radius: 6px; }
.footer-social a:hover { background: var(--studio-lilac); color: var(--studio-purple); }
@media (max-width: 1100px) and (min-width: 769px) {
  .header-nav { gap: 22px; }
  .header-brand .site-subtitle { display: none; }
  .school-home .hero-screen { gap: 38px; }
  .school-home .hero-title { font-size: 3.5rem; }
  .school-path li:nth-child(3) { border-left: 0; }
  .school-path li:nth-child(n+3) { border-top: 1px solid var(--studio-ink); }
  .footer-main { grid-template-columns: 1.4fr 1fr; }
}
@media (max-width: 768px) {
  .site-header { padding-block: 13px; }
  .header-brand .site-title { font-size: 1.45rem; }
  .header-brand .site-subtitle { font-size: .59rem; max-width: none; }
  .header-brand .logo { width: 33px; height: 33px; }
  .header-burger, .site-header.is-open .header-burger { border: 1px solid var(--studio-line); border-radius: 6px; background: #fff; }
  .header-burger span, .header-burger span::before, .header-burger span::after { background: var(--studio-ink); }
  .site-header.is-open .header-burger span { background: transparent; }
  .header-nav { background: #fff; border-color: var(--studio-line); box-shadow: 0 7px 0 #2623330a; backdrop-filter: none; -webkit-backdrop-filter: none; gap: 0; }
  .header-link, .header-link.active { color: var(--studio-ink); border-color: var(--studio-line); font-size: 1rem; }
  .header-link.active { color: var(--studio-purple); }
  .school-home { gap: 60px; }
  .school-home .hero-screen { grid-template-columns: minmax(0, 1fr); padding: 40px 0 28px; gap: 35px; }
  .school-home .hero-title { font-size: clamp(2.7rem, 11vw, 4rem); line-height: 1.08; letter-spacing: -.055em; margin-top: 17px; }
  .school-home .hero-kicker { max-width: 31ch; font-size: .68rem; }
  .school-home .hero-lead { font-size: 1rem; }
  .school-home .hero-window { width: calc(100% - 5px); transform: none; box-shadow: 5px 5px 0 var(--studio-ink); }
  .school-home .hero-game-canvas { height: 245px; min-height: 220px; }
  .home-jump-nav { margin-top: -39px; gap: 0 23px; }
  .school-home .section-title { font-size: 1.9rem; }
  .school-path a { padding: 24px 22px 22px 71px; }
  .school-path li + li { border-left: 0; border-top: 1px solid var(--studio-ink); }
  .school-step-number { top: 29px; left: 22px; width: auto; height: auto; font-size: 1.25rem; }
  .school-project-image { padding: 0; }
  .school-format { padding: 28px 23px; gap: 30px; }
  .school-book-banner { padding: 32px 25px; }
  .school-home .home-final-cta { padding: 34px 24px; }
  .article-detail-title { font-size: clamp(1.9rem, 7.8vw, 2.6rem); line-height: 1.2; }
  .article-track-nav { padding: 18px; }
  .article-cover-art { height: 160px; }
  .blog-hero.play-hero { padding-top: 30px; }
  .library-nav { gap: 7px; margin-bottom: 25px; }
  .library-nav a { padding-inline: 12px; font-size: .76rem; }
  .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 25px; }
  .footer-brand-col { grid-column: 1 / -1; }
  .footer-col:last-child { grid-column: 1 / -1; }
  .footer-text { max-width: 48ch; }
}
@media (max-width: 360px) {
  .article-book-cta { grid-template-columns: 64px minmax(0, 1fr); gap: 12px 14px; padding: 18px; }
  .article-book-cta .article-book-cta-cover { width: 64px; }
  .header-brand .site-subtitle { font-size: .52rem; }
  .header-brand .site-title { font-size: 1.3rem; }
  .school-home .hero-title { font-size: 2.7rem; }
  .school-home .hero-cta { font-size: .86rem; padding-inline: 12px; }
}