/* Amber Pelgrims — filmrol
   Eén lettertype (Archivo, variabel in breedte en gewicht), kleuren uit de huisstijl. */

:root{
  --paper:#F4F2FB;
  --paper-deep:#E7E2F2;
  --white:#FFFFFF;
  --ink:#1B1330;
  --ink-soft:#554A70;
  --choc:#40231F;
  --choc-deep:#170C0A;
  --pink:#FFD0E4;
  --pink-deep:#F7B3CF;
  --red:#E83940;
  --wine:#840121;
  --rule:rgba(27,19,48,.14);

  --ease-out:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(16px,4vw,48px);
  --measure:62ch;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Archivo",system-ui,sans-serif;
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.55;
  font-variation-settings:"wdth" 100;
  -webkit-font-smoothing:antialiased;
  caret-color:var(--wine);
}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1.5px}
button{font:inherit;color:inherit}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
::selection{background:#840121;color:#fff}
.hrs-tex::selection{background:transparent;color:transparent}
:focus-visible{outline:3px solid var(--wine);outline-offset:3px;border-radius:4px}
html{scrollbar-color:var(--choc) var(--paper-deep)}
.tnum{font-variant-numeric:tabular-nums}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--choc);color:var(--paper);padding:10px 16px;border-radius:999px;text-decoration:none;font-weight:700}
.skip:focus{top:12px}

.contact .wrap{max-width:1240px;margin:0 auto;padding:0 var(--gutter)}

