/* MrTrickster.ru. Цвета заливки — из media/fill.json (снято с края фото). */

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(/fonts/JetBrainsMono-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(/fonts/JetBrainsMono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --t1: #141414;
  --t2: #2e2c29;
  --t3: #302e2a;
  --fill-top: #a29f9e;
  --fill-mid: #afadad;
  --fill-bottom: #aaa8aa;
  --line: rgba(20, 20, 20, .16);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  position: relative;
  margin: 0;
  min-height: 100svh;
  background-color: var(--fill-mid);
  background-image: linear-gradient(180deg, var(--fill-top) 0%, var(--fill-mid) 50%, var(--fill-bottom) 100%);
  color: var(--t1);
  font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.6;
  overflow-x: hidden;
}

/* Компьютер: фото справа во всю высоту страницы, у правого края экрана;
   левый край растворяется в заливке. */
.photo {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  pointer-events: none;
}
.photo img {
  display: block;
  height: 100%;
  width: auto;
  /* Фото тянется по высоте страницы и без ограничения уезжает под текст (длинный
     список на 1024 px) — держим его в правых 40% экрана, лишнее режем по бокам. */
  max-width: 40vw;
  object-fit: cover;
  object-position: 40% top;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
}

main {
  position: relative;
  max-width: min(62vw, 120ch);
  padding: 56px 0 56px 56px;
}

h1 { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.3; }
h1 span { color: var(--t3); }
.handle { margin: 2px 0 0; color: var(--t3); font-size: 12px; }
.about { margin: 16px 0 0; color: var(--t2); }

h2 {
  margin: 40px 0 8px;
  color: var(--t3);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}

ul { margin: 0; padding: 0; list-style: none; }
li {
  display: grid;
  grid-template-columns: 20ch 1fr auto;
  gap: 4px 16px;
  padding: 7px 0;
  border-top: 1px solid var(--line);
}
li b { font-weight: 500; }
li a { justify-self: start; align-self: start; }
li span { color: var(--t2); }
time { color: var(--t3); white-space: nowrap; text-align: right; }

footer { margin-top: 40px; color: var(--t2); }
a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); }
a:hover, a:focus-visible { border-bottom-color: currentColor; }
a:focus-visible { outline: 2px solid var(--t1); outline-offset: 2px; }

.nf .photo { display: none; }

/* Телефон и любой портретный экран: фото сверху во всю ширину, под ним сплошная заливка,
   переход резкий. На портретном экране ≥ 960 px раскладка компьютера сажала текст на лицо. */
@media (max-width: 959px), (max-aspect-ratio: 1/1) {
  body {
    background-image: none;
    background-color: var(--fill-bottom);
    font-size: 13px;
  }
  .photo { position: static; display: block; }
  .photo img {
    width: 100%;
    height: auto;
    /* На широком портрете кадр иначе выше экрана — режем низ (свитшот), лицо остаётся. */
    max-height: 75svh;
    object-fit: cover;
    object-position: 50% 15%;
    -webkit-mask-image: none;
    mask-image: none;
  }
  main { max-width: 64ch; padding: 24px 16px 40px; }
  li { grid-template-columns: 1fr auto; }
  li span { grid-column: 1 / -1; grid-row: 2; }
}