/* OONA Timeline: the plate look of the Rohonc atlas and the Plaintext
   Classics chapters. Override the tokens on .otl to restyle a timeline. */
.otl{
  --otl-parch:#f6f1e7; --otl-ink:#1b212e; --otl-soft:#4a5468;
  --otl-gold:#a8842f; --otl-terra:#b9543b; --otl-sea:#103b44;
  --otl-band1:#ece1c9; --otl-band2:#f1ead9; --otl-hilite:#e7dcc0;
  --otl-font:"EB Garamond",Garamond,Georgia,serif;
  --otl-display:Cinzel,"Times New Roman",serif;
  background:var(--otl-parch); color:var(--otl-ink); font-family:var(--otl-font);
  padding:22px clamp(14px,3vw,28px) 18px; border-radius:3px;
  display:flex; flex-direction:column; gap:12px; max-width:100%; box-sizing:border-box;
}
.otl *{box-sizing:border-box}
.otl{overscroll-behavior-x:contain}
.otl-title{font-family:var(--otl-display);font-weight:400;font-size:clamp(21px,3.2vw,28px);letter-spacing:.03em;line-height:1.2;margin:0;text-wrap:balance}
.otl-sub{margin:-4px 0 0;font-style:italic;font-size:17px;line-height:1.45;color:var(--otl-soft);max-width:68ch}

.otl-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.otl-zoom,.otl-views{display:flex;flex-wrap:wrap;gap:6px}
.otl-btn{font:inherit;font-size:15px;line-height:1;color:var(--otl-ink);background:transparent;border:1px solid color-mix(in srgb,var(--otl-ink) 28%,transparent);border-radius:2px;padding:7px 11px;cursor:pointer}
.otl-btn:hover{background:var(--otl-hilite)}
.otl-btn:focus-visible,.otl-stage:focus-visible{outline:2px solid var(--otl-terra);outline-offset:2px}
.otl-sq{width:34px;height:32px;padding:0;font-size:20px}
.otl-cur{background:var(--otl-ink);color:var(--otl-parch);border-color:var(--otl-ink)}
.otl-cur:hover{background:var(--otl-ink)}
.otl-span{margin-left:auto;font-size:14px;color:var(--otl-soft);font-variant-numeric:tabular-nums;white-space:pre}

.otl-stage{position:relative;width:100%;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;border-top:1px solid var(--otl-band1);border-bottom:1px solid var(--otl-band1)}
.otl-stage:active{cursor:grabbing}
.otl-svg{display:block;font-family:var(--otl-font)}
.otl-era{font-size:11.5px;letter-spacing:1.6px;fill:var(--otl-soft)}
.otl-lane{font-size:11.5px;letter-spacing:1.6px;fill:var(--otl-soft)}
.otl-grid{stroke:var(--otl-ink);stroke-opacity:.06;stroke-width:1}
.otl-tick{stroke:var(--otl-sea);stroke-width:1.2}
.otl-axis{stroke:var(--otl-sea);stroke-width:2}
.otl-tlab{font-size:12.5px;fill:var(--otl-soft);font-variant-numeric:tabular-nums}
.otl-stalk{stroke-width:1.1}
.otl-halo{fill:transparent}
.otl-label,.otl-date,.otl-tlab,.otl-era,.otl-lane{paint-order:stroke;stroke:var(--otl-parch);stroke-width:4.5px;stroke-linejoin:round}
.otl-label{font-weight:600;fill:var(--otl-ink)}
.otl-starlab{fill:var(--otl-terra)}
.otl-date{font-variant-numeric:tabular-nums}
.otl-mark{stroke:var(--otl-parch);stroke-width:1.4}
.otl-hit{fill:transparent}
.otl-ev{cursor:pointer}
.otl-lab:hover .otl-label,.otl-on .otl-label{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.otl-on .otl-mark{stroke:var(--otl-ink);stroke-width:1.6}

.otl-hint{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);background:var(--otl-ink);color:var(--otl-parch);font-size:15px;padding:8px 14px;border-radius:2px;pointer-events:none}
.otl-pop{position:absolute;width:min(340px,calc(100% - 16px));background:var(--otl-parch);border:1px solid color-mix(in srgb,var(--otl-ink) 22%,transparent);box-shadow:0 6px 24px rgba(27,33,46,.18);padding:14px 16px 12px;border-radius:2px;cursor:auto;user-select:text;-webkit-user-select:text;max-height:calc(100% - 16px);overflow:auto;z-index:2}
.otl-pop.otl-sheet{left:8px;right:8px;bottom:8px;top:auto;width:auto;max-height:62%}
.otl-pop h3{margin:2px 0 6px;font-size:19px;line-height:1.25;font-weight:600;padding-right:22px}
.otl-pop p{margin:0 0 8px;font-size:16px;line-height:1.45}
.otl-pmeta{font-size:13px!important;color:var(--otl-soft);display:flex;align-items:center;gap:7px;margin:0!important}
.otl-x{position:absolute;top:6px;right:6px;width:30px;height:30px;border:0;background:transparent;font-size:22px;line-height:1;color:var(--otl-soft);cursor:pointer;border-radius:2px}
.otl-x:hover{background:var(--otl-hilite)}
.otl-src{display:block;font-size:13px!important;color:var(--otl-soft);line-height:1.4;overflow-wrap:anywhere}
.otl-src a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.otl-pop h3{overflow-wrap:anywhere}

