/* ===== Fonts ===== */
@font-face{
  font-family:Exposure Italic;
  src:url(https://static1.squarespace.com/static/685294fbc0a38b1a390f378f/t/686e602bc5cf51622e4f7192/1752064043465/ExposureItalicTrial%5B%2B20%5D.otf);
}

/* ===== Design tokens ===== */
:root{
  --white-hsl:0,0%,100%;
  --black-hsl:0,0%,0%;
  --lightAccent-hsl:0,0%,96.08%; /* #F5F5F5 */
  --base-font-size:16px;
  --heading-font:'Inter Tight',sans-serif;
  --body-font:'Inter Tight',sans-serif;
  --heading-2-size-value:3;
  --heading-3-size-value:2;
  --heading-4-size-value:1.33;
  --small-text-size-value:.8;
}

*{box-sizing:border-box;font-variant-emoji:text}
html{font-size:var(--base-font-size);scroll-behavior:smooth}
/* Fullscreen pagina's: elke sectie snapt het scherm in */
html.snap-pages{scroll-snap-type:y mandatory}
html.snap-pages .page-section{scroll-snap-align:start;scroll-snap-stop:always}
body{
  margin:0;
  font-family:var(--body-font);
  font-weight:400;
  line-height:1.2em;
  background:#fff;
  color:#000;
  -webkit-font-smoothing:antialiased;
}

/* Heading scale: fluid formulas */
h1,h2,h3,h4{
  font-family:var(--heading-font);
  font-weight:500;
  letter-spacing:-.02em;
  margin:0;
  white-space:pre-wrap;
}
/* Groepen: elke groep heeft overal dezelfde grootte
   groep 1 (display): h1, h2
   groep 2 (groot):   h3, .simple-list a
   groep 3 (sub):     h4, .hero-corner a, .contact-links a, .blog-page h2
   groep 4 (body):    p, li
   groep 5 (meta):    .simple-meta, .proj-date, .blog-date, pre code */
h1,h2{line-height:calc(1.2em * (1 + (1 - var(--heading-2-size-value))/25))}
h3,.simple-list a{line-height:calc(1.2em * (1 + (1 - var(--heading-3-size-value))/25))}
h4,.hero-corner a,.contact-links a,.blog-page h2{line-height:calc(1.2em * (1 + (1 - var(--heading-4-size-value))/25))}
@media screen and (max-width:767px) and (orientation:portrait){
  h1,h2{font-size:calc((var(--heading-2-size-value) - 1) * calc(.012 * min(100vh, 900px)) + 1rem)}
  h3,.simple-list a{font-size:calc((var(--heading-3-size-value) - 1) * calc(.012 * min(100vh, 900px)) + 1rem)}
  h4,.hero-corner a,.contact-links a,.blog-page h2{font-size:calc((var(--heading-4-size-value) - 1) * calc(.012 * min(100vh, 900px)) + 1rem)}
  .sqsrte-small{font-size:calc((var(--small-text-size-value) - 1) * calc(.012 * min(100vh, 900px)) + 1rem)}
}
@media screen and (min-width:768px),screen and (max-width:3059px) and (orientation:landscape){
  h1,h2{font-size:calc((var(--heading-2-size-value) - 1) * 1.2vw + 1rem)}
  h3,.simple-list a{font-size:calc((var(--heading-3-size-value) - 1) * 1.2vw + 1rem)}
  h4,.hero-corner a,.contact-links a,.blog-page h2{font-size:calc((var(--heading-4-size-value) - 1) * 1.2vw + 1rem)}
  .sqsrte-small{font-size:calc((var(--small-text-size-value) - 1) * 1.2vw + 1rem)}
}
:is(h1,h2,h3,h4) strong{font-family:Exposure Italic !important;font-weight:500}
p{margin:0;white-space:pre-wrap;line-height:1.2em}
a{color:inherit}
img{display:block;max-width:100%}
pre{margin:0}
pre code{font-family:var(--body-font);font-size:.9rem;letter-spacing:-.02em}

/* ===== Page fade in / scroll reveal ===== */
#page{opacity:0;transition:opacity .4s ease}
#page.is-visible{opacity:1}
.reveal{opacity:0;transform:translatey(28px);transition:opacity .6s ease,transform .6s ease}
.reveal.in-view{opacity:1;transform:translatey(0)}

/* ===== Fullscreen secties, alles gecentreerd ===== */
.page-section{
  position:relative;
  min-height:100vh;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:10vh 6vw;
}
.page-section[data-section-theme="light"]{background:hsla(var(--lightAccent-hsl),1);color:#000}
.page-section[data-section-theme="black"]{background:hsla(var(--black-hsl),1);color:#fff}
.page-section[data-section-theme="white"]{background:#fff;color:#000}
.section-inner{max-width:880px;width:100%}
.section-eyebrow{display:block;margin-bottom:5vh;opacity:.85}

/* Simple lijsten */
.simple-list{list-style:none;margin:0;padding:0}
.simple-list li{margin:0 0 .35em}
.simple-list a{
  font-family:var(--heading-font);
  font-weight:500;
  letter-spacing:-.02em;
  text-decoration:none;
}
.simple-list a:hover{font-family:Exposure Italic}
.simple-list .sep{padding:0 .3em;opacity:.5}
.simple-list .proj-date{margin-left:.7em;font-size:.9rem;opacity:.5;letter-spacing:0;vertical-align:baseline}
.simple-meta{display:block;margin-top:.6em;font-size:.9rem;opacity:.6}

/* Tekstsecties */
.section-inner>h3{margin-bottom:4vh}
.section-cta{margin-top:5vh}
.section-cta a{text-decoration:underline}
.section-cta a:hover{opacity:.6}
.contact-links{display:flex;justify-content:center;gap:2.5em;margin-top:6vh}
.contact-links a{
  font-family:var(--heading-font);font-weight:500;letter-spacing:-.02em;
  text-decoration:underline;
}
.contact-links a:hover{opacity:.7}

/* ===== Hero met fotoachtergrond ===== */
.page-section.hero-photo{
  min-height:100vh;
  background:url('img/jantine-hero.jpg') center/cover no-repeat;
  color:#fff;
  padding:0;
}
.page-section.hero-photo::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.08) 45%,rgba(0,0,0,.5));
}
.hero-corner{position:absolute;z-index:1;padding:4vh max(2vw,20px);text-align:left}
.hero-corner.tl{top:0;left:0}
.hero-corner.tr{top:0;right:0;text-align:right}
.hero-corner.bl{bottom:0;left:0}
.hero-corner.br{bottom:0;right:0;text-align:right}
.hero-corner h3{margin-bottom:.4em}
.hero-corner a{
  font-family:var(--heading-font);
  font-weight:500;
  letter-spacing:-.02em;
  text-decoration:none;
}
.hero-corner a:hover{font-family:Exposure Italic}
.hero-loop-word{display:inline-block;position:relative;text-align:left;overflow:hidden;vertical-align:bottom}
.hero-loop-word .w{display:inline-block;position:absolute;white-space:nowrap;left:0;top:.2em;opacity:0;width:auto!important}
.hero-loop-word .w.show{position:relative;top:0;opacity:1;animation:loop-in .6s}
.hero-loop-word .w.hide{animation:loop-out .6s}
@keyframes loop-in{0%{opacity:0;transform:translateY(-100%)}100%{opacity:1;transform:translateY(0)}}
@keyframes loop-out{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(100%)}}

