:root {
            --black: #000000;
            --charcoal: #111111;
            --ivory: #D8D2C8;
            --muted: #9A958D;
            --bronze: #947C5D;
            --bronze-light: #B39A76;
        }

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            background: var(--black);
            color: var(--ivory);
            font-family: Georgia, "Times New Roman", serif;
            line-height: 1.6;
        }

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

        /* ------------------------------
           HEADER / NAVIGATION
        ------------------------------ */

        .site-header {
            width: min(1200px, calc(100% - 80px));
            margin: 0 auto;
            padding: 28px 0 20px;
            /*border-bottom: 1px solid var(--bronze);*/
			border-bottom: 1px solid rgba(148, 124, 93, 0.65);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 30px;
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 30px;
            white-space: nowrap;
        }

        .brand-name {
            font-size: 1.15rem;
            letter-spacing: 0.35em;
            text-transform: uppercase;
        }

   /*     .brand-line {
            width: 155px;
            height: 1px;
            background: var(--bronze);
        } */

        .nav {
            display: flex;
            gap: 34px;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 0.72rem;
            letter-spacing: 0.2em;
            text-transform: uppercase;
        }

        .nav a {
            color: var(--ivory);
            padding-bottom: 8px;
            border-bottom: 2px solid transparent;
            transition: color 0.2s ease, border-color 0.2s ease;
        }

        .nav a:hover,
        .nav a.active {
            color: var(--bronze-light);
            border-bottom-color: var(--bronze);
        }

        /* ------------------------------
           MAIN CONTENT
        ------------------------------ */

        main {
            width: min(1200px, calc(100% - 80px));
            margin: 0 auto;
        }

        .intro {
            position: relative;
            min-height: 210px;
            padding: 78px 0 30px;
        }

        .intro-copy {
            max-width: 650px;
            position: relative;
            z-index: 2;
        }

        .intro h1 {
            margin: 0;
            font-size: clamp(2.8rem, 6vw, 4.8rem);
            line-height: 1;
            font-weight: normal;
            letter-spacing: 0.09em;
            text-transform: uppercase;
        }

        .intro-rule {
            width: 65px;
            height: 3px;
            /*background: var(--bronze);*/
            margin: -60px 0 20px; /*prevouis value = -28px*/
        }

        .intro p {
            margin: 20px 0 0;
            max-width: 560px;
            color: var(--ivory);
            font-size: 1.05rem;
            letter-spacing: 0.04em;
        }

		.intro-art {
			position: absolute;
			right: 0%;
			top: 0px; /*prevouis value = 20px*/
			width: 360px;
			height: 220px;
			opacity: 0.75;
			transform: scale(0.75);
			transform-origin: center top;
		}
		
		.cross {
			position: absolute;
			width: 2px;
			background: var(--bronze);
		}
		
		.cross::after {
			content: "";
			position: absolute;
			height: 2px;
			background: var(--bronze);
			left: 50%;
			transform: translateX(-50%);
		}
		
		/* Left cross */
		.cross-left {
			height: 105px;
			left: 65px;
			top: 65px;
		}
		
		.cross-left::after {
			width: 55px;
			top: 28px;
		}
		
		/* Center cross */
		.cross-center {
			height: 155px;
			left: 180px;
			top: 25px;
		}
		
		.cross-center::after {
			width: 75px;
			top: 42px;
		}
		
		/* Right cross */
		.cross-right {
			height: 105px;
			right: 65px;
			top: 65px;
		}
		
		.cross-right::after {
			width: 55px;
			top: 28px;
		}
		
		/* Subtle hill beneath the crosses */
		.calvary-ground {
			position: absolute;
			left: 20px;
			bottom: 20px;
			width: 320px;
			height: 25px; /*adjusts the height of the hill*/
			border-top: 1px solid var(--bronze);
			border-radius: 50% 50% 0 0;
		}
        
		/* ------------------------------
		PROJECT GRID — HORIZONTAL ROWS
		------------------------------ */
		
		.projects {
			display: flex;
			flex-direction: column;
			gap: 16px;
			padding-bottom: 70px;
		}
		
		.project {
			position: relative;
			display: flex;
			align-items: center;
			gap: 24px;
			min-height: 0;
			padding: 18px 20px;
			overflow: hidden;
		
			border: 1px solid var(--bronze);
			background: var(--charcoal);
			text-decoration: none;
		
			transition:
				transform 0.25s ease,
				border-color 0.25s ease;
		}
		
		.project:hover {
			transform: translateY(-2px);
			border-color: var(--bronze-light);
		}
		
		/* Project thumbnail */
		
		.project-image {
			position: relative;
			inset: auto;
			flex: 0 0 190px;
			width: 190px;
			height: 125px;
		
			background: var(--image);
			background-size: cover;
			background-position: center;
		
			transition: transform 0.35s ease;
		}
		/* Sarena Doodles thumbnail only */
		.project-coming-soon .project-image {
			background-size: contain;
			background-repeat: no-repeat;
		}
		
		.project:hover .project-image {
			transform: scale(1.02);
		}
		
		/* Project title and description */
		
		.project-content {
			position: relative;
			inset: auto;
			z-index: 2;
			flex: 1;
			padding: 0;
		}
		
		.project h2 {
			margin: 0;
			font-size: 1.2rem;
			line-height: 1.3;
			font-weight: normal;
			letter-spacing: 0.1em;
			text-transform: uppercase;
		}
		
		.project p {
			margin: 8px 0 0;
			color: var(--ivory);
			font-family: Arial, Helvetica, sans-serif;
			font-size: 0.72rem;
			letter-spacing: 0.12em;
			text-transform: uppercase;
		}
		
		/* Line and arrow */
		
		.project-footer {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			margin-top: 10px;
			padding: 0;
			/*gap: 14px;			
			flex: 0 0 auto;
			margin-left: auto;
			padding: 0;*/
		}
		
		.project-line {
			width: 32px;
			height: 2px;
			background: var(--bronze);
		}
		
		.project-arrow {
			color: var(--bronze-light);
			font-family: Arial, Helvetica, sans-serif;
			font-size: 1.4rem;
			align-self: center; 
			margin-left: auto; 
			flex-shrink: 0;
		}

        /* ------------------------------
           FOOTER
        ------------------------------ */

        .site-footer {
            display: block;
			width: 100%;
			padding: 30px 0 45px;
            text-align: center;
            color: var(--muted);
            font-family: Arial, Helvetica, sans-serif;
            font-size: 0.68rem;
            letter-spacing: 0.25em;
            text-transform: uppercase;
        }
		
        .footer-rule {			
            width: 320px;
            max-width: 70%;
            height: 1px;
            margin: 0 auto 25px;
            background: var(--bronze);
        }

        /* ------------------------------
           RESPONSIVE
        ------------------------------ */

        @media (max-width: 900px) {
            .site-header,
            main {
                width: min(100% - 40px, 700px);
            }

            .site-header {
                align-items: flex-start;
                flex-direction: column;
            }

            .brand-line {
                display: none;
            }

            .nav {
                flex-wrap: wrap;
                gap: 18px 25px;
            }

            .intro-art {
                opacity: 0.35;
                right: -40px;
            }

            .projects {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* ------------------------------
           MOBILE DEVICES
        ------------------------------ */
        
		@media (max-width: 600px) {
		
			.site-header,
			main {
				width: calc(100% - 30px);
			}
			/* Mobile header layout */
			.site-header {
				flex-direction: column;
				align-items: flex-start;
				gap: 16px;
				padding: 22px 0 18px;
			}

			/* Brand */
			.brand {
				gap: 12px;
			}
			
			.brand-name {
				font-size: 1rem;
				letter-spacing: 0.2em;
				white-space: normal;
			}
			
			/* Navigation */			
			.nav {
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-end;
				gap: 12px 18px;
				width: 100%;
				font-size: 0.65rem;
				letter-spacing: 0.1em;
				text-align: right;
			}			
			.nav a {
				padding-bottom: 5px;
			}		
			.intro {
				padding-top: 55px;
			}
		
			.intro h1 {
				font-size: 2.4rem;
			}
			
			.intro p {
				max-width: 270px;
				font-size: 0.85rem;
				line-height: 1.6;
			}
		
			/* Keep the Calvary artwork visible */
			.intro-art {
				display: block;
				width: 360px;
				height: 220px;
				left: auto;
				right: -95px;
				top: 25px;
				opacity: 0.5;
				transform: scale(0.55);
				transform-origin: center top;
			}
		
			/* Compact project rows on mobile */
			.projects {
				display: flex;
				flex-direction: column;
				gap: 12px;
			}
		
			.project {
				display: flex; 
				align-items: center; 
				gap: 10px; 
				min-width: 0; 
				min-height: 0; 
				padding: 12px;
			}
			/* Smaller thumbnail */
			.project-image {
				flex: 0 0 96px; 
				width: 96px; 
				height: 90px;
			}
			/* Allow text to shrink and wrap */ 
			.project-content { 
				flex: 1 1 0; 
				min-width: 0; 
			}
			
		
			.project h2 {
				font-size: 0.78rem; 
				line-height: 1.4; 
				letter-spacing: 0.04em; 
				overflow-wrap: anywhere; 
				word-break: normal;
			}
		
			.project p {
				font-size: 0.62rem; 
				line-height: 1.5; 
				letter-spacing: 0.03em; 
				white-space: normal; 
				overflow-wrap: anywhere;
			}
			/* Keep arrow visible at the right */
			.project-arrow {
				flex: 0 0 auto; 
				margin-left: 0; 
				font-size: 1.1rem;
			}
		}
    
		/* ------------------------------
		ABOUT PAGE
		------------------------------ */
			
			.about-page {
				max-width: 760px;
				margin: 0 auto;
				padding: 85px 0 100px;
			}
			
			.about-eyebrow {
				color: var(--bronze-light);
				font-family: Arial, Helvetica, sans-serif;
				font-size: 0.7rem;
				letter-spacing: 0.22em;
			}
			
			.about-heading h1 {
				margin: 18px 0 22px;
				font-size: clamp(2rem, 4vw, 3rem);
				font-weight: normal;
				letter-spacing: 0.06em;
			}
			
			.about-rule {
				width: 65px;
				height: 2px;
				background: var(--bronze);
				margin-bottom: 38px;
			}
			
			.about-copy p {
				margin: 0 0 24px;
				color: var(--ivory);
				font-size: 1.05rem;
				line-height: 1.9;
			}
			
			.about-back {
				display: inline-block;
				margin-top: 30px;
				color: var(--bronze-light);
				font-family: Arial, Helvetica, sans-serif;
				font-size: 0.75rem;
				letter-spacing: 0.12em;
				text-transform: uppercase;
				transition: color 0.2s ease;
			}
			
			.about-back:hover {
				color: var(--ivory);
			}
			
			@media (max-width: 600px) {
				.about-page {
					padding: 55px 0 70px;
				}
			
				.about-copy p {
					font-size: 0.95rem;
					line-height: 1.8;
				}
			}