.otl-ovwrap{cursor:pointer;touch-action:none;border-top:1px solid var(--otl-band1);padding-top:6px}
.otl-ov{display:block}
.otl-ovaxis{stroke:var(--otl-sea);stroke-opacity:.5;stroke-width:1}
.otl-ovlab{font-size:11.5px;fill:var(--otl-soft);font-variant-numeric:tabular-nums}
.otl-ovshade{fill:var(--otl-parch);opacity:.55}
.otl-ovwin{fill:var(--otl-ink);fill-opacity:.07;stroke:var(--otl-ink);stroke-width:1.5;cursor:grab}

.otl-key{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:15px;color:var(--otl-soft)}
.otl-keyi{display:inline-flex;align-items:center;gap:7px}
.otl-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none}
.otl-star{font-style:normal;color:var(--otl-ink);font-size:16px;line-height:1}

.otl-list summary{cursor:pointer;font-size:15px;color:var(--otl-soft)}
.otl-list ol{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-direction:column;gap:10px}
.otl-list li{font-size:16px;line-height:1.45;max-width:72ch}
.otl-go{font-size:13px;padding:3px 7px;margin-right:4px;font-variant-numeric:tabular-nums}
.otl-list .otl-src{display:inline}
@media (prefers-reduced-motion:reduce){.otl *{transition:none!important}}

/* ---- pins and the shared cursor (stacks) ---- */
.otl-pin{stroke:var(--otl-terra);stroke-width:1.4;stroke-dasharray:4 4}
.otl-pinlab{font-size:12.5px;fill:var(--otl-terra);paint-order:stroke;stroke:var(--otl-parch);stroke-width:4px}
.otl-cursor{stroke:var(--otl-ink);stroke-opacity:.45;stroke-width:1}
.otl-curlab{font-size:12.5px;fill:var(--otl-ink);font-variant-numeric:tabular-nums;paint-order:stroke;stroke:var(--otl-parch);stroke-width:4px}
.otl-pinkey{display:inline-block;width:14px;height:0;border-top:1.6px dashed var(--otl-terra)}

/* ---- stack: sheets in 3D space on the page's dark ground ---- */
.otl-stackwrap{--otl-ground:#0B0D10;--otl-ivory:#e9e2d3;--otl-muted:#a49a88;background:var(--otl-ground);color:var(--otl-ivory);padding-inline:0}
.otl-stackwrap .otl-sub,.otl-stackwrap .otl-span,.otl-stackwrap .otl-key{color:var(--otl-muted)}
.otl-stackwrap > .otl-bar .otl-btn{color:var(--otl-ivory);border-color:color-mix(in srgb,var(--otl-ivory) 35%,transparent)}
.otl-stackwrap > .otl-bar .otl-btn:hover{background:color-mix(in srgb,var(--otl-ivory) 12%,transparent)}
.otl-depth{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--otl-muted)}
.otl-depth input{width:120px;accent-color:var(--otl-gold)}
.otl-scene{position:relative;perspective:2600px;perspective-origin:50% 10%;transition:height .25s ease}
.otl-box{position:absolute;left:0;right:0;bottom:34px;transform-style:preserve-3d;transform-origin:50% 100%}
.otl-sheet{position:absolute;left:0;right:0;top:0;background:var(--otl-parch);border-radius:2px;box-shadow:0 10px 40px rgba(0,0,0,.45);overflow:hidden;backface-visibility:hidden}
.otl-sheet .otl-stage{border:0}
.otl-tag{position:absolute;right:12px;top:8px;font-family:var(--otl-display);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--otl-soft);pointer-events:none}
.otl-stackwrap .otl-ovwrap{background:var(--otl-parch);padding:6px 10px 0;border-radius:2px;border:0}
.otl-pophost:empty{display:none}
.otl-pophost{display:flex;flex-direction:column;gap:8px}
.otl-pop.otl-pop-flat{position:relative;width:auto;max-width:640px;max-height:none;box-shadow:none}
.otl-pophost .otl-pop.otl-pop-flat[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.otl-scene{transition:none}}

