/* ---------- Nieuwspagina: extra beweging ---------- */
.news-head { position: relative; }
.news-head h1 { display: inline-block; }
.news-count {
  display: inline-block; vertical-align: top; margin-left: .6rem; margin-top: 1.4vw;
  font-family: var(--sans); font-size: clamp(1rem, 1.6vw, 1.8rem); font-weight: 500; font-variant-numeric: tabular-nums; opacity: .55;
}

/* Filters */
.news-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.6rem; }
.news-filters button {
  position: relative; overflow: hidden; display: inline-flex; align-items: flex-start; gap: .35rem;
  min-height: 2.6rem; padding: .7rem 1.1rem; border: 1px solid var(--line); border-radius: 4px;
  font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  transition: color .4s var(--ease), border-color .4s var(--ease);
}
.news-filters button::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fg); transform: translateY(101%); transition: transform .45s var(--ease); }
.news-filters button[aria-pressed="true"] { color: var(--bg); border-color: var(--fg); }
.news-filters button[aria-pressed="true"]::before { transform: none; }
.news-filters button:hover { border-color: var(--fg); }
.news-filters sup { font-size: .62rem; opacity: .6; font-variant-numeric: tabular-nums; }

/* Uitgelichte kaarten: onthulling, 3D-kanteling, glans, stempel */
.news-featured { perspective: 1400px; transition: opacity .5s var(--ease); }
.news-card {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .6s var(--ease), background-color .5s var(--ease), opacity .5s var(--ease), filter .5s var(--ease);
}
.news-card figure { position: relative; clip-path: inset(0 0 100% 0 round 6px); transition: clip-path 1.2s var(--ease-in-out); }
.news-card.is-in figure { clip-path: inset(0 0 0 0 round 6px); }
.news-card:nth-child(2).is-in figure { transition-delay: .15s; }
.news-card figure::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .22), transparent 45%);
}
.news-card:hover figure::after { opacity: 1; }
.news-stamp {
  position: absolute; top: 1rem; right: 1rem; z-index: 2; padding: .5rem .8rem; border-radius: 3px;
  background: var(--red); color: #fff; font-family: var(--display); font-weight: 800; font-stretch: 125%;
  font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
  transform: rotate(-8deg) scale(0); transition: transform .7s cubic-bezier(.34, 1.56, .64, 1) .9s;
}
.news-card.is-in .news-stamp { transform: rotate(-8deg) scale(1); }

/* Jaargroepen met sticky omlijnd jaartal */
.news-list { display: grid; gap: clamp(2rem, 4vw, 4rem); }
.news-year { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: clamp(1rem, 3vw, 3rem); align-items: start; transition: opacity .5s var(--ease); }
.news-year-label { position: sticky; top: 6rem; margin: 0; }
.news-year-label span {
  display: block; font-family: var(--display); font-weight: 800; font-stretch: 125%; font-variation-settings: "wdth" 125;
  font-size: clamp(3rem, 7vw, 8rem); line-height: .85; color: transparent; -webkit-text-stroke: 1.5px var(--fg-soft);
  transition: color .5s var(--ease), -webkit-text-stroke-color .5s var(--ease);
}
.news-year:hover .news-year-label span { color: var(--fg); -webkit-text-stroke-color: var(--fg); }
.news-year-rows { display: grid; gap: .6rem; }
.news-year.is-empty { display: none; }

/* Rijen: nummer, vulbalk, gespreid binnenkomen */
.news-row { position: relative; overflow: hidden; isolation: isolate; gap: 1.4rem; }
.news-row::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--panel);
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease);
}
.news-row:hover { background: transparent; }
.news-row:hover::before { transform: scaleX(1); }
.news-row-n { flex: 0 0 auto; align-self: flex-start; margin-top: .4rem; font-size: .8rem; font-variant-numeric: tabular-nums; opacity: .45; }
.news-row h3 { flex: 1 1 auto; }
.news-row.reveal { transform: translateX(-3rem); }
.news-row.reveal.is-in { transform: none; }
.news-year-rows .news-row:nth-child(2) { transition-delay: .08s; }
.news-year-rows .news-row:nth-child(3) { transition-delay: .16s; }

/* Filteren */
.news-card.is-filtered-out, .news-row.is-filtered-out { display: none; }
.news-featured.is-empty { display: none; }
.is-filtering .news-card:not(.is-filtered-out), .is-filtering .news-row:not(.is-filtered-out) { animation: news-in .6s var(--ease) var(--d, 0ms) both; }
@keyframes news-in { from { opacity: 0; transform: translateY(1rem); } }

