html, body {
  height: 100%;
  margin: 0;
}

body {
  background: rgb(63, 63, 63);
  color: rgb(255, 255, 255);
  font-family: Helvetica, Arial, sans-serif;
  overflow-y: scroll;
}

.page {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.shell {
  width: 980px;
  margin: 0 auto;
  padding-top: 46px;
  flex: 1 0 auto;
}

.hero_grid {
  display: grid;
  grid-template-columns: 330px 1fr;
  column-gap: 42px;
  align-items: start;
}

.brand {
  margin-top: 6px;
  margin-left: 12px;
}

.brand h1 {
  margin: 0 0 78px 0;
  font-family: "Josefin Slab", serif;
  font-size: 40px;
  font-weight: 400;
  letter-spacing: 0.2px;
  color: rgb(255, 255, 255);
}

.nav {
  width: 141px;
}

.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav a {
  display: block;
  padding: 9px 0;
  font-size: 14px;
  font-weight: 300;
  color: rgb(255, 255, 255);
  text-decoration: none;
}

.nav a:hover {
  text-decoration: underline;
}

.media {
  margin-top: 6px;
}

.media_frame {
  width: 553px;
  height: 553px;
  background: rgb(255, 255, 255);
  border: 1px solid rgb(210, 210, 210);
  display: flex;
  align-items: center;
  justify-content: center;
}

.media_frame img {
  width: 553px;
  height: 553px;
  object-fit: cover;
  display: block;
}

.caption {
  margin-top: 10px;
  margin-left: 6px;
  font-size: 14px;
  font-style: italic;
  font-weight: 700;
  color: rgb(255, 255, 255);
}

.footer {
  width: 980px;
  margin: 0 auto;
  padding-bottom: 34px;
  flex: 0 0 auto;
}

.footer_line {
  width: 938px;
  height: 0;
  border-top: 1px solid rgb(160, 160, 160);
  margin: 98px 0 13px 23px;
}

.footer_text {
  font-size: 14px;
  font-weight: 300;
  color: rgb(215, 215, 215);
  margin-left: 23px;
  margin-bottom: 47px;
}

.page_content{
  width: 553px;
  margin-top: 18px;
}

.page_content h2{
  margin: 0 0 10px 0;
  font-size: 18px;
  font-weight: 600;
}

.page_content p{
  margin: 0 0 12px 0;
  font-size: 14px;
  line-height: 1.7;
  font-weight: 300;
  color: rgb(235,235,235);
}

/* Bio pagina */
.page_bio .media_frame,
.page_bio .caption,
.page_bio .page_content{
  display: none;
}

.page_bio .media{
  padding-top: 74px;
}

.page_bio .bio_text{
  width: 553px;
  margin-top: 0;
}

.page_bio .bio_text p{
  margin: 0 0 22px 0;
  font-size: 13px;
  line-height: 1.75;
  font-weight: 400;
  color: rgb(235, 235, 235);
}

/* Werk pagina (2 kolommen overal, captions alleen via figcaption) */
.page_werk .media{
  padding-top: 6px;
}

.page_werk .work_list{
  width: 553px;
}

/* Grid altijd 2 kolommen */
.page_werk .work_grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 26px;
  row-gap: 22px;
  align-items: start;
}

/* Full breed (titels en caption-only regels) */
.page_werk .work_grid .full{
  grid-column: 1 / -1;
}

.page_werk figure{
  margin: 0;
}

/* Afbeeldingen */
.page_werk .work_item img{
  width: 100%;
  height: auto;
  display: block;
}

/* Titels */
.page_werk .work_title{
  margin: 0 0 2px 0;
  font-size: 14px;
  font-weight: 600;
  color: rgb(245,245,245);
  font-style: italic;
}

.page_werk .work_subtitle{
  margin: 10px 0 2px 0;
  font-size: 14px;
  font-weight: 600;
  color: rgb(245,245,245);
}

/* Captions: uitsluitend figcaption */
.page_werk figcaption.meta{
  display: block;
  margin: 8px 0 0 0;
  font-size: 14px;
  line-height: 1.9;
  font-weight: 600;
  color: rgb(245,245,245);
}

.page_werk figcaption.meta.small{
  margin-top: 0;
  opacity: 0.95;
}

/* Lege captions (voor consistentie) */
.page_werk figcaption.meta.empty{
  margin-top: 8px;
  opacity: 0;
}

/* Caption-only regels die geen image hebben */
.page_werk .caption_only{
  padding: 0;
}

.page_werk .caption_only figcaption{
  margin-top: 0;
}

