* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif;
  background: #3a3a3a; /* outer dark gray margin */
}

/* Outer wrapper (rounded full-page card) */
.page {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.2rem;
  background: #3a3a3a; /* same as text gray */
}

.hero {
  width: 100%;
  min-height: calc(100vh - 2.4rem);
  background: #000;
  border-radius: 1rem;  /* rounded inner view */
  display: flex;
  justify-content: center;
  align-items: center;
}

.content {
  text-align: center;
  transform: translateY(-40%);
}

.logo {
  width: min(280px, 60vw);
  height: auto;
  margin-bottom: 2rem;
  filter: drop-shadow(0 8px 32px rgba(0,0,0,.6));
}

.brand {
  font-size: clamp(2.2rem, 9vw, 4.5rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #3f3f3f;
  opacity: 0.9;
  margin-top: 1.8rem;
  text-align: center;
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .content {
    transform: translateY(-35%);
  }
  .logo {
    width: min(240px, 70vw);
    margin-bottom: 1.5rem;
  }
  .brand {
    font-size: clamp(1.8rem, 10vw, 3.5rem);
  }
}

/* Header with hamburger pinned inside the rounded card */
.site-header{
  position:absolute;
  top:0; left:0; right:0;
  display:flex; align-items:center;
  padding: 0.75rem 0.75rem;
  pointer-events:none; /* only the button is interactive */
}
.hamburger{
  pointer-events:auto;
  width:42px; height:42px;
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  background:#000; border:1px solid #1a1a1a; border-radius:10px;
  padding:8px; cursor:pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}
.hamburger span{
  display:block; width:100%; height:2px; background:#9a9a9a; border-radius:2px;
}

/* Left drawer + overlay */
.overlay{
  position:absolute; inset:0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(1px);
  z-index: 20;
}
.nav-drawer{
  position:absolute; top:0; left:0; height:100%; width:260px;
  background:#3a3a3a;            /* same dark gray as your text/margin */
  color:#efefef;                  /* readable on dark gray */
  transform: translateX(-100%);
  transition: transform .25s ease-out;
  padding: 1rem 1rem 2rem;
  border-top-right-radius: 14px;  /* soften inner edge to match card feel */
  border-bottom-right-radius: 14px;
  z-index: 30;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.nav-drawer.open{ transform: translateX(0); }

.drawer-title{
  font-size: 0.95rem; font-weight: 700; letter-spacing: .06em;
  color:#d6d6d6; margin: .25rem .25rem 0.5rem;
  text-transform: uppercase;
}
.drawer-list{
  list-style:none;
  /* Increase top margin to give more breathing room between the “MENU” heading and the first link */
  margin-top: 1.4rem;
}
.drawer-list li{ margin: .125rem 0; }
.drawer-list a{
  display:block;
  padding: .6rem .7rem;
  border-radius: 10px;
  color:#efefef; text-decoration:none;
  transition: background-color .15s ease, color .15s ease, transform .05s ease;
}
.drawer-list a:hover{ background:#4a4a4a; }
.drawer-list a:active{ transform: translateY(1px); }
/* Focus styling for links inside the drawer. Make focused link share the
   same background as the hover/active state and remove the heavy outline.
   This avoids a visible contour on the Home link when opening the menu on
   other pages. */
.drawer-list a:focus{
  background: #4a4a4a;
  outline: none;
  border-radius: 10px;
}


/* Styling for the confirmation message after form submission */
.message-sent {
  margin-top: 1rem;
  color: #7a7a7a;
  font-size: 1rem;
  opacity: 0.9;
  text-align: center;
}

/* Contact form styling */
/* Layout container for contact page. Centers content and limits width. */
.contact-section {
  width: 100%;
  max-width: 600px;
  margin: 4rem auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}
/* Headline styling for contact page */
.contact-section h1 {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #efefef;
  margin: 0;
}
/* Introductory text under headline */
.contact-section .intro {
  color: #7a7a7a;
  font-size: 1rem;
  max-width: 520px;
  line-height: 1.5;
  margin: 0 0 1.5rem;
}
/* Form container for aligning fields vertically */
.contact-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
/* Input and textarea base styling */
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border-radius: 8px;
  border: 1px solid #444;
  background: #1e1e1e;
  color: #efefef;
  font-size: 1rem;
  line-height: 1.4;
}
/* Textarea minimum height and resizable */
.contact-form textarea {
  min-height: 150px;
  resize: vertical;
}
/* Submit button styling */
.contact-form button {
  align-self: center;
  padding: 0.8rem 2rem;
  border-radius: 8px;
  background: #3a3a3a;
  color: #efefef;
  border: 1px solid #444;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.05s ease;
}
.contact-form button:hover {
  background: #4a4a4a;
}
.contact-form button:active {
  transform: translateY(1px);
}

/* Ensure hero acts as positioning context for header/drawer/overlay */
.hero{ position:relative; overflow:hidden; }

/* 404 page tweaks */
.back-home{
  pointer-events:auto;
  margin-left:.25rem;
  padding:.4rem .6rem;
  border-radius:10px;
  color:#bdbdbd;
  text-decoration:none;
  background:rgba(0,0,0,.35);
  border:1px solid #1a1a1a;
}
.back-home:hover{ color:#e0e0e0; }

/* Smaller logo on 404 */
.logo.small{ width:min(200px,50vw); }

/* Keep your upward lift, slightly milder for 404 */
.content.notfound{ transform:translateY(-30%); }

/* Subtext */
.nf-sub{
  color:#7a7a7a;
  margin-top:.25rem;
  margin-bottom:1rem;
}

/* Actions */
.nf-actions{ display:flex; gap:.5rem; justify-content:center; margin-top: .5rem; }
.btn{
  display:inline-block;
  padding:.6rem .9rem;
  border-radius:10px;
  background:#3a3a3a;
  color:#efefef;
  text-decoration:none;
  border:1px solid #2e2e2e;
  transition:transform .05s ease, background .15s ease;
}
.btn:hover{ background:#4a4a4a; }
.btn:active{ transform:translateY(1px); }
.btn.ghost{
  background:transparent;
  color:#bdbdbd;
  border:1px solid #3a3a3a;
}
.btn.ghost:hover{ background:#1a1a1a; }

/* --- Glitch twist on the big 404 --- */
.brand.glitch{
  position:relative;
  display:inline-block;
  font-size: clamp(2.6rem, 12vw, 6rem);
  letter-spacing:.08em;
  color:#3a3a3a;
}
.brand.glitch span{
  position:absolute; inset:0; pointer-events:none;
}
.brand.glitch span:first-child{
  animation:glitchShift 2.4s infinite ease-in-out alternate;
  clip-path: inset(0 0 55% 0);
  color:#525252; /* slightly lighter fragment */
  mix-blend-mode:screen;
}
.brand.glitch span:nth-child(2){
  animation:glitchShift 2.4s infinite .12s ease-in-out alternate-reverse;
  clip-path: inset(45% 0 0 0);
  color:#2a2a2a; /* slightly darker fragment */
  mix-blend-mode:multiply;
}
@keyframes glitchShift{
  0%   { transform: translate(0,0);   }
  20%  { transform: translate(-1px,0); }
  40%  { transform: translate(1px,0);  }
  60%  { transform: translate(-2px,0); }
  80%  { transform: translate(2px,0);  }
  100% { transform: translate(0,0);    }
}

/* Mobile nudge */
@media (max-width:480px){
  .content.notfound{ transform:translateY(-22%); }
  .brand.glitch{ font-size: clamp(2.2rem, 14vw, 4.2rem); }
}

/* --- 404 layout --- */
.content.nf {
  transform: translateY(-20%); /* less lift -> centers logo better */
  text-align: center;
}
.nf-logo {
  width: min(220px, 55vw);
  margin: 2rem auto;
  display: block;
}

/* same size 404s for symmetry */
.nf-404 {
  font-weight: 800;
  letter-spacing: .08em;
  color: #3a3a3a;
  opacity: .95;
  line-height: 1;
  margin: 0;
  font-size: clamp(3rem, 13vw, 7.5rem); /* unified size */
}
.nf-404.top { margin-bottom: 1rem; }
.nf-404.bottom { margin-top: 1rem; }

/* subtle, same-tone subtext */
.nf-text {
  color: #3a3a3a;
  margin-top: 2.5rem;
  font-size: clamp(1rem, 2.8vw, 1.25rem);
  opacity: .9;
}

/* round home button */
.nf-home {
  margin: 2.5rem auto 0;
  width: 64px; height: 64px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #cfcfcf;
  background: transparent;
  border: 1px solid #3a3a3a;
  text-decoration: none;
  transition: background .2s ease, transform .06s ease, color .2s ease, border-color .2s ease;
}
.nf-home:hover {
  background: #0e0e0e;
  border-color: #4a4a4a;
  color: #e6e6e6;
}
.nf-home:active { transform: translateY(1px); }

/* Mobile tweaks */
@media (max-width: 480px) {
  .content.nf { transform: translateY(-15%); }
  .nf-logo { width: min(200px, 65vw); margin: 1.75rem auto; }
}

/* Document mode for long pages */
.hero.doc{
  position: relative;
  display: block;                /* no center grid; content scrolls */
  min-height: calc(100vh - 2.4rem);
  padding: 3rem 1rem 2.5rem;     /* inner padding in the rounded card */
  overflow: auto;
}
.hero.doc.contact-page{
  /* Override doc layout for contact page: center content vertically */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 2.4rem);
  overflow: auto;
  padding-top: 4rem;
  padding-bottom: 2rem;
}
.content.doc{
  transform: none;               /* no vertical lift on docs */
  text-align: left;
  max-width: 820px;
  margin: 0 auto;
  color: #eaeaea;
}
.content.doc h1, .content.doc h2{
  color:#ffffff;
  margin-top: 1.75rem;
  margin-bottom: .5rem;
}
.content.doc h1{ font-size:2rem; font-weight:800; letter-spacing:.02em; }
.content.doc h2{ font-size:1.125rem; font-weight:700; }
.content.doc p, .content.doc ul{ margin-bottom: 1rem; }
.content.doc a{ color:#9ecfff; text-decoration: underline; }

/* Optional: highlight the current page link in the drawer */
.drawer-list a[aria-current="page"]{
  background:#4a4a4a;
}