/* per-page polish: 404
   Scope: main.e, .ec ,  strictly scoped.
   Note: this page has no footer in the HTML proto (missing).
*/

/* ── Centering: full height properly below nav ── */
main.e {
  min-height: calc(100vh - 72px) !important;
  padding-top: 60px !important;
  padding-bottom: 80px !important;
  display: grid !important;
  place-items: center !important;
}

/* ── Error container ── */
.ec {
  max-width: 460px !important;
  width: 100% !important;
  padding: 0 16px !important;
}

/* CANON sec 10  -  eyebrow: 10.5px / 500 / .12em. */
.ec .eyebrow {
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: .12em !important;
  font-weight: 500 !important;
  color: var(--accent) !important;
  text-transform: uppercase !important;
  margin-bottom: 16px !important;
  display: block !important;
}

/* ── Big heading: crisp, not too fat ── */
.ec h1 {
  font-size: 40px !important;
  font-weight: 700 !important;
  letter-spacing: -.04em !important;
  line-height: 1.05 !important;
  color: var(--ink) !important;
  margin: 0 0 14px !important;
}

/* ── Subtext ── */
.ec p {
  font-size: 15px !important;
  color: var(--ink-soft) !important;
  line-height: 1.6 !important;
  max-width: 32ch !important;
  margin: 0 auto 32px !important;
}

/* ── Actions row ── */
.ec .acts {
  gap: 10px !important;
  justify-content: center !important;
}

/* ── Ambient clouds: on a 404, float them softly ── */
.spacebg .c1 {
  opacity: .48 !important;
}
.spacebg .c2 {
  opacity: .38 !important;
}
.spacebg .c3 {
  opacity: .32 !important;
}
html.dark .spacebg .c {
  opacity: .18 !important;
}

/* ── Mobile ── */
@media (max-width: 480px) {
  /* CANON sec 10.1  -  404 mobile h1 = 28. */
  .ec h1 {
    font-size: 28px !important;
  }
  .ec p {
    font-size: 14px !important;
  }
  .ec .acts {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .ec .acts .btn {
    text-align: center !important;
    justify-content: center !important;
  }
}
@media (min-width: 481px) and (max-width: 768px) {
  /* CANON sec 10.1  -  404 tablet h1 = 34. */
  .ec h1 { font-size: 34px !important; }
}