@font-face {
  font-family: 'Forum';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/forum-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Forum';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/forum-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Forum';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/forum-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Forum';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/forum-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/jost-300-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/jost-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/jost-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jost-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jost-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jost-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jost-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jost-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jost-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --night: #0F1626; --night-2: #141D31; --line: #2A3550; --champagne: #E3CFA8;
  --glow: #FFE2A8; --text: #EDE6DA; --muted: #9AA3BA; --gold-soft: #B9A27A;
  --display: 'Forum', Georgia, serif; --sans: 'Jost', system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--night); color: var(--text); font: 300 16px/1.65 var(--sans); }
a { color: var(--champagne); }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.2; }

.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; max-width: 1120px; margin: 0 auto; padding: 16px; }
.mark { font-family: var(--display); font-size: 20px; letter-spacing: 4px; color: var(--champagne); text-decoration: none; }
.links { display: flex; gap: 18px; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; }
.links a { color: var(--muted); text-decoration: none; transition: color .3s ease; }
.links a:hover, .links a[aria-current] { color: var(--champagne); }

.stage { min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px 16px 26px; border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 12% 22%, var(--glow) 0 1.5px, transparent 3px), radial-gradient(circle at 28% 34%, var(--glow) 0 1.5px, transparent 3px),
    radial-gradient(circle at 44% 26%, var(--glow) 0 1.5px, transparent 3px), radial-gradient(circle at 60% 36%, var(--glow) 0 1.5px, transparent 3px),
    radial-gradient(circle at 76% 24%, var(--glow) 0 1.5px, transparent 3px), radial-gradient(circle at 90% 34%, var(--glow) 0 1.5px, transparent 3px),
    radial-gradient(ellipse at 50% 120%, rgba(227,207,168,.25), transparent 60%), var(--night); }
.stage h1 { margin: 0; font-size: 32px; max-width: 1120px; }
.stage p { margin: 8px 0 0; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold-soft); }

.goods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; max-width: 1120px; margin: 0 auto; padding: 24px 16px 8px; }
.good { display: flex; flex-direction: column; }
.good img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid var(--line); background: var(--night-2); transition: border-color .3s ease; }
.good:hover img { border-color: var(--champagne); }
.good h3 { margin: 10px 0 2px; font-size: 16px; }
.spec { margin: 0; font-size: 13px; color: var(--muted); }
.cost { margin: 6px 0 10px; font-size: 18px; font-weight: 400; color: var(--champagne); }
.good .frame { margin-top: auto; }
.fine { text-align: center; font-size: 13px; color: var(--muted); margin: 8px 16px 0; }

.frame { display: inline-block; text-align: center; border: 1px solid var(--champagne); background: transparent; color: var(--champagne); padding: 10px 16px; font: 400 12px var(--sans); letter-spacing: 2px; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .3s ease, color .3s ease; }
.frame:hover { background: var(--champagne); color: var(--night); }
.frame:disabled { opacity: .6; }
.pair { display: flex; gap: 12px; }
.pair .frame { flex: 1; }

.talk { max-width: 720px; margin: 32px auto; padding: 22px 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.talk h2 { margin: 0 0 4px; font-size: 24px; color: var(--champagne); }
.talk p { margin: 0 0 14px; }

.page { max-width: 720px; margin: 0 auto; padding: 16px 16px 24px; }
.page h1 { font-size: 32px; color: var(--champagne); }
.page h2 { font-size: 22px; color: var(--champagne); margin-top: 28px; }
.tel { font-size: 26px; }
.seller { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; border: 1px solid var(--line); padding: 16px; }
.seller dt { color: var(--muted); } .seller dd { margin: 0; }

.base { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; padding: 28px 16px 36px; margin-top: 24px; border-top: 1px solid var(--line); font-size: 13px; }
.base a { color: var(--muted); text-decoration: none; }

.buy { border: 1px solid var(--line); padding: 0; width: 100%; max-width: 460px; margin: auto auto 0; background: var(--night-2); color: var(--text); }
.buy::backdrop { background: rgba(15,22,38,.75); }
.buy[open] { animation: lift .3s ease; }
@keyframes lift { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.buy-form { display: flex; flex-direction: column; gap: 12px; padding: 22px 18px 28px; position: relative; }
.eyebrow { margin: 0; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold-soft); }
.buy-title { margin: 0; font-size: 20px; color: var(--champagne); }
.buy-close { position: absolute; top: 12px; right: 12px; border: 0; background: none; color: var(--muted); font-size: 18px; cursor: pointer; }
.buy-form label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.buy-form input { font: inherit; color: var(--text); padding: 12px; border: 1px solid var(--line); background: var(--night); }
.buy-form input:focus { outline: 1px solid var(--champagne); }
.buy-note { margin: 0; min-height: 1.3em; font-size: 14px; color: var(--champagne); }
.hush { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

@media (min-width: 760px) {
  .stage { min-height: 380px; padding: 40px max(16px, calc((100% - 1088px) / 2)); }
  .stage h1 { font-size: 46px; }
  .goods { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
  .buy { margin: auto; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }