/* Home gateway: one film of the engraved library, its heading, and a quiet index of the readings.
   The heading is the block's only serif line. Complete without script: the poster stands in until foundation.js plays the film. */
.matter-page .fd { background: var(--ink); color: var(--paper); }
.matter-page .fd-hall { position: relative; }
.matter-page .fd-film { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.matter-page .fd-head { position: absolute; z-index: 1; top: 17vw; inset-inline: 0; font-size: 8.6vw; line-height: 1; pointer-events: none; }
.matter-page .fd-head span { position: absolute; }
.matter-page .fd-head span:first-child { right: calc(50% + 4vw); }
.matter-page .fd-head span:last-child { left: calc(50% + 4vw); }
.matter-page .fd-dot { font-style: inherit; color: var(--accent); }

.matter-page .fd-rows { margin: 0; padding: 0; list-style: none; }
.matter-page .fd-row { display: flex; justify-content: space-between; align-items: baseline; gap: 40px; padding: 18px var(--frame); border-top: 1px solid rgb(235 233 229 / .22); transition: background-color 180ms ease, color 180ms ease; }
.matter-page .fd-title { font-size: 20px; font-weight: 450; line-height: 1.3; letter-spacing: -.015em; }
.matter-page .fd-credit { max-width: 46ch; color: #bcbcb4; font-size: 16px; line-height: 1.3; text-align: right; transition: color 180ms ease; }
.matter-page .fd-row:focus-visible { background: var(--accent); color: var(--ink); }
.matter-page .fd-row:focus-visible .fd-credit { color: inherit; }
@media (hover: hover) {
  .matter-page .fd-row:hover { background: var(--accent); color: var(--ink); }
  .matter-page .fd-row:hover .fd-credit { color: inherit; }
}

.matter-page .fd-library { display: flex; justify-content: space-between; align-items: center; gap: 40px; padding: 22px var(--frame); background: var(--accent); color: var(--ink); font-size: clamp(20px, 2vw, 26px); font-weight: 450; line-height: 1.2; letter-spacing: -.02em; transition: background-color 180ms ease; }
.matter-page .fd-library .ui-arrow { flex: none; font-size: 30px; }
@media (hover: hover) { .matter-page .fd-library:hover { background: var(--paper); } }

@media (max-width: 760px) {
  .matter-page .fd-head { position: static; padding: 44px 20px 18px; font-size: 23vw; line-height: .92; }
  .matter-page .fd-head span { position: static; }
  .matter-page .fd-row { display: block; padding: 18px 20px; }
  .matter-page .fd-credit { display: block; max-width: none; margin-top: 6px; text-align: left; }
  .matter-page .fd-library { padding: 22px 20px; }
}