/* ---- H5 · the levels: pinned, the drawing changes from 1 to 5 ------------ */
/* E8: two lines, the second smaller and in the dim ink */
.levels .head .h2{max-width:none;text-wrap:balance}
.levels .h2 .sub{display:block;margin-top:.34em;font-size:.5em;line-height:1.12;font-weight:650;letter-spacing:-.018em;text-indent:0;color:var(--dim)}
.lvpin{margin-top:clamp(40px,4.4vw,64px)}
.lvs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
/* Each level's name is above its picture, in every layout (AA2: "the name
   of the level cannot be seen because it is below the picture"); pinned, the
   picture takes what the screen has left under it. */
.lv{display:grid;gap:14px;justify-items:center;text-align:center;align-content:start}
.lv img{width:100%;height:auto;border-radius:20px;box-shadow:0 0 0 5px #fff,var(--shadow-raised);background:#F7F5EE}
.lv .name{display:flex;align-items:center;gap:9px;min-height:2.5em;text-wrap:balance;font:700 16px/1.25 var(--display);font-stretch:106%;color:var(--ink);text-align:left;max-width:240px}
.lv .name .kc{flex:none;font-size:14px}
/* the meter fills as the reader climbs, so it is drawn only where the levels
   pin: still (Reduce Motion, ?still, a phone on its side) a meter that never
   fills means nothing (E17, the user: "the bars which look a bit weird") */
.lvmeter{display:none;gap:18px;margin:clamp(36px,4vw,56px) auto 0;max-width:760px}
.lvkeys{display:none}
.lvbar{display:none}
/* the milestones: five segments each, one a level, lit as the reader climbs;
   a meter, not a comparison bar */
.miles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.miles li{display:grid;gap:9px;font:600 13.5px/1.3 var(--ui);color:var(--body)}
.miles b{display:block}
.miles b,.lvbar{height:9px;position:relative;overflow:hidden;-webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(20% - 4px),transparent calc(20% - 4px) 20%);mask:repeating-linear-gradient(90deg,#000 0 calc(20% - 4px),transparent calc(20% - 4px) 20%);background:rgba(16,21,29,.1)}
/* drawn by scale, not width: the meter fills without a layout (plan 002) */
.miles b::after{content:"";position:absolute;inset:0;background:var(--key);transform:scaleX(var(--m,1));transform-origin:left}
/* A tablet and a phone see all five, none off screen: the swipe row they
   had left four names cut off at its edge (the review harness, at 834 and
   390). Three and two on a tablet, one under another on a phone, each name
   above its picture. */
@media (max-width:900px){
  .lvs{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(28px,4vw,40px) clamp(16px,2.6vw,24px)}
  .lv{flex:0 1 calc((100% - 2 * clamp(16px,2.6vw,24px)) / 3)}
  .miles{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .lvs{flex-direction:column;align-items:center;gap:30px}
  .lv{flex:none;width:min(100%,272px)}
  .lv .name{min-height:0}
}
/* Pinned (E8, and E17 on a phone and a tablet): one level at a time, held
   under the nav while the reader scrolls, wherever the screen is at least
   590 px tall or the computer's width. Below that height (a phone on its
   side) the five stay still, as above. */
/* (a phone on its side wider than 900 px, under 500 px tall, stays still) */
@media (min-width:901px) and (min-height:500px),(min-height:590px){
  html.motion .lvpin[data-level] .lvstage{position:sticky}
  html.motion .lvpin[data-level] .lvs{display:block;position:relative}
  /* as the chapters' frames (plan 004): the level that leaves goes in
     120 ms where it stands; the next waits 50 ms, then rises in 300 ms */
  /* a column, the name at its own height and the picture in what is left:
     as a grid, WebKit sized the name's row to 0 and its words ran over the
     picture, or sized the picture by the whole card (round 1's B1) */
  html.motion .lvpin[data-level] .lv{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;opacity:0;transform:translateY(8px);transition:opacity 120ms ease-out,transform 0s 120ms}
  html.motion .lvpin[data-level] .lv.on{opacity:1;transform:none;transition:opacity 300ms var(--ease-out) 50ms,transform 300ms var(--ease-out) 50ms}
  html.motion .lvpin[data-level] .lv img{flex:1 1 0;min-height:0;height:auto;width:auto;max-width:100%;aspect-ratio:1/1;object-fit:contain}
  html.motion .lvpin[data-level] .lv .name{flex:none;min-height:0;max-width:none;letter-spacing:-.015em}
  html.motion .lvpin[data-level] .lv .name .kc{display:none}
  html.motion .lvpin[data-level] .lvmeter{display:grid;margin:0;max-width:none}
  html.motion .lvpin[data-level] .lvkeys{display:flex}
  html.motion .lvpin[data-level] .lvkeys .kc.lit{--kb:var(--key-deep);background:var(--key);color:#fff}
  html.motion .lvpin[data-level] .lvbar{display:block}
  html.motion .lvpin[data-level] .lvbar i{position:absolute;inset:0;background:var(--key);transform:scaleX(0);transform-origin:left}
  html.motion .lvpin[data-level] .miles{grid-template-columns:minmax(0,1fr)}
}
@media (min-width:901px) and (min-height:500px){
  html.motion .lvpin[data-level]{height:230vh}
  html.motion .lvpin[data-level] .lvstage{top:calc(var(--navh) + 4vh);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(40px,5vw,96px);align-items:center;height:calc(100vh - var(--navh) - 8vh);height:calc(100svh - var(--navh) - 8svh)}
  html.motion .lvpin[data-level] .lvs{height:100%;max-height:600px}
  /* G19 (S7): the picture a square, from the level's own box less the name's
     one line and the gap: sized by flex and aspect-ratio, WebKit drew its
     frame 582 × 551 at 1440, and Chrome 451 × 551 at 1024 × 768. The name
     stays one line, 28 px down to 22 on a small screen. */
  html.motion .lvpin[data-level] .lv{container-type:size;--nf:clamp(22px,2.4vw,28px)}
  html.motion .lvpin[data-level] .lv .name{font-size:var(--nf);white-space:nowrap}
  html.motion .lvpin[data-level] .lv img{flex:none;width:min(100cqw,100cqh - 1.25 * var(--nf) - 14px);height:min(100cqw,100cqh - 1.25 * var(--nf) - 14px)}
  html.motion .lvpin[data-level] .lvmeter{gap:26px}
  html.motion .lvpin[data-level] .lvkeys{gap:12px;font-size:34px}
  html.motion .lvpin[data-level] .lvbar{height:14px}
  html.motion .lvpin[data-level] .miles{gap:18px}
}
/* E17, a phone and a tablet: one column under the nav, the level's name,
   its drawing in what the screen has left, then the keys, the bar and the
   meters, all on one screen. svh, so Safari's toolbar coming and going
   never moves the stage. */
/* from 590 px, the drawing (what the screen has left after 410 px of nav,
   name and meter) is never under 180 px; an iPhone SE's Safari, 553 px,
   gets the still layout instead */
@media (max-width:900px) and (min-height:590px){
  html.motion .lvpin[data-level]{height:255vh;height:255svh}
  html.motion .lvpin[data-level] .lvstage{top:var(--navh);display:flex;flex-direction:column;justify-content:center;gap:clamp(16px,2.6svh,32px);height:calc(100vh - var(--navh));height:calc(100svh - var(--navh));padding-block:clamp(10px,2svh,28px);box-sizing:border-box}
  /* the drawing is a square sized from what the screen has left once the
     nav, the name and the meter have theirs: let to flex, it filled the
     column's height and WebKit drew its frame as a tall box round it */
  html.motion .lvpin[data-level] .lvstage{--pic:min(100vw - 48px,100vh - 410px,560px);--pic:min(100vw - 48px,100svh - 410px,560px)}
  html.motion .lvpin[data-level] .lvs{flex:none;height:calc(var(--pic) + 70px)}
  html.motion .lvpin[data-level] .lv{width:auto;gap:clamp(8px,1.4svh,14px);justify-content:flex-end}
  html.motion .lvpin[data-level] .lv img{flex:none;width:var(--pic);height:var(--pic)}
  html.motion .lvpin[data-level] .lv .name{font-size:clamp(19px,2.8vw,26px);text-align:center;justify-content:center}
  html.motion .lvpin[data-level] .lvmeter{gap:clamp(10px,1.6svh,18px);width:100%;max-width:560px;margin:0 auto}
  html.motion .lvpin[data-level] .lvkeys{justify-content:center;gap:10px;font-size:clamp(22px,3.4vw,30px)}
  html.motion .lvpin[data-level] .lvbar{height:10px}
  html.motion .lvpin[data-level] .miles{gap:clamp(8px,1.2svh,14px)}
  html.motion .lvpin[data-level] .miles li{gap:5px;font-size:12.5px}
}