/* App prototype: quiet, neutral interface; the art brings the colour. Mobile first; one screen fills the screen. */
:root{
  --bg:#F7F5F0; --ink:#242424; --ink-2:#4a4844; --muted:#7a766f; --rule:#e4dfd5;
  --terracotta:#C96B4B; --sage:#8FA58F; --ochre:#D6A84F; --card:#fffdf9;
  --credit:#6b675f;   /* small credits: quieter than the text, still 5:1 on the page */
  --tap:48px; --pad:clamp(16px,4.5vw,32px); --col:640px;
  --f:"Assistant",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Hebrew","Arial Hebrew",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--f);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{overflow:hidden}
button,a{font:inherit;color:inherit}
svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
[dir=ltr] .pl-back svg{transform:scaleX(-1)}

/* one screen: top, content (scrolls inside only if it must), one action at the bottom */
.app{height:100vh;height:100dvh;max-width:860px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;overflow:hidden}   /* the column never wider than the screen (a long lesson title in the header is cut with …, not the page) */
.app.shell{grid-template-rows:auto 1fr}

/* ── top ── */
.pl-top,.sh-top{position:relative;display:flex;align-items:center;gap:8px;min-height:60px;padding:6px calc(var(--pad) - 8px) 8px}
.pl-back{flex:none;display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);border:0;background:none;border-radius:50%;cursor:pointer;text-decoration:none}
.pl-back:hover{background:rgba(36,36,36,.06)}
.pl-back svg{width:24px;height:24px}
.pl-works{flex:none;display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);border-radius:50%;color:var(--ink-2);text-decoration:none}
.pl-works:hover{background:rgba(36,36,36,.06)}
.pl-works svg{width:24px;height:24px}
.pl-works:focus-visible{outline:3px solid var(--terracotta);outline-offset:2px}
.pl-id{flex:1;min-width:0;font-size:.92rem;line-height:1.3;color:var(--muted)}   /* a long lesson title takes a second line, never cut */
.pl-id span{color:var(--ink);font-weight:600}
.pl-count{flex:none;font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums;padding-inline:8px}
.pl-progress{position:absolute;inset-inline:var(--pad);bottom:0;height:3px;background:var(--rule);border-radius:3px;overflow:hidden}
.pl-progress i{display:block;height:100%;background:var(--terracotta);border-radius:3px;transition:width .35s ease}

/* ── content ── */
.pl-main,.sh-main{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;outline:none}
.pl-inner{max-width:var(--col);margin:0 auto;padding:clamp(18px,4vw,36px) var(--pad) 24px;animation:pl-in .3s ease both}
@keyframes pl-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pl-title{margin:0 0 18px;font-size:clamp(1.5rem,5.5vw,2rem);line-height:1.2;font-weight:700;letter-spacing:-.01em}
.pl-main p{margin:0 0 12px;font-size:1.06rem;line-height:1.65;color:var(--ink-2)}
.pl-do{margin:0 0 20px}
.pl-do > p{font-size:clamp(1.2rem,4.4vw,1.4rem);line-height:1.5;color:var(--ink);font-weight:600}
.pl-big{margin:4px 0 12px;font-size:clamp(1.12rem,4vw,1.3rem);line-height:1.5;font-weight:700;color:var(--ink)}
.pl-sub{color:var(--ink)}
.pl-lines,.pl-steps{margin:0 0 14px;padding-inline-start:1.2em;color:var(--ink-2);font-size:1.04rem;line-height:1.6}
.pl-lines li,.pl-steps li{margin:0 0 8px}
.pl-steps li::marker{color:var(--terracotta);font-weight:700}
.pl-ask{font-style:italic}
.pl-row{margin:18px 0 0;padding:14px 0 0;border-top:1px solid var(--rule)}
.pl-row h4{margin:0 0 8px;font-size:.8rem;font-weight:600;letter-spacing:.06em;color:var(--muted)}
.pl-row p,.pl-row li{font-size:1rem}
.pl-row-check h4{color:#5f7a5f}
.pl-row.pl-row-check{background:rgba(143,165,143,.12);border:0;border-radius:14px;padding:14px 16px}

/* images, artworks, placeholders */
.pl-media{margin:0 0 20px;border-radius:16px;overflow:hidden;aspect-ratio:4/3;background:var(--card)}
.pl-media img{width:100%;height:100%;object-fit:cover;display:block}
.pl-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border:1.5px dashed rgba(214,168,79,.8);background:repeating-linear-gradient(135deg,rgba(214,168,79,.07) 0 12px,rgba(214,168,79,.13) 12px 24px);color:#8d6f2f}
.pl-placeholder svg{width:40px;height:40px;opacity:.8}
.pl-placeholder figcaption{font-size:.86rem;padding:0 16px;text-align:center}
.pl-placeholder.small{aspect-ratio:4/3;margin:0}
.pl-audio{margin:0 0 20px;border-radius:16px}
.pl-audio.pl-placeholder{min-height:120px;padding:20px 0}
.pl-audio audio{display:block;width:100%}
.pl-linkcard-box.pl-placeholder{flex-direction:column;gap:8px;font-size:.86rem;color:var(--ink-2)}
.pl-quiet{color:var(--muted);letter-spacing:.01em}
/* a guidance for the looking (2.1, screens 1–5): under the question, smaller and quieter, so the question leads and the
   images stay near */
.pl-text.pl-hint{margin-top:-4px;font-size:1rem !important;line-height:1.45 !important;font-weight:400;color:var(--ink-2) !important}
@media (max-width:599px){.pl-text.pl-hint{font-size:.94rem !important;line-height:1.4 !important;margin-bottom:8px}}
@media (max-height:500px) and (orientation:landscape){.pl-text.pl-hint{font-size:.92rem !important;margin-bottom:6px}}
.pl-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* a gallery (2.1): one large image at a time, whole (never cropped); previous / next and a small counter */
.pl-gallery{margin:0 0 14px;--gal-h:clamp(200px,50vh,560px)}
.pl-gal-fig{margin:0;touch-action:pan-y;user-select:none;-webkit-user-select:none}
/* the image whole, at its own proportions (--r): as wide as the column, never taller than --gal-h; no frame around it */
.pl-gal-frame{display:flex;justify-content:center}
.pl-gal-frame img{display:block;width:min(100%,calc(var(--gal-h) * var(--r)));height:auto;aspect-ratio:var(--r);border-radius:10px;box-shadow:0 0 0 1px rgba(36,36,36,.06),0 4px 14px rgba(36,36,36,.07);-webkit-user-drag:none}
.pl-gal-frame.pl-placeholder,.pl-duo-img.pl-placeholder{flex-direction:column;align-items:center;justify-content:center;gap:8px;aspect-ratio:4/3;border-radius:14px;background:var(--card);font-size:.86rem;padding:12px;text-align:center}
/* the caption: the artist, then the title and year smaller, then the credit */
.pl-gal-fig figcaption,.pl-duo figcaption{margin:8px 0 0;line-height:1.35;color:var(--muted)}
.pl-gal-fig figcaption{text-align:center;max-width:36em;margin-inline:auto}
.pl-cap-artist{display:block;color:var(--ink);font-weight:600;font-size:.98rem}
.pl-cap-work{display:block;font-size:.9rem;color:var(--ink-2);overflow-wrap:break-word}
/* the photographer and licence a photograph asks to be named with: small, under the caption */
.pl-credit{display:block;margin-top:3px;font-size:.78rem;line-height:1.3}
.pl-credit a{color:var(--credit);text-decoration:none;border-bottom:1px solid var(--rule)}
.pl-credit a:hover{color:var(--ink-2)}
.pl-credit a:focus-visible,.pl-more a:focus-visible{outline:3px solid var(--terracotta);outline-offset:2px;border-radius:4px}
/* "Want to discover more?": a quiet box of links that open in a new tab */
.pl-more{margin:18px 0 6px;padding:12px 14px 14px;border:1px solid var(--rule);border-radius:14px;background:var(--card)}
.pl-more h3{margin:0 0 8px;font-size:.95rem;font-weight:600;color:var(--ink-2)}
.pl-more ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pl-more a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border-radius:999px;border:1.5px solid var(--rule);background:var(--bg);text-decoration:none;font-size:.95rem;max-width:100%}
.pl-more a b{font-weight:600}
.pl-more-site{color:var(--muted);font-size:.82rem}
/* a link whose page is named at length (2.3: the work and the museum): the artist on one line, the rest under it when
   the line is too short, the "new tab" sign at its end (the short links of 2.1 stay on one line, as before) */
