:root{
  --purple:#9320db;
  --white:#ffffff;
  --black:#070707;
  --bg: var(--black);
  --maxw: 1920px;
  --padTop: 52px;
  --homeY: 32;
  --homeW: 1920;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{ margin:0; background:var(--bg); color:var(--white); }

.ph-page{ min-height:100%; padding-top: var(--padTop); }
.ph-wrap{ width:min(100%, var(--maxw)); margin:0 auto; position:relative; }
.ph-artboard{ display:block; width:100%; height:auto; }

.ph-artboard #MENU_{ display:none; }

/* Montserrat Regular only where needed (v9 + your new screenshots) */
.ph-artboard--home .cls-25{font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;font-weight:400 !important;}
.ph-artboard--about .cls-7{font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;font-weight:400 !important;}
.ph-artboard--works .cls-13{font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;font-weight:400 !important;}
.ph-artboard--blog .cls-13{font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;font-weight:400 !important;}
.ph-artboard--contact .cls-18{font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;font-weight:400 !important;}
.ph-artboard--home .cls-11{font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;font-weight:400 !important;}
.ph-artboard--home .cls-12{font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;font-weight:400 !important;}
.ph-artboard--about .cls-13{font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;font-weight:400 !important;}
.ph-artboard--works .cls-11{font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;font-weight:400 !important;}
.ph-artboard--blog .cls-10{font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;font-weight:400 !important;}

/* MENU (Fira Code 20px, aligned with 90429 line) */
.ph-menuToggle{
  position:fixed;
  top: calc(var(--padTop) + (var(--homeY) / var(--homeW)) * min(100vw, var(--maxw)));
  right: var(--padTop);
  z-index:9999;
  text-align:right;
  font-family:"Fira Code",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  font-weight:500;
  font-size:20px;
  line-height:1;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--white);
}
.ph-menuToggle input{ position:absolute; opacity:0; pointer-events:none; }
.ph-menuToggle label{ cursor:pointer; user-select:none; display:inline-flex; align-items:baseline; justify-content:flex-end; gap:18px; }
.ph-panel{ display:none; margin-top:34px; }
.ph-panel a{ display:block; color:var(--purple); text-decoration:none; font:inherit; padding:18px 0; width:max-content; margin-left:auto; }
.ph-panel a:hover,.ph-panel a:focus-visible{ text-decoration:underline; }
.ph-menuToggle input:checked ~ .ph-panel{ display:block; }

/* Hearts hover inversion (ALL hearts, all pages) */
.ph-artboard path.cls-8,
.ph-artboard polygon.cls-8,
.ph-artboard rect.cls-8,
.ph-artboard path.cls-9,
.ph-artboard polygon.cls-9,
.ph-artboard rect.cls-9{
  stroke:none !important;
  outline:none !important;
  transition: fill .15s ease;
}
.ph-artboard path.cls-8:hover,
.ph-artboard polygon.cls-8:hover,
.ph-artboard rect.cls-8:hover{ fill: var(--white) !important; cursor:pointer; }
.ph-artboard path.cls-9:hover,
.ph-artboard polygon.cls-9:hover,
.ph-artboard rect.cls-9:hover{ fill: var(--purple) !important; cursor:pointer; }

/* Footer overlays */
.ph-footerLinks{ position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; z-index:40; }
.ph-footerLinks a{ position:absolute; pointer-events:auto; display:block; background:transparent; text-decoration:none; }
.ph-f-home{ left:62%; top:92%; width:32%; height:6%; }
.ph-f-about{ left:32%; top:67.5%; width:8%; height:4%; }
.ph-f-blog{ left:32%; top:74.5%; width:8%; height:4%; }
.ph-f-works{ left:56%; top:67.5%; width:10%; height:4%; }
.ph-f-contact{ left:56%; top:74.5%; width:14%; height:4%; }
.ph-f-proj1{ left:32%; top:82.5%; width:22%; height:4%; }
.ph-f-proj2{ left:32%; top:88.0%; width:18%; height:4%; }
.ph-f-proj3{ left:56%; top:82.5%; width:22%; height:4%; }


/* Contact page: hide duplicate purple menu texts from the exported SVG (keep only HTML menu) */
.ph-artboard--contact #ABOUT_,
.ph-artboard--contact #WORKS_,
.ph-artboard--contact #BLOG_,
.ph-artboard--contact #CONTACT_{
  display:none !important;
}


/* HOME: link overlays for the in-design text navigation and project list */
.ph-homeLinks{
  position:absolute;
  left:0; top:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index: 60;
}
.ph-homeLinks a{
  position:absolute;
  pointer-events:auto;
  display:block;
}

/* Top navigation (ABOUT/BLOG/WORKS/CONTACT) */
.ph-h-about{ left: 48.5%; top: 12.6%; width: 14%; height: 2.2%; }
.ph-h-blog{  left: 48.5%; top: 13.9%; width: 14%; height: 2.2%; }
.ph-h-works{ left: 73.5%; top: 12.6%; width: 14%; height: 2.2%; }
.ph-h-contact{left: 73.5%; top: 13.9%; width: 18%; height: 2.2%; }

/* Project list -> WORKS (bigger hitboxes) */
.ph-h-proj-dt{ left:  7.5%; top: 94.7%; width: 34%; height: 2.4%; }
.ph-h-proj-sg{ left:  7.5%; top: 96.2%; width: 30%; height: 2.4%; }
.ph-h-proj-bj{ left: 52.5%; top: 94.7%; width: 40%; height: 2.4%; }


/* HOME: PROJECT LINKS -> WORKS (robust click zones, no SVG edits) */
.ph-homeProjectLinks{
  position:absolute;
  left:0; top:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index: 999;
}
.ph-homeProjectLinks a{
  position:absolute;
  pointer-events:auto;
  display:block;
}

/* Generous hitboxes around the three project titles in the footer area */
.ph-pl-dt{ left:  5%; top: 94.3%; width: 45%; height: 3.0%; }  /* Design Topics / Poster */
.ph-pl-sg{ left:  5%; top: 95.9%; width: 45%; height: 3.0%; }  /* Ster Geluid / UI */
.ph-pl-bj{ left: 48%; top: 94.3%; width: 47%; height: 3.0%; }  /* Björn Furnitures / 3D */

/* === HEART HOVER FIX (ALL PAGES) === */
svg path,
svg polygon,
svg rect {
  transition: fill 0.2s ease;
}

svg path[fill="#ffffff"]:hover,
svg path[fill="#fff"]:hover {
  fill: #9320db !important;
}

svg path[fill="#9320db"]:hover {
  fill: #ffffff !important;
}

svg polygon[fill="#ffffff"]:hover,
svg polygon[fill="#fff"]:hover {
  fill: #9320db !important;
}

svg polygon[fill="#9320db"]:hover {
  fill: #ffffff !important;
}

svg rect[fill="#ffffff"]:hover {
  fill: #9320db !important;
}

svg rect[fill="#9320db"]:hover {
  fill: #ffffff !important;
}

svg * {
  stroke: none !important;
}

/* ============================
   RESTORE THIN WHITE LINES
   ============================ */

svg line {
  stroke: #ffffff !important;
  stroke-width: 1px !important;
  opacity: 1 !important;
  vector-effect: non-scaling-stroke;
}

/* in case XD exported them as thin rectangles */
svg rect {
  fill: #ffffff;
}