/* === styles.css (Enhanced - High Contrast Black Theme v3.3 - Blog & Footer Updated with HugeIcons, Updated Subscribe Form) === */

/* --- General Reset & Base Setup --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body { font-family: var(--font-primary); background-color: var(--color-white); color: var(--color-text-primary); line-height: var(--line-height-text); font-weight: var(--font-weight-regular); overflow-x: hidden; padding-top: var(--header-height); }
body.no-scroll { overflow: hidden; }

/* --- Custom Properties (Variables) --- */
:root {
  /* Color Palette */
  --color-primary: #000000; --color-primary-hover: #222; --color-white: #ffffff;
  --color-bg-light: #fdfdfd; --color-bg-medium: #f5f5f5;
  --color-text-primary: #0a0a0a; --color-text-secondary: #505050; --color-text-muted: #808080;
  --color-border-subtle: rgba(0, 0, 0, 0.1); --color-border-focus: var(--color-primary);
  --color-success: #28a745; --color-error: #dc3545;
  --color-footer-bg: var(--color-primary); --color-footer-text: rgba(255, 255, 255, 0.8);
  --color-footer-text-hover: var(--color-white); --color-footer-border: rgba(255, 255, 255, 0.15);
  --bg-subtle-gradient: linear-gradient(135deg, var(--color-bg-light) 0%, var(--color-bg-medium) 100%);
  /* Typography */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500;
  --font-weight-semibold: 600; --font-weight-bold: 700;
  --line-height-heading: 1.3; --line-height-text: 1.75;
  --letter-spacing-heading: -0.02em; --letter-spacing-normal: 0.01em; --letter-spacing-wide: 0.04em;
  /* Spacing & Sizing */
  --section-spacing-lg: 140px; --section-spacing-md: 100px; --container-max-width: 1240px;
  --header-height: 75px; --border-radius-sm: 6px; --border-radius-md: 10px;
  --border-radius-lg: 16px; --border-radius-pill: 50px; --grid-gap: 3rem;
  /* Shadows */
  --shadow-xs: 0 2px 5px rgba(0, 0, 0, 0.04); --shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 18px rgba(0, 0, 0, 0.08); --shadow-lg: 0 15px 30px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.13); --shadow-focus-ring: 0 0 0 3px rgba(0, 0, 0, 0.15);
  --shadow-input-focus: 0 0 0 3px rgba(0, 0, 0, 0.1), inset 0 1px 2px rgba(0,0,0,0.1);
  /* Transitions */
  --transition-duration-fast: 0.2s; --transition-duration-normal: 0.35s; --transition-duration-slow: 0.5s;
  --transition-easing: cubic-bezier(0.65, 0, 0.35, 1);
  --transition-smooth-fast: all var(--transition-duration-fast) var(--transition-easing);
  --transition-smooth: all var(--transition-duration-normal) var(--transition-easing);
}