/* ---------- jaren / over mij ---------- */
.years{background:#FDCFE1;color:var(--choc);padding:clamp(56px,9vw,128px) 0}
.years-inner{max-width:1180px;margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:center}
.years-media{order:2}
.years-copy{order:1}
@media (min-width:861px){.years-inner{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}

.section-title{font-weight:900;font-variation-settings:"wdth" 118;font-size:clamp(2.4rem,1.4rem + 4.2vw,5.2rem);line-height:.95;letter-spacing:-.03em;color:var(--choc);margin-bottom:.45em}
.lede{max-width:var(--measure);font-size:1.08em}
.years .lede{color:#5B5078;font-size:.92rem}
.years-stamp{margin:0 0 .6em;color:var(--choc)}

.years .section-pill{display:flex;width:max-content}
@media (max-width:600px){.years-stamp{white-space:normal}}

.timeline{list-style:none;margin:clamp(32px,4vw,48px) 0 0;padding:0;border-top:1.5px solid rgba(64,35,31,.2)}
.year{display:grid;grid-template-columns:minmax(5rem,6.5rem) 1fr;gap:clamp(12px,2.4vw,28px);padding:clamp(14px,1.8vw,20px) 0;border-bottom:1.5px solid rgba(64,35,31,.2)}
.year-num{font-weight:900;font-variation-settings:"wdth" 125;font-size:clamp(1.4rem,1.1rem + 1vw,2rem);line-height:1;color:var(--wine);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.year p{max-width:52ch;padding-top:.15em;font-size:.92rem;line-height:1.55;color:#5B5078}
/* slotzin als glazen kaartje, met de fluostift over de namen */
.years-note{
  margin-top:28px;max-width:var(--measure);font-size:.92rem;line-height:1.7;color:var(--choc);
  padding:16px 20px;border-radius:16px;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(11px) saturate(160%);backdrop-filter:blur(11px) saturate(160%);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 18px 36px -22px rgba(132,1,33,.35), inset 0 1px 0 rgba(255,255,255,.5);
}
.hl-name{position:relative;z-index:0;font-weight:700;white-space:nowrap;padding:0 .12em}
.hl-name::before{
  content:"";position:absolute;z-index:-1;left:-.1em;right:-.15em;top:.2em;bottom:.05em;
  background:#FFD0E4;border-radius:4px 10px 6px 12px / 12px 6px 14px 8px;
  mix-blend-mode:multiply;transform:rotate(-1.2deg);
}
.hl-name:nth-child(even)::before{transform:rotate(1deg)}
.years-note.reveal .hl-name::before{clip-path:inset(0 100% 0 0)}
.years-note.reveal.is-visible .hl-name::before{animation:hlSwipe .45s cubic-bezier(.65,0,.35,1) both}
.years-note.reveal.is-visible .hl-name:nth-child(1)::before{animation-delay:.55s}
.years-note.reveal.is-visible .hl-name:nth-child(2)::before{animation-delay:.75s}
.years-note.reveal.is-visible .hl-name:nth-child(3)::before{animation-delay:.95s}
.years-note.reveal.is-visible .hl-name:nth-child(4)::before{animation-delay:1.15s}
.years-note.reveal.is-visible .hl-name:nth-child(5)::before{animation-delay:1.35s}
@media (prefers-reduced-motion:reduce){.years-note.reveal .hl-name::before{clip-path:none;animation:none !important}}

@media (max-width:860px){
  .years-inner{grid-template-columns:1fr}
}
@media (max-width:480px){
  .year{grid-template-columns:1fr;gap:6px}
}

/* ---------- beweging ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}


/* ---------- voettekst met wettelijke gegevens ---------- */
.foot{background:var(--choc);color:rgba(251,238,228,.72);text-align:center;font-size:.8rem;line-height:1.6;padding:8px var(--gutter) 150px;font-family:"Plus Jakarta Sans",system-ui,sans-serif}
.foot p{max-width:none}

/* Instagram-post: iets groter, zonder het kleine bolletje bij de profielfoto */
.ig-post{max-width:340px}
.ig-post-avatar .brand-mark-c{display:none}

/* Instagram-post: dubbeltik-hartje */
.ig-post-photo{position:relative;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.ig-heart-pop{
  position:absolute;left:50%;top:50%;width:34%;height:auto;margin:0;
  fill:#fff;stroke:none;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35));
  transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none;
}
.ig-heart-pop.is-popping{animation:igHeartPop 1s cubic-bezier(.16,1,.3,1) both}
@keyframes igHeartPop{
  0%{transform:translate(-50%,-50%) scale(0) rotate(-8deg);opacity:0}
  15%{transform:translate(-50%,-50%) scale(1.2) rotate(4deg);opacity:1}
  30%{transform:translate(-50%,-50%) scale(.95) rotate(0)}
  45%{transform:translate(-50%,-50%) scale(1.05)}
  75%{transform:translate(-50%,-50%) scale(1);opacity:1}
  100%{transform:translate(-50%,-62%) scale(.9);opacity:0}
}
.ig-post-actions .ig-like{transform-origin:50% 60%;transition:fill .15s ease,stroke .15s ease}
.ig-post-actions .ig-like.is-liked{fill:#E83940;stroke:#E83940}
.ig-post-actions .ig-like.is-bouncing{animation:igLikeBounce .45s cubic-bezier(.16,1,.3,1)}
@keyframes igLikeBounce{0%{transform:scale(1)}35%{transform:scale(1.3)}60%{transform:scale(.9)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .ig-heart-pop.is-popping{animation:none;opacity:0}
  .ig-post-actions .ig-like.is-bouncing{animation:none}
}

/* jaartallen: zelfde gestempelde Sora-letter met ink-bleed als de titels */
.year .year-num.hrs-text{
  font-family:"Sora",system-ui,sans-serif;font-weight:800;font-variation-settings:normal;
  font-size:clamp(1.5rem,1.1rem + 1.2vw,2.1rem);letter-spacing:-0.045em;line-height:1;
  color:var(--wine);text-align:left;white-space:nowrap;
}

/* de drie sectietitels even groot */
.years .years-stamp,
.folders-section .folders-title-stamp,
.callsheet .callsheet-title{font-size:clamp(1.9rem,1.3rem + 2.4vw,2.8rem);}
@media (max-width:480px){
  .years .years-stamp,.folders-section .folders-title-stamp,.callsheet .callsheet-title{font-size:1.9rem;}
}