/* Knowledge hub pictures, diagrams and loops (added 5 October 2026). Loaded on Knowledge hub pages only, after
   site.css, live.css and features.css, so it uses their colour tokens and follows the Display settings.

   The illustrations are risograph-style prints on cream paper, so they are shown as prints: a hairline edge and the
   card radius, which sits well on every page colour. In dark mode they are dimmed a little so they do not glare. */
.kh-frame { position: relative; overflow: hidden; border-radius: var(--radius); background: #F6EFDF; box-shadow: 0 0 0 1px var(--line); }
.kh-pic { display: block; width: 100%; height: auto; background: #F6EFDF; }
.kh-frame > .kh-pic { aspect-ratio: 3 / 2; object-fit: cover; }

/* Page heads with a picture: the hub, the section pages and the glossary */
.kh-hero-head .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: clamp(32px, 5vw, 80px); align-items: center; }
.kh-hero-head .lede { max-width: 32em; }
.kh-hero { margin: 0; }
@media (max-width: 900px) {
  .kh-hero-head .wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .kh-hero { max-width: 560px; }
}

/* A loop plays over the still of the same picture, and fades in once it is playing */
.kh-loop video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s ease; pointer-events: none; }
.kh-loop.is-playing video { opacity: 1; }
.kh-loop-toggle { position: absolute; right: 10px; bottom: 10px; z-index: 1; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: rgba(33, 18, 43, .64); color: #FFFFFF; cursor: pointer; opacity: .8; transition: opacity .2s ease; }
.kh-loop-toggle:hover, .kh-loop-toggle:focus-visible { opacity: 1; }
.kh-loop-toggle svg { width: 14px; height: 14px; }
.kh-loop-toggle[hidden] { display: none; }  /* stays hidden until the script starts the loop (not with reduced motion) */
.kh-loop-toggle .i-play, .kh-loop-toggle[aria-pressed="true"] .i-pause { display: none; }
.kh-loop-toggle[aria-pressed="true"] .i-play { display: block; }
.kh-loop-toggle:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; box-shadow: 0 0 0 6px var(--violet); }

