/* Визитка akkzv.com. Цвета, шрифт и движение - только роли из /brand/tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--akk-bg);
  color: var(--akk-fg);
  font-family: var(--akk-font);
  font-weight: var(--akk-weight-text);
  font-size: var(--akk-size-text);
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--akk-theme-fade) ease, color var(--akk-theme-fade) ease;
}

.page {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overflow: hidden;
}

.top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--akk-space-3);
  padding: var(--akk-space-4) max(var(--akk-space-4), env(safe-area-inset-left, 0px));
  font-size: var(--akk-size-small);
  position: relative;
  z-index: 2;
}
.links { display: flex; flex-direction: column; gap: var(--akk-space-2); }
.links a {
  display: inline-flex;
  align-items: center;
  gap: var(--akk-space-2);
  color: var(--akk-fg-soft);
  text-decoration: none;
  transition: color 0.2s ease;
}
.links a:hover { color: var(--akk-fg); }
.links svg {
  width: 15px; height: 15px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round;
}
.theme {
  font: inherit;
  width: 28px; height: 28px; padding: 0; line-height: 1;
  background: none;
  color: var(--akk-fg-soft);
  border: 1px solid currentColor;
  border-radius: 999px;
  cursor: pointer;
}
.theme:hover { color: var(--akk-fg); }
a:focus-visible, button:focus-visible, .stage:focus-visible { outline: 2px solid var(--akk-fg); outline-offset: 3px; }

.stage {
  position: relative;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  z-index: 1;
}
.stage.dragging { cursor: grabbing; }
.slot {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 max(var(--akk-space-3), 8%);
  pointer-events: none;
  will-change: transform, opacity, filter;
}
.slot p {
  margin: 0;
  font-size: var(--akk-size-phrase);
  font-weight: var(--akk-weight-accent);
  line-height: var(--akk-leading-phrase);
  letter-spacing: var(--akk-tracking-phrase);
  text-align: center;
  max-width: 22ch;
  text-wrap: balance;
}
.bottom { height: 72px; }

/* зерно печати поверх листа */
.grain::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.09;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .grain::before { mix-blend-mode: screen; opacity: 0.06; filter: invert(1); }
}
:root[data-theme="dark"] .grain::before { mix-blend-mode: screen; opacity: 0.06; filter: invert(1); }

@media (prefers-reduced-motion: reduce) {
  body, .links a { transition: none; }
}