/* облик: бруталистичный минимализм - сетка ячеек, тонкие рамки, гротеск, монохром и один акцент.
   направление «ночь» (выбор 06.11) */
:root {
  color-scheme: dark;
  --bg: #0e0e0d;
  --ink: #e8e8e2;
  --soft: #8d8d86;
  --accent: #c4e59c;
  --line: 1px solid var(--ink);
  /* roboto flex: узкая ширина и кириллица в одном файле (у archivo кириллицы нет) */
  --grotesk: "Roboto Flex", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--grotesk);
}

[hidden] { display: none !important; }

.screen {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 16px;
  border-bottom: var(--line);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* телефон: четыре плитки столбиком в высоту окна - заголовок во всю ширину крупнее,
   чем в половине экрана. с 720px - сетка 2×2 */
.grid {
  --cols: 1;
  display: grid;
  /* minmax(0, …): иначе длинное слово распирает колонку за край экрана */
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  min-height: 0;
}
@media (min-width: 720px) {
  .grid { --cols: 2; }
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: 16px;
  min-height: 0;
  border: 0;
  border-bottom: var(--line);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.tile:last-child { border-bottom: 0; }
@media (min-width: 720px) {
  .tile:nth-child(odd) { border-right: var(--line); }
  .tile:nth-child(n + 3) { border-bottom: 0; }
}

.tile:active,
.tile:focus-visible {
  background: var(--ink);
  color: var(--bg);
  outline: none;
}

.tile h2 {
  margin: 0;
  /* «примерочная» на ширине 25% = 5.2em на 96px и 6.3em на 58px (оптический размер, замер 06.11):
     кегль от ширины ячейки, чтобы самое длинное слово влезало целиком */
  font-size: min(calc((100vw / var(--cols) - 32px) / 6.6), 96px);
  font-stretch: 25%;
  font-weight: 900;
  line-height: 0.92;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.tile p {
  margin: 0;
  color: var(--soft);
  font-size: 13px;
  line-height: 1.3;
}
.tile:active p, .tile:focus-visible p { color: inherit; }

.no, .go, .tag {
  position: absolute;
  top: 14px;
  font-family: var(--mono);
  font-size: 12px;
}
.no { left: 16px; }
.go { right: 16px; color: var(--accent); font-size: 16px; }
.tag {
  right: 16px;
  padding: 2px 6px;
  border: 1px solid var(--accent);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.soon h2 { color: var(--soft); }
.soon:active h2, .soon:focus-visible h2 { color: inherit; }

.gate {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  padding: 24px 16px;
}
.gate p {
  margin: 0;
  font-size: clamp(28px, 9vw, 48px);
  font-stretch: 25%;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}