:root {
    --lead-color: #1a1a1a;
    --lead-width: 8px;
    --glass-glow: inset 0 0 20px rgba(0,0,0,0.6);

    /* Authentic stained glass colors */
    --glass-red: #d80129;
    --glass-blue: #1b51ac;
    --glass-green: #00912b;
    --glass-gold: #c2a000;
    --glass-purple: #6a1b9a;
    --glass-orange: #e65100;
    --glass-teal: #00796b;
    --glass-rose: #c2185b;

    /* Accent colors for UI */
    --accent-ruby: #d80129;
    --accent-emerald: #00912b;
    --accent-amber: #c2a000;
    --accent-cobalt: #1b51ac;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--lead-color);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #222;
    min-height: 100vh;
    overflow-x: hidden;
}

.stained-glass-bg {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-auto-rows: 200px;
    gap: var(--lead-width);
    background-color: var(--lead-color);
    filter: blur(7px);            /* frosted-glass blur over the moving stained glass */
    transform: scale(1.06);       /* hide the blur halo at the screen edges (JS adds parallax translate) */
    transform-origin: top center;
    will-change: transform;       /* keep the blurred layer cached for smooth parallax */
    z-index: -2;                  /* behind the dimming veil (body::before, z-index -1) */
}


.shard {
    width: 100%;
    height: 100%;
    box-shadow: var(--glass-glow);
    position: relative;
}

/* Sun glow - applied to each shard from upper-left */
.shard::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 200, 0.9) 0%,
        rgba(255, 240, 150, 0.5) 40%,
        transparent 80%
    );
}

/* Very subtle glass texture - varies per shard */
.shard::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
    mix-blend-mode: overlay;
}

/* Vary texture position so each shard looks different */
.shard:nth-child(3n)::after { background-position: 50px 30px; }
.shard:nth-child(3n+1)::after { background-position: -20px 60px; }
.shard:nth-child(3n+2)::after { background-position: 80px -40px; }
.shard:nth-child(5n)::after { opacity: 0.02; }
.shard:nth-child(7n)::after { opacity: 0.04; }

