/* shanaty.ru — shared by the front page and the portfolio. Same viewport palette and theme switch as /resume/ (the "theme" key is shared),
   with a Cyrillic-capable pair: Unbounded for headings, Onest for text. */

@font-face { font-family: 'Unbounded'; font-weight: 200 900; font-display: swap; src: url(/assets/fonts/unbounded-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; }
@font-face { font-family: 'Unbounded'; font-weight: 200 900; font-display: swap; src: url(/assets/fonts/unbounded-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/onest-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; }
@font-face { font-family: 'Onest'; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/onest-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

:root {
  color-scheme: light;
  --paper: #f4f6f8;
  --ink: #15181d;
  --muted: #5b6571;
  --x: #e0384b;
  --y: #5aa300;
  --z: #2c63e0;
  --z-text: #2455c9;

  --plate-a: #f3f5f8;
  --plate-b: #e6e9ed;
  --plate-c: #d3d9e0;
  --pill-bg: rgba(255, 255, 255, 0.72);
  --topbar-bg: rgba(244, 246, 248, 0.86);
  --dot-glow: rgba(90, 163, 0, 0.2);

  --cube-top: #f9fafb;
  --cube-left: #d6dbe2;
  --cube-right: #b8c0cb;
  --cube-dark: #4a5563;
  --cube-edge: rgba(21, 24, 29, 0.16);
  --floor-top: #e3e7ec;
  --floor-side-l: #c5ccd6;
  --floor-side-r: #aeb6c2;
  --floor-line: rgba(21, 24, 29, 0.13);
  --shadow: rgba(21, 24, 29, 0.22);

  --band-bg: #15181d;
  --band-ink: #f4f6f8;

  --line: color-mix(in srgb, var(--ink) 14%, transparent);
  --ring: color-mix(in srgb, var(--ink) 9%, transparent);
  --chip: color-mix(in srgb, var(--ink) 7%, transparent);
  --ink-2: color-mix(in srgb, var(--ink) 86%, transparent);
  --ink-line: color-mix(in srgb, var(--ink) 32%, transparent);
  --band-2: color-mix(in srgb, var(--band-ink) 70%, transparent);
  --band-3: color-mix(in srgb, var(--band-ink) 58%, transparent);
  --band-line: color-mix(in srgb, var(--band-ink) 22%, transparent);
  --band-underline: color-mix(in srgb, var(--band-ink) 38%, transparent);

  --radius-plate: 18px;
  --radius-control: 10px;
  --shell: min(1240px, calc(100% - 48px));
  --section: clamp(84px, 11vw, 148px);
  --head: 'Unbounded', 'Segoe UI', system-ui, sans-serif;
  --body: 'Onest', 'Segoe UI', system-ui, sans-serif;
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --paper: #1c2026;
  --ink: #e9edf2;
  --muted: #9aa5b1;
  --x: #ff5a6e;
  --y: #86d62c;
  --z: #5b8dff;
  --z-text: #8db0ff;

  --plate-a: #363c46;
  --plate-b: #2a2f37;
  --plate-c: #1f2329;
  --pill-bg: rgba(255, 255, 255, 0.07);
  --topbar-bg: rgba(28, 32, 38, 0.86);
  --dot-glow: rgba(134, 214, 44, 0.24);

  --cube-top: #e9edf2;
  --cube-left: #9aa5b3;
  --cube-right: #69737f;
  --cube-dark: #232830;
  --cube-edge: rgba(0, 0, 0, 0.4);
  --floor-top: #262b33;
  --floor-side-l: #171a1f;
  --floor-side-r: #101216;
  --floor-line: rgba(255, 255, 255, 0.12);
  --shadow: rgba(0, 0, 0, 0.5);

  /* The closing band: on a dark page it is a darker slab, not a light one (a light band dazzles at night). */
  --band-bg: #101317;
  --band-ink: #e9edf2;
}

* { box-sizing: border-box; }
html { background: var(--paper); scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; color: var(--ink); font: 400 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--z); color: #fff; }
:focus-visible { outline: 3px solid var(--z); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }

/* Bilingual text: both languages are in the markup, the html[data-lang] attribute picks one. */
html[data-lang='ru'] [data-en],
html[data-lang='en'] [data-ru] { display: none !important; }

.shell { width: var(--shell); margin: 0 auto; }

/* ---------- top bar ---------- */
.bar { position: fixed; z-index: 50; inset: 0 0 auto 0; border-bottom: 1px solid transparent; transition: background-color 0.25s, border-color 0.25s; }
.bar.solid { background: var(--topbar-bg); border-bottom-color: var(--line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.bar-inner { width: var(--shell); height: 68px; margin: 0 auto; display: flex; align-items: center; gap: 14px; }
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; text-decoration: none; font: 700 18px/1 var(--head); letter-spacing: -0.03em; }
.nav { display: flex; gap: 28px; margin-right: 10px; font-size: 15px; font-weight: 500; }
.nav a { padding: 6px 0; text-decoration: none; background: linear-gradient(currentColor, currentColor) left bottom / 0 1.5px no-repeat; transition: background-size 0.25s; }
.nav a:hover { background-size: 100% 1.5px; }

.seg { display: flex; padding: 3px; border-radius: var(--radius-control); box-shadow: inset 0 0 0 1px var(--line); }
.seg button { padding: 6px 10px; border: 0; border-radius: 7px; background: transparent; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; color: var(--muted); }
.seg button[aria-pressed='true'] { background: var(--ink); color: var(--paper); }

.toggle { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--radius-control); background: transparent; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: box-shadow 0.2s; }
.toggle:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav a[aria-current='page'] { font-weight: 700; background-size: 100% 2px; }

/* ---------- buttons, section headings, callout ---------- */
.button { padding: 14px 26px; border-radius: var(--radius-control); font: 600 16px/1.2 var(--body); text-decoration: none; transition: background-color 0.2s, color 0.2s; }
.primary { background: var(--ink); color: var(--paper); }
.primary:hover { background: var(--z); color: #fff; }
.secondary { box-shadow: inset 0 0 0 1.5px var(--ink); }
.secondary:hover { background: var(--ink); color: var(--paper); }

@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.section { padding: var(--section) 0 0; }
.section h2, .contact h2 { font: 700 clamp(28px, 4.2vw, 60px) / 1.05 var(--head); letter-spacing: -0.045em; }
.head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; }
.more { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; text-decoration-color: var(--ink-line); transition: color 0.2s, text-decoration-color 0.2s; }
.more:hover { color: var(--z-text); text-decoration-color: currentColor; }

/* A wide block that closes a list and points on (used after projects and at the end of the portfolio). */
.callout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; margin-top: clamp(56px, 7vw, 104px); padding: clamp(28px, 4vw, 52px) 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); text-decoration: none; }
.callout > span:first-child { display: flex; flex-direction: column; gap: 10px; }
.callout-title { font: 700 clamp(22px, 3vw, 40px) / 1.1 var(--head); letter-spacing: -0.045em; }
.callout-text { max-width: 52ch; color: var(--muted); }
.callout-button { flex: none; padding: 16px 28px; border-radius: var(--radius-control); background: var(--ink); color: var(--paper); font: 600 17px/1.2 var(--body); transition: background-color 0.2s, color 0.2s; }
.callout:hover .callout-button { background: var(--z); color: #fff; }

/* Project plate: a demo image or a generated voxel cover on a studio backdrop. */
.plate { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius-plate); background: radial-gradient(120% 90% at 50% 0%, var(--plate-a) 0%, var(--plate-b) 55%, var(--plate-c) 100%); box-shadow: inset 0 0 0 1px var(--ring); }
.plate img, .plate svg { display: block; width: 100%; height: 100%; }
.plate img { object-fit: cover; }
.plate img.fit { object-fit: contain; padding: 6%; filter: drop-shadow(0 10px 24px var(--shadow)); }

/* ---------- contact band ---------- */
.contact { margin-top: var(--section); padding: clamp(72px, 9vw, 128px) 0 40px; background: var(--band-bg); color: var(--band-ink); }
.contact-lead { margin-top: 16px; color: var(--band-2); }
.mail { display: inline-block; margin-top: clamp(28px, 4vw, 48px); font: 700 clamp(17px, 5vw, 76px) / 1.08 var(--head); letter-spacing: -0.05em; overflow-wrap: anywhere; text-decoration: none; background: linear-gradient(var(--z), var(--z)) left bottom / 100% 0.08em no-repeat; transition: background-size 0.25s, color 0.25s; }
.mail:hover { background-size: 100% 100%; color: #fff; }
.contacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 32px; margin-top: clamp(48px, 6vw, 88px); }
.contacts li { display: flex; flex-direction: column; gap: 2px; padding: 18px 0; border-top: 1px solid var(--band-line); }
.contacts span { font-size: 14px; color: var(--band-3); }
.contacts a { overflow-wrap: anywhere; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--band-underline); }
.contacts a:hover { text-decoration-color: currentColor; }
.legal { max-width: 70ch; margin-top: clamp(44px, 6vw, 72px); font-size: 14px; color: var(--band-3); }


