/* ==========================================================================
   Mister GD Technologies (www.mistergd.in) — Daylight Swiss-Grid Design System
   ========================================================================== */

:root {
    --paper: #F8F7F4;
    --stone: #F0EEE9;
    --pure: #FFFFFF;
    --ink: #111110;
    --graphite: #5A5854;
    --hairline: #E4E2DD;
    --vermilion: #D9381E;
}

* {
    box-sizing: border-box;
    border-radius: 0px;
}

::selection {
    background-color: #D9381E;
    color: #FFFFFF;
}

body {
    background-color: var(--paper);
    color: var(--ink);
    font-family: 'Plus Jakarta Sans', sans-serif;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Crisp 1px Structural Grid Borders */
.b-top { border-top: 1px solid var(--hairline); }
.b-bottom { border-bottom: 1px solid var(--hairline); }
.b-left { border-left: 1px solid var(--hairline); }
.b-right { border-right: 1px solid var(--hairline); }
.b-all { border: 1px solid var(--hairline); }

/* Full Viewport Width Fluid Layout Rules (Zero Outer Gaps on Large Screens) */
.site-frame {
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    margin: 0;
    border-left: none;
    border-right: none;
}
.fluid-pad-x {
    padding-left: clamp(1.25rem, 3.5vw, 4.5rem);
    padding-right: clamp(1.25rem, 3.5vw, 4.5rem);
}
.fluid-cell {
    padding: clamp(1.5rem, 3vw, 4rem) clamp(1.25rem, 3.5vw, 4.5rem);
}

/* Corner Crosshair Markers (+) */
.crosshair-tl, .crosshair-tr, .crosshair-bl, .crosshair-br {
    position: relative;
}
.crosshair-tl::before,
.crosshair-tr::after,
.crosshair-bl::before,
.crosshair-br::after {
    content: "+";
    position: absolute;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    line-height: 1;
    color: #9A9790;
    pointer-events: none;
    z-index: 20;
    font-weight: 400;
}
.crosshair-tl::before { top: -6px; left: -4px; }
.crosshair-tr::after { top: -6px; right: -4px; }
.crosshair-bl::before { bottom: -6px; left: -4px; }
.crosshair-br::after { bottom: -6px; right: -4px; }

/* Daylight Drafting Grid Pattern */
.drafting-canvas {
    background-color: #FFFFFF;
    background-image: 
        linear-gradient(to right, rgba(228, 226, 221, 0.55) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(228, 226, 221, 0.55) 1px, transparent 1px);
    background-size: 24px 24px;
}

.drafting-subgrid {
    background-image: 
        linear-gradient(to right, rgba(217, 56, 30, 0.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(217, 56, 30, 0.08) 1px, transparent 1px);
    background-size: 96px 96px;
}

/* Active Nav Link Indicator */
.nav-link.active {
    background-color: var(--pure);
    color: var(--ink);
    border-bottom: 2px solid var(--vermilion);
}

/* Range Slider Styling */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: #E4E2DD;
    height: 2px;
    outline: none;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    background: #D9381E;
    cursor: pointer;
    border: 2px solid #FFFFFF;
    box-shadow: 0 0 0 1px #111110;
}

/* Page Transition Animation */
.page-view {
    animation: fadeInPage 0.22s ease-out;
}
@keyframes fadeInPage {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #F8F7F4; }
::-webkit-scrollbar-thumb { background: #C5C2B8; }
::-webkit-scrollbar-thumb:hover { background: #111110; }

/* ==========================================================================
   Image Protection & Anti-Download Restrictions
   ========================================================================== */
img, .protected-image-wrap {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none; /* Disables iOS/Android long-press Save Image popup */
}

.portfolio-card img,
.gallery-card img,
#portfolio-lightbox-modal img,
#gallery-lightbox-modal img,
#project-detail-modal img,
.protected-image-wrap img {
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}