/* --- Global Elements & Utilities --- */
::selection { background: var(--color-primary); color: var(--color-white); }
::-moz-selection { background: var(--color-primary); color: var(--color-white); }
.container { max-width: var(--container-max-width); margin: 0 auto; padding: 0 2rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; white-space: nowrap; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); border-radius: var(--border-radius-sm); }

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 { font-weight: var(--font-weight-semibold); line-height: var(--line-height-heading); letter-spacing: var(--letter-spacing-heading); color: var(--color-primary); }
h1 { font-size: clamp(2.5rem, 5vw + 1rem, 4.5rem); margin-bottom: 1.5rem; font-weight: var(--font-weight-bold); }
h2 { font-size: clamp(2rem, 4vw + 0.5rem, 3rem); margin-bottom: 2.5rem; }
h3 { font-size: clamp(1.3rem, 3vw + 0.3rem, 1.75rem); margin-bottom: 1rem; font-weight: var(--font-weight-medium); }
p { margin-bottom: 1.5rem; font-size: clamp(1rem, 1vw + 0.8rem, 1.1rem); color: var(--color-text-secondary); max-width: 75ch; }
p:last-child { margin-bottom: 0; }
p.large-text { font-size: clamp(1.1rem, 1.2vw + 0.8rem, 1.25rem); font-weight: var(--font-weight-light); color: var(--color-text-primary); }
a { text-decoration: none; color: var(--color-primary); transition: color var(--transition-duration-fast) ease; cursor: pointer; }
a:hover, a:focus-visible { color: #333; }

/* --- Sections --- */
section { padding: var(--section-spacing-lg) 0; position: relative; overflow: hidden; }
.section-header { text-align: center; margin-bottom: 4rem; }
.section-header h2 { margin-bottom: 1rem; }
.section-subtitle { color: var(--color-text-muted); font-size: clamp(1.1rem, 1vw + 0.9rem, 1.2rem); font-weight: var(--font-weight-light); max-width: 650px; margin: 0 auto 4rem; }

/* --- Header --- */
header { display: flex; justify-content: space-between; align-items: center; padding: 0 2.5rem; height: var(--header-height); position: fixed; top: 0; left: 0; width: 100%; z-index: 100; background-color: rgba(255, 255, 255, 0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-border-subtle); transition: background-color var(--transition-duration-normal) ease, box-shadow var(--transition-duration-normal) ease, border-color var(--transition-duration-normal) ease; }
header.scrolled { background-color: rgba(255, 255, 255, 0.97); box-shadow: var(--shadow-md); border-color: transparent; }
.logo { font-size: 1.5rem; font-weight: var(--font-weight-bold); letter-spacing: -0.04em; }
.logo a { color: var(--color-primary); }
.logo a:hover, .logo a:focus-visible { color: var(--color-primary); }

/* --- Navigation with HugeIcons --- */
nav ul { display: flex; list-style: none; gap: 2.5rem; }
nav ul li a { font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; font-size: 0.8rem; position: relative; padding: 0.6rem 0.2rem; color: var(--color-primary); transition: color var(--transition-duration-fast) ease; display: flex; align-items: center; gap: 0.5rem; }
nav ul li a .hgi-stroke { font-size: 1.2rem; transition: transform var(--transition-duration-normal) var(--transition-easing); }
nav ul li a:hover .hgi-stroke, nav ul li a:focus-visible .hgi-stroke { transform: scale(1.1); }
nav ul li a::after { content: ''; position: absolute; bottom: 2px; left: 0; width: 0; height: 1.5px; background-color: var(--color-primary); transition: width var(--transition-duration-normal) var(--transition-easing); }
nav ul li a:hover, nav ul li a.active, nav ul li a:focus-visible { color: var(--color-primary); }
nav ul li a:hover::after, nav ul li a.active::after, nav ul li a:focus-visible::after { width: 100%; }
.menu-toggle { display: none; background: none; border: none; font-size: 1.6rem; cursor: pointer; padding: 0.5rem; color: var(--color-primary); z-index: 110; transition: color var(--transition-duration-fast) ease, transform var(--transition-duration-normal) ease; }
.menu-toggle:hover { color: var(--color-primary-hover); }
.menu-toggle .hgi-cancel-01 { display: none; }
.menu-toggle.active .hgi-menu-02 { display: none; }
.menu-toggle.active .hgi-cancel-01 { display: inline-block; }
.menu-toggle.active { transform: rotate(180deg); }

/* --- Hero Section --- */
#hero { min-height: calc(100vh - var(--header-height)); display: flex; align-items: center; justify-content: center; text-align: center; padding: 6rem 1rem 5rem; background: linear-gradient(145deg, var(--color-white) 0%, var(--color-bg-light) 100%); position: relative; }
.hero-content { max-width: 850px; position: relative; z-index: 1; }
#hero h1 { color: var(--color-primary); margin-bottom: 1rem; }
.subtitle { font-size: clamp(1.2rem, 3vw, 1.7rem); color: var(--color-text-secondary); margin-bottom: 1rem; font-weight: var(--font-weight-regular); }
.tagline { font-size: clamp(1rem, 2vw, 1.25rem); font-style: normal; color: var(--color-text-muted); margin-bottom: 3rem; font-weight: var(--font-weight-light); }
.cta-buttons { display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: center; margin-top: 1.5rem; }

/* --- Buttons --- */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.9rem 2.2rem; border-radius: var(--border-radius-pill); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; font-size: 0.85rem; transition: var(--transition-smooth); transition-property: background-color, color, border-color, transform, box-shadow; border: 1.5px solid var(--color-primary); cursor: pointer; text-align: center; line-height: 1.2; position: relative; overflow: hidden; }
.btn:active { transform: translateY(-1px) scale(0.98); box-shadow: var(--shadow-xs); filter: brightness(95%); }
.btn.primary { background-color: var(--color-primary); color: var(--color-white); }
.btn.primary:hover, .btn.primary:focus-visible { background-color: var(--color-primary-hover); border-color: var(--color-primary-hover); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.btn.secondary { background-color: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn.secondary:hover, .btn.secondary:focus-visible { background-color: var(--color-primary); color: var(--color-white); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.btn-project { padding: 0.7rem 1.6rem; border-radius: var(--border-radius-pill); font-size: 0.78rem; border: 1.5px solid var(--color-primary); background-color: var(--color-primary); color: var(--color-white); display: inline-flex; align-items: center; justify-content: center; margin-right: 0.6rem; margin-bottom: 0.6rem; font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); transition: var(--transition-smooth); transition-property: background-color, color, border-color, transform, box-shadow; }
.btn-project:hover, .btn-project:focus-visible { background-color: var(--color-primary-hover); border-color: var(--color-primary-hover); color: var(--color-white); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn-project:active { transform: translateY(0px) scale(0.98); box-shadow: var(--shadow-xs); filter: brightness(95%); }

/* --- About Section --- */
#about { background-color: var(--color-white); }
#about .about-content { max-width: 800px; margin: 0 auto; text-align: center; }
#about .about-content p { margin-left: auto; margin-right: auto; }

/* --- Skills Section --- */
#skills { background: var(--bg-subtle-gradient); }
.skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--grid-gap); margin-top: 4rem; position: relative; z-index: 1; }
.skill-card { background-color: var(--color-white); padding: 2.8rem 2rem; border-radius: var(--border-radius-md); box-shadow: var(--shadow-sm); transition: transform var(--transition-duration-normal) var(--transition-easing), box-shadow var(--transition-duration-normal) var(--transition-easing); text-align: center; border: 1px solid var(--color-border-subtle); overflow: hidden; }
.skill-card:hover, .skill-card:focus-within { transform: translateY(-10px); box-shadow: var(--shadow-lg); }
.skill-icon { 
    font-size: 3rem; 
    margin-bottom: 1.5rem; 
    color: var(--color-primary); 
    transition: transform var(--transition-duration-normal) var(--transition-easing);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70px;
}
.custom-icon {
    width: 54px;
    height: 54px;
    stroke: var(--color-primary);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.skill-card:hover .skill-icon, .skill-card:focus-within .skill-icon { transform: scale(1.1) translateY(-3px); }
.skill-card h3 { font-size: 1.35rem; font-weight: var(--font-weight-medium); margin-bottom: 0.8rem; color: var(--color-primary); }
.skill-card p { font-size: 0.95rem; color: var(--color-text-secondary); line-height: 1.6; }

/* --- Projects Section --- */
#projects { background-color: var(--color-white); }
.projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--grid-gap); margin-top: 4rem; }
.project-card { background-color: var(--color-white); border-radius: var(--border-radius-lg); overflow: hidden; box-shadow: var(--shadow-md); transition: transform var(--transition-duration-normal) var(--transition-easing), box-shadow var(--transition-duration-normal) var(--transition-easing); border: 1px solid var(--color-border-subtle); display: flex; flex-direction: column; }
.project-card:hover, .project-card:focus-within { transform: translateY(-12px) scale(1.02); box-shadow: var(--shadow-xl); }
.project-image-wrapper { overflow: hidden; border-bottom: 1px solid var(--color-border-subtle); }
.project-image { 
    width: 100%; 
    height: 150px;
    object-fit: cover; 
    display: block; 
    transition: transform var(--transition-duration-slow) var(--transition-easing), filter var(--transition-duration-normal) ease; 
}
.project-card:hover .project-image, .project-card:focus-within .project-image { transform: scale(1.05); filter: brightness(1.03); }
.project-info { 
    padding: 1.8rem 2.2rem;
    flex-grow: 1; 
    display: flex; 
    flex-direction: column; 
}
.project-info h3 { margin-bottom: 0.75rem; font-size: 1.45rem; color: var(--color-primary); }
.project-description { font-size: 1rem; color: var(--color-text-secondary); margin-bottom: 1.5rem; flex-grow: 1; line-height: 1.65; }
.project-links { margin-top: auto; padding-top: 1rem; }

