/* ============================================================
   Аскетичный тёмный лендинг.
   Файл отдаётся браузеру напрямую, Gleam его не трогает.
   Путь наружу: /static/app.css  (см. wisp.serve_static в router.gleam)
   ============================================================ */

/* ============================================================
   Шрифт названия: Playfair Display 700.
   Файл лежит рядом, в priv/static/fonts — не у Google. Так сайт
   не зависит от чужого сервера и не сообщает ему, кто к нам зашёл.
   Скачан только латинский набор символов: 23 КБ вместо ~90 КБ полного.
   ============================================================ */
@font-face {
  font-family: "Playfair Display";
  src: url("/static/fonts/playfair-display-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  /* swap: пока шрифт грузится, показать текст запасным шрифтом
     и подменить, когда придёт. Иначе название секунду не видно вообще. */
  font-display: swap;
}

/* Переменные — чтобы цвет правился в одном месте, а не по всему файлу.
   --bg взят пипеткой из угла фотографии: srgb(4,4,4) = #040404.
   Именно поэтому картинка умеет растворяться в фоне без видимого шва. */
:root {
  --bg:      #040404;
  --fg:      #d6d2cb;  /* основной текст */
  --muted:   #918c84;  /* подписи и ссылки в покое */
  --faint:   #35322f;  /* почти невидимое: кнопка enter */
  --accent:  #ffffff;  /* белый: название сайта и наведение */
}

/* Сброс отступов браузера.
   box-sizing: border-box — чтобы padding не раздувал ширину элементов. */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.6;

  /* Раскладка на всю высоту экрана: контент по центру, футер прижат вниз. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  -webkit-font-smoothing: antialiased;
}

/* ---------- Ссылки: «просто гиперссылки, без выкрутасов» ---------- */
a {
  color: var(--muted);
  text-decoration: none;              /* подчёркивание только при наведении */
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
a:hover {
  color: var(--accent);
  border-bottom-color: var(--muted);
}
a.active { color: var(--accent); }    /* открытый сейчас раздел */

/* ---------- Меню: наверху справа ---------- */
.menu {
  display: flex;
  gap: 20px;
  justify-content: flex-end;
  padding: 24px 32px;
}

/* ---------- Центр страницы ---------- */
main {
  flex: 1;                            /* забрать место между меню и футером */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 24px 60px;
  text-align: center;
}

/* ---------- Аватар: круг с растворяющимся краем ---------- */
/*
   Прошлая версия задавала форму через mask-image (трафарет по прозрачности).
   Способ изящный, но браузер его не применил — и остался голый квадрат.
   Урок общий: форму нельзя доверять свойству, которое может не сработать.

   Текущая схема надёжна и работает везде:

     .avatar        — обёртка. Круг задаёт border-radius: 50%,
                      а overflow: hidden обрезает картинку по этому кругу.
     .avatar img    — сама фотография, заполняет обёртку целиком.
     .avatar::after — прозрачный слой поверх картинки, того же размера.
                      На нём внутренняя тень цвета фона: она наползает
                      с краёв внутрь и мягко гасит границу круга.

   box-shadow: inset 0 0 34px 16px var(--bg) читается так:
     inset — тень внутрь, а не наружу;
     0 0   — без смещения, равномерно по всему кругу;
     34px  — размытие: чем больше, тем мягче переход;
     16px  — насколько тень наползает внутрь от края.

   Нужно резче — уменьшай 34px и 16px. Мягче — увеличивай.
*/
.avatar {
  width: 240px;                       /* ретушь узкая — гнаться за размером не нужно */
  height: 240px;
  border-radius: 50%;                 /* собственно круг */
  overflow: hidden;                   /* обрезать картинку по кругу */
  position: relative;                 /* точка отсчёта для ::after */
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;                  /* заполнить круг, не искажая пропорции */
  object-position: 50% 44%;           /* кадр чуть выше центра: там лицо */
  display: block;
}

.avatar::after {
  content: "";                        /* обязателен, иначе слой не появится */
  position: absolute;
  inset: 0;                           /* растянуть на всю обёртку */
  border-radius: 70%;
  /* Гасим только тонкую светлую дугу у самой кромки — там, где круг
     срезает освещённый край шлема. Глубоко затемнять картинку не нужно:
     ретушь работает узкой полосой вдоль границы.

     Две тени с маленьким размытием и маленьким разбросом:
     первая убирает саму линию, вторая смягчает стык, чтобы на её месте
     не возникла новая граница. Дальше 20px от края фото не тронуто. */
  box-shadow:
    inset 0 0  15px  3px var(--bg),
    inset 0 0 34px 3px var(--bg);
  pointer-events: none;               /* слой не перехватывает мышь */
}

/* ---------- Название сайта ---------- */
.name {
  margin-top: 20px;
  /* Georgia — запасной вариант: тоже антиква и стоит в любой системе,
     поэтому подмена шрифта после загрузки почти не заметна глазу. */
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: 60px;                    /* втрое крупнее прежних 20px */
  font-weight: 700;
  text-transform: uppercase;          /* капслок делаем стилем, а не текстом:
                                         в HTML остаётся обычное «askin.su»,
                                         его правильно прочитают поисковики
                                         и программы чтения с экрана */
  letter-spacing: .04em;
  line-height: 1.1;
  color: var(--accent);
}

/* ---------- Раскрывающийся блок под названием ---------- */
/*
   width: max-content — блок ужимается по самой широкой строке внутри.
   Дальше main центрирует его целиком, а строки внутри стоят
   по левому краю и ровно друг под другом.

   Без этого каждая строка центрировалась бы сама по себе, и левые
   края «плавали» бы: строка с длинным адресом шире строки с коротким.

   min-height резервирует место заранее, чтобы страница не прыгала,
   когда блок появляется и исчезает.
*/
.details {
  margin-top: 26px;
  min-height: 90px;
  width: max-content;
  max-width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* Строка: подпись | значение.
   Фиксированная первая колонка держит значения на одной вертикали. */
.row {
  display: grid;
  grid-template-columns: 76px auto;
  gap: 16px;
}
.row .label { color: var(--muted); }  /* подписи теперь читаемые, а не еле видные */
.row a      { color: var(--fg); }     /* значения ярче подписей */
.row a:hover { color: var(--accent); }

/* ---------- Футер: неприметный enter внизу справа ---------- */
footer {
  display: flex;
  justify-content: flex-end;
  padding: 24px 32px;
}
footer a {
  color: var(--faint);                /* почти сливается с фоном */
  font-size: 12px;
  letter-spacing: .12em;
}
footer a:hover { color: var(--muted); border-bottom-color: var(--faint); }

/* ---------- Мелкие экраны ---------- */
@media (max-width: 480px) {
  .avatar { width: 190px; height: 190px; }
  .name   { font-size: 38px; }
  .menu, footer { padding: 18px 20px; }
}