:root {
  color-scheme: light;
  --ink: #172b26;
  --ink-soft: #43534e;
  --paper: #f5f4ee;
  --paper-light: #fffefa;
  --line: #d7dad1;
  --accent: #e8694d;
  --mint: #c9e2d2;
  --mono: "DM Mono", monospace;
  --body: "Manrope", sans-serif;
  --display: "Syne", sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--paper-light);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }

.site-header {
  height: 76px;
  padding: 0 6.1vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--paper-light);
  position: relative;
  z-index: 5;
}

.wordmark {
  font: 800 25px/1 var(--display);
  letter-spacing: 0;
}

.wordmark span { color: var(--accent); }

.site-nav { display: flex; align-items: center; gap: clamp(25px, 4vw, 58px); }
.site-nav a { font-size: 13px; font-weight: 700; transition: color 180ms ease; }
.site-nav a:hover, .site-footer a:hover { color: var(--accent); }
.site-nav .nav-contact { color: var(--accent); }
.nav-contact span { margin-left: 5px; }
.menu-toggle { display: none; }

.hero {
  min-height: min(710px, calc(100svh - 76px));
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  position: relative;
  background:
    radial-gradient(ellipse at 18% 8%, rgb(76 118 100 / 35%), transparent 42%),
    var(--ink);
  color: var(--paper-light);
  overflow: hidden;
}

.hero-copy {
  padding: clamp(64px, 9vw, 126px) 5vw 34px 12.2vw;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}

.eyebrow, .section-label, .item-kicker, .timeline-date, .hero-footnote,
.image-caption, .hero-index, .contact-topline {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.eyebrow { display: flex; align-items: center; gap: 11px; color: #c4d0ca; margin: 0 0 26px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #9cdb99; box-shadow: 0 0 0 4px rgb(156 219 153 / 15%); }

h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--display); letter-spacing: 0; }

.hero h1 {
  margin-bottom: 22px;
  font-size: clamp(56px, 7.3vw, 102px);
  line-height: .99;
  font-weight: 700;
  letter-spacing: -.045em;
}

