/* A page of the forest: the scarlet spine on the left (back to the tree), the path above, a reading column, the way back to the map below. */
:root{
  --scarlet:#a8211b; --scarlet-deep:#8e1e18;
  --paper:#fbfaf6; --paper-2:#f4f2ec; --rule:#e2dfd6;
  --ink:#2b2b2b; --ink-soft:#6e6e6a; --faint:#dedbd2;
  --leaf:#9bc939;
  --root-1:#7f97b1; --root-2:#9aaec4; --root-3:#6c87a6; --root-4:#b0c0d1;
  --work-1:#8c8b86; --work-2:#76756f; --work-3:#a2a19b; --work-4:#b8b7b1;
  --display:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',Georgia,serif;
  --cjk:'Zen Antique',var(--display);
  --brush:'Yuji Syuku','Zen Antique',var(--display);
  --script:'Have Heart One','Nanum Brush Script',var(--display);
  --body:'Zen Kaku Gothic New','Hiragino Sans','Helvetica Neue',Arial,sans-serif;
  --band:76px; --measure:720px;
  color-scheme:light;
}
html{background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--display);-webkit-font-smoothing:antialiased}
.sheet{display:grid;grid-template-columns:var(--band) minmax(0,1fr);min-height:100vh}
/* the spine */
.band{position:sticky;top:0;height:100vh;background:var(--scarlet);color:#fff;display:grid;grid-template-rows:auto 1fr auto;justify-items:center;align-items:center;padding:18px 0 14px;box-sizing:border-box;overflow:hidden;box-shadow:inset -1px 0 0 rgba(0,0,0,.12);text-decoration:none}
a.band:hover{background:var(--scarlet-deep)}
.band .cjk{font-family:var(--cjk);font-size:24px;line-height:1.1;letter-spacing:.2em;writing-mode:vertical-rl;text-orientation:upright;margin-bottom:.2em}
.band .spine{writing-mode:vertical-rl;transform:rotate(180deg);display:flex;align-items:center;gap:14px;min-height:0}
.band .spine .t{font-family:var(--script);font-size:40px;line-height:1;white-space:nowrap;letter-spacing:.01em}
.band .spine .c{font-family:var(--display);font-size:12px;letter-spacing:.3em;text-transform:uppercase;opacity:.9;white-space:nowrap}
.band .mark{width:44px;height:44px}
.band .mark svg,.band .mark img{display:block;width:44px;height:44px;border-radius:3px}
/* the column */
.read{padding:26px clamp(24px,6vw,96px) 80px clamp(72px,6vw,96px);max-width:calc(var(--measure) + 2 * clamp(24px,6vw,96px));box-sizing:border-box}
.path{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:54px;font-family:var(--body)}
.crumbs{font-size:13px;letter-spacing:.04em;color:var(--ink-soft);line-height:1.9}
.crumbs a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.crumbs a:hover{color:var(--scarlet);border-bottom-color:var(--scarlet)}
.crumbs .sep{margin:0 8px;color:var(--faint)}
.crumbs .here{color:var(--scarlet)}
.crumbs .dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--lc,var(--faint));margin-right:7px;vertical-align:1px}
.bars{display:flex;gap:18px;align-items:flex-start;flex-shrink:0}
/* the tree's lines, as a row of their characters; the current one lit */
.lines{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end;padding:5px;border-radius:12px;background:rgba(128,128,128,.5)}
.lines .l{display:block;width:28px;height:28px;border-radius:7px;background:var(--lc,var(--faint));color:#fff;text-decoration:none;position:relative;opacity:.8;transition:opacity .2s,transform .2s}
.lines .l .g{display:block;width:28px;height:28px;line-height:28px;text-align:center;font-family:var(--cjk);font-size:17px}
.lines .l .n{position:absolute;right:0;top:34px;white-space:nowrap;font-size:12px;color:var(--ink);background:rgba(251,250,246,.97);border:1px solid var(--rule);padding:3px 8px;border-radius:3px;opacity:0;pointer-events:none;transition:opacity .15s;z-index:2}
.lines .l:hover,.lines .l.current{opacity:1}
.lines .l.current{background:#fff;color:var(--scarlet);box-shadow:inset 0 2px 5px rgba(0,0,0,.22)}
.lines .l:hover .n,.lines .l:focus-visible .n{opacity:1}
.lines .l:focus{outline:none} .lines .l:focus-visible{outline:2px solid var(--scarlet);outline-offset:2px}
.forest{display:flex;gap:8px;flex-shrink:0}
.forest .h{display:block;width:28px;height:28px;position:relative;opacity:.4;transition:opacity .2s}
.forest .h svg,.forest .h img{display:block;width:28px;height:28px;border-radius:3px}
.forest .h svg .face{fill:#9b9a95}
.forest .h.current,.forest .h:hover{opacity:1}
.forest .h.current svg .face,.forest .h:hover svg .face{fill:var(--scarlet)}
.forest .h span{position:absolute;right:0;top:34px;white-space:nowrap;font-size:12px;color:var(--ink);background:rgba(251,250,246,.97);border:1px solid var(--rule);padding:3px 8px;border-radius:3px;opacity:0;pointer-events:none;transition:opacity .15s;z-index:2}
.forest .h:hover span,.forest .h:focus-visible span{opacity:1}
/* the piece */
.piece .eyebrow{font-family:var(--body);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--scarlet);margin:0 0 14px}
.piece .eyebrow .glyph{font-family:var(--cjk);font-size:15px;letter-spacing:.1em;margin-right:10px;text-transform:none}
.piece .eyebrow em{font-style:normal;color:var(--ink-soft)}
.piece h1{font-family:var(--display);font-weight:500;font-size:clamp(30px,4.2vw,42px);line-height:1.18;letter-spacing:-.005em;margin:0 0 18px}
.piece .standfirst{font-size:20px;line-height:1.5;color:var(--ink-soft);margin:0 0 34px;padding-bottom:28px;border-bottom:1px solid var(--rule)}
.body{font-size:17.5px;line-height:1.72}
.body > *{margin-top:0;margin-bottom:1.25em}
.body h2,.body h3,.body h4{font-family:var(--display);font-weight:500;line-height:1.25;margin-top:2em}
.body h2{font-size:27px} .body h3{font-size:22px} .body h4{font-size:18px;font-family:var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.body a{color:var(--scarlet);text-decoration:none;border-bottom:1px solid rgba(168,33,27,.35)}
.body a:hover{border-bottom-color:var(--scarlet)}
.body a.grain-go::after{content:" ↗";font-size:.8em;color:var(--ink-soft)}
.body blockquote{margin:1.6em 0;padding:0 0 0 22px;border-left:3px solid var(--scarlet);color:var(--ink-soft);font-style:italic}
.body blockquote p:last-child{margin-bottom:0}
.body img,.body figure,.body iframe,.body svg{max-width:100%;height:auto}
.body figure{margin:1.8em 0} .body figcaption{font-family:var(--body);font-size:13px;color:var(--ink-soft);margin-top:8px}
.body .alignwide,.body .alignfull{margin-left:0;margin-right:0;max-width:100%}
.body ul,.body ol{padding-left:1.4em} .body li{margin-bottom:.4em}
.body hr{border:0;border-top:1px solid var(--rule);margin:2.4em 0}
.body code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.88em;background:var(--paper-2);border:1px solid var(--rule);padding:1px 5px;border-radius:3px}
.body pre{background:var(--paper-2);border:1px solid var(--rule);padding:16px;overflow:auto;border-radius:3px;font-size:14px;line-height:1.5}
.body table{border-collapse:collapse;width:100%;font-family:var(--body);font-size:15px}
.body th,.body td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--rule);vertical-align:top}
.body .wp-block-quote cite{font-style:normal;font-family:var(--body);font-size:13px}
.body .grain-figure{margin:2em 0}
/* crossovers under the text */
.xlist{font-family:var(--body);font-size:13.5px;margin-top:28px;padding-top:16px;border-top:1px dotted var(--rule);display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline}
.xlist span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.xlist a{color:var(--scarlet);text-decoration:none;border-bottom:1px solid rgba(168,33,27,.35)}
/* the way on: at the top under the path, and again at the foot */
.walk{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;margin-top:64px;padding-top:22px;border-top:1px solid var(--rule);font-family:var(--body)}
.walk.top{margin:-26px 0 44px;padding:14px 0;border-bottom:1px solid var(--rule)}
.walk.top .tomap{padding:6px 12px 6px 6px;font-size:12px} .walk.top .tomap svg,.walk.top .tomap img{width:22px;height:22px}
.walk.top .prev,.walk.top .next{font-size:14px}
.walk .prev,.walk .next{display:flex;flex-direction:column;gap:2px;font-size:15px;font-weight:500;color:var(--ink);text-decoration:none;min-width:0}
.walk .next{text-align:right;align-items:flex-end}
.walk .prev small,.walk .next small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:400}
.walk .prev:hover,.walk .next:hover{color:var(--scarlet)}
.walk .tomap{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--scarlet);font-size:13px;letter-spacing:.06em;padding:8px 14px 8px 8px;border:1px solid rgba(168,33,27,.35);border-radius:999px;white-space:nowrap}
.walk .tomap:hover{border-color:var(--scarlet);background:rgba(168,33,27,.05)}
.walk .tomap svg,.walk .tomap img{width:26px;height:26px;border-radius:4px} .walk .tomap svg .face{fill:var(--scarlet)}
.also{font-family:var(--body);font-size:13px;color:var(--ink-soft);margin-top:18px}
.also a{color:var(--scarlet);text-decoration:none}
/* narrow screens: the spine becomes a top bar */
@media (max-width:760px){
  .sheet{display:block}
  .band{position:static;height:auto;display:flex;flex-direction:row;align-items:center;gap:14px;padding:12px 16px}
  .band .cjk{writing-mode:horizontal-tb;font-size:18px;margin:0}
  .band .spine{writing-mode:horizontal-tb;transform:none;flex-direction:column;align-items:flex-start;gap:2px;flex:1;min-width:0}
  .band .spine .t{font-size:26px;white-space:normal}
  .band .mark{width:36px;height:36px} .band .mark svg,.band .mark img{width:36px;height:36px}
  .read{padding:18px 16px 60px}
  .path{flex-direction:column;gap:14px;margin-bottom:34px}
  .bars{flex-wrap:wrap} .lines{justify-content:flex-start} .lines .l .n{display:none}
  .forest .h span{display:none}
  .walk{grid-template-columns:1fr 1fr;grid-template-areas:"map map" "prev next"}
  .walk .tomap{grid-area:map;justify-content:center} .walk .prev{grid-area:prev} .walk .next{grid-area:next}
  .body{font-size:16.5px}
}