/* ---- About the Maker ---- */

.about-body {
  --space: #1A1E27;
  --starlight: #EFEAE2;
  --copper: #C08457;
  --copper-light: #D89A6E;
  margin: 0;
  min-height: max(100dvh, calc(100vw * 0.87));
  color: var(--starlight);
  background-color: #1A1E27;
  background-image: url("/assets/about-bg.jpg");
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  font-family: "Karla", system-ui, sans-serif;
}

/* Back link */
.about-header {
  padding: 22px 5vw 0;
}

.about-back {
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--copper-light);
  text-decoration: none;
}

.about-back:hover { color: var(--starlight); }

/* Fixed logo + fade so text slips away beneath it */
.about-logo {
  display: block;
  width: min(400px, 66vw);
  height: auto;
  margin: 8px auto 42px;
}

/* Text: centered under the logo, no panel, no outline */
.about-wrap {
  position: relative;
  z-index: 3;
  max-width: 1240px;
  margin: 0 auto;
  padding: 20px 5vw 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.about-panel {
  width: min(560px, 100%);
  background: radial-gradient(ellipse at center, rgba(20, 24, 34, 0.55) 0%, rgba(20, 24, 34, 0.30) 55%, rgba(20, 24, 34, 0) 78%);
  border: none;
  padding: 10px 0 0;
  text-align: center;
}

.about-text {
  font-size: 1.04rem;
  line-height: 1.78;
  color: var(--starlight);
  text-align: left;
  text-shadow: 0 1px 6px rgba(10, 12, 20, 0.85), 0 0 22px rgba(10, 12, 20, 0.6);
}

.about-text p { margin: 0 0 20px; }
.about-text p:last-of-type { margin-bottom: 0; }

.about-lede {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.16rem;
  line-height: 1.58;
  color: var(--starlight);
  text-align: center;
  text-shadow: 0 1px 6px rgba(10, 12, 20, 0.9), 0 0 24px rgba(10, 12, 20, 0.65);
}

.about-cta {
  display: inline-block;
  margin-top: 32px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--copper-light);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.about-cta:hover { color: var(--starlight); border-bottom-color: var(--copper); }

/* Footer */
.about-footer {
  position: relative;
  z-index: 3;
  border-top: 1px solid rgba(239, 234, 226, 0.15);
  padding: 24px 5vw 32px;
  text-align: center;
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--starlight) 60%, transparent);
}

.about-footer p { margin: 0; }

.about-body a:focus-visible { outline: 3px solid var(--copper); outline-offset: 3px; }

@media (min-width: 1280px) {
  .about-wrap {
    max-width: 900px;
    margin-left: max(6vw, calc(50% - 760px));
    margin-right: auto;
  }
}

@media (max-width: 780px) {
  .about-body { background-position: center top; }
  .about-logo { width: min(300px, 74vw); margin-bottom: 30px; }
  .about-text { font-size: 1rem; line-height: 1.72; }
  .about-lede { font-size: 1.06rem; }
}