/* ============ Reset ============ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; background: var(--edge); }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

body {
  min-height: 100vh;
  background: var(--edge);
  color: var(--fg);
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(14px, .95vw, 16px); line-height: 1.5;
  padding: var(--frame);
  overflow-x: hidden;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
/* Весь сайт — лист, лежащий на подложке. */
.sheet {
  background: var(--bg);
  transition: background var(--dur) var(--ease);
}

/* ============ Раскладка ============ */
.w { width: 100%; padding-inline: var(--gutter); }
section { padding-block: clamp(44px, 7vw, 108px); }

/* ============ Метки в скобках ============ */
.tag {
  font-family: var(--mono); font-size: 10.5px; font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase; color: var(--fg-soft);
}
.tag::before { content: '[ '; }
.tag::after  { content: ' ]'; }
.tag--red { color: var(--red-on-bg); }
a.tag { transition: color .25s var(--ease); }
a.tag:hover { color: var(--red-on-bg); }

/* ============ Служебные строки ============ */
.rail {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  flex-wrap: wrap; padding: 12px var(--gutter); border-bottom: 1px solid var(--rule);
}
.rail--bottom { border-bottom: 0; border-top: 1px solid var(--rule); }
.rail--flush { padding-inline: 0; }

/* ============ Доступность ============ */
:focus-visible { outline: 2px solid var(--red-on-bg); outline-offset: 3px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
a.sr-only:focus-visible {
  width: auto; height: auto; clip: auto; overflow: visible;
  top: 10px; left: 10px; z-index: 300; padding: 10px 14px;
  background: var(--bg); border: 1px solid var(--red-on-bg);
  font-family: var(--mono); font-size: 12px;
}