/* v43 featured page: an endless curved strip of slices over an ASCII field; a slice opens in place. */
.page-selected { background: #040509; color: #eef8ff; }
.sel-main {
    position: relative; isolation: isolate; overflow: clip;
    display: flex; flex-direction: column; min-height: 100svh;
    padding: calc(64px + clamp(1.5rem, 3.5vw, 3rem)) var(--page-pad) clamp(1.5rem, 3vw, 2.5rem);
    background: var(--sel-tone, #040509); transition: background-color 900ms cubic-bezier(.22, 1, .36, 1);
}
/* Black ground with a cursor-reactive glyph field (js/ascii-field.js). */
.sel-field { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.sel-head { position: relative; z-index: 2; display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 1.5rem 2.5rem; margin-bottom: clamp(1.5rem, 4vh, 3rem); }
.sel-title { position: relative; margin: 0; overflow: hidden; padding-bottom: .2em; font: 650 clamp(2.5rem, 4.6vw, 4.5rem)/1.1 var(--sans); letter-spacing: -.03em; }
.sel-title span { display: block; }
.sel-title::after { content: ''; position: absolute; left: .05em; bottom: .02em; width: 1.4em; height: 5px; background: var(--p3-cyan); transform: skewX(-28deg); }
.sel-filter { display: flex; flex-wrap: wrap; gap: .25rem; justify-self: start; padding-bottom: .35rem; }
.sel-filter button {
    display: inline-flex; align-items: baseline; gap: .45rem; min-height: 44px; padding: .55rem 1rem;
    border: 1px solid transparent; color: #b9d3f5; background: transparent; font: 500 1rem/1.4 var(--sans); cursor: pointer;
    transition: color 220ms, background-color 220ms, border-color 220ms;
}
.sel-filter button b { color: #7fa6dc; font-size: .875rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.sel-filter button:hover { color: #fff; border-color: #ffffff40; }
.sel-filter button[aria-pressed="true"] { color: #062a77; background: #f2fbff; }
.sel-filter button[aria-pressed="true"] b { color: #1470e5; }
.sel-archive {
    display: inline-flex; align-items: center; gap: .55rem; min-height: 48px; margin-bottom: .35rem; padding: .65rem 1.25rem;
    border: 1px solid #ffffff70; color: #fff; font: 600 1rem/1.4 var(--sans); transition: background-color 240ms, color 240ms, border-color 240ms;
}
.sel-archive b { font-weight: 500; color: #9fc4f2; font-variant-numeric: tabular-nums; }
.sel-archive span { transition: translate 260ms cubic-bezier(.22, 1, .36, 1); }
.sel-archive:hover, .sel-archive:focus-visible { color: #04245f; background: var(--p3-cyan); border-color: var(--p3-cyan); }
.sel-archive:hover b, .sel-archive:focus-visible b { color: #04245f; }
.sel-archive:hover span { translate: 4px 0; }

/* Desktop: the page is a single screen and the wheel drives the strip instead of the document. */
html:not(.sel-compact) body.page-selected { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
html:not(.sel-compact) body.page-selected .sel-main { flex: 1; min-height: 0; }
html:not(.sel-compact) body.page-selected .site-footer { display: none; }
.sel-caption, .sel-ticks { transition: opacity 600ms cubic-bezier(.22, 1, .36, 1), visibility 600ms; }

.sel-stage { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.sel-strip {
    position: relative; flex: 1; min-height: 0; margin: 0; padding: 0; list-style: none;
    perspective: 1500px; perspective-origin: 50% 50%; cursor: grab; touch-action: pan-y;
}
.sel-dragging .sel-strip { cursor: grabbing; }
.sel-slice { position: absolute; top: 50%; left: 0; width: var(--slice-w); height: var(--slice-h); will-change: transform; --lit: 0; }
.sel-slice__button {
    position: relative; display: block; width: 100%; height: 100%; padding: 0; overflow: hidden;
    border: 0; background: #0b0f19; cursor: pointer;
}
.sel-slice__button .responsive-picture, .sel-slice__button picture { position: absolute; inset: 0; display: block; }
.sel-slice__img {
    position: absolute; top: 0; left: 50%; width: 200%; max-width: none; height: 100%; object-fit: cover;
    filter: grayscale(calc(1 - var(--lit))) brightness(calc((.5 + var(--lit) * .5) * (1 - var(--open, 0) * .55 * (1 - var(--lit))))) contrast(1.05);
    will-change: transform;
}
.sel-slice__button::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / calc(.06 + var(--lit) * .2));
}
.sel-slice__button:focus-visible { outline: 2px solid var(--p3-cyan); outline-offset: 4px; }
.sel-slice__button:focus-visible .sel-slice__img { filter: none; }

.sel-caption {
    position: absolute; left: 0; bottom: clamp(.5rem, 2vh, 1.5rem); z-index: 2; display: grid; gap: .2rem;
    max-width: min(46rem, 60vw); pointer-events: none;
}
.sel-caption__group { color: var(--p3-cyan); font: 600 .9375rem/1.5 var(--sans); }
.sel-caption__title { font: 650 clamp(1.5rem, 2.4vw, 2.5rem)/1.2 var(--sans); letter-spacing: -.02em; }
.sel-ticks {
    position: absolute; right: 0; bottom: clamp(1rem, 2.6vh, 2rem); z-index: 2; display: flex; align-items: flex-end; gap: 5px;
    height: 28px; pointer-events: none;
}
.sel-ticks i { display: block; width: 1px; height: 10px; background: #dbe9ff; transform-origin: 50% 100%; }

/* Open work: the slice itself widens to a landscape frame; title plates sit across its lower-left edge. */
.sel-slice__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 600ms; }
.sel-slice__video.is-playing { opacity: 1; }
.sel-stage { --sel-ink: #eaf3ff; --sel-accent: var(--p3-cyan); }
.sel-stage.is-open .sel-caption, .sel-stage.is-open .sel-ticks { opacity: 0; visibility: hidden; }
.sel-open {
    position: absolute; z-index: 6; left: calc(50% - var(--big-w) / 2); top: calc(50% + var(--big-h) / 2); width: var(--big-w);
    pointer-events: none;
}
.sel-open[hidden] { display: none; }
/* Display word after the reference: tall condensed capitals with even, tight tracking. Two-line words
   are staggered (first line flush left, second flush right, outlined) and centred on the frame. Hovering the frame turns all letters to outlines. */
.sel-big {
    position: absolute; left: 50%; top: calc(var(--big-h) * -.5); translate: -50% -50%;
    display: grid; gap: calc(var(--sel-line, 200px) * .08); margin: 0; pointer-events: none;
    font: 400 var(--sel-size, 200px)/1 'Anton', 'Arial Narrow', Impact, sans-serif; color: var(--sel-accent);
    transition: color 700ms;
}
.sel-line { display: flex; justify-content: flex-start; align-items: flex-end; gap: var(--sel-track, 12px); height: var(--sel-line, 200px); }
.sel-line + .sel-line { justify-content: flex-end; }
.sel-big.is-single .sel-line { justify-content: center; }
.sel-ch { display: flex; align-items: flex-end; height: 100%; overflow: hidden; }
.sel-ch--gap { width: .22em; }
.sel-ch > span {
    /* Box is exactly the cap height with the baseline on its bottom edge (Anton: ascent 1.18, descent .33). */
    display: block; height: .867em; line-height: .884em;
    scale: 1 var(--sel-stretch, 1); transform-origin: 50% 100%;
    -webkit-text-stroke: 0 var(--sel-accent); transition: color 320ms, -webkit-text-stroke-width 320ms;
}
.sel-line + .sel-line .sel-ch > span, .sel-stage.is-peek .sel-ch > span { color: transparent; -webkit-text-stroke-width: 1.5px; }
.sel-meta__text { display: flex; align-items: baseline; gap: 1rem; min-width: 0; margin: 0; }
.sel-meta__name { overflow: hidden; color: #fff; font: 650 1.125rem/1.4 var(--sans); white-space: nowrap; text-overflow: ellipsis; }
.sel-meta {
    display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding-top: clamp(.75rem, 2vh, 1.25rem); pointer-events: auto;
}
.sel-meta__group { margin: 0; color: var(--sel-accent); font: 650 1rem/1.5 var(--sans); transition: color 700ms; }
.sel-meta__link {
    display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .6rem 1.2rem;
    border: 1px solid #ffffff59; color: #fff; font: 600 1rem/1.4 var(--sans); transition: background-color 240ms, color 240ms, border-color 240ms;
}
.sel-meta__link span { transition: translate 260ms cubic-bezier(.22, 1, .36, 1); }
.sel-meta__link:hover, .sel-meta__link:focus-visible { color: #04245f; background: var(--sel-accent); border-color: var(--sel-accent); }
.sel-meta__link:hover span { translate: 4px 0; }
.sel-slice:has(.sel-slice__video) .sel-slice__button, .sel-stage.is-open .sel-slice { cursor: pointer; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.load-error, .sel-noscript { margin: auto; color: #c9d6ef; font: 500 1rem/1.6 var(--sans); }
.load-error a, .sel-noscript a { color: var(--p3-cyan); text-decoration: underline; }

/* Compact: native horizontal scrolling of landscape cards. */
.sel-strip.is-compact {
    display: flex; flex: none; gap: 4vw; align-items: center; padding: 1rem 8vw; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scrollbar-width: none; perspective: none; cursor: auto; touch-action: auto;
}
.sel-strip.is-compact::-webkit-scrollbar { display: none; }
.sel-strip.is-compact .sel-slice { position: relative; top: auto; flex: 0 0 84vw; width: 84vw; height: auto; aspect-ratio: 16 / 9; scroll-snap-align: center; transform: none; }
.sel-strip.is-compact .sel-slice__img { left: 0; width: 100% !important; transform: none !important; filter: grayscale(calc(1 - var(--lit))) brightness(calc(.6 + var(--lit) * .4)); }
.sel-strip.is-compact .sel-slice.is-open .sel-slice__img { filter: none; }
.sel-compact .sel-stage { justify-content: center; gap: 1.5rem; padding-bottom: 1rem; }
.sel-compact .sel-caption { position: relative; bottom: auto; max-width: none; }
.sel-compact .sel-ticks { display: none; }
.sel-compact .sel-open { position: relative; left: auto; top: auto; width: auto; }
.sel-compact .sel-big { position: relative; left: auto; top: auto; translate: none; }
.sel-compact .sel-stage.is-open .sel-caption { display: none; }
.sel-compact .sel-meta { justify-content: space-between; }
.sel-compact .sel-meta__text { flex-wrap: wrap; gap: .25rem .75rem; }
.sel-compact .sel-meta__name { white-space: normal; }
.sel-meta__group, .sel-meta__link { flex-shrink: 0; white-space: nowrap; }

@media (max-width: 1100px) {
    .sel-head { grid-template-columns: 1fr auto; }
    .sel-filter { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 760px) {
    .sel-head { grid-template-columns: 1fr; gap: 1rem; }
    .sel-title { font-size: 2.4rem; }
    .sel-filter { grid-row: auto; }
    .sel-archive { justify-self: start; padding: .55rem .9rem; font-size: .9375rem; }
    .sel-caption__title { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .sel-main, .sel-caption, .sel-ticks, .sel-slice__video, .sel-big, .sel-ch > span { transition: none; }
}