@media (max-width: 760px) {
  .news-year { grid-template-columns: 1fr; gap: .4rem; }
  .news-year-label { position: static; }
  .news-year-label span { font-size: 3.4rem; }
  .news-row-n { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .news-card figure { clip-path: none; }
  .news-stamp { transform: rotate(-8deg); }
  .news-row.reveal { transform: none; }
  .is-filtering .news-card, .is-filtering .news-row { animation: none !important; }
}

/* ---------- Krant: subtiel ---------- */
/* Papierkorrel over de pagina, nauwelijks zichtbaar. */
.news-page { position: relative; }
.news-page::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.news-page > * { position: relative; z-index: 1; }
/* Masthead met dubbele krantenlijn */
.news-mast {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-bottom: clamp(1rem, 2vw, 2rem); padding: .55rem 0;
  border-top: 3px double var(--fg); border-bottom: 1px solid var(--fg);
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
}
.news-mast-mid { font-family: var(--display); font-weight: 800; font-stretch: 62%; font-variation-settings: "wdth" 62; font-size: 1.05rem; letter-spacing: .04em; }
.news-sub p::first-letter {
  float: left; margin: .05em .12em 0 0; font-family: var(--display); font-weight: 800; font-stretch: 62%; font-variation-settings: "wdth" 62;
  font-size: 3.1em; line-height: .8;
}
.news-year { border-top: 1px solid var(--line); padding-top: clamp(1rem, 2vw, 1.6rem); }
.news-year-rows { border-left: 1px solid var(--line); padding-left: clamp(.6rem, 1.6vw, 1.6rem); }
.news-tag { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .68rem; letter-spacing: .06em; }

/* ---------- Letterspel ---------- */
.news-letter {
  display: inline-block; font-stretch: 125%; font-variation-settings: "wdth" 125, "wght" 800;
  transform: translateY(105%); transition: transform 1s var(--ease) calc(var(--i) * 70ms), font-variation-settings .6s var(--ease);
}
.news-row h3 { transition: font-variation-settings .6s var(--ease), letter-spacing .6s var(--ease); }
.news-row h3.is-narrow { font-stretch: 62%; font-variation-settings: "wdth" 62, "wght" 800; font-size: clamp(1.4rem, 3vw, 3.6rem); letter-spacing: -.01em; }
.news-row h3.is-wide { font-variation-settings: "wdth" 125, "wght" 700; }
.news-row:hover h3.is-narrow { font-variation-settings: "wdth" 90, "wght" 900; }
.news-row:hover h3.is-wide { font-variation-settings: "wdth" 100, "wght" 300; letter-spacing: .01em; }
.news-card h2 { font-stretch: 62%; font-variation-settings: "wdth" 62, "wght" 800; font-size: clamp(1.5rem, 2.8vw, 3.3rem); line-height: .95; transition: font-variation-settings .6s var(--ease); }
.news-card:hover h2 { font-variation-settings: "wdth" 80, "wght" 900; }

/* ---------- Krant openvouwen ---------- */
.paper-open { position: fixed; inset: 0; z-index: 9000; pointer-events: none; perspective: 1600px; }
.paper-sheet {
  position: absolute; display: grid; grid-template-rows: 1fr 1fr; overflow: visible;
  background: transparent; color: var(--bg); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .6);
}
.paper-top, .paper-bottom { background: var(--fg); overflow: hidden; padding: clamp(1rem, 3vw, 3rem); }
.paper-bottom { transform-origin: top; border-top: 1px solid color-mix(in srgb, var(--bg) 20%, transparent); }
.paper-mast { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-top: 3px double currentColor; border-bottom: 1px solid currentColor; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; }
.paper-headline {
  margin: clamp(.8rem, 2vw, 2rem) 0 0; font-family: var(--display); font-weight: 800; font-stretch: 62%; font-variation-settings: "wdth" 62;
  font-size: clamp(1.6rem, 5.6vw, 6.4rem); line-height: .9; text-transform: uppercase;
}
.paper-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.8rem, 2vw, 2rem); }
.paper-cols div { display: grid; gap: .55rem; border-left: 1px solid color-mix(in srgb, currentColor 25%, transparent); padding-left: .8rem; }
.paper-cols div:first-child { border-left: 0; padding-left: 0; }
.paper-cols i { display: block; height: .45rem; border-radius: 1px; background: color-mix(in srgb, currentColor 22%, transparent); }
@media (max-width: 760px) { .news-mast { font-size: .6rem; } .news-mast span:first-child { display: none; } }

