:root {
  --bg: #0d0d0c; --bg-2: #0b0b0a; --surface: #151513; --raise: #1c1c19; --text: #ece6d9; --vellum: #cfc8ba; --muted: #a49e93; --faint: #8a857b;
  --line: rgba(236,230,217,.10); --line-2: rgba(236,230,217,.18); --mark: #e8603f;
  --ui: "Inter", "Segoe UI", system-ui, sans-serif; --serif: "Newsreader", Georgia, serif; --sans: var(--ui);
  --f-mine: #e8603f; --f-team: #5a564f; --f-gate: #f0b48e; --f-opt: #8f8a80; --f-line: #3d3a35; --f-text: #ece6d9; --f-muted: #a49e93;
  --f-surface: #151513; --f-surface-hi: #221813; --f-bg: #0d0d0c;
}
.grid-bg { position: relative; }
.grid-bg::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: calc((min(100vw, 1280px) - 2 * clamp(20px, 4.4vw, 64px)) / 6) 100%;
  background-position: max(clamp(20px, 4.4vw, 64px), calc((100vw - 1280px) / 2 + 64px)) 0; opacity: .7; }

.mast { position: sticky; top: 0; z-index: 20; background: rgba(13,13,12,.86); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.mast .wrap { display: flex; align-items: center; gap: 34px; height: 76px; }
.word { font-family: var(--serif); font-size: 24px; letter-spacing: -.015em; margin-right: auto; }
.word i { color: var(--mark); font-style: normal; }
.nav a { font-size: 14.5px; color: var(--muted); margin-left: 30px; transition: color .15s; }
.nav a:hover, .nav a.on { color: var(--text); }
.cv { font-size: 14px; color: var(--faint); }
.menu { display: none; }

.no { font-size: 14px; color: var(--mark); }
.std { font-family: var(--serif); font-size: 22px; line-height: 1.45; color: var(--vellum); font-weight: 350; }
.bp { display: inline-flex; align-items: center; height: 50px; padding: 0 24px; background: var(--text); color: var(--bg); font-weight: 550; font-size: 15.5px; border-radius: 3px; transition: background .2s; }
.bp:hover { background: #fff; }
.bt { font-size: 15.5px; border-bottom: 1px solid var(--mark); padding-bottom: 2px; transition: border-width .15s; }
.bt:hover { border-bottom-width: 2px; }
.cover-hover { position: relative; display: block; }
.art-tag { position: absolute; left: 12px; top: 12px; z-index: 2; padding: 4px 9px; border-radius: 4px; background: rgba(13,13,12,.62); backdrop-filter: blur(6px); font-size: 12px; letter-spacing: .02em; color: #cfc8ba; box-shadow: inset 0 0 0 1px rgba(236,230,217,.14); pointer-events: none; }
.cap { margin-top: 12px; font-size: 13.5px; color: var(--faint); line-height: 1.5; }
.cap b { color: var(--mark); font-weight: 500; margin-right: 4px; }
.cap.art b { color: var(--muted); }

.spec { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.spec > div { padding: 18px 24px 20px; border-left: 1px solid var(--line); }
.spec > div:first-child { border-left: 0; padding-left: 0; }
.spec h4 { font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.spec .me h4 { color: var(--mark); }
.spec h4 small { display: block; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--faint); font-size: 12.5px; margin-top: 2px; }
.spec ul { margin: 0; padding: 0; list-style: none; }
.spec li { font-size: 15px; color: var(--muted); padding: 4px 0; line-height: 1.5; }
.spec .me li { color: var(--vellum); }

.figure { padding: 32px 32px 22px; background: var(--surface); border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line); }
.fig-svg { display: block; width: 100%; height: auto; }
.fig-svg .ft { font: 600 15px var(--ui); fill: var(--f-text); letter-spacing: -.01em; }
.fig-svg .fs { font: 400 12.5px var(--ui); fill: var(--f-muted); }
.fig-svg .fs2 { font: 500 13.5px var(--ui); fill: var(--f-text); }
.fig-svg .fl { font: 600 13px var(--ui); fill: var(--f-muted); letter-spacing: .04em; text-transform: uppercase; }
.fig-svg .fl.mine { fill: var(--f-mine); }
.fig-svg .fck { font: 700 14px var(--ui); fill: var(--f-mine); }
.fig-svg .fa { fill: none; stroke: var(--f-muted); stroke-width: 1.3; }
.fig-svg .fa.opt { stroke-dasharray: 4 5; }
.fig-steps { display: none; list-style: none; margin: 0; padding: 0; }
.fig-steps li { display: grid; grid-template-columns: 2.4em 1fr; gap: 10px; padding: 14px 0; border-top: 1px solid var(--line); }
.fig-steps li > span { font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.fig-steps li.is-mine > span { color: var(--f-mine); }
.fig-steps li.is-gate > span { color: var(--f-gate); }
.fig-steps b { display: block; font-weight: 600; color: var(--text); }
.fig-steps p { margin: 4px 0 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px; font-size: 13.5px; color: var(--muted); padding: 0; list-style: none; }
.legend li { display: inline-flex; align-items: center; gap: 8px; }
.legend li::before { content: ""; width: 16px; height: 11px; border-radius: 3px; border: 1.5px solid var(--f-team); }
.legend .m::before { border-color: var(--f-mine); background: var(--f-surface-hi); }
.legend .g::before { border-color: var(--f-gate); }
.legend .o::before { border-style: dashed; border-color: var(--f-opt); }

.foot { border-top: 1px solid var(--line); }
.foot .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 26px; padding-bottom: 40px; font-size: 13.5px; color: var(--faint); }

@media (max-width: 900px) {
  .grid-bg::before { background-size: 50% 100%; background-position: 20px 0; opacity: .3; }
  .mast .wrap { height: 64px; } .word { font-size: 21px; }
  .nav, .cv { display: none; } .menu { display: block; font-size: 14.5px; color: var(--text); }
  .std { font-size: 19px; }
  .spec { grid-template-columns: 1fr; border-bottom: 0; }
  .spec > div, .spec > div:first-child { border-left: 0; padding: 16px 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 1259px) {
  .fig-svg { display: none; }
  .fig-steps { display: block; }
  .figure { padding: 6px 18px 16px; }
}