/*!
We like light, clean and minimal pure html and CSS code.
We serve no cookies, trackers or ads.
Design Straatmeid.
*/

/*!
1. Base / Reset
*/
html {
font-size: 100%; /* ±16px, respecteert user settings */
}
html, body, div, span, h1, h2, h3, p, a, strong, em, blockquote,
img, ol, ul, li, fieldset, form, article, canvas, details,
footer, header, nav, summary {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
text-decoration: none;
}
article, footer, header, nav {
display: block;
}
ol, ul {
list-style: none;
}
img {
max-width: 100%;
height: auto;
}

/*!
2. Design tokens (CSS variables)
*/
:root { font-family: "Inter", sans-serif; }
@supports (font-variation-settings: normal) {
  :root { font-family: "InterVariable", sans-serif; font-optical-sizing: auto; }
} 
@font-face {
  font-family: InterVariable;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/InterVariable.woff2") format("woff2");
}
@font-face {
  font-family: InterVariable;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/InterVariable-Italic.woff2") format("woff2");
}

/* static fonts */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100; font-display: swap; src: url("/fonts/Inter-Thin.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 100; font-display: swap; src: url("/fonts/Inter-ThinItalic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 200; font-display: swap; src: url("/fonts/Inter-ExtraLight.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 200; font-display: swap; src: url("/fonts/Inter-ExtraLightItalic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap; src: url("/fonts/Inter-Light.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 300; font-display: swap; src: url("/fonts/Inter-LightItalic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/Inter-Italic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 500; font-display: swap; src: url("/fonts/Inter-MediumItalic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/Inter-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 600; font-display: swap; src: url("/fonts/Inter-SemiBoldItalic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/Inter-Bold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 700; font-display: swap; src: url("/fonts/Inter-BoldItalic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("/fonts/Inter-ExtraBold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 800; font-display: swap; src: url("/fonts/Inter-ExtraBoldItalic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 900; font-display: swap; src: url("/fonts/Inter-Black.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 900; font-display: swap; src: url("/fonts/Inter-BlackItalic.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 100; font-display: swap; src: url("/fonts/InterDisplay-Thin.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 100; font-display: swap; src: url("/fonts/InterDisplay-ThinItalic.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 200; font-display: swap; src: url("/fonts/InterDisplay-ExtraLight.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 200; font-display: swap; src: url("/fonts/InterDisplay-ExtraLightItalic.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 300; font-display: swap; src: url("/fonts/InterDisplay-Light.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 300; font-display: swap; src: url("/fonts/InterDisplay-LightItalic.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/InterDisplay-Regular.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/InterDisplay-Italic.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/InterDisplay-Medium.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 500; font-display: swap; src: url("/fonts/InterDisplay-MediumItalic.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/InterDisplay-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 600; font-display: swap; src: url("/fonts/InterDisplay-SemiBoldItalic.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/InterDisplay-Bold.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 700; font-display: swap; src: url("/fonts/InterDisplay-BoldItalic.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 800; font-display: swap; src: url("/fonts/InterDisplay-ExtraBold.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 800; font-display: swap; src: url("/fonts/InterDisplay-ExtraBoldItalic.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 900; font-display: swap; src: url("/fonts/InterDisplay-Black.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 900; font-display: swap; src: url("/fonts/InterDisplay-BlackItalic.woff2") format("woff2"); }

@font-feature-values InterVariable {
  @character-variant {
      cv01: 1; cv02: 2; cv03: 3; cv04: 4; cv05: 5; cv06: 6; cv07: 7; cv08: 8;
      cv09: 9; cv10: 10; cv11: 11; cv12: 12; cv13: 13;
      alt-1:            1; /* Alternate one */
      alt-3:            9; /* Flat-top three */
      open-4:           2; /* Open four */
      open-6:           3; /* Open six */
      open-9:           4; /* Open nine */
      lc-l-with-tail:   5; /* Lower-case L with tail */
      simplified-u:     6; /* Simplified u */
      alt-double-s:     7; /* Alternate German double s */
      uc-i-with-serif:  8; /* Upper-case i with serif */
      uc-g-with-spur:  10; /* Capital G with spur */
      single-story-a:  11; /* Single-story a */
      compact-lc-f:    12; /* Compact f */
      compact-lc-t:    13; /* Compact t */
  }
  @styleset {
      ss01: 1; ss02: 2; ss03: 3; ss04: 4; ss05: 5; ss06: 6; ss07: 7; ss08: 8;
      open-digits: 1;                /* Open digits */
      disambiguation: 2;             /* Disambiguation (with zero) */
      disambiguation-except-zero: 4; /* Disambiguation (no zero) */
      round-quotes-and-commas: 3;    /* Round quotes & commas */
      square-punctuation: 7;         /* Square punctuation */
      square-quotes: 8;              /* Square quotes */
      circled-characters: 5;         /* Circled characters */
      squared-characters: 6;         /* Squared characters */
  }
}
@font-feature-values Inter {
  @character-variant {
      cv01: 1; cv02: 2; cv03: 3; cv04: 4; cv05: 5; cv06: 6; cv07: 7; cv08: 8;
      cv09: 9; cv10: 10; cv11: 11; cv12: 12; cv13: 13;
      alt-1:            1; /* Alternate one */
      alt-3:            9; /* Flat-top three */
      open-4:           2; /* Open four */
      open-6:           3; /* Open six */
      open-9:           4; /* Open nine */
      lc-l-with-tail:   5; /* Lower-case L with tail */
      simplified-u:     6; /* Simplified u */
      alt-double-s:     7; /* Alternate German double s */
      uc-i-with-serif:  8; /* Upper-case i with serif */
      uc-g-with-spur:  10; /* Capital G with spur */
      single-story-a:  11; /* Single-story a */
      compact-lc-f:    12; /* Compact f */
      compact-lc-t:    13; /* Compact t */
  }
  @styleset {
      ss01: 1; ss02: 2; ss03: 3; ss04: 4; ss05: 5; ss06: 6; ss07: 7; ss08: 8;
      open-digits: 1;                /* Open digits */
      disambiguation: 2;             /* Disambiguation (with zero) */
      disambiguation-except-zero: 4; /* Disambiguation (no zero) */
      round-quotes-and-commas: 3;    /* Round quotes & commas */
      square-punctuation: 7;         /* Square punctuation */
      square-quotes: 8;              /* Square quotes */
      circled-characters: 5;         /* Circled characters */
      squared-characters: 6;         /* Squared characters */
  }
}
@font-feature-values InterDisplay {
  @character-variant {
      cv01: 1; cv02: 2; cv03: 3; cv04: 4; cv05: 5; cv06: 6; cv07: 7; cv08: 8;
      cv09: 9; cv10: 10; cv11: 11; cv12: 12; cv13: 13;
      alt-1:            1; /* Alternate one */
      alt-3:            9; /* Flat-top three */
      open-4:           2; /* Open four */
      open-6:           3; /* Open six */
      open-9:           4; /* Open nine */
      lc-l-with-tail:   5; /* Lower-case L with tail */
      simplified-u:     6; /* Simplified u */
      alt-double-s:     7; /* Alternate German double s */
      uc-i-with-serif:  8; /* Upper-case i with serif */
      uc-g-with-spur:  10; /* Capital G with spur */
      single-story-a:  11; /* Single-story a */
      compact-lc-f:    12; /* Compact f */
      compact-lc-t:    13; /* Compact t */
  }
  @styleset {
      ss01: 1; ss02: 2; ss03: 3; ss04: 4; ss05: 5; ss06: 6; ss07: 7; ss08: 8;
      open-digits: 1;                /* Open digits */
      disambiguation: 2;             /* Disambiguation (with zero) */
      disambiguation-except-zero: 4; /* Disambiguation (no zero) */
      round-quotes-and-commas: 3;    /* Round quotes & commas */
      square-punctuation: 7;         /* Square punctuation */
      square-quotes: 8;              /* Square quotes */
      circled-characters: 5;         /* Circled characters */
      squared-characters: 6;         /* Squared characters */
  }
}

:root {
  /* kleuren – betekenisvol */
  --bgc: #AE0042;
  --text: #d0c8b7;
  --hover: #480b1c;
  --first: #d0c8b7;
}

body[data-theme="functional"] {
  --bgc: #b79b7e;
  --text: #D01E50;
  --hover: #480b1c;
  --first: #D01E50;
}

/* spacing scale*/
:root {
  --space-xxs: clamp(0.0rem, 1vw, 0.0rem);
  --space-xs: clamp(0.25rem, 1vw, 0.5rem);
  --space-sm: clamp(0.5rem, 2vw, 1rem);
  --space-md: clamp(1rem, 4vw, 2rem);
  --space-lg: clamp(2rem, 6vw, 3rem);
  --space-xl: clamp(3rem, 10vw, 5rem);
  --space-xxl: clamp(5rem, 10vw, 10rem);
}

/*!
3. Layout (structure & spacing)
*/
body {
padding: var(--space-md);
font-weight: 400;
font-feature-settings:'cv10' 1, 'ss07' 1 /*! Capital G with spur and Square punctuation */;
background-color: var(--bgc);
background-image: url("/img/NNW_Background_1.svg");
background-repeat: no-repeat;
background-size: cover;
-webkit-font-smoothing: antialiased;
}
#page {
max-width: 1200px;
margin: 0 auto;
}
main {
overflow: hidden;
}
header {
margin-top: var(--space-sm);
margin-bottom: var(--space-xl);
overflow: hidden;
}
footer {
padding-top: var(--space-xxl);
padding-bottom: var(--space-xxl);
}

/*!
4. Navigation
*/
nav {
clear: both;
}
nav ul li {
float: left;
margin-right: var(--space-md);
font-size: 1em;
font-weight: 700;
letter-spacing: 0.1em;
}
nav ul li a {
display: block;
color: var(--text);
text-transform: uppercase;
}
nav li:hover > a {
color: var(--hover);
}

/*!
5. Typografie
*/
h1 {
margin-bottom: var(--space-lg);
font-size: 4.5em;
font-weight: 700;
line-height: 1;
color: var(--first);
}
h2 {
margin-bottom: var(--space-sm);
font-size: 2em;
font-weight: 700;
line-height: 1;
color: var(--text);
}
h3 {
margin-bottom: var(--space-sm);
font-size: 1.5em;
font-weight: 600;
line-height: 1;
color: var(--text);
}
p {
margin-bottom: var(--space-lg);
font-size: 1.25em;
line-height: 1.75;
letter-spacing: 0.02em;
color: var(--text);
}
strong {
font-weight: 600;
}
em {
font-style: italic;
}
small {
font-size: 0.75em;
}

/*!
6. Content-specific blocks
*/
#first {
margin-bottom: var(--space-lg);
font-size: 1.5em;
line-height: 1.75;
color: var(--first);
}
#event {
margin-bottom: var(--space-xxs);
font-weight: 500;
letter-spacing: 0.10em;
text-transform: uppercase;
text-underline-position: under;
color: var(--text);
}
#event_facts {
margin-bottom: var(--space-md);
font-variant: tabular-nums;
font-size: 1.5em;
line-height: 1.25;
color: var(--text);
}

/*!
6a. Links (content & footer)
*/
a {
color: inherit;
text-decoration: none;
}
article p a,
footer p a {
padding-bottom: 0.0625rem; /* 1px */
color: var(--text);
border-bottom: 0.0625rem solid var(--text);
}
article p a:hover,
footer p a:hover {
color: var(--hover);
border-bottom-color: var(--hover);
}

/*!
7. Components
*/
#logo {
width: 10.9375rem; /* 175px */
margin-left: 0.625rem;
margin-bottom: var(--space-lg);
}
.button {
padding: var(--space-xs) var(--space-md);
font-size: 0.75em;
font-weight: 600;
text-transform: uppercase;
color: var(--bgc);
background: var(--text);
cursor: pointer;
}
.button:hover {
background: var(--hover);
color: var(--text);
}

/*!
8. Lists
*/
ul.text_list {
font-size: 1.25em;
line-height: 1.75;
list-style: disc;
color: var(--text);
margin-left: var(--space-md);
}
li.text_list_steps {
margin-left: var(--space-md);
list-style: disc;
color: var(--text);
}

/*!
9. Media queries
*/

@media (max-width: 1225px) {
  body {
  background-image:none;
  }
  }
  
@media (max-width: 700px) {
header {
margin-bottom: var(--space-xl);
}
nav ul li {
font-size: 0.8em;
}
h1 { font-size: 2em; }
h2 { font-size: 1.75em; }
h3 { font-size: 1.25em; }
p {
margin-bottom: var(--space-lg);
font-size: 1em;
}
#first {
font-size: 1.15em;
}
#event_facts {
font-size: 1.25em;
}
li.text_list_steps {
margin-left: var(--space-sm);
}
ul.text_list {
font-size: 1em
}
}

@media print {
  body {
  background:none;
  margin:0;
  font-size:1.4em
}
nav, footer {
  display:none;
  margin:0
}
a {
  font-weight:700;
  color:var(--dark) !important
}
h1,h2,h3 {
  margin-bottom:0.5rem;
  page-break-after:avoid;
  page-break-inside:avoid;
  font-weight:700
}
ul,ol,li {
  page-break-before:avoid
}
img {
  display:block;
  margin-left:auto;
  margin-right:auto;
  page-break-inside:avoid;
  page-break-after:avoid
}
}
  

/*!
10. Utilities
*/
::selection {
background: var(--bgc2);
}