h1 em, h2 em { color: var(--mint); font-style: normal; }
.hero-intro { max-width: 410px; margin-bottom: 29px; color: #c5d0ca; font-size: 14px; line-height: 1.85; }
.hero-actions { display: flex; align-items: center; gap: 29px; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 20px; padding: 0 18px; font-size: 12px; font-weight: 800; transition: transform 180ms ease, background 180ms ease; }
.button:hover { transform: translateY(-2px); }
.button-bright { color: var(--ink); background: var(--mint); border-radius: 3px; box-shadow: 0 8px 24px rgb(0 0 0 / 12%); }
.button-bright:hover { background: #d9eddf; }
.text-link { padding: 10px 0; font-size: 12px; font-weight: 700; color: #f5f4ee; }
.text-link span { color: var(--accent); margin-left: 4px; }
.hero-footnote { display: flex; justify-content: space-between; gap: 32px; width: min(100%, 420px); margin-top: auto; padding-top: 48px; color: #9eada5; font-size: 10px; }
.hero-footnote span:first-child { color: var(--accent); }

.hero-image {
  min-height: 100%;
  position: relative;
  background: #53655d url("https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=1500&q=85") center / cover no-repeat;
}

.hero-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgb(23 43 38 / 12%), transparent 42%), linear-gradient(0deg, rgb(23 43 38 / 58%), transparent 42%);
}

.image-caption { position: absolute; bottom: 34px; left: 32px; right: 32px; display: flex; justify-content: space-between; gap: 12px; color: #fff; font-size: 10px; text-shadow: 0 1px 8px rgb(0 0 0 / 40%); }
.image-stamp { position: absolute; top: 32px; right: 34px; width: 65px; height: 65px; display: grid; place-content: center; border: 1px solid rgb(255 255 255 / 70%); border-radius: 50%; text-align: center; font: 700 18px/1.05 var(--display); transform: rotate(9deg); }
.image-stamp span { font: 10px/1.8 var(--mono); letter-spacing: .12em; }
.hero-index { position: absolute; bottom: 40px; left: 6.1vw; writing-mode: vertical-rl; transform: rotate(180deg); color: #92a39a; font-size: 10px; }

.section-wrap { padding-left: 12.2vw; padding-right: 12.2vw; }
.intro { display: grid; grid-template-columns: .62fr 1.38fr; gap: 4vw; padding-top: 126px; padding-bottom: 134px; background: var(--paper); }
.section-label { display: flex; gap: 17px; color: #78847e; padding-top: 10px; }
.section-label span:first-child { color: var(--accent); }
.intro-content { display: grid; grid-template-columns: 1fr 1fr; gap: 5vw; align-items: start; }
.intro h2 { margin: 0; font-size: clamp(37px, 4.25vw, 58px); line-height: 1.06; }
.intro h2 em { color: var(--accent); }
.intro-text { padding-top: 4px; color: var(--ink-soft); font-size: 14px; line-height: 1.9; }
.intro-text p { margin-bottom: 17px; }
.intro-interests { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 26px 0 9px; }
.intro-interests .item-kicker { flex-basis: 100%; margin: 0 0 3px; }
.intro-interests > span:not(.item-kicker) { padding: 7px 10px; border: 1px solid #d7dad1; border-radius: 3px; color: var(--ink); font-size: 11px; line-height: 1.4; }
.underlined-link { display: inline-block; margin-top: 9px; padding-bottom: 6px; border-bottom: 1px solid var(--ink); color: var(--ink); font-size: 12px; font-weight: 800; }
.underlined-link span { color: var(--accent); margin-left: 9px; }

.projects { padding-top: 108px; padding-bottom: 112px; background: #edf0e9; }
.projects .section-heading { margin-bottom: 27px; border-color: #cfd6ce; }
.all-projects-link { flex: none; padding-bottom: 5px; border-bottom: 1px solid #9da9a0; color: var(--ink-soft); font-size: 11px; font-weight: 700; }
.all-projects-link span { margin-left: 5px; color: var(--accent); }
.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.project-card { min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--paper-light); border-top: 2px solid var(--ink); border-radius: 4px; box-shadow: 0 5px 18px rgb(23 43 38 / 5%); transition: transform 220ms ease, box-shadow 220ms ease; }
.project-card:hover { transform: translateY(-4px); box-shadow: 0 15px 32px rgb(23 43 38 / 12%); }
.project-featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1.08fr .92fr; }
.project-visual { min-height: 164px; position: relative; overflow: hidden; }
.project-featured .project-visual { min-height: 292px; }
.visual-index { position: absolute; z-index: 2; top: 17px; left: 19px; color: var(--ink); font: 10px var(--mono); letter-spacing: .07em; }
.visual-game { background: #bce8f3 url("https://raw.githubusercontent.com/JosipAMB/Rekenridders/main/Assets/Background_1.png") center / cover no-repeat; }
.game-title { position: absolute; z-index: 1; top: 53px; left: 23px; color: #17372e; font: 800 clamp(26px, 4vw, 48px)/.88 var(--display); }
.game-dragon { position: absolute; z-index: 1; right: 16%; bottom: 15%; width: 104px; height: auto; image-rendering: pixelated; mix-blend-mode: multiply; }
.game-ground { position: absolute; right: 0; bottom: 0; left: 0; height: 20%; border-top: 7px solid #819c4e; background: repeating-linear-gradient(90deg, #557b43 0 22px, #66894d 22px 43px); }
.project-body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 19px 20px 20px; }
.project-featured .project-body { justify-content: center; padding: 30px clamp(23px, 3vw, 42px); }
.project-category { margin-bottom: 9px; color: #69776f; font: 10px var(--mono); text-transform: uppercase; }
.project-category span { padding: 0 4px; color: var(--accent); }
.project-body h3 { margin: 0 0 10px; font: 700 22px/1.15 var(--display); }
.project-body > p:not(.project-category) { margin-bottom: 15px; color: var(--ink-soft); font-size: 12px; line-height: 1.8; }
.project-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: auto 0 18px; color: #77847c; font: 10px var(--mono); }
.project-meta span::before { content: "+"; margin-right: 5px; color: var(--accent); }
.project-link { display: inline-flex; align-items: center; gap: 9px; padding-bottom: 5px; border-bottom: 1px solid #aab4ac; font-size: 11px; font-weight: 800; }
.project-link span { color: var(--accent); }
.visual-events { background: #f0c37e; }
.events-art { position: absolute; inset: 42px 20px 16px; display: flex; flex-direction: column; justify-content: center; padding: 13px 19px; background: #fffaf0; color: var(--ink); box-shadow: 6px 6px 0 #d89f60; }
.events-art-label, .events-art-footer, .shop-art-small, .zuul-prompt, .zuul-subtitle { font: 10px var(--mono); letter-spacing: .06em; }
.events-art strong { margin: 9px 0; font: 700 clamp(18px, 2.5vw, 27px)/.95 var(--display); }
.events-art strong em { color: #d8674c; font-style: normal; }
.events-art-footer { display: flex; justify-content: space-between; color: #67776e; }
.events-art-footer b { color: var(--accent); }
.visual-orbit { position: absolute; top: -39px; right: -22px; width: 105px; height: 105px; border: 1px solid rgb(23 43 38 / 28%); border-radius: 50%; }
.visual-shop { background: #dce8df; }
.shop-art { position: absolute; inset: 35px 20px 14px; overflow: hidden; background: #1c342d; color: #f6f3e9; }
.shop-art-small { position: absolute; top: 15px; left: 16px; color: #bed8c8; }
.shop-art strong { position: absolute; top: 39px; left: 16px; z-index: 1; font: 700 clamp(16px, 2.2vw, 25px)/.93 var(--display); }
.shop-art strong span { color: var(--accent); }
.pc-tower { position: absolute; right: 21%; bottom: 13px; width: 48px; height: 81px; padding: 9px 7px; border: 2px solid #d8e8dc; background: #304a40; transform: skewY(-4deg); }
.pc-tower i { display: block; width: 100%; height: 12px; margin-bottom: 5px; border: 1px solid #91c7a4; border-radius: 50%; box-shadow: 0 0 8px #91c7a4; }
.pc-screen { position: absolute; right: 6%; bottom: 26px; width: 83px; height: 56px; border: 3px solid #f3f0e5; background: linear-gradient(135deg, #e87958, #e8c476 44%, #477967 45%); }
.pc-screen i { position: absolute; bottom: -12px; left: 37px; width: 5px; height: 11px; background: #f3f0e5; }
.pc-base { position: absolute; right: 22%; bottom: 8px; width: 106px; height: 3px; background: #f3f0e5; }
.visual-zuul { background: #25343d; color: #e7efe6; }
.visual-zuul .visual-index { color: #c5d9cf; }
.zuul-art { position: absolute; inset: 40px 20px 18px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding-left: 17px; background: #17252b; }
.zuul-prompt { z-index: 1; color: #99c9a2; }
.zuul-art strong { z-index: 1; margin: 4px 0 1px; color: #f3e3bb; font: 800 clamp(35px, 5vw, 56px)/.9 var(--display); }
.zuul-subtitle { z-index: 1; color: #b7c8c0; }
.maze-lines { position: absolute; inset: 0 0 0 47%; opacity: .55; background: repeating-linear-gradient(0deg, transparent 0 21px, #719184 22px 24px, transparent 25px 42px), repeating-linear-gradient(90deg, transparent 0 19px, #719184 20px 22px, transparent 23px 42px); mask-image: linear-gradient(90deg, transparent, #000 42%); }
.project-extras { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 0 22px; margin-top: 27px; padding-top: 18px; border-top: 1px solid #cfd6ce; }
.project-extras .item-kicker { grid-column: 1 / -1; margin-bottom: 6px; }
.project-extras a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid #cfd6ce; font-size: 12px; font-weight: 700; }
.project-extras a span:last-child { color: #77847c; font: 10px var(--mono); }
.project-extras a b { color: var(--accent); }

.experience, .skills { display: grid; grid-template-columns: .62fr 1.38fr; gap: 4vw; padding-top: 108px; padding-bottom: 112px; }
.experience { background: var(--paper-light); }
.section-main { min-width: 0; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 39px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.section-heading h2 { margin: 0; font-size: clamp(30px, 3.4vw, 43px); }
.heading-mark { color: var(--accent); font-size: 25px; }
.timeline-item { display: grid; grid-template-columns: .7fr 1.3fr; gap: 3vw; padding: 0 0 44px; margin-bottom: 39px; border-bottom: 1px solid var(--line); }
.timeline-date { padding-top: 6px; color: #76837d; font-size: 10px; white-space: nowrap; }
.item-kicker { margin-bottom: 10px; color: var(--accent); font-size: 10px; }
.timeline-detail h3 { margin-bottom: 3px; font: 700 21px/1.3 var(--display); }
.item-role { margin-bottom: 13px; color: #626f69; font-size: 13px; }
.item-role span { color: var(--accent); padding: 0 5px; }
.item-description { max-width: 530px; margin-bottom: 12px; color: var(--ink-soft); font-size: 13px; line-height: 1.8; }
.experience-points { margin: 0; padding-left: 16px; color: var(--ink-soft); font-size: 12px; line-height: 1.9; }
.experience-points li::marker { color: var(--accent); }

.skills { padding-top: 98px; padding-bottom: 122px; background: #e9eee7; }
.skills .section-heading { margin-bottom: 32px; border-color: #cdd6cd; }
.skills-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2.5vw; }
.skill-group { min-width: 0; }
.skill-group .item-kicker { margin-bottom: 17px; }
.skill-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.skill-list li { padding: 8px 10px; border: 1px solid #d1d9d0; border-radius: 3px; background: rgb(255 254 250 / 62%); color: var(--ink); font-size: 12px; line-height: 1.4; transition: border-color 180ms ease, transform 180ms ease; }
.skill-list li:hover { transform: translateY(-2px); border-color: #aebfb2; }

.contact { padding: 29px 12.2vw 25px; background: var(--ink); color: var(--paper-light); }
.contact-topline, .contact-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #a4b1aa; font-size: 10px; }
.contact-topline span:first-child { color: var(--accent); }
.contact-content { display: flex; align-items: end; justify-content: space-between; gap: 35px; padding: 76px 0 69px; }
.contact h2 { margin: 0; font-size: clamp(48px, 7vw, 88px); line-height: .97; }
.contact h2 em { color: var(--mint); }
.contact-email { max-width: 100%; padding-bottom: 10px; border-bottom: 1px solid #75847b; color: #e6ece8; font-size: clamp(12px, 1.3vw, 16px); overflow-wrap: anywhere; }
.contact-email span { margin-left: 8px; color: var(--accent); }
.contact-bottom { padding-top: 20px; border-top: 1px solid #40524a; }
.contact-bottom a:hover { color: var(--mint); }
.site-footer { min-height: 77px; padding: 0 6.1vw; display: flex; align-items: center; justify-content: space-between; gap: 18px; background: var(--paper-light); }
.site-footer .wordmark { font-size: 20px; }
.site-footer p, .site-footer a:last-child { margin: 0; color: #69766f; font: 10px var(--mono); }
.site-footer p span { color: var(--accent); }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

body.has-scroll-reveal .section-label,
body.has-scroll-reveal .intro-text,
body.has-scroll-reveal .project-card,
body.has-scroll-reveal .timeline-item,
body.has-scroll-reveal .skill-group,
body.has-scroll-reveal .contact-content {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(.2, .7, .2, 1);
}

body.has-scroll-reveal .is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 1500px) {
  .hero-copy { padding-left: max(12.2vw, calc((100vw - 1240px) / 2)); }
  .section-wrap { padding-left: max(12.2vw, calc((100vw - 1240px) / 2)); padding-right: max(12.2vw, calc((100vw - 1240px) / 2)); }
  .contact { padding-left: max(12.2vw, calc((100vw - 1240px) / 2)); padding-right: max(12.2vw, calc((100vw - 1240px) / 2)); }
}

@media (max-width: 900px) {
  .site-header { padding: 0 6vw; }
  .hero { min-height: 620px; grid-template-columns: 1.12fr .88fr; }
  .hero-copy { padding: 86px 4vw 31px 9vw; }
  .hero h1 { font-size: clamp(56px, 9vw, 78px); }
  .hero-index { left: 3vw; }
  .section-wrap { padding-left: 8vw; padding-right: 8vw; }
  .intro, .experience, .skills { grid-template-columns: .48fr 1.52fr; gap: 3vw; }
  .projects { grid-template-columns: .48fr 1.52fr; gap: 3vw; }
  .intro-content { grid-template-columns: 1fr; gap: 24px; }
  .contact { padding-left: 8vw; padding-right: 8vw; }
}

@media (max-width: 620px) {
  html { scroll-padding-top: 5rem; }
  .site-header { height: 64px; padding: 0 22px; }
  .wordmark { font-size: 23px; }
  .menu-toggle { display: flex; align-items: center; gap: 10px; padding: 10px 0 10px 10px; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
  .menu-toggle-label { font: 11px var(--mono); text-transform: uppercase; }
  .menu-toggle-icon { width: 20px; display: grid; gap: 5px; }
  .menu-toggle-icon i { display: block; height: 1px; background: var(--ink); transition: transform 180ms ease; }
  .menu-toggle[aria-expanded="true"] .menu-toggle-icon i:first-child { transform: translateY(3px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle-icon i:last-child { transform: translateY(-3px) rotate(-45deg); }
  .site-nav { display: none; position: absolute; top: 64px; left: 0; right: 0; padding: 8px 22px 22px; flex-direction: column; align-items: stretch; gap: 0; background: var(--paper-light); border-bottom: 1px solid var(--line); }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 13px 0; border-top: 1px solid var(--line); font-size: 13px; }
  .hero { min-height: unset; grid-template-columns: 1fr; }
  .hero-copy { min-width: 0; min-height: 560px; padding: 70px 25px 28px 40px; }
  .hero h1 { font-size: clamp(38px, 12vw, 64px); }
  .hero-intro { max-width: 360px; font-size: 13px; }
  .hero-footnote { padding-top: 36px; }
  .hero-index { left: 13px; bottom: 31px; }
  .hero-image { min-height: 300px; }
  .image-caption { bottom: 24px; left: 22px; right: 22px; font-size: 10px; }
  .image-stamp { top: 20px; right: 22px; width: 56px; height: 56px; }
  .section-wrap { padding-left: 25px; padding-right: 25px; }
  .intro, .experience, .skills { grid-template-columns: 1fr; gap: 31px; padding-top: 72px; padding-bottom: 76px; }
  .projects { grid-template-columns: 1fr; gap: 31px; padding-top: 72px; padding-bottom: 76px; }
  .section-label { padding-top: 0; }
  .intro-content { gap: 19px; }
  .intro h2 { font-size: clamp(39px, 11vw, 53px); }
  .section-heading { margin-bottom: 29px; }
  .section-heading h2 { font-size: 32px; }
  .all-projects-link { font-size: 10px; }
  .project-grid { grid-template-columns: 1fr; gap: 12px; }
  .project-featured { grid-column: auto; grid-template-columns: 1fr; }
  .project-featured .project-visual { min-height: 225px; }
  .project-featured .project-body { padding: 21px 20px; }
  .project-visual { min-height: 175px; }
  .events-art strong { font-size: 26px; }
  .shop-art strong { font-size: 23px; }
  .zuul-art strong { font-size: 48px; }
  .project-extras { grid-template-columns: 1fr; }
  .project-extras .item-kicker { grid-column: auto; }
  .heading-note { display: none; }
  .timeline-item { grid-template-columns: 1fr; gap: 13px; padding-bottom: 30px; margin-bottom: 30px; }
  .timeline-date { padding: 0; }
  .timeline-detail h3 { font-size: 20px; }
  .skills-grid { grid-template-columns: 1fr 1fr; gap: 32px 22px; }
  .skill-group:last-child { grid-column: 1 / -1; }
  .contact { padding: 23px 25px 21px; }
  .contact-topline { font-size: 10px; }
  .contact-content { padding: 60px 0 48px; align-items: flex-start; flex-direction: column; gap: 27px; }
  .contact h2 { font-size: clamp(55px, 15vw, 75px); }
  .contact-email { font-size: 13px; }
  .contact-bottom { align-items: flex-start; flex-direction: column; gap: 13px; padding-top: 19px; }
  .site-footer { padding: 0 22px; }
  .site-footer p { font-size: 10px; }
  .site-footer a:last-child { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
  body.has-scroll-reveal .section-label,
  body.has-scroll-reveal .intro-text,
  body.has-scroll-reveal .project-card,
  body.has-scroll-reveal .timeline-item,
  body.has-scroll-reveal .skill-group,
  body.has-scroll-reveal .contact-content {
    opacity: 1;
    transform: none;
  }
}