/* === TOP ROWS: Full complexity - varied diagonal angles === */
.shard-1 { background: linear-gradient(135deg, var(--glass-purple) 48%, #1a1a1a 48%, #1a1a1a 52%, var(--glass-red) 52%); }
.shard-2 { background: linear-gradient(45deg, var(--glass-orange) 48%, #1a1a1a 48%, #1a1a1a 52%, var(--glass-blue) 52%); grid-column: span 2; }
.shard-3 { background: linear-gradient(60deg, var(--glass-gold) 48%, #1a1a1a 48%, #1a1a1a 52%, var(--glass-green) 52%); }
.shard-4 { background: linear-gradient(160deg, var(--glass-gold) 48%, #1a1a1a 48%, #1a1a1a 52%, var(--glass-rose) 52%); grid-row: span 2; }
.shard-5 { background: linear-gradient(25deg, var(--glass-teal) 48%, #1a1a1a 48%, #1a1a1a 52%, var(--glass-blue) 52%); }
.shard-6 { background: linear-gradient(-60deg, var(--glass-purple) 48%, #1a1a1a 48%, #1a1a1a 52%, var(--glass-rose) 52%); }
.shard-7 { background: linear-gradient(110deg, var(--glass-green) 48%, #1a1a1a 48%, #1a1a1a 52%, var(--glass-teal) 52%); grid-column: span 2; }
.shard-8 { background: linear-gradient(-40deg, var(--glass-red) 48%, #1a1a1a 48%, #1a1a1a 52%, var(--glass-orange) 52%); }
.shard:nth-child(9) { background: linear-gradient(-45deg, var(--glass-blue) 48%, #1a1a1a 48%, #1a1a1a 52%, var(--glass-green) 52%); }
.shard:nth-child(10) { background: linear-gradient(70deg, var(--glass-gold) 48%, #1a1a1a 48%, #1a1a1a 52%, var(--glass-red) 52%); }
.shard:nth-child(11) { background: linear-gradient(-30deg, var(--glass-teal) 48%, #1a1a1a 48%, #1a1a1a 52%, var(--glass-purple) 52%); }
.shard:nth-child(12) { background: linear-gradient(150deg, var(--glass-orange) 48%, #1a1a1a 48%, #1a1a1a 52%, var(--glass-blue) 52%); }

/* === MIDDLE ROWS: Fewer colors (5), with lead lines === */
.shard:nth-child(13) { background: linear-gradient(-75deg, var(--glass-blue) 48%, #1a1a1a 48%, #1a1a1a 52%, var(--glass-green) 52%); }
.shard:nth-child(14) { background: linear-gradient(35deg, var(--glass-gold) 48%, #1a1a1a 48%, #1a1a1a 52%, var(--glass-red) 52%); }
.shard:nth-child(15) { background: linear-gradient(-135deg, var(--glass-blue) 48%, #1a1a1a 48%, #1a1a1a 52%, var(--glass-gold) 52%); }
.shard:nth-child(16) { background: linear-gradient(95deg, var(--glass-green) 48%, #1a1a1a 48%, #1a1a1a 52%, var(--glass-red) 52%); }
.shard:nth-child(17) { background: linear-gradient(-15deg, var(--glass-green) 48%, #1a1a1a 48%, #1a1a1a 52%, var(--glass-blue) 52%); }
.shard:nth-child(18) { background: linear-gradient(170deg, var(--glass-red) 48%, #1a1a1a 48%, #1a1a1a 52%, var(--glass-gold) 52%); }
.shard:nth-child(19) { background: linear-gradient(-105deg, var(--glass-gold) 48%, #1a1a1a 48%, #1a1a1a 52%, var(--glass-green) 52%); }
.shard:nth-child(20) { background: linear-gradient(85deg, var(--glass-red) 48%, #1a1a1a 48%, #1a1a1a 52%, var(--glass-blue) 52%); }

/* === LOWER-MIDDLE: Even fewer colors (3), with lead lines === */
.shard:nth-child(21) { background: linear-gradient(55deg, var(--glass-green) 48%, #1a1a1a 48%, #1a1a1a 52%, var(--glass-blue) 52%); }
.shard:nth-child(22) { background: linear-gradient(-70deg, var(--glass-gold) 48%, #1a1a1a 48%, #1a1a1a 52%, var(--glass-green) 52%); }
.shard:nth-child(23) { background: linear-gradient(125deg, var(--glass-blue) 48%, #1a1a1a 48%, #1a1a1a 52%, var(--glass-gold) 52%); }
.shard:nth-child(24) { background: linear-gradient(-25deg, var(--glass-green) 48%, #1a1a1a 48%, #1a1a1a 52%, var(--glass-blue) 52%); }

/* === LOWER ROWS: Simple - solid colors (just 3 colors) === */
.shard:nth-child(25) { background: var(--glass-blue); }
.shard:nth-child(26) { background: var(--glass-green); }
.shard:nth-child(27) { background: var(--glass-gold); }
.shard:nth-child(28) { background: var(--glass-blue); }
.shard:nth-child(29) { background: var(--glass-green); }
.shard:nth-child(30) { background: var(--glass-gold); }
.shard:nth-child(31) { background: var(--glass-blue); }
.shard:nth-child(32) { background: var(--glass-green); }

/* === BOTTOM: Simplest - just 2 colors === */
.shard:nth-child(33) { background: var(--glass-blue); }
.shard:nth-child(34) { background: var(--glass-green); }
.shard:nth-child(35) { background: var(--glass-blue); }
.shard:nth-child(36) { background: var(--glass-green); }
.shard:nth-child(37) { background: var(--glass-blue); }
.shard:nth-child(38) { background: var(--glass-green); }
.shard:nth-child(39) { background: var(--glass-blue); }
.shard:nth-child(40) { background: var(--glass-green); }

/* Fallback for any extras */
.shard:nth-child(n+41):nth-child(odd) { background: var(--glass-green); }
.shard:nth-child(n+41):nth-child(even) { background: var(--glass-blue); }

.frosted-overlay {
    /* the full-screen veil is the card; content just centres on it */
    background: transparent;
    width: var(--content-w);
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 44px 0;
    border: none;
    box-shadow: none;
    border-radius: 0;
    color: #f0f0f0;
    text-shadow: 0 1px 6px rgba(0,0,0,0.85);   /* keep text legible over the dimmed animation */
}

header {
    text-align: center;
    border-bottom: 2px solid rgba(255,255,255,0.2);
    padding-bottom: 20px;
    margin-bottom: 30px;
}

h1 {
    font-size: 2.5rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin: 0 0 5px 0;
    color: #fff;
}

.tagline {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.7);
    margin: 0 0 15px 0;
    font-style: italic;
}

nav {
    margin-top: 15px;
}

nav a {
    text-decoration: none;
    color: rgba(255,255,255,0.85);
    font-weight: bold;
    margin: 0 15px;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    transition: color 0.3s;
}

nav a:hover {
    color: var(--glass-gold);
}

/* Sections */
.section {
    padding: 30px 0;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}

.section:last-child {
    border-bottom: none;
}

.section h2 {
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 20px 0;
    color: #fff;
}

.lead {
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.8);
    margin-bottom: 20px;
}

/* About Section */
.about-content {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.about-image {
    flex: 0 0 200px;
}

.about-image img {
    width: 100%;
    border: 3px solid var(--lead-color);
    box-shadow: 5px 5px 0 rgba(0,0,0,0.1);
}

.about-text {
    flex: 1;
}

.credentials p {
    margin: 8px 0;
    font-size: 0.95rem;
    color: rgba(255,255,255,0.8);
}

.credentials strong {
    color: var(--glass-gold);
}

/* Portfolio Grid */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.portfolio-item {
    border: 2px solid rgba(255,255,255,0.2);
    padding: 10px;
    background: rgba(0,0,0,0.3);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    text-align: center;
    cursor: pointer;
}

.portfolio-item:hover {
    transform: translateY(-3px);
    box-shadow: 5px 5px 15px rgba(0,0,0,0.4);
    border-color: var(--glass-gold);
}

/* Lightbox */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

.lightbox.active {
    display: flex;
}

#lightbox-img {
    max-width: 90vw;
    max-height: 80vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border: 4px solid #fff;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
}

.lightbox-close {
    position: fixed;
    top: 20px;
    right: 30px;
    font-size: 3rem;
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
    z-index: 10000;
}

.lightbox-close:hover {
    color: var(--accent-ruby);
}

#lightbox-caption {
    color: #fff;
    margin-top: 15px;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.portfolio-item span {
    display: block;
    margin-top: 10px;
    font-weight: bold;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.9);
}

.img-frame img {
    width: 100%;
    display: block;
    object-fit: cover;
    aspect-ratio: 1 / 1;        /* square frames — the (square-ish) artwork is barely cropped */
    height: auto;
}

/* Services */
.services-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin-top: 20px;
}

.service-item {
    padding: 20px;
    background: rgba(0,0,0,0.25);
    border-left: 4px solid var(--glass-green);
}

.service-item h3 {
    margin: 0 0 10px 0;
    font-size: 1.1rem;
    color: var(--glass-green-light, #2eb85c);
}

.service-item p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: rgba(255,255,255,0.75);
}

/* Contact */
.contact-details {
    background: rgba(0,0,0,0.25);
    padding: 20px;
    border-left: 4px solid var(--glass-rose);
}

.contact-details p {
    margin: 8px 0;
    color: rgba(255,255,255,0.8);
}

.contact-details a {
    color: var(--glass-rose-light, #f06292);
    text-decoration: none;
}

.contact-details a:hover {
    text-decoration: underline;
    color: #fff;
}

/* Footer */
footer {
    text-align: center;
    padding-top: 30px;
    margin-top: 20px;
    border-top: 2px solid rgba(255,255,255,0.2);
    font-size: 0.9rem;
    color: rgba(255,255,255,0.6);
}

footer a {
    color: var(--glass-blue-light, #4a7dd4);
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
    color: #fff;
}

footer p {
    margin: 5px 0;
}

/* Responsive */
@media (max-width: 700px) {
    .frosted-overlay {
        width: 85%;
        padding: 20px;
        margin: 15px auto;
    }

    .about-content {
        flex-direction: column;
    }

    .about-image {
        flex: none;
        width: 150px;
        margin: 0 auto;
    }

    .portfolio-grid,
    .services-list {
        grid-template-columns: 1fr;
    }

    nav a {
        display: block;
        margin: 8px 0;
    }

    h1 {
        font-size: 1.8rem;
    }

    .stained-glass-bg {
        grid-template-columns: 1fr;
    }
}

/* ===== Ginkgo Glass brand additions ===== */
.logo-plaque {
    display: inline-block;
    background: #fdfcf7;
    padding: 18px 34px;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(0,0,0,0.05);
    line-height: 0;
    transition: transform 0.3s ease;
}
.logo-plaque:hover { transform: translateY(-2px); }
.logo-plaque img {
    width: 320px;
    max-width: 70vw;
    height: auto;
}

/* Contact form (mockup, matches live site fields) */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 520px;
    margin-bottom: 24px;
}
.contact-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.7);
}
.contact-form input,
.contact-form textarea {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 3px;
    padding: 10px 12px;
    color: #fff;
    font-family: inherit;
    font-size: 1rem;
}
.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--glass-green);
    background: rgba(255,255,255,0.12);
}
.contact-form button {
    align-self: flex-start;
    background: var(--glass-green);
    color: #fff;
    border: none;
    padding: 12px 26px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: bold;
    cursor: pointer;
    transition: filter 0.3s;
}
.contact-form button:hover { filter: brightness(1.15); }
.form-note { color: var(--glass-green); font-size: 0.9rem; margin: 0; }

@media (max-width: 768px) {
    .logo-plaque { padding: 14px 20px; }
    .logo-plaque img { width: 240px; }
}

/* ===== Proxima Nova (local) ===== */
@font-face{font-family:"Proxima Nova";font-weight:300;font-style:normal;font-display:swap;src:url("../fonts/ProximaNova-Light.woff2") format("woff2");}
@font-face{font-family:"Proxima Nova";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/ProximaNova-Regular.woff2") format("woff2");}
@font-face{font-family:"Proxima Nova";font-weight:700;font-style:normal;font-display:swap;src:url("../fonts/ProximaNova-Bold.woff2") format("woff2");}
body{font-family:"Proxima Nova","Segoe UI",sans-serif;}
h1,h2,h3,.section h2,.service-item h3,.tagline,nav a,.contact-form button,.contact-form label{font-family:"Proxima Nova","Segoe UI",sans-serif;}
.lead{font-weight:300;}

/* ===== Sticky top menu bar ===== */
/* body bg = lead colour: propagates to the page canvas so the notch/status-bar
   strip shows dark — WITHOUT a background on <html>, so the fixed colourful
   .stained-glass-bg still shows through (background propagation stays intact) */
:root { --content-w: 58%; --content-max: 860px; }
body { background-color: #0e0e12; }

/* translucent dimming layer over the frosted glass — a dedicated fixed full-viewport
   element (over-covers top & bottom) so it always shades, incl. behind the iOS toolbar
   (lower alpha = more animation shows through) */
body::before {
    content: "";
    position: fixed;
    top: -80px; bottom: -80px; left: 0; right: 0;
    background: rgba(9, 9, 13, 0.85);
    z-index: -1;
    pointer-events: none;
}
html { scroll-behavior: smooth; scroll-padding-top: calc(52px + env(safe-area-inset-top, 0px)); }

.topbar {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    margin: 0;                 /* override theme's `nav { margin-top: 15px }` (the gap!) */
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;               /* centre the button band so it lines up with the content column */
    gap: 1rem;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: 0;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    /* translucent lead — more of the animated glass shows through (frosted) */
    background: rgba(14, 14, 18, 0.5);
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    border-bottom: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 2px 14px rgba(0,0,0,0.45);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}
.topbar--hidden { transform: translateY(-100%); }   /* slides up off screen on scroll-down */
.topbar-logo {
    display: flex;
    align-items: center;
    background: #fdfcf7;
    padding: 5px 12px;
    border-radius: 5px;
    line-height: 0;
    flex: 0 0 auto;
}
.topbar-logo img { height: 40px; width: auto; display: block; }
/* nav links rendered as a row of leaded stained-glass panes (borders touch = continuous lead) */
.topbar-links {
    display: flex; gap: 0; flex-wrap: nowrap;
    justify-content: center;               /* menu group centred in the header (desktop) */
    width: auto;
    margin: 0 auto;
}
.topbar-links a:not(:first-child) { margin-left: -2px; }   /* overlap borders into single 2px lead lines */
.topbar-links a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 104px;
    height: 44px;
    padding: 0 16px;
    margin: 0;
    text-decoration: none;
    border: 2px solid #000;                        /* black lead border (came) */
    border-radius: 3px;
    overflow: hidden;
    box-shadow: inset 0 0 9px rgba(0,0,0,0.5);     /* glass set into the lead */
    filter: brightness(0.92);                      /* vivid; only slightly unlit */
    transition: filter 0.2s ease, box-shadow 0.2s ease;
}
.topbar-links a::after {                           /* subtle scrim so labels read on the glass */
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.38) 100%);
}
.topbar-links .pane-label {
    position: relative;
    z-index: 1;
    color: #fff;
    font-family: "Proxima Nova", "Segoe UI", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8rem;
    text-shadow: 0 1px 3px rgba(0,0,0,0.85);
    white-space: nowrap;
}
/* real stained-glass panel images */
.topbar-links a[data-target="about"]     { background: url("../images/nav/pane-about.png")     center / cover no-repeat; }
.topbar-links a[data-target="portfolio"] { background: url("../images/nav/pane-portfolio.png") center / cover no-repeat; }
.topbar-links a[data-target="services"]  { background: url("../images/nav/pane-services.png")  center / cover no-repeat; }
.topbar-links a[data-target="contact"]   { background: url("../images/nav/pane-contact.png")   center / cover no-repeat; }
.topbar-links a:hover { filter: brightness(1.05); }
.topbar-links a.active {                           /* lit section */
    filter: saturate(1.25) brightness(1.18);
    box-shadow: inset 0 0 12px rgba(255,255,255,0.4), 0 0 14px rgba(255,238,200,0.6);
}

/* content starts exactly at the bar's bottom, so the glass only peeks through the bar */
.frosted-overlay { margin-top: calc(48px + env(safe-area-inset-top, 0px)); }

@media (max-width: 1000px) {
    :root { --content-w: 72%; --content-max: 680px; }
}

@media (max-width: 768px) {
    :root { --content-w: 90%; }
    .topbar-links a { min-width: 0; height: 40px; padding: 0 12px; }
    .topbar-links .pane-label { font-size: 0.66rem; letter-spacing: 0.5px; }
    html { scroll-padding-top: calc(44px + env(safe-area-inset-top, 0px)); }
    .frosted-overlay { margin-top: calc(44px + env(safe-area-inset-top, 0px)); padding: 32px 0; }
}

/* phones: panes share the band width evenly, borders still touching */
@media (max-width: 560px) {
    :root { --content-w: 92%; }
    .topbar-links { width: 100%; }
    .topbar-links a { flex: 1; min-width: 0; padding: 0 4px; height: 38px; }
    .topbar-links .pane-label { font-size: 0.6rem; letter-spacing: 0.2px; }
    .frosted-overlay { margin-top: calc(42px + env(safe-area-inset-top, 0px)); }
}