body {
            font-family: 'Georgia', serif;
            background-color: #FFFBF0; /* General background colour */
            color: #000; /* Black */
            margin: 0;
            padding: 0;
        }

		.home-link {
  			text-decoration: none;   /* remove underline */
  			color: inherit;          /* same color as title text */
		}

		.home-link:hover {
  			opacity: 0.9;            /* subtle feedback on hover */
		}

        /* ================================= HEADER ================================= */

        /* Fixed Header Base */
		.fixed-header {
		    position: fixed;
		    top: 0;
		    left: 0;
		    right: 0;
		    width: 100%;
		    background-color: #AFD2F3;
		    color: #FFF;
		    display: flex;
		    justify-content: center;
		    padding: 12px 20px;
		    box-sizing: border-box;
		    transition: padding 0.3s ease, background-color 0.3s ease;
		    z-index: 1000;
		    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		    overflow: visible;
		}
		
		/* Wrapper */
		.fixed-header .header-inner {
		    display: flex;
		    align-items: center;
		    justify-content: center;
			position: relative;
		    width: 100%;
		    max-width: 1200px;
		    margin: 0 auto;
		    box-sizing: border-box;
		}
		
		/* Banner Image (replaces logo + title) */
		 .header-banner {
			height: 60px;
			width: auto;
			display: block;
			margin: 0 auto;
			transition: height 0.3s ease;
		 }

		.header-inner nav {
		    position: absolute;
		    right: 20px;
		    top: 50%;
		    transform: translateY(-50%); /* vertically centered */
		    display: flex;
		    gap: 18px;
		}
		
		/* Banner should stay clickable */
		.header-inner a {
		    display: flex;
		    align-items: center;
		}
		
		/* Nav stays same */
		.fixed-header nav {
		    display: flex;
		    gap: 16px;
		    align-items: center;
		}
		
		.fixed-header .nav-link {
		    color: #68498E;
		    text-decoration: none;
		    font-size: 1.15em;
		    font-weight: 500;
			padding: 4px 2px;
		    transition: color 0.3s ease;
		}
		
		.fixed-header .nav-link:hover {
		    opacity: 0.8;
		}
		
		/* Remove old logo/title completely */
		.fixed-header img.logo,
		.fixed-header h1 {
		    display: none !important;
		}
		
		/* Shrink behavior */
		.fixed-header.shrink {
		    padding: 6px 20px;
		    height: 60px;
		}
		
		.fixed-header.shrink .header-banner {
		    height: 40px;    /* small banner on scroll */
		    transition: height 0.2s ease;
		}

        section {
            padding: 40px 20px;
        }
        
        section:first-of-type {
          padding-top: 120px; /* Adjust depending on header size */
        }

        /* ================================= INTRO ================================= */
        /* ===== PROJECTS                                             PROJECTS ===== */
        /* ================================= INTRO ================================= */

		.intro {
			margin-top: 50px; 
			text-align: center;
		}

		.intro h2 {
			color: #000;
		}

	    .project-page {
		  	display: flex;
		  	flex-direction: column;
		  	gap: 60px;
		  	padding-top: 50px;
		}

		/* Each section: collage + text in columns */
		.project-section {
  			display: grid;
  			grid-template-columns: 1fr 1fr;
  			gap: 40px;
  			align-items: center;
		}

		.project-images {
		  	position: relative;  
		  	width: 700px;   /* adjust to your liking */
		  	height: 450px;  /* adjust to your liking */
			margin-left: 10%; /* adjust until it looks perfect */
		}

		.project-images img {
			position: absolute;
		  	width: 100%;
		  	height: 100%;
		  	object-fit: cover;
		  	border-radius: 12px;
		  	box-shadow: 0 4px 12px rgba(0,0,0,0.25);
		  	transition: transform 0.3s ease, z-index 0.3s ease;
		  	cursor: pointer;
		}
		
		/* Left image slightly up and left */
		.project-images .img-left {
		  	top: -20px;
		  	left: -20px;
		  	z-index: 1;
		}
		
		/* Right image slightly down and right */
		.project-images .img-right {
		  	bottom: -20px;
		  	right: -20px;
		  	z-index: 2;
		}
		
		/* Hover effect for BOTH images */
		.project-images img:hover {
		  	transform: scale(1.06);
		  	z-index: 5;
		}

		.project-text {
		  	color: #000;
			margin-right: 10%;
		}

        /* ================================= WELCOME ================================= */
        /* =====                                                                 ===== */
        /* ================================= WELCOME ================================= */

        .welcome {
            background-color: #FFFBF0; /* Light beige */
            align-items: center; /* centers items horizontally */
            justify-content: center; /* vertical centering if you have fixed height */
            text-align: center;
            padding: 60px 20px;
        }

        .welcome h2 {
            font-size: 2.5em;
            margin-bottom: 20px;
            color: #000;
        }

        .welcome p {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            margin-top: 10px;
            max-width: 1000px;
            font-size: 1.2em;
            line-height: 1.6;
            margin-left: auto;
            margin-right: auto;
            color: #000;
        }

        /* ================================= IMAGE TEXT ================================= */
        /* =====                                                                    ===== */
        /* ================================= IMAGE TEXT ================================= */

        .image-text {
          display: grid;
          align-items: end;
          gap: 40px;
          background-color: #FFFBF0;
          padding: 50px;
          color: #000;
          grid-template-columns: 1fr 1fr; /* left and right halves */
          margin: 60px 0;
        }
     
        .image-collage {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          grid-gap: 10px;
        }

        .image-collage img {
          width: 100%;
          border-radius: 8px;
          object-fit: cover;
        }

        .image-collage img:last-child {
          grid-column: span 2;
        }

