@font-face {
  font-family: "Kelly Slab";
  src: url('/fonts/KellySlab-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --gold: #dfba74;
  --bright: #ffe3a8;
  --text: #f5f1e9;
  --muted: #c6c9ca;
  --line: #f0d49d38;
  --display: "Kelly Slab", Georgia, serif;
  --label: "Kelly Slab", Georgia, serif;
  --body: Manrope, system-ui, sans-serif;
  --ease: cubic-bezier(.22, .7, .25, 1);
}
* { box-sizing: border-box; letter-spacing: 0; }
html { background: #29292a; }
body { margin: 0; min-width: 320px; color: var(--text); font: 500 16px/1.5 var(--body); }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; cursor: pointer; }
button, a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
:is(button, a):focus-visible { outline: 2px solid var(--bright); outline-offset: 5px; }
.experience { position: relative; isolation: isolate; overflow: clip; min-height: 100svh; padding: 100px 24px 120px; display: flex; align-items: center; justify-content: center; }
.visual-stage { position: absolute; inset: 0; z-index: -2; display: block; overflow: hidden; }
.hero-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: translate(var(--scene-x, 0px), var(--scene-y, 0px)) scale(1.015); transition: transform 900ms var(--ease); }
.interface { position: relative; width: min(100%, 660px); display: flex; flex-direction: column; align-items: center; gap: 20px; }
.intro { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 18px; padding-bottom: 8px; }
.brand-title { position: relative; width: min(100%, 510px); aspect-ratio: 2 / 1; margin: 0; filter: drop-shadow(0 10px 7px #090805b0); }
.brand-title img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-title::after { content: ""; position: absolute; inset: 0; background: linear-gradient(108deg, transparent 43%, #fff4d4a3 50%, transparent 57%); background-size: 240% 100%; mask: url('/sun-wordmark.webp') center / contain no-repeat; -webkit-mask: url('/sun-wordmark.webp') center / contain no-repeat; mix-blend-mode: screen; animation: gold-reflection 9s ease-in-out infinite; pointer-events: none; }
.welcome { display: flex; align-items: center; justify-content: center; gap: 18px; width: min(100%, 390px); }
.welcome p { flex: none; margin: 0; font: 400 25px/1.3 var(--display); text-transform: uppercase; color: #ffe9bf; text-shadow: 0 2px 10px #090a0e; }
.welcome > span { flex: 1; height: 1px; background: #dfbc7970; }
.notice { width: 100%; padding: 16px 20px; text-align: center; background: #202429ec; border: 1px solid #dfbc7955; border-radius: 4px; overflow-wrap: anywhere; }
.notice strong { font-size: 18px; color: var(--bright); }
.notice p { white-space: pre-wrap; margin: 6px 0 0; color: var(--muted); }
.work-button {
  position: relative; isolation: isolate; display: block; width: 100%; aspect-ratio: 5 / 2; padding: 0; overflow: hidden;
  border: 0; border-radius: 4px; background: #442909;
  box-shadow: 0 0 18px #ffba405c, 0 0 48px #f2a3222e, 0 12px 28px #070b1166;
  animation: solar-pulse 4s ease-in-out infinite;
  transition: filter 240ms var(--ease), transform 240ms var(--ease);
}
.work-banner { display: block; width: 100%; height: 100%; object-fit: contain; }
.work-button::after, .nav-link::after { content: ""; position: absolute; inset: -40% -80%; z-index: -1; background: linear-gradient(108deg, transparent 42%, #fff2d323 50%, transparent 58%); transform: translateX(-55%); animation: glass-reflection 8s ease-in-out infinite; pointer-events: none; }
.work-button::after { z-index: 1; background: linear-gradient(108deg, transparent 44%, #fffbee42 50%, transparent 56%); animation-duration: 6s; mix-blend-mode: screen; }
.work-button:hover { filter: brightness(1.08); }
.work-button:active { transform: scale(.99); }
.link-grid { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.nav-link {
  position: relative; isolation: isolate; overflow: hidden; min-width: 0; min-height: 88px; padding: 13px 12px 12px;
  display: grid; grid-template-columns: minmax(0, 1fr) 15px; grid-template-rows: 20px auto; align-content: center; gap: 8px 6px;
  border: 1px solid transparent; border-radius: 6px;
  background: linear-gradient(125deg, #392816, #14100b 49%, #271b0f) padding-box, linear-gradient(125deg, #ffe1a2, #8a5e23 28%, #d3a351 65%, #fff0bb) border-box;
  box-shadow: inset 0 1px 0 #ffe5af45, inset 0 -3px 0 #0a07068a, inset 0 0 0 4px #b7812910, 0 0 12px #ba7e1721, 0 7px 17px #0a080b55;
  transition: border-color 240ms var(--ease), box-shadow 240ms var(--ease), background-color 240ms var(--ease);
}
.nav-link::before { content: ""; position: absolute; z-index: -1; inset: -100% -80%; background: linear-gradient(115deg, transparent 42%, #ffd98b20 50%, transparent 58%); transform: translateX(var(--reflection, -25%)); transition: transform 450ms var(--ease); pointer-events: none; }
.nav-link:nth-child(2)::after { animation-delay: 1s; }
.nav-link:nth-child(3)::after { animation-delay: 2s; }
.nav-link:nth-child(4)::after { animation-delay: 3s; }
.nav-link:not([aria-disabled]):hover { border-color: #ffe1a2; box-shadow: inset 0 1px #ffe5af7a, inset 0 -3px #0a07068a, 0 0 18px #ffc6573b, 0 10px 24px #060b1759; }
.nav-link:not([aria-disabled]):active { background-color: #e9d5af1f; }
.nav-symbol { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; justify-content: center; color: #f2c571; }
.nav-symbol svg { width: 19px; height: 19px; stroke-width: 1.25; }
.nav-copy { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
.nav-copy strong { --label-base: 25px; display: block; overflow-wrap: anywhere; text-align: center; font: 400 var(--fitted-size, var(--label-base))/1.25 var(--label); text-transform: uppercase; color: #ffdfa4; text-shadow: 0 1px 3px #000c; }
.nav-arrow { grid-column: 2; grid-row: 1; width: 13px; height: 13px; align-self: center; color: #dbc8a5; stroke-width: 1; }
.nav-link[aria-disabled="true"] { cursor: not-allowed; }
.nav-link[aria-disabled="true"] .nav-arrow { opacity: .35; }
.loading { min-height: 88px; }
.loading::after { content: "Загружаем навигацию"; grid-column: 1 / -1; place-self: center; color: var(--muted); font-size: 14px; }
.load-error { margin: 0; text-align: center; color: #ffdfcc; }
.load-error button { background: transparent; border: 0; color: var(--bright); text-decoration: underline; min-height: 44px; }
dialog { width: min(680px, calc(100% - 28px)); max-height: min(84dvh, 800px); padding: 0; margin: auto; overflow: hidden; color: var(--text); border: 1px solid #ddc79d70; border-radius: 6px; background: #282b30; box-shadow: 0 30px 100px #0009; }
dialog[open] { display: flex; flex-direction: column; }
dialog::backdrop { background: #0a1018b8; backdrop-filter: blur(12px); }
.modal-header { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 20px; padding: 24px; border-bottom: 1px solid var(--line); }
.modal-header > div { min-width: 0; }
.modal-header p { margin: 0 0 6px; font-size: 11px; color: var(--gold); }
.modal-header h2 { margin: 0; font: 400 29px/1.3 var(--label); overflow-wrap: anywhere; }
.close { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid var(--line); border-radius: 4px; background: #ffffff08; }
.close:hover { background: #ffffff15; }
.vacancies { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px; scrollbar-color: #bfa06a #232830; }
.vacancy { padding: 24px 0; border-bottom: 1px solid var(--line); }
.vacancy:first-child { padding-top: 0; }
.vacancy:last-child { border-bottom: 0; padding-bottom: 0; }
.vacancy h3 { margin: 0 0 12px; font: 400 25px/1.3 var(--label); color: var(--bright); overflow-wrap: anywhere; }
.vacancy p { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; line-height: 1.75; color: #e0e0df; }
.vacancy-apply { display: inline-flex; align-items: center; gap: 16px; min-height: 46px; margin-top: 18px; padding: 10px 18px; background: #dbc08b; color: #25211b; border: 1px solid #f4dcab; border-radius: 4px; font-weight: 800; }
.vacancy-apply svg { width: 18px; }
.empty { padding: 20px 0; margin: 0; color: var(--muted); text-align: center; }
@keyframes gold-reflection { 0%, 48% { background-position: 100% 0; opacity: 0; } 53% { opacity: .65; } 83%, 100% { background-position: 0 0; opacity: 0; } }
@keyframes glass-reflection { 0%, 60% { transform: translateX(-55%); } 94%, 100% { transform: translateX(55%); } }
@keyframes solar-pulse {
  0%, 100% { box-shadow: inset 0 2px 0 #fff5cce0, inset 0 -4px 0 #8553159c, 0 0 18px #ffba405c, 0 0 48px #f2a3222e, 0 12px 28px #070b1166; }
  50% { box-shadow: inset 0 2px 0 #fff9e7, inset 0 -4px 0 #8553159c, 0 0 26px #ffc95996, 0 0 65px #f2a3224a, 0 12px 28px #070b1166; }
}
@media (min-width: 1600px) {
  .interface { width: 730px; gap: 24px; }
  .brand-title { width: 570px; }
  .nav-copy strong { --label-base: 27px; }
}
@media (max-width: 1100px) {
  .experience { min-height: max(100svh, 150vw); padding: 0 30px 130px; align-items: flex-start; }
  .hero-image { object-position: center top; transform: none; }
  .interface { width: min(100%, 630px); padding-top: 57vw; gap: 18px; }
  .brand-title { width: 470px; max-width: 100%; }
}
@media (max-width: 700px) {
  .experience { min-height: max(100svh, 222vw); padding: 0 20px 110px; }
  .interface { width: min(100%, 430px); padding-top: 56vw; gap: 14px; }
  .intro { gap: 10px; padding-bottom: 0; }
  .brand-title { width: min(100%, 330px); }
  .welcome { width: min(100%, 320px); gap: 12px; }
  .welcome p { font-size: 23px; }
  .link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .nav-link { min-height: 82px; padding: 11px 14px; gap: 7px 8px; }
  .nav-copy strong { --label-base: 25px; }
  .nav-symbol svg { width: 18px; height: 18px; }
  .loading { min-height: 174px; }
  .modal-header, .vacancies { padding: 20px; }
  .modal-header h2 { font-size: 25px; }
}
@media (max-width: 360px) {
  .experience { padding-inline: 16px; }
  .welcome p { font-size: 21px; }
  .nav-copy strong { --label-base: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}