/* ---- space view: tracks one behind another in 3D ---- */
.otl-spacestage{cursor:grab;border:0;background:linear-gradient(var(--otl-parch),var(--otl-band2))}
.otl-floor{fill:var(--otl-band1);opacity:.55}
.otl-grid3{stroke:var(--otl-ink);stroke-opacity:.2;stroke-width:1}
.otl-track{stroke-width:2;stroke-opacity:.75}
.otl-trackname{fill:var(--otl-soft);letter-spacing:1.4px;paint-order:stroke;stroke:var(--otl-parch);stroke-width:4px}
.otl-pin3{stroke:var(--otl-terra);stroke-width:1.6;stroke-dasharray:5 4}
.otl-cursor3{stroke:var(--otl-ink);stroke-opacity:.5;stroke-width:1.2}
.otl-space .otl-pop{left:12px;top:12px}
.otl-space .otl-pop.otl-sheet{left:8px;right:8px;top:auto;bottom:8px}
.otl-wall{fill:#ddd3bf;stroke:var(--otl-ink);stroke-opacity:.15}
.otl-epoch{fill:#e3dac7}
.otl-epoch2{fill:#d6cbb4}
.otl-epochline{stroke:var(--otl-ink);stroke-opacity:.22;stroke-width:1}
.otl-epochname{font-family:var(--otl-display);fill:var(--otl-ink);fill-opacity:.32;letter-spacing:.18em}
.otl-wallfoot{fill:var(--otl-ink);fill-opacity:.08}
.otl-wallspan{fill:var(--otl-ink);fill-opacity:.09}
.otl-wallline{stroke:var(--otl-ink);stroke-opacity:.25;stroke-width:1}
.otl-walltext{fill:var(--otl-ink);fill-opacity:.55;font-style:italic}
.otl-wallimg{opacity:.55;filter:sepia(.5) contrast(.9)}
.otl-wallev:hover .otl-wallimg,.otl-wallev:hover .otl-walltext{opacity:1;fill-opacity:.9}
.otl-wallkey{display:inline-block;width:14px;height:10px;background:var(--otl-ink);opacity:.18;border-radius:1px}
.otl-popimg{display:block;width:100%;height:auto;margin:4px 0 10px;border-radius:2px}
@media (max-height:880px) and (min-width:600px){.otl-space .otl-sub{display:none}}
.otl-farlab{fill-opacity:.8}
.otl-range{stroke-linecap:round;stroke-opacity:.45}
.otl-more{cursor:zoom-in}
.otl-morebg{fill:var(--otl-parch);stroke-width:1.2}
.otl-moretext{font-weight:600;fill:var(--otl-ink);font-variant-numeric:tabular-nums}
.otl-more:hover .otl-morebg{fill:var(--otl-hilite)}
.otl-custom{align-self:center;font-size:14px;font-style:italic;color:var(--otl-soft);padding:0 4px}
.otl-space .otl-cur{background:var(--otl-ink);color:var(--otl-parch);border-color:var(--otl-ink)}
.otl-reset{font-size:14px}
.otl-space .otl-label,.otl-space .otl-date,.otl-space .otl-tlab,.otl-space .otl-trackname{stroke:none}
.otl-space .otl-starlab{fill:var(--otl-ink)}   /* a star is the mark; red is kept for the pins */
.otl .otl-title{margin:0}
.otl .otl-sub{margin:-4px 0 0}
.otl-space .otl-trackname{fill:var(--otl-ink);fill-opacity:.6}
.otl-rangecap{stroke-width:1.4;stroke-opacity:.8}
.otl-rangeclip{fill:none;stroke-width:1.4;stroke-opacity:.8}
.otl-space .otl-range{stroke-opacity:.45;stroke-linecap:butt}
.otl-space .otl-custom{border:0;background:none;padding:0 2px;font-size:13.5px;color:var(--otl-soft);font-style:italic;cursor:default}
/* a list grouped by lane; the toolbar on one flow at phone width */
.otl-list h4{margin:14px 0 2px;font-size:13px;letter-spacing:1.4px;text-transform:uppercase;font-weight:400;color:var(--otl-soft)}
.otl-list h4:first-of-type{margin-top:10px}
.otl-list ol+h4{margin-top:16px}
.otl-reset[hidden]{display:none}
@media (max-width:599px){
  .otl-space .otl-zoom,.otl-space .otl-views{display:contents}
  .otl-space .otl-bar{gap:6px}
  .otl-space .otl-btn{font-size:14px;padding:6px 9px}
  .otl-space .otl-sq{width:32px;height:30px;font-size:19px}
}
/* bars tracks, lane periods, the note */
.otl-bar{stroke:var(--otl-parch);stroke-width:1}
.otl-on .otl-bar{stroke:var(--otl-ink);stroke-width:1.6}
.otl-barev:hover .otl-bar{filter:brightness(1.08)}
.otl-bartext{fill:var(--otl-parch);font-weight:600;letter-spacing:.02em;pointer-events:none}
.otl-periodband{fill-opacity:.08}
.otl-periodedge{stroke-opacity:.35;stroke-width:1}
.otl-hatch{stroke-width:1;stroke-opacity:.35}
.otl-periodname{fill:var(--otl-ink);fill-opacity:.55;letter-spacing:1.6px}
.otl-note{margin:0;font-style:italic;font-size:15.5px;line-height:1.5;color:var(--otl-soft);max-width:90ch}
.otl-rangekey{display:inline-block;width:18px;height:8px;background:var(--otl-soft);opacity:.45;border-radius:1px}
.otl-clipkey{font-style:normal;color:var(--otl-soft);font-size:13px;line-height:1}
.otl-walltick{stroke-width:2;stroke-opacity:.35}