/* ==========================================================================
   Portfolio UI — core styles (light + dark)
   ========================================================================== */

   *,
   *::before,
   *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
   }
   
   :root,
   [data-theme="light"] {
     color-scheme: light;
   
     --accent-main: #333333;
     --accent-text: #475569;
     --special-accent: #bd5d3f;
     --text-dark: #1e293b;
   
     --background-color: #f5f6f6;
     --dark-background-color: #161616;
   
     --section-dark-bg: #333333;
     --section-dark-text: #f5f6f6;
     --section-dark-border: rgba(255, 255, 255, 0.15);
   
     --blog-gradient-end: #e5edf2;
     --quote-bg: #cbdbe6;
   
     --navbar-bg: color-mix(in srgb, var(--background-color) 70%, transparent);
     --navbar-border: rgba(0, 0, 0, 0.08);
     --hero-bg-opacity: 0.65;
     --card-border: rgba(0, 0, 0, 0.15);
     --navbar-shadow: none;
   
     --font-primary: "Outfit", sans-serif;
     --font-display: "Bebas Neue", sans-serif;
     --line-height-hero: 1.15;
   }
   
   [data-theme="dark"] {
     color-scheme: dark;
   
     --accent-main: #e8e4e0;
     --accent-text: #94a3b8;
     --special-accent: #e07a5f;
     --text-dark: #e8e4e0;
   
     --background-color: #121212;
     --dark-background-color: #262626;
   
     --section-dark-bg: #262626;
     --section-dark-text: #f5f6f6;
     --section-dark-border: rgba(255, 255, 255, 0.14);
   
     --blog-gradient-end: #1a1a1a;
     --quote-bg: #1a1a1a;
   
     --navbar-bg: color-mix(in srgb, #262626 88%, transparent);
     --navbar-border: rgba(255, 255, 255, 0.18);
     --hero-bg-opacity: 0.35;
     --card-border: rgba(255, 255, 255, 0.12);
     --navbar-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
   }
   
   html {
     scroll-behavior: smooth;
   }
   
   body {
     font-family: var(--font-primary);
     background-color: var(--background-color);
     color: var(--text-dark);
     overflow-x: hidden;
     transition: background-color 0.3s ease, color 0.3s ease;
   }
   
   /* --- Navigation --- */
   .navbar {
     width: 100%;
     border: 2px solid var(--navbar-border);
     background-color: var(--navbar-bg);
     backdrop-filter: blur(4px);
     -webkit-backdrop-filter: blur(4px);
     box-shadow: var(--navbar-shadow);
     position: fixed;
     top: 0;
     left: 0;
     z-index: 1000;
     transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
   }
   
   .logo-link {
     text-decoration: none;
     color: var(--accent-main);
     display: block;
     transition: opacity 0.2s ease;
   }
   
   .logo-link:visited {
     color: var(--accent-main);
   }
   
   .logo-link:hover {
     opacity: 0.75;
   }
   
   .logo-link h1 {
     font-size: 1.4rem;
     font-weight: 700;
     display: inline-block;
     border-bottom: 2px solid transparent;
     padding-bottom: 2px;
     transition: border-color 0.3s ease;
   }
   
   .logo-link:hover h1 {
     border-color: var(--special-accent);
   }
   
   .nav-container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 15px 24px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
   }
   
   .nav-actions {
     display: flex;
     align-items: center;
     gap: 12px;
   }
   
   .theme-toggle {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 40px;
     height: 40px;
     border: 1px solid var(--navbar-border);
     border-radius: 10px;
     background: transparent;
     color: var(--accent-main);
     cursor: pointer;
     transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
   }
   
   .theme-toggle:hover {
     background-color: color-mix(in srgb, var(--accent-main) 8%, transparent);
   }
   
   .theme-toggle svg {
     width: 20px;
     height: 20px;
   }
   
   .icon-moon {
     display: none;
   }
   
   [data-theme="dark"] .icon-sun {
     display: none;
   }
   
   [data-theme="dark"] .icon-moon {
     display: block;
   }
   
   .nav-links {
     display: flex;
     list-style: none;
     gap: 32px;
   }
   
   .nav-item {
     font-family: var(--font-primary);
     font-weight: 300;
     text-decoration: none;
     color: var(--accent-text);
     font-size: 1rem;
     transition: color 0.2s ease, font-weight 0.2s ease;
   }
   
   .nav-item:hover {
     color: var(--accent-main);
     font-weight: 800;
   }
   
   .menu-toggle {
     display: none;
     flex-direction: column;
     justify-content: space-between;
     width: 24px;
     height: 18px;
     background: transparent;
     border: none;
     cursor: pointer;
     z-index: 1001;
   }
   
   .menu-toggle .bar {
     width: 100%;
     height: 2px;
     background-color: var(--accent-main);
     transition: all 0.3s ease;
   }
   
   /* --- Hero --- */
   .hero-section {
     position: relative;
     min-height: 100vh;
     display: flex;
     flex-direction: column;
     background: none;
   }
   
   .hero-section::before {
     content: "";
     position: absolute;
     inset: 0;
     background-image: url("../assets/topographical_map_art_bg.svg");
     background-size: cover;
     background-position: center bottom;
     background-repeat: no-repeat;
     scale: -1 -1;
     opacity: var(--hero-bg-opacity);
     z-index: -1;
     transition: opacity 0.3s ease, filter 0.3s ease;
   }
   
   [data-theme="dark"] .hero-section::before {
     /* the SVG's strokes are hard-coded to a dark grey (#333), which is
        nearly invisible on the near-black dark background — invert it so
        the linework reads light against the page, matching the other
        ascii-art treatment */
     filter: invert(1) brightness(0.85);
   }
   
   .hero-content {
     flex-grow: 1;
     display: flex;
     align-items: flex-start;
     justify-content: center;
     padding: 34vh 10px 40px;
   }
   
   .headline-stack {
     text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center;
   }
   
   .static-line,
   .action-line,
   .ticker-item,
   .ticker-item-gold {
     font-family: var(--font-display);
     letter-spacing: 0.02em;
   }
   
   .stroke-text {
     color: transparent;
     -webkit-text-stroke-width: 2.5px;
     -webkit-text-stroke-color: var(--accent-main);
     font-weight: normal;
     display: inline-block;
     text-decoration: none;
     cursor: pointer;
     transition: color 0.3s ease, -webkit-text-stroke-color 0.3s ease;
   }
   
   .name-button:hover {
     color: var(--accent-main);
     -webkit-text-stroke-color: var(--accent-main);
   }
   
   .static-line {
     font-size: clamp(4rem, 10vw, 5.5rem);
     color: var(--accent-main);
     line-height: var(--line-height-hero);
   }
   
   .action-line {
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: clamp(4rem, 10vw, 5.5rem);
     color: var(--accent-main);
     line-height: var(--line-height-hero);
   }
   
   .ticker-wrapper {
     display: inline-block;
     height: calc(clamp(4rem, 10vw, 5.5rem) * var(--line-height-hero));
     overflow: hidden;
     position: relative;
     vertical-align: bottom;
   }
   
   .ticker-wrapper::after {
     content: "";
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 3px;
     background-color: var(--accent-main);
     z-index: 2;
     pointer-events: none;
   }
   
   .ticker-track {
     display: flex;
     flex-direction: column;
     transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
   }
   
   .ticker-item {
     display: block;
     white-space: nowrap;
     height: calc(clamp(4rem, 10vw, 5.5rem) * var(--line-height-hero));
   }
   
   .ticker-item-gold {
     color: var(--special-accent);
   }

   .hero-socials {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
     gap: 12px;
     margin-top: 100px;
   }

   .hero-social-link {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 44px;
     height: 44px;
     border-radius: 50%;
     border: 1.5px solid var(--card-border);
     color: var(--text-dark);
     transition: transform 0.2s ease, background-color 0.2s ease,
       border-color 0.2s ease, color 0.2s ease;
   }

   .hero-social-link:hover {
     transform: translateY(-4px);
     background-color: var(--accent-main);
     border-color: var(--accent-main);
     color: var(--background-color);
   }

   .hero-social-icon {
     width: 20px;
     height: 20px;
   }

   /* --- Footer --- */
   .site-footer {
     background: var(--dark-background-color);
     padding: 40px 24px;
     width: 100%;
     color: var(--section-dark-text);
     border-top: 1px solid var(--section-dark-border);
     transition: background-color 0.3s ease, border-color 0.3s ease;
   }
   
   .footer-content {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
   }
   
   .footer-p {
     font-size: 0.8rem;
     max-width: 400px;
     line-height: 15px;
     margin-bottom: 16px;
     opacity: 0.85;
   }
   
   /* --- Responsive (hero + footer only; section responsiveness lives in sections.css) --- */
   @media (max-width: 1100px) {
     .action-line {
       flex-direction: column;
       align-items: center;
       gap: 0;
     }
   
     .ticker-wrapper {
       width: 100%;
     }
   
     .ticker-track {
       align-items: center;
     }
   
     .ticker-item,
     .ticker-item-gold {
       text-align: center;
     }
   
     .hero-content {
       padding-top: 30vh;
     }
   }
   
   @media (min-width: 768px) {
     .nav-container {
       justify-content: flex-start;
     }
   
     .logo-link {
       margin-right: auto;
     }
   
     .nav-links {
       order: 2;
     }
   
     .nav-actions {
       order: 3;
       margin-left: 32px;
     }
   
     .nav-item {
       position: relative;
       padding: 4px 0;
       display: inline-block;
     }
   
     .nav-item::after {
       content: "";
       position: absolute;
       bottom: -2px;
       left: 0;
       width: 100%;
       height: 2px;
       background-color: var(--accent-main);
       transform: scaleX(0);
       transform-origin: right;
       transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
     }
   
     .nav-item:hover::after {
       transform: scaleX(1);
       transform-origin: left;
     }
   }
   
   @media (max-width: 768px) {
     :root {
       font-size: 13px;
     }
   
     .navbar {
       top: 20px;
       left: 5%;
       width: 90%;
       border-radius: 20px;
       border: 1px solid var(--navbar-border);
       max-height: 70px;
       overflow: hidden;
       transition: max-height 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
     }
   
     .navbar.active {
       max-height: 450px;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
     }
   
     .nav-container {
       flex-wrap: wrap;
     }
   
     .menu-toggle {
       display: flex;
     }
   
     .nav-links {
       flex-direction: column;
       align-items: center;
       width: 100%;
       gap: 0;
       padding: 15px 0 10px;
       opacity: 0;
       transform: translateY(-10px);
       visibility: hidden;
       transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
       pointer-events: none;
     }
   
     .navbar.active .nav-links {
       opacity: 1;
       transform: translateY(0);
       visibility: visible;
       pointer-events: auto;
     }
   
     .nav-links li {
       width: 100%;
       text-align: center;
       list-style: none;
     }
   
     .nav-item {
       display: block;
       padding: 12px 0;
       width: 100%;
     }
   
     .menu-toggle.open .bar:nth-child(1) {
       transform: translateY(8px) rotate(45deg);
     }
   
     .menu-toggle.open .bar:nth-child(2) {
       opacity: 0;
     }
   
     .menu-toggle.open .bar:nth-child(3) {
       transform: translateY(-8px) rotate(-45deg);
     }
   
     .hero-content {
       transform: scale(0.9);
       transform-origin: center top;
       padding: 40vh 10px 20px;
     }
   }