/* Learn, Alpha Draft 2 (15 Oct). Loads after module.css; only lrn-* screens
   and the two header drawers use it. Desktop sizes follow the 30 Sept
   scale-up (56px titles, 22px body, 58px buttons, 1216px column). */

[data-k="exec"]{--k-tint:#E6F1E9;--k-dot:#61A971;--k-ink:#2D5A38}
[data-k="emo"]{--k-tint:#F7EEDC;--k-dot:#C99A45;--k-ink:#6E5113}
[data-k="surv"]{--k-tint:#F6E8EC;--k-dot:#A85569;--k-ink:#7E3347}

/* ---- the two drawers: ? Help, i About ---- */
.panel[data-mode="help"] [data-for="about"],.panel[data-mode="about"] [data-for="help"]{display:none !important}
.head-info{font-family:Georgia,'Times New Roman',serif;font-style:normal;font-weight:700}
.head-about[data-tip]::after{
  content:attr(data-tip);position:absolute;top:calc(100% + 10px);right:-4px;z-index:60;
  white-space:nowrap;background:var(--ink);color:#fff;font:500 13px/1.2 'Work Sans',sans-serif;font-style:normal;
  padding:7px 10px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .15s ease .25s;
}
@media (hover:hover){.head-about[data-tip]:hover::after,.head-about[data-tip]:focus-visible::after{opacity:1}}
.ref-i{font-family:Georgia,serif;font-style:normal;font-weight:700}

/* ---- shared ---- */
.ln-split{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:start}
.ln-col,.ln-stack,.ln-narrow{display:flex;flex-direction:column;gap:18px;min-width:0}
.ln-stack[hidden]{display:none}
.ln-narrow{max-width:860px}
.ln-fig{margin:0;display:flex;justify-content:center}
.ln-fig img{width:150px;height:auto;display:block}
.ln-q{margin:0;font-weight:600;font-size:18px;line-height:1.35;color:var(--ink);text-wrap:pretty}
/* 19 Oct (Marc): the "Next:" line sits right, pointing on. */
.ln-bridge{margin-top:auto;padding-top:8px;text-align:right;align-self:flex-end;max-width:62ch}
.ln-coach{max-width:860px}
.screen [data-k] h2,.ln-read h2,.ln-move h2{margin:0;font-weight:600;font-size:19px;line-height:1.25;color:var(--ink)}

/* 1.0 */
.ln-parts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ln-parts li{display:block;font-size:17px;color:var(--ink)}
.ln-parts li > span[data-flat]{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:baseline}
.ln-parts .n{font-weight:600;color:var(--action)}
.ln-review{display:flex;flex-direction:column;gap:10px}
.ln-review button{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:12px;align-items:center;text-align:left;min-height:56px;padding:12px 18px;border:0;border-radius:var(--r);background:var(--surface);cursor:pointer;font:500 17px 'Work Sans',sans-serif;color:var(--ink)}
.ln-review button:hover{background:var(--tint)}
.ln-review .n{font-weight:600;color:#9AA3AE}
.ln-review [data-done="yes"] .n{color:var(--action)}
.ln-review .r{font-size:15px;color:var(--action)}
.ln-tip{display:flex;flex-direction:column;gap:6px;background:var(--surface);border-radius:var(--r);padding:16px 18px;max-width:62ch}
.ln-tip-k{margin:0;font:600 12px 'Work Sans',sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--plum)}
.ln-tip p:not(.ln-tip-k){margin:0;font-size:16px;line-height:1.55;color:var(--ink);text-wrap:pretty}
.ln-tip-q{display:inline-flex;align-items:center;justify-content:center;width:1.6em;height:1.6em;border-radius:8px;border:0;padding:0;vertical-align:-.2em;background:#fff;box-shadow:0 1px 2px rgba(60,52,32,.12),0 0 0 .5px rgba(60,52,32,.08);color:var(--muted);font:600 .85em/1 'Work Sans',sans-serif;cursor:pointer}
.ln-tip-q:hover{color:var(--action);background:var(--tint)}

/* 1.1 the split */
.ln-brain{display:flex;flex-direction:column;align-items:center;gap:10px}
.ln-brain-all{border:0;background:none;padding:0;cursor:pointer;width:min(100%,280px);border-radius:28px;transition:scale .25s ease}
.ln-brain-all:hover{scale:1.02}
.ln-brain-all:focus-visible{outline:3px solid var(--action);outline-offset:6px}
.ln-brain-all img{width:100%;height:auto;display:block}
.ln-brain-cue{border:0;background:none;padding:6px 4px;cursor:pointer;color:var(--action);font:600 16px 'Work Sans',sans-serif;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.ln-brain-all[hidden],.ln-brain-cue[hidden]{display:none}
.ln-states{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;width:100%}
.ln-states[hidden]{display:none}
.ln-state{position:relative;display:grid;grid-template-columns:100px minmax(0,1fr);gap:14px;align-items:center;align-content:start;padding:14px 16px 14px 10px;border-radius:var(--r)}
.ln-state-bg{position:absolute;inset:0;border-radius:inherit;background:var(--k-tint);z-index:0}
.ln-state img{position:relative;z-index:2;width:100%;height:auto;display:block;transform-origin:50% 50%}
.ln-state-txt{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.ln-state p{margin:0;font-size:15.5px;line-height:1.5;color:var(--body);text-wrap:pretty}
.ln-skill strong{color:var(--k-ink);font-weight:600}
.ln-state p.ln-skill{text-wrap:wrap}
.ln-state .ln-ask{margin:0;font-style:italic;color:var(--k-ink)}
/* 2.1 / 3.1: the figure starts at the size it lands at in the Executive box. */
.ln-who .ln-brain-all{width:auto;border-radius:12px}
.ln-who .ln-brain-all img,.ln-who .ln-state img{width:76px;height:auto}
.ln-who .ln-state{grid-template-columns:76px minmax(0,1fr)}
.ln-again{align-self:flex-start}

/* 1.2 / 1.3 the reels */
.ln-reel-wrap{display:flex;flex-direction:column;gap:14px;min-width:0}
.ln-reel{position:relative;height:440px;overflow:hidden;border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--hair);overscroll-behavior:contain;outline-offset:3px}
.ln-reel[data-state="locked"]{cursor:pointer}
.ln-reel[data-state="free"]{overflow-y:auto}
.ln-reel:focus-visible{outline:3px solid var(--action)}
.ln-pane{position:relative;height:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:28px 26px;text-align:center;background:var(--k-tint)}
.ln-pane img{width:190px;height:auto;display:block}
.ln-pane-t{margin:0;max-width:42ch;font-size:15.5px;line-height:1.5;color:var(--ink);text-wrap:pretty;opacity:0;translate:0 10px;transition:opacity .35s ease,translate .35s ease}
.ln-pane[data-shown="yes"] .ln-pane-t{opacity:1;translate:0 0}
.ln-pane-t strong{color:var(--k-ink);font-weight:600}
.ln-pane-arrow{position:absolute;bottom:10px;left:50%;translate:-50% 0;font-size:22px;line-height:1;color:var(--k-ink);opacity:.7}
.ln-pane-arrow.up{bottom:auto;top:10px}
.ln-pane-arrow{cursor:pointer;padding:8px 14px;margin-bottom:-8px}
.ln-state:focus,.ln-step-k:focus{outline:none}
.ln-reel-bar{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center}
.ln-reel-bar .btn[hidden]{display:none}
.ln-reel-bar{flex-wrap:nowrap}
.ln-reel-bar .btn{flex:none;min-width:9.5em}
.ln-segs{flex:1;display:flex;gap:4px;min-width:0}
.ln-segs[hidden]{display:none}
.ln-seg{flex:1;height:44px;border:0;background:none;padding:19px 0;cursor:pointer}
.ln-seg span{display:block;height:6px;border-radius:3px;background:#D3DAE2;overflow:hidden}
.ln-seg i{display:block;height:100%;width:0;background:var(--action)}
.ln-seg:hover span{background:#C3CBD4}
.ln-seg:focus-visible{outline:2px solid var(--action);outline-offset:2px}
.ln-reel-hint{margin:0;font-size:15px;color:var(--muted)}
.ln-reel-hint[hidden]{display:none}
.ln-reel[data-state="still"]{height:auto;overflow:visible;background:none;box-shadow:none;display:flex;flex-direction:column;gap:10px}
.ln-reel[data-state="still"] .ln-pane{height:auto;border-radius:var(--r);padding:22px}
.ln-reel[data-state="still"] .ln-pane-arrow{display:none}
@media (prefers-reduced-motion:reduce){.ln-motion-only{display:none}}

/* 2.1 / 3.1 the expand cards */
.ln-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.ln-card{display:grid;grid-template-columns:76px minmax(0,1fr);column-gap:16px;row-gap:2px;align-items:center;align-content:start;background:var(--k-tint);border-radius:var(--r);padding:12px 18px 12px 10px}
.ln-card > img{grid-row:1 / span 3;width:76px;height:auto;align-self:start}
.ln-card > *:not(img){grid-column:2}
.ln-ask{margin:0;font-style:italic;font-size:16px;color:var(--k-ink)}
.ln-more{justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;border:0;background:none;cursor:pointer;color:var(--k-ink);font:600 15.5px 'Work Sans',sans-serif}
.ln-more::after,.ln-reveal-h::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;rotate:45deg;translate:0 -2px;transition:rotate .2s ease,translate .2s ease}
.ln-more[aria-expanded="true"]::after,.ln-reveal-h[aria-expanded="true"]::after{rotate:225deg;translate:0 2px}
.ln-more:hover{text-decoration:underline;text-underline-offset:3px}
.ln-card-t{margin:0 0 6px;font-size:16px;line-height:1.5;color:var(--ink);text-wrap:pretty}
.ln-card-t[hidden]{display:none}

/* 2.2 / 3.2 / 4.2 / 4.4 choices */
.ln-choices{display:flex;flex-direction:column;gap:10px}
.ln-choice{text-align:left;min-height:52px;padding:14px 18px;border:0;border-radius:var(--r);background:var(--surface);box-shadow:inset 0 0 0 2px transparent;cursor:pointer;font:500 16px/1.45 'Work Sans',sans-serif;color:var(--ink);transition:background .2s ease,box-shadow .2s ease}
.ln-choice:hover{background:var(--tint)}
.ln-choice[aria-pressed="true"]{background:var(--k-tint,var(--tint));box-shadow:inset 0 0 0 2px var(--k-dot,var(--action))}
.ln-fb{display:flex;flex-direction:column;gap:16px}
.ln-fb[hidden]{display:none}
.ln-pickstates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ln-pickstate{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px 14px;border:0;border-radius:var(--r);background:var(--surface);box-shadow:inset 0 0 0 2px transparent;cursor:pointer;font:600 15px 'Work Sans',sans-serif;color:var(--ink);transition:background .2s ease,box-shadow .2s ease}
.ln-pickstate:hover{background:var(--tint)}
.ln-pickstate img{width:80%;max-width:140px;height:auto;display:block}
.ln-pickstate[aria-pressed="true"]{background:var(--k-tint);box-shadow:inset 0 0 0 2px var(--k-dot)}
.ln-lines{display:flex;flex-direction:column;gap:14px}
.ln-line{display:flex;flex-direction:column;gap:12px;background:var(--surface);border-radius:var(--r);padding:18px 20px}
.ln-line-q{margin:0;font-weight:500;font-size:18px;line-height:1.45;color:var(--ink)}
.ln-hh{display:flex;gap:10px;flex-wrap:wrap}
.ln-hh .btn[aria-pressed="true"]{background:var(--action);color:#fff;box-shadow:none}
.ln-line .coach-says{background:#fff}

/* 2.3 breathe */
/* 19 Oct (Marc): the old circle. A dark dot fills the light circle on the
   breath in and shrinks on the breath out. Nothing beside it changes size
   when the button's label does: both columns are fixed width. */
.ln-breathe{display:flex;gap:24px;align-items:flex-end;justify-content:center}
.ln-br-left{flex:none;width:170px;display:flex;flex-direction:column;align-items:center;gap:12px}
.ln-circ{width:170px;height:170px;border-radius:50%;background:var(--tint);box-shadow:inset 0 0 0 1.5px #BFD3E6;display:flex;align-items:center;justify-content:center;cursor:pointer}
.ln-circ-dot{width:34%;height:34%;border-radius:50%;background:var(--action);scale:1;transition:scale 1s ease-in-out}
.ln-circ[data-phase="in"] .ln-circ-dot{scale:2.94;transition-duration:4.2s}
.ln-circ[data-phase="out"] .ln-circ-dot{scale:1;transition-duration:4.2s}
.ln-circ-cap{margin:0;min-height:1.5em;font-weight:600;font-size:16px;color:var(--ink);text-align:center}
.ln-br-left .btn{width:100%;white-space:normal;line-height:1.25}
.ln-br-fig{flex:none;position:relative;width:110px}
.ln-br-fig img{display:block;width:100%;height:auto;opacity:0;transition:opacity var(--br-x,1.6s) ease-in-out}
.ln-br-fig img + img{position:absolute;left:0;bottom:0}
.ln-br-fig img[data-on="yes"]{opacity:1}
.ln-breathe[data-instant] .ln-br-fig img{transition:none}
/* The state glow on 2.3 (16 Oct [MARC]; glow-only colors). It moves with the
   crossfade, one state per breath. */
.ln-br-fig{--gl:184,58,58;filter:drop-shadow(-6px 15px 24px rgba(var(--gl),.08)) drop-shadow(-6px 15px 53px rgba(var(--gl),.06))}
.ln-br-fig[data-gl="1"]{--gl:214,186,58}
.ln-br-fig[data-gl="2"],.ln-br-fig[data-gl="3"]{--gl:97,169,113}
.ln-breathe[data-instant] .ln-br-fig{transition:none}
/* 19 Oct (Marc): a very slight rise on each breath in, and a soft blur at
   the middle of each crossfade, so the change reads as one figure easing. */
.ln-br-fig{transform-origin:50% 100%;transition:scale var(--br-h,1s) ease-in-out,filter var(--br-x,1.6s) ease-in-out}
.ln-br-fig[data-rise="in"]{scale:1.015}
.ln-br-fig img{filter:blur(0)}
.ln-br-fig[data-blur] img{animation:lnSoft var(--br-x,8.4s) ease-in-out}
@keyframes lnSoft{0%,100%{filter:blur(0)}50%{filter:blur(1.6px)}}
@media (prefers-reduced-motion:reduce){.ln-br-fig{transition:none;scale:1!important}.ln-br-fig[data-blur] img{animation:none}}
@media (prefers-reduced-motion:reduce){.ln-circ-dot{transition:none!important}.ln-circ[data-phase] .ln-circ-dot{scale:1.8}}

/* 4.1 / 4.3 / 4.5 the steps (19 Oct, Marc) */
.ln-steps{display:flex;flex-direction:column;align-items:flex-start}
.ln-arrow{position:relative;width:44px;height:44px;margin-left:12px;border:0;padding:0;background:none;cursor:pointer;color:var(--action);transition:height .24s ease-out}
.ln-arrow[hidden]{display:none}
.ln-arrow i{position:absolute;left:50%;top:4px;bottom:6px;width:2.5px;margin-left:-1.25px;border-radius:2px;background:currentColor}
.ln-arrow i::after{content:"";position:absolute;left:50%;bottom:-1px;width:12px;height:12px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;translate:-50% 0;rotate:45deg;border-radius:0 0 2px 0}
.ln-arrow:not([data-done="yes"]):hover{color:#17578A}
.ln-arrow:not([data-done="yes"]){animation:lnNudge 1.8s ease-in-out infinite}
.ln-arrow:focus-visible{outline:3px solid var(--action);outline-offset:2px;border-radius:8px}
.ln-arrow[data-done="yes"]{height:56px;cursor:default;color:var(--k-dot);animation:none}
@keyframes lnNudge{0%,60%,100%{translate:0 0}30%{translate:0 4px}}
@media (prefers-reduced-motion:reduce){.ln-arrow{animation:none!important;transition:none}}
.ln-step{align-self:stretch;display:flex;flex-direction:column;gap:6px;background:var(--k-tint);border-radius:var(--r);padding:16px 20px 18px}
.ln-step[hidden]{display:none}
.ln-step-k{margin:0;font:600 12px 'Work Sans',sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--k-ink)}
.ln-step h2:focus{outline:none}
.ln-step p:not(.ln-step-k){margin:0;font-size:16px;line-height:1.5;color:var(--ink);text-wrap:pretty}
.ln-steps + .ln-coach{margin-top:4px}

/* 4.3 reveals, 4.5 moves, 4.6 recap */
.ln-reveals,.ln-moves,.ln-recap{display:flex;flex-direction:column;gap:10px}
.ln-reveal{background:var(--k-tint);border-radius:var(--r)}
.ln-reveal-h{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:12px 20px;border:0;background:none;cursor:pointer;text-align:left;font:600 18px 'Work Sans',sans-serif;color:var(--ink)}
.ln-reveal-h::after{color:var(--k-ink)}
.ln-reveal-b{display:flex;flex-direction:column;gap:10px;padding:0 20px 18px}
.ln-reveal-b[hidden]{display:none}
.ln-reveal-b p,.ln-move p,.ln-recap p{margin:0;font-size:16px;line-height:1.5;color:var(--ink);text-wrap:pretty}
.ln-move{display:flex;flex-direction:column;gap:4px;background:var(--k-tint);border-radius:var(--r);padding:14px 18px}
.ln-moves .ln-move{background:#E6F1E9}
.ln-recap-row{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:center;background:var(--k-tint);border-radius:var(--r);padding:10px 18px 10px 8px}
.ln-recap-row img{width:100%;height:auto;display:block}
.ln-recap-row > div{display:flex;flex-direction:column;gap:3px;min-width:0}
.ln-recap-h strong{font-weight:600;color:var(--ink)}
.ln-recap-h em{color:var(--k-ink)}
.ln-door{align-self:flex-start}

/* ---- the four checks: the morning panel (19 Oct, Marc, 3a) ----
   Header, footer and eyebrow stay on the light ground. The title, scene and
   choices sit in one panel, the 7:40 ground, which darkens over 1.2s on
   arrival (data-lit; js/learn.js). Dark means you're back in the morning,
   and it's your turn. The Coach wears his paper sticker on dark; the brain
   buttons stay on paper so the line art holds. */
.ln-morning{display:flex;flex-direction:column;gap:18px;border-radius:20px;padding:22px 22px 24px;background:var(--ground)}
.ln-morning h1.screen-title{margin:0}
.ln-morning[data-fading],.ln-morning[data-fading] *{transition:background-color 1.2s ease-in-out,color 1.2s ease-in-out,box-shadow 1.2s ease-in-out,filter 1.2s ease-in-out !important}
.ln-morning[data-lit]{background:var(--bookend)}
.ln-morning[data-lit] h1.screen-title,.ln-morning[data-lit] .ln-q,.ln-morning[data-lit] .ln-line-q,.ln-morning[data-lit] .coach-t{color:var(--bookend-ink)}
.ln-morning[data-lit] p.screen-body{color:var(--bookend-soft)}
.ln-morning[data-lit] [data-k="exec"]{--k-tint:#24392C;--k-dot:#7CC08C;--k-ink:#A9DDB4}
.ln-morning[data-lit] [data-k="emo"]{--k-tint:#3A3222;--k-dot:#E0B862;--k-ink:#EBCF8E}
.ln-morning[data-lit] [data-k="surv"]{--k-tint:#3D2731;--k-dot:#D98AA0;--k-ink:#EBB3C3}
.ln-morning[data-lit] .ln-choice{background:var(--bookend-surface);color:var(--bookend-ink)}
.ln-morning[data-lit] .ln-choice:hover{background:#323850}
.ln-morning[data-lit] .ln-choice[aria-pressed="true"]{background:var(--k-tint,#2E3549);box-shadow:inset 0 0 0 2px var(--k-dot,#7FB6E0)}
.ln-morning .ln-pickstate{background:#F4F1EA}
.ln-morning .ln-pickstate:hover{background:#FFFFFF}
.ln-morning[data-lit] .ln-pickstate[aria-pressed="true"]{background:#FFFFFF;box-shadow:inset 0 0 0 3px var(--k-dot)}
.ln-morning[data-lit] .ln-line{background:var(--bookend-surface)}
.ln-morning[data-lit] .ln-hh .btn{background:transparent;color:#C3C9D8;box-shadow:inset 0 0 0 1.5px #3A4158}
.ln-morning[data-lit] .ln-hh .btn:hover{background:#323850;color:var(--bookend-ink)}
.ln-morning[data-lit] .ln-hh .btn[aria-pressed="true"]{background:#2E86C8;color:#0F1420;box-shadow:none}
.ln-morning[data-lit] .ln-hh .btn:focus-visible{outline:3px solid #F4F1EA;outline-offset:3px}
.ln-morning[data-lit] .coach-says{background:var(--bookend-surface)}
.ln-morning[data-lit] .ln-line .coach-says{background:var(--bookend)}
.ln-morning[data-lit] .coach-k{color:#D79AB3}
.ln-morning[data-lit] .coach-fig,.ln-morning[data-lit] .ln-check-coach{filter:drop-shadow(1.5px 0 0 #F4F1EA) drop-shadow(-1.5px 0 0 #F4F1EA) drop-shadow(0 1.5px 0 #F4F1EA) drop-shadow(0 -1.5px 0 #F4F1EA)}
/* 1b (Marc): on a phone, a small, still Coach beside the title on 2.2 and 3.2. */
.ln-check-head{display:grid;grid-template-columns:minmax(0,1fr) 52px;gap:14px;align-items:end}
.ln-check-coach{width:52px;height:auto;display:block}
@media (max-width:760px){.ln-morning{padding:18px 16px 20px;margin:0 -6px;gap:16px}}

/* ---- desktop ---- */
@media (min-width:1000px){
  /* 19 Oct (Marc): the 30 Sept scale-up went a size too far. Every screen
     (module-wide, Marc's call) is drawn at 90%, with the column widened so
     its edges still line up with the header, and the top padding cut so
     more sits above the fold. The header and footer stay full size. */
  .screen{zoom:.9;max-width:1351px;padding:24px 53px 52px}
  .ln-split{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:64px}
  .ln-split-even{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}
  .ln-split-sticky .ln-fig{position:sticky;top:12px;align-self:start}
  .ln-col,.ln-stack,.ln-narrow{gap:24px}
  .ln-fig img{width:300px}
  .ln-fig-child img{width:220px}
  .ln-q{font-size:24px}
  .ln-check-head{display:block}
  .ln-check-coach{display:none}
  .ln-morning{padding:32px 36px 36px;gap:24px;border-radius:24px}
  .screen [data-k] h2,.ln-move h2{font-size:24px}

  .ln-parts{gap:14px}
  .ln-parts li{font-size:22px}
  .ln-parts li > span[data-flat]{grid-template-columns:36px minmax(0,1fr)}
  .ln-review button{min-height:68px;font-size:21px;padding:14px 22px;grid-template-columns:36px minmax(0,1fr) auto}
  .ln-review .r{font-size:17px}
  .ln-tip{padding:20px 24px}
  .ln-tip-k{font-size:13px}
  .ln-tip p:not(.ln-tip-k){font-size:19px}

  .ln-brain-all{width:440px}
  .ln-brain-cue{font-size:19px}
  .ln-states{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
  .ln-state{grid-template-columns:minmax(0,1fr);align-items:start;gap:18px;padding:22px 24px 26px}
  .ln-state img{width:min(100%,280px);justify-self:center}
  .ln-state p{font-size:18px}
  .ln-state .ln-ask{font-size:19px}
  .ln-who .ln-state{grid-template-columns:minmax(0,1fr)}
  .ln-who .ln-brain-all img,.ln-who .ln-state img{width:auto;height:250px}
  .ln-who-child .ln-brain-all img,.ln-who-child .ln-state img{height:210px}

  .ln-reel{height:620px}
  .ln-pane{gap:16px;padding:40px 44px}
  .ln-pane img{width:300px}
  .ln-pane-t{font-size:19px}
  .ln-reel-hint{font-size:17px}


  .ln-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
  .ln-card{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;row-gap:6px;padding:26px 24px 18px}
  .ln-card > img{grid-row:auto;width:auto;height:260px;margin-bottom:8px}
  .ln-card > *:not(img){grid-column:1}
  .ln-card-child > img{height:200px;margin-top:60px}
  .ln-ask{font-size:19px}
  .ln-more{justify-self:center;font-size:17px}
  .ln-card-t{font-size:18px;text-align:left;justify-self:stretch;margin-top:4px}

  .ln-choice{font-size:19px;padding:18px 22px;min-height:64px}
  .ln-pickstate{font-size:18px;padding:16px 8px 18px}
  .ln-line{padding:22px 26px;gap:16px}
  .ln-line-q{font-size:22px}

  .ln-br-left{width:300px;gap:16px}
  .ln-circ{width:300px;height:300px}
  .ln-circ-cap{font-size:19px}
  .ln-br-fig{width:200px}
  .ln-breathe{gap:40px}
  /* 19 Oct (Marc): centered on the text column, not hung from its top. */
  #lrn-23 .ln-breathe{align-self:center;margin-top:24px}
  /* 19 Oct (Marc): the parent's head level with the top of the title. */
  #lrn-46 .ln-fig{margin-top:48px}

  .ln-arrow{margin-left:16px}
  .ln-arrow[data-done="yes"]{height:64px}
  .ln-step{padding:20px 26px 22px;gap:8px}
  .ln-step-k{font-size:13px}
  .ln-step p:not(.ln-step-k){font-size:19px}
  .ln-reveal-h{font-size:22px;min-height:68px;padding:14px 24px}
  .ln-reveal-b{padding:0 24px 22px}
  .ln-reveal-b p,.ln-move p,.ln-recap p{font-size:19px}
  .ln-move{padding:18px 24px}
  .ln-recap-row{grid-template-columns:96px minmax(0,1fr);padding:12px 22px 12px 10px}
  .ln-recap-h{font-size:21px}
}

/* 21 Oct [MARC]: on a phone, 4.1 / 4.3 / 4.5 put a small figure beside the
   headline instead of under the moves, where it kept moving as boxes opened. */
@media (max-width:760px){
  #lrn-41 .ln-split,#lrn-43 .ln-split,#lrn-45 .ln-split{position:relative}
  #lrn-41 .ln-fig,#lrn-43 .ln-fig,#lrn-45 .ln-fig{position:absolute;top:0;right:0;width:64px}
  #lrn-41 .ln-fig img,#lrn-43 .ln-fig img,#lrn-45 .ln-fig img{width:64px}
  #lrn-41 .ln-col>.eyebrow,#lrn-43 .ln-col>.eyebrow,#lrn-45 .ln-col>.eyebrow,
  #lrn-41 h1.screen-title,#lrn-43 h1.screen-title,#lrn-45 h1.screen-title{padding-right:76px}
}