/* A work page: the tijdvak fact, Meer van <composer> and the previous/next navigation. */

.fact-tijdvak { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0; }
.fact-tijdvak .bar { display: block; width: clamp(120px, 14vw, 200px); height: 14px; background: var(--cc, var(--ink)); flex: none; }
.fact-tijdvak .cat { font-family: var(--f-caps); font-stretch: 125%; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 13px; color: var(--ink-2); }

.band.more-by { border-top: 1px solid var(--hair); padding: clamp(56px, 8vw, 112px) 0 clamp(40px, 6vw, 80px); }
.band-head p { margin: 0; color: var(--ink-2); max-width: 44ch; }
.more { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); border-top: 1px solid var(--hair); }
.more li { border-bottom: 1px solid var(--hair); border-right: 1px solid var(--hair); }
.more a { display: grid; gap: 6px; align-content: start; padding: 18px 20px 20px; min-height: 132px; text-decoration: none; transition: background-color .18s var(--ease), color .18s var(--ease); }
.more .no { font-family: var(--f-num); font-stretch: 62%; font-weight: 900; font-size: 48px; line-height: .9; }
.more .tt { font-size: 17px; line-height: 1.3; }
.more a:hover, .more a:focus-visible { background: var(--cc, var(--ink)); color: var(--on-cc); }
.more a:focus-visible { outline-offset: -3px; }

.pn { border-top: 1px solid var(--hair); }
.pn .wrap { display: grid; grid-template-columns: 1fr 1fr; }
.pn a { display: grid; gap: 4px; padding: 32px 20px; text-decoration: none; min-width: 0; transition: background-color .18s var(--ease), color .18s var(--ease); }
.pn a[rel="next"] { grid-column: 2; text-align: right; border-left: 1px solid var(--hair); }
.pn .no { font-family: var(--f-num); font-stretch: 62%; font-weight: 900; font-size: clamp(64px, 8vw, 120px); line-height: .85; }
.pn .caps { color: var(--ink-2); }
.pn .tt { font-size: 18px; }
.pn a:hover, .pn a:focus-visible { background: var(--ink); color: var(--black); }
.pn a:hover .caps, .pn a:focus-visible .caps { color: var(--black); }
.pn a:focus-visible { outline-offset: -3px; }

@media (max-width: 620px) {
  .pn .wrap { grid-template-columns: minmax(0, 1fr); }
  .pn-gap { display: none; }
  .pn a[rel="next"] { grid-column: 1; border-left: 0; border-top: 1px solid var(--hair); }
  .more { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}