/* Инструменты 2.0: вид портфолио Ego Forge (ver2). Правила и цвета взяты из
   src/pages/ver2/index.astro проекта C:\Case\Vibecoding\Ego Forge. */
@font-face { font-family: "Geologica Variable"; font-weight: 400 800; font-display: swap; src: url(/fonts/setka-geologica-400-800-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Geologica Variable"; font-weight: 400 800; font-display: swap; src: url(/fonts/setka-geologica-400-800-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Golos Text Variable"; font-weight: 400 700; font-display: swap; src: url(/fonts/setka-golos-text-400-700-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text Variable"; font-weight: 400 700; font-display: swap; src: url(/fonts/setka-golos-text-400-700-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url(/fonts/setka-ibm-plex-mono-400-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url(/fonts/setka-ibm-plex-mono-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url(/fonts/setka-ibm-plex-mono-500-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url(/fonts/setka-ibm-plex-mono-500-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --paper: #f5f3ed; --sheet: #fcfbf8; --ink: #14161a; --ink-2: #43474f; --ink-3: #74787f;
  --line: #d9d5ca; --line-2: #b8b4aa; --red: #f0642f; --red-wash: #fde6dc; --pen: #2456c4; --green: #1b6a44; --green-wash: #dbeadf;
  --geo: "Geologica Variable", "Golos Text Variable", system-ui, sans-serif;
  --sans: "Golos Text Variable", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --pad: clamp(16px, 2.6vw, 40px); --rail: clamp(0px, 5.5vw, 80px);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: #121418; --sheet: #181b20; --ink: #eceae5; --ink-2: #babdc3; --ink-3: #868b93;
  --line: #2a2e35; --line-2: #3e434b; --red: #ff7a3d; --red-wash: #ff7a3d21; --pen: #84a9ff; --green: #40cf96; --green-wash: #40cf961f;
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--paper); color: var(--ink); font: 17px/1.55 var(--sans); scroll-behavior: smooth; scroll-padding-top: 48px; -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; overflow-x: clip; }
a { color: inherit; }
img { display: block; max-width: 100%; }
em { font-style: normal; color: var(--red); }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.kick, .dim, .mono-note, .sbar, .cell, .b, .chips li, .c-links, .num { font-family: var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.kick { font-size: 11.5px; color: var(--ink-3); }

.bar { position: sticky; top: 0; z-index: 30; height: 48px; display: flex; background: var(--paper); border-bottom: 1px solid var(--line-2); }
.cell { display: flex; align-items: center; padding: 0 18px; font-size: 12px; font-weight: 500; text-decoration: none; border-right: 1px solid var(--line); background: none; border-top: 0; border-bottom: 0; border-left: 0; color: var(--ink); cursor: pointer; }
.cell:hover { color: var(--red); }
.logo { width: 64px; justify-content: center; padding: 0; }
.bolt { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--red); font-size: 15px; }
.links { display: flex; flex: 1; }
.tag { margin-left: 18px; border: 0; }
.tag b { background: var(--ink); color: var(--paper); padding: 3px 8px; font-weight: 500; letter-spacing: .14em; }
.right { display: flex; }
.right .cell { border-right: 0; border-left: 1px solid var(--line); }
.icon { width: 48px; justify-content: center; padding: 0; }
.sq { width: 16px; height: 16px; border: 1.5px solid currentColor; border-radius: 50%; background: linear-gradient(90deg, transparent 50%, currentColor 50%); }
.go { background: var(--red); color: #fff !important; font-weight: 600; padding: 0 22px; }
.go:hover { filter: brightness(1.05); }

.frame { margin: 0 var(--rail); border-left: 1px solid var(--line); border-right: 1px solid var(--line); min-height: calc(100vh - 48px); }
section { border-bottom: 1px solid var(--line); position: relative; }
.sbar { display: flex; justify-content: space-between; gap: 16px; padding: 14px var(--pad); font-size: 12px; font-weight: 500; border-bottom: 1px solid var(--line); position: relative; }
.sbar::before, .sbar::after { content: "+"; position: absolute; top: -10px; font: 300 16px/1 var(--mono); color: var(--line-2); }
.sbar::before { left: -6px; } .sbar::after { right: -6px; }
.dim { color: var(--ink-3); font-size: 12px; }

.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; padding: clamp(40px, 6vw, 84px) var(--pad) clamp(40px, 5vw, 68px); align-items: center; }
h1 { font: 800 clamp(44px, 6.4vw, 92px)/1 var(--geo); letter-spacing: -.035em; }
.lede { font-size: clamp(17px, 1.35vw, 20px); color: var(--ink-2); max-width: 640px; margin-top: 26px; }
.b { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 24px; font-size: 12.5px; font-weight: 600; text-decoration: none; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; transition: background .15s, color .15s; }
.b:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.b.solid { background: var(--ink); color: var(--paper); }
.b.solid:hover:not(:disabled) { background: var(--red); border-color: var(--red); color: #fff; }
.b:disabled { opacity: .35; cursor: not-allowed; }
.mono-note { font-size: 11.5px; color: var(--ink-3); margin-top: 14px; }

.ic { display: block; transition: transform .2s; }
.ic img { display: block; width: 100%; height: auto; aspect-ratio: 1;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0C12 0 0 12 0 50s12 50 50 50 50-12 50-50S88 0 50 0z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0C12 0 0 12 0 50s12 50 50 50 50-12 50-50S88 0 50 0z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }

.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; background: var(--paper); }
.grid .card:nth-child(4n) { border-right: 0; }
.c-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 22px; border-bottom: 1px solid var(--line); }
.num { background: var(--red); color: #fff; font-size: 12px; padding: 4px 8px; letter-spacing: .04em; }
.c-head .dim { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-shot { display: block; aspect-ratio: 1200 / 670; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--sheet); }
.c-shot img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .5s; }
.card:hover .c-shot img { transform: scale(1.04); }
.c-body { position: relative; padding: 0 22px 24px; display: flex; flex-direction: column; flex: 1; }
.c-icon { width: 76px; margin-top: -38px; }
.card h3 { font: 800 clamp(22px, 1.9vw, 30px)/1.08 var(--geo); letter-spacing: -.025em; margin: 16px 0 10px; }
.card h3 a { text-decoration: none; }
.card p { color: var(--ink-2); font-size: 15.5px; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 22px; }
.chips li { font-size: 10.5px; padding: 3px 7px; border: 1px solid var(--line-2); color: var(--ink-2); }
.chips .st.live { border-color: var(--green); color: var(--green); background: var(--green-wash); }
.c-links { margin-top: auto; display: flex; justify-content: space-between; gap: 12px; font-size: 11.5px; }
.c-links a { text-decoration: none; color: var(--pen); }
.c-links a:hover { color: var(--red); }
.card.next { background: var(--sheet); }
.card.next .c-body { padding-top: 34px; justify-content: center; gap: 4px; }
.card.next h3 { font-size: clamp(26px, 2.4vw, 36px); }