/* --- Contact Section --- */
#contact { background: var(--bg-subtle-gradient); padding-bottom: var(--section-spacing-lg); }
.contact-content { position: relative; z-index: 1; }
.contact-form { background-color: var(--color-white); padding: 3.5rem; border-radius: var(--border-radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--color-border-subtle); max-width: 700px; margin: 0 auto; }
.form-group { margin-bottom: 2rem; }
input[type="text"], input[type="email"], textarea { width: 100%; padding: 1.2rem 1.4rem; border: 1px solid var(--color-border-subtle); border-radius: var(--border-radius-md); background-color: var(--color-white); font-family: var(--font-primary); font-size: 1rem; font-weight: var(--font-weight-regular); color: var(--color-text-primary); transition: border-color var(--transition-duration-fast) ease, box-shadow var(--transition-duration-fast) ease; }
input::placeholder, textarea::placeholder { color: var(--color-text-muted); opacity: 0.7; }
input:focus-visible, textarea:focus-visible { outline: none; border-color: var(--color-border-focus); box-shadow: var(--shadow-input-focus); }
textarea { min-height: 170px; resize: vertical; }
.contact-form button[type="submit"].btn.primary { padding: 1.1rem 2.5rem; width: 100%; font-weight: var(--font-weight-semibold); }

