/* ------------------------------------------------------------------------------------ */
/* ------------------------------- BASE GLOBAL STYLE ---------------------------------- */
/* ------------------------------------------------------------------------------------ */

/* --------------------------------------- SETUP ----------------------------------- */


:root {
    --bg-paper: #fdfbf7;
    --paper: #ffffff;
    --metal: #e6e6e6;
    --metal-dark: #c0c0c0;
    --ink: #1a1a1a;
    --border-thick: 3px solid var(--ink);
    --border-thin: 2px solid var(--ink);
    --shadow-distance: 4px;
    --radius-outer: 30px;
    --radius-inner: 12px; 
    --stroke-thick: 3px;
    --shadow-hard: 8px 8px 0px var(--ink);
    --radius-panel: 16px;
    
    --font-ui: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    
    --font-header: 'Montserrat', sans-serif; 
    --ui-scale: 1;
    --page-gutter: 18px; /* will be overridden by JS */
}


* { box-sizing: border-box; }


body{
  background-color:#e0e0e0;
  display:flex;
  justify-content:center;
  margin: 0;
  padding: var(--page-gutter, 18px);
  font-family: var(--font-ui);
  overflow-x: hidden;
  /*font-family: 'Manrope', system-ui, sans-serif;*/
  line-height: 1.55;
  letter-spacing: 0.1px;
}

/* APPLY MONTSERRAT TO HEADINGS & BUTTONS */
h1, h2, h3, .nav-btn, .primary-btn, .secondary-btn, .card-footer, .slider-labels {
    font-family: var(--font-header);
}

/* --- DECORATIVE CORNER HARDWARE --- */

/* The container for the SVG */
.corner-deco {
    position: absolute;
    width: 28px;       /* Adjust based on the specific SVG size */
    height: 28px;
    z-index: 5;        /* Sit above the background */
    pointer-events: none; /* Let clicks pass through to buttons below */
    color: var(--ink); /* Use the ink color variable */
}

/* Positioning & Rotation classes */
.c-tl { top: 3px; left: 3px; }

.c-tr { 
    top: 3px; right: 3px; 
    transform: scaleX(-1); /* Flip horizontally */
}

.c-bl { 
    bottom: 3px; left: 3px; 
    transform: scaleY(-1); /* Flip vertically */
}

.c-br { 
    bottom: 3px; right: 3px; 
    transform: scale(-1, -1); /* Flip both ways */
}

/* Optional: Offset for the "Complex" inner panel style if you use SVG #2 */
.corner-deco.complex {
    width: 36px; height: 36px;
}


/* --------------------------------------- MAIN TABLET BODY ----------------------------------- */


/* --- OUTER CASING (The 3D Tablet Look) + SCALING ADJUSTMENTS --- */
.device-casing {
    width: 1000px;   /* fixed design size */
    max-width: none; /* prevents layout from shrinking instead of scaling */

    /* ADD THIS LINE: */
    flex-shrink: 0;  /* Forces the container to stay 1000px wide */

    background: var(--bg-paper);
    border: var(--border-thick);
    border-radius: 40px;
    padding: 8px;
    box-shadow: 12px 12px 0px rgba(0,0,0,0.15);
    position: relative;

    transform: scale(var(--ui-scale));
    transform-origin: top center;
    will-change: transform;
}

.scale-stage {
    width: 100%;            /* JS will set an exact pixel width/height */
    display: flex;
    justify-content: center;
    overflow: visible; /* important */
}


.inner-casing {
    border: 2px solid var(--ink);
    border-radius: 32px;
    padding: 20px;
    position: relative;
    height: auto;
}

/* Screws */
.screw {
    width: 12px; height: 12px;
    border: 2px solid var(--ink);
    border-radius: 50%;
    position: absolute;
    background: #fff;
    z-index: 2;
}
.screw::after {
    content: ''; position: absolute; top: 50%; left: 10%; width: 80%; height: 2px;
    background: var(--ink); transform: translateY(-50%) rotate(-45deg);
}
.screw.tl { top: 12px; left: 12px; }
.screw.tr { top: 12px; right: 12px; }
.screw.bl { bottom: 12px; left: 12px; }
.screw.br { bottom: 12px; right: 12px; }

/* ------------------------------- HEADER: BRANDING PLATE + NAV PLATE ------------------------------ */