.cols4 { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols4 li { padding: 26px var(--pad) 30px; border-right: 1px solid var(--line); }
.cols4 li:last-child { border-right: 0; }
.cols4 h3 { font: 800 21px/1.15 var(--geo); letter-spacing: -.02em; margin: 14px 0 8px; }
.cols4 p { color: var(--ink-2); font-size: 15.5px; }

.f-links { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); font: 500 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.f-links > * { padding: 12px 16px; border-right: 1px solid var(--line); text-decoration: none; white-space: nowrap; }
.f-links > *:first-child { padding-left: var(--pad); background: var(--ink); color: var(--paper); }
.f-links a:hover { background: var(--ink); color: var(--paper); }

.f-base { display: flex; justify-content: space-between; gap: 16px; padding: 16px var(--pad); font: 500 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.f-base a { text-decoration: none; }
.f-base a:hover { color: var(--red); }

@media (max-width: 1250px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid .card:nth-child(4n) { border-right: 1px solid var(--line); }
  .grid .card:nth-child(3n) { border-right: 0; }
}
@media (max-width: 900px) {
  :root { --rail: 0px; }
  .links .cell:not(.tag), .hide-s { display: none; }
  .hero { grid-template-columns: 1fr; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid .card:nth-child(3n) { border-right: 1px solid var(--line); }
  .grid .card:nth-child(2n) { border-right: 0; }
  .cols4 { grid-template-columns: 1fr 1fr; }
  .cols4 li:nth-child(2) { border-right: 0; }
  .cols4 li { border-bottom: 1px solid var(--line); }
}
@media (max-width: 600px) {
  .grid, .cols4 { grid-template-columns: 1fr; }
  .grid .card { border-right: 0 !important; }
  .cols4 li { border-right: 0; }
  .sbar .dim { display: none; }
  .tag { display: none; }
  .go { padding: 0 14px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }