:root {
    --fade-mask-height: 170px;
    --fade-mask-height-mobile: 130px;
    --navbar-height: 80px;
    /* Controller arrow sizing -- keep in one place to avoid layout drift */
    --controller-arrow-size: 52px; /* hitbox width/height */
    --controller-arrow-padding: 0.4rem; /* internal padding for hit area */
    --controller-arrow-svg-size: 1rem; /* actual svg visual size */
    
    /* Gallery grid spacing and wrapper padding */
    --gallery-gap-desktop: 1rem;
    --gallery-gap-mobile: 0.5rem;
    --gallery-wrapper-padding-horizontal-desktop: 8.5rem;
    --gallery-wrapper-padding-horizontal-mobile: 1rem;
}


/* Base font family (self-hosted Monorale)*/
@font-face {
    font-family: 'Monorale';
    src: url('../fonts/Monorale-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Monorale';
    src: url('../fonts/Monorale-Italic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
/* Additional weights (subset, others available in fonts folder) */
@font-face {
    font-family: 'Monorale';
    src: url('../fonts/Monorale-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

body, input, textarea, button, select, a, p, li, h1, h2, h3, h4, h5, h6 {
    font-family: 'Monorale', sans-serif;
}


/* Smooth in-page scrolling and offset for sticky navbar */
html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--navbar-height));
}

body {
    padding-top: 0;
}

.main-navbar {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    box-shadow: none;
    z-index: 200;
    background: #ffffff;
}

/* Style the "00" logo */
.logo-primary {
    opacity: 0.6;
    font-weight: normal;
}

.navbar-link {
    font-size: 1.2rem;
}

/* Remove hover effect from navbar links */
.navbar-link:hover {
    background: none;
    color: var(--text-light);
}

/* Ensure About page shows a plain white navbar with no border or shadow */
.main-navbar.about-page {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.navbar-logo {
        transition: transform 150ms ease, opacity 150ms ease;
    will-change: transform, opacity;
}

.navbar-actions {
    transition: transform 150ms ease, opacity 150ms ease;
    will-change: transform, opacity;
}

.navbar-controller {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
        transition: transform 150ms ease, opacity 150ms ease;
    will-change: transform 0    ;
    z-index: 100;
}

.navbar-controller.visible {
    opacity: 1;
}

/* Hide navbar-center when controller is visible to prevent pointer blocking */
.navbar-controller.visible ~ .navbar-center {
    pointer-events: none !important;
}

.navbar-controller.visible ~ .navbar-center .current-project-wrapper {
    pointer-events: none !important;
}

/* Also respect the class toggled on the main navbar by site JS */
.main-navbar.navbar-controller-visible .navbar-center,
.main-navbar.navbar-controller-visible .navbar-center .current-project-wrapper {
    pointer-events: none !important;
}

.project-controller {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.15rem 0.35rem;
}

.controller-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--text);
    padding: var(--controller-arrow-padding); /* larger hit area */
    min-width: var(--controller-arrow-size); /* larger target for bigger icons */
    min-height: var(--controller-arrow-size);
    transition: color 0.2s ease, transform 0.2s ease;
    border-radius: 6px;
}

.controller-arrow-spacer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* match the visible arrow hitbox to avoid layout shifts */
    /* match `.controller-arrow` sizing so showing/hiding arrows doesn't shift layout */
    min-width: var(--controller-arrow-size);
    min-height: var(--controller-arrow-size);
    padding: var(--controller-arrow-padding); /* larger hit area, same as .controller-arrow */
    box-sizing: border-box;
    border-radius: 6px;
    pointer-events: none;
}

/* Subtle, slightly smaller arrows than the numbers */
.controller-arrow svg {
    width: var(--controller-arrow-svg-size); /* slightly larger visual */
    height: var(--controller-arrow-svg-size);
    opacity: 0.85;
    color: var(--text-light);
    display: block;
}

/* Counter spacing: small gap around the slash */
.project-counter {
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--text-light);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.05em;
    min-width: 64px;
    text-align: center;
}

.project-counter .project-counter-sep {
    margin: 0 0.28ch; /* small spacing between numbers and slash */
    opacity: 0.95;
}

.project-counter .project-num,
.project-counter .project-total {
    display: inline-block;
}

.controller-dot {
    /* kept for compatibility but not used: small circular dot fallback */
    display: none;
}




.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.project-header {
    padding-top: 0;
}

.email {
    display: inline-block;
    color: var(--text);
    text-decoration: none;
    padding: 0.12rem 0;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: color 120ms ease, border-color 120ms ease;
}
.email:hover {
    color: var(--primary);
    border-color: rgba(0,0,0,0.12);
}

.contact-section {
    padding: 2rem 0;
}

.about-quote-custom {
  /* Layout & Spacing */
  max-width: 600px;
  margin: 3rem 0; /* Breathing room top/bottom */
  padding-left: 1.5rem;
  
  /* Visuals */
  border-left: 2px solid #e5e5e5; /* Very subtle grey line */
  
  /* Typography */
  color: #4a4a4a; /* Dark grey, not black, for warmth */
}