/* --- HEADER --- */
.header-panel {
    display: flex;
    justify-content: center; /* stop edge-pushing */
    align-items: stretch;
    gap: 20px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

/* Desktop default: hide mobile toggle */
.nav-vent-toggle { display: none; }

.branding-plate h1 {
    font-size: 1.4rem; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; margin: 0;
}
.atom-icon { height: 40px; width: 40px; }

/* --- CUSTOM LOGO IMAGE STYLES (UPDATED FOR GRILLE BADGE) --- */

/* 1. The Outer Frame (Keeps the original shape & border) */
.branding-plate.image-mode {
    /* Ensure it keeps the thick ink border defined elsewhere */
    border: var(--border-thick);
    /* The specific asymmetrical shape */
    border-radius: 50px 10px 10px 50px; 
    background: #fff;
    /* Layout to hold grille area and speed-lines side-by-side */
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Important: Remove padding so the grille hits the edges */
    padding: 0; 
    padding-right: 5px; /* Add space for speed lines on right */
    overflow: hidden;
    height: auto; /* Allow it to grow based on contents */
}

/* 2. The Sunken Grille Area */
.branding-grille-area {
    flex: 1; /* Take up remaining space next to speed-lines */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px; /* The "gap" width between outer frame and inner badge */
    margin: 4px; /* Tiny offset from the main border line */
    
    /* Match outer shape, but slightly smaller */
    border-radius: 45px 8px 8px 45px; 
    border: 2px solid var(--ink);
    
    /* --- THE GRILLE TEXTURE --- */
    /* Creates sharp polka-dots using radial gradient */
    background-image: radial-gradient(circle at center, var(--ink) 1.5px, transparent 2px);
    background-size: 6px 6px; /* Spacing of the dots */
    background-color: #ddd; /* Darker metal background color */
    
    /* --- DEPTH EFFECT --- */
    /* Deep INSET shadow makes it look sunk into the panel */
    box-shadow: inset 3px 3px 8px rgba(0,0,0,0.3);
}

/* 3. The Raised Inner Badge */
.branding-inner-badge {
    background: #fdfbf6; /* Back to bright white paper/metal */
    border: 2px solid var(--ink);
    /* Match shape again, smaller still */
    border-radius: 40px 6px 6px 40px; 
    padding: 5px 15px;
    position: relative;
    
    /* --- DEPTH EFFECT --- */
    /* Outset HARD shadow makes it look raised above the grille */
    box-shadow: 
        4px 4px 0px rgba(0,0,0,0.25),
        inset 1px 1px 0px #fff; /* Tiny highlight on top edge */
}

/* 4. The Logo Image */
.custom-logo {
    /* Slightly smaller to fit in new badge space */
    max-height: 60px; 
    width: auto;
    object-fit: contain;
    /* Blends the logo's white bg onto the badge bg */
    mix-blend-mode: multiply; 
    display: block;
}

/* 5. Tiny Rivets for the Badge (Optional Detail) */
.badge-rivet {
    position: absolute;
    width: 4px; height: 4px;
    background: var(--ink);
    border-radius: 50%;
    box-shadow: inset 1px 1px 1px rgba(255,255,255,0.8);
}
/*.badge-rivet.tl { top: 6px; left: 12px; }*/
.badge-rivet.tr { top: 6px; right: 6px; }
/*.badge-rivet.bl { bottom: 6px; left: 12px; }*/
.badge-rivet.br { bottom: 6px; right: 6px; }


/* The Speed Lines decoration */
.speed-lines {
    margin-left: auto;
    width: 40px; height: 20px;
    background: repeating-linear-gradient(90deg, var(--ink), var(--ink) 2px, transparent 2px, transparent 6px);
}

.nav-plate {
    border: var(--border-thick);
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    /* Changed border-radius: TopLeft(10) TopRight(50) BottomRight(50) BottomLeft(10) */
    border-radius: 10px 50px 50px 10px; 
    padding: 10px 25px 10px 15px; /* Added more padding on right for the curve */
}

/* 3D BLOCK BUTTONS */
.block-3d, .block-3d-lg, .block-3d-small {
    border: 2px solid var(--ink);
    background: #fff;
    font-weight: 800;
    cursor: pointer;
    position: relative;
    transition: transform 0.1s, box-shadow 0.1s;
    text-transform: uppercase;
}
/* The "Side" of the button (Hard Shadow) */
.block-3d {
    border-radius: 20px;
    padding: 8px 16px;
    box-shadow: 3px 3px 0px var(--ink);
}
.block-3d:active {
    transform: translate(3px, 3px);
    box-shadow: 0px 0px 0px var(--ink);
}

.toggle-switch-group {
    margin-left: 10px; display: flex; gap: 5px; 
    border-left: 2px solid #ccc; padding-left: 10px;
}

.toggle-btn {
    width: 15px; height: 15px; border: 2px solid var(--ink); border-radius: 50%;
    background: #fff; 
    /* NEW: This creates the "Raised Edge" ring effect */
    /* Inner white highlight top-left, Inner dark shadow bottom-right */
    box-shadow: 
        inset 2px 2px 0px #fff, 
        inset -2px -2px 0px rgba(0,0,0,0.15),
        1px 1px 0px var(--ink); /* External shadow */
    position: relative;
}





/* ------------------------------- FOOTER SECTION --------------------------------------- */
/* --- HIGH FIDELITY GRILL --- */
.footer-vent {
    margin-top: 20px;
    border: var(--border-thick);
    border-radius: 12px;
    display: flex;
    align-items: center;
    background: #fff;
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.05);
    height: 40px;
    padding: 0 10px;
    gap: 10px;
    
}

