@font-face {
  font-family: 'TT Norms';
  src: url('/assets/tt-norms-regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

:root {
  color: #282828;
  background: #fff;
  font-family: 'TT Norms', Arial, sans-serif;
  line-height: 1.5;
  --border: #d9dbd4;
  --muted: #5b5c56;
}

*, *::before, *::after { box-sizing: border-box; }
body, h1, p { margin: 0; }
a { color: inherit; text-underline-offset: 4px; }
:focus-visible { outline: 2px solid #536c52; outline-offset: 4px; }
.wrap { width: min(1344px, 100% - clamp(24px, 8vw, 112px)); margin-inline: auto; }
.header { border-bottom: 1px solid var(--border); }
.header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; padding-block: 8px; }
.logo { display: inline-flex; flex-shrink: 0; align-items: center; min-height: 44px; }
.logo img { display: block; width: clamp(104px, 15vw, 140px); height: auto; }
.header nav { display: flex; align-items: center; gap: 16px; }
.header nav a { display: inline-flex; align-items: center; min-height: 44px; }
.catalog-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 24px; margin: clamp(24px, 4vw, 54px) 0 20px; }
h1 { font-size: clamp(32px, 5vw, 64px); letter-spacing: -.04em; line-height: 1.08; font-weight: 400; overflow-wrap: anywhere; }
.catalog-heading a, .muted { color: var(--muted); }
.catalog-frame { display: block; width: 100%; min-height: 360px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 24px; }
.account { width: min(460px, 100% - 32px); margin: clamp(32px, 8vw, 96px) auto; }
.account h1 { font-size: clamp(30px, 6vw, 44px); margin-bottom: 20px; }
.account p, .account > a { display: block; margin-bottom: 16px; }
.account form { display: grid; gap: 16px; margin-block: 16px; }
.account label { display: grid; gap: 6px; }
.account input { font: inherit; min-height: 46px; width: 100%; padding: 8px 12px; background: #fff; color: inherit; border: 1px solid #888; border-radius: 5px; }
.account button { justify-self: start; font: inherit; min-height: 44px; padding: 8px 20px; color: #fff; background: #282828; border: 1px solid transparent; border-radius: 5px; cursor: pointer; }
.account button:hover { background: #42443e; }
.error { padding: 10px 12px; border-radius: 5px; background: #fff1ed; color: #8c2219; }