/* --- Blog Page Specific Styles --- */
#blog-hero {
  min-height: 40vh;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: calc(var(--header-height) + 5rem) 1rem 5rem;
  background: linear-gradient(145deg, var(--color-white) 0%, var(--color-bg-light) 100%);
  position: relative; border-bottom: 1px solid var(--color-border-subtle);
}
.blog-hero-content h1 { margin-bottom: 0.8rem; }
.blog-hero-content .subtitle {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--color-text-secondary);
  max-width: 700px; margin: 0 auto;
  font-weight: var(--font-weight-light);
}

#blog-content {
  padding: var(--section-spacing-md) 0;
  background-color: var(--color-white);
}

.coming-soon {
  max-width: 800px;
  margin: 2rem auto;
  padding: 3rem 2.5rem;
  background-color: var(--color-white);
  border-radius: var(--border-radius-lg);
  text-align: center;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border-subtle);
}
.coming-soon-icon {
  font-size: 3.5rem;
  margin-bottom: 2rem;
  display: inline-block;
}
.coming-soon h2 {
    margin-bottom: 1.5rem;
}
.coming-soon p {
    max-width: 600px;
    margin-left: auto; margin-right: auto;
    margin-bottom: 2.5rem;
    color: var(--color-text-secondary);
}

.subscribe-section {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--color-border-subtle);
}
.subscribe-section h3 {
    font-size: 1.2rem;
    font-weight: var(--font-weight-medium);
    margin-bottom: 1.5rem;
    color: var(--color-text-primary);
}

#subscribe-form .form-group {
  display: flex;
  gap: 1rem;
  max-width: 550px;
  margin: 0 auto;
  align-items: center;
}

#subscribe-email {
  flex-grow: 1;
  padding: 1.2rem 1.4rem; /* Matches contact form input padding */
  border: 1px solid var(--color-border-subtle); /* Matches contact form border */
  border-radius: var(--border-radius-md); /* Matches contact form border-radius */
  background-color: var(--color-white);
  font-family: var(--font-primary);
  font-size: 1rem; /* Matches contact form font-size */
  font-weight: var(--font-weight-regular); /* Matches contact form font-weight */
  color: var(--color-text-primary);
  transition: border-color var(--transition-duration-fast) ease, box-shadow var(--transition-duration-fast) ease;
}
#subscribe-email::placeholder {
  color: var(--color-text-muted);
  opacity: 0.7; /* Matches contact form placeholder opacity */
}
#subscribe-email:focus-visible {
  outline: none;
  border-color: var(--color-border-focus); /* Matches contact form focus border */
  box-shadow: var(--shadow-input-focus); /* Matches contact form focus shadow */
}