/* Expo pagina: lijst layout zonder afbeelding */
.page_expo .media_frame,
.page_expo .caption,
.page_expo .page_content{
  display: none;
}

/* Positionering zoals in het origineel */
.page_expo .media{
  padding-top: 74px;
}

.page_expo .expo_list{
  width: 553px;
}

/* Elke jaargroep */
.page_expo .expo_year{
  display: grid;
  grid-template-columns: 70px 1fr;
  column-gap: 42px;
  margin-bottom: 22px;
}

/* Jaar links */
.page_expo .expo_year .y{
  font-size: 13px;
  font-weight: 600;
  color: rgb(245,245,245);
  text-align: left;
}

/* Rechterkolom */
.page_expo .expo_year .rows{
  display: grid;
  row-gap: 6px;
}

/* Elke regel: maand + tekst */
.page_expo .expo_year .row{
  display: grid;
  grid-template-columns: 92px 1fr;
  column-gap: 18px;
  align-items: baseline;
}

/* Maand */
.page_expo .expo_year .m{
  font-size: 11px;
  font-weight: 300;
  color: rgb(235,235,235);
  opacity: 0.95;
}

/* Tekst */
.page_expo .expo_year .t{
  font-size: 11px;
  font-weight: 300;
  color: rgb(235,235,235);
  line-height: 1.5;
}

/* Nieuws pagina: tekstlijst zonder afbeelding */
.page_nieuws .media_frame,
.page_nieuws .caption,
.page_nieuws .page_content{
  display: none;
}

/* Zelfde “starthoogte” als Bio en Expo */
.page_nieuws .media{
  padding-top: 74px;
}

.page_nieuws .news_list{
  width: 553px;
}

/* Items */
.page_nieuws .news_item{
  margin: 0 0 26px 0;
}

/* Jaartal of datum klein links boven de tekst */
.page_nieuws .news_date{
  font-size: 13px;
  font-weight: 600;
  color: rgb(245,245,245);
  margin: 0 0 6px 0;
}

/* Tekst zoals de rest van de site: klein, rustig */
.page_nieuws .news_text{
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
  font-weight: 300;
  color: rgb(235,235,235);
}

/* Activiteiten pagina, tekstpagina zonder afbeelding */
.page_activiteiten .media_frame,
.page_activiteiten .caption,
.page_activiteiten .page_content{
  display: none;
}

/* Zelfde “starthoogte” als Bio, Expo, Nieuws */
.page_activiteiten .media{
  padding-top: 74px;
}

/* Container */
.page_activiteiten .act_wrap{
  width: 553px;
}

/* Kopjes zoals in de rustige Wix stijl: compact, iets zwaarder */
.page_activiteiten .act_h{
  margin: 18px 0 10px 0;
  font-size: 14px;
  font-weight: 600;
  color: rgb(245,245,245);
}

/* Tekst klein en luchtig */
.page_activiteiten .act_p{
  margin: 0 0 14px 0;
  font-size: 11px;
  line-height: 1.6;
  font-weight: 300;
  color: rgb(235,235,235);
}

/* Contact pagina: tekst boven, 2 foto’s naast elkaar */
.page_contact .media_frame,
.page_contact .caption,
.page_contact .page_content{
  display: none;
}

/* Zelfde startpositie als Bio/Expo/Nieuws/Activiteiten */
.page_contact .media{
  padding-top: 74px;
}

.page_contact .contact_wrap{
  width: 553px;
}

/* Tekstblok bovenaan */
.page_contact .contact_text{
  margin: 0 0 28px 0;
}

.page_contact .contact_text p{
  margin: 0 0 14px 0;
  font-size: 11px;
  line-height: 1.6;
  font-weight: 300;
  color: rgb(235,235,235);
}

.page_contact .contact_text .c_name{
  font-weight: 600;
  color: rgb(245,245,245);
}

.page_contact .c_link{
  color: rgb(235,235,235);
  text-decoration: none;
}

.page_contact .c_link:hover{
  text-decoration: underline;
}

/* 2 kolommen met foto’s */
.page_contact figure{
  margin: 0;
}

.page_contact .contact_grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 26px;
  align-items: start;
}

.page_contact .contact_item img{
  width: 100%;
  height: auto;
  display: block;
}

/* Caption alleen onder linker foto */
.page_contact .contact_caption{
  margin-top: 10px;
  margin-left: 6px;
  font-size: 14px;
  font-style: italic;
  font-weight: 700;
  color: rgb(255, 255, 255);
}