.about-quote-custom p {
  margin: 0 0 0.5rem 0;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.6; /* crucial for the 'refined' feel */
}

.about-quote-test cite {
  display: block;
  font-size: 0.875rem;
  color: #888;
  font-style: normal; /* Removes default italics for a modern look */
  font-weight: 500;
  letter-spacing: 0.05em; /* Slight spacing for elegance */
}


.project-title-link {
    position: sticky;
    top: 0;
    /* place above the navbar so clicks hit the link when stuck */
    z-index: 210;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    max-width: calc(100% - 3rem);
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-decoration: none;
    color: inherit;
    pointer-events: none; /* disabled until stuck to avoid accidental clicks */
}

.project-title {
    text-align: center;
    margin: 0;
    display: block;
}

.project-title-arrow {
    display: block;
    width: 1rem;
    height: 1rem;
    margin: 4px auto 0; /* centered underneath the title */
    opacity: 0;
    color: var(--text-light);
    transition: opacity 180ms ease; /* subtle fade */
}

.project-title-link.is-stuck {
    pointer-events: auto; /* make whole area clickable when stuck */
    cursor: pointer;
}

.project-title-link.is-stuck .project-title-arrow {
    opacity: 1;
}

.page-title {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.home-container,
.project-container,
.container {
    position: relative;
    padding-top: calc(var(--navbar-height));
}

/* Prevent tiny horizontal overflow on home page caused by full-bleed
   elements using 100vw (which includes scrollbar width). Restrict
   horizontal overflow to the main content container only. */
.home-container {
    overflow-x: hidden;
}

.home-footer {
    border-top: none;
}

/* Footer: keep email on the same line, inherit site font and minimal styling */
.home-footer .footer-email {
    display: inline;
    color: inherit; /* same color as surrounding text */
    text-decoration: none; /* no underline by default */
    font-weight: inherit; /* inherit weight from surrounding */
    padding: 0;
    margin-left: 0.35ch; /* small gap after the dash */
}
.home-footer .footer-email:hover {
    text-decoration: none; /* no underline on hover */
}

@media (max-width: 768px) {
    :root {
        --fade-mask-height: var(--fade-mask-height-mobile);
        --navbar-height: 64px;
    }


    /* Prevent tiny horizontal overflow on home page caused by full-bleed
    elements using 100vw (which includes scrollbar width). Restrict
    horizontal overflow to the main content container only. */
    .home-container {
        overflow-x: unset;
        margin-bottom: 1rem;
    }

    /* Mobile: add transitions to main navbar for unified push-off */
    .main-navbar {
        transition: transform 180ms cubic-bezier(.2,.8,.2,1), opacity 180ms cubic-bezier(.2,.8,.2,1);
        will-change: transform, opacity;
    }

    /* Ensure About link is visible on mobile */
    .navbar-actions {
        display: flex !important;
        align-items: center;
        gap: 0.5rem;
        margin-right: 0;;
    }

    /* Hide actions visually on project pages for mobile but preserve layout
       to avoid navbar resizing / layout shift. Use visibility+opacity so the
       element keeps its space. */
    .main-navbar.project-page .navbar-actions {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Hide hamburger toggle */
    .navbar-toggle {
        display: none !important;
    }

    .project-header {
        top: calc(var(--navbar-height) + 8px);
    }

    .project-controller {
        gap: 0.45rem;
    }

    .project-counter {
        font-size: 1rem;
    }

    .about-content {
        margin-top: 1.5rem;
    }

    /* Mobile tap effects: remove translation, add subtle gray background */
    .hero-link:active,
    .hero-link:focus-visible {
        transform: none !important;
        background-color: rgba(0, 0, 0, 0.04);
    }

    .hero-link:active .hero-arrow,
    .hero-link:focus-visible .hero-arrow {
        opacity: 0 !important;
    }

    /* Navbar controller arrows: subtle gray on tap */
    .controller-arrow:active,
    .controller-arrow:focus-visible {
        background-color: rgba(0, 0, 0, 0.04);
        transform: none !important;
    }

    /* Disable hover/active translations and hide arrows on mobile for hero and info cards */
    .hero-gallery-item,
    .hero-gallery-item:hover,
    .hero-gallery-item:active,
    .hero-gallery-item:focus,
    .hero-project-info,
    .hero-project-info:hover,
    .hero-project-info:active,
    .hero-project-info:focus,
    .hero-project-info.hovered {
        transform: none !important;
        transition: none !important;
    }

    .hero-project-info .hero-arrow,
    .hero-project-info.hovered .hero-arrow,
    .hero-gallery-item .hero-arrow {
        opacity: 0 !important;
        visibility: hidden !important;
    }

    /* Prevent padding changes on mobile that cause text wrapping on tap */
    .hero-project-info,
    .hero-project-info.hovered,
    .hero-project-info:active,
    .hero-project-info:focus {
        padding-left: 0 !important;
        padding-right: 0.75rem !important;
        flex-wrap: nowrap;
        white-space: normal; /* allow normal wrapping but avoid layout shift */
    }

    /* Style the "00" logo */
    .logo-primary {
        opacity: 0.6;
        font-weight: normal;
        font-size: 1.25rem;
    }
}