/* ---------- Krantenkop "De Limitless Courant" ---------- */
.np-rule { height: 6px; border-top: 3px solid var(--fg); border-bottom: 1px solid var(--fg); margin-bottom: clamp(.8rem, 1.6vw, 1.4rem); }
.np-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(.8rem, 2vw, 2rem); }
.np-ear {
  margin: 0; padding: .6rem .8rem; border: 1px solid var(--line); justify-self: start; max-width: 12rem;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .62rem; line-height: 1.55; letter-spacing: .08em; text-transform: uppercase; opacity: .75;
}
.np-ear-right { justify-self: end; text-align: right; }
.news-nameplate {
  margin: 0; text-align: center; overflow: hidden; padding: .05em 0;
  font-family: var(--display); text-transform: uppercase; line-height: .86; letter-spacing: -.01em;
  font-size: clamp(2.6rem, 8.4vw, 10rem);
}
.np-word { display: inline-block; white-space: nowrap; }
.news-nameplate .news-letter {
  display: inline-block; font-stretch: 62%; font-variation-settings: "wdth" 62, "wght" 900;
  transform: translateY(105%); transition: transform 1s var(--ease) calc(var(--i) * 40ms), font-variation-settings .6s var(--ease);
}
.news-nameplate.is-in .news-letter { transform: none; }
.news-nameplate .news-letter:hover { font-variation-settings: "wdth" 125, "wght" 300; }
.news-nameplate .np-word:nth-child(2) .news-letter { font-variation-settings: "wdth" 125, "wght" 800; }
.news-nameplate .np-word:nth-child(2) .news-letter:hover { font-variation-settings: "wdth" 62, "wght" 900; }
.news-mast { margin: clamp(.8rem, 1.6vw, 1.4rem) 0 0; }
@media (max-width: 760px) {
  .np-row { grid-template-columns: 1fr; }
  .np-ear { display: none; }
  .news-nameplate { font-size: 12vw; }
}
.np-ear { white-space: nowrap; max-width: none; }

/* ---------- Jaargroepen als krantensecties (vervangt de sticky omlijnde jaartallen) ---------- */
.news-year { display: block; border-top: 0; padding-top: 0; }
.news-year-label {
  position: static; display: flex; align-items: center; gap: 1.2rem; margin: 0 0 .6rem;
}
.news-year-label span {
  font-family: var(--display); font-weight: 900; font-stretch: 62%; font-variation-settings: "wdth" 62, "wght" 900;
  font-size: clamp(2.2rem, 4.2vw, 4.6rem); line-height: 1; color: var(--fg); -webkit-text-stroke: 0;
}
.news-year-label::after { content: ""; flex: 1; height: 0; border-top: 3px double var(--line); }
.news-year:hover .news-year-label span { color: var(--fg); }
.news-year-rows { border-left: 0; padding-left: 0; gap: 0; }
.news-year-rows .news-row { border-bottom: 1px solid var(--line); border-radius: 0; }
.news-row h3, .news-row h3.is-narrow, .news-row h3.is-wide {
  font-stretch: 62%; font-variation-settings: "wdth" 62, "wght" 850; font-size: clamp(1.5rem, 3.2vw, 3.8rem); line-height: .95; letter-spacing: 0;
}
.news-row:hover h3.is-narrow, .news-row:hover h3.is-wide { font-variation-settings: "wdth" 78, "wght" 900; letter-spacing: 0; }
.news-row-n { margin-top: .5rem; font-family: ui-monospace, "SF Mono", Menlo, monospace; }

/* ---------- Krant openvouwen: alleen transforms (soepel) ---------- */
.paper-sheet { left: 0; top: 0; width: 100vw; height: 100vh; transform-origin: 0 0; will-change: transform; backface-visibility: hidden; }
.paper-bottom { will-change: transform; backface-visibility: hidden; }

/* Geen tekstvervorming bij hover op de nieuwspagina. */
.news-nameplate .news-letter:hover,
.news-nameplate .np-word:nth-child(2) .news-letter:hover { font-variation-settings: inherit; }
.news-nameplate .np-word:nth-child(1) .news-letter:hover { font-variation-settings: "wdth" 62, "wght" 900; }
.news-nameplate .np-word:nth-child(2) .news-letter:hover { font-variation-settings: "wdth" 125, "wght" 800; }
.news-row:hover h3.is-narrow, .news-row:hover h3.is-wide { font-variation-settings: "wdth" 62, "wght" 850; }
.news-card:hover h2 { font-variation-settings: "wdth" 62, "wght" 800; }

/* Krantenkop in de huisletters van de site: Integral-stijl breed voor de naam, Inter Tight voor de rest. */
.news-nameplate .news-letter,
.news-nameplate .np-word:nth-child(1) .news-letter,
.news-nameplate .np-word:nth-child(2) .news-letter,
.news-nameplate .np-word .news-letter:hover { font-stretch: 125%; font-variation-settings: "wdth" 125, "wght" 800; }
.news-nameplate { font-size: clamp(2.2rem, 6.6vw, 8rem); letter-spacing: -.01em; }
.np-ear, .news-tag, .news-row-n { font-family: var(--sans); }
.np-ear { font-size: .7rem; letter-spacing: .12em; }
.news-sub p::first-letter { font-stretch: 125%; font-variation-settings: "wdth" 125, "wght" 800; }
.news-nameplate { font-size: clamp(2rem, 5.1vw, 6.4rem); } .np-row { grid-template-columns: auto minmax(0, 1fr) auto; } @media (max-width: 760px) { .news-nameplate { font-size: 8.4vw; } }
/* Kop reageert niet op hover. */
.news-nameplate, .news-nameplate * { pointer-events: none; }
.news-nameplate .news-letter { transition: transform 1s var(--ease) calc(var(--i) * 40ms); }