/* Structural details recovered from the June 2026 / 2024 archive markup.
   Neutral header colors and spacing are reconstructed; archive CSS was missing. */
.site-header { padding-block: 31px; flex-wrap: nowrap; gap: 30px; }
.brand { display: block; flex: 0 0 auto; font-size: 0; line-height: 1; }
.brand img { display: block; width: 300px; height: auto; max-width: 100%; }
.site-header .desktop-navigation { display: flex; gap: 34px; padding: 0; }
.site-header .desktop-navigation a { color: #222; font-family: Roboto, Arial, sans-serif; font-size: 24px; }
.site-header .desktop-navigation a:hover { color: #777; }
.menu-toggle { display: none; }
.menu-toggle span { background: #222; }
.menu-drawer { position: fixed; inset: 0 0 0 auto; margin: 0 0 0 auto; border: 0; padding: 28px; width: min(390px, 90vw); max-width: none; height: 100dvh; max-height: none; background: #fff; color: #222; overflow-y: auto; }
.menu-drawer::backdrop { background: #0007; }
.menu-drawer[open] { display: block; animation: drawer-enter .22s ease-out; }
.drawer-heading { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 43px; }
.drawer-brand { display: block; line-height: 1; }
.drawer-brand img { display: block; width: 230px; height: auto; max-width: 100%; }
.menu-close { display: grid; place-items: center; background: none; border: 0; color: #222; font-size: 34px; width: 44px; height: 44px; padding: 0; flex: 0 0 44px; cursor: pointer; }
.menu-close:hover { background: #f2f2f2; }
.menu-drawer nav { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.menu-drawer nav a { display: block; color: #222; padding: 16px 0; font-size: 24px; border-bottom: 1px solid #ededed; }
.menu-drawer nav a:hover { color: #777; }
.menu-drawer nav a[aria-current=page] { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; }
.page-end { height: 65px; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "form bio"; gap: clamp(28px, 6vw, 95px); align-items: start; }
.contact-grid > #contact-form { grid-area: form; width: 100%; min-width: 0; }
.contact-grid > .contact-bio { grid-area: bio; min-width: 0; width: 100%; }
.contact-profile { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 22px; align-items: start; }
.contact-bio .contact-profile > img { float: none; width: 160px; height: 160px; border-radius: 50%; object-fit: cover; margin: 0; }
.contact-identity { min-width: 0; overflow-wrap: anywhere; }
.contact-bio .contact-identity h2 { font-family: Roboto, Arial, sans-serif; font-size: 16px; font-weight: 600; line-height: 1.6; margin: 0 0 15px; color: inherit; }
.contact-identity address { font-style: normal; margin-bottom: 15px; }
.contact-history { clear: both; margin-top: 30px; }
.project-gallery { grid-template-columns: minmax(0, 1fr); gap: 25px; }
.gallery-item img { aspect-ratio: 16 / 9; height: auto; object-fit: cover; }
.submit-button { color: #333; border-color: #777; max-width: 380px; }
.submit-button:hover { background: #333; color: #fff; border-color: #333; }
.submit-button:disabled { cursor: wait; color: #666; background: #f2f2f2; border-color: #aaa; }
.form-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
#form-result { font-size: 15px; margin-top: 22px; padding-top: 17px; border-top: 1px solid #ccc; }
#form-result[data-state=error] { color: #a12424; }
@keyframes drawer-enter { from { transform: translateX(100%); } to { transform: translateX(0); } }
@media (max-width: 1024px) {
  .contact-profile { grid-template-columns: 110px minmax(0, 1fr); gap: 15px; }
  .contact-bio .contact-profile > img { width: 110px; height: 110px; }
  .site-header { padding-block: 27px; }
  .site-header .desktop-navigation { display: none; }
  .menu-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; border: 0; background: transparent; padding: 10px; cursor: pointer; }
  .menu-toggle span { display: block; height: 2px; width: 24px; }
  .project-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
@media (max-width: 767px) {
  .site-header { padding-block: 24px; gap: 20px; }
  .brand img { width: 240px; }
  .portfolio-grid { grid-template-columns: minmax(0, 1fr); gap: 25px; }
  .project-gallery { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .project-details, .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-grid { grid-template-areas: "form" "bio"; gap: 42px; }
  .contact-profile { grid-template-columns: 120px minmax(0, 1fr); }
  .contact-bio .contact-profile > img { width: 120px; height: 120px; }
  h1 { font-size: 29px; margin-bottom: 25px; }
  .page-end { height: 45px; }
}
@media (max-width: 360px) {
  .contact-profile { grid-template-columns: 95px minmax(0, 1fr); }
  .contact-bio .contact-profile > img { width: 95px; height: 95px; }
  .brand img { width: 210px; }
  .menu-drawer { padding: 21px; }
}
@media (prefers-reduced-motion: reduce) { .menu-drawer[open] { animation: none; } }