/* Ecapsa — "A space". The can-e set in the titles of the classics (paper on ink), turned onto a diagonal, drawn out
   into a long case, and entered. Everything moving lives on one canvas; the words are HTML above it. */

.capsa {
  position: relative; margin-top: var(--section);
  background: var(--ink); color: var(--paper);
  height: 400vh;
}
.capsa__stage {
  position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; isolation: isolate;
}
@supports (height: 100svh) { .capsa__stage { height: 100svh; } }
.capsa__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.capsa__fallback { display: none; }
.capsa__copy { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.capsa__copy a, .capsa__copy button { pointer-events: auto; }

/* the entry: one word set large, a definition beneath it, like a page from a dictionary */
.capsa__entry {
  position: absolute; top: 50%; left: calc(var(--gutter) + (100% - 2 * var(--gutter)) * .565);
  width: calc((100% - 2 * var(--gutter)) * .40); max-width: 520px;
  transform: translateY(-46%);
}
.capsa__word { font: 400 clamp(84px, 9.6vw, 150px)/1 var(--serif); letter-spacing: -.012em; margin: 0; }
.capsa__letters { position: relative; display: block; height: 1.02em; }
.capsa__letters > span { position: absolute; left: 0; top: 0; line-height: 1; text-align: center; will-change: transform; }
.capsa__alt { display: none; }
.capsa__defs { display: grid; margin-top: clamp(22px, 2.4vw, 34px); }
.capsa__def { grid-area: 1 / 1; font-size: 16px; line-height: 1.6; color: rgba(230, 225, 214, .76); max-width: 27em; text-wrap: pretty; }
.capsa__lab { display: block; margin-bottom: 10px; color: var(--paper); }
.capsa__lab i { font: italic 400 21px/1 var(--serif); margin-right: 6px; }
.capsa__lab .sc { font-size: 10.5px; letter-spacing: .16em; color: rgba(230, 225, 214, .62); position: relative; top: -2px; }

/* the plate caption under the mark; on hover it names the book under the pointer */
.capsa__cap { position: absolute; left: 0; top: 0; width: max-content; max-width: 90vw; text-align: center; color: rgba(230, 225, 214, .62); font-size: 15px; transform: translate(-50%, 0); }
.capsa__cap i { transition: opacity .25s var(--ease); }

/* the last line, set in the dark at the bottom of the case */
.capsa__end { position: absolute; left: var(--gutter); right: var(--gutter); top: 50%; transform: translateY(-50%); text-align: center; }
.capsa__line { font: 400 clamp(34px, 4.1vw, 60px)/1.08 var(--serif); letter-spacing: -.014em; max-width: 14em; margin: 0 auto; text-wrap: balance; }
.capsa__line em { display: block; }
.capsa__sig { margin-top: 26px; color: rgba(230, 225, 214, .6); font-size: 11px; }
.capsa__sig span[aria-hidden] { margin: 0 8px; }

/* everything the scroll drives starts hidden; capsa.js sets each frame (the canvas, opacities, letter positions) */
.js .capsa:not(.is-static) .capsa__def,
.js .capsa:not(.is-static) .capsa__end,
.js .capsa:not(.is-static) .capsa__cap { opacity: 0; }
.js .capsa.is-ready .capsa__def[data-def="1"], .js .capsa.is-ready .capsa__cap { opacity: 1; }

@media (max-width: 1099px) {
  .capsa__entry { left: calc(var(--gutter) + (100% - 2 * var(--gutter)) * .55); width: calc((100% - 2 * var(--gutter)) * .45); }
  .capsa__def { font-size: 15px; }
}
@media (max-width: 759px) {
  .capsa__entry { left: var(--gutter); right: var(--gutter); width: auto; top: auto; bottom: max(24px, 4.5vh); transform: none; }
  .capsa__word { font-size: clamp(60px, 18vw, 84px); }
  .capsa__defs { margin-top: 16px; }
  .capsa__def { font-size: 14.5px; line-height: 1.55; }
  .capsa__lab { margin-bottom: 6px; }
  .capsa__lab i { font-size: 19px; }
  .capsa__cap { font-size: 13.5px; }
  .capsa__line { font-size: clamp(28px, 8.4vw, 40px); }
}

/* ── still: reduced motion (a composed frame, all the words visible) and no script (the symbol itself) ── */
.capsa.is-static, html:not(.js) .capsa { height: auto; padding: var(--section) 0; }
.capsa.is-static .capsa__stage, html:not(.js) .capsa__stage { position: relative; height: auto; overflow: visible; display: grid; }
.capsa.is-static .capsa__canvas { position: relative; inset: auto; width: 100%; height: var(--still-h, 560px); }
html:not(.js) .capsa__canvas, .capsa.is-failed .capsa__canvas { display: none; }
html:not(.js) .capsa__fallback, .capsa.is-failed .capsa__fallback { display: block; width: min(300px, 60vw); height: auto; margin: 0 auto 56px; }
.capsa.is-static .capsa__copy, html:not(.js) .capsa__copy { position: relative; inset: auto; display: grid; gap: 40px; }
.capsa.is-static .capsa__entry, html:not(.js) .capsa__entry { position: relative; inset: auto; transform: none; width: auto; max-width: 560px; margin: 0 auto; }
.capsa.is-static .capsa__letters, html:not(.js) .capsa__letters { display: none; }
.capsa.is-static .capsa__word::before, html:not(.js) .capsa__word::before { content: "ecapsa"; display: block; }
.capsa.is-static .capsa__alt, html:not(.js) .capsa__alt { display: block; font-size: .44em; font-style: italic; margin-top: .18em; color: rgba(230, 225, 214, .8); }
.capsa.is-static .capsa__defs, html:not(.js) .capsa__defs { gap: 28px; }
.capsa.is-static .capsa__def, html:not(.js) .capsa__def { grid-area: auto; opacity: 1; }
.capsa.is-static .capsa__cap, html:not(.js) .capsa__cap { position: relative; transform: none; margin: 0 auto; opacity: 1; order: -1; margin-top: -24px; }
.capsa.is-static .capsa__end, html:not(.js) .capsa__end { position: relative; inset: auto; transform: none; opacity: 1; margin-top: 40px; }
@media (min-width: 1100px) {
  .capsa.is-static .capsa__stage { grid-template-columns: 1fr 1fr; align-items: center; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; }
  .capsa.is-static .capsa__copy { display: contents; }
  .capsa.is-static .capsa__canvas { grid-column: 1; grid-row: 1; }
  .capsa.is-static .capsa__cap { grid-column: 1; grid-row: 2; margin-top: 0; }
  .capsa.is-static .capsa__entry { grid-column: 2; grid-row: 1; margin: 0; padding-right: var(--gutter); }
  .capsa.is-static .capsa__end { grid-column: 1 / -1; grid-row: 3; margin-top: 96px; }
}
.capsa__by { font-style: normal; }
.capsa.is-failed .capsa__cap { display: none; }