.high-fi-grill {
    flex: 1;
    height: 24px;
    border-radius: 4px;
    border: 2px solid var(--ink);
    /* THE MAGIC: CSS Repeating Gradient for slats */
    background: repeating-linear-gradient(
        90deg,
        var(--ink),
        var(--ink) 2px,
        #fff 2px,
        #fff 6px
    );
    /* Inner shadow to make the grill look set deep inside */
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.3);
}

.vent-screw {
    width: 10px; height: 10px; border: 2px solid var(--ink); border-radius: 50%;
    position: relative;
    background: #fff;
    /* NEW: This creates the "Raised Edge" ring effect */
    /* Inner white highlight top-left, Inner dark shadow bottom-right */
    box-shadow: 
        inset 2px 2px 0px #fff, 
        inset -2px -2px 0px rgba(0,0,0,0.15),
        1px 1px 0px var(--ink); /* External shadow */
    position: relative;
}
.vent-slats {
    flex: 1; display: flex; gap: 6px; height: 20px;
}
.vent-slats span {
    flex: 1; background: var(--ink); border-radius: 2px; opacity: 0.8;
}

/* ------------------------------- CLICKING CRT ON PROJECTS PAGE --------------------------------------- */
.crt-link{
  display: block;
  color: inherit;
  text-decoration: none;
}

/* ------------------------------- MOBILE RESPONSIVENESS SETTING --------------------------------------- */

/* Mobile Responsive Fix - OVERALL (header, hero + side, nav dial, proj, contact me, footer) */
@media (max-width: 900px) {
    
    .main-body-grid { grid-template-columns: 1fr; }


    /* --- Header (Branding + Top Nav Bar) --- */
    /*.header-panel { flex-direction: column; }
    .branding-inner-badge{width: 100%;
        height: auto;}
    .custom-logo{width: 100%; height: auto; align-items: center}*/
  
    .block-3d { width: 100%; }

     /* 1) Hide nav bar by default on mobile */
  .nav-plate { display: none; }

  .custom-logo{
  width: auto;
  height: auto;
  max-height: clamp(38px, 7vw, 60px);
  display: block;
}

body.nav-open .nav-plate{
  position: fixed;
  top: 150px;                  /* keep your spacing */
  left: var(--nav-left, 12px);
  right: var(--nav-right, 12px);
  width: auto;
  transform: none;
  margin: 0;
  box-sizing: border-box;

  z-index: 9999;

  display: flex;
  flex-direction: column;
  gap: 10px;

  padding: 14px;
  border-radius: 18px;

  background: rgba(255,255,255,0.68);
  border: 2px solid var(--ink);
  backdrop-filter: blur(8px);

  box-shadow: 10px 10px 0px rgba(0,0,0,0.18);
}

  .nav-vent-toggle{
  position: absolute;
  right: 3%;                /* pin to right edge of header */
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;

  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  width: 44px;
  height: 44px;

  border: 2px solid var(--ink);
  background: #fff;
  border-radius: 999px;
  box-shadow: 3px 3px 0px var(--ink);
  cursor: pointer;
  padding: 0;
}

/* keep active press effect, but preserve the centering translate */
.nav-vent-toggle:active{
  transform: translateY(-50%) translate(3px, 3px);
  box-shadow: 0 0 0 var(--ink);
}

.nav-vent-toggle .vent-bar{
  width: 18px;
  height: 3px;
  background: var(--ink);
  border-radius: 999px;
  margin: 2px 0;
}

 .header-panel{
  position: relative;      /* allows absolute hamburger */
  flex-wrap: nowrap;
  justify-content: center; /* centers branding */
  align-items: center;
  gap: 0;                  /* don't let gap affect centering */
}

  /* Branding plate: shrink-wrap contents BUT never exceed viewport */
  .branding-plate.image-mode{
    flex: 0 1 auto;              /* allow it to shrink */
    width: fit-content;          /* shrink-to-fit */
    max-width: calc(100vw - (var(--page-gutter, 12px) * 2) - 44px - 16px); /* reserve hamburger + buffer */ /* viewport - body padding - hamburger - gap */
    overflow: hidden;            /* safety */
    padding-right: 0;
    border-radius: 999px;        /* pill on mobile */
  }

  /* Grille + badge should also shrink-wrap (no flex:1) */
  .branding-grille-area{
    flex: 0 1 auto;
    width: fit-content;
    max-width: 100%;
    border-radius: 999px;
  }
  .branding-inner-badge{
    width: fit-content;
    max-width: 100%;
    border-radius: 999px;
  }


  /* 3) Make branding shapes symmetrical pill on mobile */
  .branding-plate.image-mode { border-radius: 999px; }
  .branding-grille-area { border-radius: 999px; }
  .branding-inner-badge { border-radius: 999px; }

  /* 4) Remove speed lines on mobile */
  .speed-lines { display: none; }
  .badge-rivet { display: none; }

    
}

@media (max-width: 520px){
  body{ padding: 12px 10px; }
}