/* Cards on the hub: the picture sits on top (it comes after the text in the page, for screen readers) */
.kh-card.has-pic { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.kh-card.has-pic .kh-card-pic { order: -1; aspect-ratio: 3 / 2; overflow: hidden; background: #F6EFDF; border-bottom: 1px solid var(--line); }
.kh-card.has-pic .kh-card-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.kh-card.has-pic h3 { padding: 20px 22px 0; }
.kh-card.has-pic p { padding: 0 22px; margin-bottom: 24px; }
.kh-card.has-pic:hover .kh-card-pic img { transform: scale(1.025); }

/* Rows in the long-read and section lists, and the glossary on the hub */
.kh-list li.has-pic, .kh-gloss-block.has-pic { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 12px 40px; align-items: start; }
.kh-row-pic { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius); box-shadow: 0 0 0 1px var(--line); background: #F6EFDF; }
.kh-row-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.kh-list li.has-pic:hover .kh-row-pic img, .kh-gloss-block.has-pic:hover .kh-row-pic img { transform: scale(1.025); }
.kh-index .wrap:not(.narrow) .kh-list { max-width: 1000px; }
.kh-section .kh-list li.has-pic { max-width: 1000px; }
.kh-section .kh-list:has(li.has-pic) { max-width: 1000px; }
@media (max-width: 700px) {
  .kh-list li.has-pic, .kh-gloss-block.has-pic { grid-template-columns: minmax(0, 1fr) 96px; gap: 8px 18px; }
  .kh-row-pic { aspect-ratio: 1; margin-top: 4px; }
}

/* The article's picture, between the standfirst and the share buttons */
.kh-lead { margin: 30px 0 4px; }
.kh-lead > .kh-pic { aspect-ratio: 2 / 1; }
@media (max-width: 700px) { .kh-lead > .kh-pic { aspect-ratio: 3 / 2; } }

/* Pictures in the body of an article */
.kh-body .kh-figure { margin: 12px 0 36px; }
.kh-figure .kh-frame > .kh-pic { aspect-ratio: auto; }
.kh-pics { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }

/* Diagrams: drawn in SVG with the page's own colours, so they follow light, dark and the page tints */
.kh-diagram { margin: 16px 0 40px; padding: clamp(18px, 3vw, 28px); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.kh-diagram svg { display: block; width: 100%; height: auto; overflow: visible; }
.kh-diagram figcaption { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.prose > .kh-diagram.kh-wide { grid-column: 1 / -1; max-width: 1040px; width: 100%; margin-left: auto; margin-right: auto; }
.d-t { font-family: var(--body); font-size: 15px; fill: var(--ink); }
.d-ts { font-family: var(--body); font-size: 13px; fill: var(--mid); }
.d-tb { font-family: var(--body); font-size: 15px; font-weight: 700; fill: var(--ink); }
.d-th { font-family: var(--head); font-size: 22px; fill: var(--aubergine); }
.d-tv { font-family: var(--body); font-size: 15px; font-weight: 700; fill: var(--violet); }
.d-tq { font-family: var(--head); font-style: italic; font-size: 21px; fill: var(--aubergine); }
.d-box { fill: var(--cream); stroke: var(--line-strong); stroke-width: 1.5; }
.d-card { fill: var(--paper); stroke: var(--line-strong); stroke-width: 1.5; }
.d-tint { fill: var(--lilac); }
.d-vio { fill: var(--violet); }
.d-aub { fill: var(--aubergine); }
.d-hl { fill: #F2C94C; opacity: .6; }
.d-line { fill: none; stroke: var(--violet); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.d-thin { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.d-rule { fill: none; stroke: var(--rule); stroke-width: 1.5; }
.d-dash { fill: none; stroke: var(--violet); stroke-width: 2; stroke-dasharray: 5 6; stroke-linecap: round; }

/* Drawing in: without JavaScript, or for anyone who asks for reduced motion, a diagram is simply there. kh.js adds
   kh-anim-on to the page, so the parts start hidden, and is-in to each diagram as it comes into view. */
.kh-anim [data-step] { transition: opacity .55s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 160ms); transform-box: fill-box; }
.kh-anim .d-draw { stroke-dasharray: 1 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s ease; transition-delay: calc(var(--i, 0) * 160ms); }
.kh-anim .d-grow { transform-box: fill-box; transform-origin: left center; transition: transform .9s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 160ms); }
.kh-anim .d-rise { transform-box: fill-box; transform-origin: center bottom; transition: transform .9s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 160ms); }
.kh-anim-on .kh-anim:not(.is-in) [data-step] { opacity: 0; transform: translateY(10px); }
.kh-anim-on .kh-anim:not(.is-in) .d-draw { stroke-dashoffset: 1; }
.kh-anim-on .kh-anim:not(.is-in) .d-grow { transform: scaleX(0); }
.kh-anim-on .kh-anim:not(.is-in) .d-rise { transform: scaleY(0); }
@media (prefers-reduced-motion: reduce) {
  .kh-anim [data-step], .kh-anim .d-draw, .kh-anim .d-grow, .kh-anim .d-rise { transition: none !important; }
  .kh-card.has-pic .kh-card-pic img, .kh-row-pic img { transition: none; }
  .kh-card.has-pic:hover .kh-card-pic img, .kh-list li.has-pic:hover .kh-row-pic img, .kh-gloss-block.has-pic:hover .kh-row-pic img { transform: none; }
}

/* Dark mode: the prints are dimmed a little */
:root[data-theme="dark"] .kh-pic, :root[data-theme="dark"] .kh-loop video { filter: brightness(.86) saturate(.95); }
:root[data-theme="dark"] .kh-frame, :root[data-theme="dark"] .kh-row-pic { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
:root[data-theme="dark"] .dg-seg + .dg-seg + .dg-seg { background: rgba(242, 201, 76, .18); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kh-pic, :root:not([data-theme="light"]) .kh-loop video { filter: brightness(.86) saturate(.95); }
  :root:not([data-theme="light"]) .kh-frame, :root:not([data-theme="light"]) .kh-row-pic { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
  :root:not([data-theme="light"]) .dg-seg + .dg-seg + .dg-seg { background: rgba(242, 201, 76, .18); }
}

/* Printing: the illustrations stay off the paper (they would only use ink); diagrams print, and keep in one piece */
@media print {
  .kh-lead, .kh-hero, .kh-row-pic, .kh-card-pic, .kh-loop-toggle, .kh-figure.kh-decor { display: none !important; }
  .kh-hero-head .wrap, .kh-list li.has-pic, .kh-gloss-block.has-pic { display: block; }
  .kh-diagram { break-inside: avoid; border-color: #999; }
  .kh-anim [data-step] { opacity: 1 !important; transform: none !important; }
  .kh-anim .d-draw { stroke-dashoffset: 0 !important; }
  .kh-anim .d-grow, .kh-anim .d-rise { transform: none !important; }
}

/* The glossary with a picture in its head: the list keeps its reading width, aligned with the head */
.gl-wide > * { max-width: 760px; }

/* --- Diagrams (site/knowledge/diagrams/*.html): real text in HTML, laid out here, so they read on a phone, follow
   light and dark and the page tints, and print. ------------------------------------------------------------------ */
.dg { position: relative; font-size: 16px; line-height: 1.45; color: var(--ink); }
.dg p { margin: 0; }
.dg ol, .dg ul { list-style: none; margin: 0; padding: 0; }
.dg b { color: var(--aubergine); }
/* Highlights and filled violet shapes take the site's own pairs, so their text keeps its contrast in dark mode too */
.dg mark { background: var(--mark-bg, #F4D67B); color: var(--mark-fg, #21122B); padding: 0 .08em; border-radius: 2px; }
.dg-hl { background: var(--mark-bg, #F4D67B); color: var(--mark-fg, #21122B); }

/* The exams: bar length is time, part width is marks */
.dg-exams { display: grid; gap: 26px; }
.dg-exam-head { font-size: 17px; }
.dg-exam-head span { color: var(--mid); }
.dg-exam-meta { color: var(--mid); font-size: 15px; margin: 2px 0 10px !important; }
.dg-bar { display: flex; gap: 3px; transform-origin: left center; }
.dg-seg { flex-basis: 0; min-width: 0; padding: 10px 12px; background: var(--violet-soft); border-top: 3px solid var(--violet); }
.dg-seg + .dg-seg { background: var(--lilac); }
.dg-seg + .dg-seg + .dg-seg { background: rgba(242, 201, 76, .4); }
.dg-seg b { display: block; font-size: 15px; line-height: 1.3; }
.dg-seg span { display: block; font-size: 14px; color: var(--mid); }
@media (max-width: 560px) { .dg-bar { width: 100% !important; } .dg-seg { padding: 8px 8px; } .dg-seg b { font-size: 14px; } .dg-seg span { font-size: 13px; } }

/* AQA's six levels: a staircase that turns into a ladder on a phone */
.dg-steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; align-items: end; }
.dg-step { display: flex; flex-direction: column; }
.dg-step-block { display: flex; flex-direction: column; justify-content: flex-start; min-height: calc(30px + var(--n) * 28px); padding: 10px 10px 8px;
  background: var(--violet-soft); border-top: 3px solid var(--violet); transform-origin: center bottom; }
.dg-step:last-child .dg-step-block { background: var(--violet); }
.dg-step:last-child .dg-step-block b, .dg-step:last-child .dg-step-block span { color: var(--on-violet, #FFFFFF); }
.dg-step-block b { font-size: 15px; }
.dg-step-block span { font-size: 13px; color: var(--mid); }
.dg-step-head { font-family: var(--head); font-size: 16px; line-height: 1.3; color: var(--aubergine); padding: 10px 2px 0; min-height: 5.4em; }
@media (max-width: 700px) {
  .dg-steps { display: flex; flex-direction: column-reverse; gap: 6px; align-items: stretch; }
  .dg-step { flex-direction: row; align-items: stretch; gap: 12px; }
  .dg-step-block { min-height: 0; width: calc(64px + var(--n) * 6px); flex: none; padding: 8px 8px; border-top: 0; border-left: 3px solid var(--violet); transform-origin: left center; }
  .dg-step-head { min-height: 0; padding: 8px 0; align-self: center; }
}

/* Exploding a quotation: the line on top, a bracket, and the four notes under it */
.dg-quote { position: relative; max-width: 380px; margin: 0 auto !important; text-align: center; font-family: var(--head); font-style: italic;
  font-size: clamp(22px, 2.6vw, 28px); color: var(--aubergine); background: var(--paper); border: 1.5px solid var(--violet); border-radius: var(--radius); padding: 16px 14px; }
.kh-diagram .dg-tree { position: relative; height: 34px; margin: 0 12.5%; border-bottom: 2px solid var(--violet); transform-origin: center; }
.dg-tree::before { content: ""; position: absolute; left: 50%; top: 0; height: 32px; border-left: 2px solid var(--violet); }
.dg-notes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding-top: 18px !important; }
.dg-note { position: relative; background: var(--cream); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 12px 14px; font-size: 15px; }
.dg-note::before { content: ""; position: absolute; left: 50%; top: -19px; height: 18px; border-left: 2px solid var(--violet); }
.dg-note b { display: block; }
@media (max-width: 760px) {
  .dg-tree { display: none; }
  .dg-notes { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 0 0 18px !important; border-left: 2px solid var(--violet); margin-left: 8px !important; }
  .dg-note::before { left: -19px; top: 50%; height: 0; width: 18px; border-left: 0; border-top: 2px solid var(--violet); }
  .dg-note b { display: inline; }
}

/* Hinge answers: four patterns of mini whiteboards */
.dg-patterns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.dg-pattern { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.dg-boards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 12px; }
.dg-board { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 3px; border: 1.5px solid var(--line-strong); background: var(--paper);
  font: 700 13px/1 var(--body); color: var(--mid); transition: transform .45s cubic-bezier(.2, .7, .2, 1), opacity .45s ease; transition-delay: calc(var(--i, 0) * 70ms); }
.dg-board.is-right { background: var(--violet); border-color: var(--violet); color: var(--on-violet, #FFFFFF); }
.kh-anim-on .kh-anim:not(.is-in) .dg-board { opacity: 0; transform: translateY(12px); }
.dg-pattern-head { font-weight: 700; color: var(--aubergine); font-size: 15px; line-height: 1.3; margin-bottom: 4px !important; }
.dg-pattern-do { font-size: 14px; color: var(--ink); }
@media (max-width: 900px) { .dg-patterns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .dg-patterns { grid-template-columns: minmax(0, 1fr); } }

/* The Feedback Loop: four steps round a loop, the arrows drawn on each step */
.dg-nodes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 64px; }
.dg-node { position: relative; background: var(--cream); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 14px 16px; }
.dg-node b { display: block; margin-bottom: 4px; }
.dg-node span { font-size: 15px; }
.dg-node-3 { grid-column: 2; grid-row: 2; } .dg-node-4 { grid-column: 1; grid-row: 2; }
.dg-arrow { position: absolute; display: block; background: var(--violet); }
.dg-arrow::after { content: ""; position: absolute; width: 0; height: 0; border: 7px solid transparent; }
.dg-node-1 .dg-arrow { left: calc(100% + 10px); top: 50%; width: 38px; height: 2px; }
.dg-node-1 .dg-arrow::after { right: -12px; top: -6px; border-left: 9px solid var(--violet); }
.dg-node-2 .dg-arrow { top: calc(100% + 8px); left: 50%; width: 2px; height: 18px; }
.dg-node-2 .dg-arrow::after { bottom: -12px; left: -6px; border-top: 9px solid var(--violet); }
.dg-node-3 .dg-arrow { right: calc(100% + 10px); top: 50%; width: 38px; height: 2px; }
.dg-node-3 .dg-arrow::after { left: -12px; top: -6px; border-right: 9px solid var(--violet); }
.dg-node-4 .dg-arrow { bottom: calc(100% + 8px); left: 50%; width: 2px; height: 18px; }
.dg-node-4 .dg-arrow::after { top: -12px; left: -6px; border-bottom: 9px solid var(--violet); }
.dg-kit { margin-top: 26px; }
.dg-kit p { font-size: 14px; color: var(--mid); margin-bottom: 6px !important; }
.dg-kit-bar { display: flex; gap: 3px; }
.dg-kit-bar span { flex-basis: 0; padding: 6px 8px; background: var(--violet-soft); border-top: 3px solid var(--violet); font-size: 13px; font-weight: 700; color: var(--aubergine); white-space: nowrap; overflow: hidden; }
@media (max-width: 640px) {
  .dg-nodes { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .dg-node-3, .dg-node-4 { grid-column: auto; grid-row: auto; }
  .dg-node .dg-arrow { left: 50%; right: auto; top: calc(100% + 4px); bottom: auto; width: 2px; height: 10px; }
  .dg-node .dg-arrow::after { left: -6px; right: auto; top: auto; bottom: -12px; border: 7px solid transparent; border-top: 9px solid var(--violet); }
  .dg-node-4 .dg-arrow { display: none; }
}

/* Marks: one square a mark */
.dg-marks { display: grid; gap: 22px; }
.dg-marks-head { margin-bottom: 8px !important; }
.dg-marks-head span { color: var(--mid); font-size: 15px; }
.dg-squares { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.dg-sq { display: inline-block; width: 15px; height: 15px; border-radius: 2px; background: var(--violet); transition: transform .4s cubic-bezier(.2, .7, .2, 1), opacity .4s ease;
  transition-delay: calc(var(--i, 0) * 40ms); }
.dg-sq.ao2 { background: rgba(110, 68, 168, .32); }
.dg-sq.ao3 { background: #F2C94C; }
.dg-sq.ao4 { background: transparent; box-shadow: inset 0 0 0 1.5px var(--mid); }
.dg-sq-gap { width: 12px; }
.kh-anim-on .kh-anim:not(.is-in) .dg-squares .dg-sq { opacity: 0; transform: scale(.4); }
.dg-marks-note { font-size: 14px; color: var(--mid); margin-top: 6px !important; }
.dg-key { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.dg-key li { display: flex; align-items: center; gap: 8px; }
.dg-key .dg-sq { width: 14px; height: 14px; flex: none; }
@media (max-width: 560px) { .dg-sq { width: 12px; height: 12px; } }

/* The 9 to 1 grades */
.dg-scale { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; align-items: end; }
.dg-grade { display: flex; flex-direction: column; align-items: stretch; text-align: center; }
.dg-grade span { display: block; background: var(--line); border-radius: 2px 2px 0 0; transform-origin: center bottom; }
.dg-grade.is-pass span { background: var(--violet-soft); box-shadow: inset 0 3px 0 var(--violet); }
.dg-grade.is-strong span { background: var(--violet); box-shadow: none; }
.dg-grade b { font: 400 22px/1.6 var(--head); }
.dg-spans { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.dg-span { font-size: 13px; font-weight: 700; color: var(--violet); border-top: 2px solid var(--violet); padding-top: 4px; }
.dg-span-pass { grid-column: 4 / 10; grid-row: 1; }
.dg-span-strong { grid-column: 5 / 10; grid-row: 2; margin-top: 6px; }
.dg-anchors { margin-top: 16px !important; padding-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 6px; font-size: 15px; }

/* AQA's 2027 dates */
.dg-months { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.dg-cal { width: 100%; border-collapse: collapse; text-align: center; font-size: 14px; }
.dg-cal caption { font: 400 20px/1.3 var(--head); color: var(--aubergine); text-align: left; padding-bottom: 8px; }
.dg-cal th { font-size: 12px; color: var(--mid); font-weight: 700; padding: 4px 0; }
.dg-cal abbr { text-decoration: none; }
.dg-cal td { padding: 3px 0; height: 34px; color: var(--mid); }
.dg-cal td span { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-weight: 700; }
.dg-cal td.is-exam span { background: var(--violet); color: var(--on-violet, #FFFFFF); }
.dg-cal td.is-spare span { box-shadow: inset 0 0 0 2px var(--violet); color: var(--violet); }
.dg-dates .dg-key { margin-top: 18px; }
.dg-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; flex: none; }
.dg-dot.is-exam { background: var(--violet); }
.dg-dot.is-spare { box-shadow: inset 0 0 0 2px var(--violet); }
.dg-dot.is-results { background: #F2C94C; }
@media (max-width: 560px) { .dg-months { grid-template-columns: minmax(0, 1fr); } }

/* The Do Now's five questions, by the lesson that taught them */
.dg-lessons { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; align-items: end; }
.dg-lessons li { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.dg-qs { display: flex; flex-direction: column; gap: 4px; min-height: 64px; justify-content: flex-end; }
.dg-q { font-size: 13px; font-weight: 700; line-height: 1.2; text-align: center; padding: 6px 4px; border-radius: 3px; background: var(--violet-soft); color: var(--aubergine); }
.dg-q-now { background: var(--violet); color: var(--on-violet, #FFFFFF); }
.dg-lesson { display: block; text-align: center; font-size: 13px; color: var(--mid); padding-top: 6px; border-top: 3px solid var(--line-strong); }
.dg-lessons li.is-now .dg-lesson { border-top-color: var(--violet); color: var(--violet); font-weight: 700; }
.dg-donow-note { margin-top: 14px !important; font-size: 15px; color: var(--mid); }
@media (max-width: 560px) { .dg-q { font-size: 11px; padding: 5px 2px; } .dg-lesson { font-size: 11px; } }

/* What–How–Why */
.dg-parts { display: grid; gap: 8px; }
.dg-part { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 16px; background: var(--cream);
  border-left: 4px solid var(--violet); border-radius: 0 var(--radius) var(--radius) 0; }
.dg-part-name { font: 400 26px/1 var(--head); color: var(--aubergine); }
.dg-part-ao { font-size: 13px; font-weight: 700; color: var(--violet); border: 1.5px solid var(--violet); border-radius: 999px; padding: 3px 9px; }
@media (max-width: 560px) { .dg-part { grid-template-columns: minmax(0, 1fr) auto; } .dg-part-text { grid-column: 1 / -1; grid-row: 2; } }

/* One question, three levels: the levels look the same on purpose (words only, no colour coding) */
.dg-three { display: grid; gap: 16px; }
.dg-three-q, .dg-three-out { text-align: center; font-family: var(--head); font-size: 20px; color: var(--aubergine); background: var(--cream); border: 1.5px solid var(--violet);
  border-radius: var(--radius); padding: 14px 16px; }
.dg-three-q span, .dg-three-out span { display: block; font: 700 13px/1.4 var(--body); color: var(--violet); margin-bottom: 4px; }
.dg-levels-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; position: relative; }
.dg-level { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius); font-size: 15px; }
.dg-level b { font: 400 21px/1.2 var(--head); }
.dg-level-aim { font-weight: 700; color: var(--violet); font-size: 14px; }
@media (max-width: 640px) { .dg-levels-row { grid-template-columns: minmax(0, 1fr); } }

@media print { .dg-board { opacity: 1 !important; transform: none !important; } .kh-anim .dg-sq { opacity: 1 !important; transform: none !important; } }

/* Asides: a small picture for a section (a stave, an act, a poem). On a wide screen it hangs in the right-hand margin
   beside the section's first lines and takes no space in the text; on narrower screens it sits above them as a strip. */
.kh-body > .kh-aside { justify-self: start; width: 100%; max-width: 560px; margin: 4px 0 20px; }
.kh-aside .kh-frame > .kh-pic { aspect-ratio: 5 / 2; }
.kh-aside figcaption { font-size: 14px; margin-top: 8px; }
@media (min-width: 1240px) {
  /* The margin beside the text is 210 px at its widest, so a 180 px picture 24 px out from the text fits it */
  .kh-body > .kh-aside { position: relative; justify-self: stretch; width: auto; max-width: none; height: 0; margin: 0; overflow: visible; }
  .kh-body > .kh-aside > .kh-frame, .kh-body > .kh-aside > figcaption { position: absolute; left: calc(100% + 24px); width: 180px; }
  .kh-body > .kh-aside > .kh-frame { top: 6px; }
  .kh-body > .kh-aside > .kh-frame > .kh-pic { aspect-ratio: 3 / 2; }
  .kh-body > .kh-aside > figcaption { top: 136px; }
}
@media print { .kh-aside { display: none !important; } }