/* The memory, walked: a sample of what someone learned over the years, drawn as the app draws Memory (DESIGN.md, "The graph",
   "Walking while reading"). otai's window in Sera, the evening, when one studies, set in the Alba page: around a note, the
   notes it touches; a walk from one to the next; a note opened and read. walk.js lays it out and moves it. */

/* ---------- the section: the proof's rhythm, a heading over the whole width and the words over the window ---------- */
.memory { padding: 2vh var(--gutter) clamp(88px, 13vh, 140px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: clamp(48px, 8vh, 88px); }
.memory-copy { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; align-items: baseline; }
.memory-copy h2 { grid-column: 1 / span 6; } /* the words beside the heading, on its first line's baseline, as the principles stand */
.memory-copy h2 > span { display: block; } /* two clauses, two lines, as the proof's heading */
.memory-copy .reading { grid-column: 7 / span 5; max-width: 42ch; }
.walkbox { grid-column: 1 / -1; display: grid; gap: 18px; }
html:not(.js) .walkbox { display: none; } /* the walk is drawn by script; without it the words above say it */
.walk-cap .by-touch { display: none; }

/* ---------- the window: its own night, the app's two lights, grain so the dark never bands (painted in walk.js) ---------- */
.walk {
  --r-work: #8fa8ff; --r-personal: #ffb89a; --quote-line: rgba(217, 142, 122, .85);
  position: relative; margin: 0; border-radius: 12px; overflow: hidden; isolation: isolate; background: var(--plum-900); color: var(--ink);
  box-shadow: 0 44px 90px -34px rgba(28, 20, 32, .55), 0 14px 30px -16px rgba(28, 20, 32, .4);
  font: 400 15px/1.45 var(--sans);
}
.walk-sky { position: absolute; z-index: -1; left: -10px; top: -10px; width: calc(100% + 20px); height: calc(100% + 20px); pointer-events: none; }
.walk-bar { position: relative; display: flex; align-items: center; height: 44px; padding: 0 16px; }
.walk .lights { --dot: rgba(243, 236, 239, .14); }
.walk .places { position: absolute; left: 50%; translate: -50% 0; display: flex; gap: 40px; font: 400 13px/1 var(--sans); color: var(--ink-3); }
.walk .places .on { color: var(--ink); }
.walk-stage { position: relative; height: clamp(460px, 61vh, 560px); }
.walk-foot { position: relative; display: flex; justify-content: center; align-items: center; height: 46px; }
.walk-foot .act { font-size: 13px; color: var(--ink-3); }
.walk-foot .act .key { color: inherit; }

/* ---------- the graph, in the app's numbers ---------- */
.walk-graph { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; font-family: var(--sans); -webkit-user-select: none; user-select: none; transition: opacity .35s var(--settle); }
.wk-edge { stroke: var(--line-strong); stroke-width: 1.1; fill: none; transition: stroke .25s var(--settle), stroke-width .25s var(--settle); }
.wk-edge.on { stroke: color-mix(in srgb, var(--ink-2) 72%, transparent); stroke-width: 1.6; }
.wk-edge.ded { stroke-dasharray: 4 4; }
.wk-edge.sug { stroke: var(--bridge); stroke-width: 1.4; stroke-dasharray: 3 5; animation: wk-flow 1.6s linear infinite; }
.wk-edge.nn, .wk-edge.far { stroke-width: .8; }
@keyframes wk-flow { to { stroke-dashoffset: -16; } }

.wk-node { cursor: pointer; outline: none; }
.wk-hit { fill: transparent; }
/* One ring per note, at the size of its place: 9 in the middle, 6.5 around it (7.5 picked), 3 beyond; smaller while reading. */
.wk-core, .wk-halo, .wk-ring, .wk-pick circle { transform-box: fill-box; transform-origin: center; }
.wk-core { fill: var(--bg); stroke: var(--rc); stroke-width: 1.6px; vector-effect: non-scaling-stroke; scale: .722; transition: scale .35s var(--settle), fill .35s var(--settle); }
.wk-core.confirmed { fill: var(--rc); }
.wk-core.deduced { stroke-dasharray: 2.4 2.2; }
.wk-node.on .wk-core { scale: .833; }
.is-focus .wk-core { scale: 1; stroke-width: 2px; }
.is-far .wk-core { scale: .333; fill: var(--rc); stroke: none; }
.wk-halo { opacity: 0; pointer-events: none; transition: opacity .5s var(--settle); }
.is-focus .wk-halo { opacity: 1; animation: wk-glow 5s ease-in-out infinite; }
.wk-ring { fill: none; stroke: var(--ink); stroke-width: 1; opacity: 0; scale: .8; pointer-events: none; transition: opacity .3s var(--settle), scale .3s var(--settle); }
.walk.press .is-focus .wk-ring, .is-focus:focus-visible .wk-ring { opacity: .9; scale: 1; }
.walk.press .is-focus .wk-core, .is-focus:focus-visible .wk-core { scale: 1.18; }
.wk-node.ignite .wk-core { animation: wk-ignite .6s var(--settle) backwards; }
.wk-node.ignite .wk-halo { animation: wk-glow 5s ease-in-out infinite, wk-halo-in .8s var(--settle) backwards; }
.wk-node.arrive .wk-core { animation: wk-dot-in .5s var(--settle) backwards; }
@keyframes wk-glow { 50% { transform: scale(1.14); } }
@keyframes wk-ignite { from { transform: scale(.4); opacity: .3; } }
@keyframes wk-halo-in { from { transform: scale(.3); opacity: 0; } }
@keyframes wk-dot-in { from { transform: scale(1.7); opacity: .6; } }

/* The pick: one soft disc of the note's realm, under its ring, gliding from note to note (walk.js moves it). */
.wk-pick { pointer-events: none; }
.wk-pick circle { fill: var(--pc, var(--r-personal)); opacity: .16; transition: scale .35s var(--settle); }

/* Words: a 6px halo in the night under every one; the name in the middle in Bodoni over its kind, the rest in Hanken. */
.wk-lab text { paint-order: stroke; stroke: var(--bg); stroke-width: 6px; stroke-linejoin: round; }
.wk-fl, .wk-nl { opacity: 0; transition: opacity .15s var(--settle); }
.is-focus .wk-fl, .is-near .wk-nl { opacity: 1; transition: opacity .3s var(--settle) .65s; } /* a label waits for its note to land */
.walk-graph.hush .wk-fl, .walk-graph.hush .wk-nl { opacity: 0; transition: opacity .15s var(--settle); }
.wk-fl.halo { stroke-width: 8px; stroke-opacity: .6; fill-opacity: 0; } /* over the note's own glow a full halo reads as a smudge */
.wk-fl:not(.halo) { stroke: none; } /* WebKit draws a tracked line glyph by glyph: the halo is a layer of its own (as in the app) */
.wk-fname { font: 400 24px var(--display); fill: var(--ink); }
.wk-fkind { font-size: 11px; letter-spacing: .08em; fill: var(--ink-3); }
.wk-frealm { font-size: 12px; letter-spacing: 0; }
.wk-rel { font-size: 12px; fill: var(--ink-3); }
.wk-name { font-size: 15px; fill: var(--ink-2); transition: fill .2s; }
.wk-node.on .wk-name { fill: var(--ink); font-weight: 500; }
.wk-node.sug .wk-rel { font: italic 400 14px var(--text); fill: var(--bridge); }
.wk-rl, .wk-farname { opacity: 0; pointer-events: none; transition: opacity .25s var(--settle); }
.wk-farname { font-size: 12px; fill: var(--ink-2); }
.walk.narrow .wk-fname { font-size: 21px; }
.walk.narrow .wk-name { font-size: 13.5px; }
.walk.narrow .wk-rel { font-size: 11.5px; }
.walk.narrow .wk-node.sug .wk-rel { font-size: 13px; }

/* A row's fill reaches 14px past the text (as in the app); a scroller clips what passes its box, so each one is 16px wider than its words. */
/* ---------- reading: the graph steps into the left column, the note is laid out beside it, its connections on the right ---------- */
.walk.is-reading .wk-fl, .walk.is-reading .wk-nl { opacity: 0; transition: opacity .15s var(--settle); }
.walk.is-reading .wk-core { scale: .5; }
.walk.is-reading .wk-node.on .wk-core { scale: .667; }
.walk.is-reading .is-focus .wk-core { scale: .72; }
.walk.is-reading .wk-halo, .walk.is-reading .wk-ring { scale: .72; }
.walk.is-reading .wk-pick circle { scale: .8; }
.walk.is-reading .wk-node.on .wk-rl { opacity: 1; }
.wk-rl .wk-name { font-size: 13px; fill: var(--ink); font-weight: 400; }
.walk.is-reading.tight .walk-graph { opacity: 0; visibility: hidden; transition: opacity .2s var(--settle), visibility 0s .2s; } /* no column for it: the connections are listed under the note */

.walk-read { position: absolute; inset: 0; display: grid; grid-template-columns: 250px minmax(0, 1fr) minmax(200px, 270px); column-gap: 40px; padding: 26px 30px 0 0; pointer-events: none; }
.walk-read > * { min-height: 0; overflow: auto; margin: 0 -16px; padding: 0 16px 48px; pointer-events: auto; scrollbar-width: thin; scrollbar-color: rgba(167, 150, 169, .4) transparent;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 44px), transparent); mask-image: linear-gradient(#000 calc(100% - 44px), transparent); }
.wp { grid-column: 2; max-width: 600px; }
.wt { grid-column: 3; }
.walk.tight .walk-read { display: block; overflow: auto; padding: 22px 24px 48px; pointer-events: auto; scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 44px), transparent); mask-image: linear-gradient(#000 calc(100% - 44px), transparent); }
.walk.tight .walk-read > * { overflow: visible; padding-bottom: 0; -webkit-mask-image: none; mask-image: none; }
.walk.tight .wt { margin-top: 32px; }
.walk-read.out { opacity: 0; transition: opacity .17s var(--settle); }

.wp-kind { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font: 400 11px/1.6 var(--sans); letter-spacing: .08em; color: var(--ink-3); }
.wp-realm { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; letter-spacing: 0; }
.rdash { width: 2px; height: 1.15em; border-radius: 1px; background: var(--rc); }
.wp-title { margin-top: 8px; font: 400 clamp(28px, 2.5vw, 36px)/1.12 var(--display); letter-spacing: -.012em; text-wrap: balance; outline: none; }
.wp-who { margin-top: 10px; font: 400 13px/1.4 var(--sans); color: var(--ink-3); }
.wp-text { margin-top: 18px; font: 400 19px/1.55 var(--text); color: var(--ink); text-wrap: pretty; }
.wp-sec { margin-top: 30px; }
.wp-h { display: flex; align-items: center; gap: 6px; font: 400 13px/1.4 var(--sans); color: var(--ink-2); }
.wp-h svg { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.wp-h .n { color: var(--ink-3); }
.wp-h .r { margin-left: auto; padding-left: 12px; }
.wp-quote { margin: 10px 0 0; font: italic 400 17px/1.65 var(--text); color: var(--ink-2); text-wrap: pretty; }
.wp-quote mark { color: inherit; padding-bottom: 2px; background: linear-gradient(var(--quote-line), var(--quote-line)) 0 100% / 100% 1.5px no-repeat; transition: background-size 1s var(--settle) .9s; }
.walk-read:not(.in) .wp-quote mark { background-size: 0 1.5px; transition: none; }
.wp-prov { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; font: 400 13px/1.45 var(--sans); color: var(--ink-3); }
.walk .cert { stroke: var(--rc); margin-top: 3.5px; }
.walk .cert.filled { fill: var(--rc); }
.wp-facts, .wt-rows { list-style: none; padding: 0; margin: 8px -14px 0; display: grid; gap: 4px; }
.wp-fact { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; column-gap: 12px; align-items: start; padding: 8px 14px; border-radius: 16px; font: 400 15px/1.5 var(--sans); transition: background-color .12s var(--settle); }
.wp-fact .cert { margin-top: 5px; }
.wp-fk { padding-top: 1px; font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.wt-lab { margin-top: 20px; font: 400 14px/1.4 var(--sans); color: var(--ink-3); }
.wt-people { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 12px 0 0 -4px; }
.wt-person, .wt-row { border: 0; background: none; color: inherit; cursor: pointer; text-align: left; transition: background-color .12s var(--settle), color .2s var(--settle); }
.wt-person { display: inline-flex; align-items: center; gap: 12px; padding: 4px 14px 4px 4px; border-radius: 999px; font: 400 16px/1.3 var(--sans); color: var(--ink); }
.wt-face { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--chip-hover); font: 500 13px/1 var(--sans); }
.wt-person small { display: block; font-size: 13px; line-height: 1.25; color: var(--ink-3); }
.wt-rows { margin-top: 18px; }
.wt-row { width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 8px 14px; border-radius: 16px; font: 400 15px/1.45 var(--sans); color: var(--ink-2); }
.wt-row .rel { flex: none; font-size: 13px; color: var(--ink-3); }
.wt-row.sug .rel { font: italic 400 14px var(--text); color: var(--bridge); }
.wt-person:focus-visible, .wt-person.on, .wt-row:focus-visible, .wt-row.on { background: var(--chip); color: var(--ink); outline: none; }

/* The page is laid top to bottom once the graph has moved: 160ms in, 60ms between blocks; the quote's words are marked last. */
.walk-read [data-in] { opacity: 0; translate: 0 12px; filter: blur(5px); transition: opacity .55s var(--settle), translate .55s var(--settle), filter .55s var(--settle); transition-delay: calc(160ms + var(--k, 0) * 60ms); }
.walk-read.in [data-in] { opacity: 1; translate: none; filter: none; }

/* Out of sight, nothing breathes. */
.walk.off *, .walk.off *::before, .walk.off *::after { animation-play-state: paused !important; }

@media (max-width: 960px) {
  .memory-copy { row-gap: 24px; }
  .memory-copy { align-items: start; }
  .memory-copy h2, .memory-copy .reading { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .memory { padding-bottom: 14vh; }
  .walk-stage { height: min(560px, 76svh); }
  .walk .places { gap: 28px; }
  .wp-text { font-size: 18px; }
}
@media (hover: hover) {
  .is-focus:hover .wk-ring { opacity: .9; scale: 1; }
  .is-focus:hover .wk-core { scale: 1.18; }
  .is-far:hover .wk-core { scale: .5; }
  .is-far:hover .wk-farname { opacity: 1; }
  .wp-fact:hover, .wt-person:hover, .wt-row:hover { background: var(--chip); color: var(--ink); }
  .walk-foot .act:hover { color: var(--ink); }
}
@media (hover: none) {
  .walk-cap .by-hand, .walk-foot .key { display: none; }
  .walk-cap .by-touch { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .wk-edge.sug { animation: none; }
  .wk-node.ignite .wk-core, .wk-node.arrive .wk-core { animation: none; }
  .wk-node.ignite .wk-halo { animation: wk-glow 5s ease-in-out infinite; }
  .wk-node { transition: opacity .12s linear; }
  .walk-read [data-in] { translate: none; filter: none; transition: opacity .12s linear; transition-delay: 0s; }
  .wp-quote mark { transition: none; }
}