/* The Educational Variety · styles only its pages use, loaded after /shared/deep-dive.css. */

/* which word (4 · The educational variety): one row per telling, in the order each was set down,
   with two small marks saying whether it says "experience", "awakening" or both. On a
   phone the year and source sit above the words and the marks under them; from 900px the marks sit
   at the right of each row. The marks are words, not colour alone, so they read in print too. */
.aw-log{list-style:none;margin:22px 0 0;padding:0;border-top:2px solid var(--ink)}
.aw-log li{display:grid;grid-template-columns:3.6em minmax(0,1fr);grid-template-areas:"yr say" ". word";gap:8px 14px;padding:16px 0;border-bottom:1px solid var(--line-2)}
.aw-yr{grid-area:yr;margin:0;font:400 calc(24px*(1 + (var(--ts,1) - 1)*0.8))/1.1 var(--display);color:var(--accent)}
.aw-say{grid-area:say;margin:0;font-size:calc(17px*var(--ts,1));line-height:1.45}
.aw-src{display:block;margin-bottom:4px;font:400 calc(12px*var(--ts,1))/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.aw-word{grid-area:word;display:flex;flex-wrap:wrap;gap:6px;margin:0}
.aw-w{padding:4px 10px;border:1.5px dashed var(--line-2);border-radius:999px;font:400 calc(13px*var(--ts,1))/1 var(--mono);color:var(--ink-2)}
.aw-w.on{border-style:solid;border-color:var(--accent);background:var(--accent);color:var(--paper)}
@media (min-width:900px){
  .aw-log li{grid-template-columns:4em minmax(0,1fr) 15em;grid-template-areas:"yr say word";align-items:baseline}
  .aw-word{justify-content:flex-end}
}
@media print{
  .aw-log li{break-inside:avoid}
  .aw-w.on{background:none;color:var(--ink);border-width:2px}
  .aw-w:not(.on){display:none}
}

/* the rain (hero of 1 · The book Ebby brought, drawn by docs/drawing/awakening-the-book-ebby-brought.py):
   the streaks in each window run down one window's height and repeat, the drawing setting that
   height as --aw-h on the group. One slow movement, stilled for anyone whose device asks for
   reduced motion; the drawing without this stylesheet is the still frame. */
@keyframes aw-fall{from{transform:translateY(0)}to{transform:translateY(var(--aw-h))}}
.hero .aw-rain{animation:aw-fall 2.6s linear infinite}
@media (prefers-reduced-motion:reduce){.hero .aw-rain{animation:none}}

/* the tape reels (hero of 2 · Hot flash, drawn by docs/drawing/awakening-hot-flash.py): both turn
   clockwise, slowly, about the centres the drawing sets inline. Stilled for reduced motion. */
@keyframes aw-turn{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.hero .aw-reel{animation:aw-turn 9s linear infinite}
@media (prefers-reduced-motion:reduce){.hero .aw-reel{animation:none}}

/* seven tellings (2 · Hot flash): the same rows as "Which word" above, with six marks instead of
   two, and a line under each quotation saying what the telling calls the experience. A filled
   mark: the telling has it; outlined: only as a likeness; faint: not at all. In print the faint
   marks are dropped and the outlined ones keep their dashes. */
.aw-calls{display:block;margin-top:6px;font:400 calc(14px*var(--ts,1))/1.4 var(--sans);font-style:italic;color:var(--ink-2)}
.aw-w.half{border-style:solid;border-color:var(--accent);color:var(--accent)}
.aw-six .aw-word{max-width:21em}
@media (min-width:900px){
  .aw-six li{grid-template-columns:4em minmax(0,1fr) 19em}
}
@media print{
  .aw-w.half{display:inline-block;border-style:dashed;color:var(--ink)}
}

/* how each one changed (3 · Having had a spiritual experience): a strip of twenty-nine marks, one
   per story in the book's order, then the stories in four groups, each title with the line the call
   rests on. The marks: filled, a moment; half filled, a moment and slowly; outlined, slowly;
   faint, sudden or slow not said. The strip and the keys are decoration (the groups say it in words),
   so print leaves them out. */
.aw-tally{margin-top:24px}
.aw-strip{display:grid;grid-template-columns:repeat(29,minmax(0,1fr));gap:3px;max-width:760px}
.aw-strip span,.aw-key{display:block;aspect-ratio:2/3;border:1.5px solid var(--accent);border-radius:3px}
.aw-strip .s,.aw-key.s{background:var(--accent)}
.aw-strip .b,.aw-key.b{background:linear-gradient(to top,var(--accent) 50%,transparent 50%)}
.aw-strip .n,.aw-key.n{border:1.5px dashed var(--line-2)}
.aw-strip-cap{margin:8px 0 0;font:400 calc(12px*var(--ts,1))/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.aw-sort{display:grid;gap:26px;margin-top:26px}
.aw-grp{border-top:2px solid var(--ink);padding-top:12px}
.aw-grp h3{display:flex;align-items:center;gap:10px;margin:0 0 10px;font:400 calc(22px*(1 + (var(--ts,1) - 1)*0.9))/1.2 var(--display)}
.aw-key{width:14px;flex:none}
.aw-n{margin-left:auto;font:400 calc(13px*var(--ts,1))/1 var(--mono);color:var(--ink-2)}
.aw-grp ul{list-style:none;margin:0;padding:0}
.aw-grp li{padding:9px 0;border-bottom:1px solid var(--line-2);font-size:calc(16px*var(--ts,1));line-height:1.45;font-style:italic}
.aw-st{display:block;font:700 calc(13px*var(--ts,1))/1.4 var(--sans);font-style:normal;letter-spacing:.04em;color:var(--ink)}
.aw-close{display:inline-block;margin-right:4px;padding:1px 7px;border:1px solid var(--line-2);border-radius:999px;font:400 calc(11px*var(--ts,1))/1.4 var(--mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);vertical-align:1px}
.aw-grp-note{margin:0 0 8px;font-size:calc(16px*var(--ts,1));line-height:1.5}
.aw-plain{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}
.aw-plain li{font-style:normal}
.aw-plain .aw-st{font-weight:400;font-size:calc(14px*var(--ts,1))}
@media (min-width:900px){
  .aw-sort{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
}
@media print{
  .aw-tally,.aw-key{display:none}
  .aw-grp,.aw-grp li{break-inside:avoid}
}

/* what Bill took (1 · The book Ebby brought): the shared then-and-later rows, but the later column
   quotes Bill from three different years, so each cell keeps its small label on wide screens too
   (the shared stylesheet hides them there, since most pieces' columns need no more than the head). */
@media (min-width:900px){
  .aw-cmp .cmp-k{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal}
}

/* the Go deeper pull quotes: several of this piece's have a long word ("discriminates," "…probably")
   that is wider than a third of the page at 40px, so between 900px and about 1250px the size follows
   the width and the word stays in its column. */
@media (min-width:900px){.dd .typeset .big{font-size:calc(min(40px,3.2vw)*(1 + (var(--ts,1) - 1)*0))}}

/* the signal lamp (hero of 5 · Not conscious of ever having had one, drawn by
   docs/drawing/awakening-not-conscious.py): its green glow flickers a little, as an oil lamp's does,
   never dimmer than three-quarters, a few dips in a cycle of a little over three seconds. Stilled for
   anyone whose device asks for reduced motion; the drawing without this stylesheet is the still frame. */
@keyframes aw-flicker{0%,100%{opacity:1}18%{opacity:.82}31%{opacity:.95}52%{opacity:.78}70%{opacity:.97}84%{opacity:.86}}
.hero .aw-lamp{animation:aw-flicker 3.2s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.hero .aw-lamp{animation:none}}

/* how they knew (5 · Not conscious of ever having had one): one card per member's line, in the order
   the Grapevine printed them. Each card has its town and month along the top like a postmark, the
   line, who wrote it, and a small label for when the change came; the two that name a moment are
   filled. One column on a phone, two from 700px, four from 1100px. The labels are words, so they read
   in print too. */
.aw-mail{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px}
.aw-mail li{display:flex;flex-direction:column;gap:10px;padding:16px 18px 16px;background:var(--card);border:1px solid var(--line-2);border-radius:4px}
.aw-pm{display:flex;justify-content:space-between;gap:10px;margin:0;padding-bottom:8px;border-bottom:1.5px dashed var(--line-2);font:400 calc(12px*var(--ts,1))/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.aw-pm span+span{color:var(--ink-2)}
.aw-ml{margin:0;font-size:calc(18px*var(--ts,1));line-height:1.5;font-style:italic}
.aw-by{margin:0;font-size:calc(14px*var(--ts,1));line-height:1.45;color:var(--ink-2)}
.aw-how{align-self:flex-start;margin:auto 0 0;padding:4px 10px;border:1.5px solid var(--accent);border-radius:999px;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.aw-how.now{background:var(--accent);color:var(--paper)}
@media (min-width:700px){.aw-mail{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.aw-mail{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media print{
  .aw-mail{display:block}
  .aw-mail li{break-inside:avoid;margin-bottom:10px}
  .aw-how.now{background:none;color:var(--ink);border-width:2.5px}
}

/* the stars (hero of 6 · Beyond the 4th Dimension, drawn by
   docs/drawing/awakening-beyond-the-fourth-dimension.py): three groups of stars in the window, each
   dimming to two-fifths and back on its own slow cycle, so they twinkle out of step. Stilled for
   reduced motion; the drawing without this stylesheet is the still frame. */
@keyframes aw-twinkle{0%,100%{opacity:1}50%{opacity:.4}}
.hero .aw-tw1{animation:aw-twinkle 3.6s ease-in-out infinite}
.hero .aw-tw2{animation:aw-twinkle 4.7s ease-in-out -1.5s infinite}
.hero .aw-tw3{animation:aw-twinkle 5.9s ease-in-out -3s infinite}
@media (prefers-reduced-motion:reduce){.hero .aw-tw1,.hero .aw-tw2,.hero .aw-tw3{animation:none}}

/* nearly every element (6 · Beyond the 4th Dimension): seven lines of the letter, each with a numbered
   pin, beside what James's book says. On a phone each line comes on its own slip of paper with James
   under it. From 900px the lines make one sheet down the left, headed like the letter, with James's
   words across from each in the right column; the rows line up because each item's two parts share
   the list's grid (display:contents). */
.aw-annot{list-style:none;margin:24px 0 0;padding:0;border-top:2px solid var(--ink)}
.aw-annot li{display:grid;gap:8px;padding:16px 0;border-bottom:1px solid var(--line-2)}
.aw-from{margin:0;padding:12px 16px;background:var(--card);border:1px solid var(--line-2);border-radius:3px;font:italic 400 calc(19px*var(--ts,1))/1.5 var(--serif)}
.aw-pin{display:inline-flex;align-items:center;justify-content:center;width:1.5em;height:1.5em;margin-right:8px;border:1.5px solid var(--accent);border-radius:50%;font:400 calc(12px*var(--ts,1))/1 var(--mono);font-style:normal;color:var(--accent);vertical-align:3px}
.aw-to p{margin:0;font-size:calc(17px*var(--ts,1));line-height:1.5}
.aw-to .aw-kt{margin-bottom:4px;font:700 calc(12px*var(--ts,1))/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.aw-ahead .aw-from{display:flex;flex-direction:column;gap:6px}
.aw-lt{font:400 calc(12px*var(--ts,1))/1.4 var(--mono);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.aw-colhead{display:none}
@media (min-width:900px){
  .aw-annot{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:40px;border-top:none}
  .aw-annot li{display:contents}
  .aw-from{border-block:none;border-radius:0;padding:14px 22px}
  .aw-ahead .aw-from{border-top:1px solid var(--line-2);border-radius:3px 3px 0 0;padding-top:20px}
  .aw-annot li:last-child .aw-from{border-bottom:1px solid var(--line-2);border-radius:0 0 3px 3px;padding-bottom:22px}
  .aw-to{padding:14px 0;border-bottom:1px solid var(--line-2)}
  .aw-colhead{display:block;align-self:end;padding:0 0 10px;border-bottom:2px solid var(--ink);font:700 calc(12px*var(--ts,1))/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
}
@media print{
  .aw-annot li{break-inside:avoid}
}

/* the pipe smoke (hero of 7 · Spiritus contra spiritum, drawn by
   docs/drawing/awakening-spiritus-contra-spiritum.py): the thread of smoke sways a little to the
   left and rises, then settles back, on a slow six-second cycle, about the bowl the drawing sets
   inline. Never dimmer than four-fifths. Stilled for reduced motion; the drawing without this
   stylesheet is the still frame. */
@keyframes aw-sway{0%,100%{transform:translate(0,0) scaleY(1);opacity:.85}50%{transform:translate(-5px,-6px) scaleY(1.05);opacity:1}}
.hero .aw-smoke{animation:aw-sway 6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.hero .aw-smoke{animation:none}}

/* the question by mail (7 · Spiritus contra spiritum): one card per letter, in the order written.
   Each card has its date and route along the top, who wrote to whom, the line, and where it is
   quoted from. Letters written in America lean left and those from Zurich lean right; from 900px
   they sit in two lanes either side of a dashed line, with a short dash out to it, the lanes
   named above, and a card that answers across the line starts a little before the one it follows
   ends, so the two lanes read as one conversation. The last row, Jung's death, sits across the line. The routes say in words where
   each letter went, so the lanes need no colour and read in print too. */
.aw-post{margin-top:24px}
.aw-lane{display:none}
.aw-mailbag{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.aw-mailbag li{display:flex;flex-direction:column;gap:6px;padding:14px 16px;background:var(--card);border:1px solid var(--line-2);border-radius:4px}
.aw-mailbag .aw-us{margin-right:9%;border-left:3px solid var(--accent)}
.aw-mailbag .aw-ch{margin-left:9%;border-right:3px solid var(--ink-2)}
.aw-route{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 10px;margin:0;padding-bottom:6px;border-bottom:1.5px dashed var(--line-2);font:400 calc(12px*var(--ts,1))/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.aw-route span{white-space:nowrap}
.aw-route span+span{color:var(--ink-2);text-align:right}
.aw-who{margin:0;font:700 calc(14px*var(--ts,1))/1.4 var(--sans);color:var(--ink)}
.aw-ln{margin:0;font:italic 400 calc(18px*var(--ts,1))/1.5 var(--serif)}
.aw-via{margin:0;font-size:calc(13px*var(--ts,1));line-height:1.4;color:var(--ink-2)}
.aw-mailbag .aw-end{background:none;border:none;border-top:2px solid var(--ink);border-radius:0;padding:14px 0 0;text-align:center}
.aw-end .aw-route{justify-content:center;border-bottom:none;padding-bottom:0}
@media (min-width:900px){
  .aw-post{position:relative}
  .aw-lane{display:block;position:absolute;top:0;margin:0;font:700 calc(12px*var(--ts,1))/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
  .aw-lane.aw-us{left:0}
  .aw-lane.aw-ch{right:0;color:var(--ink-2)}
  .aw-mailbag{position:relative;padding-top:34px;gap:14px}
  .aw-mailbag::before{content:"";position:absolute;left:50%;top:30px;bottom:56px;border-left:1.5px dashed var(--line-2)}
  .aw-mailbag .aw-us,.aw-mailbag .aw-ch{position:relative;width:calc(50% - 36px);margin:0}
  .aw-mailbag .aw-ch{align-self:flex-end}
  .aw-mailbag .aw-us::after,.aw-mailbag .aw-ch::after{content:"";position:absolute;top:22px;width:36px;border-top:1.5px dashed var(--accent)}
  .aw-mailbag .aw-us::after{right:-37px}
  .aw-mailbag .aw-ch::after{left:-37px;border-color:var(--ink-2)}
  .aw-mailbag .aw-us+.aw-ch,.aw-mailbag .aw-ch+.aw-us{margin-top:-44px}
  .aw-mailbag .aw-end{position:relative;background:var(--band)}
}
@media print{
  .aw-mailbag{display:block}
  .aw-mailbag li{break-inside:avoid;margin:0 0 10px}
  .aw-mailbag .aw-us,.aw-mailbag .aw-ch{width:auto;margin-left:0;margin-right:0}
  .aw-mailbag::before,.aw-mailbag li::after,.aw-lane{display:none}
}

/* the mist (hero of Legacy, drawn by docs/drawing/awakening-legacy.py): two bands of mist along the
   foot of the wall drift sideways and back, out of step, each a little over a quarter of a minute.
   Stilled for reduced motion; the drawing without this stylesheet is the still frame. */
@keyframes aw-drift{0%,100%{transform:translateX(0)}50%{transform:translateX(42px)}}
.hero .aw-mist{animation:aw-drift 18s ease-in-out infinite}
.hero .aw-mist2{animation-duration:24s;animation-direction:reverse}
@media (prefers-reduced-motion:reduce){.hero .aw-mist{animation:none}}

/* measured (Legacy): one card per study, in the order published. Each card has its year and how
   many people it studied, who did it, what they asked, what they found, and, below a dashed rule,
   what to keep in mind about it. One column on a phone, two from 900px. */
.aw-study{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px}
.aw-study li{display:flex;flex-direction:column;gap:8px;padding:16px 18px;background:var(--card);border:1px solid var(--line-2);border-top:3px solid var(--accent);border-radius:4px}
.aw-sy{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0}
.aw-sy b{font:400 calc(26px*(1 + (var(--ts,1) - 1)*0.7))/1 var(--display);color:var(--accent)}
.aw-sy span{font:400 calc(12px*var(--ts,1))/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);text-align:right}
.aw-sq{margin:0;font:700 calc(14px*var(--ts,1))/1.45 var(--sans)}
.aw-sf{margin:0;font-size:calc(17px*var(--ts,1));line-height:1.5}
.aw-sc{margin:auto 0 0;padding-top:8px;border-top:1px dashed var(--line-2);font-size:calc(14px*var(--ts,1));line-height:1.45;font-style:italic;color:var(--ink-2)}
@media (min-width:900px){.aw-study{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}}
@media print{
  .aw-study{display:block}
  .aw-study li{break-inside:avoid;margin-bottom:10px}
}

/* the dust (hero of the entrance, A spiritual awakening, drawn by docs/drawing/awakening-lobby.py):
   two scatterings of dust in the light from the landing window drift up and sideways and back, out
   of step, on nine- and twelve-second cycles, dimming a little on the way. Never below 0.4.
   Stilled for reduced motion; the drawing without this stylesheet is the still frame. */
@keyframes aw-dust{0%,100%{transform:translate(0,0);opacity:.7}50%{transform:translate(7px,-12px);opacity:.4}}
.hero .aw-mote1{animation:aw-dust 9s ease-in-out infinite}
.hero .aw-mote2{animation:aw-dust 12s ease-in-out infinite reverse}
@media (prefers-reduced-motion:reduce){.hero .aw-mote1,.hero .aw-mote2{animation:none}}