/* Why it matters, on the colour system from home.css (round 23, 5 November 2026). The page is about learning to ask:
   the vague question on paper against the better one on blue, the six skills on Noodle's teal, the Kitchen green,
   the lessons and games on purple. Every proof is inked. */

/* Strands. Into and out of a split they carry both colours; gradient fills sit in the SVGs */
.page-hero+.strand{background:var(--yellow)}
.wim-split+.strand{background:linear-gradient(90deg,var(--paper) 50%,var(--blue) 50%)}
.wim-skills-band+.strand{background:var(--teal)}
.wim-kit-split+.strand{background:linear-gradient(90deg,var(--green) 58.333%,var(--paper) 58.333%)}
.band-purple+.strand{background:var(--purple)}
.strand.to-purple path:first-child{fill:var(--purple)}
.split>.strand{display:none}
.strand+.split .split-side{padding-top:64px}
.split:has(+.strand) .split-side{padding-bottom:80px}

/* Same question, two answers */
.wim-split{--a:1fr;--b:1fr}
.wim-side-vague{background:var(--paper);display:flex;flex-direction:column;justify-content:space-between;gap:48px}
.wim-side-better{background:var(--blue);display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:clip;isolation:isolate}
.wim-side-better:before{content:"";position:absolute;z-index:-1;right:-30%;top:-10%;width:90%;height:58%;background:var(--blue-shape);border-radius:0 0 0 160px;transform:rotate(10deg)}
.wim-split .wim-ask .wim-bub-noodle{background:var(--white);border:var(--inked);box-shadow:4px 4px 0 var(--ink)}
.wim-split .wim-bub-kid{border:var(--inked);box-shadow:4px 4px 0 var(--ink)}
.wim-side-better .wim-bub-kid{background:var(--ink)}
.wim-side-better .wim-note{border:var(--inked);box-shadow:var(--shadow)}
.wim-side-better .wim-cap{color:var(--white)}
.wim-side-vague .wim-cap{color:var(--ink-2)}

/* Six skills on teal; the book is an inked card */
.wim-skills-band .title{color:var(--white)}
.wim-skills-band .lede{color:var(--on-teal)}
.wim-skills-band .wim-book{border:var(--inked);box-shadow:var(--shadow);border-radius:10px}
.wim-skills-band .wim-book p,.wim-skills-band .wim-book .wim-why,.wim-skills-band .wim-book .wim-was{color:var(--ink-2)}
.wim-skills-band .wim-book .exbook-prompt{color:var(--ink)}

/* The Kitchen: words on green, the Kitchen on paper */
.wim-kit-split{--a:7fr;--b:5fr}
.wim-kit-words{background:var(--green);color:var(--white);justify-content:center}
.wim-kit-words .title{color:var(--white)}
.wim-kit-words .lede{color:var(--white);max-width:30em}
.wim-kit-words a.deep:after{color:var(--yellow)}
.wim-kit-side{background:var(--paper);display:grid;place-items:center}
.wim-kit-side .kit{width:100%;max-width:480px;background:var(--green);color:var(--white);border:var(--inked);box-shadow:var(--shadow);border-radius:22px}
.wim-kit-side .kit-top span,.wim-kit-side .kit-tabs span{color:var(--white)}
.wim-kit-side .kit-tabs{background:#00000026}
.wim-kit-side .kit-tabs span[aria-current]{color:var(--green)}

/* How Noodle teaches it, on purple */
.wim-teach .title{color:var(--white)}
.wim-teach .wim-lead-words h3,.wim-teach .way-words h3{color:var(--white)}
.wim-teach .wim-lead-words p,.wim-teach .way-words p{color:#f1e9f7}
.wim-teach .wim-scene-tip,.wim-teach .way-mock{border:var(--inked);box-shadow:var(--shadow)}
.wim-teach .wim-scene-tip .wim-bub-noodle{border:2px solid var(--ink)}
.wim-teach .mock-golf{border-color:var(--ink)}

@media(max-width:960px){
  .split>.strand{display:block}
  .wim-split>.strand{background:var(--paper)}
  .wim-kit-split>.strand{background:var(--green)}
  .page-hero+.strand path:first-child{fill:var(--paper)}
  .wim-split+.strand{background:var(--blue)}
  .wim-skills-band+.strand path:first-child{fill:var(--green)}
  .wim-kit-split+.strand{background:var(--paper)}
  .wim-side-vague{padding-bottom:40px}
  .wim-side-better,.wim-kit-side{padding-top:32px}
  .wim-kit-words{padding-bottom:40px}
}

/* Words inside a proof stay ink, whatever the band's ground */
.wim-teach .wim-scene-tip p,.wim-teach .wim-bub-noodle{color:var(--ink)}
.wim-teach .wim-tip p{color:var(--ink-2)}
.wim-teach .wim-tip .wim-tip-ask{color:var(--ink)}
.wim-teach .mock-recipe,.wim-teach .mock-recipe span{color:var(--ink)}
.wim-teach .wim-scene-tip .wim-bub-kid{color:var(--white)}

/* Round 27, direction A (see home.css). The signature band is teal "Six skills" */
@media(min-width:961px){
  .wim-split,.wim-kit-split{background:var(--paper)}
  .st-kit path[fill^="url"]{fill:var(--paper)}
  .wim-split+.strand{background:var(--paper)}
  .wim-side-better:before{display:none}
  .wim-side-better .wim-cap,.wim-kit-words :is(h2,h2 a,.lede){color:var(--ink)!important}
  .wim-teach{background:var(--paper)}
  .wim-teach+.strand{background:var(--paper)}
  .wim-teach :is(h2,h2 a,.wim-lead-words h3,.wim-lead-words p,.way-words h3,.way-words p){color:var(--ink)!important}
  .st-two,.st-teach{display:none}
}

/* Round 29: the learn-first rule under the three ways */
.wim-open{margin:28px 0 0;max-width:62ch;font-size:17px;line-height:1.5}
.wim-open b{color:var(--yellow)}
@media(min-width:961px){.wim-teach .wim-open{color:var(--ink)!important}.wim-teach .wim-open b{color:var(--teal)!important}}