@import url("../css/reset.css");
@import url("../css/font.css");

:root { --paper: #f7f4f0; --mist: #dfe7f3; --ink: #000; --pad: clamp(18px, 4vw, 62px); }
* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; margin: 0; }
body { font-family: Inter, Arial, sans-serif; color: var(--ink); background: var(--paper); }
a { color: inherit; text-decoration: none; }
.error-page { position: relative; min-height: 100svh; overflow: hidden; background: linear-gradient(120deg, rgb(218 228 241 / 94%), var(--paper) 42%, rgb(225 232 244 / 92%)); }
.error-page::before, .error-page::after { content: ""; position: absolute; z-index: 0; border-radius: 50%; background: rgb(181 201 225 / 57%); filter: blur(52px); }
.error-page::before { top: 5%; left: -8%; width: 32vw; height: 22vw; }.error-page::after { right: 2%; bottom: -16%; width: 40vw; height: 40vw; }
.error-header { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 25px var(--pad); }.error-header__logo img { width: 56px; height: 56px; }.error-nav { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 3vw, 46px); padding: 13px 30px; border-radius: 999px; background: rgb(188 188 188 / 86%); font-size: clamp(13px, 1.25vw, 19px); white-space: nowrap; }.error-nav a:hover, .error-nav [aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }.error-menu { display: flex; grid-column: 3; justify-self: end; flex-direction: column; gap: 6px; width: 54px; padding: 11px 0 11px 18px; border: 0; background: transparent; cursor: pointer; }.error-menu span { display: block; width: 36px; height: 2px; background: var(--ink); }
.error-decor { position: absolute; z-index: 1; width: clamp(100px, 14vw, 230px); aspect-ratio: 1; background: url("../assets/img/glassbloom.svg") center / contain no-repeat; opacity: .76; filter: saturate(.8); }.error-decor--top { top: 12%; right: 14%; }.error-decor--left { top: 35%; left: 7%; transform: rotate(-16deg); }.error-decor--bottom { right: 9%; bottom: 10%; width: clamp(90px, 11vw, 180px); transform: rotate(18deg); }
.error-content { position: relative; z-index: 2; display: flex; min-height: calc(100svh - 110px); flex-direction: column; align-items: center; justify-content: center; padding: 0 var(--pad) 12vh; text-align: center; }.error-content h1 { margin: 0; font-size: clamp(128px, 18vw, 300px); font-weight: 700; letter-spacing: -.075em; line-height: .8; }.error-content p { margin: 20px 0 0; font-size: clamp(20px, 2.2vw, 34px); font-weight: 500; }
@media (max-width: 850px) { .error-nav { position: absolute; top: 92px; left: var(--pad); right: var(--pad); display: none; flex-direction: column; gap: 0; padding: 15px; text-align: center; box-shadow: 0 12px 24px rgb(0 0 0 / 12%); }.error-nav.is-open { display: flex; }.error-nav a { padding: 12px; }.error-content { min-height: calc(100svh - 90px); }.error-decor--top { right: 5%; }.error-decor--left { left: -4%; } }
@media (max-width: 520px) { .error-header { padding-block: 16px; }.error-header__logo img { width: 42px; height: 42px; }.error-menu { width: 42px; }.error-menu span { width: 30px; }.error-content h1 { font-size: 42vw; }.error-decor--top { top: 17%; }.error-decor--bottom { bottom: 18%; right: -2%; } }