/* fluffyfacts.com: huisstijl Fluffy Facts (ruimtepaars, zonnegoud, Tiggy-teal, Sef-oranje). Mobiel eerst.
   Lettertypes: Luckiest Guy (Apache 2.0), Lilita One en Varela Round (SIL OFL 1.1), ongewijzigd als WOFF. */
@font-face{font-family:"Luckiest Guy";src:url("/assets/fonts/LuckiestGuy-Regular.cc07b7483f.woff") format("woff");font-display:swap}
@font-face{font-family:"Lilita One";src:url("/assets/fonts/LilitaOne-Regular.378e6b7fd8.woff") format("woff");font-display:swap}
@font-face{font-family:"Varela Round";src:url("/assets/fonts/VarelaRound-Regular.dedfbc1365.woff") format("woff");font-display:swap}
:root{--purple:#1E1A55;--night:#120E36;--gold:#FFCB47;--teal:#2FD3B8;--orange:#FF7A45;--ink:#2A1C18;--white:#fff;
  --card:#2A2472;--card2:#332C86;--line:#ffffff24;--mut:#d5d0f2;--r:20px;
  --display:"Luckiest Guy","Lilita One",system-ui,sans-serif;--head:"Lilita One",system-ui,sans-serif;
  --body:"Varela Round",system-ui,-apple-system,"Segoe UI",sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font:17px/1.6 var(--body);color:var(--white);background-color:var(--night);
  background-image:radial-gradient(circle at 12% 6%,#7B3FE440,transparent 42%),radial-gradient(circle at 92% 62%,#13A8C929,transparent 46%),
    url("/assets/img/stars.6c6327af55.png"),linear-gradient(180deg,var(--night),var(--purple) 55%,#2B1F63);
  background-size:auto,auto,520px auto,auto;background-attachment:fixed;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
img{max-width:100%;height:auto}
a{color:var(--teal);text-underline-offset:3px}
a:hover{color:#7DF5E0}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 18px}
.skip{position:absolute;left:12px;top:-60px;z-index:20;background:var(--gold);color:var(--ink);padding:10px 14px;border-radius:12px;font-family:var(--head)}
.skip:focus{top:10px}
h1,h2{font-family:var(--display);font-weight:400;letter-spacing:.4px;color:var(--gold);text-shadow:0 3px 0 var(--ink);line-height:1.15;
  text-transform:uppercase}
h1{font-size:clamp(32px,7vw,54px);margin:10px 0 14px}
h2{font-size:clamp(24px,4.6vw,32px);margin:34px 0 12px}
h3{font-family:var(--head);font-weight:400;font-size:20px;line-height:1.25;margin:0 0 6px}
p{margin:0 0 14px}
.lead{font-size:clamp(17px,2.4vw,19px);color:var(--white)}
.small{font-size:14px;color:var(--mut)}
.block{padding-top:18px;padding-bottom:26px}

/* kop */
.top{position:sticky;top:0;z-index:10;background:linear-gradient(90deg,#120E36f0,#2A2472f0);border-bottom:3px solid var(--gold);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:10px 18px;flex-wrap:wrap;padding-top:9px;padding-bottom:9px}
.brand{display:block;line-height:0}
.brand img{width:190px;height:auto}
.nav{display:flex;gap:4px}
.nav a{font-family:var(--head);color:var(--white);text-decoration:none;padding:6px 12px;border-radius:12px;font-size:17px}
.nav a:hover,.nav a[aria-current="page"]{background:var(--gold);color:var(--ink)}

/* knoppen en pillen */
.btn{display:inline-block;font-family:var(--head);font-size:18px;color:var(--ink);background:var(--gold);border:3px solid var(--ink);
  border-radius:16px;padding:10px 18px;text-decoration:none;box-shadow:0 4px 0 var(--ink);margin:4px 6px 8px 0}
.btn:hover{color:var(--ink);transform:translateY(-1px);filter:brightness(1.05)}
.btn.sec{background:#ffffff1f;color:var(--white);border-color:#ffffff59;box-shadow:none}
.btn.sec:hover{color:var(--white);background:#ffffff33}
.cta{margin:18px 0 10px}
.social,.watch{list-style:none;margin:10px 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--head);font-size:16px;color:var(--white);text-decoration:none;
  padding:7px 14px 7px 11px;border-radius:99px;border:2px solid #ffffff38;background:#ffffff14}
.pill:hover{color:var(--white);background:#ffffff2e}
.ico{width:20px;height:20px;flex:none}
.pill.yt .ico{color:#FF4E45}.pill.ig .ico{color:#F77BB6}.pill.fb .ico{color:#5A9BFF}

/* home: held */
.hero{padding:16px 0 4px}
.hero-in{display:grid;gap:4px;align-items:center}
.hero-art{text-align:center}
.hero-art img{width:min(420px,82vw);filter:drop-shadow(0 10px 18px #0a062680)}
.hero h1{font-size:clamp(34px,8.4vw,60px)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sec-head h2{margin-bottom:12px}
.more{font-family:var(--head);font-size:18px}

/* Shorts-raster */
.grid{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:16px 14px;grid-template-columns:repeat(2,minmax(0,1fr))}
.card a{display:block;color:var(--white);text-decoration:none}
.card picture img{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:var(--r);border:3px solid var(--ink);
  box-shadow:0 0 0 2px #ffffff26,0 8px 18px #0a062666;background:var(--card);transition:transform .15s}
.card a:hover img{transform:translateY(-3px) rotate(-.6deg);box-shadow:0 0 0 2px var(--gold),0 10px 22px #0a062680}
.card-title{font-family:var(--head);font-weight:400;color:var(--white);text-shadow:none;letter-spacing:0;line-height:1.25;text-transform:none;
  margin:10px 2px 2px;font-size:clamp(16px,2.2vw,19px)}
.card a:hover .card-title{color:var(--gold)}
.card-date{margin:0 2px;font-size:14px;color:var(--mut)}

/* home: zo werkt het */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:st}
.steps li{background:#2A2472cc;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px 6px;counter-increment:st;position:relative}
.steps li::before{content:counter(st);position:absolute;top:-12px;left:16px;width:30px;height:30px;border-radius:50%;background:var(--gold);
  color:var(--ink);font-family:var(--head);display:grid;place-items:center;border:2px solid var(--ink)}
.steps h3{margin-top:6px;color:var(--gold)}

/* Short-pagina */
.crumbs ol{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-wrap:wrap;gap:4px;font-size:14px;color:var(--mut)}
.crumbs li+li::before{content:"›";margin:0 6px 0 2px;color:var(--mut)}
.crumbs span{color:var(--mut)}
.short h1{font-family:var(--head);text-transform:none;letter-spacing:.2px;text-shadow:0 3px 0 var(--ink);font-size:clamp(28px,5.6vw,44px);margin:8px 0 4px}
.meta{color:var(--mut);font-size:15px}
.short-top{display:grid;gap:8px 34px;grid-template-areas:"head" "player" "info"}
.short-head{grid-area:head}.player-col{grid-area:player}.short-info{grid-area:info}
.player{position:relative;width:min(100%,360px);aspect-ratio:9/16;margin:6px auto 0;border-radius:24px;overflow:hidden;
  border:3px solid var(--ink);box-shadow:0 0 0 3px var(--gold),0 12px 26px #0a062699;background:#000}
.player-start{position:absolute;inset:0;display:block;color:var(--white);text-decoration:none}
.player-start img,.player-frame{display:block;width:100%;height:100%;object-fit:cover;border:0}
.play-ico{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;filter:drop-shadow(0 4px 8px #0008);transition:transform .15s}
.player-start:hover .play-ico,.player-start:focus-visible .play-ico{transform:scale(1.08)}
.play-label{position:absolute;left:50%;top:calc(50% + 50px);transform:translateX(-50%);font-family:var(--head);font-size:18px;
  background:#120E36cc;padding:2px 12px;border-radius:99px}
.player-note{max-width:360px;margin:10px auto 0;font-size:13px;color:var(--mut);text-align:center}
.intro{font-size:18px}
.h-small{font-family:var(--head);text-transform:none;text-shadow:none;color:var(--white);font-size:18px;margin:18px 0 4px;letter-spacing:0}
.short-body{display:grid;gap:0 34px}
.transcript{list-style:none;margin:0;padding:0}
.line{background:#2A2472b3;border:1px solid var(--line);border-left:5px solid var(--teal);border-radius:14px;padding:9px 14px;margin:0 0 8px}
.line.sef{border-left-color:var(--orange)}
.who{display:block;font-family:var(--head);font-size:15px;letter-spacing:.3px;color:var(--teal)}
.line.sef .who{color:#FFB08C}
.sources{margin:0 0 12px;padding-left:22px}
.sources li{margin:0 0 9px}
.host{color:var(--mut);font-size:14px;white-space:nowrap}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:26px 0 8px}
.pager a{display:block;background:#2A2472cc;border:1px solid var(--line);border-radius:16px;padding:10px 14px;text-decoration:none;color:var(--white)}
.pager a:hover{border-color:var(--gold)}
.pager .next{text-align:right;grid-column:2}
.pager .dir{display:block;font-family:var(--head);color:var(--gold)}
.pager .t{font-size:15px}
.back{margin-top:14px}

/* tekstpagina's */
.prose-page{max-width:860px}
.prose h2{margin-top:30px}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin:0 0 10px}
.prose strong{font-family:var(--head);font-weight:400;letter-spacing:.2px}
.duo{display:grid;gap:16px;margin:10px 0 6px}
.who-card{display:grid;grid-template-columns:110px 1fr;gap:16px;align-items:center;background:#2A2472cc;border:1px solid var(--line);
  border-radius:var(--r);padding:14px 16px}
.who-card img{width:110px}
.who-card h2{margin:0 0 2px;font-size:30px}
.who-card.tiggy h2{color:var(--teal)}
.role{font-family:var(--head);color:var(--mut);margin-bottom:8px}
.mail{font-family:var(--head);font-size:1.1em;word-break:break-word}

/* de echte Sef en Tiggy */
.real{margin:22px 0 8px}
.real-grid{display:grid;gap:16px;margin:12px 0 4px}
.real-card{margin:0;background:#2A2472cc;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.real-card img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.real-card figcaption{padding:12px 16px 14px}
.real-card h3{font-family:var(--display);font-weight:400;font-size:30px;color:var(--gold);text-shadow:0 3px 0 var(--ink);margin:0 0 2px}
.real-card.tiggy h3{color:var(--teal)}
@media (min-width:640px){.real-grid{grid-template-columns:1fr 1fr}}

/* Ask Sef & Tiggy (voorpagina) */
.ask-card{display:grid;gap:14px 22px;align-items:center;background:#2A2472cc;border:3px solid var(--gold);border-radius:var(--r);padding:18px 20px}
.ask-card img{width:min(240px,70%);height:auto;justify-self:center}
.ask-card h2{margin-top:0}
.ask-note{color:var(--mut);font-size:.95em;margin-top:8px}
@media (min-width:760px){.ask-card{grid-template-columns:240px 1fr}.ask-card img{width:100%}}

/* 404 */
.lost{display:grid;gap:10px;align-items:center;justify-items:center;text-align:center}
.lost img{width:min(240px,60vw)}

/* voet */
.foot{margin-top:30px;background:#0d0a2ad9;border-top:3px solid var(--gold)}
.foot-in{display:grid;gap:14px;padding-top:22px;padding-bottom:22px}
.foot-tag{font-family:var(--display);text-transform:uppercase;color:var(--gold);font-size:22px;margin:0 0 4px;text-shadow:0 2px 0 var(--ink)}
.foot-nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.foot-nav a{color:var(--white);font-family:var(--head)}
.foot-small{margin:0;font-size:14px;color:var(--mut)}

@media (min-width:640px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .home .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(3,1fr)}
  .duo{grid-template-columns:1fr 1fr}
  .who-card{grid-template-columns:130px 1fr}
  .who-card img{width:130px}
  .brand img{width:220px}
}
@media (min-width:760px){
  .short-top{grid-template-columns:minmax(0,360px) minmax(0,1fr);grid-template-rows:auto 1fr;
    grid-template-areas:"player head" "player info";align-items:start}
  .player{margin-top:14px}
  .short-body{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
  .lost{grid-template-columns:auto 1fr;justify-items:start;text-align:left}
}
@media (min-width:860px){
  .hero-in{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:30px}
  .hero-art{order:2}
  .hero-art img{width:100%}
}
@media (min-width:900px){
  .home .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1100px){
  .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}