/* ============================================================
   PAGE SETUP
   Centers everything in the middle of the browser window.
   ============================================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;   /* page background color */
  color: #111111;        /* default text color */
  font-family: "IBM Plex Sans", sans-serif; /* single source of truth — inputs/buttons/etc all inherit this */
}

main {
  text-align: center;
  padding: 1rem;
  animation: page-enter 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes page-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ============================================================
   THE BIG NAME
   ============================================================ */
h1 {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 300;
  font-size: clamp(2.5rem, 8vw, 5rem); /* shrinks automatically on phones */
  letter-spacing: -0.02em;
}


/* ============================================================
   PAGE TITLE (contact.html and any future standalone page) —
   a smaller heading that sits under a "← Name" back link instead
   of the big homepage name.
   ============================================================ */
.page-title {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 500;
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  letter-spacing: -0.02em;
  margin-top: 0.75rem;
}


/* ============================================================
   THE GREY LINE UNDER THE NAME
   Width is proportional to the name's font size, so it scales
   with the clamp() above instead of needing a fixed pixel value.
   ============================================================ */
.divider {
  width: 3em;           /* relative to h1's font-size via inheritance */
  height: 1px;
  margin: 1.5rem auto;
  border: none;
  background: #cccccc;  /* line color */
}


/* ============================================================
   "PORTFOLIO" LINK + "CONTACT" BUTTON ROW
   ============================================================ */
.actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  font-family: "IBM Plex Sans", sans-serif;
}

.subheading {
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #666666;             /* subheading color, at rest */
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.subheading:hover {
  color: #111111;             /* subheading color, on hover */
  border-color: #111111;      /* underline color, on hover */
}

.button {
  font-family: inherit;        /* <button> doesn't inherit fonts by default */
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #666666;              /* button text color, at rest */
  text-decoration: none;
  background: none;
  cursor: pointer;
  padding: 0.55rem 1.25rem;
  border: 1px solid #cccccc;   /* button border color, at rest */
  border-radius: 4px;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.button:hover {
  background: #111111;         /* button fill color, on hover */
  border-color: #111111;
  color: #ffffff;               /* button text color, on hover */
}


/* ============================================================
   CONTACT FORM — smooth open/close
   .contact-wrap animates its height via a CSS grid trick: a grid
   row sized "0fr" (closed) to "1fr" (open) transitions smoothly,
   which a plain height:auto transition can't do. .contact-inner
   clips the content while it's collapsed. .contact-form itself
   just fades/rises in on top of that, slightly after the box
   starts opening, so the fields feel like they "emerge" rather
   than just appearing.
   ============================================================ */
.contact-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-wrap.open {
  grid-template-rows: 1fr;
}

.contact-inner {
  overflow: hidden;
  min-height: 0;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: min(22rem, 90vw);
  margin: 1.5rem auto 0;
  text-align: left;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.35s ease 0.08s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.08s;
}

.contact-wrap.open .contact-form {
  opacity: 1;
  transform: translateY(0);
}

/* contact.html uses this instead of .contact-wrap — the form is
   visible immediately (there's nothing else on that page to reveal
   it from), so it opts out of the opacity/transform above. The
   page-enter animation on <main> already gives it a smooth arrival. */
.contact-form--page {
  opacity: 1;
  transform: none;
  transition: none;
}

.contact-form input,
.contact-form textarea {
  font-family: inherit;
  font-size: 0.95rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid #cccccc;   /* input border color, at rest */
  border-radius: 4px;
  background: transparent;
  color: inherit;
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #111111;       /* input border color, focused */
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  font-family: inherit;        /* some browsers don't inherit this onto placeholders by default */
  opacity: 0.6;
}

.contact-form button[type="submit"] {
  font-family: inherit;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #666666;
  background: none;
  cursor: pointer;
  padding: 0.55rem 1.25rem;
  border: 1px solid #cccccc;
  border-radius: 4px;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.contact-form button[type="submit"]:hover {
  background: #111111;
  border-color: #111111;
  color: #ffffff;
}

.contact-status {
  font-size: 0.85rem;
  color: #666666;
  min-height: 1.2em; /* reserves space so text appearing doesn't shift layout */
}

/* Honeypot field — invisible to real visitors, still present in the
   DOM for bots that fill in every input. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* ============================================================
   DARK MODE
   Kicks in automatically based on the visitor's OS setting.
   Edit the colors in here to change how dark mode looks.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  body {
    background: #111111;
    color: #f5f5f5;
  }
  .divider {
    background: #333333;
  }
  .subheading {
    color: #999999;
  }
  .subheading:hover {
    color: #f5f5f5;
    border-color: #f5f5f5;
  }
  .button {
    color: #999999;
    border-color: #333333;
  }
  .button:hover {
    background: #f5f5f5;
    border-color: #f5f5f5;
    color: #111111;
  }
  .contact-form input,
  .contact-form textarea {
    border-color: #333333;
  }
  .contact-form input:focus,
  .contact-form textarea:focus {
    border-color: #f5f5f5;
  }
  .contact-form button[type="submit"] {
    color: #999999;
    border-color: #333333;
  }
  .contact-form button[type="submit"]:hover {
    background: #f5f5f5;
    border-color: #f5f5f5;
    color: #111111;
  }
  .contact-status {
    color: #999999;
  }
}