/* Loaded only by projects/coskill.md. Uses the site's light/dark palette.
   One column: text, media, grids and section rules share the same edges. */
/* light mode only: plain white page, neutral grays instead of Flexoki's warm
   paper. body.theme-dark redefines these, so dark mode is untouched. */
:root {
  --neutral-white: #FFFFFF;
  --neutral-50: #F4F4F4;
  --neutral-100: #E6E6E6;
  --neutral-150: #DADADA;
  --color-bg-primary: var(--neutral-white);
  --color-bg-secondary: var(--neutral-50);
  --color-ui-normal: var(--neutral-100);
  --color-ui-hover: var(--neutral-150);
}
body { font-size: 19px; line-height: 1.7; }
nav { width: min(960px, calc(100% - 48px)); margin-bottom: 3rem; font-size: 15px; }
main.reading-page { width: min(960px, calc(100% - 48px)); }
.reading-page h2 { font-family: var(--font-content); }
.reading-page h1 { font-family: var(--font-content); font-size: calc(1.35em + 0.55vw); font-weight: var(--heading-weight); line-height: 1.25; letter-spacing: -0.02em; margin-bottom: 0.25em; }
.reading-page h2 { font-size: clamp(2.7rem, 3vw, 3.6rem); font-weight: 600; line-height: 1.2; margin: 6.4rem 0 2rem; padding-top: 2.4rem; border-top: 1px solid var(--color-ui-normal); scroll-margin-top: 1.6rem; }
/* group by proximity: heading, its one-line lead and its media sit close;
   the space goes between groups */
.reading-page h3 { font-size: 2.3rem; font-weight: 600; margin: 5.6rem 0 0.6rem; line-height: 1.35; }
.reading-page h2 + h3 { margin-top: 2.4rem; }
.reading-page h3 + p { margin-top: 0; }
.reading-page article > p { max-width: none; }
/* gray blocks mark only what must be read: the TL;DR and the method's key ideas */
.reading-page p.lead { font-size: 1em; line-height: 1.75; margin: 0 0 2.4rem; padding: 1.8rem 2.2rem; background: var(--color-bg-secondary); border-radius: var(--image-radius); }
.reading-page p.project-meta { margin: 0.5em 0 2.5em; color: var(--color-tx-muted); font-size: var(--font-small); line-height: 1.6; }

/* paper button, then the in-page contents on the same row */
.reading-page p.project-links { max-width: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; font-size: 14px; line-height: 1.6; margin: 1.6rem 0 3.2rem; color: var(--color-tx-faint); }
.reading-page p.project-links a { color: var(--color-tx-muted); text-decoration: none; }
.reading-page p.project-links a:hover { color: var(--color-action); }
article .project-links a[href] { background-image: none; padding-right: 0; }
.reading-page p.project-links a.button { margin-right: 0.9rem; padding: 0.6rem 1.6rem; border: 1px solid var(--color-tx-normal); border-radius: 999px; color: var(--color-tx-normal); font-size: 15px; font-weight: 600; }
.reading-page p.project-links a.button:hover { background: var(--color-tx-normal); color: var(--color-bg-primary); }

/* full-width media */
.reading-page article > p:has(> video),
.reading-page article > p:has(img) { max-width: none; margin: 1.6rem 0 0; }
/* all clips are 1280x720; reserve the box before metadata loads */
.reading-page video { width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--color-bg-secondary); border: 1px solid var(--color-ui-normal); }
.reading-page article > p > a > img { display: block; width: 100%; height: auto; }
/* paper figures are drawn on white; keep them legible in dark mode */
.reading-page img.figure-light { box-sizing: border-box; padding: 1.6rem; background: #fff; border: 1px solid var(--color-ui-normal); }
/* Stage 1–2: the top strip (rows 0–345) of the paper's pipeline figure (2044x1258) */
.reading-page img.stage-12 { padding: 0; object-fit: cover; }
.reading-page img.stage-12 { aspect-ratio: 2044 / 345; object-position: 50% 0; }
.reading-page article > p:has(> em:only-child) { font-size: 14px; }

/* method: three gray blocks, name + one line each */
.idea-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin: 1.6rem 0 0; }
.idea-grid > div { padding: 1.8rem 2rem; background: var(--color-bg-secondary); border-radius: var(--image-radius); }
.reading-page .idea-grid h4 { font-size: 17px; line-height: 1.35; margin: 0 0 0.6rem; }
.reading-page .idea-grid p { font-size: 15.5px; line-height: 1.55; margin: 0; }

/* demo clips: one paragraph per clip, video then a one-line caption */
.demo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem 2rem; margin: 1.6rem 0 0; }
/* odd clip out: same size as the others, centred on its own row */
.reading-page .demo-grid:not(.lead-first) > p:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - 2rem) / 2); }
/* or: the first clip spans the row, the rest pair up below */
.demo-grid.lead-first > p:first-child { grid-column: 1 / -1; }

/* method overview: goal conditions → policy → simulated output */
.goal-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1.6rem; margin: 1.6rem 0 0; }
.goal-flow figure { margin: 0; }
/* the output is a 720x720 clip beside a 720x720 still */
.goal-flow img,
.goal-flow video { display: block; width: 100%; height: auto; aspect-ratio: 1; border: 1px solid var(--color-ui-normal); border-radius: var(--image-radius); }
.goal-flow figcaption { margin-top: 0.9rem; font-size: 16px; font-weight: 600; text-align: center; }
.goal-flow-policy { display: flex; align-items: center; gap: 1rem; margin-bottom: 3.4rem; color: var(--color-tx-muted); }
.goal-flow-arrow { font-size: 24px; line-height: 1; }
.goal-flow-box { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.6rem 2rem; text-align: center; background: var(--color-bg-secondary); border: 1px solid var(--color-ui-normal); border-radius: 12px; }
.goal-flow-box strong { font-size: 17px; color: var(--color-tx-normal); }
.goal-flow-box em { font-family: Georgia, "Times New Roman", serif; font-size: 18px; }
.reading-page .demo-grid > p { min-width: 0; max-width: none; margin: 0; font-size: 16px; line-height: 1.55; color: var(--color-tx-muted); }
.reading-page .demo-grid > p strong { color: var(--color-tx-normal); }
.reading-page .demo-grid video { margin-bottom: 0.9rem; }

.reading-page pre { margin-top: 2rem; font-size: 13px; }
.reading-page pre,
.reading-page code { font-family: var(--font-content); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-action); outline-offset: 4px; }
@media (max-width: 600px) {
  body { font-size: 17px; }
  nav, main.reading-page { width: calc(100% - 36px); }
  nav { font-size: 13px; }
  .reading-page h2 { margin-top: 4.8rem; }
  .reading-page p.project-links { font-size: 13px; }
  .reading-page p.lead, .idea-grid > div { padding: 1.6rem 1.8rem; }
  .demo-grid, .idea-grid, .goal-flow { grid-template-columns: 1fr; }
  .reading-page .demo-grid:not(.lead-first) > p:last-child:nth-child(odd) { justify-self: stretch; width: auto; }
  .goal-flow-policy { flex-direction: column; margin: 0; }
  .goal-flow-arrow { transform: rotate(90deg); }
  .reading-page img.figure-light { padding: 0.8rem; }
}