#subscribe-button {
  flex-shrink: 0;
  padding: 1.1rem 2.5rem; /* Matches contact form submit button padding */
  border-radius: var(--border-radius-pill); /* Matches btn border-radius */
  font-weight: var(--font-weight-semibold); /* Matches contact form submit button weight */
  letter-spacing: var(--letter-spacing-wide); /* Matches btn letter-spacing */
  text-transform: uppercase; /* Matches btn text-transform */
  font-size: 0.85rem; /* Matches btn font-size */
  background-color: var(--color-primary); /* Matches btn.primary background */
  color: var(--color-white); /* Matches btn.primary color */
  border: 1.5px solid var(--color-primary); /* Matches btn border */
  transition: var(--transition-smooth); /* Matches btn transition */
  transition-property: background-color, color, border-color, transform, box-shadow;
  cursor: pointer;
}
#subscribe-button:hover,
#subscribe-button:focus-visible {
  background-color: var(--color-primary-hover); /* Matches btn.primary hover */
  border-color: var(--color-primary-hover); /* Matches btn.primary hover */
  transform: translateY(-3px); /* Matches btn.primary hover transform */
  box-shadow: var(--shadow-md); /* Matches btn.primary hover shadow */
}
#subscribe-button:active {
  transform: translateY(-1px) scale(0.98); /* Matches btn active transform */
  box-shadow: var(--shadow-xs); /* Matches btn active shadow */
  filter: brightness(95%); /* Matches btn active filter */
}

.subscribe-message {
  margin-top: 1.5rem;
  padding: 0.8rem 1.2rem;
  border-radius: var(--border-radius-sm);
  font-size: 0.9rem;
  text-align: center;
  max-width: 550px;
  margin-left: auto; margin-right: auto;
  display: none;
  transition: opacity 0.3s ease;
}
.subscribe-message:not(.hidden) {
    display: block;
}
.subscribe-message.success {
  background-color: #e6f9ee;
  color: var(--color-success);
  border: 1px solid rgba(40, 167, 69, 0.3);
}
.subscribe-message.error {
  background-color: #fdeded;
  color: var(--color-error);
  border: 1px solid rgba(220, 53, 69, 0.3);
}

/* --- Footer Section with HugeIcons --- */
footer { 
  background-color: var(--color-footer-bg); 
  color: var(--color-footer-text); 
  padding: 5rem 0 2.5rem; 
  font-size: 0.9rem; 
}

.footer-content { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  margin-bottom: 4rem; 
  flex-wrap: wrap; 
  gap: 2rem; 
}

.footer-logo { 
  font-size: 1.6rem; 
  font-weight: var(--font-weight-bold); 
  color: var(--color-white); 
}

.footer-logo a { 
  color: inherit; 
}

.footer-social { 
  display: flex; 
  gap: 2rem; 
}

.social-link { 
  color: #FFFFFF; 
  transition: color var(--transition-duration-fast) ease, transform var(--transition-duration-normal) var(--transition-easing); 
  font-size: 0.9rem; 
  text-transform: uppercase; 
  letter-spacing: 0.05em; 
  font-weight: var(--font-weight-medium); 
  position: relative; 
  padding-bottom: 4px; 
  opacity: 0.95; 
  display: flex; 
  align-items: center; 
  gap: 0.5rem; 
}

.social-link .hgi-stroke { 
  font-size: 1.3rem; 
  transition: transform var(--transition-duration-normal) var(--transition-easing); 
}

.social-link:hover, 
.social-link:focus-visible { 
  color: #FFFFFF; 
  opacity: 1; 
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.4); 
}

.social-link:hover .hgi-stroke, 
.social-link:focus-visible .hgi-stroke { 
  transform: scale(1.1); 
}

.social-link::after { 
  content: ''; 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  width: 0; 
  height: 1.5px; 
  background-color: #FFFFFF; 
  transition: width var(--transition-duration-normal) var(--transition-easing); 
  box-shadow: 0 0 3px rgba(255, 255, 255, 0.5); 
}

.social-link:hover::after, 
.social-link:focus-visible::after { 
  width: 100%; 
}

