/* The Montserrat font is loaded via a <link> tag in index.html.  We define a helper class here so Tailwind can apply the font without extra configuration.
 * According to Google Fonts documentation, you should request the desired font via a stylesheet link in the HTML head and then reference it via `font-family` in your CSS【331606352844919†L120-L131】. */

/* Tailwind CSS is loaded via a CDN script in index.html, so there's no need to import it here. */

/* Custom styles for the author website
   Tailwind CSS handles most of the visual styling via utility classes. 
   Use this file for any additional overrides or custom CSS variables. */

/* Example: global link styles (optional) */
a {
    /* Customize default link color if desired */
    color: inherit;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* Utility class to apply the Montserrat font family to elements.  Assign this class to any element that should use the Montserrat typeface. */
.font-montserrat {
    font-family: 'Montserrat', sans-serif;
}

/* Additional custom rules can be added below */

/* Reveal animations for sections: hidden state and visible state */
.section-hidden {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.section-show {
    opacity: 1;
    transform: translateY(0);
}

/* mobile menu closed by default */
#mobile-menu { display: none; }

/* open state driven by body class — works even if Tailwind isn't running */
body.menu-open #mobile-menu { display: block; }

/* never show the mobile panel on desktop */
@media (min-width: 768px) {
  #mobile-menu { display: none !important; }
}