/* Text + extra image on the right */
        .text-content {
          display: flex;
          flex-direction: column;
          gap: 16px;
        }

        .text-content .extra-image {
          width: 100%;
          border-radius: 8px;
          margin-top: 10px;
          object-fit: cover;
        }
        
        .slice {
          width: 100%;
          height: 300px;         /* controls how tall the visible slice is */
          object-fit: cover;     /* zooms & crops to fill the box */
          object-position: center mid; /* choose which part to show (e.g., top, bottom, 20% 80%) */
          border-radius: 8px;
        }

        /* Use a shared gutter for dots */
        :root {
          --bullet-gutter: 1.5rem; /* tweak to taste */
        }
        
        /* Parent lays out children side-by-side on desktop */
        .info-pair {
          display: flex;
          gap: 24px;
          align-items: stretch;
          margin: 40px 0;
        }

        /* Each child takes equal width, with a nice card look */
        .info-pair > * {
          flex: 1 1 0;
          padding: 28px;
          border-radius: 14px;
          box-shadow: 0 4px 18px rgba(0,0,0,0.08);
        }

        /* Keep your brown/beige palette */
        .contact {
          background: #AFD2F3;     /* Lila 7678 C */
          color: #68498E;          /* Grå vit */
        }

        .contact a {
          color: #C8358C;          /* Grå vit */
        }
        
        .joinus {
          background: #AFD2F3;     /* Lila 7678 C */
          color: #68498E;          /* Grå vit */
          text-align: center;
          align-items: center;
        }

		.joinus a {
          color: #C8358C;          /* Grå vit */
        }

        /* Optional: unified heading style inside pair */
        .info-pair h2 {
          margin-top: 0;
          text-align: center;
          color: #68498E;
        }

        /* Simple button style */
        .btn {
          display: inline-block;
          padding: 10px 16px;
          border-radius: 999px;
          background: #AFD2F3; /* Blue */
          color: #68498E;
          text-decoration: none;
        }

        /* ========================================================================= */
        /* ===== CALENDAR                                             CALENDAR ===== */
        /* ========================================================================= */

		/* === CALENDAR PAGE === */
		.calendar-page {
		  padding: 120px 5% 60px;
		  text-align: center;
		}
		
		.calendar-container {
		  margin-top: 120px;
		  text-align: center;
		  color: #000;
		}
		
		.calendar-container h2 {
		  color: #000;
		}
		
		/* === NAVIGATION === */
		.calendar-nav {
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  gap: 20px;
		  margin-bottom: 20px;
		  color: #000;
		}
		
		.calendar-nav h3 {
		  color: #000;
		}
		
		.calendar-nav button {
		  background-color: #68498E;
		  color: white;
		  border: none;
		  border-radius: 6px;
		  padding: 8px 14px;
		  cursor: pointer;
		}
		
		.calendar-nav button:hover {
		  background-color: #FDD26E;
		}
		
		/* === CALENDAR GRID === */
		#calendar {
		  display: grid;
		  grid-template-columns: repeat(7, minmax(0, 1fr));
		  gap: 4px;
		  width: 100%;
		  max-width: 700px;
		  margin: 0 auto;
		  padding: 10px;
		  box-sizing: border-box;
		}
		
		/* === DAY CELLS === */
		.day {
		  aspect-ratio: 1 / 1; /* ensures perfect squares */
		  background: #68498E;
		  border-radius: 10px;
		  padding: 4px;
		  display: flex;
		  align-items: center;
		  flex-direction: column;
		  justify-content: center;
		  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
		  box-sizing: border-box;
		  transition: transform 0.2s ease;
		  cursor: pointer;
		  text-align: center;
		}
		
		.day:hover {
		  background-color: #FDD26E;
		  transform: scale(1.03);
		}
		
		.day .date {
		  font-weight: bold;
		  color: #FFFBF0;
		  font-size: 0.9rem;
		  margin-bottom: 2px;
		}

		.weekday-header {
		  display: grid;
		  grid-template-columns: repeat(7, minmax(0, 1fr));
		  gap: 4px; 
		  text-align: center;
		  font-weight: bold;
		  color: #29160C;
		  margin: 0 auto 6px auto;
		  max-width: 700px;
		  width: 100%;
		  padding: 10px;
		  font-size: 0.85rem;
		  box-sizing: border-box;
		}
		
		.weekday-header div {
		  padding: 4px 0;
		  background-color: #FFFBF0; /* soft beige tone */
		  border-radius: 6px;
		  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
		}
		
		/* === EVENT DOTS === */
		.dots {
		  display: grid;
		  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
		  column-gap: 3px;
		  row-gap: 2px;
		  justify-items: center;
		  align-items: center;
		  justify-content: center; /* centers the grid itself */
		  align-content: center;
		  margin: 4px auto 0 auto;
		  width: 100%;
		  max-width: 40px; /* keeps it visually centered even in wide day boxes */
		  grid-auto-flow: dense;
		}
		
		.dot {
		  width: 16px;
		  height: 16px;
		  border-radius: 50%;
		  box-shadow:
		    0 0 3px rgba(0, 0, 0, 0.4),      /* subtle dark shadow */
		    0 0 3px currentColor;            /* glow in the dot’s color */
		  color: inherit; /* ensures currentColor matches the background color */
		}
		
		/* === SPECIAL STATES === */
		.past-day {
		  opacity: 0.85;
		  filter: grayscale(20%);
		}
		
		.today {
		  border: 4px solid #C8358C;
		  border-radius: 8px;
		  box-shadow: 0 0 6px rgba(139, 94, 60, 0.4);
		  transform: scale(1.02);
		  transition: all 0.2s ease;
		}
		
		.today:hover {
		  transform: scale(1.05);
		  box-shadow: 0 0 10px rgba(139, 94, 60, 0.6);
		}
		
		/* === POPUP === */
		#eventPopup {
		  position: fixed;
		  inset: 0;
		  background: rgba(0, 0, 0, 0.5);
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  z-index: 1000;
		}
		
		.popup {
		  position: fixed;
		  top: 0;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  background-color: rgba(0, 0, 0, 0.5);
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  opacity: 0;
		  pointer-events: none;
		  transition: opacity 0.2s ease;
		}
		
		.hidden {
		  display: none;
		}
		
		.popup-content {
		  background: #fff8ef; /* your beige tone */
		  border-radius: 12px;
		  padding: 20px;
		  max-width: 45vw;        /* never wider than viewport */
		  max-height: 80vh;       /* prevent going off-screen vertically */
		  overflow-y: auto;       /* scroll if content too tall */
		  word-wrap: break-word;  /* break long words if needed */
		  white-space: normal;    /* ensure text wraps */
		  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
		}
		
		.popup-content h3 {
		  color: #000;
		}
		
		.popup-content ul {
		  color: #000;
		}
		
		.popup:not(.hidden) {
		  opacity: 1;
		  pointer-events: all;
		}
		
		#closePopup {
		  position: absolute;
		  top: 10px;
		  right: 14px;
		  cursor: pointer;
		  font-size: 22px;
		}

		/* List inside popup */
		#eventList li {
		  margin-bottom: 1rem;
		  padding: 0.5rem 0;
		  border-bottom: 1px solid rgba(0,0,0,0.1);
		  line-height: 1.4;
		  color: #333;
		}
		
		/* Optional: make emoji lines align neatly */
		#eventList li strong {
		  display: block;
		  margin-bottom: 4px;
		}

        /* ================================= SOCIAL ================================= */

        .social {
            text-align: center;
            align-items: center;
            color: #000;
        }

        /* ================================= FOOTER ================================= */

		.site-footer {
		    background-color: #AFD2F3;
		    color: #68498E;
		    padding: 20px 0;
		    position: relative;
		    width: 100%;
		}
		
		.footer-inner {
		    max-width: 1200px;
		    margin: 0 auto;
		    position: relative; /* lets us absolutely position logo */
		    text-align: center; /* centers the text */
		}
		
		.footer-logo {
		    position: absolute;
		    left: 20px;
		    top: 50%;
		    transform: translateY(-50%);
		    height: 40px;        /* adjust as needed */
		}
		
		.footer-text {
		    margin: 0;
		    font-size: 0.9em;
		}


        /* ================================= PHONE ACCESSIBILITY ================================= */

        @media (max-width: 768px) {
		  /* HEADER */
	    .fixed-header {
	        padding: 14px 16px;
	    }
	
	    .fixed-header .header-inner {
	        flex-direction: column;
	        align-items: center;
	        width: 100%;
	        gap: 5px;
	    }

		.header-inner nav {
	        position: static;
	        transform: none;
	        margin-top: 6px;
	        justify-content: center;
    	}

		.header-banner {
        	height: 48px;
    	}
	
	    /* New header image */
	    .header-image {
	        width: 80%;          /* Shrinks nicely on mobile */
	        max-width: 300px;
	        height: auto;
	    }
	
	    nav {
	        display: flex;
	        gap: 20px;
	        justify-content: center;
	        width: 100%;
	    }

	    .nav-link {
	        font-size: 1.05em;
	        padding: 6px 4px;
	    }

	    .fixed-header.shrink {
	        padding: 8px 16px;
	    }

	    .fixed-header.shrink .header-banner {
	        height: 18px;
	    }
		
		.welcome {
		    margin-top: 100px;
		}
		
		  /* IMAGE-TEXT layout */
		.image-text {
		    display: flex;
		    flex-direction: column;
		    gap: 5px;
		    align-items: center;
		}
		
		.image-text .text-content {
		    max-width: 100%;
		    order: 2;
		    text-align: center;
		    display: flex;
		    flex-direction: column;
		    gap: 5px;
		}
		
		  .text-content .extra-image {
		    order: 3;
		    width: 100%;
		    height: auto;
		    margin-top: 16px;
		  }
		
		  .info-pair {
		    flex-direction: column;
		  }
		
		  .intro {
		    margin-top: 50px;
		  }
		
		  .project-section {
		    grid-template-columns: 1fr;
		  }

		  .project-images {
		    width: 80%;
		    height: 180px;
		    margin: 0 auto;
		  }
		
		  .project-images .img-left,
		  .project-images .img-right {
		    top: 0;
		    left: 0;
		    bottom: 0;
		    right: 0;
		  }
		
		  .project-images img {
		    position: absolute;
		    width: 95%;            /* smaller images on small screens */
		    height: 95%;
		  }
		
		  /* Keep the overlap but subtler */
		  .project-images .img-left {
		    transform: translate(-4%, -4%);
		  }
		
		  .project-images .img-right {
		    transform: translate(4%, 4%);
		  }
		
		  /* CALENDAR SECTION */
		  #calendar {
		    max-width: 95vw; /* fits phone screen */
		    gap: 3px;
		    padding: 5px;
		  }

		  .calendar-container {
		    margin-top: 170px;
		  }
		
		  .day {
		    aspect-ratio: 1 / 1;
		    padding: 3px;
		  }
		
		  .day .date {
		    font-size: 0.7rem;
		  }

		  .weekday-header {
		    gap: 3px; /* match mobile calendar gap */
		    font-size: 0.7rem;
		    max-width:  95vw;
			padding: 5px;
		  }
		
		  .weekday-header div {
		    padding: 2px 0;
		  }
			
		  .dots {
		    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
		    gap: 2px;
		  }
		
		  .dot {
		    width: 12px;
		    height: 12px;
		  }

		  .popup-content {
		    max-width: 70vw;        /* never wider than viewport */
			max-height: 80vh;
		  }
		  .footer-logo {
		      height: 32px;
		      left: 10px;
		  }
		
		  .footer-text {
		      font-size: 0.8em;
		  }
		}