.footer-bottom {
  width: 100%;
  text-align: center;
  padding-top: 2.5rem;
  border-top: 1px solid var(--color-footer-border);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-bottom p {
  color: #fff;
  margin: 0 auto;
  display: inline-block;
  text-align: center;
}

/* Add this to your existing styles.css */

/* Contact form notification */
.contact-message {
  margin-top: 1.5rem;
  padding: 0.8rem 1.2rem;
  border-radius: var(--border-radius-sm);
  font-size: 0.9rem;
  text-align: center;
  max-width: 550px;
  margin-left: auto;
  margin-right: auto;
  display: none;
  transition: opacity 0.3s ease;
}
.contact-message:not(.hidden) {
  display: block;
}
.contact-message.success {
  background-color: #e6f9ee;
  color: var(--color-success);
  border: 1px solid rgba(40, 167, 69, 0.3);
}
.contact-message.error {
  background-color: #fdeded;
  color: var(--color-error);
  border: 1px solid rgba(220, 53, 69, 0.3);
}

/* --- Responsive Design --- */
@media (max-width: 992px) { /* Tablet */
  .contact-form { padding: 3rem; max-width: 600px; }
  .projects-grid { gap: 2.5rem; }
}
@media (max-width: 768px) { /* Mobile Landscape / Small Tablet */
  :root { --section-spacing-lg: 100px; --header-height: 70px; --grid-gap: 2rem; }
  body { padding-top: var(--header-height); }
  header { padding: 0 1.5rem; height: var(--header-height); }
  .container { padding: 0 1.5rem; }
  h1 { font-size: clamp(2.2rem, 8vw, 3rem); }
  h2 { font-size: clamp(1.8rem, 6vw, 2.5rem); }
  .menu-toggle { display: block; }
  nav { position: static; }
  nav ul { position: fixed; top: var(--header-height); left: 0; width: 100%; height: calc(100vh - var(--header-height)); background-color: var(--color-white); flex-direction: column; align-items: center; justify-content: flex-start; padding: 4rem 1rem 2rem; gap: 1.5rem; transform: translateX(-100%); transition: transform var(--transition-duration-normal) var(--transition-easing); overflow-y: auto; z-index: 99; border-top: 1px solid var(--color-border-subtle); box-shadow: var(--shadow-lg); }
  nav ul.active { transform: translateX(0); }
  nav ul li a { font-size: 1.2rem; padding: 0.8rem 1rem; font-weight: var(--font-weight-regular); color: var(--color-primary); }
  nav ul li a .hgi-stroke { font-size: 1.5rem; }
  nav ul li a::after { display: none; }
  .footer-content { flex-direction: column; text-align: center; gap: 2.5rem; }
  .footer-social { flex-wrap: wrap; justify-content: center; }
  .projects-grid { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
  .project-info { padding: 1.8rem 2rem; }
  .skills-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .skill-card { padding: 2.5rem 1.5rem; }
  .contact-form { padding: 2.5rem; max-width: 90%; }
  #blog-hero { padding: calc(var(--header-height) + 3rem) 1rem 3rem; }
  .coming-soon { padding: 2.5rem 1.5rem; }
  #subscribe-form .form-group { flex-direction: column; align-items: stretch; }
  #subscribe-button { width: 100%; }
}
@media (max-width: 576px) { /* Mobile Portrait */
  :root { --section-spacing-lg: 80px; }
  header { padding: 0 1rem; }
  .container { padding: 0 1rem; }
  .cta-buttons { flex-direction: column; align-items: center; gap: 1rem; }
  .btn { width: 90%; max-width: 320px; padding: 0.8rem 1.5rem; }
  .btn-project { padding: 0.6rem 1.4rem; }
  .contact-form { padding: 2rem 1.5rem; }
  #hero { padding: 4rem 1rem; }
  .tagline { margin-bottom: 2.5rem; }
  .project-image { height: 140px; }
  .coming-soon { padding: 2rem 1rem; }
  .coming-soon h2 { font-size: clamp(1.8rem, 6vw, 2.2rem); }
}
.hgi-twotone.hgi-new-twitter {
  color: #FFFFFF; /* Primary color */
  --hgi-secondary: #FFFFFF; /* Secondary color, if supported by HugeIcons */
}
/* --- Animations --- */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { display: inline-block; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; vertical-align: middle; margin-left: 0.5em; }


/* === Add these styles to your existing styles.css file === */
/* === Typically add them near related sections like .projects-grid or before @media queries === */

/* --- Blog Page Specific Styles --- */

/* Remove specific blog hero styles if you want the standard section padding */
/* Or adjust as needed */
/*
#blog-hero {
  min-height: 40vh;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: calc(var(--header-height) + 5rem) 1rem 5rem;
  background: linear-gradient(145deg, var(--color-white) 0%, var(--color-bg-light) 100%);
  position: relative; border-bottom: 1px solid var(--color-border-subtle);
}
.blog-hero-content h1 { margin-bottom: 0.8rem; }
.blog-hero-content .subtitle {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--color-text-secondary);
  max-width: 700px; margin: 0 auto;
  font-weight: var(--font-weight-light);
}
*/

#blog-content {
  padding: var(--section-spacing-lg) 0; /* Use standard section padding */
  background-color: var(--color-white);
}

/* Blog Grid Layout */
.blog-grid {
    display: grid;
    /* Adjust minmax for desired card width */
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: var(--grid-gap);
    margin-top: 4rem; /* Space below section header */
}

/* Individual Blog Post Card Styling */
.blog-post-card {
    background-color: var(--color-white);
    border-radius: var(--border-radius-lg); /* Consistent with project cards */
    overflow: hidden;
    box-shadow: var(--shadow-md); /* Consistent with project cards */
    transition: transform var(--transition-duration-normal) var(--transition-easing), box-shadow var(--transition-duration-normal) var(--transition-easing);
    border: 1px solid var(--color-border-subtle);
    display: flex;
    flex-direction: column;
}

.blog-post-card:hover,
.blog-post-card:focus-within {
    transform: translateY(-12px) scale(1.02); /* Consistent hover effect */
    box-shadow: var(--shadow-xl);
}

/* Blog Post Image Placeholder/Wrapper */
.blog-post-image-wrapper {
    height: 190px; /* Adjust height as needed */
    overflow: hidden;
    background-color: var(--color-bg-medium); /* Placeholder background */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    border-bottom: 1px solid var(--color-border-subtle);
    position: relative; /* For potential image overlay effects later */
}

.blog-post-image-wrapper img { /* Style if using actual images */
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-duration-slow) var(--transition-easing);
}

