/* Fonts live next to the page: the CSP (default-src 'self') keeps Google Fonts out.
   Same files as the news pages of newsbot. */
@font-face { font-family: "Literata"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/literata-cyrillic-400-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Literata"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/literata-latin-400-normal.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; }
@font-face { font-family: "Literata"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/literata-cyrillic-600-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Literata"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/literata-latin-600-normal.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; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/unbounded-cyrillic-500-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/unbounded-latin-500-normal.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; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/unbounded-cyrillic-700-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/unbounded-latin-700-normal.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 {
  --glow: #5fe6ff;
  --text: #e6f4f8;
  --muted: #9fc7d2;
  --panel: rgba(14, 40, 52, .72);
  --edge: rgba(95, 230, 255, .28);
  --new: #f06292;
  --up: #3fc9a6;
  --track: rgba(95, 230, 255, .14);
  --head: "Unbounded", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  font: 16px/1.5 "Literata", Georgia, serif;
  color: var(--text);
  background: #06121a;
}
/* A fixed layer, not background-attachment: fixed, so phones do not repaint it on scroll. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(1200px 700px at 15% -10%, #0f3a4a 0%, transparent 60%),
    radial-gradient(900px 600px at 100% 100%, #0b2a3a 0%, transparent 60%);
}
main { max-width: 1360px; margin: 0 auto; padding: 56px 16px 64px; }
header {
  margin-bottom: 32px;
  display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: flex-end; justify-content: space-between;
}
/* Contact buttons sit in one row: Telegram and mail. */
.contact { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.contact .btn { margin-top: 0; }
button.btn { font: inherit; background: transparent; cursor: pointer; }
.mail-address { font-size: 15px; color: var(--text); user-select: all; }
.handle { font-size: 14px; color: var(--muted); }
.contact .contact-help { flex-basis: 100%; margin: 0; font-size: 14px; color: var(--muted); }
.contact-help a { color: var(--glow); }
.handle b { color: var(--text); font-weight: 600; }
h1 { margin: 0; font: 500 clamp(30px, 5vw, 46px)/1.1 var(--head); }
header p { margin: 8px 0 0; font-size: 17px; color: var(--muted); }

/* Four project cards two by two, the news column on the right; one column on a phone. */
.layout { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: start; }
.grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1180px) {
  .layout { grid-template-columns: minmax(0, 2fr) minmax(340px, 1fr); }
}
/* Pinned only where the whole column fits on screen: on a low laptop its bottom would hide. */
@media (min-width: 1180px) and (min-height: 800px) {
  aside.news { position: sticky; top: 24px; }
}

.panel, .news {
  position: relative; padding: 22px 22px 20px;
  background: var(--panel);
  border: 1px solid var(--edge); border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .2), 0 12px 32px rgba(0, 0, 0, .35);
}
.ring { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; }
.tag { font: 500 11px/1 var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--glow); }
h2 { margin: 10px 60px 8px 0; font: 500 20px/1.25 var(--head); }
.panel p, .news p { margin: 0 0 10px; color: var(--muted); }
ul { margin: 0 0 14px; padding-left: 18px; }
li { margin: 3px 0; }
li::marker { color: var(--glow); }
.media {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border: 1px solid rgba(95, 230, 255, .25); border-radius: 6px; background: #031018;
}
.btn {
  display: inline-block; margin-top: 12px; padding: 8px 16px;
  color: var(--text); text-decoration: none;
  border: 1px solid var(--glow); border-radius: 6px;
}
.btn:hover, .btn:focus-visible { background: rgba(95, 230, 255, .15); }

/* News column: news.js fills .week from /news/latest.json; without it only the description shows. */
.news {
  padding: 28px 28px 24px;
  border-color: rgba(95, 230, 255, .6); box-shadow: 0 0 28px rgba(95, 230, 255, .18);
}
.news h2 { margin-right: 0; font-size: 22px; }
.label { margin: 26px 0 8px; font: 500 12px var(--head); color: var(--muted); }
.date { font: 700 clamp(34px, 3.4vw, 44px)/1.05 var(--head); letter-spacing: -.02em; }
.news dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; margin: 20px 0 0; }
.news dt { font-weight: 600; }
.news dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.news .new { color: var(--new); }
.news .up { color: var(--up); }
.bars { list-style: none; padding: 0; margin: 6px 0 20px; }
.bars li { display: grid; grid-template-columns: minmax(92px, auto) 1fr minmax(32px, auto); gap: 10px; align-items: center; margin: 8px 0; font-size: 15px; }
.bars i { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--glow) var(--w, 0%), var(--track) var(--w, 0%)); }
.bars span { max-width: 14em; overflow-wrap: anywhere; }
.bars b { text-align: right; font: 500 13px var(--head); }
.news .foot { font-size: 14px; }
.news .foot a { color: var(--glow); }

/* Clips: one wide card on the main page with the clip frames, the clips themselves on clips/. */
@media (min-width: 760px) { .panel.wide { grid-column: 1 / -1; } }
.thumbs { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin: 14px 0 0; }
.thumbs a { color: var(--muted); text-decoration: none; font-size: 14px; }
.thumbs img {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 6px;
  border: 1px solid rgba(95, 230, 255, .25); border-radius: 6px; background: #031018;
}
.thumbs a:hover img, .thumbs a:focus-visible img { border-color: var(--glow); }
.back { display: inline-block; margin-bottom: 14px; color: var(--glow); text-decoration: none; font-size: 15px; }
@media (min-width: 1180px) { .grid.clips { grid-template-columns: repeat(3, 1fr); } }