/* ===== Blog ===== */
.blog-page{background:#fff;color:#000}
.blog-page main{max-width:760px;margin:0 auto;padding:10vh 6vw 14vh}
.blog-page h1{margin-bottom:5vh}
.blog-page h2{margin:6vh 0 2vh}
.blog-page p,.blog-page main li{line-height:1.6;margin:0 0 1.2em;white-space:normal}
.blog-page h1,.blog-page h2{white-space:normal}
.blog-page main ul{padding-left:1.2em;margin:0 0 1.2em}
.blog-page main ul li{margin:0 0 .5em}
.blog-page a{text-decoration:underline}
.blog-page a:hover{opacity:.6}
.blog-date{font-size:.9rem;opacity:.6;margin-bottom:1.5vh}
.back-link{display:inline-block;margin-bottom:6vh;font-weight:500;text-decoration:none !important}
.back-link:hover{font-family:Exposure Italic;opacity:1}
.blog-page .simple-list a{text-decoration:none}
.blog-page .simple-list li{margin:0 0 1.2em}
.more-posts{margin-top:12vh;padding-top:6vh;border-top:1px solid rgba(0,0,0,.1)}
.more-posts .section-eyebrow{margin-bottom:3vh}

/* ===== Mobiel ===== */
/* 100vh rekent op mobiel de adresbalk mee; svh is het echte zichtbare scherm */
@supports (min-height:100svh){
  .page-section,.page-section.hero-photo{min-height:100svh}
}
@media screen and (max-width:767px) and (orientation:portrait){
  /* hero-hoeken compacter zodat naam en links elkaar niet raken */
  .hero-corner{padding:2.5vh 16px}
  .hero-corner.tl{max-width:62vw}
  .hero-corner h3{font-size:1.15rem}
  .hero-corner h4{font-size:.95rem;line-height:1.4}
  .hero-corner a{font-size:1rem}
  /* secties: iets minder padding, meta-tekst niet te breed */
  .page-section{padding:8vh 6vw}
  .simple-meta{font-size:.85rem}
  .blog-page main{padding:8vh 6vw 12vh}
}