.pl-more a{border-radius:22px}
.pl-more-text{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;min-width:0}
.pl-more-text b{white-space:nowrap}
.pl-more svg{width:16px;height:16px;flex:none;color:var(--muted)}
.pl-gal-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin:4px 0 0}
.pl-gal-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);border-radius:50%;border:1.5px solid var(--rule);background:var(--card);color:var(--ink);cursor:pointer}
.pl-gal-btn svg{width:22px;height:22px}
.pl-gal-btn:focus-visible{outline:3px solid var(--terracotta);outline-offset:2px}
[dir=ltr] .pl-gal-btn svg{transform:scaleX(-1)}
.pl-gal-count{min-width:3.2em;text-align:center;font-size:.95rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.pl-focus{margin:0 0 14px;--gal-h:clamp(200px,50vh,560px)}
/* two images side by side (2.1 screen 6): each whole, at its own proportions, both from the top of the comparison,
   each caption right under its image */
.pl-duo{display:grid;grid-template-columns:1fr 1fr;align-items:start;column-gap:14px;margin:0 0 16px;--duo-h:clamp(140px,32vh,340px)}
.pl-duo-fig{margin:0;min-width:0}
.pl-duo-img{width:min(100%,calc(var(--duo-h) * var(--r)))}
.pl-duo-img img{display:block;width:100%;height:auto;aspect-ratio:var(--r);border-radius:8px;box-shadow:0 0 0 1px rgba(36,36,36,.06),0 3px 10px rgba(36,36,36,.07)}
.pl-duo figcaption{margin-top:6px}
.pl-duo .pl-cap-artist{font-size:.88rem}
.pl-duo .pl-cap-work{font-size:.8rem}
.pl-duo .pl-credit{font-size:.72rem}
.pl-duo .pl-licence{white-space:nowrap}   /* "CC BY-SA 4.0" on one line: the whole of it moves down if it must */
/* an image to look at large: a plain button around it; on the comparison a small sign in its corner */
.pl-zoom{display:block;position:relative;padding:0;margin:0;border:0;background:none;color:inherit;font:inherit;cursor:zoom-in;border-radius:10px;-webkit-tap-highlight-color:transparent}
.pl-zoom:focus-visible{outline:3px solid var(--terracotta);outline-offset:3px}
.pl-zoom-badge{position:absolute;inset-block-end:6px;inset-inline-end:6px;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:rgba(255,253,249,.92);color:var(--ink);box-shadow:0 1px 4px rgba(36,36,36,.2);pointer-events:none}
.pl-zoom-badge svg{width:16px;height:16px}
/* small images to look at again */
.pl-thumbs{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px;--th:76px}
.pl-thumbs li{display:block;flex:none}
.pl-thumb{display:block;height:var(--th);width:calc(var(--th) * var(--r));border-radius:10px;overflow:hidden;background:var(--card);box-shadow:0 0 0 1px rgba(36,36,36,.06),0 2px 8px rgba(36,36,36,.07)}
.pl-thumb img{display:block;width:100%;height:100%;object-fit:contain}
.pl-thumb.pl-placeholder{width:var(--th);display:flex;align-items:center;justify-content:center}
@media (min-width:600px){.pl-thumbs{--th:96px;gap:12px}}
.pl-thumb.pl-placeholder{border-width:1px}
.pl-thumb.pl-placeholder svg{width:24px;height:24px}
.pl-work{margin:0 0 12px}
.pl-work img{display:block;width:100%;max-height:52vh;object-fit:contain;background:var(--card);border-radius:14px}
.pl-work figcaption{margin:8px 0 0;font-size:.9rem;color:var(--muted)}
.pl-work figcaption b{color:var(--ink);font-weight:600}
.pl-linkcard-box{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;max-height:40vh;width:100%;border-radius:14px;background:var(--card);border:1px solid var(--rule);padding:16px;text-align:center}
.pl-linkcard-box a{color:var(--ink);font-weight:600;text-decoration-color:var(--terracotta);text-underline-offset:4px}
.pl-note{font-size:.98rem !important}
.pl-ext a{font-size:.92rem;color:var(--ink-2);text-decoration-color:var(--terracotta);text-underline-offset:3px}
.pl-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 16px}
.pl-pair .pl-work,.pl-pair .pl-studio-work{margin:0}
.pl-pair .pl-work img,.pl-pair .pl-linkcard-box{aspect-ratio:4/3;max-height:none;height:auto;object-fit:cover}
.pl-pair .pl-linkcard-box{font-size:.8rem;padding:8px}
.pl-studio-work{margin:0 0 14px}
/* screen 11: the one thing to change */
.pl-changes{margin:0 0 18px}
.pl-changes h3{margin:0 0 10px;font-size:1.06rem;font-weight:700}
.pl-changes > div{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pl-change{min-height:54px;border:1.5px solid var(--rule);border-radius:14px;background:var(--card);font-size:1.02rem;font-weight:600;cursor:pointer;color:var(--ink)}
.pl-change[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.pl-change:disabled{cursor:default;opacity:.55}
.pl-change:disabled[aria-pressed=true]{opacity:1}
.pl-primary:disabled{opacity:.35;cursor:default}
/* the two versions of the Studio work, side by side */
.pl-version{margin:0}
.pl-version img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;border-radius:12px;border:1px solid var(--rule);background:var(--card)}
.pl-version figcaption{margin:6px 0 0;font-size:.88rem;font-weight:600;text-align:center;color:var(--ink)}
.pl-version-missing div{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;aspect-ratio:4/3;border-radius:12px;border:1.5px dashed var(--rule);color:var(--muted);font-size:.82rem;line-height:1.35;text-align:center;padding:8px}
.pl-version-missing svg{width:28px;height:28px}
.pl-version-missing figcaption{color:var(--muted)}
/* the saved work (every lesson's screens that show it): the frame, the same width as before, holds the whole work at its own
   proportions, inside a small margin so that the frame's rounded corners never cut a drawing that reaches an edge; the
   work itself has square corners and is never cropped or stretched (object-fit: contain, if a short screen caps its
   height) */
.pl-studio-work{padding:5px;border-radius:14px;border:1px solid var(--rule);background:var(--card)}
.pl-studio-work img{display:block;width:100%;height:auto;max-height:68dvh;object-fit:contain;border-radius:0;border:0;background:transparent}

/* lesson 2.1, the new flow: the player's own words; the word revealed after looking; the kept possibilities */
.pl-text{margin:0 0 14px;font-size:clamp(1.12rem,4vw,1.3rem) !important;line-height:1.55 !important;color:var(--ink) !important;font-weight:600}
.pl-reveal{margin:6px 0 14px;padding:14px 16px;border-radius:14px;background:var(--card);border:1px solid var(--rule);font-size:1.1rem !important;line-height:1.55 !important;color:var(--ink) !important;animation:pl-in .3s ease both}
.pl-options{display:grid;grid-template-columns:1fr;gap:14px;margin:4px 0 16px}
@media (min-width:700px){ .pl-options{grid-template-columns:1fr 1fr} }
.pl-option{display:block;padding:0;border:1.5px solid var(--rule);border-radius:14px;background:var(--card);cursor:pointer;overflow:hidden}
.pl-option img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain}
.pl-option[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.pl-changes.pl-stack > div{grid-template-columns:1fr}

/* the prototype's marks: what is missing, said plainly */
.pl-proto{display:flex;gap:10px;align-items:flex-start;margin:0 0 16px;padding:12px 14px;border-radius:12px;border:1.5px dashed var(--ochre);background:rgba(214,168,79,.08);font-size:.9rem;line-height:1.5;color:#6d5524}
.pl-proto b{flex:none;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;background:var(--ochre);color:#fff;border-radius:6px;padding:2px 7px;margin-top:2px}

/* creation: the choice of medium */
.pl-choices{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:8px 0 0}
.pl-choice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:150px;border:1.5px solid var(--rule);background:var(--card);border-radius:18px;cursor:pointer;font-size:1.12rem;font-weight:600;transition:border-color .2s,transform .2s}
.pl-choice svg{width:40px;height:40px;color:var(--terracotta)}
.pl-choice:hover{border-color:var(--ink)}
.pl-choice[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}

/* comparison: the checklist */
.pl-checks{display:grid;gap:8px}
.pl-check{display:flex;align-items:center;gap:12px;min-height:var(--tap);padding:10px 14px;border:1.5px solid var(--rule);border-radius:12px;background:var(--card);cursor:pointer;text-align:start;font-size:1rem;color:var(--ink)}
.pl-check i{flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--muted)}
.pl-check[aria-pressed=true]{border-color:var(--sage);background:rgba(143,165,143,.14)}
.pl-check[aria-pressed=true] i{border-color:var(--sage);background:var(--sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-9'/%3E%3C/svg%3E") center/14px no-repeat}

/* reflection */
.pl-reflect{display:block;width:100%;margin:4px 0 16px;padding:14px 16px;border:1.5px solid var(--rule);border-radius:14px;background:var(--card);font:inherit;font-size:1.06rem;line-height:1.6;color:var(--ink);resize:vertical}
.pl-reflect:focus{outline:none;border-color:var(--ink)}
.pl-close{margin:22px 0 0;padding:22px 20px;border-radius:18px;background:var(--ink);color:var(--bg)}
.pl-close .pl-big{color:var(--bg);font-size:clamp(1.3rem,5vw,1.6rem)}
.pl-close p{color:rgba(247,245,240,.82)}

/* ── one action at the bottom ── */
.pl-foot{display:flex;flex-direction:column;align-items:stretch;gap:6px;max-width:var(--col);width:100%;margin:0 auto;padding:10px var(--pad) max(14px,env(safe-area-inset-bottom));border-top:1px solid var(--rule);background:var(--bg)}
.pl-foot:empty{display:none}
.pl-primary,.sh-primary{display:flex;align-items:center;justify-content:center;min-height:54px;border:0;border-radius:999px;background:var(--ink);color:var(--bg);font-size:1.08rem;font-weight:700;cursor:pointer;text-decoration:none}
.pl-primary:hover,.sh-primary:hover{background:#000}
.pl-secondary{min-height:var(--tap);border:0;background:none;color:var(--ink-2);font-weight:600;text-decoration:underline;text-decoration-color:var(--terracotta);text-underline-offset:4px;cursor:pointer}

/* ── outside the player: home, units, unit, lesson ── */
.sh-gap{width:var(--tap)}
.sh-title{flex:1;min-width:0;margin:0;font-size:1.05rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-lang{flex:none;display:flex;gap:2px}
.sh-lang button{min-height:40px;padding:0 8px;border:0;background:none;color:var(--muted);font-size:.86rem;cursor:pointer;border-radius:8px}
.sh-lang button[aria-pressed=true]{color:var(--ink);font-weight:700}
.sh-main{padding:8px var(--pad) 28px}
.sh-main > *{max-width:var(--col);margin-inline:auto}
.sh-home{min-height:70%;display:flex;flex-direction:column;justify-content:center;gap:28px}
.sh-brand{margin:0;font-size:clamp(2.2rem,10vw,3.4rem);line-height:1.08;font-weight:700;letter-spacing:-.02em}
.sh-list{list-style:none;margin:8px auto 0;padding:0;display:grid;gap:10px}
.sh-item{display:flex;align-items:center;gap:16px;min-height:72px;padding:14px 16px;border-radius:16px;background:var(--card);border:1px solid var(--rule);text-decoration:none}
a.sh-item:hover{border-color:var(--ink)}
.sh-item.off{background:transparent;color:var(--muted)}
.sh-n{flex:none;min-width:2.4em;font-size:1.3rem;font-weight:700;color:var(--terracotta);font-variant-numeric:tabular-nums}
.sh-item.off .sh-n{color:var(--muted)}
.sh-t{display:flex;flex-direction:column;gap:2px;font-size:1.06rem;font-weight:600;line-height:1.35}
.sh-t small{font-size:.84rem;font-weight:400;color:var(--muted)}
.sh-cover{margin:0 0 16px;border-radius:18px;overflow:hidden}
.sh-cover img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.sh-cover figcaption{padding:8px 2px 0;font-size:.82rem;color:var(--muted)}
.sh-h{margin:0 0 8px;font-size:clamp(1.5rem,6vw,2rem);line-height:1.2}
.sh-h.big{font-size:clamp(2rem,8vw,2.8rem)}
.sh-desc{margin:0 0 16px;color:var(--ink-2);line-height:1.6}
.sh-lesson{min-height:70%;display:flex;flex-direction:column;justify-content:center}
.sh-kicker{margin:0 0 10px;color:var(--terracotta);font-weight:600}
.sh-time{margin:0 0 32px;color:var(--muted)}

/* home and lesson: a second, quieter way */
.sh-secondary{align-self:center;min-height:var(--tap);padding:0 12px;border:0;background:none;font:inherit;font-size:1.02rem;font-weight:600;color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--terracotta);text-underline-offset:4px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.sh-lesson .sh-secondary{margin-top:10px}
/* home: the site's pages for teachers, privacy and terms; small and last, a whole tap high, the credits' colour */
.sh-info{display:flex;flex-wrap:wrap;justify-content:center;gap:0 4px;margin:0;font-size:.88rem}
.sh-info a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 8px;color:var(--credit);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px}
.sh-info a:hover{color:var(--ink)}
.sh-info a:focus-visible{outline:3px solid var(--terracotta);outline-offset:2px;border-radius:6px}
/* a lesson's own opening screen (2.1): the title, a subtitle, what the lesson holds; one clear way in ("start") and,
   when there is where to come back to, a quieter one under it ("resume": an outlined button, the same width) */
.sh-open .sh-h.big{font-size:clamp(1.9rem,7.4vw,2.6rem);text-wrap:balance}
.sh-sub{margin:0 0 14px;font-size:clamp(1.12rem,4.4vw,1.3rem);line-height:1.45;color:var(--ink-2);text-wrap:balance}
.sh-open .sh-time{margin-bottom:28px;font-size:1rem}
.sh-open .sh-primary{font-size:1.15rem;min-height:56px;padding:0 20px;text-align:center}
.sh-open .sh-secondary{align-self:stretch;margin-top:12px;min-height:52px;padding:0 20px;border:2px solid #d3cbbd;border-radius:999px;background:var(--card);color:var(--ink);font-size:1.05rem;text-decoration:none;text-align:center}
.sh-open .sh-secondary:hover{border-color:var(--ink-2)}
.sh-open .sh-primary:focus-visible,.sh-open .sh-secondary:focus-visible{outline:3px solid var(--terracotta);outline-offset:3px}

/* my artworks: one card per artwork, its picture first; one visible action */
.ga-empty{margin:24px 0;display:flex;flex-direction:column;gap:20px}
.ga-empty p{margin:0;color:var(--ink-2);line-height:1.6;font-size:1.06rem}
.ga-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:14px}
.ga-card{height:100%;display:flex;flex-direction:column;gap:10px;padding:12px 12px 14px;border-radius:16px;background:var(--card);border:1px solid var(--rule)}
.ga-pic{margin:0;aspect-ratio:4/3;max-height:min(68dvh,520px);border-radius:12px;border:1px solid var(--rule);background:#fffdf9;overflow:hidden}
.ga-pic img{display:block;width:100%;height:100%;object-fit:contain}
.ga-blank{display:flex;align-items:center;justify-content:center;color:var(--muted);background:repeating-linear-gradient(135deg,#fbf8f1 0 10px,#f6f2e9 10px 20px)}   /* paper: no picture of it, on purpose */
.ga-blank svg{width:44px;height:44px;stroke-width:1.4}
.ga-text{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.ga-kind{margin:0;font-weight:700;color:var(--ink)}
.ga-h{margin:0;font-size:1rem;font-weight:600;line-height:1.35}
.ga-date{margin:2px 0 0;font-size:.86rem;color:var(--muted)}
.ga-action{display:flex;align-items:center;justify-content:center;min-height:var(--tap);padding:0 16px;border-radius:999px;border:1.5px solid var(--ink);background:none;color:var(--ink);font-size:1rem;font-weight:700;text-align:center;text-decoration:none;cursor:pointer}
.ga-action.main{background:var(--ink);color:var(--bg)}
.ga-action:hover{background:rgba(36,36,36,.06)}.ga-action.main:hover{background:#000}
.ga-action:focus-visible,.ga-close:focus-visible{outline:3px solid var(--terracotta);outline-offset:3px}
/* an earlier work, large; only to look at */
.ga-view{border:0;border-radius:18px;padding:12px;width:fit-content;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);background:var(--card);color:var(--ink);box-shadow:0 18px 50px rgba(43,42,40,.25)}
.ga-view[open]{display:flex;flex-direction:column;align-items:center;gap:12px}
.ga-view::backdrop{background:rgba(36,36,36,.55)}
.ga-view img{display:block;width:min(calc(100vw - 56px),calc((100dvh - 136px) * var(--r,1.3333)));height:auto;aspect-ratio:var(--r,auto);border-radius:12px;background:#fffdf9}
.ga-view.has-cap img{width:min(calc(100vw - 56px),calc((100dvh - 236px) * var(--r,1.3333)))}
.ga-view-cap{contain:inline-size;align-self:stretch;text-align:center;line-height:1.35;color:var(--ink-2)}
.ga-view-cap[hidden]{display:none}
.ga-close{align-self:center;min-height:var(--tap);min-width:140px;padding:0 20px;border-radius:999px;border:1.5px solid var(--ink);background:none;font-weight:700;cursor:pointer}
@media (min-width:560px){ .ga-list{grid-template-columns:1fr 1fr} }
@media (min-width:700px){ .sh-main > .ga{max-width:none} }
@media (min-width:1024px){ .ga-list{grid-template-columns:1fr 1fr 1fr} }

/* wider screens: the same app, more air */
@media (min-width:700px){
  .app{border-inline:1px solid var(--rule)}
  .pl-pair{gap:18px}
}
/* phones held sideways: less height for the frame */
@media (max-height:500px) and (orientation:landscape){
  .pl-top,.sh-top{min-height:48px;padding-top:2px;padding-bottom:6px}
  .pl-primary,.sh-primary{min-height:46px}
  .pl-foot{padding-top:6px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
  .pl-media{aspect-ratio:16/7}
  .pl-choice{min-height:96px}
  .sh-home,.sh-lesson{min-height:0}
  .sh-open .sh-h.big{font-size:1.8rem}
  .sh-open .sh-time{margin-bottom:18px}
  .sh-open .sh-primary{min-height:48px}
  .sh-open .sh-secondary{min-height:46px;margin-top:10px}
}
/* 2.1, a gallery's image to look at large: the button is the image's own size (whole, at its proportions) */
.pl-gal-frame .pl-gal-zoom{width:min(100%,calc(var(--gal-h) * var(--r)))}
.pl-gal-frame .pl-gal-zoom img{width:100%}
/* a gallery's caption: the artist, then the work (smaller, its long title in balanced lines), then the credit (smallest) */
.pl-gal-fig figcaption{margin-top:10px;max-width:30em;text-wrap:balance}
.pl-gal-fig .pl-cap-artist{font-size:.95rem}
.pl-gal-fig .pl-cap-work{margin-top:1px;font-size:.875rem;line-height:1.35;text-wrap:balance}   /* 14px: the readable minimum agreed for screen 5 */
.pl-gal-fig .pl-credit{margin-top:4px;font-size:.75rem}   /* 12px: the same for the credit */

/* the bottom of a screen: room under the last words; when more goes on below, a soft edge over "Continue" */
.pl-foot{position:relative}
.pl-foot::before{content:'';position:absolute;inset-inline:0;bottom:calc(100% + 1px);height:30px;background:linear-gradient(to bottom,rgba(247,245,240,0),var(--bg) 85%);pointer-events:none;opacity:0;transition:opacity .2s}
.pl-foot.pl-lift::before{opacity:1}
/* the device's own edges (a notch, rounded corners, the home bar): never under them */
.pl-inner,.pl-foot{padding-left:max(var(--pad),env(safe-area-inset-left));padding-right:max(var(--pad),env(safe-area-inset-right))}

/* phones: smaller headings and words, images that leave room for them */
@media (max-width:599px){
  .pl-inner{padding-top:14px;padding-bottom:32px}
  .pl-title{margin-bottom:12px;font-size:clamp(1.3rem,5.6vw,1.6rem)}
  .pl-text{margin-bottom:12px;font-size:1.06rem !important;line-height:1.5 !important}
  .pl-gallery,.pl-focus{--gal-h:clamp(170px,40vh,420px)}
}
/* phones held sideways: the words first and small, the images low enough to see with them */
@media (max-height:500px) and (orientation:landscape){
  .pl-inner{padding-top:10px;padding-bottom:28px}
  .pl-title{margin-bottom:8px;font-size:1.3rem}
  .pl-text{margin-bottom:8px;font-size:1.02rem !important;line-height:1.45 !important}
  .pl-gallery,.pl-focus{--gal-h:clamp(120px,52vh,230px)}
  .pl-duo{--duo-h:clamp(100px,46vh,220px)}
  .pl-thumbs{--th:64px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* lesson 2.3 (js/player.js board): every image of a gallery at once, each at its own proportions, never cropped; a set
   (the vase's three lights, Monet's two cathedrals) a row of its own, its images the same height. On a phone one under
   another, each as wide as the screen (a tall one no taller than about half the screen); wider, the sets across and
   the others in two columns of about the same height (2.3: the three photographs; Sorolla and Hopper's window) */
.pl-text.pl-q{color:var(--ink);font-weight:600}
.pl-board ul{list-style:none;margin:4px 0 16px;padding:0;display:flex;flex-direction:column;align-items:center;gap:14px}
.pl-tile{margin:0;min-width:0;width:100%;max-width:calc(var(--r,2) * 56vh)}
.pl-tile-set{max-width:none}
@media (min-width:600px){
  .pl-board ul{display:block;columns:2;column-gap:14px}
  .pl-tile{max-width:none;margin:0 0 14px;break-inside:avoid}
  .pl-tile-set,.pl-tile-wide{column-span:all}
}
/* a phone turned (short and wide): each image whole above the bar ("Continue"), as high as the screen allows, centred
   (2.3's Sorolla, first on screen 3 since 2 November 2026, was 441px high with 329 to show it; QA, Issue #11 6592406873) */
@media (max-height:500px) and (orientation:landscape){
  .pl-board .pl-tile{max-width:calc(var(--r,2) * (100dvh - 96px));margin-inline:auto}
  .pl-board .pl-tile-set{max-width:none}
}
/* 2.1's galleries as boards (L.boardColumns): on a phone two columns as well, the six images a group to browse; below
   340px (and at a large text size on a narrow phone) one, as 2.3's. L.boardCaptions: an artwork's short caption under it
   (artist, title, the photograph's credit; the sizes of screen 5's caption, 14px and 12px at the least) */
@media (min-width:340px) and (max-width:599px){
  .pl-board-cols ul{display:block;columns:2;column-gap:10px}
  .pl-board-cols .pl-tile{max-width:none;margin:0 0 12px;break-inside:avoid}
}
.pl-tile-fig{margin:0}
.pl-tile-fig figcaption{margin:6px 0 0;line-height:1.3;color:var(--muted)}
.pl-tile-fig .pl-cap-artist{font-size:.9rem}
.pl-tile-fig .pl-cap-work{font-size:.875rem}
.pl-tile-fig .pl-credit{font-size:.75rem}
.pl-tile-fig .pl-licence{white-space:nowrap}
/* 2.1: where a screen needs the learner's image and none was opened (s.pick): its line, the gallery's images small; a
   tap chooses one */
.pl-pick{margin:0 0 14px}
.pl-pick-who{display:block;margin:0 0 6px;font-size:.95rem;color:var(--ink)}
.pl-pick .pl-thumbs{margin-bottom:6px}
.pl-pick-btn{padding:0;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pl-pick-btn:focus-visible{outline:3px solid var(--terracotta);outline-offset:3px}
.pl-set{display:flex;gap:8px;align-items:flex-start}
.pl-set > *{flex:var(--r,1) 1 0;min-width:0}
.pl-board-img{width:100%}
.pl-board-img img{display:block;width:100%;height:auto;aspect-ratio:var(--r);border-radius:10px;box-shadow:0 0 0 1px rgba(36,36,36,.06),0 3px 10px rgba(36,36,36,.07);-webkit-user-drag:none}
.pl-board-ph{flex-direction:row;flex-wrap:wrap;gap:6px 14px;min-height:120px;padding:14px;border-radius:12px;font-size:.86rem;text-align:center}
.pl-board-ph span{flex-basis:100%}
.pl-board-ph svg{width:30px;height:30px}
.pl-set-ph .pl-board-ph{aspect-ratio:4/5;min-height:0;padding:8px;border-radius:10px}
.pl-ph-cap{margin:8px 0 0;font-size:.86rem;line-height:1.4;color:#8d6f2f;text-align:center}
/* an image of a set with its name under it (2.3, the vase: strong light, soft light, shadow), to compare them */
.pl-set-cell{display:flex;flex-direction:column;align-items:stretch;gap:6px}
.pl-set-cell > .pl-zoom,.pl-set-cell > .pl-board-ph{width:100%}
.pl-set-label{display:block;font-size:.9rem;font-weight:600;line-height:1.25;text-align:center;color:var(--ink-2)}
.pl-view-label{margin:0;font-size:1rem;font-weight:600;text-align:center}
/* an artwork that may not be shown: a window in its place (the link to the museum is in its large view) */
.pl-win{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;min-height:150px;padding:16px 12px;border:1.5px solid var(--rule);border-radius:12px;background:var(--card);color:var(--ink);font:inherit;text-align:center;cursor:pointer}
.pl-win svg{width:30px;height:30px;color:var(--muted);fill:none;stroke:currentColor;stroke-width:1.6}
.pl-win b{font-weight:600;font-size:.98rem}
.pl-win span{font-size:.9rem;color:var(--ink-2)}
.pl-win small{font-size:.8rem;color:var(--muted)}
.pl-win:focus-visible{outline:3px solid var(--terracotta);outline-offset:3px}
@media (min-width:600px){.pl-win{aspect-ratio:4/3}}
/* a board of windows only (2.4's three artists): on a phone one under another; from 760px all in one row, even */
.pl-board-wins .pl-win{min-height:132px;aspect-ratio:auto}
@media (min-width:600px){.pl-board-wins ul{display:flex;columns:auto}.pl-board-wins .pl-tile{margin:0;max-width:520px}}
@media (min-width:760px){.pl-board-wins ul{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));align-items:stretch}
  .pl-board-wins .pl-tile{max-width:none;display:flex}.pl-board-wins .pl-win{min-height:200px}}
.pl-more-intro{margin:0 0 10px !important;font-size:1rem !important;color:var(--ink-2)}
.pl-more-none{margin:0 !important;padding:10px 14px;border-radius:10px;font-size:.86rem !important;flex-direction:row}
/* the large view of a board: previous / next; a window's link; the words about a work, under it */
.ga-view img[hidden],.ga-view-win[hidden],.ga-view-nav[hidden]{display:none}
.ga-view-win{width:min(calc(100vw - 56px),420px);padding:22px 18px;border:1.5px solid var(--rule);border-radius:14px;text-align:center}
.pl-win-big{display:flex;flex-direction:column;align-items:center;gap:4px;margin:0 0 10px}
.pl-win-big svg{width:40px;height:40px;fill:none;stroke:var(--muted);stroke-width:1.6}
.pl-win-big span{color:var(--ink-2)}
.pl-win-why{margin:0 0 12px;color:var(--ink-2);font-size:.95rem}
/* a window with its words (2.4): the words first, then the link; the room between them a little smaller, most on a phone
   (the words and the link as large as before) */
.ga-view-win .pl-view-note{margin:2px auto 10px}
.ga-view-win .pl-view-note p{margin:4px 0 0;line-height:1.45}
.ga-view-win .pl-win-why{margin:0 0 6px;font-size:.9rem}
.ga-view-win .pl-win-go{margin:0}
@media (max-width:599px){
  .ga-view:has(.ga-view-win:not([hidden]) .pl-view-note){gap:8px;padding:10px}
  .ga-view-win:has(.pl-view-note){padding:14px 12px}
  .ga-view-win:has(.pl-view-note) .pl-win-big{margin:0 0 4px;gap:2px}
  .ga-view-win:has(.pl-view-note) .pl-win-big svg{width:28px;height:28px}
}
/* the grid of "Inspiration" (2.4): a window's cell, the artist's name under its sign */
.ga-cell.ga-cell-win{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font:inherit;font-size:.9rem;font-weight:600;color:var(--ink);cursor:pointer;text-align:center}
.ga-cell.ga-cell-win svg{width:30px;height:30px;fill:none;stroke:var(--muted);stroke-width:1.6}
.ga-view-win a{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);padding:8px 16px;border-radius:999px;border:1.5px solid var(--ink);color:var(--ink);font-weight:600;text-decoration:none}
.ga-view-win a svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.ga-view-nav{display:flex;align-items:center;justify-content:center;gap:12px}
.pl-view-note{max-width:34em;margin:6px auto 0;text-align:center}
.pl-view-note p{margin:6px 0 0;color:var(--ink);font-size:1rem;line-height:1.5}
.ga-view.has-note img{width:min(calc(100vw - 56px),calc((100dvh - 330px) * var(--r,1.3333)))}   /* room for the words under it */
/* 2.3 on paper: "Inspiration", the lesson's images to look at again (js/player.js refsOpen) */
.pl-refs{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;margin:6px 0 4px;padding:10px 18px;border:1.5px solid var(--ink);border-radius:14px;background:var(--card);color:var(--ink);font:inherit;font-size:1.05rem;font-weight:700;cursor:pointer}
.pl-refs svg{width:24px;height:24px;flex:none}
.pl-refs:focus-visible{outline:3px solid var(--terracotta);outline-offset:3px}
.pl-do-steps{color:var(--ink)}
.pl-do-steps li{margin-bottom:12px}
/* the task before the choice (2.3 screen 4, s.steps; 17 October): on a phone its steps a little closer and the two cards
   a little lower, so that both are on the screen at once with the text at its usual size, and in sight with it larger
   (only a medium screen with steps: 2.1's and 3.1's choices are as they were) */
@media (max-width:599px){
  .pl-step-medium .pl-do-steps{font-size:.98rem;line-height:1.45}
  .pl-step-medium .pl-do-steps li{margin-bottom:6px}
  .pl-do-steps ~ .pl-choices{gap:12px}
  .pl-do-steps ~ .pl-choices .pl-choice{min-height:112px;gap:8px}
}
/* the viewer with all the images first (js/viewer.js grid): even cells, each image whole in its cell; one large, then
   "All the images" goes back */
.ga-view.is-grid{width:min(760px,calc(100vw - 24px));align-items:stretch;overflow:auto}
.ga-view-h{margin:2px 4px 0;font-size:1.05rem;font-weight:700}
.ga-view-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:600px){.ga-view-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ga-cell{display:block;width:100%;aspect-ratio:1;padding:6px;border:0;border-radius:12px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--rule);cursor:zoom-in}
.ga-view .ga-cell img{display:block;width:100%;height:100%;object-fit:contain;background:none;border-radius:6px}
.ga-cell:focus-visible{outline:3px solid var(--terracotta);outline-offset:2px}
.ga-view-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.ga-all{min-height:var(--tap);padding:0 20px;border-radius:999px;border:1.5px solid var(--rule);background:var(--bg);color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
.ga-all:focus-visible{outline:3px solid var(--terracotta);outline-offset:3px}
.ga-view-h[hidden],.ga-view-grid[hidden],.ga-all[hidden]{display:none}

/* the completion screens (every lesson, step 'end'): the ways on a little closer and lower; every button still 44px or more */
.pl-foot-end{gap:2px;padding-top:6px}
.pl-foot-end .pl-secondary{min-height:44px;font-size:.95rem}
.pl-foot-end .pl-primary{min-height:50px;font-size:1.02rem;margin-top:2px}

/* ── Lesson 2.2 "Up Close" (js/closeup.js): the discovery window and the screens drawn by it ── */
.cu,.cu-fig{--cu-h:min(46dvh,430px)}
.cu-fig{margin:10px 0 0;text-align:center}
.cu-fig figcaption{margin-top:6px;font-size:.88rem;color:var(--ink-2)}
.cu-shrink,.cu-cmp,.cu-view{position:relative;overflow:hidden;margin-inline:auto;border-radius:10px;background:var(--card);border:1px solid var(--rule)}
.cu-shrink img{transform:scale(var(--cu-s,5));transform-origin:var(--cu-at,50% 50%);transition:transform 1.6s cubic-bezier(.3,.7,.2,1)}
.cu-shrink.cu-whole img{transform:scale(1)}
.cu-datura.cu-zoomed img{transform:scale(var(--cu-s,2.6))}
.cu-datura img{transform:scale(1)}
.cu-shrink[data-step] img{transition-duration:1s}   /* 2.2 screen 1: each step closer, the point staying in place */
@media (prefers-reduced-motion:reduce){.cu-shrink img{transition:none}}
.cu-act{margin:12px 0 0;text-align:center}
.cu-btn{min-height:44px;padding:8px 18px;border-radius:999px;border:1.5px solid var(--ink);background:var(--card);color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
.cu-btn:disabled{opacity:.45;cursor:default}
.cu-btn:focus-visible,.cu-step:focus-visible,.cu-w:focus-visible,.cu-x:focus-visible,.cu-pickbtn:focus-visible,.cu-ans:focus-visible,.cu-museum:focus-visible{outline:3px solid var(--terracotta);outline-offset:2px}
.cu-museum{display:inline-flex;align-items:center;min-height:48px;padding:10px 20px;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:700;text-decoration:none}
.cu-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;list-style:none;margin:12px 0 0;padding:0}
@media (min-width:700px){.cu-pick{grid-template-columns:repeat(4,1fr)}}
.cu-pickbtn{display:block;width:100%;aspect-ratio:1/1;padding:0;overflow:hidden;border:2px solid var(--rule);border-radius:10px;background:var(--card);cursor:pointer}
.cu-pickbtn img{display:block;width:100%;height:100%;object-fit:cover}
.cu-pickbtn[aria-pressed=true]{border-color:var(--terracotta);box-shadow:0 0 0 2px var(--terracotta)}
/* the discovery window */
.cu{margin-top:8px}
.cu-view{touch-action:none;cursor:crosshair;user-select:none}
.cu-img{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none}
.cu-frame{position:absolute;box-sizing:border-box;border:2px solid #fff;outline:1px solid rgba(0,0,0,.55);box-shadow:0 0 0 100vmax rgba(20,18,16,.4);cursor:grab;touch-action:none}
.cu-frame.cu-glide{transition:left .28s,top .28s,width .28s,height .28s}
.cu-frame:focus-visible{outline:3px solid var(--terracotta)}
@media (prefers-reduced-motion:reduce){.cu-frame.cu-glide{transition:none}}
.cu-end{font-size:.85rem;color:var(--ink-2);white-space:nowrap}
.cu-zoom{flex:1;min-width:0;height:44px;accent-color:var(--terracotta)}
.cu-step{flex:none;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--rule);background:var(--card);color:var(--ink);font:inherit;font-size:1.3rem;font-weight:700;cursor:pointer}
.cu-worlds li{position:relative}
.cu-w{position:relative;display:block;width:72px;height:72px;padding:0;overflow:hidden;border:2px solid var(--rule);border-radius:10px;background:var(--card);cursor:pointer}
.cu-w canvas{display:block;width:100%;height:100%}
.cu-w span{position:absolute;inset-block-end:2px;inset-inline-start:4px;font-size:.78rem;font-weight:700;color:#fff;text-shadow:0 0 3px #000}
.cu-w.on,.cu-w[aria-pressed=true]{border-color:var(--terracotta);box-shadow:0 0 0 2px var(--terracotta)}
.cu-x{position:absolute;inset-block-start:-8px;inset-inline-end:-8px;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--rule);background:var(--card);color:var(--ink);font-size:1rem;line-height:1;cursor:pointer}
.cu-world{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:10px}
.cu-bigdetail{display:block;max-width:100%;border-radius:12px;border:1px solid var(--rule);background:var(--card)}
.cu-big{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;background:var(--bg)}
.cu-big-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:12px;touch-action:none}
.cu-big-stage canvas{border-radius:12px;cursor:grab;touch-action:none}
.cu-big-bar{display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px))}
.cu-answers{display:grid;gap:8px;margin-top:6px}
.cu-ans{min-height:48px;padding:10px 16px;border-radius:12px;border:1.5px solid var(--rule);background:var(--card);color:var(--ink);font:inherit;font-weight:600;cursor:pointer;text-align:start}
.cu-ans[aria-pressed=true]{border-color:var(--terracotta);box-shadow:0 0 0 2px var(--terracotta)}
.cu-cmp svg{position:absolute;inset:0;width:100%;height:100%}
.cu-mark{fill:none;stroke:#fff;stroke-width:3;vector-effect:non-scaling-stroke}
.cu-mark.cu-last{stroke:var(--terracotta);stroke-width:4}
.cu-num{fill:#fff;font-weight:700;paint-order:stroke;stroke:#000;stroke-width:3px}
.cu-label{margin:10px 0 0;text-align:center;font-size:.88rem;color:var(--ink-2)}
/* the discovery window on a short screen: the picture a little smaller so its controls stay in reach; the three actions in a row */
.cu-btn{padding:6px 14px}

/* O'Keeffe (screen 4 of 2.2): the button over the picture's foot; a tap on the picture does the same; no drawing beneath it */
.cu-datura{cursor:zoom-in}
.cu-datura.cu-zoomed{cursor:zoom-out}
.cu-fig{--cu-h:min(40dvh,400px)}
@media (max-height:700px){.cu-fig{--cu-h:min(32dvh,260px)}}
.cu-museum{justify-content:center;text-align:center;font-size:.92rem;line-height:1.3;padding:10px 18px}

/* "A Closer Look" (screen 8): the photographs in a strip, the photograph with its frame, the frame's detail beside the controls,
   the saved inspiration in a compact strip; one column on a phone, the same order everywhere */
.cu{--cu-h:min(36dvh,380px);margin-top:6px}
@media (max-height:700px){.cu{--cu-h:min(30dvh,250px)}}
.cu-pics{display:flex;gap:6px;list-style:none;margin:0 0 8px;padding:2px 2px 6px;overflow-x:auto;scrollbar-width:thin}
.cu-pics li{flex:none}
.cu-pic{display:block;width:52px;height:52px;padding:0;overflow:hidden;border:2px solid var(--rule);border-radius:9px;background:var(--card);cursor:pointer}
.cu-pic img{display:block;width:100%;height:100%;object-fit:cover}
.cu-pic[aria-pressed=true]{border-color:var(--terracotta);box-shadow:0 0 0 2px var(--terracotta)}
.cu-pic:focus-visible,.cu-peek:focus-visible,.cu-bigbtn:focus-visible{outline:3px solid var(--terracotta);outline-offset:2px}
.cu-main{display:flex;flex-direction:column;align-items:center}
.cu-row{display:flex;align-items:flex-start;gap:12px;width:100%;margin-top:10px}
.cu-peek{position:relative;flex:none;width:112px;height:112px;padding:0;overflow:hidden;border:1.5px solid var(--rule);border-radius:12px;background:var(--card);cursor:zoom-in}
.cu-live{display:block;width:100%;height:100%}
.cu-tag{position:absolute;inset-inline:0;inset-block-end:0;padding:2px 4px;background:rgba(36,36,36,.72);color:#fff;font-size:.78rem;font-weight:600;line-height:1.4;text-align:center}
.cu-ctl{flex:1;min-width:0}
.cu-zoomrow{display:flex;align-items:center;gap:4px}
.cu-end{font-size:.78rem;color:var(--ink-2);white-space:nowrap}
.cu-zoom{flex:1;min-width:0;height:44px;accent-color:var(--terracotta)}
.cu-step{flex:none;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--rule);background:var(--card);color:var(--ink);font:inherit;font-size:1.3rem;font-weight:700;cursor:pointer}
.cu-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.cu-acts .cu-btn{flex:1 1 auto;padding:6px 12px;font-size:.92rem}
.cu-saved{width:100%;margin-top:12px;padding-top:8px;border-top:1px solid var(--rule)}
.cu-saved-h{display:flex;align-items:baseline;gap:8px;margin:0 0 4px;font-size:.92rem;font-weight:700;color:var(--ink-2)}
.cu-saved-h b{font-weight:600;color:var(--credit)}
.cu-status{margin-inline-start:auto;font-weight:600;color:var(--terracotta)}
.cu-empty{margin:4px 0 0;font-size:.9rem;color:var(--credit)}
.cu-worlds{display:flex;gap:10px;list-style:none;margin:0;padding:12px 8px 6px;overflow-x:auto}
.cu-worlds li{position:relative;flex:none}
.cu-pickers{flex-wrap:wrap;justify-content:center;overflow:visible}
.cu-bigbtn{display:block;max-width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.pl-q.cu-quiet{font-size:1rem;font-weight:400;color:var(--ink-2)}
@media (min-width:900px) and (min-height:640px){
  .cu{--cu-h:min(52dvh,520px)}
  .cu-peek{width:200px;height:200px}.cu-row{width:min(100%,calc(var(--cu-h) * 1.6))}
}

/* Lesson 2.2, 17 October 2026 (after the review on a phone) */
.cu-shrink img,.cu-cmp img,.cu-panel img{display:block;width:100%;height:100%;object-fit:cover}
.cu-tap{cursor:pointer}
/* screen 4: the three views of one photograph, one under another, each as wide as the screen */
.cu-stack{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cu-panel{position:relative;aspect-ratio:var(--r);overflow:hidden;border-radius:12px;border:1px solid var(--rule);background:var(--card)}
.cu-panel img{transform:scale(var(--cu-s));transform-origin:50% 52%}
.cu-lab{display:block;margin-top:4px;color:var(--ink-2);font-size:.88rem;font-weight:700;line-height:1.4;text-align:start}   /* its name under the picture, not on it */
@media (min-width:760px){.cu-stack{grid-template-columns:repeat(3,1fr)}}
/* screen 3: the artists together: a tab for each, and one to compare */
.ar-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px;align-items:start;list-style:none;margin:8px 0 0;padding:0}
@media (min-width:760px){.ar-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ar-img{position:relative;display:block;width:100%;aspect-ratio:var(--r);padding:0;overflow:hidden;border:1px solid var(--rule);border-radius:10px;background:var(--card);cursor:zoom-in}
.ar-img img{display:block;width:100%;height:100%;object-fit:contain}
.ar-cap{margin:6px 0 0;font-size:.88rem;line-height:1.35;color:var(--ink-2)}
.ar-cap b{display:block;color:var(--ink)}
/* "A Closer Look" is a tool: its buttons come at the end of it, in the flow, not fixed over it (js/player.js kd.inline); room under them for the phone's own edge */
.pl-foot.pl-foot-inline{max-width:none;margin:8px 0 0;padding:16px 0 max(32px,calc(env(safe-area-inset-bottom) + 20px));border-top:0;background:none}
.pl-foot-inline::before{display:none}
.pl-inline .pl-inner{padding-bottom:8px}
.cu-view{touch-action:none;-webkit-touch-callout:none}       /* the photograph is the learner's to explore (23 October 2026): one finger moves the frame, two pinch it; the page scrolls from around it */
.cu-frame{touch-action:none}
/* nothing chosen yet: the photograph whole and clear, no frame, nothing darkened; the zoom and the detail wait for the learner's choice */
.cu-free .cu-frame{display:none}
/* before the first choice (28 October 2026): a dashed frame in the middle and one line; nothing to press, the photograph takes the touch */
.cu-cue{display:none;position:absolute;inset:0;pointer-events:none}
.cu-cueing .cu-cue{display:block}
.cu-cue-box{position:absolute;left:50%;top:50%;width:34%;aspect-ratio:1;transform:translate(-50%,-50%);border:3px dashed #fff;border-radius:6px;box-shadow:0 0 0 2px rgba(0,0,0,.3)}
.cu-cue-tag{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:flex;align-items:center;gap:6px;max-width:calc(100% - 16px);padding:5px 12px 5px 10px;border-radius:999px;background:var(--card,#fffdf9);color:var(--ink,#242424);font-size:.9rem;font-weight:700;line-height:1.2;box-shadow:0 3px 10px rgba(0,0,0,.2);white-space:nowrap}
.cu-cue-tag svg{width:22px;height:22px;flex:none}
.cu-cueing .cu-pickhint{display:none}   /* the line over the photograph says it */
.cu-free .cu-view{cursor:zoom-in}
.cu-pickhint{margin:6px 0 0;font-size:.9rem;line-height:1.35;color:var(--ink-2);text-align:center}
.cu-free .cu-peek{opacity:.45;cursor:default}
.cu-ctl .cu-step:disabled,.cu-zoom:disabled{opacity:.4}
.cu-view:focus-visible{outline:3px solid var(--terracotta);outline-offset:2px}
.cu-pics{touch-action:pan-x pan-y}

.pl-main .ar-cap{margin:6px 0 0;font-size:.88rem;line-height:1.35;color:var(--ink-2)}
/* the viewer, big (lesson 2.2): the picture as large as the phone allows, on a dark ground filling the screen */
/* the viewer, big (lesson 2.2 only; art first, the author, 19 October 2026): on a dark ground that fills the screen, the controls in one
   slim row at the top (× at the start; previous, the count and next at the end), nothing over the picture and no large "Close" (×, a tap
   outside and the phone's Back close it); the picture as large as the phone allows, whole; under a work, its short card. With a card the
   whole viewer scrolls, so the picture is never made smaller for the words */
.ga-view.ga-view-big{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:calc(max(4px,env(safe-area-inset-top)) + 48px) 0 max(12px,env(safe-area-inset-bottom));overflow-x:hidden;overflow-y:auto;border-radius:0;background:#16140f;color:#f4efe6;box-shadow:none}
.ga-view-big[open]{justify-content:center;gap:0}
.ga-view-big.has-note[open]{justify-content:flex-start}
.ga-view-big img{flex:none;width:100%;height:auto;max-height:calc(100dvh - 64px);aspect-ratio:var(--r,auto);object-fit:contain;border-radius:0;background:none}
.ga-view-big.has-note img{max-height:calc(100dvh - 48px - 210px)}
.ga-view-big .ga-view-acts{display:none}
.ga-view-big .ga-view-nav{position:absolute;inset-block-start:max(2px,env(safe-area-inset-top));inset-inline-end:4px;gap:0}
.ga-view-big .pl-gal-btn{width:44px;height:44px;border:0;background:none;color:#f4efe6}
.ga-view-big .pl-gal-count{min-width:0;padding:0 6px;font-size:.88rem;color:#b9b0a2;font-variant-numeric:tabular-nums}
.ga-x{position:absolute;inset-block-start:max(2px,env(safe-area-inset-top));inset-inline-start:4px;width:44px;height:44px;border-radius:50%;border:0;background:none;color:#f4efe6;font-size:1.7rem;line-height:1;cursor:pointer}
.ga-x[hidden]{display:none}
.ga-view-big .ga-view-cap{flex:none;align-self:center;width:100%;max-width:620px;box-sizing:border-box;padding:12px 16px 8px;text-align:start;contain:none;overflow:visible;color:#e9e2d5;font-size:.95rem}
.ga-view-big .ga-view-cap[hidden]{display:none}
.ga-view-big .pl-credit a{color:#d8cfbf}
.ga-view-big .ar-who{margin:0;font-size:.92rem;line-height:1.4;color:#cfc6b7}
.ga-view-big .ar-who b{font-size:1.02rem;color:#fff}
.ga-view-big .ar-who .ar-work{color:#e9e2d5}
.ga-view-big .ar-who span{font-size:.85rem;color:#b9b0a2}
.ga-view-big .ar-bg{margin:6px 0 0;font-size:.97rem;line-height:1.5;color:#ece6db}
.ga-view-big .ar-q{margin:8px 0 0;font-size:1rem;font-weight:700;line-height:1.45;color:#fff}
.ga-view-big .ar-src{margin-top:10px;padding-top:4px;border-top:1px solid #34312a;font-size:.8rem;color:#b9b0a2}
.ga-view-big .ar-src summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:600;color:#cfc6b7}
.ga-view-big .ar-src summary:focus-visible{outline:3px solid var(--terracotta);outline-offset:2px}
.ga-view-big .ar-src p{margin:0 0 6px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;overflow-wrap:anywhere}
.ga-view-big .ar-src .pl-credit{margin:0;font-size:.8rem}
.ga-view-big .ar-src .cu-museum{all:unset;display:inline-flex;align-items:center;min-height:40px;color:#d8cfbf;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ga-view-big .ar-src .cu-museum:focus-visible{outline:3px solid var(--terracotta);outline-offset:2px}
/* O'Keeffe in the big viewer: the flower photograph square and as wide as the phone (not sized as the viewer's own picture), the zoom
   under it, and the plain line that it is a photograph, not her painting */
.ga-view-big .ga-view-win{width:100%;flex:none;padding:0;border:0;color:#f4efe6}
.ga-view-big .ga-view-win .cu-fig{--cu-h:min(calc(100dvh - 48px - 250px),100vw);margin:0;color:#f4efe6}
.ga-view-big .ga-view-win .cu-shrink{width:100% !important;max-width:var(--cu-h);border:0;border-radius:0}
.ga-view-big .ga-view-win .cu-shrink img{width:100%;height:100%;max-height:none;aspect-ratio:auto;border-radius:0;object-fit:cover}
.ga-view-big .ga-view-win .cu-act-under{margin:8px 0 0;text-align:center}
.ga-view-big .ga-view-win .cu-btn{min-height:44px;padding:4px 18px;font-size:.9rem;background:none;color:#f4efe6;border:1px solid #6b6457}
.ga-view-big .ga-view-win figcaption{margin:6px 16px 0;text-align:center;font-size:.8rem;line-height:1.35;color:#b9b0a2;overflow-wrap:anywhere}

.cu-main.cu-tall{--cu-h:min(56dvh,520px)}   /* a tall photograph gets more height, so it is not a narrow strip */
@media (max-height:700px){.cu-main.cu-tall{--cu-h:min(52dvh,400px)}}

/* the paper's way: where the inspiration comes from (two equal choices) */
.cu-insp{display:grid;grid-template-columns:1fr;gap:8px;margin:14px 0 8px}
@media (min-width:520px){.cu-insp{grid-template-columns:1fr 1fr}}
.cu-inspbtn{min-height:52px;padding:10px 14px;border:1.5px solid var(--rule);border-radius:12px;background:var(--card);color:var(--ink);font:inherit;font-weight:600;text-align:center;cursor:pointer}
.cu-inspbtn[aria-checked=true]{border-color:var(--terracotta);box-shadow:0 0 0 2px var(--terracotta);background:#fff}
.cu-inspbtn:focus-visible{outline:3px solid var(--terracotta);outline-offset:2px}
.cu-detailbox[hidden]{display:none}
.cu-own{margin-top:18px;font-size:1rem;color:var(--ink)}

/* screen 3: one gallery, the artist's name on each picture; the words come in the big viewer */
/* the artist's name under the picture (19 October 2026: nothing over a work or a photograph) */
.ar-under{margin:4px 0 0;display:flex;flex-wrap:wrap;gap:0 8px;align-items:baseline;line-height:1.35}
.ar-chip{color:var(--ink);font-size:.85rem;font-weight:700;overflow-wrap:anywhere}
.ar-one{margin-top:12px}
.ar-ask{margin:6px 0 0}

/* screen 3: the flower photograph is a photograph to illustrate, not O'Keeffe's painting */
.ar-photo{color:var(--credit);font-size:.75rem;font-weight:600}
.pl-main .ar-note{margin:8px 0 0;font-size:.85rem;line-height:1.4;color:var(--credit)}
.ar-ask{margin:12px 0 0}
/* screen 6 on a narrow phone (17 October 2026, after the review on Android): the photograph, then its detail under it nearly as wide as the page,
   then compact zoom controls and the two actions; the touch targets stay 44px (the buttons look smaller; the ::after reaches the rest) */
@media (max-width:560px){
  .cu-row{flex-direction:column;align-items:stretch;gap:8px;margin-top:8px}
  .cu-peek{align-self:center;width:min(100%,56dvh);height:auto;aspect-ratio:1/1}
  .cu-live{aspect-ratio:1/1}
  .cu-ctl{width:100%}
  .cu-zoomrow{gap:2px}
  .cu-ctl .cu-step{width:44px;height:44px;border:4px solid transparent;background-clip:padding-box;box-shadow:inset 0 0 0 1.5px var(--rule);font-size:1.15rem;line-height:1}
  .cu-acts{gap:6px;margin-top:2px;flex-wrap:nowrap}
  .cu-acts .cu-btn{flex:1 1 0;min-height:44px;padding:2px 8px;font-size:.84rem;border:0;border-block:4px solid transparent;background-clip:padding-box;box-shadow:inset 0 0 0 1px var(--ink)}
  .cu-saved{margin-top:8px;padding-top:6px}
  .cu-pics{margin-bottom:4px}
}
/* the remove button: 28px to see, 44px to touch (its transparent border) */
.cu-saved .cu-x{width:44px;height:44px;border:8px solid transparent;background-clip:padding-box;box-shadow:inset 0 0 0 1.5px var(--rule);inset-block-start:-12px;inset-inline-end:-12px;line-height:1;z-index:2}

/* lesson 2.2 screen 7: the learner's saved details, one chosen */
.cu-picks{display:grid;gap:12px;list-style:none;margin:6px 0 0;padding:0;grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.cu-picks-1{grid-template-columns:minmax(0,320px);justify-content:center}
.cu-picks-2{grid-template-columns:repeat(2,minmax(0,200px));justify-content:center}
.cu-picks-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cu-pick{display:flex;flex-direction:column;gap:8px;min-width:0}
.cu-pickimg{position:relative;display:block;width:100%;padding:0;overflow:hidden;border:2px solid var(--rule);border-radius:12px;background:var(--card);cursor:zoom-in;aspect-ratio:1/1}
.cu-pickimg canvas{display:block;width:100%;height:100%}
.cu-pickimg span{position:absolute;inset-block-end:4px;inset-inline-start:6px;font-size:.8rem;font-weight:700;color:#fff;text-shadow:0 0 3px #000}
.cu-pickimg:focus-visible,.cu-choose:focus-visible{outline:3px solid var(--terracotta);outline-offset:2px}
.cu-choose{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:4px 6px;border:1.5px solid var(--ink);border-radius:999px;background:var(--card);color:var(--ink);font:inherit;font-size:.9rem;font-weight:600;line-height:1.2;cursor:pointer}
.cu-choose i{display:none;font-style:normal;font-weight:700}
.cu-pick.on .cu-pickimg{border-color:var(--terracotta);box-shadow:0 0 0 3px var(--terracotta)}
.cu-pick.on .cu-choose{background:var(--ink);color:var(--card);border-color:var(--ink)}
.cu-pick.on .cu-choose i{display:inline}
.cu-ask7{margin:14px 0 0;padding:14px;border:1.5px solid var(--rule);border-radius:14px;background:var(--card);text-align:center}
.cu-ask7 p{margin:0 0 12px;font-size:1rem;line-height:1.45;color:var(--ink)}
.cu-ask7-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.cu-ask7-btns .cu-btn{flex:1 1 140px}
.cu-ask7-pick{background:var(--ink) !important;color:var(--card) !important}
.cu-none{margin-top:10px}
.cu-bigbtn[hidden],.cu-ask7[hidden]{display:none}

/* ── the design pass of 18 October 2026 ── */
/* M4: the lesson's name in the bar: two even lines when it takes two, the bar and its progress line with room */
.pl-id{text-wrap:balance;font-size:.88rem;line-height:1.25}
.pl-top{padding-bottom:10px}
/* C3: a screen with little on it (words only): its content sits in the middle of the room it has, the title with it,
   instead of a hollow between the top and the button (player.js sets pl-sparse; a full screen is unchanged) */
.pl-main.pl-sparse{display:flex;flex-direction:column}
.pl-main.pl-sparse > .pl-inner{margin-block:auto;width:100%}

/* lesson 2.2, screen 2 (19 October 2026, the author's final choice): one photograph at a time, as wide as the phone and whole, as tall as the
   screen allows; previous, the count and next under it, never on it (js/closeup.js PlayerKinds.carousel) */
.cu-car{margin:6px calc(var(--pad) * -1) 0}
.cu-car-stage{display:flex;justify-content:center;touch-action:pan-y;user-select:none}
.cu-car-img{display:block;width:100%;max-width:calc((100dvh - 290px) * var(--r));padding:0;border:0;background:none;cursor:zoom-in}
.cu-car-img[hidden]{display:none}
.cu-car-img img{display:block;width:100%;height:auto;aspect-ratio:var(--r);-webkit-user-drag:none}
.cu-car-img:focus-visible{outline:3px solid var(--terracotta);outline-offset:-3px}
.cu-car-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:10px}
.cu-car-count{min-width:3em;text-align:center;font-size:.9rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
/* a landscape photograph is as wide as the phone at most, so the question, the photograph and its arrows stand together in the middle of the
   screen rather than at the top over an empty half; on a tablet the photograph leaves the text column (up to 960px) */
.pl-main:has(.cu-car){display:flex;flex-direction:column}
.pl-main:has(.cu-car) > .pl-inner{margin-block:auto;width:100%}
@media (min-width:700px){.cu-car{margin-inline:calc(50% - min(50vw - 32px, 480px))}.cu-car-img{max-width:calc((100dvh - 330px) * var(--r))}.cu-car-img img{border-radius:8px}}

/* lesson 2.2, screen 6 (19 October 2026): the photograph large, the zoom right under it, one clear action with the detail beside it
   (small; a tap enlarges it), the saved details, and the other photographs last */
.cu .cu-main{--cu-h:min(50dvh,520px)}
@media (max-height:700px){.cu .cu-main{--cu-h:min(46dvh,380px)}}
.cu .cu-row.cu-ctl{display:flex;flex-direction:column;align-items:stretch;gap:8px;flex:none;width:min(100%,calc(var(--cu-h) * 1.6));margin:8px auto 0}
.cu .cu-keeprow{display:flex;align-items:center;gap:10px}
.cu .cu-keeprow .cu-peek{flex:none;align-self:center;width:60px;height:60px;aspect-ratio:1/1;border:2px solid var(--terracotta);border-radius:10px}
.cu .cu-keeprow .cu-keep{flex:1 1 auto;min-height:52px;padding:6px 14px;border:0;box-shadow:none;background:var(--ink);color:var(--bg);font-size:1rem;font-weight:700}
.cu .cu-keeprow .cu-keep:disabled{opacity:.45}
.cu .cu-saved-h .cu-n{color:var(--ink-2)}
.cu .cu-worlds .cu-w{width:56px;height:56px}
.cu .cu-worlds li{display:flex;flex-direction:column;align-items:center}
.cu .cu-saved .cu-x{position:static;margin-top:-4px}
.cu-more{margin-top:10px}
.cu-more-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;font-size:.9rem;font-weight:700;color:var(--ink-2)}
.cu-link{min-height:44px;padding:0 4px;border:0;background:none;color:var(--ink);font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cu-link:focus-visible{outline:3px solid var(--terracotta);outline-offset:2px}

/* lesson 2.2, screen 7 (19 October 2026): the saved details large, two across (one: as wide as a phone allows), nothing written on them */
.cu-picks{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cu-picks-1{grid-template-columns:minmax(0,min(360px,max(160px,calc(100dvh - 580px))))}   /* one detail: large, but the question and paper or Studio still in sight */
@media (min-width:700px){.cu-picks-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cu-after{margin-top:14px}

/* ── lesson 2.1, the redesign of 20 October 2026 (js/kinds21.js, js/player.js) ── */
/* the whole Morris design with the unit and its repeats marked (units), and one artwork, large (artwork): whole, at its
   own proportions, as large as the screen's room allows */
.k21-fig{--k21-h:min(46dvh,440px);margin:4px 0 10px}
.k21-pic{position:relative;margin-inline:auto;max-width:100%;border-radius:10px;overflow:hidden;border:1px solid var(--rule);background:var(--card)}
.k21-pic img{display:block;width:100%;height:100%;object-fit:contain}
.k21-cap{margin-top:8px;text-align:center;font-size:.95rem;color:var(--ink-2)}
.k21-cap b{color:var(--ink)}
.k21-ring{position:absolute;transform:translate(-50%,-50%);border:3px solid #fffdf9;border-radius:50%;box-shadow:0 0 0 2px rgba(20,18,15,.55),inset 0 0 0 2px rgba(20,18,15,.35);opacity:0;pointer-events:none;
  animation:k21-on .45s ease forwards;animation-delay:calc(1.1s + var(--i) * .3s)}
.k21-ring.k21-unit{border-color:var(--ochre);border-width:4px;animation-delay:.3s}
@keyframes k21-on{from{opacity:0;transform:translate(-50%,-50%) scale(.6)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
/* Morris's screen (Hagit's choice B, 21 October 2026): the unit enlarged under the work, joined to its gold ring by a thin
   gold line (from the picture's foot, right under the ring, never over the work), the question beside it; the circle smaller
   than the work, round, the ring's own gold; the line comes with the gold ring (no animation of its own) and is never
   in the way of a tap */
.k21-fig{--k21-d:clamp(100px,30vw,128px)}
.k21-dstem{position:absolute;width:3px;transform:translateX(-50%);background:var(--ochre);box-shadow:0 0 0 1px rgba(20,18,15,.35);pointer-events:none;opacity:0;animation:k21-show .45s ease .3s forwards}
/* found, not given (21 October 2026): put away until the gold ring is tapped; then the row opens below the work (the work
   itself never moves), the line, the circle and its caption coming in softly; "Continue" never waits for it */
.k21-detail{position:relative;margin-inline:auto;max-width:100%;height:0;overflow:hidden;visibility:hidden;transition:height .45s ease,visibility 0s linear .45s}
.k21-open .k21-detail{height:calc(14px + var(--k21-d) + 10px);visibility:visible;transition:height .45s ease,visibility 0s}
.k21-detail > *{opacity:0;transition:opacity .35s ease}
.k21-open .k21-detail > *{opacity:1;transition:opacity .4s ease .2s}
.k21-open .k21-unitzoom{animation:k21-grow .5s ease .15s both}
@keyframes k21-grow{from{transform:translateX(-50%) scale(.6)}to{transform:translateX(-50%) scale(1)}}
/* the gold ring is the way in: a button over it (a full touch target), a soft gold pulse a few times once the rings are
   all there, until it is found */
.k21-reveal{position:absolute;transform:translate(-50%,-50%);min-width:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.k21-reveal::after{content:'';position:absolute;inset:-3px;border-radius:50%;pointer-events:none;animation:k21-pulse 1.4s ease-out 3.9s 3}
.k21-found .k21-reveal::after{animation:none}
.k21-reveal:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.k21-open .k21-unit{box-shadow:0 0 0 2px rgba(20,18,15,.55),0 0 0 5px rgba(214,168,79,.45),inset 0 0 0 2px rgba(20,18,15,.35)}
@keyframes k21-pulse{0%{box-shadow:0 0 0 0 rgba(214,168,79,.85)}100%{box-shadow:0 0 0 14px rgba(214,168,79,0)}}
.k21-dstem{top:0;height:16px}
.k21-unitzoom{position:absolute;top:14px;width:var(--k21-d);height:var(--k21-d);transform:translateX(-50%);border-radius:50%;background-color:var(--card);background-repeat:no-repeat;
  box-shadow:0 0 0 4px var(--ochre),0 0 0 6px rgba(20,18,15,.35)}
.pl-main p.k21-ask{position:absolute;top:14px;height:var(--k21-d);display:flex;align-items:center;margin:0;font-size:1.06rem;line-height:1.4;font-weight:700;color:var(--ink);text-wrap:balance}
@keyframes k21-show{to{opacity:1}}
/* the projector and a wide tablet (L.wide): the whole of it in view, the work smaller by the circle's row; the circle and the
   question as large as the screen's other words */
@media (min-width:1200px) and (orientation:landscape){
  .pl-wide .k21-fig:has(.k21-detail){--k21-d:clamp(120px,16dvh,180px);--k21-h:calc(100dvh - 358px - var(--k21-d))}
  .pl-wide .pl-main p.k21-ask{font-size:clamp(1.3rem,1.6vw,1.9rem)}
}
@media (prefers-reduced-motion:reduce){.k21-ring{animation:none;opacity:1}.k21-dstem{animation:none;opacity:1}
  .k21-detail,.k21-detail > *,.k21-open .k21-detail,.k21-open .k21-detail > *{transition:none}.k21-open .k21-unitzoom{animation:none}.k21-reveal::after{animation:none;box-shadow:0 0 0 3px rgba(214,168,79,.6)}.k21-found .k21-reveal::after{box-shadow:none}}
/* "Source and rights": quiet, opened with a tap */
.pl-source{margin:4px auto 12px;max-width:var(--col);text-align:center;font-size:.86rem;color:var(--credit)}
.pl-source summary{display:inline-block;cursor:pointer;min-height:32px;padding:4px 8px;border-radius:8px;text-decoration:underline;text-underline-offset:3px}
.pl-source summary::-webkit-details-marker{display:none}
.pl-source summary:focus-visible{outline:3px solid var(--terracotta);outline-offset:2px}
.pl-main .pl-source p{margin:4px 0 0;font-size:.86rem;line-height:1.45;color:var(--credit)}
/* Inspiration (the lesson's one gallery, js/inspiration.js): a quiet button, never the main action */
.pl-inspire-row{margin:14px 0 4px !important;text-align:center}
.pl-inspire{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);padding:8px 18px;border:1.5px solid var(--rule);border-radius:999px;background:var(--card);color:var(--ink);font-weight:600;cursor:pointer}
.pl-inspire svg{width:20px;height:20px;color:var(--ink-2)}
.pl-inspire:hover{border-color:var(--ink-2)}
.pl-inspire:focus-visible{outline:3px solid var(--terracotta);outline-offset:2px}
.pl-stages-all ~ .pl-inspire-row{margin:6px 0 4px !important}   /* the paper screen (2.1, 2.2): "Inspiration" as wide and as clear as in the other lessons' paper screens (.pl-refs; QA-P-2, 4 November 2026) */
.pl-stages-all ~ .pl-inspire-row .pl-inspire{display:flex;justify-content:center;gap:10px;width:100%;min-height:56px;padding:10px 18px;border:1.5px solid var(--ink);border-radius:14px;font-size:1.05rem}
.pl-stages-all ~ .pl-inspire-row .pl-inspire svg{width:24px;height:24px;color:var(--ink)}
/* the paper workspace: its stages in place, the one now leading, those before it quieter */
.pl-stages{margin:0 0 14px;padding-inline-start:1.4em;display:flex;flex-direction:column;gap:10px}
.pl-stages li{font-size:1.02rem;line-height:1.5;color:var(--muted)}
.pl-stages li.now{font-size:clamp(1.12rem,4vw,1.3rem);font-weight:600;color:var(--ink)}
/* 2.1 paper, one screen (21 October 2026): the three stages all at once, each its own short step, equally clear */
.pl-stages-all{gap:14px}
.pl-stages-all li{font-size:clamp(1.05rem,3.8vw,1.22rem);color:var(--ink);padding-inline-start:4px}
.pl-stages-all li::marker{font-weight:700;color:var(--terracotta)}
/* a second way on as a button of its own (2.1 paper: "Continue to Studio"), next to the main one, quieter than it */
.pl-secondary.pl-alt{min-height:var(--tap);padding:0 22px;border:1.5px solid var(--ink);border-radius:999px;background:var(--card);color:var(--ink);text-decoration:none}

/* the projector (L.wide: 2.1): on a wide landscape screen the lesson uses the width, its two artworks fill the room, its
   words are large enough to read across a classroom; phones, tablets held upright and the other lessons as they are */
@media (min-width:1200px) and (orientation:landscape){
  .app.pl-wide{max-width:min(1680px,96vw)}
  .pl-wide .pl-inner{max-width:none;padding-inline:clamp(24px,3vw,56px);padding-top:clamp(12px,2vh,28px)}
  .pl-wide .pl-foot{max-width:min(860px,90%)}
  .pl-wide .pl-id{font-size:1.1rem}
  .pl-wide .pl-title{font-size:clamp(2.1rem,2.7vw,3.2rem);text-align:center;margin-bottom:14px}
  .pl-wide .pl-text{font-size:clamp(1.55rem,1.95vw,2.3rem) !important;line-height:1.4 !important;text-align:center}
  .pl-wide .pl-text.pl-hint{font-size:clamp(1.15rem,1.35vw,1.5rem) !important}
  .pl-wide .pl-primary{font-size:1.3rem;min-height:60px}
  .pl-wide .pl-secondary{font-size:1.15rem}
  .pl-wide .cu-fig{--cu-h:calc(100dvh - 330px)}
  .pl-wide .k21-fig{--k21-h:calc(100dvh - 340px)}
  .pl-wide .k21-next{font-size:1.15rem;min-height:50px}   /* words and a question above it (Taeuber-Arp's second screen): the work still whole */
  .pl-wide .pl-step-medium .pl-inner,.pl-wide .pl-step-studio .pl-inner,.pl-wide .pl-step-end .pl-inner{max-width:980px}
  .pl-wide .k21-cap{font-size:1.3rem}
  .pl-wide .pl-source,.pl-wide .pl-main .pl-source p{font-size:1.02rem}
  .pl-wide .pl-inspire{font-size:1.15rem;min-height:54px;padding-inline:24px}
  .pl-wide .pl-stages li{font-size:1.3rem}
  .pl-wide .pl-stages li.now{font-size:clamp(1.55rem,1.95vw,2.2rem)}
  .pl-wide .pl-stages-all li{font-size:clamp(1.4rem,1.7vw,1.9rem)}
  .pl-wide .pl-choice{min-height:190px;font-size:1.3rem}
}

/* Taeuber-Arp's second screen: the whole work first, then one quiet dashed outline at a time, at the class's pace (js/kinds21.js) */
.k21-box{position:absolute;border:2px dashed rgba(36,36,36,.8);border-radius:12px;box-shadow:0 0 0 2px rgba(255,253,249,.6);opacity:0;pointer-events:none;transition:opacity .45s ease}
.k21-box.on{opacity:1}
.k21-tap{cursor:pointer}
.k21-step{display:flex;align-items:center;justify-content:center;gap:14px;margin:10px 0 2px;flex-wrap:wrap}
.k21-next{min-height:44px;padding:8px 20px;border-radius:999px;border:1.5px solid var(--ink);background:var(--card);color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
.k21-next:focus-visible{outline:3px solid var(--accent,#C96B4B);outline-offset:3px}
.k21-dots{display:inline-flex;gap:7px}
.k21-dots i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--ink-2);transition:background .3s}
.k21-dots i.on{background:var(--ink)}
.k21-said{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.k21-box{transition:none}}

/* 2.1 on a phone held upright (Hagit on her Android phone, inside the Claude app, 21 October 2026): a lower bar and foot,
   the words a little smaller, and each artwork as large as the room left by them; Taeuber-Arp's second screen keeps the
   whole work above the foot (its words and question counted in). The words, the artwork and its credit one group at the
   top, close together; what is left over stays below it, above the foot, never between them (Hagit, 21 October 2026:
   centring the group left hollows above and below it); a short screen scrolls */
@media (max-width:599px) and (orientation:portrait){
  .pl-wide .pl-top{min-height:50px;padding-top:2px;padding-bottom:6px}
  .pl-wide .pl-inner{padding-top:10px;padding-bottom:16px}
  .pl-wide .pl-main.pl-sparse > .pl-inner{margin-block:0}
  .pl-wide .pl-text{margin-bottom:10px;font-size:1rem !important;line-height:1.45 !important}
  .pl-wide .pl-foot{gap:2px;padding-top:8px;padding-bottom:max(10px,env(safe-area-inset-bottom))}
  .pl-wide .pl-primary{min-height:50px;font-size:1.02rem}
  .pl-wide .pl-foot .pl-secondary:not(.pl-alt){min-height:40px;font-size:.95rem}
  .pl-wide .cu-fig{--cu-h:clamp(220px,calc(100dvh - 290px),560px);margin-top:4px}
  .pl-wide .cu-act{margin-top:8px}
  .pl-wide .k21-fig{--k21-h:clamp(220px,calc(100dvh - 300px),560px);margin:2px 0 6px}
  .pl-wide .k21-step{margin-top:8px}
  .pl-wide .k21-cap{margin-top:4px}
  .pl-wide .pl-source{margin-bottom:6px}
  .pl-wide .pl-stages-all{gap:16px}   /* the paper screen: the three steps a little smaller, with more air between them */
  .pl-wide .pl-stages-all li{font-size:1.02rem;line-height:1.5}
}

/* Taeuber-Arp's two screens (3 and 4, 21 October 2026): the same work at the same size and in the same place, only the
   words around it changing: one size rule for both (above), the question above it on both (s.askFirst), and the question
   in one box on both (s.askWith, 22 October 2026): the two questions in the same cell, the other screen's unseen, so the
   box is as high as the longer one whatever the width or language */
.pl-qbox{display:grid}
.pl-qbox > .pl-q{grid-area:1 / 1}
.pl-qbox > .pl-qsize{visibility:hidden}
.pl-qbox + .k21-fig{margin-top:0}   /* the question's margin no longer meets the work's inside the box: the same gap as before */

/* 2.2 "A Closer Look" (22 October 2026): until a detail is saved, "Save" is the screen's main action and "Continue" quieter;
   pressing it says what to do (js/closeup.js needSave) and draws the eye to "Save" once */
.pl-primary.cu-wait{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink-2)}
.pl-primary.cu-wait:hover{background:rgba(43,42,40,.06)}
.cu-need{margin:10px auto 0;max-width:34em;padding:10px 14px;border-radius:12px;background:var(--card, #fffdf9);box-shadow:0 0 0 1.5px var(--terracotta, #C96B4B);color:var(--ink);font-size:.98rem;font-weight:600;text-align:center}
.cu .cu-keeprow .cu-keep.cu-attn{animation:cu-attn .9s ease-in-out 2}
@keyframes cu-attn{50%{box-shadow:0 0 0 5px var(--terracotta, #C96B4B)}}
@media (prefers-reduced-motion:reduce){.cu .cu-keeprow .cu-keep.cu-attn{animation:none;box-shadow:0 0 0 4px var(--terracotta, #C96B4B)}}
/* 2.2 screen 6: the question before paper or Studio, right above the choice */
.cu-askafter{margin-top:14px}
/* 2.2 "A Closer Look" at its limit of saved details (22 October 2026): "Swap a saved detail", then the saved ones to tap */
.cu-swapping .cu-saved .cu-w{border-color:var(--terracotta);border-style:dashed}
.cu-keep.cu-full[aria-pressed=true]{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 2px var(--terracotta)}
.cu-saved-h{flex-wrap:wrap;row-gap:2px}.cu-saved-h .cu-n{white-space:nowrap}
/* 2.2's end (s.mains, js/player.js): two main ways on, side by side when there is room; a new attempt and My artworks under them,
   quieter, in one row */
.pl-foot-mains .pl-mains{display:grid;grid-template-columns:1fr;gap:8px}
@media (min-width:600px){.pl-foot-mains .pl-mains{grid-template-columns:1fr 1fr}}
.pl-foot-mains .pl-mains .pl-primary{margin-top:0}
.pl-foot-mains .pl-quiet{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 18px;margin-top:4px}
.pl-foot-mains .pl-quiet .pl-secondary{flex:0 1 auto;min-height:44px;padding-inline:10px}
/* 2.2 "A Closer Look" (22 October 2026): the room above the tool trimmed first, so "Save" is seen without scrolling and the photograph
   keeps its size (js/closeup.js fit() makes it smaller only for what is still missing) */
.pl-main:has(.cu-keep) .pl-inner{padding-top:12px}
.pl-main:has(.cu-keep) .pl-title{margin-bottom:8px}
.pl-main:has(.cu-keep) .pl-inner > .pl-text{margin-bottom:8px}

/* ── lesson 2.2 in 7 screens (23 October 2026) ── */
/* 1 (2.2, 24 October 2026) · three discoveries: small square pictures of each close-up above the photograph (never all of it);
   one marked once seen whole */
.cu-sh-pick{display:flex;gap:10px;justify-content:center;list-style:none;margin:2px 0 10px;padding:0}
.cu-sh-thumb{position:relative;display:block;width:56px;height:56px;padding:0;overflow:hidden;border:2px solid var(--rule);border-radius:10px;background:var(--card);cursor:pointer}
.cu-sh-thumb img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(var(--cu-s,5));transform-origin:var(--cu-at,50% 50%)}
.cu-sh-thumb[aria-pressed=true]{border-color:var(--terracotta);box-shadow:0 0 0 2px var(--terracotta)}
.cu-sh-thumb:focus-visible{outline:3px solid var(--terracotta);outline-offset:2px}
.cu-sh-seen::after{content:'';position:absolute;inset-block-end:4px;inset-inline-end:4px;width:9px;height:9px;border-radius:50%;background:var(--terracotta);box-shadow:0 0 0 2px var(--card)}
.cu-shrink[hidden]{display:none}
.cu-sh-src{margin:6px auto 0;max-width:var(--cu-h,440px)}
/* 2 · two ways to get close: side by side where there is room, one under the other on a phone; the works never small */
.cu-pair{display:grid;grid-template-columns:1fr;gap:22px;list-style:none;margin:8px 0 0;padding:0}
@media (min-width:700px){.cu-pair{grid-template-columns:1fr 1fr;align-items:start}}
.cu-card{display:flex;flex-direction:column;align-items:center;min-width:0}
.cu-card .cu-fig{--cu-h:min(44dvh,380px);margin:0;width:100%}
.cu-bl-img{display:block;width:min(100%,calc(min(44dvh,380px) * var(--r)));aspect-ratio:var(--r);padding:0;border:1px solid var(--rule);border-radius:10px;overflow:hidden;background:var(--card)}
.cu-bl-img:disabled{opacity:1;cursor:default}
.cu-bl-img.cu-tap{cursor:pointer}
.cu-bl-img.cu-out{cursor:default}
.cu-bl-img:not(:disabled){cursor:zoom-in}
.cu-bl-img img{display:block;width:100%;height:100%;object-fit:contain}
/* a phone on its side (under 450px high): one under the other, each picture as tall as the room between the bars, so the reveal
   and the detail's frame can be seen (visual review P2-V22-9, 3 November 2026) */
@media (orientation:landscape) and (max-height:450px){.cu-pair{grid-template-columns:1fr}.cu-card .cu-fig{--cu-h:max(160px,calc(100dvh - 150px))}
  .cu-bl-img{width:min(100%,calc(max(160px,calc(100dvh - 150px)) * var(--r)))}}
.cu-guess{margin:10px 0 0;text-align:center;font-weight:600}
.cu-ans{width:100%;margin-top:8px}
.cu-ans-h{margin:0 0 2px;text-align:center}
.cu-card .ar-who,.cu-card .ar-bg{text-align:start;width:100%}
.cu-pair-q{margin:0 0 4px;text-align:center}
.pl-main .cu-pair-q{color:var(--ink);font-weight:700}
/* 5 · the detail chosen: a tap marks it */
.cu-choosing .cu-pickimg{cursor:pointer}
.cu-choosing .cu-pickimg[aria-pressed=true]{border-color:var(--terracotta);box-shadow:0 0 0 3px var(--terracotta)}
.pl-choice:disabled{opacity:.45;cursor:default}
.cu-choosing + .cu-after{margin-top:14px}
.cu-after-quiet{color:var(--ink-2);font-size:.95rem}
/* 6 · the paper's screen: the detail chosen, above the stages */
.cu-paperdetail{margin:4px 0 12px}
/* 7 · the detail chosen, then the work (Studio) or a line (paper) */
.cu-cmpdetail{margin-top:6px}
.cu-besides{text-align:center;color:var(--ink-2)}
/* 7 (24 October 2026): the detail and the work side by side, both whole, at the height the screen has left (--side-h, set by the
   screen); the work keeps its proportions; on paper the line stands where the drawing would be */
.cu-side{--side-h:320px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start;max-width:760px;margin:4px auto 0}
.cu-side-cell{margin:0;min-width:0;display:flex;flex-direction:column;align-items:center}
.cu-side .cu-cmpdetail{margin:0;gap:0;width:100%}
.cu-side .cu-bigdetail{width:auto!important;height:auto!important;max-width:100%;max-height:var(--side-h);aspect-ratio:1/1}
.cu-side .pl-studio-work{margin:0;padding:3px;max-width:100%}
.cu-side .pl-studio-work img{width:auto;max-width:100%;max-height:var(--side-h)}
.cu-side .cu-label{margin-top:6px;font-size:.85rem;line-height:1.35}
.cu-side-paper{justify-content:center;gap:8px;width:100%;aspect-ratio:1/1;max-height:var(--side-h);padding:10px;border:1.5px dashed var(--rule);border-radius:12px;color:var(--ink-2)}
.cu-side-paper svg{width:34px;height:34px;fill:none;stroke:var(--terracotta);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.cu-side-paper .cu-besides{margin:0;font-size:.98rem;line-height:1.45}
.pl-step-end .cu-side ~ p,.pl-step-end .pl-q{margin-bottom:8px}
/* its buttons: "Keep creating" the main one; the three others in one quiet row (they wrap if they must) */
.pl-foot-keep{flex-direction:row;flex-wrap:wrap;justify-content:center;column-gap:18px;row-gap:0}
.pl-foot-keep .pl-secondary{flex:0 1 auto;min-height:44px;padding-inline:4px;font-size:.9rem;font-weight:500}
.pl-foot-keep .pl-primary{flex:1 0 100%}
/* the three quieter ones, after the pictures in the screen itself */
.cu-side-more{display:flex;flex-wrap:wrap;justify-content:center;column-gap:18px;margin:12px 0 4px}
.cu-side-more .pl-secondary{min-height:44px;padding-inline:4px;font-size:.92rem;font-weight:500}
/* a short screen (a small phone): the words of screen 7 a little tighter, so the pictures keep their room */
@media (max-height:700px){
  .pl-main:has(.cu-side) .pl-title{font-size:1.2rem;margin-bottom:4px}
  .pl-main:has(.cu-side) .pl-inner > p{font-size:.95rem;line-height:1.45;margin-bottom:6px}
  .cu-side .cu-label{margin-top:4px;font-size:.76rem;line-height:1.3}
}

/* ── Lesson 2.2, screens 3–6 of 8 (25 October 2026; js/closeup.js: gallery, discover with o.compact, world, how). Only .cv* and
   what is inside them: no other lesson's screen has these ── */
/* the title's row: the title, and the screen's one way back at the far side */
.cv-hd{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.cv-hd .pl-title{margin:0;flex:1 1 auto;min-width:0}
.cv-back{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);padding:0 2px;border:0;background:none;font-weight:700;font-size:.95rem;color:var(--ink);cursor:pointer}
.cv-back:focus-visible{outline:3px solid var(--terracotta);outline-offset:2px;border-radius:6px}
.pl-main:has(.cv-hd) .pl-inner,.pl-main:has(.cv-gal) .pl-inner{padding-top:12px}
.pl-main:has(.cv-gal) .pl-title{margin-bottom:12px}

/* 3 · the gallery: rows of one height, each photograph whole; an outline and a count on one with saved details */
.cv-gal{display:flex;flex-direction:column;gap:8px}
.cv-rows{display:flex;flex-direction:column;gap:8px}
.cv-row{display:flex;gap:8px}
.cv-row i{display:block}
.cv-ph{position:relative;display:block;min-width:0;padding:0;border:0;border-radius:10px;background:none;cursor:pointer}
.cv-ph img{display:block;width:100%;height:100%;object-fit:cover;border-radius:10px;background:var(--rule)}
.cv-ph.cv-has{outline:3px solid var(--terracotta);outline-offset:2px}
.cv-ph:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.cv-cnt{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--terracotta);color:#fff;font-size:.78rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.cv-ph .cv-cnt{position:absolute;top:-9px;inset-inline-start:-9px;box-shadow:0 0 0 2px var(--bg)}
.cv-more-p{display:flex;justify-content:center;margin:14px 0 0}
.cv-more{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);padding:0 22px;border:1.5px solid var(--ink);border-radius:999px;background:var(--card);color:var(--ink);font-weight:600;cursor:pointer}
.cv-more svg{width:18px;height:18px;stroke-width:2}
.cv-more:focus-visible,.cv-go:focus-visible{outline:3px solid var(--terracotta);outline-offset:2px}
.cv-links{margin:10px 0 0}
.cv-creds{margin-top:4px}
.cv-creds ol{margin:6px 0 0;padding-inline-start:22px;display:flex;flex-direction:column;gap:2px}
.pl-foot.cv-foot{padding-top:6px}
.cv-bar{display:flex;align-items:center;gap:10px;min-height:var(--tap)}
.cv-bar-l{font-weight:600;color:var(--ink-2)}
.cv-go{margin-inline-start:auto;min-height:var(--tap);padding:0 20px;border:1.5px solid var(--ink);border-radius:999px;background:var(--card);color:var(--ink);font-weight:700;cursor:pointer;white-space:nowrap}

/* 4 · look closely: the photograph as large as the room left; the tools a compact block under it, or a narrow column beside it */
.cv-hint{margin:-4px 0 8px;font-size:1rem;line-height:1.4;color:var(--ink-2)}
.cv{display:flex;flex-direction:column;gap:8px}
.cv-media{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.cv .cu-view{flex:none;max-width:100%;margin:0}
.cv-credit{margin:0;font-size:.8rem;color:var(--credit);text-align:center}
/* previous / next (24 October 2026): round, outside the photograph; beside it on a wide screen (the row), under it on a phone */
.cv-arrow{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1.5px solid var(--rule);border-radius:50%;background:var(--card);color:var(--ink);cursor:pointer}
.cv-arrow:disabled{opacity:.3;cursor:default}
.cv-arrow:focus-visible{outline:3px solid var(--terracotta);outline-offset:2px}
.cv-arrow-prev svg{transform:scaleX(-1)}
[dir=rtl] .cv-arrow-prev svg{transform:none}
[dir=rtl] .cv-arrow-next svg{transform:scaleX(-1)}
.cv-navrow{display:flex;justify-content:center;gap:28px;margin-top:2px}
.cv-media.cv-nav-beside{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:10px}
.cv-media.cv-nav-beside .cv-credit{flex-basis:100%}
.cv-credit .pl-credit{font-size:inherit}
.cv-tools{display:flex;flex-direction:column;gap:8px;min-width:0}
.cv .cu-row.cu-ctl{display:flex;flex-direction:column;align-items:stretch;gap:8px;width:100%;margin:0}
.cv .cu-zoomrow{display:flex;align-items:center;gap:4px}
.cv .cu-zoomrow .cu-zoom{height:36px}
.cv .cu-zoomrow .cu-step{width:44px;height:44px;font-size:1.2rem}
.cv .cu-pickhint{display:none}
.cv .cu-keeprow{display:flex;align-items:center;gap:8px}
.cv .cu-keeprow .cu-peek{flex:none;width:48px;height:48px;aspect-ratio:1/1;border:2px solid var(--terracotta);border-radius:8px}
.cv .cu-keeprow .cu-keep{flex:1 1 auto;min-height:48px;padding:4px 14px;border:0;box-shadow:none;background:var(--ink);color:var(--bg);font-size:1rem;font-weight:700;line-height:1.2}
.cv .cu-keeprow .cu-keep.cu-full[aria-pressed=true]{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 2px var(--terracotta)}
.cv .cu-keeprow .cu-keep.cu-attn{animation:cu-attn .9s ease-in-out 2}
@media (prefers-reduced-motion:reduce){.cv .cu-keeprow .cu-keep.cu-attn{animation:none;box-shadow:0 0 0 4px var(--terracotta)}}
.cv .cu-status{margin:0;min-height:1.3em;font-size:.88rem;line-height:1.3;font-weight:600;color:var(--terracotta)}   /* its room kept: a word appearing never moves the photograph */
.cv-row2{display:flex;align-items:center;gap:8px}
.cv-slots{display:flex;gap:8px;margin:0;padding:8px 6px 0 0;overflow:visible;list-style:none;flex:none}
.cv-slots li{position:relative;flex:none;width:48px;height:48px}
.cv-slots .cu-w{width:48px;height:48px;border-radius:8px}
.cv-slots .cu-x{width:24px;height:24px;inset-block-start:-9px;inset-inline-end:-9px;font-size:.85rem;border:0;background:var(--ink);color:var(--bg);box-shadow:0 0 0 2px var(--bg)}
.cv-slots .cv-free-slot{border:1.5px dashed var(--muted);border-radius:8px}
.cu-swapping .cv-slots .cu-w{border-color:var(--terracotta);border-style:dashed}
.cv-row2 .pl-foot.pl-foot-inline{flex:1 1 auto;min-width:0;margin:0;padding:8px 0 0}
.cv-row2 .pl-foot .pl-primary{min-height:48px}
.cv-tools .cu-need{margin:0}
.pl-main:has(.cv) .pl-inner{padding-bottom:max(12px,env(safe-area-inset-bottom))}
/* beside: the photograph its full height, the tools a narrow column that scrolls only if it must */
.cv.cv-side{flex-direction:row;align-items:flex-start;justify-content:center;gap:16px}
.cv.cv-side .cv-tools{flex:none;width:var(--cv-col,208px);max-height:var(--cv-h);overflow-y:auto;padding-bottom:4px}
.cv.cv-side .cv-row2{flex-wrap:wrap}
.cv.cv-side .cv-row2 .pl-foot{flex-basis:100%}
.cv.cv-side[style*="--cv-col: 300px"] .cv-row2{flex-wrap:nowrap}
.cv.cv-side[style*="--cv-col: 300px"] .cv-row2 .pl-foot{flex-basis:auto}
/* a phone held sideways: the screen's whole width, and the hint left out (the title says it) so the photograph keeps its height */
.pl-main:has(.cv) .pl-inner,.pl-main:has(.cv-det) .pl-inner{max-width:none}
@media (orientation:landscape) and (max-height:500px){.cv-hint{display:none}.cv-hd{margin-bottom:4px}}
.cv.cv-side .cv-credit{text-align:center}

/* 5 · from detail to artwork: one detail large, my details touching it, the task its width */
.cv-det{display:flex;justify-content:center}
.cv-unit{display:flex;flex-direction:column;gap:10px;max-width:100%}
.cv-big{display:block;width:100%;aspect-ratio:1/1;padding:0;border:0;border-radius:12px;overflow:hidden;background:var(--rule);cursor:zoom-in}
.cv-big canvas{display:block;width:100%;height:100%}
.cv-big:focus-visible,.cv-pick:focus-visible{outline:3px solid var(--terracotta);outline-offset:2px}
.cv-big.cv-swap{animation:cv-swap .28s ease-out}
@keyframes cv-swap{from{opacity:.25;transform:scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cv-big.cv-swap{animation:none}}
.cv-mine{display:flex;align-items:center;justify-content:center;gap:8px}
.cv-mine-l{font-size:.85rem;font-weight:600;color:var(--muted);margin-inline-end:4px}
.cv-pick{width:52px;height:52px;padding:0;border:0;border-radius:8px;overflow:hidden;background:var(--rule);cursor:pointer}
.cv-pick canvas{display:block;width:100%;height:100%}
.cv-pick[aria-pressed=true]{outline:3px solid var(--terracotta);outline-offset:2px}
@media (min-width:601px){.cv-pick{width:56px;height:56px}}
.cv-task{display:flex;flex-direction:column;gap:2px}
.cv-task .cu-after{margin:0;font-size:1.06rem;line-height:1.45;color:var(--ink)}
.cv-task .cu-after-quiet{color:var(--ink-2)}
.cv-unit.cv-wide{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:20px;row-gap:10px;align-items:start;width:100%}
.cv-unit.cv-wide .cv-big{grid-row:1 / span 3}
.cv-unit.cv-wide .cv-mine{justify-content:flex-start}
.cv-unit.cv-wide .cv-task .cu-after{font-size:.95rem;line-height:1.35}
.cv-unit.cv-wide .cv-pick{width:46px;height:46px}
.cv-unit .pl-foot.pl-foot-inline{margin:0;padding:6px 0 0;max-width:none}
.cv-unit.cv-wide .pl-foot{grid-column:2;align-self:end}
.cv-unit.cv-wide{grid-template-rows:auto auto 1fr auto}
.cv-unit.cv-wide .cv-big{grid-row:1 / span 4}

/* 6 · paper or Studio: the detail and the two cards one group, centred in the height the screen has */
.pl-main.cv-how .pl-inner{display:flex;flex-direction:column;min-height:100%}
.cv-how-grp{flex:1 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;padding-block:8px 16px}
.cv-how-grp .pl-choices{align-self:stretch;margin:0}
.cv-how-d{display:contents}
.cv-chip{display:block;border-radius:14px;overflow:hidden;background:var(--rule)}
.cv-chip canvas{display:block;width:100%;height:100%}
@media (min-width:601px) and (min-height:600px){.cv-how-grp{gap:40px}.cv-how .pl-choice{min-height:200px}}
@media (orientation:landscape) and (max-height:500px){.cv-how-grp{flex-direction:row;gap:24px}.cv-how-grp .pl-choices{flex:1;align-self:center}}
/* 2.2 screen 1 on a phone turned (low and wide): the close-up beside its line and "Move back", so neither is under the bar
   (visual review P1-V22-2, 2 November 2026); the small pictures smaller */
/* 2.2 screen 1: the line under the picture, with its button (the author, 4 November 2026) */
.pl-main .cu-sh-row > .cu-near{margin:12px 0 8px;text-align:center}

@media (orientation:landscape) and (max-height:500px){
  .cu-sh-row{display:grid;grid-template-columns:auto minmax(0,16rem);grid-template-areas:"fig near" "fig act";align-items:center;justify-content:center;column-gap:18px}
  .cu-sh-row .cu-fig{grid-area:fig;margin:0;--cu-h:calc(100dvh - 210px)}
  .cu-sh-row .cu-near{grid-area:near;align-self:end;margin:0}
  .cu-sh-row .cu-act{grid-area:act;align-self:start;margin:8px 0 0}
  .cu-sh-pick{margin:0 0 4px}
  .cu-sh-pick .cu-sh-thumb{width:40px;height:40px}
}
/* 2.2 screen 2: after "Find out what it is", where the detail was in the whole plate, framed for a moment (2 November 2026) */
.cu-bl-img{position:relative}
.cu-mark{position:absolute;box-sizing:border-box;border:3px solid #ffd34d;border-radius:6px;box-shadow:0 0 0 2px rgba(0,0,0,.45),0 0 14px rgba(255,211,77,.7);pointer-events:none;animation:cu-mark-in .5s ease-out both}
.cu-mark.cu-mark-out{opacity:0;transition:opacity .8s ease-in}
@keyframes cu-mark-in{from{opacity:0;transform:scale(1.15)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cu-mark{animation:none}.cu-mark.cu-mark-out{transition:none}}

/* 2.2 screen 4: "Continue" only once a detail is saved (the author, 3 November 2026; js/closeup.js discover) */
.pl-primary.cu-wait{display:none !important}