/* Voxel colours: neutral, dark and the three axis colours. Faces are shaded from the theme's own values. */
.c-n .top { fill: var(--cube-top); }
.c-n .left { fill: var(--cube-left); }
.c-n .right { fill: var(--cube-right); }
.c-d .top { fill: color-mix(in srgb, var(--cube-dark) 82%, white); }
.c-d .left { fill: var(--cube-dark); }
.c-d .right { fill: color-mix(in srgb, var(--cube-dark) 78%, black); }
.c-x .top { fill: color-mix(in srgb, var(--x) 76%, white); }
.c-x .left { fill: var(--x); }
.c-x .right { fill: color-mix(in srgb, var(--x) 74%, black); }
.c-y .top { fill: color-mix(in srgb, var(--y) 76%, white); }
.c-y .left { fill: var(--y); }
.c-y .right { fill: color-mix(in srgb, var(--y) 74%, black); }
.c-z .top { fill: color-mix(in srgb, var(--z) 76%, white); }
.c-z .left { fill: var(--z); }
.c-z .right { fill: color-mix(in srgb, var(--z) 74%, black); }
.vx polygon { stroke: var(--cube-edge); stroke-width: 0.75; stroke-linejoin: round; }

@media (max-width: 860px) { .nav { display: none; } }
@media (max-width: 640px) { .legal { padding-right: 12px; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- page header, floor band and notices (portfolio, devlog) ---------- */
.phead { position: relative; padding: 112px 0 0; }
.phead h1 { font: 700 clamp(44px, 9.5vw, 148px) / 0.95 var(--head); letter-spacing: -0.055em; overflow-wrap: break-word; animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.phead .lead { max-width: 62ch; margin-top: 28px; font-size: 19px; line-height: 1.6; color: var(--ink-2); animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s both; }
.count { margin-left: 0.3em; color: var(--muted); }
/* The viewport floor under the heading, with the red X and blue Z axes (the same motif as the resume's hero). */
.floorband { --fb-a: #d8dde4; --fb-b: #cdd3db; --fb-grid: rgba(21, 24, 29, 0.2); position: relative; height: clamp(150px, 19vw, 250px); margin-top: 56px; overflow: hidden; background: linear-gradient(180deg, var(--fb-a), var(--fb-b)); border-top: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); perspective: 620px; perspective-origin: 50% 0; }
:root[data-theme='dark'] .floorband { --fb-a: #14171b; --fb-b: #0f1114; --fb-grid: rgba(255, 255, 255, 0.15); }
.floorband::after { content: ""; position: absolute; inset: auto 0 0 0; height: 70%; background: linear-gradient(180deg, transparent, var(--paper)); }
.plane { position: absolute; left: -70%; right: -70%; top: 0; height: 300%; transform-origin: 50% 0; transform: rotateX(76deg); background-image: linear-gradient(to right, var(--fb-grid) 1px, transparent 1px), linear-gradient(to bottom, var(--fb-grid) 1px, transparent 1px); background-size: 80px 80px; background-position: center top; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 100%); animation: open 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s both; }
.plane::before, .plane::after { content: ''; position: absolute; }
.plane::before { left: 0; right: 0; top: 200px; height: 3px; background: var(--x); }
.plane::after { top: 0; bottom: 0; left: calc(50% - 1.5px); width: 3px; background: var(--z); }
@keyframes open { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } }
.section.tight { padding-top: clamp(24px, 4vw, 48px); }
.section h2 { margin-bottom: clamp(28px, 4vw, 52px); }
.notice { padding: 28px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); }
.notice a { color: var(--z-text); }
@media (max-width: 1000px) { .plane::before { top: 150px; } }
@media (max-width: 640px) { .phead { padding-top: 100px; } }