.blog-post-card:hover .blog-post-image-wrapper img {
    transform: scale(1.05); /* Zoom effect on hover */
}

/* Blog Post Content Area */
.blog-post-info {
    padding: 1.8rem 2.2rem; /* Consistent padding */
    flex-grow: 1; /* Allows 'Read More' to stick to bottom */
    display: flex;
    flex-direction: column;
}

/* Metadata (Date, Read Time) */
.blog-post-meta {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-bottom: 0.75rem;
    display: block;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

/* Post Title */
.blog-post-title {
    margin-bottom: 0.75rem;
    font-size: 1.4rem; /* Slightly smaller than project titles? Adjust as needed */
    color: var(--color-primary);
    line-height: 1.4;
    font-weight: var(--font-weight-semibold); /* Make title stand out */
}

.blog-post-title a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-duration-fast) ease;
}

.blog-post-title a:hover,
.blog-post-title a:focus-visible {
    color: var(--color-primary-hover);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}

/* Post Excerpt */
.blog-post-excerpt {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    margin-bottom: 1.5rem;
    flex-grow: 1; /* Pushes 'Read More' down */
    line-height: 1.65;
}

/* "Read More" Link */
.read-more-link {
    display: inline-block;
    margin-top: auto; /* Pushes to bottom */
    padding-top: 1rem; /* Space above link */
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    text-decoration: none;
    transition: color var(--transition-duration-fast) ease, transform var(--transition-duration-fast) ease;
}

.read-more-link i { /* Style for the arrow icon */
    transition: transform var(--transition-duration-fast) ease;
    display: inline-block; /* Prevents icon wrapping */
}

.read-more-link:hover,
.read-more-link:focus-visible {
    color: var(--color-primary-hover);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}

.read-more-link:hover i,
.read-more-link:focus-visible i {
    transform: translateX(4px); /* Subtle arrow movement */
}

/* Adjust Subscribe Section Spacing on Blog Page */
#blog-content .subscribe-section {
  margin-top: 5rem; /* More space after the blog posts */
  padding-top: 3rem; /* More space above the heading */
  border-top: 1px solid var(--color-border-subtle);
}

/* --- Add Responsive Adjustments within existing @media queries --- */

@media (max-width: 992px) { /* Tablet */
  /* Adjust grid gap if needed */
  .blog-grid { gap: 2.5rem; }
}

@media (max-width: 768px) { /* Mobile Landscape / Small Tablet */
  .blog-grid {
      grid-template-columns: 1fr; /* Stack cards on smaller screens */
      gap: 2.5rem; /* Adjust gap for stacked cards */
   }
   .blog-post-info { padding: 1.8rem 2rem; }

   #blog-content .subscribe-section { margin-top: 4rem; }
}

@media (max-width: 576px) { /* Mobile Portrait */
   .blog-post-title { font-size: 1.3rem; }
   .blog-post-info { padding: 1.5rem; }
   .blog-post-image-wrapper { height: 160px; }
}


/* Remove the old coming-soon styles if they are no longer needed */
/*
.coming-soon { ... }
.coming-soon-icon { ... }
*/

/* Ensure subscribe form styles are still correct, looks like they are reused well */
/* --- End of additions to styles.css --- */