/* Learn Art — the one stylesheet every chapter uses.
   Generated pages link to this; it is never inlined per chapter.
   See ADDING-CHAPTERS.md before renaming anything in here. */

:root{--ink:#34313f;--ink-soft:#6b6577;--cream:#fffaf2;--paper:#fff;--pink:#ef6f83;
  --pink-dark:#c84f64;--pink-ink:#a73e53;--yellow:#f7c95d;--mint:#83c8b5;--mint-ink:#2f6b5b;
  --blue:#718dcf;--blue-ink:#3f5695;--line:#eadfd4;--soft:#f5eee7;
  --shadow:0 18px 45px rgba(67,52,49,.12)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font:17px/1.65 system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:inherit}
.wrap{width:min(100% - 26px,1120px);margin:auto}
.col{max-width:66ch}
.skip{position:absolute;left:-999px}
.skip:focus{left:12px;top:12px;z-index:99;background:#fff;padding:10px 16px;border-radius:12px}

/* ------------------------------------------------ one sticky bar, not two */
/* This was two stacked sticky bars: navigation at top:0 and progress at
   top:57px. The navigation lived inside its own 57px-tall .wrap, so it
   scrolled away for good after the first screen — and the progress bar went
   on reserving the 57px above itself, through which the page content showed.
   One bar cannot develop that gap. */
.chapterbar{position:sticky;top:0;z-index:60;background:var(--cream);
  border-bottom:1px solid var(--line)}
.chapterbar .row{display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:54px}
.chapterbar .home{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-weight:850;font-size:.88rem;color:var(--ink);min-height:44px;padding:0 6px;border-radius:999px}
.chapterbar .home:hover{background:var(--soft)}
.chapterbar svg{width:26px;height:26px;flex:0 0 auto}
.chapterbar .state{display:flex;align-items:center;gap:14px;font-size:.83rem;
  font-weight:850;color:var(--ink-soft);text-align:right}
.chapterbar .state b{color:var(--pink-ink);white-space:nowrap}
.chapterbar .more{color:var(--pink-ink);text-decoration:none;font-weight:850;font-size:.88rem;
  min-height:44px;display:inline-flex;align-items:center;padding:0 6px;border-radius:999px}
.chapterbar .more:hover{background:var(--soft)}
.chapterbar .bar{height:4px;background:var(--line)}
.chapterbar .bar i{display:block;height:100%;width:0;background:var(--pink);transition:width .25s}

/* ---------------------------------------------- the clickable step scale */
.stepscale{display:flex;align-items:center;gap:5px;padding:0 0 7px;flex-wrap:nowrap}
.stepscale a{position:relative;flex:1 1 0;min-width:0;height:26px;display:grid;place-items:center;
  border:2px solid var(--line);border-radius:8px;background:var(--paper);
  text-decoration:none;font-weight:850;font-size:.76rem;color:var(--ink-soft)}
/* The dot is small so ten fit across a phone; the area a finger has to hit
   is stretched to the full height of the bar. */
.stepscale a::after{content:'';position:absolute;left:0;right:0;top:-11px;bottom:-11px}
.stepscale a:hover{border-color:var(--ink);color:var(--ink)}
.stepscale a.done{background:#fbe3e7;border-color:#f0b9c2;color:var(--pink-ink)}
.stepscale a[aria-current]{background:var(--pink);border-color:var(--pink-dark);color:#fff;
  box-shadow:0 3px 0 var(--pink-dark)}
.stepscale a:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

/* ------------------------------------------- one screen at a time, with JS */
/* Without JavaScript every screen stays on the page and the scale is a set of
   ordinary anchors — the chapter still reads from top to bottom. With it,
   each screen becomes its own view at its own address (…#s4), so the
   browser's back button walks back through them. */
.js-steps #cover,.js-steps section.screen{display:none}
.js-steps #cover.current,.js-steps section.screen.current{display:block}
/* The card is pinned directly under the sticky bar in this mode, and its
   number badge hangs 15px above its own top edge — with no gap the badge
   sat behind the bar. The margin is the badge's overhang plus room to
   breathe. */
.js-steps section.screen{margin:32px 0 20px}
/* On a phone the section title is the first thing to go — the step count
   carries the same information in a quarter of the space. */
@media(max-width:700px){.chapterbar #where{display:none}}
@media(max-width:420px){
  .chapterbar .home span{display:none}
  .chapterbar .home,.chapterbar .more{font-size:.8rem}
  .chapterbar svg{width:24px;height:24px}
}

/* ---------------------------------------------------------------- cover */
.cover{padding:26px 0 10px}
.kicker{display:inline-block;font-weight:850;letter-spacing:.09em;text-transform:uppercase;
  font-size:.74rem;color:var(--pink-ink);background:#fff;border:2px solid var(--ink);
  border-radius:999px;padding:6px 14px}
.cover h1{font-size:clamp(2.1rem,6.2vw,3.6rem);line-height:1.06;margin:.3em 0 .15em}
.cover h2{font-size:clamp(1.05rem,2.6vw,1.5rem);font-weight:850;color:var(--pink-ink);margin:0 0 .6em}
.cover .lede{font-size:1.06rem;color:var(--ink-soft);max-width:60ch}
figure{margin:22px 0 0}
.hero{display:block;width:100%;height:auto;box-shadow:var(--shadow)}
figcaption{font-size:.86rem;color:var(--ink-soft);margin-top:9px;max-width:70ch}

/* ----------------------------------------------------- one card per screen */
/* Ten screens separated by a 1px rule read as one endless page — sixteen
   phone screens of it. Each screen is now a card standing on the cream
   background, with its number on a badge over the top edge, so finishing one
   is visible. Scrolling still works normally; the buttons at the foot of each
   card are for anyone who would rather step. */
/* The card is not flat white: it carries a seamless tile of loose paint dabs
   in the chapter's own palette, leaning one way like brushwork. It is
   deliberately almost invisible — the darkest speck is 236 of 255, so body
   text still sits at 10.6:1 against it where AA asks for 4.5:1. Each card
   starts the tile at a different offset so no two look the same. */
section.screen{position:relative;background-color:var(--paper);
  background-image:var(--chapter-texture);
  background-repeat:repeat;background-size:300px 300px;
  border:2px solid var(--ink);
  border-radius:28px;padding:40px 40px 28px;margin:0 0 44px;box-shadow:0 10px 0 var(--line);
  scroll-margin-top:76px}
#s1{background-position:0 0}          #s2{background-position:150px 80px}
#s3{background-position:60px 200px}   #s4{background-position:210px 40px}
#s5{background-position:110px 150px}  #s6{background-position:30px 110px}
#s7{background-position:180px 230px}  #s8{background-position:90px 20px}
#s9{background-position:250px 130px}  #s10{background-position:140px 260px}
.num{position:absolute;top:-15px;left:30px;display:inline-flex;align-items:center;
  background:var(--yellow);border:2px solid var(--ink);border-radius:999px;padding:4px 16px;
  font-weight:850;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink)}
section.screen h2{font-size:clamp(1.5rem,3.4vw,2.15rem);line-height:1.15;margin:.1em 0 .5em}

/* Inside a white card, the white sub-cards would disappear. They take the
   page colour instead, so the nesting stays legible. */
section.screen .card,section.screen .lab,section.screen .spotnote,
section.screen .quiz .q,section.screen .closing{background:var(--cream)}

/* The next-chapter link at the foot of the page is the fallback for a reader
   without JavaScript. With the script running, that reader gets it as the last
   screen's Next button instead, so the loose one would be a third button
   sitting outside the card. */
.js-steps .chapter-end{display:none}

/* --------------------------------------------------------------- pictures */
/* ONE frame and ONE way to enlarge, for all four kinds of picture in a
   chapter: the chapter's own painting on the cover, that painting again under
   the hotspot markers, a real work from the registry, and a drawing. They
   used to come in two styles — the two big ones in a heavy dark border with a
   26px radius, the small ones in a pale 12px one — which read as two sets of
   illustrations inside one lesson. */
.hero,.spotwrap img,.art img,.fig{
  border:2px solid var(--line);border-radius:16px;background:var(--paper)}

/* Every picture is a link to itself, with a round button in the corner. The
   button is not clickable on its own — the whole picture is the target, and
   under the hotspots the numbered markers stay clickable because they are
   the link's siblings, not its children. */
.zoom{position:relative;display:block;border-radius:16px}
.zoom-badge{position:absolute;right:9px;bottom:9px;width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:rgba(52,49,63,.66);color:#fff;pointer-events:none;
  transition:background .15s}
.zoom-badge svg{width:19px;height:19px;display:block}
.zoom:hover .zoom-badge,.zoom:focus-visible .zoom-badge{background:var(--ink)}

/* ------------------------------------------------------------ paintings */
/* A real, out-of-copyright work. The credit is part of the picture, not a
   footnote: a child should see whose it is and where the real one lives.

   Half the column, and never taller than the window. At full width a portrait
   like Man on a Balcony (840x1442) came out about 1800px tall: one painting
   took two screenfuls and the reader lost the paragraph it belonged to. The
   height cap matters more than the width one — halving the width of a tall
   picture still leaves it too tall. The whole thing is one click away.

   The cap sits on the FIGURE, where a percentage has a width to resolve
   against; on the image inside a shrink-to-fit link the percentage would have
   referred to the box it was deciding. Left-aligned, like the drawings — a
   centred painting beside full-width text reads as a different document. */
.art{margin:0 0 14px;max-width:min(52%,460px)}
.art .zoom{width:-moz-fit-content;width:fit-content;max-width:100%}
.art img{display:block;width:auto;height:auto;max-width:100%;max-height:64vh}
@media (max-width:640px){
  .art{max-width:100%}
  .art img{max-height:none}
}
.art figcaption{margin-top:7px;font-size:.82rem;line-height:1.45;color:var(--ink-soft)}
.art figcaption b{color:var(--ink)}
.art figcaption a{color:var(--blue-ink)}
.art .credit{display:block;font-size:.75rem;opacity:.75}

/* -------------------------------------------------------------- figures */
/* Small drawings that show what a card is describing. Kept modest: they sit
   between the title and the words, so an oversized one would push the text
   off a phone screen and turn a lesson into a picture book. */
.fig{margin:0 0 12px;overflow:hidden;line-height:0}
/* The drawing itself, not the magnifier inside the button — an
   unscoped `.fig svg` matched both and stretched the icon. */
.fig > .zoom > svg{display:block;width:100%;height:auto}
/* Outside a card the same drawing would stretch across the whole column. */
section.screen > .fig{max-width:min(52%,460px)}

/* ------------------------------------------------------------ narration */
/* A small round button beside the heading, not a strip across the page. Press
   to hear, press again to stop. It rides inside the h1/h2/h3 so it stays with
   the title it belongs to and never pushes the words down a line on a phone. */
.hear{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;flex:0 0 auto;margin-left:.45em;vertical-align:-.28em;
  border-radius:50%;border:2px solid var(--mint);background:#eef7f3;
  color:var(--mint-ink);text-decoration:none;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s,transform .08s}
.hear:hover{background:#dcefe8;border-color:var(--mint-ink)}
.hear:active{transform:scale(.92)}
.hear svg{width:18px;height:18px;fill:currentColor;pointer-events:none}
.hear .i-stop{display:none}
/* Playing: filled in, so which one is talking is obvious across a row of five. */
.hear.playing{background:var(--mint-ink);border-color:var(--mint-ink);color:#fff}
.hear.playing .i-play{display:none}
.hear.playing .i-stop{display:block}
.hear.loading{opacity:.55}
/* A page title holds its button, so it wraps as a row rather than a block. */
section.screen h2,.cover h1{display:flex;align-items:baseline;flex-wrap:wrap}
/* A card holds its button under the words instead. margin-top:auto pushes it
   to the foot of the card, so a row of cards lines its buttons up however
   uneven the text above them is. One rule, not three fighting. */
.card{display:flex;flex-direction:column}
.card .hear{align-self:flex-start;margin:auto 0 0;min-height:34px}
@media (prefers-reduced-motion:reduce){.hear{transition:none}}

/* ------------------------------------------------------- step buttons */
.stepnav{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  margin:34px 0 0;padding-top:20px;border-top:2px dashed var(--line)}
.stepnav a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:850;
  font-size:.94rem;min-height:46px;padding:9px 18px;border-radius:999px;
  border:2px solid var(--line);background:var(--cream);color:var(--ink)}
.stepnav a:hover{border-color:var(--ink)}
.stepnav a.next{background:var(--pink);border-color:var(--pink-dark);color:#fff;
  box-shadow:0 5px 0 var(--pink-dark)}
.stepnav a.next:hover{transform:translateY(2px);box-shadow:0 3px 0 var(--pink-dark)}
.stepnav .spacer{flex:1}
section.screen h3{font-size:1.12rem;margin:1.5em 0 .3em}
p{margin:0 0 1em}

/* Three layers, told apart by shape as well as colour: history is plain
   prose, observation sits in a mint box, the capybara speaks in pink. */
.fact{background:#eef7f3;border:2px solid var(--mint);border-left-width:9px;border-radius:16px;
  padding:16px 20px;margin:22px 0;max-width:66ch}
.fact b{color:var(--mint-ink)}
.pull{border:2px dashed var(--blue);border-radius:18px;padding:18px 22px;margin:22px 0;
  max-width:60ch;font-size:1.12rem;font-weight:850;color:var(--blue-ink);background:#f2f5fc}
.capy{display:flex;gap:12px;align-items:flex-start;background:#fff3f5;border:2px solid var(--pink);
  border-radius:18px;padding:14px 18px;margin:22px 0;max-width:60ch;color:var(--pink-ink);font-weight:700}
.capy svg{width:30px;height:30px;flex:0 0 auto;margin-top:2px}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:20px}
.card{background:var(--paper);border:2px solid var(--ink);border-radius:20px;padding:20px 22px;
  box-shadow:0 7px 0 var(--line)}
.card h3{margin:0 0 .3em;font-size:1.06rem}
.card p{margin:0;color:var(--ink-soft);font-size:.96rem}
.card .said{display:block;margin-top:.7em;color:var(--pink-ink);font-weight:800;font-size:.92rem}

/* -------------------------------------------------- hotspots on the hero */
.spotwrap{position:relative;display:block;margin-top:20px}
.spotwrap .zoom{z-index:0}
.spotwrap img{display:block;width:100%;height:auto}
.spot{position:absolute;z-index:2;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;
  border:3px solid #fff;background:var(--pink);color:#fff;font-weight:850;font-size:1rem;
  cursor:pointer;box-shadow:0 3px 12px rgba(0,0,0,.35);display:grid;place-items:center;padding:0}
.spot:hover,.spot[aria-expanded=true]{background:var(--ink);transform:translate(-50%,-50%) scale(1.12)}
.spot:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
/* The dot stays small so it does not cover the painting, but the area a
   finger has to hit is widened invisibly to about 54px. */
.spot::after{content:'';position:absolute;inset:-8px;border-radius:50%}
.spotnote{background:var(--paper);border:2px solid var(--ink);border-radius:18px;padding:16px 20px;
  margin-top:14px;max-width:66ch;box-shadow:0 7px 0 var(--line)}
.spotnote h3{margin:0 0 .3em;font-size:1.05rem}
.spotnote p{margin:0;color:var(--ink-soft)}

/* ------------------------------------------------------- the two labs */
.lab{background:var(--paper);border:2px solid var(--ink);border-radius:26px;padding:26px 28px;
  margin:26px 0;box-shadow:var(--shadow)}
.lab h3{margin:0 0 .2em;font-size:1.25rem}
.lab .aim{color:var(--ink-soft);margin:0 0 1.1em}
.labrow{display:flex;gap:26px;flex-wrap:wrap;align-items:flex-start}
.mixstage{flex:1 1 300px;min-width:0;display:grid;place-items:center;gap:10px;
  background:var(--soft);border-radius:18px;padding:22px;min-height:300px;overflow:hidden}
#mix{image-rendering:auto;border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,.18);transition:width .12s,height .12s}
.mixside{flex:1 1 240px;min-width:220px}
.swatch{display:flex;align-items:center;gap:12px;margin:12px 0}
.swatch i{width:56px;height:56px;border-radius:12px;border:2px solid var(--ink);display:block;flex:0 0 auto}
.swatch span{font-size:.92rem;color:var(--ink-soft)}
label.slide{display:block;font-weight:850;margin:16px 0 4px}
input[type=range]{width:100%;accent-color:var(--pink);height:44px}
.verdict{font-weight:850;color:var(--pink-ink);min-height:1.6em;margin:.4em 0 0}

.catchstage{position:relative;border-radius:18px;overflow:hidden;background:var(--soft);min-height:200px}
.catchstage img{display:block;width:100%;height:auto}
.curtain{position:absolute;inset:0;display:grid;place-items:center;background:var(--soft);
  color:var(--ink-soft);font-weight:850;text-align:center;padding:20px}
.count{font-size:2.6rem;color:var(--pink-ink);display:block}
.qs{margin-top:18px}
.q{margin:0 0 18px}
.q p{font-weight:850;margin:0 0 8px}
.opts{display:flex;flex-wrap:wrap;gap:9px}
.opts button{font:inherit;font-weight:700;background:var(--cream);border:2px solid var(--line);
  border-radius:999px;padding:10px 16px;min-height:46px;cursor:pointer}
.opts button:hover{border-color:var(--ink)}
.opts button[data-state=right]{background:#eef7f3;border-color:var(--mint);color:var(--mint-ink)}
.opts button[data-state=wrong]{background:#fff5f6;border-color:var(--pink-dark);color:var(--pink-ink)}
.opts button[disabled]{cursor:default}

.btn{display:inline-block;border:0;border-radius:999px;padding:14px 26px;background:var(--pink);
  color:#fff;text-decoration:none;font:inherit;font-weight:850;box-shadow:0 7px 0 var(--pink-dark);
  cursor:pointer;min-height:50px}
.btn:hover{transform:translateY(2px);box-shadow:0 5px 0 var(--pink-dark)}
.btn.ghost{background:#fff;color:var(--ink);border:2px solid var(--ink);box-shadow:0 7px 0 var(--line)}

/* --------------------------------------------------- glossary & workshop */
dl.gloss{margin:20px 0 0;max-width:70ch}
dl.gloss div{border-bottom:1px solid var(--line);padding:14px 0}
dl.gloss dt{font-weight:850}
dl.gloss dd{margin:.2em 0 0;color:var(--ink-soft)}
ol.steps{max-width:66ch;padding-left:1.25em}
ol.steps li{margin:0 0 .6em}
.kit{background:var(--soft);border-radius:18px;padding:16px 20px;margin:18px 0;max-width:66ch}
.kit b{display:block;margin-bottom:.2em}

/* ------------------------------------------------------------ the quiz */
.quiz{max-width:70ch}
.quiz .q{background:var(--paper);border:2px solid var(--ink);border-radius:20px;padding:18px 22px;
  margin:0 0 16px;box-shadow:0 6px 0 var(--line)}
.score{font-weight:850;font-size:1.1rem;margin-top:8px}

.closing{border:2px solid var(--ink);border-radius:26px;background:var(--paper);padding:30px 32px;
  margin:30px 0 0;max-width:70ch;box-shadow:var(--shadow)}
.closing p:last-child{margin:0}
.sources{font-size:.9rem;color:var(--ink-soft);max-width:70ch}
.sources li{margin:.3em 0}

footer{background:var(--ink);color:#fff;padding:30px 0;margin-top:50px}
.footer-row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
footer a{color:#fff;display:inline-block;padding:9px 2px}

@media(max-width:620px){
  body{font-size:16px}
  section.screen{padding:30px 20px 22px;border-radius:22px;margin-bottom:30px}
  .num{left:18px;font-size:.72rem;padding:4px 13px}
  .lab{padding:20px 18px;border-radius:20px}
  .spot{width:32px;height:32px;font-size:.9rem}
  .stepnav a{font-size:.88rem;padding:9px 14px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}