/* The studies selector (selector.js; atlas B1, sections 18 and 19). Pinned: the section is 5 x 60 svh, the pin one viewport.
   The list in columns 1 to 4: the label, then the titles in the serif at the quote size (24) on the list pitch, 44 (r11; r10 had 56: the
   owner found the h3 titles too big and close enough to read as one paragraph), the active title ink and the rest
   ink-3, no rule beside the list; the short line and its link sit at the panel's foot, the label's cap line on the
   panel's top edge. The panel in columns 6 to 12 on the pale sky, square, no taller than the viewport less 80 above and
   below; the object centred in it. Under 1024 every item stacks over its own panel. */
.selector { position: relative; height: 300svh; }
.sel-pin { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; }
.sel-grid { width: min(var(--content-max), 100% - 2 * var(--margin)); align-items: stretch; }
.sel-list { grid-column: 1 / span 4; display: flex; flex-direction: column; min-width: 0; }
.sel-label { color: var(--ink); }
/* Rows: each is --list-pitch tall (--sel-pitch), the 24 px line (1.3) centred in it, so titles stand 44 apart baseline to
   baseline; a wrapped title keeps 1.3 between its own lines. The label's baseline sits 40 above the first title's cap
   line (the row's padding and half-leading, 19.6 px, are taken from the 40). */
.sel-rows { --sel-pitch: var(--list-pitch); margin-top: calc(var(--s7) - (var(--sel-pitch) - 1.3 * var(--quote)) / 2 - 0.3 * var(--quote)); display: grid; justify-items: start; }
.sel-row { position: relative; display: block; padding: calc((var(--sel-pitch) - 1.3 * var(--quote)) / 2) 0; margin: 0; border: 0; background: none; text-align: left; cursor: pointer;
  font: 400 var(--quote)/1.3 var(--serif); letter-spacing: -0.005em; color: var(--ink-3); text-wrap: balance;
  transition: color var(--t1) var(--ease); }
/* A 44 px target the layout does not see (the row itself is 56). */
.sel-row::before { content: ''; position: absolute; left: -4px; right: -4px; top: 50%; height: max(44px, 100%); transform: translateY(-50%); }
.sel-row:hover, .sel-row.is-hover, [data-state="hover"] .sel-row:not([aria-selected="true"]) { color: var(--ink-2); }
.sel-row:active, .sel-row.is-active { color: var(--ink); transition: none; }
.sel-row[aria-selected="true"] { color: var(--ink); cursor: default; }
.sel-row:focus-visible, .sel-row.is-focus, [data-state="focus"] .sel-row[aria-selected="true"] { outline: 2px solid var(--ink); outline-offset: 4px; }
.sel-foot { margin-top: auto; padding-top: var(--s7); display: grid; justify-items: start; row-gap: var(--s4); }
.sel-foot .sel-text { color: var(--ink-2); max-width: 30em; }
.sel-panel { grid-column: 6 / span 7; aspect-ratio: 1 / 1; max-height: calc(100svh - 2 * var(--s10)); position: relative; display: grid; }
.sel-objs { position: relative; z-index: 1; display: grid; place-items: center; padding: var(--s9) 0; }
/* In the pinned panel the objects stand in a box the panel's size, so a tall one never stretches the panel; selector.js
   scales an object taller than the room between the paddings down to fit (--fit), about its centre. */
.sel-pin .sel-objs { position: absolute; inset: 0; grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.sel-pin .sel-obj { transform: scale(var(--fit, 1)); }
.sel-obj { grid-area: 1 / 1; width: 80%; max-width: 520px; opacity: 0; visibility: hidden; transition: opacity var(--t1) var(--ease), visibility 0s linear var(--t1); }
.sel-obj.on { opacity: 1; visibility: visible; transition: opacity var(--t2) var(--ease) var(--t1), visibility 0s; }
[data-frozen] .sel-obj, [data-frozen] .sel-obj.on { transition: none; }
.sel-stack { display: none; }
/* Still (a capture or ?sel=n) and free (reduced motion): one viewport, side by side, not pinned. */
.selector[data-mode="still"], .selector[data-mode="free"] { height: auto; }
.selector[data-mode="still"] .sel-pin, .selector[data-mode="free"] .sel-pin { position: relative; height: auto; min-height: 100svh; }
/* Under 1024: every item stacked with its panel; titles 24 over their line, the link 16 under it, the panel 32 under
   the link; items 80 apart. */
.selector[data-mode="stack"] { height: auto; }
.selector[data-mode="stack"] .sel-pin { display: none; }
.selector[data-mode="stack"] .sel-stack { display: grid; row-gap: var(--s10); }
.sel-stack > .sel-stack-label + .sel-item { margin-top: calc(var(--s7) - var(--s10)); }   /* the label 40 above the first item */
.sel-item { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; }
.sel-item .sel-text { margin-top: var(--s5); color: var(--ink-2); }
.sel-item .sel-link { margin-top: var(--s4); }
.sel-item .sel-p2 { grid-column: auto; margin-top: var(--s6); justify-self: stretch; aspect-ratio: auto; max-height: none; }
.sel-item .sel-objs { padding: var(--s8) 0; }
.sel-item .sel-obj { width: min(86%, 520px); }
@media (max-width: 767px) { .sel-item .sel-obj { width: calc(100% - 2 * var(--s4)); } .sel-item .sel-objs { padding: var(--s5) 0; } }